/*!
 * Al Baitul Ateeq additions to the Travlla theme: language toggle, header contact,
 * floating WhatsApp, package mobile bar, enquiry form, branches, video testimonials.
 * Uses logical properties (inset-inline-*, margin-inline-*) so it mirrors on RTL pages
 * without separate rules. Colours come from the theme's CSS variables.
 */

:root {
    --ateeq-primary: var(--primary-color, #066168);
    --ateeq-secondary: var(--secondary-color, #ffaa0d);
    --ateeq-whatsapp: #25d366;
    --ateeq-whatsapp-dark: #128c4b;
}

.ateeq-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ---------------------------------------------------------------- language toggle */
.ateeq-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .25s, color .25s, border-color .25s;
}

.ateeq-lang-toggle .ateeq-lang-toggle__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ateeq-lang-toggle[lang=ur] .ateeq-lang-toggle__label {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
    font-size: 15px;
    line-height: 1;
    padding-bottom: 4px;
}

/* Header: same colour logic as the theme's switchers (white on the transparent home header). */
.site-header .ateeq-lang-toggle--header {
    color: var(--ateeq-primary);
    margin-inline: 4px;
}

.site-header .ateeq-lang-toggle--header:hover,
.site-header .ateeq-lang-toggle--header:focus-visible {
    background-color: var(--ateeq-primary);
    border-color: var(--ateeq-primary);
    color: #fff;
}

.header-style-1.header-transparent:not(.is-fixed) .ateeq-lang-toggle--header {
    color: #fff;
}

.header-style-1.header-transparent:not(.is-fixed) .ateeq-lang-toggle--header:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--ateeq-primary);
}

.ateeq-lang-toggle--footer {
    color: inherit;
    opacity: .9;
}

.ateeq-lang-toggle--footer:hover {
    opacity: 1;
    color: var(--ateeq-secondary);
}

.ateeq-lang-toggle--drawer,
.ateeq-lang-toggle--panel {
    color: var(--ateeq-primary);
    margin-block: 10px;
}

.ateeq-lang-toggle--drawer:hover,
.ateeq-lang-toggle--panel:hover {
    background-color: var(--ateeq-primary);
    color: #fff;
}

/* ---------------------------------------------------------------- header contact */
.ateeq-hdr-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 6px;
}

.ateeq-hdr-contact__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ateeq-primary);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.ateeq-hdr-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color-rgb, 6, 97, 104), .1);
    transition: background-color .25s, color .25s;
}

.ateeq-hdr-contact__icon svg {
    width: 20px;
    height: 20px;
}

.ateeq-hdr-contact__whatsapp .ateeq-hdr-contact__icon {
    background-color: var(--ateeq-whatsapp);
    color: #fff;
}

.ateeq-hdr-contact__item:hover .ateeq-hdr-contact__icon {
    background-color: var(--ateeq-primary);
    color: #fff;
}

.header-style-1.header-transparent:not(.is-fixed) .ateeq-hdr-contact__phone {
    color: #fff;
}

.header-style-1.header-transparent:not(.is-fixed) .ateeq-hdr-contact__phone .ateeq-hdr-contact__icon {
    background-color: rgba(255, 255, 255, .18);
}

/* The number text is shown only on wide screens; icons elsewhere. */
@media (max-width: 1499px) {
    .ateeq-hdr-contact__text {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .ateeq-hdr-contact {
        gap: 4px;
        padding-inline: 0;
    }

    .ateeq-hdr-contact__icon {
        width: 32px;
        height: 32px;
    }

    /* Phones: the floating button already offers WhatsApp, keep only "call". */
    .site-header .ateeq-hdr-contact .ateeq-hdr-contact__whatsapp {
        display: none !important;
    }

    .site-header .ateeq-lang-toggle--header {
        padding: 4px 10px;
        font-size: 13px;
    }

    .site-header .ateeq-lang-toggle--header .ateeq-lang-toggle__icon {
        display: none;
    }
}

.ateeq-hdr-address svg {
    margin-inline-end: 6px;
}

@media (max-width: 359px) {
    .site-header .ateeq-hdr-contact {
        display: none !important;
    }
}

/* ---------------------------------------------------------------- mobile drawer + info panel */
.ateeq-drawer-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 16px 20px 24px;
    border-top: 1px solid rgba(var(--primary-color-rgb, 6, 97, 104), .15);
}

