* {
  margin: 0%;
  padding: 0%;
}
/* body {
  position: relative;
} */
/* .box1 {
  background-color: blueviolet;
}
.box2 {
  background-color: purple;
}
.box3 {
  background-color: violet;
}
.box4 {
  background-color: blue;
} */
.grid {
  position: relative;
  display: flex;
  margin: 0%;
  top: 0px;
  left: 0px;
  height: auto;
  width: 95%;
  padding: 0px;
  /* border: 1px solid black; */
}

.tab {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 5px;
  width: 100%;
  height: 100%;
}
.tab .box1,
.tab .box2,
.tab .box3,
.tab .box4,
.tab .box5,
.tab .box6,
.tab .box7 {
  position: relative;
  height: 100%; /* Ensure boxes take full height */
  display: flex; /* Add this to help with image sizing */
}
.tab .box1 {
  grid-row: 1/5;
  grid-column: 1/4;
}
.tab .box3 {
  grid-row: 1/5;
  grid-column: 4/8;
}
.tab .box4 {
  grid-row: 1/5;
  grid-column: 8/12;
}
.tab .box2 {
  grid-column: 6/9;
  grid-row: 5/8;
}
.tab .box7 {
  grid-column: 1/6;
  grid-row: 5/8;
}
.tab .box5 {
  grid-column: 9/12;
  grid-row: 5/8;
}

/* .tab .box1 {
  position: relative;
  grid-row: 1/3;
  grid-column: 1/3;
}
.tab .box2 {
  position: relative;
  grid-row: 1/3;
  grid-column: 3/5;
}
.tab .box3 {
  position: relative;
  grid-row: 3/5;
  grid-column: 1/3;
}
.tab .box4 {
  position: relative;
  grid-row: 3/5;
  grid-column: 3/5;
} */
/* .tab .box1 {
  position: relative;
  grid-row: 1/3;
  grid-column: 1/3;
  z-index: 1;
}
.tab .box2 {
  position: relative;
  grid-row: 2/4;
  grid-column: 3/5;
  z-index: 2;
}
.tab .box3 {
  position: relative;
  grid-row: 3/5;
  grid-column: 1/3;
  z-index: 3;
}
.tab .box4 {
  position: relative;
  grid-row: 4/6;
  grid-column: 3/5;
  z-index: 4;
} */
.grid .tab .box1 img,
.grid .tab .box2 img,
.grid .tab .box3 img,
.grid .tab .box4 img,
.grid .tab .box5 img,
.grid .tab .box6 img,
.grid .tab .box7 img {
  width: 100%;
  height: auto;
  /* border-radius: 20px; */
  border: 2.5px solid black;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  /* border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; */
}

.box1:hover img,
.box2:hover img,
.box3:hover img,
.box4:hover img,
.box5:hover img,
.box6:hover img,
.box7:hover img {
  transform: scale(1.1); /* Zoom to 110% on hover */
}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7 {
  overflow: hidden;
  position: relative;
}
.layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2.5px solid #f9991c;
  /* border-radius: 20px; */
  background-color: rgba(50, 50, 50, 0.6); /*rgba(249, 153, 28, 0.5);*/
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* max-width: 450px; */
  margin: 0 auto;
  transition: 0.5s ease;
}

.layer h3 {
  width: 100%;
  font-weight: 500;
  color: #000;
  font-size: 26px;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  transition: 0.5s;
}

.layer h3:hover {
  bottom: 49%;
  opacity: 1;
}

.box1:hover .layer {
  height: 0%;
  /* border: 2.5px solid black; */
  z-index: 5;
}
.box2:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 6;
}

.box3:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 7;
}

.box4:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 8;
}
.box5:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 9;
}
.box6:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 10;
}
.box7:hover .layer {
  height: 0%;
  border: 2.5px solid black;
  z-index: 11;
}