/* -----------------------------------------------------------------------------
   Project overrides on top of the Renax theme (css/style.css).
   Keep theme file untouched; put local tweaks here.
----------------------------------------------------------------------------- */

/* Cars listing page — the section's default 120px bottom padding (from
   .section-padding) left a big empty gap under the "Show N per page" row,
   especially when there's only one page of results. Tighten it, same as the
   top override above it in style.css. Doesn't touch the related-cars section
   on car-details, which has its own spacing. */
.cars1.cars-grid.section-padding:not(.related-cars) {
    padding-bottom: 60px;
}

/* Cars card body (cars1) — title + specs on the left, Details button and price
   on the right, on one line and vertically centred. Applies to both the home
   "Luxury Car Fleet" carousel and the Cars listing grid. */
.cars1 .item .con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cars1 .item .con .con-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cars1 .item .con .details {
    margin-top: 6px;
    margin-right: 0;
}

.cars1 .item .con .book {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    text-align: right;
}

.cars1 .item .con .book>div {
    display: block;
    padding: 0;
}

.cars1 .item .con .book .btn {
    white-space: nowrap;
}

/* "You May Also Like" — match the whitespace above the section (gallery -> cards)
   to the whitespace below it (cards -> "Interested in Renting"). The related
   section's own bottom padding stays 120px; trim what sits above it instead. */
.cars1.cars-grid.related-cars.section-padding {
    padding-top: 0;
}

/* Car-details: the body-type eyebrow above the car name — same readable
   gold-eyebrow treatment as elsewhere. */
.car-details .car-head h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 4px;
    color: #d99a2b;
}

/* a little more breathing room between the description and the car image */
.car-details .car-hero-img {
    margin-top: 18px;
}

/* "MORE CARS" eyebrow — bolder + short gold rules on each side so it reads.
   Also applied to the home page's "Browse By Type" heading (".cars-grid"),
   same treatment for both car-card sections. */
.related-cars .section-subtitle,
.cars-grid .section-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #d99a2b;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.related-cars .section-subtitle::before,
.related-cars .section-subtitle::after,
.cars-grid .section-subtitle::before,
.cars-grid .section-subtitle::after {
    content: "";
    width: 28px;
    height: 2px;
    background: #f5b754;
    border-radius: 2px;
}

.car-details.section-padding:has(+ .related-cars) {
    padding-bottom: 55px;
}

/* Cars listing grid + "You May Also Like" — compact card:
   rounded image, category pill, pipe-separated specs, name, price with a
   struck-through original, and a full-width Call / WhatsApp footer. */
.cars-grid .item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    /* no overflow:hidden here — it would clip the hover box-shadow below,
       since a shadow is painted outside the box and gets cut by the same
       element's own overflow. Corners are rounded by .img/.con instead. */
    box-shadow: 0 10px 26px rgba(27, 27, 27, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.cars-grid .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(27, 27, 27, .22);
}

.cars-grid .item .img {
    display: block;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.cars-grid .item .con,
.cars-grid .item .con.active {
    position: static;
    margin: 0;
    padding: 14px 16px 16px;
    background: #f2f2f2;
    border-radius: 0 0 16px 16px;
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
}

.cars-grid .item .con .con-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* category pill — soft tinted, colour keyed to the body type */
.cars-grid .item .con .car-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eef0f2;
    color: #667;
    font-family: 'Outfit', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.5;
}

.cars-grid .item .con .car-cat--suv {
    background: #e9f2e4;
    color: #4e7d3a;
}

.cars-grid .item .con .car-cat--sport {
    background: #fde7ec;
    color: #d43b5f;
}

.cars-grid .item .con .car-cat--coupe {
    background: #e8effc;
    color: #3767c9;
}

.cars-grid .item .con .car-cat--convertible {
    background: #fdf1e0;
    color: #c0801e;
}

.cars-grid .item .con .car-cat--luxury {
    background: #f6ede0;
    color: #b5852f;
}

.cars-grid .item .con .car-cat--sedan {
    background: #ecebfa;
    color: #5b53c9;
}

.cars-grid .item .con .car-cat--hatchback {
    background: #e2f4f1;
    color: #2f8f80;
}

.cars-grid .item .con .car-cat--pickup {
    background: #eceef1;
    color: #5a6672;
}

.cars-grid .item .con .car-cat--van {
    background: #f2e9fb;
    color: #8a45c7;
}

/* specs — pipe separated */
.cars-grid .item .con .details {
    margin-top: 10px;
    display: block;
    white-space: normal;
    font-size: 12.5px;
    color: #555;
    line-height: 1.4;
}

.cars-grid .item .con .details span {
    margin: 0;
    font-size: 12.5px;
    color: #555;
}

.cars-grid .item .con .details span i {
    display: none;
}

.cars-grid .item .con .details span:not(:last-child)::after {
    content: "|";
    margin: 0 7px;
    color: #d5d5d5;
}

/* name */
.cars-grid .item .con .title {
    margin-top: 6px;
}

.cars-grid .item .con .title,
.cars-grid .item .con .title a {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #1b1b1b;
}

/* price line */
.cars-grid .item .con .price-line {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.cars-grid .item .con .price-line .price {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1b1b1b;
}

.cars-grid .item .con .price-line del {
    font-size: 12px;
    color: #c02626;
}

.cars-grid .item .con .price-line .per {
    font-size: 12px;
    color: #555;
}

/* footer — Call + WhatsApp, full width, divider above, pinned to card bottom */
.cars-grid .item .con .book {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e2e2;
    text-align: left;
}

.cars-grid .item .con .book .cbtn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cars-grid .item .con .book .cbtn i {
    font-size: 12px;
}

.cars-grid .item .con .book .cbtn-call {
    background: #f5b754;
    border-color: #f5b754;
    color: #1b1b1b;
}

.cars-grid .item .con .book .cbtn-call:hover {
    background: #1b1b1b;
    border-color: #1b1b1b;
    color: #fff;
}

.cars-grid .item .con .book .cbtn-wa {
    background: #22c15e;
    border-color: #22c15e;
    color: #fff;
}

.cars-grid .item .con .book .cbtn-wa:hover {
    background: #1b1b1b;
    border-color: #1b1b1b;
    color: #fff;
}

/* Uniform card size — the Cars listing grid (#carsGrid, a plain wrapping
   row) and the home page's "Cars By Type" rows (.type-cars-scroll, a native
   scroll-snap row — see below) both use it, so every card everywhere is the
   same fixed image area and overall height, no matter the source photo's
   aspect ratio. */
.cars-grid #carsGrid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.cars-grid #carsGrid>[class*="col-"] {
    display: flex;
    margin-bottom: 26px;
}

.cars-grid #carsGrid .item,
.cars-grid .type-cars-scroll .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

