/* =========================================================
           ROOT
        ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --navy: #071d43;
  --navy-2: #0a2b5c;

  --blue: #1976b9;
  --blue-light: #55b8ef;

  --bg: #eef8fd;
  --bg-2: #e5f4fc;

  --text: #092143;
  --muted: #66829c;

  --white: #ffffff;

  --border: rgba(25, 118, 185, 0.12);
}

/* =========================================================
           RESET
        ========================================================= */

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

html {
  scroll-behavior: smooth;
  overflow-x:hidden;
}

body {

    font-family:'Outfit',sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    background: var(--bg);

  color: var(--text);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
}

a {
  text-decoration: none;
}

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

.iqraa-hero {
  min-height: 760px;
  height: 760px;
  padding: 92px 0 48px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  background: radial-gradient(
      circle at 83% 45%,
      rgba(110, 200, 247, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 70%,
      rgba(92, 170, 220, 0.08),
      transparent 30%
    ),
    linear-gradient(135deg, #f4fbff 0%, #edf8fd 45%, #e2f2fb 100%);
}

/* =========================================================
           ISLAMIC GEOMETRIC BACKGROUND
        ========================================================= */

.geometric-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.09;

  pointer-events: none;

  background-image: linear-gradient(
      30deg,
      transparent 24%,
      rgba(27, 106, 157, 0.45) 25%,
      rgba(27, 106, 157, 0.45) 26%,
      transparent 27%,
      transparent 74%,
      rgba(27, 106, 157, 0.45) 75%,
      rgba(27, 106, 157, 0.45) 76%,
      transparent 77%
    ),
    linear-gradient(
      150deg,
      transparent 24%,
      rgba(27, 106, 157, 0.45) 25%,
      rgba(27, 106, 157, 0.45) 26%,
      transparent 27%,
      transparent 74%,
      rgba(27, 106, 157, 0.45) 75%,
      rgba(27, 106, 157, 0.45) 76%,
      transparent 77%
    ),
    linear-gradient(
      60deg,
      transparent 39%,
      rgba(27, 106, 157, 0.25) 40%,
      rgba(27, 106, 157, 0.25) 41%,
      transparent 42%
    );

  background-size: 94px 162px, 94px 162px, 94px 162px;

  background-position: 0 0, 0 0, 47px 81px;

  animation: patternMove 35s linear infinite;
}

@keyframes patternMove {
  from {
    background-position: 0 0, 0 0, 47px 81px;
  }

  to {
    background-position: 94px 162px, -94px -162px, 141px 243px;
  }
}

/* =========================================================
           BACKGROUND LIGHT
        ========================================================= */

.hero-light {
  position: absolute;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  right: -150px;

  top: 50%;

  transform: translateY(-50%);

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(194, 231, 250, 0.35) 48%,
    transparent 70%
  );

  filter: blur(10px);

  pointer-events: none;
}

/* =========================================================
           PARTICLES
        ========================================================= */

.particles {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.particle {
  position: absolute;

  width: 4px;

  height: 4px;

  background: #5ab9ea;

  border-radius: 50%;

  opacity: 0.4;

  animation: particleAnimation linear infinite;
}

@keyframes particleAnimation {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }

  20% {
    opacity: 0.35;
  }

  80% {
    opacity: 0.35;
  }

  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

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

.hero-wrapper {
  width: min(1160px, calc(100% - 48px));
  max-width: 1160px;
  margin: 0 auto;

  position: relative;

  z-index: 5;
}

/* =========================================================
           LEFT SIDE
        ========================================================= */

.hero-left {
  padding-top: 0;
  padding-right: 15px;

  position: relative;

  z-index: 20;
}

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

.hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  padding: 11px 19px;

  border-radius: 50px;

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

  border: 1px solid rgba(25, 118, 185, 0.14);

  box-shadow: 0 8px 30px rgba(13, 57, 93, 0.07);

  color: #1768a6;

  font-size: 15px;

  font-weight: 600;

  margin-bottom: 38px;

  backdrop-filter: blur(12px);

  opacity: 0;

  animation: heroFadeUp 0.9s 0.1s ease forwards;
}

.badge-dot {
  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #5cbdf1;

  box-shadow: 0 0 0 5px rgba(92, 189, 241, 0.13);

  animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(92, 189, 241, 0.12);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(92, 189, 241, 0.02);
  }
}

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

.hero-title {
  /* font-family: "Playfair Display", Georgia, serif; */

  font-size: 80px;

  line-height: 85px;

  letter-spacing: -2.5px;

  font-weight: 700;

  color: var(--navy);

  margin-bottom: 24px;

  opacity: 0;

  animation: heroTitle 0.95s 0.25s ease forwards;
}

.hero-title .blue-text {
  color: #1773b6;

  position: relative;

  display: inline-block;
}

@keyframes underlineAnimation {
  to {
    transform: scaleX(1);
  }
}

@keyframes heroTitle {
  from {
    opacity: 0;

    transform: translateY(45px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

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

.hero-description {
  max-width: 590px;

  color: #66839d;

  font-size: 16px;

  line-height: 1.75;

  margin-bottom: 30px;

  opacity: 0;

  animation: heroFadeUp 0.9s 0.45s ease forwards;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;

    transform: translateY(25px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

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

.hero-buttons {
  display: flex;

  align-items: center;

  gap: 20px;

  opacity: 0;

  animation: heroFadeUp 0.9s 0.6s ease forwards;

  padding-bottom: 20px;
}

.early-access {
  height: 56px;

  padding: 0 24px;

  display: inline-flex;

  align-items: center;

  gap: 16px;

  border-radius: 13px;

  color: white;

  font-size: 14px;

  font-weight: 700;

  background: linear-gradient(135deg, #071d43, #1165a7);

  box-shadow: 0 18px 35px rgba(7, 29, 67, 0.22);

  position: relative;

  overflow: hidden;

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

.early-access::before {
  content: "";

  position: absolute;

  width: 100px;

  height: 150%;

  top: -25%;

  left: -130px;

  transform: rotate(20deg);

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

  transition: left 0.6s ease;
}

.early-access:hover {
  color: white;

  transform: translateY(-4px);

  box-shadow: 0 22px 42px rgba(7, 29, 67, 0.28);
}

.early-access:hover::before {
  left: 130%;
}

.arrow {
  font-size: 20px;

  transition: transform 0.3s ease;
}

.early-access:hover .arrow {
  transform: translateX(5px);
}

/* =========================================================
           VIDEO BUTTON
        ========================================================= */

.watch-button {
  display: flex;

  align-items: center;

  gap: 14px;

  color: var(--navy);

  font-size: 16px;

  font-weight: 600;

  padding: 8px;
}

.play-circle {
  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: white;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #1872b5;

  box-shadow: 0 10px 25px rgba(7, 29, 67, 0.1);

  transition: all 0.35s ease;
}

.watch-button:hover {
  color: #1872b5;
}

.watch-button:hover .play-circle {
  color: white;

  background: var(--navy);

  transform: scale(1.08);
}

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

.hero-visual {
  height: 680px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* =========================================================
           BIG CIRCLE
        ========================================================= */

.main-circle {
  width: 515px;

  height: 515px;

  border-radius: 50%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.98),
    rgba(221, 243, 255, 0.88) 52%,
    rgba(176, 220, 244, 0.58) 100%
  );

  box-shadow: 0 35px 80px rgba(15, 74, 115, 0.12),
    inset 0 0 80px rgba(255, 255, 255, 0.9);

  animation: circleFloat 6s ease-in-out infinite;
}

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

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

/* =========================================================
           ORBIT RING
        ========================================================= */

.orbit {
  position: absolute;

  width: 610px;

  height: 610px;

  border-radius: 50%;

  border: 1px dashed rgba(41, 137, 191, 0.22);

  animation: orbitRotate 28s linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

.orbit::before {
  content: "";

  position: absolute;

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: #1875b6;

  top: 28%;

  left: -5px;

  box-shadow: 0 0 0 7px rgba(24, 117, 182, 0.08);
}

.orbit::after {
  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: #1875b6;

  bottom: 20%;

  right: 5px;

  box-shadow: 0 0 0 7px rgba(24, 117, 182, 0.08);
}

/* =========================================================
           INNER RING
        ========================================================= */

.inner-ring {
  position: absolute;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  border: 1px solid rgba(56, 158, 207, 0.1);
}

/* =========================================================
           CENTER
        ========================================================= */

.center-icon {
  width: 200px;

  height: 200px;

  border-radius: 50%;

  background: linear-gradient(145deg, #09244e, #0d3970);

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  box-shadow: 0 25px 50px rgba(7, 29, 67, 0.25);

  position: relative;

  z-index: 5;
}

.center-icon::before {
  content: "";

  position: absolute;

  inset: -14px;

  border-radius: 50%;

  border: 1px solid rgba(24, 117, 182, 0.15);

  animation: centerPulse 3s infinite;
}

@keyframes centerPulse {
  0% {
    transform: scale(0.92);

    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);

    opacity: 0;
  }
}

/* Islamic-ish center icon */

.center-symbol {
  width: 82px;

  height: 82px;

  border-radius: 10px;

  background: white;

  color: var(--navy);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 48px;

  position: relative;
}

.center-symbol::after {
  content: "☪";

  position: absolute;

  font-size: 30px;

  top: 22px;

  left: 31px;

  color: var(--navy);
}

.center-symbol i {
  font-size: 52px;

  opacity: 0.95;
}

/* =========================================================
           ORBIT SMALL ICONS
        ========================================================= */

.orbit-small {
  position: absolute;

  width: 62px;

  height: 62px;

  border-radius: 50%;

  background: white;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #1473b5;

  font-size: 21px;

  box-shadow: 0 12px 30px rgba(7, 29, 67, 0.1);

  z-index: 10;

  animation: smallFloat 4s ease-in-out infinite;
}

.small-one {
  top: 108px;

  right: 68px;
}

.small-two {
  bottom: 115px;

  right: 125px;

  animation-delay: 0.8s;
}

.small-three {
  bottom: 120px;

  left: 70px;

  animation-delay: 1.5s;
}

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

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

/* =========================================================
           FLOATING FEATURE CARDS
        ========================================================= */

.feature-card {
  position: absolute;

  z-index: 20;

  min-width: 240px;

  padding: 17px 20px;

  border-radius: 17px;

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

  border: 1px solid rgba(25, 118, 185, 0.08);

  box-shadow: 0 18px 45px rgba(7, 29, 67, 0.11);

  display: flex;

  align-items: center;

  gap: 14px;

  backdrop-filter: blur(15px);

  animation: cardFloat 5s ease-in-out infinite;
}

.feature-icon {
  flex: 0 0 48px;

  width: 48px;

  height: 48px;

  border-radius: 13px;

  background: #eaf7ff;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #1775b7;

  font-size: 20px;
}

.feature-content strong {
  display: block;

  color: #102849;

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 6px;
}

.feature-content span {
  color: #7190a9;

  font-size: 12px;

  white-space: nowrap;
}

/* Card positions */

.quran-card {
  top: 58px;

  left: -15px;
}

.madrassa-card {
  top: 185px;

  right: -15px;

  animation-delay: 0.9s;
}

.mahal-card {
  bottom: 70px;

  left: -25px;

  animation-delay: 1.8s;
}

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

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

/* =========================================================
           BOTTOM SCROLL
        ========================================================= */

.scroll-explore {
  position: absolute;

  bottom: 50px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  color: #718da5;

  font-size: 9px;

  letter-spacing: 1px;

  text-transform: uppercase;

  z-index: 20;
}

.mouse-icon {
  width: 28px;

  height: 42px;

  border: 1px solid #9cc9e3;

  border-radius: 18px;

  display: flex;

  justify-content: center;

  padding-top: 8px;
}

.mouse-dot {
  width: 4px;

  height: 8px;

  border-radius: 5px;

  background: #6aafd4;

  animation: mouseScroll 1.6s infinite;
}

@keyframes mouseScroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(13px);
    opacity: 0;
  }
}

.scroll-explore {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-explore.hidden {
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}


/* =========================================================
           IQRAA MARK NAVBAR
 ========================================================= */
.iqraa-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 15px 0;
  transition: 0.35s ease;
}

.iqraa-navbar.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgba(7, 29, 67, 0.09);
  padding: 9px 0;
}

.nav-inner {
  width: min(1470px, calc(100% - 70px));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  width: 200px;
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links > a:not(.nav-cta) {
  color: #173451;
  font-size: 15px;
  font-weight: 700;
  transition: 0.25s ease;
}

.nav-links > a:not(.nav-cta):hover,
.nav-links > a.active {
  color: #1477b8;
}

.nav-cta {
  color: #fff !important;
  background: linear-gradient(135deg, #071d43, #1165a7);
  padding: 14px 21px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(7, 29, 67, 0.16);
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: #071d43;
  box-shadow: 0 8px 22px rgba(7, 29, 67, 0.09);
}

.mobile-menu {
  display: none;
}

/* =========================================================
           OUR STYLE — APP VISUAL
        ========================================================= */
.app-stage {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-halo {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(219, 243, 255, 0.9) 45%,
    rgba(174, 220, 245, 0.45) 66%,
    transparent 73%
  );
  box-shadow: 0 35px 80px rgba(15, 74, 115, 0.1),
    inset 0 0 80px rgba(255, 255, 255, 0.92);
  animation: appHaloFloat 6s ease-in-out infinite;
}

.app-orbit {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px dashed rgba(41, 137, 191, 0.2);
  animation: orbitRotate 28s linear infinite;
}

.app-orbit::before,
.app-orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1875b6;
  box-shadow: 0 0 0 7px rgba(24, 117, 182, 0.08);
}

.app-orbit::before {
  top: 28%;
  left: -5px;
}

.app-orbit::after {
  right: 4%;
  bottom: 20%;
}

.app-phone {
  position: relative;
  z-index: 5;
  width: min(305px, 66%);
  transform: rotate(2deg);
  filter: drop-shadow(0 34px 38px rgba(7, 29, 67, 0.22));
  animation: appPhoneFloat 5s ease-in-out infinite;
}

.app-phone::before {
  content: "";
  position: absolute;
  inset: 3% -5% 2%;
  z-index: -1;
  border-radius: 55px;
  background: linear-gradient(
    145deg,
    rgba(83, 187, 238, 0.43),
    rgba(190, 143, 70, 0.23)
  );
  filter: blur(24px);
}

.app-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.app-label {
  position: absolute;
  z-index: 20;
  top: 35px;
  right: 14%;
  padding: 8px 11px;
  border-radius: 12px;
  color: #1768a6;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(25, 118, 185, 0.12);
  box-shadow: 0 14px 32px rgba(7, 29, 67, 0.09);
  backdrop-filter: blur(12px);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.app-label i {
  color: #239bd5;
  margin-right: 5px;
}

.app-feature-card {
  position: absolute;
  z-index: 20;
  min-width: 190px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(25, 118, 185, 0.09);
  box-shadow: 0 18px 45px rgba(7, 29, 67, 0.11);
  backdrop-filter: blur(14px);
  animation: cardFloat 5s ease-in-out infinite;
}

.app-feature-card .feature-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf7ff;
  color: #1775b7;
  font-size: 15px;
}

.app-feature-card strong {
  display: block;
  color: #102849;
  font-size: 9px;
  margin-bottom: 3px;
}

.app-feature-card span {
  display: block;
  color: #7190a9;
  font-size: 9px;
}

.app-quran-card {
  left: 8px;
  top: 24%;
}

.app-community-card {
  right: 8px;
  bottom: 18%;
  animation-delay: 0.8s;
}

.app-prayer-card {
  left: 10%;
  bottom: 3%;
  animation-delay: 1.5s;
}

@keyframes appPhoneFloat {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(-13px) rotate(1deg);
  }
}

@keyframes appHaloFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Our brand colors in the supplied hero typography */
.hero-title .blue-text {
  color: #b9873d;
}

.hero-title {
  color: #071d43;
}

.hero-description {
  color: #5f7b94;
}

.hero-description strong {
  color: #092143;
}



/* =========================================================
   COMPACT HERO OVERRIDES
   ========================================================= */
.iqraa-hero .container {
  width: min(1440px, calc(100% - 80px));
  max-width: 1440px;
}

.iqraa-hero .row {
  min-height: 610px;
}

.hero-badge {
  padding: 9px 15px;
  font-size: 13px;
  margin-bottom: 26px;
}

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

.hero-buttons {
  gap: 14px;
  padding-bottom: 0;
}

.play-circle {
  width: 46px;
  height: 46px;
}

.watch-button {
  font-size: 14px;
  gap: 11px;
}

.app-feature-card {
  transform: scale(0.88);
}

@media (max-width: 1399px) {
  .iqraa-hero {
    min-height: 720px;
    height: 720px;
    padding-top: 88px;
  }

  .hero-title {
    font-size: clamp(44px, 4.5vw, 64px);
  }

  .hero-description {
    max-width: 540px;
    font-size: 15px;
  }

  .hero-visual {
    height: 500px;
  }

  .app-stage {
    height: 500px;
  }

  .app-halo {
    width: 420px;
    height: 420px;
  }

  .app-orbit {
    width: 475px;
    height: 475px;
  }

  .app-phone {
    width: min(290px, 64%);
  }
}

@media (max-width: 1199px) {
  .iqraa-hero {
    min-height: 700px;
    height: 700px;
  }

  .hero-wrapper,
  .iqraa-hero .container {
    width: min(1080px, calc(100% - 40px));
  }

  .hero-title {
    font-size: 56px;
  }

  .hero-description {
    font-size: 15px;
    max-width: 510px;
  }

  .app-stage {
    height: 480px;
  }

  .app-halo {
    width: 390px;
    height: 390px;
  }

  .app-orbit {
    width: 445px;
    height: 445px;
  }

  .app-phone {
    width: 270px;
  }

  .app-feature-card {
    min-width: 175px;
    padding: 9px 11px;
    transform: scale(0.82);
  }
}

@media (max-width: 991px) {
  .hero-wrapper,
  .iqraa-hero .container {
    width: calc(100% - 36px);
    max-width: 760px;
  }

  .iqraa-hero {
    height: auto;
    min-height: auto;
    padding: 110px 0 60px;
  }

  .iqraa-hero .row {
    min-height: auto;
  }

  .hero-left {
    padding-right: 0;
  }

  .hero-title {
    font-size: 48px;
  }

  .hero-description {
    max-width: 600px;
    font-size: 16px;
  }

  .hero-visual {
    margin-top: 25px;
    height: 460px;
  }

  .app-stage {
    height: 460px;
  }

  .app-halo {
    width: 390px;
    height: 390px;
  }

  .app-orbit {
    width: 440px;
    height: 440px;
  }

  .app-phone {
    width: 275px;
  }
}

@media (max-width: 575px) {
  .hero-wrapper,
  .iqraa-hero .container {
    width: calc(100% - 24px);
    max-width: none;
  }

  .iqraa-hero {
    padding: 96px 0 48px;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-description {
    font-size: 14px;
    line-height: 1.65;
  }

  .hero-buttons {
    gap: 10px;
  }

  .early-access {
    height: 52px;
    font-size: 14px;
    padding: 0 20px;
  }

  .play-circle {
    width: 42px;
    height: 42px;
  }

  .hero-visual {
    height: 360px;
    margin-top: 20px;
  }

  .app-stage {
    height: 360px;
  }

  .app-halo {
    width: 300px;
    height: 300px;
  }

  .app-orbit {
    width: 330px;
    height: 330px;
  }

  .app-phone {
    width: 235px;
  }

  .app-feature-card {
    transform: scale(0.68);
  }
}
.app-phone {
    opacity: 0;

    animation:
        phoneSoftReveal 1.8s ease-out forwards,
        phoneGentleFloat 8s ease-in-out 1.8s infinite;
}

@keyframes phoneSoftReveal {

    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }

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

}

@keyframes phoneGentleFloat {

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

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

}

/* ============================================================
   IQRAA MARK — SECTION 1 → SECTION 2 BRIDGE
============================================================ */

.iqraa-bridge {
    position: relative;

    z-index: 50;

    width: 100%;

    /* margin-top: -82px; */

    margin-bottom: -82px;

    pointer-events: none;
}


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

.bridge-container {
    position: relative;

    width: min(
        1360px,
        calc(100% - 80px)
    );

    min-height: 230px;

    margin: 0 auto;

    padding: 25px 38px 28px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 252, 255, 0.96)
        );

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 30px 70px rgba(7, 29, 67, 0.13),
        0 8px 25px rgba(7, 29, 67, 0.05);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    overflow: hidden;
}


/* ============================================================
   TOP GLOW
============================================================ */

.bridge-container::before {
    content: "";

    position: absolute;

    left: 50%;

    top: -120px;

    transform:
        translateX(-50%);

    width: 420px;

    height: 220px;

    border-radius: 50%;

    background:
        rgba(73, 171, 225, 0.09);

    filter:
        blur(45px);

    pointer-events: none;
}


/* ============================================================
   GOLD ACCENT
============================================================ */

.bridge-container::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform:
        translateX(-50%);

    width: 180px;

    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b9873d,
            transparent
        );

    opacity: 0.8;
}


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

