:root {
      --font-heading: 'Cormorant Garamond', serif;
      --font-body: 'Mulish', sans-serif;
      --accent: #f0a500;
    }

    * {margin:0;padding:0;box-sizing:border-box;}
    body {
      font-family: var(--font-body);
      line-height:1.6;
      color:#fff;
      background:#111;
      overflow-x:hidden;
      scroll-behavior:smooth;
    }

    h1, h2, h3 {
      font-family: var(--font-heading);
      letter-spacing: 0.5px;
    }

    /* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 40px;
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
  z-index: 1000;
  opacity: 0;
  animation: fadeInNav 4s ease forwards;
}

    @keyframes fadeInNav {
      from {opacity:0; transform:translateY(-20px);}
      to {opacity:1; transform:translateY(0);}
    }
    .navbar.scrolled {
      background:rgba(0,0,0,0.6);
      backdrop-filter:blur(8px);
    }
    .logo img {height:40px;}
.nav-links {
  display: flex;
  justify-content: center;
  gap: 40px;
}
    .nav-links a {
      color:#fff;text-decoration:none;font-size:1rem;transition:color .3s;
    }
/* Dropdown Styling */
.nav-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: 10px 0;
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-menu a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  font-size: 0.95rem;
  transition: background 0.3s, color 0.3s;
}

.dropdown-menu a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--accent);
}

/* Desktop: show on hover */
@media (min-width: 769px) {
  .dropdown:hover .dropdown-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: stacked dropdowns */
@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    background: rgba(0,0,0,0.9);
    border: none;
    border-radius: 0;
    padding: 0;
    transform: none;
    opacity: 1;
  }
  .dropdown-menu a {
    padding: 12px 0;
  }
}

    .nav-links a:hover {color:var(--accent);}
    
.social-icons {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
    .social-icons svg {transition:fill .3s;}
    .social-icons a:hover svg {fill:var(--accent);}
    .hamburger {
      display:none;flex-direction:column;cursor:pointer;gap:5px;
    }
    .hamburger div {width:25px;height:3px;background:#fff;border-radius:2px;}

    /* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  background: none; /* Remove background image */
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
    .hero::after {
      content:"";position:absolute;top:0;left:0;width:100%;height:100%;
      background:rgba(0, 0, 0, 0.169);
    }
    .hero-content {
      position:relative;
      z-index:2;
      opacity:0;
      animation:fadeIn 4s ease forwards;
    }
.hero-content img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
    animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse {
  0% {
    filter: drop-shadow(0 0 8px rgba(240,165,0,0.15));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 22px rgba(240,165,0,0.45));
    transform: scale(1.02);
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(240,165,0,0.15));
    transform: scale(1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content img {
    width: 80%;
    max-width: 320vh;
  }
}

@media (max-width: 480px) {
  .hero-content img {
    width: 85%;
    max-width: 480px;
  }
}
    @keyframes fadeIn {
      from {opacity:0;transform:scale(0.95);}
      to {opacity:1;transform:scale(1);}
    }

    /* Scroll Arrow */
    .scroll-arrow {
      position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
      cursor:pointer;z-index:3;
      opacity:0;
      animation:fadeInArrow 6s ease forwards, bounce 2s infinite 6s;
    }
    .scroll-arrow svg {width:45px;height:45px;fill:white;transition:fill 0.3s;}
    .scroll-arrow:hover svg {fill:var(--accent);}
    @keyframes fadeInArrow {
      from {opacity:0;transform:translate(-50%, 20px);}
      to {opacity:1;transform:translate(-50%, 0);}
    }
    @keyframes bounce {
      0%,20%,50%,80%,100% {transform:translate(-50%,0);}
      40% {transform:translate(-50%,-10px);}
      60% {transform:translate(-50%,-5px);}
    }
/* =========================
   Featured Reel Section
========================= */

.featured-reel {
  padding: 100px 20px;
  background: linear-gradient(
    to bottom,
    #111,
    #161616
  );
  text-align: center;
}

.featured-reel-container {
  max-width: 900px;
  margin: 0 auto;
}

.featured-reel-text h2 {
  font-size: 2.7rem;
  margin-bottom: 20px;
  color: #fff;
}

.featured-reel-text p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* Responsive video container */
.reel-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 177.77%; /* 9:16 vertical reel ratio */
  height: 0;
  overflow: hidden;

  border-radius: 22px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.45),
    0 0 25px rgba(240,165,0,0.08);

  background: #000;
}

.reel-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  border: none;
}

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

  .featured-reel {
    padding: 80px 18px;
  }

  .featured-reel-text h2 {
    font-size: 2.2rem;
  }

  .featured-reel-text p {
    font-size: 1rem;
  }

  .reel-wrapper {
    border-radius: 18px;
  }
}

