*{
    margin: 0;
    padding:0;
}



nav{
    background-color: black;
    color: white;
    padding: 15px;
}

h1,li,ul{
    display: inline;
}

ul{
    margin-left: 55%;
}
li{
    color:gray;
    cursor:pointer

}
li:hover{
    color:white;
    
}
input{
    width: 60%;
    padding:15px;

}

.searchbar{
    
    padding: 60px;
    
    text-align: center;
}
.navin{
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    width:220px;
}
.navin1{
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    width:220px;
}
.gangdetail{
    text-align: center;
}

.navin:hover{
    color:gray;


}
.navin1:hover{
    color:gray;

}
.about{
    padding: 300x;
    margin-top: 20px;
}
.Contact{
    color: white;
    background-color: black;
    text-align: center;
    margin-top: 40px;
}


li:hover {
  color: white;
}

/* Image hover zoom for gang member cards */
.navin img,
.navin1 img {
  transition: transform 0.5s ease;
  border-radius: 10px;
}

.navin img:hover,
.navin1 img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Smooth fade-in for About Us section */
.about {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 3s ease-out forwards;
}

/* Smooth fade-in animation */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input transition on focus */
input {
  padding: 10px;
  border: 1px solid gray;
  border-radius: 6px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #ff4500;
  box-shadow: 0 0 8px rgba(255, 69, 0, 0.6);
}

/* Optional: section container fade-in */
.gangdetail {
  animation: fadeInUp 1.2s ease forwards;
}


.searchbar input:focus {
  border-color: #00ff99;
  box-shadow: 0 0 8px #00ff99;
  outline: none;
}