*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#171717;
    color:white;

    font-family:"Segoe UI", sans-serif;

}



/* ================= CONTAINER ================= */


.container{

    width:min(1200px, 90%);

    margin:40px auto;

}



/* ================= HEADER ================= */


header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}



/* LEFT MENU */


.left-menu{

    display:flex;

    gap:30px;

}


.left-menu a{

    color:white;

    text-decoration:none;

    opacity:.7;

    transition:.25s;

}


.left-menu a:hover{

    opacity:1;

}



/* LOGO */


.logo-block{

    display:flex;

    align-items:center;

    gap:22px;

}


.logo-block img{

    width:72px;

    height:72px;

    object-fit:contain;

}



.name h1,
.name h2{

    font-size:52px;

    font-weight:300;

    line-height:48px;

}



/* LANGUAGE */


.right-menu{

    display:flex;

    gap:8px;

}



.right-menu button{

    background:#2b2b2b;

    color:white;

    border:none;

    border-radius:12px;

    padding:10px 18px;

    cursor:pointer;

    transition:.25s;

}


.right-menu button:hover{

    background:#3b3b3b;

}



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


.hero{

    margin-top:20px;

}



.glass{

    height:340px;

    padding:45px;

    border-radius:30px;


    background:rgba(255,255,255,.08);


    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);


    border:1px solid rgba(255,255,255,.12);


    box-shadow:

    0 15px 60px rgba(0,0,0,.45);

}



#content{

    transition:.25s;

}



.glass h3{

    font-size:42px;

    font-weight:400;

    margin-bottom:25px;

}



.glass p{

    width:650px;

    max-width:100%;

    color:#d8d8d8;

    font-size:20px;

    line-height:1.8;

}



/* ================= TABS ================= */


.tabs{

    margin-top:25px;

    position:relative;


    display:flex;


    height:72px;


    background:#2b2b2b;


    border-radius:20px;


    overflow:hidden;

}



.tabs button{

    flex:1;


    background:none;

    border:none;


    color:white;


    font-size:22px;


    cursor:pointer;


    z-index:2;


    transition:.3s;

}



.tabs button:hover{

    color:white;

}



/* MOVING GLASS */


.slider{

    position:absolute;


    top:6px;


    left:calc(33.333% + 6px);


    width:calc(33.333% - 12px);


    height:60px;


    border-radius:16px;


    background:rgba(255,255,255,.14);


    backdrop-filter:blur(18px);


    transition:.35s ease;

}



/* ================= PHOTO GALLERY ================= */



#gallery{

    margin-top:70px;


    display:flex;

    flex-direction:column;


    align-items:center;


    gap:50px;

}




.photo-card{

    width:800px;

    max-width:90%;

}




.gallery-image{

    width:100%;


    height:auto;


    display:block;


    cursor:pointer;


    transition:.3s ease;

}




.gallery-image:hover{

    transform:scale(1.01);

}