/* color codes */
/* orange: #b67929; */
/* darkblue: #002e43; */
/* grey: #a3acb1; */




body {margin:0;font-family: 'Lato', sans-serif;}

h1{
  font-size: 30px!important;
}

h1.large{
  font-size: 38px!important;
}
h1.xlarge{
  font-size: 56px!important;
}

h2{
  font-size: 24px!important;
}
h3{
  font-size: 21px!important;
}
h5{
  font-size: 19px!important;
}

p, div, span, a{
  font-size: 16px!important;
}

.col-md-4, .col-md-5, .col-md-6, .col-md-12{
  padding: 0 !important;
  margin: 0 !important;
 }
 
#go-top {
  width: 40px;
  height: 40px;
  display: none;
  position: fixed;
  bottom: 75px;
  right: 5%;
  z-index: 99;
  border: none;
  outline: none;
  background-image: url(../images/arrow-grey-32.png);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid grey;
  opacity: 0.4;
}
#go-top:hover {
	background-color: #b67929;
	background-image: url(../images/arrow-white-32.png);
	border: 1px solid #b67929;
}

.topnav {
  overflow: hidden;
  background-color: #a3acb1;
  z-index: 99999999;
}
.topnav a {
  float: left;
  display: block;
  color: #002e43;
  text-align: center;
  padding: 13px 16px 14px 16px; 
  text-decoration: none;
  font-size: 20px;
}
.topnav a:hover{
  text-decoration: none;
}
.logo{
  padding: 10px 16px 0px 16px !important; 
}
#logo_footer{
  width: 70px;
  height: auto;
}
.line{
  width: 100%;
  float: left;
  margin-top: 10px;
  border-top: 1px solid white;
}
.active {
  background-color: #002e43;
  color: white;
}
.topnav .icon {
  display: none;
}
.dropdown {
  float: left;
  overflow: hidden;
  position: relative;
}
.models_desktop{
  color: #002e43;
}
.dropdown .dropbtn {
  font-size: 22px;    
  border: none;
  outline: none;
  color: #003b73;
  padding: 22px 16px 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  z-index: 99999;
}
.dropdown-content {
  color: #003b73;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999999;
  background-color: #f9f9f9;;
}
.dropdown-content a {
  float: none;
  color: #002e43;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  color: #b67929;
}
.topnav img, .left_1 img{
  width: 76px;
  height: auto;
}
.dropdown-content a:hover {
  background-color: #ddd;
  color: #003b73;
}
.dropdown:hover .dropdown-content {
  display: block;
}

