/* =========================================================
FONTS
========================================================= */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Courgette");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");

@font-face {
  font-family: Montserrat-Regular;
  src: url("../fonts/montserrat/Montserrat-Regular.ttf");
}

@font-face {
  font-family: Montserrat-Bold;
  src: url("../fonts/montserrat/Montserrat-Bold.ttf");
}

@font-face {
  font-family: Courgette-Regular;
  src: url("../fonts/courgette/Courgette-Regular.ttf");
}

@font-face {
  font-family: Poppins-Regular;
  src: url("../fonts/poppins/Poppins-Regular.ttf");
}

@font-face {
  font-family: Poppins-Medium;
  src: url("../fonts/poppins/Poppins-Medium.ttf");
}

@font-face {
  font-family: Poppins-Bold;
  src: url("../fonts/poppins/Poppins-Bold.ttf");
}

@font-face {
  font-family: Poppins-Light;
  src: url("../fonts/poppins/Poppins-Light.ttf");
}

@font-face {
  font-family: NotoSans-Regular;
  src: url("../fonts/notosans/NotoSans-Regular.ttf");
}

/* =========================================================
RESET
========================================================= */

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

html,
body {
  height: 100%;
  font-family: Montserrat, sans-serif;
  background: #050505;
  color: #e8e8e8;
}

/* =========================================================
TYPOGRAPHY
========================================================= */

a {
  font-size: 15px;
  line-height: 1.7;
  color: #c79b57;
  transition: 0.35s ease;
}

a:hover {
  color: #e4c58d;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

p {
  font-size: 15px;
  line-height: 1.7;
  color: #9a9a9a;
}

ul, li {
  list-style: none;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  height:100%;
}

body{
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}

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

input, textarea {
  outline: none;
  border: none;
  background: transparent;
  color: #fff;
}

input:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(70, 200, 180, 0.35);
}

button {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

.accent-text{
  color:#c79b57;
  font-family:Courgette-Regular;
  letter-spacing:1px;
  font-size:20px;
  text-shadow:
  0 0 10px rgba(199,155,87,.35);
}

/* =========================================================
BACK TO TOP BUTTON
========================================================= */

  .btn-back-to-top{
    display:none;
    position:fixed;
    bottom:30px;
    right:30px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(
      135deg,
      #c79b57,
      #e4c58d
    );
    box-shadow:
      0 10px 25px rgba(0,0,0,.6),
      0 0 20px rgba(199,155,87,.25);
    align-items:center;
    justify-content:center;
    z-index:1200;
    transition:.25s ease;
  }

  .symbol-btn-back-to-top{
    font-size:18px;
    color:#000;
  }

  /* hover */
  .btn-back-to-top:hover{
    transform:translateY(-4px);
    box-shadow:
      0 14px 35px rgba(0,0,0,.7),
      0 0 25px rgba(199,155,87,.45);
  }

/* =========================================================
LAYOUT
========================================================= */

  .container {
    max-width: 1200px;
  }

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

  header{
    position:sticky;
    top:0;
    z-index:1000;
  }

  header.scrolled .wrap-menu-header{
    background:rgba(10,10,10,0.95);
    box-shadow:0 8px 25px rgba(0,0,0,.6);
  }

  .wrap-menu-header{
    width:100%;
    height:90px;
    background:rgba(10,10,10,0.85);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
  }

  .wrap_header{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* logo */
  .logo img{
    height:40px;
  }

  /* =========================================================
  DESKTOP MENU  
  ========================================================= */

  .main_menu{
    display:flex;
    align-items:center;
    gap:28px;
  }

  .main_menu li a{
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#e6e6e6;
    transition:.25s;
  }

  .main_menu li a:hover{
    color:#c79b57;
  }

  /* gold underline */

  .main_menu li a::after{
    content:"";
    display:block;
    height:1px;
    width:0;
    background:#c79b57;
    transition:.3s;
  }

  .main_menu li a:hover::after{
    width:100%;
  }

  /* =========================================================
  SOCIAL ICONS
  ========================================================= */
  .social a{
    font-size:15px;
    color:#ccc;
    margin-left:18px;
  }

  .social a:hover{
    color:#c79b57;
  }

  /* =========================================================
  HAMBURGER BUTTON
  ========================================================= */
  .mobile-toggle{
    display:none;
    width:26px;
    height:18px;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
  }

  .mobile-toggle span{

    display:block;

    height:2px;
    width:100%;

    background:#fff;

  }


  /* =========================================================
  SIDEBAR MENU (RIGHT SLIDE)
  ========================================================= */

  .sidebar-menu{

    position:fixed;

    top:0;
    right:-300px;

    width:280px;
    height:100vh;

    z-index:2000;

    transition:right .35s ease;

  }

  .sidebar-menu.open{
    right:0;
  }

  /* glass panel */

  .sidebar-inner{

    height:100%;

    display:flex;
    flex-direction:column;

    background:rgba(18,18,18,.82);

    backdrop-filter:blur(20px);

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

    box-shadow:
    -20px 0 60px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05);
    overflow-y:auto;
  }


  /* sidebar header */

  .sidebar-header{

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

    padding:22px;

    border-bottom:1px solid rgba(255,255,255,.05);

  }

  .sidebar-header img{
    height:36px;
  }

  .sidebar-close{
    font-size:18px;
    color:#fff;
    margin-right: 15px;
  }


  /* sidebar navigation */

  .sidebar-nav{

    flex:1;

    padding:30px 25px;

  }

  .sidebar-nav li{
    margin-bottom:20px;
  }

  .sidebar-nav a{

    font-size:16px;
    letter-spacing:1px;

    text-transform:uppercase;

    color:#ddd;

  }

  .sidebar-nav a:hover{
    color:#c79b57;
  }


  /* sidebar social icons */

  .sidebar-social{

    padding:25px;

    border-top:1px solid rgba(255,255,255,.05);

  }

  .sidebar-social a{

    margin-right:15px;

    font-size:18px;

    color:#ccc;

  }

  .sidebar-social a:hover{
    color:#c79b57;
  }

  body.sidebar-open{
    overflow:hidden;
  }

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

  .sidebar-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.6);

    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:1500;

  }

  .sidebar-overlay.open{

    opacity:1;
    visibility:visible;

  }


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

  @media (max-width:991px){
    
    .nav-right .social{
      display:none;
    }

    .desktop-menu{
      display:none;
    }

    .mobile-toggle{
      display:flex;
    }

    .wrap-menu-header{
      height:70px;
      padding:0 15px;
    }

    .wrap_header{
      height:70px;
    }

    .logo img{
      height:32px;
    }

  }

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

  .main_menu li.active a{

    color:#c79b57;

  }

  /* gold underline always visible */

  .main_menu li.active a::after{

    width:100%;

  }

  /* sidebar active */

  .sidebar-nav li.active a{

    color:#c79b57;

    font-weight:600;

  }

  /* optional glow */

  .main_menu li.active a,
  .sidebar-nav li.active a{

    text-shadow:
    0 0 8px rgba(199,155,87,.35);

  }
