/* Navbar  */
.navtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 3rem;
  background-color: var(--color-blue);
}

.navtop__close {
  font-size: 1.8rem;
  color: var(--color-white);
  cursor: pointer;
  display: none;
}

.navtop.active .navtop__close {
  display: inline-block;
}

.navtop.active .navtop__langs,
.navtop.active .navtop__socials {
  display: none;
}

.navtop__actions {
  display: none;
  gap: 3.5rem;
}

.navtop.active .navtop__actions {
  display: flex;
}

.navtop__actions--item {
  color: var(--color-white);
}

.navtop__langs {
  display: flex;
  gap: 1.3rem;
  text-transform: uppercase;
}

.navtop__langs--item a {
  color: var(--color-white);
  font-weight: 700;
}

.footer__webcoder {
  color: var(--color-white);
  text-decoration: underline;
  white-space: nowrap;
}

.navtop__socials,
.footer__socials {
  display: flex;
  gap: 2.5rem;
}

.navtop__socials--item,
.footer__socials--item {
  color: var(--color-white);
  font-size: 1.7rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  position: relative;
  z-index: 99999;
}

.navbar__actions > .navbar__actions--item {
  padding: 0.5rem;
  cursor: pointer;
}

.navbar__actions {
  display: flex;
  gap: 3.7rem;
  flex: 1;
}

.navbar__logo {
  width: 5.9rem;
  height: 5.9rem;
}

.navbar__logo img {
  object-fit: contain;
}

