/* Responsive Design - Mobile First */

/* XXL Screens */
@media (min-width:1400px){
.container{max-width:1320px}
.hero-title{max-width:700px}
}

/* XL Screens */
@media (max-width:1199.98px){
.hero-title{font-size:4rem}
.section-title{font-size:3rem}
.program-wrapper{padding:3rem}
.display-3{font-size:4rem}
.navbar-logo{height:44px}
}

/* LG Screens */
@media (max-width:991.98px){
section,.py-section{padding:80px 0}
.custom-navbar .navbar-nav{padding:1rem 0}
.hero-section{min-height:auto;padding:60px 0}
.hero-section .row{row-gap:2.5rem}
.hero-title,.hero-description,.section-title{text-align:center}
.hero-description{margin:0 auto}
.hero-section .btn{display:block;margin:0.75rem auto;max-width:340px}
.program-wrapper,.vision-quote,.quote-box{padding:2rem}
.founder-image{margin:0 auto 2rem}
.footer-section,.footer-bottom{text-align:center}
.footer-bottom{justify-content:center}
.navbar-brand{font-size:1.3rem}
}

/* MD Screens */
@media (max-width:767.98px){
.hero-title{font-size:2.8rem}
.section-title{font-size:2.2rem}
.display-3{font-size:2.5rem!important}
.hero-description{font-size:1.1rem}
.problem-card,.focus-card,.benefit-card,.experience-card,.impact-card,.audience-card{
padding:1.5rem;border-radius:12px;font-size:0.95rem}
.problem-icon,.benefit-card i,.experience-card i{
width:68px;height:68px;font-size:1.5rem}
.program-wrapper{border-radius:18px;padding:1.75rem}
.btn-golden,.btn-outline-custom{
width:100%;
text-align:center;
padding:0.85rem 1.5rem}
.footer-links{margin-bottom:2rem}
.quote-box{padding:1.5rem;border-left-width:3px}
.vision-quote{padding:2rem;border-radius:20px}
.impact-card h2{font-size:2.8rem}
.navbar-logo{height:40px}
.brand-text{font-size:1rem}
.footer-logo-section{gap:0.75rem;margin-bottom:1.25rem}
.footer-logo{height:48px}
}

/* SM Screens */
@media (max-width:575.98px){
body{font-size:15px}
section,.py-section{padding:60px 0}
.hero-title{font-size:2.2rem;line-height:1.25}
.section-title{font-size:1.8rem}
.display-3{font-size:2rem!important}
.container{padding-left:16px;padding-right:16px}
.top-bar{padding:0.6rem 0;font-size:0.85rem}
.program-wrapper,.vision-quote,.quote-box{
padding:1.25rem}
.back-to-top{
width:44px!important;
height:44px!important;
right:14px;
bottom:14px;
font-size:0.9rem}
.footer-brand{font-size:1.5rem}
.footer-title{font-size:1rem}
.footer-links a{font-size:0.9rem}
.section-subtitle{padding:0.5rem 1rem;font-size:0.7rem}
.problem-card h5,.benefit-card h5,.experience-card h5{
font-size:1rem;margin:0.75rem 0 0}
.impact-card h5{font-size:0.95rem}
.navbar-toggler{width:32px;height:32px}
.navbar-logo{height:36px}
.brand-text{font-size:0.95rem}
.navbar-brand{gap:0.5rem}
.footer-logo-section{gap:0.5rem}
.footer-logo{height:40px}
}

/* Utilities */
.img-fluid{height:auto}
.row>[class*='col-']{margin-bottom:0}

@media(max-width:767.98px){
.hide-mobile{display:none!important}
.show-mobile{display:block!important}
}

@media(min-width:768px){
.show-mobile{display:none!important}
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
*{
animation-duration:0.01ms!important;
animation-iteration-count:1!important;
transition-duration:0.01ms!important}}

/* Dark mode support */
@media (prefers-color-scheme:dark){
:root{
--bg:#1a1a1a;
--bg-soft:#2a2a2a;
--text-dark:#f0f0f0;
--text-muted:#b0b0b0}
body{background:var(--bg);color:var(--text-dark)}
.custom-navbar{background:rgba(30,30,30,0.9)}
.problem-card,.focus-card,.benefit-card,.experience-card,.impact-card,.audience-card{
background:#252525;border-color:rgba(46,125,50,0.15)}
.program-wrapper{background:linear-gradient(135deg,#252525,#1f1f1f)}
.vision-quote{background:linear-gradient(135deg,#252525,#1a1a1a)}
}