/* ================= ROOT ================= */
:root{
  --bg-main:#F2EFE7;
  --bg-section:#ebe7de;
  --bg-card:#ffffff;

  --gold:#8B004A;
  --gold-light:#b01263;

  --text-main:#2b0b1d;
  --text-muted:#6d4b5c;
}

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

html, body{
  background:var(--bg-main);
  color:var(--text-main);
  font-family:Poppins, sans-serif;
  overflow-x:hidden;
}

/* ================= SECTION ================= */
section{
  padding:100px 20px;
}

/* ================= GLOBAL HEADINGS ================= */
h2{
  text-align:center;
  color:var(--gold);
  font-size:42px;
  margin-bottom:20px;
  letter-spacing:1px;
}
/* ========================================
   FINAL ULTRA SMOOTH LUXURY LOADER
   MOBILE OPTIMIZED + FAST VERSION
======================================== */

.luxury-loader{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;

  overflow:hidden;

  background:
    radial-gradient(
      circle at top,
      rgba(255,0,140,0.30),
      transparent 40%
    ),

    radial-gradient(
      circle at bottom,
      rgba(255,0,128,0.22),
      transparent 45%
    ),

    linear-gradient(
      135deg,
      #16040d,
      #220814,
      #2d0a1b,
      #14030a
    );

  z-index:999999;

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

  transition:
    opacity .5s ease,
    visibility .5s ease;
}

/* ========================================
   LIGHT OVERLAY
======================================== */

.luxury-loader::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.03),
      transparent 70%
    );

  pointer-events:none;
}

/* ========================================
   NOISE
======================================== */

.loader-noise{
  position:absolute;
  inset:0;

  opacity:0.012;

  background-image:
    url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

  animation:noiseMove 1s linear infinite;

  pointer-events:none;
}

@keyframes noiseMove{

  0%{
    transform:translate(0);
  }

  50%{
    transform:translate(1px,-1px);
  }

  100%{
    transform:translate(0);
  }
}

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

.loader-center{
  position:relative;

  width:min(78vw,460px);
  aspect-ratio:1/1;

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

/* ========================================
   FRAME
======================================== */

.luxury-frame{
  position:absolute;

  width:100%;
  height:100%;

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

  transform:rotate(45deg);

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

  animation:
    frameRotate 10s linear infinite;
}

@keyframes frameRotate{

  from{
    transform:rotate(45deg);
  }

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

/* ========================================
   RINGS
======================================== */

.rotating-ring{
  position:absolute;
  border-radius:50%;
}

.ring-1{

  width:180px;
  height:180px;

  border:
    2px solid rgba(255,105,180,0.45);

  box-shadow:
    0 0 30px rgba(255,0,128,0.22);

  animation:
    spin 5s linear infinite;
}

.ring-2{

  width:250px;
  height:250px;

  border:
    1px dashed rgba(255,255,255,0.20);

  animation:
    spinReverse 7s linear infinite;
}

.ring-3{

  width:330px;
  height:330px;

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

  animation:
    spin 10s linear infinite;
}

@keyframes spin{

  from{
    transform:rotate(0deg);
  }

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

@keyframes spinReverse{

  from{
    transform:rotate(360deg);
  }

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

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

.brand-wrap{
  position:relative;
  z-index:5;
  text-align:center;
}

.loader-title{

  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;

  font-family:'Playfair Display', serif;

  font-size:clamp(42px,8vw,82px);

  font-weight:700;

  color:#fff0f6;

  letter-spacing:3px;

  text-shadow:
    0 0 10px rgba(255,0,128,0.5),
    0 0 30px rgba(255,0,128,0.25);
}

.loader-title span{

  display:inline-block;

  opacity:0;

  transform:
    translateY(40px)
    scale(0.8);

  animation:
    letterReveal .5s forwards;
}

.loader-title span:nth-child(1){animation-delay:.05s;}
.loader-title span:nth-child(2){animation-delay:.1s;}
.loader-title span:nth-child(3){animation-delay:.15s;}
.loader-title span:nth-child(4){animation-delay:.2s;}
.loader-title span:nth-child(5){animation-delay:.25s;}
.loader-title span:nth-child(6){animation-delay:.3s;}
.loader-title span:nth-child(7){animation-delay:.35s;}

@keyframes letterReveal{

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

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

.loader-subtitle{

  margin-top:14px;

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

  letter-spacing:6px;

  font-size:11px;

  opacity:0;

  animation:
    fadeUp .6s ease forwards;

  animation-delay:.5s;
}

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(10px);
  }

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

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

.brand-line{

  width:0%;

  height:1px;

  margin:auto;

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

  box-shadow:
    0 0 12px rgba(255,0,128,0.5);

  animation:
    lineExpand .7s ease forwards;
}

.top-line{
  margin-bottom:20px;
}

.bottom-line{
  margin-top:20px;
}

@keyframes lineExpand{

  to{
    width:100%;
  }
}

/* ========================================
   PROGRESS
======================================== */

.progress-wrap{

  position:absolute;

  bottom:40px;

  width:min(60vw,220px);

  height:2px;

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

  overflow:hidden;

  border-radius:20px;
}

.progress-bar{

  width:0%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      #ff007f,
      #ff5fa2,
      #ffffff
    );

  box-shadow:
    0 0 18px rgba(255,0,128,0.6);

  animation:
    progressLoad 1.1s ease forwards;
}

@keyframes progressLoad{

  from{
    width:0%;
  }

  to{
    width:100%;
  }
}

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

.particles::before{

  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,0.18) 1px,
      transparent 1px
    );

  background-size:120px 120px;

  opacity:0.05;

  animation:
    particlesFloat 12s linear infinite;
}

@keyframes particlesFloat{

  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(-80px);
  }
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .loader-center{
    width:88vw;
  }

  .loader-title{
    font-size:48px;
    letter-spacing:2px;
  }

  .loader-subtitle{
    font-size:9px;
    letter-spacing:3px;
  }

  .ring-1{
    width:150px;
    height:150px;
  }

  .ring-2{
    width:210px;
    height:210px;
  }

  .ring-3{
    width:280px;
    height:280px;
  }

  .progress-wrap{
    width:160px;
    bottom:22px;
  }

  /* REDUCE GPU LOAD */

  .luxury-frame{
    animation-duration:16s;
  }

  .ring-1{
    animation-duration:4s;
  }

  .ring-2{
    animation-duration:6s;
  }

  .ring-3{
    animation-duration:8s;
  }

}

/* ========================================
   EXTRA SMALL DEVICES
======================================== */

@media(max-width:480px){

  .loader-title{
    font-size:40px;
  }

  .loader-center{
    width:92vw;
  }

}

/* =========================================================
   NEXT LEVEL CINEMATIC HERO
========================================================= */

.hero-luxury{
  position:relative;

  min-height:100vh;

  overflow:hidden;

  display:flex;
  align-items:center;

  background:#0f0b12;
}

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

.hero-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;
}

.hero-bg img{
  position:absolute;

  top:50%;
  left:50%;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

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

  opacity:0;

  transition:
    opacity 1.5s ease;

  animation:
    heroZoom 14s ease-in-out infinite alternate;
}

.hero-bg img.active{
  opacity:1;
}

@keyframes heroZoom{

  0%{
    transform:
      translate(-50%, -50%) scale(1);
  }

  100%{
    transform:
      translate(-50%, -50%) scale(1.08);
  }

}

/* ================= OVERLAY ================= */

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to right,
      rgba(15,11,18,0.92) 5%,
      rgba(15,11,18,0.72) 35%,
      rgba(15,11,18,0.45) 60%,
      rgba(15,11,18,0.82) 100%
    );

  z-index:2;
}

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

.hero-luxury::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-200px;
  right:-100px;

  background:
    radial-gradient(circle,
    rgba(139,0,74,0.28),
    transparent 70%);

  filter:blur(80px);

  animation:floatGlow 8s ease-in-out infinite;

  z-index:1;
}

.hero-luxury::after{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  bottom:-150px;
  left:-120px;

  background:
    radial-gradient(circle,
    rgba(176,18,99,0.16),
    transparent 70%);

  filter:blur(90px);

  animation:floatGlow2 10s ease-in-out infinite;

  z-index:1;
}

