* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background: #f8fafc; scroll-behavior: smooth; }
    .font-space { font-family: 'Space Grotesk', sans-serif; }
    :root { --navy: #0a1e4e; --drone-cyan: #00D4FF; --orange: #e87722; }
    .hover-lift { transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1); }
    .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -12px rgba(0,0,0,0.2); }
    .orange-btn { background: linear-gradient(95deg, #e87722, #f59c3a); box-shadow: 0 8px 18px rgba(232,119,34,0.25); }
    .orange-btn:hover { background: linear-gradient(95deg, #d46b1a, #e88a2a); transform: scale(1.02); }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .logoimg{width: 205px; height: auto;}
    /* Hero video + image transition */
    .hero-video-wrapper {
      position: relative;
      height: 85vh;
      min-height: 580px;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.2s;
    }
    .hero-bg-image {
      position: absolute;
      inset: 0;
      object-fit: cover;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: opacity 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    .hero-video-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      pointer-events: none;
      object-fit: cover;
      z-index: 2;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    .hero-video-frame.loaded {
      opacity: 1;
    }
    .hero-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(125deg, rgba(2,15,35,0.75) 0%, rgba(0,30,50,0.85) 100%);
      z-index: 3;
    }
    .hero-content {
      position: relative;
      z-index: 10;
    }
    @media (max-width: 768px) {
      .hero-video-wrapper { min-height: 520px; height: 75vh; }
    }
    
    /* testimonial slider */
    .testimonial-slider-container { overflow: hidden; position: relative; }
    .testimonial-track { display: flex; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1); gap: 1.5rem; }
    .testimonial-card { flex: 0 0 calc(33.333% - 1rem); background: white; border-radius: 1.5rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: all 0.2s; border: 1px solid rgba(0,212,255,0.2); }
    @media (max-width: 1024px) { .testimonial-card { flex: 0 0 calc(50% - 0.75rem); } }
    @media (max-width: 768px) { .testimonial-card { flex: 0 0 100%; } }
    .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 25px 30px -12px rgba(0,0,0,0.15); }
    .slider-btn { background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.1); color: #0a1e4e; }
    .slider-btn:hover { background: #e87722; color: white; transform: scale(1.05); }
    
    .glass-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 1.5rem;
      transition: all 0.3s ease;
    }
    .glass-card:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-5px);
      box-shadow: 0 25px 30px -12px rgba(0,0,0,0.3);
    }
    .service-icon {
      background: rgba(6, 182, 212, 0.2);
      backdrop-filter: blur(4px);
    }
    .floating-btns { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 50; }
    .fb-phone, .fb-wa { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; box-shadow: 0 6px 14px rgba(0,0,0,0.2); transition: 0.2s; }
    .fb-phone { background: #0a1e4e; }
    .fb-wa { background: #25D366; }
    #btt { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; border-radius: 50%; background: #e87722; border: none; color: white; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 50; transition: 0.2s; }
    #btt:hover { background: #c45f1a; transform: scale(1.05); }
    .footer-subscribe input:focus { outline: none; border-color: #00D4FF; }
	
	.portfolio-card {
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    .portfolio-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 30px -12px rgba(0,0,0,0.2);
    }
	
	.news-card {
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    .news-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 25px 30px -12px rgba(0,0,0,0.15);
    }
	 .tag-pill {
      background: #e0f2fe;
      color: #0c4a6e;
      padding: 0.25rem 0.75rem;
      border-radius: 2rem;
      font-size: 0.7rem;
      font-weight: 600;
    }
	
	 input, select, textarea {
      transition: all 0.2s ease;
    }
    input:focus, select:focus, textarea:focus {
      border-color: #e87722;
      ring: 2px solid #e87722;
      outline: none;
    }
	
	.testimonial-card {
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    .testimonial-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 25px 30px -12px rgba(0,0,0,0.15);
    }
    .video-card {
      transition: all 0.3s ease;
    }
    .video-card:hover {
      transform: scale(1.02);
    }