*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}

#body{   
      
    background-color: #f4f4f4ab; 
    
    }


.containergrid{

        
        height:100vh;    /*  instead of vh & vw it affects the responsiveness "media query while setting the main-menu to none"*/
        width:100%;
        display: grid;
        grid-template-areas: 
         "header header header header"
         "mainsection mainsection sidecontent sidecontent " 
         "mainsection mainsection sidecontent2 sidecontent2" 
         "footer footer footer footer";
        grid-template-columns:repeat(4 1fr);
        grid-template-rows:0.2fr 1.8fr 1.8fr 0.1fr;
        grid-gap: 7px;
        box-sizing:border-box;
         
        }
        
.header{
     /*  background-color:#5b683a; */
        background-image: url(images/brick.jpg); 
        grid-area: header;
        position: sticky;
        top:0px;
        left:0px;
    }
        
        .mainsection{
           grid-area: mainsection;
           margin: 10px;
           text-align: center;
           background-image: url(images/image.jpg);
           background-size:cover;
          /* 
           background-color: cornsilk;
           position:relative;   to check animated text   */ 
        }
        .sidecontent{
         
            grid-area: sidecontent;
            margin: 10px; 
            padding: 10px;
           /* background-image: url(images/rebars\ 3.jpg);
            background-size: cover; 
            background-color: #79153b;  */
         }
         .sidecontent2{
        
           grid-area:sidecontent2;
           padding: 10px;
           background-color: #154379; 
           margin:10px; 
           z-index: -1;
          
        
         }
        
        .footer{
            background-color: rgba(11, 15, 5, 0.8);
            grid-area: footer;
            text-align: center;
            padding-top:11px;
            
        }
    .nav-side svg{
                position:relative;
                top:22px;
                left:11px;
                
            } 
      
   /* svg path{
        height:100%;
        width: 100px;
   

    }   */
     .navbar h1{
        position: absolute;
        right:15px;
        top: 25px;
        font-size: 2em;
        text-decoration: solid;
        color: rgb(240, 236, 227);
        text-shadow:0 0 5px #ff96ad, 0 0 25px #ff96ad, 0 0 50px #ff96ad, 0 0 200px #ff96ad;
         
       /* margin-top: -1rem; */
     }
    
    .main-men{
      margin-left:15%;
      margin-top:-1.5rem;  
      
         }
    
    .main-men li{
        
        list-style:none;
        display: inline-block;
        line-height: 21px;  
        margin-right:7rem;
         
        }
    
    .main-men li a{
        font-family:Arial, Helvetica, sans-serif;
        float:left;
        display:block; 
        color: #f2f2f2;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 33px;
        text-shadow: burlywood;
        font-weight:700;
        }  
    
    .main-men li a:hover{
      background-color: aquamarine;
      color: #111;
      font-size: 33px;
    }
     
    .side-nav{
        height:100%;
        width:0px; 
        position:fixed;
        z-index:1;
        top: 0px;
        left: 0px;
        background-color: #111;
        opacity: 0.9;
        padding-top: 23px;
        overflow-x: hidden;
        transition: 0.5ms;
       } 

    .side-nav .close-btn{
        text-decoration: none;
        color: #ac4b4b;
        position:absolute;                 /* the position of the close sign inside side menu*/
        top:0px;
        right: 22px;
        font-size:35px;
        margin-left: 51px;
    
        }

       .side-nav ul{
        margin-left: 3px;
       } 
    
    
    .side-nav a:hover{
    
        color:rgb(158, 230, 116);
        font-size: 31px;
    }
    .side-nav .close-btn:hover{
    
        color:rgb(158, 230, 116);
        font-size: 39px;
    }
    
    
                                  
   /* #main{
     transition:margin-left 0.5s;
     width:100%;
     height: 100%;
     padding :20px; 
     
    }   */
       
    .hob{
    list-style: none;
    margin-left: -55px;
    }
    .hob li{
        display: block;
        
        }
    .hob li a {
            text-decoration: none;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 25px;
            display: block;
            padding: 10px 10px 10px 31px;
            color: cornsilk;
            transition:0.5s;
    }  

    .hob li a i{
    
     float: left;
     padding-right:35px;
       
    }

    
.sociallist{
    list-style: none;
    /*background-color:none; */
    text-align: center;
    margin-top: 30px;
    margin-left: -21px;
     
    
    }
    
    .sociallist li{
        padding-right: 10px;
        display:inline-block;
    }
    .sociallist li a{
        text-decoration: none;
        font-size: 31px;
    
    }
    
    .fa-brands{
    
        color: #7adbec;
    }
    .reference{
        text-decoration: underline;
        }

    .ReferenceLinks{
         
        list-style: circle;
        display:grid;
        margin:15px;
        
    }
    .ReferenceLinks li{
        padding: 7px;
        float: inline-start; 
    }
    .ReferenceLinks li a{
    
      font-size: larger;
    }
      
    
   
   .img{

      
    height:100%;
    width:100%;
        
    }
    
