@charset "utf-8";:root {
    --primary-color: #003442;
    --secondary-color: #4A7C87;
    --background-color: #F6F4F2;
    --background-color-100: #f5f5f4;
    --background-color-200: #e7e5e4;
    --background-color-300: #d6d3d1;
    --background-color-400: #a8a29e;
    --background-color-500: #78716c;
    --background-color-600: #57534e;
    --background-color-700: #44403c;
    --background-color-800: #292524;
    --text-color: #003442
}

@font-face {
    font-family: Cairo;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Cairo Regular'),local('Cairo-Regular'),url(../fonts/cairo-v9-arabic-400.woff2) format('woff2');
    unicode-range: U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC
}

@font-face {
    font-family: Cairo;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Cairo Regular'),local('Cairo-Regular'),url(../fonts/cairo-v9-latin-400.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Cairo;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Cairo Bold'),local('Cairo-Bold'),url(../fonts/cairo-v9-arabic-700.woff2) format('woff2');
    unicode-range: U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC
}

@font-face {
    font-family: Cairo;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Cairo Bold'),local('Cairo-Bold'),url(../fonts/cairo-v9-latin-700.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: yfont;
    src: url(../fonts/yfont.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

[class*=" icon-"]:before,[class^=icon-]:before {
    font-family: yfont;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-music:before {
    content: '\e800'
}

.icon-search:before {
    content: '\e801'
}

.icon-mail:before {
    content: '\e802'
}

.icon-heart:before {
    content: '\e803'
}

.icon-heart-empty:before {
    content: '\e804'
}

.icon-star:before {
    content: '\e805'
}

.icon-star-empty:before {
    content: '\e806'
}

.icon-user:before {
    content: '\e807'
}

.icon-users:before {
    content: '\e808'
}

.icon-videocam:before {
    content: '\e809'
}

.icon-picture:before {
    content: '\e80a'
}

.icon-camera-alt:before {
    content: '\e80b'
}

.icon-th-large:before {
    content: '\e80c'
}

.icon-th-list:before {
    content: '\e80d'
}

.icon-ok:before {
    content: '\e80e'
}

.icon-plus:before {
    content: '\e80f'
}

.icon-minus:before {
    content: '\e810'
}

.icon-home:before {
    content: '\e811'
}

.icon-link:before {
    content: '\e812'
}

.icon-attach:before {
    content: '\e813'
}

.icon-lock:before {
    content: '\e814'
}

.icon-pin:before {
    content: '\e815'
}

.icon-eye:before {
    content: '\e816'
}

.icon-eye-off:before {
    content: '\e817'
}

.icon-tag:before {
    content: '\e818'
}

.icon-bookmark:before {
    content: '\e819'
}

.icon-flag:before {
    content: '\e81a'
}

.icon-download:before {
    content: '\e81b'
}

.icon-upload:before {
    content: '\e81c'
}

.icon-export:before {
    content: '\e81d'
}

.icon-pencil:before {
    content: '\e81e'
}

.icon-edit:before {
    content: '\e81f'
}

.icon-print:before {
    content: '\e820'
}

.icon-comment:before {
    content: '\e821'
}

.icon-chat:before {
    content: '\e822'
}

.icon-bell:before {
    content: '\e823'
}

.icon-location:before {
    content: '\e824'
}

.icon-trash-empty:before {
    content: '\e825'
}

.icon-doc:before {
    content: '\e826'
}

.icon-folder-open:before {
    content: '\e827'
}

.icon-folder:before {
    content: '\e828'
}

.icon-phone:before {
    content: '\e829'
}

.icon-cog:before {
    content: '\e82a'
}

.icon-wrench:before {
    content: '\e82b'
}

.icon-basket:before {
    content: '\e82c'
}

.icon-calendar:before {
    content: '\e82d'
}

.icon-login:before {
    content: '\e82e'
}

.icon-logout:before {
    content: '\e82f'
}

.icon-volume-off:before {
    content: '\e830'
}

.icon-volume-down:before {
    content: '\e831'
}

.icon-spin3:before {
    content: '\e832'
}

.icon-volume-up:before {
    content: '\e833'
}

.icon-clock:before {
    content: '\e834'
}

.icon-resize-full:before {
    content: '\e835'
}

.icon-resize-small:before {
    content: '\e836'
}

.icon-zoom-in:before {
    content: '\e837'
}

.icon-zoom-out:before {
    content: '\e838'
}

.icon-down-open:before {
    content: '\e839'
}

.icon-left-open:before {
    content: '\e83a'
}

.icon-right-open:before {
    content: '\e83b'
}

.icon-up-open:before {
    content: '\e83c'
}

.icon-down-big:before {
    content: '\e83d'
}

.icon-left-big:before {
    content: '\e83e'
}

.icon-right-big:before {
    content: '\e83f'
}

.icon-firefox:before {
    content: '\e840'
}

.icon-chrome:before {
    content: '\e841'
}

.icon-emo-happy:before {
    content: '\e842'
}

.icon-emo-wink:before {
    content: '\e843'
}

.icon-crown:before {
    content: '\e844'
}

.icon-up-big:before {
    content: '\e845'
}

.icon-shuffle:before {
    content: '\e846'
}

.icon-play:before {
    content: '\e847'
}

.icon-stop:before {
    content: '\e848'
}

.icon-pause:before {
    content: '\e849'
}

.icon-to-end:before {
    content: '\e84a'
}

.icon-to-end-alt:before {
    content: '\e84b'
}

.icon-to-start:before {
    content: '\e84c'
}

.icon-to-start-alt:before {
    content: '\e84d'
}

.icon-award:before {
    content: '\e84e'
}

.icon-globe:before {
    content: '\e84f'
}

.icon-cloud:before {
    content: '\e850'
}

.icon-flash:before {
    content: '\e851'
}

.icon-umbrella:before {
    content: '\e852'
}

.icon-flight:before {
    content: '\e853'
}

.icon-leaf:before {
    content: '\e854'
}

.icon-scissors:before {
    content: '\e855'
}

.icon-briefcase:before {
    content: '\e856'
}

.icon-barcode:before {
    content: '\e857'
}

.icon-qrcode:before {
    content: '\e858'
}

.icon-fire:before {
    content: '\e859'
}

.icon-chart-bar:before {
    content: '\e85a'
}

.icon-credit-card:before {
    content: '\e85b'
}

.icon-floppy:before {
    content: '\e85c'
}

.icon-megaphone:before {
    content: '\e85d'
}

.icon-key:before {
    content: '\e85e'
}

.icon-truck:before {
    content: '\e85f'
}

.icon-database:before {
    content: '\e860'
}

.icon-wallet:before {
    content: '\e861'
}

.icon-money-1:before {
    content: '\e862'
}

.icon-truck-1:before {
    content: '\e863'
}

.icon-tv:before {
    content: '\e864'
}

.icon-skype:before {
    content: '\e865'
}

.icon-emo-wink2:before {
    content: '\e866'
}

.icon-emo-unhappy:before {
    content: '\e867'
}

.icon-emo-sleep:before {
    content: '\e868'
}

.icon-spin5:before {
    content: '\e869'
}

.icon-cancel-circled:before {
    content: '\e86a'
}

.icon-cancel:before {
    content: '\e86b'
}

.icon-ok-circled2:before {
    content: '\e86c'
}

.icon-cancel-circled2:before {
    content: '\e86d'
}

.icon-right-dir:before {
    content: '\e86e'
}

.icon-left-dir:before {
    content: '\e86f'
}

[dir=ltr] .icon-left-dir:before {
    content: '\e86e'
}

.icon-up-dir:before {
    content: '\e870'
}

.icon-down-dir:before {
    content: '\e871'
}

.icon-align-justify:before {
    content: '\e872'
}

.icon-desktop-1:before {
    content: '\e873'
}

.icon-laptop-1:before {
    content: '\e874'
}

.icon-tablet-1:before {
    content: '\e875'
}

.icon-mobile-1:before {
    content: '\e876'
}

.icon-emo-thumbsup:before {
    content: '\e877'
}

.icon-bell-1:before {
    content: '\e878'
}

.icon-chat-1:before {
    content: '\e879'
}

.icon-clock-1:before {
    content: '\e87a'
}

.icon-hourglass:before {
    content: '\e87b'
}

.icon-publish:before {
    content: '\e87c'
}

.icon-clipboard:before {
    content: '\e87d'
}

.icon-floppy-1:before {
    content: '\e87e'
}

.icon-phone-1:before {
    content: '\e87f'
}

.icon-phone-outline:before {
    content: '\e880'
}

.icon-wristwatch:before {
    content: '\e881'
}

.icon-chart-bar-1:before {
    content: '\e882'
}

.icon-emo-devil:before {
    content: '\e883'
}

.icon-help:before {
    content: '\e884'
}

.icon-info:before {
    content: '\e885'
}

.icon-home-1:before {
    content: '\e886'
}

.icon-emo-surprised:before {
    content: '\e887'
}

.icon-emo-tongue:before {
    content: '\e888'
}

.icon-emo-coffee:before {
    content: '\e889'
}

.icon-emo-sunglasses:before {
    content: '\e88a'
}

.icon-emo-displeased:before {
    content: '\e88b'
}

.icon-emo-beer:before {
    content: '\e88c'
}

.icon-emo-grin:before {
    content: '\e88d'
}

.icon-emo-angry:before {
    content: '\e88e'
}

.icon-emo-saint:before {
    content: '\e88f'
}

.icon-emo-cry:before {
    content: '\e890'
}

.icon-emo-shoot:before {
    content: '\e891'
}

.icon-emo-squint:before {
    content: '\e892'
}

.icon-emo-laugh:before {
    content: '\e893'
}

.icon-marquee:before {
    content: '\e894'
}

.icon-crown-minus:before {
    content: '\e895'
}

.icon-crown-plus:before {
    content: '\e896'
}

.icon-crown-1:before {
    content: '\e897'
}

.icon-spin6:before {
    content: '\e898'
}

.icon-spin5-1:before {
    content: '\e899'
}

.icon-spin4:before {
    content: '\e89a'
}

.icon-spin3-1:before {
    content: '\e89b'
}

.icon-glass:before {
    content: '\e89c'
}

.icon-eye-1:before {
    content: '\e89d'
}

.icon-pin-1:before {
    content: '\e89e'
}

.icon-tag-1:before {
    content: '\e89f'
}

.icon-tags:before {
    content: '\e8a0'
}

.icon-direction-1:before {
    content: '\e8a1'
}

.icon-fax-1:before {
    content: '\e8a2'
}

.icon-menu-1:before {
    content: '\e8a3'
}

.icon-cog-alt:before {
    content: '\e8a4'
}

.icon-cog-1:before {
    content: '\e8a5'
}

.icon-sliders-1:before {
    content: '\e8a6'
}

.icon-wrench-1:before {
    content: '\e8a7'
}

.icon-cart-plus-1:before {
    content: '\e8a8'
}

.icon-basket-1:before {
    content: '\e8a9'
}

.icon-headphones:before {
    content: '\e8aa'
}

.icon-clock-2:before {
    content: '\e8ab'
}

.icon-block:before {
    content: '\e8ac'
}

.icon-resize-full-1:before {
    content: '\e8ad'
}

.icon-resize-full-alt-1:before {
    content: '\e8ae'
}

.icon-resize-small-1:before {
    content: '\e8af'
}

.icon-resize-vertical:before {
    content: '\e8b0'
}

.icon-resize-horizontal:before {
    content: '\e8b1'
}

.icon-move-1:before {
    content: '\e8b2'
}

.icon-zoom-in-1:before {
    content: '\e8b3'
}

.icon-zoom-out-1:before {
    content: '\e8b4'
}

.icon-down-hand:before {
    content: '\e8b5'
}

.icon-up-hand:before {
    content: '\e8b6'
}

.icon-left-hand:before {
    content: '\e8b7'
}

.icon-right-hand:before {
    content: '\e8b8'
}

.icon-play-1:before {
    content: '\e8b9'
}

.icon-stop-1:before {
    content: '\e8ba'
}

.icon-to-end-1:before {
    content: '\e8bb'
}

.icon-to-end-alt-1:before {
    content: '\e8bc'
}

.icon-to-start-1:before {
    content: '\e8bd'
}

.icon-to-start-alt-1:before {
    content: '\e8be'
}

.icon-fast-fw:before {
    content: '\e8bf'
}

.icon-fast-bw:before {
    content: '\e8c0'
}

.icon-eject:before {
    content: '\e8c1'
}

.icon-signal:before {
    content: '\e8c2'
}

.icon-wifi-1:before {
    content: '\e8c3'
}

.icon-target:before {
    content: '\e8c4'
}

.icon-award-1:before {
    content: '\e8c5'
}

.icon-align-left:before {
    content: '\e8c6'
}

.icon-align-center:before {
    content: '\e8c7'
}

.icon-align-right:before {
    content: '\e8c8'
}

.icon-align-justify-1:before {
    content: '\e8c9'
}

.icon-italic:before {
    content: '\e8ca'
}

.icon-leaf-1:before {
    content: '\e8cb'
}

.icon-scissors-1:before {
    content: '\e8cc'
}

.icon-paste-1:before {
    content: '\e8cd'
}

.icon-briefcase-1:before {
    content: '\e8ce'
}

.icon-asterisk:before {
    content: '\e8cf'
}

.icon-check:before {
    content: '\e8d0'
}

.icon-book:before {
    content: '\e8d1'
}

.icon-credit-card-1:before {
    content: '\e8d2'
}

.icon-megaphone-1:before {
    content: '\e8d3'
}

.icon-truck-2:before {
    content: '\e8d4'
}

.icon-motorcycle-1:before {
    content: '\e8d5'
}

.icon-dollar-1:before {
    content: '\e8d6'
}

.icon-hammer:before {
    content: '\e8d7'
}

.icon-language-1:before {
    content: '\e8d8'
}

.icon-soccer-ball-1:before {
    content: '\e8d9'
}

.icon-newspaper-1:before {
    content: '\e8da'
}

.icon-calc-1:before {
    content: '\e8db'
}

.icon-brush-1:before {
    content: '\e8dc'
}

.icon-birthday-1:before {
    content: '\e8dd'
}

.icon-facebook-1:before {
    content: '\e8de'
}

.icon-facebook-squared-1:before {
    content: '\e8df'
}

.icon-instagram-2:before {
    content: '\e8e0'
}

.icon-pinterest-squared-1:before {
    content: '\e8e1'
}

.icon-pinterest-1:before {
    content: '\e8e2'
}

.icon-paypal-1:before {
    content: '\e8e3'
}

.icon-linkedin-squared-1:before {
    content: '\e8e4'
}

.icon-twitter-squared-1:before {
    content: '\e8e5'
}

.icon-twitter-1:before {
    content: '\e8e6'
}

.icon-youtube-1:before {
    content: '\e8e7'
}

.icon-handshake-o-1:before {
    content: '\e8e8'
}

.icon-flashlight:before {
    content: '\e8e9'
}

.icon-th-outline:before {
    content: '\e8ea'
}

.icon-th:before {
    content: '\e8eb'
}

.icon-th-large-1:before {
    content: '\e8ec'
}

.icon-plus-1:before {
    content: '\e8ed'
}

.icon-minus-1:before {
    content: '\e8ee'
}

.icon-divide:before {
    content: '\e8ef'
}

.icon-eq:before {
    content: '\e8f0'
}

.icon-cancel-1:before {
    content: '\e8f1'
}

.icon-ok-1:before {
    content: '\e8f2'
}

.icon-cancel-outline:before {
    content: '\e8f3'
}

.icon-ok-outline:before {
    content: '\e8f4'
}

.icon-basket-2:before {
    content: '\e8f5'
}

.icon-menu-outline:before {
    content: '\e8f6'
}

.icon-menu-2:before {
    content: '\e8f7'
}

.icon-sort-alphabet:before {
    content: '\e8f8'
}

.icon-sort-numeric-outline:before {
    content: '\e8f9'
}

.icon-sort-numeric:before {
    content: '\e8fa'
}

.icon-sort-alphabet-outline:before {
    content: '\e8fb'
}

.icon-dollar-2:before {
    content: '\e8fc'
}

.icon-stopwatch:before {
    content: '\e8fd'
}

.icon-hourglass-1:before {
    content: '\e8fe'
}

.icon-warehouse:before {
    content: '\e8ff'
}

.icon-tree-2:before {
    content: '\e900'
}

.icon-tree-1:before {
    content: '\e901'
}

.icon-theatre:before {
    content: '\e902'
}

.icon-toilet:before {
    content: '\e903'
}

.icon-tennis:before {
    content: '\e904'
}

.icon-swimming:before {
    content: '\e905'
}

.icon-skiing:before {
    content: '\e906'
}

.icon-soccer:before {
    content: '\e907'
}

.icon-religious-islam:before {
    content: '\e908'
}

.icon-lodging:before {
    content: '\e909'
}

.icon-golf:before {
    content: '\e90a'
}

.icon-giraffe:before {
    content: '\e90b'
}

.icon-garden:before {
    content: '\e90c'
}

.icon-fuel:before {
    content: '\e90d'
}

.icon-fast-food:before {
    content: '\e90e'
}

.icon-instagram-3:before {
    content: '\e90f'
}

.icon-linkedin-1:before {
    content: '\e910'
}

.icon-twitter-2:before {
    content: '\e911'
}

.icon-pinterest-2:before {
    content: '\e912'
}

.icon-braille:before {
    content: '\e913'
}

.icon-ok-2:before {
    content: '\e914'
}

.icon-ok-circle:before {
    content: '\e915'
}

.icon-cancel-2:before {
    content: '\e916'
}

.icon-cancel-circle:before {
    content: '\e917'
}

.icon-terminal:before {
    content: '\e918'
}

.icon-th-list-1:before {
    content: '\f009'
}

.icon-th-thumb:before {
    content: '\f00a'
}

.icon-move:before {
    content: '\f047'
}

.icon-phone-squared:before {
    content: '\f098'
}

.icon-twitter:before {
    content: '\f099'
}

.icon-facebook:before {
    content: '\f09a'
}

.icon-hdd:before {
    content: '\f0a0'
}

.icon-certificate:before {
    content: '\f0a3'
}

.icon-tasks:before {
    content: '\f0ae'
}

.icon-resize-full-alt:before {
    content: '\f0b2'
}

.icon-menu:before {
    content: '\f0c9'
}

.icon-table:before {
    content: '\f0ce'
}

.icon-pinterest-circled:before {
    content: '\f0d2'
}

.icon-pinterest-squared:before {
    content: '\f0d3'
}

.icon-money:before {
    content: '\f0d6'
}

.icon-columns:before {
    content: '\f0db'
}

.icon-mail-alt:before {
    content: '\f0e0'
}

.icon-linkedin:before {
    content: '\f0e1'
}

.icon-gauge:before {
    content: '\f0e4'
}

.icon-sitemap:before {
    content: '\f0e8'
}

.icon-paste:before {
    content: '\f0ea'
}

.icon-lightbulb:before {
    content: '\f0eb'
}

.icon-exchange:before {
    content: '\f0ec'
}

.icon-user-md:before {
    content: '\f0f0'
}

.icon-stethoscope:before {
    content: '\f0f1'
}

.icon-bell-alt:before {
    content: '\f0f3'
}

.icon-coffee:before {
    content: '\f0f4'
}

.icon-food:before {
    content: '\f0f5'
}

.icon-building:before {
    content: '\f0f7'
}

.icon-hospital:before {
    content: '\f0f8'
}

.icon-ambulance:before {
    content: '\f0f9'
}

.icon-beer:before {
    content: '\f0fc'
}

.icon-h-sigh:before {
    content: '\f0fd'
}

.icon-angle-double-left:before {
    content: '\f100'
}

.icon-angle-double-right:before {
    content: '\f101'
}

.icon-angle-double-up:before {
    content: '\f102'
}

.icon-angle-double-down:before {
    content: '\f103'
}

.icon-circle-empty:before {
    content: '\f10c'
}

.icon-quote-left:before {
    content: '\f10d'
}

.icon-quote-right:before {
    content: '\f10e'
}

.icon-circle:before {
    content: '\f111'
}

.icon-github:before {
    content: '\f113'
}

.icon-smile:before {
    content: '\f118'
}

.icon-frown:before {
    content: '\f119'
}

.icon-meh:before {
    content: '\f11a'
}

.icon-keyboard:before {
    content: '\f11c'
}

.icon-code:before {
    content: '\f121'
}

.icon-star-half-alt:before {
    content: '\f123'
}

.icon-direction:before {
    content: '\f124'
}

.icon-crop:before {
    content: '\f125'
}

.icon-mic:before {
    content: '\f130'
}

.icon-shield:before {
    content: '\f132'
}

.icon-calendar-empty:before {
    content: '\f133'
}

.icon-extinguisher:before {
    content: '\f134'
}

.icon-rocket:before {
    content: '\f135'
}

.icon-angle-circled-left:before {
    content: '\f137'
}

.icon-angle-circled-right:before {
    content: '\f138'
}

.icon-angle-circled-up:before {
    content: '\f139'
}

.icon-angle-circled-down:before {
    content: '\f13a'
}

.icon-anchor:before {
    content: '\f13d'
}

.icon-lock-open-alt:before {
    content: '\f13e'
}

.icon-bullseye:before {
    content: '\f140'
}

.icon-rss-squared:before {
    content: '\f143'
}

.icon-ticket:before {
    content: '\f145'
}

.icon-compass:before {
    content: '\f14e'
}

.icon-euro:before {
    content: '\f153'
}

.icon-pound:before {
    content: '\f154'
}

.icon-dollar:before {
    content: '\f155'
}

.icon-rupee:before {
    content: '\f156'
}

.icon-yen:before {
    content: '\f157'
}

.icon-rouble:before {
    content: '\f158'
}

.icon-sort-name-up:before {
    content: '\f15d'
}

.icon-sort-name-down:before {
    content: '\f15e'
}

.icon-thumbs-up-alt:before {
    content: '\f164'
}

.icon-thumbs-down-alt:before {
    content: '\f165'
}

.icon-youtube-squared:before {
    content: '\f166'
}

.icon-youtube:before {
    content: '\f167'
}

.icon-youtube-play:before {
    content: '\f16a'
}

.icon-dropbox:before {
    content: '\f16b'
}

.icon-instagram:before {
    content: '\f16d'
}

.icon-flickr:before {
    content: '\f16e'
}

.icon-apple:before {
    content: '\f179'
}

.icon-android:before {
    content: '\f17b'
}

.icon-dribbble:before {
    content: '\f17d'
}

.icon-foursquare:before {
    content: '\f180'
}

.icon-female:before {
    content: '\f182'
}

.icon-male:before {
    content: '\f183'
}

.icon-moon:before {
    content: '\f186'
}

.icon-box:before {
    content: '\f187'
}

.icon-bug:before {
    content: '\f188'
}

.icon-vkontakte:before {
    content: '\f189'
}

.icon-renren:before {
    content: '\f18b'
}

.icon-wheelchair:before {
    content: '\f193'
}

.icon-vimeo-squared:before {
    content: '\f194'
}

.icon-space-shuttle:before {
    content: '\f197'
}

.icon-google:before {
    content: '\f1a0'
}

.icon-stumbleupon-circled:before {
    content: '\f1a3'
}

.icon-stumbleupon:before {
    content: '\f1a4'
}

.icon-digg:before {
    content: '\f1a6'
}

.icon-language:before {
    content: '\f1ab'
}

.icon-fax:before {
    content: '\f1ac'
}

.icon-building-filled:before {
    content: '\f1ad'
}

.icon-paw:before {
    content: '\f1b0'
}

.icon-spoon:before {
    content: '\f1b1'
}

.icon-cubes:before {
    content: '\f1b3'
}

.icon-behance:before {
    content: '\f1b4'
}

.icon-behance-squared:before {
    content: '\f1b5'
}

.icon-cab:before {
    content: '\f1b9'
}

.icon-tree:before {
    content: '\f1bb'
}

.icon-spotify:before {
    content: '\f1bc'
}

.icon-deviantart:before {
    content: '\f1bd'
}

.icon-soundcloud:before {
    content: '\f1be'
}

.icon-file-pdf:before {
    content: '\f1c1'
}

.icon-file-word:before {
    content: '\f1c2'
}

.icon-file-excel:before {
    content: '\f1c3'
}

.icon-file-powerpoint:before {
    content: '\f1c4'
}

.icon-file-image:before {
    content: '\f1c5'
}

.icon-file-archive:before {
    content: '\f1c6'
}

.icon-vine:before {
    content: '\f1ca'
}

.icon-codeopen:before {
    content: '\f1cb'
}

.icon-lifebuoy:before {
    content: '\f1cd'
}

.icon-rebel:before {
    content: '\f1d0'
}

.icon-empire:before {
    content: '\f1d1'
}

.icon-git-squared:before {
    content: '\f1d2'
}

.icon-paper-plane:before {
    content: '\f1d8'
}

.icon-paper-plane-empty:before {
    content: '\f1d9'
}

.icon-header:before {
    content: '\f1dc'
}

.icon-sliders:before {
    content: '\f1de'
}

.icon-share:before {
    content: '\f1e0'
}

.icon-share-squared:before {
    content: '\f1e1'
}

.icon-bomb:before {
    content: '\f1e2'
}

.icon-soccer-ball:before {
    content: '\f1e3'
}

.icon-tty:before {
    content: '\f1e4'
}

.icon-binoculars:before {
    content: '\f1e5'
}

.icon-plug:before {
    content: '\f1e6'
}

.icon-yelp:before {
    content: '\f1e9'
}

.icon-newspaper:before {
    content: '\f1ea'
}

.icon-wifi:before {
    content: '\f1eb'
}

.icon-calc:before {
    content: '\f1ec'
}

.icon-paypal:before {
    content: '\f1ed'
}

.icon-gwallet:before {
    content: '\f1ee'
}

.icon-cc-visa:before {
    content: '\f1f0'
}

.icon-cc-mastercard:before {
    content: '\f1f1'
}

.icon-cc-discover:before {
    content: '\f1f2'
}

.icon-cc-amex:before {
    content: '\f1f3'
}

.icon-cc-paypal:before {
    content: '\f1f4'
}

.icon-cc-stripe:before {
    content: '\f1f5'
}

.icon-bell-off:before {
    content: '\f1f6'
}

.icon-bell-off-empty:before {
    content: '\f1f7'
}

.icon-trash:before {
    content: '\f1f8'
}

.icon-copyright:before {
    content: '\f1f9'
}

.icon-at:before {
    content: '\f1fa'
}

.icon-eyedropper:before {
    content: '\f1fb'
}

.icon-brush:before {
    content: '\f1fc'
}

.icon-birthday:before {
    content: '\f1fd'
}

.icon-chart-pie:before {
    content: '\f200'
}

.icon-chart-line:before {
    content: '\f201'
}

.icon-toggle-off:before {
    content: '\f204'
}

.icon-toggle-on:before {
    content: '\f205'
}

.icon-bicycle:before {
    content: '\f206'
}

.icon-bus:before {
    content: '\f207'
}

.icon-angellist:before {
    content: '\f209'
}

.icon-cc:before {
    content: '\f20a'
}

.icon-forumbee:before {
    content: '\f211'
}

.icon-cart-plus:before {
    content: '\f217'
}

.icon-cart-arrow-down:before {
    content: '\f218'
}

.icon-diamond:before {
    content: '\f219'
}

.icon-ship:before {
    content: '\f21a'
}

.icon-user-secret:before {
    content: '\f21b'
}

.icon-motorcycle:before {
    content: '\f21c'
}

.icon-heartbeat:before {
    content: '\f21e'
}

.icon-venus:before {
    content: '\f221'
}

.icon-mars:before {
    content: '\f222'
}

.icon-facebook-official:before {
    content: '\f230'
}

.icon-pinterest:before {
    content: '\f231'
}

.icon-whatsapp:before {
    content: '\f232'
}

.icon-user-plus:before {
    content: '\f234'
}

.icon-user-times:before {
    content: '\f235'
}

.icon-bed:before {
    content: '\f236'
}

.icon-train:before {
    content: '\f238'
}

.icon-subway:before {
    content: '\f239'
}

.icon-medium:before {
    content: '\f23a'
}

.icon-opencart:before {
    content: '\f23d'
}

.icon-gg:before {
    content: '\f260'
}

.icon-tripadvisor:before {
    content: '\f262'
}

.icon-odnoklassniki-square:before {
    content: '\f264'
}

.icon-map:before {
    content: '\f279'
}

.icon-handshake-o:before {
    content: '\f2b5'
}

.icon-envelope-open:before {
    content: '\f2b6'
}

.icon-address-card:before {
    content: '\f2bb'
}

.icon-address-card-o:before {
    content: '\f2bc'
}

.icon-user-o:before {
    content: '\f2c0'
}

.icon-quora:before {
    content: '\f2c4'
}

.icon-telegram:before {
    content: '\f2c6'
}

.icon-thermometer-3:before {
    content: '\f2c8'
}

.icon-thermometer-quarter:before {
    content: '\f2ca'
}

.icon-shower:before {
    content: '\f2cc'
}

.icon-bath:before {
    content: '\f2cd'
}

.icon-snowflake-o:before {
    content: '\f2dc'
}

.icon-twitter-bird:before {
    content: '\f303'
}

.icon-twitter-squared:before {
    content: '\f304'
}

.icon-facebook-squared:before {
    content: '\f308'
}

.icon-linkedin-squared:before {
    content: '\f30c'
}

.icon-instagram-filled:before {
    content: '\f31f'
}

.icon-instagram-1:before {
    content: '\f32d'
}

.icon-behance-1:before {
    content: '\f34e'
}

* {
    box-sizing: border-box;
    border: 0;
    outline: 0;
    direction: rtl
}

[dir=ltr] * {
    direction: ltr
}

:focus {
    border: 0;
    outline: 0
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color);
    background-color: var(--background-color)
}

/* Apply Cairo font to all text elements except icons */
*:not([class*="fa-"]):not([class*="fas"]):not([class*="fab"]):not([class*="far"]):not([class*="fal"]):not([class*="icon-"]):not(i) {
    font-family: 'Cairo', sans-serif;
}

/* Preserve icon fonts */
[class*="fa-"], [class*="fas"], [class*="fab"], [class*="far"], [class*="fal"], .fa, .fas, .fab, .far, .fal {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

[class*="icon-"]:before, [class^="icon-"]:before {
    font-family: yfont !important;
}

/* Ensure all headings use Cairo font */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
}

/* Ensure all input elements use Cairo font */
input, textarea, select, button {
    font-family: 'Cairo', sans-serif;
}

main {
    display: block
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    text-decoration: none;
    color: inherit;
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a,a img,img {
    border-style: none;
    border-width: 0;
    outline: 0
}

button,input,optgroup,select,textarea {
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=search] {
    outline-offset: -2px
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

h1,h2,h3,h4,h5,h6,li,p,ul {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6,p {
    margin: 15px 0
}

.center {
    text-align: center
}

:focus {
    outline: 0
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1
}

.container-fluid::after,.container::after,.row::after {
    clear: both
}

.clearfix::after,.clearfix::before,.container-fluid::after,.container-fluid::before,.container::after,.container::before,.row::after,.row::before {
    display: table;
    content: " "
}

.container,.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    margin-right: -15px;
    margin-left: -15px
}

.row [class^=col] {
    float: right;
    padding: .5rem 15px;
    min-height: .125rem
}

[dir=ltr] .row [class^=col] {
    float: left
}

.row.no-padding>[class*=col-] {
    padding: 0
}

.row.no-gutter>[class*=col-] {
    padding: .5rem 15px
}

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%
}

.col-xs-12 {
    width: 100%
}

.col-xs-11 {
    width: 91.66666667%
}

.col-xs-10 {
    width: 83.33333333%
}

.col-xs-9 {
    width: 75%
}

.col-xs-8 {
    width: 66.66666667%
}

.col-xs-7 {
    width: 58.33333333%
}

.col-xs-6 {
    width: 50%
}

.col-xs-5 {
    width: 41.66666667%
}

.col-xs-4 {
    width: 33.33333333%
}

.col-xs-3 {
    width: 25%
}

.col-xs-2 {
    width: 16.66666667%
}

.col-xs-1 {
    width: 8.33333333%
}

@media (min-width: 768px) {
    .container {
        width:750px
    }

    .col-sm-12 {
        width: 100%
    }

    .col-sm-11 {
        width: 91.66666667%
    }

    .col-sm-10 {
        width: 83.33333333%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-8 {
        width: 66.66666667%
    }

    .col-sm-7 {
        width: 58.33333333%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-5 {
        width: 41.66666667%
    }

    .col-sm-4 {
        width: 33.33333333%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-2 {
        width: 16.66666667%
    }

    .col-sm-1 {
        width: 8.33333333%
    }
}

@media (min-width: 992px) {
    .container {
        width:970px
    }

    .col-md-12 {
        width: 100%
    }

    .col-md-11 {
        width: 91.66666667%
    }

    .col-md-10 {
        width: 83.33333333%
    }

    .col-md-9 {
        width: 75%
    }

    .col-md-8 {
        width: 66.66666667%
    }

    .col-md-7 {
        width: 58.33333333%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-5 {
        width: 41.66666667%
    }

    .col-md-4 {
        width: 33.33333333%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-2 {
        width: 16.66666667%
    }

    .col-md-1 {
        width: 8.33333333%
    }

    .row [class^=col] {
        padding: .5rem 15px
    }

    .row.no-gutter>[class*=col-] {
        padding: .5rem 0
    }
}

@media (min-width: 1200px) {
    .container {
        width:1200px
    }

    .col-lg-12 {
        width: 100%
    }

    .col-lg-11 {
        width: 91.66666667%
    }

    .col-lg-10 {
        width: 83.33333333%
    }

    .col-lg-9 {
        width: 75%
    }

    .col-lg-8 {
        width: 66.66666667%
    }

    .col-lg-7 {
        width: 58.33333333%
    }

    .col-lg-6 {
        width: 50%
    }

    .col-lg-5 {
        width: 41.66666667%
    }

    .col-lg-4 {
        width: 33.33333333%
    }

    .col-lg-3 {
        width: 25%
    }

    .col-lg-2 {
        width: 16.66666667%
    }

    .col-lg-1 {
        width: 8.33333333%
    }
}

.slick-list,.slick-slider,.slick-track {
    position: relative;
    display: block
}

.slick-loading .slick-slide,.slick-loading .slick-track {
    visibility: hidden
}

.slick-slider {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    top: 0;
    left: 0
}

.slick-track:after,.slick-track:before {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.navi {
    order: 2
}

#jawdaMenu {
    display: none;
    list-style: none;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    background: #fff;
    padding: 40px 20px;
    font-size: 1rem
}

[dir=rtl] #jawdaMenu {
    left: auto;
    right: 0
}

#jawdaMenu li {
    display: block;
    width: 100%;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid var(--background-color-200);
    font-size: 1rem;
    font-weight: 400
}

#jawdaMenu li.current-menu-item {
    position: relative
}

#jawdaMenu li.current-menu-item:hover {
    color: var(--secondary-color)
}

#jawdaMenu li.current-menu-item:hover li {
    color: var(--primary-color)
}

#jawdaMenu li a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
    height: 40px;
    line-height: 40px
}

#jawdaMenu li a:hover {
    color: var(--secondary-color)
}

#jawdaMenu li li a:hover {
    color: inherit
}

