@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');


.titlesa{
  font-family: "Cabin", sans-serif;
}



.how-it-works-section {
    position: relative;
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.how-it-works-section .container {
    position: relative;
}

.step-row {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 1;
}

.step-text {
    flex: 1;
    min-width: 250px;
    max-width: 40%;
    padding: 20px;
}

.step-text h5 {
    letter-spacing: 2px;
    color: #666;
    text-transform: uppercase;
}

.step-text h3 {
    font-weight: bold;
    font-size: 1.75rem;
    margin-bottom: 15px;
    color:#2f3292;

}

.step-image {
    flex: 1;
    text-align: center;
    min-width: 250px;
    padding: 20px;
}

.step-image img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Optional enhancements */
  /* border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
}


.dotted-line-container {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    height: 100%;
}

svg.curve-line {
    width: 100px;
    height: 2500px;
}

svg path {
    fill: none;
    stroke: #2979ff;
    stroke-width: 3;
    stroke-dasharray: 8, 10;
}


.scrolling-logo.visible {
    opacity: 1;
}

.scrolling-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    width: 90px; /* Added to maintain aspect ratio */
    height: 50px; /* Added to match the HTML height */
}

.scrolling-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


.store-buttons img {
    height: 40px;
    margin-right: 10px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .step-row {
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .step-text h3 {
    font-weight: bold;
    font-size: 1.75rem;
    margin-bottom: 15px;
    color: #333;
    margin-top: 2rem;
}


    .step-text{
      padding: 0px;
    }

    .step-text, .step-image {
        max-width: 100%;

    }
    
    .scrolling-logo {
        display: none;
    }
    
    .dotted-line-container {
        display: none;
    }

    

}

.stat-card {
  background-image: linear-gradient(90deg, #051451 0%, #001983 82%);
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  text-align: center;
  height: 100%;
  transition: 0.3s ease;
}



.stat-card h4{ 
 color: #ffffff;
 text-align: center;
}

.stat-card p{ 
  color: #ffffff;
  text-align: center;
 }





/* 
    .stat-card {
      border-radius: 15px;
      box-shadow: 0 5px 25px rgba(0,0,0,0.05);
      padding: 30px 20px;
      background-color: #fff;
      text-align: center;
      transition: 0.3s ease;
    } */
    .stat-card:hover {
      transform: translateY(-5px);
    }
    .stat-icon {
      font-size: 2.5rem;
      margin-bottom: 15px;
    }
    .green { color: #2DBD9B; }
    .yellow { color: #FFB800; }
    .blue { color: #4D79FF; }
    .orange { color: #FF6F3C; }
    .section-title {
      font-weight: bold;
      font-size: 2rem;
    }
  

    .track-section {
   background-image: linear-gradient(90deg, #051451 0%, #001983 82%);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }
    .track-section .car-img {
      max-width: 100%;
    }
    .icon-bubble {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #4dc247;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon-bubble img {
      width: 30px;
      height: 30px;
    }
    .dotted-curve-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0.15;
    }
    
    .dotted-path {
      animation: moveDots 5s linear infinite;;
    }
    
    @keyframes moveDots {
      0% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 100;
      }
    }
    .icon-top {
      position: absolute;
      top: 20%;
      right: 20%;

    }
    .icon-bottom {
      position: absolute;
      bottom: 15%;
      left: 10%;
    }

    .logos {
        position: relative;
      }
      
      .scrolling-logo {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 100;
      }
      
      .scrolling-logo.visible {
        visibility: visible;
        opacity: 1;
      }




/* //transportation-erp */

.transportation-erp {
  background: linear-gradient(180deg,#ffffff2e, #cccdffe8, #ffffff37);
  position: relative;
}

.dotted-curve-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
}

.dotted-path {
  animation: moveDots 5s linear infinite;
}

@keyframes moveDots {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 100;
  }
}

.trans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

.trans-item {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.trans-item:hover {
  transform: translateY(-5px);
}

.trans-icon {
  width: 40px;
  height: 40px;
  background: #0d6efd;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.trans-item h4 {
  font-size: 1.1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .trans-grid {
    grid-template-columns: 1fr;
  }
  
  .dotted-curve-bg {
    opacity: 0.1;
  }
}



/* //animated about section */
.sync-channel {
  background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
}

.sync-bg-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.sync-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.1);
  filter: blur(30px);
  animation: float 15s infinite ease-in-out;
}

.orb-1 {
  width: 300px;
  height: 300px;
  top: -50px;
  left: -50px;
  animation-delay: 0s;
}

.orb-2 {
  width: 200px;
  height: 200px;
  bottom: -30px;
  right: 100px;
  animation-delay: 3s;
}

.orb-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: -30px;
  animation-delay: 6s;
}

.sync-track {
  position: absolute;
  border: 1px dashed rgba(13, 110, 253, 0.2);
  border-radius: 50%;
  animation: rotate 30s infinite linear;
}

.track-1 {
  width: 600px;
  height: 600px;
  top: -100px;
  left: -100px;
}

.track-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  right: -100px;
  animation-direction: reverse;
}

.sync-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a2463;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  animation: fadeInUp 1s ease forwards;
}

.sync-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #3a4a6b;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease 0.2s forwards;
}

