body{
  margin: 0px;
  text-align: center;
}

hr{
  margin-top: 100px;
  max-width: 80px;
  color: #F3F2F1;
  border-style: dotted none none;
  border-block-width: 5px;
  width: 10%
}

.top-menu{
  padding: 20px 0px 20px 0px;
  background-color: #E0EBE8;
  display: flex;
  margin-bottom: -1px;
  width: 100%;
}

.top-menu ul{
  display: inline-block;
  margin-left: auto;
  margin-right: 3%;
}

.top-menu ul li{
  display: inline-block;
  color: #1E836C;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
  margin-left: 35px;
  font-size: 22px;
}

ul li a{
  text-decoration: none;
  color: #1E836C;w
}

ul li a:hover{
  text-decoration: none;
  color: #282828;
}

.top-menu img{
  width: 60%;
  max-width: 100px;
  margin-left: 52%;
  display: inline-block;
}

.top-containner{
  padding-top: 200px;
  background-color:  #E0EBE8;
}

.land{
  width: 80%;
  max-width: 800px;
  margin: 0px 0px -4px 0px;
}

.top-inner-containner{
  margin: 0 auto 0 auto;
  display: inline;
}

.top-inner-containner h1{
  margin: 0 auto 0 auto;
  color: #4AB19A;
  display: inline-block;
  font-family: 'Kaushan Script', cursive;
  font-size: 50px;
}

.top-inner-containner p{
  color: #4AB19A;
  font-family: 'Tajawal', sans-serif;
  font-size: 125%;
  font-weight: bold;
}

.middle-containner{

}

.middle-containner h2{
  color: #4AB19A;
  font-family: 'Tajawal', sans-serif;
  font-size: 25px;
  font-weight: 600;
}

.middle-containner h1{
  color: #1E836C;
  letter-spacing: 2px;
  margin-bottom: 25px;
  font-family: 'Jost', sans-serif;
  font-size: 35px;
  font-weight: bold;
}

.middle-containner p{
  width: 49%;
  max-width: 450px;
  margin: 0 auto 0 auto;
  font-family: 'Tajawal', sans-serif;
  color: #545454;
  font-size: 22px;
}

.middle-containner .block-1{
  margin: 0 auto 0 auto;
  position: relative;
  margin-top: 100px;
}

.middle-containner .block-3{
  margin: 0 auto 0 auto;
  position: relative;
  margin-top: 100px;
  padding-bottom: 140px;
}

.middle-containner .block-1 img{
  width: 12%;
  max-width: 163px;
}

.middle-containner .block-2{
  margin-top: 100px;
}

.design-containner-1-images{
  display: inline-block;
  position:  relative;
  right: 6%;
  margin-top: 30px;
}

.design-containner-1-images hr{
  position: absolute;
  top: 50%;
  color: #DAD9D9;
  max-width: 100%;
  left: 56%;
  margin-top: auto;
  border-style: dotted none none;
  border-block-width: 5px;
  transform: translateY(-50%);
  width: 40%
}

.design-containner-1-images .img-1{
  position: relative;
  width: 50%;
  margin-right: 28%;
}

.design-containner-1-images .img-2{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30%
}

.design-containner-1-text{
  margin-top: 30px;
  width: 400px;
  display: inline-block;
  text-align: left;
  position: relative;
  left: 6%;
}

.design-containner-1-text h2{
  display: block;
  margin: 0px 0px 20px 0px;
}

.design-containner-1-text p{
  display: inline;
  margin: 0px;
}

.design-containner-2-images{
  display: inline-block;
  position:  relative;
  left: 2%;
  margin-left: -57px;
  margin-top: 60px;
}

.design-containner-2-images hr{
  position: absolute;
  top: 50%;
  max-width: 100%;
  color: #DAD9D9;
  margin-top: auto;
  left: 26%;
  border-style: dotted none none;
  border-block-width: 5px;
  transform: translateY(-50%);
  width: 40%
}

.design-containner-2-images .img-1{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15%

}

.design-containner-2-images .img-2{
  position: relative;
  width: 29%;
  margin-left: 35%;
}

.design-containner-2-text{
  margin-top: 60px;
  width: 400px;
  display: inline-block;
  text-align: left;
  position: relative;
  left: 3%;
}

.design-containner-2-text h2{
  display: block;
  margin: 0px 0px 20px 0px;
}

.design-containner-2-text p{
  display: inline;
  margin: 0px;
}


