/* --------------------------------------------------
   Root variables
   -------------------------------------------------- */
   :root {
    --section-max: 1080px;
    --blue-dark:   #1A237E;
    --blue-light:  #00B2C8;
    --footer-bg:   var(--blue-dark);
    --footer-text: #FFFFFF;
  }
  
  /* --------------------------------------------------
     Reset & Box Sizing
     -------------------------------------------------- */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* --------------------------------------------------
     Body & Background
     -------------------------------------------------- */
  body {
    background: url('../images/0background.jpg') repeat fixed;
    font-family: 'Gilroy Light', sans-serif;
    color: var(--blue-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* --------------------------------------------------
     Section Container
     -------------------------------------------------- */
  .section {
    width: 90%;
    max-width: var(--section-max);
    margin: 2.5rem auto;
    padding: 2.5rem;
    background: #fff;
    border-radius: 3rem;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  /* --------------------------------------------------
     Logos
     -------------------------------------------------- */
  .logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  .logos img {
    height: auto;
    width: clamp(120px, 20vw, 250px);
    margin: 0.5rem 0;
  }
  
  /* --------------------------------------------------
     Fluid Typography
     -------------------------------------------------- */
  .title {
    font-family: 'Gilroy Bold', sans-serif;
    font-size: clamp(2rem, 5vw, 3.75rem);
    color: var(--blue-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    max-width: 80%;
    margin: 0 auto 1.5rem;
    text-align: left;
  }
  
  .subheading {
    font-family: 'Gilroy Bold', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--blue-light);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 80%;
    margin: 0 auto 1.5rem;
    text-align: left;
  }
  
  .body-text {
    font-family: 'Gilroy Light', sans-serif;
    font-size: clamp(1rem, 2vw, 1.375rem);
    color: var(--blue-dark);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 80%;
    margin: 0 auto 2rem;
    text-align: left;
  }
  
  .disclaimer {
    font-family: 'Gilroy Light', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    color: var(--blue-dark);
    line-height: 1.4;
    margin-bottom: 2rem;
    max-width: 80%;
    margin: 0 auto 2rem;
    text-align: left;
  }
  
  .footer-text {
    font-family: 'Gilroy Bold', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.375rem);
    margin: 0;
  }
  
  /* --------------------------------------------------
     Media Elements
     -------------------------------------------------- */
  .graphic {
    display: block;
    width: 90%;
    margin: 1.25rem auto 0;
    border-radius: 0.625rem;
  }
  .graphic2 {
    display: block;
    width: 90%;
    margin: 1.25rem auto 0;
    border-radius: 0.625rem;
  }
  
  /* Section 2: Swap between landscape and portrait video */
  .video-landscape {
    display: block;
    width: 100%;
    max-width: 80rem;
    margin: 2.5rem auto 0;
    border-radius: 0.625rem;
  }
  .video-portrait {
    display: none;
    width: 50%;
    max-width: 30rem;
    margin: 2.5rem auto 0;
    border-radius: 0.625rem;
  }
  
  /* Section 3 bottom graphic (swapped via <picture>) */
  .graphic3 {
    display: block;
    width: 80%;
    margin: 2.5rem auto 0;
    border-radius: 0.625rem;
    margin-bottom: 3rem;
  }
  
  /* --------------------------------------------------
     Section 4: Dentist Recommendation (desktop only)
     -------------------------------------------------- */
  #dt-section {
    display: block;
    margin-top: 2.5rem;
  }
  
  /* Hide dt-section on mobile */
  @media (max-width: 480px) {
    #dt-section {
      display: none;
    }
  }
  
  /* Ensure dt-section uses the same side padding as other sections */
  #dt-section .dt-title,
  #dt-section .dt-body-text,
  #dt-section .dt-two-col {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Logo at top-left of dt-section, made larger */
  .dt-logo {
    display: block;
    max-height: 8rem; /* increased from 4rem */
    width: auto;
    margin-bottom: 1rem;
    margin-left: 10%;
  }
  
  /* Title within dt-section */
  .dt-title {
    font-family: 'Gilroy Bold', sans-serif;
    font-size: clamp(2rem, 5vw, 3.75rem);
    color: var(--blue-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: left;
    /* max-width and horizontal centering inherited above */
  }
  
  /* Body text for dt-section, no extra spacing */
  .dt-body-text {
    font-family: 'Gilroy Light', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    color: var(--blue-dark);
    line-height: 1.4;
    margin-bottom: 2rem;
    text-align: left;
    /* max-width and centering inherited above */
  }
  
  /* Two-column layout in dt-section */
  .dt-two-col {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
    /* max-width and centering inherited above */
  }
  
  .dt-col {
    flex: 1;
    display: flex;
    justify-content: center; /* center image horizontally */
  }
  
  .dt-image {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 0.625rem;
  }
  
  /* --------------------------------------------------
     Divider & Footer within Sections
     -------------------------------------------------- */
  .line-image {
    display: block;
    width: 100%;
    margin: 0 auto 1rem;
  }
  .footer-text-container {
    max-width: 100%;
    margin: 0 auto 3rem;
    text-align: right;
  }
  .footer-text--dark { color: var(--blue-dark); }
  .footer-text--light { color: var(--blue-light); }
  
  /* --------------------------------------------------
     Responsive Breakpoints
     -------------------------------------------------- */
  /* Mobile (≤ 480px) */
  @media (max-width: 480px) {
    #final-section {
      display: none;
    }
  
    .section {
      width: 95%;
      margin: 1.25rem auto;
      padding: 1.25rem;
    }
  
    .graphic,
    .graphic2 {
      max-width: 70% !important;
      margin-top: 2rem !important;
      margin-bottom: 1rem !important;
    }
  
    .title,
    .subheading,
    .body-text,
    .disclaimer,
    .footer-text-container {
      max-width: 100%;
      margin-bottom: 1rem;
    }
  }
  
  /* Tablet (≤ 768px) */
  @media (max-width: 768px) {
    .graphic,
    .graphic2,
    .graphic3 {
      width: 100%;
      max-width: none;
      margin: 1.5rem auto 0;
      margin-bottom: 3rem;
    }
  
    /* Video swap at ≤ 768px */
    .video-landscape {
      display: none;
    }
    .video-portrait {
      display: block;
      width: 80%;
      margin: 1.5rem auto 0;
      border-radius: 0.625rem;
    }
  
    /* dt-section images stack on tablet */
    .dt-two-col {
      flex-direction: column;
      gap: 1.5rem;
    }
    .dt-image {
      width: 80%;
      margin: 1rem auto 0;
    }
  }
  
  /* Desktop/Tablet (≤ 1024px) */
  @media (max-width: 1024px) {
    .title,
    .subheading,
    .body-text,
    .disclaimer {
      max-width: 100%;
      margin: 0 auto 1.5rem;
    }
    .graphic3 {
      width: 80%;
      margin-bottom: 3rem;
    }
  }
  
  /* --------------------------------------------------
     Footer Styles
     -------------------------------------------------- */
  #site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 1.5rem 0;
  }
  
  .footer-container {
    width: 90%;
    max-width: var(--section-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .footer-logo {
    background-color: #fff;
    padding: 1rem;        
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;      
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: auto;
  }
  
  .footer-logo img {
    display: block;
    max-height: 4rem;
    max-width: 100%;
    height: auto;
    width: auto;
  }
  
  .footer-address {
    font-family: 'Gilroy Light', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    line-height: 1.4;
    text-align: right;
    white-space: pre-wrap;
    color: var(--footer-text);
  }
  
  /* Mobile footer stacking */
  @media (max-width: 480px) {
    .footer-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      text-align: center;
    }
    .footer-address {
      text-align: center;
      max-width: 100%;
    }
  }