/* style.css - NATIONAL ENTERPRISES */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #1e2a3e;
      line-height: 1.5;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    
    /* ========== PROFESSIONAL COLOR SCHEME ========== */
    /* Navy Blue: #0a1c3a, Steel Gray: #475569 / #e2e8f0, Orange: #e86f2c / #f97316 */
    
    /* Navbar - Navy Blue */
    .navbar {
      background: #0a1c3a;
      color: white;
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      border-bottom: 2px solid #e86f2c;
    }
    .nav-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    .logo h1 {
      font-size: 1.7rem;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: #ffffff;
    }
    .logo p {
      font-size: 0.8rem;
      opacity: 0.85;
      color: #94a3b8;
    }
    .nav-links {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
    }
    .nav-links a {
      color: #e2e8f0;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
      border-bottom: 2px solid transparent;
      padding-bottom: 4px;
    }
    .nav-links a:hover, .nav-links a.active {
      border-bottom-color: #e86f2c;
      color: #e86f2c;
    }
    .contact-btn {
      background: #e86f2c;
      color: #ffffff !important;
      padding: 8px 20px;
      border-radius: 40px;
      font-weight: bold;
      transition: all 0.3s;
      border-bottom: none !important;
      text-decoration: none;
    }
    .contact-btn:hover {
      transform: scale(1.05);
      background: #f97316;
      color: white !important;
      border-bottom: none !important;
    }
    
    /* Hero Section */
    .hero {
      background: linear-gradient(135deg, #0a1c3a, #13294b), url('https://images.unsplash.com/photo-1533090161767-e6ffed986c6d?w=1600&h=600&fit=crop') center/cover no-repeat;
      background-blend-mode: overlay;
      color: white;
      padding: 100px 0 90px;
      text-align: center;
      clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }
    .hero h1 {
      font-size: 3.2rem;
      font-weight: 800;
      margin-bottom: 20px;
      animation: fadeInUp 0.8s ease;
    }
    .hero h1 span {
      color: #e86f2c;
    }
    .hero p {
      font-size: 1.3rem;
      max-width: 700px;
      margin: 0 auto 30px;
      animation: fadeInUp 0.8s 0.1s both;
    }
    .hero-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeInUp 0.8s 0.2s both;
    }
    .btn-wa, .btn-call {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 32px;
      border-radius: 60px;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s;
      text-decoration: none;
    }
    .btn-wa { background-color: #25D366; color: white; box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
    .btn-call { background-color: #e86f2c; color: white; box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
    .btn-wa:hover, .btn-call:hover { transform: translateY(-6px) scale(1.02); filter: brightness(1.05); }
    
    /* Section Titles */
    section { padding: 70px 0; }
    .section-title {
      font-size: 2.4rem;
      font-weight: 800;
      color: #0a1c3a;
      margin-bottom: 16px;
      position: relative;
      display: inline-block;
    }
    .section-title:after {
      content: '';
      width: 70px;
      height: 4px;
      background: #e86f2c;
      position: absolute;
      bottom: -12px;
      left: 0;
      border-radius: 4px;
    }
    .section-subhead {
      color: #475569;
      margin-bottom: 48px;
      font-size: 1.1rem;
    }
    
    /* Service Cards */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 40px;
      margin-top: 20px;
    }
    .service-card {
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 12px 30px rgba(0,0,0,0.08);
      transition: all 0.4s ease;
      text-align: center;
      border: 1px solid #e2e8f0;
      cursor: pointer;
    }
    .service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 40px rgba(0,0,0,0.12); border-color: #e86f2c; }
    .img-wrapper { overflow: hidden; position: relative; background: #f1f5f9; cursor: pointer; }
    .service-card img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      transition: transform 0.6s ease-out;
      cursor: pointer;
    }
    .service-card:hover img { transform: scale(1.08); }
    .service-card h3 { margin: 24px 0 8px; font-weight: 700; color: #0a1c3a; }
    .service-card p { padding: 0 16px 24px; color: #475569; }
    
    /* About Section */
    .about-stats {
      background: #f1f5f9;
      border-radius: 24px;
      padding: 48px 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #e2e8f0;
    }
    .about-text { flex: 2; }
    .stats { flex: 1; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
    .stat-item {
      text-align: center;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px 24px;
      transition: all 0.3s;
      border: 1px solid #e2e8f0;
    }
    .stat-item:hover { transform: translateY(-5px); border-color: #e86f2c; }
    .stat-number { font-size: 2rem; font-weight: 800; color: #e86f2c; }
    
    /* Keywords & Locations Cloud */
    .keywords-cloud, .locations-cloud {
      background: #ffffff;
      border-radius: 24px;
      padding: 32px 28px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      margin-top: 20px;
      border: 1px solid #e2e8f0;
    }
    .keyword-badge, .location-badge {
      display: inline-block;
      background: #f1f5f9;
      padding: 8px 18px;
      margin: 8px 8px 0 0;
      border-radius: 40px;
      font-size: 0.85rem;
      font-weight: 500;
      color: #1e293b;
      transition: all 0.2s;
    }
    .keyword-badge:hover, .location-badge:hover {
      background: #e86f2c;
      color: white;
      transform: translateY(-2px);
    }
    .location-badge i { margin-right: 6px; font-size: 0.75rem; }
    
    /* Contact Grid */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      background: #ffffff;
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
    }
    .contact-info i { font-size: 1.6rem; color: #0a1c3a; margin-right: 16px; transition: 0.2s; }
    .contact-info p:hover i { color: #e86f2c; transform: translateX(3px); }
    .form-group { margin-bottom: 20px; }
    input, select, textarea {
      width: 100%;
      padding: 14px 18px;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
      font-family: inherit;
      transition: 0.2s;
      background: #ffffff;
    }
    textarea { border-radius: 16px; resize: vertical; }
    input:focus, textarea:focus { outline: none; border-color: #e86f2c; box-shadow: 0 0 0 3px rgba(232,111,44,0.15); }
    .submit-btn {
      background: #0a1c3a;
      color: white;
      border: none;
      padding: 14px 32px;
      border-radius: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }
    .submit-btn:hover { background: #e86f2c; color: white; transform: translateY(-2px); }
    
    /* Gallery */
    .gallery-showcase {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }
    .gallery-item {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      transition: all 0.4s;
      border: 1px solid #e2e8f0;
      cursor: pointer;
    }
    .gallery-item img { width: 100%; height: 150px; object-fit: cover; transition: transform 0.5s ease; cursor: pointer; }
    .gallery-item:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); border-color: #e86f2c; }
    .gallery-item:hover img { transform: scale(1.05); }
    
    /* Footer */
    footer {
      background: #0a1c3a;
      color: #94a3b8;
      text-align: center;
      padding: 32px 0;
      margin-top: 20px;
      border-top: 3px solid #e86f2c;
    }
    
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px);}
      to { opacity: 1; transform: translateY(0);}
    }
    
    /* Floating WhatsApp */
    .floating-wa {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: #25D366;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      z-index: 999;
      transition: 0.2s;
    }
    .floating-wa a { color: white; font-size: 30px; }
    .floating-wa:hover { transform: scale(1.08); }
    
    /* CTA Bar */
    .cta-bar {
      background: #e86f2c;
      padding: 24px 0;
      text-align: center;
    }
    .cta-bar p {
      color: white;
      font-size: 1.1rem;
      font-weight: 500;
    }
    .cta-bar strong {
      color: #0a1c3a;
      background: white;
      padding: 4px 12px;
      border-radius: 30px;
      margin: 0 4px;
    }
    
    /* ========== FULLSCREEN LIGHTBOX ========== */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .lightbox.active {
      display: flex;
    }
    .lightbox img {
      max-width: 90%;
      max-height: 85%;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      animation: zoomIn 0.3s ease;
    }
    @keyframes zoomIn {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 30px;
      color: white;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
      z-index: 10000;
    }
    .lightbox-close:hover {
      color: #e86f2c;
      transform: scale(1.1);
    }
    .lightbox-caption {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      font-size: 1rem;
      background: rgba(0,0,0,0.6);
      padding: 12px;
      font-family: 'Inter', sans-serif;
    }
    
    @media (max-width: 800px) {
      .contact-grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: 2rem; }
      .nav-flex { flex-direction: column; text-align: center; }
      .section-title { font-size: 1.8rem; }
      .lightbox img { max-width: 95%; max-height: 80%; }
      .lightbox-close { top: 15px; right: 20px; font-size: 32px; }
    }
    
    /* Enhanced About Stats Section - FIXED MOBILE VIEW */
    .about-stats {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 28px;
      padding: 48px 40px;
      display: flex;
      flex-wrap: wrap;
      gap: 48px;
      align-items: center;
      justify-content: space-between;
      border: 1px solid rgba(232,111,44,0.15);
      box-shadow: 0 20px 35px -10px rgba(0,0,0,0.08);
    }
    
    .about-text {
      flex: 2;
      min-width: 280px;
    }
    
    .stats {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      min-width: 260px;
    }
    
    .stat-item {
      background: linear-gradient(135deg, #ffffff 0%, #fef9f5 100%);
      border-radius: 20px;
      padding: 24px 16px;
      text-align: center;
      transition: all 0.3s ease;
      border: 1px solid rgba(232,111,44,0.12);
      box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }
    
    .stat-item:hover {
      transform: translateY(-6px);
      border-color: #e86f2c;
    }
    
    .stat-number {
      font-size: 2.2rem;
      font-weight: 800;
      color: #e86f2c;
      margin-bottom: 8px;
      line-height: 1.2;
    }
    
    /* Company Banner */
    .company-banner {
      background: linear-gradient(135deg, #0a1c3a 0%, #1e3a5f 100%);
      border-radius: 28px;
      padding: 50px 40px;
      color: white;
      text-align: center;
    }
    
    /* Value Cards */
    .value-card {
      background: white;
      border-radius: 20px;
      padding: 30px 20px;
      text-align: center;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }
    
    .value-card:hover {
      transform: translateY(-8px);
      border-color: #e86f2c;
    }
    
    .value-card i {
      font-size: 2.5rem;
      color: #e86f2c;
      margin-bottom: 15px;
    }
    
    /* Locations Cloud */
    .locations-cloud, .keywords-cloud {
      background: #ffffff;
      border-radius: 24px;
      padding: 32px 28px;
      margin-top: 20px;
      border: 1px solid #e2e8f0;
    }
    
    .keyword-badge, .location-badge {
      display: inline-block;
      background: #f1f5f9;
      padding: 8px 18px;
      margin: 8px 8px 0 0;
      border-radius: 40px;
      font-size: 0.85rem;
      font-weight: 500;
      color: #1e293b;
      transition: all 0.2s;
    }
    
    .keyword-badge:hover, .location-badge:hover {
      background: #e86f2c;
      color: white;
    }
    
    /* Contact Grid */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      background: #ffffff;
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    input, select, textarea {
      width: 100%;
      padding: 14px 18px;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
      font-family: inherit;
    }
    
    input:focus, textarea:focus {
      outline: none;
      border-color: #e86f2c;
    }
    
    .submit-btn {
      background: #0a1c3a;
      color: white;
      border: none;
      padding: 14px 32px;
      border-radius: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }
    
    .submit-btn:hover {
      background: #e86f2c;
    }
    
    /* Testimonial Card */
    .testimonial-card {
      background: white;
      border-radius: 20px;
      padding: 28px;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }
    
    .testimonial-card:hover {
      transform: translateY(-5px);
      border-color: #e86f2c;
    }
    
    .rating-stars {
      color: #e86f2c;
      margin-top: 12px;
    }
    
    /* Floating Buttons */
    .floating-buttons {
      position: fixed;
      bottom: 24px;
      right: 24px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 999;
    }
    
    .floating-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      transition: all 0.3s ease;
      text-decoration: none;
    }
    
    .floating-btn-wa {
      background: #25D366;
    }
    
    .floating-btn-call {
      background: #e86f2c;
    }
    
    .floating-btn i {
      font-size: 30px;
      color: white;
    }
    
    .floating-btn:hover {
      transform: scale(1.1);
    }
    
    /* Scroll Top */
    .scroll-top {
      position: fixed;
      bottom: 170px;
      right: 24px;
      background: #0a1c3a;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }
    
    .scroll-top.show {
      opacity: 1;
      visibility: visible;
    }
    
    .scroll-top a {
      color: white;
      font-size: 1.2rem;
      text-decoration: none;
    }
    
    .scroll-top:hover {
      background: #e86f2c;
    }
    
    /* CTA Bar */
    .cta-bar {
      background: #e86f2c;
      padding: 24px 0;
      text-align: center;
      color: white;
    }
    
    footer {
      background: #0a1c3a;
      color: #94a3b8;
      text-align: center;
      padding: 32px 0;
      border-top: 3px solid #e86f2c;
    }
    
    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.95);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .lightbox.active {
      display: flex;
    }
    
    .lightbox img {
      max-width: 90%;
      max-height: 85%;
    }
    
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 30px;
      color: white;
      font-size: 40px;
      cursor: pointer;
    }
    
    /* ========== RESPONSIVE FIXES FOR MOBILE ========== */
    @media (max-width: 992px) {
      .about-stats {
        padding: 36px 28px;
        gap: 32px;
      }
      
      .stat-number {
        font-size: 1.8rem;
      }
      
      .stat-item {
        padding: 18px 12px;
      }
    }
    
    @media (max-width: 768px) {
      .container {
        padding: 0 20px;
      }
      
      .hero {
        padding: 60px 0 50px;
      }
      
      .hero h1 {
        font-size: 1.8rem;
      }
      
      .hero h2 {
        font-size: 1.3rem;
      }
      
      .hero p {
        font-size: 1rem;
      }
      
      .hero-buttons .btn-wa, 
      .hero-buttons .btn-call {
        padding: 10px 20px;
        font-size: 0.9rem;
      }
      
      .nav-flex {
        flex-direction: column;
        text-align: center;
      }
      
      .nav-links {
        justify-content: center;
      }
      
      .section-title {
        font-size: 1.8rem;
      }
      
      /* FIX: About Stats Mobile Layout */
      .about-stats {
        flex-direction: column;
        padding: 28px 20px;
        gap: 28px;
      }
      
      .about-text {
        min-width: auto;
        width: 100%;
      }
      
      .stats {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        min-width: auto;
      }
      
      .stat-item {
        padding: 16px 12px;
      }
      
      .stat-number {
        font-size: 1.5rem;
      }
      
      .stat-item div:last-child {
        font-size: 0.75rem;
      }
      
      .company-banner {
        padding: 30px 20px;
      }
      
      .company-banner h2 {
        font-size: 1.5rem;
      }
      
      .company-banner p {
        font-size: 0.95rem;
      }
      
      .contact-grid {
        grid-template-columns: 1fr;
        padding: 28px 20px;
        gap: 30px;
      }
      
      .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
      }
      
      .floating-buttons {
        bottom: 16px;
        right: 16px;
        gap: 12px;
      }
      
      .floating-btn {
        width: 50px;
        height: 50px;
      }
      
      .floating-btn i {
        font-size: 26px;
      }
      
      .scroll-top {
        bottom: 140px;
        right: 16px;
        width: 40px;
        height: 40px;
      }
    }
    
    @media (max-width: 480px) {
      .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      
      .stat-item {
        padding: 12px 8px;
      }
      
      .stat-number {
        font-size: 1.3rem;
      }
      
      .stat-item div:last-child {
        font-size: 0.7rem;
      }
      
      .about-stats {
        padding: 20px 16px;
      }
      
      .about-text p {
        font-size: 0.9rem;
      }
      
      .locations-cloud, .keywords-cloud {
        padding: 20px 16px;
      }
      
      .keyword-badge, .location-badge {
        padding: 6px 14px;
        font-size: 0.75rem;
      }
    }
    
    /* ========== FULLSCREEN CENTERED LIGHTBOX ========== */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .lightbox.active {
      display: flex;
    }
    
    .lightbox-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: zoomIn 0.3s ease;
    }
    
    .lightbox img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
    
    @keyframes zoomIn {
      from {
        transform: scale(0.9);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 30px;
      color: white;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
      z-index: 10000;
      background: rgba(0,0,0,0.5);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .lightbox-close:hover {
      color: #e86f2c;
      transform: scale(1.1);
      background: rgba(0,0,0,0.8);
    }
    
    .lightbox-caption {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
      font-size: 1rem;
      background: rgba(0,0,0,0.6);
      padding: 12px 20px;
      margin: 0 auto;
      width: fit-content;
      max-width: 80%;
      border-radius: 40px;
      margin: 0 auto;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', sans-serif;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .container {
        padding: 0 20px;
      }
      
      .hero {
        padding: 60px 0 50px;
      }
      
      .hero h1 {
        font-size: 1.8rem;
      }
      
      .hero h2 {
        font-size: 1.3rem;
      }
      
      .hero p {
        font-size: 1rem;
      }
      
      .nav-flex {
        flex-direction: column;
        text-align: center;
      }
      
      .nav-links {
        justify-content: center;
      }
      
      .section-title {
        font-size: 1.8rem;
      }
      
      .about-stats {
        flex-direction: column;
        padding: 28px 20px;
        gap: 28px;
      }
      
      .stats {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
      
      .stat-item {
        padding: 16px 12px;
      }
      
      .stat-number {
        font-size: 1.5rem;
      }
      
      .contact-grid {
        grid-template-columns: 1fr;
        padding: 28px 20px;
      }
      
      .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
      }
      
      .floating-buttons {
        bottom: 16px;
        right: 16px;
        gap: 12px;
      }
      
      .floating-btn {
        width: 50px;
        height: 50px;
      }
      
      .floating-btn i {
        font-size: 26px;
      }
      
      .scroll-top {
        bottom: 140px;
        right: 16px;
        width: 40px;
        height: 40px;
      }
      
      .lightbox-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 30px;
      }
      
      .lightbox-caption {
        font-size: 0.85rem;
        padding: 8px 16px;
        bottom: 15px;
      }
    }
    
    @media (max-width: 480px) {
      .stats {
        gap: 12px;
      }
      
      .stat-item {
        padding: 12px 8px;
      }
      
      .stat-number {
        font-size: 1.3rem;
      }
      
      .about-stats {
        padding: 20px 16px;
      }
    }
/* ================= HERO SECTION ================= */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  background:#000;
}

/* ================= VIDEO / IMAGE BACKGROUND ================= */

.hero-bg-animation{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
}

/* VIDEO */

.hero-bg-animation video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  /* ANIMATION */
  animation:
  zoomEffect 18s ease-in-out infinite alternate,
  floatMove 20s linear infinite;
}

