* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

/* Start of Banner */

.banner {
    background-image: url(images/rami-al-zayat-w33-zg-dNL4-unsplash.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 800px;
    color: white;
}

.nav {
    display: flex;
    justify-content: space-around;
}

.logo {
    font-size: xx-large;
    /* margin-left: 10%; */
}

.menu ul {
    display: flex;
    list-style: none;
    margin-right: 10%;

}

.menu li {
    padding: 3%;
}

.intro {
    /* display: inline;
    justify-content: center; */
    padding-top: 200px;
    margin-left: 17%;
    font-size: xx-large;
    justify-items: center;
}
.intro button{
    background-color: transparent;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: medium;
    color: white;
}

/* End of banner */

/* start of about */

.about {
    padding: 3% 5% 2% 5%;
    display: flex;
    background-color: white;
}

.apic {
    background: linear-gradient(to right, white, transparent 90%);
    width: 50%;
}

.apic img {
    border-radius: 10%;
    height: 100%;
    max-width: 100%;
}

.atext {
    padding: 0% 5% 2% 0%;
    justify-content: center;
    text-align: center;
    width: 50%;
}

.atext button{
    background-color: darkslategray;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: larger;
    color: white;

}

.atext ol {
    list-style: inside;
    list-style-type: none;
}

/* end of about */

/* start of what role */
.what {
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: auto auto auto ;
    justify-content: space-evenly;
}
.role{
    padding: 10%;
}
.winfo{
    display: flex;
    justify-content: center;
    align-items: center;

}
.iconify{
    padding: 3%;
    color: darkslategray;
    height: 100px;
    width: 200px;
}
/* end of what role */

/* start of stat */

.stat{
    background-image: url(images/joshua-woroniecki-lzh3hPtJz9c-unsplash.jpg);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
    font-size: xx-large;
    font-weight: bolder;
    /* height: auto; */
    width: 100%;
}

.cstat{
    padding: 5%;
}

/* end of stat */

/* start of portfolio */

.portfolio{
    padding:  5% 10% 0 10%;
}
.portfolio h1{
    padding-bottom: 3%;
}
.portpic{
    display: grid;
    grid-template-columns: auto auto auto auto;
    position: relative;

    /* padding: 10%; */
}
.pic{
    position: relative;
}

.text-block {
    position: absolute;
    top: 40px;
    left: 10px;
    background-color: black;
    opacity: 0.6;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    list-style:inside;
  }

  /* end of portfolio */

  /* start of clients */
.client{
      background-color: whitesmoke;
      padding:  10% 10% 0 10%;
  }
  .client h1{
      padding-bottom: 3%;
}

  /* end od clients */


  /* start of testimonial */


.testmonial{
      padding:  10% 10% 1% 10%;
  }

  .peopleall{
      padding-top: 3%;
      display: grid;
      grid-template-columns: auto auto auto;
      justify-content: space-evenly;
  }
  .ppic{
      display: flex;
      justify-content: center;
      align-items: center;
  }
/* end of testimonial */

/* start of contact info */
.contact{
    padding: 5% 10% 0 10%;
    color: white;
    background-image: url(images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
    background-size: cover;
    height: auto;
    width: 100%;
}
.contacts{
    display: flex;
}
.cinfo{
    padding: 10%;
    list-style: inside;
}
.cform{
    padding: 10%;
}
.cinfo h4{
    padding: 5%;
    font-size: x-large;
}
.cform h5{
    padding: 5%;
    font-size: x-large;
}

/* .cinfo li{
    color: white;
    list-style-image: url(<span class="iconify" data-icon="ps:facebook-places"></span>);
} */

.cform button{
    background-color: transparent;
    color: white;
    padding: 2%;
    
}

/* end of .contact */

/* start of socials */
.socials{
    padding: 1% 10% 0 10%;
}
.end{
    display: flex;
    
}

.end .socialmedia{
    display: flex;
    justify-content: center;
   
}

.end .socialmedia img{
    width: 10%;
    
}

.copyright{
    width: 20%;
}
.socialmedia{
    width: 50%;
}
.myname{
    width: 30%;
}

/* end of socials */