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

@media (max-width:1024px){

    .container{
        padding:0 24px;
    }

    .section{
        padding:70px 0;
    }

    .hero{
        padding:80px 20px;
    }

    .hero h1{
        font-size:42px;
    }

    .footer-grid{
        gap:30px;
    }

}

/* =====================================================
MOBILE DEVICES
===================================================== */

@media (max-width:768px){

    /* =========================
       LAYOUT
    ========================= */

    .container{
        padding:0 20px;
    }

    .section{
        padding:60px 0;
    }

    /* =========================
       HEADER
    ========================= */

    .header-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;

        flex-direction:row;

        min-height:72px;

        position:relative;

        gap:16px;
    }

    /* =========================
       BRANDING
    ========================= */

    .site-branding{
        flex:1;
        min-width:0;
    }

    .brand-link{
        display:flex;
        align-items:center;
        gap:12px;

        text-decoration:none;

        width:100%;
    }

    .brand-text{
        display:flex;
        flex-direction:column;

        min-width:0;
    }

    .brand-title{
        font-size:16px;
        line-height:1.2;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .brand-tagline{
        display:none;
    }

    .site-logo{
        width:44px;
        height:44px;

        flex-shrink:0;
    }

    /* =========================
       MOBILE TOGGLE
    ========================= */

    .nav-toggle{
        display:flex;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:5px;

        width:44px;
        height:44px;

        background:transparent;
        border:none;

        cursor:pointer;

        flex-shrink:0;
    }

    .nav-toggle span{
        width:24px;
        height:2px;

        background:#111827;

        border-radius:20px;

        transition:0.3s ease;
    }

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

    .site-nav{
        position:absolute;

        top:72px;
        left:0;

        width:100%;

        background:#ffffff;

        padding:20px;

        border-top:1px solid #e5e7eb;

        box-shadow:
            0 10px 25px rgba(0,0,0,0.08);

        opacity:0;
        visibility:hidden;

        transform:translateY(-10px);

        transition:all 0.3s ease;

        z-index:999;
    }

    .site-nav.active{
        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }

    /* =========================
       MENU ITEMS
    ========================= */

    .nav-menu{
        display:flex;

        flex-direction:column;
        align-items:flex-start;

        gap:16px;

        width:100%;

        margin:0;
        padding:0;

        list-style:none;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu a{
        display:block;

        width:100%;

        padding:10px 0;

        text-decoration:none;

        color:#111827;

        font-weight:600;
    }

    /* =========================
       HERO
    ========================= */

    .hero{
        padding:70px 20px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.2;
    }

    .hero p{
        font-size:16px;
    }

    .hero-actions{
        flex-direction:column;
        width:100%;
    }

    .hero-actions .btn{
        width:100%;
    }

    .hero-title{
        font-size:34px;
    }
    
    .hero-text{
        font-size:16px;
    }
    
    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }
    
    .hero-actions .btn{
        width:100%;
    }
    /* =========================
       FOOTER
    ========================= */

    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .footer-bottom{
        text-align:center;
    }

}

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

@media (max-width:480px){

    .container{
        padding:0 16px;
    }

    .hero{
        padding:60px 16px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:15px;
    }

    .brand-title{
        font-size:15px;
    }

    .site-logo{
        width:40px;
        height:40px;
    }

    .footer-title,
    .footer-heading{
        font-size:18px;
    }

}