.pre-header{
    overflow-x: hidden;
     background-color:#720000;
     color:white;
     font-size:13px;
     padding:8px 40px;
     display:flex;
     justify-content:space-between;
     align-items:center;
}
 .pre-left,.pre-right{
    display:flex;
    gap:16px;
    align-items:center
}
 .pre-header a{
    color:white;
    text-decoration:none
}
 .social-icons a{
    margin-left:8px;
    font-size:16px
}
/* ===== Header ===== */
 header.main-header{
     background-color:#8B0000 !important;
     color:white;
     font-weight: 700;
     padding:12px 40px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     position:relative;
     z-index:1200;
     box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
 .logo img{
    height:62px;
    display:block
}
/* Desktop nav */
 nav.nav-desktop{
    display:flex;
    gap:28px;
    align-items:center
}
nav.nav-desktop a{
    font-weight: 700;
}
 nav a, nav .drop-toggle{
     color:white;
     text-decoration:none;
     font-weight:700;
     padding:8px 0;
     display:inline-flex;
     align-items:center;
     gap:8px;
     cursor:pointer;
}
 nav a:hover, nav .drop-toggle:hover{
    color:#f5d742
}
/* Desktop dropdown (floating) */
 .dropdown{
    position:relative
}
 .dropdown > .dropdown-menu{
    width: 1260px;
     position:absolute;
     top:128%;
     left:-680px;
     background:#fff;
     color:#333;
     min-width:200px;
     padding:8px 0;
     border-radius:8px;
     box-shadow:0 8px 30px rgba(0,0,0,0.12);
     opacity:0;
     visibility:hidden;
     transform:translateY(8px);
     transition:all .22s ease;
     display: flex;
     flex-wrap: wrap;
     gap: 0px;
}
 .dropdown:hover > .dropdown-menu{
     opacity:1;
     visibility:visible;
     transform:translateY(0);
}
 .dropdown-menu a{
    display:block;
    padding:10px 16px;
    color:#fff;
    text-decoration:none
}
 .dropdown-menu a:hover{
    background:#f6f6f6;
    color:#8B0000;
    border-radius: 10px;
}
/* CTA */
 .cta{
    background:linear-gradient(90deg,#ff4b2b,#ff415b);
     color:#fff;
     padding:10px 18px;
     border-radius:30px;
     text-decoration:none;
     font-weight:600;
     white-space:nowrap
}
 .cta:hover{
    transform:scale(1.03);
    transition:.15s
}
/* Hamburger (mobile) */
 .hamburger{
    display:none;
    font-size:22px;
    cursor:pointer;
    background:transparent;
    border:0;
    color:white;
    width: 70px !important;
}
/* Mobile menu (hidden by default) */
 .mobile-menu{
     display:none;
     position:absolute;
     top:100%;
     left:0;
     width:100%;
     background:#8B0000;
     z-index:1100;
     box-shadow:0 8px 30px rgba(0,0,0,0.12);
     flex-direction:column;
     overflow:visible;
    /* allow children to expand naturally */
}
 .mobile-menu.open{
    display:flex;
    animation:slideDown .18s ease
}

 nav a.active,
  .mobile-menu a.active,
  .mobile-menu .dropdown-menu a.active {
    color: #f5d742 !important;
    font-weight: 600;
  }
 @keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-6px)
    }
    to{
        opacity:1;
        transform:none
    }
}
 .mobile-menu > a, .mobile-menu .mobile-item{
     color:white;
     padding:14px 18px;
     text-decoration:none;
     border-bottom:1px solid rgba(255,255,255,0.08);
     display:block;
}
 .mobile-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    cursor:pointer
}
/* IMPORTANT: override desktop absolute dropdown for mobile — position: static so it flows */
 .mobile-menu .dropdown-menu{
     position:static !important;
     left:auto;
     top:auto;
     box-shadow:none !important;
     background:transparent;
     padding:0;
     max-height:0;
     overflow:hidden;
     opacity:0;
     transition:max-height .32s ease,opacity .25s ease, padding .25s ease;
}
 .mobile-menu .dropdown-menu a{
     padding:10px 34px;
     border-bottom:1px solid rgba(255,255,255,0.04);
     color:white;
}
 .mobile-menu .dropdown.open > .dropdown-menu{
    /* we will also set max-height via JS to exact scrollHeight for smoothness */
     opacity:1;
}
 .mobile-menu .dropdown > a i{
    transition:transform .25s ease
}
 .mobile-menu .dropdown.open > a i{
    transform:rotate(180deg)
}
/* responsive layout rules */
 @media (max-width: 1050px){
 .dropdown > .dropdown-menu{
    max-width: 950px;
    left: -330px;
 }
 }
 @media (max-width: 991px){
     nav.nav-desktop, .cta{
        display:none
    }
     .hamburger{
        display:block
    }
     header.main-header{
        padding:12px 14px
    }
     .pre-header{
        padding:6px 14px
    }
    .dropdown > .dropdown-menu{
        width: auto;
    }
    .mobile-menu .dropdown.open > .dropdown-menu{
        
        flex-direction: column;
        display: contents;
    }
}
/* small desktop fine-tune */
 @media (min-width:992px){
     .mobile-menu{
        display:none !important
    }
}
 @media (max-width:600px){
     .pre-left,.pre-right{
    display:flex;
    gap:5px;
    align-items:center
}
.pre-header{
    font-size: 10px !important;
}
      .dropdown > .dropdown-menu{
       flex-direction: column;
      }
}



.nav-video-sec {
    position: relative;
    overflow: hidden;
}

.nav-video-sec::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #720000ad;
    z-index: -1; 
    border-radius: 6px;
}

.nav-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2; 
    border-radius: 6px;
}

