.header {
    width: 65%;
}
.title {
  font-size: 62px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.title span {
  opacity: 0;
  transform: translateY(30px);
  display: inline-block;
  animation: fadeInUp 0.8s forwards;
}

/* Animate each word with delay */
.title span:nth-child(1) { animation-delay: 0.3s; }
.title span:nth-child(2) { animation-delay: 0.6s; }
.title span:nth-child(3) { animation-delay: 1s; }
.title span:nth-child(4) { animation-delay: 1.4s; }
.title span:nth-child(5) { animation-delay: 1.8s; }

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

.agri_nm {
    color: #D9FF00;
}
#products {
    margin-top: -3rem;
}
#products .card.prdt_bg {
    position: relative;
    width: 100%;
    height: 40%;
    border-radius: 50px 50px 0 0;
}
#products .card.prdt_bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-color: white;
}
#products .row .card {
    box-shadow: 0px 0px 4px 0px #00000040;
    img {
        transition: 0.4s ease !important;
    }
}
#products .row .card:hover {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
#products .row .card:hover img {
    transform: scale(1.02);
}
#products .card img {
    object-fit: cover;
    height: 200px !important;
}
#products .product_title {
    height: max-content;
}

#why_choose_us .card {
    background: #002425;
}
#why_choose_us p, #spares p, #services p, #services li, #help p {
    font-size: large!important;
}
#why_choose_us small {
    font-size: medium!important;
}

#gallery .glr_wdth, #spares .glr_wdth {
    width: 68%;
    justify-self: center;
}

#services .row, #help .row {
    align-items: center;
    justify-content: space-around;
}
@media (max-width: 1024px) {
    .banner {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        height: 60vh !important;
    }
    .header {
        width: 90% !important;
    }
    .spares_bg {
        background-size: cover !important;
    }
    .service_bg {
        background-size: cover !important;
    }
}
@media (max-width: 600px) {
    .banner {
        height: 80vh !important;
    }
    .header {
        width: 95% !important;
    }
    .title {
        font-size: 33px !important;
    }
    .banner a {
        font-size: smaller !important;
    }
    #products .card.prdt_bg {
        border-radius: 35px 35px 0 0;
    }
    #gallery .glr_wdth, #spares .glr_wdth {
        width: 100% !important;
    }
}