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

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

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



.drawing #borr-tech{
margin-top: 8px;
}


.drawing #borr-story{
margin-top: 8px;
}


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



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


/*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;
align-items: center;
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: 280px;
height: 320px;
position: relative;
border-radius: 8px;
margin-top: -450px;
}


.img-container2{
display: flex;
flex-wrap: wrap;
width:380px;
height: 263px;
position: relative;
border-radius: 8px;
margin-top: -660px;
}


.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;
width: 100%;
border-top-left-radius:8px;
border-top-right-radius:8px;
}

.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: 290px;
bottom: 135px;
background-color:#EE6C4D;
font-size: 25px;
padding: 14px 16px;
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}

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



.fa-angle-left{
position: absolute;
bottom: 135px;
right: 300px;
background-color: #EE6C4D;
font-size: 25px;
padding: 14px 16px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}


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



.fa-xmark{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 21px;
padding: 5px 8.5px;
border-radius: 50%;
cursor: pointer;
bottom: 280px;
width: 30px;
height: 30px;
left: 235px;
}


.xmark5{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 21px;
padding: 5px 8.5px;
border-radius: 50%;
cursor: pointer;
bottom: 226px;
width: 30px;
height: 30px;
left: 334px;
}


.xmark3{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 21px;
padding: 5px 8.5px;
border-radius: 50%;
cursor: pointer;
bottom: 278px;
width: 30px;
height: 30px;
left: 235px;
}


.xmark4{
position: absolute;
background-color: #3D5A80;
color: #c4c4c4;
font-size: 21px;
padding: 5px 8.5px;
border-radius: 50%;
cursor: pointer;
bottom: 278px;
width: 30px;
height: 30px;
left: 235px;
}


/* End of light box CSS*/


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

.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;
width: 138px;
height: 156px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}


.exp-img img{
display: block;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}


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





.content-draw .draws-stationary{
display: flex;
align-items: center;
flex-direction: column;
margin-right: 20px;
width: 217px;
height: 178px;
background-color: white;
border-radius: 4px ;
margin-bottom: 17px;
}

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

}

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


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



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


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

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

}

.logo-txt h3{
width: 100%;
font-size: 9px;
line-height: 11px;
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;
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;
}


.social-banner#social-bann-mob{
display: 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%;
}




/* video section */


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



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

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


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

.text-motion p{
font-size: 8px;
width:100%;
line-height: 10px;
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: 455px;
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%;
}


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

.video-container:nth-child(2){
margin-right: 0;
}

.video-container:last-child{
margin-right: 0;
}


.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: 140px;
background-color: rgba(26, 26, 26, 0.5);
border-radius: 4px;
}

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


video{
width: 218px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

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

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


.video-L-container video{
width: 100%;
height: 243px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}


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

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

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


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


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

.video-L-container #yalda-close{
left: 400px;
}


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



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


.ply{
position: absolute;
top: 33px;
left: 85px;
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{
position: absolute;
top: 90px;
left: 190px;
text-align: center;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 14px 18px;
border-radius: 50%;
}




.pause{
position: absolute;
top: 90px;
left: 190px;
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: 10px;
left:390px;
font-size: 15px;
color: white;
background-color: #3D5A80;
width: 25px;
height: 25px;
text-align: center;
padding-top: 7px;
padding-left: 8px;
}



.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;
flex-wrap: wrap;
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: 50%;
}

.back-sound input::-webkit-slider-thumb{
appearance: none;
outline: none;
border: none;
border-radius: 50%;
width:8px;
height: 5px;
background-color: #3D5A80;
}

.back-sound .vol-progress{
width: 90px;
height: 5px;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-radius: 40px;
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%;
justify-content: left;
padding: 7px 7px;
color: #3D5A80;
}

.video-txt p{
font-size: 8px;
line-height: 10px;
padding: 10px 10px;
text-align: justify;
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: 9px;
line-height: 13px;
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;
}

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

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

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

.skills li{
list-style: none;
width: 220px;
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: 85%;
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: 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-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;
  }
}


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




}