/* 🔹 Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
.banner{
    padding: 10px 10px 10px 10px;

}

/* 🔹 Body */
body {
  background-color: rgb(246, 246, 250);
  color: #333;
  line-height: 1.6;
}

.topbar{
    background-color: rgb(255, 255, 255);
    justify-items: center;


}
@media ( max-width:768px){
.topbar{
  font-size: 14px;
  text-align: center;
}
}
.heading{
    color: rgb(230, 197, 49);
    justify-items: center;
    margin-top:0px;
    border: 20px black;
    box-shadow:inset 0 0 10px black;
    border-radius: 40px;
}
@media( max-width:768px){
  .heading{
    font-size: 10px;
    text-align: center;
    padding: 8px 0;
  }
}

.navigation{
    display: flex;
    justify-content: center;
    margin-top:2px;
    gap: 20px;
    list-style: none;
    padding: 10px;
    margin: 0;
    border: 3px;
    }
    .navigation a {
      text-decoration: none;
      color: black;
      font-weight: 1000;}
      
      .navigation li a{
      text-decoration:none ;

    
    }
    @media(max-width: 768px) {
      .navigation{
        display: flex;
        gap: 5px;
        font-size: 15px;
        margin-bottom: 0px;


      }

    }

/* 🔹 Banner Section */
.banner {
  box-sizing: 5px;
   
}
/* Section styling */
.choose-section {
  text-align: center;
}

.choose-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* Desktop view (3-column layout) */
.choose-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}

.choose-info div {
  flex: 1;
  padding: 10px;
}

/* Mobile view (stacked layout) */
@media (max-width: 360px) {
  .choose-info {
    flex-direction: column;   /* Side by side → top to bottom */
  
    text-align: justify;
    margin-top:0px;
    padding-top: 0px;
    /* left aligned */
  }
  .choose-section {
  padding: 40px 20px;
  margin-top: 0px;
  text-align: justify;}

  .choose-info div {
    width: 100%;
    border: 2px solid black;
    margin-top: 0px;
  }

  .choose-info h3 {
    margin-bottom: 10px;
    text-align:justify;
  }

  .choose-title {
    text-align: center; /* Heading center hi rahegi */
  }
}

  
    /* style.css file ke andar, @media query ke block mein */
   

.car-name{
text-align: center;
border: 3px solid black;
box-shadow: inset 0 0 10px black;
padding: 10px 20px;
margin: 20px auto;
border-radius: 10px;

}

.cars-container{
  width: 100%;
  background-color: #f9f4f4;
position: relative;
display: flex;
flex-wrap: wrap;
margin: top 20px;
gap: 20px;
justify-content: center;}

.car-card{
justify-items: center;
  flex-direction: column;
  }

.car-card img {
justify-items: center;
gap: 15px;
display: block;
object-fit: cover;
margin-bottom: 10px;}

.car-card h1{
    margin: 10px 0 5px;
    font-size: 18px;
    text-align: center;
    
}
@media(max-width:768px){
  .cars-container{
    flex-direction: column;
    align-items: center;

  }
  .car-card{
    width: 90%;
    margin-bottom:15px;

  }
  .car-card h1{
    font-size: 10px;

  }
}
 
.button{
  background-color: black;
  color: white;
  text-align: center;
  justify-items: center;
  justify-content: center;
  cursor: pointer;


}
.button2{
   background-color: black;
  color: white;
  text-align: center;
  justify-items: center;
  justify-content: center;
  cursor: pointer;
}
.button3{
   background-color: black;
  color: white;
  text-align: center;
  justify-items: center;
  justify-content: center;
  cursor: pointer;
}
.button4{
   background-color: black;
  color: white;
  text-align: center;
  justify-items: center;
  justify-content: center;
  cursor: pointer;

}
@media( max-width:768px){
.button,
.button2,
.button3
.button4{
  width: 80%;
  font-size: 14px;
  padding: 8px 12px;
}
}
.container2 
{ 
  background-color: #f9f4f4;
position: relative;
display: flex;
flex-wrap: wrap;
margin: top 30px;
gap: 0px;
justify-content: center;}

.car-card-new{
  flex: 1;
  justify-items: center;
  flex-direction: column;

}


.car-card-new img{
justify-items: center;
gap: 10px;
display: block;
object-fit: cover;
margin-bottom: 10px;}

.car-card-new h1{
    margin: 10px 0 5px;
    font-size: 18px;
    text-align: center;
    
}

@media(max-width:768px){
  .container2{
    flex-direction: column;
    align-items: center;

  }
}
  .car-card-new{
    width: 90%;
    margin-bottom:15px;

  }
  .car{
    font-size: 10px;
  }
  .container2 button{
    background-color: black;
    text-align: center;
    color: white;
  }

  .footer{
    color: black;
    background-color: blueviolet;

  }
  .footer-container{
    display: flex;
    justify-items: center;
    color: black;
    background-color: black;
  }

.map{
  border: 5px solid red;
  border-radius: 10px ;
  justify-items: left;
  margin-left: 20px;
}
.image-about{
  text-align: center;
}

.upper{
  display: flex;
  gap: 20px;
  text-align: center;
  justify-content: center;
}
.upper a{
  display: block;
  text-decoration: none;
  color: black;
  font-style: bold;
}
.container3{
  width: 100px;
  height: auto;
}
@media(max-width:786px){
  .upper{
    display: flex;
    font-size: 15px;
    gap: 8px;
  }

}
/*editing of image replacment*/
.desktop{ display: block;}
.mobile{ display: none;}

 @media(max-width:786px){
  .desktop{ display: none;}
  .mobile{ display: block;}
 }


 @media(max-width:786px){
.about-section h2{
  font-size: 5px;

}
 }

/* about section editimg*/
@media(max-width:786px){
.about-us2{
  font-size: 10px;
justify-content: center;
margin-left: 15px;

}
}


@media(max-width:786px){
  .welcome{
    font-size: 15px;
  }
  .welcome1{
    font-size: 10px;
  }
  .why{
    font-size: 15px;
  }
  .why2{
    font-size: 10px;
  }
  .mission{
    font-size: 15px;
  }
  .mission1{
    font-size: 10px;
    margin-left: 28px;
    text-align: justify;
    margin-right: 20px;
    color: black;
  }
  .Rights{
    font-size: 14px;
    justify-content: center;
    margin-left: 25px;
    color: rgb(254, 173, 22);
    
  }
}
/*contact us editing*/
.mail{
  text-align: center;
  color: rgb(10, 11, 11);
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: inset 0 0 10px black;
  margin-left: 5px;
}
.pichewala input{
  
}