@import "./fonts.css";

/* Variables */
:root {
  /* Colors */
  --text-title: #1a1a1a;
  --text-main: #333333;
  --text-light: #6f6f6f;
  --text-white: #ffffff;
  --text-placeholder: #d8d8d8;
  --accent-1: #0001fa;
  --accent-2: #005001;
  --accent-3: #6667fc;
  --accent-4: #cbc000;
  --gradient-green: #00b602;
  --gradient-yellow: #656000;
  --gradient-blue: #000194;
  --button-text-light: #eeeeee;
  --button-text-dark: #333333;
  --button-disabled: #dbdbdb;
  --border-valid: #68f468;
  --border-invalid: #e0d966;

  /* Fonts */
  --ff-main: "Roboto Flex", sans-serif;

  /* Paddings */
  --p-xxs: 0.375rem; /* 6px */
  --p-xs: 0.5rem; /* 8px */
  --p-s: 0.75rem; /* 12px */
  --p-m: 1rem; /* 16px */
  --p-r: 1.5rem; /* 24px */
  --p-l: 2rem; /* 32px */
  --p-2l: 3rem; /* 48px */
  --p-xl: 4rem; /* 64px */
  --p-xxl: 5rem; /* 80px */

  /* Margins */
  --m-xs: 0.5rem; /* 8px */
  --m-s: 0.625rem; /* 10px */
  --m-r: 0.75rem; /* 12px */
  --m-m: 1rem; /* 16px */
  --m-l: 1.5rem; /* 24px */
  --m-2l: 2rem; /* 32px */
  --m-xl: 3rem; /* 48px */
  --m-xxl: 4rem; /* 64px */

  /* Other root-level rules */
  scroll-behavior: smooth;
  scroll-padding-top: var(--p-l);
}

/* Debug */
/* *,
*::before,
*::after {
  outline: 1px solid rgba(255, 0, 0, 0.5);
} */

/* General */
.page__body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-main);
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  color: var(--text-main);
  letter-spacing: 0.02rem;
  text-wrap: pretty;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* Added for better compatibility */
}

.section {
  position: relative;
  padding-top: var(--p-xl);
  padding-bottom: var(--p-xl);
}

.container {
  max-width: 30rem;
  margin: 0 auto;
  padding-inline: var(--p-m);
}

.section__title {
  margin: 0;
  margin-bottom: var(--m-m);
  font-weight: 600;
  font-size: 2rem;
  color: var(--text-title);
  line-height: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section__link:link,
.section__link:visited {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: inherit;
  line-height: 100%;
  color: var(--accent-1);
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.section__button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--m-l);
  padding: var(--p-m) var(--p-l);
  border: none;
  border-radius: 1rem;
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
  line-height: 100%;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0px 0px 60px 0px rgba(255, 255, 255, 0.14),
    0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),
    0px 3px 12px -3px rgba(0, 0, 0, 0.24),
    1.125px 1.8px 11.6px 0px rgba(209, 229, 255, 0.22) inset,
    0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68) inset,
    -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08) inset,
    0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07) inset,
    0px 0px 0.95px 0px rgba(242, 242, 255, 0.02) inset;
  backdrop-filter: blur(33.5px);
  transition: background-image 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,
    opacity 0.3s ease;
}

.section__divider {
  width: calc(100% - (var(--p-m) * 2));
  margin: 0 auto;
  border: 1px solid var(--text-placeholder);
}

.slider__container {
  padding-right: 0;
}

/* Header */
.page__header {
  position: fixed;
  left: 0;
  right: 0;
  padding-top: var(--p-m);
  background-color: var(--text-white);
  z-index: 999;
}

.page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo__text {
  margin: 0;
  font-size: 1rem;
}

.logo__image {
  display: none;
}

.nav__menu {
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 8.5rem;
  padding: var(--p-m) var(--p-l);
  column-gap: 1.5rem;
  background-color: var(--text-white);

  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 1.875rem;
  z-index: 999;
}

