/* ============================================================
   home.css
   Moved out of inline <Style> tag in index.php (Point 7 fix).
   Link this file from header.php:
   <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/home.css">
   ============================================================ */

.text {
    text-align: center;
}

.box-icon {
    box-shadow: 0 0 16px -4px #00000040;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    min-height: 265px;
}

.bg-color-space {
    padding-top: 100px;
    background: #f5f5f5;
}

@media screen and (max-width: 768px) {
    .bg-color-space {
        padding-top: 0px !important;
    }
}

.hotel-ammeties a {
    top: 0 !important;
    margin: 10px;
}

/* BUG FIX: .gal-home-wrap replaces what used to be a wrapping <a href="#">
   around the whole International/Domestic package card (which created
   invalid nested <a> tags, since the image and title already had their
   own real links inside). This div preserves the same block-level
   layout the anchor provided. */
/* BUG FIX: countdown timer (.clock) display.
   style.css has a #clock (ID) rule for the outer wrapper's background/
   layout, and separate .block / .digit class rules for the inner cells —
   those .block/.digit rules already applied fine with class="clock".
   This recreates the #clock wrapper styling via a class selector so it
   works for multiple cards on the page (an ID can only style one),
   matching the theme's actual blue background design instead of a guess. */
.clock {
    display: block;
    width: 100%;
    position: relative;
    padding: 0px;
    text-align: center;
    background-color: #12598b;
}

/* BUG FIX: "Deals of the Day" card content (description + duration
   text) was overlapping with the price/Book Now button below it.
   These rules force normal block flow with proper spacing so content
   never overlaps, regardless of any fixed-height/absolute-positioning
   behavior coming from other theme stylesheets. */

/* Make the row of cards stretch each column to equal height */
.hotel-listing.hotel-listing-1 {
    display: flex !important;
    flex-wrap: wrap !important;
}
.hotel-listing.hotel-listing-1 > div[class*="col-"] {
    display: flex !important;
}