.bridge-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 20px;

    color:
        #7f94a5;

    /* font-family:
        "DM Sans",
        sans-serif; */

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.bridge-heading-line {
    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185, 135, 61, 0.55)
        );
}

.bridge-heading-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(185, 135, 61, 0.55),
            transparent
        );
}


/* ============================================================
   STATS ROW
============================================================ */

.bridge-stats {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    width: 100%;
}


/* ============================================================
   STAT ITEM
============================================================ */

.bridge-stat {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 125px;

    text-align: center;

    transition:
        transform 0.35s ease;
}

.bridge-stat:hover {
    transform:
        translateY(-5px);
}


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

.bridge-icon {
    width: 38px;

    height: 38px;

    margin-bottom: 7px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #e3f4fd
        );

    border:
        1px solid rgba(25, 118, 185, 0.08);

    color:
        #1976b9;

    font-size: 13px;

    box-shadow:
        0 7px 18px rgba(25, 118, 185, 0.07);
}


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

.bridge-number {
    color:
        #0b2347;

    /* font-family:
        "Playfair Display",
        Georgia,
        serif; */

    font-size:
        40px;

    line-height:
        0.95;

    font-weight:
        700;

    letter-spacing:
        -1px;
}

.bridge-number span {
    color:
        #b9873d;

    font-size:
        25px;

    margin-left:
        1px;
}


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

.bridge-label {
    margin-top:
        7px;
/* 
    color:
        #536d82; */

    /* font-family:
        "DM Sans",
        sans-serif; */

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        700;
}


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

.bridge-description {
    margin-top:
        4px;

    /* color:
        #94a7b7; */

    /* font-family:
        "DM Sans",
        sans-serif; */

    font-size:
        15px;

    line-height:
        1.3;
}


/* ============================================================
   DIVIDERS
============================================================ */

.bridge-divider {
    width: 1px;

    height: 92px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(25, 118, 185, 0.14),
            transparent
        );
}


/* ============================================================
   BOTTOM DECORATIVE DOTS
============================================================ */

.bridge-bottom-line {
    position: absolute;

    left: 50%;

    bottom: 9px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 5px;
}

.bridge-bottom-line span {
    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        #b9873d;

    opacity: 0.5;
}

.bridge-bottom-line span:nth-child(2) {
    width: 6px;

    height: 6px;

    opacity: 0.85;
}


/* ============================================================
   DECORATIVE GLOWS
============================================================ */

.bridge-glow {
    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(55px);

    opacity: 0.45;
}

.bridge-glow-left {
    left: 2%;

    top: -70px;

    background:
        rgba(75, 179, 231, 0.12);
}

.bridge-glow-right {
    right: 2%;

    bottom: -90px;

    background:
        rgba(185, 135, 61, 0.10);
}


/* ============================================================
   SECTION 2 — THE PROBLEM WE'RE SOLVING
============================================================ */

.iqraa-problem {
    position: relative;
    width: 100%;

    padding: 210px 0 150px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(86, 185, 239, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 48%,
            rgba(185, 135, 61, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbfe 45%,
            #edf8fd 100%
        );
}


/* ============================================================
   BACKGROUND GEOMETRIC PATTERN
============================================================ */

.problem-pattern {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.045;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        ),
        linear-gradient(
            60deg,
            transparent 39%,
            rgba(27, 106, 157, 0.3) 40%,
            rgba(27, 106, 157, 0.3) 41%,
            transparent 42%
        );

    background-size:
        100px 172px,
        100px 172px,
        100px 172px;

    background-position:
        0 0,
        0 0,
        50px 86px;

    animation:
        problemPatternMove 40s linear infinite;
}

@keyframes problemPatternMove {

    from {
        background-position:
            0 0,
            0 0,
            50px 86px;
    }

    to {
        background-position:
            100px 172px,
            -100px -172px,
            150px 258px;
    }
}


/* ============================================================
   BACKGROUND GLOWS
============================================================ */

.problem-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(8px);
}

.problem-glow-one {
    width: 500px;
    height: 500px;

    left: -300px;
    top: 10%;

    background:
        rgba(76, 183, 236, 0.12);
}

.problem-glow-two {
    width: 550px;
    height: 550px;

    right: -330px;
    bottom: -150px;

    background:
        rgba(185, 135, 61, 0.075);
}


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

.iqraa-problem .problem-container {
    position: relative;

    z-index: 5;

    width: min(1440px, calc(100% - 80px));

    max-width: 1440px;

    margin: 0 auto;
}


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

.problem-content {
    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 680px;

    animation:
        problemContentEnter 0.8s ease both;
}

@keyframes problemContentEnter {

    from {
        opacity: 0;
        transform: translateX(-25px);
    }

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


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

.problem-badge {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 11px 19px;

    margin-bottom: 32px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.07);

    color:
        #1768a6;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        700;

    white-space:
        nowrap;

    backdrop-filter:
        blur(12px);
}

.problem-badge-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
        #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.11);

    animation:
        problemDotPulse 2s infinite;
}

@keyframes problemDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }
}


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

.problem-title {
    margin:
        0 0 30px;

    /* font-family:
        "Playfair Display",
        Georgia,
        serif; */

    font-size:
        clamp(54px, 4.4vw, 72px);

    line-height:
        1.08;

    letter-spacing:
        -2.2px;

    font-weight:
        700;

    color:
        #071d43;
}

.problem-title span {
    display: block;

    color:
        #b9873d;
}

.problem-title span {
    display: inline;
}


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

.problem-description {
    width: 100%;

    max-width: 680px;

    margin:
        0 0 22px;

    color:
        #607b93;

    /* font-family:
        "DM Sans",
        sans-serif; */

    font-size:
        18px;

    line-height:
        1.8;

    font-weight:
        400;
}

.problem-highlight {
    color:
        #183957;

    font-weight:
        500;
}


/* ============================================================
   FEATURE POINTS
============================================================ */

.problem-points {
    display:
        grid;

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

    gap:
        20px;

    margin-top:
        38px;
}

.problem-point {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    min-height:
        92px;

    padding:
        18px;

    border-radius:
        17px;

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

    border:
        1px solid rgba(25, 118, 185, 0.08);

    box-shadow:
        0 12px 32px rgba(7, 29, 67, 0.055);

    backdrop-filter:
        blur(12px);

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

.problem-point:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 40px rgba(7, 29, 67, 0.10);
}

.problem-point-icon {
    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        #eaf7ff;

    color:
        #1775b7;

    font-size:
        16px;
}

.problem-point strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #102849;

    font-size:
        14px;

    line-height:
        1.3;

    font-weight:
        700;
}

.problem-point span {
    display: block;
    color: #464b4f;
    font-size: 15px;
    line-height: 1.55;
}


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

.problem-visual {
    position:
        relative;

    width:
        100%;

    min-height:
        620px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ============================================================
   OLD WAY CARD
============================================================ */

.problem-main-card {
    position:
        relative;

    z-index:
        3;

    width:
        510px;

    min-height:
        500px;

    padding:
        30px;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(239, 248, 253, 0.95)
        );

    border:
        1px solid rgba(25, 118, 185, 0.11);

    box-shadow:
        0 30px 70px rgba(7, 29, 67, 0.11);

    backdrop-filter:
        blur(20px);

    transform:
        rotate(-2deg);

    animation:
        problemMainCardEnter 0.9s ease both,
        problemCardFloat 6s 0.9s ease-in-out infinite;
}

@keyframes problemMainCardEnter {

    from {
        opacity:
            0;

        transform:
            translateX(25px)
            rotate(-2deg);
    }

    to {
        opacity:
            1;

        transform:
            translateX(0)
            rotate(-2deg);
    }
}

@keyframes problemCardFloat {

    0%,
    100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

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


/* ============================================================
   OLD WAY HEADER
============================================================ */

.problem-main-top {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding-bottom:
        22px;

    margin-bottom:
        20px;

    border-bottom:
        1px solid rgba(25, 118, 185, 0.08);
}

.problem-main-icon {
    width:
        55px;

    height:
        55px;

    flex:
        0 0 55px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        #edf3f6;

    color:
        #6f8190;

    font-size:
        21px;
}

.problem-main-top span {
    display:
        block;

    margin-bottom:
        5px;

    /* color:
        #9aabb8; */

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}

.problem-main-top strong {
    display:
        block;

    color:
        #09090a;

    font-size:
        17px;

    line-height:
        1.3;

    font-weight:
        700;
}


/* ============================================================
   SCATTERED ITEMS
============================================================ */

.scattered-item {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-height:
        66px;

    padding:
        15px 16px;

    margin-bottom:
        13px;

    border-radius:
        15px;

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

    border:
        1px solid rgba(7, 29, 67, 0.055);

    box-shadow:
        0 7px 22px rgba(7, 29, 67, 0.045);

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

.scattered-item:hover {
    transform:
        translateX(4px);

    box-shadow:
        0 12px 28px rgba(7, 29, 67, 0.08);
}

.scattered-icon {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #f0f5f8;

    color:
        #71889a;

    font-size:
        16px;
}

.scattered-item strong {
    display:
        block;

    margin-bottom:
        4px;

    /* color:
        #344d62; */

    font-size:
        13px;

    line-height:
        1.25;

    font-weight:
        700;
}

.scattered-item span {
    display:
        block;

    /* color:
        #94a6b4; */

    font-size:
        11px;

    line-height:
        1.3;
}

.scattered-status {
    margin-left:
        auto;

    color:
        #c49b9b;

    font-size:
        14px;
}


/* ============================================================
   SCATTERED CARD ANGLES
============================================================ */

.scattered-paper {
    transform:
        translateX(-5px)
        rotate(-0.5deg);
}

.scattered-notebook {
    transform:
        translateX(7px)
        rotate(0.7deg);
}

.scattered-whatsapp {
    transform:
        translateX(-3px)
        rotate(-0.3deg);
}

.scattered-quran {
    transform:
        translateX(6px)
        rotate(0.5deg);
}


/* ============================================================
   CONNECTION LINE
============================================================ */

.problem-connection-line {
    display: block !important;
    position: absolute !important;

    left: 36% !important;
    top: 87% !important;

    width: 135px !important;
    height: 2px !important;

    z-index: 8 !important;

    background: repeating-linear-gradient(
        90deg,
        rgba(185, 135, 61, 0.9) 0,
        rgba(185, 135, 61, 0.9) 6px,
        transparent 6px,
        transparent 12px
    ) !important;

    transform: rotate(15deg) !important;

    opacity: 1 !important;
    pointer-events: none;
}


/* Gold connection point */
.problem-connection-line span {
    position: absolute !important;

    right: -5px !important;
    top: -4px !important;

    width: 10px !important;
    height: 10px !important;

    border-radius: 50%;

    background: #b9873d !important;

    box-shadow:
        0 0 0 6px rgba(185, 135, 61, 0.14) !important;
}
/* ============================================================
   IQRAA MARK SOLUTION CARD
============================================================ */

.problem-solution-card {
    position:
        absolute;

    z-index:
        10;

    right:
        -30px;

    bottom:
        30px;

    width:
        350px;

    min-height:
        155px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        24px;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #0d4779
        );

    box-shadow:
        0 25px 55px rgba(7, 29, 67, 0.25);

    animation:
        solutionCardEnter 0.8s 0.2s ease both,
        solutionFloat 5s 1s ease-in-out infinite;
}

@keyframes solutionCardEnter {

    from {
        opacity:
            0;

        transform:
            translateY(25px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes solutionFloat {

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

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


/* ============================================================
   SOLUTION GLOW
============================================================ */

.solution-glow {
    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -80px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        rgba(91, 188, 239, 0.17);

    filter:
        blur(4px);
}


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

.solution-logo {
    position:
        relative;

    z-index:
        2;

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        16px;

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

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

    color:
        #b9873d;

    font-size:
        24px;
}


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

.solution-content {
    position:
        relative;

    z-index:
        2;

    min-width:
        0;
}

.solution-content > span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #8dc9e9;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}

.solution-content > strong {
    display:
        block;

    margin-bottom:
        12px;

    color:
        #ffffff;

    font-size:
        16px;

    line-height:
        1.2;

    font-weight:
        700;
}


/* ============================================================
   SOLUTION TAGS
============================================================ */

.solution-tags {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}

.solution-tags div {
    padding:
        6px 8px;

    border-radius:
        7px;

    color:
        #c8e6f6;

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

    font-size:
        9px;

    line-height:
        1;

    white-space:
        nowrap;
}

.solution-tags i {
    color:
        #8fd4f2;

    margin-right:
        4px;
}


/* ============================================================
   SOLUTION CHECK
============================================================ */

.solution-check {
    position:
        absolute;

    z-index:
        5;

    right:
        18px;

    top:
        18px;

    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #3ca9d9;

    color:
        #ffffff;

    font-size:
        11px;
}


/* ============================================================
   FLOATING MINI CARDS
============================================================ */

.problem-floating-card {
    position:
        absolute;

    z-index:
        12;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px 16px;

    border-radius:
        15px;

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

    border:
        1px solid rgba(25, 118, 185, 0.08);

    box-shadow:
        0 15px 35px rgba(7, 29, 67, 0.10);

    backdrop-filter:
        blur(12px);
}

.problem-floating-one {
    left:
        -10px;

    top:
        55px;

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

.problem-floating-two {
    right:
        -15px;

    top:
        95px;

    animation:
        floatingTwo 5s ease-in-out infinite;
}

@keyframes floatingOne {

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

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

@keyframes floatingTwo {

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

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

.floating-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #eaf7ff;

    color:
        #1775b7;

    font-size:
        14px;
}

.problem-floating-card strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #173451;

    font-size:
        11px;

    line-height:
        1.2;
}

.problem-floating-card span {
    display:
        block;

    color:
        #8aa0b1;

    font-size:
        10px;

    line-height:
        1.2;
}


/* ============================================================
   SECTION 3 — THREE CORE PILLARS
============================================================ */

.iqraa-pillars {
    position: relative;
    width: 100%;
    padding: 70px 0 45px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 35%,
            rgba(85, 184, 239, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(185, 135, 61, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #dceff9 0%,
            #e8f5fb 22%,
            #f3fafd 55%,
            #ffffff 100%
        );
}


/* ============================================================
   BACKGROUND PATTERN
============================================================ */

.pillars-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: 0.045;

    background-image:
        linear-gradient(
            45deg,
            transparent 46%,
            #1976b9 47%,
            #1976b9 48%,
            transparent 49%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            #1976b9 47%,
            #1976b9 48%,
            transparent 49%
        );

    background-size: 85px 85px;
}


/* ============================================================
   GLOWS
============================================================ */

.pillars-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(70px);
}

.pillars-glow-one {
    left: -120px;
    top: 180px;

    background: rgba(85, 184, 239, 0.12);
}

.pillars-glow-two {
    right: -120px;
    bottom: 100px;

    background: rgba(185, 135, 61, 0.10);
}


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

.pillars-container {
    position: relative;
    z-index: 5;

    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


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

.pillars-header {
    text-align: center;

    max-width: 800px;

    margin: 0 auto 65px;
}


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

.pillars-badge {
    display: inline-flex;

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

    gap: 10px;

    padding: 10px 19px;

    margin-bottom: 25px;

    border-radius: 50px;

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

    border: 1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.06);

    color: #1768a6;

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

    letter-spacing: 0.04em;

    backdrop-filter: blur(12px);
}


.pillars-badge-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #55b8ef;

    box-shadow:
        0 0 0 5px rgba(85, 184, 239, 0.12);

    animation: pillarDotPulse 2s infinite;
}


@keyframes pillarDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(85, 184, 239, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(85, 184, 239, 0.02);
    }
}


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

.pillars-title {
    margin: 0 0 22px;

    color: #071d43;

    font-size: clamp(46px, 5vw, 70px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;
}


.pillars-title span {
    display: block;

    color: #b9873d;
}


/* ============================================================
   SUBTITLE
============================================================ */

.pillars-subtitle {
    max-width: 680px;

    margin: 0 auto;

    color: #66829c;

    font-size: 17px;

    line-height: 1.8;

    font-weight: 400;
}


/* ============================================================
   PILLARS GRID
============================================================ */

.pillars-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


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

.pillar-card {
    position: relative;

    min-height: 570px;

    padding: 30px 28px 25px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 252, 255, 0.94)
        );

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 20px 55px rgba(7, 29, 67, 0.07);

    overflow: hidden;

    display: flex;
    flex-direction: column;

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


.pillar-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 30px 70px rgba(7, 29, 67, 0.13);

    border-color:
        rgba(25, 118, 185, 0.18);
}


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

.pillar-card-glow {
    position: absolute;

    width: 180px;
    height: 180px;

    top: -80px;
    right: -70px;

    border-radius: 50%;

    filter: blur(20px);

    pointer-events: none;

    opacity: 0.55;
}


.pillar-quran .pillar-card-glow {
    background: rgba(85, 184, 239, 0.18);
}


.pillar-madrassa .pillar-card-glow {
    background: rgba(25, 118, 185, 0.14);
}


.pillar-mahal .pillar-card-glow {
    background: rgba(185, 135, 61, 0.15);
}


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

.pillar-top {
    position: relative;

    display: flex;

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

    margin-bottom: 35px;
}


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

.pillar-number {
    color: rgba(7, 29, 67, 0.12);

    font-size: 46px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


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

.pillar-icon {
    width: 64px;
    height: 64px;

    border-radius: 18px;

    display: flex;

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

    font-size: 25px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #dff2fc
        );

    color: #1775b7;

    box-shadow:
        0 12px 28px rgba(25, 118, 185, 0.10);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.pillar-card:hover .pillar-icon {
    transform: rotate(-5deg) scale(1.08);
}


.pillar-mahal .pillar-icon {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f8ecd7
        );

    color: #a87832;
}


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

.pillar-label {
    display: block;

    margin-bottom: 10px;

    color: #1775b7;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.pillar-mahal .pillar-label {
    color: #a87832;
}


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

.pillar-content h3 {
    margin: 0 0 17px;

    color: #071d43;

    font-size: 28px;

    line-height: 1.2;

    letter-spacing: -0.7px;

    font-weight: 700;
}


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

.pillar-content p {
    margin: 0;

    color: #66829c;

    font-size: 16px;

    line-height: 1.75;
}


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

.pillar-features {
    margin-top: 27px;

    display: flex;

    flex-direction: column;

    gap: 13px;
}


.pillar-feature {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #405c73;

    font-size: 15px;

    line-height: 1.45;

    font-weight: 500;
}


.feature-check {
    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    margin-top: 1px;

    border-radius: 50%;

    display: flex;

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

    background: #e8f6fd;

    color: #1976b9;

    font-size: 9px;
}


.pillar-mahal .feature-check {
    background: #fbf2e4;

    color: #b9873d;
}


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

.pillar-bottom {
    margin-top: auto;

    padding-top: 25px;

    display: flex;

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

    border-top:
        1px solid rgba(25, 118, 185, 0.09);

    color: #176ca7;

    font-size: 12px;

    font-weight: 700;
}


.pillar-bottom i {
    width: 31px;
    height: 31px;

    border-radius: 50%;

    display: flex;

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

    background: #edf8fd;

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


.pillar-card:hover .pillar-bottom i {
    transform: translateX(5px);

    background: #1976b9;

    color: white;
}


.pillar-mahal .pillar-bottom {
    color: #a87832;
}


.pillar-mahal .pillar-bottom i {
    background: #fbf2e4;
}


/* ============================================================
   CONNECTED ECOSYSTEM
============================================================ */

.pillars-connection {
    display: flex;

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

    gap: 22px;

    margin-top: 55px;
}


.connection-line {
    width: 150px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(25, 118, 185, 0.25),
            transparent
        );
}


.connection-center {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #66829c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.connection-center i {
    width: 29px;
    height: 29px;

    border-radius: 50%;

    display: flex;

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

    background: #edf8fd;

    color: #1976b9;

    font-size: 11px;
}


/* ============================================================
   SECTION 4 — ONE SYSTEM, SIX INTERFACES
============================================================ */

.iqraa-interfaces {
    position: relative;
    width: 100%;
    padding: 70px 0 50px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(85, 184, 239, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(25, 118, 185, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7fcff 0%,
            #eef8fd 50%,
            #e6f5fc 100%
        );
}


/* ============================================================
   BACKGROUND PATTERN
============================================================ */

.interfaces-pattern {
    position: absolute;
    inset: 0;

    opacity: .38;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 48%,
            rgba(25,118,185,.055) 49%,
            rgba(25,118,185,.055) 51%,
            transparent 52%
        ),
        linear-gradient(
            150deg,
            transparent 48%,
            rgba(25,118,185,.055) 49%,
            rgba(25,118,185,.055) 51%,
            transparent 52%
        );

    background-size: 110px 190px;
}


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

.interfaces-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);
}

