:root {
  --gray: rgb(73, 73, 73);
    --light: #d4d0c2;
    --beig: rgb(182, 181, 168);
    --yellow: #DDC384;
  }
  p{
    color: black;
  }
  h1{
    color: black;
  }
h2, h3, h4, h5, h6{
  color:black;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

  /* start header */
header{
  position: relative;
}

.header-left{
  background-color: #3E3D45;
  /* height: 100vh; */
  /* box-shadow: 5px 10px 8px 10px #888888; */
  padding-top: 12%;
  padding-bottom: 10%;

}

.header-right{
  background-image:  linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),url(../images/car-lockout-home.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.header-left h1{
  color: white;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-bottom: 5%;

}

.bn-span{
  font-size: 60px;
  font-weight: bold;
}


.logo{
  text-align: center;

}



.logo img{
  width: 180px;
}



.header-left article{
  color: white;
  text-align: center;
  margin-bottom: 5%;
  font-size: 18px;
}







nav{
  margin: auto;
}



  .navbar-light .navbar-nav .nav-link{
color: white!important; 
font-size: 18px;
margin-right: 35px;
font-weight: bold;
text-transform: uppercase;

letter-spacing: 2px;

  }
  .navbar-toggler-icon{
    color: var(--blue);
  }

  .navbar-light .navbar-toggler{
background-color: white;
    
  }

  /* .navbar-light .navbar-toggler-icon {
    background-image: url(../images/bars.webp);
} */

.navbar{
padding:0.5% 1%;


background-color: #DE7643;




  /* border-top: 5px solid black;
  border-bottom: 5px solid black; */
 
  /* height: 200px; */

}


.navbar-collapse{
  text-align: center;
  margin: auto;
}

.nav-content{
  margin: auto;
  margin-top: 3%;

}



header button {
border: 0;
padding: 8px 40px;
/* border: 2px solid black; */
letter-spacing: 5px;
font-size: 22px;

background-color: #323338;
color: white;
}








  /* end header */

 /*start offers  */
.offers{
  margin-bottom: 5%;
}


.offers-right{

  height: 700px;
  padding: 2%;
}

.enjoy{
  color: #DE7643;
  font-size: 60px;
  font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}

.offers .special{

  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 10%;
}

.offers article{

  margin-top: 2%;
  letter-spacing: 1px;
  width: 70%;

  margin-bottom: 2%;
}

.offers-left{
  padding: 2% 5%;
  background-color: #3E3D45;
}
.offers-item{
  box-shadow: 5px 0 8px 0 #888888;
  height: 300px;
  position: relative;
  width: 80%;
  margin: auto;
  margin-bottom: 3%;
  margin-left: 70%;
}

.offer-title{
  padding: 2%;
}


.offers-item1{
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/car-ignition-offer.webp);
  background-position: center;
  background-size: cover;
  border: 0;
 
}

.offer-details{
  background-color: white;
  width: 70%;
  padding: 2%;
  text-align: center;
  font-size: 20px;
 position: absolute;
 top: 20%;
 right: 80%;
}


.offer-details article{
  margin: auto;
font-weight: 500;
}


.offers-item2 {
  background-image:  linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),url(../images/car-key-offer-1.webp);
  background-position: center;
  background-size: cover;
  border: 0;
}

.offers-item3 {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/car-key-offer.webp);
  background-position: top;
  background-size: cover;
  border: 0;
}

.offers-item span{
font-size: 50px;
font-weight: bold;
}

.offers-item button{
  border: 0;
  background-color: #323338;
  color: white;
  padding: 1% 5%;
  margin-bottom: 1%;

  
}

