@media(min-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: 94px;
justify-content: center;
top: 0;
z-index: 99;
padding-top: 28px;
padding-bottom: 22px;
align-items: center;
}

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

.navigation a{
text-decoration: none;
color: white;
font-size: 18.29px;
font-weight: 700;
font-family: 'Quicksand', sans-serif;
border: none;
line-height: 22.86px;
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 19px;
}



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

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


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

.logo img{
width: 50px;
height: 44px;
}


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


.name h1{
font-size: 122px;
color: white;
font-family: 'Quicksand', sans-serif;
}

.name p{
font-family: 'Quicksand', sans-serif;
font-size: 40px;
color: white;
}

.name img{
width: 100%;
}

/* frame2 css */

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



.drawing .borderr{
display: block;
width: 12px;
background-color: #EE6C4D;
height: 140px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}


.borderr#borr-char{
margin-top: 8px;

}


.borderr#borr-tech{
height: 120px;
margin-top: 8px;
}


.borderr#borr-story{
height: 120px;
margin-top: 8px;
}



.borderr#motion-borr{
height: 125px;
margin-top: 9px;
}



.borderr#stop-borr{
height: 125px;
margin-top: 9px;
}


.borderr#logo-borr{
height: 125px;
margin-top: 9px;
}



.borderr#station-borr{
height: 120px;
margin-top: 9px;
}

.borderr#borr-bill{
height: 143px;
margin-top: 9px;
}



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



.drawing .text-draw{
display: flex;
flex-wrap: wrap;
width: 1020px;
justify-content: center;
color: #3D5A80;
text-align: justify;
margin-left: 13px;
}

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

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


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

.content-draw .draws{
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
margin: 10px 10px;
width: 280px;
background-color: white;
border-radius: 5px ;
}


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


.draws img{
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 200px;
}

.logo-txt{
display: flex;
flex-wrap: wrap;
width: 100%;
color: #3D5A80;
background-color: white;
flex-direction: column;
border-radius: 8px ;
padding: 0 20px;
height: 114px;
justify-content: center;
position: absolute;
bottom: 1px;
}

.logo-txt#img-kish{
bottom: 1px !important;

}


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


.logo-txt2 h3{
font-size: 20px;
font-family: 'Quicksand', sans-serif;
padding: 15px 0;
}



.draws p{
font-size: 10px;
width:100%;
line-height: 16px;
font-family: 'Quicksand', sans-serif;
text-align: center;
margin-top: 8px;
}

.logo-txt p{
font-size: 12px;
width:100%;
font-family: 'Quicksand', sans-serif;
text-align: left;
margin-top: 8px;
letter-spacing: -0.01em;
line-height: 16px;
}




.logo-txt h3{
font-size: 20px;
font-family: 'Quicksand', sans-serif;
margin-top: 8px;
}


.content-draw .draws-stationary{
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
margin-right: 42px;
width: 483px;
height: 396px;
background-color: white;
border-radius: 5px ;
position: relative;
}

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

.content-draw .draws-stationary:first-child{
margin-bottom: 25px;
}

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


.draws-stationary img{
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}


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





/*  End of frame2 css */
.about{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
padding-top: 88px;
background-color: #e5e5e5;
padding-bottom: 105px;
padding-left: 10px;
}

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

.about i{
color: white;
background-color: #EE6C4D;
padding: 15px 20px;
border-radius: 50px;
font-size: 25px;

width: 55px;
height: 55px;
text-align: center;
}


.about p{
font-size: 18px;
color: #3D5A80;
width: 68%;
font-weight: bold;
text-align:justify ;
line-height: 27px;
letter-spacing: -0.01em;
font-family: 'Quicksand', sans-serif;
}


.about-sec2{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-evenly;
padding-left: 80px;
background-color: #e5e5e5;
}

.about-sec3{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
}


.about-sec2 .pic{
display: flex;
flex-wrap: wrap;
width: 43%;
height: 429px;
justify-content: center;
}


.about-sec3 .pic1{
display: flex;
flex-wrap: wrap;
width: 43%;
height: 429px;
justify-content: right;
}


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


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


