/* ==========================================================================
   FOTONA LASER DENTISTRY - FULLY RESPONSIVE CSS STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL RESPONSIVE RESETS & OVERFLOW SAFETY
   -------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden; /* Prevent horizontal scrollbars globally */
  position: relative;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto; /* Ensure images maintain aspect ratio */
}

/* --------------------------------------------------------------------------
   1. DESKTOP & GENERAL IMPROVEMENTS (min-width: 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Elevate call-to-action buttons layout to be side-by-side on desktop for premium look */
  .btn-wrapper {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  
  .consult-btn, .technology-btn {
    width: auto !important;
  }

.icons-section {
  padding-top: 0.625rem !important;
  padding-bottom: 3.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}

}

/* --------------------------------------------------------------------------
   2. LAPTOP BREAKPOINT (max-width: 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Prevent title lines from overflowing or forcing text wrapping */
  .ws-mini-title::before,
  .ws-mini-title::after {
    width: 150px !important;
    min-width: auto !important;
  }

  .faq-tooth {
    width: 150px !important;
    height: auto !important;
  }
  
  .tooth-bg {
    width: 220px !important;
    height: 220px !important;
  }
}

/* --------------------------------------------------------------------------
   3. MEDIUM DEVICES / TABLETS (max-width: 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Hero Section Title */
  .textsize-42 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }

  /* Section 2 - Box and Content Overrides (Changed to Relative Flow below 990px to Fix Gap) */
  .tooth-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 30px !important;
  }

  .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -60px !important; /* Pull up slightly to overlap hero section */
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    padding: 20px !important;
  }

  .tooth-img {
    max-width: 100% !important;
    height: auto !important;
  }

  .content-wrapper {
    margin-top: 0px !important;
    padding-top: 1.5rem !important; /* Set to maximum pt-4 gap (1.5rem / 24px) */
    max-width: 90% !important;
  }

  /* Section 2 - Neutralize CTA bottom padding for tighter mobile spacing */
  .content-wrapper > div:last-child {
    padding-top: 15px !important;
    padding-bottom: 0px !important;
  }

  /* Section 3 - What is Fotona Laser (Scale padding-top to exact pt-5 / 48px) */
  .padding-top {
    padding-top: 3rem !important;
  }

  .content-width,
  .content-width-home,
  .content-width-70 {
    width: 85% !important;
  }

  .img-fluid-1 {
    width: 85% !important; /* Align perfectly with text content width */
    border-radius: 14px !important; /* Subtle rounded corners for a premium finished aesthetic */
  }

  /* Section 4 - Benefit Cards Grid (2 Columns on Tablets) */
  .container-1 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section 5 - Procedures Stacking */
  section.container > .row {
    flex-direction: column !important;
  }

  section.container > .row > .col-8,
  section.container > .row > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  section.container > .row > .col-4 {
    margin-top: 30px !important;
  }

  .img-fluid-pearl-ai {
    height: auto !important;
    max-height: 350px !important;
    object-fit: contain !important;
  }

  /* Title Lines */
  .ws-mini-title::before,
  .ws-mini-title::after {
    width: 80px !important;
  }

  /* FAQ Center Tooth scaling */
  .faq-wrapper {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .faq-center {
    order: -1 !important;
    width: 100% !important;
    height: 180px !important;
  }

  .tooth-bg {
    width: 160px !important;
    height: 160px !important;
  }

  .faq-tooth {
    width: 100px !important;
    height: auto !important;
  }

  .faq-column {
    width: 100% !important;
    padding: 0 15px !important;
  }

  /* Fix for critical FAQ card heights */
  .faq-card-1 {
    height: auto !important;
    min-height: 220px !important;
  }

   .content-wrapper {
    margin-top: 0px !important;
    padding-top: 0rem !important;
    max-width: 90% !important;
  }


  .icons-section {
  padding-top: 0.625rem !important;
  padding-bottom: 3.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}
}

/* --------------------------------------------------------------------------
   4. SMALL DEVICES / PHONES (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Navbar tweaks */
  .container-fluid.fixed-top {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .container-fluid.fixed-top a strong {
    font-size: 13px !important;
  }
  
  .nav-img-sec-1 {
    width: 100px !important;
    height: auto !important;
  }

  /* Hero Title */
  .textsize-42 {
    font-size: 26px !important;
  }

  /* Section 2 Overrides */
  .boxsize {
    max-width: 320px !important;
    margin-top: -45px !important; /* Slightly smaller negative margin on mobile */
  }

  .content-wrapper {
    margin-top: 0px !important;
    padding-top: 1.5rem !important; /* Retain maximum pt-4 gap */
    max-width: 90% !important;
    gap: 15px !important;
  }

  /* Section 3 - Scale padding-top to pt-4 (32px) on mobile */
  .padding-top {
    padding-top: 2rem !important;
  }

  /* Section 3 lines */
  .ws-mini-title::before,
  .ws-mini-title::after {
    width: 50px !important;
  }

  .content-width,
  .content-width-home,
  .content-width-70 {
    width: 92% !important;
  }

  .img-fluid-1 {
    width: 92% !important; /* Align with mobile content width for clean padding */
  }

  /* Benefit Cards (1 Column on Mobile) */
  .container-1 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Title Lines */
  .ws-mini-title {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    gap: 10px !important;
  }

  /* Procedures checkmark sizes */
  ul.poppins-light {
    padding-left: 10px !important;
  }

  ul.poppins-light li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Trust Section spacing */
  section.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* FAQ Header adjustment */
  section h4.text-center {
    font-size: 18px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    line-height: 1.4 !important;
    padding-bottom: 1rem !important; /* Set to pt-3 (1rem / 16px) gap below 990px screen width */
  }

  /* Compact FAQ Tooth layout specifically for mobile views to maintain pt-3 gap limit */
  .faq-wrapper {
    gap: 1rem !important; /* Set to exact pt-3 (16px) gap between cards and tooth image */
  }

  .faq-center {
    height: 140px !important; /* Compressed container to keep gap tight */
  }

  .tooth-bg {
    width: 120px !important; /* Scaled down slightly to fit the tight container */
    height: 120px !important;
  }

  .faq-tooth {
    width: 75px !important; /* Scaled down proportionally */
  }

  /* FAQ arrow lines */
  .faq-line {
    width: 40px !important;
  }

  /* Clinic Home text scaling */
  .poppins-bold.fs-5 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 0 10px !important;
  }

  /* Serving area box alignment */
  .location-box {
    margin-bottom: 25px !important;
  }

  .location-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Buttons column on mobile */
  .btn-wrapper {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .consult-btn, .technology-btn {
    width: 100% !important;
    max-width: 290px !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
  }

.content-wrapper {
    margin-top: 0px !important;
    padding-top: 0rem !important;
    max-width: 90% !important;
    gap: 15px !important;
  }


  .icons-section {
  padding-top: 0.625rem !important;
  padding-bottom: 3.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}

}