.ateeq-drawer-extra__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ateeq-primary);
    font-weight: 600;
    padding: 6px 0;
}

.ateeq-drawer-extra__link svg {
    width: 20px;
    height: 20px;
}

.ateeq-drawer-extra__link--whatsapp {
    color: var(--ateeq-whatsapp-dark);
}

@media (max-width: 1199px) {
    .header-nav.navbar-collapse {
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
}

.ateeq-panel-contact {
    list-style: none;
    margin: 20px 0 10px;
    padding: 0;
}

.ateeq-panel-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: inherit;
}

.ateeq-panel-contact svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--ateeq-secondary);
}

.ateeq-panel-contact a {
    color: inherit;
}

/* ---------------------------------------------------------------- footer */
/* Phone numbers never wrap mid-number (both directions). */
.widget_address a[href^="tel:"],
.widget_address a[href^="tel:"] .trv-contact,
.trv-contact-list a[href^="tel:"],
.trv-contact-list a[href^="https://wa.me"] {
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

.ateeq-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ateeq-footer-branch strong {
    color: var(--ateeq-secondary);
    font-weight: 600;
}

.ateeq-footer-branch a {
    color: inherit;
}

@media (max-width: 575px) {
    .ateeq-footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

/* ---------------------------------------------------------------- floating WhatsApp */
.ateeq-wa-float {
    position: fixed;
    bottom: 20px;
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    min-width: 56px;
    padding: 0 13px;
    border-radius: 999px;
    background-color: var(--ateeq-whatsapp);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background-color .2s;
}

.ateeq-wa-float--end {
    inset-inline-end: 20px;
}

.ateeq-wa-float--start {
    inset-inline-start: 20px;
}

.ateeq-wa-float:hover,
.ateeq-wa-float:focus-visible {
    background-color: var(--ateeq-whatsapp-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.ateeq-wa-float__icon {
    flex-shrink: 0;
}

.ateeq-wa-float__label {
    display: none;
    font-weight: 600;
    padding-inline-end: 6px;
}

@media (min-width: 992px) {
    .ateeq-wa-float__label {
        display: inline;
    }
}

/* Keep the theme's scroll-to-top button clear of the WhatsApp button (same side). */
body:has(.ateeq-wa-float--end) .scroltop {
    bottom: 88px;
}

@media print {
    .ateeq-wa-float,
    .ateeq-mobile-bar {
        display: none !important;
    }
}

/* ---------------------------------------------------------------- package mobile bar */
.ateeq-mobile-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 997;
    display: flex;
    background-color: #fff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ateeq-mobile-bar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ateeq-primary);
    text-decoration: none;
}

.ateeq-mobile-bar__item svg {
    width: 22px;
    height: 22px;
}

.ateeq-mobile-bar__item--book {
    background-color: var(--ateeq-primary);
    color: #fff;
}

.ateeq-mobile-bar__item--whatsapp {
    color: var(--ateeq-whatsapp-dark);
}

.ateeq-mobile-bar__item + .ateeq-mobile-bar__item {
    border-inline-start: 1px solid rgba(0, 0, 0, .06);
}

@media (max-width: 991px) {
    body:has(.ateeq-mobile-bar) {
        padding-bottom: 64px;
    }

    /* The bar already offers WhatsApp; lift the floating button above it. */
    body:has(.ateeq-mobile-bar) .ateeq-wa-float {
        bottom: 80px;
    }

    body:has(.ateeq-mobile-bar) .scroltop {
        bottom: 148px;
    }
}

/* ---------------------------------------------------------------- enquiry form + modal */
.ateeq-enquiry-section .ateeq-enquiry-form {
    background-color: #fff;
    border: 1px solid rgba(var(--primary-color-rgb, 6, 97, 104), .15);
    border-radius: 20px;
    padding: 28px;
}

.ateeq-enquiry-form .form-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.ateeq-enquiry-form .form-control {
    border: 1px solid rgba(var(--primary-color-rgb, 6, 97, 104), .25);
    border-radius: 10px;
    background-color: #fff;
    min-height: 48px;
    padding: 10px 14px;
}

.ateeq-enquiry-form .form-control:focus {
    border-color: var(--ateeq-primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 6, 97, 104), .12);
}

.ateeq-enquiry-form .form-control[readonly] {
    background-color: rgba(var(--primary-color-rgb, 6, 97, 104), .04);
}

.ateeq-enquiry-form [type=submit] {
    display: flex;
    justify-content: center;
    text-align: center;
}

.ateeq-enquiry-form textarea.form-control {
    min-height: 110px;
}

.ateeq-enquiry-form__intro {
    opacity: .85;
}

.ateeq-ajax-form [type=submit].is-loading {
    opacity: .7;
    cursor: progress;
}

.ateeq-enquire-btn {
    margin-inline-start: 10px;
}

.trv-right-tp-part .ateeq-enquire-btn {
    background-color: transparent;
    border: 2px solid var(--ateeq-primary);
    color: var(--ateeq-primary);
}

.trv-right-tp-part .ateeq-enquire-btn:hover {
    background-color: var(--ateeq-primary);
    color: #fff;
}

@media (max-width: 575px) {
    .trv-right-tp-part .site-button {
        flex: 1 1 auto;
        text-align: center;
    }

    .ateeq-enquire-btn {
        margin-inline-start: 8px;
    }

    .ateeq-enquiry-section .ateeq-enquiry-form {
        padding: 18px;
    }
}

.ateeq-enquiry-modal .modal-content {
    border-radius: 20px;
    border: 0;
}

.ateeq-enquiry-modal .modal-header {
    border-bottom-color: rgba(var(--primary-color-rgb, 6, 97, 104), .12);
}

[dir=rtl] .ateeq-enquiry-modal .modal-header .btn-close {
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) auto calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x));
}

