/*------------------------------------------------------------------
Template Name: Kitsolve – Business Solution HTML Template
Template URL: https://kitsolve.netlify.app
Description: Kitsolve is a clean, modern, and fully responsive HTML template designed for corporate businesses, startups, creative agencies, IT services, consulting firms, SaaS platforms, software showcases, app landing pages, marketing agencies, and digital service providers. Built on a 1920px grid, it offers a clear visual hierarchy, organized sections, and reusable components for easy editing and rapid customization.
Author: KitDokan
Author URL: https://themeforest.net/user/kitdokan
Version: 1.0
-------------------------------------------------------------------

CSS INDEX
===================

1. Header One Area
2. Header Two Area
3. Header Three Area
4. Header Four Area
5. Header Five Area
6. Responsive

------------------------------------------------------------------*/

@import url("variable.css");

/* =============================
* 1. Header One Area
============================= */
.header {
  position: relative;
  background: var(--clr-base-dark);
  z-index: 100 !important;
}

.header__container {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.header__logo-wrap {
  max-width: 115px;
}

.header__logo-wrap .logo {
  width: 100%;
  object-fit: cover;
}

.header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-menu .main-menu__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  list-style: none;
  font-family: 'Roboto', sans-serif;
  padding-left: 0px;
  margin: 0;
}

.main-menu .main-menu__nav>li {
  position: relative;
  float: left;
  width: auto;
}

.main-menu .main-menu__nav>li a {
  position: relative;
  font-size: 20px;
  font-weight: 500;
}

.main-menu .main-menu__nav>li a::before {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  background-color: var(--clr-white);
  width: 0;
  height: 0.5px;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.3s ease;
  transform-origin: left;
}

.main-menu .main-menu__nav>li a:hover::before,
.main-menu .main-menu__nav>li.item__active a::before {
  width: 100%;
  opacity: 1;
}

