/*
 * Site-specific overrides on top of the Tourm theme's style.css.
 * Kept separate from the vendor theme file so upstream updates don't
 * clobber these fixes and so they're easy to find/maintain.
 *
 * Purpose: force equal image heights (via aspect-ratio + object-fit)
 * wherever real, differently-sized uploads replace the theme's
 * uniformly-cropped placeholder images — cards in the same row/slider
 * were stretching to different heights because the theme only set
 * width:100% on these <img> tags with no height constraint.
 */

/* Our Travel Services (home) - category cards */
.category-card .box-img img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Popular Destinations (home slider) */
.destination-box .destination-img img {
    aspect-ratio: 2 / 3;
    height: auto;
    object-fit: cover;
}

/* Most Popular Tour Packages (home + packages listing) */
.tour-box_img img {
    aspect-ratio: 8 / 7;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Visa Services We Provide (home) - force true circles */
.team-box .team-img {
    aspect-ratio: 1 / 1;
}

.team-box .team-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Destination-style listing cards: services index, tourist/medical/work
   permit visa "By Country" listings */
.destination-item_img img {
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* News / blog cards */
.blog-img img {
    aspect-ratio: 6 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Gallery grid (main gallery page) */
.gallery-img img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Footer "Recent Gallery" thumbnails */
.sidebar-gallery .gallery-thumb img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Bank Accounts table (payment-options page) - small logo next to bank name */
.bank-logo-icon {
    width: auto;
    height: 28px;
    max-width: 90px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Payment method icons (payment-options page): the theme's .price-card_icon
   is designed for small line-art glyphs (white silhouette on a colored
   circle, revealed in color on hover). Real brand logos (bKash, Nagad,
   Visa...) need to show their true colors immediately and keep their own
   aspect ratio instead of being forced into a small inverted-color circle. */
.payment-methods-section .price-card_icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    line-height: normal;
    padding: 8px;
}

.payment-methods-section .price-card_icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    transform: none;
}

.payment-methods-section .price-card:hover .price-card_icon,
.payment-methods-section .price-card.active .price-card_icon {
    background-color: var(--white-color);
}

.payment-methods-section .price-card:hover .price-card_icon img,
.payment-methods-section .price-card.active .price-card_icon img {
    filter: none;
    transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Top contact strip (header) — ported from the old site so the row reads
   exactly the same: email(s), then each phone number preceded by its own
   WhatsApp / Viber / imo icons, then the landline, with the brand-coloured
   social icons on the same line at the right.
   ───────────────────────────────────────────────────────────────────────── */
.header-layout1 .header-top.top-contact-strip,
.header-top.top-contact-strip {
    background-color: #0e5685;
    color: #e5edf7;
    padding: 8px 0;
    border-bottom: none;
}

.top-contact-strip a {
    color: inherit;
}

.top-contact-strip a:hover {
    color: #ffffff;
}

.top-contact-strip .top-contact-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 0.375rem;
}

.top-contact-strip .contact-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    column-gap: 0.7rem;
    row-gap: 0.32rem;
}

.top-contact-strip .contact-email,
.top-contact-strip .phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    white-space: nowrap;
    font-size: 0.88rem;
    line-height: 1.24;
    font-weight: 500;
    letter-spacing: 0.003em;
}

.top-contact-strip .messenger-pack {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    white-space: nowrap;
}

/* Outline glyphs sitting inline with text (envelope, phone). */
.top-contact-strip .contact-email > .tcs-icon,
.top-contact-strip .phone-link > .tcs-icon,
.top-contact-strip .top-mobile-phone > .tcs-icon {
    height: 0.875rem;
    width: 0.875rem;
    flex-shrink: 0;
    color: #38bdf8;
}

/* Messenger chips: WhatsApp / Viber / imo. */
.top-contact-strip .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 9999px;
    color: #38bdf8;
    transition: color 150ms ease, transform 150ms ease;
}

.top-contact-strip .contact-icon:hover {
    color: #ffffff;
}

.top-contact-strip .contact-icon .tcs-icon {
    height: 0.875rem;
    width: 0.875rem;
}

.top-contact-strip .social-links {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.top-contact-strip .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.35rem;
    width: 1.35rem;
    border-radius: 0.35rem;
    background-color: transparent;
    transition: color 150ms ease, transform 150ms ease;
}

.top-contact-strip .social-icon .tcs-icon {
    height: 0.875rem;
    width: 0.875rem;
}

.top-contact-strip .social-icon:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.top-contact-strip .social-icon--facebook {
    color: #60a5fa;
}

.top-contact-strip .social-icon--instagram {
    color: #f472b6;
}

.top-contact-strip .social-icon--youtube {
    color: #f87171;
}

.top-contact-strip .social-icon--x {
    color: #e2e8f0;
}

.top-contact-strip .social-icon--blogger {
    color: #fb923c;
}

/* Secondary contacts drop out first on narrow desktops/tablets. */
.top-contact-strip .contact-extra {
    display: inline-flex;
}

.top-contact-strip .top-mobile-rows {
    display: none;
}

@media (max-width: 1399px) {
    .top-contact-strip .contact-extra {
        display: none;
    }
}

@media (max-width: 767px) {
    .top-contact-strip .top-contact-wrap {
        gap: 0.45rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .top-contact-strip .contact-primary,
    .top-contact-strip .top-contact-wrap > .social-links {
        display: none;
    }

    .top-contact-strip .top-mobile-rows {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.38rem;
    }

    .top-contact-strip .top-mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
        width: 100%;
        min-width: 0;
    }

    .top-contact-strip .top-mobile-row-1 .contact-email {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .top-contact-strip .top-mobile-row-1 .contact-email > span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-contact-strip .top-mobile-messengers {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex-shrink: 0;
    }

    .top-contact-strip .top-mobile-phone {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
        font-size: 0.74rem;
        line-height: 1.25;
        font-weight: 500;
    }

    .top-contact-strip .top-mobile-social {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.28rem;
        margin-left: auto;
        flex-shrink: 0;
    }

    .top-contact-strip .contact-icon {
        height: 1.15rem;
        width: 1.15rem;
    }

    .top-contact-strip .social-icon {
        height: 1.22rem;
        width: 1.22rem;
    }
}

@media (max-width: 379px) {
    .top-contact-strip .top-mobile-row-1 .contact-email > span {
        max-width: 9.5rem;
    }
}