* {
  margin: 0;

  padding: 0;

  box-sizing: content-box;
}

.header a.nav__link {
  text-decoration: none;

  color: #fff;
}

/* Remove default list styles */

.nav__dropdown ul,
.nav__dropdown li {
  list-style: none;

  margin: 0;

  padding: 0;
}

/* Remove text decoration from all dropdown links */

.nav__dropdown a {
  text-decoration: none;

  color: #fff;
}

/* Header styles */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #3b5d50;
  width: 100%;
  transition: all 0.8s ease;
  opacity: 1;
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header.sticky {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeDown 0.8s ease forwards;
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.header::after {
  content: "";

  clear: both;

  display: block;
}

/* Search styles */

/* .header__nav .nav__search {
  
      margin-left: auto;
  
      padding: 30px;
  
  } */

/* .header__nav .search__input {
  
      border: none;
  
      padding: 10px;
  
      border-radius: 20px;
  
      outline: none;
  
      transition: background 0.3s ease;
  
  } */

/* .header__nav .search__input:focus {
  
      border: 1px solid #000;
  
  } */

/* Logo styles */

.header__logo {
  padding: 20px 0;
}

.header__logo-link {
  font-size: 28px;

  display: block;

  /* padding-left: 20px; */
}

.header__logo-img {
  height: 90px;
}

/* Navigation styles */

.header__nav {
  display: flex;

  align-items: center;

  /* padding-left: 1rem; */
}

.nav__list {
  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;

  align-items: center;

  padding: 20px;

  color: #ffffff;

  position: relative;

  transition: color 0.3s ease;
}

.nav__link:hover::before {
  width: 100%;
}

.nav__link::before {
  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: #fff;

  transition: width 0.4s ease;
}

/* Dropdown styles */

.nav__item--dropdown:hover .nav__dropdown {
  display: block;
}

.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
}

.input {
  border-style: none;
  height: 50px;
  width: 50px;
  padding: 10px;
  outline: none;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
  background-color: #3b5d50;
  /* box-shadow: 0px 0px 3px #1557c0; */
  padding-right: 40px;
  color: #fff;
}

.input::placeholder,
.input {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
}

.input::placeholder {
  color: #fff;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  outline: none;
  border-style: none;
  border-radius: 50%;
  pointer-events: painted;
  background-color: transparent;
  transition: 0.2s linear;
}

.icon:focus ~ .input,
.input:focus {
  box-shadow: none;
  width: 250px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 3px solid #fff;
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}

/* .seach-wishlist {
  gap: 20px;
} */

