  <style>
    body { scroll-behavior: smooth; }
    .hero { background: #007bff; color: white; padding: 100px 0; text-align: center; }
    .section { padding: 60px 0; }
    .cta-btn { font-size: 1.25rem; padding: 0.75rem 1.5rem; }
    .card { margin-bottom: 20px; }
    .bg-primary-light { background-color: #e7f1ff; }
    .faq-item { margin-bottom: 1.5rem; }
    h2 { margin-bottom: 30px; }
        #countdown {
    font-family: Arial, sans-serif;
    font-size: 2rem;
    display: flex;
    gap: 15px;
  }
  .time-box {
    text-align: center;
    padding: 10px;
    background: #007bff;
    border-radius: 8px;
    min-width: 70px;
  }
  .time-box span {
    display: block;
    font-size: 1.2rem;
    color: #white;
  }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(12,0,94), rgba(111,55,255,0.62));
  padding-bottom: 0;
    height: 400px;
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* can adjust for wave thickness */
}

/* Highlight text */
.highlight {
  color: #8fffab;
}

.mobile-quote-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1050; /* above everything except modal */
  transition: transform 0.3s ease, z-index 0.3s ease;
  background: transparent; /* remove any background from the container */
}

.mobile-quote-btn.behind {
  transform: translateY(100%); /* slide down out of view */
  z-index: 1040; /* behind modal */
}

.mobile-quote-btn button {
 width: 100%;
  background-color: #5530f2; /* red background */
  color: #ffffff; /* white text */
  border: 2px solid #5530f2; /* darker red border */
  border-radius: 0.25rem; /* rounded corners */
  font-weight: bold;
  padding: 0.75rem 1rem; /* touch-friendly padding */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* subtle shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
 
}

.mobile-quote-btn button:focus,
.mobile-quote-btn button:active {
  outline: none; /* remove default outline */
  box-shadow: none; /* remove focus/active shadow */
}

.mobile-fixed-div {
  display: none; /* hide by default */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  text-align: center;
  background-color: rgba(0, 0, 255, 0.3); /* red with 70% opacity */
  color: #fff; /* white text */
  font-weight: bold;
  z-index: 1050;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2); /* subtle shadow */
}

/* Show only on screens smaller than 768px */
@media (max-width: 767.98px) {
  .mobile-fixed-div {
    display: block;
  }
}

.price-card {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

i[class^="fa-"] {
    color: rgb(112, 182, 44);
}

ul.list-unstyled a {
    text-decoration: none;
}

.green-underline-fixed {
    position: relative;
    display: inline-block; /* Needed so the underline aligns to text */
    padding-bottom: 5px;  /* Space between text and underline */
}

.green-underline-fixed::after {
    content: "";
    position: absolute;
    left: 50%;             /* Center the underline */
    bottom: -20px;
    width: 150px;          /* Fixed width of the underline */
    height: 3px;           /* Thickness of the underline */
    background-color: green;
    transform: translateX(-50%); /* Perfectly center it */
}

.cookie-consent {
    z-index: 11000;
}



  </style>