@keyframes floatGlow{
  0%{
    transform:translateY(0px);
  }

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

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

@keyframes floatGlow2{
  0%{
    transform:translateY(0px);
  }

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

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

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

.hero-content{
  position:relative;
  z-index:20;

  width:760px;

  padding:65px 60px;

  margin-left:4%;

  border-radius:36px;

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

  backdrop-filter:blur(20px);

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

  box-shadow:
    0 25px 70px rgba(0,0,0,0.35);

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;

  overflow:hidden;
}

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

.hero-title{
  font-size:96px;

  line-height:0.9;

  font-family:'Playfair Display', serif;

  font-weight:700;

  letter-spacing:-3px;

  color:#ffffff;

  margin-bottom:25px;

  text-shadow:
    0 0 30px rgba(0,0,0,0.35);
}

.hero-title span{
  display:block;

  margin-top:5px;

  color:#ff0088;

  text-shadow:
    0 0 18px rgba(255,0,136,0.4),
    0 0 40px rgba(255,0,136,0.2);
}

/* ================= TEXT ================= */

.hero-tagline{
  font-size:24px;

  line-height:1.8;

  color:#f3e7d3;

  margin-top:8px;

  margin-bottom:45px;

  max-width:620px;

  font-weight:400;

  letter-spacing:0.3px;
}

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

.hero-buttons{
  display:flex;

  gap:20px;

  margin-top:10px;

  flex-wrap:wrap;
}

.hero-btn{
  display:inline-flex;

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

  padding:18px 38px;

  min-width:220px;

  border-radius:60px;

  text-decoration:none;

  font-size:17px;

  font-weight:600;

  transition:0.35s ease;
}

/* PRIMARY */

.hero-btn.primary{
  background:
    linear-gradient(
      135deg,
      #ff0088,
      #d41472
    );

  color:#fff;

  box-shadow:
    0 12px 35px rgba(255,0,136,0.32);
}

/* SECONDARY */

.hero-btn.secondary{
  background:
    rgba(255,255,255,0.08);

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

  color:#fff;

  backdrop-filter:blur(10px);
}

/* HOVER */

.hero-btn:hover{
  transform:
    translateY(-4px)
    scale(1.03);
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .hero-content{
    margin:0 20px;
    padding:40px 28px;
  }

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

  .hero-title br{
    display:none;
  }

  .hero-tagline{
    font-size:18px;
  }

  .hero-subtitle{
    font-size:15px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-btn{
    width:100%;
    text-align:center;
  }

}

/* ================= STATS ================= */
.stats{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
  margin-top:120px;
}

.stat{
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(139,0,74,0.1);
  padding:25px;
  border-radius:20px;
  text-align:center;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.stat h2{
  color:var(--gold);
}

.stat p{
  color:var(--text-main);
}

/* ========================================
   FINAL WORKING SERVICES SECTION
======================================== */

#services{
  padding:120px 6% !important;

  background:
    linear-gradient(
      to bottom,
      #f8f4ef,
      #f3ede7
    ) !important;

  overflow:hidden !important;
}

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

#services .section-header{
  text-align:center !important;
  margin-bottom:90px !important;
}

#services .section-eyebrow{
  color:#d41472 !important;

  font-size:14px !important;

  letter-spacing:4px !important;

  text-transform:uppercase !important;

  margin-bottom:18px !important;

  font-weight:600 !important;
}

#services .section-title{
  font-size:58px !important;

  color:#4a1430 !important;

  font-family:'Playfair Display', serif !important;

  font-weight:700 !important;

  line-height:1.1 !important;
}

#services .red-line{
  width:100px !important;
  height:4px !important;

  margin:24px auto 0 !important;

  border-radius:20px !important;

  background:
    linear-gradient(
      90deg,
      #8B004A,
      #ff0088
    ) !important;
}

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

#services .services-grid{
  display:grid !important;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr)) !important;

  gap:42px !important;

  align-items:stretch !important;
}

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

#services .service-card{
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  padding:24px !important;

  border-radius:32px !important;

  background:rgba(255,255,255,0.58) !important;

  border:1px solid rgba(139,0,74,0.12) !important;

  box-shadow:
    0 10px 35px rgba(0,0,0,0.08) !important;

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease !important;
}

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

#services .service-card:hover{
  transform:translateY(-12px) !important;

  box-shadow:
    0 20px 50px rgba(139,0,74,0.16),
    0 0 35px rgba(139,0,74,0.08) !important;
}

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

#services .service-img{
  width:100% !important;

  height:260px !important;

  display:block !important;

  object-fit:cover !important;

  object-position:center !important;

  border-radius:24px !important;

  margin-bottom:24px !important;

  flex-shrink:0 !important;

  max-width:100% !important;
}

/* IMAGE HOVER */

#services .service-card:hover .service-img{
  transform:scale(1.05) !important;

  transition:0.7s ease !important;
}

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

#services .service-icon{
  width:74px !important;
  height:74px !important;

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

  border-radius:50% !important;

  background:
    linear-gradient(
      135deg,
      #8B004A,
      #d41472
    ) !important;

  color:#ffffff !important;

  font-size:32px !important;

  margin-bottom:22px !important;
}

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

#services .service-title{
  font-size:34px !important;

  line-height:1.2 !important;

  margin-bottom:16px !important;

  color:#4a1430 !important;

  font-family:'Playfair Display', serif !important;

  font-weight:700 !important;
}

/* ================= DESC ================= */

#services .service-desc{
  color:#5f4a57 !important;

  font-size:16px !important;

  line-height:1.9 !important;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  #services{
    padding:90px 20px !important;
  }

  #services .section-title{
    font-size:42px !important;
  }

  #services .services-grid{
    gap:28px !important;
  }

  #services .service-title{
    font-size:28px !important;
  }

  #services .service-img{
    height:220px !important;
  }

}

/* ================= STORY ================= */
.story-scroll{
  height:300vh;
}

.story-track{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
}

.story-panel{
  min-width:100%;
  display:flex;
  justify-content:center;
}

.story-panel h1{
  font-size:60px;
  color:var(--gold);
  text-shadow:
    0 0 15px rgba(139,0,74,0.18),
    0 0 30px rgba(139,0,74,0.08);
}

/* ================= FEATURED ================= */
.featured{
  text-align:center;
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  margin-top:50px;
}

.featured-card{
  perspective:1000px;
}

.featured-card-inner{
  position:relative;
  width:100%;
  height:350px;
  transform-style:preserve-3d;
  transition:0.8s;
}

.featured-card:hover .featured-card-inner{
  transform:rotateY(180deg);
}

.featured-front,
.featured-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:20px;
  overflow:hidden;
}

.featured-front img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.featured-back{
  transform:rotateY(180deg);
  background:var(--bg-card);
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--gold);
  border:1px solid rgba(139,0,74,0.12);
  box-shadow:
    inset 0 0 25px rgba(139,0,74,0.04),
    0 15px 35px rgba(0,0,0,0.08);
}

/* ================= WHY ================= */
.why{
  text-align:center;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  max-width:1000px;
  margin:auto;
}

.why-card{
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(139,0,74,0.1);
  padding:30px;
  border-radius:20px;
  transition:0.3s;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.why-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 20px 40px rgba(139,0,74,0.12),
    0 0 20px rgba(139,0,74,0.08);
}

.why-card h3{
  color:var(--gold);
  margin-bottom:10px;
}

.why-card p{
  color:var(--text-muted);
}

/* ================= GALLERY ================= */
.gallery{
  padding:120px 20px;

  text-align:center;
}

.gallery-subtext{
  margin-top:10px;
  margin-bottom:40px;
  color:var(--text-muted);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  max-width:900px;
  margin:auto;
}

.gallery-grid img{
  width:100%;
  border-radius:14px;
  transition:0.4s;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.gallery-grid img:hover{
  transform:scale(1.05);
  box-shadow:
    0 20px 45px rgba(139,0,74,0.15),
    0 0 20px rgba(139,0,74,0.08);
}

/* ================= FINAL GALLERY BUTTON ================= */

.gallery-btn{
  display:inline-flex !important;

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

  margin-top:70px !important;

  padding:18px 48px;

  border-radius:60px;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #c4006b
    ) !important;

  color:#ffffff !important;

  text-decoration:none !important;

  font-size:18px;

  font-weight:600;

  letter-spacing:0.3px;

  border:none;

  box-shadow:
    0 15px 35px rgba(255,0,136,0.28);

  transition:0.4s ease;
}

.gallery-btn:hover{
  transform:
    translateY(-5px)
    scale(1.03);

  box-shadow:
    0 22px 45px rgba(255,0,136,0.4);
}

/* =========================================================
   FINAL CTA BUTTON FIX
========================================================= */

.cta{
  text-align:center;

  padding:140px 20px;
}

.cta-buttons{
  display:flex;

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

  gap:28px;

  flex-wrap:wrap;

  margin-top:60px;
}

/* MAIN BUTTON */

.cta-btn{
  display:inline-flex !important;

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

  padding:18px 42px;

  border-radius:60px;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #c4006b
    ) !important;

  color:#ffffff !important;

  text-decoration:none !important;

  font-size:18px;

  font-weight:600;

  letter-spacing:0.3px;

  border:none;

  box-shadow:
    0 15px 35px rgba(255,0,136,0.22);

  transition:0.4s ease;
}

/* OUTLINE BUTTON */

.cta-btn.outline{
  background:
    rgba(255,255,255,0.55) !important;

  color:#8b004a !important;

  border:
    1px solid rgba(255,0,136,0.18);
}

/* HOVER */

.cta-btn:hover{
  transform:
    translateY(-5px)
    scale(1.03);

  box-shadow:
    0 22px 45px rgba(255,0,136,0.35);
}

/* ========================================
   FINAL FLOATING BUTTONS
======================================== */

.whatsapp-btn,
.insta-btn{

  position:fixed;

  right:16px;

  width:52px;
  height:52px;

  border-radius:50%;

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

  color:#fff;

  font-size:22px;

  z-index:999999;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.22);

  transition:0.35s ease;
}

.whatsapp-btn:hover,
.insta-btn:hover{

  transform:
    translateY(-4px)
    scale(1.05);
}

/* INSTAGRAM */

.insta-btn{

  bottom:86px;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #8B004A
    );
}

/* WHATSAPP */

.whatsapp-btn{

  bottom:20px;

  background:
    linear-gradient(
      135deg,
      #25D366,
      #11b857
    );
}

/* MOBILE */

@media(max-width:768px){

  .whatsapp-btn,
  .insta-btn{

    right:14px;

    width:48px;
    height:48px;

    font-size:20px;
  }

  .insta-btn{
    bottom:78px;
  }

  .whatsapp-btn{
    bottom:18px;
  }

}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .hero-title{ font-size:35px; }
  .gallery-grid{ grid-template-columns:1fr; }
}

/* ================= CURSOR ================= */