#jawdaMenu li.menu-item-has-children {
    position: relative
}

#jawdaMenu li.menu-item-has-children a {
    padding: 0 25px
}

#jawdaMenu li.menu-item-has-children>a {
    padding-left: 10px;
    padding-right: 25px
}

[dir=rtl] #jawdaMenu li.menu-item-has-children>a {
    padding-right: 10px;
    padding-left: 25px
}

#jawdaMenu li.menu-item-has-children span.mobOpen {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 28px;
    z-index: 1;
    background: var(--background-color-100);
    border-radius: 5px;
    margin-top: 5px
}

[dir=rtl] #jawdaMenu li.menu-item-has-children span.mobOpen {
    right: auto;
    left: -3px
}

#jawdaMenu li.menu-item-has-children span.mobOpen::after {
    content: '\f107';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .5rem
}

#jawdaMenu li.menu-item-has-children span.mobOpen:hover {
    background-color: var(--background-color-200)
}

#jawdaMenu li>.sub-menu {
    display: none;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    background: #f7f7f7;
    animation: .5s slide-down
}

@keyframes slide-down {
    from {
        transform: translateY(-20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

#jawdaMenu li>.sub-menu li {
    display: block;
    border-bottom: 1px solid var(--background-color-100)
}

#jawdaMenu li>.sub-menu li:last-child {
    border-bottom: none;
    border-radius: 0 0 10px 10px
}

#jawdaMenu li>.sub-menu li:hover {
    background-color: var(--background-color-100)
}

