@import url("./reset.css");
@import url("./colors.css");
@import url("./buttons.css");
@import url("./typography.css");

@import url("./sections/head.css");
@import url("./sections/about.css");
@import url("./sections/advantages.css");
@import url("./sections/download.css");
@import url("./sections/team.css");
@import url("./sections/faq.css");
@import url("./sections/footer.css");

body {
  background: var(--gray-100);
  background-size: cover;
  text-align: start;
  font-family: "Inter", sans-serif;
  color: var(--black);
}

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

@media only screen and (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding: 0 48px;
  }

  .download-inner-content {
    flex: 2;
  }

  .download-inner-image {
    flex: 1;
  }

  .slider-card:first-child {
    margin-left: 48px;
  }

  .slider-card:last-child {
    margin-right: 48px;
  }
}

@media only screen and (max-width: 1024px) {
  .about-inner {
    flex-direction: column-reverse;
    align-items: center;
  }

  .phones {
    max-width: 100%;
  }

  .download-inner {
    flex-direction: column;
    align-items: center;
  }

  .phone {
    padding-left: 48px;
  }

  .team-header {
    flex-direction: column;
    align-items: end;
    gap: 32px;
  }

  .arrow-btn {
    margin-left: 0;
    margin-right: 16px;
  }
}

@media only screen and (max-width: 768px) {
  .advantages-header p {
    max-width: 100%;
  }

  .advantages-items {
    flex-direction: column;
    justify-content: flex-start;
  }

  .team-buttons {
    display: none;
  }
}

@media only screen and (max-width: 576px) {
  .container {
    padding: 0 24px;
  }

  h1 {
    font-size: 32px;
    line-height: 42px;
  }

  h2 {
    font-size: 24px;
    line-height: 38px;
  }

  h3 {
    font-size: 18px;
    line-height: 26px;
  }

  p {
    font-size: 17px;
    line-height: 23px;
  }

  .hero,
  .about,
  .advantages,
  .download,
  .team,
  .faq,
  .footer {
    padding: 48px 0;
  }

  /* head section */

  .hero-btn {
    display: inline-block;
  }

  .header-btn {
    display: none;
  }

  .header {
    padding: 24px 0;
  }

  .hero-text {
    padding-bottom: 32px;
  }

  .hero-banner {
    height: 50vh;
  }

  /* about section */

  .point-header {
    display: flex;
    align-items: start;
    margin-bottom: 4px;
  }

  .image,
  .how-it-works {
    padding-right: 0;
  }

  .phones {
    min-width: 100%;
  }

  /* advantages section */

  .advantages-items {
    padding-top: 32px;
    gap: 48px;
  }

  .advantages-item-text {
    padding: 24px 0 0 0;
  }

  /* download section */

  .download-inner {
    gap: 24px;
  }

  .download-inner-content-header,
  .download-inner-content-labels {
    padding: 24px 16px;
  }

  .download-inner-image {
    padding: 0 16px;
  }

  /* team section */

  .slider-card:first-child {
    margin-left: 24px;
  }

  .slider-card:last-child {
    margin-right: 24px;
  }

  /* faq section */

  .faq h2 {
    margin-bottom: 24px;
  }

  .accordion .content-box .label {
    padding: 16px;
  }

  .accordion .content-box .label h4 {
    max-width: 90%;
  }

  .accordion .content-box.active .content {
    padding: 0 16px 16px 16px;
  }

  /* footer */

  .footer-content {
    flex-direction: column;
    margin-bottom: 64px;
  }

  .logo-mail,
  .text-button-item {
    margin-bottom: 48px;
  }

  .logo-mail,
  .text-buttoms {
    max-width: 100%;
  }

  .footer-captions {
    flex-direction: column;
    align-items: start;
  }

  .footer-captions-inner {
    display: block;
  }

  .caption {
    margin-bottom: 24px;
  }

  .privacy a {
    display: block;
    margin-bottom: 24px;
  }

  .privacy {
    margin-bottom: 24px;
  }
}

.privacy-policy {
  padding: 80px 0;
}

.privacy-policy .date {
  color: var(--gray-500);
  margin: 32px 0;
}

.privacy-policy section {
  margin: 100px 0;
}

.privacy-policy li {
  font-size: inherit;
}

.privacy-policy section h2 {
  margin: 24px 0;
}

.privacy-policy section h4,
.privacy-policy section h5 {
  margin: 8px 0;
}

.privacy-policy section a {
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}

.privacy-policy section > a {
  display: block;
  margin: 24px 0;
  color: var(--black);
  text-decoration: underline;
}