:root {
    --primaryColor: #d50110;
    --secondaryColor: #a3000b;
    --blackColor: #000;
    --whiteColor: #fff;
}

body {
    font-family: 'Nexa', sans-serif;
    font-weight: 400;
    font-size: 16px;
}
.slick-slider {
    margin-top: -7px;
}

.container-fluid {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
  #panorama {
        width: 100%;
        height: 100vh;
    }
			.custom-hotspot {
				height: 50px;
				width: 50px;
				background: transparent;
			}
			div.custom-tooltip span {
				visibility: hidden;
				position: absolute;
				border-radius: 3px;
				background-color: #fff;
				color: #000;
				text-align: center;
				max-width: 200px;
				padding: 5px 10px;
				margin-left: -220px;
				cursor: default;
			}
			div.custom-tooltip:hover span {
				visibility: visible;
			}
			div.custom-tooltip:hover span:after {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-width: 10px;
				border-style: solid;
				border-color: #fff transparent transparent transparent;
				bottom: -20px;
				left: -10px;
				margin: 0 50%;
			}
.mt-8 {
    margin-top: 5rem;
}

/*  Cars Functionality text Capitalize*/



/* Buttons */
.btn-primary {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    width: 250px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: var(--whiteColor);
    box-shadow: none;
    outline: 0;
}
@media only screen and (max-width: 786px){
    .navbar-collapse {
        background-color: black;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }
}
@media only screen and (max-width: 786px)
.navbar-collapse {
    background-color: white;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.btn-primary img {
    max-width: 14px;
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    position: relative;
    top: -2px;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--whiteColor);
    color: var(--whiteColor);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    width: 250px;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline:visited {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
    box-shadow: none;
    outline: 0;
}

.btn-outline-sm {
    background-color: transparent;
    border-color: var(--blackColor);
    color: var(--blackColor);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
}

.btn-outline-sm:hover,
.btn-outline-sm:focus,
.btn-outline-sm:visited,
.btn-outline-sm:active  {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
    box-shadow: none;
    outline: 0;
}

.btn-black {
    border-color: var(--blackColor);
    color: var(--blackColor);
}

.btn-black:hover,
.btn-black:focus {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
    box-shadow: none;
    outline: 0;
}

.label-black {
    background-color: var(--blackColor);
    color: var(--whiteColor);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
}
.label-black:hover {
    color: var(--whiteColor);
    opacity: 0.9;
}

h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Header Section */
.haval-nav {
    background-color: transparent;
    padding: 1.35rem 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
}
.haval-nav.open{
    background-color:#fff;
    position: fixed;
}
.navbar-brand img{
    max-width:180px;
}

.haval-nav .navbar-nav a {
    text-transform: uppercase;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
    font-weight: 400;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* Banner Section */
.section-banner-item {
    
    height: 110vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: bottom center;
}
.banner-home {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/newdesktop/05-%201920x1080.jpg');
}
.banner-home1 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/TANK-Web-Banners.webp');
}
.banner-item-3 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/newdesktop/05%20copy.jpg');
}
.banner-item-31 {
    background-image: url('https://storage.googleapis.com/havalimages/images/TANK/GWM%20tank%20web%20banner.1920by1080%20png.png');
    height: 52vw;
}


.banner-item-2 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Jolion-Web-Banners.webp');
}
.banner-item-4 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/JolionHEV-Web-Banners.webp');
}
.banner-item-5 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Optimized%20image/ORA03-Web-Banners-min.jpg');
}
.banner-item-6 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/ORA07-Web-Banners.webp');
}

.banner-item-7 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Optimized%20image/Tank-500-min.png');
}
/*.banner-item-8 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Optimized%20image/1920x1080-min.jpg');
}*/
.banner-item-21 {
    background-image: url('https://storage.googleapis.com/havalimages/images/TANK/remains%20photo/headernew.jpg');
}
.banner-h6 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Optimized%20image/05%20copy-min.png');
}
.banner-h6-2-0{
    background-image: url('https://storage.googleapis.com/havalimages/images/haval-h6-2-0-banner.jpg');
}
.banner-item-4 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/JolionHEV-Web-Banners.webp');
}
.banner-h6-hev {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/H6HEV-Web-Banners-3.webp');
}
.banner-h6-hev-2 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/Optimized%20image/05%20copy-min.jpg');
}
.banner-jolion-1 {
    background-image: url('https://haval.pk/wp-content/themes/haval/assets/images/Jolion-Web-Banners-v2.webp');
}

.banner-jolion-hev-1 {
    background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/JolionHEV-Web-Banners.webp');
}
.sec-banner-btn {
    position: absolute;
    bottom: 14vh;
    left: 0;
}

.section-home-content{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/advance-power.jpg');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 65vh;
    padding-bottom: 8rem;
}
.section-home-contenttank{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/TANK/New%20folder/banner1.jpg');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 65vh;
    padding-bottom: 8rem;
}
.section-home-contenttank1{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/TANK/New%20folder/banner2.jpg');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 65vh;
    padding-bottom: 8rem;
}
.section-home-contenttank2{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/TANK/New%20folder/banner3.jpg');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 65vh;
    padding-bottom: 8rem;
}
.section-home-content2{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/ORA/PARKING/Chassis.webp');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 5vh;
    padding-bottom: 8rem;
}
.section-home-contentengine{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/ORA/engine.png');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 5vh;
    padding-bottom: 8rem;
}
.section-home-contentchassis{
    padding: 5rem 0;
    background-image: url('https://storage.googleapis.com/havalimages/images/ORA/chassis.png');
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 5vh;
    padding-bottom: 8rem;
}

