/* 
  Extra large devices (less than 1400px)
*/
@media (max-width: 1399px) {
}

/* 
  Large devices (less than 1200px)
*/
@media (max-width: 1199px) {
}

/* 
  Medium devices (less than 992px)
*/
@media (max-width: 991px) {
  .container,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 710px;
  }
  .container-lg {
    padding-inline: 0;
  }
  h2 {
    font-size: 24px;
    line-height: normal;
  }

  .hero {
    padding-block: 200px 70px;
    background: linear-gradient(rgba(39, 55, 94, 0.6), rgba(39, 55, 94, 0.6)), url("../img/hero-bg.jpg") center/cover;
  }
  .hero::after {
    content: "";
    width: 100%;
    height: 346px;
    background: linear-gradient(180deg, rgba(39, 55, 94, 0.08) 0.18%, rgba(39, 55, 94, 0.8) 46.65%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .intro__subtitle {
    font-size: 16px;
  }
  .intro {
    padding-block: 32px 20px;
  }

  .benefit__top {
    padding-block: 57px 103px;
    clip-path: polygon(
      49.664% 5.076%,
      49.664% 5.076%,
      42.896% 4.937%,
      36.002% 4.56%,
      29.178% 4.005%,
      22.623% 3.331%,
      16.534% 2.598%,
      11.109% 1.864%,
      6.545% 1.19%,
      3.041% 0.635%,
      0.793% 0.259%,
      0% 0.12%,
      0% 99.947%,
      0% 99.947%,
      0.771% 99.71%,
      2.992% 99.064%,
      6.528% 98.113%,
      11.241% 96.958%,
      16.994% 95.701%,
      23.652% 94.445%,
      31.078% 93.29%,
      39.135% 92.339%,
      47.686% 91.693%,
      56.596% 91.456%,
      56.596% 91.456%,
      60.206% 91.592%,
      64.894% 91.962%,
      70.316% 92.507%,
      76.131% 93.168%,
      81.993% 93.888%,
      87.56% 94.609%,
      92.487% 95.27%,
      96.432% 95.815%,
      99.051% 96.185%,
      100% 96.321%,
      100% 0.202%,
      100% 0.202%,
      99.113% 0.339%,
      96.623% 0.709%,
      92.785% 1.255%,
      87.856% 1.918%,
      82.09% 2.639%,
      75.744% 3.36%,
      69.072% 4.023%,
      62.331% 4.569%,
      55.777% 4.939%,
      49.664% 5.076%
    );
  }

  .benefit__bottom-wrap {
    padding: 93px 44px 52px;
  }
  .benefit__bottom {
    transform: translateY(-66px);
    margin-bottom: -66px;
  }
  .steps {
    padding-block: 32px 50px;
  }
  .steps__card-thumb {
    height: 140px;
  }
  .disease-rate__wrapper {
    padding: 33px 36px 40px;
  }
  .disease-rate__card-wrap .disease-rate__card-content {
    gap: 0;
  }
  .how-it-work__content {
    width: 100%;
  }
  .how-it-work {
    padding-block: 32px;
  }
  .support__wrapper {
    padding: 32px 36px;
    gap: 32px;
  }
  .support__content {
    width: 100%;
  }
  .support__thumb {
    max-width: 412px;
  }
  .faq {
    padding-block: 55px;
  }
  .service__wrapper {
    padding: 70px 36px 94px;
  }
  .about {
    padding-block: 32px;
  }
  .about__certificates {
    margin-bottom: 32px;
    column-gap: 20px;
  }
  .footer {
    padding-bottom: 76px;
  }
}

/* 
  Small devices (less than 768px)
*/
@media (max-width: 767px) {
  .theme-btn {
    font-size: 16px;
    height: 38px;
    padding-inline: 12px;
  }
  .theme-btn--md {
    height: 68px;
  }
  .theme-btn--lg {
    height: 48px;
  }
  h1 {
    font-size: 32px;
    line-height: 1;
  }
  p,
  .para-style {
    font-size: 16px;
  }
  .para-style--sm {
    font-size: 10px;
    line-height: 2;
  }
  .section-subtitle {
    font-size: 14px;
  }
  .theme-text-btn {
    font-size: 16px;
  }
  .theme-text-btn svg {
    width: 16px;
  }
  .header__wrapper {
    height: 64px;
  }
  .header__logo img {
    width: 90px;
  }
  .header__logo {
    transform: translateY(16px);
  }
  .hero {
    padding-block: 176px 52px;
  }
  .hero::after {
    height: 234px;
  }
  .hero__desc {
    font-size: 16px;
  }
  .hero__content {
    max-width: 294px;
  }
  .intro {
    padding-block: 28px;
  }
  .benefit__top {
    clip-path: polygon(
      50.618% 4.874%,
      50.618% 4.874%,
      38.789% 4.56%,
      28.399% 4.087%,
      19.402% 3.499%,
      11.753% 2.843%,
      5.406% 2.163%,
      0.315% 1.505%,
      -3.565% 0.915%,
      -6.28% 0.437%,
      -7.875% 0.117%,
      -8.397% 0%,
      -8.397% 99.827%,
      -8.397% 99.827%,
      -7.918% 99.587%,
      -6.373% 98.936%,
      -3.601% 97.975%,
      0.561% 96.809%,
      6.272% 95.54%,
      13.696% 94.271%,
      22.993% 93.105%,
      34.325% 92.145%,
      47.854% 91.494%,
      63.74% 91.253%,
      63.74% 91.253%,
      69.609% 91.39%,
      75.865% 91.759%,
      82.272% 92.304%,
      88.593% 92.966%,
      94.591% 93.686%,
      100.029% 94.406%,
      104.671% 95.068%,
      108.279% 95.613%,
      110.618% 95.983%,
      111.45% 96.119%,
      111.45% 0%,
      111.45% 0%,
      110.561% 0.151%,
      108.017% 0.557%,
      104.007% 1.152%,
      98.718% 1.867%,
      92.337% 2.634%,
      85.052% 3.385%,
      77.05% 4.053%,
      68.518% 4.568%,
      59.645% 4.865%,
      50.618% 4.874%
    );
  }
  .benefit__bottom-wrap {
    padding: 105px 15px 36px;
  }
  .benefit__list li {
    gap: 16px;
  }
  .steps {
    padding-block: 32px;
  }
  .steps__divider-icon {
    width: 24px;
  }

  .steps__card-thumb {
    height: 70px;
  }
  .steps__card-content {
    padding: 12px;
  }
  .steps .row {
    --bs-gutter-y: 12px;
  }

  .disease-rate__wrapper {
    padding: 20px;
  }
  .disease-rate__card {
    padding-inline: 12px;
  }
  .disease-rate__card-content {
    gap: 0;
  }

  .support__wrapper {
    padding: 25px 20px;
  }
  .faq {
    padding-block: 20px;
  }
  .faq__accordion {
    gap: 12px;
  }
  .service__wrapper {
    padding: 70px 20px 85px;
  }

  .service__card {
    padding: 32px 24px;
  }
  .service__card-title {
    margin-bottom: 12px;
  }
  .service__card-desc {
    margin-bottom: 12px;
  }
  .service .row {
    --bs-gutter-y: 24px;
  }
  .about__certificate img {
    width: 46px;
  }
  .about__certificate {
    width: 100%;
  }
  .about__card {
    padding-inline: 12px;
  }
  .about__card-desc {
    font-size: 14px;
    line-height: 20px;
  }
  .footer {
    padding-bottom: 35px;
  }
  .footer__nav-link {
    font-size: 10px;
    line-height: 24px;
  }

  .header__close-icon img {
    width: 18px;
  }
  .header--survey {
    padding-inline: 16px;
  }
  .header--survey .header__logo {
    transform: translateY(16px);
  }
  .survey main {
    height: calc(100vh - 130px);
    padding: 40px 16px 20px;
  }
  .survey main.last-step{
    height: 100vh;
    padding: 40px 16px 20px;
  }
  .survey__thumb {
    max-width: 280px;
  }
  .survey__msg {
    padding: 24px;
  }

  .footer__wrapper {
    height: 65px;
  }
  .footer--survey {
    padding-inline: 16px;
  }
  .datepicker {
    max-width: 310px;
    margin-bottom: 60px;
  }
  .datepicker__field {
    width: 65px;
    height: 40px;
    padding-inline: 10px;
    font-size: 16px;
    line-height: 24px;
  }
  .date-picker__input--year .datepicker__field {
    width: 100px;
    padding-inline: 16px;
  }
  .datepicker__item--month .datepicker__dropdown {
    width: 310px;
    transform: translateX(-37%);
  }
  .datepicker__dropdown div {
    font-size: 16px;
  }
  .survey__progress {
    margin-bottom: 20px;
    margin-top: 15px;
  }
  .alert-box {
    padding: 12px;
  }
  .form__input-icon {
    width: 16px;
    height: 16px;
  }
  .iso-certificate {
    margin-block: 20px;
    gap: 12px;
  }
  .iso-certificate__logo {
    width: 77px;
  }
  .checkbox {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  input:checked ~ .checkbox::after {
    left: 5px;
    top: 0px;
  }
  .information {
    margin-block: 20px;
    padding-inline: 12px;
  }

  .information__list {
    gap: 2px;
  }
  .information__list li {
    gap: 12px;
  }
  .survey__card-thumb {
    height: 240px;
  }
  .header__back-btn img {
    width: 16px;
  }
  .smoke-option__btn {
    height: 68px;
    font-size: 16px;
  }
  .form__input-field {
    font-size: 16px;
  }
}

/* 
  Extra small devices (less than 576px)
*/
@media (max-width: 575px) {
  .form__input-wrapper {
    gap: 0px;
  }
}