/*  Theme Responsive Css */


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

  .feature-section .feature-block-one .inner-box{
    padding-right: 30px;
    padding-left: 30px;
  }

  .feature-section .feature-block-one .inner-box .inner{
    padding-left: 0px;
  }

  .feature-section .feature-block-one .inner-box .icon-box{
    position: relative;
    left: 0px;
    margin-bottom: 20px;
  }

  .rtl .feature-section .feature-block-one .inner-box .icon-box{
    right: 0px;
  }

  .rtl .feature-section .feature-block-one .inner-box .inner{
    padding-right: 0px;
  }

}



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

  .main-menu{
    display: none !important;
  }

  .menu-area .mobile-nav-toggler {
    display: block;
    margin-top: 26px;
    padding: 10px;
    margin-bottom: 20px;
  }

  .sticky-header{
    display: none !important;
  }

  .main-header.style-one .social-links{
    float: left;
    margin-top: 25px;
  }

  .proudly-section .image-layer{
    display: none;
  }

  .gallery-section{
    padding-left: 30px;
    padding-right: 30px;
  }

  .cta-section .inner-box .text{
    float: none;
    display: block;
    margin-bottom: 10px;
  }

  .cta-section .inner-box .btn-box{
    float: none;
  }

  .footer-top .appointment-widget{
    padding-left: 30px;
    padding-right: 30px;
  }

  .main-header.style-two .menu-area .mobile-nav-toggler{
    margin-top: 40px;
  }

  #content_block_7 .content-box{
    margin-left: 0px !important;
  }

  .feature-block-two .inner-box .content-inner{
    padding: 0px;
  }

  .faq-section .image-layer{
    display: none;
  }

  .banner-carousel .owl-nav{
    display: none;
  }

  .rtl .cta-section .inner-box .btn-box{
    float: right;
  }

  .about-style-three #content_block_8 .content-box,
  .team-details-content{
    margin-left: 0px !important;
    margin-top: 0px;
  }

  .team-details-content .upper-box .social-links{
    position: relative;
    top: 0px;
    margin-top: 15px;
  }

}



