/* === MODERN CAROUSEL SLIDE DESIGN === */
/* Matches your HTML example — with AI content support */

/* Main Slide Container */
.social-card {
  width: 800px;
  height: 1000px;
  background: #f9f9f9;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Gradient Waves (Blurred, Floating) */
.wave {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(60px);
  animation: float 8s ease-in-out infinite alternate;
}

.wave.top {
  top: -200px;
  left: -200px;
  background: radial-gradient(circle at 30% 30%, #6366f1, #9333ea);
  animation-delay: 0s;
}

.wave.bottom {
  bottom: -200px;
  right: -200px;
  background: radial-gradient(circle at 70% 70%, #ec4899, #f43f5e);
  animation-delay: 3s;
}

@keyframes float {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(30px) scale(1.05); }
}

/* Slide Number (01) */
.number {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 40px;
  background: #fff;
  z-index: 2;
}

/* Headline Text */
.headline {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  max-width: 90%;
  z-index: 2;
  text-align: center;
  text-align-last: center;
  word-wrap: break-word;
}

/* Footer CTA Bar */
.footer {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

/* CTA Button */
.cta {
  border: 1px solid #111;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 22px;
  font-weight: 500;
  background: #fff;
}

/* Arrow Circle */
.arrow {
  width: 48px;
  height: 48px;
  border: 1px solid #111;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background: #fff;
}

/* === FORCE FULL SLIDE IN PREVIEW === */
.carousel-container {
  width: 800px !important;
  height: 1000px !important;
  margin: 0 auto;
  overflow: visible !important;
  position: relative;
}

.swiper {
  width: 100% !important;
  height: 100% !important;
  position: relative;
}

.swiper-slide {
  width: 800px !important;
  height: 1000px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}