/* -----------------------------------------------------
	Responsive Styles
----------------------------------------------------- */
@media screen and (max-width: 1399px) {

.testimonials .owl-carousel { padding: 0 50px; }
.faqs-section .accordion { padding-left: 50px; }


}

@media screen and (max-width: 1299px) {

header .navbar-nav { column-gap: 60px; } 
.service-box .content { padding-right: 70px; }
.service-box figure { padding-left: 35px; }
.service-box:nth-child(2n) figure { padding: 0 35px 0 0; }
.service-box:nth-child(2n) .content { padding: 0 20px 0 35px; }


}

@media screen and (max-width: 1199px) {

h2 { font-size: 43px; }
header .header-btn { font-size: 18px; }
header .navbar-nav { column-gap: 23px; }
footer .footer-top { flex-wrap: wrap; }
footer .subscribe-block { flex: 0 0 100%; max-width: 100%; justify-content: space-between; }
footer .logo { margin: 0 auto; }
footer .copy-rights { row-gap: 15px; }
footer .copy-rights ul { flex: 0 0 100%; justify-content: center; }
.service-box .content { padding-right: 50px; }
.service-box figure { padding-left: 25px; }
.service-box:nth-child(2n) figure { padding: 0 25px 0 0; }
.service-box:nth-child(2n) .content { padding: 0 15px 0 25px; }
.how-we-work { padding: 80px 0; }
.how-we-work .service-box h2 { font-size: 90px; }
.how-we-work .service-box .content { padding: 10px 15px; }
.testimonials { padding: 90px 0; } 
.testimonials .testimonial { margin: 10px 10px; }
.experts-section { padding: 90px 0; }
.faqs-section .accordion { padding-left: 0; }
.faqs-section { padding: 80px 0; }
.expertise-results { padding: 90px 0; }
.trusted-section { padding: 80px 0; }
.trusted-section .logo-card { min-width: 200px; padding: 0 15px; }



}

@media screen and ( min-width:992px ) { 

li.dropdown > ul.dropdown-menu {
    display: block;
    top: 90px;
    margin: 0 auto;
    opacity: 0;
    padding: 0;
    left: -100%;
    right: -100%;
    max-width: 210px;
    min-width: 0;
    background-color: #484644; 
    /*border: 1px solid #f8f8f8;*/
    text-align: left; 
    transform: scale(0.8);
    transition: all 0.4s ease 0s;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.176);
  }

li.dropdown:hover > ul.dropdown-menu, 
  li.dropdown.open > ul.dropdown-menu {
    display: block;
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s ease 0s;
    visibility: visible;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; left: 0; padding: 10px 0 7px;
  }


}

