html {
        scroll-behavior: smooth;
      }
    /* Prevent horizontal scroll */
html, body {
  overflow-x: hidden;
}
      /* Preloader full screen */
/* ================= PRELOADER ================= */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
}

/* Logo in the center */
#preloader img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 0 20px #fef200, 0 0 50px #fef20050;
  animation: pulse 1.5s infinite;
}

/* Firework particle */
.firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}

/* Fade out preloader */
.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

      body {
        background-color: #050505;
        color: #fef200;
        font-family: "Segoe UI", sans-serif;
        overflow-x: hidden;
      }

      /* Navbar */
      .navbar {
        background-color: #000;
      }

      .logo {
        max-height: 75px;
        width: 85px;
      }
      .navbar-brand h5 {
       font-family: ui monospace;
       font-size: 2.5rem;
       color: #fef200 !important; /* Gold color */
       font-weight: bold;
       letter-spacing: 2px; /* Adds some spacing for a sleek look */
      }
      .text-light {
        color:#fef200 !important;
        font-family: cursive;
      }
      .nav-link {
        color: #fef200 !important;
        transition: 0.3s;
      }

      .nav-link:hover {
        color: white !important;
        transform: translateY(-2px);
      }
       .navbar-toggler {
  border: 2px solid #fef200;
  border-radius: 8px;
  padding: 6px 10px;
  transition: 0.3s;
}

.navbar-toggler:hover {
  box-shadow: 0 0 15px #fef200,
              0 0 30px #fef200;
  transform: scale(1.05);
}

.navbar-toggler-icon {
  filter: invert(1);
}
      /* Marquee */
      .marquee {
        overflow: hidden;
        background: #fef200;
        color: #050505;
        font-weight: bold;
      }

      .track {
        display: flex;
        width: max-content;
        animation: marquee 15s linear infinite;
        gap: 3rem;
        padding: 0.5rem 0;
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      /* Hero */
      .hero {
        min-height: 90vh;
        background:
          linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)),
          url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce")
            center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        /* margin-left: 0px;
        margin-right: 0px; */
      }

      .hero h2 {
        font-size: clamp(2rem, 6vw, 3.5rem);
        letter-spacing: 4px;
        font-weight: bold;
        animation: fadeUp 1.5s ease;
      }

      .hero p {
        color: #ccc;
        margin: 1rem 0 2rem;
        animation: fadeUp 2s ease;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Buttons */
      .btn-gold {
        border: 1px solid #fef200;
        color: #fef200;
        padding: 0.6rem 2rem;
        transition: 0.3s;
        box-shadow: 0 0 10px #fef200;
      }

      .btn-gold:hover {
        background: #fef200;
        color: #000;
        box-shadow:
          0 0 20px #fef200,
          0 0 40px #fef200;
      }

      /* Sections */
      section {
        padding: 5rem 1rem;
      }

      .section-title {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 3rem;
        font-weight: bold;
      }

      /* Floating animation */
      @keyframes float {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
        100% {
          transform: translateY(0);
        }
      }

      /* About Section Background */
      #about {
        background-color: #2c2c2c; /* dark grey */
        color: #fef200; /* keep text color as before */
      }

      /* Services Section Background */
      #services {
        background-color: #000; /* black */
        color: #fef200; /* keep text color as before */
      }

      /* Contact Section Background */
      #contact {
        background-color: #2c2c2c; /* dark grey */
        color: #fef200; /* keep text color as before */
      }

      /* Cards */
      .about-card,
      .service-card {
        background: #111;
        border-radius: 12px;
        /* box-shadow: 0 4px 15px rgba(254,242,0,0.4); */
        transition: 0.4s;
        animation: float 4s ease-in-out infinite;
      }

      .about-card:hover,
      .service-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 10px 30px rgba(254, 242, 0, 0.8);
      }

      .about-card i,
      .service-card i {
        color: #fef200;
        transition: 0.3s;
      }

      .about-card:hover i,
      .service-card:hover i {
        transform: scale(1.3) rotate(8deg);
      }

      .about-card p,
      .service-card p {
        color: #ccc;
      }

      /* Footer Styling */
      .footer-section {
        background-color: #000;
        color: #ccc;
        padding: 60px 0 20px;
        border-top: 1px solid #fef200;
      }

      .footer-title {
        color: #fef200;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .footer-heading {
        color: #fef200;
        margin-bottom: 15px;
        font-weight: 600;
      }

      .footer-text {
        font-size: 0.9rem;
        line-height: 1.6;
      }

      .footer-links {
        list-style: none;
        padding: 0;
      }

      .footer-links li {
        margin-bottom: 8px;
      }

      .footer-links a {
        color: #ccc;
        text-decoration: none;
        transition: 0.3s;
      }

      .footer-links a:hover {
        color: #fef200;
        padding-left: 5px;
      }

      .social-icons a {
        display: inline-block;
        color: #fef200;
        margin-right: 10px;
        font-size: 18px;
        transition: 0.3s;
      }

      .social-icons a:hover {
        color: white;
        transform: translateY(-3px);
      }

      .footer-divider {
        border-color: #fef200;
        margin: 30px 0 15px;
      }

      .footer-bottom {
        font-size: 0.85rem;
        color: #aaa;
      }

      /* Feedback Section */
#feedback {
  background-color: #000;
}

.feedback-card {
  background: #111;
  border-radius: 15px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 0 20px rgba(254,242,0,0.2);
  transition: 0.4s;
}

.feedback-card:hover {
  box-shadow: 0 0 40px rgba(254,242,0,0.6);
  transform: translateY(-5px);
}

/* Custom Inputs */
.custom-input {
  background: #000;
  border: 1px solid #fef200;
  color: #fef200;
  transition: 0.3s;
}

.custom-input::placeholder {
  color: #aaa;
}

.custom-input:focus {
  background: #000;
  color: #fff;
  border-color: #fef200;
  box-shadow: 0 0 10px #fef200;
}

      /* ============================= */
/* RESPONSIVE FIX (NO UI CHANGE) */
/* ============================= */



/* Improve section padding on small screens */
@media (max-width: 768px) {
  section {
    padding: 3rem 1rem !important;
  }
}

/* Navbar brand resize */
@media (max-width: 768px) {
  .navbar-brand h5 {
    font-size: 1.5rem !important;
  }

  .logo {
    max-height: 55px !important;
    width: 75px !important;
  }
}

/* Hero text scaling */
@media (max-width: 768px) {
  .hero h2 {
    font-size: 2rem !important;
    letter-spacing: 2px !important;
  }

  .hero p {
    font-size: 0.95rem !important;
  }
}

/* Preloader responsive */
@media (max-width: 576px) {
  .balloon {
    width: 90px !important;
    height: 90px !important;
  }

  .balloon-image {
    width: 90px !important;
    height: 90px !important;
  }
}

/* Cards spacing on mobile */
@media (max-width: 768px) {
  .about-card,
  .service-card,
  .contact-card {
    padding: 1.5rem !important;
  }
}

/* Footer center alignment on mobile */
@media (max-width: 768px) {
  .footer-section .col-md-3 {
    text-align: center !important;
    margin-bottom: 2rem;
  }
}

/* Marquee text scaling */
@media (max-width: 576px) {
  .marquee {
    font-size: 0.75rem !important;
  }
}

/* Confetti overflow fix */
@media (max-width: 576px) {
  .hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}