@media(max-width:480px){


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

.container{
display: flex;
flex-wrap: wrap;
background-color: #e5e5e5;
align-items: center;
justify-content: 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;
}



/* Start => css hamburger menu */
nav .hamburger{
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 22px;
height: 18px;
z-index: 99;
cursor: pointer;
position: relative;
top: 0px;
right: 0px;
}

.hamburger span{
display: block;
background-color:#3D5A80;
width: 100%;
height: 4px;
border-radius:12px ;
transition: all .3s ease;
}

.hamburger:hover span:nth-child(2){
transform: translateX(12px);
} 

.hamburger.active span:nth-child(1){
transform: translate(0,8px) rotate(-45deg)
} 

.hamburger.active span:nth-child(2){
opacity: 0;
} 

.hamburger.active span:nth-child(3){
transform: translate(0px,-4px) rotate(45deg);
} 

nav .show{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-height: 200px;
background-color: #EE6C4D;
padding: 0 20px;
}

/* End => css hamburger menu */





.navigation{
overflow: hidden;
max-height: 0;
padding: 0px 20px;
transition: all .3s ease;
position: fixed;
flex-direction: column;
justify-content: space-between;
width: 100%;
top: 40px;
left: 0;
}


.navigation.show{
height: 160px;

}

.navigation ul li{
margin: 0;
}


.navigation ul {
flex-direction: column;
width: fit-content;
}



.navigation ul li a{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
color: white;
font-size: 12px;
font-family: 'Quicksand', sans-serif;
letter-spacing: 5px;
margin: 9px 0;
}


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

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


.name{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
background-color: #EE6C4D;
padding-top: 20px;
}


.name h1{
width: 100%;
font-size: 34px;
line-height: 42px;
letter-spacing: 0.02em;
color: white;
text-align: center;
font-size: 700;
font-family: 'Quicksand', sans-serif;
padding-bottom: 23px;
}

.name p{
text-align: center;
width: 100%;
font-family: 'Quicksand', sans-serif;
font-size: 11px;
line-height: 14px;
color: white;
letter-spacing: -0.02em;
}

.name img{
width: 100%;
}


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

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

.about i{
color: white;
background-color: #EE6C4D;
padding: 6px 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: 268px;
text-align:justify ;
line-height: 12px;
letter-spacing: -0.02em;
font-family: 'Quicksand', sans-serif;
}



.about-sec2{
display: flex;
width: 100%;
justify-content: center;
flex-direction: column;
align-items: center;
}



.about-sec2 .pic{
display: flex;
flex-direction: column;
align-items: center;
width: 185px;
height: 183px;
justify-content: center;
}




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


.about-sec2 .bio{
display: flex;
flex-wrap: wrap;
width: 253px;
margin-top: 20px;
position: relative;
}

.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;
}


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

.bio button{
display: flex;
padding: 5px;
border: none;
border-radius: 3px;
background-color: #EE6C4D;
color: white;
text-align: center;
font-size: 8px;
line-height: 10px;
width: 62px;
height: 20px;
justify-content: center;
align-items: center;
outline: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
position: relative;
left: 87px;
}


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



.books{
display: flex;
flex-wrap: wrap;
width: 297px;
align-items: center;
justify-content: center;
background-color: #e5e5e5;
padding-top: 0;
padding-bottom: 20px;
}

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



.books h1{
width: 100%;
text-align: center;
font-size: 16px;
line-height: 20px;
font-family: 'Quicksand', sans-serif;
color: #3D5A80;
letter-spacing: -0.01em;
}

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


.book-container{
display: flex;
flex-wrap: wrap;
width: 138px;
margin-top: 16px !important;
align-items: center;
justify-content: center;
padding-right: 0;
padding-left: 0;
margin-right: 20px;
margin-left: 0;
}

.book-container#mobile-book{

margin-right: 0;
}




.book-img-container{
display: flex;
width: 100%;
position: relative;
border-radius: 8px;
margin-top: 20px;
}


.book-img-container img{
width: 100%;
border-radius: 2.8px;
}


.book-img-container .over-lay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
background-color: #ee6d4de5;
color: white;
opacity: 0;
font-family: 'Quicksand', sans-serif;
display: flex;
transition: opacity .4s ease ;
border-radius: 2.5px;
cursor: pointer;
}

.book-img-container .over-lay a{
text-decoration: none;
color: white;
}


.book-img-container .over-lay:hover{
opacity: 1;
}

.over-lay .exp-title{
font-size: 16px;
padding-left: 10px;
padding-top: 10px;
font-family: 'Quicksand', sans-serif;
}

.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;
width: 254px;
align-items: center;
justify-content: space-between;
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:  8px 0  ;
}


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


.adresses:nth-child(2){
margin-top: 0;
}