.interfaces-glow-one {
    top: -220px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(85,184,239,.20),
            transparent 68%
        );
}

.interfaces-glow-two {
    right: -200px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(25,118,185,.14),
            transparent 68%
        );
}


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

.interfaces-container {
    position: relative;
    z-index: 3;

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;
}


/* ============================================================
   INTRO
============================================================ */

.interfaces-intro {
    position: relative;

    margin-bottom: 70px;
}


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

.interfaces-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

    background: rgba(255,255,255,.76);

    border: 1px solid rgba(25,118,185,.13);

    box-shadow:
        0 10px 30px rgba(7,29,67,.06);

    color: #176eaa;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    margin-bottom: 25px;

    backdrop-filter: blur(12px);
}

.interfaces-badge-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #45aee5;

    box-shadow:
        0 0 0 5px rgba(69,174,229,.12);
}


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

.interfaces-heading-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .7fr);

    align-items: end;

    gap: 70px;
}


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

.interfaces-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #6b8aa3;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .18em;
}


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

.interfaces-heading h2 {
    margin: 0;

    max-width: 700px;

    color: #071d43;

    font-size: clamp(50px, 5.2vw, 74px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 700;
}

.interfaces-heading h2 span {
    display: block;

    color: #1976b9;
}


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

.interfaces-description {
    padding-bottom: 5px;
}

.interfaces-description p {
    margin: 0;

    max-width: 470px;

    color: #66829c;

    font-size: 17px;

    line-height: 1.75;
}


/* ============================================================
   MINI LINE
============================================================ */

.interfaces-mini-line {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    color: #1976b9;

    font-size: 13px;

    font-weight: 700;
}

.interfaces-mini-line span {
    width: 35px;
    height: 2px;

    border-radius: 10px;

    background: #55b8ef;
}


/* ============================================================
   INTERFACE SYSTEM
============================================================ */

.interface-system {
    position: relative;

    width: 100%;

    height: 820px;

    margin: 0 auto;
}


/* ============================================================
   ORBITS
============================================================ */

.interface-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}

.interface-orbit-one {
    width: 500px;
    height: 500px;

    border: 1px dashed rgba(25,118,185,.18);

    animation: interfaceOrbitRotate 30s linear infinite;
}

.interface-orbit-two {
    width: 700px;
    height: 700px;

    border: 1px solid rgba(25,118,185,.07);
}

@keyframes interfaceOrbitRotate {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

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


/* ============================================================
   CENTER HUB
============================================================ */

.interface-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 245px;

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

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            #123b70 0%,
            #09244e 55%,
            #061b3b 100%
        );

    box-shadow:
        0 35px 80px rgba(7,29,67,.23),
        inset 0 0 45px rgba(255,255,255,.04);

    z-index: 10;
}


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

.center-pulse {
    position: absolute;

    inset: -18px;

    border-radius: 50%;

    border: 1px solid rgba(85,184,239,.28);

    animation: centerPulseInterface 3s ease-out infinite;
}

@keyframes centerPulseInterface {

    0% {
        transform: scale(.90);
        opacity: .8;
    }

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


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

.center-logo {
    display: flex;

    flex-direction: column;

    align-items: center;

    color: white;

    line-height: 1;
}

.center-logo-icon {
    width: 54px;
    height: 54px;

    display: flex;

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

    margin-bottom: 10px;

    border-radius: 16px;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.15);

    color: #8bd7fa;

    font-size: 22px;
}

.center-logo span {
    font-size: 18px;

    letter-spacing: .12em;

    font-weight: 500;
}

.center-logo strong {
    margin-top: 5px;

    font-size: 30px;

    letter-spacing: .12em;

    font-weight: 800;
}


/* ============================================================
   CENTER CAPTION
============================================================ */

.center-caption {
    margin-top: 13px;

    color: rgba(255,255,255,.68);

    font-size: 11px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ============================================================
   CENTER STATUS
============================================================ */

.center-status {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 15px;

    padding: 6px 10px;

    border-radius: 50px;

    background: rgba(85,184,239,.10);

    color: #8bd7fa;

    font-size: 10px;

    font-weight: 600;
}

.center-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #55c6ef;

    box-shadow:
        0 0 0 4px rgba(85,198,239,.08);
}


/* ============================================================
   CONNECTING LINES
============================================================ */

.interface-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(25,118,185,.04),
            rgba(25,118,185,.25),
            rgba(25,118,185,.04)
        );

    z-index: 1;
}

.line-admin {
    width: 190px;

    left: 31%;
    top: 32%;

    transform: rotate(20deg);
}

.line-manager {
    width: 210px;

    left: 69%;
    top: 32%;

    transform: rotate(160deg);
}

.line-teacher {
    width: 185px;

    left: 27%;
    top: 51%;

    transform: rotate(-3deg);
}

.line-parent {
    width: 185px;

    left: 73%;
    top: 51%;

    transform: rotate(183deg);
}

.line-student {
    width: 205px;

    left: 35%;
    top: 69%;

    transform: rotate(-23deg);
}

.line-community {
    width: 205px;

    left: 65%;
    top: 69%;

    transform: rotate(203deg);
}


/* ============================================================
   INTERFACE CARDS
============================================================ */

.interface-card {
    position: absolute;

    width: 380px;

    min-height: 220px;

    padding: 22px 22px 20px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.90);

    border: 1px solid rgba(25,118,185,.11);

    box-shadow:
        0 20px 55px rgba(7,29,67,.08);

    backdrop-filter: blur(16px);

    z-index: 5;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.interface-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 30px 70px rgba(7,29,67,.14);

    border-color:
        rgba(25,118,185,.24);
}


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

.interface-admin {
    top: 0;
    left: 2%;
}

.interface-manager {
    top: 0;
    right: 2%;
}

.interface-teacher {
    top: 280px;
    left: 0;
}

.interface-parent {
    top: 280px;
    right: 0;
}

.interface-student {
    bottom: 0;
    left: 9%;
}

.interface-community {
    bottom: 0;
    right: 9%;
}


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

.interface-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}

.interface-number {
    color: #9bb6c9;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .10em;
}


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

.interface-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(25,118,185,.10),
            rgba(85,184,239,.18)
        );

    color: #1976b9;

    font-size: 18px;

    transition:
        transform .35s ease,
        background .35s ease;
}

.interface-card:hover .interface-icon {
    transform:
        rotate(-6deg)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #1976b9,
            #55b8ef
        );

    color: white;
}


/* ============================================================
   ROLE
============================================================ */

.interface-role {
    display: block;

    margin-bottom: 6px;

    color: #1976b9;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;
}


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

.interface-content h3 {
    margin: 0 0 9px;

    color: #092143;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 700;
}


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

.interface-content p {
    margin: 0;

    color: #6a849a;

    font-size: 14px;

    line-height: 1.65;
}


/* ============================================================
   TAGS
============================================================ */

.interface-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}

.interface-tags span {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 10px;

    border-radius: 7px;

    background: #f0f8fc;

    color: #54748d;

    font-size: 10px;

    font-weight: 600;
}

.interface-tags i {
    color: #1976b9;

    font-size: 9px;
}


/* ============================================================
   BOTTOM STATEMENT
============================================================ */

.interfaces-bottom {
    width: min(760px, 100%);

    margin: 20px auto 0;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-radius: 17px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(25,118,185,.10);

    box-shadow:
        0 15px 40px rgba(7,29,67,.05);

    backdrop-filter: blur(12px);
}

.interfaces-bottom-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1976b9
        );

    color: white;

    font-size: 15px;
}

.interfaces-bottom strong {
    display: block;

    margin-bottom: 2px;

    color: #092143;

    font-size: 18px;
}

.interfaces-bottom span {
    display: block;

    color: #718ba0;

    font-size: 15px;
}


/* =========================================================
   SECTION 5 — WHY CHOOSE IQRAA MARK
========================================================= */

.iqraa-promise {
    position: relative;
    width: 100%;
    padding: 105px 0 110px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(85, 184, 239, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(185, 135, 61, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbfe 48%,
            #eaf6fc 100%
        );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.promise-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.045;
    pointer-events: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(25, 118, 185, 0.7) 47%,
            rgba(25, 118, 185, 0.7) 48%,
            transparent 49%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            rgba(25, 118, 185, 0.7) 47%,
            rgba(25, 118, 185, 0.7) 48%,
            transparent 49%
        );

    background-size: 90px 90px;
}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.promise-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    pointer-events: none;
    filter: blur(75px);
}

.promise-glow-left {
    left: -220px;
    top: 15%;

    background: rgba(85, 184, 239, 0.13);
}

.promise-glow-right {
    right: -220px;
    bottom: 5%;

    background: rgba(185, 135, 61, 0.09);
}


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

.promise-container {
    position: relative;

    z-index: 5;

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;
}


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

.promise-header {
    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;
}


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

.promise-badge {
    display: inline-flex;

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

    gap: 10px;

    padding: 10px 19px;

    margin-bottom: 24px;

    border-radius: 50px;

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

    border: 1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.06);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.07em;

    backdrop-filter: blur(12px);
}

.promise-badge-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.12);

    animation: promiseDotPulse 2s infinite;
}

@keyframes promiseDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }
}


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

.promise-title {
    margin: 0;

    color: #071d43;

    font-size: clamp(46px, 5vw, 70px);

    line-height: 1.08;

    letter-spacing: -2.2px;

    font-weight: 700;
}

.promise-title span {
    display: block;

    color: #b9873d;
}


/* =========================================================
   PROMISE GRID
========================================================= */

.promise-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


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

.promise-card {
    position: relative;

    min-height: 315px;

    padding: 27px 26px 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(247, 252, 255, 0.93)
        );

    border: 1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 20px 50px rgba(7, 29, 67, 0.065);

    overflow: hidden;

    display: flex;
    flex-direction: column;

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

.promise-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(85, 184, 239, 0.18),
            transparent 70%
        );

    pointer-events: none;
}

.promise-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(25, 118, 185, 0.20);

    box-shadow:
        0 30px 65px rgba(7, 29, 67, 0.12);
}


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

.promise-card-top {
    position: relative;

    z-index: 2;

    display: flex;

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

    margin-bottom: 35px;
}


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

.promise-number {
    color: rgba(7, 29, 67, 0.12);

    font-size: 40px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;
}


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

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

    display: flex;

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

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #dff2fc
        );

    color: #1976b9;

    font-size: 21px;

    box-shadow:
        0 12px 28px rgba(25, 118, 185, 0.09);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.promise-card:hover .promise-icon {
    transform:
        rotate(-6deg)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #071d43,
            #1976b9
        );

    color: #ffffff;
}


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

.promise-content {
    position: relative;

    z-index: 2;
}

.promise-content h3 {
    margin: 0 0 13px;

    color: #071d43;

    font-size: 22px;

    line-height: 1.25;

    letter-spacing: -0.4px;

    font-weight: 700;
}

.promise-content p {
    margin: 0;

    color: #66829c;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.promise-line {
    width: 42px;
    height: 3px;

    margin-top: auto;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1976b9,
            #55b8ef
        );

    transition:
        width 0.35s ease;
}

.promise-card:hover .promise-line {
    width: 75px;
}


/* =========================================================
   LAST CARD GOLD ACCENT
========================================================= */

.promise-card:last-child::before {
    background:
        radial-gradient(
            circle,
            rgba(185, 135, 61, 0.16),
            transparent 70%
        );
}

.promise-card:last-child .promise-icon {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f8ecd7
        );

    color: #a87832;
}

.promise-card:last-child:hover .promise-icon {
    background:
        linear-gradient(
            145deg,
            #8e6427,
            #b9873d
        );

    color: #ffffff;
}

.promise-card:last-child .promise-line {
    background:
        linear-gradient(
            90deg,
            #a87832,
            #d4b16d
        );
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .iqraa-promise {
        padding: 85px 0 90px;
    }

    .promise-header {
        margin-bottom: 50px;
    }

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

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

    .promise-card {
        min-height: 300px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 575px) {

    .iqraa-promise {
        padding: 70px 0 75px;
    }

    .promise-container {
        width: calc(100% - 24px);
    }

    .promise-header {
        margin-bottom: 38px;
    }

    .promise-badge {
        padding: 9px 15px;
        font-size: 12px;
    }

    .promise-title {
        font-size: 38px;
        line-height: 1.1;
        letter-spacing: -1.3px;
    }

    .promise-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .promise-card {
        min-height: 270px;

        padding: 23px 21px 22px;

        border-radius: 21px;
    }

    .promise-card-top {
        margin-bottom: 28px;
    }

    .promise-number {
        font-size: 34px;
    }

    .promise-icon {
        width: 52px;
        height: 52px;

        border-radius: 15px;

        font-size: 19px;
    }

    .promise-content h3 {
        font-size: 20px;
    }

    .promise-content p {
        font-size: 14px;
        line-height: 1.65;
    }

}

/* ============================================================
   SECTION 6 — LAUNCH
============================================================ */

.iqraa-launch {
    position: relative;

    width: 100%;

    padding: 125px 0 105px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(25, 118, 185, 0.28),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(85, 184, 239, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(185, 135, 61, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061a39 0%,
            #071d43 48%,
            #092b56 100%
        );

    color: #ffffff;
}


/* ============================================================
   BACKGROUND PATTERN
============================================================ */

.launch-pattern {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.055;

    background-image:
        linear-gradient(
            30deg,
            transparent 46%,
            rgba(255,255,255,.7) 47%,
            rgba(255,255,255,.7) 48%,
            transparent 49%
        ),
        linear-gradient(
            150deg,
            transparent 46%,
            rgba(255,255,255,.7) 47%,
            rgba(255,255,255,.7) 48%,
            transparent 49%
        );

    background-size:
        100px 172px;

    animation:
        launchPatternMove 40s linear infinite;
}


@keyframes launchPatternMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            100px 172px,
            -100px -172px;
    }
}


/* ============================================================
   BACKGROUND GLOWS
============================================================ */

.launch-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(60px);
}


.launch-glow-one {
    width: 420px;
    height: 420px;

    left: -220px;
    top: 20%;

    background:
        rgba(55, 174, 231, 0.13);
}


.launch-glow-two {
    width: 450px;
    height: 450px;

    right: -250px;
    bottom: -150px;

    background:
        rgba(185, 135, 61, 0.10);
}


/* ============================================================
   DECORATIVE ORBITS
============================================================ */

.launch-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px dashed rgba(139, 215, 250, 0.13);

    pointer-events: none;
}


.launch-orbit-one {
    width: 620px;
    height: 620px;

    left: 50%;
    top: 50%;

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

    animation:
        launchOrbitRotate 35s linear infinite;
}


.launch-orbit-two {
    width: 850px;
    height: 850px;

    left: 50%;
    top: 50%;

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

    border-color:
        rgba(185, 135, 61, 0.07);

    animation:
        launchOrbitRotateReverse 50s linear infinite;
}


.launch-orbit-one::before,
.launch-orbit-one::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #55b8ef;

    box-shadow:
        0 0 0 7px rgba(85,184,239,.08);
}


.launch-orbit-one::before {
    top: 18%;
    left: -4px;
}


.launch-orbit-one::after {
    right: 14%;
    bottom: -4px;
}


@keyframes launchOrbitRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

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


@keyframes launchOrbitRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}


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

.launch-container {
    position: relative;

    z-index: 5;

    width:
        min(
            1000px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    text-align: center;
}


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

.launch-header {
    max-width: 850px;

    margin: 0 auto;
}


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

.launch-badge {
    display: inline-flex;

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

    gap: 10px;

    padding: 10px 18px;

    margin-bottom: 27px;

    border-radius: 50px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.13);

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

    color: #aee2f8;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .07em;

    text-transform: uppercase;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.launch-badge-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #55c6ef;

    box-shadow:
        0 0 0 5px rgba(85,198,239,.10);

    animation:
        launchDotPulse 2s infinite;
}


@keyframes launchDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(85,198,239,.12);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(85,198,239,.02);
    }
}


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

.launch-title {
    margin: 0 0 25px;

    color: #ffffff;

    font-size:
        clamp(
            48px,
            5.4vw,
            74px
        );

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 700;
}


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

.launch-description {
    max-width: 720px;

    margin: 0 auto;

    color:
        rgba(224, 241, 250, .76);

    font-size: 17px;

    line-height: 1.8;

    font-weight: 400;
}


/* ============================================================
   COUNTDOWN
============================================================ */

.launch-countdown {
    display: flex;

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

    gap: 18px;

    margin-top: 52px;
}


/* ============================================================
   COUNTDOWN ITEM
============================================================ */

.countdown-item {
    width: 145px;

    min-height: 128px;

    display: flex;

    flex-direction: column;

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

    padding: 20px 15px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 25px 55px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}


.countdown-item:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(85,184,239,.35);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.06)
        );
}


/* ============================================================
   COUNTDOWN NUMBER
============================================================ */

.countdown-number {
    color: #ffffff;

    font-size: 52px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 8px 30px rgba(0,0,0,.20);
}


/* ============================================================
   COUNTDOWN LABEL
============================================================ */

.countdown-label {
    margin-top: 10px;

    color:
        rgba(174,226,248,.68);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* ============================================================
   DIVIDER
============================================================ */

.countdown-divider {
    color:
        rgba(185,135,61,.75);

    font-size: 34px;

    font-weight: 500;

    transform:
        translateY(-7px);
}


/* ============================================================
   UNTIL LAUNCH
============================================================ */

.launch-date {
    display: flex;

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

    gap: 18px;

    margin-top: 30px;
}


.launch-date-line {
    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,135,61,.5)
        );
}


.launch-date-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(185,135,61,.5),
            transparent
        );
}


.launch-date-content {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #d7eaf4;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.launch-date-content i {
    color: #b9873d;

    font-size: 13px;
}


/* ============================================================
   CTA
============================================================ */

.launch-actions {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 37px;
}


/* ============================================================
   PREMIUM OUTLINE CTA
============================================================ */

.launch-cta {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-width: 215px;
    height: 58px;

    padding: 0 25px;

    border-radius: 50px;

    color: #ffffff;

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

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

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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

    letter-spacing: 0.01em;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* Golden accent line */

.launch-cta::before {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b9873d,
            #e0b96a,
            #b9873d,
            transparent
        );

    transform: scaleX(0.35);

    transition:
        transform 0.4s ease;
}


/* Soft hover glow */

.launch-cta::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -60px;
    top: -70px;

    border-radius: 50%;

    background: rgba(85, 184, 239, 0.20);

    filter: blur(25px);

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;

    opacity: 0;
}


/* Text */

.launch-cta span {
    position: relative;
    z-index: 2;
}


/* Icon */

.launch-cta i {
    position: relative;
    z-index: 2;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #071d43;

    background: #ffffff;

    font-size: 12px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


/* Hover */

.launch-cta:hover {
    color: #ffffff;

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

    border-color:
        rgba(85, 184, 239, 0.55);

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.25),
        0 0 35px rgba(85, 184, 239, 0.08);
}


.launch-cta:hover::before {
    transform: scaleX(1);
}


.launch-cta:hover::after {
    opacity: 1;

    transform:
        translate(-25px, 20px);
}


.launch-cta:hover i {
    transform:
        translateX(4px);

    color: #ffffff;

    background:
        #1976b9;
}



/* ============================================================
   SECTION 7 — FAQ
============================================================ */

.iqraa-faq {
    position: relative;

    width: 100%;

    padding: 110px 0 120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 30%,
            rgba(85, 184, 239, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(185, 135, 61, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbfe 50%,
            #edf8fd 100%
        );
}


/* ============================================================
   FAQ PATTERN
============================================================ */

.faq-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.04;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        );

    background-size:
        100px 172px,
        100px 172px;
}


