/*
ProVision Co.
-------------
This web application design and development by ProVision Co.

All source files, presentable or core, graphics and layout are owned/controlled by ProVision, and no one, entity or individual, can use/modify/destribute at anytime or to anywhere without a written approval from ProVision.

This website/web app is based on LegionCMS engine, which is a MVC platform built completely from scratch by ProVision's team.

-We know that you like this code, if you are interested joing our team, dont hesitate sending your CV to us.
--------------
Omar Shamali
https://provision.ps 
*/

@media all and (max-width: 1199px) {
  .w1200{
    width: 100%;
  }
  /* l_w1200 also needs full-width on mobile (fixed 1200px hardcoded otherwise) */
  .l_w1200{
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Featured section: ensure card swiper shows correctly at full width */
  .featured-vehicles-section .l_w1200{
    overflow: visible !important;
  }
  .swiperCare{
    overflow: hidden !important;
    width: 100%;
  }
  .featured-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  .featured-title{ font-size: var(--fs-h3); }

  .title_main{
    text-align: center ;
    padding: 0 10px;
  }

.main_section_car,.main_section_car_summary {
   width: 80%;
    text-align: center;
    margin: auto;
}
.l_grid2.about_main.l_mb50,#services_box {
  padding: 15px;
}
.main_section_car{
  font-size: 25px;
}
 .main_section_car_summary {
   
    margin-top: auto;
    margin-top: 19px;
  }
  .social_header{
    width: 15%;
  }
  .car-360-container {
  width: 100% !important;
  height: unset !important;
  }
  .search.w10.mid {
    display: none;
  }
  #mob_menu_btn {
    display: inline-block;
    color: white;
    font-size: 44px;
    float: right;
    top: 18px;
  }
  #real_main_ul li ,#real_main_ul1 li {
    display: block;
    width: 100%;
    margin: unset;
    text-align: left;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #real_main_ul li:last-child, #real_main_ul1 li:last-child {
    border-bottom: none;
  }
  #real_main_ul {
    top: 0;
  }
  .logo_box {
    width: auto;
    height: 56px;
    display: inline-flex;
    align-items: center;
  }
  .logo_menu_box img {
    height: 42px !important;
    width: auto !important;
  }
  #real_main_ul1 ,#real_main_ul {
    /* Override desktop display:flex — stack items vertically */
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative;
    left: 0;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    z-index: 10060;
    background: #1c1c1c;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  }
  /* Nav1 breaks out of the logo row — wraps to its own full-width row below */
  #menuCont .menuline:first-child {
    flex-wrap: wrap;
    align-items: center;
  }
  #real_main_ul1 {
    flex: 0 0 100% !important;
    order: 99;
    margin-bottom: 2px !important;
  }
  #real_main_ul li a.head, #real_main_ul1 li a.head {
    display: block;
    padding: 13px 20px !important;
    font-size: 14px !important;
    line-height: 1.4;
    color: #e0e0e0 !important;
  }
  #real_main_ul li a.head:hover, #real_main_ul1 li a.head:hover {
    color: var(--mc) !important;
    background: rgba(16,199,139,0.08);
  }
  #real_main_ul1 li:first-child {
    border-radius: 5px 5px 0 0;
  }
  #real_main_ul li:last-child {
    border-radius: 0 0 5px 5px;
  }
  .noselect.menu_items_box:hover {
    background: rgba(16,199,139,0.1) !important;
    box-shadow: none;
  }
  .real_main_ul_sh {
    display: none;
  }
  /* Override ID-selector display:flex from main.css header redesign */
  #real_main_ul.real_main_ul_sh,
  #real_main_ul1.real_main_ul_sh {
    display: none !important;
  }
  .car_main_details {
    bottom: 20%;
    text-align: right;
  }
  #mob_menu_btn{
    z-index: 10;
  }
  .main_sub_box2 {
  width: 150px !important;
}

.slider_photo {
  width: 88%;
}
.continer , .main_sub_b,#services_main, #vid_box ,#services,#testimonial_wrap,#team_wrap,.p_content, .th-section,.description,.Finance_btn_box,.Finance_title,.page_container{
  padding: 15px;
}
#footer .w1200.l_grid3{
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  padding: 0 var(--sp-lg);
}
#social_links_wrap {
  text-align: center;
}
.sec_head.sec_normal{
  padding-left: 10px;
}
.menuline {
  padding: 0 5px;
}
.partner-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  transform: translate(379px,100px);
}
.l_grid4{
    grid-template-columns: repeat(4, 1fr);
}
.product-grid{
  grid-template-columns: repeat(2,1fr) !important;
}
.bottom_box .l_grid3 ,.dropdowns.l_grid3{
  grid-template-columns:repeat(3,1fr)
}
  .filter_box input[name="text_search"] {
    width: 100% !important;
  }
