/* =========================================
   Root Variables
========================================= */
:root {
    --main-color: #071b31;
    --second-color: #063750;
    --third-color: #FFF;
    --fourth-color: #000;
}

/* =========================================
   Logo Styling (Navbar + Footer)
========================================= */
.navbar-brand img,
.store-footer img {
    background: #fff;
    padding: 0px 0px;
    border-radius: 20%;
    max-height: 4rem;
    width: 70px;
}
.main-nav-container.fixed-pinned .navbar-brand img
 {
    max-height: unset;
}

/* =========================================
   Hover Effects
========================================= */
.header-btn__icon:hover {
    color: var(--third-color);
}

.main-menu li.root-level > a:hover span {
    color: var(--third-color);
}

/* =========================================
   Desktop Adjustments
========================================= */
@media (min-width: 767px) {
    section.hero_section.w-full.h-\[39vh\].md\:h-\[91vh\].header.font-castaro.relative.pic_img,
    section.cartypes {
        margin-bottom: 100px;
    }
}

/* =========================================
   Mobile Adjustments
========================================= */
@media (max-width: 768px) {
    .hero_section {
        height: 25vh !important; /* Comfortable height for mobile */
    }
    .pic_img {
        background-position: top center !important; /* Show top part of banner */
    }
}

/* =========================================
   Banner Fix
========================================= */
.banner--fixed img {
    background-color: unset !important;
}

/* =========================================
   Remove Specific RTL Section
========================================= */
.rtl\:items-start:where([dir="rtl"], [dir="rtl"] *),
.absolute.bottom-0.w-full.h-\[111px\].flex.justify-betwee.items-center.before\:content-\[\'\'\].before\:absolute.before\:top-0.before\:bottom-0.before\:right-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-\[\#00000066\].before\:blur-\[2px\].before\:z-0 {
    display: none;
}

/* =========================================
   Grid Fix for Large Screens
========================================= */
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

/* =========================================
   Car Types Adjustments
========================================= */
.carTypeFixed .carFixed:hover img {
    transform: unset;
}

@media (min-width: 767px) {
    .carTypeFixed .carFixed {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* =========================================
   Profile Image Style
========================================= */
.profile-image img {
    background: var(--second-color);
    border-radius: 50%;
}

/* =========================================
   Opinions Section Styling
========================================= */
.opinionsSec .card {
    border: 2px solid var(--third-color);
    padding: 30px;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 85px),
        calc(100% - 80px) 100%,
        0 100%
    );
}

/* =========================================
   Scroll To Top Button
========================================= */
.scroll-to-top i {
    color: var(--main-color);
}
.scroll-to-top {
    background-color: var(--third-color);
}

/* =========================================
   WhatsApp Button
========================================= */
.whatsapp-info,
.pulse {
    background-color: var(--third-color);
}

i.sicon-whatsapp2.text-white.text-3xl {
    color: var(--main-color);
}

/* =========================================
   Footer Styling
========================================= */
.store-footer p {
    text-align: center;
}

.copyright-text p {
    color: var(--fourth-color);
    font-weight: bold;
}

.bg-\[\#000B14\].w-full {
    background: var(--third-color);
}

/* =========================================
   Footer Mobile Style
========================================= */
@media (max-width: 767px) {
    .store-footer .footer-info {
        place-items: center;
    }
    .store-footer h3 {
        text-align: center;
    }
    .container.grid.gap-8.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-6.lg\:gap-6 {
        gap: 2rem 0rem;
    }
}

/* =========================================
   Footer Hover Effects
========================================= */
.store-footer .footer-info a:hover {
    color: var(--third-color) !important;
}

.store-footer .s-social-link:hover {
    border-color: var(--third-color);
}

.store-footer .s-social-link:hover .s-social-icon {
    color: var(--third-color) !important;
}

/* =========================================
   Pages
========================================= */
#productsViewer .s-button-primary {
    background-color: var(--third-color);
    color: var(--main-color);
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

body {
    background-color: #071b31 !important;
    font-family: "Tajawak"
}

.booking__details, .booking__info, .store-info {
    background-color: #063650 !important;
}

.booking__meta h4, .fc-toolbar-title, .booking__fields__title, .booking__fields__label, .booking__meta .list li [class^=sicon-], .booking__meta, .store-info__detail * {
    color: #FFF !important;
}

.store-info__logo img {
    filter: invert(1) brightness(2) contrast(100);
    max-height: 100px;
}