/* ----------------------------- MOBILE MENU GOES HERE ----------------------------------------- */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #002e43;
  /* background-color: rgba(0,0,0, 0.9); */
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay img{
  margin: 12px 0 0 0;
  width: 76px;
  height: auto;
}
.overlay-content {
  position: relative;
  top: 0;
  width: 100%;
  text-align: left;
  margin-top: 30px;
}
.overlay a {
  padding: 8px 8px 8px 5%;
  text-decoration: none;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay-content a{
  font-size: 20px !important;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
  text-decoration: none;
}
.overlay {
  position: absolute;
  top: -12px;
  right: 15px;
  font-size: 42px;
  font-weight: 300;
}
.closebtn{
  position: absolute;
  top: 4px;
  right: 16px;
  font-size: 35px !important;
  font-weight: 300;
}
.cars_mobile_images{
  width: 80px !important;
  margin-top: 0 !important;
}
.modelcard_img{
  width: 25%;
  height: 40px;
  float: left;
  display: inline-block;
}
.modelcard_text{
  width: 75%;
  height: 40px;
  float: right;
  font-size: 20px !important;
  text-align: left;
  line-height: 35px;
  display: inline-block;
}

/* --------------------------------- MOBILE ACCORDION STARTS HERE ----------------------------------- */
.accordion {
  /* background-color:rgba(0,0,0, 0.9); */
  background-color: transparent;
  color: #818181;
  cursor: pointer;
  padding: 18px 0px 18px 5%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  text-align: left;
}
.active, .accordion:hover {
  background-color: transparent;
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: -45px;
  padding-right: 29px;
}
.active:after {
  content: "\2212";
}
.accordion:hover, .accordion:focus{
  outline: none;
}
.panel {
  padding: 0;
  background-color: #002e43;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* ---------------------------------- CONTENT/SLIDER START here ----------------------------*/
.content{
  width: 100%;
  height: 100%;
  position: relative;
}
.owl-nav, .owl-prev, .owl-next, .owl-dots{
  /* display: none; */
}
/* ---------------------------------- SECTION 1 - SLIDER 1 -------------------------------- */
.section_1 {
  width: 100%;
  height: auto;
  float: left;
}
.cars_slider_images{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.cars_slider_images_mobile{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: none !important;
}
.car_details{
  width: 100%;
  height: auto;
  margin: 0;
  position: absolute;
  top: 5%;
  display: block;
  justify-content: center;
  align-items: center;
	text-align: center;
}
.car_details a:hover{
  cursor: pointer;
  text-decoration: none;
  color: white;
}
.slider_name{
  width: 100%;
  position: relative;
  display: block;
  color: white;
  font-size: 32px;
  font-weight: 700;
  padding: 10px 0;
}
.slider_buttons{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.car_purchase, .check_details {
  display: inline-block;
  width: 200px;
  height: 50px;
  margin: 10px;
  padding: 4px;
  border-radius: 5px;
  outline: none;
  transition: transform 1s ease;
  cursor: pointer;
  font-size: 16px;
  line-height: 21px;
  font-weight:700 ;
}
.car_purchase{
  background-color: white;
  color: #002e43;
  border: none;
}
.car_purchase:hover{
  background-color: #002e43;
  color: #b67929;
  transform: scale(1.05);
}
.check_details{
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
.check_details:hover{
  background-color: #002e43;
  color: #b67929;
  transform: scale(1.05);
  border: 1px solid #002e43;
}
.cars_sec_purchase button{
  padding: 0px 20px;
}
/* ---------------------------------- SECTION 2 - SLIDER 2 -------------------------------- */
.section_2{
  width: 100%;
  height: 100vh;
  float: left;
  position: relative;
  background-image: url(../images/section_2.jpg);
  background-size: 100% 100%;
  justify-content: center;
  align-items: center;
	text-align: center;
}
.owl-carousel-2{
  position: absolute;
  top: 70%;
  transform: translateY(-70%);
}

.owl-carousel .owl-item.active.center .slider_2_image {
  transform: scale(1.3);
  transition: transform 0.3s;
}
.owl-carousel .owl-item .slider_2_image {
  transition: transform 0.3s;
}
.slider_2_image{
  width: 70%;
  height: auto;
  object-fit: cover;
}
.cars_slider_2_images{

}
.slider_2_details{

}
.section_2_title{
  margin-top: 5%;
  color: #002e43;
}
.slider_2_name{
  color: #002e43;
  font-size: 24px;
}

/* ------------------------------------------- SECTION 3 NEWS ------------------------------------- */
.section_3{
  width: 80%;
  height: auto;
  float: left;
  text-align: center;
  padding: 25px 5%;
  margin:4% 10% 25px 10%;
  color: #002e43;
  background-color: #f7f7f7;
}
/* .news_left{
  width: 52%;
  height: auto;
  position: relative;
  float:left;
  text-align: center;
  box-sizing: border-box;
  translate: none; 
  rotate: none; 
  scale: none; 
  opacity: 1; transform: translate(0px, 0px); 
  margin-top: -5%;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
.news_right{
  width: 52%;
  height: auto;
  float: right;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  translate: none; 
  rotate: none; scale: 
  none; opacity: 1; 
  transform: translate(0px, 0px); 
  margin-top: 2%;
  margin-left: -4%;
  clip-path: polygon(9.3% 0, 100% 0, 100% 100%, 0 100%);
} */
.left_box_img, .right_box_img{
  width: 100%;
  height: auto;
}
.left_box_img{
  margin-top: 25px;
}
.products{
  float: left;
  padding: 15px !important;
  margin-top: 30px !important;
  transition: transform 1.5s;
  background-color: transparent;
}
.products:hover{
	transform: scale(1.05);
  background-color: white; /* Change background color on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.products_title{
  width: 100%;
  float: left;
}
.product_img_1{
  width: 100%;
  float: left;
}
.product_img_1 img{
  width: 100%;
  height: auto;
  padding-top: 25px;
}
.product_txt{
  width: 100%;
  float: left;
  text-align: center;
  padding: 15px 0;
}
.product_txt p{
  padding: 5px 2px;
  border: 1px solid #002e43;
  border-radius: 5px;
  font-weight: bold;
}

.partner{
  width: 100%;
  float: left;
}
.partner img{
  width: 100%;
  height: auto;
  padding: 10px;
  background-position: top;
  background-size: cover;
}
.battery{
  width: 100%;
}

/* .model_section{
	float: left;
	height: auto;
	padding: 45px 15px;
	background-color: white;
	transition: transform 1.5s;
	margin: 24px 0;
	color: #252728;
  } */
 

  .logo-row {
    display: flex;
    flex-wrap: wrap; /* optional: allows wrapping on small screens */
    justify-content: center; /* or space-between/space-around as needed */
    align-items: center;
    gap: 20px; /* spacing between logos */
    padding: 10px;
  }

.logo {
  height: auto; /* fixed height */
  width: 150px;  /* maintains aspect ratio */
  object-fit: contain;
  display: block;
}

/* ----------------------------------here goes OWL CAROUSEL- ----------------------*/
.owl-item, .owl-controls .owl-page, .owl-controls .owl-buttons div {
  cursor: pointer;
}
.owl-prev {
  position: absolute;
  display: block;
  top: 48%;
  left: 20px;
  margin-top: -24px;
  border-radius: 1em;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: url(../images/sliderLeftArrow.png) no-repeat left top;
  opacity: 0.7;  
  background-size: 100%;
}
.owl-next {
  position: absolute;
  display: block;
  top: 48%;
  right: 20px;
  margin-top: -24px;
  border-radius: 1em;
  cursor: pointer;
  width: 48px;
  height: 48px;
  background: url(../images/sliderRightArrow.png) no-repeat left top;
  opacity: 0.7;
  background-size: 100%;
}
.owl-prev:hover,
.owl-next:hover{
 width: 54px;
  height: 54px;
  opacity: 1;
}
/* ----------------------------- Sweep To Right --------------------------*/
.hvr-sweep-to-right {
	width: 120px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #23bba6;
	border-radius: 5px;
	background:transparent;
	font-size: 13px;
	color:#23bba6;
	text-align: center;
	text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #199483;
  border-radius: 5px;
  text-decoration: none;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: black;
  text-decoration: none;

}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*--------------------------------- HERE BEGINS SLIDER MENU-------------------------------*/

.prev{
	width: 50px;
	height: 50px;
	float: left;
	background-image: url(../images/arrow-91-32.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 70%;
	right: 52%;
}
.prev:hover{
	background-image: url(../images/arrow-green.png);
}
.next{
	width: 50px;
	height: 50px;
	float: right;
	background-image: url(../images/arrow-grey-right.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 70%;
}
.next:hover{
	background-image: url(../images/arrow-green-right.png);
}

/* ------------------------------------------- COWFISH PAGE STARTS HERE ---------------------------------------- */
.door{
  margin-top: 50px;
}
.doors_info{
  float: left;
}
.doors_info_title{
  float: left;
}
.doors_info_text{
  float: right;
  border-left: 1px solid #002e43;
}
/* ------------------------------------------- DOLPHIN PAGE STARTS HERE ---------------------------------------- */
.dolphin_info_half_section_left{
  width: 100%;
  float: left;
  color: #002e43;
  padding: 15px !important;
  margin: 0
}
/* .weight_percent_safe{
  width: 33%;
  height: auto;
  float: left;
} */
.weight_percent_safe_text{
  width: 100%;
  height: auto;
  float: left;
  margin-top: 25px;
}
.section_weight, .section_percent, .section_safe{
  height: auto;
  float: left;
  padding: 10px;
}
.section_weight{
  width: 30%;
}
.section_percent{
  width: 33%;
}
.section_safe{
  width: 37%;
}
.equal_sections{
 width: 33%;
 height: auto;
 float: left;
 padding: 10px;
}
.passable{
  width: 100%;
  float: left;
}
/* ------------------------------------------- ELEPHANT X5 PAGE STARTS HERE ------------------------------------ */
.car_title_section{
  width: 100%;
  float: left;
  padding: 35px 0;
  color: #002e43;
}
#car_pages_main_title{
  padding:35px 10%;
}
.contact_title_section{
  width: 100%;
  float: left;
  padding: 75px 10%;
  background-color: #002e43;
  color: white;
  text-align: left;
}
.cars_sec_purchase a{
  color: white;
  text-decoration: none;
}
.cars_sec_purchase a:hover{
  color:#b67929;
  text-decoration: none;
}
#car_dark_title{
  padding:35px 10%;
  background-color:#edeeef;
}
#car_body_structure{
  background-color: #edeeef;
}
.car_title_img{
  width: 100%;
  float: left;
}
.car_img_section{
  width: 100%;
  float: left;
}
.car_img_section img, .car_title_img img {
  width: 100%;
  height: auto;
}
.car_info_section{
  width: 100%;
  float: left;
  color: #002e43;
  /* background-color: #a3acb1; */
  background-color: #edeeef;
  padding: 15px;
}
.car_info_section div, .car_info_half_section div{
  float: left;
}
.car_dual_section{
  width: 100%;
  float: left;
  margin:0;
  background-color: #edeeef;
}
.car_info_half_section{
  width: 100%;
  float: left;
  color: #002e43;
  padding: 15px 15px 15px 10% !important;
  margin: 0;
}
.car_info_half_section_left{
  width: 100%;
  float: left;
  color: #002e43;
  padding: 15px 15px 15px 15px !important;
  margin: 0;
}
.charging{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  justify-content: space-between;
  left: 15px;
}
#charging{
  position: relative;
}
.charging_time{
  color: #7bcfb8;
}
.thirty{
  font-size: 84px;
}
.min{
  font-size: 24px;
}


/* ------------------------------------------- ELEPHANT X7 PAGE STARTS HERE ------------------------------------ */
.x7_sec_1{
  width: 100%;
  float: left;
  padding: 35px 10%;
  color: #002e43;
}
.x7_sec_2{
  width: 100%;
  float: left;
}
.x7_sec_2 img{
  width: 100%;
  height: auto;
}
/* -------------------------------------------------- ALL MODELS MARGED INFO STARTS HERE ---------------------------------------- */
.car_main_section{
  width: 80%;
  height: auto;
  float: left;
  margin:0 10%;
}
.cars_sec_main_title{
  float: left;
  text-align: left;
}
.cars_sec_purchase{
  float: right;
  text-align: right;
}
.cars_sec_purchase_last{
  float: left;
  text-align: left;
}
.pages_car_purchase{
  display: inline-block;
  width: auto;
  height: 50px;
  margin: 10px 10px 10px 0;
  padding: 4px 20px;
  border-radius: 5px;
  transition: transform 1s ease;
  cursor: pointer;
  font-size: 16px;
  font-weight:400;
  background-color: #002e43;
  color: white;
  border: 1px solid #002e43;
}
.pages_car_purchase:hover{
  background-color: white;
  color: #002e43;
  transform: scale(1.05);
  border: 1px solid #002e43;
}
 .prc20{
  width: 100px;
  margin: 10px 0;
 }
 h1, h2, h3, h4, h5, h6{
  /* margin: 0 !important;
  padding: 0 !important; */
 }
 .car_params{
  list-style-type: none;
  margin: 0;
  padding: 25px 0 0 0;
 }
 .parameter_description{
  float: left;
  padding: 25px 0 !important;

 }
 .parameter_value{
  float: right;
  background-color: white;
  padding: 25px !important;
 }
 /* ------- contacts ---------------------*/
 #contact_page_main_title{
  padding:35px 10%;
  margin-top: 60px;
}
 .contact_sec_right{
  float: right;
  text-align: left;
 }
 .contact_sec_right h5{
  line-height: 36px;
 }
 .email_address{
    color: #b67929;
    margin: 0;
 }
 .email_address:hover{
  color: #002e43;
  text-decoration: none;
  font-weight: 700;
 }
 #get_in_touch{
  padding: 15px 10%;
}
#get_in_touch{
  padding: 35px 10%;
}
 #get_in_touch h5{
  line-height: 31px;
 }
 #book_test_drive{
   padding-left: 35px !important;
   background-color: white;
 }
 .book_test_drive button{
   margin-top: 35px;
 }
 #test_img img{
  width: 50% !important;
  margin: 0;
 }
 .map{
  width:100%;
  height:400px;
  border: 0;
}
 
