* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #0f0f0f;
  padding-top: 70px;
  color: #fff;
}

/* ---------------- NAVBAR ---------------- */
.navbar {
  background-color: #05050595;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* LOGO FIX */
.logo {
  display: flex;
  align-items: left;
}

.logo img {
  height: 50px;   /* perfect navbar size */
  width: auto;
  object-fit: contain;
  display: block;
}




/* HAMBURGER */
.hamburger {
  display: none;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  z-index: 1000;
}

.hamburger div {
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger active = X */
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {
  opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* NAV MENU */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 20px;
  margin-left: auto;
  align-items: center;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: all 0.3s ease;
}

.nav-menu a:hover {
  background-color: #9eff00;
  color: black;
  border-radius: 4px;
}

/* CTA BUTTON */
.cta {
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: #9eff00;
  color: #111;
  font-weight: bold;
  transition: 0.3s;
}
.cta:hover {
  background: #7cc600;
}

/* DROPDOWN MENU */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #222;
  display: none;
  flex-direction: column;
  min-width: 220px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  display: flex;
}

.dropdown-menu li a {
  padding: 12px 16px;
  color: #fff;
}
.cta li a {
  
color: #9eff00;
}
.dropdown-menu li a:hover {
  background: #9eff00;
  color: #111;
}

/* --------------- MOBILE RESPONSIVE ---------------- */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 65%;
    height: 100vh;
    background-color: #000000ce;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 60px;
    transition: 0.3s;
    border-radius: 16px;
    z-index: 999;
  }

  .nav-menu.active {
    left: 0;
  }

  /* Disable hover for mobile */
  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .dropdown-menu {
    position: static;
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
  }

  .nav-menu a {
    width: 100%;
    padding: 12px 0;
  }

  .cta {
    margin: 0;
    width: 60%;
    text-align: center;
  }
}


/* ===== Blog Section ===== */
.blog-section {
  background: #1a1a1a;
  margin: 0;
  color: #d0d0d0;
  min-height: 100vh;   /* full screen height */
  padding: 60px 20px;  /* normal spacing */
  font-family: Arial, sans-serif;
}

.blog-section h1 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 10px;
  color: #7cbf3b; /* dimmed highlight green */
}

.blog-section .subtitle {
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
  color: #bbbbbb; /* softer secondary text */
}

.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.blog-card {
  background: #2a2a2a; /* card dark gray */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card-content {
  padding: 20px;
}

.blog-card-content h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #d0d0d0; /* maintain contrast */
}

.blog-card-content p {
  font-size: 16px;
  color: #cccccc; /* softer gray for readability */
  line-height: 1.6;
  margin-bottom: 15px;
}

.blog-card-content a {
  display: inline-block;
  color: #7cbf3b; /* highlight green */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.blog-card-content a:hover {
  color: #5e9530; /* darker green on hover */
  text-decoration: underline;
}

/* Mobile responsive */
@media screen and (max-width: 1024px) {
  .blog-section {
    padding: 50px 5%;
  }

  .blog-section h1 {
    font-size: 36px;
  }

  .blog-section .subtitle {
    font-size: 16px;
  }

  .blog-card-content h2 {
    font-size: 20px;
  }

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

@media screen and (max-width: 768px) {
  .blog-card-content h2 {
    font-size: 18px;
  }

  .blog-card-content p {
    font-size: 14px;
  }
}  

font-weight: bold/* ===== BLOG HERO ===== */
.blog-hero {
  background: #0f0f0f;
  color: #9eff00;
  text-align: center;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}

.blog-hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.blog-hero p {
  font-size: 18px;
  color: #d0d0d0;
}



/* ===== Single Blog Page ===== */
.single-blog-section {
  background: #1a1a1a; /* dark gray background */
  color: #d0d0d0;       /* main text color */
  padding: 60px 10%;
  font-family: Arial, sans-serif;
}

.single-blog-section h1 {
  font-size: 42px;
  color: #7cbf3b; /* dimmed highlight green */
  text-align: center;
  margin-bottom: 20px;
}

.single-blog-section .date {
  text-align: center;
  color: #bbbbbb;
  font-size: 16px;
  margin-bottom: 40px;
}

.single-blog-section img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 30px;
}

.single-blog-section .content {
  font-size: 18px;
  line-height: 1.8;
  color: #cccccc;
}

.single-blog-section .content p {
  margin-bottom: 20px;
}

.single-blog-section .content a {
  color: #7cbf3b;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.single-blog-section .content a:hover {
  color: #5e9530; /* darker green on hover */
  text-decoration: underline;
}

/* Navigation buttons (prev / next) */
.single-blog-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.single-blog-nav a {
  background: #2a2a2a;
  color: #d0d0d0;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.single-blog-nav a:hover {
  background: #3a3a3a;
  color: #7cbf3b;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .single-blog-section {
    padding: 50px 5%;
  }

  .single-blog-section h1 {
    font-size: 36px;
  }

  .single-blog-section .content {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .single-blog-section h1 {
    font-size: 30px;
  }

  .single-blog-section .content {
    font-size: 15px;
  }

  .single-blog-nav {
    flex-direction: column;
    gap: 15px;
  }

  .single-blog-nav a {
    text-align: center;
  }
}

  font-size: 22px;
  color: #fff;
}

/* HAMBURGER */
.hamburger {
  display: none;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  z-index: 1000;
}

.hamburger div {
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger active = X */
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {
  opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* NAV MENU */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 20px;
  margin-left: auto;
  align-items: center;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: all 0.3s ease;
}

.nav-menu a:hover {
  background-color: #9eff00;
  color: black;
  border-radius: 4px;
}

/* CTA BUTTON */
.cta {
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: #9eff00;
  color: #111;
  font-weight: bold;
  transition: 0.3s;
}
.cta:hover {
  background: #7cc600;
}

/* DROPDOWN MENU */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #222;
  display: none;
  flex-direction: column;
  min-width: 220px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  display: flex;
}

.dropdown-menu li a {
  padding: 12px 16px;
  color: #fff;
}

.dropdown-menu li a:hover {
  background: #9eff00;
  color: #111;
}

/* --------------- MOBILE RESPONSIVE ---------------- */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 65%;
    height: 100vh;
    background-color: #000000ce;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 60px;
    transition: 0.3s;
    border-radius: 16px;
    z-index: 999;
  }

  .nav-menu.active {
    left: 0;
  }

  /* Disable hover for mobile */
  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .dropdown-menu {
    position: static;
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
  }

  .nav-menu a {
    width: 100%;
    padding: 12px 0;
  }

  .cta {
    margin: 0;
    width: 60%;
    text-align: center;
  }
}

.hero {
  height: 90vh;
  max-height: 650px;
  background: url("Images/hero.jpg") center/cover no-repeat;
  position: relative;
}




/* Laptop & Desktop screens */
@media (min-width: 1024px) {
  .hero {
    background: url("Images/hero-deskto.jpg") center/cover no-repeat;
  }
}


.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
 }

.hero-content {
  position: relative;
  max-width: 700px;
  padding: 120px 60px;
}

