@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap");

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

@keyframes partnersFadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

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

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

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

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

@keyframes partnersDividerFlow {
  0% {
    top: -60%;
  }

  100% {
    top: 100%;
  }
}

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

.partners {
  width: 100%;

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(212, 162, 76, 0.1),
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 85%,
      rgba(30, 58, 95, 0.08),
      transparent 45%
    ),
    linear-gradient(
      150deg,
      #eef4ff 0%,
      #e7eefb 48%,
      #f3ecdf 100%
    );

  padding: 60px 48px 80px;

  box-sizing: border-box;

  font-family: "Inter", sans-serif;

  position: relative;

  overflow: hidden;
}

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

.partners::before {
  content: "";

  position: absolute;

  top: -160px;
  left: -130px;

  width: 520px;
  height: 520px;

  background:
    radial-gradient(
      circle,
      rgba(212, 162, 76, 0.14) 0%,
      transparent 70%
    );

  filter: blur(20px);

  pointer-events: none;

  z-index: 0;
}

.partners::after {
  content: "";

  position: absolute;

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

  width: 600px;
  height: 600px;

  background:
    radial-gradient(
      circle,
      rgba(30, 58, 95, 0.08) 0%,
      transparent 70%
    );

  filter: blur(20px);

  pointer-events: none;

  z-index: 0;
}

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

.partners__inner {
  width: 100%;

  max-width: 1360px;

  margin: 0 auto;

  position: relative;

  z-index: 1;
}

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

.partners__badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 28px;

  opacity: 0;

  transform: translateY(28px);
}

.partners--visible .partners__badge {
  animation: partnersFadeInUp 0.7s ease forwards;

  animation-delay: 0.1s;
}

.partners__badge-icon {
  width: 22px;
  height: 22px;

  display: flex;

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

  background: linear-gradient(
    145deg,
    #f0c37a,
    #d4a24c
  );

  color: #1e3a5f;

  border-radius: 6px;

  flex-shrink: 0;
}

.partners__badge-text {
  color: #1e3a5f;

  font-size: 12.5px;

  font-weight: 700;

  letter-spacing: 1.6px;

  text-transform: uppercase;

  padding-left: 10px;

  border-left: 2px solid #d4a24c;

  white-space: nowrap;
}

/* =========================================================
   MAIN GRID
========================================================= */

.partners__grid {
  display: grid;

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

  align-items: center;

  gap: 44px;

  width: 100%;
}

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

.partners__left {
  min-width: 0;

  opacity: 0;

  transform: translateY(28px);
}

.partners--visible .partners__left {
  animation: partnersFadeInUp 0.8s ease forwards;

  animation-delay: 0.2s;
}

.partners__heading {
  font-size: 32px;

  font-weight: 800;

  line-height: 1.5;

  color: #1e3a5f;

  margin: 0 0 14px;

  padding-top: 4px;

  letter-spacing: -0.3px;

  font-family: "Plus Jakarta Sans", sans-serif;
}

.partners__heading--accent {
  color: #d4a24c;
}

.partners__underline {
  display: block;

  width: 40px;

  height: 3px;

  border-radius: 2px;

  background: #d4a24c;

  margin: 0 0 18px;
}

.partners__para {
  font-size: 15px;

  line-height: 1.7;

  color: #4a5568;

  margin: 0 0 32px;

  max-width: 420px;
}

/* =========================================================
   LEFT IMAGE
========================================================= */

.partners__imageWrap {
  position: relative;

  width: 100%;

  max-width: 340px;

  aspect-ratio: 1 / 0.85;

  display: flex;

  align-items: center;

  justify-content: center;
}

.partners__imageWrap::before {
  content: "";

  position: absolute;

  width: 78%;

  height: 78%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 162, 76, 0.22),
      transparent 70%
    );

  z-index: 0;

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

.partners__image {
  position: relative;

  z-index: 1;

  width: 100%;

  height: auto;

  object-fit: contain;

  animation:
    partnersSpin 18s linear infinite,
    partnersFloat 5s ease-in-out infinite;

  transform-origin: center center;

  filter:
    drop-shadow(
      0 18px 30px rgba(30, 58, 95, 0.16)
    );
}

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

.partners__divider {
  position: relative;

  width: 1px;

  height: 400px;

  overflow: hidden;

  justify-self: center;

  background: rgba(212, 162, 76, 0.2);
}

.partners__divider::before {
  content: "";

  position: absolute;

  left: 0;

  top: -60%;

  width: 100%;

  height: 60%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(212, 162, 76, 0.8),
      transparent
    );

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

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

.partners__right {
  position: relative;

  text-align: center;

  min-width: 0;

  opacity: 0;

  transform: translateY(28px);
}

.partners--visible .partners__right {
  animation: partnersFadeInUp 0.8s ease forwards;

  animation-delay: 0.3s;
}

.partners__title {
  font-size: 22px;

  font-weight: 800;

  color: #1e3a5f;

  margin: 0 0 8px;

  font-family: "Plus Jakarta Sans", sans-serif;
}

.partners__titleUnderline {
  display: inline-block;

  width: 54px;

  height: 2px;

  background: #d4a24c;

  margin-bottom: 6px;
}

.partners__titleDots {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-bottom: 28px;
}

.partners__titleDots i {
  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #d4a24c;

  display: inline-block;
}

/* =========================================================
   PARTNER CARDS
========================================================= */

.partners__cards {
  display: grid;

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

  gap: 20px;

  width: 100%;

  max-width: 500px;

  margin: 0 auto;
}

.partners__card {
  width: 100%;

  min-width: 0;

  height: 150px;

  opacity: 0;

  transform: translateY(24px);

  transition:
    transform 0.35s ease;
}