/* -------------------------------------------------- FOOTER STARTS HERE ---------------------------------------- */
.footer{
	width: 100%;
	height: auto;
	float: left;
	padding: 20px 0 0 0;
	font-size: 14px;
	/* line-height: 32px; */
	color: #a3acb1;
	text-align: center;
	font-weight: normal;
	opacity: 1;
	background-color: #002e43;
}
.footer_titles{
  padding: 20px 0;
  /* font-size: 20px !important; */
  margin: 0;
}
.left, .left_1, .center, .right{
	/* width: 33%; */
	float: left;
	text-align: center;
}
.left_1 ul{
  padding: 0;
}
.center ul{
  padding: 0;
}
.left_1 ul li{
  list-style-type: none;
  padding: 5px 0 5px 0;
}
.center ul li{
  list-style-type: none;
  padding: 0px;
}
.left_1 a{
  text-decoration: none;
  color: #a3acb1;
}
.left_1 a:hover{
  color:#b67929;
  text-decoration: none;
}
.left p, .center p, .right p {
	margin: 0;
	/* line-height: 22px; */
	/* font-size: 17px; */
}
.tel a, .center a{
  /* color:#a3acb1; */
  color: white;
  text-decoration: none;
  font-weight: 700;
}
.tel a:hover{
  color:#b67929;
  text-decoration: none;
}
.map{
	color:#a3acb1;
}
.map:hover{
	color:#b67929;
  text-decoration: none;
}
.follow_us{
	padding-bottom: 10px;
}
.smm_icons{
  list-style-type: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.smm_icons li{
  float: left;
  text-align: center;
  padding:0 10px;
}
.icon_fb{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/facebook-256.png);
  background-size: cover;
  transition: background-color 0.3s ease;
}
.icon_fb:hover {
  background-image: url(../images/facebook-256-orange.png);
}
.icon_insta{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/instagram-256.png);
  background-size: cover;
  transition: background-color 0.3s ease;
}
.icon_insta:hover {
  background-image: url(../images/instagram-256-orange.png);
}

