/*==================================================
                    VARIABLES
==================================================*/

:root{

    --primary:#C6A15B;
    --primary-hover:#D6B372;

    --dark:#06090F;
    --dark-light:#101722;

    --white:#FFFFFF;
    --gray:#CFCFCF;
    --gray-light:#F5F5F5;

    --shadow-lg:0 30px 70px rgba(0,0,0,.35);

    --transition:.4s ease;

    --container:1280px;

}


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

*{

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

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--dark);

    color:var(--white);

    overflow-x:hidden;

    min-height:100svh;

}


img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}


section{

    position:relative;

}


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

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}


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

.hero__background,
.hero__watermark,
.hero__glow{

    will-change:transform;

}

/*==================================================
                BUTTON
==================================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:200px;

    height:60px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

}


/*==================================================
            PRIMARY BUTTON
==================================================*/

.btn--gold{

    background:var(--primary);

    color:#fff;

    box-shadow:
        0 15px 35px rgba(198,161,91,.25);

}

.btn--gold:hover{

    transform:translateY(-4px);

    background:var(--primary-hover);

    box-shadow:
        0 20px 45px rgba(198,161,91,.40);

}


/*==================================================
            SECONDARY BUTTON
==================================================*/

.btn--outline{

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

    color:#fff;

    backdrop-filter:blur(10px);

}

.btn--outline:hover{

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

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-4px);

}


/*==================================================
            FADE UP
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
            SCROLL
==================================================*/

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:
        translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
        translate(-50%,18px);

    }

}