/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

/* Your custom CSS goes below */

.text-color{ color: #E93C0A !important; font-weight:600 !important; }
.text-color-wd{ font-weight:600 !important; }
.blog:hover .blog-bg{ background:transparent !important; }
.blog:hover div, .blog:hover h3, .blog:hover span, .blog:hover h3 .text-color{ color: #fff !important; }
.blog h3 .text-color { color: #000 !important; font-weight: 400 !important; }
.blog:hover svg{ fill: #fff!important; }
.elementor-element.banner-img{ position:relative; }

/* .elementor-element.banner-img, */ .elementor-element.banner-img:before { background-size: 50% 100% !important; object-fit: cover !important; }
.blog:hover svg{ fill: #fff!important; }
.blog .post-btn{ display:none; }
.blog:hover .post-btn{ display:block !important; }
.services .service-btn a{ color: #fff !important; }
.services .service-btn button{ border-color: #fff !important; background:transparent !important; }
.services .service-btn, .services:hover .service-img::after,
.services:hover .elementor-widget::after { display:none; }
/* 
.services-temp { transform: transform 0.4s ease; } */
.services .service-img::after{ top:20px !important;}
/* .services .service-img::after,
.services .elementor-widget::after{ content: ""; position: absolute; top: 0px; bottom: 0px; right: -20px; width: .5px; background: #9D9D9D; } */
.services:hover img { margin-top:-65px !important;} 
.elementor-swiper-button {
    top: 51% !important;
}
.services:hover .service-btn{ display:block !important;} 
.services:hover h3, .services:hover div{ color: #fff !important; }
.services{ position: relative; }
.services:after{ content: ""; background: linear-gradient(to bottom, #E93C0A, #D3660B); top:-50px; left:0; right:0;
bottom:0; position:absolute; z-index:-1; opacity:0; }
.services:hover:after{ opacity: 1; }
.service-bg{ background: linear-gradient(to top, #DADADA 90%, transparent 10%); }
.services:hover { padding-top: 0 !important;}
.testimonial-card { background: #fff; padding: 20px; box-shadow: 0 0px 10px rgba(0,0,0,0.3); display: grid !important; grid-template-columns: 30% 70%; margin:20px 0; }
.testimonial-card h4{ font-size:24px; color:#E93C0A; font-weight:600; margin: 20px 0 5px 0; }
.testimonial-date { font-size:16px !important; font-weight:400 !important; }
.testimonial-left { text-align:center; }
.rating { color: #E93C0A; margin-bottom: 10px; padding-left: 30px; font-size:28px; }
.rating p{ font-size:16px; color: #000; }
.right-side-blog .elementor-post__meta-data { justify-content: space-between;  background: linear-gradient( to left, rgba(233, 60, 10, .31), rgba(211, 102, 11, .31) ); color: #000 !important; display: flex; padding: 12px 20px; border-radius: 10px; position: absolute; top: 20px;  width: 59%; }
.right-side-blog article{ position: relative; }
.right-side-blog h3 span, .left-side-blog h3 span, .blog-tit h3 span{ color:#000 !important; font-weight:600 !important; }
.blog-list .elementor-post__thumbnail { height: 100% ! IMPORTANT; }
.left-side-blog .elementor-post__meta-data { justify-content: space-between;  background: linear-gradient(to left, #E93C0A, #D3660B); color: #fff !important; display: flex; padding: 12px 20px; border-radius: 10px; position: absolute; margin-top:-110px;  width: 85%; }
.left-side-blog article{ position: relative; }
.owl-dots { text-align: center; margin-top: 20px; }
.owl-dots .owl-dot {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #ddd;
    border-radius: 50%;
    margin: 5px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
}
.owl-nav button:hover{background: #E93C0A !important; }
.owl-dots .owl-dot.active { background: #E93C0A !important; color: #fff; }
.testimonial-fraction {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: -40px;
    font-weight: 400;
}

.testimonial-fraction .current {
    color: #ff3d00;
	font-weight: 600;
    font-size: 32px;
}
.testimonial-fraction .separator,
.testimonial-fraction .total { font-size: 16px; margin-left: 4px; }
.owl-nav { display: flex; justify-content: center; gap: 100px; margin-top: 10px; }
.owl-nav button { width: 35px; height: 35px; border-radius: 50%; background: #000 !important; color: #fff !important; font-size: 20px; }
.stand-for figure.elementor-image-box-img { background: #E93C0A33; padding: 15px; border-radius: 50px; }
.cont-btn{ display: none !important; }
.head-menu .sub-menu li.menu-item { border-bottom: 1px dashed #E93C0A; }
.head-menu .sub-menu{ padding: 20px !important; }
.testimonial-carousel .owl-stage { display: flex; }
.testimonial-carousel .owl-item { opacity: 1; transition: all 0.3s ease; }
.testimonial-carousel .owl-item.active { opacity: 1; }
.testimonial-carousel .owl-item.active:after, .owl-item.active.center{ background-image: url(/wp-content/uploads/2025/12/Rectangle-28.png); background-position: center; background-repeat: no-repeat; background-size: 90% 100%; position:absolute; z-index:9999; }
.testimonial-wrapper { overflow: hidden; }
.owl-item.active.center{ margin-left: -2%;}
.testimonial-carousel .owl-stage-outer { padding-left: 0 !important; margin-bottom:50px; }
.testimonial-carousel .owl-item.active { position: relative; z-index:999; }
.testi { position: relative; }
.testi::after { content: ""; position: absolute; width: 21.1%; height: 100%; background: #fff; z-index: 9; left: 0; top: 0; bottom: 0; display: block; }
.elementor-post__meta-data { display: flex; gap: 12px; }
.elementor-post__meta-data span { position: relative; padding-left: 28px; }
.elementor-post-date::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('/wp-content/uploads/2025/12/bx_calendar-1.png') no-repeat center; background-size: contain; }
.elementor-post-avatar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('/wp-content/uploads/2025/12/ant-design_comment-outlined.png') no-repeat center;
  background-size: contain;
}

.left-side-blog .elementor-post-date::before, .left-side-blog .elementor-post-avatar::before{ filter: brightness(0) invert(1); }
span.faq-icon { position: absolute; right: 25px; font-size: 26px; margin-top: -3px; }
.faq-wrapper { max-width: 100%; margin: auto; }
    .faq-item { padding: 10px 0; }
    .faq-title {
      cursor: pointer;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 10px;
	  font-size:18px;
	  background: rgba(233, 60, 10, 0.15); padding: 13px 40px 13px 25px; border-radius:10px;
    }
    .faq-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: #E93C0A;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .faq-item.active  { background: linear-gradient(to left, #E93C0A, #D3660B); border-radius:10px; color:#fff; margin:15px 0; } 
   .faq-item.active .faq-icon{ color:#fff;  }
   .faq-content { display: none; padding-top: 10px 30px; color: #fff; }
  .faq-content p{ padding: 0 25px; }
  .faq-load-more { margin-top: 20px; padding: 10px 28px; color: #000; border: 1px solid #E93C0A; border-radius: 6px;              cursor: pointer; margin: 40px auto; display: flex; }

.faq-load-more:hover{ background: linear-gradient(to left, #E93C0A, #D3660B) !important; color: #fff !important; }


.faq-load-more.loading { pointer-events: none; opacity: 0.8; }
.faq-load-more.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 10px;
  display: inline-block;
  margin-left: 10px;
  animation: faqSpin 0.8s linear infinite;
}

@keyframes faqSpin { to { transform: rotate(360deg); } }


/* Normal header */
header{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
  
}

/* Logo normal size */
header img{ transition: all 0.3s ease; }

/* Sticky state */
header.is-sticky{
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}


#scrollTop{
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 45px;
  height: 45px;
  background: linear-gradient(to left,#E93C0A,#D3660B);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

/* Show on scroll */
#scrollTop.show{
  opacity: 1;
  visibility: visible;
}

/* Hover effect */
#scrollTop:hover{
  transform: translateY(-4px);
}
.contact-icon a{ color: #000 !important;}
.contact-icon .elementor-icon-box-icon{ border: 7px solid #E93C0A4D; border-radius:50px; }



/* Base card (inactive) */
.testimonial-card {
    width: 800px;
    min-height: 300px;
    background: #fff;                 /* normal background */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
}
.owl-nav.disabled { display: flex !important; }

.shop-btn button {  background: #E1571F; border-radius: 6px; border-color: #E1571F !important; width: 100%; }
.shop-btn button a{ color: #fff !important; }
 .view-btn button a {
	 color: #000 !important;
}
.view-btn button {
	background: #fff;
    border-color: #E1571F;
    border-radius: 6px;
    border-color: #E1571F !important; width: 100%;
}



.car-meta{
    display:flex;
    gap:20px;
    align-items:center;
    font-size:14px;
    color:#555;
}

.meta-item{
    display:flex;
    align-items:center;
    gap:6px;
}

.meta-item i{
    color:#ff5a00;
    font-size:15px;
}

.dealer-img img{ width: 50px !important; border-radius:50px; }
.dealer-img { display: flex; align-items: center; }

/* .popup-car-detail{display:block; position:fixed; z-index:99;  } */

.detail-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: #000000e8;
    z-index: 9999;

    /* allow scrolling if content is tall */
    overflow-y: auto;
    padding: 20px;
}

.detail-cont {
    position: relative;           /* IMPORTANT */
    margin: auto;                 /* center horizontally */
    
    background: #fff;
    border-radius: 30px;
    width: 1170px;
    max-width: 100%;
    padding: 20px;

    /* limit height */
    max-height: calc(100vh - 40px);
    overflow-y: auto;             /* inner scroll */
}





.car-spec-wrap h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 28px 0 18px;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 12px;
}

.spec-item {
    display: flex;
    align-items: center;
}

.spec-item span {
	width:160px;
    font-size: 16px;
    color: #9a9a9a;
	font-weight: 500;
}

.spec-item strong {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: right;
}
.post-cont h2{ margin-top: 40px; }
.post-cont h3{ color: #E93C0A; font-weight:600; margin-top: 40px; }
.post-cont p{ font-size:20px; line-height:35px; }

.subscr .elementor-message.elementor-message-success.elementor-message-svg {
    color: #fff;
}
.elementor-pagination {
    display: none;
}



/* Mobile */
@media (max-width: 600px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }
}


 
@media screen and (max-width: 1440px) {
     .page-width .e-con-inner, .blogs { width: 1170px !important; margin:auto !important; }
/* 	 h1 {  font-size: 45px !important; line-height: 52px !important; }
	 h2 {  font-size: 34px !important; line-height: 38px !important; } */
}


@media screen and (max-width: 768px) { 
	.elementor-element.banner-img:before { background-size:100% 550px !important; object-fit: cover; background-position: center bottom !important; }
	.cont-btn{ display: block !important; }
	ul#menu-2-cbdbf31 { padding: 20px; }
	.testi::after{ display:none; }
	.testimonial-card { width: 90%; display:block !important; margin:10px auto !important; }
	.rating { padding: 10px !important; text-align: center; }
	.testimonial-carousel .owl-item.active::after{ height:500px !important; max-height:500px !important; min-height:500px !important; }
	.owl-carousel .owl-item img{ width: 60%; margin: 30px auto 0 auto; }
	.blog:hover .blog-bg{ background:#CDCDCD !important; }
.blog:hover div, .blog:hover h3, .blog:hover span{ color: #000 !important; }
.blog:hover svg{ fill: #000!important; }
	.blog .post-btn { display:block !important; }
	.blog .post-btn a{ color: #000 !important; border-color: #E93C0A !important; }
	.right-side-blog .elementor-post__meta-data {  width: 85.5%; }
	
	
	
}
@media screen and (max-width: 481px) {
    h1 { font-size: 34px !important; line-height: 38px !important; }
	h2 { font-size: 24px !important; line-height: 30px !important; }
	.elementor-element.banner-img:before { background-size:100% 350px !important; object-fit: cover; 
		    background-position: center bottom !important; }
	.right-side-blog .elementor-post, .blog-list .elementor-post { display: block !important; }
	.right-side-blog .elementor-post__meta-data { top: 295px; width: 89.5% !important; }
	.left-side-blog .elementor-post__meta-data { width: 89.5% !important; }
	.services .service-img::after,
	.services .elementor-widget::after{ display:none !important; }
	.left-side-blog .elementor-post__meta-data{ margin-top: -135px; }
}

@media screen and (max-width: 390px) {
    .right-side-blog .elementor-post__meta-data {
        top: 270px;
        width: 89.5% !important;
    }
}