.partners--visible .partners__card {
  animation:
    partnersFadeInUp 0.55s ease forwards;

  animation-delay:
    calc(var(--i) * 0.08s + 0.4s);
}

/* =========================================================
   WHITE CARD WITH FULL EDGE BLENDING
========================================================= */

.partners__cardInner {
  width: 100%;

  height: 100%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  padding: 20px;

  overflow: hidden;

  border: none;

  border-radius: 28px;

  /*
    White in the center,
    transparent toward every edge
  */
  background:
    radial-gradient(
      ellipse 72% 72% at center,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(255, 255, 255, 0.97) 38%,
      rgba(255, 255, 255, 0.82) 58%,
      rgba(255, 255, 255, 0.48) 75%,
      rgba(255, 255, 255, 0.15) 90%,
      rgba(255, 255, 255, 0) 100%
    );

  /*
    Actual visual edge fade
  */
  -webkit-mask-image:
    radial-gradient(
      ellipse 78% 78% at center,
      #000 40%,
      rgba(0, 0, 0, 0.95) 54%,
      rgba(0, 0, 0, 0.72) 70%,
      rgba(0, 0, 0, 0.35) 84%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 78% 78% at center,
      #000 40%,
      rgba(0, 0, 0, 0.95) 54%,
      rgba(0, 0, 0, 0.72) 70%,
      rgba(0, 0, 0, 0.35) 84%,
      transparent 100%
    );

  /*
    Soft shadow only
    No hard outline
  */
  box-shadow:
    0 10px 30px rgba(30, 58, 95, 0.055);

  backdrop-filter: blur(5px);

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

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

/* =========================================================
   SOFT GLOW BEHIND WHITE CARD
========================================================= */

.partners__cardGlow {
  position: absolute;

  inset: -45px;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.55) 38%,
      rgba(212, 162, 76, 0.08) 65%,
      transparent 100%
    );

  filter: blur(25px);
}

/* =========================================================
   SUBTLE LIGHT
========================================================= */

.partners__cardInner::after {
  content: "";

  position: absolute;

  inset: 20px;

  border-radius: 24px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.32),
      transparent 70%
    );

  pointer-events: none;

  z-index: 0;
}

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

.partners__cardLogo {
  position: relative;

  z-index: 3;

  display: block;

  width: auto;

  height: auto;

  max-width: 88%;

  max-height: 95px;

  object-fit: contain;

  object-position: center;

  filter:
    drop-shadow(
      0 5px 9px rgba(30, 58, 95, 0.12)
    );

  transition:
    transform 0.35s ease;
}

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

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

.partners__card:hover .partners__cardInner {
  filter: brightness(1.02);
}

.partners__card:hover .partners__cardLogo {
  transform: scale(1.04);
}

/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {
  .partners {
    padding: 60px 36px 80px;
  }

  .partners__grid {
    gap: 32px;
  }

  .partners__heading {
    font-size: 28px;
  }

  .partners__para {
    max-width: 100%;
  }
}

/* =========================================================
   1100px
========================================================= */

@media (max-width: 1100px) {
  .partners {
    padding: 56px 28px 64px;
  }

  .partners__grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .partners__left {
    text-align: center;
  }

  .partners__underline {
    margin-left: auto;

    margin-right: auto;
  }

  .partners__para {
    margin-left: auto;

    margin-right: auto;
  }

  .partners__imageWrap {
    margin: 0 auto;
  }

  .partners__divider {
    display: none;
  }

  .partners__cards {
    max-width: 520px;
  }
}

/* =========================================================
   768px
========================================================= */

@media (max-width: 768px) {
  .partners {
    padding: 48px 20px 56px;
  }

  .partners__badge {
    margin-left: auto;

    margin-right: auto;

    justify-content: center;
  }

  .partners__heading {
    font-size: 25px;
  }

  .partners__para {
    font-size: 14.5px;
  }

  .partners__grid {
    gap: 40px;
  }

  .partners__imageWrap {
    max-width: 260px;
  }

  .partners__cards {
    gap: 14px;

    max-width: 440px;
  }

  .partners__card {
    height: 135px;
  }

  .partners__cardInner {
    padding: 16px;

    border-radius: 24px;
  }

  .partners__cardLogo {
    max-height: 85px;
  }
}

/* =========================================================
   640px
========================================================= */

@media (max-width: 640px) {
  .partners {
    padding: 40px 14px 48px;
  }

  .partners__heading {
    font-size: 24px;

    margin-top: 4px;
  }

  .partners__para {
    font-size: 14px;
  }

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

    max-width: 380px;

    gap: 12px;
  }

  .partners__imageWrap {
    max-width: 240px;
  }

  .partners__title {
    font-size: 19px;
  }

  .partners__card {
    height: 120px;
  }

  .partners__cardInner {
    padding: 12px;

    border-radius: 21px;
  }

  .partners__cardLogo {
    max-height: 75px;
  }
}

/* =========================================================
   400px
========================================================= */

@media (max-width: 400px) {
  .partners {
    padding: 32px 10px 40px;
  }

  .partners__heading {
    font-size: 20px;
  }

  .partners__para {
    font-size: 13px;

    line-height: 1.6;
  }

  .partners__imageWrap {
    max-width: 200px;
  }

  .partners__cards {
    gap: 10px;

    max-width: 300px;
  }

  .partners__card {
    height: 105px;
  }

  .partners__cardInner {
    padding: 10px;

    border-radius: 18px;
  }

  .partners__cardLogo {
    max-width: 92%;

    max-height: 65px;
  }
}