/* FALLBACK IMAGE */

.hero-bg-animation .fallback-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  animation:
  zoomEffect 18s ease-in-out infinite alternate,
  floatMove 20s linear infinite;
}

/* DARK OVERLAY */

.hero-bg-animation::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.78)
  );

  z-index:2;
}

/* ================= HERO CONTENT ================= */

.hero .container{
  position:relative;
  z-index:3;
  text-align:center;
  width:90%;
  max-width:1000px;
}

.hero h1{
  font-size:4rem;
  font-weight:800;
  margin-bottom:10px;

  animation:fadeUp 1s ease;
}

.hero h2{
  font-size:2.3rem;
  margin-bottom:20px;

  animation:fadeUp 1.4s ease;
}

.hero p{
  font-size:1.1rem;
  line-height:1.8;
  max-width:850px;
  margin:auto;
  margin-bottom:35px;

  animation:fadeUp 1.8s ease;
}

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

.hero-buttons{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;

  animation:fadeUp 2s ease;
}

.btn-wa,
.btn-call{
  padding:14px 30px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  transition:0.4s ease;
}

.btn-wa{
  background:#25D366;
  color:#fff;
}

.btn-call{
  background:#e86f2c;
  color:#000;
}

.btn-wa:hover,
.btn-call:hover{
  transform:translateY(-5px) scale(1.05);
}

