@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 :root {
    
    --brand: #24b4a5; 
    --primary-font-family : 'Poppins', sans-serif;
 --card-radius: 22px;
  --brand-dark:#1e9b89;
     --cta: #e38a38;        /* orange button */
    --cta-hover: #cf7a2f;
    --ink: #1f261c;
        --chip:#e8f3f1; 

}


*{

    font-family: var(--primary-font-family) ;
}

  /* Top info bar (desktop) */
  .top-bar {
    background: linear-gradient(90deg, #2db6a3, #24b4a5);
    color: #fff;
    font-size: 14px;
    height: 50px;
    padding: .5rem 0;
  }
  .top-bar a { color:#fff; opacity:.95; }
  .top-bar a:hover { opacity:1; }

  /* Main navbar (white) */
  .navbar-brand img { height: 32px; margin-right:.5rem; }
  .nav-link { text-transform: uppercase; font-weight: 400; letter-spacing:.5px; }
  .nav-link.active { color: var(--brand) !important; }

  /* Mobile green bar (with Menu button) */
  .mobile-green { background: var(--brand); color:#fff; }

  /* Offcanvas styling */
  .offcanvas-nav .list-group-item {
    padding: 1rem 0;
    border: 0;
    border-bottom: 1px dashed #e9ecef;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing:.3px;
  }
  .offcanvas-nav .contact a { color: var(--brand); font-weight: 700; text-decoration: none; }
  .offcanvas-nav .social a { color:#3b3b3b; font-size:1.25rem; margin-right:1rem; }
  .offcanvas-nav .btn-close {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 50%;
    padding: .9rem;
  }

  /* Offcanvas width similar to screenshot */
  @media (max-width: 991.98px){
    .offcanvas.offcanvas-end { width: 85%; }
  }

   /* Responsive hero height + cover the image */
  .hero-carousel .carousel-item {
    height: clamp(220px, 45vw, 520px); /* mobile -> desktop */
  }
  .hero-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Indicators => small dots like screenshot */
  .hero-carousel .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #d6d6d6;
    opacity: 1;
    margin: 0 6px;
  }
  .hero-carousel .carousel-indicators .active {
    background-color: #333;
  }

  /* Make controls subtle (white with slight shadow; fades on hover) */
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
    opacity: .85;
  }
  .hero-carousel .carousel-control-prev:hover,
  .hero-carousel .carousel-control-next:hover {
    opacity: 1;
  }

  /* Optional: rounded edges like a card */
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-carousel img {
    border-radius: 8px;
  }

  .ratio img { transition: transform .35s ease; }
a:hover .ratio img { transform: scale(1.03); }

  /* Make images fill their frame without distortion */
  .img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Keep each card nicely centered and not too wide on large screens */
  .service-card { max-width: 640px; margin-inline: auto; display: block; }

  /* Title styling + spacing that won’t overlap on mobile */
  .service-title {
    margin-top: .9rem;
    margin-bottom: 0;
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    color: #222;
    letter-spacing: .5px;
  }

  /* Safety reset in case a global rule sets fixed heights on images */
  img { max-width: 100%; height: auto; }

  .wiggle { width:min(100px, 100px); height:30px; }
  #wave2 {
    stroke-dasharray: 999;
    stroke-dashoffset: 999;
    animation:
      drawLoop 5s ease-in-out infinite;
  }
  @keyframes drawLoop {
    0%   { stroke-dashoffset: 999; opacity:.9 }
    50%  { stroke-dashoffset: 0;   opacity:1 }
    100% { stroke-dashoffset: 999; opacity:.9 }
  }
  @media (prefers-reduced-motion: reduce){
    #wave2 { animation: none; stroke-dashoffset: 0; }
  }

   .video-section {
    position: relative;
    width: 100%;
  height: 60vh; /* adjust as needed */
    overflow: hidden;
  }

  .video-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 45, 45, 0.5); /* green with 50% opacity */
    z-index: 2;
  }

  .video-content {
    position: relative;
    z-index: 3;
    height: 100%;
    color: #fff;
    padding: 0 1rem;
  } 
   /* Card container */
  .testi-wrap{
    max-width: 1080px;
    background: #fff;
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
    box-shadow: 0 12px 40px rgba(0,0,0,.06);
    position: relative;
  }

  /* Decorative faint arc on the right (like the screenshot) */
  .testi-wrap::after{
    content:"";
    position:absolute; right:-60px; bottom:-40px;
    width: 420px; height: 420px; border-radius: 50%;
    border: 2px dashed rgba(36,180,165,.12);
    pointer-events:none;
  }

  /* Big headline quote */
  .testi-title{
    font-weight: 800;
    line-height: 1.1;
    color: #1f261c; /* deep greenish black like screenshot */
    font-size: clamp(1.6rem, 4.8vw, 3.2rem);
    margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
    text-wrap: balance;
    text-align: center;
  }

  .testi-body{
    font-size: clamp(1rem, 2.1vw, 1.25rem);
    color: #444;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 56ch;
    text-align: left;
  }

  /* Subtle arrows like the reference */
  .carousel-control-prev, .carousel-control-next{
    width: 7%;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.15));
    opacity: .9;
  }
  .carousel-control-prev-icon, .carousel-control-next-icon{
    background-size: 1.25rem 1.25rem;
  }

  /* Optional auto-height for different text lengths */
  #testiSlider .carousel-item{ transition: transform .6s ease, opacity .6s ease; }
  #testiSlider .carousel-inner{ display:flex; }
  #testiSlider .carousel-item{ flex: 0 0 100%; }

  @media (prefers-reduced-motion: reduce){
    .carousel, .carousel * { transition: none !important; animation: none !important; }
  }

    .fleet-section {
    background: #24b4a5; /* brand green */
    background: linear-gradient(180deg, #24b4a5 0%, #1f9a88 100%); /* gradient option */
  }
  .fleet-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }

  .see-details{

    background:none;
    height: 40px;
    border: 2px solid var(--brand);
  }
  .see-details:hover {
    background: var(--brand);
    color: #fff;


  }

  .search-page .search-row {

    border-bottom: 2px solid var(--brand);
    border-radius:0px;
  }

  .search-page #search-input{

    width: 100%;
    height: 100%;
    background: none;
    border: none;
   
    font-size: 1.25rem;
 
    outline: none;
  }
  .search-page{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: none;
 
  }

  .active-search-page {
    display: block;

  }



.footer-bg{
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  }
  .footer-wave{ transform: translateY(-99%); }

  .footer-logo{
    width:42px;height:42px;border-radius:12px;
    background: rgba(255,255,255,.15);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
    color:#fff;font-size:18px;
  }

  .icon-bubble{
    width:36px;height:36px;border-radius:50%;
    display:grid;place-items:center;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
    flex: 0 0 36px;
  }

  .link-light-80{
    color: rgba(255,255,255,.85);
    text-decoration: none;
  }
  .link-light-80:hover{ color:#fff; text-decoration: underline; }

  .hover-white:hover{ color:#fff !important; }

  /* Inputs in dark bg */
  footer .form-control{
    background: rgba(255,255,255,.12);
    color:#fff;
  }
  footer .form-control::placeholder{ color: rgba(255,255,255,.8); }
  footer .form-control:focus{
    background: rgba(255,255,255,.2);
    color:#fff;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.2);
  }

  /* Spacing helpers */
  .pt-lg-6{ padding-top: 5rem; }

  @media (max-width: 991.98px){
    .pt-lg-6{ padding-top: 3rem; }
  }