/* ONLY DESKTOP (no touch devices) */
@media (hover: hover) and (pointer: fine) {

  body {
    cursor: none;
  }

  .cursor {
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, background 0.2s;
    display: block;
    box-shadow:
      0 0 15px rgba(139,0,74,0.35),
      0 0 30px rgba(139,0,74,0.15);
  }

  .cursor::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
  }

}

/* MOBILE (touch devices) */
@media (hover: none) and (pointer: coarse) {

  body {
    cursor: auto;
  }

  .cursor {
    display: none !important;
  }

}

/* ================= MENU FLIP FIX ================= */

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.menu-card{
  perspective:1000px;
}

.menu-card .card-inner{
  position:relative;
  width:100%;
  height:300px;
  transform-style:preserve-3d;
  transition:0.8s;
}

/* FLIP ON HOVER */
.menu-card:hover .card-inner{
  transform:rotateY(180deg);
}

.card-front,
.card-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:20px;
  overflow:hidden;
}

/* FRONT IMAGE */
.card-front img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* BACK SIDE */
.card-back{
  transform:rotateY(180deg);
  background:var(--bg-card);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  color:var(--gold);
  border:1px solid rgba(139,0,74,0.1);

  box-shadow:
    inset 0 0 25px rgba(139,0,74,0.04),
    0 15px 35px rgba(0,0,0,0.08);
}

/* ================= PREMIUM BORDER GLOW ================= */

/* COMMON GLOW EFFECT */
.glow-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

/* GLOW BORDER LAYER */
.glow-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(139,0,74,0.7),
    rgba(176,18,99,0.95),
    rgba(139,0,74,0.7),
    transparent
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:0.45;
  transition:0.4s;
}

/* HOVER GLOW BOOST */
.glow-card:hover::before{
  opacity:1;
  filter:blur(2px);
}

/* SUBTLE PULSE */
.glow-card:hover{
  box-shadow:
    0 0 12px rgba(139,0,74,0.25),
    0 0 30px rgba(139,0,74,0.18),
    0 0 55px rgba(139,0,74,0.12);
}

/* ================= GALLERY TABS ================= */
.gallery-tabs{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:30px;
}

.tab{
  padding:10px 20px;
  border-radius:30px;
  border:1px solid rgba(139,0,74,0.15);
  background:transparent;
  color:var(--text-main);
  cursor:pointer;
  transition:0.3s;
}

.tab.active,
.tab:hover{
  background:linear-gradient(135deg,#8B004A,#b01263);
  color:#ffffff;
  box-shadow:0 10px 25px rgba(139,0,74,0.25);
}

/* ================= GALLERY DISPLAY ================= */
.gallery-display{
  max-width:900px;
  margin:auto;
}

.gallery-set{
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.gallery-set.active{
  display:grid;
}

.gallery-set img{
  width:100%;
  border-radius:12px;
  transition:0.4s;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.gallery-set img:hover{
  transform:scale(1.05);
  box-shadow:
    0 18px 40px rgba(139,0,74,0.15),
    0 0 20px rgba(139,0,74,0.08);
}

/* ================= CTA POLISH ================= */
.about-cta{
  text-align:center;
  background:var(--bg-section);
  padding:80px 20px;
}

.about-cta h2{
  color:var(--gold);
  margin-bottom:10px;
}

.about-cta p{
  color:var(--text-muted);
  margin-bottom:25px;
}

/* ================= MOBILE FIX ================= */
@media(max-width:768px){

  .gallery-set{
    grid-template-columns:1fr;
  }

  .experience-box{
    padding:30px;
  }

}

/* ================= MENU TITLE ================= */
.menu-title{
  text-align:center;
  font-size:50px;
  margin-bottom:40px;
  font-family:'Playfair Display', serif;
}

.menu-title span{
  color:var(--gold);
  text-shadow:
    0 0 12px rgba(139,0,74,0.35),
    0 0 25px rgba(139,0,74,0.18);
}

/* ================= FEATURED ================= */
.menu-featured{
  margin-bottom:60px;
}

.featured-box{
  display:flex;
  gap:40px;
  align-items:center;
  background:rgba(255,255,255,0.45);
  padding:30px;
  border-radius:25px;
  border:1px solid rgba(139,0,74,0.08);
  backdrop-filter:blur(12px);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.08),
    inset 0 0 20px rgba(139,0,74,0.03);
}

.featured-box img{
  width:300px;
  border-radius:20px;
}

.featured-content h2{
  color:var(--gold);
}

.featured-content p{
  color:var(--text-muted);
}

.price{
  display:block;
  margin-top:10px;
  font-size:22px;
  color:var(--gold);
}

/* ================= CARD HOVER DEPTH ================= */
.menu-card{
  transition:0.4s;
}

.menu-card:hover{
  transform:translateY(-10px) scale(1.03);

  box-shadow:
    0 20px 40px rgba(139,0,74,0.15),
    0 0 20px rgba(139,0,74,0.08);
}

/* ================= CTA ================= */
.menu-cta{
  text-align:center;
  margin-top:80px;
}

.menu-cta h2{
  margin-bottom:20px;
  color:var(--gold);

  text-shadow:
    0 0 12px rgba(139,0,74,0.35),
    0 0 28px rgba(139,0,74,0.15);
}

/* ========================================
   PREMIUM GALLERY SLIDER
======================================== */

.premium-gallery-slider{

  position:relative;

  padding:140px 0;

  overflow:hidden;

  text-align:center;

  background:
    radial-gradient(
      circle at top,
      rgba(139,0,74,0.10),
      transparent 32%
    ),
    linear-gradient(
      to bottom,
      #f7f2eb,
      #f2ebe4,
      #efe7df
    );
}

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

.premium-gallery-slider::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-250px;
  left:50%;

  transform:translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(139,0,74,0.14),
      transparent 70%
    );

  filter:blur(90px);

  z-index:0;

  animation:
    galleryGlow 7s ease-in-out infinite;
}

@keyframes galleryGlow{

  0%{
    transform:
      translateX(-50%)
      scale(1);
  }

  50%{
    transform:
      translateX(-50%)
      scale(1.08);
  }

  100%{
    transform:
      translateX(-50%)
      scale(1);
  }

}

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

.gallery-main-title{

  text-align:center;

  font-size:68px;

  color:var(--gold);

  margin-bottom:15px;

  font-family:'Playfair Display', serif;

  text-shadow:
    0 0 18px rgba(139,0,74,0.18),
    0 0 40px rgba(139,0,74,0.08);

  position:relative;
  z-index:2;
}

.gallery-subtitle{

  text-align:center;

  color:var(--text-muted);

  margin-bottom:70px;

  font-size:18px;

  letter-spacing:0.5px;

  position:relative;
  z-index:2;
}

/* ========================================
   WRAPPER
======================================== */

.premium-slider-wrapper{

  position:relative;

  width:100%;

  max-width:1450px;

  margin:auto;

  height:700px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  z-index:2;
}

/* ========================================
   SLIDER
======================================== */

.premium-slider{

  position:relative;

  width:100%;

  height:100%;

  perspective:1800px;
}

/* ========================================
   SLIDES
======================================== */

.premium-slide{

  position:absolute;

  left:50%;
  top:50%;

  width:240px;
  height:340px;

  border-radius:32px;

  overflow:hidden;

  opacity:0;

  filter:blur(4px);

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

  border:
    1px solid rgba(139,0,74,0.10);

  backdrop-filter:blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.10);

  will-change:
    transform,
    opacity;

  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    transform 0.9s cubic-bezier(.22,1,.36,1);

  transform-origin:center center;

  backface-visibility:hidden;

  transform-style:preserve-3d;
}

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

.premium-slide.active{

  width:430px;
  height:560px;

  opacity:1;

  filter:blur(0px);

  z-index:10;

  transform:
    translate(-50%, -50%) scale(1) !important;

  box-shadow:
    0 35px 90px rgba(139,0,74,0.24),
    0 0 55px rgba(194,24,106,0.12);
}

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

.premium-slide.left-1{

  opacity:0.55;

  filter:blur(1px);

  z-index:6;
}

.premium-slide.left-2{

  opacity:0.18;

  z-index:4;
}

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

.premium-slide.right-1{

  opacity:0.55;

  filter:blur(1px);

  z-index:6;
}

.premium-slide.right-2{

  opacity:0.18;

  z-index:4;
}

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

.premium-slide img{

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:32px;

  transition:
    transform 1.2s ease;
}

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

.premium-slide.active:hover img{

  transform:scale(1.08);
}

/* ========================================
   OVERLAY
======================================== */

.premium-slide::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(20,5,12,0.30),
      transparent 40%
    );

  opacity:0;

  transition:0.5s ease;
}

.premium-slide.active::after{
  opacity:1;
}

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

.premium-slider-btn{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:70px;
  height:70px;

  border-radius:50%;

  border:none;

  background:
    linear-gradient(
      135deg,
      #8B004A,
      #c2186a
    );

  color:#ffffff;

  font-size:18px;

  cursor:pointer;

  z-index:50;

  overflow:hidden;

  box-shadow:
    0 10px 35px rgba(139,0,74,0.20);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    background 0.4s ease;
}

.premium-slider-btn::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.35),
      transparent
    );

  opacity:0;

  transition:0.4s;
}

.premium-slider-btn:hover::before{
  opacity:1;
}

.premium-prev{
  left:35px;
}

.premium-next{
  right:35px;
}

.premium-slider-btn:hover{

  transform:
    translateY(-50%)
    scale(1.08);

  box-shadow:
    0 0 25px rgba(139,0,74,0.30),
    0 0 45px rgba(176,18,99,0.14);

  background:
    linear-gradient(
      135deg,
      #8B004A,
      #d41472
    );
}