.navbar__bars {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.menu {
  width: 100%;
  height: 35rem;
  left: 0;
  top: -1px;
  background-color: var(--color-white);
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 3rem;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}

.menu.active {
  visibility: visible;
  opacity: 1;
}

.menu__container {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  max-width: 114.6rem;
  width: 100%;
  margin: 0 auto;
}

.menu__logo {
  width: 13.7rem;
  height: 16.8rem;
}

.menu__logo img {
  object-fit: contain;
}

.menu__item--title {
  margin-bottom: 4rem;
}

.menu__lists {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu__lists > .menu__lists--item > a {
  color: var(--color-blue);
}

.menu__item--head i {
  display: none;
}

.menu__item.active .menu__lists {
  display: flex;
}

.search-bar {
  position: absolute;
  left: 0;
  width: 100%;
  /* min-height: 13.2rem; */
  background-color: var(--color-white);
  z-index: 100000;

  display: none;
  align-items: flex-start;
}

.search-bar.active {
  display: flex;
}

.search-bar > form {
  flex: 1;
}

.search-bar > form > input {
  padding-block: 3rem;
  padding-inline: 3rem;
  width: 100%;
  font-family: Agency;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 3.2rem;
}

.search-bar > button {
  margin-top: 1.9rem;
  margin-right: 2.6rem;
  background-color: transparent;
  font-size: 2.7rem;
  cursor: pointer;

  color: var(--color-blue);
}

.hero-section {
  min-height: 36rem;
  background: linear-gradient(
      0deg,
      rgba(43, 49, 150, 0.3),
      rgba(43, 49, 150, 0.3)
    ),
    url("../imgs/innerBanner.png");
  background-size: cover;
  background-position: center;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  flex-direction: column;

  margin-bottom: 5rem;
  padding-bottom: 8rem;
}

.hero-section > h2 {
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin: auto;
  width: min(64.5rem, 90%);
  text-transform: uppercase;
  margin-top: 11.2rem;
}

.hero-section > h2::before,
.hero-section > h2::after {
  content: "";
  position: relative;
  flex: 1;
  height: 1.5px;
  background-color: var(--color-white);
}

.hero-section > .logout-btn {
  margin-inline: auto;

  color: var(--color-blue);
  padding: 1.5rem 2.3rem;
  font-size: 1.8rem;
  margin-block: 3rem 4rem;
}

.hero-section > nav {
  display: flex;
  width: min(91.4rem, 90%);
  min-height: 11.5rem;
  background-color: var(--color-blue);
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
}

.hero-section > nav > ul {
  display: flex;
  flex: 1;
  overflow-x: auto;
  gap: 1rem;
  padding: 5px 20px 0;
}

.hero-section > nav > ul::-webkit-scrollbar {
  /*width: 10x;*/
  /*height: 7px;*/
  display: none;
}

/*.hero-section>nav>ul::-webkit-scrollbar-track {*/
/*  background: transparent;*/
/*}*/

/*.hero-section>nav>ul::-webkit-scrollbar-thumb {*/
/*  background-color: var(--color-yellow);*/
/*  border-radius: 10px;*/

/*}*/
.hero-section > nav > ul > li {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;

  font-family: "Agency";
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 30px;

  color: var(--color-white);
  cursor: pointer;
  min-width: calc(100% / 3.5);
}

.hero-section > nav > ul > li > a {
  color: inherit;
  text-transform: uppercase;
}

.hero-section > nav > ul > li.active::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 1rem;
  background-color: var(--color-yellow);
  bottom: 0;
}

.fav-btn {
  position: absolute;
  background-color: var(--color-white);
  box-shadow: 0px 16px 30px rgba(112, 144, 176, 0.1);
  width: 3.4rem;
  aspect-ratio: 1;
  border-radius: 50%;

  display: grid;
  place-items: center;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  z-index: 1;
}

.fav-btn[data-liked] {
  color: var(--color-yellow);
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 34.4rem;
  gap: 1rem;
  box-shadow: 0px 16px 30px rgba(112, 144, 176, 0.1);
  position: relative;
}

.product-card > * {
  flex: 1;
}

.product-card > .info-container {
  padding: 1.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  flex: 0;
}

.product-card > .info-container > .title {
  color: var(--color-blue);
  margin-top: auto;
}

.product-card > .info-container > .price {
  margin-block: 1.5rem 2.4rem;

  font-weight: 600;
  font-size: 2rem;
  line-height: 3rem;
}

.product-card > .info-container > .buy-btn {
  width: 100%;
  display: block;
  text-align: center;
  font-family: "Agency";
  font-size: 1.8rem;
  line-height: 1.4rem;
  padding-block: 1.5rem;
  cursor: pointer;
}

.header__second .header__head {
  display: flex;
  flex-direction: column;
}

.header__second .header__head {
  background-image: linear-gradient(
      0deg,
      rgba(43, 49, 150, 0.3),
      rgba(43, 49, 150, 0.3)
    ),
    url("../imgs/innerBanner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36rem;
}
.header__second .header__head.inner {
  background-image: linear-gradient(
      0deg,
      rgba(43, 49, 150, 0.3),
      rgba(43, 49, 150, 0.3)
    ),
    url("../imgs/header-background.png");
}

.header__second h2 {
  color: var(--color-white);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin: auto;
  width: min(64.5rem, 90%);
}

.header__second h2::after {
  content: "";
  position: relative;
  flex: 1;
  height: 1.5px;
  background-color: var(--color-white);
}

.header__second h2::before {
  content: "";
  position: relative;
  flex: 1;
  height: 1.5px;
  background-color: var(--color-white);
}

.header__second .container {
  position: relative;
  top: -5rem;
}

.header__second .header__categories {
  display: flex;
}

.dropdown {
  position: relative;
  display: inline-block;
  flex: 1;
  background-color: var(--color-blue);
}

.dropdown-btn {
  padding: 4.2rem 0rem;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background: none;
  color: var(--color-white);
  width: 100%;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3rem;
  font-family: "Agency";
}

.dropdown-btn.active {
  border-bottom: 1rem solid var(--color-yellow);
}

.dropdown-btn a {
  display: inline-block;
  color: var(--color-white);
}

.dropdown-btn i {
  font-size: 1.2rem;
}

.dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.dropdown-menu li {
  padding: 4.2rem 4rem;
  color: var(--color-white);
  background-color: var(--color-blue);
  cursor: pointer;
}

.dropdown-menu li:nth-child(2n + 1) {
  background-color: var(--color-dark-blue);
}

.dropdown.active .dropdown-menu {
  display: block;
}

.section__head h2 {
  color: var(--color-blue);
  text-transform: uppercase;
}

.general__swiper {
  margin-top: 9rem;
}
.pagination__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination__head .slider__pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pagination__head .slider__pagination i {
  cursor: pointer;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--color-blue);
  display: block;
}

.general__swiper .general__slider {
  margin-top: 5rem;
}

.news__card {
  position: relative;
}

.news__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 56.25%,
    rgba(43, 49, 150, 0.7) 100%
  );
  pointer-events: none;
}

