/* myapp/static/myapp/css/styles.css */
body{
  transition: all 0.3s ease;
  scroll-behavior: smooth;
}
.navigation{
  border: 2px solid red;
}
#navmini{
  background: #000000 !important;
  min-height: 55px;
  color: white !important;
  
}
.navbar-toggler {
  color: #000000 !important;
  background: #000000 !important;
}
#navbarmain{
  background-color: white !important;
  margin-bottom: -5.5%;
  color: #000000 !important;
}
#navbarNav ul li a{
  color: #000000 !important;
  margin: 5px;
  margin-left: 10px;
  font-size: large;
}
#navbarNav{
  /* background-color: #01447e !important; */
}
#auth li a{
  font-size: large;
}
.card {
  margin-bottom: 2rem;
}

.img-thumbnail {
  cursor: pointer;
  border: 2px solid #ddd;
  margin-bottom: 10px;
}

.container_body{
padding-top: 100px;
}

/* myapp/static/myapp/css/styles.css */

.masthead {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height:450px !important;
  /* margin-top: 10px !important; */
  background-image: linear-gradient((to right, #384355, #345b6d, #84c7ca, #a5bdb1, #f1f6e9),url("/vehicles/static/images/bgimg.png"));
}

#veh-img {
  height: 450px !important;
  /* border: 2px solid black !important; */
}

#veh-img img{
  height: 450px !important;
  /* border: 2px solid black !important; */
  /* width: 100%; */
}
#veh-dets{
  /* border: 2px solid black !important; */
  margin-top: 2%;
  margin-bottom: 10%;
  padding:8%;
  margin-left: 10% !important;
  height: auto;
  width: 100%;
  border-radius: 15px;

  background-image: linear-gradient(rgba(7, 7, 7, 0.945),rgba(0,0,0,0.7));
}
#veh-dets a{
  text-decoration: none !important;
  /* height: 100px !important; */
  width: 200px !important;
  border-radius: 10px !important;
  background-color: red;
  padding: 10px !important;
  color: lightcyan;
  border:none;
  margin-top: 15px !important;
  /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */

}
#veh-dets h1{
  font-family: 'Brush Script MT', cursive;
  font-size: 70px;
  color: red !important;
  text-align: center;
  
}
#veh-dets h4{
  font-size: 26px;
  color: rgb(253, 252, 252);
  text-align: center;
  /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
}
#banner{
  /* min-height: 200px; */
  background-color: #493e3e;
  color: white;
  
}
#banner h1{
  /* font-family: 'Brush Script MT', cursive; */
  font-size: 45px !important;
  padding: 10px;
  margin: 5px;
}
#banner a{
  text-decoration: none;
  padding: 10px;
  height: 50px !important;
  width: 300px !important;
  /* border: 1px solid white; */
  justify-content: center;
  color: white;
  border-radius: 15px !important;
  margin: 10px;
}
#banner p{
  margin: 20px;
  /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */

}
#banner .contactus{
  background-color: red;
  color: white;
}
#banner .explore{
  background-color: white;
  color: red;
}
.model-banner{
  top: 22%;
  left: 70%;
  position: absolute;
  color: #fffefe;  
}


.car-brand{
font-family: 'EB Garamond';
font-size: 3vw;
}

.car-model{
font-family: 'EB Garamond';
font-size: 2vw; 
margin-top: -10%; 
}

@media (min-width: 1200px) {
.top-banner{
  top: 60%;
  left: 15%;
  line-height: 6vh;
}
}

@media (max-width: 1200px) {
.top-banner{
  top: 30%;
  left: 15%;
  line-height: 4vh;
}
}

@media (max-width: 767px) {
.top-banner{    
  top: 30%;
  left: 15%;
  line-height: 2vh;
}
}

.top-banner{
background: #000000;
color: #ffffff;  
position: absolute;
opacity: 0.7;
padding: 2%;
border-radius: 10px;
width: 60%;
align-items: center;

}

