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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    }

    /* Header Gradient */
    header {
     /*  background: linear-gradient(135deg, rgba(10, 5, 40, 0.95) 0%, rgba(20, 10, 60, 0.95) 50%, rgba(50, 20, 80, 0.95) 100%); */
     background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50) 30%,
        rgba(0,0,0,0.02)
    )
      /* backdrop-filter: blur(10px); */
    }

    /* Menu */
    .nav-link{

    position:relative;
    display:inline-block;
    padding:.5rem 0;
    color:white;
    transition:color .3s;

}
    .nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:2px;

    background:#ec4899;   /* pink-500 */

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .35s ease;

}

.nav-link:hover::after{

    transform:scaleX(1);

}

.nav-link.active::after{

    transform:scaleX(1);

}


    /* Carrusel Hero */
    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: 0;
    }

    .hero-slide.active {
      opacity: 1;
      z-index: 1;
    }

    /* Carousel Dots */
    .dot {
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .dot.active {
      background-color: rgb(236, 72, 153);
      width: 12px;
      height: 12px;
    }

    /* Mobile Menu */
    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    /* Lightbox Modal */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.95);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox-content {
      position: relative;
      max-width: 30vw;
      max-height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 40px;
      color: white;
      cursor: pointer;
      z-index: 1001;
    }

    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      color: white;
      cursor: pointer;
      padding: 10px 20px;
      user-select: none;
    }

    .lightbox-prev {
      left: 20px;
    }

    .lightbox-prev:hover,
    .lightbox-next:hover,
    .lightbox-close:hover {
      color: rgb(236, 72, 153);
      transition: color 0.3s ease;
    }

    .lightbox-next {
      right: 20px;
    }

    .lightbox-counter {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 14px;
    }