/* ==========================
   GLOBAL FIX
========================== */

html,
body {
    width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* ==========================
   TABLET (1024px)
========================== */

@media (max-width:1024px){

    nav{
        padding:15px 20px;
    }

    nav ul{
        gap:20px;
    }

    .logo-container h2{
        font-size:18px;
    }

    .overlay h1{
        font-size:40px;
    }

    .overlay p{
        font-size:18px;
    }
.menu-toggle{
    display:none;
}
}

/* ==========================
   MOBILE (768px)
========================== */

@media (max-width:768px){

    /* Navbar */

    nav{
        position:relative;
        padding:12px 15px;
    }

    .logo{
        width:45px;
        height:45px;
    }

    .logo-container h2{
        font-size:15px;
        white-space:normal;
    }

    .menu-toggle{
        display:block;
        font-size:30px;
        color:#fff;
        cursor:pointer;
    }

    nav ul{
        display:none;
        position:absolute;
        top:100%;
        right:0;
        width:220px;
        background:#0f172a;
        flex-direction:column;
        padding:10px 0;
        z-index:999;
    }

    nav ul.show{
        display:flex;
    }

    nav ul li{
        width:100%;
        margin:0;
    }

    nav ul li a{
        display:block;
        padding:12px 20px;
    }

    /* Hero */

    .hero{
        height:100vh;
    }

    .overlay h1{
        font-size:28px;
        line-height:1.3;
    }

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

    .explore-btn{
        font-size:16px;
        padding:12px 22px;
    }

    /* About */

    .about{
        padding:50px 20px;
    }

    .about h2{
        font-size:28px;
    }

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

    /* Hide sidebar */

    .social-sidebar{
        display:none;
    }

}

/* ==========================
   SMALL PHONES (480px)
========================== */

@media (max-width:480px){

    .overlay h1{
        font-size:24px;
    }

    .overlay p{
        font-size:14px;
    }

    .logo-container h2{
        font-size:13px;
    }

}