body {
     padding-top: 80px;
 }

 /* Hero Section */
 .hero-section {
     background: linear-gradient(rgba(0, 124, 212, 0.734), rgba(33, 208, 243, 0.742)), url("../Assets/weerasekara-transport-yard-colombo-sri-lanka.jpg");
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     height: 80vh;
     min-height: 600px;
     display: flex;
     align-items: center;
     position: relative;
     color: var(--light-color);
     padding: 100px 0;
     overflow: hidden;
 }

 @media (max-width: 991px) {
     .hero-section {
         padding-top: 170px;
     }
 }

 .hero-highlight {
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--primary-aqua);
     margin-bottom: 20px;
     display: inline-block;
     background: rgba(255, 255, 255, 0.139);
     padding: 10px 10px;
     border-radius: 50px;
     border: 1px solid rgb(255, 255, 255);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
 }

 .hero-title {
     font-size: 4rem;
     font-weight: 800;
     margin-bottom: 25px;
     line-height: 1.2;
     text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     animation: fadeInUp 1s ease;
 }

 .hero-subtitle {
     font-size: 1.4rem;
     margin-bottom: 40px;
     font-weight: 400;
     opacity: 0.9;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     animation: fadeInUp 1s ease 0.2s both;
 }

 .hero--button {
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
 }

 /* About Preview */
 .about-preview {
     padding: 100px 0;
     background-color: var(--light-color);
 }

 .section-title {
     color: var(--secondary-blue);
     position: relative;
     padding-bottom: 15px;
     margin-bottom: 50px;
 }

 .section-title::after {
     content: '';
     position: absolute;
     width: 80px;
     height: 3px;
     background: var(--primary-blue);
     left: 0;
     bottom: 0;
 }

 .section-title.text-center::after {
     left: 50%;
     transform: translateX(-50%);
 }

 .about-image {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.5s ease;
 }

 .about-image:hover {
     transform: translateY(-10px);
 }

 /* Services Preview */
 .services-preview {
     padding: 100px 0;
     background-color: var(--light-gray);
 }

 .service-card {
     background: var(--light-color);
     border-radius: 10px;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(9, 84, 122, 0.246);
     margin-bottom: 30px;
     height: 100%;
     transition: all 0.3s ease;
     border-top: 4px solid transparent;
 }

 .service-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 20px 40px rgba(5, 82, 117, 0.595);
     border-top-color: var(--primary-blue);
 }

 .service-img {
     height: 220px;
     width: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .service-card:hover .service-img {
     transform: scale(1.05);
 }

 .service-icon {
     font-size: 2.5rem;
     color: var(--primary-blue);
     margin-bottom: 20px;
 }

 /* Fleet Preview */
 .fleet-preview {
     padding: 100px 0;
     background-color: var(--light-color);
 }

 .fleet-card {
     background: var(--light-color);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(9, 84, 122, 0.246);
     margin-bottom: 30px;
     height: 100%;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     border-top: 4px solid transparent;
 }

 .fleet-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 15px 40px rgba(5, 82, 117, 0.595);
     border-top-color: var(--primary-blue);
 }

 .fleet-img {
     height: 220px;
     width: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .fleet-card:hover .fleet-img {
     transform: scale(1.05);
 }

 .fleet-details {
     padding: 20px;
     background-color: var(--light-color);
 }

 /* Call to Action */
 .cta-section {
     padding: 80px 0;
     background: linear-gradient(to right, var(--primary-blue), var(--secondary-blue));
     color: var(--light-color);
 }

 .cta-title {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }



 /* Responsive Styles */
 @media (max-width: 992px) {
     .hero-title {
         font-size: 2.8rem;
     }
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.2rem;
     }

     .hero-subtitle {
         font-size: 1.1rem;
     }

     .hero-highlight {
         font-size: 0.8rem;
     }

     .about-preview,
     .services-preview,
     .fleet-preview {
         padding: 60px 0;
     }

     .section-title::after {
         left: 50%;
         transform: translateX(-50%);
     }
 }

 @media (max-width: 576px) {
     .hero-title {
         font-size: 1.5rem;
     }

     .hero-subtitle {
         font-size: 1rem;
     }

     .cta-title {
         font-size: 1.8rem;
     }

     .hero-highlight {
         font-size: 0.5rem;
     }
 }


 .qotebtn {
     border-radius: 100px;
     font-weight: bolder;
     background-color: #0080ffe6;
     padding: 12px 12px;
     color: #ffffff;
     text-decoration: none;
     transition: 0.5s;
     letter-spacing: 1.5px;
     overflow: hidden;
     text-transform: uppercase;
     /* width: 20vh; */
 }

 .qotebtn:hover {
     background: #ffffff;
     color: #00a2ff;
     box-shadow: 0 0 20px #ffffff;
     -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(204, 1, 1, 0.333));
     transform: translateY(-3px);
 }

 .qotebtn:nth-child(1) {
     filter: hue-rotate(0deg);
 }

 .qotebtn:nth-child(2) {
     filter: hue-rotate(110deg);
 }

 .qotebtn span {
     position: absolute;
     display: block;
 }

 .qotebtn span:nth-child(1) {
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, transparent, #00fbff);
     animation: animate1 2s linear infinite;
 }

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

     50%,
     100% {
         left: 100%;
     }
 }

 /* .qotebtn span:nth-child(2) {
     top: -100%;
     right: 0;
     width: 3px;
     height: 100%;
     background: linear-gradient(180deg, transparent, #ffbf00);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 } */

 @keyframes animate2 {
     0% {
         top: -100%;
     }

     50%,
     100% {
         top: 100%;
     }
 }

 .qotebtn span:nth-child(3) {
     bottom: 0;
     right: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(270deg, transparent, #00fbff);
     animation: animate3 2s linear infinite;
     animation-delay: 0.50s;
 }

 @keyframes animate3 {
     0% {
         right: -100%;
     }

     50%,
     100% {
         right: 100%;
     }
 }

 /* .qotebtn span:nth-child(4) {
     bottom: -100%;
     left: 0;
     width: 3px;
     height: 100%;
     background: linear-gradient(360deg, transparent, #ffbf00);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 } */

 @keyframes animate4 {
     0% {
         bottom: -100%;
     }

     50%,
     100% {
         bottom: 100%;
     }
 }