/* ===== Switzer Variable Font ===== */

@font-face {
  font-family: 'Inter';
  src:
    url('../fonts/Inter_28pt-Regular.woff2') format('woff2'),
    url('../fonts/Inter_28pt-Regular.woff') format('woff');

  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src:
    url('../fonts/Inter_24pt-Medium.woff2') format('woff2'),
    url('../fonts/Inter_24pt-Medium.woff') format('woff');

  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src:
    url('../fonts/InstrumentSerif-Regular.woff2') format('woff2'),
    url('../fonts/InstrumentSerif-Regular.woff') format('woff');

  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --nav-blue: #1D4A84;
  --nav-blue-dark: #163c72;
  --white: #ffffff;
  --text-color: #1D4A84;
  --shadow: 0 10px 30px rgba(0, 0, 0, .12);
  --bg-color: rgba(29, 74, 132, 1);
  --bg-light: #F0F8FF;

}

body {
  margin: 0;
  color: var(--text-color);
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
}

a,
a:active,
a:visited {
  text-decoration: none;
}

a {
  color: #000000;
}

button {
  color: #000;
  cursor: pointer;
}

img {
  background: 0 0;
  background-color: transparent;
  max-width: 100%;
  height: auto;
}

html {
  overflow-x: hidden;
}

ul li {
  list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

h1 {
  font-weight: 500;
  font-style: normal;
  font-size: 52px;
  line-height: 1.18;
  letter-spacing: 0;
  vertical-align: middle;
}

p {
  font-weight: 400;
  font-size: 17px;
  line-height: 160%;
  letter-spacing: 0;
  text-align: justify;
  color: #1F1F1F;
}

h2 {
  font-weight: 600;
  font-style: normal;
  font-size: 42px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: capitalize;
  margin-bottom: 25px;
  text-align: left;
  color: var(--text-color);

}

h3 {
  font-weight: 500;
  font-style: normal;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle
}

.lg-none {
  display: none;
}

.sm-none {
  display: block
}

/*=== tobar===*/
.top-feature-bar {
  width: 100%;
  background: #D2EAFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;

  padding: 14px 20px;
  flex-wrap: wrap;
}

.top-feature-track {
  display: contents;
}

.feature-item[aria-hidden="true"] {
  display: none;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  transition: transform .3s ease;
}

.feature-item:hover {
  transform: translateY(-4px);
}

.feature-item img {
  width: 25px;
}

/* ====NAVBAR============ */

.cp-navbar-wrap {
  width: 100%;
  padding: 14px;
  position: absolute;
  top: 65px;
  z-index: 999;
}

.cp-navbar {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: var(--nav-blue);
  border-radius: 999px;

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

  padding: 12px 24px;
  min-height: 72px;

  box-shadow: var(--shadow);
}

/* =========================
   LOGO
========================= */

.cp-logo {
  flex-shrink: 0;
}

.cp-logo img {
  height: 40px;
  width: auto;
}

/* =========================
   DESKTOP LINKS
========================= */

.cp-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

.cp-nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: opacity .25s ease;
}

.cp-nav-links a:hover,
.cp-nav-links a:focus-visible {
  opacity: .75;
}

.cp-nav-links .cp-consult-btn:hover,
.cp-nav-links .cp-consult-btn:focus-visible {
  opacity: 1;
}


/* =========================
   RIGHT ACTIONS
========================= */

.cp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


.cp-consult-btn:hover,
.cp-consult-btn:focus-visible {
  background: #fff;
  transform: translateY(-1px);
}

.cp-icon-btn {
  width: 42px;
  height: 42px;

  border: none;
  background: transparent;
  color: #fff;

  border-radius: 50%;
  cursor: pointer;

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

  font-size: 20px;

  transition: background .25s ease;
}

.cp-icon-btn:hover,
.cp-icon-btn:focus-visible {
  background: rgba(255, 255, 255, .12);
}

.cp-cart-btn {
  position: relative;
  text-decoration: none;
}

.cp-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0384c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* =========================
   MOBILE TOGGLE
========================= */

.cp-mobile-toggle {
  display: none;

  width: 46px;
  height: 46px;

  border: none;
  background: transparent;
  cursor: pointer;

  position: relative;
}

.cp-mobile-toggle span {
  position: absolute;
  left: 11px;

  width: 24px;
  height: 2px;

  background: #fff;
  border-radius: 10px;

  transition: all .35s ease;
}

.cp-mobile-toggle span:nth-child(1) {
  top: 14px;
}

.cp-mobile-toggle span:nth-child(2) {
  top: 22px;
}

.cp-mobile-toggle span:nth-child(3) {
  top: 30px;
}

/* ACTIVE ICON */

.cp-mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 22px;
}

.cp-mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.cp-mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 22px;
}

/* =========================
   MOBILE MENU
========================= */

.cp-mobile-menu {
  position: absolute;
  top: 100%;
  left: 14px;
  right: 14px;

  overflow: hidden;

  max-height: 0;
  opacity: 0;
  visibility: hidden;

  transition:
    max-height .45s cubic-bezier(.4, 0, .2, 1),
    opacity .3s ease,
    transform .3s ease;

  transform: translateY(-10px);
}