/* ================ END NAVIGATION ================= */

/* =================================
HERO SECTION
================================= */

  .bg-title-page{
    width:100%;
    min-height:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-position:center 30%;
    position:relative;
    overflow:hidden;

  }

  /* cinematic overlay */
  .bg-title-page::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
      rgba(199,155,87,.15),
      transparent 70%
    );
  }

  .bg-title-page::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
      180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.6) 50%,
      rgba(0,0,0,0.9) 100%
    );

  }

  /* title */

  .tit6{

    font-size:48px;
    letter-spacing:4px;

    color:#ffffff;

    text-transform:uppercase;

    text-shadow:
    0 12px 40px rgba(0,0,0,.9);

    position:relative;
    z-index:2;

  }

  /* HERO */

  .hero-about{
    min-height:420px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* soft fade into next section */

  .hero-about::after{

    content:"";

    position:absolute;

    inset:auto 0 -1px 0;

    height:180px;

    background:
      radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.6) 70%,
        #000 100%
      );

    pointer-events:none;

  }

  .hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
    rgba(0,0,0,.4),
    rgba(0,0,0,.85)
    );
  }

  .hero-inner{
    position:relative;
    text-align:center;
    z-index:2;
  }

  .hero-title{
    font-size:52px;
    letter-spacing:4px;
    color:white;
  }

  .hero-sub{
    color:#c79b57;
    margin-top:10px;
  }

  /* ABOUT TEXT */

  .about-text{
    max-width:800px;
    margin:auto;
    margin-bottom:18px;
    font-size:16px;
    line-height:1.8;
  }

  /* IMAGE SECTION */

  .about-origin{
    padding:120px 0;
  }

  .about-image img{
    width:100%;
    border-radius:12px;
  }

  /* MEMBERS */

  .member-card{
    text-align:center;
    margin-bottom:40px;
  }

  .member-img img{
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:15px;
  }

  /* BANNER */

  .banner-text{
    max-width:700px;
    margin:auto;
    color:#fff;
    margin-top:20px;
  }

  /* MOBILE */

  @media(max-width:768px){

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

    .about-origin{
      padding:80px 20px;
    }

  }

  /* =========================================================
  HERO MOBILE
  ========================================================= */
  @media (min-width:769px) and (max-width:1024px){
    .bg-title-page{
      min-height:250px;
    }

    .tit6{
      font-size:38px;
    }

  }

  @media (max-width:768px){

    .bg-title-page{

      min-height:150px;

      padding-top:60px;

    }

    .tit6{

      font-size:30px;

      letter-spacing:2px;

      text-align:center;

    }

  }

