.term_section {
  padding-top: 6rem;
}

section.term_section h2 {
  font-weight: 500;
}

.term_container {
  max-width: 1100px;
  margin: 0 auto;
}

.term_heading_wrap {
  text-align: center;
  margin-bottom: 30px;
}


.term_heading_wrap h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.term_content {
  max-width: 900px;
  margin: 0 auto;
}

section.term_section h2 {
  font-weight: 500;
  font-size: 36px;
}

.term_block {
  margin-top: 50px;
}

/* Legal page content now comes straight from the admin rich-text editor
   (LegalPage.content) instead of hand-wrapped .term_block divs, so give the
   headings/paragraphs their own spacing directly. */
.term_content h2 {
  margin-top: 50px;
}

.term_content h2:first-child {
  margin-top: 0;
}

.term_content p {
  margin-top: 16px;
}

.term_section ul {
  margin-top: 20px;
  padding-left: 25px;
  padding-bottom: 10px;
}

.term_section ul li {
  font-weight: 400;
  font-size: 17px;
  line-height: 160%;
  letter-spacing: 0;
  text-align: justify;
  color: #1F1F1F;
  list-style-type: disc;
}

.term_section ul li::marker {
  color: #1F1F1F;
}

/*========contact page=====*/
.contact_section {
  padding-top: 6rem;
}

.contact_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.contact_card {
  text-align: center;
  padding: 32px 24px;
  border: 0.78px solid #6FB1FF;
  border-radius: 7px;
  background: #fff;
  text-decoration: none;
  color: #163f78;
  transition: .3s ease;
}


.contact_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.contact_icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: contact_float 3s ease-in-out infinite;
}

.contact_icon img {
  max-width: 100%;
}

.contact_card h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--text-color);
}

.contact_card p {
  margin-bottom: 16px;
  text-align: center;
  min-height: 60px;
}

.contact_card span {
  color: var(--text-color);
  font-size: 17px;
}

.contact_form {
  max-width: 800px;
  margin: auto;
}

section.contact_section h1 {
  text-align: center;
  padding-bottom: 30px;
  text-transform: capitalize;
}

section.contact_section h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.contact_form_wrapper h2 {
  text-align: center;
  padding-bottom: 30px;
  font-weight: 500;
  font-style: normal;
  font-size: 52px;
  line-height: 1.18;
  letter-spacing: 0;
}

.contact_form_wrapper h2 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

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

.contact_field {
  margin-bottom: 20px;
  position: relative;
}

.contact_field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
  font-size: 17px;
}

.contact_field input,
.contact_field select,
.contact_field textarea {
  width: 100%;
  border-radius: 4px;
  padding: 14px 16px;
  outline: none;
  background: #D2EAFFB2;
  color: var(--text-color);
  font-size: 17px;
  border: 0.74px solid #272727;
  font-family: 'Inter', sans-serif;
  resize: none;

}

.contact_field textarea {
  min-height: 70px;
}

/* Validation + submit feedback for the dynamic contact form */
.contact_field.has_error input,
.contact_field.has_error textarea,
.contact_field.has_error .contact_select_btn {
  border-color: #c0392b;
}

.contact_field_error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
}

.contact_form_success {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #e8f6ec;
  border: 1px solid #b6e3c3;
  color: #1e7e34;
  font-size: 15px;
}

.contact_btn {
  display: block;
  padding: 15px 50px;
  border-radius: 50px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  transition: background .18s, transform .1s;
  box-shadow: inset -3px -3px 7px 0px #3062A4, inset 3px 3px 7px 0px #4A88C294;
  transition: .35s;
  margin: 0 auto;
}

.contact_btn:hover {
  transform: translateY(-2px);
}

.contact_select {
  position: relative;
}

.contact_select_btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-color);
  font-size: 17px;
  background: #D2EAFFB2;
  border: 0.74px solid #272727;
}

.contact_select_arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #163f78;
  border-bottom: 2px solid #163f78;
  transform: rotate(45deg);
}

.contact_select_dropdown {
  position: absolute;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s;
}

.contact_select.active .contact_select_dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 100;
}

.contact_select_option {
  padding: 14px 18px;
  cursor: pointer;
  transition: .2s;
}

.contact_select_option:hover {
  background: #f3f8ff;
}

@keyframes contact_float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.listing_banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 40px;
}

.listing_banner_bg {
  position: absolute;
  inset: 0;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1F1F1F;
}


@media (prefers-reduced-motion: reduce) {

  .contact_icon,
  .contact_card,
  .contact_btn {
    animation: none;
    transition: none;
  }
}

@media (max-width:768px) {

  .contact_cards {
    grid-template-columns: 1fr;
  }

  .contact_grid {
    grid-template-columns: 1fr;
  }

}

/*========about===========*/
.bg_banners {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 40px;
}

.listing_banner_bg {
  position: absolute;
  inset: 0;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1F1F1F;
}

