*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.whatsapp-icon-contact-fixed {
  position: fixed;
  top: 85%;
  right: 2px;
  transform: translateY(-50%);
  z-index: 9999;
}

.whatsapp-icon-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.5rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.whatsapp-icon-icons a.whatsapp-icon-call {
  background: #0d6efd; /* Bootstrap primary blue */
}

.whatsapp-icon-icons a:hover {
  transform: translateY(-5px);
  background: #128C7E; /* Darker green for WhatsApp */
}

.whatsapp-icon-icons a.whatsapp-icon-call:hover {
  background: #0056b3; /* Darker blue for call */
}

@media (max-width: 768px) {
  .whatsapp-icon-contact-fixed {
    right: -2px;
  }
}


/* ================================
   FUTUREADD NAVBAR STYLES
   ================================ */

/* Navbar background */
/* Transparent Navbar Background */
.navbar-bg {
  background-color: transparent !important;
  backdrop-filter: blur(10px); /* Optional glass effect */
}

/* Logo styling in circle */
.navbar-logo-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f9c806;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
}

.navbar-logo {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Navigation Links Base Style */
.navbar-link {
  font-weight: 500;
  margin: 0 12px;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Specific Colors for Each Link */
.navbar-nav .nav-item:nth-child(1) .nav-link { color: #f9c806; } /* Home - Yellow */
.navbar-nav .nav-item:nth-child(2) .nav-link { color: #f9c806; } /* About - Cyan */
.navbar-nav .nav-item:nth-child(3) .nav-link { color: #f9c806; } /* Services - Magenta */
.navbar-nav .nav-item:nth-child(4) .nav-link { color: #f9c806; } /* Projects - Orange */
.navbar-nav .nav-item:nth-child(5) .nav-link { color: #f9c806; } /* Contact - Green */

/* Hover & Active Effects */
.navbar-link:hover {
  color: #f9c806 !important;
  /* text-shadow: 0 0 6px #f9c806; */
}
  .navbar-link.active {
  color: black !important;
}
/* Underline Animation */
.navbar-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #f9c806;
  transition: width 0.3s ease-in-out;
}

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

/* Social Icons (No Underline) */
.navbar-social-icon {
  background: #f9c806;
  color:white;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border-radius: 50%;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.navbar-social-icon:hover {
  background-color:black;
  color:white;
}

/* Responsive Tweaks */
@media (max-width: 991.98px) {
  .navbar-link {
    margin: 10px 0;
  }
  .navbar-social {
    margin-top: 10px;
    justify-content: center;
  }
}
/* .navbar-toggler{
  background-color: black;
} */
.navbar-toggler-icon{
      display: inline-block;
    width: 2.5em;
    height: 2em;
    vertical-align: middle;
    background-image:url("img/toggle-btn.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
/* home-hero-section-wrapper */
/* ==================================
   HERO SECTION: home-hero-section
   ================================== */

.home-hero-section-wrapper {
  background-image: url('img/hero-section.jpg'); /* 🔁 Replace with your own image path */
  background-size: cover;
  background-position: center;
  height: 90vh;
  position: relative;
}

.home-hero-section-overlay {
  /* background: rgba(0, 0, 0, 0.6); */
  padding: 60px 15px;
}

.home-hero-section-heading {
  font-size: 3rem;
  font-weight: bold;
}

.home-hero-section-subtext {
  font-size: 1.1rem;
  margin-top: 10px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.home-hero-section-buttons button {
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ===============================
   MODAL: home-hero-section-modal
   =============================== */

.home-hero-section-modal .modal-content {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.home-hero-section-modal .modal-title {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.home-hero-section-modal .modal-body {
  font-size: 1rem;
}

.home-hero-section-modal a {
  color: #000;
  font-weight: 500;
}

.home-hero-section-modal a:hover {
  text-decoration: underline;
  color: #f9c806;
}

/* ===============================
   Responsive Adjustments
   =============================== */
@media (max-width: 767.98px) {
  .home-hero-section-heading {
    font-size: 2rem;
  }
  .home-hero-section-subtext {
    font-size: 0.95rem;
  }
  .home-hero-section-modal .modal-content {
    padding: 1.5rem 1rem;
  }
  .home-hero-section-modal .modal-title {
    font-size: 1.1rem;
  }
  .home-hero-section-modal .modal-body {
    font-size: 0.95rem;
  }
}
/* home-about-section-wrapper */
/* ============================
   ABOUT SECTION: home-about-section
   ============================ */

.home-about-section-wrapper {
  background: linear-gradient(135deg, #000000, #1a1a1a, #5a189a, #f9c806);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  text-align: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home-about-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.home-about-section-description {
  font-size: 1.1rem;
  color: #f1f1f1;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.home-about-section-btn {
  padding: 10px 28px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.home-about-section-btn:hover {
  background-color: #f9c806;
  color: #000;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .home-about-section-title {
    font-size: 2rem;
  }

  .home-about-section-description {
    font-size: 1rem;
  }
}
/* home-services-section-wrapper */
/* ============================
   SERVICES SECTION: home-services-section
   ============================ */

.home-services-section-wrapper {
  background: linear-gradient(135deg, #0e0e0e, #1f1f1f, #3e1f73, #f9c806);
  background-size: 400% 400%;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home-services-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
}

.home-services-section-subtitle {
  font-size: 1.1rem;
  color: #dddddd;
}

/* Card Style */
.home-services-section-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 25px;
  border-radius: 15px;
  transition: all 0.4s ease;
  height: 100%;
  backdrop-filter: blur(6px);
}

.home-services-section-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

/* Image Styling */
.home-services-section-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .home-services-section-title {
    font-size: 2rem;
  }

  .home-services-section-img {
    height: 160px;
  }
}
/* home-whychoose-section-wrapper */
/* ===============================
   WHY CHOOSE FUTUREADD SECTION
   =============================== */

/* 🔥 WHY CHOOSE SECTION WRAPPER */
.home-whychoose-section-wrapper {
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e);
  background-size: 400% 400%;
  animation: home-whychoose-bg-anim 3s ease infinite;
  color: #fff;
  padding: 60px 20px;
}

@keyframes home-whychoose-bg-anim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home-whychoose-section-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
}

.home-whychoose-section-title span {
  color: #f9c806;
}

.home-whychoose-section-subtitle {
  font-size: 1.1rem;
  color: #ccc;
  max-width: 600px;
  margin: 0 auto;
}

/* 🔥 CARD STYLING */
.home-whychoose-section-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px 20px;
  border-radius: 12px;
  transition: 0.4s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  height: 100%;
}

.home-whychoose-section-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(249, 200, 6, 0.4);
}

.home-whychoose-section-icon {
  font-size: 3rem;
  color: #f9c806;
  margin-bottom: 15px;
  transition: 0.3s ease;
}

.home-whychoose-section-card:hover .home-whychoose-section-icon {
  transform: scale(1.2);
}

/* 🔁 TEXT & ICON SIZES ACROSS DEVICES */
@media (max-width: 991px) {
  .home-whychoose-section-title {
    font-size: 2.3rem;
  }
  .home-whychoose-section-subtitle {
    font-size: 1rem;
  }
  .home-whychoose-section-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .home-whychoose-section-title {
    font-size: 2rem;
  }
  .home-whychoose-section-subtitle {
    font-size: 0.95rem;
  }
  .home-whychoose-section-icon {
    font-size: 2.2rem;
  }
}

@media (max-width: 576px) {
  .home-whychoose-section-title {
    font-size: 1.6rem;
  }
  .home-whychoose-section-subtitle {
    font-size: 0.9rem;
  }
  .home-whychoose-section-icon {
    font-size: 2rem;
  }
}

/* home-project-section-wrapper */
/* -------------------------------
   Project Glimpse Gallery Style
------------------------------- */
.home-project-glimpse-section {
  background: linear-gradient(-45deg, #000000, #1a0033, #2c0066, #4b0082);
  background-size: 400% 400%;
  animation: djGlow 4s ease infinite;
  color: #fff;
}

@keyframes djGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home-project-glimpse-heading {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
}
.home-project-glimpse-heading span {
  color: #f9c806;
}
.home-project-glimpse-subtitle {
  font-size: 1rem;
  color: #ccc;
}

/* Gallery Cards */
.home-project-gallery-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.home-project-gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-project-gallery-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.home-project-gallery-card:hover img {
  transform: scale(1.05);
}

.home-project-gallery-card .overlay {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
  color: #f9c806;
  width: 100%;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 1rem;
  transition: background 0.4s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .home-project-glimpse-heading {
    font-size: 2rem;
  }

  .home-project-gallery-card img {
    height: 200px;
  }

  .home-project-gallery-card .overlay {
    font-size: 0.95rem;
  }
}
/* home-testimonial-section */
/* =============================
   CLIENT TESTIMONIAL - GLOW STYLE
============================= */
/* ===============================
   FUTUREADD - CLIENT TESTIMONIALS
   =============================== */

.home-testimonial-section {
  position: relative;
  background: radial-gradient(circle at top left, #240046, #3c096c, #000000);
  overflow: hidden;
  color: #fff;
  padding: 60px 0;
}

.home-testimonial-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: #f9c806;
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(200px);
  top: 10%;
  left: -100px;
  z-index: 0;
}
.home-testimonial-section::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: #ff00f7;
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(200px);
  bottom: 0;
  right: -100px;
  z-index: 0;
}

.home-testimonial-title {
  color: #f9c806;
  font-size: 2.5rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}

.home-testimonial-subtitle {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

/* Swiper Wrapper and Slide - Equal Height */
.swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.swiper-slide {
  display: flex;
  align-items: stretch;
}

/* Testimonial Card */
.home-testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.08);
  transition: 0.3s ease;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-testimonial-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 50px rgba(249, 200, 6, 0.2);
}

/* Quote Icon */
.quote-icon {
  font-size: 2rem;
  color: #f9c806;
  margin-bottom: 15px;
}

/* Testimonial Text */
.testimonial-text {
  font-style: italic;
  font-size: 1.1rem;
  color: #eee;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Client Info */
.testimonial-client img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f9c806;
  margin-bottom: 10px;
}

.testimonial-client h5 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}
.testimonial-client span {
  font-size: 0.85rem;
  color: #aaa;
}

/* Swiper Pagination Dots */
.swiper-pagination-bullet {
  background: #f9c806;
  opacity: 0.8;
}
.swiper-pagination-bullet-active {
  background: #fff;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .home-testimonial-title {
    font-size: 2rem;
  }
  .testimonial-text {
    font-size: 1rem;
  }
}
/* home-cta-section-wrapper */
/* Section */
.home-cta-section {
  background: linear-gradient(135deg, #240046, #3c096c, #000000);
  color: #fff;
}

.home-cta-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #f9c806;
}

.home-cta-btn {
  background: #f9c806;
  color: #000;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.home-cta-btn:hover {
  background: #fff;
  color: #000;
}

/* Popup */
.home-cta-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.home-cta-popup-content {
  background: #1f1f2e;
  color: #fff;
  padding: 30px 25px;
  border-radius: 15px;
  max-width: 400px;
  margin: 5% auto 40px auto;
  position: relative;
  box-shadow: 0 0 25px rgba(249, 200, 6, 0.4);
}

.home-cta-popup-content h4 {
  text-align: center;
  color: #f9c806;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.home-cta-popup-content input,
.home-cta-popup-content textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: none;
  outline: none;
  font-size: 1rem;
}

.home-cta-popup-content button {
  width: 100%;
  padding: 12px;
  background: #f9c806;
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.home-cta-popup-content button:hover {
  background: #fff;
  color: #000;
}

.home-cta-close {
  position: absolute;
  top: -5px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
  .home-cta-popup-content {
    padding: 20px 15px;
    margin-top: 10%;
  }
}
/* home-footer-section */
.main-footer {
  background: linear-gradient(to right, #140036, #0b0513);
  color: #fff;
  padding: 40px 20px 20px;
  font-family: 'Poppins', sans-serif;
}

.footer-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-underline {
  width: 30px;
  height: 3px;
  background-color: #f9c806;
  margin-bottom: 20px;
}

.footer-company-name {
  font-weight: 600;
  color: #f9c806;
  margin-bottom: 10px;
}

.main-footer p,
.main-footer li,
.main-footer a {
  font-size: 14px;
  color: #ccc;
  line-height: 1.8;
  text-decoration: none;
}

.main-footer a:hover {
  color: #f9c806;
  text-decoration: none;
}

.footer-social-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  transition: 0.3s ease;
  margin-top: 2px;
}

.footer-social-icons a:hover {
  background-color: #f9c806;
  color: #000;
}

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

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

.footer-links li a {
  color: #ccc;
  transition: 0.3s;
}

.footer-bottom {
  /* background: #000; */
  padding: 15px 0;
  /* margin-top: 30px; */
}

.footer-bottom p {
  margin: 0;
  font-size: 14px;
  color: #fff;
}

.footer-bottom span {
  color: #f9c806;
  font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-social-icons {
    text-align: left;
  }

  .main-footer {
    text-align: left;
  }
}
/* about page */
/* about-hero-section-wrapper */
/* ✅ DJ HERO SECTION */
.about-hero-section {
  position: relative;
  background: url('img/about-hero.jpeg') no-repeat center center/cover;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Gradient Overlay with DJ Feel (Animated) */
.about-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #f9c806, #ff00f7, #00ffff, #f9c806);
  background-size: 400% 400%;
  animation: djGradientMove 5s ease infinite;
  opacity: 0.25;
  z-index: 1;
}

@keyframes djGradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Text Content */
.about-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}

.about-hero-title {
  font-size: 3.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  transition: 0.3s ease;
}
.about-hero-title:hover {
  color: #f9c806;
  text-shadow: 0 0 40px #fff;
}

.about-hero-subtitle {
  font-size: 1.4rem;
  margin-top: 1rem;
  color: #ddd;
  text-shadow: 0 0 10px rgba(255,255,255,0.1);
}

/* Responsive */
@media (max-width: 992px) {
  .about-hero-title {
    font-size: 2.5rem;
  }
  .about-hero-subtitle {
    font-size: 1.1rem;
  }
}
@media (max-width: 576px) {
  .about-hero-title {
    font-size: 2rem;
  }
  .about-hero-subtitle {
    font-size: 1rem;
  }
}
/* 🔥 Company Intro Section Styles */
.about-company-intro-section {
  position: relative;
  background: url('img/about-welcome-1.webp') center center / cover no-repeat;
  padding: 100px 0;
  overflow: hidden;
  z-index: 1;
  color: #fff;
}

/* 🎨 DJ Gradient Overlay Animation */
.about-company-intro-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #240046, #0f002d, rgba(0,0,0,0.2));
  animation: moveDown 8s infinite linear;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

@keyframes moveDown {
  0% {
    background-position: 0 -100px;
  }
  100% {
    background-position: 0 100px;
  }
}

/* 🎯 Header Text */
.about-company-intro-header {
  position: relative;
  z-index: 2;
  margin-bottom: 60px;
  text-align: center;
}

.about-company-intro-header h2 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #f9c806;
  text-shadow: 0 0 25px rgba(249, 200, 6, 0.5);
}

.about-company-intro-header p {
  font-size: 1.1rem;
  color: #ccc;
}

/* 🟡 Card Styles */
.about-company-intro-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(249, 200, 6, 0.1);
  overflow: hidden;
}

/* ✨ Glowing Light Behind Card on Hover */
.about-company-intro-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 239, 0, 0.25), transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.5s ease;
  border-radius: 50%;
  z-index: -1;
}

.about-company-intro-card:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.about-company-intro-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 40px rgba(249, 200, 6, 0.4);
}

.about-company-intro-card i {
  font-size: 2rem;
  background: linear-gradient(135deg, #f9c806, #fff200);
  color: #000;
  padding: 15px;
  border-radius: 50%;
  margin-bottom: 15px;
  box-shadow: 0 0 15px rgba(255, 239, 0, 0.3);
  transition: transform 0.3s ease;
}

.about-company-intro-card:hover i {
  transform: scale(1.2) rotate(8deg);
}

/* Text in Cards */
.about-company-intro-card h5 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.about-company-intro-card p {
  font-size: 0.95rem;
  color: #ccc;
}

/* 📱 Responsive Tweaks */
@media (max-width: 768px) {
  .about-company-intro-header h2 {
    font-size: 2rem;
  }
  .about-company-intro-card {
    padding: 25px 15px;
  }
}
/* about-why-unique-section */
.why-unique-dj-section {
  padding: 40px 20px;
  background: linear-gradient(-45deg, #1a002a, #34005c, #1e003f, #3d0073);
  background-size: 400% 400%;
  animation: djGradientFlow 12s ease infinite;
  color: #fff;
  overflow: hidden;
}

@keyframes djGradientFlow {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

.why-unique-dj-header {
  text-align: center;
  margin-bottom: 60px;
}

.why-unique-dj-header h2 {
  font-size: 2.7rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px #f9c80688;
}

.why-unique-dj-header h2 span {
  color: #f9c806;
}

.why-unique-dj-header p {
  font-size: 1.1rem;
  color: #ddd;
}

.why-unique-dj-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  display: flex;
  gap: 20px;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(249, 200, 6, 0.15);
  transition: 0.4s ease;
  position: relative;
  z-index: 2;
  align-items: center;
}

.why-unique-dj-card.left {
  flex-direction: row;
}

.why-unique-dj-card.right {
  flex-direction: row-reverse;
}

.why-unique-dj-card:hover {
  box-shadow: 0 0 50px rgba(249, 200, 6, 0.4);
  transform: translateY(-8px);
}

.why-unique-dj-card i {
  font-size: 2.5rem;
  background: radial-gradient(circle, #f9c806, #fff200);
  color: #000;
  padding: 20px;
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(255, 255, 0, 0.5);
  transition: transform 0.3s ease;
}

.why-unique-dj-card:hover i {
  transform: scale(1.15) rotate(6deg);
}

.why-unique-dj-card h5 {
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
}

.why-unique-dj-card p {
  color: #ccc;
  font-size: 0.95rem;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .why-unique-dj-card {
    flex-direction: column !important;
    text-align: center;
  }
  .why-unique-dj-card i {
    margin-bottom: 15px;
  }
  .why-unique-dj-header h2 {
    font-size: 2.2rem;
  }
}
/* about-location-service-area-section */
.about-location-service-area-section {
  position: relative;
  background: linear-gradient(135deg, #0a0f33, #1a004e, #2c0066, #0c0021);
  background-size: 600% 600%;
  animation: about-gradientFlow 10s ease-in-out infinite;
  padding: 40px 20px;
  overflow: hidden;
  color: #fff;
}

@keyframes about-gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.about-location-gradient-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.9));
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

.about-location-service-area-section .container {
  position: relative;
  z-index: 2;
}

.about-location-header h2 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #f9c806;
  text-shadow: 0 0 25px rgba(249, 200, 6, 0.5);
  animation: pulseText 3s infinite;
}

.about-location-header p {
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 40px;
}

@keyframes pulseText {
  0%, 100% { text-shadow: 0 0 20px rgba(249, 200, 6, 0.2); }
  50% { text-shadow: 0 0 40px rgba(249, 200, 6, 0.6); }
}

.about-location-info h4,
.about-location-info h5 {
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.about-location-info p,
.about-location-info li {
  font-size: 0.95rem;
  color: #ddd;
}

.about-location-info ul {
  list-style: disc;
  padding-left: 20px;
}

.about-location-map iframe {
  width: 100%;
  height: 320px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.about-location-map iframe:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .about-location-header h2 {
    font-size: 2rem;
  }

  .about-location-map iframe {
    height: 250px;
  }
}
/* service page */
/* service-hero-section */
.service-hero-section {
  position: relative;
  height: 90vh;
  background: url('img/service-hero.webp') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.service-hero-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,0,150,0.2), rgba(0,204,255,0.2), rgba(255,255,0,0.2));
  background-size: 200% 200%;
  animation: djGlow 3s linear infinite;
  z-index: 1;
  mix-blend-mode: screen;
}

@keyframes djGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.service-hero-section .container {
  position: relative;
  z-index: 2;
}

.service-hero-section-content h1 {
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.service-hero-section-content p {
  font-size: 1.2rem;
  color: #ddd;
  margin: 20px 0 35px;
}

.service-hero-section-btn {
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(90deg, #ffe600, #ff9300);
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(255, 230, 0, 0.4);
  text-decoration: none;
  transition: 0.3s ease;
}

.service-hero-section-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .service-hero-section-content h1 {
    font-size: 2.2rem;
  }

  .service-hero-section-content p {
    font-size: 1rem;
  }

  .service-hero-section-btn {
    padding: 10px 22px;
  }
}
/* service-grid-section */
.service-grid-section {
    padding: 100px 0;
    background: linear-gradient(to top right, #0f002d, #240046, #ff0080);
    color: #fff;
    position: relative;
    z-index: 1;
  }

  .service-grid-header h2 {
    color: #f9c806;
    font-size: 2.7rem;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .service-grid-header p {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 50px;
  }

  .service-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 0 10px rgba(249, 200, 6, 0.15);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.4);
  }

  .service-card video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 10px;
    object-fit: cover;
    transition: 0.3s ease;
  }

  .service-card h5 {
    color: #fff;
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .service-card p {
    color: #ccc;
    font-size: 0.95rem;
  }

  /* Video Popup Modal */
  .video-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
  }

  .video-popup video {
    width: 90%;
    max-width: 800px;
    aspect-ratio: 16/9;
    border-radius: 12px;
    height: auto;
  }

  .close-video {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  /* Responsive Tweaks */
  @media (max-width: 768px) {
    .service-card h5 {
      font-size: 1rem;
    }

    .service-card p {
      font-size: 0.85rem;
    }

    .service-grid-header h2 {
      font-size: 2rem;
    }

    .video-popup video {
      width: 95%;
    }
  }
/* service-technology-section-wrapper */
.service-technology-section-wrapper {
  position: relative;
  background: linear-gradient(135deg, #1d0034, #000428);
  color: #fff;
  padding: 100px 0;
  overflow: hidden;
  z-index: 1;
}

.service-technology-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 0, 255, 0.05), rgba(0, 0, 0, 0.85));
  animation: techGlow 10s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes techGlow {
  0% {
    background-position: 0 0;
    opacity: 0.8;
  }
  100% {
    background-position: 0 100px;
    opacity: 0.9;
  }
}

.service-technology-section-header {
  position: relative;
  z-index: 2;
  margin-bottom: 60px;
}

.service-technology-section-header h2 {
  font-size: 2.5rem;
  color: #f9c806;
  font-weight: 800;
  text-shadow: 0 0 25px rgba(249, 200, 6, 0.3);
}

.service-technology-section-header p {
  color: #ddd;
  font-size: 1.1rem;
}

.service-technology-section-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  height: 100%;
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.service-technology-section-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2), 0 0 60px rgba(255, 255, 255, 0.1);
}