.about-sec2 .bio{
display: flex;
flex-wrap: wrap;
width: 48%;
margin-left: -100px;
}


.about-sec3 .bio2{
display: flex;
flex-wrap: wrap;
width: 48%;
align-items: center;
padding-left: 10px;
}



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

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


.bio p{
font-size: 22px;
width: 85%;
font-family: 'Quicksand', sans-serif;
color:#3D5A80;
line-height: 30px;
margin-top: 20px;
text-align:justify;
}

.bio2 p{
font-size: 20px;
font-family: 'Quicksand', sans-serif;
color:#3D5A80;
line-height: 28px;
margin-top: 20px;
text-align:justify;
}



.bio button{
display: flex;
padding: 16px;
border: none;
border-radius: 8px;
background-color: #EE6C4D;
color: white;
text-align: center;
font-size: 16px;
margin: 20px 0;
width: 124px;
height: 42px;
justify-content: center;
align-items: center;
outline: none;
cursor: pointer;
font-family: 'Quicksand', sans-serif;
transition:  all .3s ease;
}

.bio button:hover{
background-color: white;
color: #EE6C4D;
border: #EE6C4D 1px solid;
}


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

.books .p{
color:#EE6C4D;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
font-weight: bold;
}

.container .p{
color:#EE6C4D;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
text-align: center;
width: 100%;
margin-top: 50px;
font-weight: bold;
}

.books h1{
font-size: 46px;
font-family: 'Quicksand', sans-serif;
color: #3D5A80;
}

.books p{
font-size: 18px;
font-family: 'Quicksand', sans-serif;
color: #3D5A80;
line-height: 30px;
margin-top: 20px;
width: 75%;
text-align: center;
}


.book-container{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-around;
margin-top: 50px;
}


.book-img-container{
display: flex;
flex-wrap: wrap;
width: 344px;
position: relative;
margin-bottom: 14px;
}

.book-img-container img{
width: 100%;
}


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



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


/*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;
border-radius: 8px;
}

.img-container{
display: flex;
justify-content: center;
align-items: center;
width: 480px;
height: 420px;
position: relative;
border-radius: 8px;
margin-top: -370px;
}

.img-container img{
display: block;
width: 100%;
margin: 0;
border-top-left-radius:8px;
border-top-right-radius:8px;
object-fit: cover;
}



.img-container2{
display: flex;
flex-wrap: wrap;
width: 589px;
height: 446px;
position: relative;
border-radius: 8px !important;
margin-top: -380px;
}


.img-container2 img{
display: flex;
margin: 0;
width: 100%;
border-radius: 8px !important;
}




.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: 490px;
bottom: 200px;
background-color:#EE6C4D;
font-size: 45px;
padding: 18px 16px;
width: 80px;
height: 80px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}

.Rnum2{
position: absolute;
left: 600px;
bottom: 200px;
background-color:#EE6C4D;
font-size: 45px;
padding: 18px 16px;
width: 80px;
height: 80px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}



.fa-angle-left{
position: absolute;
bottom: 200px;
right: 498px;
background-color: #EE6C4D;
font-size: 45px;
padding: 18px 26px;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
}


.Lnum2{
position: absolute;
bottom: 200px;
right: 610px;
background-color: #EE6C4D;
font-size: 45px;
padding: 18px 26px;
width: 80px;
height: 80px;
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: 440px;
width: 30px;
height: 30px;
left: 430px;
}


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


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


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


/* End of light box CSS*/


.exp-L-img{
display: flex;
width: 306px;
height: 344px;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 25px;
margin-right: 63px;
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{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 306px;
height: 344px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;

}


.exp-img img{
display: block;
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;
object-fit: cover;
}






.book-img-container .over-lay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 99%;
background-color: #ee6d4deb;
color: white;
opacity: 0;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: left;
transition: opacity .4s ease ;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

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

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

.over-lay p{
color: black;
font-size: 22px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}

.social-media{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 313px;
background-color: #3D5A80;
padding-top: 93px;
padding-bottom: 100px;
align-items: center;
justify-content: center;
}

.social-media#social-peggy{
padding-top: 25px ;
padding-bottom: 25px ;
height: 200px;
}


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

