:root{
    --bg:#f4f3ef;
    --black:#111;
    --white:#fff;
    --grey:#777;
    --line:rgba(0,0,0,.15);
}


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


html{
    scroll-behavior:smooth;
}


body{
    font-family:"Manrope",Arial,sans-serif;
    background:var(--bg);
    color:var(--black);
    overflow-x:hidden;
}


h1,h2{
    font-family:"Playfair Display",serif;
    font-weight:400;
}


p{
    line-height:1.8;
    color:#555;
    font-size:18px;
}



a{
    color:inherit;
    text-decoration:none;
}





/* HEADER */


.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    padding:35px 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:1000;

    transition:.4s;

}



.header.scrolled{

    background:rgba(244,243,239,.9);
    backdrop-filter:blur(15px);

    padding-top:20px;
    padding-bottom:20px;

}



.logo{

    font-size:14px;
    font-weight:700;
    letter-spacing:4px;

    line-height:1.4;

}



.navigation{

    display:flex;
    gap:45px;

}


.navigation a{

    font-size:14px;
    position:relative;

}



.navigation a:after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:1px;

    background:#111;

    transition:.3s;

}


.navigation a:hover:after{

    width:100%;

}



.menu-button{

    display:none;

}







/* HERO */


.hero{

    height:100vh;
    position:relative;

    display:flex;
    align-items:center;

    color:white;

}



.hero-image{

    position:absolute;
    inset:0;

    background-image:url(
    "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2200&q=80"
    );

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

}



.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.65)
    );

}



.hero-content{

    position:relative;

    padding:0 7%;

    max-width:1100px;

}



.small-title{

    color:white;

    letter-spacing:4px;
    font-size:13px;

    margin-bottom:35px;

}



.hero h1{

    font-size:clamp(55px,8vw,120px);

    line-height:.95;

    margin-bottom:50px;

    color:white;

}




.btn{

    display:inline-block;

    padding:18px 45px;

    border:1px solid white;

    color:white;

    transition:.3s;

}



.btn:hover{

    background:white;
    color:#111;

}









/* GENERAL SECTIONS */


.section{

    padding:140px 7%;

}



.section-number{

    font-size:13px;

    color:#888;

    letter-spacing:3px;

    margin-bottom:50px;

}



.section h2{

    font-size:65px;

    margin-bottom:70px;

}






.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}



.two-column p{

    margin-bottom:30px;

}








/* IMAGE BANNER */


.image-banner{

    height:70vh;

    background-image:url(
    "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=80"
    );

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    padding:7%;

}



.image-text h2{

    color:white;

    font-size:70px;

    max-width:700px;

}








/* DARK AREA */


.dark{

    background:#111;

    color:white;

}



.dark p{

    color:#aaa;

}



.dark h2{

    color:white;

}







/* CARDS */


.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.card{

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

    padding:45px;

    min-height:280px;

    transition:.4s;

}



.card:hover{

    transform:translateY(-10px);

    border-color:white;

}



.card h3{

    font-size:28px;

    margin-bottom:25px;

    font-weight:400;

}







/* FOCUS LIST */


.focus-list div{

    padding:35px 0;

    border-bottom:1px solid var(--line);

    font-family:"Playfair Display",serif;

    font-size:45px;

    transition:.3s;

}



.focus-list div:hover{

    padding-left:30px;

}









/* NUMBERS */


.numbers{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    padding:100px 7%;

    text-align:center;

}



.numbers strong{

    display:block;

    font-family:"Playfair Display",serif;

    font-size:55px;

    margin-bottom:20px;

}



.numbers span{

    color:#aaa;

}







/* CONTACT */


.contact{

    padding:150px 7%;

}



.contact h2{

    font-size:80px;

    margin-bottom:40px;

}



.contact p{

    max-width:650px;

}



.contact a{

    display:inline-block;

    margin-top:50px;

    font-size:35px;

    border-bottom:1px solid;

}







/* FOOTER */


footer{

    padding:40px 7%;

    border-top:1px solid var(--line);

    display:flex;

    justify-content:space-between;

    font-size:14px;

}







/* MOBILE */


@media(max-width:900px){


.navigation{

    display:none;

}



.menu-button{

    display:block;

    background:none;
    border:0;

}



.two-column,
.cards,
.numbers{

    grid-template-columns:1fr;

}



.hero h1{

    font-size:55px;

}



.section h2{

    font-size:45px;

}



.image-text h2{

    font-size:45px;

}



.focus-list div{

    font-size:32px;

}



.contact h2{

    font-size:55px;

}



.contact a{

    font-size:22px;

}



footer{

    flex-direction:column;

    gap:20px;

}


}

/* Scroll animations */


.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



.show{

    opacity:1;

    transform:translateY(0);

}




/* Mobile Navigation */


@media(max-width:900px){


.navigation.open{

    display:flex;

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    padding:40px 7%;

    background:#f4f3ef;

    flex-direction:column;

    gap:25px;

}



}