/* RESET */
/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* DO NOT put font-family here, it breaks inheritance! */
}

body {
    /* Put the font-family on the body so it cascades naturally */
    font-family: 'Inter', system-ui, sans-serif;
    
    background: #f6f8f9;
    color: #1f2d3d;
    overflow-x: hidden; 
}

p {
    line-height: 1.6;
}

/* CONTAINER */
.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 clamp(15px, 4vw, 40px);
    margin: auto;
}

/* BUTTONS */
.btn {
    padding: 12px 22px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    text-align: center; 
}

.btn.primary {
    background: #4da8c7;
    align-items: center;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(77, 168, 199, 0.25);
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(77, 168, 199, 0.35),
        0 0 10px rgba(77, 168, 199, 0.25);
    background: #3f98b6; 
}

.btn.primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(77, 168, 199, 0.2);
}

.btn.outline {
    border: 2px solid #4da8c7;
    color: #4da8c7;
    background: transparent;
    border-radius: 25px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.btn.outline:hover {
    border-color: #3f98b6;   
    color: #3f98b6;
    transform: translateY(-2px);
    box-shadow: 
        0 6px 14px rgba(77, 168, 199, 0.2),
        0 2px 6px rgba(0,0,0,0.05);
}

.btn.outline:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* HERO */
/* ... (Keep the rest of your CSS file exactly the same from here down) ... */

/* HERO */
.hero {
    /* Responsive padding */
    padding: clamp(40px, 8vw, 80px) 0 clamp(50px, 10vw, 90px);
    position: relative;
    background: linear-gradient(180deg, #f4f9fb 0%, #e6f2f6 100%);
    overflow: hidden;
}

.hero-content {
    display: flex;
    align-items: center;   /* 🔥 change from stretch → center */
    gap: clamp(20px, 4vw, 40px);
}

/* LEFT TEXT */
.hero-text {
    max-width: 500px;
}

.badge {
    display: inline-block;
    background: #fff4e5;
    color: #e09b3d;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    border-style: solid;
    border-width: thin;
    border-color: #ffbd83;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;

    background: #d9e8ee;

    clip-path: polygon(
        0 80%,   /* left */
        102% 42%, /* right */
        100% 100%,
        0 100%
    )
}
.hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;

    background: #cfe2e8;

    clip-path: polygon(
        0 85%,
        100% 65%,
        100% 100%,
        0 100%
    );

    opacity: 0.6;
}

.hero-text h1 {
    /* Responsive Font */
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800; 
    
}

.hero-text h1 span {
    color: #4da8c7;
}

.hero-text p {
    color: #6c7a89;
    margin-bottom: 25px;
    font-size: clamp(16px, 2vw, 16px); 
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allows buttons to stack on small screens */
}

/* FEATURES */
.hero-features {
    display: flex;              /* 🔥 important */
    align-items: center;        /* vertical alignment */
    gap: 7px;                  /* spacing between items */
    flex-wrap: wrap; /* Prevents overflow */
}

.hero-features svg {
    height: 15px;
    width: 15px;
    color: #2f9a65;
}

.hero-features span {
    margin-right: 20px;
    color: #393939;
    font-size: 14px;
}

.hero-image {
    flex: 1;
    max-height: 100%;   /* prevents overflow */
}

.hero-image img {
    width: 100%;
    height: 100%;       /* 🔥 important change */
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        align-items: center; /* centers horizontally */
        text-align: center;
    }

    .hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center; /* 🔥 vertical centering */
        align-items: center;
        max-width: 100%;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-features {
        justify-content: center;
    }

    .hero-image img {
        width: 100%;
        margin-top: 20px;
    }

    .nav-links {
        display: none;
    }
}

/* SERVICES SECTION */
.services {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    text-align: center;
}

/* TITLES */
.section-subtitle {
    color: #5aaec4;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.section-title {
    /* Responsive Font */
    font-size: clamp(26px, 5vw, 32px);
    margin-bottom: 10px;
    line-height: 1.2;
}

.section-desc {
    color: #6c7a89;
    margin-bottom: clamp(30px, 5vw, 50px);
}

/* GRID */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.service-grid svg{
    height: 30px;
    width: 30px;
}

