/* Base styles */
:root {
    --primary-color: #FF0000;     /* Bright Red */
    --primary-dark: #CC0000;      /* Darker Red */
    --primary-light: #FF3333;     /* Light Red */
    --dark-color: #1A1A1A;        /* Almost Black */
    --dark-secondary: #2D2D2D;    /* Dark Grey */
    --light-color: #FFFFFF;       /* White */
    --text-color: #333333;        /* Dark Text */
    --text-light: #FFFFFF;        /* Light Text */
    --gradient-red: linear-gradient(135deg, #FF0000 0%, #FF3333 100%);
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 15px 40px rgba(255, 0, 0, 0.2);
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: #FFFFFF;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 80px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
}

img {
    /* max-width: 150px; */
    height: auto;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-light);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: #666;
    margin-bottom: 50px;
}

.section-header {
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    position: relative;
    display: inline-block;
}

/* .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    border-radius: 2px;
} */

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Buttons */
/* .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    text-align: center;
} */

.btn-primary {
    background: var(--gradient-red);
    color: var(--light-color);
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.4);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--light-text);
}

.btn-secondary:hover {
    background-color: #e55500;
}

.btn-outline {
    background: rgba(255, 255, 255, 0.05);
    color: var(--light-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-outline-light {
    background-color: transparent;
    border: 2px solid var(--text-light);
    color: var(--text-light);
}

.benefits-cta .btn {
    border-radius: var(--border-radius);
    padding: 0.85rem 1.8rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.benefits-cta .btn-outline {
    background: rgba(255, 255, 255, 0.05);
    color: var(--light-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.benefits-cta .btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.benefits-cta .btn {
  border-radius: var(--border-radius);
  padding: 0.85rem 1.8rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.benefits-cta .btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: var(--light-color);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.benefits-cta .btn-outline:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}





.btn-outline-light:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
}

.cta-container {
    text-align: center;
    margin-top: 40px;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
    opacity: 0;
}

.loading-content {
    text-align: center;
    color: var(--text-light);
    padding: 20px;
}

.loading-content img {
    max-width: 150px;
    margin-bottom: 20px;
}

.loading-text {
    font-size: 1.5rem;
    margin: 20px 0;
}

.loading-text span {
    font-weight: 700;
    margin: 0 5px;
}

.loading-content h2 {
    font-size: 2.5rem;
    margin: 20px 0;
}

.iso-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 20px;
}



/* Logistics Showcase Section Styles - Black & Red Theme */
.logistics-showcase {
  position: relative;
  min-height: 0vh;
  background-color: #0a0a0a;
  overflow: hidden;
  /* padding: 120px 0 80px; */
}

/* Background effect with animated gradient */
.logistics-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(180, 0, 0, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(220, 20, 20, 0.2) 0%, transparent 40%);
  animation: gradientPulse 15s ease infinite alternate;
}

/* Particle overlay */
.logistics-showcase::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,0,0,0.05)'/%3E%3C/svg%3E");
  animation: particleShift 40s linear infinite;
}

.showcase-content {
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.logistics-showcase h1 {
  font-size: 3.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(255, 0, 0, 0.4);
  animation: titleReveal 1.2s ease-out;
  background: linear-gradient(to right, #ffffff, #ff3333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.showcase-subtitle {
  font-size: 1.0rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  animation: fadeUp 1.4s ease-out 0.2s both;
}

.showcase-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  animation: fadeUp 1.4s ease-out 0.4s both;
}

.showcase-cta .btn {
  border-radius: var(--border-radius);
  padding: 0.85rem 1.8rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.showcase-cta .btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: var(--light-color);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.showcase-cta .btn-outline:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


/* .btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  z-index: 1;
} */

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.2), transparent);
  transition: all 0.6s ease;
  z-index: -1;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #ee1b1b, #9e0000);
  color: white;
  box-shadow: 0 4px 18px rgba(238, 27, 27, 0.3);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff3333, #cc0000);
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(238, 27, 27, 0.5);
}



.btn-outline:hover {
  border-color: rgba(255, 0, 0, 0.8);
  background: rgba(255, 0, 0, 0.1);
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(255, 0, 0, 0.15);
}

/* Showcase Image Grid */
.showcase-image-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1000px;
}

.showcase-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 
              0 0 0 1px rgba(255, 0, 0, 0.2);
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  background: rgba(30, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showcase-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s ease;
  filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.2));
}

.showcase-image:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 0, 0, 0.3),
              0 0 30px rgba(255, 0, 0, 0.2);
  transform: translateY(-10px) scale(1.02);
}

.showcase-image:hover img {
  transform: scale(1.05);
}

.showcase-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30, 0, 0, 0.2), rgba(30, 0, 0, 0.8));
  z-index: 1;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.showcase-image:hover::before {
  opacity: 0.4;
}

.image-caption {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: 600;
  padding: 0 20px;
  z-index: 2;
  font-size: 1.1rem;
  transform: translateY(10px);
  transition: transform 0.5s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.showcase-image:hover .image-caption {
  transform: translateY(0);
}

/* Glow effect for images */
.showcase-image-1 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(255, 0, 0, 0.15);
}

.showcase-image-2 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(255, 50, 50, 0.15);
}

.showcase-image-3 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(255, 100, 100, 0.15);
}

/* Floating Elements and Connection Lines */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, 
                rgba(0, 0, 0, 0),
                rgba(255, 0, 0, 0.7),
                rgba(255, 50, 50, 0.7),
                rgba(0, 0, 0, 0));
  opacity: 0;
  animation: lineReveal 2s ease-out forwards;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.line-1 {
  top: 30%;
  left: 25%;
  width: 50%;
  transform: rotate(15deg);
  animation-delay: 1.2s;
}

.line-2 {
  top: 45%;
  right: 25%;
  width: 40%;
  transform: rotate(-10deg);
  animation-delay: 1.5s;
  background: linear-gradient(to right, 
                rgba(0, 0, 0, 0),
                rgba(255, 50, 50, 0.7),
                rgba(255, 0, 0, 0.7),
                rgba(0, 0, 0, 0));
}

.line-3 {
  top: 65%;
  left: 30%;
  width: 45%;
  transform: rotate(5deg);
  animation-delay: 1.8s;
  background: linear-gradient(to right, 
                rgba(0, 0, 0, 0),
                rgba(180, 0, 0, 0.7),
                rgba(255, 50, 50, 0.7),
                rgba(0, 0, 0, 0));
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.floating-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 0, 0, 0.2),
              0 0 20px rgba(255, 0, 0, 0.3);
  border: 1px solid rgba(255, 0, 0, 0.1);
  animation: float 6s ease-in-out infinite;
}

.icon-1 {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
  background: rgba(255, 0, 0, 0.15);
}

.icon-2 {
  top: 75%;
  left: 60%;
  animation-delay: 2s;
  background: rgba(220, 20, 20, 0.15);
}

.icon-3 {
  top: 40%;
  right: 15%;
  animation-delay: 1s;
  background: rgba(180, 0, 0, 0.15);
}

/* Animations */
@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineReveal {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 0.7;
    width: 100%;
  }
}

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

@keyframes particleShift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes gradientPulse {
  0% {
    opacity: 0.7;
    background-position: 0% 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    background-position: 100% 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .showcase-image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
  }
  
  .showcase-image-3 {
    grid-column: span 2;
    max-width: 70%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .logistics-showcase {
    padding: 100px 0 60px;
  }
  
  .logistics-showcase h1 {
    font-size: 2.5rem;
  }
  
  .showcase-subtitle {
    font-size: 1.1rem;
  }
  
  .showcase-image-grid {
    grid-template-columns: 1fr;
  }
  
  .showcase-image-3 {
    grid-column: span 1;
    max-width: 100%;
  }
  
  .showcase-cta {
    flex-direction: column;
    gap: 15px;
  }
  
  .floating-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
}

/* Grid Pattern Overlay */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: 0;
    animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Enhanced Hero Badge with Animated Border */
.hero-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.hero-badge {
    background: rgba(20, 20, 20, 0.7);
    border: 2px solid rgba(220, 20, 20, 0.7);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(220, 20, 20, 0.3);
    transform: scale(1.2); /* Increased size by 20% */
    transition: all 0.3s ease;
    text-align: center;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px;
    background: linear-gradient(45deg, #ff0000, #ff6600, #ff0000);
    z-index: -1;
    opacity: 0.7;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.hero-badge span {
    position: relative;
    z-index: 3;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* Enhanced Animated Heading */
.animated-heading {
    overflow: visible;
    margin-top: 0;
    clear: both; /* Ensures the heading starts on a new line */
}

.text-reveal {
    /* display: block; */
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.text-reveal:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Enhanced highlight animation styles - fixed timing */
.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  bottom: 0;
  background: rgba(255, 0, 0, 0.07);
  z-index: -1;
  border-radius: 5px;
  transform: skewX(-5deg);
  animation: highlightPulse 2s infinite alternate;
  /* No animation-delay here */
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ff0000;
  z-index: -1;
  border-radius: 2px;
  animation: highlightBarPulse 2s infinite alternate;
  /* Reduced delay to make it appear sooner */
  animation-delay: 0.2s;
}

@keyframes highlightPulse {
  0% {
    background: rgba(255, 0, 0, 0.07);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
  }
  100% {
    background: rgba(255, 0, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
  }
}

@keyframes highlightBarPulse {
  0% {
    transform: scaleX(0.8);
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
  }
}

/* Character animation with reduced delays */
.highlight .char {
  display: inline-block;
  animation: charPulse 1s infinite alternate;
  /* Much shorter delay between characters */
  animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes charPulse {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
  }
  100% {
    transform: translateY(-2px);
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 5px rgba(255, 255, 255, 0.3);
  }
}

/* Make sure the highlight is fully visible immediately */
.accent-text {
  opacity: 1 !important; /* Override any opacity animations that might delay visibility */
  transform: translateY(0) !important; /* Override any transform animations */
}

.text-line:nth-child(4) {
  animation-delay: 0.1s !important; /* Override the previous longer delay */
}

/* Enhanced Highlight Effect */
.highlight {
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    animation: textPulse 3s infinite alternate;
}

@keyframes textPulse {
    0% {
        text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
    }
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: rgba(255, 0, 0, 0.2);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: highlightReveal 1.5s 1s forwards;
}

/* Enhanced Hero Description */
.hero-description {
  text-align: left;
    font-size: 1.0rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    max-width: 95%;
    opacity: 0;
    animation: fadeIn 1s 1.2s forwards;
    position: relative;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-color);
    transform: translateY(20px);
}

/* .hero-description::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-red);
    animation: widthGrow 1.5s 1.5s forwards;
} */

@keyframes widthGrow {
    from {
        width: 0;
    }
    to {
        width: 50px;
    }
}

/* Enhanced Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1.2rem;
    margin-left: 20px;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeIn 1s 1.8s forwards;
}

.hero-buttons .btn {
    position: relative;
    overflow: hidden;
}

.hero-buttons .btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s, opacity 0.5s;
}

.hero-buttons .btn-primary:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Enhanced Hero Stats */
.hero-stats {
    display: flex;
    gap: 3rem;
    opacity: 0;
    animation: fadeIn 1s 2s forwards;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.hero-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.1), transparent);
    animation: statsSweep 3s infinite;
}

@keyframes statsSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.3), transparent);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
}

.stat-number::after {
    content: '+';
    position: absolute;
    font-size: 1.5rem;
    top: 0;
    right: -15px;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.7rem;
    font-weight: 500;
}

/* Enhanced Dashboard Container */
.dashboard-container {
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.4));
    margin: 60px 50px;
    animation: dashboardFloat 6s ease-in-out infinite;
}

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

.dashboard-container::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), transparent);
    border-radius: 30px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    filter: blur(10px);
}

.dashboard-container:hover::before {
    opacity: 1;
}

.dashboard-img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    transform: perspective(1200px) rotateY(-8deg) rotateX(5deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 0, 0, 0.15);
    filter: contrast(1.08) brightness(1.08);
}

.dashboard-container:hover .dashboard-img {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
    border-color: rgba(255, 0, 0, 0.3);
}

/* Enhanced Floating Elements with Hover Animation */
.floating-element,
.floating-card[data-type="real-time-tracking"],
.floating-card[data-type="digital-payments"],
.floating-card[data-type="ai-matching"] {
    position: absolute;
    z-index: 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.15);
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: center;
}

.floating-element:hover,
.floating-card[data-type="real-time-tracking"]:hover,
.floating-card[data-type="digital-payments"]:hover,
.floating-card[data-type="ai-matching"]:hover {
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 25px 50px rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.5);
    z-index: 10;
}

.floating-element::before,
.floating-card[data-type="real-time-tracking"]::before,
.floating-card[data-type="digital-payments"]::before,
.floating-card[data-type="ai-matching"]::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: inherit;
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), transparent, rgba(255, 0, 0, 0.3));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-element:hover::before,
.floating-card[data-type="real-time-tracking"]:hover::before,
.floating-card[data-type="digital-payments"]:hover::before,
.floating-card[data-type="ai-matching"]:hover::before {
    opacity: 1;
}

/* Enhanced icon animation on hover */
.floating-element i,
.floating-card[data-type="real-time-tracking"] i,
.floating-card[data-type="digital-payments"] i,
.floating-card[data-type="ai-matching"] i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-element:hover i,
.floating-card[data-type="real-time-tracking"]:hover i,
.floating-card[data-type="digital-payments"]:hover i,
.floating-card[data-type="ai-matching"]:hover i {
    transform: scale(1.15) translateY(-5px);
}