.offer-number button{
  border: 0;
background-color: #3E3D45;
color: white;
padding: 5% 10%;
font-size: 25px;




letter-spacing: 3px;
}
 /*end offers  */

 /* start happen */
 .happen{
  margin-bottom: 5%;
 }
 .happen h2{
  margin-bottom: 3%;
 }


 .happen-number button{
  border: 0;
  background-color:#3E3D45;
  color: white;
  padding: 2% 10%;
  margin-top: 5%;
  font-size: 21px;
  letter-spacing: 3px;
}
.happen-img{  background-image: url(../images/leave-their-keys-inside-the-vehicle.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}



.happen-border{
  border: 1px solid rgba(50, 51, 56, 0.2);
  border-top: 0;
  padding: 4%;
}
 /* end happen */

 /* start  Inconveniences  */
.inconveniences{
  margin-bottom: 5%;
 
}
.inconveniences-txt{
  background-color: #3E3D45;
  padding:2% 8%;
color: white;

}

.inconveniences-border{
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 0;
  padding: 5%;
}

.inconveniences-txt h2{
  color: white;
}

.inconveniences-txt span{
font-size: 20px;
}

.inconveniences-button button{
  border: 0;
  padding: 8px 40px;
  /* border: 2px solid black; */
  letter-spacing: 5px;
  font-size: 22px;
  
  background-color: #323338;
  color: white;
}

.incoveniences-img {
  background-image: url(../images/risks-of-being-locked-out.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}
 /* end  Inconveniences  */


 /* start Preventive Measures  */

 .measures{
  margin-bottom: 5%;
 }

 .measure-img{
  background-image: url(../images/avoid-lockouts.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

 }




.measure-border{
  border: 2px solid rgba(50, 51, 56, 0.2);
  border-bottom: 0;
  padding: 2%;
}

 /* end Preventive Measures  */


/* start contact */
.contact{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),url(../images/contact-us.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  margin-bottom: 5%;
}



.contact-div{

  background-color: #3E3D45;
  margin-bottom: 0;
  width: 40%;
padding: 2%;
color: white;

}
.contact-border{
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 0;
  padding: 4%;
}
.contact-div h2{
  color: white;
  text-transform: uppercase;
}


.contact-content input{
  border: 0;
border-bottom: 1px solid white;
background-color: transparent;
}
.form-control{
padding: 0;
}

.form-group{
margin-bottom: 20px;
}
form input{
width: 80%;
margin-bottom: 4%;
}
textarea{
width: 70%;
height: 80px;
background-color: transparent;
border-color: white;
padding: 1%;
}
.contact-content h2{
margin-bottom: 2%;
font-family: "Monotype Corsiva", serif;
}
form .button{

padding: 10px 50px;

letter-spacing: 3px;
font-size: 25px;
font-weight: bold;
background-color:white;
color: #323338;
text-transform: uppercase;

}


.contact-div1{
  height: 300px;
  width: 40%;
}


.contact .social{
  display: flex;


}

.contact .social i{
  color:white;
  margin-right: 4%;
  font-size: 20px;
}


.contact span{
  font-size: 20px;
  
}



/* end contact */


/* start get */
.get{
  margin-bottom: 5%;
}
.info{
margin-bottom: 4%;
}

.info h2{
  margin-bottom: 2%;
}
.address, .mail, .working-hours{
  height: 100px;
  background-color: #3E3D45;
}
.address, .mail, .working-hours{
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.info i{
  font-size: 30px;
  color: #DE7643;
}


.info a{
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.info span{
  color: white;
}

.get-border{
  border: 2px solid rgba(50, 51, 56, 0.2);
  border-left: 0;
  padding: 2%;
}
/* end get */


  /* start brand */
  .marquee {width:100%;
    background-color: #494949;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
    color:#fff;}
  
  .marquee:hover {animation-play-state: paused}
  
  
  .brands{
    background-color: #3E3D45;
  padding:  0 ;
  
  
  }
  @keyframes marquee {0%   { text-indent: 27.5em }100% { text-indent: -105em }}
    /* brands */
  .info-item a{
    color: black;
  }
  
  .brands-section{
    background-color:#494949;
    margin-bottom: 1%;
    padding:  0;
  }
  
  /* end brand */


.copyright{
  background-color: #3E3D45;
  padding: 1%;
  color: white;
  font-size: 16px;
  letter-spacing: 2px;
}



iframe{
  width: 600px;
  height: 450px;
}



  @media screen and (max-width:1400px){
    .offer-details {
      background-color: white;
      width: 100%;
      padding: 2%;
      text-align: center;
      font-size: 20px;
      position: absolute;
      top: 20%;
      right: 80%;
  }
  }


  @media screen and (max-width:1200px){
    .offer-number button {
      border: 0;
      background-color: #3E3D45;
      color: white;
      padding: 5% ;
      font-size: 25px;
      letter-spacing: 3px;
  }

  iframe{
    width: 500px;
  }

  .navbar-light .navbar-nav .nav-link {
    color: white!important;
    font-size: 14px;
    margin-right: 35px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.header-left article {
  color: white;
  text-align: center;
  margin-bottom: 5%;
  font-size: 16px;
}

.bn-span {
  font-size: 30px;
  font-weight: bold;
}
  }

  
  @media screen and (max-width:1000px){
    header button {
      border: 0;
      padding: 8px 30px;
      /* border: 2px solid black; */
      letter-spacing: 5px;
      font-size: 20px;
      background-color: #323338;
      color: white;
  }
  .offer-number button {

    padding: 4% ;
    font-size: 20px;
    letter-spacing: 3px;
}
.inconveniences-button button {
  border: 0;
  padding: 8px 40px;
  /* border: 2px solid black; */
  letter-spacing: 5px;
  font-size: 20px;
  background-color: #323338;
  color: white;
}
.contact-div {
  background-color: #3E3D45;
  margin-bottom: 0;
  width: 60%;
  padding: 2%;
  color: white;
}


iframe{
  width: 400px;
}

.header-left article {
  color: white;
  text-align: center;
  margin-bottom: 5%;
  font-size: 16px;
}

.bn-span {
  font-size: 30px;
  font-weight: bold;
}
  }

  @media screen and (max-width:991px){
    .offers-item {
      box-shadow: 5px 0 8px 0 #888888;
      height: 300px;
      position: relative;
      width: 80%;
      margin: auto;
      margin-bottom: 15%;
      margin-left: 10%;
  }

  .offer-details {
    background-color: white;
    width: 80%;
    padding: 2%;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 70%;
    right: 10%;

}


.offers-right {
  height: auto;
  padding: 2%;
}


iframe{
  width: 100%;
}

.navbar {
  padding: 0.5% 1%;
  background-color: transparent;
  /* height: 200px; */
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

  background-color: white;
}

.navbar-light .navbar-nav .nav-link {
  color: black!important;
  font-size: 14px;
  margin-right: 35px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

nav{
margin-left: 30px;
}

.header-left article {
  color: white;
  text-align: center;
  margin-bottom: 5%;
  font-size: 18px;
}

.bn-span {
  font-size: 60px;
  font-weight: bold;
}
  }

  @media screen and (max-width:699px){
    .offers-item {
      box-shadow: 5px 0 8px 0 #888888;
      height: 300px;
      position: relative;
      width: 100%;
      margin: auto;
      margin-bottom: 25%;
      margin-left: 0;
  }

  .offer-details {
    background-color: white;
    width: 100%;
    padding: 2%;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 70%;
    right: 0;

}


.contact-div {
  background-color: #3E3D45;
  margin-bottom: 0;
  width: 80%;
  padding: 2%;
  color: white;
}

.header-left article {
  color: white;
  text-align: center;
  margin-bottom: 5%;
  font-size: 16px;
}

.bn-span {
  font-size: 30px;
  font-weight: bold;
}
  }