#jyomogangCarousal {
    color: #ffffff; /* Ensure valid hex color */
}

.carousel-inner {
    max-height: 90vh !important;
    overflow: hidden; /* Prevent overflow issues */
}

.carousel-item > img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    z-index: 1; /* Ensure images stay behind captions */
}

.carousel-item {
    position: relative;
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white; /* Make text visible */
    z-index: 1000; /* Higher z-index for visibility */
    
}

.carousel-title {
    font-size: 45px;
    font-family: 'Roboto', sans-serif;
}

.carousel-description {
    font-size: 19px;
    color :#e4e4e4
}

@media screen and (max-width:992px) {
    .carousel-title {
        font-size: 35px;
    }
}


@media screen and (max-width:768px) {
    .carousel-title {
        font-size: 25px;
    }

    .carousel-caption {
        margin-top: -40px;
    }

    .carousel-indicators {
        display: none !important;
    }
}

.carousel-control-prev, .carousel-control-next {
    z-index: 888;
}

.welcome {
    background: var(--primary-dark-color);
    color:#fff;
}

.welcome h1 {
    font-size: 1.5rem;
}


/* Base Styles for Desktop and Larger Screens */
.jyomogang-introduction {
    background-color: #F4F4F4;
}

.introduction-body {
    display: grid;
    grid-template-columns: 4fr 5fr; /* Two columns with different proportions */
    gap: 50px;
}

.introduction-body p {
    text-align: left;
    font-size: 16px;
    line-height: 27px;
}

.jyomogang-image {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.jyomogang-image img {
    max-height: 50vh; /* Maintain image height at 50% of the viewport height */
    width: 100%;
    object-fit: cover; /* Ensures the image covers the area without distorting */
    z-index: 22;
}


/* Responsive Styles for Tablets (Medium Screens) */
@media (max-width: 1024px) {
    .introduction-body {
        grid-template-columns: 1fr; /* 1 column for tablets */
        gap: 30px; /* Adjust gap for smaller screens */
    }

    .jyomogang-image img {
        max-height: 40vh; /* Adjust image height for tablets */
    }

    .introduction-body p {
        font-size: 14px; /* Slightly smaller text for better readability */
        line-height: 22px; /* Adjust line-height for smaller text */
    }
}

/* Responsive Styles for Mobile (Small Screens) */
@media (max-width: 768px) {
    .introduction-body {
        grid-template-columns: 1fr; /* 1 column for mobile */
        gap: 20px; /* Reduce gap on mobile */
    }

    .jyomogang-image img {
        max-height: 30vh; /* Adjust image height for mobile */
    }

    .introduction-body p {
        font-size: 14px; /* Maintain font size for readability */
        line-height: 20px; /* Adjust line-height to fit content */
    }
}


.jyomongang-milestones {
    height: 35vh;
    max-height: 50vh;
    background-color: var(--primary-dark-color);
    color:#ffffff;
    padding:50px 35px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@media screen and (max-width:992px) {
    .jyomongang-milestones {
        padding:10px;
    }

    .jyomongang-milestones h1 {
        font-size: 25px;
    }

    .jyomongang-milestones h5 {
        font-size: 16px;
    }
}

@media screen and (max-width:768px) {
    .jyomongang-milestones {
        height: auto;
        max-height: 160vh;
        

    }
    .milestones-container {
        flex-direction: column;
        gap: 50px;
        align-items: center;
        

    }

    .milestone-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    
}

.milestones-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}


.milestone-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.milestone-item img {
    margin-right: 15px;
}

.milestone-item h1 {
    line-height: 35px;
}

.milestone-item h1, .milestone-item h5{
    margin:0;
    padding:0;
}


.destionations {
    background-color: #ECEDF3;
}


.benefits-container {
    background-color: white !important;
}