.hero h1 {
  font-size: 52px;
  margin: 20px 0;
  animation: slideFade 1.5s forwards;
  opacity: 0;
  transform: translateX(-50px);
}

.hero p {
  color: #ccc;
  margin-bottom: 30px;
  animation: slideFade 1.5s forwards;
  opacity: 0;
  transform: translateX(-50px);
}

.badge {
  background: #1a1a1a;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  animation: fadeIn 3s forwards;
  opacity: 0;
}

.hero-buttons button {
  padding: 12px 24px;
  border-radius: 30px;
  margin-right: 10px;
  border: none;
  gap: 50px;
  cursor: pointer;
  animation: slideUpFade 2.5s forwards;
  opacity: 0;
  transform: translateY(50px);
}
.hero-buttons a {
  text-decoration: none;
  padding: 8px 16px;   /* 👈 reduces inside space */
  font-size: 15px;     /* 👈 reduces text size */
  line-height: 1.3;    /* 👈 tightens vertical spacing */
}



.primary {
  background: #9eff00;
  
}
.secondary, a.secondary {
  background: transparent;
  
  color: #9eff00;
  position: relative;
  top: 15px;
  display: inline-block;
  text-decoration: none;
}
.clock-icon {
  color: white;
  vertical-align: middle;
  margin-right: 6px;
}

.features {
display: grid;
gap: 20px;
padding: 60px;pp
}
.clock-icon {
font-size: 18px;
margin-right: 6px;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(57, 250, 81, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.feature-card {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
display: grid;
flex-wrap: wrap;
padding: 40px 35px;
gap: 50px;

}

.feature-card-1 {
padding: 30px 20px;
box-shadow: 0 4px 8px #9eff00;
background: #1a1a1a;
max-height: 400px;
height: 40vh;
/* controls how wide it is */
border-radius: 15px;

}
.feature-card-2 {
padding: 30px 20px;
justify-content: center;
box-shadow: 0 4px 8px #9eff00;
background: #1a1a1a;
height: 40vh;
max-height: 400px;/* controls how wide it is */
border-radius: 15px;

}
.feature-card-3 {
padding: 30px 20px;
justify-content: center;
box-shadow: 0 4px 8px #9eff00;
background: #1a1a1a;
max-height: 400px;
height: 40vh;  /* controls how wide it is */
border-radius: 15px;

}
/* BASE CARD */
.feature-card-1,
.feature-card-2,
.feature-card-3 {
  flex-wrap: wrap;
  align-items: center;
  padding: 30px 20px;
  justify-content: center;
  background: #1a1a1a;
  height: 25vh;
  max-height: 300px;
  border-radius: 15px;
  box-shadow: 0 4px 8px #9eff00;
  opacity: 0; /* for fade-up scroll */
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

/* SCROLL ANIMATION */
.feature-card-1.show,
.feature-card-2.show,
.feature-card-3.show {
  opacity: 1;
  transform: translateY(0);
}

/* DESKTOP HOVER */
.feature-card-1:hover,
.feature-card-2:hover,
.feature-card-3:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #9eff00;
}

/* MOBILE TAP */
.feature-card-1:active,
.feature-card-2:active,
.feature-card-3:active {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* STAGGER DELAY FOR SCROLL */
.feature-card-1 { transition-delay: 0.1s; }
.feature-card-2 { transition-delay: 0.3s; }
.feature-card-3 { transition-delay: 0.5s; }

.green-line {
  width: 100%;               /* length of the line */
  height: 3px;               /* thickness */
  background-color: #39fa51; /* green line */
  margin: 5px 0 12px 0;      /* spacing above/below */
  border-radius: 2px;        /* slightly rounded ends */
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* white glow */
}

  

 
.about-stats {
  text-align: center;
  padding: 80px 20px;
  color: #fff;
}

.about-stats h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.about-text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #ccc;
  font-size: 16px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
}

.stat {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 60px;
  box-shadow: 0 8px 20px #ffff;
}

.stat .count {
  font-size: 36px;
  font-weight: 700;
  color: #39fa51;
}

.stat p {
  margin-top: 8px;
  color: #bbb;
  font-size: 14px;
}

.stat .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: #000;
  color: #39fa51; /* number color */
  font-size: 28px;
  font-weight: 700;
  border-radius: 50%;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    0 0 25px rgba(255, 255, 255, 0.15);
}
h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;   /* light but readable */
  line-height: 1.6;
  color: #d1d1d1;     /* soft light gray */
}
.feature-cta {
  text-decoration: none;
  color: #9eff00;
  position: relative;
}

/* hidden line */
.feature-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #9eff00;
  transition: width 0.3s ease;
}

/* show line on hover (desktop) */
.feature-cta:hover::after {
  width: 100%;
}

/* show line on tap (mobile) */
.learn-more:active::after {
  width: 100%;
}

.why-choose {
  background: #0f0f0f;
  padding: 100px 60px;
  color: #fff;
}

.why-container {
  max-width: 1200px;
  margin: auto;
}

.why-choose h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.why-choose h2 span {
  color: #9eff00;
}

.intro {
  max-width: 800px;
  color: #ccc;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.highlight {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 50px;
  color: #9eff00;
}

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

.why-card {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(158, 255, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.why-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  position: relative;
}

.why-card h3::after {
  content: "";
  width: 40px;
  height: 3px;
  background: #9eff00;
  display: block;
  margin-top: 8px;
  border-radius: 5px;
}

.why-card p {
  color: #bdbdbd;
  font-size: 15px;
  line-height: 1.6;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(158, 255, 0, 0.25);
}

.why-card-5 {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Title */
.why-card-5 h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
}

/* Remove the green line under h3 */
.why-card-5 h3::after {
  display: none;
}

/* Hyphen text style */
.why-card-5 p {
  color: #cfcfcf;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  padding-left: 18px;
}

/* Hyphen before each line */
.why-card-5 p::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #9eff00;
  font-weight: bold;
}

.our-process {
  background: #0f0f0f;
  color: #fff;
  padding: 100px 60px;
}

.process-container {
  max-width: 1200px;
  margin: auto;
}

.our-process h2 {
  font-size: 40px;
  margin-bottom: 20px;
  color: #9eff00;
}

.our-process .intro {
  max-width: 800px;
  font-size: 17px;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 50px;
}

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

.process-step {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(158, 255, 0, 0.15);
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.process-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(158, 255, 0, 0.25);
}

.step-number {
  width: 40px;
  height: 40px;
  background: #9eff00;
  color: #0f0f0f;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: absolute;
  top: -20px;
  left: -20px;
}

.process-step h3 {
  margin-top: 30px;
  margin-bottom: 12px;
  font-size: 20px;
}

.process-step p {
  color: #bdbdbd;
  font-size: 15px;
  line-height: 1.6;
}

.portfolio {
  background: #0f0f0f;
  color: #fff;
  padding: 100px 60px;
}

.portfolio-container {
  max-width: 1200px;
  margin: auto;
}

.portfolio h2 {
  font-size: 40px;
  margin-bottom: 20px;
  color: #9eff00;
}