.listing_banner_content {
  position: relative;
  z-index: 2;
  text-align: center;
  min-height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listing_banner_content h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.listing_banner_content p {
  text-align: center;
  color: var(--text-color);
}

@media (max-width: 767px) {
  .listing_banner_bg {
    background-image: var(--mobile-bg);
  }
}


.abt_section {
  padding-top: 4rem;
}

.abt_intro h2 span {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  padding-top: 5px;
}

section.abt_section .container {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 70px;
  align-items: start;
}

.abt_intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.abt_title span {
  display: block;
  margin-top: 10px;
  font-weight: 400;
  font-size: 48px;
}

.abt_description {
  margin-top: 55px;
  max-width: 250px;
  color: var(--abt-text);
  font-size: 15px;
  line-height: 2;
}

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

.abt_text {
  margin: 0;
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.9;
}

.abt_gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.abt_image {
  overflow: hidden;
  height: 320px;
  border-radius: 10px;
  background: #ececec;
}

.abt_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.abt_image:hover img {
  transform: scale(1.05);
}

@media (max-width:991px) {

  section.abt_section .container {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .abt_intro p {
    max-width: 100%;
    margin-top: 25px;
  }

  .abt_title {
    font-size: 42px;
  }

  .abt_title span {
    font-size: 38px;
  }
}

/* Mobile */

@media (max-width:767px) {

  .abt_section {
    padding: 70px 18px;
  }

  .abt_gallery {
    grid-template-columns: 1fr;
  }

  .abt_title {
    font-size: 34px;
  }

  .abt_title span {
    font-size: 30px;
  }

  .abt_text {
    font-size: 15px;
  }

  .abt_image_large,
  .abt_image {
    aspect-ratio: 16/10;
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {

  .abt_image img {
    transition: none;
  }

  .abt_image:hover img {
    transform: none;
  }
}

.std_section {
  position: relative;
  padding-top: 4rem;
}

.std_container {
  max-width: 995px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.std_heading {
  text-align: center;
  margin-bottom: 16rem;
}

.std_heading h2 {
  text-align: center;
}

.std_heading h2 span {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  padding-top: 5px;

}

.std_items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.std_items h3 {
  font-size: 20px;
  line-height: 30px;
}

.std_item {
  width: 220px;
  text-align: center;
}

.std_icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #214f90;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto auto 20px;
}

.std_item {
  cursor: pointer;
}

.std_icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #214f90;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all .35s cubic-bezier(.22, .61, .36, 1);
}

.std_icon img {
  width: 40px;
  height: 40px;
  transition: transform .35s ease;
}

.std_item:hover .std_icon {
  background: #0DA2FF;
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 12px 24px rgba(33, 79, 144, .25);
}

.std_item:hover .std_icon img {
  transform: rotate(10deg) scale(1.1);
}


.std_bg_wave {
  position: absolute;
  left: 50%;
  top: 115px;
  width: 690px;
  height: 625px;
  transform: translateX(-50%) scale(.65);
  opacity: 0;

  background: url("../images/icon/frame1.png") center/contain no-repeat;

  pointer-events: none;
}

/* Play Animation */

.std_section.std_active .std_bg_wave {
  animation: stdWave 1.8s ease-out forwards;
}

@keyframes stdWave {

  0% {
    transform: translateX(-50%) scale(.55);
    opacity: 0;
  }

  35% {
    opacity: .95;
  }

  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }

}

/* Responsive */

@media(max-width:991px) {

  .std_items {
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
  }

  .std_item {
    width: 45%;
  }

  .std_bg_wave {
    width: 650px;
    height: 650px;
  }

}

@media(max-width:767px) {

  .std_heading h2 {
    font-size: 34px;
  }

  .std_heading span {
    font-size: 28px;
  }

  .std_item {
    width: 100%;
  }

  .std_bg_wave {
    width: 420px;
    height: 420px;
    top: 180px;
  }

}

.platform_section {
  padding-top: 9rem;
}

.platform_section .container {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  align-items: center;
}

.platform_image {
  overflow: hidden;
  border-radius: 32px;
  z-index: 10;
}

.platform_image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}

.platform_image:hover img {
  transform: scale(1.05);
}

.platform_content h2 span {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  padding-bottom: 5px;
}

.platform_steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.platform_step {
  transition: .35s ease;
}

.platform_step div {
  display: flex;
  gap: 20px;
  align-items: center;
}

.platform_step:hover {
  transform: translateX(8px);
}

.platform_number {
  font-size: 17px;
}

.platform_step h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 500;
  color: #214f90;
  text-align: left;
}

@media(max-width:992px) {

  .platform_container {
    grid-template-columns: 1fr;
    gap: 40px;
  }



  .platform_step h3 {
    font-size: 26px;
  }
}

@media(max-width:576px) {

  .platform_section {
    padding: 60px 16px;
  }

  .platform_image {
    border-radius: 22px;
  }

  .platform_steps {
    gap: 22px;
  }

  .platform_step h3 {
    font-size: 22px;
  }

  .platform_step p {
    font-size: 15px;
    line-height: 1.6;
  }
}

.sets_section {
  padding-top: 4rem;
}

.sets_heading {

  text-align: center;
  margin-bottom: 60px;

}

.sets_heading h2 {
  margin: 0;
  text-align: center;
}

.sets_heading span {
  display: block;
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.sets_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;

}

.sets_card {

  display: flex;
  gap: 20px;
  align-items: flex-start;
  align-items: stretch;
  padding: 22px;

  background: #fff;

  border-radius: 20px;

  box-shadow: 0 14px 45px rgba(20, 70, 140, .10);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  overflow: hidden;

  position: relative;

}

.sets_card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent 0%, #cfe8ff5e 65%);

  opacity: 0;

  transition: .4s;

  pointer-events: none;

}

.sets_card:hover {

  transform: translateY(-8px);

  box-shadow:
    0 25px 60px rgba(20, 70, 140, .18);

}

.sets_card:hover::before {

  opacity: 1;

}

/*=======================*/

.sets_icon {
  min-width: 145px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  background: linear-gradient(180deg, #A4D7FF 0%, #EFF8FF 100%);


  transition: .45s;

}

.sets_icon img {
  width: 100px;
  transition: .45s;

}

.sets_card:hover .sets_icon img {
  transform: translateY(-6px) scale(1.08);
}

.sets_content h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 24px;
  text-align: left;
  font-weight: 600;
}

.sets_content h4 {
  margin: 0px 0 18px;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 500;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.sets_content p {

  margin: 0;
  color: var(--text-color);

  line-height: 1.8;

  font-size: 17px;

}

/*=======================*/

.sets_footer {

  margin-top: 60px;

  display: flex;

  justify-content: center;

  gap: 70px;

  flex-wrap: wrap;

}

.sets_footer_item {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--text-color);

  font-weight: 600;

  transition: .35s;

}

.sets_footer_item img {

  width: 24px;

  transition: .35s;

}

.sets_footer_item:hover {

  transform: translateY(-3px);

}

.sets_footer_item:hover img {

  transform: scale(1.2);

}


/*=======================*/