#min_value {
  width: 10%;
}
#max_value {
  margin-left: 4px;
}
.general_form_873617_personal_code, .general_form_873617_landline_code, .general_form_873617_work_phone_country_code_ {
  width: 20%;
} 

.payment_method_photo {
  height: 200px !important;
  margin-bottom: 16px;
}
.scroll_header, .subpages {
  height: 100px;
}
#menuCont{
  margin: unset;
}
mh {
 
  height: 66px;
}
#sell_form_ .l_tab_toggler {
  width: 24.7%;
  height: 50px;
  align-content: center;
}
.list1 .select2 {
  max-width: 249px !important;
}
.payment_method_title{
  background: #fff;
}
  .mobile_field.general_form_873617_phone_number, .general_form_873617_telephonehome, .general_form_873617_telephonework {
    width: 80% !important;
  }
    .general_form_873617_personal_code, .general_form_873617_landline_code, .general_form_873617_work_phone_country_code_ {
    width: 23% !important;
  }
   #form_bank .onfour {
  width: 33.3%;
}
  .mobile_field.general_form_873617_phone_number label, .general_form_873617_telephonehome label, .general_form_873617_telephonework label {
    transform: translateX(-24%);
  }
.contact_informatione i{

  vertical-align: top !important;
  top: 11px ;
}
.car_colors_photo_picture {
  width: 100% !important;
}


				/* // transformElement(this.slideShow, 'translateX(calc('+transformValue+'%  - 0))'); */

.cd-product-viewer-wrapper .product-viewer {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
.cd-product-viewer-wrapper .product-sprite {

  width: 2405% !important;
}
.xee{
  width: 100%;
}
}
@media all and (max-width: 575px) {
 .social_header {
    width: 38%;
  }
  .main_box.l_mb30{
    display: none;
  }
   #services_box .services_box,
   #services_box .services_box.reverse {
        flex-direction: column;
        text-align: left;
    }
#services_box .services_photo_picture2 {
  width: 100% !important;
  height: 200px !important;
}
  .slider_photo {
    width: 100%;
  }
  .slider_photo img{
    object-fit: contain;
  }
.w50 {
  width: 100%;
  padding: unset !important;
}

.contact_informatione i {

  width: 10%;
}
.moto-title2 {

  font-size: 28px;
}
.contact_informatione.Privacy {

  margin-top: 30px;
  width: 350px;
  transform: translateX(-159px);
}

#electric_cars_properties_wrap .l_grid3 ,#team_wrap .l_grid3 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--sp-md);
}
.testimonial_right{
  grid-column: span 1;
}
#testimonial_wrap .l_grid4{
 grid-template-columns: repeat(2, 1fr);
}
.testimonial_right.l_grid_span3::before{ font-size:48px; }
.left_box_contact.in.w30 {
  width: 100%;
}
.right-box.in.w70 {
  width: 100%;
}
.filter-wrapper {
  width: 100%;
  position: static;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-lg);
}
.cars_box2 {
  width: 100%;
  padding-left: 0;
}
  .product-grid {
    grid-template-columns: repeat(2,1fr) !important;
    gap: var(--sp-md) !important;
  }
  .top_btns {
  display: flex;
  flex-wrap: wrap;
}
.top_btns_div{
  margin: 0;
}
.newly-listed-tiles {
  font-size: var(--fs-h2);
}
  .Finance_btn_box_grid{
      grid-template-columns: repeat(2, 1fr);
  }
  .dropdowns.l_grid3 {
    grid-template-columns: repeat(1,1fr);
  }
  .single_page_photo.in.w40 {
  width: 100%;
  padding: unset;
  margin-top: 10px;
}
.single_page_left.in.w60.l_padr10 {
  width: 100%;
  padding: unset;
}
.single_page_photo img {
  border-radius: 10px;
}
 #sell_form_ .l_tab_toggler {
    width: 49.4%;
    height: 50px;
    align-content: center;
    border-radius: unset;
    margin: unset;
    border: 0.3px solid black;
  }
  .check_box_wrap.nos {
  height: unset;
  }
  #comparisonTable {

  overflow: scroll;
  display: block;
}
#comparisonTable th, #comparisonTable td {
  padding: 6px;
  border: 1px solid #ccc;
  font-size: 10px;
}
.main_sub_box {
  width: 49%;
}

