body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to bottom, #efecec, #cecccc);
  color: #1a1a1a;
}


.top {
  background-color: #ffffff;
  color: #222;
  text-align: center;
  padding: 18px;
  font-size: 22px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}


.navdiv {
  background-color: #f3f3f3;
  text-align: center;
  padding: 14px 0;
  box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.types a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  margin: 0 22px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.types a:hover {
  background-color: #e0e0e0;
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  color: #000;
}



.onlyhover {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 10px;
  justify-content: center;
  padding: 0px;

}

.onlyhover img {
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.onlyhover img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #f7f7f7, #f1f1f1);
}



/* flowers wale item */
.f1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.f1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.f2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.f2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.f3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.f3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.f4 {
  border-radius: 2%;
  display: inline-block;
  width: 45%;
  height: 600px;
  margin: 10px;


}

.f4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.f5 {
  border-radius: 2%;
  display: inline-block;
  width: 45%;
  height: 600px;
  margin: 10px;


}

.f5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}




/* landscape wale item */




.l1 {
  width: 70%;
  height: 550px;
}

.l2 {
  width: 70%;
  height: 550px;
  margin: 20px;
}

.l3 {
  width: 45%;
  height: 600px;
}

.l4 {
  margin: 10px;
  width: 45%;
  height: 600px;
}

.l5 {
  margin: 20px;
  width: 80%;
  height: 600px;
}

.l6 {
  margin: 10px;
  width: 45%;
  height: 600px;
}

.l7 {
  margin: 10px;
  width: 40%;
  height: 600px;
}

/* image style */
.l1 img,
.l2 img,
.l3 img,
.l4 img,
.l5 img,
.l6 img,
.l7 img {
  width: 100%;
  height: 100%;
  border-radius: 2%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* hover effect */


/* arcticture wale hai */


.a1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.a1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.a2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.a2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.a3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.a3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.a4 {
  border-radius: 2%;
  display: inline-block;
  width: 45%;
  height: 600px;
  margin: 10px;


}

.a4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s;
}

.a5 {
  border-radius: 2%;
  display: inline-block;
  width: 45%;
  height: 600px;
  margin: 10px;


}

.a5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.a6 {
  border-radius: 5%;
  display: inline-block;
  width: 500px;
  height: 400px;
  margin: 10px;



}

.a6 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.a7 {
  border-radius: 2%;
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 10px;


}

.a7 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}



/* portait wale hai */

.p1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.p1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.p2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.p2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.p3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.p3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.p4 {
  border-radius: 2%;
  display: inline-block;
  width: 50%;
  height: 600px;
  margin: 10px;


}

.p4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.p5 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.p5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

/* street wale hai */
.s1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.s1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.s2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.s2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.s3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.s3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.s4 {
  width: 75%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.s4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.s5 {
  width: 75%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}

.s5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.s6 {
  border-radius: 5%;
  display: inline-block;
  width: 500px;
  height: 400px;
  margin: 10px;



}

.s6 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.s7 {
  border-radius: 2%;
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 10px;


}

.s7 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

/* macro wale */

.m1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.m1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.m2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.m2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.m3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.m3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.m4 {
  border-radius: 2%;
  display: inline-block;
  width: 55%;
  height: 600px;
  margin: 10px;


}

.m4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s;
}

.m5 {
  border-radius: 2%;
  display: inline-block;
  width: 35%;
  height: 600px;
  margin: 10px;


}

.m5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.m6 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.m6 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s;
}

.m7 {
  border-radius: 2%;
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 10px;


}

.m7 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


/* sky wale hai */

.sk1 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.sk1 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.sk2 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.sk2 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.sk3 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.sk3 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}


.sk4 {
  border-radius: 2%;
  display: inline-block;
  width: 55%;
  height: 600px;
  margin: 10px;
}

.sk4 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s;
}

.sk5 {
  border-radius: 2%;
  display: inline-block;
  width: 35%;
  height: 600px;
  margin: 10px;
}

.sk5 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

.sk6 {
  border-radius: 5%;
  display: inline-block;
  width: 31.0%;
  height: 600px;
  margin: 10px;



}

.sk6 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;


}


.sk7 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.sk7 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;

}

.sk8 {
  border-radius: 2%;
  display: inline-block;
  width: 30%;
  height: 600px;
  margin: 10px;


}

.sk8 img {
  width: 100%;
  height: 600px;
  border-radius: 2%;
  transition: transform 0.3s ease;
}

/* hover wale hai */
.onlyhover {
  /* display: flex; */
  flex-wrap: wrap;


  margin: 5px;
}

/*footer*/
.types a:hover {
  background-color: #e0e0e0;
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  color: #000;
}


footer {
  text-align: center;
  padding: 12px;
  background-color: #efefef;
  color: #333;
  font-size: 15px;
  letter-spacing: 0.5px;
  border-top: 1px solid #ddd;
}

footer strong {
  color: #000;
}

footer a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  margin-left: 5px;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #555;
  text-decoration: underline;
}