* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fff;
    color: #333;
}

.cityhilightselected {
    cursor: pointer;
    border-radius: 6px;
}

.top-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-section {
    position: relative;
    flex: 1 1 75%;
    min-height: 300px;
}

.image-overlay {
    position: relative;
    top: 20px;
    left: 20px;
    color: #fff;
    background: #00000073;
    padding: 8px 40px;
    border-radius: 15px;
}

    .image-overlay h2 {
        font-size: 20px;
        font-weight: bold;
    }

    .image-overlay p {
        font-size: 18px;
        margin-top: 5px;
    }

.qr-code {
    position: absolute;
    top: 12%;
    right: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    height: 160px;
    margin-left: auto;
}

    .qr-code img {
        width: 100px;
        height: 100px;
    }

    .qr-code button {
        margin-top: 10px;
        background-color: #0451bb;
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 0px 0px 6px 6px;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

.details-section {
    flex: 1 1 25%;
    padding: 20px;
    background: #f2f2f9;
    position: relative;
}

    .details-section h3 {
        color: #00a651;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .details-section h1 {
        font-size: 24px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .details-section p {
        margin: 10px 0;
        color: #777;
    }

.price {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.strike-through {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
}

.discount {
    background-color: #e02424;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0px 0;
    margin-bottom: 40px;
}

.buttons {
    margin: 20px 0;
}

    .buttons a {
        display: block;
        text-decoration: none;
        text-align: center;
        padding: 10px 0;
        font-size: 16px;
        margin: 10px 0;
        font-weight: 400;
        border-radius: 5px;
    }

.view-btn {
    background-color: #0451bb;
    color: #fff;
}

.quote-btn {
    border: 2px solid #0451bb;
    color: #007bff;
}

.save-more {
    margin-top: 20px;
    font-size: 15px;
    color: #555;
}

    .save-more span {
        color: #00a651;
        font-weight: bold;
    }

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .image-section,
    .details-section {
        flex: 1 1 100%;
    }

    .qr-code {
        bottom: 20px;
    }
    .trip-experiences .experience-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 0.5rem;
    }

    .trip-experiences h3 {
        margin-bottom: 15px;
        padding: 9px 9px;
        padding-top: 36px;
        color: #878787;
    }
    .trip-accommodation {
       
        background-position: center;
       
    }
   
}

@media (max-width: 576px) {
    .image-overlay h2 {
        font-size: 24px;
    }

    .image-overlay p {
        font-size: 16px;
    }

    .qr-code img {
        width: 80px;
        height: 80px;
    }

    .details-section h1 {
        font-size: 20px;
    }

    .price {
        font-size: 20px;
    }
    .trip-experiences .experience-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 0.5rem;
       
    }
    .trip-experiences h3 {
        margin-bottom: 15px;
        
        padding: 9px 9px;
       
        padding-top: 36px;
        color: #878787;
    }
    .trip-accommodation {
        background-position: center;
    }
}

.trip-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 8px;
}

@media only screen and (max-width: 600px) {
    .trip-section {
        display: grid;
    }
}

.trip-details {
    display: flex;
    align-items:center;
    gap: 10px;
    flex: 1;
}

    .trip-details .title {
        font-size: 35px;
        font-weight: bold;
        color: #12263f;
    }

    .trip-details .badge-new {
        display: inline-block;
        background-color: #12263f;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
    }

    .trip-details .rating {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

        .trip-details .rating span {
            color: #f39c12;
            font-size: 18px;
        }
.priceboxhtml{
    display:flex;
    flex-direction:column;
}

.trip-details .bookings {
    background-color: #e6e9ff;
    color: #5a67d8;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

    .trip-details .sold-out {
        background-color: #e6f4ea;
        color: #276d20;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
        display: inline-block;
    }

.trip-icons {
    display: flex;
    gap: 15px;
    z-index: 0;
}

    .trip-icons .icon {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #a8a8a8;
        border-radius: 5px;
        font-size: 18px;
        color: #555;
        cursor: pointer;
    }

        .trip-icons .icon:hover {
            background-color: #f1f5f9;
            color: #12263f;
        }

.trip-icons-acitve {
    background: #ff3737;
}

@media (max-width: 768px) {
    .trip-section {
        flex-direction: column;
        gap: 15px;
    }

    .trip-details .title {
        font-size: 20px;
    }

    .trip-icons {
        justify-content: start;
    }
}

@media (max-width: 576px) {
    .trip-details .title {
        font-size: 18px;
    }

    .trip-details .badge,
    .trip-details .bookings,
    .trip-details .sold-out {
        font-size: 12px;
    }

    .trip-icons .icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .trip-details .rating {
        display: inline-table;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }
}

.trip-match-container {
    margin: 0 auto;
    background: #f2f2f9;
    padding: 20px;
}

.trip-heading {
    text-align: left;
    margin-bottom: 20px;
}

    .trip-heading h2 {
        font-size: 32px;
        font-weight: bold;
        color: #12263f;
    }

    .trip-heading p {
        font-size: 16px;
        color: #555;
        line-height: 1.5;
    }

.trip-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.trip-love {
    flex: 1 1 20%;
    background-color: #f8f9fc;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 300px;
    margin-top: 66px;
    overflow: hidden;
}

    .trip-love h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 55px;
    }

    .trip-love .love-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        height: 160px;
        overflow: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
    }


        .trip-love .love-tags::-webkit-scrollbar {
            display: none;
        }

.accordion-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}


.ithightlists {
    cursor: pointer;
}

.trip-love .tag {
    background-color: #e6e9ff;
    color: #5a67d8;
    height: 28px;
    padding: 3px 8px;
    font-size: 14px;
    border-radius: 25px;
    border-radius: 25px;
}

.trip-pace {
    flex: 1 1 25%;
    background-color: #f8f9fc;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .trip-pace h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .trip-pace .pace-status {
        display: flex;
        gap: 0px;
        margin-bottom: 15px;
    }

.pace-active {
    background-color: #6b5eff;
    color: #fff;
    padding: 10px 10px;
    border-radius: 0px;
    font-weight: 400;
    width: 70%;
}

.pace-rest {
    background-color: #e6e9ff;
    color: #555;
    padding: 10px 10px;
    border-radius: 0px;
    width: 30%;
    text-align: end;
}

.trip-pace .savings {
    font-size: 40px;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

    .trip-pace .savings span {
        color: #38a169;
        font-size: 14px;
        margin-left: 5px;
    }

.trip-pace .price {
    margin-top: 10px;
    background: rgb(155 213 185 / 94%);
    color: #ffffff;
    padding: 15px 10px;
    border-radius: 5px;
}

.trip-accommodation {
    flex: 1 1 20%;
    background: url('../images/pkg-details/Hotel_Back.png'),#fff;
    background-size: cover;
    border-radius: 20px;
    padding: 20px;
    color: #545454;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 260px;
    margin-top: 106px;
    overflow: hidden;
}

    .trip-accommodation h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #0451BB;
    }

    .trip-accommodation p {
        font-size: 14px;
    }

    .trip-accommodation .stars {
        position: absolute;
        bottom: 10px;
        left: 20px;
        background-color: #fff;
        padding: 5px 25px;
        border-radius: 5px;
        color: #ffb703;
        font-weight: bold;
        font-size: 24px;
    }

.trip-experiences {
    flex: 1 1 30%;
    background-color: #0451bb;
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

    .trip-experiences h3 {
        margin-bottom: 15px;
        background: #fff;
        font-size: 18px;
        padding: 29px;
        position: relative;
        top: -20px;
        padding-top: 60px;
        color: #878787;
    }

    .trip-experiences .experience-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .trip-experiences .tag {
        background-color: #ffffff5c;
        color: #fff;
        padding: 6px 13px;
        border-radius: 30px;
        font-size: 14px;
        margin-left: 9px;
    }

        .trip-experiences .tag.special {
            background: linear-gradient(90deg, #2af598 0%, #009efd 100%);
        }

        /*.trip-experiences .tag.special1 {
            background: linear-gradient(90deg, #f83600 0%, #f9d423 100%);
        }*/

        .trip-experiences .tag.special2 {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        }

@media (max-width: 768px) {
    .trip-love,
    .trip-pace,
    .trip-accommodation,
    .trip-experiences {
        flex: 1 1 100%;
    }
    .trip-accommodation {
        background-position: center;
    }
    .trip-experiences .tag {
       
        font-size: 10px;
        margin-left: 9px;
    }
}

.glance-container {
    background-color: #fff;
    padding: 0px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 60px 0;
}

.glance-details {
    flex: 2;
}

.glance-header {
    font-size: 28px;
    margin-bottom: 20px;
}

    .glance-header span {
        color: #000;
        font-weight: bold;
    }

.glance-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.glance-summary-item {
    border-right: 1px solid #ddd;
    padding-right: 20px;
}

    .glance-summary-item:last-child {
        border-right: none;
    }

    .glance-summary-item h3 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .glance-summary-item p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
    }

.ratings {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffb703;
    font-weight: bold;
}

.day-summary {
    background-color: #f8f9fc;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

    .day-summary div {
        flex: 1 1 auto;
    }

    .day-summary h4 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 0px;
        color: #333;
        margin-top: 0px;
    }

    .day-summary .progress {
        width: 100%;
        height: 5px;
        background-color: #ddd;
        margin-top: 5px;
        border-radius: 5px;
        position: relative;
        margin-bottom: 0px;
    }

    .day-summary .progress-bar {
        width: 100% !important;
        height: 5px;
        background-color: #ddd;
        position: absolute;
        border-radius: 5px;
    }

    .day-summary .ithightlists.cityhilightselected .progress-bar {
        width: 100% !important;
        height: 5px;
        background-color: #643cc2;
        position: absolute;
        border-radius: 5px;
    }

.highlights ul {
    list-style: none;
    margin-top: 10px;
}

    .highlights ul li {
        margin-bottom: 5px;
        color: #555;
        line-height: 1.5;
        font-size: 14px;
    }

.glance-image {
    flex: 1;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 40px;
    height: 493px;
    width: 100%;
}

    .glance-image img {
        width: 100%;
        height: 440px;
        object-fit: cover;
        object-fit: contain;
        background: #9fd1dc;
    }

.glance-cta {
    background-color: #2563eb;
    color: #fff;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .glance-cta:hover {
        background-color: #1d4ed8;
    }

@media (max-width: 768px) {
    .glance-summary {
        grid-template-columns: 1fr;
    }

    .glance-container {
        flex-direction: column;
    }

    .glance-details,
    .glance-image {
        flex: 1 1 100%;
    }
}

@media (max-width: 576px) {
    .glance-header {
        font-size: 24px;
    }

    .day-summary h4 {
        font-size: 18px;
    }

    .glance-cta {
        font-size: 14px;
        padding: 10px;
    }
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
    padding: 10px 30px;
}

.card-container {
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: 1fr;
    }
}

.card-container .card {
    /* background: linear-gradient(to bottom, rgb(255 255 255), rgb(234 245 255));*/
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    position: relative;
    transition: transform 0.3s ease-in-out;
    border: 2px solid #eee;
    margin-bottom: 30px;
}

    .card:hover {
        transform: scale(1.02);
    }

    .card .hotel-img img {
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
        height: 180px;
    }

.card-content {
    padding: 15px;
    flex: 1;
}

    .card-content h3 {
        margin-top: 0px;
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
    }

    .card-content p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
    }

.room-type {
    font-size: 14px;
    color: #38a169;
    margin-bottom: 10px;
}

.rating {
    color: #f4b400;
    float: right;
    overflow: hidden;
    border: none;
    height: auto;
}

.highlights {
    margin-top: 10px;
    list-style: none;
    color: #555;
    clear: both;
}

    .highlights li {
        margin-bottom: 0px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #000;
    }

        .highlights li::before {
            content: "✔";
            color: #38a169;
            font-weight: bold;
        }

