/* =========================================
   RESPONSIVE
========================================= */


.desktop-only {
    display:flex;
}



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


@media(max-width:768px){


    .desktop-only {
        display:none !important;
    }



    /* ===============================
       MOBILE NAVBAR
    =============================== */


    .navbar-wrapper {

        position:fixed;

        top:1rem;

        left:50%;

        transform:translateX(-50%);

        width:90%;

        margin:0;

        z-index:1000;

    }



    /* disable desktop shrink animation */

    .navbar-wrapper.scrolled {

        width:90%;

    }


    .navbar-wrapper.scrolled .navbar {

        height:auto;

        padding:0.75rem 1.25rem;

        border-radius:1rem;

    }


    .navbar-wrapper.scrolled .nav-left,
    .navbar-wrapper.scrolled .nav-right {

        display:none;

    }


    .navbar-wrapper.scrolled:hover {

        width:90%;

    }




    /* ===============================
       NAVBAR
    =============================== */


    .navbar {

        width:100%;

        min-height:0;

        padding:0.75rem 1.25rem;

        border-radius:1rem;

        justify-content:space-between;

    }



    /* LOGO */

    .navbar-wrapper .logo {

        position:absolute;

        left:50%;

        top:50%;

        transform:translate(-50%,-50%);

    }



    .navbar-wrapper .logo img {

        width:5rem;

        height:5rem;

    }




    /* HAMBURGER */


    .hamburger {

        display:flex;

        margin-left:auto;

    }





    /* ===============================
       MOBILE MENU
    =============================== */


    .mobile-menu {

        top:8rem;

    }





    /* ===============================
       PAGE CONTENT
    =============================== */


    .content {

        margin: 6.25rem auto;

        overflow:hidden;

    }




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


    .hero-area {

        min-height:55vh;

        height:auto;

        display:flex;

        align-items:center;

        justify-content:center;

        padding-top:3rem;

    }



    .hero {

        position:relative;

        width:100%;

        height:auto;

        padding:0;

    }




    .logo-word {

        justify-content:center;

        flex-wrap:wrap;

        text-align:center;

    }



    /* ===============================
       WELCOME
    =============================== */


    .welcome-animation {

        width:90vw;

        
    }



    .welcome-track {

        font-size:clamp(1.3rem,6vw,2rem);

        gap:2rem;

        animation-duration:20s;

    }



}