/* ============================================================
   FAQ GLOWS
============================================================ */

.faq-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(70px);
}

.faq-glow-one {
    left: -180px;
    top: 25%;

    background:
        rgba(85, 184, 239, 0.12);
}

.faq-glow-two {
    right: -180px;
    bottom: 10%;

    background:
        rgba(185, 135, 61, 0.08);
}


/* ============================================================
   FAQ CONTAINER
============================================================ */

.faq-container {
    position: relative;

    z-index: 5;

    width: min(
        920px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}


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

.faq-header {
    text-align: center;

    margin-bottom: 55px;
}


/* ============================================================
   FAQ BADGE
============================================================ */

.faq-badge {
    display: inline-flex;

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

    padding: 10px 19px;

    margin-bottom: 24px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.06);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.06em;

    backdrop-filter: blur(12px);
}


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

.faq-header h2 {
    margin: 0;

    color: #071d43;

    font-size:
        clamp(46px, 5vw, 68px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;
}

.faq-header h2 span {
    color: #b9873d;
}


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

.faq-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


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

.faq-item {
    position: relative;

    border-radius: 20px;

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

    border:
        1px solid rgba(25, 118, 185, 0.09);

    box-shadow:
        0 12px 35px rgba(7, 29, 67, 0.055);

    overflow: hidden;

    backdrop-filter: blur(14px);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.faq-item.active {
    border-color:
        rgba(25, 118, 185, 0.17);

    box-shadow:
        0 20px 45px rgba(7, 29, 67, 0.09);
}


/* ============================================================
   FAQ QUESTION
============================================================ */

.faq-question {
    width: 100%;

    min-height: 76px;

    padding: 18px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: 0;

    outline: none;

    background: transparent;

    color: #092143;

    text-align: left;

    /* font-family: inherit; */

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;
}

.faq-question span {
    flex: 1;
}


/* ============================================================
   FAQ ICON
============================================================ */

.faq-question i {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    border-radius: 50%;

    background: #edf8fd;

    color: #1976b9;

    font-size: 12px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

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

    background: #1976b9;

    color: #ffffff;
}


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

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.45s ease;
}

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

.faq-answer p {
    margin: 0;

    padding:
        0 70px 25px 24px;

    color: #66829c;

    font-size: 15px;

    line-height: 1.75;
}


/* ============================================================
   SECTION 8 — PRE FOOTER CTA
============================================================ */

.iqraa-prefooter {
    position: relative;

    width: 100%;

    padding: 95px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(85, 184, 239, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(185, 135, 61, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071d43 0%,
            #092c59 48%,
            #0a416f 100%
        );
}


/* ============================================================
   PRE FOOTER PATTERN
============================================================ */

.prefooter-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.07;

    pointer-events: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(255,255,255,.55) 47%,
            rgba(255,255,255,.55) 48%,
            transparent 49%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            rgba(255,255,255,.55) 47%,
            rgba(255,255,255,.55) 48%,
            transparent 49%
        );

    background-size: 85px 85px;
}


/* ============================================================
   PRE FOOTER GLOWS
============================================================ */

.prefooter-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(60px);
}

.prefooter-glow-one {
    width: 400px;
    height: 400px;

    left: -180px;
    top: -180px;

    background:
        rgba(85, 184, 239, 0.14);
}

.prefooter-glow-two {
    width: 350px;
    height: 350px;

    right: -150px;
    bottom: -160px;

    background:
        rgba(185, 135, 61, 0.13);
}


/* ============================================================
   PRE FOOTER CONTAINER
============================================================ */

.prefooter-container {
    position: relative;

    z-index: 5;

    width: min(
        1050px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}


/* ============================================================
   PRE FOOTER CONTENT
============================================================ */

.prefooter-content {
    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* ============================================================
   PRE FOOTER HEADING
============================================================ */

.prefooter-content h2 {
    max-width: 900px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size:
        clamp(42px, 5vw, 68px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;
}

.prefooter-content h2 span {
    color: #b9873d;
}


/* ============================================================
   PRE FOOTER SUB COPY
============================================================ */

.prefooter-content p {
    max-width: 610px;

    margin: 0 0 32px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 17px;

    line-height: 1.75;
}


/* ============================================================
   PRE FOOTER CTA
============================================================ */

.iqraa-prefooter .launch-cta {
    min-width: 215px;

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

    border-color:
        rgba(255, 255, 255, 0.25);
}

.iqraa-prefooter .launch-cta:hover {
    background:
        rgba(255, 255, 255, 0.11);
}


/* ============================================================
   SECTION 9 — FOOTER
   UPDATED — DISTINCT FROM PRE-FOOTER
============================================================ */

.iqraa-footer {
    position: relative;

    width: 100%;

    padding: 78px 0 0;

    overflow: hidden;

    /* DISTINCT FOOTER BACKGROUND */
    background:
        linear-gradient(
            180deg,
            #04152f 0%,
            #051a38 48%,
            #061d3e 100%
        );

    color: #ffffff;

    border-top:
        1px solid rgba(185, 135, 61, 0.28);
}


/* ============================================================
   TOP ACCENT
============================================================ */

.iqraa-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 180px;
    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #b9873d,
            #e0b96a,
            #b9873d,
            transparent
        );

    box-shadow:
        0 0 18px rgba(185, 135, 61, 0.25);
}


/* ============================================================
   SOFT BACKGROUND GLOW
============================================================ */

.iqraa-footer::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 300px;

    left: 50%;
    bottom: -220px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(25, 118, 185, 0.13),
            transparent 68%
        );

    pointer-events: none;
}


/* ============================================================
   REMOVE OLD PATTERN VISUALLY
============================================================ */

.iqraa-footer .footer-pattern {
    display: none;
}


/* ============================================================
   GLOWS
============================================================ */

.iqraa-footer .footer-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: 0.45;
}


.iqraa-footer .footer-glow-one {
    width: 380px;
    height: 380px;

    left: -260px;
    top: -170px;

    background:
        rgba(25, 118, 185, 0.13);
}


.iqraa-footer .footer-glow-two {
    width: 320px;
    height: 320px;

    right: -220px;
    bottom: 50px;

    background:
        rgba(185, 135, 61, 0.07);
}


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

.footer-container {
    position: relative;

    z-index: 5;

    width:
        min(1280px, calc(100% - 70px));

    margin: 0 auto;
}


/* ============================================================
   FOOTER GRID
============================================================ */

.footer-grid {
    display: grid;

    grid-template-columns:
        1.55fr
        0.85fr
        0.85fr
        1.15fr;

    gap: 65px;

    padding-bottom: 60px;
}


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

.footer-brand {
    max-width: 410px;
}


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

.footer-logo {
    display: inline-block;

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.footer-logo span {
    color: #c99443;
}


/* ============================================================
   BRAND LINE
============================================================ */

.footer-brand-line {
    width: 62px;

    height: 2px;

    margin:
        19px 0 21px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #b9873d,
            #e0b96a
        );
}


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

.footer-brand h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 700;
}


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

.footer-brand p {
    margin: 0;

    max-width: 410px;

    color:
        rgba(224, 237, 247, 0.78);

    font-size: 16px;

    line-height: 1.85;

    font-weight: 400;
}


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

.footer-socials {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 28px;
}


.footer-socials a {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 12px;

    color:
        rgba(255, 255, 255, 0.82);

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

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

    font-size: 15px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.footer-socials a:hover {
    transform:
        translateY(-4px);

    background:
        #1976b9;

    border-color:
        #55b8ef;

    color:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .22);
}


/* ============================================================
   FOOTER COLUMN
============================================================ */

.footer-column {
    min-width: 0;
}


.footer-column h4 {
    margin:
        3px 0 14px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}


/* ============================================================
   COLUMN GOLD LINE
============================================================ */

.footer-heading-line {
    width: 40px;

    height: 2px;

    margin-bottom: 24px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #b9873d,
            #e0b96a
        );
}


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

.footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.footer-column li {
    margin-bottom: 15px;
}


.footer-column li a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(224, 237, 247, 0.75);

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-column li a i {
    color:
        #c99443;

    font-size: 9px;

    transition:
        transform .25s ease;
}


.footer-column li a:hover {
    color:
        #ffffff;

    transform:
        translateX(5px);
}


.footer-column li a:hover i {
    transform:
        translateX(3px);

    color:
        #e0b96a;
}


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

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 19px;

    color:
        rgba(224, 237, 247, 0.76);

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;

    transition:
        color .25s ease;
}


.footer-contact-item:hover {
    color:
        #ffffff;
}


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

.footer-contact-icon {
    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display: flex;

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

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .055);

    border:
        1px solid rgba(255, 255, 255, .10);

    color:
        #7fd2f6;

    font-size: 12px;
}


/* ============================================================
   FOOTER BOTTOM
============================================================ */

.footer-bottom {
    position: relative;

    padding:
        23px 0 27px;
}


/* ============================================================
   BOTTOM LINE
============================================================ */

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

    height: 1px;

    margin-bottom: 21px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .14),
            transparent
        );
}


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

.footer-bottom-content {
    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.footer-bottom-content p {
    margin: 0;

    color:
        rgba(224, 237, 247, .58);

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;
}
.footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-logo img {
    display: block;
    width: 190px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
}


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

.about-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    padding: 120px 0 70px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(85, 184, 239, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(185, 135, 61, 0.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f4fbff 0%,
            #edf8fd 48%,
            #e3f3fb 100%
        );
}


/* =========================================================
   GEOMETRIC PATTERN
========================================================= */

.about-hero-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.075;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        );

    background-size:
        94px 162px,
        94px 162px;

    animation:
        aboutPatternMove 40s linear infinite;
}

@keyframes aboutPatternMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            94px 162px,
            -94px -162px;
    }
}


/* =========================================================
   GLOWS
========================================================= */

.about-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(50px);
}

.about-hero-glow-left {
    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -130px;

    background:
        rgba(85, 184, 239, 0.12);
}

.about-hero-glow-right {
    width: 500px;
    height: 500px;

    right: -180px;
    top: -100px;

    background:
        rgba(185, 135, 61, 0.07);
}


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

.about-hero-container {
    position: relative;

    z-index: 5;

    width: min(1280px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 0.9fr);

    align-items: center;

    gap: 60px;
}


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

.about-hero-content {
    position: relative;

    z-index: 10;

    max-width: 700px;
}


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

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

    align-items: center;

    gap: 11px;

    padding: 10px 18px;

    margin-bottom: 30px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.07);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.08em;

    backdrop-filter: blur(12px);

    opacity: 0;

    animation:
        aboutFadeUp 0.8s 0.1s ease forwards;
}

.about-badge-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.12);

    animation:
        aboutDotPulse 2s infinite;
}

@keyframes aboutDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }
}


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

.about-hero-title {
    margin: 0 0 27px;

    color: #071d43;

    font-size:
        clamp(52px, 5.3vw, 76px);

    line-height: 1.05;

    letter-spacing: -2.8px;

    font-weight: 700;

    opacity: 0;

    animation:
        aboutTitleReveal 0.95s 0.22s ease forwards;
}

.about-hero-title span {
    display: block;

    color: #b9873d;
}

@keyframes aboutTitleReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

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

    margin: 0 0 34px;

    color: #607b93;

    font-size: 18px;

    line-height: 1.8;

    font-weight: 400;

    opacity: 0;

    animation:
        aboutFadeUp 0.9s 0.4s ease forwards;
}


/* =========================================================
   CTA
========================================================= */

.about-hero-actions {
    opacity: 0;

    animation:
        aboutFadeUp 0.9s 0.55s ease forwards;
}

.about-hero-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    height: 58px;

    padding: 0 8px 0 25px;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1165a7
        );

    box-shadow:
        0 18px 38px rgba(7, 29, 67, 0.20);

    font-size: 15px;

    font-weight: 700;

    overflow: hidden;

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

.about-hero-button::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 160%;

    top: -30px;
    left: -130px;

    transform: rotate(20deg);

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

    transition:
        left 0.6s ease;
}

.about-hero-button:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 45px rgba(7, 29, 67, 0.27);
}

.about-hero-button:hover::before {
    left: 130%;
}


/* =========================================================
   BUTTON ICON
========================================================= */

.about-button-icon {
    width: 43px;
    height: 43px;

    border-radius: 50%;

    display: flex;

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

    background: #ffffff;

    color: #071d43;

    font-size: 14px;

    transition:
        transform 0.35s ease;
}

.about-hero-button:hover .about-button-icon {
    transform:
        translateX(4px);
}


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

.about-hero-visual {
    position: relative;

    height: 590px;

    display: flex;

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


/* =========================================================
   ORBITS
========================================================= */

.about-visual-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.about-visual-orbit.orbit-one {
    width: 500px;
    height: 500px;

    border:
        1px dashed rgba(25, 118, 185, 0.22);

    animation:
        aboutOrbitRotate 30s linear infinite;
}

.about-visual-orbit.orbit-two {
    width: 390px;
    height: 390px;

    border:
        1px solid rgba(25, 118, 185, 0.09);
}

@keyframes aboutOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   ORBIT DOTS
========================================================= */

.about-visual-orbit.orbit-one::before,
.about-visual-orbit.orbit-one::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #1976b9;

    box-shadow:
        0 0 0 7px rgba(25, 118, 185, 0.08);
}

.about-visual-orbit.orbit-one::before {
    left: -5px;
    top: 28%;
}

.about-visual-orbit.orbit-one::after {
    right: 5%;
    bottom: 18%;
}


/* =========================================================
   MAIN CIRCLE
========================================================= */

.about-visual-circle {
    position: relative;

    width: 385px;
    height: 385px;

    border-radius: 50%;

    display: flex;

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

    background:
        radial-gradient(
            circle at 50% 35%,
            #ffffff 0%,
            #e6f5fc 53%,
            #c9e8f7 100%
        );

    box-shadow:
        0 35px 80px rgba(15, 74, 115, 0.13),
        inset 0 0 70px rgba(255, 255, 255, 0.95);

    animation:
        aboutCircleFloat 6s ease-in-out infinite;
}

@keyframes aboutCircleFloat {

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

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


/* =========================================================
   INNER CIRCLE
========================================================= */

.about-circle-inner {
    width: 245px;
    height: 245px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #09244e,
            #0d4779
        );

    color: #ffffff;

    box-shadow:
        0 25px 55px rgba(7, 29, 67, 0.22);
}

.about-circle-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 13px;

    border-radius: 16px;

    display: flex;

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

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

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

    color: #8bd7fa;

    font-size: 23px;
}

.about-circle-inner > span {
    font-size: 12px;

    letter-spacing: 0.16em;

    font-weight: 600;
}

.about-circle-inner strong {
    margin-top: 7px;

    color: #ffffff;

    font-size: 26px;

    line-height: 1;

    font-weight: 700;
}

.about-circle-inner small {
    margin-top: 13px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 10px;

    letter-spacing: 0.08em;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.about-floating-card {
    position: absolute;

    z-index: 10;

    min-width: 205px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 16px;

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

    border:
        1px solid rgba(25, 118, 185, 0.09);

    box-shadow:
        0 18px 40px rgba(7, 29, 67, 0.10);

    backdrop-filter:
        blur(14px);

    animation:
        aboutCardFloat 5s ease-in-out infinite;
}

.about-floating-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    border-radius: 12px;

    background: #eaf7ff;

    color: #1775b7;

    font-size: 16px;
}

.about-floating-card strong {
    display: block;

    margin-bottom: 3px;

    color: #102849;

    font-size: 12px;

    font-weight: 700;
}

.about-floating-card span {
    display: block;

    color: #7892a7;

    font-size: 10px;
}

.about-card-quran {
    top: 95px;
    left: 0;
}

.about-card-madrassa {
    top: 210px;
    right: -5px;

    animation-delay: 0.8s;
}

.about-card-mahal {
    bottom: 90px;
    left: 35px;

    animation-delay: 1.5s;
}

@keyframes aboutCardFloat {

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

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


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.about-scroll {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 30px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #7892a7;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.about-scroll-line {
    width: 1px;
    height: 34px;

    overflow: hidden;

    background:
        rgba(25, 118, 185, 0.18);
}

.about-scroll-line span {
    display: block;

    width: 1px;
    height: 12px;

    background: #1976b9;

    animation:
        aboutScrollMove 1.7s infinite;
}

@keyframes aboutScrollMove {

    0% {
        transform:
            translateY(-14px);

        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(36px);

        opacity: 0;
    }
}


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

@keyframes aboutFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   SECTION 2 — OUR STORY
========================================================= */

.our-story-section {
    position: relative;

    padding: 125px 0 135px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.story-pattern {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image:
        linear-gradient(
            45deg,
            transparent 48%,
            #1976b9 49%,
            #1976b9 51%,
            transparent 52%
        ),
        linear-gradient(
            -45deg,
            transparent 48%,
            #1976b9 49%,
            #1976b9 51%,
            transparent 52%
        );

    background-size: 95px 95px;
}


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

.story-container {
    position: relative;

    z-index: 2;

    width: min(1280px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 90px;
}


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

.story-visual {
    position: relative;

    min-height: 560px;

    display: flex;

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


/* =========================================================
   MAIN STORY CARD
========================================================= */

.story-main-card {
    position: relative;

    width: 390px;
    height: 390px;

    padding: 45px;

    border-radius: 38px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #071d43 0%,
            #0b3765 60%,
            #145f8f 100%
        );

    box-shadow:
        0 35px 80px rgba(7, 29, 67, 0.18);

    transform: rotate(-3deg);

    transition:
        transform 0.5s ease;
}

.story-main-card:hover {
    transform:
        rotate(0deg)
        translateY(-8px);
}


/* Decorative circle */

.story-main-card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -110px;
    top: -100px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.12);
}

.story-main-card::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -70px;
    top: -55px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.08);
}


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

.story-card-number {
    position: relative;

    z-index: 2;

    color:
        rgba(255, 255, 255, 0.13);

    font-size: 82px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -4px;
}


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

.story-card-icon {
    position: relative;

    z-index: 2;

    width: 76px;
    height: 76px;

    display: flex;

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

    border-radius: 22px;

    color: #ffffff;

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

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

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.03);

    font-size: 30px;
}


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

.story-card-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.story-card-content span {
    color:
        rgba(255, 255, 255, 0.60);

    font-size: 13px;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.story-card-content strong {
    color: #ffffff;

    font-size: 25px;

    line-height: 1.2;
}


/* =========================================================
   GOLD ACCENT LINE
========================================================= */

.story-line {
    position: absolute;

    z-index: 5;

    width: 80px;
    height: 4px;

    left: 43px;
    bottom: 76px;

    border-radius: 20px;

    background: #b9873d;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.story-floating-card {
    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 19px;

    border-radius: 14px;

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

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 18px 40px rgba(7, 29, 67, 0.11);

    color: #123052;

    font-size: 13px;

    font-weight: 700;

    backdrop-filter: blur(12px);

    animation:
        storyFloat 5s ease-in-out infinite;
}

.story-floating-card i {
    color: #1976b9;

    font-size: 16px;
}

.story-card-top {
    top: 72px;
    right: 5px;
}

.story-card-bottom {
    bottom: 75px;
    left: 0;

    animation-delay: 1.3s;
}

@keyframes storyFloat {

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

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


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

.story-content {
    max-width: 720px;
}


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

.story-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    padding: 9px 16px;

    border-radius: 50px;

    background: #eef8fd;

    color: #1976b9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.story-badge span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b9873d;
}


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

.story-content h2 {
    margin: 0 0 30px;

    color: #071d43;

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

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;
}

.story-content h2 span {
    display: block;

    color: #1976b9;
}


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

.story-text {
    max-width: 700px;
}

.story-text p {
    margin: 0 0 21px;

    color: #607b93;

    font-size: 16px;

    line-height: 1.85;

    font-weight: 400;
}

.story-text p:last-child {
    margin-bottom: 0;

    color: #294e6d;

    font-weight: 500;
}


/* =========================================================
   SECTION 3 — OUR VISION & MISSION
========================================================= */

.vision-mission-section {
    position: relative;

    width: 100%;

    padding: 110px 0 125px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 30%,
            rgba(85, 184, 239, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(185, 135, 61, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #eef8fd 0%,
            #f7fcff 50%,
            #ffffff 100%
        );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.vision-pattern {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.5) 25%,
            rgba(27, 106, 157, 0.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.5) 75%,
            rgba(27, 106, 157, 0.5) 76%,
            transparent 77%
        );

    background-size: 100px 172px;
}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.vision-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(75px);
}

