* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
     
        }
:root{
--text-dark:#000;
--text-light: #7aa7a6;
--body-background:#ffff;
--body-foreground:#008080;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--dark-border:rgba(0,0,0,0.2);
   --soft-red: #c22a13;  
      --hover:#266b6a;
      --logo-font:"Cormorant Garamond", serif;
      --body-font: "Work Sans", sans-serif; 
      --heading-font: 'Playfair Display', serif;

}
h1,h2,h3,h4,h5,h6{
   font-family: var(--heading-font);
}
p,span,button,a,textarea,select,option,label{
   font-family: var(--body-font);
}
/* header starts here */
header{
   width: 100%;
   height: 80px;
   position: fixed;
   top: 0;
   background-color:var(--body-background);
   z-index: 5;
  
}
header nav.large-screen-nav{
   height: 80px;
   display: flex;
   height: inherit;
box-shadow: var(--shadow);
   justify-content: space-between;
}
header nav.large-screen-nav .list{
   width: 100%;
   justify-items: center;

}
header nav.large-screen-nav .list ul{
   display: flex;
   width: 80%;
   justify-content: space-evenly;
   height: 100%;
align-items: center;
flex-wrap: wrap;
padding-right: 2rem;

}
header nav ul li {

margin-right: 1rem;
  font-weight: 500;
   list-style: none;
}
header nav ul li a{
   text-decoration: none;
   color: var(--text-dark);
}
header nav ul li a.active{
    color: var(--body-foreground);
}

header nav ul li a:hover{
   color: var(--body-foreground);
   transition-duration: 0.5s;
}
header nav.large-screen-nav .logo{
  width: 40%;
display: flex;
   height: 100%;
align-items: center;
justify-content: center;


}
.fa-feather-pointed{
color: var(--body-foreground);
}
header nav.large-screen-nav .logo h1{
   font-family: var(--logo-font);
font-size: 2rem;

}
 header nav.small-screen-nav{
   display: none;
 }
 nav.large-screen-nav.auth-header .list{

   justify-items: end;

}
 nav.large-screen-nav.auth-header .list ul{
  
   width: 50%;
   justify-content:center;


gap: 20px;

}
 nav.large-screen-nav.auth-header .list ul li{
font-size: 1.1rem;

 }

@media (max-width:700px) {
   header nav.large-screen-nav{
      display: none;
   }
   header nav.small-screen-nav{
box-shadow:  var(--shadow);
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   position: relative;
height: 80px;
}
header nav.small-screen-nav .font{
  
   width: 80%;
   text-align: center;
}
header nav.small-screen-nav .font h1{ 
   font-family: var(--logo-font);
font-size: 2rem;


}
header nav.small-screen-nav .menu-bar{
   font-size: 1.2rem;
}
header nav.small-screen-nav .menu{
   z-index: 1000;
top: 0vh;
   position: absolute;
   display: flex;
right: 100%;
transition-duration: 0.5s;
background-color: var(--body-background);
height:100vh;
width: 100vw;
justify-content: center;

}
header nav.small-screen-nav .menu ul{
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
height: 300px;
   width: 100%;
}
header nav.small-screen-nav .menu .cross-icon{
 font-size: 1.2rem;
   display: flex;
  height: 20px;
position: absolute;
right: 5vw;
top: 12px;


}

header nav.small-screen-nav .menu ul li{
   border-bottom:1px solid var(--dark-border);
  
   width: 100%;
display: flex;
padding-left: 2rem;
align-items: center;
   height:70px;

   
}
header nav.small-screen-nav.auth-header .menu ul{

height: 100px;
  
}
}
/* header ends here */