body
{
  font-family: 'Titillium Web'; 
}


#carousel-home-section img{
  border-radius: 18px;
}

.black-bg
{
    background-image: linear-gradient(to bottom right,#000000,#003b57);
}
.reveal 
{
  position: relative;
  opacity: 0;
}
.reveal.active 
{
  opacity: 1;
}
.active.fade-bottom 
{
  animation: fade-bottom 1s ease-in;
}
.active.fade-left
{
  animation: fade-left 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.center
{
  margin: 0 auto;
}

.carshowbutton img
{
  box-shadow: 0px 10px 10px ;
}

.card-service
{
  background-color: #d30010;
  right: 0;
  margin: 0 auto;
  width: 50%;
  color: white;
  border-radius: 5px;
  padding: 8px;
}

.img-promo {
  margin: auto;
  float: left;
  height: 300px;
  background-size: cover;
  /* object-fit: cover; */
}

.text-price
{
  font-family: 'Titillium Web'; 
}

.model-text{
  font-family: 'Titillium Web'; 
}

#a {
  /* background: rgba(0,255,0,0.2); */
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
}

.cards-wrapper {
display: flex;
justify-content: center;
}

/* .carousel-promo .carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: #ab0000;
}

.carousel-promo .carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: #ab0000;
} */
#carousel-home-section .carousel-control-prev-icon, #carousel-home-section .carousel-control-next-icon
{
  background-color: #000000;
  padding: 15px;
  border-radius: 50%;
}

.carousel-inner {
  padding: 1em;
}
.card-popular{
margin: 0 0.5em;
box-shadow: 0 10px 10px rgba(22, 22, 26, 0.18);
border: none;
margin-left: 6.5rem;
border-radius: 0;
}

#b {
  /* background: rgba(0,255,255,0.2); */
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
}
.carousel-img{
  margin-top: 2rem;
  /* display: block; */
  /* object-fit: contain; */
}
.link{
  color: #002C49;
}
.carousel-img{
  margin-top: 1.5rem;
}

#popularCar .card{
  box-shadow: 4px 10px 10px rgba(0, 0, 0, 0.3);
  margin-top: 2rem;
}

.background-image{
  background-image: url('../img/dark-bg-photo.jpg'); 
  /* backdrop-filter: blur(100px); */
}
.cat-icon .card{
  transition: transform .2s;
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}
.cat-icon .card:hover{
  transform: scale(1.2, 1.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}
.cat-icon .card:hover::after{
  opacity: 0;
}
.cat-icon{
  margin-bottom: 3rem;
}
#popularCar .row{
  margin-bottom: 4rem;
  justify-content: center;
}

#popularCar img
{
  margin-top: 5rem;
  margin: 0 auto;
  width: 180px;
  height: 200px;
  object-fit: contain;
}

.text-popular
{
  margin-top: 0rem;
}

#popularCar .card{
  transition: transform 1s;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.3);
  width: 220px;
  height: 450px;
}

#popularCar .card:hover{
  transform: scale(1.2, 1.2);
  box-shadow: 5px 25px 25px rgba(0, 0, 0, 0.3);
}

#popularCar a{
  color: black;
}
.small-caps{
  font-size: 11px;
}
.carousel-indicators li {
  background-color: #669966;
}

.carousel-indicators .active {
  background-color: red;
}
.carousel-cars .container .All-cars
{
  display: inline;
  padding: 5px;
}

#ba
{
font-style: italic;
}

#ba img
{
width: 250px;
height: 250px;
border-radius: 50%;
padding: 1rem;
}

.testimoni
{  
  /* background-color: #d30010; */
  background-image: url('../img/Cover_testi_web.png');
}
.testimoni h3, .testimoni h5
{
color: white;
padding: 0.5rem;
font-style: italic;
}

.testimoni hr
{
background-color: white;
width: 10%;
}

.review-img hr
{
background-color: white;
width: 50%;
}
.review-txt hr
{
background-color: white;
width: 10%;
}


.name-and-title p
{
  color: white;
  border-radius: 15px;
}

#review p
{
font-style: italic;
}

.review-artist p, #ba p
{
  font-style: italic;
  color: white;
}

#review img
{
padding: 10px;
}

#review h2
{
padding: 10px;
color: red;
}

.review-img img
{
width: 280px;
height: 280px;
border-radius: 50%;
padding: 1rem;
}

.book-text-service:hover .fa-arrow-right
{
  transform: translateX(12px);
  transition: all 0.3s ease;
}
.book-text-service
{
  align-items: flex-start;
  color: #d30010;
}
.main-menu
{
  display: flex;
  align-items: flex-end;
}

.carshowbutton
{
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.button-car-favorit-position
{
  margin-top: 2rem;
}
#service .main-menu .card{
  display: flex;
  align-items: stretch;
  align-content: stretch;
}
#service .card .row
{
  padding: 1rem;
}
#service .card
{
  margin-top: 2rem;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  text-align: center;
  color: white;
  font-weight: bold;
}

#lead-gen{
  overflow: hidden;
  background-color: #032670 ;
  color: white;
}

#lead-gen h3{
  font-family: 'Titillium Web'; 
  justify-content: center;
}