/* Fixed image box — cover-cropped so tall and wide photos look identical. */
.cars-grid #carsGrid .item .img,
.cars-grid .type-cars-scroll .item .img {
    height: 190px;
    flex: 0 0 auto;
}

.cars-grid #carsGrid .item .img img,
.cars-grid .type-cars-scroll .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body fills the leftover height so every card ends at the same line. */
.cars-grid #carsGrid .item .con,
.cars-grid .type-cars-scroll .item .con {
    flex: 1 1 auto;
}

/* Keep the name to two lines max so cards stay even. */
.cars-grid #carsGrid .item .con .title a,
.cars-grid .type-cars-scroll .item .con .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {

    .cars-grid #carsGrid .item .img,
    .cars-grid .type-cars-scroll .item .img {
        height: 200px;
    }
}

@media (max-width: 575px) {

    .cars-grid #carsGrid .item .img,
    .cars-grid .type-cars-scroll .item .img {
        height: 210px;
    }
}

/* Home — "Cars By Type" rows. A native "overflow-x: auto" row instead of a
   JS carousel: trackpad swipe, touch swipe and the mouse wheel all move it
   through the browser's own scroll handling (real inertia, genuinely
   smooth). Click-and-drag for a plain desktop mouse is added in custom.js.
   No "scroll-snap" here on purpose — it fights a JS-driven scrollLeft
   change (Chrome snaps the position back before the move even registers),
   which would have broken the click-drag script below the same way. */
.type-cars-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding-bottom: 4px;
    /* hide the scrollbar (Firefox, then Chrome/Safari/Edge below) — the
       swipe/drag/wheel gesture is the affordance, same as the other
       carousels on this page */
    scrollbar-width: none;
}

.type-cars-scroll::-webkit-scrollbar {
    display: none;
}

.type-cars-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.type-cars-scroll .item {
    flex: 0 0 auto;
    width: 100%;
}

/* ".cars-grid .type-cars-scroll .item" above (3 classes) also sets width,
   at higher specificity than a plain ".type-cars-scroll .item" (2 classes)
   — these need the same "cars-grid" prefix or they lose that fight and the
   breakpoints below silently never apply, no matter the viewport. */
@media (min-width: 600px) {
    .cars-grid .type-cars-scroll .item {
        width: calc((100% - 20px) / 2);
    }
}

@media (min-width: 992px) {
    .cars-grid .type-cars-scroll .item {
        width: calc((100% - 40px) / 3);
    }
}

@media (min-width: 1200px) {
    .cars-grid .type-cars-scroll .item {
        width: calc((100% - 60px) / 4);
    }
}

/* Home — "Cars By Type": one stacked "<Type> Car Rental" heading per
   section, the type name picking up the site's usual gold accent (plain
   "h3" has no span-highlight rule of its own — that's only defined on
   ".section-title" in style.css, which is sized for one big per-section
   title, not repeated per type). */
.type-heading span {
    color: #f5b754;
}

@media (max-width: 767px) {
    .type-heading {
        text-align: center;
    }
}

/* "You May Also Like" — same card look as the listing grid, but as a
   one-row carousel instead of wrapping to a second, unbalanced row. */
.related-cars-carousel {
    position: relative;
}

.related-cars-carousel .owl-stage {
    display: flex;
}

.related-cars-carousel .owl-item {
    display: flex;
    height: auto;
}

.related-cars-carousel .item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.related-cars-carousel .item .img {
    height: 190px;
    flex: 0 0 auto;
}

.related-cars-carousel .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-cars-carousel .item .con {
    flex: 1 1 auto;
}

.related-cars-carousel .item .con .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Centred on the image (190px, see ".item .img" above), not the whole card —
   so the arrows sit inside the photo like the Image Gallery's do, instead of
   floating over the title/price area below it. */
.related-cars-carousel .owl-nav {
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    margin: 0;
    z-index: 3;
    pointer-events: none;
}

/* !important throughout this block: the section also carries the theme's
   "cars1" class (for its card look), and ".cars1 .owl-theme .owl-nav
   [class*=owl-]" in style.css — meant for a different carousel — has higher
   specificity than a plain class selector here, so it silently wins over
   width/background/opacity unless we force it. That leak is also why the
   enabled/disabled contrast never showed: both buttons rendered identically. */
.related-cars-carousel .owl-nav button.owl-prev,
.related-cars-carousel .owl-nav button.owl-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    opacity: 1 !important;
    pointer-events: auto;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #f5b754 !important;
    color: #1b1b1b !important;
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background-color .2s ease, color .2s ease;
}

.related-cars-carousel .owl-nav button.owl-prev:hover,
.related-cars-carousel .owl-nav button.owl-next:hover {
    background: #1b1b1b !important;
    color: #fff !important;
}

.related-cars-carousel .owl-nav button.owl-prev {
    left: 14px;
}

.related-cars-carousel .owl-nav button.owl-next {
    right: 14px;
}

.related-cars-carousel .owl-nav button.disabled {
    background: #e2e2e2 !important;
    color: #9a9a9a !important;
    box-shadow: none;
    cursor: default;
}

/* ".cars1 .owl-theme .owl-nav { display: none }" in style.css (meant for a
   different carousel, same leaked-class issue as above) hides nav entirely
   below 992px — force it back on so the arrows still work on tablet/mobile. */