/* Enhanced Truck Icon */
.truck-icon {
    top: -45px;
    left: 15%;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    color: white;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 15px 30px rgba(255, 0, 0, 0.3);
    animation: floatSpecial 5s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 6;
    transform: rotate(-5deg);
    position: relative;
}

.truck-icon i {
    animation: truckMove 3s ease-in-out infinite;
}

@keyframes truckMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Enhanced Hero Section - Red & Black Theme */
.hero {
    position: relative;
    min-height: 100vh;
    background-color: #0a0a0a;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
  }
  
  .hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 50%, rgba(255, 0, 0, 0.05) 0%, rgba(10, 10, 10, 0) 50%);
    z-index: 1;
  }
  
  .grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 2;
  }
  
  .floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.1;
    z-index: 1;
  }
  
  .shape1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff3000, transparent 70%);
    top: -150px;
    left: 10%;
    animation: floatShape 25s infinite alternate;
  }
  
  .shape2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ff0000, transparent 70%);
    bottom: -200px;
    right: 5%;
    animation: floatShape 20s infinite alternate-reverse;
  }
  
  .shape3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #ff5000, transparent 70%);
    top: 20%;
    right: 20%;
    animation: floatShape 15s infinite alternate;
  }
  
  .particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  .hero .container {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 2rem;
    position: relative;
    z-index: 5;
    padding: 4rem 2rem;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
    text-align: left;
  }
  
  .badge-container {
    margin-bottom: 1.5rem;
  }
  
  .badge {
    margin-top: 70px;
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(255, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 20px;
    color: #ff3030;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
    animation: badgePulse 3s infinite alternate;
  }
  
  @keyframes badgePulse {
    0% {
      box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
    }
    100% {
      box-shadow: 0 2px 12px rgba(255, 0, 0, 0.2);
    }
  }
  
  .animated-heading {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 2rem;
    text-transform: none;
    letter-spacing: -1px;
  }
  
  .text-line {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
  }
  
  .text-line:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .text-line:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .text-line:nth-child(4) {
    animation-delay: 0.8s;
  }
  
  .truck-icon {
    width: 40px;
    height: 40px;
    background-color: #2e3546;
    border-radius: 8px;
    margin-right: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808080"><path d="M18,18.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S18.83,18.5,18,18.5z M18.5,12h-10V5h-1c-0.55,0-1,0.45-1,1v10h2c0,1.66,1.34,3,3,3s3-1.34,3-3h4c0,1.66,1.34,3,3,3s3-1.34,3-3h2v-3.5L18.5,12z M7,18.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S7.83,18.5,7,18.5z M20,10.5V13h-3V10h1.5L20,10.5z M6,6.5H8.5V8H6V6.5z M3.5,12h1V10h-2v2H3.5z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
  }
  
  .truck-info {
    display: flex;
    flex-direction: column;
  }
  
  .truck-id {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .online {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
  }
  
  .performance-panel {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  
  .chart-icon {
    width: 30px;
    height: 30px;
    background-color: #2e3546;
    border-radius: 8px;
    margin-right: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808080"><path d="M11,2v20c-5.1-0.5-9-4.8-9-10S5.9,2.5,11,2z M13.6,3.8c3.5,1.2,6,4.5,6.4,8.2h-6.4V3.8z M13.6,14H20c-0.4,3.7-2.9,7-6.4,8.2V14z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
  }
  
  .chart-title {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .chart-content {
    display: flex;
    justify-content: center;
    padding: 10px 0;
  }
  
  .circle-progress {
    position: relative;
    width: 80px;
    height: 80px;
  }
  
  .circle-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  
  .circle-bg {
    fill: none;
    stroke: #2e3546;
    stroke-width: 3;
  }
  
  .circle-fill {
    fill: none;
    stroke: #4169ff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
    animation: progressFill 2s ease-out forwards;
  }
  
  @keyframes progressFill {
    0% {
      stroke-dasharray: 0, 100;
    }
    100% {
      stroke-dasharray: 90, 100;
    }
  }
  
  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
  }
  
  .expense-panel {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  
  .expense-text {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .wave-graph {
    height: 50px;
    margin-top: 10px;
  }
  
  .wave-graph svg {
    width: 100%;
    height: 100%;
  }
  
  .map-panel {
    grid-column: 3 / 5;
    grid-row: 2;
  }
  
  .tracking-text {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .map-container {
    height: 150px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 10px;
  }
  
  .map-bg {
    width: 100%;
    height: 100%;
    background-color: #141824;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23141824" width="100" height="100"/><path fill="%231A1F2C" d="M0,0h50v50H0V0z M50,50h50v50H50V50z"/></svg>');
    background-size: 20px 20px;
  }
  
  .route-path {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4169ff, transparent);
    opacity: 0.7;
  }
  
  .location-marker {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 10px;
    height:
    10px;
    background-color: #4169ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgba(65, 105, 255, 0.2);
    animation: pulseMarker 2s infinite;
  }
  
  @keyframes pulseMarker {
    0% {
      box-shadow: 0 0 0 0 rgba(65, 105, 255, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(65, 105, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(65, 105, 255, 0);
    }
  }
  
  .payment-panel {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  
  .payment-title {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .payment-date {
    margin-left: auto;
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
  }
  
  .payment-date::after {
    content: "▼";
    font-size: 0.6rem;
    margin-left: 5px;
  }
  
  .payment-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 10px 0;
  }
  
  .payment-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .stat-value {
    font-size: 0.9rem;
    color: #4cd964;
    font-weight: 600;
  }
  


/* Enhanced Notification */
.notification {
    top: 30%;
    right: -50px;
    background: rgba(45, 45, 45, 0.9);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    animation: floatSpecial 4.5s ease-in-out infinite;
    animation-delay: 0.7s;
    border: 1px solid rgba(255, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 6;
    transform: rotate(3deg);
    position: relative;
}

.notification-dot {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    position: relative;
    animation: notificationPulse 1.5s infinite;
}

@keyframes notificationPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Enhanced Data Card */
.data-card {
    bottom: 15%;
    left: -60px;
    background: rgba(45, 45, 45, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    width: 200px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    animation: floatSpecial 5.2s ease-in-out infinite;
    animation-delay: 1.2s;
    border: 1px solid rgba(255, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 6;
    transform: rotate(-3deg);
    position: relative;
}

.data-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 80px;
}

.chart-bar {
    flex: 1;
    background: var(--gradient-red);
    border-radius: 4px;
    transition: height 0.5s ease;
    animation: chartGrow 3s infinite alternate;
}

.chart-bar:nth-child(1) {
    animation-delay: 0s;
}

.chart-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.chart-bar:nth-child(3) {
    animation-delay: 0.4s;
}

.chart-bar:nth-child(4) {
    animation-delay: 0.6s;
}

.chart-bar:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes chartGrow {
    0% {
        height: var(--min-height, 30%);
    }
    100% {
        height: var(--max-height, 70%);
    }
}

/* Enhanced Location Pin */
.location-pin {
    bottom: 40%;
    right: 20%;
    z-index: 6;
    animation: floatPulse 4.8s ease-in-out infinite;
    animation-delay: 1.5s;
    filter: drop-shadow(0 10px 20px rgba(255, 0, 0, 0.4));
}

.pin-dot {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.pin-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse-ring 2.5s infinite;
}

/* Enhanced Floating Cards */
.floating-card {
    position: absolute;
    background: rgba(45, 45, 45, 0.9);
    color: white;
    padding: 1.2rem 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 0, 0, 0.25);
    z-index: 3;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    transform-origin: center;
}

.floating-card i {
    color: var(--light-color);
    font-size: 1.4rem;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.floating-card:hover i {
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 25px 50px rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.5);
    z-index: 10;
}

.card-1 {
    top: 5%;
    left: -30%;
    animation: floatSpecial 5s ease-in-out infinite;
    animation-delay: 0.2s;
    z-index: 5;
    transform: rotate(-5deg);
}

.card-2 {
    top: 60%;
    right: -30%;
    animation: floatSpecial 5.5s ease-in-out infinite;
    animation-delay: 1s;
    z-index: 5;
    transform: rotate(5deg);
}

.card-3 {
    bottom: 5%;
    left: 0%;
    animation: floatSpecial 6s ease-in-out infinite;
    animation-delay: 1.8s;
    z-index: 5;
    transform: rotate(-3deg);
}

/* Add logistics-themed animated routes */
.route-path {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('../assets/map.png');  /* Add map background */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;  /* Adjust opacity to not overwhelm other elements */
}

.route-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.3), transparent);
    height: 2px;
    width: 150px;
    opacity: 0;
    animation: routeAnimate 4s linear infinite;
}

.route-line-1 {
    top: 20%;
    left: 30%;
    transform: rotate(30deg);
    animation-delay: 0s;
}

.route-line-2 {
    top: 60%;
    right: 20%;
    transform: rotate(-45deg);
    animation-delay: 1s;
}

.route-line-3 {
    bottom: 30%;
    left: 40%;
    transform: rotate(15deg);
    animation-delay: 2s;
}

@keyframes routeAnimate {
    0% {
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        width: 150px;
        opacity: 0;
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .animated-heading {
        font-size: 3rem;
    }
    
    .hero .container {
        gap: 2rem;
    }
}

@media (max-width: 992px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
    
    .hero-image {
        order: -1;
    }
    
    .dashboard-container {
        margin: 30px 20px;
    }
    
    .animated-heading {
        font-size: 2.5rem;
    }
    
    .lifecycle-stage {
        flex-direction: column !important;
        align-items: center;
        margin-bottom: 5rem;
    }
    
    .stage-animation, .stage-content {
        width: 90%;
        margin-bottom: 1rem;
    }
    
    .timeline-progress {
        left: 20px;
    }
    
    .connection-animation {
        left: 20px;
    }
    
    .central-truck-animation {
        display: none;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .animated-heading {
        font-size: 1.8rem;
    }
    
    .hero-badge {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
    
    .stat-number {
        font-size: 2.2rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .animation-card {
        padding: 1.5rem;
    }
    
    .animation-container {
        height: 150px;
    }
    
    .animation-card h3 {
        font-size: 1.2rem;
    }
    
    .stage-content {
        padding: 1.5rem;
    }
    
    .stage-number {
        font-size: 2.5rem;
    }
    
    .stage-content h3 {
        font-size: 1.2rem;
    }
    
    .lifecycle-cta h3 {
        font-size: 1.5rem;
    }
}

/* Animation Enhancements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Enhance Lottie animations */
lottie-player {
    width: 100%;
    height: 100%;
}

/* Add glow effect to Lottie animations */
.animation-container lottie-player::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Particles JS Styling */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#particles-js canvas {
    filter: brightness(1.5) contrast(1.2) !important;
    mix-blend-mode: screen;
}

/* Hero Particles Background */
#hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#hero-particles canvas {
    opacity: 0.6;
    mix-blend-mode: screen;
}

/* Animated Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 1s 2.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.1), transparent);
    animation: mouseScan 2s infinite;
}

@keyframes mouseScan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

.wheel {
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.arrow {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    transform: rotate(45deg);
    animation: arrowDown 2s infinite;
    opacity: 0;
}

.arrow span:nth-child(2) {
    animation-delay: 0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrowDown {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
}

/* Animated Typing Cursor Effect */
.hero-description.typing {
    border-right: 3px solid var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    width: 0;
    max-width: 100%;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color) }
}

/* Enhanced Floating Elements with 3D Effect */
.floating-element {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.floating-element::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), transparent);
    transform: translateZ(-10px);
    border-radius: inherit;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-element:hover::after {
    opacity: 1;
}

/* Data Card Header Enhancement */
.data-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-card-header i {
    color: var(--primary-color);
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}

.data-card-header span {
    font-weight: 600;
    color: var(--light-color);
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Pin Pulse Animation Enhancement */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    70% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Enhanced Float Animations */
@keyframes floatSpecial {
    0% {
        transform: translateY(0) translateX(0) rotate(var(--rotation, 0deg));
    }
    50% {
        transform: translateY(-10px) translateX(-5px) rotate(calc(var(--rotation, 0deg) + 1deg));
    }
    100% {
        transform: translateY(0) translateX(0) rotate(var(--rotation, 0deg));
    }
}

@keyframes floatPulse {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Animated Background Shift */
@keyframes backgroundShift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Text Reveal Animation */
@keyframes revealText {
    to {
        transform: translateY(0);
    }
}

@keyframes textRevealMask {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

@keyframes highlightReveal {
    to {
        transform: scaleX(1);
    }
}

/* Digital Circuit Lines Animation */
.circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

.circuit-line {
    position: absolute;
    background: var(--primary-color);
    height: 1px;
}

.circuit-line-h1 {
    top: 20%;
    left: 0;
    width: 30%;
    animation: circuitGrow 3s linear infinite;
}

.circuit-line-h2 {
    top: 60%;
    right: 0;
    width: 40%;
    animation: circuitGrow 4s linear infinite;
    animation-delay: 1s;
}

.circuit-line-v1 {
    top: 0;
    left: 30%;
    height: 25%;
    width: 1px;
    animation: circuitGrowVertical 3.5s linear infinite;
}

.circuit-line-v2 {
    bottom: 0;
    right: 40%;
    height: 35%;
    width: 1px;
    animation: circuitGrowVertical 4.5s linear infinite;
    animation-delay: 2s;
}

.circuit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
    opacity: 0;
    animation: nodeFlash 4s linear infinite;
}

.circuit-node-1 {
    top: 20%;
    left: 30%;
    animation-delay: 3s;
}

.circuit-node-2 {
    top: 60%;
    right: 40%;
    animation-delay: 4s;
}

@keyframes circuitGrow {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes circuitGrowVertical {
    0% {
        height: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        height: 100%;
        opacity: 0;
    }
}

@keyframes nodeFlash {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .hero-badge {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .animated-heading {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .stat-item:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .logistics-animation-section {
        padding: 4rem 0;
    }
    
    .logistics-animation-section .section-header h2 {
        font-size: 1.8rem;
    }
    
    .animation-card h3 {
        font-size: 1.2rem;
    }
    
    .animation-overlay h2 {
        font-size: 1.6rem;
    }
}

.point-label {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.data-point:hover .point-label {
    opacity: 1;
}

/* Dashboard Notification */
.dashboard-notification {
    position: absolute;
    top: 20px;
    right: -80px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    width: 250px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    transform: translateY(-20px);
    opacity: 0;
    animation: notificationAppear 1s forwards 2s, notificationFloat 3s ease-in-out infinite 3s;
    z-index: 10;
}

@keyframes notificationAppear {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes notificationFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.notification-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff0000, #ff3300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-icon i {
    color: #fff;
    font-size: 18px;
    animation: bellShake 2s infinite 3s;
}

@keyframes bellShake {
    0%, 50%, 100% {
        transform: rotate(0);
    }
    5%, 15%, 25%, 35%, 45% {
        transform: rotate(10deg);
    }
    10%, 20%, 30%, 40% {
        transform: rotate(-10deg);
    }
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    color: #fff;
}

.notification-text {
    font-size: 12px;
    color: #ccc;
}





/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .features-section {
        padding: 80px 0;
    }
    
    .features-container {
        flex-direction: column;
    }
    
    .dashboard-notification {
        right: 0;
        top: -60px;
    }
    
    .showcase-panel.active {
        flex-direction: column;
    }
    
    .animated-heading {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .features-section {
        padding: 60px 0;
    }
    
    .feature-item {
        padding: 20px;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
    }
    
    .feature-icon i {
        font-size: 20px;
    }
    
    .feature-title {
        font-size: 1.1rem;
    }
    
    .showcase-tabs {
        flex-wrap: wrap;
    }
    
    .tab {
        padding: 15px 10px;
    }
    
    .tab i {
        font-size: 16px;
    }
    
    .tab span {
        font-size: 12px;
    }
    
    .showcase-content {
        padding: 20px;
    }
    
    .panel-info h3 {
        font-size: 1.5rem;
    }
    
    .animated-heading {
        font-size: 1.8rem;
    }
}

/* Trip Tracking Animation Section */
.trip-tracking-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #000, #111);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.trip-tracking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
    z-index: 1;
}

.trip-tracking-section .container {
    position: relative;
    z-index: 2;
}

.animation-container {
    margin-top: 60px;
    position: relative;
}

.animation-stage {
    position: relative;
    background: rgba(20, 20, 20, 0.7);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    overflow: hidden;
}

/* Journey Progress Bar */
.journey-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 50px;
    padding: 0 30px;
}

.progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

.progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    transform: translateY(-50%);
    z-index: 2;
    transition: width 0.5s ease;
}

.journey-stage {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stage-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stage-icon i {
    color: #ccc;
    font-size: 20px;
    transition: all 0.3s ease;
}

.stage-label {
    font-size: 14px;
    color: #ccc;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 100px;
}

.journey-stage.active .stage-icon {
    background: linear-gradient(135deg, #ff0000, #ff3300);
    border-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

.journey-stage.active .stage-icon i {
    color: #fff;
}

.journey-stage.active .stage-label {
    color: #fff;
    font-weight: 600;
}

.journey-stage.completed .stage-icon {
    background: #00aa00;
    border-color: #fff;
}

.journey-stage.completed .stage-icon i {
    color: #fff;
}

/* Animation Viewport */
.animation-viewport {
    position: relative;
    min-height: 400px;
    margin-bottom: 30px;
}

.animation-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translateX(50px);
}

.animation-scene.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.scene-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.mobile-device,
.dispatch-animation,
.transit-animation,
.checkpoint-animation,
.delivery-animation,
.payment-animation {
    flex: 1;
    min-width: 300px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.mobile-device {
    position: relative;
    width: 300px;
    height: 600px;
    border-radius: 30px;
    background: #000;
    padding: 10px;
    margin: 0 auto;
}

.device-screen {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
}

.scene-info {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.scene-info h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
    display: inline-block;
}

.scene-info h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #ff0000, transparent);
}

.scene-info p {
    color: #ccc;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Moving Truck Animation */
.moving-truck {
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 30px;
    color: #ff0000;
    z-index: 10;
    transition: left 0.5s ease;
}

.moving-truck i {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
    animation: truckBounce 1s infinite alternate;
}

@keyframes truckBounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

/* Animation Controls */
.animation-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.control-btn {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.3);
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.control-btn.play-btn {
    background: linear-gradient(135deg, #ff0000, #ff3300);
    border: none;
}

.control-btn.play-btn:hover {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

.control-btn.play-btn.playing i {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .journey-progress {
        overflow-x: auto;
        padding-bottom: 20px;
        justify-content: flex-start;
        gap: 40px;
    }
    
    .progress-track, .progress-fill {
        width: 100%;
    }
    
    .scene-content {
        flex-direction: column;
    }
    
    .mobile-device {
        width: 250px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .trip-tracking-section {
        padding: 80px 0;
    }
    
    .animation-stage {
        padding: 20px;
    }
    
    .stage-icon {
        width: 40px;
        height: 40px;
    }
    
    .stage-icon i {
        font-size: 16px;
    }
    
    .stage-label {
        font-size: 12px;
    }
    
    .scene-info h3 {
        font-size: 1.5rem;
    }
    
    .scene-info p {
        font-size: 1rem;
    }
    
    .control-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
}

/* Trip Tracking Motion Graphics Section */
.trip-tracking-section {
    padding: 120px 0;
    background: #000;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.trip-tracking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.1), transparent 70%);
    z-index: 1;
}

.trip-tracking-section .container {
    position: relative;
    z-index: 2;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #ccc;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

/* Motion Graphics Container */
.motion-graphics-container {
    margin-top: 60px;
    position: relative;
}

.animation-canvas {
    position: relative;
    height: 600px;
    background: #0a0a0a;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* Background Elements */
.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.imgur.com/JXgwTYs.png'); /* World map image */
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    filter: grayscale(100%) brightness(50%);
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 30px 30px;
    }
}

.glow-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glow-effects::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.2), transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(50px);
    animation: glowPulse 10s infinite alternate;
}

@keyframes glowPulse {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Timeline Progress */
.timeline-progress {
    position: absolute;
    bottom: 30px;
    left: 50px;
    right: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    z-index: 10;
}

.progress-bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    z-index: 2;
    transition: width 0.5s ease;
    animation: progressFill 30s linear forwards;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.timeline-marker {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
    transition: all 0.5s ease;
}

.marker-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.5s ease;
}

.timeline-marker.active .marker-dot {
    background: #ff0000;
    border-color: #fff;
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}

.timeline-marker.active .marker-label {
    color: #fff;
    font-weight: 600;
}

.timeline-marker.completed .marker-dot {
    background: #ff3300;
    border-color: #fff;
}

/* Central Animation Area */
.central-animation {
    position: absolute;
    top: 80px;
    left: 50px;
    right: 50px;
    height: 300px;
    z-index: 5;
}

.truck-container {
    position: absolute;
    width: 100px;
    height: 60px;
    top: 120px;
    left: 0;
    z-index: 10;
    animation: truckMove 30s linear forwards;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
}

@keyframes truckMove {
    0% {
        left: 0;
        transform: translateY(0) rotateY(0);
    }
    20% {
        left: 20%;
        transform: translateY(-20px) rotateY(0);
    }
    40% {
        left: 40%;
        transform: translateY(0) rotateY(0);
    }
    60% {
        left: 60%;
        transform: translateY(-20px) rotateY(0);
    }
    80% {
        left: 80%;
        transform: translateY(0) rotateY(0);
    }
    100% {
        left: 100%;
        transform: translateY(-20px) rotateY(0);
    }
}

.route-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.route-line {
    fill: none;
    stroke: rgba(255, 0, 0, 0.3);
    stroke-width: 3;
    stroke-dasharray: 10;
    stroke-linecap: round;
    animation: routeAnimate 30s linear infinite;
}

@keyframes routeAnimate {
    to {
        stroke-dashoffset: -500;
    }
}

.route-point {
    fill: rgba(255, 0, 0, 0.5);
    stroke: #fff;
    stroke-width: 2;
    opacity: 0;
    animation: pointAppear 30s linear forwards;
}

.route-point.point-1 {
    animation-delay: 0s;
}

.route-point.point-2 {
    animation-delay: 6s;
}

.route-point.point-3 {
    animation-delay: 12s;
}

.route-point.point-4 {
    animation-delay: 18s;
}

.route-point.point-5 {
    animation-delay: 24s;
}

@keyframes pointAppear {
    0%, 5% {
        opacity: 0;
        r: 0;
    }
    10%, 100% {
        opacity: 1;
        r: 5;
    }
}

.location-pin {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -100%);
    z-index: 4;
    opacity: 0;
}

.location-pin i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #ff0000;
    font-size: 30px;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
}

.pin-pulse {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(255, 0, 0, 0.3);
    border-radius: 50%;
    animation: pinPulse 2s infinite;
}

@keyframes pinPulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(3);
        opacity: 0;
    }
}

.pin-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
}

.pin-1 {
    top: 150px;
    left: 100px;
    animation: pinFadeIn 1s forwards 1s;
}

.pin-2 {
    top: 100px;
    left: 500px;
    animation: pinFadeIn 1s forwards 12s;
}

.pin-3 {
    top: 150px;
    left: 900px;
    animation: pinFadeIn 1s forwards 24s;
}

@keyframes pinFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -80%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -100%);
    }
}

/* Stage Information Panels */
.stage-info-container {
    position: absolute;
    top: 30px;
    right: 50px;
    width: 300px;
    z-index: 6;
}

.stage-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.stage-info.active {
    opacity: 1;
    transform: translateY(0);
}

.stage-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0000, #ff3300);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.stage-icon i {
    color: #fff;
    font-size: 20px;
}

.stage-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.stage-info p {
    color: #ccc;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Digital Elements */
.digital-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.data-stream {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff0000, transparent);
    opacity: 0.5;
    animation: dataStreamMove 5s linear infinite;
}

.stream-1 {
    top: 30%;
    left: 0;
    width: 100%;
    animation-delay: 0s;
}

.stream-2 {
    top: 50%;
    left: 0;
    width: 100%;
    animation-delay: 1s;
}

.stream-3 {
    top: 70%;
    left: 0;
    width: 100%;
    animation-delay: 2s;
}

@keyframes dataStreamMove {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.data-point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    animation: dataPointPulse 3s infinite;
}

.point-1 {
    top: 40%;
    left: 20%;
    animation-delay: 0s;
}

.point-2 {
    top: 60%;
    left: 70%;
    animation-delay: 1s;
}

.point-3 {
    top: 30%;
    left: 50%;
    animation-delay: 2s;
}

@keyframes dataPointPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Mobile Device Overlay */
.mobile-overlay {
    position: absolute;
    top: 80px;
    left: 50px;
    z-index: 7;
    opacity: 0;
    transform: translateY(20px);
    animation: mobileAppear 1s forwards 2s, mobileFloat 5s ease-in-out infinite 3s;
}

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

@keyframes mobileFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.device-frame {
    width: 220px;
    height: 440px;
    background: #111;
    border-radius: 30px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.device-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.app-interface {
    padding: 15px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.app-logo {
    color: #ff0000;
    font-weight: 700;
    font-size: 18px;
}

.app-menu {
    color: #fff;
}

.trip-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.trip-status {
    display: inline-block;
    background: rgba(255, 0, 0, 0.2);
    color: #ff0000;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    margin-bottom: 10px;
}

.trip-route {
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.trip-id {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 15px;
}

.trip-progress {
    margin-top: 10px;
}

.trip-progress .progress-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.trip-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    width: 68%;
    animation: none;
}

.progress-text {
    font-size: 12px;
    color: #ccc;
    text-align: right;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .animation-canvas {
        height: 700px;
    }
    
    .central-animation {
        top: 200px;
    }
    
    .stage-info-container {
        top: 30px;
        right: 30px;
        left: 30px;
        width: auto;
    }
    
    .mobile-overlay {
        top: 400px;
    }
}

@media (max-width: 768px) {
    .trip-tracking-section {
        padding: 80px 0;
    }
    
    .animation-canvas {
        height: 800px;
    }
    
    .central-animation {
        top: 300px;
    }
    
    .timeline-progress {
        left: 20px;
        right: 20px;
    }
    
    .marker-label {
        font-size: 10px;
    }
    
    .stage-info h3 {
        font-size: 1.1rem;
    }
    
    .stage-info p {
        font-size: 0.8rem;
    }
}

/* Animation Overlay Section */
.animation-overlay-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #000, #111);
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Background Elements */
.overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 30px 30px;
    }
}

.glow-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.3;
    animation: orbFloat 15s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -100px;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.3), transparent 70%);
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    bottom: -250px;
    right: -150px;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.2), transparent 70%);
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 60%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.15), transparent 70%);
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
    }
    50% {
        transform: translate(20px, 40px) scale(0.9);
    }
    75% {
        transform: translate(-30px, 20px) scale(1.05);
    }
}