.cp-mobile-menu.active {
  max-height: 600px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cp-mobile-inner {
  margin-top: 12px;

  background: var(--nav-blue);
  border-radius: 28px;

  padding: 22px;

  box-shadow: var(--shadow);

  display: flex;
  flex-direction: column;
  gap: 6px;

  animation: mobileMenu .35s ease;
}

@keyframes mobileMenu {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cp-mobile-inner a {
  color: #fff;
  text-decoration: none;

  padding: 14px 16px;
  border-radius: 14px;

  font-size: 15px;
  font-weight: 500;

  transition: background .25s ease;
}

.cp-mobile-inner a:hover {
  background: rgba(255, 255, 255, .08);
}

.cp-mobile-btn {
  background: #d8e8ff;
  color: var(--nav-blue) !important;

  text-align: center;
  font-weight: 700 !important;

  margin-top: 10px;
}


.cp-actions img {
  width: 30px;
}

a.cp-consult-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 34px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--nav-blue);
  background: linear-gradient(360deg, #FFFFFF, #c8e8ff), radial-gradient(265.03% 104.21% at 50.53% 100%, #CFEAFF 0%, #F2F9FF 19.7%, #B7DFFF 68.74%);
  color: var(--nav-blue);
  padding: 12px 20px;
  border-radius: 999px;
  transition: all .25s ease;
  white-space: nowrap;
}

/* ====NAVBAR end============ */
/*==banner===*/
.hero-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #d2eaff;
}

.hero-banner {
  width: 100%;
  min-height: 90vh;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 80px;
  position: relative;
}

/* Legibility scrim — keeps hero text readable regardless of what
   background photo gets uploaded from admin (busy product shots,
   light backgrounds, etc). Fades out toward the right so the image
   still shows through. */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(240, 248, 255, 0.35) 0%, rgba(240, 248, 255, 0.18) 20%, rgba(240, 248, 255, 0.05) 35%, rgba(240, 248, 255, 0) 45%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  max-width: 70%;
  padding-top: 4rem;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-weight: 600;
  font-size: 60px;
  line-height: 68px;
  letter-spacing: 0;
  vertical-align: middle;
  color: #1d4d8f;
}

.hero-content h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 68px;
  letter-spacing: 0;
  vertical-align: middle;
  color: #294b7d;
  margin-bottom: 24px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #1D4A84AD;
  max-width: 560px;
  margin-bottom: 36px;
}

/* =========================
       BUTTONS
    ========================= */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 42px;
}

.hero-btn {
  min-height: 58px;
  padding: 0 34px;

  border-radius: 999px;

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

  text-decoration: none;

  font-size: 16px;
  font-weight: 600;

  transition: .3s ease;
}

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

.hero-btn {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(196, 224, 249, 0.22);

  color: #1d4d8f;
}

.hero-content>* {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}

.swiper-slide-active .hero-content>* {
  opacity: 1;
  transform: translateY(0);
}

/* stagger effect */
.swiper-slide-active h1 {
  transition-delay: .1s;
}

.swiper-slide-active h2 {
  transition-delay: .2s;
}

.swiper-slide-active p {
  transition-delay: .3s;
}

.swiper-slide-active .hero-buttons {
  transition-delay: .4s;
}

.swiper-slide-active .hero-features {
  transition-delay: .5s;
}

/* =========================
       FEATURES
    ========================= */

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}


.swiper-pagination {
  bottom: 20px !important;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 1;
  background: rgba(255, 255, 255, .4);
}

.swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 30px;
  background: #fff;
}


/* =========================
   TRUST BAR
========================= */
.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 25px;
  margin: 0 auto;
  background: var(--bg-color);
  border-radius: 10px;
  contain: layout paint;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.trust-content {
  min-width: 0;
}

.trust-title {
  display: block;
  margin: 0;
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.trust-text {
  margin: 2px 0 0;
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.trust-divider {
  width: 1px;
  height: 38px;
  background: var(--trust-divider);
  flex-shrink: 0;
}

.trust-item img {
  width: 35px;
}

.choose_path_heading {
  text-align: center;
}

.choose_path_section {
  padding-top: 4rem;
}

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

/* Grid */
.choose_path_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

article.choose_path_card p {
  color: var(--text-color);
}

.choose_path_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 340px;
  padding: 28px;
  border-radius: 24px;
  background: #EEF7FF;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
  will-change: transform;
  box-shadow: 0px 5px 13px rgb(191 191 191 / 34%);
}

article.choose_path_card h3 {
  font-size: 24px;
  font-weight: 600;
}

.choose_path_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26, 62, 116, .12);
}

.choose_path_icon_wrap {
  margin-bottom: 22px;
}

.choose_path_icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
  will-change: transform;
}

/* Small animation */
.choose_path_card:hover .choose_path_icon {
  transform:
    translateY(-4px) rotate(-6deg) scale(1.08);
}

