@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;
align-items: center;
justify-content: center;
width: 100%;
background-color: #EE6C4D;
}

.name img{
width: 100%;
}





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

.drawing-tablet{
padding-top: 0 !important;
}




.border-text{
display: flex;
justify-content: center;
width: 100%;
}


.drawing .borderr{
display: block;
width: 4px;
background-color: #EE6C4D;
height: 51px !important;
border-top-right-radius:1.67px;
border-bottom-right-radius:1.67px;
}


.drawing #borr-char{
margin-top: 5px;
height: 51px !important;
}

.drawing #borr-bill{
height: 80px !important;
margin-top: 7px !important;
}



.borderr#borr-tech{
margin-top: 5px;
height: 65px !important;
}


.borderr#borr-story{
margin-top: 6px;
height: 70px !important;
}



.borderr#logo-borr{
margin-top: 6px;
height: 70px !important;
}


.borderr#station-borr{
margin-top: 6px;
height: 60px !important;
}





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

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

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



.experienc{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 296px;
background-color: #e5e5e5;
padding-bottom: 24px;
margin-top: 24px;
}


/*light box CSS*/

.lightbox-container{
display: flex;
width: 100%;
position: fixed;
height: 1200px;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
margin-top: -120px;
justify-content: center;
}

.lightbox-none{
display: none;
}

.img-container-none{
display: none;
}



.lightbox-content{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
position: relative;
}

.img-container{
justify-content: center;
align-items: center;
display: flex;
width: 220px;
height: 240px;
position: relative;
border-radius: 8px;
}


.img-container2{
display: flex;
flex-wrap: wrap;
width:250px;
height: 100px;
position: relative;
border-radius: 8px;
}


.img-container2 img{
display: flex;
margin: 0;
width: 100%;
border-top-left-radius:8px;
border-top-right-radius:8px;
}


.img-container img{
display: block;
margin: 0;
height: 100%;
border-radius: 4px;
}

.img-container h4{
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #EE6C4D;
font-size: 22px;
font-family: 'Quicksand', sans-serif;
align-items: center;
justify-content: center;
height: 80px;
margin: 0;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}


.fa-angle-right{
position: absolute;
left: 220px;
bottom: 110px;
background-color:#EE6C4D;
font-size: 20px;
padding: 8px 14px;
width: 35px;
height: 35px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}

.Rnum2{
position: absolute;
left: 243px;
bottom: 5px;
background-color:#EE6C4D;
font-size: 14px;
padding: 6px 7px;
width: 25px;
height: 25px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}



.fa-angle-left{
position: absolute;
bottom: 110px;
right: 230px;
background-color: #EE6C4D;
font-size: 20px;
padding: 8px 12px;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
}


.Lnum2{
position: absolute;
bottom: 5px;
right: 254px;
background-color: #EE6C4D;
font-size: 14px;
padding: 6px 8px;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}



.fa-xmark{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 10px;
padding: 3px 4.5px;
border-radius: 50%;
cursor: pointer;
bottom: 220px;
width: 15px;
height: 15px;
left: 190px;
}


.xmark5{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 10px;
padding: 3px 4.5px;
border-radius: 50%;
cursor: pointer;
bottom: 80px;
width: 15px;
height: 15px;
left: 220px;
}


.xmark3{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 10px;
padding: 3px 4.5px;
border-radius: 50%;
cursor: pointer;
bottom: 220px;
width: 15px;
height: 15px;
left: 190px;
}


.xmark4{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 10px;
padding: 3px 4.5px;
border-radius: 50%;
cursor: pointer;
bottom: 220px;
width: 15px;
height: 15px;
left: 190px;
}


/* End of light box CSS*/


.exp-L-img{
display: flex;
width: 90px;
height: 102px;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 13px;
margin-right: 13px;
transition: all ease 0.3s;
}



.exp-mobile{
display: flex;
width: 128px !important;
height: 157px !important;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 20px;
transition: all ease 0.3s;
margin-right: 0;
}


.exp-mobile:nth-child(2){
margin-right: 20px !important;
}

.exp-mobile:nth-child(4){
margin-right: 20px !important;
}

.exp-mobile:nth-child(6){
margin-right: 20px !important;
}


.exp-mobile:nth-child(6){
margin-bottom: 0px !important;
}

.exp-mobile:nth-child(7){
margin-bottom: 0px !important;
}





.exp-L-img:hover{
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}

.exp-L-img:last-child{
margin-right: 0;
}

.exp-L-img:nth-child(4){
margin-right: 0;
}

.exp-L-img:nth-child(7){
margin-right: 0;
}

.experienc .exp-img{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
width: 100%;
height: 102px;
object-fit: cover;
}


.exp-img-mobile{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
width: 100%;
height: 157px !important;
object-fit: cover;
}


.exp-L-img .exp-img img{
display: flex;
height: 100%;
border-radius: 4px;
object-fit: cover;
}


