/*--------------------------------------------------------------------- 
   Base / Skeleton 
---------------------------------------------------------------------*/

/* استيراد الملفات الإضافية */
@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(css/font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/* Reset بسيط + تحسين سلوك العناصر */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* نمنع الترانزيشن العام عن كل العناصر – نخليه لاحقاً للعناصر التفاعلية فقط */
html {
    scroll-behavior: smooth;
}

body {
    color: #666666;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.7;
    font-weight: normal;
    overflow-x: hidden;
    background-color: #ffffff;
}

/* عناوين */

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: 600;
    position: relative;
    padding: 0 0 10px 0;
    line-height: 1.2;
    color: #111111;
    margin: 0;
}

h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212121;
    text-decoration: none;
}

/* نص عام */

p {
    margin: 0 0 15px 0;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
}

/* روابط */

a {
    color: #222222;
    text-decoration: none;
    outline: none !important;
    transition: all .3s ease-in-out;
}

a:hover {
    color: #f70808;
    text-decoration: none;
}

/* أزرار */

button,
.btn {
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    outline: none !important;
    transition: all .3s ease-in-out;
}

/* قوائم */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* صور */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* عناصر مساعدة */

.paddind_bottom_0 {
    padding-bottom: 0 !important;
}

.full {
    float: left;
    width: 100%;
}

.layout_padding {
    padding-top: 100px;
    padding-bottom: 0;
}

.padding_0 {
    padding: 0;
}

/* فورمات */

.form-control:focus {
    border-color: #f80707;
    box-shadow: 0 0 0 .15rem rgba(254, 91, 41, .25);
}

/* بلوك كوت */

blockquote {
    margin: 20px 0;
    padding: 20px 25px;
    background-color: #f8f8f8;
    border-left: 4px solid #f50808;
    font-size: 14px;
}

/* شارات */

.badge {
    font-weight: 500;
}

/* header section start – NAVBAR + TOP STRIP */

