/* ==========================================================================
   InfoCare - responsive refinements (loaded last on every page)
   Breakpoints: 1400+ wide desktop | 992-1199 laptop | 768-991 tablet |
                576-767 large phone | <576 phone
   ========================================================================== */

/* Media never overflows its column */
img,video,iframe{max-width:100%}

/* Readable body copy: no justified text with word gaps */
.txt-block p,.box-list p,.service-detail-main p,.sunrise-article p,.info-section p,.tabs-section p,
.about-intro-copy p,.ic-doc-body p,.about-doctor-card p,.blog-post-txt p{text-align:left!important}

/* Single "All" filter on the gallery adds nothing */
.gallery-filter{display:none!important}

/* ---------- Wide desktop ---------- */
@media (min-width:1400px){
  .container{max-width:1260px}
  #hero-9 .ic-hero .carousel-item{height:720px!important;min-height:720px!important}
  .ic-hero-art{right:max(24px,calc((100vw - 1260px) / 2));width:min(620px,45%)}
  .ic-hero-chip{right:calc(max(24px,(100vw - 1260px) / 2) + min(620px,45%) - 300px)}
  #hero-9 .ic-hero .carousel-item::after{right:calc(max(24px,(100vw - 1260px) / 2) - 60px)}
  #hero-9 .ic-hero-dots{left:max(24px,calc((100vw - 1260px) / 2 + 15px))}
}

/* ---------- Laptop ---------- */
@media (min-width:992px) and (max-width:1199px){
  #hero-9 .ic-hero h2{font-size:2.7rem!important}
  #hero-9 .ic-hero .carousel-item{height:600px!important;min-height:600px!important}
  .ic-hero-chip{right:calc(max(24px,(100vw - 1140px) / 2) + min(560px,45%) - 250px)}
  .sunrise-nav>a,.sunrise-treatment>a{padding-left:10px!important;padding-right:10px!important}
}

/* ---------- Tablet and below ---------- */
@media (max-width:991px){
  /* the template reserved 70px for its old fixed mobile header; the header is sticky now */
  #hero-9,#breadcrumb{margin-top:0!important}
  .wide-100{padding-top:70px!important;padding-bottom:60px!important}
  .wide-70,.wide-60{padding-top:60px!important;padding-bottom:40px!important}
  .section-title{margin-bottom:40px!important}
  .section-title h3,.h3-md{font-size:2rem!important;line-height:1.25!important}
  .h2-sm{font-size:2rem!important;line-height:1.2!important}
  .doctor-profile-only h2{font-size:2rem!important}
  #breadcrumb .breadcrumb-holder h4{font-size:2rem!important}
  #info-6 .info-6-img{min-height:360px}
  #tabs-nav .nav-pills{justify-content:center;flex-wrap:wrap;gap:8px}
  #tabs-nav .nav-pills .nav-item{flex:0 0 auto}
  .ic-doc-card,.about-doctor-card{margin-bottom:24px}
  .sunrise-footer-grid{grid-template-columns:1fr 1fr!important;gap:36px!important}
}

/* ---------- Large phone ---------- */
@media (max-width:767px){
  .container{padding-left:18px;padding-right:18px}
  .section-title h3,.h3-md{font-size:1.7rem!important}
  .h2-sm{font-size:1.75rem!important}
  .doctor-profile-only{padding:18px!important}
  .doctor-profile-only h2{font-size:1.7rem!important;margin-top:18px}
  .doctor-profile-only .col-md-5,.doctor-profile-only .col-md-7{flex:0 0 100%;max-width:100%}
  .about-intro-copy h2{font-size:1.75rem!important}
  #breadcrumb .breadcrumb-holder{padding-top:36px!important;padding-bottom:40px!important}
  #breadcrumb .breadcrumb-holder h4{font-size:1.7rem!important}
  #breadcrumb::before{width:120px!important;height:120px!important;right:-18px!important;opacity:.14}
  .service-detail-main h2{font-size:1.7rem!important}
  .theme-service-image,.about-service-image{height:220px!important}
  .sunrise-footer-grid{grid-template-columns:1fr!important;gap:28px!important}
  .sunrise-footer-bottom{flex-direction:column;gap:8px;text-align:center}
  /* Buttons that sit side by side stack neatly */
  .ic-doc-card+.btn,.col-12.text-center .btn{margin:6px 4px!important}
  #appointment-form-holder,.contact-form{padding:22px 18px!important;border-radius:20px!important}
  .blue-table,.sidebar-table{padding:26px 22px!important}
  /* Smaller floating contact buttons so they cover less content */
  .sunrise-floating-copy .sunrise-social{width:42px!important;height:42px!important}
  .sunrise-floating-copy .sunrise-social svg{width:20px!important;height:20px!important}
  .sunrise-floating-copy{right:10px!important;gap:8px!important}
}