/* ===============================
ABOUT PAGE
=============================== */

  .section-padding{
    padding:50px 0;
  }

  /* headings */

  .section-heading{
    text-align:center;
    font-size:36px;
    color:#c79b57;
    margin-bottom:60px;
  }

  /* intro */

  .about-intro{
    max-width:800px;
    margin:auto;
    text-align:center;
  }

  .about-title{
    font-size:34px;
    letter-spacing:3px;
    margin-bottom:20px;
  }

  .quote{
    font-size:26px;
    color:#c79b57;
    font-style:italic;
  }

  .quote-sub{
    font-size:14px;
    color:#aaa;
    margin-bottom:25px;
  }

  /* members */

  .member-grid{
    text-align:center;
  }

  .member-card{
    margin-bottom:40px;
  }

  .member-inner{
    padding:30px;
    background:rgba(20,20,20,.6);
    backdrop-filter:blur(18px);
    border-radius:12px;
    border:1px solid rgba(255,255,255,.06);
    transition:.3s;
  }

  .member-inner:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.7);
  }

  .member-inner img{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;
  }

  /* story */

  .story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }

  .story-image img{
    width:100%;
    border-radius:12px;
  }

  /* performance */

  .performance-features{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin:40px 0;
  }

  .performance-features div{
    text-align:center;
    padding:14px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:8px;
    background:rgba(255,255,255,.02);
  }

  .closing-quote{
    text-align:center;
    font-size:22px;
    margin-top:30px;
    color:#c79b57;
  }

  .about-journey{

    position:relative;

    background:
      radial-gradient(
        rgba(199,155,87,.08),
        transparent 70%
      ),
      url("../images/about/world-map.jpg");

    background-size:140%;
    background-position:center;

    animation:mapPan 80s linear infinite alternate;

    background-attachment:fixed;

  }

  @keyframes mapPan{

    0%{
      background-position:40% 50%;
    }

    50%{
      background-position:60% 45%;
    }

    100%{
      background-position:45% 55%;
    }

  }

  /* dark jazz overlay */

  .about-journey::before{

    content:"";

    position:absolute;
    inset:0;

    background:
      linear-gradient(
        rgba(12,9,6,.92),
        rgba(22,16,10,.92)
      ),
      radial-gradient(
        circle at 40% 40%,
        rgba(60,42,22,.55),
        rgba(8,6,4,.9)
      );

    mix-blend-mode:multiply;

    pointer-events:none;

  }


  /* subtle stage lighting */

  .about-journey::after{

    content:"";

    position:absolute;
    inset:-20%;

    background:
      radial-gradient(
        circle at 30% 35%,
        rgba(199,155,87,.15),
        transparent 45%
      ),
      radial-gradient(
        circle at 75% 70%,
        rgba(199,155,87,.12),
        transparent 50%
      );

    filter:blur(90px);

    animation:journeyLights 40s linear infinite alternate;

    pointer-events:none;

  }


  @keyframes journeyLights{

    0%{
      transform:translateX(-5%) translateY(-3%) scale(1);
    }

    50%{
      transform:translateX(6%) translateY(4%) scale(1.1);
    }

    100%{
      transform:translateX(-4%) translateY(2%) scale(1.05);
    }

  }

  .about-journey::before{

    content:"";

    position:absolute;
    inset:-20%;

    background:
    radial-gradient(circle at 20% 30%, rgba(199,155,87,.15), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(199,155,87,.12), transparent 50%);

    filter:blur(80px);

    animation:journeyLights 40s linear infinite alternate;

  }

  @keyframes journeyLights{

    0%{transform:translateX(-5%) translateY(-3%) scale(1)}
    50%{transform:translateX(6%) translateY(4%) scale(1.1)}
    100%{transform:translateX(-4%) translateY(2%) scale(1.05)}

  }

  .member-inner:hover{

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

    box-shadow:
    0 30px 70px rgba(0,0,0,.8),
    0 0 30px rgba(199,155,87,.18);

  }

  /* ===============================
  SCROLL ANIMATION
  =============================== */

  .scroll-fade{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
  }

  .scroll-fade.visible{
    opacity:1;
    transform:none;
  }

  .reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
      transform 1.1s cubic-bezier(.16,1,.3,1),
      opacity .9s ease;
  }

  .reveal-left{
    transform:translateX(-80px);
  }

  .reveal-right{
    transform:translateX(80px);
  }

  .reveal-zoom{
    transform:scale(.85);
  }

  .reveal.visible{
    opacity:1;
    transform:none;
  }

  /* .scroll-opacity{
    opacity:.15;
    transition:opacity .4s linear;
  } */

  .scroll-opacity{
    opacity:.2;
    text-shadow:
      0 0 20px rgba(199,155,87,.15);
  }

  .reveal-mask{

    position:relative;
    overflow:hidden;
    display:inline-block;

  }

  .reveal-mask::after{

    content:"";

    position:absolute;
    inset:0;

    background:#0c0906;

    transform:translateX(0);

  }

  /* ===============================
  RESPONSIVE
  =============================== */

  @media (max-width:1024px){

  .story-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .performance-features{
    grid-template-columns:repeat(2,1fr);
  }

  }

  @media (max-width:768px){

  .section-padding{
    padding:50px 0;
  }

  .section-heading{
    font-size:28px;
  }

  .performance-features{
    grid-template-columns:1fr;
  }

  .member-inner img{
    width:110px;
    height:110px;
  }

  }

  /* =================================
  COLLABORATIONS
  ================================= */

  .collab-grid {
    margin-top: 40px;
  }

  .collab-item {
    background: rgba(20,20,20,.55);
    backdrop-filter: blur(18px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    transition: all .35s ease;
  }

  .collab-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.7);
  }

  .collab-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }

  .collab-content {
    padding: 25px;
  }

  .collab-content h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
  }

  .collab-content p {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
  }

  /* mobile */

  @media (max-width:768px){

    .collab-image img {
      height: 180px;
    }

  }