/* .Top-banner-text1{
font-family:"helvetica";
font-size: 4vw; 
font-weight: bolder;
}
.Top-banner-text2{
font-family: 'Comic Sans MS', cursive; 
font-size: 4vw;  
font-weight: bolder;
}


.check_car, .place_bid{
padding: 1% 2% 1% 2%;
border: none;
border-radius: 4px;
font-weight: bold;
margin: 0.6%;
width: 35%;
font-size: 2vw;
}


.check_car{
background-color: #ffffff;
color: hsl(354, 84%, 52%);  
}

.place_bid{
background-color: hsl(354, 84%, 52%);
color: #ffffff;
}

.place_bid:hover{
background-color: #ffffff;
color: hsl(354, 84%, 52%);
}


.check_car:hover{
background-color: hsl(354, 84%, 52%);
color: #ffffff;
} */



.img-thumbnail {
  cursor: pointer;
  border: 2px solid #ddd;
  margin-bottom: 10px;
}



.lower-cont{
  background-color: #fafbfb;
  margin: -60px 60px 0px 60px;
  min-height: 200px;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
}

.lower-cont1{
  margin: 60px 60px 0px 60px;
  
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
}

.image-container{
  border-radius: 10px;
}


.card{
  width: 100%;
}


.box{    
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.12);
  transition: 1s;
}

.image{
  display: block;
  width:  100%;
  border-radius: 10px;
}

.box:hover{
  transform: scale(1.2);
  z-index: 2;
}

.select-container{
  width: 30%;
}

.lower-head{
  text-align: center;
  
  width: 100%;
}

.lower-content{
  text-align: center;
  
  width: 100%;
}

label{
  font-weight: bolder;
  font-size: larger;
}


.topnav{
  width: 100%;
  background-color: #0c7ae7;
}



@import url("https://fonts.googleapis.com/css?family=Josefin+Sans|Mountains+of+Christmas&display=swap");

* {

padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
/* font-family: Arial, sans-serif; */
}

.admin-dashboard{
  min-height:60vh;
}

.opentime_span{
  min-width: 200px;
}
.email_span, .opentime_span1{
  min-width: 150px;
}
.opentime_span1{
  min-width: 160px;
}
.call_span{
  min-width: 100px;
}

/*Vehicles view Page*/

.logo-img{
  /* height: 200px !important; */
  margin-bottom: -20px;
}

#vehicleimgs{
  height: 650px;
  overflow-y: scroll;
}

#veh-detsimg{
  height: 650px;
}
.car_cad{
  border-radius: 15px !important;
  border:none !important;
  /* height: 420px; */
}
.car_cad .cicon{
  color : #de1e1e !important;
}
.car_image{
  /* border: #797878 solid 1px; */
  border-top-right-radius: 4px !important;
  border-top-left-radius: 4px !important;
  margin: 1px;
}

.car_img{
  /* display: flex; */
  transition: 0.9s;
  width: 100%;
  align-items: center;
  height: 320px;
  border-top-right-radius: 15px !important;
  border-top-left-radius: 15px !important;
  
}
.car_img:hover{ 
  position: relative;
  transform: scale(.95);  
  color:black;
  cursor: pointer;
  opacity: 0.8;
  /* z-index: 1; */
}

.car_info{
  font-size: small;
}

.car_name a{
  text-decoration: none;
  color: #494949;
}
.car_name a:hover{
  text-decoration: none;
  color: #fe0202;
}
.right_box{
border: 1px solid #3dbcec;
background-color:  rgb(193, 228, 240);
border-radius: 4px;
padding: 4px;
font-family: Arial, sans-serif;
text-align: center;
}

.vehicle_info{
text-align: center;
background-color: rgb(226, 236, 240);
border-radius: 4px;
padding: 3%;
margin: 3%  10% 2% 14%;
}
.views-bg, .highest-bid{   
background-color: #ec1f35;
}
.highest-bid{
width: 60%;
font-size: 90%;
}

