@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
}

.grid-container {
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5fr 1fr 1fr 1fr;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "rector principal club sports"
 "rector prefect social-work infra";
  grid-gap: 2px;
  font-family: 'Poppins', sans-serif;
}

.grid-container .rector {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: rector;
  background: url("..//images-r/sch-building.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: relative;
  color: #fff;
  line-height: 0px;
}

.grid-container .rector .rector-title {
  position: absolute;
  top: 60%;
  padding-left: 100px;
}

.grid-container .rector .rector-title h2 {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
}

.grid-container .rector .rector-title h4 {
  font-size: 14px;
  letter-spacing: 1px;
  color: #d8cfcf;
  text-shadow: 1px 1px 1px #000;
}

.grid-container .rector .rector-title h6 {
  font-size: 10px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}
.grid-container .rector .rector-title a.principal-link {
  top: 120%;
  left:50%;
	transform:translateX(-27%);
	padding:20px;
}

.grid-container div.principal {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: principal;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.principal .p-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url("../images/vice-principal.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images-r/bio-lab.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.principal h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.prefect {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: prefect;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.prefect .pre-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url("../images/frPrefect.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images-r/Ch-lab.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.prefect h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.club {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: club;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.club .club-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url("../images/club-main.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images-r/library.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.club h2 {
  position: absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.sports {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: sports;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.sports .sports-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url("../images/sports.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images-r/IMG_20230531_111901.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.sports h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.social-work {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: social-work;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.social-work .social-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url("../images/social-3.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images-r/cs-lab.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.social-work h2 {
  position: absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.infra {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
  grid-area: infra;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.grid-container div.infra .infra-container {
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url("../images/infra-index.jpg") no-repeat; */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images-r/IMG_20230531_111929.jpg") no-repeat;
  background-size: cover;
  background-position: top;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

.grid-container div.infra h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
}

.grid-container div.principal:hover .p-container,
.grid-container div.prefect:hover .pre-container,
.grid-container div.club:hover .club-container,
.grid-container div.sports:hover .sports-container,
.grid-container div.social-work:hover .social-container,
.grid-container div.infra:hover .infra-container {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  overflow: hidden;
  cursor: pointer;
}

.grid-container .o-blue {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgb(20 20 20 / 46%);
  opacity: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}

.grid-container div.principal:hover .o-blue,
.grid-container div.prefect:hover .o-blue,
.grid-container div.club:hover .o-blue,
.grid-container div.sports:hover .o-blue,
.grid-container div.social-work:hover .o-blue,
.grid-container div.infra:hover .o-blue {
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .grid-container {
    height: 150vh;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "rector principal"
 "rector prefect"
 "club sports"
 "social-work infra";
  }
}




@media screen and (max-width: 768px) {
  .grid-container {
    height: 100vh;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1.5fr 1fr 1fr 1fr;
        grid-template-rows: 1.5fr 1fr 1fr 1fr;
        grid-template-areas: "rector rector"
 "principal prefect"
 "club sports"
 "social-work infra";
  }
	.grid-container div.infra {
 top:0px;
}
  .grid-container .rector .rector-title {
    top: 40%;
    padding-left: 20px;
  }
  .grid-container .rector .rector-title h2 {
    font-size: 25px;
  }
  .grid-container .rector .rector-title h4 {
    font-size: 10px;
    color: #fff;
  }
	.grid-container .rector .rector-title a.principal-link {
  top: 120%;
  left:30%;
	transform:translateX(-27%);
	padding:20px;
}
  .grid-container .principal h2, .grid-container .prefect h2, .grid-container .club h2, .grid-container .sports h2, .grid-container .social-work h2, .grid-container .infra h2 {
    font-size: 14px !important;
  }
}
/*# sourceMappingURL=main.css.map */

@media only screen and (min-width: 390px) and (max-width: 767px) { 
		.grid-container .rector .rector-title a.principal-link {
  top: 120%;
  left:25%;
	transform:translateX(-20%);
	padding:20px;
}
}