/* Title */
.choose_path_icon_wrap h3 {
  margin: 0 0 12px;
  color: var(--choose_path_primary);
  font-family: "Inter", sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}

/* Button */
.choose_path_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 58px;
  margin-top: auto;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  color: #fff;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  transition:
    transform .25s ease,
    opacity .25s ease,
    box-shadow .25s ease;
  box-shadow:
    inset -3px -3px 7px rgba(18, 114, 189, 0.9),
    inset 3px 3px 7px rgba(95, 165, 231, 0.5);

}

/* Button hover */
.choose_path_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(31, 75, 143, .22);
}

/* Accessibility */
.choose_path_btn:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

.choose_path_card:focus-within {
  box-shadow:
    0 0 0 3px rgba(13, 110, 253, .25),
    0 16px 40px rgba(26, 62, 116, .12);
}

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

  .choose_path_card,
  .choose_path_icon,
  .choose_path_btn {
    transition: none;
  }

  .choose_path_card:hover,
  .choose_path_btn:hover,
  .choose_path_card:hover .choose_path_icon {
    transform: none;
  }
}

/* ===AI Stack Builder=== */

.ai_stack_grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 25px;
}

.ai_card {
  background: #fff;
  border: 1px solid #57B1FF4D;
  border-radius: 24px;
  box-shadow: 0px 20px 40px rgba(209, 209, 209, 0.12);
  padding: 24px 24px 0 24px;
  min-height: 420px;
  overflow: hidden;
}

.ai_card_hero {
  background: #F0F8FF;
  border: none;
}

.ai_powered {
  font-size: 14px;
  font-weight: 700;
  color: var(--ai-text);
  margin-bottom: 30px;
}

.ai_card.ai_card_hero h2 {
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 40px;
}

.ai_cta {
  border: none;
  width: 100%;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(90deg, #4FAEF9 0%, #0073FF 100%);
  box-shadow: -3px -3px 7px 0px #1272BD inset;

  box-shadow: 3px 3px 7px 0px #5FA5E794 inset;

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

.ai_cta:hover,
.ai_cta:focus-visible {
  background: linear-gradient(90deg, #0073FF 0%, #4FAEF9 100%);
  box-shadow: 3px 3px 7px 0px #5FA5E794 inset,
    0 12px 24px rgba(0, 115, 255, .28);
  transform: translateY(-3px);
}

/* The three step cards are a static illustration of the flow — nothing in
   them is clickable, so they should not show a clickable cursor. */
section.ai_stack .ai_goal_item,
section.ai_stack .ai_goal_check,
section.ai_stack .ai_add_btn,
section.ai_stack .ai-quantity-decrease,
section.ai_stack .ai-quantity-increase {
  cursor: default;
}

.ai_step_no {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d2eaff;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.ai_step_title {
  font-size: 32px;
  line-height: 1.2;
  color: var(--ai-text);
  margin-bottom: 14px;
}

.ai_step_desc {
  color: var(--ai-muted);
  margin-bottom: 28px;
}

.ai_goal_box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-light);
  padding: 20px;
  border-radius: 10px;
  height: 100%;
}

.ai_goal_item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #edf3fd;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  background: #FFFFFF;

}

label.ai_goal_item span {
  font-weight: 500;
  font-size: 14px;
}

.ai_goal_item input {
  display: none;
}

.ai_goal_check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  border: 2px solid #1D4A84;
}

.ai_goal_item input:checked+.ai_goal_check {
  background: var(--text-color);
  border-color: var(--ai-text);
}

.ai_goal_item input:checked+.ai_goal_check:after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-size: 11px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ai_metric {
  margin-bottom: 28px;
}

.ai_metric_title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.ai_metric_value {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 12px;
  padding-top: 10px;
}

.ai-div {
  min-height: 140px;
}

.ai_slider {
  position: relative;
  height: 6px;
  background: rgba(249, 249, 249, 1);
  border-radius: 999px;
}

.ai_slider_fill {
  width: 62%;
  height: 100%;
  height: 7px;
  background: #0088FF;
  border-radius: 999px;
}

.ai_slider_fill2 {
  width: 70%;
}

.ai_slider_thumb {
  position: absolute;
  left: 62%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: #0088FF;

  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: solid 3px #fff;
}

.ai_slider_thumb2 {
  left: 70%;
}

.ai_product {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.ai_product img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  border-radius: 10px;
}

.ai_product_info {
  flex: 1;
}

.ai_product_info h4 {
  color: var(--ai-text);
  margin-bottom: 4px;
}

.ai_product_info span {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
}

.ai_product_price {
  display: flex;
  gap: 3px;
  align-items: flex-start;
}

.ai_product_price span {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
}

.ai_add_btn {
  width: calc(100% - 30px);
  height: 41px;
  margin: 0 15px 20px 15px;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  box-shadow: -3px -3px 7px 0px #3062A4 inset;
  box-shadow: 3px 3px 7px 0px #4A88C294 inset;
}