.animation-overlay-section .container {
    position: relative;
    z-index: 2;
}

/* Content Styles */
.overlay-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

.left-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    display: inline-block;
}

.left-content h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, transparent);
    border-radius: 2px;
}

.left-content p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.overlay-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.stat-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ff0000;
    margin-bottom: 5px;
    position: relative;
}

.stat-number::after {
    content: '+';
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    right: -15px;
}

.stat-label {
    font-size: 0.9rem;
    color: #ccc;
}

.right-content {
    flex: 1;
    min-width: 300px;
}

.animation-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    position: relative;
}

.animation-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), transparent);
    pointer-events: none;
}

/* Connection Elements */
.connection-elements {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 3;
}

.connection-line {
    position: absolute;
    bottom: 50px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff0000, transparent);
}

.connection-dot {
    position: absolute;
    bottom: 46px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    animation: dotPulse 2s infinite;
}

.dot-1 {
    left: 20%;
    animation-delay: 0s;
}

.dot-2 {
    left: 50%;
    animation-delay: 0.7s;
}

.dot-3 {
    left: 80%;
    animation-delay: 1.4s;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    }
    50% {
        transform: scale(1.5);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.9);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .animation-overlay-section {
        padding: 80px 0;
    }
    
    .left-content h2 {
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .animation-overlay-section {
        padding: 60px 0;
    }
    
    .left-content h2 {
        font-size: 1.8rem;
    }
    
    .left-content p {
        font-size: 1rem;
    }
    
    .overlay-stats {
        gap: 20px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
}

/* Typewriter Animation Styles */
.typewriter-container {
    display: block;
        width: 100%;
    position: relative;
    text-align: left;
}

    .typewriter-heading {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 2rem 0;
    color: #fff;
    position: relative;
    max-width: 60%;
    text-align: left !important; /* Force left alignment */
    overflow: visible;
    padding: 1rem 0;
    transition: all 0.5s ease;
    display: inline-block; /* Ensures the heading takes only the width it needs */
}

/* If there are any parent elements that might be centering the content, override them */
.typewriter-heading-section,
.typewriter-heading-section > div,
.typewriter-heading-section > div > div {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.highlight-text {
    color: #ff0000;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    position: relative;
    display: inline;
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 0, 0, 0.7);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
}

.typewriter-heading:hover .highlight-text::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (max-width: 992px) {
    .typewriter-heading {
        font-size: 1.6rem;
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .typewriter-heading {
        font-size: 1.4rem;
        line-height: 1.5;
        max-width: 90%;
    }
}

@media (max-width: 576px) {
    .typewriter-heading {
        font-size: 1.2rem;
        max-width: 100%;
        margin: 1.5rem 0;
    }
}

/* For responsive design */
@media (max-width: 992px) {
    .typewriter-text {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .typewriter-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .typewriter-text {
        font-size: 1.2rem;
        white-space: normal;
        display: inline-block;
        width: 100%;
    }
}



/* Partners Section Styles - Updated background to black */
.partners-section {
    position: relative;
    padding: 100px 0;
    background: #000000; /* Changed to pure black */
    overflow: hidden;
}

.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Updated grid overlay with dot pattern */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 30px 30px, 60px 60px;
    z-index: 1;
}

/* Add subtle noise texture */
.section-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    opacity: 0.3;
    z-index: 1;
}

/* Enhanced glow orbs */
.glow-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.orb-1 {
    top: 20%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    animation: orbFloat 20s infinite alternate ease-in-out;
}

.orb-2 {
    bottom: 10%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    animation: orbFloat 25s infinite alternate-reverse ease-in-out;
}

/* Add digital circuit pattern */
.digital-circuit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgMTBoODB2ODBIMTB6IiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjM5LCA2OCwgNjgsIDAuMDgpIiBzdHJva2Utd2lkdGg9Ii41Ii8+PHBhdGggZD0iTTIwIDEwdjEwbTEwLTEwdjIwbTEwLTIwdjEwbTEwLTEwdjMwbTEwLTMwdjEwbTEwLTEwdjIwbTEwLTIwdjEwTTEwIDIwaDEwbS0xMCAxMGgyMG0tMjAgMTBoMTBtLTEwIDEwaDMwbS0zMCAxMGgxMG0tMTAgMTBoMjBtLTIwIDEwaDEwIiBzdHJva2U9InJnYmEoMjM5LCA2OCwgNjgsIDAuMTIpIiBzdHJva2Utd2lkdGg9Ii41IiBmaWxsPSJub25lIi8+PC9zdmc+');
    opacity: 0.1;
    z-index: 1;
}