.vision-glow-one {
    left: -250px;
    top: 20%;

    background:
        rgba(85, 184, 239, 0.12);
}

.vision-glow-two {
    right: -260px;
    bottom: 5%;

    background:
        rgba(185, 135, 61, 0.09);
}


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

.vision-container {
    position: relative;

    z-index: 5;

    width:
        min(1180px, calc(100% - 48px));

    margin: 0 auto;
}


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

.vision-header {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}


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

.vision-badge {
    display: inline-flex;

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

    gap: 10px;

    padding: 10px 18px;

    margin-bottom: 24px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.12);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.06);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    backdrop-filter: blur(12px);
}

.vision-badge-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.10);

    animation:
        visionDotPulse 2s ease-in-out infinite;
}

@keyframes visionDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }
}


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

.vision-header h2 {
    margin: 0;

    color: #071d43;

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

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 700;
}

.vision-header h2 span {
    color: #b9873d;
}


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

.vision-mission-grid {
    display: grid;

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

    gap: 26px;

    align-items: stretch;
}


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

.vision-card {
    position: relative;

    min-height: 530px;

    padding: 34px 34px 30px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 252, 255, 0.94)
        );

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 22px 60px rgba(7, 29, 67, 0.075);

    display: flex;

    flex-direction: column;

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

.vision-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 32px 75px rgba(7, 29, 67, 0.12);

    border-color:
        rgba(25, 118, 185, 0.18);
}


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

.vision-card::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

    background:
        rgba(85, 184, 239, 0.13);
}

.mission-card::before {
    background:
        rgba(185, 135, 61, 0.12);
}


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

.vision-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 38px;
}


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

.vision-icon {
    width: 66px;
    height: 66px;

    display: flex;

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

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #dff2fc
        );

    color: #1976b9;

    font-size: 25px;

    box-shadow:
        0 12px 28px rgba(25, 118, 185, 0.09);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.vision-card:hover .vision-icon {
    transform:
        rotate(-5deg)
        scale(1.07);
}

.mission-card .vision-icon {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f8ecd7
        );

    color: #a87832;
}


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

.vision-number {
    color:
        rgba(7, 29, 67, 0.10);

    font-size: 48px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


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

.vision-card-content {
    position: relative;

    z-index: 2;
}


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

.vision-label {
    display: block;

    margin-bottom: 11px;

    color: #1976b9;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.mission-card .vision-label {
    color: #a87832;
}


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

.vision-card-content h3 {
    margin: 0 0 20px;

    color: #071d43;

    font-size: 30px;

    line-height: 1.18;

    letter-spacing: -0.8px;

    font-weight: 700;
}

.vision-card-content h3 span {
    display: block;

    color: #1976b9;
}

.mission-card .vision-card-content h3 span {
    color: #b9873d;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.vision-card-content p {
    margin: 0 0 18px;

    color: #66829c;

    font-size: 17px;

    line-height: 1.78;

    font-weight: 400;
}

.vision-card-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.vision-card-line {
    width: 55px;
    height: 3px;

    margin-top: auto;

    border-radius: 20px;

    background: #55b8ef;
}

.mission-card .vision-card-line {
    background: #b9873d;
}


/* =========================================================
   SECTION 4 — OUR VALUES
========================================================= */

.values-section {
    position: relative;

    width: 100%;

    padding: 110px 0 120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(85, 184, 239, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(185, 135, 61, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f3fafd 48%,
            #eaf6fc 100%
        );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.values-pattern {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image:
        linear-gradient(
            45deg,
            transparent 47%,
            rgba(25, 118, 185, 0.55) 48%,
            rgba(25, 118, 185, 0.55) 50%,
            transparent 51%
        ),
        linear-gradient(
            -45deg,
            transparent 47%,
            rgba(25, 118, 185, 0.55) 48%,
            rgba(25, 118, 185, 0.55) 50%,
            transparent 51%
        );

    background-size: 90px 90px;
}


/* =========================================================
   GLOWS
========================================================= */

.values-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(75px);
}

.values-glow-one {
    left: -250px;
    top: 25%;

    background:
        rgba(85, 184, 239, 0.12);
}

.values-glow-two {
    right: -250px;
    bottom: 5%;

    background:
        rgba(185, 135, 61, 0.09);
}


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

.values-container {
    position: relative;

    z-index: 5;

    width:
        min(1180px, calc(100% - 48px));

    margin: 0 auto;
}


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

.values-header {
    max-width: 800px;

    margin: 0 auto 60px;

    text-align: center;
}


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

.values-badge {
    display: inline-flex;

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

    gap: 10px;

    padding: 10px 18px;

    margin-bottom: 24px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.12);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.06);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    backdrop-filter: blur(12px);
}

.values-badge-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.10);

    animation:
        valuesDotPulse 2s ease-in-out infinite;
}

@keyframes valuesDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }
}


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

.values-header h2 {
    margin: 0;

    color: #071d43;

    font-size:
        clamp(45px, 5vw, 68px);

    line-height: 1.06;

    letter-spacing: -2.3px;

    font-weight: 700;
}

.values-header h2 span {
    color: #1976b9;
}


/* =========================================================
   VALUES GRID
========================================================= */

.values-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


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

.value-card {
    position: relative;

    min-height: 330px;

    padding: 27px 27px 25px;

    border-radius: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 252, 255, 0.94)
        );

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 18px 48px rgba(7, 29, 67, 0.065);

    display: flex;

    flex-direction: column;

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

.value-card::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background:
        rgba(85, 184, 239, 0.11);

    filter: blur(8px);

    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 28px 65px rgba(7, 29, 67, 0.12);

    border-color:
        rgba(25, 118, 185, 0.18);
}


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

.value-card-gold {
    border-color:
        rgba(185, 135, 61, 0.14);
}

.value-card-gold::before {
    background:
        rgba(185, 135, 61, 0.13);
}

.value-card-gold:hover {
    border-color:
        rgba(185, 135, 61, 0.28);
}


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

.value-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 38px;
}


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

.value-number {
    color:
        rgba(7, 29, 67, 0.10);

    font-size: 44px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


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

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

    display: flex;

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

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #dff2fc
        );

    color: #1976b9;

    font-size: 22px;

    box-shadow:
        0 10px 25px rgba(25, 118, 185, 0.09);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.value-card:hover .value-icon {
    transform:
        rotate(-6deg)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #1976b9,
            #55b8ef
        );

    color: #ffffff;
}

.value-card-gold .value-icon {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f8ecd7
        );

    color: #a87832;
}

.value-card-gold:hover .value-icon {
    background:
        linear-gradient(
            145deg,
            #a87832,
            #c99b50
        );

    color: #ffffff;
}


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

.value-content {
    position: relative;

    z-index: 2;
}


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

.value-label {
    display: block;

    margin-bottom: 9px;

    color: #1976b9;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.value-card-gold .value-label {
    color: #a87832;
}


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

.value-content h3 {
    margin: 0 0 15px;

    color: #071d43;

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -0.5px;

    font-weight: 700;
}


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

.value-content p {
    margin: 0;

    color: #66829c;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   ACCENT
========================================================= */

.value-accent {
    width: 52px;
    height: 3px;

    margin-top: auto;

    border-radius: 20px;

    background: #55b8ef;
}

.value-card-gold .value-accent {
    background: #b9873d;
}


/* =========================================================
   CTA
========================================================= */

.values-cta {
    display: flex;

    justify-content: center;

    margin-top: 48px;
}

.values-cta-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    min-height: 56px;

    padding: 0 10px 0 24px;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1165a7
        );

    box-shadow:
        0 18px 38px rgba(7, 29, 67, 0.20);

    font-size: 15px;

    font-weight: 700;

    overflow: hidden;

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

.values-cta-button::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 160%;

    left: -120px;
    top: -30%;

    transform: rotate(20deg);

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

    transition:
        left 0.6s ease;
}

.values-cta-button:hover {
    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 24px 48px rgba(7, 29, 67, 0.26);
}

.values-cta-button:hover::before {
    left: 130%;
}

.values-cta-button i {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    color: #071d43;

    background: #ffffff;

    font-size: 13px;

    transition:
        transform 0.3s ease;
}

.values-cta-button:hover i {
    transform: translateX(4px);
}


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

.service-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    padding: 120px 0 70px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(85, 184, 239, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(185, 135, 61, 0.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f4fbff 0%,
            #edf8fd 48%,
            #e3f3fb 100%
        );
}


/* =========================================================
   GEOMETRIC PATTERN
========================================================= */

.service-hero .about-hero-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.075;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        );

    background-size:
        94px 162px,
        94px 162px;

    animation:
        servicePatternMove 40s linear infinite;
}


@keyframes servicePatternMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            94px 162px,
            -94px -162px;
    }

}


/* =========================================================
   GLOWS
========================================================= */

.service-hero .about-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(50px);
}


.service-hero .about-hero-glow-left {

    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -130px;

    background:
        rgba(85, 184, 239, 0.12);
}


.service-hero .about-hero-glow-right {

    width: 500px;
    height: 500px;

    right: -180px;
    top: -100px;

    background:
        rgba(185, 135, 61, 0.07);
}


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

.service-hero .about-hero-container {

    position: relative;

    z-index: 5;

    width:
        min(1280px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 0.9fr);

    align-items: center;

    gap: 60px;
}


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

.service-hero .about-hero-content {

    position: relative;

    z-index: 10;

    max-width: 700px;
}


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

.service-hero .about-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 10px 18px;

    margin-bottom: 30px;

    border-radius: 50px;

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

    border:
        1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 10px 30px rgba(7, 29, 67, 0.07);

    color: #1768a6;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.08em;

    backdrop-filter: blur(12px);

    opacity: 0;

    animation:
        serviceFadeUp 0.8s 0.1s ease forwards;
}


.service-hero .about-badge-dot {

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #b9873d;

    box-shadow:
        0 0 0 5px rgba(185, 135, 61, 0.12);

    animation:
        serviceDotPulse 2s infinite;
}


@keyframes serviceDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(185, 135, 61, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(185, 135, 61, 0.02);
    }

}


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

.service-hero .about-hero-title {

    margin: 0 0 27px;

    color: #071d43;

    font-size:
        clamp(52px, 5.3vw, 76px);

    line-height: 1.05;

    letter-spacing: -2.8px;

    font-weight: 700;

    opacity: 0;

    animation:
        serviceTitleReveal 0.95s 0.22s ease forwards;
}


.service-hero .about-hero-title span {

    display: block;

    color: #b9873d;
}


@keyframes serviceTitleReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

.service-hero .about-hero-description {

    max-width: 620px;

    margin: 0 0 34px;

    color: #607b93;

    font-size: 18px;

    line-height: 1.8;

    font-weight: 400;

    opacity: 0;

    animation:
        serviceFadeUp 0.9s 0.4s ease forwards;
}


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

.service-hero .about-hero-visual {

    position: relative;

    height: 590px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   ORBITS
========================================================= */

.service-hero .about-visual-orbit {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.service-hero .about-visual-orbit.orbit-one {

    width: 500px;
    height: 500px;

    border:
        1px dashed rgba(25, 118, 185, 0.22);

    animation:
        serviceOrbitRotate 30s linear infinite;
}


.service-hero .about-visual-orbit.orbit-two {

    width: 390px;
    height: 390px;

    border:
        1px solid rgba(25, 118, 185, 0.09);
}


@keyframes serviceOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ORBIT DOTS
========================================================= */

.service-hero
.about-visual-orbit.orbit-one::before,
.service-hero
.about-visual-orbit.orbit-one::after {

    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #1976b9;

    box-shadow:
        0 0 0 7px rgba(25, 118, 185, 0.08);
}


.service-hero
.about-visual-orbit.orbit-one::before {

    left: -5px;
    top: 28%;
}


.service-hero
.about-visual-orbit.orbit-one::after {

    right: 5%;
    bottom: 18%;
}


/* =========================================================
   MAIN CIRCLE
========================================================= */

.service-hero .about-visual-circle {

    position: relative;

    width: 385px;
    height: 385px;

    border-radius: 50%;

    display: flex;

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

    background:
        radial-gradient(
            circle at 50% 35%,
            #ffffff 0%,
            #e6f5fc 53%,
            #c9e8f7 100%
        );

    box-shadow:
        0 35px 80px rgba(15, 74, 115, 0.13),
        inset 0 0 70px rgba(255, 255, 255, 0.95);

    animation:
        serviceCircleFloat 6s ease-in-out infinite;
}


@keyframes serviceCircleFloat {

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

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

}


/* =========================================================
   INNER CIRCLE
========================================================= */

.service-hero .about-circle-inner {

    width: 245px;
    height: 245px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #09244e,
            #0d4779
        );

    color: #ffffff;

    box-shadow:
        0 25px 55px rgba(7, 29, 67, 0.22);
}


.service-hero .about-circle-icon {

    width: 58px;
    height: 58px;

    margin-bottom: 13px;

    border-radius: 16px;

    display: flex;

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

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

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

    color: #8bd7fa;

    font-size: 23px;
}


.service-hero .about-circle-inner > span {

    font-size: 12px;

    letter-spacing: 0.16em;

    font-weight: 600;
}


.service-hero .about-circle-inner strong {

    margin-top: 7px;

    color: #ffffff;

    font-size: 26px;

    line-height: 1;

    font-weight: 700;
}


.service-hero .about-circle-inner small {

    margin-top: 13px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 10px;

    letter-spacing: 0.08em;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.service-hero .about-floating-card {

    position: absolute;

    z-index: 10;

    min-width: 205px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 16px;

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

    border:
        1px solid rgba(25, 118, 185, 0.09);

    box-shadow:
        0 18px 40px rgba(7, 29, 67, 0.10);

    backdrop-filter:
        blur(14px);

    animation:
        serviceCardFloat 5s ease-in-out infinite;
}


.service-hero .about-floating-icon {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    border-radius: 12px;

    background: #eaf7ff;

    color: #1775b7;

    font-size: 16px;
}


.service-hero .about-floating-card strong {

    display: block;

    margin-bottom: 3px;

    color: #102849;

    font-size: 12px;

    font-weight: 700;
}


.service-hero .about-floating-card span {

    display: block;

    color: #7892a7;

    font-size: 10px;
}


/* Card positions — same as About */

.service-hero .about-card-quran {

    top: 95px;
    left: 0;
}


.service-hero .about-card-madrassa {

    top: 80px;
    right: -5px;

    animation-delay: 0.8s;
}


.service-hero .about-card-mahal {

    bottom: 90px;
    left: 35px;

    animation-delay: 1.5s;
}


@keyframes serviceCardFloat {

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

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

}


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

.service-hero .scroll-explore {

    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 30px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #7892a7;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.service-hero .mouse-icon {

    width: 18px;
    height: 30px;

    border:
        1px solid rgba(25,118,185,0.35);

    border-radius: 12px;

    display: flex;

    justify-content: center;

    padding-top: 6px;
}


.service-hero .mouse-dot {

    width: 3px;
    height: 7px;

    border-radius: 10px;

    background: #1976b9;

    animation:
        serviceScrollMove 1.7s infinite;
}


@keyframes serviceScrollMove {

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

    70% {
        transform: translateY(8px);
        opacity: 0.2;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }

}


/* =========================================================
   FADE
========================================================= */

@keyframes serviceFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

/* =========================================================
   SERVICE 04 — PRIVILEGE CARD
========================================================= */

.about-card-privilege {

    position: absolute;

    width: 225px;
    min-width: 225px;

    padding: 14px 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.97),
            rgba(250,253,255,0.91)
        );

    border:
        1px solid rgba(185,135,61,0.20);

    box-shadow:
        0 20px 45px rgba(7,29,67,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95);

    backdrop-filter: blur(16px);

    bottom: 215px;
    right: -25px;

    overflow: hidden;

    animation:
        aboutCardFloat 5s ease-in-out infinite;

    animation-delay: 2.1s;
}


/* Gold accent line */

.about-card-privilege::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #d4a84c,
            #b9873d
        );
}


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

.about-card-privilege .privilege-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #fff8e8,
            #f8ecd1
        );

    color: #b9873d;

    border:
        1px solid rgba(185,135,61,0.16);

    font-size: 17px;

    box-shadow:
        0 7px 18px rgba(185,135,61,0.10);
}


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

.privilege-card-content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.privilege-label {

    display: block;

    margin-bottom: 2px;

    color: #b9873d;

    font-size: 7px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.about-card-privilege strong {

    display: block;

    margin: 3px 0 2px;

    color: #102849;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 700;
}


.about-card-privilege small {

    display: block;

    color: #7892a7;

    font-size: 8px;

    line-height: 1.3;
}


/* =========================================================
   PREMIUM BADGE
========================================================= */

.privilege-card-badge {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 23px;
    height: 23px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(185,135,61,0.10);

    color: #b9873d;

    font-size: 9px;
}


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

.about-card-privilege:hover {

    border-color:
        rgba(185,135,61,0.35);

    box-shadow:
        0 25px 55px rgba(7,29,67,0.16),
        0 0 25px rgba(185,135,61,0.08);

}


/* =========================================================
   SERVICE 05 — INTERNSHIP & CAREERS
========================================================= */

.about-card-careers {

    position: absolute;

    width: 225px;
    min-width: 225px;

    padding: 14px 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.97),
            rgba(244,251,255,0.94)
        );

    border:
        1px solid rgba(25,118,185,0.13);

    box-shadow:
        0 20px 45px rgba(7,29,67,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95);

    backdrop-filter: blur(16px);

    right: 85px;
    bottom: 35px;

    overflow: hidden;

    animation:
        aboutCardFloat 5s ease-in-out infinite;

    animation-delay: 2.8s;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Blue accent */

.about-card-careers::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #55b8ef,
            #1976b9
        );
}


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

.about-card-careers .careers-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #eaf7ff,
            #d9effb
        );

    color: #1976b9;

    border:
        1px solid rgba(25,118,185,0.12);

    font-size: 17px;

    box-shadow:
        0 7px 18px rgba(25,118,185,0.10);
}


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

.careers-card-content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.careers-label {

    display: block;

    margin-bottom: 2px;

    color: #1976b9;

    font-size: 7px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.15em;
}


.about-card-careers strong {

    display: block;

    margin: 3px 0 2px;

    color: #102849;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 700;
}


.about-card-careers small {

    display: block;

    color: #7892a7;

    font-size: 8px;

    line-height: 1.3;
}


/* =========================================================
   ARROW BADGE
========================================================= */

.careers-card-arrow {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 24px;
    height: 24px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(25,118,185,0.09);

    color: #1976b9;

    font-size: 9px;

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


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

.about-card-careers:hover {

    border-color:
        rgba(25,118,185,0.28);

    box-shadow:
        0 25px 55px rgba(7,29,67,0.16),
        0 0 25px rgba(25,118,185,0.07);
}


.about-card-careers:hover
.careers-card-arrow {

    transform:
        translate(2px, -2px);

    background:
        #1976b9;

    color: #ffffff;
}


/* =========================================================
   SERVICE 01 — QUR'AN AI LEARNING
========================================================= */

.service-detail-section {
    position: relative;
    width: 100%;
    padding: 120px 0;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fcff 50%,
            #edf8fd 100%
        );
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.service-detail-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -180px;
    right: -150px;

    border-radius: 50%;

    background:
        rgba(85, 184, 239, 0.10);

    filter: blur(80px);

    pointer-events: none;
}


.service-detail-section::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -180px;
    left: -160px;

    border-radius: 50%;

    background:
        rgba(185, 135, 61, 0.055);

    filter: blur(80px);

    pointer-events: none;
}


/* =========================================================
   SUBTLE PATTERN
========================================================= */
.service-detail-section .service-detail-pattern {
    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: 0.075;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27, 106, 157, 0.45) 25%,
            rgba(27, 106, 157, 0.45) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27, 106, 157, 0.45) 75%,
            rgba(27, 106, 157, 0.45) 76%,
            transparent 77%
        );

    background-size:
        90px 155px,
        90px 155px;

    animation:
        servicePatternMove 40s linear infinite;
}


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