.nav__menu.open {
  display: flex;
}

.nav__item {
  margin-bottom: var(--m-r);
  line-height: 100%;
}

.nav__link {
  padding-block: var(--p-xxs);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-title);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.nav__link.active {
  color: var(--accent-1);
}

.buttons-wrapper {
  width: 1.875rem;
  height: 1.875rem;
}

.button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.button__open.closed {
  display: none;
}

.button__close {
  display: none;
}

/* Section About */
.about {
  padding-top: var(--p-l);
}

.about__container {
  position: relative;
}

.about__img {
  width: calc(100% + var(--p-m) * 2);
  height: auto;
  margin-left: calc(var(--p-m) * -1);
  margin-right: calc(var(--p-m) * -1);
  vertical-align: bottom;
}

.about__content {
  padding-top: var(--p-l);
}

/* Section Book */
.desktop-slider {
  display: none;
}

.book__image-wrapper {
  width: calc(100% - var(--p-m) * 2);
  height: 20.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
}

.book__image {
  max-width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.section__button-wrapper {
  display: flex;
}

.section__button_order {
  flex-grow: 1;
  color: var(--button-text-light);
  background-image:
    linear-gradient(
      0deg,
      var(--accent-2, #005001) 0%,
      var(--accent-2, #005001) 100%
    ),
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(224, 237, 255, 0.11) 100%
    ),
    linear-gradient(
      317deg,
      rgba(255, 255, 255, 0.3) 17.24%,
      rgba(255, 255, 255, 0) 58.62%,
      rgba(217, 235, 255, 0.14) 86.21%
    ),
    radial-gradient(
      38.46% 38.46% at 11.54% 19.23%,
      rgba(255, 235, 255, 0.05) 0%,
      rgba(229, 255, 240, 0.04) 70%,
      rgba(240, 240, 255, 0) 100%
    ),
    radial-gradient(
      20% 20% at 0% 0%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(250, 250, 255, 0.01) 30%,
      rgba(255, 250, 250, 0.01) 60%,
      rgba(252, 252, 255, 0) 100%
    );
  border: 1.2px solid rgba(0, 80, 1, 0.2);
}

.book .section__button_review {
  display: none;
}

/* Section Book-slider */
.book-slider {
  padding-top: var(--p-s);
  padding-bottom: var(--p-s);
}

.swiper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.swiper-slide {
  flex: 0 0 auto;
  width: 18.125rem;
  border: 1px solid var(--button-disabled);
  user-select: none;
}

.swiper-slide img {
  vertical-align: bottom;
}

/* Section Review */
.review {
  padding-bottom: 0;
}

.review__container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.review__title {
  flex-basis: 100%;
}
.review__text {
  /* order: 2; */
  margin-top: var(--m-m);
}

.review__swiper {
  order: 1;
}

.review__desktop-slider {
  order: 3;
}

/* Section Feedback */
.feedback {
  padding-bottom: var(--p-l);
}

.feedback__list {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 1rem;
  align-items: stretch;
}

.feedback__item {
  flex-grow: 0;
  flex-shrink: 0;
  width: calc(17.5rem - 2rem);
  padding: var(--p-m);
  border-radius: 1.25rem;
  border: 1px solid var(--text-placeholder);
}

.feedback__content {
  margin: 0;
  font-size: 0.875rem;
  line-height: 150%;
  letter-spacing: 0.0175rem;
}

.feedback__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.625rem;
  /* margin-bottom: 1rem; */
}

.feedback__avatar {
  width: 2.875rem;
  height: 2.875rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-white);
  border-radius: 50%;
}

.feedback__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.feedback__author-name {
  display: flex;
  flex-wrap: wrap;
}

.feedback__position {
  max-width: 100%;
  margin: 0;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: normal;
}

.feedback__text {
  margin: 0;
}

.feedback .section__button_order {
  display: none;
}

