:root {
  --white-text: #ffffff;
  --blue-txt: #00197e;
  --light-blue: #263238;
  --black-bg: #000000;
  --blue-bg: #00197e;
  --yellow-bg: #fee823;
  --alltyDark-blue-yellow: #2f6dff;
  --allty-black-text: #000000;
  --allty-yellow-txt: #fee823;
  --blue-border: #00197e;
  --yellow-border: #fee823;
  --standerd-white: #ffffff;
  --standerd-black: #000000;
  --standerd-grey: #4a4a4a;
  --faq-box-fill: #f4f5f8;
}

body.theme-dark {
  --faq-box-fill: #000000;
}
body.theme-yellow {
  --faq-box-fill: #ffface;
}
body.theme-cyan {
  --faq-box-fill: #e3ffff;
}
body.theme-red {
  --faq-box-fill: #ffd1b9;
}

body.theme-dark .cts-btn {
  border: 2px solid #ffffff;
  background-color: #000000;
}

body.theme-yellow .cts-btn,
body.theme-cyan .cts-btn,
body.theme-red .cts-btn {
  color: #ffffff;
  background-color: #000000;
  border: 1px solid #000000;
}
/* section 1*/
.faq-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.faq-wrapper {
  max-width: 1440px;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: clamp(70px, 11.32vw, 163px);
  padding: 50px 100px;
  margin: 0 auto;
}

.faq-txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-txt p {
  text-transform: capitalize;
  line-height: 34px;
}
.faq-img {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 457px;
}
.faq-img img {
  min-width: 256px;
  width: 31.75vw;
  height: auto;
  display: block;
  object-fit: contain;
}

/*section 1 responsive design*/
@media (max-width: 1280px) {
  .faq-wrapper {
    gap: 70px;
    padding: 50px 60px;
  }
}
@media (max-width: 1024.98px) {
  .faq-wrapper {
    gap: 24px;
    padding: 50px 40px;
  }
  .faq-txt p {
    max-width: 402px;
    font-size: 1.286rem;
  }
  .faq-txt {
    gap: 18px;
  }
  .faq-txt h2 {
    font-size: 2.286rem;
  }
}

@media (max-width: 725px) {
  .faq-wrapper {
    display: flex;
    flex-direction: column;
  }
  .faq-txt {
    text-align: center;
  }
  .faq-txt p {
    max-width: 100%;
  }
  .faq-img {
    max-width: 100%;
  }
}

@media (max-width: 425px) {
  .faq-wrapper {
    padding: 36px 24px;
  }
  .faq-txt p {
    font-size: 1.3334rem;
    line-height: 32px;
  }
}
@media (max-width: 376px) {
  .faq-txt p {
    max-width: 325px;
  }
}
/*section 2 faq cta*/

.faq-cta-container {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--blue-bg);
  position: relative;
  overflow: hidden;
}

/* BACKGROUND ICONS */
.faq-cta-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("../../assets/images/faq-cta-bg.webp"),
    url("../../assets/images/faq-cta-bg.webp");
  background-repeat: no-repeat;
  background-position:
    left center,
    right center;
  background-size:
    240px 100%,
    240px 100%;
  z-index: 0;
}

/* CONTENT WRAPPER */
.faq-cta-wrapper {
  max-width: 1440px;
  width: 100%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* stays above background */
}

/* TEXT */
.cta-text {
  text-align: center;
}

.cta-text {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 714px;
  position: relative;
  z-index: 1;
}
.cta-text h2 {
  color: var(--white-text);
}
.cta-text p {
  text-transform: capitalize;
  color: var(--white-text);
}
.cts-btn {
  font-family: "Roboto", sans-serif;
  max-width: 229px;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--blue-txt);
  border: 2px solid #ffffff;
}

.cts-btn:hover {
  background-color: transparent;
  border: 2px solid #ffffff;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
}

/* section 2 responsive design */
@media (max-width: 1280px) {
  .faq-cta-wrapper {
    padding: 50px 150px;
  }
  .cta-text h2 {
    font-size: 2.2rem;
  }
  .cta-text p {
    font-size: 1.2rem;
  }
}

@media (max-width: 1024.98px) {
  .faq-cta-container::before {
    background-position:
      left -80px center,
      right -80px center;
  }
}
@media (max-width: 769px) {
  .faq-cta-wrapper {
    padding: 50px 198px;
  }
  .cta-text h2 {
    font-size: 2.286rem;
  }
  .cta-text p {
    font-size: 1.286rem;
  }
}

@media (max-width: 725px) {
  .faq-cta-container {
    height: 614px;
  }
  .faq-cta-container::before {
    background-image:
      url("../../assets/images/horizon-cta-faq.webp"),
      url("../../assets/images/horizon-bttm-cta-faq.webp");
    background-repeat: no-repeat;
    background-position:
      center top,
      center bottom;
    background-size:
      100% 220px,
      100% 220px;
  }
  .faq-cta-wrapper {
    padding: 208px 30px;
  }
}

@media (max-width: 425px) {
  .faq-cta-container::before {
    background-size:
      100% 170px,
      100% 170px;
  }
}

/* section 3 qtn-about--services */

.qtn-about--services {
  width: 100%;
  display: flex;
  justify-content: center;
}

.qtn-contaner-wrapper {
  max-width: 1440px;
  width: 100%;
  padding: 50px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.qtn-contaner-wrapper h2 {
  text-align: center;
  color: var(--standerd-black);
}

.question-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}

.qtn-box {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--faq-box-fill);
  border: 1px solid var(--blue-border);
  display: flex;
  flex-direction: row;
  gap: 13px;
  align-items: flex-start;
}

.qtn-box img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.qtn-txt {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.qtn-txt h3 {
  margin: 0;
}

.qtn-txt p {
  line-height: 34px;
  margin: 0;
}

@media (max-width: 1024.98px) {
  .question-boxes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 19px;
  }

  .qtn-contaner-wrapper h2 {
    font-size: 2.286rem;
    font-weight: 600;
  }
  .qtn-contaner-wrapper {
    gap: 32px;
    padding: 50px 59px;
  }
  .qtn-txt h3 {
    font-size: 1.71rem;
  }
  .qtn-txt p {
    font-size: 1.2rem;
  }
}

@media (max-width: 769px) {
  .question-boxes {
    max-width: 620px;
  }
  .qtn-txt p {
    max-width: 521px;
    font-size: 1.286rem;
  }
}

@media (max-width: 480px) {
  .qtn-contaner-wrapper {
    gap: 24px;
    padding: 36px 24px;
  }
  .question-boxes {
    gap: 12px;
  }
  .qtn-box {
    padding: 18px;
  }
  .qtn-txt h3 {
    font-size: 1.666rem;
  }
  .qtn-txt p {
    max-width: 521px;
    font-size: 1.3334rem;
  }
}