/*
 * ================================================
 * REMONS - CORRECTIONS HERO, TOGGLE, DRAPEAUX & SLIDERS
 * ================================================
 * Ce fichier corrige les 6 objectifs identifiés:
 * 1. HERO mobile: supprimer espaces blancs
 * 2. Toggle Rent/Buy: repositionner entre HERO et logos
 * 3. Zone blanche: enlever entre toggle et logos
 * 4. Drapeaux: cercles mobiles
 * 5. Flèches slider: orange sans fond
 * 6. Icônes catégories: flèches RTL
 * ================================================
 */

/* ================================================
 * FIX: Menu items spacing for French translations
 * Reduce gap so all items stay on one line
 * ================================================ */
.header-main .main-menu ul li {
    margin-inline-end: 25px !important;
}

.header-main .main-menu ul li:last-child {
    margin-inline-end: 0 !important;
}

.header-main .main-menu>nav>ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Keep submenus vertical */
.header-main .main-menu ul li .submenu {
    display: none;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
}

.header-main .main-menu ul li:hover>.submenu {
    display: block !important;
}

/* Réduire la taille des flèches du sous-menu (Rent Cars / Buy Cars) */
.header-main .main-menu ul li .submenu .menu-item-with-icon .menu-icon,
.header-main .main-menu ul li .submenu .menu-item-with-icon .menu-icon i {
    font-size: 10px !important;
}

/* ================================================
 * HIDE TESTIMONIAL SECTION (User Request)
 * ================================================ */