.section__button_review {
  color: var(--button-text-dark);
  border-radius: 1rem;
  border: 1.2px solid rgba(203, 192, 0, 0.2);
  background-image: linear-gradient(
      0deg,
      var(--accent-4, #cbc000) 0%,
      var(--accent-4, #cbc000) 100%
    ),
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(224, 237, 255, 0.11) 100%
    ),
    linear-gradient(
      317deg,
      rgba(255, 255, 255, 0.3) 17.24%,
      rgba(255, 255, 255, 0) 58.62%,
      rgba(217, 235, 255, 0.14) 86.21%
    ),
    radial-gradient(
      38.46% 38.46% at 11.54% 19.23%,
      rgba(255, 235, 255, 0.05) 0%,
      rgba(229, 255, 240, 0.04) 70%,
      rgba(240, 240, 255, 0) 100%
    ),
    radial-gradient(
      20% 20% at 0% 0%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(250, 250, 255, 0.01) 30%,
      rgba(255, 250, 250, 0.01) 60%,
      rgba(252, 252, 255, 0) 100%
    );
}

/* Section FAQs */
.faqs__image-wrapper {
  display: none;
}

.accordion__button {
  position: relative;
  padding-block: var(--p-r);
  padding-right: 2.25rem;
  font-weight: 600;
  line-height: 100%; /* 16px */
  color: var(--text-main);
  list-style: none;
  cursor: pointer;
  border-top: 1px solid var(--button-disabled);
}

.accordion__button::-webkit-details-marker {
  display: none;
}

.accordion__button::after {
  content: url(../images/decor/open.svg);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease, background-color 0.3s ease, content 0.3s ease;
}

details[open] .accordion__button::after {
  transform: translateY(-50%) rotate(45deg);
}

.accordion__text {
  margin: 0;
  padding-bottom: var(--p-r);
  padding-inline: 1rem;
  font-weight: 500;
  line-height: 150%;
  color: var(--text-light);
}

.see_all {
  margin-top: 1rem;
  color: var(--accent-3);
}

.section__button_ask,
.section__button_service {
  border: 1.2px solid rgba(0, 1, 250, 0.02);
  color: var(--button-text-light);
  background-image: linear-gradient(
      0deg,
      var(--accent-1, #0001fa) 0%,
      var(--accent-1, #0001fa) 100%
    ),
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(224, 237, 255, 0.11) 100%
    ),
    linear-gradient(
      317deg,
      rgba(255, 255, 255, 0.3) 17.24%,
      rgba(255, 255, 255, 0) 58.62%,
      rgba(217, 235, 255, 0.14) 86.21%
    ),
    radial-gradient(
      38.46% 38.46% at 11.54% 19.23%,
      rgba(255, 235, 255, 0.05) 0%,
      rgba(229, 255, 240, 0.04) 70%,
      rgba(240, 240, 255, 0) 100%
    ),
    radial-gradient(
      20% 20% at 0% 0%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(250, 250, 255, 0.01) 30%,
      rgba(255, 250, 250, 0.01) 60%,
      rgba(252, 252, 255, 0) 100%
    );
}

/* Section Services */
.section__heading {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1rem;
}

.services__image-wrapper {
  display: none;
}

.hgroup__image-wrapper {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
}

.section__heading_image {
  display: block;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.order__input,
.order__message {
  width: 100%;
  padding: var(--p-xs) var(--p-xs);
  border: 1px solid var(--text-placeholder);
  border-radius: 0.25rem;
  color: var(--text-main);
  box-sizing: border-box;
}

.order__input:focus,
.order__message:focus {
  outline: none;
  border-color: var(--button-disabled);
  box-shadow: 0 0 0 2px rgba(0, 1, 250, 0.2);
}

.order__input:valid,
.order__message:valid {
  border-color: var(--border-valid);
}

.order__input:focus:invalid,
.order__message:focus:invalid {
  border-color: var(--border-invalid);
}

::placeholder {
  color: var(--button-disabled);
}

output {
  display: block;
  text-align: right;
  color: var(--button-disabled);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 150%; /* 21px */
  letter-spacing: 0.0175rem;
}

.chars-amount {
  color: var(--text-light);
}

.section__button_service {
  flex-grow: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  border-radius: 1rem;
}

.section__button_service:disabled {
  border: none;
  box-shadow: none;
  border: 1px solid var(--button-disabled);
  background: var(--button-disabled);
  cursor: not-allowed;
}

.section__button_service:disabled:hover {
  background: var(--button-disabled);
  box-shadow: none;
}

/* Section Courses */
.courses {
  padding-bottom: var(--p-l);
}

.courses .section__heading {
  padding-bottom: var(--p-xs);
}

.courses__image-wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: var(--p-l);
}

.construction_image {
  display: block;
  width: 12.5rem;
  height: 12.5rem;
  margin: 0 auto;
}

/* Footer */
.page__footer {
  padding-top: var(--p-l);
  padding-bottom: var(--p-xs);
  background-color: var(--text-main);
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-l);
}

.logo__link_footer {
  display: block;
  width: 13.5rem;
  margin: 0 auto;
  padding: var(--p-xs);
  background: white;
  box-sizing: border-box;
}

.link_policy:link,
.link_policy:visited {
  color: var(--text-white);
  text-decoration: none;
}

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--p-m);
}