#car_colors_wrap{
  width: 100%;
}
.slobe {
  align-content: center;
}
.video {
 
  width: 80%;
}
.swiper-button-next, .swiper-button-prev {

  top: 55%;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 1px;
  padding-right: 1px;
}
  .general_form_873617_personal_code, .general_form_873617_landline_code, .general_form_873617_work_phone_country_code_ {
    width: 25% !important;
  }
    .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 1px !important;
    padding-right: 1px !important;
    font-size: 10px !important;
  }

  .l_grid3{
    grid-template-columns: repeat(1, 1fr);
  }
  #testimonial_wrap .l_grid4{
    grid-template-columns: 1fr;
  }
  .testimonial_photo_picture{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    min-height:200px;
  }
  .testimonial_right.l_grid_span3{ padding:var(--sp-md); }
  .testimonial_right.l_grid_span3::before{ font-size:40px; }
  .electric_cars_properties_box{ padding:var(--sp-lg) var(--sp-md); }
  .product-grid{ grid-template-columns: 1fr !important; }
  .style_photo_picture.zoom-container{ height:180px; }
  .bottom_box .l_grid3{ gap:var(--sp-xs); }
  .page_subtitle{ font-size:var(--fs-h3) !important; margin-bottom:var(--sp-md); }
  .page_subtitle::before{ width:3px; height:22px; }
}

/*375*/
@media all and (max-width: 991px){
  .hero-search-form select, .search-btn{ width:100%; }
}