/* --------------------------------------------------------------------------
   5. EXTRA SMALL DEVICES (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Navbar */
  .container-fluid.fixed-top {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .container-fluid.fixed-top a strong {
    font-size: 11px !important;
  }
  
  .nav-img-sec-1 {
    width: 85px !important;
  }

  /* Hero Section Title scaling for 320px screens */
  .textsize-42 {
    font-size: 20px !important;
  }

  .hero-section {
    height: 50vh !important;
  }

  /* Section 2 Box */
  .boxsize {
    max-width: 270px !important;
    margin-top: -35px !important; /* Scale negative margin for small screens */
    height: auto !important;
    border-radius: 20px !important;
  }

  .content-wrapper {
    margin-top: 0px !important;
    padding-top: 1.5rem !important; /* Retain maximum pt-4 gap */
    max-width: 95% !important;
  }

  /* Hide Title lines completely for cleaner layout on tiny devices */
  .ws-mini-title::before,
  .ws-mini-title::after {
    display: none !important;
  }

  .ws-mini-title {
    white-space: normal !important;
    text-align: center !important;
  }

  /* Section 3 - Scale padding-top to pt-3 (24px) on extra-small mobile */
  .padding-top {
    padding-top: 1.5rem !important;
  }

  .img-fluid-1 {
    width: 95% !important; /* Align with extra-small content width */
  }

  /* Paragraph Text sizes for optimized mobile readability */
  .poppins-light p,
  .poppins-light li,
  .content-width p,
  .content-width-70 p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  /* Trust section details */
  .doctor-uttma {
    width: 100% !important;
  }

  /* FAQ Header arrows */
  .faq-top {
    gap: 8px !important;
  }

  .faq-line {
    display: none !important; /* Hide line ornaments on extra small displays */
  }

  /* FAQ cards typography */
  .faq-head span {
    font-size: 14px !important;
  }

  .faq-body p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Footer styling adjustments for extra-small */
  .footer-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .footer-text, .footer-link {
    font-size: 12px !important;
  }

  .social-icons a {
    margin: 0 8px !important;
    font-size: 16px !important;
  }

.tooth-section .content-wrapper {
    margin-top: 0px !important;
    padding-top: 0rem !important; /* Tight spacing between image card and text */
    max-width: 95% !important;
  }

.icons-section {
  padding-top: 0.625rem !important;
  padding-bottom: 3.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}

.bottom-cta-btn {
  font-size: 12px !important;
  padding: 8px 16px !important;
}
}

/* ==========================================================================
   5. OUR TEAM PAGE - RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* --- TABLETS & MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  /* [OUR TEAM] Move the blue card higher up to overlap the hero section beautifully (rem values used) */
  .boxsize {
    margin-top: -5rem !important; /* Shipped higher up (-80px) */
  }

  /* [OUR TEAM] Reduce massive desktop 350px gap above Section 3 since Section 2 uses relative flow on tablets */
  .margin-top-10 {
    margin-top: 2.5rem !important; /* 40px */
  }

  /* [OUR TEAM] Expand maximum width of team bios to prevent text from being extremely squished */
  .content-wrapper-2 {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* [OUR TEAM] Make static 700px content boxes fully responsive and centered */
  .content-width-7 {
    width: 100% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* [OUR TEAM] Force standard col-8 and col-4 to stack vertically on tablets/mobiles */
  .container .row > .col-8,
  .container .row > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0.9375rem !important; /* 15px */
    padding-right: 0.9375rem !important; /* 15px */
  }

  /* [OUR TEAM] Center secondary doctor image and limit its size elegantly when stacked */
  .container .row > .col-4 {
    margin-top: 1.875rem !important; /* 30px */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .container .row > .col-4 img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 17.5rem !important; /* 280px */
    height: auto !important;
    border-radius: 0.875rem !important; /* 14px */
  }

  /* [OUR TEAM] Center all main profile images inside their parent wrapper divs on mobile and tablet devices */
  .img-fluid-1 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* ==========================================================================
   6. CUSTOMIZABLE GRADIENT IMAGE CONTAINER (.boxsize) OVERRIDES
   ========================================================================== */


  .boxsize {
  padding: 0.5rem !important;     /* Minimized padding (8px) around the image for a tighter fit */
  max-width: 23.75rem !important; /* Minimized overall card size (380px) for a sleeker look */
  height: auto !important;        /* Automatically adjusts height to wrap the image snugly */
  border-radius: 1.25rem !important; /* Elegant rounded corners (20px) */
}

 .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  }
}

/* --- PHONES & MOBILE DEVICES (max-width: 767px) --- */
@media (max-width: 767px) {
  /* [OUR TEAM] Shift the blue card higher on smaller phones to keep premium overlapping layout */
  .boxsize {
    margin-top: -5.5rem !important; /* Shipped higher up (-88px) */
  }

  /* [OUR TEAM] Set a slightly smaller gap above Section 3 on small phones */
  .margin-top-10 {
    margin-top: 1.875rem !important; /* 30px */
  }

  /* ==========================================================================
   6. CUSTOMIZABLE GRADIENT IMAGE CONTAINER (.boxsize) OVERRIDES
   ========================================================================== */


  .boxsize {
  padding: 0.5rem !important;     /* Minimized padding (8px) around the image for a tighter fit */
  max-width: 23.75rem !important; /* Minimized overall card size (380px) for a sleeker look */
  height: auto !important;        /* Automatically adjusts height to wrap the image snugly */
  border-radius: 1.25rem !important; /* Elegant rounded corners (20px) */
}

.content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  }
}

