body{
    font-family: Nexa, sans-serif;
    color:#111;
    background:#111;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.logo{
    width: 15%;
    margin: 2rem auto;
    align-items: center;
    z-index: 999;
    pointer-events: none;
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    box-shadow: none !important;
}

.gallery-container{
    overflow: hidden;
    height: 93vh;
    position: relative;
    margin-top: 60px;
}

.gallery{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .gallery {
        width: 100%;
    }
}

.col {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    align-self: flex-start;
    justify-self: flex-start;
}

.col:nth-child(2) {
    align-self: flex-end;
    justify-self: flex-end;
}

.image {
    width: 100%;
    filter: saturate(0);
    padding: 3px;
    
}

img {
    transition: 0.3 ease-out;
    overflow: hidden;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    width: 100%;
}

.image:hover {
    filter: saturate(1);
}

/* Navbar */

li{
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

a:hover{
    color: orange;
}

header {
    position: relative;
    z-index: 9999;
}

.navbar {
    width: 100%;
    color: #fff;
    background: black;
    /* gap: 2rem; */
    height: 95px;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.navbar .text_logo img {
    width: 80px;
}

.navbar .text_logo a {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .links {
    display: flex;
    gap: 2rem;
    cursor: pointer;
}

.navbar > .toggle_btn {
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    position: absolute;
    right: 1rem;
}

.dropdown_menu {
    display: none;
    position: absolute;
    right: 1rem;
    top: 1rem;
    height: 0;
    width: 300px;
    background: rgb(255,255,255,0.1);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open {
    height: 115px;
}

.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}

@media (max-width: 992px) {
    .navbar .links{
        display: none;
    }

    .navbar .toggle_btn {
        display: block;
    }

    .dropdown_menu {
        display: block;
    }
}

@media (max-width: 576px) {
    .dropdown_menu {
        left: 2rem;
        width: unset;
    }
}