/* =================================
BOOKING PAGE
================================= */

  .booking-form{

    max-width:1000px;
    margin:auto;

  }

  .booking-form label{

    display:block;
    margin-bottom:8px;

    font-size:14px;
    color:#c79b57;

  }

  .booking-form input,
  .booking-form select,
  .booking-form textarea{

    width:100%;
    padding:14px 16px;

    border-radius:8px;

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

    background:rgba(20,20,20,.65);

    color:#ffffff;

    font-size:14px;

    transition:all .3s ease;

  }

  .booking-form textarea{

    min-height:120px;
    resize:vertical;

  }

  .booking-form input:focus,
  .booking-form select:focus,
  .booking-form textarea:focus{

    outline:none;

    border-color:#c79b57;

    box-shadow:
      0 0 0 1px rgba(199,155,87,.4),
      0 0 20px rgba(199,155,87,.15);

    background:rgba(20,20,20,.9);

  }

  .booking-form .row{

    margin-bottom:20px;

  }

  /* Fix Bootstrap readonly input color */

  .booking-form input[readonly],
  .booking-form input.flatpickr-input{

    background:rgba(20,20,20,.65) !important;
    color:#fff !important;

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

  }


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

  .btn{

    padding:14px 32px;

    border-radius:6px;

    border:none;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

  }

  .btn-primary{

    background:#c79b57;
    color:#000;

  }

  .btn-primary:hover{

    background:#e5c27a;

    transform:translateY(-2px);

    box-shadow:
      0 12px 30px rgba(199,155,87,.35);

  }


  /* =================================
  RIDER FLIP CARDS
  ================================= */

  .rider-card{

    perspective:1200px;

    height:100%;

  }

  .rider-card-inner{

    position:relative;

    width:100%;
    height:260px;

    transform-style:preserve-3d;

    transition:transform .7s cubic-bezier(.16,1,.3,1);

  }

  .rider-card:hover .rider-card-inner{

    transform:rotateY(180deg);

  }


  /* FRONT + BACK */

  .rider-card-front,
  .rider-card-back{

    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:40px;

    background:rgba(20,20,20,.6);

    backdrop-filter:blur(18px);

    border-radius:12px;

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

    backface-visibility:hidden;

  }


  /* BACK SIDE */

  .rider-card-back{

    transform:rotateY(180deg);

  }


  /* TEXT */

  .rider-card h4{

    font-size:20px;
    margin-bottom:10px;

  }

  .rider-card p{

    font-size:14px;
    color:#aaa;

  }

  .rider-card ul{

    padding-left:18px;
    color:#aaa;
    font-size:14px;

  }

  .rider-card li{

    margin-bottom:6px;

  }


  /* HOVER GLOW */

  .rider-card:hover .rider-card-front,
  .rider-card:hover .rider-card-back{

    box-shadow:
      0 25px 60px rgba(0,0,0,.8),
      0 0 40px rgba(199,155,87,.18);

  }


  /* BUTTON */

  .rider-download{

    margin-top:auto;
    margin-bottom:10px;

  }


  /* HINT */

  .rider-hint{

    font-size:12px;
    color:#c79b57;
    opacity:.7;

  }


  /* MOBILE (disable flip) */

  @media(max-width:768px){

    .rider-card-inner{

      transform:none !important;

    }

  }


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

  .journey-stats{

    margin-top:40px;

  }

  .journey-stats h2{

    font-size:42px;

    color:#c79b57;

    margin-bottom:5px;

  }

  .journey-stats p{

    color:#aaa;
    font-size:14px;

  }


  /* =================================
  DATE PICKER (FLATPICKR THEME)
  ================================= */

  .flatpickr-calendar{

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

  }

  .flatpickr-day{

    color:#fff;

  }

  .flatpickr-day:hover{

    background:#c79b57;
    color:#000;

  }

  .flatpickr-day.selected{

    background:#c79b57;
    border-color:#c79b57;
    color:#000;

  }

  .flatpickr-day.disabled{

    color:#555;

  }

  .flatpickr-month{

    color:#c79b57;

  }

  .flatpickr-weekday{

    color:#aaa;

  }

  #datePicker{
    background-image:url("data:image/svg+xml,%3Csvg ... %3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:40px;
  }


  /* =================================
  CONTACT INFO
  ================================= */

  .contact-info{

    text-align:center;

  }

  .contact-info p{

    font-size:16px;
    margin-bottom:8px;

  }


  /* =================================
  FORM GLASS PANEL EFFECT
  ================================= */

  .booking-form{

    background:rgba(15,15,15,.55);

    padding:60px;

    border-radius:14px;

    backdrop-filter:blur(20px);

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

    box-shadow:
      0 30px 80px rgba(0,0,0,.7);

  }


  /* =================================
  RESPONSIVE
  ================================= */

  @media (max-width:992px){

    .booking-form{

      padding:40px;

    }

  }

  @media (max-width:768px){

    .booking-form{

      padding:30px;

    }

    .journey-stats h2{

      font-size:32px;

    }

  }