.section-advanced-power h2{
    padding-bottom:2rem;
}
.section-advanced-power img {
    max-width:140px;
}

.section-home-content-title{
    color: #fff;
}
.display-flex {
    display: flex;
}
.color-white {
    color: #fff;
}

.max-100 {
    max-width: 100px;
}

.engine-img-1 {padding: 25px;padding-bottom: 0px;}
.engine-img-2 {
    padding: 25px;
    padding-bottom: 0;
}

.section-p-slider2 {
    padding-top: 50px;
}
.section-p-slider3
{
    margin-top: 35px;
    padding-right: 40px;
}
.section-p-slider3.gip-text {
    padding-right: 6rem;
}
.section-p-slider3 p{
	text-align: justify;
	color: #231f20;
}
.section-p-slider3 h4{
	color:var(--primaryColor);
}
.text-bold{
    font-weight: bold;
}
.section-p-slider4
{
    gap: 3.5rem;
    margin-top: 3rem;
}
.section-p-slider4 img{
	max-width:140px;
}

.tab-btn {
	color: #000;
	padding: 3px;
	width: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
}

.tab-btn.active,
.tab-btn:hover
{ 
    background: var(--primaryColor) !important;
    color: #fff !important; 
}

/* Section Home Cars */
.section-home-cars {
    padding: 2rem 0;
    background-image: url(https://storage.googleapis.com/havalimages/images/bg-1.webp);
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 17rem;
}.section-home-carss {
    padding: 2rem 0;
    background-image: url(https://storage.googleapis.com/havalimages/images/bg-1.webp);
    background-size: cover;
    position: relative;
    background-position: top center;
    overflow: hidden;
    min-height:100vh;
    padding-top: 17rem;
}
.section-home-cars .swiper-slide img{
    width:70%;
    margin:0 auto;
    margin-bottom: 2rem;
}
.section-home-carss .swiper-slides img{
    width:70%;
    margin:0 auto;
    margin-bottom: 2rem;
}

.carname-item {
    width: 177px !important;
    cursor: pointer;
    text-align: center;
}
.carname-items {
    width: 177px !important;
    cursor: pointer;
    text-align: center;
}

.carname-item div {
    border-bottom: 3px solid transparent;
    display: inline-block;
    padding: 0.3rem 0px;
    font-size: 1.25rem;
    color: #000;
}
.carname-items div {
    border-bottom: 3px solid transparent;
    display: inline-block;
    padding: 0.3rem 0px;
    font-size: 1.25rem;
    color: #000;
}

.carname-item.swiper-slide-thumb-active div,
.carname-item:hover div {
    border-color: var(--primaryColor);
}
.carname-items.swiper-slide-thumb-actives div,
.carname-items:hover div {
    border-color: var(--primaryColor);
}

.swiper-img {
    text-align: center;
}
.swiper-imgs {
    text-align: center;
}

.swiper-img img {
    width: 80%;
    height: auto;
}
.swiper-imgs img {
    width: 80%;
    height: auto;
}

.section-home-cars .sec-banner-btn {
    bottom: 12%;
    z-index: 9;
}
.section-home-carss .sec-banner-btns {
    bottom: 12%;
    z-index: 9;
}

/* Section Services */
.section-services {
    background-color: #fff;
    padding: 8rem 0;
    background-image: url(https://haval.pk/wp-content/themes/haval/assets/images/service-bg.png);
    background-size: cover;
    background-position: bottom center;
}
.section-services .container{
    max-width:980px;
}

.section-services-title h2 {
    font-weight: 100;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-services-title h2 img {
    position: relative;
    top: -4px;
    margin-right: 15px;
}

.section-services-title p {
    font-size: 1.75rem;
    font-weight: 100;
}

.section-services-title {
    margin-bottom: 3rem;
}

.service-box {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
	margin:12px;
}

.service-box h3 {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    font-weight: 100;
    font-size: 2rem;
    text-align: center;
}

.service-white h3 {
    color: #fff;
}

.service-box img {
    max-width: 100%;
    width: 100%;
	  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.3);
}

/* Section Gallery */
.section-gallery{
    overflow: hidden;
    background-image: url(https://storage.googleapis.com/havalimages/images/slider-bg.webp);
    background-position: bottom center;
    background-size:cover;
    padding: 8rem 0;
    padding-bottom: 0;
}

/* Section Video */
.home-video video{
    width:100%;
    background-color: #000;
}

/*Section Booking*/
.secton-booking-drive{
    padding: 8rem 0;
    overflow: hidden;
}
.secton-booking-drive .container-fluid{
    padding-left:0;
    padding-right:0;
}
.secton-booking-drive img{
    width: 100%;
    height: auto;
}
.booking-form{
    text-align:center;
}
.booking-form .form-control {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #777;
    text-align:center;
    padding: 1.5rem 0;
    font-size: 1.25rem;
    font-weight: bold;
}
.booking-form .form-control:focus{
    box-shadow:none;
    outline:0;
}
.term-condition{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.booking-form .btn-primary{
    width:100%;
    padding: 1rem 0;
}
.booking-form-cont{
    max-width: 80vh;
}
.site-footer{
    background-size: cover;
    background-position: center bottom;
    padding: 60px 0px;
    background-color: black;
}
.subcribe-form input{
    border-radius: 0;
    border: 2px solid #fff;
    text-align:center;
    padding: 1rem 2rem;
    background-color: transparent;
    width: 50%;
    color: #fff;
    font-size: 1.3rem;
    height: 46px;
    border-right-width: 0;
    margin-right: -4px;
    vertical-align: top;
    text-align: left;
}
.subcribe-form input::placeholder{
    color:#fff;
}
.subcribe-form input:focus{
    box-shadow:none;
    outline:0;
}
.subcribe-form button{
    padding: 0rem 3rem;
    height: 46px;
}
.subcribe-form {
    margin-bottom: 3rem;
}
.widget-title{
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color:var(--whiteColor);
}
.widget-title h3{
    font-size: 1.5rem;
}
.widget-content ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget-content ul li a{
    color:var(--whiteColor);
    text-decoration: none;
    font-weight: 100;
    opacity: 0.8;
}
.widget-content ul li a:hover,
.widget-content ul li a:focus{
    opacity:1;
}
.social-lists{
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-lists li{
    display: inline-block;
    margin-right: 0.5rem;
}
.social-lists li a{
    color: #fff !important;
    background-color: #a3000b !important;
    font-size: 0.85rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 34px;
    opacity: 1 !important;
}
.inner-container{
    max-width:1000px;
    margin:0 auto;
}
.wpsl-search{
    display:none;
}
.section-banner{
    overflow: hidden;
    width:100%;
    max-width:100%;
}
.gallery-slider {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    max-width: 119vh;
}
.swiper-slide img{
    width: 100%;
}
 .image-wrapper {
    position: relative;
  }
  
  .image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  text-shadow: 1px 1px ;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
  }
.section-gallery .container-inner{
    overflow: hidden;
}
.section-gallery .container-fluid{
    padding-left: 10rem;
    padding-right: 10rem;
}
.swiper-button-next:after, .swiper-button-prev:after{
    color:#fff;
    font-size: 2rem;
}
.test-drive-bg{
    background-image: url(https://haval.pk/wp-content/uploads/2023/06/test-drive-hev.jpg);
    background-size: cover;
    background-position: center bottom;
}
.test-drive-bg img{
    opacity: 0;
}
.wpsl-store-location strong {
    font-size: 1.25rem;
}
#wpsl-wrap{
    margin-bottom: 0;
}
#wpsl-gmap.wpsl-gmap-canvas,
.wpsl-default-filters #wpsl-stores{
    height: 550px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}
.wpsl-default-filters #wpsl-stores{
    display:none;
}
#wpsl-gmap{
    width:100%;
}
.service-box:hover{
    transform: translateY(-0.53021rem);
    box-shadow: 0px 8px 10px #23232347;
}
.booking-form .form-control::placeholder {
  color: #000;
}
.section-map{
    display:flex;
    flex-wrap: wrap;
    padding-top: 8rem;
}
.section-map-left{
    width:25%;
}
.section-map-right {
    width: 95%;
    margin-left: 36px;
}
#wpsl-gmap img[src*="red@2x"] {
    display: none !important;
}
 .section-map-left {
    background-image: url('https://haval.pk/wp-content/uploads/2023/04/bg-_dealership.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center bottom;
    display: flex;
    padding: 20px;
    max-height: 550px;
    overflow-y: scroll;
    display: none;
  }
  .cities-cont{
      width:100%;
  }
  .cities-cont ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .cities-cont li{
      border-bottom: 1px solid gray;
      padding-top:0.3rem;
      padding-bottom:0.3rem;
  }
  .cities-cont li .city-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 100;
    padding-left: 30px;
    width: 100%;
    flex: 0 0 100%;
    padding-right:10px;
    cursor: pointer;
  }
 .cities-cont li ul{
    border-top:1px solid gray;
    margin-top: 2px;
}
    .cities-cont li ul li h5,
.cities-cont li ul li p{
        margin-bottom:0;
    }
  .cities-cont li ul li{
      border-bottom: 1px solid gray;
      color: #fff;
      padding-left: 30px;
      padding-right: 10px;
  }
   .cities-cont li ul li p{
       font-size:14px;
   }
  .cities-cont li:last-child{
      border-bottom:0;
  }
  .cities-cont li ul li:last-child{
      padding-bottom:0;
  }
  .cities-cont li span {
    margin-left: auto;
 
}
.sublist {
  display: none;
}
.gallery-content-1  {
  text-align: center;
}
.section-gallery-mobile{
    display:none;
}
.haval-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    z-index: 999;
    background: black;
}
.haval-nav.fixed{
	background-color:white;
	padding-top: 10px;
	padding-bottom: 20px;
}
.haval-nav.fixed .white-logo{
    opacity:0;
}
.navbar-brand{
    position:relative;
}
.navbar-brand .black-logo {
    position: absolute;
    top: 9px;
    left: 0;
    opacity:0;
}
.haval-nav.fixed .black-logo{
    opacity:1;
}
.d-align-bottom{
    align-items: end;
}

