:root {
     --primary-orange: #ff6600;
     --dark-gradient: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
     --navy-dark: #0f172a;
 }

 body {
     font-family: 'Poppins', sans-serif;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 .navbar-brand {
     font-family: 'Montserrat', sans-serif;
 }

 .text-orange {
     color: var(--primary-orange);
 }

 .bg-orange {
     background: var(--dark-gradient);
 }

 /* Transparent Navbar Style */
 /* NAVBAR WHITE MODERN STYLE */
 .navbar {
     padding: 20px 0;
     background: transparent;
     backdrop-filter: blur(10px);
     transition: all 0.4s ease;
     color: #fff !important;
 }

 /* Default text white */
 .navbar .nav-link,
 .navbar .navbar-brand,
 .navbar .dropdown-toggle {
     color: #fff !important;
 }

 /* Keep text white while scrolling */
 .navbar.scrolled .nav-link,
 .navbar.scrolled .navbar-brand,
 .navbar.scrolled .dropdown-toggle {
     color: #242222 !important;
 }

 /* Dropdown items */
 .dropdown-menu .dropdown-item {
     color: #000;
 }

 /* Mobile menu icon */
 .navbar-toggler {
     border-color: #fff;
 }

 .navbar-toggler-icon {
     filter: brightness(0) invert(1);
 }

 /* On Scroll */
 .navbar.scrolled {
     background: rgba(10, 1, 1, 0.98) !important;
     padding: 10px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* NAV LINKS DARK */
 .navbar .nav-link {
     color: var(--navy-dark) !important;
     font-weight: 500;
     margin-left: 10px;
     position: relative;
     transition: 0.3s;
 }

 /* ORANGE POWER HOVER EFFECT */
 .navbar .nav-link::after {
     content: "";
     position: absolute;
     width: 0%;
     height: 2px;
     left: 0;
     bottom: -5px;
     background: var(--dark-gradient);
     transition: 0.4s;
 }

 .navbar .nav-link:hover {
     color: var(--primary-orange) !important;
 }

 .navbar .nav-link:hover::after {
     width: 100%;
 }

 /* ACTIVE LINK */
 .navbar .nav-link.active {
     color: var(--primary-orange) !important;
 }

 /* BUTTON KEEP SAME BUT IMPROVED */
 .navbar .btn-orange {
     color: #ffffff;
     background: var(--dark-gradient);
     border: none;
 }

 .navbar .btn-orange:hover {
     box-shadow: 0 10px 25px rgba(255, 102, 0, 0.4);
     transform: translateY(-2px);
 }

 /* TOGGLER FIX (IMPORTANT) */
 .navbar-toggler {
     border: none;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 .navbar-brand span {
     color: var(--primary-orange);
 }

 /* Hero Video Section */
 .hero-section {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
 }

 .video-bg {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translate(-50%, -50%);
     z-index: -1;
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
 }

 .hero-content {
     z-index: 1;
 }

 /* Custom Buttons */
 .btn-orange {
     background: var(--dark-gradient);
     border: none;
     color: white;
     padding: 10px 25px;
     border-radius: 50px;
     transition: 0.3s;
 }

 .btn-orange:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(255, 102, 0, 0.3);
     color: white;
 }

 .btn-orange-lg {
     background: var(--dark-gradient);
     color: white;
     padding: 15px 40px;
     border-radius: 5px;
     font-weight: bold;
     text-decoration: none;
     display: inline-block;
 }

 /* Project Cards */
 .project-card {
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     cursor: pointer;
 }

 .project-card img {
     transition: transform 0.6s ease;
 }

 .project-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(255, 102, 0, 0.9), transparent);
     display: flex;
     align-items: flex-end;
     padding: 30px;
     opacity: 0;
     transition: 0.4s ease;
 }

 .project-card:hover img {
     transform: scale(1.1);
 }

 .project-card:hover .project-overlay {
     opacity: 1;
 }

 .project-text {
     color: white;
     transform: translateY(20px);
     transition: 0.4s;
 }

 .project-card:hover .project-text {
     transform: translateY(0);
 }

 /* Footer */
 .footer {
     background: #080c14;
 }

 .service-card {
     transition: all 0.3s ease;
 }

 .service-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }

 .text-orange {
     color: #ff6600;
 }

 .bg-counter {
     position: relative;
     width: 100%;
     padding: 70px 0;

     background: url('img/8.jpg') center center no-repeat;
     background-size: cover;
 }

 /* Optional dark overlay */
 .bg-counter::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
 }

 /* Keep content above overlay */
 .bg-counter .container {
     position: relative;
     z-index: 1;
 }

 .bg-in {
     width: 100%;
     padding: 80px 0;

     /* Background image */
     background: url('img/7.jpg') center center no-repeat;

     /* Make image cover section area */
     background-size: cover;

     /* Optional */
     position: relative;
 }