body{
  background:#fff;
  color:#222;
  font-family:'Poppins', sans-serif;
}

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

.about-hero{
  height:80vh;
  background:
  linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
  url("/assets/liveshow.webp") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:80px;
}

.about-hero h1{
  font-size:56px;
  font-weight:800;
  color:#ffffff;
}

.about-hero p{
  font-size:18px;
  color:#fff;
}


/* ================= ABOUT SECTION ================= */

.about-section{
  padding:100px 8%;
  background:
    linear-gradient(135deg, rgba(138,92,255,.05), rgba(255,255,255,.95)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    );
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-image img{
  width:100%;
  border-radius:16px;
  box-shadow:
  0 10px 25px rgba(0,0,0,.12),
  0 0 25px rgba(184,92,255,.25);
}

.about-text h2{
  font-size:36px;
  margin-bottom:18px;
  color:#5f2cff;
}

.about-text p{
  color:#444;
  line-height:1.8;
  margin-bottom:18px;
}


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

.about-stats{
  padding:80px 8%;
  background:
    linear-gradient(135deg, rgba(138,92,255,.04), rgba(255,255,255,.95)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) 1px,
      transparent 1px,
      transparent 30px
    );
}

.stats-grid{
  display:flex;
  justify-content:center;
  gap:80px;
  text-align:center;
}

.stat h3{
  font-size:42px;
  background:linear-gradient(90deg,#b85cff,#4f8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat p{
  color:#555;
}


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

@media(max-width:768px){

.about-grid{
  grid-template-columns:1fr;
}

.about-hero h1{
  font-size:36px;
}

.stats-grid{
  flex-direction:column;
  gap:40px;
}

/* =========================================================
   FLOATING CALL BUTTON (MATCH ARROW BACKGROUND)
   ========================================================= */

.floating-call{
  position: fixed;
  bottom: 26px;
  left: 26px;

  width: 46px;
  height: 46px;
  border-radius: 50%;

  /* SAME BACKGROUND AS ARROW */
  background: #6C63FF;

  color: #ffffff;
  font-size: 20px;
  font-weight: 600;

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

  text-decoration: none;
  cursor: pointer;
  z-index: 2000;
  user-select: none;

  animation: arrowFloat 1.6s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-call:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(108,99,255,0.45);
}

.call-icon{
  width: 20px;
  height: 20px;
  fill: #ffffff; /* PURE WHITE ICON */
  pointer-events: none;
}


/* =========================================================
   FLOATING WHATSAPP BUTTON (WITH LOGO)
   ========================================================= */

.floating-whatsapp{
  position: fixed;
  bottom: 86px;   /* above Call button */
  left: 26px;

  width: 46px;
  height: 46px;
  border-radius: 50%;

  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  cursor: pointer;
  z-index: 2000;
  user-select: none;

  animation: waFloat 1.6s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-whatsapp:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
}

/* WhatsApp logo inside */
.wa-float-icon{
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

/* Floating animation */
@keyframes waFloat{
  0%   { transform: translateY(0); opacity: 0.85; }
  50%  { transform: translateY(8px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.85; }
}