/* Arabic HOME PAGE only (loaded by index.php when the language is Arabic). These are rules the English stylesheet has and css/style_ar.css lacks:
   the hero video as a background and the vote slider (coverflow) styling. Kept in its own file so no other Arabic page is affected,
   and so the link can change whenever this file changes (style_ar.css is linked with a fixed ?1 and cached for a week). */
/* Home hero video as a background, same as the English stylesheet. Without these rules the Arabic home page showed the video as a tall block
   and pushed the vote / countdown / prizes section about 775px down the page (and made the page jump while the poster loaded). */
#intovid1 {
  position: relative;
  overflow: hidden;
}
#intovid1 video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* ---- Rules the English stylesheet (style.css) has and this one lacked, for the HOME PAGE: the vote slider (coverflow), the cards, the footer
   background, the countdown buttons on phones and a few small ones. Without them the Arabic home page showed the slider as a 5000px column
   of stacked cards. Direction-sensitive English rules (p, .list-inline > li, .hnews2, .page-section-ptb) are deliberately NOT copied. ---- */
@media (max-width: 767px) {
  .modal-body .car-item .car-list li {
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .modal-body .car-item:hover .car-list {
    height: 20px;
  }
}
.feature-bus-style {
  margin-bottom: 15px;
  background-color: transparent;
  z-index: 50;
  margin-top: 30px;
}
.drop-down-multilevel {
  background-color: white !important;
}
.blink_me {
  animation: 1s linear 0s infinite normal none running blinker;
}
.custm-font {
  font-size: 25px !important;
  line-height: 58px !important;
}
.carousel-container {
  position: relative;
  width: 100%;
}
.carousel-main {
  height: 410px;
  max-width: 1140px;
  position: relative;
  font-size: 12px;
  font-family: Arial;
  margin: auto;
}
.carousel-feature {
  position: absolute;
  top: -1000px;
  left: -1000px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px 3px;
  background-color: rgb(255, 255, 255);
}
.carousel-feature a {
  font-size: 18px;
}
.carousel-image {
  border: 0px;
  display: block;
}
.car-item .car-overlay-banner ul li a.mainhref {
  display: none;
}
.cards {
  overflow: hidden;
  background: rgb(102, 102, 102);
  margin-bottom: 20px;
}
.cards .cards-image {
  overflow: hidden;
  position: relative;
}
.cards .cards-image img {
  width: 100%;
}
.cards:hover .cards-image img {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.cards:hover {
  background: rgb(221, 26, 34) !important;
}
#footer-bg {
  padding: 60px 0px;
  background: url("../photos/images/FooterBackg.webp") center center / cover no-repeat;
}
.cdrop .dropdown-menu li.active {
  background: rgb(255, 255, 255);
}
.dealer-deal-owl .owl-dots, .garages-services-owl .owl-dots {
  display: none;
}
.redirect-login-logo-img {
  width: 100% !important;
}
@media (max-width: 992px) {
  .stat-btn-wrapper {
    order: 1;
    width: 50%;
  }
}
@media (max-width: 992px) {
  .cal-btn-wrapper {
    order: 2;
    width: 50%;
  }
}
@media (max-width: 768px) {
  .stat-btn-wrapper {
    order: 1;
    width: 50%;
  }
}
@media (max-width: 768px) {
  .cal-btn-wrapper {
    order: 2;
    width: 50%;
  }
}
@media (max-width: 768px) {
  .dealer-deal-owl .owl-nav, .garages-services-owl .owl-nav {
    display: none;
  }
}
@media (max-width: 768px) {
  .dealer-deal-owl .owl-dots, .garages-services-owl .owl-dots {
    display: block;
  }
}
@media (max-width: 768px) {
  hr {
    margin: 0px auto;
  }
}
@media (max-width: 768px) {
  .car-item .car-image {
    background-color: white;
  }
}
@media (max-width: 768px) {
  .car-top {
    width: 50px;
  }
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* ---- From responsive.css (the English responsive file) which responsive_ar.css lacked: switches between the desktop slider and the phone
   slider (.desktop-view / .mobile-view; without these both showed on every screen) and a few small phone adjustments on this page. ---- */
@media (max-width: 1800px) {
  .mobile-view {
    display: none;
  }
}
@media (max-width: 992px) {
  .cdrop .btn {
    font-size: 12px;
    padding: 8px 4px;
  }
}
@media (max-width: 767px) {
  .mobile-view {
    display: block;
  }
}
@media (max-width: 767px) {
  .desktop-view {
    display: none;
  }
}
@media (max-width: 767px) {
  .hnews2 {
    font-size: 22px;
    margin-bottom: 5px;
  }
}
@media (max-width: 767px) {
  .quick-links-style {
    padding-top: 0px !important;
  }
}
@media (max-width: 767px) {
  .quick-links-style .section-title h2 {
    padding-top: 0px !important;
  }
}
@media (max-width: 767px) {
  .car-item .car-overlay-banner ul li a {
    width: 50px;
    height: 50px;
    line-height: 52px;
  }
}
@media (max-width: 767px) {
  .custm-font {
    font-size: 25px !important;
    line-height: 0 !important;
  }
}
@media (max-width: 479px) {
  .modal-dialog {
    margin: 0px;
  }
}
@media (max-width: 479px) {
  .modal-header {
    padding: 5px !important;
  }
}
@media (max-width: 479px) {
  .modal-body {
    padding: 5px;
  }
}
@media (max-width: 479px) {
  .btn-group-sm > .btn, .btn-sm {
    font-size: 12px;
  }
}

/* Layout shift fix. The vote slider parks its cards 1000px off to the LEFT until its script places them. On a right-to-left page that parked
   overflow is scrollable, so the page started scrolled sideways and snapped back when the cards arrived (layout shift about 0.6). Clipping the
   slider box horizontally removes the sideways overflow; vertical overflow (shadows, hover) is untouched. English is not affected (left overflow
   is not scrollable there) and does not load this file. */
.carousel-main {
  overflow-x: clip;
}