.message-me-button{
    text-align: center;
    display: inline-block;
    position: relative;
    background: #45b29a;
    padding: 10px 0px 10px 0px;
    width: 17%;
    color: white;
    text-decoration: none;
    margin: 1.5em 0 0;
    border-radius: 3px;
    font-weight: bold;
    border: 0;
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
}
.message-me-button i{
  margin-right: 10px;
}

.top-cloud{
  left: 75%;
  width: 15%;
  max-width: 120px;
  position: absolute;

}
.bottom-cloud{
  right: 70%;
  width: 15%;
  max-width: 120px;
  position: absolute;
}

.bottom-containner{
  height: 200px;
  position: relative;
  margin: 0 auto 0 auto;
  background-color: #C5DED7;
}

.bottom-containner ul{
  margin: 0 auto 0 auto;
  position: relative
  margin: 0px;
  padding: 0px;
}

.bottom-containner ul li{
  display: inline-block;
  color: #1E836C;
  padding: 20px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
  font-size: 18px;
}

.bottom-containner p{
  margin: 0 auto 0 auto;
  font-family: 'Tajawal', sans-serif;
  color: #1E836C;
  font-size: 15px;
  margin-top: 10px;
}

.bottom-inner-containner{
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
/* about page stylesheet */

.work-page-top-containner{
  position: relative;
  padding-top: 149px;
  background-color: #E0EBE8;
  color: #39A488;
  font-size: 21px;
  font-family: 'Kaushan Script', cursive;

}

.work-page-top-containner h1{
  bottom: 60px;
  position: relative;
  margin: 0 auto 0 auto;
  font-size: 56px;
}

.work-page-top-containner .top-cloud{
  left: 75%;
  top: 56%;
  width: 15%;
  max-width: 120px;
  position: absolute;
}

.work-page-top-containner .bottom-cloud{
  top: 72%;
  right: 77%;
  width: 15%;
  max-width: 120px;
  position: absolute;
}

.work-pafe-flag-right{
  position: absolute;
  right: 30%;
  height: 130px;
  bottom: 0px;
}

.work-pafe-flag-left{
  position: absolute;
  left: 30%;
  height: 130px;
  bottom: 0px;
}

.work-about-containner{
  margin: 80px auto 80px auto;
  font-family: 'Abel', sans-serif;
  color: #39A488;
}

.work-about-containner a{

  color: #39A488;
}

.work-about-containner img{
  width: 110px;
}

.work-about-containner h2{
    font-size: 23px;
}

.work-about-containner p{
  color: black;
  font-size: 18px;
  margin: auto;
  width: 400px;
}

.work-help-section{
  margin: 80px 0px 80px 0px;
  font-family: 'Abel', sans-serif;
  color: #39A488;
}

.work-help-section h1{
    font-size: 32px;
    margin-bottom: 20px;
}

.work-help-section p{
  color: black;
  font-size: 18px;
  margin: auto;
  width: 400px;
}

.work-help-section .heading2{
  display: inline-block;
  font-size: 18px;
  color: #39A488;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* common code for work slots */
.content-containner{
  font-family: 'Comfortaa', cursive;
  padding: 70px 0px 70px 0px;
  color: white;
}

.content-containner h1{
  margin-bottom: 5px;
}

.content-containner p{
  margin: 25px 0 25px 0;
  line-height: 22px;
  font-size: 15px;
}

.content-button{
  background-color: #2b3d51;
  display: inline-block;
  padding: 10px 20px 10px 20px;
  font-size: 12px;
  border-radius: 3px;
  box-shadow: 3px 3px 20px 1px #5c6773;
  text-transform: uppercase;
  margin-top: 10px;
}

.content-button:hover{
  transition: all .3s ease-in-out;
  background-color: #192430;
}

.content-containner img{
  width: 100%;
  max-width: 600px;
}

.work-slot-text{
  width: 50%;
  max-width: 450px;
  margin: 40px auto 0px auto;
}
/* common code ends here */

.work-slot-1{
  background-color: #7DCC93;
}
.work-slot-2{
  background-color: #F76160;
}
.work-slot-3{
  background-color: #31355B;
}

.work-slot-3 .content-button:hover{
  background-color: #1680E6;
}

.work-slot-3 .content-button{
  background-color: #328fe8;
}

.work-slot-4{
  background-color: #F8C687;
}
.work-slot-5{
  background-color: #21364B;
}
.work-slot-6{
  background-color: #E29470;
}
.work-slot-7{
  background-color: #66A7D5;
}
.work-slot-8{
  background-color: #FA6D68;
}
.work-slot-9{
  background-color: #679895;
}