/* ========================================
   HIDE BUTTON
======================================== */

.hide-btn{

  opacity:0 !important;

  pointer-events:none !important;

  transform:
    translateY(-50%)
    scale(0.6);
}

/* ========================================
   EXPERIENCE SECTION
======================================== */

.gallery{

  position:relative;

  padding:120px 0;

  overflow:hidden;

  background:
    radial-gradient(
      circle at top,
      rgba(139,0,74,0.10),
      transparent 30%
    ),
    linear-gradient(
      to bottom,
      #f8f3ee,
      #f2ebe4,
      #efe7df
    );
}

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

.experience-title{

  text-align:center;

  margin-bottom:10px;

  font-size:52px;

  color:#8B004A;

  font-family:'Playfair Display', serif;

  text-shadow:
    0 0 18px rgba(139,0,74,0.15);

  position:relative;

  z-index:5;
}

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

.experience-subtitle{

  text-align:center;

  color:#8c6d7a;

  margin-bottom:60px;

  font-size:18px;

  letter-spacing:0.5px;

  position:relative;

  z-index:5;
}

/* ========================================
   INTERIOR WRAPPER
======================================== */

.interior-slider-wrapper{

  position:relative;

  width:100%;

  max-width:1450px;

  margin:auto;

  height:650px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;
}

/* ========================================
   INTERIOR SLIDER
======================================== */

.interior-slider{

  position:relative;

  width:100%;

  height:100%;
}

/* ========================================
   INTERIOR SLIDES
======================================== */

.interior-slide{

  position:absolute;

  left:50%;
  top:50%;

  width:240px;
  height:340px;

  border-radius:28px;

  overflow:hidden;

  opacity:0;

  transition:
    all 0.7s cubic-bezier(.22,1,.36,1);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);
}

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

.interior-slide.active{

  width:390px;
  height:520px;

  opacity:1;

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

  z-index:10;

  box-shadow:
    0 30px 70px rgba(139,0,74,0.22),
    0 0 45px rgba(176,18,99,0.10);
}

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

.interior-slide.left{

  opacity:0.5;

  transform:
    translate(calc(-50% - 320px), -50%)
    scale(0.82);

  z-index:6;

  filter:blur(1px);
}

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

.interior-slide.right{

  opacity:0.5;

  transform:
    translate(calc(-50% + 320px), -50%)
    scale(0.82);

  z-index:6;

  filter:blur(1px);
}

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

.interior-slide img{

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:28px;
}

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

.interior-slider-btn{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:65px;
  height:65px;

  border:none;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #8B004A,
      #c2186a
    );

  color:#ffffff;

  font-size:18px;

  cursor:pointer;

  z-index:999;

  box-shadow:
    0 10px 30px rgba(139,0,74,0.22);

  transition:0.4s ease;
}

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

.interior-slider-btn:hover{

  transform:
    translateY(-50%)
    scale(1.08);

  box-shadow:
    0 0 25px rgba(139,0,74,0.30);
}

/* ========================================
   LEFT BUTTON
======================================== */

.interior-prev{

  left:25px;

  display:flex;

  align-items:center;

  justify-content:center;
}

/* ========================================
   RIGHT BUTTON
======================================== */

.interior-next{

  right:25px;

  display:flex;

  align-items:center;

  justify-content:center;
}

/* ========================================
   SALON MOMENTS TITLE
======================================== */

.menu-title{

  text-align:center;

  font-size:52px;

  color:#8B004A;

  margin-bottom:50px;

  font-family:'Playfair Display', serif;

  text-shadow:
    0 0 18px rgba(139,0,74,0.14);
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:992px){

  .gallery-main-title{
    font-size:52px;
  }

  .premium-slide.active{

    width:320px;
    height:450px;
  }

  .premium-slide{

    width:170px;
    height:260px;
  }

}

@media(max-width:768px){

  .premium-gallery-slider{
    padding:100px 0;
  }

  .gallery-main-title{
    font-size:42px;
  }

  .gallery-subtitle{
    font-size:15px;
    padding:0 20px;
  }

  .premium-slider-wrapper{
    height:500px;
  }

  .premium-slide.active{

    width:260px;
    height:360px;
  }

  .premium-slide{

    width:120px;
    height:200px;
  }

  .premium-slider-btn{

    width:55px;
    height:55px;

    font-size:16px;
  }

  .premium-prev{
    left:10px;
  }

  .premium-next{
    right:10px;
  }

  .interior-slider-wrapper{
    height:500px;
  }

  .interior-slide.active{

    width:260px;
    height:360px;
  }

  .interior-slide{

    width:130px;
    height:200px;
  }

  .interior-slide.left{

    transform:
      translate(calc(-50% - 170px), -50%)
      scale(0.82);
  }

  .interior-slide.right{

    transform:
      translate(calc(-50% + 170px), -50%)
      scale(0.82);
  }

  .interior-slider-btn{

    width:55px;
    height:55px;

    font-size:15px;
  }

  .interior-prev{
    left:10px;
  }

  .interior-next{
    right:10px;
  }

  .experience-title{
    font-size:40px;
  }

  .menu-title{
    font-size:42px;
  }

}

/* =========================================================
   ULTRA PREMIUM BOOKING PAGE
========================================================= */

.luxury-booking *,
.luxury-booking *::before,
.luxury-booking *::after{

  box-sizing:border-box;
}

/* ================= BOOKING SECTION ================= */

.luxury-booking{

  position:relative;

  min-height:100vh;

  display:flex;

  align-items:center;

  padding:
    180px 6%
    140px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #120811,
      #1b0c18,
      #120811
    );

  color:#ffffff;
}

/* ========================================
   BACKGROUND BLUR
======================================== */

.booking-blur{

  position:absolute;

  border-radius:50%;

  filter:blur(100px);

  opacity:0.35;

  pointer-events:none;
}

.blur-one{

  width:500px;
  height:500px;

  background:#ff0088;

  top:-150px;
  left:-150px;

  animation:floatBlur 8s ease-in-out infinite;
}

.blur-two{

  width:420px;
  height:420px;

  background:#8B004A;

  bottom:-120px;
  right:-120px;

  animation:floatBlur2 10s ease-in-out infinite;
}

@keyframes floatBlur{

  0%{
    transform:translateY(0px);
  }

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

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

}

@keyframes floatBlur2{

  0%{
    transform:translateY(0px);
  }

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

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

}

/* ========================================
   FLOATING LINES
======================================== */

.booking-floating-line{

  position:absolute;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.12),
      transparent
    );

  width:1px;

  height:300px;

  opacity:0.3;

  pointer-events:none;
}

.line-1{

  left:12%;
  top:10%;
}

.line-2{

  right:15%;
  bottom:10%;
}

/* ========================================
   MAIN WRAPPER
======================================== */

.luxury-booking-wrapper{

  position:relative;

  z-index:10;

  width:100%;

  max-width:1450px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:70px;

  flex-wrap:wrap;
}

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

.booking-left{

  flex:1;

  min-width:320px;

  position:relative;

  z-index:5;
}

.booking-live{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:14px 24px;

  border-radius:60px;

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

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

  color:#ff5fa7;

  font-size:13px;

  letter-spacing:2px;

  margin-bottom:35px;

  backdrop-filter:blur(10px);
}

.live-dot{

  width:12px;
  height:12px;

  border-radius:50%;

  background:#ff004c;

  box-shadow:
    0 0 18px #ff004c;

  animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.3);
  }

  100%{
    transform:scale(1);
  }

}

.booking-left h1{

  font-size:88px;

  line-height:0.95;

  color:#ffffff;

  margin-bottom:35px;

  font-family:'Playfair Display', serif;

  font-weight:700;
}

.booking-left h1 span{

  display:block;

  color:#ff0088;
}

.booking-left p{

  color:#f3dce8;

  font-size:20px;

  line-height:1.9;

  max-width:650px;

  margin-bottom:50px;
}

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

.booking-features{

  display:flex;

  flex-direction:column;

  gap:25px;
}

.booking-feature{

  display:flex;

  align-items:center;

  gap:20px;

  padding:24px;

  border-radius:28px;

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

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

  backdrop-filter:blur(16px);

  transition:0.4s ease;
}

.booking-feature:hover{

  transform:
    translateX(10px);

  box-shadow:
    0 15px 40px rgba(255,0,136,0.12);
}

.feature-icon{

  width:70px;
  height:70px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #c4006b
    );

  color:#ffffff;

  font-size:24px;

  flex-shrink:0;
}

.booking-feature h3{

  color:#ffffff;

  margin-bottom:6px;

  font-size:22px;
}

.booking-feature span{

  color:#dcb9c9;

  font-size:15px;
}

/* ========================================
   GLASS CARD
======================================== */

.booking-glass-card{

  flex:1;

  min-width:340px;

  padding:60px;

  border-radius:40px;

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

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

  backdrop-filter:blur(22px);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.28);

  position:relative;

  overflow:hidden;

  z-index:10;
}

.booking-glass-card::before{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.12),
      transparent 70%
    );

  top:-100px;
  right:-100px;

  pointer-events:none;
}

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

.booking-card-top{

  margin-bottom:40px;

  position:relative;

  z-index:5;
}

.booking-card-top h2{

  color:#ffffff;

  font-size:48px;

  margin-bottom:15px;

  font-weight:700;
}

.booking-card-top p{

  color:#e7d4de;

  line-height:1.8;
}

/* ========================================
   FORM
======================================== */

