@media(max-width:1080px){

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}

.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #e5e5e5;
align-items: center;
}

nav{
display: flex;
width: 100%;
background-color: #EE6C4D;
position: sticky;
height: 40px;
justify-content: center;
top: 0;
z-index: 99;
padding-top: 11px;
padding-bottom: 11px;
align-items: center;
}

nav .navigation{
display: flex;
height: 40px;
align-items: center;
}

.navigation a{
text-decoration: none;
color: white;
font-size: 7.96px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
border: none;
line-height: 10px;
transition: 0.3s ease all ;
border-radius: 12px;
cursor: default;
}


.navigation a:first-child{
margin-left: 0;
}

.navigation a:last-child{
margin-right: 0;
}

.navigation ul{
list-style: none;
width: 100%;
display: flex;
}


.navigation ul li{
margin: 0 12px;
}



.navigation ul li:first-child{
margin-left: 0;
}

.navigation li:last-child{
margin-right: 0;
}


.logo{
display: block;
margin-right: 170px;
}

.logo img{
width: 22px;
height: 18px;
}


.about{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding-top: 37px;
padding-bottom: 31.9px;
}

.about a{
text-decoration: none;
border: none;
margin-right: 12px;
}

.about i{
color: white;
background-color: #EE6C4D;
padding: 7px 0 0 1.5px;
border-radius: 50px;
font-size: 9.68px;
width: 22px;
height: 22px;
text-align: center;
}


.about p{
font-size: 8px;
color: #3D5A80;
width: 421px;
text-align:justify ;
line-height: 10px;
letter-spacing: -0.02em;
font-family: 'Quicksand', sans-serif;
}



.about-sec3{
display: flex;
width: 100%;
justify-content: center;
margin-top: 40px;
}



.about-sec3 .pic1{
display: flex;
width: 185px;
height: 186px;
justify-content: center;
}




.about-sec3 .pic1 img{
width: 100%;
height: 100%;
border-radius: 3px;
}


.about-sec3 .bio2{
display: flex;
flex-wrap: wrap;
width: 230px;
margin-left: 18px;
margin-top: -5px;
}

.bio h1,.bio2 h1{
font-size: 22px;
line-height: 28px;
font-family: 'Quicksand', sans-serif;
width: 100%;
color: #3D5A80;
}

.bio h2,.bio2 h2{
font-size: 15px;
line-height: 27px;
font-family: 'Quicksand', sans-serif;
width: 100%;
color: #3D5A80;
}


.bio2 p{
width: 100%;
font-size: 8px;
font-family: 'Quicksand', sans-serif;
color:#3D5A80;
line-height: 12px;
margin-top: 5px;
text-align:justify;
}


.p1{
display: flex;
align-items: center;
justify-content: center;
color:#EE6C4D;
font-family: 'Quicksand', sans-serif;
font-size: 8px;
line-height: 12px;
text-align: center;
font-weight: 800;
width: 100%;
margin-bottom: 15px;
padding-top: 36px !important;
}


.drawing{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
position: relative;
background-color: #e5e5e5;
color: #3D5A80;
padding-bottom: 20px;
}



.drawing .borderr{
display: block;
width: 5px;
background-color: #EE6C4D;
height: 67px;
border-top-right-radius:1.67px;
border-bottom-right-radius:1.67px;
}

.drawing .bor3{
height: 45px !important;
}


.drawing .text-draw{
display: flex;
flex-wrap: wrap;
width: 443px;
justify-content: space-between;
flex-direction: column;
color: #3D5A80;
text-align: justify;
margin-left: 6.32px;
}

.text-draw h1{
font-family: 'Quicksand', sans-serif;
font-size: 18px;
line-height: 27px;
width: 100%;
}

.text-draw p{
font-size: 8px;
line-height: 12px;
font-family: 'Quicksand', sans-serif;
letter-spacing: -0.01em;
}