.CloseMyMenu {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 10px;
    display: block;
    font-size: 1.5rem;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: 400;
    margin-right: 3px;
    height: 36px;
    width: 36px;
    line-height: 30px;
    text-align: center;
    cursor: pointer
}

.CloseMyMenu::after {
    content: "×";
    margin-right: -3px
}

.CloseMyMenu:hover {
    background-color: var(--primary-color)
}

[dir=rtl] .CloseMyMenu {
    right: auto;
    left: 10px
}

.nav-button {
    display: block;
    font-size: 1.1rem;
    border-radius: 5px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 400;
    height: 30px;
    width: 30px;
    line-height: 27px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=ltr] .nav-button {
    left: auto;
    right: -40px
}

.nav-button:hover {
    background-color: var(--secondary-color);
    color: #fff
}

@media screen AND (min-width: 992px) {
    .navi {
        order:0
    }

    #jawdaMenu li.menu-item-has-children span.mobOpen,#jawdaMenu li.menu-item-has-children span.mobOpen:hover {
        background-color: transparent
    }

    .CloseMyMenu,.nav-button {
        display: none
    }

    #jawdaMenu {
        display: block;
        position: relative;
        padding: 0;
        max-width: none;
        width: auto;
        height: auto;
        overflow: visible;
        background-color: transparent
    }

    #jawdaMenu li {
        display: inline-block;
        width: auto;
        position: relative;
        border-bottom: none
    }

    #jawdaMenu>li {
        margin: 0 5px
    }

    #jawdaMenu li.current-menu-item::after {
        content: "";
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: -5px;
        background-color: var(--secondary-color);
        height: 3px;
        transition: .3s
    }

    #jawdaMenu>li::after {
        content: "";
        position: absolute;
        right: 100%;
        left: 7px;
        bottom: -5px;
        background-color: var(--secondary-color);
        height: 3px;
        transition: .5s
    }

    #jawdaMenu>li:hover::after {
        right: 7px
    }

    [dir=rtl] #jawdaMenu>li::after {
        left: 100%;
        right: 7px
    }

    [dir=rtl] #jawdaMenu>li.current-menu-item::after {
        left: 7px;
        right: 7px
    }

    [dir=rtl] #jawdaMenu>li:hover::after {
        left: 7px
    }

    #jawdaMenu li>.sub-menu {
        position: absolute;
        z-index: 2;
        width: auto;
        background: #fff;
        top: 40px;
        left: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 1px 5px rgba(0,0,0,.05)
    }

    [dir=rtl] #jawdaMenu li>.sub-menu {
        left: auto;
        right: 0
    }

    #jawdaMenu li.menu-item-has-children ul li.menu-item-has-children span.mobOpen::after {
        content: '\f105';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .5rem
    }

    [dir=rtl] #jawdaMenu li.menu-item-has-children ul li.menu-item-has-children span.mobOpen::after {
        content: '\f104';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .5rem
    }

    #jawdaMenu li>.sub-menu li>.sub-menu {
        top: 0;
        left: 100%
    }

    [dir=rtl] #jawdaMenu li>.sub-menu li>.sub-menu {
        left: auto;
        right: 100%
    }

    #jawdaMenu li.menu-item.hide-pc {
        display: none
    }
}