@media only screen and (min-width: 768px){
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul,
  .main-menu .navigation > li > .megamenu{
    display:block !important;
    visibility:hidden;
    opacity:0;
  }
}



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

  /* Team rows stack from tablet down. Side by side, the narrower column makes
     the bio much taller, and the photo panel stretching to match would crop a
     0.76 portrait down to a ~0.26 slice. Stacked, the photo keeps its natural
     proportions at a capped width and centres — no crop at all. */
  .contributor-box-mainnav{
    display: block;
  }

  .contributor-image{
    max-width: 100%;
    text-align: center;
    padding-top: 25px;
  }

  .contributor-image img{
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto;
  }

  .header-top .text,
  .header-top .info{
    float: none;
    display: block;
    text-align: center;
  }

  .main-header .logo-box{
    float: none;
  }

  .main-header .logo-box .logo{
    margin: 0 auto;
    padding: 11px 0px 0px 0px;
  }

  .main-header .header-upper .upper-info{
    float: none;
    text-align: center;
    margin: 15px 0px 20px 0px;
  }

  .main-header .header-upper .upper-info li{
    text-align: left;
    margin: 10px 7.2px !important
  }

  .main-header .header-upper .upper-info li.btn-box{
    display: none;
  }

  #content_block_4 .form-inner{
    margin-left: 0px !important;
    margin-top: 30px;
  }

  #content_block_3 .content-box{
    margin-right: 0px !important;
  }

  .news-block-one .inner-box{
    margin-bottom: 30px;
  }

  .news-section{
    padding-bottom: 90px;
  }

  .gallery-block-one .inner-box{
    margin-bottom: 30px;
  }

  .gallery-section{
    padding-bottom: 90px;
  }

  .footer-top .footer-widget{
    margin: 0px 0px 30px 0px !important;
  }

  .footer-top{
    padding-bottom: 70px;
  }

  .main-header.style-two .logo-box .logo{
    margin: 0 auto;
    padding-bottom: 30px;
  }

  .main-header .search-box-outer{
    margin-right: 20px;
  }

  .main-header.style-two .header-top .info li{
    margin: 0px 15px;
  }

  .main-header.style-two .header-top .info li:before{
    display: none;
  }

  .header-top .social-links{
    float: none;
    display: block;
    text-align: center;
  }

  #content_block_5 .content-box{
    margin-right: 0px !important;
  }

  #image_block_1 .image-box{
    max-width: 540px;
    margin: 0 auto !important;
    padding-bottom: 30px;
  }

  #image_block_1 .image-box .image-2{
    position: relative;
    left: 0px;
    margin-top: 30px;
  }

  #image_block_1 .image-box .icon-box{
    display: none;
  }

  .weare-section .single-item .inner-box{
    margin-bottom: 30px;
  }

  .weare-section{
    padding-bottom: 90px;
  }

  .team-inner .team-block-one{
    width: 50%;
  }

  .cta-style-two .inner-container .text{
    margin-bottom: 15px;
  }

  .rtl .header-top .text{
    float: none;
  }

  .rtl .main-header .logo-box{
    float: none;
  }

  .rtl .main-header .header-upper .upper-info{
    float: none;
  }

  .about-style-three .image-box{
    margin-bottom: 30px;
  }

  .team-details .image-box{
    max-width: 600px;
    margin: 0 auto;
  }

  .team-details-content{
    margin-top: 30px;
  }

  .certificates-section .text{
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .certificates-section .certificates-inner{
    margin: 0px auto !important;
    max-width: 500px;
  }

  .certificates-section .certificates-inner .image-box{
    margin-bottom: 30px;
  }

  .certificates-section{
    padding-bottom: 84px;
  }

  .service-sidebar{
    margin-bottom: 30px;
  }

  .sidebar{
    margin-top: 40px;
  }

  .rtl .header-top .info{
    float: none;
  }
  

}


