.image-slider {
    display: flex;
    flex-flow: column;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: 500px;
    overflow: hidden;
    border-radius: 8px;
    container-type: inline-size;
    contain: content;
    background-color: #0006;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
        rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
        rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.slider__content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.slider-control--button {
    border: 0;
    background: 0;
    outline: 0;
    cursor: pointer;
    place-content: center;
    padding-inline: 3vw;
    z-index: 1;
    display: grid;
}

.icon {
    height: 2rem;
    width: 2rem;
    fill: var(--icon-default);
    border-radius: 50%;
}

.slider-control--button:where(:hover) {
    background-image: linear-gradient(
        to var(--position),
        #0000 0%,
        #0002,
        80%,
        #0006 100%
    );
    .icon {
        fill: var(--icon-accent);
        background: #0001;
    }
}

.slider-control--button:active {
    outline: 0.2em solid hsl(204 100 53);
    outline-offset: -0.5em;
}

.prev-button {
    --position: left;
}
.next-button {
    --position: right;
}

.image-display {
    position: fixed;
    inset: 0;
}

.slider-navigation {
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 1rem;
    place-content: center;
    background-color: var(--navigation-color);
    backdrop-filter: blur(6px);
}

.nav-button {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 0;
    aspect-ratio: 16 / 9;
    transition: filter 150ms linear, scale 266ms ease;
}

.thumbnail {
    display: block;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.nav-button[aria-selected="true"] {
    scale: 1.1;
}

.nav-button[aria-selected="true"],
.nav-button:focus-visible {
    outline: 0.2em solid var(--active-color);
    outline-offset: 0.2em;
}

.nav-button[aria-selected="false"] {
    filter: opacity(0.7);
}

.nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
    filter: opacity(1);
}

@container (max-width: 660px) {
    .nav-button:not(:has(img)) {
        background-color: rgb(241, 235, 232);
    }

    .slider-navigation {
        display: flex;
        justify-content: center;
        padding-block: 1.5em;
    }

    .nav-button {
        inline-size: 0.625rem;
        aspect-ratio: 1;
        border-radius: 50%;
    }
    .nav-button > .thumbnail {
        display: none;
    }
    .nav-button[aria-selected="true"] {
        background-color: black;
        scale: 1.5;
    }
}

.tour_descp{

    width:97%; 
    min-height: 5rem;
    background-color: whitesmoke; 
    box-shadow: .2rem .3rem darkcyan;
    border-radius: .5rem;
    border-top: .2rem solid #880e4f;
    border-left: .3rem solid #880e4f;
    margin: 0 auto; 
    margin-top: 1rem;
    padding: .5rem;
    font-size: 1.5rem;

}

.tour_descp h4{
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 1rem;
}
/* General reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Tour container styling */
.tour_all_feature {
    width: 100%;
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}

/* Right feature column */
.tour_feature_right {
    width: 30%;
    background-color: darkcyan;
    margin: .5rem;
    padding: .5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    color: white;
}

.tour_feature_right table {
    width: 100%;
    border-collapse: collapse;
}

.tour_feature_right table tr {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.tour_feature_right table tr:hover {
    background-color: #f1f1f1;
}

.tour_feature_right table .td_details_right {
    width: 60%;
    text-align: left;
    background-color: #880e4f;
    color: whitesmoke;
    border-radius: .5rem;
    border: .1rem solid white;
    padding: 0.8rem;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.tour_feature_right table .td_details_right:hover {
    transform: translateX(5px);
}

.tour_feature_right table .th_details_right {
    width: 40%;
    text-align: left;
    
    color: #880e4f;
    padding: .5rem;
    font-size: 1.4rem;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 6px;
}

.tour_feature_right table .th_details_right img {
    height: 2rem;
    padding-right: 0.5rem;
}

/* Left feature column */
.tour_feature_left {
    width: 67.5%;
    min-height: 10rem;
    background-color: whitesmoke;
    margin: .5rem;
    padding: .5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
}

.tour_feature_left table {
    width: 100%;
    border-collapse: collapse;
}
.tour_feature_left table th{
    padding: 1rem;
    font-size: 1.3rem;
    color: whitesmoke;
    text-align: left;
    border-radius: .5rem;
    background-color: #880e4f;
    border-bottom: 2px solid white;
    width: 35%;
    font-weight: 700;
}
.tour_feature_left table td {
    padding: 1rem;
    font-size: 1.3rem;
    color: #333;
    text-align: left;
    background-color: white;
    border-radius: .5rem;
    border-bottom: 2px solid wheat;
    width: 65%;
}

/* Price Div */
.price_div {
    width: 100%;
    background-color: #880e4f;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.price_div del {
    color: red;
}

.price_div div {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.price_div div button {
    width: 50%;
    font-size: 2rem;
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    color: #880e4f;
    font-weight: 700;
    border: 2px solid #880e4f;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.price_div div button:hover {
    background-color: #880e4f;
    color: white;
}

/* Responsive Design */

/* For medium screens (tablets) */
@media (max-width: 768px) {
    .tour_feature_right, .tour_feature_left {
        width: 100%;
        margin: 1rem 0;
    }

    .tour_feature_left table th, .tour_feature_left table td,
    .tour_feature_right table .td_details_right,
    .tour_feature_right table .th_details_right {
        font-size: 1.2rem;
    }

    .price_div div button {
        font-size: 1.8rem;
    }
}

/* For smaller screens (mobile) */
@media (max-width: 480px) {
    .tour_feature_left {
        padding: 1rem;
    }

    .tour_feature_right {
        padding: 1rem;
        width: 100%;
        margin: 1rem 0;
    }

    .tour_feature_left table th, .tour_feature_left table td {
        font-size: 1rem;
    }

    .price_div div button {
        font-size: 1.6rem;
    }
}


/* Make the image slider responsive */
@media (max-width: 768px) {
    .image-slider {
        height: 60vh; /* Increase height for smaller devices */
    }

    .slider__content {
        flex-direction: column; /* Stack the slider content vertically */
    }

    .slider-control--button {
        padding-inline: 5vw; /* Larger button areas on mobile */
    }
}
/* Media Queries */
@media (max-width: 660px) {
    .nav-button {
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .nav-button img {
        display: none; /* Hide images in mobile view */
    }

    .nav-button[aria-selected="true"] {
        background-color: black;
        scale: 1.5;
    }

    .slider-navigation {
        display: flex;
        justify-content: center;
        padding: 1.5em 0;
    }
}