.room-grid-view {
    height: auto !important;
    width: 100%;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Only .room-info grows to absorb leftover space from title-length
   differences between cards — this is what keeps the gap before
   "Book Now" consistent across all cards, instead of growing
   unpredictably based on how many lines the title took. */
.room-grid-view .room-info {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.room-grid-view .room-desc {
    position: relative !important;
    margin-bottom: 0 !important;
}
/* Clamp description to 4 lines (was 3) — more content shows, which
   reduces the empty gap below shorter descriptions, while still
   keeping all cards' text blocks a consistent height. */
.room-grid-view .room-desc p {
    margin-bottom: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-grid-view .room-desc h5 {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-grid-view .room-desc h5 small {
    font-size: 14px !important;
}
/* room-book is a sibling of room-title/room-desc inside the flex-column
   .room-info — margin-top:auto here pushes it consistently to the
   bottom of the available space, regardless of how many lines the
   title or description took on a given card. This is what keeps the
   gap above "Book Now" the same size across all cards. */
.room-grid-view .room-book {
    position: relative !important;
    margin-top: auto !important;
    padding-top: 14px;
    clear: both;
}

/* Widen the Deals of the Day cards: container was using Bootstrap's
   default max-width (~1170px). Increasing it gives each of the 3
   cards more horizontal room, which helps fit the duration text
   ("06 Nights & 07 Days") on one line and reduces how much empty
   space shows up below shorter titles/descriptions. */
#top-tour-row > .container {
    max-width: 1400px !important;
    width: 95% !important;
}

.gal-home-wrap {
    display: block;
}

/* ===== Why Choose Us ===== */
.why-choose-us {
    padding: 60px 0;
    background-color: #ffffff;
}
.why-choose-us h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 40px;
}
.wcu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.wcu-card {
    flex: 1 1 220px;
    max-width: 260px;
    text-align: center;
    padding: 28px 18px;
    border-radius: 14px;
    background-color: #fafafa;
    border: 1px solid #eee;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wcu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.wcu-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #c00f65, #e6356f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcu-icon i {
    font-size: 24px;
    color: #ffffff;
}
.wcu-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 8px;
}
.wcu-card p {
    font-size: 13.5px;
    color: #777;
    line-height: 1.6;
    margin: 0;
}
.wcu-card.wcu-google-card .wcu-icon {
    background: linear-gradient(135deg, #4285F4, #34A853);
}
.wcu-google-stars {
    color: #fbbc04;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
@media (max-width: 768px) {
    .why-choose-us {
        padding: 24px 0 28px;
    }
    .why-choose-us h2 {
        font-size: 21px;
        margin-bottom: 24px;
    }
}

/* ============================================================
   POINT 1 FIX: Search dropdown now truly centered.

   ROOT CAUSE FOUND: style.css has:
     .searchbanner { margin: 0 445px 0px 406px; }
   These are fixed, asymmetric left/right pixel margins left over from
   an older banner layout (text on one side, image on the other). That
   margin was never overridden before now, which is the actual reason
   centering never worked — it doesn't matter how centered the content
   inside .searchbanner is if .searchbanner itself is shoved sideways
   by a lopsided margin. Overriding it here with margin: 0 auto fixes
   the real problem at its source.

   SECOND ROOT CAUSE (after the new banner image with side-by-side
   globe/family illustrations): .container.banner-content uses
   Bootstrap's fixed max-width (e.g. 1170px), so its own center didn't
   line up with the visual center of the full-width banner image/section.
   Forcing it to span 100% width makes its center match the image's
   actual center, so the heading/subtext/search box land in the true
   middle of the banner — between the globe on the left and the family
   photo on the right.
   ============================================================ */
.container.banner-content {
    max-width: 100% !important;
    width: 100% !important;
}

.searchbanner {
    margin: 0 auto !important;
    max-width: 700px !important;
    width: 100% !important;
    position: relative !important;
    text-align: center !important;
}

@media screen and (max-width: 768px) {
    .searchbanner {
        margin: 0 !important;
        max-width: 100% !important;
    }
}

.searchbanner h1,
.searchbanner > p:first-of-type {
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6);
}

/* Wrapper itself centered on the page */
.searchbanner .search-center-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px auto !important;
    float: none !important;
    text-align: center !important;
}

/* FALLBACK: centers the plain native <select> too, in case select2's
   JS widget never initializes (e.g. a plugin conflict resets jQuery).
   flex on the parent + this width rule is what actually centers it —
   text-align alone does NOT center a <select> element. */
.searchbanner .search-center-wrap select.form-control {
    width: 480px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    flex: 0 1 auto !important;
}

/* select2 renders its visible widget as a sibling <span class="select2-container">
   right after the wrapper div (and sometimes the original <select> tag's position
   in the DOM is preserved). Target it broadly. */
.searchbanner .select2-container,
.searchbanner span.select2-container,
.search-center-wrap .select2-container,
.search-center-wrap + .select2-container {
    display: inline-block !important;
    width: 480px !important;
    max-width: 90% !important;
    max-width: min(480px, 90%) !important;
    margin: 0 auto !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

.searchbanner .select2-container .select2-selection,
.searchbanner .select2-container .select2-selection--single {
    width: 100% !important;
    text-align: left !important;
}

.searchbanner select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.searchbanner .content-p {
    position: relative !important;
    z-index: 1;
    clear: both;
    margin-top: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    float: none !important;
}

/* BUG FIX: "Popular Destinations We Cover" carousel text was invisible.
   #testimony has a dark background image (per style.css), and our
   content's <p>/<h3> tags had no explicit color set — they were
   rendering in a dark default color, invisible against the dark
   background. style.css only had a white-text rule for the old
   design's blockquote small/footer tags, not for plain p/h3. */
#owl-testimonial .item {
    padding: 20px;
    text-align: center;
}
#owl-testimonial .item blockquote {
    border: none;
    margin: 0 0 16px;
}
#owl-testimonial .item blockquote p {
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1.6;
}
#owl-testimonial .item h3 {
    color: #fc9f1c !important;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* BUG FIX: replaces owl-carousel for #destination-scroll (Popular
   Destinations section). Pure CSS scroll-snap — no JavaScript width
   calculation involved, so this displays correctly immediately on
   first page load, with no init-timing dependency at all. Supports
   touch swipe and mouse-drag-to-scroll natively in modern browsers. */
