:root{
      --blue:#1E88E5;
      --green:#43A047;
      --orange:#f9a825;
      --dark:#0B0F19;
       --blue: #1E88E5;
      --light-bg: #f8f9fa;
    }

    body { scroll-behavior: smooth; }

    .logo-text {
      background: linear-gradient(
    90deg, 
    /* #4E5CC5 0%,   /* Blue Start */
    #4E5CC5 0%,    /* Blue Start (T-) */
    #4E5CC5 20%,   /* Blue stays solid for a bit */
    #5CB85C 35%,   /* Transition to Green */
    #dc3150 70%,   /* Transition to Pink */
    #FBA93B 80%,   /* Transition to Orange */
    #FBA93B 100%   /* Orange End */
    );
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    }

    /* h5 {
      color: var(--green);
    } */

    .hero {
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      padding: 120px 0;
      height: 100vh; /* Default for desktop */
    }

    /* Responsive heights */
    @media (max-width: 767px) {
      .hero {
        height: 70vh !important; /* Mobile: half viewport height */
      }
      .service-btn {
        font-size: 0.9rem;
        height: 40px;
        width:190px !important;
      }
      .contact-btn {
         font-size: 0.9rem;
         height: 40px;
         width: 190px !important;

      }

    }

    @media (min-width: 768px) and (max-width: 1199px) {
      .hero {
        height: 75vh !important; /* Tablet: three-quarters viewport height */
      }
    }

    .section-padding { padding: 90px 0; }

    .section-title { margin-bottom: 50px; }

    .card {
      transition: all .4s ease;
      border: none;
      border-bottom: 0.5px solid rgba(188, 188, 188, 0.626);
      border-right: 0.5px solid rgba(188, 188, 188, 0.389);
    }
    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0,0,0,.15);

    }

    .icon-box {
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
    }
      .highlight-box {
  background-color: #FFF3CD; /* Light Orange Tint */
  color: #856404;            /* Dark readable text */
  border: 1px solid #FFEeba; /* Optional subtle border */
  padding: 15px;
  border-radius: 5px;
}

    footer {
      background: var(--dark);
      color: #ccc;
      padding: 30px 0;
    }

    .client-card {
      border-left: 4px solid var(--orange);
      transition: .3s;
    }

    .client-card:hover {
      background: #f9f9f9;
      transform: scale(1.03);
    }
    section {
  scroll-margin-top: 90px;
}
.accordion-button:not(.collapsed){
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #fff !important;
}

.accordion-item{
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.client-card{
  border-left:5px solid var(--orange);
  background:#fff;
  transition:.3s;
}

.client-card:hover{
  box-shadow:0 15px 35px rgba(0,0,0,.12);
}
#contact .card:hover{
  border-color: var(--green);
}
footer {
  background: var(--dark);
  color: #ccc;
}

.footer-link {
  color: var(--orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  text-decoration: underline;
  color: var(--orange) !important;
  text-decoration: none;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  
}
 @media (max-width: 780px) {
  .footer-contact {
    justify-content: flex-center !important;
    align-items: center !important;
  }
}
.social-icon {
  color: #ccc;
  font-size: 1.2rem;
  transition: .3s;
}

.social-icon:hover {
  color: var(--orange);
}

.logo-img {
  height: 60px !important;
  width: 60px !important;
}
.gpl-section {
  background-color: #f1f8e9;
}
#services {
  background-color: #fff !important;
}
#team {
  background-color: #f0f7ff !important;
}
#clients {
    background-color: #fff !important;
}
#contact{
   background-color: #fff8e1 !important;
}
#services {
    background-color: #fff !important;
}

section{
    padding-top: 10rem !important;
}

 body { scroll-behavior: smooth; padding-top: 85px; background-color: var(--light-bg); }
    html { scroll-padding-top: 85px; }

    .section-padding { padding: 80px 0; }
    
    /* Form Section Styling */
    .form-section {
        background: #fff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        margin-bottom: 2rem;
        border: 1px solid #eee;
        border-left: 5px solid var(--blue);
    }
    .form-section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }
    .step-badge {
        background: var(--blue);
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        margin-right: 15px;
    }

    /* Form Controls */
    .form-control, .form-select {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #ced4da;
        background-color: #fafafa;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 0.25rem rgba(30, 136, 229, 0.25);
        background-color: #fff;
    }
    .form-label { font-weight: 600; color: #555; font-size: 0.95rem; }

    /* Sidebar Styling */
    .sidebar-card {
        background: #fff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }

    /* Footer & Navbar */
    footer { background: var(--dark); color: #ccc; padding: 30px 0; }
    .navbar { background: #fff; }
    .footer-link { color: var(--orange); text-decoration: none; transition: .3s; }
    .footer-link:hover { color: #fff; }
    .social-icon { color: #ccc; font-size: 1.2rem; transition: .3s; }
    .social-icon:hover { color: var(--orange); }

    #case-study h5 {
      color: #F9A825 !important;
    }

  /* .security-card-icon  {
    background-color: rgb(201, 37, 37) !important;
  } */

  /* .nav-item a:active {
    color: blue !important;
  } */

  .nav-link.active {
  background: linear-gradient(
    90deg, 
    /* #4E5CC5 0%,   /* Blue Start */
    #4E5CC5 0%,    /* Blue Start (T-) */
    #4E5CC5 20%,   /* Blue stays solid for a bit */
    #5CB85C 35%,   /* Transition to Green */
    #dc3150 70%,   /* Transition to Pink */
    #FBA93B 80%,   /* Transition to Orange */
    #FBA93B 100%   /* Orange End */
    ) !important; /* Makes it blue */

    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
     
}

header {
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #fff;

}
.carousel-img {
  height: 100%;
  object-fit: cover;
}

/* Create the overlay layer */
.carousel-inner {
  position: relative;
}

.carousel-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Adjust the 0.6 to 0.8 if you want it darker */
  background: linear-gradient(
    to right, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(0, 0, 0, 0.5) 25%,
    rgba(0, 0, 0, 0.3) 50%, 
    rgba(0, 0, 0, 0.5) 75%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 1; /* Sits above image */
  pointer-events: none; /* Allows clicks to pass through to buttons */
}

/* Ensure the text container stays on top of the overlay */
.hero .container {
  z-index: 5 !important;
}

/* Added text shadow for extra crispness */
.hero-h1, .lead {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}