.newsletter-form .ateeq-form-alert,
.newsletter-form .ateeq-captcha {
    margin-top: 10px;
}

/* ---------------------------------------------------------------- contact page branches */
.ateeq-branch {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 30px rgba(var(--primary-color-rgb, 6, 97, 104), .14);
}

.ateeq-branch__info {
    padding: 24px 26px 18px;
}

.ateeq-branch__name {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--heading-color, #443935);
}

.ateeq-branch__address {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ateeq-branch__address svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--ateeq-secondary);
}

.ateeq-branch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.ateeq-branch__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--ateeq-primary);
}

.ateeq-branch__action svg {
    width: 18px;
    height: 18px;
}

.ateeq-branch__map {
    flex: 1 1 auto;
    min-height: 280px;
}

.ateeq-branch__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
}

/* ---------------------------------------------------------------- video testimonials */
.ateeq-video-testimonials .swiper {
    padding-bottom: 6px;
}

.ateeq-vt-card {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 30px rgba(var(--primary-color-rgb, 6, 97, 104), .12);
}

.ateeq-vt-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #0b3b40;
    overflow: hidden;
}

.ateeq-vt-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.ateeq-vt-card__media:hover img {
    transform: scale(1.05);
}

.ateeq-vt-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: var(--ateeq-secondary);
    color: #fff;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
}

.ateeq-vt-card__play svg {
    width: 30px;
    height: 30px;
}

.ateeq-vt-card__body {
    padding: 20px 22px 24px;
}

.ateeq-vt-card__rating {
    color: var(--ateeq-secondary);
    margin-bottom: 8px;
}

.ateeq-vt-card__quote {
    margin-bottom: 12px;
}

.ateeq-vt-card__name {
    font-size: 20px;
    margin-bottom: 2px;
}

.ateeq-vt-card__meta {
    font-size: 14px;
    opacity: .8;
}

.ateeq-vt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}

.ateeq-vt-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ateeq-primary);
    background: transparent;
    color: var(--ateeq-primary);
}

.ateeq-vt-nav button:hover {
    background-color: var(--ateeq-primary);
    color: #fff;
}

.ateeq-vt-nav .swiper-pagination-bullet-active {
    background-color: var(--ateeq-primary);
}