/* ── Hero: Mobile Responsive (≤768px) ── */
@media all and (max-width: 768px){
  /* Swiper becomes auto-height: image on top, content flows below */
  .mySwiper2{
    overflow: visible;
    height: auto !important;
  }
  /* Swiper wrapper + slides: fixed height = car image area only */
  .mySwiper2 .swiper-wrapper,
  .mySwiper2 .swiper-slide,
  .mySwiper2 .swiper-slide .slide_box{
    height: 55vh !important;
    min-height: 260px !important;
    max-height: 400px !important;
  }
  /* Override the 100vh rule from main.css for the hero slide */
  .main_hero{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Overlay: in-flow BELOW the image (not absolute on top) */
  /* This means the article height = image height + content height → no clipping */
  .hero-fixed-overlay{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    pointer-events: auto;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0 48px;
    background: #0d1a15;
  }

  /* Full-width centered container on mobile */
  .hero-fixed-overlay .w1200.hero-inner{
    max-width:100% !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 20px !important;
    box-sizing:border-box !important;
  }
  .hero-inner{ padding:0 20px; box-sizing:border-box; max-width:100%; }

  /* Typography scaling */
  .hero-title{ font-size:24px; max-width:100%; letter-spacing:-0.01em; }
  .hero-support{ font-size:var(--fs-xs); }
  .hero-sub{ font-size:var(--fs-xs); max-width:100%; }

  /* Stack CTA buttons vertically, full width */
  .hero-cta-row{ flex-direction:column; gap:10px; align-items:stretch; }
  .hero-cta{ width:100%; min-width:0; justify-content:center; text-align:center; }

  /* Search card full width */
  .hero-search-card{ max-width:100%; padding:var(--sp-md); box-sizing:border-box; }
  .hero-tabs{ flex-wrap:wrap; gap:6px; }
  .hero-tabs button{ flex:1 1 auto; text-align:center; }
  .hero-search-form .search-row{ grid-template-columns:1fr; gap:8px; }
  .search-row-more{ grid-template-columns:1fr; gap:8px; }
  .more-filters-toggle{ height:40px; font-size:12px; }
  .hero-search-form select{ width:100%; }
  .search-btn{ grid-column:1/-1; width:100%; }

  /* Stats: 2-column grid on mobile */
  .hero-stats{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    margin-top:10px;
    max-width:100%;
  }
  .hero-stats .stat{ padding:10px 12px; gap:8px; }
  .stat-icon{ width:32px; height:32px; }
  .hero-stats .stat strong{ font-size:18px; }
}

/* ── Hero: Small phones (≤480px) ── */
@media all and (max-width: 480px){
  /* Smaller image on very small screens */
  .mySwiper2 .swiper-wrapper,
  .mySwiper2 .swiper-slide,
  .mySwiper2 .swiper-slide .slide_box{ height:50vh !important; min-height:240px !important; }
  .hero-title{ font-size:20px; }
  .hero-badge{ font-size:10px; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .hero-inner{ padding:0 16px; }
  .hero-fixed-overlay .w1200.hero-inner{ padding:0 16px !important; }
}

@media all and (max-width: 575px){
  .hero-inner{ padding:0 16px; box-sizing:border-box; }
  .hero-search-form .search-row{ grid-template-columns:1fr; }
  .search-row-more{ grid-template-columns:1fr; }
  .hero-title{ font-size:22px; }
}
/* ── Contact Page (ci-*) ── */
@media all and (max-width: 900px) {
  .ci-page { flex-direction: column; }
  .ci-left  { width: 100%; }
  .ci-right { width: 100%; }
  .ci-info-card { position: static; }
}
@media all and (max-width: 575px) {
  .ci-page { padding: 30px 16px 60px; gap: 20px; }
  .ci-form-card, .ci-success { padding: 28px 20px; }
  .ci-form-row { grid-template-columns: 1fr; }
  .ci-info-card { padding: 28px 20px; }
}

/* ── Dealers Listing Page (dlp-*) ── */
@media all and (max-width: 1024px) {
  .dlp-grid { grid-template-columns: repeat(2,1fr); gap: 22px; }
}
@media all and (max-width: 650px) {
  .dlp-hero { padding: 50px 16px 42px; }
  .dlp-hero-title { font-size: 1.9rem; }
  .dlp-hero::after { display: none; }
  .dlp-body { padding: 36px 16px 50px; }
  .dlp-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Single Dealer Page (dsp-*) ── */
@media all and (max-width: 900px) {
  .dsp-grid { grid-template-columns: repeat(2,1fr); }
}
@media all and (max-width: 650px) {
  .dsp-hero { padding: 180px 16px 52px; }
  .dsp-name { font-size: 1.7rem; }
  .dsp-profile-row { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .dsp-meta-row { justify-content: center; }
  .dsp-actions { justify-content: center; }
  .dsp-grid { grid-template-columns: 1fr; }
  .dsp-section-title::after { display: none; }
  .dsp-body { padding: 40px 16px 60px; }
}

/* ── About Page Enhancement Responsive (abp-) ── */
@media all and (max-width: 1200px) {
  #electric_cars_properties_wrap,
  #partners_wrap,
  #testimonial_wrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
@media all and (max-width: 900px) {
  .abp-stats-bar { grid-template-columns: 1fr 1fr; }
  .abp-stat { border-bottom: 1px solid rgba(255,255,255,.08); }
  .abp-stat:nth-child(even) { border-right: none; }
  .abp-stat:nth-child(3),
  .abp-stat:nth-child(4) { border-bottom: none; }
}
@media all and (max-width: 540px) {
  .abp-stats-bar { border-radius: var(--radius-lg); }
  .abp-stat { padding: var(--sp-lg) var(--sp-md); }
  .abp-stat-num { font-size: 1.8rem; }
}

/* ── Auth & Account Responsive ── */
@media all and (max-width: 600px) {
  .auth_card,
  .account_card { padding: 32px 20px; border-radius: 0; box-shadow: none; }
  #auth_section,
  #account_section { padding: 32px 0; background: var(--bg-white); }
  .account_header { flex-direction: column; text-align: center; gap: 16px; }
  .account_detail_row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .account_detail_value { text-align: left; }
}

/* ── Dealer Dashboard Responsive ── */
@media all and (max-width: 768px) {
  .dealer_dash_header { flex-direction: column; align-items: flex-start; }
  .dealer_add_row { grid-template-columns: 1fr; }
  .dealer_add_card { padding: 24px 16px; }
  .dealer_dash_section { padding: 20px 16px; }
  .dealer_dash_table th,
  .dealer_dash_table td { padding: 8px 10px; }
  .dealer_status_form { flex-direction: column; align-items: flex-start; }
}

/* ── Header Auth Responsive ── */
@media all and (max-width: 768px) {
  .auth-nav-btn span { display: none; }
  .auth-nav-btn { padding: 6px 10px; }
}