*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
  
}

#home{
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

/* BACKGROUND VID START HERE */
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}
/* BACKGROUND VID END HERE */


/* START:STYLING  FOR THE NAVBAR STARTS FROM HERE */

.navbar{
  color: white;
  height: 10vh;
  width: 100%;
  background: linear-gradient(315deg, #69140e 0%, #d58936 74%);
  
}

/* STRAT JOLLY PIC AT TOP LEFT */
.navbar-toggler-icon {
  background-color: orange; 
}

.navbar-brand img{
  width: 50px;
  height:50px;
  border-radius: 50%;
}
/* END JOLLY PIC AT TOP LEFT */

.nav-item a{
  color:white !important;
  text-decoration: none;
  text-shadow: orange 2px 2px 2px;
  margin-left: 30px;
  
}

.nav-item a:hover{
  color:orange !important;
  text-shadow: white 3px 3px 3px !important;
}



/* END: STYLING FOR THE NAVBAR ENDS HERE */



/* START- CENTER CAPTION ON LANDING-PAGE AND EXPLORE BUTTON HERE */
.content {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}


/* start- vehicle registration services */
.content h1{
    font-family: fantasy;
    font-size: 70px;
    letter-spacing: 2px;
    text-align: center;
    font-weight: bold;
    animation: change;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    
}
@keyframes change {
  0%{
  -webkit-text-stroke: 1px white;
  color: transparent;
  }
  50%{
  color: white;
  }  
}
/* end- vehicle registration services */

/* start quick, reliable convenient */
.content h2{
  margin-top: 20px;
  font-size: 25px;
}
/* end quick, reliable convenient */

/* start- explore button */
.content a{
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 20px 60px;
  border-radius: 25px;
  background: transparent;
  margin-top: 30px;
  outline: 2px solid white;
  outline-offset: -7px;
}

.content a:hover{
  background-image: linear-gradient(315deg, #69140e 0%, #d58936 74%);
  padding: 25px 65px;
  border-radius: 25px;
  color: white;
}
/* end- explore button */

/* start- get on the road hassle free styling */
.content h3{
  font-family: 'Splash', cursive;
  letter-spacing: 3px;
  font-size: 35px;
  text-shadow: orange 5px 5px 5px;
  margin-top: 35px;
}
/* end- get on the road hassle free styling */

/* END- CENTER CAPTION LANDING-PAGE AND EXPLORE BUTTON HERE */


/* START- ABOUT SECTION BEGINS HERE */
#about{
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
  width: 100%;
  color: white; 
  background-image: linear-gradient(315deg, #69140e 0%, #d58936 74%);
  
}

/*start- jolly's image styling */
.jolly-pic{
  width: 20%;
}
  #about img{
  width: 330px;
  height:450px;
  /* border-radius:56% 44% 73% 27%/ 45% 68% 32% 55%; */
  border-radius: 50%;
}
/*end- jolly's image styling */

/*start- jolly's name styling */
.jolly-name{
  width: 30%;
}

#about h1{
  font-family: 'Splash', cursive;
  letter-spacing: 2px;
  font-size: 70px;
  text-align: center;
  text-shadow: orange 5px 5px 5px;
}
/*end- jolly's name styling */

/*start- get on the road text*/
  #about h1 span{
  font-family: 'Splash';
  letter-spacing: 1px;
  font-size: 30px;
}
/*end- get on the road text*/

/*start- jolly's description styling */
.jolly-text{
    width: 30%;
}

#about p{
  font-size: 14px;
  text-shadow: orange 5px 5px 5px; 
}
/*end- jolly's description styling */

/* END- ABOUT SECTION ENDS HERE */


/* START- SERVICE SECTION BEGINS FROM HERE  */
#services{
  display:flex;
  flex-direction: column;
  align-items: center;
  height: 175vh;
  width: 100%;
  color: white; 
  background-image: linear-gradient(215deg, #d58936  20%,  #69140e 74%);  
}

.sub{
  height: 100vh;
  width: 65%;
}

#services h1{
  font-family: 'Splash', cursive;
  letter-spacing: 3px;
  word-spacing: 10px;
  font-size: 40px;
  text-shadow: orange 5px 5px 5px;
}

