html, body {
    position: relative;
    height: 100%;
}
.active{opacity: .2 !important;}
:root {
    --scroll-bar-size: 9px;

    /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   */
    --scroll-bar-thumb-background-color: rgb(42, 42, 42);
    /**
    * Background color for custom scroll bars in their active state.
    * The color is applied to the thumb part of the scrollbar.
    */
    --scroll-bar-thumb-background-color-active: black;
}
::-webkit-scrollbar {
    width: var(--scroll-bar-size);
    height: var(--scroll-bar-size);
    background: transparent;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-thumb-background-color);
    border-radius: var(--scroll-bar-size);
    border-color: transparent;
    border-style: solid;
    border-width: calc(var(--scroll-bar-size)/3);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-bar-thumb-background-color-active);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    border-width: 1px;
    background-color: var(--scroll-bar-thumb-background-color-active);
    cursor: pointer;
}
@font-face {
    font-family: Century Gothic;
    src: url('font/GOTHIC.TTF');
    font-weight: normal;
}
@font-face {
    font-family: Century Gothic;
    src: url('font/GOTHICB.TTF');
    font-weight: bold;
}
@font-face {
    font-family: Century Gothic;
    src: url('font/GOTHICBI.TTF');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Century Gothic;
    src: url('font/GOTHICI.TTF');
    font-style: italic;
}