.sync-subtitle {
  font-size: 1.5rem;
  color: #0d6efd;
  margin-bottom: 1.5rem;
  animation: fadeInUp 1s ease 0.4s forwards;
}

.sync-list {
  list-style: none;
  padding: 0;
}

.sync-list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
  animation: fadeInUp 0.8s ease forwards;
}

.sync-icon {
  font-size: 1.2rem;
  color: #0d6efd;
  margin-right: 1rem;
  min-width: 30px;
}

.sync-feature-text {
  font-size: 1rem;
  color: #3a4a6b;
}

.sync-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  animation: fadeInScale 1s ease 0.3s forwards;
}

.sync-card-title {
  font-size: 1.5rem;
  color: #0a2463;
  margin-bottom: 1.5rem;
}

.sync-card-desc {
  font-size: 1rem;
  color: #3a4a6b;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.sync-card-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.sync-card-item {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease forwards;
}

.sync-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sync-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sync-card-item h4 {
  font-size: 1.1rem;
  color: #0a2463;
  margin-bottom: 0.5rem;
}

.sync-card-item p {
  font-size: 0.9rem;
  color: #3a4a6b;
  line-height: 1.5;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, 20px);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Delay animations for each item */
.sync-list-item:nth-child(1) { animation-delay: 0.3s; }
.sync-list-item:nth-child(2) { animation-delay: 0.6s; }
.sync-list-item:nth-child(3) { animation-delay: 0.9s; }

.sync-card-item:nth-child(1) { animation-delay: 0.4s; }
.sync-card-item:nth-child(2) { animation-delay: 0.7s; }
.sync-card-item:nth-child(3) { animation-delay: 1s; }

@media (max-width: 992px) {
  .sync-title {
    font-size: 2rem;
  }
  
  .sync-card-features {
    grid-template-columns: 1fr;
  }
}





.sync-channel {
  background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
}

.sync-bg-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0.2;
}

.sync-dotted-line {
  position: absolute;
  animation: moveDots 5s linear infinite;
}

.line-1 {
  top: 10%;
  left: 0;
  animation-delay: 0s;
}

.line-2 {
  top: 50%;
  left: 0;
  animation-delay: 5s;
}

.line-3 {
  top: 80%;
  left: 0;
  animation-delay: 5s;
}

@keyframes moveDots {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 100;
  }
}

/* Rest of your existing CSS remains unchanged */
.sync-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a2463;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  animation: fadeInUp 1s ease forwards;
}

/* ... (keep all other existing CSS rules) ... */


