/* Start global attr rules */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: "Lato", sans-serif;
  background-color: #fff;
  color: #595959;
  line-height: 1.6;

}
h1,
h2,
h3,
h4,
h5 {
  color: #494949;
  text-transform: uppercase;
}
article{
  padding-bottom: 20px;
}
/* End global attr rules */
/* Start my classes */
.flx-nw-col{display: flex;flex-wrap: nowrap; flex-direction: column;}
.flx-nw-row{display: flex;flex-wrap: nowrap; flex-direction: row;}
.ju-c{justify-content: center;}
.ju-s{justify-content: start;}
.ju-sb{justify-content: space-between;}
.al-c{align-items: center;}
.al-b{align-items: baseline;}
/* End my class */
/* start header  */
.container {
  width: 1280px;
  margin: auto;
}
header .slider {
  background-image: url("../images/intero.jpg");
  background-size: cover;
  height: 720px;
}
header .intero {
  text-align: center;
  padding-top: 275px;
}
.intero h1 {
  color: white;
  margin: 0 auto;
  border-bottom: 3px solid white;
  border-top: 3px solid white;
  width: 250px;
}
.intero button {
  margin-top: 40px;
  padding: 10px;
  font-size: 18px;
  background: none;
  color: white;
  border: 3px solid white;
  font-weight: bold;
}
header nav {
  background-color: #252f31;
  color: white;
}
header nav h2 {
  display: inline-block;
  color: white;
  text-transform: uppercase;
  & span {
    color: #2fca72;
  }
}
header nav a {
  text-decoration: none;
  color: white;
  &:hover,
  &:active {
    color: #29bf6a;
  }
}
/* End header  */
/* Start features */
.features .container {
  -webkit-column-gap: 15px;
  column-gap: 30px;
}
.feature,.feature p{
  margin-bottom: 0;
}
/* End features */
/* Start about me */
.about-me {
  background-color: #f2f2f2;
  padding-bottom: 0;
}
.about-me-image{
width: 100%;
margin: 0 20px 0 0 ;
}
.about-me-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:70%;
}
.about-me-cards {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 10px;
  column-gap: 10px;
}
.about-me-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  & h3,
  & p {
    margin: 0;
    padding-top: 0px;
  }
  & p{
    padding: 5px 0 5px 0;
  }
  & span[class*="material-symbols"] {
    position: relative;
    top: 2.5%;
    grid-row: 1/3;
    color: #039108;
    margin: 0 15px 0 0;
    font-size: 2rem;
  }
}
/* End about me */
/* Start my skills */
.my-skills .container {
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 10px;
  align-items: baseline;
  overflow: hidden;
}
.my-skills-text {
  width: 100%;
}
.my-skills-contact-me,
.resume-dowenload {
  width: fit-content;
  background: white;
  border: 2px #036608 solid;
  color: #036608;
  height: 20%;
  transition: background 0.2s ease-out;
  &:active {
    background-color: #036608;
    color: white;
    box-shadow: 0px 0px 1px 1px #2dcc72;
  }
}
.my-skills-progresses {
  width: 100%;
  & h3 {
    margin-top: 10px;
    margin-bottom: 5px;
  }
}
.my-skills-progress {
  width: 100%;
  position: relative;
  & span {
    font-weight: bold;
    bottom: 2px;
    position: absolute;
    left: 50%;
    color: white;
  }
  &:nth-child(1) span {
    left: 70%;
  }
  &:nth-child(2) span {
    left: 79%;
  }
  &:nth-child(3) span {
    left: 59%;
  }
  &:nth-child(4) span {
    left: 84%;
  }
}
.my-skills-progress progress {
  width: 100%;
  background-color: transparent;
  color: transparent;
  &::-webkit-progress-bar {
    background-color: #d9d9d9;
  }
  &::-webkit-progress-value,&::-moz-progress-bar {
    color: forestgreen;

  }
}

/* End my skills */
/* Start Resume  */
.resume {
  background-color: #f2f2f2;
}
.resume::after {
  content:"" ;
  position: relative;
  left: 49%;
  top:55px;
  border: 20px solid;
  border-color: #f2f2f2 transparent transparent transparent;
}
/* End Resume  */
/* Start My education  */
.my-education .container {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: space-between;
  row-gap: 25px;
}
.my-education-cards,
.work-experience-cards {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: space-between;
  column-gap: 25px;
}
.my-education-card p:last-child,
.work-experience-card p:last-child{
  margin-bottom: 0;
}
.my-education-card span,
.work-experience-card span {
background-color: #036608;
color: white;
padding: 5px 10px;
}

/* End My education  */
/* Start Testimonial  */
.Testimonial {
  background-color: #f2f2f2;
}
.Testimonial .container p:last-child{
  margin-bottom: 0;
  font-family: Arial, Helvetica, sans-serif
}
.Testimonial .container ul {
  margin: 0;
  display: flex;
  justify-content: space-around;
  width: 15%;
  list-style-type: circle;
  & li{
    font-size: 36px;
    background-color: #039108;
    color: #039108;
    &:hover,&:active{
      list-style-type: disc;
      cursor: pointer;
    }
  }
}
/* End Testimonial  */
/* ٍStart Protfolio  */
.Protfolio-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 25px;
  column-gap: 25px;
  & figure {
    width: 100%;
    height: 400px;
    margin: 0;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 1px -1px 5px 2px;
  }
}
/* End Protfolio  */
/* Start Contact Me  */
.contact-me {
  background-color: #252f31;
  color: #bfbfbf;
  & h2,
  & label,
  & a,
  & input[type="submit"] {
    color: white;
  }
  & a {
    text-decoration: none;
  }
}
.contact-me .container {
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 10px;
  align-items: baseline;
  overflow: hidden;
}
.contact-me-form {
  justify-content: flex-end;
  row-gap: 10px;
  & input,
  & textarea { 
  width: 50%;
  height: 30px;
    background-color: #bfbfbf;
  }
}
.contact-me-form-input textarea{
height: 40%
}
.contact-me-form input[type="submit"] {
  width: fit-content;
  background-color: #191e21;
}

/* End Contact Me  */
/* start footer  */
footer {
  background-color: #191e21;
  overflow: hidden;
}
footer .container p {
    color: #bfbfbf;
  }

footer nav {
  display: flex;
  margin-bottom: 15px;

  & a {
    text-decoration: none;
    color: #191e21;
    background-color: #4b5556;
    padding: 10px;
    margin: 10px;
    border-radius: 50%;
    transition: border-radius 0.5s ease-out;
    
    &:hover {
      border-radius: 0%;
      & i{
        color: white;
      }
    }
  }
}
/* End footer  */