.social-media .social-adresses{
display: flex;
height: 40px;
align-items: center;
width: 1044px;
margin-top: 40px;
}

.adresses a{
display: flex;
align-items: center;
color: white;
font-size: 18px;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}



.adresses{
display: flex;
flex-wrap: wrap;
margin: 0 24px;
align-items: center;
}

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


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


.adresses img{
margin-right: 10px;
}



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



.work-exp h1{
font-family: 'Quicksand', sans-serif;
font-size: 46;
width: 100%;
text-align: center;
margin-bottom: 30px;
color:#3D5A80;
}

.work-exp .works{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
padding: 18px 0;
padding-bottom: 30px;
}

.works .work-orange,.work-white{
display: flex;
flex-direction: column;
justify-content:space-between;
width: 246px;
height: 228px;
margin: 0 20px;
border-radius: 12px;
}



.works .work-orange,.work-white:hover{
box-shadow: rgba(74, 74, 74, 0.15)4px 4px 10px 0;
}
.work-orange{
background-color: #EE6C4D;
}

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

.work-orange img,.work-white img{
width: 55px;
height: 55px;
margin-left: 10px;
}

.orwh-1 p{
font-size: 11px;
font-family: 'Quicksand', sans-serif;
text-align: justify;
}

.work-orange p{
color: white;
}

.work-white p{
color: black;
}


.orwh-2 p{
font-size: 12px;
font-family: 'Quicksand', sans-serif;
text-align: justify;
}

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

.work-orange .orwh-1 div h4{
color: white;
font-size: 16px;
font-family: 'Quicksand', sans-serif;
}

.work-white .orwh-1 div h4{
color: black;
font-size: 16px;
font-family: 'Quicksand', sans-serif;
}


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



.orwh-2{
display: flex;
flex-wrap: wrap;
justify-content: left;
margin-bottom: 10px;
padding:0 10px;
}

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

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


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




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

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

.work-skills .skills{
display: flex;
flex-wrap: wrap;
width:1044px;
align-items: center;
justify-content: space-between;
background-color: inherit;
margin-top: 36px;
}

.skills li{
list-style: none;
width: 512px;
display: flex;
flex-wrap: wrap;
margin-bottom: 28px;
align-items: center;
}

.skills li:first-child{
margin-right: 20px;
}

.skills li:nth-child(3){
margin-right: 20px;
}




.bar {
display: block;
background-color: #eeeeee;
border: 10px;
overflow: hidden;
transition: all .5s ease;
height: 20px;
border-radius: 3px;
width: 80%;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.bar span{
height: 20px;
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%;
}
}


.skills li img{
border-radius: 12px;
font-size: 36px;
margin-right: 28px;
}

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


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

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

.left-contact #img-M{
display: none;
}


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

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

.first-right h3{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
width: 100%;
margin-top: 43px;
margin-left: 24px;
color: #3D5A80;
}

.first-right p{
font-family: 'Quicksand', sans-serif;
font-size: 16px;
width: 100%;
margin-top: 13px;
margin-left: 24px;
color: #3D5A80;
}

.sec-right{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 517px;
margin-left: 24px;
padding-top: 13px;
}

.sec-right .sec-content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
}
.sec-content h3{
font-family: 'Quicksand', sans-serif;
font-size: 18px;
color: #3D5A80;
}

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


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



.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: 253px;
padding: 10px;
font-size: 18px;
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: 10px;
}


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

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

.last-right form input[id="submit"]{
padding: 5px 10px;
outline: none;
border-radius: 8px;
border: none;
width: 124px;
height: 42px;
margin-top: 14px;
margin-bottom: 38px;
cursor: pointer;
background-color: #EE6C4D;
color: white;
font-size: 16px;
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: 250px;
  text-align: center;
  font-size: 22px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
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#social-bann-mob{
display: none;

}



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

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

.bann-content h3{
font-size: 22px;
font-family: 'Quicksand', sans-serif;
}

