/* =========================================
   1. VARIABLES & RESET
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

   :root {
       --primary: #FFD700;        /* Electric Gold */
       --primary-hover: #E6C200;
       --dark: #121212;           /* Deep Black */
       --dark-surface: #1E1E1E;   /* Card Background */
       --light: #F4F4F4;          /* Text Light */
       --gray: #A0A0A0;           /* Muted Text */
       --white: #FFFFFF;
       
       --shadow: 0 10px 30px rgba(0,0,0,0.3);
       --radius: 8px;
       --transition: all 0.3s ease;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
       overflow-x: hidden;
       width: 100%;
   }
   
   body {
       font-family: 'Poppins', sans-serif;
       background-color: var(--dark);
       color: var(--light);
       line-height: 1.6;
       overflow-x: hidden;
       position: relative;
       width: 100%;
   }
   
   a { text-decoration: none; color: inherit; transition: var(--transition); }
   ul { list-style: none; }
   img { max-width: 100%; display: block; }
   
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
       width: 100%;
       box-sizing: border-box;
   }
   
   /* =========================================
      2. HEADER
      ========================================= */
   header {
       background: rgba(18, 18, 18, 0.95);
       backdrop-filter: blur(10px);
       padding: 1rem 0;
       position: sticky;
       top: 0;
       z-index: 1000;
       border-bottom: 1px solid rgba(255, 215, 0, 0.1);
       width: 100%;
       left: 0;
       right: 0;
   }
   
   .header-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       box-sizing: border-box;
   }
   
   .logo-section {
       display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .logo-img { height: 45px; }
   
   .logo-text {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--white);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   .logo-text span { color: var(--primary); }
   
   .main-nav ul { display: flex; gap: 30px; }
   
   .main-nav a {
       color: var(--light);
       font-weight: 500;
       font-size: 0.95rem;
       position: relative;
   }
   
   .main-nav a:hover, .main-nav a.active { color: var(--primary); }
   
   .main-nav a::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: -5px;
       left: 0;
       background: var(--primary);
       transition: var(--transition);
   }
   
   .main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
   
   /* Mobile Menu Button */
   .hamburger {
       display: none;
       cursor: pointer;
   }
   .hamburger span {
       display: block;
       width: 25px;
       height: 3px;
       background: var(--white);
       margin: 5px;
       transition: var(--transition);
   }
   
   /* =========================================
      3. HERO SECTION
      ========================================= */
   .hero {
       height: 450px;
       position: relative;
       display: flex;
       align-items: center;
       text-align: center;
       overflow: hidden;
   }
   
   .hero-text {
       padding: 60px 40px;
       border-radius: var(--radius);
       position: relative;
       max-width: 900px;
       margin: 0 auto;
       z-index: 2;
   }
   
   @media (min-width: 1024px) {
       .hero .container {
           max-width: 100%;
           width: 100%;
           padding: 0;
       }
       
       .hero-text {
           max-width: 100%;
           width: 100%;
           border-radius: 0;
           padding: 80px 40px;
       }
   }
   
   .hero-background-image {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: 0;
       opacity: 0.4;
   }
   
   /* Dark overlay on hero background */
   .hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
       z-index: 1;
   }
   
   .hero-text {
       position: relative;
       z-index: 2;
   }
   
   .hero-text h1,
   .hero-text p,
   .hero-text .btn {
       position: relative;
       z-index: 1;
   }
   
   .hero-text h1 {
       font-size: 3.5rem;
       font-weight: 700;
       margin-bottom: 20px;
       line-height: 1.2;
   }
   
   .hero-text h1 span { color: var(--primary); }
   
   .hero-text p {
       font-size: 1.2rem;
       color: var(--gray);
       margin-bottom: 30px;
       max-width: 700px;
       margin-left: auto;
       margin-right: auto;
   }
   
   .btn {
       display: inline-block;
       background: var(--primary);
       color: var(--dark);
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       border: none;
       cursor: pointer;
   }
   
   .btn:hover {
       background: var(--primary-hover);
       transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
   }
   
   /* =========================================
      STICKY WHATSAPP BUTTON
      ========================================= */
   .sticky-button {
       position: fixed;
       bottom: 60px;
       right: 20px;
       z-index: 999;
       transition: var(--transition);
   }
   
   .sticky-button a {
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       position: relative;
       width: 60px;
       height: 60px;
       background: var(--dark);
       transition: var(--transition);
       padding: 0;
       overflow: hidden;
   }
   
   /* Rainbow border using pseudo-element */
   .sticky-button a::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: conic-gradient(
           from 0deg,
           #ff0000,
           #ff7f00,
           #ffff00,
           #00ff00,
           #0000ff,
           #4b0082,
           #9400d3,
           #ff0000
       );
       animation: rotate 3s linear infinite;
       z-index: 0;
   }
   
   /* Inner circle to create border effect */
   .sticky-button a::after {
       content: '';
       position: absolute;
       top: 3px;
       left: 3px;
       right: 3px;
       bottom: 3px;
       border-radius: 50%;
       background: var(--dark);
       z-index: 1;
   }
   
   @keyframes rotate {
       from {
           transform: rotate(0deg);
       }
       to {
           transform: rotate(360deg);
       }
   }
   
   .sticky-button a:hover {
       transform: scale(1.1);
       box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
   }
   
   .sticky-button img {
       width: 50px;
       height: 50px;
       position: relative;
       z-index: 2;
   }
   /* =========================================
      4. SECTIONS & CARDS
      ========================================= */
   .section { padding: 80px 0; }
   .section-title {
       font-size: 2.5rem;
       text-align: center;
       margin-bottom: 60px;
       position: relative;
       padding-bottom: 15px;
   }
   .section-title::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 4px;
       background: var(--primary);
   }
   
   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }
   
   .card {
       background: var(--dark-surface);
       border-radius: var(--radius);
       overflow: hidden;
       transition: var(--transition);
       border: 1px solid rgba(255, 255, 255, 0.05);
   }
   
   .card:hover {
       transform: translateY(-10px);
       border-color: var(--primary);
       box-shadow: var(--shadow);
   }
   
   .card-image { height: 200px; overflow: hidden; }
   .card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
   .card:hover .card-image img { transform: scale(1.1); }
   
   .card h3 { padding: 20px 20px 10px; color: var(--primary); }
   .card p { padding: 0 20px 25px; color: var(--gray); font-size: 0.95rem; }
   
   /* =========================================
      5. CONTACT & FORM
      ========================================= */
   .contact-wrapper {
       display: flex;
       flex-wrap: wrap;
       background: var(--dark-surface);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow);
   }
   
   .contact-form { flex: 3; padding: 50px; }
   .contact-info { 
       flex: 2; 
       background: #252525; 
       padding: 50px; 
       display: flex; 
       flex-direction: column; 
       justify-content: center;
       border-left: 2px solid var(--primary);
   }
   
   .form-group { margin-bottom: 20px; }
   .form-group label { display: block; margin-bottom: 8px; color: var(--primary); font-size: 0.9rem; }
   .form-group input, .form-group select, .form-group textarea {
       width: 100%;
       padding: 12px;
       background: var(--dark);
       border: 1px solid #333;
       color: var(--white);
       border-radius: 4px;
   }
       .form-group input:focus, textarea:focus { outline: none; border-color: var(--primary); }
      
      /* Form Feedback Animation */
      .form-feedback {
          text-align: center;
          padding: 20px;
          animation: fadeInUp 0.5s ease forwards;
      }
      
      .success-icon {
          width: 60px;
          height: 60px;
          background: var(--primary);
          color: var(--dark);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          margin: 0 auto 15px;
          font-weight: bold;
      }
      
      .btn-loader {
          display: inline-flex;
          align-items: center;
          gap: 8px;
      }
      
      .btn-loader::after {
          content: "";
          width: 16px;
          height: 16px;
          border: 2px solid var(--dark);
          border-top-color: transparent;
          border-radius: 50%;
          animation: btn-spin 0.8s linear infinite;
      }
      
      @keyframes btn-spin {
          to { transform: rotate(360deg); }
      }
      
      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(20px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
      
      .info-item { margin-bottom: 25px; }   .info-item strong { color: var(--primary); display: block; margin-bottom: 5px; font-size: 1.1rem; }
   
   /* =========================================
      6. ABOUT PAGE
      ========================================= */
   .about-split { display: flex; align-items: center; gap: 50px; margin-top: 40px; }
   .about-text { flex: 1; }
   .about-image { flex: 1; }
   .about-image img { 
       border-radius: var(--radius); 
       box-shadow: 15px 15px 0 var(--primary); 
       border: 2px solid var(--primary);
   }
   
   .why-us-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 30px;
       text-align: center;
   }
   .why-item {
       background: var(--dark-surface);
       padding: 30px;
       border-radius: var(--radius);
       border: 1px solid rgba(255,255,255,0.05);
   }
   .why-icon { font-size: 2.5rem; margin-bottom: 15px; }
   
   /* =========================================
      7. FOOTER
      ========================================= */
   .site-footer {
       background: #000;
       padding: 60px 0 20px;
       border-top: 1px solid #333;
       margin-top: auto;
   }
   
   .footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 40px;
   }
   
   .footer-logo { width: 150px; margin-bottom: 20px; }
   .footer-col h3 { color: var(--white); margin-bottom: 20px; border-left: 3px solid var(--primary); padding-left: 10px; }
   .footer-col ul li { margin-bottom: 10px; }
   .footer-col ul li a:hover { color: var(--primary); padding-left: 5px; }
   
   .social-icons { display: flex; gap: 10px;   }
   .social-btn {
       width: 40px; height: 40px;
       background: #222;
       border-radius: 50%;
       display: flex; align-items: center; justify-content: center;
       
      
   }
   
   .social-btn img { width: 20px; filter: grayscale(1); transition: var(--transition);  }
   .social-btn:hover { background: var(--primary); }
   .social-btn:hover img { filter: grayscale(0);  }
   
   .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid #222; margin-top: 40px; font-size: 0.9rem; color: #666; }
   
   /* =========================================
      8. ANIMATIONS & MOBILE
      ========================================= */
   .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
   .fade-in.visible { opacity: 1; transform: translateY(0); }
   
   @media (max-width: 768px) {
       /* Smaller header on mobile */
       header {
           padding: 1rem 0;
       }
       
       .logo-img { 
           height: 35px; 
       }
       
       .logo-text {
           font-size: 1.5rem;
           letter-spacing: 0.5px;
       }
       
       .logo-section {
           gap: 8px;
       }
       
       .hamburger { 
           display: block; 
           z-index: 1001; 
       }
       
       .hamburger span {
           width: 22px;
           height: 2.5px;
           margin: 4px 0;
       }
       
       .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
       .hamburger.active span:nth-child(2) { opacity: 0; }
       .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
   
       .nav-menu {
           position: fixed; 
           top: 0; 
           right: -100%;
           left: auto;
           width: 70%; 
           max-width: 300px;
           height: 100vh;
           background: var(--dark-surface);
           flex-direction: column; 
           justify-content: center; 
           align-items: center;
           transition: right 0.4s ease; 
           box-shadow: -10px 0 20px rgba(0,0,0,0.5);
           z-index: 1000;
           overflow-y: auto;
       }
       .nav-menu.active { 
           right: 0; 
       }
       
       /* Prevent body scroll when menu is open */
       body.nav-open {
           overflow: hidden;
       }
       
       .hero-text h1 { font-size: 2.5rem; }
       .about-split, .contact-wrapper { flex-direction: column; }
       .contact-info { border-left: none; border-top: 2px solid var(--primary); }
   }
   
   @media (max-width: 480px) {
       /* Even smaller header on very small screens */
       header {
           padding: 1rem 0;
       }
       
       .logo-img { 
           height: 30px; 
       }
       
       .logo-text {
           font-size: 1rem;
           letter-spacing: 0.3px;
       }
       
       .logo-section {
           gap: 6px;
       }
       
       .hamburger span {
           width: 20px;
           height: 2px;
           margin: 3.5px 0;
       }
       
       .container {
           padding: 0 15px;
       }
       
       /* Smaller sticky button on mobile */
       .sticky-button {
           bottom: 50px;
           right: 15px;
       }
       
       .sticky-button a {
           width: 50px;
           height: 50px;
       }
       
       .sticky-button a::after {
           top: 2.5px;
           left: 2.5px;
           right: 2.5px;
           bottom: 2.5px;
       }
       
       .sticky-button img {
           width: 42px;
           height: 42px;
       }
   }