.header_section {
    width: 100%;
    float: left;
    background: #050505;
    background: linear-gradient(90deg, #050505 0%, #151515 40%, #111111 100%);
    padding: 10px 0;
    position: relative;
    z-index: 20;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* لو استخدمت header_bg بمكان آخر */
.header_bg {
    width: 100%;
    float: left;
    background: #111111;
}

/* نخلي خلفية النافبار شفافة فوق الهيدر */
.bg-light {
    background-color: transparent !important;
}

/* اللوجو / اسم الكراج */
.navbar-brand {
    margin: 0;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff !important;
}

/* عناصر المنيو */
.navbar-expand-lg .navbar-nav .nav-link {
    padding: 6px 14px;
    font-size: 15px;
    color: #f5f5f5;
    margin: 0 3px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* خط صغير تحت الرابط عند الهوفر / الاكتيف */
.navbar-expand-lg .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #f20404;
    border-radius: 10px;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus {
    color: #f90707;
}

.navbar-expand-lg .navbar-nav .nav-link:hover::after,
.navbar-expand-lg .navbar-nav .nav-link:focus::after {
    width: 60%;
}

/* ضبط ألوان نمط .navbar-light الافتراضي من Bootstrap */
.navbar-light .navbar-nav .nav-link {
    color: #f5f5f5;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #f00606;
}




/* نوسّط المنيو على الموبايل شوي */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 8px 0;
    }
}

/* الشريط العلوي للتواصل */

.call_text_main {
    width: 100%;
    float: left;
    background-color: #f40606;
    padding: 8px 0;
}

.call_taital {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.call_text {
    text-align: center;
    flex: 1 1 200px;
}

.call_text a {
    color: #ffffff;
    font-size: 14px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.call_text a i {
    font-size: 15px;
}

.call_text a:hover {
    color: #222222;
}

.padding_left_15 {
    padding-left: 0; /* لم نعد نحتاجها هنا */
}

/* header section end */

   .badge-status {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 4px;
      color: #fff;
      text-transform: uppercase;
      z-index: 2;
   }
   .badge-disponible { background-color: #28a745; }
   .badge-vendue { background-color: #e31328ff; }
   .badge-reservee { background-color: #ffc107; color: #000; }
   .gallery_box {
      position: relative;
   }


/* =======================
   HERO / BANNER PREMIUM
   ======================= */

.banner_section {
    width: 100%;
    padding: 140px 0 120px 0;
    background: linear-gradient(135deg, #111 0%, #1a1a1a 45%, #2a2a2a 100%);
    position: relative;
    overflow: hidden;
}

/* خفيف جداً للخلفية */
.banner_section::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: url("../images/banner-bg.png") center/cover no-repeat;
    opacity: 0.12;
}

.banner_taital {
    font-size: 55px;
    font-weight: 800;
    color: #f3eded;
    line-height: 64px;
    margin-bottom: 10px;
}

.banner_taital span {
    color: #f70303;
}

.banner_text {
    font-size: 17px;
    color: #eaeaea;
    max-width: 90%;
    margin-top: 20px;
}

/* زر */
.contact_bt a {
    background: #fd0505;
    color: #fff;
    border-radius: 6px;
    padding: 12px 25px;
    font-size: 17px;
    font-weight: 600;
    display: inline-block;
}

.contact_bt a:hover {
    background: #ffffff;
    color: #111;
}

/* صورة السيارة */
.banner_img img {
    width: 100%;
    max-width: 480px;
    filter: drop-shadow(0 10px 35px rgba(0,0,0,0.45));
}

/* أسهم السلايدر */
#banner_slider .carousel-control-prev,
#banner_slider .carousel-control-next {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(3px);
}

#banner_slider .carousel-control-prev:hover,
#banner_slider .carousel-control-next:hover {
    background: #fa0303;
}

#banner_slider i {
    font-size: 26px;
    color: #fff;
}

/* موبايل */
@media (max-width: 768px) {
    .banner_taital { font-size: 38px; line-height: 46px; }
    .banner_text { max-width: 100%; }
    .banner_img img { margin-top: 40px; }
    .banner_taital {
        color: rgb(10, 9, 9)
    }
    .banner_text {
        color: #000000;
    }
}

/* about section start */

.about_section {
    width: 100%;
    float: left;
    padding: 80px 0;
    background-color: #f9f6f6;
    border-top: 2px solid #f70808;
    border-bottom: 2px solid #ed1616;
}

.about_section_2 {
    width: 100%;
    float: left;
}

.about_section_2 .row {
    align-items: center;
}

/* العنوان */

.about_taital {
    width: 100%;
    font-size: 34px;
    color: #111111;
    text-transform: uppercase;
    font-weight: 800;
    padding-bottom: 0;
    position: relative;
    margin-bottom: 10px;
}

.about_taital span {
    color: #fc0707;
}

.about_taital::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    margin-top: 12px;
    background-color: #f70404;
    border-radius: 10px;
}

/* صندوق النص */

.about_taital_box {
    width: 100%;
    float: left;
    padding-top: 10px;
}

.about_text {
    width: 100%;
    font-size: 15px;
    color: #555555;
    line-height: 1.8;
    margin: 20px 0 0 0;
}

/* صورة الكراج */
.image_iman {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* لا خلفية إطلاقاً */
    background: transparent !important;

    /* نترك الصورة بدون قص الحواف حتى تبقى شفافة بالكامل */
    border-radius: 0;
    overflow: visible;

    /* ظل خفيف جداً بدون ما يعطي إحساس بخلفية بيضاء */
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

.about_img {
    width: 100%;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    display: block;
    transition: transform 0.5s ease;
}

.image_iman:hover .about_img {
    transform: scale(1.04);
}


.about_img {
    width: 100%;
    display: block;
    transform: scale(1);
    transition: transform 0.6s ease;
}

.image_iman:hover .about_img {
    transform: scale(1.05);
}

/* زر "En savoir plus" لو استخدمته لاحقاً */



/* موبايل */

@media (max-width: 767.98px) {
    .about_section {
        padding: 60px 0;
    }
    .about_taital {
        font-size: 28px;
        text-align: left;
    }
    .about_text {
        font-size: 14px;
    }
    .image_iman {
        margin-bottom: 25px;
    }
}

/* about section end */

/* gallery section start – VEHICLES */

.gallery_section {
    width: 100%;
    float: left;
    padding: 80px 0;
    background-color: #f4f4f4;
}

.gallery_taital {
    width: 100%;
    text-align: center;
    font-size: 34px;
    color: #111111;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.gallery_taital::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin: 14px auto 0;
    background-color: #f80606;
    border-radius: 10px;
}

.gallery_section_2 {
    width: 100%;
    float: left;
    padding-top: 30px;
}

/* صورة السيارة داخل الكرت */
.gallery_img img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 8px;
}

/* كرت السيارة */

.gallery_box.vehicle_card {
    position: relative;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 15px 15px 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gallery_box.vehicle_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* بادج الحالة */

.badge-status {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
}

.badge-disponible { background-color: #28a745; }
.badge-vendue     { background-color: #dc3545; }
.badge-reservee   { background-color: #ffc107; color: #000; }

/* عنوان السيارة */

.vehicle_title {
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    color: #222222;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* السعر */

.vehicle_price {
    font-size: 18px;
    font-weight: 800;
    color: #f50808;
    margin: 0 0 8px 0;
}

/* المواصفات (كيلومتر – وقود – boîte) */

.vehicle_specs {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vehicle_specs span {
    background-color: #f0f0f0;
    border-radius: 999px;
    padding: 4px 10px;
}

/* وصف قصير */

.vehicle_desc {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 15px 0;
    min-height: 42px; /* حتى ما تتكسر الكروت */
}

/* زر “Demander ce véhicule” */

.read_bt {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.read_bt a {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: #fe0303;
    border-radius: 4px;
    padding: 9px 10px;
}

.read_bt a:hover {
    background-color: #f30101;
    color: #ffffff;
}

/* لو استخدمت سلايدر لاحقًا باسم main_slider */
#main_slider .carousel-control-next,
#main_slider .carousel-control-prev {
    width: 50px;
    height: 50px;
    font-size: 18px;
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
}

/* PAGINATION أسفل السيارات */

.pagination .page-link {
    color: #333;
    border-radius: 4px;
    margin: 0 3px;
    border: 1px solid #dddddd;
    font-size: 14px;
}

.pagination .page-item.active .page-link {
    background-color: #fc0606;
    border-color: #fc0808;
    color: #ffffff;
}

.pagination .page-link:hover {
    background-color: #eeeeee;
    border-color: #dddddd;
}

/* gallery section end */


/* contact section start */

.contact_section {
    width: 100%;
    float: left;
    padding: 80px 0 70px;
    background-color: #f7f7f7;
}

.contact_taital {
    font-size: 32px;
    color: #111;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact_section .contact_taital + p {
    color: #555;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 0;
}

/* الحاوية الداخلية للكرت والخريطة */
.contact_wrapper {
    max-width: 1100px;
    margin: 40px auto 0;
}

/* كرت الفورم + المعلومات */
.contact_card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.contact_card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* مربعات المعلومات يمين الفورم */
.contact-info-row {
    margin-top: 5px;
}

.contact-info-box {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.contact-info-box h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #333;
}

.contact-info-box i {
    margin-right: 6px;
    color: #f50808;
}

.contact-info-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* فورم التواصل */
.mail_text.form-control,
.massage-bt.form-control {
    background-color: #fafafa;
    border-radius: 6px;
    border: 1px solid #dddddd;
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
}

.mail_text.form-control:focus,
.massage-bt.form-control:focus {
    background-color: #ffffff;
    border-color: #f60808;
    box-shadow: 0 0 0 0.1rem rgba(254,91,41,0.25);
}

/* زر الإرسال */
.send_bt {
    margin-top: 5px;
}

.send_bt button {
    background-color: #f70808;
    border: none;
    border-radius: 4px;
    padding: 10px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
}

.send_bt button:hover {
    background-color: #f72307;
}

/* حذف تأثير قديم على الرابط (لم نعد نستخدم <a>) */
.send_bt a:hover {
    color: inherit;
    background-color: inherit;
}

/* خريطة أسفل الكرت */
.map_container {
    margin-top: 10px;
}

.map_container iframe {
    width: 100%;
    height: 350px;
    border-radius: 12px;
    border: 0;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* هوامش للموبايل */
@media (max-width: 767.98px) {
    .contact_section {
        padding: 60px 0 50px;
    }
    .contact_card {
        padding: 20px 18px;
    }
    .contact_card h2 {
        font-size: 18px;
    }
}

/* contact section end */

/* choose section start – NOS SERVICES */

.choose_section {
    width: 100%;
    float: left;
    padding: 70px 0;
    background: radial-gradient(circle at top, #2b2b2b 0, #151515 55%, #050505 100%);
border-bottom: 4px solid red;
border-top: 2px solid red;
}

.choose_taital {
    width: 100%;
    text-align: center;
    font-size: 34px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.choose_section .choose_taital::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    margin: 12px auto 0;
    background: #f40606;
    border-radius: 10px;
}

.choose_section_2 {
    width: 100%;
    float: left;
    padding-top: 40px;
}

/* كرت الخدمة */

.service_box {
    background: #222222;
    border-radius: 10px;
    padding: 25px 20px 30px;
    text-align: center;
    color: #f5f5f5;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.service_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

/* الأيقونة */

.service_icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_icon i {
    font-size: 30px;
    color: #f60b0b;
}

.service_icon img {
    max-width: 38px;
    max-height: 38px;
}

/* عنوان الخدمة */

.safety_text {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* سطر فرعي تحت العنوان (subtitle) */

.service_subtitle {
    font-size: 14px;
    color: #bbbbbb;
    margin-bottom: 12px;
}

/* نص الوصف */

.choose_section .ipsum_text {
    width: 100%;
    float: none;
    color: #dddddd;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* تباعد على الموبايل */

@media (max-width: 767.98px) {
    .choose_section {
        padding: 50px 0;
    }
    .service_box {
        margin-bottom: 15px;
    }
}

/* ===== FOOTER PREMIUM DARK RED ===== */

.footer_section {
   width: 100%;
   float: left;
   padding: 60px 0 40px 0;
   background:
      radial-gradient(circle at top, #2a2a2a 0, #090909 55%, #000000 100%);
   border-top: 3px solid #f80a0a;
   color: #f5f5f5;
}

/* عناوين الأعمدة */
.footer_col_title {
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #ffffff;
   margin-bottom: 18px;
}

/* أسطر النص */
.footer_line {
   font-size: 14px;
   color: #e5e5e5;
   margin-bottom: 8px;
}

.footer_line i {
   margin-right: 8px;
   color: #fa0707;
}

/* شعار الكراج */
.footer_logo_bottom img {
   max-width: 180px;
   filter: drop-shadow(0 3px 10px rgba(0,0,0,0.8));
}

.footer_slogan {
   font-size: 13px;
   color: #cccccc;
   letter-spacing: 0.3px;
}

/* أيقونات السوشال */
.footer_section .social_icon ul {
   display: inline-flex;
   gap: 12px;
   padding-left: 0;
}

.footer_section .social_icon ul li {
   list-style: none;
}

.footer_section .social_icon ul li a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255,255,255,0.06);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-size: 18px;
   transition: all 0.25s ease;
}

.footer_section .social_icon ul li a:hover {
   background: #f50404;
   color: #ffffff;
   transform: translateY(-2px);
}

/* خطوط فاصلة خفيفة بين الأعمدة على الديسكتوب */
@media (min-width: 768px) {
   .footer_section .col-md-4 {
      border-right: 1px solid rgba(255,255,255,0.06);
   }
   .footer_section .col-md-4:last-child {
      border-right: none;
   }
}

/* حقوق النشر */
.copyright_section {
   width: 100%;
   float: left;
   background: #050505;
   border-top: 1px solid red;
   padding: 12px 0;
}

.copyright_text {
   width: 100%;
   text-align: center;
   font-size: 13px;
   color: #bbbbbb;
   margin: 0;
   letter-spacing: 0.3px;
   font-family: 'Poppins', sans-serif;
}

.copyright_text a {
   color: #ffffff;
   font-weight: 600;
}

.copyright_text a:hover {
   color: #fa0a0a;
}