.navbar-nav .nav-item {
          margin-right: 2.0rem; /* Adjust spacing as needed */
        }
        
        /* Optional: remove extra margin from last item */
        .navbar-nav .nav-item:last-child {
          margin-right: 0;
        }
        .hero {
      background: url('hero-bg.avif') no-repeat center center/cover; 
      height: 80vh; /* Adjust height */
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .hero::before {
      content: ""; /* required for ::before to render */
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(255,255,255,0.6); /* White overlay for readability */

    }
    .hero-text-tight {
      position: relative;
      z-index: 1;
      text-align: left;       /* Align texts to the left */
      padding-left: 1rem;  /* Add a little padding from the edge */
      padding-right: 1rem;
}
        .hero-text-tight h1 {
      font-size: clamp(2rem, 5vw, 4rem); /* scales between 2rem and 4rem based on screen width */
      font-weight: 700;       /* Make bold */
      line-height: 1.0;
      color: #52658F;
    }
    
    .hero-text-tight p {
      line-height: 1.0;
       font-size: clamp(1rem, 3vw, 1.7rem); /* scales between 1rem and 1.7rem */
      font-weight: 600;       /* Slightly bold */
      color: #52658F;
    }
    
    .hero-text-tight p.small {
      font-size: clamp(0.9rem, 2.5vw, 1.4rem); /* scales between 0.9rem and 1.4rem */
    }
    
    .hero .container {
      position: relative; /* Keep text above overlay */
      z-index: 1;
    }
         .whatsapp-float {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background-color: #25D366;
       color: #fff;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       text-align: center;
       font-size: 28px;
       line-height: 60px;
       z-index: 999;
       text-decoration: none;
     }
  .stats-section strong {
      font-size: 3em; /* Adjust the size as needed */
    }

  .stats-section {
    color: #52658F; /* Customize as needed */
 }

    /* Default (desktop) */
.stat-number {
  font-size: 2rem;   /* Large for desktop */
  font-weight: bold;
  color: #52658F;
}

/* Medium screens (tablets) */
@media (max-width: 991px) {
  .stat-number {
    font-size: 1.75rem;
  }
}

/* Small screens (mobile) */
@media (max-width: 576px) {
  .stat-number {
    font-size: 1.4rem;
  }
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  font-color: #52658F; /* Optional: different color for the stat numbers */
}

/* ✅ Responsive: Smaller font size on small screens */
@media (max-width: 576px) {
  .stat-number {
    font-size: 1.25rem;
  }

  .stats-section {
    font-size: 0.85rem;
  }
}

    
    body {
      font-family: Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }

    h1, h2, h3 {
      margin-bottom: 10px;
    }

    .card {
      padding: 20px;
      background: #eee;
      text-align: center;
      border-radius: 8px;
      height: 100%;
    }

    footer {
      background: #ddd;
      padding: 20px;
      text-align: center;
      font-size: 0.9em;
    }

    form {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 400px;
      margin: 40px auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      border: 3px solid #007BFF;
    }

    form input,
    form textarea {
      width: 100%;
      padding: 0.8rem;
      border: 2px solid #333A56;
      border-radius: 8px;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.3s;
      font-family: Helvetica, Arial, sans-serif;
    }

    form input:focus,
    form textarea:focus {
      border-color: #333A56;
    }

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

    button {
      padding: 0.8rem;
      border: none;
      border-radius: 8px;
      background: #333A56;
      color: #fff;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
      font-family: Helvetica, Arial, sans-serif;
    }

    button:hover {
      background: #FFD700;
      color: #000;
    }

    /* ✅ Add 1 inch margin on left/right for desktop */
    @media (min-width: 992px) {
      .page-content,
      .navbar .container,
      footer {
        margin-left: 1in;
        margin-right: 1in;
      }
 }      
       /* Mobile screens */
    @media (max-width: 767px) {
      .hero {
        height: 50vh; /* reduce height to 50% of viewport on small screens */
      }
        .hero .btn {
    padding: 0.5rem 1rem; /* smaller padding */
    font-size: 0.9rem;    /* smaller text */
  }
      /* Center navbar items on mobile */
 .navbar-nav {
    flex-direction: column;       /* stack vertically */
    align-items: center;           /* center all items horizontally */
    text-align: center;            /* center text */
  }

  .navbar-nav .nav-item {
    margin: 0.05rem 0;             /* vertical spacing between items */
  }
}   

    /* ✅ CSS for Marquee Effect */
.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-marquee 20s linear infinite;
}

.card-item {
  min-width: 250px;
  height: 80px;
  margin: 0 1rem;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Marquee Animation */
@keyframes scroll-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
    /* 👈 Reverse scrolling for Services section */
.reverse-scroll {
  animation: scroll-marquee-reverse 20s linear infinite;
}

@keyframes scroll-marquee-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
  /* Pause Scroll for Both Directions */
    
    .marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* Mobile Styles */
@media (max-width: 767px) {
  .marquee-container {
    /* You may want to make the marquee even smaller on mobile */
    height: 60px;
  }
  .card-item {
    min-width: 180px; /* Make card items smaller on mobile */
  }
 } /* 👈 CLOSE the mobile media query HERE */

  /* ✅ Centered Counter Section */
.stats-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background-color: #f8f9fa; /* Optional light background */
  color: #52658F;
  text-align: center;
}

/* ✅ Full-width evenly spaced layout */
.counter-container {
  display: flex;
  justify-content: space-between; /* Spread evenly across the page */
  align-items: center;
  width: 100%;
  max-width: 1200px; /* Keep from stretching too wide */
  margin: 0 auto;
  padding: 0 3rem; /* Space from left/right edges */
  flex-wrap: wrap; /* Allow stacking on small screens */
}

/* ✅ Each counter item */
.counter-item {
  flex: 1; /* Each takes equal space */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 250px; /* Prevent collapsing */
}

/* ✅ The counter number */
.counter {
  font-size: 4rem;
  font-weight: 600;
  color: #52658F;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  line-height: 1;
}

/* ✅ The text label */
.counter-label {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333A56;
}

/* ✅ Responsive Adjustments */
@media (max-width: 991px) {
  .counter {
    font-size: 4rem;
  }
  .counter-label {
    font-size: 1.25rem;
  }
  .counter-container {
    padding: 0 1.5rem;
    gap: 2rem;
  }
}

@media (max-width: 576px) {
  .counter {
    font-size: 3rem;
  }
  .counter-label {
    font-size: 1.1rem;
  }
  .counter-container {
    flex-direction: column; /* Stack vertically on small screens */
    gap: 1.5rem;
  }
}