.socials__item {
  width: 3.125rem;
  height: 3.125rem;
}

.socials__link {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.copyright {
  margin: 0;
  color: var(--text-white);
  font-size: 0.875rem;
  letter-spacing: 0.0175rem;
}

/* Policy Page */
.policy__content {
  padding-top: var(--p-xl);
  padding-bottom: var(--p-l);
}

.policy__content .section__title {
  display: block;
  padding-bottom: var(--p-m);
  border-bottom: 2px solid var(--text-title);
}

/* Media Queries */
@media (min-width: 1200px) {
  /* General */
  :root {
    scroll-padding-top: 0;
  }
  
  .page__body {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.03rem;
  }

  .container {
    max-width: 90rem;
    padding-inline: var(--p-r);
  }

  .section__title {
    font-size: 2.25rem;
    line-height: 130%;
    text-align: center;
  }

  .section__paragraph {
    margin-top: 0;
    margin-bottom: 0.625rem;
  }

  .section__paragraph:last-of-type {
    margin-bottom: 0;
  }

  .section__link:hover,
  .section__link:focus {
    color: var(--accent-1);
    opacity: 0.8;
  }

  .section__link:active {
    opacity: 0.5;
  }

  .section__button {
    display: inline-block;
    margin-top: var(--m-xxl);
    margin-right: var(--m-l);
    padding: var(--p-r) var(--p-2l);
    color: var(--button-text-light);
    border-radius: 1rem;

    box-shadow: 4px 4px 4px 0 rgba(0, 80, 1, 0.25),
      -4px -4px 4px 0 rgba(0, 0, 0, 0.25) inset,
      4px 4px 4px 0 rgba(255, 255, 255, 0.25) inset;
  }

  .section__button:hover,
  .section__button:focus {
    box-shadow: 4px 4px 4px 0 rgba(102, 103, 252, 0.25),
      -4px -4px 4px 0 rgba(0, 0, 0, 0.25) inset,
      4px 4px 4px 0 rgba(255, 255, 255, 0.25) inset;
  }

  .section__button:active {
    box-shadow: -4px -4px 4px 0 rgba(255, 255, 255, 0.25) inset,
      4px 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
  }

  /* Header */
  .page__header {
    padding-block: 1.5rem;
    position: relative;
  }

  .page__nav {
    display: flex;
    justify-content: flex-start;
  }

  .logo__text {
    display: none;
  }

  .logo__image {
    display: block;
    width: 16.5625rem;
    height: 6.5625rem;
    margin-right: 7.6875rem;
  }

  .nav__menu {
    display: flex;
    position: static;
  }

  .nav__item {
    margin-bottom: var(--m-xs);
    line-height: 100%;
  }

  .nav__link {
    letter-spacing: 0.025rem;
  }

  .nav__link:hover,
  .nav__link:focus {
    color: var(--accent-1);
    opacity: 0.8;
  }

  .nav__link:active {
    opacity: 0.5;
  }

  .nav__link.active {
    color: var(--accent-1);
  }

  .buttons-wrapper {
    display: none;
  }

  /* Section About */
  .about {
    padding-bottom: var(--p-xxl);
  }

  .about__container {
    display: flex;
  }

  .about__img {
    width: 37.5rem;
    margin: 0;
    margin-right: var(--p-r);
    object-fit: cover;
  }

  .about__content {
    padding-top: 0;
  }

  /* Section Book */
  .book {
    padding-top: var(--p-xxl);
    padding-bottom: var(--p-xl);
  }

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

  .book__image-wrapper {
    display: none;
  }

  .desktop-slider {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 0.5rem;
    min-width: 37.5rem;
    height: 49.75rem;
  }

  .slider-track {
    height: 100%;
    overflow: hidden;
  }

  .desktop-slider__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 3rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }

  .desktop-slider__button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .desktop-slider__button-image {
    object-fit: cover;
  }

  .desktop-slider__button-image_prev {
    transform: rotate(180deg);
  }

  .desktop-slider__wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.75rem;
    width: 400%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .slider-slide {
    flex: 0 0 34rem;
  }

  .book .section__link {
    display: none;
  }

  .section__button_order {
    background-image: linear-gradient(
      284deg,
      var(--accent-2, #005001) 0%,
      #00b602 100%
    );
  }

  .section__button_order:hover,
  .section__button_order:focus {
    background-image: linear-gradient(104deg, #4ce54f 0%, #158817 100%);
  }

  .section__button_order:active {
    background-image: none;
    background-color: var(--accent-2);
  }

  .section__button_review {
    flex-grow: 1;
    background-image: linear-gradient(
      104deg,
      var(--accent-4, #cbc000) 0%,
      #656000 100%
    );
  }

  .section__button_review:hover,
  .section__button_review:focus {
    background: linear-gradient(
      104deg,
      var(--accent-4-light, #e0d966) 0%,
      #7a7638 100%
    );
  }

  .section__button_review:active {
    background-image: none;
    background-color: var(--accent-4);
  }

  .book .section__button_review {
    display: inline-block;
  }

  /* Section Book-slider */
  .book-slider {
    display: none;
  }

  /* Section Review */
  .review {
    padding-bottom: var(--p-xl);
  }

  .review__container {
    flex-direction: row;
    align-items: center;
    column-gap: 3.5rem;
  }

  .review__text {
    order: initial;
    align-self: baseline;
    flex: 0 0 40%;
    margin-top: 170px;
  }

  .review__swiper {
    display: none;
  }

  .review__desktop-slider {
    order: initial;
    flex: 1 1 auto;
    /* min-width: 0;
    height: auto; */
  }

  .review__desktop-slider .slider-track {
    aspect-ratio: 544 / 796;
  }

  .review__desktop-slider .desktop-slider__wrapper {
    width: 300%;
  }

  .review__image {
    width: 100%;
    height: auto;
  }

  .review__desktop-slider .slider-slide__image {
    width: 100%;
    height: auto;
  }

  /* Section Feedback */
  .feedback {
    padding-bottom: var(--p-xl);
  }

  .feedback .slider__container {
    padding-right: 0;
  }

  .feedback .section__title {
    display: block;
    margin-bottom: var(--m-xxl);
  }

  .feedback__item {
    width: 18.25rem;
    padding: var(--p-r);
    border: 1px solid var(--text-placeholder);
    user-select: none;
    -webkit-user-select: none;
  }

  .feedback__author {
    /* margin-bottom: var(--m-l); */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 5.3125rem;
  }

  .feedback__avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 130%; /* 31.2px */
    letter-spacing: 0.03rem;
    color: var(--text-white);
  }

  .feedback__position {
    line-height: 130%;
    letter-spacing: 0.02rem;
  }

  .feedback__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.02rem;
  }

  .feedback .section__button_order {
    display: inline-block;
  }

  /* Section FAQs */
  .faqs {
    padding-bottom: var(--p-xxl);
  }

  .faqs .section__title {
    display: block;
    margin-bottom: var(--m-xxl);
  }

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

  .faqs__content {
    width: calc(50% - 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 64px;
  }

  .section__button_ask {
    align-self: flex-start;
    margin-top: 0;
    background-image: linear-gradient(
      104deg,
      var(--accent-1, #0001fa) 0%,
      #000194 100%
    );
  }

  .section__button_ask:hover,
  .section__button_ask:focus,
  .section__button_service:hover,
  .section__button_service:focus {
    background-image: linear-gradient(104deg, #6563ff 0%, #3d3b99 100%);
  }

  .section__button_ask:active,
  .section__button_service:active {
    background-image: none;
    background-color: var(--accent-1);
  }

  .faqs__image-wrapper {
    display: block;
    width: calc(50% - 1.5rem);
  }

  .faqs__image {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /* border-radius: 1rem;
    object-fit: cover; */
  }

  /* Section Services */
  .services {
    padding-top: var(--p-xxl);
  }

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

  .services__image-wrapper {
    display: block;
    width: 50%;
    height: auto;
    padding-top: 3.25rem;
  }

  .services__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
  }

  .services__content {
    width: 50%;
  }

  .services .section__heading {
    position: relative;
  }

  .services .section__heading::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    display: block;
    height: 0.125rem;
    background-color: var(--accent-1);
  }

  .services .section__title {
    display: block;
    width: 100%;
    color: var(--accent-1);
  }

  .services .section__lead {
    margin-top: var(--m-xs);
    margin-bottom: var(--m-xxl);
    color: var(--accent-1);
  }

  .hgroup__image-wrapper {
    display: none;
  }

  .order__field {
    margin: 0;
    margin-bottom: var(--m-2l);
  }

  .order__field:last-of-type {
    margin-bottom: 0;
  }

  .order__input,
  .order__message {
    padding: 0.625rem 0.625rem;
  }

  .section__button_service {
    max-width: 19.375rem;
  }

  /* Section Courses */
  .courses {
    padding-top: var(--p-xxl);
    padding-bottom: calc(var(--p-xl) * 2);
  }

  .courses__image-wrapper {
    display: none;
    height: 55.375rem;
    padding-top: 3.25rem;
  }

  .courses__image {
    vertical-align: bottom;
  }

  .courses .section__heading {
    position: relative;
  }

  .courses .section__heading::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    display: block;
    height: 0.125rem;
    background-color: var(--accent-1);
  }

  .courses .section__title {
    display: block;
    color: var(--accent-1);
  }

  .construction__image-wrapper {
    width: 33.75rem;
    height: 33.75rem;
    padding-top: var(--p-xl);
    margin: 0 auto;
  }

  .construction_image {
    width: 33.75rem;
    height: 33.75rem;
  }

  /* Footer */
  .page__footer {
    padding-top: var(--p-r);
    padding-bottom: var(--p-r);
  }

  .footer__container {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    grid-template-rows: 1fr 1fr;
    align-items: start;
    justify-items: center;
  }

  .logo__link_footer {
    display: none;
  }

  .link_policy {
    grid-column: 2 / span 1;
  }

  .link_policy:hover,
  .link_policy:focus {
    color: var(--text-white);
    opacity: 0.8;
  }

  .link_policy:active {
    opacity: 0.5;
  }

  .socials {
    grid-column: 3 / -1;
    grid-row: 1 / -1;
    flex-wrap: wrap;
  }

  .copyright {
    grid-column: 2 / span 1;
    align-self: end;
  }
}