/* ================= BACKGROUND ANIMATIONS ================= */

@keyframes zoomEffect{

  0%{
    transform:scale(1);
  }

  100%{
    transform:scale(1.12);
  }

}

@keyframes floatMove{

  0%{
    background-position:center top;
  }

  50%{
    transform:scale(1.08) translateY(-10px);
  }

  100%{
    transform:scale(1.12) translateY(10px);
  }

}

/* ================= TEXT ANIMATION ================= */

@keyframes fadeUp{

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

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

}

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

@media(max-width:768px){

  .hero h1{
    font-size:2.5rem;
  }

  .hero h2{
    font-size:1.4rem;
  }

  .hero p{
    font-size:0.95rem;
    padding:0 10px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .btn-wa,
  .btn-call{
    width:90%;
    text-align:center;
  }

}

/* FIX MOBILE PADDING & OVERFLOW ISSUE */

html,
body{
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* HERO SECTION */

.hero-section{
    width:100%;
    padding:120px 20px 60px;
    overflow:hidden;
}

.hero-content{
    width:100%;
    max-width:100%;
    text-align:center;
}

/* TEXT FIX */

.hero-content h1,
.hero-content p{
    word-wrap:break-word;
    overflow-wrap:break-word;
}

/* FEATURE BUTTONS */

.feature-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    max-width:320px;
    margin:15px auto;
    padding:16px 20px;
    border-radius:50px;
    background:rgba(255,255,255,0.12);
}

/* MOBILE FIX */

@media(max-width:768px){

header{
    padding:15px 20px;
}

.nav-menu{
    width:100%;
    left:0;
    right:0;
    padding:20px;
}

.hero-section{
    padding-top:140px;
}

.hero-content h1{
    font-size:34px;
    line-height:1.3;
}

.hero-content p{
    font-size:17px;
    line-height:1.8;
    padding:0 5px;
}

.feature-box{
    max-width:100%;
    font-size:16px;
}

}

/* EXTRA SMALL DEVICES */

@media(max-width:480px){

.hero-content h1{
    font-size:28px;
}

.hero-content p{
    font-size:15px;
}

.feature-box{
    padding:14px 16px;
}

}

/* CENTER ALIGN */

.gallery-note{
    display:flex;
    justify-content:center;
    align-items:center;
    width:fit-content;
    margin:25px auto;
    text-align:center;

    background:#e86f2c;
    color:#000;
    padding:12px 22px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    box-shadow:0 4px 15px rgba(193,154,107,0.3);
}

/* PAGE LOADER */

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:linear-gradient(135deg,#081b3a,#0d2c5c);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    transition:0.5s ease;
}

/* LOADER BOX */

.loader-box{
    text-align:center;
    animation:fadeUp 2s ease;
}

/* COMPANY NAME */

.loader-box h1{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin-top:30px;
    letter-spacing:1px;
}

.loader-box p{
    color:#cbd5e1;
    font-size:18px;
    margin-top:10px;
    letter-spacing:0.5px;
}

/* RING LOADER */

.loader-ring{
    width:90px;
    height:90px;
    border-radius:50%;
    border:6px solid rgba(255,255,255,0.15);
    border-top:6px solid #ff7a1a;
    margin:auto;
    animation:spin 1s linear infinite;
    box-shadow:0 0 25px rgba(255,122,26,0.35);
}

/* SPIN */

@keyframes spin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}

/* FADE ANIMATION */

@keyframes fadeUp{

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

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

}

/* MOBILE */

@media(max-width:768px){

.loader-box h1{
    font-size:30px;
}

.loader-box p{
    font-size:16px;
}

.loader-ring{
    width:75px;
    height:75px;
}

}
/* FULL SCREEN LOADER */

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#082552;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

/* CENTER BOX */

.loader-box{
    text-align:center;
}

/* SPINNER */

.loader-ring{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    border:5px solid rgba(255,255,255,0.2);
    border-top:5px solid #ff7a1a;
    animation:spin 1s linear infinite;
}

/* LOADING TEXT */

.loading-text{
    color:#ff7a1a;
    font-size:24px;
    margin-top:20px;
    font-weight:700;
}

/* TITLE */

.loader-box h1{
    color:#ffffff;
    font-size:42px;
    margin-top:10px;
    font-weight:800;
}

/* SUBTITLE */

.loader-box p{
    color:#dbeafe;
    font-size:18px;
    margin-top:10px;
}

/* ANIMATION */

@keyframes spin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}