@font-face {
  font-family: shabnam;
  src: url(/static/core/fonts/Shabnam.ttf) format('truetype');
}
@font-face {
  font-family: shabnam-bold;
  src: url(/static/core/fonts/Shabnam-Bold.ttf) format('truetype');
}
@font-face {
  font-family: shabnam-light;
  src: url(/static/core/fonts/Shabnam-Light.ttf) format('truetype');
}

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

body {
  margin: 0;
  font-family: shabnam, sans-serif;
  background-color: #FDFCFB;
  color: #1F2937;
  line-height: 1.7;
}



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

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

html{

    scroll-behavior:smooth;

}

body{

    background:#F6F3EC;

    color:#1B1B1B;

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

    line-height:1.8;

    font-size:17px;

    -webkit-font-smoothing:antialiased;

}

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

h1,h2,h3,h4{

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    letter-spacing:.4px;

}

h1{

    font-size:5rem;

}

h2{

    font-size:3rem;

}

h3{

    font-size:2rem;

}

p{

    color:#555;

    max-width:700px;

}

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================
   LAYOUT
========================== */

.container{

    width:min(1100px,90%);

    margin:auto;

}

section{
    padding:50px 0;
}

/* ==========================
   NAVIGATION
========================== */

header{

    position:sticky;

    top:0;

    backdrop-filter:blur(10px);

    background:rgba(246,243,236,.92);

    border-bottom:1px solid #e6dfd2;

    z-index:999;

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    font-size:.8rem;

    letter-spacing:3px;

    font-weight:600;

}

nav{

    display:flex;

    gap:42px;

}

nav a{

    color:#444;

    transition:.25s;

}

nav a:hover{

    color:#000;

}

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

.button{

    display:inline-block;

    padding:14px 32px;

    border:1px solid #1B1B1B;

    transition:.3s;

    margin-top:30px;

}

.button:hover{

    background:#1B1B1B;

    color:white;

}

/* ==========================
   CARDS
========================== */

.card{

    background:white;

    padding:40px;

    border-radius:12px;

    border:1px solid #ece6dc;

    transition:.25s;

}

.card:hover{

    transform:translateY(-4px);

}

/* ==========================
   FOOTER
========================== */

footer{

    padding:70px 0;

    border-top:1px solid #e8e1d5;

}

.footer{

    display:flex;

    justify-content:center;

}

.footer p{

    font-size:.9rem;

    color:#777;

    letter-spacing:1px;

}

/* ==========================
   SELECTION
========================== */

::selection{
    background:#1B1B1B;
    color:white;
}







/* -------------- home page */

.hero-title{
    width: min-content;
}






/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.2rem;

    }

    nav{

        gap:18px;

    }

    .nav-container{

        height:70px;

    }

}