html {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    height: 100%;
    background: #fff;
    scroll-behavior: smooth;
}
html {
    font-size: calc(1em + 1vw);
}
body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: "Mulish", arial, sans-serif;
    /*font-size: 1.5em;*/
    font-size: 0.55em;
    color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rajdhani", arial, sans-serif;
    font-weight: bold;
    color: #000;
}
p{
    margin-bottom: 1em;
}

.container-custom{
    max-width: 1600px; margin:0 auto;
    padding-left: 30px; padding-right: 30px;
}
.btn{
    position: relative;
    font-size: .8em;
    border-radius: 4px;
    border:none;
    overflow: hidden;
}
.btn:focus{
    -webkit-box-shadow: none;
            box-shadow: none;
}
.btn-primary{
    background:#74d09f;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
    background:#34855a;
    color: #fff;
    -webkit-box-shadow: none;
            box-shadow: none;
    border:none;
}
.btn-anim:before,
.btn-anim::before{
    content: "";
    display: block;
    position: absolute; z-index: 1;
    width: 0; height: 100%;
    top:0; left: 0;
    background:#34855a;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.btn-anim:hover:before,
.btn-anim:hover::before{
    width: 100%;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.btn-anim span{
    position: relative; z-index: 2;
    left:0;
    color: #000;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.btn-anim span:before,
.btn-anim span::before{
    content: "";
    display: block;
    position: absolute; z-index: 2;
    top:calc(50%); left: -15px;
    width: 0; height: 1px;
    background:#fff;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.btn-anim:hover span{
    left: 10px;
    color: #fff;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.btn-anim:hover span:before,
.btn-anim:hover span::before{
    width: 10px; height: 1px;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}



/********************** native scrollbar custom ************************/
/* width */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

/* button */
::-webkit-scrollbar-button {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #74d09f;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
    background: #000; 
}

/* Corner */
::-webkit-scrollbar-corner {
    background: #fff;
}

/* Resizer */
::-webkit-resizer {
    background: #fff;
}



/******************* general styles *******************/

/************ button top ****************/
#back-top {
    display: inline-block;
    background-color: #ff9800;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 70px;
    right: 15px;
    -webkit-transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    -o-transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#back-top i {
    color: #000;
    font-size: 22px;
    line-height: 40px;
}
#back-top.show {
    opacity: 0.7;
    visibility: visible;
}
#back-top.show:hover {
    cursor: pointer;
    background-color: #ff9800;
    color: #fff;
    opacity: 1;
}
#back-top.show:active {
    background-color: #ff9800;
    color: #fff;
    opacity: 1;
}


/*********************************** main styles ************************/
.main-page-wrapper {
    position: relative;
    overflow-x: hidden;
}

.main-page-content-wrapper {
    position: relative;
}




