/* ===================================================
   LARGE LAPTOPS
   1200px and below
=================================================== */

@media (max-width: 1200px) {

    .hero-grid,
    .section-grid,
    .story-grid {

        gap: 3rem;

    }

    .footer-grid {

        grid-template-columns: repeat(2,1fr);

    }

}

/* ===================================================
   TABLETS
   1024px and below
=================================================== */

@media (max-width: 1024px) {

    section {

        padding: 80px 0;

    }

    .hero-grid,
    .section-grid,
    .story-grid,
    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .hero {

        text-align: center;

    }

    .hero-content {

        order: 2;

    }

    .hero-visual {

        order: 1;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-stats {

        justify-content: center;

    }

    .trust-grid {

        grid-template-columns: repeat(3,1fr);

    }

    .why-grid,
    .cbc-grid,
    .journey-grid,
    .activities-grid,
    .csl-grid,
    .life-grid,
    .clubs-grid,
    .programs-grid,
    .approach-grid,
    .process-grid {

        grid-template-columns: repeat(2,1fr);

    }

    .gallery-grid {

        grid-template-columns: repeat(2,1fr);

    }

    .values-grid {

        grid-template-columns: repeat(2,1fr);

    }

    .stats-grid {

        grid-template-columns: repeat(2,1fr);

        row-gap: 3rem;

    }

    .timeline::before {

        left: 20px;

    }

    .timeline-item {

        width: 100%;

        left: 0 !important;

        padding-left: 70px;

    }

    .timeline-dot {

        left: 8px !important;

        right: auto !important;

    }

}

/* ===================================================
   MOBILE NAVIGATION
=================================================== */

@media (max-width: 900px) {

    .nav-menu {

        display: none;

    }

    .hamburger {

        display: flex;

    }

    .nav-actions .btn {

        display: none;

    }

}

/* ===================================================
   LARGE MOBILE
   768px and below
=================================================== */

@media (max-width: 768px) {

    :root {

        --space-6: 3rem;
        --space-7: 4rem;
        --space-8: 5rem;

    }

    section {

        padding: 70px 0;

    }

    h1 {

        font-size: 2.7rem;

    }

    h2 {

        font-size: 2rem;

    }

    .page-hero {

        min-height: 50vh;

    }

    .hero {

        padding-top: 140px;

    }

    .hero-content p {

        font-size: 1rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .floating-card {

        display: none;

    }

    .trust-grid {

        grid-template-columns: repeat(2,1fr);

        gap: 1rem;

    }

    .why-grid,
    .cbc-grid,
    .journey-grid,
    .activities-grid,
    .csl-grid,
    .life-grid,
    .clubs-grid,
    .programs-grid,
    .approach-grid,
    .process-grid,
    .gallery-grid,
    .values-grid,
    .vm-grid {

        grid-template-columns: 1fr;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-logo {

        justify-content: center;

    }

    .footer-socials {

        justify-content: center;

    }

    .footer-bottom-content {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

    .cta-content {

        padding: 3rem 2rem;

    }

    .page-cta {

        padding: 3rem 2rem;

    }

    .contact-info,
    .contact-form {

        padding: 2rem;

    }

    .gallery-masonry {

        columns: 2;

    }

}

/* ===================================================
   SMALL MOBILE
   576px and below
=================================================== */

@media (max-width: 576px) {

    .container {

        width: 92%;

    }

    h1 {

        font-size: 2.3rem;

    }

    h2 {

        font-size: 1.8rem;

    }

    h3 {

        font-size: 1.3rem;

    }

    p {

        font-size: .95rem;

    }

    .navbar {

        height: 80px;

    }

    .logo img {

        width: 50px;

    }

    .logo-text h3 {

        font-size: 1rem;

    }

    .logo-text span {

        display: none;

    }

    .hero {

        padding-top: 120px;

    }

    .hero-stats {

        flex-direction: column;

        align-items: center;

    }

    .stat-card {

        width: 100%;

        max-width: 280px;

    }

    .gallery-masonry {

        columns: 1;

    }

    .gallery-item img {

        height: 250px;

    }

    .activity-card img,
    .life-card img,
    .program-card img {

        height: 220px;

    }

    .stats-item h2 {

        font-size: 3rem;

    }

    .mobile-menu {

        width: 100%;

    }

    .whatsapp-float {

        width: 60px;

        height: 60px;

        right: 15px;

        bottom: 15px;

    }

}

/* ===================================================
   EXTRA SMALL DEVICES
   400px and below
=================================================== */

@media (max-width: 400px) {

    h1 {

        font-size: 2rem;

    }

    h2 {

        font-size: 1.6rem;

    }

    .btn {

        width: 100%;

    }

    .hero-buttons,
    .cta-buttons {

        width: 100%;

    }

    .section-tag {

        font-size: .8rem;

    }

    .cta-content,
    .page-cta {

        padding: 2rem 1.5rem;

    }

}

/* ===================================================
   ULTRA WIDE SCREENS
=================================================== */

@media (min-width: 1600px) {

    :root {

        --container-width: 1400px;

    }

}