/*------------------- INDEX HTML MODEL IMAGES START---------------------*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-img:hover {
    cursor: pointer;
    transition: 0.3s;
    filter: brightness(120%);
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
}

.modal-portrait{
    margin: auto;
    display: block;
    width:50%
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* Caption text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  color: white;
}
/*------------------- INDEX HTML MODEL IMAGES END---------------------*/
/* ------------------------- HOME GRID CSS START -----------------------*/
.homePageGrid{
    display:grid;
    width: 90vw;
    height:auto;
    grid-template-areas:
        "topLeft topLeft topLeft topLeft topLeft topLeft topRight topRight topRight topRight topRight topRight"
        "midLeft midLeft midLeft midLeft midMiddle midMiddle midMiddle midMiddle midRight midRight midRight midRight"
        "bottomLeft bottomLeft bottomLeft bottomMiddle bottomMiddle bottomMiddle bottomRight bottomRight bottomRight bottomRight bottomRight bottomRight";
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 3px;
       /*  background-color: dodgerblue; */
        padding: 5px;
}
.homePageGrid div {
    display:flex;
    /* background-color: white; */
    padding: 10px;
}
.homePageGrid img{
    width: 100%;
    height: auto;
}
.homePageGrid div.topLeft {
    grid-area: topLeft;
    text-align: center;
}
.homePageGrid div.topRight {
    grid-area: topRight;
    text-align: center;
}
.homePageGrid div.midLeft {
    grid-area: midLeft;
}
.homePageGrid div.midMiddle {
    grid-area: midMiddle;
}
.homePageGrid div.midRight {
    grid-area: midRight;
}
.homePageGrid div.bottomLeft {
    grid-area: bottomLeft;
    text-align: center;  
}
.homePageGrid div.bottomMiddle {
    grid-area: bottomMiddle;
    text-align: center;  
}
.homePageGrid div.bottomRight {
    grid-area: bottomRight;
}

/* ------------------------- HOME GRID CSS END-----------------------*/