/* --- SMALL DEVICES / LANDSCAPE MOBILE (max-width: 576px) --- */
@media (max-width: 576px) {
  /* [OUR TEAM] Pull the blue card even higher to overlap beautifully on small viewports */
  .boxsize {
    margin-top: -6rem !important; /* Shipped higher up (-96px) */
  }

  /* [OUR TEAM] Reduce gap above Section 3 on small viewports */
  .margin-top-10 {
    margin-top: 1.5rem !important; /* 24px */
  }

  /* [OUR TEAM] Increase bio container width to maximize screen real estate on tiny displays */
  .content-wrapper-2 {
    max-width: 95% !important;
  }

  /* [OUR TEAM] Increase responsive content width box to maximize space on tiny displays */
  .content-width-7 {
    max-width: 95% !important;
  }

/* ==========================================================================
   6. CUSTOMIZABLE GRADIENT IMAGE CONTAINER (.boxsize) OVERRIDES
   ========================================================================== */


  .boxsize {
  padding: 0.5rem !important;     /* Minimized padding (8px) around the image for a tighter fit */
  max-width: 23.75rem !important; /* Minimized overall card size (380px) for a sleeker look */
  height: auto !important;        /* Automatically adjusts height to wrap the image snugly */
  border-radius: 1.25rem !important; /* Elegant rounded corners (20px) */
}

 .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  }

}

/* --- EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  /* [OUR TEAM] Maximum overlap of the blue card on extra small viewports (perfect alignment with hero) */
  .boxsize {
    margin-top: -6.5rem !important; /* Shipped higher up (-104px) for perfect hero overlay */
  }

  /* [OUR TEAM] Make secondary image size optimal on very small mobile viewports */
  .container .row > .col-4 img {
    max-width: 15rem !important; /* 240px */
  }


/* ==========================================================================
   6. CUSTOMIZABLE GRADIENT IMAGE CONTAINER (.boxsize) OVERRIDES
   ========================================================================== */


  .boxsize {
  padding: 0.5rem !important;     /* Minimized padding (8px) around the image for a tighter fit */
  max-width: 23.75rem !important; /* Minimized overall card size (380px) for a sleeker look */
  height: auto !important;        /* Automatically adjusts height to wrap the image snugly */
  border-radius: 1.25rem !important; /* Elegant rounded corners (20px) */
}

 .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  }
}

/* ==========================================================================
   7. GLOBAL IMAGE CENTERING RULES (FOR ALL DEVICES)
   ========================================================================== */

/* 
   Ensures all team profile images (.img-fluid-1) are perfectly centered 
   inside their parent layout containers on ALL screen sizes (Desktop, Tablet, Mobile).
*/
.img-fluid-1 {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   8. CREDENTIALS PAGE - RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- TABLETS & MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  /* Hero section title size optimization */
  .hero-section .textsize-37 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  /* Fix vertical image stretching on main images */
  .img-fluid-1,
  .img-fluid-3 {
    height: auto !important;
    object-fit: cover !important;
  }

  /* Center the secondary description images */
  .img-fluid-3 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fix layout gap above horizontal highlight cards */
  .service-highlight.margin-top-20 {
    margin-top: 30px !important;
  }

  /* Prevent AACD Master top card from overflowing small viewports */
  .top-center-card {
    width: 100% !important;
    max-width: 420px !important;
  }

  /* Fix card height & text overflow for bottom cards */
  .faq-card-2 {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 25px !important;
  }

  /* Improve responsive flow inside credentials about us team section card */
  .tooth-section .boxsize {
    height: auto !important;
    min-height: auto !important;
    padding: 10px !important;
  }

  .tooth-section .tooth-img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .service-highlight {
  width: 100%;
  padding: 0rem !important;
  background: #ffffff;
}
}

/* --- PHONES & MOBILE DEVICES (max-width: 767px) --- */
@media (max-width: 767px) {
  /* Hero title scale down for small viewports */
  .hero-section .textsize-37 {
    font-size: 22px !important;
  }

  /* Give breathing room to timeline cards on mobile */
  .timeline-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    gap: 20px !important;
  }

  .timeline-card {
    max-width: 100% !important;
    font-size: 14px !important;
    padding: 15px !important;
  }

  .service-highlight {
  width: 100%;
  padding: 0rem !important;
  background: #ffffff;
}
}

/* --- EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  /* Hero title size for 320px screens */
  .hero-section .textsize-37 {
    font-size: 18px !important;
  }

  /* Fix FAQ card images layout on tiny devices */
  .img-fluid1 {
    max-width: 100% !important;
    height: auto !important;
  }

.service-highlight {
  width: 100%;
  padding: 0rem !important;
  background: #ffffff;
}
}

/* ==========================================================================
   9. IMPORTANT MOUTH WASH PAGE (mouth-wash.html) RESPONSIVE STYLES
   ========================================================================== */

/* Scoped button styles to prevent Bootstrap color override on hover/focus/active */
.blog_section .black-color {
  background-color: #18191C !important;
  color: #F9F4F4 !important;
  border: 1px solid #18191C !important;
  transition: all 0.3s ease !important;
}

