.index_about {
    background: url("../../images/background-2.jpg");
}

.page-item.active .page-link {
    background-color: #093777;
    border-color: #093777;
}

.bg_parralax {
    background-attachment: fixed;
    background-clip: initial;
    background-color: #01214c;
    background-image: url("../../images/background-3.jpg");
    background-origin: initial;
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.main_text_info {
    font-size: 16px;
    padding: 16px 0;
}

.text-shadow {
    text-shadow: .1em .1em .2em #000;
}

.text-gray {
    color: #a5a5a5 !important;
}

.h-50px {
    height: 400px;
}

.overflow-hidden {
    overflow: hidden;
}

.bottom-0 {
    bottom: 0;
    position: absolute;
}

.hotel-main .inner-hotel {
    margin-right: 15px;
    margin-left: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1);
    border-radius: 5px;
}

.hotel-main .inner-hotel img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.psh-hotel-info .sph-hotel-name h2 {
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.psh-hotel-info .sph-hotel-price h2 {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.sph-hotel-price .pr-night {
    font-size: 12px !important;
}

.psh-hotel-info .psh-parking-info {
    background: #122337;
    box-shadow: 3px 4px 3px -1px #333;
    color: #fff;
    padding: 6px;
    text-align: center;
    font-weight: 400;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    font-size: 12px;
}

.hot-deals .psh-hotel-ratting .fa-star {
    color: #f05a29;
}

.hot-deals .smalltop-info {
    font-size: 20px !important;
    font-weight: 400;
}

.save_text .card-title {
    text-shadow: .1em .1em .2em #000;
}

.testimonial_main {
    background: url("../../images/bg-testimonial.jpg");
}

.testimonial_main .overall_rating .stp-rating .fa-star {
    color: #f05a29;
}

.testimonial_main .testimonial-name .spt-name {
    margin: 0;
    padding: 2px 0;
    font-weight: 700;
    color: #7c5201;
    font-size: 16px;
}

.testimonial_main .testimonial-name .spt-date {
    margin: 0;
    padding: 1px 0;
    font-weight: 700;
    color: #575759;
    font-size: 12px;
}

.destinations_main .destinations_title a {
    height: 19px;
    overflow: hidden;
    display: block;
}

.destinations_main .destinations_title {
    font-size: 14px;
}

.destinations_main .sub_text {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

@media (max-width:575.98px) {
    .table-md-vh {
        width: 350vh !important
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    .psh-hotel-info .sph-hotel-name h2 {
        font-size: 14px
    }

    .hotel-main .inner-hotel img {
        height: 200px !important
    }

    .table-md-vh {
        width: 380vh !important
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .save_text .card-title {
        font-size: 34px;
        text-shadow: .1em .1em .2em #000
    }

    .table-md-vh {
        width: 400vh !important
    }
}

.dollar,
.package_rate,
.parking_only,
.proccessing,
.room_only,
.superscript {
    color: #043880 !important
}


.circle-layout {text-align: center; transition: 0.5s; }
.circle-icon {width: 100px; height: 100px; line-height: 100px; border-radius: 50%; background: #fff; box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff; margin: 0 auto 25px; font-size: 30px; color: #3742fa; transition: 0.4s; }
.circle-layout:hover .circle-icon {transform: scale(1.1); background: #3742fa; color: #fff; }
.circle-layout h6 {font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
.circle-layout p {color: #777;}

/* --- Layout 4: why choose us) --- */
.l4-wrap { background: #fff; border-radius: 30px; }
.l4-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; margin-bottom: 20px; }
.l4-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.glass-item {
display: flex; align-items: center; background: #fff;
padding: 20px; border-radius: 15px; margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid rgba(255,255,255,0.8);
}
.glass-icon {
font-size: 24px; color: #20bf6b; margin-right: 20px;
width: 50px; height: 50px; background: #f0fff7;
display: flex; align-items: center; justify-content: center; border-radius: 12px;
}
.opacity-50 {opacity: 0.5px !important;}
.bg-warning-50 {background:#fff9e6;color:#f1c40f;}
.bg-danger-50 {background:#fff0f0; color:#ff4d4d;}
.bg-primary-50 {background:#f0f3ff; color:#3867d6;}
.hero-smart::before {
    content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 1;
}

.hero-smart > * {
position: relative;
z-index: 2; /* Text ko overlay se upar rakhne ke liye */
}
.hero-smart {
position: relative;
background-color: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 1;
padding: 60pt 0 !important
}

.smart-stats-bar {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px; /* Capsule Shape */
    padding: 20px 40px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.stat-box {
    padding: 10px 30px;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.stat-box:last-child { border-right: none; }

.stat-icon-circle {
    width: 45px; height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-right: 15px;
    color: #00d2d3;
    font-size: 16px;
}

.stat-val {
    font-weight: 700;
    font-size: 20px;
    display: block;
    line-height: 1;
}

.stat-txt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .smart-stats-bar { border-radius: 30px; padding: 20px; }
    .stat-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; }
    .stat-box:last-child { border-bottom: none; }
    .hero-content h1 { font-size: 30px; }
}

.testi-split {
        background: #fff; border-radius: 25px; overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.04); border: 1px solid #f1f1f1;
    }
    .progress-side { background: #e0e7ff75; padding: 40px; min-width: 300px; }
    
    .dot-rating { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; background: #e2e8f0; }
    .dot-rating.active { background: #10b981; } /* Green Circles */
    .custom-progress { height: 6px; border-radius: 10px; background: #e9ecef; margin-bottom: 5px; }
    .custom-progress-bar { background: #4834d4; border-radius: 10px; }
    .review-side {
        position: relative;
        padding: 20px;
        width: 100%
    }

    /* Quote styling */
    .quote-text {
        position: relative;
        
        line-height: 1.8;
        color: #64748b; /* Soft muted color */
        padding: 0 10px;
        font-style: italic; /* Review hamesha italic mein zyada acha lagta hai */
    }

    /* Start Quote Icon */
    .quote-text::before {
    content: "\201C";
    font-family: serif;
    position: absolute;
    left: -22px;
    top: -38px;
    font-size: 80pt;
    color: #e0e7ff;
    line-height: 1;
}

    /* End Quote Icon */
    .quote-text::after {
    content: "\201D";
    font-family: serif;
    position: absolute;
    right: 5px;
    bottom: -84px;
    font-size: 80pt;
    color: #e0e7ff;
    line-height: 1;
}

.bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 240px 240px;
            gap: 15px;
        }

        .bento-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background: #000;
            transition: transform 0.3s ease;
        }

        .bento-item:hover { transform: translateY(-5px); }

        /* Grid Mapping */
        .box-lg { grid-column: span 2; } /* Toronto & Chicago broad boxes */
        
        .bento-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7; /* Image thodi dark taaki text chamke */
        }

        /* Strong Gradient for Bold Text */
        .bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.847) 10%, rgba(0, 0, 0, 0.259) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: #ffffff;
}

        .hotel-count {
            background: #ffc107; /* Warning yellow for visibility */
            color: #000;
            font-weight: 800;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 50px;
            width: fit-content;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .city-name {
            font-weight: 900;
            font-size: 1.6rem;
            margin: 0;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: -0.5px;
        }

        .package-text {
            font-size: 13px;
            opacity: 0.9;
            font-weight: 500;
            margin-top: 5px;
            color: #00d1ff; /* Light blue accent for "Packages" */
        }

        @media (max-width: 991px) {
            .bento-grid { display: flex; flex-direction: column; }
            .bento-item { height: 220px; }
        }



        .location-section { padding: 80px 0; }
        .section-heading { font-weight: 700; font-size: 28px; margin-bottom: 40px; color: #2d3436; text-align: center; }

        /* --- THE SOFT CARD --- */
        .loc-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 25px;
            border: none;
            /* Yahan hai wo soft shadow jo aapne mangi thi */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); 
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            text-decoration: none !important;
            border: 1px solid rgba(255,255,255,0.8);
        }

        .loc-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            background: #fff;
        }

        /* Icon Circle */
        .loc-icon {
            width: 50px; height: 50px;
            background: #eef2ff;
            color: #4834d4;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
            transition: 0.3s;
        }

        .loc-card:hover .loc-icon {
            background: #4834d4;
            color: #fff;
        }

        .loc-info h6 {
            margin: 0;
            font-weight: 700;
            font-size: 15px;
            color: #2d3436;
        }

        .loc-info span {
            font-size: 12px;
            color: #95a5a6;
            display: block;
        }

        .badge-hotels {
            margin-left: auto;
            background: #f1f2f6;
            color: #2f3542;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 8px;
        }

        /* Tabs Style */
        .loc-tabs {
            margin-bottom: 40px;
            justify-content: center;
            border: none;
        }
        .loc-tabs .nav-link {
    border: none;
    color: #44494a;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 8px;
    margin: 5px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
        .loc-tabs .nav-link.active {
            background: #2411a1;
            color: #fff !important;
            box-shadow: 0 8px 20px rgba(72, 52, 212, 0.2);
            border: 1px solid #eee;
        }


        .recent-section-wrapper {
        padding: 20px 0 0;
    }
    #recent_searches a {
    color: #6094cc !important;
}

    /* Horizontal Scroll Setup */
    .scroll-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 15px 5px;
        gap: 20px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .scroll-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Soft Card Design */
    .trip-card {
        flex: 0 0 calc(33.333% - 20px); /* 3 cards per line */
        min-width: 300px;
        background: #ffffff;
        border-radius: 16px;
        padding: 18px;
        border: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .trip-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 108, 228, 0.12);
        border-color: rgba(0, 108, 228, 0.2);
    }

    .icon-wrapper {
        width: 55px;
        height: 55px;
        background: linear-gradient(135deg, #e0efff 0%, #f0f7ff 100%);
        color: var(--primary-blue);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .trip-info {
        margin-left: 15px;
        overflow: hidden;
    }

    .trip-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .trip-date {
        font-size: 0.85rem;
        color: #6a6a6a;
        display: flex;
        align-items: center;
    }

    .trip-date i {
        font-size: 12px;
        margin-right: 6px;
        opacity: 0.7;
    }

    .badge-type {
        position: absolute;
        top: -10px;
        right: 20px;
        background: #fff;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        color: var(--primary-blue);
    }


    .footer-wrapper { background: #ffffff}

        /* --- High-End Trust Strip --- */
        .trust-strip {
            background: #ffffff;
            border-radius: 25px;
            padding: 35px 25px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.04);
            border: 1px solid #f1f5f9;
            margin-bottom: -60px; /* Overlap effect */
            position: relative;
            z-index: 10;
        }

        .trust-item {
            text-align: center;
            padding: 10px;
        }

        .trust-icon-box {
            font-size: 1.8rem;
            color: #334155; /* Soft Dark Grey */
            margin-bottom: 12px;
            display: block;
        }

        .trust-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #1e293b;
            margin-bottom: 4px;
        }

        .trust-desc {
            font-size: 0.8rem;
            color: #94a3b8;
            margin: 0;
        }

        /* --- Main Footer Area --- */
        .main-footer {
            background-color: #fcfdfe;
            padding: 60px 0 40px; /* Extra top padding for overlap */
            border-top: 1px solid #f1f5f9;
        }

        .footer-heading {
            font-size: 1.1rem;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 25px;
            display: inline-block;
            position: relative;
        }

        /* Soft Underline Style */
        .footer-heading::after {
            content: "";
            display: block;
            width: 40%;
            height: 3px;
            background: linear-gradient(to right, #6366f1, transparent);
            border-radius: 10px;
            margin-top: 6px;
        }

        .footer-links { list-style: none; padding: 0; }
        
        .footer-links li {
            margin-bottom: 14px;
            display: flex;
            align-items: center;
        }

        /* Link Circle Icon */
        .footer-links li::before {
            content: "";
            width: 6px;
            height: 6px;
            background: #cbd5e1;
            border-radius: 50%;
            margin-right: 12px;
            transition: all 0.3s;
        }

        .footer-links li:hover::before {
            background: #6366f1;
            transform: scale(1.5);
        }

        .footer-links a {
            color: #64748b;
            text-decoration: none;
            font-size: 0.92rem;
            transition: all 0.2s;
        }

        .footer-links a:hover {
            color: #1e293b;
            padding-left: 5px;
        }

        /* --- Social Icons & Bottom --- */
        .social-box {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: #f1f5f9;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #475569;
            margin-left: 10px;
            transition: all 0.3s;
            text-decoration: none;
        }

        .social-links a:hover {
            background: #1e293b;
            color: #fff;
            transform: translateY(-3px);
        }

        .copyright { font-size: 0.85rem; color: #94a3b8; margin: 0; }

        @media (max-width: 991px) {
            .trust-strip { margin-bottom: 20px; }
            .main-footer { padding-top: 50px; text-align: center; }
            .footer-heading::after { margin: 6px auto; }
            .footer-links li { justify-content: center; }
            .social-box { flex-direction: column; gap: 20px; }
        }