.jawda-responsive-menu {
    animation: slide-left .5s ease
}

@keyframes slide-left {
    from {
        transform: translateX(50px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@media screen and (min-width: 992px) {
    .jawda-responsive-menu {
        animation-duration:0s
    }
}

.alignnone {
    margin: 5px 20px 20px 0
}

.aligncenter,div.aligncenter {
    display: block;
    margin: 5px auto 5px auto
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

a img.alignnone {
    margin: 5px 20px 20px 0
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto
}

.gallery-caption,.wp-caption .wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px
}

.blognavigation {
    margin-top: 20px
}

.blognavigation li.active,.blognavigation li:hover,.tags a:hover {
    background: #202636;
    color: #fff
}

.blognavigation .next,.blognavigation .prev {
    background-color: var(--primary-color);
    color: #fff
}

.blognavigation .dots {
    font-size: 20px;
    margin: 0 5px
}

.blognavigation a,.blognavigation li,.blognavigation span.current {
    display: inline-block;
    margin: 10px 3px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 1rem;
    transition: .2s;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color)
}

.blognavigation a:hover,.blognavigation li:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    transition: .2s
}

.blognavigation span.current {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .blognavigation {
        margin-top:40px
    }
}

.alert {
    display: none;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

.alert.show {
    display: block
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

.alert-failed {
    color: #571515;
    background-color: #edd4d4;
    border-color: #e6c3c3
}

.alertclose:not(:disabled):not(.disabled) {
    cursor: pointer
}

.alert-dismissible .alertclose {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 10px;
    color: inherit;
    background: 0 0;
    font-size: 1.5rem
}

.lwptoc_toggle {
    display: none
}

ul.tags {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style: none
}

ul.tags a {
    display: inline-block;
    background: var(--background-color-600);
    color: #fff;
    padding: 1px 10px;
    margin: 2px;
    border-radius: 5px
}

.lwptoc_toggle_label {
    display: none
}

#showmoreUnits {
    background-color: var(--primary-color);
    padding: 5px 15px;
    color: #fff;
    font-size: 1rem;
    border: 0;
    transition: .5s;
    border-radius: 5px;
    font-family: Cairo,sans-serif;
    display: inline-block
}

#showmoreUnits .less,#showmoreUnits.texthide .more {
    display: none
}

#showmoreUnits .more,#showmoreUnits.texthide .less {
    display: block
}

.hiddenUnit {
    display: none
}

.hiddenUnit.show {
    display: block
}

.headline {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 5px
}

.headline-title {
    font-size: 1.3rem;
    color: var(--secondary-color);
    position: relative;
    padding-right: 20px
}

.headline-title::after,.headline-title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 18px;
    border-radius: 10px;
    border: 2px solid var(--secondary-color)
}

.headline-title::before {
    background-color: var(--secondary-color);
    height: 9px;
    transform: translateY(0);
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.headline-title.center::after,.headline-title.center::before {
    display: none
}

[dir=ltr] .headline-title {
    padding-right: 0;
    padding-left: 20px
}

[dir=ltr] .headline-title::after,[dir=ltr] .headline-title::before {
    right: auto;
    left: 0
}

@media only screen and (min-width: 992px) {
    .headline {
        font-size:1rem;
        margin-bottom: 15px
    }

    .headline-title {
        font-size: 1.6rem;
        padding-right: 25px
    }

    .headline-title::after,.headline-title::before {
        width: 10px;
        height: 22px
    }

    .headline-title::before {
        height: 11px
    }
}

.contact-form {
    background-color: #fff;
    padding: 15px
}

.contact-form-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color)
}

.contact-form form {
    width: 100%
}

.contact-form .comment,.contact-form .form-bg {
    width: 100%;
    padding-right: 10px;
    height: 42px;
    line-height: 40px;
    color: var(--text-color);
    display: inline-block;
    font-family: Rubik,sans-serif;
    font-size: 1rem;
    border: 1px solid var(--background-color-300);
    background-color: rgba(255,255,255,.8);
    border-radius: 5px;
    margin: 10px 0;
    transition: .2s
}

[dir=ltr] .contact-form .comment,[dir=ltr] .contact-form .form-bg {
    padding-right: 0;
    padding-left: 10px
}