.bann-content button{
background-color:#3D5A80;
font-family: 'Quicksand', sans-serif;
color:white;
border-radius: 8px;
width: 124px;
border: none;
outline: none;
padding: 5px 10px;
margin-left: 26px;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
transition: all ease .3s;
height: 42px;
}

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

.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: 18px;
width: 70%;
}

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

.foot-wrapper{
display: flex;
justify-content: center;
width: 1044px;
}


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

.left-foot .foot-logo img{
width: 50px;
height: 44px;
}

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

.left-foot p{
font-size: 14px;
font-family: 'Quicksand', sans-serif;
color: white;
line-height: 24px;
text-align: justify;
}

.left-foot h3{
font-family: 'Quicksand', sans-serif;
color: white;
font-size: 18px;
}

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

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


.foot-pic img{
width: 30px;
height: 30px;
border-radius: 50px;
margin-top: 10px;
}

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

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

footer .center-right .right-foot{
width: 210px;
height: 163px;
}

footer .center-right .center-foot{
display: flex;
flex-direction: column;
width: 200px;
height: 115px;
margin-right: 33px;
}



.center-foot h1 , .right-foot h1{
font-family: 'Quicksand', sans-serif;
color: white;
width: 100%;
font-size: 17.81px;
margin-top: 10px;
margin-bottom: 20px;
}



.center-foot a::before,
.right-foot a::before{
content: "\25CF";
color: #EE6C4D;
font-weight:lighter;
display: inline-block;
width: 5px;
margin-right: 10px;
}

.center-right .center-foot a ,
.center-right .right-foot a{
text-decoration: none;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 17.81px;
margin-left: 10px;
cursor: default;
}



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

.foot-bottom h3{
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 14px;
letter-spacing: 2px;
line-height: 24%;
font-weight:normal;
}




/* video section */


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



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

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


.text-motion h1{
font-family: 'Quicksand', sans-serif;
font-size: 46;
width: 100%;
}

.text-motion p{
font-size: 18px;
width:100%;
line-height: 35px;
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: 1044px;
align-items: center;
justify-content: center;
background-color: #e5e5e5;
padding: 100px 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: 483px;
position: relative;
background-color: white;
border-radius: 8px;
margin-top: 20px;
margin-right:65px;
}

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

.video-L-container video{
background-color: black;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}


video{
width: 483px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

}

.vid-div{
display: flex;
flex-wrap: wrap;
position: relative;
flex-direction: column;
overflow: hidden;
height: 250px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.video-L-container .video-tools{
width: 749px;
height: 100px;
display: flex;
margin-left: 2px;
flex-wrap: wrap;
justify-content: left;
padding-top: 10px;
position: absolute;
background-color: #EE6C4D;
border-radius: 8px;
}


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

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

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


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


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

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


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




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


.ply{
position: absolute;
top: 90px;
left: 190px;
text-align: center;
font-size: 30px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 26px 30px; 
border-radius: 50%;
}


.video-L-container .ply{
position: absolute;
top: 170px;
left: 320px;
text-align: center;
font-size: 30px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 26px 30px;
border-radius: 50%;
}





.pause{
position: absolute;
top: 170px;
left: 320px;
text-align: center;
font-size: 30px;
background-color: #EE6C4D;
color: #3D5A80;
padding: 26px 32px; 
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:692px;
font-size: 28px;
color: white;
background-color: #3D5A80;
width: 34px;
height: 34px;
text-align: center;
padding-top: 3px;
}




.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: 15px 15px;
color: #3D5A80;
}

.video-txt p{
font-size: 12px;
padding: 10px 10px;
text-align: justify;
color: #3D5A80;
font-family: 'Quicksand', sans-serif;
}

.video-txt h3{
font-family: 'Quicksand', sans-serif;
}

/* end video section */



/* About me section*/

.about-pic{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 5px;
margin-top: 50px;
background-color: #e5e5e5;
}

.about-pic img{
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.about-pic .bottom-img-txt{
display: flex;
flex-wrap: wrap;
width: 306px;
align-items: center;
justify-content: center;
border-radius: 12px;
margin: 0 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bottom-img-txt p{
width: 100%;
font-family: 'Quicksand', sans-serif;
font-size: 22px;
margin: 20px;
}

}