.ai_list {
  padding: 20px 15px 10px 15px;
  display: flex;
  justify-content: space-between;
}

span.ai_item {
  color: #4FAEF9;
  font-weight: 500;
}

.ai_list span {
  font-size: 14px;
  font-weight: 500;
}

section.ai_stack {
  padding: 4rem 0;
}

.ai_card h3 {
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 30px;
  text-align: left;
  padding-bottom: 10px;
  width: 80%;
}

.ai_goal_box span {
  font-weight: 500;
}

.ai_powered span {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #1F4B8F;
}

.ai_powered {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai_stack_grid p {
  color: var(--text-color);
}

.ai_card.ai_card_hero p {
  padding-bottom: 20px;
}

.ai_metric_box {
  background: var(--bg-light);
  padding: 20px;
  border-radius: 10px;
}

.ai-product-quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai_product_box {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.ai-quantity-decrease,
.ai-quantity-increase {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text-color);
}

.ai-quantity-count {
  font-size: 20px;
  min-width: 20px;
  text-align: center;
}

.ai_product_price img {
  width: 12px;
}

.choose_path_heading h2 {
  text-align: center;
}

.ai_product_price img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.ai_price_box {
  background: #F0F8FF;
  height: 100%;
}

.goal-slider-section {
  display: flex;
  align-items: flex-end;
  gap: 60px;
}

.goal-content {
  width: 45%;
}

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

.goalSwiper {
  width: 100%;
  overflow: hidden;
}

.goal_slide_link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.goal-item {
  position: relative;
  padding-top: 60px;
}

.goal-item img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 105px;
  object-fit: contain;
  transform: translateX(-50%) rotate(-15deg);
  z-index: 2;
}

