/* Premium Hero styles scoped to specific classes */
   .navigation,
   .hero-wrap {
       font-family: 'Poppins', sans-serif;
       --premium-gold: #c5a059;
       --premium-navy: #0a192f;
       --premium-transition: cubic-bezier(0.19, 1, 0.22, 1);
   }

   /* Navigation mimicking Kaskady's premium feel */
   .navigation {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 1000;
       transition: all 0.5s var(--premium-transition);
   }

   .nav--scrolled {
       background: rgba(10, 25, 47, 0.9);
       backdrop-filter: blur(15px);
       padding: 0.5rem 0;
   }

   .nav__top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1.2rem 6%;
       transition: all 0.5s var(--premium-transition);
   }

   .nav--scrolled .nav__top {
       padding: 0.5rem 6%;
   }

   .nav__col {
       flex: 1;
       display: flex;
       align-items: center;
   }

   .nav__col.col-1 {
       justify-content: flex-start;
   }

   .nav__col.col-center {
       justify-content: center;
       flex-direction: column;
       gap: 0.5rem;
   }

   .nav__col.col-2 {
       justify-content: flex-end;
   }

   /* Menu Button with fill effect */
   .nav__menu {
       display: flex;
       align-items: center;
       gap: 1rem;
       cursor: pointer;
       padding: 0.7rem 1.4rem;
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: 50px;
       position: relative;
       overflow: hidden;
       transition: all 0.4s var(--premium-transition);
   }

   .nav__menu .menu-fill {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--premium-gold);
       z-index: -1;
       transition: all 0.4s var(--premium-transition);
   }

   .nav__menu:hover .menu-fill {
       top: 0;
   }

   .nav__menu:hover {
       border-color: var(--premium-gold);
       color: var(--premium-navy);
   }

   .nav__menu:hover .icon__menu {
       filter: brightness(0);
   }

   .icon__menu {
       width: 18px;
       filter: invert(1);
       transition: filter 0.4s;
   }

   .menu-txt {
       font-size: 0.8rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 2px;
   }

   /* Center Logo & Star Decoration */
   .logo__emblem img {
       height: 150px;
       /* Incrementado de 120px */
       width: auto;
       transition: height 0.5s var(--premium-transition);
   }

   .nav--scrolled .logo__emblem img {
       height: 90px;
   }

   .logo__columns {
       display: flex;
       align-items: center;
       gap: 0.8rem;
       transition: opacity 0.3s;
   }

   .nav--scrolled .logo__columns {
       opacity: 0;
       pointer-events: none;
   }

   .nautic-date {
       font-size: 0.6rem;
       letter-spacing: 3px;
       color: var(--premium-gold);
       font-weight: 600;
   }

   .logo__stars {
       display: flex;
       gap: 4px;
   }

   .star {
       width: 7px;
       height: 7px;
       background: var(--premium-gold);
       clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
   }

   /* Booking Button Replicated */
   .nav__main-btn {
       display: flex;
       align-items: center;
       gap: 1rem;
       background: transparent;
       color: var(--white);
       text-decoration: none;
       padding: 0.8rem 1.8rem;
       border-radius: 50px;
       border: 1px solid var(--premium-gold);
       position: relative;
       overflow: hidden;
       transition: all 0.4s var(--premium-transition);
   }

   .nav__main-btn::before {
       content: '';
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--premium-gold);
       z-index: -1;
       transition: all 0.4s var(--premium-transition);
   }

   .nav__main-btn:hover {
       color: var(--premium-navy);
   }

   .nav__main-btn:hover::before {
       top: 0;
   }

   .nav__main-btn:hover .icon__cart {
       filter: brightness(0);
   }

   .icon__cart {
       width: 18px;
       filter: invert(1);
       transition: filter 0.4s;
   }

   /* Bottom Nav Links */
   .nav__bottom {
       display: flex;
       justify-content: center;
       gap: 4rem;
       padding-bottom: 2.5rem;
       opacity: 1;
       transition: all 0.5s var(--premium-transition);
   }

   .nav--scrolled .nav__bottom {
       opacity: 0;
       padding-bottom: 0;
       height: 0;
       overflow: hidden;
   }

   .nav-link {
       text-decoration: none;
       color: var(--text-light);
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-weight: 500;
       transition: all 0.3s ease;
       position: relative;
   }

   .nav-link:hover {
       color: var(--white);
   }

   .nav-link::after {
       content: '';
       position: absolute;
       bottom: -8px;
       left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 1.5px;
       background: var(--premium-gold);
       transition: width 0.3s var(--premium-transition);
   }

   .nav-link:hover::after,
   .nav-link.active::after {
       width: 30px;
   }

   .nav-link.active {
       color: var(--white);
   }

   /* Hero Section with Parallax Effect */
   .hero-wrap {
       position: relative;
       height: 100vh;
       width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       overflow: hidden;
       background-color: var(--premium-navy);
       padding-top: 80px;
       /* Space for the tall fixed navbar at the top */
   }

   .bg-wrapper {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
       pointer-events: none;
       overflow: hidden;
   }

   .hero__bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 120%;
       /* Extra height for parallax */
       object-fit: cover;
       will-change: transform;
       opacity: 0;
       transition: opacity 1.5s ease;
   }

   .hero__bg.active {
       opacity: 1;
       visibility: visible;
   }

   .hero__overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(0deg, rgba(10, 25, 47, 0.8) 0%, rgb(1 1 2 / 66%) 50%, rgba(10, 25, 47, 0.6) 100%);
       z-index: 1;
   }

   .hero__content {
       position: relative;
       max-width: 1100px;
       padding: 0 4rem;
       z-index: 2;
   }

   .top-subtitle {
       font-size: 0.8rem;
       letter-spacing: 6px;
       text-transform: uppercase;
       color: var(--premium-gold);
       margin-bottom: 1.5rem;
       font-weight: 600;
   }

   .h-main {
       font-size: 5rem;
       line-height: 1.05;
       margin: 0;
       font-weight: 500;
       letter-spacing: -3px;
       text-wrap: balance;
       color: #ffffff;
   }

   /* Letter animations */
   .letter {
       display: inline-block;
       opacity: 0;
       filter: blur(10px);
       transform: translateY(30px) rotateX(-90deg);
   }

   .tricksword {
       display: inline-block;
       margin-right: 0.25em;
   }

   /* Scroll Down Button (Reference: resort__btn scroll-down) */
   .hero__scroll {
       position: absolute;
       bottom: 6%;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-decoration: none;
       cursor: pointer;
       z-index: 20;
   }

   .resort__circle {
       width: 70px;
       height: 70px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       overflow: hidden;
       transition: all 0.5s var(--premium-transition);
   }

   .resort__circle-fill {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--white);
       transition: all 0.5s var(--premium-transition);
       z-index: 1;
   }

   .hero__scroll:hover .resort__circle-fill {
       top: 0;
   }

   .icon-arrow {
       width: 24px;
       filter: invert(1);
       transition: all 0.5s var(--premium-transition);
       z-index: 2;
   }

   .hero__scroll:hover .icon-arrow {
       filter: brightness(0);
       transform: translateY(5px);
   }

   /* Desktop responsiveness */
   @media (max-width: 1400px) {
       .h-main {
           font-size: 4.5rem;
       }
   }

   @media (max-width: 991px) {
       .h-main {
           font-size: 3.5rem;
           letter-spacing: -1px;
       }

       .nav__bottom {
           gap: 2rem;
       }
   }

   @media (max-width: 768px) {
       .nav__top {
           padding: 1.5rem 6%;
       }

       .nav__bottom {
           display: none;
       }

       .h-main {
           font-size: 2.2rem;
           line-height: 1.2;
           letter-spacing: -1px;
       }

       .top-subtitle {
           font-size: 0.7rem;
           letter-spacing: 3px;
       }

       .hero__content {
           padding: 0 2rem;
       }

       .hero-wrap {
           padding-top: 20px;
           /* Reduced space for mobile navbar */
       }

       .nav__col.col-center {
           display: none;
       }

       .nav__main-btn {
           background: var(--premium-gold);
           color: var(--premium-navy) !important;
           border: none;
           padding: 0.6rem 1.2rem;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       }

       .nav__main-btn .menu-txt {
           color: var(--premium-navy);
       }

       .nav__main-btn .icon__cart {
           filter: brightness(0);
       }

       .logo__emblem img {
           height: 90px;
       }
   }