@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-lightd41d.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-extraboldd41d.svg?#gilroy-extrabold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

/*General Styles*/
html, body{margin: 0; padding: 0; height: 100%}
body{height: 100%; -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: gilroy-extrabold, Helvetica, Arial, sans-serif; transition: .5s; cursor: pointer}
.btn.medium{width: 240px}
.btn.large{width: 280px}
.btn.yellow{background-color: #FED235; color: #191E2A; border: 1px solid #FED235}
.btn.yellow:hover{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}
/*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); transform-origin: top left; width: 155px; position: absolute; bottom: 84px; left: 12px}
.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: #191E2A; 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-new.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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: #FED235; 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: 30}
.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/image-about.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: #191E2A; font-size: 0; position: relative; overflow: hidden}
.homepage section.about .background{width: 500px; height: 500px; border-radius: 50%; background-color: #4D4D4D; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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(34, 34, 34, .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: rgba(254, 210, 53, .9); 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: #222222; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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}
section.main-section.awards .content ul li figure{margin: auto}
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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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{width: 345px; height: 345px; margin: auto; position: relative}
.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, 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 figure:hover {border-radius: 50%;}
/*.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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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}
.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%2bAssociate_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%2bPlanning_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}
.sortlist_container img {height: 141px}
.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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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 .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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: rgba(254, 210, 53, .9); 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: #222222; 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: #f0c630; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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 * {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 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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 * {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 .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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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 .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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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 .intro ul li{color: #191E2A; font-family: gilroy-light, Helvetica, Arial, sans-serif; font-size: 18px; margin: 0 0 15px 0}
.service-page .service .intro ul li.main{color: #191E2A; font-family: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: 55%; vertical-align: top; padding: 0 20px 0 0}
.contact-page .locations .container .details ul li > div:last-child{width: 45%}
.contact-page .locations .container .details ul li h3{color: #FFFFFF; font-size: 30px; font-family: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: 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.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: gilroy-light, Helvetica, Arial, sans-serif; text-align: center; opacity: 0; visibility: hidden}
.contact-page .contact h2{font-size: 72px; color: #191E2A; font-family: gilroy-extrabold, Helvetica, Arial, sans-serif; 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; font-family: gilroy-light, Helvetica, Arial, sans-serif; padding: 0 0 10px 0; color: #191E2A; vertical-align: top}
.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: gilroy-light, Helvetica, Arial, sans-serif; padding: 20px 0 35px 0; color: #191E2A; resize: 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: 28%}
/*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: gilroy-extrabold, Helvetica, Arial, sans-serif; margin: 0 0 40px 0; line-height: 50px}
.privacy-page .text h3{font-size: 24px; color: #191E2A; font-family: gilroy-extrabold, Helvetica, Arial, sans-serif; margin: 0 0 10px 0; line-height: 40px}
.privacy-page .text h4{font-size: 20px; color: #191E2A; font-family: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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{padding: 80px 0 0 0; font-size: 0}
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-footerc4ca.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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: gilroy-extrabold, Helvetica, Arial, sans-serif; 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: #191E2A; padding: 80px 200px}
footer .bottom-section .list{width: 17%; display: inline-block; vertical-align: top}
footer .bottom-section .list:first-child{width: 26%}
footer .bottom-section .list:nth-child(2){width: 23%}
footer .bottom-section ul{margin: 0 0 30px 0}
footer .bottom-section ul li.header{font-size: 20px; color: #64676F; font-family: 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: 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*/


@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: 46px}
    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}
}

@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: 200px 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}
}

@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 50px 0 50px}
    .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 70px 100px 70px}
    .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 .intro ul 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}
    .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 35px 100px 35px}
    .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: 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; text-align: center;}
    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{padding: 60px 0 0 0}
    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}
    .sortlist_container img {height: auto; width: 90%; margin: 0 auto 10px auto}
    .sortlist_entry {display:block}

    .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.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}
    .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 .intro ul 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}
    .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: 280px; 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 .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}
}

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

.dynamic-details h2{
    font-size: 40px;
    color: #191E2A;
    font-family: gilroy-extrabold, Helvetica, Arial, sans-serif;
}

.width-100{
    width: 100%;
}

.margin-top-bottom-50{
    margin: 50px 0px;
}