.contact-form .comment {
    width: 100%;
    height: 100px
}

.contact-form .comment::placeholder,.contact-form .form-bg::placeholder {
    opacity: .9
}

.contact-form .comment:hover,.contact-form .form-bg:hover {
    border: 1px solid var(--secondary-color)
}

.contact-form .comment:focus,.contact-form .form-bg:focus {
    border: 2px solid var(--secondary-color)
}

.contact-form .submit {
    background-color: var(--primary-color);
    line-height: 36px;
    padding: 0 20px;
    color: #fff;
    font-size: 1rem;
    border: 0;
    transition: .5s;
    border-radius: 5px;
    font-family: Rubik,sans-serif;
    margin: 7px 0;
    width: 100%;
    align-self: flex-end
}

.contact-form .submit:hover {
    cursor: pointer;
    background-color: var(--secondary-color)
}

.form-bg.half-l,.form-bg.half-r {
    width: 100%
}

@media (min-width: 992px) {
    .form-bg.half-l,.form-bg.half-r {
        width:48%;
        display: inline-block
    }

    .form-bg.half-l {
        float: left
    }
}

.lightbox-target {
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,.8);
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 200;
    top: -100%;
    overflow-y: scroll;
    right: 0;
    left: 0
}

a.lightbox-close {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .5s ease-in-out;
    opacity: 0;
    top: 0;
    left: 0
}

.lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
    left: 0
}

.lightbox-target .icon-cancel {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 1.2rem;
    top: 10px;
    left: 10px;
    position: absolute;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    display: block;
    text-align: center
}

.lightbox-target .icon-cancel:hover {
    background-color: var(--secondary-color);
    color: #fff
}

.contact-popup {
    padding: 25px;
    border-radius: 10px;
    position: absolute;
    transition: .5s ease-in-out;
    left: 50%;
    z-index: 1;
    width: 400px;
    max-width: 90%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.schedule-meeting.popup-meeting {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    z-index: 1
}

.zoom-popup-title {
    font-weight: 700;
    color: var(--secondary-color);
    padding-right: 15px;
    padding-top: 15px
}

[dir=ltr] .zoom-popup-title {
    padding-right: 0;
    padding-left: 15px
}

.schedule-meeting {
    border: 1px solid var(--secondary-color);
    background-color: #fff;
    border-radius: 15px
}

.schedule-meeting form {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: space-between;
    border-radius: 10px
}

.schedule-meeting .form-inside-title {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 5px;
    padding-right: 5px
}

.schedule-meeting .input-box {
    width: 98%;
    margin: 0 1%
}

.schedule-meeting .input-box label {
    font-size: .9rem;
    margin-bottom: 5px;
    font-weight: 700
}

.schedule-meeting .comment,.schedule-meeting .form-bg {
    width: 100%;
    padding: 0 15px;
    height: 40px;
    line-height: 38px;
    color: var(--primary-color);
    display: block;
    font-family: Cairo;
    font-size: .85rem;
    margin-bottom: 15px;
    border: 1px solid silver;
    font-weight: 700;
    background-color: #fff;
    border-radius: 10px
}

.schedule-meeting .comment {
    height: 100px
}

.schedule-meeting .search-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-position: 2%;
    background-repeat: no-repeat;
    color: var(--primary-color)
}

[dir=ltr] .schedule-meeting .search-select {
    background-position: right center
}

.schedule-meeting .comment::placeholder,.schedule-meeting .form-bg::placeholder {
    opacity: .7
}

.schedule-meeting .submit {
    margin: 15px 0;
    background-color: var(--primary-color);
    line-height: 32px;
    padding: 0 20px 3px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: 0;
    transition: .2s;
    border-radius: 10px;
    font-family: Cairo,sans-serif;
    align-self: flex-end
}

.schedule-meeting .submit:hover {
    cursor: pointer;
    background-color: var(--secondary-color)
}

.schedule-meeting .radio-box {
    display: flex;
    overflow-x: auto;
    width: 100%;
    list-style-type: none;
    padding-right: 0;
    margin-bottom: 15px
}

.schedule-meeting .radio-box [type=radio] {
    display: none
}

.schedule-meeting .radio-box label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 5px 10px;
    width: 100%;
    background-color: #fff;
    color: var(--primary-color);
    font-size: .9rem;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #dadada;
    transition: .2s
}

.schedule-meeting .radio-box input:checked~label,.schedule-meeting .radio-box label:hover {
    background-color: #edf5f6;
    border-color: var(--secondary-color02);
    color: var(--primary-color)
}

.schedule-meeting .radio-box li {
    margin: 0 5px;
    list-style-type: none
}

@media only screen and (min-width: 992px) {
    .schedule-meeting.popup-meeting {
        top:50%;
        transform: translate(-50%,-50%)
    }

    .schedule-meeting .input-box {
        width: 48%;
        margin: 0 1%
    }

    .schedule-meeting .search-select {
        width: 60%
    }

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

#back-top {
    position: fixed;
    z-index: 50;
    right: 15px;
    bottom: 10px
}

#back-top i {
    background-color: var(--secondary-color);
    line-height: 36px;
    height: 38px;
    width: 38px;
    border-radius: 50px;
    text-align: center;
    font-size: 14px;
    display: block;
    transition: .5s;
    color: #fff
}

#back-top i:hover {
    background-color: var(--primary-color)
}

#floating-icons {
    position: fixed;
    left: 10px;
    transition: .5s;
    bottom: 10px;
    z-index: 201
}

#floating-icons a {
    display: block;
    width: 44px;
    background-color: var(--primary-color);
    border-radius: 50px;
    margin: 6px 0;
    font-size: 1.2rem;
    text-align: center;
    height: 44px;
    line-height: 44px;
    transition: .5s;
    color: #fff;
    position: relative
}

#floating-icons a::before {
    content: "";
    border: 1px solid;
    width: 34px;
    height: 34px;
    border-radius: 50px;
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    opacity: .7
}

#floating-icons a:hover {
    background-color: var(--secondary-color)
}

#floating-icons .float-phone {
    background-color: var(--primary-color);
    color: #fff
}

#floating-icons .float-zoom {
    background-color: #0071eb;
    color: #fff
}

#floating-icons .float-wts {
    background-color: #2bbc57;
    color: #fff;
    animation: pulse ease-in-out .8s infinite
}

#floating-icons .float-wts:hover {
    animation-play-state: paused
}

#floating-icons .float-wts .float-text {
    background-color: #fff;
    color: #2bbc57;
    font-size: .9rem;
    padding: 0 10px;
    border-radius: 5px;
    margin-left: 2px;
    line-height: 1.8rem;
    transition: .5s;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    z-index: -1;
    white-space: nowrap;
    box-shadow: 1px 1px 4px rgba(0,0,0,.2)
}

@keyframes pulse {
    from {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        transform: scaleX(1)
    }
}

.hide-me {
    opacity: 0;
    visibility: hidden
}

.show-me {
    opacity: 1;
    visibility: visible
}

#developer_cta {
    display: none
}

@media only screen and (max-width: 786px) {
    #floating-icons {
        width:100%;
        display: flex;
        left: 0;
        bottom: 0;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,.15)
    }

    #floating-icons.dev_only_on_mob {
        display: none!important
    }

    #floating-icons .float-wts {
        animation-play-state: paused
    }

    #floating-icons .hide-pc {
        display: inline-block
    }

    #floating-icons a {
        flex-grow: 1;
        margin: 5px 2px;
        font-size: .8rem;
        height: 38px;
        line-height: 38px
    }

    #floating-icons a::before {
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        height: 28px
    }

    #floating-icons .float-wts .float-text {
        display: none
    }

    #back-top {
        display: none
    }

    #developer_cta {
        display: flex;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        z-index: 1;
        gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: stretch
    }

    #developer_cta .dev_data {
        flex: 2;
        display: flex;
        gap: 10px;
        flex-direction: row;
        align-items: center
    }

    #developer_cta .dev_data img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 5px;
        display: block
    }

    #developer_cta .dev_name {
        font-weight: 400;
        font-size: 1.1rem;
        text-wrap: wrap;
        line-height: 30px
    }

    #developer_cta .cta_data {
        flex: 1;
        display: flex;
        justify-content: stretch;
        gap: 10px;
        align-items: center
    }

    #developer_cta .cta_data .float-phone,#developer_cta .cta_data .float-wts {
        color: #28a745;
        border: 2px solid #28a745;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        font-weight: 900;
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        align-items: center
    }
}

.icon-phone::before {
    transform: rotate(270deg)
}

header {
    box-shadow: 0 0 5px rgba(0,0,0,.1)
}

.header-section {
    background-color: #fff;
    position: relative;
    padding-right: 15px;
    padding-left: 50px
}

[dir=ltr] .header-section {
    padding-left: 15px;
    padding-right: 50px
}

.header-section-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header-side {
    display: flex;
    align-items: center;
    align-self: stretch
}

@media only screen and (min-width: 992px) {
    .header-section {
        padding:0 25px
    }
}

.hrz-separator {
    width: 1px;
    background-color: var(--text-color);
    opacity: .5;
    height: 26px;
    margin: 0 10px;
    display: inline-block
}

@media only screen and (min-width: 992px) {
    .hrz-separator {
        margin:0 15px
    }
}

.header-contact {
    margin-left: 10px
}

.header-contact i {
    margin-left: 5px
}

.header-contact:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .header-contact {
        font-size:1.1rem;
        margin-left: 25px
    }
}

.language {
    line-height: 28px;
    font-size: .8rem;
    transition: .2s;
    color: var(--text-color)
}

.language:hover {
    cursor: pointer;
    color: var(--secondary-color)
}

.language ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline
}

.language a {
    font-family: 'Noto Kufi Arabic',sans-serif!important;
    text-decoration: none
}

.language .lang-item {
    display: block;
    float: left;
    list-style: none
}

.language .current-lang {
    display: none
}

@media only screen and (min-width: 992px) {
    .language {
        font-size:.9rem;
        font-weight: 700;
        margin: 0 5px
    }
}

header .hide-mobile {
    display: none
}

@media only screen and (min-width: 992px) {
    header .hide-mobile {
        display:inline-block
    }
}

.header-btn {
    white-space: nowrap;
    padding: 0 25px;
    line-height: 2.2rem;
    display: none;
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    margin-right: 15px;
    transition: .2s;
    border-radius: 30px;
	direction:ltr;
}

[dir=ltr] .header-btn {
    margin-right: 0;
    margin-left: 15px
}

.header-btn:hover {
    background-color: var(--primary-color)
}

.header-btn i {
    margin-right: 5px !important;
}

[dir=ltr] .header-btn i {
    margin-right: 0;
    margin-left: -5px
}

@media only screen and (min-width: 992px) {
    .header-btn {
        display:flex;
        align-items: center
    }
}

.logo {
    background: linear-gradient(to left, var(--primary-color), var(--secondary-color));
    padding: 0 10px;
    color: #7BA5AD;
    margin-right: -15px
}

.logo img {
    height: 70px;
    width: auto;
    max-width: 100%;
    padding: 10px 0;
    display: block
}

[dir=ltr] .logo {
    margin-right: 0;
    margin-left: -15px
}