/*USE CSS for Slider*/

.vehicle-detail-banner .car-slider-desc {
    max-width: 180px;
    margin: 0 auto;
}
.banner-slider .slider.slider-for {
    max-width: 79%;
    padding-left: 15px;
}
.banner-slider .slider.slider-nav {
    max-width: 21%;
    height: 100%;
}
.banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
    width: 100%;
    float: left;
}
.banner-slider .slider.slider-nav {
    overflow: hidden;

}
.banner-slider .slider.slider-nav {
    padding: 0;
}
.slider-nav .slick-slide.thumbnail-image .thumbImg{
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 7.5%;
}
.slider-banner-image img,
.slider-nav .slick-slide.thumbnail-image .thumbImg img {
    width:100%;
}
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide:focus,
.slick-arrow:hover,
.slick-arrow:focus {
    border: 0;
    outline: 0;
}
.slider-nav .slick-slide .thumbImg {/* margin-bottom: 10px; */}
.slider-nav .slick-slide.slick-current span {
    color: #196DB6;
}
.slider-nav .slick-slide {
    text-align: center;
    border: 0;
}
.slider-nav .slick-slide span {
    font-size: 14px;
    display: block;
    padding: 5px 0 15px;
}
.slick-arrow {
    background-color: transparent;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    height: 18px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
}
.slick-prev {
   top: 0;
}
.slick-next {
   bottom: 0;
   background-color: #fff;
}
.slick-prev.slick-arrow {
    background-image: url(https://haval.pk/wp-content/themes/haval/assets/images/black-up-arrow.png);
}
.slick-next.slick-arrow {
    background-image: url(https://haval.pk/wp-content/themes/haval/assets/images/black-down-arrow.png);
}
.swp-thumbnails{
    display: flex;
    align-items: center;
    justify-content: center;
}
.swp-thumbnailss{
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 10px !important;
    left: auto !important;
}
.swiper-main .slick-dots{
    display:none !important;
}
.section-p-slider2 h2{
	margin-bottom:0;
	line-height: 1;
	font-size: 1.75rem;
	font-weight: bold;
}
.section-p-slider2 .haval-logo img{
	height: 24px;
	margin-right: 10px;
}
/*End USE CSS for Slider*/
.sps-style-2{
	background-image:url('https://storage.googleapis.com/havalimages/images/h6-slider-2-bg.jpg');
}
.section-360-product{
    padding-top:100px;
    /*background-image: url('https://storage.googleapis.com/havalimages/images/product-banner-single.png');*/
    background-repeat: no-repeat;
    background-color: white;
    background-position: top center;
    padding-bottom: 4rem;
    position: relative;
}
.section-360-product2{
    padding-top:65px;
    background-image: url('https://storage.googleapis.com/havalimages/images/ORA/product-banner-single2.png');
    background-repeat: no-repeat;
    background-color: #bec1c6;
    background-position: top center;
    padding-bottom: 4rem;
    position: relative;
}
.product-specification h3{
    text-align: center;
    margin-bottom:40px;
}
.product-specification table{
	margin-bottom:0;
	border-color:#444545;
	border: 1px solid #444545;
}
.product-specification table td{
	border-right:1px solid #444545;
}
.product-specification thead{
    background-color: #444545;
    color:#fff;
    border-bottom: 0;
}
.product-specification thead th{
    border-bottom: 0;
}
.section-product-tabs .nav-tabs {
	text-align:center;
	align-items: center;
	justify-content: center;
	border-bottom: 0;
}
.section-product-tabs video{
    width: 100%;
}
.section-product-tabs .nav-tabs button{
    border-radius: 0px;
    color:#000;
    font-size: 1.25rem;
    padding: 1rem 3rem;
    margin-bottom: 0;
    border: 0;
}
.section-product-tabs .nav-tabs button.active{
    background-color: var(--primaryColor);
    color:#fff;
}
.section-product-tabs img{
	width:100%;
}
.gip-text p{
    color:#fff;
}
.sec-aftersales{
	padding-top: 6rem;
	padding-bottom: 4rem;
}
.sec-aftersales .container-fluid{
	max-width:89%;
}
.sales-box{
    position:relative;
    margin-bottom: 2rem;
    padding: 0 2rem;
}
.sales-box h3{
    position: absolute;
    color: #fff;
    top: 3.5rem;
    text-align: center;
    left: 0;
    right: 0;
    font-size: 2rem;
}
.sales-box img{
    max-width: 100%;
    width: 100%;
}
.section-head img{
	margin-bottom:15px;
	max-width: 100%;
}
.section-head{
    padding-bottom: 3rem;
    text-align: center;
}
.section-head h2{
	font-weight:100;
	text-transform:lowercase;
	font-size:2rem;
	
}
.brochure-download {
    text-align: center;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}
.brochure-download a{
    color: #d50110;
    text-decoration: none;
    font-size: 1.25rem;
}
.brochure-download img{
    margin-right:10px;
    max-width: 90px;
}


.pagination-scroll{
    display:none;
}
section.section-product-slider {
    overflow: hidden;
    padding-top: 15vh;
    padding-bottom: 15vh;
    height: 100vh;
}
.pad-tb-0{
	padding-top:0;
	padding-bottom:0;
}
.section-map-slides{
    background-color: #010b14;
    padding:2rem 0;
    margin-top: -1px;
}
.map-slide-item-inner{background-color: #fff;padding: 8px 20px;margin: 0 10px;cursor: pointer;}
.slick-current .map-slide-item-inner{background-color:#d50110;color:#fff;}
.ss-btn{
    position:absolute;
    top:0;
    left:0;
}
.ss-btns{
    position:absolute;
    top:0;
    left:0;
}
.swiper-container-new{
    overflow: hidden;
}
.swiper-container-news{
    overflow: hidden;
}
.p-b-0{
    padding-bottom:0;
}
.last-p{
	position:relative;
}
.last-p p{
    margin-bottom: 0px;
}
.last-p .wpcf7-spinner{
	position:absolute;
	left:0;
    top:50%;
	transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
}
.sticky-footer-btn{
    background: -webkit-linear-gradient(top, #FFFFFF 0%, rgba(255, 255, 255, 0.43) 100%);
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.43) 100%);
    border-radius: 0.625rem;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    padding: 0.01042rem 0.0625rem;
    z-index: 999;
    text-align:center;
}
.sticky-footer-btn a{
	text-decoration:none;
	color:#000;
	font-size: 0.65rem;
	padding: 1rem 1rem;
	display: block;
}
.sticky-footer-btn img{
	max-width: 40px;
	margin-bottom: 10px;
}
.booking-form .form-group p{
    margin-bottom: 0px;
}
.interior-slider{
    display:none;
}
.section-vertical-tabs{
    <!-- background-image: url(https://haval.pk/wp-content/uploads/2023/06/vt-bg-01.jpg); -->
  background-color: #4c4c4c69;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    padding-bottom: 100px;
    padding-top: 100px;
}
.sec-ap-box-2{
    color:#fff;
    text-align: center;
}
.sec-ap-box-2 img{
    display: inline-block;
    max-width: inherit;
    max-height: 200px;
}
.sec-ap-box-2 p{
    text-align: justify;
}
.section-advanced-power-2 .col-md-6 {
    padding: 0 10%;
}
.section-ap-slides ul.slick-dots {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    bottom: 5%;
} 
.section-ap-slides ul.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
.section-ap-slides ul.slick-dots li button {
    font-size: 0;
    border: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    background-color: #ffffff47;
}
.section-ap-slides ul.slick-dots li button:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: #9f9f9f;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.vertical-tabs{
    list-style: none;
    margin:0;
    padding:0;
}
.vertical-tabs li.active img{
    max-width: 100%;
}
#preview-container{
    text-align: center;
    position:relative;
}
#preview-container img{
    max-width: 100%;
    opacity: 0;
}
#preview-container img.active{
    opacity: 1;
}
.dummy-images{
    width:100%;
}
.dummy-images,
.dummy-images img{
    position:absolute;
    top:0;
    left:0;
}
.dummy-images img{
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
}
ul.car360-colors {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    justify-content: center;
    margin-top: -70px;
    margin-bottom: 70px;
    position: relative;
    z-index:999;
} 
ul.car360-colors li {
    max-width: 15%;
    cursor: pointer;
}
ul.car360-colors img {
    max-width: 100%;
}
.mobile-arrows{
    display: none;
}
.img360-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    cursor: pointer;
}
.img360-arrow.img360-fr{
    right:0;
}
.gwm-tech-height{
    height:100%;
}
.gwm-tech-height .elementor-widget-wrap{
    align-content: unset;
}
.elementor-element-072b5fc{
    align-self: flex-end;
    margin-top: auto;
}
.tech-tabs ul{
    margin:0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tech-tabs ul li{
    width:30.3333%;
    color:#fff;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 0;
    font-size: 1.5rem;
}
.tech-tabs-overlay{
    opacity: 0;
    visibility: hidden;
    position:absolute;
    top: -100vh;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    height: 100vh;
    transform: translateY(58px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tech-tabs-overlay.active{
    opacity: 1;
    visibility: visible;
}
.close-tab{
	position:absolute;
	top:10%;
	left: 2.5rem;
	background-color:#fff;
	width: 30px;
	height: 30px;
	border-radius:50%;
	text-align: center;
	line-height: 32px;
	cursor:pointer;
    z-index: 99;
}
.tech-tabs .elementor-container{
	flex-direction:column;
	max-width: 1140px;
}
.text-wrap{
	color:#fff;
	max-width:50%;
}
.text-wrap h3{
	font-size:2.5rem;
	text-transform: uppercase;
}
.text-wrap p{
	font-size:1.25rem;
	text-align:justify;
}

.vertical-tabs li{
    position: relative;
}
.vertical-tabs li p{
        position: absolute;
        bottom: 30px;
        left: 30px;
        z-index: 9999;
        right: 30px;
        margin-bottom: 0px;
        opacity: 0;
        transition: all 0.1s ease;
        
}
.vertical-tabs li.active p{
    opacity:1;
    transition-delay:0.5s;
}
/* White Header Text */
.page-id-250 .haval-nav:not(.fixed) .nav-link,
.page-id-194 .haval-nav:not(.fixed) .nav-link{
    color:#fff;
}
.page-id-250 .haval-nav:not(.fixed) .btn-outline-sm,
.page-id-194 .haval-nav:not(.fixed) .btn-outline-sm{
    color:#fff;
    border-color:#fff;
}
.section-map-inner{
    padding-top:0;
}

.sec-aftersales.style-2 h3{
    color:#fff;
}
/* Responsive */
@media only screen and (min-width: 1080px) {

    .vertical-tabs{
        display:flex;
        gap: 15px;
    }
    .vertical-tabs li{
        width: 12%;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.5s ease;
    }
    .vertical-tabs li.active{
        width: 40%;
    }
    .sec-jolion-banner img{
    width: 100%;
    } 
    .sec-jolion-banners img{
    width: 100%;
    }

}

@media only screen and (max-width: 1680px) {
	.section-home-cars{
		padding-top:11rem;
	}
    .section-home-carss{
		padding-top:11rem;
	}
    .sales-box h3{
        font-size:1.5rem;
    }
}

@media only screen and (max-width: 1280px) {
    .navbar-light .navbar-nav .nav-link{
        font-size:0.875rem;
    }
    .btn-primary,
    .btn-outline,
    .label-black,
    .carname-item div{
        font-size:1.1rem;
    }
    .gallery-slider {
        max-width: 800px;
    }
    .sec-banner-btn{
        right:0;
        text-align: center;
        bottom: 8vh;
    }
    h2 {
        font-size: 1.75rem;
    }
    .section-home-cars .sec-banner-btn{
        display: none;
    }
    .navbar-light .navbar-toggler{
        border:0;
        padding:0;
        box-shadow: none;
        z-index: 9;
        background: white;
    }
    header{
        position: relative;
        z-index: 999;
    }
	.section-home-cars{
		padding-top: 8rem;
	}
	
}

@media screen and (max-width : 991px) {


    .elementor-element-372dc92 .elementor-container,
    .elementor-element-372dc92 .elementor-column,
    .elementor-element-372dc92 .elementor-widget-wrap,
    .elementor-element-372dc92 .elementor-section,
    .elementor-element-372dc92 .elementor-element,
    .elementor-element-372dc92 .elementor-widget-container{
        position: static !important;
    }
    .tech-tabs ul{
        flex-direction: column;
        margin-bottom: 40px;
    }
    .tech-tabs ul li{
        width:100%;
    }
    .text-wrap{
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .tech-tabs-overlay{
        top: 0;
        bottom: 0;
        transform: none;
        height: auto;
    }
    .text-wrap h3 {
        font-size: 1.5rem;
    }
    .text-wrap p {
        font-size: 1rem;
    }
    ul.car360-colors {
        margin-top: -15px;
        margin-bottom: 30px;
    }
    ul.car360-colors li {
        max-width: 25%;
    }
	.banner-slider .slider.slider-for,
	.banner-slider .slider.slider-nav {
	    max-width: 100%;
	    float: none;
	}
	.banner-slider .slider.slider-for {
		padding-right: 0;
	}
	.banner-slider .slider.slider-nav {
		height: auto;
	}
	.slider-banner-image {
	    height: 500px;
	} 
	.slider.slider-nav.thumb-image {
        padding: 10px 30px 0;
	}
	.slider-nav .slick-slide span {
		padding: 5px 0;
	}
	.slick-arrow {
		padding: 0;
	    width: 30px;
	    height: 30px;
	    top: 50%;
	    bottom: 0;
	    -webkit-transform: translateY(-50%) rotate(-90deg);
	    -moz-transform: translateY(-50%) rotate(-90deg);
	    -ms-transform: translateY(-50%) rotate(-90deg);
	    transform: translateY(-50%) rotate(360deg);
	}
	.slick-prev {
	    left: 0;
	    right: unset;
	}
	.slick-next {
	    left: unset;
	    right: 0;
   		background-color: transparent;
	}
	.vehicle-detail-banner .car-slider-desc {
    	max-width: 340px;
	}
	.bid-tag {
    	padding: 10px 0 15px;
	}
	.slider.slider-nav.thumb-image {
	   white-space: nowrap;
	}
	.thumbnail-image.slick-slide {
		padding: 0px 5px;
		min-width: 75px;
		display: inline-block;
		float: none;
	}
}


@media only screen and (max-width: 780px) {
    .banner-home {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%20MOBILE%202%201000x600.jpg'); /* Replace with the correct 600x1000 image URL */
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px; /* Ensure minimum visibility on smaller screens */
    }
    .banner-item-7 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%202%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px; /* Ensure minimum visibility on smaller screens */
    }
    .banner-item-3 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%201%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-2 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/Jolion-HEV-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-4 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-03-Mobile%20(1).jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-5 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-07-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
   
    .banner-item-6 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/Tank-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-h6-hev-2 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%202%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }

    .banner-h6 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%201%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-jolion-1 {
        background-image: url('https://haval.pk/wp-content/uploads/2023/07/banner_new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }

    .banner-jolion-hev-1 {
        background-image: url('https://haval.pk/wp-content/uploads/2023/07/banner-jolion-hev-1.png');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;  
    }
    .banner-ora-1 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-03-Mobile%20(1).jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
}

@media only screen and (max-width: 480px) {
    .banner-home {
        height: calc(100vw * (1000 / 600)); /* Adjust height based on width to maintain aspect ratio */
        min-height: 300px; /* Slightly smaller minimum height for very small screens */
    }
    .banner-item-7 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%202%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px; /* Ensure minimum visibility on smaller screens */
    }
    .banner-item-3 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%201%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-2 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/Jolion-HEV-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-4 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-03-Mobile%20(1).jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-item-5 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-07-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }

    .banner-item-6 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/Tank-Mobile.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-h6-hev-2 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%202%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }

    .banner-h6 {
        background-image: url('https://storage.googleapis.com/havalimages/images/Web%20Banners/MOBILE/homepage%201%201000x600-new.jpg');
        background-size: contain; /* Show the entire image, maintaining aspect ratio */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repetition */
        width: 100%; /* Full width */
        height: calc(100vw * (1000 / 600)); /* Maintain aspect ratio (1000/600 ≈ 1.6667) based on width */
        min-height: 400px;
    }
    .banner-jolion-1 {
        background-image: url('https://haval.pk/wp-content/uploads/2023/07/banner_new.jpg');
        height: calc(100vw * (1000 / 600)); /* Adjust height based on width to maintain aspect ratio */
        min-height: 300px;
    }

    .banner-jolion-hev-1 {
        background-image: url('https://haval.pk/wp-content/uploads/2023/07/banner-jolion-hev-1.png');
        height: calc(100vw * (1000 / 600)); /* Adjust height based on width to maintain aspect ratio */
        min-height: 300px;
    }
    .banner-ora-1 {
        background-image: url('https://storage.googleapis.com/havalimages/images/mobile%20view%20images/ORA-03-Mobile%20(1).jpg');
        height: calc(100vw * (1000 / 600)); /* Adjust height based on width to maintain aspect ratio */
        min-height: 300px;
    }


@media only screen and (max-width: 780px) {
	
    .section-p-slider4 img{
        max-width:100%;
    }
    .vertical-tabs li p{
        opacity:1;
    }
    .desktop-arrows{
        display:none;
    }
    .mobile-arrows{
        display: inline-block;
        top: 3px;
        position: relative;
        transform: inherit;
        vertical-align: middle;
        line-height: 3rem;
    }
	.after-sales h3{
	    position:relative;
	    z-index: 99;
	}
	.after-sales img{
	    position:relative;
	    top:-80%;
	}
    .vertical-tabs img,
    .sec-jolion-banner img{
        width:100%;
    } 
    .vertical-tabs img,
    .sec-jolion-banners img{
        width:100%;
    }





    
    .banner-h6-2-0{
        background-image: url('https://haval.pk/wp-content/uploads/2023/07/Haval_h6_mobile_2.0.jpg');
    }
    
   
    
    
    
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .container-fluids {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sec-aftersales .section-head img{
        max-width:80%;
    }
    .sec-aftersales .section-head h3{
        font-size:1rem;
    }
    .section-gallery .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .section-gallery .container-fluids {
        padding-left: 0;
        padding-right: 0;
    }
    .swp-thumbnails{
        display:none;
    }
	
	
    .swiper-slide img{
        width: 100% !important;
    } 
    .swiper-slides img{
        width: 100% !important;
    }
    .section-services-title h2{
        display:block;
        font-size:1.5rem;
        margin-bottom: 0;
    }
    .section-services-title h2 img{
        max-width:80px;
    }
    .section-services-title h2 span{
        width:100%;
        display:block;
        margin-top: 10px;
    }
    .section-services-title p{
        font-size:1rem;
    }
    .booking-form-cont{
        margin-top:4rem;
    }
    .test-drive-bg{
        height:250px;
    }
    .secton-booking-drive{
        padding:0;
    }
    .home-video video{
        margin-bottom: -7px;
    }
    .subcribe-form input{
        width:100%;
        border-right-width: 2px !important;
        margin-right: 0;
    }
    .subcribe-form select{
        width:100%;
    }
    .subcribe-form button{
        width:100%;
    }
    .navbar-brand img{
        max-width: 130px;
    }

    .navbar-collapse{
        background-color: white;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    .navbar-collapse form{
        display: none !important;
    }
    .haval-nav .navbar-nav a{
        padding-top:1.25rem;
        padding-bottom:1.25rem;
    }
    .section-home-cars .thumbnails{
        display:none !important;
    }
    #wpsl-wrap #wpsl-result-list li{
       padding: 10px 25px !important;
    }
    .section-services{
        background-size: inherit;
    }
    .section-home-cars{
        min-height:auto;
    }
    .section-map-left,
    .section-map-right{
        width:100%;
        flex:0 0 100%;
    }
	#wpsl-result-list,
	.section-gallery{
        display:none;
    }
    .section-gallery-mobile{
        display:block;
        overflow: hidden;
    }
    .gallery-img  img{
        max-width:100%;
    } 
    .gallery-box{
        width:100%;
        flex: 0 0 100%;
        padding-bottom: 0px;
    }
    .gallery-content-1 h3{
    margin-top: 15px;
    }
    .gallery-box .gallery-content-1 {
        padding-left:15px;
        padding-right:15px;
    }
}

@media screen and (min-width : 768px) {
    .map-slides{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .map-slide-item.active .map-slide-item-inner{
        background-color:#d50110;
        color:#fff;
    }
}

@media screen and (max-width : 767px) {
	.slider-banner-image {
	    height: 400px;
	}
	.slider.slider-nav.thumb-image {
    	padding: 0px 20px 0;
    	margin: 10px 0px 0;
	}
	
.sticky-footer-btn
{
	border: 1px solid #ffffffc9;
}

.sticky-footer-btn img{
	margin-bottom:0;
max-width:30px;
}
	.sticky-footer-btn a{
	font-size: 0;
	padding: 1rem 0.6rem;
	padding-right:0.5rem;
	}
	.slider-nav .slick-slide.thumbnail-image .thumbImg {
		max-width: 140px;
		height: 80px;
	}
	.slick-prev.slick-arrow {
    	background-position: center 10px;
	}
	.slick-next.slick-arrow {
    	background-position: center 10px, center;
	}
	.slider-nav .slick-slide span {
	    font-size: 12px;
	    white-space: normal;
	}
    .icon-360{
        max-width:120px;
    }
    .section-360-product{
        padding-top:70px;
    }
    .ap-display-mb{
        display:block;
    }
    .banner-slider{
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }
    .banner-slider .slider.slider-for{
        order:1;
        padding-left: 0;
    }
    .banner-slider .slider-nav.thumb-image{
        order: 2;
        padding-left: 0;
        padding-right: 0;
    }
    section.section-product-slider{
        height: auto;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .section-p-slider2{
        padding-top:0;
    }
    .section-product-tabs{
        margin-bottom:30px;
    }
    .section-home-content{
        margin-top:30px;
        height:auto;
        padding-top:30vh;
    }
    .dropdown-menu{
        text-align: center;
        border: 0;
        padding: 0;
    }
    .ss-btn{
        position:static;
        margin-bottom: 2rem;
    }
    .ss-btns{
        position:static;
        margin-bottom: 2rem;
    }
    .sales-box{
        padding:0 0;
        height: 25vh;
        overflow: hidden;
    }
    .sec-aftersales .container-fluid{
        max-width:100%;
    }
    .sales-box h3{
        font-size:1.5rem;
    }
}

@media screen and (max-width: 580px) {
	.slider-banner-image {
	    height:340px;
	}
}

@media screen and (max-width : 480px) {
	.slider-banner-image {
	    height:280px;
	}
}
.display-none , .secton-booking-drive{
display:none !important;
}
li.nav-item.dropdown:hover ul {
    display: block;
}
.book-now-btn a {
color:#fff !important;
background-color:#d50110;
  font-size: small;
}
.register-now-btn a {
color:#fff !important;
background-color:#d50110;
margin-right: 10px;
font-size: small;
}
.test-now-btn a {
color:#fff !important;
background-color:#d50110;
margin-right: 4px;

font-size: small;
}


.viewer{position:relative;margin:20px 0}#pdtViewer{width:67%;margin:0 auto}#pdtViewer img{padding:40px 20px;border:.5px solid #eee;user-select:none;-moz-user-select:none}#dummy{display:none}.loader{width:100%;height:100%;position:absolute;background:rgba(0,0,0,.5);z-index:1;top:0}.three-bounce{text-align:center;font-size:26px;position:absolute;top:50%;left:50%}.three-bounce div{display:inline-block;width:18px;height:18px;border-radius:100%;background-color:#fff;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.three-bounce .one{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.three-bounce .two{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}.btnDiv{text-align:center;margin:10px 0}.btnDiv button{margin:4px 8px;padding:20px;border:0;background-color:dodgerblue;color:#fff;border-radius:50%;font-size:16px;position:relative;cursor:pointer}.btnDiv button:active{background-color:#006dd8}.btnDiv button:hover{box-shadow:0 0 8px 1px #1b8eff}.btnDiv button:focus{outline:0}.btnDiv button:before,.btnDiv button.pause:after,.btnDiv button.plus:after,.btnDiv button.right:after,.btnDiv button.left:after{position:absolute;content:""}.btnDiv button.play:before,.btnDiv button.left:before,.btnDiv button.right:after{border:11px solid transparent;border-left-color:inherit;left:16px;top:24%}.btnDiv button.pause:before,.btnDiv button.pause:after{left:12px;top:28%;width:6px;height:19px;background:#fff}.btnDiv button.pause:after{right:12px;left:auto}.btnDiv button.stop:before{left:11px;top:25%;width:45%;height:50%;background:#fff}.btnDiv button.plus:before{left:17px;top:27%;background:#fff;width:6px;height:20px}.btnDiv button.plus:after,.btnDiv button.minus:before,.btnDiv button.right:before,.btnDiv button.left:after{left:9px;top:44%;background:#fff;width:22px;height:6px}.btnDiv button.left:after{left:11px;width:21px}.btnDiv button.right:before{width:20px}.btnDiv button.left:before,.btnDiv button.play.leftNav:before{border-right-color:inherit;border-left-color:transparent;left:-4px}.btnDiv button.right:after{left:22px}.btnDiv button.play.leftNav:before{left:1px;top:21%}.btnDiv.navDiv{text-align:left}.btnDiv.navDiv button{position:absolute;top:50%}.btnDiv.navDiv button.rightNav{right:0}img.draggable{cursor:e-resize}img.keys{cursor:pointer}@keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@media screen and (max-width:1030px){#pdtViewer img{width:100%}}@media screen and (max-width:992px){.hidePhone{display:none}.btnDiv{zoom:.7}}@media screen and (max-width:1250px){#pdtViewer img{padding:40px 0}#pdtViewer{width:95%}}@media screen and (max-width:767px){.fork{width:100px;position:absolute!important}h1{margin-top:60px}}