@media only screen and (max-width: 767px){
.contributor-box-mainnav {
    display: block;
}
.contributor-content h2,
.contributor-content h3 {
    font-size: 25px;
    font-weight: 700;
}
.contributor-content {
    padding: 1.5rem 1rem;
}
section.teamsectionteampage {
    padding: 2.7rem 0;
}
.main-header .header-upper .upper-info li h5,
.main-header .header-upper .upper-info li .info-text {
    font-size: 12px;
    line-height: 22px;
}

.banner-carousel .content-box h2,
.banner-carousel .content-box .banner-title-two {
    font-size: 29px;
    line-height: 37px;
}
.banner-carousel .content-box h1,
.banner-carousel .content-box .banner-title-one {
    font-size: 29px;
    line-height: 37px;
}
.main-header .header-upper .upper-info li p {
    font-size: 9px;
    line-height: 14px;
}
.main-header .header-upper .upper-info li i {
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
}
.main-header .header-upper .upper-info li {
    padding-left: 33px;
    margin-right: 30px;
}

  .sec-pad{
    padding: 65px 0px 70px 0px !important;
  }

  .banner-carousel .content-box h1,
  .banner-carousel .content-box .banner-title-one{
    font-size: 50px;
    line-height: 60px;
  }

  .banner-carousel .slide-item{
    padding: 200px 0px 100px 0px;
  }

  .feature-section .feature-block-one{
    width: 100%;
  }

  .sec-title h1,
  .sec-title h2{
    font-size: 36px;
    line-height: 44px;
  }

  #content_block_1 .content-box .inner-box .author .author-thumb{
    margin-bottom: 10px;
  }

  #content_block_1 .content-box .inner-box{
    display: block;
  }

  #content_block_1 .content-box .inner-box .inner{
    margin-right: 0px;
    margin-bottom: 15px;
  }

  /* The prev/next arrows were hidden on mobile, so nothing signalled that the
     treatments block is a slider. On desktop they sit absolutely at top:-133px
     beside the section title, which would collide with the heading here — so
     drop them back into the flow, centred under the slides. */
  .service-section .owl-nav{
    display: block;
    position: relative;
    top: auto;
    right: auto;
    text-align: center;
    margin-top: 25px;
  }

  .service-section .owl-nav .owl-prev,
  .service-section .owl-nav .owl-next{
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }

  .clients-section{
    padding: 70px 0px;
  }

  .proudly-section .pattern-layer{
    display: none;
  }

  #content_block_2 .content-box .counter-inner .counter-block{
    width: 100%;
    float: none;
    margin-bottom: 30px;
  }

  #content_block_2 .content-box .counter-inner{
    max-width: 200px;
    margin: 0 auto !important;
  }

  #content_block_2 .content-box .counter-inner .counter-block:last-child{
    margin-bottom: 0px;
  }

  .proudly-section{
    padding: 65px 0px;
  }

  .feature-style-two .feature-block-two{
    width: 100%;
  }

  .feature-style-two{
    padding-top: 70px;
  }

  .testimonial-section .inner-container{
    margin: 0px;
    padding: 0px;
  }

  .startup-section{
    padding-top: 65px;
  }

  .news-section{
    padding-bottom: 40px !important;
  }

  .news-block-one{
    max-width: 370px;
    margin: 0 auto;
  }

  .gallery-block-one{
    max-width: 400px;
    margin: 0 auto;
  }

  .gallery-section{
    padding-bottom: 40px;
  }

  .cta-section .inner-box .text h2{
    line-height: 44px;
  }

  .cta-section{
    padding: 65px 0px 70px 0px;
  }

  .footer-top{
    padding: 70px 0px 40px 0px;
  }

  .banner-section.style-two .slide-item{
    padding: 100px 0px;
  }

  .welcome-section{
    padding: 65px 0px 85px 0px;
  }

  #content_block_5 .content-box{
    padding-right: 30px;
    padding-left: 30px;
  }

  #content_block_5 .content-box .image-box{
    position: relative;
    top: 0px;
    right: 0px;
    max-width: 230px;
    margin-bottom: 20px;
  }

  .about-style-two{
    padding: 70px 0px;
  }

  .service-style-two .owl-nav{
    display: none;
  }

  .weare-section{
    padding-bottom: 40px;
  }

  .testimonial-style-two .testimonial-content .inner-box{
    padding-left: 0px;
  }

  .testimonial-style-two .testimonial-content .inner-box .image-box{
    position: relative;
    margin-bottom: 20px;
  }

  .testimonial-style-two{
    padding: 70px 0px 60px 0px;
  }

  .team-section .title-inner .sec-title, 
  .team-section .title-inner .text{
    width: 100%;
  }

  .team-section .title-inner .text{
    padding-left: 0px;
    margin-bottom: 30px;
  }

  .team-section .title-inner .sec-title{
    margin-bottom: 20px;
  }

  .team-section{
    padding-top: 65px;
  }

  .clients-section.alternat-2{
    padding-top: 160px;
  }

  .cta-style-two .inner-container .subscribe-form .form-group .theme-btn-one{
    position: relative;
    margin-top: 15px;
  }

  .cta-style-two .inner-container{
    padding: 70px 30px;
  }

  .page-title .content-box .title h1{
    font-size: 40px;
    line-height: 50px;
  }

  .page-title{
    padding: 160px 0px 70px 0px;
  }

  /* Was capped at 270px, which left ~45px of dead space either side while the
     condition cards further down ran the full container width. Let the images
     use the whole column so the two sections line up. */
  .about-style-three .image-box{
    max-width: 100%;
    margin: 0px auto;
  }

  .about-style-three .image-box:before{
    display: none;
  }

  .about-style-three .image-box .image{
    margin-bottom: 30px;
  }

  .about-style-three{
    padding: 70px 0px;
  }

  #content_block_3 .single-box .inner{
    margin-right: 0px !important;
  }

  /* The About condition grid drops to a single column on phones. Cards size to
     their own content there — stacked one per row there is nothing to line them
     up against, and forcing the tallest height onto every card would add ~90px
     of empty box to the short ones. */
  #content_block_3 .single-box .condition-grid{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  #content_block_3 .single-box .condition-grid .inner{
    padding: 25px 20px !important;
  }

  .startup-section.alternat-2{
    padding: 80px 0px 30px 0px;
  }

  .team-block-one{
    max-width: 300px;
    margin: 0 auto;
    width: 100% !important;
    float: none !important;
  }

  /* About page: the specialist cards run the full column width so they line up
     with the images and condition cards above (all 15..375 on a 390px screen)
     instead of sitting inset by 45px. */
  .team-section .team-inner .team-block-one{
    max-width: 100%;
  }

  .team-page-section,
  .certificates-section,
  .service-page-section{
    padding: 70px 0px 40px 0px;
  }

  .team-details{
    padding: 70px 0px;
  }

  .certificates-section .certificates-inner{
    max-width: 220px;
  }

  .service-page-section .service-block-one{
    max-width: 370px;
    margin: 0 auto;
  }

  .service-details{
    padding: 70px 0px 62px 0px;
  }

  .service-details-content .two-column .image-box{
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .sec-pad-2{
    padding: 70px 0px;
  }

  .sidebar-page-container .news-block-one{
    max-width: 100%;
  }

  .blog-details-content .post-share-option .tags{
    float: none;
    display: block;
    margin-bottom: 15px;
  }

  .blog-details-content .post-share-option .social-links{
    float: none;
    display: block;
  }

  .blog-details-content .comments-area .comment .comment-inner a{
    position: relative;
    top: 0px;
    margin-top: 10px;
  }

  .contact-section .title-inner .sec-title, 
  .contact-section .title-inner .text{
    width: 100%;
  }

  .contact-section .title-inner .text{
    padding-left: 0px;
  }

  .contact-section .title-inner .sec-title{
    margin-bottom: 15px;
  }

  .contact-section .info-inner{
    margin-bottom: 30px;
  }

  .banner-section.style-two .banner-carousel .content-box h1 span{
    line-height: 60px;
  }

  .rtl #content_block_3 .content-box{
    margin-left: 0px;
  }

}

