/* =========================================================
   GLOBAL RESET & BASE
   ========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

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

.header{
  position:fixed;
  top:0;
  width:100%;
  height:64px;
  padding:0 48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1100;
  background:rgba(10,10,20,.6);
  backdrop-filter:blur(16px);
  transition:.4s ease;
}

/* LOGO */
.logo img{
  height:70px;
}

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

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

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

.nav-links li{
  list-style:none;
}

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

/* LINK UNDERLINE */
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#b56cff,#7b8cff,#5ad4ff);
  transition:.35s;
}

.nav-links a:hover::after{
  width:100%;
}

/* =========================================================
   HAMBURGER MENU
   ========================================================= */

.hamburger{
  display:none;
  flex-direction:column;
  gap:7px;
  cursor:pointer;
  z-index:1200;
}

.hamburger span{
  width:30px;
  height:2px;
  background:#fff;
  transition:.4s;
}

.hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px,-7px);
}

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

.hero{
  height:100vh;
}

.slider{
  height:100%;
  position:relative;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.15);
  transition:opacity 1.2s ease, transform 7s cubic-bezier(.19,1,.22,1);
  z-index:1;
}

.slide.active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

/* SLIDER OVERLAY */
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.25));
  pointer-events:none;
  z-index:2;
}

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

.content{
  position:absolute;
  bottom:22%;
  left:8%;
  max-width:520px;
  z-index:5;
}

.content h1{
  font-size:72px;
  font-weight:800;
  line-height:1.05;
  margin-bottom:16px;
}

.content span{
  display:block;
}

.content p{
  margin-bottom:28px;
}

/* CTA BUTTON */
.btn{
  display:inline-block;
  padding:14px 34px;
  border:2px solid var(--accent);
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  position:relative;
  z-index:10;
  cursor:pointer;
}

/* =========================================================
   SLIDER PROGRESS BAR
   ========================================================= */

.progress{
  position:absolute;
  bottom:40px;
  left:8%;
  width:240px;
  height:3px;
  background:rgba(255,255,255,.3);
  z-index:5;
}

.bar{
  width:0;
  height:100%;
  background:#fff;
}

/* =========================================================
   EVENTS SUBMENU
   ========================================================= */

.has-submenu{
  position:relative;
}

/* DESKTOP DROPDOWN */
.submenu{
  position:absolute;
  top:120%;
  left:0;
  background:rgba(15,15,30,.95);
  backdrop-filter:blur(14px);
  padding:14px 0;
  min-width:200px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.35s ease;
  border-radius:10px;
  z-index:1200;
}

.submenu li{
  list-style:none;
}

.submenu a{
  display:block;
  padding:10px 22px;
  font-size:15px;
  white-space:nowrap;
}

/* SHOW ON HOVER (DESKTOP) */
.has-submenu:hover .submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

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

@media(max-width:768px){

  /* SHOW HAMBURGER */
  .hamburger{
    display:flex;
  }

  /* FULLSCREEN MENU */
  .nav-links{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:100%;
    background:rgba(15,15,30,.95);
    backdrop-filter:blur(18px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:34px;
    transform:translateX(100%);
    transition:.7s cubic-bezier(.19,1,.22,1);
    z-index:1100;
  }

  .nav-links.active{
    transform:translateX(0);
  }

  .nav-links a{
    font-size:22px;
    padding-bottom:6px;
  }

  .nav-links a::after{
    left:50%;
    transform:translateX(-50%);
  }

  .nav-links a:hover::after,
  .nav-links a:active::after,
  .nav-links a:focus::after{
    width:60%;
  }

  .logo img{
    height:60px;
  }

  .header{
    padding:0 20px;
  }

  .content h1{
    font-size:42px;
  }

  .content{
    bottom:18%;
    left:6%;
  }

  /* MOBILE SUBMENU */
  .submenu{
    position:static;
    background:transparent;
    backdrop-filter:none;
    padding:0;
    min-width:unset;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }

  .has-submenu.active .submenu{
    display:block;
  }

  .submenu a{
    font-size:18px;
    padding:10px 0;
  }
}

/* =========================================================
   WHATSAPP BUTTON (FULL & INTACT)
   ========================================================= */

.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-right:30px;
}

/* WhatsApp icon */
.whatsapp-btn .wa-icon{
  width:22px;
  height:22px;
  display:block;
  transition:transform .3s ease;
  pointer-events:none;
}

/* Hover effect */
.whatsapp-btn:hover .wa-icon{
  transform:translateX(4px) scale(1.05);
}


/* =========================================================
   FIX: ALIGN EVENTS MENU WITH OTHER ITEMS (MOBILE)
   ========================================================= */

@media (max-width:768px) {

  /* Ensure Events parent aligns like other menu items */
  .has-submenu > a {
    display: inline-block;
    text-align: center;
  }

  /* Remove visual indentation from submenu items */
  .submenu {
    margin-top: 10px;
  }

  .submenu li {
    text-align: center;
  }
}

/* =========================================================
   FIX: ALIGN EVENTS TEXT EXACTLY LIKE OTHER MENU ITEMS
   (MOBILE ONLY)
   ========================================================= */

@media (max-width:768px) {

  /* Make ALL nav items use same centering rules */
  .nav-links li {
    width: 100%;
    text-align: center;
  }

  /* Ensure Events anchor aligns like Gallery & Beauty */
  .has-submenu > a {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  /* Keep submenu centered under Events */
  .submenu {
    width: 100%;
  }

  .submenu li {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   EVENTS MENU ARROW — FINAL STABLE VERSION
   ========================================================= */

/* Parent link */
.has-submenu > a {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

/* Text wrapper fix (optional but recommended) */
.has-submenu > a span {
  position: relative;
  display: inline-block;
  padding-right: 16px; /* space for arrow */
}

/* Arrow */
.has-submenu > a span::after {
  content: "▾";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Rotate arrow when open */
.has-submenu.active > a span::after {
  transform: translateY(-50%) rotate(180deg);
}