.service-detail-container {
    position: relative;
    z-index: 2;

    width:
        min(1240px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(480px, 0.9fr);

    align-items: center;

    gap: 75px;
}


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

.service-detail-content {
    width: 100%;
    max-width: 650px;
}


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

.service-detail-badge {
    display: inline-flex;

    align-items: center;

    margin-bottom: 27px;

    padding: 10px 18px;

    border-radius: 50px;

    color: #1768a6;

    background:
        rgba(234, 247, 255, 0.90);

    border:
        1px solid rgba(25, 118, 185, 0.12);

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

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter: blur(10px);
}


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

.service-detail-content h3 {
    margin: 0 0 25px;

    color: #071d43;

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

    line-height: 1.08;

    letter-spacing: -2.2px;

    font-weight: 700;
}


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

.service-detail-content > p {
    max-width: 620px;

    margin: 0 0 35px;

    color: #607b93;

    font-size: 18px;

    line-height: 1.8;

    font-weight: 400;
}


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

.service-features {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 32px;
}


.service-feature {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 12px 14px;

    border-radius: 13px;

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

    border:
        1px solid rgba(25, 118, 185, 0.075);

    box-shadow:
        0 5px 18px rgba(7, 29, 67, 0.025);

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


.service-feature:hover {
    transform:
        translateX(5px);

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

    border-color:
        rgba(25, 118, 185, 0.14);

    box-shadow:
        0 12px 30px rgba(7, 29, 67, 0.07);
}


/* =========================================================
   FEATURE CHECK ICON
========================================================= */

.service-feature > i {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

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

    margin-top: 1px;

    border-radius: 50%;

    color: #1976b9;

    background:
        #eaf7ff;

    font-size: 15px;
}


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

.service-feature span {
    padding-top: 2px;

    color: #49677f;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   WHO IT'S FOR
========================================================= */

.service-audience {
    padding: 20px 22px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #09244e,
            #0d4779
        );

    box-shadow:
        0 20px 45px rgba(7, 29, 67, 0.13);
}


.service-audience strong {
    display: block;

    margin-bottom: 8px;

    color: #8bd7fa;

    font-size: 15px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.service-audience p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 15px;

    line-height: 1.7;
}


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

.service-detail-visual {
    position: relative;

    width: 100%;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


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

.quran-ai-image {
    position: relative;
    z-index: 3;

    display: block;

    width: 70%;

    max-width: 560px;

    height: auto;

    object-fit: contain;

    border-radius: 24px;

    box-shadow:
        0 30px 70px rgba(7, 29, 67, 0.16);

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


.quran-ai-image:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 38px 85px rgba(7, 29, 67, 0.20);
}


/* =========================================================
   IMAGE DECORATIVE FRAME
========================================================= */

.service-detail-visual::before {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border:
        1px dashed rgba(25, 118, 185, 0.18);

    animation:
        quranServiceRotate 30s linear infinite;
}


.service-detail-visual::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border:
        1px solid rgba(25, 118, 185, 0.07);
}


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

@keyframes quranServiceRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   ORBIT DOTS
========================================================= */

.service-detail-visual .service-orbit-dot {
    position: absolute;

    z-index: 4;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #55b8ef;

    box-shadow:
        0 0 0 7px rgba(85, 184, 239, 0.10);
}


/* =========================================================
   BEYOND DIGITAL
========================================================= */

.beyond-digital-section {
    position: relative;

    padding: 105px 0 90px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #0c426d
        );

    color: #ffffff;
}


.beyond-digital-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.07;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            #ffffff 25%,
            #ffffff 26%,
            transparent 27%,
            transparent 74%,
            #ffffff 75%,
            #ffffff 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            #ffffff 25%,
            #ffffff 26%,
            transparent 27%,
            transparent 74%,
            #ffffff 75%,
            #ffffff 76%,
            transparent 77%
        );

    background-size:
        90px 155px,
        90px 155px;
}


.beyond-digital-container {
    position: relative;
    z-index: 2;

    width:
        min(850px, calc(100% - 40px));

    margin: 0 auto;
}


.beyond-digital-badge {
    display: inline-block;

    margin-bottom: 20px;

    padding: 8px 17px;

    border: 1px solid rgba(141, 215, 250, 0.25);

    border-radius: 50px;

    color: #8dd7f8;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.beyond-digital-container h2 {
    margin: 0 0 18px;

    font-size:
        clamp(38px, 5vw, 60px);

    line-height: 1.1;

    letter-spacing: -1.8px;

    font-weight: 700;
}


.beyond-digital-container > p {
    max-width: 680px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.68);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   WHY THESE WORK BETTER TOGETHER — PREFOOTER
========================================================= */

.why-together-prefooter {
    position: relative;
}


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

.prefooter-badge {
    display: inline-flex;

    align-items: center;

    margin-bottom: 24px;

    padding: 8px 16px;

    border-radius: 50px;

    color: #8dd7f8;

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

    border:
        1px solid rgba(141, 215, 248, 0.20);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


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

.why-together-prefooter .prefooter-content h2 {
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;
}


.why-together-prefooter .prefooter-content h2 span {
    display: block;
}


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

.why-together-prefooter .prefooter-content > p {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.8;
}


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

.prefooter-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;
}


/* =========================================================
   TALK TO US
========================================================= */

.prefooter-talk-btn {

    min-height: 48px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #ffffff;

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

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

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        all 0.3s ease;
}


.prefooter-talk-btn:hover {

    color: #ffffff;

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

    border-color:
        rgba(255, 255, 255, 0.35);

    transform:
        translateY(-3px);
}


/* =========================================================
   PRIVILEGE CARD HERO
   Uses the same About Hero structure
========================================================= */

.privilege-card-hero {
    position: relative;
}


/* =========================================================
   PRICE BANNER
========================================================= */

.privilege-price-banner {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-top: 8px;

    padding: 14px 20px;

    border-radius: 15px;

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

    border: 1px solid rgba(25, 118, 185, 0.13);

    box-shadow:
        0 12px 35px rgba(20, 75, 110, 0.08);

    backdrop-filter: blur(12px);
}

.privilege-price-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1976b9
        );

    font-size: 17px;

    box-shadow:
        0 8px 20px rgba(7, 29, 67, 0.15);
}

.privilege-price-content {
    display: flex;
    align-items: baseline;
    gap: 12px;

    flex-wrap: wrap;
}

.privilege-price-content span {
    color: #496b85;

    font-size: 14px;
    font-weight: 600;
}

.privilege-price-content strong {
    color: #071d43;

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

    white-space: nowrap;
}


/* =========================================================
   PRIVILEGE CARD VISUAL
========================================================= */

.privilege-card-visual {
    position: relative;
}


/* =========================================================
   CARD IMAGE WRAPPER
========================================================= */

.privilege-card-image-wrapper {
    position: relative;

    width: 100%;

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

    z-index: 5;
}


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

.privilege-card-image {
    position: relative;

    width: 500px;
    max-width: 92%;

    height: auto;

    display: block;

    object-fit: contain;

    z-index: 5;

    filter:
        drop-shadow(
            0 28px 35px rgba(7, 29, 67, 0.20)
        );

    animation:
        privilegeCardFloat
        6s
        ease-in-out
        infinite;
}

@keyframes privilegeCardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(-3deg);
    }

}


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

.privilege-card-image-glow {
    position: absolute;

    width: 430px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(71, 177, 226, 0.25),
            transparent 70%
        );

    filter: blur(25px);

    z-index: 1;

    animation:
        privilegeCardGlow
        5s
        ease-in-out
        infinite;
}

@keyframes privilegeCardGlow {

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

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }

}


/* =========================================================
   SECTION 2 — WHAT IT IS
========================================================= */

.privilege-what-section {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: #ffffff;
}


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

.privilege-what-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            #1976b9 25%,
            #1976b9 26%,
            transparent 27%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            #1976b9 25%,
            #1976b9 26%,
            transparent 27%
        );

    background-size: 90px 155px;
}

.privilege-what-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}

.privilege-what-glow-one {
    width: 400px;
    height: 400px;

    left: -220px;
    top: 10%;

    background:
        radial-gradient(
            circle,
            rgba(91, 190, 238, 0.08),
            transparent 70%
        );
}

.privilege-what-glow-two {
    width: 500px;
    height: 500px;

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

    background:
        radial-gradient(
            circle,
            rgba(91, 190, 238, 0.10),
            transparent 70%
        );
}


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

.privilege-what-container {
    width: min(1160px, calc(100% - 48px));

    max-width: 1160px;

    margin: 0 auto;

    position: relative;

    z-index: 5;
}


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

.privilege-what-grid {
    display: grid;

    grid-template-columns: 1fr 0.95fr;

    align-items: center;

    gap: 90px;
}


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

.privilege-what-content {
    max-width: 620px;
}


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

.privilege-what-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    padding: 9px 16px;

    border-radius: 50px;

    background: #eef8fd;

    border: 1px solid rgba(25, 118, 185, 0.10);

    color: #1976b9;

    font-size: 13px;

    font-weight: 600;
}

.privilege-what-badge-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #52b9ed;

    box-shadow:
        0 0 0 5px rgba(82, 185, 237, 0.10);
}


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

.privilege-what-title {
    margin: 0 0 20px;

    color: #071d43;

    font-size: clamp(42px, 4.5vw, 62px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 700;
}

.privilege-what-title span {
    display: block;

    color: #1976b9;
}


/* =========================================================
   SUBHEAD
========================================================= */

.privilege-what-subhead {
    margin: 0 0 28px;

    color: #496b85;

    font-size: 18px;

    line-height: 1.6;

    font-weight: 600;
}


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

.privilege-what-text {
    max-width: 590px;
}

.privilege-what-text p {
    margin: 0 0 21px;

    color: #6a8297;

    font-size: 18px;

    line-height: 1.85;
}

.privilege-what-text p:last-child {
    margin-bottom: 0;
}


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

.privilege-what-visual {
    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.privilege-ecosystem-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(89, 187, 232, 0.18),
            rgba(89, 187, 232, 0.05) 45%,
            transparent 72%
        );

    filter: blur(10px);
}


/* =========================================================
   MAIN ECOSYSTEM CARD
========================================================= */

.privilege-ecosystem-card {
    width: 390px;
    height: 455px;

    position: relative;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #071d43 0%,
            #0b3d70 50%,
            #1976b9 100%
        );

    box-shadow:
        0 35px 70px rgba(7, 29, 67, 0.20);

    transform: rotate(3deg);

    z-index: 5;

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

.privilege-ecosystem-card:hover {
    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 45px 85px rgba(7, 29, 67, 0.25);
}

.privilege-ecosystem-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -130px;
    bottom: -140px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.025),
        0 0 0 90px rgba(255, 255, 255, 0.015);
}


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

.ecosystem-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.ecosystem-card-top > span {
    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 2px;
}

.ecosystem-card-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 12px;

    color: #ffffff;

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

    border: 1px solid rgba(255, 255, 255, 0.13);
}


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

.ecosystem-card-center {
    position: relative;

    z-index: 2;

    text-align: center;
}

.ecosystem-main-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 22px;

    display: flex;

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

    border-radius: 22px;

    color: #ffffff;

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

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

    font-size: 30px;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.10);
}

.ecosystem-card-center strong {
    display: block;

    color: #ffffff;

    font-size: 30px;

    font-weight: 700;
}

.ecosystem-card-center > span {
    display: block;

    margin-top: 5px;

    color: #8ed5f5;

    font-size: 15px;

    font-weight: 500;
}


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

.ecosystem-card-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    padding-top: 18px;

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

.ecosystem-card-bottom span {
    color: rgba(255, 255, 255, 0.70);

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ecosystem-floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 15px;

    min-width: 190px;

    border-radius: 14px;

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

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 15px 35px rgba(15, 67, 99, 0.11);

    backdrop-filter: blur(12px);

    z-index: 10;
}

.ecosystem-floating-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 11px;

    color: #1976b9;

    background: #eaf7fd;

    font-size: 14px;
}

.ecosystem-floating-card strong {
    display: block;

    color: #173d5b;

    font-size: 12px;

    font-weight: 700;
}

.ecosystem-floating-card span {
    display: block;

    margin-top: 2px;

    color: #7890a2;

    font-size: 10px;
}


/* =========================================================
   FLOATING POSITIONS
========================================================= */

.ecosystem-card-rewards {
    left: -20px;
    top: 72px;

    animation:
        ecosystemFloatOne
        5s
        ease-in-out
        infinite;
}

.ecosystem-card-quran {
    right: -35px;
    top: 185px;

    animation:
        ecosystemFloatTwo
        5.5s
        ease-in-out
        infinite;
}

.ecosystem-card-community {
    left: -5px;
    bottom: 60px;

    animation:
        ecosystemFloatThree
        6s
        ease-in-out
        infinite;
}

@keyframes ecosystemFloatOne {

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

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

}

@keyframes ecosystemFloatTwo {

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

    50% {
        transform: translateY(9px);
    }

}

@keyframes ecosystemFloatThree {

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

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

}


/* =========================================================
   SECTION 4 — HOW IT WORKS
========================================================= */

.privilege-how-section {
    position: relative;

    padding: 115px 0 125px;

    overflow: hidden;

    background: #ffffff;
}


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

.privilege-how-section .values-header {
    margin-bottom: 62px;
}

.privilege-how-subhead {
    margin: 20px auto 0;

    max-width: 620px;

    color: #6b8396;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   STEPS GRID
========================================================= */

.privilege-how-grid {
    position: relative;

    display: grid;

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

    gap: 20px;

    align-items: stretch;
}


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

.privilege-step-card {
    position: relative;

    min-height: 320px;

    padding: 27px 25px 29px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 18px;

    background: #f7fbfd;

    border: 1px solid #e5eff4;

    box-shadow:
        0 10px 30px rgba(23, 65, 90, 0.045);

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

.privilege-step-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(25, 118, 185, 0.18);

    box-shadow:
        0 22px 45px rgba(23, 65, 90, 0.10);
}


/* =========================================================
   STEP TOP
========================================================= */

.privilege-step-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.privilege-step-number {
    color: #b4cad8;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   STEP ICON
========================================================= */

.privilege-step-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 14px;

    color: #1976b9;

    background: #eaf7fd;

    font-size: 18px;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.privilege-step-card:hover
.privilege-step-icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d6d,
            #1976b9
        );

    transform: translateY(-2px);
}


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

.privilege-step-content {
    margin-top: 28px;
}

.privilege-step-label {
    display: block;

    margin-bottom: 7px;

    color: #1976b9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.privilege-step-content h3 {
    margin: 0 0 13px;

    color: #173d5b;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 700;
}

.privilege-step-content p {
    margin: 0;

    color: #686f74;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   ACCENT
========================================================= */

.privilege-step-accent {
    width: 38px;
    height: 3px;

    margin-top: 24px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #1976b9,
            #62c5ed
        );

    transition:
        width 0.35s ease;
}

.privilege-step-card:hover
.privilege-step-accent {
    width: 65px;
}


/* =========================================================
   CONNECTORS
========================================================= */

.privilege-step-connector {
    position: absolute;

    top: 50%;

    width: 38px;
    height: 38px;

    margin-top: -19px;

    display: flex;

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

    border-radius: 50%;

    color: #1976b9;

    background: #ffffff;

    border: 1px solid #dcecf3;

    box-shadow:
        0 8px 20px rgba(20, 75, 110, 0.08);

    z-index: 10;

    font-size: 12px;
}

.connector-one {
    left: calc(25% - 19px);
}

.connector-two {
    left: calc(50% - 19px);
}

.connector-three {
    left: calc(75% - 19px);
}


/* =========================================================
   FINAL STEP
========================================================= */

.privilege-step-final {
    background:
        linear-gradient(
            145deg,
            #f4fbfe,
            #eaf7fc
        );
}


/* =========================================================
   SECTION 5 — PRICING
========================================================= */

.privilege-pricing-section {
    position: relative;

    padding: 70px 0 130px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f4fbfe 0%,
            #edf8fc 50%,
            #f8fcfe 100%
        );
}


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

.privilege-pricing-section .values-header {
    max-width: 780px;

    margin-bottom: 58px;
}

.privilege-pricing-section .values-header p {
    margin-top: 20px;
}


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

.privilege-pricing-card {
    position: relative;

    width: 100%;

    max-width: 960px;

    min-height: 390px;

    margin: 0 auto;

    padding: 48px 52px;

    display: grid;

    grid-template-columns: 0.9fr 1px 1.1fr;

    align-items: center;

    gap: 50px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #071d43 0%,
            #0c3967 50%,
            #1976b9 100%
        );

    box-shadow:
        0 35px 75px rgba(7, 29, 67, 0.18);
}


/* Decorative circle */

.privilege-pricing-card::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -220px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.025),
        0 0 0 90px rgba(255, 255, 255, 0.018),
        0 0 0 135px rgba(255, 255, 255, 0.012);

    pointer-events: none;
}


/* =========================================================
   LEFT PRICING
========================================================= */

.privilege-pricing-main {
    position: relative;

    z-index: 2;
}

.privilege-pricing-label {
    margin-bottom: 14px;

    color: #8bd6f6;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   PRICE
========================================================= */

.privilege-pricing-price {
    display: flex;

    align-items: flex-start;

    color: #ffffff;
}

.privilege-currency {
    margin-top: 12px;

    color: #8ed7f6;

    font-size: 30px;

    font-weight: 600;
}

.privilege-pricing-price strong {
    font-size: 78px;

    line-height: 0.95;

    letter-spacing: -3px;

    font-weight: 800;
}

.privilege-pricing-duration {
    margin-top: 10px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 15px;

    font-weight: 500;
}


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

.privilege-pricing-description {
    max-width: 390px;

    margin: 25px 0 27px;

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

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.privilege-pricing-button {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 13px 18px 13px 21px;

    border-radius: 50px;

    color: #071d43;

    background: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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

.privilege-pricing-button i {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background: #1976b9;

    font-size: 12px;

    transition:
        transform 0.35s ease;
}

.privilege-pricing-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18);
}

.privilege-pricing-button:hover i {
    transform: translateX(3px);
}


/* =========================================================
   DIVIDER
========================================================= */

.privilege-pricing-divider {
    width: 1px;

    height: 235px;

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

    position: relative;

    z-index: 2;
}


/* =========================================================
   INCLUDES
========================================================= */

.privilege-pricing-includes {
    position: relative;

    z-index: 2;

    padding-left: 5px;
}

.privilege-includes-heading {
    margin-bottom: 24px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;
}


/* =========================================================
   INCLUDE ITEM
========================================================= */

.privilege-include-item {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 19px;
}

.privilege-include-item:last-child {
    margin-bottom: 0;
}

.privilege-include-icon {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    margin-top: 1px;

    display: flex;

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

    color: #78d1f4;

    font-size: 17px;
}

.privilege-include-item p {
    max-width: 450px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}


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

.career-hero {
    position: relative;
}


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

.career-hero-visual {
    position: relative;
}


/* =========================================================
   MAIN CIRCLE
========================================================= */

.career-main-circle {
    width: 410px;
    height: 410px;

    position: relative;

    display: flex;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #eef9fd 42%,
            #d9f0fa 100%
        );

    border:
        1px solid rgba(25, 118, 185, 0.12);

    box-shadow:
        0 30px 70px rgba(19, 74, 105, 0.12);

    z-index: 5;

    animation:
        careerCircleFloat
        6s
        ease-in-out
        infinite;
}

.career-main-circle::before {
    content: "";

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    border:
        1px dashed rgba(25, 118, 185, 0.18);
}


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

.career-circle-inner {
    position: relative;

    z-index: 2;

    text-align: center;
}

.career-circle-icon {
    width: 82px;
    height: 82px;

    margin: 0 auto 20px;

    display: flex;

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

    border-radius: 24px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1976b9
        );

    box-shadow:
        0 16px 30px rgba(7, 29, 67, 0.16);

    font-size: 29px;
}

.career-circle-inner > span {
    display: block;

    margin-bottom: 7px;

    color: #1976b9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.career-circle-inner strong {
    display: block;

    color: #071d43;

    font-size: 31px;

    font-weight: 700;
}

.career-circle-inner small {
    display: block;

    margin-top: 9px;

    color: #7590a2;

    font-size: 11px;

    letter-spacing: 0.5px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.career-floating-card {
    position: absolute;

    min-width: 190px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 14px;

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

    border:
        1px solid rgba(25, 118, 185, 0.10);

    box-shadow:
        0 15px 35px rgba(15, 67, 99, 0.11);

    backdrop-filter: blur(12px);

    z-index: 10;
}

.career-floating-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 11px;

    color: #1976b9;

    background: #eaf7fd;

    font-size: 14px;
}

.career-floating-card strong {
    display: block;

    color: #173d5b;

    font-size: 12px;

    font-weight: 700;
}

.career-floating-card span {
    display: block;

    margin-top: 2px;

    color: #7890a2;

    font-size: 10px;
}


/* =========================================================
   FLOATING POSITIONS
========================================================= */

