*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  font-family:"Raleway",sans-serif;
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;  /* Firefox */
  -ms-user-select: none;  /* IE/Edge */
  pointer-events: auto; 
}

body{
    background-color:black;
    overflow-x:hidden;

}
html{scroll-behavior:smooth;}

#bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

/* Hero Section */
.hero{
  height:100vh;
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:11vh; 
}

.navbar{
  position:fixed;
  top:0;
  width:100%;
  height:12vh; 
  padding:2vw; 
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
  font-size:2vw; 
  z-index:100;
}

.navbar .logo img{
  width:10vw; 
  height:auto;
  cursor:pointer;
}

.navbar ul{
  display:flex;
  gap:4vw; 
  align-items:center;
}

.navbar li{
  font-size:1.3rem;
  cursor:pointer;
}

a{
  text-decoration:none;
  color:rgba(255,255,255,0.738);
  transition:ease-in-out .3s;
}
a:hover{
  transform:scale(1.1);
  color:white;
}

.navbar li a{font-family:'Raleway';}

.hero-text-container{
  margin-top:-45vh; 
  text-align:center;
  color:white;
  font-family:'Raleway',sans-serif;
  width:100%;
  z-index:2;
}

.intro-text{
  font-size:4vw; 
  margin-bottom:2vh; 
}

.roles-container{
  display:inline-block;
  overflow:hidden;
  position:relative;
  height:8vh;
  vertical-align:bottom;
}

.role{
  display:block;
  padding-left:1vw; 
  color:white;
  animation:role-change 15s infinite;
  font-family:'Raleway';
  margin-left:1vw; 
  font-size:4vw; 
  line-height:8vh;
}

@keyframes role-change{
  0%,16%{transform:translateY(0);}
  20%,36%{transform:translateY(-100%);}
  40%,56%{transform:translateY(-200%);}
  60%,76%{transform:translateY(-300%);}
  80%,96%{transform:translateY(-400%);}
  100%{transform:translateY(-500%);}
}

/* Cars Section */
.cars-section{
  background-color:black;
  padding-top:6vh; 
  padding-bottom:16vh; 
  position:relative;
  z-index:1;
  min-height:100vh;
}

.cars-container{
  max-width:120vw;
  margin:0 auto;

}

.cars-section h2{
  color:white;
  font-size:3em;
  text-align:center;
  margin-bottom:10vh; 
  margin-top:2%;
}


.carousel{
  margin:0 auto;
  width:90%;
  display:flex;
  overflow-x:auto;
  height:60vh;
  padding:3vh;
}
.carousel::-webkit-scrollbar{display:none;}

.group{
  display:flex;
  animation:spin 30s infinite linear;
  gap:1.3125em;
  padding-right:1.3em;  

}

.group .card:nth-child(-n+3) img {
  transform: translateY(-3rem);
}

.group .card img{
  height:3.9em;
  width:90%;
  margin-top:0;
  border-radius:0vw; 
  cursor:pointer;
  transition:ease-in-out .3s;
  border-radius:1%;
}

.group .card p{
  color:white;
  font-size:2vw;
}

.card{
  flex:0 0 7em;
  height:6.5em;
  background-color:rgba(53,51,51,0.633);
  font-size:4rem;
  border-radius:1em;
  text-align:center;
  align-content:center;
  transition:ease-in-out .3s;
}
.card:hover{transform:scale(1.025);}

@keyframes spin{
  from{translate:0;}
  to{translate:-100%;}
}

/* Services Section */
.services-section{
  min-height:100vh;
  background-color:black;
  position:relative;
  z-index:1;
  padding-top:8vh; 
  padding-bottom:8vh; 
}

.services-container{
  max-width:146vw;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  height:100vh;
}

.services-container-2{
  display:flex;
  margin:1vw;
  align-items:center;
  gap:2vw;
  flex-direction:column;
}

.services-container-2 img{
  width:45%;
  height:auto;
  border-radius:5%; 
  border:white 0vw solid; 
  transition:ease-in-out .3s;
  cursor:pointer;
  border-radius:3vw;
}
.services-container-2 img:hover{
  border-radius:3vw;
  border:white 0vw solid;
  transform:scale(1.05);
}

.services-container-2 p{
  font-size:1vw;
  border-radius:0vw; 
  color:white;
  flex:1;
  margin:0;
  padding:2vw;
  line-height:1.8;
  background-color:rgba(53,51,51,0.633);
  border-radius:1vw;
  width:65%;
  height:10%;
  text-align:center;
}

.services-section h2{
  color:white;
  font-size:3rem;
  text-align:center;
  margin-bottom:3vh; 
}

/* Rent Section */
.rent-section{
  min-height:100vh;
  background-color:rgba(0,0,0);
  padding:19vh 2vw;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rent{
  max-width:73vw;
  width:100%;
  background:rgb(24,24,24);
  backdrop-filter:blur(10px);
  padding:5vw; 
  border-radius:2vw;
  box-shadow:0 2vh 6vh rgba(0,0,0,0.3);
  text-align:center;
}

#title{
  color:white;
  z-index:10;
  font-size:3vw; 
  margin-bottom:6vh; 
  text-align:center;
}