.blog_section .black-color:hover,
.blog_section .black-color:focus,
.blog_section .black-color:active,
.blog_section .black-color:visited {
  background-color: #18191C !important;
  color: #F9F4F4 !important;
  border-color: #18191C !important;
  opacity: 0.9 !important;
  box-shadow: 0 4px 12px rgba(24, 25, 28, 0.2) !important;
}
/* --- TABLETS & MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  /* Dynamic hero section height to prevent text overflow */
  .blog_section .hero-section {
    height: auto !important;
    min-height: 70vh !important;
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .blog_section .textsize-37 {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }

  /* Make content-width-7 responsive */
  .blog_section .content-width-7 {
    width: 100% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent .w-75 rows from being restricted on smaller screens */
  .blog_section .row > .w-75 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Two Types of Mouthwash Section - Stack Layout */
  .blog_section .row:has(.vertical-line-draw) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }

  .blog_section .row:has(.vertical-line-draw) > .col-5 {
    width: 100% !important;
    max-width: 90% !important;
    flex: 0 0 100% !important;
  }

  .blog_section .row:has(.vertical-line-draw) > .col-2 {
    display: none !important;
  }

  .blog_section .vertical-line-draw {
    display: none !important;
  }

  .blog_section .row:has(.vertical-line-draw) img {
    max-width: 260px !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
    border-radius: 14px !important;
  }

  .blog_section .row:has(.vertical-line-draw) .text-small {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Common Mistakes & Recommendations Columns Center-Align Images */
  .blog_section .col-4 img[src*="dr-dham"],
  .blog_section .col-4 img[src*="MISTAKES"] {
    display: block !important;
    margin: 20px auto 0 auto !important;
    max-width: 260px !important;
    height: auto !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
  }

  /* FAQ Hover Cards Stacking & Visual Enhancements */
  .blog_section .implant-section .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
  }

  .blog_section .implant-section .left-cards-col {
    width: 100% !important;
    max-width: 500px !important;
    gap: 20px !important;
  }

  /* Position tooth in the center column at the top on mobile */
  .blog_section .implant-section .implant-center {
    order: -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
  }

  .blog_section .implant-section .tooth-circle {
    width: 150px !important;
    height: 150px !important;
    background: #CBF3FB !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(203, 243, 251, 0.5) !important;
  }

  .blog_section .implant-section .tooth-img {
    width: 90px !important;
    height: auto !important;
  }

  /* Touch friendly FAQ cards (always expanded on mobile/tablets) */
  .blog_section .implant-section .hover-card {
    height: auto !important;
    min-height: auto !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(55, 104, 245, 0.1) !important;
  }

  .blog_section .implant-section .card-content {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .blog_section .implant-section .arrow {
    display: none !important;
  }

  .blog_section .padding-top-60 {
    padding-top: 0px !important;
  }
}

/* --- SMALL DEVICES & MOBILE (max-width: 767px) --- */
@media (max-width: 767px) {
  .blog_section .hero-section {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }

  .blog_section .textsize-37 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Spacing improvements on mobile list pages */
  .blog_section ul.poppins-light, 
  .blog_section ol.poppins-light {
    padding-left: 20px !important;
  }
  
  .blog_section ul.poppins-light li, 
  .blog_section ol.poppins-light li {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 8px !important;
  }
  
  .blog_section .padding-top-60 {
    padding-top: 0px !important;
  }

  
}

/* --- EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  .blog_section .hero-section {
    padding-top: 95px !important;
    min-height: 55vh !important;
  }

  .blog_section .textsize-37 {
    font-size: 19px !important;
  }

  .blog_section .row:has(.vertical-line-draw) img {
    max-width: 220px !important;
  }

  .blog_section .col-4 img[src*="dr-dham"],
  .blog_section .col-4 img[src*="MISTAKES"] {
    max-width: 220px !important;
  }
  
  .blog_section .implant-section .left-cards-col {
    max-width: 100% !important;
  }

  .blog_section .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .blog_section .container-fluid .pt-4 {
    padding-top: 0rem !important;
  }

   .blog_section .pt-4 {
    padding-top: 0rem !important;
  }

   .blog_section .pt-5 {
    padding-top: 2rem !important;
  }

   .container .row > .col-4 {
    margin-top: 0.1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

 .blog_section .container-fluid .implant-section .pt-5{
    margin-top: 1rem !important;
  }
}

/* ==========================================================================
   10. BRUSH YOUR TEETH PAGE (brush-your-teeth.html) RESPONSIVE STYLES
   ========================================================================== */

/* --- TABLETS & MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  /* Dynamic hero section height to prevent text overflow */
  .blog_Section ~ .hero-section,
  .blog_section ~ .hero-section,
  .blog_Section .hero-section,
  .blog_section .hero-section {
    height: auto !important;
    min-height: 60vh !important;
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .blog_Section ~ section .textsize-37,
  .blog_section ~ section .textsize-37,
  .blog_Section .textsize-37,
  .blog_section .textsize-37 {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }

  /* Make content boxes fully responsive and center them */
  .blog_Section ~ section .content-width-home,
  .blog_section ~ section .content-width-home,
  .blog_Section .content-width-home,
  .blog_section .content-width-home {
    width: 100% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .blog_Section ~ section .content-width-7,
  .blog_section ~ section .content-width-7,
  .blog_Section .content-width-7,
  .blog_section .content-width-7 {
    width: 100% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent .w-75 and .w-50 from restricting content width on smaller viewports */
  .blog_Section ~ section .w-75,
  .blog_section ~ section .w-75,
  .blog_Section .w-75,
  .blog_section .w-75,
  .blog_Section ~ section .w-50,
  .blog_section ~ section .w-50,
  .blog_Section .w-50,
  .blog_section .w-50 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Section 2 - Box and Content Overrides */
  .blog_Section ~ section .tooth-section,
  .blog_section ~ section .tooth-section,
  .blog_Section .tooth-section,
  .blog_section .tooth-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 30px !important;
  }

  .blog_Section ~ section .boxsize,
  .blog_section ~ section .boxsize,
  .blog_Section .boxsize,
  .blog_section .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -60px !important; /* Pull up slightly to overlap hero section */
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    padding: 20px !important;
  }

  .blog_Section ~ section .tooth-img,
  .blog_section ~ section .tooth-img,
  .blog_Section .tooth-img,
  .blog_section .tooth-img {
    max-width: 100% !important;
    height: auto !important;
  }



  .blog_Section ~ section .content-wrapper-2,
  .blog_section ~ section .content-wrapper-2,
  .blog_Section .content-wrapper-2,
  .blog_section .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Manual vs Electric Section - Stack Layout */
  .blog_Section ~ section .row:has(.vertical-line-draw),
  .blog_section ~ section .row:has(.vertical-line-draw),
  .blog_Section .row:has(.vertical-line-draw),
  .blog_section .row:has(.vertical-line-draw) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }

  .blog_Section ~ section .row:has(.vertical-line-draw) > .col-5,
  .blog_section ~ section .row:has(.vertical-line-draw) > .col-5,
  .blog_Section .row:has(.vertical-line-draw) > .col-5,
  .blog_section .row:has(.vertical-line-draw) > .col-5 {
    width: 100% !important;
    max-width: 90% !important;
    flex: 0 0 100% !important;
  }

  .blog_Section ~ section .row:has(.vertical-line-draw) > .col-2,
  .blog_section ~ section .row:has(.vertical-line-draw) > .col-2,
  .blog_Section .row:has(.vertical-line-draw) > .col-2,
  .blog_section .row:has(.vertical-line-draw) > .col-2 {
    display: none !important;
  }

  .blog_Section ~ section .vertical-line-draw,
  .blog_section ~ section .vertical-line-draw,
  .blog_Section .vertical-line-draw,
  .blog_section .vertical-line-draw {
    display: none !important;
  }

  .blog_Section ~ section .row:has(.vertical-line-draw) img,
  .blog_section ~ section .row:has(.vertical-line-draw) img,
  .blog_Section .row:has(.vertical-line-draw) img,
  .blog_section .row:has(.vertical-line-draw) img {
    max-width: 260px !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
    border-radius: 14px !important;
  }

  .blog_Section ~ section .row:has(.vertical-line-draw) .text-small,
  .blog_section ~ section .row:has(.vertical-line-draw) .text-small,
  .blog_Section .row:has(.vertical-line-draw) .text-small,
  .blog_section .row:has(.vertical-line-draw) .text-small {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Choosing the Right Toothbrush & Toothpaste - Stack Layout */
  .blog_Section ~ section .d-flex:has(.right-tooth-brush),
  .blog_section ~ section .d-flex:has(.right-tooth-brush),
  .blog_Section .d-flex:has(.right-tooth-brush),
  .blog_section .d-flex:has(.right-tooth-brush) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 25px;
  }

  .blog_Section ~ section .d-flex:has(.right-tooth-brush) > div,
  .blog_section ~ section .d-flex:has(.right-tooth-brush) > div,
  .blog_Section .d-flex:has(.right-tooth-brush) > div,
  .blog_section .d-flex:has(.right-tooth-brush) > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  .blog_Section ~ section .d-flex:has(.right-tooth-brush) .w-75,
  .blog_section ~ section .d-flex:has(.right-tooth-brush) .w-75,
  .blog_Section .d-flex:has(.right-tooth-brush) .w-75,
  .blog_section .d-flex:has(.right-tooth-brush) .w-75 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .blog_Section ~ section .right-tooth-brush,
  .blog_section ~ section .right-tooth-brush,
  .blog_Section .right-tooth-brush,
  .blog_section .right-tooth-brush {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .blog_Section ~ section .right-tooth-brush img,
  .blog_section ~ section .right-tooth-brush img,
  .blog_Section .right-tooth-brush img,
  .blog_section .right-tooth-brush img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 14px !important;
  }

    .blog_Section ~ section .boxsize, .blog_section ~ section .boxsize, .blog_Section .boxsize, .blog_section .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -100px !important;
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    padding: 20px !important;
  }
}