.icon_youtube{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/youtube_grey.png);
  background-size: cover;
  transition: background-color 0.3s ease;
}
.icon_youtube:hover {
  background-image: url(../images/youtube_orange.png);
}

.icon_tiktok{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/tiktok_grey.png);
  background-size: cover;
  transition: background-color 0.3s ease;
}
.icon_tiktok:hover {
  background-image: url(../images/tiktok_orange.png);
}

.icon_linkedin{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/linkedin_grey.png);
  background-size: cover;
  transition: background-color 0.3s ease;
}
.icon_linkedin:hover {
  background-image: url(../images/linkedin_orange.png);
}

.copyright{
	width: 100%;
	float: left;
	text-align: center;
	padding-bottom: 10px;

}
.copyright a{
  font-size: 13px;
  text-decoration: none;
  color: #777;
}
.copyright a:hover{
  color: #ddd;
  text-decoration: none;
}
.copyright p{
	line-height: 36px;
	font-size: 14px;
  padding-top: 20px;
}
.copy{
	text-align: center;
	margin: 0;
}

/* FOOTER ends HERE ------------------------------------------------- */



/*--------------------------  HERE BEGINS MEDIA FROM 992px TO 1199px-------------------------- */

@media  (min-width: 992px) and (max-width: 1199px){

  h1{
		font-size: 26px!important;
	}

	h1.large{
		font-size: 36px!important;
	}
	h1.xlarge{
		font-size: 56px!important;
	}

	h2{
		font-size: 21px!important;
	}
	h3{
		font-size: 19px!important;
	}
  h5{
    font-size: 17px!important;
  }

	p, div, span, a{
		font-size: 15px!important;
	}

	.topnav a {
    float: left;
    display: block;
    color: #002e43;
    text-align: center;
    padding: 16px 10px 14px 10px; 
    text-decoration: none;
    font-size: 19px;
  }
  .left, .center, .right{
		width: 33%;
		float: left;
		text-align: center;
	}
	.left p, .center p, .right p{
		margin: 0;
		line-height: 24px;
		font-size: 17px !important;
	}

  .car_main_section{
    width: 100%;
    height: auto;
    float: left;
    margin:0;
    padding: 0 15px;
  }

  .map{
    width:100%;
    height:350px;
    border: 0;
  }

}