/* Small phones */
@media (max-width: 480px) {

  .featured-reel-text h2 {
    font-size: 1.9rem;
  }
}
/* Mission Statement Section */
.mission {
  position: relative;
  padding: 120px 20px;
  background: linear-gradient(
    to bottom,
    #0f0f0f,
    #181818
  );
  text-align: center;
  overflow: hidden;
}

.mission-container {
  max-width: 900px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

.mission h2 {
  font-size: 3rem;
  margin-bottom: 30px;
  color: #fff;
}

.mission-text {
  font-size: 1.25rem;
  line-height: 1.9;
  color: #ddd;
  margin-bottom: 40px;
  font-weight: 300;
}

.mission-line {
  width: 120px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 30px auto;
  border-radius: 5px;
}

.mission-subtext {
  color: var(--accent);
  letter-spacing: 3px;
  font-size: 0.95rem;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
  .mission {
    padding: 90px 20px;
  }

  .mission h2 {
    font-size: 2.3rem;
  }

  .mission-text {
    font-size: 1.05rem;
    line-height: 1.8;
  }
}

    /* Shared fade-in section style */
.fade-section {
  opacity:1;
  transition:opacity 1.5s ease, transform 1.5s ease;
}

.fade-section:not(.about) {
  transform:translateY(50px);
}

    .fade-section.visible {
      opacity:1;
      transform:translateY(0);
    }
.about {
  background-color: #1a1a1a;
  color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.about h2 {
  font-size: 2.5rem;
  margin-bottom: 60px;
}

/* Shared layout for rows */
.about-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto 100px auto;
}

/* Reverse layout */
.about-row--reverse {
}

/* Image and text styles */
.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.about-text {
  flex: 1;
  text-align: left;
}

.about-text h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  color: #f5f5f5;
}

.about-text p {
  color: #ddd;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .about-row,
  .about-row--reverse {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    text-align: center;
  }

  .about-image img {
    max-width: 100%;
  }
}

    /* Carousel */
    .carousel-section {
      background:#111;
      padding:80px 0;
      overflow:hidden;
      position:relative;
    }
    .carousel-section h2 {
      text-align:center;
      font-size:2.5rem;
      margin-bottom:40px;
    }
    .carousel-container {
      display:flex;
      justify-content:center;
      align-items:center;
      overflow:hidden;
    }
    .carousel-track {
      display:flex;
      gap:30px;
      animation:scroll 30s linear infinite;
    }
    .carousel-item {
      flex:0 0 auto;
      width:220px;
      text-align:center;
    }
    .carousel-item img {
      width:220px;
      height:220px;
      object-fit:cover;
      border-radius:10px;
      border:3px solid #d4d4d4;
      transition:transform 0.3s;
    }
    .carousel-item img:hover {transform:scale(1.05);}
    .carousel-item p {
      margin-top:10px;font-size:1.1rem;color:#d4d4d4;
    }
    @keyframes scroll {
      from {transform:translateX(0);}
      to {transform:translateX(-50%);}
    }
/* =========================
   Live Show Section
========================= */

.live-show-section {
  padding: 110px 20px;
  background: linear-gradient(
    to bottom,
    #151515,
    #0f0f0f
  );
  position: relative;
  overflow: hidden;
}

.live-show-container {
  max-width: 1300px;
  margin: 0 auto;
}

.live-show-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 70px auto;
}

.live-show-content h2 {
  font-size: 3rem;
  margin-bottom: 30px;
  color: #fff;
}

.live-show-content p {
  color: #d4d4d4;
  font-size: 1.15rem;
  line-height: 1.9;
  margin-bottom: 25px;
}

/* Gallery */
.live-show-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.live-show-gallery img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 18px;
  transition: transform 0.4s ease,
              box-shadow 0.4s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.live-show-gallery img:nth-child(1),
.live-show-gallery img:nth-child(3) {
  object-position: center top;
}
.live-show-gallery img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

/* Tablet */
@media (max-width: 992px) {

  .live-show-gallery {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
  }

  .live-show-gallery img {
    height: 500px;
  }
}

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

  .live-show-section {
    padding: 90px 18px;
  }

  .live-show-content h2 {
    font-size: 2.3rem;
  }

  .live-show-content p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .live-show-gallery {
    gap: 20px;
  }

  .live-show-gallery img {
    height: 380px;
    border-radius: 16px;
  }
}

/* Small phones */
@media (max-width: 480px) {

  .live-show-content h2 {
    font-size: 2rem;
  }

  .live-show-gallery img {
    height: 300px;
  }
}
/* Calendar Section */
.calendar-section {
  padding: 110px 20px;
  background: #111;
  text-align: center;
}

.calendar-container {
  max-width: 1200px;
  margin: 0 auto;
}

.calendar-section h2 {
  font-size: 2.7rem;
  margin-bottom: 20px;
  color: #fff;
}