.about-pic{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 35.62px;
margin-bottom: 40px;
}

.bottom-img-txt:hover{
cursor:default;
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}



.bottom-img-txt img{
width: 100%;
border-top-left-radius: 3.48px;
border-top-right-radius: 3.48px;
position: relative;
}

.about-pic .bottom-img-txt{
display: flex;
flex-wrap: wrap;
width: 133px;
height: 149px;
align-items: center;
justify-content: center;
border-radius: 3.48px;
margin: 0 14px;
transition: 0.2s ease all;
}



.bottom-img-txt:first-child{
margin-left: 0px;
}
.bottom-img-txt:last-child{
margin-right: 0;
}



.bottom-img-txt p{
width: 100%;
height: 19.92px;
background-color: white;
font-family: 'Quicksand', sans-serif;
font-size: 10px;
line-height: 12px;
font-weight: 600;
padding-left: 10px;
padding-top: 4px;
border-radius: 1.74px;
color: #3D5A80;
position: relative;
bottom: 2px;
}


.social-media{
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #3D5A80;
padding-top: 21px;
padding-bottom: 24.48px;
justify-content: center;
}

.social-media .social-title{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
line-height: 18px;
font-family: 'Quicksand', sans-serif;
}

.social-media .social-adresses{
display: flex;
flex-wrap: wrap;
width: 455px;
align-items: center;
margin-top: 11px;
}

.adresses a{
display: flex;
flex-wrap: wrap;
align-items: center;
color: white;
font-size: 8px;
line-height: 10px;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
transition: all ease .3s;
}



.adresses{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
margin:  0 10px;
}


.adresses:first-child{
margin-left: 0;
}

.adresses:last-child{
margin-right: 0;
}


.adresses img{
margin-right: 4.79px;
width: 17.42px;
height: 17.42px;
}

.social-media p{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
color: white;
justify-content: center;
font-size: 14px;
line-height: 18px;
font-family: 'Quicksand', sans-serif;
}

.drawing .borr4{
height: 66px !important;
margin-top: 5px;
}

#tablet-style{
/* marbut be ghesmate work experience p tag*/
letter-spacing: -0.02em !important;
}


.work-exp{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
padding-bottom: 38px;
background-color: #e5e5e5;
}

.work-exp .p{
text-align: center;
color:#EE6C4D;
font-family: 'Quicksand', sans-serif;
font-size: 8px;
font-weight: bold;
width: 100%;
line-height: 10px;
}


.work-exp h1{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
width: 100%;
line-height: 25px;
font-weight: 700;
text-align: center;
margin-bottom: 25px;
color:#3D5A80;
}

.work-exp .works{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 455px;
}

.works .work-orange,
.works .work-white{
display: flex;
flex-direction: column;
width: 220px;
border-radius: 4px;
padding-bottom: 17px;
transition: 0.3s ease all;
}

.works .work-orange:hover,
.works .work-white:hover{
cursor:default;
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}


.work-orange{
margin-right: 15px;
}

.work-orange:first-child{
margin-bottom: 15px;
}

.work-white:nth-child(2){
margin-bottom: 15px;
}


.work-orange{
background-color: #EE6C4D;
}

.work-white{
background-color:white;
}



.work-orange:nth-child(3){
background-color: white !important;
}

.work-white:nth-child(4){
background-color: #EE6C4D !important;
}

.work-orange:nth-child(3) p{
color: black;
}

.work-white:nth-child(4) p{
color: white;
}


#h4-blk{
color: black !important ;
}

#h4-blk2{
color: black !important ;
}



#h4-wht{
color: white !important ;
}

#h4-wht2{
color: white !important ;
}



.work-orange img,.work-white img{
width: 30px;
height: 30px;
}

.orwh-1 p{
font-size: 8px;
line-height: 10px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
}

.work-orange p{
color: white;
}

.work-white p{
color: black;
}