/* ---------- Phone ---------- */
@media (max-width:575px){
  body{font-size:15px}
  .section-title h3,.h3-md{font-size:1.5rem!important}
  .h2-sm,.about-intro-copy h2{font-size:1.55rem!important}
  #hero-9 .ic-hero .carousel-item{padding:250px 0 64px!important}
  .ic-hero-art{height:215px!important;left:14px!important;right:14px!important;top:16px!important;border-radius:24px 24px 24px 70px!important}
  #hero-9 .ic-hero h2{font-size:1.85rem!important;margin:14px 0 16px!important}
  #hero-9 .ic-hero h2::after{margin-top:16px}
  #hero-9 .ic-hero .hero-txt p{font-size:1rem!important}
  #hero-9 .ic-hero .btn{display:inline-block;margin:8px 8px 0 0}
  .ic-doc-body{padding:22px 20px 26px}
  .ic-doc-body h4{font-size:1.35rem}
  .about-doctor-card>div{padding:24px 20px 26px!important}
  .about-doctor-card h3{font-size:1.4rem!important}
  .sbox-3{padding:32px 20px!important}
  .gallery-item{width:100%!important}
  .btn{padding:12px 22px!important;font-size:.95rem!important}
  .sidebar-service b{font-size:.85rem}
}

@media (min-width:576px) and (max-width:991px){#about-4 .img-fluid,#about-4 img{width:100%;height:300px!important;object-fit:cover}}
@media (max-width:575px){#about-4 img{width:100%;height:220px!important;object-fit:cover}}

@media (min-width:1400px){.sunrise-nav-inner{max-width:1260px!important}}
@media (max-width:1199px){#hero-9 .ic-hero .carousel-control-prev,#hero-9 .ic-hero .carousel-control-next{display:none!important}}
@media (min-width:1200px){#hero-9 .ic-hero .carousel-control-next{right:92px!important}}

/* Scroll reveal (replaces WOW.js) */
.wow{visibility:visible!important}
.ic-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ic-reveal.ic-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ic-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Let the window scroll (not <body>). menu.css made body the scroller on mobile, which broke
   scroll-triggered effects, the sticky header and back-to-top. overflow-x:clip still prevents
   sideways spill without creating a scroll container. */
html,body{height:auto!important;overflow-y:visible!important}
body{overflow-x:visible!important}
@supports (overflow:clip){html,body{overflow-x:clip!important}}
body.wsactive{overflow:hidden!important}

/* Appointment button: text stays white in every state (menu-link hover colour must not apply) */
.sunrise-nav a.sunrise-appointment,.sunrise-nav a.sunrise-appointment:hover,.sunrise-nav a.sunrise-appointment:focus,
.sunrise-nav a.sunrise-appointment:active,.sunrise-nav a.sunrise-appointment.active,.sunrise-nav a.sunrise-appointment:visited,
.wsmenu-list>li.header-btn>a,.wsmenu-list>li.header-btn>a:hover,.wsmenu-list>li.header-btn>a:focus,
.btn-blue:hover,.btn-blue:focus,.btn-blue:active{color:#fff!important}
.sunrise-nav a.sunrise-appointment::after{display:none!important}
.sunrise-nav a.sunrise-appointment:focus-visible{outline:3px solid rgba(123,50,148,.35);outline-offset:3px}