/*==================================================
                UZAYO BASE.CSS
      Luxury Ecommerce Design System
==================================================*/



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

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

*::before,
*::after{
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    padding-top:90px;

    background:var(--white);

    color:var(--black);

    font-family:var(--body-font);

    overflow-x:hidden;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

/*======================
    SCROLLBAR
=======================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:#222;

}

::-webkit-scrollbar-thumb:hover{

    background:#000;

}

/*======================
        LINKS
=======================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--gold);

}

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

img{

    display:block;

    width:100%;

    height:auto;

}

/*======================
      CONTAINERS
=======================*/

.container{

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

    margin:auto;

}

.section{

    padding:110px 0;

}

/*======================
      TYPOGRAPHY
=======================*/

h1,h2,h3,h4,h5{

    font-family:var(--heading-font);

    font-weight:600;

    line-height:1.1;

}

h1{

    font-size:4.8rem;

}

h2{

    font-size:3.2rem;

}

h3{

    font-size:2.2rem;

}

p{

    color:#555;

    font-size:1rem;

    line-height:1.8;

}

/*======================
        BUTTONS
=======================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:16px 42px;

    cursor:pointer;

    border:none;

    transition:var(--transition);

    font-weight:600;

    letter-spacing:.6px;

    border-radius:999px;

}

.btn-dark{

    background:var(--black);

    color:white;

}

.btn-dark:hover{

    background:#242424;

    transform:translateY(-3px);

}

.btn-light{

    background:white;

    border:1px solid #ddd;

}

.btn-light:hover{

    background:#f7f7f7;

}

/*======================
        UTILITIES
=======================*/

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:70px;

}

.hidden{

    display:none;

}

.fade{

    animation:fade .8s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}