@media (max-width:991px) {

  .sets_grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width:640px) {

  .sets_section {

    padding: 70px 16px;

  }

  .sets_card {

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 22px;

  }

  .sets_icon {

    width: 85px;
    height: 85px;

  }

  .sets_icon img {

    width: 50px;

  }

  .sets_content h3 {

    font-size: 24px;

  }

  .sets_content h4 {

    font-size: 18px;

  }

  .sets_content p {

    font-size: 15px;

    line-height: 1.7;

  }

  .sets_footer {

    gap: 24px;
    flex-direction: column;
    align-items: center;

  }

}

.innovation_section {
  padding-top: 4rem;
}

.innovation_container {

  width: min(1400px, 100%);
  margin: auto;

}

/* Heading */
.innovation_heading {
  margin-bottom: 50px;
}

.innovation_heading h3 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  text-align: left;
  font-style: normal;
  font-size: 42px;
}

.innovation_heading h2 {
  margin-bottom: 10px;
}

.innovation_grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;

}

/* Card */

.innovation_card {

  position: relative;

  min-height: 170px;

  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  border-radius: 20px;

  background: linear-gradient(135deg, #cde5fb, #5ca9f2);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  overflow: hidden;

}

/* Shine */

.innovation_card::before {

  content: "";

  position: absolute;

  inset: -100%;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 11%), transparent);
  transition: .7s;

}

.innovation_card:hover::before {

  inset: 100%;

}

.innovation_card:hover {

  transform: translateY(-8px);

  box-shadow:
    0 20px 40px rgba(36, 83, 148, .18);

}

/* Icon */

.innovation_icon {

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 24px;

  transition: .35s;

}

.innovation_icon img {

  width: 22px;
  transition: .35s;

}

/* Text */

.innovation_card h4 {

  margin: 0;

  color: var(--text-color);

  font-size: 22px;

  font-weight: 500;


}

/* Different shades like design */

.innovation_card:nth-child(1) {
  background: #D2EAFF;
}

.innovation_card:nth-child(2) {
  background: #A4D4FF;
}

.innovation_card:nth-child(3) {
  background: #83C5FF;
}

.innovation_card:nth-child(4) {
  background: #4AA9FB;
}

/* Responsive */
@media(max-width:992px) {

  .innovation_grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media(max-width:640px) {

  .innovation_section {

    padding: 70px 16px;

  }

  .innovation_grid {

    grid-template-columns: 1fr;

  }

  .innovation_card {

    min-height: 150px;

  }

  .innovation_card h4 {

    font-size: 22px;

  }

}

/*=========login=========*/
.page {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.form-panel {
  flex: 1 1 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.form-wrap {
  width: 100%;
  max-width: 550px;
}

.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.logo-block img {
  width: 45%;
}

.form-panel h1 {
  font-size: 30px;
  padding-bottom: 15px;
}

.form-panel h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}


.form-wrap p {
  font-size: 18px;
  color: var(--text-color);
  text-align: left;
  text-transform: capitalize;
  padding: 1rem 0;
  line-height: 27px;
}

.form-label {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 10px;
}

.form-group {
  margin-bottom: 18px;
}
.profile_panel .dropdown {
        margin-bottom: 0;
}
/* ===== Shared input / textarea style ===== */
.form-input,
.form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #2c3e50;
  background: #DFF0FE;
  border: 1px solid #272727;
  border-radius: 14px;
  padding: 15px 14px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9aa9b5;
  font-weight: 400;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-panel-blue-2);
  box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.15);
  background-color: #ffffff;
}

.form-input:hover,
.form-textarea:hover {
  border-color: #a9c8e0;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.form-input.input-error,
.form-textarea.input-error,
.form-input.server-error,
.form-textarea.server-error {
  border-color: #e57373;
  box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.12);
}

/* Field-level error hints are hidden until JS flags the field invalid */
.error-text {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #e57373;
}

.form-input.input-error ~ .error-text,
.form-textarea.input-error ~ .error-text {
  display: block;
}

/* ===== Button ===== */
button.loginBtn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-transform: capitalize;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 6px 14px rgba(27, 79, 140, 0.28);
}

.signup-row {
  text-align: center;
  margin-top: 18px;
  font-size: 16px;
  color: #000000;
}

.signup-row a {
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
}

.signup-row a:hover {
  text-decoration: underline;
}

/* ===================== RIGHT PANEL (BRAND) ===================== */
.brand-panel {
  flex: 0 1 30%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 40px;
  background-image: var(--brand-bg, url('../images/login_img.webp'));
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #1d4a8440;
  pointer-events: none;
}

/* ---- DNA strand as its own layer ----
   Applied by the panel's <img> once static/images/login_dna.png loads. The
   background then drops the baked artwork and paints only the gradient
   backdrop, so the strand can be sized and placed on its own instead of
   being cropped by background-size:cover at whatever width the panel ends
   up. Without the asset none of this applies and the single combined image
   still renders. */
.brand-panel--split {
  background-image:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .16) 0 25%, transparent 25.5%),
    radial-gradient(circle at 16% 74%, rgba(255, 255, 255, .13) 0 28%, transparent 28.5%),
    linear-gradient(158deg,
      #A9CBF8 0%,
      #BBD3F5 20%,
      #6FA8FA 45%,
      #2585FD 68%,
      #0A5FE4 86%,
      #0040D8 100%);
}

.brand-dna {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.brand-heading {
  position: relative;
  z-index: 2;
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  color: #fffbfb;
}

.brand-footer {
  position: relative;
  z-index: 2;
}

.brand-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #D9D9D9;
}

.brand-footer-list li {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #ffffff;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px) {

  /* The brand panel is the artwork plus a heading and a short list that the
     form already carries above it (logo + wordmark), so on a phone it is
     dropped rather than stacked. The form then owns the whole screen and
     the page reads in a single view instead of scrolling past a 280px
     image first. Its text is white-on-artwork, so it cannot simply be kept
     once the image is gone. */
  .brand-panel {
    display: none;
  }

  .page {
    flex-direction: column;
    min-height: 100vh;
  }

  /* min-height rather than a fixed height: login and OTP fit one screen,
     while the taller register form can still scroll instead of being
     clipped.

     Top-anchored instead of centred, so the logo sits higher up the screen.
     The offset is a clamped vh so it scales with the device and can never
     go negative — centring with an offset would overflow upward on a short
     viewport and push the logo out of reach above the top edge. */
  .form-panel {
    flex: 1 1 auto;
    min-height: 100vh;
    justify-content: flex-start;
    padding: clamp(24px, 14vh, 130px) 20px 32px;
  }

  /* +20% on the mark itself (45% -> 54% of the form column). */
  .logo-block img {
    width: 54%;
  }

  .form-panel h1 {
    text-align: center;
  }

}