@media only screen and (max-width: 599px){
  
  #content_block_4 .form-inner{
    padding-left: 30px;
    padding-right: 30px;
  }

  .testimonial-style-two .testimonial-content .inner-box .text h2,
  .news-block-one .inner-box .lower-content h2{
    font-size: 24px;
    line-height: 32px;
  }

  .blog-details-content .author-box .inner{
    padding-left: 0px;
  }

  .blog-details-content .author-box .inner .author-thumb{
    position: relative;
    margin-bottom: 15px;
  }

  .blog-details-content .author-box{
    padding: 60px 30px;
  }

  .footer-botton .copyright{
    float: none;
    display: block;
    text-align: center;
  }

  .footer-botton .social-links{
    float: none;
    text-align: center;
  }

}


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

  .main-header.style-one .header-lower .outer-box .menu-area{
    padding: 0px 15px;
  }

  .news-block-one .inner-box .lower-content{
    padding-left: 30px;
  }

  #content_block_8 .content-box .inner-box .single-item{
    width: 100%;
    margin-bottom: 15px;
  }

  #content_block_8 .content-box .inner-box .single-item:last-child{
    margin-bottom: 0px;
  }

  .error-section .inner-box h1{
    font-size: 130px;
    line-height: 130px;
  }

  .service-details-content .content-two .inner-box .list-item li{
    width: 100%;
  }

  .sidebar-page-container .news-block-one .inner-box .lower-content{
    padding-right: 30px;
  }

  .pagination li{
    margin: 5px 3px;
  }

  .sidebar .sidebar-widget{
    padding-left: 30px;
    padding-right: 30px;
  }

  .blog-details-content .news-block-one .inner-box .lower-content{
    padding-right: 0px;
  }

  .contact-section .info-inner{
    padding-left: 30px;
    padding-right: 30px;
  }

}


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

  #content_block_3 .content-box .inner-box .icon-box{
    position: relative;
    left: 0px;
    margin-bottom: 15px;
    top: 0px;
  }

  #content_block_3 .content-box .inner-box{
    padding-left: 30px;
    padding-right: 30px;
  }

  .main-header.style-two .btn-box{
    display: none;
  }

  .main-header.style-two .menu-area{
    float: none;
  }

  .main-header.style-two .menu-area .mobile-nav-toggler{
    text-align: right;
  }

  #content_block_5 .content-box .inner-box .inner{
    padding-left: 0px;
  }

  #content_block_5 .content-box .inner-box .inner .video-inner{
    position: relative;
    margin-bottom: 15px;
  }

  .cta-style-two .inner-container {
    padding: 70px 15px;
  }

  .rtl #content_block_3 .content-box .inner-box{
    padding-right: 30px;
    padding-left: 30px;
  }

  .rtl #content_block_3 .content-box .inner-box .icon-box{
    right: 0px;
  }

  .service-sidebar .sidebar-support,
  .service-details-content .content-two .inner-box{
    padding-left: 30px;
    padding-right: 30px;
  }

  .blog-details-content .comments-area .comment .comment-inner{
    padding-left: 0px;
  }

  .blog-details-content .comments-area .comment .thumb-box{
    position: relative;
    top: 0px;
    margin-bottom: 15px;
  }

}


