/* nav */
body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
  }
  
  a {
    text-decoration: none;
    color: #12135f;
  }
  
  a:hover {
    color: #12135f;
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Raleway", sans-serif;
  }
  
  #main {
    margin-top: 90px;
  }
  
  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 998;
    background: #12135f;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
  }
  
  .back-to-top:hover {
    background: #86c0da;
    color: #fff;
  }
  
  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }
  
  /*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  }
  

  
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  .navbar-nav .nav-link
  {
    color: rgb(18, 64, 118);
    font-size: 0.9rem;
 
  
  }
  .navbar-nav .nav-link:hover
  {
    background-color: #F4CE14;
 
  
  }
  .navbar-nav .nav-link.active
  {
    background-color: #F4CE14;
    color: #12135f;

  }
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  .hero {
    background: linear-gradient(rgba(18, 64, 118, 0.9), rgba(18, 64, 118, 0.4)), url("../img/emergency-car-locksmith.webp") top center;
    background-size: cover;
    height: auto;
   
  }
  .locked{
    background-image: url("../img/woman-locked-out-of-car.webp") ;
    background-size: cover;
    height: auto;
   
  }
  
  .transporder
  {
    background-image: url("../img/broken-transponder-car-key-replacement.webp") ;
    background-size: cover;
    height: auto;
   
  }
  .ignition
  {
    background-image: url("../img/Ignition-Key-change.png") ;
    background-size: cover;
    height: auto;
   
  }
  .rekey
  {
    background-image: url("../img/high-security.webp") ;
    background-size: cover;
    height: auto;
   
  }
  .replace
  {
    background-image: url("../img/car-key-replacment.webp") ;
    background-size: cover;
    height: auto;
   
  }
  .top
  {
    margin-top: 11rem;
    margin-bottom: 11rem;
  }
  
  #hero h1 {
    margin: 0 0 10px 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 56px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: -1px 0 2px #124076;
  }
  .btn-head
  {
    background-color: #F4CE14;
    font-size: 1.4rem;

  }
  
  .btn-head:hover
  {
    background-color: #124076;
    font-size: 1.4rem;
    color: #fff;
  }
  
  
  @media (min-width: 1024px) {
    #hero {
      background-attachment: fixed;
    }
  }
  
  @media (max-width: 768px) {
    #hero h1 {
      font-size: 28px;
      line-height: 36px;
    }

  }
  /* secation one*/


 h2
{
  font-size: 3rem;
}
.background
{
  background-image: linear-gradient(rgba(18, 65, 118, 0.8),rgba(18, 64, 118,0.4)) ,url(../img/24-7-emergency-car-locksmith-services.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(18, 64, 118,0.6);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;

}
.lock2
{
  background-image: linear-gradient(rgba(18, 65, 118, 0.9),rgba(18, 64, 118,0.6)) ,url(../img/avoid-losing-keys-problems.webp);


}
/* about us */

.about h2
{
 color: #124076;
}
.about p span

{
  color: #12135f;
  font-size: 1.6rem;
}
.about ul 
{
  list-style: none;
}
.about li ,i
{ 

  font-size: 1.5rem;

}
.about li i:hover
{ 
color: #12135f;
  font-size: 1.5rem;

}
/* form */
#form h5
{
  font-size: 3rem;
}
  .spam { display:none;}
  #form h3
  {
    color: #124076;
    font-size: 2.4rem;
  }
  .service
  {
    color: #124076;
  }

  #form p
  {
   font-size: 1.5rem;
  }

  /* end form */
  /* sec2 */

  .font
  {
    background-color: rgba(18, 64, 118,0.8);
    padding: 4rem 2rem;
    color: #fff;
    margin: 8rem;
  }
  .sec1 h2
  {
    color: #12135f;
  }

/* Footer */
footer
{
  background-color: #124076;
  color:#fff;
}
.social-links i
{
  color: #fff;
  font-size: 1.4rem;
  padding: 0.2rem 0.5rem;
}
.social-links i:hover
{
  color: #F4CE14;
 
}
/*--------------------------------------------------------------
# Featured
--------------------------------------------------------------*/
.featured {
  position: relative;
  z-index: 2;
}

.featured .icon-box {
  padding: 40px 30px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: #fff;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.featured .icon-box i {
  color: #F4CE14;
  font-size: 42px;
  margin-bottom: 15px;
  display: block;
  line-height: 0;
}

.featured .icon-box h3 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.featured .icon-box h3 a {
  color: #545454;
  transition: 0.3s;
}

.featured .icon-box p {
  color: #545454;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}
.featured span
{
  color: #F4CE14;
  font-size: 1.3rem;
}
.featured .icon-box:hover {
  background: #F4CE14;
}

.featured .icon-box:hover i,
.featured .icon-box:hover h3,
.featured .icon-box:hover p {
  color: #12135f;
}

.marquee{width:100%;margin:0 auto;overflow:hidden;white-space:nowrap;box-sizing:border-box;animation:marquee 50s linear infinite}.marquee:hover{animation-play-state:paused}@keyframes marquee{0%{text-indent:27.5em}100%{text-indent:-105em}}