.solution-tabs {
  max-width: 1200px;
  margin: 40px auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.tab-buttons-container {
  background: #2c3e50;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.tab-buttons {
  display: inline-flex;
  background: #2c3e50;
  border-radius: 30px;
  padding: 5px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.tab-btn {
  padding: 12px 25px;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  border-radius: 30px;
  margin: 0 2px;
}

.tab-btn.active {
  background:linear-gradient(330deg,rgba(79, 193, 71, 1) 97%, rgba(77, 193, 71, 1) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  /* color: #001983; */
}

.tab-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* Rest of your existing CSS remains the same */
.tab-content-wrapper {
  display: flex;
  min-height: 400px;
}

.tab-image {
  flex: 1;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.tab-image img {
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
  transition: opacity 0.5s;
}

.tab-content {
  flex: 1;
  padding: 40px;
  background: white;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s;
}

.tab-pane.active {
  display: block;
}

.download-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #0870b5;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .tab-content-wrapper {
      flex-direction: column;
  }
  
  .tab-image {
      order: 2;
  }
  
  .tab-buttons {
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .tab-btn {
      padding: 10px 15px;
      font-size: 14px;
      margin: 2px;
  }
}



.feature-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: Arial, sans-serif;
    position: relative;
}

.feature-tabs__header {
    text-align: center;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
}

.feature-tabs__nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

.feature-tabs__button {
    padding: 12px 25px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.feature-tabs__button--active {
    background-color: #292c92;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.feature-tabs__button:hover:not(.feature-tabs__button--active) {
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

.feature-tabs__content-container {
    position: relative;
    min-height: 400px;
}

.feature-tabs__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 1;
}

.feature-tabs__content--active {
    opacity: 1;
    transform: translateY(0);
    z-index: 2;
}

.feature-tabs__content--behind {
    opacity: 0.7;
    transform: translateY(40px) scale(0.95);
    filter: blur(1px);
    z-index: 1;
}

.feature-tabs__content--far-behind {
    opacity: 0.4;
    transform: translateY(60px) scale(0.9);
    filter: blur(2px);
    z-index: 0;
}

.feature-tabs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.feature-tabs__item {
    padding: 15px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.feature-tabs__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}





/* Animation Classes */
.slide-in-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.slide-in-section.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-section {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fade-in-section.active {
  opacity: 1;
}

/* Delay classes for staggered animations */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1s; }




        .company-info-section {
            padding: 80px 0;
            background-color: #f8f9fa;
        }
        .main-heading {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .tagline-text {
            font-size: 3rem;
            font-weight: 800;
            color: #0d6efd;
            line-height: 1;
        }
        .description-text {
            margin-bottom: 40px;
        }
        .feature-card {
            border: 2px solid #0d6efd;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            height: 100%;
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            background-color: #0d6efd;
            color: white;
            transform: translateY(-5px);
        }
        .feature-card .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #0d6efd;
        }
        .feature-card:hover .feature-icon {
            color: white;
        }
        .primary-btn {
            padding: 10px 25px;
            font-weight: 600;
            margin-top: 20px;
        }
        .experience-tag {
            background-color: #0d6efd;
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            display: inline-block;
            font-weight: 600;
            margin-top: 30px;
        }


        .home-img.about-1 {
          position: relative;
    background: linear-gradient(180deg, #e7e2ff,  #10005e2b, #eff0ff6f);
          padding-top: 100px;
          padding-bottom: 100px;
          overflow: hidden;
        }


        .sect{
          background: linear-gradient(180deg,#ffffff2e, #cccdffe8, #ffffff37);
        }
      
        /* Floating tracker icons */
        .floating-icon {
          position: absolute;
          opacity: 0.15;
          animation: floatIcon 8s ease-in-out infinite;
          z-index: 0;
        }
      
        .icon-gps {
          top: 20%;
          left: 5%;
          width: 60px;
          animation-delay: 0s;
        }
      
        .icon-vehicle {
          bottom: 10%;
          right: 10%;
          width: 80px;
          animation-delay: 2s;
        }
      
        .icon-location {
          top: 60%;
          left: 85%;
          width: 50px;
          animation-delay: 4s;
        }
      
        @keyframes floatIcon {
          0% { transform: translateY(0); }
          50% { transform: translateY(-15px); }
          100% { transform: translateY(0); }
        }
      
        /* Dotted curved path (SVG) */
        .dotted-path {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
          pointer-events: none;
        }
      
        .dotted-path svg {
          width: 100%;
          height: 100%;
        }
      
        .advantages-list li i {
          margin-right: 8px;
          color: #00acc1;
        }
      
        /* Ensure text stays above */
        .about-img, .heading, .about-block {
          position: relative;
          z-index: 1;
        }

        

  .home-img.about-1 {
    /* background: linear-gradient(135deg, #e0f7fa, #ffffff); */
    position: relative;
    overflow: hidden;
  }

  .home-img.about-1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: radial-gradient(circle, #4dd0e1 10%, transparent 11%) center center / 20px 20px; */
    animation: moveBg 30s linear infinite;
    opacity: 0.05;
    z-index: 0;
  }

  @keyframes moveBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .about-img,
  .heading,
  .about-block {
    position: relative;
    z-index: 1;
  }

  .advantages-list li::before {
    content: "✔️";
    margin-right: 8px;
    color: #4caf50;
  }

  .counter-icon i {
    font-size: 2rem;
    color: #00acc1;
  }

  .prief-set p::before {
    content: "🚛 ";
    font-size: 1.2rem;
  }


/* 
  //video section */

  .video-section {
     background: #020024;
background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
  }

  .gps-element {
      position: absolute;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border: 2px dashed rgba(255, 255, 255, 0.3);
      animation: pulse 4s infinite;
  }

  .gps-element:nth-child(1) {
      top: 10%;
      left: 5%;
      animation-delay: 0s;
  }

  .gps-element:nth-child(2) {
      top: 70%;
      left: 15%;
      animation-delay: 1s;
  }

  .gps-element:nth-child(3) {
      top: 30%;
      right: 10%;
      animation-delay: 2s;
  }

  .gps-element:nth-child(4) {
      bottom: 20%;
      right: 5%;
      animation-delay: 3s;
  }

  @keyframes pulse {
      0% { transform: scale(0.8); opacity: 0.7; }
      50% { transform: scale(1.1); opacity: 0.3; }
      100% { transform: scale(0.8); opacity: 0.7; }
  }

  .video-container {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
  }

  .video-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  }

  .video-thumbnail {
      width: 100%;
      height: auto;
      display: block;
  }

  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background: rgba(255, 0, 0, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      z-index: 10;
  }

  .play-button:hover {
      background: rgba(255, 0, 0, 1);
      transform: translate(-50%, -50%) scale(1.1);
  }

  .play-button i {
      color: white;
      font-size: 30px;
      margin-left: 5px;
  }

  .video-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .video-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  .video-embed {
      width: 80%;
      max-width: 1000px;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      position: relative;
  }

  .video-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
  }

  .close-video {
      position: absolute;
      top: 70px;
      right: 30px;
      color: white;
      font-size: 30px;
      cursor: pointer;
      background: rgba(255,255,255,0.2);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      transition: all 0.3s ease;
  }

  .close-video:hover {
      background: rgba(255,255,255,0.3);
      transform: rotate(90deg);
  }

  .content-text {
      color: white;
  }

  .content-text h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 20px;
  }

  .content-text p {
      font-size: 1.1rem;
      margin-bottom: 30px;
      line-height: 1.6;
  }
  .cta-button {
  display: flex;
	-webkit-box-pack           : justify;
	-ms-flex-pack              : justify;
	justify-content            : center;
	-webkit-box-align          : center;
	-ms-flex-align             : center;
	align-items                : center;
	font-family                : var(--global--font-body);
	position                   : relative;
	z-index                    : 2;
	font-size                  : 20px;
	font-weight                : 700;
	text-transform             : capitalize;
	padding                    : 0 30px;
	border                     : 0;
	width                      : 240px;
	height                     : 65px;
	-webkit-transition         : all .3s ease-in-out;
	-o-transition              : all .3s ease-in-out;
	transition                 : all .3s ease-in-out;
background-color: #3bd633;
	border-radius              : 4px;
	overflow                   : hidden;
	margin: 0 auto;
  color: #ffffff;
text-shadow: 1px  0 #000000;

}




/* 
  .cta-button {
      background: #4dc147;
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 50px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
  } */




.cta-button {
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: #ffffff;
  color: #000360;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

  @media (max-width: 768px) {
      .content-text {
          text-align: center;
          margin-bottom: 40px;
      }
      
      .content-text h2 {
          font-size: 2rem;
      }
      
      .play-button {
          width: 60px;
          height: 60px;
      }

      .close-video {
          top: 15px;
          right: 15px;
          width: 40px;
          height: 40px;
          font-size: 20px;
      }

      .counter.counter-2:last-child .counter-desc p {
   padding-bottom: 5rem;
      }
  }

  
  
    
    /* Real-time Demo */
    .real-time-demo {
      margin: 20px 0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .demo-screen {
      background: #1a1a2e;
      padding: 10px;
      border-radius: 10px;
  }
  
  .screen-content {
      position: relative;
      height: 200px;
      background: #16213e;
      border-radius: 5px;
      overflow: hidden;
      padding-top:5%;
  }
  
  .live-map {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('assets/images/map-demo.jpg') center/cover;
  }
  
  .vehicle-stats {
      position: absolute;
      bottom: 3px;
      right: 10px;
      background: rgba(0,0,0,0.7);
      padding: 5px;
      border-radius: 5px;
      display: flex;
      gap: 15px;
  }
  
  .stat-item {
      text-align: center;
  }
  
  .stat-value {
      display: block;
      color: #4dc247;
      font-size: 24px;
      font-weight: bold;
  }
  
  .stat-label {
      color: white;
      font-size: 12px;
  }
  


/* Text Highlight */
.text-highlight {
    color: #4dc247;
    font-weight: bold;
}

   /* GPS Location Animations */
   @keyframes location-pulse {
    0% { transform: scale(0.8); opacity: 0.8; }
    70% { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes path-extend {
    0% { transform: rotate(15deg) scaleX(0); }
    100% { transform: rotate(15deg) scaleX(1); }
}

@keyframes dot-travel {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60vw, 20vh); }
}

@keyframes circle-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes satellite-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes signal-pulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Enhanced Content Visibility */
.features-1 .heading-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.features-1 .heading-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.features-1 .btn--white {
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    background: rgba(255,255,255,0.15);
    padding: 0.8rem 1.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.features-1 .btn--white:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Service Cards Enhancement */
.features-1 .feature-panel {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.features-1 .feature-panel:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}


.calcy{
  padding-top: 50px;
  padding-bottom: 50px;
}



.ont{
  padding-bottom: 5%;
}



.onte{
  padding-top: 5%;
}


.counterw {
	padding-top   : 0px;
	padding-bottom: 0px;
	position      : relative;
}

@media screen and (max-width: 991.98px) {
	.counterw {
		padding-top   : 0px;
		padding-bottom: 15px;
	}
}


.tula{
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}



  /* Fade effect for the first section */
  .counterw.counters-1 {
    position: relative;
  }
  .counterw.counters-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
      rgba(13, 19, 33, 0) 0%, 
      rgba(12,20,36,0.95) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Fade effect for the second section */
  section.contact.calcy {
    position: relative;
  }
  section.contact.calcy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
      rgba(12,20,36,0.95) 0%, 
      rgba(12,20,36,0) 100%);
    z-index: 2;
    pointer-events: none;
  }
  section.contact.calcy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
      rgba(12,20,36,0) 0%, 
      rgba(12,20,36,0.95) 100%);
    z-index: 2;
    pointer-events: none;
  }






/* 
  Benifits Cards  */

  .case-study-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    background-color: #2f3292;
    color: white;
    border-radius: 50px;
    padding: 10px;
    text-decoration: none;
    gap: 10px;
    z-index: 3;
    overflow: hidden;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.case-study-link .arrow-icon {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.case-study-link .link-text {
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.customer-card:hover .case-study-link {
    width: auto;
    padding: 10px 20px;
    color:white;
}

.customer-card:hover .case-study-link .link-text {
    opacity: 1;
    width: auto;
    margin-left: 8px;
}




        .customer-card {
            position: relative;
            height: 300px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.536);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            background-color: #f8f9fa;
        }
        
        .customer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .customer-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            z-index: 2;
            background-color: rgba(255,255,255,0.9);
            transition: all 0.3s ease;
        }
        
        .customer-card:hover .customer-content {
            opacity: 0;
        }
        
        .customer-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: all 0.3s ease;
            opacity: 0;
        }
        
        .customer-card:hover .customer-image {
            opacity: 1;
        }
        
        .customer-name {
            font-weight: 700;
            margin-bottom: 10px;
            color: #212529;
        }
        
        .customer-stat {
            font-size: 24px;
            font-weight: 600;
            color: #2f3292;
            margin-bottom: 5px;
        }
        
        .customer-desc {
            font-size: 16px;
            color: #2f3292;
        }
        
  
        /* Simple customer cards (for RHL and SINAL) */
        .simple-customer-card {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
        }
        
        .simple-customer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }


      

        