.ateeq-vt-pagination {
    position: static !important;
    width: auto !important;
}

[dir=rtl] .ateeq-vt-nav i {
    display: inline-block;
    transform: scaleX(-1);
}

/* Testimonial rating: unfilled stars use the same colour at lower opacity. */
.rating .bi-star {
    opacity: .45;
}

/* Homepage hero (Kaaba photo). Text sits left/centre on desktop and at the top on tablets and phones, so the Kaaba is
   placed where no text, button or decoration covers it: lower left on desktop, bottom of a portrait photo up to 991px.
   The falling-rain decoration is switched off here so nothing passes over the Kaaba. */
.trv-banner-1-wrap .trv-banner-1-rain-effect { display: none; }
@media (max-width: 991px) {
    .trv-banner-1-wrap .trv-vid-full {
        background-image: url('/storage/backgrounds/hero-kaaba-mobile.jpg') !important;
        background-position: center bottom !important;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    /* Text stacks full width with the button under it on the left: keep the Kaaba to the right of the button. */
    .trv-banner-1-wrap .trv-vid-full { background-position: 0% center !important; }
}
@media (min-width: 1601px) {
    /* At 1920 the description started 15px from the Kaaba; give it room. */
    .trv-banner-1-wrap .trv-banner-1-text .trv-banner-text-detail { margin-left: 760px; }
    .trv-banner-1-wrap .trv-banner-1-text .trv-banner-btn { margin-left: 810px; }
}
@media (min-width: 2020px) {
    /* Very wide screens: the regular photo would scale up and slide under the text, so use a wider crop with the
       Kaaba in the middle, kept right of the English text and left of the ring decoration. */
    .trv-banner-1-wrap .trv-vid-full {
        background-image: url('/storage/backgrounds/hero-kaaba-wide.jpg') !important;
        background-position: 0% 100% !important;
    }
}

/* Urdu (RTL) hero. "عمرہ" is far shorter than "Umrah" and Nastaliq uses a tall line height, so the mirrored
   description landed on the Kaaba and the button fell off the bottom of the hero. Tighten the title line, tuck the
   description and button under the end of the title (as in English), and drop the ring decoration, which RTL moves
   on top of the Kaaba. If the Urdu title text changes length, re-check these margins. */
html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-1-text-large,
html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-1-text-large-outline { line-height: 1.4; }
@media (min-width: 641px) and (max-width: 991px) {
    /* Tablets: the portrait photo puts the Kaaba fairly high, so start the text a little higher (both languages). */
    .trv-banner-1-wrap .trv-banner-1-text { padding-top: 120px; }
}
@media (min-width: 992px) and (max-width: 1024px) {
    html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-text-detail { max-width: 400px; }
    html[dir="rtl"] .trv-banner-1-wrap .trv-vid-full { background-position: calc(50% + 94px) center !important; }
}
@media (min-width: 1025px) {
    html[dir="rtl"] .trv-banner-1-wrap .twm-img-bg-circle-area { display: none; }
    html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-text-detail,
    html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-btn { margin-left: 0; margin-right: 200px; }
}
@media (min-width: 1025px) and (max-width: 1366px) {
    /* Keep the Kaaba clear of the WhatsApp button, which sits bottom-left in RTL. */
    html[dir="rtl"] .trv-banner-1-wrap .trv-vid-full { background-position: calc(50% + 70px) center !important; }
}
@media (min-width: 1367px) {
    html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-text-detail,
    html[dir="rtl"] .trv-banner-1-wrap .trv-banner-1-text .trv-banner-btn { margin-right: 300px; }
}
@media (min-width: 2020px) {
    html[dir="rtl"] .trv-banner-1-wrap .trv-vid-full { background-position: 100% 100% !important; }
}

/* Package cards (style 2). INR prices such as ₹8,50,000 are far wider than the theme's 90px price column, so the price
   ran into the description. Use the theme's own stacked layout (its <1200px layout) at every width: price line,
   then the description, then the next departure. */
.trv-popular-tour-st1 .trv-content .trv-content-head-section { display: block; }
.trv-popular-tour-st1 .trv-content .trv-content-head-section .trv-tour-price {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
}
.trv-popular-tour-st1 .trv-content .trv-content-head-section .trv-tour-info { width: 100%; }
.trv-popular-tour-st1 .trv-content .trv-content-head-section .tm-card-departure { margin-top: 10px; }

/* Services section ("Everything arranged for your Umrah"), left column: Masjid al-Haram in a tall arch with a thin gold
   outline behind it, and Masjid an-Nabawi in a white-ringed circle on the arch's lower-left corner, plus a small gold
   dot grid. Every size is a percentage of the column width, so the group scales as one on tablets and phones. The
   circle sits below the level of the Kaaba and only covers the crowd at the photo's left edge. The layout is the same
   in Urdu (the theme's RTL rules are reset here), which keeps the circle off the Kaaba there too. */
.trv-we-off-service .trv-we-off-media {
    position: relative;
    z-index: 1;
    max-width: 526px;
    padding-bottom: 16%;
}
.trv-we-off-service .trv-we-off-media::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 76%;
    aspect-ratio: 5 / 7;
    box-sizing: border-box;
    border: 2px solid #FFAA0D;
    border-radius: 50% 50% 6% 6% / 35.7% 35.7% 4.3% 4.3%;
    z-index: 0;
}
.trv-we-off-service .trv-we-off-media::after {
    content: "";
    position: absolute;
    left: 2%;
    top: 12%;
    width: 15%;
    height: 24%;
    background: radial-gradient(circle, rgba(255, 170, 13, .75) 1.6px, transparent 2.2px) 0 0 / 14px 14px space;
    z-index: 0;
}
.trv-we-off-service .trv-we-off-media .media1 {
    position: relative;
    z-index: 1;
    display: block;
    width: 76%;
    max-width: none;
    height: auto;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    margin: 4.2% 4% 0 auto;
    padding: 0;
    border-radius: 50% 50% 6% 6% / 35.7% 35.7% 4.3% 4.3%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    animation: none;
}
.trv-we-off-service .trv-we-off-media .media2 {
    position: absolute;
    z-index: 2;
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
    width: 42%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-sizing: border-box;
    border: 7px solid #fff;
    border-radius: 50%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    outline: 2px dashed rgba(255, 170, 13, .85);
    outline-offset: 8px;
}
@media (max-width: 991.98px) {
    .trv-we-off-service .trv-we-off-media { margin: 0 auto 40px; }
    .trv-we-off-service .trv-we-off-media .media1 { margin: 4.2% 4% 0 auto; }
    .trv-we-off-service .trv-we-off-media .media2 { left: 0; right: auto; transform: none; }
}
@media (max-width: 575.98px) {
    .trv-we-off-service .trv-we-off-media .media2 { border-width: 5px; outline-offset: 5px; }
}