@media screen and (max-width: 991px) {
    .related-cars-carousel .owl-nav {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .related-cars-carousel .owl-nav button.owl-prev {
        left: 8px;
    }

    .related-cars-carousel .owl-nav button.owl-next {
        right: 8px;
    }
}

/* Car details — Image Gallery: 3-up carousel of large cards + a thumbnail strip
   below that works like dots (click a thumb to jump to that slide). */
.car-details .car-gallery-carousel .gallery-box {
    border-radius: 14px;
    overflow: hidden;
}

.car-details .car-gallery-carousel .gallery-img img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

@media (max-width: 767px) {
    .car-details .car-gallery-carousel .gallery-img img {
        height: 200px;
    }
}

/* Prev/Next sit on the left/right edge of the main gallery, overlaid on the
   image row and vertically centred — not centred below it. */
.car-details .car-gallery-carousel {
    position: relative;
}

.car-details .car-gallery-carousel .owl-nav {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    margin: 0;
    z-index: 3;
    /* the nav band itself shouldn't block clicks on the image behind it —
       only the two round buttons should be clickable */
    pointer-events: none;
}

.car-details .car-gallery-carousel .owl-nav button.owl-prev,
.car-details .car-gallery-carousel .owl-nav button.owl-next {
    /* .owl-prev/.owl-next also carry the theme's float:left/float:right —
       undo that so they're two circles pinned to the edges instead. Hidden
       until the gallery is hovered, then faded in. */
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    float: none !important;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease;
    pointer-events: auto;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    background: #f5b754;
    color: #1b1b1b;
    font-size: 14px;
    line-height: 38px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.car-details .car-gallery-carousel:hover .owl-nav button.owl-prev,
.car-details .car-gallery-carousel:hover .owl-nav button.owl-next {
    opacity: 1;
}

/* clear feedback on which arrow you're about to click */
.car-details .car-gallery-carousel .owl-nav button.owl-prev:hover,
.car-details .car-gallery-carousel .owl-nav button.owl-next:hover {
    background: #1b1b1b;
    color: #fff;
}

/* At the start, "prev" has nothing before it, so Owl marks it .disabled —
   likewise "next" at the end. Show that one dimmed/greyed and unclickable
   so it's clear which arrow is actually active. */
.car-details .car-gallery-carousel .owl-nav button.disabled {
    /* pointer-events stays "auto" (not none): the button still needs to
       catch the click and swallow it — Owl itself won't move past the
       boundary. If it didn't catch the click, the click fell through to
       the image underneath and opened the lightbox instead. */
    background: #e2e2e2;
    color: #9a9a9a;
    box-shadow: none;
    cursor: default;
}

.car-details .car-gallery-carousel:hover .owl-nav button.disabled {
    opacity: .6;
}

.car-details .car-gallery-carousel .owl-nav button.owl-prev {
    left: 14px !important;
}

.car-details .car-gallery-carousel .owl-nav button.owl-next {
    right: 14px !important;
}

/* Thumbnail strip (replaces the dots) — one-row owl slider under the
   gallery, same width as the gallery above it. No prev/next buttons here —
   it's navigated by mouse-wheel/trackpad (see the "wheel" handler in the
   page script) or by dragging/clicking a thumb; nav is off in the JS init. */
.car-details .car-gallery-thumbs {
    margin-top: 18px;
}

.car-details .car-gallery-thumbs .car-gallery-thumb {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.car-details .car-gallery-thumbs .car-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.car-details .car-gallery-thumbs .car-gallery-thumb:hover {
    opacity: 1;
}

.car-details .car-gallery-thumbs .car-gallery-thumb.active {
    opacity: 1;
    border-color: #f5b754;
}

/* keep the lightbox link above the carousel stage so the whole image is clickable */
.car-details .car-gallery-carousel .car-gallery-link {
    position: relative;
    z-index: 2;
    display: block;
}

/* Header & Footer Logo sizing */
.logo-wrapper {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 240px;
    max-height: 85px;
    height: auto;
    object-fit: contain;
    display: block;
}

.nav-scroll .logo-img {
    width: 220px;
    max-height: 85px;
    height: auto;
    object-fit: contain;
}

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

    /* The theme's own mobile ".logo-img { width: 130px }" rule (style.css)
       assumed a wide/short wordmark logo. Ours is near-square (3160x2120),
       so sizing by width alone still makes it ~87px tall — taller than the
       85px mobile navbar bar, which pushes the toggler button (a flex
       sibling of .logo-wrapper in Bootstrap's navbar) onto its own wrapped
       line below the logo instead of beside it. Sizing by height instead,
       with tighter wrapper padding, keeps the whole row inside the bar. */
    .logo-wrapper,
    .nav-scroll .logo-wrapper {
        padding: 10px 15px;
    }

    .logo-img,
    .nav-scroll .logo-img {
        width: auto;
        height: 50px;
        max-height: 50px;
        max-width: 160px;
    }
}

.footer-logo {
    width: 220px;
}

.footer-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Booking form — Pick Up / Drop Off Time: plain text inputs (not
   type="time") so the "Pick Up Time" / "Drop Off Time" placeholder actually
   shows, same as every other field in this form. Swap the date fields'
   calendar glyph (".input1_inner:after" in style.css) for a clock to match. */
.input1_inner.time-input:after {
    content: "\e72b";
}

/* Dropdown opened by ".timepicker" in custom.js — a list of half-hour slots,
   styled to match the jQuery UI datepicker popup used for the date fields. */
.timepicker-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    z-index: 999999;
    padding: 6px 0;
}

.timepicker-option {
    padding: 9px 20px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
}

.timepicker-option:hover {
    background: #f5b754;
    color: #1b1b1b;
}

/* Booking form — server-side validation errors (custom.js renders these
   below whichever field BookingCreateView's JSON response flagged).
   A plain <input>/textarea normally carries "margin-bottom: 15px" (style.css)
   and a wrapped time/date field's ".input1_wrapper" carries its own 15px —
   that gap landed BETWEEN the field and its own error (pushing the error
   away from the field it belongs to) while nothing separated the error from
   the next field below, so it read as attached to the wrong one. Shrink that
   gap so the error hugs its own field, and move the 15px to the error's own
   bottom margin so that separation now falls where it's needed: before the
   next field starts. */
.booking-form .has-error input,
.booking-form .has-error textarea,
.booking-form .has-error .input1_wrapper {
    margin-bottom: 2px;
}

.booking-form .field-error {
    margin: 4px 0 15px 20px;
    color: #dc3545;
    font-size: 12px;
}

.booking-form .has-error input,
.booking-form .has-error textarea,
.booking-form .has-error .select2-selection {
    box-shadow: 0 0 0 2px #dc3545 inset;
}

/* Booking form — Phone: country flag + dial code (intl-tel-input), reskinned
   to match this form's plain white pill inputs instead of the plugin's own
   bordered-rectangle default look. The plugin measures the flag/code chip
   itself and sets "padding-left" on the input inline via JS, so that one
   side is left out of the "padding" shorthand below on purpose — the inline
   style already wins over it. */
.booking-form .iti {
    display: block;
    width: 100%;
    /* the phone <input> inside loses its usual 15px bottom margin, so the
       wrapper carries it — same gap below Phone as below every other field */
    margin-bottom: 15px;
}

.booking-form .iti__tel-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 18.5px 20px;
    height: auto;
    background-color: #fff;
    box-shadow: none;
    display: block;
    line-height: 1.5em;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    border: none;
    border-radius: 30px;
}

.booking-form .iti__selected-country {
    border-radius: 30px 0 0 30px;
    padding-left: 18px;
}

.booking-form .iti__selected-country:hover,
.booking-form .iti__selected-country:focus {
    background-color: #f2f2f2;
}

.booking-form .iti__selected-dial-code {
    color: #555;
    font-size: 14px;
}

