/* start global rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}
/* end global rules */
/* start variables */
:root {
  --main-color: #757575 !important;
  --section-padding:  57px 32px;
}

/* end variables*/
/* start aside */
aside {
  width: 40%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* end aside */

.container {
  margin-left: 40%;
  width: 60%;
  padding: 32px;
}
/* start header */
header {
  padding: 64px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.menue{
  z-index: 1000;
  width: 60%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  display: none;
   
}
.close{
  font-size: 48px !important;
  padding: 16px !important;
  position: fixed;
  top: 0;
  right: 0;
  color: #fff;
  font-weight: 400px;
  cursor: pointer;
   
}
.menue .close:hover{
    background-color:#f1f1f1;
  color: #000;
}
.menue ul{
  list-style: none;
transform: translateY(60%);
}
.menue ul li{
  padding: 24px;
}

.menue a{
   font-size: 36px;
  color: var(--main-color);
  text-decoration: none;
  cursor: pointer;
}
.menue a:hover{
  color: #ccc;
}
.menueBar {
font-size: 36px !important;
  padding: 16px !important;
  position: fixed;
  top: 0;
  right: 0;
  color: var(--main-color);
}

.menueBar:hover{
  background-color:#f1f1f1;
  color: #000;
}
header p {
  font-size: 18px;
  margin: 8px 0 24px 0;
  color: #555;
}
h1 {
  font-size: 64px;
  font-weight: bolder;
}
header button {
  color: #000;
  background-color: #f1f1f1;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
}
header button:hover {
  background-color: #ccc;
}

/* End header */
/* start portfolio */
section {
  padding:var(--section-padding);
}
section .imgs {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
h2 {
  font-size: 24px;
  color: var(--main-color);
  font-weight: 400;
  margin: 16px 0;

  margin-left: 8px;
}
section .leftImgs {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 8px;
}
section .leftImgs img {
  width: 100%;
  margin-bottom: 12px;
}
section .rightImgs {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 8px;
}
section .rightImgs img {
  width: 100%;
  margin-bottom: 12px;
}

/* end portfolio */
/* strart about */
section p {
  color: var(--main-color);
  line-height: 1.5;
}
/* End about */
/* start skills */
.skills p {
  letter-spacing: 4px;
  margin: 12px 4px;
}
.bar.grey {
  width: 80%;
  height: 32px;
  background-color: #eee;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: linear-gradient(to right, #616161, #999);
  position: relative;
}

/* النسب */
.photography {
  width: 95%;
}
.photography::before {
  content: "95%";
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.web {
  width: 85%;
}
.web::before {
  content: "85%";
  color: white;
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.photoshop {
  width: 80%;
}
.photoshop::before {
  content: "80%";
  color: white;
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* End skills*/
/* start achievement */
.achievement{
background-color: #616161;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;

margin-top: 64px;
}
.part{
margin: 16px 0;
padding: 16px 0;
color: #fff;
text-align: center;
}
.part span{
  font-size: 24px;
}
.part p{
   color: #fff;
   font-size: 18px;
}

.achiev {
  color: #000;
  background-color: #f1f1f1;
  padding: 12px 24px;
  border: none;
  margin-top: 32px;
}
.achiev:hover {
  background-color: #ccc;
}
/* end achievement */
/* start testimonials */
.testimonials{
  margin-left: 32px;
}

.testimonials h2{
  margin-bottom: 32px;
}
.avatar{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.avatar img{
  width: 80px;
  border-radius: 50%;
  margin-right: 32px;
  margin-bottom: 32px;
 
}
.avatar span{
  font-size: 18px;
  color: #000;
}
.avatar p{
  
   font-size: 16px;

  color: #555;
}
/* end testimonials */
/* start Price */
.priceplans{
   padding:var(--section-padding);
   
}

.priceplans h2{
  margin-left: 16px;
}
.price{
   
  margin-top: 16px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-evenly;
  
}
.price ul{
  text-align: center;
  list-style: none;
   padding: 0 ;
   margin: 0;
   margin-bottom: 16px;
    border-bottom: 1px solid #ddd;
    width: 470px;
   transition: transform 0.5 ease;
   color: var(--main-color);
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
      0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.price ul:hover{
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2),
 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.price ul li {

   padding: 12px 24px; 
   font-size: 16px; 
   border-bottom: 1px solid #ddd;    
}

.price ul .head{
    font-size: 24px;
    padding-top: 32px ;
    padding-bottom: 32px ;
}
.price .greybasic{
      color: #fff ;
    background-color: #616161 ;
}

.price .blackpro{
   color: #fff ;
    background-color: #000 ;
}

.btn{
        color: #000 ;
    background-color: #f1f1f1 ;
      font-size: 24px;
    padding-top: 32px ;
    padding-bottom: 32px ;
}

.btn button{
  border: none;
  background-color:white;
 padding:16px 32px ; 
 margin:12px 0;
 cursor: pointer;
}
.btn button:hover{
  background-color: #000;
  color: #f1f1f1;
 padding:12px 24px ; 
}

/* start Contact me */
.contact{
     margin-top: 16px ;
    margin-bottom: 16px ;
    color: var(--main-color);
    padding: var(--section-padding);
    
}
.contact p{
 font-size: 20px;
 padding-top: 16px;
 padding-bottom: 16px;
}
.contact .fa {
  margin-right: 16px;
  font-size: 24px;
}

.contact img{
  width: 100%;
  filter: grayscale(75%);
    margin: 32px 0;
}

form input{
  width: 100%;
  height: 54px;
 border:1px solid #ccc ;
 padding: 18px; 
 margin-bottom: 16px; 
}

form button {
  color: #000;
  background-color: #f1f1f1;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
}
form button:hover {
  background-color: #ccc;
}

/* end contact me */
/* start footer */
footer{
  background-color: #f1f1f1;
  color: var(--main-color);
  text-align: center;
  padding: 100px 0 ;
  font-size: 24px;
 margin: -24px;
}
footer p{
  padding: 16px;
}
footer a{
  color: var(--main-color);
}
.fa {
  font-size: 24px;
  margin: 0 10px;
  transition: color 0.3s ease;
  cursor: pointer;
}


.facebook:hover {
  color: #3b5998; 
}

 .instgram:hover {
  color: #e1306c; 
}

.snapchat:hover {
 color: #fffc00;
  text-shadow: 0 0 4px #000;
}

.pinterest:hover {
  color: #bd081c; 
}

.twitter:hover {
  color: #1da1f2;
}

.linkedin:hover {
  color: #0077b5; 
}

/* end footer */