/* 
industries-section */

.trans-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px; /* smaller gap */
  flex-wrap: nowrap;
}

.trans-item {
  flex: 0 0 auto;
  width: 150px; /* control width smaller */
  text-align: center;
  padding: 10px;
  background: #f8f8f8; /* light background optional */
  border-radius: 8px; /* slight rounded corners */
  font-size: 14px; /* make text a little smaller */
}
.trans-icon {
  font-size: 24px; /* make icon smaller */
  margin-bottom: 8px;
}

    .industries-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .service-card-container {
        padding: 0 8px;
        margin-bottom: 20px;
        height: 100%; /* Ensure container takes full height */
    }
    .service-card {
        width: 100%;
        margin: 10px auto;
        padding: 1rem;
        cursor: pointer;
        background-color: #fff;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        min-height: 300px;
        display: flex;
        flex-direction: column;
    }
    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .service-card img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
        position: relative;
        z-index: 1000;
        transition: all 0.5s ease-in-out;
    }
    .card-title-overlay {
        position: absolute;
        top: 90%; /* Adjusted for better positioning */
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: #2f3292;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        transition: opacity 0.3s ease;
        width: 90%;
        text-align: center;
        font-weight: bold;
        line-height: 1.3;
        padding: 10px 0; /* Consistent padding */
        margin: 0; /* Remove any default margins */
    }
    .service-card__content {
        margin: 1rem 0;
        color: #222;
        overflow: hidden;
        margin-top: -200px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease-in-out;
        padding: 0 15px;
        flex-grow: 1; /* Make content fill remaining space */
        display: flex;
        flex-direction: column;
    }
    .service-card__content h2 {
        margin: 0.6rem auto;
        text-align: center;
        color: #2f3292;
        font-size:35px;
    }
    .service-card__content p {
        font-size: 1.1rem;
        line-height: 1.6rem;
        text-align: center;
        margin-bottom: 1.2rem;
        color: #555;
        flex-grow: 1; /* Make paragraph fill available space */
    }
    .service-card__content a {
        width: 200px;
        padding: 10px 15px;
        display: block;
        text-align: center;
        margin: 0.6rem auto;
        margin-bottom:4rem; /*Button Padding */
        font-size: 1.1rem;
        color: white;
        text-decoration: none;
        background-color: #2f3292;
        border-radius: 5px;
        transition: all 0.3s;
        border: 2px solid #2f3292;
    }
    .service-card__content a:hover {
        color: #2f3292;
        background-color: white;
        box-shadow: 0 0 10px rgba(47, 50, 146, 0.4);
    }
    .service-card:hover img {
        margin-top: -60px;
        box-shadow: 0 0 4px 6px rgba(0,0,0,0.2);
    }
    .service-card:hover .service-card__content {
        margin-top: 0;
        opacity: 1;
        visibility: visible;
    }
    .service-card:hover .card-title-overlay {
        opacity: 0;
    }
    .section-bottom-margin {
        margin-bottom: 50px !important;
    }
    .section-header {
    
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        /* text-transform: uppercase; */
        letter-spacing: 1px;
        position: relative;
        padding-bottom: 15px;
    }
    .section-header:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: #2f3292;
    }
    .card-row {
        display: flex;
        flex-wrap: wrap;
    }
    .card-row > [class^="col-"] {
        display: flex; /* Make columns flex containers */
    }


    /* @media only screen and (max-width: 767px) {
   
      .service-card__content a {
     
      }
}
 */