@media only screen and (min-width: 992px) {
    .logo {
        padding:0 20px;
        margin-left: 15px;
        margin-right: -25px
    }

    [dir=ltr] .logo {
        margin-right: 0;
        margin-left: -25px
    }

    .logo img {
        height: 100px;
        padding: 15px 5px
    }
}

.header-social {
    position: relative;
    width: auto;
    text-align: right;
    float: right;
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem
}

.header-social ul {
    display: inline-block;
    list-style: none;
    margin: 0 -5px;
    padding: 0
}

.header-social ul li {
    display: block;
    float: left;
    margin: 2px 3px
}

.header-social i {
    color: var(--text-color);
	margin: 0px 5px;
}

.header-social i:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .header-social {
        font-size:.9rem;
        padding: 5px 0
    }
}

#footer {
    background-color: var(--background-color);
    padding-top: 20px
}

.footer-headline {
    font-size: 1.1rem;
    font-weight: 700;
    position: relative;
    margin-bottom: 15px
}

.footer-headline::after {
    position: absolute;
    content: "";
    right: 0;
    left: 15px;
    bottom: -12px;
    height: 1px;
    background-color: #fff;
    opacity: .2
}

.footer-logo img {
    height: 50px;
    width: auto;
    max-width: 90%;
    display: block;
    margin-bottom: 15px
}

.footer-txt {
    margin: 25px 0;
    font-size: 1rem
}

.footer-links li {
    line-height: 36px;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    position: relative;
    display: flex
}

.footer-links li::before {
    content: "\f053";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8rem;
    color: var(--secondary-color);
    display: inline-block;
    margin-left: 5px
}

[dir=ltr] .footer-links li::before {
    margin-left: 0;
    margin-right: 5px;
    transform: rotate(180deg)
}

.footer-links li a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    #footer {
        padding-top:60px
    }

    .footer-logo img {
        height: 70px
    }

    .footer-txt {
        padding-left: 20px
    }

    .footer-headline::after {
        left: auto;
        width: 60px;
        height: 4px
    }
}

.footer-social {
    position: relative;
    width: auto;
    text-align: right;
    float: right;
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem
}

[dir=ltr] .footer-social {
    text-align: left;
    float: left
}

.footer-social ul {
    display: inline-block;
    list-style: none;
    margin: 0 -5px;
    padding: 0
}

.footer-social ul li {
    float: left;
    margin: 2px 5px;
    border: 1px solid var(--primary-color);
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 50px;
    color: var(--primary-color);
    transition: .2s
}

.footer-social li:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .footer-social {
        font-size:1rem;
        padding: 5px 0
    }
}

.get-in-touch-box {
    margin: 15px 0;
    position: relative
}

.get-in-touch-box li {
    list-style-type: none;
    line-height: 2.5rem
}

.get-in-touch-box i {
    color: var(--secondary-color);
    margin-left: 5px
}

[dir=ltr] .get-in-touch-box i {
    margin-left: 0;
    margin-right: 5px
}

.get-in-touch-box a:hover {
    color: var(--secondary-color)
}

.copyright {
    line-height: 32px;
    text-align: center;
    margin-top: 20px;
    font-size: 1rem;
    border-top: 1px solid rgba(255,255,255,.3);
    padding-bottom: 50px;
    background-color: #fff;
    border: 1px solid var(--background-color-200)
}

.copyright a {
    font-weight: 700
}

.copyright a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 1200px) {
    .copyright {
        padding:5px 0;
        margin-top: 20px
    }

    .copyright .left {
        text-align: left
    }

    .copyright .right {
        text-align: right
    }

    [dir=ltr] .copyright .left {
        text-align: right
    }

    [dir=ltr] .copyright .right {
        text-align: left
    }
}

.breadcrumbs {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: .8rem;
    line-height: 1.6rem;
    flex-wrap: wrap;
    padding: 5px 0
}

.breadcrumbs__separator {
    margin: 0 10px;
    font-size: 1.4rem;
    color: var(--secondary-color)
}

.breadcrumbs a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .breadcrumbs {
        font-size:.9rem;
        margin-top: 15px
    }
}

.project-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.project-main-title {
    width: 100%
}

.project-main-title h1 {
    font-size: 1.2rem;
    margin: 5px 0
}

@media only screen and (min-width: 992px) {
    .project-main-title h1 {
        font-size:1.6rem
    }
}

.location i {
    margin-right: -5px
}

.project-details {
    width: 100%;
    display: flex;
    padding: 5px 15px;
    margin-right: -15px;
    margin-bottom: 5px;
    font-size: .9rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap
}

[dir=ltr] .project-details {
    margin-right: 0;
    margin-left: -15px
}

.p-details-box {
    margin: 5px 0;
    width: 50%;
    display: flex;
    align-items: center
}

.details-img {
    margin-left: 5px;
    text-align: center
}

[dir=ltr] .details-img {
    margin-left: 0;
    margin-right: 5px
}

.details-img i {
    font-size: 1rem;
    display: block;
    color: var(--secondary-color);
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px
}

.details-txt {
    font-size: 1rem;
    display: block
}

.project-details a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .project-details {
        padding:10px 0;
        font-size: 1rem
    }

    .p-details-box {
        margin: 0 15px;
        width: auto
    }

    .details-img i {
        font-size: 1.2rem;
        width: 36px;
        height: 36px;
        line-height: 36px
    }

    .details-txt {
        font-size: 1.1rem
    }
}

.project-box-price.page-price {
    background-color: #fff;
    padding: 15px;
    box-shadow: 0 5px 7px rgba(0,0,0,.05);
    font-size: .9rem;
    border: 1px solid var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .project-box-price.page-price {
        display:flex;
        flex-direction: column;
        align-items: center
    }
}

.box-cta.page-cta {
    margin-bottom: 0;
    align-self: stretch
}

.box-cta.page-cta a {
    text-decoration: none;
    color: var(--primary-color)
}

.box-cta.page-cta a:hover {
    color: #fff
}

.box-cta.Bold {
    font-weight: 600
}

.box-cta.Bold a.cta-wts {
    background-color: #2bbc57;
    color: #fff;
    border: none
}

.box-cta.Bold a.cta-phone {
    background-color: var(--primary-color);
    color: #fff;
    border: none
}

.box-cta.Bold a.cta-zoom {
    background-color: #0071eb;
    color: #fff;
    border: none
}

.box-cta.Bold i {
    color: #fff!important
}

.cta-wts-last {
    background: #128c7e;
    color: #fff!important;
    font-weight: 800
}

.content-box .box-cta.page-cta {
    margin-bottom: 20px
}

.page-price .p-more-details span {
    font-size: 1rem
}

.page-price .project-box-start-price {
    font-size: 1.2rem
}

@media only screen and (min-width: 992px) {
    .project-box-price.page-price {
        margin-top:15px
    }

    .page-price .project-box-start-price {
        font-size: 1.4rem
    }
}

.p-gallery {
    margin-bottom: 25px
}

.project-gallery {
    width: calc(100% + 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px
}

.project-gallery * {
    transition: .5s
}

.gallery-half {
    width: 100%;
    padding: 0 7px;
    display: flex
}

.gallery-quarter {
    width: 50%;
    display: flex;
    flex-grow: 1
}

.project-gallery-img,.project-gallery-img-big {
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
    position: relative
}

.project-gallery-img {
    width: 50%;
    margin: 14px 7px
}

.project-gallery-img img,.project-gallery-img-big img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block
}

.project-gallery-img img {
    height: 100px
}

.project-gallery .gallery_counter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    line-height: 1.2rem;
    color: #fff;
    text-align: center;
    transition: .2s;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    cursor: pointer
}

.project-gallery .gallery_counter i {
    font-size: 1.4rem;
    margin-bottom: 5px
}

.project-gallery .gallery_counter:hover {
    background-color: rgba(0,0,0,.8)
}

.openMyGallery {
    cursor: pointer
}

@media only screen and (min-width: 992px) {
    .project-gallery {
        flex-wrap:nowrap;
        margin: 10px -10px
    }

    .gallery-half {
        width: 48.5%;
        flex-grow: 3;
        padding: 0 10px
    }

    .gallery-quarter {
        width: 26.5%;
        flex-wrap: wrap;
        padding: 0 10px
    }

    .project-gallery-img {
        width: 100%;
        margin: 20px 10px
    }

    .project-gallery-img img {
        height: 200px
    }

    .project-gallery-img-big {
        margin: 20px 10px
    }

    .project-gallery-img-big img {
        height: 420px
    }

    .project-gallery-img,.project-gallery-img-big {
        margin: 10px 0
    }

    .project-gallery .gallery_counter {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .project-gallery .gallery_counter i {
        font-size: 2rem
    }
}

.overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s,visibility .3s
}

.popup {
    max-width: 95%;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    transform: scale(0);
    transition: transform .3s
}

.overlay.visible {
    opacity: 1;
    visibility: visible
}

.popup.visible {
    transform: scale(1)
}

.hidden {
    display: none
}

.closePopupBtn {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 25px;
    width: 35px;
    height: 35px;
    cursor: pointer
}

.imageGallery {
    max-width: 95vw;
    max-height: calc(95vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center
}

.ImageOnFocus {
    height: calc(100% - 150px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 5px;
    overflow: hidden
}

.ImageOnFocus img {
    object-fit: contain;
    max-width: 100%;
    max-height: calc(100% - 150px);
    transition: opacity .5s ease-in-out
}

.galleryThumbnails {
    background: #eee;
    height: 80px;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    padding: 5px;
    white-space: nowrap;
    cursor: grab
}

.galleryThumbnails img {
    height: 80px;
    width: 80px;
    margin-left: 5px;
    display: inline-block;
    object-fit: cover
}

.galleryThumbnails:active {
    cursor: grabbing
}

@media only screen and (min-width: 992px) {
    .galleryThumbnails {
        height:200px;
        width: 100%;
        padding: 15px
    }

    .galleryThumbnails img {
        height: 120px;
        width: 150px;
        margin-left: 15px
    }
}

.page-main {
    position: relative;
    background-color: #fff;
    padding: 20px 0
}

.page-main .row {
    display: flex;
    flex-wrap: wrap
}

.page-headline {
    position: relative;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    padding-right: 20px;
    margin-bottom: 15px
}

.page-headline::after,.page-headline::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 18px;
    border-radius: 10px;
    border: 2px solid var(--secondary-color)
}

.page-headline::before {
    background-color: var(--secondary-color);
    height: 9px;
    transform: translateY(0);
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

[dir=ltr] .page-headline {
    padding-right: 0;
    padding-left: 20px
}

[dir=ltr] .page-headline::after,[dir=ltr] .page-headline::before {
    right: auto;
    left: 0
}

.content-box {
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 15px;
    color: var(--text-color)
}

.content-box.no-padding {
    padding: 0
}

.content-box ul {
    padding-right: 25px
}

.content-box li {
    padding: 5px
}

.content-box h2 {
    color: var(--primary-color);
    font-size: 1.2rem;
    line-height: 2.6rem;
    margin-top: 10px;
    position: relative;
    padding-right: 15px;
    border-right: 3px solid var(--secondary-color);
    margin-right: -5px;
    background-color: var(--background-color)
}

[dir=ltr] .content-box h2 {
    padding-right: 0;
    padding-left: 15px
}

.content-box h3 {
    color: var(--secondary-color);
    font-size: 1.1rem
}

.content-box img {
    max-width: 100%;
    height: auto;
    margin: 15px 0
}

.content-box a {
    color: var(--secondary-color);
    text-decoration: underline
}

.content-box a:hover {
    color: var(--secondary-color);
    text-decoration: none
}

@media only screen and (min-width: 992px) {
    .page-main {
        padding:40px 0
    }

    .content-box h2 {
        font-size: 1.3rem;
        margin-top: 15px
    }
}

.table-box {
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,.1);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid var(--secondary-color)
}

table.infotable {
    border-collapse: collapse;
    width: 100%;
    color: var(--text-color)
}

table.infotable tr {
    border-bottom: 1px solid var(--background-color-300)
}

table.infotable tr:last-of-type {
    border-bottom: none
}

table.infotable th.ttitle {
    font-size: .8rem;
    border-left: 1px solid var(--background-color-300);
    background-color: #fff;
    color: var(--primary-color)
}

[dir=ltr] table.infotable th.ttitle {
    border-left: none;
    border-right: 1px solid var(--background-color-300)
}

table.infotable td,table.infotable th {
    margin: 0;
    padding: 7px 10px;
    text-align: right;
    font-size: .9rem
}

[dir=ltr] table.infotable td,[dir=ltr] table.infotable th {
    text-align: left
}

table.infotable a {
    text-decoration: underline;
    color: var(--text-color)
}

table.infotable a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    table.infotable th.ttitle {
        font-size:.9rem
    }

    table.infotable td,table.infotable th {
        font-size: 1rem;
        padding: 7px 25px 7px 15px
    }
}