.career-card-team {
    left: -20px;
    top: 70px;

    animation:
        careerFloatOne
        5s
        ease-in-out
        infinite;
}

.career-card-education {
    right: -35px;
    top: 190px;

    animation:
        careerFloatTwo
        5.5s
        ease-in-out
        infinite;
}

.career-card-technology {
    left: -5px;
    bottom: 55px;

    animation:
        careerFloatThree
        6s
        ease-in-out
        infinite;
}


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

@keyframes careerCircleFloat {

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

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

}

@keyframes careerFloatOne {

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

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

}

@keyframes careerFloatTwo {

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

    50% {
        transform: translateY(9px);
    }

}

@keyframes careerFloatThree {

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

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

}

/* =========================================================
   CAREER — WHY JOIN US
   4 COLUMN GRID
========================================================= */

.career-why-section .values-grid {
    display: grid;

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

    gap: 20px;
}

.career-why-section .value-card {
    min-height: 300px;
}

/* =========================================================
   SECTION 3 — CAREER OPENINGS
========================================================= */

.career-openings-section {
    position: relative;

    padding: 115px 0 125px;

    overflow: hidden;

    background: #f7fbfd;
}


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

.career-openings-section .values-header {
    max-width: 760px;

    margin: 0 auto 58px;
}

.career-openings-section .values-header p {
    max-width: 680px;

    margin: 20px auto 0;

    color: #6b8396;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   OPENINGS GRID
========================================================= */

.career-openings-grid {
    display: grid;

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

    gap: 20px;
}


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

.career-role-card {
    position: relative;

    min-width: 0;

    padding: 27px 26px 25px;

    display: flex;

    flex-direction: column;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e5eef3;

    box-shadow:
        0 12px 32px rgba(20, 70, 95, 0.05);

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

.career-role-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(25, 118, 185, 0.18);

    box-shadow:
        0 24px 50px rgba(20, 70, 95, 0.10);
}


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

.career-role-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}

.career-role-number {
    color: #b5cad7;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


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

.career-role-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 14px;

    color: #1976b9;

    background: #edf8fd;

    font-size: 20px;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.career-role-card:hover
.career-role-icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d6d,
            #1976b9
        );

    transform: translateY(-2px);
}


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

.career-role-content {
    flex: 1;
}

.career-role-label {
    display: block;

    margin-bottom: 7px;

    color: #1976b9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.career-role-content h3 {
    margin: 0 0 13px;

    color: #173d5b;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 700;
}

.career-role-description {
    margin: 0 0 25px;

    color: #71899b;

    font-size: 18px;

    line-height: 1.75;
}


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

.career-role-details {
    padding-top: 20px;

    border-top:
        1px solid #e9f0f4;
}

.career-role-detail {
    display: grid;

    grid-template-columns: 88px 1fr;

    gap: 12px;

    margin-bottom: 14px;
}

.career-role-detail:last-child {
    margin-bottom: 0;
}

.career-role-detail strong {
    color: #36566d;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 700;
}

.career-role-detail span {
    color: #677782;
    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.career-role-button {
    width: 100%;

    margin-top: 28px;

    padding: 12px 15px 12px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d6d,
            #1976b9
        );

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
        0 9px 22px rgba(25, 118, 185, 0.13);

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

.career-role-button i {
    width: 29px;
    height: 29px;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 11px;

    transition:
        transform 0.35s ease;
}

.career-role-button:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(25, 118, 185, 0.20);
}

.career-role-button:hover i {
    transform: translateX(3px);
}

/* =========================================================
   SECTION 4 — WHO WE'RE LOOKING FOR
========================================================= */

.career-looking-section {
    position: relative;

    padding: 115px 0 125px;

    overflow: hidden;

    background: #ffffff;
}


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

.career-looking-section .values-header {
    margin-bottom: 45px;
}


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

.career-looking-content {
    max-width: 900px;

    margin: 0 auto;

    padding: 45px 55px;

    display: flex;

    align-items: center;

    gap: 30px;

    border-radius: 22px;

    background: #f7fbfd;

    border: 1px solid #e5eff4;

    box-shadow:
        0 12px 35px rgba(20, 70, 95, 0.05);
}


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

.career-looking-icon {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    display: flex;

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

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d6d,
            #1976b9
        );

    box-shadow:
        0 12px 25px rgba(25, 118, 185, 0.15);

    font-size: 25px;
}


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

.career-looking-content p {
    margin: 0;

    color: #5f788c;

    font-size: 17px;

    line-height: 1.8;
}


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

@media (max-width: 767px) {

    .career-looking-section {
        padding: 75px 0 85px;
    }

    .career-looking-section .values-header {
        margin-bottom: 35px;
    }

    .career-looking-content {
        padding: 30px 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        border-radius: 18px;
    }

    .career-looking-icon {
        width: 55px;
        height: 55px;

        flex-basis: 55px;

        border-radius: 15px;

        font-size: 20px;
    }

    .career-looking-content p {
        font-size: 15px;

        line-height: 1.75;
    }

}


/* =========================================================
   SECTION 5 — HOW TO APPLY
   Alternative Split CTA Design
========================================================= */

.career-apply-section {
    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: #071d43;
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.career-apply-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.06;

    pointer-events: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 48%,
            #ffffff 49%,
            #ffffff 51%,
            transparent 52%
        );

    background-size: 75px 75px;
}


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

.career-apply-container {
    position: relative;

    z-index: 2;

    width: min(1160px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    align-items: center;

    gap: 80px;
}


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

.career-apply-content {
    max-width: 650px;
}

.career-apply-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    padding: 8px 15px;

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

    border-radius: 50px;

    color: #82d2f2;

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.career-apply-badge span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #63c7ed;

    box-shadow:
        0 0 0 5px rgba(99, 199, 237, 0.10);
}


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

.career-apply-content h2 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 700;
}

.career-apply-content h2 span {
    display: block;

    color: #69c8ed;
}


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

.career-apply-content p {
    max-width: 620px;

    margin: 25px 0 0;

    color: rgba(255, 255, 255, 0.66);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   RIGHT ACTION
========================================================= */

.career-apply-action {
    min-height: 170px;

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 22px;

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

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

    backdrop-filter: blur(12px);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.career-apply-action:hover {
    transform: translateY(-6px);

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

    border-color:
        rgba(105, 200, 237, 0.35);
}


/* =========================================================
   MAIL ICON
========================================================= */

.career-apply-mail-icon {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: flex;

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

    border-radius: 17px;

    color: #071d43;

    background: #ffffff;

    font-size: 21px;
}


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

.career-apply-action-content {
    flex: 1;

    min-width: 0;
}

.career-apply-action-content span {
    display: block;

    margin-bottom: 5px;

    color: #73cbed;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.career-apply-action-content strong {
    display: block;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   ARROW BUTTON
========================================================= */

.career-apply-arrow {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

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

    border-radius: 50%;

    color: #071d43;

    background: #69c8ed;

    text-decoration: none;

    font-size: 14px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.career-apply-arrow:hover {
    color: #071d43;

    background: #ffffff;

    transform: rotate(8deg) scale(1.05);
}

.career-apply-content h2 span {
    display: inline;
    color: #69c8ed;
}


/* =========================================================
   CONTACT SECTION — LARGE DESKTOP
========================================================= */

.contact-section {
    position: relative;

    padding: 125px 0 140px;

    overflow: hidden;

    background: #f7fbfd;
}


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

.contact-container {
    position: relative;

    z-index: 2;

    width: min(1320px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT DETAILS
========================================================= */

.contact-details {
    max-width: 560px;
}


/* Badge */

.contact-section-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 19px;

    margin-bottom: 28px;

    border-radius: 50px;

    background: #edf8fd;

    border: 1px solid rgba(25, 118, 185, 0.12);

    color: #1976b9;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;
}

.contact-section-badge span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #55bdec;
}


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

.contact-details h2 {
    margin: 0 0 48px;

    color: #071d43;

    font-size: clamp(52px, 4.2vw, 70px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 700;
}

.contact-details h2 span {
    display: block;

    color: #1976b9;
}


/* =========================================================
   DETAIL LIST
========================================================= */

.contact-detail-list {
    display: flex;

    flex-direction: column;

    gap: 30px;
}

.contact-detail-item {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


/* =========================================================
   DETAIL ICON
========================================================= */

.contact-detail-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

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

    border-radius: 15px;

    color: #1976b9;

    background: #ffffff;

    border: 1px solid #e1edf3;

    box-shadow:
        0 10px 25px rgba(20, 70, 95, 0.07);

    font-size: 19px;
}


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

.contact-detail-content {
    padding-top: 2px;
}

.contact-detail-content strong {
    display: block;

    margin-bottom: 7px;

    color: #294d65;

    font-size: 16px;

    font-weight: 700;
}

.contact-detail-content p {
    margin: 0;

    color: #71899b;

    font-size: 16px;

    line-height: 1.7;
}


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

.contact-form-wrapper {
    padding: 48px;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid #e1edf3;

    box-shadow:
        0 25px 65px rgba(20, 70, 95, 0.09);
}


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

.contact-form {
    display: grid;

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

    gap: 27px 22px;
}


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

.contact-form-group {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.contact-form-group label {
    color: #294d65;

    font-size: 15px;

    font-weight: 700;
}


/* =========================================================
   INPUTS
========================================================= */

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%;

    padding: 17px 18px;

    border: 1px solid #d9e7ee;

    border-radius: 12px;

    outline: none;

    color: #294d65;

    background: #fafdfe;

    font-family: inherit;

    font-size: 15px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contact-form-group input,
.contact-form-group select {
    min-height: 58px;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #9bb0bd;

    font-size: 14px;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color: #55bdec;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(85, 189, 236, 0.09);
}


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

.contact-form-group textarea {
    min-height: 165px;

    line-height: 1.7;

    resize: vertical;
}


/* =========================================================
   MESSAGE
========================================================= */

.contact-message-group {
    grid-column: 1 / -1;
}


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

.contact-submit-button {
    grid-column: 1 / -1;

    min-width: 205px;

    min-height: 58px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 8px 9px 8px 23px;

    border: none;

    border-radius: 50px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3d6d,
            #1976b9
        );

    cursor: pointer;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
        0 12px 28px rgba(25, 118, 185, 0.17);

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

.contact-submit-button i {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 14px;

    transition:
        transform 0.35s ease;
}

.contact-submit-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(25, 118, 185, 0.22);
}

.contact-submit-button:hover i {
    transform: translateX(4px);
}




/* =========================================================
   ABOUT TEAM SECTION
========================================================= */
/* =========================================================
   TEAM SECTION
========================================================= */

.team-section {
    position: relative;

    width: 100%;

    padding: 100px 0 70px;

    background:
        linear-gradient(
            135deg,
            #f3faff 0%,
            #edf8fd 100%
        );

    overflow: hidden;
}


/* =========================================================
   TEAM SECTION BACKGROUND PATTERN
========================================================= */

.team-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            45deg,
            transparent 48%,
            rgba(25, 118, 185, 0.045) 50%,
            transparent 52%
        ),
        linear-gradient(
            -45deg,
            transparent 48%,
            rgba(25, 118, 185, 0.045) 50%,
            transparent 52%
        );

    background-size: 80px 80px;

    background-position:
        0 0,
        0 0;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   CONTENT ABOVE PATTERN
========================================================= */

.team-section-header,
.team-slider-wrapper,
.team-slider-dots,
.team-bottom {
    position: relative;

    z-index: 2;
}


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

.team-section-header {
    position: relative;

    max-width: 760px;

    margin: 0 auto 55px;

    padding: 0 20px;

    text-align: center;

    z-index: 2;
}


/* Label */

.team-section-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #1976b9;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.team-section-label::before,
.team-section-label::after {
    content: "";

    width: 28px;

    height: 1px;

    background: #1976b9;

    opacity: .5;
}


/* Heading */

.team-section-header h2 {
    margin: 0;

    color: #092143;

    font-size: clamp(36px, 4vw, 58px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1.8px;
}


.team-section-header h2 span {
    display: block;

    color: #1976b9;
}


/* Description */

.team-section-header p {
    max-width: 600px;

    margin: 20px auto 0;

    color: #66829c;

    font-size: 15px;

    line-height: 1.8;
}


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

.team-slider-wrapper {
    position: relative;

    width: min(1400px, calc(100% - 120px));

    margin: 0 auto;

    padding: 0;

    background: transparent;

    overflow: visible;

    z-index: 3;
}


/* Remove old wrapper decorations */

.team-slider-wrapper::before,
.team-slider-wrapper::after {
    display: none;
}


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

.team-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    z-index: 3;
}


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

.team-track {
    display: flex;

    gap: 28px;

    transition:
        transform .65s cubic-bezier(.22, .61, .36, 1);

    will-change: transform;
}


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

.team-track .team-card {
    flex: 0 0 calc((100% - 84px) / 4);

    min-width: 0;

    position: relative;

    background: #ffffff;

    border: 1px solid
        rgba(25, 118, 185, .10);

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 18px 50px rgba(7, 29, 67, .08);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


.team-track .team-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(25, 118, 185, .20);

    box-shadow:
        0 28px 65px rgba(7, 29, 67, .14);
}


/* =========================================================
   TEAM IMAGE
========================================================= */

.team-image-wrapper {
    position: relative;

    width: 100%;

    height: 300px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #d9edf9,
            #bcdff2
        );
}


.team-image-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 29, 67, .65),
            rgba(7, 29, 67, .08) 50%,
            transparent 75%
        );

    z-index: 2;

    pointer-events: none;
}


.team-image {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .7s cubic-bezier(.22, .61, .36, 1);
}


.team-card:hover .team-image {
    transform: scale(1.05);
}


/* =========================================================
   IMAGE GLOW
========================================================= */

.team-image-glow {
    position: absolute;

    width: 180px;

    height: 180px;

    top: -70px;

    right: -70px;

    border-radius: 50%;

    background:
        rgba(91, 193, 238, .35);

    filter: blur(20px);

    z-index: 1;
}


/* =========================================================
   MEMBER NUMBER
========================================================= */

.team-number {
    position: absolute;

    top: 18px;

    left: 18px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .92);

    backdrop-filter: blur(10px);

    color: #092143;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 8px 22px rgba(7, 29, 67, .12);

    z-index: 5;
}


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

.team-content {
    position: relative;

    padding: 25px 24px 24px;

    background: #ffffff;
}


/* Role */

.team-role {
    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    margin-bottom: 12px;

    border-radius: 30px;

    background: #eaf6fd;

    color: #1976b9;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* Name */

.team-content h3 {
    margin: 0 0 11px;

    color: #092143;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* Description */

.team-content p {
    margin: 0;

    min-height: 74px;

    color: #66829c;

    font-size: 14px;

    line-height: 1.7;
}


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

.team-socials {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid rgba(25, 118, 185, .10);
}


.team-socials a {
    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f0f8fd;

    color: #1976b9;

    font-size: 13px;

    transition: all .3s ease;
}


.team-socials a:hover {
    background: #1976b9;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 8px 18px rgba(25, 118, 185, .22);
}


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

.team-slider-btn {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(25, 118, 185, .13);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .95);

    backdrop-filter: blur(10px);

    color: #1976b9;

    font-size: 15px;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(7, 29, 67, .10);

    transition: all .3s ease;

    z-index: 20;
}


.team-prev {
    left: -26px;
}


.team-next {
    right: -26px;
}


.team-slider-btn:hover {
    background: #1976b9;

    color: #ffffff;

    border-color: #1976b9;

    box-shadow:
        0 15px 35px rgba(25, 118, 185, .25);

    transform:
        translateY(-50%) scale(1.06);
}


.team-slider-btn:disabled {
    opacity: .35;

    cursor: not-allowed;

    transform:
        translateY(-50%);
}


/* =========================================================
   DOTS
========================================================= */

.team-slider-dots {
    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 32px;

    z-index: 5;
}


.team-slider-dot {
    width: 8px;

    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #bfd9e8;

    cursor: pointer;

    transition: all .35s ease;
}


.team-slider-dot.active {
    width: 30px;

    border-radius: 20px;

    background: #1976b9;

    box-shadow:
        0 4px 12px rgba(25, 118, 185, .22);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.team-bottom {
    width: min(900px, calc(100% - 40px));

    margin: 38px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    position: relative;

    z-index: 5;
}


.team-bottom-line {
    flex: 1;

    max-width: 150px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(25, 118, 185, .35)
        );
}


.team-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(25, 118, 185, .35),
            transparent
        );
}


.team-bottom p {
    margin: 0;

    color: #092143;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .6px;

    text-align: center;

    white-space: nowrap;
}


.team-bottom p::before {
    content: "";

    display: inline-block;

    width: 6px;

    height: 6px;

    margin-right: 9px;

    border-radius: 50%;

    background: #1976b9;

    vertical-align: middle;

    box-shadow:
        0 0 0 5px rgba(25, 118, 185, .08);
}

.team-specialty {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(25, 118, 185, 0.10);
}

.team-specialty span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8aa0b2;
    margin-bottom: 4px;
}

.team-specialty strong {
    font-size: 13px;
    font-weight: 600;
    color: #24415c;
}
/* =========================================================
    GALLERY PAGE
========================================================= */

.gallery-page {
    background: #eef8fd;
    overflow: hidden;
}


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

.gallery-hero {
    min-height: 520px;
    padding: 150px 0 90px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(85,184,239,.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(25,118,185,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f5fcff 0%,
            #eef8fd 50%,
            #e2f3fb 100%
        );
}


.gallery-pattern {
    position: absolute;
    inset: 0;

    opacity: .08;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            rgba(27,106,157,.5) 25%,
            rgba(27,106,157,.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27,106,157,.5) 75%,
            rgba(27,106,157,.5) 76%,
            transparent 77%
        ),
        linear-gradient(
            150deg,
            transparent 24%,
            rgba(27,106,157,.5) 25%,
            rgba(27,106,157,.5) 26%,
            transparent 27%,
            transparent 74%,
            rgba(27,106,157,.5) 75%,
            rgba(27,106,157,.5) 76%,
            transparent 77%
        );

    background-size: 94px 162px;
}


.gallery-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -160px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            rgba(194,231,250,.3) 50%,
            transparent 70%
        );

    filter: blur(8px);
}


.gallery-hero-content {
    position: relative;
    z-index: 3;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.gallery-badge {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 50px;

    background: rgba(255,255,255,.8);

    border: 1px solid rgba(25,118,185,.12);

    box-shadow:
        0 10px 30px rgba(7,29,67,.07);

    color: #1768a6;

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

    margin-bottom: 25px;

    backdrop-filter: blur(10px);
}


.gallery-badge-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #55b8ef;

    box-shadow:
        0 0 0 5px rgba(85,184,239,.12);
}


.gallery-hero h1 {
    margin: 0 0 22px;

    color: #071d43;

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

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}


.gallery-hero h1 span {
    color: #1976b9;
}


.gallery-hero p {
    max-width: 680px;

    margin: auto;

    color: #66829c;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
    FILTER SECTION
========================================================= */

.gallery-section {
    position: relative;

    padding: 90px 0 110px;

    background: #eef8fd;
}


.gallery-container {
    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


.gallery-heading {
    text-align: center;

    margin-bottom: 45px;
}


.gallery-heading .small-title {
    display: block;

    margin-bottom: 12px;

    color: #1976b9;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.gallery-heading h2 {
    margin: 0;

    color: #071d43;

    font-size: clamp(32px, 4vw, 50px);

    line-height: 1.15;

    font-weight: 700;
}


.gallery-heading h2 span {
    color: #1976b9;
}


.gallery-heading p {
    max-width: 620px;

    margin: 15px auto 0;

    color: #66829c;

    font-size: 15px;
}


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

.gallery-filters {
    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 50px;
}


.gallery-filter {
    border: 1px solid rgba(25,118,185,.13);

    background: rgba(255,255,255,.75);

    color: #52718b;

    border-radius: 50px;

    padding: 11px 20px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        .3s ease;
}


.gallery-filter:hover {
    color: #1976b9;

    border-color: rgba(25,118,185,.35);

    transform: translateY(-2px);
}


.gallery-filter.active {
    color: white;

    border-color: #071d43;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #1976b9
        );

    box-shadow:
        0 12px 25px rgba(7,29,67,.15);
}


/* =========================================================
    FEATURED GALLERY
========================================================= */

.featured-gallery {
    display: grid;

    grid-template-columns:
        1.4fr .8fr .8fr;

    grid-template-rows:
        240px 240px;

    gap: 18px;

    margin-bottom: 70px;
}


.gallery-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: white;

    box-shadow:
        0 15px 45px rgba(7,29,67,.08);

    cursor: pointer;
}