.portfolio .intro {
  font-size: 17px;
  color: #ccc;
  max-width: 800px;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* Grid Layout */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

/* Portfolio Items */
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-item img,
.portfolio-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.portfolio-item:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(158, 255, 0, 0.25);
}

/* Overlay */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  text-align: center;
  padding: 20px;
  transition: opacity 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #9eff00;
}

.portfolio-overlay p {
  font-size: 15px;
  color: #ccc;
}

/* SERVICES */
.services {
  padding: 80px 60px;
  background: #0f0f0f;
  max-width: 900px;
  margin: auto;
}

.section-title {
  font-size: 36px;
  margin-bottom: 40px;
  color: #fff;
  position: relative;
}

.section-title::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #9eff00;
  display: block;
  margin-top: 10px;
}

.service-item {
  border-bottom: 1px solid rgba(158, 255, 0, 0.2);
}

.service-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.service-toggle:hover {
  color: #9eff00;
}

.icon {
  font-size: 26px;
  transition: transform 0.3s ease;
}

.service-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.service-content p {
  padding-bottom: 20px;
  color: #bdbdbd;
  line-height: 1.7;
  font-size: 15px;
}

.partners {
  padding: 80px 60px;
  background: #0f0f0f;
  color: #fff;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #9eff00;
  margin: 10px auto 0 auto;
}

.slider-container {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin: auto;
}

.slider-track {
  display: flex;
  transition: transform 0.4s ease;
}

.slider-track img {
  height: 60px;
  margin: 0 25px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.slider-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #9eff00;
  font-size: 24px;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, color 0.3s ease;
}

.slider-btn:hover {
  color:#5ce800 ;
}

.slider-btn.prev {
  left: 20px;
}

.slider-btn.next {
  right: 20px;
}
/* TESTIMONIALS */
.testimonials {
  padding: 80px 60px;
  background: #0f0f0f;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 20px;
  margin-top: 40px;
}

.testimonial-card {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 15px;
  color: #ccc;
}

/* =========================
   CONTACT SECTION
========================= */
.contact {
  padding: 80px 60px;
  background: #0f0f0f;
}

.contact h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
}

/* Green line under heading */
.contact h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #9eff00;
  margin-top: 10px;
  box-shadow: 0 0 12px rgba(158, 255, 0, 0.6);
}

/* =========================
   FORM
========================= */
#contactForm {
  margin-top: 35px;
  max-width: 520px;
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
}

#contactForm textarea {
  min-height: 120px;
  resize: vertical;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: #777;
}

/* Focus effect */
#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: #9eff00;
  box-shadow: 0 0 0 3px rgba(158, 255, 0, 0.15);
  background: #0d0d0d;
}

/* =========================
   BUTTON
========================= */
#contactForm button {
  margin-top: 10px;
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  background: #9eff00;
  color: #000;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.35s ease;
}

#contactForm button:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(158, 255, 0, 0.35);
}

#contactForm button:active {
  transform: translateY(-1px);
}

/* =========================
   FORM STATUS MESSAGE
========================= */
#formStatus {
  margin-top: 14px;
  font-size: 14px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
  .contact {
    padding: 60px 30px;
  }

  .contact h2 {
    font-size: 28px;
  }
}



@keyframes slideFade {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUpFade {
  to { 
    opacity: 1; 
    transform: translateY(0); /* move to original position */ 
  }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
/* FOOTER */
.footer {
  padding: 30px;
  text-align: center;
  background: #000;
  color: #777;
}#ffffff








/* ============================= */
/*        ABOUT PAGE CSS         */
/* ============================= */

/* About Hero */
.about-hero {
  min-height: 70vh;
}

/* About Story Section */
.about-story {
  padding: 80px 10%;
  background: #0f0f0f;
  color: #ffffff;
}

.about-container {
  max-width: 900px;
  margin: auto;
  line-height: 1.8;
}

.about-container h2 {
  margin-bottom: 20px;
}

.about-container p {
  margin-bottom: 15px;
  color: #dcdcdc;
}

/* Mission, Vision & Values */
.about-values {
  padding: 80px 10%;
  background: #121212;
  color: #ffffff;
}

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

.value-card {
  background: #181818;
  padding: 30px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-card h3 {
  margin-bottom: 12px;
  color: #9eff00;
}

.value-card p {
  color: #d0d0d0;
  line-height: 1.6;
}

/* About Stats tweak (reuse existing styles) */
.about-stats h2 {
  margin-bottom: 10px;
}

.about-stats .about-text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #dcdcdc;
}


/* ============================= */
/*       ABOUT TRUST SECTION     */
/* ============================= */
.about-trust {
  padding: 60px 10%;
  background: #0f0f0f;
  color: #ffffff;
  text-align: center;
}

.about-trust h2 {
  font-size: 36px;
  margin-bottom: 30px;
  color: #9eff00;
}

.about-trust ul {
  list-style: none;
  padding: 0;
  display: inline-block;
  text-align: left;
}

.about-trust ul li {
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 30px;
  line-height: 1.6;
}

.about-trust ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #9eff00;
  font-weight: bold;
}

/* ============================= */
/*       ABOUT TEAM SECTION      */
/* ============================= */
.about-team {
  padding: 80px 10%;
  background: #121212;
  color: #ffffff;
  text-align: center;
}

.about-team h2 {
  font-size: 36px;
  margin-bottom: 40px;
  color: #9eff00;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.team-card {
  background: #141414;
  padding: 25px;
  border-radius: 16px;
  text-align: center;
}

.team-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 15px;
}

.team-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.team-card p {
  font-size: 14px;
  color: #bdbdbd;
}
/* ============================= */
/*       END ABOUT TEAM CSS      */
/* ============================= */

/* ============================= */
/*       ABOUT SERVICES SECTION  */
/* ============================= */
.about-service {
  padding: 60px 10%;
  background: #0f0f0f;
  color: #fff;
  text-align: center;
}

.about-service h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #9eff00;
}

.about-service p {
  font-size: 18px;
  margin-bottom: 40px;
  color: #ccc;
}

