:root {
    --primary-bg-color: #080808;
    --secondary-bg-color: #1b1b1b;
    --purple-bg-color: #7D3FFF;
    --light-bg-color: rgba(53, 53, 53, 0.308);
    --dark-bg-color: rgb(0, 0, 0);
    --primary-text-color: rgb(255, 255, 255);
    --secondary-text-color: rgb(119, 119, 119);
    --tertiary-text-color: #d9a857;
    --light-text-color: #ffffff;
    --grey-btn-bg-color: #202020;
    --light-btn-bg-color: #ffffff;
    --btn-text-color: rgb(0, 0, 0);
}

header .nav1 {
    background-color: var(--dark-bg-color);
    padding: 15px 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--light-bg-color);
}

header .nav1 .one {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 330px;
}

header .nav1 .one img {
    height: 27px;
}

header .nav1 .one select {
    background-color: transparent;
    width: fit-content;
    color: var(--light-text-color);
}

header .nav1 .one select option {
    background-color: var(--dark-bg-color);
}

header .two img {
    height: 40px;
}

header .three {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 330px;
    justify-content: flex-end;
}

header .three a {
    font-size: 20px;
    padding: 18px 32px;
    border-radius: 10px;
    transition: all .3s;
}

header .three .first {
    color: var(--light-text-color);
    background-color: var(--grey-btn-bg-color);

}

header .three .first:hover {
    background-color: var(--light-btn-bg-color);
        color: var(--btn-text-color);


}

header .three .second {
    color: var(--btn-text-color);
    background-color: var(--light-btn-bg-color);

}

header .three .second:hover {
    color: var(--light-text-color);
    background-color: var(--grey-btn-bg-color);

}


header .nav2 {
    background-color: var(--dark-bg-color);
    padding: 15px 4vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
 .search-wrapper {
      position: relative;
      /* display: inline-block; */
    }

    .search-input {
      padding: 5px 8px 5px 30px;
      border-radius: 5px;
      outline: none;
      display: none;
      transition: all 0.3s ease;
      width: 200px;
      font-size: 14px;
    }

    .search-input.show {
      display: inline-block;
    }

    .search-icon-inside {
      position: absolute;
      top: 50%;
      left: 8px;
      transform: translateY(-50%);
      color: #ffffff;
      pointer-events: none;
    }

    .search-toggle-btn {
      background: none;
      padding: 8px;
      border-radius: 5px;
      cursor: pointer;
      color: #ffffff;
    }

    .search-toggle-btn.hide {
      display: none;
    }
header .nav2 .search-icon {
    position: absolute;
    top: 8px;
    left: 4vw;
    color: var(--light-text-color);
    font-size: 20px;
}

header .nav2 ul {
    display: flex;
    align-items: center;
    gap: 7vw;
}

header .nav2 ul a {
    color: var(--light-text-color);
    font-size: 20px;
}
header .nav2 ul a:hover {
    color: var(--secondary-text-color);

}






header .nav3 {
    background-color: var(--secondary-bg-color);
    padding: 15px 4vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px 0px #00000059;
}

header .nav3 ul {
    display: flex;
    align-items: center;
    gap: 7vw;
}

header .nav3 ul a {
    font-size: 20px;
    color: var(--secondary-text-color);
    font-weight: 600;
}
header .nav3 ul a:hover {
    color: var(--primary-text-color);

}
.offcanvas{
    background-color: var(--primary-bg-color);
}
.offcanvas-body .links-1{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}
.offcanvas-body .links-1 a{
    color: var(--secondary-text-color);
    font-size: 18px;
    font-weight: bold;
}
.offcanvas-body .links-1 a:hover{
    color: var(--primary-text-color);
}

@media (max-width: 1600px) {
    header .nav1 .one img {
        height: 20px;
    }
    header .nav1 .one select{
        padding: 2px 33px 2px 9px;
    }
    header .two img{
        height: 35px;
    }
    header .three a {
    font-size: 16px;
    padding: 14px 25px;
}
header .nav2 ul a{
    font-size: 18px;
}
header .nav3 ul a{
    font-size: 18px;
}
header .nav3 ul{
    gap: 5vw;
}
}
@media (max-width: 1200px) {
        header .two img{
            height: 30px;
        }
        header .three a{
            padding: 12px 20px;
        }
        header .nav2 ul a{
            font-size: 16px;
        }
        header .nav2 ul{
            gap: 4.5vw;
        }
        header .nav3 ul a{
            font-size: 16px;
        }
        header .nav3 ul{
            gap: 4vw;
        }
}
@media (max-width: 1000px) {
    header .nav3{
        display: none;
    }
    header .three{
        min-width: 120px;
    }
    header .nav1 .one{
        min-width: 120px;

    }
}
@media (max-width: 800px) {
    header .nav2{
        display: none;
    }
    header .three .first{
        display: none;
    }
    header .nav1 .one select{
        display: none;
    }
    header .three a{
        padding: 10px 12px;
        font-size: 14px;
    }
    header .two img{
        height: 25px;
    }
header .nav1 .one img{
    height: 18px;
}
}
@media (max-width: 500px) {
    header .nav1 .two{
        display: none;
    }
}