.logo-txt2{
display: flex;
flex-wrap: wrap;
width: 100%;
color: #3D5A80;
background-color: white;
flex-direction: column;
border-bottom-left-radius: 4px ;
border-bottom-right-radius: 4px ;
padding: 0 10px;
height: 22px;
justify-content: center;
}


.logo-txt2 h3{
font-size: 9px;
line-height: 11px;
letter-spacing: -0.04em;
font-family: 'Quicksand', sans-serif;
}


.drawing .content-draw{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 297px;
}


.drawing#stationery{
padding-top: 20px;
}




.content-draw .draws-stationary{
display: flex;
align-items: center;
flex-direction: column;
margin-right: 20px;
width: 138px;
height: 112px;
background-color: white;
border-radius: 4px;
margin-bottom: 0px !important;
}

.content-draw .draws-stationary:nth-child(2){
margin-right: 0px;
}

.content-draw .draws-stationary:nth-child(4){
margin-right: 0px;
}

.draws-stationary.first-draw-mobile{
margin-bottom: 20px !important;
}




.draws-stationary img{
height: 100%;
border-radius: 4px;
position: relative;
object-fit: cover;
}



.experienc-station{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
background-color: #e5e5e5;
padding-bottom: 20px;
padding-top: 25px;
}


.logo-txt{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 32px !important;
color: #3D5A80;
background-color: white;
flex-direction: column;
border-radius: 4px ;
justify-content: center;
position: relative;
bottom: 6px ;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
padding-bottom: 0px;
}


.logo-txt.logo-txt-mobile{
padding-top: 3px;
}

.logo-txt.logo-txt-mobile-2{
padding-top: 3px;
padding-bottom: 3px;
height: 32px !important;
}


.logo-txt p{
font-size: 5px;
width:100%;
line-height: 6px;
font-family: 'Quicksand', sans-serif;
text-align: left;
}

.logo-txt h3{
width: 100%;
font-size: 5.7px;
line-height: 7px;
font-family: 'Quicksand', sans-serif;
text-align: left;
}




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




.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: 244px;
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: 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%;
}





/* video section */


.motion-section{
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #e5e5e5;
justify-content: center;
align-items: center;
padding-top: 21px !important;
}



.text-motion{
display: flex;
color: #3D5A80;
width: 288px !important;
align-items: center;
justify-content: center;
flex-direction: column;
margin-left: 5px;
}

.motion-section .borderr{
display: block;
width: 4px;
background-color: #EE6C4D;
height: 57px;
margin-top: 4px;
border-top-right-radius:1.33px;
border-bottom-right-radius:1.33px;
}


.borderr#motion-borr{
height: 57px;
}

.borderr#stop-borr{
height: 68px;

}



.text-motion h1{
font-family: 'Quicksand', sans-serif;
font-size: 8px;
line-height: 12px;
width: 100%;
}

.text-motion p{
font-size: 7px;
width:100%;
line-height: 9px;
text-align: justify;
font-family: 'Quicksand', sans-serif;
}


.content-motion{
display: flex;
flex-wrap: wrap;
width: 90%;
align-items: center;
justify-content: center;
margin-top: 40px;
background-color: #e5e5e5;
}



.vid{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
background-color: #e5e5e5;
padding: 25px 0;
}

.back-div{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
flex-direction: column;
}


.video-container{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 185px;
height: 150px;
position: relative;
background-color: white;
border-radius: 4px;
margin-bottom: 25px;
margin-right: 0 !important;
}


.video-L-container{
display: flex;
justify-content: center;
width: 100%;
height: 1200px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
padding-top: 80px;
background-color: rgba(26, 26, 26, 0.5);
border-radius: 4px;
}

.video-L-container video{
background-color: black;
border-radius: 4px;
box-shadow: rgba(247, 247, 247, 0.616) 0px 7px 29px 0px;
}


video{
width: 185px;
border-radius: 4px;
}

.vid-div{
display: flex;
flex-wrap: wrap;
position: relative;
flex-direction: column;
overflow: hidden;
height: 104px;
border-radius: 4px;
}

.video-L-container .video-tools{
width: 282px;
bottom: 502px;
height: 80px;
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-top: 10px;
position: absolute;
background-color: #EE6C4D;
border-radius: 4px;
}


.video-L-container video{
width: 100%;
height: fit-content;
border-radius: 8px !important;
}


.video-L-container video#lucky{
width: 280px !important;
}

.vid-div #lucky-close{
left: 245px !important;
}

.video-L-container .video-tools#yalda{
width: 282px !important;
margin-left: 0;
bottom: 808px;
}

.video-L-container video#video-yalda{
width: 280px;
margin-top: 80px;
}



.video-L-container .video-tools#lucky-tools{
bottom: 757px !important;
width: 282px;
margin-left: 0;
}


.video-L-container video#video-advertise{
width: 288px;
}



.video-L-container .video-tools#leadmarket-tools{
bottom: 800px !important;
width: 290px;
margin-left: 0;
}

.video-L-container #lead-close{
top: 85px;
}


.video-L-container video#video-lead{
width: 288px;
margin-top: 80px;
}



