/* ===================================
1. Image styling on home paqe
==================================== */

body {
        margin: 0;
        padding: 0;
    }
  /*
 navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  }
*/
.driving_background {
  background-image: url("../img/driving.gif");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat; 
  padding-bottom:200px;
  }
 
.home_image_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:40px;
  padding-bottom: 20px;

}

ol, ul {
  text-align:left;
 }
 
.bold {
  font-weight:900;
  }
 
.image-box {
  display: flex;
  justify-content: center;
  // width: 50%; // You can adjust this as per the requirement
}

/* 
.image-box.right img {
  transform: translateX(300%);
  animation: moveRight 2s forwards;
}

.image-box.left img {
  transform: translateX(-300%);
  animation: moveLeft 2s forwards;
}

.imagelink:hover {
  border: solid 2px ;
  margin: 0 auto 18px;
}
*/

@keyframes moveLeft {
  0% {
      left: -300px;
  }
  100% {
      transform: translateX(-50%); /* left: 50px target relative position */
  }
}

@keyframes moveRight {
  0% {
      right: 300px;
  }
  100% {
      transform: translateX(50%); /* left: 50px target relative position */
  }
}

.infotext {
  font-style: italic; 
  font-size: small;
}

.banner {
  background-color: #3399ff;
  margin-bottom: 10px;
   }


@media(min-width:767px) {
.navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
    } 
 
.image-box {
  display: flex;
  justify-content: center;
  width: 50%; // You can adjust this as per the requirement
}

.image-box.right img {
  transform: translateX(300%);
  animation: moveRight 2s forwards;
}

.image-box.left img {
  transform: translateX(-300%);
  animation: moveLeft 2s forwards;
 }
 
 }