/* =========================================================
TOUR SECTION — BASE
========================================================= */

  .section-tour{
    position:relative;
    background:
      linear-gradient(
        rgba(0,0,0,.88),
        rgba(0,0,0,.96)
      ),
      url("../images/hero/hero-bg.jpeg");

    background-size:cover;
    background-position:center;
    overflow:hidden;
    z-index:1;
    padding-bottom: 50px;
  }

  @media (max-width:1024px){

    .section-tour{
      background-position:center 30%;
    }

  }

  .section-tour::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(5,5,5,1)
    );

    pointer-events:none;

  }


  /* =========================================================
  STAGE LIGHT LAYER
  ========================================================= */

  .section-tour::before{

    content:"";

    position:absolute;

    inset:-20%;

    z-index:0;

    background:
      radial-gradient(circle at 20% 30%, rgba(199,155,87,.15), transparent 40%),
      radial-gradient(circle at 80% 60%, rgba(199,155,87,.12), transparent 45%),
      radial-gradient(circle at 50% 90%, rgba(199,155,87,.10), transparent 50%);

    filter:blur(60px);

    animation:stageLights 35s linear infinite alternate;

    pointer-events:none;

  }


  /* slow movement */

  @keyframes stageLights{

    0%{
      transform:translateX(-6%) translateY(-3%) scale(1);
    }

    50%{
      transform:translateX(6%) translateY(4%) scale(1.1);
    }

    100%{
      transform:translateX(-4%) translateY(2%) scale(1.05);
    }

  }

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

  .section-tour .container{

    position:relative;

    z-index:2;

  }

  /* =========================================================
  TOUR INTRO
  ========================================================= */

  .tour-intro{

    text-align:center;

    margin-bottom:40px;

  }

  .tour-title{

    font-size:34px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#ffffff;

    margin-bottom:12px;

    text-shadow:
      0 10px 35px rgba(0,0,0,.8),
      0 0 25px rgba(199,155,87,.25);

  }

  .tour-subtitle{

    max-width:620px;

    margin:auto;

    font-size:15px;

    line-height:1.8;

    color:#c79b57;

    letter-spacing:.5px;

  }
  /* =========================================================
  CALENDAR CONTAINER
  ========================================================= */

  #tour-calendar{

    width:100%;
    max-width:1100px;

    margin:auto;

    padding:35px;

    border-radius:12px;

    background:rgba(20,20,20,.55);

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.04);

    animation:fadeInCalendar 1s ease;

  }

  @keyframes fadeInCalendar{

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

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

  }

  #tour-calendar::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:900px;
    height:500px;

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

    background:radial-gradient(
      rgba(199,155,87,.18),
      transparent 65%
    );

    filter:blur(80px);

    z-index:-1;

  }

  /* =========================================================
  FULL CALENDAR GRID
  ========================================================= */

  .fc-theme-standard td,
  .fc-theme-standard th{

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

  }

  /* remove white scrollgrid border */

  .fc-theme-standard .fc-scrollgrid{

    border:none;

  }

  /* day header */

  .fc-col-header-cell{

    background:rgba(30,30,30,.85);

    color:#c79b57;

    font-weight:600;

    border:none !important;

  }

  /* body grid */

  .fc-theme-standard td{

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

  }

  /* day numbers */

  .fc-daygrid-day-number{

    color:#d8d8d8;

    font-size:13px;

  }

  /* today highlight */

  .fc-day-today{

    background:rgba(199,155,87,.12) !important;

  }

  /* hover */

  .fc-daygrid-day:hover{

    background:rgba(199,155,87,.08);

    cursor:pointer;

  }

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

  .fc-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

  }

  .fc-toolbar-title{

    color:#c79b57;

    font-weight:700;

    letter-spacing:2px;

  }

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

  .fc-button{

    background:linear-gradient(135deg,#c79b57,#a9844e);

    border:none;

    color:#000;

    border-radius:25px;

    padding:6px 14px;

    font-weight:600;

  }

  .fc-button:hover{

    background:#e4c58d;

  }

  /* =========================================================
CALENDAR BUTTON ACTIVE STATE
========================================================= */

.fc-button.fc-button-active{

  background:linear-gradient(135deg,#e4c58d,#c79b57);

  color:#000;

  box-shadow:
  0 0 10px rgba(199,155,87,.6),
  inset 0 1px 0 rgba(255,255,255,.4);

}

/* today active highlight */

.fc-today-button.fc-button-active{

  background:#e4c58d;

}

/* hover */

.fc-button:hover{

  background:#e4c58d;

}

  /* =========================================================
  EVENT BLOCKS
  ========================================================= */

  .fc-event{

    background:linear-gradient(135deg,#c79b57,#e4c58d);

    border:none;

    color:#000;

    font-weight:600;

    padding:4px 8px;

    border-radius:6px;

    font-size:13px;

  }

  .fc-event:hover{

    transform:scale(1.05);

    box-shadow:0 8px 18px rgba(0,0,0,.6);

  }

  /* =========================================================
  EVENT BADGES
  ========================================================= */

  .event-badge{

    position:absolute;

    top:10px;
    left:10px;

    font-size:12px;
    font-weight:700;

    padding:5px 12px;

    border-radius:20px;

    letter-spacing:1px;

  }

  .event-badge.soldout{

    background:#ff3b3b;
    color:#fff;

  }

  /* =========================================================
  SWEETALERT2 — GLASS POPUP
  ========================================================= */

  .swal2-popup{

    background:rgba(18,18,18,.55) !important;

    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);

    border-radius:18px;

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6);

    color:#eaeaea;

  }

  /* title */

  .swal2-title{

    color:#fff !important;

    font-weight:700;

  }

  /* text */

  .swal2-html-container{

    color:#bfbfbf !important;

  }

  /* icon glow */

  .swal2-icon{

    border-color:#c79b57 !important;

    box-shadow:
    0 0 25px rgba(199,155,87,.45),
    inset 0 0 12px rgba(199,155,87,.2);

  }

  /* buttons */

  .swal2-confirm{

    background:linear-gradient(135deg,#c79b57,#e4c58d) !important;

    color:#000 !important;

    border-radius:30px !important;

    padding:10px 26px !important;

    font-weight:600;

  }

  .swal2-cancel{

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

    color:#fff !important;

    border-radius:30px !important;

  }

  /* backdrop */

  .swal2-container.swal2-backdrop-show{

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

  }

  /* =========================================================
  TABLET CALENDAR
  ========================================================= */

  @media (max-width:1024px){

    #tour-calendar{

      padding:25px;

    }

    .fc-daygrid-day{

      min-height:90px;

    }

  }

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

  @media (max-width:768px){

    .section-tour{

      padding:60px 0;

    }

    #tour-calendar{

      padding:14px;

      border-radius:10px;

    }

    /* stack toolbar */

    .fc-toolbar{

      flex-direction:column;

      gap:10px;

      text-align:center;

    }

    /* smaller title */

    .fc-toolbar-title{

      font-size:20px;

      letter-spacing:1px;

    }

    /* hide today button */

    .fc-today-button{

      display:none;

    }

    /* list view styling */

    .fc-list{

      border:none;

    }

    .fc-list-event{

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

      border-radius:10px;

      margin-bottom:10px;

      padding:6px 10px;

    }

    .fc-list-event:hover{

      background:rgba(199,155,87,.18);

    }

    .fc-list-event-title{

      font-size:15px;

    }

    .fc-list-event-time{

      color:#c79b57;

      font-weight:600;

    }

  }

  /* =========================================================
  LIST VIEW — GLASS TOUR CARDS
  ========================================================= */

  .fc-list{

    border:none;
    background:transparent;

  }

  /* remove white table rows */

  .fc-list-table{
    background:transparent;
  }

  .fc-list-table tr{
    background:transparent !important;
  }

  /* date headers */

  .fc-list-day{

    background:transparent !important;

    border:none !important;

    padding:14px 0;

    margin-top:20px;

    color:#c79b57;

    font-weight:700;

    letter-spacing:1px;

  }

  .fc-list-day-text{
    color:#c79b57;
  }

  .fc-list-day-side-text{
    color:#999;
  }


  /* event card */

  .fc-list-event{

    display:block;

    background:rgba(20,20,20,.55);

    backdrop-filter:blur(18px);

    border-radius:12px;

    margin:10px 0;

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

    transition:all .25s ease;

  }

  /* remove table borders */

  .fc-list-event td{
    border:none;
    padding:12px 16px;
  }

  /* hover */

  .fc-list-event:hover{

    transform:translateY(-3px);

    background:rgba(199,155,87,.18);

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

  }

  /* time */

  .fc-list-event-time{

    color:#c79b57;

    font-weight:600;

    font-size:13px;

    width:90px;

  }

  /* title */

  .fc-list-event-title{

    font-size:15px;

    font-weight:600;

    color:#e6e6e6;

  }

  /* =========================================================
  FULLCALENDAR LIST VIEW — GLASS STYLE
  ========================================================= */

  /* kill the default white background everywhere */

  .fc-list,
  .fc-list-table,
  .fc-list-table tbody,
  .fc-list-table tr,
  .fc-list-table td{
    background:transparent !important;
    border:none !important;
  }


  /* date row */

  .fc-list-day{
    background:transparent !important;
    border:none !important;
  }

  .fc-list-day-cushion{
    display:flex;
    justify-content:space-between;

    padding:14px 0;

    font-weight:700;
    letter-spacing:1px;

    color:#c79b57;
  }

  .fc-list-day-text{
    color:#c79b57;
  }

  .fc-list-day-side-text{
    color:#a88a55;
  }


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

  .fc-list-event{

    background:rgba(18,18,18,.55) !important;

    backdrop-filter:blur(18px);

    border-radius:12px;

    margin:10px 0;

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

    overflow:hidden;

    transition:.25s ease;
    position:relative;
  }

  .fc-list-event::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:#c79b57;
    border-radius:4px 0 0 4px;
  }

  /* remove table look */

  .fc-list-event td{
    border:none !important;
    padding:14px 18px;
  }


  /* hover effect */

  .fc-list-event:hover{

    transform:translateY(-2px);

    background:rgba(199,155,87,.18) !important;

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


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

  /* time */

  .fc-list-event-time{

    color:#c79b57;

    font-weight:600;

    font-size:13px;

    width:90px;
  }


  /* title */

  .fc-list-event-title{

    font-size:15px;

    font-weight:600;

    color:#e6e6e6;
  }


  /* =========================================================
  REMOVE BLUE DOT
  ========================================================= */

  .fc-list-event-dot{
    display:none;
  }

  /* status */

  .tour-status{

    margin-top:6px;

    font-size:12px;

    font-weight:700;

  }

  .tour-status.soldout{
    color:#ff4b4b;
  }

  .tour-status.available{
    color:#3cff8e;
  }

  .next-show-banner{

    margin-bottom:30px;
    margin-left:32px;

    padding:12px 20px;

    display:inline-block;

    background:rgba(20,20,20,.55);

    backdrop-filter:blur(18px);

    border-radius:30px;

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

    color:#c79b57;

    font-weight:600;

    letter-spacing:1px;

    cursor:pointer;

    transition:.25s;
    animation:nextShowGlow 4s ease-in-out infinite;

  }

  @keyframes nextShowGlow{

    0%{
      box-shadow:0 0 0 rgba(199,155,87,0);
    }

    50%{
      box-shadow:0 0 20px rgba(199,155,87,.35);
    }

    100%{
      box-shadow:0 0 0 rgba(199,155,87,0);
    }

  }

  .next-show-banner:hover{

    background:rgba(199,155,87,.18);

    transform:translateY(-2px);

  }

  @media (min-width:769px) and (max-width:1024px){
    .next-show-banner{
      margin-left: 0px;
    }
  }

  @media (max-width:768px){
    .next-show-banner{
      margin-left: 0px;
    }

  }
/* ================ END CALENDAR ================= */

/* ===============================
GALLERY
=============================== */

  .gallery-section{
    text-align:center;
  }

  /* FILTER BUTTONS */

  .gallery-filters{
    margin-bottom:50px;
  }

  .filter-btn{

    background:transparent;

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

    color:#ccc;

    padding:10px 20px;

    margin:5px;

    font-size:13px;

    letter-spacing:1px;

    transition:.3s;

  }

  .filter-btn:hover,
  .filter-btn.active{

    background:#c79b57;

    color:#000;

    border-color:#c79b57;

  }


  /* GRID */

  .gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:25px;

  }


  /* ITEMS */

  .gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:10px;

    cursor:pointer;

  }

  .gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:transform .6s ease;

  }

  .gallery-item:hover img{

    transform:scale(1.12);

  }


  /* LIGHTBOX */

  .gallery-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

  }

  .gallery-lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:6px;

  }

  .lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:40px;

    color:#fff;

    cursor:pointer;

  }

  /* ===============================
  GALLERY LOAD MORE
  =============================== */

  .gallery-loadmore-wrapper{

    margin-top:70px;

    display:flex;

    justify-content:center;

  }

  .gallery-loadmore-btn{

    padding:14px 125px;

    border-radius:6px;

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

    background:rgba(20,20,20,.6);

    color:#ccc;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

  }

  .gallery-loadmore-btn:hover{

    background:#c79b57;

    color:#000;

    border-color:#c79b57;

    transform:translateY(-2px);

    box-shadow:
      0 10px 25px rgba(199,155,87,.25);

  }

  /* ===============================
  MUSIC PAGE
  =============================== */

  .music-cover{

    width:100%;
    border-radius:10px;

  }

  .music-platforms{

    margin-top:25px;

  }

  .music-btn{

    display:inline-block;

    padding:12px 20px;

    margin:6px;

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

    color:#ccc;

    transition:.3s;

  }

  .music-btn:hover{

    background:#c79b57;
    color:#000;
    border-color:#c79b57;

  }

  /* album cards */

  .album-card{

    background:rgba(20,20,20,.6);

    backdrop-filter:blur(18px);

    border-radius:12px;

    padding:20px;

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

    transition:.35s;

  }

  .album-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.8),
    0 0 30px rgba(199,155,87,.18);

  }

  .album-card img{

    width:100%;
    border-radius:8px;
    margin-bottom:15px;

  }

  /* ===============================
VIDEO GALLERY
=============================== */