#luxuryBookingForm{

  display:grid;

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

  gap:25px;

  position:relative;

  z-index:10;
}

/* ========================================
   INPUT GROUP
======================================== */

.luxury-input-group{

  position:relative;
}

.full-width{

  grid-column:span 2;
}

.luxury-input-group i{

  position:absolute;

  left:18px;
  top:50%;

  transform:translateY(-50%);

  color:#ff0088;

  z-index:5;
}

.luxury-input-group input,
.luxury-input-group select{

  width:100%;

  height:68px;

  border-radius:22px;

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

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

  color:#ffffff;

  padding:
    0 20px 0 52px;

  outline:none;

  font-size:16px;

  transition:0.4s ease;

  backdrop-filter:blur(10px);
}

.luxury-input-group input::placeholder{

  color:#ffffff;
}

.luxury-input-group select{

  appearance:none;

  cursor:pointer;
}

.luxury-input-group input:focus,
.luxury-input-group select:focus{

  border:
    1px solid #ff0088;

  box-shadow:
    0 0 25px rgba(255,0,136,0.22);
}

/* ========================================
   INPUT FIXES
======================================== */

input[type="date"],
input[type="time"]{

  color:#ffffff;
}

.luxury-input-group select option{

  background:#1a0d18;

  color:#ffffff;
}

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

.luxury-input-group label{

  position:absolute;

  left:52px;
  top:50%;

  transform:translateY(-50%);

  color:#d8c0cb;

  transition:0.3s ease;

  pointer-events:none;
}

.luxury-input-group input:focus + label,
.luxury-input-group input:valid + label{

  top:-8px;

  font-size:12px;

  color:#ff4fa3;

  background:#1a0d18;

  padding:0 8px;
}

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

.luxury-book-btn{

  grid-column:span 2;

  height:72px;

  border:none;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #c4006b
    );

  color:#ffffff;

  font-size:18px;

  font-weight:600;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  transition:0.4s ease;

  box-shadow:
    0 18px 40px rgba(255,0,136,0.22);

  position:relative;

  z-index:20;
}

.luxury-book-btn:hover{

  transform:
    translateY(-5px)
    scale(1.02);

  box-shadow:
    0 28px 55px rgba(255,0,136,0.35);
}

/* ========================================
   GLOBAL FIXES
======================================== */

html,
body{

  overflow-x:hidden;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:992px){

  .luxury-booking-wrapper{

    flex-direction:column;

    gap:70px;
  }

  .booking-left h1{

    font-size:68px;
  }

}

@media(max-width:768px){

  .luxury-booking{

    padding:
      140px 20px
      90px;
  }

  .booking-left h1{

    font-size:52px;
  }

  .booking-left p{

    font-size:17px;
  }

  .booking-glass-card{

    padding:35px 25px;
  }

  #luxuryBookingForm{

    grid-template-columns:1fr;
  }

  .full-width,
  .luxury-book-btn{

    grid-column:span 1;
  }

  .booking-card-top h2{

    font-size:36px;
  }

  .booking-feature{

    padding:20px;
  }

  .feature-icon{

    width:58px;
    height:58px;

    font-size:20px;
  }

}

/* ================= CONTACT (FINAL FIXED VERSION) ================= */

.contact-section {
  padding: 100px 20px;

  background:
    radial-gradient(circle at top,
    #f7f2eb,
    #F2EFE7);
}

/* TITLE */
.contact-title {
  text-align: center;
  font-size: 48px;

  color: var(--gold);

  margin-bottom: 50px;

  text-shadow:
    0 0 12px rgba(139,0,74,0.35);
}

/* FORCE ALWAYS COLUMN */
section.contact-section .contact-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px;
  max-width: 900px;
  margin: auto;
}

/* CARD */
section.contact-section .contact-info {
  width: 100%;
}

/* GLASS */
section.contact-section .glass {
  background: rgba(255,255,255,0.45);

  backdrop-filter: blur(15px);

  border: 1px solid rgba(139,0,74,0.08);

  border-radius: 20px;
  padding: 30px;

  transition: 0.3s;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.08);
}

section.contact-section .glass:hover {

  box-shadow:
    0 15px 40px rgba(139,0,74,0.12),
    0 0 20px rgba(139,0,74,0.06);
}

/* TEXT */
section.contact-section .contact-info h2 {
  font-size: 26px;
  margin-bottom: 15px;

  color: var(--gold);
}

section.contact-section .contact-info p {
  margin-bottom: 10px;
  color: var(--text-muted);
}

/* BUTTONS */
section.contact-section .contact-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

section.contact-section .btn {
  padding: 12px 20px;

  background:
    linear-gradient(135deg,#8B004A,#b01263);

  color: #ffffff;

  border-radius: 10px;
  text-decoration: none;

  transition: 0.3s;
}

section.contact-section .btn:hover {
  transform: scale(1.05);

  box-shadow:
    0 10px 25px rgba(139,0,74,0.25);
}

section.contact-section .btn.outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}

section.contact-section .btn.outline:hover {
  background: var(--gold);
  color: #ffffff;
}

/* ================= MAP ================= */
section.contact-section .contact-map {
  width: 100% !important;
  height: 350px !important;
}

section.contact-section .contact-map iframe {
  width: 100% !important;
  height: 100% !important;

  border-radius: 15px;
  border: none;
  display: block;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.08),
    0 0 20px rgba(139,0,74,0.08);
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

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

  section.contact-section .contact-map {
    height: 280px;
  }

}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;

  background: #25D366;
  color: #fff;

  font-size: 22px;
  padding: 14px;

  border-radius: 50%;
  z-index: 9999;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.12);
}

.whatsapp-float:hover{
  transform:scale(1.08);

  box-shadow:
    0 0 18px rgba(37,211,102,0.35);
}

/* ========================================
   ULTRA LUXURY TESTIMONIALS
======================================== */

.luxury-testimonials{

  position:relative;

  padding:140px 7%;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #f8f3ee,
      #f3ebe2
    );
}

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

.testimonial-bg-glow{

  position:absolute;

  top:50%;
  left:50%;

  width:700px;
  height:700px;

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

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,0,140,.08),
      transparent 70%
    );

  filter:blur(100px);

  animation:
    pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow{

  0%,100%{

    transform:
      translate(-50%,-50%)
      scale(1);
  }

  50%{

    transform:
      translate(-50%,-50%)
      scale(1.05);
  }
}

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

.testimonial-header{

  position:relative;

  z-index:2;

  text-align:center;

  margin-bottom:80px;
}

.testimonial-eyebrow{

  color:#d41472;

  letter-spacing:5px;

  text-transform:uppercase;

  font-size:13px;

  font-weight:700;

  margin-bottom:18px;
}

.testimonial-header h2{

  font-size:76px;

  line-height:1;

  color:#8B004A;

  font-family:'Playfair Display', serif;

  margin-bottom:30px;

  text-shadow:
    0 8px 30px rgba(139,0,74,.12);
}

.testimonial-subtext{

  max-width:760px;

  margin:auto;

  font-size:20px;

  line-height:1.8;

  color:#6b5862;
}

/* ========================================
   SLIDER
======================================== */

.testimonial-slider{

  position:relative;

  max-width:1200px;

  margin:80px auto 0;

  min-height:520px;

  display:flex;

  align-items:center;

  justify-content:center;
}

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

.testimonial-card{

  position:absolute;

  width:100%;

  opacity:0;

  pointer-events:none;

  transform:
    translateY(40px)
    scale(.96);

  transition:
    all .8s ease;

  padding:70px 60px;

  border-radius:40px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(255,255,255,.92)
    );

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

  box-shadow:
    0 25px 60px rgba(0,0,0,.08);

  overflow:hidden;

  text-align:center;
}

/* ========================================
   ACTIVE CARD
======================================== */

.testimonial-card.active{

  opacity:1;

  pointer-events:auto;

  transform:
    translateY(0)
    scale(1);

  z-index:5;
}

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

.quote-icon{

  width:90px;
  height:90px;

  margin:auto auto 35px;

  border-radius:50%;

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

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #8B004A
    );

  color:#fff;

  font-size:32px;

  box-shadow:
    0 15px 35px rgba(139,0,74,.22);
}

/* ========================================
   TEXT
======================================== */

.testimonial-text{

  font-size:38px;

  line-height:1.6;

  color:#341320;

  font-style:italic;

  margin:
    40px auto;

  max-width:900px;
}

/* ========================================
   NAME
======================================== */

.testimonial-card h3{

  font-size:34px;

  color:#a0005b;

  margin-bottom:25px;

  font-weight:700;
}

/* ========================================
   STARS
======================================== */

.stars{

  font-size:30px;

  letter-spacing:8px;

  color:#c4006a;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .luxury-testimonials{

    padding:100px 22px;
  }

  .testimonial-header h2{

    font-size:46px;
  }

  .testimonial-subtext{

    font-size:16px;

    line-height:1.7;
  }

  .testimonial-slider{

    min-height:620px;
  }

  .testimonial-card{

    padding:45px 24px;
  }

  .quote-icon{

    width:70px;
    height:70px;

    font-size:24px;
  }

  .testimonial-text{

    font-size:24px;

    line-height:1.7;
  }

  .testimonial-card h3{

    font-size:28px;
  }

  .stars{

    font-size:24px;

    letter-spacing:5px;
  }
}

/* =========================================================
   ULTRA PREMIUM OFFERS PAGE
========================================================= */

body{
  overflow-x:hidden;
}

/* ========================================
   LIVE LUXURY OFFER PANEL
======================================== */