.video-L-container #yalda-close{
left: 250px;
top: 83px;
}


.video-L-container .video-tools#advertise-tools{
margin-left: 0;
bottom: 800px;
width: 288px;
}


.video-L-container #vid-div-adver{
margin-top: 80px;
}


.video-L-container .ply#adver-pause{
top: 55px;
left: 110px;
}


.video-L-container .pause#adver-pause{
top: 55px;
left: 110px;
}


.video-container h3{
font-size: 20px;
font-family: 'Quicksand', sans-serif;
margin-left: 10px;
}


.ply{
position: absolute;
top: 33px;
left: 70px;
text-align: center;
font-size: 13px;
width: 26.96px;
height: 27.38px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 7px 0 0 1.5px; 
border-radius: 50%;
}

.video-L-container .ply#ply-lucky{
position: absolute;
top: 120px;
left: 105px;
text-align: center;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 15px 18px;
border-radius: 50%;
}

.video-L-container .pause.pause-lucky{
top: 120px !important;
left: 105px !important;
}



.video-L-container .ply{
position: absolute;
top: 130px;
left: 105px;
text-align: center;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 15px 18px;
border-radius: 50%;
}




.pause{
position: absolute;
top: 130px;
left: 105px;
text-align: center;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 16px 0px; 
border-radius: 50%;
}




.btn-none{
display: none;
}


.vid-div button{
border: none;
outline: none;
appearance: none;
}


i{
cursor: pointer;
margin-left: 10px;
}

.vid-div .video-close{
position: absolute;
top: 5px;
left: 255px;
font-size: 10px;
color: white;
background-color: #3D5A80;
width: 18px;
height: 18px;
text-align: center;
padding-top: 3.5px;
padding-left: 6.5px;
}



.video-tools{
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-top: 10px;
position: absolute;
background-color: #EE6C4D;
border-radius: 8px;
color: #3D5A80;
}

.none{
display: none;
}


.video-tools .h-4{
font-size: 20px;
font-family: 'Quicksand', sans-serif;
background-color: #EE6C4D;
margin-left: 10px;
}

.none4{
display: none;
}



.video-tools .duration{
display: flex;
flex-wrap: wrap;
appearance: none;
height: 4px;
outline: none;
border: none;
background-color: #3D5A80;
border-radius: 100px;
cursor: pointer;
position: relative;
}

.duration::after{
content: ' ';
width: 4px;
height: 8px;
border-radius: 5px;
background-color: #3D5A80;
position: absolute;
right: -2px;
top: -2px;
}

.back-dur{
display: flex;
flex-wrap: wrap;
width: 97%;
height: 4px;
border-radius: 100px;
background-color: white;
margin: 0 8px;
cursor: pointer;
position: relative;
}


.back-sound input{
display: flex;
appearance: none;
position: absolute;
left: 0px;
top: -1px;
width: 100%;
border: none;
outline: none;
height: 7px;
background-color: transparent;
cursor: pointer;
z-index: 99;
border-radius: 50px;
}

.back-sound input::-webkit-slider-thumb{
appearance: none;
outline: none;
border: none;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
width:3px;
height: 5px;
background-color: #3D5A80;
}

.back-sound .vol-progress{
width: 90px;
height: 5px;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
overflow: hidden;
background-color: #3D5A80;
}

.back-sound .vol-progress::-webkit-progress-bar{
background-color: white;
}

.back-sound .vol-progress::-webkit-progress-value{
background-color: black;
}



.back-sound{
display: flex;
flex-wrap: wrap;
width: 90px;
position: relative;
height: 5px;
background-color:white;
cursor: pointer;
margin-left: 8px;
margin-top: 7px;
border-radius: 50px;
}


.video-txt{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 62px;
justify-content: left;
padding: 5px 5px;
color: #3D5A80;
}

.video-txt p{
font-size: 7px;
line-height: 9px;
padding: 1px 10px;
text-align: justify;
hyphens: auto;
color: #3D5A80;
font-family: 'Quicksand', sans-serif;
}


.video-txt #p-history-video{
letter-spacing: -0.08em;
}


.video-txt #p-marketing-video{
letter-spacing: -0.05em;
}




.video-txt h3{
font-size: 8px;
line-height: 12px;
font-family: 'Quicksand', sans-serif;
}

/* end video section */




.work-skills{
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #e5e5e5;
align-items: center;
justify-content: center;
padding-top: 23px;
border-bottom: 5px solid #EE6C4D!important ;
}

.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: 500;
padding-bottom: 21px;
}

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

.work-skills .skills{
display: flex;
width: 297px;
flex-wrap: wrap;
padding-bottom: 14px;
justify-content: left;
background-color: inherit;
}

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

.bar {
display: block;
background-color: #eeeeee;
border: 10px;
overflow: hidden;
transition: all .5s ease;
height: 7px;
border-radius: 1.74px;
width: 75%;
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;
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-media#social-peggy{
display: none;
}

.social-banner#social-bann-mob{
display: flex;
}


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








}