.booking-form .iti__country-list {
    border-radius: 14px;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* The actual floating, positioned box is ".iti__dropdown-content" (the list
   above is "position: static", so a z-index on it alone does nothing) — its
   library default (z-index: 2) loses to "z-index: 99999" that style.css puts
   on every OTHER modal field ("Pick Up Time" etc.), so the dropdown rendered
   underneath them. */
.booking-form .iti__dropdown-content {
    z-index: 999999;
}

.booking-form .has-error .iti__tel-input {
    box-shadow: 0 0 0 2px #dc3545 inset;
}

/* Brand logos carousel — "style.css" sizes the <a> itself to the full slide
   cell (width:100%, height:115px) so it's centred by the outer flexbox,
   but that also makes the WHOLE cell clickable, not just the visible logo —
   clicking the empty padding beside a narrow logo still navigated. Shrink
   the link back down to just its content (the <img>); the outer
   ".clients-logo" is still the full cell and still centres the link inside
   it, so the logo stays visually centred either way. */
.clients .clients-logo a {
    display: inline-flex;
    width: auto;
    height: auto;
}

/* Home hero slider — on phones, centre the text/buttons instead of the
   theme's default left alignment (tablet/desktop are already fine). */
@media (max-width: 767px) {
    .header .caption {
        text-align: center;
    }

    .header .caption .button-1,
    .header .caption .button-2 {
        margin-left: 7px;
        margin-right: 7px;
    }
}

/* The slide box is 100vh tall but far narrower than that on phones AND
   tablets — an extreme portrait box next to the car photos' own landscape
   (~3:2) shape, cropping most of the car away top/bottom. "contain" (tried
   first) showed the whole car but left tall black letterbox bars above/
   below it, with the caption text overlaid on those bars instead of the
   photo. Sizing the box close to the photos' own ratio instead lets
   "cover" fill it edge to edge (no bars) while only trimming a little off
   the sides. */
@media (max-width: 991px) {
    .header.slider-fade {
        height: 400px;
    }

    .slider-fade .owl-item {
        height: 400px;
    }

    .slider-fade .item {
        background-size: cover;
        background-position: center;
    }
}

/* Phones: matches the "Cars By Type" card height (image + info block,
   measured ~422px at 320px wide) so the hero doesn't look squat next to
   them. A blurred-backdrop layer (tried here) avoided cropping the car
   but read as an ugly border on some photos (e.g. one shot square-on
   against trees) — plain "cover" with no border at all, full car photo
   edge to edge, was the version actually wanted, cropping the sides a
   little being the accepted trade-off. */
@media (max-width: 767px) {

    .header.slider-fade,
    .slider-fade .owl-item {
        height: 420px;
    }

    .slider-fade .item {
        background-size: cover;
        background-position: center;
    }

    .slider-fade .owl-theme .owl-dots {
        bottom: 10px;
    }
}

/* Below ~420px the two hero buttons side by side (their own padding +
   margins) add up to more than the viewport, so a plain centered
   inline-block pair let "Rent Now" run off the right edge. Lay them out
   as a flex row instead so wrapping/width is predictable, with smaller
   padding/gap to fit, nudged left of dead-centre. */
@media (max-width: 420px) {
    .hero-buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-right: 30px;
    }

    .header .caption .button-1,
    .header .caption .button-2 {
        margin: 0;
        padding: 14px 26px;
    }
}

/* Footer "Call us / Write to us / Address" row — on phones (already
   stacked into one column by style.css's own max-width:767px rule above)
   also centre each icon + its title + value, instead of the desktop
   icon-left/text-right row. Explicit "width: 100%" on the wrapper/content
   because they're flex items shrink-wrapped to content ("align-items:
   center", theme default) — the number/email text is one unbreakable
   run, so without it the box (and the "centred" text inside) only ever
   sized itself to the shorter title above, not the wider line below. */
