body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #f7d4f7;
  
  }


/* NAV bar */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.6em;
  margin: 0;
  }

.push {
  margin-left: auto;
  
  }

@media only screen and (max-width: 900px) {
  .main-nav {
    font-size: 0.4em;
    padding: 0;
  }
}

.zone {
   /* padding:30px 50px; 
    margin:40px 60px; */
    font-family: "Aref Ruqaa";
    cursor:pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.4s linear;
  }

   
.blue {
          
    background: rgba(179,199,239,1);
    background: -moz-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,199,239,1)), color-stop(25%, rgba(36,115,235,1)), color-stop(74%, rgba(36,115,235,1)), color-stop(100%, rgba(188,206,240,1)));
    background: -webkit-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -o-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -ms-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: linear-gradient(to bottom, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3c7ef', endColorstr='#bccef0', GradientType=0 );
  }


li {
  padding: 20px;
  }

a {
  color: #f5f5f6;
  
  }

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;

  }


.container {
	
  display: flex;
	justify-content: center;
}

.img-container {
    max-width: 1500px;
    display: flex;
}

img {
    align-self: baseline;
    
}

.img-wrap { 
    margin: 0 0 0 10px; 
    text-align: justify;
}


.text-title {
  font-family: "Aref Ruqaa";
  font-size: 2rem;
  text-align: left;
  color: blue;

}
.text-uppercase {
  font-family: "Aref Ruqaa";
  text-align: center;
  position: relative;
  top: 5px;
  color: blue;
}

.topic {
  text-align: left;
  color: darkblue;
}
.buffer {
  height: 3rem;
}

.raw-text {
  text-align: justify;
}