.service-technology-section-card i {
  font-size: 3rem;
  color: #f9c806;
  background: #fff;
  padding: 20px;
  border-radius: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.service-technology-section-card:hover i {
  transform: scale(1.2) rotate(5deg);
}

.service-technology-section-card h5 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}

.service-technology-section-card p {
  color: #ccc;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .service-technology-section-header h2 {
    font-size: 2rem;
  }

  .service-technology-section-card {
    padding: 25px 15px;
  }
}
/* lighting-whyworks-section-wrapper */
.lighting-whyworks-section-container {
  position: relative;
  padding: 40px 0;
  background: linear-gradient(135deg, #000000, #1f0036, #470057);
  color: #fff;
  overflow: hidden;
}

.lighting-whyworks-section-image-wrapper {
  padding: 10px;
  animation: glowPulse 5s infinite alternate ease-in-out;
}

.lighting-whyworks-section-image {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 50px rgba(255, 0, 255, 0.6);
  }
}

.lighting-whyworks-section-content {
  padding-left: 30px;
}

.lighting-whyworks-section-content h2 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #f9c806;
  text-shadow: 0 0 30px rgba(255, 255, 0, 0.3);
  margin-bottom: 40px;
}

.lighting-whyworks-section-point {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  gap: 15px;
}

.lighting-whyworks-section-bar {
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #f9c806, #ff00ff);
  animation: slideBar 2s infinite alternate;
  border-radius: 10px;
}