.testimonial-section,
.testimonial-section *,
.testimoni-bg-shape,
.testimonial-card-items,
.testimonial-slider,
.testimonial-items-top,
.client-info-items,
.testimonial-bg-shape {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================
 * HIDE GALLERY SECTION (User Request)
 * ================================================ */
.gallery-section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Gallery: 6 images on mobile, 9 on desktop */
@media (max-width: 767px) {
    .gallery-section .gallery-mobile-hide {
        display: none !important;
    }
}

/* Une seule ligne orange sous "Rental", pas sous "Car" */
.hero-section.hero-1 .hero-content h1 span:first-child::before {
    display: none !important;
}

/* Descendre la ligne orange sous le texte (hero EN/AR) */
.hero-section.hero-1 .hero-content h1 span::before {
    bottom: -12px !important;
}

.hero-section.hero-1 h1,
.hero-section.hero-1 h4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ================================================
 * OBJECTIF 1: HERO - Supprimer Espaces Blancs Mobile
 * ================================================ */

/* Force cover sans espaces blancs */
.hero-section {
    position: relative;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hero-section .swiper-slide {
    position: relative;
    min-height: 600px !important;
    /* Reduced from 100vh to avoid huge gaps on large screens */
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    /* Force content to top */
    padding-top: 0 !important;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Adapter contenu HERO */
.hero-section .container {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    /* Reduced from 150px */
    padding-bottom: 100px;
}

/* Responsive HERO - Tablette & Mobile */
@media (max-width: 991px) {
    .hero-section {
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
    }

    .hero-section .swiper,
    .hero-section .swiper-wrapper {
        height: 50vh !important;
    }

    .hero-section .swiper-slide {
        min-height: 50vh !important;
        max-height: 50vh !important;
        height: 50vh !important;
        overflow: hidden;
    }

    .hero-section .container {
        padding-top: 50px;
        padding-bottom: 20px;
    }
}

@media (max-width: 575px) {

    /* Hauteur fixe hero = plus d'espace blanc entre image et toggle/search */
    .hero-section {
        height: 46vh !important;
        min-height: 46vh !important;
        max-height: 46vh !important;
    }

    .hero-section .swiper,
    .hero-section .swiper-wrapper {
        height: 46vh !important;
    }

    .hero-section .swiper-slide {
        min-height: 46vh !important;
        max-height: 46vh !important;
        height: 46vh !important;
        overflow: hidden;
    }

    .hero-section .container {
        padding-top: 32px;
        padding-bottom: 12px;
    }

    /* Réduire taille titre mobile */
    .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .hero-content h4 {
        font-size: 14px !important;
    }
}

/* Fix Hero Min-Height - hauteur fixe mobile, pas d'espace blanc */
@media (max-width: 575px) {
    .hero-section {
        height: 46vh !important;
        min-height: 46vh !important;
        max-height: 46vh !important;
    }

    .hero-section .swiper,
    .hero-section .swiper-wrapper {
        height: 46vh !important;
    }

    .hero-section .swiper-slide {
        min-height: 46vh !important;
        max-height: 46vh !important;
        height: 46vh !important;
        overflow: hidden;
    }

    .hero-section .container {
        padding-top: 32px;
        padding-bottom: 12px;
    }
}

/* Fix zoom 125% */
@media (min-width: 992px) and (max-width: 1440px) {
    .hero-section .swiper-slide {
        min-height: 85vh !important;
    }
}

/* ================================================
 * OBJECTIF 2 & 3: Toggle Rent/Buy - Repositionner
 * ================================================ */

/* ================================================
 * OBJECTIF 2 & 3: Toggle Rent/Buy - Repositionner
 * ================================================ */

/* Container FLOTTANT - NOUVELLE BASE (Absolute Position) */
.rent-buy-toggle-container {
    position: absolute;
    /* Absolute relative to Hero Section */
    bottom: 60px !important;
    /* MOVED UP (was -15px) */
    left: 0;
    width: 100%;
    z-index: 20;
    margin: 0 !important;
    padding: 0 15px;
    pointer-events: none;
}

/* Toggle centré - TRANSPARENT (Just buttons) */
.rent-buy-toggle {
    pointer-events: auto;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    box-shadow: none !important;
    max-width: 100%;
    margin: 0 auto;
}

/* ... (Style boutons reste le même) ... */

/* ... (Mobile toggle styles) ... */

/* ================================================
 * OBJECTIF 10: HERO SEARCH BANNER
 * Modern Glass/Rounded Style below Rent/Buy Toggle
 * ================================================ */

.hero-search-banner {
    position: absolute;
    bottom: -25px !important;
    /* MOVED UP (was -90px) - Takes the place of the toggle */
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0 15px;
    pointer-events: none;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 575px) {
    .rent-buy-toggle-container {
        bottom: 100px !important;
        /* Remonté plus haut pour laisser place à la barre */
    }

    .hero-search-banner {
        bottom: -25px !important;
        /* Position standard */
    }

    .search-input-wrapper {
        max-width: 90%;
        /* Un peu plus large sur mobile */
        padding: 5px 5px 5px 20px;
    }

    .hero-search-input {
        font-size: 14px;
        height: 40px;
        /* Hauteur confortable */
    }

    .hero-search-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .brand-logos-section-modern {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        padding-left: 0 !important;
        /* Maximiser la largeur */
        padding-right: 0 !important;
    }


}

/* Toggle centré - TRANSPARENT (Just buttons) */
.rent-buy-toggle {
    pointer-events: auto;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    /* Increased gap for separation */
    background: transparent !important;
    /* No white background */
    padding: 0;
    border-radius: 0;
    box-shadow: none !important;
    /* No container shadow */
    max-width: 100%;
    margin: 0 auto;
}

/* Style par défaut: Bouton INACTIF (blanc avec bordure orange) */
.rent-buy-toggle .toggle-btn {
    padding: 14px 45px !important;
    border: 2px solid #FF6600 !important;
    background: #ffffff !important;
    /* BLANC par défaut */
    color: #FF6600 !important;
    /* Texte orange */
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    min-width: 140px;
    justify-content: center;
}

/* Hover: Orange temporaire */
.rent-buy-toggle .toggle-btn:hover {
    background: #FF6600 !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.35);
}

/* ACTIF: Bouton ORANGE avec texte blanc */
.rent-buy-toggle .toggle-btn.active {
    background: #FF6600 !important;
    color: #fff !important;
    border-color: #FF6600 !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.35);
}

/* PAS ACTIF: Forcer blanc (enlever active) */
/* PAS ACTIF: Transparent au lieu de blanc */
.rent-buy-toggle .toggle-btn:not(.active) {
    background: rgba(255, 255, 255, 0.2) !important;
    /* Transparent/Glassy */
    backdrop-filter: blur(5px);
    /* Nice glass effect */
    color: #FF6600 !important;
    border-color: #FF6600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure all buttons have shadow now */
.rent-buy-toggle .toggle-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.rent-buy-toggle .toggle-btn.active {
    background: #FF6600 !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4) !important;
}

/* Mobile toggle - Simplified */
@media (max-width: 575px) {
    .rent-buy-toggle-container {
        bottom: -15px;
        /* Same as desktop for consistency */
    }

    .rent-buy-toggle {
        padding: 12px 20px;
        max-width: 300px;
        gap: 10px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    }

    .rent-buy-toggle .toggle-btn {
        padding: 10px 25px !important;
        font-size: 15px !important;
        min-width: 100px;
    }

    /* Brand Section Adjustment for Mobile */
    .brand-logos-section-modern {
        padding-top: 40px !important;
        /* Space for the hanging button */
        margin-top: 0 !important;
        /* Garder car-bg.jpg (pas de fond blanc) */
    }

    .rent-buy-toggle-container+.brand-logos-section-modern {
        margin-top: 0 !important;
        padding-top: 40px !important;
    }
}

/* ================================================
 * OBJECTIF 3: Section Brand Logo
 * CONTROLE DES COULEURS : modifier les variables ci-dessous
 * ================================================ */

/* Variables pour la section Brand Logo (changez ici pour contrôler les couleurs) */
.brand-logos-section-modern {
    --brand-bg-color: rgb(169, 181, 214);
    /* Couleur de fond (fallback si image absente) */
    --brand-border-color: rgb(169, 181, 214);
    /* Couleur de la bordure du bas */
}

/* Section Brand - Fond (car-bg.jpg) + couleurs contrôlées par les variables */
.brand-logos-section-modern {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    background-image: url(../img/car/car-bg.jpg) !important;
    background-color: var(--brand-bg-color) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    border-bottom: 1px solid var(--brand-border-color) !important;
    position: relative;
    z-index: 5;
}

/* Cleanup old selectors */
.rent-buy-toggle-container+.brand-logos-section-modern {
    margin-top: 0 !important;
    padding-top: 5px !important;
}

/* ================================================
 * OBJECTIF 4: Drapeaux Ronds Mobile
 * ================================================ */

/* Drapeaux en cercle */
.lang-switcher-dropdown .lang-flag {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #e0e0e0;
}

.lang-switcher-dropdown .lang-flag svg {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
}

/* Mobile: Drapeaux à droite */
@media (max-width: 991px) {
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .lang-switcher-container {
        order: 2;
        /* Après la loupe */
        margin-right: 10px;
    }

    .search-trigger {
        order: 1;
    }

    .header__hamburger {
        order: 3;
        /* Burger en dernier */
    }

    /* Drapeaux plus petits sur mobile */
    .lang-switcher-dropdown .lang-flag {
        width: 28px !important;
        height: 28px !important;
    }
}

/* RTL Support pour drapeaux */
[dir="rtl"] .lang-switcher-container {
    margin-right: 0;
    margin-left: 10px;
}

/* ================================================
 * OBJECTIF 5: Flèches Slider - Orange Sans Fond
 * ================================================ */

/* Flèches HERO */
.hero-section .array-button button,
.hero-section .image-array-left,
.hero-section .image-array-right {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Pas de cercle au survol : désactiver le ::before du thème */
.hero-section .image-array-left::before,
.hero-section .image-array-right::before {
    display: none !important;
}

.hero-section .array-button button i,
.hero-section .image-array-left i,
.hero-section .image-array-right i {
    color: #FF6600 !important;
    font-size: 40px !important;
    font-weight: 900 !important;
    transition: all 0.3s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hero-section .array-button button:hover i,
.hero-section .image-array-left:hover i,
.hero-section .image-array-right:hover i {
    color: #ff8533 !important;
    transform: scale(1.15);
    text-shadow: none;
}

/* Flèches Car Rentals (mobile) */
.car-rentals-wrapper .array-button.d-md-none .array-prev,
.car-rentals-wrapper .array-button.d-md-none .array-next {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

.car-rentals-wrapper .array-button.d-md-none .array-prev i,
.car-rentals-wrapper .array-button.d-md-none .array-next i {
    color: #FF6600 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
}

.car-rentals-wrapper .array-button.d-md-none .array-prev:hover i,
.car-rentals-wrapper .array-button.d-md-none .array-next:hover i {
    color: #ff8533 !important;
    transform: scale(1.15);
}

/* ================================================
 * OBJECTIF 6: Icônes Catégories - Flèches RTL
 * ================================================ */

/* Remplacer icônes par flèches */
.popular-card-items .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px;
    height: 24px;
}

/* Flèche par défaut (LTR) */
.popular-card-items .menu-icon::before {
    content: "›" !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #FF6600 !important;
    line-height: 1;
}

/* Cacher SVG existantes */
.popular-card-items .menu-icon svg {
    display: none !important;
}

/* RTL: Inverser flèche */
[dir="rtl"] .popular-card-items .menu-icon::before {
    content: "‹" !important;
    transform: scaleX(-1);
}

/* Hover effect */
.popular-card-items-link:hover .menu-icon::before {
    color: #ff8533 !important;
    transform: translateX(3px);
}

[dir="rtl"] .popular-card-items-link:hover .menu-icon::before {
    transform: translateX(-3px) scaleX(-1);
}

/* Supprimer les flèches orange à côté des titres de catégories */
.popular-card-items .menu-icon {
    display: none !important;
}

/* ================================================
 * FIXES SUPPLÉMENTAIRES
 * ================================================ */

/* Assurer overlay ne crée pas d'espace */
.hero-section .overlay-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-section .overlay-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiper sans espace */
.hero-section .swiper,
.hero-section .swiper-wrapper {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix pour éviter scroll horizontal */
body,
html {
    overflow-x: hidden !important;
}

/* ================================================
 * RESPONSIVE FINAL
 * ================================================ */

/* Tablette */
@media (max-width: 991px) and (min-width: 576px) {
    .rent-buy-toggle-container {
        margin-top: -50px;
    }

    .rent-buy-toggle .toggle-btn {
        font-size: 17px !important;
    }
}

/* Petit mobile */
@media (max-width: 375px) {
    .rent-buy-toggle {
        padding: 12px 15px;
        max-width: 320px;
    }

    .rent-buy-toggle .toggle-btn {
        padding: 10px 25px !important;
        font-size: 15px !important;
        min-width: 110px;
    }
}

/* Zoom spécifique - desktop uniquement */
@media (min-width: 992px) {
    .hero-section .swiper-slide {
        min-height: 75vh !important;
    }
}


/* ================================================
 * OBJECTIF 6: UNIFIED CAR CARD DESIGN (Global)
 * Ported from car-grid.html to apply to Home Page
 * ================================================ */

/* Main Card Container */
.car-rentals-items {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* UNIFIED CARD BORDER */
    border: 1px solid #FF3726;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease-in-out;
}

.car-rentals-items:hover {
    box-shadow: 0 10px 30px rgba(255, 55, 38, 0.15);
    transform: translateY(-5px);
}


/* Image Section */
.car-image {
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 0;
    background: transparent;
    /* Transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease-in-out;
    transform: scale(1.15);
    /* ← image déjà zoomée au départ */
}

/* Hybrid Mode for White BG images */
.car-image.contain-mode {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-image.contain-mode img {
    object-fit: contain;
    padding: 10px;
}

/* Popular cards: image toujours en plein cadre (cover), pas de contain/scale global */
.popular-car-section .popular-card-items {
    justify-content: space-between !important;
    overflow: hidden !important;
    padding: 0 !important;
    /* Supprime l'espace en haut et en bas causé par le padding 20px */
}

.popular-car-section .popular-card-items .car-image {
    max-width: none !important;
    min-width: 50%;
    flex: 1 1 0% !important;
    margin-right: -1px;
    /* Évite un bug de pixel vide sur certains navigateurs */
}

.popular-car-section .popular-card-items .car-image img {
    object-fit: cover !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Popular cards MOBILE: même dégradé blanc que desktop */
@media (max-width: 991px) {
    .popular-car-section .popular-card-items .car-image::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        border-radius: 0 10px 10px 0 !important;
        background: linear-gradient(90deg, #fefdfd 0%, rgba(254, 253, 253, 0) 100%) !important;
    }
}

/* Content Section */
.car-content {
    border: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 25px 25px 25px;
    /* Standard padding */
    position: relative;
    background: #fff;
}

/* Floating Badge - Glass style */
.car-content .post-cat {
    position: absolute;
    top: -10px !important;
    right: 20px !important;
    z-index: 5;
    /* Glass effect */
    background: rgba(74, 143, 217, 0.966);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .car-content {
        padding: 0 20px 20px 20px;
    }
}

/* Spacing between Specs and Button */
.car-specs-grid {
    margin-bottom: 15px !important;
}

/* Ligne au-dessus des specs : dégradé des deux côtés */
.car-rentals-items .car-specs-grid,
.car-rentals-section .car-specs-grid,
.car-rentals-section-2 .car-specs-grid {
    position: relative;
    border-top: none !important;
}

.car-rentals-items .car-specs-grid::before,
.car-rentals-section .car-specs-grid::before,
.car-rentals-section-2 .car-specs-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--theme-orange) 15%,
            var(--theme-orange) 85%,
            transparent 100%);
}

/* ================================================
 * OBJECTIF 7: "BUY MODE" SPECIFIC CARD STYLES
 * Compact card, same size as Rent, but specific content
 * ================================================ */

/* 1. Status Badge (VENDU/À VENDRE) - Inside Image, Bottom Left */
.car-image {
    position: relative !important;
    /* Ensure anchor */
}

.car-image .buy-status-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    /* Changed from right to left to match car-list */
    z-index: 20;
    /* Force on top */
    color: #fff;
    padding: 6px 15px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    /* Let clicks pass through to image link */
}

/* Green Badge for "À VENDRE" (For Sale) */
.car-image .buy-status-badge.a-vendre {
    background: #25D366;
    /* WhatsApp Green */
}

/* Red Badge for "VENDU" (Sold) */
.car-image .buy-status-badge.vendu {
    background: #FF3726;
    /* Red */
}



/* 2. Price Button (Green WhatsApp) - Inside Image */
.car-image .buy-price-btn {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: #25D366;
    /* WhatsApp Green */
    color: #fff;
    padding: 6px 15px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.car-image .buy-price-btn:hover {
    background: #1ebc57;
    color: #fff;
}

/* 3. Description Text */
.car-content .buy-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. Extra Info Row (Occasion / KM) */
.buy-extra-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

.buy-extra-info i {
    color: var(--theme2);
    /* Blue icon */
    margin-right: 5px;
}

/* ================================================
 * OBJECTIF 8: HOME SLIDER LAYOUT (Pixydrop Style)
 * Space on sides + centered arrows
 * ================================================ */

/* 1. Create side spacing on the wrapper */
.car-rentals-wrapper {
    position: relative;
    padding: 0 60px !important;
    /* Adjust this value for more/less space */
}

/* On mobile, remove this padding */
/* On mobile, keep padding for arrows */
@media (max-width: 767px) {
    .car-rentals-wrapper {
        padding: 0 45px !important;
        /* Espace pour les flèches */
    }
}

/* 2. Position Arrows in the empty space */
.car-rentals-wrapper .array-button .array-prev,
.car-rentals-wrapper .array-button .array-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer;
    /* Reset default button styles if needed */
    background: #fff !important;
    /* White background like Pixydrop */
    border: 1px solid #eee !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.car-rentals-wrapper .array-button .array-prev {
    left: 0 !important;
}

.car-rentals-wrapper .array-button .array-next {
    right: 0 !important;
}

/* Icon style inside arrows */
.car-rentals-wrapper .array-button .array-prev i,
.car-rentals-wrapper .array-button .array-next i {
    color: var(--theme-orange) !important;
    /* Orange icon */
    font-size: 16px !important;
    /* Smaller icon size */
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Hover effect */
.car-rentals-wrapper .array-button .array-prev:hover,
.car-rentals-wrapper .array-button .array-next:hover {
    background: var(--theme-orange) !important;
    border-color: var(--theme-orange) !important;
}

.car-rentals-wrapper .array-button .array-prev:hover i,
.car-rentals-wrapper .array-button .array-next:hover i {
    color: #fff !important;
}


/* On mobile, revert to default or hide custom style if needed */
/* On mobile, KEEP desktop style (Absolute positioning) */
@media (max-width: 767px) {

    .car-rentals-wrapper .array-button .array-prev,
    .car-rentals-wrapper .array-button .array-next {
        /* On garde le style desktop (absolute) */
        width: 35px !important;
        /* Légèrement plus petit en mobile */
        height: 35px !important;
    }

    .car-rentals-wrapper .array-button .array-prev i,
    .car-rentals-wrapper .array-button .array-next i {
        font-size: 14px !important;
    }
}

/* ================================================
 * OBJECTIF 9: BRAND LOGOS SECTION (Home)
 * Compact & Unified Heights
 * ================================================ */

/* Container: Reduce padding */
.brand-logos-section-modern {
    padding: 20px 0 !important;
}

/* Card: Fixed height & centering */
.brand-card-modern {
    height: 55px !important;
    /* Unified visual height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Image: Contain proportions */
.brand-card-modern img {
    max-height: 80% !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ================================================
 * OBJECTIF 10: SEPARATOR STYLE (From car-grid.html)
 * Gradient Lines + Centered Icon
 * ================================================ */
.brand-header-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin: 20px 0 60px 0;
    width: 100%;
}

.brand-line-left {
    flex: 1;
    height: 1px !important;
    /* Gradient: Orange (Solid, 0% to 50%) -> Transparent (100%) */
    background: linear-gradient(to right, #FF3726 50%, rgba(255, 55, 38, 0) 100%);
    border-radius: 0 !important;
    opacity: 0.9;
    /* Make it look finer */
    transform: scaleY(0.9);
    /* Visually 0.5px */
}

.brand-line-right {
    flex: 1;
    height: 1px !important;
    /* Gradient: Transparent (0%) <- Orange (Solid, 50% to 100%) */
    background: linear-gradient(to left, #FF3726 50%, rgba(255, 55, 38, 0) 100%);
    border-radius: 0 !important;
    opacity: 0.9;
    /* Make it look finer */
    transform: scaleY(0.9);
    /* Visually 0.5px */
}

.brand-logo-center {
    max-height: 120px;
    width: auto;
    object-fit: contain;
}

/* ================================================
 * OBJECTIF 10: HERO SEARCH BANNER
 * Modern Glass/Rounded Style below Rent/Buy Toggle
 * ================================================ */

.hero-search-banner {
    position: absolute;
    bottom: -25px !important;
    /* Remonté pour dégager les logos */
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0 15px;
    pointer-events: none;
    /* Let clicks pass outside */
}

.search-input-wrapper {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.5);
    /* White semi-glass */
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px 8px 8px 25px;
    /* Padding for text and button space */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Soft shadow */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.search-input-wrapper:hover,
.search-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0, 5);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.hero-search-input {
    border: none;
    background: transparent;
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #333;
    outline: none;
    font-weight: 500;
}

.hero-search-input::placeholder {
    color: #888;
    font-weight: 400;
}

.hero-search-btn {
    width: 45px;
    height: 45px;
    background-color: #FF6600;
    /* Orange */
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 10px;
}

.hero-search-btn:hover {
    transform: scale(1.1);
    background-color: #e63020;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.4);
}

/* Adjustments to Brand Section to prevent overlap */
.brand-logos-section-modern {
    padding-top: 30px !important;
    /* Tight spacing under hero */
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .brand-logos-section-modern {
        padding-top: 30px !important;
    }

    .hero-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}

@media (max-width: 575px) {
    .rent-buy-toggle-container {
        bottom: 40px !important;
        /* Rapproché de la barre de recherche */
    }

    .hero-search-banner {
        bottom: -25px !important;
        /* Position standard */
    }

    .search-input-wrapper {
        max-width: 95%;
        /* Un peu plus large sur mobile */
        padding: 5px 5px 5px 20px;
    }

    .hero-search-input {
        font-size: 14px;
        height: 40px;
        /* Hauteur confortable */
    }

    .hero-search-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .brand-logos-section-modern {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ================================================
 * FINAL OVERRIDE FOR LARGE SCREENS (JUSKA LA FIN)
 * ================================================ */
@media (min-width: 992px) {
    .hero-section .swiper-slide {
        min-height: 600px !important;
        /* Force fixed height, NO vh */
        height: auto !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
    }

    .hero-section {
        min-height: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .brand-logos-section-modern {
        padding-top: 30px !important;
    }
}

/* ==================================================
 * FINAL: Spacing between hero and brands (CSS-only)
 * Toggle is position:absolute inside hero now.
 * Search banner hangs at bottom:-90px below hero.
 * Brand section needs ~60px top padding to clear it.
 * ================================================== */
.hero-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.hero-content {
    padding: 0 !important;
    margin: 0 !important;
}

.brand-logos-section-modern {
    margin-top: 0 !important;
    padding-top: 60px !important;
}

/* ================================================
 * FIX: Mobile Menu inside Offcanvas Sidebar
 * Force mean-bar and mean-nav visible ONLY inside offcanvas
 * NOTE: .mobile-menu AND .mean-container are the SAME element
 *       so we use .mobile-menu.mean-container (no space)
 * ================================================ */
.offcanvas__content .mobile-menu.mean-container .mean-bar {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    float: none !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav {
    display: block !important;
    background: transparent !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
    float: none !important;
    width: 100% !important;
}

/* Force the main UL visible (meanmenu hides it with inline style) */
.offcanvas__content .mobile-menu.mean-container .mean-nav>ul {
    display: block !important;
    width: 100% !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: relative !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li a {
    display: block !important;
    float: none !important;
    width: auto !important;
    background: transparent !important;
    color: #333 !important;
    border-top: 1px solid #eee !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li a:hover {
    color: var(--theme) !important;
    background: #f9f9f9 !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li li a {
    padding-left: 40px !important;
    color: #555 !important;
    font-size: 14px !important;
}

/* Réduire la taille des flèches (>) dans le sous-menu mobile */
.offcanvas__content .mobile-menu.mean-container .mean-nav ul li li a .menu-icon i {
    font-size: 10px !important;
    vertical-align: middle !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li li a .menu-icon {
    margin-right: 4px !important;
}

.offcanvas__content .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    width: 26px !important;
    height: 32px !important;
    padding: 8px !important;
    text-align: center !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 12px !important;
    /* Plus petit */
}

/* RTL : symbole + à gauche dans l'offcanvas pour ne pas chevaucher le texte arabe */
html[dir="rtl"] .offcanvas__content .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] .offcanvas__content .mobile-menu.mean-container .mean-nav ul li>a:not(.mean-expand) {
    padding-left: 38px !important;
}

/* Hide the default meanmenu hamburger reveal button */
.offcanvas__content .mobile-menu.mean-container a.meanmenu-reveal {
    display: none !important;
}

/* ================================================
 * INDEX MOBILE ONLY: Cadre voiture plus petit
 * Ne cible que .car-rentals-section (index), pas .car-rentals-section-2 (autres pages)
 * ================================================ */
@media (max-width: 767px) {
    .car-rentals-section .car-rentals-items {
        max-width: 100%;
    }

    .car-rentals-section .car-image {
        height: 230px !important;
        min-height: 230px !important;
    }

    .car-rentals-section .car-content {
        padding: 0 14px 14px 14px !important;
    }

    .car-rentals-section .car-content::before {
        margin-bottom: 10px !important;
    }

    .car-rentals-section .car-content .post-cat {
        font-size: 15px !important;
        padding: 6px 13px !important;
        /* Position en mobile (à ajuster selon ton besoin) : */
        top: -15px !important;
        /* plus bas = valeur positive ; plus haut = valeur négative */
        right: 14px !important;
        /* déplacer à gauche = réduire right ou utiliser left */
        /* left: 14px !important; */
        /* option : fixer à gauche au lieu de droite */
    }

    .car-rentals-section .car-content .star i,
    .car-rentals-section .car-content .star span {
        font-size: 12px !important;
    }

    .car-rentals-section .car-content h4 {
        font-size: 15px !important;
    }

    .car-rentals-section .car-content h6 {
        font-size: 12px !important;
    }

    .car-rentals-section .car-specs-grid {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
        padding-top: 12px !important;
        gap: 10px !important;
    }

    .car-rentals-section .car-specs-grid .spec-item {
        gap: 6px !important;
    }

    .car-rentals-section .car-specs-grid .spec-item span {
        font-size: 12px !important;
    }

    .car-rentals-section .car-specs-grid .spec-item i,
    .car-rentals-section .car-specs-grid .spec-item img {
        width: 18px !important;
        height: 18px !important;
        font-size: 14px !important;
    }

    .car-rentals-section .car-content .theme-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* Masquer la ligne Comments / More dans les cartes blog */
.news-card-items .news-content ul {
    display: none !important;
}

/* Espace entre "Range Of Cars" et "Looking For A Luxury Car Service?" */
.car-service-section {
    margin-top: 60px;
}

@media (max-width: 991px) {
    .car-service-section {
        margin-top: 40px;
    }
}

/* Version arabe (RTL) : descendre la section Car Service pour que la voiture bleue s’affiche entièrement */
[dir="rtl"] .car-service-section {
    margin-top: 100px;
}

@media (max-width: 991px) {
    [dir="rtl"] .car-service-section {
        margin-top: 70px;
    }
}

/* RTL : voiture bleue bien affichée (éviter que le bloc texte masque la voiture) */
html[dir="rtl"] .about-section .about-wrapper .about-image-items {
    position: relative;
    z-index: 2;
    overflow: visible;
}

html[dir="rtl"] .about-section .about-wrapper .about-content {
    position: relative;
    z-index: 1;
    margin-right: 30px;
    margin-left: 0;
}

/* ========== Voiture bleue (about) – position contrôlable ==========
   Cible : .about-blue-car dans index.html
   Ajuster les variables ci-dessous (ou sur .about-blue-car / html[dir="rtl"] .about-blue-car) pour repositionner.
   Ex. : --about-blue-car-margin-top: -100px; pour descendre la voiture.
   ========== */
.about-section {
    --about-blue-car-margin-top: -140px;
    --about-blue-car-margin-bottom: 0;
    --about-blue-car-margin-left: 0;
    --about-blue-car-margin-right: 0;
}

/* Spécificité élevée pour battre main.css (.about-wrapper .about-image-items .about-image-2) */
.about-section .about-wrapper .about-image-items .about-blue-car {
    margin-top: var(--about-blue-car-margin-top);
    margin-bottom: var(--about-blue-car-margin-bottom);
    margin-left: var(--about-blue-car-margin-left);
    margin-right: var(--about-blue-car-margin-right);
}

/* Version arabe : voiture remontée pour un meilleur cadrage */
html[dir="rtl"] .about-section {
    --about-blue-car-margin-top: -120px;
}

/* RTL : appliquer la marge directement au cas où la variable ne s’hérite pas */
html[dir="rtl"] .about-section .about-wrapper .about-image-items .about-blue-car {
    margin-top: -190px;
}

/* En mode Buy sur la home : masquer Our Benefits → cadre bleu (Faster, easier access...) */
body.home-mode-buy .feature-benefit,
body.home-mode-buy .about-section,
body.home-mode-buy .car-service-section,
body.home-mode-buy .funfact-section,
body.home-mode-buy .news-section,
body.home-mode-buy .cta-rental-section {
    display: none !important;
}

/* Section Mariage (page car-mariage) : une seule grande carte centrée, style blog */
.news-card-items--single .news-content {
    margin-left: 0;
    margin-right: 0;
}

.news-card-items--single .news-image {
    height: 400px;
}

.news-card-items--single .news-content ul {
    display: flex !important;
}

/* Icônes specs (Petrol, Automatic, Doors, People) en bleu badge #4A90D9 */
.car-specs-grid .spec-icon,
.car-rentals-items .car-specs-grid .spec-icon,
.car-rentals-section-2 .car-specs-grid .spec-icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(48%) saturate(1843%) hue-rotate(195deg) brightness(92%) contrast(91%);
}

/* ====================================================
   AJUSTEMENTS DE TAILLE DES LOGOS POUR CHAQUE ECRAN (BRAND LOGOS)
   Chaque bloc correspont exactement aux points de rupture (breakpoints) dans index.html.
==================================================== */

/* Ecrans tres petits (ex: 320px a 449px) */
@media (min-width: 320px) and (max-width: 449px) {
    .brand-card-modern {
        height: 100px !important;
        min-height: 100px !important;
        padding: 0 !important;
    }

    .brand-card-modern img {
        max-height: 100% !important;
        transform: scale(0.8);
    }
}

/* Ecrans petits (ex: 450px a 575px) */
@media (min-width: 450px) and (max-width: 575px) {
    .brand-card-modern {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }

    .brand-card-modern img {
        max-height: 100% !important;
        transform: scale(0.8);
    }
}

/* Mobiles larges en paysage (ex: 576px a 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .brand-card-modern {
        height: 80px !important;
        min-height: 80px !important;
        padding: 0 !important;
    }

    .brand-card-modern img {
        max-height: 100% !important;
        transform: scale(0.8);
    }
}

/* Tablettes / Ecrans moyens (ex: 768px a 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .brand-card-modern {
        height: 100px !important;
        min-height: 100px !important;
        padding: 0 !important;
    }

    .brand-card-modern img {
        max-height: 100% !important;
        transform: scale(0.8);
    }
}

/* Petits Ecrans Desktop (ex: 992px a 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .brand-card-modern {
        height: 55px !important;
        min-height: 55px !important;
        padding: 0 10px !important;
    }

    .brand-card-modern img {
        max-height: 80% !important;
        transform: scale(1);
    }
}

/* Grands Ecrans Desktop (ex: 1200px et plus) */
@media (min-width: 1200px) {
    .brand-card-modern {
        height: 55px !important;
        min-height: 55px !important;
        padding: 0 10px !important;
    }

    .brand-card-modern img {
        max-height: 80% !important;
        transform: scale(1);
    }
}

/* Force LTR for all phone links to fix plus sign bug in Arabic RTL */
a[href^='tel:'] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}

/* ====================================================
   FIX RTL CONTACT SPACING (Icons and Details)
   ==================================================== */
html[dir='rtl'] .contact-list li i,
html[dir='rtl'] .contact-info li i {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[dir='rtl'] .header-right .icon-items .icon {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

/* ================================================
 * OBJECTIF 11: HERO CATEGORIES (Breadcrumb) - CADRAGE
 * Centrer et ajuster le zoom des voitures pour qu'elles soient bien vues
 * ================================================ */
.breadcrumb-wrapper.bg-cover {
    /* "center 85%" déplace l'image vers le haut pour révéler plus le bas (les roues de la voiture) */
    background-position: center 100% !important;

    /* Si nécessaire, ajustez le background-size. 
       ex: "cover", "100% auto", ou "120% auto" selon l'effet voulu. */
    background-size: cover !important;
}

@media (max-width: 991px) {
    .breadcrumb-wrapper.bg-cover {
        /* Sur tablette/mobile on ajuste légèrement pour bien centrer */
        background-position: center 75% !important;
        background-size: cover !important;
    }
}

@media (max-width: 767px) {
    .breadcrumb-wrapper.bg-cover {
        /* Sur petit mobile */
        background-position: center 70% !important;
    }
}

/* Supprimer la ligne séparatrice dans les cartes de catégories */
.category-card-content::before {
    display: none !important;
}

/* ================================================
 * LAYOUT DES CARTES SUR LES PAGES CATÉGORIES
 * Force 3 cartes par ligne, espacement réduit
 * Cible : .car-rentals-section-2 (pages catégories uniquement)
 * ================================================ */

/* Desktop: 3 cartes par ligne + container pleine largeur */
@media (min-width: 992px) {

    /* Container presque pleine largeur */
    .car-rentals-section-2 .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Réduire l'espace entre les cartes */
    .car-rentals-section-2 .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .car-rentals-section-2 .row>[class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .car-rentals-section-2 .col-xl-4,
    .car-rentals-section-2 .col-lg-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}

/* Images plus grandes sur les pages catégories */
.car-rentals-section-2 .car-image {
    height: 320px !important;
    min-height: 320px !important;
}

/* Tablette: garder 2 par ligne */
@media (min-width: 768px) and (max-width: 991px) {
    .car-rentals-section-2 .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .car-rentals-section-2 .car-image {
        height: 280px !important;
        min-height: 280px !important;
    }
}

/* Mobile: 1 carte pleine largeur, image adaptée */
@media (max-width: 767px) {
    .car-rentals-section-2 .car-image {
        height: 260px !important;
        min-height: 260px !important;
    }
}

/* ================================================
 * FIX: Réduire le trait bleu "Call for booking"
 * pour ne pas cacher la moitié de la photo
 * ================================================ */
.car-service-wrapper .service-car-image .color-shape {
    transform: scale(0.95) !important;
    transform-origin: bottom right !important;
}

.car-service-wrapper .service-car-image .booking-content {
    bottom: 25px !important;
    right: 15px !important;
}

.car-service-wrapper .service-car-image .booking-content p {
    font-size: 37px !important;
    margin-bottom: 15px !important;
}

.car-service-wrapper .service-car-image .booking-content h3 {
    font-size: 33px !important;
}

/* ================================================
 * Cacher les lignes de séparation (brand-header-line)
 * sur la page car-grid
 * ================================================ */
.car-rentals-section-2 .brand-header-line {
    display: none !important;
}

/* ================================================
 * HIDE "View More" buttons in Feature Benefit section
 * ================================================ */
.feature-benefit .feature-button,
.feature-benefit .icon,
.feature-benefit .icon-box-shape,
.feature-benefit .bg-button-shape {
    display: none !important;
}