/* ==========================================================================
   Mobile refinements — home page, header and footer
   Appended last so these win over the rules above at equal specificity.
   ========================================================================== */

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

  /* --- Header: top bar ---------------------------------------------------
     Three long strings stacked on top of each other ate ~170px of the first
     screen. Tighter type and spacing keeps it readable but compact. */
  .header-top{
    padding: 10px 0px;
  }

  .header-top .info li{
    display: block;
    width: 100%;
    margin: 0px 0px 4px 0px !important;
    font-size: 13px;
    line-height: 20px;
  }

  .header-top .info li:last-child{
    margin-bottom: 0px !important;
  }

  .header-top .info li i{
    margin-right: 6px;
  }

  /* --- Header: phone / e-mail row ---------------------------------------
     Keep the two blocks evenly spaced and centred instead of crowding the
     right edge, and stop the e-mail from running into the viewport edge. */
  .main-header .header-upper .upper-info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float: none !important;
    margin-top: 18px;
  }

  .main-header .header-upper .upper-info li{
    margin-right: 22px !important;
  }

  .main-header .header-upper .upper-info li:last-child{
    margin-right: 0px !important;
  }

  .main-header .header-upper .upper-info li .info-text{
    word-break: break-word;
  }

  /* --- Banner ------------------------------------------------------------
     Keep every slide the same height on mobile too, and give both slide
     headings the same type size — the earlier rules left slide 1 at 50px and
     slide 2 at 29px, which was the main reason the slides differed in height. */
  .banner-carousel .slide-item{
    min-height: 420px;
    padding: 40px 0px;
  }

  .banner-carousel .content-box h1,
  .banner-carousel .content-box h2,
  .banner-carousel .content-box .banner-title-one,
  .banner-carousel .content-box .banner-title-two{
    font-size: 32px;
    line-height: 42px;
  }

  /* --- About section -----------------------------------------------------
     The section background photo sits behind the copy once the two columns
     collapse, which made the intro text unreadable. Veil the image on small
     screens so the text keeps its contrast. */
  .about-section:before{
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255,255,255,0.90);
  }

  .about-section .auto-container{
    position: relative;
    z-index: 1;
  }

  #content_block_1 .content-box h3,
  #content_block_1 .content-box .intro-text{
    font-size: 18px;
    line-height: 30px;
  }

  /* --- "Our clinicians are…" band ---------------------------------------
     70% of a 390px screen leaves a very ragged column. */
  .proudly-content-navm h3,
  .proudly-content-navm p{
    width: 100%;
    font-size: 20px;
    line-height: 32px;
  }

  /* --- Feature cards 01–04 ----------------------------------------------
     The fixed 89px title box clips a third line of text, and the 3px
     margin-right (a column divider on desktop) leaves a sliver of section
     background down the right edge once the cards go full width. The title
     min-height keeps all four cards the same height whether the heading runs
     to two lines or three. */
  .feature-style-two .feature-block-two .inner-box{
    margin-right: 0px;
  }

  .feature-block-two .inner-box .content-box h3{
    height: auto;
    min-height: 90px;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
  }

  /* --- Accreditation logos ----------------------------------------------- */
  .clients-section .clients-logo-box{
    margin: 9px 0px;
  }

  .clients-section .clients-logo-box img{
    max-width: 100%;
    height: 70px;
  }

  /* --- Find us / map -----------------------------------------------------
     "Get Direction" is an absolutely positioned overlay designed for the
     desktop map. On a full-width mobile map it lands on top of Google's own
     controls, so drop it back into the flow underneath the map. */
  #content_block_4 .form-inner iframe{
    height: 320px;
    max-width: 100%;
  }

  #content_block_4 .form-inner .direction-homemap{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 14px 15px;
    display: block;
    text-align: center;
  }

  #content_block_4 .form-inner .direction-homemap a .direction-title{
    display: inline-block;
    font-size: 18px;
  }

  #content_block_4 .form-inner p{
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 20px;
  }

  /* --- "Choose the best specialist for you" ------------------------------
     The desktop layout is heading-left / button-right. Once they stack, that
     left alignment reads as unbalanced, so centre the whole block. */
  .cta-section .inner-box{
    text-align: center;
  }

  .cta-section .inner-box .text,
  .cta-section .inner-box .btn-box{
    float: none !important;
  }

  .cta-section .inner-box .text h2{
    line-height: 44px;
    margin-bottom: 22px;
  }

  .cta-section .inner-box .btn-box{
    -ms-flex-pack: center;
    justify-content: center;
  }

  /* --- Footer ------------------------------------------------------------
     Links and Services sit side by side as two columns in one row so the
     footer is not one very long single column. */
  .footer-top .widget-section .row > .footer-column:nth-child(2),
  .footer-top .widget-section .row > .footer-column:nth-child(3){
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }

  .footer-top .links-widget.ml-70{
    margin-left: 0px;
  }

  .footer-top .links-widget .links-list li{
    margin-bottom: 10px;
  }

  .footer-top .links-widget .links-list li a{
    font-size: 15px;
    line-height: 24px;
  }

  .footer-top .widget-title{
    margin-bottom: 15px;
  }

  .footer-top .footer-column{
    margin-bottom: 30px;
  }

  /* --- Mobile menu -------------------------------------------------------
     The panel is dark, so it needs the light logo (the dark header logo was
     invisible against it) and a little more room for it. */
  .mobile-menu .nav-logo{
    padding: 30px 25px;
    text-align: center;
  }

  .mobile-menu .nav-logo img,
  .mobile-menu .nav-logo img.mCS_img_loaded{
    width: 190px;
    max-width: 80%;
    margin: 0 auto;
  }

  .mobile-menu .contact-info{
    padding-top: 10px;
  }

}


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

  /* Below ~400px the two contact blocks no longer fit on one line. */
  .main-header .header-upper .upper-info li{
    margin-right: 0px !important;
    margin-bottom: 10px;
  }

  .main-header .header-upper .upper-info li:last-child{
    margin-bottom: 0px;
  }

  .header-top .info li{
    font-size: 12px;
    line-height: 19px;
  }

  .footer-top .links-widget .links-list li a{
    font-size: 14px;
  }

}