button{
  padding:1vw 2vw;
  background-color:white;
  border:none;
  border-radius:1vw;
  transition:ease-in-out .4s;
  cursor:pointer;
  margin:1vw 1vw;
  font-family:'Raleway';
  font-size:2vw; 
  font-weight:500;
}
button:hover{
  background-color:rgba(53,51,51,0.633);
  color:white;
  transform:scale(1.05);
  border:white 0vw solid; 
}

input{
  width:100%;
  margin-bottom:4vh; 
  border-radius:1vw;
  border:none;
  padding:1vw;
  font-size:2vw; 
  font-family:'Raleway';
}
input:focus{outline:0vw solid rgb(9,89,168); }

h2{
  color:white;
  font-size:1.75rem; 
  margin-bottom:4vh; 
  line-height:1.6;
}

#info-confirm{
  font-weight:normal;
  background:rgba(53,51,51,0.633);
  padding:2vw; 
  border-radius:1vh; 
  margin-bottom:4vh;
  display:none;
}

#back-info-submit{display:none;}

#input-name,
#submit-name,
#input-address,
#submit-address,
#input-phone,
#submit-phone,
#input-email,
#submit-email,
#confirm-info-input,
#confirm-info-submit,
#confirm-info,
#lookup-phone,
#lookup-phone-submit{display:none;}

#confirm-info-submit{
  background-color:rgb(9,89,168);
  color:white;
}
#confirm-info-submit:hover{
  background-color:black;
  color:white;
  border:white 0vw solid; 
}

#confirm-button{
  display:flex;
  gap:1vw;
  justify-content:center;
  margin-top:4vh;
}

h1{color:white;font-family:"Raleway";}

.cards{
  border:solid white 0vw; 
  background-color:white;
  z-index:10;
}

#car-selection{
  background-color:rgba(53,51,51,0.633);
  border-radius:1vw; 
  margin-top:4vh; 
  display:none;
}

#car-selection label{color:white;}

input[type="checkbox"]:focus{outline:none;box-shadow:none;}



#car-selection .carousel2 .card2:nth-child(-n+3) .car-item {
  padding-bottom: 30px; /* Must match or exceed the image translate distance */
}



#car-selection img{
  margin:1vw; 
  border: 3px solid transparent;
  border-radius: 8px;      
  transition:ease-in-out .3s;
  cursor:pointer;
  width:24vw; 
}
#car-selection img:hover{transform:scale(1.025);}

.car-item:has(#car1:checked) #car-img1,
.car-item:has(#car2:checked) #car-img2,
.car-item:has(#car3:checked) #car-img3,
.car-item:has(#car4:checked) #car-img4,
.car-item:has(#car5:checked) #car-img5,
.car-item:has(#car6:checked) #car-img6,
.car-item:has(#car7:checked) #car-img7 {
  border-color: #FFD000;
  box-shadow: 0 0 0 3px rgba(255,208,0,.25) inset;
}

#car-selection h3{
  color:white;
  margin-bottom:2vh; 
}

#car-selection input{width:17.5%;}

#car-selection h2{
  color:white;
  margin-bottom:2vh; 
  font-size:3.5rem;
  padding-top: 2%;
  padding-bottom: 2%;

}


.wrapper2 .carousel2{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100%/3)-20px);
    height:50vh;
    overflow:hidden;
}


.car-item{
    background-color: rgb(24,24,24);
    height: 45vh;  /* Fixed height for consistency */
    width: 30vw;
    min-width: 250px;
    margin: 2rem;
    border-radius: 5%;
    transition: ease-in-out 0.3s;
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* Center content vertically */
}
.car-item:hover{
    transform: scale(1.025);
}

.car-item img{
    width: 90%;  
    height: 25vh;  /* Fixed height for all images */
    object-fit: contain;  /* Maintain aspect ratio within bounds */
    border-radius: 8px;
}
footer{
  background-color:rgb(20,20,20);
  height:8vh;
}

footer p{
  color:white;
  padding:2vw; 
  font-size:1vw; 
}


.arrows {
  width: 3vw;  
  min-width: 30px;  
  max-width: 60px; 
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  z-index:100;
}


#back, #next {
  align-self: center;
}

.wrapper2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  width: 100%;
  padding: 0 2vw; 
}

.wrapper2 .carousel2::-webkit-scrollbar {
    display: none;
}

.card2 {
    scroll-snap-align: start;
    background-color: reds;
}

.carousel2 {
  flex: 1; 
  overflow-x: auto;
  scroll-behavior: smooth;
}

img:focus {
  outline: none;
}


@media (max-width:860px){
  #bg-video{display:none;}
  .nav{display:hidden;}








}