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

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
}

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

.main-navbar {
  width: 100%;
  height: 105px;

  background: #ffffff;

  display: flex;
  align-items: center;

  position: relative;
  z-index: 1000;

  border-bottom: 1px solid #f5f1e8;
}

.navbar-inner {
  width: 100%;
  height: 100%;

  padding: 0 8.3%;

  display: flex;
  align-items: center;
}

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

.logo {
  width: 155px;
  height: 90px;

  position: relative;

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

  flex-shrink: 0;

  text-decoration: none;
}

.logo-text {
  position: relative;

  font-weight: 700;
  font-size: 37px;

  line-height: 1;

  letter-spacing: -2px;

  color: #1764a4;

  z-index: 2;
}

.ask-bubble {
  position: absolute;

  top: 1px;
  left: 35px;

  width: 70px;
  height: 32px;

  border-radius: 50%;

  background: #d9577b;

  color: #ffffff;

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

  font-size: 17px;
  font-weight: 700;

  z-index: 3;
}

.ask-bubble::after {
  content: "";

  position: absolute;

  bottom: -8px;
  left: 30px;

  width: 16px;
  height: 13px;

  background: #d9577b;

  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.logo-tagline {
  position: absolute;

  left: 28px;
  bottom: 15px;

  font-size: 7px;

  color: #555555;

  letter-spacing: 0.2px;

  white-space: nowrap;
}

/* =========================================
   DESKTOP MENU
========================================= */

.desktop-menu {
  height: 100%;

  display: flex;
  align-items: center;

  margin-left: 50px;

  gap: 34px;
}

.nav-item {
  height: 100%;

  display: flex;
  align-items: center;

  position: relative;
}

.nav-link {
  color: #111111;

  text-decoration: none;

  font-size: 17px;

  font-weight: 400;

  white-space: nowrap;

  display: flex;
  align-items: center;

  gap: 8px;

  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #1764a4;
}

.nav-link .arrow {
  font-size: 11px;

  margin-top: 3px;
}

/* =========================================
   DESKTOP DROPDOWN
========================================= */

.desktop-dropdown {
  position: absolute;

  top: 100%;
  left: 0;

  min-width: 220px;

  background: #ffffff;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

  padding: 12px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.nav-item:hover .desktop-dropdown {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.desktop-dropdown a {
  display: block;

  padding: 12px 20px;

  color: #111111;

  text-decoration: none;

  font-size: 16px;
}

.desktop-dropdown a:hover {
  background: #f7f7f7;
}
/* =========================================
   ATTRACTIVE DESKTOP CALL BUTTON
========================================= */

.desktop-call-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 11px;

  height: 56px;

  padding: 6px 20px 6px 7px;

  border-radius: 50px;

  text-decoration: none;

  background: linear-gradient(135deg, #1764a4 0%, #1676bd 55%, #d9577b 100%);

  color: #ffffff;

  box-shadow: 0 8px 20px rgba(23, 100, 164, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.25);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================
   SHINE EFFECT
========================================= */

.desktop-call-button::before {
  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 60%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}

.desktop-call-button:hover::before {
  left: 140%;
}

/* =========================================
   PHONE CIRCLE
========================================= */

.call-icon {
  width: 43px;

  height: 43px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #ffffff;

  color: #1764a4;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.call-icon i {
  font-size: 19px;

  animation: phone-ring 2.5s infinite;
}

/* =========================================
   TEXT
========================================= */

.call-text {
  display: flex;

  flex-direction: column;

  justify-content: center;

  line-height: 1.05;

  font-size: 18px;

  font-weight: 700;

  color: #ffffff;

  white-space: nowrap;
}

.call-text small {
  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.7px;

  text-transform: uppercase;

  opacity: 0.85;

  margin-bottom: 4px;
}

/* =========================================
   HOVER
========================================= */

.desktop-call-button:hover {
  transform: translateY(-2px) scale(1.02);

  box-shadow: 0 12px 28px rgba(23, 100, 164, 0.32);
}

.desktop-call-button:active {
  transform: translateY(0) scale(0.98);
}

/* =========================================
   PHONE ANIMATION
========================================= */

@keyframes phone-ring {
  0%,
  65%,
  100% {
    transform: rotate(0deg);
  }

  68% {
    transform: rotate(-12deg);
  }

  71% {
    transform: rotate(12deg);
  }

  74% {
    transform: rotate(-10deg);
  }

  77% {
    transform: rotate(8deg);
  }

  80% {
    transform: rotate(0deg);
  }
}

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

@media (max-width: 991px) {
  .desktop-call-button {
    display: none;
  }
}
/* =========================================
   DESKTOP RIGHT ICONS
========================================= */

.navbar-actions {
  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 31px;
}



/* =========================================
   MOBILE DEFAULT
========================================= */

.mobile-navbar {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

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

@media (max-width: 991px) {
  /* Hide desktop */

  .main-navbar {
    display: none;
  }

  /* =====================================
       MOBILE HEADER
    ===================================== */

  .mobile-navbar {
    display: flex;

    width: 100%;

    height: 90px;

    background: #ffffff;

    position: relative;

    z-index: 2000;

    align-items: center;

    border-bottom: 1px solid #f5f1e8;
  }

  .mobile-navbar-inner {
    width: 100%;
    height: 100%;

    padding: 0 28px;

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

    position: relative;
  }

  /* =====================================
       HAMBURGER
    ===================================== */

  .hamburger-button {
    width: 35px;
    height: 45px;

    border: 0;

    background: transparent;

    cursor: pointer;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    position: relative;

    z-index: 2100;
  }

  .hamburger {
    width: 24px;
    height: 19px;

    position: relative;

    display: block;
  }

  .hamburger span {
    position: absolute;

    left: 0;

    width: 24px;
    height: 2px;

    background: #111111;

    transition:
      transform 0.3s ease,
      top 0.3s ease,
      opacity 0.2s ease;
  }

  .hamburger span:nth-child(1) {
    top: 0;
  }

  .hamburger span:nth-child(2) {
    top: 8px;
  }

  .hamburger span:nth-child(3) {
    top: 16px;
  }

  /* Hamburger -> X */

  .hamburger-button.active .hamburger span:nth-child(1) {
    top: 8px;

    transform: rotate(45deg);
  }

  .hamburger-button.active .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-button.active .hamburger span:nth-child(3) {
    top: 8px;

    transform: rotate(-45deg);
  }

  /* =========================================
   MOBILE LOGO - RESPONSIVE FIX
========================================= */

  @media (max-width: 991px) {
    .mobile-logo {
      position: absolute;

      left: 50%;
      top: 50%;

      transform: translate(-50%, -50%);

      width: 155px;
      height: 100px;

      display: block;

      text-decoration: none;
    }

    /* ASK BUBBLE */

    .mobile-logo .ask-bubble {
      position: absolute;

      top: 2px;
      left: 50%;

      transform: translateX(-50%);

      width: 76px;
      height: 43px;

      border-radius: 50%;

      background: #d9577b;

      color: #ffffff;

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

      font-size: 21px;
      font-weight: 700;

      line-height: 1;

      z-index: 5;
    }

    .mobile-logo .ask-bubble::after {
      content: "";

      position: absolute;

      bottom: -7px;
      left: 50%;

      transform: translateX(-50%);

      width: 18px;
      height: 13px;

      background: #d9577b;

      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    /* DR Ritu */

    .mobile-logo .logo-text {
      position: absolute;

      top: 39px;
      left: 50%;

      transform: translateX(-50%);

      width: max-content;

      font-size: 36px;

      line-height: 1;

      font-weight: 700;

      letter-spacing: -2.2px;

      color: #1764a4;

      white-space: nowrap;

      z-index: 2;
    }

    /* TAGLINE */

    .mobile-logo .logo-tagline {
      position: absolute;

      left: 50%;
      bottom: 5px;

      transform: translateX(-50%);

      width: max-content;

      font-size: 6.5px;

      line-height: 1;

      color: #555555;

      letter-spacing: 0.15px;

      white-space: nowrap;
    }
  }

  /* =========================================
   SMALL MOBILE
========================================= */

  @media (max-width: 480px) {
    .mobile-logo {
      width: 150px;
      height: 98px;
    }

    .mobile-logo .ask-bubble {
      width: 74px;
      height: 42px;

      font-size: 20px;
    }

    .mobile-logo .logo-text {
      top: 39px;

      font-size: 35px;

      letter-spacing: -2.1px;
    }

    .mobile-logo .logo-tagline {
      bottom: 5px;

      font-size: 6px;
    }
  }

  /* =========================================
   VERY SMALL MOBILE
========================================= */

  @media (max-width: 360px) {
    .mobile-logo {
      width: 138px;
      height: 94px;
    }

    .mobile-logo .ask-bubble {
      width: 58px;
      height: 39px;

      font-size: 15px;
    }

    .mobile-logo .logo-text {
      top: 37px;

      font-size: 32px;

      letter-spacing: -1.9px;
    }

    .mobile-logo .logo-tagline {
      bottom: 5px;

      font-size: 5.5px;
    }
  }

  /* =====================================
       MOBILE ICONS
    ===================================== */
  /* =========================================
   MOBILE CALL BUTTON
========================================= */

  .mobile-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  /* Main phone button */

  .mobile-call-button {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 50%;

    text-decoration: none;

    color: #ffffff;

    background: linear-gradient(135deg, #1764a4 0%, #1679c2 55%, #d9577b 100%);

    box-shadow: 0 5px 14px rgba(23, 100, 164, 0.25);

    position: relative;

    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* Phone icon */

  .mobile-call-button i {
    font-size: 19px;

    color: #ffffff;

    line-height: 1;

    animation: mobile-phone-ring 2.8s infinite;
  }

  /* =========================================
   SMALL GLOW
========================================= */

  .mobile-call-button::before {
    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border: 1px solid rgba(23, 100, 164, 0.18);

    animation: mobile-call-pulse 2.5s infinite;
  }

  /* =========================================
   HOVER / TOUCH
========================================= */

  .mobile-call-button:hover {
    transform: scale(1.08);

    box-shadow: 0 8px 20px rgba(23, 100, 164, 0.35);
  }

  .mobile-call-button:active {
    transform: scale(0.94);
  }

  /* =========================================
   PHONE RING
========================================= */

  @keyframes mobile-phone-ring {
    0%,
    65%,
    100% {
      transform: rotate(0deg);
    }

    68% {
      transform: rotate(-12deg);
    }

    71% {
      transform: rotate(12deg);
    }

    74% {
      transform: rotate(-10deg);
    }

    77% {
      transform: rotate(8deg);
    }

    80% {
      transform: rotate(0deg);
    }
  }

  /* =========================================
   PULSE
========================================= */

  @keyframes mobile-call-pulse {
    0% {
      transform: scale(0.95);
      opacity: 0.8;
    }

    70% {
      transform: scale(1.15);
      opacity: 0;
    }

    100% {
      transform: scale(1.15);
      opacity: 0;
    }
  }

  /* =====================================
       MOBILE MENU DRAWER
       BOTTOM -> UP
    ===================================== */

  .mobile-menu-overlay {
    display: block;

    position: fixed;

    left: 0;
    right: 0;

    top: 108px;
    bottom: 0;

    background: #ffffff;

    z-index: 1900;

    transform: translateY(100%);

    visibility: hidden;

    transition:
      transform 0.42s cubic-bezier(0.77, 0, 0.18, 1),
      visibility 0s linear 0.42s;

    overflow-y: auto;
  }

  .mobile-menu-overlay.active {
    transform: translateY(0);

    visibility: visible;

    transition:
      transform 0.42s cubic-bezier(0.77, 0, 0.18, 1),
      visibility 0s;
  }

  .mobile-menu-content {
    min-height: calc(100vh - 108px);

    display: flex;

    flex-direction: column;
  }

  /* =====================================
       MOBILE LINKS
    ===================================== */

  .mobile-links {
    padding: 35px 38px 25px;

    flex: 1;
  }

  .mobile-menu-item {
    width: 100%;

    margin-bottom: 29px;
  }

  .mobile-menu-link {
    width: 100%;

    min-height: 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-decoration: none;

    color: #090909;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 400;

    border: 0;

    background: transparent;

    padding: 0;

    cursor: pointer;

    text-align: left;
  }

  .mobile-menu-arrow {
    font-size: 17px;

    font-weight: 400;

    transition: transform 0.25s ease;
  }

  .mobile-menu-item.open .mobile-menu-arrow {
    transform: rotate(90deg);
  }

  /* =====================================
       SUBMENU
    ===================================== */

  .mobile-submenu {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;
  }

  .mobile-menu-item.open .mobile-submenu {
    max-height: 400px;
  }

  .mobile-submenu a {
    display: block;

    text-decoration: none;

    color: #333333;

    font-size: 17px;

    padding: 14px 0 0 18px;
  }

  /* =====================================
       SOCIAL FOOTER
    ===================================== */

  .mobile-social {
    width: 100%;

    min-height: 102px;

    background: #fafafa;

    display: flex;

    align-items: center;

    padding: 0 38px;

    gap: 31px;

    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.025);
  }

  .mobile-social a {
    color: #050505;

    text-decoration: none;

    width: 22px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;
  }

  .mobile-social i {
    font-size: 20px;
  }
}

/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 480px) {
  .mobile-navbar {
    height: 108px;
  }

  .mobile-navbar-inner {
    padding: 0 28px;
  }

  .mobile-menu-overlay {
    top: 108px;
  }

  .mobile-links {
    padding-left: 38px;

    padding-right: 38px;

    padding-top: 34px;
  }

  .mobile-menu-item {
    margin-bottom: 28px;
  }

  .mobile-menu-link {
    font-size: 21px;
  }

  .mobile-social {
    min-height: 102px;

    padding-left: 38px;
  }
}

/* =========================================
   VERY SMALL PHONE
========================================= */

@media (max-width: 360px) {
  .mobile-navbar-inner {
    padding: 0 20px;
  }

  .mobile-actions {
    gap: 10px;
  }

  .mobile-logo {
    transform: translate(-50%, -50%) scale(0.9);
  }

  .mobile-links {
    padding-left: 28px;

    padding-right: 28px;
  }

  .mobile-menu-link {
    font-size: 19px;
  }

  .mobile-social {
    padding-left: 28px;
  }
}

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

/* Desktop + Mobile navbar transition */

.main-navbar,
.mobile-navbar {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Navbar becomes fixed after scrolling */

.main-navbar.scroll-navbar,
.mobile-navbar.scroll-navbar {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

/* =========================================
   HIDE NAVBAR WHEN SCROLLING UP
========================================= */

.main-navbar.navbar-hidden,
.mobile-navbar.navbar-hidden {
  transform: translateY(-100%);
}

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

.main-navbar.navbar-visible,
.mobile-navbar.navbar-visible {
  transform: translateY(0);
}

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

@media (max-width: 991px) {
  .mobile-menu-overlay {
    transition:
      transform 0.42s cubic-bezier(0.77, 0, 0.18, 1),
      visibility 0s;
  }
}

/* =====================================================
   MODERN SEXUAL HEALTH HERO
===================================================== */

/* =====================================================
   HEALTH HERO
===================================================== */

.health-hero {
  position: relative;

  width: 100%;

  min-height: calc(100vh - 105px);

  background: #fffaf0;

  overflow: hidden;

  isolation: isolate;
}

/* =====================================================
   MAIN CONTAINER
===================================================== */

.health-hero-container {
  position: relative;

  width: 100%;

  min-height: calc(100vh - 105px);

  display: flex;

  align-items: center;
}

/* =====================================================
   LEFT CONTENT
===================================================== */

.health-hero-content {
  position: relative;

  z-index: 20;

  width: 52%;

  padding-left: 4%;

  padding-right: 3%;

  padding-bottom: 20px;
}

/* =====================================================
   TRUST BADGE
===================================================== */

.hero-trust-badge {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 7px 16px 7px 7px;

  background: #ffffff;

  border: 1px solid #dcebf5;

  border-radius: 50px;

  box-shadow: 0 8px 25px rgba(23, 100, 164, 0.08);

  color: #1764a4;

  font-size: 14px;

  font-weight: 600;
}

.trust-icon {
  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #ffffff;

  background: linear-gradient(135deg, #1764a4, #348bc0);
}

.trust-icon i {
  font-size: 15px;
}

/* =====================================================
   HEADING
===================================================== */

.health-hero-title {
  margin: 28px 0 0;

  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(48px, 5vw, 78px);

  line-height: 1.02;

  letter-spacing: -2.5px;

  font-weight: 750;
}

.title-dark {
  color: #142735;
}

.title-pink {
  color: #bd3f61;

  position: relative;

  display: inline-block;
}

.title-pink::after {
  content: "";

  position: absolute;

  left: 3px;

  right: 12%;

  bottom: -8px;

  height: 5px;

  border-radius: 10px;

  background: linear-gradient(90deg, #1764a4, #d9577b);

  transform: rotate(-1deg);
}

/* =====================================================
   DESCRIPTION
===================================================== */

.health-hero-description {
  max-width: 620px;

  margin-top: 35px;

  color: #333333;

  font-size: clamp(18px, 1.45vw, 23px);

  line-height: 1.5;
}

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

.health-hero-actions {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 36px;
}

.health-primary-button {
  min-height: 57px;

  padding: 0 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border-radius: 12px;

  background: linear-gradient(135deg, #bd3f61, #d9577b);

  color: #ffffff;

  text-decoration: none;

  font-size: 17px;

  font-weight: 700;

  box-shadow: 0 10px 25px rgba(189, 63, 97, 0.2);

  transition: 0.25s ease;
}

.health-primary-button:hover {
  transform: translateY(-3px);

  box-shadow: 0 15px 30px rgba(189, 63, 97, 0.28);
}

.health-primary-button i {
  transition: 0.25s ease;
}

.health-primary-button:hover i {
  transform: translateX(4px);
}

/* CALL */

.health-call-button {
  min-height: 57px;

  padding: 0 18px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  border-radius: 12px;

  background: #ffffff;

  border: 1px solid #d6e8f3;

  color: #1764a4;

  text-decoration: none;

  font-size: 16px;

  font-weight: 700;

  transition: 0.25s ease;
}

.health-call-button:hover {
  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(23, 100, 164, 0.12);
}

.health-call-icon {
  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #e9f4fb;

  color: #1764a4;
}

/* =====================================================
   TRUST ROW
===================================================== */

.hero-trust-row {
  display: flex;

  align-items: center;

  gap: 24px;

  margin-top: 42px;
}

.hero-trust-item {
  display: flex;

  align-items: center;

  gap: 10px;
}

.hero-trust-item > i {
  color: #1764a4;

  font-size: 19px;
}

.hero-trust-item div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.hero-trust-item strong {
  color: #222222;

  font-size: 13px;
}

.hero-trust-item span {
  color: #777777;

  font-size: 11px;
}

.hero-trust-divider {
  width: 1px;

  height: 35px;

  background: #d9d9d9;
}

/* =====================================================
   RIGHT VISUAL
===================================================== */

.health-hero-visual {
  position: absolute;

  right: 0;

  top: 0;

  width: 56%;

  height: 100%;

  z-index: 5;

  overflow: hidden;
}

/* =====================================================
   LARGE CURVED COLOR AREA
===================================================== */

.health-hero-visual::before {
  content: "";

  position: absolute;

  right: -300px;

  bottom: -250px;

  width: 850px;

  height: 850px;

  border-radius: 50%;

  background: #1764a4;

  z-index: 1;
}

.health-hero-visual::after {
  content: "";

  position: absolute;

  right: -330px;

  bottom: -270px;

  width: 820px;

  height: 820px;

  border-radius: 50%;

  border: 28px solid #ee8497;

  z-index: 2;
}

/* =====================================================
   FLOWING RIBBONS
===================================================== */

.visual-ribbon {
  position: absolute;

  z-index: 3;

  pointer-events: none;

  transform-origin: center;
}

.ribbon-blue-one {
  width: 900px;

  height: 220px;

  right: -250px;

  bottom: 70px;

  border-top: 28px solid #2384c1;

  border-radius: 50%;

  transform: rotate(-19deg);
}

.ribbon-blue-two {
  width: 850px;

  height: 190px;

  right: -270px;

  bottom: 5px;

  border-top: 20px solid #72b6dc;

  border-radius: 50%;

  transform: rotate(-18deg);
}

.ribbon-pink-one {
  width: 850px;

  height: 180px;

  right: -220px;

  bottom: 25px;

  border-top: 17px solid #ee8497;

  border-radius: 50%;

  transform: rotate(-19deg);
}

.ribbon-blue-three {
  width: 720px;

  height: 180px;

  right: -120px;

  bottom: 130px;

  border-top: 15px solid #1764a4;

  border-radius: 50%;

  transform: rotate(-22deg);
}

.ribbon-pink-two {
  width: 700px;

  height: 170px;

  right: -90px;

  bottom: 180px;

  border-top: 10px solid #f3a0ad;

  border-radius: 50%;

  transform: rotate(-23deg);
}

/* =====================================================
   COUPLE IMAGE
===================================================== */

.health-couple-image {
  position: absolute;

  right: 1%;

  bottom: -3%;

  width: 92%;

  max-width: 850px;

  height: auto;

  z-index: 6;

  display: block;

  object-fit: contain;

  object-position: bottom right;

  pointer-events: none;
}

/* =====================================================
   FLOATING HEART
===================================================== */

.hero-floating-heart {
  position: absolute;

  left: 6%;

  top: 42%;

  width: 62px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #ffffff;

  color: #bd3f61;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  z-index: 15;

  animation: hero-heart-float 3s ease-in-out infinite;
}

.hero-floating-heart i {
  font-size: 24px;
}

/* =====================================================
   FLOATING CARD
===================================================== */

.hero-floating-card {
  position: absolute;

  right: 7%;

  top: 18%;

  z-index: 15;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 16px 11px 11px;

  background: rgba(255, 255, 255, 0.96);

  border-radius: 14px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.floating-card-icon {
  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background: #eaf4fb;

  color: #1764a4;
}

.hero-floating-card div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.hero-floating-card strong {
  color: #222222;

  font-size: 12px;
}

.hero-floating-card span {
  color: #777777;

  font-size: 10px;
}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes hero-heart-float {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {
  .health-hero-title {
    font-size: 50px;
  }

  .health-hero-description {
    font-size: 18px;
  }

  .health-hero-content {
    padding-left: 5%;
  }

  .health-couple-image {
    width: 100%;

    right: -8%;
  }

  .hero-floating-card {
    right: 3%;

    transform: scale(0.9);
  }
}

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

@media (max-width: 767px) {
  .health-hero {
    min-height: auto;

    background: #fffaf0;
  }

  .health-hero-container {
    min-height: auto;

    display: flex;

    flex-direction: column;

    padding: 38px 15px 0;
  }

  /* =============================================
       CONTENT
    ============================================= */

  .health-hero-content {
    width: 100%;

    padding: 0 5px;

    text-align: center;
  }

  .hero-trust-badge {
    font-size: 12px;

    padding: 6px 13px 6px 6px;
  }

  .trust-icon {
    width: 30px;

    height: 30px;
  }

  .health-hero-title {
    margin-top: 25px;

    font-size: clamp(36px, 10vw, 48px);

    line-height: 1.02;

    letter-spacing: -1.5px;
  }

  .title-pink::after {
    height: 3px;

    bottom: -5px;
  }

  .health-hero-description {
    max-width: 490px;

    margin: 25px auto 0;

    font-size: 16px;

    line-height: 1.45;
  }

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

  .health-hero-actions {
    margin-top: 26px;

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 10px;
  }

  .health-primary-button,
  .health-call-button {
    width: min(100%, 350px);

    margin: 0 auto;

    min-height: 52px;

    justify-content: center;
  }

  /* =============================================
       TRUST
    ============================================= */

  .hero-trust-row {
    justify-content: center;

    margin-top: 28px;

    gap: 18px;
  }

  .hero-trust-item {
    gap: 7px;
  }

  .hero-trust-item > i {
    font-size: 16px;
  }

  .hero-trust-item strong {
    font-size: 11px;
  }

  .hero-trust-item span {
    font-size: 9px;
  }

  .hero-trust-divider {
    height: 32px;
  }

  /* =============================================
       VISUAL
    ============================================= */

  .health-hero-visual {
    position: relative;

    right: auto;

    top: auto;

    width: calc(100% + 30px);

    height: 420px;

    margin-left: -15px;

    margin-top: 15px;

    overflow: hidden;
  }

  /* =============================================
       CURVE
    ============================================= */

  .health-hero-visual::before {
    width: 650px;

    height: 650px;

    right: -315px;

    bottom: -330px;
  }

  .health-hero-visual::after {
    width: 625px;

    height: 625px;

    right: -300px;

    bottom: -315px;

    border-width: 20px;
  }

  /* =============================================
       RIBBONS
    ============================================= */

  .ribbon-blue-one {
    width: 600px;

    height: 150px;

    right: -190px;

    bottom: 60px;

    border-width: 20px;
  }

  .ribbon-blue-two {
    width: 570px;

    height: 140px;

    right: -190px;

    bottom: 15px;

    border-width: 15px;
  }

  .ribbon-pink-one {
    width: 580px;

    height: 135px;

    right: -180px;

    bottom: 30px;

    border-width: 14px;
  }

  .ribbon-blue-three {
    width: 520px;

    height: 120px;

    right: -130px;

    bottom: 100px;

    border-width: 12px;
  }

  .ribbon-pink-two {
    width: 500px;

    height: 110px;

    right: -100px;

    bottom: 145px;

    border-width: 8px;
  }

  /* =============================================
       COUPLE
    ============================================= */

  .health-couple-image {
    left: 50%;

    right: auto;

    bottom: -2%;

    width: 94%;

    max-width: 600px;

    transform: translateX(-50%);

    object-position: bottom center;
  }

  /* =============================================
       FLOATING HEART
    ============================================= */

  .hero-floating-heart {
    left: 16%;

    top: 27%;

    width: 45px;

    height: 45px;
  }

  .hero-floating-heart i {
    font-size: 17px;
  }

  /* =============================================
       FLOATING CARD
    ============================================= */

  .hero-floating-card {
    right: 6%;

    top: 13%;

    padding: 8px 11px 8px 8px;

    border-radius: 11px;

    transform: scale(0.8);

    transform-origin: right center;
  }

  .floating-card-icon {
    width: 34px;

    height: 34px;
  }

  .hero-floating-card strong {
    font-size: 10px;
  }

  .hero-floating-card span {
    font-size: 8px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {
  .health-hero-container {
    padding: 32px 12px 0;
  }

  .health-hero-title {
    font-size: 34px;
  }

  .health-hero-description {
    font-size: 15px;

    max-width: 370px;
  }

  .hero-trust-row {
    gap: 10px;
  }

  .health-hero-visual {
    height: 365px;

    width: calc(100% + 24px);

    margin-left: -12px;
  }

  .health-couple-image {
    width: 101%;
  }

  .hero-floating-heart {
    left: 12%;

    top: 27%;
  }

  .hero-floating-card {
    right: 3%;

    top: 12%;

    transform: scale(0.7);
  }
}

/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 360px) {
  .health-hero-title {
    font-size: 30px;
  }

  .health-hero-description {
    font-size: 14px;
  }

  .hero-trust-row {
    gap: 5px;
  }

  .hero-trust-divider {
    display: none;
  }

  .health-hero-visual {
    height: 330px;
  }

  .health-couple-image {
    width: 108%;
  }
}

/* =====================================================
   HEALTH TOPICS SLIDER
===================================================== */

.health-topics-section {
  width: 100%;

  background: #ffffff;

  overflow: hidden;

  border-top: 1px solid #f1f1f1;

  border-bottom: 1px solid #f1f1f1;

  position: relative;

  z-index: 10;
}

/* =====================================================
   SLIDER VIEWPORT
===================================================== */

.health-topics-slider {
  width: 100%;

  overflow: hidden;

  padding: 15px 0;
}

/* =====================================================
   TRACK
===================================================== */

.health-topics-track {
  display: flex;

  align-items: center;

  width: max-content;

  gap: 14px;

  will-change: transform;

  transform: translate3d(0, 0, 0);
}

/* =====================================================
   TOPIC PILL
===================================================== */

.health-topic {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 45px;

  padding: 0 22px;

  border-radius: 50px;

  text-decoration: none;

  white-space: nowrap;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 1;

  color: #ffffff;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* =====================================================
   PINK
===================================================== */

.topic-pink {
  background: #dd5a7c;

  box-shadow: 0 4px 10px rgba(221, 90, 124, 0.08);
}

/* =====================================================
   BLUE
===================================================== */

.topic-blue {
  background: #1764ad;

  box-shadow: 0 4px 10px rgba(23, 100, 173, 0.08);
}

/* =====================================================
   HOVER
===================================================== */

.health-topic:hover {
  transform: translateY(-2px);

  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.12);
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {
  .health-topics-slider {
    padding: 13px 0;
  }

  .health-topics-track {
    gap: 11px;
  }

  .health-topic {
    min-height: 40px;

    padding: 0 18px;

    font-size: 14px;
  }
}




/* =====================================================
   MOBILE - HIDE RIGHT HERO VISUAL
===================================================== */

@media (max-width: 768px) {

    .health-hero {
        overflow: hidden;
    }

    .health-hero-container {
        grid-template-columns: 1fr;
    }

    .health-hero-visual {
        display: none !important;
    }

}

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

@media (max-width: 600px) {
  .health-topics-slider {
    padding: 10px 0;
  }

  .health-topics-track {
    gap: 9px;
  }

  .health-topic {
    min-height: 37px;

    padding: 0 16px;

    font-size: 13px;

    border-radius: 40px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {
  .health-topic {
    min-height: 35px;

    padding: 0 14px;

    font-size: 12px;
  }
}






















/* ==============================
   OUR MISSION
============================== */

.mission-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #d5e2fb;
    color: #080808;
}

.mission-container {
    position: relative;
    z-index: 2;
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 55px 5% 38px;
}

.mission-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.mission-content h2 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 4px;
}

.mission-content p {
    margin: 0 auto;
    max-width: 820px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
}

.mission-content p strong {
    font-weight: 700;
}

.mission-highlight {
    margin-top: 18px;
    color: #e05278;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}

.mission-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 30px;
    margin-top: 50px;
}

.mission-stat {
    text-align: center;
}

.mission-number {
    color: #1768b5;
    font-size: clamp(33px, 2.6vw, 45px);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.mission-label {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
}

.mission-bottom-shape {
    position: absolute;
    left: -5%;
    bottom: -55px;
    width: 110%;
    height: 90px;
    border-radius: 50% 50% 0 0;
    background: rgba(255,255,255,.25);
    transform: rotate(-1deg);
}

/* ==============================
   TABLET
============================== */

@media (max-width: 991px) {
    .mission-container {
        padding: 45px 5% 35px;
    }

    .mission-content h2 {
        font-size: 23px;
        letter-spacing: 3px;
    }

    .mission-content p {
        max-width: 760px;
        font-size: 18px;
        line-height: 1.48;
    }

    .mission-highlight {
        font-size: 22px;
    }

    .mission-stats {
        margin-top: 55px;
        gap: 25px;
    }

    .mission-number {
        font-size: 40px;
    }

    .mission-label {
        font-size: 17px;
    }
}

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

@media (max-width: 767px) {
    .mission-container {
        padding: 38px 20px 42px;
    }

    .mission-content {
        width: 100%;
    }

    .mission-content h2 {
        margin-bottom: 17px;
        font-size: 20px;
        letter-spacing: 3px;
    }

    .mission-content p {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.55;
    }

    .mission-highlight {
        margin-top: 17px;
        font-size: 20px;
    }

    .mission-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 18px;
        margin-top: 48px;
    }

    .mission-number {
        font-size: 32px;
    }

    .mission-label {
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.35;
    }

    .mission-bottom-shape {
        bottom: -40px;
        height: 65px;
    }
}

/* ==============================
   SMALL MOBILE
============================== */

@media (max-width: 480px) {
    .mission-container {
        padding: 32px 16px 38px;
    }

    .mission-content h2 {
        font-size: 18px;
        letter-spacing: 2.5px;
    }

    .mission-content p {
        font-size: 15px;
        line-height: 1.52;
    }

    .mission-highlight {
        font-size: 18px;
    }

    .mission-stats {
        gap: 32px 12px;
        margin-top: 40px;
    }

    .mission-number {
        font-size: 27px;
    }

    .mission-label {
        font-size: 12px;
    }
}

/* ==============================
   VERY SMALL MOBILE
============================== */

@media (max-width: 360px) {
    .mission-content p {
        font-size: 14px;
    }

    .mission-highlight {
        font-size: 17px;
    }

    .mission-number {
        font-size: 24px;
    }

    .mission-label {
        font-size: 11px;
    }
}














/* ==============================
   HEALING / ABOUT SECTION
============================== */

.healing-section {
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.healing-container {
    width: min(1630px, 100%);
    margin: 0 auto;
    padding: 52px 5% 30px;
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    gap: 20px;
}

.healing-content {
    padding-right: 35px;
}

.healing-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    border: 1.5px solid #222;
    border-radius: 30px;
    color: #111;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
}

.rating-stars {
    color: #e4b400;
    letter-spacing: 1px;
    font-size: 17px;
}

.healing-rating strong {
    color: #e95778;
    font-weight: 700;
}

.healing-title {
    margin: 20px 0 0;
    color: #111;
    font-size: clamp(42px, 3.3vw, 62px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -.8px;
}

.healing-title strong {
    font-weight: 800;
}

.healing-description {
    max-width: 800px;
    margin: 27px 0 0;
    color: #151515;
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.48;
}

.healing-description strong {
    font-weight: 800;
}

.healing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 298px;
    height: 67px;
    margin-top: 37px;
    border-radius: 11px;
    border: 2px solid #4d8ef0;
    background: #285eb0;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.healing-button:hover {
    background: #1f519e;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(40,94,176,.18);
}

.healing-review {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 27px;
}

.review-avatars {
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.review-avatar {
    width: 45px;
    height: 45px;
    margin-left: -8px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center;
}

.avatar-1 {
    background-image: url("images/review-1.jpg");
}

.avatar-2 {
    background-image: url("images/review-2.jpg");
}

.avatar-3 {
    background-image: url("images/review-3.jpg");
}

.review-text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #222;
    font-size: 16px;
    line-height: 1.3;
}

.review-text strong {
    font-weight: 800;
}

.review-text span {
    font-weight: 400;
}

.healing-image-wrapper {
    width: 100%;
    height: 760px;
    overflow: hidden;
    border-radius: 13px;
}

.healing-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* ==============================
   TABLET
============================== */

@media (max-width: 1100px) {
    .healing-container {
        padding: 45px 4% 30px;
        grid-template-columns: 50% 50%;
        gap: 15px;
    }

    .healing-content {
        padding-right: 20px;
    }

    .healing-rating {
        font-size: 15px;
        padding: 9px 15px;
    }

    .rating-stars {
        font-size: 15px;
    }

    .healing-title {
        font-size: 43px;
    }

    .healing-description {
        font-size: 17px;
    }

    .healing-button {
        width: 260px;
        height: 60px;
        font-size: 20px;
    }

    .healing-image-wrapper {
        height: 600px;
    }

    .review-text {
        font-size: 13px;
    }
}

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

@media (max-width: 767px) {
    .healing-container {
        width: 100%;
        padding: 35px 18px 45px;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .healing-content {
        width: 100%;
        padding-right: 0;
        text-align: left;
    }

    .healing-rating {
        padding: 8px 14px;
        font-size: 14px;
    }

    .rating-stars {
        font-size: 14px;
    }

    .healing-title {
        margin-top: 20px;
        font-size: clamp(35px, 9vw, 48px);
        line-height: 1.08;
    }

    .healing-description {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.55;
    }

    .healing-button {
        width: 100%;
        max-width: 310px;
        height: 58px;
        margin-top: 28px;
        font-size: 19px;
    }

    .healing-review {
        margin-top: 25px;
        gap: 10px;
        align-items: center;
    }

    .review-avatar {
        width: 39px;
        height: 39px;
        border-width: 2px;
    }

    .review-text {
        display: block;
        font-size: 12px;
        line-height: 1.4;
    }

    .review-text strong {
        display: inline;
    }

    .healing-image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.05;
        border-radius: 12px;
    }

    .healing-image {
        object-position: center;
    }
}

/* ==============================
   SMALL MOBILE
============================== */

@media (max-width: 480px) {
    .healing-container {
        padding: 30px 15px 38px;
        gap: 28px;
    }

    .healing-rating {
        font-size: 12px;
        padding: 8px 12px;
    }

    .rating-stars {
        font-size: 12px;
    }

    .healing-title {
        font-size: 34px;
    }

    .healing-description {
        font-size: 15px;
        line-height: 1.5;
    }

    .healing-button {
        max-width: 100%;
        height: 55px;
        font-size: 18px;
    }

    .review-avatar {
        width: 35px;
        height: 35px;
    }

    .review-text {
        font-size: 11px;
    }

    .healing-image-wrapper {
        aspect-ratio: 1 / 1.08;
    }
}






















/* ==============================
   HELP SECTION
============================== */

.help-section {
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.help-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 8px 25px;
}

.help-title {
    margin: -8px 0 18px;
    text-align: center;
    color: #050505;
    font-size: clamp(34px, 2.2vw, 48px);
    line-height: 1.1;
    font-weight: 800;
}


/* ==============================
   CARDS GRID
============================== */

.help-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.help-card {
    position: relative;
    height: 338px;
    overflow: hidden;
    border-radius: 11px;
    text-decoration: none;
    background: #ddd;
}

.help-card:nth-child(6) {
    grid-column: 2;
}

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

.help-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,.78) 100%
    );
}

.help-card h3 {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 25px;
    z-index: 2;
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(15px, 1.1vw, 20px);
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.help-card:hover img {
    transform: scale(1.04);
}


/* ==============================
   SECOND ROW CENTERING
============================== */

.help-card:nth-child(6) {
    grid-column: 2;
}

.help-card:nth-child(7) {
    grid-column: 3;
}

.help-card:nth-child(8) {
    grid-column: 4;
}

.help-card:nth-child(9) {
    grid-column: 5;
}


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

.help-features {
    width: 75%;
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}

.help-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.help-feature-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 37px;
}

.help-feature h4 {
    margin: 7px 0 0;
    color: #111;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 1100px) {
    .help-container {
        padding: 0 10px 25px;
    }

    .help-title {
        font-size: 34px;
        margin-bottom: 15px;
    }

    .help-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .help-card {
        height: 280px;
    }

    .help-card:nth-child(6),
    .help-card:nth-child(7),
    .help-card:nth-child(8),
    .help-card:nth-child(9) {
        grid-column: auto;
    }

    .help-card:nth-child(9) {
        grid-column: 2 / 4;
    }

    .help-features {
        width: 90%;
    }
}


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

@media (max-width: 767px) {
    .help-container {
        padding: 5px 12px 30px;
    }

    .help-title {
        margin: 0 0 18px;
        font-size: 27px;
        line-height: 1.15;
    }

    .help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .help-card {
        height: 230px;
        border-radius: 9px;
    }

    .help-card:nth-child(6),
    .help-card:nth-child(7),
    .help-card:nth-child(8),
    .help-card:nth-child(9) {
        grid-column: auto;
    }

    .help-card:nth-child(9) {
        grid-column: 1 / -1;
        width: 50%;
        justify-self: center;
    }

    .help-card h3 {
        left: 7px;
        right: 7px;
        bottom: 17px;
        font-size: 14px;
    }

    .help-features {
        width: 100%;
        margin-top: 25px;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 10px;
    }

    .help-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 29px;
    }

    .help-feature h4 {
        margin-top: 5px;
        font-size: 12px;
    }
}


/* ==============================
   SMALL MOBILE
============================== */

@media (max-width: 480px) {
    .help-container {
        padding: 5px 10px 25px;
    }

    .help-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .help-grid {
        gap: 9px;
    }

    .help-card {
        height: 190px;
        border-radius: 8px;
    }

    .help-card h3 {
        bottom: 13px;
        font-size: 12px;
        line-height: 1.15;
    }

    .help-card:nth-child(9) {
        width: 52%;
    }

    .help-features {
        margin-top: 22px;
        gap: 20px 8px;
    }

    .help-feature-icon {
        width: 42px;
        height: 42px;
        font-size: 25px;
    }

    .help-feature h4 {
        font-size: 11px;
    }
}


/* ==============================
   VERY SMALL MOBILE
============================== */

@media (max-width: 360px) {
    .help-title {
        font-size: 21px;
    }

    .help-card {
        height: 165px;
    }

    .help-card h3 {
        font-size: 11px;
    }

    .help-feature h4 {
        font-size: 10px;
    }
}

















/* ==========================================
   HOW IT WORKS SECTION
========================================== */

.how-it-works {
    width: 100%;
    background: #ffffff;
    padding: 36px 7.5px 38px;
    font-family: Arial, Helvetica, sans-serif;
}

.how-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}


/* ==========================================
   TITLE
========================================== */

.how-title {
    margin: 0 0 66px 0;

    font-size: 50px;
    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -1.5px;
    color: #000000;
}


/* ==========================================
   STEPS WRAPPER
========================================== */

.steps-wrapper {
    width: 100%;

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


/* ==========================================
   STEP ITEM
========================================== */

.step-item {
    display: flex;
    align-items: center;

    flex: 1;
    min-width: 0;
}


/* ==========================================
   STEP CARD
========================================== */

.step-card {
    position: relative;

    width: 100%;
    height: 232px;

    background: #c9daf9;

    border-radius: 18px;

    padding: 23px 18px 20px;

    overflow: visible;
}


/* ==========================================
   FLOATING ICON
========================================== */

.step-icon {
    position: absolute;

    top: -30px;
    right: 15px;

    width: 62px;
    height: 62px;

    background: #ffffff;

    border-radius: 50%;

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

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08);

    z-index: 5;
}

.step-icon span {
    font-size: 27px;
    line-height: 1;

    color: #222222;
}


/* ==========================================
   CARD HEADING
========================================== */

.step-card h3 {
    margin: 0 0 9px 0;

    color: #080808;

    font-size: 20px;
    line-height: 1.45;

    font-weight: 700;

    letter-spacing: 0;
}


/* ==========================================
   CARD DESCRIPTION
========================================== */

.step-card p {
    margin: 0;

    max-width: 245px;

    color: #252525;

    font-size: 17px;
    line-height: 1.42;

    font-weight: 400;
}


/* ==========================================
   STEP NUMBER
========================================== */

.step-number {
    position: absolute;

    right: 16px;
    bottom: 8px;

    color: #abc5f0;

    font-size: 31px;
    line-height: 1;

    font-weight: 800;
}


/* ==========================================
   CONNECTOR
========================================== */

.step-connector {
    width: 58px;

    min-width: 58px;

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

    padding: 0 5px;
}

.step-connector svg {
    width: 45px;
    height: 20px;

    display: block;
}


/* ==========================================
   LAST ITEM
========================================== */

.step-item:last-child {
    flex: 1;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .how-it-works {
        padding-left: 5%;
        padding-right: 5%;
    }

    .how-title {
        font-size: 44px;
        margin-bottom: 60px;
    }

    .steps-wrapper {
        display: grid;

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

        gap: 45px 20px;
    }

    .step-item {
        width: 100%;
    }

    .step-connector {
        display: none;
    }

    .step-card {
        height: 235px;
    }

}


/* ==========================================
   SMALL TABLET
========================================== */

@media (max-width: 750px) {

    .how-title {
        font-size: 40px;
        margin-bottom: 55px;
    }

    .steps-wrapper {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px 15px;
    }

    .step-card {
        height: 245px;
        padding: 20px 16px;
    }

    .step-card h3 {
        font-size: 19px;
    }

    .step-card p {
        font-size: 16px;
    }

    .step-icon {
        width: 58px;
        height: 58px;

        right: 12px;
        top: -28px;
    }

}


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

@media (max-width: 600px) {

    .how-it-works {
        padding: 30px 16px 45px;
    }

    .how-title {
        margin: 0 0 48px 0;

        font-size: 34px;
        line-height: 1.1;

        letter-spacing: -0.8px;
    }

    .steps-wrapper {
        display: flex;
        flex-direction: column;

        gap: 45px;

        width: 100%;
    }

    .step-item {
        width: 100%;

        display: block;
    }

    .step-card {
        width: 100%;
        height: auto;
        min-height: 225px;

        border-radius: 16px;

        padding: 23px 20px 40px;
    }

    .step-icon {
        top: -27px;
        right: 14px;

        width: 58px;
        height: 58px;
    }

    .step-icon span {
        font-size: 25px;
    }

    .step-card h3 {
        font-size: 20px;
        line-height: 1.4;

        margin-bottom: 9px;
    }

    .step-card p {
        max-width: 100%;

        font-size: 17px;
        line-height: 1.45;
    }

    .step-number {
        right: 17px;
        bottom: 10px;

        font-size: 29px;
    }

    .step-connector {
        display: none;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 380px) {

    .how-it-works {
        padding-left: 13px;
        padding-right: 13px;
    }

    .how-title {
        font-size: 30px;
        margin-bottom: 43px;
    }

    .steps-wrapper {
        gap: 40px;
    }

    .step-card {
        min-height: 220px;

        padding: 21px 17px 38px;
    }

    .step-card h3 {
        font-size: 18px;
    }

    .step-card p {
        font-size: 16px;
    }

    .step-icon {
        width: 54px;
        height: 54px;

        top: -25px;
        right: 12px;
    }

    .step-number {
        font-size: 27px;
    }

}












/* ==========================================
   FONT AWESOME
   Add this inside your <head> if not already
   included on your website:
========================================== */

/*
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
*/


/* ==========================================
   FAQ SECTION
========================================== */

.faq-section {
    width: 100%;
    padding: 0 3.1% 32px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.faq-container {
    width: 100%;
    background: #dc819d;

    border-radius: 14px;

    padding: 37px 20px 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ==========================================
   FAQ LABEL
========================================== */

.faq-label {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.3px;

    margin-bottom: 17px;
}


/* ==========================================
   MAIN TITLE
========================================== */

.faq-title {
    margin: 0;

    color: #ffffff;

    font-size: 62px;
    font-weight: 400;

    line-height: 1.05;

    text-align: center;

    letter-spacing: -1.5px;

    margin-bottom: 40px;
}


/* ==========================================
   FAQ LIST
========================================== */

.faq-list {
    width: 100%;
    max-width: 880px;
}


/* ==========================================
   FAQ ITEM
========================================== */

.faq-item {
    width: 100%;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.faq-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}


/* ==========================================
   QUESTION BUTTON
========================================== */

.faq-question {
    width: 100%;

    min-height: 66px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #ffffff;

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

    text-align: left;

    cursor: pointer;

    font-family: inherit;

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

    line-height: 1.25;
}


/* ==========================================
   CHEVRON ICON
========================================== */

.faq-question i {
    flex-shrink: 0;

    margin-left: 20px;

    font-size: 11px;

    color: #ffffff;

    transition: transform 0.3s ease;
}


/* ==========================================
   ANSWER
========================================== */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}

.faq-answer p {
    margin: 0;

    padding: 0 40px 20px 0;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.5;
}


/* ==========================================
   ACTIVE FAQ
========================================== */

.faq-item.active .faq-answer {
    max-height: 200px;

    opacity: 1;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .faq-section {
        padding-left: 3%;
        padding-right: 3%;
    }

    .faq-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .faq-title {
        font-size: 52px;
    }

    .faq-list {
        max-width: 800px;
    }

    .faq-question {
        font-size: 21px;
    }

}


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

@media (max-width: 600px) {

    .faq-section {
        padding: 0 12px 25px;
    }

    .faq-container {
        border-radius: 12px;

        padding: 28px 18px 22px;
    }


    /* Label */

    .faq-label {
        font-size: 11px;

        margin-bottom: 13px;
    }


    /* Title */

    .faq-title {
        font-size: 37px;

        line-height: 1.08;

        letter-spacing: -0.8px;

        margin-bottom: 28px;
    }


    /* FAQ list */

    .faq-list {
        max-width: 100%;
    }


    /* Question */

    .faq-question {
        min-height: 64px;

        padding: 13px 0;

        font-size: 19px;

        line-height: 1.3;

        gap: 15px;
    }


    /* Icon */

    .faq-question i {
        font-size: 10px;

        margin-left: 5px;
    }


    /* Answer */

    .faq-answer p {
        padding: 0 20px 18px 0;

        font-size: 15px;

        line-height: 1.45;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 380px) {

    .faq-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .faq-container {
        padding: 25px 15px 20px;
    }

    .faq-title {
        font-size: 32px;

        margin-bottom: 25px;
    }

    .faq-question {
        font-size: 17px;

        min-height: 60px;
    }

    .faq-question i {
        font-size: 9px;
    }

}



















/* ==================================================
   TESTIMONIAL SECTION
================================================== */

.testimonial-section {
    width: 100%;
    background: #ffffff;
    padding: 75px 6% 80px;

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;
}

.testimonial-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* ==================================================
   HEADER
================================================== */

.testimonial-header {
    text-align: center;

    margin-bottom: 50px;
}


/* Eyebrow */

.testimonial-eyebrow {
    display: inline-block;

    color: #dc819d;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 13px;
}


/* Title */

.testimonial-title {
    margin: 0;

    color: #111111;

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

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.testimonial-title span {
    background: linear-gradient(
        90deg,
        #627dd1,
        #9b63bd,
        #d8a477
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* Subtitle */

.testimonial-subtitle {
    max-width: 620px;

    margin: 17px auto 28px;

    color: #555555;

    font-size: 17px;

    line-height: 1.5;
}


/* ==================================================
   RATING
================================================== */

.rating-box {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 12px 20px;

    background: #fff8e7;

    border: 1px solid #f4e7c5;

    border-radius: 50px;
}


.rating-score {
    color: #111111;

    font-size: 29px;

    line-height: 1;

    font-weight: 800;
}


.rating-details {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
}


.stars {
    display: flex;

    gap: 3px;

    color: #f5ad00;

    font-size: 14px;
}


.rating-text {
    color: #777777;

    font-size: 12px;

    line-height: 1;
}


/* ==================================================
   SLIDER
================================================== */

.testimonial-slider {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    gap: 18px;
}


/* ==================================================
   VIEWPORT
================================================== */

.testimonial-viewport {
    width: 100%;

    overflow: hidden;
}


/* ==================================================
   TRACK
================================================== */

.testimonial-track {
    display: flex;

    gap: 18px;

    transition: transform 0.5s ease;

    will-change: transform;
}


/* ==================================================
   CARD
================================================== */

.testimonial-card {
    position: relative;

    flex: 0 0 calc((100% - 36px) / 3);

    min-height: 285px;

    padding: 25px 24px 20px;

    background: #ffffff;

    border: 1px solid #dedede;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);

    display: flex;

    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.testimonial-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.09);
}


/* ==================================================
   CARD TOP
================================================== */

.testimonial-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}


/* ==================================================
   PATIENT
================================================== */

.patient-info {
    display: flex;

    align-items: center;

    gap: 12px;
}


.patient-avatar {
    width: 47px;
    height: 47px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f8dbe4;

    color: #b04e6e;

    display: flex;

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

    font-size: 13px;

    font-weight: 700;
}


.patient-info h3 {
    margin: 0 0 4px;

    color: #111111;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;
}


.patient-info span {
    color: #888888;

    font-size: 12px;
}


/* ==================================================
   QUOTE ICON
================================================== */

.quote-icon {
    color: #f0d1da;

    font-size: 27px;
}


/* ==================================================
   STARS
================================================== */

.testimonial-stars {
    color: #f5ad00;

    font-size: 16px;

    letter-spacing: 2px;

    margin-bottom: 14px;
}


/* ==================================================
   REVIEW CONTENT
================================================== */

.testimonial-content {
    margin: 0;

    color: #333333;

    font-size: 16px;

    line-height: 1.55;

    flex: 1;
}


/* ==================================================
   CARD BOTTOM
================================================== */

.testimonial-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 18px;

    margin-top: 18px;

    border-top: 1px solid #eeeeee;
}


.verified {
    color: #4d7dbe;

    font-size: 11px;

    font-weight: 600;
}


.verified i {
    margin-right: 3px;
}


.review-date {
    color: #999999;

    font-size: 11px;
}


/* ==================================================
   ARROWS
================================================== */

.testimonial-arrow {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    border: 1px solid #dddddd;
    border-radius: 50%;

    background: transparent !important;

    color: #222222;

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

    cursor: pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}

.testimonial-arrow:hover {
    background: transparent !important;
    border-color: #dc819d;
    color: #dc819d;
}

.testimonial-arrow i {
    font-size: 14px;
}

/* ==================================================
   NAVIGATION
================================================== */

.testimonial-navigation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 30px;
}


/* Dots */

.testimonial-dots {
    display: flex;

    align-items: center;

    gap: 7px;
}


.testimonial-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #d8d8d8;

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.testimonial-dot.active {
    width: 24px;

    border-radius: 10px;

    background: #dc819d;
}


/* Counter */

.testimonial-counter {
    display: flex;

    gap: 5px;

    color: #999999;

    font-size: 12px;
}


.testimonial-counter strong {
    color: #222222;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

    .testimonial-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .testimonial-title {
        font-size: 45px;
    }

    .testimonial-card {
        flex-basis: calc((100% - 18px) / 2);
    }

}


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

@media (max-width: 600px) {

    .testimonial-section {
        padding: 50px 16px 55px;
    }


    /* Header */

    .testimonial-header {
        margin-bottom: 35px;
    }


    .testimonial-eyebrow {
        font-size: 11px;

        letter-spacing: 1.6px;

        margin-bottom: 11px;
    }


    .testimonial-title {
        font-size: 35px;

        line-height: 1.1;

        letter-spacing: -0.8px;
    }


    .testimonial-subtitle {
        margin-top: 14px;

        margin-bottom: 22px;

        font-size: 15px;

        line-height: 1.45;
    }


    /* Rating */

    .rating-box {
        gap: 13px;

        padding: 10px 16px;
    }

    .rating-score {
        font-size: 25px;
    }

    .stars {
        font-size: 12px;
    }

    .rating-text {
        font-size: 10px;
    }


    /* Slider */

    .testimonial-slider {
        gap: 0;
    }


    .testimonial-viewport {
        width: 100%;
    }


    .testimonial-track {
        gap: 0;
    }


    /* Card */

    .testimonial-card {
        flex: 0 0 100%;

        min-height: 300px;

        padding: 22px 20px 18px;

        border-radius: 16px;
    }


    .testimonial-card:hover {
        transform: none;
    }


    /* Card content */

    .testimonial-top {
        margin-bottom: 17px;
    }

    .patient-avatar {
        width: 44px;
        height: 44px;
    }

    .patient-info h3 {
        font-size: 15px;
    }

    .testimonial-content {
        font-size: 15px;

        line-height: 1.55;
    }


    /* Arrows */

    .testimonial-arrow {
        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        z-index: 10;

        width: 40px;
        height: 40px;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08);
    }


    .testimonial-prev {
        left: -7px;
    }

    .testimonial-next {
        right: -7px;
    }


    /* Navigation */

    .testimonial-navigation {
        margin-top: 22px;

        gap: 18px;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .testimonial-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .testimonial-title {
        font-size: 31px;
    }

    .testimonial-subtitle {
        font-size: 14px;
    }

    .testimonial-card {
        min-height: 290px;

        padding: 20px 17px 17px;
    }

    .testimonial-content {
        font-size: 14px;
    }

}





















/* =========================================================
   AJX FOOTER
========================================================= */

.ajx-footer {
    width: 100%;
    background: #edf5ff;

    padding: 70px 7.2% 55px;

    font-family: Arial, Helvetica, sans-serif;

    color: #303040;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.ajx-footer-wrap {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.45fr
        0.9fr
        0.95fr
        1.45fr;

    column-gap: 55px;

    align-items: start;
}


/* =========================================================
   BRAND AREA
========================================================= */

.ajx-footer-brand {
    width: 100%;
}


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

.ajx-brand-logo {
    position: relative;

    display: inline-flex;
    flex-direction: column;

    width: 210px;

    margin-bottom: 32px;

    text-decoration: none;
}


/* Ask bubble */

.ajx-logo-ask {
    position: absolute;

    top: -2px;
    left: 12px;

    width: 95px;
    height: 58px;

    border-radius: 50%;

    background: #e25e82;

    color: #ffffff;

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

    font-size: 30px;
    font-weight: 800;

    z-index: 1;
}


/* Bubble tail */

.ajx-logo-ask::after {
    content: "";

    position: absolute;

    left: 43px;
    bottom: -8px;

    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #e25e82;

    transform: rotate(-15deg);
}


/* Dr Ritu */

.ajx-logo-name {
    position: relative;

    z-index: 2;

    margin-top: 42px;

    color: #1764aa;

    font-size: 48px;
    font-weight: 800;

    line-height: 0.8;

    letter-spacing: -2.5px;
}


/* Logo tagline */

.ajx-logo-caption {
    position: relative;

    z-index: 3;

    margin-top: 4px;
    margin-left: 45px;

    color: #555555;

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

    letter-spacing: 0.3px;

    white-space: nowrap;
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.ajx-brand-text {
    max-width: 400px;

    margin: 0;

    color: #303040;

    font-size: 20px;

    line-height: 1.58;

    font-weight: 400;
}


/* =========================================================
   BRAND SOCIAL ICONS
========================================================= */

.ajx-brand-social {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 17px;
}

.ajx-brand-social a {
    width: 22px;
    height: 22px;

    display: flex;

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

    color: #303040;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.ajx-brand-social a:hover {
    color: #e25e82;

    transform: translateY(-2px);
}

.ajx-brand-social i {
    font-size: 19px;
}


/* =========================================================
   FOOTER GROUPS
========================================================= */

.ajx-footer-group {
    width: 100%;

    padding-top: 2px;
}


/* =========================================================
   GROUP TITLE
========================================================= */

.ajx-group-heading {
    margin: 0 0 27px;

    color: #303040;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 400;
}


/* =========================================================
   GROUP LIST
========================================================= */

.ajx-group-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   LIST ITEM
========================================================= */

.ajx-group-list li {
    margin: 0 0 19px;
}

.ajx-group-list li:last-child {
    margin-bottom: 0;
}


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

.ajx-group-list a {
    color: #565666;

    font-size: 17px;

    line-height: 1.45;

    font-weight: 400;

    text-decoration: none;

    transition: color 0.2s ease;
}

.ajx-group-list a:hover {
    color: #e25e82;
}


.ajx-group-list span {
    color: #565666;

    font-size: 17px;

    line-height: 1.45;

    font-weight: 400;

    display: inline-block;
}

/* =========================================================
   PRODUCTS
========================================================= */

.ajx-product-group {
    padding-left: 5px;
}


/* =========================================================
   BOTTOM AREA
========================================================= */

.ajx-footer-bottom {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 84px;
}


/* =========================================================
   BOTTOM SOCIAL
========================================================= */

.ajx-bottom-social {
    display: flex;

    align-items: center;

    gap: 30px;
}

.ajx-bottom-social a {
    width: 22px;
    height: 22px;

    display: flex;

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

    color: #303040;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.ajx-bottom-social a:hover {
    color: #e25e82;

    transform: translateY(-2px);
}

.ajx-bottom-social i {
    font-size: 19px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

    .ajx-footer {
        padding-left: 5%;
        padding-right: 5%;
    }

    .ajx-footer-wrap {
        grid-template-columns:
            1.3fr
            0.9fr
            1fr
            1.3fr;

        column-gap: 30px;
    }

    .ajx-brand-text {
        font-size: 18px;
    }

    .ajx-group-heading {
        font-size: 21px;
    }

    .ajx-group-list a {
        font-size: 16px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ajx-footer {
        padding-top: 55px;
        padding-bottom: 45px;
    }

    .ajx-footer-wrap {
        grid-template-columns: 1fr 1fr;

        column-gap: 45px;

        row-gap: 50px;
    }

    .ajx-footer-brand {
        grid-column: 1 / -1;
    }

    .ajx-brand-text {
        max-width: 500px;
    }

    .ajx-footer-bottom {
        margin-top: 55px;
    }

}


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

@media (max-width: 600px) {

    .ajx-footer {
        padding: 45px 22px 35px;
    }

    .ajx-footer-wrap {
        display: flex;

        flex-direction: column;

        gap: 35px;

        width: 100%;
    }


    /* Brand */

    .ajx-footer-brand {
        width: 100%;
    }

    .ajx-brand-logo {
        margin-bottom: 27px;
    }

    .ajx-brand-text {
        max-width: 100%;

        font-size: 17px;

        line-height: 1.55;
    }


    /* Social */

    .ajx-brand-social {
        gap: 24px;

        margin-top: 19px;
    }

    .ajx-brand-social i {
        font-size: 18px;
    }


    /* Groups */

    .ajx-footer-group {
        width: 100%;

        padding: 0;
    }

    .ajx-group-heading {
        font-size: 21px;

        margin-bottom: 18px;
    }

    .ajx-group-list li {
        margin-bottom: 14px;
    }

    .ajx-group-list a {
        font-size: 16px;

        line-height: 1.45;
    }


    /* Products */

    .ajx-product-group {
        padding: 0;
    }


    /* Bottom */

    .ajx-footer-bottom {
        margin-top: 38px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .ajx-footer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .ajx-logo-name {
        font-size: 43px;
    }

    .ajx-logo-ask {
        width: 86px;
        height: 53px;

        font-size: 27px;
    }

    .ajx-brand-text {
        font-size: 16px;
    }

    .ajx-group-heading {
        font-size: 20px;
    }

    .ajx-group-list a {
        font-size: 15px;
    }

}














/* =========================================================
   MIND CONTACT SECTION
========================================================= */

.mind-contact-section {

    width: 100%;

    position: relative;

    background: #ffffff;

    padding: 95px 7.2% 100px;

    overflow: hidden;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.mind-contact-section::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: rgba(220, 129, 157, 0.07);

    top: -220px;
    left: -170px;

    pointer-events: none;

}


.mind-contact-section::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(210, 226, 250, 0.45);

    right: -180px;
    bottom: -180px;

    pointer-events: none;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.mind-contact-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    gap: 70px;

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.mind-contact-content {

    width: 100%;

}


/* =========================================================
   EYEBROW
========================================================= */

.mind-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #d76f90;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 14px;

}


.mind-contact-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    background: #d76f90;

    display: inline-block;

}


/* =========================================================
   TITLE
========================================================= */

.mind-contact-title {

    margin: 0;

    max-width: 600px;

    color: #252534;

    font-size: clamp(42px, 4.2vw, 64px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -1.8px;

}


.mind-contact-title span {

    display: block;

    color: #d76f90;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.mind-contact-description {

    max-width: 610px;

    margin: 25px 0 32px;

    color: #5b5b68;

    font-size: 17px;

    line-height: 1.75;

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.mind-contact-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px 25px;

    margin-bottom: 32px;

}


/* =========================================================
   CONTACT DETAIL
========================================================= */

.mind-contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}


/* =========================================================
   CONTACT ICON
========================================================= */

.mind-contact-icon {

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fce8ef;

    color: #d76f90;

    font-size: 17px;

    transition: all 0.25s ease;

}


.mind-contact-detail:hover .mind-contact-icon {

    background: #d76f90;

    color: #ffffff;

    transform: translateY(-2px);

}


/* =========================================================
   CONTACT TEXT
========================================================= */

.mind-contact-detail-text {

    display: flex;

    flex-direction: column;

    padding-top: 1px;

}


.mind-contact-label {

    color: #292936;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 5px;

}


.mind-contact-detail-text p {

    margin: 0;

    color: #686875;

    font-size: 14px;

    line-height: 1.55;

}


.mind-contact-detail-text a {

    color: #686875;

    font-size: 14px;

    line-height: 1.55;

    text-decoration: none;

    transition: color 0.2s ease;

}


.mind-contact-detail-text a:hover {

    color: #d76f90;

}


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

.mind-contact-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}


/* Primary */

.mind-contact-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding: 0 23px;

    border-radius: 8px;

    background: #d76f90;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow: 0 10px 25px rgba(215, 111, 144, 0.20);

    transition: all 0.25s ease;

}


.mind-contact-primary:hover {

    background: #c65d7f;

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(215, 111, 144, 0.25);

}


/* Secondary */

.mind-contact-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding: 0 21px;

    border-radius: 8px;

    border: 1px solid #dedee5;

    background: #ffffff;

    color: #353541;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.25s ease;

}


.mind-contact-secondary:hover {

    border-color: #d76f90;

    color: #d76f90;

    transform: translateY(-2px);

}


/* =========================================================
   TRUST BOX
========================================================= */

.mind-contact-trust {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

    padding-top: 25px;

    border-top: 1px solid #eeeeF2;

}


.mind-contact-trust-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border-radius: 50%;

    background: #edf5ff;

    color: #5e7eb7;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}


.mind-contact-trust div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.mind-contact-trust strong {

    color: #30303c;

    font-size: 14px;

}


.mind-contact-trust span {

    color: #777783;

    font-size: 12px;

    line-height: 1.4;

}


/* =========================================================
   MAP AREA
========================================================= */

.mind-contact-map-area {

    width: 100%;

    padding: 14px;

    background: #edf5ff;

    border-radius: 26px;

    box-shadow:
        0 20px 60px rgba(45, 63, 91, 0.10);

}


/* =========================================================
   MAP HEADER
========================================================= */

.mind-map-heading {

    min-height: 70px;

    padding: 5px 9px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.mind-map-heading span {

    display: block;

    margin-bottom: 4px;

    color: #d76f90;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.mind-map-heading h3 {

    margin: 0;

    color: #2f3040;

    font-size: 23px;

    font-weight: 500;

}


.mind-map-location-icon {

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #d76f90;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);

    font-size: 16px;

}


/* =========================================================
   MAP WRAPPER
========================================================= */

.mind-map-wrapper {

    position: relative;

    width: 100%;

    height: 510px;

    overflow: hidden;

    border-radius: 18px;

    background: #dfe8f3;

}


/* =========================================================
   IFRAME
========================================================= */

.mind-map-wrapper iframe {

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

    filter: saturate(0.75);

}


/* =========================================================
   FLOATING MAP CARD
========================================================= */

.mind-map-card {

    position: absolute;

    left: 22px;

    bottom: 22px;

    max-width: 330px;

    min-height: 68px;

    padding: 11px 16px 11px 11px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.13);

    backdrop-filter: blur(8px);

}


/* Map Card Icon */

.mind-map-card-icon {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fce8ef;

    color: #d76f90;

    font-size: 16px;

}


/* Map Card Text */

.mind-map-card div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.mind-map-card strong {

    color: #30303c;

    font-size: 13px;

    line-height: 1.35;

}


.mind-map-card span {

    color: #777783;

    font-size: 12px;

}


/* =========================================================
   DIRECTIONS BUTTON
========================================================= */

.mind-map-open {

    position: absolute;

    top: 20px;

    right: 20px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 15px;

    border-radius: 9px;

    background: #ffffff;

    color: #353541;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.10);

    transition: all 0.25s ease;

}


.mind-map-open i {

    color: #d76f90;

    font-size: 13px;

}


.mind-map-open:hover {

    color: #d76f90;

    transform: translateY(-2px);

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .mind-contact-section {

        padding-left: 5%;

        padding-right: 5%;

    }


    .mind-contact-container {

        gap: 45px;

    }


    .mind-contact-title {

        font-size: 48px;

    }


    .mind-contact-description {

        font-size: 16px;

    }


    .mind-contact-details {

        gap: 18px;

    }


    .mind-map-wrapper {

        height: 470px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .mind-contact-section {

        padding-top: 75px;

        padding-bottom: 75px;

    }


    .mind-contact-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .mind-contact-content {

        max-width: 700px;

    }


    .mind-contact-title {

        font-size: 50px;

    }


    .mind-contact-description {

        max-width: 650px;

    }


    .mind-contact-map-area {

        width: 100%;

    }


    .mind-map-wrapper {

        height: 450px;

    }

}


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

@media (max-width: 600px) {

    .mind-contact-section {

        padding: 60px 20px 65px;

    }


    .mind-contact-container {

        gap: 38px;

    }


    /* Heading */

    .mind-contact-eyebrow {

        font-size: 11px;

        letter-spacing: 1.5px;

        margin-bottom: 12px;

    }


    .mind-contact-eyebrow::before {

        width: 22px;

    }


    .mind-contact-title {

        font-size: 39px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    .mind-contact-description {

        margin-top: 19px;

        margin-bottom: 28px;

        font-size: 15px;

        line-height: 1.7;

    }


    /* Details */

    .mind-contact-details {

        grid-template-columns: 1fr;

        gap: 17px;

        margin-bottom: 28px;

    }


    .mind-contact-detail {

        gap: 12px;

    }


    .mind-contact-icon {

        width: 43px;

        height: 43px;

        flex-basis: 43px;

        border-radius: 12px;

        font-size: 15px;

    }


    .mind-contact-label {

        font-size: 14px;

    }


    .mind-contact-detail-text p,

    .mind-contact-detail-text a {

        font-size: 13px;

    }


    /* Buttons */

    .mind-contact-actions {

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 11px;

    }


    .mind-contact-primary,

    .mind-contact-secondary {

        width: 100%;

        min-height: 49px;

    }


    /* Trust */

    .mind-contact-trust {

        margin-top: 26px;

        padding-top: 22px;

    }


    .mind-contact-trust-icon {

        width: 37px;

        height: 37px;

        flex-basis: 37px;

        font-size: 14px;

    }


    .mind-contact-trust strong {

        font-size: 13px;

    }


    .mind-contact-trust span {

        font-size: 11px;

    }


    /* Map */

    .mind-contact-map-area {

        padding: 9px;

        border-radius: 20px;

    }


    .mind-map-heading {

        min-height: 64px;

        padding: 5px 6px 10px;

    }


    .mind-map-heading span {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .mind-map-heading h3 {

        font-size: 20px;

    }


    .mind-map-location-icon {

        width: 39px;

        height: 39px;

        font-size: 14px;

    }


    .mind-map-wrapper {

        height: 390px;

        border-radius: 14px;

    }


    /* Floating Card */

    .mind-map-card {

        left: 13px;

        bottom: 13px;

        right: 13px;

        max-width: none;

        min-height: 62px;

        padding: 9px 12px 9px 9px;

    }


    .mind-map-card-icon {

        width: 39px;

        height: 39px;

        flex-basis: 39px;

        font-size: 14px;

    }


    .mind-map-card strong {

        font-size: 12px;

    }


    .mind-map-card span {

        font-size: 10px;

    }


    /* Directions */

    .mind-map-open {

        top: 13px;

        right: 13px;

        min-height: 38px;

        padding: 0 11px;

        font-size: 10px;

    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .mind-contact-section {

        padding-left: 16px;

        padding-right: 16px;

    }


    .mind-contact-title {

        font-size: 35px;

    }


    .mind-map-wrapper {

        height: 350px;

    }


    .mind-map-open span {

        display: none;

    }


    .mind-map-open {

        width: 38px;

        height: 38px;

        min-height: 38px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }

}


















/* =========================================================
   CONTACT PAGE
   Psychology / Mental Wellness Theme
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #292936;

    background: #ffffff;

    overflow-x: hidden;

}


/* =========================================================
   HERO
========================================================= */

.psy-contact-hero {

    position: relative;

    width: 100%;

    min-height: 470px;

    display: flex;

    align-items: center;

    background: #edf5ff;

    overflow: hidden;

}


.psy-contact-hero-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.psy-contact-bg-one {

    width: 480px;

    height: 480px;

    background: rgba(220, 129, 157, 0.13);

    left: -210px;

    top: -250px;

}


.psy-contact-bg-two {

    width: 390px;

    height: 390px;

    background: rgba(190, 215, 249, 0.55);

    right: -170px;

    bottom: -230px;

}


.psy-contact-hero-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1280px;

    margin: auto;

    padding: 75px 35px;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.psy-contact-breadcrumb {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 35px;

    font-size: 13px;

}


.psy-contact-breadcrumb a {

    color: #d76f90;

    text-decoration: none;

    font-weight: 600;

}


.psy-contact-breadcrumb i {

    color: #8d8d98;

    font-size: 9px;

}


.psy-contact-breadcrumb span {

    color: #666673;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.psy-contact-hero-content {

    max-width: 760px;

}


.psy-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #d76f90;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 17px;

}


.psy-contact-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    background: #d76f90;

}


.psy-contact-hero-content h1 {

    color: #292936;

    font-size: clamp(46px, 6vw, 76px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -2.5px;

}


.psy-contact-hero-content h1 span {

    display: block;

    color: #d76f90;

}


.psy-contact-hero-content > p {

    max-width: 670px;

    margin-top: 25px;

    color: #5f6070;

    font-size: 17px;

    line-height: 1.75;

}


/* =========================================================
   HERO BADGES
========================================================= */

.psy-contact-hero-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


.psy-contact-hero-badges div {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    background: rgba(255,255,255,0.72);

    border: 1px solid rgba(255,255,255,0.9);

    border-radius: 30px;

    color: #4e5060;

    font-size: 12px;

    font-weight: 600;

}


.psy-contact-hero-badges i {

    color: #d76f90;

    font-size: 13px;

}


/* =========================================================
   MAIN CONTACT SECTION
========================================================= */

.psy-contact-main {

    padding: 100px 6%;

    background: #ffffff;

}


.psy-contact-wrapper {

    max-width: 1350px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: start;

}


/* =========================================================
   LEFT INFORMATION
========================================================= */

.psy-contact-information {

    padding-top: 12px;

}


.psy-contact-small-title {

    display: block;

    margin-bottom: 14px;

    color: #d76f90;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.psy-contact-information > h2 {

    max-width: 500px;

    color: #292936;

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -1.5px;

}


.psy-contact-information > h2 span {

    color: #d76f90;

}


.psy-contact-intro {

    max-width: 570px;

    margin-top: 20px;

    margin-bottom: 35px;

    color: #696976;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   CONTACT CARDS
========================================================= */

.psy-contact-cards {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.psy-contact-card {

    position: relative;

    min-height: 80px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 13px 18px;

    border: 1px solid #e9e9ef;

    border-radius: 15px;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.psy-contact-card:hover {

    transform: translateX(5px);

    border-color: #e7b1c2;

    box-shadow:
        0 12px 35px rgba(42, 43, 58, 0.07);

}


.psy-contact-card-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #fce9ef;

    color: #d76f90;

    font-size: 17px;

}


.psy-contact-card-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.psy-contact-card-content span {

    color: #7b7b87;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}


.psy-contact-card-content strong {

    color: #30303c;

    font-size: 14px;

    line-height: 1.35;

}


.psy-contact-card-content small {

    color: #858590;

    font-size: 11px;

}


.psy-contact-card-arrow {

    margin-left: auto;

    color: #c1c1ca;

    font-size: 12px;

}


/* =========================================================
   SOCIAL
========================================================= */

.psy-contact-social-area {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

}


.psy-contact-social-area > span {

    color: #666673;

    font-size: 13px;

    font-weight: 600;

}


.psy-contact-social {

    display: flex;

    align-items: center;

    gap: 8px;

}


.psy-contact-social a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #edf5ff;

    color: #4e5260;

    text-decoration: none;

    font-size: 14px;

    transition: all 0.25s ease;

}


.psy-contact-social a:hover {

    background: #d76f90;

    color: #ffffff;

    transform: translateY(-3px);

}


/* =========================================================
   FORM BOX
========================================================= */

.psy-contact-form-box {

    padding: 42px;

    background: #edf5ff;

    border-radius: 26px;

    box-shadow:
        0 20px 60px rgba(53, 66, 92, 0.08);

}


.psy-contact-form-header > span {

    color: #d76f90;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.psy-contact-form-header h2 {

    margin-top: 8px;

    color: #292936;

    font-size: 34px;

    font-weight: 500;

}


.psy-contact-form-header p {

    margin-top: 9px;

    color: #686976;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   FORM
========================================================= */

.psy-contact-form {

    margin-top: 28px;

}


.psy-contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 17px;

}


.psy-contact-field {

    margin-bottom: 18px;

}


.psy-contact-field label {

    display: block;

    margin-bottom: 8px;

    color: #3e3e4a;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   INPUT
========================================================= */

.psy-contact-input {

    position: relative;

    display: flex;

    align-items: center;

}


.psy-contact-input > i:first-child {

    position: absolute;

    left: 15px;

    color: #a1a1ad;

    font-size: 13px;

    pointer-events: none;

}


.psy-contact-input input,

.psy-contact-input select {

    width: 100%;

    height: 49px;

    padding: 0 15px 0 42px;

    border: 1px solid #dce1ea;

    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: #3c3c48;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.psy-contact-input select {

    appearance: none;

    cursor: pointer;

}


.psy-contact-input input::placeholder {

    color: #a7a7b1;

}


.psy-contact-input input:focus,

.psy-contact-input select:focus {

    border-color: #d76f90;

    box-shadow:
        0 0 0 3px rgba(215,111,144,0.10);

}


.psy-contact-select-arrow {

    position: absolute;

    right: 15px;

    color: #9999a5;

    font-size: 10px;

    pointer-events: none;

}


/* =========================================================
   TEXTAREA
========================================================= */

.psy-contact-textarea {

    position: relative;

}


.psy-contact-textarea > i {

    position: absolute;

    top: 16px;

    left: 15px;

    color: #a1a1ad;

    font-size: 14px;

}


.psy-contact-textarea textarea {

    width: 100%;

    min-height: 125px;

    resize: vertical;

    padding: 14px 15px 14px 42px;

    border: 1px solid #dce1ea;

    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: #3c3c48;

    font-family: inherit;

    font-size: 13px;

    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.psy-contact-textarea textarea::placeholder {

    color: #a7a7b1;

}


.psy-contact-textarea textarea:focus {

    border-color: #d76f90;

    box-shadow:
        0 0 0 3px rgba(215,111,144,0.10);

}


/* =========================================================
   CHECKBOX
========================================================= */

.psy-contact-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    cursor: pointer;

    margin-top: 2px;

}


.psy-contact-checkbox input {

    width: 15px;

    height: 15px;

    flex: 0 0 15px;

    margin-top: 2px;

    accent-color: #d76f90;

}


.psy-contact-checkbox span {

    color: #737480;

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================================
   SUBMIT
========================================================= */

.psy-contact-submit {

    width: 100%;

    height: 53px;

    margin-top: 20px;

    border: none;

    border-radius: 9px;

    background: #d76f90;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(215,111,144,0.20);

    transition: all 0.25s ease;

}


.psy-contact-submit:hover {

    background: #c95e80;

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(215,111,144,0.25);

}


/* =========================================================
   FORM NOTE
========================================================= */

.psy-contact-form-note {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color: #858691;

    font-size: 10px;

}


.psy-contact-form-note i {

    color: #718ab4;

}


/* =========================================================
   SUPPORT NOTICE
========================================================= */

.psy-contact-support {

    padding: 0 6% 100px;

}


.psy-contact-support-inner {

    max-width: 1250px;

    margin: auto;

    padding: 30px 35px;

    display: flex;

    align-items: center;

    gap: 25px;

    border-radius: 20px;

    background: #fdf0f4;

    border: 1px solid #f5dce5;

}


.psy-contact-support-icon {

    width: 57px;

    height: 57px;

    flex: 0 0 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #d76f90;

    font-size: 21px;

}


.psy-contact-support-content {

    flex: 1;

}


.psy-contact-support-content > span {

    color: #d76f90;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.psy-contact-support-content h2 {

    margin-top: 4px;

    color: #34343f;

    font-size: 21px;

    font-weight: 600;

}


.psy-contact-support-content p {

    max-width: 780px;

    margin-top: 6px;

    color: #74747e;

    font-size: 11px;

    line-height: 1.6;

}


.psy-contact-support-button {

    flex: 0 0 auto;

    min-height: 45px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 8px;

    background: #d76f90;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: all 0.25s ease;

}


.psy-contact-support-button:hover {

    background: #c65d7e;

    transform: translateY(-2px);

}


/* =========================================================
   LOCATION
========================================================= */

.psy-contact-location {

    padding: 0 6% 100px;

}


.psy-contact-location-container {

    max-width: 1350px;

    margin: auto;

}


.psy-contact-location-heading {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 35px;

}


.psy-contact-location-heading > span {

    color: #d76f90;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.psy-contact-location-heading h2 {

    margin-top: 9px;

    color: #2d2d39;

    font-size: 39px;

    font-weight: 500;

}


.psy-contact-location-heading p {

    margin-top: 10px;

    color: #74747f;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   MAP
========================================================= */

.psy-contact-location-map {

    position: relative;

    height: 470px;

    overflow: hidden;

    border-radius: 23px;

    background: #e5edf7;

    box-shadow:
        0 18px 50px rgba(47, 61, 85, 0.10);

}


.psy-contact-location-map iframe {

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

    filter: saturate(0.75);

}


/* =========================================================
   MAP CARD
========================================================= */

.psy-contact-location-card {

    position: absolute;

    left: 25px;

    bottom: 25px;

    max-width: 360px;

    padding: 12px 17px 12px 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 13px;

    background: rgba(255,255,255,0.96);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.13);

    backdrop-filter: blur(8px);

}


.psy-contact-location-card-icon {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #fce8ef;

    color: #d76f90;

}


.psy-contact-location-card div:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.psy-contact-location-card strong {

    color: #32323d;

    font-size: 12px;

}


.psy-contact-location-card span {

    color: #7c7c87;

    font-size: 11px;

}


/* =========================================================
   DIRECTIONS
========================================================= */

.psy-contact-directions {

    position: absolute;

    top: 20px;

    right: 20px;

    min-height: 43px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 9px;

    background: #ffffff;

    color: #3d3d48;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(0,0,0,0.10);

    transition: all 0.25s ease;

}


.psy-contact-directions i {

    color: #d76f90;

}


.psy-contact-directions:hover {

    color: #d76f90;

    transform: translateY(-2px);

}


/* =========================================================
   FINAL CTA
========================================================= */

.psy-contact-final {

    padding: 100px 6%;

    background: #edf5ff;

}


.psy-contact-final-inner {

    max-width: 800px;

    margin: auto;

    text-align: center;

}


.psy-contact-final-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #d76f90;

    font-size: 22px;

    box-shadow:
        0 10px 30px rgba(60,80,110,0.08);

}


.psy-contact-final-inner > span {

    color: #d76f90;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.psy-contact-final-inner h2 {

    margin-top: 13px;

    color: #2d2d39;

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.12;

    font-weight: 400;

    letter-spacing: -1.3px;

}


.psy-contact-final-inner h2 strong {

    color: #d76f90;

    font-weight: 500;

}


.psy-contact-final-inner > p {

    max-width: 570px;

    margin: 17px auto 0;

    color: #6f707c;

    font-size: 14px;

    line-height: 1.7;

}


.psy-contact-final-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;

}


.psy-contact-final-primary,

.psy-contact-final-secondary {

    min-height: 48px;

    padding: 0 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: all 0.25s ease;

}


.psy-contact-final-primary {

    background: #d76f90;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(215,111,144,0.18);

}


.psy-contact-final-secondary {

    background: #ffffff;

    color: #393945;

    border: 1px solid #dfe2e9;

}


.psy-contact-final-primary:hover {

    background: #c65d7e;

    transform: translateY(-2px);

}


.psy-contact-final-secondary:hover {

    border-color: #d76f90;

    color: #d76f90;

    transform: translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .psy-contact-main {

        padding-left: 4%;

        padding-right: 4%;

    }


    .psy-contact-wrapper {

        gap: 45px;

    }


    .psy-contact-form-box {

        padding: 32px;

    }


    .psy-contact-information > h2 {

        font-size: 43px;

    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 800px) {

    .psy-contact-hero {

        min-height: auto;

    }


    .psy-contact-hero-container {

        padding: 65px 25px;

    }


    .psy-contact-wrapper {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .psy-contact-information {

        max-width: 700px;

    }


    .psy-contact-form-box {

        max-width: 700px;

        width: 100%;

    }


    .psy-contact-support-inner {

        align-items: flex-start;

    }

}


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

@media (max-width: 600px) {

    /* HERO */

    .psy-contact-hero-container {

        padding: 50px 20px 60px;

    }


    .psy-contact-breadcrumb {

        margin-bottom: 28px;

        font-size: 11px;

    }


    .psy-contact-eyebrow {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .psy-contact-eyebrow::before {

        width: 20px;

    }


    .psy-contact-hero-content h1 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }


    .psy-contact-hero-content > p {

        margin-top: 19px;

        font-size: 14px;

        line-height: 1.7;

    }


    .psy-contact-hero-badges {

        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 23px;

    }


    .psy-contact-hero-badges div {

        width: max-content;

        max-width: 100%;

        font-size: 11px;

        padding: 8px 12px;

    }


    /* MAIN */

    .psy-contact-main {

        padding: 60px 20px;

    }


    .psy-contact-wrapper {

        gap: 42px;

    }


    .psy-contact-small-title {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .psy-contact-information > h2 {

        font-size: 37px;

        line-height: 1.12;

    }


    .psy-contact-intro {

        margin-top: 17px;

        margin-bottom: 27px;

        font-size: 14px;

        line-height: 1.7;

    }


    /* CONTACT CARDS */

    .psy-contact-card {

        min-height: 74px;

        padding: 10px 12px;

        gap: 11px;

        border-radius: 13px;

    }


    .psy-contact-card-icon {

        width: 43px;

        height: 43px;

        flex-basis: 43px;

        border-radius: 11px;

        font-size: 15px;

    }


    .psy-contact-card-content span {

        font-size: 9px;

    }


    .psy-contact-card-content strong {

        font-size: 12px;

    }


    .psy-contact-card-content small {

        font-size: 10px;

    }


    .psy-contact-card-arrow {

        font-size: 10px;

    }


    /* SOCIAL */

    .psy-contact-social-area {

        margin-top: 25px;

    }


    /* FORM */

    .psy-contact-form-box {

        padding: 25px 18px;

        border-radius: 19px;

    }


    .psy-contact-form-header > span {

        font-size: 9px;

    }


    .psy-contact-form-header h2 {

        font-size: 28px;

    }


    .psy-contact-form-header p {

        font-size: 12px;

    }


    .psy-contact-form {

        margin-top: 23px;

    }


    .psy-contact-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .psy-contact-field {

        margin-bottom: 16px;

    }


    .psy-contact-field label {

        font-size: 11px;

        margin-bottom: 7px;

    }


    .psy-contact-input input,

    .psy-contact-input select {

        height: 47px;

        font-size: 12px;

    }


    .psy-contact-textarea textarea {

        min-height: 115px;

        font-size: 12px;

    }


    .psy-contact-checkbox span {

        font-size: 9px;

    }


    .psy-contact-submit {

        height: 50px;

        font-size: 12px;

    }


    /* SUPPORT */

    .psy-contact-support {

        padding: 0 20px 60px;

    }


    .psy-contact-support-inner {

        flex-direction: column;

        align-items: flex-start;

        padding: 23px;

        gap: 16px;

        border-radius: 17px;

    }


    .psy-contact-support-icon {

        width: 49px;

        height: 49px;

        flex-basis: 49px;

        font-size: 18px;

    }


    .psy-contact-support-content h2 {

        font-size: 19px;

    }


    .psy-contact-support-content p {

        font-size: 10px;

    }


    .psy-contact-support-button {

        width: 100%;

        justify-content: center;

    }


    /* LOCATION */

    .psy-contact-location {

        padding: 0 20px 65px;

    }


    .psy-contact-location-heading {

        margin-bottom: 25px;

    }


    .psy-contact-location-heading h2 {

        font-size: 31px;

    }


    .psy-contact-location-heading p {

        font-size: 12px;

    }


    .psy-contact-location-map {

        height: 370px;

        border-radius: 17px;

    }


    .psy-contact-location-card {

        left: 12px;

        right: 12px;

        bottom: 12px;

        max-width: none;

        padding: 9px;

    }


    .psy-contact-location-card-icon {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

    }


    .psy-contact-location-card strong {

        font-size: 11px;

    }


    .psy-contact-location-card span {

        font-size: 9px;

    }


    .psy-contact-directions {

        top: 12px;

        right: 12px;

        width: 40px;

        height: 40px;

        min-height: 40px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }


    .psy-contact-directions {

        font-size: 0;

    }


    .psy-contact-directions i {

        font-size: 13px;

    }


    /* FINAL */

    .psy-contact-final {

        padding: 65px 20px;

    }


    .psy-contact-final-icon {

        width: 52px;

        height: 52px;

        font-size: 19px;

    }


    .psy-contact-final-inner > span {

        font-size: 9px;

        letter-spacing: 1.4px;

    }


    .psy-contact-final-inner h2 {

        font-size: 34px;

    }


    .psy-contact-final-inner > p {

        font-size: 12px;

    }


    .psy-contact-final-buttons {

        flex-direction: column;

        gap: 9px;

    }


    .psy-contact-final-primary,

    .psy-contact-final-secondary {

        width: 100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .psy-contact-hero-content h1 {

        font-size: 38px;

    }


    .psy-contact-information > h2 {

        font-size: 33px;

    }


    .psy-contact-form-box {

        padding: 22px 15px;

    }


    .psy-contact-location-map {

        height: 330px;

    }


    .psy-contact-final-inner h2 {

        font-size: 30px;

    }

}












/* =========================================================
   ABOUT PAGE
   Psychology / Mental Wellness Theme
========================================================= */


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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #292936;

    background: #ffffff;

    overflow-x: hidden;

}


img {
    max-width: 100%;
}


/* =========================================================
   COMMON
========================================================= */

.psy-about-section-label {

    display: inline-block;

    color: #d76f90;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


/* =========================================================
   HERO
========================================================= */

.psy-about-hero {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #edf5ff;

}


.psy-about-hero-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.psy-about-circle-one {

    width: 500px;

    height: 500px;

    left: -230px;

    top: -250px;

    background: rgba(220,129,157,0.12);

}


.psy-about-circle-two {

    width: 450px;

    height: 450px;

    right: -230px;

    bottom: -270px;

    background: rgba(190,216,250,0.55);

}


.psy-about-hero-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1280px;

    margin: auto;

    padding: 75px 35px;

}


.psy-about-breadcrumb {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 38px;

    font-size: 13px;

}


.psy-about-breadcrumb a {

    color: #d76f90;

    text-decoration: none;

    font-weight: 600;

}


.psy-about-breadcrumb i {

    color: #8c8c97;

    font-size: 9px;

}


.psy-about-breadcrumb span {

    color: #686873;

}


.psy-about-hero-content {

    max-width: 790px;

}


.psy-about-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    color: #d76f90;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.psy-about-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    background: #d76f90;

}


.psy-about-hero-content h1 {

    color: #292936;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.04;

    font-weight: 500;

    letter-spacing: -2.8px;

}


.psy-about-hero-content h1 span {

    color: #d76f90;

}


.psy-about-hero-content > p {

    max-width: 680px;

    margin-top: 24px;

    color: #60616f;

    font-size: 17px;

    line-height: 1.7;

}


/* =========================================================
   HERO POINTS
========================================================= */

.psy-about-hero-points {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 28px;

}


.psy-about-hero-points div {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    border-radius: 30px;

    background: rgba(255,255,255,0.72);

    border: 1px solid rgba(255,255,255,0.9);

    color: #51525f;

    font-size: 11px;

    font-weight: 600;

}


.psy-about-hero-points i {

    color: #d76f90;

}


/* =========================================================
   INTRO
========================================================= */

.psy-about-intro {

    padding: 105px 6%;

    background: #ffffff;

}


.psy-about-intro-container {

    max-width: 1350px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    align-items: center;

    gap: 90px;

}


/* =========================================================
   INTRO IMAGE
========================================================= */

.psy-about-image-area {

    position: relative;

    min-height: 570px;

}


.psy-about-image-back {

    position: absolute;

    width: 82%;

    height: 85%;

    left: 3%;

    top: 6%;

    border-radius: 30px;

    background: #edf5ff;

    transform: rotate(-3deg);

}


.psy-about-image-wrapper {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 8%;

    width: 82%;

    height: 520px;

    overflow: hidden;

    border-radius: 28px;

    background: #e5edf8;

}


.psy-about-image-wrapper img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.psy-about-experience-card {

    position: absolute;

    z-index: 5;

    left: 0;

    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 235px;

    padding: 12px 17px 12px 12px;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(42,52,72,0.13);

}


.psy-about-experience-icon {

    width: 45px;

    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #fce9ef;

    color: #d76f90;

}


.psy-about-experience-card div:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.psy-about-experience-card strong {

    color: #343440;

    font-size: 13px;

}


.psy-about-experience-card span {

    color: #81818c;

    font-size: 10px;

}


.psy-about-image-dot {

    position: absolute;

    z-index: 5;

    right: 2%;

    top: 45px;

    width: 53px;

    height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #d76f90;

    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 10px 25px rgba(215,111,144,0.25);

}


/* =========================================================
   INTRO CONTENT
========================================================= */

.psy-about-intro-content {

    max-width: 650px;

}


.psy-about-intro-content h2 {

    margin-top: 13px;

    color: #2c2c38;

    font-size: clamp(40px,4.2vw,58px);

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -1.6px;

}


.psy-about-intro-content h2 span {

    color: #d76f90;

}


.psy-about-intro-content > p {

    margin-top: 18px;

    color: #6a6a76;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   FEATURE LIST
========================================================= */

.psy-about-feature-list {

    display: flex;

    flex-direction: column;

    gap: 17px;

    margin-top: 30px;

}


.psy-about-feature {

    display: flex;

    align-items: center;

    gap: 12px;

}


.psy-about-feature-icon {

    width: 35px;

    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fce9ef;

    color: #d76f90;

    font-size: 11px;

}


.psy-about-feature > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.psy-about-feature strong {

    color: #363641;

    font-size: 12px;

}


.psy-about-feature span {

    color: #888892;

    font-size: 10px;

}


/* =========================================================
   APPROACH
========================================================= */

.psy-about-approach {

    padding: 100px 6%;

    background: #edf5ff;

}


.psy-about-approach-container {

    max-width: 1350px;

    margin: auto;

}


.psy-about-approach-heading {

    max-width: 680px;

    margin-bottom: 50px;

}


.psy-about-approach-heading h2 {

    margin-top: 12px;

    color: #2d2d39;

    font-size: clamp(38px,4vw,54px);

    line-height: 1.1;

    font-weight: 500;

    letter-spacing: -1.3px;

}


.psy-about-approach-heading h2 span {

    color: #d76f90;

}


.psy-about-approach-heading p {

    margin-top: 17px;

    color: #6e6f7a;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   APPROACH GRID
========================================================= */

.psy-about-approach-grid {

    display: grid;

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

    gap: 18px;

}


.psy-about-approach-card {

    position: relative;

    min-height: 325px;

    padding: 30px 25px;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 35px rgba(47,62,88,0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.psy-about-approach-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(47,62,88,0.10);

}


.psy-about-approach-number {

    position: absolute;

    top: 20px;

    right: 22px;

    color: #e5e5eb;

    font-size: 31px;

    font-weight: 700;

}


.psy-about-approach-icon {

    width: 53px;

    height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fce9ef;

    color: #d76f90;

    font-size: 19px;

}


.psy-about-approach-card h3 {

    margin-top: 25px;

    color: #343440;

    font-size: 19px;

    font-weight: 600;

}


.psy-about-approach-card p {

    margin-top: 11px;

    color: #777783;

    font-size: 12px;

    line-height: 1.7;

}


.psy-about-card-line {

    position: absolute;

    left: 25px;

    bottom: 23px;

    width: 35px;

    height: 2px;

    background: #d76f90;

}


/* =========================================================
   VALUES
========================================================= */

.psy-about-values {

    padding: 100px 6%;

    background: #ffffff;

}


.psy-about-values-container {

    max-width: 1250px;

    margin: auto;

}


.psy-about-values-heading {

    text-align: center;

    margin-bottom: 48px;

}


.psy-about-values-heading h2 {

    margin-top: 12px;

    color: #2e2e39;

    font-size: clamp(38px,4vw,53px);

    font-weight: 500;

    letter-spacing: -1.3px;

}


.psy-about-values-heading h2 span {

    color: #d76f90;

}


/* =========================================================
   VALUE GRID
========================================================= */

.psy-about-values-grid {

    display: grid;

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

    gap: 20px;

}


.psy-about-value {

    text-align: center;

    padding: 25px 20px;

}


.psy-about-value-icon {

    width: 60px;

    height: 60px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #edf5ff;

    color: #d76f90;

    font-size: 19px;

}


.psy-about-value h3 {

    margin-top: 17px;

    color: #343440;

    font-size: 17px;

}


.psy-about-value p {

    margin-top: 9px;

    color: #777783;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   DOCTOR
========================================================= */

.psy-about-doctor {

    padding: 105px 6%;

    background: #fdf0f4;

}


.psy-about-doctor-container {

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.85fr;

    gap: 85px;

    align-items: center;

}


.psy-about-doctor-content {

    max-width: 650px;

}


.psy-about-doctor-content h2 {

    margin-top: 13px;

    color: #2e2e39;

    font-size: clamp(40px,4.5vw,58px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -1.5px;

}


.psy-about-doctor-content h2 span {

    color: #d76f90;

}


.psy-about-doctor-content > p {

    margin-top: 18px;

    color: #6e6e78;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   CREDENTIALS
========================================================= */

.psy-about-credentials {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;

}


.psy-about-credentials div {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 13px;

    border-radius: 8px;

    background: #ffffff;

    color: #5c5c68;

    font-size: 10px;

    font-weight: 600;

}


.psy-about-credentials i {

    color: #d76f90;

    font-size: 13px;

}


/* =========================================================
   DOCTOR BUTTON
========================================================= */

.psy-about-doctor-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: 30px;

    min-height: 49px;

    padding: 0 20px;

    border-radius: 8px;

    background: #d76f90;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: all 0.25s ease;

}


.psy-about-doctor-button:hover {

    background: #c65d7e;

    transform: translateY(-2px);

}


/* =========================================================
   DOCTOR IMAGE
========================================================= */

.psy-about-doctor-image {

    position: relative;

    min-height: 570px;

}


.psy-about-doctor-image-bg {

    position: absolute;

    width: 90%;

    height: 85%;

    right: 0;

    top: 5%;

    border-radius: 30px;

    background: #ffffff;

    transform: rotate(3deg);

}


.psy-about-doctor-photo {

    position: absolute;

    z-index: 2;

    width: 85%;

    height: 525px;

    right: 6%;

    top: 0;

    overflow: hidden;

    border-radius: 27px;

    background: #e6edf7;

}


.psy-about-doctor-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.psy-about-doctor-card {

    position: absolute;

    z-index: 5;

    left: 0;

    bottom: 28px;

    max-width: 280px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(50,60,80,0.14);

}


.psy-about-doctor-card-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #fce9ef;

    color: #d76f90;

}


.psy-about-doctor-card div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.psy-about-doctor-card strong {

    color: #33333e;

    font-size: 11px;

}


.psy-about-doctor-card span {

    color: #858590;

    font-size: 9px;

}


/* =========================================================
   TRUST
========================================================= */

.psy-about-trust {

    padding: 80px 6%;

    background: #ffffff;

}


.psy-about-trust-container {

    max-width: 1250px;

    margin: auto;

}


.psy-about-trust-heading {

    text-align: center;

    margin-bottom: 40px;

}


.psy-about-trust-heading > span {

    color: #d76f90;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;

}


.psy-about-trust-heading h2 {

    margin-top: 9px;

    color: #30303b;

    font-size: 35px;

    font-weight: 500;

}


.psy-about-trust-heading h2 strong {

    color: #d76f90;

    font-weight: 500;

}


/* =========================================================
   TRUST ITEMS
========================================================= */

.psy-about-trust-items {

    display: grid;

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

    border-top: 1px solid #eeeeF2;

    border-bottom: 1px solid #eeeeF2;

}


.psy-about-trust-item {

    position: relative;

    padding: 28px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.psy-about-trust-item:not(:last-child)::after {

    content: "";

    position: absolute;

    width: 1px;

    height: 55px;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    background: #eeeeF2;

}


.psy-about-trust-item i {

    color: #d76f90;

    font-size: 19px;

    margin-bottom: 10px;

}


.psy-about-trust-item strong {

    color: #343440;

    font-size: 23px;

    font-weight: 600;

}


.psy-about-trust-item span {

    margin-top: 4px;

    color: #85858f;

    font-size: 10px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.psy-about-final {

    position: relative;

    padding: 100px 6%;

    overflow: hidden;

    background: #edf5ff;

}


.psy-about-final-decoration {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    left: -230px;

    bottom: -300px;

    background: rgba(220,129,157,0.11);

}


.psy-about-final-content {

    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: auto;

    text-align: center;

}


.psy-about-final-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #d76f90;

    font-size: 21px;

    box-shadow:
        0 10px 30px rgba(50,70,100,0.08);

}


.psy-about-final-content > span {

    color: #d76f90;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.psy-about-final-content h2 {

    margin-top: 12px;

    color: #30303b;

    font-size: clamp(37px,4.3vw,54px);

    line-height: 1.1;

    font-weight: 400;

    letter-spacing: -1.4px;

}


.psy-about-final-content h2 strong {

    color: #d76f90;

    font-weight: 500;

}


.psy-about-final-content > p {

    max-width: 570px;

    margin: 17px auto 0;

    color: #71727e;

    font-size: 13px;

    line-height: 1.7;

}


.psy-about-final-buttons {

    display: flex;

    justify-content: center;

    gap: 11px;

    margin-top: 28px;

}


.psy-about-final-primary,

.psy-about-final-secondary {

    min-height: 49px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: all 0.25s ease;

}


.psy-about-final-primary {

    background: #d76f90;

    color: #ffffff;

}


.psy-about-final-secondary {

    background: #ffffff;

    color: #3c3c48;

    border: 1px solid #e0e3ea;

}


.psy-about-final-primary:hover {

    background: #c65d7e;

    transform: translateY(-2px);

}


.psy-about-final-secondary:hover {

    color: #d76f90;

    border-color: #d76f90;

    transform: translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .psy-about-intro-container {

        gap: 50px;

    }


    .psy-about-doctor-container {

        gap: 50px;

    }


    .psy-about-approach-grid {

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

    }


    .psy-about-values-grid {

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

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .psy-about-hero-container {

        padding: 65px 25px;

    }


    .psy-about-intro-container {

        grid-template-columns: 1fr;

    }


    .psy-about-image-area {

        max-width: 620px;

        width: 100%;

        margin: auto;

    }


    .psy-about-intro-content {

        max-width: 700px;

    }


    .psy-about-doctor-container {

        grid-template-columns: 1fr;

    }


    .psy-about-doctor-content {

        max-width: 700px;

    }


    .psy-about-doctor-image {

        max-width: 600px;

        width: 100%;

        margin: auto;

    }

}


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

@media (max-width: 600px) {


    /* HERO */

    .psy-about-hero-container {

        padding: 50px 20px 60px;

    }


    .psy-about-breadcrumb {

        margin-bottom: 28px;

        font-size: 11px;

    }


    .psy-about-eyebrow {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .psy-about-eyebrow::before {

        width: 20px;

    }


    .psy-about-hero-content h1 {

        font-size: 42px;

        line-height: 1.08;

        letter-spacing: -1.5px;

    }


    .psy-about-hero-content > p {

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.7;

    }


    .psy-about-hero-points {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 22px;

    }


    .psy-about-hero-points div {

        font-size: 10px;

        padding: 8px 12px;

    }


    /* INTRO */

    .psy-about-intro {

        padding: 65px 20px;

    }


    .psy-about-intro-container {

        gap: 45px;

    }


    .psy-about-image-area {

        min-height: 405px;

    }


    .psy-about-image-wrapper {

        left: 7%;

        width: 85%;

        height: 370px;

        border-radius: 21px;

    }


    .psy-about-image-back {

        width: 84%;

        height: 85%;

        border-radius: 23px;

    }


    .psy-about-experience-card {

        left: 0;

        bottom: 8px;

        min-width: 205px;

        padding: 9px 12px 9px 9px;

    }


    .psy-about-experience-icon {

        width: 39px;

        height: 39px;

        flex-basis: 39px;

        font-size: 14px;

    }


    .psy-about-experience-card strong {

        font-size: 11px;

    }


    .psy-about-experience-card span {

        font-size: 9px;

    }


    .psy-about-image-dot {

        width: 43px;

        height: 43px;

        right: 0;

        top: 30px;

        font-size: 12px;

    }


    .psy-about-intro-content h2 {

        font-size: 37px;

    }


    .psy-about-intro-content > p {

        font-size: 13px;

    }


    /* APPROACH */

    .psy-about-approach {

        padding: 65px 20px;

    }


    .psy-about-approach-heading {

        margin-bottom: 30px;

    }


    .psy-about-approach-heading h2 {

        font-size: 35px;

    }


    .psy-about-approach-heading p {

        font-size: 12px;

    }


    .psy-about-approach-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .psy-about-approach-card {

        min-height: 270px;

        padding: 25px 22px;

    }


    /* VALUES */

    .psy-about-values {

        padding: 65px 20px;

    }


    .psy-about-values-heading {

        margin-bottom: 25px;

    }


    .psy-about-values-heading h2 {

        font-size: 34px;

    }


    .psy-about-values-grid {

        grid-template-columns: 1fr 1fr;

        gap: 5px;

    }


    .psy-about-value {

        padding: 20px 10px;

    }


    .psy-about-value-icon {

        width: 50px;

        height: 50px;

        font-size: 16px;

    }


    .psy-about-value h3 {

        font-size: 14px;

    }


    .psy-about-value p {

        font-size: 10px;

    }


    /* DOCTOR */

    .psy-about-doctor {

        padding: 65px 20px;

    }


    .psy-about-doctor-container {

        gap: 40px;

    }


    .psy-about-doctor-content h2 {

        font-size: 37px;

    }


    .psy-about-doctor-content > p {

        font-size: 13px;

    }


    .psy-about-credentials {

        flex-direction: column;

        align-items: stretch;

    }


    .psy-about-credentials div {

        font-size: 10px;

    }


    .psy-about-doctor-button {

        width: 100%;

        justify-content: center;

    }


    .psy-about-doctor-image {

        min-height: 410px;

    }


    .psy-about-doctor-photo {

        width: 87%;

        height: 370px;

        right: 5%;

        border-radius: 21px;

    }


    .psy-about-doctor-image-bg {

        height: 83%;

        border-radius: 23px;

    }


    .psy-about-doctor-card {

        left: 0;

        bottom: 7px;

    }


    /* TRUST */

    .psy-about-trust {

        padding: 60px 20px;

    }


    .psy-about-trust-heading {

        margin-bottom: 25px;

    }


    .psy-about-trust-heading h2 {

        font-size: 29px;

    }


    .psy-about-trust-items {

        grid-template-columns: 1fr 1fr;

    }


    .psy-about-trust-item {

        padding: 23px 10px;

    }


    .psy-about-trust-item:nth-child(2)::after {

        display: none;

    }


    .psy-about-trust-item:nth-child(1),

    .psy-about-trust-item:nth-child(2) {

        border-bottom: 1px solid #eeeeF2;

    }


    .psy-about-trust-item strong {

        font-size: 20px;

    }


    /* FINAL CTA */

    .psy-about-final {

        padding: 65px 20px;

    }


    .psy-about-final-content h2 {

        font-size: 34px;

    }


    .psy-about-final-content > p {

        font-size: 12px;

    }


    .psy-about-final-buttons {

        flex-direction: column;

    }


    .psy-about-final-primary,

    .psy-about-final-secondary {

        width: 100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .psy-about-hero-content h1 {

        font-size: 37px;

    }


    .psy-about-intro-content h2 {

        font-size: 33px;

    }


    .psy-about-image-area {

        min-height: 370px;

    }


    .psy-about-image-wrapper {

        height: 335px;

    }


    .psy-about-doctor-content h2 {

        font-size: 33px;

    }


    .psy-about-final-content h2 {

        font-size: 30px;

    }

}

















a {
    text-decoration: none;
}


/* =====================================================
   HERO
===================================================== */

.psy-privacy-hero {
    background:
        radial-gradient(circle at 85% 25%, rgba(215,111,144,0.12), transparent 28%),
        linear-gradient(135deg, #edf5ff 0%, #f8fbff 100%);

    padding: 95px 20px 90px;
    position: relative;
    overflow: hidden;
}

.psy-privacy-hero::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(215,111,144,0.06);
    right: -100px;
    top: -100px;
}

.psy-privacy-hero-inner {
    width: min(1100px, 100%);
    margin: auto;
    position: relative;
    z-index: 2;
}

.psy-privacy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 28px;
    color: #718096;
}

.psy-privacy-breadcrumb a {
    color: #d76f90;
    font-weight: 600;
}

.psy-privacy-breadcrumb i {
    font-size: 11px;
    color: #a5b0bd;
}

.psy-privacy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #d76f90;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;

    margin-bottom: 15px;
}

.psy-privacy-eyebrow i {
    font-size: 16px;
}

.psy-privacy-hero h1 {
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.1;
    color: #263648;
    margin-bottom: 22px;
    font-weight: 700;
}

.psy-privacy-hero h1 span {
    color: #d76f90;
}

.psy-privacy-hero p {
    max-width: 720px;
    color: #637387;
    font-size: 17px;
    line-height: 1.8;
}


/* =====================================================
   MAIN
===================================================== */

.psy-privacy-main {
    padding: 80px 20px;
    background: #ffffff;
}

.psy-privacy-container {
    width: min(1100px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 60px;

    align-items: start;
}


/* =====================================================
   SIDEBAR
===================================================== */

.psy-privacy-sidebar {
    position: sticky;
    top: 30px;
}

.psy-privacy-sidebar-card {
    background: #f7faff;
    border: 1px solid #e7eef7;
    border-radius: 18px;
    padding: 25px 20px;
}

.psy-privacy-sidebar-card h3 {
    font-size: 18px;
    color: #263648;
    margin-bottom: 18px;
}

.psy-privacy-sidebar-card a {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #64748b;
    font-size: 14px;
    font-weight: 500;

    padding: 10px 5px;

    transition: all 0.25s ease;
}

.psy-privacy-sidebar-card a i {
    width: 18px;
    color: #d76f90;
    font-size: 13px;
}

.psy-privacy-sidebar-card a:hover {
    color: #d76f90;
    transform: translateX(3px);
}


/* =====================================================
   CONTENT
===================================================== */

.psy-privacy-content {
    min-width: 0;
}

.psy-privacy-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #fff4f7;
    border: 1px solid #f3d9e1;

    color: #6d6870;

    padding: 9px 15px;
    border-radius: 50px;

    font-size: 13px;

    margin-bottom: 42px;
}

.psy-privacy-updated i {
    color: #d76f90;
}

.psy-privacy-section {
    position: relative;

    padding-bottom: 45px;
    margin-bottom: 45px;

    border-bottom: 1px solid #edf0f4;
    scroll-margin-top: 30px;
}

.psy-privacy-section:last-child {
    border-bottom: none;
}

.psy-privacy-number {
    display: inline-block;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #d76f90;

    background: #fff2f6;

    padding: 5px 11px;
    border-radius: 30px;

    margin-bottom: 13px;
}

.psy-privacy-section h2 {
    color: #263648;
    font-size: 29px;
    line-height: 1.3;

    margin-bottom: 18px;
}

.psy-privacy-section p {
    color: #637387;
    font-size: 15.5px;
    line-height: 1.85;

    margin-bottom: 16px;
}

.psy-privacy-section p:last-child {
    margin-bottom: 0;
}

.psy-privacy-section strong {
    color: #39495b;
}


/* =====================================================
   LIST
===================================================== */

.psy-privacy-list {
    list-style: none;
    margin: 22px 0;
}

.psy-privacy-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: #637387;
    font-size: 15px;

    margin-bottom: 13px;
}

.psy-privacy-list li i {
    color: #d76f90;
    margin-top: 6px;
    font-size: 12px;
}


/* =====================================================
   NOTE BOX
===================================================== */

.psy-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    background: #fff8fa;
    border: 1px solid #f3dce3;

    border-radius: 15px;

    padding: 20px;
    margin-top: 25px;
}

.psy-privacy-note > i {
    color: #d76f90;
    font-size: 21px;
    margin-top: 3px;
}

.psy-privacy-note strong {
    display: block;
    margin-bottom: 4px;
}

.psy-privacy-note p {
    margin: 0;
    font-size: 14px;
}


/* =====================================================
   SECURITY BOX
===================================================== */

.psy-privacy-security-box {
    display: flex;
    align-items: center;
    gap: 20px;

    background: #edf5ff;
    border: 1px solid #dce9f8;

    padding: 25px;
    border-radius: 18px;

    margin-top: 25px;
}

.psy-privacy-security-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

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

    background: #ffffff;
    color: #d76f90;

    font-size: 23px;

    box-shadow: 0 7px 20px rgba(40, 70, 100, 0.07);
}

.psy-privacy-security-box h3 {
    color: #263648;
    font-size: 18px;
    margin-bottom: 5px;
}

.psy-privacy-security-box p {
    margin: 0;
    font-size: 14px;
}


/* =====================================================
   CONTACT BOX
===================================================== */

.psy-privacy-contact-section {
    padding-bottom: 0;
    margin-bottom: 0;
}

.psy-privacy-contact-box {
    background: #f7faff;

    border: 1px solid #e5edf6;
    border-radius: 18px;

    padding: 25px;

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

    margin-top: 25px;
}

.psy-privacy-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.psy-privacy-contact-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    border-radius: 50%;

    background: #fff1f5;
    color: #d76f90;

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

.psy-privacy-contact-item span {
    display: block;

    color: #8a96a5;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 1px;
}

.psy-privacy-contact-item a,
.psy-privacy-contact-item p {
    color: #34465a;
    font-size: 14px;
    margin: 0;
}

.psy-privacy-contact-item a:hover {
    color: #d76f90;
}


/* =====================================================
   FINAL CTA
===================================================== */

.psy-privacy-cta {
    padding: 55px 20px;

    background:
        radial-gradient(circle at 90% 20%, rgba(215,111,144,0.15), transparent 30%),
        #edf5ff;
}

.psy-privacy-cta-inner {
    width: min(1100px, 100%);
    margin: auto;

    display: flex;
    align-items: center;
    gap: 25px;
}

.psy-privacy-cta-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    border-radius: 50%;

    background: #ffffff;
    color: #d76f90;

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

    font-size: 24px;

    box-shadow: 0 10px 25px rgba(38, 54, 72, 0.07);
}

.psy-privacy-cta-text {
    flex: 1;
}

.psy-privacy-cta-text span {
    color: #d76f90;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.psy-privacy-cta-text h2 {
    color: #263648;

    font-size: 25px;
    line-height: 1.35;

    margin: 5px 0 5px;
}

.psy-privacy-cta-text h2 strong {
    color: #d76f90;
}

.psy-privacy-cta-text p {
    color: #637387;
    font-size: 14px;
}

.psy-privacy-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #d76f90;
    color: #ffffff;

    padding: 14px 23px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition: all 0.25s ease;
}

.psy-privacy-cta-btn:hover {
    background: #c85f81;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(215,111,144,0.25);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 950px) {

    .psy-privacy-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .psy-privacy-sidebar {
        position: static;
    }

    .psy-privacy-sidebar-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px 12px;
    }

    .psy-privacy-sidebar-card h3 {
        grid-column: 1 / -1;
    }

}


@media (max-width: 700px) {

    .psy-privacy-hero {
        padding: 70px 20px 65px;
    }

    .psy-privacy-hero h1 {
        font-size: 43px;
    }

    .psy-privacy-hero p {
        font-size: 15px;
    }

    .psy-privacy-main {
        padding: 55px 18px;
    }

    .psy-privacy-section {
        padding-bottom: 35px;
        margin-bottom: 35px;
    }

    .psy-privacy-section h2 {
        font-size: 25px;
    }

    .psy-privacy-section p {
        font-size: 15px;
    }

    .psy-privacy-sidebar-card {
        grid-template-columns: 1fr;
    }

    .psy-privacy-security-box {
        align-items: flex-start;
    }

    .psy-privacy-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .psy-privacy-cta-btn {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .psy-privacy-hero {
        padding: 55px 16px;
    }

    .psy-privacy-hero h1 {
        font-size: 36px;
    }

    .psy-privacy-breadcrumb {
        font-size: 12px;
    }

    .psy-privacy-eyebrow {
        font-size: 11px;
        letter-spacing: 1.2px;
    }

    .psy-privacy-main {
        padding: 45px 15px;
    }

    .psy-privacy-updated {
        font-size: 11px;
    }

    .psy-privacy-section h2 {
        font-size: 23px;
    }

    .psy-privacy-note {
        padding: 16px;
        gap: 11px;
    }

    .psy-privacy-security-box {
        padding: 18px;
        gap: 14px;
    }

    .psy-privacy-security-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 19px;
    }

    .psy-privacy-contact-box {
        padding: 18px;
    }

    .psy-privacy-cta {
        padding: 45px 15px;
    }

    .psy-privacy-cta-text h2 {
        font-size: 22px;
    }

}















/* =====================================================
   TERMS & CONDITIONS PAGE
   Unique Prefix: psy-terms-
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #263648;
    background: #ffffff;
    line-height: 1.7;
}

a {
    text-decoration: none;
}


/* =====================================================
   HERO
===================================================== */

.psy-terms-hero {
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(215, 111, 144, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #edf5ff 0%,
            #f8fbff 100%
        );

    padding: 95px 20px 90px;

    position: relative;
    overflow: hidden;
}

.psy-terms-hero::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: rgba(215, 111, 144, 0.06);

    right: -100px;
    top: -100px;
}

.psy-terms-hero-inner {
    width: min(1100px, 100%);
    margin: auto;

    position: relative;
    z-index: 2;
}


/* Breadcrumb */

.psy-terms-breadcrumb {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 14px;

    margin-bottom: 28px;

    color: #718096;
}

.psy-terms-breadcrumb a {
    color: #d76f90;
    font-weight: 600;
}

.psy-terms-breadcrumb i {
    font-size: 11px;
    color: #a5b0bd;
}


/* Eyebrow */

.psy-terms-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #d76f90;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.6px;

    margin-bottom: 15px;
}

.psy-terms-eyebrow i {
    font-size: 16px;
}


/* Heading */

.psy-terms-hero h1 {
    font-size: clamp(42px, 6vw, 68px);

    line-height: 1.1;

    color: #263648;

    margin-bottom: 22px;

    font-weight: 700;
}

.psy-terms-hero h1 span {
    color: #d76f90;
}

.psy-terms-hero p {
    max-width: 720px;

    color: #637387;

    font-size: 17px;

    line-height: 1.8;
}


/* =====================================================
   MAIN
===================================================== */

.psy-terms-main {
    padding: 80px 20px;

    background: #ffffff;
}

.psy-terms-container {
    width: min(1100px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 270px 1fr;

    gap: 60px;

    align-items: start;
}


/* =====================================================
   SIDEBAR
===================================================== */

.psy-terms-sidebar {
    position: sticky;

    top: 30px;
}

.psy-terms-sidebar-card {
    background: #f7faff;

    border: 1px solid #e7eef7;

    border-radius: 18px;

    padding: 25px 20px;
}

.psy-terms-sidebar-card h3 {
    font-size: 18px;

    color: #263648;

    margin-bottom: 18px;
}

.psy-terms-sidebar-card a {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #64748b;

    font-size: 14px;

    font-weight: 500;

    padding: 9px 5px;

    transition: all 0.25s ease;
}

.psy-terms-sidebar-card a i {
    width: 18px;

    color: #d76f90;

    font-size: 13px;
}

.psy-terms-sidebar-card a:hover {
    color: #d76f90;

    transform: translateX(3px);
}


/* =====================================================
   CONTENT
===================================================== */

.psy-terms-content {
    min-width: 0;
}


/* Updated */

.psy-terms-updated {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #fff4f7;

    border: 1px solid #f3d9e1;

    color: #6d6870;

    padding: 9px 15px;

    border-radius: 50px;

    font-size: 13px;

    margin-bottom: 42px;
}

.psy-terms-updated i {
    color: #d76f90;
}


/* Sections */

.psy-terms-section {
    position: relative;

    padding-bottom: 45px;

    margin-bottom: 45px;

    border-bottom: 1px solid #edf0f4;

    scroll-margin-top: 30px;
}

.psy-terms-section:last-child {
    border-bottom: none;
}

.psy-terms-number {
    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #d76f90;

    background: #fff2f6;

    padding: 5px 11px;

    border-radius: 30px;

    margin-bottom: 13px;
}

.psy-terms-section h2 {
    color: #263648;

    font-size: 29px;

    line-height: 1.3;

    margin-bottom: 18px;
}

.psy-terms-section p {
    color: #637387;

    font-size: 15.5px;

    line-height: 1.85;

    margin-bottom: 16px;
}

.psy-terms-section p:last-child {
    margin-bottom: 0;
}

.psy-terms-section strong {
    color: #39495b;
}


/* =====================================================
   LIST
===================================================== */

.psy-terms-list {
    list-style: none;

    margin: 22px 0;
}

.psy-terms-list li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #637387;

    font-size: 15px;

    margin-bottom: 13px;
}

.psy-terms-list li i {
    color: #d76f90;

    margin-top: 6px;

    font-size: 12px;
}


/* =====================================================
   INFO BOX
===================================================== */

.psy-terms-info-box {
    display: flex;

    align-items: center;

    gap: 20px;

    background: #edf5ff;

    border: 1px solid #dce9f8;

    padding: 25px;

    border-radius: 18px;

    margin-top: 25px;
}

.psy-terms-info-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    background: #ffffff;

    color: #d76f90;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    box-shadow:
        0 7px 20px rgba(40, 70, 100, 0.07);
}

.psy-terms-info-box h3 {
    color: #263648;

    font-size: 18px;

    margin-bottom: 5px;
}

.psy-terms-info-box p {
    margin: 0;

    font-size: 14px;
}


/* =====================================================
   WARNING BOX
===================================================== */

.psy-terms-warning-box {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    background: #fff8fa;

    border: 1px solid #f3dce3;

    border-radius: 16px;

    padding: 22px;

    margin-top: 25px;
}

.psy-terms-warning-box > i {
    color: #d76f90;

    font-size: 21px;

    margin-top: 4px;
}

.psy-terms-warning-box h3 {
    color: #263648;

    font-size: 17px;

    margin-bottom: 5px;
}

.psy-terms-warning-box p {
    margin: 0;

    font-size: 14px;
}


/* =====================================================
   PRIVACY LINK
===================================================== */

.psy-terms-policy-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #d76f90;

    font-size: 14px;

    font-weight: 700;

    margin-top: 5px;

    transition: all 0.25s ease;
}

.psy-terms-policy-link:hover {
    gap: 13px;
}


/* =====================================================
   CONTACT BOX
===================================================== */

.psy-terms-contact-section {
    padding-bottom: 0;

    margin-bottom: 0;
}

.psy-terms-contact-box {
    background: #f7faff;

    border: 1px solid #e5edf6;

    border-radius: 18px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 25px;
}

.psy-terms-contact-item {
    display: flex;

    align-items: center;

    gap: 15px;
}

.psy-terms-contact-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    border-radius: 50%;

    background: #fff1f5;

    color: #d76f90;

    display: flex;

    align-items: center;

    justify-content: center;
}

.psy-terms-contact-item span {
    display: block;

    color: #8a96a5;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 1px;
}

.psy-terms-contact-item a,
.psy-terms-contact-item p {
    color: #34465a;

    font-size: 14px;

    margin: 0;
}

.psy-terms-contact-item a:hover {
    color: #d76f90;
}


/* =====================================================
   CTA
===================================================== */

.psy-terms-cta {
    padding: 55px 20px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(215, 111, 144, 0.15),
            transparent 30%
        ),
        #edf5ff;
}

.psy-terms-cta-inner {
    width: min(1100px, 100%);

    margin: auto;

    display: flex;

    align-items: center;

    gap: 25px;
}

.psy-terms-cta-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    border-radius: 50%;

    background: #ffffff;

    color: #d76f90;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    box-shadow:
        0 10px 25px rgba(38, 54, 72, 0.07);
}

.psy-terms-cta-text {
    flex: 1;
}

.psy-terms-cta-text span {
    color: #d76f90;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.psy-terms-cta-text h2 {
    color: #263648;

    font-size: 25px;

    line-height: 1.35;

    margin: 5px 0;
}

.psy-terms-cta-text h2 strong {
    color: #d76f90;
}

.psy-terms-cta-text p {
    color: #637387;

    font-size: 14px;
}

.psy-terms-cta-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: #d76f90;

    color: #ffffff;

    padding: 14px 23px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition: all 0.25s ease;
}

.psy-terms-cta-btn:hover {
    background: #c85f81;

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(215, 111, 144, 0.25);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .psy-terms-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .psy-terms-sidebar {
        position: static;
    }

    .psy-terms-sidebar-card {
        display: grid;

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

        gap: 3px 12px;
    }

    .psy-terms-sidebar-card h3 {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 700px) {

    .psy-terms-hero {
        padding: 70px 20px 65px;
    }

    .psy-terms-hero h1 {
        font-size: 43px;
    }

    .psy-terms-hero p {
        font-size: 15px;
    }

    .psy-terms-main {
        padding: 55px 18px;
    }

    .psy-terms-section {
        padding-bottom: 35px;

        margin-bottom: 35px;
    }

    .psy-terms-section h2 {
        font-size: 25px;
    }

    .psy-terms-section p {
        font-size: 15px;
    }

    .psy-terms-sidebar-card {
        grid-template-columns: 1fr;
    }

    .psy-terms-info-box {
        align-items: flex-start;
    }

    .psy-terms-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

    .psy-terms-cta-btn {
        width: 100%;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .psy-terms-hero {
        padding: 55px 16px;
    }

    .psy-terms-hero h1 {
        font-size: 36px;
    }

    .psy-terms-breadcrumb {
        font-size: 12px;
    }

    .psy-terms-eyebrow {
        font-size: 11px;

        letter-spacing: 1.2px;
    }

    .psy-terms-main {
        padding: 45px 15px;
    }

    .psy-terms-updated {
        font-size: 11px;
    }

    .psy-terms-section h2 {
        font-size: 23px;
    }

    .psy-terms-warning-box {
        padding: 17px;

        gap: 11px;
    }

    .psy-terms-info-box {
        padding: 18px;

        gap: 14px;
    }

    .psy-terms-info-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 19px;
    }

    .psy-terms-contact-box {
        padding: 18px;
    }

    .psy-terms-cta {
        padding: 45px 15px;
    }

    .psy-terms-cta-text h2 {
        font-size: 22px;
    }

}