.first-section{
  /* background-color: lightblue; */
  height: 45rem;
  display: flex;

  justify-content: space-evenly;

  overflow-x: hidden;

  opacity: 0;
  animation: opacityin 2s ease-in;
  animation-fill-mode: forwards;
}

.main-vid{
  border: 5px solid;
  border-color: var(--combinecolor);

  border-radius: 20px;

  width: 100%;
  min-width: 65%;

  z-index: 2;
}

.firstbox,
.secondbox{
  background-color: var(--tecolor);

  font-family: 'Bebas Neue', sans-serif;

  border: 12px solid;
  border-color: var(--ticolor);

  border-radius: 20px;

  width: 35%;

  text-align: center;

  font-size: 8rem;

  writing-mode: vertical-lr;

  transition: all 1s;
  transform: translateX(-30%);

}

.text{
  /* remember to place transitions in both the hover and the original
  to get the reverse effect when the mouse leaves the hover */
  transition: all 1s; 
  color: var(--bgcolor);
  opacity: 0;
}

.firstbox:hover,
.secondbox:hover{
  transition: all 1s;
  transform: translateX(0%);
}

.text:hover{
  transition: all 1.2s;
  opacity: 1;
}

.secondbox{
  background-color: var(--ticolor);

  border: 12px solid;
  border-color: var(--tecolor);

  transform: translateX(30%);
}

/* below the main draw */

.first-head{
  display: flex;

  justify-content: space-evenly;

  font-size: 6rem;

  padding: 0;

  padding-top: 3.2rem;

  overflow-y: hidden;

  /* column-gap: 20rem;  needs to be accounted for so we can do the 
  carasole effect*/
  
}

.OP1{
  font-family: 'Bebas Neue', sans-serif;
  background-color: var(--combinecolor);

  border: 5px solid;
  border-radius: 20px;
  padding: 2rem;

  z-index: 2;

  transition: all 1s;
  animation: sauce3 5s ease-out infinite;
}

.sauce{
  transition: animation 1s;
  animation: sauce4 5s ease-out infinite;
}


.block2,
.block1{
  border: 5px solid;
  background-color: var(--combinecolor);
  
  padding:1rem 2rem 0rem 1rem; /* it goes clockwise starting with right */

  border-radius: 20px;


  /* plan is to use intersection observer to trigger fade in and then arrow 
  animation */
}

.block1{
  transform: translateX(300%);
}

.block2{
  transform: translateX(-300%);
}

.block1{
 animation: sauce1 1s ease-in forwards;
}
.block2{
 animation: sauce2 1s ease-in forwards;
}

.sauce2{
  animation: sauce5 2s ease-out infinite;
}

/* side winder */

.boxwrapper{

  height: 80vh;
  width: 11rem;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;

  display: inline-block;

  border-top: 5px solid;
  border-bottom: 5px solid;
  border-right: 5px solid;
  border-color: var(--combinecolor);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;

  background-color: var(--neony);

  overflow-x: hidden;

  transition: all 1000ms;
}

.boxwrapper:hover{
  background-color: var(--tecolor);

  width: 100%;
}

.wordbox{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;

  /* transform: translateZ(-50px); */


  overflow-y: hidden; 
  overflow-x: hidden;
  
  text-align: center;

  transition: sauce6 200ms;
  animation: sauce6 6s ease-in infinite
}

.kword{
  font-weight: bold;
  color: var(--bgcolor);

  text-align: left;

  font-family: 'Bebas Neue', sans-serif;
 
  display: inline-block;
  font-size: 18rem;
  transition: 2000ms;
  /* padding-left: rem; */
}

.kword1:hover{
  color: #39FF14;
}
.kword2:hover{
  color: #FF5F1F;
}

.mainblock2{
  color: var(--bgcolor);

  font-size: large;
}

.firstE1{
  color: var(--tecolor);
  font-family: 'Bebas Neue', sans-serif;

  font-style: italic;
  text-align: center;

  font-size: 5rem;

  background-color: var(--combinecolor);

  border: solid 5px;

  margin-top: 100px;
}
.firstE2{
  color: var(--tecolor);
  font-family: 'Bebas Neue', sans-serif;

  font-style: italic;
  text-align: center;

  font-size: 3.5rem;

  padding: 100px;

  /* background-color: var(--combinecolor); */
}
.speed{
  opacity: 0;
  transition: 2s;
}
.show{
  opacity: 1;
  color: var(--neony);
}