/* Add subtle vignette effect */
.vignette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Add horizontal light beam effect */
.light-beam {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.2), transparent);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    z-index: 1;
    animation: lightBeam 8s infinite ease-in-out;
}

@keyframes lightBeam {
    0%, 100% {
        opacity: 0;
        top: 20%;
    }
    50% {
        opacity: 0.5;
        top: 70%;
    }
}

.partners-container {
    position: relative;
    z-index: 2;
    margin: 60px 0;
}

.partners-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.partners-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.partner-item {
    perspective: 1000px;
}

.partner-card {
    position: relative;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.partner-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transform: rotate(30deg);
    animation: shimmerEffect 6s infinite linear;
    z-index: 2;
}

@keyframes shimmerEffect {
    0% {
        transform: translateX(-100%) rotate(30deg);
    }
    100% {
        transform: translateX(100%) rotate(30deg);
    }
}

.partner-logo {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.5s ease;
}

.partner-logo img {
    max-width: 80%;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.5);
    transition: all 0.5s ease;
}

.partner-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(239, 68, 68, 0.9), transparent);
    color: white;
    transform: translateY(100%);
    transition: all 0.5s ease;
    z-index: 4;
}

.partner-hover h4 {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 600;
}

.partner-hover p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.partner-card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.partner-card:hover .partner-logo {
    transform: translateY(-20px) scale(0.8);
}

.partner-card:hover .partner-logo img {
    filter: grayscale(0%) brightness(1);
}

.partner-card:hover .partner-hover {
    transform: translateY(0);
}

.partners-cta {
    text-align: center;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.partners-cta p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.partners-cta .btn {
    padding: 12px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
}

.partners-cta .btn i {
    transition: transform 0.3s ease;
}

.partners-cta .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(185, 28, 28, 0.3);
}

.partners-cta .btn:hover i {
    transform: translateX(5px);
}

.circuit-lines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.circuit-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), transparent);
    height: 1px;
}

.line-1 {
    bottom: 20%;
    left: 0;
    width: 100%;
    animation: lineGrow 3s forwards ease-out;
}

.line-2 {
    bottom: 40%;
    right: 0;
    width: 0;
    animation: lineGrow 3s 0.5s forwards ease-out;
}

.circuit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
    opacity: 0;
    animation: nodePulse 2s 1s forwards infinite;
}

.node-1 {
    bottom: 20%;
    left: 30%;
}

@keyframes lineGrow {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes nodePulse {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* ======== MARQUEE SECTION ======== */
.marquee-section {
    position: relative;
    padding: 5rem 0;
    background-color: black;
    overflow: hidden;
}

.marquee-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(230, 0, 0, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(230, 0, 0, 0.08) 0%, transparent 60%);
    z-index: 1;
}

.marquee-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.marquee-title-container {
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
}

.marquee-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.marquee-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-color), var(--primary-dark));
    border-radius: 2px;
}

.marquee-title span {
    position: relative;
    z-index: 1;
}

.marquee-title-badge {
    position: absolute;
    top: -15px;
    right: -30px;
    background-color: var(--primary-color);
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    transform: rotate(15deg);
    box-shadow: 0 4px 10px rgba(230, 0, 0, 0.3);
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
    --mask-gradient-color: rgba(13, 13, 13, 1);
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        var(--mask-gradient-color) 10%,
        var(--mask-gradient-color) 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        var(--mask-gradient-color) 10%,
        var(--mask-gradient-color) 90%,
        transparent 100%
    );
}

.partners-track {
    display: flex;
    animation: marqueeRightToLeft 50s linear infinite;
    width: fit-content;
}

.clients-track {
    display: flex;
    animation: marqueeLeftToRight 50s linear infinite;
    width: fit-content;
}

@keyframes marqueeRightToLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marqueeLeftToRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.marquee-item {
    flex-shrink: 0;
    padding: 0 2rem;
}

.marquee-card {
    position: relative;
    width: 220px;
    height: 140px;
    background: rgba(26, 26, 26, 0.7);
    border-radius: var(--card-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem; /* Increased padding from 1.5rem to 2.5rem */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box; /* Ensure padding is included in width/height */
}

.marquee-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    z-index: 2;
    transition: var(--transition-fast);
    animation: shimmerEffect 3s infinite;
}

@keyframes shimmerEffect {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.marquee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(230, 0, 0, 0.1);
    border-color: rgba(230, 0, 0, 0.2);
}

.marquee-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-medium);
}

.marquee-logo img {
    max-width: 90%; /* Adjusted from 80% to 90% */
    max-height: 90%; /* Adjusted from 80% to 90% */
    object-fit: contain;
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.7;
    transition: var(--transition-medium);
}

.marquee-card:hover .marquee-logo img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.marquee-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--text-light);
    font-size: 0.85rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.marquee-card:hover .marquee-info {
    transform: translateY(0);
}

.marquee-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: 3rem 0;
    opacity: 0.3;
}

.marquee-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0.75rem; /* Increased top/bottom padding from 0.75rem to 1rem */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--text-light);
    font-size: 0.85rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* Responsive adjustments with preserved padding */
@media screen and (max-width: 768px) {
    .marquee-card {
        width: 180px;
        height: 120px;
        padding: 2rem; /* Slightly reduced but still generous padding */
    }
    
    .marquee-logo {
        padding: 0.75rem; /* Adjusted padding for smaller screens */
    }
}

@media screen and (max-width: 576px) {
    .marquee-card {
        width: 160px;
        height: 100px;
        padding: 1.5rem; /* Further reduced but still adequate padding */
    }
    
    .marquee-logo {
        padding: 0.5rem; /* Smaller padding for mobile */
    }
    
    .marquee-info {
        padding: 0.75rem 0.5rem; /* Reduced padding for info section on mobile */
    }
}



/* Continuing the enhanced hero section CSS */

.up-icon {
  font-size: 0.8rem;
  margin-left: 2px;
}

.stat-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 25px;
}

.stat-bar {
  width: 4px;
  height: 10px;
  background-color: #2e3546;
  border-radius: 2px;
}

.stat-bar.active {
  height: 20px;
  background-color: #4169ff;
}

.km-panel {
  grid-column: 3 / 5;
  grid-row: 3;
}

.km-title {
  font-size: 0.9rem;
  color: #ddd;
}

.km-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 10px 0;
}

.route-graph {
  position: relative;
  height: 40px;
}

.route-graph svg {
  width: 100%;
  height: 100%;
}

.milestone {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 0.7rem;
  color: #999;
  background-color: #2e3546;
  padding: 2px 6px;
  border-radius: 4px;
}

.reflection {
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 20px;
  background: linear-gradient(to bottom, rgba(65, 105, 255, 0.2), transparent);
  filter: blur(5px);
  border-radius: 50%;
  z-index: -1;
}

.dashboard-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(65, 105, 255, 0.15);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.dashboard-container:hover .dashboard-glow {
  opacity: 1;
}

/* Animation keyframes */
@keyframes floatShape {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(20px);
  }
  100% {
    transform: translateY(20px) translateX(-20px);
  }
}

/* Custom hover effect for dashboard panels */
.dashboard-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(65, 105, 255, 0.1), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
  pointer-events: none;
}

.dashboard-panel:hover::before {
  opacity: 1;
}

/* Data point animations */
.data-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #4169ff;
  border-radius: 50%;
  z-index: 3;
}

.data-point:nth-child(1) {
  top: 20%;
  left: 30%;
  animation: dataPulse 3s infinite;
}

.data-point:nth-child(2) {
  top: 40%;
  right: 25%;
  animation: dataPulse 3s infinite 1s;
}

.data-point:nth-child(3) {
  bottom: 30%;
  left: 40%;
  animation: dataPulse 3s infinite 2s;
}

@keyframes dataPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(65, 105, 255, 0.5);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 0 5px rgba(65, 105, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(65, 105, 255, 0);
  }
}

/* Add connection lines between data points */
.connection-line {
  position: absolute;
  background: linear-gradient(90deg, #4169ff, transparent);
  height: 1px;
  transform-origin: left center;
  opacity: 0.3;
  z-index: 2;
}

.connection-line-1 {
  top: 22%;
  left: 31%;
  width: 150px;
  transform: rotate(25deg);
}

.connection-line-2 {
  top: 42%;
  left: 31%;
  width: 180px;
  transform: rotate(-15deg);
}

/* Interactive lighting effect */
.dashboard-mockup::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 60%);
  pointer-events: none;
}

/* Add dynamic elements */
.dynamic-notification {
  position: absolute;
  top: 15%;
  right: 10%;
  background-color: #1e2536;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: scale(0);
  animation: notificationPop 0.5s forwards 3s, notificationFloat 3s infinite 3.5s;
  z-index: 10;
}

@keyframes notificationPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes notificationFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.notification-icon {
  width: 20px;
  height: 20px;
  background-color: #4169ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.notification-text {
  font-size: 0.8rem;
  color: #fff;
}

