/* HEADER START */

.header-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 5rem;
}

.logo-container{
    flex: 0 0 100px;
}

.logo-container a{
    display: block;
    height: 100%;
}

.logo-container a img{
    width: 100%;
    height: 100%;
}

.nav-link-container{
    flex: 0 0 68%;
    display: flex;
}

.nav-link-container .nav-links{
    list-style-type: none;
    margin-left: auto;
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-links .nav-link-item{
    flex: 0 0 20%;
    text-align: center;
    font-size: 1.4rem;
}


/* .person{
    position: absolute;
    right: 3rem;
    top: calc(2rem + 20px);
    cursor: pointer;  
    font-size: 15px;
}

.person.logged_in a i{
    margin-right: 5px;
}

.person.logged_in a{
    display: flex;
    align-items: center;
} */


.nav-link-item a, .person a{
    text-decoration: none;
    color: var(--primary-color);
    text-transform: capitalize;
    font-weight: bold;
}

/* .burger-menu{
    display: none;
}

.burger-menu:hover{
    cursor: pointer;
}

.burger-menu .line{
    width: 100%;
    height: 4px;
    border-radius: 10px;
    background-color: var(--primary-color);
    transition: all .3s ease-in;
}

.burger-menu .line:not(:last-child){
    margin-bottom: 5px;
}

.burger-menu.active .line1{
    transform: rotate(405deg);
}

.burger-menu.active .line2{
    opacity: 0;
}

.burger-menu.active .line3{
    transform: rotate(-405deg);
}

.burger-menu.active .line:not(:last-child){
    margin-bottom: 0;
} */


.burger-menu-container {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.burger-menu,
.burger-menu::before,
.burger-menu::after {
  display: block;
  background-color: var(--primary-color);
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.burger-menu::before {
  content: '';
  margin-top: -8px;
}

.burger-menu::after {
  content: '';
  margin-top: 8px;
}

.burger-menu-container.active .burger-menu::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

.burger-menu-container.active .burger-menu {
  background: rgba(255, 255, 255, 0);
}

.burger-menu-container.active .burger-menu::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

.sticky{
    background-color: var(--white);
    z-index: 200;
    position: fixed;
    top: 0px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    animation: drop .5s linear;
}

.mobile-menu{
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    z-index: 200;
    position: absolute;
    top: 80px;
    width: calc(100% + 80px);
    left: -40px;
    height:0px;
}

.mobile-menu .mobile-list{
    list-style-type: none;
    background-color: var(--primary-color);
}

.mobile-menu .mobile-list .mobile-list-item{
    height: 0;
    overflow: hidden;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu.active .mobile-list .mobile-list-item{
    height: 60px;
}


.mobile-list .mobile-list-item a{
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
    font-size: 2rem;
    display: block;
    padding: 20px 10px;
    text-decoration: none;
}

.mobile-list .mobile-list-item a:hover{
    background-color: var(--secondary-color);
}

/* HEADER END START */