.goal-card {
  background: #d2eaff;
  border-radius: 12px;
  height: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

/* Progress */

.goal-progress {
  width: 320px;
  height: 8px;
  background: #dddddd;
  border-radius: 999px;
  position: relative;
  margin-top: 30px;
  overflow: hidden;
}

/* Range indicator: the fill width shows how much of the product range is
   visible, translateX shows how far along that range the slider is. */
.goal-progress-fill {
  display: block;
  width: 25%;
  height: 100%;
  background: #4DA3FF;
  border-radius: 999px;
  transform: translateX(0);
  transition: transform .5s ease;
  will-change: transform;
}

/* While the slider is being dragged the bar follows the drag exactly. */
.goal-progress-fill.is-dragging {
  transition: none;
}

.goal-card span {
  color: #000000;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  padding: 0 12px;
}

section.goal-section {
  padding: 4rem 0 0 0;
}

/* Goal card hover — desktop / pointer devices only */
.goal_slide_link .goal-card {
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.goal_slide_link .goal-card span {
  transition: color .35s ease;
}

.goal_slide_link .goal-item img {
  transition: transform .45s ease;
}

@media (hover: hover) and (min-width: 992px) {

  .goal_slide_link:hover .goal-card {
    background: #b9dcff;
    box-shadow: 0 16px 30px rgba(29, 74, 132, .18);
    transform: translateY(-6px);
  }

  .goal_slide_link:hover .goal-card span {
    color: #1D4A84;
  }

  .goal_slide_link:hover .goal-item img {
    transform: translateX(-50%) rotate(-4deg) scale(1.08);
  }
}

/*--tab----*/

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

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

.best_tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.best_tab {
  padding: 6px 15px;
  border-radius: 999px;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  background: #B3B3B32B;
  transition: all .2s
}

.best_tab:hover {
  border-color: #1a4fa8;
  color: #1a4fa8
}

a.best_tab.best_tab_link {
  border: 1px solid #77C0FF;
  background-color: transparent;
  color: #00000087;

}

.best_tab.best_tab_active {
  color: #fff;
  background: #77C0FF;

}

.best_slider {
  width: 100%;
  padding: 30px 0;
  padding-left: 3rem;
  padding-bottom: 4rem;
}

.best_marquee {
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 0 4rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.best_marquee_track {
  display: flex;
  width: max-content;
  gap: 25px;
  animation: best_marquee_scroll 45s linear infinite;
}

.best_marquee:hover .best_marquee_track {
  animation-play-state: paused;
}

.best_marquee_item {
  flex-shrink: 0;
  width: 352px;
}

.best_marquee_item.best_hidden {
  display: none;
}

@keyframes best_marquee_scroll {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(-50%);
  }
}

@media (max-width: 700px) {
  .best_marquee_item {
    width: 260px;
  }
}

.swiper-slide {
  width: 210px;
  height: auto
}

.best_card {
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  height: 100%;
  padding: 10px;
  box-shadow: -3px -1px 33px #b3b3b361, 0px 59px 59px #B3B3B317, 0px 133px 80px #B3B3B30D, 0px 237px 95px #B3B3B303;
}


@keyframes best_fadeup {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.best_card.best_anim {
  animation: best_fadeup .38s ease both
}

.best_img {
  background: #e5e5e5;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.best_img img {
  height: 130px;
  width: auto;
  object-fit: contain
}

.best_badge {
  position: absolute;
  top: 10px;
  left: 0px;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;

}

.best_badge_pink {
  background: #FAD2D2;
  color: #000000;
}

.best_badge_amber {
  background: #D2E6FA;

}

.best_badge_blue {
  background: #FAF8D2;
}

.best_badge_teal {
  background: #FAF8D2;

}

.best_body {
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
}

.best_name_link {
  display: block;
  transition: color .25s ease;
}

.best_name_link:hover .best_name,
.best_name_link:focus-visible .best_name {
  color: #1D4A84;
}

.best_body .best_name {
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  min-height: 52px;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

p.best_desc {
  width: 100%;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  min-height: 40px;
  margin-bottom: 0;
  color: #5b5b5b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.best_feats {
  display: flex;
  gap: 10px;
  padding: 12px 0px;
}

.best_feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px
}

.best_feat_icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.best_feat_icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* The icon PNGs (Immune_Support.png, Cellular.png, Physical.png) already
   contain the full glossy gradient badge (circle + halo + glyph) baked in.
   The default .best_feat_icon wraps them in its own flat pale-blue circle,
   which doubles up the badge look and squashes the image down. Drop that
   wrapper styling here and just size the image itself, so the baked-in
   badge shows at full size — matching the product listing page's
   .product_listing override in list.html. Scoped to the home page
   bestsellers marquee only. */
.best_marquee .best_feat_icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.best_marquee .best_feat_icon img {
  width: 72px;
  height: 72px;
}

.best_feat_label {
  font-size: 14px;
  line-height: 20px;
  width: 90%;
  padding-top: 5px;
  text-align: center;
  color: #3E3E3E;
}

.best_prices span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  text-transform: capitalize;
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 5px;
}

span.best_price_now {
  color: #000;
}

.best_prices img {
  width: 20px;
}

.best_body p {
  color: #000000;
  font-weight: 500;
  font-size: 16px;
}

.best_prices {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}

.best_price_now {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary)
}

.best_price_was {
  text-decoration: line-through;
  color: #0F101073;
  text-decoration: line-through;
}

.best_btn {
  width: 100%;
  padding: 13px 10px;
  border-radius: 50px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  border-image-source: linear-gradient(180deg, #4683D1 0%, #5B94DD 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .18s, transform .1s;
  box-shadow:
    inset -3px -3px 7px 0px #3062A4,
    inset 3px 3px 7px 0px #4A88C294;
}

.best_btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


.best_btn.best_btn_added {
  background: #0f6e56
}

button.best_btn:hover {
  background: linear-gradient(90deg, #4FAEF9 0%, #0073FF 100%);
}

.swiper-pagination-bullet {
  background: #1a3a7a;
  opacity: .3
}

.swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 999px;
  transition: all .3s
}

span.best_badge img {
  width: 17px;
  height: auto;
}


.bundle-card {
  background: #58a9ef;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px;
  overflow: hidden;
}

.bundle-image {
  flex: 0 0 43%;
}

.bundle-image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}

.bundle-content {
  flex: 1;
  color: #fff;
}

.bundle-content h2 {
  margin: 0 0 10px;
  color: #fff;
  font-weight: 500;
}

.bundle-buttons a {
  text-transform: uppercase;
}

section.bundle-section {
  padding-bottom: 4rem;
}

ul.bundle-list li {
  list-style-type: disc;
}

.subtitle {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
  margin-top: 0;
  margin-bottom: 18px;
}

.bundle-list {
  list-style: disc;
  padding-left: 18px;
  margin-bottom: 18px;
}

.bundle-list li {
  font-size: 16px;
  line-height: 1.6;
}

.price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 36px;
  margin-bottom: 24px;
}

.price img {
  width: 35px;
}

.bundle-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  text-decoration: none;
  min-width: 160px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  transition: .3s ease;
}

.btn-primary {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  min-width: 30%;
  transition: background .18s, transform .1s;
  box-shadow: inset -3px -3px 7px 0px #3062A4, inset 3px 3px 7px 0px #4A88C294;
}

.btn-primary:hover {
  background: #1d4478;
}

.btn-secondary {
  background: #fff;
  color: #25579c;
}

.btn-secondary:hover {
  background: #f2f2f2;
}


/*=== reset ====*/

.health__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 auto;
}

.health__card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  will-change: transform;
  transform: translateZ(0);
}

/* ── image ── */
.health__card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: 0px 73px 21px 0px #9494945c;
}

/*--EXPLORE--*/
.explore_section {
  padding: 3rem 0;
}

.explore_heading {
  margin-bottom: 40px;
}

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

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

.explore_card {
  position: relative;
  display: block;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  color: #111;
}

/* Animated Border */
.explore_card {
  position: relative;
  border: 2px solid transparent;
  border-radius: 20px;
  overflow: hidden;
  background: #4FAEF9;
}

.explore_card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}

/* Fill Layer */
.explore_card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #4FAEF9;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s ease;
  z-index: 0;
}

