/* Extra Small Device */
@media only screen and (max-width: 430px) {
  .mobile-menu .offcanvas-start {
    width: 100%;
  }
}

/* Small Device :550px. */
@media only screen and (min-width: 576px) {
  .container {
    width: 540px;
  }
}

/* Medium Device. */
@media only screen and (min-width: 768px) {
  .container {
    width: 720px;
  }

  .fs-1 {
    font-size: 44px !important;
  }
  .fs-2 {
    font-size: 38px !important;
  }

  .hero__wrapper {
    height: auto;
    aspect-ratio: 1 / 0.57;
  }
  .hero__subtitle {
    font-size: 32px;
  }
  .hero__subtitle__two {
    font-size: 24px;
  }

  .hero__top {
    padding: 32px 0;
  }
  .hero__top__li::after {
    content: "";
    position: absolute;
    left: auto;
    right: -13px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 83%;
  }

  .about__video__popup::after {
    left: -24px;
    top: -24px;
    border-radius: 20px;
  }
  .play-video {
    width: 48px;
    height: 48px;
  }
  .about__heading {
    font-size: 26px;
  }

  /* MailChimp Code CSS Start */
  .cta__mailchimp #mc-embedded-subscribe-form {
    background: linear-gradient(
      to right,
      var(--white) 90%,
      var(--secondary) 10%
    );
    border-radius: 100px;
    overflow: hidden;
  }
  .cta__mailchimp .mc-field-group-fullname {
    width: 38% !important;
  }
  .cta__mailchimp .mc-field-group-email {
    width: 62% !important;
  }
  .cta__mailchimp .mc-field-group-divider {
    position: relative;
  }
  .cta__mailchimp .mc-field-group-divider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 70%;
    background-color: #edbfab;
  }
  .cta__mailchimp #mc_embed_signup .button {
    border-radius: 100px;
  }
  /* MailChimp Code CSS End */

  .contact__wrapper {
    min-height: 432px;
  }

  .site-legal__link::after {
    right: -13px;
  }
}

/* LG Device. */
@media only screen and (min-width: 992px) {
  .container {
    width: 960px;
    padding: 0 12px;
  }

  body {
    font-size: 20px;
  }
  .fs-1 {
    font-size: 54px !important;
  }
  .fs-2 {
    font-size: 44px !important;
  }
  .fs-common {
    font-size: 28px;
  }
  .btn {
    gap: 4px;
    font-size: 22px;
  }
  .text-highlighter .lineChild::after {
    bottom: -4px;
  }

  .header--area {
    padding: 28px 0;
  }
  .logo--header {
    max-width: 192px;
    margin-left: 16px;
  }

  .hero__subtitle {
    font-size: 40px;
  }
  .hero__subtitle__two {
    font-size: 28px;
  }

  /* MailChimp Code CSS Start */
  .cta__mailchimp #mc_embed_signup .button {
    font-size: 20px;
    padding: 7px 24px 9px;
  }
  /* MailChimp Code CSS End */

  .visionary--section {
    padding: 32px 0;
  }
  .visionary__content {
    max-width: 690px;
  }
  .visionary__thumb {
    position: absolute;
    right: -5%;
    top: -32px;
    width: 50%;
  }
  .visionary__thumb__box {
    margin-top: 0;
    max-width: unset;
    width: 160%;
    position: absolute;
    top: -20%;
    left: -37%;
  }

  .contact__wrapper::after {
    display: none;
  }

  .faqs--section {
    padding: 32px 0 16px;
  }

  .footer--area {
    padding: 52px 0 28px;
  }

  /* Legal Page CSS Start */
  .legal-page__main__title {
    font-size: 36px;
  }
  .legal-page__title {
    font-size: 28px;
  }
  .legal-page__subtitle {
    font-size: 24px;
  }
  /* Legal Page CSS End */
}