.available-units {
    padding: 20px 0
}

.project-facilities {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background-color);
    border-radius: 15px;
    padding: 10px
}

.facility-box {
    display: flex;
    align-items: center;
    font-size: .9rem;
    width: 50%;
    padding: 5px 1%;
    margin: 3px 0
}

.facility-img img {
    width: 20px;
    height: auto;
    display: block;
    margin-left: 7px;
    opacity: .8;
    margin-top: 0;
    margin-bottom: 0
}

[dir=ltr] .facility-img img {
    margin-left: 0;
    margin-right: 7px
}

@media only screen and (min-width: 992px) {
    .project-facilities {
        padding:15px
    }

    .facility-box {
        width: 33.3%;
        padding: 0;
        font-weight: 700;
        margin: 15px 0
    }

    .facility-img img {
        width: 25px;
        margin-left: 10px
    }

    [dir=ltr] .facility-img img {
        margin-left: 0;
        margin-right: 10px
    }
}

.project-video,.project-video iframe {
    width: 100%
}

.lwptoc {
    margin: 25px 0 5px;
    position: relative;
    border-radius: 15px;
    overflow: hidden
}

.lwptoc_i {
    border-radius: 15px;
    border: 1px solid var(--secondary-color);
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 15px
}

.lwptoc_header {
    background-color: var(--background-color);
    color: var(--secondary-color);
    cursor: pointer;
    display: block;
    padding: 0 15px;
    position: relative;
    text-align: right;
    line-height: 2.5rem;
    font-size: 1rem
}

[dir=ltr] .lwptoc_header {
    text-align: left
}

.lwptoc_header::after {
    width: 8px;
    height: 8px;
    border-left: 3px solid var(--secondary-color);
    border-top: 3px solid var(--secondary-color);
    position: absolute;
    left: 20px;
    content: " ";
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
    transition: all .2s ease-in-out
}

[dir=ltr] .lwptoc_header::after {
    left: auto;
    right: 20px
}

.lwptoc_header.active {
    color: var(--secondary-color);
    border-bottom: none;
    background-color: var(--background-color)
}

.lwptoc_header.active:hover {
    background-color: var(--secondary-color);
    color: #fff
}

.lwptoc_header.active::after {
    transform: rotate(-135deg) translateY(50%);
    transition: all .2s ease-in-out
}

.lwptoc_header.active:hover::after {
    border-color: #fff
}

.lwptoc_items {
    color: var(--text-color);
    padding: 20px;
    padding-top: 10px;
    text-align: right;
    border-radius: 0 0 15px 15px;
    border-top: none;
    background-color: #fff
}

[dir=ltr] .lwptoc_items {
    text-align: left
}

.lwptoc_items a:hover {
    color: var(--secondary-color)
}

.content-box .schedule-meeting {
    background-color: var(--background-color)
}

.author-box {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
    border: 1px solid var(--secondary-color);
    margin: 15px 0
}

.author-img {
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0
}

.author-img img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block
}

.author-name {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 10px
}

.author-name:hover {
    color: var(--secondary-color)
}

.author-data {
    display: flex;
    flex-direction: column;
    width: 100%
}

.author-contacts ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 -4px;
    justify-content: start
}

.author-contacts li {
    margin: 4px;
    color: var(--primary-color);
    padding: 0
}

.author-contacts li a:hover {
    color: var(--secondary-color)
}

.author-txt {
    font-size: .9rem;
    color: var(--background-color-600)
}

@media only screen and (min-width: 992px) {
    .author-box {
        flex-wrap:nowrap;
        align-items: center;
        text-align: inherit;
        margin: 25px 0
    }

    .author-img {
        margin-left: 25px
    }

    [dir=ltr] .author-img {
        margin-left: 0;
        margin-right: 25px
    }

    .author-name {
        font-size: 1.1rem;
        margin: 0
    }

    ul.author-contacts {
        justify-content: flex-start
    }
}

@media only screen and (min-width: 992px) {
    .sticky {
        position:sticky;
        top: 25px;
        margin-bottom: 25px
    }
}

.sidebar-box {
    margin-bottom: 15px
}

.sidebar-box .contact-form {
    background-color: var(--background-color);
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,.3)
}

.sidebar-box .contact-form .submit {
    background-color: var(--secondary-color)
}

.sidebar-box .contact-form .submit:hover {
    background-color: var(--primary-color)
}

.unit-details {
    display: flex
}

.unit-details span {
    display: inline-block;
    margin-top: 10px;
    margin-left: 15px;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 700
}

.unit-details i {
    color: var(--secondary-color)
}

.faq h3 {
    margin: 0
}

.faq .faq-acc {
    margin: 0 auto
}

.faq .faq-acc__card {
    margin: 10px 0;
    position: relative;
    background-color: #fff;
    border: 1px solid var(--background-color-400);
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);
    overflow: hidden
}

.faq .faq-acc__title {
    color: var(--text-color);
    cursor: pointer;
    display: block;
    padding: 10px 15px;
    position: relative;
    text-align: right
}

.faq .faq-acc__title:hover {
    background-color: var(--background-color-200)
}

.faq .faq-acc__title::after {
    width: 8px;
    height: 8px;
    border-left: 3px solid var(--primary-color);
    border-top: 3px solid var(--primary-color);
    position: absolute;
    left: 20px;
    content: " ";
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
    transition: all .2s ease-in-out
}

[dir=ltr] .faq .faq-acc__title::after {
    left: auto;
    right: 20px
}

.faq .faq-acc__title.active {
    background-color: var(--background-color)
}

.faq .faq-acc__title.active::after {
    transform: rotate(-135deg) translateY(50%);
    transition: all .2s ease-in-out
}

.faq .faq-acc__panel {
    background-color: #fff;
    border-top: 2px solid var(--background-color-300);
    color: var(--primary-color);
    display: none;
    margin: 0;
    padding: 15px;
    text-align: right;
    border-radius: 0 0 10px 10px;
    margin-top: -5px
}

[dir=ltr] .faq .faq-acc__panel,[dir=ltr] .faq .faq-acc__title {
    text-align: left
}

@media only screen and (min-width: 992px) {
    .faq {
        padding-bottom:20px
    }
}

.post-main-img {
    width: 100%;
    height: auto;
    max-height: 450px;
    border-radius: 10px;
    overflow: hidden
}

.post-main-img img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover
}

.search-filters {
    display: flex
}

.banner-img {
    width: 100%;
    height: 500px;
    background: #000;
    overflow: hidden
}

.banner-img iframe,.banner-img img,.banner-img video {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block
}

.banner-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(var(--primary-color),rgba(0,0,0,1));
    opacity: .5
}

.banner-img iframe#youtube-player {
    transform: scale(1.2)
}

.banner-data {
    position: absolute;
    top: 150px;
    left: 5%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff
}

.banner-title {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 2.6rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,.2)
}

@media only screen and (min-width: 992px) {
    .banner-data {
        top:50%;
        transform: translateY(-50%);
        left: 20%;
        right: 20%
    }

    .banner-title {
        font-size: 2rem;
        line-height: normal
    }
}

.banner-search {
    width: 100%;
    transform: translateY(-100px);
    margin-bottom: -100px
}

.search-form {
    width: 100%;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.2);
    position: relative;
    z-index: 2;
    margin: 15px 0;
    border-radius: 10px
}

.search-form form {
    display: flex;
    flex-direction: column-reverse
}

.search-form .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -5px
}

.input-group {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: 8px 5px;
    padding: 0 8px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--secondary-color)
}

.input-group:hover {
    border-color: var(--secondary-color)
}

.input-group i {
    color: var(--background-color-600);
    font-size: .9rem;
    margin-inline-end: 5px;
}

.search-form .form-input,.search-form .search-select {
    background-color: transparent;
    width: 100%;
    height: 40px;
    line-height: 38px;
    border-radius: 3px;
    font-size: .9rem;
    color: var(--text-color);
    transition: all .3s ease-in-out;
    text-decoration: none;
    text-transform: none;
    font-family: Cairo,sans-serif;
    font-style: normal;
    outline: 0;
    cursor: pointer
}

.search-form .search-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-position: 0;
    background-repeat: no-repeat
}

[dir=ltr] .search-form .search-select {
    background-position: right center
}

.search-form .search-submit {
    font-weight: 600;
    font-size: .9rem;
    background-color: var(--secondary-color);
    color: #fff;
    padding: 0 25px;
    white-space: nowrap;
    border: none;
    display: inline-block;
    cursor: pointer;
    margin: 10px 5px;
    font-family: Cairo,sans-serif;
    text-align: center;
    transition: .2s;
    height: 40px;
    line-height: 38px;
    width: 100%;
    border-radius: 30px
}

.search-form .search-submit:hover {
    background-color: var(--primary-color)
}

@media only screen and (min-width: 992px) {
    .banner-search {
        transform:translateY(-75px);
        margin-bottom: -80px
    }

    .search-form {
        width: 80%;
        padding: 15px 35px;
        margin: 25px 10%;
        border-radius: 60px
    }

    .search-form.page-search-form {
        width: 100%;
        margin: 15px 0
    }

    .search-form .form-row {
        flex-wrap: nowrap
    }

    .input-group {
        flex: 1;
        margin: 5px 8px
    }

    .input-group:hover {
        border: 1px solid var(--secondary-color)
    }

    .search-form .form-input {
        font-size: 1rem
    }

    .search-form .search-submit {
        width: auto
    }
}