.wishlist-icon {
  position: relative;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.wishlist-count {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  padding: 3px 6px;
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* background-color: #3b5d50; */
}

.marquee p {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: red;
  padding: 15px 20px;
  margin-bottom: 0;
  /* background: #3b5d50; */
  /*width: 100%;*/
  text-align: center;
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}
.nav__dropdown {
  display: none;

  position: absolute;

  left: 0;

  top: 100%;

  background: #497363;

  padding: 20px 0;

  border-bottom: 3px solid #34495e;

  z-index: 10;

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

  border-radius: 0 0 8px 8px;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mega dropdown specific styles */

.nav__dropdown--mega {
  /* width: 100%; */

  padding: 30px 40px;

  /* Increased padding for better spacing */

  display: none;

  /* Initially hidden */

  background: #497363;
}

/* Row containing multiple columns */

.nav__dropdown-row {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  grid-auto-rows: auto;

  gap: 20px;

  /* Space between columns */
}

/* Dropdown list handling */

.dropdown__list {
  display: grid;

  grid-template-rows: repeat(4, auto);

  grid-auto-flow: column;

  gap: 10px;

  /* Space between links */
}

/* Dropdown link styles */

.dropdown__link {
  white-space: nowrap;

  display: block;

  padding: 10px 15px;

  border-radius: 5px;

  font-size: 14px;

  color: #fff;

  /* Removed background change on hover */

  /* Instead, use underline animation */

  position: relative;
}

.dropdown__link::before {
  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: #fff;

  transition: width 0.4s ease;
}

.dropdown__link:hover::before {
  width: 100%;
}

/* Arrow icon styles */

.nav__arrow {
  margin-left: 10px;

  font-size: 12px;

  transition: transform 0.3s ease;
}

.nav__item--dropdown:hover .nav__arrow {
  transform: rotate(90deg);
}

/* Show mega dropdown when parent has 'active' class */

.nav__item--dropdown.active .nav__dropdown--mega {
  display: block;
}

/* Mobile styles for header and navigation */

.menu-icon {
  position: absolute;

  right: 30px;

  top: 50%;

  transform: translateY(-50%);

  display: none;

  cursor: pointer;

  z-index: 1002;

  /* Ensure it stays above the nav */
}

.menu-icon span {
  border: 2px solid #fff;

  width: 30px;

  height: 3px;

  /* Added height for better visibility */

  margin-bottom: 5px;

  display: block;

  transition: all 0.3s ease;
}

/* Menu icon active states */

.menu-icon.active .first {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-icon.active .second {
  opacity: 0;

  /* Hide the middle bar when active */
}

.menu-icon.active .third {
  transform: rotate(-45deg) translate(7px, -7px);
}

.header-form {
  width: 80% !important;
}

@media only screen and (max-width: 1170px) {
  .header__nav .nav__link {
    padding: 15px 15px;
  }
}

@media only screen and (max-width: 959px) {
  /* For mobile view */

  .header__logo-link {
    padding-left: 20px;
  }

  .header {
    justify-content: space-between;

    /* position: sticky; */
  }

  .header-form {
    width: 90% !important;
  }

  /* Hide desktop navigation */

  .header__nav {
    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #3b5d50;

    z-index: 1001;

    height: 100vh;

    overflow-y: auto;

    flex-direction: column;

    padding: 10px;
  }

  /* Show menu icon */

  .menu-icon {
    display: block;
  }

  /* Search adjustments */

  /* .header__nav .nav__search {
  
          padding: 10px;
  
      } */

  /* .header__nav .search__input {
  
          width: 90%;
  
      } */

  .nav__list {
    flex-direction: column;

    padding-left: 0;
  }

  .nav__item {
    width: 100%;
  }

  .nav__link {
    padding: 15px 20px;
  }

  .nav__dropdown {
    position: static;

    background: #3b5d50;

    border: none;

    padding: 10px 20px;

    box-shadow: none;

    border-radius: 0;
  }

  .nav__item--dropdown.active .nav__dropdown {
    display: block;
  }

  .dropdown__list {
    display: flex;

    flex-direction: column;

    width: 100%;

    padding-left: 20px;

    gap: 5px;

    /* Reduce gap on mobile */
  }

  .dropdown__link {
    color: #fff;

    padding: 10px 15px;

    /* Remove underline animation for better touch experience */

    position: relative;
  }

  .dropdown__link::before {
    display: none;

    /* Remove underline on mobile for simplicity */
  }

  .dropdown__link:hover::before {
    width: 0;

    /* Disable underline on hover */
  }

  .dropdown__link:hover {
    background: #000;

    color: #fff;
  }

  /* Adjust mega dropdown for mobile */

  .nav__dropdown--mega {
    padding: 20px;
  }

  .nav__dropdown-row {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .wishlist-div {
    position: absolute;
    right: 80px;
  }
}

@media only screen and (max-width: 520px) {
  /* Additional mobile view tweaks */

  .header {
    justify-content: space-between;
    height: 90px;
  }

  .header__logo {
    padding: 0;
  }
  .header__logo-img {
    max-width: 360px;
  }
  .header__logo-img {
    width: 60px;
  }
  .wishlist-div {
    position: absolute;
    right: 80px;
  }
}