@keyframes slideBar {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1.4);
  }
}

.lighting-whyworks-section-point h5 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #ffffff;
}

.lighting-whyworks-section-point p {
  color: #cccccc;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .lighting-whyworks-section-container {
    padding: 60px 0;
  }

  .lighting-whyworks-section-content {
    padding-left: 0;
    margin-top: 30px;
  }

  .lighting-whyworks-section-content h2 {
    font-size: 2rem;
    text-align: center;
  }
}
/* Project page */
/* project-hero-section-wrapper */
.project-hero-section-wrapper {
  position: relative;
  height: 90vh;
  background: url('img/project-hero.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-hero-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    rgba(43, 6, 92, 0.85),
    rgba(255, 0, 255, 0.2)
  );
  animation: pulseOverlay 4s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes pulseOverlay {
  0% {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9),
      rgba(43, 6, 92, 0.85),
      rgba(255, 0, 255, 0.2)
    );
  }
  100% {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7),
      rgba(120, 6, 150, 0.85),
      rgba(0, 255, 255, 0.25)
    );
  }
}

.project-hero-section-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.project-hero-section-content h1 {
  font-size: 3.2rem;
  font-weight: 800;
  color: #f9c806;
  margin-bottom: 20px;
  text-shadow: 0 0 25px rgba(249, 200, 6, 0.5);
}

