@font-face {
    font-family: 'gilroy-light';
    src: url('fonts/gilroy-light.eot');
    src: url('fonts/gilroy-light.eot#iefix') format('embedded-opentype'), url('fonts/gilroy-light.woff2') format('woff2'), url('fonts/gilroy-light.woff') format('woff'), url('fonts/gilroy-light.ttf') format('truetype'), url('fonts/gilroy-light.svg?#gilroy-light') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'gilroy-extrabold';
    src: url('fonts/gilroy-extrabold.eot');
    src: url('fonts/gilroy-extrabold.eot#iefix') format('embedded-opentype'), url('fonts/gilroy-extrabold.woff2') format('woff2'), url('fonts/gilroy-extrabold.woff') format('woff'), url('fonts/gilroy-extrabold.ttf') format('truetype'), url('fonts/gilroy-extrabold.svg?#gilroy-extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}
:root {
    --yellow: #FED235;
}
/*General Styles*/
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    text-transform: capitalize;
}
body{
    height: 100%;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased
}
body.noscroll{
    overflow: hidden
}
ul{
    list-style: none
}
ul, li{
    margin: 0;
    padding: 0
}
a{
    text-decoration: none;
    color: inherit
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
h1, h2, h3, h4{
    font-weight: normal
}
img{
    border: none
}
.hidden{
    display: none !important
}
.mobile{
    display: none !important
}
.container-left{
    width: 52%;
    display: inline-block
}
.container-right{
    width: 45%;
    display: inline-block;
    margin: 0 0 0 3%
}
.scroll-down{
    min-width: 28px;
    height: 35px;
    background: url('../images/scroll-arrow.png') no-repeat center right;
    background-size: contain;
    position: absolute;
    bottom: 45px;
    right: 36px;
    z-index: 2
}
.scroll-down p{
    color: #191E2A;
    font-size: 24px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    padding: 4px 80px 0 0;
    opacity: 1;
    visibility: visible
}
.scroll-down p.hide{
    opacity: 0;
    visibility: hidden
}
.social.fixed{
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}
.social.fixed li{
    margin: 0 0 10px 0
}
.social.fixed li a{
    color: #191E2A;
    font-size: 15px;
    transition: .5s
}
.social.fixed li a:hover{
    color: #FFFFFF
}
.btn{
    width: 200px;
    height: 60px;
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 60px;
    border-radius: 30px;
    margin: 30px 0 0 0;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    transition: .5s;
    cursor: pointer
}
.btn.medium{
    width: 240px
}
.btn.large{
    width: 280px
}
.btn.yellow{
    background-color: #3e0e0e;
    color: #fff;
    border: 1px solid #2a191c;
}
.btn.yellow:hover{
    color: #000;
    background-color: transparent
}
.btn.white{
    color: #FFFFFF;
    border: 1px solid #FFFFFF
}
.btn.white:hover{
    background-color: #FFFFFF;
    color: #191E2A
}
.btn.black{
    color: #191E2A;
    border: 1px solid #191E2A;
    width: 220px;
    height: 55px;
    line-height: 54px
}
.btn.black:hover{
    color: #FFFFFF;
    background-color: #191E2A
}
.slick-initialized .slick-slide{
    outline: none !important
}
.grid-of-two {
    display: grid;
    grid-template-columns: repeat(2, 50%)
}
.grid-of-three {
    display: grid;
    grid-template-columns: repeat(3, 33.3%)
}
.grid-of-four {
    display: grid;
    grid-template-columns: repeat(4, 25%)
}
/*End General Styles*/
/*Homepage*/
header .fixed-menu{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999
}
header .fixed-menu .logo{
    width: 50px;
    height: 40px;
    background: url('../images/logo-icon.png') no-repeat center;
    background-size: contain;
    position: absolute;
    left: 20px;
    top: 35px;
    transition: .5s
}
header .fixed-menu .logo:hover{
    transform: rotate(-180deg)
}
header .fixed-menu .logo.white{
    background: url('../images/logo-icon-yellow.png') no-repeat center;
    background-size: contain
}
header.white.dark-logo .fixed-menu .logo{
    background: url('../images/logo-icon.png') no-repeat center;
    background-size: contain
}
header .fixed-menu .contact{
    width: 60px;
    height: 60px;
    border: 1px solid #1C1E29;
    border-radius: 50%;
    position: absolute;
    right: 19px;
    top: 25px;
    text-align: center;
    line-height: 60px;
    transition: .5s
}
header .fixed-menu .contact.white{
    border: 1px solid #FFFFFF
}
header .fixed-menu .contact i{
    font-size: 20px;
    transition: .5s
}
header .fixed-menu .contact.white i{
    color: #FFFFFF
}
header .fixed-menu .contact:after{
    content: '';
    width: 80px;
    border-top: 1px solid #000000;
    position: absolute;
    right: 50px;
    top: 50%;
    transition: .5s
}
header .fixed-menu .contact.white:after{
    border-top: 1px solid #FFFFFF
}
header .fixed-menu .contact:hover:after{
    width: 50px
}
.left-nav{
    min-height: 100vh;
    width: 50px;
    position: fixed;
    z-index: 9999
}
.left-nav .open-mobile-menu{
    font-size: 35px;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    transition: .5s
}
.left-nav .open-mobile-menu.white{
    color: #FFFFFF
}
.left-nav .copyrights{
    transform: rotate(-90deg);
    width: 95px;
    position: absolute;
    bottom: 84px;
    left: -8px
}
.left-nav .copyrights p{
    font-size: 14px;
    color: #242424;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    transition: .5s
}
.left-nav .copyrights.white p{
    color: #FFFFFF
}
header .main-menu{
    background-color: #3e0e0e;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    padding: 100px 250px;
    font-size: 0;
    left: -100%;
    transition: 1s
}
header .main-menu.active{
    left: 0
}
header .main-menu .close-menu{
    width: 18px;
    height: 18px;
    position: absolute;
    background: url('../images/close-menu.png') no-repeat center;
    background-size: contain;
    left: 35px;
    top: 50%;
    transform: translateY(-50%)
}
header .main-menu .top-container .container-left{
    height: 100%;
    width: 68%
}
header .main-menu .top-container .container-left .logo{
    width: 178px;
    height: 78px;
    background: url('../images/logo-manu.png') no-repeat center;
    background-size: contain;
    display: block
}
header .main-menu .top-container .container-left > div{
    margin: 9vh 0 10vh 0
}
header .main-menu .top-container .container-left > div p{
    font-size: 20px;
    color: #FED235;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
header .main-menu .top-container .container-left > div h2{
    font-size: 48px;
    line-height: 60px;
    color: #FFFFFF;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 10px 0 0 0
}
header .main-menu .top-container .container-left > div .goto-landing{
    color: #FFFFFF;
    width: 200px;
    height: 60px;
    line-height: 60px;
    border: 1px solid #FFFFFF;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    display: block;
    border-radius: 30px;
    text-align: center;
    margin: 30px 0 0 0;
    font-size: 16px;
    transition: .5s
}
header .main-menu .top-container .container-left > div .goto-landing:hover{
    background-color: #FFFFFF;
    color: #191E2A
}
header .main-menu .top-container .container-left ul li{
    display: inline-block;
    margin: 0 20px 0 0
}
header .main-menu .top-container .container-left ul li a{
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
    transition: .5s
}
header .main-menu .top-container .container-left ul li a:hover{
    color: #FED235
}
footer ul.social li a i{
    transition: .5s;
    position: relative
}
footer ul.social li a i.fa-instagram:after{
    content: '\f16d';
    position: absolute;
    font-family: FontAwesome;
    background: -webkit-radial-gradient(33% 100% circle, #f09433 4%, #9B36B7 30%, #D92E7F 62%, #F15245 85%, #FED373);
    background: radial-gradient(circle at 33% 100%, #ff3be7 4%, #ff3be7 28%, #f09433 62%, #F15245 85%, #FED373);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}
footer ul.social li a:hover i.fa-facebook{
    color: #3f59a3
}
footer ul.social li a:hover i.fa-twitter{
    color: #01affd
}
footer ul.social li a:hover i.fa-instagram:after{
    opacity: 1;
    visibility: visible
}
footer ul.social li a:hover i.fa-behance{
    color: #1273f7
}
footer ul.social li a:hover i.fa-youtube-play{
    color: #ff0a00
}
footer ul.social li a:hover i.fa-linkedin{
    color: #0270ad
}
header .main-menu .top-container .container-right{
    vertical-align: top;
    width: 27%
}
header .main-menu .top-container .container-right ul li{
    margin: 0 0 12px 0
}
header .main-menu .top-container .container-right ul li:last-child{
    margin: 0
}
header .main-menu .top-container .container-right ul li a{
    color: rgba(255, 255, 255, .5);
    font-size: 60px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    transition: .5s;
    display: block;
    position: relative
}
header .main-menu .top-container .container-right ul li a:before{
    content: '';
    position: absolute;
    width: 108px;
    height: 30px;
    background: url('../images/menu-item-hover.png') no-repeat center;
    background-size: contain;
    left: -130px;
    top: 25px;
    opacity: 0;
    transition: .5s
}
header .main-menu .top-container .container-right ul li a:hover{
    color: #FFD33D;
    transform: translateX(-25px)
}
header .main-menu .top-container .container-right ul li a:hover:before{
    opacity: 1
}
header .main-menu .bottom-container{
    border-top: 1px solid #9A9B9E;
    margin: 50px 0 0 0;
    padding: 70px 0 0 0
}
header .main-menu .bottom-container .list{
    width: 20.5%;
    display: inline-block;
    vertical-align: top
}
header .main-menu .bottom-container .list:first-child, header .main-menu .bottom-container .list:nth-child(4){
    width: 22.5%
}
header .main-menu .bottom-container .list:last-child{
    width: 14%
}
header .main-menu .bottom-container .list ul li{
    font-size: 18px;
    line-height: 30px;
    color: rgba(255, 255, 255, .5);
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
header .main-menu .bottom-container .list ul li.header{
    color: #FFFFFF;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.homepage section.header{
    min-height: 100vh;
    padding: 0 20px;
    position: relative;
    background-color: #feae35;
    overflow: hidden
}
.homepage section.header .logo{
    width: 726px;
    height: 200px;
    background: url('../images/logo.png') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1
}
.homepage section.header .bg{
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}
.homepage section.header .bg-1{
    height: 250px;
    width: 250px;
    background: linear-gradient(92deg, #CB7232 0%, #E9AF3F 51.49%, #F9D146 100%);
    box-shadow: 0 2px 68px 2px rgba(21,19,19,0.15);
    transition: 1s
}
.homepage section.header .bg-2{
    height: 350px;
    width: 350px;
    background: linear-gradient(150deg, #F9D146 0%, #E9AF3F 51.49%, #CB7232 100%);
    box-shadow: 0 2px 68px 2px rgba(21,19,19,0.15);
    transition: 1s
}
.homepage section.header .bg-3{
    height: 400px;
    width: 400px;
    background: linear-gradient(30deg, #F9D146 0%, #E9AF3F 51.49%, #CB7232 100%);
    box-shadow: 0 2px 68px 2px rgba(21,19,19,0.15);
    transition: 1s
}
.homepage section.header .circle-container{
    position: absolute;
    padding: 80px;
    box-sizing: content-box;
    transition: 1s
}
.homepage section.header .circle-container-1{
    height: 250px;
    width: 250px;
    top: 25%;
    left: 5%;
    animation: move-1 100s infinite
}
.homepage section.header .circle-container-2{
    height: 350px;
    width: 350px;
    bottom: 8%;
    right: 10%;
    animation: move-2 80s infinite;
    z-index: 1
}
.homepage section.header .circle-container-3{
    height: 400px;
    width: 400px;
    top: 5%;
    right: 0;
    animation: move-3 120s infinite;
    left: 0;
    margin: auto
}
.homepage section.header .bg-1{
}
.homepage section.header .bg-2{
}
.homepage section.header .bg-3{
}
@keyframes move-1 {
    0% {
        transform: translate(100px, 100px)
    }
    10% {
        transform: translate(50px, 50px)
    }
    20% {
        transform: translate(150px, 200px)
    }
    30% {
        transform: translate(250px, 300px)
    }
    40% {
        transform: translate(300px, 400px)
    }
    50% {
        transform: translate(400px, 500px)
    }
    60% {
        transform: translate(450px, 400px)
    }
    70% {
        transform: translate(350px, 320px)
    }
    80% {
        transform: translate(320px, 300px)
    }
    90% {
        transform: translate(250px, 250px)
    }
    100% {
        transform: translate(200px, 220px)
    }
    /*0% {
        top: 100px;
         left: 100px
    }
    */
    /*10% {
        top: 50px;
         left: 50px
    }
    */
    /*20% {
        top: 100px;
         left: 100px
    }
    */
    /*30% {
        top: 220px;
         left: 150px
    }
    */
    /*40% {
        top: 300px;
         left: 400px
    }
    */
    /*50% {
        top: 350px;
         left: 420px
    }
    */
    /*60% {
        top: 320px;
         left: 400px
    }
    */
    /*70% {
        top: 350px;
         left: 350px
    }
    */
    /*80% {
        top: 320px;
         left: 380px
    }
    */
    /*90% {
        top: 270px;
         left: 300px
    }
    */
    /*100% {
        top: 220px;
         left: 220px
    }
    */
}
@keyframes move-2 {
    0% {
        transform: translate(-50px, 0) scale(1.05)
    }
    10% {
        transform: translate(-20px, -20px) scale(1)
    }
    20% {
        transform: translate(0, 0)
    }
    30% {
        transform: translate(-50px, -50px)
    }
    40% {
        transform: translate(-120px, -80px) scale(1.1)
    }
    50% {
        transform: translate(-150px, -100px) scale(1.2)
    }
    60% {
        transform: translate(-250px, -150px) scale(1.3)
    }
    70% {
        transform: translate(-180px, -80px) scale(1.4)
    }
    80% {
        transform: translate(-200px, -100px) scale(1.3)
    }
    90% {
        transform: translate(-160px, -60px) scale(1.2)
    }
    100% {
        transform: translate(-100, -20px) scale(1.1)
    }
}
@keyframes move-3 {
    0% {
        transform: translate(100, 0) scale(1)
    }
    10% {
        transform: translate(0, -20px)
    }
    20% {
        transform: translate(70px, 20px)
    }
    30% {
        transform: translate(150px, 50px) scale(1.1)
    }
    40% {
        transform: translate(200px, 40px) scale(1.2)
    }
    50% {
        transform: translate(220px, 70px) scale(1.3)
    }
    60% {
        transform: translate(180px, 100px) scale(1.2)
    }
    70% {
        transform: translate(150px, 120px) scale(1.2)
    }
    80% {
        transform: translate(120px, 80px) scale(1.2)
    }
    90% {
        transform: translate(110px, 60px) scale(1.1)
    }
    100% {
        transform: translate(100, 40) scale(1.1)
    }
}
.homepage section.intro{
    padding: 200px;
    height: 100vh;
    font-size: 0;
    position: relative;
    z-index: 1
}
.homepage section.intro .container-left{
    vertical-align: top
}
.homepage section.intro .container-left h2{
    color: #191E2A;
    font-size: 72px;
    line-height: 80px;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.homepage section.intro .container-left p{
    color: rgba(34, 34, 34, .7);
    font-size: 24px;
    line-height: 36px;
    margin: 30px 0 0 0;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.homepage section.intro .container-right figure{
    width: 100%;
    height: 800px;
    background: url('../images/logo.png') no-repeat center;
    background-size: contain;
    display: inline-block;
    vertical-align: top;
    margin: 160px 0 0 0
}
.homepage section.about{
    padding: 90px 200px;
    min-height: 100vh;
    background-color: #2a191c;
    font-size: 0;
    position: relative;
    overflow: hidden
}
.homepage section.about .background{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: #7e4b4b70;
    position: absolute;
    top: -250px;
    left: -500px;
    bottom: 0;
    right: 0;
    transition: 1s
}
.homepage section.about .container-left{
    vertical-align: top;
    position: relative
}
.homepage section.about .container-left p{
    font-size: 30px;
    line-height: 48px;
    color: #FFFFFF;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    width: 86%
}
.homepage section.about .container-left figure{
    width: 100%;
    height: 440px;
    background: url('../images/graphic.png') no-repeat center;
    background-size: contain;
    margin: 100px 0 0 0
}
.homepage section.about .container-right{
    position: relative
}
.homepage section.about .container-right ul{
    margin: 100px 0 0 0
}
.homepage section.about .container-right ul li{
    position: relative;
    margin: 0 0 20px 0;
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden
}
.add-push-title-up{
    transition: .25s
}
.push-title-up{
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important
}
.homepage section.about .container-right ul li i{
    font-size: 18px;
    color: #FED235;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    font-style: normal;
    position: absolute;
    top: 0;
    line-height: 48px
}
.homepage section.about .container-right ul li h3{
    font-size: 50px;
    line-height: 72px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    color: #FFFFFF;
    padding: 0 0 0 40px
}
.homepage section.about .container-right p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(255, 255, 255, .6);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 40px 0 0 0;
    max-width: 400px
}
.homepage section.about .container-right .btn{
    margin: 40px 0 0 0
}
.homepage section.work{
    padding: 80px 0 0 200px;
    min-height: 100vh
}
.homepage section.work h2{
    font-size: 72px;
    line-height: 80px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.homepage section.work p{
    color: rgba(255, 255, 255, .7);
    font-size: 24px;
    line-height: 36px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 20px 0 0 0
}
.projects-carousel{
    margin: 20px 0 0 0;
    width: 100%;
    font-size: 0
}
.projects-carousel .slick-slide{
    margin: 0 30px 0 0
}
.projects-carousel li{
    width: 33.33%;
    height: 560px;
    display: inline-block;
    vertical-align: top
}
.projects-carousel li a{
    display: block;
    height: 100%;
    position: relative;
    box-shadow: 0 10px 30px 0 rgba(21,19,19,0.2);
    overflow: hidden;
    transition: .5s;
    outline: none
}
.projects-carousel li a .overlay{
    background-color: #3e0e0ef0;
    background-size: 240px;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 35px 40px;
    transition: .5s;
    opacity: 0
}
.projects-carousel li a:hover{
    transform: translateY(-20px)
}
.projects-carousel li a:hover .overlay{
    opacity: 1
}
.projects-carousel li a h3{
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.projects-carousel li a span{
    font-size: 18px;
    color: #222222;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.projects-carousel li a figure{
    height: 428px;
    width: 428px;
    background: linear-gradient(92deg, #CB7232 0%, #E9AF3F 51.49%, #F9D146 100%);
    box-shadow: -3px 46px 68px 14px rgba(21,19,19,0.15);
    border-radius: 50%;
    position: absolute;
    bottom: -42%;
    right: -28%
}
.carousel-navigation{
    text-align: right;
    padding: 0 40px 0 0
}
.homepage .carousel-navigation{
    padding: 25px 40px 0 0
}
.carousel-navigation .more{
    font-size: 20px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    display: inline-block;
    margin: 0 40px 0 0;
    vertical-align: middle
}
.carousel-navigation > div{
    display: inline-block;
    vertical-align: middle
}
.carousel-navigation .navigate{
    width: 28px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px
}
.carousel-navigation .prev{
    background: url('../images/arrow-left.png') no-repeat center;
    background-size: contain
}
.carousel-navigation .prev.disabled{
    opacity: .4
}
.carousel-navigation .next{
    background: url('../images/arrow-right.png') no-repeat center;
    background-size: contain
}
.carousel-navigation .next.disabled{
    opacity: .4
}
.projects-carousel .slick-list{
    padding: 20px 200px 30px 0
}
.projects-carousel .slick-prev, .projects-carousel .slick-next{
    display: none !important
}
.homepage .clients{
    padding: 80px 200px 0 200px;
    min-height: 240px
}
/* min-height: 100vh */
.homepage .clients .clients-list{
    font-size: 0;
    max-width: 1200px;
    margin: auto
}
.homepage .clients .clients-list li{
    width: 25%;
    display: inline-block;
    vertical-align: top
}
.homepage .clients .clients-list li a{
    width: 200px;
    height: 110px;
    display: block;
    margin: auto;
    filter: grayscale(100%)
}
.testimonials{
    margin: 130px 0 0 0
}
.testimonials li{
    text-align: center;
    min-height: 450px;
    background: url('../images/testimonial-bg.png') no-repeat center;
    background-size: cover;
    padding: 50px 0 100px 0;
    position: relative;
    outline: none
}
.testimonials li i{
    font-size: 74px;
    color: #191E2A;
    font-family: "Times New Roman", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold
}
.testimonials li p{
    color: #191E2A;
    font-size: 24px;
    line-height: 36px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    max-width: 1040px;
    margin: auto;
    padding: 0 40px;
    opacity: 1 !important;
    visibility: visible !important
}
.testimonials li h3{
    color: #191E2A;
    font-size: 24px;
    line-height: 24px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 40px 0 0 0;
    opacity: 1 !important;
    visibility: visible !important
}
.testimonials li span{
    color: #191E2A;
    font-size: 16px;
    line-height: 24px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 30px 0 0 0
}
.testimonials li figure{
    width: 180px;
    height: 180px;
    position: absolute;
    bottom: -90px;
    left: 0;
    right: 0;
    margin: auto;
    border: 4px solid #FFFFFF;
    border-radius: 50%
}
.testimonials .slick-list{
    padding: 0 0 100px 0
}
.testimonials .slick-prev, .clients .testimonials .slick-next{
    z-index: 1;
    transform: translateY(-50px)
}
.testimonials .slick-prev{
    left: 25px
}
.testimonials .slick-next{
    right: 25px
}
.testimonials .slick-prev:before, .testimonials .slick-next:before{
    width: 28px;
    height: 18px;
    display: block
}
.testimonials .slick-prev:before{
    content: '';
    background: url('../images/arrow-left.png') no-repeat center;
    background-size: contain
}
.testimonials .slick-next:before{
    content: '';
    background: url('../images/arrow-right.png') no-repeat center;
    background-size: contain
}
section.main-section.call-to-action{
    padding: 50px 200px 0 200px;
    font-size: 0
}
section.main-section.call-to-action .container-left{
    vertical-align: middle
}
section.main-section.call-to-action .container-left figure{
    width: 100%;
    height: 765px;
    background: url('../images/partner-img.png') no-repeat center;
    background-size: contain
}
section.main-section.call-to-action .container-right{
    vertical-align: middle
}
section.main-section.call-to-action .container-right p{
    color: rgba(25, 30, 42, .7);
    font-size: 24px;
    line-height: 48px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
section.main-section.call-to-action .container-right h2{
    color: #191E2A;
    font-size: 50px;
    line-height: 60px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 20px 0 0 0
}
section.main-section.awards{
    padding: 0 150px 20px 150px;
    font-size: 0
}
section.main-section.awards .content{
    background-color: #EDEDED;
    padding: 50px
}
section.main-section.awards .content > div{
    width: 26%;
    display: inline-block;
    margin: 0 7% 0 0;
    vertical-align: middle
}
section.main-section.awards .content > div h2{
    font-size: 50px;
    line-height: 60px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
section.main-section.awards .content > div p{
    font-size: 24px;
    line-height: 36px;
    color: #222222;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 20px 0 0 0
}
section.main-section.awards .content ul{
    width: 67%;
    display: inline-block;
    vertical-align: middle
}
section.main-section.awards .content ul li{
    display: inline-block;
    vertical-align: middle;
    width: 25%
}
section.main-section.awards .content ul li figure{
    margin: auto;
    width: 130px;
    height: 140px
}
section.main-section.awards .content ul li.cannes{
    width: 37%
}
section.main-section.awards .content ul li.cannes figure{
    width: 270px;
    height: 118px
}
section.main-section.awards .content ul li.awwards{
    width: 37%
}
section.main-section.awards .content ul li.awwards figure{
    width: 274px;
    height: 74px
}
section.main-section.awards .content ul li.adesign{
    width: 26%
}
section.main-section.awards .content ul li.adesign figure{
    width: 150px;
    height: 150px
}
/*End Homepage*/
/*About Page*/
.about-page .hero{
    padding: 120px 0 0 90px;
    height: calc(100vh + 200px);
    font-size: 0;
    overflow: hidden
}
.about-page .hero .container{
    background-color: #EDEDED;
    padding: 50px 0 0 110px;
    height: 100%
}
.about-page .hero .container-left{
    width: 37%
}
.about-page .hero h3{
    font-size: 44px;
    line-height: 60px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.about-page .hero h2{
    font-size: 70px;
    line-height: 85px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.about-page .hero p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 30px 0 0 0;
    max-width: 624px
}
.about-page .hero .btn{
    margin: 40px 0 0 0
}
.about-page .hero .container-right{
    width: 60%;
    margin: 0 0 0 3%;
    vertical-align: middle
}
.about-page .hero figure{
    width: 100%;
    height: 920px;
    background: url('../images/image-video.png') no-repeat center;
    background-size: contain;
    position: relative;
    top: -50px;
    z-index: 1;
    cursor: pointer
}
.about-page .values{
    position: relative;
    padding: 0 0 0 90px;
    height: 100vh;
    font-size: 0;
    top: -100px
}
.about-page .values .container-left{
    width: 40%;
    height: 100%;
    vertical-align: middle;
    background-color: #FFFFFF;
    z-index: 1;
    position: relative
}
.about-page .values h2{
    font-size: 72px;
    line-height: 80px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    padding: 0 110px;
    margin: auto;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden
}
.about-page .values .container-right{
    width: 60%;
    height: 100%;
    margin: 0;
    vertical-align: middle;
    position: relative
}
.about-page .values .container-right:before{
    content: '';
    background-color: #191E2A;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: 1.5s
}
.about-page .values .container-right.collapsed:before{
    left: -100%
}
.about-page .values .container-right ul{
    padding: 0 200px;
    top: 50%;
    transform: translateY(-50%);
    position: relative
}
.about-page .values .container-right ul li{
    margin: 0 0 50px 0;
    transition: 0.25s;
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden
}
.about-page .values .container-right ul li figure{
    display: inline-block;
    vertical-align: middle;
    width: 184px;
    height: 184px
}
.about-page .values .container-right ul li.creative figure{
    background: url('../images/creative-img.png') no-repeat center;
    background-size: contain
}
.about-page .values .container-right ul li.bold figure{
    background: url('../images/bold-img.png') no-repeat center;
    background-size: contain
}
.about-page .values .container-right ul li.transparent figure{
    background: url('../images/transparent-img.png') no-repeat center;
    background-size: contain
}
.about-page .values .container-right ul li > div{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 200px)
}
.about-page .values .container-right ul li > div h3{
    font-size: 45px;
    line-height: 80px;
    color: #FFFFFF;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.about-page .values .container-right ul li > div p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(255, 255, 255, .6);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    max-width: 490px
}
.about-page .team{
    padding: 100px 0 100px 200px
}
.about-page .team h2{
    font-size: 72px;
    line-height: 80px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.about-page .team p{
    font-size: 24px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 10px 0 0 0
}
.about-page .team ul{
    margin: 40px 0
}
.about-page .team ul li{
    display: inline-block;
    margin: 0 20px 0 0;
    outline: none
}
.about-page .team ul li figure, .about-page .team ul li img {
    width: 345px;
    height: 345px;
    margin: auto;
    position: relative;
    transition: .2ms ease-in-out
}
.about-page .team ul li.marwan-arban figure{
    background: url('../images/team.png') no-repeat -1105px -375px
}
.about-page .team ul li.aly-bassam figure{
    background: url('../images/team.png') no-repeat -740px -10px
}
.about-page .team ul li.ahmad-sheikh figure{
    background: url('../images/team.png') no-repeat -375px -375px
}
.about-page .team ul li.lara-haidamous figure{
    background: url('../images/team.png') no-repeat -1105px -10px
}
.about-page .team ul li.kholod-zughbor figure{
    background: url('../images/team.png') no-repeat -740px -740px
}
.about-page .team ul li.amir-sheikh figure{
    background: url('../images/team.png') no-repeat -740px -375px
}
.about-page .team ul li.emerson-lopez figure{
    background: url('../images/team.png') no-repeat -10px -740px
}
.about-page .team ul li.hayyan-aldela figure{
    background: url('../images/team.png') no-repeat -375px -740px
}
.about-page .team ul li.nour-sawma figure{
    background: url('../images/team.png') no-repeat -1105px -740px
}
.about-page .team ul li figure {
    border-radius: 0;
    transition: background-image .8s linear, border-radius .2s;
    transition-property: background-image, border-radius;
    transition-duration: 0.8s, 0.2s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
}
.about-page .team ul li:hover figure {
    border-radius: 50%;
}
.about-page .team ul li img {
    object-fit: cover
}
/*.about-page .team ul li:hover figure{
    border-radius: 50%
}
*/
.about-page .team ul li figure:before{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}
.about-page .team ul li:hover figure:before{
    opacity: 1;
    visibility: visible
}
.about-page .team ul li.marwan-arban figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -1470px -10px
}
.about-page .team ul li.aly-bassam figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -375px -10px
}
.about-page .team ul li.ahmad-sheikh figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -10px -10px
}
.about-page .team ul li.lara-haidamous figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -1105px -1105px
}
.about-page .team ul li.kholod-zughbor figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -740px -1105px
}
.about-page .team ul li.amir-sheikh figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -10px -375px
}
.about-page .team ul li.emerson-lopez figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -10px -1105px
}
.about-page .team ul li.hayyan-aldela figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -375px -1105px
}
.about-page .team ul li.nour-sawma figure:before{
    content: '';
    background: url('../images/team.png') no-repeat -1470px -375px
}
.about-page .team ul li h3{
    font-size: 30px;
    line-height: 46px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    margin: 10px 0 0 0
}
.about-page .team ul li span{
    font-size: 20px;
    color: rgba(25, 30, 42, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    text-align: center;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}
.about-page .team ul li:hover h3, .about-page .team ul li:hover span{
    opacity: 1;
    visibility: visible
}
.about-page .team ul .slick-list{
    padding: 0 180px 0 0
}
.about-page .team ul .slick-prev, .about-page .team ul .slick-next{
    display: none !important
}
.about-page .work{
    padding: 0 90px;
    height: 664px;
    margin: 0 0 100px 0
}
.about-page .work .container{
    background-color: #191E2A;
    height: 100%;
    position: relative;
    padding: 0 110px 0 50px
}
.about-page .work .img-block{
    display: inline-block;
    width: 800px;
    height: 800px;
    vertical-align: middle;
    position: relative;
    top: 100px
}
.about-page .work figure{
    width: 100%;
    height: 100%;
    background: url('../images/work-img.png') no-repeat center;
    background-size: contain
}
.about-page .work .container .text{
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px 0 0
}
.about-page .work .container .text h2{
    font-size: 72px;
    line-height: 80px;
    color: #FFFFFF;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    opacity: 0;
    visibility: hidden
}
.about-page .work .container .text p{
    font-size: 24px;
    line-height: 36px;
    color: rgba(255, 255, 255, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 10px 0 0 0;
    opacity: 0;
    visibility: hidden
}
.about-page .work .container .text .btn{
    opacity: 1 !important;
    visibility: visible !important
}
.about-page .clients{
    min-height: 100vh;
    padding: 100px 90px;
    text-align: center
}
.about-page .clients h2{
    font-size: 72px;
    line-height: 80px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    opacity: 0;
    visibility: hidden
}
.about-page .clients p{
    font-size: 24px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 10px auto 0 auto;
    opacity: 0;
    visibility: hidden
}
.about-page .clients ul.clients-list{
    font-size: 0;
    max-width: 1095px;
    margin: 100px auto 0 auto
}
.about-page .clients ul.clients-list li{
    display: inline-block;
    width: 25%;
    margin: 0 0 100px 0;
    vertical-align: middle;
    opacity: 0;
    visibility: hidden
}
.about-page .clients ul.clients-list li figure{
    margin: auto;
    width: 200px;
    max-width: 100%;
    height: 120px;
    filter: grayscale(100%)
}
.about-page .clients ul.clients-list li.rolex figure{
    background: url('../images/rolex_logo.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 110px
}
.about-page .clients ul.clients-list li.apple figure{
    background: url('../images/apple.png') no-repeat center;
    background-size: contain;
    width: 76px;
    height: 94px
}
.about-page .clients ul.clients-list li.ministry figure{
    background: url('../images/ministry-logo.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 114px
}
.about-page .clients ul.clients-list li.unicef figure{
    background: url('../images/unicef.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 134px
}
.about-page .clients ul.clients-list li.audi figure{
    background: url('../images/bank-audi.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 30px
}
.about-page .clients ul.clients-list li.al-arkan figure{
    background: url('../images/alarkan.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 105px
}
.about-page .clients ul.clients-list li.bbac figure{
    background: url('../images/bbac.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 78px
}
.about-page .clients ul.clients-list li.al-baraka figure{
    background: url('../images/al-baraka.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 86px
}
.about-page .clients ul.clients-list li.yeprem figure{
    background: url('../images/yeprem.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 96px
}
.about-page .clients ul.clients-list li.cham figure{
    background: url('../images/chamwings.png') no-repeat center;
    background-size: contain;
    width: 200px;
    height: 48px
}
.about-page .clients ul.clients-list li.total figure{
    background: url('../images/total-sa-logo.png') no-repeat center;
    background-size: contain;
    width: 185px;
    height: 58px
}
.about-page .clients ul.clients-list li.psg figure{
    background: url('../images/PSG-logo.png') no-repeat center;
    background-size: contain;
    width: 100px;
    height: 120px
}
.about-page .partners{
    min-height: 100vh;
    padding: 100px 90px 0 90px;
    text-align: center;
    background-color: #FAFAFA
}
.about-page .partners h2{
    font-size: 72px;
    line-height: 80px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    opacity: 0;
    visibility: hidden
}
.about-page .partners p{
    font-size: 24px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 10px 0 0 0;
    opacity: 0;
    visibility: hidden
}
.about-page .partners ul{
    font-size: 0;
    margin: 100px auto 0 auto;
    max-width: 1200px
}
.about-page .partners ul li{
    width: 33.33%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 100px 0;
    opacity: 0;
    visibility: hidden
}
.about-page .partners ul li span{
    font-size: 24px;
    line-height: 40px;
    color: #222222;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    display: block;
    margin: 40px 0 0 0;
    text-align: center
}
.about-page .partners ul li figure{
    margin: auto;
    width: 240px;
    height: 180px;
    max-width: 100%
}
.about-page .partners ul li.google figure{
    width: 192px;
    height: 100px;
    background: url('../images/google-partner.png') no-repeat center;
    background-size: contain;
    box-shadow: -1px 10px 24px 8px rgba(21,19,19,0.1)
}
.about-page .partners ul li.hubspot figure{
    width: 220px;
    height: 100px;
    background: url('../images/hubspot.png') no-repeat center;
    background-size: contain
}
.about-page .partners ul li.facebook figure{
    width: 280px;
    height: 70px;
    background: url('../images/fb-1.png') no-repeat center;
    background-size: contain
}
.about-page .partners ul li.facebook-marketing figure{
    width: 160px;
    height: 180px;
    background: url('../images/Marketing+Associate_600.png') no-repeat center;
    background-size: contain
}
.about-page .partners ul li.facebook-buying figure{
    width: 160px;
    height: 184px;
    background: url('../images/fb3.png') no-repeat center;
    background-size: contain
}
.about-page .partners ul li.facebook-media figure{
    width: 160px;
    height: 182px;
    background: url('../images/Media+Planning_600.png') no-repeat center;
    background-size: contain
}
.video-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99999;
    display: none
}
.video-overlay .video-container{
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1000px;
    height: 560px
}
.video-overlay video{
    outline: none;
    width: 100%
}
.video-overlay .close{
    position: absolute;
    top: -50px;
    right: -35px;
    font-size: 50px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    line-height: 40px;
    transition: .3s;
    color: #191E2A
}
.video-overlay .close:hover{
    color: #FED235
}
/*End About Page*/
/*Blog Page*/
.page-header{
    height: 100vh;
    background-color: #EDEDED;
    padding: 0 0 0 240px;
    position: relative;
    overflow: hidden
}
.page-header.header-style-5{
    padding: 0 0 0 200px
}
.page-header.header-style-3{
    background-color: #FFFFFF
}
.blog-post-page .page-header{
    padding: 0 0 0 240px
}
.header-style-1:before{
    content: '';
    width: 545px;
    height: 545px;
    background: url('../images/service-buble1.png') no-repeat top left;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 1s
}
.header-style-1:after{
    content: '';
    width: 750px;
    height: 750px;
    background: url('../images/service-buble2.png') no-repeat bottom right;
    background-size: contain;
    position: absolute;
    bottom: -10%;
    right: -5%;
    z-index: 1;
    transition: 2s
}
.header-style-1.collapse-circles:before{
    left: -100%
}
.header-style-1.collapse-circles:after{
    right: -100%
}
.header-style-2:before{
    /*content: '';*/
    /*width: 500px;*/
    /*height: 500px;*/
    /*background: url('../images/cs-buble2.png') no-repeat top right;*/
    /*background-size: contain;*/
    /*position: absolute;*/
    /*top: -20px;*/
    /*right: -20px;*/
    /*z-index: 1;*/
    /*transition: 1s*/
}
.header-style-2:after{
    /*content: '';*/
    /*width: 300px;*/
    /*height: 300px;*/
    /*background: url('../images/cs-buble1.png') no-repeat bottom left;*/
    /*background-size: contain;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*z-index: 1;*/
    /*transition: 1.5s*/
}
.header-style-2.collapse-circles:before{
    right: -100%
}
.header-style-2.collapse-circles:after{
    left: -100%
}
.header-style-4:before{
    content: '';
    width: 545px;
    height: 545px;
    background: url('../images/service-buble1.png') no-repeat top left;
    background-size: contain;
    position: absolute;
    top: -30px;
    left: -30px;
    z-index: 1;
    transition: 1s
}
.header-style-4:after{
    content: '';
    width: 750px;
    height: 750px;
    background: url('../images/service-buble2.png') no-repeat bottom right;
    background-size: contain;
    position: absolute;
    bottom: -75px;
    right: 0;
    z-index: 1;
    transition: 2.5s
}
.header-style-4.collapse-circles:before{
    left: -100%
}
.header-style-4.collapse-circles:after{
    right: -100%
}
.header-style-5:after{
    content: '';
    width: 444px;
    height: 860px;
    background: url('../images/buble-contact-hero.png') no-repeat center right;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
    transition: 1s
}
.header-style-5.collapse-circles:after{
    right: -100%
}
.clutch_container {
    text-align: center
}
.clutch_container .clutch-widget {
    width: 50%;
    display: inline-block
}
.sortlist_container {
    text-align: center;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(3, 26%);
    justify-content: center;
}
.sortlist_container img {
    height: 100px;
    width: 100%
}
.sortlist_entry {
    display:inline-block;
}
.page-header .title{
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 0 20px 0
}
.page-header .title h2{
    font-size: 30px;
    line-height: 36px;
    color: rgba(25, 30, 42, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.page-header .title h1{
    font-size: 62px;
    line-height: 68px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    max-width: 860px;
    margin: 10px 0 0 0;
    padding: 0 40px 0 0
}
.page-header.header-style-5 .title h1{
    max-width: 1240px;
    padding: 0 80px 0 0
}
.page-header .title h1 span{
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.case-studies-page .page-header .title h1{
    max-width: 1090px
}
.blog-post-page .page-header .title h1{
    max-width: initial;
    padding: 0 200px 0 0
}
.page-header .title h3{
    font-size: 30px;
    line-height: 44px;
    color: rgba(25, 30, 42, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 20px 0 0 0;
    max-width: 625px
}
.page-header .title p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 30px 0 0 0;
    max-width: 610px
}
.page-header.header-style-3{
    padding: 120px 0 0 90px
}
.case-study-page {
    overflow: hidden
}
.case-study-page .page-header.header-style-3{
    height: auto
}
.page-header.header-style-3 .container{
    background-color: #EDEDED;
    height: 100%;
    padding: 0 150px;
    position: relative
}
.page-header.header-style-3 .title{
    top: 50%
}
.blog-page .page-header .title h1, .blog-page .page-header .title h2{
    opacity: 0;
    visibility: hidden
}
.blog-page .recommended-articles{
    padding: 0 90px;
    position: relative;
    margin: -13.5vh 0 120px 0;
    z-index: 1
}
.blog-page .recommended-articles ul li{
    height: 800px
}
.blog-page .recommended-articles ul li a{
    display: block;
    height: 100%
}
.blog-page .recommended-articles ul li a article{
    display: block;
    height: 100%
}
.blog-page .recommended-articles ul li article figure{
    height: 100%
}
.blog-page .recommended-articles ul li article .details{
    padding: 60px 150px 80px 150px;
    height: 100%;
    position: relative
}
.blog-page .recommended-articles ul li article .details span{
    color: #FFFFFF;
    font-size: 26px;
    line-height: 36px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.blog-page .recommended-articles ul li article .details h2{
    color: #FFFFFF;
    font-size: 72px;
    line-height: 36px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    position: absolute;
    bottom: 90px;
    left: 150px
}
.blog-page .recommended-articles .slick-prev, .blog-page .recommended-articles .slick-next{
    z-index: 1
}
.blog-page .recommended-articles .slick-prev{
    left: 25px;
    width: 35px;
    height: 38px
}
.blog-page .recommended-articles .slick-next{
    right: 40px;
    width: 35px;
    height: 38px
}
.blog-page .recommended-articles .slick-prev:before, .blog-page .recommended-articles .slick-next:before{
    width: 35px;
    height: 38px;
    display: block
}
.blog-page .recommended-articles .slick-prev:before{
    content: '';
    background: url('../images/arrow-left-disabled.png') no-repeat center;
    background-size: contain
}
.blog-page .recommended-articles .slick-next:before{
    content: '';
    background: url('../images/arrow-right-disabled.png') no-repeat center;
    background-size: contain
}
.blog-page .articles{
    padding: 0 90px 120px 90px
}
.blog-page .articles.empty_carousel {
    padding-top: 40px
}
.filters{
    text-align: center;
    font-size: 0
}
.filters li{
    display: inline-block;
    margin: 0 15px 15px 0
}
.filters li a{
    display: block;
    font-size: 16px;
    color: rgba(25, 30, 42, .8);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    text-align: center;
    padding: 12px 20px;
    border: 1px solid #191E2A;
    opacity: 0.8;
    border-radius: 30px;
    transition: .5s
}
.filters li a:hover, .filters li a.active{
    color: #FFFFFF;
    background-color: #191E2A;
    opacity: 1
}
.blog-page .articles .articles-list{
    margin: 100px 0 0 0;
    font-size: 0
}
.blog-page .articles .articles-list article{
    height: 580px;
    margin: 0 0 100px 0
}
.blog-page .articles .articles-list article a figure{
    width: 50%;
    height: 100%;
    display: inline-block;
    margin: 0 5% 0 0;
    vertical-align: middle
}
.blog-page .articles .articles-list article a > div{
    width: 45%;
    display: inline-block;
    vertical-align: middle
}
.blog-page .articles .articles-list article a > div span{
    font-size: 20px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    text-transform: uppercase
}
.blog-page .articles .articles-list article a > div h2{
    font-size: 50px;
    line-height: 60px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 20px 0 0 0
}
.blog-page .articles .articles-list article a > div p{
    font-size: 24px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 20px 0 0 0
}
.blog-page .articles .btn{
    margin: 120px auto 0 auto
}
/*End Blog Page*/
/*Blog Post Page*/
.blog-post-page .page-header .title h1, .blog-post-page .page-header .title h3{
    opacity: 0;
    visibility: hidden
}
.blog-post-page .main-article{
    padding: 0 90px;
    margin: -30vh 0 200px 0;
    position: relative;
    z-index: 1
}
.blog-post-page .main-article .main-figure{
    height: 800px
}
.blog-post-page .main-article .article-content{
    margin: 100px auto 0 auto;
    max-width: 1200px
}
.blog-post-page .main-article .article-content p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(25, 30, 42, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 40px 0
}
.blog-post-page .main-article .article-content h2{
    font-size: 40px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 40px 0
}
.blog-post-page .main-article .article-content img{
    width: 100%;
    margin: 100px 0
}
.blog-post-page .main-article .article-content .columns{
    font-size: 0;
    margin: 150px 0 0 0
}
.blog-post-page .main-article .article-content .columns .col{
    vertical-align: top;
    display: inline-block
}
.blog-post-page .main-article .article-content .columns .col-left{
    width: 45%;
    margin: 0 7% 0 0
}
.blog-post-page .main-article .article-content .columns .col-right{
    width: 48%
}
.blog-post-page .main-article .article-content .columns .col img{
    margin: 0
}
.blog-post-page .main-article .article-content .columns .col h2{
    margin: 0 0 30px 0
}
.blog-post-page .main-article .article-content .columns .col p{
    margin: 0 0 30px 0
}
/*End Blog Post Page*/
/*Case Studies*/
.case-studies-page .page-header .title h1, .case-studies-page .page-header .title h2{
    opacity: 0;
    visibility: hidden
}
.case-studies-page .case-studies{
    padding: 120px 90px 0 90px
}
.case-studies-page .case-studies .cases-list{
    font-size: 0;
    margin: 100px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 2%
}
.case-studies-page .case-studies .cases-list li{
    height: 680px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 5% 0
}
/*.case-studies-page .case-studies .cases-list li:nth-child(odd){
    margin: 0 5% 0 0
}
*/
.case-studies-page .case-studies .cases-list li a{
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden
}
.case-studies-page .case-studies .cases-list li a .overlay{
    background-color: #2d0102d1;
    background-size: 240px;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 35px 40px;
    transition: .5s;
    opacity: 0
}
.case-studies-page .case-studies .cases-list li a:hover .overlay{
    opacity: 1
}
.case-studies-page .case-studies .cases-list li a h3{
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.case-studies-page .case-studies .cases-list li a span{
    font-size: 18px;
    color: #222222;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.case-studies-page .case-studies .cases-list li a figure{
    height: 428px;
    width: 428px;
    background: linear-gradient(92deg, #CB7232 0%, #E9AF3F 51.49%, #F9D146 100%);
    box-shadow: -3px 46px 68px 14px rgba(21,19,19,0.15);
    border-radius: 50%;
    position: absolute;
    bottom: -30%;
    right: -12%
}
.case-studies-page .case-studies .cases-list li a figure p{
    font-size: 20px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    position: absolute;
    top: 30%;
    height: 50px;
    left: 22%
}
.case-studies-page .case-studies .cases-list li a figure p i{
    width: 25px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
    background: url('../images/arrow-right.png') no-repeat center;
    background-size: contain
}
section.main-section.call-to-action.style-2{
    padding: 50px 200px 200px 200px
}
section.main-section.call-to-action.style-2 .container-right{
    width: 100%;
    margin: 0;
    display: block;
    text-align: center
}
section.main-section.call-to-action.style-2 .container-right h2{
    font-size: 72px;
    margin: 5px 0 0 0
}
section.main-section.call-to-action.style-2 .container-right .btn{
    margin: 50px auto 0 auto
}
/*End Case Studies*/
/*Case Study Page*/
.case-study-page .page-header{
    font-size: 0;
    overflow: visible
}
.case-study-page .page-header .title{
    position: relative;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    top: initial;
    transform: none;
    padding: 240px 30px 240px 0
}
/*.case-study-page .page-header figure{
    height: 85vh;
     width: 50%;
     background: url('../images/cs-hero-image.png') no-repeat center;
     background-size: contain;
     display: inline-block;
     vertical-align: middle;
     position: relative;
     margin-top: 270px
}
*/
.case-study-page .page-header figure, .case-study-page .page-header img{
    position: absolute;
    height: 500px;
    width: 500px;
    display: inline-block;
    vertical-align: top;
    margin-top: 220px;
    border-radius: 50%;
    -webkit-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    object-fit: cover
}
/*.case-study-page .page-header .case_study_profile_img_container {
    position: absolute;
     height: 500px;
     width: 500px;
     display: inline-block;
     vertical-align: top;
     margin-top: 220px;
}
*/
/*.case-study-page .page-header .case_study_profile_img_container img {
    height: 100%;
     width: 100%;
     border-radius: 50%;
     -webkit-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
     object-fit: cover
}
*/
.case-study-page .page-header figure::before, .case-study-page .page-header img::before {
    content: '';
    background: #2d0102;
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    right: -30px;
    opacity: 0.9;
}
.case-study-page .page-header .case_study_profile_img_container::before {
    content: '';
    background: #f0c630;
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    right: -30px;
    opacity: 0.9;
}
.case-study-page .case-study{
    font-size: 0;
    padding: 150px 0 50px 0
}
.case-study-page .case-study .intro{
    max-width: 70%;
    margin: 0 auto 100px auto;
    padding: 0 70px
}
.case-study-page .case-study .intro .container-left{
    width: 60%;
    margin: 0 10% 0 0;
    vertical-align: top
}
.case-study-page .case-study .intro .container-right{
    width: 30%;
    margin: 0;
    vertical-align: top
}
.case-study-page .case-study .intro .container-left h2, .case-study-page .case-study .intro .container-left h3, .case-study-page .case-study .text .container h3, .case-study-page .case-study .text .container h4 {
    font-size: 40px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.case-study-page .case-study .intro p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 25px 0 0 0
}
.case-study-page .case-study .intro ul li{
    color: #222222;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    font-size: 18px;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    position: relative
}
.case-study-page .case-study .intro ul li:before{
    content: '';
    width: 10px;
    border-top: 2px solid #F9CE34;
    position: absolute;
    top: 12px;
    left: 0
}
/*.case-study-page .case-study .text .image-container{
    padding: 0 90px
}
*/
.case-study-page .case-study .text .container .image-container {
    padding: 0 90px;
    max-width: 100%
}
.case-study-page .case-study .text .container .image-container img {
    max-width: 100%
}
.case-study-page .case-study .text .img-full{
    width: 100%;
    margin: 0 0 100px 0;
    height: auto
}
.case-study-page .case-study .text .img-half{
    width: 47%;
    margin: 0 0 100px 0;
    display: inline-block;
    vertical-align: top
}
.case-study-page .case-study .text .img-half.add-margin{
    margin: 0 6% 100px 0
}
/*.case-study-page .case-study .text .container{
    max-width: 1320px;
     margin: 0 auto 100px auto;
     padding: 0 70px
}
*/
.case-study-page .case-study .text .container > * {
    max-width: 70%;
    margin: auto;
    padding: 0 70px
}
.case-study-page .case-study .text .container *:not(.btn) {
    font-size: 20px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    line-height: 36px;
    color: rgba(34, 34, 34, .7)
}
.case-study-page .case-study .text .container h2 {
    font-weight: bold
}
.case-study-page .case-study .text .container img {
    max-width: 100%
}
.case-study-page .case-study .text .container ul {
    list-style: disc;
    list-style-position: inside
}
.case-study-page .case-study .text .container li {
    max-width: 100%;
    padding: 0;
}
.case-study-page .case-study .text .container p {
    margin: 0 auto 100px auto;
    padding: 0 70px
}
.case-study-page .case-study .text .container h2{
    font-size: 40px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 auto 40px auto;
    padding: 0 70px
}
.case-study-page .case-study .text .container p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 auto 40px auto
}
.case-study-page .case-study .intro .container-left *:not(.btn) {
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 auto 40px auto;
    max-width: 100%
}
.case-study-page .case-study .intro .container-left h2 {
    font-weight: bold
}
.case-study-page .case-study .text .carousel-container{
    background: linear-gradient(90deg, #fed234 50%, #FFFFFF 50%);
    height: 720px;
    padding: 110px 90px 110px 0;
    margin: 0 0 120px 0
}
.case-study-page .case-study .text .carousel-container ul .slick-slide{
    margin: 0 30px 0 0
}
.case-study-page .case-study .text .carousel-container ul li{
    height: 500px;
    display: inline-block;
    outline: none
}
.case-study-page .case-study .text .carousel-container ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.case-study-page .case-study .text .carousel-container ul li.bg1:first-child{
    background: url('../images/case-study-1-img-5.png') no-repeat center;
    background-size: cover
}
.case-study-page .case-study .text .carousel-container ul li.bg2:first-child{
    background: url('../images/case-study-1-img-6.png') no-repeat center;
    background-size: cover
}
.case-study-page .case-study .text .carousel-container ul li.bg3:first-child{
    background: url('../images/case-study-1-img-7.png') no-repeat center;
    background-size: cover
}
.case-study-page .case-study .text .carousel-container .carousel-navigation{
    margin: 40px 0 0 0;
    padding: 0 20px 0 0
}
.case-study-page .case-study .text blockquote{
    max-width: 1540px;
    margin: 0 auto 100px auto;
    position: relative;
    padding: 100px 120px 100px 240px;
    height: 440px
}
.case-study-page .case-study .text blockquote:before{
    content: '';
    width: 440px;
    height: 440px;
    background: url('../images/yellow-circle.png') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 120px;
    z-index: -1
}
.case-study-page .case-study .text blockquote i{
    color: #191E2A;
    font-size: 74px;
    font-family: "Times New Roman", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: 60px
}
.case-study-page .case-study .text blockquote p{
    color: #191E2A;
    font-size: 28px;
    line-height: 40px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    max-width: 1180px;
    margin: 0 auto 30px auto
}
.case-study-page .case-study .text blockquote h4{
    color: #191E2A;
    font-size: 24px;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.case-study-page .case-study .text .columns{
    padding: 0 90px;
    margin: 150px 0 0 0
}
.case-study-page .case-study .text .columns .img-half{
    vertical-align: middle
}
.case-study-page .case-study .text .columns .container{
    width: 47%;
    display: inline-block;
    vertical-align: middle;
    padding: 0 90px 0 0
}
/*End Case Study Page*/
/*Services Page*/
.services-page .page-header .title h1, .services-page .page-header .title h2{
    opacity: 0;
    visibility: hidden
}
.services-page .page-header .title h1{
    max-width: 1090px
}
.services-page .services .service{
    padding: 200px 240px 0 240px;
    font-size: 0
}
.services-page .services .service h2{
    color: #191E2A;
    font-size: 40px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    opacity: 0;
    visibility: hidden;
    transition: .5s
}
.services-page .services .service p{
    color: #222222;
    font-size: 20px;
    line-height: 36px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 40px 0 0 0;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}
.services-page .services .service ul{
    margin: 40px 0 0 0;
    font-size: 0
}
.services-page .services .service ul li{
    color: rgba(34, 34, 34, .7);
    font-size: 18px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
    margin: 0 0 8px 0;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: .25s
}
.services-page .services .service .container-left{
    width: 45%;
    display: inline-block;
    vertical-align: middle
}
.services-page .services .service .container-right{
    width: 46%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 9%
}
.services-page .services .service .btn{
    margin: 40px 0 0 0
}
.services-page .services .service figure{
    width: 100%;
    height: 600px
}
.services-page .faq{
    padding: 250px 200px 150px 200px;
    max-width: 1600px;
    margin: auto
}
.services-page .faq h2{
    font-size: 72px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    text-align: center;
    opacity: 0;
    visibility: hidden
}
.services-page .faq p{
    font-size: 24px;
    color: rgba(25, 30, 42, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    text-align: center;
    margin: 30px 0 0 0;
    opacity: 0;
    visibility: hidden
}
.services-page .faq ul{
    margin: 90px 0 0 0
}
.services-page .faq ul li{
    padding: 30px 100px 30px 0;
    border-top: 1px solid #181719;
    position: relative;
    cursor: pointer;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: .25s
}
.services-page .faq ul li:last-child{
    border-bottom: 1px solid #181719
}
.services-page .faq ul li:after{
    content: '';
    width: 28px;
    height: 35px;
    background: url('../images/scroll-arrow.png') no-repeat center;
    background-size: contain;
    position: absolute;
    right: 50px;
    top: 52px;
    transform: rotate(-180deg);
    transition: .5s
}
.services-page .faq ul li.active:after{
    transform: rotate(0deg)
}
.services-page .faq ul li h3{
    font-size: 30px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 20px 0
}
.services-page .faq ul li .answer{
    font-size: 20px;
    line-height: 30px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    color: rgba(32, 32, 32, .7);
    margin: 30px 0 0 0;
    display: none
}
.services-page .faq ul li .answer.active{
    display: block
}
.services-page .faq ul li p {
    visibility: visible;
    opacity: 1;
    text-align: left;
    margin: 0
}
.services-page .faq ul li a {
    color: #FED235!important;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
/*End Services Page*/
/*Service Page*/
.service-page .page-header{
    font-size: 0;
    overflow: visible
}
.service-page .page-header .title{
    position: relative;
    width: 50%;
    margin-top: 40px;
    display: inline-block;
    vertical-align: middle;
    top: initial;
    transform: none
}
.service-page .page-header figure{
    height: 500px;
    width: 500px;
    border-radius: 50%;
    position: absolute;
    bottom: -130px;
    right: 10%;
    -webkit-box-shadow: 10px -3px 17px -8px rgb(0 0 0 / 75%);
    -moz-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px -3px 17px -8px rgb(0 0 0 / 75%);
    transition: .3s ease-in-out
}
.service-page .page-header figure::before {
    content: '';
    background: #f0c630;
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    right: -30px;
    opacity: 0.9;
}
.service-page .service{
    font-size: 0;
    padding: 150px 0 0 0
}
.service-page .service ul {
    list-style: disc;
    list-style-position: inside
}
.service-page .service ol {
    list-style-position: inside
}
/*.service-page .page-header figure, .service-page .page-header img {
    width: 400px;
     height: 400px;
}
*/
/*.service-page .page-header figure, .service-page .page-header img{
    position: absolute;
     height: 500px;
     width: 500px;
     display: inline-block;
     vertical-align: top;
     margin-top: 220px;
     border-radius: 50%;
     -webkit-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px -3px 17px -8px rgba(0,0,0,0.75);
     object-fit: cover
}
*/
/*.service-page .page-header figure::before, .service-page .page-header img::before {
    width: 110px;
     height: 110px;
     top: -10px;
     right: -10px
}
*/
.service-page .service .intro{
    margin: 0 auto 100px auto;
    padding: 0 240px
}
.service-page .service .intro .container-left{
    width: 68%;
    margin: 0 7% 0 0;
    vertical-align: top
}
.service-page .service .intro .container-right{
    width: 25%;
    margin: 0;
    vertical-align: top
}
.service-page .service .intro h2{
    font-size: 40px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 50px 0
}
.service-page .service .intro p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 25px 0
}
.service-page .service li{
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    font-size: 18px;
    margin: 0 0 15px 0
}
.service-page .service li.main{
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    font-size: 30px;
    margin: 0 0 25px 0
}
.service-page .service .text .container{
    margin: 0 auto 100px auto;
    padding: 0 240px
}
.service-page .service .text .container h2{
    font-size: 40px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 40px 0
}
.service-page .service .text .container p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(34, 34, 34, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 40px 0
}
.service-page .service .projects-carousel{
    padding: 0 0 0 90px;
    margin: -20px 0 40px 0
}
.service-page .service .projects-carousel .slick-list{
    padding: 20px 300px 30px 0
}
.service-page .service .testimonials-container{
    padding: 0 90px;
    margin: 0 0 150px 0
}
.service-page .service .testimonials-container li{
    padding: 100px
}
.service-page .service .testimonials-container li p{
    font-size: 40px;
    line-height: 57px;
    max-width: 1200px
}
.service-page .service .services{
    background-color: #FAFAFA;
    padding: 115px 90px;
    margin: 0 0 140px 0
}
.service-page .service .services .container{
    padding: 0 140px;
    margin: 0 !important
}
.service-page .service .services .container h2{
    color: #191E2A;
    font-size: 40px;
    text-align: center;
    margin: 0 !important
}
.service-page .service .services .container ul{
    font-size: 0;
    margin: 60px 0 0 0
}
.service-page .service .services .container ul li{
    width: 20.5%;
    display: inline-block;
    vertical-align: top;
    margin: 0 6% 0 0
}
.service-page .service .services .container ul li:last-child{
    margin: 0
}
.service-page .service .services .container ul li figure{
    width: 100%;
    height: 270px
}
.service-page .service .services .container ul li h3{
    color: #191E2A;
    font-size: 24px;
    line-height: 30px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 50px 0 0 0
}
.service-page .service .services .container ul li p{
    color: rgba(34, 34, 34, .7);
    font-size: 18px;
    line-height: 34px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 30px 0 0 0
}
.service-page .service .services .container .btn.black{
    margin: 100px auto 0 auto
}
.service-page .service .text .container:last-child{
    margin: 0 auto 40px auto
}
/*End Service Page*/
/*Contact Page*/
input.alert, textarea.alert {
    border-bottom: 1px solid red!important;
}
.contact-page .page-header .title h1, .contact-page .page-header .title h2{
    opacity: 0;
    visibility: hidden
}
.contact-page .locations{
    padding: 0 90px 160px 90px;
    overflow: hidden
}
.contact-page .locations .container{
    padding: 140px 0 140px 110px;
    font-size: 0;
    position: relative
}
.contact-page .locations .container .details{
    width: calc(100% - 870px);
    display: inline-block;
    vertical-align: middle
}
.contact-page .locations .container .details:before{
    content: '';
    background: linear-gradient(90deg, #191E2A 72%, #FFFFFF 28%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 1s
}
.contact-page .locations .container .details.collapse:before{
    left: -100%
}
.contact-page .locations .container .details h2{
    font-size: 50px;
    color: #FFFFFF;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    opacity: 0;
    visibility: hidden
}
.contact-page .locations .container .details ul{
    margin: 75px 0 0 0
}
.contact-page .locations .container .details ul li{
    margin: 0 0 40px 0;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: .25s
}
.contact-page .locations .container .details ul li:last-child{
    margin: 0
}
.contact-page .locations .container .details ul li > div{
    display: inline-block;
    width: 30%;
    vertical-align: top;
    padding: 0 20px 0 0
}
.contact-page .locations .container .details ul li > div:last-child{
    width: 70%;
    text-align: right;
}
.contact-page .locations .container .details ul li h3{
    color: #FFFFFF;
    font-size: 30px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    border-bottom: 1px solid #FED235;
    padding: 0 0 5px 0;
    display: inline-block;
    transition: .5s;
    cursor: pointer
}

.contact-page .locations .container .details ul li h3.active{
    color: #FED235
}
.contact-page .locations .container .details ul li h4{
    font-size: 18px;
    color: #FFFFFF;
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif
}
.contact-page .locations .container .details ul li span{
    font-size: 16px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, .5);
    margin: 5px 0 0 0;
    display: block;
    line-height: 20px
}
.contact-page .locations .container .map{
    width: 870px;
    height: 800px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: 1s;
    right: 0
}
.contact-page .locations .container .map.collapse{
    right: -100%
}
.contact-page .locations .container .map img{
    width: 100%;
    height: 100%
}
.contact-page .locations .container .map i{
    width: 28px;
    height: 28px;
    background: url('../images/pin-map.png') no-repeat center;
    background-size: contain;
    position: absolute;
    border-radius: 50%;
    transition: .5s
}
.contact-page .locations .container .map i.saudi{
    top: 444px;
    left: 510px
}
.contact-page .locations .container .map i.lebanon{
    top: 122px;
    left: 155px
}
.contact-page .locations .container .map i.uae{
    top: 425px;
    right: 65px
}
.contact-page .locations .container .map i.syria{
    top: 140px;
    left: 195px
}
.contact-page .locations .container .map i.qatar{
    top: 435px;
    right: 175px
}
.contact-page .locations .container .map i.bahrain{
    top: 385px;
    right: 220px
}
.contact-page .locations .container .map i.egypt{
    top: 270px;
    left: 35px
}
.contact-page .locations .container .map i.active{
    transform: scale(1);
    animation: pulse 1.5s infinite
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
.contact-page .locations .container .scroll-to-contact{
    font-size: 24px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    position: absolute;
    bottom: 0;
    right: -55px
}
.contact-page .locations .container .scroll-to-contact span{
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.contact-page .locations .container .scroll-to-contact i{
    width: 28px;
    height: 35px;
    background: url('../images/scroll-arrow.png') no-repeat center;
    background-size: contain;
    display: inline-block;
    margin: 0 0 0 40px;
    vertical-align: middle
}
.contact-page .contact{
    padding: 20px 70px 0 70px;
    max-width: 910px;
    margin: 0 auto 250px auto
}
.contact-page .contact h3{
    font-size: 30px;
    color: rgba(25, 30, 42, .7);
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
    text-align: center;
    opacity: 0;
    visibility: hidden
}
.contact-page .contact h2{
    font-size: 60px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    text-align: center;
    opacity: 0;
    visibility: hidden
}
.contact-page .contact .form{
    margin: 120px 0 0 0;
    font-size: 0
}
.contact-page .contact .form .full{
    margin: 0 0 40px 0;
    transition: .25s;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden
}
.contact-page .contact .form .full input{
    width: 48%;
    display: inline-block;
    border: none;
    border-bottom: 1px solid #191E2A;
    outline: none;
    margin: 0 4% 0 0;
    font-size: 16px;
    padding: 0 0 10px 0;
    color: #191E2A;
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif

    vertical-align: top
}
.contact-page .contact .form .full input:focus {
    outline: none;
    box-shadow: none;
}
.contact-page .contact .form .full input:last-child{
    margin: 0
}
.contact-page .contact .form .full textarea{
    min-width: 100%;
    max-width: 100%;
    border: none;
    border-bottom: 1px solid #191E2A;
    outline: none;
    font-size: 16px;
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif
    padding: 20px 0 35px 0;
    color: #191E2A;
    resize: none
}
.contact-page .contact .form .full textarea:focus {
    outline: none;
    box-shadow: none;
}
.contact-page .contact .form .full input::-webkit-input-placeholder, .contact-page .contact .form .full textarea::-webkit-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-page .contact .form .full input:-moz-placeholder, .contact-page .contact .form .full textarea:-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-page .contact form .full input::-moz-placeholder, .contact-page .contact .form .full textarea::-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-page .contact .form .full input:-ms-input-placeholder, .contact-page .contact .form .full textarea:-ms-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-page .contact .form .btn{
    margin: 20px 0 0 0;
    display: inline-block
}
.contact-page .contact .form p{
    font-size: 18px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    color: rgba(24, 30, 42, .5);
    display: inline-block;
    width: calc(100% - 200px);
    text-align: right
}
.contact-page .contact .form p a{
    color: #191E2A
}
.countries_parent_container {
    position: relative;
    z-index: 1
}
.countries-codes{
    width: 17%;
    display: inline-block;
    border-bottom: 1px solid #191E2A;
    margin: 0 3% 0 0;
    vertical-align: top;
    height: 30px;
    position: relative
}
.countries-codes span{
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #191E2A;
    position: relative;
    display: block;
    padding: 0 20px 0 0;
    cursor: pointer
}
.countries-codes span:after{
    content: '\f106';
    font-family: FontAwesome;
    font-size: 20px;
    position: absolute;
    right: 0;
    transition: .3s;
    top: 0
}
.countries-codes span.expand:after{
    transform: rotate(180deg);
    top: 2px
}
.countries-codes ul{
    position: absolute;
    background-color: #FFFFFF;
    width: 100%;
    border-top: 1px solid #191E2A;
    top: 30px;
    max-height: 200px;
    overflow-y: scroll;
    display: none;
    box-shadow: 0 0 4px 0 rgb(140 138 140)
}
.countries-codes ul li{
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #191E2A;
    border-bottom: 1px solid #191E2A
}
.countries-codes ul li a{
    display: block;
    padding: 10px;
    transition: .3s
}
.countries-codes ul li a:hover{
    color: #FFFFFF;
    background-color: #FED235
}
.contact-page .contact form input[name="phone"]{
    width: 48%
}
/*End Contact Page*/
/*Privacy Page*/
.privacy-page .page-header .title h1{
    opacity: 0;
    visibility: hidden
}
.privacy-page .text{
    padding: 100px 70px;
    max-width: 1140px;
    margin: auto
}
.privacy-page .text p{
    font-size: 18px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 40px 0;
    line-height: 30px
}
.privacy-page .text p span{
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.privacy-page .text p a:hover{
    text-decoration: underline
}
.privacy-page .text h2{
    font-size: 30px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 40px 0;
    line-height: 50px
}
.privacy-page .text h3{
    font-size: 24px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 10px 0;
    line-height: 40px
}
.privacy-page .text h4{
    font-size: 20px;
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 5px 0;
    line-height: 34px
}
/*End Privacy Page*/
/*Landing Page*/
.landing-page-header{
    padding: 90px 0 0 0;
    text-align: center
}
.landing-page-header .container{
    position: relative;
    max-width: 710px;
    margin: auto
}
.landing-page-header .container figure{
    content: '';
    height: 545px;
    width: 545px;
    background-color: #FED235;
    background: linear-gradient(92deg, #CB7232 0%, #E9AF3F 51.49%, #F9D146 100%);
    box-shadow: -3px 46px 68px 14px rgba(21,19,19,0.15);
    position: absolute;
    border-radius: 50%;
    left: -245px;
    top: 0
}
.landing-page-header .container > div{
    position: relative;
    z-index: 1
}
.landing-page-header > div .logo{
    width: 210px;
    height: 90px;
    background: url('../images/logo.png') no-repeat center;
    background-size: contain;
    display: block;
    margin: auto
}
.landing-page-header > div h1{
    font-size: 50px;
    line-height: 48px;
    color: #191E2A;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    max-width: 525px;
    margin: 50px auto 0 auto
}
.landing-page-header > div h1 span{
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif
}
.landing-page{
    position: relative
}
.landing-page form{
    max-width: 710px;
    margin: 85px auto 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 30px 60px 0 rgba(21,19,19,0.15);
    text-align: center;
    padding: 70px 35px
}
.landing-page form p{
    color: rgba(25, 30, 42, .7);
    font-size: 28px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif
}
.landing-page form h3{
    color: #191E2A;
    font-size: 36px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 10px 0 35px 0
}
.landing-page form input[type="text"], .landing-page form input[type="email"]{
    width: 400px;
    display: block;
    margin: 0 auto 40px auto;
    text-align: center;
    font-size: 16px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    padding: 15px 0;
    outline: none;
    color: #191E2A;
    border: none;
    border-bottom: 1px solid #191E2A
}
.landing-page form input[type="text"]::-webkit-input-placeholder, .landing-page form input[type="email"]::-webkit-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.landing-page form input[type="text"]:-moz-placeholder, .landing-page form input[type="email"]:-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.landing-page form input[type="text"]::-moz-placeholder, .landing-page form input[type="email"]::-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.landing-page form input[type="text"]:-ms-input-placeholder, .landing-page form input[type="email"]:-ms-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.landing-page form input[name="phone"]{
    width: 230px;
    display: inline-block
}
.landing-page .countries-codes{
    width: 150px;
    margin: 0 20px 0 0;
    height: 50px
}
.landing-page .countries-codes span{
    padding: 12px 20px 15px 0
}
.landing-page .countries-codes span:after{
    top: 12px
}
.landing-page .countries-codes span.expand:after{
    top: 14px
}
.landing-page .countries-codes ul{
    top: 50px
}
.landing-page .countries-codes ul li a{
    margin: 0
}
/* Thank you page */
.landing-page-header .container {
    max-width: 80%
}
.landing-page-header > div h1 {
    max-width: 100%;
    font-size: 38px
}
.home_button {
    text-align: center;
    display: block;
    margin: 40px 0 0 0
}
.home_button a {
    display: inline-block
}
/* End Thank you page */
form .contact-services h4{
    color: #191E2A;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    font-size: 28px;
    margin: 50px 0 30px 0;
    text-align: center
}
form .contact-services ul{
    text-align: left;
    max-width: 345px;
    margin: auto
}
form .contact-services ul li{
    margin: 0 0 15px 0;
    cursor: pointer
}
form .contact-services ul li label{
    color: #191E2A;
    font-size: 18px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}
form .contact-services ul li span{
    margin: 0 10px 0 0;
    color: #191E2A;
    width: 18px;
    height: 18px;
    border: 2px solid #191E2A;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: .3s
}
form .contact-services ul li:hover span, form .contact-services ul li.active span{
    background-color: #FED235
}
form .contact-services ul li input{
    display: none
}
.contact-page form .contact-services{
    margin: 0 0 40px 0;
    transition: .25s;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden
}
.contact-page form .contact-services.push-title-up ~ .push-title-up{
    transform: none !important
}
.landing-page form a, .landing-page form button{
    margin: 70px auto 20px auto
}
/*.landing-page ~ footer{
    background-color: #191E2A;
     padding: 200px 0 120px 0;
     margin: -120px 0 0 0
}
*/
.landing-page ~ footer{
    padding: 90px 0 0 0;
}
.landing-page ~ footer .container{
    max-width: 550px;
    padding: 0 35px;
    margin: auto;
    text-align: center
}
.landing-page ~ footer .container h3{
    font-size: 28px;
    color: #FFFFFF;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 0 0 20px 0
}
.landing-page ~ footer .container p{
    font-size: 20px;
    line-height: 36px;
    color: rgba(255, 255, 255, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 40px 0
}
.landing-page ~ footer .container p a.underline{
    border-bottom: 1px solid rgba(255, 255, 255, .7)
}
.landing-page ~ footer .container ul li{
    display: inline-block;
    margin: 0 15px
}
.landing-page ~ footer .container ul li a{
    font-size: 15px;
    color: #FFFFFF
}
.landing-page ~ footer .container .btn{
    border: 1px solid rgba(255, 255, 255, .7);
    display: inline-block;
    margin: 50px 10px 0 10px;
    font-size: 18px
}
/*End Landing Page*/
.contact-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99999;
    display: none
}
.contact-overlay form{
    background-color: #FFFFFF;
    width: 850px;
    height: 550px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 30px 60px 0 rgba(21, 19, 19, 0.25);
    padding: 40px
}
.contact-overlay form .close{
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 50px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    line-height: 40px;
    transition: .3s;
    color: #191E2A
}
.contact-overlay form .close:hover{
    color: #FED235
}
.contact-overlay form h3{
    font-size: 30px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    color: #191E2A;
    text-align: center;
    margin: 0 0 40px 0
}
.contact-overlay form .full{
    margin: 0 0 40px 0;
    font-size: 0
}
.contact-overlay form .full input{
    width: 48%;
    display: inline-block;
    border: none;
    border-bottom: 1px solid #191E2A;
    outline: none;
    margin: 0 4% 0 0;
    font-size: 16px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    padding: 0 0 10px 0;
    color: #191E2A
}
.contact-overlay form .full input[name="phone"]{
    width: 28%
}
.contact-overlay form .full input:last-child{
    margin: 0
}
.contact-overlay form .full textarea{
    min-width: 100%;
    max-width: 100%;
    border: none;
    border-bottom: 1px solid #191E2A;
    outline: none;
    font-size: 16px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    padding: 20px 0 35px 0;
    color: #191E2A;
    resize: none
}
.contact-overlay form .full input::-webkit-input-placeholder, .contact-overlay form .full textarea::-webkit-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-overlay form .full input:-moz-placeholder, .contact-overlay form .full textarea:-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-overlay form .full input::-moz-placeholder, .contact-overlay form .full textarea::-moz-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-overlay form .full input:-ms-input-placeholder, .contact-overlay form .full textarea:-ms-input-placeholder{
    font-size: 18px;
    color: #191E2A
}
.contact-overlay form .btn{
    margin: 40px auto 30px auto
}
.contact-overlay form p{
    font-size: 18px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    color: rgba(24, 30, 42, .5);
    text-align: center
}
.contact-overlay form p a{
    color: #191E2A
}
/* Clutch Component */
.widgets_wrapper.gw_wrapper {
    margin: auto
}
/* End Clutch Component */
/*Footer*/

footer .top-section{
    padding: 0 200px 80px 200px
}
footer .top-section .logo-container{
    width: 28%;
    display: inline-block;
    vertical-align: top
}
footer .top-section .logo-container .logo{
    width: 178px;
    height: 78px;
    background: url('../images/logo.png?1') no-repeat center;
    background-size: contain;
    display: block
}
footer .top-section .logo-container p{
    color: #1A1C26;
    font-size: 18px;
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 40px 0 0 0
}
footer .top-section .logo-container .goto-landing{
    color: #1A1C26;
    font-size: 20px;
        font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;

    margin: 5px 0 0 0;
    display: block;
    transition: .5s
}
footer .top-section .logo-container .goto-landing:hover{
    letter-spacing: 0.5px
}
footer .top-section .logo-container .goto-landing:after{
    content: '';
    display: inline-block;
    width: 28px;
    height: 18px;
    background: url('../images/arrow-right.png') no-repeat center;
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 0 10px
}
footer .top-section ul{
    display: inline-block;
    vertical-align: top;
    width: 16.66%
}
footer .top-section ul:first-of-type{
    width: 22%
}
footer .top-section ul li.header{
    font-size: 20px;
    color: #1A1C26;
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
    margin: 0 0 10px 0;
    text-transform: uppercase
}
footer .top-section ul li{
    font-size: 16px;
    color: rgba(26, 28, 38, .7);
    font-family: gilroy-light, Helvetica, Arial, sans-serif;
    margin: 0 0 6px 0;
    padding: 0 10px 0 0
}
footer .top-section ul li a{
    transition: .5s
}
footer .top-section ul li a:hover{
    color: #000000
}
footer .top-section ul li a i{
    display: inline-block;
    font-size: 15px;
    width: 20px;
    text-align: center;
    margin: 0 10px 0 0
}
footer .top-section ul li a i.fa-instagram:after{
    left: 3px
}
footer .bottom-section{
    background-color: #d6923d;
    padding: 80px 200px
}
footer .bottom-section .list{
    width: 20%;
    display: inline-block;
    vertical-align: top;
}

footer .bottom-section ul{
    margin: 0 0 30px 0
}
footer .bottom-section ul li.header{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    font-family: "Droid Arabic Kufi" ,gilroy-extrabold, Helvetica, Arial, sans-serif;
    margin: 0 0 10px 0;
    text-transform: uppercase
}
footer .bottom-section ul li{
    font-size: 16px;
    color: #FFFFFF;
    font-family: "Droid Arabic Kufi" ,gilroy-extrabold, Helvetica, Arial, sans-serif;
    margin: 0 0 6px 0;
    padding: 0 10px 0 0
}
footer .bottom-section ul li a{
    position: relative
}
footer .bottom-section ul li a:after{
    content: '';
    position: absolute;
    width: 100%;
    border-top: 1px solid #FFFFFF;
    left: 0;
    bottom: -3px;
    visibility: hidden;
    opacity: 0;
    transition: .3s
}
footer .bottom-section ul li.header a:after{
    border-color: #64676F
}
footer .bottom-section ul li a:hover:after{
    visibility: visible;
    opacity: 1;
    transform: translateY(-3px)
}
.to-top{
    width: 28px;
    height: 35px;
    background: url('../images/go-top.png') no-repeat center;
    background-size: contain;
    position: fixed;
    bottom: 50px;
    right: 36px;
    display: none;
    transition: transform .5s
}
.to-top:hover{
    transform: translateY(-10px)
}
/*End Footer*/
/*Animations*/
.img-block > figure{
    opacity: 0;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    pointer-events:none;
    -webkit-transition: opacity 1s cubic-bezier(.25,.46,.45,.94) 0s, -webkit-transform 1s cubic-bezier(.25,.46,.45,.94) 0s;
    -o-transition: transform 1s cubic-bezier(.25,.46,.45,.94) 0s, opacity 1s cubic-bezier(.25,.46,.45,.94) 0s;
    transition: transform 1s cubic-bezier(.25,.46,.45,.94) 0s, opacity 1s cubic-bezier(.25,.46,.45,.94) 0s, -webkit-transform 1s cubic-bezier(.25,.46,.45,.94) 0s
}
.img-block.reveal > figure{
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}
.fade-in-sequence span{
    visibility: hidden;
    opacity: 0;
    transition: 1.5s
}
.fade-in-sequence.fade-from-bottom span{
    display: block;
    transform: translateY(20px)
}
.fade-in-sequence.fade-from-bottom span.fade-in{
    transform: translateY(0)
}
.fade-in{
    opacity: 0;
    visibility: hidden;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-in;
    animation-name: fade-in
}
@-webkit-keyframes fade-in{
    0%{
        opacity: 0;
        visibility: hidden
    }
    100%{
        opacity: 1;
        visibility: visible
    }
}
@keyframes fade-in{
    0%{
        opacity: 0;
        visibility: hidden
    }
    100%{
        opacity: 1;
        visibility: visible
    }
}
.fade-from-bottom{
    opacity: 0;
    visibility: hidden;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-from-bottom;
    animation-name: fade-from-bottom
}
@-webkit-keyframes fade-from-bottom{
    0%{
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px)
    }
    100%{
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0)
    }
}
@keyframes fade-from-bottom{
    0%{
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px)
    }
    100%{
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0)
    }
}
.preload *{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important
}
/*End Animations*/
/* Large screens desktop */
@media screen and (min-width: 1500px) {
    .service-page .page-header {
        height: 90vh
    }
}
@media screen and (min-width: 1600px) {
    .service-page .page-header {
        height: 80vh
    }
}
@media screen and (min-width: 2000px) {
    .service-page .page-header {
        height: 70vh
    }
}
/* End Large screens desktop */
@media only screen and (max-width: 1900px) {
    header .main-menu .top-container .container-right ul li a{
        font-size: 52px
    }
    header .main-menu .top-container .container-right ul li a:before{
        top: 20px
    }
    header .main-menu .bottom-container .list ul li.header{
        font-size: 15px
    }
    header .main-menu .bottom-container .list ul li{
        font-size: 15px;
        line-height: 24px
    }
    .homepage section.intro .container-left h2{
        font-size: 62px;
        line-height: 68px
    }
    .homepage section.intro .container-right figure{
        height: 700px
    }
    .homepage section.work h2{
        font-size: 62px;
        line-height: 68px
    }
    section.main-section.awards .content > div p{
        font-size: 22px;
        line-height: 28px
    }
    .about-page .hero figure{
        top: -100px
    }
    .about-page .values h2{
        padding: 0 30px 0 110px
    }
    .contact-page .locations .container .details ul li h3{
        font-size: 26px
    }
    .contact-page .locations .container .details ul li h4{
        font-size: 16px
    }
}
@media only screen and (max-width: 1690px) {
    header .main-menu{
        padding: 100px 200px
    }
    header .main-menu .top-container .container-right ul li a{
        font-size: 36px
    }
    header .main-menu .top-container .container-right ul li a:before{
        width: 95px;
        height: 26px;
        top: 15px;
        left: -110px
    }
    header .main-menu .bottom-container .list ul li.header{
        font-size: 14px
    }
    header .main-menu .bottom-container .list ul li{
        font-size: 14px;
        line-height: 22px
    }
    header .main-menu .top-container .container-left > div h2{
        font-size: 44px;
        line-height: 48px
    }
    .homepage section.intro .container-left h2{
        font-size: 54px;
        line-height: 62px
    }
    .homepage section.work h2{
        font-size: 54px;
        line-height: 62px
    }
    .homepage section.work p{
        font-size: 22px;
        line-height: 32px
    }
    .homepage .clients{
        padding: 80px 200px 0 200px
    }
    section.main-section.awards .content > div p{
        font-size: 20px;
        line-height: 26px
    }
    .about-page .hero .container-left{
        width: 47%
    }
    .about-page .hero .container-right{
        width: 50%
    }
    .about-page .hero figure{
        top: -30px
    }
    .about-page .values .container-right ul{
        padding: 0 200px 0 100px
    }
    .about-page .values h2{
        font-size: 65px;
        line-height: 74px
    }
    .about-page .work .img-block{
        width: 750px;
        height: 750px
    }
    .contact-page .locations .container .details h2{
        font-size: 40px
    }
    .contact-page .locations .container .details ul li h3{
        font-size: 22px
    }
    .contact-page .locations .container .details ul li h4{
        font-size: 15px
    }
    .contact-page .locations .container .details ul li span{
        font-size: 15px
    }
    .contact-page .locations .container .map{
        width: 700px;
        height: 630px
    }
    .contact-page .locations .container .details{
        width: calc(100% - 700px)
    }
    .contact-page .locations .container .map i.saudi{
        top: 350px;
        left: 410px
    }
    .contact-page .locations .container .map i.lebanon{
        top: 95px;
        left: 130px
    }
    .contact-page .locations .container .map i.uae{
        top: 335px;
        right: 50px
    }
    .contact-page .locations .container .map i.syria{
        top: 105px;
        left: 160px
    }
    .contact-page .locations .container .map i.qatar{
        top: 340px;
        right: 140px
    }
    .contact-page .locations .container .map i.bahrain{
        top: 315px;
        right: 160px
    }
    .contact-page .locations .container .map i.egypt{
        top: 215px;
        left: 25px
    }
}
@media only screen and (max-width: 1550px) {
    header .main-menu{
        padding: 100px 150px
    }
    .homepage section.intro{
        padding: 200px 150px
    }
    .homepage section.about{
        padding: 90px 150px
    }
    .homepage section.work{
        padding: 80px 0 0 150px
    }
    .homepage .clients{
        padding: 80px 150px 0 150px
    }
    section.main-section.call-to-action{
        padding: 0 150px
    }
    section.main-section.awards{
        padding: 0 100px 20px 100px
    }
    footer .top-section{
        padding: 0 150px 80px 150px
    }
    footer .bottom-section{
        padding: 80px 150px
    }
    .homepage section.intro .container-left h2{
        font-size: 44px;
        line-height: 52px
    }
    .homepage section.intro .container-left p{
        font-size: 22px;
        line-height: 32px
    }
    .homepage section.about .container-left p{
        font-size: 26px;
        line-height: 40px
    }
    .homepage section.about .container-left figure{
        height: 340px
    }
    .homepage section.about .container-right ul li{
        margin: 0 0 15px 0
    }
    .homepage section.about .container-right ul li h3{
        font-size: 44px;
        line-height: 62px
    }
    .homepage section.about .container-right p{
        font-size: 18px;
        line-height: 30px
    }
    .homepage section.work h2{
        font-size: 44px;
        line-height: 52px
    }
    .projects-carousel{
        margin: 50px 0 0 0
    }
    .projects-carousel li{
        height: 500px
    }
    .projects-carousel li a figure{
        height: 378px;
        width: 378px
    }
    section.main-section.awards .content ul li.cannes figure{
        width: 240px;
        height: 104px
    }
    section.main-section.awards .content ul li.awwards figure{
        width: 250px;
        height: 68px
    }
    section.main-section.awards .content ul li.adesign figure{
        width: 135px;
        height: 135px
    }
    section.main-section.awards .content > div h2{
        font-size: 46px;
        line-height: 50px
    }
    .about-page .hero{
        padding: 120px 0 0 70px
    }
    .about-page .hero .container{
        padding: 50px 0 0 80px
    }
    .about-page .values .container-right ul{
        padding: 0 90px
    }
    .about-page .values{
        padding: 0 0 0 70px
    }
    .about-page .values h2{
        padding: 0 30px 0 80px
    }
    .about-page .team{
        padding: 100px 0 100px 150px
    }
    .page-header{
        padding: 0 0 0 190px
    }
    .blog-page .recommended-articles ul li{
        height: 650px
    }
    .blog-page .recommended-articles ul li article .details{
        padding: 60px 100px 80px 100px
    }
    .blog-page .recommended-articles ul li article .details h2{
        left: 100px
    }
    .blog-page .articles .articles-list article{
        height: 440px
    }
    .blog-page .articles .articles-list article a > div span{
        font-size: 18px
    }
    .blog-page .articles .articles-list article a > div p{
        font-size: 22px;
        line-height: 34px
    }
    .blog-page .articles .articles-list article a > div h2{
        font-size: 46px;
        line-height: 56px
    }
    .blog-post-page .main-article .main-figure{
        height: 600px
    }
    .case-studies-page .case-studies .cases-list li{
        height: 550px
    }
    .case-studies-page .case-studies .cases-list li a figure{
        height: 400px;
        width: 400px
    }
    .page-header.header-style-3 .container{
        padding: 0 100px
    }
    .services-page .services .service{
        padding: 150px 150px 0 150px
    }
    .services-page .faq{
        padding: 200px 150px 150px 150px
    }
    .service-page .service .intro{
        padding: 0 150px
    }
    .service-page .service .text .container{
        padding: 0 150px
    }
    .contact-page .locations .container{
        padding: 140px 0 140px 60px
    }
}
@media only screen and (max-width: 1600px) {
    .service-page .page-header figure{
        width: 400px;
        height: 400px
    }
    .service-page .page-header figure::before {
        width: 150px;
        height: 150px;
    }
}
@media only screen and (max-width: 1440px) {
    header .main-menu{
        padding: 100px
    }
    .homepage section.intro{
        padding: 100px 100px
    }
    .homepage section.about{
        padding: 90px 100px
    }
    .homepage section.work{
        padding: 80px 0 0 100px
    }
    .homepage .clients{
        padding: 80px 100px 0 100px
    }
    section.main-section.call-to-action{
        padding: 0 100px
    }
    section.main-section.awards{
        padding: 0 50px 20px 50px
    }
    footer .top-section{
        padding: 0 100px 80px 100px
    }
    footer .bottom-section{
        padding: 80px 100px
    }
    footer .top-section ul li.header{
        font-size: 18px
    }
    footer .top-section ul li{
        font-size: 15px
    }
    footer .bottom-section ul li.header{
        font-size: 18px
    }
    footer .bottom-section ul li{
        font-size: 15px
    }
    .about-page .hero{
        padding: 120px 0 0 60px
    }
    .about-page .hero .container{
        padding: 50px 0 0 40px
    }
    .about-page .hero .container-left{
        width: 51%
    }
    .about-page .hero .container-right{
        width: 46%
    }
    .about-page .values{
        padding: 0 0 0 60px
    }
    .about-page .values h2{
        font-size: 56px;
        line-height: 68px;
        padding: 0 30px 0 40px
    }
    .about-page .team{
        padding: 100px 0 100px 100px
    }
    .about-page .work .img-block{
        width: 680px;
        height: 680px;
        top: 150px
    }
    .blog-page .articles .articles-list article{
        height: 380px
    }
    .case-studies-page .case-studies .cases-list li{
        height: 500px
    }
    .case-studies-page .case-studies .cases-list li a figure{
        height: 375px;
        width: 375px
    }
    .case-study-page .page-header .title{
        width: 58%
    }
    .case-study-page .page-header figure, .case-study-page .page-header img {
        width: 400px;
        height: 400px;
    }
    /*.case-study-page .page-header .case_study_profile_img_container {
        width: 400px;
         height: 400px;
    }
    */
    .services-page .services .service{
        padding: 150px 100px 0 100px
    }
    .services-page .faq{
        padding: 200px 100px 150px 100px
    }
    /*.service-page .page-header figure, .service-page .page-header img {
        width: 400px;
         height: 400px;
    }
    */
    .service-page .page-header .title{
        width: 58%
    }
    /*.service-page .page-header figure{
        width: 400px;
         height: 400px
    }
    */
    .service-page .service .intro{
        padding: 0 100px
    }
    .service-page .service .text .container{
        padding: 0 100px
    }
    .contact-page .locations .container .details{
        width: calc(100% - 600px)
    }
    .contact-page .locations .container .map{
        width: 600px;
        height: 530px
    }
    .contact-page .locations .container .map i{
        width: 22px;
        height: 22px
    }
    .contact-page .locations .container{
        padding: 80px 0 80px 30px
    }
    .contact-page .locations .container .map i.saudi{
        top: 295px;
        left: 350px
    }
    .contact-page .locations .container .map i.lebanon{
        top: 80px;
        left: 115px
    }
    .contact-page .locations .container .map i.uae{
        top: 280px;
        right: 45px
    }
    .contact-page .locations .container .map i.syria{
        top: 90px;
        left: 140px
    }
    .contact-page .locations .container .map i.qatar{
        top: 290px;
        right: 120px
    }
    .contact-page .locations .container .map i.bahrain{
        top: 265px;
        right: 140px
    }
    .contact-page .locations .container .map i.egypt{
        top: 180px
    }
}
@media only screen and (max-width: 1280px) {
    .btn{
        width: 180px;
        height: 50px;
        line-height: 50px;
        font-size: 15px
    }
    .btn.medium, .btn.large{
        width: 230px
    }
    .btn.black{
        width: 200px
    }
    header .main-menu{
        padding: 100px 50px
    }
    header .main-menu .close-menu{
        left: 25px
    }
    header .main-menu .top-container .container-right ul li{
        margin: 0 0 10px 0
    }
    header .main-menu .top-container .container-right ul li a{
        font-size: 44px
    }
    header .main-menu .bottom-container .list ul li.header{
        font-size: 13px
    }
    header .main-menu .bottom-container .list ul li{
        font-size: 13px;
        line-height: 20px
    }
    header .main-menu .top-container .container-left > div h2{
        font-size: 40px;
        line-height: 44px
    }
    header .main-menu .top-container .container-left > div p{
        font-size: 18px
    }
    header .main-menu .top-container .container-left > div .goto-landing{
        width: 180px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        margin: 15px 0 0 0
    }
    header .fixed-menu .logo{
        left: 10px;
        top: 20px
    }
    .left-nav .open-mobile-menu{
        left: 25px
    }
    .left-nav .copyrights{
        left: -12px
    }
    header .fixed-menu .contact{
        right: 10px;
        top: 16px
    }
    .scroll-down{
        right: 25px
    }
    .scroll-down p{
        font-size: 22px;
        padding: 4px 60px 0 0
    }
    .to-top{
        right: 25px
    }
    .social.fixed{
        right: 30px
    }
    .homepage section.intro{
        padding: 200px 70px
    }
    .homepage section.about{
        padding: 90px 70px
    }
    .homepage section.work{
        padding: 80px 0 0 70px
    }
    .homepage .clients{
        padding: 80px 70px 0 70px
    }
    section.main-section.call-to-action{
        padding: 0 70px
    }
    section.main-section.awards{
        padding: 0 20px 20px 20px
    }
    footer .top-section{
        padding: 0 70px 80px 70px
    }
    footer .bottom-section{
        padding: 80px 70px
    }
    .carousel-navigation .more{
        font-size: 18px
    }
    .testimonials li p{
        font-size: 22px;
        line-height: 32px
    }
    .testimonials li h3{
        font-size: 22px;
        line-height: 22px
    }
    .testimonials li span{
        font-size: 15px
    }
    section.main-section.call-to-action .container-right h2{
        font-size: 40px;
        line-height: 50px
    }
    section.main-section.awards .content ul li.cannes figure{
        width: 200px;
        height: 88px
    }
    section.main-section.awards .content ul li.awwards figure{
        width: 210px;
        height: 58px
    }
    section.main-section.awards .content ul li.adesign figure{
        width: 120px;
        height: 120px
    }
    .projects-carousel{
        margin: 100px 0 0 0
    }
    .projects-carousel li{
        height: 450px
    }
    .projects-carousel li a .overlay{
        padding: 20px 25px
    }
    .projects-carousel li a figure{
        height: 328px;
        width: 328px
    }
    .projects-carousel li a h3{
        font-size: 26px;
        line-height: 32px
    }
    .projects-carousel li a span{
        font-size: 16px
    }
    section.main-section.call-to-action .container-left figure{
        height: 450px
    }
    .about-page .hero{
        padding: 120px 0 0 45px
    }
    .about-page .hero .container{
        padding: 50px 0 0 25px
    }
    .about-page .hero h3{
        font-size: 40px;
        line-height: 56px
    }
    .about-page .hero h2{
        font-size: 66px;
        line-height: 80px
    }
    .about-page .hero figure{
        top: 0
    }
    .about-page .values{
        padding: 0 0 0 45px
    }
    .about-page .values h2{
        padding: 0 30px 0 25px
    }
    .about-page .values .container-right ul{
        padding: 0 70px 0 50px
    }
    .about-page .team{
        padding: 100px 0 100px 70px
    }
    .about-page .work{
        padding: 0 70px
    }
    .about-page .clients{
        padding: 0 70px
    }
    .about-page .team h2{
        font-size: 66px;
        line-height: 76px
    }
    .about-page .work .container .text h2{
        font-size: 54px;
        line-height: 66px
    }
    .about-page .work .img-block{
        width: 620px;
        height: 620px;
        top: 200px
    }
    .about-page .clients h2{
        font-size: 66px;
        line-height: 76px
    }
    .about-page .clients ul.clients-list, .about-page .partners ul{
        margin: 75px auto 0 auto
    }
    .about-page .partners h2{
        font-size: 66px;
        line-height: 76px
    }
    .about-page .partners ul li span{
        font-size: 22px;
        line-height: 38px
    }
    .page-header{
        padding: 0 0 0 150px
    }
    .blog-post-page .page-header{
        padding: 0 0 0 150px
    }
    .page-header .title h2{
        font-size: 26px;
        line-height: 32px
    }
    .page-header .title h1{
        font-size: 66px;
        line-height: 76px
    }
    .page-header .title h3{
        font-size: 28px;
        line-height: 40px
    }
    .blog-page .recommended-articles{
        padding: 0 70px
    }
    .blog-page .recommended-articles ul li{
        height: 480px
    }
    .blog-page .recommended-articles ul li article .details{
        padding: 40px 80px 40px 80px
    }
    .blog-page .recommended-articles ul li article .details h2{
        font-size: 66px;
        line-height: 76px;
        left: 80px;
        bottom: 30px
    }
    .blog-page .articles{
        padding: 0 70px 120px 70px;
        margin: -50px 0 0 0
    }
    .blog-page .articles.empty_carousel {
        padding-top: 80px
    }
    .filters li a{
        padding: 8px 15px;
        font-size: 15px
    }
    .blog-page .articles .articles-list{
        margin: 50px 0 0 0
    }
    .blog-page .articles .articles-list article{
        height: 325px
    }
    .blog-page .articles .articles-list article a > div span{
        font-size: 17px
    }
    .blog-page .articles .articles-list article a > div h2{
        font-size: 40px;
        line-height: 48px
    }
    .blog-page .articles .articles-list article a > div p{
        font-size: 20px;
        line-height: 30px
    }
    .blog-post-page .page-header .title h1{
        padding: 0 100px 0 0
    }
    .blog-post-page .main-article{
        padding: 0 70px;
        margin: -30vh 0 100px 0
    }
    .blog-post-page .main-article .main-figure{
        height: 500px
    }
    .blog-post-page .main-article .article-content{
        margin: 50px auto 0 auto
    }
    .blog-post-page .main-article .article-content h2{
        font-size: 36px;
        margin: 0 0 30px 0
    }
    .blog-post-page .main-article .article-content p{
        font-size: 19px;
        line-height: 32px;
        margin: 0 0 30px 0
    }
    .blog-post-page .main-article .article-content img{
        margin: 50px 0
    }
    .blog-post-page .main-article .article-content .columns{
        margin: 100px 0 0 0
    }
    .blog-post-page .main-article .article-content .columns .col h2{
        margin: 0 0 25px 0
    }
    .blog-post-page .main-article .article-content .columns .col p{
        margin: 0 0 25px 0
    }
    .case-studies-page .page-header .title h1{
        padding: 0 60px 0 0
    }
    .case-studies-page .case-studies{
        padding: 70px 70px 0 70px
    }
    .case-studies-page .case-studies .cases-list li{
        height: 450px
    }
    .case-studies-page .case-studies .cases-list li a .overlay{
        padding: 20px 25px
    }
    .case-studies-page .case-studies .cases-list li a .overlay h3{
        font-size: 26px;
        line-height: 32px
    }
    .case-studies-page .case-studies .cases-list li a .overlay span{
        font-size: 16px
    }
    .case-studies-page .case-studies .cases-list li a figure{
        height: 350px;
        width: 350px
    }
    .case-studies-page .case-studies .cases-list li a figure p{
        font-size: 18px
    }
    .case-studies-page .case-studies .cases-list{
        margin: 50px 0 0 0
    }
    section.main-section.call-to-action.style-2{
        padding: 50px 70px 150px 70px
    }
    section.main-section.call-to-action.style-2 .container-right h2{
        font-size: 66px
    }
    .page-header.header-style-3{
        padding: 120px 0 0 70px
    }
    .page-header.header-style-3 .container{
        padding: 0 80px
    }
    .case-study-page .case-study .intro {
        max-width: 100%
    }
    .case-study-page .case-study .text .image-container{
        padding: 0 70px
    }
    .case-study-page .case-study .text .carousel-container{
        padding: 110px 70px 110px 0;
        margin: 0 0 100px 0
    }
    .case-study-page .case-study .intro h2{
        font-size: 36px
    }
    .case-study-page .case-study .intro p{
        font-size: 19px;
        line-height: 32px;
        margin: 25px 0 30px 0
    }
    .case-study-page .case-study .text .container{
        margin: 0 auto 50px auto
    }
    .case-study-page .case-study .text .container h2{
        font-size: 36px;
        margin: 0 auto 30px auto
    }
    .case-study-page .case-study .text .container p{
        font-size: 19px;
        line-height: 32px;
        margin: 0 auto 30px auto
    }
    .case-study-page .case-study .text .img-full{
        margin: 0 0 50px 0
    }
    .case-study-page .case-study .text .img-half{
        width: 47.5%
    }
    .case-study-page .case-study .text .img-half.add-margin{
        margin: 0 5% 50px 0
    }
    .case-study-page .case-study .text .carousel-container{
        height: 620px
    }
    .case-study-page .case-study .text .carousel-container ul li{
        height: 400px
    }
    .case-study-page .case-study .text blockquote{
        height: 380px;
        padding: 75px 70px 75px 190px;
        margin: 0 auto 50px auto
    }
    .case-study-page .case-study .text blockquote p{
        font-size: 24px;
        line-height: 36px
    }
    .case-study-page .case-study .text blockquote h4{
        font-size: 22px
    }
    .case-study-page .case-study .text blockquote:before{
        width: 380px;
        height: 380px;
        left: 70px
    }
    .case-study-page .case-study .text .columns{
        padding: 0 70px;
        margin: 100px 0 0 0
    }
    .case-study-page .case-study .text .columns .container{
        width: 47.5%;
        padding: 0
    }
    .services-page .page-header .title h1{
        padding: 0 60px 0 0
    }
    .services-page .services .service{
        padding: 80px 80px 0 80px
    }
    .services-page .services .service h2{
        font-size: 36px
    }
    .services-page .services .service p{
        font-size: 18px;
        line-height: 30px
    }
    .services-page .services .service ul li{
        font-size: 17px
    }
    .services-page .faq{
        padding: 50px 80px 100px 80px
    }
    .services-page .faq h2{
        font-size: 66px
    }
    .services-page .faq p{
        font-size: 22px
    }
    .services-page .faq ul li h3{
        font-size: 28px
    }
    .services-page .faq ul li .answer{
        font-size: 19px;
        line-height: 28px
    }
    .service-page .page-header figure {
        width: 350px;
        height: 350px
    }
    .service-page .page-header figure::before {
        width: 130px;
        height: 130px;
    }
    .service-page .service{
        padding: 120px 0 0 0
    }
    .service-page .service .intro{
        padding: 0 70px;
        margin: 0 auto 50px auto
    }
    .service-page .service .text .container{
        padding: 0 70px
    }
    .service-page .service .intro h2{
        font-size: 36px;
        margin: 0 0 40px 0
    }
    .service-page .service .intro p{
        font-size: 19px;
        line-height: 32px
    }
    .service-page .service li.main{
        font-size: 26px
    }
    .service-page .service .text .container{
        margin: 0 auto 50px auto
    }
    .service-page .service .text .container h2{
        font-size: 36px;
        margin: 0 0 30px 0
    }
    .service-page .service .text .container p{
        font-size: 19px;
        line-height: 32px;
        margin: 0 0 30px 0
    }
    .service-page .service .projects-carousel{
        padding: 0 0 0 70px;
        margin: -20px 0 40px 0
    }
    .service-page .service .projects-carousel .slick-list{
        padding: 20px 200px 30px 0
    }
    .service-page .service .services{
        padding: 70px;
        margin: 0 0 75px 0
    }
    .service-page .service .testimonials-container{
        padding: 0 70px;
        margin: 0 0 75px 0
    }
    .service-page .service .testimonials-container li{
        min-height: 400px;
        padding: 90px 100px
    }
    .service-page .service .testimonials-container li p{
        font-size: 32px;
        line-height: 48px
    }
    .service-page .service .testimonials-container .testimonials{
        margin: 75px 0 0 0
    }
    .service-page .service .services .container ul{
        margin: 50px 0 0 0
    }
    .service-page .service .services .container ul li h3{
        font-size: 22px;
        line-height: 28px
    }
    .service-page .service .services .container ul li p{
        font-size: 17px;
        line-height: 30px
    }
    .service-page .service .services .container{
        padding: 0 !important
    }
    .service-page .service .services .container ul li{
        width: 22%;
        margin: 0 4% 0 0
    }
    .service-page .service .services .container ul li figure{
        height: 200px
    }
    .service-page .service .services .container .btn.black{
        margin: 50px auto 0 auto
    }
    .contact-page .locations{
        padding: 0 70px 160px 70px
    }
    .contact-page .locations .container .details ul{
        margin: 50px 0 0 0
    }
    .contact-page .locations .container .details h2{
        font-size: 38px
    }
    .contact-page .locations .container .details ul li h3{
        font-size: 20px
    }
    .contact-page .locations .container .details ul li h4{
        font-size: 14px
    }
    .contact-page .locations .container .details ul li span{
        font-size: 13px
    }
    .contact-page .locations .container .details{
        width: calc(100% - 500px)
    }
    .contact-page .locations .container .map{
        width: 500px;
        height: 430px
    }
    .contact-page .locations .container .map i{
        width: 20px;
        height: 20px
    }
    .contact-page .locations .container .map i.saudi{
        top: 240px;
        left: 292px
    }
    .contact-page .locations .container .map i.lebanon{
        top: 65px;
        left: 90px
    }
    .contact-page .locations .container .map i.uae{
        top: 228px;
        right: 35px
    }
    .contact-page .locations .container .map i.syria{
        top: 75px;
        left: 112px
    }
    .contact-page .locations .container .map i.qatar{
        top: 232px;
        right: 100px
    }
    .contact-page .locations .container .map i.bahrain{
        top: 215px;
        right: 120px
    }
    .contact-page .locations .container .map i.egypt{
        top: 145px;
        left: 20px
    }
    .page-header.header-style-5{
        padding: 0 0 0 150px
    }
    .contact-page .contact h2{
        font-size: 66px;
        line-height: 76px
    }
    .contact-page .locations .container .scroll-to-contact i{
        margin: 0 0 0 20px
    }
    .contact-page .locations .container .scroll-to-contact{
        font-size: 22px;
        right: -45px
    }
    .contact-page .contact form p{
        width: calc(100% - 180px)
    }
}
@media only screen and (max-width: 1120px) {
    header .main-menu .close-menu{
        width: 15px;
        height: 15px;
        left: 18px
    }
    header .main-menu .top-container .container-right ul li a{
        font-size: 40px
    }
    header .main-menu .top-container .container-right ul li a:before{
        width: 80px;
        height: 22px;
        top: 14px;
        left: -100px
    }
    header .main-menu .top-container .container-left > div h2{
        font-size: 36px;
        line-height: 40px
    }
    header .main-menu .bottom-container .list:first-child, header .main-menu .bottom-container .list:nth-child(4){
        width: 21.5%
    }
    header .main-menu .bottom-container .list:last-child{
        width: 16%
    }
    .homepage section.about .container-left p{
        font-size: 22px;
        line-height: 32px
    }
    .homepage section.about .container-left figure{
        height: 300px;
        margin: 150px 0 0 0
    }
    .homepage section.about .container-right ul{
        margin: 120px 0 0 0
    }
    .homepage section.about .container-right ul li h3{
        font-size: 36px;
        line-height: 50px
    }
    .homepage section.about .container-right ul li i{
        font-size: 16px
    }
    .homepage section.about .container-right p{
        font-size: 16px;
        line-height: 26px
    }
    .homepage section.work{
        padding: 120px 0 0 70px
    }
    .projects-carousel li{
        height: 400px
    }
    .projects-carousel li a h3{
        font-size: 24px;
        line-height: 30px
    }
    .projects-carousel li a span{
        font-size: 15px
    }
    .projects-carousel li a figure{
        height: 278px;
        width: 278px
    }
    footer .top-section ul li.header{
        font-size: 16px
    }
    footer .top-section ul li{
        font-size: 14px
    }
    footer .bottom-section ul li.header{
        font-size: 16px
    }
    footer .bottom-section ul li{
        font-size: 14px
    }
    .about-page .hero h3{
        font-size: 36px;
        line-height: 52px
    }
    .about-page .hero h2{
        font-size: 60px;
        line-height: 76px
    }
    .about-page .hero p{
        font-size: 18px;
        line-height: 32px
    }
    .about-page .values .container-right ul li > div h3{
        font-size: 40px;
        line-height: 70px
    }
    .about-page .values .container-right ul li > div p{
        font-size: 18px;
        line-height: 32px
    }
    .about-page .values .container-right ul{
        padding: 0 70px 0 20px
    }
    .about-page .values h2{
        font-size: 48px;
        line-height: 60px
    }
    .about-page .hero figure{
        height: 460px;
        top: 80px
    }
    .about-page .team h2, .about-page .clients h2, .about-page .partners h2{
        font-size: 60px
    }
    .about-page .work{
        height: 500px
    }
    .about-page .work .img-block{
        width: 550px;
        height: 550px;
        top: 100px
    }
    .about-page .partners ul li span{
        font-size: 20px;
        line-height: 34px
    }
    .page-header{
        padding: 0 0 0 100px
    }
    .blog-post-page .page-header{
        padding: 0 0 0 100px
    }
    .page-header .title h2{
        font-size: 24px;
        line-height: 30px
    }
    .page-header .title h1{
        font-size: 54px;
        line-height: 66px
    }
    .page-header .title h3{
        font-size: 24px;
        line-height: 36px
    }
    .blog-page .recommended-articles ul li{
        height: 400px
    }
    .blog-page .recommended-articles ul li article .details{
        padding: 40px 30px 40px 30px
    }
    .blog-page .recommended-articles ul li article .details h2{
        font-size: 54px;
        line-height: 66px;
        left: 30px
    }
    .blog-page .articles .articles-list article{
        height: 300px
    }
    .blog-page .articles .articles-list article a > div span{
        font-size: 16px
    }
    .blog-page .articles .articles-list article a > div h2{
        font-size: 36px;
        line-height: 44px
    }
    .blog-page .articles .articles-list article a > div p{
        font-size: 19px;
        line-height: 28px
    }
    .blog-post-page .main-article .main-figure{
        height: 450px
    }
    .case-studies-page .case-studies .cases-list li{
        height: 400px
    }
    .case-studies-page .case-studies .cases-list li a figure{
        height: 300px;
        width: 300px
    }
    .case-studies-page .case-studies .cases-list li a .overlay h3{
        font-size: 24px;
        line-height: 30px
    }
    .case-studies-page .case-studies .cases-list li a .overlay span{
        font-size: 15px
    }
    .case-studies-page .case-studies .cases-list li a figure p{
        font-size: 15px
    }
    section.main-section.call-to-action .container-right p{
        font-size: 22px
    }
    section.main-section.call-to-action.style-2 .container-right h2{
        font-size: 54px
    }
    .scroll-down p{
        font-size: 20px
    }
    .services-page .faq {
        padding: 50px 80px 100px 80px
    }
    .services-page .faq h2{
        font-size: 30px
    }
    .services-page .faq ul {
        margin: 50px 0 0 0
    }
    .services-page .faq ul li {
        padding: 30px 0
    }
    .services-page .faq ul li:after {
        display: none
    }
    .services-page .faq p{
        font-size: 20px
    }
    .services-page .faq ul li h3{
        font-size: 26px
    }
    .services-page .faq ul li .answer{
        font-size: 18px;
        line-height: 26px
    }
    .service-page .page-header figure {
        width: 300px;
        height: 300px
    }
    .service-page .page-header figure::before {
        width: 100px;
        height: 100px;
        top: 0;
        right: -10px;
    }
    .service-page .service .testimonials-container li p{
        font-size: 30px;
        line-height: 44px
    }
    .contact-page .locations .container{
        padding: 50px 0 30px 30px
    }
    .contact-page .locations .container .details h2{
        font-size: 32px
    }
    .contact-page .locations .container .details ul{
        margin: 40px 0 0 0
    }
    .contact-page .locations .container .details ul li{
        margin: 0 0 30px 0
    }
    .contact-page .locations .container .details ul li h3{
        font-size: 17px
    }
    .contact-page .locations .container .details ul li h4{
        font-size: 13px
    }
    .page-header.header-style-5{
        padding: 0 0 0 100px
    }
    .contact-page .contact h2{
        font-size: 54px;
        line-height: 66px
    }
    .contact-page .locations .container .scroll-to-contact{
        font-size: 19px
    }
}
@media only screen and (max-width: 1020px) {
    .btn.large, .btn.medium{
        width: 200px
    }
    header .main-menu .top-container .container-right ul li{
        margin: 0 0 8px 0
    }
    header .main-menu .top-container .container-right ul li a{
        font-size: 38px
    }
    header .main-menu .top-container .container-right ul li a:before{
        left: -95px;
        top: 13px
    }
    header .main-menu .top-container .container-left .logo{
        width: 140px;
        height: 62px
    }
    header .main-menu .top-container .container-left > div h2{
        font-size: 34px;
        line-height: 38px
    }
    header .fixed-menu .logo{
        background-size: 35px
    }
    .left-nav{
        width: 50px
    }
    .left-nav .open-mobile-menu{
        left: 18px;
        font-size: 28px
    }
    .left-nav .copyrights{
        left: -22px
    }
    .left-nav .copyrights p{
        font-size: 11px
    }
    header .fixed-menu .contact{
        width: 45px;
        height: 45px;
        line-height: 46px
    }
    header .fixed-menu .contact:after{
        right: 37px;
        width: 60px
    }
    header .fixed-menu .contact:hover:after{
        width: 40px
    }
    header .fixed-menu .contact i{
        font-size: 18px
    }
    .social.fixed{
        right: 22px
    }
    .scroll-down{
        min-width: 24px;
        height: 30px;
        right: 21px
    }
    .to-top{
        width: 24px;
        height: 30px;
        right: 21px
    }
    .homepage section.header .logo{
        width: 380px;
        height: 168px
    }
    .homepage section.intro{
        height: auto;
        padding: 50px 70px
    }
    .homepage section.about{
        min-height: initial;
        padding: 50px 70px
    }
    .homepage section.work{
        min-height: initial;
        padding: 50px 0 0 70px
    }
    .homepage .clients{
        min-height: initial;
        padding: 50px 70px 0 70px
    }
    .homepage section.intro .container-left h2{
        font-size: 38px;
        line-height: 40px
    }
    .homepage section.intro .container-left p{
        font-size: 20px;
        line-height: 28px
    }
    .homepage section.work h2{
        font-size: 38px;
        line-height: 40px
    }
    .homepage section.intro .container-right figure{
        height: 385px
    }
    .homepage section.about .container-left p{
        font-size: 20px;
        line-height: 30px
    }
    .homepage section.about .container-left figure{
        height: 260px
    }
    .homepage section.about .container-right ul li h3{
        font-size: 32px;
        line-height: 42px;
        padding: 0 0 0 30px
    }
    .homepage section.about .container-right ul li i{
        font-size: 14px
    }
    .homepage section.work p{
        font-size: 20px;
        line-height: 28px
    }
    .projects-carousel li{
        height: 320px
    }
    .projects-carousel li a figure{
        height: 198px;
        width: 228px
    }
    .projects-carousel li a h3{
        font-size: 22px;
        line-height: 28px
    }
    .projects-carousel li a span{
        font-size: 14px
    }
    .projects-carousel .slick-list{
        padding: 20px 140px 30px 0
    }
    .carousel-navigation{
        padding: 0 10px 0 0
    }
    .carousel-navigation .more{
        margin: 0 20px 0 0
    }
    .projects-carousel{
        margin: 20px 0 0 0
    }
    .testimonials{
        margin: 80px 0 0 0
    }
    .testimonials li{
        padding: 30px 0 50px 0;
        min-height: 350px
    }
    .testimonials li i{
        font-size: 64px
    }
    .testimonials li p{
        font-size: 20px;
        line-height: 28px
    }
    .testimonials li h3{
        font-size: 20px;
        line-height: 20px;
        margin: 20px 0 0 0
    }
    .testimonials li figure{
        width: 140px;
        height: 140px;
        bottom: -70px
    }
    section.main-section.awards .content > div h2{
        font-size: 40px;
        line-height: 44px
    }
    section.main-section.awards .content > div p{
        font-size: 18px;
        line-height: 22px
    }
    section.main-section.awards .content ul li.cannes figure{
        width: 160px;
        height: 70px
    }
    section.main-section.awards .content ul li.awwards figure{
        width: 170px;
        height: 46px
    }
    section.main-section.awards .content ul li.adesign figure{
        width: 90px;
        height: 90px
    }
    section.main-section.call-to-action .container-right p{
        font-size: 22px
    }
    section.main-section.call-to-action .container-right h2{
        font-size: 34px;
        line-height: 38px
    }
    footer .top-section .logo-container .logo{
        width: 140px;
        height: 62px
    }
    footer .top-section .logo-container p{
        font-size: 16px;
        margin: 20px 0 0 0
    }
    footer .top-section .logo-container .goto-landing{
        font-size: 18px
    }
    footer .top-section ul li.header{
        font-size: 14px
    }
    footer .top-section ul li{
        font-size: 13px
    }
    footer .bottom-section ul li.header{
        font-size: 14px
    }
    footer .bottom-section ul li{
        font-size: 13px
    }
    .about-page .hero h2{
        font-size: 56px;
        line-height: 70px;
        margin: 10px 0 0 0
    }
    .about-page .work .img-block{
        width: 450px;
        height: 450px;
        top: 160px
    }
    .about-page .team h2, .about-page .work .container .text h2, .about-page .clients h2, .about-page .partners h2{
        font-size: 56px
    }
    .about-page .partners ul li span{
        font-size: 19px;
        line-height: 32px
    }
    .blog-post-page .main-article .main-figure{
        height: 400px
    }
    .case-studies-page .case-studies .cases-list li a .overlay h3{
        font-size: 22px;
        line-height: 28px
    }
    .case-studies-page .case-studies .cases-list li a .overlay span{
        font-size: 14px
    }
    .case-study-page .case-study .text blockquote{
        padding: 75px 50px 75px 170px
    }
    .service-page .service .testimonials-container li{
        padding: 80px 100px
    }
    .service-page .service .testimonials-container li p{
        font-size: 26px;
        line-height: 40px
    }
    .service-page .service .text .container h2{
        font-size: 32px
    }
    .service-page .service .services .container ul li h3{
        font-size: 20px;
        line-height: 26px
    }
    .service-page .service .services .container ul li p{
        font-size: 16px;
        line-height: 26px
    }
    .service-page .service .services .container ul li{
        width: 23%;
        margin: 0 2.66% 0 0
    }
    .contact-page .locations .container .scroll-to-contact i{
        width: 24px;
        height: 30px;
        margin: 0 0 0 10px
    }
    .contact-page .locations .container .scroll-to-contact{
        right: -49px
    }
}
@media only screen and (max-width: 960px) {
    .desktop{
        display: none !important
    }
    .mobile{
        display: block !important
    }
    .full_row_on_mobile {
        display: block!important;
        float: none!important;
        width: 100%!important;
    }
    .container-left, .container-right{
        width: 100%;
        display: block;
        margin: 0
    }
    header .fixed-menu{
        position: relative
    }
    .open-mobile-menu{
        width: 40px;
        height: 18px;
        position: absolute;
        top: 40px;
        left: 35px
    }
    .open-mobile-menu span{
        width: 100%;
        border-top: 2px solid #000000;
        position: absolute;
        top: 0;
        left: 0
    }
    .open-mobile-menu span:before{
        content: '';
        width: 100%;
        border-top: 2px solid #000000;
        position: absolute;
        top: 6px;
        left: 0
    }
    .open-mobile-menu span:after{
        content: '';
        width: 100%;
        border-top: 2px solid #000000;
        position: absolute;
        top: 14px;
        left: 0
    }
    .open-mobile-menu.white span{
        border-top: 2px solid #FFFFFF
    }
    .open-mobile-menu.white span:before{
        border-top: 2px solid #FFFFFF
    }
    .open-mobile-menu.white span:after{
        border-top: 2px solid #FFFFFF
    }
    .hide-open-mobile-menu .open-mobile-menu{
        display: none !important
    }
    .scroll-down{
        bottom: 30px
    }
    .btn{
        width: 90%;
        max-width: 300px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        margin: 30px auto 0 auto
    }
    .btn.large, .btn.medium{
        width: 300px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        margin: 40px auto 0 auto
    }
    .btn.yellow:hover{
        background-color: #FED235
    }
    .btn.white:hover{
        background-color: transparent;
        color: #FFFFFF
    }
    .btn.black:hover{
        color: #191E2A;
        background-color: transparent
    }
    .homepage section.about .container-right .btn{
        margin: 40px auto 0 auto
    }
    header .main-menu{
        padding: 20px 35px
    }
    header .main-menu .menu-move{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        bottom: 0;
        left: 0;
        padding: 20px 0 30px 0;
        position: absolute;
        z-index: 99;
        right: 0;
        top: 20px
    }
    header .main-menu .close-menu{
        top: 28px;
        left: 45px;
        width: 18px;
        height: 18px
    }
    header .main-menu .top-container .container-right{
        width: 100%;
        display: block;
        padding: 0 70px 40px 70px
    }
    header .main-menu .top-container .container-right ul li{
        margin: 0 0 40px 0
    }
    header .main-menu .top-container .container-right ul li a{
        font-size: 24px;
        text-align: center;
        line-height: 18px
    }
    header .main-menu .top-container .container-right ul li a:hover{
        color: rgba(255, 255, 255, .5);
        transform: translateX(0)
    }
    header .main-menu .top-container .container-right ul li a:hover:before{
        opacity: 0
    }
    header .main-menu .top-container .container-left{
        border-top: 1px solid rgba(154, 155, 158, .2)
    }
    header .main-menu .top-container .container-left .logo{
        display: none
    }
    header .main-menu .top-container .container-left{
        width: calc(100% - 70px);
        display: block;
        margin: auto
    }
    header .main-menu .top-container .container-left > div p{
        line-height: 36px;
        text-align: center
    }
    header .main-menu .top-container .container-left > div{
        margin: 30px 0 40px 0
    }
    header .main-menu .top-container .container-left > div h2{
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin: 5px 0 0 0
    }
    header .main-menu .top-container .container-left > div .goto-landing{
        width: 200px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        margin: 25px auto
    }
    header .main-menu .top-container .container-left > div .goto-landing:hover{
        background-color: #191E2A;
        color: #FFFFFF
    }
    header .main-menu .top-container .container-left ul{
        text-align: center
    }
    header .main-menu .top-container .container-left ul li{
        margin: 0 15px
    }
    header .main-menu .top-container .container-left ul li a:hover{
        color: rgba(255, 255, 255, .5)
    }
    footer ul.social li a:hover i.fa-instagram:after{
        opacity: 0;
        visibility: hidden
    }
    footer ul.social li a:hover i{
        color: #1A1C26 !important
    }
    .landing-page ~ footer .container ul li a:hover i{
        color: #FFFFFF !important
    }
    header .main-menu .bottom-container{
        display: none
    }
    .homepage section.header{
        height: 100vh;
        padding: 0
    }
    .homepage section.header .logo{
        width: 288px;
        height: 128px
    }
    .homepage section.header .bg-1{
        top: -15px
    }
    .homepage section.header .bg-2{
        bottom: -20%;
        left: -30%
    }
    .homepage section.header .bg-3{
        display: none
    }
    .homepage section.header .bg-1{
        animation: none
    }
    .homepage section.header .bg-2{
        animation: none
    }
    .mobile-menu-container{
        height: 100px;
        background-color: #FFFFFF;
        position: relative;
        box-shadow: 0 30px 60px 0 rgba(21,19,19,0.1)
    }
    .mobile-menu-container.transparent{
        background-color: transparent;
        box-shadow: none
    }
    .mobile-menu-container.fixed{
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 9
    }
    .about-page .mobile-menu-container.fixed{
        z-index: 99999
    }
    .mobile-menu-container .open-mobile-menu{
        left: 35px
    }
    .homepage section.intro{
        padding: 0
    }
    /*.homepage section.intro.add-padding{
        padding: 100px 0 0 0
    }
    */
    .homepage section.intro .container-left{
        padding: 60px 35px 0 35px
    }
    .homepage section.intro .container-left h2{
        text-align: center;
        font-size: 28px;
        line-height: 40px
    }
    .homepage section.intro .container-left p{
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        margin: 20px 0 0 0
    }
    .homepage section.intro .container-left .btn{
        width: 200px
    }
    .homepage section.intro .container-right figure{
        height: 410px;
        margin: 25px 0 -100px auto !important;
        width: calc(100% - 35px);
        display: block;
        position: relative
    }
    .homepage section.about{
        padding: 70px 35px 60px 35px
    }
    .homepage section.about .container-left p{
        text-align: center;
        width: 100%
    }
    .homepage section.about .container-right ul{
        margin: 30px 0 0 0
    }
    .homepage section.about .container-right ul li{
        margin: 0 0 10px 0
    }
    .homepage section.about .container-right ul li h3{
        font-size: 28px;
        line-height: 72px
    }
    .homepage section.about .container-right ul li i{
        line-height: 72px
    }
    .homepage section.about .container-right p{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 40px 0 0 0;
        max-width: initial
    }
    section.main-section.call-to-action .container-right a{
        width: 280px
    }
    .homepage section.work{
        padding: 70px 35px
    }
    .homepage section.work h2{
        font-size: 30px;
        text-align: center
    }
    .homepage section.work p{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 15px 0 0 0
    }
    .projects-carousel{
        margin: 40px 0 60px 0
    }
    .projects-carousel .slick-list{
        padding: 0
    }
    .projects-carousel .slick-slide{
        margin: 0
    }
    .projects-carousel li{
        height: 368px
    }
    .projects-carousel li a{
        box-shadow: none
    }
    .carousel-navigation{
        padding: 0;
        text-align: left
    }
    .homepage .carousel-navigation{
        padding: 0
    }
    .carousel-navigation .more{
        font-size: 20px;
        margin: 0 10px 0 0
    }
    .carousel-navigation .navigate{
        margin: 0 5px
    }
    .carousel-navigation > div{
        float: right;
        margin: 4px 0 0 0
    }
    .projects-carousel li a:hover{
        transform: translateY(0)
    }
    .projects-carousel li a:hover .overlay{
        opacity: 0
    }
    .homepage section.clients{
        padding: 35px 0 50px 0
    }
    .homepage .clients .clients-list{
        padding: 0 35px
    }
    .homepage .clients .clients-list li{
        width: 50%
    }
    .homepage .clients .clients-list li:first-child, .homepage .clients .clients-list li:nth-child(2){
        margin: 0 0 40px 0
    }
    .homepage .clients .clients-list li a{
        width: 100%
    }
    .homepage .clients .clients-list li:first-child a{
        width: 135px;
        height: 74px
    }
    .homepage .clients .clients-list li:nth-child(2) a{
        width: 50px;
        height: 64px
    }
    .homepage .clients .clients-list li:nth-child(3) a{
        width: 135px;
        height: 77px
    }
    .homepage .clients .clients-list li:last-child a{
        width: 135px;
        height: 90px
    }
    .testimonials li{
        min-height: 520px;
        padding: 30px 0 80px 0
    }
    .testimonials li i{
        font-size: 74px
    }
    .testimonials li p{
        font-size: 20px;
        line-height: 30px
    }
    .testimonials li figure{
        width: 147px;
        height: 147px;
        bottom: -75px
    }
    .testimonials .slick-list{
        padding: 0 0 70px 0
    }
    .testimonials .slick-prev{
        left: 10px
    }
    .testimonials .slick-next{
        right: 18px
    }
    .testimonials li h3{
        font-size: 24px;
        line-height: 24px;
        margin: 60px 0 0 0
    }
    .testimonials li span{
        font-size: 17px;
        line-height: 24px
    }
    section.main-section.call-to-action{
        padding: 0 35px 80px 35px
    }
    section.main-section.call-to-action .container-right p{
        font-size: 20px;
        line-height: 48px;
        text-align: center
    }
    section.main-section.call-to-action .container-right h2{
        font-size: 36px;
        line-height: 40px;
        text-align: center;
        margin: 10px 0 0 0
    }
    section.main-section.awards{
        padding: 35px;
        background-color: #FAFAFA
    }
    section.main-section.awards .content{
        background-color: #FAFAFA;
        padding: 0
    }
    section.main-section.awards .content > div{
        width: 100%;
        margin: 0;
        display: block
    }
    section.main-section.awards .content > div h2{
        font-size: 40px;
        line-height: 60px;
        text-align: center
    }
    section.main-section.awards .content > div p{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 10px 0 0 0
    }
    section.main-section.awards .content ul{
        width: 100%;
        display: block;
        margin: 30px 0 0 0
    }
    section.main-section.awards .content ul li{
        display: block;
        width: 100% !important;
        margin: 0 0 40px 0
    }
    section.main-section.awards .content ul li.cannes figure{
        width: 170px;
        height: 75px
    }
    section.main-section.awards .content ul li.awwards figure{
        width: 170px;
        height: 48px
    }
    section.main-section.awards .content ul li.adesign figure{
        width: 90px;
        height: 90px
    }

    footer .top-section{
        padding: 0 35px 50px 35px
    }
    footer .top-section .logo-container{
        width: 100%;
        display: block
    }
    footer .top-section .logo-container .logo{
        width: 178px;
        height: 78px;
        margin: auto
    }
    footer .top-section .logo-container p{
        font-size: 18px;
        line-height: 36px;
        text-align: center;
        margin: 30px 0 0 0
    }
    footer .top-section .logo-container .goto-landing{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 0
    }
    footer .top-section .logo-container .goto-landing:hover{
        letter-spacing: 0
    }
    footer .top-section ul{
        width: 100% !important;
        display: block !important;
    ;
        margin: 30px 0 0 0
    }
    footer .top-section ul li{
        text-align: center;
        padding: 0;
        font-size: 16px;
        line-height: 30px;
        margin: 0
    }
    footer .top-section ul li.header{
        font-size: 20px;
        line-height: 36px;
        margin: 0 0 10px 0
    }
    footer .top-section ul li a:hover{
        color: rgba(26, 28, 38, .7)
    }
    footer .top-section ul.social.desktop{
        display: none !important
    }
    footer .top-section ul.social.mobile li{
        display: inline-block;
        vertical-align: middle;
        width: 16.66%
    }
    footer .top-section ul.social.mobile li.header{
        display: block;
        width: 100%
    }
    footer .top-section ul.social.mobile li a{
        color: #1A1C26
    }
    footer .top-section ul.social.mobile li a i{
        width: 100%
    }
    footer .bottom-section{
        padding: 50px 35px 40px 35px
    }
    footer .bottom-section .list{
        width: 100% !important;
        display: block
    }
    footer .bottom-section .list ul li{
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        margin: 0 0 2px 0
    }
    footer .bottom-section ul li.header{
        font-size: 20px;
        line-height: 36px
    }
    footer .bottom-section ul li a:hover:after{
        visibility: hidden;
        opacity: 0;
        transform: none
    }
    .to-top{
        position: relative;
        display: block;
        right: initial;
        margin: auto;
        bottom: initial
    }
    .clutch_container .clutch-widget {
        width: 100%;
        margin: 0
    }
    .sortlist_container {
        margin: 20px auto;
        grid-template-columns: 100%
    }
    .sortlist_container img {
        height: auto;
        width: 90%;
        margin: 0 auto 10px auto
    }
    .sortlist_entry {
        display:block;
        margin-bottom: 25px
    }
    .about-page{
        padding: 100px 0 0 0
    }
    .about-page .hero{
        padding: 60px 35px 0 35px;
        height: auto
    }
    .about-page .hero .container{
        padding: 0;
        background-color: #FFFFFF
    }
    .about-page .hero .container-left{
        width: 100%
    }
    .about-page .hero h3, .about-page .hero h2{
        font-size: 28px;
        line-height: 40px;
        text-align: center
    }
    .about-page .hero p{
        font-size: 18px;
        line-height: 30px;
        text-align: center;
        max-width: initial
    }
    .about-page .hero .btn{
        margin: 40px auto
    }
    .about-page .hero .container-right{
        width: 100%;
        margin: 0
    }
    .about-page .hero figure{
        height: 390px !important;
        top: initial !important;
        margin: 10px 0 0 20px
    }
    .about-page .values{
        padding: 0;
        top: initial;
        height: auto !important
    }
    .about-page .values .container-left{
        width: 100%
    }
    .about-page .values .container-right{
        width: 100%
    }
    .about-page .values h2{
        top: initial;
        transform: none;
        font-size: 30px;
        line-height: 40px;
        text-align: center;
        padding: 0 50px 30px 50px
    }
    .about-page .values .container-right ul{
        padding: 20px 0;
        top: initial;
        transform: none
    }
    .about-page .values .container-right ul li figure{
        display: block;
        width: 145px;
        height: 145px;
        margin: auto
    }
    .about-page .values .container-right ul li > div{
        width: 100%;
        display: block;
        padding: 0 35px;
        text-align: center
    }
    .about-page .values .container-right ul li > div h3{
        font-size: 30px;
        line-height: 30px
    }
    .about-page .values .container-right ul li > div p{
        font-size: 18px;
        line-height: 30px;
        margin: 10px auto 0 auto
    }
    .about-page .team{
        padding: 50px 0 !important
    }
    .about-page .team h2, .about-page .work .container .text h2, .about-page .clients h2, .about-page .partners h2{
        font-size: 36px;
        text-align: center;
        line-height: 40px
    }
    .about-page .team p{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 15px 0 0 0;
        padding: 0 40px
    }
    .about-page .team ul .slick-list{
        padding: 0
    }
    .about-page .team ul li{
        margin: 0
    }
    .about-page .team ul li figure{
        width: 305px;
        height: 305px;
        border-radius: 50%;
        box-shadow: 0 10px 30px 0 rgba(21,19,19,0.2)
    }
    .about-page .team ul li:hover figure:before{
        opacity: 0;
        visibility: hidden
    }
    .about-page .team ul li.marwan-arban figure{
        background: url('../images/team/marwan-arban.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.aly-bassam figure{
        background: url('../images/team/aly-bassam.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.ahmad-sheikh figure{
        background: url('../images/team/ahmad-sheikh.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.lara-haidamous figure{
        background: url('../images/team/lara-haidamous.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.kholod-zughbor figure{
        background: url('../images/team/kholod-zughbor.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.amir-sheikh figure{
        background: url('../images/team/amir-sheikh.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.emerson-lopez figure{
        background: url('../images/team/emerson-lopez.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.hayyan-aldela figure{
        background: url('../images/team/hayyan-aldela.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li.nour-sawma figure{
        background: url('../images/team/nour-sawma.png') no-repeat center;
        background-size: contain
    }
    .about-page .team ul li h3{
        opacity: 1;
        visibility: visible;
        font-size: 27px;
        line-height: 40px;
        margin: 20px 0 0 0
    }
    .about-page .team ul li span{
        opacity: 1;
        visibility: visible;
        font-size: 18px
    }
    .about-page .team .carousel-navigation{
        text-align: center
    }
    .about-page .team .carousel-navigation > div{
        float: none
    }
    .about-page .work{
        height: auto;
        padding: 0;
        margin: 0
    }
    .about-page .work .container{
        padding: 70px 35px
    }
    .about-page .work .img-block{
        display: block;
        width: 100%;
        height: 370px;
        top: initial
    }
    .about-page .work .container .text{
        position: relative;
        top: initial;
        transform: none;
        padding: 0;
        display: block
    }
    .about-page .work .container .text p{
        font-size: 20px;
        line-height: 30px;
        text-align: center
    }
    .about-page .work .container .text .btn{
        margin: 40px auto 0 auto
    }
    .about-page .clients{
        padding: 50px 0 !important
    }
    .about-page .clients p{
        font-size: 20px;
        line-height: 30px
    }
    .about-page .clients ul.clients-list, .about-page .partners ul{
        margin: 50px auto 0 auto;
        padding: 0 35px
    }
    .about-page .clients ul.clients-list li{
        width: 50%;
        margin: 0 0 40px 0
    }
    .about-page .clients ul.clients-list li figure {
        width: 50%;
        max-width: 50%;
        height: 60px
    }
    .about-page .clients ul.clients-list li.rolex figure{
        width: 130px;
        height: 70px
    }
    .about-page .clients ul.clients-list li.apple figure{
        width: 50px;
        height: 60px
    }
    .about-page .clients ul.clients-list li.ministry figure{
        width: 130px;
        height: 74px
    }
    .about-page .clients ul.clients-list li.unicef figure{
        width: 130px;
        height: 88px
    }
    .about-page .clients ul.clients-list li.audi figure{
        width: 130px;
        height: 20px
    }
    .about-page .clients ul.clients-list li.al-arkan figure{
        width: 130px;
        height: 70px
    }
    .about-page .clients ul.clients-list li.bbac figure{
        width: 130px;
        height: 50px
    }
    .about-page .clients ul.clients-list li.al-baraka figure{
        width: 130px;
        height: 56px
    }
    .about-page .clients ul.clients-list li.yeprem figure{
        width: 130px;
        height: 62px
    }
    .about-page .clients ul.clients-list li.cham figure{
        width: 130px;
        height: 32px
    }
    .about-page .clients ul.clients-list li.total figure{
        width: 120px;
        height: 40px
    }
    .about-page .clients ul.clients-list li.psg figure{
        width: 55px;
        height: 65px
    }
    .about-page .partners{
        padding: 50px 35px !important
    }
    .about-page .partners p{
        font-size: 20px;
        line-height: 30px
    }
    .about-page .partners ul{
        padding: 0
    }
    .about-page .partners ul li{
        display: block;
        width: 100%;
        margin: 0 0 50px 0
    }
    .about-page .partners ul li span{
        font-size: 20px;
        line-height: 30px;
        margin: 20px 0 0 0
    }
    .about-page .partners ul li figure {
        width: 100%;
        max-width: 100%
    }
    .video-overlay .video-container{
        width: calc(100% - 40px);
        height: auto
    }
    .video-overlay .video-container video{
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }
    .video-overlay .close{
        font-size: 40px;
        line-height: 30px;
        right: 0;
        color: #FED235;
        top: 15px
    }
    .page-header{
        padding: 0 35px;
        height: calc(100vh + 140px)
    }
    .page-header.header-style-3{
        padding: 0 35px;
        background-color: #FAFAFA;
        height: auto
    }
    .page-header.header-style-3 .container{
        padding: 0;
        background-color: transparent
    }
    .blog-post-page .page-header{
        padding: 0 35px
    }
    .page-header .title{
        position: relative
    }
    .page-header .title h2{
        font-size: 24px;
        line-height: 36px;
        text-align: center
    }
    .page-header.header-style-3 .title h2{
        text-align: left
    }
    .page-header .title h1{
        font-size: 30px;
        line-height: 40px;
        text-align: center;
        padding: 0
    }
    .services-page .page-header .title h1{
        padding: 0
    }
    .page-header.header-style-3 .title h1{
        text-align: left
    }
    .blog-post-page .page-header .title h1{
        padding: 0
    }
    .page-header .title p{
        line-height: 30px;
        max-width: initial
    }
    .page-header .title h3{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        max-width: initial
    }
    .header-style-1:before{
        width: 365px;
        height: 365px;
        top: -20px;
        left: -50px
    }
    .header-style-1:after{
        width: 500px;
        height: 500px;
        bottom: 0;
        right: -150px
    }
    .header-style-4:before{
        top: 0;
        left: -60px;
        width: 370px;
        height: 370px
    }
    .header-style-4:after{
        width: 380px;
        height: 380px;
        bottom: -70px;
        right: -105px
    }
    .page-header.header-style-4{
        height: 100vh
    }
    .case-study-page .page-header .title{
        width: 100%;
        margin-top: 150px;
        padding: 0
    }
    .case-study-page .page-header figure, .case-study-page .page-header img{
        position: relative;
        width: 260px;
        height: 260px;
        margin: 50px 0 0 10px;
    }
    /*.case-study-page .page-header .case_study_profile_img_container {
        position: relative;
         margin: 50px 0 0 10px;
         width: 260px;
         height: 260px
    }
    */
    /*.case-study-page .page-header .case_study_profile_img_container img {
        width: 260px;
         height: 260px
    }
    */
    .case-study-page .page-header figure::before, .case-study-page .page-header img::before {
        width: 110px;
        height: 110px;
        top: -10px;
        right: -10px
    }
    /*.case-study-page .page-header .case_study_profile_img_container::before {
        width: 110px;
         height: 110px;
         top: -10px;
         right: -10px
    }
    */
    .blog-page .scroll-down{
        display: none
    }
    .blog-page .recommended-articles{
        padding: 0;
        margin: -140px 0 0 0
    }
    .blog-page .recommended-articles ul li{
        height: 345px
    }
    .blog-page .recommended-articles .slick-prev, .blog-page .recommended-articles .slick-next{
        width: 35px;
        height: 28px
    }
    .blog-page .recommended-articles .slick-prev{
        left: 15px
    }
    .blog-page .recommended-articles .slick-next{
        right: 15px
    }
    .blog-page .recommended-articles .slick-prev:before, .blog-page .recommended-articles .slick-next:before{
        width: 35px;
        height: 28px
    }
    .blog-page .recommended-articles ul li article .details{
        padding: 30px 35px 40px 35px
    }
    .blog-page .recommended-articles ul li article .details span{
        font-size: 20px;
        line-height: 36px
    }
    .blog-page .recommended-articles ul li article .details h2{
        font-size: 30px;
        line-height: 36px;
        left: 35px;
        bottom: 35px
    }
    .blog-page .articles{
        padding: 0 35px 50px 34px;
        margin: 60px 0 0 0
    }
    .blog-page .articles.empty_carousel {
        padding-top: 0
    }
    .filters li{
        margin: 0 10px 10px 0
    }
    .filters li a{
        padding: 12px 21px;
        font-size: 16px;
        opacity: 1
    }
    .filters li a:hover{
        color: #191E2A;
        background-color: #FFFFFF
    }
    .filters li a.active:hover{
        color: #FFFFFF;
        background-color: #191E2A;
        opacity: 1
    }
    .blog-page .articles .articles-list article{
        height: auto;
        margin: 0 0 50px 0
    }
    .blog-page .articles .articles-list article a figure{
        height: 215px;
        display: block;
        width: 100%
    }
    .blog-page .articles .articles-list article a > div{
        display: block;
        width: 100%;
        margin: 35px 0 0 0
    }
    .blog-page .articles .articles-list article a > div span{
        font-size: 20px;
        text-align: center;
        display: block
    }
    .blog-page .articles .articles-list article a > div h2{
        font-size: 30px;
        line-height: 40px;
        text-align: center
    }
    .blog-page .articles .articles-list article a > div p{
        font-size: 18px;
        line-height: 30px;
        text-align: center
    }
    .blog-page .articles .btn{
        margin: 75px auto 0 auto
    }
    .blog-post-page .scroll-down{
        display: none
    }
    .blog-post-page .main-article{
        padding: 0 35px;
        margin: -140px 0 0 0 !important
    }
    .blog-post-page .main-article .main-figure{
        height: 280px
    }
    .blog-post-page .main-article .article-content p{
        font-size: 18px;
        line-height: 30px
    }
    .blog-post-page .main-article .article-content h2{
        font-size: 30px;
        line-height: 40px
    }
    .blog-post-page .main-article .article-content img{
        margin: 30px 0
    }
    .blog-post-page .main-article .article-content .columns{
        margin: 50px 0
    }
    .blog-post-page .main-article .article-content .columns .col-left{
        width: 100%;
        margin: 0
    }
    .blog-post-page .main-article .article-content .columns .col-right{
        width: 100%;
        margin: 30px 0 0 0
    }
    .case-studies-page .page-header .title h1{
        padding: 0
    }
    .case-studies-page .case-studies .cases-list li a:hover .overlay{
        opacity: 0
    }
    .header-style-2:before{
        width: 365px;
        height: 365px;
        top: -20px;
        right: -200px
    }
    .header-style-2:after{
        left: -75px
    }
    .page-header.header-style-2{
        height: 100vh
    }
    .case-studies-page .scroll-down{
        left: 0;
        right: 0;
        padding: 0 10px 80px 10px;
        background: url('../images/scroll-arrow.png') no-repeat bottom center;
        background-size: 24px;
        bottom: 20px
    }
    .case-studies-page .scroll-down p{
        font-size: 18px;
        text-align: center;
        display: block;
        padding: 0
    }
    .case-studies-page .case-studies{
        padding: 50px 35px 0 35px
    }
    .case-studies-page .filters li{
        width: 48%;
        height: 45px;
        margin: 0 4% 4% 0;
        vertical-align: top
    }
    .case-studies-page .filters li:nth-child(even){
        margin: 0 0 4% 0
    }
    .case-studies-page .filters li a{
        padding: 0;
        display: block;
        height: 100%;
        line-height: 45px
    }
    .case-studies-page .case-studies .cases-list{
        margin: calc(50px - 4%) 0 0 0;
        grid-template-columns: 100%;
        grid-column-gap: 0
    }
    .case-studies-page .case-studies .cases-list li{
        height: 250px;
        width: 100%;
        margin: 0 0 50px 0 !important
    }
    section.main-section.call-to-action.style-2{
        padding: 75px 35px 125px 35px
    }
    section.main-section.call-to-action.style-2 .container-right p{
        line-height: 30px
    }
    section.main-section.call-to-action.style-2 .container-right h2{
        font-size: 40px;
        line-height: 48px;
        margin: 10px 0 0 0
    }
    section.main-section.call-to-action.style-2 .container-right .btn{
        margin: 40px auto 0 auto
    }
    .case-study-page .case-study .intro{
        padding: 0 35px;
        margin: 0 auto 80px auto;
        max-width: 100%
    }
    .case-study-page .case-study{
        padding: 80px 0 35px 0
    }
    .case-study-page .case-study .intro .container-left{
        width: 100%;
        margin: 0
    }
    .case-study-page .case-study .intro h2{
        font-size: 30px
    }
    .case-study-page .case-study .intro p{
        font-size: 18px;
        line-height: 30px;
        margin: 30px 0 70px 0
    }
    .case-study-page .case-study .intro .container-right{
        width: 100%
    }
    .case-study-page .case-study .intro ul li{
        line-height: 28px;
        padding: 0 0 0 25px
    }
    .case-study-page .case-study .intro ul li:before{
        top: 13px
    }
    .case-study-page .case-study .text .image-container{
        padding: 0
    }
    .case-study-page .case-study .text .img-full{
        margin: 0 0 30px 0
    }
    .case-study-page .case-study .text .container{
        padding: 0 35px;
        margin: 45px 0 0 0
    }
    .case-study-page .case-study .text .container * {
        max-width: 100%
    }
    .case-study-page .case-study .text .container > * {
        max-width: 100%;
        padding: 0
    }
    .case-study-page .case-study .text .container h2{
        font-size: 30px;
        padding: 0
    }
    .case-study-page .case-study .text .container p{
        font-size: 18px;
        line-height: 30px;
        padding: 0
    }
    .case-study-page .case-study .text .img-half{
        width: 100%;
        margin: 0 0 30px 0 !important
    }
    .case-study-page .case-study .text .container .image-container {
        padding: 0
    }
    .case-study-page .case-study .text .carousel-container{
        margin: 80px 0;
        height: 440px;
        padding: 90px 0
    }
    .case-study-page .case-study .text .carousel-container .slick-list{
        padding: 0 15px 0 30px
    }
    .case-study-page .case-study .text .carousel-container ul .slick-slide{
        margin: 0 15px 0 0
    }
    .case-study-page .case-study .text .carousel-container ul li{
        height: 258px
    }
    .case-study-page .case-study .text .carousel-container ul li.bg1:first-child{
        background: url('../images/case-study-1-img-5.png') no-repeat center;
        background-size: cover
    }
    .case-study-page .case-study .text .carousel-container ul li.bg2:first-child{
        background: url('../images/case-study-1-img-6.png') no-repeat center;
        background-size: cover
    }
    .case-study-page .case-study .text .carousel-container ul li.bg3:first-child{
        background: url('../images/case-study-1-img-7.png') no-repeat center;
        background-size: cover
    }
    .case-study-page .case-study .text .carousel-container ul .slick-prev, .case-study-page .case-study .text .carousel-container ul .slick-next{
        display: none !important
    }
    .case-study-page .case-study .text .carousel-container .carousel-navigation{
        padding: 0 30px 0 0
    }
    .case-study-page .case-study .text blockquote{
        padding: 70px 35px;
        height: 440px
    }
    .case-study-page .case-study .text blockquote:before{
        width: 440px;
        height: 440px;
        left: -168px
    }
    .case-study-page .case-study .text blockquote p{
        font-size: 20px;
        line-height: 30px
    }
    .case-study-page .case-study .text blockquote h4{
        font-size: 24px
    }
    .case-study-page .case-study .text .columns{
        padding: 0 35px
    }
    .case-study-page .case-study .text .columns .container{
        width: 100%;
        margin: 20px 0 0 0
    }
    .services-page .scroll-down{
        left: 0;
        right: 0;
        padding: 0 10px 80px 10px;
        background: url('../images/scroll-arrow.png') no-repeat bottom center;
        background-size: 24px;
        bottom: 20px
    }
    .services-page .scroll-down p{
        font-size: 18px;
        text-align: center;
        display: block;
        padding: 0
    }
    .services-page .services .service .container-left{
        width: 100%;
        display: block
    }
    .services-page .services .service .container-right{
        width: 100%;
        display: block;
        margin: 0
    }
    .services-page .services .service{
        position: relative;
        padding: 40px 35px 50px 35px
    }
    .services-page .services .service figure{
        position: absolute;
        top: 40px;
        height: 150px;
        width: calc(100% - 70px)
    }
    .services-page .services .service .description{
        padding: 180px 0 0 0
    }
    .services-page .services .service h2{
        font-size: 30px;
        text-align: center
    }
    .services-page .services .service p{
        font-size: 18px;
        line-height: 30px;
        text-align: center;
        margin: 25px 0 0 0
    }
    .services-page .services .service ul{
        margin: 30px 0 0 0
    }
    .services-page .services .service ul li{
        display: block;
        text-align: center;
        padding: 0;
        width: 100%;
        margin: 0 0 12px 0
    }
    .services-page .services .service .btn{
        margin: 50px auto 0 auto;
        width: 220px
    }
    .service-page .page-header.header-style-3 .title h2, .service-page .page-header.header-style-3 .title h1, .service-page .page-header .title p{
        text-align: center
    }
    .service-page .page-header .title{
        width: 100%;
        top: 90px;
        padding: 0
    }
    .service-page .page-header figure {
        position: relative;
        width: 260px;
        height: 260px;
        margin: 50px auto 100px auto;
    }
    .service-page .page-header figure::before {
        width: 110px;
        height: 110px;
        top: -10px;
        right: -10px
    }
    .service-page .page-header .title p{
        margin: 20px 0 0 0;
        max-width: initial
    }
    .service-page .service .intro{
        padding: 0 35px
    }
    .service-page .service{
        padding: 80px 0 40px 0
    }
    .service-page .service .intro h2{
        font-size: 30px;
        margin: 0 0 35px 0;
        line-height: 40px
    }
    .service-page .service .intro .container-left{
        width: 100%;
        margin: 0
    }
    .service-page .service .intro .container-right{
        width: 100%;
        margin: 50px 0 0 0
    }
    .service-page .service .intro p{
        font-size: 18px;
        line-height: 30px
    }
    .service-page .service li.main{
        font-size: 30px;
        line-height: 40px
    }
    .service-page .service .text .container{
        padding: 0 35px
    }
    .service-page .service .projects-carousel{
        padding: 0 35px;
        margin: 0 0 40px 0
    }
    .service-page .service .text .container h2{
        font-size: 30px;
        line-height: 40px
    }
    .service-page .service .intro{
        margin: 0 auto 80px auto
    }
    .service-page .service .projects-carousel .slick-list{
        padding: 0
    }
    .service-page .carousel-navigation{
        padding: 0 35px 0 0;
        margin: 0 0 100px 0
    }
    .service-page .carousel-navigation:after{
        content: '';
        display: block;
        clear: both
    }
    .service-page .service .text .container p{
        font-size: 18px;
        line-height: 30px
    }
    .service-page .service .testimonials-container{
        padding: 0
    }
    .service-page .service .testimonials-container{
        margin: 75px 0
    }
    .service-page .service .testimonials-container .testimonials{
        margin: 0
    }
    .service-page .service .testimonials-container li p{
        font-size: 24px;
        line-height: 36px;
        padding: 0
    }
    .service-page .service .testimonials-container li{
        padding: 75px 45px;
        min-height: 344px
    }
    .service-page .service .testimonials-container .testimonials li i{
        line-height: 30px
    }
    .service-page .service .services{
        padding: 70px 35px
    }
    .service-page .service .services .container ul{
        margin: 40px 0 0 0
    }
    .service-page .service .services .container ul li{
        width: 100%;
        margin: 0 0 40px 0
    }
    .service-page .service .services .container ul li h3{
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin: 20px 0 0 0
    }
    .service-page .service .services .container ul li p{
        font-size: 18px;
        line-height: 30px;
        text-align: center
    }
    .service-page .service .services .container .btn.black{
        width: 220px;
        margin: 60px auto 0 auto
    }
    .service-page section.main-section.call-to-action .container-left figure{
        display: block !important;
        height: 300px
    }
    .services-page .faq {
        padding: 50px 35px 100px 35px
    }
    .page-header.header-style-5{
        padding: 0 40px;
        height: 100vh
    }
    .header-style-5:after{
        width: 350px;
        height: 350px
    }
    .page-header.header-style-5 .title h1{
        padding: 0
    }
    .contact-page .locations{
        padding: 0;
        overflow: initial
    }
    .contact-page .locations .container{
        padding: 60px 35px 0 35px
    }
    .contact-page .locations .container .details{
        width: 100%
    }
    .contact-page .locations .container .details:before{
        background: #191E2A
    }
    .contact-page .locations .container .details h2{
        font-size: 30px;
        text-align: center
    }
    .contact-page .locations .container .details ul li > div{
        width: 100% !important;
        display: block;
        padding: 0 0 20px 0;
        text-align: center
    }
    .contact-page .locations .container .details ul{
        margin: 50px 0 0 0
    }
    .contact-page .locations .container .details ul li{
        margin: 0 0 40px 0 !important
    }
    .contact-page .locations .container .details ul li h3{
        font-size: 24px;
        padding: 0 0 7px 0
    }
    .contact-page .locations .container .details ul li h3.active{
        color: #FFFFFF
    }
    .contact-page .locations .container .details ul li h4, .contact-page .locations .container .details ul li span{
        font-size: 18px;
        line-height: 30px
    }
    .contact-page .locations .container .map{
        width: 100%;
        height: 330px;
        overflow: scroll;
        top: 140px;
        margin: -140px 0 0 0
    }
    .contact-page .locations .container .map.collapse{
        right: 0
    }
    .contact-page .locations .container .map img{
        width: 870px;
        height: 800px
    }
    .contact-page .locations .container .map i{
        width: 28px;
        height: 28px
    }
    .contact-page .locations .container .map i.saudi{
        top: 444px;
        left: 510px
    }
    .contact-page .locations .container .map i.lebanon{
        top: 122px;
        left: 160px
    }
    .contact-page .locations .container .map i.uae{
        top: 425px;
        left: 775px
    }
    .contact-page .locations .container .map i.syria{
        top: 135px;
        left: 195px
    }
    .contact-page .locations .container .map i.qatar{
        top: 435px;
        left: 670px
    }
    .contact-page .locations .container .map i.bahrain{
        top: 415px;
        left: 635px
    }
    .contact-page .locations .container .map i.egypt{
        top: 270px;
        left: 30px
    }
    .contact-page .locations .container .scroll-to-contact{
        bottom: -280px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 24px
    }
    .contact-page .locations .container .scroll-to-contact i{
        display: block;
        margin: 30px auto 0 auto;
        width: 28px;
        height: 35px
    }
    .contact-page .contact{
        margin: 350px auto 50px auto;
        padding: 20px 35px 0 35px
    }
    .contact-page .contact h3{
        font-size: 20px
    }
    .contact-page .contact h2{
        font-size: 30px;
        line-height: initial;
        margin: 10px 0 0 0
    }
    .contact-page .contact form{
        margin: 40px 0 0 0
    }
    .contact-page .contact form .full{
        margin: 0
    }
    .contact-page .contact form .full input{
        width: 100%;
        margin: 0 0 40px 0 !important;
        text-align: center;
        padding: 0 0 15px 0
    }
    .contact-page .contact form .full textarea{
        text-align: center
    }
    .contact-page .contact form .btn{
        margin: 50px auto 0 auto;
        display: block
    }
    .contact-page .contact form p{
        width: 100%;
        text-align: center;
        margin: 50px 0 0 0
    }
    .contact-page .contact form input[name="phone"]{
        width: 52%
    }
    .countries-codes{
        width: 45%;
        margin: 0 3% 0 0;
        height: 35px
    }
    .countries-codes span{
        text-align: center
    }
    .countries-codes ul{
        top: 35px
    }
    .countries-codes ul li a{
        text-align: center
    }
    .countries-codes ul li a:hover{
        color: #191E2A;
        background-color: #FFFFFF
    }
    .landing-page-header > div h1{
        font-size: 34px;
        line-height: 46px;
        max-width: initial;
        padding: 0 40px
    }
    .landing-page-header .container figure{
        left: -410px
    }
    .landing-page form{
        max-width: initial;
        width: calc(100% - 20px);
        margin: 50px auto 0 auto;
        padding: 70px 25px;
        font-size: 0
    }
    .landing-page form p{
        font-size: 20px
    }
    .landing-page form h3{
        margin: 10px 0 40px 0
    }
    .landing-page form input[type="text"], .landing-page form input[type="email"]{
        width: 100%;
        margin: 0 auto 30px auto
    }
    .landing-page form input[name="phone"]{
        width: calc(100% - 135px)
    }
    .landing-page .countries-codes{
        width: 125px;
        margin: 0 10px 0 0
    }
    .landing-page .countries-codes span{
        font-size: 16px
    }
    form .contact-services h4{
        line-height: 40px;
        padding: 0 10px;
        margin: 50px 0 40px 0
    }
    form .contact-services ul{
        font-size: 0
    }
    form .contact-services ul li span{
        vertical-align: top;
        top: 4px;
        position: relative;
        margin: 0 15px 0 0
    }
    form .contact-services ul li label{
        font-size: 18px;
        line-height: 26px;
        width: calc(100% - 35px);
        vertical-align: top
    }
    form .contact-services ul li{
        margin: 0 0 20px 0
    }
    form .contact-services ul li.active:hover span{
        background-color: #FED235
    }
    form .contact-services ul li:hover span{
        background-color: #FFFFFF
    }
    .contact-page form .contact-services{
        margin: 0
    }
    .landing-page form a{
        margin: 60px auto 0 auto
    }
    .landing-page ~ footer{
        margin: -130px 0 0 0;
        padding: 220px 0 110px 0
    }
    .landing-page ~ footer .container{
        max-width: initial;
        padding: 0 30px
    }
    .landing-page ~ footer .container ul{
        margin: 70px 0 10px 0
    }
    .landing-page ~ footer .container .btn{
        margin: 50px auto 0 auto
    }
    .landing-page ~ footer .container .btn:last-child{
        margin: 20px auto 0 auto
    }
    .privacy-page .text{
        padding: 50px 35px 0 35px
    }
    .privacy-page .text p{
        font-size: 17px;
        line-height: 28px;
        margin: 0 0 30px 0;
        word-break: break-word
    }
    .privacy-page .text h2{
        font-size: 26px;
        margin: 0 0 30px 0;
        line-height: 40px
    }
    .privacy-page .text h3 {
        font-size: 22px;
        line-height: 34px
    }
    .privacy-page .text h4{
        font-size: 19px;
        line-height: 30px
    }
    .privacy-page .text p a:hover{
        text-decoration: none
    }
    .contact-overlay form h3{
        font-size: 26px;
        margin: 0 0 25px 0
    }
    .contact-overlay form .close{
        font-size: 40px;
        line-height: 30px
    }
    .contact-overlay form .close:hover{
        color: #191E2A
    }
    .contact-overlay form{
        width: calc(100% - 40px);
        padding: 25px
    }
    .contact-overlay form .full{
        margin: 0
    }
    .contact-overlay form .full input{
        width: 100%;
        margin: 0 0 15px 0 !important;
        text-align: center;
        padding: 0 0 15px 0
    }
    .contact-overlay form .full input[name="phone"]{
        width: 52%
    }
    .contact-overlay form .full input::-webkit-input-placeholder, .contact-overlay form .full textarea::-webkit-input-placeholder{
        font-size: 16px
    }
    .contact-overlay form .full input:-moz-placeholder, .contact-overlay form .full textarea:-moz-placeholder{
        font-size: 16px
    }
    .contact-overlay form .full input::-moz-placeholder, .contact-overlay form .full textarea::-moz-placeholder{
        font-size: 16px
    }
    .contact-overlay form .full input:-ms-input-placeholder, .contact-overlay form .full textarea:-ms-input-placeholder{
        font-size: 16px
    }
    .contact-overlay .countries-codes span{
        font-size: 16px
    }
    .contact-overlay form .full textarea{
        text-align: center;
        padding: 10px 0
    }
    .contact-overlay form .btn{
        margin: 35px auto 0 auto;
        width: 100%
    }
    .contact-overlay form p{
        font-size: 16px;
        margin: 30px 0 0 0
    }
}
.mosha__toast {
    direction: ltr !important;
}
.mosha__toast__content__text {
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
}
@media only screen and (max-height: 800px) {
    .about-page .hero figure{
        height: 600px;
        top: -100px
    }
}
@media only screen and (max-height: 750px) {
    .homepage section.intro .container-right figure{
        margin: 15px 0 0 0
    }
    header .main-menu{
        padding: 40px 100px
    }
    .about-page .hero figure{
        height: 500px;
        top: -200px
    }
    .about-page .team{
        padding: 0 0 80px 100px
    }
    .about-page .clients{
        padding: 50px 90px
    }
    .about-page .partners{
        padding: 50px 90px 0 90px
    }
    .blog-post-page .main-article{
        margin: -20vh 0 200px 0
    }
}
@media only screen and (max-height: 650px) {
    .homepage section.intro .container-right figure{
        margin: 0;
        height: 600px
    }
    header .main-menu .bottom-container{
        padding: 25px 0 0 0;
        margin: 25px 0 0 0
    }
    .about-page .values{
        height: calc(100vh + 200px)
    }
    .about-page .hero figure{
        top: -250px
    }
}
@media only screen and (max-height: 550px) {
    header .main-menu{
        padding: 20px 100px
    }
    header .main-menu .bottom-container{
        padding: 15px 0 0 0;
        margin: 15px 0 0 0
    }
    .homepage section.intro .container-right figure{
        height: 500px
    }
    .about-page .hero{
        height: calc(100vh + 300px)
    }
    .about-page .values{
        top: -50px
    }
}
/*! * Kursor v0.1.5 * Forged by Luis Daniel Rovira * Released under the MIT License. */
.notCursor {
    cursor: none;
}
.notCursor * {
    cursor: none;
}
#kursorWrapper {
    position: fixed;
    z-index: 99;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div[class*='kursor'] {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10000;
}
div[class*='kursor'].kursor--hidden {
    opacity: 0;
    width: 0;
    height: 0;
}
div[class*='kursor'].kursor--1 {
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #FED235;
    transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out;
}
div[class*='kursor'].kursor--1 + .kursorChild {
    display: block;
    width: 4px;
    height: 4px;
    background: #FED235;
    border-radius: 50%;
    transition: all 0.2s ease, top 0s ease-out, left 0s ease-out;
}
div[class*='kursor'].kursor--1.--hover {
    width: 40px;
    height: 40px;
    border: 2px solid #FED235;
    background: #FED235;
}
div[class*='kursor'].kursor--1.--hover + .kursorChild {
    background: #FED235;
}
div[class*='kursor'].kursor--1.kursor--down {
    width: 20px;
    height: 20px;
}
div[class*='kursor'].kursor--1.kursor--down + .kursorChild:after {
    width: 40px !important;
    height: 40px !important;
    opacity: 0;
    border: 1px solid;
    border-radius: 50%;
    border-color: #FED235;
    transition: all 0.4s ease;
}
div[class*='kursor'].kursor--2 {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FED235;
    transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out;
}
div[class*='kursor'].kursor--2 + .kursorChild {
    display: block;
    width: 4px;
    height: 4px;
    background: #FED235;
    border-radius: 50%;
    transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
}
div[class*='kursor'].kursor--2.--hover {
    width: 40px;
    height: 40px;
    background: #FED235;
}
div[class*='kursor'].kursor--2.--hover + .kursorChild {
    background: #FED235;
}
div[class*='kursor'].kursor--2.kursor--down {
    width: 10px;
    height: 10px;
}
div[class*='kursor'].kursor--2.kursor--down + .kursorChild:after {
    width: 40px !important;
    height: 40px !important;
    opacity: 0;
    border: 1px solid;
    border-radius: 50%;
    border-color: #FED235;
    transition: all 0.4s ease;
}
div[class*='kursor'].kursor--3 {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #FED235;
    transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out;
}
div[class*='kursor'].kursor--3 + .kursorChild {
    display: block;
    width: 4px;
    height: 4px;
    background: #FED235;
    transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
}
div[class*='kursor'].kursor--3.--hover {
    width: 40px;
    height: 40px;
    background: #FED235;
    border: 1px solid #FED235;
}
div[class*='kursor'].kursor--3.--hover + .kursorChild {
    background: #FED235;
}
div[class*='kursor'].kursor--3.kursor--down {
    width: 5px;
    height: 5px;
    border: 1px solid #FED235;
}
div[class*='kursor'].kursor--3.kursor--down + .kursorChild {
    width: 10px;
    height: 10px;
}
div[class*='kursor'].kursor--3.kursor--down + .kursorChild:after {
    width: 40px !important;
    height: 40px !important;
    opacity: 0;
    border: 1px solid;
    border-color: #FED235;
    transition: all 0.4s ease;
}
div[class*='kursor'].kursor--4 {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border: 1px solid #FED235;
    border-radius: 50%;
    transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
}
div[class*='kursor'].kursor--4 + .kursorChild {
    display: block;
    width: 6px;
    height: 6px;
    background: #FED235;
    border-radius: 50%;
    transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out;
}
div[class*='kursor'].kursor--4.--hover {
    width: 30px;
    height: 30px;
    background: #FED235;
    border: 3px solid #FED235;
}
div[class*='kursor'].kursor--4.--hover + .kursorChild {
    width: 25px;
    height: 25px;
    background: #FED235;
}
div[class*='kursor'].kursor--4.kursor--down {
    width: 5px;
    height: 5px;
}
div[class*='kursor'].kursor--4.kursor--down + .kursorChild {
    width: 10px;
    height: 10px;
}
div[class*='kursor'].kursor--4.kursor--down + .kursorChild:after {
    width: 40px !important;
    height: 40px !important;
    opacity: 0;
    border-radius: 50%;
    border: 1px solid;
    border-color: #FED235;
    transition: all 0.4s ease;
}
div[class*='kursor'].kursor--5 {
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border: 1px solid #FED235;
    border-radius: 50%;
    transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
}
div[class*='kursor'].kursor--5.--hover {
    width: 26px;
    height: 26px;
    background: #FED235;
    border: 3px solid #FED235;
}
div[class*='kursor'].kursor--5.kursor--down {
    width: 15px;
    height: 15px;
}
div[class*='kursorChild'] {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
}
div[class*='kursorChild'].kursorChild[class*='--hidden'] {
    opacity: 0;
    width: 0;
    height: 0;
}
div[class*='kursorChild'].kursorChild:after {
    content: '';
    pointer-events: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 1;
    border: 0 solid #FED235;
    transform: translate(-50%, -50%);
}
.kursor--absolute {
    position: absolute !important;
    z-index: 2000;
}




#solve {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
}
#solve .div-center {
    font-size: 30px;
    font-weight: bold;
    color: #2a191c;
}
#solve .items {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
#solve .items .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
}
#solve .items .item .content {
   margin: 15px;
   line-height: 33px;
}
#solve .items .item img {
    width: 35px;
    margin-right: 15px;
}
#solve .items .item .title {
    font-size: 20px;
    font-weight: bold;
    color: #2a191c;
    margin-right: 15px;
}
.d-flex {
    display: flex;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 15px;
    padding-right: 130px;
}
.navbar.down {
    background: #2a191c;
}
.navbar.down a{
    font-size: 14px;
    color: #fff;
    margin-right: 52px;
}
.navbar.down svg{
    filter: invert(1);
}

.navbar a {
    font-size: 20px;
    color: #000;
    margin-left: 52px;
}
#us .img-block.reveal {
    position: relative;
    left: -70px;
    top: -100px;
}
.homepage section.intro {
    height: auto;
}
#Services h2 {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}
#read_more {
    position: absolute;
    top: 60px;
    left: 110px;
}
#Services .container-right {
    display: flex;
    width: 100%;
}
#Services .push-title-up {
    font-size: 15px;
    color: #fff;
}
.locations .container {
    display: flex;
}
.our_work {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 50px;
}
.our_work .box-work .title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 19px;
    color: #2a191c;

}
.our_work .box-work{
    margin-right: 16px
}

.our_work .box-work .img{
    position: relative;
}
.our_work .box-work .img img{
    width: 380px;
    height: 480px;
    border-radius: 9px;

}
.our_work .box-work .img .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e0e0ef0;
    padding: 35px 40px;
    transition: .5s;
    opacity: 0;
    border-radius: 10px;
    cursor: pointer;
}
.our_work .box-work .img .overlay::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 64px;
    left: 44%;
    transform: translate(-50%, 5px);
    z-index: 9999;
    width: 293px;
    height: 172px;
    background: url("../images/logo-manu.png") no-repeat;
    background-size: cover;
    transition: 0.5s ease-in-out;

}
.our_work .box-work .img .overlay:hover {
    opacity: 1;
}
#projects.work.main-section {
    padding: 80px 0 0 40px !important;
}
.our_work .box-work .img .overlay .text {
    color: #fff;
    font-size: 17px;
    text-align: left;
}
.box-parents {
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
    display: block;
    width: 100%;
    background: #3e0e0e12;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 50px;
}
.box-parents .title{
    font-size: 30px;
    font-weight: bold;
    color: #3e0e0e;
}
.box-parents .content{
  display: flex;
  width: 100%;
}
.box-parents .content .about {
    width: 70%;
}
.box-parents .content .logo {
    width: 30%;
    display: flex;
    justify-content: center;
}
.box-parents .content .logo img{
    max-width: 200px;
    max-height: 300px;
}
.box-parents .info {
    display: flex;
    justify-content: space-between;
    width: 70%;
}
.box-parents .info div {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.box-parents .info .Staff span:first-child {
    font-size: 30px;
}
.box-parents .info .category span:first-child {
    font-size: 25px;
}
.box-parents .website a {
    color: #0a568c;
}
.content_mail{

    font-size: 0;
    margin-top: 50px;
    background: #3e0e0ef0;
    border-top: 1px dashed rgb(214 146 61);
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
}
.content_mail .global-email{
   display: flex;
   justify-content: space-around;
   flex-direction: row-reverse;
   align-items: center;
   color: #fff;
    height: 85px;
   font-size: 15px;
}
.content_mail .global-email .input{
   position: relative;
}
.content_mail .global-email .input input{
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: #401515;
    border: 1px solid rgba(255,255,255,0.2);
    padding-right: 109px;
    text-align: left;
    direction: ltr;
}
.content_mail .global-email .input input:focus {
    outline: none;
    box-shadow: none;
}
.content_mail .global-email .input button{
    position: absolute;
    top: 2%;
    right: 0px;
    background: #d6923d;
    padding: 11px;
    width: 105px;
    border-radius: 0px 15px 15px 0px;
}
.flex-box-souq {
    display: flex;
    width: 100%;
}
.vs__actions button {
    position: absolute;
    left: 50px;
}
.vs--searchable .vs__dropdown-toggle {
    padding: 9px !important;
}

.selector .label {
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    color: #6c6868;
    padding: 4px;
    margin-bottom: 5px;
    background: #dddddd38;
}
.vs__selected-options * , .vs__dropdown-menu *  {
    font-family: "Droid Arabic Kufi" , gilroy-extrabold, Helvetica, Arial, sans-serif !important;
    text-align: left;
}
.vs__dropdown-option {
    padding: 12px !important;
}
.vs__dropdown-option:hover {
    background: #611818;
}
.vs__dropdown-option.vs__dropdown-option--highlight {
    background: #611818;
}
.vs__dropdown-menu {
    padding: 0;
    margin: 0;
}
.vs__dropdown-menu::-webkit-scrollbar {
   width: 3px;
}
.vs__dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.vs__dropdown-menu::-webkit-scrollbar-thumb {
    background: #611818;
}
.vs__dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.box-work .text p {
    font-size: 15px !important;
}
@media screen and (max-width: 1000px) {
    .our_work .box-work .img img {
        width: 100%;
    }
    .box-parents .content {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .box-parents .info , .box-parents .content .about {
        width: 100%;
        margin-bottom: 30px;
    }
    .box-parents .content .logo {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 768px) {
    .content_mail .global-email {
        flex-direction: column-reverse;

    }
    .our_work {
        flex-direction: column;
        width: 93%;
    }
    .our_work .box-work {
        margin-bottom: 30px;
    }
    .notCursor * {
        cursor: auto;
    }
    div[class*='kursor'] {
        display: none !important;
    }
    div[class*='kursorChild'] {
        display: none !important;
    }
}
@media screen and (max-width: 812px) and (max-height: 430px) and (orientation: landscape) {
    div[class*='kursor'] {
        display: none !important;
    }
    div[class*='kursorChild'] {
        display: none !important;
    }
    .notCursor * {
        cursor: auto;
    }
}

@media only screen and (max-width: 1000px) {
    .navbar {
        justify-content: flex-start;
        padding-right: 9px;
        position: absolute;
        display: none;
    }
    .navbar a{
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

}
@media only screen and (max-width: 800px) {
    .navbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        padding-right: 29px;
        display: none;
    }
    .navbar img {
        width: 72px !important;
        display: none;
    }
    .navbar a {
        font-size: 13px;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        padding-right: 5px;
    }
}
footer .list ul li {
    text-align: left !important;
}