/* --- SMALL DEVICES & MOBILE (max-width: 767px) --- */
@media (max-width: 767px) {
  .blog_Section ~ .hero-section,
  .blog_section ~ .hero-section,
  .blog_Section .hero-section,
  .blog_section .hero-section {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }

  .blog_Section ~ section .textsize-37,
  .blog_section ~ section .textsize-37,
  .blog_Section .textsize-37,
  .blog_section .textsize-37 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* List alignments inside content wrappers */
  .blog_Section ~ section ul.poppins-light,
  .blog_section ~ section ul.poppins-light,
  .blog_Section .poppins-light ul,
  .blog_section .poppins-light ul,
  .blog_Section ~ section ol,
  .blog_section ~ section ol,
  .blog_Section .poppins-light ol,
  .blog_section .poppins-light ol {
    padding-left: 20px !important;
  }

  .blog_Section ~ section ul.poppins-light li,
  .blog_section ~ section ul.poppins-light li,
  .blog_Section ~ section ol li,
  .blog_section ~ section ol li {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 8px !important;
  }

  .blog_Section ~ section .line-height,
  .blog_section ~ section .line-height,
  .blog_Section .line-height,
  .blog_section .line-height {
    line-height: 1.7 !important;
  }

  .blog_Section ~ section .card-body,
  .blog_section ~ section .card-body,
  .blog_Section .card-body,
  .blog_section .card-body {
    padding: 20px !important;
  }

  .blog_Section ~ section .boxsize, .blog_section ~ section .boxsize, .blog_Section .boxsize, .blog_section .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -100px !important;
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    padding: 20px !important;
  }

   .blog_Section ~ section .padding-top-60, .blog_section ~ section .padding-top-60, .blog_Section .padding-top-60, .blog_section .padding-top-60 {
    padding-top: 0px !important;
  }

}

/* --- EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  .blog_Section ~ .hero-section,
  .blog_section ~ .hero-section,
  .blog_Section .hero-section,
  .blog_section .hero-section {
    padding-top: 95px !important;
    min-height: 50vh !important;
  }

  .blog_Section ~ section .textsize-37,
  .blog_section ~ section .textsize-37,
  .blog_Section .textsize-37,
  .blog_section .textsize-37 {
    font-size: 19px !important;
  }

  .blog_Section ~ section .row:has(.vertical-line-draw) img,
  .blog_section ~ section .row:has(.vertical-line-draw) img,
  .blog_Section .row:has(.vertical-line-draw) img,
  .blog_section .row:has(.vertical-line-draw) img {
    max-width: 220px !important;
  }

  .blog_Section ~ section .content-wrapper-2,
  .blog_section ~ section .content-wrapper-2,
  .blog_Section .content-wrapper-2,
  .blog_section .content-wrapper-2 {
    max-width: 95% !important;
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .blog_Section ~ section .right-tooth-brush,
  .blog_section ~ section .right-tooth-brush,
  .blog_Section .right-tooth-brush,
  .blog_section .right-tooth-brush {
    max-width: 220px !important;
  }

  .blog_Section ~ section .boxsize, .blog_section ~ section .boxsize, .blog_Section .boxsize, .blog_section .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -100px !important;
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    z-index: 2 !important;
    padding: 20px !important;
  }


 .blog_Section .btn .btn-primary .rounded-pill .px-4 .py-2 .small{
    font-size: 8px;
  }

  .blog_Section ~ section .padding-top-60, .blog_section ~ section .padding-top-60, .blog_Section .padding-top-60, .blog_section .padding-top-60 {
    padding-top: 0px !important;
  }

 .blog_Section .container-fluid .pt-4{
    padding-top: 0px !important;
  }
}

/* ==========================================================================
   11. SLEEP APNEA PAGE (sleep-apena.html) RESPONSIVE STYLES
   ========================================================================== */

