/* ==========================
   Base / Desktop Logo Bounds
========================== */
.navbar__logo,
.navbar__logo img,
.footer__logo,
.footer__logo img {
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* ==========================
   Tablet (<=1024px)
========================== */
@media (max-width: 1080px) {
    /* Global Horizontal Padding */
    .navbar, .hero, .programs, .quote, .about, .expectations, .why, .quote-callout, .cta, .footer {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    /* Section Vertical Spacing */
    .programs, .quote, .about, .expectations, .why, .quote-callout, .cta {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .footer {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    /* Tablet Logo Scaling */
    .navbar__logo,
    .navbar__logo img,
    .footer__logo,
    .footer__logo img {
    height: 32px;

        max-width: 340px;
    }

    /* Grid & Layout Adjustments */
    .programs__grid, .why__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .about__container, .footer__top {
        flex-direction: column;
        align-items: center;
        gap: var(--space-8);
    }

    .about__content, .about__image {
        max-width: 100%;
    }

    .hero__title {
        font-size: 56px;
    }

    /* Reset Quote Absolute Positioning */
    .quote__container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-8);
    }

    .quote__image-wrapper {
        position: relative;
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .quote__image, .quote__content {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    .quote__image {
        border-radius: 32px;
    }
}

/* ==========================
   Mobile (<=768px)
========================== */
@media (max-width: 768px) {
    /* Global Horizontal Padding */
    .navbar, .hero, .programs, .quote, .about, .expectations, .why, .quote-callout, .cta, .footer {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    /* Section Vertical Spacing */
    .programs, .quote, .about, .expectations, .why, .quote-callout, .cta {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .navbar {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    /* .navbar__menu, .navbar__button {
        display: none;
    } */

    /* Mobile Logo Scaling */
    .navbar__logo,
    .navbar__logo img,
    .footer__logo,
    .footer__logo img {
    height: 32px;

        max-width: 340px;
    }

    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 40px;
        align-items: center;
    }

    .footer {
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .hero__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero__title {
        font-size: 40px;
        line-height: 1.2;
    }

    .hero__description {
        width: 100%;
        max-width: 400px;
        text-align: center;
    }

    .programs__grid, .why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .about__text, .expectations__description, .quote__text, .cta__description {
        text-align: center;
    }

    .why__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
    }

    .footer__navigation {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .footer__contact-list, .footer__logos {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .footer__divider {
        display: none;
    }
}

/* ==========================
   Small Mobile (<=480px)
========================== */
@media (max-width: 480px) {
    /* Global Horizontal Padding */
    .navbar, .hero, .programs, .quote, .about, .expectations, .why, .quote-callout, .cta, .footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* Section Vertical Spacing */
    .programs, .quote, .about, .expectations, .why, .quote-callout, .cta {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    /* Small Mobile Logo Scaling */
    .navbar__logo,
    .navbar__logo img,
    .footer__logo,
    .footer__logo img {
    height: 32px;

        max-width: 220px;
    }

    .hero {
        padding-top: 80px;
        padding-bottom: 48px;
    }

    .hero__title {
        font-size: 32px;
    }

    .quote__text {
        font-size: 18px;
        line-height: 1.4;
    }

    .hero__description, .program-card__description, .why-card__description, .footer__description, .footer__copyright {
        font-size: 14px;
    }

    .cta__title, .about__title, .expectations__title {
        font-size: 26px;
    }

    .why__heading-text, .why__heading-highlight {
        font-size: 22px;
        line-height: 1.2;
    }
}