.service-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.service-links li {
  background: #181818;
  padding: 15px 25px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-links li a {
  color: #9eff00;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.service-links li:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* ABOUT HERO */
.about-hero {
  height: 85vh;
  max-height: 600px;
  background: url("Images/about-hero-phone.jpg") center/cover no-repeat;
  position: relative;
}
/* Laptop & Desktop screens */
@media (min-width: 1024px) {
  .about-hero {
    background: url("Images/about.jpeg") center/cover no-repeat;
  }
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.about-hero .hero-content {
  position: relative;
  max-width: 700px;
  padding: 120px 60px;

}

.about-hero .hero-content h1 {
  font-size: 52px;
  margin: 20px 0;
  color: #fff;
}

.about-hero .hero-content p {
  color: #ccc;
  margin-bottom: 30px;
}

.about-hero .badge {
  background: #1a1a1a;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #9eff00;
}


.departments {
  background: #0f0f0f;
  color: #fff;
  padding: 80px 20px;
}

.departments-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.departments h2 {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.departments .intro {
  max-width: 700px;
  margin: 0 auto 50px;
  color: #cfcfcf;
}

.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.department-card {
  background: #151515;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}

.department-img {
  height: 220px;
  overflow: hidden;
}

.department-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.department-card:hover img {
  transform: scale(1.08);
}

.department-content {
  padding: 25px;
  text-align: left;
}

.department-content h3 {
  margin-bottom: 10px;
  color: #9eff00;
}

.department-content p {
  font-size: 0.95rem;
  color: #d6d6d6;
  margin-bottom: 15px;
}

.department-content ul {
  list-style: none;
  padding: 0;
}

.department-content ul li {
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #bfbfbf;
}

.department-content ul li::before {
  content: "✔";
  color: #9eff00;
  margin-right: 8px;
}
.department-summary {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding: 45px 55px;
  background: #141414;
  border-radius: 18px;
}

.department-summary h3 {
  font-size: 26px;
  margin-bottom: 20px;
  color: #9eff00;
}

.department-summary p {
  font-size: 15.5px;
  line-height: 1.85;
  color: #d0d0d0;
  margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 768px) {
  .department-summary {
    padding: 30px 22px;
  }

  .department-summary h3 {
    font-size: 22px;
  }
}


/* ============================= */
/*       SERVICES HERO           */
/* ============================= */
.services-hero {
  height: 80vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
  color: #ffffff;
  text-align: center;
  padding: 0 20px;
  overflow: hidden;
}

.services-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.services-hero .hero-content {
  position: relative;
  max-width: 800px;
  z-index: 2;
}

.services-hero .badge {
  display: inline-block;
  background: #141414;
  color: #9eff00;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 25px;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.services-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #fff;
}

.services-hero p {
  font-size: 18px;
  color: #d0d0d0;
  line-height: 1.6;
}

/* ============================= */
/*       SERVICES LINKS          */
/* ============================= */
.about-services {
  padding: 70px 10%;
  background: #121212;
  color: #fff;
  text-align: center;
}

.about-services h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #9eff00;
}

.about-services p {
  font-size: 18px;
  margin-bottom: 40px;
  color: #d0d0d0;
}

.services-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.services-links li {
  background: #151515;
  padding: 15px 25px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.services-links li a {
  color: #9eff00;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.services-links li:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}

/* ============================= */
/*       SERVICE DETAIL CARDS     */
/* ============================= */
.service-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.service-card {
  background: #151515;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #9eff00;
}

.service-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #d0d0d0;
}

/* ============================= */
/*          RESPONSIVE           */
/* ============================= */
@media (max-width: 768px) {
  .services-hero h1 {
    font-size: 36px;
  }

  .services-hero p {
    font-size: 16px;
  }

  .services-links li {
    padding: 12px 20px;
  }

  .service-card {
    padding: 20px;
  }
}

/* ============================= */
/* DETAILED SERVICES - LONG FORM  */
/* ============================= */
.services-detailed-long {
  background: #0f0f0f;
  color: #d0d0d0;
  padding: 80px 10%;
}

.services-detailed-long h2 {
  text-align: center;
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 25px;
}

.services-detailed-long p {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 40px;
  line-height: 1.8;
  color: #ccc;
}

.service-item {
  margin-bottom: 50px;
}

.service-item h3 {
  font-size: 28px;
  color: #9eff00;
  margin-bottom: 15px;
}

.service-item p {
  font-size: 16px;
  color: #d6d6d6;
  line-height: 1.85;
  margin-bottom: 15px;
}

.learn-more-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #9eff00;
  color: #0f0f0f;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.learn-more-btn:hover {
  background: #7bd400;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* MOBILE */
@media (max-width: 768px) {
  .services-detailed-long h2 {
    font-size: 28px;
  }

  .service-item h3 {
    font-size: 22px;
  }

  .service-item p {
    font-size: 15px;
  }

  .learn-more-btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}




/* ============================= */
/*  CONSTRUCTION SECTIONS LAYOUT */
/* ============================= */

/* ============================= */
/*     HOME CONSTRUCTION HERO    */
/* ============================= */
.home-const-hero {
  display: flex;
  align-items: center;        /* Vertically center content */
  justify-content: flex-start; /* Align content to the left */
  padding: 80px 10%;          /* Space around content */
  min-height: 500px;          /* Ensure hero height */
  border-radius: 25px;        /* Rounded corners */
  position: relative;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 60%, #9eff00 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5); /* optional subtle shadow */
}

.home-const-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* dark fade overlay */
  border-radius: 25px;
}

.home-const-hero .hero-content {
  position: relative;
  max-width: 700px;
  z-index: 2;
}

.home-const-hero h1 {
  font-size: 48px;
  color: #9eff00;
  margin-bottom: 20px;
  line-height: 1.2;
}

.home-const-hero p {
  font-size: 18px;
  color: #d0d0d0;
  line-height: 1.6;
  margin-bottom: 25px;
}

.home-const-hero .hero-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #9eff00;
  color: #0f0f0f;
  border-radius: 25px;
  font-weight
}  
  
  
.construction-type {
  background: #121212;
  padding: 80px 10%;
  color: #d0d0d0;
}

.construction-type:nth-child(even) {
  background: #0f0f0f;
}

/* FLEX LAYOUT */
.construction-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap; /* ensures proper wrapping on smaller screens */
}

/* TEXT */
.construction-text {
  flex: 1;
}

/* IMAGE */
.construction-media {
  flex: 1;
  margin: 0; /* reset previous margins */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.construction-media img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
  border-radius: 18px;
}

.construction-media:hover img {
  transform: scale(1.05);
}

/* TEXT STYLING */
.construction-type h3,
.construction-info h2 {
  font-size: 30px;
  color: #9eff00;
  margin-bottom: 20px;
}
.construction-info ,
.construction-type p {
  font-size: 16px;
  line-height: 1.85;
  color: #d6d6d6;
  margin-bottom: 16px;
  max-width: 900px;
}
.construction-info p {
  font-weight: 500;
}

/* ============================= */
/* IMPORTANT NOTE */
.construction-note {
  background: #0f0f0f;
  padding: 80px 10%;
  text-align: center;
}

.construction-note h3 {
  font-size: 30px;
  color: #9eff00;
  margin-bottom: 20px;
}

.construction-note p {
  font-size: 17px;
  color: #ccc;
  line-height: 1.85;
  max-width: 850px;
  margin: 0 auto;
}

/* ============================= */
/* RESPONSIVE STACKING */
@media (max-width: 1024px) {
  .construction-layout {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .construction-info h2 {
    font-size: 28px;
  }

  .construction-type h3,
  .construction-note h3 {
    font-size: 22px;
  }

  .construction-type p,
  .construction-note p,
  .construction-info p {
    font-size: 15px;
  }

  .construction-info,
  .construction-type,
  .construction-note {
    padding: 60px 7%;
  }
}
/* LEFT ALIGN TEXT FOR DETAILED SERVICES */
.services-detailed-long {
  text-align: left;
}

.services-detailed-long h2,
.services-detailed-long h3,
.services-detailed-long p {
  text-align: left;
}



/* ===================================== */
/*  RENOVATION & REMODELING – HERO AREA  */
/* ===================================== */

.home-const-hero {
  position: relative;
  min-height: 80vh;
  padding: 120px 10%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(
    135deg,
    #0f0f0f 0%,
    #121212 55%,
    #1f3d1a 100%
  );
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}

.home-const-hero .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at left,
    rgba(158, 255, 0, 0.15),
    transparent 60%
  );
}

.hero-content {
  position: relative;
  max-width: 650px;
  color: #d0d0d0;
  text-align: left;
}

.hero-content .badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(158, 255, 0, 0.15);
  color: #9eff00;
  font-size: 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.hero-content h1 {
  font-size: 42px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 18px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #cccccc;
}


/* ===================================== */
/*  LONG SERVICE EXPLANATION SECTION     */
/* ===================================== */

.services-detailed-long {
  background: #0f0f0f;
  padding: 90px 10%;
  color: #d0d0d0;
}

.services-detailed-long h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 25px;
  text-align: left;
}