.third{
  display: flex;

  position: relative;

  padding: 0;
  margin: 0;

  align-items: center;
}

.third-block,
.third-block-2,
.third-block-3{
  background-color: var(--ticolor);
  color: var(--bgcolor);

  font-family: 'Bebas Neue', sans-serif;
  padding: 0;
  margin: 0;
  font-style: italic;
  text-align: left;

 

  font-size: 5rem;
}

.third-block{
  padding-left: 15rem;
  font-size: 12rem;

  border: 5px solid var(--neong);
}
.third-block-2{
  text-align: center;
  border: 5px solid var(--bgcolor);
  
}
.third-block-3{
  text-align: right;
  border: 5px solid var(--neony);
  padding-right: 20rem;
  font-size: 10rem;
  
}

.third-blocky{
  transform: translateX(0%);
  opacity: 1;
}




/* footer */


.footer-container{
  border-top: 5px solid;
  border-color: var(--combinecolor);

  position: relative;

  margin-top: 12rem;;
}

.footer-invite{

  transform: translateY(50%);
  
  position: absolute;
  z-index: -1;

}

.footer-invite2{
  transform: translateY(0%);
  transition: 1000ms;

  font-size: 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20rem;
  
  position: absolute;
  z-index: -1;

  bottom: 1.7rem;

  color: var(--tecolor);
  text-shadow: 10rem, 1rem, 1rem, var(--neony);
}

.footer{
  height: 10rem;

  text-align: center;
  background-color: var(--neony);
  display: flex;
  justify-content: space-evenly;
}



/* these icons are to be treated like text */
.icon1::before { /*this is from font awesome and all of this is needed for the icons*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
/* facebook */
  font: var(--fa-font-brands);
  font-weight: 400;
  content: "\f09a";

  font-size: 8rem;
  padding-top: 1rem;
  /* color: var(--tecolor); */

  transition: 1000ms;
}

.icon1:hover{
  color: blue;
  text-shadow: 0 0 1em blue;
}

.icon2::before { /*this is from font awesome and all of this is needed for the icons*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
/* twitter */
  font: var(--fa-font-brands);
  font-weight: 400;
  content: "\f099";
  font-size: 8rem;
  padding-top: 1rem;
  /* color: var(--tecolor); */
  transition: 1000ms;
}

.icon2:hover{
  color: skyblue;
  text-shadow: 0 0 1em blue;
}

.icon3::before { /*this is from font awesome and all of this is needed for the icons*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
/* instagram */
  font: var(--fa-font-brands);
  font-weight: 400;
  content: "\f16d";
  font-size: 8rem;
  padding-top: 1rem;
  /* color: var(--tecolor); */
  transition: 1000ms;
}

.icon3:hover{
  color: #cd486b ;
  text-shadow: 0 0 1em red;
}

.icon4::before { /*this is from font awesome and all of this is needed for the icons*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
/* tiktok */
  font: var(--fa-font-brands);
  font-weight: 400;
  content: "\e07b";
  font-size: 8rem;
  padding-top: 1rem;
  /* color: var(--tecolor); */
  transition: 1000ms;
}

.icon4:hover{
  color: purple;
  text-shadow: 0 0 1em blue;
}

.icon5::before { /*this is from font awesome and all of this is needed for the icons*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
/* youtube */
  font: var(--fa-font-brands);
  font-weight: 400;
  content: "\f167";
  font-size: 8rem;
  padding-top: 1rem;
  /* color: var(--tecolor); */
  transition: 1000ms;
}

.icon5:hover{
  color: red;
  text-shadow: 0 0 1em coral;
}


/* About us */

.head-title{
  background-color: var(--combinecolor);
  border-top: 5px solid;
  border-bottom: 5px solid;
  margin: 0;
  transform: translateX(-100%);
  animation: header1 1000ms ease-out forwards;
}

.explination{
  transform: translateX(100%);
  animation: header11 1100ms ease-out forwards;
}

