/*bannerof the page*/

.hpimg {
   position: relative;   /* makes this container a reference */
   width: 100%;          /* full width */
   display: inline-block;
}
.hpimg img {
  width: 100%;
  height: auto;          /* keeps correct ratio */
  display: block;
}

.fhed {
  position: absolute;    /* puts the text over the image */
  top: 50%;              /* adjust vertical position */
  left: 50%;             /* adjust horizontal position */
  transform: translate(-50%, -50%); /* centers text */
  text-align: center;
}

.fh1 {
  color: white;          /* visible over image */
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* makes text pop out */
  font-family: var(--ff-heebo);
}


/*body of  the page*/

.state .set {
  display: flex;
  flex-wrap: wrap ;
  justify-content: space-around;
  align-items:center;
  gap: 20px;
  margin-top: 5%;
  padding: 10px;
  
}




.s1 {
  flex: 1 1 50%;   /* 3 per row by default */
  max-width: 20%;
  box-sizing: border-box;
}

.stateimg {
  position: relative;
  width: 100%;
}

.allimg {
  width: 350px;
  height: 350px;
  display: block;
  border-radius: 10px;
}

/* Overlay text */

/* Overlay text */
.stateimg .h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  font-family: var(--ff-heebo, sans-serif);
}

.stateimg .h2 {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  font-family: var(--ff-abril-fatface, serif);
}



/* Desktop (large screens) */
@media (min-width: 992px) {
  .h1 { font-size: 3rem; }
  .h2 { font-size: 1.5rem; }
}

/* Tablet (2 per row) */
@media (max-width: 992px) {
  .s1 {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

/* Mobile (1 per row) */
@media (max-width: 500px) {
  .s1 {
    flex: 1 1 100%;
    max-width: 100%;
  }
}