.services-detailed-long > .services-container > p {
  max-width: 900px;
  font-size: 18px;
  line-height: 1.9;
  color: #cfcfcf;
  margin-bottom: 50px;
}

/* Individual renovation steps */
.service-item {
  margin-bottom: 45px;
  padding-left: 18px;
  border-left: 3px solid rgba(158, 255, 0, 0.4);
}

.service-item h3 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 12px;
}

.service-item p {
  font-size: 16px;
  line-height: 1.85;
  color: #d6d6d6;
  max-width: 850px;
}

/* CTA button */
.learn-more-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 26px;
  background: #9eff00;
  color: #0f0f0f;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.learn-more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(158, 255, 0, 0.3);
}


/* ===================================== */
/*  RENOVATION PROCESS (TEXT + IMAGE)    */
/* ===================================== */

.construction-type {
  background: #121212;
  padding: 90px 10%;
}

.construction-type:nth-child(even) {
  background: #0f0f0f;
}

.construction-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.construction-text {
  flex: 1;
}

.construction-text h3 {
  font-size: 30px;
  color: #9eff00;
  margin-bottom: 20px;
}

.construction-text p {
  font-size: 16px;
  line-height: 1.9;
  color: #d6d6d6;
  margin-bottom: 14px;
}

.construction-media {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  background: #151515;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

.construction-media img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.construction-media:hover img {
  transform: scale(1.05);
}


/* ===================================== */
/*  IMPORTANT NOTE SECTION               */
/* ===================================== */

.construction-note {
  background: #0f0f0f;
  padding: 90px 10%;
  text-align: center;
}

.construction-note h3 {
  font-size: 30px;
  color: #9eff00;
  margin-bottom: 20px;
}

.construction-note p {
  max-width: 850px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.85;
  color: #cccccc;
}


/* ===================================== */
/*  RESPONSIVE (MOBILE FRIENDLY)         */
/* ===================================== */

@media (max-width: 768px) {

  .home-const-hero {
    padding: 100px 7%;
  }

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

  .services-detailed-long h2 {
    font-size: 26px;
  }

  .construction-layout {
    flex-direction: column;
    gap: 35px;
  }

  .construction-text h3 {
    font-size: 22px;
  }

  .services-detailed-long,
  .construction-type,
  .construction-note {
    padding: 70px 7%;
  }
}



/* ============================= */
/*        HERO SECTION           */
/* ============================= */

.home-const-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    #9eff00 50%,
    #ffff 30%,
    #0b1a00 45%,
    #9eff00 120%
  );
  border-radius: 24px;
  margin: 40px 5%;
  padding: 80px 6%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;

  /* KEY FIX */
  min-height: 380px;
  max-height: 520px;
}

.home-const-hero .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at left,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.9)
  );
  z-index: 1;
}

.home-const-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  text-align: left;
}

.home-const-hero h1 {
  font-size: 42px;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.home-const-hero p {
  font-size: 17px;
  color: #d0d0d0;
  line-height: 1.8;
}

/* ============================= */
/*        RESPONSIVE             */
/* ============================= */

@media (max-width: 1024px) {
  .home-const-hero {
    min-height: 340px;
    padding: 70px 6%;
  }

  .home-const-hero h1 {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .home-const-hero {
    margin: 20px 4%;
    padding: 80px 6%;
    min-height: auto;
  }

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

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

/* ===== SERVICES DETAILED LONG SECTION ===== */
/* ===== STRUCTURAL HERO ===== */
.struct-hero {
  position: relative;
  height: 90vh;
  max-height: 550px;
  background: url("Images/structural-hero.jpg") center/cover no-repeat;
  border-radius: 0 0 30px 30px;
  display: flex;
  align-items: center;
  padding: 0 10%;
  color: #fff;
}

.struct-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    
    rgba(158, 255, 0, 0.2),
    rgba(0, 0, 0, 0.9),
    #9eff00
  );
  border-radius: inherit;
}

.struct-hero-content {
  position: relative;
  max-width: 650px;
}

.struct-badge {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(158, 255, 0, 0.15);
  color: #9eff00;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 20px;
}

/* ===== STRUCTURAL SECTIONS ===== */
.struct-section {
  background: #0f0f0f;
  padding: 90px 10%;
}

.struct-wrap {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: auto;
}

.struct-text {
  flex: 1;
}

.struct-text h2,
.struct-text h3 {
  color: #9eff00;
  margin-bottom: 18px;
}

.struct-text p {
  color: #d6d6d6;
  line-height: 1.85;
  font-size: 16px;
}

.struct-image {
  flex: 1;
}

.struct-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

/* CTA */
.struct-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 30px;
  background: #9eff00;
  color: #0f0f0f;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .struct-wrap {
    flex-direction: column;
    gap: 35px;
  }

  .struct-hero {
    height: 60vh;
    padding: 0 6%;
  }

  .struct-section {
    padding: 70px 6%;
  }
}

/* ===== PROJECT MANAGEMENT HERO ===== */
.pm-hero {
  position: relative;
  background: #0f0f0f;
  padding: 120px 10%;
  border-radius: 30px;
  margin: 40px 5%;
  overflow: hidden;
}

.pm-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(158,255,0,0.15),
    rgba(0,0,0,0.85)
  );
}

.pm-hero-content {
  position: relative;
  max-width: 800px;
}

.pm-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(158,255,0,0.15);
  color: #9eff00;
  font-size: 14px;
  margin-bottom: 15px;
}

.pm-hero h1 {
  font-size: 42px;
  color: #ffffff;
  margin-bottom: 18px;
}

.pm-hero p {
  font-size: 18px;
  line-height: 1.8;
  color: #d0d0d0;
}


/* ===== SECTIONS ===== */
.pm-section {
  background: #0f0f0f;
  padding: 90px 10%;
}

.pm-container {
  max-width: 1200px;
  margin: auto;
}

.pm-container h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 25px;
}

.pm-container h3 {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 15px;
}

.pm-container p {
  font-size: 16px;
  line-height: 1.9;
  color: #d6d6d6;
  max-width: 900px;
}


