body {
  margin: 0;
  font-family: Arial;
  color: white;
  overflow-x: hidden;

  background: linear-gradient(
    120deg,
    #1d4ed8,
    #000000,
    #dc2626,
    #16a34a
  );

  background-size: 400% 400%;
  animation: bgMove 12s ease infinite;
}

@keyframes bgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
}

.navbar a{
  color:white;
  margin:0 8px;
  text-decoration:none;
  font-weight:500;
  background:none;
  -webkit-text-fill-color:white;
  -webkit-text-stroke:0;
  text-shadow:none;
  transition:0.2s;
}

.navbar a:hover{
  opacity:0.7;
}

.nav-logo{
  height:45px;
  object-fit:contain;
}

.search-box{
  position:relative;
  display:flex;
  align-items:center;
}

.search-icon{
  cursor:pointer;
  font-size:20px;
  padding:8px;
  border-radius:50%;
  background:linear-gradient(90deg,#1d4ed8,#16a34a);
  color:white;
  transition:0.3s;
}

.search-icon:hover{
  transform:rotate(20deg) scale(1.1);
  box-shadow:0 0 15px #1d4ed8;
}

#search{
  width:0;
  opacity:0;
  margin-left:10px;
  padding:6px;
  border:none;
  border-radius:6px;
  transition:0.3s;
}

#search.active{
  width:180px;
  opacity:1;
}

.hero{
  text-align:center;
  padding:60px 20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:25px;
  padding:30px;
}

.card{
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;
  padding:15px;
  text-align:center;
  transition:0.3s;
  position: relative;
  overflow: hidden;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(29,78,216,0.3);
}

.desc{
  font-size:13px;
  opacity:0.8;
  margin:5px 0;
}

button{
  margin-top:10px;
  width:100%;
  padding:10px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:linear-gradient(90deg,#1d4ed8,#dc2626);
  color:white;
  font-weight:bold;
}



.card img.main-img {
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
}

.card img.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 10px;
  opacity: 0;
  transition: 0.3s;
}

.card:hover img.hover-img {
  opacity: 1;
}

.card:hover img.main-img {
  opacity: 0;
}