@charset "UTF-8";
/* ======= Base Reset ======= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Убираем маркеры у списков */
ul,
ol {
  list-style: none;
}

/* Убираем подчёркивание у ссылок */
a {
  text-decoration: none;
  color: inherit;
}

/* Нормализация изображений */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Убираем жирность у заголовков по умолчанию */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: inherit;
}

/* Наследование шрифта для форм */
input,
button,
textarea,
select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

/* =========== Fonts ============ */
/* =========== Colors ============ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #222222;
}
body.stop {
  overflow-y: hidden;
}

.dark {
  background-color: #222222;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}

h1 {
  font-family: Oswald;
  font-size: 116px;
  font-style: normal;
  font-weight: 300;
  line-height: 132px; /* 113.793% */
  text-transform: uppercase;
}
@media screen and (max-width: 1440px) {
  h1 {
    font-size: clamp(68px, 116px - (1435px - 100vw) / 13.8541666667, 116px);
    line-height: clamp(80px, 132px - (1435px - 100vw) / 12.7884615385, 132px);
  }
}
@media screen and (max-width: 760px) {
  h1 {
    font-size: clamp(56px, 68px - (1435px - 100vw) / 55.4166666667, 68px);
    line-height: clamp(64px, 80px - (1435px - 100vw) / 41.5625, 80px);
  }
}

h2 {
  font-family: Oswald;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 125% */
  text-transform: uppercase;
}

h3 {
  font-family: Oswald;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  text-transform: uppercase;
}

h4 {
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-transform: uppercase;
}