.main-section {
    padding: 20px 0
}

.main-section:nth-child(even) {
    background-color: #fff
}

@media only screen and (min-width: 992px) {
    .main-section {
        padding:40px 0
    }
}

.main-box {
    border-radius: 14px;
    margin: 15px 0;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
    background-color: #fff
}

.main-box-img {
    width: 100%;
    height: 200px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative
}

.main-box-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: 2s;
    background: #fff;
    object-position: center
}

.developer .main-box-img img {
    object-fit: contain!important;
    padding: 10px 10px 60px
}

.main-box-data {
    padding: 10px 15px;
    position: relative;
    display: flex;
    flex-direction: column
}

.main-box-title {
    font-size: .9rem;
    font-weight: 700;
    transition: .2s
}

.main-box-title:hover {
    color: var(--secondary-color)
}

.main-box:hover .main-box-img img {
    transform: scale(1.15)
}

.developer .area-data {
    background: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .main-box-title {
        font-size:1rem;
        font-weight: 700
    }

    .main-box-title {
        font-size: 1rem
    }
}

.box-cta {
    display: flex;
    justify-content: space-around;
    margin: 10px -5px;
    flex-grow: 1;
    align-items: flex-end
}

.box-cta a {
    border-radius: 10px;
    display: block;
    flex-grow: 1;
    height: 32px;
    line-height: 30px;
    text-align: center;
    color: var(--primary-color);
    margin: 5px;
    font-size: .7rem;
    transition: .3s;
    border: 1px solid #9a9a9a;
    white-space: nowrap;
    overflow: hidden;
    width: 100%
}

.box-cta a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

.box-cta i {
    margin-left: 3px;
    margin-right: -3px
}

[dir=ltr] .box-cta i {
    margin-right: 3px;
    margin-left: -3px
}

.box-cta .cta-wts i {
    color: #32a655
}

.box-cta .cta-phone i {
    color: var(--secondary-color)
}

@media only screen and (min-width: 786px) {
    .box-cta a {
        font-size:.9rem
    }
}

.area-box {
    margin-bottom: 0;
    box-shadow: none;
    background-color: transparent
}

.area-data {
    border-radius: 40px;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 0 5px 7px rgba(0,0,0,.1);
    display: flex;
    justify-content: space-between;
    flex-direction: row
}

.area-data i {
    transition: .5s;
    margin-left: 3px
}

[dir=ltr] .area-data i {
    transform: rotate(180deg)
}

.area-box-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.area-box:hover i {
    margin-left: -3px
}

.area-box:hover .area-data {
    color: var(--secondary-color)
}

.project-box {
    box-shadow: 0 3px 5px rgba(0,0,0,.2)
}

/* .project-location {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,.2);
    padding: 10px;
    padding-top: 40px
} */

.project-location:hover {
    color: var(--secondary-color)
}

.project-box-price {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 15px;
    margin: 5px 0;
    box-shadow: inset -3px 3px 4px rgba(0,0,0,.05)
}

.project-box-start-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-color)
}

.p-more-details {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap
}

.p-more-details span {
    margin-left: 15px;
    white-space: nowrap;
    font-size: .9rem
}

[dir=ltr] .p-more-details span {
    margin-left: 0;
    margin-right: 5px
}

.p-more-details i {
    font-size: .9rem;
    color: var(--background-color-600);
    margin-right: -3px;
    margin-left: 3px
}

.view-all-btn {
    background-color: var(--secondary-color);
    padding: 2px 25px;
    color: #fff;
    border-radius: 50px;
    margin: 25px 0;
    display: inline-block;
    transition: .2s
}

.view-all-btn:hover {
    background-color: var(--primary-color);
    color: #fff
}

.search-section {
    background-color: var(--primary-color);
    color: #fff;
    padding-top: 20px;
    padding-bottom: 40px;
    position: relative
}

.search-section-form {
    margin: 0;
    border-radius: 15px
}

.search-section-bg {
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 0;
    width: 80%;
    overflow: hidden
}

[dir=ltr] .search-section-bg {
    left: auto;
    right: 0
}

.search-section-bg img {
    height: 100%;
    width: auto;
    opacity: .3
}

@media only screen and (min-width: 992px) {
    .search-section {
        padding:40px 0
    }

    .search-section-bg {
        width: 30%
    }
}

.developers {
    padding-top: 10px;
    background-color: #fff
}

.developers .headline {
    margin-top: 20px;
    margin-bottom: 0
}

.developers hr {
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    opacity: .5
}

.all-developers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 15px;
    padding-bottom: 25px
}

.developer-img {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    overflow: hidden;
    transition: .2s;
    background-color: #fff;
    border: 1px solid var(--background-color-200);
    padding: 5px;
    border-radius: 15px
}

.developer-img a {
    display: flex;
    align-items: center;
    justify-content: center
}

.developer-img img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    transition: .5s;
    display: block
}

.developer-img:hover {
    border-color: var(--secondary-color);
    transform: translateY(-4px)
}

.all-developers .slick-next i::before,.all-developers .slick-prev i::before {
    line-height: normal
}

.all-developers .slick-next,.all-developers .slick-prev {
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    z-index: 1;
    font-size: 12px;
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 0;
    top: auto;
    bottom: -15px;
    left: calc(50% + 4px);
    transition: .2s;
    color: var(--primary-color);
    border: none;
    border-radius: 20px
}

.all-developers .slick-next {
    left: calc(50% - 40px)
}

.all-developers .slick-next:hover,.all-developers .slick-prev:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .all-developers {
        padding:5px 15px
    }

    .developer-img {
        margin: 10px 15px
    }

    .developer-img img {
        height: 110px
    }

    .all-developers .slick-next,.all-developers .slick-prev {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        left: -35px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%)
    }

    .all-developers .slick-prev {
        left: auto;
        right: -35px
    }
}

.article-box {
    box-shadow: 0 3px 5px rgba(0,0,0,.1)
}

.article-data {
    background-color: #fff;
    border-radius: 0 0 10px 10px
}

.article-btn {
    font-weight: 700;
    color: var(--secondary-color);
    margin: 10px 0;
    display: block;
    align-self: flex-end;
    white-space: nowrap
}

.article-btn i {
    font-size: .8rem;
    margin-right: 5px;
    transition: .5s
}

[dir=ltr] .article-btn i {
    margin-right: 0;
    margin-left: 5px
}

[dir=ltr] .article-btn i:before {
    transform: rotate(180deg)
}

.article-box:hover .article-btn {
    color: var(--primary-color)
}

.article-box:hover i {
    margin-left: -5px;
    margin-right: 10px;
    color: var(--secondary-color)
}

[dir=ltr] .article-box:hover i {
    margin-right: -5px;
    margin-left: 10px
}

.why-us {
    background-color: var(--primary-color);
    color: #fff;
    padding-top: 20px;
    padding-bottom: 40px;
    position: relative
}

.why-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 15px 0
}

.why-icon img {
    height: 60px;
    width: auto
}

.why-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 10px
}

.why-txt {
    opacity: .7
}

@media only screen and (min-width: 992px) {
    .why-us {
        padding-top:60px;
        padding-bottom: 140px
    }
}

.contact-us {
    margin-top: -20px;
    margin-bottom: 20px;
    position: relative
}

.contact-us .row {
    padding: 15px 0;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    border-radius: 15px
}

.contact-us .row.alert-row {
    padding: 0;
    background: 0 0;
    box-shadow: none
}

.video-bg-img {
    width: 100%;
    background-color: var(--primary-color);
    position: relative
}

.video-bg-img img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    opacity: .8;
    display: block
}

@media only screen and (min-width: 992px) {
    .contact-us {
        margin-top:-100px;
        margin-bottom: 40px
    }

    .contact-us .row {
        padding: 30px
    }

    .contact-us .contact-form {
        margin-left: 15px
    }
}

#play-video {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.video-play-button {
    position: relative;
    z-index: 10;
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
    box-shadow: 0 0 30px rgba(197,151,101,.7)
}

.video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: rgba(197,151,101,.85);
    border-radius: 50%;
    animation: pulse-border 1.2s ease-out infinite
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    transition: all .2s;
    transition: all .55s cubic-bezier(.645,.045,.355,1)
}

.video-play-button:hover:after {
    background: var(--secondary-color);
    transition: all .55s cubic-bezier(.645,.045,.355,1)
}

.video-play-button:hover span {
    border-left: 32px solid #fff
}

.video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto
}

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    transform: scale(.8);
    border-left: 32px solid var(--secondary-color);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    transition: all .55s cubic-bezier(.645,.045,.355,1)
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

.video-box {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 90%;
    z-index: 20
}

.video-box iframe {
    width: 300px;
    max-width: 100%
}

@media only screen and (min-width: 992px) {
    .video-box {
        width:500px;
        top: 50%;
        transform: translate(-50%,-50%)
    }
}

.video-box iframe {
    width: 500px
}

.play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    background-color: rgba(255,255,255,.85);
    color: var(--secondary-color);
    width: 80px;
    height: 80px;
    border-radius: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    box-shadow: 1px 1px 2px rgba(0,0,0,.2)
}

.play-video i {
    font-size: 2rem;
    margin-right: -5px;
    text-shadow: 0 2px 3px rgba(0,0,0,.5)
}

.play-video:hover {
    background-color: #fff;
    transform: translate(-50%,-50%) scale(.97)
}

body.page-template-page-jobs #floating-icons,body.single-job #floating-icons,body.tax-jobs #floating-icons {
    display: none
}

/* Developers Slider Styles */
.developers-slider {
    margin: 30px 0;
}

.developers-slider .developer-img {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 15px;
    outline: none;
}

.developers-slider .developer-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.developers-slider .developer-logo-container {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    padding: 15px;
}

.developers-slider .developer-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Slick arrows customization */
.developers-slider .slick-prev,
.developers-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.developers-slider .slick-prev:hover,
.developers-slider .slick-next:hover {
    background: var(--secondary-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.developers-slider .slick-prev {
    left: -25px;
}

.developers-slider .slick-next {
    right: -25px;
}

.developers-slider .slick-prev i,
.developers-slider .slick-next i {
    font-size: 16px;
    color: #fff;
}

.developers-slider .slick-prev:before,
.developers-slider .slick-next:before {
    display: none;
}

/* Responsive arrows */
@media (max-width: 768px) {
    .developers-slider .slick-prev,
    .developers-slider .slick-next {
        width: 35px;
        height: 35px;
    }
    
    .developers-slider .slick-prev {
        left: -15px;
    }
    
    .developers-slider .slick-next {
        right: -15px;
    }
    
    .developers-slider .slick-prev i,
    .developers-slider .slick-next i {
        font-size: 14px;
    }
}

/* RTL Support */
[dir="rtl"] .developers-slider .slick-prev {
    right: -20px;
    left: auto;
}

[dir="rtl"] .developers-slider .slick-next {
    left: -20px;
    right: auto;
}

[dir="rtl"] .developers-slider .slick-prev:before {
    content: '\f105'; /* fa-angle-right */
}

[dir="rtl"] .developers-slider .slick-next:before {
    content: '\f104'; /* fa-angle-left */
}