/* ==========================================
   RESPONSIVE.CSS
   Cloudberry Preschool
========================================== */


/* ==========================================
   LARGE TABLETS
========================================== */

@media (max-width: 900px) {

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ==========================================
   TABLETS & MOBILE
========================================== */

@media (max-width:768px){

/* -----------------------------
    Navigation
------------------------------ */

    .hamburger{
        display:flex;
    }

    .nav-cta{
        display:none;
    }

    .logo-text{
        font-size:1.05rem;
    }

    .logo-sub{
        font-size:.55rem;
        letter-spacing:1px;
    }

    .nav-links{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        margin-left:0;

        display:flex;
        flex-direction:column;

        justify-content:center;
        align-items:center;

        gap:30px;

        padding:35px 0;

        background:rgba(255,255,255,.97);
        backdrop-filter:blur(18px);

        border-bottom-left-radius:24px;
        border-bottom-right-radius:24px;

        box-shadow:0 15px 35px rgba(0,0,0,.08);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:translateY(-15px);

        transition:
            transform .35s ease,
            opacity .35s ease,
            visibility .35s;

    }

    .nav-links.open{

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:translateY(0);

    }

    .nav-links li{

        opacity:0;
        transform:translateY(-10px);

        transition:.35s ease;

    }

    .nav-links.open li{

        opacity:1;
        transform:translateY(0);

    }

    .nav-links li:nth-child(1){transition-delay:.05s;}
    .nav-links li:nth-child(2){transition-delay:.10s;}
    .nav-links li:nth-child(3){transition-delay:.15s;}
    .nav-links li:nth-child(4){transition-delay:.20s;}
    .nav-links li:nth-child(5){transition-delay:.25s;}

    .nav-links a{

        font-size:1.08rem;
        font-weight:700;

    }


    /* -----------------------------
       Hero
    ------------------------------ */

    .hero-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-content{
        order:1;
        text-align:center;
    }

    .hero-visual{
        order:2;
        margin:0 auto;
    }


    /* -----------------------------
       Sections
    ------------------------------ */

    .daycare-inner,
    .contact-inner,
    .footer-top,
    .form-row{
        grid-template-columns:1fr;
    }

    .footer-top{
        gap:28px;
    }


    /* -----------------------------
       Stats
    ------------------------------ */

    .stats-inner{
        gap:0;
    }

    .stat{
        padding:12px 14px;
    }

}


/* ==========================================
   PHONES
========================================== */

@media (max-width:500px){

    .why-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:60px 20px;
    }

    .hero h1{
        font-size:2.2rem;
        line-height:1.15;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-btns{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        max-width:320px;

        justify-content:center;

    }

    .hero-card{

        min-height:145px;

    }

    .contact-form{

        padding:28px 20px;

    }

    .float-cta{

        width:54px;
        height:54px;

    }

}