/* CARD */
.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.service-card:hover {
    transform: translateY(-8px);
}

/* ICON */
.icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 15px;
}

/* ICON COLORS */
.icon.blue { background: #e6f4fa; color: #4da8c7; }
.icon.green { background: #e8f7ef; color: #3dbb7d; }
.icon.orange { background: #fff3e6; color: #f39c12; }
.icon.pink { background: #fdeaf2; color: #e84393; }

/* TEXT */
.service-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.service-card p {
    font-size: 14px;
    color: #6c7a89;
    margin-bottom: 15px;
}

/* LEARN MORE */
.learn {
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

/* COLORS */
.learn.blue { color: #4da8c7; }
.learn.green { color: #3dbb7d; }
.learn.orange { color: #f39c12; }
.learn.pink { color: #e84393; }

/* BUTTON CENTER */
.center-btn {
    margin-top: 40px;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .service-grid { grid-template-columns: 1fr; }
}

/* PROGRAM SECTION */
.program {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    background-color: #ffe6c3;
}

.program-wrapper {
    max-width: 1200px;
    display: flex;
    align-items: stretch;   /* 🔥 IMPORTANT */
    gap: clamp(25px, 5vw, 50px);
    padding: clamp(20px, 5vw, 40px);
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.08);
}
/* LEFT CONTENT */
.program-content {
    flex: 1;
}

.program-content h2 {
    /* Responsive Font */
    font-size: clamp(24px, 5vw, 32px);
    margin: 15px 0;
    line-height: 1.2;
}

.program-content p {
    color: #6c7a89;
    margin-bottom: 25px;
}

/* INFO GRID */
.program-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* INFO BOX */
.info-box {
    padding: 18px;
    border-radius: 14px;
}

.info-box h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.info-box span {
    font-weight: 500;
    color: #4b4b4b;
    font-size: 14px;
}

/* COLORS */
.info-box.blue { background: #e6f4fa; }
.info-box.green { background: #e8f7ef; }
.info-box.yellow { background: #fff3e6; }
.info-box.pink { background: #fdeaf2; }

.summer-program-logos{
    margin-bottom: 5px;
}

/* FEATURES */
.program-features h4 {
    margin-bottom: 10px;
}

.program-features ul {
    list-style: none;
    padding-left: 0;
}

.program-features li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
    color: #6c7a89;
}

.program-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4da8c7;
}

/* BUTTON */
.btn.orange {
    background: #f39c12;
    color: #fff;
    margin-top: 20px;
    display: inline-block;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;

    transition: all 0.25s ease;

    /* base shadow */
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.25);
}

.btn.orange:hover {
    background: #e67e00;   /* slightly darker */
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(243, 156, 18, 0.35),
        0 0 12px rgba(243, 156, 18, 0.25);
}

.btn.orange:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 3px 8px rgba(243, 156, 18, 0.25);
}

.program-image {
    flex: 1;
    display: flex;
}
/* IMAGE */
.program-image img {
    width: 100%;
    height: 100%;          /* 🔥 KEY */
    object-fit: cover;     /* prevents distortion */
    border-radius: 20px;
    display: block;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .program-wrapper { flex-direction: column; }
    .program-image img { width: 100%; min-height: 250px; }
}
@media (max-width: 480px) {
    /* Stack program info grid on very small screens */
    .program-info { grid-template-columns: 1fr; }
}

/* WHO WE HELP */
.help {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    text-align: center;
}

/* GRID */
.help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.help-card {
    background: #fff;
    font-size: 15px;
    padding: 20px;
    border-radius: 14px;
    text-align: left;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    position: relative;
    line-height: 1.4;
}

.help-card:hover {
    transform: translateY(-5px);
}

.help-card svg{
    height: 35px;
    width: 35px;
    flex-shrink: 0; /* Prevents icons from squishing */
}

/* RESPONSIVE */
@media (max-width: 1000px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .help-grid { grid-template-columns: 1fr; } }

/* CTA SECTION */
.cta {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
}

.cta-box {
    background: linear-gradient(135deg, #dceff3, #e6f4ec);
    /* Responsive Padding */
    padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 60px);
    border-radius: 25px;
    text-align: center;
    box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.10);
}

/* TEXT */
.cta-box h2 {
    /* Responsive Font */
    font-size: clamp(22px, 5vw, 26px);
    margin-bottom: 15px;
}

.cta-box p {
    color: #5f6f7f;
    max-width: 600px;
    margin: 0 auto 25px;
}

/* BUTTON CENTER */
.cta-box .btn { margin-top: 10px; }

/* WHY SECTION */
.why {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    text-align: center;
}

/* GRID */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

/* CARD */
.why-card {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.why-card:hover { transform: translateY(-8px); }

/* ICON COLORS (reuse style from services) */
.icon.purple { background: #f0e8ff; color: #7d5fff; }
.icon.cyan { background: #e6f7fb; color: #00a8cc; }

/* TEXT */
.why-card h3 { font-size: 18px; margin-bottom: 10px; }
.why-card p { font-size: 14px; color: #6c7a89; }

/* RESPONSIVE */
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }

/* TESTIMONIALS */
.testimonials {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    text-align: center;
}

/* GRID */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

/* CARD */
.testimonial-card {
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    text-align: left;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative;
    transition: 0.3s;
}

.testimonial-card:hover { transform: translateY(-6px); }
.stars { color: #f39c12; font-size: 18px; margin-bottom: 10px; }
.quote { font-size: 14px; color: #6c7a89; margin-bottom: 20px; line-height: 1.6; }
.profile { display: flex; align-items: center; gap: 12px; }
.profile svg { width: 40px; height: 40px; border-radius: 50%; }
.profile h4 { font-size: 14px; }
.profile span { font-size: 12px; color: #888; }

/* RESPONSIVE */
@media (max-width: 1000px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* STATS SECTION */
.stats { padding: clamp(20px, 4vw, 40px) 0; }
.stats-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap; /* Allows wrapping on very small screens */
}
.stat-item { display: flex; align-items: center; gap: 12px; }
.stat-icon {
    width: 45px; height: 45px; background: #fff3e6; color: #f39c12; display: flex;
    align-items: center; justify-content: center; border-radius: 50%; font-size: 20px;
}
.stat-icon.green { background: #e8f7ef; color: #3dbb7d; }
.stat-icon.yellow { background: #fff8e1; color: #f1c40f; }
.stat-item h3 { font-size: 18px; }
.stat-item p { font-size: 12px; color: #6c7a89; }
.divider { width: 1px; height: 40px; background: #eee; }

/* RESPONSIVE */
@media (max-width: 600px) {
    .stats-wrapper { flex-direction: column; gap: 20px; }
    .divider { display: none; }
}

/* CONTACT CTA */
.contact-cta {
    /* Responsive Padding */
    padding: clamp(40px, 8vw, 80px) 0;
    background: #eef6f8;
    border-top: #c2d9e8;
    border-style: solid;
    border-width: thin;
}

.contact-wrapper {
    display: flex;
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.10);
}

/* LEFT IMAGE */
.contact-image img {
    width: 100%;             /* Changed from 450px to 100% */
    max-width: 450px;        /* Maintains desktop layout size */
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT CONTENT */
.contact-content {
    /* Responsive Padding */
    padding: clamp(30px, 5vw, 50px);
    flex: 1;
}

.contact-content h2 {
    /* Responsive Font */
    font-size: clamp(24px, 5vw, 28px);
    margin: 10px 0;
}

.contact-desc { color: #6c7a89; margin-bottom: 25px; }

/* CONTACT BOX */
.contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-radius: 14px;
    margin-bottom: 15px;
}

.contact-box.blue { background: #e6f4fa; }
.contact-box.green { background: #e8f7ef; }
.contact-box.yellow { background: #fff3e6; }
.contact-box .icon { font-size: 20px; }
.contact-box h4 { margin-bottom: 5px; }
.contact-box span { display: block; font-size: 14px; }
.contact-box small { color: #777; font-size: 12px; }
.contact-btn { margin-top: 20px; display: inline-block; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-wrapper { flex-direction: column; }
    .contact-image img { width: 100%; max-width: 100%; height: 250px; }
}