/* Services Section Styling */
.services-section {
    background-image: linear-gradient(135deg, transparent 0%, transparent 6%,rgba(71, 71, 71,0.04) 6%, rgba(71, 71, 71,0.04) 22%,transparent 22%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 20%,rgba(71, 71, 71,0.04) 20%, rgba(71, 71, 71,0.04) 47%,transparent 47%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 24%,rgba(71, 71, 71,0.04) 24%, rgba(71, 71, 71,0.04) 62%,transparent 62%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 73%,rgba(71, 71, 71,0.04) 73%, rgba(71, 71, 71,0.04) 75%,transparent 75%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
     text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #004771;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

.service-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
}

.service-icon {
    font-size: 50px;
    color: #004771;
    margin-bottom: 15px;
}

.service-title {
    font-size: 22px;
    font-weight: 600;
    color: #004771;
}

.service-text {
    font-size: 16px;
    color: #555;
}

/* Common initial state */
.animate-on-scroll {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(50px);
  transition: none;
  will-change: transform, opacity, filter;
}

/* Visible state with animation */
.animate-on-scroll.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Directional custom animations */
.card-left.visible {
  animation: enterLeft 1.2s ease-out forwards;
}
.card-center.visible {
  animation: enterCenter 1.2s ease-out forwards;
}
.card-right.visible {
  animation: enterRight 1.2s ease-out forwards;
}

@keyframes enterLeft {
  0% {
    transform: translateX(-100px) translateY(40px) scale(0.95);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes enterCenter {
  0% {
    transform: scale(0.8) translateY(80px);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes enterRight {
  0% {
    transform: translateX(100px) translateY(40px) scale(0.95);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}




/* below is styling for the delivery section */

.delivery-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  filter: brightness(0.8) blur(4px);
  transition: none;
  animation-fill-mode: forwards !important;
  animation-iteration-count: 1;
}

.delivery-animate.visible {
  animation: floatUpGlow 1.4s ease forwards;
}

@keyframes floatUpGlow {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    filter: brightness(0.8) blur(4px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.01);
    filter: brightness(1.05) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}