/* Triggered on scroll */
.explore_card.explore_fill::before {
  transform: scaleY(1);
}

/* Content stays above fill */
.explore_card_top,
.explore_card_img {
  position: relative;
  z-index: 2;
}

.explore_card_top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 10px 0;
  position: relative;
  z-index: 2;
}

.explore_card_top img {
  width: 30px;
  flex-shrink: 0;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* Arrow tilts up on hover */
@media (hover: hover) {

  .explore_card:hover .explore_card_top img {
    transform: rotate(45deg) scale(1.08);
  }
}

.explore_card_top span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.explore_card_img {
  height: 330px;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore_card_img img {
  width: 100%;
  height: 100%;
  transition: .5s ease;
  border-radius: 20px;
}

.explore_card:hover .explore_card_img img {
  transform: scale(1.08);
}

.Reviews_section {
  padding: 1rem 0 4rem 0;
  overflow: hidden;
}

.Reviews_heading {
  text-align: center;
  margin-bottom: 40px;
}

.Reviews_heading h2 {
  text-align: center;
}

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

.Reviews_slider {
  overflow-x: hidden;
  overflow-y: visible;
}

.Reviews_card {
  background: #fff;
  border: 1px solid #77C0FF6B;
  border-radius: 18px;
  padding: 24px;
  height: 100%;
  box-shadow: 0 4px 8px rgb(237 237 237), 0 16px 24px rgba(168, 168, 168, 0.06);
  transition: transform .3s ease;
}

.Reviews_card:hover {
  transform: translateY(-4px);
}

.Reviews_user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.Reviews_user img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.Reviews_user h3 {
  font-size: 24px;
  font-weight: 500;
  color: #000000;
}

/*=========================
  Guidance
=========================*/
.Guidance_section {
  position: relative;
  padding: 65px 0;
  overflow: hidden;
  background: url(../images/Guidance_banner.webp);
  background-position: center;
  background-size: cover;
}

.Guidance_overlay {
  position: absolute;
  inset: 0;
  background: rgba(29, 74, 132, 0.07);
  z-index: 1;
}

section.Guidance_section .container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 385px;
  gap: 80px;
  align-items: center;
}

.Guidance_content {
  max-width: 520px;
  padding: 48px;
  border-radius: 32px;
  background: #1D4A841A;
  backdrop-filter: blur(10px);
}

.Guidance_subtitle {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 24px;
  display: block;
  font-family: "Instrument Serif", serif;
  text-align: left;
  margin-bottom: 24px;
}


.Guidance_btn {
  width: 100%;
  padding: 15px 10px;
  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: 30px;
  transition: background .18s, transform .1s;
  box-shadow: inset -3px -3px 7px 0px #3062A4, inset 3px 3px 7px 0px #4A88C294;

  transition: .35s;
}

.Guidance_btn:hover {
  transform: translateY(-3px);
}

.Guidance_features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.Guidance_item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 20px;
  background: #1D4A841A;
  backdrop-filter: blur(8px);
  transition: .35s;
}

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

/* On-load entrance state. JS (guidance.html) adds this class to every item
   the instant the page loads, then removes it — staggered per item, via an
   IntersectionObserver — once the section scrolls into view. Reuses the
   .35s transition already defined on .Guidance_item above, so the reveal
   and the hover slide share the exact same speed/easing. Nothing hides the
   items if JS is unavailable, since the class is only ever added by JS. */
.Guidance_item.Guidance_item_hidden {
  opacity: 0;
  transform: translateX(-30px);
}

.Guidance_item img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.Guidance_item span {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}

.top {
  margin-top: 3rem;
}

.research_section {
  padding: 4rem 0;
}

.research_heading {
  margin-bottom: 40px;
}

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


.research_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.research_card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: #E9F5FF;
  border-radius: 18px;
  transition: transform .3s ease;
}

.research_card:hover {
  transform: translateY(-4px);
}

.research_image {
  width: 100px;
  height: 100px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.research_card h3 {
  font-size: 21px;
  width: 60%;
  text-align: left;
  line-height: 28px;
}



/*======*/
.cta_banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 40px 50px;
  margin: 0 10px;

  /* Flat base gradient sampled from cta_bg.webp with the three waves masked
     out, so the heading and buttons stay readable while the waves animate
     in on the ::before layer above it. */
  background: linear-gradient(163.7deg,
      #006BFF 0%,
      #0E7BFE 20%,
      #2E8CFD 40%,
      #4E9DFC 60%,
      #6DAEFB 80%,
      #8DBFF9 100%);
}

/* Background art lives on this pseudo-element (instead of directly on
   .cta_banner) so it can be scaled/faded in without moving the heading,
   buttons, or feature list on top of it. Sits behind .cta_container
   (z-index: 2) via z-index: 0. */
.cta_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/cta_bg.webp);
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transform: scale(.96);
  clip-path: ellipse(0% 0% at 2% 88%);
}