/* ===== IMAGE + TEXT LAYOUT ===== */
.pm-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.pm-text {
  flex: 1;
}

.pm-image {
  flex: 1;
}

.pm-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}


/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .pm-layout {
    flex-direction: column;
  }

  .pm-hero {
    padding: 80px 8%;
  }

  .pm-hero h1 {
    font-size: 30px;
  }

  .pm-container h2 {
    font-size: 28px;
  }

  .pm-container h3 {
    font-size: 22px;
  }

  .pm-container p {
    font-size: 15px;
  }
}

/* ===== HERO SECTION ===== */
.finishing-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    #9eff00 50%,
    #ffff 30%,
    #0b1a00 45%,
    #9eff00 120%
  );
  height: 90vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.hero-content {
  position: relative;
  max-width: 800px;
  color: #ffffff;
}

.hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  color: #9eff00;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 20px;
  line-height: 1.8;
  color: #d6d6d6;
  margin-bottom: 40px;
}

/* HERO POINTS */
.hero-points {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-point {
  padding: 14px 22px;
  border: 2px solid rgba(158, 255, 0, 0.4);
  border-radius: 10px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
}


/* ===== FINISHING DETAILS ===== */
.finishing-details {
  background: #0b0b0b;
  padding: 90px 10%;
  color: #d0d0d0;
}

.finishing-details h2 {
  font-size: 38px;
  color: #9eff00;
  margin-bottom: 20px;
}

.section-intro {
  max-width: 850px;
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 60px;
  color: #cfcfcf;
}

/* GRID */
.finishing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

.finishing-box {
  background: #121212;
  padding: 35px;
  border-radius: 18px;
  border: 2px solid rgba(158, 255, 0, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.finishing-box h3 {
  color: #9eff00;
  font-size: 22px;
  margin-bottom: 15px;
}

.finishing-box p {
  font-size: 16px;
  line-height: 1.8;
  color: #d4d4d4;
}

.finishing-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(158, 255, 0, 0.35);
}

/* ===== FINISHING GALLERY ===== */
.finishing-gallery {
  background: #0f0f0f;
  padding: 90px 10%;
  color: #d0d0d0;
}

.finishing-gallery h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 20px;
  text-align: left;
}

.finishing-gallery p {
  max-width: 900px;
  font-size: 18px;
  line-height: 1.9;
  color: #cfcfcf;
  margin-bottom: 50px;
}

/* GRID */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* IMAGE BOX */
.gallery-box {
  background: #121212;
  border: 2px solid rgba(158, 255, 0, 0.25);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HOVER EFFECT */
.gallery-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(158, 255, 0, 0.35);
}

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

@media (max-width: 600px) {
  .finishing-gallery {
    padding: 60px 6%;
  }

  .finishing-gallery h2 {
    font-size: 28px;
  }

  .finishing-gallery p {
    font-size: 15px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== WHY CHOOSE US ===== */
.why-choose-finishing {
  background: #0f0f0f;
  padding: 90px 10%;
}

.why-choose-finishing h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 60px;
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.why-box {
  background: linear-gradient(145deg, #121212, #0a0a0a);
  padding: 40px;
  border-radius: 20px;
  position: relative;
  border-left: 5px solid #9eff00;
}

.why-box span {
  font-size: 42px;
  font-weight: 800;
  color: rgba(158, 255, 0, 0.3);
}

.why-box h3 {
  margin-top: 10px;
  font-size: 22px;
  color: #ffffff;
}

.why-box p {
  margin-top: 15px;
  line-height: 1.8;
  color: #d4d4d4;
}

/* =========================
   MOBILE RESPONSIVENESS
========================= */
@media (max-width: 768px) {

  /* ===== GLOBAL PADDING FIX ===== */
  section {
    padding-left: 6%;
    padding-right: 6%;
  }

  /* ===== HERO SECTION ===== */
  .finishing-hero {
    height: 90vh;
    padding: 120px 6% 80px;
  }

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

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

  .hero-points {
    flex-direction: column;
    gap: 15px;
  }

  .hero-point {
    text-align: center;
  }

  /* ===== FINISHING DETAILS ===== */
  .finishing-details h2 {
    font-size: 30px;
  }

  .section-intro {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .finishing-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .finishing-box {
    padding: 28px;
  }

  /* ===== WHY CHOOSE US ===== */
  .why-choose-finishing h2 {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .why-box {
    padding: 30px;
  }

  .why-box span {
    font-size: 36px;
  }

  .why-box h3 {
    font-size: 20px;
  }

  /* ===== IMAGE GALLERY ===== */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .gallery-box {
    border-radius: 14px;
  }

  .gallery-box img {
    height: 220px;
    object-fit: cover;
  }
}

@media (min-height: 1024px) {
  
 .finishing-hero {
  height: 70vh;
  max-height: 500px;
  
 }
}

/* ===== INFRA HERO ===== */
.infra-hero {
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  color: #ffffff;
  border-radius: 12px;
}

.infra-hero .hero-overlay-infra {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(158, 255, 0, 0.3), rgba(15, 15, 15, 0.8));
  border-radius: 12px;
  z-index: 1;
}

.infra-hero .hero-content-infra {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.infra-hero h1 {
  font-size: 55px;
  color: #9eff00;
  margin-bottom: 20px;
}

.infra-hero p {
  font-size: 18px;
  line-height: 1.8;
  color: #d0d0d0;
  margin-bottom: 30px;
}

.infra-hero .hero-points-infra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.infra-hero .hero-point-infra {
  background: rgba(15, 15, 15, 0.7);
  padding: 12px 30px;
  border: 2px solid #9eff00;
  font-weight: 600;
 margin-left: 40px;
 box-shadow: 8px, #9eff00;
 margin-right: 40px;
  color: #9eff00;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infra-hero .hero-point-infra:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(158, 255, 0, 0.3);
}

/* ===== Responsive ===== */
@media screen and (max-width: 1024px) {
  .infra-hero { height: 500px; }
  .infra-hero h1 { font-size: 50px; }
}

@media screen and (max-width: 768px) {
  .infra-hero { height: 400px; padding: 0 5%; }
  .infra-hero h1 { font-size: 50px; }
  .infra-hero p { font-size: 16px; }
  .infra-hero .hero-points-infra { flex-direction: column; }
}

@media screen and (max-width: 480px) {
  .infra-hero { height: 350px; }
  .infra-hero h1 { font-size: 24px; }
  .infra-hero p { font-size: 14px; }
  .infra-hero .hero-point-infra { padding: 10px 18px; font-size: 14px; }
}
/* ===== CIVIL & INFRASTRUCTURE INTRODUCTION ===== */
.civil-intro {
  background: #0f0f0f;
  padding: 80px 10%;
  color: #d0d0d0;
}

.civil-intro h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 20px;
  text-align: center;
}

.civil-intro p {
  font-size: 18px;
  line-height: 1.9;
  color: #cfcfcf;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.civil-intro .highlight {
  color: #9eff00;
  font-weight: 600;
}

/* ===== CIVIL & INFRASTRUCTURE SERVICES BOXES ===== */
.civil-services {
  background: #0f0f0f;
  padding: 80px 10%;
  color: #d0d0d0;
}

.civil-services .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.service-box {
  background: rgba(15, 15, 15, 0.85);
  padding: 25px 20px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(158, 255, 0, 0.3);
}

.service-box h3 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 15px;
}

.service-box p {
  font-size: 16px;
  line-height: 1.85;
  color: #d6d6d6;
}

.service-box .highlight {
  color: #9eff00;
  font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .civil-services .services-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .civil-intro,
  .civil-services {
    padding: 60px 5%;
  }

  .civil-intro h2,
  .civil-services .service-box h3 {
    font-size: 28px;
  }

  .civil-intro p,
  .civil-services .service-box p {
    font-size: 15px;
  }
}

/* CIVIL & INFRASTRUCTURE GALLERY */
.civil-gallery {
  background: #0f0f0f;
  padding: 80px 10%;
  color: #d0d0d0;
}

.civil-gallery h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 20px;
  text-align: left;
}

.civil-gallery p {
  font-size: 18px;
  line-height: 1.8;
  max-width: 900px;
  color: #cfcfcf;
  margin-bottom: 50px;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.gallery-box {
  border: 3px solid rgba(158, 255, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(158, 255, 0, 0.3);
}

.gallery-box:hover img {
  transform: scale(1.05);
}

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

@media screen and (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}


/* WHY CHOOSE CORE BUILDERS - INFRASTRUCTURE */
.why-choose-infra {
  background: #0f0f0f;
  padding: 80px 10%;
  color: #d0d0d0;
}

.why-choose-infra h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 40px;
  text-align: center;
}

.why-choose-infra .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.why-choose-infra .why-box {
  background: rgba(15, 15, 15, 0.85);
  padding: 25px 20px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-infra .why-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(158, 255, 0, 0.3);
}

.why-choose-infra .why-box span {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #9eff00;
  margin-bottom: 10px;
}

.why-choose-infra .why-box h3 {
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 12px;
}

.why-choose-infra .why-box p {
  font-size: 16px;
  line-height: 1.6;
  color: #d6d6d6;
}

/* ===== MOBILE RESPONSIVE ONLY ===== */
@media screen and (max-width: 768px) {
  .why-choose-infra {
    padding: 60px 5%;
  }

  .why-choose-infra h2 {
    font-size: 28px;
  }

  .why-choose-infra .why-grid {
    grid-template-columns: 1fr; /* stack boxes vertically */
    gap: 20px;
  }

  .why-choose-infra .why-box h3 {
    font-size: 20px;
  }

  .why-choose-infra .why-box p {
    font-size: 15px;
  }

  .why-choose-infra .why-box span {
    font-size: 18px;
  }
}

@media screen and (max-height: 768px) {
  
  .infra-hero{
    height: 90vh;
    max-height: 600px;
  }
}

@media screen and (min-height: 1024px) {
  
  .infra-hero{
    height: 90vh;
    max-height: 460px;
  }
}

/* ===== PROJECTS HERO ===== */
.projects-hero {
  position: relative;
  background: url('Images/projects-hero.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  color: #ffffff;
}

.projects-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(158,255,0,0.3), rgba(15,15,15,0.8));
  z-index: 1;
}

.projects-hero .hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.projects-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #9eff00;
}

.projects-hero p {
  font-size: 18px;
  line-height: 1.8;
  max-width: 850px;
  margin: 0 auto 30px;
  color: #d0d0d0;
}

.projects-hero .hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.projects-hero .hero-point {
  background: rgba(15,15,15,0.7);
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  color: #9eff00;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.projects-hero .hero-point:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(158,255,0,0.3);
}

/* ===== PROJECT CARDS ===== */
.projects-grid {
  padding: 60px 10%;
}

.projects-grid h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 30px;
  text-align: center;
}

.project-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.project-card {
  flex: 0 0 300px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card img {
  width: 100%;
  display: block;
}

.project-card .project-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(15,15,15,0.7);
  padding: 15px;
  text-align: center;
  color: #9eff00;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(158,255,0,0.3);
}

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

/* ===== CALL TO ACTION ===== */
.projects-cta {
  text-align: center;
  padding: 80px 10%;
  background: #0f0f0f;
  color: #d0d0d0;
}

.projects-cta h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 20px;
}