.otp-inputs input {
  border: 1px solid #272727;
  background: #DFF0FE;
  width: 60px;
  height: 65px;
  opacity: 1;
  border-radius: 5px;
  border-width: 1px;
  font-size: 19px;
  text-align: center;
}

.verify-btn {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: none;
  border-radius: 50px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 6px 14px rgba(27, 79, 140, 0.28);
  display: block;
  text-align: center;
  text-transform: capitalize;
}

.resend-otp {
  padding-top: 25px;
}

.otp-container {
  text-align: center;
}

.resend-otp a {
  text-transform: capitalize;
}

.otp-container p {
  text-align: center;
}

.otp-container p {
  text-align: center;
  color: #1D4A8473;
  font-size: 17px;
  padding: 5px
}

.otp-inputs {
  padding: 20px 20px 40px 20px;
}

.otp-inputs form {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Matches .form-panel h1 on Login and Register — this page was the only
   one of the three running a smaller heading. */
.otp-container h1 {
  font-size: 30px;
  text-transform: capitalize;
}



.orders_list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  gap: 5px;
}

.brand-footer h3 {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  padding-bottom: 20px;
  text-transform: uppercase;
}

.orders_list li {
  display: inline;
  font-size: 20px;
  font-weight: 600;
}

.orders_list li:not(:last-child)::after {
  content: ", ";
}

.orders_list li:last-child::before {
  content: "and ";
}

/*==register==*/
.form-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-blue);
  margin-bottom: 8px;
  text-transform: capitalize;
}



.form-input:focus {
  border-color: var(--text-color);
  box-shadow: 0 0 0 3px rgba(47, 111, 181, .15);
}

.row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.row .field {
  flex: 1;
}

.field {
  margin-bottom: 20px;
}

.row .field {
  margin-bottom: 0;
}



.form-input.invalid {
  border-color: #d23b3b;
}




/* Gender checkboxes */
.gender-row {
  display: flex;
  gap: 28px;
  margin-bottom: 20px;
}

.check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-blue);
  cursor: pointer;
}

.check-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-mid);
  cursor: pointer;
}

/* Custom dropdown */
.dropdown {
  position: relative;
  margin-bottom: 24px;
}

.dropdown-trigger {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #000000;
  border-radius: 10px;
  background: #DFF0FE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  color: var(--placeholder);
  user-select: none;
}

.dropdown-trigger.has-value {
  color: #234;
}

.dropdown-trigger .arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #000000;
  transition: transform .15s;
}

.dropdown.open .dropdown-trigger .arrow {
  transform: rotate(180deg);
}

.dropdown.open .dropdown-trigger {
  border-color: var(--blue-mid);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(29, 79, 140, .15);
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}

.dropdown.open .dropdown-panel {
  display: block;
}

.dropdown-search {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 8px;
  border-bottom: 1px solid #eef3fa;
}

.dropdown-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
}

.dropdown-option {
  padding: 10px 16px;
  font-size: 14px;
  color: #234;
  cursor: pointer;
}

.dropdown-option:hover,
.dropdown-option.active {
  background: var(--blue-light);
}

.dropdown-option.no-match {
  color: var(--placeholder);
  cursor: default;
}

/* Checkbox list */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid #000000;
}

.consent label {
  font-size: 15px;
  color: var(--text-color);
  line-height: 1.5;
  cursor: pointer;
  text-transform: capitalize;
}

/* Error message for a consent checkbox — pulled up close to its own
   checkbox+label, indented to align under the label text (not the box),
   with clear breathing room before the next checkbox. */
.consent-error {
  display: block;
  margin: -8px 0 16px 26px;
  font-size: 13px;
  color: #e57373;
}

.center {
  text-align: center;
}

.center button {
  width: 80%;
  margin-top: 20px;
}

.loginBtn:hover {
  opacity: .92;
}

.loginBtn:active {
  transform: scale(.99);
}

.centerprofile_btn button {
  width: 30%;
  margin: 0 auto;
}

.centerprofile_btn {
  text-align: center;
  padding-top: 1rem;
}

@media (max-width:480px) {
  .row {
    flex-direction: column;
    gap: 20px;
  }
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #000000;
  background: #DFF0FE;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

input[type="radio"]:checked {
  background: #0075ff;
  border-color: #1f1f1f;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="radio"]:focus-visible {
  outline: 2px solid var(--blue-mid);
  outline-offset: 2px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #000;
  background: #DFF0FE;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all .2s ease;
}

input[type="checkbox"]:checked {
  background: #1c3f73;
  border-color: #1f1f1f;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;

  width: 4px;
  height: 8px;

  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue-mid);
  outline-offset: 2px;
}

/*==faq====*/
.faq_section {
  padding-top: 6rem;
}

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

.faq_section h1 {
  text-align: center;
  font-size: 52px;
  font-weight: 500;
  color: #18458C;
  margin-bottom: 20px;
}

.faq_item {
  border: 1px solid #000000;
  border-radius: 24px;
  overflow: hidden;
  background: #D2EAFF;
  margin-bottom: 22px;
  transition: .35s;
}

.faq_question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 26px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-color);
}

.faq_question span:first-child {
  padding-right: 20px;
}

.faq_icon {
  width: 22px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}

.faq_icon::before,
.faq_icon::after {
  content: "";
  position: absolute;
  background: #18458C;
  border-radius: 10px;
  transition: .35s;
}

.faq_icon::before {
  width: 18px;
  height: 2px;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}

.faq_icon::after {
  width: 2px;
  height: 18px;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
}

.faq_answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}

.faq_answer_inner {
  padding: 0 34px 28px;
}

.faq_item.active .faq_answer {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d7d7d7 #E8F2FF;
}

.faq_item.active .faq_icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.faq_item:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