.serv-desc{
  text-align: center;
  text-shadow: orange 5px 5px 5px;
}

.accordion-item a{
  margin-right: 40px;
}

.accordion-body{
  color: white;
  font-size: 17px;
  text-align: center;
  text-shadow: black 3px 2px 3px;
  background-image: linear-gradient(-300deg, #d99058 0%, #f8de7e 74%);
}

.accordion-button.collapsed{
  font-family: fantasy;
  font-size: 20px;
  color: black;
  letter-spacing: 1px;
  word-spacing: 6px; 
  background-image: linear-gradient(319deg, #ba2d0b 0%, #fe7f2d 37%, #ffbf46 100%);
  
}

.accordion-button.collapsed:hover{
  background-image: linear-gradient(-316deg, #d14545 0%, #ff9933 74%);
}


.marq{
  display: flex;
  font-weight: bolder;
}
/* END- SERVICE SECTION BEGINS FROM HERE  */



/* START- CONTACT-US SECTION BEGINS HERE  */
#contact-us{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 120vh;
  width: 100%;
  color: white; 
  background-image: linear-gradient(315deg, #69140e 0%, #d58936 74%);
}
.jolly-social{
  display: flex;
  width: 35%;
  justify-content: space-evenly;  
  cursor: pointer;
}

.jolly-social 
.mail,
.what,
.phone{
  animation:icons 2s ease 1s infinite;
}
@keyframes icons {
  
    50%{
      transform:rotateY(0deg);
  }
   100%{
      transform:rotateY(45deg);

  }
  
}

.jolly-social a{
  color: white;
  text-decoration: none;
}

#contact-us h1{
  font-family: 'Splash', cursive;
  letter-spacing: 3px;
  word-spacing: 10px;
  font-size: 40px;
  text-shadow: orange 5px 5px 5px;
}

.contact-desc{
  text-align: center;
  text-shadow: orange 5px 5px 5px;
}

#contact-form {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 75vh;
}

#contact-form label {
  margin-bottom: 5px;
}

#contact-form input{
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: none;
}

#message{
  height: 350px;
  border-radius: 5px;
}

#contact-form button {
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  background-image: linear-gradient(315deg, #69140e 0%, #d58936 74%);
  color: white;
  border: none;
  cursor: pointer;
}

#contact-form button:hover {
  background-image: linear-gradient(319deg, #ba2d0b 0%, #fe7f2d 37%, #ffbf46 100%);
}
/* END- CONTACT-US SECTION BEGINS HERE  */

/* CLIENT LIST */
#client-container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-image: linear-gradient(215deg, #d58936  40%,  #69140e 100%);
  /* background-color: #ba2d0b; */
}

.heady{
  width: 70%;
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: red; */
}

.heady-title{
  font-family: 'Splash', cursive;
  letter-spacing: 3px ;
  word-spacing: 10px ;
  font-size: 40px ;
  text-shadow: orange 5px 5px 5px;

}

.heady-desc{
  font-size: 16px ;
  text-align: center;
  text-shadow: orange 5px 5px 5px;

}

.carousel-inner img{
  width: 100px !important;
  height: 100px !important;
  border-radius: 10px !important;
}

.carousel-inner{
  width: 70vw !important;   
  height: 55vh !important;
  /* background-color: red; */
  display: block;
  text-align: center;
  align-items: center; 
  justify-content: center;
  /* margin-top: 50px !important; */
}




















/* STYLING FOR THE FOOTER AREA  */
footer{
    display: flex;
    justify-content: space-evenly;
    bottom: 0;
    left: 0;
    height: 10vh;
    width: 100%;
    align-items: center;
    background-image: linear-gradient(215deg, #d58936  20%,  #69140e 74%);
    color: white;
}

footer a{
  display: flex;
  color: white;
  text-decoration: none;
  flex-direction: column;
}

.tag{
 text-shadow:5px 5px 3px black;
 animation:bayo 2s ease 1s infinite;  
}

@keyframes bayo{

 0%{
    transform:rotateX(-45deg);
}
 50%{
    transform:rotateY(45deg);
}
}