/* Large Device :992px. */
@media only screen and (min-width: 1200px) {
  .container {
    width: 1140px;
  }

  body {
    font-size: 22px;
  }
  .fs-1 {
    font-size: 64px !important;
  }
  .fs-2 {
    font-size: 52px !important;
  }
  .fs-common {
    font-size: 32px;
  }
  .btn {
    gap: 5px;
    font-size: 26px;
  }

  .logo--header {
    max-width: 230px;
    margin-left: 24px;
  }
  .nav__wrapper--header {
    gap: 32px;
  }

  .hero__wrapper {
    height: 100vh;
  }
  .hero__subtitle {
    font-size: 50px;
  }
  .hero__subtitle__two {
    font-size: 32px;
  }
  .hero__top__li::after {
    width: 3px;
  }

  .about__video__popup {
    max-width: 528px;
    margin: 0;
    margin-left: 52px;
  }
  .about__heading {
    font-size: 30px;
  }
  .about__content__item::after {
    height: 4px;
  }

  /* MailChimp Code CSS Start */
  .cta__mailchimp #mc_embed_signup .button {
    font-size: 22px;
  }
  /* MailChimp Code CSS End */

  .visionary__thumb__box {
    top: -35%;
    left: -40%;
  }
}

/* XL Device :1280px. */
@media only screen and (min-width: 1366px) {
  .container {
    max-width: 1342px;
    width: 100%;
  }

  body {
    font-size: 24px;
  }
  .fs-1 {
    font-size: 74px !important;
  }
  .fs-2 {
    font-size: 60px !important;
  }
  .fs-common {
    font-size: 36px;
  }
  .btn {
    gap: 6px;
    font-size: 30px;
  }

  .header--area {
    padding: 40px 0;
  }
  .logo--header {
    max-width: 284px;
    margin-left: 32px;
  }

  .hero__subtitle {
    font-size: 60px;
  }
  .hero__subtitle__two {
    font-size: 36px;
  }

  .about__video__popup {
    margin-left: 48px;
  }
  .about__video__popup::after {
    left: -40px;
    top: -40px;
    border-radius: 30px;
  }
  .about__content {
    margin-left: -28px;
  }

  /* MailChimp Code CSS Start */
  .cta__mailchimp #mc_embed_signup .mc-field-group input {
    padding: 7px 20px 9px;
  }
  .cta__mailchimp #mc_embed_signup .button {
    font-size: 24px;
    padding: 7px 30px 9px;
  }
  /* MailChimp Code CSS End */

  .visionary--section {
    padding: 56px 0;
  }
  .visionary__thumb__box {
    top: -32px;
  }

  .faqs--section {
    padding: 56px 0 16px;
  }

  .footer--area {
    padding: 80px 0 28px;
  }
}

/* XXL Device. */
@media only screen and (min-width: 1600px) {
  .contact__wrapper {
    min-height: 512px;
  }
}

/* 2k Device. */
@media only screen and (min-width: 1921px) {
  .contact__wrapper {
    min-height: 704px;
  }
}

/* =============================== */
/* :: Mobile Fixes (below 768px) */
/* =============================== */
@media only screen and (max-width: 767.98px) {
  /* --- Hero: video on top, text below on solid background --- */
  .hero__wrapper {
    min-height: 0;
    justify-content: flex-start !important;
    background-color: var(--secondary);
  }
  .hero__bg__video {
    position: relative;
    order: -1;
    height: auto;
    aspect-ratio: 16 / 9;
    z-index: 0;
  }
  .hero__content {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
  .hero__title {
    font-size: 34px !important;
    line-height: 1.1;
  }
  .hero__subtitle__two {
    font-size: 18px;
    line-height: 1.35;
  }

  /* --- Email signup: force full width, stop Mailchimp's 600px default --- */
  .cta__mailchimp,
  .cta__mailchimp #mc_embed_shell,
  .cta__mailchimp #mc_embed_signup,
  .cta__mailchimp #mc_embed_signup form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
  }
  .cta__mailchimp #mc_embed_signup_scroll {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .cta__mailchimp #mc_embed_signup .mc-field-group,
  .cta__mailchimp #mc_embed_signup .mc-field-submit {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .cta__mailchimp #mc_embed_signup .mc-field-group input {
    border-radius: 8px;
  }
  .cta__mailchimp #mc_embed_signup .button {
    width: 100%;
    justify-content: center;
    border-radius: 8px;
  }
}