/* Service cards' corner ribbon. The theme keeps the ribbon on the left in Urdu too, but the label then right-aligns out
   of the triangle onto the background, so lay the ribbon's text out left-to-right. The label also sits a little lower
   and closer to the edge so "Service" stays inside the triangle instead of running onto the white card. */
.trv-servi-bx1 .trv-step-corner-bx .trv-step-corner { direction: ltr; text-align: left; }
.trv-servi-bx1 .trv-step-corner-bx .trv-step-corner span { padding: 50px 6px 0 7px; letter-spacing: 0; }
.trv-servi-bx1 .trv-step-corner-bx .trv-step-corner .number { line-height: 1.2; padding-left: 7px; padding-right: 0; }

/* Stats section: give the parallax photo the same 160px of spare height at every size (the theme's fixed 800px was
   shorter than the section on phones once the counters wrap), so it always covers the section. */
.trv-achivment-section .trv-achivment-row .trv-vid-st2 { height: calc(100% + 160px); }
/* Urdu badge word: Nastaliq is taller than Kaushan Script, so the big highlighted word is a size smaller to stay
   inside the brush shape. */
html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title span { font-size: 78px; }
@media (max-width: 1200px) { html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title span { font-size: 48px; } }
@media (max-width: 480px) { html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title span { font-size: 28px; } }

