:root {
  --font-family: "Open Sans", "Muller", sans-serif;
  --color-main: #000000;
  --color-contrast: #ffffff;
  --color-brend: rgb(158, 23, 106);
  --color-purple: rgb(241, 27, 159);
  --color-text: rgb(52, 52, 52);
  --color-title: rgb(143, 27, 112);
  --gap: 30px;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.body {
  font-family: "GothamPro", Arial, Helvetica, sans-serif;
}

.body-wraper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.container {
  max-width: 1740px;
  margin: 0 auto;
  padding: 0 15px;
  container-type: inline-size;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

p {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  color: var(--color-title);
}

img {
  max-width: 100%;
}

.btn-reset {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visually-hiden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

@font-face {
  font-family: "GothamPro";
  src: local("GothamPro"), url("../fonts/gothampro.woff2") format("woff2"),
    url("../fonts/gothampro.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamPro";
  src: local("GothaProBold"),
    url("../fonts/gothampro_bold.woff2") format("woff2"),
    url("../fonts/gothampro_bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.section-pink {
  color: var(--color-contrast);
  background-image: linear-gradient(
    100deg,
    rgb(143, 27, 112) 0%,
    rgb(206, 9, 83) 100%
  );
}

.title {
  font-size: 50px;
  line-height: 1.2;
  text-align: center;
}

.subtitle {
  font-size: 30px;
  color: var(--color-text);
  margin-bottom: var(--margin-bottom);
}

.descr {
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-text);
}

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

.logo__wrap {
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo {
  display: block;
}

.logo__img {
  width: 9vw;
}

.header__burger-btn {
  display: none;
  position: relative;
  width: 40px;
  height: 60px;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 2;
  cursor: pointer;
}

.header__burger-btn span {
  display: block;
  position: absolute;
  width: 40px;
  height: 3px;
  left: 5px;
  background-color: rgb(158, 23, 106);
  transition: background-color 0.3s, opacity 0.3s, transform 0.5s;
  will-change: transform;
}

.header__burger-btn:hover span {
  background-color: rgb(124, 9, 80);
}

.header__burger-btn span:nth-child(1) {
  transform: translateY(-10px);
}

.header__burger-btn span:nth-child(2) {
}

.header__burger-btn span:nth-child(3) {
  transform: translateY(10px);
}

.header.open .header__burger-btn span {
  background-color: white;
}

.header.open .header__burger-btn span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.header.open .header__burger-btn span:nth-child(2) {
  opacity: 0;
}

.header.open .header__burger-btn span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

.menu__list {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu__link {
  display: block;
  padding: 45px 25px;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-brend);
  background-color: transparent;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .menu__link:focus-visible {
    color: var(--color-contrast);
    background-color: var(--color-brend);
  }

  .menu__link:hover {
    color: var(--color-contrast);
    background-color: var(--color-brend);
  }

  .menu__link:active {
    color: var(--color-contrast);
    background-color: var(--color-brend);
  }
}

.header.open .menu {
  transform: translateX(-100%);
  visibility: visible;
}

.hero {
  background-image: url(../img/hero_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  mask: url(../img/mask_bottom.png);
  mask-size: cover;
  mask-position: bottom;
  mask-repeat: no-repeat;
  aspect-ratio: 16 / 9;
}

.hero__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 100px;
  position: relative;
}

.logo__link-smf {
  position: absolute;
  top: 50px;
  right: 50px;
}

.logo__link {
  transition: transform 0.3s ease-in-out, drop-shadow 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .logo__link:focus-visible {
    filter: drop-shadow(0 0 20px rgb(245, 242, 244));
  }

  .logo__link:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px rgb(245, 242, 244));
  }

  .logo__link:active {
    filter: drop-shadow(0 0 30px rgb(245, 242, 244));
  }
}

.brands__img {
  object-position: center;
}

.app___wrap {
  display: none;
}

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 50px 30px;
  gap: 30px;
}

.about .descr {
  text-align: center;
}

.mission {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-mission {
  padding: 20px;
}
.mission__wrap {
  min-height: 400px;
  justify-content: center;
}

.mission .descr {
  color: var(--color-contrast);
  text-align: center;
}

.mission .title {
  color: var(--color-contrast);
}

.benefit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 50px 30px;
  gap: 30px;
}

.benefit__bg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.benefit__img {
  object-fit: cover;
}

.benefit__info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.technical {
  display: flex;
  align-items: center;
  justify-content: center;
}

.technical__list {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 50px 30px;
}

.block {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 5px;
}

.technical__item {
  display: grid;
  grid-template-columns: 1fr 10fr;
  align-items: center;

  padding: 30px 30px 30px 50px;
  gap: 20px;
}

.technical__item-bg {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
}

.technical__item-title {
  display: flex;
  grid-row: 1 / 5;
  grid-column: 1 / 3;
}

.technical__item-bg-1 {
  grid-column: 3 / 5;
}

.technical__item-bg-2 {
  grid-column: 3 / 5;
}

.technical__item-bg-3 {
  grid-column: 3 / 5;
}

.technical__item-bg-4 {
  grid-column: 3 / 5;
}

.technical .title {
  color: var(--color-contrast);
}

.gallery {
  padding: 50px;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 700px;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-contrast);
}

.swiper-pagination-bullet-active {
  background-color: var(--color-brend);
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.store {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  gap: 30px;
}

.store__link {
  display: block;
  transition: transform 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .store__link:focus-visible {
    transform: scale(1.1);
  }

  .store__link:hover {
    transform: scale(1.1);
  }

  .store__link:active {
    transform: scale(1.1);
  }
}

.footer__container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.map-wrap {
  grid-area: 1 / 1 / 6 / 13;
}
.logo__block {
  grid-area: 6 / 1 / 8 / 4;
}

.contacts-block {
  grid-area: 4 / 9 / 8 / 13;
}

.map-wrap {
  grid-area: 1 / 1 / 5 / 13;
}
.logo__block {
  grid-area: 5 / 1 / 8 / 6;
}
.contacts-block {
  grid-area: 4 / 8 / 8 / 13;
}

.lic__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lic {
  color: grey;
}

.logo__block {
  display: flex;
  align-items: center;
  padding: 30px;
}

.logo__img-footer {
  width: 15vw;
}

.map-wrap {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.social {
  display: flex;
  gap: 30px;
}

.social__link svg path {
  fill: var(--color-contrast);
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;
}

.social__link {
  display: block;
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;
}

.social__link svg path {
  transition: fill 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .social__link:focus-visible {
    transform: scale(1.1);
  }

  .social__link:focus-visible svg path {
    fill: #660a30;
  }

  .social__link:hover {
    transform: scale(1.1);
  }

  .social__link:hover svg path {
    fill: #660a30;
  }

  .social__link:active {
    transform: scale(1.1);
  }

  .social__link:active svg path {
    fill: #660a30;
  }
}

.contacts-block {
  padding: 30px 30px 15px 30px;
  border-radius: 32px;
  background-image: linear-gradient(
    100deg,
    rgb(143, 27, 112) 0%,
    rgb(206, 9, 83) 100%
  );
}

.contacts {
  display: flex;
  flex-direction: column;
}

.contacts__item {
  padding: 15px 30px;
  font-size: 24px;
}

.contacts__title {
  font-size: 40px;
  color: var(--color-contrast);
}

.contacts__link {
  display: grid;
  grid-template-columns: 1fr 7fr;
  align-items: center;
  gap: 20px;
  color: var(--color-contrast);
  transition: transform 0.3s ease-in-out, drop-shadow 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .contacts__link:focus-visible {
    filter: drop-shadow(0 0 30px rgb(224, 164, 201));
  }

  .contacts__link:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px rgb(243, 240, 242));
  }

  .contacts__link:active {
    filter: drop-shadow(0 0 30px rgb(243, 240, 242));
  }
}

.bg1 {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46px" height="36px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M44.515,27.214 L41.422,24.413 L32.381,16.230 L41.422,6.739 L41.421,6.721 L43.163,4.897 L44.385,3.607 L44.404,3.607 C44.849,4.418 45.127,5.358 45.127,6.353 L45.127,27.767 L44.515,27.214 ZM38.421,4.510 L24.508,19.124 C23.656,20.008 22.137,20.008 21.285,19.124 L7.372,4.510 L7.354,4.510 L5.353,2.390 L5.317,2.354 L4.224,1.192 C4.854,0.952 5.520,0.824 6.224,0.824 L39.569,0.824 C40.273,0.824 40.959,0.952 41.570,1.192 L40.477,2.354 L38.421,4.510 ZM13.412,16.230 L4.372,24.413 L1.278,27.214 L0.667,27.767 L0.667,6.353 C0.667,5.357 0.944,4.418 1.408,3.606 L2.630,4.896 L4.372,6.721 L13.412,16.230 ZM4.372,29.389 L15.969,18.903 L18.599,21.667 C19.711,22.828 21.285,23.491 22.897,23.491 C24.509,23.491 26.083,22.828 27.195,21.667 L29.825,18.903 L41.422,29.389 L42.033,29.941 L44.515,32.171 L44.515,32.190 L44.516,32.190 C43.608,33.996 41.719,35.212 39.570,35.212 L6.225,35.212 C4.076,35.212 2.186,33.996 1.279,32.190 L3.761,29.941 L4.372,29.389 Z"/></svg>');

  background-repeat: no-repeat;
  background-position-y: center;
  padding-left: 85px;
}

.bg2 {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45px" height="61px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M40.095,35.898 C33.529,45.326 26.589,55.291 23.685,59.461 C23.365,59.919 22.840,60.193 22.278,60.193 C21.718,60.193 21.192,59.919 20.873,59.461 C17.969,55.291 11.028,45.326 4.462,35.899 C0.766,30.592 -0.501,23.979 0.973,17.693 C2.448,11.406 6.527,6.032 12.203,2.898 C12.206,2.897 12.209,2.894 12.212,2.893 C18.472,-0.563 26.085,-0.563 32.346,2.893 C32.349,2.894 32.351,2.897 32.354,2.898 C38.030,6.032 42.109,11.406 43.584,17.693 C45.058,23.979 43.791,30.592 40.095,35.898 ZM22.279,8.797 C14.731,8.797 8.603,14.889 8.603,22.392 C8.603,29.895 14.731,35.988 22.279,35.988 C29.827,35.988 35.956,29.895 35.956,22.392 C35.956,14.889 29.827,8.797 22.279,8.797 ZM22.279,30.890 C17.552,30.890 13.721,27.086 13.721,22.393 C13.721,17.699 17.552,13.895 22.279,13.895 C27.005,13.895 30.837,17.699 30.837,22.393 C30.837,27.086 27.005,30.890 22.279,30.890 Z"/></svg>');

  background-repeat: no-repeat;
  background-position-y: center;
  padding-left: 85px;
}

.social__svg {
  width: 60px;
  height: 60px;
}