.card-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    background: #0451bb;
    border-radius: 4px;
}

    .card-footer .icon {
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

.banner {
    position: absolute;
    top: 10px;
    left: -10px;
    background-color: #2e7d32;
    color: #fff;
    padding: 5px 15px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

.nights-tag {
}

    .nights-tag img {
        width: 100px;
        object-fit: fill;
        position: absolute;
        top: -48px;
        height: 70px;
        right: 5px;
    }

    .nights-tag span {
        position: absolute;
        top: -12px;
        right: 31px;
        font-weight: 600;
        color: #f7254a;
    }

@media (max-width: 576px) {
    .card {
        flex-direction: column !important;
    }

        .card img {
            width: 100%;
            height: 150px;
        }

    .card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.hotel-img {
    width: 40%;
    padding: 10px;
}

.ribbon-pop {
    background: var(--color-green-600);
    display: inline-block;
    padding: 5px 27px 5px 9px;
    color: white;
    position: absolute;
    left: -10px;
    top: 10px;
}

    .ribbon-pop:before {
        height: 0;
        width: 0;
        border-top: 10px solid #381f57;
        border-left: 10px solid transparent;
        bottom: -9px;
        position: absolute;
        content: "";
        left: 0;
    }

.heading {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.filters {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    position: sticky;
    top: 47px;
    z-index: 1;
    background: #fff;
    padding: 10px 0px;
    box-shadow: rgb(17 12 46 / 11%) 0px 48px 100px 0px;
}

.year-btn {
    padding: 10px 35px;
    border: none;
    background-color: #e5e7eb;
    color: #333;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

    .year-btn.active {
        background-color: #2563eb;
        color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.month-btn {
    padding: 5px 15px;
    border: 1px solid #0c2b86;
    border-radius: 5px;
    background-color: #fff;
    color: #0c2b86;
    cursor: pointer;
    transition: 0.3s;
}

    .month-btn:hover {
        background-color: #636363;
    }

.rate-card {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 5rem;
    border: 1px solid #c7c7c7;
    position: relative;
}

    .rate-card .left-section {
        padding: 20px;
        flex: 1;
        border-right: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .rate-card .left-section .status {
            position: absolute;
            top: -20px;
        }

        .rate-card .left-section .dates {
            display: flex;
            gap: 20px;
            align-items: center;
        }

            .rate-card .left-section .dates i {
                font-size: 20px;
            }

        .rate-card .left-section .date-info small {
            font-weight: 100;
            color: #5e7ab1;
        }

        .rate-card .left-section .date-info h4 {
            font-size: 22px;
            font-weight: normal;
            margin-bottom: 0px;
        }

.on-request {
    display: inline-block;
    background-color: #ffc20c !important;
    color: #000000;
    padding: 5px 20px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 500;
}

.available-tag {
    display: inline-block;
    background-color: #24b234;
    color: #fff;
    padding: 5px 20px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 500;
}


.soldout-tag {
    display: inline-block;
    background-color: #bd182e;
    color: #fff;
    padding: 5px 20px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: normal;
}

.lowest-price {
    background-color: #e5f4ec;
    color: #2f855a;
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-size: 18px;
    font-weight: normal;
}

.date-info {
    font-size: 18px;
    font-weight: bold;
}

.people-booked {
    border: 1px solid #6976eb;
    background: #f0f1fb;
    font-size: 14px;
    color: #5a67d8;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    width: 60%;
    border-radius: 5px;
}

.rate-card .center-section {
    padding: 20px;
    flex: 1;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.rate-card .center-section2 {
    padding: 20px;
    flex: 1;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.rate-card .center-section .rate-type div {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

    .rate-card .center-section .rate-type div span:first-child {
        color: #000;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .rate-card .center-section .rate-type div span:last-child {
        background: #d4ebf3;
        padding: 4px 20px;
        font-size: 18px;
        border-radius: 4px;
        color: #00465a;
        font-weight: 500;
        margin-left: auto;
    }

.rate-card .center-section .rate-type {
    padding-top: 40px;
}

.rate-card .center-section2 .rate-type div {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

    .rate-card .center-section2 .rate-type div span:first-child {
        color: #a0a0a0;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .rate-card .center-section2 .rate-type div span:last-child {
        background: #d4ebf3;
        padding: 4px 20px;
        font-size: 18px;
        border-radius: 4px;
        color: #60848e;
        font-weight: 500;
        margin-left: auto;
    }

.rate-card .center-section2 .rate-type {
    padding-top: 40px;
}

.room-type {
    font-size: 14px;
    font-weight: bold;
    color: #5e7ab1;
    margin-bottom: 5px;
    position: relative;
    bottom: 0;
}

.occupancy {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.occupancy-card {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 0px;
    background: linear-gradient(276deg, #fff 45.54%, #dee5fa 112.21%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #085786;
    font-weight: 600;
}

    .occupancy-card .price {
        font-size: 16px;
        font-weight: bold;
        color: #2f855a;
    }

.rate-card .right-section {
    padding: 20px;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position:relative;
}

    .rate-card .right-section a {
        text-decoration: none;
        color: #5e7ab1;
        font-weight: 600;
        margin-top:12px;
    }

.earnings {
    background-color: #9bc659;
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
}

.book-now {
    background-color: #2563eb;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 auto;
    width: 60%;
}

    .book-now:hover {
        background-color: #1d4ed8;
    }

@media (max-width: 768px) {
    .rate-card {
        flex-direction: column;
    }

        .rate-card .left-section,
        .rate-card .center-section,
        .rate-card .right-section {
            border: none;
        }
            .rate-card .left-section .date-info small {
                font-weight: 600;
                color: #437ef2;
            }
}

.savings {
    text-align: right;
    font-size: 14px;
    margin-left: 10px;
    color: teal;
    margin-bottom: 2px;
    font-weight: 600;
}

.no-savings {
    text-align: right;
    font-size: 14px;
    margin-left: 10px;
    color: teal;
    margin-bottom: 2px;
    font-weight: 600;
}

.savings span {
    color: #555;
}

.trip-container {
}

.trip-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 10px;
    border: 1px solid #eee;
    position: relative;
}

    .trip-card:hover {
        transform: scale(1.03);
    }

    .trip-card .trip-card-img {
        position: relative;
        display: inline-block;
        border-radius: 5px;
        overflow: hidden;
        width: 100%;
        height: 180px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .trip-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.trip-tag {
    position: absolute;
    background-color: white;
    color: #333;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.8rem;
    top: 20px;
    right: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.trip-info {
    padding: 15px 0px;
    position: relative;
}

    .trip-info .nights {
        background: #eee;
        padding: 4px 10px;
        display: inline-table;
        border-radius: 4px;
        margin: 0px;
    }


    .trip-info h3 {
        margin-bottom: 5px;
        margin-top: 8px;
        font-weight: normal;
        font-size: 16px;
    }

    .trip-info hr {
        margin-top: 10px;
        margin-bottom: 10px;
        border: 0;
        border-top: 1px solid #eee;
    }

    .trip-info p {
        font-size: 0.9rem;
        color: #555;
        margin: 5px 0;
    }

    .trip-info .price {
        font-size: 1rem;
        margin: 10px 0;
    }

.price span {
    text-decoration: line-through;
    color: #999;
    margin-right: 5px;
}

.justify {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .justify .price {
        margin: 0;
        font-weight: 700;
    }

.explore-btn {
    display: inline-block;
    background-color: #0451bb;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: auto;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    .trip-container {
        grid-template-columns: 1fr;
    }

    .trip-card {
        margin: auto;
    }
}

.rate-section {
    margin: 50px 0;
}

.cancellation {
    margin: 60px 0;
}

    .cancellation .card-main {
        display: flex;
        flex-wrap: wrap;
    }

    .cancellation .cancellation-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .cancellation .cancellation-box .c-Policy {
            width: 27%;
        }

        .cancellation .cancellation-box .c-Policy-1 {
            margin-left: auto;
        }

    .cancellation .card-box {
        border-radius: 20px;
        border: 1px solid #e9e9e9;
        background: #fcfcfc;
        overflow: visible;
        width: 285px;
        flex: 1 1 calc(33.333% - 20px);
        margin: 10px;
        position: relative;
    }

    .cancellation small {
        color: #5E7AB1;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 135%;
        letter-spacing: -0.72px;
    }


    .cancellation .card-inner {
        padding: 30px 30px 0px 30px;
    }

        .cancellation .card-inner h1 {
            margin-top: 5px;
            font-size: 30px;
        }

        .cancellation .card-inner p {
            color: #A0A0A0;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 25px;
            width: 60%;
            margin-bottom: 34px
        }

    .cancellation .card-footer {
        background: #E9F1F7;
        border-radius: 0px;
        padding: 20px;
    }


        .cancellation .card-footer h4 {
            color: #1383BC;
            margin-left: 10px;
            font-size: 30px;
        }

            .cancellation .card-footer h4 small {
                color: #A0A0A0;
            }

.extension-trip {
    margin: 50px 0;
}

    .extension-trip .ext-duration {
        border-radius: 4px;
        background: #E5EAF8;
        display: flex;
        padding: 15px;
        margin-top: 25px;
        align-items: center;
    }

        .extension-trip .ext-duration p {
            margin: 0;
        }

        .extension-trip .ext-duration a {
            margin: 0;
            margin-left: auto;
            text-decoration: underline;
            font-weight: 600;
        }



.tour-highlights {
    margin: 50px 0;
}

    .tour-highlights .para {
        margin-bottom: 30px;
        color: #000;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        width: 70%;
    }


    @media only screen and (max-width: 600px) {
        .tour-highlights .para {
            width: 100%;
        }
    }

    .tour-highlights .card {
        height: 460px;
        background-size: cover !important;
        background-position: center !important;
        overflow: hidden;
    }

        .tour-highlights .card span {
            border-radius: 0px 0px 0px 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 600;
            background: #DBE2F0;
            width: 70px;
            height: 70px;
            flex-shrink: 0;
            position: absolute;
            right: 0;
            color: #4B70E2;
        }


        .tour-highlights .card .hi-bottom {
            position: absolute;
            bottom: 0;
            background: linear-gradient(to top, rgb(0 0 0), rgb(0 0 0 / 0%));
            color: #fff;
            padding: 15px;
        }

            .tour-highlights .card .hi-bottom p {
                font-size: 18px;
            }


/*kk css*/
body {
}

.menu-part {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.all-top-lists {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

.menu-item {
    color: #7F7F7F;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

    .menu-item.selected {
        color: #000;
        font-weight: 600;
    }

        .menu-item.selected::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #000;
        }

    .menu-item:hover {
        color: #000;
    }

Content Div Styling
.content-container {
    margin-top: 20px;
    text-align: center;
}

.content-div {
    display: none;
    font-size: 18px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .content-div.active {
        display: block;
    }

.all-it-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    position: sticky;
    top: 40px;
    padding-top: 9px;
    background: #fff;
    z-index: 2;
    box-shadow: rgb(17 12 46 / 6%) 0px 48px 100px 0px;
}

.t-one, .t-two, .t-three {
    flex: 1;
}

    .t-one p {
        font-size: clamp(2rem, 1.5vw, 2.5em);
        margin: 0;
        color: #090909;
        font-family: Inter;
        font-weight: 300;
    }


        .t-one p span {
            font-weight: 600;
        }

.t-two {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

    .t-two .day-label {
        font-size: 20px;
        font-weight: bold;
        color: #7C7C7C;
        font-family: Inter;
    }

.sold-out {
    color: red !important;
    border: 1px dashed !important;
    padding: 4px 10px !important;
    border-radius: 25px !important;
    background: #ff00001c !important;
    text-align: center !important;
    font-size: 12px !important;
    cursor: no-drop !important;
}


.sold-out1 {
    color: #276D20 !important;
    border: 1px dashed !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    background: #EAF1E9 !important;
    text-align: center !important;
    font-size: 12px !important;
    cursor: no-drop !important;
}

.request-now {
    background-color: #ffc20c !important;
    color: #000000;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 auto;
    width: 60%;
}

.table {
    width: 100%;
    border-top: 1px solid #ccc;
    border-collapse: collapse;
}

    .table th, .table td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: center;
    }

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.agent-header {
    background: rgba(26, 165, 216, 0.16);
    font-weight: bold;
}

.guest-header {
    background: rgba(146, 216, 26, 0.16);
    font-weight: bold;
}

.agent-cell {
    background: rgba(26, 165, 216, 0.16);
}

.guest-cell {
    background: rgba(146, 216, 26, 0.16);
}

.total-label {
    background: #fff;
    color: #000;
    font-weight: bold;
}

.total-cell, .earning-cell {
    background: #fff;
    color: #000;
}

.earning-cell {
    color: #45b64a;
    font-size: 18px;
    font-weight: bold;
}

.total-earning-label {
    background: #fff;
    color: #000;
    font-weight: bold;
    position: relative;
}

.earning-text {
    float: left;
    margin-top: 10px;
}

.dollar-icon {
    width: 50px;
    float: right;
}

.star-btn {
    padding: 10px 35px;
    border: none;
    background-color: #e5e7eb;
    color: #333;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.myearning {
   background: linear-gradient(270deg, rgba(155, 198, 89, 0.16) 20.18%, #00a913 108.7%);
    margin-bottom: 0px;
    padding: 7px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    position: absolute;
    width: 100%;
    right: 0px;
    bottom: 0px;
    left: 0;
}

.cut-price {
    text-decoration: line-through;
    color: #ff0000;
    font-size: 20px;
    margin-left: auto;
    opacity: 0.7;
}

.selling-tag {
    display: inline-block;
    background-color: #df7e1a !important;
    color: #fff;
    padding: 5px 20px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: normal;
}

.selling-fast {
    background-color: #df7e1a !important;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 auto;
    width: 60%;
}

.monthactive {
    background: #044eb4;
    color: #fff;
}

.t-two .day-box {
    width: 38px;
    height: 38px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #DCDEE2;
    background: var(--White-White, #FFF);
    /* Shadows/Gray/1 Level */
    box-shadow: 0px 1px 3px 0px rgba(96, 108, 128, 0.05);
    font-size: 16px;
    font-weight: bold;
    color: #7E95DA;
    font-family: Inter;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-three {
    display: flex;
    justify-content: flex-end;
}

    .t-three button {
    }

.exp-b {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 35px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    border-radius: 8px 0px 0px 8px;
    border: 1px solid var(--Gray-50, #EBEEF2);
    background: var(--Gray-10, #FAFBFC);
    color: var(--Gray-500, #606C80);
    text-align: center;
    transition: background-color 0.3s;
}

.clp-b {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 35px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    border-radius: 0px 8px 8px 0px;
    border: 1px solid var(--Gray-50, #EBEEF2);
    background: var(--Gray-10, #FAFBFC);
    color: var(--Gray-500, #606C80);
    text-align: center;
    transition: background-color 0.3s;
}




.iti-full-part {
    margin-top: 3.5rem;
    margin-bottom: 7rem;
}

.ssp_part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    /*margin-left: 1.5rem;*/
}

.day-part-iti {
    flex: 1;
}

    .day-part-iti .day-date {
        font-size: clamp(0.5rem, 1.5vw, 1em);
        color: #7F7F7F;
        font-weight: 600;
        font-family: Inter;
    }

    .day-part-iti .day-description {
        font-size: 17px;
        font-weight: 600;
    }

.stay-part .stay-location {
    font-size: clamp(0.5rem, 1.5vw, 1em);
    color: #8d8787;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: Inter;
}

.iti-head {
    flex: 1;
}

    .iti-head p {
        color: #404040;
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 500;
        margin: 0;
        font-style: normal;
    }

.all-iti-new-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 22px 17px;
    background: #F2F2F9;
}

.see-all {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .see-all p {
        color: #7C7C7C;
        font-size: 14px;
        font-family: Inter, sans-serif;
        font-style: normal;
        margin: 0;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

        .see-all p svg {
            width: 10px;
            height: 20px;
            margin-left: 8px;
        }

.iti-content-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 3px 36px;
    margin-top: 1rem;
}

.text-content-new {
    width: 80%;
}

    .text-content-new p {
        font-size: 15px;
        color: #000;
    }

.left-content-new .details-content p {
    font-size: clamp(1rem, 2vw, 1.18em);
    color: #7F7F7F;
    font-family: Inter, sans-serif;
    margin: 0.2em 0;
}

.left-content-new .details-content span {
    color: #000;
    font-weight: bold;
}

.right-image-new {
    flex: 1;
    position: relative;
}

    .right-image-new img {        
        object-fit: cover;
        border-radius: 30px;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    }

.right-image-new {
    margin-top: 50px;
    width: 100%;
    height: auto;
}

    .right-image-new picture img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


.accom-loc {
    display: flex;
    gap: 20px;
    background: linear-gradient(269deg, #F3F3F3 -16.69%, rgba(243, 243, 243, 0.00) 80.65%);
    align-items: center;
    padding: 10px 15px;
    width: 60%;
    margin-top: 1rem;
}

.accom-img img {
    width: 150px;
    height: 86px;
    object-fit: cover;
    border-radius: 8px;
}

.accom-text p {
    color: #545151;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.iti-accom {
    padding: 5px 31px;
}

.star {
    font-size: 14px;
    color: #FFD700;
}

.iti-accom-head p {
    font-family: Inter, sans-serif;
    font-size: 24px;
    color: #333;
    margin: 0;
    padding: 0;
}

.iti-accom-head span {
    font-weight: bold;
    color: #0451BB;
    font-size: 24px;
}

.selectio-acti {
    display: flex;
    gap: 14px;
    flex-wrap: wrap; /* Ensure responsiveness on smaller screens */
}

.activity-item {
    text-align: center;
}



    .activity-item img {
        width: 245.094px;
        height: 180px;
        object-fit: cover;
        border-radius: 8px; /* Optional, for rounded corners */
        margin-bottom: 10px;
    }

    .activity-item p {
        font-size: 16px;
        color: #555;
    }

.inner-act-part {
    border-radius: 10px;
    border: 1px solid #EAEAEA;
    padding: 5px;
    background: #FFF;
    height: 300px;
    box-shadow: 0px 104px 29px 0px rgba(194, 194, 194, 0.00), 0px 67px 27px 0px rgba(194, 194, 194, 0.01), 0px 38px 23px 0px rgba(194, 194, 194, 0.05), 0px 17px 17px 0px rgba(194, 194, 194, 0.09), 0px 4px 9px 0px rgba(194, 194, 194, 0.10);
}

.act-inc {
    color: #00B67A;
    font-family: Inter;
    font-size: 14px;
}

.act-not-inc {
    color: #5E5E5E;
    font-family: Inter;
    font-size: 14px;
}

.act-inner-content .activity-title {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    color: #333;
    margin-bottom: 10px; /* Adds space below the title */
}

.iti-accom-head {
    margin-top: 2rem;
}

.iti-acti {
    border-top: 2px solid #D9D9D9;
    /*background: linear-gradient(180deg, rgba(217, 217, 217, 0.15) 0%, rgba(255, 255, 255, 0.15) 116.46%);*/
    margin-top: 2rem;
    padding: 5px 0px;
}

.act-inner-content .activity-details {
    font-size: 14px;
    color: #777;
    margin: 0;
    border-radius: 9.5px;
    background: #F9F9F9;
}

.act-image-part {
    background-size: cover;
    height: 150px;
    border-radius: 8px;
    position: relative;
    background-position: center;
}

.act-new-button {
    position: absolute;
    bottom: 7px;
    right: 16px;
    padding: 10px 16px;
    color: #005BFF;
    border: 1px solid #005BFF;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .act-new-button:hover {
        background-color: royalblue;
        color: white;
    }

.act-inner-content {
    padding: 5px;
}
/* Initially hide the content */
#accordion-content {
    display: block;
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease, transform 0.5s ease;
}

    #accordion-content.open {
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
    }

#accordion-toggle svg {
    transition: transform 0.3s ease;
}

    #accordion-toggle svg.open {
        transform: rotate(180deg);
    }


.container.inc-exc {
    display: flex;
    justify-content: space-between;
}

.trip-inclusion,
.trip-exclusion {
    flex: 1;
    padding: 10px;
}

    .trip-inclusion h3 {
        margin-bottom: 10px;
        color: var(--color-green-600) !important;
        font-size: 20px;
        background: #00964524 !important;
        border: 2px solid #009645;
        font-weight: 500;
        width: 45%;
        padding: 10px 20px;
        border-radius: 7px;
    }

    .trip-exclusion h3 {
        margin-bottom: 10px;
        color: #c35b5b;
        font-size: 20px;
        background: #c35b5b38;
        border: 2px solid #c35b5b;
        font-weight: 500;
        width: 45%;
        padding: 10px 20px;
        border-radius: 7px;
    }

    .trip-inclusion p,
    .trip-exclusion p {
        /*display: flex;*/
        align-items: center;
        margin: 8px 0;
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }

    .trip-inclusion .icon,
    .trip-exclusion .icon {
        margin-right: 8px;
        font-size: 18px;
    }

    .trip-inclusion .green-tick {
        color: green;
    }

    .trip-exclusion .red-cross {
        color: red;
    }

.inc-exc-part {
    background: rgb(255 255 255);
}


.travel-info-container {
    display: flex;
    align-items: center;
    border-radius: 17px;
    background: #0451BB;
    justify-content: space-between;
    margin: 5px 22px;
    padding: 0;
    border-radius: 8px;
}

.travel-info-content {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

    .travel-info-content .travel-info-image {
        width: 300px;
        height: 160px;
        object-fit: cover;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .travel-info-content .travel-info-text {
        flex-grow: 1; /* Allow the text to expand */
    }

        .travel-info-content .travel-info-text .travel-info-heading {
            margin: 0;
            color: rgba(255, 255, 255, 0.88);
            font-family: Inter;
            font-size: 20px;
            font-style: normal;
            font-weight: 800;
        }

        .travel-info-content .travel-info-text .travel-info-description {
            color: #FFF;
            font-family: Inter;
            font-size: 16px;
            margin-top: 1rem;
            font-style: normal;
            font-weight: 500;
        }

    .travel-info-content .travel-info-button {
        padding: 10px 20px;
        border-radius: 9px;
        border: 1.5px solid #7E95DA;
        background: #FFF;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        color: #7E95DA;
        font-family: Inter;
        font-weight: 600;
        margin-right: 4rem;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }

        .travel-info-content .travel-info-button:hover {
            background-color: royalblue;
            color: white;
        }

.view-similar {
    margin: 20px;
}

    .view-similar h4 {
        font-family: Inter, sans-serif;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #333;
    }

.similar-trip {
    padding: 40px 0px;
}

.similar-tour-tab {
    display: flex;
    justify-content: space-between; /* Ensures equal spacing */
    align-items: center;
    gap: 3rem; /* Adds spacing between divs */
    flex-wrap: wrap; /* Makes it responsive */
}

.inner-tm {
    height: 200px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 8px;
}

.similar-tour-tab .tour-item {
    flex: 1;
    padding: 5px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    background: #FCFCFC;
    box-shadow: 0px 134px 37px 0px rgba(214, 214, 214, 0.00), 0px 86px 34px 0px rgba(214, 214, 214, 0.01), 0px 48px 29px 0px rgba(214, 214, 214, 0.05), 0px 21px 21px 0px rgba(214, 214, 214, 0.09), 0px 5px 12px 0px rgba(214, 214, 214, 0.10);
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

    .similar-tour-tab .tour-item:hover {
        transform: translateY(-5px);
    }

.trip-name-part {
    font-family: Inter, sans-serif;
}

    .trip-name-part p {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

.trip-desc {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .trip-desc .trip-item {
        position: relative;
        padding-left: 20px;
        font-size: 12px;
        color: #4495F4;
    }

        .trip-desc .trip-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            background-color: #4495F4; /* Blue dot color */
            border-radius: 50%; /* Make it circular */
        }

.view-similar {
    padding: 15px 15px;
}

.tour-item-new {
    flex: 1;
}

.item-div-price-part {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 15px;
}

/* Price information styling */
.price-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.price-label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #939292;
    margin: 0;
}

.price-row {
    display: flex;
    gap: 10px;
}

.price-old {
    color: #939292;
    font-size: 14px;
    text-decoration: line-through;
    font-family: Inter, sans-serif;
}

.price-new {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    font-family: Inter, sans-serif;
}

/* Button styling */
.price-button-container {
    display: flex;
    align-items: center;
}

.tour-it-cont {
    margin-top: 0.5rem;
    padding: 5px 8px;
}

.nad {
    border-radius: 3px;
    text-align: center;
    padding: 5px;
    width: 50%;
    color: #939292;
    font-weight: 500;
    background: #F1F1F1;
}

.b-sepe {
    height: 1px;
    margin: 0.5rem;
    background-color: #DADADA;
}

.price-check-button {
    padding: 10px 24px;
    font-size: 14px;
    font-family: Inter, sans-serif;
    color: #fff;
    border-radius: 10px;
    background: #0451BB;
    box-shadow: 0px 20px 35px 0px #E1EDFD;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .price-check-button:hover {
        background-color: #033d96;
    }

.ti-tour {
    color: #6C6868;
    background: #fff;
}

.ti-tour {
    position: absolute;
    color: #000;
    font-family: Inter, sans-serif;
    padding: 3px 16px;
    background: #fff;
    border-radius: 25px;
}

.ti-save {
    position: absolute;
    border-radius: 0px 8px;
    background: #FFD878;
    color: #000;
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: bold;
    padding: 8px 16px;
}

.ti-tour {
    top: 10px;
    right: 10px;
}

.ti-save {
    bottom: 0;
    right: 0;
}

.big-savings-heading {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    color: #0FA9A8;
    margin: 10px 0;
}

.trip-savings-text {
    color: #6C6868;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.feed-part-container {
    display: flex;
    gap: 50px;
}

.text-content-all {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 0px 70px;
    flex-basis: 50%;
}

.help-me {
    background: #F2F2F9;
    padding: 40px 0px;
}

.text-content-all .text-item-one {
    color: #5E5E5E;
    font-family: Inter;
    letter-spacing: 0.5px;
    line-height: normal;
    font-weight: 600;
    font-size: 32px;
}

.text-content-all .text-item-two {
    color: #818181;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
}

.text-content-all .text-item-three {
    margin: 0;
    color: #000;
    font-family: Aboreto;
    font-size: 24px;
}

.image-content-all {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .image-content-all img {
        max-width: 100%;
        height: 370px;
        border-radius: 28px;
    }

.faq-part {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.faq-container.faq-main {
    margin: 0 auto;
}

.faq-content p {
    color: #363049;
    font-family: Inter;
    opacity: 0.7;
    padding: 0rem 4rem;
    font-size: 17px;
    font-weight: 400;
}

.faq-container.faq-main .faq-title {
    color: #404040;
    font-family: Inter;
    margin-left: 0.5rem;
    font-size: 32px;
    margin-bottom: 30px;
}

.faq-container.faq-main .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 9rem;
    position: relative;
}

.faq-container.faq-main .faq-item {
    position: relative;
    border-radius: 4.911px;
    background: #FFF;
    box-shadow: 0px 24.556px 32.742px -14.734px rgba(149, 149, 149, 0.25);
}

    .faq-container.faq-main .faq-item .faq-header {
        background: #ffffff;
        padding: 27px 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        z-index: 0;
    }

        .faq-container.faq-main .faq-item .faq-header:hover {
            background: #f8f9fa;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-question {
            margin: 0;
            font-size: 16px;
            margin-left: 4rem;
            color: #333;
            font-weight: 600;
            flex: 1;
        }

    .faq-container.faq-main .faq-item .faq-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        opacity: 0;
        visibility: hidden;
        background-color: #fff;
        border: 1px solid #e9ecef;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 0;
        transform: translateY(-10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }

        .faq-container.faq-main .faq-item .faq-content.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

    .faq-container.faq-main .faq-item .faq-header .faq-icon {
        width: 20px;
        height: 20px;
        position: relative;
    }

        .faq-container.faq-main .faq-item .faq-header .faq-icon::before,
        .faq-container.faq-main .faq-item .faq-header .faq-icon::after {
            content: '';
            position: absolute;
            background-color: #1B1139;
            transition: transform 0.3s ease;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-icon::before {
            width: 2px;
            height: 20px;
            left: 9px;
            top: 0;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-icon::after {
            width: 20px;
            height: 2px;
            left: 0;
            top: 9px;
        }

    .faq-container.faq-main .faq-item .faq-header.active .faq-icon::before {
        transform: rotate(90deg);
    }

    .faq-container.faq-main .faq-item .faq-header.active {
        z-index: 3;
    }




.perfect-part-top {
    margin-bottom: 30px;
    text-align: start;
}

    .perfect-part-top h3 {
        color: #404040;
        font-family: Inter;
        font-size: 36px;
    }

    .perfect-part-top p {
        color: #959595;
        font-size: 17px;
        padding-right: 24rem;
    }

.four-perfect-part {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 1rem;
}

.perfect-item {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    height: 440px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .perfect-item .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(35 35 35 / 15%);
        color: #fff;
        align-items: center;
        text-align: center;
        padding: 20px;
        opacity: 1;
    }

        .perfect-item .overlay h4 {
            color: rgba(255, 255, 255, 0.88);
            font-family: Inter;
            font-size: 30px;
            text-align: start;
        }

        .perfect-item .overlay p {
            color: rgba(255, 255, 255, 0.88);
            font-size: 16px;
            text-align: start;
            position: absolute;
            bottom: 0;
        }

.new-perfect-iti-part {
    margin: auto;
    margin: 20px;
    text-align: center;
    padding: 15px 35px;
    font-family: Inter;
}

.new-perfect-part-top {
    margin-bottom: 30px;
    text-align: start;
}

    .new-perfect-part-top h3 {
        color: #404040;
        font-family: Inter;
        font-size: 27px;
    }

    .new-perfect-part-top p {
        color: #959595;
        font-family: Inter;
        font-size: 18px;
        width: 70%;
        font-weight: 400;
        opacity: 0.7;
    }

/* Four Images in a Row */
.new-four-perfect-part {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.new-perfect-item {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    height: 440px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    /* Overlay Styling (Visible by Default) */
    .new-perfect-item .new-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(35 35 35 / 15%);
        color: #fff;
        align-items: center;
        text-align: center;
        opacity: 1;
    }

        .new-perfect-item .new-overlay h4 {
            color: rgba(255, 255, 255, 0.88);
            font-family: Inter;
            font-size: 36px;
            position: absolute;
            text-align: start;
            padding: 18px 29px;
            margin: 0;
            border-radius: 0px 16px;
            background: #DBE2F0;
            right: -6px;
            top: 0;
        }

        .new-perfect-item .new-overlay p {
            color: rgba(255, 255, 255, 0.88);
            font-family: Inter;
            font-size: 16px;
            text-align: start;
            position: absolute;
            border-radius: 0px 0px 16px 16px;
            background: rgba(33, 33, 33, 0.41);
            backdrop-filter: blur(2px);
            padding: 15px 20px;
            margin: 0;
            bottom: 0;
        }


.cancel-part-all {
    padding: 20px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.cancel-part-first p {
    margin-top: 2rem;
}

.cancel-p1 {
    color: #404040;
    font-family: Inter;
    font-size: 36px;
    font-weight: 700;
}

.cancel-p2 {
    color: #FFF;
    border-radius: 13px;
    background: linear-gradient(90deg, #2AF598 0%, #009EFD 100%);
    font-family: Inter;
    width: 60%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 17px 0px;
}

.cancel-p3 {
    color: #717171;
    font-family: Inter;
    font-weight: 400;
    font-size: 17px;
    padding: 18px 8px;
    width: 65%;
}

.cancel-part-second {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    /* padding: 25px 36px; */
    margin-top: 30px;
}

.cancel-part-first {
    flex: 1;
}

.row-div1 {
    border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #E9E9E9;
    background: #FCFCFC;
    text-align: center;
    padding: 10px;
}

.row-div1-new {
    position: relative;
    gap: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 24px;
}

    .row-div1-new .div1-new .p1-new {
        color: #5E7AB1;
        font-family: Inter;
        font-size: 16px;
    }

    .row-div1-new .div1-new .p2-new {
        color: #1a1847;
        font-family: Inter;
        font-size: 36px;
        font-weight: 700;
    }

        .row-div1-new .div1-new .p2-new .span1-new {
            color: #A0A0A0;
            font-feature-settings: 'sups' on;
            font-family: Inter;
            font-size: 28px;
            font-weight: 500;
        }

    .row-div1-new .div1-new .p3-new {
        color: #A0A0A0;
        font-family: Inter;
        font-size: 28px;
        line-height: normal;
        font-weight: 500;
    }

.inner-cacel-part-two {
    margin-top: 1rem;
}
/* Styling for div2-new */
.row-div1-new .div2-new .p4-new {
    color: #1383BC;
    font-family: Inter;
    font-size: 18px;
    margin: 0;
}


/* Styling for div3-new */
.row-div1-new .div3-new .p5-new {
    color: #1383BC;
    font-family: Inter;
    font-size: 30px;
    text-align: center;
    padding: 19px 20px;
    margin: 0;
    font-weight: 600;
}

.no-refund p {
    position: absolute;
    right: -4px;
    top: -33px;
    background: #F4D3D8;
    color: rgba(202, 46, 67, 0.94);
    font-feature-settings: 'sups' on;
    font-family: Inter;
    font-size: 14px;
    border-radius: 50%;
    height: 80px;
    display: flex;
    width: 80px;
    /* padding: 43px 21px; */
    font-style: normal;
    font-weight: 500;
    justify-content: center;
    align-items: center;
}

.row-div1-new .div3-new .p5-new .span2-new {
    color: #A0A0A0;
    font-feature-settings: 'sups' on;
    font-family: Inter;
    font-size: 18px;
}

.div1-new {
    padding: 20px 45px;
}

.div2-new {
    padding: 20px 45px;
}

.row-div2 {
    background-color: #D1ECF1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
}

.div3-new {
    border-radius: 0px 0px 20px 21px;
    background: #E9F1F7;
}

.row-div3 {
    background-color: #D4EDDA;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .cancel-part-second {
        gap: 1rem;
        justify-content: normal;
    }

    .row-div1, .row-div2, .row-div3 {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    .new-four-perfect-part {
        flex-wrap: wrap;
        gap: 10px;
    }

    .new-perfect-item {
        flex: 1 1 calc(50% - 10px);
        height: 250px;
    }
}

@media (max-width: 468px) {
    .new-perfect-item {
        flex: 1 1 100%;
        height: 200px;
    }

    .new-perfect-part-top h3 {
        font-size: 20px;
    }

    .new-perfect-part-top p {
        font-size: 14px;
        width: 100%;
    }

    .new-overlay h4 {
        font-size: 18px;
    }

    .new-overlay p {
        font-size: 12px;
    }
}


/* Media Queries */
@media (max-width: 768px) {
    .four-perfect-part {
        flex-wrap: wrap;
        gap: 10px;
    }

    .perfect-item {
        flex: 1 1 calc(50% - 10px);
        height: 250px;
    }
}

@media (max-width: 468px) {
    .perfect-item {
        flex: 1 1 100%;
        height: 200px;
    }

    .perfect-part-top h3 {
        font-size: 20px;
    }

    .perfect-part-top p {
        font-size: 14px;
        padding-right: 0;
    }

    .overlay h4 {
        font-size: 18px;
    }

    .overlay p {
        font-size: 12px;
    }

    .cancel-part-all {
        display: block;
        padding: 0;
    }
}


@media (max-width: 600px) and (orientation: portrait) {
    .all-it-part {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .t-one, .t-two, .t-three {
        flex: unset;
        width: 100%;
    }

        .t-one p {
            font-size: clamp(1rem, 4vw, 1.5em);
        }

        .t-two .day-label {
            font-size: 16px;
        }

        .t-two .day-box {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }

    .t-three {
        justify-content: flex-start;
        width: 100%;
    }

    .exp-b, .clp-b {
        font-size: 10px;
        padding: 10px 20px;
    }

    .iti-full-part {
        margin-top: 2rem;
    }

    .ssp_part {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .day-part-iti .day-date, .stay-part .stay-location {
        font-size: clamp(0.4rem, 3vw, 0.9em);
    }

    .day-part-iti .day-description {
        font-size: clamp(0.8rem, 4vw, 1.2em);
    }

    .iti-content {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .right-image-new {
        width: 100%;
        height: 220px;
        margin-top: 15px;
    }

        .right-image-new img {
            width: 500px;
            height: 400px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .left-content-new .text-content-new p,
    .left-content-new .details-content p {
        font-size: clamp(0.9rem, 6vw, 1em);
    }

    .left-content-new .details-content span {
        font-size: clamp(0.8rem, 5vw, 1em);
    }

    .travel-info-container {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin: 0;
    }

    .travel-info-content {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

        .travel-info-content .travel-info-image {
            width: 100%;
            height: 170px;
        }

        .travel-info-content .travel-info-text .travel-info-heading {
            font-size: 16px;
            text-align: center;
        }

        .travel-info-content .travel-info-text .travel-info-description {
            font-size: 14px;
            text-align: center;
            margin-top: 0.5rem;
        }

        .travel-info-content .travel-info-button {
            font-size: 14px;
        }

    .trip-desc {
        flex-direction: row; /* Stack items vertically */
        gap: 8px; /* Reduce space for smaller screens */
    }

        .trip-desc .trip-item {
            font-size: 13px;
            padding-left: 16px;
        }

            .trip-desc .trip-item::before {
                width: 6px;
                height: 6px;
            }

    .faq-container.faq-main .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .faq-container.faq-main .faq-item .faq-header {
        padding: 15px;
    }

    .faq-container.faq-main .faq-item .faq-content {
        padding: 8px;
    }

    .faq-container.faq-main {
        margin: 0 auto;
        padding: 5px;
    }

        .faq-container.faq-main .faq-title {
            font-size: 16px;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-question {
            margin: 0;
            font-size: 14px;
            font-weight: 500;
            margin-left: 0.5rem;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-icon::before {
            width: 2px;
            height: 20px;
            left: 9px;
            top: 0;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-icon::after {
            width: 20px;
            height: 1px;
            left: 0;
            top: 9px;
        }

    .faq-content p {
        padding: 5px;
        font-size: 12px;
        font-weight: 400;
    }

    .perfect-iti-part {
        padding: 5px;
        margin: 0;
    }

    .feed-part-container {
        padding: 0.5rem 10px;
    }

    .faq-part {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .perfect-item .overlay h4 {
        font-size: 16px;
        text-align: start;
    }

    .perfect-item .overlay p {
        font-size: 13px;
    }

    .new-perfect-iti-part {
        margin: 5px;
        text-align: center;
        padding: 5px;
    }

    .new-perfect-item .new-overlay p {
        font-size: 13px;
        padding: 7px;
    }

    .new-perfect-item .new-overlay h4 {
        font-size: 20px;
        padding: 13px 15px;
        margin: 0;
        border-radius: 0px 16px;
    }

    .cancel-part-first p {
        margin-top: 0.5rem;
    }

    .cancel-p1 {
        font-size: 18px;
    }

    .cancel-p2 {
        color: #FFF;
        font-size: 12px;
        width: 100%;
        padding: 10px 15px;
    }

    .cancel-p3 {
        font-size: 14px;
        width: 100%;
    }

    .row-div1-new .div1-new .p2-new {
        font-size: 16px;
        font-weight: 700;
    }

        .row-div1-new .div1-new .p2-new .span1-new {
            font-size: 14px;
            font-weight: 500;
        }

    .row-div1-new .div1-new .p3-new {
        color: #A0A0A0;
        font-family: Inter;
        font-size: 14px;
    }

    .inner-cacel-part-two {
        margin-top: 0rem;
    }

    .row-div1-new .div3-new .p5-new {
        color: #1383BC;
        font-family: Inter;
        font-size: 14px;
    }

    .div2-new {
        padding: 11px 43px;
    }

    .no-refund p {
        font-size: 12px;
        height: 65px;
        width: 65px;
    }

    .text-content-all {
        padding: 5px;
        flex-basis: 50%;
    }

    .feed-part-container {
        flex-direction: column;
    }

    .text-content-all .text-item-two {
        font-size: 14px;
        font-style: normal;
    }

    .text-content-all .text-item-one {
        font-size: 18px;
    }

    .text-content-all .text-item-three {
        margin: 0;
        color: #000;
        font-family: Aboreto;
        font-size: 14px;
    }

    .view-similar {
        padding: 5px;
        margin: 0;
    }

    .inner-tm {
        height: 160px;
        background-position: center;
        background-size: cover;
        position: relative;
        border-radius: 8px;
    }

    .nad {
        border-radius: 3px;
        text-align: center;
        padding: 5px;
        width: 62%;
    }

    .container.inc-exc {
        display: block;
        justify-content: space-between;
    }

    .image-content-all img {
        max-width: 100%;
        height: 181px;
        object-fit: cover;
        border-radius: 28px;
    }

    .cancel-part-second {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: normal;
    }

    .inc-exc-part {
        background: rgba(242, 242, 249, 0.43);
        padding: 1rem 0rem;
    }

    .trip-inclusion p, .trip-exclusion p {
        font-size: 12px;
    }

    .trip-exclusion h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .trip-inclusion h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }
}
/* Media query for tablets (max-width: 768px) */
@media (max-width: 768px) and (orientation: landscape) {
    .all-it-part {
        gap: 10px;
        align-items: center;
        padding: 0 10px;
        margin-top: 4.5rem;
    }

    .t-one p {
        font-size: clamp(1rem, 2.5vw, 1.5em);
    }

    .t-two .day-label {
        font-size: 14px;
    }

    .t-two .day-box {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .t-three {
        justify-content: flex-end;
    }

    .exp-b, .clp-b {
        font-size: 11px;
        padding: 12px 20px;
    }

    .iti-full-part {
        margin-top: 2.5rem;
    }

    .ssp_part {
        justify-content: space-between;
        align-items: center;
    }

    .day-part-iti .day-date, .stay-part .stay-location {
        font-size: clamp(0.45rem, 2vw, 1em);
    }

    .day-part-iti .day-description {
        font-size: clamp(0.9rem, 3vw, 1.4em);
    }

    .iti-content {
        flex-direction: column;
        align-items: center;
    }

    .right-image-new {
        width: 100%;
        height: 250px;
        margin-top: 20px;
    }

        .right-image-new img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .left-content-new .text-content-new p,
    .left-content-new .details-content p {
        font-size: clamp(1rem, 5vw, 1.1em);
    }

    .left-content-new .details-content span {
        font-size: clamp(0.9rem, 4vw, 1em);
    }

    .travel-info-container {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .travel-info-content {
        gap: 15px;
        align-items: center;
    }

        .travel-info-content .travel-info-image {
            height: 122px;
        }

        .travel-info-content .travel-info-text .travel-info-heading {
            font-size: 18px;
            text-align: center;
        }

        .travel-info-content .travel-info-text .travel-info-description {
            font-size: 14px;
            text-align: center;
        }

        .travel-info-content .travel-info-button {
            margin: 0;
            width: auto;
        }

    .accom-loc {
        width: 100%;
    }

    .inc-exc-part {
        background: rgba(242, 242, 249, 0.43);
        padding: 1rem 0rem;
    }

    .trip-inclusion p, .trip-exclusion p {
        color: #000;
        font-family: Inter;
        font-size: 14px;
    }

    .trip-inclusion h3 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .trip-exclusion h3 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .inner-tm {
        height: 161px;
    }

    .feed-part-container {
        display: block;
    }

    .text-content-all {
        padding: 5px;
    }

    .image-content-all img {
        max-width: 100%;
        height: 250px;
        border-radius: 28px;
    }

    .faq-container.faq-main {
        margin: 0 auto;
        padding: 5px;
    }

        .faq-container.faq-main .faq-grid {
            gap: 1.5rem 1rem;
            position: relative;
        }

        .faq-container.faq-main .faq-item .faq-header .faq-question {
            margin: 0;
            font-size: 14px;
            margin-left: 1.5rem;
        }

        .faq-container.faq-main .faq-title {
            margin-left: 0.5rem;
            font-size: 22px;
            margin-bottom: 10px;
        }

        .faq-container.faq-main .faq-item .faq-header {
            background: #ffffff;
            padding: 23px 36px;
        }

    .faq-part {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .perfect-part-top h3 {
        color: #404040;
        font-family: Inter;
        font-size: 22px;
    }

    .perfect-iti-part {
        /* max-width: 1200px; */
        margin: auto;
        margin: 10px;
        padding: 5px;
    }

    .perfect-item .overlay h4 {
        font-size: 26px;
        text-align: start;
    }

    .new-perfect-part-top h3 {
        font-size: 22px;
    }

    .new-perfect-iti-part {
        margin: 10px;
        text-align: center;
        padding: 5px;
    }

    .new-perfect-part-top p {
        color: #959595;
        font-family: Inter;
        font-size: 16px;
        width: 100%;
    }

    .new-perfect-item .new-overlay h4 {
        color: rgba(255, 255, 255, 0.88);
        font-family: Inter;
        font-size: 18px;
    }

    .cancel-part-all {
        display: block;
    }

    .no-refund p {
        position: absolute;
        right: -4px;
        top: -14px;
        font-size: 10px;
        border-radius: 50%;
        height: 57px;
        font-weight: 700;
        display: flex;
        width: 56px;
    }

    .row-div1-new .div1-new .p2-new {
        font-weight: 700;
        font-size: 25px;
    }

        .row-div1-new .div1-new .p2-new .span1-new {
            font-size: 20px;
            font-weight: 500;
        }

    .row-div1-new .div1-new .p3-new {
        font-size: 21px;
        line-height: normal;
        font-weight: 500;
    }

    .cancel-p3 {
        width: 100%;
    }

    .div1-new {
        padding: 20px 28px;
    }

    .row-div1-new .div3-new .p5-new {
        color: #1383BC;
        font-family: Inter;
        font-size: 22px;
    }

    .div2-new {
        padding: 20px 30px;
    }

    .inner-cacel-part-two {
        margin-top: 0rem;
    }

    .cancel-p2 {
        width: 60%;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        padding: 19px 17px;
    }

    .cancel-p1 {
        font-size: 27px;
        font-weight: 700;
    }
}


/*kk css end*/


.custom-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 9999;
}

.custom-modal-content {
    width: 100%;
    height: 100%;
    padding: 0px;
    box-sizing: border-box;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    cursor: pointer;
    z-index: 2;
}

.custom-modal.show {
    transform: translateX(0);
}


img.active {
    border: 2px solid green;
}

.itin-btn {
    margin: 0 auto;
    width: 80%;
    display: block;
    border-radius: 30px;
    background: #0641BF;
    margin-top: 30px;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.custom-modal-head {
    display: flex;
    align-items: center;
    width: 100%;
    background: cornsilk;
    padding: 10px;
}



.custom-modal-content .custom-modal-body {
    padding: 20px;
    overflow-y: scroll;
    scrollbar-width: none;
    height: 683px;
}

    .custom-modal-content .custom-modal-body::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Edge */
    }

#add-ons-modal .modal-dialog {
    width: 70%;
}


@media only screen and (max-width: 600px) {
    .custom-modal-head {
        display: block !important;
        align-items: center;
        width: 100%;
        background: cornsilk;
        padding: 10px;
    }

        .custom-modal-head .date-select {
            margin-left: 0%;
        }

    #add-ons-modal .modal-dialog {
        width: 100%;
    }
}


.act-vity {
    display: flex;
    gap: 30px;
}

    .act-vity .activity-list {
        width: 30%;
        border-right: 1px solid #ccc;
        padding: 15px 70px 15px 15px;
    }

        .act-vity .activity-list::-webkit-scrollbar {
            display: none;
        }

    .act-vity .activity-list-item {        
        padding: 15px;
        height: 500px;
        overflow: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
    }

        .act-vity .activity-list-item::-webkit-scrollbar {
            display: none;
        }

.act-day-wise {
    margin-top: 20px;
    height: 380px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

    .act-day-wise::-webkit-scrollbar {
        display: none;
    }

    .act-day-wise li {
        margin-bottom: 15px;
    }


        .act-day-wise li a {
            background: #F3FAFA;
            color: #9DC4C4;
            border: 2px solid #DCE4E3;
            padding: 12px 16px;
            width: 100%;
            display: flex;
            border-radius: 10px;
            font-weight: 600;
        }

            .act-day-wise li a.active {
                background: #0451BB;
                color: #fff;
                padding: 12px 16px;
                width: 100%;
                display: flex;
                border-radius: 10px;
                font-weight: 600;
                box-shadow: rgb(4 81 187 / 67%) 0px 2px 10px 0px;
                border: none;
            }


.activity-list-item .card {
    display: block;
    padding: 5px 6px;
    height: auto;
    border: 1px solid #ccc;
}


    .activity-list-item .card hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .activity-list-item .card a {
        padding: 7px 20px;
        background: royalblue;
        color: #fff;
        border-radius: 25px;
        margin-top: 10px;
        display: flex;
    }

    .activity-list-item .card .content-card {
        padding: 6px;
    }

        .activity-list-item .card .content-card span {
            font-size: 13px;
        }

        .activity-list-item .card .content-card h5 {
            font-size: 11px;
            font-weight: 500;
            margin: 0px;
            margin-bottom: 10px;
            height: auto;
        }

.activities-section {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.activities-text {
    font-size: 14px; /* Adjust as needed */
    color: #808080; /* Gray color */
    margin-right: 10px; /* Space between text and line */
    white-space: nowrap; /* Prevent text from wrapping */
}

.activities-line {
    flex-grow: 1; /* Fill the remaining width */
    border: none;
    border-top: 1px solid #c0c0c0; /* Gray line */
}


@media only screen and (max-width: 600px) {

    .act-vity {
        display: block;
        gap: 30px;
    }

        .act-vity .activity-list-item {
            width: 100%;
        }

        .act-vity .activity-list {
            width: 100%;
            padding: 15px;
        }
}



@media only screen and (max-width: 600px) {
    .glance-container {
        display: block;
    }

    .act-day-wise {
        margin-top: 20px;
        height: auto;
        overflow: hidden;
        overflow-x: scroll;
        scrollbar-width: none;
        display: flex;
        flex-direction: row;
        gap: 10px;
        text-align: center;
    }

    .nights-tag img {
        width: 100px !important;
        height: 70px !important;
        object-fit: fill;
        position: absolute;
        top: -28px;
        right: 20px;
    }

    .hotel-img {
        width: 100%;
        padding: 10px;
    }

    .card-footer {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    .cancellation .card-box {
        border-radius: 20px;
        border: 1px solid #e9e9e9;
        background: #fcfcfc;
        overflow: visible;
        width: 100%;
        margin-bottom: 10px;
    }

    .cancellation .card-main {
        display: block;
    }

    .cancellation .cancellation-box .c-Policy {
        width: 100%;
    }

    .cancellation .cancellation-box {
        display: block;
    }
}

.radio-container {
    position: absolute;
    background: #513394;
    padding: 25px;
    border-radius: 0px 0px 20px 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    cursor: pointer;
}


    .radio-container input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.radio-container input[type="radio"]:checked ~ .checkmark {
    background-color: #2196F3;
}

    .radio-container input[type="radio"]:checked ~ .checkmark:after {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
    }


.help-error-block, .errormessage {
    color: #ff0500;
}

.has-error i {
    color: #ff0500 !important;
}

.has-error .form-control {
    border-color: #ff0500 !important;
}

.has-error .input-group-addon {
    color: #ff0500 !important;
}

.help-error-block, .errormessage {
    color: #ff0500;
    background: no-repeat;
}

.iti-content-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0px;
    padding: 0px;
    margin-top: 0px;
}


@media only screen and (max-width: 600px) {
    .iti-content-new {
        display: block;
    }
    .text-content-new {
        width: 100%;
    }

    .nights-tag span {
        position: absolute;
        top: 8px;
        right: 43px;
        font-weight: 600;
        color: #f7254a;
    }
}

select {
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

    select:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

    select:disabled {
        background-color: #ecf0f1;
        cursor: not-allowed;
    }

.itinerary-options {
    margin-top: 30px;
}

    .itinerary-options h2 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 20px;
    }

.options-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.option {
    width: 30%;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-right: 15px;
}

    .option:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .option.selected {
        border-color: #3498db;
        background-color: #ebf5fb;
    }

    .option img {
        max-width: 100%;
        border-radius: 4px;
    }

    .option p {
        margin-top: 10px;
        font-weight: 600;
        color: #34495e;
    }

#submitBtn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #submitBtn:hover {
        background-color: #2980b9;
    }

    #submitBtn:disabled {
        background-color: #bdc3c7;
        cursor: not-allowed;
    }

.qr-code-option {
    display: flex;
    margin-top: 20px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

    .qr-code-option input[type="checkbox"] {
        margin-right: 10px;
    }

    .qr-code-option label {
        font-weight: 600;
        color: #34495e;
    }

@media (max-width: 768px) {
    .option {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 24px;
    }

    select {
        font-size: 14px;
    }
}

.itiner-img {
    height: 400px;
    background-position: top;
    background-size: cover !important;
    width: 174px;
}

.sidebar-contact2 {
    padding: 0px !important;
}

.close1 {
    font-size: 30px;
    color: #fff;
    float: right;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 9999;
}

@media only screen and (max-width: 600px) {
    .accom {
        display: none !important;
    }

    .sidebar-contact2 {
        padding: 0px;
    }

    .itiner-img {
        height: 400px;
        background-position: top;
        background-size: cover !important;
        width: 100%;
    }

    .close1 {
        font-size: 30px;
        color: #fff;
        float: right;
        position: absolute;
        right: 20px;
        top: -111px;
        z-index: 9999;
    }
}

#oni-chan-top {
    position: relative;
}

.share-text {
    font-size: 16px !important;
    font-weight: 100 !important;
    letter-spacing: 1px !important;
    color: #000 !important;
    text-align: center !important;
    margin: 0.5em 0 !important;
    padding: 0 !important;
}

.qr-part-new img {
    width: 90px;
    height: auto;
    border-radius: 6px;
}

.new-qr {
    position: absolute;
    cursor: pointer;
    top: 8%;
    right: 5%;
    background: #fff;
    border-radius: 18px;
}

.scan-in-qr {
    padding: 5px 16px;
}

.share-text-bottom {
    font-size: 12px !important;
    font-weight: 100 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    margin: 0.5em 0 !important;
    padding: 0 !important;
}

.share-text-bottom {
    border-radius: 0px 0px 18px 18px;
    background: #3D5BBC;
    margin: 0 !important;
}
/* Modal overlay and content styling */
/* Modal overlay and content styling */
/* Modal overlay and content styling */
.modal-trigger-btn {
    padding: 10px 20px;
    background: #7F56D9;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.unique-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .unique-modal-overlay.active {
        display: block;
        opacity: 1;
    }

.unique-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #fff;
    padding: 2em 1.5rem;
    width: 80%;
    max-width: 380px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.unique-modal-overlay.active .unique-modal-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.unique-modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.unique-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.un-cont-part p:first-child {
    font-size: 14px !important;
    letter-spacing: 1px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
}

.un-cont-part p:last-child {
    font-size: 12px;
    color: #666;
    line-height: normal;
    margin: 0;
    font-weight: 400;
    padding: 0;
}

.steps-process {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid #7F56D9;
    transition: background-color 0.3s ease;
}

    .step-dot.active {
        background: #7F56D9;
    }

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-cancel {
    padding: 4px 16px;
    border: 1px solid #7F56D9;
    background: white;
    color: #7F56D9;
    border-radius: 6px;
    margin: 10px 12px;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-next {
    padding: 4px 16px;
    background: #7F56D9;
    color: white;
    margin: 10px 12px;
    width: 100%;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-cancel:hover {
    background: #f8f9fa;
}

.btn-next:hover {
    background: #6941C6;
}

.modal-step {
    display: none;
    transition: opacity 0.3s ease;
}

    .modal-step.active {
        display: block;
    }

    /* Hide next button on last step */
    .modal-step[data-step="3"].active ~ .modal-buttons .btn-next {
        display: none;
    }

    /* Center cancel button on last step */
    .modal-step[data-step="3"].active ~ .modal-buttons {
        justify-content: center;
    }

.un-cont-part-new {
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

    .un-cont-part-new select {
        padding: 2px 12px;
        height: 34px !important;
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 14px;
        background-color: #f8f9fa;
        background: none;
        color: #717680;
        font-weight: 500;
        -webkit-appearance: auto;
        -moz-appearance: none;
        cursor: pointer;
    }

        .un-cont-part-new select option {
            background-color: white;
            color: #333;
            padding: 8px 12px;
        }

.un-cont-part select-new option:hover {
    background-color: #f2f2f2;
}

.un-cont-part select option:checked {
    background-color: #7F56D9;
    color: white;
}

.share-title {
    font-weight: 100 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.trip-name {
    font-size: 14px !important;
    color: #000 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    padding: 0 !important;
}

.share-qr-part {
    border-radius: 8px;
    background: linear-gradient(90deg, #E6E9F0 0%, #EEF1F5 100%);
    padding: 10px 15px;
}

.std-part p {
    padding: 0;
    margin: 1rem;
    font-size: 16px !important;
    font-weight: 600;
    color: #000 !important;
}

.check-day {
    font-size: 16px !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: normal;
    padding: 0 !important;
    font-weight: bold !important;
}

.check-description {
    font-size: 14px !important;
    color: #828282 !important;
    margin: 0 !important;
    line-height: normal;
    padding: 0 !important;
}

.check-dates {
    font-size: 14px !important;
    color: #828282 !important;
    font-weight: 500;
    margin: 0 !important;
    padding: 0 !important;
}

.check-in-out {
    display: flex;
    justify-content: center;
}

.ch-co {
    border-radius: 12px;
    padding: 4px 15px;
    background: #F6F6F6;
}

.edit-day-date {
    color: #828282 !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.7px;
}

.edit-icon {
    cursor: pointer;
    width: 9px !important;
    height: 9px !important;
    fill: #828282 !important;
}

.inner-edit {
    color: #000 !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.7px;
}

.yq-p {
    color: #000 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 800 !important;
    letter-spacing: 1px;
    line-height: normal;
}

.un-cont-part-all {
    margin-top: 1rem;
}

.share-part-qr {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.share-image-inner {
    border-radius: 27.333px;
    padding: 8px 56px;
    cursor: pointer;
    background: rgba(157, 157, 157, 0.04);
    transition: background 0.3s ease, border 0.3s ease;
}

    .share-image-inner:hover {
        border: 1px solid #3D5A80;
        background: #EDF0F4;
    }

.share-image {
    display: block;
    height: auto; /* Maintain aspect ratio */
}

.share-text-new {
    margin-top: 5px !important;
    font-size: 12px !important;
    color: #3D5A80 !important;
    text-align: center !important;
    padding: 0 !important;
}

.unique-modal-body {
    padding: 0px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #E6E9F0 0%, #EEF1F5 100%);
}

.inner-modal-part-image {
    background-position: center;
    background-size: cover;
    height: 147px;
}

.un-cont-part {
    margin-top: 1.4rem;
}

#qr-code {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.qr-inner-image-part {
    position: absolute;
    top: 0;
    justify-content: center;
    bottom: 3px;
    width: 100%;
    display: flex;
    align-items: center;
}

    .qr-inner-image-part img {
        width: 33%;
    }

.close4 {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

.tab-container {
    width: 100%;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    position: sticky;
    top: 40px;
    background: #fff;
    z-index: 1;
    padding: 16px 17px;
}

.tab {
    text-align: left;
    cursor: pointer;
    color: gray;
    margin-right: 30px;
    font-weight: bold;
    border: none;
    background: none;
    outline: none;
    padding: 15px 0px;
    font-size: 16px;
}

    .tab.active {
        color: black;
        position: relative;
    }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0%;
            width: 100%;
            height: 2px;
            background-color: black;
        }

.tab-content {
    scroll-behavior: smooth;
}

/*.content-section {
    margin-bottom: 50px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}*/

.activity-item {
    text-align: center;
    width: 20%;
}



@media only screen and (max-width: 600px) {
    .tabs {
        display: flex;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        position: sticky;
        top: -1px;
        background: #fff;
        z-index: 1;
        overflow: scroll;
    }

    .tab {
        text-align: left;
        cursor: pointer;
        color: gray;
        margin-right: 40px;
        font-weight: bold;
        border: none;
        background: none;
        outline: none;
        padding: 15px 0px;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}



.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    color: #2275C7; /* Text color */
    opacity: 1;
}

.tooltip-text {
    visibility: hidden;
    width: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    text-align: center;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    white-space: nowrap;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px); /* Slight lift effect */
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Arrow points down */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px; /* Arrow size */
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Arrow color */
}


.qur-section {
    display: flex;
}


.tooltip-container-custom {
    position: relative;
    display: inline-block;
}

.tooltip-content-custom {
    cursor: pointer;
}

.tooltip-text-custom {
    visibility: hidden;
    width: 300px;
    background-color: #ffffff;
    color: #fff;
    border-radius: 5px;
    padding: 16px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -272px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid #eee;
    text-wrap:auto;
}

    .tooltip-text-custom::after {
        content: "";
        position: absolute;
        bottom: -18px;
        left: 49%;
        margin-left: 114px;
        border-width: 11px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
    }

.tooltip-container-custom:hover .tooltip-text-custom {
    visibility: visible;
    opacity: 1;
}


@media only screen and (max-width: 600px) {
    .tooltip-text-custom {
        visibility: hidden;
        width: 300px;
        background-color: #ffffff;
        color: #fff;
        border-radius: 5px;
        padding: 16px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 0;
        right: 0;
        margin-left: -150px;
        opacity: 0;
        transition: opacity 0.3s;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border: 2px solid #eee;
    }

        .tooltip-text-custom::after {
            content: "";
            position: absolute;
            bottom: -18px;
            left: 11%;
            margin-left: 114px;
            border-width: 8px;
            border-style: solid;
            border-color: #bcbcbc transparent transparent transparent;
        }
}

.clicktoadd {
    padding: 7px 20px;
    background: royalblue;
    color: #fff;
    border-radius: 25px;
    margin-top: 10px;
    display: flex;
}

.btnremove {
    padding: 7px 20px;
    background: #ffdada;
    color: #e14141;
    border-radius: 25px;
    margin-top: 10px;
    display: flex;
    border: none;
}

.clicktoadd:hover {
    padding: 7px 20px;
    background: royalblue;
    color: #fff;
    border-radius: 25px;
    margin-top: 10px;
    display: flex;
}

.btnremove:hover {
    padding: 7px 20px;
    background: #e14141;
    color: #fff;
    border-radius: 25px;
    margin-top: 10px;
    display: flex;
}




.tags-card {
    background: var(--color-green-400);
    border-radius: 3px 0 0 3px;
    color: #999;
    display: inline-block;
    height: 35px;
    line-height: 26px;
    padding: 5px 20px 0 23px;
    position: relative;
    margin: 0px 10px 10px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
}

    .tags-card::before {
        background: #fff;
        border-radius: 10px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
        content: '';
        height: 6px;
        left: 10px;
        position: absolute;
        width: 6px;
        top: 10px;
    }

    .tags-card::after {
        background: #fff;
        border-bottom: 18px solid transparent;
        border-left: 15px solid #3cd180;
        border-top: 18px solid transparent;
        content: '';
        position: absolute;
        right: 0;
        top: 0;
    }




.tags-card-1 {
    background: #ed1161;
    border-radius: 3px 0 0 3px;
    color: #999;
    display: inline-block;
    height: 35px;
    line-height: 26px;
    padding: 5px 20px 0 23px;
    position: relative;
    margin: 0px 10px 10px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
}

    .tags-card-1::before {
        background: #fff;
        border-radius: 10px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
        content: '';
        height: 6px;
        left: 10px;
        position: absolute;
        width: 6px;
        top: 10px;
    }

    .tags-card-1::after {
        background: #fff;
        border-bottom: 18px solid transparent;
        border-left: 15px solid #ed1161;
        border-top: 18px solid transparent;
        content: '';
        position: absolute;
        right: 0;
        top: 0;
    }


.acc-mo {
    height: 130px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

    .acc-mo::-webkit-scrollbar {
        display: none;
    }


@media only screen and (max-width: 600px) {
    #holdModal .modal-dialog {
        width: 100% !important;
        margin: 0px !important;
    }
}
.qr-code button {
    margin-top: 10px;
    background-color: #0451bb;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 0px 0px 6px 6px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 27px;
    right: 0;
}
.get-quote-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    border-radius: 5%;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.7);
    transition: all 0.4s ease;
    overflow: hidden;
    outline: none;
    gap: 10px;
    padding: 15px;
    text-align: center;
}
.get-quote-text {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
  
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.get-quote-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowMove 1s infinite;
}
.new-qr {
    position: absolute;
    cursor: pointer;
    top: 100%;
    right: 4%;
    background: #fff;
    border-radius: 18px;
    width: 100%;
}
@keyframes arrowMove {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}
.cards-wrapper {
    grid-column: center-start / -1;
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    overflow: auto;
    padding-right: var(--page-margin);
    position: relative;
}
    .cards-wrapper .card-offer {
        display: grid;
        position: relative;
        height: 20rem;
        min-width: 22rem;
    }
.toggle1 {
    position: absolute;
    height: 48px;
    width: 48px;
    text-align: center;
    cursor: pointer;
    top: 75%;
    left: -53px;
}
.sidebar-contact1.active {
    right: 0;
}

.sidebar-contact1 {
    position: fixed;
    bottom: 0;
    right: -750px;
    width: 750px;
    height: auto;
    padding: 25px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    box-sizing: border-box;
    transition: 0.5s;
    z-index: 9999;
}



ul[type="disc"] {
    background-color: #EEF0FF;
    padding: 20px;
    margin-top: 50px;
}


ul[type="disc"] li b {
   color: #0451BB;
}


    ul[type="disc"] li {
        font-size: 16px;
        margin-bottom: 5px;
    }


.link-btn-new {
    padding: 10px;
    font-size: 21px;
    background: #4169e1 !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 30%;
    text-align: center;
    color: #fff;
}

@media only screen and (max-width: 600px) {
    .sidebar-contact1 {
            width: 100%;
        }

    .link-btn-new {
        padding: 10px;
        font-size: 21px;
        background: #4169e1 !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: auto;
        text-align: center;
        color: #fff;
    }
    }

/*
//by kk form download itineray modal*/

.dwn-iti-part-mod p:first-of-type {
    color: #A0A0A0;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.dwn-iti-part-mod p:nth-of-type(2) {
    color: #685989;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    font-weight: 600;
    letter-spacing: 2.536px;
}
.custom-modal-head-new{
    margin-top:2.5rem;
}
.all-new-form-part {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 6px;
    border: 1px solid #CED0DA;
    background: #FFF;
    padding-right: 2em; /* Space for the custom arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.854a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 1em;
    margin-top:1.5rem;
}
.imi-part .radio-container-all-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
   
}
#rad-first, #rad-second {
    border-radius: 6px;
    border: 1px solid #CED0DA;
    background: #ECF1FF;
    width: 82%;
}

.imi-part .radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7E7E7E;
    font-family: Inter;
    padding-left:1rem;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  
    cursor: pointer;
}

    .imi-part .radio-label input[type="radio"] {
        width: 16px;
        height: 32px !important;
        cursor: pointer;
    }

.imi-part .itin-btn {
    display: inline-block;
    margin-top: 10px;
}

.all-things-main-part {
    color: #A0A0A0;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.5px;
}

.dot-list p {
    position: relative;
    color: #4E4E4E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top:2.5rem;
    padding-left: 20px;
    letter-spacing: 0.25px;
}


.dot-list .first-paragraph {
    position: relative;
    color: #4E4E4E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2rem;
    padding-left: 20px;
    letter-spacing: 0.25px;
}
.dot-list .second-paragraph {
    position: relative;
    color: #4E4E4E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    margin-top:1.5rem;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.5rem;
    padding-left: 20px;
    letter-spacing: 0.25px;
}

.dot-list .third-paragraph {
    position: relative;
    color: #4E4E4E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.5rem;
    padding-left: 20px;
    letter-spacing: 0.25px;
}


.dot-list .last-paragraph {
    position: relative;
    color: #4E4E4E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.5rem;
    padding-left: 20px;
    letter-spacing: 0.25px;
}



        .dot-list p::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #685989;
            font-size: 28px;
        }


.detailed-image {
    display: flex;
    flex-direction: column; 
    gap: 16px; 
    align-items: center; 
   margin-top:5rem;
}
    .detailed-image .image-one {
        width: 100%;
        max-width: 300px;
        height: auto;
        object-fit:cover;
        border-radius: 8px;
        border: 2px solid #CED0DA;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }


    .detailed-image .image-two {
        width: 100%;
        max-width: 300px;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #B0B0B0;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

    .detailed-image .image-three {
        width: 100%;
        max-width: 300px;
        height: 85px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #8C8C8C;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
.inner-sub-part{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
}

.bl-date-part {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    margin-top: 1rem;
    text-align:center;
    font-style: normal;
    font-weight: 600;
}
.all-sing-doub-part p {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    margin:0;
    font-weight: 600;
}


.all-sing-doub-part span {
    color: #FFF;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
}


.sing-doub-second p {
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    margin: 0;
    font-weight: 600;
}

.sing-doub-second span {
    color: #FFF;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
}
.blue-part-in {
    background: #005BFF;
    padding: 10px;
    border-radius:6px;
}



.trip-custom-btn-wrapper {
    position: relative;
    display: inline-block;
    z-index: 4;
    background: white;
    padding: 11px 8px;
}

.trip-custom-trigger {
    padding: 6px 15px;
    font-family: 'Inter';
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    background: #E8EDFC;
    box-shadow: 0px 1px 3px 0px rgba(96, 108, 128, 0.05);
    color: #000;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
    margin: 0;
}

    .trip-custom-trigger:hover {
        background: linear-gradient(45deg, #668cff, transparent);
    }

.trip-custom-hover-msg {
    position: absolute;
    top: 67%;
    left: 0;
    background: #ffffff;
    color: #000000;
    font-size: 14px;
    padding: 0;
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    width: 320px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.trip-custom-btn-wrapper:hover .trip-custom-hover-msg {
    opacity: 1;
}

.trip-custom-btn-wrapper:hover .trip-custom-hover-msg       ,
.trip-custom-hover-msg:hover {
    opacity: 1;
    pointer-events: auto;
}

.trip-hover-box {
    padding: 18px 20px;
}

.trip-hover-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    /* margin: 0; */
    letter-spacing: -1px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.trip-hover-description {
    font-size: 12px;
    color: #444;
    margin-bottom: 12px;
    line-height: 1.4;
    font-family: 'Inter';
}

.trip-hover-subheading {
    font-weight: 600;
    margin: 7px 0 1px;
    font-size: 14px;
    color: #111;
    letter-spacing: -1px;
    font-family: 'Inter';
}

.trip-hover-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .trip-hover-list li {
        font-size: 12px;
        /* margin-bottom: 6px; */
        display: flex;
        align-items: flex-end;
        font-family: 'Inter';
    }




/* Modal styles */
.trip-custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.trip-custom-modal-content {
    background: #fff;
    padding: 15px 22px;
    max-width: 620px;
    width: 90%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    max-height: 100vh;
    overflow-y: scroll; /* allow vertical scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

    /* Hide scrollbar in Chrome, Safari, Opera */
    .trip-custom-modal-content::-webkit-scrollbar {
        display: none;
    }


.trip-custom-close {
    position: absolute;
    top: 6px;
    right: 20px;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    color: #666;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .trip-custom-close:hover {
        background-color: #f0f0f0;
        color: #333;
    }

.ryo-modal-header {
    margin-bottom: 16px;
}

.ryo-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    font-family: 'Inter';

    margin-bottom: 4px;
    margin-top: 0;
}

.ryo-modal-subtitle {
    font-size: 16px;
    color: #666;
    font-weight: 400;
}

.ryo-form-section {
    border-radius: 12px;
    padding: 12px 10px;
    background: #F8F8F8;
    margin-bottom: 12px;
}

.ryo-section-title {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Inter';
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    margin-top: 0;
}

.ryo-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

.ryo-form-group {
    flex: 1;
}

    .ryo-form-group.ryo-full-width {
        width: 100%;
    }

.ryo-form-label {
    display: block;
    font-weight: 500;
    color: #333;
    font-family: 'Inter';
    font-size: 10px;
    margin-bottom: 6px;
}

.ryo-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #e1e5e9;
    border-radius: 8px;
    font-size: 12px;
    color: #b0abab;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 42px !important;
}

    .ryo-form-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    .ryo-form-input::placeholder {
        color: #adb5bd;
    }

.ryo-date-input-container {
    position: relative;
}

.ryo-date-input-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}

.ryo-form-textarea {
    width: 100%;
    padding: 16px;
    border: 1.5px solid #e1e5e9;
    border-radius: 8px;
    font-size: 10px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .ryo-form-textarea:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    .ryo-form-textarea::placeholder {
        color: #adb5bd;
    }

.ryo-modal-footer {
    margin-top: 3px;
    padding-top: 0;
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ryo-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-family: 'Inter';
    color: #666;
}

.calender-icon-mai {
    height: 25px;
    width: 28px;
    cursor: pointer;
}

.ryo-info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.ryo-trip-custom-submit-btn {
    padding: 10px 16px;
    border-radius: 8px;
    background: #0451BB;
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    color: #fff;
    border: none;
    font-family: 'Inter';
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .ryo-trip-custom-submit-btn:hover {
        background-color: #0056b3;
    }

    .ryo-trip-custom-submit-btn:active {
        transform: translateY(1px);
    }

.trip-custom-hidden {
    display: none;
}



/* Responsive Design */



.new-dates-months {
    z-index: 1;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    position: sticky;
    margin-bottom: 1rem;
    top: 110px;
    justify-content: end;
}


#month-buttons-container {
    flex: 1;
    margin: 0 !important;
    box-shadow: none !important;
}



.wait-ur-main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

    .wait-ur-main-content h1 {
        font-size: 32px;
        color: #333;
        margin-bottom: 20px;
    }

    .wait-ur-main-content p {
        font-size: 18px;
        color: #666;
        line-height: 1.6;
    }

/* Modal Overlay */
.wait-ur-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

    .wait-ur-modal-overlay.wait-ur-show {
        display: flex;
    }

/* Modal Container */
.wait-ur-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 100vh;
    overflow-y: visible;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Modal Header */
.wait-ur-modal-header {
    padding: 17px 24px 11px 24px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}

.wait-ur-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    margin: 0;
    font-family: 'Inter';
    line-height: 1.3;
}

.wait-ur-modal-subtitle {
    font-size: 12px;
    color: #666;
    font-family: 'Inter';
    line-height: 1.4;
    margin-top: 5px;
}

.wait-ur-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

    .wait-ur-close-btn:hover {
        color: #666;
    }

/* Modal Body */
.wait-ur-modal-body {
    padding: 15px 23px 7px 25px;
}

.wait-ur-trip-name-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 16px;
}

.wait-ur-trip-name {
    flex: 1;
    min-width: 200px;
}

.wait-ur-trip-name-label {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.wait-ur-trip-name-value {
    font-size: 12px;
    font-family: 'Inter';
    color: #999898;
    font-weight: 400;
}

.wait-ur-whatsapp-btn {
    border-radius: 6px;
    background: #46B277;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    font-family: 'Inter';
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    width: fit-content;
    margin-bottom: 10px;
    width:fit-content;
}

    .wait-ur-whatsapp-btn:hover {
        background: #22c55e;
        color:white;
    }

/* Form Sections */
.wait-ur-form-section {
    margin-bottom: 5px;
}

.wait-ur-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-family: 'Inter';
}

.wait-ur-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

.wait-ur-form-group {
    display: flex;
    flex-direction: column;
}

    .wait-ur-form-group.wait-ur-full-width {
        grid-column: 1 / -1;
    }

.wait-ur-form-label {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    font-family: 'Inter';
    margin-bottom: 6px;
}

.wait-ur-form-input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    height: 42px !important;
    background: white;
    transition: border-color 0.2s;
}

    .wait-ur-form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .wait-ur-form-input::placeholder {
        color: #9ca3af;
        font-size: 11px;
    }

.wait-ur-date-input-wrapper {
    position: relative;
}

.wait-ur-date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 20px;
}

.wait-ur-textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.wait-ur-trip-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Modal Footer */
.wait-ur-modal-footer {
    padding: 20px 24px 24px 24px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
}

.wait-ur-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    margin-bottom: 16px;
}

.wait-ur-info-icon {
    color: #3b82f6;
    font-size: 14px;
    flex-shrink: 0;
}

.wait-ur-footer-text {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    font-family: 'Inter';
}

.wait-ur-submit-btn {
    background: #0451BB;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .wait-ur-submit-btn:hover {
        background: #2563eb;
    }

/* Responsive Design */


/* Animation */
.wait-ur-modal-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .wait-ur-modal-overlay.wait-ur-show {
        opacity: 1;
    }

.wait-ur-modal-container {
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.wait-ur-modal-overlay.wait-ur-show .wait-ur-modal-container {
    transform: scale(1);
}
/* FLEX ROWS */
.pkdd-dto-row {
    display: flex;
    gap: 16px;
}

    .pkdd-dto-row .pkdd-ryo-form-group {
        flex: 1;
        margin-top:6px;
    }

/* LABEL */
.pkdd-ryo-form-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    display: inline-block;
}

/* INPUT + SELECT */
.pkdd-ryo-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #e1e5e9;
    border-radius: 8px;
    font-size: 12px;
    color: #000;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 42px !important;
    cursor: pointer;
}

    /* OPTIONAL: HOVER + FOCUS */
    .pkdd-ryo-form-input:hover {
        border-color: #cfd6dc;
    }

    .pkdd-ryo-form-input:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 4px rgba(74, 144, 226, 0.4);
        outline: none;
    }

.ryo-top-new-header{
    display:flex;
    align-items:center;
    gap:10px;

}

.new-ryo-radio-group {
    display: flex;
    gap: 18px;
    margin-top: 6px;
}

.new-ryo-radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

    /* Radio default */
    .new-ryo-radio-option input[type="radio"] {
        width: 14px;
        height: 14px;
        accent-color: #0451BB; /* blue highlight */
        cursor: pointer;
    }
/* RADIO WRAPPER */
.pkdd-radio-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

/* RADIO BUTTON OPTION */
.pkdd-radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid #e1e5e9;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    font-size: 12px;
    color: #6b7280;
}

    /* RADIO INPUT */
    .pkdd-radio-option input[type="radio"] {
        accent-color: #0451BB;
        cursor: pointer;
        height:14px !important;
    }

    /* HOVER EFFECT */
    .pkdd-radio-option:hover {
        border-color: #0451bb;
        background: rgba(4, 81, 187, 0.05);
    }
.top-banner-text-options {
    border-radius: 4px 4px 10px 10px;
    background: #E69545;
    position: absolute;
    top: 0;
    padding: 0;
    width: 100%;
    left: 0;
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding:3px 8px;
}



@media (min-width: 320px) and (max-width: 500px) {
    .dot-list p {
        font-size: 14px;
        padding-left: 18px;
    }

        .dot-list p::before {
            font-size: 16px;
        }
    .custom-modal {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
       
    }
    .custom-modal-head-new {
        margin-top: 0.5rem;
    }
    .dwn-iti-part-mod p:nth-of-type(2) {

        font-size: 17px;
      
    }
    .custom-modal-head-new {
        max-height: 100vh; 
        overflow-y: auto; 
        padding-bottom: 20px; 
    }
    .close-btn {
        position: absolute;
        top: 10px;
        right: 15%;
        font-size: 40px;
        cursor: pointer;
        z-index: 2;
    }
    .detailed-image {
       margin-top:1.5rem;
        /* margin-top: 5rem; */
    }
    .bl-date-part {
   
        font-size: 14px;
        margin-top: 1rem;
        text-align: start;
  
    }
    .trip-custom-modal-content {
        padding: 20px;
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
    }

    .ryo-modal-title {
        font-size: 18px;
        line-height: 1.4;
    }

    .ryo-form-input, .ryo-form-textarea {
        padding: 12px 14px;
        font-size: 10px;
    }

    .ryo-trip-custom-submit-btn {
        padding: 10px 12px;
        font-size: 12px;
    }
    .trip-custom-modal-content {
        padding: 20px;
        overflow-y: scroll;
    }

        .trip-custom-modal-content textarea {
            height: 80px;
        }
    .new-dates-months {
        position: relative;
        margin-bottom: 5rem;
    }
    .trip-custom-trigger {
        position: absolute;
        left: 0;
        bottom: -39px;
    }
    .trip-custom-btn-wrapper {
        position: static;
        display: inline-block;
    }
    .trip-custom-hover-msg {
       display:none;
    }
    .wait-ur-close-btn {
        position: absolute;
        top: 0;
       
    }
    .ryo-form-row {
        display: flex;
        gap: 16px;
        flex-direction: column;
        margin-bottom: 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .dot-list p {
        font-size: 15px;
        padding-left: 20px;
    }

        .dot-list p::before {
            font-size: 17px;
        }

   
}

@media only screen and (max-width: 600px) {
    .detailed-image {
        display: none !important;
    }

    #add-ons-modal .modal-dialog {
        width: 95%;
    }
}



.custom-modal{
    overflow-x:scroll;
}

    .custom-modal::-webkit-scrollbar {
        height: 4px;
        width:5px;
    }

    .custom-modal::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3); 
        border-radius: 2px; 
    }

    .custom-modal::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1); 
    }

.priceboxhtml {
    margin: 15px auto;
    margin-top: 0px;
}

@media only screen and (min-width: 300px) and (max-width: 650px) {
    .qr-code {
        bottom: 20px;
        width: 30% !important;
    }
    .wait-ur-modal-overlay {
        padding: 10px;
    }

    .wait-ur-modal-container {
        margin: 0;
        width: 100%;
        max-height: 95vh;
    }

    .wait-ur-modal-header,
    .wait-ur-modal-body,
    .wait-ur-modal-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .wait-ur-modal-title {
        font-size: 15px;
        padding-right: 30px;
    }

}



    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .glance-image img {
            width: 100%;
            height: 203px;
            object-fit: cover;
        }

        #add-ons-modal .modal-dialog {
            width: 100%;
        }

        .detailed-image {
            display: none;
        }

        .custom-modal {
            width: 80%;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            padding: 15px;
        }

        .tabs {
            overflow: scroll;
        }

        .tab {
            white-space: nowrap;
        }

        .tabs {
            top: 0px;
        }

        .glance-container {
            flex-direction: column-reverse;
        }

        .tour-highlights .card {
            height: 240px;
        }

        .rate-card {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
            border: 1px solid #c7c7c7;
            position: relative;
            width: 50%;
            float: left;
            height: 50rem;
        }

            .rate-card .left-section {
                flex: 0;
            }

            .rate-card .right-section {
                flex: 0;
            }

        .feed-part-container {
            flex-direction: column;
        }

        .cancellation .cancellation-box {
            flex-direction: column;
        }

            .cancellation .cancellation-box .c-Policy {
                width: 100%;
            }

        .faq-container.faq-main .faq-grid {
            grid-template-columns: repeat(1, 1fr);
        }

        .text-content-all {
            padding: 0px 20px;
        }

        .image-content-all img {
            max-width: 100%;
            height: auto;
            border-radius: 28px;
        }

        .buttons {
            margin: 20px 0;
            display: flex;
            flex-direction: row;
            gap: 20px;
        }

            .buttons a {
                display: block;
                text-decoration: none;
                text-align: center;
                padding: 10px 0;
                font-size: 16px;
                margin: 10px 0;
                font-weight: 400;
                border-radius: 5px;
                width: 50%;
            }

        .priceboxhtml {
            margin: 15px auto;
            margin-top: 0px;
            position: absolute;
            right: 85px;
            top: 20px;
        }

        .discount {
            margin-bottom: 0px;
            margin: 0 auto;
        }

        .top-container {
            flex-direction: column;
        }

        .trip-section {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            border-radius: 8px;
            background: #fff;
            padding: 20px;
        }

        .card-container {
            margin: 20px auto;
            display: flex;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            flex-direction: column;
        }

        .four-perfect-part {
            width: 100%;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        .ed-mob-menu {
            display: block;
            position: relative;
            top: 0px;
            width: 100%;
            padding: 10px 0px;
            box-shadow: none;
            z-index: 999;
            background: var(--color-blue-100);
        }

        .qr-code {
            position: absolute;
            top: 17%;
            width: 119px !important;
            right: 5%;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            height: 143px;
            margin-left: auto;
        }


        .top-container {
            overflow: visible;
        }

        .perfect-part-top p {
            padding-right: 0rem;
        }

        .trip-card {
            height: 390px;
        }

        .trip-custom-modal-content {
            padding: 24px;
            max-width: 95%;
            margin: 20px;
        }

        .ryo-modal-title {
            font-size: 20px;
        }

        .ryo-form-row {
            flex-direction: row;
            gap: 12px;
        }

        .ryo-modal-footer {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
        }

        .ryo-footer-info {
            justify-content: center;
            order: 2;
        }

        .ryo-trip-custom-submit-btn {
            order: 1;
            width: 100%;
        }
        .wait-ur-modal-container {
            margin: 10px;
            max-width: none;
            width: calc(100% - 20px);
            overflow-y: auto;
            max-height: 95vh;
        }

        .wait-ur-modal-header,
        .wait-ur-modal-body,
        .wait-ur-modal-footer {
            padding-left: 16px;
            padding-right: 16px;
        }

        .wait-ur-form-row {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .wait-ur-trip-details-row {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .wait-ur-trip-name-section {
            flex-direction: column;
            align-items: stretch;
        }

        .wait-ur-whatsapp-btn {
            justify-content: center;
        }
    }



    @media only screen and (max-width: 600px) {
        .tour-highlights .card {
            height: 175px;
            position: relative;
        }

        .filters {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: nowrap;
            overflow: scroll;
            margin-bottom: 40px;
            position: sticky;
            top: 0;
            z-index: 1;
            background: #fff;
            padding: 10px 0px;
            box-shadow: rgb(17 12 46 / 11%) 0px 48px 100px 0px;
        }


        .star-btn {
            white-space: nowrap;
        }

        .cancellation .card-box {
            margin: 0px;
        }

        .activity-list-item .card {
            height: auto;
        }

        .all-act-part-new {
            width: 100% !important;
        }

        #itiday-1 .col-md-4 {
            width: 50%;
            float: left;
        }
    }

    @media only screen and (max-width: 1180px) and (min-width: 820px) {
        .cut-price {
            margin-left: 5%;
        }

        .rate-card .left-section .status {
            position: absolute;
            top: -20px;
            left: -15px;
        }

        .glance-image {
            height: auto;
            overflow: hidden;
        }
    }

    .scroll1 {
        height: 500px;
        overflow: auto;
        scrollbar-width: none;
    }

    .early-bird-wrapper {
        position: absolute;
        top: -19%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 15px;
        z-index: 999;
        align-items: center;
    }

    .early-bird-tag,
    .early-bird-deadline {
        margin: 0;
        font-weight: bold;
        color: #000;
    }

    .early-bird-tag {
        color: #fff;
        padding: 5px;
        display: flex;
        background: #F00068F7;
        align-items: center;
    }

    .early-bird-deadline span {
        color: #F1086D;
        font-weight: bold;
    }

    .isearlyback {
        background: #fef2f2 !important
    }



    /* Responsive tweak */
  


    @media (max-width: 768px) {
        .trip-custom-modal-content {
            padding: 20px;
            overflow-y: scroll;
        }

        .early-bird-wrapper {
            top: -6%;
            width: 100%;
            justify-content: end;
            align-items: center;
        }

        .early-bird-tag,
        .early-bird-deadline {
            font-size: 10px;
        }

            .early-bird-deadline span {
                font-size: 10px;
            }

        .heading {
            font-size: 18px;
        }
    }

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

    .popup-overlay.active {
        visibility: visible;
        opacity: 1;
    }

.popup-container {
    background: white;
    border-radius: 20px;
    max-width: 620px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.7) translateY(50px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius:12px;
}

.popup-overlay.active .popup-container {
    transform: scale(1) translateY(0);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .close-btn:hover {
        background: #f1f1f1;
        color: #333;
        transform: rotate(90deg);
    }

.yab-hero-image {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yab-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.yab-people-group {
    display: flex;
    align-items: center;
    gap: 10px;
}


.yab-popup-content {
    padding: 38px 32px;
    text-align: center;
}


.yab-popup-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    font-family: 'Inter';
    margin-bottom: 18px;
    margin-top: 0;
}

.yab-popup-subtitle {
    font-size: 13px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.5;
    font-family: 'Inter';
}

.yab-buttons-container {
    display: flex;
    gap: 15px;
}

.yab-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter';
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin: 0;
    margin:0;
}
.all-new-book-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 11px 11px 0 0;
}

.yab-btn-old {
    color: #666;
    border: 1px solid #D5D7DA;
    background: rgba(4, 81, 187, 0.03);
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

    .yab-btn-old:hover {
        background: #e8e8e8;
        border-color: #d0d0d0;
    }

.yab-btn-new {
    color: white;
    background: #0451BB;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

    .yab-btn-new:hover {
        background: #1565c0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }
.all-add-new-part{
    display:flex;
    flex-wrap:wrap;
}

@media only screen and (min-width: 300px) and (max-width: 650px) {
    .yab-popup-container {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .yab-popup-title {
        font-size: 24px;
    }

    .yab-hero-content {
        padding: 15px;
    }

    .yab-person {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .all-new-book-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 11px 11px 0 0;
    }
    .trip-details {
       display:block;
    }
}


/* Container below button */
.plan-action-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
}

/* Common style for both links */
.plan-action-link {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Individual colors */
.share-payment-link {
    color: #0451BB;
}

.dllholdspecesplan {
    color: #459F78;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .plan-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}