/*--------------------------  HERE BEGINS MEDIA FROM 768px TO 991px-------------------------- */

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

  h1{
		font-size: 26px!important;
	}

	h1.large{
		font-size: 36px!important;
	}
	h1.xlarge{
		font-size: 56px!important;
	}

	h2{
		font-size: 21px!important;
	}
	h3{
		font-size: 19px!important;
	}
  h5{
    font-size: 17px!important;
  }

	p, div, span, a{
		font-size: 15px!important;
	}

  .car_main_section{
    width: 100%;
    height: auto;
    float: left;
    margin:0;
    padding: 0 15px;
  }

  .topnav a {
    float: left;
    display: block;
    color: #002e43;
    text-align: center;
    padding: 16px 7px 14px 7px; 
    text-decoration: none;
    font-size: 18px;
  }
  .left, .center, .right{
    width: 33%;
    float: left;
    text-align: center;
  }
  .left p, .center p, .right p{
    margin: 0;
    line-height: 22px;
    font-size: 16px !important;
  }
  .left_1 ul li{
    list-style-type: none;
    padding: 0;
  }

  .map{
    width:100%;
    height:300px;
    border: 0;
  }
    
}

/*--------------------------  HERE BEGINS MEDIA FROM 200px TO 767px-------------------------- */

