@media screen and (max-width: 768px) {

    html,body {
        overflow-x: hidden;
    }


    /*--------------- Header ----------------- */

    header {
        height: 7vh !important;
        width: 85vw;
        position: fixed;
        top: 3%;
        left: 50%;
        transform: translate(-50%, 0%);
        padding: 18px 27px;
        border-radius: 3.40282e+38px;
        border: 1px solid #1c1c1c;
        background: #0b0b0bb3;
        backdrop-filter: blur(24px);
        z-index: 2000;
    }

    .logo-container {
        width: 50%;
    }

    .logo-container img {
        width: 75%;
        z-index: 1000;
    }

    nav {
        display: none;
    }

    .nav-container {
        display: none;
    }

    .cta-container {
        display: none;

    }

    /*-------------------- mobile nav */
    .burger {
        display: flex;
        /* show burger only on mobile */
    }

    .mobile-nav {
        display: flex;
        /* slide-in menu */
    }




    /*--------------- Works Section ----------------- */

.works-section {
    min-height: 50vh;
    width: 100vw;
}
.works-section::after {
    height: 51vh;
}
.works-section video{
    height: 50vh;
    width: 100vw;
}
.works-text {
    bottom: 62%;
}
.works-text :nth-child(1){
    font-size: 36px;
    font-family: var(--Acari-Sans);
}
.works-text :nth-child(2){
    margin-top: 0px;
    font-size: 36px;
    font-family: var(--Acari-Sans);
}

/* ---------------- Portfolio Section -----------------  */


.Portfolio-Section {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 0px;
}

.vertical-column{
    height: 60vh;
    width: 100%;
    gap: 5vh;

}
.vertical-column-right {
    margin-top: 0px;
}

.Work-categories p {
    font-size: 12px;
    
}

.Portfolio-Card-Text h3{
    font-size: 24px;
}

.Portfolio-Card-Text p{
    font-size: 15px;
}


/* end of @media */
}