.projects-cta p {
  font-size: 18px;
  margin-bottom: 30px;
}

.projects-cta .cta-btn {
  background: #9eff00;
  color: #0f0f0f;
  padding: 15px 35px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.projects-cta .cta-btn:hover {
  transform: translateY(-3px);
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .projects-hero h1 {
    font-size: 38px;
  }
  .projects-hero p {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .projects-hero {
    height: 80vh;
    padding: 0 5%;
  }
  .projects-hero h1 {
    font-size: 28px;
  }
  .projects-hero .hero-points {
    flex-direction: column;
  }
  .project-cards {
    gap: 15px;
  }
  .project-card {
    flex: 0 0 250px;
  }
}

/* ===== PROJECTS DESCRIPTION ===== */
.projects-description {
  background: #0f0f0f;
  color: #d0d0d0;
  padding: 80px 10%;
  border-radius: 12px;
  font-family: Arial, sans-serif;
}

.projects-description h2 {
  font-size: 36px;
  color: #9eff00;
  margin-bottom: 40px;
  text-align: center;
}

.project-texts p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.project-texts .highlight {
  color: #9eff00;
  font-weight: 600;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .projects-description {
    padding: 60px 8%;
  }

  .projects-description h2 {
    font-size: 32px;
  }

  .project-texts p {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .projects-description {
    padding: 50px 5%;
  }

  .projects-description h2 {
    font-size: 28px;
  }

  .project-texts p {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ===== FAQ SECTION ===== */
.faq-sec {
  background: #0f0f0f;
  color: #d0d0d0;
  padding: 80px 10%;
  font-family: Arial, sans-serif;
}

.faq-sec h2 {
  text-align: center;
  color: #9eff00;
  font-size: 36px;
  margin-bottom: 50px;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ===== FAQ ITEM ===== */
.faq-item {
  background: rgba(15, 15, 15, 0.85);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.faq-item.active {
  box-shadow: 0 10px 25px rgba(158,255,0,0.3);
}

/* ===== FAQ BUTTON ===== */
.faq-btn {
  width: 100%;
  background: #1a1a1a;
  color: #9eff00;
  font-size: 18px;
  font-weight: 600;
  padding: 18px 20px;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.faq-btn:hover {
  background: rgba(15, 15, 15, 0.95);
}

.faq-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
}

/* ===== FAQ BODY ===== */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 20px;
  background: rgba(15, 15, 15, 0.7);
}

.faq-body p {
  margin: 15px 0;
  line-height: 1.6;
  color: #d0d0d0;
}

.highlight {
  color: #9eff00;
  font-weight: 600;
}

/* ===== ICON ROTATION WHEN OPEN ===== */
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1024px) {
  .faq-sec h2 {
    font-size: 32px;
  }
  .faq-btn {
    font-size: 16px;
    padding: 16px 18px;
  }
  .faq-body p {
    font-size: 15px;
  }
}

@media screen and (max-width: 768px) {
  .faq-sec {
    padding: 50px 5%;
  }
  .faq-sec h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .faq-btn {
    font-size: 15px;
    padding: 14px 16px;
  }
  .faq-body p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ===== CONTACT FORM SELECT ===== */
.contact select[name="service"] {
  width: 100%;
  padding: 13px 15px;
  margin: 10px 0;
  border-radius: 10px;
  background-color: #1a1a1a; /* Dark background like other inputs */
  color:rgb(172,172,172); /* Light text */
  font-size: 16px;
  border: 2px solid rgba(29,210,20,0.172); /* Neon green border */
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Change border and text color on focus */
.contact select[name="service"]:focus {
  border-color: rgba(29,210,20,0.172);;
  color: rgb(172,172,172);
  background-color: #0f0f0f;
}

/* Style the placeholder option */
.contact select[name="service"] option[disabled] {
  color: #888; /* Light gray for placeholder text */
}

/* Optional: hover effect */
.contact select[name="service"]:hover {
  border-color:rgb(255,255,255);
}

/* ===== CONTACT HERO ===== */
.contact-hero {
  background: #373737aa;
  border-radius: 8px solid #9eff00;
  color: #d0d0d0;
  shadow: 8px #9eff00;
  text-align: center;
  padding: 100px 10%;
}

.contact-hero h1 {
  font-size: 48px;
  color: #9eff00;
  margin-bottom: 20px;
}

.contact-hero p {
  font-size: 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  color: #d0d0d0;
}


/* ===== CONTACT BODY SECTION ===== */
.contact-body-sec {
  background: #0f0f0f; /* matches your project sections */
  color: #d0d0d0;
  padding: 80px 10%;
  font-family: Arial, sans-serif;
}

.contact-body-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: justify;
}

.contact-body {
  font-size: 18px;
  line-height: 1.8;
  color: #d0d0d0;
}

/* Highlight important words */
.contact-body .highlight {
  color: #9eff00;
  font-weight: 600;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .contact-body {
    font-size: 17px;
    line-height: 1.7;
  }
}

@media screen and (max-width: 768px) {
  .contact-body-sec {
    padding: 50px 5%;
  }

  .contact-body {
    font-size: 16px;
    line-height: 1.6;
  }
}








/* ===== BLOG HERO ===== */
.blog-hero {
  background: #0f0f0f;
  color: #9eff00;
  text-align: center;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}

.blog-hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.blog-hero p {
  font-size: 18px;
  color: #d0d0d0;
}


.navbar .logo {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
}

/* HAMBURGER */
.hamburger {
  display: none;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  z-index: 1000;
}

.hamburger div {
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger active = X */
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {
  opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* NAV MENU */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 20px;
  margin-left: auto;
  align-items: center;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: all 0.3s ease;
}

.nav-menu a:hover {
  background-color: #9eff00;
  color: black;
  border-radius: 4px;
}

/* CTA BUTTON */
.cta {
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: #9eff00;
  color: #111;
  font-weight: bold;
  transition: 0.3s;
}
.cta:hover {
  background: #7cc600;
}

/* DROPDOWN MENU */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #222;
  display: none;
  flex-direction: column;
  min-width: 220px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  display: flex;
}

.dropdown-menu li a {
  padding: 12px 16px;
  color: #fff;
}

.dropdown-menu li a:hover {
  background: #9eff00;
  color: #111;
}

/* --------------- MOBILE RESPONSIVE ---------------- */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 65%;
    height: 100vh;
    background-color: #000000ce;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 60px;
    transition: 0.3s;
    border-radius: 16px;
    z-index: 999;
  }

  .nav-menu.active {
    left: 0;
  }

  /* Disable hover for mobile */
  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .dropdown-menu {
    position: static;
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
  }

  .nav-menu a {
    width: 100%;
    padding: 12px 0;
  }

  .cta {
    margin: 0;
    width: 60%;
    text-align: center;
  }
}


/* ===== Blog Section ===== */
.blog-section {
  background: #1a1a1a;
  margin: 0;
  color: #d0d0d0;
  min-height: 100vh;   /* full screen height */
  padding: 60px 20px;  /* normal spacing */
  font-family: Arial, sans-serif;
}

.blog-section h1 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 10px;
  color: #7cbf3b; /* dimmed highlight green */
}

.blog-section .subtitle {
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
  color: #bbbbbb; /* softer secondary text */
}

.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.blog-card {
  background: #2a2a2a; /* card dark gray */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card-content {
  padding: 20px;
}

.blog-card-content h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #d0d0d0; /* maintain contrast */
}

.blog-card-content p {
  font-size: 16px;
  color: #cccccc; /* softer gray for readability */
  line-height: 1.6;
  margin-bottom: 15px;
}

.blog-card-content a {
  display: inline-block;
  color: #7cbf3b; /* highlight green */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.blog-card-content a:hover {
  color: #5e9530; /* darker green on hover */
  text-decoration: underline;
}

/* Mobile responsive */
@media screen and (max-width: 1024px) {
  .blog-section {
    padding: 50px 5%;
  }

  .blog-section h1 {
    font-size: 36px;
  }

  .blog-section .subtitle {
    font-size: 16px;
  }

  .blog-card-content h2 {
    font-size: 20px;
  }

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

@media screen and (max-width: 768px) {
  .blog-card-content h2 {
    font-size: 18px;
  }

  .blog-card-content p {
    font-size: 14px;
  }
}

/* ===== Single Blog Page ===== */
.single-blog-section {
  background: #1a1a1a; /* dark gray background */
  color: #d0d0d0;       /* main text color */
  padding: 60px 10%;
  font-family: Arial, sans-serif;
}

.single-blog-section h1 {
  font-size: 42px;
  color: #7cbf3b; /* dimmed highlight green */
  text-align: center;
  margin-bottom: 20px;
}

.single-blog-section .date {
  text-align: center;
  color: #bbbbbb;
  font-size: 16px;
  margin-bottom: 40px;
}

.single-blog-section img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 30px;
}

.single-blog-section .content {
  font-size: 18px;
  line-height: 1.8;
  color: #cccccc;
}

.single-blog-section .content p {
  margin-bottom: 20px;
}

.single-blog-section .content a {
  color: #7cbf3b;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.single-blog-section .content a:hover {
  color: #5e9530; /* darker green on hover */
  text-decoration: underline;
}

/* Navigation buttons (prev / next) */
.single-blog-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.single-blog-nav a {
  background: #2a2a2a;
  color: #d0d0d0;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.single-blog-nav a:hover {
  background: #3a3a3a;
  color: #7cbf3b;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .single-blog-section {
    padding: 50px 5%;
  }

  .single-blog-section h1 {
    font-size: 36px;
  }

  .single-blog-section .content {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .single-blog-section h1 {
    font-size: 30px;
  }

  .single-blog-section .content {
    font-size: 15px;
  }

  .single-blog-nav {
    flex-direction: column;
    gap: 15px;
  }

  .single-blog-nav a {
    text-align: center;
  }
}