/* =========================================
   NOURI | Head Spa by Olea
   MASTER STYLESHEET

   This stylesheet controls the entire
   website.

   Sections will be added underneath as
   we build the website.

========================================= */



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

   Removes browser defaults.

========================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:#F6F3EE;

    overflow-x:hidden;

}


img{

    display:block;

    max-width:100%;

}


a{

    text-decoration:none;

    color:inherit;

}



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

========================================= */

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 100svh;

    background-image: url("../images/hero-background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}



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

========================================= */

.hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:linear-gradient(

        to bottom,

        rgba(246,243,238,0),

        #F6F3EE

    );

    z-index:1;

}



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

========================================= */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(30,22,14,.05),

        rgba(20,15,10,.14)

    );

}



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

========================================= */

.hero-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    animation:fadeIn 2.2s ease;

}



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

========================================= */

.logo{

    width:450px;

    max-width:88%;

    margin-top:90px;

    margin-bottom:95px;

}



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

========================================= */

.hero h1{

    color:white;

    font-size:34px;

    font-weight:300;

    letter-spacing:1px;

    margin-top:0;

    margin-bottom:170px;

}



/* =========================================
   ANIMATIONS

========================================= */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

   Primary call-to-action on the Hero.

========================================= */

.button{

    display:inline-block;

    margin-top:0;

    padding:16px 42px;

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

    color:#F6F3EE;

    font-size:15px;

    font-weight:300;

    letter-spacing:2.5px;

    text-transform:uppercase;

    text-decoration:none;

    transition:
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease;

}

.button:hover{

    background:#F6F3EE;

    border-color:#F6F3EE;

    color:#6C5846;

}

@media (max-width: 700px) {
    .hero {
        height: 100vh;
        height: 100svh;
        min-height: 100svh;

        background-size: cover;
        background-position: center center;
    }
}