/* Testimonials */

.testimonials-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: #020024;
background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 100%, rgba(0, 212, 255, 1) 100%);
  color: white;
}

.backgroundgps {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  z-index: 0;
  background-image: 
      radial-gradient(circle, #4dc147 1px, transparent 1px),
      radial-gradient(circle, #4dc147 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  animation: gpsMove 20s linear infinite;
}

@keyframes gpsMove {
  0% {
      background-position: 0 0, 25px 25px;
  }
  100% {
      background-position: 500px 500px, 525px 525px;
  }
}

.testimonial-card {
  background: #ffff;
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  margin: 15px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
  min-height: 300px; 
  border: 2px solid #0dff00; /* ✅ visible green border */
}


.testimonial-card:hover {
  transform: translateY(-10px);
}

.client-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #00ffff;
  margin-bottom: 15px;
}

.quote-icon {
  color: #000f49;
  font-size: 24px;
  margin-bottom: 15px;
}

.client-name {
color:#000000;
  font-weight: 600;
  margin-bottom: 5px;
}

.client-position {
  color: #000360;
  font-weight: bold;
  font-size: 14px;
}

.section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
}

.section-title h2 {
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: #4dc147;
}

.colord{
color:#000f49;
font-weight: 600;
}


.test{
color:#ffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}