.live-luxury-panel{

  position:relative;

  isolation:isolate;

  padding:
    180px 6%
    120px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #120811,
      #1a0d18,
      #10070f
    );
}

/* ========================================
   BACKGROUND BLURS
======================================== */

.luxury-bg-blur{

  position:absolute;

  border-radius:50%;

  filter:blur(90px);

  opacity:0.45;

  z-index:1;

  pointer-events:none;
}

.blur-1{

  width:450px;
  height:450px;

  background:#ff0088;

  top:-120px;
  left:-120px;

  animation:floatBlur 8s ease-in-out infinite;
}

.blur-2{

  width:380px;
  height:380px;

  background:#8B004A;

  bottom:-120px;
  right:-100px;

  animation:floatBlur2 10s ease-in-out infinite;
}

@keyframes floatBlur{

  0%{
    transform:translateY(0px);
  }

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

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

}

@keyframes floatBlur2{

  0%{
    transform:translateY(0px);
  }

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

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

}

/* ========================================
   MAIN WRAPPER
======================================== */

.luxury-offer-wrapper{

  position:relative;

  z-index:5;

  pointer-events:auto;

  max-width:1400px;

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:60px;

  padding:70px;

  border-radius:40px;

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

  backdrop-filter:blur(20px);

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

  box-shadow:
    0 25px 80px rgba(0,0,0,0.18);

  overflow:hidden;

  flex-wrap:wrap;
}

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

.luxury-offer-left{

  flex:1;

  min-width:320px;

  position:relative;

  z-index:5;
}

.offer-live-badge{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:12px 24px;

  border-radius:50px;

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

  color:#ff4fa3;

  letter-spacing:2px;

  font-size:13px;

  margin-bottom:35px;

  border:
    1px solid rgba(255,255,255,0.08);
}

.luxury-offer-left h1{

  font-size:84px;

  line-height:0.95;

  color:#ffffff;

  font-family:'Playfair Display', serif;

  margin-bottom:30px;
}

.luxury-offer-left h1 span{

  display:block;

  color:#ff0088;
}

.luxury-offer-left p{

  color:#f3dce8;

  font-size:20px;

  line-height:1.9;

  max-width:620px;

  margin-bottom:45px;
}

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

.luxury-offer-buttons{

  display:flex;

  align-items:center;

  gap:20px;

  margin-top:35px;

  flex-wrap:wrap;

  position:relative;

  z-index:10;
}

.luxury-main-btn,
.luxury-outline-btn,
.luxury-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:18px 38px;

  border-radius:60px;

  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;

  cursor:pointer;

  position:relative;

  z-index:20;

  pointer-events:auto;
}

.luxury-main-btn{

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #c4006b
    );

  color:#ffffff;

  box-shadow:
    0 15px 35px rgba(255,0,136,0.25);
}

.luxury-outline-btn{

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

  color:#ffffff;

  border:
    1px solid rgba(255,255,255,0.08);
}

.luxury-main-btn:hover,
.luxury-outline-btn:hover,
.luxury-btn:hover{

  transform:
    translateY(-5px)
    scale(1.03);
}

/* ========================================
   RIGHT STATUS BOX
======================================== */

.offer-status-box{

  flex:1;

  min-width:320px;

  padding:50px;

  border-radius:30px;

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

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

  backdrop-filter:blur(18px);

  position:relative;

  z-index:5;
}

.offer-status-top{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:25px;
}

.live-dot{

  width:14px;
  height:14px;

  border-radius:50%;

  background:#ff004c;

  box-shadow:
    0 0 20px #ff004c;

  animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.25);
  }

  100%{
    transform:scale(1);
  }

}

.offer-status-top span{

  color:#ff4fa3;

  letter-spacing:2px;

  font-size:13px;
}

.offer-status-box h2{

  font-size:48px;

  line-height:1.1;

  color:#ffffff;

  margin-bottom:25px;
}

.offer-status-box p{

  color:#e7d4de;

  line-height:1.9;

  margin-bottom:40px;
}

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

.offer-mini-stats{

  display:flex;

  justify-content:space-between;

  gap:18px;

  margin-top:35px;

  flex-wrap:wrap;
}

.mini-stat{

  flex:1;

  min-width:100px;

  text-align:center;

  padding:22px;

  border-radius:22px;

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

  border:
    1px solid rgba(255,255,255,0.06);
}

.mini-stat h3{

  color:#ff0088;

  font-size:30px;

  margin-bottom:10px;
}

.mini-stat span{

  color:#e5d2db;

  font-size:14px;
}

/* ========================================
   MEGA OFFERS
======================================== */

.mega-offers{

  padding:140px 6%;

  background:
  linear-gradient(
    to bottom,
    #f8f3ee,
    #efe7df
  );

  text-align:center;
}

.mega-title{

  font-size:72px;

  color:#8B004A;

  font-family:'Playfair Display',serif;

  margin-bottom:15px;
}

.mega-subtitle{

  font-size:20px;

  color:#75505f;

  margin-bottom:80px;
}

.offer-showcase{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(340px,1fr));

  gap:35px;

  max-width:1400px;

  margin:auto;
}

.mega-card{

  position:relative;

  overflow:hidden;

  padding:60px 40px;

  border-radius:35px;

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

  backdrop-filter:blur(20px);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.08);

  transition:0.5s ease;
}

.mega-card:hover{

  transform:
  translateY(-15px)
  scale(1.03);

  box-shadow:
  0 35px 80px rgba(255,0,136,0.18);
}

.mega-card::before{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  background:
  radial-gradient(
    rgba(255,0,136,.18),
    transparent
  );

  top:-100px;
  right:-100px;
}

.featured{

  transform:scale(1.04);

  border:
  2px solid rgba(255,0,136,.18);
}

.tag{

  display:inline-block;

  padding:10px 20px;

  border-radius:40px;

  background:
  linear-gradient(
    135deg,
    #ff0088,
    #c4006b
  );

  color:#fff;

  font-size:12px;

  letter-spacing:2px;

  margin-bottom:25px;
}

.hot{

  animation:
  pulseTag 2s infinite;
}

@keyframes pulseTag{

  50%{

    transform:scale(1.08);
  }
}

.mega-card h3{

  font-size:38px;

  color:#4a1430;

  margin-bottom:20px;

  font-family:'Playfair Display',serif;
}

.mega-card h1{

  font-size:72px;

  color:#ff0088;

  margin-bottom:20px;
}

.mega-card p{

  color:#6d4b5c;

  line-height:1.9;
}


/* ========================================
   PREMIUM TREATMENTS
======================================== */

.luxury-treatment-zone{

  padding:140px 6%;

  background:
  linear-gradient(
    135deg,
    #120811,
    #1d0c19
  );
}

.luxury-treatment-zone h2{

  text-align:center;

  color:#fff;

  font-size:64px;

  margin-bottom:70px;
}

.treatment-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:35px;

  max-width:1400px;

  margin:auto;
}

.treatment-card{

  text-align:center;

  padding:60px 30px;

  border-radius:35px;

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

  backdrop-filter:blur(18px);

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

  transition:.4s ease;
}

.treatment-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 25px 60px rgba(255,0,136,.2);
}

.treatment-card h3{

  color:#fff;

  font-size:34px;

  margin-bottom:25px;
}

.treatment-card h1{

  color:#ff0088;

  font-size:70px;

  margin-bottom:15px;
}

.treatment-card span{

  color:#d5b9c8;
}


/* ========================================
   BEAUTY WALL
======================================== */

.beauty-wall{

  padding:140px 6%;

  background:#f7f2eb;
}

.beauty-wall h2{

  text-align:center;

  color:#8B004A;

  font-size:64px;

  margin-bottom:70px;
}

.beauty-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:30px;

  max-width:1300px;

  margin:auto;
}

.beauty-card{

  text-align:center;

  padding:50px 30px;

  border-radius:30px;

  background:#fff;

  transition:.4s ease;

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

.beauty-card:hover{

  transform:
  translateY(-12px);
}

.beauty-card h3{

  color:#4a1430;

  font-size:32px;

  margin-bottom:20px;
}

.beauty-card h1{

  color:#ff0088;

  font-size:58px;
}

.special{

  background:
  linear-gradient(
    135deg,
    #ff0088,
    #c4006b
  );
}

.special h3,
.special h1{

  color:#fff;
}


/* ========================================
   MARQUEE
======================================== */

.offer-marquee{

  overflow:hidden;

  background:#120811;

  padding:30px 0;
}

.marquee-track{

  display:flex;

  width:max-content;

  animation:
  marqueeMove 22s linear infinite;
}

.marquee-track span{

  color:#fff;

  font-size:24px;

  margin-right:80px;

  white-space:nowrap;
}

@keyframes marqueeMove{

  from{

    transform:translateX(0);
  }

  to{

    transform:translateX(-50%);
  }
}


/* ========================================
   BRANDS
======================================== */

.brands-showcase{

  padding:140px 6%;

  background:
  linear-gradient(
    to bottom,
    #f8f3ee,
    #efe7df
  );
}

.brands-showcase h2{

  text-align:center;

  font-size:64px;

  color:#8B004A;

  margin-bottom:70px;
}

.brands-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:25px;

  max-width:1300px;

  margin:auto;
}