.gallery-card.featured-main {
    grid-row: span 2;
}


.gallery-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}


.gallery-card:hover img {
    transform: scale(1.07);
}


.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 25px;

    opacity: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,29,67,.88),
            rgba(7,29,67,.05) 70%
        );

    transition: .35s ease;
}


.gallery-card:hover .gallery-overlay {
    opacity: 1;
}


.gallery-overlay span {
    color: #8ed9ff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 5px;
}


.gallery-overlay h3 {
    margin: 0;

    color: white;

    font-size: 20px;

    font-weight: 600;
}


.gallery-open {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    color: #1976b9;

    background: rgba(255,255,255,.92);

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);

    transform: translateY(-10px);

    opacity: 0;

    transition: .35s ease;
}


.gallery-card:hover .gallery-open {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
    MASONRY GRID
========================================================= */

.masonry-gallery {
    columns: 3 300px;

    column-gap: 18px;
}


.masonry-item {
    break-inside: avoid;

    position: relative;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 20px;

    cursor: pointer;

    background: white;

    box-shadow:
        0 12px 35px rgba(7,29,67,.07);
}


.masonry-item img {
    width: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .65s ease;
}


.masonry-item:hover img {
    transform: scale(1.06);
}


.masonry-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 20px;

    opacity: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,29,67,.85),
            transparent 70%
        );

    transition: .35s ease;
}


.masonry-item:hover .masonry-overlay {
    opacity: 1;
}


.masonry-overlay-content {
    color: white;
}


.masonry-overlay-content small {
    color: #8ed9ff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.masonry-overlay-content h4 {
    margin: 4px 0 0;

    font-size: 17px;

    font-weight: 600;
}


/* =========================================================
    LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

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

    padding: 30px;

    background:
        rgba(3,15,35,.94);

    backdrop-filter: blur(12px);
}


.gallery-lightbox.open {
    display: flex;
}


.lightbox-content {
    position: relative;

    width: min(1100px, 95vw);

    max-height: 90vh;

    display: flex;

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


.lightbox-content img {
    max-width: 100%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.4);
}


.lightbox-close {
    position: fixed;

    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    border: 0;

    border-radius: 50%;

    color: #071d43;

    background: white;

    font-size: 18px;

    cursor: pointer;
}


.lightbox-prev,
.lightbox-next {
    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    color: white;

    background: rgba(255,255,255,.1);

    cursor: pointer;

    transition: .3s ease;
}


.lightbox-prev {
    left: 25px;
}


.lightbox-next {
    right: 25px;
}


.lightbox-prev:hover,
.lightbox-next:hover {
    background: #1976b9;

    border-color: #1976b9;
}


/* =========================================================
    CTA
========================================================= */

.gallery-cta {
    position: relative;

    overflow: hidden;

    padding: 80px 30px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #071d43,
            #0a2b5c 55%,
            #1976b9
        );
}


.gallery-cta-pattern {
    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(
            30deg,
            transparent 24%,
            white 25%,
            white 26%,
            transparent 27%,
            transparent 74%,
            white 75%,
            white 76%,
            transparent 77%
        );

    background-size: 90px 150px;
}


.gallery-cta-content {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: auto;
}


.gallery-cta-content h2 {
    margin: 0 0 15px;

    color: white;

    font-size: clamp(32px, 5vw, 54px);

    line-height: 1.15;
}


.gallery-cta-content h2 span {
    color: #75ccf5;
}


.gallery-cta-content p {
    margin: 0 auto 28px;

    color: rgba(255,255,255,.7);

    font-size: 16px;
}


.gallery-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 14px 23px;

    border-radius: 12px;

    color: #071d43;

    background: white;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;
}


.gallery-cta-btn:hover {
    color: #071d43;

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}
/* =========================================================
   GALLERY FILTER VISIBILITY
========================================================= */

.gallery-card.gallery-hidden,
.masonry-item.gallery-hidden {
    display: none !important;
}


/* =========================================================
   BROKEN IMAGE
========================================================= */

.gallery-image-error img {
    display: none;
}

.gallery-image-error::before {
    content: "Image unavailable";

    position: absolute;

    inset: 0;

    display: flex;

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

    color: #66829c;

    background: #f8fcff;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   EARLY ACCESS MODAL
========================================================= */

.early-access-modal {

    position: relative;

    border: none;

    border-radius: 24px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(15, 55, 90, 0.20);

}


/* ---------------------------------------------------------
   CLOSE
--------------------------------------------------------- */

.early-modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 10;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background-color: rgba(255,255,255,0.9);

    opacity: 1;

}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.early-access-header {

    padding: 38px 35px 25px;

    background:
        linear-gradient(
            135deg,
            #eaf7ff 0%,
            #f7fbff 100%
        );

    text-align: center;

}


.early-access-badge {

    display: inline-block;

    padding: 6px 13px;

    margin-bottom: 12px;

    border-radius: 50px;

    background: #e5f3ff;

    color: #1769aa;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.early-access-header h3 {

    margin: 0 0 10px;

    color: #173b5c;

    font-size: 28px;

    font-weight: 700;

}


.early-access-header p {

    max-width: 430px;

    margin: 0 auto;

    color: #667b8d;

    font-size: 14px;

    line-height: 1.7;

}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.early-form-body {

    padding: 28px 35px 35px;

}


.early-form-group {

    margin-bottom: 17px;

}


.early-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #29445c;

    font-size: 13px;

    font-weight: 600;

}


.early-form-group .form-control,
.early-form-group .form-select {

    min-height: 46px;

    border: 1px solid #dce8f0;

    border-radius: 10px;

    padding: 10px 13px;

    color: #29445c;

    background: #fbfdff;

    font-size: 14px;

    box-shadow: none;

}


.early-form-group textarea.form-control {

    min-height: 85px;

    resize: vertical;

}


.early-form-group .form-control:focus,
.early-form-group .form-select:focus {

    border-color: #2781c4;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(39,129,196,0.10);

}


/* ---------------------------------------------------------
   SUBMIT
--------------------------------------------------------- */

.early-submit-btn {

    width: 100%;

    min-height: 50px;

    margin-top: 5px;

    border: none;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #123f6b,
            #1f78b4
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    transition: all .25s ease;

}


.early-submit-btn i {

    margin-left: 8px;

}


.early-submit-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(25,104,160,0.22);

}


/* ============================================================
   IQRAA MARK - TERMS & CONDITIONS
   No Sidebar
============================================================ */

.iqraa-problem.terms-section {
    padding: 110px 0 120px;
}

.terms-section .problem-container {
    width: min(1100px, calc(100% - 40px));
    max-width: 1100px;
    margin: 0 auto;
}


/* ============================================================
   INTRO
============================================================ */

.terms-intro {
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.terms-intro .problem-badge {
    margin-bottom: 20px;
}

.terms-intro .problem-title {
    max-width: 900px;
    margin: 0 auto 18px;
    font-size: clamp(42px, 5vw, 64px);
}

.terms-intro .problem-description {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.terms-intro .problem-highlight {
    margin-top: 15px;
    padding: 15px 20px;
    border-left: 3px solid #1976b9;
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, .7);
    text-align: left;
}


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

.terms-card {
    position: relative;

    width: 100%;

    margin-bottom: 22px;
    padding: 30px 35px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,252,255,.95)
        );

    border: 1px solid rgba(25,118,185,.10);

    box-shadow:
        0 15px 40px rgba(7,29,67,.055);

    overflow: hidden;

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

.terms-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 50px rgba(7,29,67,.08);
}


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

.terms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.terms-number {
    color: rgba(7,29,67,.10);

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

    font-weight: 800;
}

.terms-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: #eaf6fd;

    color: #1976b9;

    font-size: 17px;
}


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

.terms-card-content h3 {
    margin: 0 0 13px;

    color: #071d43;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;
}

.terms-card-content p {
    margin: 0 0 13px;

    color: #607b93;

    font-size: 15px;
    line-height: 1.8;
}

.terms-card-content p:last-child {
    margin-bottom: 0;
}


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

.terms-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 18px 0 0;
    padding: 0;

    list-style: none;
}

.terms-list li {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    color: #607b93;

    font-size: 15px;
    line-height: 1.7;
}

.terms-list li i {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

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

    margin-top: 2px;

    border-radius: 50%;

    background: #eaf6fd;

    color: #1976b9;

    font-size: 9px;
}


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

.terms-contact-list {
    display: grid;

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

    gap: 12px;

    margin-top: 20px;
}

.terms-contact-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 15px;

    border-radius: 13px;

    background: #f5faff;

    border: 1px solid #e7f2f8;
}

.terms-contact-icon {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

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

    border-radius: 10px;

    background: #eaf6fd;

    color: #1976b9;
}

.terms-contact-text {
    color: #607b93;

    font-size: 15px;

    line-height: 1.6;

    word-break: break-word;
}

.terms-contact-text strong {
    display: block;

    margin-bottom: 2px;

    color: #071d43;
}

.terms-contact-text a {
    color: #1976b9;

    text-decoration: none;
}

.terms-contact-text a:hover {
    text-decoration: underline;
}




/* ============================================================
   PRIVACY FINAL MESSAGE
============================================================ */

.terms-final-message {
    max-width: 800px;
    margin: 35px auto 0;

    padding: 25px 30px;

    display: flex;
    align-items: flex-start;
    gap: 15px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(25, 118, 185, .10);

    box-shadow:
        0 12px 35px rgba(7, 29, 67, .04);
}

.terms-final-message > i {
    flex: 0 0 auto;

    margin-top: 4px;

    color: #1976b9;
}

.terms-final-message p {
    margin: 0;

    color: #607b93;

    font-size: 14px;
    line-height: 1.8;
}

.message-container {
    margin-bottom: 20px;
}

.message-container .alert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.message-container .alert-success {
    background: #eaf8f0;
    border: 1px solid #b9e6ca;
    color: #187a43;
}

.message-container .alert-danger {
    background: #fff0f0;
    border: 1px solid #f1b8b8;
    color: #c62828;
}

.message-container .alert-warning {
    background: #fff8e6;
    border: 1px solid #f3d58a;
    color: #9a6700;
}

.message-container .alert-info {
    background: #eef6ff;
    border: 1px solid #b8d8f5;
    color: #1769aa;
}

.message-container .btn-close {
    width: 10px;
    height: 10px;
    padding: 8px;
    flex-shrink: 0;
    opacity: 0.7;
}

.message-container .btn-close:hover {
    opacity: 1;
}


/* =========================================================
   VERIFY CARD SECTION
========================================================= */

.verify-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(85, 184, 239, 0.14),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(25, 118, 185, 0.10),
            transparent 35%
        ),
        #eef8fd;
}

/* Background Pattern */
.verify-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            rgba(25, 118, 185, 0.35) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(25, 118, 185, 0.35) 87.5%
        ),
        linear-gradient(
            150deg,
            rgba(25, 118, 185, 0.35) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(25, 118, 185, 0.35) 87.5%
        );

    background-size: 80px 80px;
}


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

.verify-content {
    position: relative;
    z-index: 2;
}

.verify-tag {
    display: inline-block;

    padding: 8px 24px;
    margin-bottom: 28px;

    border-radius: 30px;

    background: #1976b9;
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.verify-content h2 {
    margin: 0 0 28px;

    color: #092143;

    font-size: 55px;
    font-weight: 700;
    line-height: 1.1;
}

.verify-content h2 span {
    display: block;
    color: #1976b9;
}

.verify-content p {
    max-width: 700px;

    margin: 0;

    color: #66829c;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.verify-section .col-lg-6:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


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

.verify-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 750px;

    margin-left: auto;

    padding: 42px 48px;

    border: 1px solid rgba(25, 118, 185, 0.16);
    border-radius: 34px;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px rgba(7, 29, 67, 0.10);

    box-sizing: border-box;
}


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

.verify-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 55px;
}

.verify-top i {
    color: #f8a400;
    font-size: 48px;
}

.verify-top img {
    display: block;

    width: auto;
    height: 48px;

    object-fit: contain;
}


/* =========================================================
   USER / DATE
========================================================= */

.verify-user {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 42px;

    color: #092143;

    font-size: 22px;
    font-weight: 600;
}


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

.card-number {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    width: 100%;
    height: 100px;

    padding: 0 28px;

    border: 2px solid #1976b9;
    border-radius: 26px;

    background: #ffffff;

    box-sizing: border-box;

    box-shadow:
        inset 0 2px 8px rgba(7, 29, 67, 0.03);
}

.fixed-mask {
    color: #092143;

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

    letter-spacing: 7px;
    white-space: nowrap;
}


/* =========================================================
   LAST 5 DIGITS INPUT
========================================================= */

#cardLastDigits {
    width: 175px;

    padding: 13px 12px;

    border: none;
    border-radius: 14px;

    outline: none;

    background: #f5f9fc;
    color: #092143;

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

    text-align: center;
    letter-spacing: 6px;

    box-sizing: border-box;
}

#cardLastDigits::placeholder {
    color: #b7c6d4;
    opacity: 1;
}


/* =========================================================
   VALIDATE BUTTON
========================================================= */

.verify-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 750px;
    height: 78px;

    margin: 38px 0 0 auto;

    border-radius: 60px;

    background: linear-gradient(
        90deg,
        #55b8ef 0%,
        #1976b9 100%
    );

    color: #ffffff;

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

    text-decoration: none;

    box-shadow:
        0 15px 35px rgba(25, 118, 185, 0.20);

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

.verify-btn:hover {
    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(25, 118, 185, 0.28);
}

/* privilage popup */

/* =========================================================
   PRIVILEGE CARD VERIFY MODAL
   ========================================================= */

#cardVerifyModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

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

    padding: 20px !important;

    background: rgba(5, 25, 45, 0.72) !important;

    z-index: 2147483647 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease !important;
}

#cardVerifyModal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Overlay */

#cardVerifyModal .card-verify-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(5, 25, 45, 0.72) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}


/* Dialog */

#cardVerifyModal .card-verify-dialog {
    position: relative !important;

    width: min(520px, calc(100vw - 30px)) !important;
    max-width: 520px !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;

    margin: 0 !important;
    padding: 42px 34px 30px !important;

    background: #ffffff !important;

    border-radius: 26px !important;

    border: 1px solid rgba(25, 118, 185, 0.12) !important;

    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.35) !important;

    text-align: center !important;

    z-index: 2 !important;

    transform: translateY(20px) scale(0.97) !important;
    opacity: 0 !important;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease !important;
}

#cardVerifyModal.active .card-verify-dialog {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}


/* Close button */

#cardVerifyModal .card-verify-close {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: 38px !important;
    height: 38px !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #f1f7fb !important;

    color: #173b5d !important;

    font-size: 18px !important;

    cursor: pointer !important;

    z-index: 10 !important;
}

#cardVerifyModal .card-verify-close:hover {
    background: #1976b9 !important;
    color: #ffffff !important;
}


/* Result sections */

#cardVerifyModal .card-verify-result {
    display: none !important;
}

#cardVerifyModal .card-verify-result.active {
    display: block !important;
}


/* Success / Error icon */

#cardVerifyModal .verify-result-icon {
    width: 72px !important;
    height: 72px !important;

    margin: 0 auto 18px !important;

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

    border-radius: 50% !important;

    font-size: 30px !important;
}

#cardVerifyModal .verify-result-icon.success {
    background: rgba(32, 164, 99, 0.12) !important;
    color: #20a463 !important;
}

#cardVerifyModal .verify-result-icon.error {
    background: rgba(223, 80, 80, 0.10) !important;
    color: #df5050 !important;
}


/* Badge */

#cardVerifyModal .verify-result-badge {
    display: inline-flex !important;

    padding: 7px 14px !important;

    border-radius: 50px !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

#cardVerifyModal .success-badge {
    background: rgba(32, 164, 99, 0.10) !important;
    color: #208b59 !important;
}

#cardVerifyModal .error-badge {
    background: rgba(223, 80, 80, 0.10) !important;
    color: #d64d4d !important;
}


/* Heading */

#cardVerifyModal .card-verify-dialog h3 {
    margin: 14px 0 10px !important;

    color: #0d3155 !important;

    font-size: 28px !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;
}


/* Description */

#cardVerifyModal .verify-result-description {
    margin: 0 auto 22px !important;

    max-width: 420px !important;

    color: #63798d !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* Member information card */

#cardVerifyModal .verify-member-card {
    width: 100% !important;

    margin: 20px 0 !important;
    padding: 5px 18px !important;

    background: #f9fcfe !important;

    border: 1px solid #e3edf3 !important;

    border-radius: 16px !important;

    text-align: left !important;
}


/* Member rows */

#cardVerifyModal .verify-member-row {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;

    min-height: 48px !important;

    padding: 10px 0 !important;

    border-bottom: 1px solid #e8f0f4 !important;
}

#cardVerifyModal .verify-member-row:last-child {
    border-bottom: 0 !important;
}

#cardVerifyModal .verify-member-row > span {
    color: #8093a3 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

#cardVerifyModal .verify-member-row > strong {
    max-width: 65% !important;

    color: #163a5a !important;

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

    text-align: right !important;

    overflow-wrap: anywhere !important;
}


/* Status */

#cardVerifyModal #verifyMemberStatus {
    display: inline-flex !important;

    padding: 5px 11px !important;

    border-radius: 50px !important;

    background: #fff3d9 !important;

    color: #b57900 !important;

    font-size: 11px !important;
}

#cardVerifyModal #verifyMemberStatus.active-status {
    background: rgba(32, 164, 99, 0.11) !important;
    color: #208b59 !important;
}

#cardVerifyModal #verifyMemberStatus.not-active {
    background: #fff3d9 !important;
    color: #b57900 !important;
}


/* Not found card number */

#cardVerifyModal .verify-not-found-number {
    width: 100% !important;

    margin: 20px 0 !important;
    padding: 16px !important;

    background: #f6fafc !important;

    border: 1px solid #e3edf3 !important;

    border-radius: 14px !important;

    color: #183a59 !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    letter-spacing: 2px !important;
}


/* Modal buttons */

#cardVerifyModal .verify-modal-button {
    width: 100% !important;
    height: 54px !important;

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

    margin: 0 !important;

    padding: 0 20px !important;

    border: 0 !important;
    border-radius: 50px !important;

    background: linear-gradient(
        90deg,
        #55b8ef 0%,
        #1976b9 100%
    ) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 12px 28px rgba(25, 118, 185, 0.20) !important;
}

#cardVerifyModal .verify-modal-button:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;
}


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

@media (max-width: 576px) {

    #cardVerifyModal {
        padding: 15px !important;
    }

    #cardVerifyModal .card-verify-dialog {
        width: calc(100vw - 30px) !important;

        max-height: calc(100vh - 30px) !important;

        padding: 40px 18px 22px !important;

        border-radius: 22px !important;
    }

    #cardVerifyModal .card-verify-dialog h3 {
        font-size: 23px !important;
    }

    #cardVerifyModal .verify-result-description {
        font-size: 13px !important;
    }

    #cardVerifyModal .verify-member-row > span {
        font-size: 12px !important;
    }

    #cardVerifyModal .verify-member-row > strong {
        font-size: 12px !important;
    }
}

/* =========================================
   CUSTOM VALIDATION ALERT
========================================= */

.custom-alert {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 99999;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.custom-alert.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Alert box */

.custom-alert-box {
    width: min(90%, 450px);
    padding: 38px 35px 32px;

    background: #ffffff;
    border-radius: 24px;

    text-align: center;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.20);

    transform: translateY(20px) scale(0.96);
    transition: transform 0.25s ease;
}

.custom-alert.active .custom-alert-box {
    transform: translateY(0) scale(1);
}


/* Icon */

.custom-alert-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    background: #fff3e8;
    color: #f28c28;

    font-size: 30px;
}


/* Heading */

.custom-alert-box h3 {
    margin: 0 0 10px;

    color: #222222;

    font-size: 24px;
    font-weight: 700;
}


/* Message */

.custom-alert-box p {
    margin: 0 auto 25px;

    max-width: 340px;

    color: #666666;

    font-size: 16px;
    line-height: 1.6;
}


/* OK button */

.custom-alert-box button {
    width: 100%;
    height: 52px;

    border: 0;
    border-radius: 30px;

    background: linear-gradient(
        90deg,
        #55b8ef 0%,
        #1976b9 100%
    );

    color: #ffffff;

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

    cursor: pointer;

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

.custom-alert-box button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(25, 118, 185, 0.25);
}