@media (max-width: 767px) {
    .footer-contact-link-wrapper {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .image-wrapper.footer-contact-link-icon {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .footer-contact-link-content {
        width: 100%;
    }
}

/* Footer link columns — "Quick Links" 2 per row instead of one long
   stacked column; "Our Services"/"Get in Touch" one per row (their
   values run longer — services names, a phone number/email/address —
   and don't pair up well in two columns). All three centred, headings
   included. */
@media (max-width: 767px) {
    .footer-links-grid ul {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 8px 28px;
    }

    .footer-links-grid ul li,
    .footer-links-center ul li {
        text-align: center;
    }

    /* ".footer .usful-links ul" (style.css) sets "margin: 0" at higher
       specificity than a single ".footer-links-center ul" class would —
       match it with ".footer" in the selector so this auto-margin wins. */
    .footer .footer-links-center ul {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-links-grid .widget-title,
    .footer-links-center .widget-title {
        text-align: center;
    }

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

/* Large phones / small tablets — enough width for all three footer link
   columns side by side instead of style.css's 2 + 1 wrap. */
@media (min-width: 576px) and (max-width: 1199px) {

    /* Bootstrap caps ".container" at 540px/720px here and centres it —
       use the full screen width for the footer instead. */
    .footer .container {
        max-width: none;
    }

    /* Three exactly equal columns, each heading centred in its own —
       so the three headings sit at equal intervals whatever the lists
       under them hold (sizing columns to content let the long email
       widen "Get in Touch" and push its heading further away). */
    .second-footer>.row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    }

    .second-footer>.row>[class*="col-"] {
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .footer .second-footer .widget .widget-title {
        text-align: center;
    }

    .footer .second-footer .usful-links ul {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .footer .second-footer .usful-links ul li {
        text-align: center;
    }
}

/* Tablets — same model as desktop (style.css "Footer alignment model"):
   logo + the three contact items in ONE row, and the three link columns
   below lined up under those items (Call us -> Quick Links, Write to us ->
   Our Services, Address -> Get in Touch). Both rows share one grid: a
   logo-width lead cell + three equal cells. Each contact item stacked —
   icon, then title, then value — all centred. */
@media (min-width: 768px) and (max-width: 1199px) {

    .first-footer-inner,
    .second-footer>.row {
        display: grid;
        grid-template-columns: 120px repeat(3, minmax(0, 1fr));
        column-gap: 16px;
        margin-left: 0;
        margin-right: 0;
    }

    /* items top-aligned so the three icons stay level even when one
       item's text (admin-edited) wraps to more lines than the others */
    .first-footer-inner {
        align-items: start;
    }

    .first-footer-inner .footer-brand {
        align-self: center;
    }

    .first-footer-inner .footer-brand img,
    .first-footer-inner .footer-brand .logo-img {
        width: 50px !important;
        padding: 8px;
        border-radius: 12px;
    }

    .first-footer-inner .footer-contact-link-wrapper {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .first-footer-inner .image-wrapper.footer-contact-link-icon {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .first-footer-inner .footer-contact-link-content {
        width: 100%;
    }

    .first-footer-inner .footer-contact-link-wrapper p,
    .footer .usful-links ul li a {
        font-size: 13px;
    }

    /* empty lead cell under the logo (style.css hides it at <=991px) */
    .second-footer>.row::before {
        display: block;
        content: "";
    }
}

/* narrowest tablets: the email is one unbreakable run, trim text a touch */
@media (min-width: 768px) and (max-width: 860px) {

    .first-footer-inner .footer-contact-link-wrapper p,
    .footer .usful-links ul li a {
        font-size: 12px;
    }
}

/* Below tablet width space is tight: Quick Links back to one link per row,
   slightly smaller link text, so all three still fit side by side. */
@media (min-width: 576px) and (max-width: 767px) {
    .footer .second-footer .widget .widget-title {
        font-size: 18px;
    }

    .footer-links-grid ul {
        grid-template-columns: auto;
    }

    .footer .usful-links ul li a {
        font-size: 12px;
    }
}

/* Mobile (576–767px): drop Bootstrap's ".container { max-width: 540px }"
   so content uses the full screen width instead of a narrow centred
   540px column with empty bands either side. Tablet/desktop keep
   Bootstrap's own container widths. */
@media (min-width: 576px) and (max-width: 767px) {

    .container,
    .container-sm {
        max-width: none;
    }
}

/* Services page, mobile + tablet — centre the plan cards (icon, title, blurb)
   and the plan's long-form headings/paragraphs below them. Bulleted/
   numbered lists inside ".plan-content" stay left-aligned: centred lines
   with bullets end up at ragged, hard-to-scan positions. */
@media (max-width: 991px) {
    .plan-tab {
        text-align: center;
    }

    .plan-content h1,
    .plan-content h2,
    .plan-content h3,
    .plan-content h4,
    .plan-content p {
        text-align: center;
    }
}

/* Cars/Services filter — select2 appends an empty inline
   "<span class="dropdown-wrapper">" after the selection box; as an inline
   box it still opens a text line (~27px at the body's 1.95em line-height),
   so the Brands cell came out 83px tall instead of 56px, leaving a bigger
   gap under "All Brands" than between the other fields. */
.cars1 .car-filter .select2-container .dropdown-wrapper {
    display: none;
}

/* Filter box — same 30px gap below it as above it (plan cards' mb-30 on
   Services) and between the car cards (mb-30), instead of style.css's 55px. */
.cars1 .car-filter {
    margin-bottom: 30px;
}

/* Filter, 2-column layout (576–991px): the price range cell spans the full
   row like the Search button, instead of sitting alone in half a row. */
@media (max-width: 991px) {
    .cars1 .car-filter .filter-field:has(.range-field) {
        grid-column: 1 / -1;
    }
}

/* Services — the plan's long-form text sat only ~5px under the
   "Show N per page" row while that row sits 35px under the car cards;
   match it (27px + the heading's own ~3px line-height lead = 35px of
   visible space, same as above the row). */
.plan-content {
    margin-top: 27px;
}

/* Services, mobile + tablet — the plan's lists and the short labels over
   them ("UAE Residents", "Tourists / Visitors") share ONE centred column
   with a common left edge, so every list's bullets line up and each label
   sits directly over its own list.
   The plan text is edited in admin, so nothing here depends on specific
   wording: a "label" is any bold-only paragraph or small heading (h3–h6)
   that is IMMEDIATELY followed by a list; any other paragraph/heading
   keeps the normal centred text. */
@media (max-width: 991px) {

    .plan-content ul,
    .plan-content ol,
    .plan-content p:has(> strong:only-child):has(+ ul, + ol),
    .plan-content :is(h3, h4, h5, h6):has(+ ul, + ol) {
        width: 100%;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .plan-content p:has(> strong:only-child):has(+ ul, + ol) {
        margin-top: 22px;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .plan-content h5,
    .plan-content h6 {
        text-align: center;
    }

    .plan-content :is(h3, h4, h5, h6):has(+ ul, + ol) {
        text-align: left;
    }
}

/* Admin-edited text must never widen the page, whatever gets typed in:
   long words / URLs / emails wrap instead of running off the edge, images
   shrink to fit, and a wide table scrolls inside its own box. Same for the
   admin-managed footer values (contact details, service names), which
   only just fit their columns at some tablet widths. */
.plan-content {
    overflow-wrap: anywhere;
}

.plan-content img,
.plan-content video,
.plan-content iframe {
    max-width: 100%;
    height: auto;
}

.plan-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.footer .usful-links ul li a,
.footer-contact-link-content p,
.footer-contact-link-content h6 {
    overflow-wrap: anywhere;
}

/* Services — price table. style.css's "overflow: hidden" (for the rounded
   corners) beat Bootstrap's ".table-responsive" scroll, so on narrow
   screens the Weekly/Monthly columns were simply cut off. Let it scroll
   sideways instead of clipping, at any width. */
.plan-price-table {
    overflow-x: auto;
}

@media (max-width: 991px) {
    .plan-table-heading {
        text-align: center;
    }
}

/* Phones/tablets — keep the normal table and let it scroll sideways
   (the box scrolls, the page doesn't). Cells don't wrap, so every column
   keeps its natural width instead of being squeezed; a little less
   padding so more of it fits before scrolling is needed. */
@media (max-width: 991px) {
    .plan-price-table {
        -webkit-overflow-scrolling: touch;
    }

    .plan-price-table table {
        width: max-content;
        min-width: 100%;
    }

    .plan-price-table th,
    .plan-price-table td {
        white-space: nowrap;
        padding: 16px 20px;
    }
}

/* FAQs (Services, car details, blog post) — mobile: heading centred, and
   the accordions full width. style.css stacks the two FAQ columns with
   "flex-direction: column" but keeps "align-items: flex-start", which in a
   column layout shrinks each column (and so each accordion) to its own
   text width instead of the full row. */
@media (max-width: 991px) {
    .faq-title {
        text-align: center;
    }
}

@media (max-width: 767px) {

    /* no extra gap where the two stacked columns meet — each accordion
       already carries its own bottom margin */
    .faq-columns {
        align-items: stretch;
        gap: 0;
    }
}

/* FAQ accordions (Services, car details, blog post) — every closed item is
   the same height whatever the question's length: a fixed-height header
   with the question vertically centred, held to 2 lines ("…" beyond that).
   Opening an item releases it, so the full question is always readable. */
.faq-columns .accordion-box .block .acc-btn {
    display: flex;
    align-items: center;
    height: 66px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.35;
}

.faq-columns .acc-btn .acc-q {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.faq-columns .accordion-box .block .acc-btn.active {
    height: auto;
    min-height: 66px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.faq-columns .acc-btn.active .acc-q {
    -webkit-line-clamp: unset;
    line-clamp: none;
}

/* chevron centred on the (now fixed-height) header instead of pinned 24px
   from the top */
.faq-columns .accordion-box .block .acc-btn:before {
    top: 50%;
    transform: translateY(-50%);
}

/* Services — price table's "Show N per page" row: same 35px of space above
   (from the table) and below (to the FAQ heading) as the car grid's own
   per-page row has under the cards. */
.plan-table-pagination {
    margin-top: 30px;
}

.faq-title-row {
    margin-top: 27px;
}

/* Blog listing — the theme's 120px ".section-padding" left big empty gaps:
   40px under the navbar, and 45px from the "per page" row to the footer
   (the same 45px that sits between the last card and the pagination). */
.blog-listing.section-padding {
    padding-top: 40px;
    padding-bottom: 45px;
}


/* Blog post page — same 40px gap under the navbar as the Blog listing
   (theme's ".section-padding" gives 120px); and on mobile + tablet the
   category pill, title and date/views line centred. */
.post.section-padding {
    padding-top: 40px;
    padding-bottom: 45px;
}

@media (max-width: 991px) {
    .post .col-md-12:has(> .blog-post-title) {
        text-align: center;
    }

    .blog-post-meta {
        justify-content: center;
    }
}

/* Long-form text — blog posts AND the Services page plan content (both
   ".plan-content"), mobile + tablet: a single readable article column — max 720px wide, centred on
   the page, with everything inside it (headings, paragraphs, lists)
   left-aligned on one common edge. Overrides the earlier rules above that
   centred headings/paragraphs and floated lists as separate centred
   blocks, which mixed alignments line by line. Works for any
   admin-edited text: nothing depends on specific headings or wording. */
@media (max-width: 991px) {
    .plan-content {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .plan-content :is(h1, h2, h3, h4, h5, h6, p, ul, ol),
    .plan-content :is(h3, h4, h5, h6):has(+ ul, + ol),
    .plan-content p:has(> strong:only-child):has(+ ul, + ol) {
        text-align: left;
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .plan-content ul,
    .plan-content ol {
        padding-left: 20px;
    }
}

/* FAQ columns — no default list bottom margin after the FAQs (it only
   added dead space before whatever follows them); when the two columns
   stack on mobile, keep one 15px gap between them — same as between
   the accordions themselves. */
.faq-columns .accordion-box {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .faq-columns .accordion-box:first-child {
        margin-bottom: 15px;
    }
}

/* Car details — spec rows: one flex line per row (icon + label on the left,
   value on the right, vertically centred). style.css's 50/50 grid let long
   labels ("Transmission", "Engine Power") wrap under their icon and left
   the value misaligned; values can be any admin-entered text, so they
   wrap within their own space instead of pushing the row. */
.car-details .sidebar-car .item .features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.car-details .sidebar-car .item .features span {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.car-details .sidebar-car .item .features span i {
    margin-right: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.car-details .sidebar-car .item .features p {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* "Inquire Now" & "WhatsApp" — two equal halves side by side with the "&"
   badge centred on the join (style.css positioned it with a fixed offset
   that only matched one button width, and let the pair wrap on phones). */
.car-details .btn-double {
    display: flex;
}

.car-details .btn-double>a {
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 8px;
    white-space: nowrap;
}

/* keep each label clear of the centred "&" badge */
.car-details .btn-double>a:nth-of-type(1) {
    padding-right: 20px;
}

.car-details .btn-double>a:nth-of-type(2) {
    padding-left: 20px;
}

.car-details .btn-double:before {
    top: 50%;
    margin-left: -15px;
    transform: translateY(-50%);
    z-index: 1;
}

/* Car details — mobile + tablet: heading block, description and
   "Image Gallery" heading centred. */
@media (max-width: 991px) {

    .car-details .car-head,
    .car-details .car-head+.row,
    .car-details .car-hero-img+.row {
        text-align: center;
    }
}

/* Car details, mobile + tablet — the specs card stacks directly above the
   FAQ heading with only ~2px between them; give it the site's usual 45px
   section gap. (Desktop has the card in a side column, so it's not
   directly above the heading there.) */
@media (max-width: 991px) {
    .car-details .faq-title {
        margin-top: 23.5px;
        margin-bottom: 26px;
    }
}

/* Car details, mobile + tablet — gallery thumbnails → price card: was ~100px
   (gallery row's mb-60 + the card's own top margin, which is set in
   car-details.html's own <style> block); now ~31px, the same visible gap
   as from the card down to the FAQ heading. */
@media (max-width: 991px) {
    .car-details .row.mb-60:has(.car-gallery) {
        margin-bottom: 0 !important;
    }
}

/* Booking datepicker — past days (and, for Return Date, days before the
   chosen Pick Up Date) can't be picked; make that visible, not just inert. */
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-state-disabled span {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Contact cards — 2 cards per row on tablet / medium-large screens (576px to 1199px, including 995px) */
@media (min-width: 576px) and (max-width: 1199px) {
    .contact-box .row>div {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Equal card height per row */
.contact-box .row>div {
    display: flex;
}

.contact-box .item {
    width: 100%;
}

/* Contact cards — center icon, title, and text on mobile and tablet screens (up to 1199px) */
@media (max-width: 1199px) {
    .contact-box .item {
        text-align: center;
        padding: 30px 20px;
        margin-bottom: 15px;
    }

    .contact-box .item span {
        margin-left: auto;
        margin-right: auto;
    }

    /* Reduce gap between cards and "Get in touch" section */
    section.contact.section-padding {
        padding-top: 0px;
    }

    /* Center the Send Message button */
    .contact .form-box .row>.col-md-12:last-child {
        text-align: center;
    }

    /* Match spacing between Send Message and Location with the spacing above Get in touch */
    .contact .row>.col-lg-6.col-md-12.mb-30 {
        margin-bottom: 15px !important;
    }

}

/* Align footer inner items from top on desktop so all titles line up.
   Keeps style.css's shared grid (--footer-grid) so each icon sits exactly
   above its link column. */
@media (min-width: 1200px) {
    .first-footer-inner {
        display: grid !important;
        align-items: flex-start !important;
    }

    .footer-contact-link-wrapper {
        align-items: flex-start !important;
    }

    .first-footer-inner .footer-brand {
        align-items: center !important;
    }
}

/* Contact form — ensure consistent spacing for phone and message fields */
.contact .form-box .iti {
    margin-bottom: 15px;
}

.contact .form-box textarea {
    margin-bottom: 15px;
}

/* Match the gap between "Location" and the map with the gap under "Get in touch" */
.contact .google-map {
    margin-top: 15px;
}

/* Custom Logo Layout (Header and Footer) */
.logo,
.footer-brand {
    display: flex !important;
    align-items: center;
    gap: 15px;
}

.logo-img,
.logo .logo-img,
.footer-brand .logo-img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(223, 177, 98, 0.4) !important;
    background: linear-gradient(135deg, #222, #0d0d0d) !important;
    padding: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.logo-text h2 {
    font-size: 16px !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    width: auto !important;
    display: inline-block !important;
}

.logo-text h6 {
    font-size: 11px !important;
    font-weight: 400;
    margin: 0;
    letter-spacing: 2px;
    color: #f5b754;
    text-transform: uppercase;
}

.nav-scroll .logo .logo-text h2 {
    color: #fff !important;
}

/* Keep header logo background same as footer on scroll */
.nav-scroll .logo-img {
    background: linear-gradient(135deg, #222, #0d0d0d) !important;
    border: 1px solid rgba(223, 177, 98, 0.4) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Footer Logo Global Styles (Desktop) */
.footer-brand {
    flex-direction: row !important;
    align-items: center;
    text-align: left;
    padding-left: 20px;
}

.footer-brand .logo-text {
    align-items: flex-start;
    text-align: left;
    padding-left: 5px;
}

.footer-brand .logo-text h2 {
    font-size: 14px !important;
    letter-spacing: 0.5px;
    line-height: 1.1;
    white-space: nowrap;
}

.footer-brand .logo-text h6 {
    font-size: 7px !important;
    letter-spacing: 0px;
}

.footer-brand .logo-img {
    width: 50px !important;
    padding: 8px;
    border-radius: 12px;
    margin-bottom: 5px;
}

@media (max-width: 1199px) {

    /* Footer Logo (Tablet and Mobile) */
    .footer-brand {
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .footer-brand .logo-text {
        align-items: center;
        text-align: center;
    }

    .footer-brand .logo-text h2 {
        white-space: nowrap;
    }
}



@media (max-width: 767px) {

    /* Header Logo */
    .logo {
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        gap: 8px;
    }

    .logo .logo-text {
        align-items: flex-start;
        text-align: left;
    }

    .logo-img {
        width: 50px !important;
        padding: 8px;
        border-radius: 12px;
    }

    .logo-text h2 {
        font-size: 14px !important;
        letter-spacing: 0.5px;
        line-height: 1.1;
    }

    .logo-text h6 {
        font-size: 7px !important;
        letter-spacing: 0px;
    }

    /* Adjust padding on the logo wrapper to save space but keep left margin */
    .logo-wrapper {
        padding-left: 15px !important;
        padding-right: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}
/* ============================================================
   DYNASTY PRESTIGE — Premium HTML Logo Styles
   ============================================================ */

/* ---- Gold gradient variable ---- */
:root {
    --dp-gold-start:  #F9EFA0;
    --dp-gold-mid:    #D4A843;
    --dp-gold-main:   #C9A84C;
    --dp-gold-dark:   #7A5C1E;
}

/* ---- Logo wrapper / link ---- */
.dp-brand-logo {
    display:        flex !important;
    align-items:    center;
    gap:            14px;
    text-decoration: none !important;
    line-height:    1;
    padding:        6px 0;
}

/* ============================================================
   EMBLEM  (circle with DP monogram)
   ============================================================ */
.dp-emblem {
    flex-shrink: 0;
    position:    relative;
    width:       56px;
    height:      56px;
}

.dp-emblem-ring {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    border:        1.5px solid var(--dp-gold-main);
    display:       flex;
    align-items:   center;
    justify-content: center;
    position:      relative;
    background:    radial-gradient(circle at 35% 35%,
                    rgba(249,239,160,0.08) 0%,
                    rgba(201,168,76,0.04) 60%,
                    transparent 100%);
    box-shadow:
        0 0 18px rgba(201,168,76,0.25),
        inset 0 0 14px rgba(201,168,76,0.08),
        0 0 0 0.5px rgba(201,168,76,0.3);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* inner faint ring */
.dp-emblem-ring::before {
    content:       '';
    position:      absolute;
    inset:         5px;
    border-radius: 50%;
    border:        0.5px solid rgba(201,168,76,0.35);
}

/* corner accent dots */
.dp-emblem-ring::after {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: 50%;
    background:
        radial-gradient(circle 2px at 50%  0%,  var(--dp-gold-main) 100%, transparent 100%),
        radial-gradient(circle 2px at 50%  100%, var(--dp-gold-main) 100%, transparent 100%),
        radial-gradient(circle 2px at 0%   50%, var(--dp-gold-main) 100%, transparent 100%),
        radial-gradient(circle 2px at 100% 50%, var(--dp-gold-main) 100%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 4px 4px;
}

.dp-brand-logo:hover .dp-emblem-ring {
    box-shadow:
        0 0 28px rgba(201,168,76,0.5),
        inset 0 0 20px rgba(201,168,76,0.15),
        0 0 0 0.5px rgba(249,239,160,0.6);
    border-color: var(--dp-gold-start);
}

/* DP monogram text */
.dp-monogram {
    font-family:    'Cinzel', 'Palatino Linotype', Palatino, serif;
    font-size:      22px;
    font-weight:    700;
    letter-spacing: 2px;
    background:     linear-gradient(145deg,
                        var(--dp-gold-start) 0%,
                        var(--dp-gold-mid)   45%,
                        var(--dp-gold-dark)  100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    filter: drop-shadow(0 1px 3px rgba(201,168,76,0.4));
    transition: filter 0.3s ease;
}

.dp-brand-logo:hover .dp-monogram {
    filter: drop-shadow(0 0 8px rgba(249,239,160,0.7));
}

/* ============================================================
   BRAND TEXT
   ============================================================ */
.dp-brand-text {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            3px;
}

/* DYNASTY PRESTIGE */
.dp-brand-name {
    font-family:    'Cinzel', 'Palatino Linotype', Palatino, serif;
    font-size:      15px;
    font-weight:    700;
    letter-spacing: 3px;
    line-height:    1;
    background:     linear-gradient(120deg,
                        var(--dp-gold-start) 0%,
                        var(--dp-gold-mid)   50%,
                        var(--dp-gold-dark)  100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    white-space:    nowrap;
    transition: letter-spacing 0.3s ease;
}

/* thin divider row */
.dp-brand-divider {
    display:     flex;
    align-items: center;
    gap:         6px;
    width:       100%;
}

.dp-brand-divider-line {
    flex:             1;
    height:           0.8px;
    background:       linear-gradient(to right,
                        transparent, var(--dp-gold-main), transparent);
    opacity:          0.7;
}

.dp-brand-divider-gem {
    font-size:   5px;
    color:       var(--dp-gold-main);
    opacity:     0.85;
    line-height: 1;
}

/* DUBAI */
.dp-brand-city {
    font-family:    'Cinzel', 'Palatino Linotype', Palatino, serif;
    font-size:      9px;
    font-weight:    400;
    letter-spacing: 6px;
    line-height:    1;
    background:     linear-gradient(120deg,
                        var(--dp-gold-start) 0%,
                        var(--dp-gold-mid)   100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    opacity:        0.9;
    white-space:    nowrap;
    align-self:     center;
}

/* ============================================================
   FOOTER variant (slightly smaller)
   ============================================================ */
.dp-brand-logo--footer {
    gap: 12px;
}

.dp-brand-logo--footer .dp-emblem {
    width:  48px;
    height: 48px;
}

.dp-brand-logo--footer .dp-monogram {
    font-size: 18px;
}

.dp-brand-logo--footer .dp-brand-name {
    font-size:      13px;
    letter-spacing: 2.5px;
}

.dp-brand-logo--footer .dp-brand-city {
    font-size:      8px;
    letter-spacing: 5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575px) {
    .dp-emblem      { width: 42px; height: 42px; }
    .dp-monogram    { font-size: 17px; }
    .dp-brand-name  { font-size: 12px; letter-spacing: 2px; }
    .dp-brand-city  { font-size: 8px;  letter-spacing: 4px; }
    .dp-brand-logo  { gap: 10px; }
}


/* ============================================================
   DYNASTY PRESTIGE — Logo Animations
   ============================================================ */

/* ----------------------------------------------------------
   1.  PAGE-LOAD ENTRY  (whole logo slides in from left)
   ---------------------------------------------------------- */
@keyframes dp-logo-enter {
    0%   { opacity: 0; transform: translateX(-28px); }
    100% { opacity: 1; transform: translateX(0); }
}

.dp-brand-logo {
    animation: dp-logo-enter 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

/* ----------------------------------------------------------
   2.  EMBLEM POP-IN  (scale + slight rotation)
   ---------------------------------------------------------- */
@keyframes dp-emblem-pop {
    0%   { opacity: 0; transform: scale(0.5) rotate(-20deg); }
    70%  { transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.dp-emblem {
    animation: dp-emblem-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

/* ----------------------------------------------------------
   3.  SPINNING GOLD ARC  (outer conic-gradient ring)
       Wraps around the emblem like a luxury watch bezel
   ---------------------------------------------------------- */
@keyframes dp-arc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.dp-emblem::before {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: 50%;
    background:    conic-gradient(
        from 0deg,
        transparent     0deg,
        transparent     220deg,
        rgba(201,168,76,0.0)  220deg,
        rgba(201,168,76,0.4)  250deg,
        rgba(249,239,160,0.95) 270deg,
        rgba(201,168,76,0.4)  290deg,
        rgba(201,168,76,0.0)  320deg,
        transparent     320deg,
        transparent     360deg
    );
    animation: dp-arc-spin 3.5s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* keep ring content above the arc */
.dp-emblem-ring {
    position: relative;
    z-index:  1;
}

/* ----------------------------------------------------------
   4.  RING GLOW PULSE  (breathing golden aura)
   ---------------------------------------------------------- */
@keyframes dp-ring-breathe {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(201,168,76,0.2),
            inset 0 0 10px rgba(201,168,76,0.06);
        border-color: var(--dp-gold-main);
    }
    50% {
        box-shadow:
            0 0 32px rgba(249,239,160,0.55),
            0 0 55px rgba(201,168,76,0.2),
            inset 0 0 18px rgba(201,168,76,0.12);
        border-color: var(--dp-gold-start);
    }
}

.dp-emblem-ring {
    animation: dp-ring-breathe 2.8s ease-in-out infinite;
}

/* ----------------------------------------------------------
   5.  DP MONOGRAM SHIMMER  (gold sweep on letters)
   ---------------------------------------------------------- */
@keyframes dp-monogram-shine {
    0%   { background-position:  0%  50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:  0%  50%; }
}

.dp-monogram {
    background: linear-gradient(110deg,
        var(--dp-gold-dark)  0%,
        var(--dp-gold-mid)   25%,
        #FFFDE7              48%,
        var(--dp-gold-mid)   55%,
        var(--dp-gold-dark)  100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: dp-monogram-shine 3s ease-in-out infinite;
}

/* ----------------------------------------------------------
   6.  TEXT REVEAL  (staggered fade-up)
   ---------------------------------------------------------- */
@keyframes dp-text-up {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dp-brand-name {
    animation: dp-text-up 0.6s ease-out 0.55s both;
}
.dp-brand-divider {
    animation: dp-text-up 0.5s ease-out 0.7s both;
}
.dp-brand-city {
    animation: dp-text-up 0.5s ease-out 0.82s both;
}

/* ----------------------------------------------------------
   7.  DYNASTY PRESTIGE — gold shimmer sweep
   ---------------------------------------------------------- */
@keyframes dp-name-shimmer {
    0%   { background-position: -200% center; }
    55%  { background-position:  200% center; }
    100% { background-position:  200% center; }
}

.dp-brand-name {
    background: linear-gradient(90deg,
        var(--dp-gold-dark)   0%,
        var(--dp-gold-mid)   20%,
        var(--dp-gold-start) 38%,
        #FFFFFF              50%,
        var(--dp-gold-start) 62%,
        var(--dp-gold-mid)   80%,
        var(--dp-gold-dark)  100%
    );
    background-size:         250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    animation:
        dp-text-up       0.6s ease-out 0.55s both,
        dp-name-shimmer  4s ease-in-out 1.2s infinite;
}

/* ----------------------------------------------------------
   8.  DIVIDER LINE EXPAND  (width grows from center)
   ---------------------------------------------------------- */
@keyframes dp-line-expand {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 0.75; }
}

.dp-brand-divider-line {
    transform-origin: center;
    animation: dp-line-expand 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.72s both;
}

.dp-brand-divider-gem {
    animation: dp-text-up 0.4s ease-out 0.85s both;
}

/* ----------------------------------------------------------
   9.  HOVER INTERACTION
       Ring glow burst + text shimmer speed-up
   ---------------------------------------------------------- */
.dp-brand-logo:hover .dp-emblem::before {
    animation-duration: 1.2s;        /* spin faster on hover */
}

.dp-brand-logo:hover .dp-emblem-ring {
    animation: none;
    box-shadow:
        0 0 40px rgba(249,239,160,0.7),
        0 0 80px rgba(201,168,76,0.35),
        inset 0 0 22px rgba(201,168,76,0.18);
    border-color: var(--dp-gold-start);
    transform: scale(1.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dp-brand-logo:hover .dp-brand-name {
    animation-duration: 1.5s;        /* shimmer faster on hover */
    letter-spacing: 3.5px;
    transition: letter-spacing 0.3s ease;
}

/* ----------------------------------------------------------
   10. FOOTER variant — slightly slower, gentler animations
   ---------------------------------------------------------- */
.dp-brand-logo--footer .dp-emblem::before {
    animation-duration: 5s;
}

.dp-brand-logo--footer .dp-emblem-ring {
    animation-duration: 3.5s;
}