.adresses:nth-child(3){
margin-bottom: 0;
}



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


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




.work-exp{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
padding-bottom: 38px;
padding-top: 30px;
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: 16px;
width: 100%;
line-height: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 24px;
color:#3D5A80;
}

.work-exp .works{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 254px;
}

.works .work-orange,
.works .work-white{
display: flex;
flex-direction: column;
width: 254px;
border-radius: 4px;
padding-bottom: 15px;
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: 0px;
}


.work-orange:nth-child(3){
margin-bottom: 10px;
}



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



.works .work-white{
background-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 !important;
}

.work-white p{
color: black !important;
}


.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 !important;
font-size: 12px;
line-height: 15px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
}

.work-white .orwh-1 div h4{
color: black !important;
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 !important;
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;
}


.orwh-1 div h4#h4-blk{
color: white !important;
}

.orwh-2 h4#h4-blk2{
color: white !important;

}



.orwh-2 h4#h4-wht2{
color: black !important;
}

.orwh-1 div h4#h4-wht{
color: black !important;
}



.work-skills{
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
background-color: #e5e5e5;
align-items: center;
justify-content: center;
}

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

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

.skills li img{
border-radius: 4px;
width: 25px;
height: 25px;
margin-right: 6px;
}

.work-skills .skills{
flex-direction: column;
display: flex;
flex-wrap: wrap;
width: 297px;
align-items: center;
justify-content: center;
background-color: inherit;
height: 180px;
padding-left: 0;
padding-bottom: 0!important;
}

.skills li{
list-style: none;
width: 148px;
margin: 5px 0;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}


.skills div#div-1{
margin-right: 0 !important;
}


.skills div{
display: flex;
flex-direction: column;
padding-left: 0 !important;
}

.bar {
display: block;
background-color: #eeeeee;
border: 10px;
overflow: hidden;
transition: all .5s ease;
height: 7px;
border-radius: 3px;
width: 107px;
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}

.bar span{
height: 7px;
float: left;
background : #3D5A80;
}

.ps{
width: 100%;
animation: ps 3s;
}


.au{
width: 45%;
animation: au 3s;
}


.ai{
width: 100%;
animation: ai 3s;
}


.me{
width: 45%;
animation: me 3s;
}



.ae{
width: 70%;
animation: ae 3s;
}


.id{
width: 55%;
animation: id 3s;
}



.pr{
width: 60%;
animation: pr 3s;
}


.fi{
width: 70%;
animation: fi 3s;
}





@keyframes ps{
0%{
width: 0%;
}
100%{
width: 100%;
}
}


@keyframes au{
0%{
width: 0%;
}
100%{
width: 45%;
}
}



@keyframes ai{
0%{
width: 0%;
}
100%{
width: 100%;
}
}


@keyframes me{
0%{
width: 0%;
}
100%{
width: 45%;
}
}



@keyframes ae{
0%{
width: 0%;
}
100%{
width: 70%;
}
}


@keyframes id{
0%{
width: 0%;
}
100%{
width: 55%;
}
}



@keyframes pr{
0%{
width: 0%;
}
100%{
width: 60%;
}
}


@keyframes fi{
0%{
width: 0%;
}
100%{
width: 70%;
}
}



.contact-me{
display:flex;
width: 100%;
height: 360px;
background-color: white;
justify-content: center;
padding-top: 0 !important;
margin-top: 40px;
flex-direction: column;
align-items: center;
}


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


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


#img-L{
display: none;
}



#img-M{
display: block;
}



.contact-me .right-contact{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center ;
width: 319px;
height: 240px;
}


.right-contact .first-right{
display: flex;
width: 100% ;
justify-content: center !important;
align-items: center !important;
}

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

}

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

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

.sec-right .sec-content{
display: flex;
justify-content: space-between;
flex-direction: column;
margin-left: 12px !important;
}
.sec-content h3{
font-family: 'Quicksand', sans-serif;
font-size: 10px;
line-height: 18px;
color: #3D5A80;
}

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


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



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

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


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


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

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

.last-right form input[id="submit"]{
padding: 2px 4px;
outline: none;
border-radius: 5px;
border: none;
width: 80px;
height: 25.06px;
margin-top: 12px;
margin-bottom: 20px;
cursor: pointer;
background-color: #EE6C4D;
color: white;
font-size: 8px;
line-height: 13px;
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: 290px;
display: flex;
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: 62px;
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: 20px;
}

.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;
width: 100%;
background-color: #3D5A80;
justify-content: center;
padding-top: 23px;
padding-bottom: 25px;
}

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


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

.left-foot .foot-logo img{
width: 16.41px;
height: 14.67px;
}

.left-foot{
display: flex;
width: 87.52px;
height:70.69px;
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: left;
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;
margin-right: 10px;
margin-left: 10px;
}



.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;
}





}