.brands-grid div{

  text-align:center;

  padding:40px 20px;

  border-radius:25px;

  background:#fff;

  font-size:28px;

  font-weight:600;

  color:#4a1430;

  transition:.4s ease;

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

.brands-grid div:hover{

  transform:
  translateY(-10px);

  color:#ff0088;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width:768px){

  .live-luxury-panel{
    padding:100px 12px 60px;
  }

  .luxury-offer-wrapper{

    width:100%;

    padding:25px;

    gap:30px;

    border-radius:25px;

    overflow:hidden;
  }

  .luxury-offer-left{

    width:100%;

    min-width:unset;
  }

  .luxury-offer-left h1{

    font-size:clamp(42px,14vw,72px);

    line-height:0.9;

    word-break:break-word;

    overflow-wrap:break-word;

    margin-bottom:20px;
  }

  .luxury-offer-left p{

    font-size:18px;

    line-height:1.7;
  }

  .offer-status-box{

    width:100%;

    min-width:unset;

    padding:25px;
  }

  .offer-status-box h2{

    font-size:38px;

    line-height:1.1;
  }

}
/* =========================================================
   OFFERS PAGE FINAL UPGRADE
========================================================= */

/* LIVE DOT */

.live-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff004c;
  position:relative;
  box-shadow:
    0 0 15px #ff004c,
    0 0 30px #ff004c,
    0 0 50px #ff004c;
  animation:pulseDot 1.5s infinite;
}

.live-dot::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(255,0,76,.45);
  animation:ringPulse 1.5s infinite;
}

@keyframes ringPulse{

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

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

}


/* DISCOUNT BADGES */

.discount-badge{

  display:inline-block;

  padding:10px 18px;

  margin-bottom:20px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #ff0088,
    #c4006b
  );

  color:#fff;

  font-size:12px;

  font-weight:700;

  letter-spacing:1.5px;

  box-shadow:
  0 0 20px rgba(255,0,136,.35);

}


/* OFFER STATUS BOX GLOW */

.offer-status-box{

  position:relative;

  overflow:hidden;
}

.offer-status-box::before{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  background:
  radial-gradient(
    rgba(255,0,136,.15),
    transparent
  );

  top:-100px;
  right:-100px;

  animation:statusGlow 8s linear infinite;
}

@keyframes statusGlow{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}


/* OFFER PRICE GLOW */

.mega-card h1,
.treatment-card h1,
.beauty-card h1{

  text-shadow:
  0 0 12px rgba(255,0,136,.35),
  0 0 24px rgba(255,0,136,.2);
}


/* PREMIUM HOVER */

.mega-card:hover,
.treatment-card:hover,
.beauty-card:hover{

  transform:
  translateY(-15px)
  scale(1.03);

  box-shadow:
  0 35px 80px rgba(255,0,136,.2);
}


/* ================= CURSOR ================= */

.offer-cursor{

  position:fixed;

  width:22px;

  height:22px;

  border-radius:50%;

  background:#ff0088;

  left:0;

  top:0;

  z-index:999999999;

  pointer-events:none;

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

  box-shadow:
  0 0 20px #ff0088,
  0 0 40px #ff0088,
  0 0 80px #ff0088;
}

/* MINI STATS IMPROVEMENT */

.mini-stat{

  transition:.4s ease;
}

.mini-stat:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 15px 40px rgba(255,0,136,.18);
}

.mini-stat h3{

  text-shadow:
  0 0 15px rgba(255,0,136,.4);
}


/* =========================================================
   FINAL CTA SECTION
========================================================= */

.luxury-cta{

  padding:140px 6%;

  background:
  linear-gradient(
    135deg,
    #120811,
    #1a0d18,
    #10070f
  );

  position:relative;

  overflow:hidden;
}

.luxury-cta-box{

  max-width:1200px;

  margin:auto;

  text-align:center;

  padding:90px 60px;

  border-radius:40px;

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

  backdrop-filter:blur(20px);

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

  box-shadow:
  0 25px 80px rgba(0,0,0,.25);
}

.luxury-cta-box h2{

  color:#ffffff;

  font-size:72px;

  line-height:1.1;

  margin-bottom:25px;

  font-weight:700;
}

.luxury-cta-box p{

  color:#e6d7df;

  font-size:20px;

  line-height:1.8;

  max-width:850px;

  margin:
  0 auto 50px;
}

.luxury-cta-buttons{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;
}

.luxury-btn{

  min-width:220px;

  height:65px;

  border-radius:999px;

  display:flex;

  justify-content:center;

  align-items:center;

  text-decoration:none;

  font-size:18px;

  font-weight:600;

  transition:.4s ease;
}

.luxury-btn.primary{

  background:
  linear-gradient(
    135deg,
    #ff0088,
    #c4006b
  );

  color:#fff;
}

.luxury-btn.secondary{

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

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

  color:#fff;
}

.luxury-btn:hover{

  transform:
  translateY(-5px);

  box-shadow:
  0 15px 40px rgba(255,0,136,.3);
}

.cta-badge{

  display:inline-block;

  margin-bottom:25px;

  padding:12px 24px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #ff0088,
    #c4006b
  );

  color:#fff;

  font-size:13px;

  letter-spacing:2px;

  font-weight:700;
}

.luxury-cta-box{

  text-align:center;
}

.luxury-cta-buttons{

  margin-top:40px;
}


/* ==========================================
   MOBILE HERO FIX
========================================== */

@media (max-width:768px){

  .live-luxury-panel{
    padding:120px 20px 80px;
  }

  .luxury-offer-wrapper{

    padding:30px;

    gap:35px;

    border-radius:25px;
  }

  .luxury-offer-left{

    min-width:100%;
  }

  .luxury-offer-left h1{

    font-size:58px;

    line-height:0.95;

    word-break:break-word;
  }

  .luxury-offer-left p{

    font-size:18px;

    line-height:1.7;
  }

  .offer-status-box{

    min-width:100%;

    padding:30px;
  }

  .offer-status-box h2{

    font-size:42px;

    line-height:1.1;
  }

  .offer-mini-stats{

    gap:10px;
  }

  .mini-stat{

    min-width:85px;

    padding:16px;
  }

  .mini-stat h3{

    font-size:24px;
  }

  .luxury-offer-buttons{

    flex-direction:column;

    width:100%;
  }

  .luxury-main-btn,
  .luxury-outline-btn{

    width:100%;
  }

}

/* ==========================================
   MOBILE CTA FIX
========================================== */

@media (max-width:768px){

  .luxury-cta{

    padding:80px 20px;
  }

  .luxury-cta-box{

    padding:45px 25px;

    border-radius:25px;
  }

  .luxury-cta-box h2{

    font-size:48px;

    line-height:1.1;
  }

  .luxury-cta-box p{

    font-size:17px;
  }

  .luxury-cta-buttons{

    flex-direction:column;

    width:100%;
  }

  .luxury-btn{

    width:100%;

    min-width:unset;
  }

}

/* ========================================
   ULTRA LUXURY MENU SECTION
======================================== */

.premium-menu-section{

  position:relative;

  padding:160px 6%;

  overflow:hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,0,140,0.08),
      transparent 30%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(139,0,74,0.12),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #f8f3ee 0%,
      #f2e9df 50%,
      #efe4d8 100%
    );
}

/* ========================================
   BACKGROUND LIGHTS
======================================== */

.premium-menu-section::before,
.premium-menu-section::after{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  filter:blur(120px);

  opacity:.18;

  z-index:0;

  animation:
    floatingGlow 10s ease-in-out infinite;
}

.premium-menu-section::before{

  top:-250px;
  left:-250px;

  background:#ff0088;
}

.premium-menu-section::after{

  bottom:-300px;
  right:-250px;

  background:#8B004A;

  animation-delay:4s;
}

@keyframes floatingGlow{

  0%,100%{

    transform:
      translateY(0)
      scale(1);
  }

  50%{

    transform:
      translateY(-40px)
      scale(1.08);
  }
}

/* ========================================
   NOISE OVERLAY
======================================== */

.noise-overlay{

  position:absolute;

  inset:0;

  opacity:.06;

  z-index:1;

  pointer-events:none;

  background-image:
    url("https://www.transparenttextures.com/patterns/noise.png");
}

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

.menu-particles{

  position:absolute;

  inset:0;

  overflow:hidden;

  z-index:0;
}

.menu-particles span{

  position:absolute;

  display:block;

  width:8px;
  height:8px;

  border-radius:50%;

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

  box-shadow:
    0 0 20px #ff0088,
    0 0 40px #ff0088;

  animation:
    floatingParticles linear infinite;
}

@keyframes floatingParticles{

  from{

    transform:
      translateY(100vh)
      scale(0);

    opacity:0;
  }

  10%{
    opacity:1;
  }

  to{

    transform:
      translateY(-120vh)
      scale(1.4);

    opacity:0;
  }
}

/* ========================================
   SPOTLIGHT
======================================== */

.menu-spotlight{

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.18),
      transparent 70%
    );

  pointer-events:none;

  z-index:1;

  filter:blur(20px);

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

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

.menu-header{

  position:relative;

  z-index:2;

  text-align:center;

  margin-bottom:110px;
}

.menu-eyebrow{

  color:#d41472;

  font-size:13px;

  font-weight:700;

  letter-spacing:6px;

  text-transform:uppercase;

  margin-bottom:24px;
}

.menu-main-title{

  font-size:78px;

  line-height:1;

  color:#4a1430;

  font-family:'Playfair Display', serif;

  text-shadow:
    0 8px 30px rgba(139,0,74,0.12);
}

.menu-line{

  width:120px;
  height:5px;

  margin:30px auto;

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      #8B004A,
      #ff0088
    );

  box-shadow:
    0 0 25px rgba(255,0,140,.4);
}

.menu-note-top{

  max-width:780px;

  margin:auto;

  color:#6b5862;

  font-size:18px;

  line-height:1.9;
}

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

