/* ===========================
   Mobile & Tablet
=========================== */

@media (max-width:900px){

    body{
        overflow:auto;
    }

    .site-container{
        grid-template-rows:88px auto 220px;
        min-height:100vh;
        height:auto;
    }

    .hero-section{
        padding:1rem 0;
    }

    .hero-layout{
        width:94%;
        margin:auto;
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .hero-content{
        justify-content:center;
        text-align:center;
    }

    .hero-content h1{
        font-size:clamp(2.5rem,10vw,3.8rem);
    }

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

    #carousel-container{
        max-width:100%;
        height:300px;
    }

    /* ===================
       Mobile Header
    =================== */

    .hamburger{
        display:block;
        cursor:pointer;
    }

    .main-navigation{

        display:none;

        position:absolute;

        top:88px;
        left:0;
        right:0;

        background:#ffffff;

        padding:20px;

        border-radius:0 0 20px 20px;

        box-shadow:0 15px 30px rgba(0,0,0,.18);

        z-index:1000;

    }

    .main-navigation.open{

        display:block;

    }

    .main-navigation ul{

        display:flex;
        flex-direction:column;

        gap:18px;

        list-style:none;

    }

    .main-navigation a{

        color:#2E0249;
        text-decoration:none;
        font-weight:600;
        font-size:1.1rem;

    }

    /* ===================
       Footer
    =================== */

    .footer-content{

        position:relative;

        left:auto;
        bottom:auto;

        transform:none;

        padding-top:40px;

    }

    .footer-nav{

        gap:18px;
        flex-wrap:wrap;
        justify-content:center;

    }

}

/* ===========================
   Small Phones
=========================== */

@media (max-width:480px){

    #carousel-container{

        height:240px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .site-logo{

        font-size:1.7rem;

    }

    .sc-btn{

        width:38px;
        height:38px;

    }

}