input::-moz-placeholder {
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.popup__form button, .popup__form input, input::placeholder, .form-container input, .hero__intro, .hero__stat-text, p {
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.header__list .list-link {
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-transform: uppercase;
}

.hero__stat-item {
  font-family: Oswald;
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 54px; /* 112.5% */
  text-transform: uppercase;
}

.hero__side__arrow {
  font-family: Mulish;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

.card__description {
  font-family: Mulish;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
}

.footer__list-link, summary, .header__list .list-link {
  transition: all 0.2s;
}
@media (hover: hover) {
  .footer__list-link:hover, summary:hover, .header__list .list-link:hover {
    color: #FF3C3C;
  }
}
@media (hover: none) {
  .footer__list-link:active, summary:active, .header__list .list-link:active {
    color: #FF3C3C;
  }
}

.card__btn {
  transition: all 0.2s;
  cursor: pointer;
}
@media (hover: hover) {
  .card__btn:hover {
    color: #222222;
    background-color: #FF3C3C;
  }
}
@media (hover: none) {
  .card__btn:active {
    color: #222222;
    background-color: #FF3C3C;
  }
}

.container-header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  position: relative;
  z-index: 100;
}

.header__nav {
  transition: all 0.5s;
}
@media screen and (max-width: 770px) {
  .header__nav {
    position: fixed;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222222;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.header__nav.active {
  left: 0;
}

.header__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.header__list .list-link {
  color: white;
  text-transform: uppercase;
}
@media screen and (max-width: 770px) {
  .header__list {
    flex-direction: column;
    transform: translateY(25px);
    gap: 35px;
  }
}

.header__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 0;
  z-index: 100;
}
.header__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: white;
  transition: 0.3s;
}
.header__burger span:nth-child(1) {
  width: 12px;
}
.header__burger.active span:nth-child(1) {
  width: 20px;
  transform: rotate(45deg) translateY(5.5px);
}
.header__burger.active span:nth-child(2) {
  transform: rotate(-45deg) translateY(-5.5px);
}
@media screen and (max-width: 770px) {
  .header__burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
  }
}

.hero {
  height: clamp(758px, 862px - (1435px - 100vw) / 6.3942307692, 862px);
  display: block;
}
@media screen and (max-width: 710px) {
  .hero {
    height: 888px;
  }
}

.container-hero {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  color: white;
}
@media screen and (max-width: 770px) {
  .container-hero {
    gap: 20px;
  }
}
@media screen and (max-width: 710px) {
  .container-hero {
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
}

.hero__side__arrow {
  writing-mode: tb-rl;
  transform: rotate(180deg) translateX(-2px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-left: 23px;
}
.hero__side__arrow span {
  display: block;
  width: 1px;
  height: clamp(432px, 550px - (1435px - 100vw) / 5.6355932203, 550px);
  background-color: white;
}
@media screen and (max-width: 770px) {
  .hero__side__arrow {
    margin-right: 20px;
  }
}
@media screen and (max-width: 710px) {
  .hero__side__arrow {
    display: none;
  }
}

.hero__main-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-width: 740px;
}

.hero-main {
  margin: 160px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 40px;
}
@media screen and (max-width: 710px) {
  .hero-main {
    margin-top: 60px;
  }
}

.hero__stat-container {
  display: flex;
  gap: 60px;
}
.hero__stat-container span {
  width: 27px;
}
@media screen and (max-width: 710px) {
  .hero__stat-container {
    gap: 58px;
  }
}

.hero__stat-item {
  display: flex;
}

.hero__stat-text {
  text-transform: none;
  margin-top: 8px;
}

.scroll__container {
  width: 120px;
  display: flex;
  margin: 160px 0 0 0;
  gap: 8px;
}
.scroll__container path {
  transition: stroke 0.2s;
}
.scroll__container .hero__scroll {
  transition: color 0.2s;
}
@media (hover: hover) {
  .scroll__container:hover .scroll-path {
    stroke: #FF3C3C;
  }
  .scroll__container:hover .hero__scroll {
    color: #FF3C3C;
  }
}
@media screen and (max-width: 710px) {
  .scroll__container {
    display: none;
  }
}

.hero__second__photo-container {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1250px) {
  .hero__second__photo-container {
    display: none;
  }
}

.hero__second__img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero__main__photo-container {
  width: 280px;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
}
@media screen and (max-width: 710px) {
  .hero__main__photo-container {
    gap: 60px;
    padding: 0 0;
    align-self: end;
  }
}

.hero__main__photo-container img {
  width: 280px;
  height: auto;
  aspect-ratio: 3/4;
  align-self: stretch;
}
@media screen and (max-width: 710px) {
  .hero__main__photo-container img {
    width: 220px;
    align-self: end;
  }
}

.hero__intro {
  text-align: right;
  width: 220px;
}

.about {
  min-height: 628px;
}

.container-about {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 60px 20px;
}
@media screen and (max-width: 800px) {
  .container-about {
    flex-direction: column;
  }
}

.about-block {
  width: 33.3%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.about-block img {
  width: 100%;
}
@media screen and (max-width: 800px) {
  .about-block {
    width: 100%;
  }
  .about-block .about__third__block-img {
    display: none;
  }
}

.about__title-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portfolio {
  min-height: 794px;
}

.container-portfolio {
  overflow: hidden;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.portfolio__title-container {
  max-width: 360px;
  color: white;
}
.portfolio__title-container h2 {
  color: white;
  margin-bottom: 12px;
}
.portfolio__title-container p {
  width: 360px;
}
@media screen and (max-width: 390px) {
  .portfolio__title-container p {
    width: 340px;
  }
}

.portfolio__slider-container {
  position: relative;
  height: 654px;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.portfolio__slider {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  gap: 20px;
  align-items: center;
  width: calc(100% + 40px);
  padding: 0 20px;
}
.portfolio__slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.slider-side {
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  z-index: 100;
}
@media (hover: none) {
  .slider-side {
    display: none;
  }
}

#slider-left {
  left: 0;
}

#slider-right {
  right: 0;
}

.portfolio__slider-img:nth-child(1),
.portfolio__slider-img:nth-child(4),
.portfolio__slider-img:nth-child(8),
.portfolio__slider-img:nth-child(12) {
  width: 400px;
  height: 534px;
}

.portfolio__slider-img:nth-child(2),
.portfolio__slider-img:nth-child(6),
.portfolio__slider-img:nth-child(9) {
  width: 220px;
  height: 220px;
}

.portfolio__slider-img:nth-child(3),
.portfolio__slider-img:nth-child(7),
.portfolio__slider-img:nth-child(10),
.portfolio__slider-img:nth-child(11) {
  width: 280px;
  height: 374px;
}

.portfolio__slider-img:nth-child(5) {
  width: 280px;
  height: 374px;
  transform: translateY(-20px);
}

.portfolio__slider-img:nth-child(1),
.portfolio__slider-img:nth-child(8) {
  align-self: flex-end;
}

.portfolio__slider-img:nth-child(4),
.portfolio__slider-img:nth-child(7),
.portfolio__slider-img:nth-child(10),
.portfolio__slider-img:nth-child(12) {
  align-self: flex-start;
}

.price {
  min-height: 616px;
}

.container-price {
  display: flex;
  padding: 60px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.price__title-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.price__cards-container {
  width: 100%;
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
  .price__cards-container {
    gap: 20px;
  }
}

.price__card {
  border: 1px solid #222222;
  display: flex;
  width: 320px;
  height: 500px;
  padding: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.3s;
}
@media (hover: hover) {
  .price__card:hover {
    border: 1px solid #FF3C3C;
  }
  .price__card:hover .card__btn {
    background-color: #FF3C3C;
    color: #222222;
  }
}
@media (hover: none) {
  .price__card:active {
    border: 1px solid #FF3C3C;
  }
  .price__card:active .card__btn {
    background-color: #FF3C3C;
    color: #222222;
  }
}

.card__text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card__list-item {
  padding-left: 12px;
  position: relative;
}
.card__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #222222;
}

.card__button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.card__btn {
  padding: 18px 24px;
  width: 272px;
  background: #222222;
  transition: all 0.3s;
  font-family: Oswald;
  color: white;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-transform: uppercase;
}

.faq {
  min-height: 604px;
}

.container-faq {
  color: white;
  display: flex;
  padding: 60px 20px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
@media screen and (max-width: 1150px) {
  .container-faq {
    flex-direction: column;
  }
}

.faq__title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}

.faq__accordion {
  width: 680px;
}
@media screen and (max-width: 1150px) {
  .faq__accordion {
    width: 100%;
  }
}

details {
  border-bottom: 1px solid white;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
details[open] summary::after {
  content: "–";
}

.accordion-answer {
  padding-bottom: 20px;
  cursor: context-menu;
}

summary {
  padding: 17.5px 0;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Oswald;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  text-transform: uppercase;
}
summary::marker {
  content: "";
}
summary::after {
  content: "+";
  font-family: "Mulish";
  font-size: 32px;
  font-weight: normal;
  transition: all 0.3s ease;
}

::details-content {
  transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
  height: 0px;
  overflow: clip;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  [open]::details-content {
    height: auto;
  }
}
.container-input {
  width: 100%;
  display: flex;
  padding-top: 40px;
  padding-bottom: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.form-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.form-container input {
  font-family: "Oswald", sans-serif;
  border: 1px solid #222222;
  width: 380px;
  display: flex;
  height: 60px;
  max-width: 380px;
  padding: 0 12px;
}
@media screen and (max-width: 600px) {
  .form-container {
    flex-direction: column;
  }
  .form-container input, .form-container button {
    min-width: 100%;
  }
}
@media screen and (max-width: 420px) {
  .form-container input {
    width: 100%;
  }
}

input::-moz-placeholder {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

input::placeholder {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

input:input {
  border: 1px solid #FF3C3C;
  outline: none;
}

.contact-btn {
  width: 200px;
}
@media screen and (max-width: 900px) {
  .contact-btn {
    min-width: 200px;
  }
}

.container-footer {
  padding: 37px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.footer__list {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 600px) {
  .footer__list {
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
}

.footer__list-link {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  transition: all 0.3s;
}

.popup__overlay {
  opacity: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background: rgba(34, 34, 34, 0.6);
  transition: all 0.3s;
  z-index: -1;
}
.popup__overlay.active {
  opacity: 100;
  z-index: 150;
}

#popup {
  position: fixed;
  left: 200%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  min-height: 236px;
  padding: 60px 20px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s all;
  z-index: 200;
}
#popup.active {
  left: 50%;
}
@media screen and (max-width: 540px) {
  #popup {
    width: calc(100% - 40px);
  }
}

.popup__close {
  position: absolute;
  right: 8px;
  top: 18px;
  padding: 10px;
}
.popup__close span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #222222;
}
.popup__close span:nth-child(1) {
  transform: rotate(45deg) translateY(1.4px);
}
.popup__close span:nth-child(2) {
  transform: rotate(-45deg) translateY(-1.4px);
}

.popup__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  gap: 8px;
}
.popup__form h3 {
  padding-bottom: 4px;
  text-align: center;
}
.popup__form input {
  font-family: "Oswald", sans-serif;
  border: 1px solid #222222;
  width: 100%;
  display: flex;
  height: 60px;
  padding: 0 12px;
}
.popup__form button {
  font-family: Oswald;
  width: 100%;
  padding: 18px 20px;
  background-color: #222222;
  color: white;
  text-transform: uppercase;
}

input::-moz-placeholder {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

input::placeholder {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

input:hover {
  border: 1px solid #FF3C3C;
  outline: none;
}/*# sourceMappingURL=main.css.map */