/* =========================================
   RESPONSIVENESS (Mobile First -> Desktop)
   ========================================= */

@media (max-width: 1199px) {
  .header .nav-content { justify-content: space-between; }

  .header .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--PrimaryColor);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 0.6rem;
        z-index: 1002;
        transition: left 0.3s ease-in-out;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  }

  .header .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: 0.6rem;
        flex: unset;
  }

  .header .nav-links.active { left: 0; }

  .header .sidebar-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f6f6f630;
  }

  .header .nav-links a:not(.btn) {
    font-size: 1.1rem;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    color: #fff;
  }

  .header .nav-links a:hover:not(.btn) {
    color: var(--SecondaryColor);
  }

  .header .sidebar-header .logo img,
  .header .nav-links .btn { filter: none; }

  .header .mobile-toggle {
    display: inline-flex;
    position: relative;
    z-index: 1000;
  }
.header .sign-btn{margin-left: 0; margin-top: 1rem;}
.aluminum-section{flex-direction: column;}
.aluminum-section .aluminum-badge{display: block; text-align: center; width: 100%;}
.aluminum-section { min-height: unset; padding-bottom: 5rem; }
.aluminum-section .aluminum-badge { position: static; margin-top: 2rem; }

}

@media (max-width: 991px) {
.hero-section.hero-banner { min-height: inherit; padding: 10rem 0 3rem; }
.hero-banner > .hero-content-bx{min-height: inherit;}
.hero-banner > .container { padding-top: 0; padding-bottom:0; }
.hero-banner-stats { gap: 1.5rem 2.5rem; margin-top: 3rem; }
.buying-title { margin-bottom: 0.5rem; }
.sizes-section .sizes-intro { max-width: 100%; }
.founder-section { min-height: unset;  }
.founder-section .same-heading p,
.founder-section .founder-quote { max-width: 100%; }
.founder-section .founder-overlay{width: 100%;}
.header .sign-btn{flex-wrap: wrap;}


}

@media (max-width: 767px) {

.hero-banner-content p { max-width: 100%; }
.hero-banner-stats { gap: 1.25rem 2rem; margin-top: 2rem; }
.buying-step { gap: 1.25rem; padding: 1.25rem 0; }
.buying-step-num { width: 2rem; font-size: 1.4rem; }
.sizes-section .sizes-table { grid-template-columns: 1fr; }
.sizes-section .sizes-cell-head { display: none; }
.sizes-section .sizes-cell:nth-child(3n+2),
.sizes-section .sizes-cell:nth-child(3n) { border-left: none; }
.sizes-section .sizes-cell:nth-child(n+4) { border-top: 1px solid #E7E4D8; }
.sizes-section .sizes-cell-label { border-top: 1px solid #E7E4D8; padding-top: 1.75rem; }
.sizes-section .sizes-cell:nth-child(4) { border-top: none; }
.sizes-section .sizes-caption { font-size: 0.6rem; }
.cost-section .cost-grid { grid-template-columns: 1fr; }
.cost-section .cost-panel { min-height: unset; padding: 2rem 1.5rem; }
.footer{padding: 2rem 0;}
.footer-divider{margin: 0 0 1rem;}

}

@media (max-width: 575px) {
.founder-section .founder-caption { right: 1.25rem; bottom: 1.25rem; }
.final-section .final-icon { height: 2.5rem; }
.buying-steps .buying-step-num{font-size: 2.2rem;}
.buying-steps .buying-step-body h4{font-size: 1.2rem;}
.sizes-section .sizes-footnote{margin-top: 3rem;}
.aluminum-section .aluminum-feature { align-items: start; flex-direction: column; gap: 0.4rem; }
.aluminum-section .aluminum-feature h4 { flex: none; max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-banner-stats { flex-direction: column; gap: 1rem; }
}