#lead-gen-submit{
  padding: 10px 15px;
  border-radius: 8px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(to right, #6527BE,#4A55A2);
  /* background-color: #B9F3FC;#9575DE */
  color: #FAF9F6	;
}


@media screen and (min-width:501px) {
  
  .card-service-cabin
  {
    background-color: black;
    right: 0;
    margin: 0 auto;
    width: 65%;
    color: white;
    border-radius: 5px;
    padding: 8px;
  }
  .customer-only img
  {
    width: 280px;
    height: 280px;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(-20px -20px rgba(255,255,255, 0.5));
    border-radius: 20px;
  
  }
  video
  {
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
  }
 

  #cars-favorit img
  {
    border-radius: 10px;
  }

  /* #cars-favorit figure:hover img
  {
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .carshowbutton:hover figure img
  {
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  } */

  

  .btn-img, .btn-img:hover
  {
    color: white;
    background-color: #002C49;
    border-radius: 8px;
    padding: 10px 20px;
  }

  #review p{
    font-style: italic;
    color: white;
  }
  

  .card-img-customer-only{
    position: relative;
    width: 280px;
    margin: 0 auto;
  }

  .img-customer{
    display: block;
    width: 100%;
    filter: drop-shadow(-20px -20px rgba(255,255,255, 0.5));
  }

  .customer-only .name-and-branch{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 66%;
    left:3%;
    width: 93%;
    height:30%;
    color: white;
    border-radius: 15px;
    background-color: rgba(22, 22, 26, 0.5);
  }

  .name-and-title-actor p
  {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 15px;
  }

  .btn-img:hover .fa-arrow-right
  {
    transform: translateX(8px);
    transition: all 0.3s ease;
  }
  .promo-mobile-view
  {
    display: none;
  }
  .carousel-img
  {
    width: 100%;
  }
  .mobile-carousel
  {
    display: none;
  }
  .web-lead{
    display: none;
  }
  .text-lead-new{
    text-align: justify;
    font-size: 25px;
    font-weight: bold;
  }
   
}

@media screen and (min-width:900px) {
  /* its for hover btn in img favorite img */
  /* .btn-img 
  {
    display: none;
  } */

  /* .carshowbutton figure:hover img
  {
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }  
  .carshowbutton:hover figure img
  {
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }  

  .carshowbutton:hover .btn-img
  {
    border: none;
    bottom: 10rem;
    right: 35%;
    color: white;
    background-color: #002C49;
    border-radius: 8px;
    display: inline-block;
    padding: 10px 20px;
  } */

  .btn-img:hover .fa-arrow-right
  {
    transform: translateX(8px);
    transition: all 0.3s ease;
  }
  .web-lead{
    display: flex;
  }
  .mobile-lead{
    display: none;
  }
}

@media only screen and (max-device-width:500px){

  .card-service-cabin
  {
    background-color: black;
    right: 0;
    margin: 0 auto;
    width: 65%;
    color: white;
    border-radius: 5px;
    padding: 8px;
  }
  

  #services h1{
    font-size: 10px;
  }
  
  #service
  {
    margin-top: 3rem;
  }
  /* #service img
  {
    width: 100%;
  } */
  .card-service
  {
    background-color: #d30010;
    right: 0;
    margin: 0 auto;
    width: 100%;
    color: white;
    border-radius: 5px;
    padding: 2px;
  }
  video
  {
    width: 100%;
  }
  .promoimg
  {
    width: 280px;
  }
  .btn-img
  {
    position: absolute;
    border: none;
    right: 25%;
    color: white;
    background-color: #002C49;
    border-radius: 8px;
    display: inline-block;
    padding: 10px 20px;
  }
  .promo-web-view
  {
    display: none;
  }
  .card-img-customer-only{
    position: relative;
    width: 280px;
    margin: 0 auto;
  }

  .img-customer{
    display: block;
    width: 100%;
    filter: drop-shadow(-20px -20px rgba(255,255,255, 0.5));
  }

  .customer-only .name-and-branch{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 65%;
    left:10%;
    width: 80%;
    height:30%;
    color: white;
    border-radius: 15px;
    background-color: rgba(22, 22, 26, 0.5);
  }
  .name-and-title-actor
  {
    /* position: absolute; */
    width: 58%;
    color: white;
    padding: 5px;
    margin-bottom: 2rem;
    /* top: 71%;
    left: 50%; */
    /* transform: translate( -50%, -50% ); */
    text-align: center;
    border-radius: 15px;
  }
  .name-customer, .branch-name
  {
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
  }
  .carousel-img
  {
    width: 100%;
  }
  .not-mobile-carousel
  {
    display: none;
  }
  
  #carousel-home-section .carousel-control-prev-icon, #carousel-home-section .carousel-control-next-icon
  {
    background-color: #000000;
    padding: 10px;
    border-radius: 50%;
  }

  .content-video{
    display: none;
  }

  .web-lead{
    display: none;
  }

  .mobile-lead{
    display: flex;
  }
  
  .text-lead-new{
    text-align: justify;
    font-size: 17px;
    font-weight: bold;
  }
}