.destination-scroll {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 4px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
/* Hide scrollbar completely — auto-scroll below makes manual scrolling
   unnecessary for most visitors, and this gives a cleaner look. Users
   can still swipe/drag to scroll manually; it's just not visually shown. */
.destination-scroll::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* BUG FIX: name (h3) was sitting visually outside/disconnected from the
   bordered blockquote box. Now the whole card — quote + name — is one
   unified bordered box, and all cards get the same fixed height so the
   row of cards lines up evenly regardless of how much text each one has. */
.destination-scroll .item {
    flex: 0 0 auto;
    width: 300px;
    min-height: 220px;
    scroll-snap-align: start;
    padding: 18px 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #fc9f1c;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
}
@media (max-width: 768px) {
    .destination-scroll .item {
        width: 85%;
        min-height: 200px;
    }
}
.destination-scroll .item blockquote {
    border: none !important;
    margin: 0 0 10px;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.destination-scroll .item blockquote p {
    color: #ffffff !important;
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
}
.destination-scroll .item h3 {
    color: #fc9f1c !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    flex: 0 0 auto;
}

/* Reduce the Popular Destinations section's outer padding so the
   whole section takes up less vertical space on the page. */
#testimony .p-40-90 {
    padding: 24px 40px !important;
}

/* Keep the "Mannhit Vacations" intro section's image and text columns
   vertically centered against each other, now that the text was
   shortened and the image is height-constrained to match it. */
section[aria-label="top-rated"] .row {
    align-items: center;
}

/* Modern "Read More" button for the Mannhit Vacations intro section —
   sits closer to the paragraph (no more disconnected <br/> gap),
   gradient background, subtle hover lift, and a sliding arrow icon. */
.btn-content-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 11px 24px;
    background: linear-gradient(135deg, #fc9f1c, #ed8c22);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 6px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(252, 159, 28, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-content-modern i {
    transition: transform 0.2s ease;
}
.btn-content-modern:hover {
    background: linear-gradient(135deg, #ed8c22, #d97a10);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(252, 159, 28, 0.45);
    color: #ffffff !important;
}
.btn-content-modern:hover i {
    transform: translateX(4px);
}

/* Slightly more spacing between subnav items now that Register has
   been removed, so Email/Login don't look cramped together on the right */
.subnav .right .social-icons-subnav {
    margin-left: 8px;
}

/* ============================================================
   MILESTONE SECTION IMPROVEMENTS (Plan Trips/Price Range/Quality/Safety)
   ============================================================ */

/* 1. Equal card heights: makes the row a flex container so all 4
   cards stretch to match the tallest one. Headings are now short
   enough to fit on a single line, and description text is balanced
   to a similar length, so cards end up naturally equal-sized with
   no artificial empty space needed. */
section[aria-label="milestone"] .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
section[aria-label="milestone"] .row > div[class*="col-"] {
    display: flex;
}
section[aria-label="milestone"] .box-icon {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    padding: 24px 22px;
}
section[aria-label="milestone"] .box-icon .text {
    display: flex;
    flex-direction: column;
}
section[aria-label="milestone"] .box-icon h3 {
    white-space: nowrap;
    font-size: 17px;
    margin-bottom: 10px;
}
@media (max-width: 991px) {
    section[aria-label="milestone"] .box-icon h3 {
        white-space: normal;
    }
}
section[aria-label="milestone"] .box-icon .milestone-desc {
    color: #6c6c6c;
    font-size: 15.5px;
    line-height: 1.65;
}

/* 2. (Read More link removed entirely per request — full text is now
   shown directly on each card, with no truncation/expand link.) */

/* 3. Hover lift effect on each card */
section[aria-label="milestone"] .box-icon {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
section[aria-label="milestone"] .box-icon:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

/* 4. Consistent icon presentation — gives every icon the same sized
   circular backdrop, so the globe/credit-card/people/handshake
   illustrations (which come in different color styles) read as a
   unified set rather than four unrelated graphics. */
section[aria-label="milestone"] .box-icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto 16px;
    display: block;
    padding: 12px;
    background: #f5f8fb;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}