/* Package list toolbar on phones: the theme's 6 + 4 + 6 columns didn't fit, so "Showing 1 – 8 of 8" ran under the
   view icons and "Sort by" was pushed off the left edge. Filters + count take the first line; view icons and sort
   share the second. */
@media (max-width: 767px) {
    .box-filters > .row > .col-6:first-child { flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 10px; }
    .box-filters > .row > .col-4 { flex: 0 0 auto; width: auto; }
    .box-filters > .row > .col-6:last-child { flex: 1 1 0; width: auto; min-width: 0; }
    .box-filters > .row > .col-6 p { margin-bottom: 0; }
}

/* "Sacred places to visit" strip: a 2x panoramic photo in the theme's 527x190 slot. */
.tvr-pop-search-bot-section .media img { width: 527px; max-width: 100%; height: auto; }
/* Urdu watermark word ("زیارت"): Nastaliq dots hang well below the theme's 0.75 line height and ran into the next
   section; give the line room for them. */
html[lang="ur"] .tvr-large-title-st1 .lg-title { line-height: 1.25; }

/* "How booking works" cards: the illustration and the big step number sat in a row that could not shrink, so below
   1200px the number was pushed out of its card onto the next one (and "03" off the screen). */
.trv-step-st2-bx1 .trv-btm-txt-part .media { flex: 1 1 auto; min-width: 0; }
.trv-step-st2-bx1 .trv-btm-txt-part .bld-num { flex: 0 0 auto; }
@media (max-width: 1199px) {
    .trv-step-st2-bx1 .trv-btm-txt-part .bld-num { font-size: 56px; margin-left: 12px; }
    html[dir="rtl"] .trv-step-st2-bx1 .trv-btm-txt-part .bld-num { margin-left: 0; margin-right: 12px; }
}

/* Urdu paragraphs: urdu.css gives them Nastaliq's line height (2.1), but theme rules such as
   ".trv-step-st2-bx1 .trv-content p { line-height: 1.4 }" are more specific, so wrapped Urdu lines collided inside
   cards. The :not(#…) adds ID-level weight so the Urdu line height always wins. */