/* Same one-time reveal as the About page's .std_section / .std_bg_wave
   (static/css/style_new.css) — scale up + fade in once, the first time the
   section is 35% visible (see the IntersectionObserver in cta_banner.html),
   never repeating.

   On top of that scale+fade, the artwork is uncovered by an ellipse that
   grows out of the bottom-left, pausing on each of the three waves so they
   populate one by one from left to right. The stop radii come from where
   each wave's arc ends in cta_bg.webp (2138px wide): wave 1 at 22.6% of the
   width, wave 2 at 47.1%, wave 3 at 70.5% — the ellipse is stretched
   vertically so its leading edge curves the same way the waves do. */
.cta_banner.cta_active::before {
  animation: ctaWave 2.6s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes ctaWave {
  0% {
    transform: scale(.96);
    opacity: 0;
    clip-path: ellipse(0% 0% at 2% 88%);
  }

  12% {
    opacity: .95;
  }

  35% {
    opacity: 1;
  }

  /* wave 1 in */
  20% {
    clip-path: ellipse(24% 76% at 2% 88%);
  }

  32% {
    clip-path: ellipse(24% 76% at 2% 88%);
  }

  /* wave 2 in */
  50% {
    clip-path: ellipse(48% 152% at 2% 88%);
  }

  62% {
    clip-path: ellipse(48% 152% at 2% 88%);
  }

  /* wave 3 in */
  80% {
    clip-path: ellipse(72% 228% at 2% 88%);
  }

  88% {
    clip-path: ellipse(72% 228% at 2% 88%);
  }

  /* remaining background fills in */
  100% {
    transform: scale(1);
    opacity: 1;
    clip-path: ellipse(140% 440% at 2% 88%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta_banner::before {
    animation: none;
    opacity: 1;
    transform: scale(1);
    clip-path: none;
  }
}

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

.cta_content {
  max-width: 470px;
}

.cta_content h2 {
  color: #fff;
}

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

.cta_desc {
  margin: 10px 0 20px;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  width: 60%;
}

.cta_buttons {
  display: flex;
  gap: 14px;
}

.cta_buttons a {
  width: 100%;
  padding: 20px 10px;
  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;
}

.cta_buttons a:hover,
.cta_buttons a:focus-visible {
  background: linear-gradient(90deg, #3E8CCA 0%, #1D4A84 100%);
  transform: translateY(-3px);
  box-shadow: inset -3px -3px 7px 0px #3062A4,
    inset 3px 3px 7px 0px #4A88C294,
    0 14px 26px rgba(0, 0, 0, .22);
}

a.cta_btn_secondary {
  background: #C4E0F938;
  box-shadow: inset -3px -3px 7px 0px #c2c2c2, inset 3px 3px 7px 0px #dddedf94;
}

.cta_buttons a.cta_btn_secondary:hover,
.cta_buttons a.cta_btn_secondary:focus-visible {
  background: #C4E0F970;
  box-shadow: inset -3px -3px 7px 0px #c2c2c2,
    inset 3px 3px 7px 0px #dddedf94,
    0 14px 26px rgba(0, 0, 0, .18);
}

.cta_features {
  display: flex;
  gap: 50px;
}

.cta_feature {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 220px;
}

.cta_feature img {
  width: 40px;
}

.cta_feature h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

.cta_feature p {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
}


main {
  padding: 4rem 0;
}

/*---footer---*/
footer {
  background: linear-gradient(180deg, #D2EAFF 0%, #1D4A84 100%);
  padding: 2.5rem 1.5rem 1rem;
  color: #fff;
  margin: 0 10px;
  border-radius: 20px;
}


.ftr_top {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

a.ftr_logo img {
  width: 100%;
}

a.ftr_logo {
  width: 20%;
}

.ftr_socials {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: end;
}

.ftr_accordion_item {
  background: #ffff;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ftr_accordion_btn {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  padding: 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--text-color);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  gap: 12px;
  border-radius: 10px;
  transition: background .25s ease;
}

.ftr_accordion_btn:hover,
.ftr_accordion_btn:focus-visible {
  background: #EAF4FF;
}

/* The footer nav columns only collapse on mobile (see responsive.css), so
   the plus/minus affordance stays hidden on desktop. */
.ftr_nav_toggle_icon {
  display: none;
}

.ftr_accordion_section {
  width: 45%;
  padding-top: 25px;
}

.ftr_accordion_icon img {
  width: 23px;
}

.ftr_accordion_item.ftr_open .ftr_accordion_icon {
  background: rgba(255, 255, 255, 0.2)
}

.ftr_accordion_item.ftr_open .ftr_accordion_icon i {
  transform: rotate(45deg)
}

.ftr_accordion_body {
  max-height: 0;
  overflow: hidden;
  background: #FFFFFF;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease
}

.ftr_accordion_body_inner {
  padding: 0 16px 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #000;
}

.ftr_right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.ftr_nav_col h4 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 25px;
}

.ftr_nav_col a {
  display: block;
  font-size: 17px;
  color: var(--text-color);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color 0.2s, opacity 0.2s
}

.ftr_nav_col a:hover,
.ftr_nav_col a:focus-visible {
  opacity: .7;
}

.ftr_contact {
  width: 45%;
  padding-top: 25px;
}

.ftr_newsletter {
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 30px;
  border-radius: 20px;
  border: solid 1px #ffffff69;
}

.ftr_newsletter h4 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #fff
}

.ftr_newsletter_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px
}

.ftr_newsletter input {
  width: 100%;
  padding: 14px 15px;
  background: #FFFFFF7A;
  color: #fff;
  font-size: 17px;
  outline: none;
  border: none;
  border-radius: 50px;
}

.ftr_newsletter input::placeholder {
  color: #3062A49E;

}

.ftr_newsletter input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.18)
}

.ftr_email_row {
  grid-column: 1/-1
}

.ftr_subscribe_btn {
  width: 100%;
  background: #fff;
  color: #1a3a5c;
  padding: 14px;
  border-radius: 50px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-color);
  font-size: 20px;
  transition: background 0.2s, transform 0.1s;
}