.video-flex{
  display: flex;
  justify-content: center;
}

.video2{
  width: 20rem;
  height: 10rem;

  border: 3px solid #39FF14;
  transform: translateX(-100%);
  animation: header1 1300ms ease-out forwards;
}

/* contact */

.basic-box{
  display: flex;
  justify-content: center;
  
  margin-top: 20px;

  height: 60rem;

  transform: translateX(100%);
  animation: header11 1200ms ease-out forwards;
}

.firstflex{
  /* width: 80%; */
  background-color: var(--combinecolor);
 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  border: solid 5px var(--tecolor);

  border-radius: 20px;
}

.contactinfo{
  display: flex;
  flex-direction: column;
}

.phone,
.phone2{
  font-family: 'Bebas Neue', sans-serif;

  text-align: center;

  margin-bottom: 2rem;

  font-size: 2rem;

  text-decoration: none;

  transition: 1500ms;
}

.phone:hover,
.phone2:hover{
  background-color: var(--bgcolor);
  color: var(--tecolor);

  border-radius: 20px;
  padding: 10px;
}

.phone:visited,
.phone2:visited{
  color: var(--tecolor);
}

.pgraf{
  display: inline-block;

}

.map{
  display: inline-block;
  width: 60rem; 
  height: 20rem; 
  border: solid 3px var(--neony);
  border-radius: 20px;

  margin-top: 10px;
}

.hours{
  color: var(--tecolor)
}

.elist li{
  
  color: var(--bgcolor);
  font-family: 'Bebas Neue', sans-serif;
  list-style-type: none;

  font-size: 2rem;
  display: flex;
  justify-content: center;

  text-align: center;
}

/* vehicles */

.motortitle{
  font-size: 10rem;

  background-color: var(--combinecolor);

  border: 5px solid var(--ticolor);

  margin: 0;

  transform: translateX(-100%);
  animation: header1 1000ms ease-out forwards;
}

.motortitle2{
  font-size: 6rem;
  color: var(--tecolor);

  text-decoration: underline;
  transform: translateX(100%);
  animation: header11 1200ms ease-out forwards;
}

.productlist-container{
  transform: translateX(100%);
  animation: header11 1200ms ease-out forwards;

  background-color: var(--bgcolor);
}

.productlist{
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  column-gap: auto;

  padding: 2rem;

  transform: translateX(100%);
  animation: header11 1400ms ease-out forwards;

  /* background-color: var(--combinecolor); */
}

/* items */
.item{
  display: flex;
  justify-content: center;
  flex-direction: column;

  text-align: center;

  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;

  color: var(--tecolor);

  padding-right: 2rem;

  /* animations */
  transform: translateX(100%);
  animation: header11 1500ms ease-out forwards;
}

.cycle-title{
  opacity: 0;
}

.cycle-title2{
  opacity: 1;
  transition: 1500ms;
  color: var(--neong);
  text-shadow: 0 0 0.5em var(--tecolor);

  text-decoration: underline;
}

.image{
  background-color: var(--combinecolor);

  border: 5px solid var(--neong);
  border-radius: 20px;
  opacity: 0;
}

.image-2{
  opacity: 1;
  transition: 2000ms;
}

.generic-specs{
  opacity: 0;
}
.generic-specs2{
  transition: 3000ms;
  opacity: 1;
}



.item-info ul{
  margin: 0;
  padding: 0;

  text-decoration: none;
}

.item-info li{
  font-size: 1.5rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.info-list li::marker{
  text-decoration: none;
  opacity: 0;
}

.strongfont{
  font-size: 2rem;

  color: var(--neong);
  text-shadow: 0 0 0.5em var(--tecolor);
}

.strongfont-price{
  color: var(--neong);
  text-shadow: 0 0 0.5em var(--tecolor);
  font-size: 4rem;
}
.price{
  margin: 0;
  padding: 0;
}

.price-actual{
  opacity: 0;

  /* transition: opacity 10s; */
}

.price-actual-2{
  transition: opacity 3000ms;
  opacity: 1;
  color: var(--neony);
  text-shadow: 0 0 0.5em var(--tecolor);
}