@media screen and (max-width: 991px) {

h2 { font-size: 39px; }
header .header-btn { margin-right: 50px; }
header .navbar-nav { max-width: 370px; width: 100%; margin: 100px auto 25px; display: block !important; padding: 0 15px; }
header .navbar-nav li { float: none; text-align: left; border-bottom:1px solid #fff; padding:9px 15px; margin: 0; }
header .navbar-nav li a { font-size: 16px; color: #fff; }
header .navbar-nav li.active a { color: #fff;; }
footer .max-menu .row { row-gap: 25px; }
.services-section {  padding: 90px 0; }
.about-section { padding: 90px 0; }
.service-box { flex-wrap: wrap; row-gap: 20px; }
.service-box:nth-child(2n) figure,
.service-box:nth-child(2n) .content,
.service-box .content,
.service-box figure { flex: 0 0 100%; padding: 0; }
.service-box figure img { height: 400px; object-fit: cover; }
.digital-services { padding: 85px 0; }
.how-we-work .service-box { margin-bottom: 20px; padding: 20px 0; }
.how-we-work .service-box h2 { font-size: 70px; }
.how-we-work .service-box figure { max-width: 600px; width: 100%; margin: 0 auto; }
.how-we-work .service-box .content { padding: 10px 15px; }
.experts-section .container-fluid .row { row-gap: 25px; }
.faqs-section .accordion .accordion-body { max-width: 100%; }
.trusted-section p { font-size: 18px; line-height: 25px; }
.trusted-section .logo-card { min-width: 170px; height: 60px; }
.trusted-section .logo-card img { height: 100%; }


}

@media screen and (max-width: 767px) {

h2 { font-size: 34px; line-height: 40px; }
h3 { font-size: 23px; line-height: 30px; }
h5 { font-size: 18px; line-height: 23px; }
p { font-size: 16px; }
ul li { font-size: 16px; line-height: 22px; }
ul li::before { font-size: 16px; }
.btn { font-size: 18px; padding: 10px 20px; }
.btn i { font-size: 22px; margin-left: 10px; }
section { padding: 40px 0; }
header::before { height: 120px; }
header .header-btn { margin-right: 0; }
footer .copy-rights p { flex: 0 0 100%; text-align: center; }
footer .container h2 { font-size: 29px; text-align: center; }
footer .subscribe-block { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
footer { padding: 40px 0 0; }
footer .logo { max-width: 200px; }
footer .footer-top { gap: 20px !important; }  
footer .subscribe-block form .form-control { font-size: 16px; height: 45px; }
footer .subscribe-block form button { flex: 0 0 50px; font-size: 21px; }
footer .subscribe-block form { max-width: 350px; }
footer .max-menu { margin-top: 40px; padding-top: 40px; padding-bottom: 20px; }
.about-section { padding: 50px 0; }
.about-section h5 { font-size: 18px; }
.about-section p { margin-bottom: 15px; }
.services-section {  padding: 50px 0; }
.service-box { margin-bottom: 25px; }
.service-box ul li { padding: 0 0 5px 23px; }
.service-box { padding: 22px 15px; }
.service-box p { margin-bottom: 15px; }
.service-box .btn { padding: 8px 20px; }
.service-box ul { margin-bottom: 15px; }
.medi-spa { padding: 50px 0; }
.digital-services { padding: 50px 0; }
.digital-services .service { flex: 0 0 100%; }
.digital-services .service h3 { font-size: 21px; line-height: 26px; padding-bottom: 8px; }
.digital-services .service .circle-btn { font-size: 21px; width: 40px; height: 40px; }
.digital-services .service p { margin-bottom: 20px; }
.digital-services .service .title-blck { margin-bottom: 15px; padding-right: 50px; }
.how-we-work { padding: 50px 0; }
.how-we-work .services { padding-top: 0; }
.how-we-work .service-box h2 { font-size: 50px; line-height: 50px; right: 0; }
.testimonials { padding: 50px 0; }
.testimonials .owl-carousel .owl-nav button { width: 45px; height: 45px; }
.testimonials .owl-carousel { padding: 0 40px; }
.testimonials .owl-carousel .owl-dots { padding-top: 5px; }
.testimonials .owl-carousel .owl-dots .owl-dot { margin: 0 2px; }
.testimonials .owl-carousel .owl-nav button::before { font-size: 20px; top: 50%; transform: translateY(-50%); }
.experts-section { padding: 50px 0; }
.expert { padding: 0; max-width: 500px; width: 100%; margin: 0 auto; }
.expert figure { margin-bottom: 12px; }
.expert .content h5 { margin-bottom: 12px; }
.expert .content .readmore { font-size: 16px; }
.expert .content .readmore i { font-size: 18px; }
.experts-section .btn { padding-left: 20px; padding-right: 20px; margin-top: 20px; }
.faqs-section { padding: 50px 0; }
.faqs-section .accordion .accordion-header .accordion-button { font-size: 18px; }
.faqs-section .accordion .accordion-item { padding: 16px 0 11px; }
.faqs-section .accordion .accordion-header .accordion-button::after { margin-right: 5px; }
.testimonials .container-sm p { font-size: 18px; }
.expertise-results { padding: 50px 0; }
.expertise-results p { font-size: 18px; line-height: 26px; }
.expertise-results .owl-carousel .owl-dots .owl-dot { width: 9px; height: 9px; margin: 0 3px; }
.trusted-section { padding: 50px 0; }
.trusted-section .logo-card { min-width: 140px; height: 50px; padding: 0 10px; } 
.trusted-section .marquee-content { column-gap: 30px; }



}

@media screen and (max-width: 599px) {

.mobile-toggle { top: 29px !important; }
header .logo { max-width: 180px; }
footer .container h2 { font-size: 25px; }
.service-box figure img { height: auto; }
.testimonials .testimonial { padding: 20px 10px; }
.testimonials .testimonial .rateing { font-size: 15px; line-height: 18px; }
.expertise-results .item figure img { height: 100% !important; }


}

@media screen and (max-width: 575px) {

footer aside { max-width: 350px !important; width: 100%; margin: 0 auto; padding: 0 !important; }
footer .visit-us { padding-top: 15px; } 
footer .max-menu .row { row-gap: 15px; }


}

@media screen and (max-width: 479px) {

.btn { font-size: 16px; padding: 8px 12px; }
.btn i { font-size: 20px; line-height: 16px; margin-left: 3px; }
h2 { font-size: 30px; line-height: 35px; }
footer .logo { max-width: 170px; }
footer .copy-rights ul { row-gap: 7px; }
footer .copy-rights ul li { flex: 0 0 100%; text-align: center; }
footer .copy-rights ul li::before { display: none; }
footer .container h2 { font-size: 21px; line-height: 27px; } 
.service-box { padding: 22px 5px; }
.digital-services .service { padding: 20px 10px; }
.digital-services .services { row-gap: 20px; }
.how-we-work .service-box h2 { font-size: 40px; right: 10px; }
.testimonials .owl-carousel .owl-nav { display: flex; column-gap: 10px; justify-content: center; margin: 5px 0; }
.testimonials .testimonial { margin: 0; }
.testimonials .owl-carousel { padding: 0; }
.testimonials .owl-carousel .owl-nav button { position: relative; top: inherit; transform: inherit; }
.testimonials .testimonial h5 { font-size: 18px; }
.trusted-section .marquee-content { column-gap: 10px; }


}


@media screen and (max-width: 375px) {




}



/* -----------------------------------------------------
    Navifgation Responsive Styles
----------------------------------------------------- */
@media screen and (max-width: 991px) {
     nav#nav.is-active {
        opacity: 1;
        visibility: visible; 
        overflow-y: scroll;
    }

     nav#nav {
        position: fixed;
        top:0;
        left:0;
        margin-top:0;
        z-index:990;
        opacity:0.0;
        visibility: hidden;
        height:100%;
        width:100%;
        background-color: rgba(255, 154, 24, 0.9);
        transition:all 0.35s ease-in-out;
        padding: 0;
    }
    
    .navbar-nav {
      padding: 75px 0 25px;
      text-align: center;
      width: 100%;
    }
    
    /* Cross icon */
    .mobile-toggle {
        position: absolute;
        top: 38px;
        right: 15px;
        z-index:999;
        display: inline-block;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.25s;
        transition-timing-function: linear;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
        padding: 0;
        width: 30px;
        height: 28px;
        float:right;
    }
    
    .mobile-toggle:hover {
        opacity: 0.7;
    }

    .mobile-toggle:focus {
        outline:0;
    }

    .mobile-toggle-box {
        width: 34px;
        height: 28px;
        display: inline-block;
        position: relative;
    }

    .mobile-toggle-inner {
        display: block;
        top: 50%;
        margin-top: -2px;
    }
    
    .mobile-toggle-inner,
    .mobile-toggle-inner::before,
    .mobile-toggle-inner::after {
        width: 28px;
        height: 3px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }
    
    .is-active .mobile-toggle-inner,
    .is-active .mobile-toggle-inner::before,
    .is-active .mobile-toggle-inner::after {
        background-color: #fff;
    }

    .mobile-toggle-inner::before,
    .mobile-toggle-inner::after {
        content: "";
        display: block;
    }
    
    .mobile-toggle-inner::before {
        top: -9px;
    }
    
    .mobile-toggle-inner::after {
        bottom: -9px;
    }

    .mobile-toggle--squeeze .mobile-toggle-inner {
        -webkit-transition-duration: 0.075s;
        -ms-transition-duration: 0.075s;
        transition-duration: 0.075s;
        -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -ms-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .mobile-toggle--squeeze .mobile-toggle-inner::before {
        -webkit-transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
        -ms-transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
        transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
    }
    
    .mobile-toggle--squeeze .mobile-toggle-inner::after {
        -webkit-transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -ms-transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .mobile-toggle--squeeze.is-active .mobile-toggle-inner {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transition-delay: 0.12s;
      -ms-transition-delay: 0.12s;
      transition-delay: 0.12s;
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    }
    
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::after {
        bottom: 0;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        -ms-transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

}