.orwh-2 p{
font-size: 8px;
font-family: 'Quicksand', sans-serif;
line-height: 10px;
text-align: justify;
letter-spacing: -0.05em;
hyphens:auto;
}

.orwh-1{
display: flex;
width: 100%;
justify-content: left;
align-items: center;
padding:5px 5px;
margin-bottom: 17px;
}

.work-orange .orwh-1 div h4{
color: white;
font-size: 12px;
line-height: 15px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
}

.work-white .orwh-1 div h4{
color: black;
font-size: 12px;
line-height: 15px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
}


.orwh-1 div{
display: flex;
flex-direction: column;
margin-left: 3px;
padding-left: 3px;
}



.orwh-2{
display: block;
padding:0 13px;
}

.work-orange .orwh-2 h4{
font-size: 10px;
line-height: 12px;
color: white;
font-family: 'Quicksand', sans-serif;
margin-bottom: 8px;
}

.work-white .orwh-2 h4{
font-size: 10px;
line-height: 12px;
font-family: 'Quicksand', sans-serif;
margin-bottom: 8px;
}


.contact-me{
display:flex;
width: 100%;
height: 202px;
background-color: white;
justify-content: center;
}


.contact-me .left-contact{
display: flex;
height: 100%; 
}

.left-contact img{
width: 100%;
height: 100%;
object-fit:cover;
}


#img-L{
display: block;
}



#img-M{
display: none;
}

.social-banner#social-banner-mob{
display: none;
}


.contact-me .right-contact{
display: flex;
justify-content: space-between;
flex-direction: column;
width: 380px;
}

.right-contact .first-right{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: left;
}

.first-right h3{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
width: 100%;
line-height: 10px;
margin-top: 18px;
margin-left: 15px;
color: #3D5A80;
}

.first-right p{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
width: 100%;
line-height: 10px;
margin-top: 8px;
margin-left: 15px;
color: #3D5A80;
}

.sec-right{
display: flex;
flex-wrap: wrap;
align-items: center;
padding-top: 8px;
}

.sec-right .sec-content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
margin-left: 15px;
}
.sec-content h3{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
line-height: 14px;
color: #3D5A80;
}

.sec-right p{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
line-height: 10px;
color: #3D5A80;
}


.right-contact .last-right{
display: flex;
flex-wrap: wrap;
margin-left: 15px;
margin-top: 9px;
}



.last-right form{
display: flex;
flex-wrap: wrap;
justify-content: left;
flex-direction: column;
}

.last-right form div input[id="name"],
.last-right form div input[id="email"]{
width: 116px;
padding: 5px;
font-size: 8px;
height: 18px;
font-family: 'Quicksand', sans-serif;
outline: none;
background-color: #F5F7F999;
opacity: 0.3;
border-radius: 4px;
border:none;
color: #3D5A80;
}


.last-right form div input[id="email"]{
margin-left: 7px;
}


.last-right form input[id="subject"]{
padding: 5px;
opacity: 0.3;
outline: none;
background-color: #F5F7F999;
font-size: 8px;
font-family: 'Quicksand', sans-serif;
border-radius: 4px;
border:none;
width: 235px;
height: 18px;
margin-top: 3px;
color: #3D5A80;
}

.last-right form textarea[id="textarea"]{
outline: none;
opacity: 0.3;
border-radius: 4px;
resize: none;
border: none;
width: 235px;
background-color: #F5F7F999;
margin-top: 3px;
height: 33px;
padding: 5px;
font-size: 8px;
font-family: 'Quicksand', sans-serif;
color: #3D5A80;
}

.last-right form input[id="submit"]{
padding: 2px 4px;
outline: none;
border-radius: 4px;
border: none;
width: 62px;
height: 20px;
margin-top: 3px;
margin-bottom: 20px;
cursor: pointer;
background-color: #EE6C4D;
color: white;
font-size: 8px;
line-height: 10px;
font-family: 'Quicksand', sans-serif;
transition: all .3s ease;
}