html[lang="ur"] body p:not(#ateeq-urdu-lh) { line-height: 2.1; }

/* FAQ photo (arch frame, 2x file) at the theme's original 378px width. */
.trv-faq-left-media-wrap .trv-f-pic img { width: 378px; max-width: 100%; height: auto; }

/* Urdu newsletter headline ("سبسکرائب کریں ابھی!"): the theme's 0.75 line height suits Kaushan Script, not Nastaliq,
   whose two lines collided and whose tops rose out of the box. */
html[lang="ur"] .trv-subscribe-nl .trv-nl-large-text,
html[lang="ur"] .trv-subscribe-nl-st2 .trv-nl-large-text { font-size: 58px; line-height: 1.55; padding-bottom: 6px; }
@media (max-width: 991px) {
    html[lang="ur"] .trv-subscribe-nl .trv-nl-large-text,
    html[lang="ur"] .trv-subscribe-nl-st2 .trv-nl-large-text { font-size: 38px; }
}
@media (max-width: 420px) {
    html[lang="ur"] .trv-subscribe-nl .trv-nl-large-text,
    html[lang="ur"] .trv-subscribe-nl-st2 .trv-nl-large-text { font-size: 26px; }
}

/* Urdu "آپ کا عمرہ" label beside the steps photo: the theme rotates it 90° (unreadable in Nastaliq, and in RTL it was
   cut off at the left edge) and squeezes it into 90px, so in Urdu it sits horizontally, centred under the photo. */
html[lang="ur"] .trv-for-summer-section .trv-for-summer-text-wrap { position: static; width: auto; text-align: center; margin-top: 6px; }
html[lang="ur"] .trv-for-summer-section .trv-for-summer-text-wrap span {
    position: static; transform: none; display: inline-flex; align-items: baseline; gap: 12px; padding: 0;
    font-family: 'Noto Nastaliq Urdu', serif; font-size: 26px; line-height: 2;
}
html[lang="ur"] .trv-for-summer-section .trv-for-summer-text-wrap span b { font-size: 46px; line-height: 1.6; }

/* 404 page photo (arch frame, 2x file) at the original 672px width. */
.page-notfound-media img { width: 672px; max-width: 100%; height: auto; }

/* Inner-page banner plane in Urdu: rtl.css flips the box, the keyframes and the image anchor separately, and the
   combination left the plane parked over the page title. Draw the English animation mirrored as a whole instead,
   so it flies from the title out to the left and settles there. */
@keyframes ateeq-plane-ltr { 0% { transform: translateX(-100%) scale(.2); } to { transform: translateX(50%) scale(1); } }
html[dir="rtl"] .trv-inr-bnr-plane { left: auto; right: 0; direction: ltr; transform: scaleX(-1); transform-origin: 0 50%; }
html[dir="rtl"] .trv-inr-bnr-plane .trv-inr-bnr-plane-bx { animation-name: ateeq-plane-ltr; }
html[dir="rtl"] .trv-inr-bnr-plane img { left: auto; right: -10px; }
/* 404 title: the "0" between the two 4s is an image (it was a hot-air balloon); it is now the digit itself, sized to
   the title's font and sitting on its baseline, without the balloon's bobbing. */
.page-notfound .error-title img { height: 1em; width: auto; max-width: none; margin: 0 .02em; vertical-align: -.19em; animation: none; }

/* Package booking box: the departure option ("Nov 03, 2026 - Nov 17, 2026 — Only 4 seats left") is longer than the
   select on phones; let it wrap instead of being cut (EN) or running off the card (UR). */
.trv-booking-form .bootstrap-select .dropdown-toggle { height: auto; white-space: normal; }
.trv-booking-form .bootstrap-select .filter-option-inner-inner,
.trv-booking-form .bootstrap-select .dropdown-menu li a .text { white-space: normal; overflow: visible; text-overflow: clip; }
.trv-booking-form .bootstrap-select .dropdown-menu { max-width: 100%; }

/* Package pages on phones already have the Book / WhatsApp / Call bar at the bottom, so the floating WhatsApp button
   only duplicated it and covered prices; hide it while that bar is shown (below 992px). */
@media (max-width: 991.98px) {
    body:has(.ateeq-mobile-bar) .ateeq-wa-float { display: none; }
}

/* Package cards, style 1 (/tours, destination and type pages, "You might also like"): the details panel only appears
   on hover. (1) On hover it is now solid, so its text never sits over a visible photo (some photos show the Kaaba).
   (2) Phones and touch screens have no hover, so there the panel sits under the photo and is always visible. */
.trv-popular-tour-st2 .trv-content { background: #066168; backdrop-filter: none; }
@media (hover: none), (max-width: 991.98px) {
    .trv-popular-tour-st2 .trv-content { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; margin-top: 12px; padding: 22px 24px; }
    .trv-popular-tour-st2 .trv-content .trv-content-head-section { margin-bottom: 16px; }
    .trv-popular-tour-st2 .trv-content .trv-content-head-section .trv-tour-duration { margin-left: -24px; }
    html[dir="rtl"] .trv-popular-tour-st2 .trv-content .trv-content-head-section .trv-tour-duration { margin-left: 0; margin-right: -24px; }
}
.trv-popular-tour-st2 .trv-content .tm-card-departure,
.trv-popular-tour-st2 .trv-content .tm-card-departure a { color: rgba(255, 255, 255, .9); }

/* Package page on phones/tablets: the theme put the search sidebar (destination, type, date, pilgrims, cities) above
   the package itself; show the package first and the search after it. */
@media (max-width: 991.98px) {
    .rightSidebar:has(aside.side-bar-filter) { order: 2; }
}
/* Urdu search sidebar on package pages: field values ("تمام منزلیں") were cut by the fixed-height controls. */
html[lang="ur"] .side-bar-filter :is(.form-control, .form-select, .dropdown-toggle, .filter-option, .filter-option-inner-inner) {
    height: auto !important; min-height: 38px; line-height: 1.9 !important; overflow: visible;
}
html[lang="ur"] .side-bar-filter label { line-height: 1.8; }
/* The theme fixes each filter box at 64-80px, which is too short for an Urdu label above an Urdu value. */
html[lang="ur"] .twm-side-filter-form .form-group { height: auto; min-height: 64px; padding-bottom: 8px; }
html[lang="ur"] .twm-side-filter-form .form-group label { margin-bottom: 2px; }

/* Blog post "Related posts": three columns inside the content column left ~160px cards on laptops/tablets, so titles
   wrapped one word per line and the author line ran into the date badge. Use two columns below 1200px. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .trv-related-posts .row > .col-md-4 { flex: 0 0 50%; max-width: 50%; width: 50%; }
}

/* Style-3 cards (destination cards, package card style 3) have a white body, so the theme's white "Explore" /
   "Book Now" outline text was invisible; use the theme's teal there (hover keeps the theme's orange). */
.trv-popular-tour-st3 .site-button.outline.white-txt:not(:hover) { color: #066168; }

/* Homepage "Why pilgrims choose us": the traveller picture above "CALL US" is blank (an off-theme cut-out), which left
   an empty band; drop its slot. */
.trv-whychoose .w-choo-right .media { display: none; }

/* Testimonial slider on tablets/phones: the arrows kept Swiper's absolute position and sat on the reviewer's name;
   place them in a row under the slide. */
@media (max-width: 991.98px) {
    .testimonial-content-sld-control { display: flex; justify-content: center; gap: 12px; margin-top: 16px; width: auto; }
    .testimonial-content-sld-control .swiper-button-prev,
    .testimonial-content-sld-control .swiper-button-next { position: static; inset: auto; transform: none; margin: 0; }
    .testimonial-content-sld-control .swiper-button-prev { order: 1; }
    .testimonial-content-sld-control .swiper-button-next { order: 2; }
}

/* INFO side panel: three INR prices at 34px did not fit side by side ("₹85,000₹1,25,000₹8,50,0…"), so let them wrap
   and size them down. */
.trv-side-pnl-info .trv-side-pnl-plan { flex-wrap: wrap; justify-content: center; gap: 16px 22px; padding-left: 0; }
.trv-side-pnl-info .trv-side-pnl-plan > li { text-align: center; min-width: 0; }
.trv-side-pnl-info .trv-side-pnl-plan .trv-side-pnl-plan-count { font-size: 24px; margin-bottom: 2px; white-space: nowrap; }

/* Blog list cards: the date badge sits in the card's top corner, over the start of the author line on narrow phones;
   keep that line clear of it. */
.trv-blog-st1 .trv-post-info .post-category { padding-right: 46px; white-space: normal; overflow-wrap: anywhere; }
html[dir="rtl"] .trv-blog-st1 .trv-post-info .post-category { padding-right: 0; padding-left: 46px; }

/* Phones: inner-page titles wrap onto two or three lines, and the banner's flying plane then crossed them; hide that
   decoration on phones. The call-to-action paragraph gets side padding there too. */
@media (max-width: 767.98px) {
    .trv-inr-bnr-plane { display: none; }
    .trv-adventure-st1 .adventure-text { padding-left: 16px; padding-right: 16px; }
}

/* Stats section on laptops/tablets: the counter labels are kept on one line and ran into the next column's icon, and
   the badge's big highlighted word reached the edge of the brush. Let labels wrap and give the word its own line. */
.trv-vid-st2-counter .trv-counter-outer-one .trv-icon-content-info { min-width: 0; }
.trv-vid-st2-counter .trv-counter-outer-one .trv-icon-content-info .trv-icon-title { white-space: normal; }
.trv-achivment-section .trv-say-yesbx .say-title span { display: block; }
/* Urdu badge on two lines needs Nastaliq line heights (with the theme's line-height 1 the big word covered the first
   line); on small phones the brush is short, so keep it on one line there. */
html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title { line-height: 1.9; }
html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title span { line-height: 1.35; }
@media (max-width: 480px) {
    html[lang="ur"] .trv-achivment-section .trv-say-yesbx .say-title span { display: inline; }
}
html[lang="ur"] .trv-popular-tour-st1 .trv-content .trv-content-head-section .trv-tour-info { line-height: 1.85; }