@font-face {
    font-family: Times;
    src: url('font/times.ttf');
    font-weight: normal;
}
@font-face {
    font-family: Times;
    src: url('font/timesbd.ttf');
    font-weight: bold;
}
@font-face {
    font-family: Times;
    src: url('font/timesbi.ttf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Times;
    src: url('font/timesi.ttf');
    font-style: italic;
}

body {
    font-family:Century Gothic;
    color:black;
    padding:0;
    margin:0;
    background: #efefef;
    overflow-x: hidden;
    position: relative;
}
a{
    text-decoration: none;
    color: inherit;
}
/*menu*/


header.menu{
    padding: 1em 5% .5em 5%;
    border-bottom: 1px solid #b0b0b078;
    display: flex;
    justify-content:space-between;
    align-items:center;
    position: fixed;
    top: -1px;
    background: #efefef;
    z-index: 999;
    width: 91%;
}
header.menu img{
    width:20px;
}

div.socialMenu{
    width: 15vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

div.portfolio{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:10% 13%;
    flex-flow: row wrap;
    min-height: 90vh;
    max-width: 1440px;
    margin: 0 auto;

}
div.portfolio div >h1{
    font-weight:bold;
    font-size:18px;
    opacity:.5;
    letter-spacing:30px;
    margin-top: -1em;
    margin-bottom: 1em;
}
div.portfolio div >h2{
    font-size:16px;
    padding-left:1em;
}
div.portfolio > img.monfared{
    width:30%;
}
div.details{
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items:center;
    margin-bottom:1em;
    padding-right: 15%;
}
div.details span{
    font-size:14px;
}
div.titles{
    margin-bottom:3em;}
div.educate h3{
    font-size:20px;
    opacity:.73;
    letter-spacing:10px;
    margin-left:2em;
    font-weight:bold;
    margin-bottom: 1.5em;
}

div.details span {
    margin-left: 1em;
}

div.titles h1 {
    margin-bottom: 1em;
}
div.educate{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top:2.5em;
    margin-bottom:1em;

}
.pr0{
    padding-right:0 !important;}
div.eduDetail h4{
    font-size: 16px;
    margin-block-start: 0;
    margin-block-end: 0;
}
p.uni{
    margin-block-start: 5px;
    margin-block-end: 0;
    font-size: 15px;
}
p.major{
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 13px;
}
.flexStart{
    align-items:flex-start !important;}
.Ido{
    padding:20px 13%;
    max-width: 1440px;
    margin: 0 auto;
}
.Ido h2{
    opacity:.7;
    font-size:20px;
    letter-spacing:10px;
    margin-bottom: 2em;
}
.experience h2{
    opacity:.7;
    font-size:20px;
    letter-spacing:10px;
    text-align: center;
    margin-bottom:2.5em;
    margin-top: -1em;
}
.experience{
    padding-bottom:5em;
}
div.whatHeDose{
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items:center;
    margin-bottom:15%;
}
div.whatHeDose p{
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;

}
.copyright{
    font-size:12px;
    padding-left:2%;
}
.experiecesTitle{
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items:center;
}
.gradient{
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(28,28,28,1) 55%, rgba(255,255,255,1) 100%);
    height: 1px;
    width: 130px;
    margin: 0 5px;
}
.moreWidth{
    width:195px;
}
.moreMoreWidth{
    width:250px;
}
.pr20{
    padding-right:35px;
}
.pr10{
    padding-right:15px;}
.experiecesTitle span{
    opacity:.5;
    font-size: 14px;
}
.experiecesTitle h3{
    font-size:14px;
    width: 50%;
    text-align: center;
    font-weight:normal;
    flex: 1;
}
.years{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex: 1;text-align: center;
    justify-content: center;
}
div.clients {
    padding: 0% 13%;
    display: flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    min-height:100vh;
    align-items:center;
    max-width: 1440px;
    margin: 0 auto;

}
div.socialInFooter {
    display: flex;
    width: 15%;
    align-items: flex-start;
    justify-content: space-between;
    margin:1% 5% 2%;
    float: right;
}

div.clients h2{
    opacity: .7;
    font-size: 20px;
    letter-spacing: 10px;
    text-align: right;
    margin-bottom:2em;
}
div.clients > div{
    flex:1;
}
.logoCustomer{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 75%;
    padding-left: 10%;
    margin-right: 10%;
    margin: 0 auto;
    padding-top: 6%;


}
.logoCustomer img{
    width:109px;
    margin-bottom:0px;
    border: 1px solid #858585;
    margin: 4px;
}
div.box{
    width: 170px;
    height: 170px;
    border: 1px solid #858585;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-end;
}
.box1{
    width: 100px;
    height: 170px;
    border: 1px solid #858585;
    margin-left: 171px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: -1px;
}
.mt15{
    /*margin-top: 10%;*/
    margin-right: 10%;
    /*margin-left: 10%*/
}

p.number{
    font-weight: bold;
    opacity: .8;
    text-align: center;
    width: 100%;
    letter-spacing: 3px;
    font-size: 12px;
    text-transform: uppercase;
}
p.number span{
    opacity: .8;
    font-weight: bold;
    font-size: 35px;
    letter-spacing: 2px;

}
.noneDesk{
    display: none;
}
.whatHeDoseMob{
    display: none;
}
@media only screen and (min-width: 1440px){
    div.whatHeDose{
        margin-bottom:17%;}
}
@media only screen and (min-width: 1339px){
    div.portfolio div >h1{font-size:20px;}
    div.portfolio div >h2{font-size:18px;}
    div.details span{font-size:16px;}
    div.educate h3{font-size:21px;}
    div.eduDetail h4{font-size:17px;}
    p.uni{font-size:16px;}
    div.fe_client{
        /*margin-right: 10%;*/
        /*margin-left: 10%;*/
    }

}
@media only screen and (min-width: 1000px) and (max-width:1440px){
    div.fe_client{
        margin-right: 0%;
        margin-left: 0%;
    }
    .mt15{margin-right: 0;}
}
@media only screen and (min-width: 700px) and (max-width: 999px){
    .logoCustomer img{width: 33% !important;}
}
@media only screen and (max-width: 800px) {
    div.socialInFooter{width:40%;}
    /*menu*/
    .height15 {
        height: 15vh !important;
    }

    .menu.height15 {
        height: auto !important;
    }

    div.menuLinks::before {
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
        font-size: 3.5em;
        letter-spacing: 40px;
    }

    div.showMenu div.menuLinks a {
        font-size: 2em;
    }

    div.socialMenu {
        width: 30vw;
        margin: 2em auto;
    }

    div.showMenu {
        align-items: center;
    }

    span.open.stableIcon::before {
        margin-left: 0 !important;
    }

    header.menu > a:first-child {
        order: 2
    }

    header.menu > div.clickOnMenu {
        order: 1
    }


    div.portfolio > img{
        order:1;
        width:75% !important;
    }
    div.portfolio > div{
        order:2;
        width:100%;
    }
    .noneDesk{
        display: block !important;
        text-align: center;
    }
    .noneDesk h1{
        font-weight: bold;
        font-size: 18px;
        opacity: .5;

        letter-spacing: 26px;
        padding-left: 28px;
    }
    .noneDesk h2{
        font-size: 14px;
        padding-left: 1em;
    }
    div.titles h1, div.titles h2{
        display: none;
    }
    div.details{
        padding-right:0;
        padding: 0 5%;
    }
    div.details.flexStart{
        padding-left:0;}
    div.eduDetail h4{
        font-size:15px; }
    p.uni{
        font-size:14px;}
    div.educate img{
        display: none;
    }
    div.educate h3{
        width:100%;
        text-align: center;
    }
    div.portfolio, .Ido,div.clients{
        height: auto;
        padding:2% 5%;
    }
    p.major{
        font-size: 11px;
    }
    div.titles{
        margin-bottom:1em;}
    .whatHeDose{
        display: none !important;

    }
    .whatHeDoseMob{
        display: block;
        margin-bottom:5em;
    }
    div.gradiantMob{
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(28,28,28,1) 55%, rgba(255,255,255,1) 100%);
        height: 1px;
        width: 110px;
        margin: 0 5px;
    }
    .whatHeDoseMob > div{
        display: flex;
        flex-flow: row nowrap;
        margin-bottom:20px;
        justify-content: space-between;
        align-items:center;
        font-size:14px;
    }
    .Ido h2{
        text-align: center;
        margin-bottom:2em;    letter-spacing: 8px;}
    .experiecesTitle{flex-flow:column wrap;}
    .experiecesTitle h3{width:100%;
        text-align: center;}
    .pr20{
        padding-right:0;}
    .pr10{
        padding-right:0;}
    .moreMoreWidth{    width: 220px;}
    .copyright{
        display: none;}
    div.clients{flex-flow:column wrap;}
    .clients > div:last-child{order:1}
    .clients > div:first-child{order:2}
    .logoCustomer{
        padding-left:0;width:80%;margin:0 auto;
        margin-bottom:2em;}
    .logoCustomer img{width:115px;}
    .mt15{margin: 0}
    /*div.menuLinks{    margin-top: 37%;}*/
}
@media only screen and (max-width: 500px){
    .logoCustomer{width:100%;}
    .noneDesk h1{padding-left: 0;text-align: center;letter-spacing: 17px;}
    .noneDesk h2{padding:0}
    .noneDesk{padding: 2% 5%}
    div.details span{margin-left: 0;}
    div.details{padding: 0}
    div.clients h2{letter-spacing: 7px;text-align: center;}
    div.socialInFooter{margin: 2% 5% 2%;}
}