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

body {
  background: linear-gradient(180deg, #190057 0%, #3a256c 100%);
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  cursor: url("/Assets/main_coursor.png") 0 0, auto;
}

.main-container {
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100vh;
  width: 100%;
}

.pink-blur,
.pink-stain {
  pointer-events: none; 
  position: absolute; 
  top: 0;
  z-index: 0; 
}

.pink-blur {
  background: rgba(255, 173, 169, 0.5);
  border-radius: 50%;
  filter: blur(clamp(30px, 6vw, 67px));
  height: clamp(150px, 15vw, 230px);
  left: 0; /* flush to the left edge */
  width: clamp(150px, 15vw, 230px);
}

.pink-stain {
  height: clamp(190px, 22vh, 310px);
  right: 0; /* flush to the right edge */
  width: clamp(130px, 20vw, 280px);
}

.pink-stain img {
  display: block;
  height: auto;
  width: 100%;
}

.header {
  align-items: center;
  backdrop-filter: blur(20px);
  background: linear-gradient(
    90deg,
    rgba(25, 0, 87, 0.7) 0%,
    rgba(64, 40, 121, 0.7) 50.48%,
    rgba(25, 0, 87, 0.7) 100%
  );
  border: 1px solid #7d68b3;
  border-radius: 90px;
  box-shadow: 0 0 40px 0 rgba(125, 104, 179, 0.2);
  display: flex;
  height: 116px;
  justify-content: space-between;
  margin: 0 auto 80px auto;
  max-width: 1320px;
  padding: 0 60px;
  position: sticky;
  top: 32px;
  width: 95%;
  z-index: 1000;
}

.logo {
  align-items: center;
  display: flex;
}

.nav {
  display: flex;
  gap: 48px;
}

.nav a {
  color: #fff;
  font-family: Inter;
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
}

.nav a:hover {
  color: rgba(255, 173, 169, 1);
}

.nav a:focus {
  color: #fb1d5a;
}

.nav a.nav-active {
  color: #fb1d5a;
}

.burger {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

.burger .burger-icon,
.burger .close-icon {
  display: block;
}

.burger .close-icon {
  display: none;
}

.mobile-menu {
  display: none;
}

.divider {
  background: #7d68b3;
  flex-shrink: 0;
  height: 2px;
}

.nav-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.content-wrapper {
  box-sizing: border-box;
  margin: 20px auto;
  max-width: 1320px; 
  padding: 0 60px;
  width: 100%;
}

.hero-header-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap; 
  gap: 2rem;
  justify-content: space-between;
  padding: 2rem 0;
  position: relative;
}

.hero-content {
  flex: 1;
  max-width: 58rem;
}

.hero-header {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.7rem, 4vw, 4.25rem);
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.hero-header .hero-white {
  color: #fff;
  font-weight: 700;
}

.hero-header .hero-yellow {
  color: var(--Yellow, #ffd455);
  font-weight: 600;
}

.hero-header .hero-pink {
  color: var(--Pink, #fb1d5a);
  font-weight: 700;
}

.hero-header .hero-by {
  color: #fff;
  font-weight: 600;
  margin: 0 0.5rem;
}

/* Subtitle */
.hero-subtitle {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 3rem;
  max-width: 40rem;
  opacity: 1;
}

.cta-buttons {
  display: flex;
  flex-wrap: nowrap; 
  gap: 1rem;
}

.btn {
  align-items: center;
  border: none;
  border-radius: 0.5rem;
  display: flex;
  flex: 1 1 auto; 
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 2vw, 1.75rem);
  font-weight: 900;
  gap: 0.6rem;
  justify-content: center;
  max-width: 13rem;
  min-width: 0;
  padding: 1rem 2rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: filter 0.2s;
}

.btn-primary {
  background: var(--Yellow, #ffd455);
  box-shadow: 0 0 1.75rem rgba(252, 209, 58, 0.2);
  color: var(--Blue, #190057);
}

.btn-secondary {
  background: var(--Pink, #fb1d5a);
  box-shadow: 0 0 1.75rem rgba(251, 29, 90, 0.2);
  color: #fff;
}

.btn:hover {
  background: rgba(255, 224, 134, 1);
}

.btn:active {
  background: rgba(255, 237, 185, 1);
}

.btn-secondary:hover {
  background: rgba(255, 76, 125, 1);
}

.btn-secondary:active {
  background: rgba(255, 132, 165, 1);
}

.bee-illustration {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 30vw; 
  max-height: 50vh; 
  z-index: 0; 
}

.bee-img {
  max-width: 100%;
  height: auto;
  object-fit: contain; 
}

.about {
  width: 100%;
}

.about-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 600;
}

.about-wrapper {
  height: 370px;
  margin-top: 32px;
  position: relative;
  width: 1192px; 
}

.about-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.about-hero-bg {
  backdrop-filter: blur(17px);
  background: rgba(110, 118, 174, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  height: 100%;
  left: 0;
  min-height: 370px;
  position: absolute;
  top: 0;
  width: 1192px;
}

.about-hero-box {
  backdrop-filter: blur(17px);
  background: rgba(27, 35, 92, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  left: 8px;
  line-height: 34px;
  margin-bottom: 60px;
  min-height: 370px;
  padding: 32px;
  position: absolute;
  top: 8px; 
  width: 1192px;
  z-index: 1;
}

.about-hero-box p:first-child {
  margin: 0 0 16px;
}

.about-hero-bold {
  color: #fb1d5a;
  font-weight: 700;
}
.about-hero-box .highlight {
  color: #fb1d5a;
  font-weight: 700;
}

.about-hero-pink {
  background: #fb1d5a80;
  border-radius: 128px;
  filter: blur(56px);
  height: 200px;
  position: absolute;
  right: -80px;
  top: -56px;
  width: 200px;
  z-index: 0; 
}

/* Trusted Section */
.trusted {
  margin-top: 3.75rem;
  text-align: left;
}

.trusted-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.trusted-subtitle {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 32px;
}

.trusted-logos {
  background: linear-gradient(180deg, #fff 0%, #e0c9ff 100%);
  height: 200px;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  position: relative;
  right: 50%;
  width: 100vw;
}

.logos-inner {
  align-items: flex-start;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 24px;
}

.trusted-logos[data-animated="true"] {
  overflow: hidden;
}

.trusted-logos[data-animated="true"] .logos-inner {
  animation: scroll var(--_animation-duration, 60s)
    var(--_animation-direction, forwards) linear infinite;
  flex-wrap: nowrap;
  width: max-content;
}

.trusted-logos[data-direction="right"] {
  --_animation-direction: reverse;
}

.trusted-logos[data-speed="slow"] {
  --_animation-duration: 180s;
}

.trusted-logos[data-speed="fast"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 20px));
  }
}

.logo-square {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 200px;
  justify-content: center;
  width: 200px;
}

.logo-square img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
/* Avoid Industries Section */
.avoid {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1400px; /* keeps layout centered */
  padding: 60px 0 0 0; /* uses viewport width for dynamic spacing */
  position: relative;
  width: 100%; /* prevents overflow from fit-content */
}

.avoid-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem); /* scales 28px–40px */
  font-weight: 600;
  margin-bottom: 20px;
}

.avoid-pink {
  color: #fb1d5a;
}

.avoid-subtitle {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
}

.avoid-subtitle:last-of-type {
  margin-bottom: 2.5rem;
}

.avoid-cards {
  box-sizing: border-box;
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  justify-content: center;
  width: 100%;
}

.avoid-card {
  align-items: center;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #ded0ff;
  border-radius: 8px;
  box-shadow: 0 0 28px 0 rgba(74, 61, 107, 0.2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: clamp(229px, 30vw, 380px);
  justify-content: space-evenly;
  padding: 24px 20px;
  transition: all 0.3s ease;
  width: clamp(172px, 22vw, 280px); /* 🔥 responsive, no overflow */
}

.avoid-icon {
  align-items: center;
  display: flex;
  height: clamp(80px, 11vw, 150px);
  justify-content: center;
  margin-bottom: 24px;
  width: clamp(80px, 11vw, 150px);
}

.avoid-icon img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.avoid-line {
  background-color: rgba(25, 0, 87, 0.5);
  border: none;
  height: 1px;
  margin: 24px 0 16px 0;
  width: 19.5rem;
}

.avoid-text {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  width: 282px;
}

.pink-blur-cards {
  background: rgba(255, 173, 169, 0.5);
  border-radius: 163px;
  filter: blur(72.82608795166016px);
  height: 250px;
  left: -100px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 250px;
  z-index: 0;
}

.bee-image {
  bottom: -230px;
  height: 418px;
  position: absolute;
  right: -50px;
  width: 504px;
}
/* Key Stats Section */
.key-stats {
  color: white;
  margin: 60px auto;
  max-width: 1200px;
  position: relative;
  text-align: center;
}

.key-stats h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: left;
}

.wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-left: 8px;
}

.stat {
  flex: 0 1 24rem;
  height: 11.188rem;
  max-width: 24rem; /* cap size */
  min-width: 18rem; /* don’t shrink too tiny */
  position: relative; /* local positioning context for front/back */
}

.stat-back,
.stat-front {
  backdrop-filter: blur(17px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Back card */
.stat-back {
  background: rgba(110, 118, 174, 0.7);
  transform: translate(-8px, -8px); /* offset */
  z-index: 1;
}

/* Front card */
.stat-front {
  align-items: center;
  background: rgba(27, 35, 92, 0.7);
  display: flex; /* centers number/label */
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.stat-front .number {
  color: var(--Pink, #fb1d5a);
  font-family: Inter, sans-serif;
  font-size: 64px;
  font-weight: 900;
  margin-bottom: 20px; /* distance to label */
}

.stat-front .label {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

.bee-illustration-stats {
  align-items: center;
  display: flex;
  height: 418px;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.bee-illustration-stats .bee-img {
  height: 418px;
  max-width: 300px;
  object-fit: cover;
  opacity: 0.8;
  overflow: hidden;
  width: 100%;
}

/* Reviews Section */
.rev-section {
  margin-top: 60px; /* 60px above Key Stats section */
}

.rev-header {
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  font-weight: 600;
  text-align: left;
}

/* Container for cards + backgrounds */
.rev-wrapper {
  margin-top: 40px;
  position: relative; /* for absolute background elements */
}

/* Background decoration */
.rev-background {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.rev-blur {
  background: rgba(255, 173, 169, 0.5);
  border-radius: 97.5px;
  filter: blur(43.695648193359375px);
  height: 150px;
  position: absolute;
  right: 200px;
  top: -60px;
  width: 150px;
}

.rev-bee {
  bottom: -100px;
  height: 321px;
  position: absolute;
  transform: scaleX(-1);
  width: 387px;
  z-index: 0;
}

/* Review card styles */
.rev-card {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #ded0ff;
  border-radius: 8px;
  box-shadow: 0 0 28px 0 rgba(74, 61, 107, 0.2);
  color: #fff;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
  min-height: 132px;
  padding: 32px;
  position: relative;
  text-align: left;
  width: 876px;
  z-index: 1;
}

.rev-card p {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

/* First card - top left */
.rev-card-left {
  margin-right: auto; /* left-aligned */
  margin-top: 40px; /* 40px below header */
}

/* Second card - right aligned */
.rev-card-right {
  margin-left: auto; /* right-aligned */
  margin-top: 40px; /* 40px below first card */
}

.pink-quote {
  color: #fb1d5a;
  font-weight: 900;
}

/* Section Services*/
.services {
  color: #fff;
  font-family: "Inter", sans-serif;
  margin: 60px 0 60px 0;
  max-width: 1200px;
  position: relative;
}

/* Header + Button row */
.services-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.services-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 600;
  margin: 0;
}

.services-btn {
  align-items: center;
  background: #fff;
  border: none;
  border-radius: 8px;
  color: #190057;
  cursor: pointer;
  display: flex;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  gap: 4px;
  padding: 16px 24px;
  text-decoration: none;
  z-index: 2;
}

.services-btn:hover {
  background: rgba(213, 213, 213, 1);
}

.services-btn:focus {
  background: rgba(165, 165, 165, 1);
}

.services-btn a {
  color: #190057;
  text-decoration: none;
}

.services-btn svg {
  flex-shrink: 0;
}

/* Subheader */
.services-subheader {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  margin: 20px 0 40px;
  text-align: left;
  width: 864px;
}

/* Wrapper for cards */
.services-wrapper {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

/* Service card (stacked style) */
.service-card {
  flex-shrink: 0;
  height: 330px;
  position: relative;
  width: 373px;
}

.service-bg {
  backdrop-filter: blur(20px);
  background: rgba(107, 113, 155, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  height: 330px;
  left: 0;
  position: absolute;
  top: 0;
  width: 373px;
}

.service-front {
  backdrop-filter: blur(20px);
  background: rgba(27, 35, 92, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 330px;
  left: 10px;
  padding: 32px;
  position: absolute;
  top: 8px;
  width: 373px;
  z-index: 1;
}

/* Card header */
.service-front h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}

/* List styles */
.service-front ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-front li {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 44px;
  padding-left: 24px;
  position: relative;
}

/* Custom pink bullets */
.service-front li::before {
  background: #fb1d5a;
  border-radius: 10px;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 18px;
  width: 8px;
}

.service-pink {
  aspect-ratio: 1 / 1;
  background: rgba(251, 29, 90, 0.5);
  border-radius: 160px;
  filter: blur(70px);
  height: 250px;
  overflow: hidden;
  position: absolute;
  right: -111px;
  top: -84px;
  width: 250px;
  z-index: 0;
}

.create-together {
  box-sizing: border-box;
  max-width: 1440px;
  min-height: 320px;
  position: relative;
}

.create-content {
  text-align: left;
  z-index: 2;
}

.create-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.create-subtitle {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-top: 16px;
}

.create-btn {
  align-items: center;
  background: #ffd455;
  border-radius: 8px;
  box-shadow: 0 0 28px 0 rgba(255, 212, 85, 0.2);
  color: #190057;
  display: flex;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  gap: 10px;
  justify-content: center;
  line-height: normal;
  margin-top: 40px;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  width: 236px;
  z-index: 3;
}

.create-top-btn {
  align-items: center;
  background: rgba(27, 35, 92, 0.97);
  border-radius: 8px;
  bottom: 100px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 80px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 100px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 80px;
  z-index: 1000;
}

.create-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.create-bee {
  align-items: center;
  bottom: 30px;
  display: flex;
  flex-shrink: 0;
  height: 321px;
  justify-content: center;
  position: absolute;
  right: 90px;
  width: 387px;
  z-index: -1;
}

.create-bee .bee-img {
  max-height: 100%;
  max-width: 100%;
}

.create-divider {
  background: linear-gradient(
    90deg,
    rgba(251, 29, 90, 0) 0%,
    #fb1d5a 50%,
    rgba(251, 29, 90, 0) 100%
  );
  height: 2px;
  margin: 0 auto 60px;
  opacity: 0.5;
  width: 100%;
}

/* ===============================
   FOOTER — DESKTOP BASE
   =============================== */
.footer {
  align-items: center;
  background: #020b4b;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  height: 132px;
  justify-content: center;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.footer-content {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  padding: 0 80px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.footer-left {
  align-items: center;
  display: flex;
  gap: 24px;
}

.footer-logo {
  align-items: center;
  display: flex;
}

.footer-text {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-social {
  display: flex;
  gap: 40px;
}

.social-link {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  text-decoration: none;
  width: 40px;
}

/* Decorative elements */
.create-bee {
  bottom: 20%;
  position: absolute;
  right: 0;
  z-index: -1;
}

.create-bee img {
  height: auto;
  width: 100%;
}

.yellow-stain {
  bottom: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.yellow-stain img {
  height: auto;
  width: 100%;
}