/* ===================================================
   RESET
=================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:'Inter',sans-serif;

    background:#000;

    color:white;

}

/* ===================================================
   BACKGROUND VIDEO
=================================================== */

#bgVideo{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;

}

/* ===================================================
   DARK OVERLAY
=================================================== */

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:1;

    pointer-events:none;

}

/* ===================================================
   COLOR OVERLAY
=================================================== */

.colorOverlay{

    position:fixed;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(216,198,165,.20),

        rgba(216,198,165,.05)

    );

    z-index:2;

    transition:.8s;

    pointer-events:none;

}

/* ===================================================
   LOGO
=================================================== */

.logoLink{

    position:fixed;

    top:-80px;

    left:70px;

    z-index:20;

    text-decoration:none;

}

.logo{

    width:280px;

    display:block;

}

/* ===================================================
   MAIN PAGE
=================================================== */

.galleryPage{
    position:relative;

    z-index:10;

    width:100%;

    height:100vh;

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

    padding:0 7vw;

    gap:70px;

}

/* ===================================================
   LEFT PANEL
=================================================== */

.leftSide{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ===================================================
   SMALL TITLE
=================================================== */

.smallTitle{

    font-size:14px;

    letter-spacing:8px;

    color:rgba(255,255,255,.65);

    margin-bottom:18px;

}

/* ===================================================
   HEADING
=================================================== */

.leftSide h1{

    font-family:'Cormorant Garamond',serif;

    font-size:76px;

    font-weight:600;

    line-height:1;

    margin-bottom:30px;

}

/* ===================================================
   DESCRIPTION
=================================================== */

.description{

    width:430px;

    max-width:100%;

    line-height:1.8;

    color:rgba(255,255,255,.82);

    font-size:17px;

    margin-bottom:55px;

}

/* ===================================================
   RIGHT PANEL
=================================================== */

.rightSide{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

}

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

.imageContainer{

    position:relative;

    width:80%;

    max-width:540px;

    aspect-ratio:4/5;

    border-radius:34px;

    overflow:hidden;

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

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

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 30px 60px rgba(0,0,0,.35);

}

/* ===================================================
   IMAGES
=================================================== */

.galleryImage{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.08);

    transition:

        opacity .8s ease,

        transform 1.2s ease;

}

.galleryImage.active{

    opacity:1;

    transform:scale(1);

}
/* ===================================================
   SELECTOR
=================================================== */

.selector{

    position:relative;

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ===================================================
   OPTION
=================================================== */

.option{

    position:relative;

    width:100%;

    height:82px;

    border:none;

    outline:none;

    cursor:pointer;

    background:transparent;

    color:rgba(255,255,255,.45);

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    font-weight:600;

    text-align:left;

    padding-left:40px;

    border-radius:22px;

    transition:

        color .45s ease,

        transform .45s ease;

    z-index:2;

}

.option:hover{

    color:white;

}

/* ===================================================
   ACTIVE
=================================================== */

.option.active{

    color:white;

    transform:translateX(12px);

}

/* ===================================================
   SLIDING GLASS
=================================================== */

.indicator{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:82px;

    border-radius:22px;

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

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

    backdrop-filter:blur(20px);

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

    box-shadow:

        0 10px 30px rgba(0,0,0,.22);

    transition:

        transform .55s cubic-bezier(.22,.8,.2,1),

        background .5s ease;

}

/* ===================================================
   LEFT BORDER
=================================================== */

.option::before{

    content:"";

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    width:3px;

    height:34px;

    border-radius:20px;

    background:transparent;

    transition:.35s;

}

.option.active::before{

    background:#D8C6A5;

}

/* ===================================================
   HOVER EFFECT
=================================================== */

.option:hover::before{

    background:rgba(216,198,165,.55);

}

/* ===================================================
   SUBTLE GLOW
=================================================== */

.option.active{

    text-shadow:

        0 0 12px rgba(255,255,255,.25);

}

/* ===================================================
   DESKTOP
=================================================== */

@media(min-width:1200px){

.option{

    font-size:46px;

}

}

/* ===================================================
   TABLET
=================================================== */

@media(max-width:1000px){

.galleryPage{

    grid-template-columns:1fr;

    gap:45px;

    padding-top:120px;

    overflow:auto;

}

.leftSide{

    align-items:center;

    text-align:center;

}

.description{

    width:90%;

}

.option{

    text-align:center;

    padding-left:0;

    font-size:34px;

}

.option.active{

    transform:none;

}

.option::before{

    display:none;

}

}
/* ===================================================
   IMAGE ANIMATION
=================================================== */

.galleryImage{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.12);

    transition:

        opacity .9s ease,

        transform 1.3s cubic-bezier(.22,.8,.2,1);

}

.galleryImage.active{

    opacity:1;

    transform:scale(1);

}

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

.imageContainer{

    position:relative;

    overflow:hidden;

}

.imageContainer::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.42),

        transparent 35%

    );

    pointer-events:none;

}

/* ===================================================
   ACTIVE OPTION
=================================================== */

.option.active{

    color:white;

    letter-spacing:1px;

}

/* ===================================================
   ACTIVE GLASS GLOW
=================================================== */

.selector::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:30px;

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

    filter:blur(35px);

    z-index:-2;

}

/* ===================================================
   COLOR THEMES
=================================================== */

.colorOverlay{

    transition:

        background .8s ease,

        opacity .8s ease;

}

/* ===================================================
   FADE CONTENT
=================================================== */

.fadeOut{

    opacity:0 !important;

    transform:scale(1.08);

}

.fadeIn{

    opacity:1 !important;

    transform:scale(1);

}

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

@media(max-width:768px){

.galleryPage{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:120px 25px 60px;

    overflow-y:auto;

}

.logo{

    width:95px;

}

.leftSide{

    width:100%;

    text-align:center;

}

.leftSide h1{

    font-size:48px;

}

.description{

    width:100%;

    font-size:15px;

}

.selector{

    margin-top:15px;

}

.option{

    font-size:24px;

    height:65px;

    border-radius:18px;

}

.indicator{

    height:65px;

    border-radius:18px;

}

.rightSide{

    width:100%;

    margin-top:35px;

}

.imageContainer{

    width:90%;

    max-width:360px;

    aspect-ratio:4/5;

    border-radius:22px;

}

}
/* ==========================================
IMAGE SLIDER
========================================== */

.imageSlider{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}

/* ==========================================
IMAGES
========================================== */

.galleryImage{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transform:

        scale(1.08)

        translateX(80px);

    transition:

        opacity .9s ease,

        transform 1.2s cubic-bezier(.22,.8,.2,1);

    will-change:

        transform,

        opacity;

}

/* ACTIVE */

.galleryImage.active{

    opacity:1;

    transform:

        scale(1)

        translateX(0);

}

/* OLD IMAGE */

.galleryImage.exit{

    opacity:0;

    transform:

        scale(.96)

        translateX(-80px);

}