.project-hero-section-content p {
  font-size: 1.2rem;
  color: #eee;
  margin-bottom: 30px;
}

.project-hero-section-btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1rem;
  background: linear-gradient(135deg, #f9c806, #ff00ff);
  color: #000;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
  transition: all 0.3s ease-in-out;
}

.project-hero-section-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-hero-section-content h1 {
    font-size: 2.2rem;
  }

  .project-hero-section-content p {
    font-size: 1rem;
  }

  .project-hero-section-btn {
    font-size: 0.95rem;
    padding: 10px 25px;
  }
}
/* project-gallery-section */
/* project-gallery-section */
.project-gallery-section {
      padding: 40px 0;
      background: linear-gradient(to bottom, #000000, #1f0036, #4a007e);
      color: #fff;
      text-align: center;
    }

    

    .project-gallery-title {
      font-size: 2.5rem;
      color: #f9c806;
      margin-bottom: 40px;
      text-shadow: 0 0 10px rgba(249, 200, 6, 0.5);
    }

    .project-gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .project-gallery-card {
      position: relative;
      width: 100%;
      height: 250px;
      cursor: pointer;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ease;
      box-shadow: 0 0 10px rgba(249, 200, 6, 0.2);
    }

    .project-gallery-card:hover {
      transform: scale(1.05);
    }

    .project-gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center; /* यह line add की गई है - images top से show होंगी */
      transition: transform 0.3s ease;
    }

    .project-gallery-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

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

    .project-gallery-text {
      color: #f9c806;
      font-size: 1.1rem;
      font-weight: 600;
      text-align: center;
      text-shadow: 0 0 5px rgba(249, 200, 6, 0.5);
      margin: 0;
    }

    /* Modal Styling */
    .project-gallery-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.95);
      align-items: center;
      justify-content: center;
    }

    .project-gallery-modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
    }

    .project-gallery-modal-img {
      width: 100%;
      height: auto;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
    }

    .project-gallery-close {
      position: absolute;
      top: -35px;
      right: 0;
      font-size: 2.5rem;
      color: #f9c806;
      cursor: pointer;
      z-index: 10000;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .project-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .project-gallery-title {
        font-size: 2rem;
      }

      .project-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
      }

      .project-gallery-card {
        height: 200px;
      }

      .project-gallery-modal-img {
        max-height: 60vh;
      }

      .project-gallery-close {
        top: -25px;
        font-size: 2rem;
      }
    }

    @media (max-width: 480px) {
      .project-gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .project-gallery-title {
        font-size: 1.8rem;
      }

      .project-gallery-card {
        height: 180px;
      }
    }
