@import url ('https://fonts.googleapis.com/css?family=Hind+Madurai:400,500,700');

 .container {
	height: 100%;
    width:90%;
    margin-left:5%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 200px 60px auto auto 60px auto 60px auto 50px;
    grid-template-areas: 
        ". h h h h h h h h h h h"
        ". . . . . . . . . . . ."
        "m m . text0 text0 text0 text0 text0 text0 text0 . ."
        "m m pic1 pic1 pic1 pic1 pic1 text1 text1 text1 text1 text1"
        "m m . . . . . . . . . ."
        "m m text2 text2 text2 text2 text2 pic2 pic2 pic2 pic2 pic2"
        "m m . . . . . . . . . ."
        "m m pic3 pic3 pic3 pic3 pic3.text3 text3 text3 text3"
        ". f f f f f f f f f f f";
}



.header {
    grid-area: h;
    
    }
.header div.horizontal {
   
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 200px;
    border: 1px solid #AFAFAF;
    box-shadow: 2px 2px 6px 0px #AFAFAF;
    
    }



.menu {
    grid-area: m;
    background-color: #DBDBDB;
}
.nav-item {
  color: black;
  text-decoration: none;
  font-size: 28px;
  display:block;
  margin: 10px ;
  padding-top:30px;
  justify-content: start;
  transition:0,2s ease-out;
  }
 a:hover{
    text-decoration: underline;
}
a:active{
    border: 1px solid #AFAFAF;
}
.text0 {
    grid-area: text0;
    font-family:'Hind Madurai', sans-serif;
    display:flex;
    font-size: 20px;
}
.pic1 {
    grid-area: pic1;
    border: 1px solid #AFAFAF;
    box-shadow: 2px 2px 6px 0px #AFAFAF;
   
}
.pic2 {
    grid-area: pic2;
    border: 1px solid #AFAFAF;
    box-shadow: 2px 2px 6px 0px #AFAFAF;
    
}  
.pic3 {
    grid-area: pic3;
    border: 1px solid #AFAFAF;
    box-shadow: 2px 2px 6px 0px #AFAFAF;
} 
.text1 {
    grid-area: text1;
    font-family:'Hind Madurai', sans-serif;
    display:flex;
    border: 1px solid black;
    border-radius: 45px;
    padding:20px;
    font-size: 20px;
    
  } 
.text2 {
    grid-area: text2;
    font-family:'Hind Madurai', sans-serif;
    display:flex;
    border: 1px solid black;
    border-radius: 45px;
    padding:20px;
    font-size: 20px;
}
.text3 {
    grid-area: text3;
    font-family:'Hind Madurai', sans-serif;
    display:flex;
    border: 1px solid black;
    border-radius: 45px;
    padding:20px;
    font-size: 20px;
}
.footer {
    grid-area: f;
    background-color: #DBDBDB;
}


.container > div {
  display: flex;
  

  
}
.header > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


html, body {
  box-sizing: border-box;
  padding: 10px;
  margin: 0px;
  font-family:'Hind Madurai', sans-serif;
}

@media print {
  body{
    background-image: none;
    font-size: 12px;
  }
  .nav {
    display: none;
  }
  .footer {
    display: none;
  }
  .header {
    display: none;
  }
  
  .nav-item {
  display: none;
  }
}