.video-grid{

  display:grid;

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

  gap:30px;

}

.video-item{

  position:relative;

  cursor:pointer;

  overflow:hidden;

  border-radius:10px;

}

.video-item img{

  width:100%;

  height:220px;

  object-fit:cover;

  transition:transform .6s;

}

.video-item:hover img{

  transform:scale(1.12);

}

.video-play{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:40px;

  color:#fff;

  background:rgba(0,0,0,.45);

  opacity:0;

  transition:.35s;

}

.video-item:hover .video-play{

  opacity:1;

}

.video-item h4{

  margin-top:15px;

  font-size:16px;

}

/* ===============================
VIDEO LIGHTBOX
=============================== */

  .video-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

  }

  .video-lightbox-inner{

    position:relative;

    width:80%;

    max-width:1000px;

  }

  .video-frame{

    width:100%;

    height:560px;

    border:none;

  }

  .video-close{

    position:absolute;

    top:-50px;

    right:0;

    font-size:40px;

    color:#fff;

    cursor:pointer;

  }

  .video-prev,
  .video-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:35px;

    color:#fff;

    cursor:pointer;

  }

  .video-prev{

    left:-60px;

  }

  .video-next{

    right:-60px;

  }

/* =========================================================
FOOTER — GLASS STYLE
========================================================= */

  footer{

    position:relative;

    background:rgba(12,12,12,.55);

    backdrop-filter:blur(20px);

    border-top:1px solid rgba(255,255,255,.06);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 -20px 40px rgba(0,0,0,.7);

  }

  /* footer layout */

  footer .flex-sb-m{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

  }

  /* social icons */

  footer .fa{

    color:#c79b57;

    transition:.25s;

  }

  footer .fa:hover{

    color:#e4c58d;

    transform:translateY(-2px);

  }


  /* copyright */

  footer .txt17{

    font-size:14px;

    color:#9a9a9a;

  }

  footer a{

    color:#c79b57;

    transition:.25s;

  }

  footer a:hover{

    color:#e4c58d;

  }

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

  @media (max-width:768px){

    footer .flex-sb-m{

      flex-direction:column;

      text-align:center;

      gap:10px;

    }

    footer .txt17{

      font-size:13px;

    }

    .btn-back-to-top{

      bottom:20px;
      right:20px;

      width:40px;
      height:40px;

    }

  }