.calendar-text {
  color: #ccc;
  max-width: 700px;
  margin: 0 auto 50px auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

.calendar-embed {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.calendar-embed iframe {
  width: 100%;
  height: 700px;
  border: none;
}

/* Mobile */
@media (max-width: 768px) {
  .calendar-section {
    padding: 90px 15px;
  }

  .calendar-section h2 {
    font-size: 2.2rem;
  }

  .calendar-text {
    font-size: 1rem;
  }

  .calendar-embed iframe {
    height: 600px;
  }
}

    /* Contact Section */
    .contact {
      padding:100px 20px;
      background:#1a1a1a;
      text-align:center;
      opacity:0;
      transform:translateY(50px);
      transition:opacity 1.5s ease, transform 1.5s ease;
    }
    .contact.visible {
      opacity:1;
      transform:translateY(0);
    }
    .contact h2 {
      font-size:2.5rem;
      margin-bottom:20px;
      color:#fff;
    }
    .contact p {
      color:#ccc;
      margin-bottom:40px;
      max-width:600px;
      margin-left:auto;
      margin-right:auto;
    }
    form {
      max-width:600px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      gap:15px;
    }
    input, textarea {
      padding:12px;
      border:none;
      border-radius:5px;
      font-size:1rem;
      outline:none;
      background:#222;
      color:#fff;
    }
    input:focus, textarea:focus {
      border:1px solid var(--accent);
    }
    textarea {
      resize:none;
      height:120px;
    }
    button {
      background:var(--accent);
      color:#fff;
      border:none;
      padding:12px;
      border-radius:5px;
      font-size:1.1rem;
      cursor:pointer;
      transition:background 0.3s;
    }
    button:hover {
      background:#bf8002;
    }

    /* Footer */
    footer {
      background:url('background_low.mp4') no-repeat center center/cover;
      background-attachment:fixed;
      position:relative;
      color:#fff;
      text-align:center;
      padding:60px 20px;
      overflow:hidden;
      opacity:0;
      transform:translateY(50px);
      transition:opacity 1.5s ease, transform 1.5s ease;
    }
    .footer-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
    footer::after {
      content:"";
      position:absolute;
      top:0;left:0;
      width:100%;height:100%;
      background:rgba(0, 0, 0, 0.204);
      z-index:0;
    }
    footer .footer-content {
      position:relative;
      z-index:1;
    }
    footer p {
      margin:10px 0;
      color:#ddd;
    }
    footer a {
      color:var(--accent);
      text-decoration:none;
    }
    footer.visible {
      opacity:1;
      transform:translateY(0);
    }

    /* Responsive */
@media (max-width: 768px) {
  .social-icons {
    display: flex !important;
    position: fixed;
    top: 50%; /* true center vertically */
    left: 53%; /* true center horizontally */
    transform: translate(-50%, -50%);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px; /* tighter spacing */
    z-index: 900;
    opacity: 0.9;
  }

  .social-icons svg {
    width: 28px;  /* smaller, proportional size */
    height: 28px;
  }

  /* Hamburger */
  .hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1201;
    position: absolute;
    right: 25px; /* move closer to the right edge */
    top: 25px;
  }
  


  /* Optional: fade slightly when overlay opens, to keep focus on nav menu */
  .overlay.active ~ .social-icons {
    opacity: 0.3;
  }
  .hamburger div {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  .hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(4px, 7px);
  }
  .hamburger.active div:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -7px);
  }
    /* Center social icons in the middle of the screen */


  /* Overlay behind menu */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* ensures full vertical coverage */
  background: rgba(0, 0, 0, 0.75); /* slightly darker */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000; /* above navbar (which is ~999) */
}

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

.nav-links {
  position: fixed;
  top: 0;
  right: -75%;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centers vertically */
  align-items: center;      /* centers horizontally */
  gap: 50px;                /* space between items */
  transition: right 0.4s ease;
  z-index: 1100;
}

.nav-links.active {
  right: 0;
}

.nav-links a {
  color: #fff;
  font-size: 1.8rem;        /* larger text */
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1px;
  text-align: center;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #d48f00;           /* optional accent hover */
}



  /* Dropdowns inside mobile menu */
  .dropdown-menu {
    position: static;
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(255,255,255,0.05);
    text-align: center;
    border: none;
  }
  .dropdown-menu.show {
    display: flex;
  }
  .dropdown-menu a {
    padding: 10px 0;
    font-size: 1rem;
  }
  .carousel-item {width:150px;} .carousel-item img {width:150px;height:150px;}
}

/* === FINAL FIX: Force reverse layout for second About section === */
.about-row--reverse {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px;
}

.about-row--reverse .about-text {
  order: 1 !important;
}

.about-row--reverse img {
  order: 2 !important;
}

@media (max-width: 768px) {
  .about-row--reverse {
    flex-direction: column !important;
  }
}
/* === Loading Screen === */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader img {
  width: 160px;
  height: auto;
  animation: pulse 2s infinite ease-in-out;
}

#preloader p {
  color: #f0a500;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-top: 15px;
  letter-spacing: 1px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}