.ftr_contact h5 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 25px;
  padding: 15px 0 0 0;
}

.ftr_subscribe_btn:hover {
  background: #e8f0ff
}

.ftr_subscribe_btn:active {
  transform: scale(0.98)
}

.ftr_divider {
  border: none;
  border-top: 0.5px solid rgb(224 239 254);
  margin: 1.5rem 0 1rem
}

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

.ftr_copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6)
}

.ftr_copyright a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color .2s ease
}

.ftr_copyright a:hover,
.ftr_copyright a:focus-visible {
  color: #fff;
  text-decoration: underline
}

.ftr_social {
  display: flex;
  gap: 8px
}

.ftr_social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s
}

.ftr_social a:hover {
  background: rgba(255, 255, 255, 0.25)
}

.ftr_disclaimer {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12)
}




.ftr_socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ftr_socials a {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  background: linear-gradient(180deg, #0073FF 0%, #0DA2FF 100%);

  border-image-source: linear-gradient(180deg, rgba(0, 136, 255, 0.3) 0%, rgba(119, 192, 255, 0.3) 100%),
    radial-gradient(63.87% 50% at 52.08% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

  box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 1);

  box-shadow: 0px 0px 0px 4px rgba(224, 233, 242, 1);

  box-shadow: 0px 3.71px 4.85px 0px rgba(87, 177, 255, 0.15);

  box-shadow: 0px 10.27px 13.4px 0px rgba(87, 177, 255, 0.22);

  box-shadow: 0px 24.72px 32.26px 0px rgba(87, 177, 255, 0.19);

  box-shadow: 0px 42px 107px 0px rgba(87, 177, 255, 0.34);

  box-shadow: 0px 1px 4px 2px rgba(210, 234, 255, 1) inset;

  box-shadow: 0px 1px 18px 2px rgba(210, 234, 255, 1) inset;
  border: 1px solid #fff;
}

.ftr_socials a::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
}

.ftr_socials img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ftr_socials a:hover {
  transform: translateY(-2px);
  transition: transform .25s ease;
}
.bottom_nav_bar {
        display: none;
}



/* =========================================================================
   SCROLL REVEAL
   =========================================================================
   Sections fade and lift into place the first time they scroll into view.
   The home page already does this per-element via AOS (data-aos attributes
   plus AOS.init in home.js); this covers every other page, and main.js
   skips any section that already contains AOS elements so nothing animates
   twice.

   The .reveal-on-scroll class is added by JavaScript, never in the markup —
   so if scripting is unavailable the content simply renders as normal
   rather than being stuck at opacity 0.
   ========================================================================= */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .75s cubic-bezier(.22, .61, .36, 1),
    transform .75s cubic-bezier(.22, .61, .36, 1);
}

/* Deliberately no will-change here. A lingering `will-change: transform`
   makes the element a containing block for position:fixed descendants,
   which detached the products page's filter drawer from the viewport and
   left it rendering inline above the footer. */

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

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

  .reveal-on-scroll,
  .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   DIRHAM GLYPH — ONE TREATMENT SITE-WIDE
   =========================================================================
   The symbol was pinned to a different pixel width in almost every place it
   appears (12px on cards, 17/18/19/21px in the cart), so it changed size
   relative to the amount from page to page and never sat on the digits'
   optical centre. Sizing it in `em` ties it to whatever the adjacent amount
   is set in, so one rule covers every context.

   The attribute selectors are doubled up on purpose: they need to outrank
   the per-component `width` rules in cart.css / product.css, which load
   after this file.

   The blue variant used to be a 22x16 PNG scaled up past its own
   resolution; it is now Dirham-blue.svg, the same vector artwork as the
   black, white and grey ones.
   ========================================================================= */

img[src*="Dirham-black"][src*="icon/"],
img[src*="Dirham-white"][src*="icon/"],
img[src*="Dirham-blue"][src*="icon/"],
img[src*="d_icon-gray"][src*="icon/"] {
  width: auto;
  height: 0.74em;
  vertical-align: -0.01em;
  flex-shrink: 0;
  object-fit: contain;
}