/* 
    .img:hover{

    zoom: 5;
    background-color: #ac4b4b;
}


    .img:hover{

        color: #154379;
    }

   .headerImage{

        height:199px;
        width:100%;
    }   */
   .asideimage{

    height:100%;
    width:100%;

   }
    .sideTitle{
        
        text-align: center;
        font-size: 3.5rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana;
        color: #2b185e;
        text-shadow:0 0 5px #e7e9e3, 0 0 25px  #e7e9e3;
      /*  border:solid whitesmoke 3px;  */

    }

    .mainHeader{


        text-align: center;
        /*text-shadow: 3px #ac4b4b; */
        font-size: 3rem;
        font-family: fantasy;
        text-decoration: solid;
        text-shadow:0 0 5px #bbbeb3, 0 0 25px  #bbbeb3, 0 0 50px  #bbbeb3, 0 0 200px  #bbbeb3;
    }


.imageContainerGrid{
 
    height:100%;
    width:100%;
    align-items: center;
  /*  margin:3em;  */
    display: grid;
    position: relative;
    grid-template-areas: 
    "image1 image1 image2 image2 "
    "image3 image3 image4 image4";
     grid-template-columns: repeat(4 1fr);
     grid-template-rows: 0.5fr 0.5fr;
     /*grid-gap:1em; */
     text-align: center;
   /* box-sizing: border-box;*/
     
}
.image1{

    grid-area:image1; 
    height:100%;
    width:100%;
    padding: 1em;
    position: absolute;
    border: solid rgb(121, 58, 58) 1px;
    border-radius:13px; 
     /*overflow: hidden; */
    
}
.image2{

    grid-area:image2;
    height:100%;
    width:100%;
    padding: 1em;
    position: absolute;
    border: solid rgb(121, 58, 58) 1px;
    border-radius:13px; 
    /*overflow: hidden; */
}
.image3{

    grid-area:image3;
    height:100%;
    width:100%;
    padding: 1em;
    position: absolute;
    border: solid rgb(121, 58, 58) 1px;
    border-radius:13px; 
    /*overflow: hidden; */
}
.image4{

    grid-area:image4;
    height:100%;
    width:100%;
    padding: 1em;
    position: absolute;
    border: solid rgb(121, 58, 58) 1px;
    border-radius:13px; 
    /*overflow: hidden; */
}




/*---------------- main section paragraph ---------------*/

.mainsectionList{
  
width: 75%;
border-radius:2%;
margin-top: 11%;
margin-left:15px;


}

.mainList{


  /*background-color: #93df67; 
  padding: 1rem;  */
  list-style:none;
  font-size: 3rem;
  margin-left:1.5rem;
  color: antiquewhite;

}

.mainList p{

    letter-spacing:1px;
    font-size:1.8rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
    font-weight: 300;
    text-align: justify; 
    /*float: left; */
    
    
}
.para1{

     font-style:normal;
}

.footer p{

    font-family: Georgia, 'Times New Roman', Times;
    color: #817171;

} 

/*--------- Media Queries------- */


@media (max-width:1300px){

    .main-men{display:none;}   /* sets the main menu to none and defines the new structure. */
    .containergrid{
        height:100%;
        width:100%;
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.5fr 1fr 1.3fr 0.1fr;   
     } 
        
       
    }
 @media (max-width:1024px){

        .main-men{display:none;}   /* sets the main menu to none and defines the new structure. */
        .mainHeader{display:none;}
        .containergrid{
          height:100%;
          width:100%;
          grid-template-areas:
           "header"
           "mainsection"
           "sidecontent"
           "sidecontent2" 
           "footer" ;
           grid-template-columns: 1fr;
           grid-template-rows:0.15fr 1.5fr 1fr 1.5fr 0.1fr;  
       } 
         
    }
@media (max-width:819px){

    .main-men{display:none;}   /* sets the main menu to none and defines the new structure. */
    .mainHeader{display:none;}
    .sideTitle{ margin-top:3%;}
    .containergrid{
      height:100%;
      width:100%;
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.2fr 1.5fr 1fr 1.3fr 0.1fr;  
   } 
     
}



@media(max-width:430px)
{
     .mainList p{ letter-spacing:2px; font-size:1rem; text-align:center;}
     .mainParagraph2{display:none;}

     .containergrid{
        height:100%;
        width:100%;   
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent" 
         "sidecontent2"
         "footer" ;
         grid-template-columns:1fr;
         grid-template-rows:0.2fr 2fr 1fr 1fr 0.1fr;   
        
     }  

}
@media (max-width:414px) {  
  
    .navbar h1{display:none;} 
    .mainHeader{ color: whitesmoke; text-shadow:0 0 5px #bbbeb3, 0 0 25px  #bbbeb3, 0 0 50px  #bbbeb3, 0 0 200px  #bbbeb3; margin: top 1.5rem;} 
    .mainList p{ letter-spacing:2px; font-size:1rem; text-align:center;}
    .mainParagraph2{display: none;}
    /*.sideTitle{ display: none;}  */
    .mainHeader{ padding-top: 1.5rem; font-size:2.5rem;}
    .containergrid{
          height:100%;
          width:100%;
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.5fr 1fr 1.3fr 0.1fr;   
        
     } 
    

}
@media (max-width:385px) {  

    .para1{display:text;}
    .containergrid{
         height:100%;
         width:100%;
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.5fr 1fr 1.3fr 0.1fr;   
        
     } 
}



/*
 
@media screen  and(orientation:landscape) and (max-width:893px){
    .main-men{display:none}   
    .containergrid{
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.4fr 1.7fr 1.2fr 1.3fr 0.2fr;    
   } 
}


@media (orientation:potrate){
    .main-men{display:none}   
    .containergrid{
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.4fr 1.7fr 1.2fr 1.3fr 0.2fr;   
   } 
}   */