@media(max-width:991px) {

  .faq_section {
    padding: 60px 15px;
  }

  .faq_title {
    font-size: 40px;
  }

  .faq_question {
    font-size: 17px;
    padding: 20px;
  }

  .faq_answer_inner {
    padding: 0 20px 20px;
    font-size: 15px;
  }

}

@media(max-width:575px) {

  .faq_title {
    font-size: 34px;
    margin-bottom: 30px;
  }

  .faq_item {
    border-radius: 18px;
    margin-bottom: 16px;
  }

  .faq_question {
    padding: 18px;
    font-size: 15px;
  }

}

/*==payment success====*/
section.info_success {
  padding-top: 5rem;
}

.info_wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.info_card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  overflow: hidden;
}

.info_badge_area {
  position: relative;
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: url("../images/icon/Ellipse.png") center/contain no-repeat;
}

.info_icon_img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  animation: info_iconPop 06s ease-out both;
  overflow: hidden;
}

@keyframes info_iconPop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.info_wrapper h1 {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

.info_wrapper p {
  color: var(--text-color);
  text-align: center;
  padding-bottom: 25px;
  font-size: 18px;
  line-height: 25px;
}

.info_order_meta {
  font-size: 15px !important;
  color: #1D4A84 !important;
  font-weight: 500;
  padding-bottom: 20px !important;
}

.info_order_meta img {
  width: 14px;
  vertical-align: -1px;
  margin: 0 2px 0 8px;
}

.info_btn {
  display: inline-block;
  padding: 14px 50px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 26px;
  cursor: pointer;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info_btn:hover {
  transform: translateY(-2px);
}

.info_btn:active {
  transform: translateY(0);
}

/*======blog======*/
.blog_section {
  padding-top: 6rem;
}

section.blog_section h1 {
  text-align: center;
  padding-bottom: 35px;
}

section.blog_section h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.blog_section .container {
  max-width: 1400px;
  margin: auto;
  padding: 0 15px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog_card {
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: .35s;
}

.blog_image_box {
  height: 305px;
  background: #edf6fc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog_image {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  transition: .5s;
}

.blog_card:hover .blog_image {
  transform: scale(1.05);
}

.blog_content {
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog_title {
  font-size: 28px;
  color: var(--text-color);
  margin: 0 0 12px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

  height: 2.8em;
  text-align: left;
}

.blog_content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog_date {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
}

.blog_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}

.blog_time,
.blog_read {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1D4A84;
  font-size: 14px;
  font-weight: 500;
}

.blog_read svg {
  transition: .3s;
}

.blog_card:hover .blog_read svg {
  transform: translateX(4px);
}

span.blog_read img {
  width: 10px;
}

@media(max-width:991px) {

  .blog_container {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media(max-width:767px) {

  .blog_container {
    grid-template-columns: 1fr;
  }

  .blog_title {
    font-size: 24px;
  }

  .blog_image_box {
    height: 190px;
  }

  .blog_footer {
    flex-wrap: wrap;
    gap: 15px;
  }

}

.bgimg_banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.bgimg_banner_bg {
  position: absolute;
  inset: 0;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1F1F1F;
}

.bgimg_banner_content {
  position: relative;
  z-index: 2;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.bgimg__banner_content h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

@media (max-width: 767px) {
  .bgimg_banner_bg {
    background-image: var(--mobile-bg);
  }
}

/*==========blog detail=============*/
.b_detail_section {
  padding-top: 6rem;
}

.b_detail_header a {
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  display: inline-block;
  padding: 15px 25px;
  border-radius: 50px;
  color: #fff;
}

.b_detail_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.b_detail_header h1 {
  font-size: 38px;
  width: 65%;
}

.b_detail_img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.b_detail_img {
  height: 450px;
  padding-top: 30px;
}

/* ==========================
   BLOG DETAIL
========================== */

.b_detail_section {
  padding-top: 4rem;
}

.b_detail_header {
  padding: 3rem 0 0 0;
}


.b_detail_meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.b_detail_date,
.b_detail_copy_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 50px;
  background: #E8F2FF;
  color: #1D4A84;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.b_detail_read_time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #1E1E1E;
}

.b_detail_read_time i {
  color: #1D4A84;
  font-size: 18px;
}

.b_detail_copy_btn {
  border: none;
  cursor: pointer;
  transition: .3s;
  gap: 8px;
}

.b_detail_copy_btn:hover {
  background: #1D4A84;
  color: #fff;
}

.b_detail_copy_btn i {
  font-size: 16px;
}

.b_detail_divider {
  width: 90%;
  height: 1px;
  background: #D8D8D8;
  margin: 1rem auto;
  margin-bottom: 40px;
}

.b_detail_content p {
  padding-bottom: 20px;
}

section.blog_detail_content .b_detail_header {
  flex-wrap: wrap;
}

section.blog_detail_content {
  padding: 2rem 0;
}

section.blog_detail_content .container {
  max-width: 1000px;
  margin: 0 auto;
}



.b_detail_contentt p:last-child {
  margin-bottom: 0;
}

/* ==========================
   Responsive
========================== */

@media (max-width:991px) {

  .b_detail_section {
    padding: 60px 0;
  }

  .b_detail_meta {
    justify-content: center;
    gap: 16px;
  }

  .b_detail_content {
    max-width: 100%;
  }


}

@media (max-width:767px) {

  .b_detail_section {
    padding: 40px 0;
  }

  .b_detail_meta {
    flex-direction: column;
    align-items: stretch;
  }

  .b_detail_date,
  .b_detail_copy_btn,
  .b_detail_read_time {
    width: 100%;
    justify-content: center;
  }

  .b_detail_divider {
    margin: 30px 0;
  }



}



section.quiz_section .hero-content {
  min-height: 99vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4rem;
}

section.quiz_section .hero-content>* {
  opacity: 1;
}

section.quiz_section .hero-content .hero-buttons a {
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  border: 1px solid;
  color: #fff;
  border-image-source: linear-gradient(180deg, #4683D1 0%, #5B94DD 100%);
}

section.quiz_section .hero-content .hero-buttons a:hover {
  background: linear-gradient(185deg, #1D4A84 0%, #3E8CCA 100%);
  border: 1px solid;
  color: #fff;
  border-image-source: linear-gradient(180deg, #bccfe7 0%, #5B94DD 100%);
}

/* =========================================================================
   ABOUT PAGE — MOBILE
   =========================================================================
   This file loads after responsive.css, so About-specific mobile rules
   belong here rather than there.

   Several of the existing mobile rules above never took effect because they
   target class names the About template does not use — .platform_container
   (the markup is .platform_section .container), .abt_title (it is an h2)
   and .abt_text (it is a p). That is why the page kept its desktop
   proportions on a phone. The block below targets the real selectors and
   brings spacing and type into line with the home page's mobile scale:
   ~40px section padding, 34px section headings with a 28px serif line,
   17px body copy and 15px card copy.
   ========================================================================= */

@media (max-width: 768px) {

  /* ---------- Page banner ---------- */

  /* NB the mobile fallback for the banner artwork lives in product.css —
     that file loads after this one and redefines .listing_banner_bg. */

  /* The banner sat 120px below the header: main contributes 64px of top
     padding and .listing_section another 56px of margin. Trimmed to 48px
     total (a 60% reduction) by cutting both — the :has() rule only touches
     pages whose main opens with this banner, so other pages keep their
     normal top spacing. */
  main:has(> .listing_section:first-child) {
    padding-top: 26px;
  }

  /* the matching .listing_section margin lives in product.css — that file
     loads last and its `section.listing_section` selector outranks this one */

  .bg_banners {
    border-radius: 24px;
  }

  .listing_banner_content {
    padding: 32px 20px;
  }

  .listing_banner_content h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .listing_banner_content h1 span {
    font-size: 28px;
  }

  .listing_banner_content p {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 10px;
  }

  /* ---------- Vision / intro ---------- */

  .abt_section {
    padding: 40px 0;
  }

  section.abt_section .container {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .abt_intro h2 {
    font-size: 34px;
  }

  .abt_intro h2 span {
    font-size: 28px;
  }

  .abt_intro p {
    margin-top: 16px;
  }

  .abt_gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* .abt_image carries a fixed height:320px, and the mobile rule above adds
     aspect-ratio:16/10 — together those resolve to a 512px-wide box, which
     was overflowing the 390px viewport and making the whole page scroll
     sideways. Releasing the height lets the aspect ratio drive the size. */
  .abt_image,
  .abt_image_large {
    height: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  /* ---------- Standards You Can Trust ---------- */

  .std_section {
    padding-top: 40px;
  }

  /* .std_container / .innovation_container are not .container, so they had
     no side inset and sat edge to edge while every other section was inset */
  .std_container {
    padding: 0 10px;
  }

  /* 16rem of clearance for the background art leaves a huge void on a
     phone, where the art is also much smaller */
  .std_heading {
    margin-bottom: 90px;
  }

  .std_items {
    flex-direction: column;
    gap: 26px;
  }

  .std_item {
    width: 100%;
  }

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

  .std_bg_wave {
    width: 360px;
    height: 360px;
    top: 150px;
  }

  /* ---------- Platform ---------- */

  .platform_section {
    padding: 40px 0;
  }

  /* the existing rule targets .platform_container, which is not in the
     markup — so this grid stayed two columns and collapsed to ~108px and
     ~162px wide tracks on a phone */
  .platform_section .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .platform_content h2 {
    font-size: 34px;
  }

  .platform_content h2 span {
    font-size: 28px;
  }

  .platform_steps {
    gap: 20px;
  }

  .platform_step h3 {
    font-size: 20px;
  }

  .platform_step p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* ---------- What Sets Us Apart ---------- */

  .sets_section {
    padding: 40px 0;
  }

  .sets_heading {
    margin-bottom: 24px;
  }

  .sets_heading h2 {
    font-size: 34px;
  }

  .sets_heading h2 span {
    font-size: 28px;
  }

  .sets_grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Icon to the left of the copy rather than stacked above it, following
     the reference layout: a compact tinted icon tile, the title and body
     to its right, and the icon centred against the card's full height. */
  .sets_card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 0.8px solid #E4EEF9;
    box-shadow: 0 18px 40px -20px rgba(20, 70, 140, .18);
    text-align: left;
  }

  .sets_icon {
    min-width: 0;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 16px;
    align-self: center;
  }

  .sets_icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .sets_content {
    min-width: 0;
  }

  .sets_card h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
  }

  .sets_card h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 6px;
  }

  .sets_card p {
    font-size: 15px;
    line-height: 22px;
    margin: 0;
  }

  .sets_footer {
    margin-top: 30px;
    gap: 14px;
  }

  /* ---------- Innovation ---------- */

  .innovation_section {
    padding: 40px 0;
  }

  .innovation_container {
    padding: 0 10px;
  }

  .innovation_heading {
    margin-bottom: 26px;
  }

  .innovation_heading h2 {
    font-size: 34px;
  }

  /* the serif line was larger than the heading it sits under */
  .innovation_heading h3 {
    font-size: 28px;
  }

  .innovation_grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .innovation_card {
    padding: 20px;
  }

  .innovation_card h4 {
    font-size: 17px;
  }

}


/* =========================================================================
   SECTION SUB-TEXT — JUSTIFIED BLOCK ALIGNMENT
   =========================================================================
   style.css already justifies `p` globally, but these intro paragraphs sit
   in narrow columns where justification needs hyphenation to avoid opening
   up word gaps. Applies at every width, on every page that loads this file.
   ========================================================================= */

.abt_intro p,
.abt_content p,
.platform_step p,
.sets_card p,
.std_item p,
.innovation_card p,
.listing_banner_content p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* centred banner copy should stay centred, not justified */
.listing_banner_content p {
  text-align: center;
  hyphens: manual;
}


/* =========================================================================
   REMAINING PAGES — MOBILE
   =========================================================================
   Blog, Contact, FAQs, the legal pages, Blood Test and Product Finder all
   load this file last, so their mobile corrections live here. Values follow
   the scale already set on home / about / products: ~40px section padding,
   34px page headings with a 28px serif line, 15-17px body copy.

   Several of the existing rules below never applied because they target
   class names the markup doesn't use — .blog_container is the clearest
   case, the blog grid is actually `.blog_section .container`.
   ========================================================================= */

@media (max-width: 768px) {

  /* ---------- Blog listing ---------- */

  .blog_section {
    padding-top: 40px;
  }

  section.blog_section h1 {
    font-size: 34px;
    padding-bottom: 22px;
  }

  section.blog_section h1 span {
    font-size: 28px;
  }

  /* the responsive rules above target .blog_container, which isn't in the
     markup — so this stayed three columns at ~101px each */
  .blog_section .container {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 10px;
  }

  /* ---------- Blog detail ---------- */

  .b_detail_title,
  .b_detail_content h1 {
    font-size: 30px;
    line-height: 1.25;
  }

  .b_detail_content h2 {
    font-size: 22px;
  }

  .b_detail_content img {
    max-width: 100%;
    height: auto;
  }

  /* ---------- Contact ---------- */

  .contact_section {
    padding: 40px 0;
  }

  .contact_section h1,
  .contact_hero h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .contact_section h2,
  .contact_heading h2 {
    font-size: 34px;
    line-height: 1.2;
  }

  .contact_section h2 span,
  .contact_heading h2 span {
    font-size: 28px;
  }

  /* ---------- FAQs ---------- */

  .faq_section {
    padding: 40px 15px;
  }

  .faq_title,
  section.faq_section h1 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  section.faq_section h1 span {
    font-size: 28px;
  }

  /* ---------- Legal pages (terms / privacy / disclaimer / compliance) ---- */

  .term_section {
    padding: 40px 0;
  }

  .term_container {
    padding: 0 10px;
  }

  .term_heading_wrap h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .term_heading_wrap h1 span {
    font-size: 28px;
  }

  /* `section.term_section h2` above is (0,1,2), so match that weight here
     or the desktop 36px keeps winning */
  section.term_section h2 {
    font-size: 21px;
    line-height: 1.35;
    margin-top: 26px;
  }

  section.term_section h3 {
    font-size: 18px;
  }

  section.term_section p,
  section.term_section li {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Blood Test and Product Finder reuse .hero-content, which responsive.css
     already sizes to 40px on mobile — the same as the home hero — so they
     need nothing here. */
}


/* =========================================================================
   HEADER-TO-CONTENT SPACING — MOBILE
   =========================================================================
   The banner pages (About, Products) sit 48px below the header bar: main
   contributes 26px and .listing_section another 22px. Pages that open with
   a title instead of a banner were landing at 104px — main's full 64px plus
   their own 40px section padding — so their headings started more than
   twice as far down.

   Matched to the banner pages here. Scoped to these four section types on
   purpose: home, About, Products, Blood Test and Product Finder are already
   correct and must not shift.
   ========================================================================= */

@media (max-width: 768px) {

  main:has(> .faq_section:first-child),
  main:has(> .blog_section:first-child),
  main:has(> .contact_section:first-child),
  main:has(> .term_section:first-child) {
    padding-top: 26px;
  }

  .faq_section:first-child,
  .blog_section:first-child,
  .contact_section:first-child,
  .term_section:first-child {
    padding-top: 22px;
  }
}


/* =========================================================================
   HERO PAGES — HEADER / BANNER SPACING (DESKTOP)
   =========================================================================
   The header keeps the same floating position it has on the home page
   (the pill sits at 79-151). About and Products previously started their
   banner at exactly the header's bottom edge, so the two touched; now the
   banner clears the pill by ~20px.

   The offset is a single value on the section: main's own top padding is
   zeroed for these pages so there is only one number to reason about,
   rather than 64px of padding plus 3.5rem of margin stacking up.

   Product Finder is left flush — its banner is the tall full-bleed style,
   like the home hero, and its heading already clears the header by 113px.
   Desktop only; the mobile spacing is set separately.
   ========================================================================= */

@media (min-width: 769px) {

  main:has(> .listing_section:first-child),
  main:has(> .quiz_section:first-child) {
    padding-top: 0;
  }

  /* 45px feature bar + 126px = banner starts at 171, ~20px below the
     header pill. Outranks `section.listing_section { margin-top: 3.5rem }`
     in product.css. */
  section.listing_section:first-child {
    margin-top: 126px;
  }
}

/* =========================================================================
   CONTACT — FIELD RHYTHM + PHONE COUNTRY CODE
   ========================================================================= */

/* ---- 1. Even spacing between every field ----
   .contact_grid supplies a 20px gap AND each .contact_field carried its own
   20px bottom margin, so the two rows inside the grid sat 40px apart while
   Subject and Details — outside the grid — sat 20px apart. Dropping the
   margin inside the grid and moving it to the grid itself makes every gap
   20px, on both breakpoints. */
.contact_grid > .contact_field {
  margin-bottom: 0;
}

.contact_grid {
  margin-bottom: 20px;
}

/* ---- 2. Phone: dial code trigger beside the number ---- */
.contact_phone_row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.contact_phone_row .contact_code_select {
  position: relative;
  flex: 0 0 auto;
}

.contact_phone_row #contact_phone {
  flex: 1 1 auto;
  min-width: 0;
}

.contact_code_btn {
  height: 100%;
  min-width: 96px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  border-radius: 4px;
  background: #D2EAFFB2;
  border: 0.74px solid #272727;
  color: var(--text-color);
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.contact_field.has_error .contact_code_btn {
  border-color: #c0392b;
}

/* The list is wider than its trigger so the country name has room; it is
   pinned to the trigger's left edge and capped to the viewport so it can
   never push the page sideways on a phone. */
.contact_code_dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  width: 280px;
  max-width: calc(100vw - 40px);
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s;
}

.contact_code_select.active .contact_code_dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.contact_code_option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  transition: .2s;
  font-size: 15px;
}

.contact_code_option:hover {
  background: #f3f8ff;
}

.contact_code_option_code {
  flex: 0 0 58px;
  color: var(--text-color);
  font-weight: 500;
}

.contact_code_option_name {
  color: #6B7A90;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {

  .contact_code_btn {
    min-width: 86px;
    padding: 14px 12px;
    font-size: 16px;
  }

  .contact_code_dropdown {
    width: 260px;
  }
}

/* =========================================================================
   PRIVACY / COMPLIANCE / DISCLAIMER — FAQs FORMAT
   =========================================================================
   These three pages are presented as the FAQs page's accordion. The section
   keeps its .term_section class so the header-spacing rules further up still
   match it; .term_section--faq only re-points width, title and content
   spacing at the FAQs values. The .faq_item markup the script builds picks
   up the existing FAQs styling untouched.

   Terms & Conditions is deliberately NOT part of this — it keeps the plain
   document layout.
   ========================================================================= */

.term_section--faq .term_container {
  max-width: 1000px;
}

.term_section--faq .term_content {
  max-width: 100%;
}

.term_section--faq .term_heading_wrap h1 {
  color: #18458C;
}

/* .term_block carried a 50px top margin; the FAQs page has no such gap —
   the heading's own bottom margin is the whole spacing there. */
.term_section--faq .legal_faq_list {
  margin-top: 0;
}

/* Match the FAQs container's 15px gutter so the cards are the same width. */
.term_section--faq .term_container {
  padding-left: 15px;
  padding-right: 15px;
}

/* `.term_content p` adds a 16px top margin on these pages, which would open
   every panel with a gap above its first line. */
.term_section--faq .faq_answer_inner > :first-child {
  margin-top: 0;
}

/* Desktop only: below 769px the existing legal mobile block already sizes
   the heading, and this selector is heavier than it, so scoping matters. */
@media (min-width: 769px) {

  .term_section--faq .term_heading_wrap {
    margin-bottom: 20px;
  }

  .term_section--faq .term_heading_wrap h1 {
    font-size: 52px;
  }
}

@media (max-width: 768px) {

  .term_section--faq .term_heading_wrap {
    margin-bottom: 24px;
  }
}


/* =========================================================================
   VERIFY OTP — MOBILE CODE BOXES
   =========================================================================
   Six 60px boxes with 20px gaps need 460px and ran 36px past a 390px
   viewport. Letting them share the column keeps all six on one row at any
   phone width.

   This lives at the end of the sheet on purpose: the base .otp-inputs rules
   are declared further down than the login RESPONSIVE block, and at equal
   specificity the later declaration wins — putting these up there had no
   effect at all.
   ========================================================================= */

@media (max-width: 860px) {

  .otp-inputs {
    padding: 18px 0 30px;
  }

  .otp-inputs form {
    gap: 8px;
  }

  .otp-inputs input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 56px;
    height: 58px;
    font-size: 18px;
  }
}

/* =========================================================================
   REGISTER — STICKY BRAND PANEL (DESKTOP)
   =========================================================================
   The register form runs taller than one screen, so the artwork scrolled
   away with it. Pinning the panel keeps it in place while the fields move.

   Two things this needs to work at all:
   - style.css sets `body { overflow-x: hidden }`, which makes the body its
     own scroll container and silently disables position:sticky for
     everything inside it. html keeps overflow-x:hidden, so sideways
     overflow is still clipped at the viewport.
   - the panel is a flex item, and the default `align-self: stretch` would
     size it to the full page height, leaving it nothing to stick within.

   Declared at the end of the sheet because the base .brand-panel rules and
   the login RESPONSIVE block are both further down than where this would
   otherwise sit, and at equal specificity the later rule wins.
   ========================================================================= */

@media (min-width: 861px) {

  body:has(.page--sticky-brand) {
    overflow-x: visible;
  }

  .page--sticky-brand .brand-panel {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    min-height: 100vh;
  }
}

/* =========================================================================
   REGISTER — PHONE COUNTRY CODE
   =========================================================================
   Same behaviour as the Contact form's phone field, styled to Register's
   own inputs (#DFF0FE fill, 1px #272727 border, 14px radius) rather than
   Contact's. Kept on its own class names so neither page can shift the
   other. Declared at the end of the sheet for source order.
   ========================================================================= */

.reg_phone_row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.reg_phone_row .reg_code_select {
  position: relative;
  flex: 0 0 auto;
}

.reg_phone_row #phone {
  flex: 1 1 auto;
  min-width: 0;
}

.reg_code_btn {
  height: 100%;
  min-width: 92px;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  background: #DFF0FE;
  border: 1px solid #272727;
  border-radius: 14px;
  color: #2c3e50;
  font-family: inherit;
  font-size: 16px;
  white-space: nowrap;
}

.reg_code_arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #163f78;
  border-bottom: 2px solid #163f78;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Wider than its trigger so the country name has room, and capped to the
   viewport so it can never push the page sideways on a phone. */
.reg_code_dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  width: 280px;
  max-width: calc(100vw - 40px);
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s;
}

.reg_code_select.active .reg_code_dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.reg_code_option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  transition: .2s;
  font-size: 15px;
}

.reg_code_option:hover {
  background: #f3f8ff;
}

.reg_code_option_code {
  flex: 0 0 58px;
  color: var(--text-color);
  font-weight: 500;
}

.reg_code_option_name {
  color: #6B7A90;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {

  .reg_code_btn {
    min-width: 86px;
    padding: 15px 10px;
  }

  .reg_code_dropdown {
    width: 260px;
  }
}

/* =========================================================================
   AUTH PAGES — CLICKABLE LOGO + BACK ARROW
   ========================================================================= */

/* The logo is wrapped in a link now. The anchor takes the full column width
   so the img's existing 45% (54% on mobile) still resolves against the same
   box it always did — sizing is unchanged, the mark is just clickable. */
.logo-block a {
  display: block;
  width: 100%;
  text-align: center;
}

/* Positioned against .page so the arrow sits in the corner of the screen
   rather than inside the form column. */
.page {
  position: relative;
}

.auth_back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #DFF0FE;
  border: 1px solid #27272733;
  color: #1D4A84;
  text-decoration: none;
  transition: background .2s ease, transform .12s ease;
}

.auth_back:hover {
  background: #C9E6FF;
}

.auth_back:active {
  transform: scale(.94);
}

@media (max-width: 860px) {

  .auth_back {
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
  }
}