.vehicle_more_info{
text-align: center; 
padding: 2%;
margin: 0 2%  2%  10%;
}

.contact-btn{
margin: 3%;

}

.enq-whatsapp{
font-size: 90%;
background: #22c35e;
border: none;
padding: 2% 1% 2% 1%;
margin: 1%;
width: 100%;
color: #ffffff;
}
.enq-call{
font-size: 90%;
font-size: 100%;
background: #3dbcec;
border: none;
padding: 2%;
margin: 1%;
width: 100%;
color: #ffffff;
}
.enq-bid{
font-size: 100%;
background-color: #fecd07;
border: none;
padding: 2%;
margin: 1%;
width: 100%;
color: #000000;
}

.enq-share{
text-align: center;
margin-top: 1%;
border: 1px solid #3dbcec;
background-color:  rgb(254, 254, 254);
border-radius: 4px;
padding: 3%;
}
.enq-share .icons{
padding: 3% 3% 3% 3%;
margin-left: 6%;
background-color: #eae8e8;
border-radius: 100%;
}

.hr_details{
border: 1px dotted #3dbcec; 
}
.info_title{
width: 100%;
padding-left: 6%;
}
.additional-info{
margin: 2% 2% 2% 2% ;
font-family: Arial, sans-serif;
}

.info_label, .info_data{
padding:  2% 6% 2% 6%;
}
.info_label{
font-weight: bold;
}

.info_label .cicon{
color: hsl(354, 84%, 52%);
padding-right: 2%;
}

.info_table{
width: 80%;
}
.info_table tr td{
padding: 4% 1% 4% 4%;
border-bottom: #c5d5e6 solid 1px;
}

.deals{
border: #c5d5e6 solid 1px;
background-color:  rgb(193, 228, 240);
border-radius: 10px;
padding: 2%;
}

.breadcram_back a, .breadcram_chev, .breadcram_vehicle{
padding: 2% 1% 2% 0%;
font-family: Arial, sans-serif; 
color: #000000; 
font-weight: bold;
}
.breadcram_back a{
text-decoration: none;
padding-left: 2%;  
}

.breadcram_chev .fa-chevron-right{
font-size: 6px;
color: #797878; 
}

/*Small screen devices*/
@media (max-width: 1000px){
.highest-bid{
  width: 80%;
}

}

@media (max-width: 600px){

.highest-bid{
  width: 100%;
}
}


/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}

.howitworksicon{
width: 100%;

}
.howitworksicon .round_icon{
padding: 4%; 
border-radius: 50%;
color: hsl(354, 84%, 52%);
background-color: hsl(354, 40%, 90%);
}

.auction_header{
text-align: center;
font-size: larger;
font-weight: bolder; 
line-height: 60px; 
color: #000000;
font-family: Lexend,sans-serif;
}
.auction_items{
text-align: left;
font-size: medium;
line-height: 10px; 
}

.auction_items_intro{
color:  #3d3c3c;
text-align: left;
font-size: large;
line-height: 40px;
font-family: Lexend,sans-serif;
}


.message-container{
padding-top:10%;
}
.login-btn:hover{
  color: black !important;
}
.contact_pane{
background-color: #E9ECEF;
margin: 3% 0% 3% 0%;
border-radius: 6px;
}

.aboutus_pane{
background-color: #E9ECEF;
margin: 3%;
padding: 3%;
border-radius: 6px;
}

.vehicles_pane, .auction_pane, .details_pane{
margin: 1% 0% 1% 0%;
}

@media (max-width: 510px) {
  .centered {
    position: absolute;
    top: 20%;
    left: 20%;
    /* transform: translate(-50%, -50%); */
  }
}