.premium-menu-grid{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

  gap:45px;
}

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

.premium-menu-card{

  position:relative;

  padding:42px 35px;

  border-radius:35px;

  overflow:hidden;

  transform-style:preserve-3d;

  backdrop-filter:blur(20px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.75),
      rgba(255,255,255,.35)
    );

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

  box-shadow:
    0 20px 50px rgba(0,0,0,.08),
    inset 0 1px 1px rgba(255,255,255,.6);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}

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

.premium-menu-card::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:35px;

  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,0,140,.5),
      transparent,
      rgba(139,0,74,.4)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  pointer-events:none;
}

/* ========================================
   SHINE EFFECT
======================================== */

.premium-menu-card::after{

  content:"";

  position:absolute;

  top:-120%;
  left:-50%;

  width:200%;
  height:200%;

  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.4) 50%,
      transparent 70%
    );

  transform:rotate(25deg);

  transition:1s;
}

.premium-menu-card:hover::after{

  top:100%;
}

/* ========================================
   GLASS REFLECTION
======================================== */

.premium-menu-card .glass-reflection{

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at var(--x) var(--y),
      rgba(255,255,255,.35),
      transparent 40%
    );

  opacity:0;

  transition:opacity .3s ease;

  pointer-events:none;

  z-index:2;
}

.premium-menu-card:hover .glass-reflection{

  opacity:1;
}

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

.premium-menu-card:hover{

  transform:
    translateY(-20px)
    rotateX(5deg)
    rotateY(-5deg)
    scale(1.03);

  box-shadow:
    0 0 120px rgba(255,0,140,.18),
    0 35px 80px rgba(139,0,74,.22);
}

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

.menu-icon{

  width:90px;
  height:90px;

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

  border-radius:28px;

  font-size:38px;

  margin-bottom:28px;

  position:relative;

  z-index:3;

  background:
    linear-gradient(
      135deg,
      #ff0088,
      #8B004A
    );

  color:#fff;

  box-shadow:
    0 18px 35px rgba(139,0,74,.28);

  animation:
    floatingIcon 3s ease-in-out infinite;

  transition:.5s ease;
}

@keyframes floatingIcon{

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

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

.premium-menu-card:hover .menu-icon{

  transform:
    rotate(8deg)
    scale(1.1);
}

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

.premium-menu-card h3{

  position:relative;

  z-index:3;

  font-size:38px;

  color:#4a1430;

  margin-bottom:28px;

  font-family:'Playfair Display', serif;
}

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

.premium-menu-card ul{

  position:relative;

  z-index:3;

  list-style:none;
}

.premium-menu-card ul li{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:16px 0;

  border-bottom:
    1px solid rgba(139,0,74,.08);

  opacity:.85;

  transition:
    .4s ease;
}

.premium-menu-card ul li:hover{

  transform:translateX(8px);

  opacity:1;
}

.premium-menu-card ul li span{

  color:#5e4955;

  font-size:16px;
}

.premium-menu-card ul li strong{

  color:#8B004A;

  font-size:17px;

  font-weight:700;
}

/* ========================================
   FEATURED CARD
======================================== */

.featured-menu{

  background:
    linear-gradient(
      160deg,
      #8B004A,
      #ff0088
    );

  color:#fff;

  overflow:hidden;

  animation:
    pulseGlow 3s ease-in-out infinite;
}

.featured-menu::before{

  opacity:.7;
}

.featured-menu h3,
.featured-menu li,
.featured-menu span,
.featured-menu strong{

  color:#fff !important;
}

.featured-price{

  position:relative;

  z-index:3;

  margin-top:40px;

  text-align:center;

  font-size:56px;

  font-weight:800;

  text-shadow:
    0 10px 30px rgba(0,0,0,.2);
}

@keyframes pulseGlow{

  0%,100%{

    box-shadow:
      0 0 30px rgba(255,0,140,.25);
  }

  50%{

    box-shadow:
      0 0 70px rgba(255,0,140,.5);
  }
}

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

.premium-badge{

  position:absolute;

  top:24px;
  right:-45px;

  padding:12px 55px;

  background:#fff;

  color:#8B004A;

  font-size:11px;

  font-weight:800;

  letter-spacing:2px;

  transform:rotate(45deg);

  z-index:4;

  box-shadow:
    0 5px 20px rgba(0,0,0,.12);
}

/* ========================================
   BOTTOM NOTE
======================================== */

.menu-bottom-note{

  position:relative;

  z-index:2;

  margin-top:90px;

  text-align:center;

  font-size:18px;

  color:#6d4b5c;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .premium-menu-section{

    padding:110px 22px;
  }

  .menu-main-title{

    font-size:48px;
  }

  .premium-menu-grid{

    gap:28px;
  }

  .premium-menu-card{

    padding:34px 24px;
  }

  .premium-menu-card h3{

    font-size:32px;
  }

  .menu-icon{

    width:75px;
    height:75px;

    font-size:32px;
  }

  .featured-price{

    font-size:42px;
  }

  .menu-spotlight{

    display:none;
  }
}

/* ========================================
   ULTRA LUXURY GLASSMORPHIC MOBILE NAVBAR
   PREMIUM UNIQUE STYLE
======================================== */

/* ========================================
   GLOBAL FIX
======================================== */

.hero-overlay,
.hero-bg,
.bg-effects,
.particles,
canvas,
.light-beam,
.loader-noise,
.loader-vignette,
.luxury-loader::before{

  pointer-events:none !important;
}

/* ========================================
   NAVBAR
======================================== */

.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  padding:16px 24px;

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

  z-index:999999999;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.88),
      rgba(255,255,255,0.72)
    );

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

  border-bottom:
    1px solid rgba(255,0,128,0.08);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);
}

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

.logo{

  font-size:22px;

  font-weight:700;

  letter-spacing:-0.5px;

  color:#8B004A;

  position:relative;

  z-index:999999999;

  text-shadow:
    0 2px 10px rgba(255,0,128,0.12);
}

/* ========================================
   DESKTOP NAVIGATION
======================================== */

.nav-links{

  display:flex;

  align-items:center;

  gap:32px;
}

.nav-links a{

  position:relative;

  text-decoration:none;

  color:#2b0b1d;

  font-size:15px;

  font-weight:500;

  transition:0.35s ease;
}

.nav-links a:hover{

  color:#ff0088;
}

/* ========================================
   PREMIUM UNDERLINE
======================================== */

.nav-links a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-7px;

  width:0%;

  height:2px;

  border-radius:20px;

  background:
    linear-gradient(
      90deg,
      #ff0088,
      #ff4da6
    );

  transition:0.4s ease;
}

.nav-links a:hover::after{

  width:100%;
}

/* ========================================
   HAMBURGER BUTTON
======================================== */

.menu-toggle{

  display:none;

  width:50px;
  height:50px;

  border-radius:18px;

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

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.08)
    );

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

  color:#8B004A;

  font-size:24px;

  cursor:pointer;

  position:relative;

  z-index:9999999999;

  transition:0.35s ease;

  pointer-events:auto !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.menu-toggle:hover{

  transform:
    translateY(-2px)
    scale(1.04);

  box-shadow:
    0 16px 40px rgba(255,0,128,0.16);
}

.menu-toggle i{

  pointer-events:none;
}

/* ========================================
   MOBILE NAVBAR
======================================== */

@media(max-width:768px){

  /* NAVBAR */

  .navbar{

    padding:14px 18px;
  }

  /* LOGO */

  .logo{

    font-size:17px;

    max-width:72%;
  }

  /* SHOW HAMBURGER */

  .menu-toggle{

    display:flex;
  }

  /* MOBILE MENU PANEL */

  .nav-links{

    position:fixed;

    top:78px;

    right:-320px;

    width:255px;

    padding:28px 26px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:28px;

    background:
      linear-gradient(
        145deg,
        rgba(10,10,15,0.96),
        rgba(30,12,24,0.96)
      );

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

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

    border-radius:
      0 0 0 28px;

    transition:
      right 0.45s cubic-bezier(.77,0,.18,1);

    z-index:999999999;

    box-shadow:
      -20px 20px 60px rgba(0,0,0,0.45);
  }

  /* ACTIVE MENU */

  .nav-links.active{

    right:0;
  }

  /* MOBILE LINKS */

  .nav-links a{

    color:#ffffff;

    font-size:20px;

    font-weight:500;

    letter-spacing:0.3px;
  }

  /* REMOVE DESKTOP UNDERLINE */

  .nav-links a::after{

    display:none;
  }

  /* PREMIUM HOVER */

  .nav-links a:hover{

    color:#ff4da6;

    transform:translateX(6px);
  }

  /* PREVENT SIDE SCROLL */

  html,
  body{

    overflow-x:hidden;
  }

}

/* ========================================
   EXTRA SMALL DEVICES
======================================== */

@media(max-width:480px){

  .navbar{

    padding:13px 16px;
  }

  .logo{

    font-size:16px;
  }

  .menu-toggle{

    width:46px;
    height:46px;

    font-size:22px;

    border-radius:16px;
  }

  .nav-links{

    width:240px;

    top:74px;

    padding:26px 22px;
  }

  .nav-links a{

    font-size:19px;
  }

}

/* FORCE MOBILE MENU */

@media(max-width:768px){

  .nav-links{

    display:flex !important;

    position:fixed !important;

    top:80px !important;

    right:-300px !important;

    width:240px !important;

    flex-direction:column !important;

    background:#111 !important;

    padding:30px !important;

    transition:0.4s !important;

    z-index:999999999 !important;
  }

  .nav-links.active{

    right:0 !important;
  }

}