body {
    padding: 0;
    margin: 0;
    font-family: 'Tajawal', sans-serif; 
    background-color:white;
    text-align: center; 
    }

.continer{
          width: 80%;
          margin: auto;
         }

.grid-container {
                display: grid;
                grid-row: gap 10px;
                grid-template-areas:
                "hd hd hd hd"
                "nv nv nv nv" 
                "mn mn mn as" 
                "mn mn mn as" 
                "fo fo fo fo"
                }

header {
      grid-area: hd;
      background-color:#f9f9f3;
      display: flex;
       }

nav {
    grid-area: nv;
    background-color:rgb(227, 229, 226);
    border-width: 2px;
    }

main {
        grid-area: mn;
        background-color:#f9f9f3;
     }

 aside {
        grid-area: as;
        background-color: #f8f6f6;
        
        
       }
footer {
        grid-area: fo;
        background-color:#e9e9e9;  
       } 

.div_h1{
        /*   font-family: 'Almarai', sans-serif;*/
        font-family:'Tajawal', sans-serif; 

        color:#0d0d0e ;
        font-style: italic;
        font-size: 14px;
        width: 80%;
        background-color:f8f6f6;
        display: block;
       }

.logo{
       display: block;
       width:20% ;
       margin-right: 50px ;
      }
 
.navbar{
        display: flex;
        flex-direction: row-reverse;
        background-color: #e9e9e9;  
       }
 
.searchform{
            display: flex;
            background-color:#e9e9e9;
          }
  
.navbutton {
          width: 100px;
          height: 35px;
          border-color:#b8e9f0;
          background-color: #2196F3;
          color: white;
          border-width: 1px;
          border-style: solid;
          font-size:14px;
          font-style:italic;
          margin-right: 8px; 
          vertical-align: top;
          }  

.hover-opacity:hover {
                     opacity: 0.6;
                     }            

.active1 {
         text-decoration: none; 
         color: white;
          }

.searchinput {
              padding: 7px;
              font-size: 16px;
              border: 1px solid grey;
              width: 80%;
              height: 19px;
              background: #f1f1f1;
            }

.searchbutton {
              margin-right: 140px;
              width: 100px;
              height: 35px;
              padding: 0px;
              background: #2196F3;
              color: white;
              font-size: 12px;
              border: 1px solid grey;
              border-left: none;
              cursor: pointer;
              }

.img1 {
        height:80px;
        width:120px;
        margin-top: 10px ;
      } 

.img2 {
      margin-top: 30px;
      }      

.vertical-menu {
              width: 200px;  /* Set a width if you like */
              margin: 40px auto;
              }
       
.vertical-menu a {
                  background-color: #eee; /* Grey background color */
                  color: black; /* Black text color */
                  display: block; /* Make the links appea r below each other */
                  padding: 8px; /* Add some padding */
                  text-decoration: none; /* Remove underline from links */
                 }
      
.vertical-menu a:hover {
                        background-color: #b8f0e9; /* Dark grey background on mouse-over */
                       }
      
.vertical-menu a.active {
                        /*  background-color: #4CAF50;  Add a green color to the "active/current" link */
                        background-color: #2196F3;
                          color: white;
                          font-size: 18px;
                        }
.vertical-menu {
                width: 250px;
                height: 240px;
                overflow-y: auto;
                }

.main {
       background-color: #faf8f5; 
       border:solid 5px white;
       }    

.footer{
         /*   font-family: 'Almarai', sans-serif;*/
           font-family:'Tajawal', sans-serif; 
           font-size: 20px;
           border:solid 5px white;
           padding-left: 100px;
           padding-top: 20px;
       }

.fa {
        padding: 20px;
        color: #2196F3;
        font-size: 30px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        border-radius: 8;
        width: 12px;
        height: 8px;
    }
      
      /* Add a hover effect if you want */
.fa:hover {
        opacity: 0.7;
      }
      
      /* Set a specific color for each brand */
      
      /* Facebook */
.fa-facebook {
        background: #2f5097;
        color: white;
      }
  
.fdiv {
      width: 250px;
       margin-left: 80px;
      }
      
.home {
        position: relative;
        height: 100vh;
        background-image: url("../images/logob.jpg");
        background-size: cover;
        background-position:center ;
         margin-top: 0px;
      }
.over-lay {
        position: absolute;
        width: 100%;
        height:100%;
        top: 0;
        left: 0;
        background-color: rgba(244, 249, 250, 0.90);
      }   
.home-content{
        width: 85%;
        height:100%;
        background-color: transparent;
        margin: auto;
        text-align:right ;
      }   

.home-h3{
        padding: 5px;
        margin-top: 10px;
        font-size: 19px;
        font-family: 'Tajawal', sans-serif;
      } 
 
.home-p {
        
        text-align: justify;
        font-size: 18px;
        font-family: 'Tajawal', sans-serif;
      }
     
.input{
        border-color: white;
        width: 85px;
        height:10px;
        font-size: 16px;
        font-family: 'Tajawal', sans-serif;
      }

.error{
        color:red;
       
        font-family: 'Tajawal', sans-serif;
        }  
 
           
@media (max-width:700px) {
           .grid-container {
               display: grid;
               grid-row: gap 10px;
               grid-template-areas: 
               "hd hd hd hd"
               "nv nv nv nv" 
               "mn mn mn mn"
               "mn mn mn mn"
               "as as as as" 
               "as as as as " 
               "fo fo fo fo"
           }  
        
           .navbar{
            flex: none;
            display: block;
          }
        
          .navbutton {
            height: 35px ;
            width: 50%;
            text-align:center ;
       /*     padding: 14px;*/
            vertical-align: middle;
          }
         
          .button a {
           
            vertical-align: top;
          }
         
          .searchbutton {
            height: 34px ;
            margin-right: 0px;
            text-align:center;
         
          }        
           
          .searchinput  {
            height: 18px;
            width: 80%;
            text-align:center;
            margin: auto;
          }
        
          .div_h1{
          font-size: 11px;
          }
         
          .img1{
            height:70px;
            width:100px;
            margin-top: 25px;
          }