/* project-categories-section */
.project-categories-section {
  padding: 80px 0;
  background: linear-gradient(270deg, #000428, #004e92, #8e2de2, #4a00e0);
  background-size: 800% 800%;
  animation: gradientShift 15s ease infinite;
  color: #fff;
  text-align: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.project-categories-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.project-categories-title {
  font-size: 2.5rem;
  color: #f9c806;
  margin-bottom: 40px;
  text-shadow: 0 0 15px rgba(249, 200, 6, 0.6);
}

.project-categories-filters {
  margin-bottom: 30px;
}

.project-categories-filter-btn {
  background: #f9c806;
  border: none;
  padding: 12px 25px;
  margin: 0 8px 10px;
  color: #000;
  cursor: pointer;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.project-categories-filter-btn.active,
.project-categories-filter-btn:hover {
  background: #000;
  color: #f9c806;
}

.project-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.project-categories-item {
  display: none;
}

.project-categories-item.show {
  display: block;
}

.project-categories-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.4s ease;
  box-shadow: 0 0 20px rgba(249, 200, 6, 0.3);
}

.project-categories-item img:hover {
  transform: scale(1.05);
}

/* Modal */
.project-categories-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.project-categories-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.project-categories-modal-img {
  width: 100%;
  max-height: 80vh;
  border-radius: 15px;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.project-categories-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 3rem;
  color: #f9c806;
  cursor: pointer;
}

@media (max-width: 768px) {
  .project-categories-title {
    font-size: 2rem;
  }

  .project-categories-modal-img {
    max-height: 60vh;
  }

  .project-categories-close {
    font-size: 2.5rem;
    top: -30px;
  }
}

/* project-before-section-wrapper */
.project-before-section-wrapper {
  background: linear-gradient(to top, #0f001f, #370055, #5e0099);
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

.project-before-section-title {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #f9c806;
  text-shadow: 0 0 15px rgba(249, 200, 6, 0.6);
}

.project-before-section-compare-wrapper {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.project-before-section-compare-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.project-before-section-image {
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
}

.project-before-section-image.before {
  left: 0;
  right: 0;
  z-index: 1;
}

.project-before-section-image.after {
  left: 0;
  width: 50%;
  z-index: 2;
  border-right: 2px solid #f9c806;
}

.project-before-section-slider {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 3;
  -webkit-appearance: none;
  background: transparent;
}

.project-before-section-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #f9c806;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px #f9c806;
}

.project-before-section-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 768px) {
  .project-before-section-compare-container {
    height: 250px;
  }

  .project-before-section-title {
    font-size: 1.8rem;
  }
}
/* contact page */
/* contact-hero-section-wrapper */
.contact-hero-section-wrapper {
  position: relative;
  height: 90vh;
  background: url('img/contact-hero.jpg') center center / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.contact-hero-section-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,0,204,0.3), rgba(0,102,255,0.3), rgba(0,255,204,0.3));
  background-size: 300% 300%;
  animation: contact-hero-gradient-shift 4s ease infinite;
  z-index: 1;
}

@keyframes contact-hero-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.contact-hero-section-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.contact-hero-section-content h1 {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 25px #f9c806;
}

.contact-hero-section-content h1 span {
  color: #f9c806;
  text-shadow: 0 0 40px #f9c806;
}

.contact-hero-section-content p {
  font-size: 1.2rem;
  color: #ddd;
  margin-top: 10px;
  text-shadow: 0 0 6px #000;
}

.contact-hero-section-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 30px;
  font-size: 1rem;
  background: #f9c806;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(249, 200, 6, 0.5);
  transition: all 0.3s ease;
}

