/*-------------------------------- banner section---------------------*/
.banner-box
{
  position: relative;
  top: 185px;
}
#banner {
    background-size: cover;
    width: 100%;
    padding-bottom: 250px;
    background-repeat: no-repeat;
}
.banner-sub-heading {
    font: normal normal 400 46px/71px Spartan;
    color: var(--brown);
    margin-top: -26px;
}
.banner-main-heading {
    font: normal normal 700 46px/100px Spartan;
    color: var(--pink);
}
.banner-para1 {
    max-width: 450px;
    font: normal normal 500 13px/23px Spartan;
    color: #ACACAC;
}
.counter-value,.counter_suffix {
    font: normal normal bold 32px/130px Spartan;
    color: var(--black);
}
.counter.recrd_inner {
    margin-top: -20px;
}
.record_title {
    font: normal normal 500 13px/0px Spartan;
    color: #8b8b8b;
    margin-top: -20px;
    margin-left: -15px;
}
.read-more-banner,.more-about,.more-portfolio,.read-more-hire-me {
    border-radius: 0px 25px 0px 0px;
    font: normal normal 600 12px/17px Spartan;
    text-decoration: none;
    background: var(--pink);
    color: white;
    padding: 15px 21px 11px 16px;
}
.read-more-banner:hover,.more-about:hover,.more-portfolio:hover,.read-more-hire-me:hover
{
  color: white;
}
.circle-box {
    background: var(--blue);
    height: 55%;
    width: 55%;
    position: absolute;
    border-radius: 50%;
    right: -46%;
    bottom: -51px;
}
.circle-inner-box {
    position: absolute;
    bottom: 43%;
    transform: rotate(270deg);
    left: 9%;
    cursor: pointer;
}
.circle-ins
{
    display: flex;
}
.circle-ins i
{
       color: #ffffffcf;
    border: 2px solid #ffffffba;
    border-radius: 50px;
    width: 42px;
    height: 21px;
    padding: 2px 0px 5px 19px;
    font-size: 13px;
}
.circle-main-heading {
    font: normal normal 600 12px/19px Spartan;
    color: white;
    margin-left: 15px;
}
.banner-sec
{
    position: relative;
}
.counter-box3 {
    margin-left: -44px;
}
.banner-img img {
    width: 100%;
}
/*----------------------- our services---------------------*/
.services-inner-box1, .services-inner-box2, .services-inner-box3 {
    box-shadow: 0px 0px 15px #00000012;
    border-radius: 25px;
    background: white;
    padding: 46px 35px 27px 35px;
}
.card-box h4 a {
    font: normal normal 600 21px/36px Spartan;
    color: var(--black);
    text-decoration: none;
}
.card-box-text p {
    font: normal normal 500 13px/22px Spartan;
    color: #ACACAC;
}
.services-inner-box1 img,.services-inner-box2 img,.services-inner-box3 img {
    background: var(--yellow);
    width: 67px !important;
    border-radius: 50px;
    height: 67px;
    padding: 16px;
    margin: 0 auto;
    animation: zoomIn 1.2s infinite;
}
.services-inner-box2 img
{
    background: var(--purple);
}
.services-inner-box3 img
{
  background: var(--pink);
}
#services .owl-carousel .owl-stage-outer
{
    padding-top: 35px;
    padding-bottom: 27px;
    padding-left: 2px;
}
.our-services-main-heading,.our-testimonial-main-heading {
    font: normal 600 20px/31px Spartan;
    color: var(--pink);
}
.our_services-sub-heading,.our_testimonial-sub-heading {
    font: normal normal 700 31px/46px Spartan;
    letter-spacing: 0px;
    color: #222222;
    max-width: 322px;
}
.section-headings {
    position: absolute;
    left: 11%;
}
.services-boxs {
    position: relative;
}
#services .owl-prev i,#services .owl-next i,#testimonial .owl-prev i,#testimonial .owl-next i{
    background: #EEEEEE;
    color: #000000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 16px 15px;
    font-size: 20px;
}
#services .owl-nav,#testimonial .owl-nav {
    position: absolute;
    top: 69%;
    left: -54%;
}
#services .owl-prev,#services .owl-next,#testimonial .owl-prev,#testimonial .owl-next{
    position: absolute;
}
#services .owl-next,#testimonial .owl-next {
    left: 72px;
}
#services .owl-prev i:hover,#services .owl-next i:hover,#testimonial .owl-prev i:hover,#testimonial .owl-next i:hover{
    background: var(--pink);
    color: white;
}
/*------------------------------- about us--------------------*/
.about-second {
    position: relative;
}
.about_left_middle_img img {
    width: 93%;
}
.about-left-boxes {
    position: absolute;
    top: -90px;
    left: -42%;
}
.about-left-boxes img {
    position: relative;
    left: 63px;
}
.about-us-bottom-box {
    font: normal normal 600 16px/24px Spartan;
    color: var(--brown);
}
.about-bottom-box {
    background: white;
    position: absolute;
    top: 83%;
    left: -11%;
    padding: 14px 24px 12px 26px;
    width: 46%;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0px 0px 20px #00000014;
}
.about-right3 {
    position: relative;
    left: -15px;
    border: 4px solid white;
    border-radius: 50%;
    height: 47px !important;
    width: 48px !important;
    top: -3px;
}
.about-right4 {
    position: relative;
    left: -27px;
    border: 4px solid white;
    border-radius: 50%;
    width: 46px !important;
    height: 46px !important;
    top: -4px;
}
.about-middle-box {
    display: flex;
}
.about-bottom-box img {
    width: 40px;
    height: 40px;
}
.about-right2 {
    position: relative;
    left: -7px;
    border-left: 4px solid white;
    border-radius: 50%;
    width: 45px !important;
}
.about-right5 {
    position: relative;
    left: -39px;
    border: 4px solid white;
    border-radius: 50%;
    width: 46px !important;
    height: 46px !important;
    top: -4px;
}
.image-bottom-boxs {
    position: absolute;
    top: 76%;
    background: var(--pink);
    height: 50px;
    width: 50px;
    padding: 11px;
    border-radius: 10px;
    left: -81px;
}
.about-us-bottom-img-text {
    font: normal normal 600 12px/15px Spartan;
    background: var(--pink);
    color: white;
    width: 42px;
    height: 40px;
    padding: 14px 8px 0 8px;
    position: relative;
    left: -50px;
    border-radius: 50%;
    top: -1px;
}
.about-us-main-heading {
    font: normal normal 600 22px/32px Spartan;
    color: var(--pink);
}
.about-us-para1 {
    font: normal normal 700 34px/54px Spartan;
    color: var(--brown);
    max-width: 380px;
}
.about-us-para2 {
    font: normal normal 500 13px/25px Spartan;
    color: #ACACAC;
    max-width: 374px;
}
/*----------------------- portfolio-------------------------*/
#MyPortfolio h6 {
    font: normal normal 600 19px/31px Spartan;
    color: var(--pink);
}
.portfolio-subhead {
    font: normal normal 700 30px/61px Spartan;
    color: var(--brown);
}
#MyPortfolio {
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
}
#MyPortfolio .nav-tabs,#MyPortfolio .nav-tabs .nav-link
{
    border: unset;
    cursor: pointer;
}
.project-tabs li a{
    font: normal normal 600 16px/24px Spartan;
    color: #C2C2C2;
}
.project-tabs li a {
    text-decoration: none;
    padding-right: 43px;
}
#MyPortfolio .nav-tabs .nav-link.active {
    color: var(--pink);
}
.project-tabs li a:hover
{
    color: var(--pink);
}
.feature-heading {
    font: normal normal 600 18px/26px Spartan;
    text-decoration: none;
    color: var(--brown);
}
.read_more_portfolio_button:before {
    content: '';
    display: block;
    width: 170px;
    position: absolute;
    top: 65%;
    left: -37%;
    right: 0;
    margin: 0 auto;
    border: 1px solid #c2c2c242;
}
.read_more_portfolio_button:after {
    content: '';
    display: block;
    width: 170px;
    position: absolute;
    top: 65%;
    left: 37%;
    right: 0;
    margin: 0 auto;
    border: 1px solid #c2c2c242;
}
.read_more_portfolio_button,#MyPortfolio .nav-tabs
{
    position: relative;
}
#MyPortfolio .nav-tabs:after {
    content: '';
    display: block;
    border-top: 2px solid #c2c2c242;
    position: absolute;
    top: 52%;
    left: auto;
    right: 17%;
    width: 26%;
}
#MyPortfolio .owl-carousel .owl-nav {
    display: block !important;
    position: absolute;
    left: auto;
    right: 62px;
    top: -85px;
}
#MyPortfolio .owl-carousel .owl-nav button.owl-prev i,#MyPortfolio .owl-carousel .owl-nav button.owl-next i
{
    background: var(--pink);
    color: white;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    padding: 8px 9px;
}
#MyPortfolio .owl-carousel .owl-nav button.owl-next i {
    position: absolute;
    top: 0;
    right: -58px;
}
#MyPortfolio .owl-carousel .owl-nav button.owl-prev i:hover,#MyPortfolio .owl-carousel .owl-nav button.owl-next i:hover
{
    background: var(--blue);
}
#MyPortfolio .nav-tabs .nav-link.active
{
    background: unset;
}
/*------------------------------Achievements---------------------*/
#achievements,#our-recent-work {
        height: 309px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 95px;
    position: relative;
}
.achievements-box img {
    width: auto !important;
    margin: 0 auto;
}
.achievements-main-head {
    font: normal normal 500 20px/31px Spartan;
    color: var(--pink);
}
.achievements-subhead {
    font: normal normal 700 33px/61px Spartan;
    color: var(--brown);
}
.achievements-box h4 a {
    font: normal normal 600 20px/31px Spartan;
    color: var(--black);
    text-decoration: none;
}
.achievements-box p {
    font: normal normal 500 13px/25px Spartan;
    color: #ACACAC;
    margin: 0 auto;
    max-width: 220px;
}
.achievements-main-box
{
    box-shadow: 0px 0px 20px #00000014;
    border-radius: 25px;
    background: white;
    padding: 27px 15px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -48px;
}
/*--------------------------- hire-me--------------------------*/
.hire-me-box {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-radius: 25px;
}
.hire-me-main-heading {
    font: normal normal 700 29px/61px Spartan;
    color: white;
}
.hire-me-para {
    font: normal normal normal 12px/22px Spartan;
    color: white;
    max-width: 595px;
}
.read-more-hire-me
{
    font: normal normal 600 13px/17px Spartan;
   padding: 15px 44px 11px 31px;
}
.hire-me-bottom-img {
    width: 131%;
    position: relative;
    top: -109px;
    left: -50px;
    height: 284px;
}
#hire-me {
    position: relative;
    top:131px;
}
/*------------------- recent work-----------------*/
#our-recent-work {
    margin-top: 115px;
}
.our-recent-work-main-heading {
    font: normal normal 500 21px/31px Spartan;
    letter-spacing: 0px;
    color: #DEDEDE;
}
.our-recent-work-sub-heading {
    font: normal normal 700 33px/32px Spartan;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.Our-recent-work-title a {
    font: normal normal 600 18px/29px Spartan;
    color: var(--black);
    text-decoration: none;
}
.recent-work-boxs .post-description {
    font: normal normal 500 12px/25px Spartan;
    letter-spacing: 0px;
    color: #ACACAC;
}
.our-recent-work-boxes {
    box-shadow: 0px 0px 20px #00000014;
    border-radius: 25px;
    background: white;
    padding: 16px 12px 30px 12px;
}
.our-recent-work-img img {
    border-radius: 25px;
}
.read-more-recent-work {
    font: normal normal 500 13px/25px Spartan;
    letter-spacing: 0px;
    text-decoration: none;
    color: #222222;
    position: relative;
}
.recent-work-boxs .owl-carousel .owl-stage-outer
{
  padding-bottom: 30px;
  padding-top: 5px;
}
.recent-button2 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
}
.recent-work-button {
    text-align: center;
    position: relative;
}
.recent-button2 a {
    font: normal normal 500 12px/14px Spartan;
    letter-spacing: 0px;
    text-decoration: none;
    color: white;
    border-radius: 0px 20px 0px 0px;
    background: var(--pink);
    padding: 10px 10px;
    opacity: 0;
}
.read-more-recent-work:after {
    content: '';
    display: block;
    position: absolute;
    border-bottom: 1px solid #c2c2c2c9;
    left: 0;
    right: 0;
}
#vw-recent {
    position: relative;
    top: -148px;
}
.Our-recent-work-title a:hover
{
  color: var(--black);
}
.our-recent-work-boxes:hover .recent-button2 a
{
    opacity: 1;
}
.recent-button2 a:hover
{
    color: white;
}
#vw-recent .owl-dot.active {
    background: var(--pink) !important;
    width: 37px;
    height: 8px;
    border-radius: 20px;
}
#vw-recent .owl-dot span {
    background: #C2C2C2;
    width: 9px !important;
    height: 9px;
    display: block;
    border-radius: 50%;
    margin-left: 15px;
    margin-right: 15px;
}
#vw-recent .owl-dot.active span {
    background: unset;
}
#vw-recent .owl-dots {
    text-align: center;
}
/*----------------------- team-------------------*/
#our-team {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: -134px;
}
#our-team h6 {
    font: normal normal 600 19px/31px Spartan;
    color: var(--pink);
}
#our-team h2 {
    font: normal normal 700 33px/61px Spartan;
    color: var(--brown);
}
.team-inner-box1 .team-inner-boxs {
    background: var(--purple);
}
.team-inner-boxs img {
    width: auto !important;
    margin: 0 auto;
}
.team-inner-boxs
{
    border-radius: 20px;
}
.team-inner-box2 .team-inner-boxs {
    background: var(--pink);
}
.team-inner-box3 .team-inner-boxs {
    background: var(--yellow);
}
.team-box-content h4 a {
    font: normal normal 600 22px/36px Spartan;
    text-decoration: none;
    color: var(--black);
}
.team-box-content p {
    font: normal normal 500 14px/30px Spartan;
    color: #ACACAC;
}
.team-socialbox i {
    color: #888888;
    background: #f7f7f7;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 9px 11px;
    font-size: 14px;
}
.team-socialbox .fa-instagram {
    margin: 0 20px;
}
.team-box-content.pb-5 {
    box-shadow: 0px 0px 15px #00000012;
    border-radius: 25px;
    background: white;
    padding: 17px 15px 0 15px;
}
.team-inner-bx {
    height: 0;
    padding: 0 0 99px 0;
}
#our-team .owl-carousel .owl-stage-outer
{
    padding-bottom: 30px;
    padding-left: 5px;
}
.team-socialbox i:hover
{
    background: var(--blue);
    color: white;
}
/*------------------------ testimonial section-------------------*/
.feature-img {
    width: auto !important;
}
.quotes-imgs {
    background: #C2C2C2;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    padding: 11px 12px;
    margin: 24px 0 -7px 0;
}
.testimonial-boxs {
    position: relative;
}
.testimonial-inner-box {
    box-shadow: 0px 0px 20px #00000014;
    border-radius: 20px;
    background: white;
    padding: 10px 29px 13px 23px;
}
#testimonial h4 a {
    font: normal normal 600 19px/26px Spartan;
    color: var(--black);
}
#testimonial .card-box-text p {
    font: normal normal 500 12px/22px Spartan;
    color: #ACACAC;
}
#testimonial .owl-nav
{
    display: block !important;
}
.testimonial-box {
    position: relative;
    left: -3%;
}
#testimonial .section-headings {
    position: absolute;
    left: 2%;
}
#testimonial .owl-carousel .owl-stage-outer
{
  padding: 26px 5px;
}
.tesstimonial-rating .fas {
    color: var(--yellow);
    font-size: 14px;
}
.testimonial-inner-box:hover .quotes-imgs {
 background: var(--pink);
 transition: all 0.5s ease-in-out;
}
/*---------------------- contact us section-------------------*/
.contact-us-main-heading {
    font: normal normal 600 20px/31px Spartan;
    color: var(--pink);
}
.contact_us-sub-heading {
    font: normal normal 700 31px/38px Spartan;
    color: var(--brown);
}
.contact-boxes {
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.our-contact-shortcode label {
    font: normal normal 700 14px/23px Spartan;
    color: #595959;
}
 #contact-us input[type="email"],#contact-us input[type="number"],#contact-us input[type="text"],#contact-us textarea,#contact-us select {
    width: 60%;
    padding: 0px 0 0 0;
    margin-bottom: 25px;
    font-size: 14px;
    color: #5b5656;
    font-weight: 500;
    font-family: var(--font-mont);
    background: white;
    border-bottom: 2px solid #c2c2c242 !important;
    border: unset;
}
 .contact-box-inner {
    box-shadow: 0px 0px 25px #00000014;
    background: white;
    border-radius: 20px;
    padding: 20px 20px;
}
.contact-info-box h2 {
    font: normal normal 600 18px/29px Spartan;
    color: white;
}
.contact-heads {
    font: normal normal normal 12px/21px Spartan;
    letter-spacing: 0px;
    color: #C2C2C2;
}
.contact-info-box a {
    font: normal normal 500 12px/25px Spartan;
    color: #C2C2C2;
    text-decoration: none;
}
.contact-info-box img {
    height: 21px;
}
.social_icon i {
    color: white;
    font-size: 15px;
    margin-right: 20px;
}
.contact-bottom-box {
    margin-left: 4em;
}
#contact-us .your-service {
    font: normal normal 500 14px/21px Spartan;
    letter-spacing: 0px;
    position: relative;
    left: -13px;
    color: #222222;
}
#contact-us .wpcf7-list-item {
    display: inline-block;
    margin-right: 2em;
}
#contact-us .wpcf7-list-item-label {
    font: normal normal 600 13px/23px Spartan;
    color: #595959;
    padding-left: 13px;
}
#contact-us input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #C2C2C2;
}
#contact-us input[type='radio']:checked:after {
    background-color: var(--purple);
    content: '';
    border: unset;
}
#contact-us input {
    float: left;
    margin-top: 3px;
    cursor: pointer;
}
#contact-us [type=submit] {
    background: var(--purple);
    color: white;
    border: unset;
    position: relative;
    top: 40px;
    margin-bottom: 47px;
    font: normal normal 600 14px/17px Spartan;
    padding: 16px 35px 11px 35px;
    border-radius: 25px;
}
#contact-us textarea {
    height: 47px;
    font: normal normal normal 13px/17px Spartan !important;
    letter-spacing: 0px;
    color: #C2C2C2;
    position: relative;
    top: 21px;
}
#contact-us .fa-instagram:hover,#contact-us .fa-basketball-ball:hover {
    background: var(--yellow);
    width: 30px;
    height: 30px;
    padding: 9px 8px;
    border-radius: 50%;
}
#contact-us .fa-linkedin-in:hover,#contact-us .fa-facebook-f:hover {
    background: var(--yellow);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    padding: 8px 7px;
    margin-left: 0;
}
.contact-info-box a:hover
{
    color: #C2C2C2;
}
.gradient-heading {
    background: -o-linear-gradient(45deg, #ff8a00, #e52e71, #044bea, #7a00ff);
    background: linear-gradient(45deg, #ff4f6e, #009dae, #ffaf00, #9c19c9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    -webkit-animation: gradient-text 8s ease infinite;
    animation: gradient-text 8s ease infinite;
}
 @-webkit-keyframes gradient-text {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
 @keyframes gradient-text {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
.services-inner-box1:hover,.team-inner-box3:hover {
    box-shadow: #ffaf0047 0px 2px 12px 0px;
    margin-top: -5px;
    transition: all 0.5s ease-in-out;
}
.services-inner-box2:hover,.vw-portfolio-box img:hover,.our-recent-work-boxes:hover,.team-inner-box1:hover {
    box-shadow: #9c19c940 0px 2px 12px 0px;
    margin-top: -5px;
    transition: all 0.5s ease-in-out;
}
.services-inner-box3:hover,.team-inner-box2:hover,.testimonial-inner-box:hover{
    box-shadow: #ff4f6e3b 0px 2px 12px 0px;
    margin-top: -5px;
    transition: all 0.5s ease-in-out;
}
.read-more-banner:hover, .more-about:hover, .more-portfolio:hover, .read-more-hire-me:hover{
    background-size: 100% 100%;
    color: #fff !important;
    box-shadow: 4px 2px 12px 1px #ccc;
}
.read-more-banner, .more-about, .more-portfolio, .read-more-hire-me {
    background-image: linear-gradient(-225deg, #000000 0%, #ff4f6e 0%, #ffaf00 67%, #ffaf00 100% );
    background-size: 0 0;
    transition: .8s;
    background-repeat: no-repeat;
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.about-second:hover .about-bottom-box {
    box-shadow: #ff4f6e3b 0px 2px 12px 0px;
    margin-top: -5px;
    transition: all 0.5s ease-in-out;
}
.image-bottom-boxs
{
    animation: zoomIn 1.2s infinite;
}
.vw-portfolio-box img:hover
{
    border-radius: 10px;
    padding: 5px;
}
.achievements-box:hover img {
    transition: 1s;
    -webkit-transition: .7s;
    transform: rotateY(360deg);
}
.team-inner-box1:hover,.team-inner-box2:hover,.team-inner-box3:hover
{
    border-radius: 25px;
}
.contact-bottom-box .wpcf7-not-valid-tip
{
    display: inline-block;
}
.banner-img img {
    width: 100%;
}