@media  (min-width: 200px) and (max-width: 767px){

  h1{
		font-size: 22px!important;
	}

	h1.large{
		font-size: 32px!important;
	}
	h1.xlarge{
		font-size: 48px!important;
	}

	h2{
		font-size: 20px!important;
	}
	h3{
		font-size: 18px!important;
	}
  h5{
    font-size: 16px!important;
  }
	p, div, span, a{
		font-size: 14px!important;
	}
  .owl-prev {
    position: absolute;
    display: block;
    top: 40%;
    left: 10px;
    margin-top: -24px;
    border-radius: 1em;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: url(../images/sliderLeftArrow.png) no-repeat left top;
    opacity: 0.8;  
    background-size: 100%;
  }
  .owl-next {
    position: absolute;
    display: block;
    top: 40%;
    right: 10px;
    margin-top: -24px;
    border-radius: 1em;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: url(../images/sliderRightArrow.png) no-repeat left top;
    opacity: 0.8;
    background-size: 100%;
  }
  .owl-prev:hover,
  .owl-next:hover{
    width: 42px;
    height: 42px;
    opacity: 1;
  }
  .slider_buttons{
    display: block;
  }
  .car_main_section{
    width: 100%;
    height: auto;
    float: left;
    margin:0;
  }
  .car_title_section{
    padding: 25px 15px;
    text-align: center;
  }
  .car_info_half_section, .car_info_half_section_left{
    padding: 15px !important;
  }
  .cars_sec_main_title{
    float: left;
    text-align: center;
  }
  .cars_sec_purchase{
    float: left;
    text-align: center;
  }
  .cars_sec_purchase_last{
    float: left;
    text-align: center;
    margin-top: 35px;
  }
  .cars_sec_purchase button{
    padding: 0px 20px;
  }
  #car_dark_title{
    padding:25px 5px;
    background-color:#edeeef;
    text-align: left;
  }
  .parameter_description{
    width: 45% !important;
    float: left;
  }
  .parameter_value {
    width: 55% !important;
    float: left;
    padding: 25px 0;
  }
  .car_params li{
    font-size: 10px !important;
  }
  .pages_car_purchase{
    margin: 25px 0 25px 0;
  }
  .charging{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 26%;
    transform: translateY(-50%);
    height: 50%;
    justify-content: space-between;
    left: 15px;
  }
  .charging h5{
    font-size: 14px !important;
  }
  .doors_info_text{
    float: right;
    border-left: none;
    padding: 0 !important;
  }
  #book_test_drive{
    padding-left: 0px !important;
    background-color: white;
    text-align: center;
  }
  .contact_title_section{
    text-align: center;
  }
  .contact_sec_right{
    text-align: center;
   }
   #contact_page_main_title{
    margin-top: 15px;
    padding: 35px 15px;
   }
   #get_in_touch{
    padding: 0px 10%;
   }
   .contact_sec_right h5 {
    line-height: 24px;
   }
   #get_in_touch h5 {
    line-height: 24px;
  }
  .visit_us{
    color: white;
  }
  .map{
    width:100%;
    height:270px;
    border: 0;
  }
  #test_img img{
    width: 50% !important;
    margin: 30px 0 0 0;
   }
   #car_pages_main_title{
    padding:35px 15px;
  }

  .cars_slider_images{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: none !important;
  }
  .cars_slider_images_mobile{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block !important;
  }
  .section_3{
    margin-top: 0;
  }
  
/* ------- footer ------- */
  .footer{
    padding: 20px 15px 0 15px;
  }
  .left_1 ul li{
    list-style-type: none;
    padding: 0;
  }
  .left, .center, .right{
    width: 100%;
    float: left;
    text-align: center;
    padding-bottom: 5px;
 }
 .left p, .center p, .right p{
    margin: 0;
    line-height: 32px;
    font-size: 16px !important;
 }
 .copyright p{
    line-height: 22px;
    font-size: 12px;
}
  .under_constr{
	  display: none;
  }
  
}

  @media  (min-width: 200px) and (max-width: 460px){
  
    .left_1 ul li{
      list-style-type: none;
      padding: 3px 0 3px 0 !important;
    }
}


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

  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    font-size: 20px !important;
    color: #002e43;
    font-weight: 800;
    margin-right: 11px;

  }
  .logo{
    padding: 9px 16px 0px 5% !important; 
  }

}

@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay  {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .closebtn{
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media screen and (max-height: 290px){
  .overlay a {
    font-size: 16px;
  }
}