.main-menu ul li.dropdownitem>a:after {
  width: 15px;
  height: 15px;
  text-align: center;
  float: right;
  background-color: var(--clr-dark);
  content: "";
  margin: 1px 0px 0px 3px;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>');
  mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.main-menu ul li .dropdown {
  display: none;
  position: absolute;
  min-width: 200px;
  list-style: none;
}

.main-menu .main-menu__nav .dropdown ul li {
  float: left;
  width: 100%;
}

.main-menu .main-menu__nav .dropdown ul li a {
  padding: 8px 0px;
}

.main-menu ul li.dropdownitem ul li a,
.main-menu ul li.dropdownitem ul li .dropdown ul li a {
  border-bottom: 1px dotted var(--clr-gray);
}

.main-menu ul li.dropdownitem ul li:last-child a,
.main-menu ul li.dropdownitem ul li .dropdown ul li:last-child a {
  border-bottom: 0px !important;
}

.main-menu ul li.dropdownitem ul li a:before,
.main-menu ul li.dropdownitem ul li .nav-dropdown ul li a:after {
  display: none !important;
}

.main-menu ul li.dropdownitem ul li .nav-dropdown ul li:last-child a {
  border-bottom: 0px !important;
}

.main-menu ul li.dropdownitem .dropdown ul li.dropdownitem {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}

.menu-close,
.menu-open {
  display: none;
}



/* =============================
* 2. Header Two Area
============================= */
.header--style-two {
  background: transparent;
}

.header--style-two .header__logo-top {
  max-width: 100px;
}

.header--style-two .header__top {
  background: var(--clr-lime-green);
}

.header__phone {
  color: var(--clr-dark);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16px;
}

.header__social-link {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid var(--clr-dark);
  border-radius: 50%;
  transition: 0.4s ease;
}

.header__social-link:hover {
  background: var(--clr-dark);
}

.header__social-link:hover svg path {
  fill: var(--clr-white);
}

.header--style-two .header__bottom {
  background: var(--clr-white);
}

.header--style-two .header__logo-wrap {
  display: none;
}

.header--style-two .main-menu .main-menu__nav>li a {
  color: var(--clr-dark) !important;
}

.header--style-two .main-menu ul li.dropdownitem>a:after {
  background: var(--clr-dark);
}

.header--style-two .container {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.header--style-two .menu-open .open {
  background: var(--clr-dark);
}


/* =============================
* 3. Header Three Area
============================= */
.header--style-three {
  background: var(--clr-white);
}

.header--style-three .header__wrap {
  background: var(--clr-base-dark);
  padding: 1.5rem 1.8rem;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header--style-three .header__container {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.header--style-three .header__social-link {
  border: 1px solid var(--clr-white);
}

.header--style-three .header__social-link svg path {
  fill: var(--clr-white);
  transition: fill 0.3s ease;
}

.header--style-three .header__social-link:hover svg path {
  fill: var(--clr-dark) !important;
}


.header--style-three .header__phone {
  color: var(--clr-white);
}

/* =============================
* 4. Header Four Area
============================= */
.header__top {
  position: relative;
}

.header__top-shape {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 63%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1 !important;
  background-position: right center !important;
}

.header__top-info .info__text {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 0.16px;
  color: var(--clr-white);
  text-decoration: none;
}

.header__top-info .info__icon-wrap {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--clr-lime-green);
  border-radius: 50%;
}

/* =============================
* 5. Header Five Area
============================= */
.header--style-five {
  background: transparent;
}

.header--style-five .header__top-container {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.header--style-five .header__top {
  background: transparent !important;
}

.header--style-five .header__bottom {
  background: var(--clr-deep-green);
}

.header--style-five .info__text {
  color: var(--clr-dark);
}


/* =============================
* 6. Responsive
============================= */

@media (max-width:1800px) {

  .header--style-three .header__contact,
  .header--style-three .header__social,
  .header--style-three .header__btn-wrap {
    display: none;
  }
}

@media (max-width:1600px) {
  .header--style-three .header__social {
    display: none !important;
  }

  .header--style-four .header__contact,
  .header--style-five .header__contact {
    display: none;
  }
}

@media (max-width:1200px) {
  .main-menu .main-menu__nav {
    gap: 1.2rem;
  }
}

@media screen and (max-width: 992px) {

  .menu-open,
  .menu-close {
    cursor: pointer;
    color: var(--clr-dark);
    text-decoration: none;
    font-size: 26px;
  }

  .menu-open {
    display: block;
  }

  .menu-close {
    display: none;
  }

  .main-menu {
    position: relative;
    display: none;
  }

  .main-menu.active {
    display: block;
  }

  .menu-open {
    display: block !important;
    float: right;
  }

  .mobile-menu-active .menu-close {
    display: block !important;
    z-index: 15;
    position: absolute;
    right: 0;
    left: unset !important;
    top: 0px;
    float: left;
  }

  .main-menu__nav {
    display: none !important;
  }

  .main-menu.active .main-menu__nav {
    display: block !important;
  }

  .main-menu.active {
    position: fixed;
    left: 0px;
    top: 0px;
    margin-top: 0px !important;
    max-width: 400px;
    width: 100%;
    height: 100vh;
    display: flex;
    z-index: 14;
  }

  .main-menu.active .main-menu__nav {
    background-color: #fff;
    float: left;
    margin-top: 0px;
    padding: 40px 20px;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    transform-origin: top center !important;
  }

  .main-menu.active .main-menu__nav,
  .menu-close {
    animation: translateX 400ms 0ms ease-in-out forwards !important;
  }

  @keyframes translateX {
    0% {
      opacity: 0;
      transform: translateX(-160px);
    }

    80% {
      transform: translateX(-5px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }

  .main-menu .main-menu__nav>li {
    float: left;
    width: 100%;
  }

  .main-menu .main-menu__nav>li a {
    float: left;
    width: 100%;
    text-decoration: none;
    color: var(--clr-dark);
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
  }

  .main-menu .main-menu__nav>li a:hover {
    float: left;
    width: 100%;
    transition: all 0.25s ease-out;
    text-decoration: none;
    color: rgb(103, 130, 252) !important;
    padding: 10px 0px;
  }

  .main-menu ul li.dropdownitem>a:hover:after {
    background-color: rgb(103, 130, 252) !important;
  }

  .nav-dropdown.opened {
    color: rgb(103, 130, 252) !important;
    border-bottom: 1px solid rgba(103, 130, 252, 0.5) !important;
  }

  .main-menu .main-menu__nav>li:last-child a {
    border-bottom: 0px solid #ddd;
  }

  .main-menu.active ul li .nav-dropdown.opened+.dropdown ul {
    list-style: none;
    float: left;
    margin-left: 0px;
    padding-left: 7px;
  }

  .main-menu.active ul li .nav-dropdown.opened+.dropdown ul .dropdown ul {
    padding-left: 15px;
  }

  .main-menu.active ul li .nav-dropdown.opened+.dropdown {
    display: block;
    position: relative;
    margin: 0;
    padding: 5px 0px;
    min-width: unset;
    padding-top: 0px !important;
    float: left;
  }

  .main-menu.active ul li.dropdownitem:hover+.dropdown+.dropdown {
    display: none;
  }

  #menu-overlay {
    background-color: rgba(0, 0, 0, .3);
    float: left;
    display: none;
    width: 100%;
    height: 100vh;
    z-index: 13;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #menu-overlay.show {
    display: block !important;
    position: fixed;
    z-index: 10 !important;
  }

  .menu-open .open {
    width: 40px;
    height: 40px;
    float: right;
    background-color: var(--clr-white);

    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transition: all 0.2s ease-out;
  }


  .mobile-menu-active .menu-open .open,
  .menu-open .open:hover {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-filter-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm.5 5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1zM4 8.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm2 3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-filter-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm.5 5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1zM4 8.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm2 3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z"></path></svg>');
  }

  .menu-close .close {
    width: 38px;
    height: 38px;
    float: right;
    background-color: #000;
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x close" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x close" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: all 0.2s ease-out;
  }

  .menu-close .close:hover {
    background-color: #000;
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path></svg>');
  }

  .main-menu.active ul li.dropdownitem>a.opened:after {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>') !important;
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>') !important;
  }

  /* Header Two Area */
  .header--style-two .header__logo-wrap {
    display: block;
  }

  /* Header Four Area */
  .header--style-four .header__contact {
    display: none;
  }

}

@media screen and (min-width: 992px) {
  .main-menu li.item {
    position: relative;
  }

  .main-menu li.item__active {
    margin-left: 10px;
  }

  .main-menu li.item__active::before,
  .main-menu .dropdown li.item__active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--clr-white);
    transform: translateY(-50%);
    border-radius: 50%;
  }

  .main-menu .dropdown li.item__active::before {
    background: var(--clr-dark);
  }


  .main-menu .main-menu__nav>li a {
    color: var(--clr-white) !important;
    font-weight: 400;
    text-decoration: none;
    padding: 10px 2px;
    border-radius: 8px;
    display: inline-block;
    font-size: 20PX;
    line-height: 1.6;
    letter-spacing: 0.2PX;
    height: 100%;
    position: relative;
  }

  .main-menu ul li.dropdownitem:hover .dropdown {
    display: block;
    position: absolute;
    margin: 0;
    padding: 5px 0px;
    min-width: 220px;
    padding-top: 0px !important;
  }

  .main-menu ul li.dropdownitem>a:after {
    background: var(--clr-white);
    width: 20px;
    height: 30px;
  }

  .main-menu ul li.dropdownitem:hover>a {
    border-radius: 8px 8px 0px 0px !important;
  }

  .main-menu ul li.dropdownitem ul li.dropdownitem:hover>a {
    border-radius: 8px !important;
  }

  .main-menu ul li.dropdownitem:hover .dropdown .dropdown {
    display: none;
  }

  .main-menu ul li.dropdownitem .dropdown li.dropdownitem:hover .dropdown {
    padding-left: 16px;
    position: absolute;
    margin: 0;
    padding-top: 0px !important;
    min-width: 200px;
    display: inline-table;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
  }

  .main-menu ul li.dropdownitem .dropdown .dropdown .dropdown {
    display: none !important;
    visibility: hidden;
  }

  .main-menu ul li.dropdownitem .dropdown ul {
    list-style: none;
    background-color: var(--clr-white);
    float: left;
    padding: 10px;
    border-radius: 0px 8px 8px 8px;
  }

  .main-menu ul li.dropdownitem ul li a {
    color: var(--clr-dark) !important;
    font-weight: 400;
    text-decoration: none;
    padding: 5px 0px;
    float: left;
    width: 100%;
    border-radius: 0px;
    font-size: 14px;
  }

  .main-menu .main-menu__nav .dropdown ul li a:hover {
    color: var(--clr-dark) !important;
    padding-left: 7px;
    transition: all 0.15s ease-out;
  }

  .dropdownitem .dropdown {
    animation: translateDown 200ms 0ms ease-in-out forwards;
    transform-origin: top center;
  }

  .dropdownitem .dropdownitem .dropdown {
    transform-origin: top center !important;
    animation: translateX 200ms 0ms ease-in-out forwards !important;
  }

  @keyframes translateDown {
    0% {
      transform: scaleY(0)
    }

    80% {
      transform: scaleY(1.1)
    }

    100% {
      transform: scaleY(1)
    }
  }

  @keyframes translateX {
    0% {
      opacity: 0;
      transform: translateX(-60px);
    }

    80% {
      transform: translateX(-5px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }

  .main-menu ul li.dropdownitem ul li .nav-dropdown:after {
    width: 15px;
    height: 15px;
    text-align: center;
    float: right;
    background-color: var(--clr-dark);
    content: "";
    margin: 1px 0px 0px 3px;
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="12px" height="12px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="12px" height="12px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Header Two */
  .header--style-two .main-menu li.item__active::before {
    background: var(--clr-dark);
  }


  .header--style-two .main-menu .main-menu__nav>li a::before {
    background: var(--clr-dark);
  }


  /* Header Three */
  .header--style-three .header__social-link:hover {
    background: var(--clr-white);
  }

  .header--style-three .main-menu li.item__active::before {
    background: var(--clr-lime-green);
  }

  .header--style-three .main-menu .dropdownitem li.item__active::before {
    background: var(--clr-dark);
  }

  .header--style-three .main-menu__nav>li a:hover {
    color: var(--clr-lime-green) !important;
  }

  .header--style-three .main-menu li.item__active a {
    color: var(--clr-lime-green) !important;
  }

  .header--style-three .main-menu .main-menu__nav .dropdown ul li a {
    color: var(--clr-dark) !important;
  }
}

@media (max-width: 768px) {
  .header__logo-top {
    display: none;
  }

  .header__top-content {
    justify-content: end !important;
  }
}

@media (max-width: 460px) {

  .header__btn-wrap,
  .header__contact {
    display: none;
  }
}

@media (max-width: 350px) {


  .header--style-two .header__logo {
    display: none;
  }

  .header__social-link {
    width: 28px;
    height: 28px;
  }
}

 