.main-nav-wrapper{    
    position: fixed; z-index: 999;
    top:0; left: 0;
    width: 100%;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding:1em 5%;
}
.main-logo-wrapper {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-logo-wrapper img {
    height:60px;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-list-wrapper{
    padding-left: 2em;
}
.main-nav-list-wrapper nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.main-nav-list-wrapper nav a{
    display: block;
    position: relative;
    padding:10px 1em;
    color: #fff;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-list-wrapper nav a:before{
    content: "";
    display: block;
    position: absolute; z-index: 1;
    bottom:0;
    width: 0; height: 3px;
    background: #74d09f;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-list-wrapper nav a:hover{
    text-decoration: none;
    color: #74d09f;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-list-wrapper nav a:hover:before{
    width: 100%;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.main-nav-list-wrapper nav a.active{
    color: #74d09f;
}
.main-nav-list-wrapper nav a.active:before{    
    width: 100%;
}
.main-nav-wrapper.scrolled{
    background: rgba(0,0,0,0.76);
}
.main-nav-wrapper.scrolled .main-nav-container{
    padding:10px 5% 0 5%;
}
.main-nav-wrapper.scrolled .main-logo-wrapper img{
    height: 35px;
}






.mobile-nav-wrapper{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0;
    width: 200px;
    background: #292929;
}
.mobile-nav-list-wrapper{
    position: relative;
    top:40%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.mobile-nav-list-wrapper nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.mobile-nav-list-wrapper nav a{
    display: block;
    position: relative;
    padding:15px 20px 15px 40px;
    font-size: 1.5em;
    color: #fff;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.mobile-nav-list-wrapper nav a:before{
    content: "";
    display: block;
    position: absolute; z-index: 1;
    top:0; bottom:0; left:0;
    width: 0; height: 100%;
    background: #74d09f;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.mobile-nav-list-wrapper nav a:hover{
    text-decoration: none;
    color: #74d09f;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.mobile-nav-list-wrapper nav a:hover:before{
    width: 8px;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
#right-panel-wrapper{
    right:-200px;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
#right-panel-wrapper.active{
    right: 0;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.mobile-nav-toggler-wrapper{
    position: relative;
    left:-60px;
    width: 60px; height: 60px;
    background: #292929;
}
.menu__icon{
    border:none; background: none;
    position: relative;
    width: 30px; height: 24px;
    top:45%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.menu__icon span {
    display: block;
    background: #fff;
    width: 100%;
    height: 3px;
    margin-top: -2px;
    position: absolute;
    left: 0;
    top: 50%;
}  
.menu__icon:before,
.menu__icon:after {
    content: "";
    display: block;
    background: #fff;
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}  
.menu__icon:before {
    top: 2px;
    margin-top: -2px;
}
.menu__icon:after {
    bottom: 2px;
    margin-bottom: -2px;
}  
.mobile-nav-wrapper.active .menu__icon span {
    background: transparent;
}  
.mobile-nav-wrapper.active .menu__icon:before {
    top: 50%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}  
.mobile-nav-wrapper.active .menu__icon:after {
    bottom: 50%;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}




.main-section-header-wrapper{
    margin-bottom: 1em;
    text-align: center;
}
.main-section-header-aux{
    font-size: 1em; font-weight: 300;
}
.main-section-header-text h2{
    /*color: #fff;*/
}




.main-banner-wrapper {
    position: relative;
    background: #221812;
}
.main-banner-wrapper img {
    width: 100%;
}
.main-banner-slide img.main-banner-pic-mobile {
    display: none;
}

.main-banner-tagline{
    position: absolute; z-index: 1;
    top:30%; left:5%;
    color: #fff;
}
.main-banner-tagline h1{
    margin-bottom: 0;
    font-size: 4.5em; line-height: 1em;
    color: #fff;
}
.main-banner-tagline h5{
    margin-bottom: 0;
    font-weight: 600; text-transform: lowercase;
    color: #fff;
}
.main-banner-tagline h3{
    margin-bottom: 0;
    font-weight: 300; font-style: italic;
    color: #fff;
}
.main-banner-tagline2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top:20%;
    color: #fff;
}
.main-banner-tagline2-anim-wrapper{
    position: relative;
    width:300px; height: 45px;
    margin:0 15px;
    overflow: hidden;
}
.main-banner-tagline2-anim-item-wrapper{
    width:300px; height: 45px;    
}

.main-banner-tagline2-anim-item-wrapper h6{
    line-height: 45px; text-align: center;
    color: #fff;
}
.main-banner-tagline2-anim-item-wrapper.tagline2-item-01{
    background: #85bd5d;
}
.main-banner-tagline2-anim-item-wrapper.tagline2-item-02{
    background: #ff9920;
}
.main-banner-tagline2-anim-item-wrapper.tagline2-item-03{
    background: #d25342;
}
.main-banner-pic-mobile{
    display: none;
}


#section-services{
    background: #212121;
}
.main-services-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.main-services-item-wrapper{
    position: relative;
    width: 25%;
    /*border-right: 1px solid #373737;*/
    overflow: hidden;
}
.main-services-item-wrapper:last-child{
    border:none;
}
.main-services-item-wrapper.main-services-01{
    background: url(../images/services-fullstack-dev.jpg) no-repeat top left;
    background-size: cover;
}
.main-services-item-wrapper.main-services-02{
    background: url(../images/services-app-dev.jpg) no-repeat top left;
    background-size: cover;
}
.main-services-item-wrapper.main-services-03{
    background: url(../images/services-visual-design.jpg) no-repeat top left;
    background-size: cover;
}
.main-services-item-wrapper.main-services-04{
    background: url(../images/services-server.jpg) no-repeat top center;
    background-size: cover;
}
.main-services-item-overlay-wrapper{
    position: absolute;
    z-index: 1;
    top:0; left: 0;
    width: 100%; height: 100%;
    background: #212121;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.main-services-item-content-wrapper{
    position: relative; z-index: 2;
    padding:20% 20%;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.main-services-item-icon-wrapper{
    position: relative;
    left: -20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 100px; height: 100px;
    border-radius: 50%;
    margin-bottom: 40px;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.main-services-item-icon-wrapper img{
    max-height: 60px;
}
.main-services-item-text-wrapper h5{
    color: #fff; font-size: 2.1em;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.main-services-item-wrapper:hover .main-services-item-overlay-wrapper{
    left:100%;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.main-services-item-wrapper:hover .main-services-item-text-wrapper h5{
    margin-left: 5%;
    color: #000;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.main-services-item-wrapper:hover .main-services-item-icon-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    padding:1em;
    width: 100px; height: 100px;
    background:#fff;
    border-radius: 50%;
    -webkit-transform: scale(120%);
        -ms-transform: scale(120%);
            transform: scale(120%);
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}



#section-about{
    background:#f7f8f9;
}
.about-us-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;    
    width: 100%; height: 100%;
}
.about-us-content-wrapper{
    width: 50%;
    padding:50px 5%;
}
.about-us-content-wrapper .main-section-header-wrapper{
    text-align: left;
}
.about-us-pic-wrapper{
    width: 50%;
    background: url(../images/bg-about-01.jpg) no-repeat center center;
    background-size: cover;
}







#section-solutions{
    padding-top:80px; padding-bottom: 160px;
    background: url(../images/bg-solutions.jpg);
    background-size: cover;
    background-attachment: fixed;
    box-shadow: 1px 1px 112px -48px rgba(0,0,0,1) inset;
-webkit-box-shadow: 1px 1px 112px -48px rgba(0,0,0,1) inset;
-moz-box-shadow: 1px 1px 112px -48px rgba(0,0,0,1) inset;
}
.main-hexa-wrapper {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    --s: 250px;  /* size  */
    --m: 8px;    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}  
.main-hexa-container {
    max-width: 80%; margin:0 auto;
    font-size: 0; /*disable white space between inline block element */
}
.main-hexa-container::before {
    content: "";
    width: calc(var(--s)/2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(     
                     #0000 0 calc(var(--f) - 3px),      
                     #000  0 var(--f));
}
.solution-item-wrapper {
    position: relative;
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547); 
    display: inline-block;
    font-size:initial;
    -webkit-clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
            clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    /*
    background: #dce3ff;
    background: linear-gradient(0deg,#dce3ff 0%, #edf0fe 80%);
    background: -webkit-linear-gradient(0deg,#dce3ff 0%, #edf0fe 80%);
    background: -moz-linear-gradient(0deg,#dce3ff 0%, #edf0fe 80%);
    */    
    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
    -webkit-transition: all 200ms ease-out; 
    -o-transition: all 200ms ease-out; 
    transition: all 200ms ease-out;
    overflow: hidden;
}
.solution-item-wrapper:nth-child(odd) {
    /*
    background: #eeefea;
    background: linear-gradient(90deg,#eeefea 0%, #e8eae0 80%);
    background: -webkit-linear-gradient(90deg,#eeefea 0%, #e8eae0 80%);
    background: -moz-linear-gradient(90deg,#eeefea 0%, #e8eae0 80%);
    */
}
/*
.solution-item-wrapper:after{
    content: "";
    position: absolute; z-index: 2;
    bottom:-100%; left: 0;
    width: 100%; height: 100%;
    background: #cfd8f5;
    transition: all 200ms ease-out;
}
.solution-item-wrapper:nth-child(odd):after{
    background: #dbdecf;
}
*/
.solution-item-wrapper .solution-item-text-wrapper{
    position: absolute; z-index: 10;
    top:55%;
    width: 100%;
    padding:0 1.5em;
    text-align: center;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    /*opacity: 0;*/
}
.solution-item-wrapper .solution-item-text-wrapper h6{
    font-size: 1.5em;
    color: #3d3d3d;
}
.solution-item-wrapper:hover{
    -webkit-transform: scale(1.31);
        -ms-transform: scale(1.31);
            transform: scale(1.31); z-index: 10;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.solution-item-wrapper:hover:after{
    bottom:0;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
/*
.solution-item-wrapper:hover .solution-item-text-wrapper{
    display: block;
    z-index: 10;
    top:60%;
    transform: translateY(-40%);
    transition: all 300ms ease-out;
    opacity: 1;
}
*/


.solution-item-icon-wrapper{
    position: absolute !important; z-index: 5;
    top:25%;
    /*transform: translateY(-50%);*/
    width: 100% !important;
    text-align: center;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.solution-item-icon-wrapper img{
    width: 30%;
    fill: #fff !important;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.solution-item-wrapper:hover .solution-item-icon-wrapper{
    /*
    top:20%; 
    transform: scale(.65);*/
    /*filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);*/
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.solution-item-bg-wrapper{
    position: absolute; z-index: 0;
    top:0; left: 0;
    width: 100%; height: 110%;
    background:rgba(255, 255, 255, .5);
}
.solution-item-bg-wrapper img{
    width: 100%; height: 100%;
    opacity: .4;
}
.solution-item-wrapper:nth-child(odd) .solution-item-bg-wrapper img{
    /*background:rgba(208, 200, 168, .5);*/
    opacity: .45;
}
.solution-item-overlay-wrapper{
    position: absolute; z-index: 1;
    top:0; left: 0%;
    width: 100%; height: 100%;
}
.solution-item-overlay-wrapper img{
    width: 100%; height: 100%;
    opacity: .2;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.solution-item-wrapper:hover .solution-item-overlay-wrapper img{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    opacity: .5;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}


.main-solution-wrapper-mobile{
    display: none;
}
/*
.solution-item-mobile-wrapper {
    cursor: default;
    position: relative;
    width: 300px; 
    height: 173.20508075688775px;
    background-color: #000000;
    margin: 86.60254037844388px auto 0 auto;
    box-shadow: 0 0 50px rgba(171,171,171,1);
    border-left: solid 10px #ff6600;
    border-right: solid 10px #ff6600;
    display: grid;
    transition: 0s;
}

.solution-item-mobile-wrapper:before, 
.solution-item-mobile-wrapper:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 212.13203435596424px;
    height: 212.13203435596424px;
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 33.93398282201788px;
    box-shadow: 0 0 50px rgba(171,171,171,1);
    transition: 0s;
}

.solution-item-mobile-wrapper:before {
    top: -106.06601717798212px;
    border-top: solid 14.142135623730951px #ff6600;
    border-right: solid 14.142135623730951px #ff6600;
}

.solution-item-mobile-wrapper:after {
    bottom: -106.06601717798212px;
    border-bottom: solid 14.142135623730951px #ff6600;
    border-left: solid 14.142135623730951px #ff6600;
}
*/

.solution-item-mobile-wrapper img{
    width: 100%;
}



#section-projects{
    padding-top:80px; padding-bottom: 80px;
    background: #fff;
}
#main-projects {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

#main-projects .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 40%;
    height: auto;
}

#main-projects .swiper-slide img {
    display: block;
    width: 100%;
}

.project-slider-wrapper {
    position: relative;
}
.project-carousel {
    position: relative;
}
.project-strip {
    margin: 150px 0 150px;
    -webkit-filter: blur(8px);
            filter: blur(8px);
}
.project-strip .project {
    cursor: pointer;
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
    opacity: .7;
}
.project-strip .project:hover{
    -webkit-filter: grayscale(10%);
            filter: grayscale(10%);
}
.project-strip img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.project-screen {
    width: 700px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.project-screen .project-detail {
    position: absolute;
    left: 50%; 
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 700px;
    /*height: 436px;*/
    /*margin: 32px auto 0;*/
    z-index: 1;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(50, 50, 50, 0.42);
    box-shadow:         0px 0px 40px 0px rgba(50, 50, 50, 0.42);
}
  .project-screen .screen-frame {
    content: " ";
    width: 700px;
    height: 436px;
    position: absolute;
    background-image: url("https://dl.dropboxusercontent.com/u/26808427/cdn/experiments/training/macbook-frame.png");
    background-repeat: no-repeat;
}
.project-screen .project {
    /*margin-right: -100%;
    float: left;*/
    cursor: move;
    position: relative;
    overflow: hidden;
}
.project-screen .project:before,
.project-screen .project::before{
    content: "";
    display: block;
    position: absolute; z-index: 1;
    top:-100%; left: -50%;
    width: 100%;
    height: 100%;
    -ms-transform: skew(-20deg);
        transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    opacity: .5;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.project-screen .project:after,
.project-screen .project::after{
    content: "";
    display: block;
    position: absolute; z-index: 1;
    bottom:-100%; right: -49%;
    width: 100%;
    height: 100%;
    -ms-transform: skew(-20deg);
        transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    opacity: .5;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.project-screen .project:before,
.project-screen .project::before{
    background: #373737;
}
.project-screen .project:after,
.project-screen .project::after{
    background: #434343;
}
.project-screen .project:hover:before,
.project-screen .project:hover::before{
    top:0;
    opacity: 1;
    -webkit-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}
.project-screen .project:hover:after,
.project-screen .project:hover::after{
    bottom:0;
    opacity: 1;
    -webkit-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}
.project-screen .project.project-terragrill:before,
.project-screen .project.project-terragrill::before{
    background: #373737;
}
.project-screen .project.project-terragrill:after,
.project-screen .project.project-terragrill::after{
    background: #434343;
}
.project-screen .project.project-velocity:before,
.project-screen .project.project-velocity::before{
    background: #2f314f;
}
.project-screen .project.project-velocity:after,
.project-screen .project.project-velocity::after{
    background: #36385f;
}
.project-screen .project.project-kinex:before,
.project-screen .project.project-kinex::before{
    background: #dbd4ca;
}
.project-screen .project.project-kinex:after,
.project-screen .project.project-kinex::after{
    background: #e3dcd2;
}
.project-screen .project.project-uol:before,
.project-screen .project.project-uol::before{
    background: #b7e1d5;
}
.project-screen .project.project-uol:after,
.project-screen .project.project-uol::after{
    background: #caede3;
}
.project-screen .project.project-noel:before,
.project-screen .project.project-noel::before{
    background: #8b1b33;
}
.project-screen .project.project-noel:after,
.project-screen .project.project-noel::after{
    background: #a62541;
}
.project-screen .project.project-humming:before,
.project-screen .project.project-humming::before{
    background: #d92475;
}
.project-screen .project.project-humming:after,
.project-screen .project.project-humming::after{
    background: #e03d86;
}
.project-screen .project.project-kims:before,
.project-screen .project.project-kims::before{
    background: #453e3e;
}
.project-screen .project.project-kims:after,
.project-screen .project.project-kims::after{
    background: #423f3f;
}
.project-screen .project.project-vero:before,
.project-screen .project.project-vero::before{
    background: #e2c79a;
}
.project-screen .project.project-vero:after,
.project-screen .project.project-vero::after{
    background: #dfcdb0;
}



.project-screen .project img{
      width: 100%;
}

.project-screen .project .project-content{
    position: absolute; z-index: 2;
    top:10%; left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%; height: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.project-screen .project .project-content-logo{
    width: 25%; height: auto;
    margin:0 auto;
    text-align: center;
}
.project-screen .project .project-content-logo img{
    display: inline-block;
    width: auto; max-width: 100%;
    height: auto; max-height: 100%;
}
.btn-project-content-visit{
    display: inline-block;
    padding:8px 15px; margin:10px 20px;
    border:2px solid #fff;
    border-radius: 4px;
    font-size: .85em; color: #fff;
}
.btn-project-content-visit:hover{
    border-color: #74d09f;
    color: #74d09f;
    text-decoration: none;
}
.project-screen .project:hover .project-content{
    top:0;
    opacity: 1;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}


.project-slider-nav{
    /*padding-top:20px;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap:50px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.btn-nav-arrow{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap:15px;
    padding:12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
}
.btn-nav-arrow:hover{
    color: #74d09f;
}
.btn-nav-arrow-icon{
    /*
    display: flex;
    flex-direction: column;
    justify-content: center;
    */
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
}
.btn-nav-arrow-icon i{
    position: absolute;
    font-size: 1em; top:50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-icon i.btn-nav-arrow-left-01{
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
    left:50%;
}
.btn-nav-arrow-icon i.btn-nav-arrow-left-02{
    left:120%;
    opacity: 0;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-prev:hover .btn-nav-arrow-icon i.btn-nav-arrow-left-01{
    left:-100%;
    opacity: 0;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-prev:hover .btn-nav-arrow-icon i.btn-nav-arrow-left-02{
    left:50%;
    opacity: 1;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-icon i.btn-nav-arrow-right-01{
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
    left:50%;
}
.btn-nav-arrow-icon i.btn-nav-arrow-right-02{
    left:-20%;
    opacity: 0;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-next:hover .btn-nav-arrow-icon i.btn-nav-arrow-right-01{
    left:100%;
    opacity: 0;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-next:hover .btn-nav-arrow-icon i.btn-nav-arrow-right-02{
    left:50%;
    opacity: 1;
    -webkit-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.btn-nav-arrow-primary{
    background: #74d09f;
    color: #000;
}
.btn-nav-arrow-secondary{
    background: #373737;
    color: #fff;
}
.btn-nav-arrow:hover .btn-nav-arrow-icon{
    box-shadow: 6px 1px 15px -7px rgba(0,0,0,0.46);
-webkit-box-shadow: 6px 1px 15px -7px rgba(0,0,0,0.46);
-moz-box-shadow: 6px 1px 15px -7px rgba(0,0,0,0.46);
}




#section-client{
    padding-top:80px; padding-bottom: 80px;
    background: #f7f8f9;
}
.client-logo-content-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.client-logo-item-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin:1em 1.5em;
    /*width: 150px;*/
    /*
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: .6;
	transition:all 300ms ease-out;*/
}
.client-logo-item-wrapper img{
    /*width: 100%; height: auto;*/ max-height: 50px;
}
/*
.client-logo-item-wrapper:hover{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	opacity: 1;
    transition:all 300ms ease-out;
}
*/






#section-contact{
    padding-top:80px; padding-bottom: 80px;
    background: url(../images/bg-contact.jpg);
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}
#section-contact .main-section-header-text h2{
    color: #fff;
}
.contact-city-wrapper{
    margin-bottom: 35px;
    text-align: center;
}
.contact-city-wrapper h6{
    font-size: 1.6em;
    color: #fff;
}
.contact-content-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.contact-content-item-wrapper{
    width: 33.333%;
    padding:0 25px;
    border-right:1px solid #434343;
}
.contact-content-item-wrapper:last-child{
    border-right: none;
}
.contact-content-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1em;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.contact-content-item-icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding:.5em;    
    margin-right: 20px;
    width: 3.5em; height: 3.5em;
    text-align: center;
}
.contact-content-item-icon i{
    font-size: 1.5em;
}
.contact-content-item-content{
    padding-top: 1em;
}
.contact-content-item-content h6{
    display: block;
    margin-bottom: 8px;
    font-size: 1.3em; color: #fff;
}
.contact-content-item-wrapper a{
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.contact-content-item-wrapper a:hover{
    color: #74d09f; text-decoration: underline;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.contact-content-item:hover .contact-content-item-icon{
    border-radius: 50%;
    background: #74d09f;
    color: #000;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.contact-form-wrapper{
    margin:4em 0;
}
.form-field-container{
    position: relative;
    overflow: hidden;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.form-field-container-border{
    position: absolute; z-index: 1;
    bottom:0; left: 0;
    width: 0; height: 2px;
    background:#74d09f;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.required{
    color: #74d09f;
}
.contact-form-wrapper label{
    font-size: .75em; font-weight: 300;
    margin-bottom: 0;
}
.contact-form-wrapper input,
.contact-form-wrapper textarea{    
    background:transparent;
    border: none; border-radius: 0;
    height: auto;
    padding:.8em;
    font-size: 1em;
    color: #fff;
    border-bottom: 1px solid #434343;    
}
.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus{
    -webkit-box-shadow: none;
            box-shadow: none;
    background:none;
    border:none;
    color: #fff;
    border-bottom: 1px solid #434343;
}
.contact-form-wrapper textarea{
    resize: vertical;
}
::-webkit-resizer {
    display: none;
    background:transparent;
  }
.form-field-container:hover .form-field-container-border,
.contact-form-wrapper input:focus + .form-field-container-border,
.contact-form-wrapper textarea:focus + .form-field-container-border{
    width: 100%;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.contact-btn-wrapper{
    text-align: center;
}
.btn-contact-submit{
    padding-left: 3em; padding-right: 3em;
}

.g-recaptcha{
    padding-bottom:25px;
}
/*
#error-name{
    position:absolute; bottom: -5px;
   padding:8px;
   background: #ff0300;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   font-size: .78em; color: #fff !important;
}
#error-name:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 5px 6px;
    border-color: #ff0300 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -6px;
    left: 23px;
}
*/


.swal2-styled.swal2-confirm:focus{
    box-shadow: none;
}

/********************************************* responsive breakpoints *************************************************/

@media screen and (max-width: 1366px) {

}
@media screen and (max-width: 1281px) {
    .project-slider-wrapper-outer{
        padding-top: 10px;
    }
    .project-strip{
        margin:15% 0 15%;
    }
    .project-slider-nav{
        /*padding-top:35px;*/
    }
    
}
@media screen and (max-width: 1163px) {
    .main-hexa-wrapper{
        padding-left: 4em;
    }
    
}
@media screen and (max-width: 992px) {
    .main-nav-list-wrapper nav a{
        font-size: 1.1em;
    }
    .main-services-wrapper{
        -ms-flex-wrap: wrap;flex-wrap: wrap;
    }
    .main-services-item-wrapper{
        width: 50%;
        /*border-bottom: 1px solid #373737;*/
    }
    .main-services-item-wrapper:nth-child(3),
    .main-services-item-wrapper:nth-child(4){
        border-bottom: none;
    }
    .main-services-item-content-wrapper{
        padding:8%;
    }
    .main-services-item-wrapper:hover .main-services-item-icon-wrapper{
        padding:.5em;
        left:-10px;
        -webkit-transform: scale(105%);-ms-transform: scale(105%);transform: scale(105%);
    }
    .main-hexa-wrapper {
        --s: 180px;
    }
    .main-hexa-container{
        max-width: 100%;
    }
    .main-hexa-container .solution-item-wrapper .solution-item-text-wrapper h6{
        font-size: 1.2em;
    }
    .project-slider-wrapper-outer{
        padding-top: 40px;
    }    
    .project-slider-nav{
        padding-top:1em;
    }
    .contact-content-wrapper{
        -ms-flex-wrap: wrap;flex-wrap: wrap;
    }
    .contact-content-item-wrapper{
        width: 50%;
        border:none;
    }
    .contact-content-item-wrapper.contact-address{
        display: flex;
        order: -1;
        width: 100%;
        padding-bottom: 1.2em; margin-bottom: 1.2em;
        border-bottom: 1px solid #434343;
    }
    .contact-content-item-wrapper.contact-address .contact-content-item{
        width: 50%;
    }

}

@media screen and (max-width: 902px) {
    .project-slider-nav{
        padding-top:2em;
    }
}

@media screen and (max-width: 880px){
    .main-nav-wrapper.scrolled .main-nav-container{
        height: 60px;
        background: #292929;
    }
    .main-nav-list-wrapper{
        display: none;
    }
    .mobile-nav-wrapper{
        display: block;
    }
    .main-hexa-wrapper{
        padding-left: 8em;
    }
    .project-screen,
    .project-screen .project-detail{
        width: 500px;
    }
    .project-screen .screen-frame{
        width: 500px; height: 311px;
    }
    .project-strip{
        margin:8% 0 8%;
    }
}

@media screen and (max-width: 802px) {
    .project-slider-nav{
        padding-top:3.5em;
    }
}

@media screen and (max-width: 767px) {
    
    .main-banner-pic-desktop{
        display: none;
    }
    .main-banner-pic-mobile{
        display: block;
    }
    .about-us-wrapper{
        -webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;
    }
    .about-us-content-wrapper{
        width: 100%;
    }
    .about-us-pic-wrapper{
        width: 100%; height: 300px;
    }
    .main-hexa-wrapper{
        padding-left: 3em;
    }
}
@media screen and (max-width: 722px) {
    .project-slider-nav{
        padding-top:5.5em;
    }
}
@media screen and (max-width: 701px) {
    /*
    .main-solution-wrapper-desktop{
        display: none;
    }
    .main-solution-wrapper-mobile{
        display: block;
    }*/
    
    .project-screen,
    .project-screen .project-detail{
        width: 340px;
    }
    .project-screen .screen-frame{
        width: 340px; height: 212px;
    }
    .project-strip{
        margin:8% 0 8%;
    }
    .project-slider-nav{
        padding-top:1.5em;
    }
    .client-logo-item-wrapper{
        margin:1.2em 2em;
        width: 100px;
    }
}

@media screen and (max-width: 601px) {
    html {
        font-size: calc(1.2em + 1vw);
    }

    .main-banner-tagline{
        top:30%;
    }
    .main-banner-tagline2{
        padding-top:12%;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transform:scale(80%);
        -ms-transform:scale(80%);
                transform:scale(80%);
    }
    .main-hexa-wrapper {
        --s: 140px;
    }
    .main-hexa-container .solution-item-wrapper .solution-item-text-wrapper h6{
        font-size: 1em;
    }
    .solution-item-icon-wrapper{
        top:20%;
    }
    .solution-item-wrapper .solution-item-text-wrapper{
        top:52%;
        padding:0 1em;
    }
    .contact-content-item-wrapper{
        width: 100%;
    }
    .contact-content-item-wrapper.contact-address{
        display: block;
    }
    .contact-content-item-wrapper.contact-address .contact-content-item{
        width: 100%;
    }


}
@media screen and (max-width: 550px) {
    .main-services-item-wrapper,
    .main-services-item-wrapper:nth-child(3),
    .main-services-item-wrapper:nth-child(4){
        width: 100%;
        /*border-bottom: 1px solid #373737;*/
    }
    .main-services-item-icon-wrapper{
        margin-bottom: 0;
    }
    .main-services-item-wrapper:last-child{
        border:none;
    }
    .main-services-item-content-wrapper{
        display: -webkit-box;display: -ms-flexbox;display: flex;
        padding-top:1em; padding-bottom: 1em;
    }
    .main-services-item-icon-wrapper{
        -ms-flex-negative: 0;flex-shrink: 0;
    }
    .main-services-item-text-wrapper{
        margin-top: 2.5em;
    }
    .main-services-item-wrapper:hover .main-services-item-text-wrapper h5{
        margin-left: 0;
    }
    .main-services-item-wrapper:hover .main-services-item-icon-wrapper{
        padding:.2em;
        left:-20px;
        -webkit-transform: scale(100%);-ms-transform: scale(100%);transform: scale(100%);
    }
    .project-strip{
        margin:10% 0 10%;
    }
    .project-slider-nav{
        padding-top:2.5em;
    }
}
@media screen and (max-width: 480px) {
    .project-slider-nav{
        padding-top:3.5em;
    }
}
@media screen and (max-width: 440px) {
    .main-hexa-wrapper{
        padding-left: 1.5em;
    }
}
@media screen and (max-width: 409px) {
    #section-solutions{
        padding-bottom: 365px;
    }
    .main-hexa-wrapper{
        padding-left: 2.5em;
    }
}
@media screen and (max-width: 401px) {
    .main-banner-tagline2{
        padding-top:8%;
        -webkit-transform:scale(70%);-ms-transform:scale(70%);transform:scale(70%);
    }
    .project-screen,
    .project-screen .project-detail{
        width: 300px;
    }
    .project-screen .screen-frame{
        width: 300px; height: 187px;
    }
    .project-strip{
        margin:14% 0 14%;
    }
    .client-logo-item-wrapper{
        margin:1em;
        width: 80px;
    }
}

@media screen and (max-width: 401px) {
    .main-banner-tagline2{
        padding-top:3.5%;
    }    
}
/********************************************* //responsive breakpoints *************************************************/