 /* ===== PRELOADER ===== */
 #preloader {
     position: fixed;
     inset: 0;
     background: #0A1628;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     transition: opacity 0.6s ease, visibility 0.6s ease;
 }

 #preloader.loaded {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }

 .loader-ring {
     width: 80px;
     height: 80px;
     border: 4px solid rgba(201, 168, 76, 0.1);
     border-top: 4px solid #C9A84C;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 .loader-ring-inner {
     width: 52px;
     height: 52px;
     border: 3px solid rgba(139, 0, 0, 0.1);
     border-bottom: 3px solid #8B0000;
     border-radius: 50%;
     animation: spin 0.6s linear infinite reverse;
     position: absolute;
 }

 .loader-crosshair {
     width: 22px;
     height: 22px;
     position: absolute;
     animation: pulse 1.2s ease-in-out infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.4;
         transform: scale(0.8);
     }
 }

 .loader-text {
     font-family: 'Oswald', sans-serif;
     color: #C9A84C;
     font-size: 13px;
     letter-spacing: 8px;
     text-transform: uppercase;
     margin-top: 30px;
     animation: flicker 2s ease-in-out infinite;
 }

 .loader-progress {
     width: 200px;
     height: 2px;
     background: rgba(201, 168, 76, 0.1);
     margin-top: 15px;
     overflow: hidden;
     border-radius: 2px;
 }

 .loader-progress-bar {
     height: 100%;
     background: linear-gradient(90deg, #8B0000, #C9A84C);
     width: 0;
     animation: loading 2.2s ease-in-out forwards;
 }

 @keyframes loading {
     0% {
         width: 0
     }

     50% {
         width: 70%
     }

     100% {
         width: 100%
     }
 }

 @keyframes flicker {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0.5
     }
 }

 /* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: #0A1628;
 }

 ::-webkit-scrollbar-thumb {
     background: #C9A84C;
     border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #d4b35a;
 }

 /* ===== HERO ===== */
 .hero-section {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
 }

 .hero-bg-slider {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1.5s ease-in-out;
     transform: scale(1.05);
 }

 .hero-slide.active {
     opacity: 1;
     animation: heroZoom 8s ease-in-out forwards;
 }

 @keyframes heroZoom {
     0% {
         transform: scale(1.05)
     }

     100% {
         transform: scale(1)
     }
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.7) 40%, rgba(45, 51, 32, 0.6) 70%, rgba(10, 22, 40, 0.85) 100%);
     z-index: 1;
 }

 .hero-grid-overlay {
     position: absolute;
     inset: 0;
     z-index: 2;
     opacity: 0.04;
     background-image: linear-gradient(rgba(201, 168, 76, 0.4) 1px, transparent 1px),
         linear-gradient(90deg, rgba(201, 168, 76, 0.4) 1px, transparent 1px);
     background-size: 50px 50px;
 }

 .hero-bottom-fade {
     position: absolute;
     bottom: -2px;
     left: 0;
     right: 0;
     height: 180px;
     background: linear-gradient(to top, #0f1923, transparent);
     z-index: 3;
 }

 /* ===== PARTICLES ===== */
 .particle {
     position: absolute;
     width: 2px;
     height: 2px;
     background: #C9A84C;
     border-radius: 50%;
     opacity: 0;
     animation: particleFloat 10s linear infinite;
     z-index: 2;
 }

 @keyframes particleFloat {
     0% {
         opacity: 0;
         transform: translateY(100vh) scale(0);
     }

     10% {
         opacity: 0.5;
     }

     90% {
         opacity: 0.5;
     }

     100% {
         opacity: 0;
         transform: translateY(-10vh) scale(1);
     }
 }

 .stagger-1 {
     animation-delay: 0s;
 }

 .stagger-2 {
     animation-delay: 2s;
 }

 .stagger-3 {
     animation-delay: 4s;
 }

 .stagger-4 {
     animation-delay: 1s;
 }

 .stagger-5 {
     animation-delay: 3s;
 }

 .stagger-6 {
     animation-delay: 5s;
 }

 /* ===== NAV ===== */
 .nav-scrolled {
     background: rgba(10, 22, 40, 0.97) !important;
     backdrop-filter: blur(20px);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
 }

 .mobile-menu {
     transform: translateX(100%);
     transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .mobile-menu.active {
     transform: translateX(0);
 }

 /* ===== BUTTONS ===== */
 .btn-military {
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .btn-military::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
     transition: left 0.5s ease;
 }

 .btn-military:hover::before {
     left: 100%;
 }


 /* Overlay background */
 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     opacity: 0;
     visibility: hidden;
     transition: 0.3s ease;
     z-index: 40;
 }

 /* Mobile menu */
 .mobile-menu {
     position: fixed;
     top: 0;
     right: -320px;
     width: 320px;
     height: 100vh;
     background: #0b1b2b;
     padding: 20px;
     transition: 0.3s ease;
     z-index: 50;
 }

 /* Close button */
 .close-btn {
     display: block;
     color: gold;
     font-size: 22px;
     text-align: right;
     cursor: pointer;
 }

 /* Menu links */
 .mobile-menu a {
     display: block;
     padding: 12px;
     color: #ccc;
     text-transform: uppercase;
     font-weight: bold;
     text-decoration: none;
     transition: 0.2s;
 }

 .mobile-menu a:hover {
     color: gold;
     background: rgba(255, 215, 0, 0.1);
 }

 /* ===== OPEN STATE ===== */
 #menuToggle:checked~.overlay {
     opacity: 1;
     visibility: visible;
 }

 #menuToggle:checked~.mobile-menu {
     right: 0;
 }

 /* ===== BORDER ANIMATE ===== */
 .border-animate {
     position: relative;
     overflow: hidden;
 }

 .border-animate::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, #C9A84C, transparent);
     animation: borderSlide 3s linear infinite;
 }

 @keyframes borderSlide {
     to {
         left: 100%;
     }
 }

 /* ===== COUNTER BOX ===== */
 .counter-box {
     background: linear-gradient(135deg, rgba(10, 22, 40, 0.95), rgba(45, 51, 32, 0.9));
     border: 1px solid rgba(201, 168, 76, 0.2);
     backdrop-filter: blur(10px);
 }

 /* ===== SERVICE CARD ===== */
 .service-card {
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .service-card:hover {
     transform: translateY(-8px);
 }

 .service-card:hover .card-icon {
     transform: scale(1.1) rotate(5deg);
 }

 .card-icon {
     transition: all 0.4s ease;
 }

 /* ===== SECTION TITLE ===== */
 .section-title::after {
     content: '';
     display: block;
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #C9A84C, #8B0000);
     margin-top: 12px;
 }

 .section-title-center::after {
     margin-left: auto;
     margin-right: auto;
 }

 /* ===== FLOAT ===== */
 .float-animation {
     animation: float 6s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-20px)
     }
 }

 /* ===== RADAR ===== */
 .radar-sweep {
     animation: radarSweep 4s linear infinite;
 }

 @keyframes radarSweep {
     to {
         transform: rotate(360deg);
     }
 }

 /* ===== TIMELINE ===== */
 .timeline-line {
     background: linear-gradient(to bottom, transparent, #C9A84C, transparent);
 }

 /* ===== IMAGE HOVER ===== */
 .img-hover-zoom {
     overflow: hidden;
 }

 .img-hover-zoom img {
     transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .img-hover-zoom:hover img {
     transform: scale(1.08);
 }

 /* ===== GALLERY ITEM ===== */
 .gallery-item {
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .gallery-item .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .gallery-item:hover .gallery-overlay {
     opacity: 1;
 }

 .gallery-item .gallery-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 1.5rem;
     transform: translateY(20px);
     opacity: 0;
     transition: all 0.4s ease;
 }

 .gallery-item:hover .gallery-content {
     transform: translateY(0);
     opacity: 1;
 }

 /* ===== LIGHTBOX ===== */
 #lightbox {
     position: fixed;
     inset: 0;
     z-index: 99998;
     background: rgba(10, 22, 40, 0.95);
     backdrop-filter: blur(20px);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease;
 }

 #lightbox.active {
     opacity: 1;
     visibility: visible;
 }

 #lightbox img {
     max-width: 90vw;
     max-height: 85vh;
     object-fit: contain;
     border: 2px solid rgba(201, 168, 76, 0.3);
 }

 /* ===== SMOOTH SCROLL ===== */
 html {
     scroll-behavior: smooth;
 }

 html, body {
  overflow-x: hidden;
}