@import url(./fonts.css);

/* ************** General CSS ************** */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

:root {
  --background-color: #f9fafa;
  --text-color: #555f62;
  --dark-text-color: #141719;
  --light-dark-text-color: #222;
  --product-card-border-color: #e1e4e5;
  --h-border-color: #eef1f1;
  --primary-blue-color: #182cc0;
  --hover-button-color: #3295ce;
  --active-button-color: #2778a7;
  --white-color: #fff;
  --menu-button-bg-color: #424a4d;
}
body {
  color: var(--text-color);
  background-color: var(--background-color);
  font-family: TBCX, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  position: relative;
}

a:link,
a:hover,
a:visited,
a:active {
  text-decoration: none;
  color: var(--primary-blue-color);
}

/* ************** Reusable Classes ************** */
.page-wrapper {
  display: flex;
  flex-direction: column;
}

.padding-global {
  padding-left: 4.7rem;
  padding-right: 4.7rem;
}

.main-content-wrapper {
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 111rem;
  margin: 0 auto;
}

.arrow-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  transition: color ease-in-out 0.25s;
}

.arrow-link a:link,
a:hover,
a:visited,
a:active {
  color: var(--primary-blue-color);
}

.arrow-link__icon {
  display: flex;
}

.arrow-link__icon path {
  transition: fill ease-in-out 0.25s;
}

.arrow-link__text {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-transform: uppercase;
}

.arrow-link:hover {
  color: var(--hover-button-color);
}

.arrow-link:active {
  color: var(--active-button-color);
}
.arrow-link:hover path {
  fill: var(--hover-button-color);
}
.arrow-link:active path {
  fill: var(--active-button-color);
}

.lang__dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
  height: 3.6rem;
  cursor: pointer;

  transition: all ease-in-out 0.25s;
}

.lang__dropdown:hover {
  background-color: #eef1f1;
  border-radius: 4px;
}

.lang-toggle {
  align-items: center;
  display: flex;
  gap: 0.4rem;
}

.lang__dropdown__icon {
  display: flex;
}

.lang__dropdown__text {
  font-weight: 700;
}

.lang__list-wrapper {
  position: absolute;
  z-index: 150;
  left: 0;
  top: 4rem;
  display: none;
  justify-content: center;
  color: var(--dark-text-color);
  background-color: var(--white-color);
  border: 1px solid #e1e4e5;
  border-radius: 4px;
  box-shadow: 0 4px 6px 2px rgba(12, 43, 67, 0.05);
  padding: 0.8rem 0;
  font-weight: 500;
  width: 100%;
}

.lang__list-wrapper.active {
  display: flex;
}

.lang__list {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0;

  transition: all ease-in-out 0.25s;
}

.lang__list:hover {
  background-color: var(--background-color);
}

.hidden {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

/* ************** Header Section ************** */
.header {
  padding-left: 4.7rem;
  padding-right: 4.7rem;
  width: 100%;
  height: 8rem;
  background-color: var(--white-color);
  border-bottom: 1px solid var(--h-border-color);

  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 100;
}

.header__wrapper {
  max-width: 110rem;
  margin: 0 auto;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
}

.header__logo {
  display: flex;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 0 4rem;
  cursor: pointer;
  height: 100%;
}

.header__dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.header__buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.header__search-button {
  display: flex;
  padding: 0.8rem;
  cursor: pointer;
}

.header__search-button path {
  transition: fill ease-in-out 0.25s;
}

.header__search-button:hover path {
  fill: var(--hover-button-color);
}

.header__search-button:active path {
  fill: var(--active-button-color);
}

/* Header Burger menu */
.header__burger-menu {
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: start;
  padding: 0.8rem;
  transition: color 0.25s;
  cursor: pointer;
}

.burger-menu__line {
  background-color: #555f62;
  border-radius: 1px;
  height: 0.2rem;
  transition: 0.6s;
}

.line-1 {
  width: 1.1rem;
  transform: translateZ(0) scaleX(1) rotateX(0deg) rotateY(0deg) rotate(0deg)
    skew(0deg, 0deg);
  transform-style: preserve-3d;
  transform-origin: 100%;
}
.line-2 {
  width: 2rem;
}
.line-3 {
  width: 1.5rem;
  transform: translateZ(0) scaleX(1) rotateX(0deg) rotateY(0deg) rotate(0deg)
    skew(0deg, 0deg);
  transform-style: preserve-3d;
  transform-origin: 100% 100%;
}

.header__burger-menu.active .line-1 {
  transform: translateZ(0) scaleX(1) rotateX(0deg) rotateY(0deg) rotate(-45deg)
    skew(0deg, 0deg);
  transform-style: preserve-3d;
  width: 20px;
}

.header__burger-menu.active .line-2 {
  opacity: 0;
}

.header__burger-menu.active .line-3 {
  transform: translateZ(0) scaleX(1) rotateX(0deg) rotateY(0deg) rotate(45deg)
    skew(0deg, 0deg);
  transform-style: preserve-3d;
  width: 20px;
}

/* Header Dropdown Component */
.header__dropdown-wrapper {
  min-height: 19.1rem;
  z-index: 120;
  background-color: var(--white-color);
  padding: 3.2rem 0;
  position: absolute;
  top: 8rem;
  bottom: auto;
  left: 0;
  right: 0;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out;
}

.header__dropdown-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.header__dropdown {
  flex-shrink: 0;
}

.header__dropdown-toggle {
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--light-dark-text-color);
  font-size: inherit;
}