.contact-hero-section-btn:hover {
  background: #fff200;
  box-shadow: 0 0 35px rgba(255, 255, 0, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-hero-section-content h1 {
    font-size: 2rem;
  }

  .contact-hero-section-content p {
    font-size: 1rem;
  }

  .contact-hero-section-btn {
    padding: 10px 24px;
    font-size: 0.95rem;
  }
}
/* contact-form-section */
.contact-form-section {
  position: relative;
  padding: 40px 20px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(270deg, #000428, #004e92, #8e2de2, #4a00e0);
  background-size: 400% 400%;
  animation: animateBG 10s ease infinite;
}

@keyframes animateBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.contact-form-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-form-header h2 {
  font-size: 2.5rem;
  color: #fff200;
  text-shadow: 0 0 25px rgba(255, 255, 0, 0.8);
}

.contact-form-header p {
  font-size: 1.1rem;
  color: #eee;
}

.contact-form-body {
  background: rgba(0, 0, 0, 0.6);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(255, 255, 0, 0.2);
  backdrop-filter: blur(10px);
}

.contact-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-form-input-box {
  flex: 1 1 30%;
  position: relative;
}

.contact-form-input-box i {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #888;
}

.contact-form-input-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #f1f1f1;
  color: #000;
}

.contact-form-textarea-box {
  position: relative;
}

.contact-form-textarea-box i {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #888;
}

.contact-form-textarea-box textarea {
  width: 100%;
  padding: 12px 12px 12px 40px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  outline: none;
  resize: vertical;
  background: #f1f1f1;
  color: #000;
}

/* ✅ Center the Button Properly */
.contact-form-btn {
  display: block;            /* Block element */
  margin: 30px auto 0 auto;  /* Top margin, center horizontally */
  padding: 14px 40px;        /* Default padding */
  background-color: #f9c806;
  color: #000;
  border: none;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.3);
  text-align: center;
}

