:root {
  --pink: #ff2f93;
  --pink-dark: #c40063;
  --blue: #1f66ff;
  --soft: #fff0f7;
  --ink: #111827;
  --muted: #6b7280;
  --stroke: rgba(15, 23, 42, .10);
  --shadow: 0 22px 70px rgba(0, 0, 0, .08);
}

body {
  color: var(--ink);
  background: #fff;
  font-family: "Monotype Corsiva", "Comic Sans MS", cursive;
}

.bg-soft {
  background: linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
}

.section {
  padding: 80px 0;
}

.glass {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand-grad {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-brand {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  border: none;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 18px;
  color: #fff;
  box-shadow: 0 16px 35px rgba(31, 102, 255, .18);
  transition: .3s;
}

.btn-brand:hover {
  opacity: .96;
  transform: translateY(-1px);
}


/* ===================== FLYDAYZ PREMIUM PRELOADER ===================== */

.flydayz-preloader {
  --pre-pink: #e7358b;
  --pre-pink-dark: #c71f72;
  --pre-purple: #7b3ff2;
  --pre-blue: #436dff;
  --pre-dark: #171b2a;
  --pre-muted: #667085;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(231, 53, 139, 0.16), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(123, 63, 242, 0.14), transparent 34%),
    linear-gradient(135deg, #fffafd 0%, #fff4fa 48%, #f8f3ff 100%);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.flydayz-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231, 53, 139, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.45;
  pointer-events: none;
}

.flydayz-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* GLOWS */
.preloader-bg-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(8px);
}

.preloader-bg-glow.glow-one {
  width: 360px;
  height: 360px;
  left: -160px;
  top: 90px;
  background: rgba(231, 53, 139, 0.13);
  animation: preGlowOne 7s ease-in-out infinite alternate;
}

.preloader-bg-glow.glow-two {
  width: 420px;
  height: 420px;
  right: -190px;
  bottom: 80px;
  background: rgba(123, 63, 242, 0.12);
  animation: preGlowTwo 8s ease-in-out infinite alternate;
}

/* FLOATING DECOR */
.preloader-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.preloader-cotton {
  width: 84px;
  opacity: 0.62;
  filter:
    drop-shadow(0 18px 28px rgba(231, 53, 139, 0.13)) drop-shadow(0 8px 16px rgba(15, 23, 42, 0.08));
}

.preloader-cotton.cotton-a {
  left: 12%;
  top: 20%;
  animation: preCottonOne 5.5s ease-in-out infinite alternate;
}

.preloader-cotton.cotton-b {
  right: 13%;
  bottom: 18%;
  width: 96px;
  animation: preCottonTwo 6.2s ease-in-out infinite alternate;
}

.preloader-petal {
  width: 34px;
  opacity: 0.55;
  filter: drop-shadow(0 10px 16px rgba(231, 53, 139, 0.16));
}

.preloader-petal.petal-a {
  left: 20%;
  bottom: 26%;
  animation: prePetalOne 8s ease-in-out infinite;
}

.preloader-petal.petal-b {
  right: 21%;
  top: 24%;
  width: 42px;
  animation: prePetalTwo 9s ease-in-out infinite;
}

/* CARD */
.preloader-card {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
  padding: 34px 28px 30px;
  border-radius: 38px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 251, 0.78)),
    radial-gradient(circle at 25% 18%, rgba(231, 53, 139, 0.13), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(123, 63, 242, 0.12), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 34px 90px rgba(231, 53, 139, 0.17),
    0 18px 48px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.preloader-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px dashed rgba(231, 53, 139, 0.17);
  pointer-events: none;
}

.preloader-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  bottom: -115px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.10);
  pointer-events: none;
}

/* BRAND */
.preloader-brand {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
}

.preloader-logo {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 10px 20px rgba(231, 53, 139, 0.12));
}

.preloader-brand small {
  display: block;
  color: var(--pre-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* PAD AREA */
.pad-loader {
  position: relative;
  z-index: 2;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.pad-image-wrap {
  position: relative;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: padFloat 3s ease-in-out infinite;
}

.pad-loader-glow {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(231, 53, 139, 0.12) 0%, rgba(123, 63, 242, 0.10) 45%, transparent 75%);
  filter: blur(10px);
  animation: loaderGlowPulse 2.4s ease-in-out infinite;
}

.preloader-pad-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 20px 34px rgba(231, 53, 139, 0.16)) drop-shadow(0 10px 20px rgba(15, 23, 42, 0.10));
}

/* ABSORB DOTS */
.absorb-dot {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pre-pink), var(--pre-purple));
  box-shadow: 0 0 0 6px rgba(231, 53, 139, 0.08);
  animation: absorbDot 1.8s ease-in-out infinite;
}

.dot-1 {
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.dot-2 {
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.2s;
}

.dot-3 {
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.4s;
}

.dot-4 {
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.6s;
}

.dot-5 {
  top: 77%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.8s;
}

/* SHINE */
.pad-shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}

.pad-shine::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -55%;
  width: 42%;
  height: 116%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: padShine 2.6s ease-in-out infinite;
}

/* TEXT */
.preloader-text {
  position: relative;
  z-index: 2;
  margin-top: 4px;
}

.preloader-text strong {
  display: block;
  color: var(--pre-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 7px;
}

.preloader-text span {
  display: block;
  color: var(--pre-muted);
  font-size: 12.8px;
  line-height: 1.45;
  font-weight: 700;
}

/* PROGRESS */
.preloader-progress {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 8px;
  margin-top: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(231, 53, 139, 0.10);
}

.preloader-progress span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pre-pink), var(--pre-purple), var(--pre-blue));
  animation: preloaderProgress 1.4s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes padFloat {

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

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

@keyframes loaderGlowPulse {

  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes absorbDot {

  0%,
  100% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.35;
  }

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

@keyframes padShine {
  0% {
    left: -55%;
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

@keyframes preloaderProgress {
  0% {
    transform: translateX(-115%);
  }

  50% {
    transform: translateX(78%);
  }

  100% {
    transform: translateX(260%);
  }
}

@keyframes preGlowOne {
  to {
    transform: translate(28px, 20px) scale(1.04);
  }
}

@keyframes preGlowTwo {
  to {
    transform: translate(-24px, -22px) scale(1.05);
  }
}

@keyframes preCottonOne {
  from {
    transform: translateY(0) rotate(-6deg);
  }

  to {
    transform: translateY(-22px) rotate(8deg);
  }
}

@keyframes preCottonTwo {
  from {
    transform: translateY(0) rotate(8deg);
  }

  to {
    transform: translateY(24px) rotate(-7deg);
  }
}

@keyframes prePetalOne {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(28px, -26px, 0) rotate(58deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(118deg);
  }
}

@keyframes prePetalTwo {
  0% {
    transform: translate3d(0, 0, 0) rotate(12deg);
  }

  50% {
    transform: translate3d(-28px, 24px, 0) rotate(-56deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-118deg);
  }
}

/* RESPONSIVE */
@media (max-width: 575.98px) {
  .flydayz-preloader {
    padding: 18px;
  }

  .preloader-card {
    padding: 28px 18px 24px;
    border-radius: 30px;
  }

  .preloader-card::before {
    inset: 12px;
    border-radius: 22px;
  }

  .preloader-logo {
    max-width: 145px;
  }

  .pad-loader {
    height: 220px;
  }

  .pad-image-wrap {
    width: 130px;
  }

  .pad-loader-glow {
    width: 165px;
    height: 165px;
  }

  .absorb-dot {
    width: 8px;
    height: 8px;
  }

  .preloader-text strong {
    font-size: 15.5px;
  }

  .preloader-text span {
    font-size: 12px;
  }

  .preloader-cotton.cotton-a {
    left: 4%;
    top: 16%;
    width: 54px;
  }

  .preloader-cotton.cotton-b {
    right: 4%;
    bottom: 14%;
    width: 62px;
  }

  .preloader-petal.petal-a {
    left: 10%;
    bottom: 25%;
    width: 24px;
  }

  .preloader-petal.petal-b {
    right: 12%;
    top: 22%;
    width: 27px;
  }
}

@media (max-width: 380px) {
  .preloader-logo {
    max-width: 130px;
  }

  .pad-image-wrap {
    width: 115px;
  }

  .pad-loader {
    height: 195px;
  }

  .preloader-text strong {
    font-size: 14px;
  }

  .preloader-text span {
    font-size: 11.5px;
  }
}

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

  .flydayz-preloader,
  .preloader-bg-glow,
  .preloader-decor,
  .pad-image-wrap,
  .pad-loader-glow,
  .absorb-dot,
  .pad-shine::before,
  .preloader-progress span {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================== FLYDAYZ PREMIUM PRELOADER END ===================== */


/* ===================== MYFLYDAYZ PREMIUM RESPONSIVE HEADER ===================== */

:root {
  --myfly-pink: #ec3f8c;
  --myfly-dark-pink: #c9186b;
  --myfly-purple: #7b3ff2;
  --myfly-blue: #4a7dff;
  --myfly-text: #263244;
  --myfly-muted: #64748b;
  --myfly-border: rgba(236, 63, 140, 0.14);
  --myfly-shadow: 0 18px 50px rgba(236, 63, 140, 0.13);
}

/* HEADER */
.myfly-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 12px 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(236, 63, 140, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 251, 0.90));
  border-bottom: 1px solid rgba(236, 63, 140, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.myfly-navbar {
  padding: 0;
}

/* NAVBAR CARD */
.myfly-navbar .container {
  position: relative;
  min-height: 72px;
  padding: 10px 18px 10px 24px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 250, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 45px rgba(15, 23, 42, 0.08),
    0 10px 30px rgba(236, 63, 140, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.myfly-navbar .container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(236, 63, 140, 0.36),
      rgba(123, 63, 242, 0.18),
      rgba(255, 255, 255, 0.65));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* LOGO */
.myfly-brand {
  position: relative;
  z-index: 5;
  padding: 0;
  margin: 0 14px 0 4px;
  display: flex;
  align-items: center;
}

.myfly-logo {
  height: 54px;
  max-width: 175px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(236, 63, 140, 0.14));
}

/* MENU */
.myfly-menu-wrap {
  position: relative;
  z-index: 4;
}

.myfly-menu {
  gap: 2px;
}

.myfly-link {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--myfly-text) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  padding: 10px 8px !important;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color 0.28s ease,
    transform 0.28s ease;
}

.myfly-link::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.86);
  background: linear-gradient(135deg, rgba(236, 63, 140, 0.11), rgba(123, 63, 242, 0.09));
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.myfly-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--myfly-pink), var(--myfly-purple));
  transition: width 0.28s ease;
}

.myfly-link:hover,
.myfly-link.active {
  color: var(--myfly-dark-pink) !important;
}

.myfly-link:hover::before,
.myfly-link.active::before {
  opacity: 1;
  transform: scale(1);
}

.myfly-link:hover::after,
.myfly-link.active::after {
  width: 22px;
}

/* CTA */
.myfly-actions {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.myfly-main-btn {
  min-height: 43px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--myfly-pink), var(--myfly-purple));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 16px 32px rgba(236, 63, 140, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.myfly-main-btn i {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.myfly-main-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow:
    0 20px 42px rgba(236, 63, 140, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.myfly-main-btn:hover i {
  transform: translateX(4px);
}

/* TOGGLER */
.myfly-toggler {
  position: relative;
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #fff1f7);
  box-shadow:
    0 10px 25px rgba(236, 63, 140, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.myfly-toggler:focus {
  box-shadow:
    0 0 0 4px rgba(236, 63, 140, 0.12),
    0 10px 25px rgba(236, 63, 140, 0.14);
}

.myfly-toggler span {
  width: 20px;
  height: 2px;
  display: block;
  margin: 4px auto;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--myfly-pink), var(--myfly-purple));
  transition: 0.3s ease;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1399.98px) {
  .myfly-navbar .container {
    padding-left: 22px;
    padding-right: 14px;
  }

  .myfly-brand {
    margin-right: 10px;
  }

  .myfly-logo {
    height: 48px;
    max-width: 155px;
  }

  .myfly-link {
    font-size: 12px;
    padding: 9px 6px !important;
  }

  .myfly-actions {
    margin-left: 7px;
  }

  .myfly-main-btn {
    padding: 0 12px;
    font-size: 12px;
  }
}

@media (max-width: 1199.98px) {
  .myfly-navbar .container {
    min-height: 68px;
    padding: 9px 12px 9px 20px;
  }

  .myfly-brand {
    margin-right: 8px;
  }

  .myfly-logo {
    height: 43px;
    max-width: 140px;
  }

  .myfly-link {
    font-size: 11.4px;
    padding: 8px 5px !important;
  }

  .myfly-main-btn {
    min-height: 39px;
    padding: 0 10px;
    font-size: 11.6px;
  }
}

/* TABLET + MOBILE MENU */
@media (max-width: 991.98px) {
  .myfly-header {
    padding: 8px 0;
  }

  .myfly-navbar .container {
    width: calc(100% - 22px);
    max-width: calc(100% - 22px);
    min-height: 66px;
    padding: 10px 12px 10px 16px;
    border-radius: 24px;
  }

  .myfly-brand {
    margin-left: 2px;
    margin-right: 0;
  }

  .myfly-logo {
    height: 43px;
    max-width: 148px;
  }

  .myfly-toggler {
    width: 45px;
    height: 45px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.95), transparent 40%),
      linear-gradient(135deg, #ffffff, #fff1f7);
    border: 1px solid rgba(236, 63, 140, 0.16);
  }

  .myfly-toggler[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--myfly-pink), var(--myfly-purple));
  }

  .myfly-toggler[aria-expanded="true"] span {
    background: #ffffff;
  }

  .myfly-toggler[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .myfly-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .myfly-toggler[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .myfly-menu-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    z-index: 4;
    padding: 14px;
    border-radius: 28px;
    background:
      radial-gradient(circle at top right, rgba(123, 63, 242, 0.14), transparent 35%),
      radial-gradient(circle at bottom left, rgba(236, 63, 140, 0.16), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.985), rgba(255, 243, 249, 0.965));
    border: 1px solid rgba(236, 63, 140, 0.14);
    box-shadow:
      0 26px 70px rgba(15, 23, 42, 0.18),
      0 18px 38px rgba(236, 63, 140, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation: myflyMobileMenu 0.34s cubic-bezier(0.22, 0.75, 0.35, 1);
    overflow: hidden;
  }

  .myfly-menu-wrap::before {
    content: "Explore MyFlyDayz";
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 10px;
    padding: 0 13px;
    border-radius: 16px;
    color: var(--myfly-dark-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 251, 0.68));
    border: 1px solid rgba(236, 63, 140, 0.10);
  }

  .myfly-menu {
    gap: 8px;
    align-items: stretch !important;
  }

  .myfly-menu .nav-item {
    width: 100%;
  }

  .myfly-link {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    padding: 12px 44px 12px 46px !important;
    border-radius: 18px;
    color: var(--myfly-text) !important;
    font-size: 14px;
    font-weight: 900;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(255, 249, 252, 0.78));
    border: 1px solid rgba(236, 63, 140, 0.10);
    box-shadow:
      0 10px 22px rgba(15, 23, 42, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }

  .myfly-link::before {
    left: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    inset: auto;
    border-radius: 7px;
    opacity: 1;
    transform: translateY(-50%);
    background: linear-gradient(135deg, rgba(236, 63, 140, 0.24), rgba(123, 63, 242, 0.20));
  }

  .myfly-link::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    right: 15px;
    left: auto;
    bottom: auto;
    top: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    color: rgba(236, 63, 140, 0.55);
    font-size: 12px;
    background: transparent;
  }

  .myfly-link:hover,
  .myfly-link.active {
    color: var(--myfly-dark-pink) !important;
    background:
      linear-gradient(135deg, #fff1f7, #f6efff);
    border-color: rgba(236, 63, 140, 0.18);
    transform: translateX(4px);
  }

  .myfly-link:hover::after,
  .myfly-link.active::after {
    width: auto;
  }

  .myfly-actions {
    margin-left: 0;
    margin-top: 14px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-top: 1px dashed rgba(236, 63, 140, 0.18);
  }

  .myfly-main-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 18px;
    font-size: 14px;
  }
}

/* SMALL MOBILE */
@media (max-width: 575.98px) {
  .myfly-header {
    padding: 7px 0;
  }

  .myfly-navbar .container {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    min-height: 62px;
    padding: 9px 10px 9px 14px;
    border-radius: 22px;
  }

  .myfly-logo {
    height: 39px;
    max-width: 134px;
  }

  .myfly-toggler {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .myfly-menu-wrap {
    top: calc(100% + 10px);
    padding: 12px;
    border-radius: 24px;
  }

  .myfly-menu-wrap::before {
    min-height: 35px;
    font-size: 11px;
  }

  .myfly-link {
    min-height: 48px;
    padding-left: 44px !important;
    font-size: 13.5px;
    border-radius: 16px;
  }

  .myfly-main-btn {
    min-height: 49px;
    border-radius: 16px;
  }
}

@media (max-width: 380px) {
  .myfly-navbar .container {
    padding-left: 12px;
  }

  .myfly-logo {
    height: 36px;
    max-width: 122px;
  }

  .myfly-toggler {
    width: 40px;
    height: 40px;
  }

  .myfly-link {
    font-size: 13px;
  }
}

@keyframes myflyMobileMenu {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    filter: blur(4px);
  }

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

/* ===================== MYFLYDAYZ PREMIUM RESPONSIVE HEADER END ===================== */



/* ===================== FLYDAYZ ULTRA PREMIUM HERO ===================== */

.hero-premium {
  --hero-pink: #e7358b;
  --hero-pink-dark: #c71f72;
  --hero-purple: #7b3ff2;
  --hero-blue: #436dff;
  --hero-ink: #181c2b;
  --hero-text: #4f5d73;
  --hero-white: #ffffff;

  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 13% 22%, rgba(231, 53, 139, 0.14), transparent 31%),
    radial-gradient(circle at 88% 20%, rgba(123, 63, 242, 0.13), transparent 32%),
    linear-gradient(135deg, #fffafd 0%, #fff4fa 45%, #f8f3ff 100%);
}

.hero-premium .container {
  position: relative;
  z-index: 6;
  max-width: 1540px;
  padding-left: clamp(22px, 4vw, 76px);
  padding-right: clamp(22px, 4vw, 76px);
}

.hero-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(231, 53, 139, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.58;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

/* ===================== BACKGROUND SHAPES ===================== */

.hero-bg-shape {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
}

.shape-one {
  width: 420px;
  height: 420px;
  left: -220px;
  bottom: 4%;
  background: rgba(231, 53, 139, 0.12);
  filter: blur(4px);
}

.shape-two {
  width: 520px;
  height: 520px;
  right: -260px;
  top: 16%;
  background: rgba(123, 63, 242, 0.12);
  filter: blur(5px);
}

.shape-three {
  width: 300px;
  height: 300px;
  right: 22%;
  bottom: -180px;
  background: rgba(255, 199, 226, 0.36);
  filter: blur(5px);
}

/* ===================== FLOATING DECOR ===================== */

.hero-decor-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.hero-cotton {
  z-index: 4;
  opacity: 0.78;
  filter:
    drop-shadow(0 18px 28px rgba(231, 53, 139, 0.14)) drop-shadow(0 8px 16px rgba(15, 23, 42, 0.08));
}

.cotton-one {
  width: 82px;
  left: 7%;
  top: 24%;
  animation: heroCottonFloatOne 6.5s ease-in-out infinite alternate;
}

.cotton-two {
  width: 96px;
  right: 8%;
  top: 18%;
  opacity: 0.72;
  animation: heroCottonFloatTwo 7.4s ease-in-out infinite alternate;
}

.cotton-three {
  width: 66px;
  left: 42%;
  bottom: 12%;
  opacity: 0.55;
  animation: heroCottonFloatThree 8s ease-in-out infinite alternate;
}

.hero-petal {
  z-index: 3;
  opacity: 0.62;
  filter:
    drop-shadow(0 12px 18px rgba(231, 53, 139, 0.16)) saturate(1.05);
}

.petal-one {
  width: 34px;
  left: 19%;
  top: 16%;
  animation: heroPetalDriftOne 9s ease-in-out infinite;
}

.petal-two {
  width: 42px;
  right: 18%;
  top: 35%;
  opacity: 0.58;
  animation: heroPetalDriftTwo 10.5s ease-in-out infinite;
}

.petal-three {
  width: 30px;
  left: 10%;
  bottom: 22%;
  opacity: 0.48;
  animation: heroPetalDriftThree 11s ease-in-out infinite;
}

.petal-four {
  width: 38px;
  right: 36%;
  bottom: 14%;
  opacity: 0.52;
  animation: heroPetalDriftFour 12s ease-in-out infinite;
}

.hero-pad-outline {
  z-index: 1;
  opacity: 0.045;
  filter: blur(0.2px);
}

.pad-outline-one {
  width: 520px;
  left: 48%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: heroPadOutlineFloatOne 13s ease-in-out infinite alternate;
}

.pad-outline-two {
  width: 360px;
  right: 2%;
  bottom: -90px;
  opacity: 0.055;
  transform: rotate(18deg);
  animation: heroPadOutlineFloatTwo 12s ease-in-out infinite alternate;
}

/* ===================== DECOR ANIMATIONS ===================== */

@keyframes heroCottonFloatOne {
  from {
    transform: translate3d(0, 0, 0) rotate(-5deg);
  }

  to {
    transform: translate3d(18px, -24px, 0) rotate(7deg);
  }
}

@keyframes heroCottonFloatTwo {
  from {
    transform: translate3d(0, 0, 0) rotate(6deg);
  }

  to {
    transform: translate3d(-20px, 26px, 0) rotate(-8deg);
  }
}

@keyframes heroCottonFloatThree {
  from {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }

  to {
    transform: translate3d(24px, -18px, 0) rotate(8deg);
  }
}

@keyframes heroPetalDriftOne {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  35% {
    transform: translate3d(22px, 24px, 0) rotate(42deg);
  }

  70% {
    transform: translate3d(-10px, 48px, 0) rotate(84deg);
  }

  100% {
    transform: translate3d(8px, 0, 0) rotate(126deg);
  }
}

@keyframes heroPetalDriftTwo {
  0% {
    transform: translate3d(0, 0, 0) rotate(12deg);
  }

  40% {
    transform: translate3d(-28px, 22px, 0) rotate(-36deg);
  }

  75% {
    transform: translate3d(12px, 42px, 0) rotate(-72deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-108deg);
  }
}

@keyframes heroPetalDriftThree {
  0% {
    transform: translate3d(0, 0, 0) rotate(-16deg);
  }

  45% {
    transform: translate3d(30px, -20px, 0) rotate(36deg);
  }

  80% {
    transform: translate3d(10px, -44px, 0) rotate(82deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(120deg);
  }
}

@keyframes heroPetalDriftFour {
  0% {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }

  38% {
    transform: translate3d(-18px, -22px, 0) rotate(-38deg);
  }

  72% {
    transform: translate3d(18px, -42px, 0) rotate(-80deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-124deg);
  }
}

@keyframes heroPadOutlineFloatOne {
  from {
    transform: translate(-50%, -50%) rotate(-18deg) scale(1);
  }

  to {
    transform: translate(-50%, -53%) rotate(-14deg) scale(1.03);
  }
}

@keyframes heroPadOutlineFloatTwo {
  from {
    transform: translateY(0) rotate(18deg) scale(1);
  }

  to {
    transform: translateY(-18px) rotate(14deg) scale(1.04);
  }
}

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

.hero-slider-window {
  position: relative;
  z-index: 8;
  width: 100%;
  overflow: hidden;
}

.hero-slider-track {
  display: flex;
  width: 100%;
  transition: transform 850ms cubic-bezier(0.22, 0.9, 0.28, 1);
  will-change: transform;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: calc(100vh - 110px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* PRODUCT IMAGE SIZE CONTROL */
.hero-slide:nth-child(1) {
  --pack-img-width: min(108%, 720px);
  --pack-scale: 1.18;
}

.hero-slide:nth-child(2) {
  --pack-img-width: min(110%, 750px);
  --pack-scale: 1.18;
}

.hero-slide:nth-child(3) {
  --pack-img-width: min(112%, 730px);
  --pack-scale: 1.27;
}

.hero-slide-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(620px, 1.12fr);
  align-items: center;
  gap: clamp(34px, 4vw, 72px);
  padding: 10px 0 78px;
  min-height: calc(100vh - 110px);
}

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

.hero-slide-content {
  max-width: 600px;
  opacity: 0;
  transform: translateY(24px);
}

.hero-slide.is-active .hero-slide-content {
  animation: heroContentIn 0.75s ease forwards 0.08s;
}

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

.hero-kicker {
  width: fit-content;
  min-height: 42px;
  margin-bottom: 18px;
  padding: 7px 17px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hero-pink-dark);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow: 0 14px 36px rgba(231, 53, 139, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-kicker span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--hero-pink), var(--hero-purple));
}

.hero-headline {
  margin: 0;

  color: #171927;

  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  /* g, y, p jaise letters ko cut hone se bachata hai */
  line-height: 1.16;

  font-weight: 700;
  /* letter-spacing: -0.055em; */

  overflow: visible;
}


.hero-headline .headline-accent {
  position: relative;

  display: inline-block !important;

  /* Descender letters ke liye bottom space */
  padding-bottom: 0.28em;

  color: transparent;

  background:
    linear-gradient(135deg,
      #e72f88 0%,
      #8a3de6 52%,
      #336fe9 100%);

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

  /* Kabhi bhi hidden mat rakhein */
  overflow: visible;

  vertical-align: bottom;

  isolation: isolate;
}

.hero-headline .headline-shine {
  position: absolute;

  top: 0;
  left: -45%;

  width: 35%;
  height: 100%;

  pointer-events: none;

  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 30%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%);

  transform: skewX(-18deg);

  mix-blend-mode: screen;

  animation: headlineShineMove 4.5s ease-in-out infinite;
}



@keyframes headlineShineMove {
  0% {
    left: -45%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  75%,
  100% {
    left: 115%;
    opacity: 0;
  }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
  .hero-headline {
    font-size: clamp(2.8rem, 5vw, 4.9rem);
    line-height: 1.08;
  }
}


@media (max-width: 991.98px) {
  .hero-headline {
    font-size: clamp(2.7rem, 7vw, 4.4rem);
    line-height: 1.1;
  }
}


@media (max-width: 767.98px) {
  .hero-headline {
    font-size: clamp(2.4rem, 9vw, 3.65rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }

  .hero-headline .headline-accent {
    padding-bottom: 0.14em;
    line-height: 1.14;
  }
}


@media (max-width: 575.98px) {
  .hero-headline {
    font-size: clamp(2.2rem, 11vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
  }

  .hero-headline .headline-accent {
    display: inline-block !important;

    /* Mobile par g bilkul cut nahi hoga */
    padding-bottom: 0.16em;

    line-height: 1.18;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}


@media (max-width: 380px) {
  .hero-headline {
    font-size: 2.15rem;
    line-height: 1.14;
  }
}


/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .hero-headline .headline-shine {
    animation: none;
    display: none;
  }
}

.hero-lead {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--hero-text);
  font-size: clamp(15px, 1.08vw, 16.5px);
  line-height: 1.74;
  font-weight: 700;
}

.hero-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 27px;
}

.hero-feature-card {
  min-height: 78px;
  padding: 13px 12px;
  border-radius: 22px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.10);
  box-shadow:
    0 18px 44px rgba(231, 53, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.hero-feature-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 24px 54px rgba(231, 53, 139, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.hero-feature-card i {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-pink);
  background: rgba(231, 53, 139, 0.09);
  font-size: 15px;
}

.hero-feature-card strong {
  display: block;
  color: var(--hero-ink);
  font-size: 13.2px;
  line-height: 1.15;
  font-weight: 850;
  margin-bottom: 5px;
}

.hero-feature-card small {
  display: block;
  color: #7a8798;
  font-size: 11.6px;
  line-height: 1.2;
  font-weight: 650;
}

.hero-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 21px;
}

.hero-btn-primary,
.hero-btn-secondary {
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  transition: all 0.3s ease;
}

.hero-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--hero-pink), var(--hero-purple));
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    0 18px 40px rgba(231, 53, 139, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hero-btn-primary i {
  font-size: 21px;
  transition: transform 0.3s ease;
}

.hero-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow:
    0 24px 52px rgba(231, 53, 139, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hero-btn-primary:hover i {
  transform: translateX(4px);
}

.hero-btn-secondary {
  color: var(--hero-ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(24, 28, 43, 0.10);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.hero-btn-secondary:hover {
  color: var(--hero-pink-dark);
  background: #fff;
  border-color: rgba(231, 53, 139, 0.22);
  transform: translateY(-4px);
}

.hero-bottom-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #667085;
  font-size: 13.3px;
  font-weight: 650;
}

.note-dot {
  width: 34px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: linear-gradient(90deg, var(--hero-pink), var(--hero-purple), var(--hero-blue));
  box-shadow: 0 8px 18px rgba(231, 53, 139, 0.20);
}

/* ===================== RIGHT PRODUCT SHOWCASE FIXED ===================== */

.hero-pack-wrapper {
  position: relative;
  min-height: 620px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(34px) scale(0.97);
  overflow: visible;
}

.hero-slide.is-active .hero-pack-wrapper {
  animation: heroProductIn 0.85s ease forwards 0.12s;
}

@keyframes heroProductIn {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.product-premium-card {
  position: relative;
  width: min(100%, 760px);
  min-height: 525px;
  border-radius: 52px;
  padding: 30px 40px 28px;
  display: grid;
  grid-template-rows: 74px 1fr 58px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.94), transparent 34%),
    radial-gradient(circle at 72% 44%, rgba(231, 53, 139, 0.17), transparent 38%),
    radial-gradient(circle at 86% 86%, rgba(123, 63, 242, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 242, 249, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 38px 105px rgba(231, 53, 139, 0.19),
    0 20px 58px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.product-card-blue {
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.94), transparent 34%),
    radial-gradient(circle at 72% 44%, rgba(67, 109, 255, 0.16), transparent 38%),
    radial-gradient(circle at 86% 86%, rgba(231, 53, 139, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.82));
}

.product-card-night {
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.94), transparent 34%),
    radial-gradient(circle at 72% 44%, rgba(123, 63, 242, 0.18), transparent 38%),
    radial-gradient(circle at 86% 86%, rgba(231, 53, 139, 0.15), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 243, 255, 0.84));
}

.product-premium-card::before {
  content: "";
  position: absolute;
  inset: 24px;
  z-index: 2;
  border-radius: 40px;
  border: 1px dashed rgba(231, 53, 139, 0.17);
  pointer-events: none;
}

.product-holo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.66) 24%, transparent 42%),
    radial-gradient(circle at 28% 74%, rgba(231, 53, 139, 0.12), transparent 28%),
    radial-gradient(circle at 74% 22%, rgba(67, 109, 255, 0.12), transparent 32%);
  opacity: 0.74;
}

.product-neon-grid {
  position: absolute;
  inset: 20px;
  z-index: 1;
  border-radius: 40px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(231, 53, 139, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 63, 242, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
  mask-image: radial-gradient(circle at 58% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 58% 50%, #000 0%, transparent 72%);
}

.product-orbit {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
}

.product-orbit.orbit-one {
  width: 440px;
  height: 440px;
  left: 50%;
  top: 51%;
  border: 1px solid rgba(231, 53, 139, 0.12);
  transform: translate(-50%, -50%);
}

.product-orbit.orbit-two {
  width: 320px;
  height: 320px;
  left: 50%;
  top: 51%;
  border: 1px dashed rgba(123, 63, 242, 0.17);
  transform: translate(-50%, -50%);
  animation: productOrbitSpin 18s linear infinite;
}

@keyframes productOrbitSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* MOST IMPORTANT FIX: TITLE ALWAYS ABOVE EVERYTHING */
.product-card-top {
  position: relative !important;
  z-index: 80 !important;
  width: fit-content;
  max-width: calc(100% - 40px);
  min-width: 300px;
  min-height: 62px;
  margin: 0 auto;
  padding: 10px 26px;
  border-radius: 999px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-direction: column;
  margin-bottom: 15px;
  text-align: center;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 251, 0.90));
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow:
    0 16px 38px rgba(231, 53, 139, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.product-card-top span {
  color: var(--hero-pink-dark) !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
  opacity: 1 !important;
}

.product-card-top strong {
  display: block !important;
  color: var(--hero-ink) !important;
  font-size: 21px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.5px;
  white-space: nowrap;
  opacity: 1 !important;
}

/* PRODUCT IMAGE STAGE */
.product-img-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 330px;
  margin-top: -2px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
}

.product-aura {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
}

.aura-one {
  width: 500px;
  height: 500px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 47, 147, 0.20), transparent 62%),
    radial-gradient(circle at 72% 28%, rgba(67, 109, 255, 0.17), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 244, 250, 0.48));
  filter: blur(3px);
}

.aura-two {
  width: 360px;
  height: 150px;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.08) 48%, transparent 72%);
  filter: blur(18px);
}

.hero-pack-img {
  position: relative;
  z-index: 6;
  width: var(--pack-img-width, min(108%, 720px));
  max-width: none;
  height: auto;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 34px 46px rgba(15, 23, 42, 0.25)) saturate(1.08) contrast(1.04);
  animation: heroProductFloat 4.2s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes heroProductFloat {
  from {
    transform: translateY(0) scale(var(--pack-scale, 1.18)) rotate(-0.4deg);
  }

  to {
    transform: translateY(-10px) scale(var(--pack-scale, 1.18)) rotate(0.7deg);
  }
}

/* PRODUCT PILLS */
.product-floating-pill {
  position: absolute;
  z-index: 70;
  min-height: 43px;
  padding: 8px 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hero-ink);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow:
    0 18px 42px rgba(231, 53, 139, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.product-floating-pill i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(135deg, var(--hero-pink), var(--hero-purple));
}

.pill-one {
  top: 150px;
  left: 34px;
  animation: pillFloatOne 4s ease-in-out infinite alternate;
}

.pill-two {
  right: 34px;
  bottom: 132px;
  animation: pillFloatTwo 4.5s ease-in-out infinite alternate;
}

@keyframes pillFloatOne {
  to {
    transform: translateY(-8px);
  }
}

@keyframes pillFloatTwo {
  to {
    transform: translateY(8px);
  }
}

/* BOTTOM TRUST STRIP */
.product-premium-strip {
  position: relative;
  z-index: 80;
  width: 100%;
  min-height: 54px;
  padding: 8px;
  border-radius: 999px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 18px 42px rgba(231, 53, 139, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.product-premium-strip div {
  min-width: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #252a3a;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 247, 251, 0.72));
}

.product-premium-strip i {
  color: var(--hero-pink);
  font-size: 13px;
}

.product-premium-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== ARROWS + DOTS ===================== */

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 90;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  color: var(--hero-pink-dark);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(231, 53, 139, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.hero-prev {
  left: 24px;
}

.hero-next {
  right: 24px;
}

.hero-arrow:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--hero-pink), var(--hero-purple));
  transform: scale(1.06);
}

.hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow: 0 14px 34px rgba(231, 53, 139, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(231, 53, 139, 0.28);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-slider-dots button.active {
  width: 34px;
  background: linear-gradient(135deg, var(--hero-pink), var(--hero-purple));
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1399.98px) {
  .hero-premium .container {
    max-width: 1320px;
  }

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    --pack-img-width: min(106%, 680px);
    --pack-scale: 1.14;
  }

  .hero-slide:nth-child(3) {
    --pack-img-width: min(108%, 680px);
    --pack-scale: 1.22;
  }

  .hero-slide-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(540px, 1.1fr);
    gap: 46px;
  }

  .hero-headline {
    font-size: clamp(2.8rem, 4vw, 4.5rem);
  }

  .product-premium-card {
    width: min(100%, 680px);
    min-height: 500px;
    grid-template-rows: 70px 1fr 56px;
  }

  .product-img-wrap {
    min-height: 315px;
  }

  .aura-one {
    width: 450px;
    height: 450px;
  }

  .product-card-top {
    min-width: 280px;
  }
}

@media (max-width: 1199.98px) {

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    --pack-img-width: min(104%, 600px);
    --pack-scale: 1.10;
  }

  .hero-slide:nth-child(3) {
    --pack-img-width: min(106%, 590px);
    --pack-scale: 1.16;
  }

  .hero-slide-grid {
    grid-template-columns: minmax(0, 1fr) minmax(410px, 0.95fr);
    gap: 42px;
  }

  .hero-pack-wrapper {
    min-height: 500px;
  }

  .product-premium-card {
    width: min(100%, 560px);
    min-height: 445px;
    padding: 24px 28px;
    border-radius: 44px;
    grid-template-rows: 66px 1fr 52px;
  }

  .product-premium-card::before {
    inset: 18px;
    border-radius: 32px;
  }

  .product-card-top {
    min-width: 250px;
    min-height: 58px;
    padding: 9px 22px;
  }

  .product-card-top strong {
    font-size: 18px;
  }

  .product-img-wrap {
    min-height: 280px;
  }

  .aura-one {
    width: 380px;
    height: 380px;
  }

  .aura-two {
    width: 300px;
    bottom: 36px;
  }

  .pill-one {
    left: 22px;
    top: 118px;
  }

  .pill-two {
    right: 22px;
    bottom: 108px;
  }

  .hero-headline {
    font-size: clamp(2.65rem, 3.8vw, 4.05rem);
  }

  .cotton-one {
    width: 72px;
    left: 5%;
  }

  .cotton-two {
    width: 82px;
    right: 5%;
  }

  .pad-outline-one {
    width: 440px;
  }
}

@media (max-width: 991.98px) {

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    --pack-img-width: min(108%, 520px);
    --pack-scale: 1.08;
  }

  .hero-slide:nth-child(3) {
    --pack-img-width: min(106%, 500px);
    --pack-scale: 1.12;
  }

  .hero-premium {
    min-height: auto;
    padding-top: 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(231, 53, 139, 0.18), transparent 34%),
      radial-gradient(circle at 88% 20%, rgba(123, 63, 242, 0.15), transparent 35%),
      radial-gradient(circle at 50% 88%, rgba(255, 199, 226, 0.26), transparent 38%),
      linear-gradient(145deg, #fffafd 0%, #fff4fa 48%, #f8f2ff 100%);
  }

  .hero-premium .container {
    max-width: 760px;
  }

  .hero-premium::before {
    background-size: 38px 38px;
    opacity: 0.45;
  }

  .hero-slide {
    min-height: auto;
    align-items: flex-start;
  }

  .hero-slide-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 40px 0 92px;
    gap: 24px;
    text-align: center;
  }

  .hero-slide-content {
    order: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 22px 20px;
    border-radius: 34px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 246, 251, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow:
      0 24px 60px rgba(231, 53, 139, 0.12),
      0 12px 28px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .hero-kicker,
  .hero-headline,
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-headline {
    max-width: 610px;
    font-size: clamp(3rem, 8vw, 4.45rem);
    line-height: 1.14;
    margin-bottom: 15px;
  }

  .hero-lead {
    max-width: 630px;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
  }

  .hero-feature-row {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }

  .hero-btns {
    justify-content: center;
    margin-bottom: 17px;
  }

  .hero-bottom-note {
    justify-content: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-pack-wrapper {
    order: 2;
    min-height: 450px;
    transform: translateY(24px) scale(0.97);
  }

  .hero-slide.is-active .hero-pack-wrapper {
    animation: heroProductInMobile 0.85s ease forwards 0.08s;
  }

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

  .product-premium-card {
    width: min(100%, 585px);
    min-height: 395px;
    border-radius: 40px;
    padding: 20px 24px 20px;
    grid-template-rows: 58px 1fr 50px;
  }

  .product-card-top {
    min-width: 240px;
    min-height: 52px;
    padding: 8px 20px;
  }

  .product-card-top span {
    font-size: 12px;
  }

  .product-card-top strong {
    font-size: 17px;
  }

  .product-img-wrap {
    min-height: 250px;
  }

  .aura-one {
    width: 330px;
    height: 330px;
  }

  .aura-two {
    width: 280px;
    bottom: 34px;
  }

  .pill-one {
    left: 20px;
    top: 96px;
  }

  .pill-two {
    right: 20px;
    bottom: 88px;
  }

  .hero-arrow {
    top: auto;
    bottom: 26px;
    width: 42px;
    height: 42px;
  }

  .hero-prev {
    left: calc(50% - 92px);
  }

  .hero-next {
    right: calc(50% - 92px);
  }

  .hero-slider-dots {
    bottom: 28px;
  }

  .cotton-one {
    width: 58px;
    left: 7%;
    top: 16%;
    opacity: 0.50;
  }

  .cotton-two {
    width: 64px;
    right: 8%;
    top: 9%;
    opacity: 0.48;
  }

  .cotton-three {
    width: 52px;
    left: 78%;
    bottom: 32%;
    opacity: 0.36;
  }

  .pad-outline-one {
    width: 360px;
    opacity: 0.03;
  }

  .pad-outline-two {
    width: 280px;
    opacity: 0.035;
  }
}

@media (max-width: 575.98px) {

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    --pack-img-width: min(104%, 350px);
    --pack-scale: 1.06;
  }

  .hero-slide:nth-child(3) {
    --pack-img-width: min(104%, 335px);
    --pack-scale: 1.10;
  }

  .hero-premium .container {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    padding-left: 0;
    padding-right: 0;
  }

  .hero-slide-grid {
    padding: 28px 0 84px;
    gap: 16px;
  }

  .hero-slide-content {
    padding: 18px 14px 16px;
    border-radius: 28px;
  }

  .hero-kicker {
    min-height: 36px;
    max-width: 100%;
    margin-bottom: 13px;
    padding: 6px 12px 6px 7px;
    gap: 8px;
    font-size: 11.6px;
    white-space: nowrap;
  }

  .hero-kicker span {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .hero-headline {
    max-width: 330px;
    font-size: clamp(2.35rem, 12.5vw, 3.25rem);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
  }

  .hero-lead {
    max-width: 335px;
    font-size: 13.7px;
    line-height: 1.62;
    margin-bottom: 18px;
  }

  .hero-feature-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }

  .hero-feature-card {
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 17px;
    align-items: center;
    text-align: left;
  }

  .hero-btns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    min-height: 47px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 13.5px;
  }

  .hero-bottom-note {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    max-width: 335px;
    font-size: 12.1px;
    line-height: 1.45;
    gap: 8px;
  }

  .note-dot {
    width: 25px;
    height: 9px;
    flex: 0 0 25px;
    margin-top: 4px;
  }

  .hero-pack-wrapper {
    min-height: 330px;
    margin-top: 6px;
  }

  .product-premium-card {
    width: 100%;
    min-height: 305px;
    padding: 14px 14px 12px;
    border-radius: 30px;
    grid-template-rows: 46px 1fr 42px;
  }

  .product-premium-card::before {
    inset: 12px;
    border-radius: 23px;
  }

  .product-card-top {
    min-width: 190px;
    min-height: 40px;
    max-width: calc(100% - 26px);
    padding: 6px 14px;
  }

  .product-card-top span {
    font-size: 10px;
  }

  .product-card-top strong {
    font-size: 13px;
  }

  .product-img-wrap {
    min-height: 198px;
  }

  .aura-one {
    width: 245px;
    height: 245px;
  }

  .aura-two {
    bottom: 30px;
    width: 78%;
    height: 42px;
    filter: blur(14px);
  }

  .product-floating-pill {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
    gap: 6px;
  }

  .product-floating-pill i {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .pill-one {
    top: 62px;
    left: 10px;
  }

  .pill-two {
    right: 10px;
    bottom: 60px;
  }

  .product-premium-strip {
    min-height: 40px;
    padding: 6px;
    gap: 5px;
  }

  .product-premium-strip div {
    gap: 4px;
    font-size: 8.8px;
  }

  .product-premium-strip i {
    font-size: 10px;
  }

  .hero-arrow {
    width: 37px;
    height: 37px;
    bottom: 22px;
    font-size: 13px;
  }

  .hero-prev {
    left: calc(50% - 84px);
  }

  .hero-next {
    right: calc(50% - 84px);
  }

  .hero-slider-dots {
    bottom: 25px;
    padding: 7px 9px;
    gap: 7px;
  }

  .hero-slider-dots button {
    width: 7px;
    height: 7px;
  }

  .hero-slider-dots button.active {
    width: 25px;
  }

  .shape-one {
    width: 250px;
    height: 250px;
    left: -160px;
    bottom: 12%;
    opacity: 0.65;
  }

  .shape-two {
    width: 280px;
    height: 280px;
    right: -180px;
    top: 10%;
    opacity: 0.72;
  }

  .shape-three {
    width: 210px;
    height: 210px;
    right: 14%;
    bottom: -130px;
    opacity: 0.55;
  }

  .cotton-one {
    width: 42px;
    left: 9px;
    top: 72px;
    opacity: 0.34;
  }

  .cotton-two {
    width: 44px;
    right: 12px;
    top: 118px;
    opacity: 0.32;
  }

  .cotton-three {
    display: none;
  }

  .petal-four {
    display: none;
  }

  .pad-outline-one {
    width: 250px;
    opacity: 0.02;
  }

  .pad-outline-two {
    display: none;
  }
}

@media (max-width: 430px) {

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    --pack-img-width: min(104%, 320px);
    --pack-scale: 1.05;
  }

  .hero-slide:nth-child(3) {
    --pack-img-width: min(104%, 305px);
    --pack-scale: 1.08;
  }

  .hero-premium .container {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
  }

  .hero-headline {
    max-width: 305px;
    font-size: clamp(2.2rem, 12vw, 2.85rem);
  }

  .hero-lead {
    max-width: 310px;
    font-size: 13.2px;
  }

  .product-premium-card {
    min-height: 278px;
    border-radius: 28px;
  }

  .product-img-wrap {
    min-height: 175px;
  }

  .aura-one {
    width: 220px;
    height: 220px;
  }

  .product-floating-pill {
    font-size: 9.3px;
    padding: 5px 8px;
  }

  .pill-one {
    top: 58px;
    left: 7px;
  }

  .pill-two {
    right: 7px;
    bottom: 56px;
  }
}

@media (max-width: 380px) {

  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2),
  .hero-slide:nth-child(3) {
    --pack-img-width: min(106%, 285px);
    --pack-scale: 1.04;
  }

  .hero-headline {
    font-size: 2.2rem;
  }

  .hero-kicker {
    white-space: normal;
    text-align: left;
  }

  .hero-pack-wrapper {
    min-height: 270px;
  }

  .product-premium-card {
    min-height: 248px;
    grid-template-rows: 42px 1fr 38px;
  }

  .product-img-wrap {
    min-height: 155px;
  }

  .product-floating-pill {
    display: none;
  }

  .product-premium-strip div {
    font-size: 7.4px;
  }

  .hero-cotton,
  .hero-petal,
  .hero-pad-outline {
    opacity: 0.22;
  }

  .hero-arrow {
    width: 35px;
    height: 35px;
  }

  .hero-prev {
    left: calc(50% - 80px);
  }

  .hero-next {
    right: calc(50% - 80px);
  }
}

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

  .hero-decor,
  .product-floating-pill,
  .product-orbit.orbit-two,
  .hero-slide.is-active .hero-slide-content,
  .hero-slide.is-active .hero-pack-wrapper {
    animation: none !important;
  }

  .hero-pack-img {
    animation: none !important;
    transform: scale(var(--pack-scale, 1.16));
  }

  .hero-slider-track {
    transition: none !important;
  }
}

/* ===================== FLYDAYZ ULTRA PREMIUM HERO END ===================== */


/* =========================================================
   HERO TEXT CLIPPING FIX ONLY
   Keeps letters like D, g, y, p and j fully visible
========================================================= */

.hero-slide-content,
.hero-slide-grid,
.hero-slide {
  overflow-y: visible !important;
}

.hero-headline {
  line-height: 1.16 !important;
  padding-top: 0.04em;
  padding-bottom: 0.08em;
  overflow: visible !important;
}

.hero-headline .headline-accent {
  display: inline-block !important;
  line-height: 1.24 !important;
  padding-top: 0.04em;
  padding-bottom: 0.30em !important;
  margin-bottom: -0.08em;
  overflow: visible !important;
  vertical-align: top;
}

@media (max-width: 991.98px) {
  .hero-headline {
    line-height: 1.16 !important;
  }

  .hero-headline .headline-accent {
    line-height: 1.25 !important;
    padding-bottom: 0.31em !important;
  }
}

@media (max-width: 575.98px) {
  .hero-headline {
    line-height: 1.18 !important;
  }

  .hero-headline .headline-accent {
    display: inline-block !important;
    line-height: 1.28 !important;
    padding-bottom: 0.34em !important;
  }
}

/* ===================== HERO TEXT CLIPPING FIX END ===================== */



/* ===================== PRODUCT SIZE PREMIUM GRID SECTION START ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #0b6fb3;
  --fd-blue-dark: #075a96;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
}

/* SECTION */
#products-size.product-section {
  position: relative;
  padding: 86px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(780px 380px at 7% 9%, rgba(231, 53, 139, 0.12), transparent 62%),
    radial-gradient(780px 420px at 94% 18%, rgba(11, 111, 179, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 48%, #ffffff 100%);
}

#products-size.product-section::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.08);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.size-section-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

.size-section-glow.glow-left {
  width: 330px;
  height: 330px;
  left: -175px;
  top: 132px;
  background: rgba(231, 53, 139, 0.11);
}

.size-section-glow.glow-right {
  width: 410px;
  height: 410px;
  right: -220px;
  bottom: 46px;
  background: rgba(11, 111, 179, 0.11);
}

#products-size .container {
  position: relative;
  z-index: 2;
}

/* HEADER */
.product-size-header {
  position: relative;
  margin-bottom: 34px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 250, 0.80));
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 24px 62px rgba(231, 53, 139, 0.11),
    0 12px 30px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.product-size-header::before {
  content: "";
  position: absolute;
  width: 235px;
  height: 235px;
  right: 90px;
  top: -138px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.product-size-header::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  bottom: -90px;
  border-radius: 50%;
  background: rgba(11, 111, 179, 0.11);
}

.product-size-heading,
.product-size-badge {
  position: relative;
  z-index: 2;
}

.section-kicker {
  width: fit-content;
  min-height: 38px;
  margin-bottom: 10px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 26px rgba(231, 53, 139, 0.08);
}

.section-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  font-size: 11px;
}

.product-size-title {
  margin: 0 0 8px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.15rem, 3.1vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-shadow: 0 10px 24px rgba(231, 53, 139, 0.09);
}

.product-size-subtitle {
  max-width: 720px;
  margin: 0;
  color: var(--fd-muted);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.66;
  font-weight: 500;
}

.product-size-badge {
  flex: 0 0 auto;
  min-width: 136px;
  min-height: 96px;
  padding: 18px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  color: #fff;
  box-shadow: 0 20px 46px rgba(231, 53, 139, .22);
}

.product-size-badge strong {
  display: block;
  font-size: 42px;
  line-height: .9;
  font-weight: 950;
}

.product-size-badge span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 850;
}

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

/* CARD */
.product-size-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 251, 0.94));
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.085),
    0 15px 38px rgba(231, 53, 139, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.36s ease;
}

.product-size-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), transparent 42%),
    radial-gradient(circle at 50% 0%, rgba(231, 53, 139, 0.11), transparent 44%);
}

.product-size-card::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -96px;
  top: -96px;
  z-index: 1;
  border-radius: 50%;
  background: rgba(11, 111, 179, 0.09);
  pointer-events: none;
}

.product-size-card:hover,
.product-size-card.featured {
  transform: translateY(-10px);
  border-color: rgba(231, 53, 139, 0.28);
  box-shadow:
    0 34px 82px rgba(231, 53, 139, 0.16),
    0 18px 42px rgba(11, 111, 179, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.product-size-card.featured {
  border-color: rgba(11, 111, 179, .24);
}

/* CARD TOP */
.product-card-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-serial {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fd-pink-dark);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(231, 53, 139, 0.15);
  box-shadow: 0 12px 26px rgba(231, 53, 139, 0.11);
}

.product-flow-tag {
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(231, 53, 139, 0.13);
}

.product-flow-tag.heavy {
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
}

.product-flow-tag.very-heavy {
  background: linear-gradient(135deg, var(--fd-blue), var(--fd-blue-dark));
}

/* MEDIA */
.product-size-card .product-media {
  position: relative;
  z-index: 2;
  min-height: 235px;
  padding: 54px 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-size-card .product-media::before {
  content: "";
  position: absolute;
  width: 245px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(231, 53, 139, 0.18), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(11, 111, 179, 0.12), transparent 58%);
  filter: blur(2px);
  z-index: 0;
}

.product-size-card .product-media::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 32px;
  bottom: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.13);
  filter: blur(13px);
  z-index: 0;
}

.product-size-card .product-media img {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 285px;
  height: 170px;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 38px rgba(231, 53, 139, 0.16)) drop-shadow(0 14px 22px rgba(15, 23, 42, 0.13));
  transition: all 0.36s ease;
}

.product-size-card:hover .product-media img {
  transform: translateY(-8px) scale(1.05);
}

/* BODY */
.product-size-card .product-body {
  position: relative;
  z-index: 3;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93));
  border-top: 1px solid rgba(231, 53, 139, 0.10);
}

.product-name {
  color: #111827;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 950;
}

.product-desc {
  margin-top: 6px;
  color: var(--fd-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

/* SPECS */
.product-spec-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.product-spec-row div {
  padding: 11px 12px;
  border-radius: 18px;
  background: rgba(255, 243, 248, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.10);
}

.product-spec-row small {
  display: block;
  color: var(--fd-muted);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .45px;
}

.product-spec-row strong {
  display: block;
  margin-top: 6px;
  color: var(--fd-dark);
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
}

/* ABSORPTION BOX */
.absorption-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #e7358b 0%, #c71f72 100%);
  box-shadow: 0 12px 26px rgba(231, 53, 139, .18);
}

.absorption-box.blue {
  background:
    linear-gradient(135deg, #0b6fb3 0%, #075a96 100%);
  box-shadow: 0 12px 26px rgba(11, 111, 179, .22);
}

.absorption-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.absorption-labels span {
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.absorption-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .18);
}

.absorption-track span {
  position: absolute;
  left: 3px;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #ffb3d6, #e7358b);
}

.absorption-box.blue .absorption-track span {
  background: linear-gradient(90deg, #9fdcff, #0b6fb3);
}

.absorption-track i {
  position: absolute;
  top: -4px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid #ff1f55;
}

.absorption-text {
  margin-top: 9px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .2px;
}

/* ACTIONS */
.product-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

#products-size .product-body .btn-brand {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  font-size: 12.7px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 12px 26px rgba(231, 53, 139, 0.24);
  transition: all 0.3s ease;
}

#products-size .product-body .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(231, 53, 139, 0.32);
}

#products-size .product-body .btn-outline-dark {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #25d366 !important;
  background: rgba(37, 211, 102, 0.11);
  border: 1px solid rgba(37, 211, 102, 0.28);
  box-shadow: 0 9px 20px rgba(37, 211, 102, 0.13);
  transition: all 0.3s ease;
}

#products-size .product-body .btn-outline-dark i {
  font-size: 17px;
  line-height: 1;
  margin: 0;
}

#products-size .product-body .btn-outline-dark:hover {
  color: #fff !important;
  background: #25d366;
  border-color: #25d366;
  transform: translateY(-2px) scale(1.05);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  #products-size.product-section {
    padding: 72px 0;
  }

  .product-size-grid {
    gap: 20px;
  }

  .product-size-card .product-media img {
    max-width: 250px;
    height: 155px;
  }

  .product-size-title {
    font-size: clamp(2.05rem, 3.5vw, 3rem);
  }
}

@media (max-width: 991.98px) {
  #products-size.product-section {
    padding: 62px 0;
  }

  .product-size-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    border-radius: 30px;
  }

  .product-size-badge {
    min-width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .product-size-badge strong {
    font-size: 34px;
  }

  .product-size-badge span {
    margin-top: 0;
  }

  .product-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-size-title {
    font-size: clamp(2.1rem, 6vw, 3rem);
  }
}

@media (max-width: 767.98px) {
  #products-size.product-section {
    padding: 52px 0;
  }

  #products-size.product-section::before {
    inset: 10px;
    border-radius: 30px;
  }

  .product-size-header {
    margin-bottom: 24px;
    padding: 21px;
  }

  .product-size-subtitle {
    font-size: 14.3px;
  }

  .product-size-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-size-card {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 28px;
  }

  .product-size-card .product-media {
    min-height: 220px;
  }

  .product-size-card .product-media img {
    max-width: 300px;
    height: 165px;
  }
}

@media (max-width: 575.98px) {
  #products-size.product-section {
    padding: 44px 0;
  }

  #products-size .container {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    padding-left: 0;
    padding-right: 0;
  }

  .product-size-header {
    padding: 19px 16px;
    border-radius: 24px;
  }

  .section-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .section-kicker span {
    width: 23px;
    height: 23px;
  }

  .product-size-title {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .product-size-subtitle {
    font-size: 13.8px;
    line-height: 1.56;
  }

  .product-size-card {
    border-radius: 24px;
  }

  .product-card-top {
    top: 13px;
    left: 13px;
    right: 13px;
  }

  .product-serial {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 11px;
  }

  .product-flow-tag {
    min-height: 30px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .product-size-card .product-media {
    min-height: 198px;
    padding: 48px 12px 14px;
  }

  .product-size-card .product-media::before {
    width: 210px;
    height: 150px;
  }

  .product-size-card .product-media::after {
    width: 150px;
    height: 28px;
  }

  .product-size-card .product-media img {
    max-width: 260px;
    height: 145px;
  }

  .product-size-card .product-body {
    padding: 15px;
  }

  .product-name {
    font-size: 15px;
  }

  .product-desc {
    font-size: 12.2px;
  }

  .product-spec-row {
    gap: 8px;
    margin-top: 13px;
  }

  .product-spec-row div {
    padding: 10px;
    border-radius: 16px;
  }

  .product-spec-row strong {
    font-size: 15px;
  }

  .absorption-box {
    padding: 10px;
    border-radius: 16px;
  }

  .absorption-labels span {
    font-size: 8px;
  }

  .absorption-text {
    font-size: 12px;
  }

  .product-actions {
    gap: 8px;
  }

  #products-size .product-body .btn-brand {
    min-height: 37px;
    font-size: 11.8px;
  }

  #products-size .product-body .btn-outline-dark {
    width: 37px;
    min-width: 37px;
    height: 37px;
  }
}

@media (max-width: 430px) {
  .product-size-card .product-media {
    min-height: 185px;
  }

  .product-size-card .product-media img {
    max-width: 235px;
    height: 132px;
  }

  .product-size-title {
    font-size: 2.15rem;
  }
}

@media (max-width: 380px) {
  .product-size-card .product-media {
    min-height: 174px;
  }

  .product-size-card .product-media img {
    max-width: 215px;
    height: 122px;
  }

  .product-size-title {
    font-size: 2rem;
  }

  .product-flow-tag {
    font-size: 9.5px;
  }

  .absorption-labels span {
    font-size: 7.4px;
  }
}






/* ===================== PRODUCT IMAGE SAME SIZE FIX ===================== */

/* Product card image area same height */
.product-card .product-image,
.product-card .product-img,
.product-card .product-media,
.product-card figure,
.product-card .card-img-box {
  width: 100%;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255, 47, 147, 0.10), transparent 58%),
    linear-gradient(180deg, #fff 0%, #fff7fb 100%);
  border-radius: 26px 26px 0 0;
}

/* Main product images same visual size */
.product-card .product-image img,
.product-card .product-img img,
.product-card .product-media img,
.product-card figure img,
.product-card .card-img-box img,
.product-card>img {
  width: 100%;
  max-width: 260px;
  height: 170px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.16));
}

/* Agar image direct card ke andar hai aur wrapper nahi hai */
.product-card>img {
  height: 190px;
  max-width: 280px;
  padding: 22px 18px;
}

/* Large horizontal packs ke liye better visibility */
.product-card img[src*="product.png"],
.product-card img[src*="product1.png"],
.product-card img[src*="product2.png"],
.product-card img[src*="product3.png"],
.product-card img[src*="product4.png"] {
  max-width: 280px;
  height: 175px;
  object-fit: contain;
}

/* Product card ko same height me stable rakhna */
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card .product-body,
.product-card .card-body {
  flex: 1;
}

/* ===================== MOBILE RESPONSIVE IMAGE FIX ===================== */

@media (max-width: 991.98px) {

  .product-card .product-image,
  .product-card .product-img,
  .product-card .product-media,
  .product-card figure,
  .product-card .card-img-box {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
    padding: 20px 16px;
  }

  .product-card .product-image img,
  .product-card .product-img img,
  .product-card .product-media img,
  .product-card figure img,
  .product-card .card-img-box img,
  .product-card>img {
    max-width: 250px;
    height: 165px;
  }
}

@media (max-width: 767.98px) {

  .product-card .product-image,
  .product-card .product-img,
  .product-card .product-media,
  .product-card figure,
  .product-card .card-img-box {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    padding: 18px 14px;
  }

  .product-card .product-image img,
  .product-card .product-img img,
  .product-card .product-media img,
  .product-card figure img,
  .product-card .card-img-box img,
  .product-card>img {
    max-width: 235px;
    height: 158px;
  }
}

@media (max-width: 575.98px) {

  .product-card .product-image,
  .product-card .product-img,
  .product-card .product-media,
  .product-card figure,
  .product-card .card-img-box {
    height: 185px;
    min-height: 185px;
    max-height: 185px;
    padding: 16px 12px;
  }

  .product-card .product-image img,
  .product-card .product-img img,
  .product-card .product-media img,
  .product-card figure img,
  .product-card .card-img-box img,
  .product-card>img {
    max-width: 220px;
    height: 145px;
  }
}

@media (max-width: 380px) {

  .product-card .product-image,
  .product-card .product-img,
  .product-card .product-media,
  .product-card figure,
  .product-card .card-img-box {
    height: 170px;
    min-height: 170px;
    max-height: 170px;
  }

  .product-card .product-image img,
  .product-card .product-img img,
  .product-card .product-media img,
  .product-card figure img,
  .product-card .card-img-box img,
  .product-card>img {
    max-width: 200px;
    height: 132px;
  }
}

/* ===================== PRODUCT IMAGE SAME SIZE FIX END ===================== */



.product-img-wrap {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  overflow: hidden;
}

.product-img-wrap img {
  width: 260px;
  max-width: 350px;
  height: 170px;
  object-fit: contain;
  object-position: center;
}


/* ===================== ABSORPTION ARROW FIX + PREMIUM RESPONSIVE ===================== */

.absorption-box {
  --level: 33%;
  margin-top: 14px;
  padding: 13px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #e7358b, #7b3ff2);
  box-shadow: 0 14px 30px rgba(231, 53, 139, .20);
}

.absorption-box.normal {
  --level: 18%;
  background: linear-gradient(135deg, #ff7ab8, #e7358b);
}

.absorption-box.heavy {
  --level: 55%;
  background: linear-gradient(135deg, #e7358b, #7b3ff2);
}

.absorption-box.very-heavy {
  --level: 88%;
  background: linear-gradient(135deg, #0b6fb3, #075a96);
  box-shadow: 0 14px 30px rgba(11, 111, 179, .22);
}

.absorption-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.absorption-labels span {
  color: #fff;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}

.absorption-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  border: 2px solid rgba(255, 255, 255, .70);
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, .18);
}

.absorption-track span {
  position: absolute;
  left: 3px;
  top: 50%;
  width: calc(var(--level) - 3px);
  height: 7px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #ffd0e6, #e7358b);
}

.absorption-box.very-heavy .absorption-track span {
  background: linear-gradient(90deg, #b8e5ff, #0b6fb3);
}

.absorption-track i {
  position: absolute;
  left: var(--level);
  top: -5px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 13px solid #ff1f55;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .18));
}

.absorption-box.very-heavy .absorption-track i {
  border-top-color: #0b6fb3;
}

.absorption-text {
  margin-top: 10px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .35px;
}

/* Card image premium */
.product-size-card .product-media img {
  max-width: 315px;
  height: 185px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 991.98px) {
  .product-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .product-size-grid {
    grid-template-columns: 1fr;
  }

  .product-size-card {
    max-width: 520px;
    margin: 0 auto;
  }

  .product-size-card .product-media img {
    max-width: 290px;
    height: 165px;
  }
}

@media (max-width: 575.98px) {
  .absorption-box {
    padding: 11px;
    border-radius: 17px;
  }

  .absorption-labels span {
    font-size: 8px;
  }

  .absorption-text {
    font-size: 11.5px;
  }

  .product-size-card .product-media img {
    max-width: 250px;
    height: 145px;
  }
}


/* ===================== PRODUCT SIZE PREMIUM GRID SECTION END ===================== */


/* ===================== FLYDAYZ PRODUCT TYPE ULTRA PREMIUM ===================== */

.product-type-premium {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-purple: #8b35f6;
  --fd-blue: #1f7cff;
  --fd-dark: #111827;
  --fd-muted: #667085;
  --fd-white: #ffffff;

  position: relative;
  padding: 86px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(231, 53, 139, 0.13), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(139, 53, 246, 0.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.product-type-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231, 53, 139, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.7;
  pointer-events: none;
}

.product-type-premium .container {
  position: relative;
  z-index: 2;
}

/* Heading */
.product-type-heading {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.product-type-kicker {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 8px 17px 8px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fd-pink-dark);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow: 0 16px 38px rgba(231, 53, 139, 0.11);
}

.product-type-kicker span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
}

.product-type-heading h2 {
  margin: 0 0 12px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.15rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.product-type-heading p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--fd-muted);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
}

/* Grid */
.product-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* Card */
.product-type-card {
  position: relative;
  min-height: 440px;
  padding: 34px;
  border-radius: 38px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(circle at 80% 20%, rgba(139, 53, 246, 0.13), transparent 32%),
    radial-gradient(circle at 15% 85%, rgba(231, 53, 139, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 251, 0.86));
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.08),
    0 18px 42px rgba(231, 53, 139, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-type-card:hover {
  transform: translateY(-10px);
  border-color: rgba(231, 53, 139, 0.22);
  box-shadow:
    0 42px 96px rgba(15, 23, 42, 0.10),
    0 24px 60px rgba(231, 53, 139, 0.15);
}

.product-type-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px dashed rgba(231, 53, 139, 0.16);
  pointer-events: none;
}

.product-type-glow {
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(139, 53, 246, 0.12);
  filter: blur(4px);
  pointer-events: none;
}

.product-type-card-alt {
  background:
    radial-gradient(circle at 78% 22%, rgba(31, 124, 255, 0.12), transparent 34%),
    radial-gradient(circle at 14% 84%, rgba(231, 53, 139, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 241, 255, 0.82));
}

/* Content */
.product-type-content {
  position: relative;
  z-index: 5;
}

.product-type-badge {
  width: fit-content;
  margin-bottom: 16px;
  padding: 8px 15px 8px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 14px 34px rgba(231, 53, 139, 0.09);
}

.product-type-badge i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
}

.product-type-content h3 {
  margin: 0 0 12px;
  color: var(--fd-dark);
  font-size: clamp(1.7rem, 2.4vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 950;
}

.product-type-content p {
  margin: 0 0 18px;
  color: var(--fd-muted);
  font-size: 14.8px;
  line-height: 1.68;
  font-weight: 600;
}

.product-type-points {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.product-type-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #374151;
  font-size: 13.5px;
  font-weight: 750;
}

.product-type-points i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
}

.product-type-btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple), var(--fd-blue));
  box-shadow:
    0 16px 36px rgba(231, 53, 139, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-type-btn i {
  font-size: 21px;
  transition: transform 0.3s ease;
}

.product-type-btn:hover {
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow:
    0 24px 52px rgba(231, 53, 139, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.product-type-btn:hover i {
  transform: translateX(4px);
}

/* Visual */
.product-type-visual {
  position: relative;
  z-index: 4;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-type-circle {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.58) 38%, rgba(231, 53, 139, 0.12) 64%, transparent 78%);
  box-shadow:
    inset 0 0 70px rgba(255, 255, 255, 0.86),
    0 30px 80px rgba(231, 53, 139, 0.13);
}

.product-type-img {
  position: relative;
  z-index: 4;
  width: min(100%, 390px);
  height: auto;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 34px rgba(15, 23, 42, 0.18)) saturate(1.06) contrast(1.03);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.product-type-card:hover .product-type-img {
  transform: translateY(-10px) scale(1.045);
  filter:
    drop-shadow(0 34px 42px rgba(15, 23, 42, 0.22)) saturate(1.08) contrast(1.04);
}

.product-type-decor {
  position: absolute;
  z-index: 1;
  width: 250px;
  right: -90px;
  bottom: -70px;
  opacity: 0.05;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .product-type-card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 30px;
  }

  .product-type-visual {
    order: -1;
    min-height: 290px;
  }

  .product-type-img {
    width: min(100%, 340px);
  }

  .product-type-circle {
    width: 285px;
    height: 285px;
  }
}

@media (max-width: 991.98px) {
  .product-type-premium {
    padding: 68px 0;
  }

  .product-type-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin: 0 auto;
    gap: 24px;
  }

  .product-type-card {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .product-type-visual {
    order: initial;
  }
}

@media (max-width: 767.98px) {
  .product-type-heading {
    margin-bottom: 30px;
  }

  .product-type-heading h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .product-type-heading p {
    font-size: 14.5px;
  }

  .product-type-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 30px;
  }

  .product-type-card::before {
    inset: 13px;
    border-radius: 22px;
  }

  .product-type-visual {
    order: -1;
    min-height: 245px;
  }

  .product-type-circle {
    width: 240px;
    height: 240px;
  }

  .product-type-img {
    width: min(92%, 285px);
  }

  .product-type-content {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .product-type-premium {
    padding: 52px 0;
  }

  .product-type-premium .container {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    padding-left: 0;
    padding-right: 0;
  }

  .product-type-heading {
    text-align: left;
    margin-bottom: 24px;
  }

  .product-type-kicker {
    margin-left: 0;
    margin-right: 0;
    font-size: 11.5px;
  }

  .product-type-heading h2 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

  .product-type-heading p {
    margin-left: 0;
    margin-right: 0;
    font-size: 13.8px;
    line-height: 1.6;
  }

  .product-type-grid {
    gap: 18px;
  }

  .product-type-card {
    padding: 18px;
    border-radius: 26px;
  }

  .product-type-visual {
    min-height: 205px;
  }

  .product-type-circle {
    width: 205px;
    height: 205px;
  }

  .product-type-img {
    width: min(92%, 238px);
  }

  .product-type-content h3 {
    font-size: 1.65rem;
  }

  .product-type-content p {
    font-size: 13.5px;
    line-height: 1.58;
  }

  .product-type-points {
    gap: 8px;
    margin-bottom: 20px;
  }

  .product-type-points li {
    font-size: 12.8px;
  }

  .product-type-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    font-size: 13.5px;
  }

  .product-type-decor {
    width: 180px;
    right: -75px;
    bottom: -58px;
  }
}

@media (max-width: 380px) {
  .product-type-card {
    padding: 16px;
  }

  .product-type-visual {
    min-height: 190px;
  }

  .product-type-img {
    width: min(92%, 220px);
  }

  .product-type-circle {
    width: 190px;
    height: 190px;
  }

  .product-type-heading h2 {
    font-size: 1.95rem;
  }
}


/* ===================== FEATURES ULTRA PREMIUM SECTION START ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #436dff;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
  --fd-green: #25d366;
}

/* SECTION */
.features-premium {
  position: relative;
  padding: 86px 0 94px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 10%, rgba(231, 53, 139, 0.12), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(123, 63, 242, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 48%, #ffffff 100%);
}

.features-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.feature-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(7px);
}

.feature-bg-glow.glow-one {
  width: 340px;
  height: 340px;
  left: -180px;
  top: 120px;
  background: rgba(231, 53, 139, 0.11);
}

.feature-bg-glow.glow-two {
  width: 410px;
  height: 410px;
  right: -230px;
  top: 120px;
  background: rgba(123, 63, 242, 0.10);
}

.feature-bg-glow.glow-three {
  width: 260px;
  height: 260px;
  left: 45%;
  bottom: -150px;
  background: rgba(255, 199, 226, 0.34);
}

.features-premium .container {
  position: relative;
  z-index: 2;
}

/* LEFT CONTENT */
.feature-section-kicker {
  width: fit-content;
  min-height: 40px;
  margin-bottom: 14px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12.8px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow:
    0 14px 32px rgba(231, 53, 139, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.feature-section-kicker span {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  font-size: 11px;
  box-shadow: 0 10px 20px rgba(231, 53, 139, 0.24);
}

.feature-main-title {
  max-width: 620px;
  margin: 0 0 16px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.5rem, 3.7vw, 4rem);
  line-height: 1.06;
  /* letter-spacing: -0.055em; */
  font-weight: 700;
}

.feature-main-title span {
  color: transparent;
  background: linear-gradient(135deg, var(--fd-pink-dark), var(--fd-purple));
  -webkit-background-clip: text;
  background-clip: text;
}

.feature-main-text {
  max-width: 590px;
  margin: 0 0 30px;
  color: var(--fd-muted);
  font-size: 15.8px;
  line-height: 1.76;
  font-weight: 700;
}

/* PREMIUM FEATURE CARDS */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  position: relative;
  min-height: 150px;
  padding: 20px 18px;
  border-radius: 28px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(231, 53, 139, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 246, 251, 0.80));
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.075),
    0 12px 34px rgba(231, 53, 139, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.80), transparent 44%),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.95), transparent 34%);
}

.feature-card::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  right: -64px;
  bottom: -66px;
  z-index: 0;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.10);
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.feature-card-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.72) 48%,
      transparent 58%,
      transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.75s ease;
}

.feature-card:hover {
  transform: translateY(-9px);
  border-color: rgba(231, 53, 139, 0.24);
  box-shadow:
    0 34px 82px rgba(231, 53, 139, 0.17),
    0 18px 42px rgba(67, 109, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.feature-card:hover::after {
  transform: scale(1.18);
  opacity: 0.92;
}

.feature-card:hover .feature-card-shine {
  transform: translateX(120%);
}

/* Individual Soft Tints */
.feature-card-one {
  background:
    radial-gradient(circle at 88% 18%, rgba(231, 53, 139, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 250, 0.84));
}

.feature-card-two {
  background:
    radial-gradient(circle at 88% 18%, rgba(123, 63, 242, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 242, 255, 0.82));
}

.feature-card-three {
  background:
    radial-gradient(circle at 88% 18%, rgba(67, 109, 255, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.82));
}

.feature-card-four {
  background:
    radial-gradient(circle at 88% 18%, rgba(37, 211, 102, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 255, 250, 0.82));
}

.feature-ic {
  position: relative;
  z-index: 3;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background:
    linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow:
    0 18px 38px rgba(231, 53, 139, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.feature-card-two .feature-ic {
  background: linear-gradient(135deg, var(--fd-purple), var(--fd-blue));
}

.feature-card-three .feature-ic {
  background: linear-gradient(135deg, var(--fd-blue), var(--fd-purple));
}

.feature-card-four .feature-ic {
  background: linear-gradient(135deg, var(--fd-pink), #25d366);
}

.feature-body {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.feature-meta {
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--fd-pink-dark);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  background: rgba(231, 53, 139, 0.09);
  border: 1px solid rgba(231, 53, 139, 0.12);
}

.feature-card-two .feature-meta {
  color: #6532d8;
  background: rgba(123, 63, 242, 0.09);
  border-color: rgba(123, 63, 242, 0.12);
}

.feature-card-three .feature-meta {
  color: #2858d8;
  background: rgba(67, 109, 255, 0.09);
  border-color: rgba(67, 109, 255, 0.12);
}

.feature-card-four .feature-meta {
  color: #168a48;
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.14);
}

.feature-title {
  color: #111827;
  font-size: 16.6px;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.feature-desc {
  max-width: 245px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 12.9px;
  line-height: 1.58;
  font-weight: 650;
}

/* BUTTONS */
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

.features-premium .feature-btn-primary,
.features-premium .feature-btn-secondary {
  min-height: 50px;
  padding: 0 23px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13.9px;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.features-premium .feature-btn-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow:
    0 17px 36px rgba(231, 53, 139, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.features-premium .feature-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px rgba(231, 53, 139, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.features-premium .feature-btn-secondary {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(24, 28, 43, 0.10);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.features-premium .feature-btn-secondary:hover {
  color: #fff !important;
  border-color: var(--fd-green);
  background: var(--fd-green);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(37, 211, 102, 0.22);
}

/* RIGHT SHOWCASE */
.feature-showcase {
  position: relative;
  min-height: 560px;
  padding: 26px;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 245, 250, 0.74)),
    radial-gradient(circle at 28% 20%, rgba(231, 53, 139, 0.14), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(123, 63, 242, 0.13), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 34px 92px rgba(231, 53, 139, 0.15),
    0 18px 52px rgba(15, 23, 42, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.feature-showcase::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 32px;
  border: 1px dashed rgba(231, 53, 139, 0.18);
  pointer-events: none;
}

.feature-showcase::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -125px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.10);
  pointer-events: none;
}

/* SHOWCASE TOP */
.showcase-top {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.showcase-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.showcase-label span {
  color: var(--fd-pink-dark);
  font-size: 13px;
  font-weight: 700;
  margin-top: 12px;
  margin-left: 12px;
}

.showcase-label strong {
  color: var(--fd-dark);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.4px;
  margin-left: 10px;

}

.showcase-mini-pill {
  min-height: 35px;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 12px 28px rgba(231, 53, 139, 0.10);
  white-space: nowrap;
}

.showcase-mini-pill i {
  color: var(--fd-pink);
}

/* STAGE */
.showcase-stage {
  position: relative;
  z-index: 3;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.showcase-orbit.orbit-one {
  width: 310px;
  height: 310px;
  border: 1px solid rgba(231, 53, 139, 0.12);
}

.showcase-orbit.orbit-two {
  width: 230px;
  height: 230px;
  border: 1px dashed rgba(123, 63, 242, 0.16);
  animation: featureOrbitSpin 16s linear infinite;
}

@keyframes featureOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

.showcase-pad-bg {
  position: absolute;
  z-index: 1;
  width: 390px;
  max-width: 86%;
  opacity: 0.055;
  transform: rotate(-18deg);
}

.showcase-pack {
  position: relative;
  z-index: 5;
  width: min(92%, 410px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 32px 52px rgba(15, 23, 42, 0.18)) saturate(1.04) contrast(1.03);
  animation: featurePackFloat 4.4s ease-in-out infinite alternate;
}

@keyframes featurePackFloat {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(-14px) rotate(1.2deg);
  }
}

/* FLOATING PILLS */
.floating-tech-pill {
  position: absolute;
  z-index: 8;
  min-height: 40px;
  padding: 7px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-dark);
  font-size: 12.5px;
  font-weight: 850;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow: 0 16px 36px rgba(231, 53, 139, 0.13);
}

.floating-tech-pill i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
}

.tech-pill-one {
  left: 18px;
  top: 108px;
  animation: featurePillOne 4s ease-in-out infinite alternate;
}

.tech-pill-two {
  right: 20px;
  top: 175px;
  animation: featurePillTwo 4.4s ease-in-out infinite alternate;
}

.tech-pill-three {
  left: 54px;
  bottom: 62px;
  animation: featurePillThree 4.7s ease-in-out infinite alternate;
}

@keyframes featurePillOne {
  to {
    transform: translateY(-10px);
  }
}

@keyframes featurePillTwo {
  to {
    transform: translateY(10px);
  }
}

@keyframes featurePillThree {
  to {
    transform: translateY(-8px);
  }
}

/* PREMIUM FLOW METER */
.showcase-bottom {
  position: relative;
  z-index: 9;
  width: 100%;
  margin-top: 8px;
}

.premium-flow-meter {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 15px 30px 19px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffefe 46%, #f7f7f8 100%);
  overflow: visible;
  transition: all 0.3s ease;
}

.premium-flow-meter:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 48px rgba(231, 53, 139, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -9px 18px rgba(15, 23, 42, 0.045);
}

.premium-flow-meter::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 5px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.premium-flow-labels {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 0.75fr 0.9fr 1.3fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding-right: 20px;
}

.premium-flow-labels span {
  color: #111111;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.premium-flow-labels span:nth-child(2) {
  text-align: center;
}

.premium-flow-labels span:nth-child(3) {
  text-align: right;
}

.premium-flow-track {
  position: relative;
  z-index: 5;
  width: calc(100% - 18px);
  height: 6px;
  border-radius: 999px;
  background: rgba(231, 53, 139, 0.13);
  overflow: visible;
}

.premium-flow-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #e7358b 0%, #ee2a82 42%, #f0183a 100%);
  box-shadow:
    0 0 0 1px rgba(231, 53, 139, 0.10),
    0 5px 12px rgba(231, 53, 139, 0.28);
}

.premium-flow-pointer {
  position: absolute;
  z-index: 8;
  right: -18px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 18px solid #ef233c;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

/* RESPONSIVE */
@media (max-width: 1199.98px) {
  .features-premium {
    padding: 72px 0;
  }

  .feature-main-title {
    font-size: clamp(2.25rem, 3.7vw, 3.55rem);
  }

  .feature-card {
    min-height: 160px;
    padding: 18px 16px;
  }

  .feature-ic {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 19px;
    font-size: 20px;
  }

  .feature-showcase {
    min-height: 535px;
  }

  .showcase-pack {
    width: min(90%, 365px);
  }
}

@media (max-width: 991.98px) {
  .features-premium {
    padding: 60px 0;
    text-align: center;
  }

  .feature-section-kicker,
  .feature-main-title,
  .feature-main-text {
    margin-left: auto;
    margin-right: auto;
  }

  .feature-grid {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .feature-actions {
    justify-content: center;
  }

  .feature-card {
    text-align: left;
  }

  .feature-showcase {
    max-width: 650px;
    min-height: auto;
    margin: 18px auto 0;
    padding: 24px;
  }

  .showcase-stage {
    min-height: 315px;
  }

  .showcase-pack {
    width: min(86%, 340px);
  }

  .tech-pill-one {
    left: 40px;
    top: 92px;
  }

  .tech-pill-two {
    right: 40px;
    top: 155px;
  }

  .tech-pill-three {
    left: 78px;
    bottom: 58px;
  }
}

@media (max-width: 767.98px) {
  .features-premium {
    padding: 50px 0;
  }

  .features-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .feature-main-title {
    font-size: clamp(2.15rem, 7vw, 3rem);
  }

  .feature-main-text {
    font-size: 14.6px;
    line-height: 1.64;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .feature-card {
    min-height: auto;
    border-radius: 24px;
    padding: 17px;
  }

  .feature-ic {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 17px;
    font-size: 18px;
  }

  .feature-title {
    font-size: 15.5px;
  }

  .feature-desc {
    max-width: 100%;
    font-size: 12.6px;
  }

  .showcase-stage {
    min-height: 285px;
  }

  .showcase-orbit.orbit-one {
    width: 260px;
    height: 260px;
  }

  .showcase-orbit.orbit-two {
    width: 195px;
    height: 195px;
  }

  .showcase-pad-bg {
    width: 300px;
  }

  .showcase-pack {
    width: min(84%, 300px);
  }

  .premium-flow-meter {
    padding: 13px 24px 17px;
  }

  .premium-flow-labels span {
    font-size: 11.2px;
  }

  .premium-flow-pointer {
    right: -16px;
    border-left-width: 16px;
    border-top-width: 15px;
    border-bottom-width: 15px;
  }
}

@media (max-width: 575.98px) {
  .features-premium {
    padding: 42px 0;
  }

  .feature-section-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .feature-section-kicker span {
    width: 23px;
    height: 23px;
  }

  .feature-main-title {
    font-size: clamp(2.05rem, 10vw, 2.72rem);
    line-height: 1.08;
  }

  .feature-main-text {
    font-size: 13.8px;
    line-height: 1.58;
    margin-bottom: 22px;
  }

  .feature-card {
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
  }

  .feature-ic {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 15px;
    font-size: 17px;
  }

  .feature-meta {
    font-size: 9.5px;
    padding: 4px 8px;
    margin-bottom: 6px;
  }

  .feature-title {
    font-size: 14.6px;
    margin-bottom: 5px;
  }

  .feature-desc {
    font-size: 12px;
    line-height: 1.48;
  }

  .feature-actions {
    gap: 10px;
    margin-top: 22px;
  }

  .features-premium .feature-btn-primary,
  .features-premium .feature-btn-secondary {
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 13.2px;
  }

  .feature-showcase {
    padding: 18px;
    border-radius: 28px;
  }

  .feature-showcase::before {
    inset: 12px;
    border-radius: 21px;
  }

  .showcase-top {
    flex-direction: column;
    gap: 10px;
  }

  .showcase-label strong {
    font-size: 17px;
  }

  .showcase-mini-pill {
    width: fit-content;
  }

  .showcase-stage {
    min-height: 245px;
  }

  .showcase-orbit.orbit-one {
    width: 220px;
    height: 220px;
  }

  .showcase-orbit.orbit-two {
    width: 165px;
    height: 165px;
  }

  .showcase-pack {
    width: min(86%, 245px);
  }

  .showcase-pad-bg {
    width: 240px;
  }

  .floating-tech-pill {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 10.8px;
  }

  .floating-tech-pill i {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .tech-pill-one {
    left: 8px;
    top: 86px;
  }

  .tech-pill-two {
    right: 8px;
    top: 138px;
  }

  .tech-pill-three {
    left: 22px;
    bottom: 52px;
  }

  .premium-flow-meter {
    padding: 11px 15px 14px;
    border-width: 2px;
    box-shadow:
      0 12px 25px rgba(15, 23, 42, 0.13),
      inset 0 2px 0 rgba(255, 255, 255, 0.98);
  }

  .premium-flow-labels {
    grid-template-columns: 0.65fr 0.9fr 1.4fr;
    gap: 4px;
    margin-bottom: 7px;
    padding-right: 13px;
  }

  .premium-flow-labels span {
    font-size: 8.3px;
    letter-spacing: -0.15px;
  }

  .premium-flow-track {
    width: calc(100% - 12px);
    height: 4px;
  }

  .premium-flow-pointer {
    right: -12px;
    border-left-width: 12px;
    border-top-width: 11px;
    border-bottom-width: 11px;
  }
}

@media (max-width: 430px) {
  .feature-card {
    padding: 13px;
  }

  .feature-ic {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 14px;
    font-size: 16px;
  }

  .feature-title {
    font-size: 14px;
  }

  .feature-desc {
    font-size: 11.6px;
  }

  .premium-flow-meter {
    padding: 10px 12px 13px;
  }

  .premium-flow-labels {
    grid-template-columns: 0.62fr 0.82fr 1.48fr;
    padding-right: 11px;
  }

  .premium-flow-labels span {
    font-size: 7.2px;
  }

  .premium-flow-pointer {
    right: -10px;
    border-left-width: 10px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }
}

@media (max-width: 360px) {
  .premium-flow-labels span {
    font-size: 6.7px;
  }

  .premium-flow-meter {
    padding: 9px 10px 12px;
  }
}

/* ===================== FEATURES ULTRA PREMIUM SECTION END ===================== */




/* ===================== WHY FLYDAYZ ULTRA PREMIUM SECTION ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #0b66a8;
  --fd-blue-dark: #075a96;
  --fd-yellow: #ffe400;
  --fd-yellow-soft: #fff26b;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
}

/* SECTION */
.why-premium {
  position: relative;
  padding: 88px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 8%, rgba(231, 53, 139, 0.11), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(11, 102, 168, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 50%, #ffffff 100%);
}

.why-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.why-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(7px);
}

.why-glow-one {
  width: 340px;
  height: 340px;
  left: -180px;
  top: 130px;
  background: rgba(231, 53, 139, 0.11);
}

.why-glow-two {
  width: 420px;
  height: 420px;
  right: -230px;
  top: 120px;
  background: rgba(11, 102, 168, 0.12);
}

.why-glow-three {
  width: 260px;
  height: 260px;
  left: 46%;
  bottom: -155px;
  background: rgba(255, 199, 226, 0.34);
}

.why-premium .container {
  position: relative;
  z-index: 2;
}

/* HEADER */
.why-section-header {
  max-width: 830px;
  margin: 0 auto 46px;
}

.why-section-kicker {
  width: fit-content;
  min-height: 38px;
  margin: 0 auto 12px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 26px rgba(231, 53, 139, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.why-section-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  font-size: 11px;
}

.why-main-title {
  position: relative;
  width: fit-content;
  margin: 0 auto 14px;
  padding-bottom: 14px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 950;
  text-shadow: 0 10px 24px rgba(231, 53, 139, 0.10);
  font-weight: 700;
}

.why-main-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--fd-pink), var(--fd-blue), var(--fd-purple));
  box-shadow: 0 10px 22px rgba(231, 53, 139, 0.20);
}

.why-main-subtitle {
  max-width: 720px;
  margin: 0 auto;
  color: var(--fd-muted);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 500;
}

/* CARD ROW */
.why-card-row {
  position: relative;
  z-index: 2;
  justify-content: center;
}

.why-card-row>.col {
  display: flex;
}

/* WHY CARD */
.why-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 265px;
  padding: 24px 16px 22px;
  border-radius: 30px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.82));
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 20px 54px rgba(15, 23, 42, 0.08),
    0 14px 34px rgba(231, 53, 139, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.36s ease;
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), transparent 46%),
    radial-gradient(circle at 18% 10%, rgba(231, 53, 139, 0.10), transparent 38%),
    radial-gradient(circle at 90% 92%, rgba(11, 102, 168, 0.08), transparent 36%);
  pointer-events: none;
}

.why-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -68px;
  bottom: -70px;
  border-radius: 50%;
  background: rgba(11, 102, 168, 0.08);
  pointer-events: none;
}

.why-card:hover,
.why-card.active {
  transform: translateY(-9px);
  border-color: rgba(231, 53, 139, 0.28);
  box-shadow:
    0 32px 78px rgba(231, 53, 139, 0.16),
    0 18px 42px rgba(11, 102, 168, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.why-card-number {
  position: absolute;
  right: 16px;
  top: 15px;
  z-index: 1;
  color: rgba(231, 53, 139, 0.10);
  font-size: 38px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
}

/* IMAGE ICON */
.why-icon-img-wrap {
  position: relative;
  z-index: 2;
  width: 86px;
  height: 86px;
  margin: 0 auto 16px;
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 38% 32%, var(--fd-yellow-soft), var(--fd-yellow));
  border: 4px solid #ffffff;
  outline: 3px solid rgba(231, 53, 139, .95);
  box-shadow:
    0 18px 38px rgba(231, 53, 139, 0.18),
    0 10px 28px rgba(255, 228, 0, 0.18);
  transition: .36s ease;
}

.why-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.why-card:hover .why-icon-img-wrap,
.why-card.active .why-icon-img-wrap {
  transform: translateY(-5px) scale(1.05) rotate(-4deg);
  box-shadow:
    0 24px 48px rgba(231, 53, 139, 0.25),
    0 14px 34px rgba(255, 228, 0, 0.22);
}

.why-title-sm {
  position: relative;
  z-index: 2;
  color: #111827;
  font-size: 15.5px;
  line-height: 1.22;
  font-weight: 950;
  margin-bottom: 9px;
  text-align: center;
}

.why-text {
  position: relative;
  z-index: 2;
  color: var(--fd-muted);
  font-size: 12.7px;
  line-height: 1.6;
  font-weight: 750;
  text-align: center;
}

/* 5 IN 1 STRIP */
/* 5 IN 1 STRIP */
.why-protection-strip {
  position: relative;
  margin-top: 32px;
  min-height: 98px;
  padding: 16px 22px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  /* Background Color Changed */
  background: linear-gradient(135deg, var(--myfly-pink), var(--myfly-purple));

  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 24px 64px rgba(11, 102, 168, .20),
    0 14px 34px rgba(231, 53, 139, .12),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

.why-protection-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360px 120px at 18% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(260px 120px at 86% 100%, rgba(255, 228, 0, .10), transparent 60%);
  pointer-events: none;
}

.why-strip-features {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.why-strip-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
}

.why-strip-item img {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffe400;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.why-strip-item span {
  display: block;
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.1px;
}

.why-strip-badge {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 142px;
  padding-left: 22px;
  border-left: 2px solid rgba(255, 255, 255, .38);
  color: #ffffff;
  text-align: left;
}

.why-strip-badge::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-left: 8px solid #ffffff;
  border-bottom: 8px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  opacity: .95;
}

.why-strip-badge span {
  display: block;
  padding-left: 28px;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 50px);
  line-height: .88;
  font-style: italic;
  font-weight: 950;
  letter-spacing: -.04em;
}

.why-strip-badge small {
  display: block;
  padding-left: 31px;
  margin-top: 4px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

/* CTA */
.why-cta {
  position: relative;
  margin-top: 34px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 244, 250, 0.78)),
    radial-gradient(circle at 12% 18%, rgba(231, 53, 139, 0.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(11, 102, 168, 0.12), transparent 34%);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 26px 70px rgba(231, 53, 139, 0.13),
    0 14px 36px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.why-cta::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -135px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.why-cta::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -95px;
  bottom: -110px;
  border-radius: 50%;
  background: rgba(11, 102, 168, 0.09);
}

.why-cta-content,
.why-cta-actions {
  position: relative;
  z-index: 2;
}

.why-cta-badge {
  width: fit-content;
  min-height: 32px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-pink-dark);
  font-size: 11.8px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.13);
}

.why-cta-badge i {
  color: var(--fd-pink);
}

.why-cta h3 {
  margin: 0 0 8px;
  color: var(--fd-dark);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
}

.why-cta p {
  max-width: 620px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 13.8px;
  line-height: 1.6;
  font-weight: 750;
}

.why-cta-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}

/* BUTTONS */
.why-premium .why-btn-primary,
.why-premium .why-btn-secondary {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 850;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.why-premium .why-btn-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.why-premium .why-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px rgba(231, 53, 139, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.why-premium .why-btn-secondary {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(24, 28, 43, 0.10);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.why-premium .why-btn-secondary:hover {
  color: #fff !important;
  border-color: #25d366;
  background: #25d366;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(37, 211, 102, 0.25);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-premium {
    padding: 76px 0;
  }

  .why-card {
    min-height: 255px;
    padding: 22px 14px 20px;
  }

  .why-main-title {
    font-size: clamp(2.25rem, 3.7vw, 3.55rem);
  }

  .why-icon-img-wrap {
    width: 80px;
    height: 80px;
  }

  .why-strip-features {
    gap: 10px;
  }

  .why-strip-item {
    gap: 8px;
  }

  .why-strip-item img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .why-strip-item span {
    font-size: 11.6px;
  }
}

@media (max-width: 991.98px) {
  .why-premium {
    padding: 64px 0;
  }

  .why-card {
    min-height: 235px;
  }

  .why-protection-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .why-strip-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-strip-item:nth-child(5) {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .why-strip-badge {
    min-width: 100%;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 2px solid rgba(255, 255, 255, .32);
    text-align: center;
  }

  .why-strip-badge::before {
    display: none;
  }

  .why-strip-badge span,
  .why-strip-badge small {
    padding-left: 0;
  }

  .why-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .why-cta-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .why-premium {
    padding: 52px 0;
  }

  .why-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .why-section-header {
    margin-bottom: 34px;
  }

  .why-main-title {
    font-size: clamp(2.25rem, 7vw, 3.05rem);
  }

  .why-main-subtitle {
    font-size: 14.6px;
    line-height: 1.64;
  }

  .why-card {
    min-height: auto;
    padding: 22px 18px;
    border-radius: 24px;
  }

  .why-icon-img-wrap {
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
  }

  .why-card-number {
    font-size: 34px;
  }

  .why-protection-strip {
    border-radius: 24px;
    padding: 14px;
  }

  .why-cta {
    padding: 24px;
    border-radius: 28px;
  }

  .why-cta h3 {
    font-size: 19px;
  }
}

@media (max-width: 575.98px) {
  .why-premium {
    padding: 44px 0;
  }

  .why-section-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .why-section-kicker span {
    width: 23px;
    height: 23px;
  }

  .why-main-title {
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: 1;
  }

  .why-main-title::after {
    width: 76px;
    height: 4px;
  }

  .why-main-subtitle {
    font-size: 13.8px;
    line-height: 1.58;
  }

  .why-card {
    padding: 20px 16px;
    border-radius: 22px;
  }

  .why-icon-img-wrap {
    width: 72px;
    height: 72px;
    outline-width: 2px;
    border-width: 3px;
  }

  .why-title-sm {
    font-size: 15px;
  }

  .why-text {
    font-size: 12.5px;
    line-height: 1.55;
  }

  .why-card-number {
    right: 16px;
    top: 14px;
    font-size: 32px;
  }

  .why-protection-strip {
    margin-top: 24px;
    padding: 12px;
    border-radius: 22px;
  }

  .why-strip-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .why-strip-item,
  .why-strip-item:nth-child(5) {
    justify-content: flex-start;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
  }

  .why-strip-item img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .why-strip-item span {
    font-size: 12px;
  }

  .why-strip-badge span {
    font-size: 38px;
  }

  .why-strip-badge small {
    font-size: 13px;
  }

  .why-cta {
    margin-top: 26px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .why-cta-badge {
    font-size: 11.2px;
  }

  .why-cta h3 {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  .why-cta p {
    font-size: 12.8px;
  }

  .why-cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .why-premium .why-btn-primary,
  .why-premium .why-btn-secondary {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .why-main-title {
    font-size: 2.15rem;
  }

  .why-card {
    padding: 18px 14px;
  }

  .why-icon-img-wrap {
    width: 66px;
    height: 66px;
  }

  .why-strip-item {
    align-items: center;
  }
}

/* ===================== WHY FLYDAYZ ULTRA PREMIUM END ===================== */


/* ===================== FLYDAYZ CERTIFICATION ULTRA PREMIUM ===================== */

.certification-premium {
  --cert-pink: #e7358b;
  --cert-pink-dark: #c71f72;
  --cert-purple: #7b3ff2;
  --cert-blue: #436dff;
  --cert-dark: #171b2a;
  --cert-muted: #667085;
  --cert-green: #20b26b;

  position: relative;
  padding: 82px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 12%, rgba(231, 53, 139, 0.12), transparent 62%),
    radial-gradient(760px 420px at 92% 18%, rgba(123, 63, 242, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.certification-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 46px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.026) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.certification-premium .container {
  position: relative;
  z-index: 3;
}

.cert-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(8px);
}

.cert-glow-one {
  width: 360px;
  height: 360px;
  left: -190px;
  top: 90px;
  background: rgba(231, 53, 139, 0.12);
}

.cert-glow-two {
  width: 430px;
  height: 430px;
  right: -230px;
  top: 130px;
  background: rgba(123, 63, 242, 0.11);
}

.cert-glow-three {
  width: 280px;
  height: 280px;
  left: 46%;
  bottom: -160px;
  background: rgba(255, 199, 226, 0.36);
}

/* Main Wrapper */
.certification-wrap {
  position: relative;
  padding: 36px;
  border-radius: 44px;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 36px;
  background:
    radial-gradient(circle at 18% 15%, rgba(231, 53, 139, 0.10), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(123, 63, 242, 0.10), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 251, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 34px 90px rgba(231, 53, 139, 0.13),
    0 18px 52px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.certification-wrap::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 34px;
  border: 1px dashed rgba(231, 53, 139, 0.16);
  pointer-events: none;
}

.certification-wrap::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -130px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.10);
  pointer-events: none;
}

/* Left Content */
.certification-content {
  position: relative;
  z-index: 4;
}

.cert-section-kicker {
  width: fit-content;
  min-height: 40px;
  margin-bottom: 14px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cert-pink-dark);
  font-size: 12.8px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow:
    0 14px 32px rgba(231, 53, 139, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cert-section-kicker span {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cert-pink), var(--cert-purple));
  box-shadow: 0 10px 20px rgba(231, 53, 139, 0.24);
}

.cert-main-title {
  max-width: 520px;
  margin: 0 0 16px;
  color: var(--cert-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.cert-main-text {
  max-width: 500px;
  margin: 0 0 28px;
  color: var(--cert-muted);
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 650;
}

.cert-btn {
  min-height: 52px;
  padding: 0 25px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--cert-pink), var(--cert-purple), var(--cert-blue));
  box-shadow:
    0 18px 40px rgba(231, 53, 139, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-btn i {
  font-size: 22px;
  transition: transform 0.3s ease;
}

.cert-btn:hover {
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow:
    0 26px 56px rgba(231, 53, 139, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.cert-btn:hover i {
  transform: translateX(4px);
}

/* Certificate Grid */
.certification-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cert-card {
  position: relative;
  min-height: 172px;
  padding: 22px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 16%, rgba(231, 53, 139, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    0 20px 52px rgba(15, 23, 42, 0.075),
    0 12px 32px rgba(231, 53, 139, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.cert-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), transparent 44%),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.96), transparent 34%);
}

.cert-card::after {
  content: "";
  position: absolute;
  width: 128px;
  height: 128px;
  right: -66px;
  bottom: -68px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.09);
  pointer-events: none;
  transition: transform 0.35s ease;
}

.cert-card:hover {
  transform: translateY(-8px);
  border-color: rgba(231, 53, 139, 0.22);
  box-shadow:
    0 32px 76px rgba(231, 53, 139, 0.15),
    0 18px 44px rgba(67, 109, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.cert-card:hover::after {
  transform: scale(1.18);
}

.cert-icon-wrap {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, #ffffff, #fff3f8);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.cert-icon-wrap img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.cert-card-body {
  position: relative;
  z-index: 3;
}

.cert-card-body h3 {
  margin: 0 0 6px;
  color: var(--cert-dark);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 950;
}

.cert-card-body p {
  margin: 0;
  color: var(--cert-muted);
  font-size: 13.2px;
  line-height: 1.45;
  font-weight: 650;
}

.cert-card-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cert-green);
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.16);
  font-size: 17px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .certification-premium {
    padding: 72px 0;
  }

  .certification-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .cert-section-kicker,
  .cert-main-title,
  .cert-main-text {
    margin-left: auto;
    margin-right: auto;
  }

  .certification-grid {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .certification-premium {
    padding: 56px 0;
  }

  .certification-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .certification-wrap {
    padding: 24px;
    border-radius: 32px;
  }

  .certification-wrap::before {
    inset: 14px;
    border-radius: 24px;
  }

  .cert-main-title {
    font-size: clamp(2.1rem, 7.5vw, 3rem);
  }

  .cert-main-text {
    font-size: 14.4px;
    line-height: 1.62;
  }

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

  .cert-card {
    min-height: auto;
    padding: 18px;
    border-radius: 24px;
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 15px;
  }

  .cert-icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 0;
    border-radius: 21px;
  }

  .cert-icon-wrap img {
    width: 42px;
    height: 42px;
  }

  .cert-card-mark {
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .cert-card-body {
    padding-right: 32px;
  }
}

@media (max-width: 575.98px) {
  .certification-premium {
    padding: 46px 0;
  }

  .certification-premium .container {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    padding-left: 0;
    padding-right: 0;
  }

  .certification-wrap {
    padding: 18px;
    border-radius: 28px;
  }

  .certification-content {
    text-align: left;
  }

  .cert-section-kicker,
  .cert-main-title,
  .cert-main-text {
    margin-left: 0;
    margin-right: 0;
  }

  .cert-section-kicker {
    min-height: 36px;
    font-size: 11.5px;
  }

  .cert-section-kicker span {
    width: 23px;
    height: 23px;
    font-size: 11px;
  }

  .cert-main-title {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.08;
  }

  .cert-main-text {
    font-size: 13.7px;
    margin-bottom: 22px;
  }

  .cert-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    font-size: 13.5px;
  }

  .cert-card {
    padding: 15px;
    border-radius: 21px;
    grid-template-columns: 56px 1fr;
    gap: 12px;
  }

  .cert-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .cert-icon-wrap img {
    width: 36px;
    height: 36px;
  }

  .cert-card-body h3 {
    font-size: 16.5px;
  }

  .cert-card-body p {
    font-size: 12px;
  }

  .cert-card-mark {
    width: 27px;
    height: 27px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .cert-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .cert-card-body {
    padding-right: 30px;
  }
}

/* ===================== FLYDAYZ CERTIFICATION ULTRA PREMIUM END ===================== */


/* ===================== REVIEWS ULTRA PREMIUM SECTION ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #436dff;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
}

/* SECTION */
.reviews-premium {
  position: relative;
  padding: 84px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 8%, rgba(231, 53, 139, 0.11), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(123, 63, 242, 0.11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 50%, #ffffff 100%);
}

.reviews-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.review-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(7px);
}

.review-glow-one {
  width: 340px;
  height: 340px;
  left: -180px;
  top: 130px;
  background: rgba(231, 53, 139, 0.11);
}

.review-glow-two {
  width: 420px;
  height: 420px;
  right: -230px;
  top: 120px;
  background: rgba(123, 63, 242, 0.10);
}

.review-glow-three {
  width: 260px;
  height: 260px;
  left: 46%;
  bottom: -155px;
  background: rgba(255, 199, 226, 0.34);
}

.reviews-premium .container {
  position: relative;
  z-index: 2;
}

/* HEADER */
.reviews-header {
  position: relative;
  margin-bottom: 22px;
  padding: 24px 28px;
  border-radius: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 250, 0.78));
  border: 1px solid rgba(231, 53, 139, 0.11);
  box-shadow:
    0 22px 58px rgba(231, 53, 139, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.reviews-header::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: 90px;
  top: -130px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.reviews-header::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -88px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.11);
}

.reviews-heading,
.reviews-controls {
  position: relative;
  z-index: 2;
}

/* KICKER */
.reviews-kicker {
  width: fit-content;
  min-height: 38px;
  margin-bottom: 10px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 26px rgba(231, 53, 139, 0.08);
}

.reviews-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  font-size: 11px;
}

/* TITLE */
.reviews-main-title {
  margin: 0 0 7px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.25rem, 3.3vw, 3.45rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-shadow: 0 10px 24px rgba(231, 53, 139, 0.10);
}

.reviews-main-subtitle {
  max-width: 720px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 750;
}

/* CONTROLS */
.reviews-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.reviews-premium .slider-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  color: var(--fd-pink-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.32s ease;
}

.reviews-premium .slider-btn:hover {
  color: #fff;
  transform: translateY(-4px) scale(1.04);
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 18px 42px rgba(231, 53, 139, 0.26);
}

/* SUMMARY STRIP */
.review-summary-strip {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 251, 0.74));
  border: 1px solid rgba(231, 53, 139, 0.10);
  box-shadow:
    0 18px 46px rgba(231, 53, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.review-summary-card {
  min-height: 70px;
  padding: 12px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(231, 53, 139, 0.09);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
}

.summary-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fd-pink-dark);
  background: rgba(231, 53, 139, 0.10);
}

.review-summary-card strong {
  display: block;
  color: var(--fd-dark);
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 4px;
}

.review-summary-card span {
  display: block;
  color: var(--fd-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}

/* SLIDER */
.review-slider {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 12px 6px 36px;
  scrollbar-width: none;
  cursor: grab;
}

.review-slider::-webkit-scrollbar {
  display: none;
}

.review-slider.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.review-slider.dragging .review-card {
  user-select: none;
  pointer-events: none;
}

/* REVIEW CARD */
.review-card {
  position: relative;
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
  min-height: 310px;
  padding: 24px;
  border-radius: 30px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 251, 0.80));
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 20px 54px rgba(15, 23, 42, 0.08),
    0 14px 34px rgba(231, 53, 139, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.36s ease;
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 44%),
    radial-gradient(circle at 18% 10%, rgba(231, 53, 139, 0.10), transparent 38%);
  pointer-events: none;
}

.review-card::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  right: -62px;
  bottom: -62px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.08);
  pointer-events: none;
}

.review-card:hover {
  transform: translateY(-9px);
  border-color: rgba(231, 53, 139, 0.28);
  box-shadow:
    0 32px 78px rgba(231, 53, 139, 0.16),
    0 18px 42px rgba(67, 109, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quote-mark {
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 1;
  color: rgba(231, 53, 139, 0.12);
  font-size: 58px;
  line-height: 1;
}

.review-top,
.review-text,
.review-meta {
  position: relative;
  z-index: 2;
}

.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.review-user {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.review-user-info {
  min-width: 0;
}

.avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 14px 30px rgba(231, 53, 139, 0.22);
}

.review-name {
  color: #111827;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 6px;
}

.verified-icon {
  color: #0d6efd;
  /* Bootstrap Blue */
  font-size: 16px;
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #e7358b;
  font-size: 12px;
  font-weight: 850;
}

.review-designation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.review-designation i {
  color: #e7358b;
  font-size: 12px;
}

.review-designation span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #667085;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 800;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(231, 53, 139, .12);
}

.review-verified i {
  color: #e7358b;
}

.review-stars {
  color: #ffb703;
  font-size: 14px;
  white-space: nowrap;
  line-height: 1;
  padding-top: 4px;
  text-shadow: 0 8px 18px rgba(255, 183, 3, 0.22);
}

.review-text {
  color: #3f4452;
  font-size: 14.7px;
  line-height: 1.72;
  margin-bottom: 22px;
  font-weight: 500;
}

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

.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--fd-pink-dark);
  font-size: 11.5px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(231, 53, 139, 0.12), rgba(123, 63, 242, 0.10));
  border: 1px solid rgba(231, 53, 139, 0.14);
  white-space: nowrap;
}

.review-date {
  color: var(--fd-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* BOTTOM CTA */
.reviews-bottom {
  position: relative;
  margin-top: 4px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 244, 250, 0.78)),
    radial-gradient(circle at 12% 18%, rgba(231, 53, 139, 0.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(123, 63, 242, 0.12), transparent 34%);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 26px 70px rgba(231, 53, 139, 0.13),
    0 14px 36px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.reviews-bottom::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -135px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.reviews-bottom::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -95px;
  bottom: -110px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.09);
}

.reviews-bottom-content,
.reviews-btn-primary {
  position: relative;
  z-index: 2;
}

.reviews-bottom-badge {
  width: fit-content;
  min-height: 32px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-pink-dark);
  font-size: 11.8px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.13);
}

.reviews-bottom-badge i {
  color: var(--fd-pink);
}

.reviews-bottom h3 {
  margin: 0 0 8px;
  color: var(--fd-dark);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.reviews-bottom p {
  max-width: 620px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 13.8px;
  line-height: 1.6;
  font-weight: 600;
}

/* CTA BUTTON */
.reviews-premium .reviews-btn-primary {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 850;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}

.reviews-premium .reviews-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px rgba(231, 53, 139, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .reviews-premium {
    padding: 72px 0;
  }

  .review-card {
    flex: 0 0 calc(50% - 10px);
    min-height: 292px;
  }

  .reviews-main-title {
    font-size: clamp(2.15rem, 3.6vw, 3.1rem);
  }
}

@media (max-width: 991.98px) {
  .reviews-premium {
    padding: 60px 0;
  }

  .reviews-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border-radius: 28px;
  }

  .review-summary-strip {
    grid-template-columns: 1fr;
  }

  .reviews-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews-btn-primary {
    width: fit-content;
  }
}

@media (max-width: 767.98px) {
  .reviews-premium {
    padding: 50px 0;
  }

  .reviews-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .reviews-header {
    margin-bottom: 18px;
    padding: 21px;
  }

  .reviews-main-title {
    font-size: clamp(2.2rem, 7vw, 3rem);
  }

  .reviews-main-subtitle {
    font-size: 14.3px;
  }

  .review-slider {
    gap: 16px;
    padding: 8px 4px 30px;
  }

  .review-card {
    flex: 0 0 78%;
    min-height: auto;
    padding: 22px;
    border-radius: 26px;
  }

  .review-top {
    flex-direction: column;
    gap: 13px;
  }

  .review-stars {
    padding-top: 0;
  }

  .reviews-bottom {
    padding: 24px;
    border-radius: 28px;
  }

  .reviews-bottom h3 {
    font-size: 19px;
  }
}

@media (max-width: 575.98px) {
  .reviews-premium {
    padding: 42px 0;
  }

  .review-top {
    flex-direction: column;
    gap: 14px;
  }

  .review-user {
    width: 100%;
  }

  .review-name {
    font-size: 15px;
  }

  .review-designation {
    gap: 6px;
  }

  .review-designation span {
    font-size: 10.8px;
    padding: 5px 8px;
  }

  .review-stars {
    align-self: flex-start;
  }

  .reviews-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .reviews-kicker span {
    width: 23px;
    height: 23px;
  }

  .reviews-main-title {
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: 1;
  }

  .reviews-main-subtitle {
    font-size: 13.8px;
    line-height: 1.55;
  }

  .reviews-premium .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .review-summary-strip {
    padding: 12px;
    border-radius: 22px;
  }

  .review-summary-card {
    min-height: auto;
    padding: 12px;
    border-radius: 18px;
  }

  .review-slider {
    gap: 14px;
    padding: 6px 3px 26px;
  }

  .review-card {
    flex: 0 0 86%;
    padding: 18px;
    border-radius: 22px;
  }

  .quote-mark {
    right: 16px;
    top: 14px;
    font-size: 46px;
  }

  .avatar {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 17px;
  }

  .review-name {
    font-size: 14.5px;
  }

  .review-text {
    font-size: 13.8px;
    line-height: 1.62;
    margin-bottom: 18px;
  }

  .review-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }

  .reviews-bottom {
    padding: 20px 16px;
    border-radius: 24px;
  }

  .reviews-bottom-badge {
    font-size: 11.2px;
  }

  .reviews-bottom h3 {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  .reviews-bottom p {
    font-size: 12.8px;
  }

  .reviews-premium .reviews-btn-primary {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .reviews-main-title {
    font-size: 2.15rem;
  }

  .review-card {
    flex: 0 0 90%;
    padding: 16px;
  }

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

  .review-chip {
    font-size: 10.8px;
    padding: 5px 9px;
  }
}

/* ===================== REVIEWS ULTRA PREMIUM SECTION END ===================== */
/* ===================== FAQ ULTRA PREMIUM SECTION ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #436dff;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
}

/* SECTION */
.faq-premium {
  position: relative;
  padding: 84px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 8%, rgba(231, 53, 139, 0.11), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(123, 63, 242, 0.11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 50%, #ffffff 100%);
}

.faq-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.faq-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(7px);
}

.faq-glow-one {
  width: 340px;
  height: 340px;
  left: -180px;
  top: 130px;
  background: rgba(231, 53, 139, 0.11);
}

.faq-glow-two {
  width: 420px;
  height: 420px;
  right: -230px;
  top: 120px;
  background: rgba(123, 63, 242, 0.10);
}

.faq-glow-three {
  width: 260px;
  height: 260px;
  left: 46%;
  bottom: -155px;
  background: rgba(255, 199, 226, 0.34);
}

.faq-premium .container {
  position: relative;
  z-index: 2;
}

/* HEADER */
.faq-section-header {
  max-width: 760px;
  margin: 0 auto 34px;
}

.faq-section-kicker {
  width: fit-content;
  min-height: 38px;
  margin: 0 auto 12px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 26px rgba(231, 53, 139, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faq-section-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  font-size: 11px;
}

/* TITLE */
.faq-main-title {
  position: relative;
  width: fit-content;
  margin: 0 auto 14px;
  padding-bottom: 14px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-shadow: 0 10px 24px rgba(231, 53, 139, 0.10);
}

.faq-main-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--fd-pink), var(--fd-purple), var(--fd-blue));
  box-shadow: 0 10px 22px rgba(231, 53, 139, 0.20);
}

.faq-main-subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: var(--fd-muted);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 750;
}

/* HELP CARD */
.faq-help-card {
  position: relative;
  margin-bottom: 22px;
  padding: 24px 26px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 244, 250, 0.78)),
    radial-gradient(circle at 10% 10%, rgba(231, 53, 139, 0.12), transparent 32%),
    radial-gradient(circle at 90% 85%, rgba(123, 63, 242, 0.10), transparent 32%);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 24px 64px rgba(231, 53, 139, 0.12),
    0 12px 34px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.faq-help-card::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -115px;
  top: -130px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.faq-help-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  left: -90px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.09);
}

.faq-help-left,
.faq-help-card .btn {
  position: relative;
  z-index: 2;
}

.faq-help-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-help-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 15px 34px rgba(231, 53, 139, 0.24);
}

.faq-help-left h3 {
  margin: 0 0 6px;
  color: var(--fd-dark);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.faq-help-left p {
  max-width: 660px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 13.6px;
  line-height: 1.58;
  font-weight: 600;
}

/* ACCORDION */
.faq-accordion {
  position: relative;
  z-index: 3;
  padding: 12px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 251, 0.78));
  border: 1px solid rgba(231, 53, 139, 0.11);
  box-shadow:
    0 24px 64px rgba(231, 53, 139, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.faq-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-question {
  position: relative;
  min-height: 76px;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 24px !important;
  color: var(--fd-dark);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

.faq-question:not(.collapsed) {
  color: var(--fd-pink-dark);
  background:
    linear-gradient(135deg, rgba(231, 53, 139, 0.105), rgba(123, 63, 242, 0.075)) !important;
}

.faq-question:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.faq-question::after {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background-color: #fff;
  background-position: center;
  background-size: 15px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.faq-ic {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 15px 34px rgba(231, 53, 139, 0.24);
}

.faq-question-text {
  flex: 1;
}

.faq-answer {
  position: relative;
  padding: 0 24px 22px 82px;
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.55);
}

.faq-answer p {
  margin: 0;
}

.faq-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.faq-list li {
  margin-bottom: 7px;
}

.faq-list li::marker {
  color: var(--fd-pink);
}

.faq-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* BOTTOM CARD */
.faq-bottom-card {
  position: relative;
  margin-top: 26px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 244, 250, 0.78)),
    radial-gradient(circle at 12% 18%, rgba(231, 53, 139, 0.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(123, 63, 242, 0.12), transparent 34%);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 26px 70px rgba(231, 53, 139, 0.13),
    0 14px 36px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.faq-bottom-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -135px;
  border-radius: 50%;
  background: rgba(231, 53, 139, 0.09);
}

.faq-bottom-card::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -95px;
  bottom: -110px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.09);
}

.faq-bottom-content,
.faq-bottom-card .btn {
  position: relative;
  z-index: 2;
}

.faq-bottom-badge {
  width: fit-content;
  min-height: 32px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-pink-dark);
  font-size: 11.8px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.13);
}

.faq-bottom-badge i {
  color: var(--fd-pink);
}

.faq-bottom-card h3 {
  margin: 0 0 8px;
  color: var(--fd-dark);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.faq-bottom-card p {
  max-width: 620px;
  margin: 0;
  color: var(--fd-muted);
  font-size: 13.8px;
  line-height: 1.6;
  font-weight: 600;
}

/* BUTTONS */
.faq-premium .faq-btn-primary,
.faq-premium .faq-btn-secondary {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 850;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.faq-premium .faq-btn-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.faq-premium .faq-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px rgba(231, 53, 139, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.faq-premium .faq-btn-secondary {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(24, 28, 43, 0.10);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.faq-premium .faq-btn-secondary:hover {
  color: #fff !important;
  border-color: #25d366;
  background: #25d366;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(37, 211, 102, 0.25);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faq-premium {
    padding: 72px 0;
  }
}

@media (max-width: 991.98px) {
  .faq-premium {
    padding: 60px 0;
  }

  .faq-help-card,
  .faq-bottom-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-help-card .btn,
  .faq-bottom-card .btn {
    width: fit-content;
  }
}

@media (max-width: 767.98px) {
  .faq-premium {
    padding: 50px 0;
  }

  .faq-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .faq-section-header {
    margin-bottom: 28px;
  }

  .faq-main-title {
    font-size: clamp(2.25rem, 7vw, 3.05rem);
  }

  .faq-main-subtitle {
    font-size: 14.6px;
    line-height: 1.64;
  }

  .faq-help-card {
    padding: 22px;
    border-radius: 28px;
  }

  .faq-help-left {
    align-items: flex-start;
  }

  .faq-help-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 18px;
    font-size: 20px;
  }

  .faq-accordion {
    padding: 10px;
    border-radius: 28px;
  }

  .faq-item {
    border-radius: 22px !important;
  }

  .faq-question {
    min-height: 68px;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 22px !important;
    font-size: 14.5px;
  }

  .faq-ic {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 16px;
    font-size: 18px;
  }

  .faq-question::after {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    background-size: 14px;
  }

  .faq-answer {
    padding: 0 18px 20px 70px;
    font-size: 14px;
  }

  .faq-bottom-card {
    padding: 24px;
    border-radius: 28px;
  }

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

@media (max-width: 575.98px) {
  .faq-premium {
    padding: 42px 0;
  }

  .faq-section-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .faq-section-kicker span {
    width: 23px;
    height: 23px;
  }

  .faq-main-title {
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: 1;
  }

  .faq-main-title::after {
    width: 76px;
    height: 4px;
  }

  .faq-main-subtitle {
    font-size: 13.8px;
    line-height: 1.58;
  }

  .faq-help-card {
    padding: 18px 16px;
    border-radius: 24px;
  }

  .faq-help-left {
    flex-direction: column;
    gap: 12px;
  }

  .faq-help-left h3 {
    font-size: 16px;
  }

  .faq-help-left p {
    font-size: 12.8px;
  }

  .faq-help-card .btn {
    width: 100%;
  }

  .faq-accordion {
    padding: 8px;
    border-radius: 24px;
  }

  .faq-item {
    margin-bottom: 9px;
    border-radius: 19px !important;
  }

  .faq-question {
    min-height: auto;
    gap: 10px;
    padding: 12px;
    border-radius: 19px !important;
    font-size: 13.4px;
  }

  .faq-ic {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 14px;
    font-size: 16px;
  }

  .faq-question::after {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    background-size: 13px;
  }

  .faq-answer {
    padding: 0 14px 17px 60px;
    font-size: 13.4px;
    line-height: 1.64;
  }

  .faq-answer-actions {
    flex-direction: column;
  }

  .faq-answer-actions .btn {
    width: 100%;
  }

  .faq-list {
    padding-left: 16px;
  }

  .faq-bottom-card {
    margin-top: 22px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .faq-bottom-badge {
    font-size: 11.2px;
  }

  .faq-bottom-card h3 {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  .faq-bottom-card p {
    font-size: 12.8px;
  }

  .faq-bottom-card .btn {
    width: 100%;
  }

  .faq-premium .faq-btn-primary,
  .faq-premium .faq-btn-secondary {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .faq-main-title {
    font-size: 2.15rem;
  }

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

  .faq-answer {
    padding-left: 56px;
    font-size: 13px;
  }

  .faq-ic {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 15px;
  }

  .faq-question::after {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
}

/* ===================== FAQ ULTRA PREMIUM SECTION END ===================== */

/* ===================== CONTACT & DISTRIBUTORSHIP ULTRA PREMIUM SECTION ===================== */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #436dff;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-soft: #fff3f8;
  --fd-white: #ffffff;
}

/* SECTION */
.contact-premium {
  position: relative;
  padding: 86px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 360px at 8% 8%, rgba(231, 53, 139, 0.11), transparent 62%),
    radial-gradient(780px 420px at 92% 16%, rgba(123, 63, 242, 0.11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff8fc 50%, #ffffff 100%);
}

.contact-premium::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.075);
  background:
    linear-gradient(rgba(231, 53, 139, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 53, 139, 0.024) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.contact-bg-glow {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(7px);
}

.contact-glow-one {
  width: 340px;
  height: 340px;
  left: -180px;
  top: 130px;
  background: rgba(231, 53, 139, 0.11);
}

.contact-glow-two {
  width: 420px;
  height: 420px;
  right: -230px;
  top: 120px;
  background: rgba(123, 63, 242, 0.10);
}

.contact-glow-three {
  width: 260px;
  height: 260px;
  left: 46%;
  bottom: -155px;
  background: rgba(255, 199, 226, 0.34);
}

.contact-premium .container {
  position: relative;
  z-index: 2;
}

/* KICKER */
.contact-section-kicker {
  width: fit-content;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 26px rgba(231, 53, 139, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-section-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  font-size: 11px;
}

/* TITLE */
.contact-main-title {
  max-width: 620px;
  margin: 0 0 14px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.45rem, 4vw, 3.15rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-shadow: 0 10px 24px rgba(231, 53, 139, 0.10);
}

.contact-main-text {
  max-width: 590px;
  margin: 0 0 28px;
  color: var(--fd-muted);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 750;
}

/* BENEFIT GRID */
.contact-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 650px;
  margin-bottom: 28px;
}

.contact-benefit-card {
  position: relative;
  min-height: 92px;
  padding: 16px;
  border-radius: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 251, 0.80));
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.07),
    0 12px 32px rgba(231, 53, 139, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.35s ease;
}

.contact-benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 44%),
    radial-gradient(circle at 18% 10%, rgba(231, 53, 139, 0.10), transparent 38%);
  pointer-events: none;
}

.contact-benefit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(231, 53, 139, 0.26);
  box-shadow:
    0 28px 68px rgba(231, 53, 139, 0.14),
    0 16px 38px rgba(67, 109, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.contact-benefit-card i {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fd-pink-dark);
  font-size: 17px;
  background: rgba(231, 53, 139, 0.10);
}

.contact-benefit-card div {
  position: relative;
  z-index: 2;
}

.contact-benefit-card strong {
  display: block;
  color: var(--fd-dark);
  font-size: 13.6px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact-benefit-card span {
  display: block;
  color: var(--fd-muted);
  font-size: 12.3px;
  line-height: 1.38;
  font-weight: 600;
}

/* LEFT ACTIONS */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* RIGHT BUSINESS CARD */
.contact-business-card {
  position: relative;
  max-width: 560px;
  margin-left: auto;
  padding: 28px;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 245, 250, 0.74)),
    radial-gradient(circle at 28% 20%, rgba(231, 53, 139, 0.14), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(123, 63, 242, 0.13), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 34px 92px rgba(231, 53, 139, 0.15),
    0 18px 52px rgba(15, 23, 42, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.contact-business-card::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 32px;
  border: 1px dashed rgba(231, 53, 139, 0.18);
  pointer-events: none;
}

.contact-business-card::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -125px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.10);
  pointer-events: none;
}

.contact-card-header,
.contact-number-box,
.contact-card-pills,
.contact-card-actions {
  position: relative;
  z-index: 2;
}

/* CARD HEADER */
.contact-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.contact-card-label {
  color: var(--fd-pink-dark);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 5px;
  margin-top: 12px;
  margin-left: 10px;
}

.contact-card-header h3 {
  margin: 0;
  color: var(--fd-dark);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.contact-card-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow: 0 15px 34px rgba(231, 53, 139, 0.24);
}

/* NUMBER BOX */
.contact-number-box {
  padding: 34px 24px;
  margin-bottom: 18px;
  border-radius: 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.number-label {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 7px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(231, 53, 139, 0.08);
  border: 1px solid rgba(231, 53, 139, 0.12);
}

.contact-number {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  color: transparent;
  text-decoration: none;
  font-size: clamp(2.1rem, 4vw, 3.45rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 950;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple), var(--fd-blue));
  -webkit-background-clip: text;
  background-clip: text;
}

.contact-number:hover {
  color: transparent;
}

.contact-number-box p {
  max-width: 390px;
  margin: 0 auto;
  color: var(--fd-muted);
  font-size: 13.2px;
  line-height: 1.55;
  font-weight: 600;
}

/* PILLS */
.contact-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}

.contact-card-pills span {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fd-dark);
  font-size: 12.2px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.11);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.contact-card-pills i {
  color: var(--fd-pink);
}

/* CARD ACTIONS */
.contact-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* BUTTONS */
.contact-premium .contact-btn-primary,
.contact-premium .contact-btn-secondary,
.contact-premium .contact-btn-whatsapp {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13.8px;
  font-weight: 850;
  transition: all 0.3s ease;
}

.contact-premium .contact-btn-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple));
  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.contact-premium .contact-btn-primary:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow:
    0 22px 46px rgba(231, 53, 139, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.contact-premium .contact-btn-secondary {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(24, 28, 43, 0.10);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.contact-premium .contact-btn-secondary:hover,
.contact-premium .contact-btn-whatsapp:hover {
  color: #fff !important;
  border-color: #25d366;
  background: #25d366;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(37, 211, 102, 0.25);
}

.contact-premium .contact-btn-whatsapp {
  color: #25d366 !important;
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.26);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.10);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .contact-premium {
    padding: 74px 0;
  }

  .contact-main-title {
    font-size: clamp(2.35rem, 3.8vw, 3.6rem);
  }

  .contact-business-card {
    max-width: 540px;
  }
}

@media (max-width: 991.98px) {
  .contact-premium {
    padding: 62px 0;
    text-align: center;
  }

  .contact-section-kicker,
  .contact-main-title,
  .contact-main-text {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-benefit-grid {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .contact-actions {
    justify-content: center;
  }

  .contact-business-card {
    margin: 20px auto 0;
  }
}

@media (max-width: 767.98px) {
  .contact-premium {
    padding: 50px 0;
  }

  .contact-premium::before {
    inset: 10px;
    border-radius: 30px;
  }

  .contact-main-title {
    font-size: clamp(2.25rem, 7vw, 3.05rem);
  }

  .contact-main-text {
    font-size: 14.6px;
    line-height: 1.64;
  }

  .contact-benefit-grid {
    grid-template-columns: 1fr;
  }

  .contact-business-card {
    padding: 24px;
    border-radius: 32px;
  }

  .contact-business-card::before {
    inset: 14px;
    border-radius: 24px;
  }

  .contact-card-header h3 {
    font-size: 21px;
  }

  .contact-number-box {
    padding: 28px 18px;
    border-radius: 24px;
  }
}

@media (max-width: 575.98px) {
  .contact-premium {
    padding: 42px 0;
  }

  .contact-section-kicker {
    min-height: 35px;
    font-size: 11.6px;
    margin-bottom: 10px;
  }

  .contact-section-kicker span {
    width: 23px;
    height: 23px;
  }

  .contact-main-title {
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: 1;
  }

  .contact-main-text {
    font-size: 13.8px;
    line-height: 1.58;
    margin-bottom: 22px;
  }

  .contact-benefit-card {
    min-height: auto;
    padding: 14px;
    border-radius: 19px;
  }

  .contact-actions {
    gap: 10px;
  }

  .contact-actions .btn {
    width: 100%;
  }

  .contact-business-card {
    padding: 18px;
    border-radius: 28px;
  }

  .contact-card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .contact-card-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 17px;
    font-size: 20px;
  }

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

  .contact-number-box {
    padding: 24px 14px;
    border-radius: 22px;
  }

  .number-label {
    font-size: 11.5px;
  }

  .contact-number {
    font-size: clamp(2rem, 12vw, 2.55rem);
  }

  .contact-number-box p {
    font-size: 12.6px;
  }

  .contact-card-pills {
    justify-content: center;
  }

  .contact-card-pills span {
    width: 100%;
    justify-content: center;
  }

  .contact-premium .contact-btn-primary,
  .contact-premium .contact-btn-secondary,
  .contact-premium .contact-btn-whatsapp {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .contact-main-title {
    font-size: 2.15rem;
  }

  .contact-benefit-card {
    align-items: flex-start;
  }

  .contact-business-card {
    padding: 15px;
  }

  .contact-number {
    font-size: 1.85rem;
  }
}


/* =========================================================
   CONTACT CALL IMAGE
========================================================= */

.contact-call-img {
  display: block;
  width: auto;
  max-width: 112px;
  height: 58px;
  object-fit: contain;
  margin: 0 auto;
}


/* =========================================================
   CONTACT CALLING HOURS CARD
========================================================= */

.contact-timing-card {
  position: relative;
  z-index: 2;

  margin-bottom: 18px;
  padding: 18px;

  overflow: hidden;
  border-radius: 26px;

  background:
    radial-gradient(circle at 8% 8%,
      rgba(231, 53, 139, 0.11),
      transparent 38%),
    radial-gradient(circle at 94% 92%,
      rgba(67, 109, 255, 0.09),
      transparent 36%),
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 248, 252, 0.82));

  border: 1px solid rgba(231, 53, 139, 0.12);

  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.contact-timing-card::before {
  content: "";

  position: absolute;
  top: -70px;
  right: -65px;

  width: 155px;
  height: 155px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      rgba(231, 53, 139, 0.1),
      rgba(123, 63, 242, 0.08));

  pointer-events: none;
}


/* Header */

.contact-timing-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 15px;
}

.contact-timing-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  border-radius: 16px;

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

  color: #ffffff;
  font-size: 19px;

  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple));

  box-shadow:
    0 14px 30px rgba(231, 53, 139, 0.22);
}

.contact-timing-title {
  min-width: 0;
  flex: 1;
}

.contact-timing-title span {
  display: block;

  margin-bottom: 3px;

  color: var(--fd-pink-dark);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.contact-timing-title h4 {
  margin: 0;

  color: var(--fd-dark);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}


/* Open Daily Badge */

.contact-open-badge {
  min-height: 31px;
  padding: 7px 10px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: #15803d;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 900;

  white-space: nowrap;

  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.contact-open-badge span {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #22c55e;

  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.12);

  animation: contactOpenPulse 1.8s ease-in-out infinite;
}

@keyframes contactOpenPulse {

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

  50% {
    opacity: 0.55;
    transform: scale(0.82);
  }
}


/* Timing Grid */

.contact-timing-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-timing-item {
  min-width: 0;
  padding: 12px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.09);

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

.contact-timing-item:hover {
  transform: translateY(-3px);

  border-color: rgba(231, 53, 139, 0.2);

  box-shadow:
    0 12px 26px rgba(231, 53, 139, 0.09);
}

.timing-item-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;

  border-radius: 13px;

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

  color: var(--fd-pink-dark);
  font-size: 15px;

  background: rgba(231, 53, 139, 0.1);
}

.contact-timing-item span {
  display: block;

  margin-bottom: 4px;

  color: var(--fd-muted);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 750;

  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.contact-timing-item strong {
  display: block;

  color: var(--fd-dark);
  font-size: 11.8px;
  line-height: 1.32;
  font-weight: 900;
}


/* Government Holiday Note */

.contact-holiday-note {
  position: relative;
  z-index: 2;

  min-height: 38px;
  margin-top: 10px;
  padding: 9px 12px;

  border-radius: 15px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #9a6700;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 850;

  text-align: center;

  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.contact-holiday-note i {
  flex: 0 0 auto;

  color: #f59e0b;
  font-size: 13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

  .contact-timing-card {
    padding: 16px;
  }

  .contact-timing-item {
    padding: 10px;
  }

  .contact-timing-item strong {
    font-size: 11px;
  }
}

@media (max-width: 767.98px) {

  .contact-timing-card {
    border-radius: 22px;
  }

  .contact-timing-head,
  .contact-timing-grid {
    text-align: left;
  }
}

@media (max-width: 575.98px) {

  .contact-call-img {
    max-width: 92px;
    height: 48px;
  }

  .contact-timing-card {
    padding: 14px;
    border-radius: 20px;
  }

  .contact-timing-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .contact-timing-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;

    border-radius: 14px;
    font-size: 17px;
  }

  .contact-timing-title h4 {
    font-size: 14px;
  }

  .contact-open-badge {
    width: 100%;
    justify-content: center;
  }

  .contact-timing-grid {
    grid-template-columns: 1fr;
  }

  .contact-timing-item {
    padding: 11px;
    border-radius: 16px;
  }

  .contact-timing-item strong {
    font-size: 11.5px;
  }

  .contact-holiday-note {
    font-size: 10px;
  }
}

@media (max-width: 380px) {

  .contact-timing-head {
    align-items: flex-start;
  }

  .contact-timing-title {
    width: calc(100% - 54px);
  }

  .contact-holiday-note {
    align-items: flex-start;
    text-align: left;
  }
}

/* ===================== CONTACT & DISTRIBUTORSHIP ULTRA PREMIUM END ===================== */




/* ===================== FLOATING WHATSAPP PREMIUM BUTTON ===================== */

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.62), transparent 28%),
    linear-gradient(135deg, #2af176 0%, #25d366 48%, #128c7e 100%);
  border: 1px solid rgba(255, 255, 255, 0.52);
  box-shadow:
    0 22px 52px rgba(37, 211, 102, 0.42),
    0 10px 24px rgba(15, 23, 42, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  transition: all 0.34s ease;
  animation: waSoftFloat 3.4s ease-in-out infinite;
}

/* soft premium ring */
.wa-float::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -2;
  border-radius: inherit;
  background: rgba(37, 211, 102, 0.22);
  animation: waSoftPulse 2s ease-out infinite;
}

/* subtle outer glow */
.wa-float::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.45), rgba(18, 140, 126, 0.24));
  filter: blur(8px);
  opacity: 0.72;
  transition: all 0.34s ease;
}

.wa-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
}

.wa-icon i {
  line-height: 1;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.24));
}

/* tooltip */
.wa-tooltip {
  position: absolute;
  right: 76px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  color: #152033;
  font-size: 13px;
  font-weight: 700;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 255, 246, 0.88));
  border: 1px solid rgba(37, 211, 102, 0.25);
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.wa-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid rgba(37, 211, 102, 0.18);
  border-top: 1px solid rgba(37, 211, 102, 0.18);
}

/* hover */
.wa-float:hover {
  color: #fff !important;
  transform: translateY(-7px) scale(1.05);
  box-shadow:
    0 30px 72px rgba(37, 211, 102, 0.52),
    0 14px 34px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.wa-float:hover::after {
  opacity: 1;
  filter: blur(10px);
}

.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.wa-float:hover .wa-icon i {
  animation: waIconShake 0.45s ease;
}

/* focus accessibility */
.wa-float:focus-visible {
  outline: 4px solid rgba(37, 211, 102, 0.24);
  outline-offset: 5px;
}

/* animations */
@keyframes waSoftFloat {

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

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

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

  70%,
  100% {
    transform: scale(1.38);
    opacity: 0;
  }
}

@keyframes waIconShake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-11deg);
  }

  40% {
    transform: rotate(9deg);
  }

  60% {
    transform: rotate(-6deg);
  }

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

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

  .wa-float,
  .wa-float::before,
  .wa-icon i {
    animation: none !important;
  }

  .wa-float,
  .wa-tooltip {
    transition: none !important;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .wa-float {
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
  }

  .wa-icon {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }

  .wa-tooltip {
    display: none;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .wa-float {
    right: 15px;
    bottom: 15px;
    width: 54px;
    height: 54px;
  }

  .wa-float::before {
    inset: -7px;
  }

  .wa-icon {
    width: 43px;
    height: 43px;
    font-size: 25px;
  }
}

/* Small Mobile */
@media (max-width: 380px) {
  .wa-float {
    right: 13px;
    bottom: 13px;
    width: 50px;
    height: 50px;
  }

  .wa-icon {
    width: 40px;
    height: 40px;
    font-size: 23px;
  }
}

/* ===================== FLOATING WHATSAPP PREMIUM BUTTON END ===================== */

/* ===================== END OF INDEX PREMIUM DESIGN ===================== */







/* ===================== FLOATING WHATSAPP ULTRA PREMIUM CSS END ===================== */

/* ===================== TECHNOLOGY BLOG ULTRA PREMIUM CSS END ===================== */



/* ===================== WHY US ULTRA PREMIUM CSS  ===================== */

/* ===================== ULTRA PREMIUM RESPONSIVE NAVBAR ===================== */

.main-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 11px 0;
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 14px 45px rgba(15, 23, 42, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.main-header .navbar {
  padding: 0;
}

.main-header .container {
  position: relative;
  min-height: 72px;
  padding: 10px 18px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 47, 147, .15), transparent 30%),
    radial-gradient(circle at 95% 100%, rgba(31, 102, 255, .13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 246, 251, .72));
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow:
    0 20px 58px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* Decorative blobs */
.nav-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
  opacity: .34;
  z-index: 0;
}

.nav-blob.blob-1 {
  width: 170px;
  height: 170px;
  left: -78px;
  top: -92px;
  background: rgba(255, 47, 147, .26);
}

.nav-blob.blob-2 {
  width: 180px;
  height: 180px;
  right: -88px;
  bottom: -104px;
  background: rgba(31, 102, 255, .22);
}

/* Brand */
.navbar-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-decoration: none;
}

.logo-text {
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: .92;
  letter-spacing: .01em;
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 18px rgba(255, 47, 147, .16));
}

.logo-sub {
  margin-top: 5px;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: #667085;
  letter-spacing: .01em;
}

/* Navbar links */
#mainNav {
  position: relative;
  z-index: 2;
}

.nav-modern {
  position: relative;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  color: #334155 !important;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 0 !important;
  text-decoration: none;
  transition: .3s ease;
}

.nav-modern::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 18px rgba(255, 47, 147, .25);
  transition: .32s ease;
}

.nav-modern:hover,
.nav-modern.active {
  color: #ff2f93 !important;
  transform: translateY(-2px);
}

.nav-modern:hover::before,
.nav-modern.active::before {
  width: 28px;
}

/* CTA */
.nav-cta {
  position: relative;
  z-index: 2;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  text-decoration: none;
  font-size: 16px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 14px 30px rgba(255, 47, 147, .11),
    inset 0 1px 0 rgba(255, 255, 255, .90);
  backdrop-filter: blur(10px);
  transition: .3s ease;
}

.icon-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 42px rgba(255, 47, 147, .25);
}

.icon-btn.whatsapp {
  color: #25d366;
  border-color: rgba(37, 211, 102, .25);
}

.icon-btn.whatsapp:hover {
  color: #fff;
  background: #25d366;
  box-shadow: 0 20px 42px rgba(37, 211, 102, .25);
}

.btn-cta {
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  color: #fff !important;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .25);
  transition: .3s ease;
  white-space: nowrap;
}

.btn-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .34);
}

/* Toggler */
.navbar-toggler {
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .12) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .main-header .container {
    padding: 9px 14px;
  }

  .logo-text {
    font-size: 38px;
  }

  .logo-sub {
    font-size: 17px;
  }

  .nav-modern {
    font-size: 22px;
  }

  .btn-cta {
    padding: 10px 18px;
    font-size: 21px;
  }

  .icon-btn {
    width: 39px;
    height: 39px;
  }
}

@media (max-width: 991.98px) {
  .main-header {
    padding: 8px 0;
  }

  .main-header .container {
    width: calc(100% - 24px);
    max-width: 100%;
    min-height: auto;
    padding: 10px 14px;
    border-radius: 24px;
    overflow: visible;
  }

  .navbar-brand {
    max-width: 68%;
  }

  .logo-text {
    font-size: 35px;
  }

  .logo-sub {
    font-size: 16px;
  }

  #mainNav.navbar-collapse {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 47, 147, .11), transparent 34%),
      radial-gradient(circle at 100% 100%, rgba(31, 102, 255, .10), transparent 34%),
      rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 47, 147, .14);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .navbar-nav {
    width: 100%;
    gap: 7px !important;
    align-items: stretch !important;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .nav-modern {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px !important;
    border-radius: 16px;
    font-size: 23px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(255, 47, 147, .08);
  }

  .nav-modern::before {
    display: none;
  }

  .nav-modern:hover,
  .nav-modern.active {
    color: #ff2f93 !important;
    transform: none;
    background: linear-gradient(135deg, rgba(255, 47, 147, .12), rgba(31, 102, 255, .10));
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0 !important;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 47, 147, .10);
  }

  .btn-cta {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 22px;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
  }

  .nav-blob.blob-1 {
    width: 125px;
    height: 125px;
    left: -62px;
    top: -66px;
  }

  .nav-blob.blob-2 {
    width: 135px;
    height: 135px;
    right: -70px;
    bottom: -74px;
  }
}

@media (max-width: 575.98px) {
  .main-header {
    padding: 7px 0;
  }

  .main-header .container {
    width: calc(100% - 18px);
    padding: 9px 12px;
    border-radius: 20px;
  }

  .navbar-brand {
    max-width: 70%;
  }

  .logo-text {
    font-size: 32px;
  }

  .logo-sub {
    font-size: 14px;
    margin-top: 3px;
  }

  .navbar-toggler {
    width: 39px;
    height: 39px;
  }

  .navbar-toggler-icon {
    width: 1.12em;
    height: 1.12em;
  }

  #mainNav.navbar-collapse {
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .nav-modern {
    min-height: 42px;
    padding: 9px 12px !important;
    border-radius: 14px;
    font-size: 21px;
  }

  .nav-cta {
    gap: 8px !important;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .btn-cta {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 10px 16px;
    font-size: 21px;
  }
}

@media (max-width: 380px) {
  .logo-text {
    font-size: 29px;
  }

  .logo-sub {
    font-size: 13px;
  }

  .navbar-toggler {
    width: 37px;
    height: 37px;
  }

  .nav-modern {
    font-size: 20px;
  }

  .btn-cta {
    font-size: 20px;
  }
}

/* ===================== ULTRA PREMIUM RESPONSIVE NAVBAR END ===================== */

/* ===================== WHY US HERO ULTRA PREMIUM CSS ===================== */

.why-page-hero {
  position: relative;
  min-height: 100vh;
  padding: 10px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 14%, rgba(255, 47, 147, .18), transparent 62%),
    radial-gradient(780px 430px at 90% 16%, rgba(31, 102, 255, .14), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff5fb 48%, #eef5ff 100%);
}

.why-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(31, 102, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.why-page-bg::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 40px 120px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.why-page-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(15, 23, 42, .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.why-page-hero .container {
  position: relative;
  z-index: 5;
}

/* Decorative Images */
.why-page-decor,
.why-page-pad-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.why-page-blob-1 {
  width: 430px;
  left: -190px;
  top: -135px;
  z-index: 2;
  opacity: .32;
  filter: saturate(1.1);
  animation: whyPageBlobOne 8s ease-in-out infinite alternate;
}

.why-page-blob-2 {
  width: 470px;
  right: -230px;
  bottom: -210px;
  z-index: 2;
  opacity: .30;
  filter: saturate(1.1);
  animation: whyPageBlobTwo 9s ease-in-out infinite alternate;
}

.why-page-cotton-1 {
  width: 110px;
  left: 6%;
  bottom: 13%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(255, 47, 147, .14));
  animation: whyPageCotton 5.8s ease-in-out infinite alternate;
}

.why-page-cotton-2 {
  width: 105px;
  right: 9%;
  top: 15%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(31, 102, 255, .12));
  animation: whyPageCotton 6.4s ease-in-out infinite alternate-reverse;
}

.why-page-pad-bg {
  width: 620px;
  left: 50%;
  top: 52%;
  z-index: 1;
  opacity: .045;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes whyPageBlobOne {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(28px) rotate(5deg) scale(1.04);
  }
}

@keyframes whyPageBlobTwo {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(-24px) rotate(-5deg) scale(1.04);
  }
}

@keyframes whyPageCotton {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(20px) rotate(6deg);
  }
}

/* Badge */
.why-page-hero .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-size: 14px;
  font-weight: 850;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

/* Title Font: Monotype Corsiva */
.why-page-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5.4vw, 6rem);
  line-height: .88;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.headline-accent {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: inherit;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 40px;
}

.headline-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-135%);
  animation: whyHeadlineShine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes whyHeadlineShine {
  0% {
    transform: translateX(-135%);
  }

  45%,
  100% {
    transform: translateX(135%);
  }
}

.why-page-subtitle {
  max-width: 620px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Buttons */
.why-page-hero .btn-brand,
.why-page-hero .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .32s ease;
}

.why-page-hero .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.why-page-hero .btn-brand:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 54px rgba(255, 47, 147, .35);
}

.why-page-hero .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.why-page-hero .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

/* Visual Card */
.why-page-visual {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.why-page-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.why-page-visual::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.why-page-pill-wrap,
.why-page-pack-stage,
.why-page-mini-stats {
  position: relative;
  z-index: 2;
}

.why-page-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.why-page-pill-wrap span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
}

.why-page-pill-wrap i {
  color: #ff2f93;
}

.why-page-pack-stage {
  min-height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-page-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
  z-index: 0;
}

.why-page-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 430px);
  max-height: 390px;
  object-fit: contain;
  border-radius: 28px;
  filter:
    drop-shadow(0 38px 72px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: whyPackFloat 4.2s ease-in-out infinite alternate;
}

.why-page-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 420px);
  opacity: .06;
  border-radius: 34px;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes whyPackFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* Mini Stats */
.why-page-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}

.mini-stat {
  text-align: center;
  padding: 12px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 47, 147, .10);
}

.mini-stat b {
  display: block;
  color: #101322;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.mini-stat span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* Reveal Animation */
.why-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: whyPageReveal .8s ease forwards;
  animation-delay: var(--d, 0s);
}

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-page-hero {
    padding: 105px 0 80px;
  }

  .why-page-title {
    font-size: clamp(2.8rem, 5vw, 5.1rem);
  }

  .why-page-visual {
    min-height: 550px;
  }

  .why-page-pack-stage {
    min-height: 370px;
  }

  .why-page-pack-img {
    width: min(86%, 390px);
  }
}

@media (max-width: 991.98px) {
  .why-page-hero {
    min-height: auto;
    padding: 90px 0 70px;
    text-align: center;
  }

  .why-page-title {
    font-size: clamp(3rem, 9vw, 4.8rem);
    line-height: .9;
  }

  .headline-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .why-page-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.65;
  }

  .why-page-hero .d-flex.flex-wrap.gap-2 {
    justify-content: center;
  }

  .why-page-visual {
    max-width: 680px;
    min-height: auto;
    margin: 8px auto 0;
  }

  .why-page-pack-stage {
    min-height: 350px;
  }

  .why-page-pack-img {
    width: min(82%, 360px);
    max-height: 340px;
  }

  .why-page-blob-1,
  .why-page-blob-2 {
    width: 300px;
  }

  .why-page-cotton-1,
  .why-page-cotton-2 {
    width: 76px;
    opacity: .62;
  }

  .why-page-pad-bg {
    width: 430px;
  }
}

@media (max-width: 575.98px) {
  .why-page-hero {
    padding: 74px 0 52px;
  }

  .why-page-bg::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-page-blob-1,
  .why-page-blob-2,
  .why-page-pad-bg {
    display: none;
  }

  .why-page-cotton-1 {
    width: 58px;
    left: -8px;
    bottom: 16%;
  }

  .why-page-cotton-2 {
    width: 58px;
    right: -8px;
    top: 10%;
  }

  .why-page-hero .badge-chip {
    font-size: 11.5px;
    padding: 7px 12px;
  }

  .why-page-title {
    font-size: clamp(2.8rem, 14vw, 3.55rem);
    line-height: .9;
    margin-bottom: 16px;
  }

  .why-page-subtitle {
    font-size: 14.2px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .why-page-hero .btn-brand,
  .why-page-hero .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .why-page-visual {
    padding: 16px;
    border-radius: 26px;
  }

  .why-page-pill-wrap {
    gap: 8px;
  }

  .why-page-pill-wrap span {
    width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 12px;
  }

  .why-page-pack-stage {
    min-height: 270px;
  }

  .why-page-pack-stage::before {
    width: 250px;
    height: 250px;
  }

  .why-page-pack-img {
    width: min(90%, 250px);
    max-height: 245px;
    border-radius: 22px;
  }

  .why-page-outline-img {
    width: min(90%, 250px);
  }

  .why-page-mini-stats {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px;
    border-radius: 22px;
  }

  .mini-stat {
    padding: 10px 8px;
    border-radius: 16px;
  }

  .mini-stat b {
    font-size: 16px;
  }

  .mini-stat span {
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .why-page-title {
    font-size: 2.65rem;
  }

  .why-page-subtitle {
    font-size: 13.5px;
  }

  .why-page-pack-stage {
    min-height: 245px;
  }

  .why-page-pack-img {
    width: min(92%, 220px);
  }
}

/* ===================== WHY US HERO END ===================== */

/* ===================== WHY REASONS ULTRA PREMIUM CSS ===================== */

.why-page-reasons {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff6fb 50%, #ffffff 100%);
}

.why-page-reasons::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    0 35px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.why-page-reasons::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.why-page-reasons .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.why-reasons-bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.why-reasons-bg-glow.glow-left {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .08));
  animation: whyReasonsGlowFloat 8s ease-in-out infinite alternate;
}

.why-reasons-bg-glow.glow-right {
  width: 430px;
  height: 430px;
  right: -230px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: whyReasonsGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes whyReasonsGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.why-page-reasons .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.why-page-reasons .badge-chip i {
  font-size: 16px;
}

/* Title */
.why-reasons-title {
  position: relative;
  display: inline-block;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.why-reasons-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.brand-grad {
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.why-reasons-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Glass Card */
.why-page-card {
  position: relative;
  height: 100%;
  min-height: 270px;
  padding: 30px 22px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.why-page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.why-page-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.why-page-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.why-page-card:hover::after {
  transform: scaleX(1);
}

.why-page-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.why-page-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.why-page-card:hover .why-page-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Card Text */
.why-page-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 12px;
}

.why-page-card p {
  margin: 0;
  color: #667085;
  font-size: 14.8px;
  line-height: 1.7;
  font-weight: 600;
}

/* Entry Animation */
.why-page-card {
  animation: whyReasonCardUp .75s ease both;
}

.why-page-reasons .col-md-6:nth-child(1) .why-page-card {
  animation-delay: .08s;
}

.why-page-reasons .col-md-6:nth-child(2) .why-page-card {
  animation-delay: .16s;
}

.why-page-reasons .col-md-6:nth-child(3) .why-page-card {
  animation-delay: .24s;
}

.why-page-reasons .col-md-6:nth-child(4) .why-page-card {
  animation-delay: .32s;
}

@keyframes whyReasonCardUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-page-reasons {
    padding: 86px 0;
  }

  .why-page-card {
    min-height: 255px;
    padding: 28px 20px;
  }

  .why-reasons-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .why-page-reasons {
    padding: 74px 0;
  }

  .why-page-card {
    min-height: 240px;
  }

  .why-reasons-bg-glow.glow-left {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .why-reasons-bg-glow.glow-right {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .why-page-reasons {
    padding: 62px 0;
  }

  .why-reasons-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .why-reasons-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .why-page-card {
    min-height: auto;
    padding: 26px 18px;
    border-radius: 28px;
  }

  .why-page-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 1.55rem;
  }

  .why-page-card h5 {
    font-size: 1.65rem;
  }

  .why-page-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .why-page-reasons {
    padding: 48px 0;
  }

  .why-page-reasons::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-page-reasons .text-center {
    margin-bottom: 32px !important;
  }

  .why-page-reasons .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .why-reasons-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .why-reasons-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .why-reasons-subtitle {
    font-size: 14px;
  }

  .why-page-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .why-page-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .why-page-card h5 {
    font-size: 1.52rem;
  }

  .why-page-card p {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .why-reasons-title {
    font-size: 2.35rem;
  }

  .why-page-card h5 {
    font-size: 1.42rem;
  }

  .why-page-card p {
    font-size: 13px;
  }
}

/* ===================== WHY REASONS END ===================== */

/* ===================== QUALITY SECTION ULTRA PREMIUM CSS ===================== */

.why-quality-section {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 480px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(840px 460px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    radial-gradient(720px 420px at 50% 96%, rgba(255, 47, 147, .08), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.why-quality-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.why-quality-section::after {
  content: "";
  position: absolute;
  width: 660px;
  height: 660px;
  right: -310px;
  bottom: -315px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.why-quality-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.quality-bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.quality-glow-1 {
  width: 540px;
  height: 540px;
  left: -275px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: qualityGlowFloat 8s ease-in-out infinite alternate;
}

.quality-glow-2 {
  width: 455px;
  height: 455px;
  right: -235px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: qualityGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes qualityGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(30px) scale(1.05);
  }
}

/* Glass Base */
.why-quality-section .glass {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .13),
    0 22px 70px rgba(31, 102, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Left Visual */
.why-quality-visual {
  position: relative;
  min-height: 560px;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.why-quality-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 90%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
  z-index: 0;
}

.why-quality-visual::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
  z-index: 4;
}

.quality-pad-bg {
  position: absolute;
  width: 88%;
  max-width: 560px;
  opacity: .055;
  filter: blur(.2px);
  transform: rotate(-16deg) scale(1.06);
  z-index: 0;
}

.quality-pack-img {
  position: relative;
  z-index: 2;
  width: 82%;
  max-width: 460px;
  object-fit: contain;
  filter:
    drop-shadow(0 46px 78px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: qualityProductFloat 4.4s ease-in-out infinite alternate;
}

@keyframes qualityProductFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-18px) rotate(1deg);
  }
}

/* Floating Badges */
.quality-badge {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow:
    0 16px 36px rgba(255, 47, 147, .13),
    0 10px 24px rgba(31, 102, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: qualityBadgeFloat 4.5s ease-in-out infinite alternate;
}

.quality-badge i {
  color: #ff2f93;
  font-size: 1rem;
}

.quality-badge-1 {
  left: 30px;
  top: 105px;
}

.quality-badge-2 {
  right: 30px;
  top: 238px;
  animation-delay: .8s;
}

.quality-badge-3 {
  left: 54px;
  bottom: 95px;
  animation-delay: 1.4s;
}

@keyframes qualityBadgeFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-12px);
  }
}

/* Right Content */
.quality-content {
  position: relative;
}

.why-quality-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.why-quality-section .badge-chip i {
  font-size: 16px;
}

.quality-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.quality-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.quality-subtitle {
  max-width: 620px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* Quality List */
.why-quality-list {
  display: grid;
  gap: 18px;
}

.quality-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 18px 52px rgba(255, 47, 147, .08),
    0 12px 36px rgba(31, 102, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: .35s ease;
}

.quality-list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 47, 147, .11), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(31, 102, 255, .08), transparent 34%);
  pointer-events: none;
}

.quality-list-item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .75;
  transform: scaleX(.25);
  transition: .35s ease;
}

.quality-list-item:hover {
  transform: translateX(8px);
  box-shadow:
    0 28px 70px rgba(255, 47, 147, .13),
    0 18px 46px rgba(31, 102, 255, .09);
}

.quality-list-item:hover::after {
  transform: scaleX(1);
}

.quality-list-item>* {
  position: relative;
  z-index: 2;
}

.quality-list-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.35rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .13),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .35s ease;
}

.quality-list-item:hover .quality-list-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: rotate(-5deg) scale(1.04);
}

.quality-list-item h6 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 6px;
}

.quality-list-item p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Entry Animation */
.why-quality-visual,
.quality-content {
  animation: qualityFadeUp .8s ease both;
}

.quality-content {
  animation-delay: .15s;
}

@keyframes qualityFadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-quality-section {
    padding: 92px 0;
  }

  .why-quality-visual {
    min-height: 520px;
  }

  .quality-pack-img {
    max-width: 420px;
  }

  .quality-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .why-quality-section {
    padding: 78px 0;
    text-align: center;
  }

  .why-quality-visual {
    max-width: 680px;
    min-height: 470px;
    margin: 0 auto;
  }

  .quality-pack-img {
    max-width: 360px;
  }

  .quality-title {
    font-size: clamp(3rem, 9vw, 4.4rem);
  }

  .quality-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .quality-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .why-quality-list {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }

  .quality-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .quality-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .why-quality-section {
    padding: 58px 0;
  }

  .why-quality-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-quality-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .quality-title {
    font-size: clamp(2.45rem, 13vw, 3.15rem);
    line-height: .92;
  }

  .quality-subtitle {
    font-size: 14px;
    line-height: 1.58;
  }

  .why-quality-visual {
    min-height: 385px;
    border-radius: 28px;
  }

  .quality-pack-img {
    width: 82%;
    max-width: 280px;
  }

  .quality-pad-bg {
    width: 90%;
  }

  .quality-badge {
    padding: 8px 11px;
    font-size: 11px;
  }

  .quality-badge-1 {
    left: 12px;
    top: 72px;
  }

  .quality-badge-2 {
    right: 12px;
    top: 172px;
  }

  .quality-badge-3 {
    left: 20px;
    bottom: 70px;
  }

  .why-quality-list {
    gap: 14px;
  }

  .quality-list-item {
    gap: 12px;
    padding: 15px;
    border-radius: 22px;
  }

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

  .quality-list-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .quality-list-item h6 {
    font-size: 1.38rem;
  }

  .quality-list-item p {
    font-size: 13.2px;
    line-height: 1.55;
  }
}

@media (max-width: 380px) {
  .quality-title {
    font-size: 2.3rem;
  }

  .why-quality-visual {
    min-height: 350px;
  }

  .quality-pack-img {
    max-width: 240px;
  }

  .quality-badge {
    font-size: 10.5px;
  }

  .quality-list-item {
    padding: 14px;
  }
}

/* ===================== QUALITY SECTION END ===================== */

/* ===================== TRUST SECTION ULTRA PREMIUM CSS ===================== */

.why-trust-section {
  position: relative;
  padding: 105px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 480px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(840px 460px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    radial-gradient(720px 420px at 50% 96%, rgba(255, 47, 147, .08), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.why-trust-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.why-trust-section::after {
  content: "";
  position: absolute;
  width: 660px;
  height: 660px;
  right: -310px;
  bottom: -315px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.why-trust-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.trust-bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.trust-glow-1 {
  width: 540px;
  height: 540px;
  left: -275px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: trustGlowFloat 8s ease-in-out infinite alternate;
}

.trust-glow-2 {
  width: 455px;
  height: 455px;
  right: -235px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: trustGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes trustGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(30px) scale(1.05);
  }
}

/* Badge */
.why-trust-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.why-trust-section .badge-chip i {
  font-size: 16px;
}

/* Title */
.trust-title {
  position: relative;
  display: inline-block;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.trust-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.trust-subtitle {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Glass Cards */
.trust-card {
  position: relative;
  height: 100%;
  min-height: 315px;
  padding: 34px 26px;
  border-radius: 34px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.trust-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.trust-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.trust-card:hover,
.trust-card.active {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 100px rgba(255, 47, 147, .17),
    0 24px 70px rgba(31, 102, 255, .12);
}

.trust-card:hover::after,
.trust-card.active::after {
  transform: scaleX(1);
}

.trust-card.active {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 244, 250, .72));
  border-color: rgba(255, 47, 147, .22);
}

.trust-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.trust-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 2rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.trust-card:hover .trust-icon,
.trust-card.active .trust-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text */
.trust-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.95rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 14px;
}

.trust-card p {
  margin: 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 600;
}

/* Entry Animation */
.trust-card {
  animation: trustCardUp .75s ease both;
}

.why-trust-section .col-lg-4:nth-child(1) .trust-card {
  animation-delay: .08s;
}

.why-trust-section .col-lg-4:nth-child(2) .trust-card {
  animation-delay: .16s;
}

.why-trust-section .col-lg-4:nth-child(3) .trust-card {
  animation-delay: .24s;
}

@keyframes trustCardUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-trust-section {
    padding: 90px 0;
  }

  .trust-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .trust-card {
    min-height: 300px;
    padding: 32px 24px;
  }
}

@media (max-width: 991.98px) {
  .why-trust-section {
    padding: 76px 0;
  }

  .trust-card {
    min-height: auto;
    max-width: 680px;
    margin: 0 auto;
  }

  .trust-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .trust-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .why-trust-section {
    padding: 62px 0;
  }

  .trust-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .trust-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .trust-card {
    padding: 28px 20px;
    border-radius: 28px;
  }

  .trust-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    font-size: 1.65rem;
  }

  .trust-card h5 {
    font-size: 1.7rem;
  }

  .trust-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .why-trust-section {
    padding: 48px 0;
  }

  .why-trust-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-trust-section .text-center {
    margin-bottom: 32px !important;
  }

  .why-trust-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .trust-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .trust-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

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

  .trust-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .trust-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .trust-card h5 {
    font-size: 1.52rem;
  }

  .trust-card p {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .trust-title {
    font-size: 2.25rem;
  }

  .trust-card h5 {
    font-size: 1.42rem;
  }

  .trust-card p {
    font-size: 13px;
  }
}

/* ===================== TRUST SECTION END ===================== */



/* ===================== VALUE STRIP ULTRA PREMIUM CSS ===================== */

.why-value-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .13), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.why-value-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.why-value-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.why-value-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.value-bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.value-glow-1 {
  width: 500px;
  height: 500px;
  left: -260px;
  top: 60px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .08));
  animation: valueGlowFloat 8s ease-in-out infinite alternate;
}

.value-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: valueGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes valueGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Main Glass Strip */
.why-value-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 26px;
  border-radius: 38px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .13),
    0 22px 70px rgba(31, 102, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.why-value-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 47, 147, .14), transparent 34%),
    radial-gradient(circle at 86% 26%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .09), transparent 42%);
  pointer-events: none;
}

.why-value-strip::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

/* Item */
.value-item {
  position: relative;
  z-index: 2;
  min-height: 230px;
  padding: 26px 18px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46));
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow:
    0 18px 52px rgba(255, 47, 147, .08),
    0 12px 36px rgba(31, 102, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  transition: .36s ease;
}

.value-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .12), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .09), transparent 34%);
  pointer-events: none;
}

.value-item::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.26);
  opacity: .78;
  transition: .35s ease;
}

.value-item:hover {
  transform: translateY(-9px);
  border-color: rgba(255, 47, 147, .26);
  box-shadow:
    0 30px 78px rgba(255, 47, 147, .16),
    0 18px 48px rgba(31, 102, 255, .10);
}

.value-item:hover::after {
  transform: scaleX(1);
}

.value-item>* {
  position: relative;
  z-index: 2;
}

/* Number */
.value-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .24),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: .35s ease;
}

.value-item:hover .value-number {
  transform: translateY(-4px) rotate(-5deg) scale(1.04);
  box-shadow: 0 24px 50px rgba(255, 47, 147, .32);
}

/* Text Font */
.value-item h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.82rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 10px;
}

.value-item p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Entry Animation */
.value-item {
  animation: valueItemUp .75s ease both;
}

.value-item:nth-child(1) {
  animation-delay: .08s;
}

.value-item:nth-child(2) {
  animation-delay: .16s;
}

.value-item:nth-child(3) {
  animation-delay: .24s;
}

.value-item:nth-child(4) {
  animation-delay: .32s;
}

@keyframes valueItemUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-value-section {
    padding: 78px 0;
  }

  .why-value-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px;
  }

  .value-item {
    min-height: 210px;
  }
}

@media (max-width: 991.98px) {
  .why-value-section {
    padding: 68px 0;
  }

  .value-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .value-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .why-value-section {
    padding: 58px 0;
  }

  .why-value-strip {
    grid-template-columns: 1fr;
    border-radius: 30px;
    padding: 20px;
  }

  .value-item {
    min-height: auto;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .value-number {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.75rem;
    margin-bottom: 15px;
  }

  .value-item h5 {
    font-size: 1.6rem;
  }

  .value-item p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .why-value-section {
    padding: 46px 0;
  }

  .why-value-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-value-strip {
    padding: 14px;
    gap: 13px;
    border-radius: 24px;
  }

  .why-value-strip::after {
    left: 22px;
    right: 22px;
    height: 4px;
  }

  .value-item {
    padding: 22px 14px;
    border-radius: 20px;
  }

  .value-number {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 1.55rem;
  }

  .value-item h5 {
    font-size: 1.45rem;
  }

  .value-item p {
    font-size: 13.2px;
    line-height: 1.55;
  }
}

@media (max-width: 380px) {
  .value-item h5 {
    font-size: 1.35rem;
  }

  .value-item p {
    font-size: 13px;
  }
}

/* ===================== VALUE STRIP END ===================== */



/* ===================== WHY PAGE CTA ULTRA PREMIUM CSS ===================== */

.why-page-cta-section {
  position: relative;
  padding: 95px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.why-page-cta-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.why-page-cta-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.why-page-cta-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.why-cta-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.why-cta-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: whyCtaGlowFloat 8s ease-in-out infinite alternate;
}

.why-cta-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: whyCtaGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes whyCtaGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* CTA Glass Box */
.why-page-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 44px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: whyCtaFadeUp .8s ease both;
}

.why-page-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.why-page-cta::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.why-page-cta>* {
  position: relative;
  z-index: 2;
}

.why-page-cta-content {
  max-width: 720px;
}

/* Badge */
.why-page-cta-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.why-page-cta-section .badge-chip i {
  font-size: 16px;
}

/* Title Font: Monotype Corsiva */
.why-page-cta-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.why-page-cta-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.why-page-cta-text {
  max-width: 620px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Buttons */
.why-page-cta-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

.why-page-cta-section .btn-brand,
.why-page-cta-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.why-page-cta-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.why-page-cta-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.why-page-cta-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.why-page-cta-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes whyCtaFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .why-page-cta-section {
    padding: 82px 0;
  }

  .why-page-cta {
    padding: 36px;
  }

  .why-page-cta-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .why-page-cta-section {
    padding: 72px 0;
  }

  .why-page-cta {
    flex-direction: column;
    text-align: center;
    padding: 34px 24px;
  }

  .why-page-cta-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .why-page-cta-title::after,
  .why-page-cta-text {
    margin-left: auto;
    margin-right: auto;
  }

  .why-page-cta-actions {
    justify-content: center;
  }

  .why-cta-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .why-cta-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .why-page-cta-section {
    padding: 52px 0;
  }

  .why-page-cta-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .why-page-cta {
    padding: 26px 16px;
    border-radius: 26px;
  }

  .why-page-cta-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .why-page-cta-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .why-page-cta-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .why-page-cta-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .why-page-cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .why-page-cta-section .btn-brand,
  .why-page-cta-section .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .why-page-cta-title {
    font-size: 2.25rem;
  }

  .why-page-cta-text {
    font-size: 13.5px;
  }
}

/* ===================== CTA SECTION END ===================== */




/* ===================== WHY PAGE CSS END ===================== */


/* ===================== REVIEWS PREMIUM CSS ===================== */

/* ===================== ULTRA PREMIUM RESPONSIVE NAVBAR ===================== */
/* ===================== PREMIUM GENZ NAVBAR (FINAL PRO VERSION) ===================== */

/* HEADER */
.main-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 47, 147, 0.10);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(20px);
}

/* CONTAINER */
.main-header .container {
  position: relative;
  min-height: 72px;
  padding: 10px 20px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 47, 147, 0.11), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(31, 102, 255, 0.10), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 251, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/* BLOBS */
.nav-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.35;
}

.nav-blob.blob-1 {
  width: 170px;
  height: 170px;
  left: -80px;
  top: -95px;
  background: rgba(255, 47, 147, 0.24);
}

.nav-blob.blob-2 {
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  background: rgba(31, 102, 255, 0.20);
}

/* LOGO */
.logo-img {
  height: 52px;
  max-width: 170px;
}

/* NAV LINKS */
.nav-modern {
  position: relative;
  color: #334155 !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 0 !important;
  transition: 0.3s;
}

.nav-modern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transition: 0.3s;
}

.nav-modern:hover {
  color: #ff2f93 !important;
}

.nav-modern:hover::after {
  width: 25px;
}

/* CTA */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  background: #fff;
  border: 1px solid rgba(255, 47, 147, 0.2);
  transition: 0.3s;
}

.icon-btn:hover {
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  color: #fff;
}

.icon-btn.whatsapp {
  color: #25d366;
}

.btn-cta {
  padding: 10px 18px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  border: none;
}

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

@media (max-width: 991.98px) {

  .main-header {
    padding: 8px 0;
  }

  .main-header .container {
    border-radius: 18px;
    padding: 10px;
  }

  /* MENU BOX */
  #mainNav {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: fadeSlide 0.4s ease;
  }

  /* NAV LINKS */
  .nav-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 10px !important;
  }

  .nav-modern:hover {
    background: #ffe6f3;
    transform: translateX(5px);
  }

  /* CTA STACK */
  .nav-cta {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .icon-btn {
    width: 100%;
    border-radius: 10px;
  }

  .btn-cta {
    width: 100%;
    text-align: center;
  }

  /* LOGO */
  .logo-img {
    height: 38px;
  }

  /* TOGGLER */
  .navbar-toggler {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe6f3;
  }
}

/* SMALL MOBILE */
@media (max-width: 576px) {

  .logo-img {
    height: 34px;
  }

  .nav-modern {
    font-size: 13px;
  }
}

/* ANIMATION */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* ===================== REVIEWS HERO ULTRA PREMIUM CSS ===================== */

.reviews-page-hero {
  position: relative;
  min-height: 100vh;
  padding: 10px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 14%, rgba(255, 47, 147, .18), transparent 62%),
    radial-gradient(780px 430px at 90% 16%, rgba(31, 102, 255, .14), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff5fb 48%, #eef5ff 100%);
}

.reviews-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(31, 102, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.reviews-page-bg::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 40px 120px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.reviews-page-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(15, 23, 42, .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.reviews-page-hero .container {
  position: relative;
  z-index: 5;
}

/* Decorative Images */
.reviews-page-decor,
.reviews-page-pad-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.reviews-blob-1 {
  width: 430px;
  left: -190px;
  top: -135px;
  z-index: 2;
  opacity: .32;
  filter: saturate(1.1);
  animation: reviewsBlobOne 8s ease-in-out infinite alternate;
}

.reviews-blob-2 {
  width: 470px;
  right: -230px;
  bottom: -210px;
  z-index: 2;
  opacity: .30;
  filter: saturate(1.1);
  animation: reviewsBlobTwo 9s ease-in-out infinite alternate;
}

.reviews-cotton-1 {
  width: 110px;
  left: 6%;
  bottom: 13%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(255, 47, 147, .14));
  animation: reviewsCotton 5.8s ease-in-out infinite alternate;
}

.reviews-cotton-2 {
  width: 105px;
  right: 9%;
  top: 15%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(31, 102, 255, .12));
  animation: reviewsCotton 6.4s ease-in-out infinite alternate-reverse;
}

.reviews-page-pad-bg {
  width: 620px;
  left: 50%;
  top: 52%;
  z-index: 1;
  opacity: .045;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes reviewsBlobOne {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(28px) rotate(5deg) scale(1.04);
  }
}

@keyframes reviewsBlobTwo {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(-24px) rotate(-5deg) scale(1.04);
  }
}

@keyframes reviewsCotton {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(20px) rotate(6deg);
  }
}

/* Badge */
.reviews-page-hero .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.reviews-page-hero .badge-chip i {
  font-size: 16px;
}

/* Title */
.reviews-page-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .88;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.headline-accent {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: inherit;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-135%);
  animation: reviewsHeadlineShine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes reviewsHeadlineShine {
  0% {
    transform: translateX(-135%);
  }

  45%,
  100% {
    transform: translateX(135%);
  }
}

.reviews-page-subtitle {
  max-width: 620px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Buttons */
.reviews-page-hero .btn-brand,
.reviews-page-hero .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .32s ease;
}

.reviews-page-hero .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.reviews-page-hero .btn-brand:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 54px rgba(255, 47, 147, .35);
}

.reviews-page-hero .btn-outline-dark {
  color: #101322;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.reviews-page-hero .btn-outline-dark:hover {
  color: #fff;
  border-color: #ff2f93;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(255, 47, 147, .24);
}

/* Hero Review Card */
.reviews-hero-card {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.reviews-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.reviews-hero-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.reviews-hero-card>* {
  position: relative;
  z-index: 2;
}

/* Rating Top */
.reviews-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}

.reviews-rating-big {
  min-width: 112px;
  min-height: 84px;
  border-radius: 24px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: #fff;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 3.8rem;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 18px 42px rgba(255, 47, 147, .26),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.reviews-rating-big span {
  font-size: 1.4rem;
  margin-left: 4px;
  opacity: .88;
}

.reviews-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffb800;
  font-size: 18px;
  filter: drop-shadow(0 8px 14px rgba(255, 184, 0, .18));
}

.reviews-hero-top .small {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

/* Product Stage */
.reviews-pack-stage {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
  z-index: 0;
}

.reviews-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 420px);
  max-height: 340px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 72px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: reviewsPackFloat 4.2s ease-in-out infinite alternate;
}

.reviews-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 410px);
  opacity: .06;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes reviewsPackFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* Pills */
.reviews-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.reviews-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
}

.reviews-hero-pills i {
  color: #ff2f93;
}

/* Reveal Animation */
.reviews-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: reviewsPageReveal .8s ease forwards;
  animation-delay: var(--d, 0s);
}

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .reviews-page-hero {
    padding: 105px 0 80px;
  }

  .reviews-page-title {
    font-size: clamp(2.8rem, 5vw, 5.1rem);
  }

  .reviews-hero-card {
    min-height: 550px;
  }

  .reviews-pack-stage {
    min-height: 330px;
  }

  .reviews-pack-img {
    width: min(86%, 380px);
  }
}

@media (max-width: 991.98px) {
  .reviews-page-hero {
    min-height: auto;
    padding: 90px 0 70px;
    text-align: center;
  }

  .reviews-page-title {
    font-size: clamp(3rem, 9vw, 4.8rem);
    line-height: .9;
  }

  .headline-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .reviews-page-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.65;
  }

  .reviews-page-hero .d-flex.flex-wrap.gap-2 {
    justify-content: center;
  }

  .reviews-hero-card {
    max-width: 680px;
    min-height: auto;
    margin: 8px auto 0;
  }

  .reviews-pack-stage {
    min-height: 330px;
  }

  .reviews-pack-img {
    width: min(82%, 350px);
    max-height: 320px;
  }

  .reviews-blob-1,
  .reviews-blob-2 {
    width: 300px;
  }

  .reviews-cotton-1,
  .reviews-cotton-2 {
    width: 76px;
    opacity: .62;
  }

  .reviews-page-pad-bg {
    width: 430px;
  }

  .reviews-hero-top {
    justify-content: center;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .reviews-page-hero {
    padding: 74px 0 52px;
  }

  .reviews-page-bg::before {
    inset: 10px;
    border-radius: 28px;
  }

  .reviews-blob-1,
  .reviews-blob-2,
  .reviews-page-pad-bg {
    display: none;
  }

  .reviews-cotton-1 {
    width: 58px;
    left: -8px;
    bottom: 16%;
  }

  .reviews-cotton-2 {
    width: 58px;
    right: -8px;
    top: 10%;
  }

  .reviews-page-hero .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .reviews-page-title {
    font-size: clamp(2.75rem, 14vw, 3.55rem);
    line-height: .9;
    margin-bottom: 16px;
  }

  .reviews-page-subtitle {
    font-size: 14.2px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .reviews-page-hero .btn-brand,
  .reviews-page-hero .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .reviews-hero-card {
    padding: 16px;
    border-radius: 26px;
  }

  .reviews-hero-top {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
  }

  .reviews-rating-big {
    min-width: 96px;
    min-height: 74px;
    border-radius: 20px;
    font-size: 3.1rem;
  }

  .reviews-rating-big span {
    font-size: 1.1rem;
  }

  .reviews-stars {
    justify-content: center;
    font-size: 15px;
  }

  .reviews-pack-stage {
    min-height: 250px;
  }

  .reviews-pack-stage::before {
    width: 235px;
    height: 235px;
  }

  .reviews-pack-img {
    width: min(90%, 245px);
    max-height: 235px;
  }

  .reviews-outline-img {
    width: min(90%, 245px);
  }

  .reviews-hero-pills {
    gap: 8px;
  }

  .reviews-hero-pills span {
    width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .reviews-page-title {
    font-size: 2.6rem;
  }

  .reviews-page-subtitle {
    font-size: 13.5px;
  }

  .reviews-pack-stage {
    min-height: 230px;
  }

  .reviews-pack-img {
    width: min(92%, 215px);
  }

  .reviews-rating-big {
    font-size: 2.8rem;
  }
}

/* ===================== REVIEWS HERO END ===================== */




/* ===================== REVIEW SUMMARY ULTRA PREMIUM CSS ===================== */

.reviews-summary-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.reviews-summary-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.reviews-summary-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.reviews-summary-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.summary-bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.summary-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: summaryGlowFloat 8s ease-in-out infinite alternate;
}

.summary-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: summaryGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes summaryGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Summary Card */
.reviews-summary-card {
  position: relative;
  height: 100%;
  min-height: 235px;
  padding: 30px 20px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.reviews-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.reviews-summary-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.reviews-summary-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.reviews-summary-card:hover::after {
  transform: scaleX(1);
}

.reviews-summary-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.summary-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.85rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.reviews-summary-card:hover .summary-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text Font: Monotype Corsiva */
.reviews-summary-card h3 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 2.55rem;
  line-height: .95;
  font-weight: 500;
  margin-bottom: 10px;
}

.reviews-summary-card p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 650;
}

/* Entry Animation */
.reviews-summary-card {
  animation: reviewSummaryUp .75s ease both;
}

.reviews-summary-section .col-md-6:nth-child(1) .reviews-summary-card {
  animation-delay: .08s;
}

.reviews-summary-section .col-md-6:nth-child(2) .reviews-summary-card {
  animation-delay: .16s;
}

.reviews-summary-section .col-md-6:nth-child(3) .reviews-summary-card {
  animation-delay: .24s;
}

.reviews-summary-section .col-md-6:nth-child(4) .reviews-summary-card {
  animation-delay: .32s;
}

@keyframes reviewSummaryUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .reviews-summary-section {
    padding: 78px 0;
  }

  .reviews-summary-card {
    min-height: 220px;
    padding: 28px 18px;
  }

  .reviews-summary-card h3 {
    font-size: 2.35rem;
  }
}

@media (max-width: 991.98px) {
  .reviews-summary-section {
    padding: 68px 0;
  }

  .summary-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .summary-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .reviews-summary-section {
    padding: 58px 0;
  }

  .reviews-summary-card {
    min-height: auto;
    padding: 26px 18px;
    border-radius: 28px;
  }

  .summary-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 1.55rem;
  }

  .reviews-summary-card h3 {
    font-size: 2.1rem;
  }

  .reviews-summary-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .reviews-summary-section {
    padding: 48px 0;
  }

  .reviews-summary-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .reviews-summary-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .summary-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .reviews-summary-card h3 {
    font-size: 1.9rem;
  }

  .reviews-summary-card p {
    font-size: 13.5px;
    line-height: 1.55;
  }
}

@media (max-width: 380px) {
  .reviews-summary-card h3 {
    font-size: 1.75rem;
  }

  .reviews-summary-card p {
    font-size: 13px;
  }
}

/* ===================== REVIEW SUMMARY END ===================== */


/* ===================== CUSTOMER REVIEWS ULTRA PREMIUM CSS ===================== */

.customer-reviews-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.customer-reviews-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.customer-reviews-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.customer-reviews-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.reviews-customer-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.reviews-customer-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: customerReviewsGlowFloat 8s ease-in-out infinite alternate;
}

.reviews-customer-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: customerReviewsGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes customerReviewsGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.customer-reviews-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.customer-reviews-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.reviews-customer-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.reviews-customer-title .brand-grad {
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reviews-customer-subtitle {
  max-width: 650px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Slider Buttons */
.customer-reviews-section .slider-btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 17px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 16px 36px rgba(255, 47, 147, .13),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  transition: .3s ease;
}

.customer-reviews-section .slider-btn:hover {
  color: #fff;
  transform: translateY(-4px);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 24px 50px rgba(255, 47, 147, .24);
}

/* Slider */
.reviews-page-slider {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 28px;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.reviews-page-slider::-webkit-scrollbar {
  display: none;
}

.reviews-page-slider:active {
  cursor: grabbing;
}

/* Review Card */
.reviews-page-card {
  position: relative;
  flex: 0 0 calc(33.333% - 15px);
  min-height: 315px;
  scroll-snap-align: start;
  padding: 26px;
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.reviews-page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.reviews-page-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.reviews-page-card:hover {
  transform: translateY(-9px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.reviews-page-card:hover::after {
  transform: scaleX(1);
}

.reviews-page-card>* {
  position: relative;
  z-index: 2;
}

/* Card Top */
.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.review-profile {
  display: flex;
  align-items: center;
  gap: 13px;
}

.review-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .22),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.review-profile h6 {
  margin: 0 0 4px;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 500;
}

.review-profile span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667085;
  font-size: 12.2px;
  font-weight: 800;
}

.review-profile span i {
  color: #13b85d;
}

.review-star-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffb800;
  font-size: 14px;
  filter: drop-shadow(0 8px 14px rgba(255, 184, 0, .18));
}

/* Message */
.review-message {
  position: relative;
  margin: 0 0 22px;
  color: #475569;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 600;
}

.review-message::before {
  content: "“";
  position: absolute;
  left: -4px;
  top: -36px;
  z-index: -1;
  color: rgba(255, 47, 147, .12);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 7rem;
  line-height: 1;
}

/* Bottom */
.review-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 47, 147, .10);
}

.review-card-bottom .chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ff2f93;
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 47, 147, .09);
  border: 1px solid rgba(255, 47, 147, .13);
}

.review-card-bottom .muted {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}

.reviews-slider-hint {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .customer-reviews-section {
    padding: 86px 0;
  }

  .reviews-customer-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .reviews-page-card {
    flex-basis: calc(50% - 12px);
  }
}

@media (max-width: 991.98px) {
  .customer-reviews-section {
    padding: 74px 0;
  }

  .reviews-customer-head {
    text-align: center;
    justify-content: center !important;
  }

  .reviews-customer-head>div:first-child {
    width: 100%;
  }

  .reviews-customer-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .reviews-customer-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .reviews-customer-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .customer-reviews-section {
    padding: 62px 0;
  }

  .reviews-page-card {
    flex-basis: 78%;
    padding: 24px 20px;
    border-radius: 28px;
  }

  .reviews-customer-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .reviews-customer-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .review-card-top {
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .customer-reviews-section {
    padding: 48px 0;
  }

  .customer-reviews-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .customer-reviews-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .reviews-customer-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .reviews-customer-subtitle {
    font-size: 14px;
  }

  .customer-reviews-section .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .reviews-page-slider {
    gap: 14px;
    padding: 8px 3px 22px;
  }

  .reviews-page-card {
    flex-basis: 86%;
    min-height: auto;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .review-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 16px;
    font-size: 1.65rem;
  }

  .review-profile h6 {
    font-size: 1.28rem;
  }

  .review-profile span {
    font-size: 11.5px;
  }

  .review-star-row {
    font-size: 13px;
  }

  .review-message {
    font-size: 13.8px;
    line-height: 1.6;
  }

  .review-message::before {
    top: -28px;
    font-size: 5.5rem;
  }

  .review-card-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }

  .review-card-bottom .chip,
  .review-card-bottom .muted {
    font-size: 11.5px;
  }

  .reviews-slider-hint {
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .reviews-customer-title {
    font-size: 2.25rem;
  }

  .reviews-page-card {
    flex-basis: 90%;
  }

  .review-message {
    font-size: 13.2px;
  }
}

/* ===================== CUSTOMER REVIEWS END ===================== */


/* ===================== REVIEW HIGHLIGHTS ULTRA PREMIUM CSS ===================== */

.review-highlights-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.review-highlights-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
  z-index: 1;
}

.review-highlights-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.review-highlights-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.review-highlight-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
}

.review-highlight-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: reviewHighlightGlowFloat 8s ease-in-out infinite alternate;
}

.review-highlight-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: reviewHighlightGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes reviewHighlightGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.review-highlights-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.review-highlights-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.review-highlight-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.review-highlight-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.review-highlight-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Card */
.review-highlight-card {
  position: relative;
  height: 100%;
  min-height: 270px;
  padding: 30px 22px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.review-highlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.review-highlight-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.review-highlight-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.review-highlight-card:hover::after {
  transform: scaleX(1);
}

.review-highlight-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.highlight-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.review-highlight-card:hover .highlight-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text */
.review-highlight-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 12px;
}

.review-highlight-card p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Animation */
.review-highlight-card {
  animation: reviewHighlightUp .75s ease both;
}

.review-highlights-section .col-md-6:nth-child(1) .review-highlight-card {
  animation-delay: .08s;
}

.review-highlights-section .col-md-6:nth-child(2) .review-highlight-card {
  animation-delay: .16s;
}

.review-highlights-section .col-md-6:nth-child(3) .review-highlight-card {
  animation-delay: .24s;
}

.review-highlights-section .col-md-6:nth-child(4) .review-highlight-card {
  animation-delay: .32s;
}

@keyframes reviewHighlightUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .review-highlights-section {
    padding: 86px 0;
  }

  .review-highlight-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .review-highlight-card {
    min-height: 250px;
    padding: 28px 20px;
  }
}

@media (max-width: 991.98px) {
  .review-highlights-section {
    padding: 74px 0;
  }

  .review-highlight-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .review-highlight-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .review-highlights-section {
    padding: 62px 0;
  }

  .review-highlight-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .review-highlight-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .review-highlight-card {
    min-height: auto;
    padding: 26px 18px;
    border-radius: 28px;
  }

  .highlight-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 1.55rem;
  }

  .review-highlight-card h5 {
    font-size: 1.65rem;
  }

  .review-highlight-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .review-highlights-section {
    padding: 48px 0;
  }

  .review-highlights-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .review-highlights-section .text-center {
    margin-bottom: 32px !important;
  }

  .review-highlights-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .review-highlight-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .review-highlight-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .review-highlight-subtitle {
    font-size: 14px;
  }

  .review-highlight-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .highlight-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .review-highlight-card h5 {
    font-size: 1.52rem;
  }

  .review-highlight-card p {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .review-highlight-title {
    font-size: 2.25rem;
  }

  .review-highlight-card h5 {
    font-size: 1.42rem;
  }

  .review-highlight-card p {
    font-size: 13px;
  }
}

/* ===================== REVIEW HIGHLIGHTS END ===================== */





/* ===================== SHARE REVIEW ULTRA PREMIUM CSS ===================== */

.share-review-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.share-review-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.share-review-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.share-review-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.share-review-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.share-review-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: shareReviewGlowFloat 8s ease-in-out infinite alternate;
}

.share-review-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: shareReviewGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes shareReviewGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Main Glass Card */
.share-review-card {
  position: relative;
  padding: 44px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: shareReviewFadeUp .8s ease both;
}

.share-review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.share-review-card::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.share-review-card>* {
  position: relative;
  z-index: 2;
}

/* Badge */
.share-review-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.share-review-section .badge-chip i {
  font-size: 16px;
}

/* Title Font */
.share-review-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.share-review-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.share-review-text {
  max-width: 680px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Points */
.share-review-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-review-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, .07),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
}

.share-review-points i {
  color: #13b85d;
}

/* Action Box */
.share-review-action {
  position: relative;
  padding: 28px;
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .54));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 26px 74px rgba(255, 47, 147, .12),
    0 16px 52px rgba(31, 102, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.share-review-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.share-review-action>* {
  position: relative;
  z-index: 2;
}

.share-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 92px;
  border-radius: 26px;
  color: #ffb800;
  font-size: 26px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 184, 0, .18);
  box-shadow:
    0 16px 38px rgba(255, 184, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  filter: drop-shadow(0 8px 14px rgba(255, 184, 0, .18));
}

/* Buttons */
.share-review-section .btn-brand,
.share-review-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.share-review-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.share-review-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.share-review-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.share-review-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes shareReviewFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .share-review-section {
    padding: 86px 0;
  }

  .share-review-card {
    padding: 38px;
  }

  .share-review-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .share-review-section {
    padding: 74px 0;
    text-align: center;
  }

  .share-review-card {
    padding: 34px 24px;
  }

  .share-review-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .share-review-title::after,
  .share-review-text {
    margin-left: auto;
    margin-right: auto;
  }

  .share-review-points {
    justify-content: center;
  }

  .share-review-action {
    max-width: 560px;
    margin: 0 auto;
  }

  .share-review-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .share-review-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .share-review-section {
    padding: 52px 0;
  }

  .share-review-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .share-review-card {
    padding: 26px 16px;
    border-radius: 26px;
  }

  .share-review-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .share-review-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .share-review-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .share-review-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .share-review-points span {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 9px 12px;
  }

  .share-review-action {
    padding: 18px;
    border-radius: 24px;
  }

  .share-rating {
    min-height: 76px;
    border-radius: 20px;
    font-size: 21px;
    gap: 4px;
  }

  .share-review-section .btn-brand,
  .share-review-section .btn-outline-dark {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .share-review-title {
    font-size: 2.25rem;
  }

  .share-review-text {
    font-size: 13.5px;
  }

  .share-rating {
    font-size: 19px;
  }
}

/* ===================== SHARE REVIEW SECTION END ===================== */


/* ===================== REVIEWS CONTACT CTA ULTRA PREMIUM CSS ===================== */

.reviews-contact-section {
  position: relative;
  padding: 95px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.reviews-contact-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.reviews-contact-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.reviews-contact-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.reviews-contact-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.reviews-contact-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: reviewsContactGlowFloat 8s ease-in-out infinite alternate;
}

.reviews-contact-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: reviewsContactGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes reviewsContactGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Main CTA Card */
.reviews-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 44px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: reviewsContactFadeUp .8s ease both;
}

.reviews-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.reviews-contact-card::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.reviews-contact-card>* {
  position: relative;
  z-index: 2;
}

.reviews-contact-content {
  max-width: 760px;
}

/* Badge */
.reviews-contact-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.reviews-contact-section .badge-chip i {
  font-size: 16px;
}

/* Title */
.reviews-contact-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.reviews-contact-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.reviews-contact-text {
  max-width: 650px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Buttons */
.reviews-contact-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

.reviews-contact-section .btn-brand,
.reviews-contact-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.reviews-contact-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.reviews-contact-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.reviews-contact-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reviews-contact-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes reviewsContactFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .reviews-contact-section {
    padding: 82px 0;
  }

  .reviews-contact-card {
    padding: 38px;
  }

  .reviews-contact-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .reviews-contact-section {
    padding: 72px 0;
  }

  .reviews-contact-card {
    flex-direction: column;
    text-align: center;
    padding: 34px 24px;
  }

  .reviews-contact-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .reviews-contact-title::after,
  .reviews-contact-text {
    margin-left: auto;
    margin-right: auto;
  }

  .reviews-contact-actions {
    justify-content: center;
  }

  .reviews-contact-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .reviews-contact-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .reviews-contact-section {
    padding: 52px 0;
  }

  .reviews-contact-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .reviews-contact-card {
    padding: 26px 16px;
    border-radius: 26px;
  }

  .reviews-contact-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .reviews-contact-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .reviews-contact-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .reviews-contact-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .reviews-contact-actions {
    width: 100%;
    flex-direction: column;
  }

  .reviews-contact-section .btn-brand,
  .reviews-contact-section .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .reviews-contact-title {
    font-size: 2.25rem;
  }

  .reviews-contact-text {
    font-size: 13.5px;
  }
}

/* ===================== CONTACT CTA END ===================== */



/* ===================== REVIEWS SECTION END ===================== */

/* ===================== FAQS SECTION START ===================== */


/* ===================== ULTRA PREMIUM RESPONSIVE NAVBAR ===================== */
/* ===================== PREMIUM GENZ NAVBAR (FINAL PRO VERSION) ===================== */

/* HEADER */
.main-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 47, 147, 0.10);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(20px);
}

/* CONTAINER */
.main-header .container {
  position: relative;
  min-height: 72px;
  padding: 10px 20px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 47, 147, 0.11), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(31, 102, 255, 0.10), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 251, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/* BLOBS */
.nav-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.35;
}

.nav-blob.blob-1 {
  width: 170px;
  height: 170px;
  left: -80px;
  top: -95px;
  background: rgba(255, 47, 147, 0.24);
}

.nav-blob.blob-2 {
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  background: rgba(31, 102, 255, 0.20);
}

/* LOGO */
.logo-img {
  height: 52px;
  max-width: 170px;
}

/* NAV LINKS */
.nav-modern {
  position: relative;
  color: #334155 !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 0 !important;
  transition: 0.3s;
}

.nav-modern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transition: 0.3s;
}

.nav-modern:hover {
  color: #ff2f93 !important;
}

.nav-modern:hover::after {
  width: 25px;
}

/* CTA */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  background: #fff;
  border: 1px solid rgba(255, 47, 147, 0.2);
  transition: 0.3s;
}

.icon-btn:hover {
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  color: #fff;
}

.icon-btn.whatsapp {
  color: #25d366;
}

.btn-cta {
  padding: 10px 18px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  border: none;
}

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

@media (max-width: 991.98px) {

  .main-header {
    padding: 8px 0;
  }

  .main-header .container {
    border-radius: 18px;
    padding: 10px;
  }

  /* MENU BOX */
  #mainNav {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: fadeSlide 0.4s ease;
  }

  /* NAV LINKS */
  .nav-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 10px !important;
  }

  .nav-modern:hover {
    background: #ffe6f3;
    transform: translateX(5px);
  }

  /* CTA STACK */
  .nav-cta {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .icon-btn {
    width: 100%;
    border-radius: 10px;
  }

  .btn-cta {
    width: 100%;
    text-align: center;
  }

  /* LOGO */
  .logo-img {
    height: 38px;
  }

  /* TOGGLER */
  .navbar-toggler {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe6f3;
  }
}

/* SMALL MOBILE */
@media (max-width: 576px) {

  .logo-img {
    height: 34px;
  }

  .nav-modern {
    font-size: 13px;
  }
}

/* ANIMATION */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* ===================== FAQ HERO ULTRA PREMIUM CSS ===================== */

.faqs-page-hero {
  position: relative;
  min-height: 100vh;
  padding: 10px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 14%, rgba(255, 47, 147, .18), transparent 62%),
    radial-gradient(780px 430px at 90% 16%, rgba(31, 102, 255, .14), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff5fb 48%, #eef5ff 100%);
}

.faqs-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(31, 102, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}

.faqs-page-bg::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 40px 120px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.faqs-page-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(15, 23, 42, .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.faqs-page-hero .container {
  position: relative;
  z-index: 5;
}

/* Decorative assets */
.faqs-page-decor,
.faqs-page-pad-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.faqs-blob-1 {
  width: 430px;
  left: -190px;
  top: -135px;
  z-index: 2;
  opacity: .32;
  filter: saturate(1.1);
  animation: faqsBlobOne 8s ease-in-out infinite alternate;
}

.faqs-blob-2 {
  width: 470px;
  right: -230px;
  bottom: -210px;
  z-index: 2;
  opacity: .30;
  filter: saturate(1.1);
  animation: faqsBlobTwo 9s ease-in-out infinite alternate;
}

.faqs-cotton-1 {
  width: 110px;
  left: 6%;
  bottom: 13%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(255, 47, 147, .14));
  animation: faqsCotton 5.8s ease-in-out infinite alternate;
}

.faqs-cotton-2 {
  width: 105px;
  right: 9%;
  top: 15%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(31, 102, 255, .12));
  animation: faqsCotton 6.4s ease-in-out infinite alternate-reverse;
}

.faqs-page-pad-bg {
  width: 620px;
  left: 50%;
  top: 52%;
  z-index: 1;
  opacity: .045;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes faqsBlobOne {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(28px) rotate(5deg) scale(1.04);
  }
}

@keyframes faqsBlobTwo {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(-24px) rotate(-5deg) scale(1.04);
  }
}

@keyframes faqsCotton {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(20px) rotate(6deg);
  }
}

/* Badge */
.faqs-page-hero .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faqs-page-hero .badge-chip i {
  font-size: 16px;
}

/* Title */
.faqs-page-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5.4vw, 6rem);
  line-height: .88;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.headline-accent {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: inherit;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-135%);
  animation: faqsHeadlineShine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes faqsHeadlineShine {
  0% {
    transform: translateX(-135%);
  }

  45%,
  100% {
    transform: translateX(135%);
  }
}

.faqs-page-subtitle {
  max-width: 620px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Buttons */
.faqs-page-hero .btn-brand,
.faqs-page-hero .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .32s ease;
}

.faqs-page-hero .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.faqs-page-hero .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 25px 54px rgba(255, 47, 147, .35);
}

.faqs-page-hero .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faqs-page-hero .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

/* Hero Card */
.faqs-hero-card {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.faqs-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.faqs-hero-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.faqs-hero-card>* {
  position: relative;
  z-index: 2;
}

/* Pills */
.faqs-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.faqs-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faqs-hero-pills i {
  color: #ff2f93;
}

/* Product Stage */
.faqs-pack-stage {
  position: relative;
  min-height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faqs-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
  z-index: 0;
}

.faqs-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 420px);
  max-height: 390px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 72px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: faqsPackFloat 4.2s ease-in-out infinite alternate;
}

.faqs-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 410px);
  opacity: .06;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes faqsPackFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* Help Box */
.faqs-help-box {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.help-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .22),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.faqs-help-box h6 {
  margin: 0 0 4px;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}

.faqs-help-box p {
  margin: 0;
  color: #667085;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 650;
}

/* Reveal Animation */
.faqs-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: faqsPageReveal .8s ease forwards;
  animation-delay: var(--d, 0s);
}

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faqs-page-hero {
    padding: 105px 0 80px;
  }

  .faqs-page-title {
    font-size: clamp(2.8rem, 5vw, 5.1rem);
  }

  .faqs-hero-card {
    min-height: 550px;
  }

  .faqs-pack-stage {
    min-height: 370px;
  }

  .faqs-pack-img {
    width: min(86%, 380px);
  }
}

@media (max-width: 991.98px) {
  .faqs-page-hero {
    min-height: auto;
    padding: 90px 0 70px;
    text-align: center;
  }

  .faqs-page-title {
    font-size: clamp(3rem, 9vw, 4.8rem);
    line-height: .9;
  }

  .headline-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .faqs-page-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.65;
  }

  .faqs-page-hero .d-flex.flex-wrap.gap-2 {
    justify-content: center;
  }

  .faqs-hero-card {
    max-width: 680px;
    min-height: auto;
    margin: 8px auto 0;
  }

  .faqs-pack-stage {
    min-height: 340px;
  }

  .faqs-pack-img {
    width: min(82%, 350px);
    max-height: 320px;
  }

  .faqs-blob-1,
  .faqs-blob-2 {
    width: 300px;
  }

  .faqs-cotton-1,
  .faqs-cotton-2 {
    width: 76px;
    opacity: .62;
  }

  .faqs-page-pad-bg {
    width: 430px;
  }

  .faqs-help-box {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .faqs-page-hero {
    padding: 74px 0 52px;
  }

  .faqs-page-bg::before {
    inset: 10px;
    border-radius: 28px;
  }

  .faqs-blob-1,
  .faqs-blob-2,
  .faqs-page-pad-bg {
    display: none;
  }

  .faqs-cotton-1 {
    width: 58px;
    left: -8px;
    bottom: 16%;
  }

  .faqs-cotton-2 {
    width: 58px;
    right: -8px;
    top: 10%;
  }

  .faqs-page-hero .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .faqs-page-title {
    font-size: clamp(2.75rem, 14vw, 3.55rem);
    line-height: .9;
    margin-bottom: 16px;
  }

  .faqs-page-subtitle {
    font-size: 14.2px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .faqs-page-hero .btn-brand,
  .faqs-page-hero .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .faqs-hero-card {
    padding: 16px;
    border-radius: 26px;
  }

  .faqs-hero-pills {
    gap: 8px;
  }

  .faqs-hero-pills span {
    width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 12px;
  }

  .faqs-pack-stage {
    min-height: 250px;
  }

  .faqs-pack-stage::before {
    width: 235px;
    height: 235px;
  }

  .faqs-pack-img {
    width: min(90%, 245px);
    max-height: 235px;
  }

  .faqs-outline-img {
    width: min(90%, 245px);
  }

  .faqs-help-box {
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border-radius: 20px;
    text-align: left;
  }

  .help-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .faqs-help-box h6 {
    font-size: 1.3rem;
  }

  .faqs-help-box p {
    font-size: 12.5px;
    line-height: 1.45;
  }
}

@media (max-width: 380px) {
  .faqs-page-title {
    font-size: 2.6rem;
  }

  .faqs-page-subtitle {
    font-size: 13.5px;
  }

  .faqs-pack-stage {
    min-height: 230px;
  }

  .faqs-pack-img {
    width: min(92%, 215px);
  }

  .faqs-help-box h6 {
    font-size: 1.2rem;
  }
}

/* ===================== FAQ HERO END ===================== */



/* ===================== FAQ CATEGORY ULTRA PREMIUM CSS ===================== */

.faq-category-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.faq-category-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.faq-category-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.faq-category-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.faq-category-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.faq-category-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: faqCategoryGlowFloat 8s ease-in-out infinite alternate;
}

.faq-category-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: faqCategoryGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes faqCategoryGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.faq-category-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faq-category-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.faq-category-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.faq-category-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.brand-grad {
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq-category-subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Card */
.faq-category-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 270px;
  padding: 30px 22px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.faq-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.faq-category-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.faq-category-card:hover {
  color: inherit;
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.faq-category-card:hover::after {
  transform: scaleX(1);
}

.faq-category-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.faq-category-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.faq-category-card:hover .faq-category-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text */
.faq-category-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 12px;
}

.faq-category-card p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Animation */
.faq-category-card {
  animation: faqCategoryUp .75s ease both;
}

.faq-category-section .col-md-6:nth-child(1) .faq-category-card {
  animation-delay: .08s;
}

.faq-category-section .col-md-6:nth-child(2) .faq-category-card {
  animation-delay: .16s;
}

.faq-category-section .col-md-6:nth-child(3) .faq-category-card {
  animation-delay: .24s;
}

.faq-category-section .col-md-6:nth-child(4) .faq-category-card {
  animation-delay: .32s;
}

@keyframes faqCategoryUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faq-category-section {
    padding: 86px 0;
  }

  .faq-category-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .faq-category-card {
    min-height: 250px;
    padding: 28px 20px;
  }
}

@media (max-width: 991.98px) {
  .faq-category-section {
    padding: 74px 0;
  }

  .faq-category-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .faq-category-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .faq-category-section {
    padding: 62px 0;
  }

  .faq-category-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .faq-category-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .faq-category-card {
    min-height: auto;
    padding: 26px 18px;
    border-radius: 28px;
  }

  .faq-category-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 1.55rem;
  }

  .faq-category-card h5 {
    font-size: 1.65rem;
  }

  .faq-category-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .faq-category-section {
    padding: 48px 0;
  }

  .faq-category-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .faq-category-section .text-center {
    margin-bottom: 32px !important;
  }

  .faq-category-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .faq-category-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .faq-category-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .faq-category-subtitle {
    font-size: 14px;
  }

  .faq-category-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .faq-category-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .faq-category-card h5 {
    font-size: 1.52rem;
  }

  .faq-category-card p {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .faq-category-title {
    font-size: 2.25rem;
  }

  .faq-category-card h5 {
    font-size: 1.42rem;
  }

  .faq-category-card p {
    font-size: 13px;
  }
}

/* ===================== FAQ CATEGORY CARDS END ==================== */




/* ===================== MAIN FAQ ACCORDION ULTRA PREMIUM CSS ===================== */

.faqs-main-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.faqs-main-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.faqs-main-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.faqs-main-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.faqs-main-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.faqs-main-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: faqsMainGlowFloat 8s ease-in-out infinite alternate;
}

.faqs-main-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: faqsMainGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes faqsMainGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.faqs-main-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faqs-main-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.faqs-main-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.faqs-main-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.faqs-main-subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Search */
.faq-search-card {
  position: relative;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 22px 68px rgba(255, 47, 147, .10),
    0 14px 42px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.faq-search-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 47, 147, .10), transparent 38%),
    radial-gradient(circle at 90% 70%, rgba(31, 102, 255, .08), transparent 36%);
  pointer-events: none;
}

.faq-search-card>* {
  position: relative;
  z-index: 2;
}

.faq-search-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .22);
}

.faq-search-card input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: none;
  color: #101322;
  font-size: 15px;
  font-weight: 700;
  background: transparent;
}

.faq-search-card input::placeholder {
  color: #94a3b8;
}

/* Accordion Wrapper */
.faq-page-accordion {
  position: relative;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.faq-page-accordion::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .10), transparent 36%);
  pointer-events: none;
}

.faq-page-accordion>* {
  position: relative;
  z-index: 2;
}

/* Group Title */
.faq-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 12px 10px;
  padding: 12px 16px;
  border-radius: 999px;
  width: fit-content;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 30px rgba(255, 47, 147, .08);
}

.faq-group-title i {
  font-size: 15px;
}

/* FAQ Item */
.faq-item {
  margin: 10px;
  border-radius: 24px !important;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .56)) !important;
  border: 1px solid rgba(255, 47, 147, .10) !important;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255, 255, 255, .90);
}

.faq-btn {
  gap: 14px;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  color: #101322 !important;
  font-size: 15.5px;
  font-weight: 850;
  line-height: 1.35;
  background: transparent !important;
  box-shadow: none !important;
}

.faq-btn::after {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin-left: auto;
  border-radius: 50%;
  background-color: rgba(255, 47, 147, .10);
  background-size: 15px;
  background-position: center;
  transition: .3s ease;
}

.faq-btn:not(.collapsed) {
  color: #ff2f93 !important;
  background:
    linear-gradient(135deg, rgba(255, 47, 147, .09), rgba(31, 102, 255, .07)) !important;
}

.faq-btn:not(.collapsed)::after {
  background-color: rgba(255, 47, 147, .15);
}

.faq-ic {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.12rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow:
    0 14px 30px rgba(255, 47, 147, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  transition: .3s ease;
}

.faq-btn:not(.collapsed) .faq-ic {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
}

.faq-body {
  padding: 0 24px 22px 82px;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.72;
  font-weight: 600;
}

/* Buttons inside FAQ */
.faq-body .btn-brand,
.faq-body .btn-outline-dark {
  min-height: 38px;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .3s ease;
}

.faq-body .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 14px 28px rgba(255, 47, 147, .22);
}

.faq-body .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
}

/* No Result */
.faq-no-result {
  display: none;
  text-align: center;
  margin: 14px;
  padding: 34px 20px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .12);
}

.faq-no-result i {
  display: inline-flex;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 22px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.45rem;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
}

.faq-no-result h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 500;
}

.faq-no-result p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  font-weight: 600;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faqs-main-section {
    padding: 86px 0;
  }

  .faqs-main-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .faqs-main-section {
    padding: 74px 0;
  }

  .faqs-main-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .faqs-main-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .faqs-main-section {
    padding: 62px 0;
  }

  .faqs-main-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .faqs-main-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .faq-page-accordion {
    border-radius: 28px;
  }

  .faq-btn {
    font-size: 14.5px;
  }

  .faq-body {
    padding-left: 76px;
  }
}

@media (max-width: 575.98px) {
  .faqs-main-section {
    padding: 48px 0;
  }

  .faqs-main-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .faqs-main-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .faqs-main-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .faqs-main-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .faqs-main-subtitle {
    font-size: 14px;
  }

  .faq-search-card {
    padding: 10px 12px;
    border-radius: 22px;
  }

  .faq-search-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 15px;
  }

  .faq-search-card input {
    min-height: 42px;
    font-size: 13.5px;
  }

  .faq-page-accordion {
    border-radius: 24px;
  }

  .faq-group-title {
    margin: 12px 8px 8px;
    padding: 10px 13px;
    font-size: 1.25rem;
  }

  .faq-item {
    margin: 8px;
    border-radius: 20px !important;
  }

  .faq-btn {
    gap: 10px;
    padding: 14px 12px !important;
    border-radius: 20px !important;
    font-size: 13.2px;
  }

  .faq-ic {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 14px;
    font-size: .95rem;
  }

  .faq-btn::after {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    background-size: 12px;
  }

  .faq-body {
    padding: 0 14px 17px 60px;
    font-size: 13.2px;
    line-height: 1.58;
  }

  .faq-body .mt-3.d-flex {
    flex-direction: column;
  }

  .faq-body .btn-brand,
  .faq-body .btn-outline-dark {
    width: 100%;
    min-height: 38px;
    font-size: 12.2px;
  }

  .faq-no-result {
    margin: 8px;
    padding: 26px 14px;
    border-radius: 22px;
  }

  .faq-no-result h5 {
    font-size: 1.4rem;
  }

  .faq-no-result p {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .faqs-main-title {
    font-size: 2.25rem;
  }

  .faq-btn {
    font-size: 12.6px;
  }

  .faq-body {
    font-size: 12.8px;
  }
}

/* ===================== MAIN FAQ ACCORDION END ===================== */




/* ===================== QUICK HELP ULTRA PREMIUM CSS ===================== */

.faq-help-section {
  position: relative;
  padding: 10px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.faq-help-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.faq-help-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.faq-help-section .container {
  position: relative;
  z-index: 2;
}

/* Glow */
.faq-help-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.faq-help-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: faqHelpGlowFloat 8s ease-in-out infinite alternate;
}

.faq-help-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: faqHelpGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes faqHelpGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Header */
.faq-help-head {
  position: relative;
  z-index: 2;
}

.faq-help-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faq-help-section .badge-chip i {
  font-size: 16px;
}

.faq-help-title {
  color: #101322;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.faq-help-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.faq-help-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Row */
.faq-help-row {
  align-items: stretch;
}

.faq-help-row>[class*="col-"] {
  display: flex;
}

/* Card */
.faq-help-card {
  position: relative;
  width: 100%;
  min-height: 335px;
  padding: 36px 24px 26px;
  border-radius: 34px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.faq-help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.faq-help-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 5px;
  z-index: 2;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: transform .35s ease;
}

.faq-help-card.active {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(255, 244, 250, .75));
  border-color: rgba(255, 47, 147, .25);
}

.faq-help-card:hover,
.faq-help-card.active {
  transform: translateY(-10px);
  box-shadow:
    0 38px 100px rgba(255, 47, 147, .17),
    0 24px 70px rgba(31, 102, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.faq-help-card:hover::after,
.faq-help-card.active::after {
  transform: scaleX(1);
}

/* Top icon */
.faq-help-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 2rem;
  flex: 0 0 auto;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.faq-help-card:hover .faq-help-icon,
.faq-help-card.active .faq-help-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Card text */
.faq-help-card h5 {
  color: #101322;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.5px;
  margin: 0 0 12px;
}

.faq-help-card p {
  max-width: 300px;
  margin: 0 auto 22px;
  color: #667085;
  font-size: 20px;
  line-height: 1.68;
  font-weight: 750;
}

/* Button fixed bottom style */
.faq-help-card .btn-brand {
  margin-top: auto;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .24);
  transition: .32s ease;
}

.faq-help-card .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(255, 47, 147, .34);
}

/* Animation */
.faq-help-card {
  animation: faqHelpCardUp .75s ease both;
}

.faq-help-section .col-md-4:nth-child(1) .faq-help-card {
  animation-delay: .08s;
}

.faq-help-section .col-md-4:nth-child(2) .faq-help-card {
  animation-delay: .16s;
}

.faq-help-section .col-md-4:nth-child(3) .faq-help-card {
  animation-delay: .24s;
}

@keyframes faqHelpCardUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faq-help-section {
    padding: 86px 0;
  }

  .faq-help-title {
    font-size: clamp(32px, 4.5vw, 52px);
  }

  .faq-help-card {
    min-height: 325px;
    padding: 32px 20px 24px;
  }
}

@media (max-width: 991.98px) {
  .faq-help-section {
    padding: 74px 0;
  }

  .faq-help-row>[class*="col-"] {
    display: flex;
  }

  .faq-help-card {
    min-height: 315px;
    max-width: 680px;
    margin: 0 auto;
  }

  .faq-help-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .faq-help-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .faq-help-section {
    padding: 62px 0;
  }

  .faq-help-title {
    font-size: clamp(30px, 8vw, 42px);
    letter-spacing: -1px;
  }

  .faq-help-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .faq-help-card {
    min-height: auto;
    padding: 30px 20px 24px;
    border-radius: 28px;
  }

  .faq-help-card:hover,
  .faq-help-card.active {
    transform: translateY(-6px);
  }

  .faq-help-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .faq-help-card h5 {
    font-size: 21px;
  }

  .faq-help-card p {
    max-width: 420px;
    font-size: 14px;
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .faq-help-section {
    padding: 48px 0;
  }

  .faq-help-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .faq-help-section .text-center {
    margin-bottom: 32px !important;
  }

  .faq-help-section .badge-chip {
    font-size: 13px;
    padding: 8px 14px;
  }

  .faq-help-title {
    font-size: clamp(28px, 9vw, 36px);
    line-height: 1.08;
  }

  .faq-help-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .faq-help-subtitle {
    font-size: 14px;
  }

  .faq-help-card {
    padding: 24px 16px 20px;
    border-radius: 24px;
  }

  .faq-help-card::after {
    left: 18px;
    right: 18px;
  }

  .faq-help-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .faq-help-card h5 {
    font-size: 19px;
  }

  .faq-help-card p {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .faq-help-card .btn-brand {
    width: 100%;
    min-height: 40px;
    padding: 10px 16px;
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .faq-help-title {
    font-size: 27px;
  }

  .faq-help-card h5 {
    font-size: 18px;
  }

  .faq-help-card p {
    font-size: 13px;
  }
}

/* ===================== QUICK HELP SECTION END ===================== */





/* ===================== FAQ CONTACT CTA ULTRA PREMIUM CSS ===================== */

.faqs-contact-section {
  position: relative;
  padding: 95px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.faqs-contact-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.faqs-contact-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.faqs-contact-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.faqs-contact-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.faqs-contact-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: faqsContactGlowFloat 8s ease-in-out infinite alternate;
}

.faqs-contact-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: faqsContactGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes faqsContactGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Main CTA Card */
.faqs-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 44px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: faqsContactFadeUp .8s ease both;
}

.faqs-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.faqs-contact-card::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.faqs-contact-card>* {
  position: relative;
  z-index: 2;
}

.faqs-contact-content {
  max-width: 760px;
}

/* Badge */
.faqs-contact-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.faqs-contact-section .badge-chip i {
  font-size: 16px;
}

/* Title */
.faqs-contact-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.faqs-contact-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.faqs-contact-text {
  max-width: 650px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Buttons */
.faqs-contact-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

.faqs-contact-section .btn-brand,
.faqs-contact-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.faqs-contact-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.faqs-contact-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.faqs-contact-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faqs-contact-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes faqsContactFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .faqs-contact-section {
    padding: 82px 0;
  }

  .faqs-contact-card {
    padding: 38px;
  }

  .faqs-contact-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .faqs-contact-section {
    padding: 72px 0;
  }

  .faqs-contact-card {
    flex-direction: column;
    text-align: center;
    padding: 34px 24px;
  }

  .faqs-contact-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .faqs-contact-title::after,
  .faqs-contact-text {
    margin-left: auto;
    margin-right: auto;
  }

  .faqs-contact-actions {
    justify-content: center;
  }

  .faqs-contact-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .faqs-contact-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .faqs-contact-section {
    padding: 52px 0;
  }

  .faqs-contact-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .faqs-contact-card {
    padding: 26px 16px;
    border-radius: 26px;
  }

  .faqs-contact-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .faqs-contact-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .faqs-contact-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .faqs-contact-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .faqs-contact-actions {
    width: 100%;
    flex-direction: column;
  }

  .faqs-contact-section .btn-brand,
  .faqs-contact-section .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .faqs-contact-title {
    font-size: 2.25rem;
  }

  .faqs-contact-text {
    font-size: 13.5px;
  }
}

/* ===================== CONTACT CTA END ===================== */

/* ===================== FAQ PAGE END ===================== */


/* ===================== CONTACT PAGE START ===================== */


/* ===================== CONTACT PAGE ULTRA PREMIUM NAVBAR ===================== */
/* ===================== PREMIUM GENZ NAVBAR (FINAL PRO VERSION) ===================== */

/* HEADER */
.main-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 47, 147, 0.10);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(20px);
}

/* CONTAINER */
.main-header .container {
  position: relative;
  min-height: 72px;
  padding: 10px 20px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 47, 147, 0.11), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(31, 102, 255, 0.10), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 251, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/* BLOBS */
.nav-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.35;
}

.nav-blob.blob-1 {
  width: 170px;
  height: 170px;
  left: -80px;
  top: -95px;
  background: rgba(255, 47, 147, 0.24);
}

.nav-blob.blob-2 {
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  background: rgba(31, 102, 255, 0.20);
}

/* LOGO */
.logo-img {
  height: 52px;
  max-width: 170px;
}

/* NAV LINKS */
.nav-modern {
  position: relative;
  color: #334155 !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 0 !important;
  transition: 0.3s;
}

.nav-modern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transition: 0.3s;
}

.nav-modern:hover {
  color: #ff2f93 !important;
}

.nav-modern:hover::after {
  width: 25px;
}

/* CTA */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  background: #fff;
  border: 1px solid rgba(255, 47, 147, 0.2);
  transition: 0.3s;
}

.icon-btn:hover {
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  color: #fff;
}

.icon-btn.whatsapp {
  color: #25d366;
}

.btn-cta {
  padding: 10px 18px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  border: none;
}

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

@media (max-width: 991.98px) {

  .main-header {
    padding: 8px 0;
  }

  .main-header .container {
    border-radius: 18px;
    padding: 10px;
  }

  /* MENU BOX */
  #mainNav {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: fadeSlide 0.4s ease;
  }

  /* NAV LINKS */
  .nav-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 10px !important;
  }

  .nav-modern:hover {
    background: #ffe6f3;
    transform: translateX(5px);
  }

  /* CTA STACK */
  .nav-cta {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .icon-btn {
    width: 100%;
    border-radius: 10px;
  }

  .btn-cta {
    width: 100%;
    text-align: center;
  }

  /* LOGO */
  .logo-img {
    height: 38px;
  }

  /* TOGGLER */
  .navbar-toggler {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe6f3;
  }
}

/* SMALL MOBILE */
@media (max-width: 576px) {

  .logo-img {
    height: 34px;
  }

  .nav-modern {
    font-size: 13px;
  }
}

/* ANIMATION */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* ===================== CONTACT HERO ULTRA PREMIUM CSS ===================== */

.contact-page-hero {
  position: relative;
  min-height: 100vh;
  padding: 10px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 14%, rgba(255, 47, 147, .18), transparent 62%),
    radial-gradient(780px 430px at 90% 16%, rgba(31, 102, 255, .14), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff5fb 48%, #eef5ff 100%);
}

.contact-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(31, 102, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}

.contact-page-bg::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 40px 120px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.contact-page-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(15, 23, 42, .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.contact-page-hero .container {
  position: relative;
  z-index: 5;
}

/* Decorative Assets */
.contact-page-decor,
.contact-page-pad-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.contact-blob-1 {
  width: 430px;
  left: -190px;
  top: -135px;
  z-index: 2;
  opacity: .32;
  filter: saturate(1.1);
  animation: contactBlobOne 8s ease-in-out infinite alternate;
}

.contact-blob-2 {
  width: 470px;
  right: -230px;
  bottom: -210px;
  z-index: 2;
  opacity: .30;
  filter: saturate(1.1);
  animation: contactBlobTwo 9s ease-in-out infinite alternate;
}

.contact-cotton-1 {
  width: 110px;
  left: 6%;
  bottom: 13%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(255, 47, 147, .14));
  animation: contactCotton 5.8s ease-in-out infinite alternate;
}

.contact-cotton-2 {
  width: 105px;
  right: 9%;
  top: 15%;
  z-index: 4;
  opacity: .82;
  filter: drop-shadow(0 18px 28px rgba(31, 102, 255, .12));
  animation: contactCotton 6.4s ease-in-out infinite alternate-reverse;
}

.contact-page-pad-bg {
  width: 620px;
  left: 50%;
  top: 52%;
  z-index: 1;
  opacity: .045;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes contactBlobOne {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(28px) rotate(5deg) scale(1.04);
  }
}

@keyframes contactBlobTwo {
  from {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(-24px) rotate(-5deg) scale(1.04);
  }
}

@keyframes contactCotton {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(20px) rotate(6deg);
  }
}

/* Badge */
.contact-page-hero .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-page-hero .badge-chip i {
  font-size: 16px;
}

/* Title Font */
.contact-page-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.headline-accent {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: inherit;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-135%);
  animation: contactHeadlineShine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes contactHeadlineShine {
  0% {
    transform: translateX(-135%);
  }

  45%,
  100% {
    transform: translateX(135%);
  }
}

.contact-page-subtitle {
  max-width: 620px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Buttons */
.contact-page-hero .btn-brand,
.contact-page-hero .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: .32s ease;
}

.contact-page-hero .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.contact-page-hero .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 25px 54px rgba(255, 47, 147, .35);
}

.contact-page-hero .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-page-hero .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

/* Hero Card */
.contact-hero-card {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.contact-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.contact-hero-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.contact-hero-card>* {
  position: relative;
  z-index: 2;
}

/* Pills */
.contact-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.contact-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-hero-pills i {
  color: #ff2f93;
}

/* Product Stage */
.contact-pack-stage {
  position: relative;
  min-height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
  z-index: 0;
}

.contact-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 420px);
  max-height: 390px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 72px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: contactPackFloat 4.2s ease-in-out infinite alternate;
}

.contact-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 410px);
  opacity: .10;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes contactPackFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* Contact Number Box */
.contact-number-box {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-number-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .22),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.contact-number-box h6 {
  margin: 0 0 4px;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}

.contact-number-box a {
  display: inline-block;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 5px;
}

.contact-number-box p {
  margin: 0;
  color: #667085;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 650;
}

/* Reveal Animation */
.contact-page-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: contactPageReveal .8s ease forwards;
  animation-delay: var(--d, 0s);
}

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .contact-page-hero {
    padding: 105px 0 80px;
  }

  .contact-page-title {
    font-size: clamp(2.8rem, 5vw, 5.1rem);
  }

  .contact-hero-card {
    min-height: 550px;
  }

  .contact-pack-stage {
    min-height: 370px;
  }

  .contact-pack-img {
    width: min(86%, 380px);
  }
}

@media (max-width: 991.98px) {
  .contact-page-hero {
    min-height: auto;
    padding: 90px 0 70px;
    text-align: center;
  }

  .contact-page-title {
    font-size: clamp(3rem, 9vw, 4.8rem);
    line-height: .9;
  }

  .headline-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-page-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.65;
  }

  .contact-page-hero .d-flex.flex-wrap.gap-2 {
    justify-content: center;
  }

  .contact-hero-card {
    max-width: 680px;
    min-height: auto;
    margin: 8px auto 0;
  }

  .contact-pack-stage {
    min-height: 340px;
  }

  .contact-pack-img {
    width: min(82%, 350px);
    max-height: 320px;
  }

  .contact-blob-1,
  .contact-blob-2 {
    width: 300px;
  }

  .contact-cotton-1,
  .contact-cotton-2 {
    width: 76px;
    opacity: .62;
  }

  .contact-page-pad-bg {
    width: 430px;
  }

  .contact-number-box {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .contact-page-hero {
    padding: 74px 0 52px;
  }

  .contact-page-bg::before {
    inset: 10px;
    border-radius: 28px;
  }

  .contact-blob-1,
  .contact-blob-2,
  .contact-page-pad-bg {
    display: none;
  }

  .contact-cotton-1 {
    width: 58px;
    left: -8px;
    bottom: 16%;
  }

  .contact-cotton-2 {
    width: 58px;
    right: -8px;
    top: 10%;
  }

  .contact-page-hero .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .contact-page-title {
    font-size: clamp(2.75rem, 14vw, 3.55rem);
    line-height: .9;
    margin-bottom: 16px;
  }

  .contact-page-subtitle {
    font-size: 14.2px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .contact-page-hero .btn-brand,
  .contact-page-hero .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .contact-hero-card {
    padding: 16px;
    border-radius: 26px;
  }

  .contact-hero-pills {
    gap: 8px;
  }

  .contact-hero-pills span {
    width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 12px;
  }

  .contact-pack-stage {
    min-height: 250px;
  }

  .contact-pack-stage::before {
    width: 235px;
    height: 235px;
  }

  .contact-pack-img {
    width: min(90%, 245px);
    max-height: 235px;
  }

  .contact-outline-img {
    width: min(90%, 245px);
  }

  .contact-number-box {
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border-radius: 20px;
    text-align: left;
  }

  .contact-number-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .contact-number-box h6 {
    font-size: 1.3rem;
  }

  .contact-number-box a {
    font-size: 1.48rem;
  }

  .contact-number-box p {
    font-size: 12.5px;
    line-height: 1.45;
  }
}

@media (max-width: 380px) {
  .contact-page-title {
    font-size: 2.6rem;
  }

  .contact-page-subtitle {
    font-size: 13.5px;
  }

  .contact-pack-stage {
    min-height: 230px;
  }

  .contact-pack-img {
    width: min(92%, 215px);
  }

  .contact-number-box h6 {
    font-size: 1.2rem;
  }

  .contact-number-box a {
    font-size: 1.35rem;
  }
}

/* ===================== CONTACT HERO END ===================== */




/* ===================== CONTACT OPTIONS ULTRA PREMIUM CSS ===================== */

.contact-options-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.contact-options-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.contact-options-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.contact-options-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.contact-options-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.contact-options-glow-1 {
  width: 520px;
  height: 520px;
  left: -270px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: contactOptionsGlowFloat 8s ease-in-out infinite alternate;
}

.contact-options-glow-2 {
  width: 430px;
  height: 430px;
  right: -220px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: contactOptionsGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes contactOptionsGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.contact-options-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-options-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.contact-options-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.contact-options-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.brand-grad {
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-options-subtitle {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Card */
.contact-option-card {
  position: relative;
  height: 100%;
  min-height: 295px;
  padding: 30px 22px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.contact-option-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.contact-option-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.contact-option-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 98px rgba(255, 47, 147, .17),
    0 24px 68px rgba(31, 102, 255, .12);
}

.contact-option-card:hover::after {
  transform: scaleX(1);
}

.contact-option-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.contact-option-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.contact-option-card:hover .contact-option-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text Font */
.contact-option-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 12px;
}

.contact-option-card p {
  min-height: 48px;
  margin: 0 0 20px;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Button */
.contact-option-card .btn-brand {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .24);
  transition: .32s ease;
}

.contact-option-card .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(255, 47, 147, .34);
}

/* Entry Animation */
.contact-option-card {
  animation: contactOptionUp .75s ease both;
}

.contact-options-section .col-md-6:nth-child(1) .contact-option-card {
  animation-delay: .08s;
}

.contact-options-section .col-md-6:nth-child(2) .contact-option-card {
  animation-delay: .16s;
}

.contact-options-section .col-md-6:nth-child(3) .contact-option-card {
  animation-delay: .24s;
}

.contact-options-section .col-md-6:nth-child(4) .contact-option-card {
  animation-delay: .32s;
}

@keyframes contactOptionUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .contact-options-section {
    padding: 86px 0;
  }

  .contact-options-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .contact-option-card {
    min-height: 280px;
    padding: 28px 20px;
  }
}

@media (max-width: 991.98px) {
  .contact-options-section {
    padding: 74px 0;
  }

  .contact-options-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .contact-options-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .contact-options-section {
    padding: 62px 0;
  }

  .contact-options-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .contact-options-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .contact-option-card {
    min-height: auto;
    padding: 26px 18px;
    border-radius: 28px;
  }

  .contact-option-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 1.55rem;
  }

  .contact-option-card h5 {
    font-size: 1.65rem;
  }

  .contact-option-card p {
    min-height: auto;
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .contact-options-section {
    padding: 48px 0;
  }

  .contact-options-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .contact-options-section .text-center {
    margin-bottom: 32px !important;
  }

  .contact-options-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .contact-options-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .contact-options-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .contact-options-subtitle {
    font-size: 14px;
  }

  .contact-option-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .contact-option-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .contact-option-card h5 {
    font-size: 1.52rem;
  }

  .contact-option-card p {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .contact-option-card .btn-brand {
    width: 100%;
    min-height: 40px;
    padding: 10px 16px;
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .contact-options-title {
    font-size: 2.25rem;
  }

  .contact-option-card h5 {
    font-size: 1.42rem;
  }

  .contact-option-card p {
    font-size: 13px;
  }
}

/* ===================== CONTACT OPTIONS END ===================== */



/* ===================== CONTACT FORM ULTRA PREMIUM CSS ===================== */

.contact-form-section {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.contact-form-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.contact-form-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -310px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.contact-form-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.contact-form-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.contact-form-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: contactFormGlowFloat 8s ease-in-out infinite alternate;
}

.contact-form-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: contactFormGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes contactFormGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.contact-form-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-form-section .badge-chip i {
  font-size: 16px;
}

/* Left Content */
.contact-form-info {
  position: relative;
}

.contact-form-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.contact-form-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.contact-form-text {
  max-width: 620px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Contact Info List */
.contact-info-list {
  display: grid;
  gap: 16px;
}

.contact-info-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 18px 52px rgba(255, 47, 147, .08),
    0 12px 36px rgba(31, 102, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: .35s ease;
}

.contact-info-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 47, 147, .11), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(31, 102, 255, .08), transparent 34%);
  pointer-events: none;
}

.contact-info-item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .75;
  transform: scaleX(.25);
  transition: .35s ease;
}

.contact-info-item:hover {
  transform: translateX(8px);
  box-shadow:
    0 28px 70px rgba(255, 47, 147, .13),
    0 18px 46px rgba(31, 102, 255, .09);
}

.contact-info-item:hover::after {
  transform: scaleX(1);
}

.contact-info-item>* {
  position: relative;
  z-index: 2;
}

.contact-info-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .13),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .35s ease;
}

.contact-info-item:hover .contact-info-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: rotate(-5deg) scale(1.04);
}

.contact-info-item h6 {
  margin: 0 0 4px;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 500;
}

.contact-info-item a,
.contact-info-item span {
  color: #667085;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 700;
  transition: .28s ease;
}

.contact-info-item a:hover {
  color: #ff2f93;
}

/* Form Card */
.contact-form-card {
  position: relative;
  padding: 34px;
  border-radius: 36px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: contactFormFadeUp .8s ease both;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .14), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .11), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .09), transparent 42%);
  pointer-events: none;
}

.contact-form-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.contact-form-card>* {
  position: relative;
  z-index: 2;
}

/* Labels & Inputs */
.contact-form-card .form-label {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 9px;
}

.contact-input {
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255, 47, 147, .14);
  color: #101322;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, .045),
    inset 0 1px 0 rgba(255, 255, 255, .84);
  transition: .3s ease;
}

.contact-input::placeholder {
  color: #98a2b3;
  font-weight: 600;
}

.contact-input:focus {
  border-color: rgba(255, 47, 147, .45);
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 0 0 4px rgba(255, 47, 147, .10),
    0 18px 38px rgba(255, 47, 147, .10);
  outline: none;
}

textarea.contact-input {
  min-height: 145px;
  resize: vertical;
}

select.contact-input {
  cursor: pointer;
}

/* Button */
.contact-form-card .btn-brand {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
  transition: .32s ease;
}

.contact-form-card .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

@keyframes contactFormFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .contact-form-section {
    padding: 92px 0;
  }

  .contact-form-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .contact-form-card {
    padding: 30px;
  }
}

@media (max-width: 991.98px) {
  .contact-form-section {
    padding: 78px 0;
    text-align: center;
  }

  .contact-form-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .contact-form-title::after,
  .contact-form-text {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-info-list {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
  }

  .contact-form-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }

  .contact-form-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .contact-form-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .contact-form-section {
    padding: 64px 0;
  }

  .contact-form-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .contact-form-text {
    font-size: 15px;
    line-height: 1.6;
  }

  .contact-info-item {
    border-radius: 22px;
  }

  .contact-form-card {
    padding: 26px 20px;
    border-radius: 30px;
  }
}

@media (max-width: 575.98px) {
  .contact-form-section {
    padding: 52px 0;
  }

  .contact-form-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .contact-form-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .contact-form-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .contact-form-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .contact-form-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .contact-info-list {
    gap: 12px;
  }

  .contact-info-item {
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
  }

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

  .contact-info-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .contact-info-item h6 {
    font-size: 1.28rem;
  }

  .contact-info-item a,
  .contact-info-item span {
    font-size: 13px;
  }

  .contact-form-card {
    padding: 22px 16px;
    border-radius: 26px;
  }

  .contact-form-card .form-label {
    font-size: 1.18rem;
  }

  .contact-input {
    min-height: 46px;
    border-radius: 15px;
    padding: 11px 13px;
    font-size: 13.2px;
  }

  textarea.contact-input {
    min-height: 120px;
  }

  .contact-form-card .btn-brand {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .contact-form-title {
    font-size: 2.25rem;
  }

  .contact-form-text {
    font-size: 13.5px;
  }

  .contact-input {
    font-size: 12.8px;
  }
}

/* ===================== CONTACT FORM SECTION END ===================== */





/* ===================== DISTRIBUTORSHIP ULTRA PREMIUM CSS ===================== */

.distributorship-section {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.distributorship-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.distributorship-section::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -310px;
  bottom: -315px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

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

/* Background Glow */
.distributor-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.distributor-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: distributorGlowFloat 8s ease-in-out infinite alternate;
}

.distributor-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: distributorGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes distributorGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Left Premium Card */
.distributor-card {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: distributorFadeUp .8s ease both;
}

.distributor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.distributor-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.distributor-card>* {
  position: relative;
  z-index: 2;
}

/* Top Pills */
.distributor-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.distributor-card-top span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.distributor-card-top i {
  color: #ff2f93;
}

/* Product Stage */
.distributor-pack-stage {
  position: relative;
  min-height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.distributor-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
  z-index: 0;
}

.distributor-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 420px);
  max-height: 390px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 72px rgba(15, 23, 42, .22)) contrast(1.04) saturate(1.05);
  animation: distributorPackFloat 4.2s ease-in-out infinite alternate;
}

.distributor-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 410px);
  opacity: .10;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes distributorPackFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* Stats */
.distributor-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.distributor-stats div {
  text-align: center;
  padding: 12px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 47, 147, .10);
}

.distributor-stats b {
  display: block;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 500;
}

.distributor-stats span {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.3;
}

/* Right Content */
.distributor-content {
  position: relative;
  animation: distributorFadeUp .8s ease both;
  animation-delay: .12s;
}

.distributorship-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.distributorship-section .badge-chip i {
  font-size: 16px;
}

.distributor-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.distributor-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.distributor-text {
  max-width: 650px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Points */
.distributor-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 13px;
}

.distributor-points li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 22px;
  color: #334155;
  font-size: 14.5px;
  font-weight: 800;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .56));
  border: 1px solid rgba(255, 47, 147, .11);
  box-shadow:
    0 14px 36px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255, 255, 255, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: .32s ease;
}

.distributor-points li:hover {
  transform: translateX(8px);
  box-shadow:
    0 22px 52px rgba(255, 47, 147, .12),
    0 14px 36px rgba(31, 102, 255, .08);
}

.distributor-points i {
  color: #13b85d;
  font-size: 1rem;
}

/* Buttons */
.distributorship-section .btn-brand,
.distributorship-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.distributorship-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.distributorship-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.distributorship-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.distributorship-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes distributorFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .distributorship-section {
    padding: 92px 0;
  }

  .distributor-card {
    min-height: 550px;
  }

  .distributor-pack-stage {
    min-height: 370px;
  }

  .distributor-pack-img {
    width: min(86%, 380px);
  }

  .distributor-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .distributorship-section {
    padding: 78px 0;
    text-align: center;
  }

  .distributor-card {
    max-width: 680px;
    min-height: auto;
    margin: 0 auto;
  }

  .distributor-pack-stage {
    min-height: 340px;
  }

  .distributor-pack-img {
    width: min(82%, 350px);
    max-height: 320px;
  }

  .distributor-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .distributor-title::after,
  .distributor-text {
    margin-left: auto;
    margin-right: auto;
  }

  .distributor-points {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .distributor-actions {
    justify-content: center;
  }

  .distributor-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .distributor-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .distributorship-section {
    padding: 52px 0;
  }

  .distributorship-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .distributor-card {
    padding: 16px;
    border-radius: 26px;
  }

  .distributor-card-top {
    gap: 8px;
  }

  .distributor-card-top span {
    width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 12px;
  }

  .distributor-pack-stage {
    min-height: 250px;
  }

  .distributor-pack-stage::before {
    width: 235px;
    height: 235px;
  }

  .distributor-pack-img {
    width: min(90%, 245px);
    max-height: 235px;
  }

  .distributor-outline-img {
    width: min(90%, 245px);
  }

  .distributor-stats {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px;
    border-radius: 22px;
  }

  .distributor-stats div {
    padding: 10px 8px;
    border-radius: 16px;
  }

  .distributor-stats b {
    font-size: 1.45rem;
  }

  .distributor-stats span {
    font-size: 12px;
  }

  .distributorship-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .distributor-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .distributor-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .distributor-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .distributor-points {
    gap: 10px;
  }

  .distributor-points li {
    align-items: flex-start;
    padding: 12px 13px;
    border-radius: 18px;
    font-size: 13px;
  }

  .distributor-points li:hover {
    transform: translateY(-4px);
  }

  .distributor-actions {
    width: 100%;
    flex-direction: column;
  }

  .distributorship-section .btn-brand,
  .distributorship-section .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .distributor-title {
    font-size: 2.25rem;
  }

  .distributor-text {
    font-size: 13.5px;
  }

  .distributor-points li {
    font-size: 12.8px;
  }

  .distributor-pack-stage {
    min-height: 230px;
  }

  .distributor-pack-img {
    width: min(92%, 215px);
  }
}

/* ===================== DISTRIBUTORSHIP SECTION END ===================== */



/* ===================== LOCATION SECTION ULTRA PREMIUM CSS ===================== */

.contact-location-section {
  position: relative;
  padding: 105px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.contact-location-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.contact-location-section::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -310px;
  bottom: -315px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.contact-location-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.contact-location-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.contact-location-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: contactLocationGlowFloat 8s ease-in-out infinite alternate;
}

.contact-location-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: contactLocationGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes contactLocationGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.contact-location-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-location-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.contact-location-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.contact-location-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.contact-location-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Main Card */
.contact-location-card {
  position: relative;
  padding: 34px;
  border-radius: 40px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: contactLocationFadeUp .8s ease both;
}

.contact-location-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .14), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .11), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .09), transparent 42%);
  pointer-events: none;
}

.contact-location-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.contact-location-card>* {
  position: relative;
  z-index: 2;
}

/* Location Info */
.location-info {
  position: relative;
  padding: 18px;
}

.location-info h4 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 2.65rem;
  line-height: .95;
  font-weight: 500;
  margin-bottom: 14px;
  text-shadow: 0 12px 28px rgba(255, 47, 147, .10);
}

.location-info>p {
  color: #667085;
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 500;
  margin-bottom: 22px;
}

.location-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  margin-top: 14px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 18px 52px rgba(255, 47, 147, .08),
    0 12px 36px rgba(31, 102, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: .35s ease;
}

.location-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 47, 147, .11), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(31, 102, 255, .08), transparent 34%);
  pointer-events: none;
}

.location-row::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .75;
  transform: scaleX(.25);
  transition: .35s ease;
}

.location-row:hover {
  transform: translateX(8px);
  box-shadow:
    0 28px 70px rgba(255, 47, 147, .13),
    0 18px 46px rgba(31, 102, 255, .09);
}

.location-row:hover::after {
  transform: scaleX(1);
}

.location-row>* {
  position: relative;
  z-index: 2;
}

.location-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 16px 34px rgba(255, 47, 147, .13),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .35s ease;
}

.location-row:hover .location-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: rotate(-5deg) scale(1.04);
}

.location-row h6 {
  margin: 0 0 4px;
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}

.location-row a {
  color: #667085;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 800;
  transition: .28s ease;
}

.location-row a:hover {
  color: #ff2f93;
}

/* Map Placeholder */
.map-placeholder {
  position: relative;
  min-height: 390px;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 47, 147, .18), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(31, 102, 255, .16), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 246, 251, .62));
  border: 1px solid rgba(255, 255, 255, .86);
  box-shadow:
    0 28px 78px rgba(255, 47, 147, .13),
    0 18px 58px rgba(31, 102, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

.map-placeholder::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  border: 1px dashed rgba(255, 47, 147, .30);
  pointer-events: none;
}

.map-placeholder::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .16), rgba(31, 102, 255, .13));
  filter: blur(8px);
  opacity: .75;
  pointer-events: none;
}

.map-placeholder>div {
  position: relative;
  z-index: 2;
  max-width: 360px;
  padding: 24px;
}

.map-placeholder i {
  width: 82px;
  height: 82px;
  margin-bottom: 18px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.15rem;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow:
    0 22px 50px rgba(255, 47, 147, .28),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  animation: mapPinFloat 3.4s ease-in-out infinite alternate;
}

@keyframes mapPinFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-12px);
  }
}

.map-placeholder h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 10px;
}

.map-placeholder p {
  color: #667085;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 650;
  margin: 0;
}

@keyframes contactLocationFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .contact-location-section {
    padding: 90px 0;
  }

  .contact-location-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .map-placeholder {
    min-height: 360px;
  }
}

@media (max-width: 991.98px) {
  .contact-location-section {
    padding: 76px 0;
    text-align: center;
  }

  .contact-location-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .contact-location-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-location-card {
    padding: 28px;
  }

  .location-info {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }

  .location-row {
    text-align: left;
  }

  .map-placeholder {
    min-height: 340px;
  }

  .contact-location-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .contact-location-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .contact-location-section {
    padding: 62px 0;
  }

  .contact-location-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .contact-location-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .contact-location-card {
    border-radius: 30px;
  }

  .location-info h4 {
    font-size: 2.25rem;
  }

  .map-placeholder {
    min-height: 310px;
    border-radius: 28px;
  }
}

@media (max-width: 575.98px) {
  .contact-location-section {
    padding: 50px 0;
  }

  .contact-location-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .contact-location-section .text-center {
    margin-bottom: 32px !important;
  }

  .contact-location-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .contact-location-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .contact-location-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .contact-location-subtitle {
    font-size: 14px;
  }

  .contact-location-card {
    padding: 18px;
    border-radius: 26px;
  }

  .location-info {
    padding: 6px;
  }

  .location-info h4 {
    font-size: 1.9rem;
  }

  .location-info>p {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .location-row {
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
  }

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

  .location-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .location-row h6 {
    font-size: 1.25rem;
  }

  .location-row a {
    font-size: 13px;
  }

  .map-placeholder {
    min-height: 260px;
    border-radius: 24px;
  }

  .map-placeholder::before {
    inset: 12px;
    border-radius: 18px;
  }

  .map-placeholder i {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    font-size: 1.55rem;
    margin-bottom: 14px;
  }

  .map-placeholder h5 {
    font-size: 1.55rem;
  }

  .map-placeholder p {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .contact-location-title {
    font-size: 2.25rem;
  }

  .location-info h4 {
    font-size: 1.72rem;
  }

  .map-placeholder {
    min-height: 240px;
  }
}

/* ===================== MAP / LOCATION SECTION END ===================== */

/* ===================== CONTACT SECTION ULTRA PREMIUM CSS END ===================== */



/* ===================== PRODUCT INFO ULTRA PREMIUM CSS ===================== */

.product-info-section {
  position: relative;
  padding: 105px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.product-info-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.product-info-section::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -315px;
  bottom: -315px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.product-info-section .container {
  position: relative;
  z-index: 2;
}

/* Background Glow */
.product-info-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.product-info-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 80px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: productInfoGlowFloat 8s ease-in-out infinite alternate;
}

.product-info-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 90px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: productInfoGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes productInfoGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

/* Badge */
.product-info-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.product-info-section .badge-chip i {
  font-size: 16px;
}

/* Heading */
.product-info-section .section-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.product-info-section .section-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.product-info-section .brand-grad {
  background: linear-gradient(135deg, #ff2f93 0%, #1f66ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.product-info-section .section-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

/* Feature Card */
.product-info-section .feature-card {
  position: relative;
  height: 100%;
  min-height: 280px;
  padding: 32px 22px;
  border-radius: 34px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 28px 82px rgba(255, 47, 147, .10),
    0 16px 52px rgba(31, 102, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: .38s ease;
}

.product-info-section .feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.product-info-section .feature-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.product-info-section .feature-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 47, 147, .24);
  box-shadow:
    0 38px 100px rgba(255, 47, 147, .17),
    0 24px 70px rgba(31, 102, 255, .12);
}

.product-info-section .feature-card:hover::after {
  transform: scaleX(1);
}

.product-info-section .feature-card>* {
  position: relative;
  z-index: 2;
}

/* Icon */
.product-info-section .feature-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  font-size: 1.95rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow:
    0 18px 38px rgba(255, 47, 147, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: .36s ease;
}

.product-info-section .feature-card:hover .feature-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transform: translateY(-5px) rotate(-5deg) scale(1.04);
  box-shadow: 0 22px 46px rgba(255, 47, 147, .26);
}

/* Text */
.product-info-section .feature-card h5 {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 13px;
}

.product-info-section .feature-card p {
  margin: 0;
  color: #667085;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
}

/* Animation */
.product-info-section .feature-card {
  animation: productInfoCardUp .75s ease both;
}

.product-info-section .col-md-6:nth-child(1) .feature-card {
  animation-delay: .08s;
}

.product-info-section .col-md-6:nth-child(2) .feature-card {
  animation-delay: .16s;
}

.product-info-section .col-md-6:nth-child(3) .feature-card {
  animation-delay: .24s;
}

.product-info-section .col-md-6:nth-child(4) .feature-card {
  animation-delay: .32s;
}

@keyframes productInfoCardUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .product-info-section {
    padding: 90px 0;
  }

  .product-info-section .section-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }

  .product-info-section .feature-card {
    min-height: 265px;
    padding: 30px 20px;
  }
}

@media (max-width: 991.98px) {
  .product-info-section {
    padding: 78px 0;
  }

  .product-info-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .product-info-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 767.98px) {
  .product-info-section {
    padding: 64px 0;
  }

  .product-info-section .section-title {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .product-info-section .section-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .product-info-section .feature-card {
    min-height: auto;
    padding: 28px 20px;
    border-radius: 28px;
  }

  .product-info-section .feature-icon {
    width: 66px;
    height: 66px;
    border-radius: 22px;
    font-size: 1.65rem;
  }

  .product-info-section .feature-card h5 {
    font-size: 1.7rem;
  }

  .product-info-section .feature-card p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .product-info-section {
    padding: 52px 0;
  }

  .product-info-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .product-info-section .text-center {
    margin-bottom: 32px !important;
  }

  .product-info-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .product-info-section .section-title {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: .92;
  }

  .product-info-section .section-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .product-info-section .section-subtitle {
    font-size: 14px;
  }

  .product-info-section .feature-card {
    padding: 24px 16px;
    border-radius: 24px;
  }

  .product-info-section .feature-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.35rem;
    margin-bottom: 16px;
  }

  .product-info-section .feature-card h5 {
    font-size: 1.52rem;
  }

  .product-info-section .feature-card p {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .product-info-section .section-title {
    font-size: 2.25rem;
  }

  .product-info-section .feature-card h5 {
    font-size: 1.42rem;
  }

  .product-info-section .feature-card p {
    font-size: 13px;
  }
}

/* ===================== PRODUCT INFO END ===================== */




/* ===================== PRODUCT CTA ULTRA PREMIUM CSS ===================== */

.product-cta-section {
  position: relative;
  padding: 95px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.product-cta-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 34px 110px rgba(255, 47, 147, .08);
  pointer-events: none;
}

.product-cta-section::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -315px;
  bottom: -315px;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 47, 147, .13), rgba(31, 102, 255, .10));
  filter: blur(14px);
  pointer-events: none;
}

.product-cta-section .container {
  position: relative;
  z-index: 2;
}

.product-cta-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.product-cta-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: productCtaGlowFloat 8s ease-in-out infinite alternate;
}

.product-cta-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: productCtaGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes productCtaGlowFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(28px) scale(1.05);
  }
}

.product-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 46px;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .60));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .14),
    0 22px 70px rgba(31, 102, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: productCtaFadeUp .8s ease both;
}

.product-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 47, 147, .15), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(31, 102, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255, 47, 147, .10), transparent 42%);
  pointer-events: none;
}

.product-cta::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  opacity: .88;
}

.product-cta>* {
  position: relative;
  z-index: 2;
}

.product-cta-content {
  max-width: 760px;
}

.product-cta-section .badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff2f93;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.product-cta-section .badge-chip i {
  font-size: 16px;
}

.product-cta-title {
  color: #101322;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 14px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.product-cta-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.product-cta-text {
  max-width: 650px;
  color: #667085;
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.product-cta-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

.product-cta-section .btn-brand,
.product-cta-section .btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.product-cta-section .btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.product-cta-section .btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.product-cta-section .btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.product-cta-section .btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

@keyframes productCtaFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1199.98px) {
  .product-cta-section {
    padding: 82px 0;
  }

  .product-cta {
    padding: 40px;
  }

  .product-cta-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .product-cta-section {
    padding: 72px 0;
  }

  .product-cta {
    flex-direction: column;
    text-align: center;
    padding: 34px 24px;
  }

  .product-cta-title {
    font-size: clamp(3rem, 9vw, 4.35rem);
  }

  .product-cta-title::after,
  .product-cta-text {
    margin-left: auto;
    margin-right: auto;
  }

  .product-cta-actions {
    justify-content: center;
  }

  .product-cta-glow-1 {
    width: 340px;
    height: 340px;
    left: -190px;
  }

  .product-cta-glow-2 {
    width: 300px;
    height: 300px;
    right: -170px;
  }
}

@media (max-width: 575.98px) {
  .product-cta-section {
    padding: 52px 0;
  }

  .product-cta-section::before {
    inset: 10px;
    border-radius: 28px;
  }

  .product-cta {
    padding: 26px 16px;
    border-radius: 26px;
    gap: 22px;
  }

  .product-cta-section .badge-chip {
    font-size: 18px;
    padding: 8px 14px;
  }

  .product-cta-title {
    font-size: clamp(2.4rem, 13vw, 3.1rem);
    line-height: .92;
  }

  .product-cta-title::after {
    width: 78px;
    height: 4px;
    margin-top: 14px;
  }

  .product-cta-text {
    font-size: 14px;
    line-height: 1.58;
  }

  .product-cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .product-cta-section .btn-brand,
  .product-cta-section .btn-outline-dark {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .product-cta-title {
    font-size: 2.25rem;
  }

  .product-cta-text {
    font-size: 13.5px;
  }
}

/* ===================== PRODUCT CTA END ===================== */





/* ===================== GLOBAL ===================== */

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

html {
  scroll-behavior: smooth;
}

body {
  color: #101322;
  background: #ffffff;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

:root {
  --pink: #ff2f93;
  --blue: #1f66ff;
  --green: #25d366;
  --dark: #101322;
  --muted: #667085;
  --white: #ffffff;
}

.section {
  position: relative;
  padding: 100px 0;
}

.muted {
  color: var(--muted);
}

.glass {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow:
    0 34px 96px rgba(255, 47, 147, .12),
    0 22px 70px rgba(31, 102, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand-grad {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--pink);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  background: rgba(255, 47, 147, .10);
  border: 1px solid rgba(255, 47, 147, .15);
  box-shadow: 0 14px 34px rgba(255, 47, 147, .10);
  backdrop-filter: blur(12px);
}

.section-title {
  color: var(--dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.section-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: 0 8px 22px rgba(255, 47, 147, .28);
}

.section-subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.72;
  font-weight: 500;
}

.btn-brand,
.btn-outline-dark {
  min-height: 50px;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  transition: .32s ease;
}

.btn-brand {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: 0 18px 40px rgba(255, 47, 147, .28);
}

.btn-brand:hover {
  color: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(255, 47, 147, .36);
}

.btn-outline-dark {
  color: #13b85d;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(19, 184, 93, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
}

.btn-outline-dark:hover {
  color: #fff;
  border-color: #13b85d;
  background: #13b85d;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(19, 184, 93, .24);
}

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

/* HEADER */
.main-header {
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 47, 147, 0.10);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(20px);
}

/* CONTAINER */
.main-header .container {
  position: relative;
  min-height: 72px;
  padding: 10px 20px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 47, 147, 0.11), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(31, 102, 255, 0.10), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 251, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/* BLOBS */
.nav-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.35;
}

.nav-blob.blob-1 {
  width: 170px;
  height: 170px;
  left: -80px;
  top: -95px;
  background: rgba(255, 47, 147, 0.24);
}

.nav-blob.blob-2 {
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  background: rgba(31, 102, 255, 0.20);
}

/* LOGO */
.logo-img {
  height: 52px;
  max-width: 170px;
}

/* NAV LINKS */
.nav-modern {
  position: relative;
  color: #334155 !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 0 !important;
  transition: 0.3s;
}

.nav-modern::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2f93, #1f66ff);
  transition: 0.3s;
}

.nav-modern:hover {
  color: #ff2f93 !important;
}

.nav-modern:hover::after {
  width: 25px;
}

/* CTA */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff2f93;
  background: #fff;
  border: 1px solid rgba(255, 47, 147, 0.2);
  transition: 0.3s;
}

.icon-btn:hover {
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
  color: #fff;
}

.icon-btn.whatsapp {
  color: #25d366;
}

.btn-cta {
  padding: 10px 18px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
  border: none;
}

/* ===================== GLOBAL RESET ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===================== HEADER ===================== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* ===================== NAVBAR ===================== */
.navbar {
  padding: 12px 0;
}

/* ===================== LOGO ===================== */
.navbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

.logo-sub {
  font-size: 12px;
  color: #777;
}

/* ===================== NAV LINKS ===================== */
.nav-modern {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  position: relative;
  transition: 0.3s;
}

/* underline animation */
/* .nav-modern::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: #ff4d6d;
  transition: 0.3s;
} */

.nav-modern:hover::after,
.nav-modern.active::after {
  width: 100%;
}

.nav-modern:hover,
.nav-modern.active {
  color: #ff4d6d;
}

/* ===================== CTA ===================== */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: 0.3s;
}

.icon-btn:hover {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  color: #fff;
}

.icon-btn.whatsapp:hover {
  background: #25D366;
}

.btn-cta {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  color: #fff;
  border-radius: 25px;
  padding: 8px 18px;
  font-size: 14px;
  transition: 0.3s;
}

.btn-cta:hover {
  background: linear-gradient(135deg, #e63b5c, #ff4d6d);
  color: #fff;
}

/* ===================== TOGGLER ===================== */
.navbar-toggler {
  outline: none;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ===================== MOBILE ===================== */
@media (max-width: 991px) {

  .navbar {
    padding: 10px 0;
  }

  .navbar-collapse {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.4s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

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

  .navbar-nav {
    align-items: flex-start !important;
    gap: 10px;
  }

  .nav-link {
    width: 100%;
    padding: 10px 0;
  }

  .nav-modern::after {
    display: none;
  }

  .nav-cta {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
    width: 100%;
  }

  .btn-cta {
    width: 100%;
    text-align: center;
  }

  .icon-btn {
    width: 100%;
    justify-content: flex-start;
    padding-left: 10px;
    border-radius: 8px;
  }
}

/* ===================== TABLET ===================== */
@media (min-width: 768px) and (max-width: 991px) {

  .logo-text {
    font-size: 20px;
  }

  .nav-modern {
    font-size: 14px;
  }
}

/* ===================== DESKTOP ===================== */
@media (min-width: 992px) {

  .navbar-nav {
    align-items: center;
  }

  .nav-link {
    padding: 6px 0;
  }

  .nav-cta {
    margin-left: 20px;
  }
}

/* ===================== BLOBS DESIGN ===================== */
.nav-blob {
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 77, 109, 0.2), transparent);
  z-index: -1;
  filter: blur(40px);
}

.blob-1 {
  top: -60px;
  left: -60px;
}

.blob-2 {
  bottom: -60px;
  right: -60px;
}

/* ===================== PRODUCT ALL HERO ===================== */

.product-all-hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 14%, rgba(255, 47, 147, .18), transparent 62%),
    radial-gradient(780px 430px at 90% 16%, rgba(31, 102, 255, .14), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fff5fb 48%, #eef5ff 100%);
}

.product-all-bg,
.product-all-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.product-all-bg {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 47, 147, .12), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(31, 102, 255, .10), transparent 36%);
}

.product-all-bg::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

.product-all-noise {
  z-index: 1;
  opacity: .045;
  background-image: radial-gradient(circle, rgba(15, 23, 42, .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

.product-all-hero .container {
  position: relative;
  z-index: 5;
}

.product-all-decor,
.product-all-pad-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.product-all-blob-1 {
  width: 430px;
  left: -190px;
  top: -135px;
  z-index: 2;
  opacity: .32;
  animation: productBlobOne 8s ease-in-out infinite alternate;
}

.product-all-blob-2 {
  width: 470px;
  right: -230px;
  bottom: -210px;
  z-index: 2;
  opacity: .30;
  animation: productBlobTwo 9s ease-in-out infinite alternate;
}

.product-all-cotton-1 {
  width: 110px;
  left: 6%;
  bottom: 13%;
  z-index: 4;
  opacity: .82;
  animation: productCotton 5.8s ease-in-out infinite alternate;
}

.product-all-cotton-2 {
  width: 105px;
  right: 9%;
  top: 15%;
  z-index: 4;
  opacity: .82;
  animation: productCotton 6.4s ease-in-out infinite alternate-reverse;
}

.product-all-pad-bg {
  width: 620px;
  left: 50%;
  top: 52%;
  z-index: 1;
  opacity: .045;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes productBlobOne {
  to {
    transform: translateY(28px) rotate(5deg) scale(1.04);
  }
}

@keyframes productBlobTwo {
  to {
    transform: translateY(-24px) rotate(-5deg) scale(1.04);
  }
}

@keyframes productCotton {
  to {
    transform: translateY(20px) rotate(6deg);
  }
}

.product-all-title {
  color: var(--dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5.4vw, 6rem);
  line-height: .88;
  font-weight: 500;
  margin: 0 0 24px;
  text-shadow: 0 16px 36px rgba(255, 47, 147, .10);
}

.headline-accent {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: inherit;
  line-height: .9;
  font-weight: 500;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-135%);
  animation: headlineShine 3s ease-in-out infinite;
}

@keyframes headlineShine {

  45%,
  100% {
    transform: translateX(135%);
  }
}

.product-all-subtitle {
  max-width: 620px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 28px;
}

.product-all-hero-card {
  position: relative;
  min-height: 590px;
  padding: 26px;
  border-radius: 40px;
  overflow: hidden;
}

.product-all-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .15), transparent 35%),
    radial-gradient(circle at 86% 22%, rgba(31, 102, 255, .12), transparent 36%);
  pointer-events: none;
}

.product-all-hero-card::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, var(--pink), var(--blue));
}

.product-all-hero-card>* {
  position: relative;
  z-index: 2;
}

.product-all-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.product-all-pills span,
.product-all-mini-stats {
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
}

.product-all-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.product-all-pills i {
  color: var(--pink);
}

.product-all-pack-stage {
  position: relative;
  min-height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-all-pack-stage::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .17), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
}

.product-all-pack-img {
  position: relative;
  z-index: 3;
  width: min(88%, 420px);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 38px 72px rgba(15, 23, 42, .22));
  animation: productPackFloat 4.2s ease-in-out infinite alternate;
}

.product-all-outline-img {
  position: absolute;
  z-index: 1;
  width: min(84%, 410px);
  opacity: .08;
  transform: rotate(-12deg) scale(1.04);
}

@keyframes productPackFloat {
  to {
    transform: translateY(-16px) rotate(1deg);
  }
}

.product-all-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
}

.product-all-mini-stats div {
  text-align: center;
  padding: 12px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 47, 147, .10);
}

.product-all-mini-stats b {
  display: block;
  color: var(--dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 500;
}

.product-all-mini-stats span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 750;
}

.product-all-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: productAllReveal .8s ease forwards;
  animation-delay: var(--d, 0s);
}

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

/* ===================== PRODUCT GRID ===================== */

.product-grid-section,
.product-compare-section,
.product-all-cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(850px 440px at 10% 12%, rgba(255, 47, 147, .14), transparent 62%),
    radial-gradient(820px 450px at 90% 18%, rgba(31, 102, 255, .12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #ffffff 100%);
}

.product-grid-section::before,
.product-compare-section::before,
.product-all-cta-section::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 1;
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  pointer-events: none;
}

.product-grid-section .container,
.product-compare-section .container,
.product-all-cta-section .container {
  position: relative;
  z-index: 2;
}

.product-grid-glow,
.product-all-cta-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.product-grid-glow-1,
.product-all-cta-glow-1 {
  width: 540px;
  height: 540px;
  left: -280px;
  top: 70px;
  background: linear-gradient(135deg, rgba(255, 47, 147, .14), rgba(31, 102, 255, .08));
  animation: productGlowFloat 8s ease-in-out infinite alternate;
}

.product-grid-glow-2,
.product-all-cta-glow-2 {
  width: 440px;
  height: 440px;
  right: -230px;
  top: 70px;
  background: linear-gradient(135deg, rgba(31, 102, 255, .10), rgba(255, 47, 147, .12));
  animation: productGlowFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes productGlowFloat {
  to {
    transform: translateY(28px) scale(1.05);
  }
}

.product-filter-wrap {
  max-width: 850px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.product-filter {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 47, 147, .12);
  transition: .3s ease;
}

.product-filter:hover,
.product-filter.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .22);
}

.product-item {
  transition: .35s ease;
}

.product-item.hide {
  display: none;
}

.product-card {
  position: relative;
  height: 100%;
  min-height: 480px;
  padding: 20px;
  border-radius: 34px;
  overflow: hidden;
  transition: .38s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 47, 147, .13), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(31, 102, 255, .10), transparent 34%);
  pointer-events: none;
}

.product-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  transform: scaleX(.28);
  opacity: .78;
  transition: .35s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 38px 100px rgba(255, 47, 147, .17),
    0 24px 70px rgba(31, 102, 255, .12);
}

.product-card:hover::after {
  transform: scaleX(1);
}

.product-card>* {
  position: relative;
  z-index: 2;
}

.product-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 47, 147, .16);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.product-img-box {
  position: relative;
  min-height: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img-box::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 47, 147, .16), transparent 62%),
    radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .13), transparent 58%);
}

.product-img-box>img:first-child {
  position: relative;
  z-index: 3;
  width: min(90%, 230px);
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 28px 54px rgba(15, 23, 42, .18));
  transition: .35s ease;
}

.product-card:hover .product-img-box>img:first-child {
  transform: translateY(-10px) rotate(1deg);
}

.product-outline {
  position: absolute;
  z-index: 1;
  width: min(84%, 220px);
  opacity: .08;
  transform: rotate(-12deg);
}

.product-body {
  text-align: center;
}

.product-body h5 {
  color: var(--dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 12px;
}

.product-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 16px;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.product-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #334155;
  font-size: 11.5px;
  font-weight: 850;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 47, 147, .12);
}

.product-features i {
  color: var(--pink);
}

.product-actions {
  display: flex;
  gap: 8px;
}

.product-actions .btn-brand {
  flex: 1;
}

.product-actions .btn-outline-dark {
  width: 44px;
  padding: 0;
}

/* ===================== COMPARE ===================== */

.compare-card {
  position: relative;
  padding: 16px;
  border-radius: 36px;
  overflow: hidden;
}

.compare-table {
  overflow: hidden;
  border-radius: 26px;
}

.compare-table th {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  font-size: 14px;
  font-weight: 700;
  padding: 18px;
  border: 0;
  white-space: nowrap;
}

.compare-table td {
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  padding: 18px;
  background: rgba(255, 255, 255, .72);
  border-color: rgba(255, 47, 147, .08);
}

.compare-table tbody tr:hover td {
  background: rgba(255, 247, 251, .95);
  color: var(--dark);
}

/* ===================== CTA SECTION ===================== */
.product-all-cta-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fff, #fff5f7);
}

/* ===================== GLOW BACKGROUND ===================== */
.product-all-cta-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 77, 109, 0.25), transparent);
  filter: blur(80px);
  z-index: 0;
}

.product-all-cta-glow-1 {
  top: -80px;
  left: -80px;
}

.product-all-cta-glow-2 {
  bottom: -80px;
  right: -80px;
}

/* ===================== CTA BOX ===================== */
.product-all-cta {
  position: relative;
  z-index: 1;
  padding: 40px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* ===================== CONTENT ===================== */
.product-all-cta-content {
  max-width: 550px;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 20px;
  background: #ffe4ea;
  color: #ff4d6d;
  font-weight: 500;
}

/* Title */
.product-all-cta-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

/* Text */
.product-all-cta-text {
  font-size: 15px;
  color: #666;
}

/* ===================== BUTTONS ===================== */
.product-all-cta-actions {
  align-items: center;
}

/* Brand Button */
.btn-brand {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  color: #fff;
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 14px;
  transition: 0.3s;
  border: none;
}

.btn-brand:hover {
  background: linear-gradient(135deg, var(--pink), var(--blue));
  color: #fff;
  transform: translateY(-2px);
}

/* Outline Button */
.btn-outline-dark {
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 14px;
  transition: 0.3s;
}

.btn-outline-dark:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  transform: translateY(-2px);
}

/* ===================== MOBILE ===================== */
@media (max-width: 991px) {

  .product-all-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
  }

  .product-all-cta-title {
    font-size: 26px;
  }

  .product-all-cta-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .product-all-cta-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ===================== SMALL MOBILE ===================== */
@media (max-width: 480px) {

  .product-all-cta-title {
    font-size: 22px;
  }

  .product-all-cta-text {
    font-size: 14px;
  }
}





/*  TECHNOLOGY PAGE START */


/* ===================== TECHNOLOGY PAGE CSS ===================== */

.technology-hero {
  position: relative;
  min-height: 100vh;
  padding: 10px 0 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.technology-bg {
  position: absolute;
  inset: -2px;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(255, 47, 147, .20), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(31, 102, 255, .18), transparent 55%),
    radial-gradient(800px 520px at 55% 85%, rgba(255, 47, 147, .10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff0f7 60%, #ffffff 100%);
}

.technology-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("../img/noise.png");
}

.technology-decor {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.tech-blob-1 {
  width: 480px;
  top: -150px;
  left: -170px;
  opacity: .35;
}

.tech-blob-2 {
  width: 520px;
  right: -190px;
  bottom: -190px;
  opacity: .30;
}

.tech-cotton-1 {
  width: 130px;
  top: 120px;
  right: 10%;
  opacity: .85;
  animation: technologyFloat 6s ease-in-out infinite alternate;
}

.tech-cotton-2 {
  width: 120px;
  bottom: 90px;
  left: 7%;
  opacity: .75;
  animation: technologyFloat 7s ease-in-out infinite alternate;
  animation-delay: 1.2s;
}

.technology-pad-bg {
  position: absolute;
  width: 720px;
  opacity: .055;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-18deg);
  pointer-events: none;
}

@keyframes technologyFloat {
  0% {
    transform: translateY(0) rotate(8deg);
  }

  100% {
    transform: translateY(22px) rotate(-8deg);
  }
}

.technology-title {
  font-size: clamp(2.35rem, 4.4vw, 4.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  margin-bottom: 18px;
  color: var(--ink);
}

.technology-subtitle {
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.75;
  max-width: 590px;
  margin-bottom: 28px;
}

.technology-visual {
  position: relative;
  padding: 18px;
  overflow: hidden;
  z-index: 5;
}

.technology-visual::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 47, 147, .16), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(31, 102, 255, .12), transparent 60%);
  pointer-events: none;
}

.tech-pill-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-pill-wrap span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(15, 23, 42, .08);
  font-weight: 800;
  font-size: .85rem;
}

.technology-pack-stage {
  position: relative;
  z-index: 2;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.technology-pack-img {
  width: 78%;
  max-width: 430px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .14));
  transition: .35s ease;
}

.technology-pack-img:hover {
  transform: translateY(-8px) scale(1.03);
}

.technology-outline-img {
  position: absolute;
  width: 530px;
  opacity: .08;
  right: -160px;
  bottom: -150px;
  transform: rotate(-18deg);
}

.technology-score {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.score-item {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .08);
}

.score-item span,
.score-item b {
  font-size: .88rem;
}

.score-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--blue));
}

/* Reveal */
.tech-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: .85s ease;
  transition-delay: var(--d, 0s);
}

.tech-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Cards */
.technology-cards-section {
  position: relative;
  overflow: hidden;
}

.technology-card {
  height: 100%;
  padding: 24px 20px;
  border-radius: 24px;
  transition: .3s ease;
}

.technology-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .11);
}

.technology-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 47, 147, .16), rgba(31, 102, 255, .12));
  border: 1px solid rgba(15, 23, 42, .08);
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.technology-card h5 {
  font-weight: 700;
  margin-bottom: 10px;
}

.technology-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.65;
}

/* Layer Details */
.technology-layer-details {
  position: relative;
  overflow: hidden;
}

.layer-visual {
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.layer-outline-bg {
  position: absolute;
  width: 680px;
  opacity: .07;
  transform: rotate(-18deg);
}

.layer-pack-img {
  width: 72%;
  max-width: 430px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 32px 65px rgba(0, 0, 0, .16));
}

.floating-layer {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
  font-weight: 800;
  font-size: .88rem;
}

.layer-one {
  top: 80px;
  left: 40px;
}

.layer-two {
  top: 210px;
  right: 35px;
}

.layer-three {
  left: 70px;
  bottom: 95px;
}

.tech-timeline {
  display: grid;
  gap: 18px;
}

.timeline-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: 0 0 0 8px rgba(255, 47, 147, .10);
  flex: 0 0 auto;
}

.timeline-item h6 {
  font-weight: 700;
  margin-bottom: 4px;
}

.timeline-item p {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* Performance */
.performance-card {
  height: 100%;
  padding: 28px 22px;
  text-align: center;
  transition: .3s ease;
}

.performance-card:hover,
.performance-card.active {
  transform: translateY(-8px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .12);
}

.performance-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 47, 147, .18), rgba(31, 102, 255, .13));
  border: 1px solid rgba(15, 23, 42, .08);
  font-size: 1.45rem;
}

.performance-card h5 {
  font-weight: 700;
}

.performance-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.65;
}

/* CTA */
.technology-cta-section {
  padding-top: 30px;
}

.technology-cta {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

/* Active nav */
.nav-modern.active {
  color: var(--pink);
}

.nav-modern.active::after {
  width: 100%;
}

/* Responsive */
@media (max-width: 991.98px) {
  .technology-hero {
    text-align: center;
    padding: 130px 0 80px;
  }

  .technology-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .technology-hero .d-flex {
    justify-content: center;
  }

  .technology-pack-stage {
    min-height: 320px;
  }

  .tech-blob-1,
  .tech-blob-2 {
    width: 350px;
  }

  .technology-pad-bg {
    width: 520px;
  }

  .layer-visual {
    min-height: 440px;
  }
}

@media (max-width: 575.98px) {
  .technology-hero {
    padding: 115px 0 70px;
  }

  .technology-title {
    font-size: 2.35rem;
  }

  .technology-subtitle {
    font-size: 1rem;
  }

  .technology-pack-img,
  .layer-pack-img {
    width: 88%;
  }

  .technology-pack-stage {
    min-height: 280px;
  }

  .layer-visual {
    min-height: 380px;
  }

  .floating-layer {
    font-size: .74rem;
    padding: 8px 10px;
  }

  .layer-one {
    top: 50px;
    left: 12px;
  }

  .layer-two {
    top: 160px;
    right: 12px;
  }

  .layer-three {
    left: 20px;
    bottom: 65px;
  }

  .technology-cta {
    padding: 22px;
  }
}









/* ===================== PRODUCTS PAGE ULTRA PREMIUM ===================== */
:root {
  --fd-pink: #ff2f93;
  --fd-pink-dark: #c40063;
  --fd-blue: #1f66ff;
  --fd-purple: #7b3ff2;
  --fd-soft: #fff0f7;
  --fd-ink: #111827;
  --fd-muted: #6b7280;
  --fd-stroke: rgba(15, 23, 42, .10);
  --fd-shadow: 0 22px 70px rgba(0, 0, 0, .08);
}

.products-page {
  overflow: hidden;
  background: #fff;
}

.product-page-hero {
  position: relative;
  padding: 10px 0 58px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(820px 430px at 8% 10%, rgba(255, 47, 147, .16), transparent 62%),
    radial-gradient(820px 460px at 92% 18%, rgba(31, 102, 255, .13), transparent 60%),
    linear-gradient(180deg, #fff 0%, #fff5fa 55%, #fff 100%);
}

.product-page-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 44px;
  border: 1px solid rgba(255, 47, 147, .10);
  background:
    linear-gradient(rgba(255, 47, 147, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 47, 147, .024) 1px, transparent 1px);
  background-size: 54px 54px;
}

.product-page-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
}

.product-page-glow.one {
  width: 360px;
  height: 360px;
  left: -170px;
  top: 80px;
  background: rgba(255, 47, 147, .12);
}

.product-page-glow.two {
  width: 460px;
  height: 460px;
  right: -240px;
  bottom: -80px;
  background: rgba(31, 102, 255, .12);
}

.product-page-kicker {
  width: fit-content;
  min-height: 40px;
  padding: 8px 16px 8px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fd-pink-dark);
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 12px 28px rgba(255, 47, 147, .09);
  backdrop-filter: blur(12px);
}

.product-page-kicker span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
}

.product-page-title {
  margin: 16px 0 16px;
  color: var(--fd-ink);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.product-page-title span {
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.product-page-text {
  max-width: 670px;
  color: var(--fd-muted);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 26px;
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fd-btn-primary,
.fd-btn-secondary {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  transition: .3s ease;
}

.fd-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-purple), var(--fd-blue));
  box-shadow: 0 16px 36px rgba(255, 47, 147, .25);
}

.fd-btn-primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(255, 47, 147, .34);
}

.fd-btn-secondary {
  color: var(--fd-ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px);
}

.fd-btn-secondary:hover {
  color: #fff;
  background: #25d366;
  border-color: #25d366;
  transform: translateY(-3px);
}

.product-hero-visual {
  position: relative;
  min-height: 470px;
  border-radius: 42px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 246, 251, .82));
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .11), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.product-hero-visual::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 47, 147, .18), transparent 62%), radial-gradient(circle at 75% 25%, rgba(31, 102, 255, .14), transparent 58%);
}

.product-hero-pack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  max-width: 430px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 36px 74px rgba(0, 0, 0, .18));
  animation: fdPackFloat 4s ease-in-out infinite alternate;
}

@keyframes fdPackFloat {
  from {
    transform: translate(-50%, -50%) rotate(-1deg);
  }

  to {
    transform: translate(-50%, -54%) rotate(1deg);
  }
}

.hero-mini-card {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #263244;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
  backdrop-filter: blur(12px);
}

.hero-mini-card i {
  color: var(--fd-pink);
  font-size: 16px;
}

.hero-mini-card.a {
  left: 8%;
  top: 18%;
}

.hero-mini-card.b {
  right: 7%;
  top: 34%;
}

.hero-mini-card.c {
  left: 10%;
  bottom: 16%;
}

.product-category-section {
  position: relative;
  padding: 70px 0;
  background: #fff;
}

.category-shell {
  position: relative;
  padding: 28px;
  border-radius: 38px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 246, 251, .88));
  border: 1px solid rgba(255, 47, 147, .12);
  box-shadow: var(--fd-shadow);
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.category-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--fd-pink-dark);
  background: rgba(255, 47, 147, .10);
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255, 47, 147, .12);
}

.category-title {
  margin: 10px 0 8px;
  color: var(--fd-ink);
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  letter-spacing: -.04em;
  font-weight: 950;
}

.category-subtitle {
  max-width: 680px;
  color: var(--fd-muted);
  line-height: 1.7;
  margin: 0;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.product-filter-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 900;
  color: var(--fd-ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 47, 147, .13);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  transition: .3s ease;
}

.product-filter-btn.active,
.product-filter-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255, 47, 147, .22);
}

.product-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.catalog-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(255, 247, 251, .94));
  border: 1px solid rgba(255, 47, 147, .14);
  box-shadow: 0 20px 56px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
  transition: .35s ease;
}

.catalog-card.is-hidden {
  display: none;
}

.catalog-card:hover {
  transform: translateY(-9px);
  border-color: rgba(255, 47, 147, .28);
  box-shadow: 0 34px 82px rgba(255, 47, 147, .16);
}

.catalog-card-top {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.catalog-badge,
.catalog-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 47, 147, .13);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
}

.catalog-badge {
  color: var(--fd-pink-dark);
}

.catalog-size {
  color: var(--fd-blue);
}

.catalog-media {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 18px;
  background: radial-gradient(circle at 50% 62%, rgba(255, 47, 147, .16), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 249, 252, .60));
}

.catalog-media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 175px;
  height: 35px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(15, 23, 42, .12);
  filter: blur(13px);
}

.catalog-media img {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 310px;
  height: 195px;
  object-fit: contain;
  filter: drop-shadow(0 28px 36px rgba(255, 47, 147, .17)) drop-shadow(0 13px 22px rgba(15, 23, 42, .13));
  transition: .35s ease;
}

.catalog-card:hover .catalog-media img {
  transform: translateY(-7px) scale(1.045);
}

.catalog-body {
  padding: 20px;
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid rgba(255, 47, 147, .10);
}

.catalog-body h3 {
  margin: 0 0 7px;
  color: var(--fd-ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}

.catalog-body p {
  min-height: 44px;
  margin: 0 0 15px;
  color: var(--fd-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.catalog-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.catalog-spec {
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255, 240, 247, .72);
  border: 1px solid rgba(255, 47, 147, .10);
}

.catalog-spec small {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.catalog-spec strong {
  display: block;
  margin-top: 5px;
  color: var(--fd-ink);
  font-size: 14px;
  font-weight: 950;
}

.catalog-actions {
  display: flex;
  gap: 9px;
}

.catalog-btn {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 900;
}

.catalog-btn.primary {
  flex: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-pink), var(--fd-blue));
  box-shadow: 0 12px 26px rgba(255, 47, 147, .22);
}

.catalog-btn.whatsapp {
  width: 40px;
  min-width: 40px;
  color: #25d366;
  background: rgba(37, 211, 102, .10);
  border: 1px solid rgba(37, 211, 102, .26);
}

.catalog-btn.whatsapp:hover {
  color: #fff;
  background: #25d366;
}

.product-compare-strip {
  margin-top: 28px;
  padding: 22px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 240, 247, .86));
  border: 1px solid rgba(255, 47, 147, .13);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.product-compare-strip h3 {
  margin: 0;
  color: var(--fd-ink);
  font-size: 20px;
  font-weight: 950;
}

.product-compare-strip p {
  margin: 4px 0 0;
  color: var(--fd-muted);
  font-size: 14px;
}

@media(max-width:1199.98px) {
  .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-page-hero {
    padding: 70px 0 54px;
  }
}

@media(max-width:991.98px) {
  .product-page-hero {
    text-align: center;
    padding: 58px 0 46px;
  }

  .product-page-kicker,
  .product-page-text {
    margin-left: auto;
    margin-right: auto;
  }

  .product-hero-actions {
    justify-content: center;
  }

  .product-hero-visual {
    min-height: 390px;
    margin-top: 20px;
  }

  .category-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-tabs {
    justify-content: flex-start;
  }

  .category-shell {
    padding: 24px;
    border-radius: 32px;
  }
}

@media(max-width:767.98px) {
  .product-catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-card {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .product-page-hero::before {
    inset: 10px;
    border-radius: 30px;
  }

  .product-hero-visual {
    min-height: 340px;
    border-radius: 30px;
  }

  .product-hero-pack {
    max-width: 310px;
  }

  .hero-mini-card {
    display: none;
  }

  .product-compare-strip {
    flex-direction: column;
    text-align: center;
  }

  .fd-btn-primary,
  .fd-btn-secondary {
    width: 100%;
  }

  .product-hero-actions {
    width: 100%;
  }

  .catalog-media {
    height: 225px;
  }

  .catalog-media img {
    max-width: 255px;
    height: 175px;
  }
}

@media(max-width:575.98px) {
  .product-page-hero {
    padding: 44px 0 34px;
  }

  .product-page-title {
    font-size: 2.25rem;
  }

  .product-page-text {
    font-size: 14.5px;
    line-height: 1.65;
  }

  .product-category-section {
    padding: 44px 0;
  }

  .category-shell {
    padding: 18px 14px;
    border-radius: 24px;
  }

  .category-tabs {
    gap: 8px;
  }

  .product-filter-btn {
    font-size: 12px;
    padding: 9px 12px;
  }

  .catalog-card {
    border-radius: 24px;
  }

  .catalog-media {
    height: 205px;
    padding: 42px 14px 12px;
  }

  .catalog-media img {
    max-width: 225px;
    height: 158px;
  }

  .catalog-body {
    padding: 15px;
  }

  .catalog-body h3 {
    font-size: 16px;
  }

  .catalog-specs {
    gap: 8px;
  }

  .catalog-btn.primary {
    font-size: 11.8px;
  }

  .product-compare-strip {
    padding: 18px;
    border-radius: 22px;
  }
}




/* TECHNOLOGY */



/* =========================================================
   FLYDAYZ TECHNOLOGY PAGE
========================================================= */

:root {
  --tech-pink: #e7358b;
  --tech-pink-dark: #c91f73;
  --tech-purple: #7b3ff2;
  --tech-blue: #0768ad;
  --tech-blue-dark: #064d85;
  --tech-green: #25d366;
  --tech-yellow: #ffe400;
  --tech-dark: #141827;
  --tech-muted: #667085;
  --tech-soft: #fff6fa;
  --tech-white: #ffffff;
}

/* =========================================================
   COMMON TECHNOLOGY ELEMENTS
========================================================= */

.tech-section-kicker,
.tech-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--tech-pink-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .15px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(231, 53, 139, .14);
  box-shadow: 0 12px 28px rgba(231, 53, 139, .09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tech-section-kicker span,
.tech-kicker span {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
}

.tech-section-head {
  max-width: 820px;
  margin: 0 auto 44px;
}

.tech-section-head .tech-section-kicker {
  margin-bottom: 13px;
}

.tech-section-head h2,
.tech-products-header h2,
.tech-layer-content h2,
.tech-testing-content h2 {
  margin: 0;
  color: var(--tech-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}

.tech-section-head p,
.tech-products-header p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--tech-muted);
  font-size: 15.5px;
  line-height: 1.68;
  font-weight: 500;
}

.tech-btn-primary,
.tech-btn-secondary,
.tech-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease;
}

.tech-btn-primary {
  color: #fff;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple));
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 17px 38px rgba(231, 53, 139, .26);
}

.tech-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(231, 53, 139, .34);
}

.tech-btn-secondary {
  color: var(--tech-dark);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(20, 24, 39, .1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}

.tech-btn-secondary:hover {
  color: var(--tech-pink);
  transform: translateY(-4px);
  border-color: rgba(231, 53, 139, .25);
}

.tech-whatsapp-btn {
  color: #fff;
  background: #25d366;
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .24);
}

.tech-whatsapp-btn:hover {
  color: #fff;
  transform: translateY(-4px);
  background: #20bd5b;
}


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

.tech-page-hero {
  position: relative;
  min-height: 760px;
  padding: 10px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(720px 400px at 7% 15%,
      rgba(231, 53, 139, .16),
      transparent 63%),
    radial-gradient(800px 460px at 92% 15%,
      rgba(7, 104, 173, .15),
      transparent 62%),
    linear-gradient(135deg,
      #ffffff 0%,
      #fff5fa 48%,
      #eef6ff 100%);
}

.tech-page-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 30px 90px rgba(231, 53, 139, .07);
}

.tech-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(rgba(231, 53, 139, .035) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(7, 104, 173, .035) 1px,
      transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.tech-hero-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.tech-hero-glow-one {
  width: 440px;
  height: 440px;
  left: -240px;
  top: 130px;
  background: rgba(231, 53, 139, .13);
}

.tech-hero-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -130px;
  background: rgba(7, 104, 173, .14);
}

.tech-hero-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.tech-pad-one {
  width: 400px;
  left: -160px;
  bottom: -100px;
  opacity: .05;
  transform: rotate(-22deg);
}

.tech-pad-two {
  width: 360px;
  right: -120px;
  top: 90px;
  opacity: .055;
  transform: rotate(18deg);
}

.tech-page-hero .container {
  position: relative;
  z-index: 3;
}

.tech-hero-content {
  max-width: 660px;
}

.tech-hero-title {
  margin: 17px 0 22px;
  color: var(--tech-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 700;
  text-shadow: 0 16px 36px rgba(231, 53, 139, .1);
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.tech-hero-title span {
  display: block;

  /* Keeps letters with descenders, such as “g”, fully visible. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  overflow: visible;

  color: transparent;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple),
      var(--tech-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tech-hero-text {
  max-width: 640px;
  margin: 0;
  color: #5f6c82;
  font-size: 16.5px;
  line-height: 1.76;
  font-weight: 500;
}

.tech-hero-points {
  display: grid;
  gap: 11px;
  margin-top: 26px;
}

.tech-hero-point {
  max-width: 560px;
  padding: 13px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(231, 53, 139, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
  backdrop-filter: blur(12px);
}

.tech-hero-point>i {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
}

.tech-hero-point strong,
.tech-hero-point span {
  display: block;
}

.tech-hero-point strong {
  color: var(--tech-dark);
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 900;
}

.tech-hero-point span {
  margin-top: 3px;
  color: var(--tech-muted);
  font-size: 11.8px;
  line-height: 1.35;
  font-weight: 650;
}

.tech-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

/* Showcase */
.tech-hero-showcase {
  position: relative;
  min-height: 610px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 14%,
      rgba(231, 53, 139, .18),
      transparent 36%),
    radial-gradient(circle at 88% 17%,
      rgba(7, 104, 173, .17),
      transparent 37%),
    linear-gradient(145deg,
      rgba(255, 255, 255, .92),
      rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .86);
  box-shadow:
    0 38px 100px rgba(231, 53, 139, .15),
    0 24px 70px rgba(7, 104, 173, .1),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
}

.tech-hero-showcase::after {
  content: "";
  position: absolute;
  left: 35px;
  right: 35px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(90deg,
      var(--tech-pink),
      var(--tech-purple),
      var(--tech-blue));
}

.tech-showcase-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(231, 53, 139, .23);
  pointer-events: none;
}

.tech-showcase-orbit.orbit-one {
  width: 390px;
  height: 390px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  animation: technologyOrbit 18s linear infinite;
}

.tech-showcase-orbit.orbit-two {
  width: 290px;
  height: 290px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-color: rgba(7, 104, 173, .24);
  animation: technologyOrbitReverse 14s linear infinite;
}

@keyframes technologyOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes technologyOrbitReverse {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.tech-showcase-top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tech-showcase-top span {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 11.5px;
  font-weight: 850;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(231, 53, 139, .12);
}

.tech-showcase-top span i {
  color: var(--tech-pink);
}

.tech-showcase-top strong {
  padding: 10px 15px;
  border-radius: 17px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
  box-shadow: 0 15px 32px rgba(231, 53, 139, .22);
}

.tech-product-stage {
  position: relative;
  min-height: 445px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-product-aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.tech-product-aura.aura-one {
  width: 390px;
  height: 390px;
  background:
    radial-gradient(circle,
      rgba(231, 53, 139, .18),
      transparent 64%);
}

.tech-product-aura.aura-two {
  width: 310px;
  height: 310px;
  background:
    radial-gradient(circle,
      rgba(7, 104, 173, .16),
      transparent 66%);
}

.tech-stage-pad {
  position: absolute;
  z-index: 1;
  width: min(82%, 380px);
  max-height: 370px;
  object-fit: contain;
  opacity: .085;
  transform: rotate(-14deg);
}

.tech-stage-product {
  position: relative;
  z-index: 3;
  width: min(92%, 450px);
  max-height: 355px;
  object-fit: contain;
  filter:
    drop-shadow(0 40px 70px rgba(15, 23, 42, .22)) drop-shadow(0 20px 38px rgba(231, 53, 139, .18));
  animation: techProductFloat 4.7s ease-in-out infinite alternate;
}

@keyframes techProductFloat {
  to {
    transform: translateY(-13px) rotate(1deg);
  }
}

.tech-floating-chip {
  position: absolute;
  z-index: 5;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tech-dark);
  font-size: 11.5px;
  font-weight: 900;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
}

.tech-floating-chip i {
  color: var(--tech-pink);
}

.tech-floating-chip.chip-one {
  left: 14px;
  top: 105px;
}

.tech-floating-chip.chip-two {
  right: 5px;
  top: 190px;
}

.tech-floating-chip.chip-three {
  left: 38px;
  bottom: 62px;
}

.tech-showcase-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(231, 53, 139, .11);
}

.tech-showcase-bottom div {
  padding: 10px 7px;
  border-radius: 17px;
  text-align: center;
  background: rgba(255, 247, 251, .8);
}

.tech-showcase-bottom strong,
.tech-showcase-bottom span {
  display: block;
}

.tech-showcase-bottom strong {
  color: var(--tech-dark);
  font-size: 12px;
  font-weight: 900;
}

.tech-showcase-bottom span {
  margin-top: 3px;
  color: var(--tech-muted);
  font-size: 9.8px;
  font-weight: 700;
}

/* =========================================================
   TECHNOLOGY PILLARS
========================================================= */

.tech-pillars-section {
  position: relative;
  padding: 94px 0;
  overflow: hidden;
  background:
    radial-gradient(700px 360px at 7% 10%,
      rgba(231, 53, 139, .1),
      transparent 62%),
    radial-gradient(720px 380px at 94% 15%,
      rgba(7, 104, 173, .1),
      transparent 62%),
    linear-gradient(180deg,
      #ffffff,
      #fff8fc 50%,
      #ffffff);
}

.tech-pillar-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 292px;
  padding: 26px 17px 23px;
  border-radius: 30px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .97),
      rgba(255, 247, 251, .83));
  border: 1px solid rgba(231, 53, 139, .12);
  box-shadow:
    0 23px 58px rgba(15, 23, 42, .075),
    0 15px 36px rgba(231, 53, 139, .07);
  transition: .35s ease;
}

.tech-pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%,
      rgba(231, 53, 139, .11),
      transparent 37%),
    radial-gradient(circle at 91% 92%,
      rgba(7, 104, 173, .09),
      transparent 36%);
  pointer-events: none;
}

.tech-pillar-card:hover,
.tech-pillar-card.featured {
  transform: translateY(-9px);
  border-color: rgba(231, 53, 139, .27);
  box-shadow:
    0 34px 80px rgba(231, 53, 139, .15),
    0 20px 48px rgba(7, 104, 173, .09);
}

.tech-pillar-card>* {
  position: relative;
  z-index: 2;
}

.tech-pillar-number {
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(231, 53, 139, .12);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 950;
}

.tech-pillar-icon {
  width: 88px;
  height: 88px;
  margin: 3px auto 19px;
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe400;
  border: 4px solid #fff;
  outline: 3px solid var(--tech-pink);
  box-shadow:
    0 19px 40px rgba(231, 53, 139, .2),
    0 11px 28px rgba(255, 228, 0, .19);
  transition: .35s ease;
}

.tech-pillar-card:hover .tech-pillar-icon,
.tech-pillar-card.featured .tech-pillar-icon {
  transform: translateY(-5px) rotate(-4deg) scale(1.05);
}

.tech-pillar-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.tech-pillar-card h3 {
  margin: 0 0 10px;
  color: var(--tech-dark);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.tech-pillar-card p {
  margin: 0;
  color: var(--tech-muted);
  font-size: 12.4px;
  line-height: 1.6;
  font-weight: 650;
}

/* =========================================================
   LAYER SECTION
========================================================= */

.tech-layer-section {
  position: relative;
  padding: 98px 0;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      #fff7fb 0%,
      #ffffff 48%,
      #eff7ff 100%);
}

.tech-layer-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -250px;
  top: 60px;
  border-radius: 50%;
  background: rgba(7, 104, 173, .11);
  filter: blur(10px);
}

.tech-layer-visual {
  position: relative;
  min-height: 630px;
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(231, 53, 139, .15),
      transparent 42%),
    radial-gradient(circle at 80% 20%,
      rgba(7, 104, 173, .13),
      transparent 35%),
    linear-gradient(145deg,
      rgba(255, 255, 255, .94),
      rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow:
    0 35px 95px rgba(231, 53, 139, .13),
    0 22px 60px rgba(7, 104, 173, .09);
  backdrop-filter: blur(18px);
}

.layer-visual-label {
  position: absolute;
  top: 23px;
  left: 23px;
  z-index: 7;
  padding: 10px 15px;
  border-radius: 999px;
  color: var(--tech-pink-dark);
  font-size: 11.5px;
  font-weight: 900;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(231, 53, 139, .14);
}

.layer-product-wrap {
  position: absolute;
  inset: 75px 20px 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-product-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(231, 53, 139, .24);
}

.layer-product-ring.ring-one {
  width: 410px;
  height: 410px;
}

.layer-product-ring.ring-two {
  width: 315px;
  height: 315px;
  border-color: rgba(7, 104, 173, .24);
}

.layer-pad-outline {
  position: absolute;
  width: min(76%, 360px);
  max-height: 420px;
  object-fit: contain;
  opacity: .11;
  transform: rotate(-12deg);
}

.layer-product-pack {
  position: relative;
  z-index: 3;
  width: min(90%, 430px);
  max-height: 350px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 68px rgba(15, 23, 42, .21)) drop-shadow(0 18px 35px rgba(231, 53, 139, .17));
}

.layer-floating-tag {
  position: absolute;
  z-index: 8;
  max-width: 220px;
  min-height: 46px;
  padding: 9px 13px 9px 8px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tech-dark);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 850;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 15px 36px rgba(15, 23, 42, .1);
}

.layer-floating-tag span {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
}

.layer-tag-one {
  top: 103px;
  left: 20px;
}

.layer-tag-two {
  top: 205px;
  right: 16px;
}

.layer-tag-three {
  left: 30px;
  bottom: 155px;
}

.layer-tag-four {
  right: 24px;
  bottom: 50px;
}

.tech-layer-content .tech-section-kicker {
  margin-bottom: 15px;
}

.tech-layer-content h2 {
  max-width: 600px;
}

.tech-layer-intro {
  max-width: 650px;
  margin: 17px 0 25px;
  color: var(--tech-muted);
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 500;
}

.tech-layer-list {
  display: grid;
  gap: 12px;
}

.tech-layer-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(231, 53, 139, .1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
  transition: .3s ease;
}

.tech-layer-item:hover {
  transform: translateX(6px);
  border-color: rgba(231, 53, 139, .23);
  box-shadow: 0 20px 44px rgba(231, 53, 139, .1);
}

.tech-layer-item-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
  box-shadow: 0 13px 28px rgba(231, 53, 139, .18);
}

.tech-layer-item span {
  display: block;
  margin-bottom: 4px;
  color: var(--tech-pink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 900;
}

.tech-layer-item h3 {
  margin: 0 0 4px;
  color: var(--tech-dark);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.tech-layer-item p {
  margin: 0;
  color: var(--tech-muted);
  font-size: 12.2px;
  line-height: 1.55;
  font-weight: 600;
}

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

.tech-products-section {
  position: relative;
  padding: 98px 0;
  overflow: hidden;
  background:
    radial-gradient(720px 380px at 6% 11%,
      rgba(231, 53, 139, .11),
      transparent 62%),
    radial-gradient(760px 400px at 94% 18%,
      rgba(7, 104, 173, .11),
      transparent 62%),
    linear-gradient(180deg,
      #ffffff,
      #fff7fb 50%,
      #ffffff);
}

.tech-products-header {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .96),
      rgba(255, 246, 251, .79));
  border: 1px solid rgba(231, 53, 139, .12);
  box-shadow:
    0 25px 66px rgba(231, 53, 139, .1),
    0 14px 34px rgba(15, 23, 42, .05);
}

.tech-products-header .tech-section-kicker {
  margin-bottom: 12px;
}

.tech-products-header p {
  margin-left: 0;
  margin-right: 0;
}

.tech-category-summary {
  min-width: 150px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple),
      var(--tech-blue));
  box-shadow: 0 20px 44px rgba(231, 53, 139, .22);
}

.tech-category-summary strong,
.tech-category-summary span {
  display: block;
}

.tech-category-summary strong {
  font-size: 42px;
  line-height: .9;
  font-weight: 950;
}

.tech-category-summary span {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 850;
}

.tech-product-filters {
  margin-bottom: 28px;
  padding: 10px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(231, 53, 139, .11);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.tech-filter-btn {
  min-height: 41px;
  padding: 0 19px;
  border-radius: 999px;
  border: 1px solid rgba(231, 53, 139, .11);
  color: #465266;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  background: rgba(255, 255, 255, .85);
  transition: .3s ease;
}

.tech-filter-btn:hover,
.tech-filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple));
  box-shadow: 0 14px 30px rgba(231, 53, 139, .22);
}

.tech-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tech-product-card {
  position: relative;
  min-width: 0;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .99),
      rgba(255, 248, 252, .94));
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow:
    0 24px 64px rgba(15, 23, 42, .085),
    0 15px 38px rgba(231, 53, 139, .07);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    opacity .25s ease;
}

.tech-product-card:hover,
.tech-product-featured {
  transform: translateY(-9px);
  border-color: rgba(231, 53, 139, .26);
  box-shadow:
    0 35px 86px rgba(231, 53, 139, .15),
    0 20px 48px rgba(7, 104, 173, .09);
}

.tech-product-card.is-hidden {
  display: none;
}

.tech-product-card-top {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.tech-product-size {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tech-pink-dark);
  font-size: 11px;
  font-weight: 950;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(231, 53, 139, .15);
  box-shadow: 0 13px 29px rgba(15, 23, 42, .08);
}

.tech-product-flow {
  min-height: 31px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.tech-product-flow.normal {
  background:
    linear-gradient(135deg,
      #d94398,
      #a63fea);
}

.tech-product-flow.heavy {
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple));
}

.tech-product-flow.very-heavy {
  background:
    linear-gradient(135deg,
      var(--tech-blue),
      var(--tech-blue-dark));
}

.tech-product-media {
  position: relative;
  min-height: 290px;
  padding: 63px 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tech-product-media-bg {
  position: absolute;
  width: 265px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(231, 53, 139, .17),
      transparent 64%),
    radial-gradient(circle at 75% 25%,
      rgba(7, 104, 173, .13),
      transparent 58%);
}

.tech-product-pad-bg {
  position: absolute;
  width: min(75%, 260px);
  height: 220px;
  object-fit: contain;
  opacity: .08;
  transform: rotate(-12deg);
}

.tech-category-product-img {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 330px;
  height: 200px;
  object-fit: contain;
  filter:
    drop-shadow(0 31px 48px rgba(15, 23, 42, .18)) drop-shadow(0 15px 28px rgba(231, 53, 139, .14));
  transition: .35s ease;
}

.tech-product-card:hover .tech-category-product-img {
  transform: translateY(-7px) scale(1.04);
}

.tech-product-body {
  padding: 21px;
  border-top: 1px solid rgba(231, 53, 139, .09);
  background: rgba(255, 255, 255, .96);
}

.tech-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

.tech-product-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--tech-pink);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .45px;
  font-weight: 900;
}

.tech-product-heading h3 {
  margin: 0;
  color: var(--tech-dark);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 950;
}

.tech-product-heading>strong {
  padding: 9px 11px;
  border-radius: 14px;
  color: var(--tech-pink-dark);
  font-size: 11px;
  white-space: nowrap;
  background: #fff1f7;
  border: 1px solid rgba(231, 53, 139, .11);
}

.tech-product-body>p {
  min-height: 45px;
  margin: 10px 0 15px;
  color: var(--tech-muted);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 600;
}

.tech-product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}

.tech-product-features span {
  min-height: 29px;
  padding: 7px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #485469;
  font-size: 9.7px;
  font-weight: 850;
  background: #fff7fb;
  border: 1px solid rgba(231, 53, 139, .1);
}

.tech-product-features i {
  color: var(--tech-pink);
}

.tech-flow-meter {
  padding: 12px;
  border-radius: 18px;
  color: #fff;
}

.tech-flow-meter.normal-flow {
  background:
    linear-gradient(135deg,
      #c93e93,
      #9740dd);
}

.tech-flow-meter.heavy-flow {
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-pink-dark));
}

.tech-flow-meter.very-heavy-flow {
  background:
    linear-gradient(135deg,
      var(--tech-blue),
      var(--tech-blue-dark));
}

.tech-flow-labels {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 7px;
}

.tech-flow-labels span {
  font-size: 8px;
  line-height: 1;
  font-weight: 850;
}

.tech-flow-track {
  position: relative;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .16);
}

.tech-flow-fill {
  position: absolute;
  left: 3px;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(231, 53, 139, .65);
}

.normal-flow .tech-flow-fill {
  width: 33%;
}

.heavy-flow .tech-flow-fill {
  width: 72%;
}

.very-heavy-flow .tech-flow-fill {
  width: calc(100% - 6px);
  background: rgba(7, 104, 173, .67);
}

.tech-flow-marker {
  position: absolute;
  top: -4px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #ff245d;
}

.normal-flow .tech-flow-marker {
  left: 33%;
}

.heavy-flow .tech-flow-marker {
  left: 72%;
}

.very-heavy-flow .tech-flow-marker {
  left: 96%;
}

.tech-flow-meter>strong {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .2px;
  font-weight: 950;
}

.tech-product-btn {
  width: 100%;
  min-height: 43px;
  margin-top: 15px;
  padding: 0 17px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 11.8px;
  font-weight: 900;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-purple));
  box-shadow: 0 14px 32px rgba(231, 53, 139, .23);
  transition: .3s ease;
}

.tech-product-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(231, 53, 139, .31);
}

.tech-products-empty {
  margin-top: 20px;
  padding: 30px;
  border-radius: 24px;
  color: var(--tech-muted);
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .1);
}

/* =========================================================
   PERFORMANCE
========================================================= */

.tech-performance-section {
  position: relative;
  padding: 94px 0;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      #fff7fb 0%,
      #ffffff 50%,
      #f0f7ff 100%);
}

.tech-performance-card {
  position: relative;
  height: 100%;
  min-height: 265px;
  padding: 28px 21px;
  border-radius: 30px;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(231, 53, 139, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s ease;
}

.tech-performance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 17% 12%,
      rgba(231, 53, 139, .1),
      transparent 36%),
    radial-gradient(circle at 90% 92%,
      rgba(7, 104, 173, .08),
      transparent 36%);
}

.tech-performance-card:hover,
.tech-performance-card.featured {
  transform: translateY(-8px);
  border-color: rgba(231, 53, 139, .25);
  box-shadow:
    0 32px 76px rgba(231, 53, 139, .14),
    0 18px 40px rgba(7, 104, 173, .08);
}

.tech-performance-card>* {
  position: relative;
  z-index: 2;
}

.tech-performance-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background:
    linear-gradient(135deg,
      var(--tech-pink),
      var(--tech-blue));
  box-shadow: 0 19px 39px rgba(231, 53, 139, .22);
}

.tech-performance-card>span {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(231, 53, 139, .13);
  font-size: 34px;
  font-weight: 950;
}

.tech-performance-card h3 {
  margin: 0 0 9px;
  color: var(--tech-dark);
  font-size: 17px;
  font-weight: 950;
}

.tech-performance-card p {
  margin: 0;
  color: var(--tech-muted);
  font-size: 12.8px;
  line-height: 1.62;
  font-weight: 600;
}

/* =========================================================
   TESTING SECTION
========================================================= */

.tech-testing-section {
  padding: 94px 0;
  background:
    radial-gradient(720px 380px at 10% 20%,
      rgba(231, 53, 139, .1),
      transparent 62%),
    radial-gradient(720px 400px at 90% 15%,
      rgba(7, 104, 173, .1),
      transparent 62%),
    #ffffff;
}

.tech-testing-card {
  padding: 42px;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .96),
      rgba(255, 246, 251, .75));
  border: 1px solid rgba(231, 53, 139, .12);
  box-shadow:
    0 35px 95px rgba(231, 53, 139, .13),
    0 22px 60px rgba(7, 104, 173, .08);
}

.tech-testing-content .tech-section-kicker {
  margin-bottom: 15px;
}

.tech-testing-content>p {
  max-width: 650px;
  margin: 17px 0 22px;
  color: var(--tech-muted);
  font-size: 15px;
  line-height: 1.68;
  font-weight: 500;
}

.tech-testing-list {
  display: grid;
  gap: 10px;
  margin-bottom: 25px;
}

.tech-testing-list div {
  padding: 11px 13px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #465266;
  font-size: 12.2px;
  font-weight: 750;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(231, 53, 139, .1);
}

.tech-testing-list i {
  color: var(--tech-pink);
  font-size: 16px;
}

.tech-testing-visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testing-visual-circle {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(231, 53, 139, .17),
      transparent 63%),
    radial-gradient(circle at 75% 25%,
      rgba(7, 104, 173, .13),
      transparent 60%);
}

.testing-product-img {
  position: relative;
  z-index: 3;
  width: min(92%, 450px);
  max-height: 350px;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 66px rgba(15, 23, 42, .22)) drop-shadow(0 17px 32px rgba(231, 53, 139, .17));
}

.testing-badge {
  position: absolute;
  z-index: 5;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tech-dark);
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
}

.testing-badge i {
  color: var(--tech-pink);
}

.testing-badge-one {
  top: 58px;
  left: 3px;
}

.testing-badge-two {
  right: 0;
  top: 165px;
}

.testing-badge-three {
  left: 38px;
  bottom: 65px;
}

/* =========================================================
   TECHNOLOGY CTA
========================================================= */

.tech-page-cta-section {
  padding: 78px 0 94px;
  background:
    linear-gradient(180deg,
      #ffffff,
      #fff5fa);
}

.tech-page-cta {
  position: relative;
  padding: 35px 38px;
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background:
    radial-gradient(circle at 10% 10%,
      rgba(231, 53, 139, .15),
      transparent 32%),
    radial-gradient(circle at 93% 90%,
      rgba(7, 104, 173, .14),
      transparent 34%),
    linear-gradient(145deg,
      rgba(255, 255, 255, .97),
      rgba(255, 244, 250, .82));
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow:
    0 30px 82px rgba(231, 53, 139, .13),
    0 18px 44px rgba(15, 23, 42, .07);
}

.tech-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tech-pink-dark);
  font-size: 11px;
  font-weight: 850;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(231, 53, 139, .12);
}

.tech-page-cta h2 {
  margin: 0 0 8px;
  color: var(--tech-dark);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.04em;
  font-weight: 950;
}

.tech-page-cta p {
  max-width: 690px;
  margin: 0;
  color: var(--tech-muted);
  font-size: 13.7px;
  line-height: 1.62;
  font-weight: 600;
}

.tech-page-cta-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

  .tech-page-hero {
    min-height: auto;
    padding: 96px 0 80px;
  }

  .tech-hero-showcase {
    min-height: 560px;
  }

  .tech-product-grid {
    gap: 20px;
  }

  .tech-category-product-img {
    max-width: 285px;
    height: 185px;
  }

  .tech-layer-visual {
    min-height: 590px;
  }
}

@media (max-width: 991.98px) {

  .tech-page-hero {
    padding: 80px 0 70px;
    text-align: center;
  }

  .tech-hero-content {
    max-width: 760px;
    margin: 0 auto;
  }

  .tech-kicker,
  .tech-section-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .tech-hero-actions {
    justify-content: center;
  }

  .tech-hero-showcase {
    max-width: 720px;
    min-height: 570px;
    margin: 0 auto;
  }

  .tech-layer-content {
    text-align: center;
  }

  .tech-layer-content h2,
  .tech-layer-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-layer-list {
    text-align: left;
  }

  .tech-layer-visual {
    max-width: 720px;
    margin: 0 auto;
  }

  .tech-products-header {
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
  }

  .tech-products-header .tech-section-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-products-header p {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-category-summary {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
  }

  .tech-category-summary span {
    margin-top: 0;
  }

  .tech-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tech-testing-content {
    text-align: center;
  }

  .tech-testing-content>p {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-testing-list {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .tech-testing-visual {
    max-width: 700px;
    margin: 0 auto;
  }

  .tech-page-cta {
    flex-direction: column;
    text-align: center;
  }

  .tech-page-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {

  .tech-page-hero {
    padding: 68px 0 58px;
  }

  .tech-page-hero::before {
    inset: 10px;
    border-radius: 30px;
  }

  .tech-hero-title {
    font-size: clamp(2.65rem, 10vw, 4.25rem);
  }

  .tech-hero-text {
    font-size: 14.7px;
    line-height: 1.65;
  }

  .tech-hero-showcase {
    min-height: 510px;
    padding: 20px;
    border-radius: 32px;
  }

  .tech-product-stage {
    min-height: 380px;
  }

  .tech-stage-product {
    width: min(92%, 380px);
    max-height: 300px;
  }

  .tech-stage-pad {
    max-height: 310px;
  }

  .tech-showcase-orbit.orbit-one {
    width: 330px;
    height: 330px;
  }

  .tech-showcase-orbit.orbit-two {
    width: 250px;
    height: 250px;
  }

  .tech-floating-chip.chip-one {
    left: 3px;
  }

  .tech-floating-chip.chip-two {
    right: 0;
  }

  .tech-floating-chip.chip-three {
    left: 10px;
  }

  .tech-pillars-section,
  .tech-layer-section,
  .tech-products-section,
  .tech-performance-section,
  .tech-testing-section {
    padding: 68px 0;
  }

  .tech-layer-visual {
    min-height: 545px;
    border-radius: 32px;
  }

  .layer-floating-tag {
    max-width: 185px;
    font-size: 10px;
  }

  .layer-product-pack {
    width: min(88%, 360px);
  }

  .tech-product-grid {
    grid-template-columns: 1fr;
  }

  .tech-product-card {
    max-width: 540px;
    margin: 0 auto;
  }

  .tech-product-media {
    min-height: 275px;
  }

  .tech-category-product-img {
    max-width: 345px;
    height: 205px;
  }

  .tech-testing-card {
    padding: 29px 22px;
    border-radius: 32px;
  }

  .tech-page-cta {
    padding: 28px 22px;
    border-radius: 30px;
  }
}

@media (max-width: 575.98px) {

  .tech-page-hero {
    padding: 57px 0 48px;
  }

  .tech-pad-one,
  .tech-pad-two {
    display: none;
  }

  .tech-kicker,
  .tech-section-kicker {
    min-height: 35px;
    padding: 6px 13px 6px 7px;
    font-size: 10.7px;
  }

  .tech-kicker span,
  .tech-section-kicker span {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .tech-hero-title {
    margin-top: 14px;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    line-height: .98;
  }

  .tech-hero-text {
    font-size: 13.8px;
    line-height: 1.58;
  }

  .tech-hero-point {
    padding: 11px;
    border-radius: 17px;
  }

  .tech-hero-point>i {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 14px;
  }

  .tech-hero-actions {
    flex-direction: column;
  }

  .tech-btn-primary,
  .tech-btn-secondary,
  .tech-whatsapp-btn {
    width: 100%;
    min-height: 43px;
    font-size: 12px;
  }

  .tech-hero-showcase {
    min-height: 445px;
    padding: 15px;
    border-radius: 26px;
  }

  .tech-showcase-top {
    align-items: stretch;
    flex-direction: column;
  }

  .tech-showcase-top span,
  .tech-showcase-top strong {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .tech-product-stage {
    min-height: 280px;
  }

  .tech-stage-product {
    width: min(94%, 280px);
    max-height: 225px;
  }

  .tech-stage-pad {
    width: min(82%, 235px);
    max-height: 235px;
  }

  .tech-showcase-orbit.orbit-one {
    width: 240px;
    height: 240px;
  }

  .tech-showcase-orbit.orbit-two {
    width: 180px;
    height: 180px;
  }

  .tech-floating-chip {
    display: none;
  }

  .tech-showcase-bottom {
    grid-template-columns: 1fr;
  }

  .tech-section-head {
    margin-bottom: 33px;
  }

  .tech-section-head h2,
  .tech-products-header h2,
  .tech-layer-content h2,
  .tech-testing-content h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem);
  }

  .tech-section-head p,
  .tech-products-header p {
    font-size: 13.6px;
    line-height: 1.58;
  }

  .tech-pillar-card {
    min-height: auto;
    padding: 22px 16px;
    border-radius: 23px;
  }

  .tech-pillar-icon {
    width: 74px;
    height: 74px;
    outline-width: 2px;
  }

  .tech-layer-visual {
    min-height: 460px;
    border-radius: 26px;
  }

  .layer-product-wrap {
    inset: 60px 10px 60px;
  }

  .layer-product-ring.ring-one {
    width: 275px;
    height: 275px;
  }

  .layer-product-ring.ring-two {
    width: 210px;
    height: 210px;
  }

  .layer-product-pack {
    width: min(91%, 280px);
    max-height: 235px;
  }

  .layer-pad-outline {
    width: min(75%, 235px);
    max-height: 250px;
  }

  .layer-floating-tag {
    max-width: 155px;
    min-height: 40px;
    padding: 7px 9px 7px 6px;
    border-radius: 14px;
    font-size: 8.8px;
  }

  .layer-floating-tag span {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .layer-tag-one {
    top: 65px;
    left: 8px;
  }

  .layer-tag-two {
    top: 150px;
    right: 7px;
  }

  .layer-tag-three {
    left: 8px;
    bottom: 120px;
  }

  .layer-tag-four {
    right: 8px;
    bottom: 37px;
  }

  .tech-layer-item {
    padding: 12px;
    border-radius: 18px;
  }

  .tech-layer-item-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 14px;
    font-size: 16px;
  }

  .tech-products-header {
    padding: 21px 16px;
    border-radius: 25px;
  }

  .tech-category-summary {
    border-radius: 20px;
  }

  .tech-product-filters {
    padding: 8px;
    border-radius: 24px;
  }

  .tech-filter-btn {
    width: 100%;
  }

  .tech-product-card {
    border-radius: 25px;
  }

  .tech-product-media {
    min-height: 220px;
    padding: 55px 12px 15px;
  }

  .tech-category-product-img {
    max-width: 275px;
    height: 160px;
  }

  .tech-product-pad-bg {
    height: 180px;
  }

  .tech-product-body {
    padding: 16px;
  }

  .tech-product-heading h3 {
    font-size: 16px;
  }

  .tech-product-heading>strong {
    font-size: 9.7px;
  }

  .tech-product-body>p {
    min-height: auto;
    font-size: 12px;
  }

  .tech-testing-card {
    padding: 23px 16px;
    border-radius: 26px;
  }

  .tech-testing-visual {
    min-height: 350px;
  }

  .testing-visual-circle {
    width: 270px;
    height: 270px;
  }

  .testing-product-img {
    width: min(94%, 300px);
    max-height: 240px;
  }

  .testing-badge {
    font-size: 9px;
    padding: 7px 9px;
  }

  .testing-badge-one {
    top: 28px;
  }

  .testing-badge-two {
    top: 115px;
  }

  .testing-badge-three {
    left: 10px;
    bottom: 35px;
  }

  .tech-page-cta-section {
    padding: 55px 0 70px;
  }

  .tech-page-cta {
    padding: 23px 16px;
    border-radius: 25px;
  }

  .tech-page-cta h2 {
    font-size: 1.9rem;
  }

  .tech-page-cta-actions {
    width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 380px) {

  .tech-hero-title {
    font-size: 2.25rem;
  }

  .tech-hero-showcase {
    min-height: 425px;
  }

  .tech-stage-product {
    width: min(95%, 255px);
  }

  .tech-layer-visual {
    min-height: 430px;
  }

  .layer-floating-tag {
    max-width: 142px;
    font-size: 8.2px;
  }

  .tech-category-product-img {
    max-width: 245px;
    height: 145px;
  }
}

/* =========================================================
   TECHNOLOGY PAGE END
========================================================= */








:root {
  --wy-pink: #e7358b;
  --wy-pink-dark: #c71f72;
  --wy-purple: #7b3ff2;
  --wy-blue: #086caf;
  --wy-green: #25d366;
  --wy-dark: #151927;
  --wy-muted: #667085
}

.wy-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wy-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(231, 53, 139, .14);
  box-shadow: 0 12px 28px rgba(231, 53, 139, .09);
  backdrop-filter: blur(12px)
}

.wy-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue));
  font-size: 11px
}

.wy-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.wy-section-head .wy-kicker {
  margin-bottom: 13px
}

.wy-section-head h2,
.wy-products-head h2,
.wy-quality-content h2 {
  margin: 0;
  color: var(--wy-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700
}

.wy-section-head p,
.wy-products-head p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--wy-muted);
  font-size: 15.5px;
  line-height: 1.68
}

.wy-btn-primary,
.wy-btn-secondary,
.wy-whatsapp {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s
}

.wy-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple));
  box-shadow: 0 17px 38px rgba(231, 53, 139, .26)
}

.wy-btn-secondary {
  color: var(--wy-dark);
  background: #fff;
  border: 1px solid rgba(20, 24, 39, .1)
}

.wy-whatsapp {
  color: #fff;
  background: var(--wy-green)
}

.wy-btn-primary:hover,
.wy-btn-secondary:hover,
.wy-whatsapp:hover {
  transform: translateY(-4px)
}

.wy-hero {
  position: relative;
  min-height: 760px;
  padding: 112px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(720px 400px at 7% 15%, rgba(231, 53, 139, .16), transparent 63%), radial-gradient(800px 460px at 92% 15%, rgba(8, 108, 175, .15), transparent 62%), linear-gradient(135deg, #fff 0%, #fff5fa 48%, #eef7ff 100%)
}

.wy-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .82)
}

.wy-grid {
  position: absolute;
  inset: 0;
  opacity: .34;
  background: linear-gradient(rgba(231, 53, 139, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 108, 175, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.wy-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px)
}

.wy-glow-one {
  width: 440px;
  height: 440px;
  left: -240px;
  top: 130px;
  background: rgba(231, 53, 139, .13)
}

.wy-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -130px;
  background: rgba(8, 108, 175, .14)
}

.wy-hero-decor {
  position: absolute;
  opacity: .055
}

.wy-decor-one {
  width: 410px;
  left: -170px;
  bottom: -100px;
  transform: rotate(-22deg)
}

.wy-decor-two {
  width: 360px;
  right: -120px;
  top: 95px;
  transform: rotate(18deg)
}

.wy-hero-title {
  margin: 18px 0 22px;
  color: var(--wy-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.16;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.wy-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple), var(--wy-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.wy-hero-copy {
  max-width: 640px;
  color: #5f6c82;
  font-size: 16.5px;
  line-height: 1.76
}

.wy-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.wy-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(231, 53, 139, .1)
}

.wy-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue))
}

.wy-hero-points strong,
.wy-hero-points span {
  display: block
}

.wy-hero-points strong {
  font-size: 12px
}

.wy-hero-points span {
  font-size: 10.5px;
  color: var(--wy-muted)
}

.wy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px
}

.wy-hero-showcase {
  position: relative;
  min-height: 610px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 14%, rgba(231, 53, 139, .18), transparent 36%), radial-gradient(circle at 88% 17%, rgba(8, 108, 175, .17), transparent 37%), linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .86);
  box-shadow: 0 38px 100px rgba(231, 53, 139, .15), 0 24px 70px rgba(8, 108, 175, .1)
}

.wy-showcase-top {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.wy-showcase-top span,
.wy-showcase-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900
}

.wy-showcase-top span {
  background: #fff
}

.wy-showcase-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue))
}

.wy-product-stage {
  position: relative;
  min-height: 445px;
  display: flex;
  align-items: center;
  justify-content: center
}

.wy-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(231, 53, 139, .23)
}

.wy-orbit-one {
  width: 390px;
  height: 390px
}

.wy-orbit-two {
  width: 290px;
  height: 290px;
  border-color: rgba(8, 108, 175, .24)
}

.wy-stage-pad {
  position: absolute;
  width: min(82%, 380px);
  opacity: .085;
  transform: rotate(-14deg)
}

.wy-stage-pack {
  position: relative;
  z-index: 3;
  width: min(92%, 450px);
  max-height: 355px;
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(15, 23, 42, .22))
}

.wy-float-chip {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 11px;
  font-weight: 900
}

.wy-chip-one {
  left: 12px;
  top: 105px
}

.wy-chip-two {
  right: 4px;
  top: 190px
}

.wy-chip-three {
  left: 38px;
  bottom: 62px
}

.wy-showcase-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .78)
}

.wy-showcase-bottom div {
  text-align: center;
  padding: 10px
}

.wy-showcase-bottom strong,
.wy-showcase-bottom span {
  display: block
}

.wy-showcase-bottom span {
  font-size: 10px;
  color: var(--wy-muted)
}

.wy-promise,
.wy-business {
  padding: 94px 0;
  background: #fff
}

.wy-promise-card,
.wy-business-card {
  position: relative;
  height: 100%;
  min-height: 265px;
  padding: 28px 21px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(231, 53, 139, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.wy-promise-card:hover,
.wy-promise-card.featured,
.wy-business-card:hover,
.wy-business-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(231, 53, 139, .14)
}

.wy-card-no {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(231, 53, 139, .13);
  font-size: 34px;
  font-weight: 950
}

.wy-promise-icon,
.wy-business-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue))
}

.wy-promise-card h3,
.wy-business-card h3 {
  font-size: 17px;
  font-weight: 950
}

.wy-promise-card p,
.wy-business-card p {
  color: var(--wy-muted);
  font-size: 12.8px;
  line-height: 1.62
}

.wy-five {
  padding: 10px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 48%, #eff7ff)
}

.wy-five-shell {
  padding: 34px;
  border-radius: 40px;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .12);
  box-shadow: 0 35px 95px rgba(231, 53, 139, .13)
}

.wy-five-head {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 28px
}

.wy-five-head h2 {
  font-size: clamp(2rem, 3.8vw, 3.55rem);
  font-weight: 950
}

.wy-five-badge {
  min-width: 140px;
  padding: 18px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple), var(--wy-blue))
}

.wy-five-badge strong {
  font-size: 46px
}

.wy-five-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px
}

.wy-five-card {
  padding: 23px 14px;
  border-radius: 26px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .11);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .065);
  transition: .35s
}

.wy-five-card:hover,
.wy-five-card.active {
  transform: translateY(-8px)
}

.wy-five-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 15px
}

.wy-five-card h3 {
  font-size: 14px;
  font-weight: 950
}

.wy-five-card p {
  font-size: 11.7px;
  color: var(--wy-muted)
}

.wy-products {
  padding: 98px 0;
  background: linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.wy-products-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .12);
  box-shadow: 0 25px 66px rgba(231, 53, 139, .1)
}

.wy-products-count {
  min-width: 150px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple), var(--wy-blue))
}

.wy-products-count strong,
.wy-products-count span {
  display: block
}

.wy-products-count strong {
  font-size: 42px
}

.wy-products-count span {
  font-size: 10.5px
}

.wy-filter-bar {
  margin-bottom: 28px;
  padding: 10px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  background: #fff
}

.wy-filter-btn {
  min-height: 41px;
  padding: 0 19px;
  border-radius: 999px;
  border: 1px solid rgba(231, 53, 139, .11);
  background: #fff;
  font-size: 12px;
  font-weight: 850
}

.wy-filter-btn.active,
.wy-filter-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple))
}

.wy-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.wy-product-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .085);
  transition: .35s
}

.wy-product-card:hover,
.wy-product-card.featured {
  transform: translateY(-9px)
}

.wy-product-card.is-hidden {
  display: none
}

.wy-product-top {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  z-index: 7;
  display: flex;
  justify-content: space-between
}

.wy-product-top span,
.wy-product-top strong {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 10px
}

.wy-product-top span {
  background: #fff;
  color: var(--wy-pink-dark)
}

.wy-product-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue))
}

.wy-product-media {
  position: relative;
  min-height: 285px;
  padding: 62px 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(231, 53, 139, .13), transparent 62%)
}

.wy-product-bg {
  position: absolute;
  width: min(75%, 260px);
  opacity: .08
}

.wy-product-img {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 330px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 31px 48px rgba(15, 23, 42, .18))
}

.wy-product-body {
  padding: 21px
}

.wy-product-eyebrow {
  color: var(--wy-pink);
  font-size: 9.5px;
  text-transform: uppercase;
  font-weight: 900
}

.wy-product-body h3 {
  font-size: 19px;
  font-weight: 950
}

.wy-product-body p {
  min-height: 45px;
  color: var(--wy-muted);
  font-size: 12.5px
}

.wy-product-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.wy-product-meta span {
  padding: 7px 9px;
  border-radius: 999px;
  background: #fff7fb;
  font-size: 9.7px
}

.wy-product-link {
  width: 100%;
  min-height: 43px;
  margin-top: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-purple))
}

.wy-quality {
  padding: 98px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 48%, #eff7ff)
}

.wy-quality-visual {
  position: relative;
  min-height: 600px;
  border-radius: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 35px 95px rgba(231, 53, 139, .13)
}

.wy-quality-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(231, 53, 139, .24)
}

.wy-quality-ring.ring-one {
  width: 410px;
  height: 410px
}

.wy-quality-ring.ring-two {
  width: 315px;
  height: 315px;
  border-color: rgba(8, 108, 175, .24)
}

.wy-quality-pad {
  position: absolute;
  width: min(76%, 360px);
  opacity: .11
}

.wy-quality-pack {
  position: relative;
  z-index: 3;
  width: min(90%, 430px);
  max-height: 350px;
  object-fit: contain
}

.wy-quality-chip {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1)
}

.wy-quality-chip.chip-one {
  left: 18px;
  top: 105px
}

.wy-quality-chip.chip-two {
  right: 8px;
  top: 210px
}

.wy-quality-chip.chip-three {
  left: 40px;
  bottom: 70px
}

.wy-quality-intro {
  margin: 17px 0 25px;
  color: var(--wy-muted)
}

.wy-quality-list {
  display: grid;
  gap: 12px
}

.wy-quality-list>div {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  gap: 14px;
  background: #fff
}

.wy-quality-list i {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--wy-pink), var(--wy-blue))
}

.wy-quality-list strong,
.wy-quality-list span {
  display: block
}

.wy-quality-list span {
  font-size: 12.2px;
  color: var(--wy-muted)
}

.wy-cta-section {
  padding: 75px 0 94px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.wy-cta-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #fff;
  border: 1px solid rgba(231, 53, 139, .13);
  box-shadow: 0 30px 82px rgba(231, 53, 139, .13)
}

.wy-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff7fb;
  color: var(--wy-pink-dark);
  font-size: 11px
}

.wy-cta-card h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 700;
}

.wy-cta-card p {
  color: var(--wy-muted)
}

.wy-cta-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto
}

@media(max-width:1199.98px) {
  .wy-five-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:991.98px) {
  .wy-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .wy-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .wy-hero-points {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .wy-hero-actions {
    justify-content: center
  }

  .wy-five-head,
  .wy-products-head,
  .wy-cta-card {
    flex-direction: column;
    text-align: center
  }

  .wy-product-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .wy-products-count {
    min-width: 100%
  }

  .wy-quality-content {
    text-align: center
  }

  .wy-quality-visual {
    max-width: 720px;
    margin: auto
  }

  .wy-cta-actions {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .wy-hero {
    padding: 68px 0 58px
  }

  .wy-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .wy-promise,
  .wy-five,
  .wy-products,
  .wy-quality,
  .wy-business {
    padding: 68px 0
  }

  .wy-five-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .wy-product-grid {
    grid-template-columns: 1fr
  }

  .wy-product-card {
    max-width: 540px;
    margin: auto
  }

  .wy-quality-visual {
    min-height: 545px
  }
}

@media(max-width:575.98px) {
  .wy-hero {
    padding: 57px 0 48px
  }

  .wy-hero-decor {
    display: none
  }

  .wy-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.35rem)
  }

  .wy-hero-points {
    grid-template-columns: 1fr
  }

  .wy-hero-actions,
  .wy-cta-actions {
    flex-direction: column
  }

  .wy-btn-primary,
  .wy-btn-secondary,
  .wy-whatsapp {
    width: 100%
  }

  .wy-hero-showcase {
    min-height: 445px;
    padding: 15px;
    border-radius: 26px
  }

  .wy-showcase-top {
    flex-direction: column
  }

  .wy-product-stage {
    min-height: 280px
  }

  .wy-stage-pack {
    width: min(94%, 280px)
  }

  .wy-orbit-one {
    width: 240px;
    height: 240px
  }

  .wy-orbit-two {
    width: 180px;
    height: 180px
  }

  .wy-float-chip {
    display: none
  }

  .wy-showcase-bottom {
    grid-template-columns: 1fr
  }

  .wy-five-shell {
    padding: 22px 15px
  }

  .wy-five-grid {
    grid-template-columns: 1fr
  }

  .wy-products-head {
    padding: 21px 16px
  }

  .wy-filter-btn {
    width: 100%
  }

  .wy-product-media {
    min-height: 220px
  }

  .wy-product-img {
    max-width: 275px;
    height: 160px
  }

  .wy-quality-visual {
    min-height: 460px
  }

  .wy-quality-ring.ring-one {
    width: 275px;
    height: 275px
  }

  .wy-quality-ring.ring-two {
    width: 210px;
    height: 210px
  }

  .wy-quality-pack {
    width: min(91%, 280px)
  }

  .wy-quality-chip {
    font-size: 8.8px
  }

  .wy-cta-card {
    padding: 23px 16px
  }
}



/*  DOWNLOAD  */





:root {
  --dl-pink: #e8338a;
  --dl-pink-dark: #c52273;
  --dl-purple: #7d43ee;
  --dl-blue: #086cac;
  --dl-dark: #161927;
  --dl-muted: #667085;
  --dl-soft: #fff6fa;
  --dl-white: #fff;
  --dl-green: #25d366;
}

.dl-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--dl-pink-dark);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09);
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(12px)
}

.dl-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-blue));
  font-size: 11px
}

.dl-btn-primary,
.dl-btn-secondary,
.dl-whatsapp {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease
}

.dl-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.dl-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px)
}

.dl-btn-secondary {
  color: var(--dl-dark);
  background: #fff;
  border: 1px solid rgba(22, 25, 39, .1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07)
}

.dl-btn-secondary:hover {
  color: var(--dl-pink);
  transform: translateY(-4px)
}

.dl-whatsapp {
  color: #fff;
  background: var(--dl-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .22)
}

.dl-whatsapp:hover {
  color: #fff;
  background: #20bd5b;
  transform: translateY(-4px)
}

/* HERO */
.dl-hero {
  position: relative;
  min-height: 740px;
  padding: 110px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%),
    radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%),
    linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.dl-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.dl-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.dl-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none
}

.dl-glow-one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.dl-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.dl-hero .container {
  z-index: 2;
}

.dl-hero-title {
  margin: 18px 0 22px;
  color: var(--dl-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.dl-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-purple), var(--dl-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.dl-hero-copy {
  max-width: 630px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.dl-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.dl-hero-stats>div {
  padding: 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055)
}

.dl-hero-stats strong,
.dl-hero-stats span {
  display: block
}

.dl-hero-stats strong {
  font-size: 20px;
  color: var(--dl-dark);
  font-weight: 950
}

.dl-hero-stats span {
  font-size: 10.5px;
  color: var(--dl-muted);
  font-weight: 700
}

.dl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px
}

.dl-hero-card {
  position: relative;
  min-height: 600px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 14%, rgba(232, 51, 138, .17), transparent 35%), radial-gradient(circle at 88% 17%, rgba(8, 108, 172, .17), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .63));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 38px 100px rgba(232, 51, 138, .15), 0 24px 70px rgba(8, 108, 172, .1);
  backdrop-filter: blur(20px)
}

.dl-hero-card::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--dl-pink), var(--dl-purple), var(--dl-blue))
}

.dl-card-top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.dl-card-top span,
.dl-card-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.dl-card-top span {
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12)
}

.dl-card-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-blue))
}

.dl-card-stage {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center
}

.dl-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 51, 138, .24)
}

.dl-ring.ring-one {
  width: 390px;
  height: 390px;
  animation: dlSpin 18s linear infinite
}

.dl-ring.ring-two {
  width: 290px;
  height: 290px;
  border-color: rgba(8, 108, 172, .24);
  animation: dlSpinBack 14s linear infinite
}

@keyframes dlSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes dlSpinBack {
  to {
    transform: rotate(-360deg)
  }
}

.dl-card-bg {
  position: absolute;
  width: min(80%, 370px);
  max-height: 370px;
  object-fit: contain;
  opacity: .09;
  transform: rotate(-14deg)
}

.dl-card-product {
  position: relative;
  z-index: 3;
  width: min(92%, 440px);
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 38px 66px rgba(15, 23, 42, .22));
  animation: dlFloat 4.8s ease-in-out infinite alternate
}

@keyframes dlFloat {
  to {
    transform: translateY(-13px) rotate(1deg)
  }
}

.dl-float-pill {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 10.5px;
  font-weight: 900
}

.dl-float-pill.pill-one {
  left: 8px;
  top: 100px
}

.dl-float-pill.pill-two {
  right: 2px;
  top: 190px
}

.dl-float-pill.pill-three {
  left: 35px;
  bottom: 55px
}

.dl-card-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(232, 51, 138, .11)
}

.dl-card-bottom div {
  padding: 10px 7px;
  border-radius: 17px;
  text-align: center;
  background: #fff7fb
}

.dl-card-bottom i {
  display: block;
  color: var(--dl-pink);
  font-size: 18px
}

.dl-card-bottom span {
  font-size: 9.8px;
  font-weight: 800;
  color: var(--dl-muted)
}

/* FILTER */
.dl-category-nav {
  position: sticky;
  top: 74px;
  z-index: 30;
  padding: 15px 0;
  background: rgba(255, 255, 255, .87);
  border-top: 1px solid rgba(232, 51, 138, .07);
  border-bottom: 1px solid rgba(232, 51, 138, .08);
  backdrop-filter: blur(18px)
}

.dl-category-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px
}

.dl-filter-btn {
  min-height: 43px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 51, 138, .11);
  background: #fff;
  color: #4c596d;
  font-size: 11.5px;
  font-weight: 850;
  transition: .3s
}

.dl-filter-btn:hover,
.dl-filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-purple));
  box-shadow: 0 13px 30px rgba(232, 51, 138, .22)
}

/* LIBRARY */
.dl-library {
  padding: 95px 0;
  background: radial-gradient(740px 380px at 5% 12%, rgba(232, 51, 138, .11), transparent 63%), radial-gradient(760px 400px at 95% 18%, rgba(8, 108, 172, .1), transparent 62%), linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.dl-section-head {
  max-width: 800px;
  margin: 0 auto 44px
}

.dl-section-head .dl-kicker {
  margin-bottom: 13px
}

.dl-section-head h2 {
  margin: 0;
  color: var(--dl-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}

.dl-section-head p {
  margin: 14px 0 0;
  color: var(--dl-muted);
  font-size: 15.5px
}

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

.dl-card {
  position: relative;
  height: 100%;
  padding: 25px 21px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .075);
  transition: .35s
}

.dl-card:hover,
.dl-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(232, 51, 138, .14)
}

.dl-card.is-hidden {
  display: none
}

.dl-card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-blue));
  font-size: 8.5px;
  font-weight: 900
}

.dl-file-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-blue));
  box-shadow: 0 18px 38px rgba(232, 51, 138, .22)
}

.dl-type {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--dl-pink);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .45px;
  font-weight: 900
}

.dl-card h3 {
  min-height: 46px;
  margin: 0 0 9px;
  color: var(--dl-dark);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950
}

.dl-card p {
  min-height: 62px;
  margin: 0 0 15px;
  color: var(--dl-muted);
  font-size: 12.2px;
  line-height: 1.6
}

.dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 17px
}

.dl-meta span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09);
  font-size: 9.2px;
  font-weight: 800;
  color: #58657a
}

.dl-meta i {
  color: var(--dl-pink)
}

.dl-download-btn {
  width: 100%;
  min-height: 43px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dl-pink), var(--dl-purple));
  box-shadow: 0 14px 32px rgba(232, 51, 138, .22);
  transition: .3s
}

.dl-download-btn:hover {
  color: #fff;
  transform: translateY(-3px)
}

/* FEATURED */
.dl-featured {
  padding: 95px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 48%, #eff7ff)
}

.dl-featured-card {
  padding: 38px;
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 251, .76));
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 34px 92px rgba(232, 51, 138, .13)
}

.dl-featured-copy .dl-kicker {
  margin-bottom: 15px
}

.dl-featured-copy h2 {
  margin: 0;
  color: var(--dl-dark);
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}

.dl-featured-copy p {
  margin: 17px 0;
  color: var(--dl-muted);
  font-size: 15px;
  line-height: 1.7
}

.dl-featured-copy ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}

.dl-featured-copy li {
  font-size: 12.5px;
  font-weight: 800;
  color: #435067
}

.dl-featured-copy li i {
  color: var(--dl-pink);
  margin-right: 7px
}

.dl-featured-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center
}

.dl-doc-back {
  position: absolute;
  width: 280px;
  height: 380px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ef5da8, #6f4cf3);
  transform: rotate(-8deg);
  box-shadow: 0 30px 70px rgba(232, 51, 138, .22)
}

.dl-doc-front {
  position: relative;
  z-index: 2;
  width: 290px;
  min-height: 390px;
  padding: 24px;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 34%), linear-gradient(155deg, #145d9b, #8a2f88 50%, #e8338a);
  box-shadow: 0 38px 90px rgba(15, 23, 42, .28)
}

.dl-doc-brand img {
  max-width: 160px;
  max-height: 60px;
  object-fit: contain
}

.dl-doc-front>span {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .86
}

.dl-doc-front h3 {
  font-size: 30px;
  font-weight: 950;
  margin: 8px 0
}

.dl-doc-front>img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .24))
}

.dl-doc-year {
  margin-top: 12px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  font-size: 11px;
  font-weight: 850
}

/* HELP */
.dl-help {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.dl-help-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: radial-gradient(circle at 10% 10%, rgba(232, 51, 138, .14), transparent 32%), radial-gradient(circle at 94% 90%, rgba(8, 108, 172, .13), transparent 34%), linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.dl-help-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  color: var(--dl-pink-dark);
  font-size: 11px;
  font-weight: 700;
}

.dl-help-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em
}

.dl-help-card p {
  max-width: 680px;
  margin: 0;
  color: var(--dl-muted);
  font-size: 13.5px;
  line-height: 1.62
}

.dl-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .dl-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .dl-hero {
    min-height: auto;
    padding: 96px 0 80px
  }
}

@media(max-width:991.98px) {
  .dl-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .dl-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .dl-hero-copy {
    margin: auto
  }

  .dl-hero-stats {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
  }

  .dl-hero-actions {
    justify-content: center
  }

  .dl-hero-card {
    max-width: 720px;
    margin: auto
  }

  .dl-category-nav {
    top: 68px
  }

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

  .dl-featured-copy {
    text-align: center
  }

  .dl-featured-copy ul {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .dl-help-card {
    flex-direction: column;
    text-align: center
  }

  .dl-help-actions {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .dl-hero {
    padding: 68px 0 58px
  }

  .dl-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .dl-hero-card {
    min-height: 510px;
    border-radius: 32px
  }

  .dl-card-stage {
    min-height: 370px
  }

  .dl-card-product {
    width: min(92%, 380px);
    max-height: 290px
  }

  .dl-library,
  .dl-featured {
    padding: 68px 0
  }

  .dl-grid {
    grid-template-columns: 1fr
  }

  .dl-card {
    max-width: 560px;
    margin: auto
  }

  .dl-featured-card {
    padding: 25px;
    border-radius: 30px
  }
}

@media(max-width:575.98px) {
  .dl-hero {
    padding: 57px 0 48px
  }

  .dl-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: .98
  }

  .dl-hero-copy {
    font-size: 13.8px;
    line-height: 1.6
  }

  .dl-hero-stats {
    grid-template-columns: 1fr
  }

  .dl-hero-actions,
  .dl-help-actions {
    flex-direction: column
  }

  .dl-btn-primary,
  .dl-btn-secondary,
  .dl-whatsapp {
    width: 100%
  }

  .dl-hero-card {
    min-height: 445px;
    padding: 15px;
    border-radius: 26px
  }

  .dl-card-top {
    flex-direction: column
  }

  .dl-card-top span,
  .dl-card-top strong {
    text-align: center
  }

  .dl-card-stage {
    min-height: 275px
  }

  .dl-card-product {
    width: min(94%, 280px);
    max-height: 220px
  }

  .dl-card-bg {
    width: min(80%, 235px);
    max-height: 235px
  }

  .dl-ring.ring-one {
    width: 240px;
    height: 240px
  }

  .dl-ring.ring-two {
    width: 180px;
    height: 180px
  }

  .dl-float-pill {
    display: none
  }

  .dl-card-bottom {
    grid-template-columns: 1fr
  }

  .dl-category-nav {
    position: relative;
    top: auto
  }

  .dl-filter-btn {
    width: 100%
  }

  .dl-section-head h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .dl-card {
    padding: 22px 17px;
    border-radius: 25px
  }

  .dl-card h3,
  .dl-card p {
    min-height: auto
  }

  .dl-featured-copy ul {
    grid-template-columns: 1fr
  }

  .dl-featured-visual {
    min-height: 410px
  }

  .dl-doc-back {
    width: 230px;
    height: 320px
  }

  .dl-doc-front {
    width: 240px;
    min-height: 330px;
    padding: 18px
  }

  .dl-doc-front h3 {
    font-size: 24px
  }

  .dl-doc-front>img {
    height: 135px
  }

  .dl-help-card {
    padding: 23px 16px;
    border-radius: 25px
  }

  .dl-help-card h2 {
    font-size: 1.9rem
  }
}





/* ===================== BACK TO TOP BUTTON ===================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 98px;
  z-index: 999;

  width: 50px;
  height: 50px;
  padding: 0;

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

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;

  color: #ffffff;
  font-size: 20px;
  line-height: 1;

  background:
    linear-gradient(135deg,
      #e8338a,
      #7d43ee,
      #086cac);

  box-shadow:
    0 18px 42px rgba(232, 51, 138, 0.28),
    0 10px 26px rgba(8, 108, 172, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.88);

  cursor: pointer;

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

.back-to-top::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;

  border-radius: 50%;
  border: 1px solid rgba(232, 51, 138, 0.22);

  animation: backTopPulse 2.2s ease-out infinite;
}

.back-to-top i {
  display: block;
  line-height: 1;
  transition: transform 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  color: #ffffff;
  transform: translateY(-5px) scale(1.05);

  box-shadow:
    0 25px 55px rgba(232, 51, 138, 0.36),
    0 15px 34px rgba(8, 108, 172, 0.24);
}

.back-to-top:hover i {
  transform: translateY(-3px);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(232, 51, 138, 0.25);
  outline-offset: 4px;
}

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

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

/* Responsive */
@media (max-width: 767.98px) {
  .back-to-top {
    right: 16px;
    bottom: 88px;

    width: 46px;
    height: 46px;

    font-size: 18px;
  }
}

@media (max-width: 575.98px) {
  .back-to-top {
    right: 14px;
    bottom: 82px;

    width: 44px;
    height: 44px;

    font-size: 17px;
  }
}

/* ===================== BACK TO TOP BUTTON END ===================== */




/* ===================== PREMIUM PAGINATION ===================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  margin: 32px 0 0;
  padding: 0;

  list-style: none;
}

.pagination .page-item {
  margin: 0;
}

.pagination .page-link {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;

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

  border: 1px solid rgba(231, 53, 139, 0.14);
  border-radius: 14px;

  color: #3f495c;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 246, 251, 0.9));

  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

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

.pagination .page-link:hover {
  color: #ffffff;
  border-color: transparent;

  background:
    linear-gradient(135deg,
      #e7358b,
      #7b3ff2,
      #086cac);

  transform: translateY(-3px);

  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.24);
}

.pagination .page-link:focus {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #e7358b, #7b3ff2);

  outline: none;

  box-shadow:
    0 0 0 4px rgba(231, 53, 139, 0.12),
    0 14px 30px rgba(231, 53, 139, 0.2);
}

/* Active page */

.pagination .page-item.active .page-link {
  color: #ffffff;
  border-color: transparent;

  background:
    linear-gradient(135deg,
      #e7358b,
      #7b3ff2,
      #086cac);

  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.28);

  transform: translateY(-2px);
}

/* Previous and Next */

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  min-width: 92px;
  padding: 0 18px;

  border-radius: 999px;
}

/* Disabled pagination */

.pagination .page-item.disabled .page-link {
  color: #a5adbb;
  background: #f5f6f8;
  border-color: rgba(15, 23, 42, 0.06);

  cursor: not-allowed;
  pointer-events: none;

  box-shadow: none;
  opacity: 0.7;
}

/* Remove Bootstrap default focus issues */

.pagination .page-link:focus-visible {
  outline: 3px solid rgba(231, 53, 139, 0.2);
  outline-offset: 3px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 575.98px) {
  .pagination {
    gap: 6px;
    margin-top: 24px;
  }

  .pagination .page-link {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;

    border-radius: 12px;

    font-size: 12px;
  }

  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link {
    min-width: 76px;
    padding: 0 13px;
  }
}

@media (max-width: 380px) {
  .pagination {
    gap: 5px;
  }

  .pagination .page-link {
    min-width: 35px;
    height: 35px;
    padding: 0 8px;

    font-size: 11px;
  }

  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link {
    min-width: 68px;
    padding: 0 10px;
  }
}

/* ===================== PREMIUM PAGINATION END ===================== */








/* PRIVACY-POLICY */
:root {
  --pp-pink: #e8338a;
  --pp-pink-dark: #c52273;
  --pp-purple: #7d43ee;
  --pp-blue: #086cac;
  --pp-green: #25d366;
  --pp-dark: #161927;
  --pp-muted: #667085
}

.pp-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pp-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09)
}

.pp-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-btn-primary,
.pp-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s
}

.pp-btn-primary {
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.pp-whatsapp-btn {
  background: var(--pp-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .23)
}

.pp-btn-primary:hover,
.pp-whatsapp-btn:hover {
  color: #fff;
  transform: translateY(-4px)
}

.pp-hero {
  position: relative;
  min-height: 720px;
  padding: 108px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%), radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%), linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.pp-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.pp-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.pp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px)
}

.pp-glow.one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.pp-glow.two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.pp-hero .container {
  z-index: 2
}

.pp-hero-title {
  margin: 18px 0 22px;
  color: var(--pp-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700;
}

.pp-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-purple), var(--pp-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.pp-hero-copy {
  max-width: 680px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.pp-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.pp-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1)
}

.pp-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-hero-points strong,
.pp-hero-points span {
  display: block
}

.pp-hero-points strong {
  font-size: 12px;
  font-weight: 900
}

.pp-hero-points span {
  font-size: 10.5px;
  color: var(--pp-muted)
}

.pp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px
}

.pp-hero-meta span {
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1);
  font-size: 11px;
  font-weight: 800
}

.pp-hero-card {
  position: relative;
  min-height: 570px;
  padding: 25px;
  border-radius: 42px;
  background: radial-gradient(circle at 18% 14%, rgba(232, 51, 138, .17), transparent 35%), radial-gradient(circle at 88% 17%, rgba(8, 108, 172, .17), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .63));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 38px 100px rgba(232, 51, 138, .15), 0 24px 70px rgba(8, 108, 172, .1)
}

.pp-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.pp-card-top span,
.pp-card-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.pp-card-top span {
  background: #fff
}

.pp-card-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-shield-stage {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center
}

.pp-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 51, 138, .24)
}

.pp-orbit.o1 {
  width: 350px;
  height: 350px;
  animation: spin 18s linear infinite
}

.pp-orbit.o2 {
  width: 260px;
  height: 260px;
  animation: spinback 14s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes spinback {
  to {
    transform: rotate(-360deg)
  }
}

.pp-master-shield {
  position: relative;
  z-index: 3;
  width: 235px;
  height: 270px;
  clip-path: polygon(50% 0, 92% 14%, 84% 71%, 50% 100%, 16% 71%, 8% 14%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--pp-pink), var(--pp-purple), var(--pp-blue));
  filter: drop-shadow(0 30px 55px rgba(232, 51, 138, .28))
}

.pp-master-shield i {
  font-size: 58px
}

.pp-master-shield strong {
  font-size: 29px
}

.pp-master-shield span {
  font-size: 11px;
  text-transform: uppercase
}

.pp-float-chip {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 10.5px;
  font-weight: 900
}

.pp-float-chip.c1 {
  left: 5px;
  top: 92px
}

.pp-float-chip.c2 {
  right: 3px;
  top: 165px
}

.pp-float-chip.c3 {
  left: 28px;
  bottom: 55px
}

.pp-card-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .8)
}

.pp-card-bottom div {
  text-align: center;
  padding: 10px;
  background: #fff7fb;
  border-radius: 17px
}

.pp-card-bottom i {
  display: block;
  color: var(--pp-pink)
}

.pp-card-bottom span {
  font-size: 9.8px;
  color: var(--pp-muted)
}

.pp-summary-strip {
  padding: 24px 0;
  background: #fff
}

.pp-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.pp-summary-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .1)
}

.pp-summary-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-summary-item strong,
.pp-summary-item span {
  display: block
}

.pp-summary-item strong {
  font-size: 12px
}

.pp-summary-item span {
  font-size: 10px;
  color: var(--pp-muted)
}

.pp-policy-section {
  padding: 96px 0;
  background: linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.pp-policy-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 25px 66px rgba(232, 51, 138, .1)
}

.pp-policy-head .pp-kicker {
  margin-bottom: 12px
}

.pp-policy-head h2,
.pp-section-head h2 {
  margin: 0;
  color: var(--pp-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  font-weight: 700
}

.pp-policy-head p,
.pp-section-head p {
  color: var(--pp-muted)
}

.pp-policy-count {
  min-width: 155px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-purple), var(--pp-blue))
}

.pp-policy-count strong,
.pp-policy-count span {
  display: block
}

.pp-policy-count strong {
  font-size: 42px
}

.pp-policy-count span {
  font-size: 10.5px
}

.pp-policy-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 24px;
  align-items: start
}

.pp-category-panel {
  position: sticky;
  top: 95px;
  padding: 12px;
  border-radius: 30px;
  display: grid;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .075)
}

.pp-category-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  transition: .3s
}

.pp-category-btn>span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-pink);
  background: #fff1f7
}

.pp-category-btn strong,
.pp-category-btn small {
  display: block
}

.pp-category-btn strong {
  font-size: 12px;
  color: var(--pp-dark)
}

.pp-category-btn small {
  font-size: 9.5px;
  color: var(--pp-muted)
}

.pp-category-btn:hover,
.pp-category-btn.active {
  background: linear-gradient(135deg, rgba(232, 51, 138, .1), rgba(125, 67, 238, .07));
  border-color: rgba(232, 51, 138, .14)
}

.pp-category-btn.active>span {
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-policy-content {
  display: none;
  padding: 34px;
  border-radius: 34px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 26px 72px rgba(15, 23, 42, .08)
}

.pp-policy-content.active {
  display: block
}

.pp-content-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px
}

.pp-content-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-content-heading span {
  display: block;
  color: var(--pp-pink);
  font-size: 9.5px;
  text-transform: uppercase
}

.pp-content-heading h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  font-weight: 950
}

.pp-policy-content>p {
  color: var(--pp-muted);
  font-size: 14px;
  line-height: 1.75
}

.pp-policy-content h4 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 950
}

.pp-info-box {
  margin: 20px 0;
  padding: 15px;
  border-radius: 20px;
  display: flex;
  gap: 12px;
  color: #135f8f;
  background: #eff8ff
}

.pp-info-box strong,
.pp-info-box span {
  display: block
}

.pp-info-box span {
  font-size: 11.5px
}

.pp-policy-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px
}

.pp-policy-list li {
  padding: 12px 14px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09);
  font-size: 12px
}

.pp-policy-list i {
  color: var(--pp-pink)
}

.pp-data-grid,
.pp-share-grid,
.pp-rights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px
}

.pp-data-card,
.pp-share-grid>div {
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1)
}

.pp-data-card>i,
.pp-share-grid>div>i {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-data-card h4,
.pp-share-grid h4 {
  margin: 0 0 6px;
  font-size: 13px
}

.pp-data-card p,
.pp-share-grid p {
  margin: 0;
  color: var(--pp-muted);
  font-size: 11.5px
}

.pp-purpose-list {
  display: grid;
  gap: 10px;
  margin-top: 20px
}

.pp-purpose-list>div {
  padding: 13px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09)
}

.pp-purpose-list span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-purpose-list p {
  margin: 0;
  font-size: 12px
}

.pp-cookie-table {
  margin-top: 20px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(232, 51, 138, .11)
}

.pp-cookie-row {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid rgba(232, 51, 138, .08)
}

.pp-cookie-head {
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-purple))
}

.pp-cookie-row span,
.pp-cookie-row em {
  font-size: 11px;
  color: var(--pp-muted);
  font-style: normal
}

.pp-security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px
}

.pp-security-grid>div {
  padding: 18px 15px;
  border-radius: 22px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1)
}

.pp-security-grid>div>span {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-security-grid p {
  font-size: 11.3px;
  color: var(--pp-muted)
}

.pp-rights-grid>div {
  padding: 17px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 11px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1)
}

.pp-rights-grid i {
  grid-row: 1/3;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-rights-grid span {
  font-size: 10.8px;
  color: var(--pp-muted)
}

.pp-contact-card {
  margin-top: 20px;
  padding: 18px;
  border-radius: 24px;
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, #fff6fa, #f1f8ff)
}

.pp-contact-row {
  padding: 12px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff
}

.pp-contact-row>span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-contact-row small,
.pp-contact-row a,
.pp-contact-row strong {
  display: block
}

.pp-contact-row a {
  color: var(--pp-dark);
  text-decoration: none;
  font-weight: 900
}

.pp-principles {
  padding: 94px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 50%, #eff7ff)
}

.pp-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.pp-section-head .pp-kicker {
  margin-bottom: 13px
}

.pp-principle-card {
  position: relative;
  height: 100%;
  min-height: 270px;
  padding: 28px 21px;
  border-radius: 30px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.pp-principle-card:hover,
.pp-principle-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(232, 51, 138, .14)
}

.pp-principle-card>span {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(232, 51, 138, .13);
  font-size: 34px;
  font-weight: 950
}

.pp-principle-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--pp-pink), var(--pp-blue))
}

.pp-principle-card p {
  font-size: 12.8px;
  color: var(--pp-muted)
}

.pp-cta-section {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.pp-cta-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.pp-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  color: var(--pp-pink-dark);
  font-size: 11px;
  font-weight: 850
}

.pp-cta-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 950
}

.pp-cta-card p {
  max-width: 680px;
  margin: 0;
  color: var(--pp-muted)
}

.pp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

@media(max-width:991.98px) {
  .pp-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .pp-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .pp-hero-copy {
    margin: auto
  }

  .pp-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .pp-hero-meta {
    justify-content: center
  }

  .pp-hero-card {
    max-width: 720px;
    margin: auto
  }

  .pp-summary-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .pp-policy-head {
    flex-direction: column;
    text-align: center
  }

  .pp-policy-count {
    min-width: 100%
  }

  .pp-policy-layout {
    grid-template-columns: 1fr
  }

  .pp-category-panel {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, 1fr)
  }

  .pp-cta-card {
    flex-direction: column;
    text-align: center
  }

  .pp-cta-actions {
    justify-content: center
  }
}

@media(max-width:575.98px) {
  .pp-hero {
    padding: 57px 0 48px
  }

  .pp-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem)
  }

  .pp-hero-copy {
    font-size: 13.8px
  }

  .pp-hero-points,
  .pp-summary-grid {
    grid-template-columns: 1fr
  }

  .pp-hero-meta {
    flex-direction: column
  }

  .pp-hero-card {
    min-height: 430px;
    padding: 15px;
    border-radius: 26px
  }

  .pp-card-top {
    flex-direction: column
  }

  .pp-shield-stage {
    min-height: 260px
  }

  .pp-master-shield {
    width: 165px;
    height: 195px
  }

  .pp-master-shield i {
    font-size: 42px
  }

  .pp-orbit.o1 {
    width: 230px;
    height: 230px
  }

  .pp-orbit.o2 {
    width: 170px;
    height: 170px
  }

  .pp-float-chip {
    display: none
  }

  .pp-card-bottom {
    grid-template-columns: 1fr
  }

  .pp-policy-section,
  .pp-principles {
    padding: 68px 0
  }

  .pp-policy-head {
    padding: 21px 16px;
    border-radius: 25px
  }

  .pp-policy-head h2,
  .pp-section-head h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .pp-category-panel {
    grid-template-columns: 1fr;
    border-radius: 24px
  }

  .pp-policy-content {
    padding: 19px 15px;
    border-radius: 24px
  }

  .pp-data-grid,
  .pp-share-grid,
  .pp-rights-grid,
  .pp-security-grid {
    grid-template-columns: 1fr
  }

  .pp-cookie-table {
    overflow-x: auto
  }

  .pp-cookie-row {
    min-width: 620px
  }

  .pp-cta-card {
    padding: 23px 16px;
    border-radius: 25px
  }

  .pp-cta-actions {
    width: 100%;
    flex-direction: column
  }

  .pp-btn-primary,
  .pp-whatsapp-btn {
    width: 100%
  }
}




/* =========================================================
   FLYDAYZ TERMS & CONDITIONS PAGE
========================================================= */

:root {
  --tc-pink: #e8338a;
  --tc-pink-dark: #c52273;
  --tc-purple: #7d43ee;
  --tc-blue: #086cac;
  --tc-green: #25d366;
  --tc-dark: #161927;
  --tc-muted: #667085;
}

.tc-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--tc-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09);
  backdrop-filter: blur(12px)
}

.tc-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-btn-primary,
.tc-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease
}

.tc-btn-primary {
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.tc-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(232, 51, 138, .34)
}

.tc-whatsapp-btn {
  background: var(--tc-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .23)
}

.tc-whatsapp-btn:hover {
  color: #fff;
  background: #20bd5b;
  transform: translateY(-4px)
}

.tc-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.tc-section-head .tc-kicker {
  margin-bottom: 13px
}

.tc-section-head h2,
.tc-policy-head h2 {
  margin: 0;
  color: var(--tc-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700
}

.tc-section-head p,
.tc-policy-head p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--tc-muted);
  font-size: 15.5px;
  line-height: 1.68
}

/* HERO */
.tc-hero {
  position: relative;
  min-height: 720px;
  padding: 108px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%),
    radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%),
    linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.tc-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.tc-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.tc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none
}

.tc-glow-one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.tc-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.tc-hero .container {
  z-index: 2
}

.tc-hero-title {
  margin: 18px 0 22px;
  color: var(--tc-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700
}

.tc-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-purple), var(--tc-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.tc-hero-copy {
  max-width: 680px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.tc-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.tc-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055)
}

.tc-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-hero-points strong,
.tc-hero-points span {
  display: block
}

.tc-hero-points strong {
  font-size: 12px;
  font-weight: 900
}

.tc-hero-points span {
  font-size: 10.5px;
  color: var(--tc-muted);
  font-weight: 700
}

.tc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px
}

.tc-hero-meta span {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4a566a;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(232, 51, 138, .1)
}

.tc-hero-meta i {
  color: var(--tc-pink)
}

.tc-hero-card {
  position: relative;
  min-height: 570px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 14%, rgba(232, 51, 138, .17), transparent 35%),
    radial-gradient(circle at 88% 17%, rgba(8, 108, 172, .17), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .63));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 38px 100px rgba(232, 51, 138, .15), 0 24px 70px rgba(8, 108, 172, .1);
  backdrop-filter: blur(20px)
}

.tc-hero-card::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--tc-pink), var(--tc-purple), var(--tc-blue))
}

.tc-card-top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.tc-card-top span,
.tc-card-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.tc-card-top span {
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12)
}

.tc-card-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-visual-stage {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center
}

.tc-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 51, 138, .24)
}

.tc-orbit-one {
  width: 350px;
  height: 350px;
  animation: tcSpin 18s linear infinite
}

.tc-orbit-two {
  width: 260px;
  height: 260px;
  border-color: rgba(8, 108, 172, .24);
  animation: tcSpinBack 14s linear infinite
}

@keyframes tcSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes tcSpinBack {
  to {
    transform: rotate(-360deg)
  }
}

.tc-document-seal {
  position: relative;
  z-index: 3;
  width: 235px;
  height: 270px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), transparent 35%),
    linear-gradient(145deg, var(--tc-pink), var(--tc-purple), var(--tc-blue));
  box-shadow: 0 30px 65px rgba(232, 51, 138, .27)
}

.tc-document-seal::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px dashed rgba(255, 255, 255, .48)
}

.tc-document-seal i {
  font-size: 58px
}

.tc-document-seal strong {
  font-size: 29px;
  line-height: 1;
  font-weight: 950
}

.tc-document-seal span {
  margin-top: 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800
}

.tc-float-chip {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 10.5px;
  font-weight: 900
}

.tc-float-chip i {
  color: var(--tc-pink)
}

.tc-chip-one {
  left: 5px;
  top: 92px
}

.tc-chip-two {
  right: 3px;
  top: 165px
}

.tc-chip-three {
  left: 28px;
  bottom: 55px
}

.tc-card-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(232, 51, 138, .11)
}

.tc-card-bottom div {
  padding: 10px 7px;
  border-radius: 17px;
  text-align: center;
  background: #fff7fb
}

.tc-card-bottom i {
  display: block;
  margin-bottom: 3px;
  color: var(--tc-pink);
  font-size: 18px
}

.tc-card-bottom span {
  font-size: 9.8px;
  color: var(--tc-muted);
  font-weight: 800
}

/* SUMMARY */
.tc-summary-strip {
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid rgba(232, 51, 138, .07);
  border-bottom: 1px solid rgba(232, 51, 138, .08)
}

.tc-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.tc-summary-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05)
}

.tc-summary-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-summary-item strong,
.tc-summary-item span {
  display: block
}

.tc-summary-item strong {
  font-size: 12px;
  font-weight: 900
}

.tc-summary-item span {
  margin-top: 3px;
  font-size: 10px;
  color: var(--tc-muted)
}

/* POLICY */
.tc-policy-section {
  padding: 96px 0;
  background: radial-gradient(740px 380px at 5% 12%, rgba(232, 51, 138, .11), transparent 63%),
    radial-gradient(760px 400px at 95% 18%, rgba(8, 108, 172, .1), transparent 62%),
    linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.tc-policy-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 251, .79));
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 25px 66px rgba(232, 51, 138, .1)
}

.tc-policy-head .tc-kicker {
  margin-bottom: 12px
}

.tc-policy-head p {
  margin-left: 0
}

.tc-policy-count {
  min-width: 155px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-purple), var(--tc-blue))
}

.tc-policy-count strong,
.tc-policy-count span {
  display: block
}

.tc-policy-count strong {
  font-size: 42px;
  line-height: .9
}

.tc-policy-count span {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 850
}

.tc-policy-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start
}

.tc-category-panel {
  position: sticky;
  top: 95px;
  padding: 12px;
  border-radius: 30px;
  display: grid;
  gap: 8px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .075);
  backdrop-filter: blur(18px)
}

.tc-category-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #465266;
  background: transparent;
  transition: .3s ease
}

.tc-category-btn>span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-pink);
  font-size: 17px;
  background: #fff1f7
}

.tc-category-btn strong,
.tc-category-btn small {
  display: block
}

.tc-category-btn strong {
  color: var(--tc-dark);
  font-size: 12px;
  font-weight: 900
}

.tc-category-btn small {
  margin-top: 3px;
  color: var(--tc-muted);
  font-size: 9.5px
}

.tc-category-btn>i {
  font-size: 11px;
  color: #9aa3b1
}

.tc-category-btn:hover,
.tc-category-btn.active {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(232, 51, 138, .1), rgba(125, 67, 238, .07));
  border-color: rgba(232, 51, 138, .14);
  box-shadow: 0 12px 28px rgba(232, 51, 138, .08)
}

.tc-category-btn.active>span {
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-category-btn.active>i {
  color: var(--tc-pink)
}

.tc-content-panel {
  min-height: 760px
}

.tc-policy-content {
  display: none;
  padding: 34px;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff, #fff9fc);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 26px 72px rgba(15, 23, 42, .08);
  animation: tcPanelIn .38s ease both
}

.tc-policy-content.active {
  display: block
}

@keyframes tcPanelIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

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

.tc-content-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px
}

.tc-content-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue));
  box-shadow: 0 17px 36px rgba(232, 51, 138, .2)
}

.tc-content-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--tc-pink);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .55px;
  font-weight: 900
}

.tc-content-heading h3 {
  margin: 0;
  color: var(--tc-dark);
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.035em
}

.tc-policy-content>p {
  color: var(--tc-muted);
  font-size: 14px;
  line-height: 1.75
}

.tc-policy-content h4 {
  margin: 24px 0 12px;
  color: var(--tc-dark);
  font-size: 16px;
  font-weight: 950
}

.tc-info-box,
.tc-warning-box {
  margin: 20px 0;
  padding: 15px;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.tc-info-box {
  color: #135f8f;
  background: #eff8ff;
  border: 1px solid rgba(8, 108, 172, .14)
}

.tc-warning-box {
  color: #936200;
  background: #fff8e8;
  border: 1px solid rgba(245, 158, 11, .2)
}

.tc-info-box>i,
.tc-warning-box>i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 17px
}

.tc-info-box strong,
.tc-info-box span {
  display: block
}

.tc-info-box strong {
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 900
}

.tc-info-box span,
.tc-warning-box span {
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 650
}

.tc-policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px
}

.tc-policy-list li {
  padding: 12px 14px;
  border-radius: 17px;
  color: #475469;
  font-size: 12px;
  font-weight: 750;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09)
}

.tc-policy-list i {
  color: var(--tc-pink);
  margin-right: 8px
}

.tc-rule-grid,
.tc-data-grid,
.tc-partner-grid,
.tc-ip-grid,
.tc-external-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px
}

.tc-rule-grid>div,
.tc-data-grid>div,
.tc-ip-grid>div {
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 13px 30px rgba(15, 23, 42, .045)
}

.tc-rule-grid i,
.tc-data-grid i,
.tc-ip-grid i {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-rule-grid .allowed i {
  background: linear-gradient(135deg, #25b76b, #1d8d54)
}

.tc-rule-grid .restricted i {
  background: linear-gradient(135deg, #ef476f, #d21f55)
}

.tc-rule-grid h4,
.tc-data-grid h4,
.tc-ip-grid h4 {
  margin: 0 0 6px;
  font-size: 13px
}

.tc-rule-grid p,
.tc-data-grid p,
.tc-ip-grid p {
  margin: 0;
  color: var(--tc-muted);
  font-size: 11.5px;
  line-height: 1.55
}

.tc-step-list {
  display: grid;
  gap: 10px;
  margin-top: 20px
}

.tc-step-list>div {
  padding: 13px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09)
}

.tc-step-list span {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-step-list p {
  margin: 0;
  color: #4a566a;
  font-size: 12px;
  font-weight: 750
}

.tc-small-note {
  margin-top: 18px !important;
  padding: 12px 14px;
  border-radius: 17px;
  background: #fff;
  border-left: 4px solid var(--tc-pink);
  font-size: 11.5px !important
}

.tc-partner-grid>div,
.tc-external-grid>div {
  padding: 17px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 11px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1)
}

.tc-partner-grid i,
.tc-external-grid i {
  grid-row: 1/3;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-partner-grid strong,
.tc-external-grid strong {
  align-self: end;
  font-size: 13px;
  font-weight: 900
}

.tc-partner-grid span,
.tc-external-grid span {
  color: var(--tc-muted);
  font-size: 10.8px
}

.tc-liability-list {
  display: grid;
  gap: 10px;
  margin-top: 20px
}

.tc-liability-list>div {
  padding: 13px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09)
}

.tc-liability-list i {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-liability-list span {
  color: #4a566a;
  font-size: 12px;
  font-weight: 750
}

.tc-contact-card {
  margin-top: 20px;
  padding: 18px;
  border-radius: 24px;
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, #fff6fa, #f1f8ff);
  border: 1px solid rgba(232, 51, 138, .11)
}

.tc-contact-row {
  padding: 12px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(232, 51, 138, .08)
}

.tc-contact-row>span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue))
}

.tc-contact-row small,
.tc-contact-row a,
.tc-contact-row strong {
  display: block
}

.tc-contact-row small {
  margin-bottom: 3px;
  color: var(--tc-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 850
}

.tc-contact-row a,
.tc-contact-row strong {
  color: var(--tc-dark);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none
}

/* PRINCIPLES */
.tc-principles {
  padding: 94px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 50%, #eff7ff)
}

.tc-principle-card {
  position: relative;
  height: 100%;
  min-height: 270px;
  padding: 28px 21px;
  border-radius: 30px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.tc-principle-card:hover,
.tc-principle-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(232, 51, 138, .14)
}

.tc-principle-card>span {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(232, 51, 138, .13);
  font-size: 34px;
  font-weight: 950
}

.tc-principle-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--tc-pink), var(--tc-blue));
  box-shadow: 0 19px 39px rgba(232, 51, 138, .22)
}

.tc-principle-card h3 {
  font-size: 17px;
  font-weight: 950
}

.tc-principle-card p {
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--tc-muted)
}

/* CTA */
.tc-cta-section {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.tc-cta-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: radial-gradient(circle at 10% 10%, rgba(232, 51, 138, .14), transparent 32%),
    radial-gradient(circle at 94% 90%, rgba(8, 108, 172, .13), transparent 34%),
    linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.tc-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  color: var(--tc-pink-dark);
  font-size: 11px;
  font-weight: 850
}

.tc-cta-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 950;
  letter-spacing: -.04em
}

.tc-cta-card p {
  max-width: 680px;
  margin: 0;
  color: var(--tc-muted);
  font-size: 13.5px;
  line-height: 1.62
}

.tc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .tc-hero {
    min-height: auto;
    padding: 96px 0 80px
  }

  .tc-policy-layout {
    grid-template-columns: 295px minmax(0, 1fr)
  }
}

@media(max-width:991.98px) {
  .tc-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .tc-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .tc-hero-copy {
    margin: auto
  }

  .tc-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .tc-hero-meta {
    justify-content: center
  }

  .tc-hero-card {
    max-width: 720px;
    margin: auto
  }

  .tc-summary-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .tc-policy-head {
    flex-direction: column;
    text-align: center
  }

  .tc-policy-count {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
  }

  .tc-policy-layout {
    grid-template-columns: 1fr
  }

  .tc-category-panel {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, 1fr)
  }

  .tc-content-panel {
    min-height: auto
  }

  .tc-cta-card {
    flex-direction: column;
    text-align: center
  }

  .tc-cta-actions {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .tc-hero {
    padding: 68px 0 58px
  }

  .tc-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .tc-hero-card {
    min-height: 500px;
    border-radius: 32px
  }

  .tc-visual-stage {
    min-height: 350px
  }

  .tc-policy-section,
  .tc-principles {
    padding: 68px 0
  }

  .tc-policy-content {
    padding: 25px;
    border-radius: 28px
  }

  .tc-rule-grid,
  .tc-data-grid,
  .tc-partner-grid,
  .tc-ip-grid,
  .tc-external-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:575.98px) {
  .tc-hero {
    padding: 57px 0 48px
  }

  .tc-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: .98
  }

  .tc-hero-copy {
    font-size: 13.8px;
    line-height: 1.6
  }

  .tc-hero-points {
    grid-template-columns: 1fr
  }

  .tc-hero-meta {
    flex-direction: column
  }

  .tc-hero-meta span {
    width: 100%;
    justify-content: center
  }

  .tc-hero-card {
    min-height: 430px;
    padding: 15px;
    border-radius: 26px
  }

  .tc-card-top {
    flex-direction: column
  }

  .tc-card-top span,
  .tc-card-top strong {
    text-align: center
  }

  .tc-visual-stage {
    min-height: 260px
  }

  .tc-document-seal {
    width: 165px;
    height: 195px
  }

  .tc-document-seal i {
    font-size: 42px
  }

  .tc-document-seal strong {
    font-size: 23px
  }

  .tc-orbit-one {
    width: 230px;
    height: 230px
  }

  .tc-orbit-two {
    width: 170px;
    height: 170px
  }

  .tc-float-chip {
    display: none
  }

  .tc-card-bottom {
    grid-template-columns: 1fr
  }

  .tc-summary-grid {
    grid-template-columns: 1fr
  }

  .tc-policy-head {
    padding: 21px 16px;
    border-radius: 25px
  }

  .tc-policy-head h2,
  .tc-section-head h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .tc-category-panel {
    grid-template-columns: 1fr;
    border-radius: 24px
  }

  .tc-category-btn:hover,
  .tc-category-btn.active {
    transform: none
  }

  .tc-policy-content {
    padding: 19px 15px;
    border-radius: 24px
  }

  .tc-content-heading {
    align-items: flex-start
  }

  .tc-content-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 17px;
    font-size: 20px
  }

  .tc-content-heading h3 {
    font-size: 1.55rem
  }

  .tc-cta-card {
    padding: 23px 16px;
    border-radius: 25px
  }

  .tc-cta-card h2 {
    font-size: 1.9rem
  }

  .tc-cta-actions {
    width: 100%;
    flex-direction: column
  }

  .tc-btn-primary,
  .tc-whatsapp-btn {
    width: 100%
  }
}







/* =========================================================
   FLYDAYZ CERTIFICATION PAGE
========================================================= */
:root {
  --cf-pink: #e8338a;
  --cf-pink-dark: #c52273;
  --cf-purple: #7d43ee;
  --cf-blue: #086cac;
  --cf-blue-dark: #07558b;
  --cf-green: #25d366;
  --cf-gold: #e7ad38;
  --cf-dark: #161927;
  --cf-muted: #667085;
  --cf-white: #fff;
}

.cf-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cf-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09);
  backdrop-filter: blur(12px)
}

.cf-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue))
}

.cf-btn-primary,
.cf-btn-secondary,
.cf-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease
}

.cf-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.cf-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(232, 51, 138, .34)
}

.cf-btn-secondary {
  color: var(--cf-dark);
  background: #fff;
  border: 1px solid rgba(22, 25, 39, .1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07)
}

.cf-btn-secondary:hover {
  color: var(--cf-pink);
  transform: translateY(-4px)
}

.cf-whatsapp-btn {
  color: #fff;
  background: var(--cf-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .23)
}

.cf-whatsapp-btn:hover {
  color: #fff;
  background: #20bd5b;
  transform: translateY(-4px)
}

.cf-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.cf-section-head .cf-kicker {
  margin-bottom: 13px
}

.cf-section-head h2,
.cf-library-head h2,
.cf-verify-content h2 {
  margin: 0;
  color: var(--cf-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}

.cf-section-head p,
.cf-library-head p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--cf-muted);
  font-size: 15.5px;
  line-height: 1.68
}

/* HERO */
.cf-hero {
  position: relative;
  min-height: 750px;
  padding: 110px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%),
    radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%),
    linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.cf-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.cf-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.cf-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none
}

.cf-glow-one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.cf-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.cf-hero-decor {
  position: absolute;
  pointer-events: none;
  opacity: .05
}

.cf-decor-one {
  width: 410px;
  left: -170px;
  bottom: -100px;
  transform: rotate(-22deg)
}

.cf-decor-two {
  width: 360px;
  right: -120px;
  top: 95px;
  transform: rotate(18deg)
}

.cf-hero .container {
  z-index: 2
}

.cf-hero-title {
  margin: 18px 0 22px;
  color: var(--cf-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.cf-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple), var(--cf-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.cf-hero-copy {
  max-width: 630px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.cf-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.cf-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055)
}

.cf-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue))
}

.cf-hero-points strong,
.cf-hero-points span {
  display: block
}

.cf-hero-points strong {
  font-size: 12px;
  font-weight: 900
}

.cf-hero-points span {
  font-size: 10.5px;
  color: var(--cf-muted);
  font-weight: 700
}

.cf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px
}

.cf-hero-showcase {
  position: relative;
  min-height: 600px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 14%, rgba(232, 51, 138, .17), transparent 35%), radial-gradient(circle at 88% 17%, rgba(8, 108, 172, .17), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .63));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 38px 100px rgba(232, 51, 138, .15), 0 24px 70px rgba(8, 108, 172, .1);
  backdrop-filter: blur(20px)
}

.cf-hero-showcase::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--cf-pink), var(--cf-purple), var(--cf-blue))
}

.cf-showcase-top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.cf-showcase-top span,
.cf-showcase-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.cf-showcase-top span {
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12)
}

.cf-showcase-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue))
}

.cf-seal-stage {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center
}

.cf-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 51, 138, .24)
}

.cf-orbit-one {
  width: 390px;
  height: 390px;
  animation: cfSpin 18s linear infinite
}

.cf-orbit-two {
  width: 290px;
  height: 290px;
  border-color: rgba(8, 108, 172, .24);
  animation: cfSpinBack 14s linear infinite
}

@keyframes cfSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes cfSpinBack {
  to {
    transform: rotate(-360deg)
  }
}

.cf-master-seal {
  position: relative;
  z-index: 3;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  padding: 14px;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple), var(--cf-blue));
  box-shadow: 0 35px 75px rgba(232, 51, 138, .24)
}

.cf-master-seal::before,
.cf-master-seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .52)
}

.cf-master-seal::before {
  inset: 9px
}

.cf-master-seal::after {
  inset: 23px
}

.cf-master-seal-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), transparent 35%), rgba(255, 255, 255, .07)
}

.cf-master-seal-inner i {
  font-size: 58px
}

.cf-master-seal-inner strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 950
}

.cf-master-seal-inner span {
  margin-top: 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800
}

.cf-float-chip {
  position: absolute;
  z-index: 5;
  min-width: 74px;
  padding: 10px 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 11px;
  font-weight: 900
}

.cf-float-chip i {
  color: var(--cf-pink)
}

.cf-chip-one {
  left: 8px;
  top: 90px
}

.cf-chip-two {
  right: 4px;
  top: 145px
}

.cf-chip-three {
  left: 24px;
  bottom: 72px
}

.cf-chip-four {
  right: 20px;
  bottom: 55px
}

.cf-showcase-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(232, 51, 138, .11)
}

.cf-showcase-bottom div {
  padding: 10px 7px;
  border-radius: 17px;
  text-align: center;
  background: #fff7fb
}

.cf-showcase-bottom strong,
.cf-showcase-bottom span {
  display: block
}

.cf-showcase-bottom strong {
  font-size: 12px;
  font-weight: 900
}

.cf-showcase-bottom span {
  font-size: 9.8px;
  color: var(--cf-muted)
}

/* TRUST STRIP */
.cf-trust-strip {
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid rgba(232, 51, 138, .07);
  border-bottom: 1px solid rgba(232, 51, 138, .08)
}

.cf-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.cf-trust-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05)
}

.cf-trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue))
}

.cf-trust-item strong,
.cf-trust-item span {
  display: block
}

.cf-trust-item strong {
  font-size: 12px;
  font-weight: 900
}

.cf-trust-item span {
  margin-top: 3px;
  font-size: 10px;
  color: var(--cf-muted)
}

/* LIBRARY */
.cf-library {
  padding: 96px 0;
  background: radial-gradient(740px 380px at 5% 12%, rgba(232, 51, 138, .11), transparent 63%), radial-gradient(760px 400px at 95% 18%, rgba(8, 108, 172, .1), transparent 62%), linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.cf-library-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 251, .79));
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 25px 66px rgba(232, 51, 138, .1)
}

.cf-library-head .cf-kicker {
  margin-bottom: 12px
}

.cf-library-head p {
  margin-left: 0
}

.cf-library-count {
  min-width: 155px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple), var(--cf-blue))
}

.cf-library-count strong,
.cf-library-count span {
  display: block
}

.cf-library-count strong {
  font-size: 42px;
  line-height: .9
}

.cf-library-count span {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 850
}

.cf-filter-bar {
  margin-bottom: 28px;
  padding: 10px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06)
}

.cf-filter-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 51, 138, .11);
  background: #fff;
  color: #4c596d;
  font-size: 11.5px;
  font-weight: 850;
  transition: .3s
}

.cf-filter-btn:hover,
.cf-filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple));
  box-shadow: 0 13px 30px rgba(232, 51, 138, .22)
}

.cf-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.cf-cert-card {
  position: relative;
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .075);
  transition: .35s
}

.cf-cert-card:hover,
.cf-cert-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(232, 51, 138, .14)
}

.cf-cert-card.is-hidden {
  display: none
}

.cf-cert-top {
  padding: 14px 15px 0;
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.cf-cert-category,
.cf-cert-status {
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 8.8px;
  font-weight: 900
}

.cf-cert-category {
  color: var(--cf-pink-dark);
  background: #fff1f7;
  border: 1px solid rgba(232, 51, 138, .1)
}

.cf-cert-status {
  color: #17884b;
  background: #eafbf1
}

.cf-cert-status.neutral {
  color: #596579;
  background: #f2f5f8
}

.cf-cert-logo {
  height: 170px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(232, 51, 138, .12), transparent 64%)
}

.cf-cert-logo img {
  width: 100%;
  max-width: 145px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 20px 32px rgba(15, 23, 42, .14))
}

.cf-cert-logo.cf-doc-icon i {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 42px;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue));
  box-shadow: 0 20px 45px rgba(232, 51, 138, .2)
}

.cf-cert-body {
  padding: 20px;
  border-top: 1px solid rgba(232, 51, 138, .08)
}

.cf-cert-code {
  display: block;
  color: var(--cf-pink);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .45px;
  font-weight: 900
}

.cf-cert-body h3 {
  min-height: 44px;
  margin: 4px 0 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  color: var(--cf-dark)
}

.cf-cert-body p {
  min-height: 78px;
  margin: 0 0 15px;
  font-size: 12px;
  line-height: 1.58;
  color: var(--cf-muted)
}

.cf-cert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.cf-cert-meta span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .09);
  font-size: 9px;
  font-weight: 800;
  color: #58657a
}

.cf-cert-meta i {
  color: var(--cf-pink)
}

.cf-cert-actions {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  margin-top: 16px
}

.cf-view-btn,
.cf-download-btn {
  min-height: 43px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 900;
  transition: .3s
}

.cf-view-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-purple));
  box-shadow: 0 14px 30px rgba(232, 51, 138, .21)
}

.cf-view-btn:hover {
  color: #fff;
  transform: translateY(-2px)
}

.cf-download-btn {
  color: var(--cf-pink);
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .18)
}

.cf-download-btn:hover {
  color: #fff;
  background: var(--cf-pink)
}

.cf-empty-state {
  padding: 45px;
  border-radius: 28px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1)
}

.cf-empty-state i {
  font-size: 38px;
  color: var(--cf-pink)
}

.cf-empty-state h3 {
  font-weight: 950
}

.cf-empty-state p {
  margin: 0;
  color: var(--cf-muted)
}

/* PROCESS */
.cf-process {
  padding: 94px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 50%, #eff7ff)
}

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

.cf-process-card {
  position: relative;
  min-height: 270px;
  padding: 28px 21px;
  border-radius: 30px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.cf-process-card:hover,
.cf-process-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(232, 51, 138, .14)
}

.cf-process-card>span {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(232, 51, 138, .13);
  font-size: 34px;
  font-weight: 950
}

.cf-process-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue));
  box-shadow: 0 19px 39px rgba(232, 51, 138, .22)
}

.cf-process-card h3 {
  font-size: 17px;
  font-weight: 950
}

.cf-process-card p {
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--cf-muted)
}

/* VERIFY */
.cf-verify {
  padding: 96px 0;
  background: #fff
}

.cf-verify-card {
  padding: 40px;
  border-radius: 40px;
  background: linear-gradient(145deg, #fff, #fff6fa);
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 34px 92px rgba(232, 51, 138, .13)
}

.cf-verify-content .cf-kicker {
  margin-bottom: 15px
}

.cf-verify-content>p {
  margin: 17px 0 22px;
  color: var(--cf-muted);
  font-size: 15px;
  line-height: 1.7
}

.cf-verify-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 25px
}

.cf-verify-list div {
  padding: 12px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1);
  font-size: 11.8px;
  font-weight: 800;
  color: #4a566a
}

.cf-verify-list i {
  color: var(--cf-pink);
  margin-right: 7px
}

.cf-verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.cf-verify-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center
}

.cf-document-stack {
  position: absolute;
  width: 285px;
  height: 380px;
  border-radius: 24px
}

.cf-stack-back {
  background: #e16cb0;
  transform: rotate(-10deg)
}

.cf-stack-mid {
  background: #6e5fe2;
  transform: rotate(7deg)
}

.cf-document-main {
  position: relative;
  z-index: 3;
  width: 300px;
  min-height: 390px;
  padding: 25px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 38px 90px rgba(15, 23, 42, .26)
}

.cf-document-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.cf-document-head img {
  max-width: 145px;
  max-height: 55px;
  object-fit: contain
}

.cf-document-head i {
  font-size: 28px;
  color: var(--cf-pink)
}

.cf-document-main>span {
  display: block;
  margin-top: 28px;
  color: var(--cf-pink);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 900
}

.cf-document-main h3 {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 950;
  margin: 7px 0 22px
}

.cf-document-lines {
  display: grid;
  gap: 10px
}

.cf-document-lines i {
  height: 7px;
  border-radius: 999px;
  background: #eef1f5
}

.cf-document-lines i:nth-child(2) {
  width: 88%
}

.cf-document-lines i:nth-child(3) {
  width: 72%
}

.cf-document-lines i:nth-child(4) {
  width: 80%
}

.cf-document-seal {
  width: 110px;
  height: 110px;
  margin: 32px auto 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--cf-pink), var(--cf-blue));
  box-shadow: 0 18px 38px rgba(232, 51, 138, .23)
}

.cf-document-seal i {
  font-size: 30px
}

.cf-document-seal span {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 850
}

/* CTA */
.cf-cta-section {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.cf-cta-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: radial-gradient(circle at 10% 10%, rgba(232, 51, 138, .14), transparent 32%), radial-gradient(circle at 94% 90%, rgba(8, 108, 172, .13), transparent 34%), linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.cf-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  color: var(--cf-pink-dark);
  font-size: 11px;
  font-weight: 850
}

.cf-cta-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 950;
  letter-spacing: -.04em
}

.cf-cta-card p {
  max-width: 680px;
  margin: 0;
  color: var(--cf-muted);
  font-size: 13.5px;
  line-height: 1.62
}

.cf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .cf-cert-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .cf-hero {
    min-height: auto;
    padding: 96px 0 80px
  }
}

@media(max-width:991.98px) {
  .cf-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .cf-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .cf-hero-copy {
    margin: auto
  }

  .cf-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
  }

  .cf-hero-actions {
    justify-content: center
  }

  .cf-hero-showcase {
    max-width: 720px;
    margin: auto
  }

  .cf-trust-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cf-library-head {
    flex-direction: column;
    text-align: center
  }

  .cf-library-count {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
  }

  .cf-cert-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cf-process-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cf-verify-content {
    text-align: center
  }

  .cf-verify-list {
    text-align: left
  }

  .cf-verify-actions {
    justify-content: center
  }

  .cf-cta-card {
    flex-direction: column;
    text-align: center
  }

  .cf-cta-actions {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .cf-hero {
    padding: 68px 0 58px
  }

  .cf-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .cf-hero-showcase {
    min-height: 510px;
    border-radius: 32px
  }

  .cf-seal-stage {
    min-height: 370px
  }

  .cf-master-seal {
    width: 230px;
    height: 230px
  }

  .cf-library,
  .cf-process,
  .cf-verify {
    padding: 68px 0
  }

  .cf-cert-grid {
    grid-template-columns: 1fr
  }

  .cf-cert-card {
    max-width: 560px;
    margin: auto
  }

  .cf-verify-card {
    padding: 26px;
    border-radius: 30px
  }
}

@media(max-width:575.98px) {
  .cf-hero {
    padding: 57px 0 48px
  }

  .cf-hero-decor {
    display: none
  }

  .cf-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: .98
  }

  .cf-hero-copy {
    font-size: 13.8px;
    line-height: 1.6
  }

  .cf-hero-points {
    grid-template-columns: 1fr
  }

  .cf-hero-actions,
  .cf-verify-actions,
  .cf-cta-actions {
    flex-direction: column
  }

  .cf-btn-primary,
  .cf-btn-secondary,
  .cf-whatsapp-btn {
    width: 100%
  }

  .cf-hero-showcase {
    min-height: 445px;
    padding: 15px;
    border-radius: 26px
  }

  .cf-showcase-top {
    flex-direction: column
  }

  .cf-showcase-top span,
  .cf-showcase-top strong {
    text-align: center
  }

  .cf-seal-stage {
    min-height: 275px
  }

  .cf-master-seal {
    width: 190px;
    height: 190px
  }

  .cf-master-seal-inner i {
    font-size: 42px
  }

  .cf-master-seal-inner strong {
    font-size: 24px
  }

  .cf-orbit-one {
    width: 240px;
    height: 240px
  }

  .cf-orbit-two {
    width: 180px;
    height: 180px
  }

  .cf-float-chip {
    display: none
  }

  .cf-showcase-bottom {
    grid-template-columns: 1fr
  }

  .cf-trust-grid,
  .cf-process-grid {
    grid-template-columns: 1fr
  }

  .cf-library-head {
    padding: 21px 16px;
    border-radius: 25px
  }

  .cf-filter-bar {
    border-radius: 24px
  }

  .cf-filter-btn {
    width: 100%
  }

  .cf-cert-card {
    border-radius: 25px
  }

  .cf-cert-logo {
    height: 145px
  }

  .cf-cert-body {
    padding: 17px
  }

  .cf-cert-body h3,
  .cf-cert-body p {
    min-height: auto
  }

  .cf-section-head h2,
  .cf-library-head h2,
  .cf-verify-content h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .cf-verify-list {
    grid-template-columns: 1fr
  }

  .cf-verify-visual {
    min-height: 410px
  }

  .cf-document-stack {
    width: 225px;
    height: 315px
  }

  .cf-document-main {
    width: 240px;
    min-height: 330px;
    padding: 19px
  }

  .cf-document-main h3 {
    font-size: 23px
  }

  .cf-document-seal {
    width: 92px;
    height: 92px;
    margin-top: 22px
  }

  .cf-cta-card {
    padding: 23px 16px;
    border-radius: 25px
  }

  .cf-cta-card h2 {
    font-size: 1.9rem
  }
}






:root {
  --blog-pink: #e8338a;
  --blog-pink-dark: #c52273;
  --blog-purple: #7d43ee;
  --blog-blue: #086cac;
  --blog-green: #25d366;
  --blog-dark: #161927;
  --blog-muted: #667085;
}

.blog-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blog-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09);
  backdrop-filter: blur(12px)
}

.blog-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-blue))
}

.blog-btn-primary,
.blog-btn-secondary,
.blog-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease
}

.blog-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.blog-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px)
}

.blog-btn-secondary {
  color: var(--blog-dark);
  background: #fff;
  border: 1px solid rgba(22, 25, 39, .1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07)
}

.blog-btn-secondary:hover {
  color: var(--blog-pink);
  transform: translateY(-4px)
}

.blog-whatsapp-btn {
  color: #fff;
  background: var(--blog-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .22)
}

.blog-whatsapp-btn:hover {
  color: #fff;
  background: #20bd5b;
  transform: translateY(-4px)
}

/* HERO */
.blog-hero {
  position: relative;
  min-height: 735px;
  padding: 105px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%),
    radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%),
    linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.blog-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.blog-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.blog-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px)
}

.blog-glow-one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.blog-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.blog-hero .container {
  z-index: 2
}

.blog-hero-title {
  margin: 18px 0 22px;
  color: var(--blog-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.blog-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple), var(--blog-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.blog-hero-text {
  max-width: 650px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.blog-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.blog-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055)
}

.blog-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-blue))
}

.blog-hero-points strong,
.blog-hero-points span {
  display: block
}

.blog-hero-points strong {
  font-size: 12px;
  font-weight: 900
}

.blog-hero-points span {
  font-size: 10.5px;
  color: var(--blog-muted);
  font-weight: 700
}

.blog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px
}

.blog-featured-card {
  overflow: hidden;
  border-radius: 38px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 38px 95px rgba(232, 51, 138, .16), 0 20px 55px rgba(8, 108, 172, .08)
}

.blog-featured-media {
  position: relative;
  height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(232, 51, 138, .16), transparent 58%),
    linear-gradient(135deg, #fff7fb, #eef7ff)
}

.blog-featured-media img {
  width: 86%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 24px 35px rgba(15, 23, 42, .2));
  transition: .45s
}

.blog-featured-card:hover .blog-featured-media img {
  transform: scale(1.04) rotate(-1deg)
}

.blog-featured-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple));
  font-size: 10px;
  font-weight: 900
}

.blog-featured-body {
  padding: 26px
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--blog-muted);
  font-size: 10.5px;
  font-weight: 750
}

.blog-post-meta i {
  color: var(--blog-pink)
}

.blog-featured-body h2 {
  margin: 12px 0 10px;
  font-size: 28px;
  line-height: 1.16;
  font-weight: 950;
  letter-spacing: -.035em
}

.blog-featured-body p {
  color: var(--blog-muted);
  font-size: 13px;
  line-height: 1.65
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blog-pink-dark);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none
}

.blog-read-link:hover {
  color: var(--blog-blue)
}

/* TRUST */
.blog-trust-strip {
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid rgba(232, 51, 138, .07);
  border-bottom: 1px solid rgba(232, 51, 138, .08)
}

.blog-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.blog-trust-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05)
}

.blog-trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-blue))
}

.blog-trust-item strong,
.blog-trust-item span {
  display: block
}

.blog-trust-item strong {
  font-size: 12px;
  font-weight: 900
}

.blog-trust-item span {
  margin-top: 3px;
  font-size: 10px;
  color: var(--blog-muted)
}

/* LIBRARY */
.blog-library {
  padding: 96px 0;
  background: radial-gradient(740px 380px at 5% 12%, rgba(232, 51, 138, .11), transparent 63%),
    radial-gradient(760px 400px at 95% 18%, rgba(8, 108, 172, .1), transparent 62%),
    linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.blog-library-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 251, .79));
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 25px 66px rgba(232, 51, 138, .1)
}

.blog-library-head .blog-kicker {
  margin-bottom: 12px
}

.blog-library-head h2,
.blog-section-head h2 {
  margin: 0;
  color: var(--blog-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700;
}

.blog-library-head p,
.blog-section-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--blog-muted);
  font-size: 15.5px;
  line-height: 1.68
}

.blog-library-count {
  min-width: 155px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple), var(--blog-blue))
}

.blog-library-count strong,
.blog-library-count span {
  display: block
}

.blog-library-count strong {
  font-size: 42px;
  line-height: .9
}

.blog-library-count span {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 850
}

.blog-filter-bar {
  margin-bottom: 28px;
  padding: 10px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06)
}

.blog-filter-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 51, 138, .11);
  background: #fff;
  color: #4c596d;
  font-size: 11.5px;
  font-weight: 850;
  transition: .3s
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple));
  box-shadow: 0 13px 30px rgba(232, 51, 138, .22)
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.blog-card {
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .075);
  transition: .35s
}

.blog-card:hover,
.blog-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(232, 51, 138, .14)
}

.blog-card.is-hidden {
  display: none
}

.blog-card-media {
  position: relative;
  height: 220px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(232, 51, 138, .13), transparent 60%),
    linear-gradient(135deg, #fff8fc, #eef7ff)
}

.blog-card-media img {
  width: 88%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, .16));
  transition: .4s
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.05)
}

.blog-card-category,
.blog-card-read {
  position: absolute;
  top: 14px;
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 8.8px;
  font-weight: 900
}

.blog-card-category {
  left: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-purple))
}

.blog-card-read {
  right: 14px;
  color: #536074;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .1)
}

.blog-card-body {
  padding: 20px
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--blog-muted);
  font-size: 9px;
  font-weight: 750
}

.blog-card-body h3 {
  min-height: 66px;
  margin: 10px 0 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 950;
  color: var(--blog-dark)
}

.blog-card-body p {
  min-height: 78px;
  margin: 0 0 15px;
  font-size: 12px;
  line-height: 1.58;
  color: var(--blog-muted)
}

.blog-card-body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blog-pink-dark);
  font-size: 11.5px;
  font-weight: 900;
  text-decoration: none
}

.blog-card-body a:hover {
  color: var(--blog-blue)
}

.blog-empty-state {
  display: none;
  padding: 55px 20px;
  text-align: center
}

.blog-empty-state.show {
  display: block
}

.blog-empty-state i {
  font-size: 44px;
  color: var(--blog-pink)
}

.blog-empty-state h3 {
  margin: 10px 0 5px;
  font-weight: 950
}

.blog-empty-state p {
  color: var(--blog-muted)
}

/* TOPICS */
.blog-topics-section {
  padding: 94px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 50%, #eff7ff)
}

.blog-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.blog-section-head .blog-kicker {
  margin-bottom: 13px
}

.blog-section-head p {
  margin-left: auto;
  margin-right: auto
}

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

.blog-topic-card {
  min-height: 235px;
  padding: 28px 20px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.blog-topic-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(232, 51, 138, .14)
}

.blog-topic-card i {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--blog-pink), var(--blog-blue));
  box-shadow: 0 19px 39px rgba(232, 51, 138, .22)
}

.blog-topic-card strong {
  color: var(--blog-dark);
  font-size: 17px;
  font-weight: 950
}

.blog-topic-card span {
  margin-top: 6px;
  color: var(--blog-muted);
  font-size: 12px
}

/* CTA */
.blog-cta-section {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.blog-cta-card {
  padding: 35px 38px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: radial-gradient(circle at 10% 10%, rgba(232, 51, 138, .14), transparent 32%),
    radial-gradient(circle at 94% 90%, rgba(8, 108, 172, .13), transparent 34%),
    linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.blog-cta-badge {
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  color: var(--blog-pink-dark);
  font-size: 11px;
  font-weight: 850
}

.blog-cta-card h2 {
  margin: 0 0 8px;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  font-weight: 700;
  letter-spacing: -.04em
}

.blog-cta-card p {
  max-width: 680px;
  margin: 0;
  color: var(--blog-muted);
  font-size: 13.5px;
  line-height: 1.62
}

.blog-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .blog-card-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .blog-hero {
    min-height: auto;
    padding: 96px 0 80px
  }
}

@media(max-width:991.98px) {
  .blog-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .blog-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .blog-hero-text {
    margin: auto
  }

  .blog-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .blog-hero-actions {
    justify-content: center
  }

  .blog-featured-card {
    max-width: 720px;
    margin: auto
  }

  .blog-trust-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .blog-library-head {
    flex-direction: column;
    text-align: center
  }

  .blog-library-count {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
  }

  .blog-card-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .blog-topic-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .blog-cta-card {
    flex-direction: column;
    text-align: center
  }

  .blog-cta-actions {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .blog-hero {
    padding: 68px 0 58px
  }

  .blog-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .blog-library,
  .blog-topics-section {
    padding: 68px 0
  }

  .blog-card-grid {
    grid-template-columns: 1fr
  }

  .blog-card {
    max-width: 560px;
    margin: auto
  }
}

@media(max-width:575.98px) {
  .blog-hero {
    padding: 57px 0 48px
  }

  .blog-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: .98
  }

  .blog-hero-text {
    font-size: 13.8px;
    line-height: 1.6
  }

  .blog-hero-points {
    grid-template-columns: 1fr
  }

  .blog-hero-actions,
  .blog-cta-actions {
    flex-direction: column
  }

  .blog-btn-primary,
  .blog-btn-secondary,
  .blog-whatsapp-btn {
    width: 100%
  }

  .blog-featured-media {
    height: 230px
  }

  .blog-featured-body {
    padding: 20px
  }

  .blog-featured-body h2 {
    font-size: 22px
  }

  .blog-trust-grid,
  .blog-topic-grid {
    grid-template-columns: 1fr
  }

  .blog-library-head {
    padding: 21px 16px;
    border-radius: 25px
  }

  .blog-library-head h2,
  .blog-section-head h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .blog-filter-bar {
    border-radius: 24px
  }

  .blog-filter-btn {
    width: 100%
  }

  .blog-card {
    border-radius: 25px
  }

  .blog-card-media {
    height: 190px
  }

  .blog-card-body h3,
  .blog-card-body p {
    min-height: auto
  }

  .blog-cta-card {
    padding: 23px 16px;
    border-radius: 25px
  }

  .blog-cta-card h2 {
    font-size: 1.9rem
  }
}






:root {
  --career-pink: #e8338a;
  --career-pink-dark: #c52273;
  --career-purple: #7d43ee;
  --career-blue: #086cac;
  --career-green: #25d366;
  --career-dark: #161927;
  --career-muted: #667085;
}

.career-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--career-pink-dark);
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(232, 51, 138, .14);
  box-shadow: 0 12px 30px rgba(232, 51, 138, .09);
  backdrop-filter: blur(12px)
}

.career-kicker span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue))
}

.career-btn-primary,
.career-btn-secondary,
.career-whatsapp-btn {
  min-height: 47px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  transition: .3s ease
}

.career-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--career-pink), var(--career-purple));
  box-shadow: 0 17px 38px rgba(232, 51, 138, .25)
}

.career-btn-primary:hover {
  color: #fff;
  transform: translateY(-4px)
}

.career-btn-secondary {
  color: var(--career-dark);
  background: #fff;
  border: 1px solid rgba(22, 25, 39, .1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07)
}

.career-btn-secondary:hover {
  color: var(--career-pink);
  transform: translateY(-4px)
}

/* HERO */
.career-hero {
  position: relative;
  min-height: 735px;
  padding: 105px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(760px 430px at 8% 14%, rgba(232, 51, 138, .16), transparent 62%),
    radial-gradient(780px 440px at 92% 16%, rgba(8, 108, 172, .15), transparent 62%),
    linear-gradient(135deg, #fff 0%, #fff6fa 50%, #eef7ff 100%)
}

.career-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 34px 95px rgba(232, 51, 138, .08)
}

.career-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(rgba(232, 51, 138, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 108, 172, .035) 1px, transparent 1px);
  background-size: 56px 56px
}

.career-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px)
}

.career-glow-one {
  width: 440px;
  height: 440px;
  left: -230px;
  top: 120px;
  background: rgba(232, 51, 138, .14)
}

.career-glow-two {
  width: 520px;
  height: 520px;
  right: -270px;
  bottom: -140px;
  background: rgba(8, 108, 172, .13)
}

.career-hero .container {
  z-index: 2
}

.career-hero-title {
  margin: 18px 0 22px;
  color: var(--career-dark);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Segore UI", Arial, sans-serif;
}

.career-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--career-pink), var(--career-purple), var(--career-blue));
  -webkit-background-clip: text;
  background-clip: text
}

.career-hero-text {
  max-width: 650px;
  color: #5d687d;
  font-size: 16.5px;
  line-height: 1.75
}

.career-hero-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px
}

.career-hero-points>div {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .055)
}

.career-hero-points i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue))
}

.career-hero-points strong,
.career-hero-points span {
  display: block
}

.career-hero-points strong {
  font-size: 12px;
  font-weight: 900
}

.career-hero-points span {
  font-size: 10.5px;
  color: var(--career-muted);
  font-weight: 700
}

.career-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px
}

.career-hero-card {
  position: relative;
  min-height: 590px;
  padding: 25px;
  border-radius: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 14%, rgba(232, 51, 138, .17), transparent 35%),
    radial-gradient(circle at 88% 17%, rgba(8, 108, 172, .17), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .63));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 38px 100px rgba(232, 51, 138, .15), 0 24px 70px rgba(8, 108, 172, .1);
  backdrop-filter: blur(20px)
}

.career-hero-card::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--career-pink), var(--career-purple), var(--career-blue))
}

.career-card-top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.career-card-top span,
.career-card-top strong {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.career-card-top span {
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12)
}

.career-card-top strong {
  color: #fff;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue))
}

.career-visual-stage {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center
}

.career-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(232, 51, 138, .24)
}

.career-orbit-one {
  width: 390px;
  height: 390px;
  animation: careerSpin 18s linear infinite
}

.career-orbit-two {
  width: 290px;
  height: 290px;
  border-color: rgba(8, 108, 172, .24);
  animation: careerSpinBack 14s linear infinite
}

@keyframes careerSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes careerSpinBack {
  to {
    transform: rotate(-360deg)
  }
}

.career-main-badge {
  position: relative;
  z-index: 3;
  width: 250px;
  height: 250px;
  border-radius: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), transparent 35%),
    linear-gradient(145deg, var(--career-pink), var(--career-purple), var(--career-blue));
  box-shadow: 0 35px 75px rgba(232, 51, 138, .24);
  transform: rotate(-4deg)
}

.career-main-badge::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 32px;
  border: 1px dashed rgba(255, 255, 255, .5)
}

.career-main-badge i {
  font-size: 58px
}

.career-main-badge strong {
  font-size: 29px;
  line-height: 1;
  font-weight: 950
}

.career-main-badge span {
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800
}

.career-float-chip {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .1);
  font-size: 10.5px;
  font-weight: 900
}

.career-float-chip i {
  color: var(--career-pink)
}

.career-float-chip.chip-one {
  left: 5px;
  top: 100px
}

.career-float-chip.chip-two {
  right: 4px;
  top: 165px
}

.career-float-chip.chip-three {
  left: 28px;
  bottom: 65px
}

.career-card-bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(232, 51, 138, .11)
}

.career-card-bottom div {
  padding: 10px 7px;
  border-radius: 17px;
  text-align: center;
  background: #fff7fb
}

.career-card-bottom i {
  display: block;
  margin-bottom: 3px;
  color: var(--career-pink);
  font-size: 18px
}

.career-card-bottom span {
  font-size: 9.8px;
  color: var(--career-muted);
  font-weight: 800
}

/* TRUST */
.career-trust-strip {
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid rgba(232, 51, 138, .07);
  border-bottom: 1px solid rgba(232, 51, 138, .08)
}

.career-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.career-trust-item {
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid rgba(232, 51, 138, .1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05)
}

.career-trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue))
}

.career-trust-item strong,
.career-trust-item span {
  display: block
}

.career-trust-item strong {
  font-size: 12px;
  font-weight: 900
}

.career-trust-item span {
  margin-top: 3px;
  font-size: 10px;
  color: var(--career-muted)
}

/* OPENINGS */
.career-openings {
  padding: 96px 0;
  background: radial-gradient(740px 380px at 5% 12%, rgba(232, 51, 138, .11), transparent 63%),
    radial-gradient(760px 400px at 95% 18%, rgba(8, 108, 172, .1), transparent 62%),
    linear-gradient(180deg, #fff, #fff7fb 50%, #fff)
}

.career-openings-head {
  margin-bottom: 27px;
  padding: 28px 30px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 251, .79));
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 25px 66px rgba(232, 51, 138, .1)
}

.career-openings-head .career-kicker {
  margin-bottom: 12px
}

.career-openings-head h2,
.career-section-head h2,
.career-apply-card h2 {
  margin: 0;
  color: var(--career-dark);
  font-size: clamp(2.1rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 700
}

.career-openings-head p,
.career-section-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--career-muted);
  font-size: 15.5px;
  line-height: 1.68
}

.career-openings-count {
  min-width: 155px;
  padding: 18px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--career-pink), var(--career-purple), var(--career-blue))
}

.career-openings-count strong,
.career-openings-count span {
  display: block
}

.career-openings-count strong {
  font-size: 42px;
  line-height: .9
}

.career-openings-count span {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 850
}

.career-filter-bar {
  margin-bottom: 28px;
  padding: 10px;
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06)
}

.career-filter-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 51, 138, .11);
  background: #fff;
  color: #4c596d;
  font-size: 11.5px;
  font-weight: 700;
  transition: .3s
}

.career-filter-btn:hover,
.career-filter-btn.active {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--career-pink), var(--career-purple));
  box-shadow: 0 13px 30px rgba(232, 51, 138, .22)
}

.career-job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px
}

.career-job-card {
  position: relative;
  padding: 24px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 24px 62px rgba(15, 23, 42, .075);
  transition: .35s
}

.career-job-card:hover,
.career-job-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(232, 51, 138, .14)
}

.career-job-card.is-hidden {
  display: none
}

.career-job-top {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.career-job-category,
.career-job-status {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900
}

.career-job-category {
  color: var(--career-pink-dark);
  background: #fff1f7;
  border: 1px solid rgba(232, 51, 138, .1)
}

.career-job-status {
  color: #17884b;
  background: #eafbf1
}

.career-job-status.intern {
  color: #6b4ad8;
  background: #f2edff
}

.career-job-icon {
  width: 62px;
  height: 62px;
  margin: 22px 0 16px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue));
  box-shadow: 0 17px 36px rgba(232, 51, 138, .2)
}

.career-job-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950
}

.career-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px
}

.career-job-meta span {
  padding: 7px 9px;
  border-radius: 999px;
  background: #f7f8fb;
  color: #5a667a;
  font-size: 9.5px;
  font-weight: 800
}

.career-job-meta i {
  color: var(--career-pink)
}

.career-job-card>p {
  color: var(--career-muted);
  font-size: 12.5px;
  line-height: 1.62
}

.career-job-card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: grid;
  gap: 8px
}

.career-job-card li {
  position: relative;
  padding-left: 20px;
  color: #4a566a;
  font-size: 11.5px;
  font-weight: 700
}

.career-job-card li::before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  color: var(--career-pink)
}

.career-apply-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--career-pink), var(--career-purple));
  box-shadow: 0 14px 30px rgba(232, 51, 138, .2)
}

.career-apply-btn:hover {
  color: #fff;
  transform: translateY(-2px)
}

.career-empty-state {
  display: none;
  padding: 50px 20px;
  text-align: center
}

.career-empty-state.show {
  display: block
}

.career-empty-state i {
  font-size: 44px;
  color: var(--career-pink)
}

.career-empty-state h3 {
  font-weight: 950
}

.career-empty-state p {
  color: var(--career-muted)
}

/* CULTURE */
.career-culture-section {
  padding: 94px 0;
  background: linear-gradient(135deg, #fff7fb, #fff 50%, #eff7ff)
}

.career-section-head {
  max-width: 820px;
  margin: 0 auto 44px
}

.career-section-head .career-kicker {
  margin-bottom: 13px
}

.career-section-head p {
  margin-left: auto;
  margin-right: auto
}

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

.career-culture-card {
  position: relative;
  min-height: 270px;
  padding: 28px 21px;
  border-radius: 30px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .11);
  box-shadow: 0 23px 60px rgba(15, 23, 42, .075);
  transition: .35s
}

.career-culture-card:hover,
.career-culture-card.featured {
  transform: translateY(-8px);
  box-shadow: 0 32px 76px rgba(232, 51, 138, .14)
}

.career-culture-card>span {
  position: absolute;
  top: 15px;
  right: 17px;
  color: rgba(232, 51, 138, .13);
  font-size: 34px;
  font-weight: 950
}

.career-culture-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue));
  box-shadow: 0 19px 39px rgba(232, 51, 138, .22)
}

.career-culture-card h3 {
  font-size: 17px;
  font-weight: 950
}

.career-culture-card p {
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--career-muted)
}

/* PROCESS */
.career-process-section {
  padding: 94px 0;
  background: #fff
}

.career-process-grid {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr 70px 1fr;
  align-items: center;
  gap: 10px
}

.career-process-step {
  text-align: center
}

.career-process-step>span {
  display: inline-block;
  margin-bottom: 10px;
  color: rgba(232, 51, 138, .25);
  font-size: 34px;
  font-weight: 950
}

.career-process-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 16px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  background: linear-gradient(135deg, var(--career-pink), var(--career-blue));
  box-shadow: 0 20px 44px rgba(232, 51, 138, .22)
}

.career-process-step h3 {
  font-size: 16px;
  font-weight: 950
}

.career-process-step p {
  font-size: 12px;
  color: var(--career-muted)
}

.career-process-line {
  height: 2px;
  background: linear-gradient(90deg, rgba(232, 51, 138, .25), rgba(8, 108, 172, .25));
  position: relative
}

.career-process-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--career-blue)
}

/* APPLY */
.career-apply-section {
  padding: 75px 0 95px;
  background: linear-gradient(180deg, #fff, #fff5fa)
}

.career-apply-card {
  padding: 40px;
  border-radius: 40px;
  background: radial-gradient(circle at 10% 10%, rgba(232, 51, 138, .14), transparent 32%),
    radial-gradient(circle at 94% 90%, rgba(8, 108, 172, .13), transparent 34%), linear-gradient(145deg, #fff, #fff4fa);
  border: 1px solid rgba(232, 51, 138, .13);
  box-shadow: 0 30px 82px rgba(232, 51, 138, .13)
}

.career-apply-card .career-kicker {
  margin-bottom: 14px
}

.career-apply-card>div p,
.career-apply-card .col-lg-7>p {
  margin: 15px 0;
  color: var(--career-muted);
  font-size: 14px;
  line-height: 1.65
}

.career-apply-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.career-apply-points span {
  padding: 8px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .1);
  font-size: 10.5px;
  font-weight: 800;
  color: #4f5c70
}

.career-apply-points i {
  color: var(--career-pink)
}

.career-contact-box {
  padding: 28px;
  border-radius: 30px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(232, 51, 138, .12);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08)
}

.career-contact-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 16px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  background: var(--career-green);
  box-shadow: 0 18px 40px rgba(37, 211, 102, .25)
}

.career-contact-box h3 {
  font-size: 22px;
  font-weight: 950
}

.career-contact-box p {
  font-size: 12.5px;
  color: var(--career-muted)
}

.career-whatsapp-btn {
  width: 100%;
  color: #fff;
  background: var(--career-green);
  box-shadow: 0 17px 38px rgba(37, 211, 102, .22)
}

.career-whatsapp-btn:hover {
  color: #fff;
  background: #20bd5b;
  transform: translateY(-3px)
}

.career-call-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--career-pink-dark);
  font-size: 11.5px;
  font-weight: 900;
  text-decoration: none
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .career-hero {
    min-height: auto;
    padding: 96px 0 80px
  }

  .career-culture-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:991.98px) {
  .career-hero {
    text-align: center;
    padding: 80px 0 70px
  }

  .career-kicker {
    margin-left: auto;
    margin-right: auto
  }

  .career-hero-text {
    margin: auto
  }

  .career-hero-points {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
  }

  .career-hero-actions {
    justify-content: center
  }

  .career-hero-card {
    max-width: 720px;
    margin: auto
  }

  .career-trust-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .career-openings-head {
    flex-direction: column;
    text-align: center
  }

  .career-openings-count {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
  }

  .career-process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .career-process-line {
    display: none
  }

  .career-apply-card {
    text-align: center
  }

  .career-apply-points {
    justify-content: center
  }
}

@media(max-width:767.98px) {
  .career-hero {
    padding: 68px 0 58px
  }

  .career-hero::before {
    inset: 10px;
    border-radius: 30px
  }

  .career-openings,
  .career-culture-section,
  .career-process-section {
    padding: 68px 0
  }

  .career-job-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:575.98px) {
  .career-hero {
    padding: 57px 0 48px
  }

  .career-hero-title {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: .98
  }

  .career-hero-text {
    font-size: 13.8px;
    line-height: 1.6
  }

  .career-hero-points {
    grid-template-columns: 1fr
  }

  .career-hero-actions {
    flex-direction: column
  }

  .career-btn-primary,
  .career-btn-secondary {
    width: 100%
  }

  .career-hero-card {
    min-height: 445px;
    padding: 15px;
    border-radius: 26px
  }

  .career-card-top {
    flex-direction: column
  }

  .career-card-top span,
  .career-card-top strong {
    text-align: center
  }

  .career-visual-stage {
    min-height: 280px
  }

  .career-main-badge {
    width: 190px;
    height: 190px
  }

  .career-main-badge i {
    font-size: 42px
  }

  .career-main-badge strong {
    font-size: 23px
  }

  .career-orbit-one {
    width: 240px;
    height: 240px
  }

  .career-orbit-two {
    width: 180px;
    height: 180px
  }

  .career-float-chip {
    display: none
  }

  .career-card-bottom {
    grid-template-columns: 1fr
  }

  .career-trust-grid,
  .career-culture-grid {
    grid-template-columns: 1fr
  }

  .career-openings-head {
    padding: 21px 16px;
    border-radius: 25px
  }

  .career-openings-head h2,
  .career-section-head h2,
  .career-apply-card h2 {
    font-size: clamp(1.95rem, 9vw, 2.7rem)
  }

  .career-filter-bar {
    border-radius: 24px
  }

  .career-filter-btn {
    width: 100%
  }

  .career-job-card {
    padding: 19px;
    border-radius: 25px
  }

  .career-job-card h3 {
    font-size: 19px
  }

  .career-process-grid {
    grid-template-columns: 1fr
  }

  .career-apply-card {
    padding: 24px 16px;
    border-radius: 26px
  }

  .career-contact-box {
    padding: 22px 16px;
    border-radius: 24px
  }
}




/* =========================================================
   FLYDAYZ ULTRA PREMIUM FOOTER
========================================================= */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-pink-soft: #fff3f8;
  --fd-purple: #7b3ff2;
  --fd-blue: #436dff;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-border: rgba(231, 53, 139, 0.12);
  --fd-white: #ffffff;
  --fd-whatsapp: #25d366;
  --fd-whatsapp-dark: #128c7e;
}






:root {
  --dp: #e7358b;
  --dpd: #bd1f6c;
  --du: #7b3ff2;
  --db: #436dff;
  --dg: #20bf67;
  --di: #171b2a;
  --dt: #617086;
  --dl: rgba(231, 53, 139, .12)
}

html {
  scroll-behavior: smooth
}

.dist-section {
  padding: 100px 0
}

.dist-hero {
  position: relative;
  min-height: 760px;
  padding: 90px 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: radial-gradient(800px 460px at 5% 8%, rgba(231, 53, 139, .17), transparent 63%), radial-gradient(820px 460px at 96% 16%, rgba(67, 109, 255, .14), transparent 62%), linear-gradient(145deg, #fffafd, #fff4fa 52%, #f6f3ff)
}

.dist-mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .46;
  background: linear-gradient(rgba(231, 53, 139, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 109, 255, .028) 1px, transparent 1px);
  background-size: 58px 58px
}

.dist-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px)
}

.dist-orb.one {
  width: 430px;
  height: 430px;
  left: -230px;
  bottom: -150px;
  background: rgba(231, 53, 139, .14)
}

.dist-orb.two {
  width: 500px;
  height: 500px;
  right: -270px;
  top: 90px;
  background: rgba(123, 63, 242, .12)
}

.dist-kicker,
.dist-section-kicker {
  width: fit-content;
  min-height: 42px;
  padding: 7px 17px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dpd);
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(231, 53, 139, .14);
  box-shadow: 0 14px 34px rgba(231, 53, 139, .1)
}

.dist-kicker span,
.dist-section-kicker span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--dp), var(--du))
}

.dist-hero-title {
  margin: 20px 0;
  color: var(--di);
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: .98;
  font-weight: 850;
  letter-spacing: -.06em
}

.dist-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--dp), var(--du), var(--db));
  -webkit-background-clip: text;
  background-clip: text
}

.dist-hero-text {
  max-width: 650px;
  margin: 0 0 28px;
  color: var(--dt);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 550
}

.dist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px
}

.dist-btn {
  min-height: 52px;
  padding: 0 23px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  transition: .3s
}

.dist-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--dp), var(--du));
  box-shadow: 0 20px 44px rgba(231, 53, 139, .28)
}

.dist-btn.light {
  color: var(--di);
  background: #fff;
  border: 1px solid rgba(23, 27, 42, .09);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07)
}

.dist-btn:hover {
  transform: translateY(-4px)
}

.dist-btn.primary:hover {
  color: #fff
}

.dist-btn.light:hover {
  color: var(--dpd)
}

.dist-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.dist-trust span {
  padding: 8px 11px;
  border-radius: 999px;
  color: #526074;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(231, 53, 139, .09)
}

.dist-trust i {
  color: var(--dp);
  margin-right: 5px
}

.dist-hero-card {
  position: relative;
  min-height: 570px;
  padding: 30px;
  overflow: hidden;
  border-radius: 48px;
  background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .98), transparent 34%), radial-gradient(circle at 75% 45%, rgba(231, 53, 139, .15), transparent 40%), linear-gradient(145deg, #fff, rgba(255, 244, 251, .84));
  border: 1px solid #fff;
  box-shadow: 0 38px 105px rgba(231, 53, 139, .19), 0 20px 58px rgba(15, 23, 42, .1)
}

.dist-card-top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.dist-card-top small {
  color: var(--dpd);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px
}

.dist-card-top h3 {
  margin: 5px 0 0;
  color: var(--di);
  font-size: 1.75rem;
  font-weight: 850
}

.dist-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 25px;
  background: linear-gradient(135deg, var(--dp), var(--du));
  box-shadow: 0 18px 40px rgba(231, 53, 139, .27)
}

.dist-product-stage {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center
}

.dist-product-img {
  position: relative;
  z-index: 3;
  width: min(110%, 680px);
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 30px 42px rgba(15, 23, 42, .24))
}

.dist-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%
}

.dist-ring.r1 {
  width: 370px;
  height: 370px;
  border: 1px solid rgba(231, 53, 139, .14)
}

.dist-ring.r2 {
  width: 285px;
  height: 285px;
  border: 1px dashed rgba(123, 63, 242, .2)
}

.dist-mini-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.dist-mini-grid div {
  padding: 13px 10px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--dl);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .05)
}

.dist-mini-grid strong,
.dist-mini-grid span {
  display: block
}

.dist-mini-grid strong {
  color: var(--di);
  font-size: 11px;
  font-weight: 900
}

.dist-mini-grid span {
  margin-top: 3px;
  color: var(--dt);
  font-size: 9px
}

.dist-head {
  max-width: 800px;
  margin: 0 auto 48px
}

.dist-head h2,
.dist-title {
  margin: 18px 0 13px;
  color: var(--di);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -.05em
}

.dist-head p,
.dist-copy {
  color: var(--dt);
  font-size: 15px;
  line-height: 1.72
}

.dist-categories,
.dist-process,
.dist-apply {
  background: #fff
}

.dist-category-card {
  position: relative;
  height: 100%;
  min-height: 355px;
  padding: 28px 24px;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(circle at 10% 8%, rgba(231, 53, 139, .11), transparent 34%), linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid var(--dl);
  box-shadow: 0 24px 66px rgba(15, 23, 42, .07);
  transition: .35s
}

.dist-category-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 34px 82px rgba(231, 53, 139, .14)
}

.dist-category-card>b {
  position: absolute;
  right: 22px;
  top: 20px;
  color: rgba(231, 53, 139, .15);
  font-size: 42px;
  font-weight: 950
}

.dist-category-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 22px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 27px;
  background: linear-gradient(135deg, var(--dp), var(--du));
  box-shadow: 0 18px 40px rgba(231, 53, 139, .24)
}

.dist-category-card h3 {
  margin: 0 0 10px;
  color: var(--di);
  font-size: 1.35rem;
  font-weight: 850
}

.dist-category-card p {
  color: var(--dt);
  font-size: 12.5px;
  line-height: 1.62
}

.dist-category-card ul {
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px
}

.dist-category-card li {
  color: #4f5d71;
  font-size: 10.5px;
  font-weight: 750
}

.dist-category-card li:before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 8px;
  color: #fff;
  background: var(--dp)
}

.dist-benefits,
.dist-requirements,
.dist-faq {
  background: radial-gradient(700px 420px at 8% 20%, rgba(231, 53, 139, .11), transparent 64%), linear-gradient(180deg, #fff8fc, #fff)
}

.dist-benefit-visual {
  position: relative;
  min-height: 570px;
  border-radius: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(231, 53, 139, .14), transparent 42%), linear-gradient(145deg, #fff, #fff5fb);
  border: 1px solid var(--dl);
  box-shadow: 0 32px 86px rgba(231, 53, 139, .13)
}

.dist-visual-label {
  position: absolute;
  left: 28px;
  top: 28px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--dpd);
  font-size: 11px;
  font-weight: 900;
  background: #fff;
  border: 1px solid var(--dl)
}

.dist-growth-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, var(--dp), var(--du), var(--db));
  box-shadow: 0 34px 80px rgba(123, 63, 242, .3)
}

.dist-growth-circle span {
  font-size: 2.2rem;
  font-weight: 900
}

.dist-growth-circle strong {
  font-size: 12px
}

.dist-growth-pill {
  position: absolute;
  min-height: 46px;
  padding: 9px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--di);
  font-size: 11px;
  font-weight: 850;
  background: #fff;
  border: 1px solid var(--dl);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .09)
}

.dist-growth-pill.a {
  left: 35px;
  bottom: 140px
}

.dist-growth-pill.b {
  right: 35px;
  top: 145px
}

.dist-growth-pill.c {
  right: 45px;
  bottom: 80px
}

.dist-benefit-list {
  display: grid;
  gap: 13px;
  margin-top: 26px
}

.dist-benefit-list>div,
.dist-requirements-grid>div {
  padding: 17px;
  border-radius: 24px;
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--dl);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055)
}

.dist-benefit-list>div>i,
.dist-requirements-grid>div>i {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background: linear-gradient(135deg, var(--dp), var(--du))
}

.dist-benefit-list h4,
.dist-requirements-grid h4 {
  margin: 0 0 4px;
  color: var(--di);
  font-size: 13px;
  font-weight: 900
}

.dist-benefit-list p,
.dist-requirements-grid p {
  margin: 0;
  color: var(--dt);
  font-size: 11px;
  line-height: 1.5
}

.dist-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.dist-process-grid article {
  position: relative;
  min-height: 260px;
  padding: 26px 22px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(145deg, #fff, #fff7fb);
  border: 1px solid var(--dl);
  box-shadow: 0 22px 58px rgba(15, 23, 42, .065)
}

.dist-process-grid article>span {
  position: absolute;
  right: 18px;
  top: 16px;
  color: rgba(231, 53, 139, .16);
  font-size: 28px;
  font-weight: 950
}

.dist-process-grid article>i {
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  background: linear-gradient(135deg, var(--dp), var(--du));
  box-shadow: 0 20px 42px rgba(231, 53, 139, .25)
}

.dist-process-grid h3 {
  color: var(--di);
  font-size: 1.2rem;
  font-weight: 850
}

.dist-process-grid p {
  color: var(--dt);
  font-size: 11.5px;
  line-height: 1.58
}

.dist-requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

.dist-requirements-grid>div {
  min-height: 130px
}

.dist-apply-shell {
  overflow: hidden;
  border-radius: 46px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  background: #fff;
  border: 1px solid var(--dl);
  box-shadow: 0 38px 105px rgba(231, 53, 139, .15)
}

.dist-apply-info {
  padding: 48px 40px;
  color: #fff;
  background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .2), transparent 28%), linear-gradient(145deg, var(--dp), var(--du), var(--db))
}

.light-kicker {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: none
}

.light-kicker span {
  background: #fff;
  color: var(--dp)
}

.dist-apply-info h2 {
  margin: 22px 0 14px;
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -.05em
}

.dist-apply-info>p {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.7
}

.dist-contact-cards {
  margin-top: 26px;
  display: grid;
  gap: 10px
}

.dist-contact-cards a {
  padding: 13px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18)
}

.dist-contact-cards i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  color: var(--dp)
}

.dist-contact-cards small,
.dist-contact-cards strong {
  display: block
}

.dist-contact-cards small {
  font-size: 8px;
  color: rgba(255, 255, 255, .72)
}

.dist-contact-cards strong {
  font-size: 12px
}

.dist-hours {
  margin-top: 22px;
  padding: 15px;
  border-radius: 21px;
  display: flex;
  gap: 11px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .17)
}

.dist-hours strong,
.dist-hours span,
.dist-hours small {
  display: block
}

.dist-hours strong {
  font-size: 11px
}

.dist-hours span {
  font-size: 10px;
  color: rgba(255, 255, 255, .82)
}

.dist-hours small {
  font-size: 8.5px;
  color: #ffe7a4
}

.dist-form {
  padding: 44px 42px;
  background: radial-gradient(circle at 100% 0%, rgba(231, 53, 139, .07), transparent 30%), #fff
}

.dist-form-head span {
  color: var(--dpd);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase
}

.dist-form-head h3 {
  margin: 5px 0 4px;
  color: var(--di);
  font-size: 2rem;
  font-weight: 850
}

.dist-form-head p {
  margin: 0 0 22px;
  color: var(--dt);
  font-size: 10px
}

.dist-form label {
  margin-bottom: 7px;
  color: #2c3445;
  font-size: 10.5px;
  font-weight: 850
}

.dist-form .form-control,
.dist-form .form-select {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(23, 27, 42, .1);
  background: #fffafd;
  color: var(--di);
  font-size: 12px;
  box-shadow: none
}

.dist-form textarea.form-control {
  min-height: 120px;
  padding-top: 14px
}

.dist-form .form-control:focus,
.dist-form .form-select:focus {
  border-color: rgba(231, 53, 139, .45);
  box-shadow: 0 0 0 4px rgba(231, 53, 139, .08)
}

.dist-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--dt) !important;
  font-size: 9.5px !important
}

.dist-submit {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dp), var(--du));
  box-shadow: 0 20px 42px rgba(231, 53, 139, .26)
}

.dist-accordion {
  max-width: 920px;
  margin: auto;
  display: grid;
  gap: 12px;
  --bs-accordion-border-width: 0
}

.dist-accordion .accordion-item {
  overflow: hidden;
  border: 1px solid var(--dl) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .055)
}

.dist-accordion .accordion-button {
  min-height: 72px;
  padding: 17px 20px;
  color: var(--di);
  font-size: 13px;
  font-weight: 850;
  background: #fff !important;
  box-shadow: none !important
}

.dist-accordion .accordion-button:not(.collapsed) {
  color: var(--dpd);
  background: linear-gradient(135deg, #fff7fb, #f8f3ff) !important
}

.dist-accordion .accordion-body {
  padding: 0 20px 20px;
  color: var(--dt);
  font-size: 12px;
  line-height: 1.65
}

@media(max-width:1199.98px) {
  .dist-process-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:991.98px) {
  .dist-section {
    padding: 78px 0
  }

  .dist-hero {
    min-height: auto;
    padding: 72px 0
  }

  .dist-apply-shell {
    grid-template-columns: 1fr
  }

  .dist-hero-card {
    max-width: 680px;
    margin: auto
  }
}

@media(max-width:767.98px) {
  .dist-section {
    padding: 64px 0
  }

  .dist-hero {
    padding: 58px 0
  }

  .dist-requirements-grid {
    grid-template-columns: 1fr
  }

  .dist-form,
  .dist-apply-info {
    padding: 34px 26px
  }
}

@media(max-width:575.98px) {
  .dist-section {
    padding: 52px 0
  }

  .dist-hero {
    padding: 46px 0
  }

  .dist-kicker,
  .dist-section-kicker {
    min-height: 36px;
    font-size: 10.5px
  }

  .dist-hero-title {
    font-size: clamp(2.25rem, 12vw, 3rem);
    line-height: 1
  }

  .dist-hero-text {
    font-size: 13px
  }

  .dist-actions {
    display: grid
  }

  .dist-btn {
    width: 100%
  }

  .dist-trust {
    display: grid
  }

  .dist-hero-card {
    min-height: 390px;
    padding: 18px;
    border-radius: 30px
  }

  .dist-product-stage {
    min-height: 230px
  }

  .dist-product-img {
    width: min(118%, 420px)
  }

  .dist-mini-grid {
    grid-template-columns: 1fr
  }

  .dist-head h2,
  .dist-title {
    font-size: clamp(2rem, 10vw, 2.8rem)
  }

  .dist-benefit-visual {
    min-height: 390px;
    border-radius: 32px
  }

  .dist-growth-circle {
    width: 175px;
    height: 175px
  }

  .dist-growth-pill {
    font-size: 9px
  }

  .dist-growth-pill.a {
    left: 14px;
    bottom: 90px
  }

  .dist-growth-pill.b {
    right: 14px;
    top: 115px
  }

  .dist-growth-pill.c {
    right: 14px;
    bottom: 42px
  }

  .dist-process-grid {
    grid-template-columns: 1fr
  }

  .dist-apply-shell {
    border-radius: 30px
  }

  .dist-form,
  .dist-apply-info {
    padding: 27px 18px
  }
}




/* =========================================================
   ABOUT FLYDAYZ — ULTRA PREMIUM RESPONSIVE
========================================================= */

:root {
  --fd-pink: #e7358b;
  --fd-pink-dark: #c71f72;
  --fd-blue: #436dff;
  --fd-purple: #7b3ff2;
  --fd-dark: #171b2a;
  --fd-muted: #667085;
  --fd-green: #25d366;
  --fd-white: #ffffff;
}

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

.about-premium {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(760px 430px at 8% 14%,
      rgba(231, 53, 139, 0.15),
      transparent 62%),
    radial-gradient(820px 440px at 92% 18%,
      rgba(67, 109, 255, 0.12),
      transparent 60%),
    linear-gradient(180deg,
      #ffffff 0%,
      #fff7fb 50%,
      #ffffff 100%);
}

.about-premium::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -2;
  border-radius: 44px;
  border: 1px solid rgba(231, 53, 139, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 36px 110px rgba(231, 53, 139, 0.07);
  pointer-events: none;
}

.about-premium::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -270px;
  bottom: -290px;
  z-index: -2;
  border-radius: 50%;
  background:
    linear-gradient(135deg,
      rgba(231, 53, 139, 0.14),
      rgba(67, 109, 255, 0.12));
  filter: blur(16px);
  pointer-events: none;
}

.about-premium .container {
  position: relative;
  z-index: 3;
}

/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.about-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.45;
  background:
    linear-gradient(rgba(231, 53, 139, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(231, 53, 139, 0.025) 1px,
      transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.about-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(12px);
}

.about-glow-one {
  width: 360px;
  height: 360px;
  left: -180px;
  top: 18%;
  background: rgba(231, 53, 139, 0.12);
}

.about-glow-two {
  width: 420px;
  height: 420px;
  right: -210px;
  bottom: 5%;
  background: rgba(67, 109, 255, 0.11);
}

.about-decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.about-blob-one {
  width: 350px;
  left: -175px;
  top: -120px;
  opacity: 0.28;
  animation: aboutBlobOne 8s ease-in-out infinite alternate;
}

.about-blob-two {
  width: 340px;
  right: -160px;
  bottom: -145px;
  opacity: 0.24;
  animation: aboutBlobTwo 9s ease-in-out infinite alternate;
}

.about-cotton {
  width: 96px;
  right: 6%;
  top: 12%;
  opacity: 0.75;
  filter: drop-shadow(0 18px 28px rgba(231, 53, 139, 0.17));
  animation: aboutCotton 6s ease-in-out infinite alternate;
}

.about-pad-outline {
  width: 580px;
  left: 50%;
  top: 50%;
  opacity: 0.04;
  transform: translate(-50%, -50%) rotate(-18deg);
}

@keyframes aboutBlobOne {
  to {
    transform: translateY(22px) rotate(5deg);
  }
}

@keyframes aboutBlobTwo {
  to {
    transform: translateY(-20px) rotate(-5deg);
  }
}

@keyframes aboutCotton {
  to {
    transform: translateY(17px) rotate(4deg);
  }
}

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

.about-visual {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-visual-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.about-visual-ring.ring-one {
  width: 510px;
  height: 510px;
  border: 1px solid rgba(231, 53, 139, 0.14);
  animation: aboutRingRotate 18s linear infinite;
}

.about-visual-ring.ring-two {
  width: 430px;
  height: 430px;
  border: 1px dashed rgba(67, 109, 255, 0.16);
  animation: aboutRingRotateReverse 22s linear infinite;
}

.about-visual-ring::before,
.about-visual-ring::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple));
  box-shadow: 0 8px 20px rgba(231, 53, 139, 0.28);
}

.about-visual-ring::before {
  left: 46px;
  top: 78px;
}

.about-visual-ring::after {
  right: 40px;
  bottom: 76px;
}

@keyframes aboutRingRotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes aboutRingRotateReverse {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Main visual card */
.about-product-card {
  position: relative;
  z-index: 3;
  width: min(100%, 500px);
  padding: 24px;
  overflow: hidden;
  border-radius: 42px;
  background:
    radial-gradient(circle at 85% 8%,
      rgba(67, 109, 255, 0.13),
      transparent 35%),
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 246, 251, 0.82));
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow:
    0 34px 95px rgba(15, 23, 42, 0.13),
    0 20px 48px rgba(231, 53, 139, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.about-product-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -105px;
  top: -110px;
  border-radius: 50%;
  background: rgba(123, 63, 242, 0.09);
  pointer-events: none;
}

.about-product-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.about-mini-badge,
.about-product-status {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.about-mini-badge {
  color: var(--fd-pink-dark);
}

.about-product-status {
  color: #526071;
}

.about-product-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fd-green);
  box-shadow: 0 0 0 5px rgba(37, 211, 102, 0.11);
}

.about-product-stage {
  position: relative;
  z-index: 2;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-product-halo {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(231, 53, 139, 0.20),
      rgba(123, 63, 242, 0.08) 48%,
      transparent 70%);
}

.about-product-img {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  max-width: 430px;
  height: 285px;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 34px 48px rgba(231, 53, 139, 0.18)) drop-shadow(0 17px 28px rgba(15, 23, 42, 0.14));
  animation: aboutProductFloat 4.4s ease-in-out infinite alternate;
}

@keyframes aboutProductFloat {
  to {
    transform: translateY(-14px) rotate(1deg);
  }
}

.about-product-features {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.about-product-feature {
  min-width: 0;
  padding: 13px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(231, 53, 139, 0.10);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.about-feature-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple),
      var(--fd-blue));
  box-shadow: 0 11px 24px rgba(231, 53, 139, 0.20);
}

.about-product-feature strong,
.about-product-feature span {
  display: block;
}

.about-product-feature strong {
  color: var(--fd-dark);
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 900;
}

.about-product-feature span {
  margin-top: 3px;
  color: var(--fd-muted);
  font-size: 9.8px;
  line-height: 1.25;
}

/* Floating cards */
.about-floating-card {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  padding: 13px 15px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(231, 53, 139, 0.13);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.about-floating-card-one {
  left: -8px;
  top: 95px;
  animation: aboutCardFloatOne 4s ease-in-out infinite alternate;
}

.about-floating-card-two {
  right: -5px;
  bottom: 90px;
  animation: aboutCardFloatTwo 4.5s ease-in-out infinite alternate;
}

.about-floating-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple));
  box-shadow: 0 12px 27px rgba(231, 53, 139, 0.22);
}

.about-floating-card strong,
.about-floating-card span {
  display: block;
}

.about-floating-card strong {
  color: var(--fd-dark);
  font-size: 12.5px;
  font-weight: 900;
}

.about-floating-card span {
  margin-top: 2px;
  color: var(--fd-muted);
  font-size: 10.5px;
}

@keyframes aboutCardFloatOne {
  to {
    transform: translateY(-10px);
  }
}

@keyframes aboutCardFloatTwo {
  to {
    transform: translateY(10px);
  }
}

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

.about-content {
  position: relative;
  padding-left: 12px;
}

.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--fd-pink-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.14);
  box-shadow: 0 13px 30px rgba(231, 53, 139, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-title {
  max-width: 680px;
  margin: 0 0 20px;
  color: var(--fd-dark);
  font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.052em;
  font-weight: 700;
}

.about-title .brand-grad {
  display: block;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple),
      var(--fd-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-lead {
  max-width: 650px;
  margin: 0 0 14px;
  color: #4f596a;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
}

.about-description {
  max-width: 640px;
  margin: 0 0 26px;
  color: var(--fd-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

/* Highlight cards */
.about-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.about-highlight-card {
  min-height: 118px;
  padding: 16px;
  border-radius: 23px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 247, 251, 0.74));
  border: 1px solid rgba(231, 53, 139, 0.11);
  box-shadow:
    0 15px 35px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease;
}

.about-highlight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(231, 53, 139, 0.24);
  box-shadow:
    0 24px 52px rgba(231, 53, 139, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.about-highlight-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 19px;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple),
      var(--fd-blue));
  box-shadow: 0 13px 28px rgba(231, 53, 139, 0.22);
}

.about-highlight-card h3 {
  margin: 1px 0 6px;
  color: var(--fd-dark);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
}

.about-highlight-card p {
  margin: 0;
  color: var(--fd-muted);
  font-size: 11.7px;
  line-height: 1.55;
}

/* Statistics */
.about-stats {
  margin-top: 24px;
  padding: 15px;
  border-radius: 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.about-stat {
  position: relative;
  padding: 11px 8px;
  text-align: center;
}

.about-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 20%;
  width: 1px;
  height: 60%;
  background: rgba(231, 53, 139, 0.12);
}

.about-stat strong,
.about-stat span {
  display: block;
}

.about-stat strong {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple),
      var(--fd-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-stat span {
  margin-top: 4px;
  color: var(--fd-muted);
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 700;
}

/* Actions */
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 25px;
}

.about-premium .btn-brand,
.about-premium .btn-outline-dark {
  min-height: 47px;
  padding: 11px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 850;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.about-premium .btn-brand {
  border: 0;
  color: #ffffff !important;
  background:
    linear-gradient(135deg,
      var(--fd-pink),
      var(--fd-purple),
      var(--fd-blue));
  box-shadow: 0 16px 36px rgba(231, 53, 139, 0.26);
}

.about-premium .btn-brand:hover {
  color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 23px 49px rgba(231, 53, 139, 0.34);
}

.about-premium .btn-outline-dark {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(15, 23, 42, 0.15);
  box-shadow: 0 13px 29px rgba(15, 23, 42, 0.06);
}

.about-premium .btn-outline-dark:hover {
  color: #ffffff !important;
  border-color: var(--fd-green);
  background: var(--fd-green);
  transform: translateY(-4px);
  box-shadow: 0 18px 39px rgba(37, 211, 102, 0.27);
}

/* =========================================================
   BOTTOM TRUST STRIP
========================================================= */

.about-trust-strip {
  position: relative;
  z-index: 3;
  margin-top: 62px;
  padding: 20px 24px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.90),
      rgba(255, 247, 251, 0.78));
  border: 1px solid rgba(231, 53, 139, 0.12);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.about-trust-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #475467;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
}

.about-trust-item i {
  flex: 0 0 auto;
  color: var(--fd-pink);
  font-size: 17px;
}

.about-trust-divider {
  width: 1px;
  height: 32px;
  flex: 0 0 1px;
  background: rgba(231, 53, 139, 0.13);
}

/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1199.98px) {
  .about-premium {
    padding: 84px 0;
  }

  .about-visual {
    min-height: 570px;
  }

  .about-product-card {
    width: min(100%, 450px);
  }

  .about-visual-ring.ring-one {
    width: 470px;
    height: 470px;
  }

  .about-visual-ring.ring-two {
    width: 395px;
    height: 395px;
  }

  .about-product-stage {
    min-height: 315px;
  }

  .about-product-img {
    max-width: 380px;
    height: 255px;
  }

  .about-floating-card {
    min-width: 172px;
  }

  .about-title {
    font-size: clamp(2.35rem, 4vw, 3.85rem);
  }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {
  .about-premium {
    padding: 70px 0;
  }

  .about-visual {
    min-height: 585px;
    margin-bottom: 22px;
  }

  .about-product-card {
    width: min(100%, 500px);
  }

  .about-content {
    padding-left: 0;
    text-align: center;
  }

  .about-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .about-title,
  .about-lead,
  .about-description {
    margin-left: auto;
    margin-right: auto;
  }

  .about-actions {
    justify-content: center;
  }

  .about-trust-strip {
    flex-wrap: wrap;
    justify-content: center;
  }

  .about-trust-item {
    flex: 0 0 calc(50% - 22px);
  }

  .about-trust-divider:nth-of-type(4) {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — LARGE MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .about-premium {
    padding: 56px 0;
  }

  .about-premium::before {
    inset: 12px;
    border-radius: 32px;
  }

  .about-visual {
    min-height: 530px;
  }

  .about-visual-ring.ring-one {
    width: 430px;
    height: 430px;
  }

  .about-visual-ring.ring-two {
    width: 355px;
    height: 355px;
  }

  .about-product-card {
    width: min(100%, 450px);
    padding: 20px;
    border-radius: 34px;
  }

  .about-product-stage {
    min-height: 285px;
  }

  .about-product-img {
    max-width: 350px;
    height: 225px;
  }

  .about-product-features {
    grid-template-columns: 1fr;
  }

  .about-product-feature {
    justify-content: center;
  }

  .about-floating-card {
    min-width: 155px;
    padding: 11px 12px;
  }

  .about-floating-card-one {
    left: 0;
    top: 75px;
  }

  .about-floating-card-two {
    right: 0;
    bottom: 65px;
  }

  .about-title {
    font-size: clamp(2.15rem, 8vw, 3rem);
  }

  .about-lead {
    font-size: 15px;
    line-height: 1.7;
  }

  .about-highlight-grid {
    grid-template-columns: 1fr;
  }

  .about-highlight-card {
    min-height: auto;
    text-align: left;
  }

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

  .about-stat:nth-child(2)::after {
    display: none;
  }

  .about-stat:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(231, 53, 139, 0.10);
  }

  .about-trust-item {
    flex-basis: 100%;
  }

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

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .about-premium {
    padding: 44px 0;
  }

  .about-premium::before {
    inset: 9px;
    border-radius: 26px;
  }

  .about-blob-one,
  .about-blob-two,
  .about-pad-outline {
    display: none;
  }

  .about-cotton {
    width: 55px;
    right: 8px;
    top: 5%;
    opacity: 0.55;
  }

  .about-visual {
    min-height: auto;
    padding: 42px 0 20px;
  }

  .about-visual-ring {
    display: none;
  }

  .about-product-card {
    width: 100%;
    padding: 15px;
    border-radius: 27px;
  }

  .about-product-top {
    justify-content: center;
  }

  .about-mini-badge,
  .about-product-status {
    font-size: 10.5px;
    padding: 6px 10px;
  }

  .about-product-stage {
    min-height: 225px;
  }

  .about-product-halo {
    width: 210px;
    height: 210px;
  }

  .about-product-img {
    max-width: 285px;
    height: 185px;
  }

  .about-product-features {
    gap: 7px;
  }

  .about-product-feature {
    padding: 10px;
    border-radius: 17px;
  }

  .about-feature-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .about-floating-card {
    position: relative;
    inset: auto;
    width: calc(50% - 5px);
    min-width: 0;
    display: inline-flex;
    margin-top: 10px;
    padding: 10px;
    animation: none;
    vertical-align: top;
  }

  .about-floating-card-one {
    margin-right: 6px;
  }

  .about-floating-card-two {
    margin-left: 0;
  }

  .about-floating-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 13px;
    font-size: 15px;
  }

  .about-floating-card strong {
    font-size: 10.8px;
  }

  .about-floating-card span {
    font-size: 9.2px;
  }

  .about-content {
    margin-top: 14px;
  }

  .about-kicker {
    padding: 7px 12px;
    font-size: 11.5px;
  }

  .about-title {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .about-lead {
    font-size: 14px;
    line-height: 1.65;
  }

  .about-description {
    font-size: 13.3px;
    line-height: 1.65;
  }

  .about-highlight-card {
    padding: 14px;
    border-radius: 19px;
  }

  .about-highlight-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 14px;
    font-size: 17px;
  }

  .about-highlight-card h3 {
    font-size: 13.5px;
  }

  .about-highlight-card p {
    font-size: 11.5px;
  }

  .about-stats {
    padding: 11px;
    border-radius: 21px;
  }

  .about-stat {
    padding: 10px 6px;
  }

  .about-stat strong {
    font-size: 16px;
  }

  .about-stat span {
    font-size: 9.8px;
  }

  .about-actions {
    flex-direction: column;
  }

  .about-premium .btn-brand,
  .about-premium .btn-outline-dark {
    width: 100%;
    min-height: 43px;
    font-size: 13px;
  }

  .about-trust-strip {
    margin-top: 38px;
    padding: 16px;
    border-radius: 22px;
    gap: 12px;
  }

  .about-trust-item {
    justify-content: flex-start;
    text-align: left;
    font-size: 11.5px;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .about-product-stage {
    min-height: 205px;
  }

  .about-product-img {
    max-width: 250px;
    height: 165px;
  }

  .about-mini-badge,
  .about-product-status {
    width: 100%;
    justify-content: center;
  }

  .about-floating-card {
    width: 100%;
    margin: 7px 0 0;
  }

  .about-title {
    font-size: 1.82rem;
  }

  .about-highlight-card {
    padding: 12px;
  }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

  .about-highlight-card:hover,
  .about-premium .btn-brand:hover,
  .about-premium .btn-outline-dark:hover {
    transform: none;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .about-premium *,
  .about-premium *::before,
  .about-premium *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================== ABOUT FLYDAYZ END ===================== */









/* =========================================================
   PRODUCT DETAIL PREMIUM RESPONSIVE CSS
========================================================= */

.pdx-detail-section {
  --pdx-pink: #e7358b;
  --pdx-pink-dark: #bc1e6b;
  --pdx-purple: #7d3ff2;
  --pdx-blue: #416dff;
  --pdx-green: #20bf67;
  --pdx-ink: #171b2a;
  --pdx-text: #617086;
  --pdx-line: rgba(231, 53, 139, 0.13);

  position: relative;
  padding: 115px 0 90px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      850px 460px at 6% 8%,
      rgba(231, 53, 139, 0.16),
      transparent 65%
    ),
    radial-gradient(
      850px 480px at 95% 10%,
      rgba(65, 109, 255, 0.13),
      transparent 63%
    ),
    linear-gradient(
      145deg,
      #fffafd,
      #fff4fa 52%,
      #f7f3ff
    );
}

.pdx-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -4;

  opacity: 0.45;

  background:
    linear-gradient(
      rgba(231, 53, 139, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(65, 109, 255, 0.028) 1px,
      transparent 1px
    );

  background-size: 58px 58px;
}

.pdx-glow {
  position: absolute;
  z-index: -2;

  border-radius: 50%;

  filter: blur(16px);

  pointer-events: none;
}

.pdx-glow-one {
  width: 430px;
  height: 430px;

  left: -240px;
  bottom: -150px;

  background: rgba(231, 53, 139, 0.14);
}

.pdx-glow-two {
  width: 520px;
  height: 520px;

  right: -290px;
  top: 100px;

  background: rgba(125, 63, 242, 0.12);
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.pdx-product-gallery {
  position: relative;
  width: 100%;
}

.pdx-image-card {
  position: relative;

  min-height: 610px;
  margin-bottom: 18px;
  padding: 34px;

  overflow: hidden;
  border-radius: 48px;

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

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.98),
      transparent 34%
    ),
    radial-gradient(
      circle at 75% 45%,
      rgba(231, 53, 139, 0.15),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 244, 251, 0.84)
    );

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

  box-shadow:
    0 38px 105px rgba(231, 53, 139, 0.19),
    0 20px 58px rgba(15, 23, 42, 0.1);
}

.pdx-image-badge {
  position: absolute;
  left: 28px;
  top: 28px;
  z-index: 6;

  min-height: 40px;
  padding: 8px 14px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--pdx-pink-dark);

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

  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--pdx-line);

  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08);
}

.pdx-image-badge i {
  color: var(--pdx-pink);
}

.pdx-ring {
  position: absolute;
  left: 50%;
  top: 50%;

  border-radius: 50%;

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

.pdx-ring-one {
  width: 430px;
  height: 430px;

  border: 1px solid rgba(231, 53, 139, 0.14);
}

.pdx-ring-two {
  width: 320px;
  height: 320px;

  border: 1px dashed rgba(125, 63, 242, 0.2);
}

.pdx-main-img {
  position: relative;
  z-index: 4;

  width: min(112%, 720px);
  max-width: none;

  object-fit: contain;

  filter:
    drop-shadow(0 30px 42px rgba(15, 23, 42, 0.24));

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    filter 0.25s ease;
}

.pdx-main-img.is-changing {
  opacity: 0;
  transform: scale(0.96);
}

.pdx-float-card {
  position: absolute;
  z-index: 7;

  min-height: 42px;
  padding: 9px 13px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--pdx-ink);

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

  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--pdx-line);

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.09);
}

.pdx-float-card i {
  color: var(--pdx-pink);
}

.pdx-float-one {
  left: 22px;
  top: 150px;
}

.pdx-float-two {
  right: 22px;
  bottom: 120px;
}


/* =========================================================
   THUMBNAIL GALLERY
========================================================= */

.pdx-thumb-row {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pdx-thumb {
  position: relative;

  min-height: 102px;
  padding: 10px;

  border: 1px solid rgba(231, 53, 139, 0.13);
  border-radius: 22px;

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

  overflow: hidden;
  cursor: pointer;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(231, 53, 139, 0.12),
      transparent 48%
    ),
    rgba(255, 255, 255, 0.84);

  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.pdx-thumb::after {
  content: "";

  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;

  height: 3px;

  border-radius: 999px 999px 0 0;

  background:
    linear-gradient(
      90deg,
      #e7358b,
      #7d3ff2,
      #416dff
    );

  opacity: 0;
  transform: scaleX(0.55);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.pdx-thumb img {
  width: 100%;
  height: 78px;

  object-fit: contain;

  filter:
    drop-shadow(0 12px 18px rgba(15, 23, 42, 0.16));

  transition:
    transform 0.28s ease,
    filter 0.28s ease;
}

.pdx-thumb:hover {
  transform: translateY(-5px);

  border-color: rgba(231, 53, 139, 0.24);

  box-shadow:
    0 20px 45px rgba(231, 53, 139, 0.13),
    0 12px 28px rgba(65, 109, 255, 0.06);
}

.pdx-thumb:hover img {
  transform: scale(1.07);
}

.pdx-thumb.active {
  border-color: rgba(231, 53, 139, 0.32);

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(231, 53, 139, 0.17),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fff4fa
    );

  box-shadow:
    0 22px 48px rgba(231, 53, 139, 0.16);
}

.pdx-thumb.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.pdx-thumb.active img {
  transform: scale(1.08);
}


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

.pdx-detail-content {
  position: relative;
}

.pdx-kicker,
.pdx-section-kicker {
  width: fit-content;
  min-height: 42px;
  padding: 7px 17px 7px 8px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #bc1e6b;

  font-size: 12px;
  font-weight: 900;

  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(231, 53, 139, 0.14);

  box-shadow:
    0 14px 34px rgba(231, 53, 139, 0.1);
}

.pdx-kicker span,
.pdx-section-kicker span {
  width: 28px;
  height: 28px;

  border-radius: 50%;

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

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );
}

.pdx-title {
  margin: 20px 0;

  color: var(--pdx-ink);

  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.pdx-title span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2,
      #416dff
    );

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

.pdx-short-desc {
  max-width: 650px;
  margin: 0 0 20px;

  color: var(--pdx-text);

  font-size: 16px;
  line-height: 1.75;
  font-weight: 550;
}

.pdx-rating {
  margin-bottom: 22px;

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

.pdx-stars {
  color: #ffb629;

  display: flex;
  gap: 3px;
}

.pdx-rating span {
  color: #5a6679;

  font-size: 11px;
  font-weight: 800;
}

.pdx-info-grid {
  max-width: 620px;
  margin-bottom: 22px;

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

.pdx-info-box {
  padding: 14px 15px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--pdx-line);

  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.06);
}

.pdx-info-box small,
.pdx-info-box strong {
  display: block;
}

.pdx-info-box small {
  color: var(--pdx-text);

  font-size: 8px;
  text-transform: uppercase;
  font-weight: 850;
}

.pdx-info-box strong {
  margin-top: 3px;

  color: var(--pdx-ink);

  font-size: 12px;
  font-weight: 900;
}

.pdx-points {
  max-width: 650px;
  margin: 0 0 26px;
  padding: 0;

  list-style: none;

  display: grid;
  gap: 10px;
}

.pdx-points li {
  padding: 12px 14px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  gap: 10px;

  color: #475569;

  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.1);
}

.pdx-points i {
  color: var(--pdx-pink);
}

.pdx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pdx-btn {
  min-height: 52px;
  padding: 0 23px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-decoration: none;

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

  transition: 0.3s ease;
}

.pdx-btn-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );

  box-shadow:
    0 20px 44px rgba(231, 53, 139, 0.28);
}

.pdx-btn-primary:hover {
  color: #ffffff;
  transform: translateY(-4px);
}

.pdx-btn-whatsapp {
  color: #ffffff;

  background: #20bf67;

  box-shadow:
    0 18px 38px rgba(32, 191, 103, 0.25);
}

.pdx-btn-whatsapp:hover {
  color: #ffffff;
  transform: translateY(-4px);
}


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

.pdx-description-section {
  position: relative;
  padding: 90px 0;

  background: #ffffff;
}

.pdx-description-card {
  padding: 42px;

  border-radius: 46px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(65, 109, 255, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fff7fb
    );

  border: 1px solid rgba(231, 53, 139, 0.12);

  box-shadow:
    0 34px 92px rgba(231, 53, 139, 0.13);
}

.pdx-section-title {
  margin: 18px 0 14px;

  color: #171b2a;

  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.pdx-section-subtitle,
.pdx-description-text {
  color: #617086;

  font-size: 15px;
  line-height: 1.72;
}

.pdx-description-text + .pdx-description-text {
  margin-top: 14px;
}

.pdx-description-icons {
  margin-top: 26px;

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

.pdx-description-icons div {
  padding: 18px 14px;

  border-radius: 22px;

  text-align: center;

  background: #ffffff;
  border: 1px solid rgba(231, 53, 139, 0.1);

  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.05);
}

.pdx-description-icons i {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;

  border-radius: 16px;

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

  color: #ffffff;
  font-size: 18px;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );
}

.pdx-description-icons strong,
.pdx-description-icons span {
  display: block;
}

.pdx-description-icons strong {
  color: #171b2a;

  font-size: 12px;
  font-weight: 900;
}

.pdx-description-icons span {
  margin-top: 3px;

  color: #617086;

  font-size: 10px;
}


/* =========================================================
   SPECIFICATION
========================================================= */

.pdx-spec-card {
  height: 100%;
  padding: 26px;

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fff4fa
    );

  border: 1px solid rgba(231, 53, 139, 0.12);

  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.07);
}

.pdx-spec-head {
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.pdx-spec-head i {
  width: 52px;
  height: 52px;

  border-radius: 18px;

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

  color: #ffffff;
  font-size: 20px;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );
}

.pdx-spec-head h3 {
  margin: 0;

  color: #171b2a;

  font-size: 1.35rem;
  font-weight: 850;
}

.pdx-spec-list {
  display: grid;
  gap: 10px;
}

.pdx-spec-row {
  min-height: 48px;
  padding: 12px 14px;

  border-radius: 16px;

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

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.09);
}

.pdx-spec-row span {
  color: #617086;

  font-size: 10px;
  font-weight: 800;
}

.pdx-spec-row strong {
  color: #171b2a;

  font-size: 10.5px;
  font-weight: 900;

  text-align: right;
}


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

.pdx-related-section {
  position: relative;
  padding: 90px 0 105px;

  background:
    radial-gradient(
      720px 430px at 8% 16%,
      rgba(231, 53, 139, 0.11),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      #fff8fc,
      #ffffff
    );
}

.pdx-related-head {
  max-width: 800px;
  margin: 0 auto 48px;
}

.pdx-related-card {
  position: relative;
  height: 100%;
  overflow: hidden;

  border-radius: 34px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fff8fc
    );

  border: 1px solid rgba(231, 53, 139, 0.12);

  box-shadow:
    0 26px 72px rgba(15, 23, 42, 0.075);

  transition: 0.35s ease;
}

.pdx-related-card:hover,
.pdx-related-card.active {
  transform: translateY(-8px);

  border-color: rgba(231, 53, 139, 0.22);

  box-shadow:
    0 34px 84px rgba(231, 53, 139, 0.14);
}

.pdx-related-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;

  padding: 8px 12px;

  border-radius: 999px;

  color: #ffffff;

  font-size: 9px;
  font-weight: 900;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );
}

.pdx-related-img {
  min-height: 265px;
  padding: 46px 20px 20px;

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

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(231, 53, 139, 0.13),
      transparent 45%
    );
}

.pdx-related-img img {
  width: 100%;
  max-height: 190px;

  object-fit: contain;

  filter:
    drop-shadow(0 20px 26px rgba(15, 23, 42, 0.2));
}

.pdx-related-body {
  padding: 24px;
}

.pdx-related-body h3 {
  margin: 0 0 8px;

  color: #171b2a;

  font-size: 1.35rem;
  font-weight: 850;
}

.pdx-related-body p {
  min-height: 48px;
  margin: 0;

  color: #617086;

  font-size: 11.5px;
  line-height: 1.58;
}

.pdx-related-meta {
  margin: 16px 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdx-related-meta span {
  padding: 8px 10px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #526074;

  font-size: 8.5px;
  font-weight: 850;

  background: #fff3f8;
  border: 1px solid rgba(231, 53, 139, 0.1);
}

.pdx-related-meta i {
  color: #e7358b;
}

.pdx-related-btn {
  min-height: 46px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 900;

  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      #e7358b,
      #7d3ff2
    );

  box-shadow:
    0 16px 34px rgba(231, 53, 139, 0.22);
}

.pdx-related-btn:hover {
  color: #ffffff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
  .pdx-image-card {
    min-height: 560px;
  }

  .pdx-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
  }
}

@media (max-width: 991.98px) {
  .pdx-detail-section {
    padding: 82px 0 78px;
  }

  .pdx-product-gallery {
    max-width: 680px;
    margin: 0 auto;
  }

  .pdx-image-card {
    min-height: 540px;
  }

  .pdx-detail-content {
    text-align: center;
  }

  .pdx-kicker,
  .pdx-section-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .pdx-short-desc,
  .pdx-points {
    margin-left: auto;
    margin-right: auto;
  }

  .pdx-rating,
  .pdx-actions {
    justify-content: center;
  }

  .pdx-info-grid {
    margin-left: auto;
    margin-right: auto;
  }

  .pdx-description-section,
  .pdx-related-section {
    padding: 74px 0;
  }

  .pdx-description-card {
    padding: 34px;
    border-radius: 38px;
  }
}

@media (max-width: 767.98px) {
  .pdx-detail-section {
    padding: 65px 0;
  }

  .pdx-image-card {
    min-height: 445px;
    padding: 24px;
    border-radius: 36px;
  }

  .pdx-main-img {
    width: min(118%, 520px);
  }

  .pdx-ring-one {
    width: 330px;
    height: 330px;
  }

  .pdx-ring-two {
    width: 245px;
    height: 245px;
  }

  .pdx-thumb-row {
    gap: 10px;
  }

  .pdx-thumb {
    min-height: 88px;
    padding: 8px;
    border-radius: 18px;
  }

  .pdx-thumb img {
    height: 66px;
  }

  .pdx-title {
    font-size: clamp(2.5rem, 10vw, 3.9rem);
  }

  .pdx-info-grid {
    grid-template-columns: 1fr;
  }

  .pdx-description-card {
    padding: 28px;
  }

  .pdx-description-icons {
    grid-template-columns: 1fr;
  }

  .pdx-section-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .pdx-spec-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .pdx-spec-row strong {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .pdx-detail-section {
    padding: 52px 0;
  }

  .pdx-image-card {
    min-height: 365px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 30px;
  }

  .pdx-image-badge {
    left: 16px;
    top: 16px;

    font-size: 8.5px;
  }

  .pdx-main-img {
    width: min(120%, 390px);
  }

  .pdx-ring-one {
    width: 250px;
    height: 250px;
  }

  .pdx-ring-two {
    width: 185px;
    height: 185px;
  }

  .pdx-float-card {
    min-height: 34px;
    padding: 7px 10px;

    font-size: 8px;
  }

  .pdx-float-one {
    left: 8px;
    top: 96px;
  }

  .pdx-float-two {
    right: 8px;
    bottom: 76px;
  }

  .pdx-thumb-row {
    grid-template-columns: repeat(4, minmax(68px, 1fr));
    gap: 8px;

    overflow-x: auto;
    padding-bottom: 4px;

    scrollbar-width: none;
  }

  .pdx-thumb-row::-webkit-scrollbar {
    display: none;
  }

  .pdx-thumb {
    min-width: 68px;
    min-height: 76px;
    padding: 7px;
    border-radius: 16px;
  }

  .pdx-thumb img {
    height: 56px;
  }

  .pdx-title {
    font-size: clamp(2.25rem, 12vw, 3rem);
    line-height: 1;
  }

  .pdx-short-desc {
    font-size: 13px;
    line-height: 1.62;
  }

  .pdx-actions {
    display: grid;
  }

  .pdx-btn {
    width: 100%;
    min-height: 48px;
  }

  .pdx-description-section,
  .pdx-related-section {
    padding: 54px 0;
  }

  .pdx-description-card {
    padding: 22px 16px;
    border-radius: 28px;
  }

  .pdx-spec-card {
    padding: 20px;
    border-radius: 26px;
  }

  .pdx-related-img {
    min-height: 230px;
  }

  .pdx-related-img img {
    max-height: 165px;
  }
}

@media (max-width: 380px) {
  .pdx-title {
    font-size: 2.2rem;
  }

  .pdx-image-card {
    min-height: 330px;
  }

  .pdx-main-img {
    width: min(122%, 330px);
  }

  .pdx-float-card {
    display: none;
  }

  .pdx-thumb {
    min-width: 62px;
    min-height: 70px;
  }

  .pdx-thumb img {
    height: 50px;
  }
}










/* =========================================================
   FLYDAYZ BLOG DETAIL PAGE
========================================================= */

:root {
  --bd-pink: #e7358b;
  --bd-pink-dark: #bc1e6b;
  --bd-purple: #7d3ff2;
  --bd-blue: #416dff;
  --bd-green: #20bf67;
  --bd-ink: #171b2a;
  --bd-text: #617086;
  --bd-soft: #fff6fb;
  --bd-line: rgba(231, 53, 139, .12);
}

html {
  scroll-behavior: smooth
}

.bd-hero {
  position: relative;
  min-height: 760px;
  padding: 70px 0 92px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background:
    radial-gradient(840px 470px at 4% 5%, rgba(231, 53, 139, .17), transparent 64%),
    radial-gradient(820px 470px at 96% 12%, rgba(65, 109, 255, .14), transparent 63%),
    linear-gradient(145deg, #fffafd, #fff4fa 52%, #f7f3ff);
}

.bd-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .46;
  background:
    linear-gradient(rgba(231, 53, 139, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 109, 255, .028) 1px, transparent 1px);
  background-size: 58px 58px;
}

.bd-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(10px);
}

.bd-orb-one {
  width: 430px;
  height: 430px;
  left: -240px;
  bottom: -150px;
  background: rgba(231, 53, 139, .14);
}

.bd-orb-two {
  width: 520px;
  height: 520px;
  right: -290px;
  top: 90px;
  background: rgba(125, 63, 242, .12);
}

.bd-breadcrumb {
  margin-bottom: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #8992a2;
  font-size: 10.5px;
  font-weight: 750;
}

.bd-breadcrumb a {
  color: #687487;
  text-decoration: none;
}

.bd-breadcrumb span {
  color: var(--bd-pink-dark);
}

.bd-kicker,
.bd-section-kicker {
  width: fit-content;
  min-height: 42px;
  padding: 7px 17px 7px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bd-pink-dark);
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, .91);
  border: 1px solid rgba(231, 53, 139, .14);
  box-shadow: 0 14px 34px rgba(231, 53, 139, .1);
}

.bd-kicker span,
.bd-section-kicker span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-hero-title {
  margin: 20px 0;
  color: var(--bd-ink);
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1;
  font-weight: 700;
  /* letter-spacing: -.06em; */
}

.bd-hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple), var(--bd-blue));
  -webkit-background-clip: text;
  background-clip: text;
}

.bd-hero-lead {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--bd-text);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 550;
}

.bd-author-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.bd-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
  box-shadow: 0 16px 34px rgba(231, 53, 139, .24);
}

.bd-author-copy strong,
.bd-author-copy span {
  display: block
}

.bd-author-copy strong {
  color: var(--bd-ink);
  font-size: 11.5px;
  font-weight: 900;
}

.bd-author-copy span {
  margin-top: 2px;
  color: var(--bd-text);
  font-size: 9.5px;
}

.bd-verified {
  padding: 7px 11px;
  border-radius: 999px;
  color: #147f48;
  font-size: 9.5px;
  font-weight: 850;
  background: #edfff4;
  border: 1px solid rgba(32, 191, 103, .15);
}

.bd-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-share-row>span {
  margin-right: 3px;
  color: #596579;
  font-size: 10px;
  font-weight: 850;
}

.bd-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a7485;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--bd-line);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  transition: .3s ease;
}

.bd-share-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-share-btn.whatsapp:hover {
  background: var(--bd-green)
}

.bd-hero-card {
  position: relative;
  min-height: 540px;
  padding: 28px;
  overflow: hidden;
  border-radius: 46px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .98), transparent 34%),
    radial-gradient(circle at 75% 45%, rgba(231, 53, 139, .15), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 244, 251, .84));
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow:
    0 38px 105px rgba(231, 53, 139, .19),
    0 20px 58px rgba(15, 23, 42, .1);
}

.bd-card-badge {
  width: fit-content;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--bd-pink-dark);
  font-size: 10px;
  font-weight: 900;
  background: #fff;
  border: 1px solid var(--bd-line);
}

.bd-hero-visual {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-hero-product {
  position: relative;
  z-index: 3;
  width: 112%;
  max-width: none;
  filter: drop-shadow(0 30px 42px rgba(15, 23, 42, .24));
}

.bd-hero-pad {
  position: absolute;
  right: -55px;
  bottom: 10px;
  width: 250px;
  opacity: .13;
  transform: rotate(-20deg);
}

.bd-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bd-card-stats div {
  padding: 13px 10px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--bd-line);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}

.bd-card-stats strong,
.bd-card-stats span {
  display: block
}

.bd-card-stats strong {
  color: var(--bd-ink);
  font-size: 12px;
  font-weight: 900;
}

.bd-card-stats span {
  margin-top: 3px;
  color: var(--bd-text);
  font-size: 8.5px;
}

/* CATEGORY NAV */
.bd-category-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  padding: 16px 0;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(231, 53, 139, .08);
  backdrop-filter: blur(16px);
}

.bd-category-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bd-category-bar::-webkit-scrollbar {
  display: none
}

.bd-category-btn {
  min-width: max-content;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bd-line);
  border-radius: 999px;
  color: #596579;
  font-size: 10.5px;
  font-weight: 850;
  background: #fff;
  transition: .3s ease;
}

.bd-category-btn i {
  margin-right: 6px;
  color: var(--bd-pink)
}

.bd-category-btn:hover,
.bd-category-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
  border-color: transparent;
}

.bd-category-btn:hover i,
.bd-category-btn.active i {
  color: #fff
}

/* ARTICLE LAYOUT */
.bd-article-section {
  padding: 92px 0;
  background:
    radial-gradient(720px 430px at 8% 12%, rgba(231, 53, 139, .09), transparent 64%),
    linear-gradient(180deg, #fff8fc, #fff);
}

.bd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 30px;
  align-items: start;
}

.bd-article {
  min-width: 0;
}

.bd-content-block {
  position: relative;
  margin-bottom: 24px;
  padding: 36px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--bd-line);
  box-shadow: 0 24px 66px rgba(15, 23, 42, .065);
}

.bd-section-number {
  position: absolute;
  right: 28px;
  top: 20px;
  color: rgba(231, 53, 139, .12);
  font-size: 48px;
  font-weight: 950;
}

.bd-content-head {
  max-width: 760px;
  margin-bottom: 22px;
}

.bd-content-head span {
  color: var(--bd-pink-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.bd-content-head h2 {
  margin: 5px 0 0;
  color: var(--bd-ink);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -.04em;
}

.bd-content-block>p {
  color: var(--bd-text);
  font-size: 14px;
  line-height: 1.82;
}

.bd-dropcap::first-letter {
  float: left;
  margin: 8px 9px 0 0;
  color: var(--bd-pink);
  font-size: 4.2rem;
  line-height: .75;
  font-weight: 900;
}

.bd-highlight-box,
.bd-care-warning {
  margin-top: 22px;
  padding: 18px;
  border-radius: 23px;
  display: flex;
  gap: 13px;
}

.bd-highlight-box {
  color: #705b18;
  background: #fff9e8;
  border: 1px solid rgba(245, 158, 11, .18);
}

.bd-care-warning {
  color: #9b3d5a;
  background: #fff1f7;
  border: 1px solid rgba(231, 53, 139, .15);
}

.bd-highlight-icon,
.bd-care-warning>i {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #f4a91f, #f2792e);
}

.bd-care-warning>i {
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-highlight-box strong,
.bd-care-warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
}

.bd-highlight-box p,
.bd-care-warning p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
}

/* FLOW GRID */
.bd-flow-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.bd-flow-card {
  padding: 22px 18px;
  border-radius: 25px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--bd-line);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055);
  transition: .3s ease;
}

.bd-flow-card:hover,
.bd-flow-card.active {
  transform: translateY(-6px);
  border-color: rgba(231, 53, 139, .22);
  box-shadow: 0 26px 58px rgba(231, 53, 139, .12);
}

.bd-flow-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

.bd-flow-icon.light {
  background: linear-gradient(135deg, #67b7ff, #6b7cff)
}

.bd-flow-icon.medium {
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple))
}

.bd-flow-icon.heavy {
  background: linear-gradient(135deg, #8f3fff, #435cff)
}

.bd-flow-card h3 {
  margin: 0 0 7px;
  color: var(--bd-ink);
  font-size: 1.05rem;
  font-weight: 850;
}

.bd-flow-card p {
  min-height: 54px;
  color: var(--bd-text);
  font-size: 10.5px;
  line-height: 1.5;
}

.bd-flow-card>span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--bd-pink-dark);
  font-size: 8.5px;
  font-weight: 900;
  background: #fff0f7;
}

/* TABLE */
.bd-size-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid var(--bd-line);
}

.bd-size-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #fff;
}

.bd-size-table th,
.bd-size-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(231, 53, 139, .08);
  text-align: left;
}

.bd-size-table th {
  color: #6a7484;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .55px;
  background: #fff6fb;
}

.bd-size-table td {
  color: #596579;
  font-size: 11px;
}

.bd-size-table td strong {
  color: var(--bd-ink);
  font-weight: 900;
}

.bd-table-badge {
  padding: 7px 10px;
  border-radius: 999px;
  color: #596579;
  font-size: 8px;
  font-weight: 900;
  background: #f5f7fb;
}

.bd-table-badge.active {
  color: #fff;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-product-note {
  margin-top: 22px;
  padding: 20px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 50%, rgba(231, 53, 139, .13), transparent 45%),
    linear-gradient(145deg, #fff, #fff5fb);
  border: 1px solid var(--bd-line);
}

.bd-product-note img {
  width: 100%;
  filter: drop-shadow(0 18px 24px rgba(15, 23, 42, .18));
}

.bd-product-note span {
  color: var(--bd-pink-dark);
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.bd-product-note h3 {
  margin: 4px 0 7px;
  color: var(--bd-ink);
  font-size: 1.4rem;
  font-weight: 850;
}

.bd-product-note p {
  color: var(--bd-text);
  font-size: 10.5px;
  line-height: 1.55;
}

.bd-product-note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-pink-dark);
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: none;
}

/* CHECK GRID */
.bd-check-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bd-check-grid>div {
  padding: 16px;
  border-radius: 21px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--bd-line);
  box-shadow: 0 13px 30px rgba(15, 23, 42, .045);
}

.bd-check-grid i {
  color: var(--bd-pink);
  margin-top: 2px;
}

.bd-check-grid span {
  color: var(--bd-text);
  font-size: 10px;
  line-height: 1.5;
}

.bd-check-grid strong {
  display: block;
  margin-bottom: 3px;
  color: var(--bd-ink);
  font-size: 10.5px;
  font-weight: 900;
}

/* NIGHT */
.bd-night-card {
  margin-top: 24px;
  padding: 24px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(145deg, #412b95, #752fd8, #c93297);
  box-shadow: 0 26px 62px rgba(98, 46, 192, .23);
}

.bd-night-visual {
  width: 130px;
  height: 130px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 52px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}

.bd-night-copy h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 850;
}

.bd-night-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.bd-night-copy li {
  color: rgba(255, 255, 255, .86);
  font-size: 10.5px;
}

.bd-night-copy i {
  margin-right: 6px
}

/* ARTICLE FOOTER */
.bd-article-footer {
  padding: 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--bd-line);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .055);
}

.bd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.bd-tags span {
  color: var(--bd-ink);
  font-size: 10px;
  font-weight: 900;
}

.bd-tags a {
  padding: 7px 10px;
  border-radius: 999px;
  color: #697386;
  font-size: 8.5px;
  font-weight: 850;
  text-decoration: none;
  background: #fff5fa;
  border: 1px solid var(--bd-line);
}

.bd-helpful {
  padding-top: 18px;
  border-top: 1px solid rgba(231, 53, 139, .09);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-helpful>span {
  margin-right: 4px;
  color: #596579;
  font-size: 10px;
  font-weight: 850;
}

.bd-helpful button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: #596579;
  font-size: 9px;
  font-weight: 850;
  background: #fff;
  border: 1px solid var(--bd-line);
}

.bd-helpful button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
  border-color: transparent;
}

/* SIDEBAR */
.bd-sidebar {
  position: sticky;
  top: 150px;
  display: grid;
  gap: 18px;
}

.bd-sidebar-card {
  padding: 24px;
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid var(--bd-line);
  box-shadow: 0 22px 58px rgba(15, 23, 42, .065);
}

.bd-sidebar-head span {
  color: var(--bd-pink-dark);
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.bd-sidebar-head h3 {
  margin: 4px 0 16px;
  color: var(--bd-ink);
  font-size: 1.35rem;
  font-weight: 850;
}

.bd-toc {
  display: grid;
  gap: 8px;
}

.bd-toc a {
  padding: 10px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #596579;
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
  transition: .3s ease;
}

.bd-toc a span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-pink-dark);
  background: #fff0f7;
  font-size: 9px;
  font-weight: 900;
}

.bd-toc a:hover,
.bd-toc a.active {
  color: var(--bd-pink-dark);
  background: linear-gradient(135deg, rgba(231, 53, 139, .09), rgba(125, 63, 242, .05));
}

.bd-toc a.active span {
  color: #fff;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-newsletter-card {
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .2), transparent 30%),
    linear-gradient(145deg, var(--bd-pink), var(--bd-purple), var(--bd-blue));
}

.bd-newsletter-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-pink);
  font-size: 24px;
  background: #fff;
}

.bd-newsletter-card>span {
  color: rgba(255, 255, 255, .75);
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.bd-newsletter-card h3 {
  margin: 5px 0 9px;
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 850;
}

.bd-newsletter-card p {
  color: rgba(255, 255, 255, .78);
  font-size: 10.5px;
  line-height: 1.55;
}

.bd-newsletter-card form {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.bd-newsletter-card input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  outline: none;
  font-size: 10px;
}

.bd-newsletter-card input::placeholder {
  color: rgba(255, 255, 255, .7);
}

.bd-newsletter-card button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  color: var(--bd-pink-dark);
  font-size: 10.5px;
  font-weight: 900;
  background: #fff;
}

.bd-newsletter-card small {
  display: block;
  margin-top: 9px;
  color: #fff4be;
  font-size: 8.5px;
}

.bd-support-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(65, 109, 255, .08), transparent 35%),
    linear-gradient(145deg, #fff, #fff4fa);
}

.bd-support-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-support-card>span {
  color: var(--bd-pink-dark);
  font-size: 8.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.bd-support-card h3 {
  margin: 5px 0 9px;
  color: var(--bd-ink);
  font-size: 1.4rem;
  font-weight: 850;
}

.bd-support-card p {
  color: var(--bd-text);
  font-size: 10.5px;
  line-height: 1.55;
}

.bd-support-card a {
  min-height: 45px;
  margin-top: 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: none;
  background: var(--bd-green);
  box-shadow: 0 16px 34px rgba(32, 191, 103, .22);
}

/* RELATED */
.bd-related-section {
  padding: 96px 0;
  background: #fff;
}

.bd-related-head {
  margin-bottom: 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.bd-related-head h2 {
  margin: 18px 0 0;
  color: var(--bd-ink);
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -.05em;
}

.bd-related-head>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-pink-dark);
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: none;
}

.bd-related-card {
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(145deg, #fff, #fff8fc);
  border: 1px solid var(--bd-line);
  box-shadow: 0 24px 66px rgba(15, 23, 42, .07);
  transition: .35s ease;
}

.bd-related-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(231, 53, 139, .14);
}

.bd-related-media {
  position: relative;
  min-height: 240px;
  padding: 40px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(231, 53, 139, .13), transparent 45%);
}

.bd-related-media img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(15, 23, 42, .2));
}

.bd-related-category {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
}

.bd-related-body {
  padding: 22px;
}

.bd-related-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #8790a0;
  font-size: 8.5px;
}

.bd-related-body h3 {
  min-height: 58px;
  margin: 12px 0 9px;
  color: var(--bd-ink);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 850;
}

.bd-related-body p {
  min-height: 52px;
  color: var(--bd-text);
  font-size: 10.5px;
  line-height: 1.55;
}

.bd-related-body>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-pink-dark);
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: none;
}

/* CTA */
.bd-bottom-cta {
  padding: 0 0 100px;
  background: #fff;
}

.bd-cta-shell {
  padding: 42px;
  border-radius: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(145deg, var(--bd-pink), var(--bd-purple), var(--bd-blue));
  box-shadow: 0 34px 90px rgba(125, 63, 242, .27);
}

.bd-kicker-light {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: none;
}

.bd-kicker-light span {
  color: var(--bd-pink);
  background: #fff;
}

.bd-cta-copy h2 {
  margin: 18px 0 10px;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -.05em;
}

.bd-cta-copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.65;
}

.bd-cta-actions {
  display: flex;
  gap: 10px;
}

.bd-cta-call,
.bd-cta-whatsapp {
  min-height: 50px;
  padding: 0 19px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.bd-cta-call {
  color: var(--bd-pink-dark);
  background: #fff;
}

.bd-cta-whatsapp {
  color: #fff;
  background: var(--bd-green);
}

/* RESPONSIVE */
@media(max-width:1199.98px) {
  .bd-layout {
    grid-template-columns: minmax(0, 1fr) 300px
  }
}

@media(max-width:991.98px) {
  .bd-hero {
    min-height: auto;
    padding: 62px 0 76px
  }

  .bd-layout {
    grid-template-columns: 1fr
  }

  .bd-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .bd-toc-card {
    grid-column: 1/-1
  }

  .bd-flow-grid {
    grid-template-columns: 1fr
  }

  .bd-cta-shell {
    grid-template-columns: 1fr
  }
}

@media(max-width:767.98px) {
  .bd-hero-title {
    font-size: clamp(2.6rem, 10vw, 4rem)
  }

  .bd-article-section {
    padding: 68px 0
  }

  .bd-content-block {
    padding: 28px 22px
  }

  .bd-check-grid {
    grid-template-columns: 1fr
  }

  .bd-night-card {
    grid-template-columns: 1fr
  }

  .bd-night-visual {
    width: 100%;
    height: 110px
  }

  .bd-product-note {
    grid-template-columns: 1fr
  }

  .bd-product-note img {
    max-width: 280px;
    margin: auto
  }

  .bd-related-head {
    align-items: flex-start;
    flex-direction: column
  }

  .bd-cta-actions {
    flex-wrap: wrap
  }
}

@media(max-width:575.98px) {
  .bd-hero {
    padding: 46px 0 58px
  }

  .bd-breadcrumb {
    margin-bottom: 28px
  }

  .bd-kicker,
  .bd-section-kicker {
    min-height: 36px;
    font-size: 10.5px
  }

  .bd-hero-title {
    font-size: clamp(2.25rem, 12vw, 3rem)
  }

  .bd-hero-lead {
    font-size: 13px;
    line-height: 1.62
  }

  .bd-hero-card {
    min-height: 390px;
    padding: 18px;
    border-radius: 30px
  }

  .bd-hero-visual {
    min-height: 260px
  }

  .bd-card-stats {
    grid-template-columns: 1fr
  }

  .bd-category-nav {
    top: 62px
  }

  .bd-content-block {
    padding: 24px 17px;
    border-radius: 27px
  }

  .bd-section-number {
    font-size: 36px;
    right: 17px
  }

  .bd-content-head h2 {
    font-size: 1.75rem
  }

  .bd-content-block>p {
    font-size: 12.5px;
    line-height: 1.7
  }

  .bd-sidebar {
    grid-template-columns: 1fr
  }

  .bd-size-table-wrap {
    border-radius: 18px
  }

  .bd-article-footer {
    padding: 18px;
    border-radius: 24px
  }

  .bd-related-section {
    padding: 68px 0
  }

  .bd-bottom-cta {
    padding-bottom: 72px
  }

  .bd-cta-shell {
    padding: 26px 18px;
    border-radius: 30px
  }

  .bd-cta-copy h2 {
    font-size: 2rem
  }

  .bd-cta-actions {
    display: grid
  }

  .bd-cta-call,
  .bd-cta-whatsapp {
    width: 100%
  }
}











/* =========================================================
   FLYDAYZ ULTRA PREMIUM FOOTER
========================================================= */

.footer-premium {
  --footer-pink: #ed2f8b;
  --footer-pink-dark: #bd1d69;
  --footer-purple: #8a3de6;
  --footer-blue: #356ef1;
  --footer-green: #20b965;
  --footer-dark: #171b2a;
  --footer-heading: #202638;
  --footer-text: #667388;
  --footer-border: rgba(231, 53, 139, 0.12);

  position: relative;
  padding: 96px 0 26px;
  overflow: hidden;
  isolation: isolate;
  color: var(--footer-dark);
}


/* BACKGROUND */

.footer-bg-layer {
  position: absolute;
  inset: 0;
  z-index: -5;

  background:
    radial-gradient(
      900px 480px at 5% 8%,
      rgba(237, 47, 139, 0.17),
      transparent 64%
    ),
    radial-gradient(
      850px 470px at 96% 12%,
      rgba(53, 110, 241, 0.14),
      transparent 63%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff6fb 50%,
      #eff5ff 100%
    );
}

.footer-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0.42;

  background:
    linear-gradient(
      rgba(231, 53, 139, 0.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(53, 110, 241, 0.026) 1px,
      transparent 1px
    );

  background-size: 58px 58px;
}

.footer-bg-glow {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
}

.footer-glow-one {
  width: 430px;
  height: 430px;
  top: 180px;
  left: -250px;
  background: rgba(237, 47, 139, 0.15);
}

.footer-glow-two {
  width: 500px;
  height: 500px;
  top: 360px;
  right: -290px;
  background: rgba(53, 110, 241, 0.12);
}

.footer-glow-three {
  width: 350px;
  height: 350px;
  left: 44%;
  bottom: -250px;
  background: rgba(138, 61, 230, 0.09);
}

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


/* TOP CTA */

.footer-top-cta {
  position: relative;
  margin-bottom: 62px;
  padding: 30px 32px;
  overflow: hidden;
  border-radius: 34px;

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

  background:
    radial-gradient(
      circle at 9% 5%,
      rgba(255, 255, 255, 0.2),
      transparent 32%
    ),
    linear-gradient(
      125deg,
      #e83188 0%,
      #9a3de1 55%,
      #3d70ef 100%
    );

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

  box-shadow:
    0 34px 88px rgba(125, 63, 242, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.footer-top-cta::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.23);
}

.footer-top-cta::after {
  content: "";
  position: absolute;
  right: 110px;
  bottom: -175px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.footer-cta-left {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-cta-icon {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border-radius: 23px;

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

  color: var(--footer-pink);
  font-size: 27px;
  background: #ffffff;

  box-shadow:
    0 20px 43px rgba(50, 18, 82, 0.25);
}

.footer-cta-content {
  min-width: 0;
}

.footer-cta-kicker {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.74);

  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.footer-cta-content h3 {
  margin: 0 0 7px;
  color: #ffffff;

  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.footer-cta-content p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.79);

  font-size: 11px;
  line-height: 1.62;
}

.footer-cta-actions {
  position: relative;
  z-index: 2;

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


/* BUTTONS */

.footer-btn-primary,
.footer-btn-whatsapp,
.footer-btn-secondary {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 10.5px;
  line-height: 1;
  font-weight: 900;

  text-decoration: none;
  white-space: nowrap;

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

.footer-btn-primary {
  color: var(--footer-pink-dark) !important;
  background: #ffffff;

  box-shadow:
    0 16px 35px rgba(50, 18, 82, 0.22);
}

.footer-btn-whatsapp {
  color: #ffffff !important;
  background: var(--footer-green);

  box-shadow:
    0 16px 35px rgba(32, 185, 101, 0.25);
}

.footer-btn-secondary {
  color: #31394a !important;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(23, 27, 42, 0.09);
}

.footer-btn-primary:hover,
.footer-btn-whatsapp:hover,
.footer-btn-secondary:hover {
  transform: translateY(-4px);
}


/* FOOTER GRID */

.footer-grid {
  padding-bottom: 52px;
}

.footer-brand-column,
.footer-column {
  height: 100%;
}


/* BRAND */

.footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-logo {
  display: block;
  width: min(225px, 100%);
  max-height: 90px;

  object-fit: contain;
  object-position: left center;
}

.footer-about {
  max-width: 410px;
  margin: 20px 0;

  color: var(--footer-text);

  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 550;
}

.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-trust-badges span {
  padding: 8px 11px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #566276;

  font-size: 10.5px;
  line-height: 1;
  font-weight: 850;

  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--footer-border);

  box-shadow:
    0 10px 23px rgba(15, 23, 42, 0.045);
}

.footer-trust-badges i {
  color: var(--footer-pink);
}


/* TITLES */

.footer-title {
  position: relative;
  margin: 4px 0 22px;
  padding-bottom: 12px;

  color: var(--footer-heading);

  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 900;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 42px;
  height: 3px;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--footer-pink),
      var(--footer-purple)
    );
}


/* LINKS */

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 11px;
}

.footer-links a {
  position: relative;

  color: #687589;

  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 750;

  text-decoration: none;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;

  width: 0;
  height: 2px;

  border-radius: 999px;
  background: var(--footer-pink);

  transform: translateY(-50%);
  transition: width 0.25s ease;
}

.footer-links a:hover {
  padding-left: 16px;
  color: var(--footer-pink);
}

.footer-links a:hover::before {
  width: 9px;
}


/* CONTACT */

.footer-contact-box {
  display: grid;
  gap: 10px;
}

.footer-contact-row {
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 20px;

  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;

  color: inherit;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(231, 53, 139, 0.1);

  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.05);

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

.footer-contact-row:hover {
  color: inherit;
  transform: translateY(-3px);

  border-color: rgba(231, 53, 139, 0.22);

  box-shadow:
    0 20px 45px rgba(231, 53, 139, 0.1);
}

.footer-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;

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

  color: #ffffff;
  font-size: 16px;

  background:
    linear-gradient(
      135deg,
      var(--footer-pink),
      var(--footer-purple)
    );

  box-shadow:
    0 12px 27px rgba(231, 53, 139, 0.2);
}

.footer-contact-icon.whatsapp {
  background: var(--footer-green);

  box-shadow:
    0 12px 27px rgba(32, 185, 101, 0.2);
}

.footer-contact-info {
  min-width: 0;
}

.footer-contact-info span,
.footer-contact-info strong {
  display: block;
}

.footer-contact-info span {
  margin-bottom: 3px;

  color: #929aaa;

  font-size: 7px;
  line-height: 1;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.footer-contact-info strong {
  color: #273047;

  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 900;
}

.footer-contact-arrow {
  color: #a5adba;
  font-size: 12px;
}


/* DISTRIBUTOR CARD */

.footer-distributor-card {
  position: relative;
  margin-top: 2px;
  padding: 20px;

  overflow: hidden;
  border-radius: 25px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.18),
      transparent 31%
    ),
    linear-gradient(
      140deg,
      var(--footer-pink),
      var(--footer-purple),
      var(--footer-blue)
    );

  box-shadow:
    0 24px 58px rgba(125, 63, 242, 0.22);
}

.footer-distributor-decoration {
  position: absolute;
  right: -66px;
  bottom: -73px;

  width: 160px;
  height: 160px;
  border-radius: 50%;

  border: 1px dashed rgba(255, 255, 255, 0.23);
}

.footer-distributor-decoration::before {
  content: "";
  position: absolute;
  inset: 25px;

  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.footer-distributor-badge {
  position: relative;
  z-index: 2;

  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 10px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #ffffff;

  font-size: 8px;
  line-height: 1;
  font-weight: 900;

  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-distributor-card h4 {
  position: relative;
  z-index: 2;

  margin: 0 0 7px;
  color: #ffffff;

  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 850;
}

.footer-distributor-card p {
  position: relative;
  z-index: 2;

  margin: 0;
  color: rgba(255, 255, 255, 0.78);

  font-size: 9px;
  line-height: 1.55;
}

.footer-distributor-actions {
  position: relative;
  z-index: 2;

  margin-top: 15px;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-distributor-actions .footer-btn-primary,
.footer-distributor-actions .footer-btn-secondary {
  min-height: 40px;
  padding: 0 13px;

  font-size: 8.5px;
}


/* FOOTER BOTTOM */

.footer-bottom {
  position: relative;

  width: 100%;
  min-height: 72px;
  margin-top: 4px;
  padding: 13px 15px;

  display: grid;
  grid-template-columns:
    minmax(230px, 1fr)
    auto
    minmax(100px, 1fr);

  align-items: center;
  gap: 20px;

  overflow: hidden;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.66)
    );

  border: 1px solid rgba(231, 53, 139, 0.12);

  box-shadow:
    0 16px 42px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.footer-bottom::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;

  height: 2px;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--footer-pink) 20%,
      var(--footer-purple) 50%,
      var(--footer-blue) 80%,
      transparent
    );
}


/* COPYRIGHT */

.footer-copy {
  position: relative;
  z-index: 2;

  justify-self: start;
  margin: 0;

  color: #697589;

  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 700;

  white-space: nowrap;
}


/* VISITOR */

.footer-visitor {
  position: relative;
  z-index: 2;

  justify-self: center;

  min-height: 42px;
  padding: 6px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(231, 53, 139, 0.13);

  box-shadow:
    0 9px 22px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.footer-visitor > i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  border-radius: 50%;

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

  color: #ffffff;
  font-size: 13px;

  background:
    linear-gradient(
      135deg,
      var(--footer-pink),
      var(--footer-purple)
    );

  box-shadow:
    0 8px 18px rgba(231, 53, 139, 0.2);
}

.footer-visitor > span:not(#visitorCount) {
  color: #687589;

  font-size: 9px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;
}

.footer-visitor #visitorCount {
  color: #20283a;

  font-family:
    "Poppins",
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 13px;
  line-height: 1;
  font-weight: 900;

  letter-spacing: 0.1em;
  white-space: nowrap;
}


/* SOCIAL */

.footer-social {
  position: relative;
  z-index: 2;

  justify-self: end;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.social-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 50%;

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

  color: var(--footer-pink);
  font-size: 14px;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(231, 53, 139, 0.14);

  box-shadow:
    0 9px 22px rgba(15, 23, 42, 0.055);

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

.social-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      var(--footer-pink),
      var(--footer-purple)
    );

  box-shadow:
    0 14px 28px rgba(231, 53, 139, 0.2);
}

.social-btn.whatsapp {
  color: #1da95e;
}

.social-btn.whatsapp:hover {
  color: #ffffff;
  background: #25d366;

  box-shadow:
    0 14px 28px rgba(37, 211, 102, 0.2);
}


/* RESPONSIVE */

@media (max-width: 1199.98px) {
  .footer-bottom {
    grid-template-columns:
      minmax(190px, 1fr)
      auto
      minmax(92px, 1fr);

    gap: 14px;
  }

  .footer-copy {
    font-size: 9.5px;
  }
}


@media (max-width: 991.98px) {
  .footer-premium {
    padding: 78px 0 24px;
  }

  .footer-top-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-cta-actions {
    width: 100%;
  }

  .footer-grid {
    text-align: center;
  }

  .footer-logo {
    object-position: center;
  }

  .footer-about {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-trust-badges {
    justify-content: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-contact-row,
  .footer-distributor-card {
    text-align: left;
  }

  .footer-bottom {
    grid-template-columns:
      minmax(155px, 1fr)
      auto
      minmax(82px, 1fr);

    gap: 9px;
    padding: 11px 12px;
  }

  .footer-copy {
    font-size: 8.5px;
    white-space: normal;
  }

  .footer-visitor {
    min-height: 39px;
    padding: 5px 9px;
    gap: 6px;
  }

  .footer-visitor > i {
    width: 28px;
    height: 28px;
    flex-basis: 28px;

    font-size: 12px;
  }

  .footer-visitor > span:not(#visitorCount) {
    font-size: 7.5px;
  }

  .footer-visitor #visitorCount {
    font-size: 11px;
  }

  .social-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;

    font-size: 12px;
  }
}


@media (max-width: 767.98px) {
  .footer-premium {
    padding: 64px 0 21px;
  }

  .footer-top-cta {
    padding: 25px 21px;
    border-radius: 28px;
  }

  .footer-cta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-cta-actions .btn {
    width: 100%;
  }

  .footer-bottom {
    min-height: auto;

    grid-template-columns: 1fr;
    justify-items: center;

    gap: 12px;
    padding: 16px 14px;

    text-align: center;
  }

  .footer-copy,
  .footer-visitor,
  .footer-social {
    justify-self: center;
  }

  .footer-copy {
    white-space: normal;
  }

  .footer-social {
    justify-content: center;
  }
}


@media (max-width: 575.98px) {
  .footer-premium {
    padding: 52px 0 19px;
  }

  .footer-top-cta {
    padding: 20px 16px;
    border-radius: 24px;
  }

  .footer-cta-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-cta-icon {
    width: 57px;
    height: 57px;
    flex-basis: 57px;

    border-radius: 19px;
    font-size: 22px;
  }

  .footer-cta-content h3 {
    font-size: 1.45rem;
  }

  .footer-cta-content p {
    font-size: 10px;
  }

  .footer-cta-actions {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    padding-bottom: 38px;
  }

  .footer-logo {
    max-height: 75px;
  }

  .footer-contact-row {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      20px;
  }

  .footer-contact-icon {
    width: 42px;
    height: 42px;
  }

  .footer-distributor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-distributor-actions .btn {
    width: 100%;
  }

  .footer-bottom {
    padding: 14px 11px;
    border-radius: 19px;
  }

  .footer-copy {
    font-size: 9px;
  }

  .footer-visitor {
    max-width: 100%;
    min-height: 40px;
    padding: 5px 10px;
  }

  .footer-visitor > span:not(#visitorCount) {
    font-size: 8px;
  }

  .footer-visitor #visitorCount {
    font-size: 11.5px;
  }

  .social-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}


@media (max-width: 380px) {
  .footer-top-cta {
    padding: 18px 14px;
  }

  .footer-distributor-card {
    padding: 17px;
  }

  .footer-visitor {
    gap: 5px;
    padding: 5px 8px;
  }

  .footer-visitor > i {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .footer-visitor > span:not(#visitorCount) {
    font-size: 7px;
  }

  .footer-visitor #visitorCount {
    font-size: 10.5px;
    letter-spacing: 0.07em;
  }
}


@media (prefers-reduced-motion: reduce) {
  .footer-btn-primary,
  .footer-btn-whatsapp,
  .footer-btn-secondary,
  .footer-contact-row,
  .social-btn {
    transition: none;
  }
}

/* ===================== FLYDAYZ FOOTER END ===================== */