/* Responsive styles */
@media (max-width: 1200px) {
  .animated-heading {
    font-size: 4rem;
  }
  
  .dashboard-content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    min-height: 300px;
  }
  
  .truck-panel {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  
  .performance-panel {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  
  .expense-panel {
    grid-column: 1 / 2;
    grid-row: 3;
  }
  
  .map-panel {
    grid-column: 2 / 3;
    grid-row: 3;
  }
  
  .payment-panel {
    grid-column: 1 / 2;
    grid-row: 4;
  }
  
  .km-panel {
    grid-column: 2 / 3;
    grid-row: 4;
  }
}

@media (max-width: 992px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-content {
    padding-left: 0;
    text-align: center;
    order: 1;
  }
  
  .animated-heading {
    font-size: 3.5rem;
  }
  
  .hero-description {
    margin: 0 auto 2.5rem;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .hero-image {
    order: 0;
    margin-bottom: 2rem;
  }
  
  .scroll-indicator {
    display: none;
  }
  
  .badge-container {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .animated-heading {
    font-size: 3rem;
  }
  
  .dashboard-mockup {
    transform: none;
  }
  
  .dashboard-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 15px;
  }
  
  .truck-panel,
  .performance-panel,
  .expense-panel,
  .map-panel,
  .payment-panel,
  .km-panel {
    grid-column: 1;
  }
  
  .truck-panel {
    grid-row: 1;
  }
  
  .performance-panel {
    grid-row: 2;
  }
  
  .expense-panel {
    grid-row: 3;
  }
  
  .map-panel {
    grid-row: 4;
  }
  
  .payment-panel {
    grid-row: 5;
  }
  
  .km-panel {
    grid-row: 6;
  }
  
  .integration-badge {
    width: 40px;
    height: 40px;
  }
  
  .integration-badge img {
    width: 24px;
  }
}

@media (max-width: 576px) {
  .animated-heading {
    font-size: 2.5rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .no-card-note {
    margin-top: -1rem;
  }
  
  .btn-primary {
    width: 100%;
  }
  
  .integration-badge {
    display: none;
  }
}

/* Initialize particles.js for the hero section */
document.addEventListener('DOMContentLoaded', function() {
  if (typeof particlesJS !== 'undefined') {
    particlesJS('hero-particles', {
      "particles": {
        "number": {
          "value": 40,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#ff0000"
        },
        "shape": {
          "type": "circle"
        },
        "opacity": {
          "value": 0.1,
          "random": true
        },
        "size": {
          "value": 3,
          "random": true
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ff0000",
          "opacity": 0.1,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 1,
          "direction": "none",
          "random": true,
          "straight": false,
          "out_mode": "out",
          "bounce": false
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          }
        },
        "modes": {
          "grab": {
            "distance": 140,
            "line_linked": {
              "opacity": 0.4
            }
          },
          "push": {
            "particles_nb": 4
          }
        }
      },
      "retina_detect": true
    });
  }
  
  // Add 3D mouse movement effect to dashboard
  const dashboardMockup = document.querySelector('.dashboard-mockup');
  const heroSection = document.getElementById('hero-section');
  
  if (dashboardMockup && heroSection) {
    heroSection.addEventListener('mousemove', function(e) {
      const x = e.clientX / window.innerWidth - 0.5;
      const y = e.clientY / window.innerHeight - 0.5;
      
      dashboardMockup.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`;
    });
    
    heroSection.addEventListener('mouseleave', function() {
      dashboardMockup.style.transform = 'rotateX(5deg) rotateY(-5deg)';
    });
  }
  
  // Add dynamic connection lines
  if (dashboardMockup) {
    // Create data points
    const dashboardContent = document.querySelector('.dashboard-content');
    if (dashboardContent) {
      for (let i = 0; i < 3; i++) {
        const dataPoint = document.createElement('div');
        dataPoint.className = 'data-point';
        dashboardContent.appendChild(dataPoint);
      }
      
      // Create connection lines
      const connectionLine1 = document.createElement('div');
      connectionLine1.className = 'connection-line connection-line-1';
      dashboardContent.appendChild(connectionLine1);
      
      const connectionLine2 = document.createElement('div');
      connectionLine2.className = 'connection-line connection-line-2';
      dashboardContent.appendChild(connectionLine2);
      
      // Add dynamic notification
      const notification = document.createElement('div');
      notification.className = 'dynamic-notification';
      
      const notificationHeader = document.createElement('div');
      notificationHeader.className = 'notification-header';
      
      const notificationIcon = document.createElement('div');
      notificationIcon.className = 'notification-icon';
      notificationIcon.innerHTML = '!';
      
      const notificationText = document.createElement('div');
      notificationText.className = 'notification-text';
      notificationText.textContent = 'New update available';
      
      notificationHeader.appendChild(notificationIcon);
      notificationHeader.appendChild(notificationText);
      notification.appendChild(notificationHeader);
      
      dashboardContent.appendChild(notification);
    }
  }
});

/* Hero Image Showcase - New aesthetic images with animations */
.hero-image-showcase {
  position: relative;
  width: 100%;
  height: 380px;
  margin: 20px 0;
  perspective: 1200px;
  z-index: 5;
}

.showcase-image {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  width: 280px;
  height: 200px;
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
  z-index: 1;
}

/* Position each image */
.showcase-image-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(40px) rotateX(5deg);
  z-index: 3;
  animation: float1 5s ease-in-out infinite;
}

.showcase-image-2 {
  top: 70px;
  left: 10%;
  transform: translateZ(20px) rotateY(10deg);
  z-index: 2;
  animation: float2 6s ease-in-out infinite;
}

.showcase-image-3 {
  top: 90px;
  right: 10%;
  transform: translateZ(30px) rotateY(-15deg);
  z-index: 1;
  animation: float3 7s ease-in-out infinite;
}

/* Floating animations */
@keyframes float1 {
  0%, 100% {
    transform: translateX(-50%) translateZ(40px) translateY(0) rotateX(5deg);
  }
  50% {
    transform: translateX(-50%) translateZ(40px) translateY(-15px) rotateX(5deg);
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translateZ(20px) translateY(0) rotateY(10deg);
  }
  50% {
    transform: translateZ(20px) translateY(-20px) rotateY(10deg);
  }
}

@keyframes float3 {
  0%, 100% {
    transform: translateZ(30px) translateY(0) rotateY(-15deg);
  }
  50% {
    transform: translateZ(30px) translateY(-10px) rotateY(-15deg);
  }
}

/* Glow effect for images */
.showcase-image::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10%;
  width: 80%;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.2);
  filter: blur(10px);
  opacity: 0.7;
  z-index: -1;
}

/* Hover effects */
.showcase-image:hover {
  transform: scale(1.05) translateZ(60px);
  z-index: 10;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.6);
}

.showcase-image-1:hover {
  transform: translateX(-50%) scale(1.05) translateZ(60px);
}

.showcase-image:hover img {
  transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-image-showcase {
    height: 320px;
  }
  
  .showcase-image {
    width: 220px;
    height: 160px;
  }
  
  .showcase-image-2 {
    left: 5%;
  }
  
  .showcase-image-3 {
    right: 5%;
  }
}

@media (max-width: 768px) {
  .hero-image-showcase {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: none;
  }
  
  .showcase-image {
    position: relative;
    width: 80%;
    max-width: 320px;
    margin-bottom: 20px;
    top: 0;
    left: 0;
    right: 0;
  }
  
  .showcase-image-1,
  .showcase-image-2,
  .showcase-image-3 {
    animation: none;
    transform: none !important;
  }
  
  .showcase-image-1 {
    transform: translateY(0) !important;
    animation: mobileFloat 5s ease-in-out infinite;
  }
  
  .showcase-image-2 {
    transform: translateY(0) !important;
    animation: mobileFloat 5s ease-in-out infinite 1s;
  }
  
  .showcase-image-3 {
    transform: translateY(0) !important;
    animation: mobileFloat 5s ease-in-out infinite 2s;
  }
  
  @keyframes mobileFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}

/* Add animated data points connecting the images */
.image-data-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ff3333;
  border-radius: 50%;
  z-index: 4;
  animation: dataPulse 3s infinite;
}

.data-point-1 {
  top: 80px;
  left: 40%;
  animation-delay: 0s;
}

.data-point-2 {
  top: 150px;
  left: 30%;
  animation-delay: 1s;
}

.data-point-3 {
  top: 120px;
  right: 35%;
  animation-delay: 0.5s;
}

.connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0));
  z-index: 3;
  transform-origin: left center;
}

.connection-line-1 {
  width: 120px;
  top: 85px;
  left: 40%;
  transform: rotate(15deg);
  animation: lineGlow 3s infinite;
}

.connection-line-2 {
  width: 140px;
  top: 145px;
  left: 30%;
  transform: rotate(-10deg);
  animation: lineGlow 3s infinite 1s;
}

@keyframes lineGlow {
  0%, 100% {
    opacity: 0.3;
    box-shadow: 0 0 3px rgba(255, 0, 0, 0.3);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
  }
}

/* Hero section two-column layout */
.hero .container {
    margin-top: 100px;
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 2rem;
  position: relative;
  z-index: 5;
  padding: 0rem 2rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  text-align: left;
}

/* Image container on the right */
.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.8s forwards;
}

.dashboard-container {
  position: relative;
  width: 100%;
  max-width: 650px;
  perspective: 1000px;
}

.dashboard-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: rotateX(5deg) rotateY(-5deg);
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.dashboard-container:hover .dashboard-img {
  transform: rotateX(0) rotateY(0);
}

.dashboard-shadow {
  position: absolute;
  bottom: -20px;
  left: 10%;
  width: 80%;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  filter: blur(15px);
  z-index: -1;
}

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

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  
  .hero-content {
    padding-left: 0;
    text-align: center;
    order: 1;
  }
  
  .hero-image {
    order: 0;
    margin-bottom: 2rem;
  }
  
  .dashboard-img {
    transform: none;
    max-width: 100%;
  }
}

/* Dashboard mockup styling */
.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.dashboard-mockup {
  position: relative;
  width: 100%;
  background-color: #0a0e1f; /* Dark background */
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); /* Darker shadow */
  display: flex;
  overflow: hidden;
  transform: rotateX(5deg) rotateY(-5deg);
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.dashboard-mockup:hover {
  transform: rotateX(0) rotateY(0);
}

/* Sidebar styling */
.sidebar {
  width: 60px;
  min-width: 60px;
  background-color: #0a0e1f; /* Dark sidebar */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 25px;
}

.sidebar-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8d8d9b;
  transition: all 0.3s ease;
}

.sidebar-icon.active {
  background-color: #ffffff;
  color: #0a0e1f;
}

/* Dashboard content styling */
.dashboard-content {
  flex: 1;
  display: flex;
  position: relative;
  background-color: #121824; /* Darker background for content */
  overflow: hidden;
}

/* Dashboard image styling */
.dashboard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.8); /* Slightly darkened image */
}

/* Dark overlay */
.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .dashboard-mockup {
    transform: none;
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    min-width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: center;
    padding: 10px 0;
  }
  
  .dashboard-content {
    height: 300px;
  }
}

/* Enhanced Hero Section Styles */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: black;
  overflow: hidden;
  padding: 120px 0 80px;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/img/grid-pattern.svg');
  opacity: 0.1;
  animation: backgroundShift 30s linear infinite;
}

.hero-content {
  max-width: 650px;
  margin: 0 auto 0px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero-section h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  animation: titleReveal 1.2s ease-out;
}

.hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  animation: fadeUp 1.4s ease-out 0.2s both;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  animation: fadeUp 1.4s ease-out 0.4s both;
}

/* .btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  z-index: 1;
} */

.btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: -1;
}

.btn:hover::after {
  height: 100%;
}

.btn-primary {
  background: #ff0000;
  color: white;
  box-shadow: 0 4px 18px rgba(241, 113, 5, 0.3);
}

.btn-primary:hover {
  background: #ff0000;
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(241, 113, 5, 0.4);
}


.btn-outline:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

/* Reset hero image animations and overlays */
.hero-image {
  overflow: hidden;
}

.hero-image img {
  width: 450px;
  height: 300px;
  display: block;
  transform: none;
  transition: none;
}

.hero-image:hover img {
  transform: none;
}

.hero-image::before {
  display: none;
}



/* Floating Elements and Connection Lines */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  opacity: 0;
  animation: lineReveal 2s ease-out forwards;
}

.line-1 {
  top: 30%;
  left: 25%;
  width: 50%;
  transform: rotate(15deg);
  animation-delay: 1.2s;
}

.line-2 {
  top: 45%;
  right: 25%;
  width: 40%;
  transform: rotate(-10deg);
  animation-delay: 1.5s;
}

.line-3 {
  top: 65%;
  left: 30%;
  width: 45%;
  transform: rotate(5deg);
  animation-delay: 1.8s;
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.floating-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
/* Base styles */
:root {
    --primary-color: #FF0000;     /* Bright Red */
    --primary-dark: #CC0000;      /* Darker Red */
    --primary-light: #FF3333;     /* Light Red */
    --dark-color: #1A1A1A;        /* Almost Black */
    --dark-secondary: #2D2D2D;    /* Dark Grey */
    --light-color: #FFFFFF;       /* White */
    --text-color: #333333;        /* Dark Text */
    --text-light: #FFFFFF;        /* Light Text */
    --gradient-red: linear-gradient(135deg, #FF0000 0%, #FF3333 100%);
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 15px 40px rgba(255, 0, 0, 0.2);
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: #FFFFFF;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 80px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
}

img {
    /* max-width: 150px; */
    height: auto;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-light);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: #666;
    margin-bottom: 50px;
}

.section-header {
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    position: relative;
    display: inline-block;
}

/* .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    border-radius: 2px;
} */

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    text-align: center;
}

.btn-primary {
    background: var(--gradient-red);
    color: var(--light-color);
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.4);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--light-text);
}

.btn-secondary:hover {
    background-color: #e55500;
}


.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-outline-light {
    background-color: transparent;
    border: 2px solid var(--text-light);
    color: var(--text-light);
}

.btn-outline-light:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
}

.cta-container {
    text-align: center;
    margin-top: 40px;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
    opacity: 0;
}

.loading-content {
    text-align: center;
    color: var(--text-light);
    padding: 20px;
}

.loading-content img {
    max-width: 150px;
    margin-bottom: 20px;
}

.loading-text {
    font-size: 1.5rem;
    margin: 20px 0;
}

.loading-text span {
    font-weight: 700;
    margin: 0 5px;
}

.loading-content h2 {
    font-size: 2.5rem;
    margin: 20px 0;
}

.iso-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 20px;
}



/* Hero Section Redesign - Red & Black Theme */
.hero {
  position: relative;
  min-height: 100vh;
  background-color: #0a0a0a;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
}

.hero .container {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 2rem;
  position: relative;
  z-index: 5;
  padding: 4rem 2rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  text-align: left;
}

.animated-heading {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 2rem;
  text-transform: none;
  letter-spacing: -1px;
}

.accent-text {
  display: block;
  color: #fff;
}

.highlight {
  color: #ff0000;
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-size: 110%;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
  position: relative;
  z-index: 2;
  /* Remove any animation delays here */
  animation: none; /* Remove any previous animation that might be causing delay */
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
  max-width: 90%;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.btn-primary {
  background-color: #4169ff;
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(65, 105, 255, 0.3);
}

.btn-primary:hover {
  background-color: #3050d0;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(65, 105, 255, 0.4);
}

.no-card-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.arrow-sketch {
  width: 40px;
  transform: rotate(-15deg);
}

.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-container {
  position: relative;
  width: 100%;
  max-width: 650px;
  z-index: 2;
}

/* Grid Pattern Overlay */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: 0;
    animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Enhanced Hero Badge with Animated Border */
.hero-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.hero-badge {
    background: rgba(20, 20, 20, 0.7);
    border: 2px solid rgba(220, 20, 20, 0.7);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(220, 20, 20, 0.3);
    transform: scale(1.2); /* Increased size by 20% */
    transition: all 0.3s ease;
    text-align: center;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px;
    background: linear-gradient(45deg, #ff0000, #ff6600, #ff0000);
    z-index: -1;
    opacity: 0.7;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.hero-badge span {
    position: relative;
    z-index: 3;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* Enhanced Animated Heading */
.animated-heading {
    overflow: visible;
    margin-top: 0;
    clear: both; /* Ensures the heading starts on a new line */
}

.text-reveal {
    /* display: block; */
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.text-reveal:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Enhanced highlight animation styles - fixed timing */
.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  bottom: 0;
  background: rgba(255, 0, 0, 0.07);
  z-index: -1;
  border-radius: 5px;
  transform: skewX(-5deg);
  animation: highlightPulse 2s infinite alternate;
  /* No animation-delay here */
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ff0000;
  z-index: -1;
  border-radius: 2px;
  animation: highlightBarPulse 2s infinite alternate;
  /* Reduced delay to make it appear sooner */
  animation-delay: 0.2s;
}

@keyframes highlightPulse {
  0% {
    background: rgba(255, 0, 0, 0.07);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
  }
  100% {
    background: rgba(255, 0, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
  }
}

@keyframes highlightBarPulse {
  0% {
    transform: scaleX(0.8);
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
  }
}

/* Character animation with reduced delays */
.highlight .char {
  display: inline-block;
  animation: charPulse 1s infinite alternate;
  /* Much shorter delay between characters */
  animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes charPulse {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
  }
  100% {
    transform: translateY(-2px);
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 5px rgba(255, 255, 255, 0.3);
  }
}

/* Make sure the highlight is fully visible immediately */
.accent-text {
  opacity: 1 !important; /* Override any opacity animations that might delay visibility */
  transform: translateY(0) !important; /* Override any transform animations */
}

.text-line:nth-child(4) {
  animation-delay: 0.1s !important; /* Override the previous longer delay */
}

/* Enhanced Highlight Effect */
.highlight {
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    animation: textPulse 3s infinite alternate;
}

@keyframes textPulse {
    0% {
        text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
    }
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: rgba(255, 0, 0, 0.2);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: highlightReveal 1.5s 1s forwards;
}

/* Enhanced Hero Description */
.hero-description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    max-width: 95%;
    opacity: 0;
    animation: fadeIn 1s 1.2s forwards;
    position: relative;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-color);
    transform: translateY(20px);
}

/* .hero-description::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-red);
    animation: widthGrow 1.5s 1.5s forwards;
} */

@keyframes widthGrow {
    from {
        width: 0;
    }
    to {
        width: 50px;
    }
}

/* Enhanced Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1.2rem;
    margin-left: 20px;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeIn 1s 1.8s forwards;
}

.hero-buttons .btn {
    position: relative;
    overflow: hidden;
}

.hero-buttons .btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s, opacity 0.5s;
}

.hero-buttons .btn-primary:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Enhanced Hero Stats */
.hero-stats {
    display: flex;
    gap: 3rem;
    opacity: 0;
    animation: fadeIn 1s 2s forwards;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.hero-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.1), transparent);
    animation: statsSweep 3s infinite;
}

@keyframes statsSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.3), transparent);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
}

.stat-number::after {
    content: '+';
    position: absolute;
    font-size: 1.5rem;
    top: 0;
    right: -15px;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.7rem;
    font-weight: 500;
}

/* Enhanced Dashboard Container */
.dashboard-container {
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.4));
    margin: 60px 50px;
    animation: dashboardFloat 6s ease-in-out infinite;
}

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

.dashboard-container::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), transparent);
    border-radius: 30px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    filter: blur(10px);
}

.dashboard-container:hover::before {
    opacity: 1;
}

.dashboard-img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    transform: perspective(1200px) rotateY(-8deg) rotateX(5deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 0, 0, 0.15);
    filter: contrast(1.08) brightness(1.08);
}

.dashboard-container:hover .dashboard-img {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
    border-color: rgba(255, 0, 0, 0.3);
}

/* Enhanced Floating Elements with Hover Animation */
.floating-element,
.floating-card[data-type="real-time-tracking"],
.floating-card[data-type="digital-payments"],
.floating-card[data-type="ai-matching"] {
    position: absolute;
    z-index: 3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.15);
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: center;
}

.floating-element:hover,
.floating-card[data-type="real-time-tracking"]:hover,
.floating-card[data-type="digital-payments"]:hover,
.floating-card[data-type="ai-matching"]:hover {
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 25px 50px rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.5);
    z-index: 10;
}

.floating-element::before,
.floating-card[data-type="real-time-tracking"]::before,
.floating-card[data-type="digital-payments"]::before,
.floating-card[data-type="ai-matching"]::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: inherit;
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), transparent, rgba(255, 0, 0, 0.3));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-element:hover::before,
.floating-card[data-type="real-time-tracking"]:hover::before,
.floating-card[data-type="digital-payments"]:hover::before,
.floating-card[data-type="ai-matching"]:hover::before {
    opacity: 1;
}

/* Enhanced icon animation on hover */
.floating-element i,
.floating-card[data-type="real-time-tracking"] i,
.floating-card[data-type="digital-payments"] i,
.floating-card[data-type="ai-matching"] i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-element:hover i,
.floating-card[data-type="real-time-tracking"]:hover i,
.floating-card[data-type="digital-payments"]:hover i,
.floating-card[data-type="ai-matching"]:hover i {
    transform: scale(1.15) translateY(-5px);
}

/* Enhanced Truck Icon */
.truck-icon {
    top: -45px;
    left: 15%;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    color: white;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 15px 30px rgba(255, 0, 0, 0.3);
    animation: floatSpecial 5s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 6;
    transform: rotate(-5deg);
    position: relative;
}

.truck-icon i {
    animation: truckMove 3s ease-in-out infinite;
}

@keyframes truckMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Enhanced Hero Section - Red & Black Theme */
.hero {
    position: relative;
    min-height: 100vh;
    background-color: #0a0a0a;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
  }
  
  .hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 50%, rgba(255, 0, 0, 0.05) 0%, rgba(10, 10, 10, 0) 50%);
    z-index: 1;
  }
  
  .grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 2;
  }
  
  .floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.1;
    z-index: 1;
  }
  
  .shape1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff3000, transparent 70%);
    top: -150px;
    left: 10%;
    animation: floatShape 25s infinite alternate;
  }
  
  .shape2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ff0000, transparent 70%);
    bottom: -200px;
    right: 5%;
    animation: floatShape 20s infinite alternate-reverse;
  }
  
  .shape3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #ff5000, transparent 70%);
    top: 20%;
    right: 20%;
    animation: floatShape 15s infinite alternate;
  }
  
  .particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  .hero .container {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 2rem;
    position: relative;
    z-index: 5;
    padding: 4rem 2rem;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
    text-align: left;
  }
  
  .badge-container {
    margin-bottom: 1.5rem;
  }
  
  .badge {
    margin-top: 70px;
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(255, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 20px;
    color: #ff3030;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
    animation: badgePulse 3s infinite alternate;
  }
  
  @keyframes badgePulse {
    0% {
      box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
    }
    100% {
      box-shadow: 0 2px 12px rgba(255, 0, 0, 0.2);
    }
  }
  
  .animated-heading {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 2rem;
    text-transform: none;
    letter-spacing: -1px;
  }
  
  .text-line {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
  }
  
  .text-line:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .text-line:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .text-line:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  .text-line:nth-child(4) {
    animation-delay: 0.8s;
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .accent-text {
    display: block;
    color: #fff;
  }
  
  .highlight {
    color: #ff0000;
    position: relative;
    display: inline-block;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
    50% {
      text-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
    }
    100% {
      text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
  }
  
  .hero-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    max-width: 90%;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards 1s;
  }
  
  .hero-buttons {
    display: flex;
    align-items: center;
    gap: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards 1.2s;
  }
  
  .btn-primary {
    background-color: #4169ff;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(65, 105, 255, 0.3);
    position: relative;
    overflow: hidden;
  }
  
  .btn-primary:hover {
    background-color: #3050d0;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(65, 105, 255, 0.4);
  }
  
  .btn-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shine 5s infinite;
  }
  
  @keyframes shine {
    0% {
      transform: translateX(-200%) rotate(30deg);
    }
    100% {
      transform: translateX(200%) rotate(30deg);
    }
  }
  
  .no-card-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-family: 'Caveat', cursive, Arial, sans-serif;
    transform: rotate(-2deg);
  }
  
  .arrow-sketch {
    width: 60px;
    height: 40px;
    transform: rotate(-15deg);
    stroke-dasharray: 5, 2;
    animation: sketchMove 3s infinite alternate;
  }
  
  @keyframes sketchMove {
    0% {
      transform: rotate(-15deg) translateX(0);
    }
    100% {
      transform: rotate(-10deg) translateX(5px);
    }
  }
  
  .scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeIn 1s forwards 2s;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 0.7;
    }
  }
  
  .mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    position: relative;
    margin-bottom: 5px;
  }
  
  .wheel {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(15px);
      opacity: 0;
    }
  }
  
  .arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  
  .arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    animation: arrowDown 2s infinite;
  }
  
  .arrow span:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .arrow span:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes arrowDown {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
  
  /* Hero Image - Dashboard Mockup */
  .hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
  }
  
  .dashboard-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    z-index: 2;
    perspective: 1000px;
  }
  
  .dashboard-mockup {
    width: 100%;
    background-color: #141824;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: rotateX(5deg) rotateY(-5deg);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
  }
  
  .dashboard-container:hover .dashboard-mockup {
    transform: rotateX(0) rotateY(0);
  }
  
  .dashboard-header {
    height: 30px;
    background-color: #0f1219;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .header-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
  
  .header-dot:nth-child(1) {
    background-color: #ff5f57;
  }
  
  .header-dot:nth-child(2) {
    background-color: #febc2e;
  }
  
  .header-dot:nth-child(3) {
    background-color: #28c840;
  }
  
  .dashboard-content {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 15px;
    position: relative;
    min-height: 400px;
  }
  
  .integration-badge {
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
  
  .integration-badge img {
    width: 30px;
    height: auto;
  }
  
  .sap {
    top: -25px;
    left: 15%;
  }
  
  .excel {
    top: -25px;
    right: 5%;
  }
  
  .dashboard-panel {
    background-color: #1e2536;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .dashboard-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .truck-panel {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  
  .panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .truck-icon {
    width: 40px;
    height: 40px;
    background-color: #2e3546;
    border-radius: 8px;
    margin-right: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808080"><path d="M18,18.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S18.83,18.5,18,18.5z M18.5,12h-10V5h-1c-0.55,0-1,0.45-1,1v10h2c0,1.66,1.34,3,3,3s3-1.34,3-3h4c0,1.66,1.34,3,3,3s3-1.34,3-3h2v-3.5L18.5,12z M7,18.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S7.83,18.5,7,18.5z M20,10.5V13h-3V10h1.5L20,10.5z M6,6.5H8.5V8H6V6.5z M3.5,12h1V10h-2v2H3.5z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
  }
  
  .truck-info {
    display: flex;
    flex-direction: column;
  }
  
  .truck-id {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .online {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
  }
  
  .performance-panel {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  
  .chart-icon {
    width: 30px;
    height: 30px;
    background-color: #2e3546;
    border-radius: 8px;
    margin-right: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808080"><path d="M11,2v20c-5.1-0.5-9-4.8-9-10S5.9,2.5,11,2z M13.6,3.8c3.5,1.2,6,4.5,6.4,8.2h-6.4V3.8z M13.6,14H20c-0.4,3.7-2.9,7-6.4,8.2V14z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
  }
  
  .chart-title {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .chart-content {
    display: flex;
    justify-content: center;
    padding: 10px 0;
  }
  
  .circle-progress {
    position: relative;
    width: 80px;
    height: 80px;
  }
  
  .circle-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  
  .circle-bg {
    fill: none;
    stroke: #2e3546;
    stroke-width: 3;
  }
  
  .circle-fill {
    fill: none;
    stroke: #4169ff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
    animation: progressFill 2s ease-out forwards;
  }
  
  @keyframes progressFill {
    0% {
      stroke-dasharray: 0, 100;
    }
    100% {
      stroke-dasharray: 90, 100;
    }
  }
  
  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
  }
  
  .expense-panel {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  
  .expense-text {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .wave-graph {
    height: 50px;
    margin-top: 10px;
  }
  
  .wave-graph svg {
    width: 100%;
    height: 100%;
  }
  
  .map-panel {
    grid-column: 3 / 5;
    grid-row: 2;
  }
  
  .tracking-text {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .map-container {
    height: 150px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 10px;
  }
  
  .map-bg {
    width: 100%;
    height: 100%;
    background-color: #141824;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23141824" width="100" height="100"/><path fill="%231A1F2C" d="M0,0h50v50H0V0z M50,50h50v50H50V50z"/></svg>');
    background-size: 20px 20px;
  }
  
  .route-path {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4169ff, transparent);
    opacity: 0.7;
  }
  
  .location-marker {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 10px;
    height:
    10px;
    background-color: #4169ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgba(65, 105, 255, 0.2);
    animation: pulseMarker 2s infinite;
  }
  
  @keyframes pulseMarker {
    0% {
      box-shadow: 0 0 0 0 rgba(65, 105, 255, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(65, 105, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(65, 105, 255, 0);
    }
  }
  
  .payment-panel {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  
  .payment-title {
    font-size: 0.9rem;
    color: #ddd;
  }
  
  .payment-date {
    margin-left: auto;
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
  }
  
  .payment-date::after {
    content: "▼";
    font-size: 0.6rem;
    margin-left: 5px;
  }
  
  .payment-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 10px 0;
  }
  
  .payment-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .stat-value {
    font-size: 0.9rem;
    color: #4cd964;
    font-weight: 600;
  }
  


/* Enhanced Notification */
.notification {
    top: 30%;
    right: -50px;
    background: rgba(45, 45, 45, 0.9);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    animation: floatSpecial 4.5s ease-in-out infinite;
    animation-delay: 0.7s;
    border: 1px solid rgba(255, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 6;
    transform: rotate(3deg);
    position: relative;
}

.notification-dot {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    position: relative;
    animation: notificationPulse 1.5s infinite;
}

@keyframes notificationPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Enhanced Data Card */
.data-card {
    bottom: 15%;
    left: -60px;
    background: rgba(45, 45, 45, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    width: 200px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    animation: floatSpecial 5.2s ease-in-out infinite;
    animation-delay: 1.2s;
    border: 1px solid rgba(255, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 6;
    transform: rotate(-3deg);
    position: relative;
}

.data-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 80px;
}

.chart-bar {
    flex: 1;
    background: var(--gradient-red);
    border-radius: 4px;
    transition: height 0.5s ease;
    animation: chartGrow 3s infinite alternate;
}

.chart-bar:nth-child(1) {
    animation-delay: 0s;
}

.chart-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.chart-bar:nth-child(3) {
    animation-delay: 0.4s;
}

.chart-bar:nth-child(4) {
    animation-delay: 0.6s;
}

.chart-bar:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes chartGrow {
    0% {
        height: var(--min-height, 30%);
    }
    100% {
        height: var(--max-height, 70%);
    }
}

/* Enhanced Location Pin */
.location-pin {
    bottom: 40%;
    right: 20%;
    z-index: 6;
    animation: floatPulse 4.8s ease-in-out infinite;
    animation-delay: 1.5s;
    filter: drop-shadow(0 10px 20px rgba(255, 0, 0, 0.4));
}

.pin-dot {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.pin-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse-ring 2.5s infinite;
}

/* Enhanced Floating Cards */
.floating-card {
    position: absolute;
    background: rgba(45, 45, 45, 0.9);
    color: white;
    padding: 1.2rem 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 0, 0, 0.25);
    z-index: 3;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    transform-origin: center;
}

.floating-card i {
    color: var(--light-color);
    font-size: 1.4rem;
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.floating-card:hover i {
    transform: scale(1.15) translateY(-10px);
    box-shadow: 0 25px 50px rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.5);
    z-index: 10;
}

.card-1 {
    top: 5%;
    left: -30%;
    animation: floatSpecial 5s ease-in-out infinite;
    animation-delay: 0.2s;
    z-index: 5;
    transform: rotate(-5deg);
}

.card-2 {
    top: 60%;
    right: -30%;
    animation: floatSpecial 5.5s ease-in-out infinite;
    animation-delay: 1s;
    z-index: 5;
    transform: rotate(5deg);
}

.card-3 {
    bottom: 5%;
    left: 0%;
    animation: floatSpecial 6s ease-in-out infinite;
    animation-delay: 1.8s;
    z-index: 5;
    transform: rotate(-3deg);
}

/* Add logistics-themed animated routes */
.route-path {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('../assets/map.png');  /* Add map background */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;  /* Adjust opacity to not overwhelm other elements */
}

.route-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.3), transparent);
    height: 2px;
    width: 150px;
    opacity: 0;
    animation: routeAnimate 4s linear infinite;
}

.route-line-1 {
    top: 20%;
    left: 30%;
    transform: rotate(30deg);
    animation-delay: 0s;
}

.route-line-2 {
    top: 60%;
    right: 20%;
    transform: rotate(-45deg);
    animation-delay: 1s;
}

.route-line-3 {
    bottom: 30%;
    left: 40%;
    transform: rotate(15deg);
    animation-delay: 2s;
}

@keyframes routeAnimate {
    0% {
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        width: 150px;
        opacity: 0;
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .animated-heading {
        font-size: 3rem;
    }
    
    .hero .container {
        gap: 2rem;
    }
}

@media (max-width: 992px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
    
    .hero-image {
        order: -1;
    }
    
    .dashboard-container {
        margin: 30px 20px;
    }
    
    .animated-heading {
        font-size: 2.5rem;
    }
    
    .lifecycle-stage {
        flex-direction: column !important;
        align-items: center;
        margin-bottom: 5rem;
    }
    
    .stage-animation, .stage-content {
        width: 90%;
        margin-bottom: 1rem;
    }
    
    .timeline-progress {
        left: 20px;
    }
    
    .connection-animation {
        left: 20px;
    }
    
    .central-truck-animation {
        display: none;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .animated-heading {
        font-size: 1.8rem;
    }
    
    .hero-badge {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
    
    .stat-number {
        font-size: 2.2rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .animation-card {
        padding: 1.5rem;
    }
    
    .animation-container {
        height: 150px;
    }
    
    .animation-card h3 {
        font-size: 1.2rem;
    }
    
    .stage-content {
        padding: 1.5rem;
    }
    
    .stage-number {
        font-size: 2.5rem;
    }
    
    .stage-content h3 {
        font-size: 1.2rem;
    }
    
    .lifecycle-cta h3 {
        font-size: 1.5rem;
    }
}

/* Animation Enhancements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Enhance Lottie animations */
lottie-player {
    width: 100%;
    height: 100%;
}

/* Add glow effect to Lottie animations */
.animation-container lottie-player::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Particles JS Styling */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#particles-js canvas {
    filter: brightness(1.5) contrast(1.2) !important;
    mix-blend-mode: screen;
}

/* Hero Particles Background */
#hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#hero-particles canvas {
    opacity: 0.6;
    mix-blend-mode: screen;
}

/* Animated Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 1s 2.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.1), transparent);
    animation: mouseScan 2s infinite;
}

@keyframes mouseScan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

.wheel {
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.arrow {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    transform: rotate(45deg);
    animation: arrowDown 2s infinite;
    opacity: 0;
}

.arrow span:nth-child(2) {
    animation-delay: 0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrowDown {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
}

/* Animated Typing Cursor Effect */
.hero-description.typing {
    border-right: 3px solid var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    width: 0;
    max-width: 100%;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color) }
}

/* Enhanced Floating Elements with 3D Effect */
.floating-element {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.floating-element::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), transparent);
    transform: translateZ(-10px);
    border-radius: inherit;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-element:hover::after {
    opacity: 1;
}

/* Data Card Header Enhancement */
.data-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-card-header i {
    color: var(--primary-color);
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}

.data-card-header span {
    font-weight: 600;
    color: var(--light-color);
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Pin Pulse Animation Enhancement */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    70% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Enhanced Float Animations */
@keyframes floatSpecial {
    0% {
        transform: translateY(0) translateX(0) rotate(var(--rotation, 0deg));
    }
    50% {
        transform: translateY(-10px) translateX(-5px) rotate(calc(var(--rotation, 0deg) + 1deg));
    }
    100% {
        transform: translateY(0) translateX(0) rotate(var(--rotation, 0deg));
    }
}

@keyframes floatPulse {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Animated Background Shift */
@keyframes backgroundShift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Text Reveal Animation */
@keyframes revealText {
    to {
        transform: translateY(0);
    }
}

@keyframes textRevealMask {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

@keyframes highlightReveal {
    to {
        transform: scaleX(1);
    }
}

/* Digital Circuit Lines Animation */
.circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

.circuit-line {
    position: absolute;
    background: var(--primary-color);
    height: 1px;
}

.circuit-line-h1 {
    top: 20%;
    left: 0;
    width: 30%;
    animation: circuitGrow 3s linear infinite;
}

.circuit-line-h2 {
    top: 60%;
    right: 0;
    width: 40%;
    animation: circuitGrow 4s linear infinite;
    animation-delay: 1s;
}

.circuit-line-v1 {
    top: 0;
    left: 30%;
    height: 25%;
    width: 1px;
    animation: circuitGrowVertical 3.5s linear infinite;
}

.circuit-line-v2 {
    bottom: 0;
    right: 40%;
    height: 35%;
    width: 1px;
    animation: circuitGrowVertical 4.5s linear infinite;
    animation-delay: 2s;
}

.circuit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
    opacity: 0;
    animation: nodeFlash 4s linear infinite;
}

.circuit-node-1 {
    top: 20%;
    left: 30%;
    animation-delay: 3s;
}

.circuit-node-2 {
    top: 60%;
    right: 40%;
    animation-delay: 4s;
}

@keyframes circuitGrow {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes circuitGrowVertical {
    0% {
        height: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        height: 100%;
        opacity: 0;
    }
}

@keyframes nodeFlash {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Enhanced Hero Content Layout */
.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.hero-content {
    flex: 1;
    padding-right: 40px;
    position: relative;
    z-index: 3;
}

.hero-image {
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Animated Gradient Border for Hero Content */
.hero-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: -20px;
    background: linear-gradient(45deg, 
        rgba(255, 0, 0, 0) 0%, 
        rgba(255, 0, 0, 0.1) 25%, 
        rgba(255, 0, 0, 0) 50%, 
        rgba(255, 0, 0, 0.1) 75%, 
        rgba(255, 0, 0, 0) 100%);
    border-radius: 30px;
    z-index: -1;
    opacity: 0;
    animation: gradientBorder 8s linear infinite;
    filter: blur(20px);
}

@keyframes gradientBorder {
    0% {
        background-position: 0% 0%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: 100% 100%;
        opacity: 0;
    }
}

/* Animated Dots Background */
.dots-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
    animation: dotsShift 20s linear infinite;
}

@keyframes dotsShift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 30px 30px;
    }
}

/* Enhanced Truck Icon with Logistics Animation */
.truck-icon::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    top: 50%;
    right: -30px;
    animation: truckPath 3s infinite;
}

@keyframes truckPath {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        width: 30px;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

/* Animated Logistics Network Lines */
.network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.network-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.3), transparent);
    height: 1px;
    animation: networkLineAnimate 4s linear infinite;
}

.network-line-1 {
    top: 25%;
    left: 10%;
    width: 80%;
    transform: rotate(10deg);
    animation-delay: 0s;
}

.network-line-2 {
    top: 45%;
    left: 20%;
    width: 60%;
    transform: rotate(-5deg);
    animation-delay: 1s;
}

.network-line-3 {
    top: 65%;
    left: 5%;
    width: 90%;
    transform: rotate(8deg);
    animation-delay: 2s;
}

@keyframes networkLineAnimate {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(var(--rotation, 0deg));
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(var(--rotation, 0deg));
    }
}

/* Enhanced Hero Badge with Particle Effect */
.hero-badge-container {
    position: relative;
  
    margin-bottom: 1.8rem;
    border-radius: 50px;
    overflow: hidden;
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 50px;
    padding: 0.8rem 2rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 2;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Shimmer Effect for Hero Badge */
.hero-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(30deg);
    }
    100% {
        transform: translateX(100%) rotate(30deg);
    }
}

/* 3D Perspective for Dashboard */
.dashboard-container {
    transform-style: preserve-3d;
    perspective: 1200px;
}

.dashboard-img {
    backface-visibility: hidden;
}

/* Animated Data Points on Dashboard */
.data-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    z-index: 5;
    animation: dataPointPulse 2s infinite;
}

.data-point-1 {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}

.data-point-2 {
    top: 50%;
    right: 30%;
    animation-delay: 0.5s;
}

.data-point-3 {
    bottom: 25%;
    left: 40%;
    animation-delay: 1s;
}

@keyframes dataPointPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Connection Lines Between Data Points */
.connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    z-index: 4;
    opacity: 0.5;
    transform-origin: left;
    animation: connectionGrow 3s infinite;
}

.connection-line-1 {
    top: 32%;
    left: 22%;
    width: 100px;
    transform: rotate(30deg);
    animation-delay: 0.2s;
}

.connection-line-2 {
    top: 50%;
    right: 32%;
    width: 120px;
    transform: rotate(-45deg);
    animation-delay: 0.7s;
}

@keyframes connectionGrow {
    0% {
        transform: scaleX(0) rotate(var(--rotation, 0deg));
        opacity: 0;
    }
    50% {
        transform: scaleX(1) rotate(var(--rotation, 0deg));
        opacity: 0.5;
    }
    100% {
        transform: scaleX(0) rotate(var(--rotation, 0deg));
        opacity: 0;
    }
}

/* Responsive Adjustments for Enhanced Hero */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .floating-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 15px 0;
        transform: none !important;
    }
    
    .network-lines, .circuit-lines {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-badge {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .animated-heading {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .stat-item:not(:last-child)::after {
        display: none;
    }
}

/* Logistics Showcase Section Styles */
.logistics-showcase {
  position: relative;
  min-height: 100vh;
  background-color: #070b34;
  overflow: hidden;
  padding: 120px 0 80px;
}

/* Background effect with animated gradient */
.logistics-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(37, 55, 127, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(41, 98, 255, 0.3) 0%, transparent 40%);
  animation: gradientPulse 15s ease infinite alternate;
}

/* Particle overlay */
.logistics-showcase::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
  animation: particleShift 40s linear infinite;
}

.showcase-content {
  /* max-width: 650px; */
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.logistics-showcase h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 80, 255, 0.4);
  animation: titleReveal 1.2s ease-out;
  background: linear-gradient(to right, #ffffff, #a1c4fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.showcase-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  animation: fadeUp 1.4s ease-out 0.2s both;
}

.showcase-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  animation: fadeUp 1.4s ease-out 0.4s both;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
  z-index: -1;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  box-shadow: 0 4px 18px rgba(67, 97, 238, 0.3);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4895ef, #4361ee);
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(67, 97, 238, 0.5);
}



.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(255, 255, 255, 0.15);
}

/* Showcase Image Grid */
.showcase-image-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1000px;
}

.showcase-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  background: rgba(13, 17, 55, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showcase-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s ease;
  filter: drop-shadow(0 0 8px rgba(41, 98, 255, 0.2));
}

.showcase-image:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2),
              0 0 30px rgba(41, 121, 255, 0.2);
  transform: translateY(-10px) scale(1.02);
}

.showcase-image:hover img {
  transform: scale(1.05);
}

.showcase-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(13, 17, 55, 0.2), rgba(13, 17, 55, 0.8));
  z-index: 1;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.showcase-image:hover::before {
  opacity: 0.4;
}

.image-caption {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: 600;
  padding: 0 20px;
  z-index: 2;
  font-size: 1.1rem;
  transform: translateY(10px);
  transition: transform 0.5s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.showcase-image:hover .image-caption {
  transform: translateY(0);
}

/* Glow effect for images */
.showcase-image-1 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
              0 0 30px rgba(67, 97, 238, 0.15);
}

.showcase-image-2 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
              0 0 30px rgba(72, 149, 239, 0.15);
}

.showcase-image-3 {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3),
              0 0 30px rgba(76, 201, 240, 0.15);
}

/* Floating Elements and Connection Lines */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, 
                rgba(67, 97, 238, 0),
                rgba(67, 97, 238, 0.7),
                rgba(76, 201, 240, 0.7),
                rgba(76, 201, 240, 0));
  opacity: 0;
  animation: lineReveal 2s ease-out forwards;
  box-shadow: 0 0 10px rgba(67, 97, 238, 0.5);
}

.line-1 {
  top: 30%;
  left: 25%;
  width: 50%;
  transform: rotate(15deg);
  animation-delay: 1.2s;
}

.line-2 {
  top: 45%;
  right: 25%;
  width: 40%;
  transform: rotate(-10deg);
  animation-delay: 1.5s;
  background: linear-gradient(to right, 
                rgba(76, 201, 240, 0),
                rgba(76, 201, 240, 0.7),
                rgba(67, 97, 238, 0.7),
                rgba(67, 97, 238, 0));
}

.line-3 {
  top: 65%;
  left: 30%;
  width: 45%;
  transform: rotate(5deg);
  animation-delay: 1.8s;
  background: linear-gradient(to right, 
                rgba(58, 12, 163, 0),
                rgba(58, 12, 163, 0.7),
                rgba(72, 149, 239, 0.7),
                rgba(72, 149, 239, 0));
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.floating-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(41, 98, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.1),
              0 0 20px rgba(67, 97, 238, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.icon-1 {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
  background: rgba(67, 97, 238, 0.15);
}

.icon-2 {
  top: 75%;
  left: 60%;
  animation-delay: 2s;
  background: rgba(72, 149, 239, 0.15);
}

.icon-3 {
  top: 40%;
  right: 15%;
  animation-delay: 1s;
  background: rgba(76, 201, 240, 0.15);
}

/* Animations */
@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineReveal {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 0.7;
    width: 100%;
  }
}

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

@keyframes particleShift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes gradientPulse {
  0% {
    opacity: 0.7;
    background-position: 0% 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    background-position: 100% 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .showcase-image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
  }
  
  .showcase-image-3 {
    grid-column: span 2;
    max-width: 70%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .logistics-showcase {
    padding: 100px 0 60px;
  }
  
  .logistics-showcase h1 {
    font-size: 2.5rem;
  }
  
  .showcase-subtitle {
    font-size: 1.1rem;
  }
  
  .showcase-image-grid {
    grid-template-columns: 1fr;
  }
  
  .showcase-image-3 {
    grid-column: span 1;
    max-width: 100%;
  }
  
  .showcase-cta {
    flex-direction: column;
    gap: 15px;
  }
  
  .floating-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
}

/* Enhanced Animation Grid */
.logistics-animations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.animation-card {
    background: rgba(45, 45, 45, 0.7);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    border: 1px solid rgba(255, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.animation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.animation-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 0, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.animation-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 40px rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.3);
}

.animation-card:hover::before {
    transform: scaleX(1);
}

.animation-card:hover::after {
    opacity: 1;
}

.animation-container {
    height: 180px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.animation-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px);
}

.animation-card:hover .animation-container::after {
    opacity: 1;
}

.animation-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--light-color);
    margin-bottom: 1rem;
    position: relative;
    transition: transform 0.3s ease;
}

.animation-card:hover h3 {
    transform: translateY(-5px);
}

.animation-card h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.animation-card:hover h3::after {
    width: 50px;
}

.animation-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    transition: all 0.3s ease;
}

.animation-card:hover p {
    color: rgba(255, 255, 255, 0.9);
}

/* Enhanced Central Animation */
.central-animation {
    position: relative;
    margin: 0 auto;
    max-width: 800px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    border: 1px solid rgba(255, 0, 0, 0.2);
    transform: perspective(1000px) rotateX(5deg);
    transition: all 0.5s ease;
}

.central-animation:hover {
    transform: perspective(1000px) rotateX(0deg);
    box-shadow: 0 30px 70px rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.4);
}

.central-animation::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, 
        rgba(255, 0, 0, 0.5) 0%, 
        transparent 20%, 
        transparent 80%, 
        rgba(255, 0, 0, 0.5) 100%);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(15px);
}

.central-animation:hover::before {
    opacity: 1;
}

.animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: background 0.3s ease;
}

.central-animation:hover .animation-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.animation-overlay h2 {
    color: white;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    opacity: 0.8;
    transition: all 0.5s ease;
}

.central-animation:hover .animation-overlay h2 {
    transform: translateY(0);
    opacity: 1;
}

.animation-overlay .btn {
    transform: translateY(20px);
    opacity: 0.8;
    transition: all 0.5s ease 0.1s;
}

.central-animation:hover .animation-overlay .btn {
    transform: translateY(0);
    opacity: 1;
}

/* Animated connection lines between cards */
.logistics-animation-section .container {
    position: relative;
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.connection-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.3), transparent);
    opacity: 0.5;
    transform-origin: left;
    animation: connectionPulse 3s infinite alternate;
}

@keyframes connectionPulse {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.7;
    }
}

/* Floating logistics elements */
.logistics-floating-element {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    filter: drop-shadow(0 5px 15px rgba(255, 0, 0, 0.3));
    animation: floatElement 6s ease-in-out infinite;
}

.logistics-icon-1 {
    top: 15%;
    left: 5%;
    font-size: 2rem;
    color: var(--primary-color);
    animation-delay: 0s;
}

.logistics-icon-2 {
    top: 70%;
    right: 8%;
    font-size: 2.5rem;
    color: var(--primary-color);
    animation-delay: 1s;
}

.logistics-icon-3 {
    bottom: 20%;
    left: 10%;
    font-size: 1.8rem;
    color: var(--primary-color);
    animation-delay: 2s;
}

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

/* Responsive adjustments */
@media (max-width: 992px) {
    .logistics-animation-section .section-header h2 {
        font-size: 2.2rem;
    }
    
    .animation-card {
        padding: 1.5rem;
    }
    
    .animation-container {
        height: 150px;
    }
    
    .central-animation {
        transform: perspective(1000px) rotateX(0);
    }
}

@media (max-width: 576px) {
    .logistics-animation-section {
        padding: 4rem 0;
    }
    
    .logistics-animation-section .section-header h2 {
        font-size: 1.8rem;
    }
    
    .animation-card h3 {
        font-size: 1.2rem;
    }
    
    .animation-overlay h2 {
        font-size: 1.6rem;
    }
}

/* Enhanced Floating Cards Positioning */
.floating-card {
    
}

/* Enhanced Features Section Styles */
.features-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #000, #111);
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Animated Background */
.features-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: center top;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.3;
    animation: orbFloat 15s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -100px;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.4), transparent 70%);
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    bottom: -250px;
    right: -150px;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.3), transparent 70%);
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 60%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.2), transparent 70%);
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
    }
    50% {
        transform: translate(20px, 40px) scale(0.9);
    }
    75% {
        transform: translate(-30px, 20px) scale(1.05);
    }
}

.container {
    position: relative;
    z-index: 2;
}

/* Animated Heading */
.animated-heading {
    /* font-size: 2.5rem; */
    font-weight: 200;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
    display: inline-block;
}

.text-gradient {
    background: linear-gradient(90deg, #ff0000, #ff3300);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    display: inline-block;
    animation: gradientShift 3s infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.reveal-text {
    position: relative;
    color: #ccc;
    overflow: hidden;
}

.reveal-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    transform: translateX(-100%);
    animation: revealText 1.5s forwards;
}

@keyframes revealText {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.header-underline {
    width: 80px;
    height: 4px;
    background: rgba(255, 0, 0, 0.3);
    margin: 20px auto 0;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.underline-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff3300);
    animation: underlineFill 2s ease-in-out forwards;
    transform: translateX(-100%);
}

@keyframes underlineFill {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Features Container */
.features-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    margin-top: 70px;
}

/* Dashboard Visual */
.features-visual {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.dashboard-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    perspective: 1000px;
}

.dashboard-preview {
    position: relative;
    transform-style: preserve-3d;
    animation: dashboardFloat 6s ease-in-out infinite;
}

@keyframes dashboardFloat {
    0%, 100% {
        transform: translateY(0) rotateX(5deg);
    }
    50% {
        transform: translateY(-20px) rotateX(0deg);
    }
}

.dashboard-screen {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 0, 0, 0.2);
    background: #1a1a1a;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.dashboard-lottie {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.3));
}

.dashboard-reflection {
    position: absolute;
    bottom: -20px;
    left: 5%;
    width: 90%;
    height: 20px;
    background: rgba(255, 0, 0, 0.1);
    filter: blur(10px);
    border-radius: 50%;
    z-index: 1;
    animation: reflectionPulse 6s ease-in-out infinite;
}

@keyframes reflectionPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(1.1);
    }
}

/* Data Points */
.data-point {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #ff0000;
    border-radius: 50%;
    z-index: 3;
}

.point-1 {
    top: 25%;
    left: 20%;
    animation: pointPulse 3s infinite;
}

.point-2 {
    top: 40%;
    right: 25%;
    animation: pointPulse 3s infinite 1s;
}

.point-3 {
    bottom: 30%;
    left: 30%;
    animation: pointPulse 3s infinite 2s;
}

.point-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(255, 0, 0, 0.3);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pointPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

.point-label {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.data-point:hover .point-label {
    opacity: 1;
}

/* Dashboard Notification */
.dashboard-notification {
    position: absolute;
    top: 20px;
    right: -80px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    width: 250px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    transform: translateY(-20px);
    opacity: 0;
    animation: notificationAppear 1s forwards 2s, notificationFloat 3s ease-in-out infinite 3s;
    z-index: 10;
}

@keyframes notificationAppear {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes notificationFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.notification-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff0000, #ff3300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-icon i {
    color: #fff;
    font-size: 18px;
    animation: bellShake 2s infinite 3s;
}

@keyframes bellShake {
    0%, 50%, 100% {
        transform: rotate(0);
    }
    5%, 15%, 25%, 35%, 45% {
        transform: rotate(10deg);
    }
    10%, 20%, 30%, 40% {
        transform: rotate(-10deg);
    }
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    color: #fff;
}

.notification-text {
    font-size: 12px;
    color: #ccc;
}

/* Floating Elements */
.floating-element {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    z-index: 3;
}

.truck-icon {
    top: 10%;
    left: 10%;
    animation: floatElement 6s infinite ease-in-out;
}

.location-icon {
    bottom: 20%;
    left: 15%;
    animation: floatElement 6s infinite ease-in-out 2s;
}

.payment-icon {
    top: 20%;
    right: 15%;
    animation: floatElement 6s infinite ease-in-out 4s;
}

.floating-element i {
    color: #ff0000;
    font-size: 20px;
}