.contact-form-btn:hover {
  background-color: #fff200;
  box-shadow: 0 0 30px rgba(255, 255, 0, 0.5);
}

/* ✅ Responsive adjustments */
@media (max-width: 768px) {
  .contact-form-grid {
    flex-direction: column;
  }

  .contact-form-input-box {
    flex: 1 1 100%;
  }

  .contact-form-header h2 {
    font-size: 1.8rem;
  }

  .contact-form-btn {
    padding: 12px 30px;   /* Slightly smaller padding on mobile */
    margin: 20px auto 0 auto;
  }
}

@media (max-width: 480px) {
  .contact-form-btn {
    padding: 10px 25px;  /* Even smaller padding on very small screens */
    margin: 15px auto 0 auto;
    font-size: 1rem;
  }
}

/* contact-info-section */
.contact-info-section {
  background: linear-gradient(135deg, #10002b, #3c096c);
  padding: 60px 20px;
  color: #fff;
}

.contact-info-container {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-info-header h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fcd400;
  text-shadow: 0 0 20px rgba(252, 212, 0, 0.6);
}

.contact-info-header p {
  font-size: 1rem;
  color: #ccc;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.contact-info-card {
  background: #1a002a;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(255, 221, 0, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: all 0.3s ease;
}

.contact-info-card:hover {
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.35);
  transform: translateY(-4px);
}

