/* ------------- ROUTES 1 Section in Home Page----------- */
.route-1-hero-container {
    position: relative;
    width: 100%;
    max-height: 650px; /* 🔽 reduce height here */
    overflow: hidden;
}

/* Background image */
.route-1-hero-image {
    width: 100%;
    height: 650px; /* 🔽 same as container */
    object-fit: cover; /* keeps proportions */
    display: block;
}

/* Overlay – LEFT side */
.route-1-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    padding: 10px;
}
.hero-white-bg {
    background-color: rgb(247 248 245 / 80%);
}
    /* Text wrapper */
.route-1-hero-text {
  /*  max-width: 500px;*/
    font-size: 21px;
    padding: 10px;
}


/* Button */
.route-1-btn-experience {
    background: linear-gradient(135deg, #6a2cff, #ff5c8d);
    color: #ffffff;
    border-radius: 30px;
    font-weight: 500;
    position: absolute;
    right: 60px; /* move to right side */
    bottom: 50px; /* vertical position */
    border-radius: 30px;
    padding: 8px 25px;
    font-weight: 600;
    z-index: 5;
}

@media (max-width: 768px) {
    .route-1-btn-experience {
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
    }
}

.route-1-btn-experience:hover {
    background-color: #6a348d;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .route-1-hero-overlay {
        width: 100%;
        /*padding: 10px;*/
        position: static;
        height: auto;
        /*background-color: rgba(255, 255, 255, 0.9);*/

    }
    .sec-carousel-overlay {
        padding-top:12px;
    }

    .route-1-hero-text {
        max-width: 100%;
        text-align: center;
        font-size: 17px;
    }
   
    .route-1-hero-image {
        height: 34vh;
    }
    /* Truncate text to 4 lines with ellipsis */
    .route-1-hero-text p {
        display: -webkit-box;
        /*-webkit-line-clamp: 4;*/ /* show only 4 lines */
        font-size: 12px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.route-distance {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 56px;
    font-weight: 700;
    color: #121212;
    line-height: 1;
}

    .route-distance span {
        font-size: 56px;
        font-weight: 600;
        margin-left: 4px;
    }

.route-1-hero-overlay .route-1-hero-text {
    position: relative;
}