.last-right form input[id="submit"]:hover{
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}



#status {
  width: 90%;
  max-width: 80px;
  text-align: center;
  font-size: 10px;
  padding: 5px;
  margin: 0 auto;
  border-radius: 4px;
font-family: 'Quicksand', sans-serif;
}



#status.success {
  background-color: rgb(193, 255, 101);
  animation: status 4s ease forwards;
}
#status.error {
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}
@keyframes status {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  90% {
    opacity: 1;
    pointer-events: all;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

.social-banner{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 60px;
background-color: #EE6C4D;
align-items: center;
color: white;
justify-content: center;
}

.social-banner .bann-content{
width: 236.13px;
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: #EE6C4D;
font-family: 'Quicksand', sans-serif;
color: white;
}

.bann-content h3{
font-size: 10px;
line-height: 12px;
letter-spacing: -0.02em;
font-family: 'Quicksand', sans-serif;
}

.bann-content button{
background-color:#3D5A80;
font-family: 'Quicksand', sans-serif;
color:white;
border-radius: 4px;
width: 53.99px;
border: none;
outline: none;
padding: 2px 5px;
margin-left: 5px;
font-size: 8px;
line-height: 10px;
font-weight: 800;
cursor: pointer;
margin-top: 4px;
transition: all ease .3s;
height: 18.29px;
}

.bann-content a{
text-decoration: none;
text-align: center;
height: 18.29px;
}

.bann-content button:hover{
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}

.bann-content p{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
line-height: 10px;
width: 70%;
}


footer{
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #3D5A80;
justify-content: center;
padding-top: 23px;
padding-bottom: 25px;
}

.foot-wrapper{
display: flex;
justify-content: space-between;
width: 320.52px;
height: 95px;
}


.left-foot .foot-logo{
display: block;
margin-bottom: 2.68px;
}

.left-foot .foot-logo img{
width: 18.41px;
height: 18.67px;
}

.left-foot{
display: flex;
width: 87.52px;
height:80px;
flex-direction: column;
justify-content: space-between;
}

.left-foot p{
font-size: 7px;
font-family: 'Quicksand', sans-serif;
color: white;
line-height: 10px;
text-align: justify;
letter-spacing: -0.02em;
margin-top: 5px;
margin-bottom: 5px;
}

.left-foot h3{
font-family: 'Quicksand', sans-serif;
color: white;
font-size: 7.83px;
line-height: 10px;
letter-spacing: 0.01em;
}

.left-foot .foot-pic{
display: flex;
flex-wrap: wrap;
justify-content:safe;
}

.foot-pic a{
text-decoration: none;
margin-right: 5.23px;
}


.foot-pic img{
width: 13.06px;
height: 13.06px;
border-radius: 50px;
}

footer .center-right{
display: flex;
justify-content: center;
width: 200px;
}

footer .center-right .center-foot, 
footer .center-right .right-foot{
display: flex;
justify-content:left;
flex-direction: column;
}

footer .center-right .right-foot{
width: 160px;
display: flex;
flex-direction: column;
height: 80px;
}

footer .center-right .center-foot{
display: flex;
flex-direction: column;
width: 140px;
height: 60px;
}



.center-foot h1 , .right-foot h1{
font-family: 'Quicksand', sans-serif;
color: white;
width: 100%;
font-size: 7.83px;
line-height: 9.8px;
margin-bottom: 8px;
margin-top: 8px;
}




.center-foot a::before,
.right-foot a::before{
content: "\2022";
font-weight: bold;
color: #EE6C4D;
margin-right: 2px;
}

.center-foot a ,.right-foot a{
text-decoration: none;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 7.83px;
margin-left: 3.48px;
width: 100%;
}



.foot-bottom{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
background-color: #304662;
padding: 8px 0;
}

.foot-bottom h3{
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 6px;
letter-spacing: 0.12em;
line-height: 10%;
font-weight:normal;
}





}