.header__dropdown__link-block {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out;
  cursor: pointer;
}

.header__dropdown__link-block.open {
  opacity: 1;
  visibility: visible;
}

.header__dropdown__link-img-wrapper {
  width: 100%;
  margin-bottom: 21px;
  position: relative;
}

.header__dropdown__list {
  min-width: 20rem;
  position: absolute;
  z-index: 130;
  top: 11rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out;
  transition-delay: 0.6s;
}

.header__dropdown__list.open {
  opacity: 1;
  visibility: visible;
}

.header__dropdown__link {
  padding-right: 4.7rem;
}

.header__dropdown__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-text-color);
  transition: color ease-in-out 0.25s;
}

.header__dropdown__text:hover {
  color: var(--primary-blue-color);
}

.header__dropdown__line {
  width: 100%;
  height: 0.2rem;
  background-color: var(--primary-blue-color);
  border-radius: 1px;
  margin-bottom: -1px;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0);
  transition: all ease-in-out 0.6s;
}

.header__dropdown__line.open {
  transform: scale(1);
}

/* Header Navigation Menu for mobile */
.header__nav-mobile {
  z-index: 102;
  background-color: var(--background-color);
  display: none;
  flex-direction: column;
  margin-top: 8rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.header__nav-mobile.active {
  display: flex;
}
.footer__bottom-wrapper {
  background-color: var(--white-color);
  width: 100%;
  border-top: 1px solid #eef1f1;
}

.header__nav-mobile__inner {
  overflow: auto;
  max-height: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.header__nav-mobile__inner::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.header__nav-mobile__inner {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.header__nav-mobile__main {
  display: flex;
  width: 100%;
  background-color: var(--white-color);
  flex-direction: column;
  flex: 1;
}

.header__dropdown-mobile {
  border-bottom: 1px solid #d1d5d6;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 3.2rem;
}

.header__dropdown-toggle-mobile {
  width: 100%;
  color: var(--dark-text-color);
  justify-content: space-between;
  align-items: center;
  padding: 3.2rem 0 0;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  cursor: pointer;
}

.header__dropdown-toggle-mobile-icon {
  transition: transform ease 0.8s;
}
.header__dropdown-toggle-mobile-icon.open {
  transform: rotate(180deg);
}

.header__dropdown__list-wrapper {
  height: 0;
  overflow: hidden;
  transition: all ease 0.8s;
}
.header__dropdown__list-wrapper.open {
  height: 13.4rem;
}

.header__dropdown__list-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.6rem;
  padding-top: 2rem;
}

.header__dropdown__text-mobile {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-color);
}

.footer__contact-mobile {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.footer__bottom-inner-mobile {
  background-color: #fff;
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  font-size: 1.2rem;
}

/* ************** Breadcrumbs Component ************** */
.breadcrumbs__component {
  padding: 2.4rem 0;
  margin-top: 8rem;
}

.breadcrumbs_inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.breadcrumb__icon {
  display: none;
}

.breadcrumbs {
  color: var(--dark-text-color);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2.04rem;
}

/* ************** Home Hero Section (First) ************** */
.section__home-hero {
  padding: 3.2rem 0 6rem 0;
}

.banner__wrapper--main {
  background-image: url(../images/banner-1.png);
  position: relative;
}

.banner__wrapper--main::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0000004c;
  border-radius: 6px;
}

.banner__wrapper {
  border-radius: 6px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.banner__content {
  padding: 8rem;
  max-width: 92rem;
  color: var(--white-color);
}

.banner__inner {
  max-width: 45rem;
}

.banner__header {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.banner__text {
  margin-bottom: 2.4rem;
}

.banner__button {
  position: relative;
  z-index: 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 5rem;
  border-radius: 4px;
  line-height: 1.33;
  background-color: var(--hover-button-color);

  transition: all ease-in-out 0.25s;
}

.banner__button--main {
  width: 15rem;
}

.banner__button__hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, #001682, #3240e5);

  transition: opacity 0.25s ease;
}

.banner__button:hover .banner__button__hover {
  opacity: 0;
}

.banner__button:hover {
  background: var(--hover-button-color);
}

.banner__button:active {
  background: var(--active-button-color);
}

.banner__button__icon {
  display: flex;
}

.banner__button__icon > svg > path {
  fill: var(--white-color);
}

.banner__button__text {
  color: var(--white-color);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.33rem;
  text-transform: uppercase;
}

/* ************** Big Message Section ************** */
.section__big-message {
  padding: 6rem 0;
}

.big-message__text {
  color: var(--dark-text-color);
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ************** Select Packages Section ************** */
.section__packages {
  padding: 6rem 0;
}

.header-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 3.6rem;
}

.section__header {
  color: var(--dark-text-color);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.grid-cards-wrapper {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

.grid-card {
  position: relative;
  min-height: 25.6rem;
  color: var(--white-color);
  border-radius: 8px;
  overflow: hidden;

  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;

  transition: all ease-in-out 0.25s;
}

.grid-card--2 {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

.grid-card:hover {
  background-size: 105% 105%;
}

.grid-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  transition: transform ease-in-out 0.25s;
  filter: brightness(0.75);
}

.grid-card:hover::before {
  transform: scale(1.02);
}

.grid-card--1::before {
  background-image: url(../images/product-1.png);
  background-position: center;
}

.grid-card--2::before {
  background-image: url(../images/product-2.png);
  background-position: center top;
}

.grid-card--3::before {
  background-image: url(../images/product-3.png);
  background-position: center;
}

.grid-card__content {
  z-index: 5;
  position: relative;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2rem;
  height: 100%;
}

.grid-card__header {
  font-size: 2.4rem;
  line-height: 3rem;
  font-weight: 700;
}

.arrow-link__icon.is-white svg path {
  fill: var(--white-color);
  transition: all ease-in-out 0.25s;
}

.arrow-link__text.is-white {
  color: var(--white-color);
  text-decoration: underline;
  line-height: 1.4rem;

  transition: all ease-in-out 0.25s;
}

.arrow-link.is-white:hover .arrow-link__text {
  color: #aeaeae;
  text-decoration: none;
}

.arrow-link.is-white:hover .arrow-link__icon path {
  fill: #aeaeae;
}

/* ************** Stats Section ************** */
.section__stats {
  padding: 6rem 0;
}

.stats-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 3rem;
}

.stats__item {
  display: grid;
  grid-template-rows: auto;
  row-gap: 1.6rem;
  border-radius: 8px;
  padding: 4rem 4.8rem;
  background-color: var(--white-color);
  font-weight: 500;
}

.stats__item__number {
  color: var(--dark-text-color);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ************** Offers Section ************** */
.section__offers {
  padding: 6rem 0;
  overflow: hidden;
}

.header-wrapper {
  justify-content: space-between;
}

.slider__container {
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3.8rem;
  transition: all ease-in-out 0.6s;
  scroll-behavior: smooth;
}

.swiper-wrapper {
  padding-bottom: 4rem;
}

.swiper-scrollbar {
  height: 0.3rem !important;
  background-color: #d1d5d6 !important;
}

.swiper-scrollbar-drag {
  background: var(--primary-blue-color) !important;
}

.slider-scrollbar-drag {
  width: 30rem;
  background: var(--primary-blue-color);
  height: 100%;
  border-radius: 1px;
  transition: all ease-in-out 0.6s;
}

.slide {
  width: 35rem;
  flex-shrink: 0;
}

.product-card {
  /* overflow: hidden; */
  width: 100%;
  height: 395px;
  cursor: pointer;
  border: 1px solid #e1e4e5;
  border-radius: 8px;
  transition: all ease-in-out 0.25s;
}

.product-card:hover .product-card__img {
  transform: translateY(-4px);
}

.product-card:hover {
  background-color: var(--white-color);
  box-shadow: 0 36px 40px -15px rgba(12, 43, 67, 0.07);
}

.product-card__img-wrapper {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 21.2rem;
}

.product-card__img {
  transition: all ease-in-out 0.25s;
  transform: translateY(0);
  height: 102%;
  object-fit: cover;
  width: 100%;
}

.product-card__logo-wrapper {
  overflow: hidden;
  position: absolute;
  top: 1.6rem;
  right: 0;
  width: 7.8rem;
  height: 5.6rem;
  background-color: var(--white-color);
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__logo {
  max-width: 100%;
  max-height: 100%;
}

.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.8rem;
}

.product-card__category-wrapper {
  display: flex;
  margin-bottom: 0.8rem;
}

.product-card__category {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
  color: #6f787b;
  margin-right: 1.2rem;
}

.product-card__title {
  color: var(--dark-text-color);
  font-size: inherit;
  line-height: 3rem;
}

/* ************** Slider Scrollbar ************** */

.slider__scrollbar {
  height: 0.2rem;
  background-color: #d1d5d6;
  border-radius: 1px;
  line-height: 1.7;
  margin-right: 9.2rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.slider-scrollbar-drag {
  width: 30rem;
  background: var(--primary-blue-color);
  height: 100%;
  border-radius: 1px;
  transition: all ease-in-out 0.6s;
}

/* ************** Slider Navigation Elements ************** */
.slider__nav-arrows {
  display: flex;
  gap: 1.6rem;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  margin-top: -1.2rem;
}

/* ************** Get App Section ************** */
.section__get-app {
  padding: 6rem 0;
}

.get-app__wrapper {
  background-color: var(--white-color);
}

.get-app__inner {
  padding: 3.2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.get-app__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 55%;
}

.get-app__img-wrapper {
  max-width: 37rem;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.get-app__img {
  width: 60%;
  height: auto;
  object-fit: cover;
}

.section__desc {
  margin-top: 2rem;
}

.get-app__buttons {
  display: flex;
  gap: 1.6rem;
  margin-top: 0.8rem;
}

.app-button {
  background-color: var(--white-color);
  border: 1px solid #e1e4e5;
  border-radius: 4px;
  padding: 1.6rem 3.2rem;
  line-height: 1.33;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all ease-in-out 0.25s;
}
.app-button:hover {
  background-color: var(--background-color);
}

.app-button.is-mobile {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;

  color: var(--primary-blue-color);
  text-transform: uppercase;
  border: 1px solid #182cc0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.33;
  transition: all ease-in-out 0.25s;
}

.app-button.is-mobile:hover {
  background-color: var(--background-color);
  border: 1px solid #e1e4e5;
}

/* ************** Offers (Products) Section ************** */
.product-card__img {
  object-fit: cover;
}

.product-card__teaser {
  overflow: hidden;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.product-card__desc {
  font-size: 1.4rem;
}

/* ************** Home Hero Section (Second) ************** */
.banner__wrapper--secondary {
  background-image: url(../images/banner-2.png);
}

.banner__wrapper--secondary {
  position: relative;
}

.banner__wrapper--secondary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0000004c;
  border-radius: 6px;
}

.banner__content {
  position: relative;
  z-index: 5;
}

.banner__button--secondary {
  width: 13.4rem;
}

/* ************** Awards Section ************** */
.section__awards {
  padding: 6rem 0;
}

.award-card {
  height: 100%;
  background-color: var(--white-color);
  border: 1px solid #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: all ease-in-out 0.4s;
}

.award-card:hover {
  border-color: #eef1f1;
  box-shadow: 0 36px 40px -15px rgba(12, 43, 67, 0.07);
}

.award-card__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 2.8rem;
}

.award__logo-wrapper {
  height: 5.2rem;
}

.award__logo {
  width: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: 0 50%;
}

.award-card__title {
  color: var(--dark-text-color);
  font-size: inherit;
  line-height: 3rem;
}

.award-card__text {
  font-size: 1.4rem;
}

/* ************** Footer Section  ************** */
.footer {
  padding-top: 6rem;
}

.footer__top-component {
  background-color: var(--white-color);
  padding: 4.5rem 0 5rem 0;
}

.footer__top-component-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__logo-mobile {
  display: none;
}

.footer__content {
  background-color: var(--white-color);
  padding-bottom: 4.5rem;
}

.footer__content__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1.6rem;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
}

.footer__dropdown {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__dropdown__name {
  color: var(--dark-text-color);
  font-weight: 700;
}

.footer__dropdown__arrow {
  display: none;
  align-items: center;
  transition: all ease 0.8s;
}

.footer__dropdown__list-wrapper {
  transition: height ease 0.8s;
}

.footer__dropdown__list-wrapper.open {
  height: 11.4rem;
}

.footer__dropdown__arrow.open {
  transform: rotate(180deg);
}

.footer__dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer__dropdown__text {
  color: var(--text-color);
  transition: all ease-in-out 0.25s;
}

.footer__dropdown__text:hover {
  color: var(--primary-blue-color);
}

.footer__header {
  color: var(--dark-text-color);
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.footer__contact__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer__contact__item:hover {
  text-decoration: underline var(--text-color);
}

.footer__contact__icon {
  display: flex;
  align-items: center;
  height: 100%;
}

.footer__contact__text {
  color: var(--text-color);
  font-weight: 500;
  font-style: normal;
}

.footer__contact__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 3.2rem 0;
}

.footer__social-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer__social__icon {
  display: flex;
}

.footer__social-link {
  width: 4rem;
  height: 4rem;
  background-color: var(--background-color);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.25s;
}

.footer__social-link path {
  transition: all ease-in-out 0.25s;
}

.footer__social-link:hover {
  background-color: #eee;
}
.footer__social-link:hover path {
  fill: var(--primary-blue-color);
}

.footer__bottom-component {
  padding: 2.8rem 0;
  font-size: 1.2rem;
  background-color: #fff;
  border-top: 1px solid #eef1f1;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.footer__bottom-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer__bottom-logo {
  display: flex;
}

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

/* ************** Button Menu ************** */
.button-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  z-index: 50;
  bottom: 4rem;
  right: 4rem;
}

.button-menu__trigger {
  background-color: var(--menu-button-bg-color);
}

.button-menu__trigger,
.button-menu__button {
  width: 5.6rem;
  height: 5.6rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 0.25s;
}

.button-menu__trigger:hover {
  background-color: rgba(66, 74, 77, 0.8);
}

.button-menu__trigger__icon {
  display: flex;
}

.buttons {
  display: none;
  flex-direction: column;
  gap: 1.2rem;
  transition: all ease-in-out 0.25s;
}

.buttons.open {
  display: flex;
}

.button-menu__button {
  background-color: #fff;
  border: 1px solid #eef1f1;
  padding: 1.6rem;
  transition: all 0.25s ease-in-out;
  position: relative;
}

.button-menu__button path {
  transition: all 0.25s ease-in-out;
}

.button-menu__button:hover {
  background-color: var(--hover-button-color);
}
.button-menu__button:hover .button-menu__tooltip {
  display: flex;
}
.button-menu__button:active {
  background-color: var(--active-button-color);
}

.button-menu__button:hover .button-menu__icon path {
  fill: var(--white-color);
}

.button-menu__icon {
  display: flex;
}

.button-menu__tooltip {
  display: none;
  position: absolute;
  right: 6.8rem;
  color: #fff;
  background-color: #424a4d;
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  font-size: 1.4rem;
  transition: all 0.25s ease-in-out;
  white-space: nowrap;
}

.button-menu__tooltip-arrow {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: -0.75rem;
}

.open-icon {
  display: flex;
}

.close-icon {
  display: none;
}

.button-menu__trigger.open .open-icon {
  display: none;
}
.button-menu__trigger.open .close-icon {
  display: flex;
}

/* ************** Cookies Component ************** */
.cookies-wrapper {
  position: fixed;
  z-index: 30;
  bottom: 6.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.cookies-wrapper.hidden {
  display: none;
}

.cookies-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--white-color);
  box-shadow: 0px 36px 40px -15px rgba(12, 43, 67, 0.07);
  border-radius: 6px;
  max-width: 73rem;
  width: 90%;
  padding: 2.4rem 3.2rem;
}

.arrow-link {
  flex-shrink: 0;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.4;
  font-size: 1.4rem;
  text-decoration: none;
  transition: color 0.25s ease-in-out;
  display: flex;
  gap: 0.6rem;
}

.cookies__icon {
  display: flex;
}