@media (min-width: 511px) {
  .centered {
    position: absolute;
    top: 25%;
    left: 20%;
    /* transform: translate(-50%, -50%); */
  }
  .vehicles_pane, .auction_pane, .details_pane{
    margin: 1% 0% 1% 0%;
    }
}

@media (min-width: 768px) {
  .centered {
    position: absolute;
    top: 25%;
    left: 20%;
    /* transform: translate(-50%, -50%); */
  }
  .vehicles_pane, .auction_pane, .details_pane{
    margin: 1% 0% 1% 0%;
    }
}

@media (min-width: 1200px) {
  .centered {
    position: absolute;
    top: 30%;
    left: 20%;
    /* transform: translate(-50%, -50%); */
  }
  .vehicles_pane, .auction_pane, .details_pane{
    margin: 1% 0% 1% 0%;
    }
}

.banner{
  border-radius: 10px;
  padding: 3vw;
  opacity: 0.9;
  text-align: center;
  width: 70%;
}

.jumbotron_head_row{
  width: 70%;
  text-align: center;
}

.jumbotron_head{
  font-family: Lexend,sans-serif;
  font-weight: bolder;
  font-size: 4vw;
  color: #e6e1e1;
}

.jumbotron_head1{
  color: #000000;
  font-size: 1.4vw;
}

.jumbotron_head2{
  color: #f5f6f7;
  font-size: 1.9vw;
}




.who_text{
color: #ED1F35;
}

.yr_pane{
text-align: right;
}

@media (max-width: 767px) {
.year{
  font-size: 500%;
  font-weight: bolder;
  color: #FF2800;
  margin-left: 50%;
}
}

@media (min-width: 768px) {
.year{
  font-size: 900%;
  font-weight: bolder;
  color: #FF2800;
  margin-top: -16%;
  margin-left: 50%;
}
}

.more-info{
margin: 0% 5% 5% 5%;
background-color: #f6f6f6;
border-radius: 5px;
}


.bottom_container{
background: #F2F2F2;
padding: 3%;

}

.span_about{
color: #DC3545;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bolder;
font-size: 30px;  
}
.middle-banner{
align-items: center;
}

.middle-banner-content{
width: 100%;
opacity: 0.6;
padding: 3%;
background-color: #000000; 
font-family: 'Brush Script MT', cursive; 
color: #ffffff;
text-align: center;
}

.span_abouthead{
align-items: center;
color: #000000;
font-family: Lexend,sans-serif;
font-weight: bolder;
font-size: 30px;
margin: 3%;
}

.fa-check{
color: #DC3545;

}

.auction_items_text{

color: #3d3c3c;
}


@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
  display: none;
}
.carousel-inner .carousel-item > div:first-child {
  display: block;
}
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-start.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}
}


#howitworks .card{
min-height: 320px !important;
border: none !important;
border-radius: 10px !important;
padding: 22px !important;
margin: 10px !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
font-family: Lexend,sans-serif !important;
}

#howitworks .card-header {
background-color: #ffffff !important;
padding: 10px !important;
border-radius: 10px !important;
font-family: Lexend,sans-serif !important;
}

#howitworks .card p{
line-height: 24px !important;
font-size: 15px !important;
font-family: Lexend,sans-serif !important;
}

#howitworks #steps{
line-height: 20px !important;
font-size: 14px !important;
color: white !important;
background:hsl(354, 84%, 52%) !important;
padding: 10px;
border-radius: 5px !important;
font-family: Lexend,sans-serif !important;
}
#step3 {
margin-top: 7.5% !important;
}

.card-items{
padding: 5%;
background-color: #fefefe;
border-radius: 10px;
}

/* Mobile-specific styles for screen width 767px and below */
@media (max-width: 767px) {
  
  #navbarmain{
   background-color: #f7f7f7 !important;
   margin-bottom: -20%;
   }

  #vehicleimgs{
    height: auto;
    /* overflow-y: scroll; */
  }
  
  #veh-detsimg{
    height: 350px;
  }
  }