.contact-info-card i {
  font-size: 1.7rem;
  background: #fcd400;
  color: #000;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 239, 0, 0.4);
  flex-shrink: 0;
}

.contact-info-card h5 {
  margin: 0 0 5px;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
}

.contact-info-card p,
.contact-info-card a {
  margin: 0;
  font-size: 0.95rem;
  color: #ddd;
  text-decoration: none;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .contact-info-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .contact-info-card i {
    margin-bottom: 10px;
  }

  .contact-info-header h2 {
    font-size: 2rem;
  }

  .contact-info-header p {
    font-size: 0.95rem;
  }
}
/* google-map-sectio */
.google-map-section {
  padding: 60px 20px;
  background: linear-gradient(135deg, #1a001f, #2c003e);
  color: #fff;
}

.google-map-header {
  text-align: center;
  margin-bottom: 40px;
}

.google-map-header h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #f9c806;
  text-shadow: 0 0 25px rgba(249, 200, 6, 0.5);
}

.google-map-header p {
  font-size: 1.1rem;
  color: #ddd;
}

.google-map-container iframe {
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(249, 200, 6, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .google-map-container iframe {
    height: 300px;
  }

  .google-map-header h2 {
    font-size: 2rem;
  }

  .google-map-header p {
    font-size: 1rem;
  }
}