.news__card .swiper--text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  z-index: 1;
}

.card__head {
  color: var(--color-yellow);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  text-transform: uppercase;
  font-family: "Agency";
}

.card__title {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.4rem;
  margin-top: 5px;
}

.card__date {
  font-family: "Agency";
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  margin-top: 25px;
}

.more {
  margin-top: 100px;
  padding-bottom: 14rem;
}

.more h3{
  color: var(--color-blue);
}

.more .more__main {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

.tag__list {
  margin-top: 7.7rem;
}

.tag__list ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.tag__list ul li {
  padding: 10px 0px;
  border: 1px solid var(--color-blue);
  border-radius: 8em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share__box {
  margin-top: 6.6rem;
}

.share__box a {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  font-family: "Agency";
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--color-dark-grey);
}

.clients {
  background-color: var(--color-blue);
  padding: 5.2rem 3rem;
  margin-top: 10rem;
}

.clients__image {
  width: 11.5rem;
  height: 7.8rem;
}

.clients .slick-slide {
  margin-right: 9.5rem;
}

.intro {
  padding: 3.3rem 3rem;
  background-color: var(--color-blue);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.intro__cart--title {
  color: var(--color-yellow);
  margin-bottom: 1.5rem;
}

.intro__links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.intro__links--item a {
  color: var(--color-white);
}

.footer {
  background-color: var(--color-blue);
  font-size: 1.4rem;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__top--left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.footer__logo {
  width: 5rem;
  height: 6.1rem;
}

.footer__logo img {
  object-fit: contain;
}

.footer__title {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding: 2rem 3rem;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__bottom--links {
  display: flex;
  gap: 4rem;
}

.footer__bottom--link {
  position: relative;
}

.footer__bottom--link:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -2.5rem;
  width: 1.3rem;
  height: 1px;
  background-color: var(--color-white);
  transform: rotate(-90deg);
}

.footer__bottom--link a {
  color: var(--color-white);
}

.footer__bottom--left {
  color: var(--color-white);
}

.page__more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  align-items: center;
  gap: 8rem;
}
.page__more a {
  padding: 1.5rem 2rem;
  text-transform: uppercase;
  color: var(--color-blue);
  font-family: Agency;
  border: 1px solid var(--color-blue);
}
.page__more::before {
  content: "";
  position: relative;
  background-color: var(--color-blue);
  flex: 1;
  height: 0.1rem;
}
.page__more::after {
  content: "";
  position: relative;
  background-color: var(--color-blue);
  flex: 1;
  height: 0.1rem;
}


dialog {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(54.6rem, 90%);
    min-height: 37.9rem;

    padding: 2.2rem;
}


dialog>.close-btn {
    display: block;
    width: fit-content;
    margin-left: auto;
    background-color: transparent;
    color: var(--color-blue);
    font-size: 2.7rem;
    cursor: pointer;
}

dialog>.info-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

dialog .icon {
    font-size: 7.4rem;
}

dialog .icon.error {
    color: var(--color-red);
}

dialog .icon.success {
    color: var(--color-green);
}

dialog .desc {
    max-width: 33rem;
    color: var(--color-grey-blue);
    text-align: center;
}

dialog .title {
    color: var(--color-blue);
}

dialog a {
    width: 100%;
    max-width: 33rem;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    line-height: 1.4rem;
    padding-block: 1.5rem;
}

@media screen and (max-width: 1440px) {
  .tag__list ul {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .tag__list ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .more {
    margin-top: 7rem;
  }

  .more .more__main {
    margin-top: 4rem;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .navtop {
    padding: 1.5rem;
  }

  .header__second .header__head {
    height: 25rem;
  }

  .navbar {
    padding: 1rem 1.5rem;
  }

  .more .more__main {
    grid-template-columns: repeat(2, 1fr);
  }

  .header__second h2::after {
    width: 0;
  }

  .header__second h2::before {
    width: 0;
  }

  .general__swiper {
    margin-top: 7rem;
  }

  .general__swiper .pagination__head .slider__pagination {
    display: none;
  }

  .tag__list {
    margin-top: 4.7rem;
  }

  .tag__list ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .menu {
    padding: 0 1.5rem;
  }

  .menu__logo {
    width: 7.7rem;
    height: 8.8rem;
    align-self: center;
  }

  .clients {
    padding: 2.8rem 1.5rem;
  }

  .intro {
    padding: 3.3rem 1.5rem;
  }

  .footer__top {
    padding: 1.5rem;
  }

  .footer__bottom {
    padding: 2rem 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  .navtop {
    padding: 3rem 1.5rem;
    display: none;
  }

  .navtop.active {
    display: flex;
  }

  .navbar__basket,
  .navbar__user {
    display: none;
  }

  .navtop__actions {
    display: flex;
  }

  .header__second .header__categories {
    flex-direction: column;
  }

  .dropdown-btn {
    padding: 2rem;
    justify-content: space-between;
    font-size: 2.2rem;
    line-height: 3rem;
  }

  .dropdown-menu li {
    padding: 2rem;
  }

  .more {
    padding-bottom: 10rem;
  }
  .more .more__main {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu {
    height: auto;
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  .menu__lists {
    display: none;
  }

  .menu__lists > .menu__lists--item > a {
    color: var(--color-white);
  }

  .menu__container {
    flex-direction: column;
  }

  .menu__logo {
    display: none;
  }

  .menu__item--head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .menu__item--title {
    font-size: 3.2rem;
    line-height: 3.2rem;
    margin-bottom: 0;
  }

  .menu__item--head i {
    display: block;
  }

  .clients .slick-slide {
    margin-right: 6rem;
  }

  .clients__image {
    width: 7.3rem;
    height: 5rem;
  }
}

@media screen and (max-width: 576px) {
  .header__second .header__head {
    height: 17.2rem;
  }

  .dropdown-btn {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }

  .more .more__main {
    grid-template-columns: repeat(1, 1fr);
  }

  .news__card .swiper--text .span__head {
    font-size: 1.2rem;
  }

  .news__card .swiper--text p {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .news__card .swiper--text .span__date {
    font-size: 0.8rem;
    line-height: 1rem;
  }

  .news__detail .news__main .tag__list ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .product-card > .info-container > .title {
    font-size: 1.8rem;
  }

  .hero-section {
    min-height: 17.2rem;
  }

  .hero-section > h2 {
    font-size: 3.2rem;
    justify-content: center;
    margin-top: 3rem;
  }

  .hero-section > h2::before,
  .hero-section > h2::after {
    display: none;
  }

  .hero-section > .logout-btn {
    margin-block: 2rem -2.4rem;
  }

  .hero-section > nav > ul > li {
    font-size: 1.4rem;
    line-height: 2.2rem;
  }

  .hero-section > nav > ul > li.active::after {
    height: 0.6rem;
  }

  .hero-section > nav {
    min-height: 6.6rem;
  }

  .search-bar > input {
    font-size: 3.2rem;
    line-height: 3.2rem;
    padding-inline: 1.6rem;
  }
}

.sl-wrapper {
  z-index: 9999999999999999 !important;
}

.sl-overlay {
  z-index: 99999999 !important;
}