/* Scope all styles using .blog_section to prevent overlapping with other pages */

/* 1. Therapy Cards Grid Responsiveness (Fixes the cards layout from the screenshot) */
@media (max-width: 991px) {
  .blog_section .therapy-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  .blog_section .therapy-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Increase font size for treatment option card descriptions for readability on mobile (was 10px) */
  .blog_section .therapy-content p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Make content align left (start) instead of center and add left/right padding inside the card */
  .blog_section .therapy-content {
    text-align: left !important;
    padding: 1.5rem 1.75rem 1.25rem !important; /* Increased left/right padding */
  }

  .blog_section .therapy-content .d-flex {
    align-items: flex-start !important; /* Align the tags (e.g. DENTAL OPTION) to the left */
  }
  
  .blog_section .therapy-card {
    padding: 1.25rem !important; /* Additional breathing room inside the outer card border */
  }

  /* Make Sleep Apnea type cards align left and have nice padding on mobile */
  .blog_section .sleep-card {
    text-align: left !important;
    padding: 24px 24px 20px !important; /* Increased padding */
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .blog_section .sleep-card .sleep-number {
    margin-left: 0 !important; /* Align the number to the left */
  }
  
  .blog_section .sleep-card .sleep-title {
    margin-left: 0 !important; /* Align title block to the left */
  }
}

/* 2. Page Content & Text Wrapper Responsiveness */
@media (max-width: 1199px) {
  /* Prevent horizontal scrolling by scaling page header content-width wrapper containers */
  .blog_section .content-width-home {
    width: 90% !important;
    max-width: 1000px !important;
  }
  
  .blog_section .content-width-7 {
    width: 90% !important;
    max-width: 700px !important;
  }
}

@media (max-width: 991px) {
  /* Widen narrow 70% content blocks on tablet to occupy more screen width */
  .blog_section .content-wrapper-2,
  .blog_section .content-wrapper-3 {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Stack columns in the Dental Connection section vertically */
  .blog_section .row > .col-8,
  .blog_section .row > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .blog_section .row > .col-4 {
    margin-top: 25px !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Convert tooth section to vertical flow to prevent hero overlay from clashing with the guide list */
  .blog_section .tooth-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 20px !important;
  }



  .blog_section .tooth-img {
    max-width: 100% !important;
    height: auto !important;
  }

  .blog_section .padding-top-60 {
    padding-top: 20px !important;
  }
}

@media (max-width: 767px) {
  /* Widen text container further on mobile screen sizes */
  .blog_section .content-wrapper-2,
  .blog_section .content-wrapper-3 {
    max-width: 95% !important;
  }

  /* Reduce list item height for structured guide content (was 2.5rem / 40px) */
  .blog_section ol.line-height {
    line-height: 1.8rem !important;
  }

  /* Prevent medium sized images from overflowing off screen borders on mobile */
  .blog_section .img-fluid-1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* Responsive text sizing for hero banner title */
  .blog_section .textsize-37 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Give hero text containers vertical padding */
  .blog_section .hero-section {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    height: auto !important;
    min-height: 50vh !important;
  }
}

@media (max-width: 480px) {
  .blog_section .textsize-37 {
    font-size: 18px !important;
  }
.blog_section .content-wrapper-2, .blog_section .content-wrapper-3 {
    max-width: 95% !important;
    text-align: start !important;
  }
 
}

/* ==========================================================================
   12. ADDITIONAL RESPONSIVE APPENDS FOR SLEEP APNEA PAGE
   ========================================================================== */



/* Add left and right padding to the CTA headings and paragraphs on tablet and mobile viewports (selected text in screenshot) */
@media (max-width: 991px) {
  .blog_section .d-flex.flex-column.align-items-center.py-5 > p {
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .blog_section .d-flex.flex-column.align-items-center.py-5 > p {
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   13. CARD CENTERING FOR SMALL DEVICES
   ========================================================================== */

/* Center the hero overlapping box card horizontally on tablet and mobile viewports */
@media (max-width: 991px) {
  .blog_section .boxsize {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Center therapy cards, sleep cards, and FAQ center cards on tablet and mobile */
@media (max-width: 991px) {
  .blog_section .therapy-card,
  .blog_section .sleep-card,
  .blog_section .center-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   11. Dental Implants (dental-implants.html) RESPONSIVE STYLES automatic applied from above code
   ========================================================================== */
   
/* ==========================================================================
   14. ROOT CANAL TREATMENT PAGE & SHARED CARD RESPONSIVE STYLES
   ========================================================================== */

/* --- SHARED TREATMENT JOURNEY CARDS (Used across multiple pages) --- */

@media (max-width: 991px) {
  /* Fix card container: add elegant shadow and transition, ensure proper sizing */
  .your-traetment-journey-cards {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
  }

  .your-traetment-journey-cards:hover {
    transform: translateY(-5px) !important;
  }

  .your-traetment-journey-cards .card-body {
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card titles: make them fully readable and styled as elegant white pills */
  .your-traetment-journey-cards .card-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.8rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 2.8rem !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  /* Card descriptions: fix unreadable 0.6rem font sizing, allow standard line clamping */
  .your-traetment-journey-cards .card-text {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    padding: 1rem 0.2rem 0.2rem 0.2rem !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Circular navigation buttons: add smooth hover */
  .your-traetment-journey-cards .link-for-next {
    background-color: #002D8F !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: background-color 0.3s ease !important;
  }

  .your-traetment-journey-cards .link-for-next .link_arrow i {
    color: #ffffff !important;
    font-size: 0.95rem !important;
  }
}

/* Responsive card rules for tablet and mobile */
@media (max-width: 768px) {
  .your-traetment-journey-cards {
    min-height: auto !important;
  }
  .card-img-wrapper {
    height: 180px !important;
  }
}

/* --- WHY CHOOSE WESTSIDE CARDS (ELEVATION & PADDING) --- */

.faq-card {
  padding: 20px !important;
  height: auto !important;
  min-height: 262px !important;
}

@media (max-width: 768px) {
  .faq-card {
    min-height: auto !important;
  }
}

/* --- GLOBAL LAYOUT & SPACING OVERRIDES --- */

/* Center containers with margins to prevent horizontal scroll */
@media (max-width: 991px) {
  .container.m-5 {
    margin: 2rem auto !important;
    max-width: 92% !important;
  }
  
  /* Make physician picture responsive */
  .doctor-uttma {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  
  /* Prevent fixed-width text container from overflowing */
  .divsize-content-center {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 576px) {
  .container.m-5 {
    margin: 1.5rem auto !important;
    max-width: 95% !important;
  }
}

/* --- SECTION-SPECIFIC RESPONSIVE OVERRIDES --- */

@media (max-width: 991px) {
  /* Section 2A: What is Root Canal content scaling */
  .root-canal-img {
    width: 80% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  
  .divsize-root-canal-content {
    width: 90% !important;
  }
  
  /* Section 4: Common signs list and card layout scaling */
  .sec3-card-div {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  
  .col-4 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .root-canal-img {
    width: 100% !important;
  }
  
  .divsize-root-canal-content {
    width: 100% !important;
  }
}

/* --- FAQ & FAQ CARDS RESPONSIVENESS --- */

/* Fix children FAQ container width on small viewports */
@media (max-width: 576px) {
  .card-custom-faq-second {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }
}

/* Fix fixed-height card content overflow bug (FAQ items) */
.faq-card-1 {
  height: auto !important;
  min-height: 180px !important;
  padding: 20px !important;
}

@media (max-width: 768px) {
  .faq-card-1 {
    min-height: 180px !important;
    gap: 15px !important;
  }
}

/* --- TIMELINE ALIGNMENT OVERRIDES --- */

/* Centering the timeline dots on the main line for tablet & mobile views */
@media (max-width: 991px) {
  .timeline-line {
    left: 25px !important;
    transform: translateX(-50%) !important;
  }
  
  .timeline-dot {
    left: 25px !important;
    transform: translateX(-50%) !important;
  }
}

/* --- AFTERCARE & RECOVERY LAYOUT --- */

/* Grid and columns stacking adjustments */
@media (max-width: 991px) {
  .row.mt-5 > .col-8,
  .row.mt-5 > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  
  .row.mt-5 > .col-4 {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .row.mt-5 > .col-4 img {
    max-width: 280px !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  /* Keep list content centered but aligned-start for professional styling */
  .treatment_section ul {
    text-align: left !important;
    display: inline-block !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
  }
}

/* --- TOUCH FRIENDLY CALL-TO-ACTION BUTTONS --- */

@media (max-width: 480px) {
  .treatment_section .btn {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 13px !important;
    padding: 10px 15px !important;
    white-space: normal !important;
  }

    .treatment_section .margin-top{
    margin-top: 0px;
  }
}

/* --- REVIEW CARDS RESPONSIVE REFINE --- */
@media (max-width: 576px) {
  .review-card h5 {
    font-size: 15px !important;
  }

    .treatment_section .margin-top{
    margin-top: 0px;
  }
}

/* ==========================================================================
   CANAL TREATMENT SPECIFIC RESPONSIVE OVERRIDES (SCOPED SELECTORS)
   ========================================================================== */

/* Journey Accordion Cards readability improvements */
.treatment_section .your-traetment-journey-cards .card-title {
  font-size: 1.1rem !important;
  height: auto !important;
  min-height: 2.8rem !important;
  padding: 0.5rem 1rem !important;
}

.treatment_section .your-traetment-journey-cards .card-text {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  padding: 0.5rem 1rem !important;
  -webkit-line-clamp: unset !important;
}

/* FAQ card styling spacing alignment */
.treatment_section .faq-card {
  padding: 24px !important;
}

@media (max-width: 991px) {
  /* Section 2 content container width overflow fix */
  .treatment_section .divsize-content-center {
    width: 100% !important;
    max-width: 525px !important;
    margin: 0 auto !important;
  }

  /* Section 4 grid stacking */
  .treatment_section .row.margin-top-10 > .col-8,
  .treatment_section .row.margin-top-10 > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .treatment_section .row.margin-top-10 > .col-4 {
    margin-top: 30px !important;
    justify-content: center !important;
  }

  /* Section 7 doctor card image container fluid scale */
  .treatment_section .doctor-uttma {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  /* Section 8 image width overflow fix */
  .treatment_section .img-fluid1 {
    width: 100% !important;
    max-width: 270px !important;
    height: auto !important;
  }
}

@media (max-width: 576px) {
  /* Section 7A Timeline items spacing tweaks for small screens */
  .treatment_section .timeline-item.left .timeline-content,
  .treatment_section .timeline-item.right .timeline-content {
    padding-left: 50px !important;
  }
  
  .treatment_section .timeline-line,
  .treatment_section .timeline-dot {
    left: 15px !important;
  }
}

/* ==========================================================================
   CANAL TREATMENT - ADDITIONAL RESPONSIVE POLISH & PADDING
   ========================================================================== */

/* --- GLOBAL RESPONSIVE SAFETY FOR CANAL TREATMENT --- */
.treatment_section .container-5 {
  width: 100%;
  max-width: 100%;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto;
  margin-right: auto;
}

/* --- LAPTOP BREAKPOINT (max-width: 1199px) --- */
@media (max-width: 1199px) {
  /* Ensure proper spacing on large screens */
  .treatment_section .container-5 {
    max-width: 960px;
  }
}

/* --- TABLETS / MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  .treatment_section .container-5 {
    max-width: 720px;
  }

  .treatment_section .margin-top {
    margin-top: 0px !important;
  }
  /* Prevent container with m-5 margin from squishing content on tablets */
  .treatment_section .container.m-5 {
    margin: 2rem auto !important;
    max-width: 95% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Center heading and list in Section 4 (Common signs) for premium mobile alignment */
  .treatment_section .row.margin-top-10 > .col-8 {
    text-align: center !important;
  }
  .treatment_section .row.margin-top-10 > .col-8 ul {
    text-align: left !important;
    display: inline-block !important;
    margin: 1.5rem auto 0 !important;
    padding-left: 20px !important;
  }

  /* Soften margin top of Section 2A instead of hard 120px */
  .treatment_section .margin-top {
    margin-top: 60px !important;
  }
  
  /* Fix height collapse issue with card image wrapper on tablet stacking */
  .treatment_section .img-fluid-card {
    height: auto !important;
  }
}

/* --- SMALL DEVICES / PHONES (max-width: 767px) --- */
@media (max-width: 767px) {
  .treatment_section .container-5 {
    max-width: 540px;
  }

  /* Center heading and list in Section 8A (Root Canal vs Extraction) */
  .treatment_section .my-5.poppins-light {
    text-align: center !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .treatment_section .my-5.poppins-light ul {
    text-align: left !important;
    display: inline-block !important;
    margin: 1.5rem auto 0 !important;
    padding-left: 20px !important;
  }
}

/* --- MOBILE / EXTRA SMALL DEVICES (max-width: 576px) --- */
@media (max-width: 576px) {
  .treatment_section .container-5 {
    max-width: 100%;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Align Section 8B list heading and list items */
  .treatment_section .row.mt-5 > .col-8 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Stack review cards vertically for highly readable mobile layout */
  .treatment_section .review-card .d-flex.align-items-start {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .treatment_section .review-card .review-img {
    margin-bottom: 15px !important;
    margin-left: 0 !important;
  }
  .treatment_section .review-card .star-box {
    justify-content: center !important;
  }

  /* Optimize FAQ card padding for narrow viewports */
  .treatment_section .faq-card {
    padding: 16px !important;
  }
}

/* --- EXTRA MOBILE / EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  .treatment_section .container-5 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Spacing improvements for hero and buttons */
  .treatment_section .margin-top {
    margin-top: 30px !important;
  }
}

/* --- ACCORDION CARDS 2-COLUMN LAYOUT ON TABLET --- */
.treatment_section #treatmentAccordion {
  flex-direction: row !important;
}

/* --- BLACK BUTTON HOVER TRANSPARENCY FIX --- */
.treatment_section .black-color:hover,
.treatment_section .black-color:focus,
.treatment_section .black-color:active {
  background-color: #2c2d30 !important; /* Premium dark grey hover background instead of transparent */
  color: #F9F4F4 !important;
  border-color: #2c2d30 !important;
  text-decoration: none !important;
}

/* --- FIX FOR CONTENT OVERLAPPING IMAGE CARD (IPHONE 5 / MOBILE VIEWS) --- */
@media (max-width: 991px) {
  .treatment_section .tooth-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 30px !important;
  }

  .treatment_section .tooth-section .boxsize {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: -60px !important; 
    margin-bottom: 25px !important; 
    z-index: 2 !important;
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .treatment_section .tooth-section .content-wrapper {
    margin-top: 0px !important;
    padding-top: 1.5rem !important; /* Set standard premium space before text starts */
    max-width: 90% !important;
  }
}

@media (max-width: 480px) {
  .treatment_section .tooth-section .boxsize {
    max-width: 270px !important;
    margin-top: -35px !important;
    margin-bottom: 15px !important; /* Robust gap on small screens */
  }
  
  .treatment_section .tooth-section .content-wrapper {
    padding-top: 1.5rem !important; /* Guaranteed clean gap on extra small screens */
    max-width: 95% !important;
  }
}


/* mouth restoration - sevices inner page */

/* ==========================================================================
   8. MOUTH RESTORATION SPECIFIC RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- TABLETS & MEDIUM DEVICES (max-width: 991px) --- */
@media (max-width: 991px) {
  /* Prevent hero overlap & allow dynamic wrapping */
  .hero-section {
    height: auto !important;
    min-height: 55vh !important;
    padding: 120px 20px 120px !important;
  }

  /* Make the smile image fill the blue box nicely */
  .tooth-img {
    width: 95% !important;
    max-width: 400px !important;
    height: auto !important;
  }

  /* Reduce excessive top margins */
  .margin-top {
    margin-top: 40px !important;
  }

  /* Prevent accordion container with m-5 margin from squishing content */
  .container.m-5 {
    margin: 2rem auto !important;
    max-width: 95% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Column Stacking for Sections 4, 5, 6, 10 */
  .row.margin-top-10 > .col-7,
  .row.margin-top-10 > .col-5 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .row.margin-top-10 > .col-5 {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Image wrappers responsiveness */
  .sec3-card-div {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .img-fluid-card {
    height: auto !important;
  }

  /* FAQ Column width optimization for stacked viewports */
  .faq-column {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  /* Force Accordion to show 2 cards per row on Tablet */
  #treatmentAccordion {
    flex-direction: row !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #treatmentAccordion > .col-md-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Prevent card height collapse/overflow in journey cards */
  .your-traetment-journey-cards {
    min-height: auto !important;
    height: auto !important;
  }
  
  .your-traetment-journey-cards .card-title {
    font-size: 1rem !important;
  }

  .your-traetment-journey-cards .card-text {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  
  /* Ensure full text is visible when collapse is shown */
  .your-traetment-journey-cards .collapse.show .card-text,
  .your-traetment-journey-cards .collapsing .card-text {
    -webkit-line-clamp: unset !important;
    display: block !important;
  }
}

/* --- SMALL DEVICES & PHONES (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Make FAQ images responsive to prevent card overflow */
  .img-fluid1 {
    width: 100% !important;
    max-width: 270px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Cost section image container scaling */
  .divsize-sec-5 {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
}

/* --- MOBILE & EXTRA SMALL DEVICES (max-width: 767px) --- */
@media (max-width: 767px) {
  /* Force Accordion to show 1 card per row on Mobile */
  #treatmentAccordion {
    flex-direction: column !important;
  }
  #treatmentAccordion > .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- MOBILE & EXTRA SMALL DEVICES (max-width: 576px) --- */
@media (max-width: 576px) {
  /* Button wrapping and safety for long text */
  .btn {
    white-space: normal !important;
    font-size: 14px !important;
    padding: 10px 15px !important;
  }
  
  .content-width {
    width: 100% !important;
  }
}

/* --- EXTRA SMALL DEVICES (max-width: 480px) --- */
@media (max-width: 480px) {
  .hero-section {
    height: auto !important;
    min-height: 50vh !important;
    padding: 120px 10px 110px !important;
  }
}