@charset "UTF-8";

@font-face {
    font-family: fontello;
    src: url(fontello/font/fontello.eot?32974303);
    src: url(fontello/font/fontello.eot?32974303#iefix) format("embedded-opentype"), url(fontello/font/fontello.woff?32974303) format("woff"), url(fontello/font/fontello.ttf?32974303) format("truetype"), url(fontello/font/fontello.svg?32974303#fontello) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"]:before,
[class^=icon-]:before {
    font-family: fontello;
    font-style: normal;
    font-weight: 400;
    speak: none;
    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
}

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

.icon-youtube-4:before {
    content: '\ef87'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-ok-circled:before {
    content: '\e81b'
}

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

.icon-ok-squared:before {
    content: '\e81d'
}

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

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

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

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

.icon-plus-circled:before {
    content: '\e822'
}

.icon-plus-squared:before {
    content: '\e823'
}

.icon-plus-squared-small:before {
    content: '\e824'
}

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

.icon-minus-circled:before {
    content: '\e826'
}

.icon-minus-squared:before {
    content: '\e828'
}

.icon-minus-squared-alt:before {
    content: '\e829'
}

.icon-minus-squared-small:before {
    content: '\e82a'
}

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

.icon-help-circled:before {
    content: '\e82c'
}

.icon-info-circled:before {
    content: '\e82d'
}

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

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

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

.icon-unlink:before {
    content: '\e831'
}

.icon-link-ext:before {
    content: '\e832'
}

.icon-link-ext-alt:before {
    content: '\e833'
}

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

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

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

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

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

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

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

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

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

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

.icon-bookmark-empty:before {
    content: '\e83e'
}

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

.icon-flag-empty:before {
    content: '\e840'
}

.icon-flag-checkered:before {
    content: '\e841'
}

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

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

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

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

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

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

.icon-download-cloud:before {
    content: '\e848'
}

.icon-upload-cloud:before {
    content: '\e849'
}

.icon-reply:before {
    content: '\e84a'
}

.icon-reply-all:before {
    content: '\e84b'
}

.icon-forward:before {
    content: '\e84c'
}

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

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

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

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

.icon-export-alt:before {
    content: '\e851'
}

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

.icon-pencil-squared:before {
    content: '\e853'
}

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

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

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

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

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

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

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

.icon-comment-empty:before {
    content: '\e85b'
}

.icon-chat-empty:before {
    content: '\e85c'
}

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

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

.icon-attention-alt:before {
    content: '\e85f'
}

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

.icon-attention-circled:before {
    content: '\e861'
}

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

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

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

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

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

.icon-docs:before {
    content: '\e867'
}

.icon-doc-text:before {
    content: '\e868'
}

.icon-doc-inv:before {
    content: '\e869'
}

.icon-doc-text-inv:before {
    content: '\e86a'
}

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

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

.icon-folder-empty:before {
    content: '\e86d'
}

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

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

.icon-rss:before {
    content: '\e870'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-mute:before {
    content: '\e87e'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-down-circled2:before {
    content: '\e88e'
}

.icon-up-circled2:before {
    content: '\e88f'
}

.icon-left-circled2:before {
    content: '\e890'
}

.icon-right-circled2:before {
    content: '\e891'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-down:before {
    content: '\e8a6'
}

.icon-left:before {
    content: '\e8a7'
}

.icon-right:before {
    content: '\e8a8'
}

.icon-up:before {
    content: '\e8a9'
}

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

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

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

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

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

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

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

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

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

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

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

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

.icon-cw:before {
    content: '\e8b6'
}

.icon-ccw:before {
    content: '\e8b7'
}

.icon-arrows-cw:before {
    content: '\e8b8'
}

.icon-level-up:before {
    content: '\e8b9'
}

.icon-level-down:before {
    content: '\e8ba'
}

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

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

.icon-expand:before {
    content: '\e8bd'
}

.icon-collapse:before {
    content: '\e8be'
}

.icon-expand-right:before {
    content: '\e8bf'
}

.icon-collapse-left:before {
    content: '\e8c0'
}

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

.icon-play-circled:before {
    content: '\e8c2'
}

.icon-play-circled2:before {
    content: '\e8c3'
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-tablet:before {
    content: '\e8d2'
}

.icon-mobile:before {
    content: '\e8d3'
}

.icon-inbox:before {
    content: '\e8d4'
}

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

.icon-sun:before {
    content: '\e8d6'
}

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

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

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

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

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

.icon-fighter-jet:before {
    content: '\e8dc'
}

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

.icon-font:before {
    content: '\e8de'
}

.icon-bold:before {
    content: '\e8df'
}

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

.icon-text-height:before {
    content: '\e8e1'
}

.icon-text-width:before {
    content: '\e8e2'
}

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

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

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

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

.icon-list:before {
    content: '\e8e7'
}

.icon-indent-left:before {
    content: '\e8e8'
}

.icon-indent-right:before {
    content: '\e8e9'
}

.icon-list-bullet:before {
    content: '\e8ea'
}

.icon-list-numbered:before {
    content: '\e8eb'
}

.icon-strike:before {
    content: '\e8ec'
}

.icon-underline:before {
    content: '\e8ed'
}

.icon-superscript:before {
    content: '\e8ee'
}

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

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

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

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

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

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

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

.icon-suitcase:before {
    content: '\e8f6'
}

.icon-ellipsis:before {
    content: '\e8f7'
}

.icon-ellipsis-vert:before {
    content: '\e8f8'
}

.icon-off:before {
    content: '\e8f9'
}

.icon-road:before {
    content: '\e8fa'
}

.icon-list-alt:before {
    content: '\e8fb'
}

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

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

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

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

.icon-tint:before {
    content: '\e900'
}

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

.icon-check-empty:before {
    content: '\e902'
}

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

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

.icon-dot-circled:before {
    content: '\e905'
}

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

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

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

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

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

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

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

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

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

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

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

.icon-fork:before {
    content: '\e911'
}

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

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

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

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

.icon-filter:before {
    content: '\e916'
}

.icon-beaker:before {
    content: '\e917'
}

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

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

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

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

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

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

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

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

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

.icon-try:before {
    content: '\e921'
}

.icon-won:before {
    content: '\e922'
}

.icon-bitcoin:before {
    content: '\e923'
}

.icon-sort:before {
    content: '\e924'
}

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

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

.icon-sort-alt-up:before {
    content: '\e927'
}

.icon-sort-alt-down:before {
    content: '\e928'
}

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

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

.icon-sort-number-up:before {
    content: '\e92b'
}

.icon-sort-number-down:before {
    content: '\e92c'
}

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

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

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

.icon-spinner:before {
    content: '\e930'
}

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

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

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

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

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

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

.icon-medkit:before {
    content: '\e937'
}

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

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

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

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

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

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

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

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

.icon-eraser:before {
    content: '\e940'
}

.icon-puzzle:before {
    content: '\e941'
}

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

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

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

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

.icon-adn:before {
    content: '\e946'
}

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

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

.icon-bitbucket:before {
    content: '\e949'
}

.icon-bitbucket-squared:before {
    content: '\e94a'
}

.icon-css3:before {
    content: '\e94b'
}

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

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

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

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

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

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

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

.icon-github-squared:before {
    content: '\e953'
}

.icon-github-circled:before {
    content: '\e954'
}

.icon-gittip:before {
    content: '\e955'
}

.icon-gplus-squared:before {
    content: '\e956'
}

.icon-gplus:before {
    content: '\e957'
}

.icon-html5:before {
    content: '\e958'
}

.icon-instagramm:before {
    content: '\e959'
}

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

.icon-linux:before {
    content: '\e95b'
}

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

.icon-maxcdn:before {
    content: '\e95d'
}

.icon-pagelines:before {
    content: '\e95e'
}

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

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

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

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

.icon-stackexchange:before {
    content: '\e963'
}

.icon-stackoverflow:before {
    content: '\e964'
}

.icon-trello:before {
    content: '\e965'
}

.icon-tumblr:before {
    content: '\e966'
}

.icon-tumblr-squared:before {
    content: '\e967'
}

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

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

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

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

.icon-weibo:before {
    content: '\e96c'
}

.icon-windows:before {
    content: '\e96d'
}

.icon-xing:before {
    content: '\e96e'
}

.icon-xing-squared:before {
    content: '\e96f'
}

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

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

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

.icon-blank:before {
    content: '\e973'
}

.icon-lemon:before {
    content: '\e974'
}

.icon-note:before {
    content: '\e975'
}

.icon-note-beamed:before {
    content: '\e976'
}

.icon-music-1:before {
    content: '\e977'
}

.icon-search-1:before {
    content: '\e978'
}

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

.icon-mail-1:before {
    content: '\e97a'
}

.icon-heart-1:before {
    content: '\e97b'
}

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

.icon-star-1:before {
    content: '\e97d'
}

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

.icon-user-1:before {
    content: '\e97f'
}

.icon-users-1:before {
    content: '\e980'
}

.icon-user-add:before {
    content: '\e981'
}

.icon-video-1:before {
    content: '\e982'
}

.icon-picture-1:before {
    content: '\e983'
}

.icon-camera-1:before {
    content: '\e984'
}

.icon-layout:before {
    content: '\e985'
}

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

.icon-check-1:before {
    content: '\e987'
}

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

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

.icon-cancel-squared:before {
    content: '\e98a'
}

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

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

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

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

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

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

.icon-help-1:before {
    content: '\e991'
}

.icon-help-circled-1:before {
    content: '\e992'
}

.icon-info-1:before {
    content: '\e993'
}

.icon-info-circled-1:before {
    content: '\e994'
}

.icon-back:before {
    content: '\e995'
}

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

.icon-link-1:before {
    content: '\e997'
}

.icon-attach-1:before {
    content: '\e998'
}

.icon-lock-1:before {
    content: '\e999'
}

.icon-lock-open-1:before {
    content: '\e99a'
}

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

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

.icon-bookmark-1:before {
    content: '\e99d'
}

.icon-bookmarks:before {
    content: '\e99e'
}

.icon-flag-1:before {
    content: '\e99f'
}

.icon-thumbs-up-1:before {
    content: '\e9a0'
}

.icon-thumbs-down-1:before {
    content: '\e9a1'
}

.icon-download-1:before {
    content: '\e9a2'
}

.icon-upload-1:before {
    content: '\e9a3'
}

.icon-upload-cloud-1:before {
    content: '\e9a4'
}

.icon-reply-1:before {
    content: '\e9a5'
}

.icon-reply-all-1:before {
    content: '\e9a6'
}

.icon-forward-1:before {
    content: '\e9a7'
}

.icon-quote:before {
    content: '\e9a8'
}

.icon-code-1:before {
    content: '\e9a9'
}

.icon-export-1:before {
    content: '\e9aa'
}

.icon-pencil-1:before {
    content: '\e9ab'
}

.icon-feather:before {
    content: '\e9ac'
}

.icon-print-1:before {
    content: '\e9ad'
}

.icon-retweet-1:before {
    content: '\e9ae'
}

.icon-keyboard-1:before {
    content: '\e9af'
}

.icon-comment-1:before {
    content: '\e9b0'
}

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

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

.icon-attention-1:before {
    content: '\e9b3'
}

.icon-alert:before {
    content: '\e9b4'
}

.icon-vcard:before {
    content: '\e9b5'
}

.icon-address:before {
    content: '\e9b6'
}

.icon-location-1:before {
    content: '\e9b7'
}

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

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

.icon-compass-1:before {
    content: '\e9ba'
}

.icon-cup:before {
    content: '\e9bb'
}

.icon-trash-1:before {
    content: '\e9bc'
}

.icon-doc-1:before {
    content: '\e9bd'
}

.icon-docs-1:before {
    content: '\e9be'
}

.icon-doc-landscape:before {
    content: '\e9bf'
}

.icon-doc-text-1:before {
    content: '\e9c0'
}

.icon-doc-text-inv-1:before {
    content: '\e9c1'
}

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

.icon-book-open:before {
    content: '\e9c3'
}

.icon-book-1:before {
    content: '\e9c4'
}

.icon-folder-1:before {
    content: '\e9c5'
}

.icon-archive:before {
    content: '\e9c6'
}

.icon-box-1:before {
    content: '\e9c7'
}

.icon-rss-1:before {
    content: '\e9c8'
}

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

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

.icon-tools:before {
    content: '\e9cb'
}

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

.icon-shareable:before {
    content: '\e9cd'
}

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

.icon-bag:before {
    content: '\e9cf'
}

.icon-calendar-1:before {
    content: '\e9d0'
}

.icon-login-1:before {
    content: '\e9d1'
}

.icon-logout-1:before {
    content: '\e9d2'
}

.icon-mic-1:before {
    content: '\e9d3'
}

.icon-mute-1:before {
    content: '\e9d4'
}

.icon-sound:before {
    content: '\e9d5'
}

.icon-volume:before {
    content: '\e9d6'
}

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

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

.icon-lamp:before {
    content: '\e9d9'
}

.icon-light-down:before {
    content: '\e9da'
}

.icon-light-up:before {
    content: '\e9db'
}

.icon-adjust:before {
    content: '\e9dc'
}

.icon-block-1:before {
    content: '\e9dd'
}

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

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

.icon-popup:before {
    content: '\e9e0'
}

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

.icon-window:before {
    content: '\e9e2'
}

.icon-arrow-combo:before {
    content: '\e9e3'
}

.icon-down-circled-1:before {
    content: '\e9e4'
}

.icon-left-circled-1:before {
    content: '\e9e5'
}

.icon-right-circled-1:before {
    content: '\e9e6'
}

.icon-up-circled-1:before {
    content: '\e9e7'
}

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

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

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

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

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

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

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

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

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

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

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

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

.icon-down-1:before {
    content: '\e9f4'
}

.icon-left-1:before {
    content: '\e9f5'
}

.icon-right-1:before {
    content: '\e9f6'
}

.icon-up-1:before {
    content: '\e9f7'
}

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

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

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

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

.icon-down-bold:before {
    content: '\e9fc'
}

.icon-left-bold:before {
    content: '\e9fd'
}

.icon-right-bold:before {
    content: '\e9fe'
}

.icon-up-bold:before {
    content: '\e9ff'
}

.icon-down-thin:before {
    content: '\ea00'
}

.icon-left-thin:before {
    content: '\ea01'
}

.icon-right-thin:before {
    content: '\ea02'
}

.icon-up-thin:before {
    content: '\ea03'
}

.icon-ccw-1:before {
    content: '\ea04'
}

.icon-cw-1:before {
    content: '\ea05'
}

.icon-arrows-ccw:before {
    content: '\ea06'
}

.icon-level-down-1:before {
    content: '\ea07'
}

.icon-level-up-1:before {
    content: '\ea08'
}

.icon-shuffle-1:before {
    content: '\ea09'
}

.icon-loop:before {
    content: '\ea0a'
}

.icon-switch:before {
    content: '\ea0b'
}

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

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

.icon-pause-1:before {
    content: '\ea0e'
}

.icon-record:before {
    content: '\ea0f'
}

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

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

.icon-fast-forward:before {
    content: '\ea12'
}

.icon-fast-backward:before {
    content: '\ea13'
}

.icon-progress-0:before {
    content: '\ea14'
}

.icon-progress-1:before {
    content: '\ea15'
}

.icon-progress-2:before {
    content: '\ea16'
}

.icon-progress-3:before {
    content: '\ea17'
}

.icon-target-1:before {
    content: '\ea18'
}

.icon-palette:before {
    content: '\ea19'
}

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

.icon-list-add:before {
    content: '\ea1b'
}

.icon-signal-1:before {
    content: '\ea1c'
}

.icon-trophy:before {
    content: '\ea1d'
}

.icon-battery:before {
    content: '\ea1e'
}

.icon-back-in-time:before {
    content: '\ea1f'
}

.icon-monitor:before {
    content: '\ea20'
}

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

.icon-network:before {
    content: '\ea22'
}

.icon-cd:before {
    content: '\ea23'
}

.icon-inbox-1:before {
    content: '\ea24'
}

.icon-install:before {
    content: '\ea25'
}

.icon-globe-1:before {
    content: '\ea26'
}

.icon-cloud-1:before {
    content: '\ea27'
}

.icon-cloud-thunder:before {
    content: '\ea28'
}

.icon-flash-1:before {
    content: '\ea29'
}

.icon-moon-1:before {
    content: '\ea2a'
}

.icon-flight-1:before {
    content: '\ea2b'
}

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

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

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

.icon-mouse:before {
    content: '\ea2f'
}

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

.icon-suitcase-1:before {
    content: '\ea31'
}

.icon-dot:before {
    content: '\ea32'
}

.icon-dot-2:before {
    content: '\ea33'
}

.icon-dot-3:before {
    content: '\ea34'
}

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

.icon-magnet-1:before {
    content: '\ea36'
}

.icon-infinity:before {
    content: '\ea37'
}

.icon-erase:before {
    content: '\ea38'
}

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

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

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

.icon-chart-area:before {
    content: '\ea3c'
}

.icon-tape:before {
    content: '\ea3d'
}

.icon-graduation-cap:before {
    content: '\ea3e'
}

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

.icon-ticket-1:before {
    content: '\ea40'
}

.icon-water:before {
    content: '\ea41'
}

.icon-droplet:before {
    content: '\ea42'
}

.icon-air:before {
    content: '\ea43'
}

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

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

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

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

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

.icon-drive:before {
    content: '\ea49'
}

.icon-bucket:before {
    content: '\ea4a'
}

.icon-thermometer:before {
    content: '\ea4b'
}

.icon-key-1:before {
    content: '\ea4c'
}

.icon-flow-cascade:before {
    content: '\ea4d'
}

.icon-flow-branch:before {
    content: '\ea4e'
}

.icon-flow-tree:before {
    content: '\ea4f'
}

.icon-flow-line:before {
    content: '\ea50'
}

.icon-flow-parallel:before {
    content: '\ea51'
}

.icon-rocket-1:before {
    content: '\ea52'
}

.icon-gauge-1:before {
    content: '\ea53'
}

.icon-traffic-cone:before {
    content: '\ea54'
}

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

.icon-cc-by:before {
    content: '\ea56'
}

.icon-cc-nc:before {
    content: '\ea57'
}

.icon-cc-nc-eu:before {
    content: '\ea58'
}

.icon-cc-nc-jp:before {
    content: '\ea59'
}

.icon-cc-sa:before {
    content: '\ea5a'
}

.icon-cc-nd:before {
    content: '\ea5b'
}

.icon-cc-pd:before {
    content: '\ea5c'
}

.icon-cc-zero:before {
    content: '\ea5d'
}

.icon-cc-share:before {
    content: '\ea5e'
}

.icon-cc-remix:before {
    content: '\ea5f'
}

.icon-github-1:before {
    content: '\ea60'
}

.icon-github-circled-1:before {
    content: '\ea61'
}

.icon-flickr-1:before {
    content: '\ea62'
}

.icon-flickr-circled:before {
    content: '\ea63'
}

.icon-vimeo:before {
    content: '\ea64'
}

.icon-vimeo-circled:before {
    content: '\ea65'
}

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

.icon-twitter-circled:before {
    content: '\ea67'
}

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

.icon-facebook-circled:before {
    content: '\ea69'
}

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

.icon-gplus-1:before {
    content: '\ea6b'
}

.icon-gplus-circled:before {
    content: '\ea6c'
}

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

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

.icon-tumblr-1:before {
    content: '\ea6f'
}

.icon-tumblr-circled:before {
    content: '\ea70'
}

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

.icon-linkedin-circled:before {
    content: '\ea72'
}

.icon-dribbble-1:before {
    content: '\ea73'
}

.icon-dribbble-circled:before {
    content: '\ea74'
}

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

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

.icon-lastfm:before {
    content: '\ea77'
}

.icon-lastfm-circled:before {
    content: '\ea78'
}

.icon-rdio:before {
    content: '\ea79'
}

.icon-rdio-circled:before {
    content: '\ea7a'
}

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

.icon-spotify-circled:before {
    content: '\ea7c'
}

.icon-qq:before {
    content: '\ea7d'
}

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

.icon-dropbox-1:before {
    content: '\ea7f'
}

.icon-evernote:before {
    content: '\ea80'
}

.icon-flattr:before {
    content: '\ea81'
}

.icon-skype-1:before {
    content: '\ea82'
}

.icon-skype-circled:before {
    content: '\ea83'
}

.icon-renren-1:before {
    content: '\ea84'
}

.icon-sina-weibo:before {
    content: '\ea85'
}

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

.icon-picasa:before {
    content: '\ea87'
}

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

.icon-mixi:before {
    content: '\ea89'
}

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

.icon-google-circles:before {
    content: '\ea8b'
}

.icon-vkontakte-1:before {
    content: '\ea8c'
}

.icon-smashing:before {
    content: '\ea8d'
}

.icon-sweden:before {
    content: '\ea8e'
}

.icon-db-shape:before {
    content: '\ea8f'
}

.icon-logo-db:before {
    content: '\ea90'
}

.icon-music-outline:before {
    content: '\ea91'
}

.icon-music-2:before {
    content: '\ea92'
}

.icon-search-outline:before {
    content: '\ea93'
}

.icon-search-2:before {
    content: '\ea94'
}

.icon-mail-2:before {
    content: '\ea95'
}

.icon-heart-2:before {
    content: '\ea96'
}

.icon-heart-filled:before {
    content: '\ea97'
}

.icon-star-2:before {
    content: '\ea98'
}

.icon-star-filled:before {
    content: '\ea99'
}

.icon-user-outline:before {
    content: '\ea9a'
}

.icon-user-2:before {
    content: '\ea9b'
}

.icon-users-outline:before {
    content: '\ea9c'
}

.icon-users-2:before {
    content: '\ea9d'
}

.icon-user-add-outline:before {
    content: '\ea9e'
}

.icon-user-add-1:before {
    content: '\ea9f'
}

.icon-user-delete-outline:before {
    content: '\eaa0'
}

.icon-user-delete:before {
    content: '\eaa1'
}

.icon-video-2:before {
    content: '\eaa2'
}

.icon-videocam-outline:before {
    content: '\eaa3'
}

.icon-videocam-1:before {
    content: '\eaa4'
}

.icon-picture-outline:before {
    content: '\eaa5'
}

.icon-picture-2:before {
    content: '\eaa6'
}

.icon-camera-outline:before {
    content: '\eaa7'
}

.icon-camera-2:before {
    content: '\eaa8'
}

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

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

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

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

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

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

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

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

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

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

.icon-cancel-alt:before {
    content: '\eab3'
}

.icon-cancel-alt-filled:before {
    content: '\eab4'
}

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

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

.icon-plus-outline:before {
    content: '\eab7'
}

.icon-plus-2:before {
    content: '\eab8'
}

.icon-minus-outline:before {
    content: '\eab9'
}

.icon-minus-2:before {
    content: '\eaba'
}

.icon-divide-outline:before {
    content: '\eabb'
}

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

.icon-eq-outline:before {
    content: '\eabd'
}

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

.icon-info-outline:before {
    content: '\eabf'
}

.icon-info-2:before {
    content: '\eac0'
}

.icon-home-outline:before {
    content: '\eac1'
}

.icon-home-2:before {
    content: '\eac2'
}

.icon-link-outline:before {
    content: '\eac3'
}

.icon-link-2:before {
    content: '\eac4'
}

.icon-attach-outline:before {
    content: '\eac5'
}

.icon-attach-2:before {
    content: '\eac6'
}

.icon-lock-2:before {
    content: '\eac7'
}

.icon-lock-filled:before {
    content: '\eac8'
}

.icon-lock-open-2:before {
    content: '\eac9'
}

.icon-lock-open-filled:before {
    content: '\eaca'
}

.icon-pin-outline:before {
    content: '\eacb'
}

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

.icon-eye-outline:before {
    content: '\eacd'
}

.icon-eye-2:before {
    content: '\eace'
}

.icon-tag-2:before {
    content: '\eacf'
}

.icon-tags-1:before {
    content: '\ead0'
}

.icon-bookmark-2:before {
    content: '\ead1'
}

.icon-flag-2:before {
    content: '\ead2'
}

.icon-flag-filled:before {
    content: '\ead3'
}

.icon-thumbs-up-2:before {
    content: '\ead4'
}

.icon-thumbs-down-2:before {
    content: '\ead5'
}

.icon-download-outline:before {
    content: '\ead6'
}

.icon-download-2:before {
    content: '\ead7'
}

.icon-upload-outline:before {
    content: '\ead8'
}

.icon-upload-2:before {
    content: '\ead9'
}

.icon-upload-cloud-outline:before {
    content: '\eada'
}

.icon-upload-cloud-2:before {
    content: '\eadb'
}

.icon-reply-outline:before {
    content: '\eadc'
}

.icon-reply-2:before {
    content: '\eadd'
}

.icon-forward-outline:before {
    content: '\eade'
}

.icon-forward-2:before {
    content: '\eadf'
}

.icon-code-outline:before {
    content: '\eae0'
}

.icon-code-2:before {
    content: '\eae1'
}

.icon-export-outline:before {
    content: '\eae2'
}

.icon-export-2:before {
    content: '\eae3'
}

.icon-pencil-2:before {
    content: '\eae4'
}

.icon-pen:before {
    content: '\eae5'
}

.icon-feather-1:before {
    content: '\eae6'
}

.icon-edit-1:before {
    content: '\eae7'
}

.icon-print-2:before {
    content: '\eae8'
}

.icon-comment-2:before {
    content: '\eae9'
}

.icon-chat-2:before {
    content: '\eaea'
}

.icon-chat-alt:before {
    content: '\eaeb'
}

.icon-bell-2:before {
    content: '\eaec'
}

.icon-attention-2:before {
    content: '\eaed'
}

.icon-attention-filled:before {
    content: '\eaee'
}

.icon-warning-empty:before {
    content: '\eaef'
}

.icon-warning:before {
    content: '\eaf0'
}

.icon-contacts:before {
    content: '\eaf1'
}

.icon-vcard-1:before {
    content: '\eaf2'
}

.icon-address-1:before {
    content: '\eaf3'
}

.icon-location-outline:before {
    content: '\eaf4'
}

.icon-location-2:before {
    content: '\eaf5'
}

.icon-map-1:before {
    content: '\eaf6'
}

.icon-direction-outline:before {
    content: '\eaf7'
}

.icon-direction-2:before {
    content: '\eaf8'
}

.icon-compass-2:before {
    content: '\eaf9'
}

.icon-trash-2:before {
    content: '\eafa'
}

.icon-doc-2:before {
    content: '\eafb'
}

.icon-doc-text-2:before {
    content: '\eafc'
}

.icon-doc-add:before {
    content: '\eafd'
}

.icon-doc-remove:before {
    content: '\eafe'
}

.icon-news:before {
    content: '\eaff'
}

.icon-folder-2:before {
    content: '\eb00'
}

.icon-folder-add:before {
    content: '\eb01'
}

.icon-folder-delete:before {
    content: '\eb02'
}

.icon-archive-1:before {
    content: '\eb03'
}

.icon-box-2:before {
    content: '\eb04'
}

.icon-rss-outline:before {
    content: '\eb05'
}

.icon-rss-2:before {
    content: '\eb06'
}

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

.icon-phone-2:before {
    content: '\eb08'
}

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

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

.icon-cog-outline:before {
    content: '\eb0b'
}

.icon-cog-2:before {
    content: '\eb0c'
}

.icon-wrench-outline:before {
    content: '\eb0d'
}

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

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

.icon-calendar-outlilne:before {
    content: '\eb10'
}

.icon-calendar-2:before {
    content: '\eb11'
}

.icon-mic-outline:before {
    content: '\eb12'
}

.icon-mic-2:before {
    content: '\eb13'
}

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

.icon-volume-low:before {
    content: '\eb15'
}

.icon-volume-middle:before {
    content: '\eb16'
}

.icon-volume-high:before {
    content: '\eb17'
}

.icon-headphones-1:before {
    content: '\eb18'
}

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

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

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

.icon-lightbulb-1:before {
    content: '\eb1c'
}

.icon-block-outline:before {
    content: '\eb1d'
}

.icon-block-2:before {
    content: '\eb1e'
}

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

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

.icon-resize-normal-outline:before {
    content: '\eb21'
}

.icon-resize-normal:before {
    content: '\eb22'
}

.icon-move-outline:before {
    content: '\eb23'
}

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

.icon-popup-1:before {
    content: '\eb25'
}

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

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

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

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

.icon-popup-2:before {
    content: '\eb2a'
}

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

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

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

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

.icon-down-2:before {
    content: '\eb2f'
}

.icon-left-2:before {
    content: '\eb30'
}

.icon-right-2:before {
    content: '\eb31'
}

.icon-up-2:before {
    content: '\eb32'
}

.icon-down-outline:before {
    content: '\eb33'
}

.icon-left-outline:before {
    content: '\eb34'
}

.icon-right-outline:before {
    content: '\eb35'
}

.icon-up-outline:before {
    content: '\eb36'
}

.icon-down-small:before {
    content: '\eb37'
}

.icon-left-small:before {
    content: '\eb38'
}

.icon-right-small:before {
    content: '\eb39'
}

.icon-up-small:before {
    content: '\eb3a'
}

.icon-cw-outline:before {
    content: '\eb3b'
}

.icon-cw-2:before {
    content: '\eb3c'
}

.icon-arrows-cw-outline:before {
    content: '\eb3d'
}

.icon-arrows-cw-1:before {
    content: '\eb3e'
}

.icon-loop-outline:before {
    content: '\eb3f'
}

.icon-loop-1:before {
    content: '\eb40'
}

.icon-loop-alt-outline:before {
    content: '\eb41'
}

.icon-loop-alt:before {
    content: '\eb42'
}

.icon-shuffle-2:before {
    content: '\eb43'
}

.icon-play-outline:before {
    content: '\eb44'
}

.icon-play-2:before {
    content: '\eb45'
}

.icon-stop-outline:before {
    content: '\eb46'
}

.icon-stop-2:before {
    content: '\eb47'
}

.icon-pause-outline:before {
    content: '\eb48'
}

.icon-pause-2:before {
    content: '\eb49'
}

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

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

.icon-rewind-outline:before {
    content: '\eb4c'
}

.icon-rewind:before {
    content: '\eb4d'
}

.icon-record-outline:before {
    content: '\eb4e'
}

.icon-record-1:before {
    content: '\eb4f'
}

.icon-eject-outline:before {
    content: '\eb50'
}

.icon-eject-1:before {
    content: '\eb51'
}

.icon-eject-alt-outline:before {
    content: '\eb52'
}

.icon-eject-alt:before {
    content: '\eb53'
}

.icon-bat1:before {
    content: '\eb54'
}

.icon-bat2:before {
    content: '\eb55'
}

.icon-bat3:before {
    content: '\eb56'
}

.icon-bat4:before {
    content: '\eb57'
}

.icon-bat-charge:before {
    content: '\eb58'
}

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

.icon-target-outline:before {
    content: '\eb5a'
}

.icon-target-2:before {
    content: '\eb5b'
}

.icon-wifi-outline:before {
    content: '\eb5c'
}

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

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

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

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

.icon-mobile-2:before {
    content: '\eb61'
}

.icon-contrast:before {
    content: '\eb62'
}

.icon-globe-outline:before {
    content: '\eb63'
}

.icon-globe-2:before {
    content: '\eb64'
}

.icon-globe-alt-outline:before {
    content: '\eb65'
}

.icon-globe-alt:before {
    content: '\eb66'
}

.icon-sun-1:before {
    content: '\eb67'
}

.icon-sun-filled:before {
    content: '\eb68'
}

.icon-cloud-2:before {
    content: '\eb69'
}

.icon-flash-outline:before {
    content: '\eb6a'
}

.icon-flash-2:before {
    content: '\eb6b'
}

.icon-moon-2:before {
    content: '\eb6c'
}

.icon-waves-outline:before {
    content: '\eb6d'
}

.icon-waves:before {
    content: '\eb6e'
}

.icon-rain:before {
    content: '\eb6f'
}

.icon-cloud-sun:before {
    content: '\eb70'
}

.icon-drizzle:before {
    content: '\eb71'
}

.icon-snow:before {
    content: '\eb72'
}

.icon-cloud-flash:before {
    content: '\eb73'
}

.icon-cloud-wind:before {
    content: '\eb74'
}

.icon-wind:before {
    content: '\eb75'
}

.icon-plane-outline:before {
    content: '\eb76'
}

.icon-plane:before {
    content: '\eb77'
}

.icon-leaf-2:before {
    content: '\eb78'
}

.icon-lifebuoy-1:before {
    content: '\eb79'
}

.icon-briefcase-2:before {
    content: '\eb7a'
}

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

.icon-pipette:before {
    content: '\eb7c'
}

.icon-power-outline:before {
    content: '\eb7d'
}

.icon-power:before {
    content: '\eb7e'
}

.icon-check-outline:before {
    content: '\eb7f'
}

.icon-check-2:before {
    content: '\eb80'
}

.icon-gift-1:before {
    content: '\eb81'
}

.icon-temperatire:before {
    content: '\eb82'
}

.icon-chart-outline:before {
    content: '\eb83'
}

.icon-chart:before {
    content: '\eb84'
}

.icon-chart-alt-outline:before {
    content: '\eb85'
}

.icon-chart-alt:before {
    content: '\eb86'
}

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

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

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

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

.icon-ticket-2:before {
    content: '\eb8b'
}

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

.icon-clipboard-1:before {
    content: '\eb8d'
}

.icon-database-1:before {
    content: '\eb8e'
}

.icon-key-outline:before {
    content: '\eb8f'
}

.icon-key-2:before {
    content: '\eb90'
}

.icon-flow-split:before {
    content: '\eb91'
}

.icon-flow-merge:before {
    content: '\eb92'
}

.icon-flow-parallel-1:before {
    content: '\eb93'
}

.icon-flow-cross:before {
    content: '\eb94'
}

.icon-certificate-outline:before {
    content: '\eb95'
}

.icon-certificate-1:before {
    content: '\eb96'
}

.icon-scissors-outline:before {
    content: '\eb97'
}

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

.icon-flask:before {
    content: '\eb99'
}

.icon-wine:before {
    content: '\eb9a'
}

.icon-coffee-1:before {
    content: '\eb9b'
}

.icon-beer-1:before {
    content: '\eb9c'
}

.icon-anchor-outline:before {
    content: '\eb9d'
}

.icon-anchor-1:before {
    content: '\eb9e'
}

.icon-puzzle-outline:before {
    content: '\eb9f'
}

.icon-puzzle-1:before {
    content: '\eba0'
}

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

.icon-calculator:before {
    content: '\eba2'
}

.icon-infinity-outline:before {
    content: '\eba3'
}

.icon-infinity-1:before {
    content: '\eba4'
}

.icon-pi-outline:before {
    content: '\eba5'
}

.icon-pi:before {
    content: '\eba6'
}

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

.icon-at-circled:before {
    content: '\eba8'
}

.icon-looped-square-outline:before {
    content: '\eba9'
}

.icon-looped-square-interest:before {
    content: '\ebaa'
}

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

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

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

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

.icon-dribbble-circled-1:before {
    content: '\ebaf'
}

.icon-dribbble-2:before {
    content: '\ebb0'
}

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

.icon-facebook-2:before {
    content: '\ebb2'
}

.icon-flickr-circled-1:before {
    content: '\ebb3'
}

.icon-flickr-2:before {
    content: '\ebb4'
}

.icon-github-circled-2:before {
    content: '\ebb5'
}

.icon-github-2:before {
    content: '\ebb6'
}

.icon-lastfm-circled-1:before {
    content: '\ebb7'
}

.icon-lastfm-1:before {
    content: '\ebb8'
}

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

.icon-linkedin-2:before {
    content: '\ebba'
}

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

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

.icon-skype-outline:before {
    content: '\ebbd'
}

.icon-skype-2:before {
    content: '\ebbe'
}

.icon-tumbler-circled:before {
    content: '\ebbf'
}

.icon-tumbler:before {
    content: '\ebc0'
}

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

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

.icon-vimeo-circled-1:before {
    content: '\ebc3'
}

.icon-vimeo-1:before {
    content: '\ebc4'
}

.icon-search-3:before {
    content: '\ebc5'
}

.icon-mail-3:before {
    content: '\ebc6'
}

.icon-heart-3:before {
    content: '\ebc7'
}

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

.icon-star-3:before {
    content: '\ebc9'
}

.icon-user-3:before {
    content: '\ebca'
}

.icon-video-3:before {
    content: '\ebcb'
}

.icon-picture-3:before {
    content: '\ebcc'
}

.icon-camera-3:before {
    content: '\ebcd'
}

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

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

.icon-cancel-3:before {
    content: '\ebd0'
}

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

.icon-plus-3:before {
    content: '\ebd2'
}

.icon-plus-circle:before {
    content: '\ebd3'
}

.icon-minus-3:before {
    content: '\ebd4'
}

.icon-minus-circle:before {
    content: '\ebd5'
}

.icon-help-2:before {
    content: '\ebd6'
}

.icon-info-3:before {
    content: '\ebd7'
}

.icon-home-3:before {
    content: '\ebd8'
}

.icon-link-3:before {
    content: '\ebd9'
}

.icon-attach-3:before {
    content: '\ebda'
}

.icon-lock-3:before {
    content: '\ebdb'
}

.icon-lock-empty:before {
    content: '\ebdc'
}

.icon-lock-open-3:before {
    content: '\ebdd'
}

.icon-lock-open-empty:before {
    content: '\ebde'
}

.icon-pin-2:before {
    content: '\ebdf'
}

.icon-eye-3:before {
    content: '\ebe0'
}

.icon-tag-3:before {
    content: '\ebe1'
}

.icon-tag-empty:before {
    content: '\ebe2'
}

.icon-download-3:before {
    content: '\ebe3'
}

.icon-upload-3:before {
    content: '\ebe4'
}

.icon-download-cloud-1:before {
    content: '\ebe5'
}

.icon-upload-cloud-3:before {
    content: '\ebe6'
}

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

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

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

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

.icon-pencil-3:before {
    content: '\ebeb'
}

.icon-pencil-neg:before {
    content: '\ebec'
}

.icon-pencil-alt:before {
    content: '\ebed'
}

.icon-undo:before {
    content: '\ebee'
}

.icon-comment-3:before {
    content: '\ebef'
}

.icon-comment-inv:before {
    content: '\ebf0'
}

.icon-comment-alt:before {
    content: '\ebf1'
}

.icon-comment-inv-alt:before {
    content: '\ebf2'
}

.icon-comment-alt2:before {
    content: '\ebf3'
}

.icon-comment-inv-alt2:before {
    content: '\ebf4'
}

.icon-chat-3:before {
    content: '\ebf5'
}

.icon-chat-inv:before {
    content: '\ebf6'
}

.icon-location-3:before {
    content: '\ebf7'
}

.icon-location-inv:before {
    content: '\ebf8'
}

.icon-location-alt:before {
    content: '\ebf9'
}

.icon-compass-3:before {
    content: '\ebfa'
}

.icon-trash-3:before {
    content: '\ebfb'
}

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

.icon-doc-3:before {
    content: '\ebfd'
}

.icon-doc-inv-1:before {
    content: '\ebfe'
}

.icon-doc-alt:before {
    content: '\ebff'
}

.icon-doc-inv-alt:before {
    content: '\ec00'
}

.icon-article:before {
    content: '\ec01'
}

.icon-article-alt:before {
    content: '\ec02'
}

.icon-book-open-1:before {
    content: '\ec03'
}

.icon-folder-3:before {
    content: '\ec04'
}

.icon-folder-empty-1:before {
    content: '\ec05'
}

.icon-box-3:before {
    content: '\ec06'
}

.icon-rss-3:before {
    content: '\ec07'
}

.icon-rss-alt:before {
    content: '\ec08'
}

.icon-cog-3:before {
    content: '\ec09'
}

.icon-wrench-2:before {
    content: '\ec0a'
}

.icon-share-1:before {
    content: '\ec0b'
}

.icon-calendar-3:before {
    content: '\ec0c'
}

.icon-calendar-inv:before {
    content: '\ec0d'
}

.icon-calendar-alt:before {
    content: '\ec0e'
}

.icon-mic-3:before {
    content: '\ec0f'
}

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

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

.icon-headphones-2:before {
    content: '\ec12'
}

.icon-clock-3:before {
    content: '\ec13'
}

.icon-lamp-1:before {
    content: '\ec14'
}

.icon-block-3:before {
    content: '\ec15'
}

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

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

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

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

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

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

.icon-move-2:before {
    content: '\ec1c'
}

.icon-popup-3:before {
    content: '\ec1d'
}

.icon-down-3:before {
    content: '\ec1e'
}

.icon-left-3:before {
    content: '\ec1f'
}

.icon-right-3:before {
    content: '\ec20'
}

.icon-up-3:before {
    content: '\ec21'
}

.icon-down-circle:before {
    content: '\ec22'
}

.icon-left-circle:before {
    content: '\ec23'
}

.icon-right-circle:before {
    content: '\ec24'
}

.icon-up-circle:before {
    content: '\ec25'
}

.icon-cw-3:before {
    content: '\ec26'
}

.icon-loop-2:before {
    content: '\ec27'
}

.icon-loop-alt-1:before {
    content: '\ec28'
}

.icon-exchange-1:before {
    content: '\ec29'
}

.icon-split:before {
    content: '\ec2a'
}

.icon-arrow-curved:before {
    content: '\ec2b'
}

.icon-play-3:before {
    content: '\ec2c'
}

.icon-play-circle2:before {
    content: '\ec2d'
}

.icon-stop-3:before {
    content: '\ec2e'
}

.icon-pause-3:before {
    content: '\ec2f'
}

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

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

.icon-eject-2:before {
    content: '\ec32'
}

.icon-target-3:before {
    content: '\ec33'
}

.icon-signal-2:before {
    content: '\ec34'
}

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

.icon-award-empty:before {
    content: '\ec36'
}

.icon-list-2:before {
    content: '\ec37'
}

.icon-list-nested:before {
    content: '\ec38'
}

.icon-bat-empty:before {
    content: '\ec39'
}

.icon-bat-half:before {
    content: '\ec3a'
}

.icon-bat-full:before {
    content: '\ec3b'
}

.icon-bat-charge-1:before {
    content: '\ec3c'
}

.icon-mobile-3:before {
    content: '\ec3d'
}

.icon-cd-1:before {
    content: '\ec3e'
}

.icon-equalizer:before {
    content: '\ec3f'
}

.icon-cursor:before {
    content: '\ec40'
}

.icon-aperture:before {
    content: '\ec41'
}

.icon-aperture-alt:before {
    content: '\ec42'
}

.icon-steering-wheel:before {
    content: '\ec43'
}

.icon-book-2:before {
    content: '\ec44'
}

.icon-book-alt:before {
    content: '\ec45'
}

.icon-brush-2:before {
    content: '\ec46'
}

.icon-brush-alt:before {
    content: '\ec47'
}

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

.icon-layers:before {
    content: '\ec49'
}

.icon-layers-alt:before {
    content: '\ec4a'
}

.icon-sun-2:before {
    content: '\ec4b'
}

.icon-sun-inv:before {
    content: '\ec4c'
}

.icon-cloud-3:before {
    content: '\ec4d'
}

.icon-rain-1:before {
    content: '\ec4e'
}

.icon-flash-3:before {
    content: '\ec4f'
}

.icon-moon-3:before {
    content: '\ec50'
}

.icon-moon-inv:before {
    content: '\ec51'
}

.icon-umbrella-1:before {
    content: '\ec52'
}

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

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

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

.icon-key-3:before {
    content: '\ec56'
}

.icon-key-inv:before {
    content: '\ec57'
}

.icon-hash:before {
    content: '\ec58'
}

.icon-at-1:before {
    content: '\ec59'
}

.icon-pilcrow:before {
    content: '\ec5a'
}

.icon-dial:before {
    content: '\ec5b'
}

.icon-search-4:before {
    content: '\ec5c'
}

.icon-mail-4:before {
    content: '\ec5d'
}

.icon-heart-4:before {
    content: '\ec5e'
}

.icon-star-4:before {
    content: '\ec5f'
}

.icon-user-4:before {
    content: '\ec60'
}

.icon-user-woman:before {
    content: '\ec61'
}

.icon-user-pair:before {
    content: '\ec62'
}

.icon-video-alt:before {
    content: '\ec63'
}

.icon-videocam-2:before {
    content: '\ec64'
}

.icon-videocam-alt:before {
    content: '\ec65'
}

.icon-camera-4:before {
    content: '\ec66'
}

.icon-th-2:before {
    content: '\ec67'
}

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

.icon-ok-3:before {
    content: '\ec69'
}

.icon-cancel-4:before {
    content: '\ec6a'
}

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

.icon-plus-4:before {
    content: '\ec6c'
}

.icon-home-4:before {
    content: '\ec6d'
}

.icon-lock-4:before {
    content: '\ec6e'
}

.icon-lock-open-4:before {
    content: '\ec6f'
}

.icon-eye-4:before {
    content: '\ec70'
}

.icon-tag-4:before {
    content: '\ec71'
}

.icon-thumbs-up-3:before {
    content: '\ec72'
}

.icon-thumbs-down-3:before {
    content: '\ec73'
}

.icon-download-4:before {
    content: '\ec74'
}

.icon-export-3:before {
    content: '\ec75'
}

.icon-pencil-4:before {
    content: '\ec76'
}

.icon-pencil-alt-1:before {
    content: '\ec77'
}

.icon-edit-2:before {
    content: '\ec78'
}

.icon-chat-4:before {
    content: '\ec79'
}

.icon-print-3:before {
    content: '\ec7a'
}

.icon-bell-3:before {
    content: '\ec7b'
}

.icon-attention-3:before {
    content: '\ec7c'
}

.icon-info-4:before {
    content: '\ec7d'
}

.icon-question:before {
    content: '\ec7e'
}

.icon-location-4:before {
    content: '\ec7f'
}

.icon-trash-4:before {
    content: '\ec80'
}

.icon-doc-4:before {
    content: '\ec81'
}

.icon-article-1:before {
    content: '\ec82'
}

.icon-article-alt-1:before {
    content: '\ec83'
}

.icon-rss-4:before {
    content: '\ec84'
}

.icon-wrench-3:before {
    content: '\ec85'
}

.icon-basket-3:before {
    content: '\ec86'
}

.icon-basket-alt:before {
    content: '\ec87'
}

.icon-calendar-4:before {
    content: '\ec88'
}

.icon-calendar-alt-1:before {
    content: '\ec89'
}

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

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

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

.icon-bullhorn:before {
    content: '\ec8d'
}

.icon-clock-4:before {
    content: '\ec8e'
}

.icon-clock-alt:before {
    content: '\ec8f'
}

.icon-stop-4:before {
    content: '\ec90'
}

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

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

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

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

.icon-popup-4:before {
    content: '\ec95'
}

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

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

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

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

.icon-down-4:before {
    content: '\ec9a'
}

.icon-up-4:before {
    content: '\ec9b'
}

.icon-cw-4:before {
    content: '\ec9c'
}

.icon-signal-3:before {
    content: '\ec9d'
}

.icon-award-2:before {
    content: '\ec9e'
}

.icon-mobile-4:before {
    content: '\ec9f'
}

.icon-mobile-alt:before {
    content: '\eca0'
}

.icon-tablet-2:before {
    content: '\eca1'
}

.icon-ipod:before {
    content: '\eca2'
}

.icon-cd-2:before {
    content: '\eca3'
}

.icon-grid:before {
    content: '\eca4'
}

.icon-book-3:before {
    content: '\eca5'
}

.icon-easel:before {
    content: '\eca6'
}

.icon-globe-3:before {
    content: '\eca7'
}

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

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

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

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

.icon-at-2:before {
    content: '\ecac'
}

.icon-colon:before {
    content: '\ecad'
}

.icon-semicolon:before {
    content: '\ecae'
}

.icon-squares:before {
    content: '\ecaf'
}

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

.icon-facebook-3:before {
    content: '\ecb1'
}

.icon-facebook-rect:before {
    content: '\ecb2'
}

.icon-twitter-3:before {
    content: '\ecb3'
}

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

.icon-twitter-rect:before {
    content: '\ecb5'
}

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

.icon-search-5:before {
    content: '\ecb7'
}

.icon-mail-5:before {
    content: '\ecb8'
}

.icon-heart-5:before {
    content: '\ecb9'
}

.icon-heart-broken:before {
    content: '\ecba'
}

.icon-star-5:before {
    content: '\ecbb'
}

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

.icon-star-half-1:before {
    content: '\ecbd'
}

.icon-star-half_empty:before {
    content: '\ecbe'
}

.icon-user-5:before {
    content: '\ecbf'
}

.icon-user-male:before {
    content: '\ecc0'
}

.icon-user-female:before {
    content: '\ecc1'
}

.icon-users-3:before {
    content: '\ecc2'
}

.icon-movie:before {
    content: '\ecc3'
}

.icon-videocam-3:before {
    content: '\ecc4'
}

.icon-isight:before {
    content: '\ecc5'
}

.icon-camera-5:before {
    content: '\ecc6'
}

.icon-menu-3:before {
    content: '\ecc7'
}

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

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

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

.icon-ok-4:before {
    content: '\eccb'
}

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

.icon-cancel-5:before {
    content: '\eccd'
}

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

.icon-plus-5:before {
    content: '\eccf'
}

.icon-help-circled-2:before {
    content: '\ecd0'
}

.icon-help-circled-alt:before {
    content: '\ecd1'
}

.icon-info-circled-2:before {
    content: '\ecd2'
}

.icon-info-circled-alt:before {
    content: '\ecd3'
}

.icon-home-5:before {
    content: '\ecd4'
}

.icon-link-4:before {
    content: '\ecd5'
}

.icon-attach-4:before {
    content: '\ecd6'
}

.icon-lock-5:before {
    content: '\ecd7'
}

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

.icon-lock-open-5:before {
    content: '\ecd9'
}

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

.icon-eye-5:before {
    content: '\ecdb'
}

.icon-download-5:before {
    content: '\ecdc'
}

.icon-upload-4:before {
    content: '\ecdd'
}

.icon-download-cloud-2:before {
    content: '\ecde'
}

.icon-upload-cloud-4:before {
    content: '\ecdf'
}

.icon-reply-3:before {
    content: '\ece0'
}

.icon-pencil-5:before {
    content: '\ece1'
}

.icon-export-4:before {
    content: '\ece2'
}

.icon-print-4:before {
    content: '\ece3'
}

.icon-retweet-2:before {
    content: '\ece4'
}

.icon-comment-4:before {
    content: '\ece5'
}

.icon-chat-5:before {
    content: '\ece6'
}

.icon-bell-4:before {
    content: '\ece7'
}

.icon-attention-4:before {
    content: '\ece8'
}

.icon-attention-alt-1:before {
    content: '\ece9'
}

.icon-location-5:before {
    content: '\ecea'
}

.icon-trash-5:before {
    content: '\eceb'
}

.icon-doc-5:before {
    content: '\ecec'
}

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

.icon-folder-4:before {
    content: '\ecee'
}

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

.icon-folder-empty-2:before {
    content: '\ecf0'
}

.icon-folder-open-empty-1:before {
    content: '\ecf1'
}

.icon-cog-4:before {
    content: '\ecf2'
}

.icon-calendar-5:before {
    content: '\ecf3'
}

.icon-login-2:before {
    content: '\ecf4'
}

.icon-logout-2:before {
    content: '\ecf5'
}

.icon-mic-4:before {
    content: '\ecf6'
}

.icon-mic-off:before {
    content: '\ecf7'
}

.icon-clock-5:before {
    content: '\ecf8'
}

.icon-stopwatch-1:before {
    content: '\ecf9'
}

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

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

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

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

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

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

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

.icon-down-5:before {
    content: '\ed01'
}

.icon-left-4:before {
    content: '\ed02'
}

.icon-right-4:before {
    content: '\ed03'
}

.icon-up-5:before {
    content: '\ed04'
}

.icon-down-bold-1:before {
    content: '\ed05'
}

.icon-left-bold-1:before {
    content: '\ed06'
}

.icon-right-bold-1:before {
    content: '\ed07'
}

.icon-up-bold-1:before {
    content: '\ed08'
}

.icon-down-fat:before {
    content: '\ed09'
}

.icon-left-fat:before {
    content: '\ed0a'
}

.icon-right-fat:before {
    content: '\ed0b'
}

.icon-up-fat:before {
    content: '\ed0c'
}

.icon-ccw-2:before {
    content: '\ed0d'
}

.icon-shuffle-3:before {
    content: '\ed0e'
}

.icon-play-4:before {
    content: '\ed0f'
}

.icon-pause-4:before {
    content: '\ed10'
}

.icon-stop-5:before {
    content: '\ed11'
}

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

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

.icon-fast-forward-1:before {
    content: '\ed14'
}

.icon-fast-backward-1:before {
    content: '\ed15'
}

.icon-trophy-1:before {
    content: '\ed16'
}

.icon-monitor-1:before {
    content: '\ed17'
}

.icon-tablet-3:before {
    content: '\ed18'
}

.icon-mobile-5:before {
    content: '\ed19'
}

.icon-data-science:before {
    content: '\ed1a'
}

.icon-data-science-inv:before {
    content: '\ed1b'
}

.icon-inbox-2:before {
    content: '\ed1c'
}

.icon-globe-4:before {
    content: '\ed1d'
}

.icon-globe-inv:before {
    content: '\ed1e'
}

.icon-flash-4:before {
    content: '\ed1f'
}

.icon-cloud-4:before {
    content: '\ed20'
}

.icon-coverflow:before {
    content: '\ed21'
}

.icon-coverflow-empty:before {
    content: '\ed22'
}

.icon-math:before {
    content: '\ed23'
}

.icon-math-circled:before {
    content: '\ed24'
}

.icon-math-circled-empty:before {
    content: '\ed25'
}

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

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

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

.icon-fontsize:before {
    content: '\ed29'
}

.icon-color-adjust:before {
    content: '\ed2a'
}

.icon-fire-1:before {
    content: '\ed2b'
}

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

.icon-hdd-1:before {
    content: '\ed2d'
}

.icon-connected-object:before {
    content: '\ed2e'
}

.icon-ruler:before {
    content: '\ed2f'
}

.icon-vector:before {
    content: '\ed30'
}

.icon-vector-pencil:before {
    content: '\ed31'
}

.icon-at-3:before {
    content: '\ed32'
}

.icon-hash-1:before {
    content: '\ed33'
}

.icon-female-1:before {
    content: '\ed34'
}

.icon-male-1:before {
    content: '\ed35'
}

.icon-spread:before {
    content: '\ed36'
}

.icon-king:before {
    content: '\ed37'
}

.icon-anchor-2:before {
    content: '\ed38'
}

.icon-joystick:before {
    content: '\ed39'
}

.icon-spinner1:before {
    content: '\ed3a'
}

.icon-spinner2:before {
    content: '\ed3b'
}

.icon-github-3:before {
    content: '\ed3c'
}

.icon-github-circled-3:before {
    content: '\ed3d'
}

.icon-github-circled-alt:before {
    content: '\ed3e'
}

.icon-github-circled-alt2:before {
    content: '\ed3f'
}

.icon-twitter-4:before {
    content: '\ed40'
}

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

.icon-facebook-4:before {
    content: '\ed42'
}

.icon-facebook-circled-2:before {
    content: '\ed43'
}

.icon-gplus-2:before {
    content: '\ed44'
}

.icon-gplus-circled-1:before {
    content: '\ed45'
}

.icon-linkedin-3:before {
    content: '\ed46'
}

.icon-linkedin-circled-2:before {
    content: '\ed47'
}

.icon-dribbble-3:before {
    content: '\ed48'
}

.icon-dribbble-circled-2:before {
    content: '\ed49'
}

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

.icon-instagram-circled:before {
    content: '\ed4b'
}

.icon-soundcloud-1:before {
    content: '\ed4c'
}

.icon-soundcloud-circled:before {
    content: '\ed4d'
}

.icon-mfg-logo:before {
    content: '\ed4e'
}

.icon-mfg-logo-circled:before {
    content: '\ed4f'
}

.icon-aboveground-rail:before {
    content: '\ed50'
}

.icon-airfield:before {
    content: '\ed51'
}

.icon-airport:before {
    content: '\ed52'
}

.icon-art-gallery:before {
    content: '\ed53'
}

.icon-bar:before {
    content: '\ed54'
}

.icon-baseball:before {
    content: '\ed55'
}

.icon-basketball:before {
    content: '\ed56'
}

.icon-beer-2:before {
    content: '\ed57'
}

.icon-belowground-rail:before {
    content: '\ed58'
}

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

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

.icon-cafe:before {
    content: '\ed5b'
}

.icon-campsite:before {
    content: '\ed5c'
}

.icon-cemetery:before {
    content: '\ed5d'
}

.icon-cinema:before {
    content: '\ed5e'
}

.icon-college:before {
    content: '\ed5f'
}

.icon-commerical-building:before {
    content: '\ed60'
}

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

.icon-cricket:before {
    content: '\ed62'
}

.icon-embassy:before {
    content: '\ed63'
}

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

.icon-ferry:before {
    content: '\ed65'
}

.icon-fire-station:before {
    content: '\ed66'
}

.icon-football:before {
    content: '\ed67'
}

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

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

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

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

.icon-grocery-store:before {
    content: '\ed6c'
}

.icon-harbor:before {
    content: '\ed6d'
}

.icon-heliport:before {
    content: '\ed6e'
}

.icon-hospital-1:before {
    content: '\ed6f'
}

.icon-industrial-building:before {
    content: '\ed70'
}

.icon-library:before {
    content: '\ed71'
}

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

.icon-london-underground:before {
    content: '\ed73'
}

.icon-minefield:before {
    content: '\ed74'
}

.icon-monument:before {
    content: '\ed75'
}

.icon-museum:before {
    content: '\ed76'
}

.icon-pharmacy:before {
    content: '\ed77'
}

.icon-pitch:before {
    content: '\ed78'
}

.icon-police:before {
    content: '\ed79'
}

.icon-post:before {
    content: '\ed7a'
}

.icon-prison:before {
    content: '\ed7b'
}

.icon-rail:before {
    content: '\ed7c'
}

.icon-religious-christian:before {
    content: '\ed7d'
}

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

.icon-religious-jewish:before {
    content: '\ed7f'
}

.icon-restaurant:before {
    content: '\ed80'
}

.icon-roadblock:before {
    content: '\ed81'
}

.icon-school:before {
    content: '\ed82'
}

.icon-shop:before {
    content: '\ed83'
}

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

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

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

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

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

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

.icon-town-hall:before {
    content: '\ed8a'
}

.icon-trash-6:before {
    content: '\ed8b'
}

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

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

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

.icon-duckduckgo:before {
    content: '\ed8f'
}

.icon-aim:before {
    content: '\ed90'
}

.icon-delicious:before {
    content: '\ed91'
}

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

.icon-flattr-1:before {
    content: '\ed93'
}

.icon-android-1:before {
    content: '\ed94'
}

.icon-eventful:before {
    content: '\ed95'
}

.icon-smashmag:before {
    content: '\ed96'
}

.icon-gplus-3:before {
    content: '\ed97'
}

.icon-wikipedia:before {
    content: '\ed98'
}

.icon-lanyrd:before {
    content: '\ed99'
}

.icon-calendar-6:before {
    content: '\ed9a'
}

.icon-stumbleupon-1:before {
    content: '\ed9b'
}

.icon-fivehundredpx:before {
    content: '\ed9c'
}

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

.icon-bitcoin-1:before {
    content: '\ed9e'
}

.icon-w3c:before {
    content: '\ed9f'
}

.icon-foursquare-1:before {
    content: '\eda0'
}

.icon-html5-1:before {
    content: '\eda1'
}

.icon-ie:before {
    content: '\eda2'
}

.icon-call:before {
    content: '\eda3'
}

.icon-grooveshark:before {
    content: '\eda4'
}

.icon-ninetyninedesigns:before {
    content: '\eda5'
}

.icon-forrst:before {
    content: '\eda6'
}

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

.icon-spotify-1:before {
    content: '\eda8'
}

.icon-reddit:before {
    content: '\eda9'
}

.icon-guest:before {
    content: '\edaa'
}

.icon-gowalla:before {
    content: '\edab'
}

.icon-appstore:before {
    content: '\edac'
}

.icon-blogger:before {
    content: '\edad'
}

.icon-cc-1:before {
    content: '\edae'
}

.icon-dribbble-4:before {
    content: '\edaf'
}

.icon-evernote-1:before {
    content: '\edb0'
}

.icon-flickr-3:before {
    content: '\edb1'
}

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

.icon-viadeo:before {
    content: '\edb3'
}

.icon-instapaper:before {
    content: '\edb4'
}

.icon-weibo-1:before {
    content: '\edb5'
}

.icon-klout:before {
    content: '\edb6'
}

.icon-linkedin-4:before {
    content: '\edb7'
}

.icon-meetup:before {
    content: '\edb8'
}

.icon-vk:before {
    content: '\edb9'
}

.icon-plancast:before {
    content: '\edba'
}

.icon-disqus:before {
    content: '\edbb'
}

.icon-rss-5:before {
    content: '\edbc'
}

.icon-skype-3:before {
    content: '\edbd'
}

.icon-twitter-5:before {
    content: '\edbe'
}

.icon-youtube-2:before {
    content: '\edbf'
}

.icon-vimeo-2:before {
    content: '\edc0'
}

.icon-windows-1:before {
    content: '\edc1'
}

.icon-xing-1:before {
    content: '\edc2'
}

.icon-yahoo:before {
    content: '\edc3'
}

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

.icon-email:before {
    content: '\edc5'
}

.icon-macstore:before {
    content: '\edc6'
}

.icon-myspace:before {
    content: '\edc7'
}

.icon-podcast:before {
    content: '\edc8'
}

.icon-amazon:before {
    content: '\edc9'
}

.icon-steam:before {
    content: '\edca'
}

.icon-cloudapp:before {
    content: '\edcb'
}

.icon-dropbox-2:before {
    content: '\edcc'
}

.icon-ebay:before {
    content: '\edcd'
}

.icon-facebook-5:before {
    content: '\edce'
}

.icon-github-4:before {
    content: '\edcf'
}

.icon-github-circled-4:before {
    content: '\edd0'
}

.icon-googleplay:before {
    content: '\edd1'
}

.icon-itunes:before {
    content: '\edd2'
}

.icon-plurk:before {
    content: '\edd3'
}

.icon-songkick:before {
    content: '\edd4'
}

.icon-lastfm-2:before {
    content: '\edd5'
}

.icon-gmail:before {
    content: '\edd6'
}

.icon-pinboard:before {
    content: '\edd7'
}

.icon-openid:before {
    content: '\edd8'
}

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

.icon-soundcloud-2:before {
    content: '\edda'
}

.icon-tumblr-2:before {
    content: '\eddb'
}

.icon-eventasaurus:before {
    content: '\eddc'
}

.icon-wordpress:before {
    content: '\eddd'
}

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

.icon-intensedebate:before {
    content: '\eddf'
}

.icon-eventbrite:before {
    content: '\ede0'
}

.icon-scribd:before {
    content: '\ede1'
}

.icon-posterous:before {
    content: '\ede2'
}

.icon-stripe:before {
    content: '\ede3'
}

.icon-opentable:before {
    content: '\ede4'
}

.icon-cart:before {
    content: '\ede5'
}

.icon-print-5:before {
    content: '\ede6'
}

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

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

.icon-dwolla:before {
    content: '\ede9'
}

.icon-appnet:before {
    content: '\edea'
}

.icon-statusnet:before {
    content: '\edeb'
}

.icon-acrobat:before {
    content: '\edec'
}

.icon-drupal:before {
    content: '\eded'
}

.icon-buffer:before {
    content: '\edee'
}

.icon-pocket:before {
    content: '\edef'
}

.icon-bitbucket-1:before {
    content: '\edf0'
}

.icon-lego:before {
    content: '\edf1'
}

.icon-login-3:before {
    content: '\edf2'
}

.icon-stackoverflow-1:before {
    content: '\edf3'
}

.icon-hackernews:before {
    content: '\edf4'
}

.icon-lkdto:before {
    content: '\edf5'
}

.icon-facebook-6:before {
    content: '\edf6'
}

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

.icon-twitter-6:before {
    content: '\edf8'
}

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

.icon-vimeo-3:before {
    content: '\edfa'
}

.icon-vimeo-rect:before {
    content: '\edfb'
}

.icon-tumblr-3:before {
    content: '\edfc'
}

.icon-tumblr-rect:before {
    content: '\edfd'
}

.icon-googleplus-rect:before {
    content: '\edfe'
}

.icon-github-text:before {
    content: '\edff'
}

.icon-github-5:before {
    content: '\ee00'
}

.icon-skype-4:before {
    content: '\ee01'
}

.icon-icq:before {
    content: '\ee02'
}

.icon-yandex:before {
    content: '\ee03'
}

.icon-yandex-rect:before {
    content: '\ee04'
}

.icon-vkontakte-rect:before {
    content: '\ee05'
}

.icon-odnoklassniki:before {
    content: '\ee06'
}

.icon-odnoklassniki-rect:before {
    content: '\ee07'
}

.icon-friendfeed:before {
    content: '\ee08'
}

.icon-friendfeed-rect:before {
    content: '\ee09'
}

.icon-blogger-1:before {
    content: '\ee0a'
}

.icon-blogger-rect:before {
    content: '\ee0b'
}

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

.icon-jabber:before {
    content: '\ee0d'
}

.icon-lastfm-3:before {
    content: '\ee0e'
}

.icon-lastfm-rect:before {
    content: '\ee0f'
}

.icon-linkedin-5:before {
    content: '\ee10'
}

.icon-linkedin-rect:before {
    content: '\ee11'
}

.icon-picasa-1:before {
    content: '\ee12'
}

.icon-wordpress-1:before {
    content: '\ee13'
}

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

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

.icon-diigo:before {
    content: '\ee16'
}

.icon-box-4:before {
    content: '\ee17'
}

.icon-box-rect:before {
    content: '\ee18'
}

.icon-tudou:before {
    content: '\ee19'
}

.icon-youku:before {
    content: '\ee1a'
}

.icon-win8:before {
    content: '\ee1b'
}

.icon-glass-1:before {
    content: '\ee72'
}

.icon-music-4:before {
    content: '\ee73'
}

.icon-search-8:before {
    content: '\ee74'
}

.icon-search-circled:before {
    content: '\ee75'
}

.icon-mail-7:before {
    content: '\ee76'
}

.icon-mail-circled:before {
    content: '\ee77'
}

.icon-heart-8:before {
    content: '\ee78'
}

.icon-heart-circled:before {
    content: '\ee79'
}

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

.icon-star-8:before {
    content: '\ee7b'
}

.icon-star-circled:before {
    content: '\ee7c'
}

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

.icon-user-8:before {
    content: '\ee7e'
}

.icon-group:before {
    content: '\ee7f'
}

.icon-group-circled:before {
    content: '\ee80'
}

.icon-torso:before {
    content: '\ee81'
}

.icon-video-5:before {
    content: '\ee82'
}

.icon-video-circled:before {
    content: '\ee83'
}

.icon-video-alt-1:before {
    content: '\ee84'
}

.icon-videocam-5:before {
    content: '\ee85'
}

.icon-video-chat:before {
    content: '\ee86'
}

.icon-picture-5:before {
    content: '\ee87'
}

.icon-camera-7:before {
    content: '\ee88'
}

.icon-photo-1:before {
    content: '\ee89'
}

.icon-photo-circled:before {
    content: '\ee8a'
}

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

.icon-th-3:before {
    content: '\ee8c'
}

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

.icon-view-mode:before {
    content: '\ee8e'
}

.icon-ok-6:before {
    content: '\ee8f'
}

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

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

.icon-cancel-7:before {
    content: '\ee92'
}

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

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

.icon-plus-6:before {
    content: '\ee95'
}

.icon-plus-circled-2:before {
    content: '\ee96'
}

.icon-minus-4:before {
    content: '\ee97'
}

.icon-minus-circled-2:before {
    content: '\ee98'
}

.icon-help-3:before {
    content: '\ee99'
}

.icon-help-circled-3:before {
    content: '\ee9a'
}

.icon-info-circled-3:before {
    content: '\ee9b'
}

.icon-home-6:before {
    content: '\ee9c'
}

.icon-home-circled:before {
    content: '\ee9d'
}

.icon-website:before {
    content: '\ee9e'
}

.icon-website-circled:before {
    content: '\ee9f'
}

.icon-attach-7:before {
    content: '\eea0'
}

.icon-attach-circled:before {
    content: '\eea1'
}

.icon-lock-8:before {
    content: '\eea2'
}

.icon-lock-circled:before {
    content: '\eea3'
}

.icon-lock-open-7:before {
    content: '\eea4'
}

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

.icon-eye-7:before {
    content: '\eea6'
}

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

.icon-tag-7:before {
    content: '\eea8'
}

.icon-tags-2:before {
    content: '\eea9'
}

.icon-bookmark-3:before {
    content: '\eeaa'
}

.icon-bookmark-empty-1:before {
    content: '\eeab'
}

.icon-flag-3:before {
    content: '\eeac'
}

.icon-flag-circled:before {
    content: '\eead'
}

.icon-thumbs-up-5:before {
    content: '\eeae'
}

.icon-thumbs-down-4:before {
    content: '\eeaf'
}

.icon-download-6:before {
    content: '\eeb0'
}

.icon-download-alt:before {
    content: '\eeb1'
}

.icon-upload-5:before {
    content: '\eeb2'
}

.icon-share-2:before {
    content: '\eeb3'
}

.icon-quote-1:before {
    content: '\eeb4'
}

.icon-quote-circled:before {
    content: '\eeb5'
}

.icon-export-5:before {
    content: '\eeb6'
}

.icon-pencil-7:before {
    content: '\eeb7'
}

.icon-pencil-circled:before {
    content: '\eeb8'
}

.icon-edit-3:before {
    content: '\eeb9'
}

.icon-edit-circled:before {
    content: '\eeba'
}

.icon-edit-alt:before {
    content: '\eebb'
}

.icon-print-6:before {
    content: '\eebc'
}

.icon-retweet-4:before {
    content: '\eebd'
}

.icon-comment-7:before {
    content: '\eebe'
}

.icon-comment-alt-1:before {
    content: '\eebf'
}

.icon-bell-5:before {
    content: '\eec0'
}

.icon-warning-1:before {
    content: '\eec1'
}

.icon-exclamation:before {
    content: '\eec2'
}

.icon-error:before {
    content: '\eec3'
}

.icon-error-alt:before {
    content: '\eec4'
}

.icon-location-7:before {
    content: '\eec5'
}

.icon-location-circled:before {
    content: '\eec6'
}

.icon-compass-4:before {
    content: '\eec7'
}

.icon-compass-circled:before {
    content: '\eec8'
}

.icon-trash-8:before {
    content: '\eec9'
}

.icon-trash-circled:before {
    content: '\eeca'
}

.icon-doc-7:before {
    content: '\eecb'
}

.icon-doc-circled:before {
    content: '\eecc'
}

.icon-doc-new:before {
    content: '\eecd'
}

.icon-doc-new-circled:before {
    content: '\eece'
}

.icon-folder-5:before {
    content: '\eecf'
}

.icon-folder-circled:before {
    content: '\eed0'
}

.icon-folder-close:before {
    content: '\eed1'
}

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

.icon-rss-6:before {
    content: '\eed3'
}

.icon-phone-3:before {
    content: '\eed4'
}

.icon-phone-circled:before {
    content: '\eed5'
}

.icon-cog-6:before {
    content: '\eed6'
}

.icon-cog-circled:before {
    content: '\eed7'
}

.icon-cogs:before {
    content: '\eed8'
}

.icon-wrench-4:before {
    content: '\eed9'
}

.icon-wrench-circled:before {
    content: '\eeda'
}

.icon-basket-4:before {
    content: '\eedb'
}

.icon-basket-circled:before {
    content: '\eedc'
}

.icon-calendar-8:before {
    content: '\eedd'
}

.icon-calendar-circled:before {
    content: '\eede'
}

.icon-mic-5:before {
    content: '\eedf'
}

.icon-mic-circled:before {
    content: '\eee0'
}

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

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

.icon-volume-1:before {
    content: '\eee3'
}

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

.icon-headphones-3:before {
    content: '\eee5'
}

.icon-clock-8:before {
    content: '\eee6'
}

.icon-clock-circled:before {
    content: '\eee7'
}

.icon-lightbulb-3:before {
    content: '\eee8'
}

.icon-lightbulb-alt:before {
    content: '\eee9'
}

.icon-block-4:before {
    content: '\eeea'
}

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

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

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

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

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

.icon-move-3:before {
    content: '\eef0'
}

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

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

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

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

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

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

.icon-down-6:before {
    content: '\eef7'
}

.icon-left-5:before {
    content: '\eef8'
}

.icon-right-5:before {
    content: '\eef9'
}

.icon-up-6:before {
    content: '\eefa'
}

.icon-down-circled-2:before {
    content: '\eefb'
}

.icon-left-circled-2:before {
    content: '\eefc'
}

.icon-right-circled-2:before {
    content: '\eefd'
}

.icon-up-circled-2:before {
    content: '\eefe'
}

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

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

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

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

.icon-cw-5:before {
    content: '\ef03'
}

.icon-cw-circled:before {
    content: '\ef04'
}

.icon-arrows-cw-3:before {
    content: '\ef05'
}

.icon-shuffle-4:before {
    content: '\ef06'
}

.icon-play-5:before {
    content: '\ef07'
}

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

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

.icon-stop-6:before {
    content: '\ef0a'
}

.icon-stop-circled:before {
    content: '\ef0b'
}

.icon-pause-5:before {
    content: '\ef0c'
}

.icon-pause-circled:before {
    content: '\ef0d'
}

.icon-record-2:before {
    content: '\ef0e'
}

.icon-eject-3:before {
    content: '\ef0f'
}

.icon-backward:before {
    content: '\ef10'
}

.icon-backward-circled:before {
    content: '\ef11'
}

.icon-fast-backward-2:before {
    content: '\ef12'
}

.icon-fast-forward-2:before {
    content: '\ef13'
}

.icon-forward-3:before {
    content: '\ef14'
}

.icon-forward-circled:before {
    content: '\ef15'
}

.icon-step-backward:before {
    content: '\ef16'
}

.icon-step-forward:before {
    content: '\ef17'
}

.icon-target-5:before {
    content: '\ef18'
}

.icon-signal-5:before {
    content: '\ef19'
}

.icon-desktop-3:before {
    content: '\ef1a'
}

.icon-desktop-circled:before {
    content: '\ef1b'
}

.icon-laptop-2:before {
    content: '\ef1c'
}

.icon-laptop-circled:before {
    content: '\ef1d'
}

.icon-network-1:before {
    content: '\ef1e'
}

.icon-inbox-4:before {
    content: '\ef1f'
}

.icon-inbox-circled:before {
    content: '\ef20'
}

.icon-inbox-alt:before {
    content: '\ef21'
}

.icon-globe-6:before {
    content: '\ef22'
}

.icon-globe-alt-1:before {
    content: '\ef23'
}

.icon-cloud-6:before {
    content: '\ef24'
}

.icon-cloud-circled:before {
    content: '\ef25'
}

.icon-flight-2:before {
    content: '\ef26'
}

.icon-leaf-3:before {
    content: '\ef27'
}

.icon-font-1:before {
    content: '\ef28'
}

.icon-fontsize-1:before {
    content: '\ef29'
}

.icon-bold-1:before {
    content: '\ef2a'
}

.icon-italic-1:before {
    content: '\ef2b'
}

.icon-text-height-1:before {
    content: '\ef2c'
}

.icon-text-width-1:before {
    content: '\ef2d'
}

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

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

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

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

.icon-list-3:before {
    content: '\ef32'
}

.icon-indent-left-1:before {
    content: '\ef33'
}

.icon-indent-right-1:before {
    content: '\ef34'
}

.icon-briefcase-3:before {
    content: '\ef35'
}

.icon-off-1:before {
    content: '\ef36'
}

.icon-road-1:before {
    content: '\ef37'
}

.icon-qrcode-1:before {
    content: '\ef38'
}

.icon-barcode-1:before {
    content: '\ef39'
}

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

.icon-book-4:before {
    content: '\ef3b'
}

.icon-adjust-1:before {
    content: '\ef3c'
}

.icon-tint-1:before {
    content: '\ef3d'
}

.icon-check-3:before {
    content: '\ef3e'
}

.icon-check-empty-1:before {
    content: '\ef3f'
}

.icon-asterisk-1:before {
    content: '\ef40'
}

.icon-gift-2:before {
    content: '\ef41'
}

.icon-fire-3:before {
    content: '\ef42'
}

.icon-magnet-2:before {
    content: '\ef43'
}

.icon-chart-2:before {
    content: '\ef44'
}

.icon-chart-circled:before {
    content: '\ef45'
}

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

.icon-megaphone-3:before {
    content: '\ef47'
}

.icon-clipboard-2:before {
    content: '\ef48'
}

.icon-hdd-2:before {
    content: '\ef49'
}

.icon-key-5:before {
    content: '\ef4a'
}

.icon-certificate-2:before {
    content: '\ef4b'
}

.icon-tasks-1:before {
    content: '\ef4c'
}

.icon-filter-1:before {
    content: '\ef4d'
}

.icon-gauge-2:before {
    content: '\ef4e'
}

.icon-smiley:before {
    content: '\ef4f'
}

.icon-smiley-circled:before {
    content: '\ef50'
}

.icon-address-book:before {
    content: '\ef51'
}

.icon-address-book-alt:before {
    content: '\ef52'
}

.icon-asl:before {
    content: '\ef53'
}

.icon-glasses:before {
    content: '\ef54'
}

.icon-hearing-impaired:before {
    content: '\ef55'
}

.icon-iphone-home:before {
    content: '\ef56'
}

.icon-person:before {
    content: '\ef57'
}

.icon-adult:before {
    content: '\ef58'
}

.icon-child:before {
    content: '\ef59'
}

.icon-blind:before {
    content: '\ef5a'
}

.icon-guidedog:before {
    content: '\ef5b'
}

.icon-accessibility:before {
    content: '\ef5c'
}

.icon-universal-access:before {
    content: '\ef5d'
}

.icon-male-2:before {
    content: '\ef5e'
}

.icon-female-2:before {
    content: '\ef5f'
}

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

.icon-blogger-2:before {
    content: '\ef61'
}

.icon-cc-2:before {
    content: '\ef62'
}

.icon-css:before {
    content: '\ef63'
}

.icon-delicious-1:before {
    content: '\ef64'
}

.icon-deviantart-1:before {
    content: '\ef65'
}

.icon-digg-1:before {
    content: '\ef66'
}

.icon-dribbble-5:before {
    content: '\ef67'
}

.icon-facebook-7:before {
    content: '\ef68'
}

.icon-flickr-4:before {
    content: '\ef69'
}

.icon-foursquare-2:before {
    content: '\ef6a'
}

.icon-friendfeed-1:before {
    content: '\ef6b'
}

.icon-friendfeed-rect-1:before {
    content: '\ef6c'
}

.icon-github-6:before {
    content: '\ef6d'
}

.icon-github-text-1:before {
    content: '\ef6e'
}

.icon-googleplus:before {
    content: '\ef6f'
}

.icon-instagram-4:before {
    content: '\ef70'
}

.icon-linkedin-6:before {
    content: '\ef71'
}

.icon-path:before {
    content: '\ef72'
}

.icon-picasa-2:before {
    content: '\ef73'
}

.icon-pinterest-3:before {
    content: '\ef74'
}

.icon-reddit-1:before {
    content: '\ef75'
}

.icon-skype-5:before {
    content: '\ef76'
}

.icon-slideshare:before {
    content: '\ef77'
}

.icon-stackoverflow-2:before {
    content: '\ef78'
}

.icon-stumbleupon-2:before {
    content: '\ef79'
}

.icon-twitter-7:before {
    content: '\ef7a'
}

.icon-tumblr-4:before {
    content: '\ef7b'
}

.icon-vimeo-4:before {
    content: '\ef7c'
}

.icon-vkontakte-2:before {
    content: '\ef7d'
}

.icon-w3c-1:before {
    content: '\ef7e'
}

.icon-wordpress-2:before {
    content: '\ef7f'
}

.icon-youtube-3:before {
    content: '\ef80'
}

.icon-music-3:before {
    content: '\ee42'
}

.icon-search-7:before {
    content: '\ee43'
}

.icon-mail-6:before {
    content: '\ee44'
}

.icon-heart-7:before {
    content: '\ee45'
}

.icon-star-7:before {
    content: '\ee46'
}

.icon-user-7:before {
    content: '\ee47'
}

.icon-videocam-4:before {
    content: '\ee48'
}

.icon-camera-6:before {
    content: '\ee49'
}

.icon-photo:before {
    content: '\ee4a'
}

.icon-attach-6:before {
    content: '\ee5c'
}

.icon-lock-7:before {
    content: '\ee5d'
}

.icon-eye-6:before {
    content: '\ee5e'
}

.icon-tag-6:before {
    content: '\ee5f'
}

.icon-thumbs-up-4:before {
    content: '\ee60'
}

.icon-pencil-6:before {
    content: '\ee61'
}

.icon-comment-6:before {
    content: '\ee62'
}

.icon-location-6:before {
    content: '\ee63'
}

.icon-cup-1:before {
    content: '\ee64'
}

.icon-trash-7:before {
    content: '\ee65'
}

.icon-doc-6:before {
    content: '\ee66'
}

.icon-note-1:before {
    content: '\ee4b'
}

.icon-cog-5:before {
    content: '\ee4c'
}

.icon-params:before {
    content: '\ee4d'
}

.icon-calendar-7:before {
    content: '\ee4e'
}

.icon-sound-1:before {
    content: '\ee4f'
}

.icon-clock-7:before {
    content: '\ee50'
}

.icon-lightbulb-2:before {
    content: '\ee51'
}

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

.icon-desktop-2:before {
    content: '\ee53'
}

.icon-mobile-6:before {
    content: '\ee67'
}

.icon-cd-3:before {
    content: '\ee68'
}

.icon-inbox-3:before {
    content: '\ee69'
}

.icon-globe-5:before {
    content: '\ee6a'
}

.icon-cloud-5:before {
    content: '\ee6b'
}

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

.icon-fire-2:before {
    content: '\ee6d'
}

.icon-graduation-cap-1:before {
    content: '\ee6e'
}

.icon-megaphone-2:before {
    content: '\ee6f'
}

.icon-database-2:before {
    content: '\ee70'
}

.icon-key-4:before {
    content: '\ee71'
}

.icon-beaker-1:before {
    content: '\ee54'
}

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

.icon-money-2:before {
    content: '\ee56'
}

.icon-food-1:before {
    content: '\ee57'
}

.icon-shop-1:before {
    content: '\ee58'
}

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

.icon-t-shirt:before {
    content: '\ee5a'
}

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

.icon-search-6:before {
    content: '\ee33'
}

.icon-heart-6:before {
    content: '\ee26'
}

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

.icon-star-6:before {
    content: '\ee29'
}

.icon-user-6:before {
    content: '\ee28'
}

.icon-video-4:before {
    content: '\ee2a'
}

.icon-picture-4:before {
    content: '\ee2b'
}

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

.icon-th-4:before {
    content: '\ef88'
}

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

.icon-ok-5:before {
    content: '\ee1c'
}

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

.icon-cancel-6:before {
    content: '\ee1e'
}

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

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

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

.icon-link-5:before {
    content: '\ee22'
}

.icon-attach-5:before {
    content: '\ee23'
}

.icon-lock-6:before {
    content: '\ee24'
}

.icon-lock-open-6:before {
    content: '\ee32'
}

.icon-tag-5:before {
    content: '\ee31'
}

.icon-reply-4:before {
    content: '\ee30'
}

.icon-reply-all-2:before {
    content: '\ee25'
}

.icon-code-3:before {
    content: '\ee2f'
}

.icon-retweet-3:before {
    content: '\ee2e'
}

.icon-comment-5:before {
    content: '\ee2d'
}

.icon-location-8:before {
    content: '\ef82'
}

.icon-folder-6:before {
    content: '\ef83'
}

.icon-archive-2:before {
    content: '\ef84'
}

.icon-cog-7:before {
    content: '\ef85'
}

.icon-logout-3:before {
    content: '\ef86'
}

.icon-clock-6:before {
    content: '\ee34'
}

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

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

.icon-popup-5:before {
    content: '\ef81'
}

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

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

.icon-down-circle-1:before {
    content: '\ee39'
}

.icon-left-circle-1:before {
    content: '\ee3a'
}

.icon-right-circle-1:before {
    content: '\ee3b'
}

.icon-up-circle-1:before {
    content: '\ee3c'
}

.icon-cw-circle:before {
    content: '\ee3d'
}

.icon-arrows-cw-2:before {
    content: '\ee3e'
}

.icon-updown-circle:before {
    content: '\ee3f'
}

.icon-target-4:before {
    content: '\ee40'
}

.icon-signal-4:before {
    content: '\ee41'
}

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

.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-o-keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-ms-keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@font-face {
    font-family: icon_set_1;
    src: url(fontello/font/icon_set_1.eot?55361665);
    src: url(fontello/font/icon_set_1.eot?55361665#iefix) format("embedded-opentype"), url(fontello/font/icon_set_1.woff?55361665) format("woff"), url(fontello/font/icon_set_1.ttf?55361665) format("truetype"), url(fontello/font/icon_set_1.svg?55361665#icon_set_1) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=icon_set_1_]:before,
[class^=icon_set_1_]:before {
    font-family: icon_set_1;
    font-style: normal;
    font-weight: 400;
    speak: none;
    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
}

.icon_set_1_icon-1:before {
    content: '\21'
}

.icon_set_1_icon-2:before {
    content: '\22'
}

.icon_set_1_icon-3:before {
    content: '\23'
}

.icon_set_1_icon-4:before {
    content: '\24'
}

.icon_set_1_icon-5:before {
    content: '\25'
}

.icon_set_1_icon-6:before {
    content: '\26'
}

.icon_set_1_icon-7:before {
    content: '\27'
}

.icon_set_1_icon-8:before {
    content: '\28'
}

.icon_set_1_icon-9:before {
    content: '\29'
}

.icon_set_1_icon-10:before {
    content: '\2a'
}

.icon_set_1_icon-11:before {
    content: '\2b'
}

.icon_set_1_icon-12:before {
    content: '\2c'
}

.icon_set_1_icon-13:before {
    content: '\2d'
}

.icon_set_1_icon-14:before {
    content: '\2e'
}

.icon_set_1_icon-15:before {
    content: '\2f'
}

.icon_set_1_icon-16:before {
    content: '\30'
}

.icon_set_1_icon-17:before {
    content: '\31'
}

.icon_set_1_icon-18:before {
    content: '\32'
}

.icon_set_1_icon-19:before {
    content: '\33'
}

.icon_set_1_icon-20:before {
    content: '\34'
}

.icon_set_1_icon-21:before {
    content: '\3a'
}

.icon_set_1_icon-22:before {
    content: '\35'
}

.icon_set_1_icon-23:before {
    content: '\36'
}

.icon_set_1_icon-24:before {
    content: '\37'
}

.icon_set_1_icon-25:before {
    content: '\38'
}

.icon_set_1_icon-26:before {
    content: '\39'
}

.icon_set_1_icon-27:before {
    content: '\3a';
    content: \3b
}

.icon_set_1_icon-28:before {
    content: '\3c'
}

.icon_set_1_icon-29:before {
    content: '\3d'
}

.icon_set_1_icon-30:before {
    content: '\3e'
}

.icon_set_1_icon-31:before {
    content: '\3f'
}

.icon_set_1_icon-32:before {
    content: '\40'
}

.icon_set_1_icon-33:before {
    content: '\41'
}

.icon_set_1_icon-34:before {
    content: '\42'
}

.icon_set_1_icon-35:before {
    content: '\43'
}

.icon_set_1_icon-36:before {
    content: '\44'
}

.icon_set_1_icon-37:before {
    content: '\45'
}

.icon_set_1_icon-38:before {
    content: '\46'
}

.icon_set_1_icon-39:before {
    content: '\47'
}

.icon_set_1_icon-40:before {
    content: '\48'
}

.icon_set_1_icon-41:before {
    content: '\49'
}

.icon_set_1_icon-42:before {
    content: '\4a'
}

.icon_set_1_icon-43:before {
    content: '\4b'
}

.icon_set_1_icon-44:before {
    content: '\4c'
}

.icon_set_1_icon-45:before {
    content: '\4d'
}

.icon_set_1_icon-46:before {
    content: '\4e'
}

.icon_set_1_icon-47:before {
    content: '\4f'
}

.icon_set_1_icon-48:before {
    content: '\50'
}

.icon_set_1_icon-49:before {
    content: '\51'
}

.icon_set_1_icon-50:before {
    content: '\52'
}

.icon_set_1_icon-51:before {
    content: '\53'
}

.icon_set_1_icon-52:before {
    content: '\54'
}

.icon_set_1_icon-53:before {
    content: '\55'
}

.icon_set_1_icon-54:before {
    content: '\56'
}

.icon_set_1_icon-55:before {
    content: '\57'
}

.icon_set_1_icon-56:before {
    content: '\58'
}

.icon_set_1_icon-57:before {
    content: '\59'
}

.icon_set_1_icon-58:before {
    content: '\5a'
}

.icon_set_1_icon-59:before {
    content: '\5b'
}

.icon_set_1_icon-60:before {
    content: '\5c'
}

.icon_set_1_icon-61:before {
    content: '\5d'
}

.icon_set_1_icon-62:before {
    content: '\5e'
}

.icon_set_1_icon-63:before {
    content: '\5f'
}

.icon_set_1_icon-64:before {
    content: '\60'
}

.icon_set_1_icon-65:before {
    content: '\61'
}

.icon_set_1_icon-66:before {
    content: '\62'
}

.icon_set_1_icon-67:before {
    content: '\63'
}

.icon_set_1_icon-68:before {
    content: '\64'
}

.icon_set_1_icon-69:before {
    content: '\65'
}

.icon_set_1_icon-70:before {
    content: '\66'
}

.icon_set_1_icon-71:before {
    content: '\67'
}

.icon_set_1_icon-72:before {
    content: '\68'
}

.icon_set_1_icon-73:before {
    content: '\69'
}

.icon_set_1_icon-74:before {
    content: '\6a'
}

.icon_set_1_icon-75:before {
    content: '\6b'
}

.icon_set_1_icon-76:before {
    content: '\6c'
}

.icon_set_1_icon-77:before {
    content: '\6d'
}

.icon_set_1_icon-78:before {
    content: '\6e'
}

.icon_set_1_icon-79:before {
    content: '\6f'
}

.icon_set_1_icon-80:before {
    content: '\70'
}

.icon_set_1_icon-81:before {
    content: '\71'
}

.icon_set_1_icon-82:before {
    content: '\72'
}

.icon_set_1_icon-83:before {
    content: '\73'
}

.icon_set_1_icon-84:before {
    content: '\74'
}

.icon_set_1_icon-85:before {
    content: '\75'
}

.icon_set_1_icon-86:before {
    content: '\76'
}

.icon_set_1_icon-87:before {
    content: '\77'
}

.icon_set_1_icon-88:before {
    content: '\78'
}

.icon_set_1_icon-89:before {
    content: '\79'
}

.icon_set_1_icon-90:before {
    content: '\7a'
}

.icon_set_1_icon-91:before {
    content: '\7b'
}

.icon_set_1_icon-92:before {
    content: '\7c'
}

.icon_set_1_icon-93:before {
    content: '\7d'
}

.icon_set_1_icon-94:before {
    content: '\7e'
}

.icon_set_1_icon-95:before {
    content: '\e800'
}

.icon_set_1_icon-96:before {
    content: '\e801'
}

.icon_set_1_icon-97:before {
    content: '\e802'
}

.icon_set_1_icon-98:before {
    content: '\e803'
}

.icon_set_1_icon-99:before {
    content: '\e804'
}

.icon_set_1_icon-100:before {
    content: '\e805'
}

@font-face {
    font-family: icon_set_2;
    src: url(fontello/font/icon_set_2.eot?40207016);
    src: url(fontello/font/icon_set_2.eot?40207016#iefix) format("embedded-opentype"), url(fontello/font/icon_set_2.woff?40207016) format("woff"), url(fontello/font/icon_set_2.ttf?40207016) format("truetype"), url(fontello/font/icon_set_2.svg?40207016#icon_set_2) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon_set_2_"]:before,
[class^=icon_set_2_]:before {
    font-family: icon_set_2;
    font-style: normal;
    font-weight: 400;
    speak: none;
    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_set_2_icon-102:before {
    content: '󨀃'
}

.icon_set_2_icon-103:before {
    content: '󨀓'
}

.icon_set_2_icon-105:before {
    content: '󨀳'
}

.icon_set_2_icon-106:before {
    content: '󨁃'
}

.icon_set_2_icon-107:before {
    content: '󨁓'
}

.icon_set_2_icon-108:before {
    content: '󨁣'
}

.icon_set_2_icon-109:before {
    content: '󨁳'
}

.icon_set_2_icon-110:before {
    content: '󨂃'
}

.icon_set_2_icon-111:before {
    content: '󨂓'
}

.icon_set_2_icon-112:before {
    content: '󨂣'
}

.icon_set_2_icon-104:before {
    content: '󨂳'
}

.icon_set_2_icon-114:before {
    content: '󨃃'
}

.icon_set_2_icon-115:before {
    content: '󨃓'
}

.icon_set_2_icon-116:before {
    content: '󨃣'
}

.icon_set_2_icon-117:before {
    content: '󨃳'
}

.icon_set_2_icon-118:before {
    content: '󨄃'
}

@font-face {
    font-family: Glyphter;
    src: url(icon_restaurant/fonts/Glyphter.eot);
    src: url(icon_restaurant/fonts/Glyphter.eot?#iefix) format("embedded-opentype"), url(icon_restaurant/fonts/Glyphter.woff) format("woff"), url(icon_restaurant/fonts/Glyphter.ttf) format("truetype"), url(icon_restaurant/fonts/Glyphter.svg#Glyphter) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=icon_set_3]:before {
    display: inline-block;
    font-family: Glyphter;
    font-style: normal;
    font-weight: 400;
    margin-left: 5px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon_set_3_restaurant-1:before {
    content: '\0041'
}

.icon_set_3_restaurant-2:before {
    content: '\0042'
}

.icon_set_3_restaurant-3:before {
    content: '\0043'
}

.icon_set_3_restaurant-4:before {
    content: '\0044'
}

.icon_set_3_restaurant-5:before {
    content: '\0045'
}

.icon_set_3_restaurant-6:before {
    content: '\0046'
}

.icon_set_3_restaurant-7:before {
    content: '\0047'
}

.icon_set_3_restaurant-8:before {
    content: '\0048'
}

.icon_set_3_restaurant-9:before {
    content: '\0049'
}

.icon_set_3_restaurant-10:before {
    content: '\004A'
}

.icon_set_3_restaurant-11:before {
    content: '\004B'
}

@font-face {
    font-family: Pe-icon-7-stroke;
    src: url(new_icons/font/Pe-icon-7-stroke.eot?d7yf1v);
    src: url(new_icons/font/Pe-icon-7-stroke.eot?#iefixd7yf1v) format("embedded-opentype"), url(new_icons/font/Pe-icon-7-stroke.woff?d7yf1v) format("woff"), url(new_icons/font/Pe-icon-7-stroke.ttf?d7yf1v) format("truetype"), url(new_icons/font/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" pe-7s-"],
[class^=pe-7s-] {
    display: inline-block;
    font-family: Pe-icon-7-stroke;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pe-7s-album:before {
    content: "\e6aa"
}

.pe-7s-arc:before {
    content: "\e6ab"
}

.pe-7s-back-2:before {
    content: "\e6ac"
}

.pe-7s-bandaid:before {
    content: "\e6ad"
}

.pe-7s-car:before {
    content: "\e6ae"
}

.pe-7s-diamond:before {
    content: "\e6af"
}

.pe-7s-door-lock:before {
    content: "\e6b0"
}

.pe-7s-eyedropper:before {
    content: "\e6b1"
}

.pe-7s-female:before {
    content: "\e6b2"
}

.pe-7s-gym:before {
    content: "\e6b3"
}

.pe-7s-hammer:before {
    content: "\e6b4"
}

.pe-7s-headphones:before {
    content: "\e6b5"
}

.pe-7s-helm:before {
    content: "\e6b6"
}

.pe-7s-hourglass:before {
    content: "\e6b7"
}

.pe-7s-leaf:before {
    content: "\e6b8"
}

.pe-7s-magic-wand:before {
    content: "\e6b9"
}

.pe-7s-male:before {
    content: "\e6ba"
}

.pe-7s-map-2:before {
    content: "\e6bb"
}

.pe-7s-next-2:before {
    content: "\e6bc"
}

.pe-7s-paint-bucket:before {
    content: "\e6bd"
}

.pe-7s-pendrive:before {
    content: "\e6be"
}

.pe-7s-photo:before {
    content: "\e6bf"
}

.pe-7s-piggy:before {
    content: "\e6c0"
}

.pe-7s-plugin:before {
    content: "\e6c1"
}

.pe-7s-refresh-2:before {
    content: "\e6c2"
}

.pe-7s-rocket:before {
    content: "\e6c3"
}

.pe-7s-settings:before {
    content: "\e6c4"
}

.pe-7s-shield:before {
    content: "\e6c5"
}

.pe-7s-smile:before {
    content: "\e6c6"
}

.pe-7s-usb:before {
    content: "\e6c7"
}

.pe-7s-vector:before {
    content: "\e6c8"
}

.pe-7s-wine:before {
    content: "\e6c9"
}

.pe-7s-cloud-upload:before {
    content: "\e68a"
}

.pe-7s-cash:before {
    content: "\e68c"
}

.pe-7s-close:before {
    content: "\e680"
}

.pe-7s-bluetooth:before {
    content: "\e68d"
}

.pe-7s-cloud-download:before {
    content: "\e68b"
}

.pe-7s-way:before {
    content: "\e68e"
}

.pe-7s-close-circle:before {
    content: "\e681"
}

.pe-7s-id:before {
    content: "\e68f"
}

.pe-7s-angle-up:before {
    content: "\e682"
}

.pe-7s-wristwatch:before {
    content: "\e690"
}

.pe-7s-angle-up-circle:before {
    content: "\e683"
}

.pe-7s-world:before {
    content: "\e691"
}

.pe-7s-angle-right:before {
    content: "\e684"
}

.pe-7s-volume:before {
    content: "\e692"
}

.pe-7s-angle-right-circle:before {
    content: "\e685"
}

.pe-7s-users:before {
    content: "\e693"
}

.pe-7s-angle-left:before {
    content: "\e686"
}

.pe-7s-user-female:before {
    content: "\e694"
}

.pe-7s-angle-left-circle:before {
    content: "\e687"
}

.pe-7s-up-arrow:before {
    content: "\e695"
}

.pe-7s-angle-down:before {
    content: "\e688"
}

.pe-7s-switch:before {
    content: "\e696"
}

.pe-7s-angle-down-circle:before {
    content: "\e689"
}

.pe-7s-scissors:before {
    content: "\e697"
}

.pe-7s-wallet:before {
    content: "\e600"
}

.pe-7s-safe:before {
    content: "\e698"
}

.pe-7s-volume2:before {
    content: "\e601"
}

.pe-7s-volume1:before {
    content: "\e602"
}

.pe-7s-voicemail:before {
    content: "\e603"
}

.pe-7s-video:before {
    content: "\e604"
}

.pe-7s-user:before {
    content: "\e605"
}

.pe-7s-upload:before {
    content: "\e606"
}

.pe-7s-unlock:before {
    content: "\e607"
}

.pe-7s-umbrella:before {
    content: "\e608"
}

.pe-7s-trash:before {
    content: "\e609"
}

.pe-7s-tools:before {
    content: "\e60a"
}

.pe-7s-timer:before {
    content: "\e60b"
}

.pe-7s-ticket:before {
    content: "\e60c"
}

.pe-7s-target:before {
    content: "\e60d"
}

.pe-7s-sun:before {
    content: "\e60e"
}

.pe-7s-study:before {
    content: "\e60f"
}

.pe-7s-stopwatch:before {
    content: "\e610"
}

.pe-7s-star:before {
    content: "\e611"
}

.pe-7s-speaker:before {
    content: "\e612"
}

.pe-7s-signal:before {
    content: "\e613"
}

.pe-7s-shuffle:before {
    content: "\e614"
}

.pe-7s-shopbag:before {
    content: "\e615"
}

.pe-7s-share:before {
    content: "\e616"
}

.pe-7s-server:before {
    content: "\e617"
}

.pe-7s-search:before {
    content: "\e618"
}

.pe-7s-film:before {
    content: "\e6a5"
}

.pe-7s-science:before {
    content: "\e619"
}

.pe-7s-disk:before {
    content: "\e6a6"
}

.pe-7s-ribbon:before {
    content: "\e61a"
}

.pe-7s-repeat:before {
    content: "\e61b"
}

.pe-7s-refresh:before {
    content: "\e61c"
}

.pe-7s-add-user:before {
    content: "\e6a9"
}

.pe-7s-refresh-cloud:before {
    content: "\e61d"
}

.pe-7s-paperclip:before {
    content: "\e69c"
}

.pe-7s-radio:before {
    content: "\e61e"
}

.pe-7s-note2:before {
    content: "\e69d"
}

.pe-7s-print:before {
    content: "\e61f"
}

.pe-7s-network:before {
    content: "\e69e"
}

.pe-7s-prev:before {
    content: "\e620"
}

.pe-7s-mute:before {
    content: "\e69f"
}

.pe-7s-power:before {
    content: "\e621"
}

.pe-7s-medal:before {
    content: "\e6a0"
}

.pe-7s-portfolio:before {
    content: "\e622"
}

.pe-7s-like2:before {
    content: "\e6a1"
}

.pe-7s-plus:before {
    content: "\e623"
}

.pe-7s-left-arrow:before {
    content: "\e6a2"
}

.pe-7s-play:before {
    content: "\e624"
}

.pe-7s-key:before {
    content: "\e6a3"
}

.pe-7s-plane:before {
    content: "\e625"
}

.pe-7s-joy:before {
    content: "\e6a4"
}

.pe-7s-photo-gallery:before {
    content: "\e626"
}

.pe-7s-pin:before {
    content: "\e69b"
}

.pe-7s-phone:before {
    content: "\e627"
}

.pe-7s-plug:before {
    content: "\e69a"
}

.pe-7s-pen:before {
    content: "\e628"
}

.pe-7s-right-arrow:before {
    content: "\e699"
}

.pe-7s-paper-plane:before {
    content: "\e629"
}

.pe-7s-delete-user:before {
    content: "\e6a7"
}

.pe-7s-paint:before {
    content: "\e62a"
}

.pe-7s-bottom-arrow:before {
    content: "\e6a8"
}

.pe-7s-notebook:before {
    content: "\e62b"
}

.pe-7s-note:before {
    content: "\e62c"
}

.pe-7s-next:before {
    content: "\e62d"
}

.pe-7s-news-paper:before {
    content: "\e62e"
}

.pe-7s-musiclist:before {
    content: "\e62f"
}

.pe-7s-music:before {
    content: "\e630"
}

.pe-7s-mouse:before {
    content: "\e631"
}

.pe-7s-more:before {
    content: "\e632"
}

.pe-7s-moon:before {
    content: "\e633"
}

.pe-7s-monitor:before {
    content: "\e634"
}

.pe-7s-micro:before {
    content: "\e635"
}

.pe-7s-menu:before {
    content: "\e636"
}

.pe-7s-map:before {
    content: "\e637"
}

.pe-7s-map-marker:before {
    content: "\e638"
}

.pe-7s-mail:before {
    content: "\e639"
}

.pe-7s-mail-open:before {
    content: "\e63a"
}

.pe-7s-mail-open-file:before {
    content: "\e63b"
}

.pe-7s-magnet:before {
    content: "\e63c"
}

.pe-7s-loop:before {
    content: "\e63d"
}

.pe-7s-look:before {
    content: "\e63e"
}

.pe-7s-lock:before {
    content: "\e63f"
}

.pe-7s-lintern:before {
    content: "\e640"
}

.pe-7s-link:before {
    content: "\e641"
}

.pe-7s-like:before {
    content: "\e642"
}

.pe-7s-light:before {
    content: "\e643"
}

.pe-7s-less:before {
    content: "\e644"
}

.pe-7s-keypad:before {
    content: "\e645"
}

.pe-7s-junk:before {
    content: "\e646"
}

.pe-7s-info:before {
    content: "\e647"
}

.pe-7s-home:before {
    content: "\e648"
}

.pe-7s-help2:before {
    content: "\e649"
}

.pe-7s-help1:before {
    content: "\e64a"
}

.pe-7s-graph3:before {
    content: "\e64b"
}

.pe-7s-graph2:before {
    content: "\e64c"
}

.pe-7s-graph1:before {
    content: "\e64d"
}

.pe-7s-graph:before {
    content: "\e64e"
}

.pe-7s-global:before {
    content: "\e64f"
}

.pe-7s-gleam:before {
    content: "\e650"
}

.pe-7s-glasses:before {
    content: "\e651"
}

.pe-7s-gift:before {
    content: "\e652"
}

.pe-7s-folder:before {
    content: "\e653"
}

.pe-7s-flag:before {
    content: "\e654"
}

.pe-7s-filter:before {
    content: "\e655"
}

.pe-7s-file:before {
    content: "\e656"
}

.pe-7s-expand1:before {
    content: "\e657"
}

.pe-7s-exapnd2:before {
    content: "\e658"
}

.pe-7s-edit:before {
    content: "\e659"
}

.pe-7s-drop:before {
    content: "\e65a"
}

.pe-7s-drawer:before {
    content: "\e65b"
}

.pe-7s-download:before {
    content: "\e65c"
}

.pe-7s-display2:before {
    content: "\e65d"
}

.pe-7s-display1:before {
    content: "\e65e"
}

.pe-7s-diskette:before {
    content: "\e65f"
}

.pe-7s-date:before {
    content: "\e660"
}

.pe-7s-cup:before {
    content: "\e661"
}

.pe-7s-culture:before {
    content: "\e662"
}

.pe-7s-crop:before {
    content: "\e663"
}

.pe-7s-credit:before {
    content: "\e664"
}

.pe-7s-copy-file:before {
    content: "\e665"
}

.pe-7s-config:before {
    content: "\e666"
}

.pe-7s-compass:before {
    content: "\e667"
}

.pe-7s-comment:before {
    content: "\e668"
}

.pe-7s-coffee:before {
    content: "\e669"
}

.pe-7s-cloud:before {
    content: "\e66a"
}

.pe-7s-clock:before {
    content: "\e66b"
}

.pe-7s-check:before {
    content: "\e66c"
}

.pe-7s-chat:before {
    content: "\e66d"
}

.pe-7s-cart:before {
    content: "\e66e"
}

.pe-7s-camera:before {
    content: "\e66f"
}

.pe-7s-call:before {
    content: "\e670"
}

.pe-7s-calculator:before {
    content: "\e671"
}

.pe-7s-browser:before {
    content: "\e672"
}

.pe-7s-box2:before {
    content: "\e673"
}

.pe-7s-box1:before {
    content: "\e674"
}

.pe-7s-bookmarks:before {
    content: "\e675"
}

.pe-7s-bicycle:before {
    content: "\e676"
}

.pe-7s-bell:before {
    content: "\e677"
}

.pe-7s-battery:before {
    content: "\e678"
}

.pe-7s-ball:before {
    content: "\e679"
}

.pe-7s-back:before {
    content: "\e67a"
}

.pe-7s-attention:before {
    content: "\e67b"
}

.pe-7s-anchor:before {
    content: "\e67c"
}

.pe-7s-albums:before {
    content: "\e67d"
}

.pe-7s-alarm:before {
    content: "\e67e"
}

.pe-7s-airplay:before {
    content: "\e67f"
}

@font-face {
    font-family: ElegantIcons;
    src: url(new_icons/font/ElegantIcons.eot);
    src: url(new_icons/font/ElegantIcons.eot?#iefix) format("embedded-opentype"), url(new_icons/font/ElegantIcons.woff) format("woff"), url(new_icons/font/ElegantIcons.ttf) format("truetype"), url(new_icons/font/ElegantIcons.svg#ElegantIcons) format("svg");
    font-weight: 400;
    font-style: normal
}

[data-icon]:before {
    font-family: ElegantIcons;
    content: attr(data-icon);
    speak: none;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.arrow-up-down,
.arrow_back,
.arrow_carrot-2down,
.arrow_carrot-2down_alt2,
.arrow_carrot-2dwnn_alt,
.arrow_carrot-2left,
.arrow_carrot-2left_alt,
.arrow_carrot-2left_alt2,
.arrow_carrot-2right,
.arrow_carrot-2right_alt,
.arrow_carrot-2right_alt2,
.arrow_carrot-2up,
.arrow_carrot-2up_alt,
.arrow_carrot-2up_alt2,
.arrow_carrot-down,
.arrow_carrot-down_alt,
.arrow_carrot-down_alt2,
.arrow_carrot-left,
.arrow_carrot-left_alt,
.arrow_carrot-left_alt2,
.arrow_carrot-right,
.arrow_carrot-right_alt,
.arrow_carrot-right_alt2,
.arrow_carrot-up,
.arrow_carrot-up_alt2,
.arrow_carrot_up_alt,
.arrow_condense,
.arrow_condense_alt,
.arrow_down,
.arrow_down_alt,
.arrow_expand,
.arrow_expand_alt,
.arrow_expand_alt2,
.arrow_expand_alt3,
.arrow_left,
.arrow_left-down,
.arrow_left-down_alt,
.arrow_left-right,
.arrow_left-right_alt,
.arrow_left-up,
.arrow_left-up_alt,
.arrow_left_alt,
.arrow_move,
.arrow_right,
.arrow_right-down,
.arrow_right-down_alt,
.arrow_right-up,
.arrow_right-up_alt,
.arrow_right_alt,
.arrow_triangle-down,
.arrow_triangle-down_alt,
.arrow_triangle-down_alt2,
.arrow_triangle-left,
.arrow_triangle-left_alt,
.arrow_triangle-left_alt2,
.arrow_triangle-right,
.arrow_triangle-right_alt,
.arrow_triangle-right_alt2,
.arrow_triangle-up,
.arrow_triangle-up_alt,
.arrow_triangle-up_alt2,
.arrow_up,
.arrow_up-down_alt,
.arrow_up_alt,
.icon_adjust-horiz,
.icon_adjust-vert,
.icon_archive,
.icon_archive_alt,
.icon_bag,
.icon_bag_alt,
.icon_balance,
.icon_blocked,
.icon_book,
.icon_book_alt,
.icon_box-checked,
.icon_box-empty,
.icon_box-selected,
.icon_briefcase,
.icon_briefcase_alt,
.icon_building,
.icon_building_alt,
.icon_calculator_alt,
.icon_calendar,
.icon_calulator,
.icon_camera,
.icon_camera_alt,
.icon_cart,
.icon_cart_alt,
.icon_chat,
.icon_chat_alt,
.icon_check,
.icon_check_alt,
.icon_check_alt2,
.icon_circle-empty,
.icon_circle-slelected,
.icon_clipboard,
.icon_clock,
.icon_clock_alt,
.icon_close,
.icon_close_alt,
.icon_close_alt2,
.icon_cloud,
.icon_cloud-download,
.icon_cloud-download_alt,
.icon_cloud-upload,
.icon_cloud-upload_alt,
.icon_cloud_alt,
.icon_cog,
.icon_cogs,
.icon_comment,
.icon_comment_alt,
.icon_compass,
.icon_compass_alt,
.icon_cone,
.icon_cone_alt,
.icon_contacts,
.icon_contacts_alt,
.icon_creditcard,
.icon_currency,
.icon_currency_alt,
.icon_cursor,
.icon_cursor_alt,
.icon_datareport,
.icon_datareport_alt,
.icon_desktop,
.icon_dislike,
.icon_dislike_alt,
.icon_document,
.icon_document_alt,
.icon_documents,
.icon_documents_alt,
.icon_download,
.icon_drawer,
.icon_drawer_alt,
.icon_drive,
.icon_drive_alt,
.icon_easel,
.icon_easel_alt,
.icon_error-circle,
.icon_error-circle_alt,
.icon_error-oct,
.icon_error-oct_alt,
.icon_error-triangle,
.icon_error-triangle_alt,
.icon_film,
.icon_floppy,
.icon_floppy_alt,
.icon_flowchart,
.icon_flowchart_alt,
.icon_folder,
.icon_folder-add,
.icon_folder-add_alt,
.icon_folder-alt,
.icon_folder-open,
.icon_folder-open_alt,
.icon_folder_download,
.icon_folder_upload,
.icon_genius,
.icon_gift,
.icon_gift_alt,
.icon_globe,
.icon_globe-2,
.icon_globe_alt,
.icon_grid-2x2,
.icon_grid-3x3,
.icon_group,
.icon_headphones,
.icon_heart,
.icon_heart_alt,
.icon_hourglass,
.icon_house,
.icon_house_alt,
.icon_id,
.icon_id-2,
.icon_id-2_alt,
.icon_id_alt,
.icon_image,
.icon_images,
.icon_info,
.icon_info_alt,
.icon_key,
.icon_key_alt,
.icon_laptop,
.icon_lifesaver,
.icon_lightbulb,
.icon_lightbulb_alt,
.icon_like,
.icon_like_alt,
.icon_link,
.icon_link_alt,
.icon_loading,
.icon_lock,
.icon_lock-open,
.icon_lock-open_alt,
.icon_lock_alt,
.icon_mail,
.icon_mail_alt,
.icon_map,
.icon_map_alt,
.icon_menu,
.icon_menu-circle_alt,
.icon_menu-circle_alt2,
.icon_menu-square_alt,
.icon_menu-square_alt2,
.icon_mic,
.icon_mic_alt,
.icon_minus-06,
.icon_minus-box,
.icon_minus_alt,
.icon_minus_alt2,
.icon_mobile,
.icon_mug,
.icon_mug_alt,
.icon_music,
.icon_ol,
.icon_paperclip,
.icon_pause,
.icon_pause_alt,
.icon_pause_alt2,
.icon_pencil,
.icon_pencil-edit,
.icon_pencil-edit_alt,
.icon_pencil_alt,
.icon_pens,
.icon_pens_alt,
.icon_percent,
.icon_percent_alt,
.icon_phone,
.icon_piechart,
.icon_pin,
.icon_pin_alt,
.icon_plus,
.icon_plus-box,
.icon_plus_alt,
.icon_plus_alt2,
.icon_printer,
.icon_printer-alt,
.icon_profile,
.icon_pushpin,
.icon_pushpin_alt,
.icon_puzzle,
.icon_puzzle_alt,
.icon_question,
.icon_question_alt,
.icon_question_alt2,
.icon_quotations,
.icon_quotations_alt,
.icon_quotations_alt2,
.icon_refresh,
.icon_ribbon,
.icon_ribbon_alt,
.icon_rook,
.icon_search,
.icon_search-2,
.icon_search_alt,
.icon_shield,
.icon_shield_alt,
.icon_star,
.icon_star-half,
.icon_star-half_alt,
.icon_star_alt,
.icon_stop,
.icon_stop_alt,
.icon_stop_alt2,
.icon_table,
.icon_tablet,
.icon_tag,
.icon_tag_alt,
.icon_tags,
.icon_tags_alt,
.icon_target,
.icon_tool,
.icon_toolbox,
.icon_toolbox_alt,
.icon_tools,
.icon_trash,
.icon_trash_alt,
.icon_ul,
.icon_upload,
.icon_vol-mute,
.icon_vol-mute_alt,
.icon_volume-high,
.icon_volume-high_alt,
.icon_volume-low,
.icon_volume-low_alt,
.icon_wallet,
.icon_wallet_alt,
.icon_zoom-in,
.icon_zoom-in_alt,
.icon_zoom-out,
.icon_zoom-out_alt,
.social_blogger,
.social_blogger_circle,
.social_blogger_square,
.social_delicious,
.social_delicious_circle,
.social_delicious_square,
.social_deviantart,
.social_deviantart_circle,
.social_deviantart_square,
.social_dribbble,
.social_dribbble_circle,
.social_dribbble_square,
.social_facebook,
.social_facebook_circle,
.social_facebook_square,
.social_flickr,
.social_flickr_circle,
.social_flickr_square,
.social_googledrive,
.social_googledrive_alt2,
.social_googledrive_square,
.social_googleplus,
.social_googleplus_circle,
.social_googleplus_square,
.social_instagram,
.social_instagram_circle,
.social_instagram_square,
.social_linkedin,
.social_linkedin_circle,
.social_linkedin_square,
.social_myspace,
.social_myspace_circle,
.social_myspace_square,
.social_picassa,
.social_picassa_circle,
.social_picassa_square,
.social_pinterest,
.social_pinterest_circle,
.social_pinterest_square,
.social_rss,
.social_rss_circle,
.social_rss_square,
.social_share,
.social_share_circle,
.social_share_square,
.social_skype,
.social_skype_circle,
.social_skype_square,
.social_spotify,
.social_spotify_circle,
.social_spotify_square,
.social_stumbleupon_circle,
.social_stumbleupon_square,
.social_tumbleupon,
.social_tumblr,
.social_tumblr_circle,
.social_tumblr_square,
.social_twitter,
.social_twitter_circle,
.social_twitter_square,
.social_vimeo,
.social_vimeo_circle,
.social_vimeo_square,
.social_wordpress,
.social_wordpress_circle,
.social_wordpress_square,
.social_youtube,
.social_youtube_circle,
.social_youtube_square {
    font-family: ElegantIcons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.arrow_up:before {
    content: "\21"
}

.arrow_down:before {
    content: "\22"
}

.arrow_left:before {
    content: "\23"
}

.arrow_right:before {
    content: "\24"
}

.arrow_left-up:before {
    content: "\25"
}

.arrow_right-up:before {
    content: "\26"
}

.arrow_right-down:before {
    content: "\27"
}

.arrow_left-down:before {
    content: "\28"
}

.arrow-up-down:before {
    content: "\29"
}

.arrow_up-down_alt:before {
    content: "\2a"
}

.arrow_left-right_alt:before {
    content: "\2b"
}

.arrow_left-right:before {
    content: "\2c"
}

.arrow_expand_alt2:before {
    content: "\2d"
}

.arrow_expand_alt:before {
    content: "\2e"
}

.arrow_condense:before {
    content: "\2f"
}

.arrow_expand:before {
    content: "\30"
}

.arrow_move:before {
    content: "\31"
}

.arrow_carrot-up:before {
    content: "\32"
}

.arrow_carrot-down:before {
    content: "\33"
}

.arrow_carrot-left:before {
    content: "\34"
}

.arrow_carrot-right:before {
    content: "\35"
}

.arrow_carrot-2up:before {
    content: "\36"
}

.arrow_carrot-2down:before {
    content: "\37"
}

.arrow_carrot-2left:before {
    content: "\38"
}

.arrow_carrot-2right:before {
    content: "\39"
}

.arrow_carrot-up_alt2:before {
    content: "\3a"
}

.arrow_carrot-down_alt2:before {
    content: "\3b"
}

.arrow_carrot-left_alt2:before {
    content: "\3c"
}

.arrow_carrot-right_alt2:before {
    content: "\3d"
}

.arrow_carrot-2up_alt2:before {
    content: "\3e"
}

.arrow_carrot-2down_alt2:before {
    content: "\3f"
}

.arrow_carrot-2left_alt2:before {
    content: "\40"
}

.arrow_carrot-2right_alt2:before {
    content: "\41"
}

.arrow_triangle-up:before {
    content: "\42"
}

.arrow_triangle-down:before {
    content: "\43"
}

.arrow_triangle-left:before {
    content: "\44"
}

.arrow_triangle-right:before {
    content: "\45"
}

.arrow_triangle-up_alt2:before {
    content: "\46"
}

.arrow_triangle-down_alt2:before {
    content: "\47"
}

.arrow_triangle-left_alt2:before {
    content: "\48"
}

.arrow_triangle-right_alt2:before {
    content: "\49"
}

.arrow_back:before {
    content: "\4a"
}

.icon_minus-06:before {
    content: "\4b"
}

.icon_plus:before {
    content: "\4c"
}

.icon_close:before {
    content: "\4d"
}

.icon_check:before {
    content: "\4e"
}

.icon_minus_alt2:before {
    content: "\4f"
}

.icon_plus_alt2:before {
    content: "\50"
}

.icon_close_alt2:before {
    content: "\51"
}

.icon_check_alt2:before {
    content: "\52"
}

.icon_zoom-out_alt:before {
    content: "\53"
}

.icon_zoom-in_alt:before {
    content: "\54"
}

.icon_search:before {
    content: "\55"
}

.icon_box-empty:before {
    content: "\56"
}

.icon_box-selected:before {
    content: "\57"
}

.icon_minus-box:before {
    content: "\58"
}

.icon_plus-box:before {
    content: "\59"
}

.icon_box-checked:before {
    content: "\5a"
}

.icon_circle-empty:before {
    content: "\5b"
}

.icon_circle-slelected:before {
    content: "\5c"
}

.icon_stop_alt2:before {
    content: "\5d"
}

.icon_stop:before {
    content: "\5e"
}

.icon_pause_alt2:before {
    content: "\5f"
}

.icon_pause:before {
    content: "\60"
}

.icon_menu:before {
    content: "\61"
}

.icon_menu-square_alt2:before {
    content: "\62"
}

.icon_menu-circle_alt2:before {
    content: "\63"
}

.icon_ul:before {
    content: "\64"
}

.icon_ol:before {
    content: "\65"
}

.icon_adjust-horiz:before {
    content: "\66"
}

.icon_adjust-vert:before {
    content: "\67"
}

.icon_document_alt:before {
    content: "\68"
}

.icon_documents_alt:before {
    content: "\69"
}

.icon_pencil:before {
    content: "\6a"
}

.icon_pencil-edit_alt:before {
    content: "\6b"
}

.icon_pencil-edit:before {
    content: "\6c"
}

.icon_folder-alt:before {
    content: "\6d"
}

.icon_folder-open_alt:before {
    content: "\6e"
}

.icon_folder-add_alt:before {
    content: "\6f"
}

.icon_info_alt:before {
    content: "\70"
}

.icon_error-oct_alt:before {
    content: "\71"
}

.icon_error-circle_alt:before {
    content: "\72"
}

.icon_error-triangle_alt:before {
    content: "\73"
}

.icon_question_alt2:before {
    content: "\74"
}

.icon_question:before {
    content: "\75"
}

.icon_comment_alt:before {
    content: "\76"
}

.icon_chat_alt:before {
    content: "\77"
}

.icon_vol-mute_alt:before {
    content: "\78"
}

.icon_volume-low_alt:before {
    content: "\79"
}

.icon_volume-high_alt:before {
    content: "\7a"
}

.icon_quotations:before {
    content: "\7b"
}

.icon_quotations_alt2:before {
    content: "\7c"
}

.icon_clock_alt:before {
    content: "\7d"
}

.icon_lock_alt:before {
    content: "\7e"
}

.icon_lock-open_alt:before {
    content: "\e000"
}

.icon_key_alt:before {
    content: "\e001"
}

.icon_cloud_alt:before {
    content: "\e002"
}

.icon_cloud-upload_alt:before {
    content: "\e003"
}

.icon_cloud-download_alt:before {
    content: "\e004"
}

.icon_image:before {
    content: "\e005"
}

.icon_images:before {
    content: "\e006"
}

.icon_lightbulb_alt:before {
    content: "\e007"
}

.icon_gift_alt:before {
    content: "\e008"
}

.icon_house_alt:before {
    content: "\e009"
}

.icon_genius:before {
    content: "\e00a"
}

.icon_mobile:before {
    content: "\e00b"
}

.icon_tablet:before {
    content: "\e00c"
}

.icon_laptop:before {
    content: "\e00d"
}

.icon_desktop:before {
    content: "\e00e"
}

.icon_camera_alt:before {
    content: "\e00f"
}

.icon_mail_alt:before {
    content: "\e010"
}

.icon_cone_alt:before {
    content: "\e011"
}

.icon_ribbon_alt:before {
    content: "\e012"
}

.icon_bag_alt:before {
    content: "\e013"
}

.icon_creditcard:before {
    content: "\e014"
}

.icon_cart_alt:before {
    content: "\e015"
}

.icon_paperclip:before {
    content: "\e016"
}

.icon_tag_alt:before {
    content: "\e017"
}

.icon_tags_alt:before {
    content: "\e018"
}

.icon_trash_alt:before {
    content: "\e019"
}

.icon_cursor_alt:before {
    content: "\e01a"
}

.icon_mic_alt:before {
    content: "\e01b"
}

.icon_compass_alt:before {
    content: "\e01c"
}

.icon_pin_alt:before {
    content: "\e01d"
}

.icon_pushpin_alt:before {
    content: "\e01e"
}

.icon_map_alt:before {
    content: "\e01f"
}

.icon_drawer_alt:before {
    content: "\e020"
}

.icon_toolbox_alt:before {
    content: "\e021"
}

.icon_book_alt:before {
    content: "\e022"
}

.icon_calendar:before {
    content: "\e023"
}

.icon_film:before {
    content: "\e024"
}

.icon_table:before {
    content: "\e025"
}

.icon_contacts_alt:before {
    content: "\e026"
}

.icon_headphones:before {
    content: "\e027"
}

.icon_lifesaver:before {
    content: "\e028"
}

.icon_piechart:before {
    content: "\e029"
}

.icon_refresh:before {
    content: "\e02a"
}

.icon_link_alt:before {
    content: "\e02b"
}

.icon_link:before {
    content: "\e02c"
}

.icon_loading:before {
    content: "\e02d"
}

.icon_blocked:before {
    content: "\e02e"
}

.icon_archive_alt:before {
    content: "\e02f"
}

.icon_heart_alt:before {
    content: "\e030"
}

.icon_star_alt:before {
    content: "\e031"
}

.icon_star-half_alt:before {
    content: "\e032"
}

.icon_star:before {
    content: "\e033"
}

.icon_star-half:before {
    content: "\e034"
}

.icon_tools:before {
    content: "\e035"
}

.icon_tool:before {
    content: "\e036"
}

.icon_cog:before {
    content: "\e037"
}

.icon_cogs:before {
    content: "\e038"
}

.arrow_up_alt:before {
    content: "\e039"
}

.arrow_down_alt:before {
    content: "\e03a"
}

.arrow_left_alt:before {
    content: "\e03b"
}

.arrow_right_alt:before {
    content: "\e03c"
}

.arrow_left-up_alt:before {
    content: "\e03d"
}

.arrow_right-up_alt:before {
    content: "\e03e"
}

.arrow_right-down_alt:before {
    content: "\e03f"
}

.arrow_left-down_alt:before {
    content: "\e040"
}

.arrow_condense_alt:before {
    content: "\e041"
}

.arrow_expand_alt3:before {
    content: "\e042"
}

.arrow_carrot_up_alt:before {
    content: "\e043"
}

.arrow_carrot-down_alt:before {
    content: "\e044"
}

.arrow_carrot-left_alt:before {
    content: "\e045"
}

.arrow_carrot-right_alt:before {
    content: "\e046"
}

.arrow_carrot-2up_alt:before {
    content: "\e047"
}

.arrow_carrot-2dwnn_alt:before {
    content: "\e048"
}

.arrow_carrot-2left_alt:before {
    content: "\e049"
}

.arrow_carrot-2right_alt:before {
    content: "\e04a"
}

.arrow_triangle-up_alt:before {
    content: "\e04b"
}

.arrow_triangle-down_alt:before {
    content: "\e04c"
}

.arrow_triangle-left_alt:before {
    content: "\e04d"
}

.arrow_triangle-right_alt:before {
    content: "\e04e"
}

.icon_minus_alt:before {
    content: "\e04f"
}

.icon_plus_alt:before {
    content: "\e050"
}

.icon_close_alt:before {
    content: "\e051"
}

.icon_check_alt:before {
    content: "\e052"
}

.icon_zoom-out:before {
    content: "\e053"
}

.icon_zoom-in:before {
    content: "\e054"
}

.icon_stop_alt:before {
    content: "\e055"
}

.icon_menu-square_alt:before {
    content: "\e056"
}

.icon_menu-circle_alt:before {
    content: "\e057"
}

.icon_document:before {
    content: "\e058"
}

.icon_documents:before {
    content: "\e059"
}

.icon_pencil_alt:before {
    content: "\e05a"
}

.icon_folder:before {
    content: "\e05b"
}

.icon_folder-open:before {
    content: "\e05c"
}

.icon_folder-add:before {
    content: "\e05d"
}

.icon_folder_upload:before {
    content: "\e05e"
}

.icon_folder_download:before {
    content: "\e05f"
}

.icon_info:before {
    content: "\e060"
}

.icon_error-circle:before {
    content: "\e061"
}

.icon_error-oct:before {
    content: "\e062"
}

.icon_error-triangle:before {
    content: "\e063"
}

.icon_question_alt:before {
    content: "\e064"
}

.icon_comment:before {
    content: "\e065"
}

.icon_chat:before {
    content: "\e066"
}

.icon_vol-mute:before {
    content: "\e067"
}

.icon_volume-low:before {
    content: "\e068"
}

.icon_volume-high:before {
    content: "\e069"
}

.icon_quotations_alt:before {
    content: "\e06a"
}

.icon_clock:before {
    content: "\e06b"
}

.icon_lock:before {
    content: "\e06c"
}

.icon_lock-open:before {
    content: "\e06d"
}

.icon_key:before {
    content: "\e06e"
}

.icon_cloud:before {
    content: "\e06f"
}

.icon_cloud-upload:before {
    content: "\e070"
}

.icon_cloud-download:before {
    content: "\e071"
}

.icon_lightbulb:before {
    content: "\e072"
}

.icon_gift:before {
    content: "\e073"
}

.icon_house:before {
    content: "\e074"
}

.icon_camera:before {
    content: "\e075"
}

.icon_mail:before {
    content: "\e076"
}

.icon_cone:before {
    content: "\e077"
}

.icon_ribbon:before {
    content: "\e078"
}

.icon_bag:before {
    content: "\e079"
}

.icon_cart:before {
    content: "\e07a"
}

.icon_tag:before {
    content: "\e07b"
}

.icon_tags:before {
    content: "\e07c"
}

.icon_trash:before {
    content: "\e07d"
}

.icon_cursor:before {
    content: "\e07e"
}

.icon_mic:before {
    content: "\e07f"
}

.icon_compass:before {
    content: "\e080"
}

.icon_pin:before {
    content: "\e081"
}

.icon_pushpin:before {
    content: "\e082"
}

.icon_map:before {
    content: "\e083"
}

.icon_drawer:before {
    content: "\e084"
}

.icon_toolbox:before {
    content: "\e085"
}

.icon_book:before {
    content: "\e086"
}

.icon_contacts:before {
    content: "\e087"
}

.icon_archive:before {
    content: "\e088"
}

.icon_heart:before {
    content: "\e089"
}

.icon_profile:before {
    content: "\e08a"
}

.icon_group:before {
    content: "\e08b"
}

.icon_grid-2x2:before {
    content: "\e08c"
}

.icon_grid-3x3:before {
    content: "\e08d"
}

.icon_music:before {
    content: "\e08e"
}

.icon_pause_alt:before {
    content: "\e08f"
}

.icon_phone:before {
    content: "\e090"
}

.icon_upload:before {
    content: "\e091"
}

.icon_download:before {
    content: "\e092"
}

.social_facebook:before {
    content: "\e093"
}

.social_twitter:before {
    content: "\e094"
}

.social_pinterest:before {
    content: "\e095"
}

.social_googleplus:before {
    content: "\e096"
}

.social_tumblr:before {
    content: "\e097"
}

.social_tumbleupon:before {
    content: "\e098"
}

.social_wordpress:before {
    content: "\e099"
}

.social_instagram:before {
    content: "\e09a"
}

.social_dribbble:before {
    content: "\e09b"
}

.social_vimeo:before {
    content: "\e09c"
}

.social_linkedin:before {
    content: "\e09d"
}

.social_rss:before {
    content: "\e09e"
}

.social_deviantart:before {
    content: "\e09f"
}

.social_share:before {
    content: "\e0a0"
}

.social_myspace:before {
    content: "\e0a1"
}

.social_skype:before {
    content: "\e0a2"
}

.social_youtube:before {
    content: "\e0a3"
}

.social_picassa:before {
    content: "\e0a4"
}

.social_googledrive:before {
    content: "\e0a5"
}

.social_flickr:before {
    content: "\e0a6"
}

.social_blogger:before {
    content: "\e0a7"
}

.social_spotify:before {
    content: "\e0a8"
}

.social_delicious:before {
    content: "\e0a9"
}

.social_facebook_circle:before {
    content: "\e0aa"
}

.social_twitter_circle:before {
    content: "\e0ab"
}

.social_pinterest_circle:before {
    content: "\e0ac"
}

.social_googleplus_circle:before {
    content: "\e0ad"
}

.social_tumblr_circle:before {
    content: "\e0ae"
}

.social_stumbleupon_circle:before {
    content: "\e0af"
}

.social_wordpress_circle:before {
    content: "\e0b0"
}

.social_instagram_circle:before {
    content: "\e0b1"
}

.social_dribbble_circle:before {
    content: "\e0b2"
}

.social_vimeo_circle:before {
    content: "\e0b3"
}

.social_linkedin_circle:before {
    content: "\e0b4"
}

.social_rss_circle:before {
    content: "\e0b5"
}

.social_deviantart_circle:before {
    content: "\e0b6"
}

.social_share_circle:before {
    content: "\e0b7"
}

.social_myspace_circle:before {
    content: "\e0b8"
}

.social_skype_circle:before {
    content: "\e0b9"
}

.social_youtube_circle:before {
    content: "\e0ba"
}

.social_picassa_circle:before {
    content: "\e0bb"
}

.social_googledrive_alt2:before {
    content: "\e0bc"
}

.social_flickr_circle:before {
    content: "\e0bd"
}

.social_blogger_circle:before {
    content: "\e0be"
}

.social_spotify_circle:before {
    content: "\e0bf"
}

.social_delicious_circle:before {
    content: "\e0c0"
}

.social_facebook_square:before {
    content: "\e0c1"
}

.social_twitter_square:before {
    content: "\e0c2"
}

.social_pinterest_square:before {
    content: "\e0c3"
}

.social_googleplus_square:before {
    content: "\e0c4"
}

.social_tumblr_square:before {
    content: "\e0c5"
}

.social_stumbleupon_square:before {
    content: "\e0c6"
}

.social_wordpress_square:before {
    content: "\e0c7"
}

.social_instagram_square:before {
    content: "\e0c8"
}

.social_dribbble_square:before {
    content: "\e0c9"
}

.social_vimeo_square:before {
    content: "\e0ca"
}

.social_linkedin_square:before {
    content: "\e0cb"
}

.social_rss_square:before {
    content: "\e0cc"
}

.social_deviantart_square:before {
    content: "\e0cd"
}

.social_share_square:before {
    content: "\e0ce"
}

.social_myspace_square:before {
    content: "\e0cf"
}

.social_skype_square:before {
    content: "\e0d0"
}

.social_youtube_square:before {
    content: "\e0d1"
}

.social_picassa_square:before {
    content: "\e0d2"
}

.social_googledrive_square:before {
    content: "\e0d3"
}

.social_flickr_square:before {
    content: "\e0d4"
}

.social_blogger_square:before {
    content: "\e0d5"
}

.social_spotify_square:before {
    content: "\e0d6"
}

.social_delicious_square:before {
    content: "\e0d7"
}

.icon_printer:before {
    content: "\e103"
}

.icon_calulator:before {
    content: "\e0ee"
}

.icon_building:before {
    content: "\e0ef"
}

.icon_floppy:before {
    content: "\e0e8"
}

.icon_drive:before {
    content: "\e0ea"
}

.icon_search-2:before {
    content: "\e101"
}

.icon_id:before {
    content: "\e107"
}

.icon_id-2:before {
    content: "\e108"
}

.icon_puzzle:before {
    content: "\e102"
}

.icon_like:before {
    content: "\e106"
}

.icon_dislike:before {
    content: "\e0eb"
}

.icon_mug:before {
    content: "\e105"
}

.icon_currency:before {
    content: "\e0ed"
}

.icon_wallet:before {
    content: "\e100"
}

.icon_pens:before {
    content: "\e104"
}

.icon_easel:before {
    content: "\e0e9"
}

.icon_flowchart:before {
    content: "\e109"
}

.icon_datareport:before {
    content: "\e0ec"
}

.icon_briefcase:before {
    content: "\e0fe"
}

.icon_shield:before {
    content: "\e0f6"
}

.icon_percent:before {
    content: "\e0fb"
}

.icon_globe:before {
    content: "\e0e2"
}

.icon_globe-2:before {
    content: "\e0e3"
}

.icon_target:before {
    content: "\e0f5"
}

.icon_hourglass:before {
    content: "\e0e1"
}

.icon_balance:before {
    content: "\e0ff"
}

.icon_rook:before {
    content: "\e0f8"
}

.icon_printer-alt:before {
    content: "\e0fa"
}

.icon_calculator_alt:before {
    content: "\e0e7"
}

.icon_building_alt:before {
    content: "\e0fd"
}

.icon_floppy_alt:before {
    content: "\e0e4"
}

.icon_drive_alt:before {
    content: "\e0e5"
}

.icon_search_alt:before {
    content: "\e0f7"
}

.icon_id_alt:before {
    content: "\e0e0"
}

.icon_id-2_alt:before {
    content: "\e0fc"
}

.icon_puzzle_alt:before {
    content: "\e0f9"
}

.icon_like_alt:before {
    content: "\e0dd"
}

.icon_dislike_alt:before {
    content: "\e0f1"
}

.icon_mug_alt:before {
    content: "\e0dc"
}

.icon_currency_alt:before {
    content: "\e0f3"
}

.icon_wallet_alt:before {
    content: "\e0d8"
}

.icon_pens_alt:before {
    content: "\e0db"
}

.icon_easel_alt:before {
    content: "\e0f0"
}

.icon_flowchart_alt:before {
    content: "\e0df"
}

.icon_datareport_alt:before {
    content: "\e0f2"
}

.icon_briefcase_alt:before {
    content: "\e0f4"
}

.icon_shield_alt:before {
    content: "\e0d9"
}

.icon_percent_alt:before {
    content: "\e0da"
}

.icon_globe_alt:before {
    content: "\e0de"
}

.icon_clipboard:before {
    content: "\e0e6"
}

.glyph {
    float: left;
    text-align: center;
    padding: .75em;
    margin: .4em 1.5em .75em 0;
    width: 6em;
    text-shadow: none
}

.glyph_big {
    font-size: 128px;
    color: #59c5dc;
    float: left;
    margin-right: 20px
}

.glyph div {
    padding-bottom: 10px
}

.glyph input {
    font-family: consolas, monospace;
    font-size: 12px;
    width: 100%;
    text-align: center;
    border: 0;
    box-shadow: 0 0 0 1px #ccc;
    padding: .2em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

.centered {
    margin-left: auto;
    margin-right: auto
}

.glyph .fs1 {
    font-size: 2em
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes bounce {

    20%,
    53%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {

    20%,
    53%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {

    50%,
    from,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {

    50%,
    from,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {

    11.1%,
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {

    11.1%,
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes bounceIn {

    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {

    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInDown {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInLeft {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInRight {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInUp {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

@keyframes rollOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    overflow: hidden;
    position: fixed;
    background: #000;
    opacity: .96
}

.mfp-wrap {
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    position: fixed;
    outline: 0 !important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    height: 100%;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 505
}

.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none !important
}

.mfp-preloader {
    color: #aaa;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 504
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-ready .mfp-preloader {
    display: none
}

.mfp-s-error .mfp-content {
    display: none
}

.mfp-s-loading .mfp-arrow {
    display: none
}

button.mfp-arrow,
button.mfp-close {
    overflow: visible;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    display: block;
    padding: 0;
    z-index: 506
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
    right: 0;
    top: -40px
}

button.mfp-close {
    position: absolute;
    width: 45px;
    height: 45px;
    top: -20px;
    display: block;
    right: -12px;
    cursor: pointer !important;
    z-index: 9999;
    color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 50%;
    margin: 0;
    background-color: transparent;
    outline: 0;
    transform: translate3d(0, 0, 0)
}

.mfp-iframe-holder .mfp-close {
    top: -50px;
    right: -12px;
    transform: translate3d(0, 0, 0)
}

.mfp-gallery .mfp-close {
    top: 20px;
    right: 10px
}

.mfp-gallery .mfp-content .mfp-close {
    display: none
}

.mfp-gallery .mfp-close:before {
    font-family: ElegantIcons;
    font-size: 29px;
    top: 4px;
    left: 50%;
    position: absolute;
    height: 10px;
    transition: .3s
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #aaa;
    font-size: 13px;
    line-height: 18px
}

.mfp-arrow {
    opacity: 1;
    margin: 0 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    z-index: 100;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    outline: 0 !important
}

.mfp-arrow:hover {
    background: #66676b;
    color: #fff
}

.mfp-arrow.mfp-arrow-left,
.mfp-arrow.mfp-arrow-right {
    font-family: ElegantIcons;
    font-size: 32px
}

.mfp-arrow.mfp-arrow-right {
    right: 15px
}

.mfp-arrow.mfp-arrow-left:before {
    content: "\34";
    left: -1px;
    top: 0;
    position: relative
}

.mfp-arrow.mfp-arrow-right:before {
    content: "\35";
    left: 1px;
    top: 0;
    position: relative
}

.mfp-content:hover .mfp-arrow {
    opacity: 1
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 1180px
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 54%
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #000
}

.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8)
}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    opacity: 0
}

.my-mfp-zoom-in.mfp-bg {
    opacity: .001;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out
}

.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: .8
}

.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0
}

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 40px auto;
    border-radius: 4px
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 18px rgba(11, 11, 11, .6)
}

.mfp-figure {
    line-height: 0
}

.mfp-bottom-bar {
    margin-top: -30px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-break: break-word;
    padding-right: 36px
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all .2s ease-in-out;
    transform: scale(.8)
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all .3s ease-out
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1)
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: .9
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(.8);
    opacity: 0
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0
}

@media screen and (max-width:800px) and (orientation:landscape),
screen and (max-height:300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, .6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        text-align: center;
        padding: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }
}

.mfp-ie7 .mfp-img {
    padding: 0
}

.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px
}

.mfp-ie7 .mfp-container {
    padding: 0
}

.mfp-ie7 .mfp-content {
    padding-top: 44px
}

.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0
}

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: .92;
    background-color: #111
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0
}

h3#pop_msg {
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    padding: 10px 0
}

h3#pop_msg strong {
    display: block;
    font-size: 36px !important
}

.pop-container {
    position: fixed;
    text-align: center;
    visibility: visible;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    display: none;
    z-index: 999999;
    margin: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0)
}

.pop-container *,
.pop-container :after,
.pop-container :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.pop-container .cleafix:after,
.pop-container.clearfix:after {
    content: " ";
    display: table;
    clear: both
}

.pop-container.modal {
    pointer-events: auto
}

.pop-container.shown {
    display: block
}

.pop-container.top-mid .pop-fixer {
    margin: 0
}

.pop-container.top-left .flavr-fixer {
    position: fixed;
    margin: 0;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0
}

.pop-container.top-right .pop-fixer {
    position: fixed;
    margin: 0;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto
}

.pop-container.bottom-left .pop-fixer {
    position: fixed;
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0
}

.pop-container.bottom-right .pop-fixer {
    position: fixed;
    margin: 0;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto
}

.pop-container.bottom-mid .pop-fixer {
    position: fixed;
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    text-align: left
}

.pop-container.bottom-mid .pop-fixer .pop-outer {
    margin-left: -50%;
    width: 100%
}

.pop-container.fullscreen .pop-fixer {
    margin-top: 0
}

.pop-container .pop-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: inherit;
    background: rgba(0, 0, 0, .7)
}

.pop-container .pop-fixer {
    position: relative;
    margin: 12% auto 0;
    display: inline-block;
    width: auto;
    pointer-events: auto;
    -webkit-transition: margin .3s;
    -moz-transition: margin .3s;
    -o-transition: margin .3s;
    transition: margin .3s
}

.pop-container .pop-fixer .pop-outer {
    background: #fff;
    min-width: 300px;
    height: auto;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3)
}

.pop-container .pop-fixer .pop-outer .pop-content {
    font-size: 14px;
    color: #444;
    padding: 20px 30px 20px
}

.pop-container .pop-fixer .pop-outer .pop-content small {
    color: #999;
    display: block
}

.pop-container .pop-fixer .pop-outer .pop-content .pop-icon {
    margin-top: 10px;
    margin-bottom: 10px
}

.pop-container .pop-fixer .pop-outer .pop-content .pop-icon img {
    max-height: 75px;
    max-width: 75px
}

.pop-container .pop-fixer .pop-outer .pop-content .pop-title {
    margin: 0;
    margin-bottom: 6px;
    font-size: 1.3em;
    line-height: 1.5
}

.pop-container .pop-fixer .pop-outer .pop-content .pop-message {
    margin-top: 6px;
    color: inherit;
    line-height: 1.5
}

.pop-container .pop-fixer .pop-outer .flavr-toolbar {
    white-space: nowrap;
    padding: 0 30px 20px
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button {
    outline: 0;
    display: block;
    text-decoration: none !important;
    padding: 7px 12px;
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.428571429;
    color: #fff;
    background-color: #795aac;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button:hover {
    outline: 0;
    background-color: #3e4b5d;
    color: #fff
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.primary {
    background-color: #2980b9
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.primary:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.primary:hover {
    background-color: #3e4b5d
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.success {
    background-color: #27ae60
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.success:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.success:hover {
    background-color: #3e4b5d
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.info {
    background-color: #1fb5ad
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.info:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.info:hover {
    background-color: #3e4b5d
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.warning {
    background-color: #f39c12
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.warning:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.warning:hover {
    background-color: #3e4b5d
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.danger {
    background-color: #f44a56
}

.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.danger:focus,
.pop-container .pop-fixer .pop-outer .pop-toolbar .pop-button.danger:hover {
    background-color: #3e4b5d
}

.pop-container .pop-fixer .pop-outer .pop-toolbar.inline .pop-button {
    display: inline-block;
    width: auto;
    min-width: 120px;
    margin-left: 6px;
    margin-top: 2px
}

.pop-container .pop-fixer .pop-outer .pop-toolbar.inline .pop-button:first-child {
    margin-left: 0
}

.pop-container .pop-fixer .pop-outer .pop-toolbar.stacked .pop-button:first-child {
    margin-top: 0
}

.pop-container.msie8 .pop-overlay {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiSAMAAG8AaYLq42UAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-10 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNikAQAACIAHF/uBd8AAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-20 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiMAYAADwANpiOMBYAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-30 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNi8AEAAFUATydJphIAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-40 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiSAMAAG8AaYLq42UAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-50 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-60 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNimAkAAKIAnNwSwMYAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-70 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNi2AQAALsAtXXCpvIAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-80 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiOAMAANUAz5n+TlUAAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-90 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNieAoAAO4A6HfO1f4AAAAASUVORK5CYII=)
}

.pop-container.msie8 .pop-overlay.opacity-100 {
    background-image: none;
    background-color: #000
}

.pop-container.ie-overlay-false {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=)
}

@media (max-width:480px) {
    .pop-container .pop-fixer .pop-outer .pop-content .pop_img {
        display: none
    }
}

.switch-light span span,
.switch-toggle a {
    display: none
}

@media only screen {
    .switch-light {
        display: block;
        height: 30px;
        width: 100px;
        position: relative;
        overflow: visible;
        padding: 0;
        margin: auto
    }

    .switch-light * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .switch-light a {
        display: block;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out;
        outline: 0
    }

    .switch-light label,
    .switch-light>span {
        line-height: 30px;
        vertical-align: middle;
        height: 30px;
        cursor: pointer
    }

    .switch-light label {
        position: relative;
        z-index: 3;
        display: block;
        width: 100%
    }

    .switch-light input {
        position: absolute;
        opacity: 0;
        z-index: 5
    }

    .switch-light input:checked~a {
        right: 0
    }

    .switch-light>span {
        position: absolute;
        left: -100px;
        width: 100%;
        margin: 0;
        padding-right: 100px;
        text-align: left
    }

    .switch-light>span span {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        display: block;
        width: 50%;
        margin-left: 100px;
        text-align: center
    }

    .switch-light>span span:last-child {
        left: 50%
    }

    .switch-light a {
        position: absolute;
        right: 50%;
        top: 0;
        z-index: 4;
        display: block;
        width: 50%;
        height: 100%;
        padding: 0
    }

    .switch-toggle {
        display: block;
        height: 30px;
        position: relative;
        padding: 0 !important
    }

    .switch-toggle * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .switch-toggle a {
        display: block;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .switch-toggle label,
    .switch-toggle>span {
        line-height: 30px;
        vertical-align: middle
    }

    .switch-toggle input:focus+label,
    .switch-toggle input:focus~a {
        outline: 1px dotted #888
    }

    .switch-toggle input {
        position: absolute;
        opacity: 0
    }

    .switch-toggle input+label {
        position: relative;
        z-index: 2;
        float: left;
        width: 50%;
        height: 100%;
        margin: 0;
        text-align: center
    }

    .switch-toggle a {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        z-index: 1;
        width: 50%;
        height: 100%
    }

    .switch-toggle input:last-of-type:checked~a {
        left: 50%
    }

    .switch-toggle.switch-3 a,
    .switch-toggle.switch-3 label {
        width: 33.33333%
    }

    .switch-toggle.switch-3 input:checked:nth-of-type(2)~a {
        left: 33.33333%
    }

    .switch-toggle.switch-3 input:checked:last-of-type~a {
        left: 66.66667%
    }

    .switch-toggle.switch-4 a,
    .switch-toggle.switch-4 label {
        width: 25%
    }

    .switch-toggle.switch-4 input:checked:nth-of-type(2)~a {
        left: 25%
    }

    .switch-toggle.switch-4 input:checked:nth-of-type(3)~a {
        left: 50%
    }

    .switch-toggle.switch-4 input:checked:last-of-type~a {
        left: 75%
    }

    .switch-toggle.switch-5 a,
    .switch-toggle.switch-5 label {
        width: 20%
    }

    .switch-toggle.switch-5 input:checked:nth-of-type(2)~a {
        left: 20%
    }

    .switch-toggle.switch-5 input:checked:nth-of-type(3)~a {
        left: 40%
    }

    .switch-toggle.switch-5 input:checked:nth-of-type(4)~a {
        left: 60%
    }

    .switch-toggle.switch-5 input:checked:last-of-type~a {
        left: 80%
    }

    .switch-candy {
        background-color: #2d3035;
        border-radius: 3px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        text-shadow: 1px 1px 1px #191b1e;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .2)
    }

    .switch-candy label {
        color: #fff;
        -webkit-transition: color .2s ease-out;
        -moz-transition: color .2s ease-out;
        transition: color .2s ease-out
    }

    .switch-candy input:checked+label {
        color: #333;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
    }

    .switch-candy a {
        border: 1px solid #333;
        background-color: #70c66b;
        border-radius: 3px;
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .45)
    }

    .switch-candy>span {
        color: #333;
        text-shadow: none
    }

    .switch-candy span {
        color: #fff
    }

    .switch-candy.switch-candy-blue a {
        background-color: #38a3d4
    }

    .switch-candy.switch-candy-yellow a {
        background-color: #f5e560
    }

    .switch-android {
        background-color: #464747;
        border-radius: 1px;
        color: #fff;
        box-shadow: inset rgba(0, 0, 0, .1) 0 1px 0
    }

    .switch-android label {
        color: #fff
    }

    .switch-android>span span {
        opacity: 0;
        -webkit-transition: all .1s;
        -moz-transition: all .1s;
        transition: all .1s
    }

    .switch-android>span span:first-of-type {
        opacity: 1
    }

    .switch-android a {
        background-color: #666;
        border-radius: 1px;
        box-shadow: inset rgba(255, 255, 255, .2) 0 1px 0, inset rgba(0, 0, 0, .3) 0 -1px 0
    }

    .switch-android.switch-light input:checked~a {
        background-color: #0e88b1
    }

    .switch-android.switch-light input:checked~span span:first-of-type {
        opacity: 0
    }

    .switch-android.switch-light input:checked~span span:last-of-type {
        opacity: 1
    }

    .switch-android.switch-toggle,
    .switch-android>span span {
        font-size: 85%;
        text-transform: uppercase
    }

    .switch-ios.switch-light {
        color: #868686
    }

    .switch-ios.switch-light a {
        left: 0;
        width: 30px;
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-radius: 100%;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out;
        box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .025), 0 1px 4px rgba(0, 0, 0, .15), 0 4px 4px rgba(0, 0, 0, .1)
    }

    .switch-ios.switch-light>span span {
        width: 100%;
        left: 0;
        opacity: 0
    }

    .switch-ios.switch-light>span span:first-of-type {
        opacity: 1;
        padding-left: 30px
    }

    .switch-ios.switch-light>span span:last-of-type {
        padding-right: 30px
    }

    .switch-ios.switch-light>span:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 100px;
        top: 0;
        background-color: #fafafa;
        border: 1px solid #d3d3d3;
        border-radius: 30px;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        transition: all .5s ease-out;
        box-shadow: inset rgba(0, 0, 0, .1) 0 1px 0
    }

    .switch-ios.switch-light input:checked~a {
        left: 100%;
        margin-left: -30px
    }

    .switch-ios.switch-light input:checked~span:before {
        border-color: #85c99d;
        box-shadow: inset 0 0 0 30px #85c99d
    }

    .switch-ios.switch-light input:checked~span span:first-of-type {
        opacity: 0
    }

    .switch-ios.switch-light input:checked~span span:last-of-type {
        opacity: 1;
        color: #fff
    }

    .switch-ios.switch-toggle {
        background-color: #fafafa;
        border: 1px solid #d3d3d3;
        border-radius: 30px;
        box-shadow: inset rgba(0, 0, 0, .1) 0 1px 0
    }

    .switch-ios.switch-toggle a {
        background-color: #85c99d;
        border-radius: 25px;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .switch-ios.switch-toggle label {
        color: #868686
    }

    .switch-ios input:checked+label {
        color: #3a3a3a
    }

    .ie8 input[type=checkbox].fix_ie8 {
        margin-top: 10px;
        margin: 8px 0 0 8px;
        display: block
    }

    .ie8 .ie8_hide {
        display: none
    }
}

@media only screen and (-webkit-max-device-pixel-ratio:2) and (max-device-width:1280px) {

    .switch-light,
    .switch-toggle {
        -webkit-animation: webkitSiblingBugfix infinite 1s
    }
}

@-webkit-keyframes webkitSiblingBugfix {
    from {
        -webkit-transform: translate3d(0, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0)
    }
}

.irs {
    position: relative;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.irs-line {
    position: relative;
    display: block;
    overflow: hidden;
    outline: 0 !important
}

.irs-line-left,
.irs-line-mid,
.irs-line-right {
    position: absolute;
    display: block;
    top: 0
}

.irs-line-left {
    left: 0;
    width: 11%
}

.irs-line-mid {
    left: 9%;
    width: 82%
}

.irs-line-right {
    right: 0;
    width: 11%
}

.irs-bar {
    position: absolute;
    display: block;
    left: 0;
    width: 0
}

.irs-bar-edge {
    position: absolute;
    display: block;
    top: 0;
    left: 0
}

.irs-shadow {
    position: absolute;
    display: none;
    left: 0;
    width: 0
}

.irs-slider {
    position: absolute;
    display: block;
    cursor: default;
    z-index: 1
}

.irs-slider.type_last {
    z-index: 2
}

.irs-min {
    position: absolute;
    display: block;
    left: 0;
    cursor: default
}

.irs-max {
    position: absolute;
    display: block;
    right: 0;
    cursor: default
}

.irs-from,
.irs-single,
.irs-to {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    cursor: default;
    white-space: nowrap
}

.irs-grid {
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px
}

.irs-with-grid .irs-grid {
    display: block
}

.irs-grid-pol {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 8px;
    background: #000
}

.irs-grid-pol.small {
    height: 4px
}

.irs-grid-text {
    position: absolute;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    text-align: center;
    font-size: 9px;
    line-height: 9px;
    padding: 0 3px;
    color: #000
}

.irs-disable-mask {
    position: absolute;
    display: block;
    top: 0;
    left: -1%;
    width: 102%;
    height: 100%;
    cursor: default;
    background: rgba(0, 0, 0, 0);
    z-index: 2
}

.irs-disabled {
    opacity: .4
}

.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: 0 !important;
    z-index: -9999 !important;
    background: 0 0 !important;
    border-style: solid !important;
    border-color: transparent !important
}

.irs-bar,
.irs-bar-edge,
.irs-line-left,
.irs-line-mid,
.irs-line-right,
.irs-slider {
    background: url(../img/sprite-skin-flat.png) repeat-x
}

.irs {
    height: 40px
}

.irs-with-grid {
    height: 60px
}

.irs-line {
    height: 12px;
    top: 25px
}

.irs-line-left {
    height: 12px;
    background-position: 0 -30px
}

.irs-line-mid {
    height: 12px;
    background-position: 0 0
}

.irs-line-right {
    height: 12px;
    background-position: 100% -30px
}

.irs-bar {
    height: 12px;
    top: 25px;
    background-position: 0 -60px
}

.irs-bar-edge {
    top: 25px;
    height: 12px;
    width: 9px;
    background-position: 0 -90px
}

.irs-shadow {
    height: 3px;
    top: 34px;
    background: #000;
    opacity: .25
}

.irs-slider {
    width: 16px;
    height: 18px;
    top: 22px;
    background-position: 0 -120px
}

.irs-slider.state_hover,
.irs-slider:hover {
    background-position: 0 -150px
}

.irs-max,
.irs-min {
    color: #999;
    font-size: 10px;
    line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 3px;
    background: #e1e4e9;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.irs-from,
.irs-single,
.irs-to {
    color: #fff;
    font-size: 10px;
    line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #ed5565;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.irs-from:after,
.irs-single:after,
.irs-to:after {
    position: absolute;
    display: block;
    content: "";
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    border-top-color: #ed5565
}

.irs-grid-pol {
    background: #e1e4e9
}

.irs-grid-text {
    color: #999
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: none
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.no-js .owl-carousel {
    display: block
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #d6d6d6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #869791;
    color: #fff;
    text-decoration: none
}

.owl-theme .owl-nav .disabled {
    opacity: .5;
    cursor: default
}

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px
}

.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #869791
}

/*!
*  - v1.4.0
* Homepage: http://bqworks.com/slider-pro/
* Author: bqworks
* Author URL: http://bqworks.com/
*/
.slider-pro {
    position: relative;
    margin: 0 auto;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.sp-slides-container {
    position: relative
}

.sp-mask {
    position: relative;
    overflow: hidden
}

.sp-slides {
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000
}

.sp-slide {
    position: absolute
}

.sp-image-container {
    overflow: hidden
}

.sp-image {
    position: relative;
    display: block;
    border: none
}

.sp-no-js {
    overflow: hidden;
    max-width: 100%
}

.sp-thumbnails-container {
    position: relative;
    overflow: hidden;
    direction: ltr
}

.sp-bottom-thumbnails,
.sp-top-thumbnails {
    left: 0;
    margin: 0 auto
}

.sp-top-thumbnails {
    position: absolute;
    top: 0;
    margin-bottom: 4px
}

.sp-bottom-thumbnails {
    margin-top: 4px
}

.sp-left-thumbnails,
.sp-right-thumbnails {
    position: absolute;
    top: 0
}

.sp-right-thumbnails {
    right: 0;
    margin-left: 4px
}

.sp-left-thumbnails {
    left: 0;
    margin-right: 4px
}

.sp-thumbnails {
    position: relative
}

.sp-thumbnail {
    border: none
}

.sp-thumbnail-container {
    position: relative;
    display: block;
    overflow: hidden;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.sp-rtl .sp-thumbnail-container {
    float: right
}

.sp-bottom-thumbnails .sp-thumbnail-container,
.sp-top-thumbnails .sp-thumbnail-container {
    margin-left: 2px;
    margin-right: 2px
}

.sp-bottom-thumbnails .sp-thumbnail-container:first-child,
.sp-top-thumbnails .sp-thumbnail-container:first-child {
    margin-left: 0
}

.sp-bottom-thumbnails .sp-thumbnail-container:last-child,
.sp-top-thumbnails .sp-thumbnail-container:last-child {
    margin-right: 0
}

.sp-left-thumbnails .sp-thumbnail-container,
.sp-right-thumbnails .sp-thumbnail-container {
    margin-top: 2px;
    margin-bottom: 2px
}

.sp-left-thumbnails .sp-thumbnail-container:first-child,
.sp-right-thumbnails .sp-thumbnail-container:first-child {
    margin-top: 0
}

.sp-left-thumbnails .sp-thumbnail-container:last-child,
.sp-right-thumbnails .sp-thumbnail-container:last-child {
    margin-bottom: 0
}

.sp-right-thumbnails.sp-has-pointer {
    margin-left: -13px
}

.sp-right-thumbnails.sp-has-pointer .sp-thumbnail {
    position: absolute;
    left: 18px;
    margin-left: 0 !important
}

.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: 5px solid red;
    left: 0;
    top: 0;
    margin-left: 13px
}

.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 50%;
    margin-top: -8px;
    border-right: 13px solid red;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent
}

.sp-left-thumbnails.sp-has-pointer {
    margin-right: -13px
}

.sp-left-thumbnails.sp-has-pointer .sp-thumbnail {
    position: absolute;
    right: 18px
}

.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: 5px solid red;
    right: 0;
    top: 0;
    margin-right: 13px
}

.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    top: 50%;
    margin-top: -8px;
    border-left: 13px solid red;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent
}

.sp-bottom-thumbnails.sp-has-pointer {
    margin-top: -13px
}

.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
    position: absolute;
    top: 18px;
    margin-top: 0 !important
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 5px solid red;
    top: 0;
    margin-top: 13px
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 0;
    margin-left: -8px;
    border-bottom: 13px solid red;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent
}

.sp-top-thumbnails.sp-has-pointer {
    margin-bottom: -13px
}

.sp-top-thumbnails.sp-has-pointer .sp-thumbnail {
    position: absolute;
    bottom: 18px
}

.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 5px solid red;
    bottom: 0;
    margin-bottom: 13px
}

.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: 0;
    margin-left: -8px;
    border-top: 13px solid red;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent
}

.sp-layer {
    position: absolute;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-backface-visibility: hidden
}

.sp-black {
    color: #fff;
    background: #000;
    background: rgba(0, 0, 0, .7)
}

.sp-white {
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, .7)
}

.sp-rounded {
    border-radius: 10px
}

.sp-padding {
    padding: 10px
}

.sp-grab {
    cursor: url(images/openhand.cur), move
}

.sp-grabbing {
    cursor: url(images/closedhand.cur), move
}

.sp-selectable {
    cursor: default
}

.sp-caption-container {
    text-align: center;
    margin-top: 10px
}

.sp-full-screen {
    margin: 0 !important;
    background-color: #000
}

.sp-full-screen-button {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.sp-full-screen-button:before {
    content: '\2195'
}

.sp-fade-full-screen {
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.slider-pro:hover .sp-fade-full-screen {
    opacity: 1
}

.sp-buttons {
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 10px
}

.sp-rtl .sp-buttons {
    direction: rtl
}

.sp-full-screen .sp-buttons {
    display: none
}

.sp-button {
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-radius: 50%;
    margin: 4px;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer
}

.sp-selected-button {
    background-color: #000
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    .sp-button {
        width: 14px;
        height: 14px
    }
}

@media only screen and (min-width:568px) and (max-width:768px) {
    .sp-button {
        width: 16px;
        height: 16px
    }
}

@media only screen and (min-width:320px) and (max-width:568px) {
    .sp-button {
        width: 18px;
        height: 18px
    }
}

.sp-arrows {
    position: absolute
}

.sp-fade-arrows {
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.sp-slides-container:hover .sp-fade-arrows {
    opacity: 1
}

.sp-horizontal .sp-arrows {
    width: 100%;
    left: 0;
    top: 50%;
    margin-top: -15px
}

.sp-vertical .sp-arrows {
    height: 100%;
    left: 50%;
    top: 0;
    margin-left: -10px
}

.sp-arrow {
    position: absolute;
    display: block;
    width: 20px;
    height: 30px;
    cursor: pointer
}

.sp-vertical .sp-arrow {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sp-horizontal .sp-previous-arrow {
    left: 20px;
    right: auto
}

.sp-horizontal.sp-rtl .sp-previous-arrow {
    right: 20px;
    left: auto
}

.sp-horizontal .sp-next-arrow {
    right: 20px;
    left: auto
}

.sp-horizontal.sp-rtl .sp-next-arrow {
    left: 20px;
    right: auto
}

.sp-vertical .sp-previous-arrow {
    top: 20px
}

.sp-vertical .sp-next-arrow {
    bottom: 20px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.sp-next-arrow:after,
.sp-next-arrow:before,
.sp-previous-arrow:after,
.sp-previous-arrow:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #fff
}

.sp-arrow:before {
    left: 30%;
    top: 0;
    -webkit-transform: skew(145deg, 0deg);
    -ms-transform: skew(145deg, 0deg);
    transform: skew(145deg, 0deg)
}

.sp-arrow:after {
    left: 30%;
    top: 50%;
    -webkit-transform: skew(-145deg, 0deg);
    -ms-transform: skew(-145deg, 0deg);
    transform: skew(-145deg, 0deg)
}

.sp-next-arrow {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sp-horizontal.sp-rtl .sp-previous-arrow {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sp-horizontal.sp-rtl .sp-next-arrow {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.ie7 .sp-arrow,
.ie8 .sp-arrow {
    width: 0;
    height: 0
}

.ie7 .sp-arrow:after,
.ie7 .sp-arrow:before,
.ie8 .sp-arrow:after,
.ie8 .sp-arrow:before {
    content: none
}

.ie7.sp-horizontal .sp-previous-arrow,
.ie8.sp-horizontal .sp-previous-arrow {
    border-right: 20px solid #fff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent
}

.ie7.sp-horizontal .sp-next-arrow,
.ie8.sp-horizontal .sp-next-arrow {
    border-left: 20px solid #fff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent
}

.ie7.sp-vertical .sp-previous-arrow,
.ie8.sp-vertical .sp-previous-arrow {
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent
}

.ie7.sp-vertical .sp-next-arrow,
.ie8.sp-vertical .sp-next-arrow {
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent
}

.sp-thumbnail-arrows {
    position: absolute
}

.sp-fade-thumbnail-arrows {
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows {
    opacity: 1
}

.sp-bottom-thumbnails .sp-thumbnail-arrows,
.sp-top-thumbnails .sp-thumbnail-arrows {
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -12px
}

.sp-left-thumbnails .sp-thumbnail-arrows,
.sp-right-thumbnails .sp-thumbnail-arrows {
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -7px
}

.sp-thumbnail-arrow {
    position: absolute;
    display: block;
    width: 15px;
    height: 25px;
    cursor: pointer
}

.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.sp-top-thumbnails .sp-previous-thumbnail-arrow {
    left: 0
}

.sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.sp-top-thumbnails .sp-next-thumbnail-arrow {
    right: 0
}

.sp-left-thumbnails .sp-previous-thumbnail-arrow,
.sp-right-thumbnails .sp-previous-thumbnail-arrow {
    top: 0
}

.sp-left-thumbnails .sp-next-thumbnail-arrow,
.sp-right-thumbnails .sp-next-thumbnail-arrow {
    bottom: 0
}

.sp-next-thumbnail-arrow:after,
.sp-next-thumbnail-arrow:before,
.sp-previous-thumbnail-arrow:after,
.sp-previous-thumbnail-arrow:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #fff
}

.sp-previous-thumbnail-arrow:before {
    left: 30%;
    top: 0;
    -webkit-transform: skew(145deg, 0deg);
    -ms-transform: skew(145deg, 0deg);
    transform: skew(145deg, 0deg)
}

.sp-previous-thumbnail-arrow:after {
    left: 30%;
    top: 50%;
    -webkit-transform: skew(-145deg, 0deg);
    -ms-transform: skew(-145deg, 0deg);
    transform: skew(-145deg, 0deg)
}

.sp-next-thumbnail-arrow:before {
    right: 30%;
    top: 0;
    -webkit-transform: skew(35deg, 0deg);
    -ms-transform: skew(35deg, 0deg);
    transform: skew(35deg, 0deg)
}

.sp-next-thumbnail-arrow:after {
    right: 30%;
    top: 50%;
    -webkit-transform: skew(-35deg, 0deg);
    -ms-transform: skew(-35deg, 0deg);
    transform: skew(-35deg, 0deg)
}

.ie7 .sp-thumbnail-arrow,
.ie8 .sp-thumbnail-arrow {
    width: 0;
    height: 0
}

.ie7 .sp-thumbnail-arrow:after,
.ie7 .sp-thumbnail-arrow:before,
.ie8 .sp-thumbnail-arrow:after,
.ie8 .sp-thumbnail-arrow:before {
    content: none
}

.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow {
    border-right: 12px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent
}

.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow {
    border-left: 12px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent
}

.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow {
    border-bottom: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent
}

.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow {
    border-top: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent
}

a.sp-video {
    text-decoration: none
}

a.sp-video img {
    -webkit-backface-visibility: hidden;
    border: none
}

a.sp-video:after {
    content: '\25B6';
    position: absolute;
    width: 45px;
    padding-left: 5px;
    height: 50px;
    border: 2px solid #fff;
    text-align: center;
    font-size: 30px;
    border-radius: 30px;
    top: 0;
    color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .2);
    margin: auto;
    line-height: 52px
}

.slider-pro img.sp-image,
.slider-pro img.sp-thumbnail {
    max-width: none;
    max-height: none;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    -webkit-box-shadow: none !important;
    -mox-box-shadow: none !important;
    box-shadow: none !important;
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none
}

.slider-pro a {
    position: static;
    transition: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important
}

.slider-pro canvas,
.slider-pro embed,
.slider-pro iframe,
.slider-pro object,
.slider-pro video {
    max-width: none;
    max-height: none
}

.slider-pro p.sp-layer {
    font-size: 14px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h1.sp-layer {
    font-size: 32px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h2.sp-layer {
    font-size: 24px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h3.sp-layer {
    font-size: 19px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h4.sp-layer {
    font-size: 16px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h5.sp-layer {
    font-size: 13px;
    line-height: 1.4;
    margin: 0
}

.slider-pro h6.sp-layer {
    font-size: 11px;
    line-height: 1.4;
    margin: 0
}

.slider-pro img.sp-layer {
    border: none
}

.bootstrap-timepicker {
    position: relative
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
    left: auto;
    right: 0
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {
    left: auto;
    right: 12px
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {
    left: auto;
    right: 13px
}

.bootstrap-timepicker .add-on {
    cursor: pointer
}

.bootstrap-timepicker .add-on i {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, .2)
}

.bootstrap-timepicker-widget.dropdown-menu {
    padding: 7px 10px;
    -webkit-border-radius: 0;
    border-radius: 4px;
    -webkit-box-shadow: 0 12px 35px 2px rgba(0, 0, 0, .12);
    -moz-box-shadow: 0 12px 35px 2px rgba(0, 0, 0, .12);
    box-shadow: 0 12px 35px 2px rgba(0, 0, 0, .12);
    border-color: #ddd
}

.bootstrap-timepicker-widget.dropdown-menu.open {
    display: inline-block
}

.bootstrap-timepicker-widget.dropdown-menu:before {
    border-bottom: 7px solid rgba(0, 0, 0, .2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    position: absolute
}

.bootstrap-timepicker-widget.dropdown-menu:after {
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    position: absolute
}

.bootstrap-timepicker-widget.timepicker-orient-left:before {
    left: 6px
}

.bootstrap-timepicker-widget.timepicker-orient-left:after {
    left: 7px
}

.bootstrap-timepicker-widget.timepicker-orient-right:before {
    right: 6px
}

.bootstrap-timepicker-widget.timepicker-orient-right:after {
    right: 7px
}

.bootstrap-timepicker-widget.timepicker-orient-top:before {
    top: -7px
}

.bootstrap-timepicker-widget.timepicker-orient-top:after {
    top: -6px
}

.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
    bottom: -7px;
    border-bottom: 0;
    border-top: 7px solid #999
}

.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
    bottom: -6px;
    border-bottom: 0;
    border-top: 6px solid #fff
}

.bootstrap-timepicker-widget a.btn,
.bootstrap-timepicker-widget input {
    -webkit-border-radius: 0;
    border-radius: 0
}

.bootstrap-timepicker-widget table {
    width: 100%;
    margin: 0
}

.bootstrap-timepicker-widget table td {
    text-align: center;
    height: 30px;
    margin: 0;
    padding: 2px
}

.bootstrap-timepicker-widget table td:not(.separator) {
    min-width: 30px
}

.bootstrap-timepicker-widget table td span {
    width: 100%
}

.bootstrap-timepicker-widget table td a {
    width: 100%;
    display: inline-block;
    margin: 0;
    outline: 0;
    color: #333;
    width: 35px;
    height: 35px;
    line-height: 35px
}

.bootstrap-timepicker-widget table td a:hover {
    text-decoration: none;
    background-color: #eee
}

.bootstrap-timepicker-widget table td a i {
    margin-top: 2px;
    font-size: 18px
}

.bootstrap-timepicker-widget table td input {
    width: 35px;
    margin: 0;
    text-align: center;
    color: #000;
    border: 1px solid #ededed;
    font-size: 14px
}

.bootstrap-timepicker-widget .modal-content {
    padding: 4px
}

.daterangepicker {
    position: absolute;
    color: inherit;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    width: 278px;
    max-width: none;
    padding: 0;
    margin-top: 7px;
    top: 100px;
    left: 20px;
    z-index: 3001;
    display: none;
    font-family: arial;
    font-size: 15px;
    line-height: 1em
}

.daterangepicker:after,
.daterangepicker:before {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, .2);
    content: ''
}

.daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc
}

.daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent
}

.daterangepicker.opensleft:before {
    right: 9px
}

.daterangepicker.opensleft:after {
    right: 10px
}

.daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto
}

.daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto
}

.daterangepicker.opensright:before {
    left: 9px
}

.daterangepicker.opensright:after {
    left: 10px
}

.daterangepicker.drop-up {
    margin-top: -7px
}

.daterangepicker.drop-up:before {
    top: initial;
    bottom: -7px;
    border-bottom: initial;
    border-top: 7px solid #ccc
}

.daterangepicker.drop-up:after {
    top: initial;
    bottom: -6px;
    border-bottom: initial;
    border-top: 6px solid #fff
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
    float: none
}

.daterangepicker.single .drp-selected {
    display: none
}

.daterangepicker.show-calendar .drp-calendar {
    display: block
}

.daterangepicker.show-calendar .drp-buttons {
    display: block
}

.daterangepicker.auto-apply .drp-buttons {
    display: none
}

.daterangepicker .drp-calendar {
    display: none;
    max-width: 270px
}

.daterangepicker .drp-calendar.left {
    padding: 8px 0 8px 8px
}

.daterangepicker .drp-calendar.right {
    padding: 8px
}

.daterangepicker .drp-calendar.single .calendar-table {
    border: none
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid #000;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px
}

.daterangepicker .calendar-table .next span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.daterangepicker .calendar-table .prev span {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer
}

.daterangepicker .calendar-table {
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #fff
}

.daterangepicker .calendar-table table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #eee;
    border-color: transparent;
    color: inherit
}

.daterangepicker td.week,
.daterangepicker th.week {
    font-size: 80%;
    color: #ccc
}

.daterangepicker td.off,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date {
    background-color: #fff;
    border-color: transparent;
    color: #999
}

.daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0
}

.daterangepicker td.start-date {
    border-radius: 4px 0 0 4px
}

.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0
}

.daterangepicker td.start-date.end-date {
    border-radius: 4px
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff
}

.daterangepicker th.month {
    width: auto
}

.daterangepicker option.disabled,
.daterangepicker td.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default
}

.daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%
}

.daterangepicker select.yearselect {
    width: 40%
}

.daterangepicker select.ampmselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect {
    width: 50px;
    margin: 0 auto;
    background: #eee;
    border: 1px solid #eee;
    padding: 2px;
    outline: 0;
    font-size: 12px
}

.daterangepicker .calendar-time {
    text-align: center;
    margin: 4px auto 0 auto;
    line-height: 30px;
    position: relative
}

.daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed
}

.daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 8px;
    border-top: 1px solid #ddd;
    display: none;
    line-height: 12px;
    vertical-align: middle
}

.daterangepicker .drp-selected {
    display: inline-block;
    font-size: 12px;
    padding-right: 8px
}

.daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-right: 1px solid #ddd
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left: 1px solid #ddd
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right: 1px solid #ddd
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid #ddd
}

.daterangepicker .ranges {
    float: none;
    text-align: left;
    margin: 0
}

.daterangepicker.show-calendar .ranges {
    margin-top: 8px
}

.daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.daterangepicker .ranges li {
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer
}

.daterangepicker .ranges li:hover {
    background-color: #eee
}

.daterangepicker .ranges li.active {
    background-color: #08c;
    color: #fff
}

@media (min-width:564px) {
    .daterangepicker {
        width: auto
    }

    .daterangepicker .ranges ul {
        width: 140px
    }

    .daterangepicker.single .ranges ul {
        width: 100%
    }

    .daterangepicker.single .drp-calendar.left {
        clear: none
    }

    .daterangepicker.single .drp-calendar,
    .daterangepicker.single .ranges {
        float: left
    }

    .daterangepicker {
        direction: ltr;
        text-align: left
    }

    .daterangepicker .drp-calendar.left {
        clear: left;
        margin-right: 0
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .daterangepicker .drp-calendar.right {
        margin-left: 0
    }

    .daterangepicker .drp-calendar.right .calendar-table {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        padding-right: 8px
    }

    .daterangepicker .drp-calendar,
    .daterangepicker .ranges {
        float: left
    }
}

@media (min-width:730px) {
    .daterangepicker .ranges {
        width: auto
    }

    .daterangepicker .ranges {
        float: left
    }

    .daterangepicker.rtl .ranges {
        float: right
    }

    .daterangepicker .drp-calendar.left {
        clear: none !important
    }
}

.daterangepicker.single.rtl .calendar,
.daterangepicker.single.rtl .ranges {
    float: right
}

.daterangepicker.rtl .drp-calendar {
    float: right
}

.daterangepicker.rtl {
    direction: rtl;
    text-align: right
}

.daterangepicker.rtl .calendar.left {
    clear: right;
    margin-left: 0
}

.daterangepicker.rtl .calendar.left .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.daterangepicker.rtl .calendar.right {
    margin-right: 0
}

.daterangepicker.rtl .calendar.right .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.daterangepicker.rtl .left .daterangepicker_input {
    padding-left: 12px
}

.daterangepicker.rtl .calendar.left .calendar-table {
    padding-left: 12px
}

.daterangepicker.rtl .calendar,
.daterangepicker.rtl .ranges {
    text-align: right;
    float: right
}

.daterangepicker.rtl .calendar-table .prev span {
    transform: rotate(315deg) !important;
    -webkit-transform: rotate(315deg) !important
}

.daterangepicker.rtl .calendar-table .next span {
    transform: rotate(-225deg) !important;
    -webkit-transform: rotate(-225deg) !important
}

.daterangepicker.rtl .calendar.left .calendar-table {
    padding-left: 0 !important;
    padding-right: 12px !important
}

:root {
    --navy-900: #043854;
    --navy-800: #056292;
    --navy-700: #0678a8;
    --navy-50: #e8f4f8;

    --gold-500: #f59c22;
    --gold-600: #d4850f;
    --gold-100: #fef3e0;

    --bg: #f8fafc;
    --white: #ffffff;

    --text-900: #111827;
    --text-700: #334155;
    --text-500: #64748b;
    --text-400: #94a3b8;

    --success: #10b981;
    --success-100: #d1fae5;
    --danger: #ef4444;
    --danger-100: #fee2e2;
    --warning: #f59e0b;
    --warning-100: #fef3c7;
    --info: #3b82f6;
    --info-100: #dbeafe;

    --border: #e5e7eb;
    --border-soft: #eef2f7;

    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 25px 60px rgba(4, 56, 84, 0.18);
    --shadow-gold: 0 12px 28px rgba(245, 156, 34, 0.32);

    --container: 1400px;

    --font-ar: "Alexandria", "Cairo", system-ui, sans-serif;
    --font-en: "Inter", system-ui, sans-serif;

    /* Main site variables (for integrated dashboard top-bar / footer) */
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
}

/* ============== Base reset additions ============== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-ar);
    background: var(--bg);
    color: var(--text-900);
    direction: rtl;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
}

/* ============== Layout helpers ============== */
.auth-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.auth-section {
    padding: 64px 0;
}

@media (min-width: 992px) {
    .auth-section {
        padding: 96px 0;
    }
}

/* ============== Buttons ============== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 15px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    text-align: center;
}

.btn:active {
    transform: translateY(1px);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: #fff;
    box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(245, 156, 34, .42);
}

.btn-primary {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
    box-shadow: 0 10px 24px rgba(4, 56, 84, .22);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(4, 56, 84, .3);
}

.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text-900);
}

.btn-outline:hover {
    border-color: var(--navy-800);
    color: var(--navy-800);
}

.btn-ghost {
    background: transparent;
    color: var(--text-700);
}

.btn-ghost:hover {
    background: var(--navy-50);
    color: var(--navy-800);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: var(--r-sm);
}

.btn-lg {
    padding: 16px 30px;
    font-size: 16px;
    border-radius: var(--r-md);
}

/* ============== Form fields ============== */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-700);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

.input-wrap {
    position: relative;
}

.input-wrap .icon-start,
.input-wrap .icon-end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-400);
    font-size: 16px;
    pointer-events: none;
}

.input-wrap .icon-start {
    right: 18px;
}

.input-wrap .icon-end {
    left: 18px;
    pointer-events: auto;
    cursor: pointer;
}

.input {
    width: 100%;
    padding: 14px 48px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 15px;
    background: #fff;
    color: var(--text-900);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.input::placeholder {
    color: var(--text-400);
}

.input:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(245, 156, 34, .12);
}

.input.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
}

.input.is-valid {
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
}

.input.with-icon-start {
    padding-right: 48px;
    padding-left: 18px;
}

.input.with-icon-end {
    padding-left: 48px;
    padding-right: 18px;
}

.input.with-both {
    padding-right: 48px;
    padding-left: 48px;
}

.field-error {
    font-size: 13px;
    color: var(--danger);
    display: none;
}

.field-error.show {
    display: block;
}

.field-hint {
    font-size: 12px;
    color: var(--text-500);
}

/* Checkbox */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text-700);
}

.checkbox input {
    display: none;
}

.checkbox .box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.checkbox input:checked+.box {
    background: var(--gold-500);
    border-color: var(--gold-500);
}

.checkbox input:checked+.box::after {
    content: "✓";
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.checkbox:hover .box {
    border-color: var(--gold-500);
}

.checkbox-link {
    color: var(--gold-600);
    font-weight: 600;
}

.checkbox-link:hover {
    text-decoration: underline;
}

/* ============== Auth split layout ============== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .auth-shell {
        grid-template-columns: 1.05fr 1fr;
    }
}

.auth-visual {
    position: relative;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 40px;
    color: #fff;
    overflow: hidden;
}

.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(4, 56, 84, .85) 0%, rgba(5, 98, 146, .65) 60%, rgba(4, 56, 84, .45) 100%);
    z-index: 1;
}

.auth-visual>* {
    position: relative;
    z-index: 2;
}

.auth-visual .visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.auth-visual .visual-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 800;
}

.auth-visual .visual-logo i {
    color: var(--gold-500);
}

.auth-visual .visual-lang {
    font-family: var(--font-en);
    background: rgba(255, 255, 255, .1);
    padding: 8px 14px;
    border-radius: var(--r-full);
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.auth-visual .visual-headline h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 14px;
}

.auth-visual .visual-headline h1 span {
    color: var(--gold-500);
}

.auth-visual .visual-headline p {
    font-size: 16px;
    opacity: .9;
    max-width: 480px;
}

.auth-visual .visual-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 520px;
}

.auth-visual .trust-pill {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 14px 16px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    backdrop-filter: blur(8px);
}

.auth-visual .trust-pill i {
    color: var(--gold-500);
    font-size: 16px;
}

@media (min-width: 992px) {
    .auth-visual {
        padding: 56px 64px;
    }

    .auth-visual .visual-headline h1 {
        font-size: 48px;
    }
}

/* Right form area */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: var(--r-2xl);
    padding: 44px 38px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
}

.auth-card.wide {
    max-width: 560px;
}

@media (max-width: 600px) {
    .auth-card {
        padding: 32px 24px;
        border-radius: 24px;
    }
}

.auth-card h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 8px;
}

.auth-card .subtitle {
    color: var(--text-500);
    font-size: 15px;
    margin-bottom: 28px;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 22px;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-row a {
    color: var(--gold-600);
    font-size: 14px;
    font-weight: 600;
}

.auth-row a:hover {
    text-decoration: underline;
}

.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-400);
    font-size: 13px;
    margin: 24px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 380px) {
    .social-row {
        grid-template-columns: 1fr;
    }
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-700);
    transition: all .2s;
}

.social-btn:hover {
    border-color: var(--navy-800);
    transform: translateY(-1px);
}

.social-btn .fa-google {
    color: #ea4335;
}

.social-btn .fa-facebook-f {
    color: #1877f2;
}

.social-btn .fa-apple {
    color: #000;
}

.auth-footer-text {
    text-align: center;
    margin-top: 24px;
    color: var(--text-500);
    font-size: 14px;
}

.auth-footer-text a {
    color: var(--gold-600);
    font-weight: 700;
}

.auth-footer-text a:hover {
    text-decoration: underline;
}

.guest-access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px;
    background: var(--navy-50);
    border-radius: var(--r-md);
    color: var(--navy-800);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px dashed var(--navy-700);
    transition: all .2s;
}

.guest-access:hover {
    background: #e3ebf7;
}

/* ============== Password strength meter ============== */
.pwd-meter {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.pwd-meter span {
    flex: 1;
    height: 5px;
    border-radius: 6px;
    background: var(--border);
    transition: background .25s;
}

.pwd-meter.s1 span:nth-child(-n+1) {
    background: var(--danger);
}

.pwd-meter.s2 span:nth-child(-n+2) {
    background: var(--warning);
}

.pwd-meter.s3 span:nth-child(-n+3) {
    background: var(--gold-500);
}

.pwd-meter.s4 span:nth-child(-n+4) {
    background: var(--success);
}

.pwd-label {
    font-size: 12px;
    color: var(--text-500);
    margin-top: 6px;
}

.pwd-label strong {
    color: var(--navy-800);
}

/* ============== Toast / alerts ============== */
.toast-host {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 280px;
    max-width: 360px;
    background: #fff;
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    border-inline-start: 4px solid var(--success);
    animation: slideIn .3s ease;
}

.toast.error {
    border-inline-start-color: var(--danger);
}

.toast.warn {
    border-inline-start-color: var(--warning);
}

.toast.info {
    border-inline-start-color: var(--info);
}

.toast i {
    font-size: 18px;
}

.toast.success i {
    color: var(--success);
}

.toast.error i {
    color: var(--danger);
}

.toast .toast-msg {
    font-size: 14px;
    color: var(--text-700);
}

@keyframes slideIn {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

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

/* ============== Modal (logout / auth modal) ============== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 56, 84, .55);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: #fff;
    border-radius: var(--r-2xl);
    width: 100%;
    max-width: 460px;
    padding: 32px;
    box-shadow: var(--shadow-xl);
    position: relative;
    transform: scale(.95) translateY(10px);
    transition: transform .3s ease;
}

.modal-overlay.open .modal {
    transform: scale(1) translateY(0);
}

.modal.wide {
    max-width: 540px;
}

.modal .modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.modal .modal-close:hover {
    background: var(--border);
}

.modal .modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold-100);
    color: var(--gold-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 18px;
}

.modal h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 8px;
}

.modal p {
    text-align: center;
    color: var(--text-500);
    font-size: 15px;
    margin-bottom: 24px;
}

.modal .modal-actions {
    display: flex;
    gap: 12px;
}

.modal .modal-actions .btn {
    flex: 1;
}

/* ============== Auth modal tabs ============== */
.auth-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg);
    padding: 6px;
    border-radius: var(--r-md);
    margin-bottom: 22px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    border-radius: var(--r-sm);
    font-weight: 600;
    color: var(--text-500);
    font-size: 14px;
    transition: all .2s;
}

.auth-tab.active {
    background: #fff;
    color: var(--navy-900);
    box-shadow: var(--shadow-sm);
}

/* ============== Navbar account menu ============== */
.nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.nav-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 14px;
    font-weight: 600;
    transition: all .25s;
    cursor: pointer;
}

.nav-account-btn:hover {
    background: rgba(255, 255, 255, .22);
}

.nav-account-btn .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.navbar.sticky .nav-account-btn {
    background: var(--navy-50);
    border-color: var(--border);
    color: var(--navy-800);
}

.navbar.sticky .nav-account-btn:hover {
    background: #e2eaf6;
}

.nav-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xl);
    padding: 8px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    border: 1px solid var(--border-soft);
}

.nav-account-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-account-menu .menu-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}

.nav-account-menu .menu-head strong {
    color: var(--navy-900);
    display: block;
    font-size: 14px;
}

.nav-account-menu .menu-head span {
    color: var(--text-500);
    font-size: 12px;
}

.nav-account-menu a,
.nav-account-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--text-700);
    text-align: start;
    font-weight: 500;
}

.nav-account-menu a:hover,
.nav-account-menu button:hover {
    background: var(--bg);
    color: var(--navy-800);
}

.nav-account-menu a i,
.nav-account-menu button i {
    color: var(--gold-500);
    width: 18px;
}

.nav-account-menu .divider-line {
    height: 1px;
    background: var(--border-soft);
    margin: 6px 0;
}

/* ============== Success state ============== */
.success-card {
    text-align: center;
    padding: 16px 0;
}

.success-card .success-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--success-100);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin-bottom: 18px;
    animation: pop .5s ease;
}

@keyframes pop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.success-card h2 {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--navy-900);
}

.success-card p {
    color: var(--text-500);
    margin-bottom: 22px;
}

/* ============== Dashboard layout ============== */
.dash-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    background: var(--bg);
}

@media (max-width: 991px) {
    .dash-shell {
        grid-template-columns: 1fr;
    }
}

.dash-sidebar {
    background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
    color: #fff;
    padding: 28px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 991px) {
    .dash-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 290px;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 9500;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
    }

    .dash-sidebar.open {
        transform: translateX(0);
    }
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 14px;
}

.dash-brand i {
    color: var(--gold-500);
    font-size: 22px;
}

.dash-brand strong {
    font-size: 18px;
    font-weight: 800;
}

.dash-brand small {
    display: block;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    margin-top: 2px;
}

.dash-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.dash-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
    cursor: pointer;
}

.dash-nav a i {
    width: 20px;
    text-align: center;
    color: rgba(255, 255, 255, .6);
}

.dash-nav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.dash-nav a:hover i {
    color: var(--gold-500);
}

.dash-nav a.active {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: #fff;
    box-shadow: 0 8px 18px rgba(245, 156, 34, .35);
}

.dash-nav a.active i {
    color: #fff;
}

.dash-nav .label {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 700;
    padding: 14px 14px 4px;
    letter-spacing: 1px;
}

.dash-side-foot {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-side-foot .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.dash-side-foot .who {
    flex: 1;
    min-width: 0;
}

.dash-side-foot .who strong {
    display: block;
    font-size: 14px;
}

.dash-side-foot .who span {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

/* Main */
.dash-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-topbar .topbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-900);
}

.dash-topbar .topbar-search {
    flex: 1;
    max-width: 360px;
    position: relative;
}

.dash-topbar .topbar-search input {
    width: 100%;
    padding: 10px 38px 10px 16px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font-size: 14px;
    transition: all .2s;
}

.dash-topbar .topbar-search input:focus {
    background: #fff;
    border-color: var(--gold-500);
    outline: none;
}

.dash-topbar .topbar-search i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--text-400);
    font-size: 14px;
}

.dash-topbar .topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all .2s;
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--navy-50);
    color: var(--navy-800);
}

.icon-btn .badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.dash-burger {
    display: none;
}

@media (max-width: 991px) {
    .dash-burger {
        display: inline-flex;
    }
}

.dash-content {
    padding: 28px 22px 60px;
}

.dash-content .container-fluid {
    max-width: 1300px;
    margin: 0 auto;
}

/* Welcome */
.dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 16px;
}

.dash-welcome h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy-900);
}

.dash-welcome h1 .wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave 1.6s infinite;
}

@keyframes wave {

    0%,
    60%,
    100% {
        transform: rotate(0);
    }

    10%,
    30% {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-8deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }
}

.dash-welcome p {
    color: var(--text-500);
    margin-top: 4px;
    font-size: 14px;
}

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.stat-card .stat-icon.gold {
    background: var(--gold-100);
    color: var(--gold-600);
}

.stat-card .stat-icon.navy {
    background: var(--navy-50);
    color: var(--navy-800);
}

.stat-card .stat-icon.green {
    background: var(--success-100);
    color: var(--success);
}

.stat-card .stat-icon.red {
    background: var(--danger-100);
    color: var(--danger);
}

.stat-card .stat-label {
    color: var(--text-500);
    font-size: 13px;
    font-weight: 500;
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy-900);
    margin-top: 4px;
}

.stat-card .stat-delta {
    font-size: 12px;
    color: var(--success);
    font-weight: 600;
    margin-top: 8px;
}

.stat-card .stat-delta.down {
    color: var(--danger);
}

/* Section card */
.section {
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: 24px;
    margin-bottom: 24px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-head h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-900);
}

.section-head .actions {
    display: flex;
    gap: 8px;
}

.link-btn {
    color: var(--gold-600);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.link-btn:hover {
    text-decoration: underline;
}

/* Dashboard sections (pages within dashboard) */
.dash-page {
    display: none;
}

.dash-page.active {
    display: block;
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Bookings list */
.booking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.booking-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    transition: all .25s;
}

.booking-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
}

.booking-card .booking-img {
    width: 120px;
    height: 110px;
    border-radius: var(--r-md);
    background-size: cover;
    background-position: center;
}

.booking-card .booking-info h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 6px;
}

.booking-card .booking-info .meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 8px;
}

.booking-card .booking-info .meta i {
    color: var(--gold-500);
    margin-inline-end: 4px;
}

.booking-card .booking-info .price {
    color: var(--navy-900);
    font-weight: 800;
    font-size: 18px;
}

.booking-card .booking-side {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
}

.status.confirmed {
    background: var(--success-100);
    color: var(--success);
}

.status.pending {
    background: var(--warning-100);
    color: var(--warning);
}

.status.cancelled {
    background: var(--danger-100);
    color: var(--danger);
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

@media (max-width: 600px) {
    .booking-card {
        grid-template-columns: 1fr;
    }

    .booking-card .booking-img {
        width: 100%;
        height: 160px;
    }

    .booking-card .booking-side {
        align-items: flex-start;
        text-align: start;
    }
}

/* Favorites */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 991px) {
    .fav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .fav-grid {
        grid-template-columns: 1fr;
    }
}

.fav-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all .25s;
}

.fav-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.fav-card .fav-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.fav-card .fav-remove {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.fav-card .fav-remove:hover {
    background: var(--danger);
    color: #fff;
}

.fav-card .fav-body {
    padding: 16px;
}

.fav-card .fav-loc {
    color: var(--text-500);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fav-card .fav-loc i {
    color: var(--gold-500);
}

.fav-card h4 {
    color: var(--navy-900);
    font-size: 16px;
    font-weight: 800;
    margin: 6px 0 10px;
}

.fav-card .fav-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gold-500);
    font-size: 13px;
    font-weight: 700;
}

.fav-card .fav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid var(--border-soft);
}

.fav-card .fav-price {
    font-weight: 800;
    color: var(--navy-900);
    font-size: 16px;
}

.fav-card .fav-price small {
    color: var(--text-500);
    font-weight: 500;
    font-size: 11px;
    display: block;
}

/* Notifications */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    position: relative;
    transition: all .2s;
}

.notif-item:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.notif-item.unread {
    background: linear-gradient(90deg, rgba(245, 156, 34, .06), transparent);
}

.notif-item.unread::before {
    content: "";
    position: absolute;
    top: 22px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: var(--gold-500);
    border-radius: 50%;
}

.notif-item .n-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-item .n-icon.success {
    background: var(--success-100);
    color: var(--success);
}

.notif-item .n-icon.info {
    background: var(--info-100);
    color: var(--info);
}

.notif-item .n-icon.gold {
    background: var(--gold-100);
    color: var(--gold-600);
}

.notif-item .n-body {
    flex: 1;
}

.notif-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 4px;
}

.notif-item p {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 4px;
}

.notif-item .n-time {
    color: var(--text-400);
    font-size: 12px;
}

/* Profile */
.profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

.profile-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
}

.profile-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
}

.profile-card h3 {
    font-size: 20px;
    color: var(--navy-900);
    font-weight: 800;
}

.profile-card .email {
    color: var(--text-500);
    font-size: 14px;
    margin-bottom: 18px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.profile-stats .ps {
    padding: 8px;
}

.profile-stats .ps strong {
    display: block;
    color: var(--navy-900);
    font-size: 18px;
    font-weight: 800;
}

.profile-stats .ps span {
    color: var(--text-500);
    font-size: 12px;
}

.profile-form {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
}

.profile-form h3 {
    font-size: 18px;
    color: var(--navy-900);
    font-weight: 800;
    margin-bottom: 6px;
}

.profile-form p.sub {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 22px;
}

/* Payments */
.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .pay-grid {
        grid-template-columns: 1fr;
    }
}

.method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    transition: all .2s;
}

.method-card:hover {
    border-color: var(--gold-500);
}

.method-card .m-logo {
    width: 56px;
    height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    font-family: var(--font-en);
}

.method-card .m-logo.visa {
    background: #1a1f71;
}

.method-card .m-logo.mc {
    background: linear-gradient(90deg, #eb001b, #f79e1b);
}

.method-card .m-info {
    flex: 1;
}

.method-card .m-info strong {
    display: block;
    color: var(--navy-900);
    font-size: 14px;
}

.method-card .m-info span {
    color: var(--text-500);
    font-size: 12px;
}

.method-card .m-default {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--gold-100);
    color: var(--gold-600);
    border-radius: 6px;
    font-weight: 700;
}

.tx-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    align-items: center;
}

.tx-row.head {
    font-weight: 700;
    color: var(--text-500);
    font-size: 12px;
    text-transform: uppercase;
}

.tx-row:last-child {
    border-bottom: 0;
}

.tx-amount {
    font-weight: 800;
    color: var(--navy-900);
}

@media (max-width: 600px) {
    .tx-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tx-row.head {
        display: none;
    }
}

/* Settings */
.settings-group {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    margin-bottom: 18px;
}

.settings-group h3 {
    font-size: 16px;
    color: var(--navy-900);
    font-weight: 800;
    margin-bottom: 4px;
}

.settings-group p.sub {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 18px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 12px;
}

.setting-row:last-child {
    border-bottom: 0;
}

.setting-row .label strong {
    display: block;
    color: var(--text-900);
    font-size: 14px;
}

.setting-row .label span {
    color: var(--text-500);
    font-size: 12px;
}

.switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.switch input {
    display: none;
}

.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 24px;
    cursor: pointer;
    transition: .25s;
}

.switch .slider::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

.switch input:checked+.slider {
    background: var(--gold-500);
}

.switch input:checked+.slider::before {
    right: 23px;
}

.lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .lang-grid {
        grid-template-columns: 1fr;
    }
}

.lang-grid .lang-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all .2s;
}

.lang-grid .lang-card.active {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.lang-grid .lang-card strong {
    color: var(--navy-900);
    font-size: 14px;
}

.lang-grid .lang-card small {
    color: var(--text-500);
    font-size: 12px;
    display: block;
}

.lang-grid .lang-card .flag {
    font-size: 24px;
}

/* Helpers */
.text-muted {
    color: var(--text-500);
}

.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-2 {
    margin-top: 12px;
}

.flex {
    display: flex;
}

.gap-2 {
    gap: 10px;
}

/* Overlay for dashboard mobile sidebar */
.dash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.dash-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar notification badge dot */
.badge-dot {
    margin-inline-start: auto;
    background: var(--gold-500);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    padding: 2px 8px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

/* Select dropdown for filters (used in dashboard bookings) */
.dash-select {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    background: #fff;
    color: var(--text-700);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s;
}

.dash-select:focus {
    outline: none;
    border-color: var(--gold-500);
}

/* Dashboard logout icon button */
.topbar-logout:hover {
    color: var(--danger);
}

/* Fade-in animation for dashboard page transitions */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.dash-page.active {
    animation: fadeSlideIn .35s ease;
}

/* Premium quick action cards (overview page) */
.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--border-soft);
    transition: all .3s ease;
    cursor: pointer;
}

.quick-action-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.quick-action-card i {
    font-size: 28px;
}

.quick-action-card.gold {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
}

.quick-action-card.gold:hover {
    box-shadow: 0 20px 40px rgba(4, 56, 84, .3);
}

/* Fine-tune sidebar scrollbar */
.dash-sidebar::-webkit-scrollbar {
    width: 4px;
}

.dash-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.dash-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 4px;
}

/* Mobile bottom safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .dash-content {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
}

/* Premium loyalty card pulse */
.loyalty-progress {
    margin-top: 16px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--r-md);
    padding: 4px;
    display: flex;
}

.loyalty-progress .fill {
    height: 6px;
    background: var(--gold-500);
    border-radius: 6px;
    transition: width .6s ease;
}

.loyalty-progress .empty {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, .1);
    border-radius: 6px;
}

/* Animations */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ==============================================================
   NEW AUTH DESIGN (v2) - Premium 2026
   ============================================================== */

.auth-page-body {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Minimal top bar */
.auth-mini-bar {
    background: var(--navy-900);
    color: #fff;
    padding: 10px 0;
    flex-shrink: 0;
}

.auth-mini-bar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mini-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.mini-logo i {
    color: var(--gold-500);
    font-size: 16px;
}

.mini-meta {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.mini-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mini-meta i {
    color: var(--gold-500);
    font-size: 12px;
}

.mini-lang {
    background: rgba(255, 255, 255, .1);
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .15);
    font-family: var(--font-en);
}

@media (max-width: 768px) {
    .mini-meta span:not(.mini-lang) {
        display: none;
    }

    .mini-logo span {
        display: none;
    }

    .auth-mini-bar {
        padding: 8px 0;
    }
}

/* New auth shell - split, no scroll */
.auth-shell-new {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    overflow: hidden;
}

/* Form side (left in RTL) */
.auth-form-side-new {
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    background: var(--bg);
    overflow-y: auto;
    min-height: 0;
}

.auth-card-new {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 24px;
    padding: 32px 32px 28px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border-soft);
    animation: cardIn .5s ease;
    margin: auto;
}

.auth-card-new.narrow {
    max-width: 420px;
    padding: 28px 28px 24px;
}

.auth-card-new.compact {
    max-width: 480px;
    padding: 28px 28px 22px;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.auth-card-head {
    margin-bottom: 18px;
}

.auth-card-head h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 6px;
    letter-spacing: -.3px;
}

.auth-card-head h2 span {
    display: inline-block;
}

.auth-card-head p {
    color: var(--text-500);
    font-size: 14px;
    line-height: 1.6;
}

/* Tighter spacing for form fields inside new card */
.auth-card-new .field {
    margin-bottom: 12px;
}

.auth-card-new .field label {
    font-size: 13px;
    margin-bottom: 4px;
}

.auth-card-new .field-row {
    gap: 12px;
}

.auth-card-new .field-row .field {
    margin-bottom: 12px;
}

.auth-card-new .input {
    padding: 11px 44px;
    font-size: 14px;
}

.auth-card-new .input.with-icon-start {
    padding-right: 44px;
    padding-left: 14px;
}

.auth-card-new .input.with-icon-end {
    padding-left: 44px;
    padding-right: 14px;
}

.auth-card-new .input.with-both {
    padding-right: 44px;
    padding-left: 44px;
}

.auth-card-new .input-wrap .icon-start {
    right: 14px;
    font-size: 14px;
}

.auth-card-new .input-wrap .icon-end {
    left: 14px;
    font-size: 14px;
}

.auth-card-new .auth-row {
    margin: 4px 0 14px;
}

.auth-card-new .auth-row a {
    font-size: 13px;
}

.auth-card-new .btn-lg {
    padding: 13px 24px;
    font-size: 15px;
}

.auth-card-new .divider {
    margin: 14px 0;
    font-size: 12px;
}

.auth-card-new .social-row {
    gap: 8px;
}

.auth-card-new .social-btn {
    padding: 9px 8px;
    font-size: 13px;
    border-radius: 12px;
}

.auth-card-new .guest-access {
    margin-top: 12px;
    padding: 10px;
    font-size: 13px;
}

.auth-card-new .auth-footer-text {
    margin-top: 14px;
    font-size: 13px;
}

.auth-card-new .pwd-meter {
    margin-top: 6px;
}

.auth-card-new .pwd-label {
    margin-top: 4px;
    font-size: 11px;
}

/* Visual side (right in RTL) */
.auth-visual-new {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow: hidden;
    min-height: 0;
}

@media (max-width:768px) {
    .auth-visual-new {
        display: none;
    }
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(4, 56, 84, .85) 0%, rgba(5, 98, 146, .7) 50%, rgba(4, 56, 84, .55) 100%);
}

.visual-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.visual-lang-pill {
    align-self: flex-start;
    background: rgba(255, 255, 255, .12);
    padding: 7px 16px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    font-family: var(--font-en);
}

.visual-headline-new {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.visual-eyebrow {
    display: inline-block;
    background: rgba(245, 156, 34, .18);
    color: var(--gold-500);
    padding: 6px 14px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
    border: 1px solid rgba(245, 156, 34, .3);
    letter-spacing: .3px;
}

.visual-headline-new h1 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.5px;
}

.visual-headline-new h1 span {
    color: var(--gold-500);
    display: inline-block;
}

.visual-headline-new p {
    font-size: 15px;
    line-height: 1.7;
    opacity: .9;
    max-width: 460px;
}

.visual-trust-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.trust-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    transition: all .25s;
}

.trust-card:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}

.trust-card i {
    color: var(--gold-500);
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Mobile - stack, no scroll, visual on top */
@media (max-width: 991px) {
    .auth-shell-new {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        overflow: hidden;
    }

    .auth-visual-new {
        display: none !important;
    }

    .auth-form-side-new {
        padding: 24px 16px;
    }

    .auth-card-new {
        padding: 24px 20px;
        border-radius: 20px;
        margin: auto;
    }

    .auth-card-new.narrow,
    .auth-card-new.compact {
        padding: 24px 20px;
    }

    .auth-card-head h2 {
        font-size: 20px;
    }

    .mini-meta span:nth-child(1),
    .mini-meta span:nth-child(2) {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-shell-new {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .auth-card-new {
        padding: 20px 16px;
    }
}

/* Animation entrance for visual */
@keyframes visualIn {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.auth-visual-new {
    animation: visualIn .8s ease;
}

.visual-headline-new {
    animation: slideUp .7s ease .1s both;
}

.visual-trust-new {
    animation: slideUp .7s ease .25s both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* ==============================================================
   ACCOUNT HUB (integrated dashboard)
   - Main site navbar + footer stays
   - Horizontal sub-nav replaces sidebar
   - Feels like part of the website (Booking.com / Airbnb style)
   ============================================================== */

/* Welcome banner */
.hub-welcome {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: #fff;
    padding: 28px 0;
}

.hub-welcome-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hub-greeting h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.hub-greeting h1 span {
    color: var(--gold-500);
}

.hub-greeting p {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.hub-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.hub-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 12px 18px;
    transition: all .25s;
}

.hub-stat:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-2px);
}

.hub-stat i {
    color: var(--gold-500);
    font-size: 20px;
}

.hub-stat strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.hub-stat span {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

/* Horizontal account sub-nav */
.hub-navbar {
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hub-nav-links {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hub-nav-links::-webkit-scrollbar {
    display: none;
}

.hub-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-700);
    transition: all .2s;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
}

.hub-link:hover {
    background: var(--navy-50);
    color: var(--navy-800);
}

.hub-link.active {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 156, 34, .3);
}

.hub-link.active i {
    color: #fff;
}

.hub-link i {
    font-size: 15px;
    color: var(--text-400);
    transition: color .2s;
}

.hub-link:hover i {
    color: var(--gold-500);
}

.hub-badge {
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
}

.hub-link.active .hub-badge {
    background: rgba(255, 255, 255, .25);
}

/* Content */
.hub-main {
    min-height: 60vh;
    padding: 28px 0 48px;
    background: var(--bg);
}

.hub-page {
    display: none;
}

.hub-page.active {
    display: block;
    animation: fadeIn .3s ease;
}

/* Quick actions */
.hub-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .hub-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .hub-actions {
        grid-template-columns: 1fr;
    }
}

.hub-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--border-soft);
    transition: all .3s;
    text-align: center;
    color: var(--text-900);
    cursor: pointer;
    text-decoration: none;
}

.hub-action-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.hub-action-card i {
    font-size: 28px;
    color: var(--gold-500);
}

.hub-action-card span {
    font-weight: 600;
    font-size: 14px;
}

.hub-action-card.primary {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
}

.hub-action-card.primary i {
    color: var(--gold-500);
}

.hub-action-card.primary:hover {
    box-shadow: 0 20px 40px rgba(4, 56, 84, .3);
}

/* Hub sections (shared) */
.hub-section {
    margin-bottom: 28px;
}

.hub-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.hub-section-head h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-900);
}

.hub-more {
    color: var(--gold-600);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.hub-more:hover {
    text-decoration: underline;
}

/* Hub cards used in profile/payments/settings */
.hub-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.hub-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 2px;
}

.hub-card-sub {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 16px;
}

.hub-card .field {
    margin-bottom: 10px;
}

.hub-card .field label {
    font-size: 13px;
}

.hub-card .input {
    padding: 10px 42px;
    font-size: 14px;
}

.hub-card .input.with-icon-start {
    padding-right: 42px;
    padding-left: 12px;
}

.hub-card .input.with-icon-end {
    padding-left: 42px;
    padding-right: 12px;
}

.hub-card .input-wrap .icon-start {
    right: 14px;
    font-size: 14px;
}

.hub-card .input-wrap .icon-end {
    left: 14px;
    font-size: 14px;
}

.hub-card .field-row {
    gap: 12px;
}

.hub-card .field-row .field {
    margin-bottom: 10px;
}

/* Profile card (left column) */
.hub-profile-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.hub-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
}

.hub-profile-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-900);
}

.hub-profile-card .email {
    color: var(--text-500);
    font-size: 14px;
    margin-bottom: 16px;
}

.hub-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.hub-profile-stats strong {
    display: block;
    color: var(--navy-900);
    font-size: 18px;
    font-weight: 800;
}

.hub-profile-stats span {
    color: var(--text-500);
    font-size: 12px;
}

/* Grid layouts */
.hub-grid-2col {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
}

@media (max-width: 768px) {
    .hub-grid-2col {
        grid-template-columns: 1fr;
    }
}

.hub-grid-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 768px) {
    .hub-grid-columns {
        grid-template-columns: 1fr;
    }
}

/* Filter select */
.hub-select {
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 13px;
    background: #fff;
    color: var(--text-700);
    font-family: inherit;
    cursor: pointer;
}

.hub-select:focus {
    outline: none;
    border-color: var(--gold-500);
}

.hub-filter-group {
    display: flex;
    gap: 8px;
}

/* Mobile */
@media (max-width: 768px) {
    .hub-welcome {
        padding: 20px 0;
    }

    .hub-greeting h1 {
        font-size: 20px;
    }

    .hub-stats {
        gap: 10px;
    }

    .hub-stat {
        padding: 10px 14px;
    }

    .hub-stat i {
        font-size: 16px;
    }

    .hub-stat strong {
        font-size: 15px;
    }

    .hub-stat span {
        font-size: 11px;
    }

    .hub-nav-links {
        padding: 2px 0;
    }

    .hub-link {
        padding: 10px 12px;
        font-size: 13px;
        gap: 6px;
    }

    .hub-link i {
        display: none;
    }

    .hub-main {
        padding: 18px 0 32px;
    }

    .hub-page.active {
        animation: none;
    }

    .hub-profile-card {
        padding: 22px 16px;
    }

    .hub-card {
        padding: 16px;
    }
}

/* ==============================================================
   MAIN SITE COMPONENTS (for integrated dashboard)
   - Top bar, navbar, footer same as الرئيسية.html
   ============================================================== */

/* Top bar */
.top-bar {
    background: var(--navy-900);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--gold-500);
}

.top-bar .social-icons a {
    color: #fff;
    opacity: .8;
}

.top-bar .social-icons a:hover {
    opacity: 1;
    color: var(--gold-500);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar shared */
.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.logo-icon {
    color: var(--gold-500);
}

/* Footer */
.footer {
    background: var(--navy-900);
    color: #fff;
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.footer-logo {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo span {
    color: var(--gold-500);
}

.footer-about {
    opacity: .7;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.7;
}

.footer h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 24px;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--gold-500);
    padding-right: 6px;
}

.footer .social-icons {
    display: flex;
    gap: 16px;
    font-size: 20px;
}

.footer .social-icons a {
    color: #fff;
    opacity: .8;
}

.footer .social-icons a:hover {
    color: var(--gold-500);
    opacity: 1;
}

.newsletter-form {
    display: flex;
    margin-top: 16px;
}

.newsletter-input {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
    font-size: 14px;
}

.newsletter-btn {
    background: var(--gold-500);
    color: #fff;
    border: none;
    padding: 0 28px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font-ar);
    transition: background .25s;
}

.newsletter-btn:hover {
    background: var(--gold-600);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: .7;
    font-size: 14px;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .footer {
        padding: 48px 0 24px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-input {
        padding: 12px 16px;
        font-size: 13px;
    }

    .newsletter-btn {
        padding: 0 20px;
        font-size: 13px;
    }
}

/* Dashboard mobile: top-bar left hidden */
@media (max-width: 768px) {
    .top-bar-left {
        display: none;
    }

    .nav-links {
        display: none;
    }
}

/* Ensure main page container works */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==============================================================
   ACCOUNT DASHBOARD - page inside main site
   - Uses main site header + footer (no separate admin panel)
   - Horizontal account navigation below navbar
   - Content sections flow naturally like a regular page
   ============================================================== */

/* Account nav bar (horizontal tabs) */
.account-nav-wrap {
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.account-nav {
    display: flex;
    gap: 4px;
    padding: 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.account-nav::-webkit-scrollbar {
    display: none;
}

.account-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-full);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-500);
    border: none;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-ar);
    position: relative;
}

.account-nav-item:hover {
    background: var(--navy-50);
    color: var(--navy-800);
}

.account-nav-item.active {
    background: var(--navy-900);
    color: #fff;
    box-shadow: 0 4px 12px rgba(4, 56, 84, 0.2);
}

.account-nav-item i {
    font-size: 15px;
}

.ac-badge {
    background: var(--gold-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-full);
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

.ac-badge-red {
    background: var(--danger);
}

/* Account page content */
.account-page {
    padding: 28px 0 60px;
    background: var(--bg);
    min-height: 60vh;
}

/* Welcome banner */
.welcome-banner {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
    color: #fff;
    border-radius: 24px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.welcome-text h1 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
}

.welcome-name {
    color: var(--gold-500);
}

.welcome-text p {
    font-size: 14px;
    opacity: .85;
}

.welcome-actions {
    flex-shrink: 0;
}

.welcome-actions .btn-outline {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.welcome-actions .btn-outline:hover {
    background: rgba(255, 255, 255, .2);
}

/* Stats */
.ac-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 991px) {
    .ac-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ac-stats {
        grid-template-columns: 1fr;
    }
}

.ac-stat {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: all .25s;
}

.ac-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ac-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ac-stat-icon.gold {
    background: var(--gold-100);
    color: var(--gold-600);
}

.ac-stat-icon.navy {
    background: var(--navy-50);
    color: var(--navy-800);
}

.ac-stat-icon.green {
    background: var(--success-100);
    color: var(--success);
}

.ac-stat-icon.red {
    background: var(--danger-100);
    color: var(--danger);
}

.ac-stat-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy-900);
    line-height: 1.2;
}

.ac-stat-lbl {
    font-size: 13px;
    color: var(--text-500);
    font-weight: 500;
}

.ac-stat-delta {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-400);
    margin-top: 4px;
}

.ac-stat-delta.up {
    color: var(--success);
}

.ac-stat-delta.down {
    color: var(--danger);
}

/* Page sections (show/hide) */
.ac-page {
    display: none;
}

.ac-page.active {
    display: block;
    animation: fadeSlideIn .35s ease;
}

.ac-section {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.ac-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.ac-section-head h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-900);
}

.ac-link-btn {
    background: none;
    border: none;
    color: var(--gold-600);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-ar);
}

.ac-link-btn:hover {
    text-decoration: underline;
}

.ac-filter-group {
    display: flex;
    gap: 8px;
}

/* Booking cards (same as dashboard but with ac- prefix) */
.ac-booking-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ac-booking-card {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 16px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    transition: all .25s;
}

.ac-booking-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
}

.ac-book-img {
    width: 110px;
    height: 100px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
}

.ac-book-info h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 6px;
}

.ac-book-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-500);
    font-size: 12px;
    margin-bottom: 6px;
}

.ac-book-meta i {
    color: var(--gold-500);
    margin-inline-end: 4px;
}

.ac-book-price {
    color: var(--navy-900);
    font-weight: 800;
    font-size: 17px;
}

.ac-book-side {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

@media (max-width: 600px) {
    .ac-booking-card {
        grid-template-columns: 1fr;
    }

    .ac-book-img {
        width: 100%;
        height: 140px;
    }

    .ac-book-side {
        align-items: flex-start;
        text-align: start;
    }
}

/* Quick action grid */
.ac-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .ac-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .ac-quick-grid {
        grid-template-columns: 1fr;
    }
}

.ac-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1.5px solid var(--border-soft);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    font-family: var(--font-ar);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-700);
    transition: all .3s;
}

.ac-quick-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ac-quick-card i {
    font-size: 26px;
    color: var(--gold-500);
}

.ac-quick-card.gold-card {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
    border-color: transparent;
}

.ac-quick-card.gold-card i {
    color: var(--gold-500);
}

.ac-quick-card.gold-card:hover {
    box-shadow: 0 20px 40px rgba(4, 56, 84, .3);
}

/* Profile grid */
.ac-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .ac-profile-grid {
        grid-template-columns: 1fr;
    }
}

.ac-prof-card {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
}

.ac-prof-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 12px;
}

.ac-prof-card h3 {
    font-size: 18px;
    color: var(--navy-900);
    font-weight: 800;
}

.ac-prof-email {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 14px;
}

.ac-prof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.ac-prof-stats div strong {
    display: block;
    color: var(--navy-900);
    font-size: 17px;
    font-weight: 800;
}

.ac-prof-stats div span {
    color: var(--text-500);
    font-size: 12px;
}

.ac-prof-form {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 24px;
}

.ac-prof-form h3 {
    font-size: 17px;
    color: var(--navy-900);
    font-weight: 800;
    margin-bottom: 4px;
}

.ac-prof-sub {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 18px;
}

/* Favorites grid */
.ac-fav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .ac-fav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ac-fav-grid {
        grid-template-columns: 1fr;
    }
}

.ac-fav-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    transition: all .25s;
}

.ac-fav-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ac-fav-img {
    height: 170px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.ac-fav-rm {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all .2s;
}

.ac-fav-rm:hover {
    background: var(--danger);
    color: #fff;
}

.ac-fav-body {
    padding: 14px;
}

.ac-fav-loc {
    color: var(--text-500);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-fav-loc i {
    color: var(--gold-500);
}

.ac-fav-body h4 {
    color: var(--navy-900);
    font-size: 15px;
    font-weight: 800;
    margin: 6px 0 8px;
}

.ac-fav-rating {
    color: var(--gold-500);
    font-size: 12px;
    font-weight: 700;
}

.ac-fav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-top: 1px solid var(--border-soft);
}

.ac-fav-price {
    font-weight: 800;
    color: var(--navy-900);
    font-size: 15px;
}

.ac-fav-price small {
    color: var(--text-500);
    font-weight: 500;
    font-size: 11px;
    display: block;
}

/* Notifications */
.ac-notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ac-notif {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    transition: all .2s;
    position: relative;
}

.ac-notif:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.ac-notif.unread {
    background: linear-gradient(90deg, rgba(245, 156, 34, .06), transparent);
    border-inline-start: 3px solid var(--gold-500);
}

.ac-notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.ac-notif-icon.green {
    background: var(--success-100);
    color: var(--success);
}

.ac-notif-icon.blue {
    background: var(--info-100);
    color: var(--info);
}

.ac-notif-icon.gold {
    background: var(--gold-100);
    color: var(--gold-600);
}

.ac-notif-body h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 3px;
}

.ac-notif-body p {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 3px;
}

.ac-notif-time {
    color: var(--text-400);
    font-size: 12px;
}

/* Payment methods */
.ac-pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ac-pay-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    transition: all .2s;
}

.ac-pay-card:hover {
    border-color: var(--gold-500);
}

.ac-pay-logo {
    width: 50px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    font-family: var(--font-en);
    flex-shrink: 0;
}

.ac-pay-logo.visa {
    background: #1a1f71;
}

.ac-pay-logo.mc {
    background: linear-gradient(90deg, #eb001b, #f79e1b);
}

.ac-pay-logo.bank {
    background: var(--gold-500);
    font-size: 16px;
}

.ac-pay-logo.cash {
    background: #25d366;
    font-size: 16px;
}

.ac-pay-info {
    flex: 1;
}

.ac-pay-info strong {
    display: block;
    color: var(--navy-900);
    font-size: 14px;
}

.ac-pay-info span {
    color: var(--text-500);
    font-size: 12px;
}

.ac-pay-default {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--gold-100);
    color: var(--gold-600);
    border-radius: 6px;
    font-weight: 700;
}

/* Transactions */
.ac-tx {
    background: var(--bg);
    border-radius: 14px;
    overflow: hidden;
}

.ac-tx-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    align-items: center;
}

.ac-tx-row:last-child {
    border-bottom: 0;
}

.ac-tx-row.head {
    font-weight: 700;
    color: var(--text-500);
    font-size: 12px;
}

.ac-tx-muted {
    color: var(--text-500);
    font-size: 13px;
}

.ac-tx-amount {
    font-weight: 800;
    color: var(--navy-900);
}

@media (max-width: 600px) {
    .ac-tx-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ac-tx-row.head {
        display: none;
    }
}

/* Loyalty card */
.ac-loyalty {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.ac-loyalty-card {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
    color: #fff;
    border-radius: 20px;
    padding: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
}

.ac-loyalty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ac-loyalty-icon i {
    color: var(--gold-500);
}

.ac-loyalty-label {
    font-size: 12px;
    opacity: .7;
}

.ac-loyalty-val {
    font-size: 28px;
    font-weight: 800;
}

.ac-loyalty-val span {
    font-size: 14px;
    font-weight: 500;
}

.ac-loyalty-eq {
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
}

.ac-loyalty-eq div:first-child {
    font-size: 11px;
    opacity: .7;
}

.ac-loyalty-eq div:last-child {
    font-size: 18px;
    font-weight: 800;
    color: var(--gold-500);
}

.ac-loyalty-bar {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .08);
    border-radius: 10px;
    height: 6px;
    overflow: hidden;
}

.ac-loyalty-fill {
    height: 100%;
    background: var(--gold-500);
    border-radius: 10px;
    transition: width .6s ease;
}

.ac-loyalty-levels {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: .6;
}

/* Settings */
.ac-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ac-settings-group {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 20px;
}

.ac-settings-group h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 4px;
}

.ac-settings-sub {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 16px;
}

.ac-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 12px;
}

.ac-setting-row:last-child {
    border-bottom: 0;
}

.ac-setting-row div strong {
    display: block;
    color: var(--text-900);
    font-size: 14px;
}

.ac-setting-row div span {
    color: var(--text-500);
    font-size: 12px;
}

.ac-danger-zone {
    border: 2px solid var(--danger);
}

/* Language grid in settings */
.ac-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 380px) {
    .ac-lang-grid {
        grid-template-columns: 1fr;
    }
}

.ac-lang-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
}

.ac-lang-card.active {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.ac-lang-card strong {
    color: var(--navy-900);
    font-size: 14px;
}

.ac-lang-card small {
    color: var(--text-500);
    font-size: 12px;
    display: block;
}

.ac-lang-card span:first-child {
    font-size: 22px;
}

/* ==============================================================
   Shared / legacy dashboard styles kept for backward compat
   ============================================================== */

/* ==============================================================
   Site Nav & Top Bar Integration for Auth Pages
   ============================================================== */
.top-bar {
    background-color: var(--navy-900);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
    position: relative;
    z-index: 1001;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--gold-500);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
    margin: 0 4px;
    transition: all 0.3s;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--gold-500);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 18px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    box-sizing: border-box;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 10px 0;
    box-shadow: 0 1px 0 rgba(7, 26, 53, 0.06), 0 4px 24px rgba(7, 26, 53, 0.04);
}

.navbar.sticky .nav-links a {
    color: var(--primary-navy);
}

.navbar.sticky .nav-links a:hover,
.navbar.sticky .nav-links a.active {
    color: var(--luxury-gold);
}

.navbar.sticky .nav-links a.active::after {
    background: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 44px;
    width: auto;
    transition: height 0.3s ease;
}

.navbar.sticky .logo-img {
    height: 38px;
}

.nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    /* padding: 8px 14px; */
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

.nav-links a:hover {
    color: var(--luxury-gold);
    background: rgba(201, 168, 76, 0.08);
}

.nav-links a.active {
    color: var(--luxury-gold);
    font-weight: 600;
}

/* Auth page hero layout */
.auth-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 140px;
    padding-bottom: 60px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}

.auth-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.85) 0%,
            rgba(15, 23, 42, 0.5) 50%,
            rgba(15, 23, 42, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.auth-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Mobile responsive menu */
.mobile-nav-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.mobile-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar.sticky .mobile-nav-toggle {
    color: var(--primary-navy);
    background: rgba(10, 26, 47, 0.04);
    border-color: rgba(10, 26, 47, 0.08);
}

.navbar.sticky .mobile-nav-toggle:hover {
    background: rgba(10, 26, 47, 0.08);
    border-color: rgba(10, 26, 47, 0.12);
}

@media (max-width: 991px) {
    .navbar {
        padding: 14px 0;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 12px 20px 20px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 40px rgba(7, 26, 53, 0.1);
        gap: 2px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        color: var(--primary-navy) !important;
        /* padding: 12px 16px; */
        border-radius: 10px;
        font-size: 15px;
        width: 100%;
        text-align: right;
        transition: all 0.25s ease;
    }

    .nav-links a:hover {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.06);
    }

    .nav-links a.active {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.08);
        font-weight: 600;
    }

    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-img {
        height: 38px;
    }
}

@media (max-width: 768px) {
    .top-bar-right span:not(:first-child) {
        display: none;
    }

    .top-bar-left .social-icons {
        display: none;
    }
}

/* Auth top bar */
.auth-page-body .top-bar {
    flex-shrink: 0;
}

/* Auth navbar specific styles */
.auth-page-body .navbar {
    position: relative;
    top: auto;
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 1001;
    flex-shrink: 0;
}

.auth-page-body .navbar .nav-links a {
    color: var(--text-900) !important;
}

.auth-page-body .navbar .nav-links a:hover {
    color: var(--gold-500) !important;
}

.auth-page-body .navbar .btn-gold {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: #fff;
}

.auth-page-body .navbar .mobile-nav-toggle {
    color: var(--text-900);
}

/* Auth navbar nav-account-btn - for light navbar */
.auth-page-body .navbar .nav-account-btn {
    background: var(--navy-900);
    color: #fff;
    border: 1px solid var(--navy-900);
}

.auth-page-body .navbar .nav-account-btn:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
}

.auth-page-body .navbar .nav-account-btn .avatar {
    background: var(--gold-500);
    color: #fff;
}

/* Auth navbar mobile */
@media (max-width: 991px) {
    .auth-page-body .navbar .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #fff;
        flex-direction: column;
        padding: 16px 24px;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        border-top: none;
        z-index: 9999;
    }

    .auth-page-body .navbar .nav-links.open {
        display: flex;
    }

    .auth-page-body .navbar .nav-links a {
        color: var(--text-900) !important;
        /* padding: 12px 0; */
        border-bottom: 1px solid var(--border-soft);
        width: 100%;
    }

    .auth-page-body .navbar .nav-links a:last-child {
        border-bottom: none;
    }

    .auth-page-body .navbar .nav-links a:hover {
        color: var(--gold-500) !important;
    }

    .auth-page-body .navbar .mobile-nav-toggle {
        display: flex;
    }
}

/* ==============================================================
   Unified Mobile Navigation & Logo Styling
   ============================================================== */
.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo:hover .logo-img {
    transform: scale(1.05);
}

@media (max-width: 991px) {

    /* Mobile account panel inside toggle menu */
    .mobile-account-panel {
        padding: 16px 0 0;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        margin-top: 16px;
        width: 100%;
    }

    .mobile-account-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding: 0 4px;
    }

    .mobile-account-user .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--gold-500);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 16px;
        border: 2px solid var(--white);
        box-shadow: var(--shadow-sm);
    }

    .mobile-account-user .info {
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .mobile-account-user .info strong {
        color: var(--text-900);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .mobile-account-user .info span {
        color: var(--text-500);
        font-size: 12px;
    }

    .mobile-account-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-account-links a,
    .mobile-account-links button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border-radius: var(--r-sm);
        font-size: 14px;
        color: var(--text-700) !important;
        text-align: right;
        font-weight: 600;
        background: transparent;
        border: none;
        transition: all 0.2s;
    }

    .mobile-account-links a:hover,
    .mobile-account-links button:hover {
        background: var(--navy-50);
        color: var(--navy-800) !important;
    }

    .mobile-account-links a i,
    .mobile-account-links button i {
        color: var(--gold-500);
        font-size: 15px;
        width: 20px;
    }

    .mobile-account-links button {
        color: var(--danger) !important;
        margin-top: 4px;
        border-top: 1px dashed var(--border-soft);
        padding-top: 14px;
        border-radius: 0;
    }

    .mobile-account-links button i {
        color: var(--danger);
    }
}

/* ==============================================================
   Premium Redesigned User Profile Page
   ============================================================== */

/* Hero Banner Header */
.account-hero {
    background: linear-gradient(135deg, rgba(4, 56, 84, 0.95) 0%, rgba(5, 98, 146, 0.8) 100%), url('../images/hero.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 140px 0 60px;
    text-align: center;
    margin-top: -120px;
    /* Offset absolute navbar */
    position: relative;
    z-index: 1;
}

.account-hero-content {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.account-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    font-family: var(--font-ar);
}

.account-hero p {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
}

/* Two-column layout grid */
.account-layout-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.account-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 991px) {
    .account-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar User Info Card */
.account-sidebar-card {
    background: #fff;
    border-radius: var(--r-xl);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: 32px 24px;
    text-align: center;
    position: sticky;
    top: 90px;
}

.account-user-avatar-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
}

.account-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 800;
    border: 4px solid #fff;
    box-shadow: var(--shadow-md);
}

.account-user-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    background: var(--gold-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    border: 2px solid #fff;
}

.account-sidebar-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-900);
    margin-top: 14px;
}

.account-sidebar-card .email {
    color: var(--text-500);
    font-size: 13px;
    margin-bottom: 24px;
}

/* Loyalty Points details */
.account-loyalty-panel {
    background: var(--navy-50);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 24px;
    text-align: right;
    border: 1px solid rgba(4, 56, 84, 0.06);
}

.account-loyalty-panel .title {
    font-size: 12px;
    color: var(--text-500);
    font-weight: 600;
    display: block;
}

.account-loyalty-panel .val {
    font-size: 24px;
    font-weight: 800;
    color: var(--navy-900);
    margin-top: 2px;
}

.account-loyalty-panel .val span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-500);
}

.account-loyalty-progress-bar {
    background: var(--border);
    height: 6px;
    border-radius: var(--r-full);
    margin-top: 10px;
    overflow: hidden;
}

.account-loyalty-progress-fill {
    background: var(--gold-500);
    height: 100%;
    width: 65%;
    border-radius: var(--r-full);
    transition: width 0.5s ease;
}

/* Sidebar Vertical Tabs Menu */
.account-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border-soft);
    padding-top: 20px;
}

.account-sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-700);
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: right;
    font-family: var(--font-ar);
}

.account-sidebar-menu-item i {
    font-size: 16px;
    color: var(--text-400);
    transition: color 0.25s ease;
    width: 20px;
    text-align: center;
}

.account-sidebar-menu-item:hover {
    background: var(--navy-50);
    color: var(--navy-800);
}

.account-sidebar-menu-item:hover i {
    color: var(--navy-800);
}

.account-sidebar-menu-item.active {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(4, 56, 84, 0.15);
}

.account-sidebar-menu-item.active i {
    color: var(--gold-500);
}

/* Premium tab pages adjustments */
.account-content-pane {
    background: #fff;
    border-radius: var(--r-xl);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: 32px;
    min-height: 520px;
}

@media (max-width: 600px) {
    .account-content-pane {
        padding: 20px;
    }
}

.account-content-pane h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 24px;
    border-bottom: 2px solid var(--gold-100);
    padding-bottom: 12px;
}

/* Premium credit cards styling */
.premium-cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .premium-cards-list {
        grid-template-columns: 1fr;
    }
}

.premium-credit-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 1.58 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.premium-credit-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: rgba(245, 156, 34, 0.08);
    border-radius: 50%;
}

.premium-credit-card.gold-card {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.premium-credit-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.premium-credit-card .card-chip {
    width: 44px;
    height: 34px;
    background: linear-gradient(135deg, #fef08a 0%, #ca8a04 100%);
    border-radius: 6px;
}

.premium-credit-card .card-type {
    font-family: var(--font-en);
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
}

.premium-credit-card .card-number {
    font-family: var(--font-en);
    font-size: 18px;
    letter-spacing: 2px;
    margin: 20px 0;
    direction: ltr;
    text-align: left;
}

.premium-credit-card .card-holder {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.premium-credit-card .card-holder span {
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
    display: block;
}

.premium-credit-card .card-holder strong {
    font-size: 14px;
    font-weight: 600;
}


:root {
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;

    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;

    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 40px;
    /* Below top bar */
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.logo-icon {
    color: var(--luxury-gold);
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background-color: #fff;
    color: var(--primary-navy);
}

/* Hero Section Slider */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: hidden;
    background-color: var(--primary-navy);
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1);
}

.hero-slide.active {
    opacity: 1;
    animation: kenburns 8s ease-out forwards;
}

@keyframes kenburns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.85) 0%,
            rgba(15, 23, 42, 0.4) 50%,
            rgba(15, 23, 42, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero h1 span {
    color: var(--luxury-gold);
}

.hero p {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.trust-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.trust-item i {
    color: var(--luxury-gold);
    font-size: 20px;
}

/* Hero Slider Indicators */
.hero-slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 12;
}

.hero-slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-slider-dots .dot.active {
    background: var(--luxury-gold);
    width: 32px;
    border-radius: 6px;
}

/* Hero Content Load Animations */
.hero-fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* Floating Search Card & Tabs */
.search-card-wrapper {
    margin-top: -60px;
    position: relative;
    z-index: 20;
}

.search-tabs {
    display: flex;
    gap: 6px;
    margin-right: 12px;
    position: relative;
    z-index: 2;
    justify-content: center;
}

.search-tab {
    background: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: none;
    padding: 12px 24px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.search-tab i {
    font-size: 15px;
    color: var(--secondary-text);
    transition: color 0.3s;
}

.search-tab:hover {
    color: var(--primary-navy);
}

.search-tab.active {
    background: var(--card-bg);
    color: var(--primary-navy);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 3px solid var(--luxury-gold);
    z-index: 11;
    position: relative;
    margin-bottom: -1px;
}

.search-tab.active i {
    color: var(--luxury-gold);
}

.search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 32px;
    box-shadow: var(--shadow-premium);
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 20px;
    align-items: flex-end;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.search-field label {
    display: block;
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 600;
    text-align: right;
}

.search-input-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 52px;
    position: relative;
}

.search-input-box:hover {
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.search-input-box span {
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.search-input-box span.placeholder {
    color: var(--secondary-text);
    font-weight: 400;
}

.search-input-box i {
    color: var(--secondary-text);
    font-size: 16px;
    transition: color 0.3s;
}

.search-input-box:hover i {
    color: var(--luxury-gold);
}

/* Dropdowns */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 240px;
    display: none;
    animation: slideDown 0.25s ease-out;
    padding: 8px 0;
}

.search-dropdown.active {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: right;
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.dropdown-item:hover {
    background: rgba(212, 162, 76, 0.08);
    color: var(--luxury-gold);
}

.dropdown-item i {
    color: var(--secondary-text);
    font-size: 15px;
}

.dropdown-item:hover i {
    color: var(--luxury-gold);
}

/* Traveler Counter Dropdown Custom Styles */
.counter-dropdown {
    padding: 20px;
    min-width: 280px;
}

.counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.counter-label {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 2px;
}

.counter-label .title {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-text);
}

.counter-label .subtitle {
    font-size: 11px;
    color: var(--secondary-text);
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--primary-navy);
}

.counter-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
    background: rgba(212, 162, 76, 0.05);
}

.counter-val {
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}

.dropdown-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.btn-apply {
    background: var(--primary-navy);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 13px;
}

.btn-apply:hover {
    background: var(--luxury-gold);
}

.search-btn {
    background-color: var(--primary-navy);
    color: #fff;
    border: none;
    height: 52px;
    padding: 0 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.search-btn:hover {
    background-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
}

/* Section Spacing */
/* section {
    padding: 80px 0;
} */

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    color: var(--secondary-text);
}

/* Partners */

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.partners-grid img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 50%;
    margin: 0;
    box-shadow: var(--shadow-premium);
    background-color: #fff;
    transition: all 0.3s ease;
}

.partners-grid img[src*=".avif"],
.partners-grid img[src*="comp2"] {
    width: 160px;
    height: 160px;
}

.partners-grid:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.partner-logo {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-en);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stats */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.stat-card {
    background: var(--card-bg);
    padding: 40px 24px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    width: 64px;
    height: 64px;
    background: rgba(212, 162, 76, 0.1);
    color: var(--luxury-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 24px;
}

.stat-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    font-family: var(--font-en);
}

.stat-text {
    font-size: 16px;
    color: var(--secondary-text);
    font-weight: 500;
}

/* Services */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px 32px;
    border-radius: var(--radius-card);
    transition: all 0.3s ease;
    text-align: center;
}

.service-card img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.service-icon {
    font-size: 40px;
    color: var(--primary-navy);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    color: var(--luxury-gold);
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--primary-navy);
}

.service-card p {
    color: var(--secondary-text);
    margin-bottom: 24px;
}

.service-link {
    color: var(--luxury-gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-link i {
    font-size: 12px;
}

/* Packages CSS Redesign - Premium Cinematic Layout */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
    padding: 40px 0;
}

.package-card {
    background: linear-gradient(180deg, #021526 0%, #0B2545 100%);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    height: 580px;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

/* Desktop Middle Card Emphasis */
@media (min-width: 1025px) {
    .package-card.featured {
        transform: scale(1.03);
        border: 2px solid var(--luxury-gold);
        box-shadow: 0 25px 65px rgba(212, 162, 76, 0.15);
    }

    .package-card.featured:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 35px 75px rgba(212, 162, 76, 0.25);
    }
}

.package-img-container {
    position: relative;
    width: 100%;
    height: 58%;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.package-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(2, 21, 38, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.package-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-card:hover .package-img {
    transform: scale(1.06);
}

/* Bottom Curved Wave Panel */
.card-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
    pointer-events: none;
}

.card-wave .wave-bg-path {
    fill: #021526;
}

.card-wave .wave-stroke-path {
    stroke: url(#gold-grad);
    fill: none;
}

/* Badges */
.package-badge {
    position: absolute;
    top: 24px;
    z-index: 5;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.package-badge.badge-gold {
    background: var(--luxury-gold);
    color: #fff;
    right: 24px;
}

.package-badge.badge-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    left: 24px;
    border: 1px solid rgba(212, 162, 76, 0.3);
}

/* Floating Icon on Card Edge */
.floating-icon-boundary {
    position: absolute;
    top: 54%;
    right: 24px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    color: #021526;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.package-card:hover .floating-icon-boundary {
    transform: scale(1.1);
}

/* Floating Icon on Top Right */
.floating-icon-top {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    color: #021526;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.package-card:hover .floating-icon-top {
    transform: scale(1.1);
}

.package-content {
    padding: 24px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(180deg, #021526 0%, #06192c 100%);
    position: relative;
    z-index: 3;
}

.package-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    line-height: 1.2;
}

.package-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.package-meta-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

.package-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: auto;
    padding-bottom: 20px;
}

.package-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.package-meta .meta-item i {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.package-meta .meta-item i.fa-star {
    color: var(--luxury-gold);
}

.package-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.package-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-price .price-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-price .price-amount {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-en);
    line-height: 1;
}

.package-price .price-currency {
    font-size: 14px;
    color: var(--luxury-gold);
    font-family: var(--font-ar);
    margin-right: 4px;
}

.package-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.package-cta .cta-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--luxury-gold);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
}

.package-cta .cta-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--luxury-gold);
    transition: all 0.3s ease;
}

.package-cta:hover .cta-circle {
    background: #ffffff;
    color: #021526;
    transform: translateX(-6px);
}

.package-cta:hover .cta-text {
    color: #ffffff;
}

/* Mobile dots & Responsiveness overrides */
.packages-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.packages-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.packages-dots .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--luxury-gold);
}

@media (max-width: 1024px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .package-card.featured {
        transform: none !important;
        border-color: transparent !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    }

    .package-card {
        height: 540px !important;
    }

    .package-title {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .packages-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
        padding: 10px 24px 30px 24px !important;
        margin: 0 -24px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .packages-grid::-webkit-scrollbar {
        display: none !important;
    }

    .package-card {
        flex: 0 0 100% !important;
        scroll-snap-align: center !important;
        max-width: 100% !important;
        height: 520px !important;
    }

    .package-title {
        font-size: 26px !important;
    }

    .packages-dots {
        display: flex !important;
    }
}

/* Why Choose Us */
.why-us {
    position: relative;
}

.why-us::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(180deg, rgba(4, 56, 84, .03) 0%, transparent 100%);
    pointer-events: none;
}

.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.why-us-content {
    position: relative;
}

.why-us-content h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
    line-height: 1.2;
}

.why-us-content h2 span {
    color: var(--luxury-gold);
    display: inline-block;
}

.why-us-content>p {
    color: var(--secondary-text);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 90%;
}

.features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    transition: all .3s ease;
    cursor: default;
}

.feature-item:hover {
    transform: translateY(-4px);
    border-color: var(--luxury-gold);
    box-shadow: 0 12px 30px rgba(245, 156, 34, .12);
}

.feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 4px;
}

.feature-text p {
    color: var(--secondary-text);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.why-us-image {
    position: relative;
}

.why-us-image .img-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(4, 56, 84, .15);
}

.why-us-image .img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(4, 56, 84, .4) 100%);
    pointer-events: none;
}

.why-us-image img {
    width: 100%;
    display: block;
}

.experience-badge {
    position: absolute;
    bottom: -16px;
    left: -16px;
    background: var(--primary-navy);
    color: #fff;
    padding: 28px 32px;
    border-radius: 20px;
    text-align: center;
    border: 4px solid var(--bg-color);
    box-shadow: 0 10px 30px rgba(4, 56, 84, .2);
    z-index: 2;
}

.experience-badge .num {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-en);
    line-height: 1;
    margin-bottom: 4px;
    color: var(--luxury-gold);
}

.experience-badge .num::after {
    content: '+';
    font-size: 20px;
}

.experience-badge .label {
    font-size: 13px;
    font-weight: 500;
    opacity: .9;
}

/* Floating decorative elements */
.why-us-image .deco-dots {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--luxury-gold) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: .2;
    z-index: -1;
    border-radius: 12px;
}

.why-us-image .deco-ring {
    position: absolute;
    bottom: 40px;
    right: -20px;
    width: 60px;
    height: 60px;
    border: 2px solid var(--luxury-gold);
    border-radius: 50%;
    opacity: .15;
    z-index: -1;
}

/* Video Section */
.video-section {
    background: var(--bg-color);
}

.video-wrapper {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    height: 600px;
    background-image: url("images/hero.png");
    /* fallback image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luxury-gold);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.play-btn:hover {
    transform: scale(1.1);
    background: #fff;
}

/* Blog */

.blog-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.blog-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-content {
    padding: 32px;
    background: var(--card-bg);
}

.blog-meta {
    color: var(--secondary-text);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
}

.blog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 24px;
}

.blog-link {
    color: var(--luxury-gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CTA */
.final-cta {
    background: linear-gradient(135deg,
            var(--primary-navy) 0%,
            var(--secondary-navy) 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.final-cta h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 24px;
}

.final-cta p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .search-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-btn {
        grid-column: span 2;
        width: 100%;
    }

    .search-card-wrapper {
        position: static;
        margin-top: -60px;
        padding: 0 24px;
    }

    .partners {
        padding-top: 80px;
    }

    .stats-row,
    .services-grid,
    .packages-grid,
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-grid img {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 42px;
    }

    .nav-links {
        display: none;
    }

    .search-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .search-btn {
        grid-column: span 1;
    }

    .search-tabs {
        margin-right: 0;
        justify-content: center;
    }

    .search-tab {
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
    }

    .hero-slider-dots {
        bottom: 140px;
    }

    .stats-row,
    .services-grid,
    .packages-grid,
    .blog-cards,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .features-list {
        grid-template-columns: 1fr;
    }

    .why-us-content>p {
        max-width: 100%;
    }

    .why-us-content h2 {
        font-size: 28px;
    }

    .experience-badge {
        bottom: -12px;
        left: -12px;
        padding: 20px 24px;
    }

    .experience-badge .num {
        font-size: 28px;
    }

    .why-us-image .deco-dots,
    .why-us-image .deco-ring {
        display: none;
    }

    .top-bar-left {
        display: none;
    }

    .video-wrapper {
        height: 300px;
    }

    .partners-grid {
        gap: 10px;
    }

    .partners-grid img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .partners-grid img {
        width: 80px;
        height: 80px;
    }

    .partners-grid {
        gap: 8px;
    }
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

:root {
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;
    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.logo-icon {
    color: var(--luxury-gold);
}

.nav-links {
    display: flex;
    gap: 3px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background-color: #fff;
    color: var(--primary-navy);
}

section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    color: var(--secondary-text);
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero */
/* =========================
   INNER PAGE HEROES
   Shared base + 6 unique creative designs
   ========================= */

/* --- Shared base for all hero types --- */
[class*="hero-"] .breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    opacity: 0.8;
    position: relative;
    z-index: 3;
}

[class*="hero-"] .breadcrumb a {
    color: #fff;
    opacity: 0.7;
}

[class*="hero-"] .breadcrumb a:hover {
    color: var(--luxury-gold);
    opacity: 1;
}

[class*="hero-"] .breadcrumb span {
    color: var(--luxury-gold);
}

[class*="hero-"] .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
}

[class*="hero-"] .hero-content .hero-icon {
    width: 72px;
    height: 72px;
    background: rgba(245, 156, 34, 0.15);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: var(--luxury-gold);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 156, 34, 0.2);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s;
}

[class*="hero-"]:hover .hero-content .hero-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 0 40px rgba(212, 162, 76, 0.2);
}

[class*="hero-"] .hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.3;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

[class*="hero-"] .hero-content h1 span {
    color: var(--luxury-gold);
    text-shadow: 0 0 40px rgba(212, 162, 76, 0.3);
}

[class*="hero-"] .hero-content p {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.92;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    [class*="hero-"] .hero-content h1 {
        font-size: 28px;
    }

    [class*="hero-"] .hero-content p {
        font-size: 14px;
    }

    /* [class*="hero-"] {
        min-height: 40vh !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    } */
}



/* Shared hero content animation */
@keyframes heroSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

[class*="hero-"] .hero-content {
    animation: heroSlideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

[class*="hero-"] .breadcrumb {
    animation: heroSlideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
}

/* ==========================
   1. HERO-RELIGIOUS — القوس
   Mosque Mihrab arch majesty
   ========================== */
.hero-religious {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #021526 0%, #043854 40%, #0a2f4a 70%, #021526 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-religious::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(245, 156, 34, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(2, 21, 38, 0.7) 0%, rgba(4, 56, 84, 0.5) 50%, rgba(2, 21, 38, 0.8) 100%);
}

/* Golden arch (محراب) */
.hero-religious::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 700px;
    height: 90px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

.hero-religious-arch {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    border: 2px solid rgba(245, 156, 34, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.hero-religious-arch:nth-child(2) {
    width: 350px;
    height: 350px;
    top: -10%;
    border-color: rgba(245, 156, 34, 0.12);
    border-width: 3px;
}

.hero-religious-arch:nth-child(3) {
    width: 200px;
    height: 200px;
    top: 0%;
    border-color: rgba(245, 156, 34, 0.2);
    border-width: 4px;
}

/* Geometric pattern overlay */
.hero-religious-geo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(245, 156, 34, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(245, 156, 34, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Floating lantern */
.hero-religious-lantern {
    position: absolute;
    font-size: 24px;
    color: rgba(245, 156, 34, 0.15);
    animation: lanternFloat 6s ease-in-out infinite;
    pointer-events: none;
}

.hero-religious-lantern:nth-child(5) {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.hero-religious-lantern:nth-child(6) {
    top: 25%;
    right: 12%;
    animation-delay: 2s;
    font-size: 18px;
}

.hero-religious-lantern:nth-child(7) {
    bottom: 25%;
    left: 15%;
    animation-delay: 4s;
    font-size: 16px;
}

@keyframes lanternFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }

    50% {
        transform: translateY(-18px) rotate(5deg);
        opacity: 0.25;
    }
}

/* Gold rays from top */
.hero-religious-ray {
    position: absolute;
    top: -30%;
    width: 2px;
    background: linear-gradient(180deg, rgba(245, 156, 34, 0.3), transparent);
    pointer-events: none;
}

.hero-religious-ray:nth-child(8) {
    left: 25%;
    height: 80%;
    transform: rotate(-8deg);
}

.hero-religious-ray:nth-child(9) {
    left: 40%;
    height: 70%;
    transform: rotate(-3deg);
}

.hero-religious-ray:nth-child(10) {
    right: 40%;
    height: 70%;
    transform: rotate(3deg);
}

.hero-religious-ray:nth-child(11) {
    right: 25%;
    height: 80%;
    transform: rotate(8deg);
}

/* ==========================
   2. HERO-FLIGHT — السحاب
   Sky runway with paper plane
   ========================== */
.hero-flight {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(170deg, #0b2f4a 0%, #1b5a7a 40%, #6db3d4 75%, #c8e4f0 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-flight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11, 47, 74, 0.75) 0%, rgba(27, 90, 122, 0.5) 50%, rgba(11, 47, 74, 0.8) 100%);
    z-index: 1;
}

.hero-flight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--bg-color);
    clip-path: ellipse(60% 100% at 50% 100%);
    z-index: 2;
}

/* Clouds */
.hero-flight-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
    animation: cloudDrift 20s linear infinite;
}

.hero-flight-cloud:nth-child(2) {
    width: 300px;
    height: 80px;
    top: 12%;
    left: -10%;
    animation-duration: 25s;
}

.hero-flight-cloud:nth-child(3) {
    width: 200px;
    height: 55px;
    top: 30%;
    right: -5%;
    animation-duration: 30s;
    animation-delay: -10s;
}

.hero-flight-cloud:nth-child(4) {
    width: 250px;
    height: 65px;
    top: 8%;
    right: 20%;
    animation-duration: 22s;
    animation-delay: -5s;
}

@keyframes cloudDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(120vw);
    }
}

/* Runway perspective lines */
.hero-flight-runway {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 40%;
    pointer-events: none;
    overflow: hidden;
}

.hero-flight-runway::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(0deg, rgba(245, 156, 34, 0.4), transparent);
    box-shadow:
        -60px 0 0 -1px rgba(245, 156, 34, 0.08),
        60px 0 0 -1px rgba(245, 156, 34, 0.08);
}

/* Paper plane animation */
.hero-flight-plane {
    position: absolute;
    font-size: 40px;
    color: rgba(245, 156, 34, 0.25);
    pointer-events: none;
    animation: planeFly 8s ease-in-out infinite;
    top: 20%;
    right: -10%;
}

@keyframes planeFly {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.25;
    }

    80% {
        opacity: 0.25;
    }

    100% {
        transform: translate(-110vw, -40px) rotate(-5deg);
        opacity: 0;
    }
}

/* Contrail trail */
.hero-flight-contrail {
    position: absolute;
    bottom: 15%;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    pointer-events: none;
}

/* ==========================
   3. HERO-HOTEL — الكريستال
   Luxury crystal chandelier
   ========================== */
.hero-hotel {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #1a1a2e 0%, #2d1f3d 30%, #4a2c3a 60%, #6b3f2a 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-hotel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.75) 0%, rgba(45, 31, 61, 0.5) 50%, rgba(26, 26, 46, 0.8) 100%);
    z-index: 1;
}

background: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(245, 156, 34, 0.12) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 100%, rgba(245, 156, 34, 0.05) 0%, transparent 50%);
}

.hero-hotel::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

/* Curtain / drape side elements */
.hero-hotel-curtain {
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    pointer-events: none;
}

.hero-hotel-curtain--left {
    left: 0;
}

.hero-hotel-curtain--right {
    right: 0;
}

.hero-hotel-curtain::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(245, 156, 34, 0.06) 0%,
            transparent 40%,
            rgba(245, 156, 34, 0.03) 70%,
            transparent 100%);
    clip-path: polygon(0 0, 100% 5%, 80% 50%, 100% 95%, 0 100%);
}

.hero-hotel-curtain--right::before {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, 20% 50%);
}

/* Sparkle particles (chandelier) */
.hero-hotel-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--luxury-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: sparklePulse 3s ease-in-out infinite;
}

.hero-hotel-sparkle:nth-child(4) {
    top: 12%;
    left: 20%;
    animation-delay: 0s;
}

.hero-hotel-sparkle:nth-child(5) {
    top: 18%;
    right: 25%;
    animation-delay: 0.8s;
    width: 3px;
    height: 3px;
}

.hero-hotel-sparkle:nth-child(6) {
    top: 8%;
    left: 50%;
    animation-delay: 1.6s;
    width: 5px;
    height: 5px;
}

.hero-hotel-sparkle:nth-child(7) {
    top: 22%;
    left: 35%;
    animation-delay: 2.4s;
}

@keyframes sparklePulse {

    0%,
    100% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.8);
        box-shadow: 0 0 8px rgba(245, 156, 34, 0.3);
    }
}

/* Gold shimmer stripes */
.hero-hotel-shimmer {
    position: absolute;
    bottom: 10%;
    left: -10%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 156, 34, 0.08), transparent);
    pointer-events: none;
}

.hero-hotel-shimmer:nth-child(8) {
    bottom: 20%;
    opacity: 0.6;
}

.hero-hotel-shimmer:nth-child(9) {
    bottom: 30%;
    opacity: 0.3;
    width: 80%;
    left: 10%;
}

/* ==========================
   4. HERO-CRUISE — الأمواج
   Ocean waves & compass
   ========================== */
.hero-cruise {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #021e30 0%, #043854 30%, #0d5a7a 60%, #0a7a8a 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-cruise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(2, 30, 48, 0.75) 0%, rgba(4, 56, 84, 0.5) 50%, rgba(2, 30, 48, 0.8) 100%);
    z-index: 1;
}

height: 100%;
background: radial-gradient(ellipse 60% 20% at 50% 100%, rgba(10, 122, 138, 0.3) 0%, transparent 50%);
}

/* Wave layers */
.hero-cruise-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
}

.hero-cruise-wave svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
}

.hero-cruise-wave--1 {
    z-index: 4;
    opacity: 0.15;
}

.hero-cruise-wave--2 {
    z-index: 3;
    opacity: 0.1;
    bottom: 8px;
}

.hero-cruise-wave--3 {
    z-index: 2;
    opacity: 0.06;
    bottom: 16px;
}

.hero-cruise-wave--1 svg path {
    fill: #043854;
}

.hero-cruise-wave--2 svg path {
    fill: #0d5a7a;
}

.hero-cruise-wave--3 svg path {
    fill: #0a7a8a;
}

/* Compass rose watermark */
.hero-cruise-compass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 300px;
    color: rgba(245, 156, 34, 0.03);
    pointer-events: none;
    animation: compassSpin 30s linear infinite;
}

@keyframes compassSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating bubbles */
.hero-cruise-bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
    animation: bubbleRise 6s ease-in-out infinite;
}

.hero-cruise-bubble:nth-child(5) {
    width: 20px;
    height: 20px;
    bottom: 10%;
    left: 10%;
    animation-delay: 0s;
}

.hero-cruise-bubble:nth-child(6) {
    width: 12px;
    height: 12px;
    bottom: 20%;
    right: 15%;
    animation-delay: 2s;
}

.hero-cruise-bubble:nth-child(7) {
    width: 16px;
    height: 16px;
    bottom: 15%;
    left: 30%;
    animation-delay: 4s;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-40px) scale(1.1);
        opacity: 0.4;
    }

    100% {
        transform: translateY(-80px) scale(0.8);
        opacity: 0;
    }
}

/* Wave bottom clip */
.hero-cruise::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 5;
}

/* ==========================
   5. HERO-CARS — السرعة
   Speed & motion track
   ========================== */
.hero-cars {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0a0a12 0%, #1a1a2e 30%, #0d1f3a 60%, #021526 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-cars::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 18, 0.75) 0%, rgba(26, 26, 46, 0.5) 50%, rgba(10, 10, 18, 0.8) 100%);
    z-index: 1;
}

.hero-cars::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

/* Racing track line */
.hero-cars-track {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 3px;
    background: repeating-linear-gradient(90deg,
            rgba(245, 156, 34, 0.4) 0px,
            rgba(245, 156, 34, 0.4) 30px,
            transparent 30px,
            transparent 50px);
    pointer-events: none;
    animation: trackMove 1s linear infinite;
}

@keyframes trackMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50px);
    }
}

.hero-cars-track::before {
    content: '';
    position: absolute;
    top: -15px;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 20px,
            transparent 20px,
            transparent 35px);
    animation: trackMove 2s linear infinite;
}

/* Speed lines */
.hero-cars-speedline {
    position: absolute;
    width: 1px;
    background: linear-gradient(180deg, rgba(245, 156, 34, 0.15), transparent);
    pointer-events: none;
    animation: speedLine 1.5s linear infinite;
}

.hero-cars-speedline:nth-child(3) {
    left: 10%;
    height: 60px;
    top: 20%;
    animation-duration: 1.2s;
}

.hero-cars-speedline:nth-child(4) {
    left: 30%;
    height: 40px;
    top: 35%;
    animation-duration: 0.9s;
    animation-delay: 0.3s;
}

.hero-cars-speedline:nth-child(5) {
    right: 20%;
    height: 50px;
    top: 25%;
    animation-duration: 1.4s;
    animation-delay: 0.6s;
}

.hero-cars-speedline:nth-child(6) {
    right: 35%;
    height: 35px;
    top: 40%;
    animation-duration: 1s;
    animation-delay: 0.8s;
}

@keyframes speedLine {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(-80px);
        opacity: 0;
    }
}

/* Checkered pattern accent */
.hero-cars-checker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image:
        linear-gradient(45deg, rgba(245, 156, 34, 0.06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(245, 156, 34, 0.06) 25%, transparent 25%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 0;
    z-index: 3;
    pointer-events: none;
}

/* Glow accent */
.hero-cars-glow {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245, 156, 34, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* ==========================
   6. HERO-ABOUT — القصة
   Elegant story / vision
   ========================== */
.hero-about {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #043854 0%, #0a2a4a 40%, #021526 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(4, 56, 84, 0.75) 0%, rgba(10, 42, 74, 0.5) 50%, rgba(4, 56, 84, 0.8) 100%);
    z-index: 1;
}

.hero-about::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

/* Timeline dab decorative */
.hero-about-timeline {
    position: absolute;
    right: 8%;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(245, 156, 34, 0.2), rgba(245, 156, 34, 0.1), transparent);
    pointer-events: none;
}

.hero-about-timeline::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--luxury-gold);
    opacity: 0.2;
    box-shadow: 0 0 20px rgba(245, 156, 34, 0.2);
}

/* Floating geometric rings */
.hero-about-ring {
    position: absolute;
    border: 1px solid rgba(245, 156, 34, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.hero-about-ring:nth-child(4) {
    width: 300px;
    height: 300px;
    top: -10%;
    left: -5%;
    animation: ringFloat 8s ease-in-out infinite;
}

.hero-about-ring:nth-child(5) {
    width: 180px;
    height: 180px;
    bottom: 10%;
    right: 5%;
    animation: ringFloat 6s ease-in-out infinite reverse;
}

.hero-about-ring:nth-child(6) {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 50%;
    animation: ringFloat 10s ease-in-out infinite;
}

@keyframes ringFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.06;
    }

    50% {
        transform: translateY(-15px) scale(1.05);
        opacity: 0.12;
    }
}

/* Subtle dots pattern */
.hero-about-dots {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 60px;
    height: 60px;
    background-image: radial-gradient(circle, rgba(245, 156, 34, 0.08) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

.hero-about h1 {
    font-size: 56px;
    margin-bottom: 20px;
}

.hero-about p {
    font-size: 20px;
    max-width: 700px;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    opacity: 0.7;
}

.breadcrumb a:hover {
    color: var(--luxury-gold);
}

/* About Intro */
.about-intro {
    padding: 100px 0 80px;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro-image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(4, 56, 84, 0.15);
}

.about-intro-image img {
    width: 100%;
    display: block;
    height: 450px;
    object-fit: cover;
}

.about-intro-image .experience-badge {
    position: absolute;
    bottom: -16px;
    right: -16px;
    background: var(--primary-navy);
    color: #fff;
    padding: 28px 32px;
    border-radius: 20px;
    text-align: center;
    border: 4px solid var(--bg-color);
    box-shadow: 0 10px 30px rgba(4, 56, 84, 0.2);
    z-index: 2;
}

.about-intro-image .experience-badge .num {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-en);
    line-height: 1;
    margin-bottom: 4px;
    color: var(--luxury-gold);
}

.about-intro-image .experience-badge .num::after {
    content: '+';
    font-size: 20px;
}

.about-intro-image .experience-badge .label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
}

.about-intro-content h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
    line-height: 1.2;
}

.about-intro-content h2 span {
    color: var(--luxury-gold);
}

.about-intro-content>p {
    color: var(--secondary-text);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.about-intro-content .check-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.about-intro-content .check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.about-intro-content .check-list li i {
    color: var(--luxury-gold);
    font-size: 20px;
    min-width: 24px;
}

/* Stats */
.about-stats {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding: 80px 0;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.about-stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 40px 24px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.about-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--luxury-gold);
}

.about-stat-card .stat-icon {
    width: 64px;
    height: 64px;
    background: rgba(245, 156, 34, 0.15);
    color: var(--luxury-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.about-stat-card .stat-num {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    font-family: var(--font-en);
}

.about-stat-card .stat-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Mission & Vision */
.about-mission {
    padding: 100px 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mission-card {
    background: var(--card-bg);
    padding: 48px 36px;
    border-radius: var(--radius-card);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--luxury-gold), var(--secondary-navy));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.mission-card:hover::before {
    transform: scaleX(1);
}

.mission-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.mission-card .icon-wrap {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(245, 156, 34, 0.1), rgba(4, 56, 84, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: var(--primary-navy);
    transition: all 0.3s ease;
}

.mission-card:hover .icon-wrap {
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    transform: scale(1.1);
}

.mission-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 16px;
}

.mission-card p {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.7;
}

/* Team */
.about-team {
    background: var(--bg-color);
    padding: 100px 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.team-card .team-img {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, var(--primary-navy), var(--secondary-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.team-card .team-img i {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
}

.team-card .team-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.team-card .team-info {
    padding: 24px;
}

.team-card .team-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 4px;
}

.team-card .team-info span {
    font-size: 14px;
    color: var(--luxury-gold);
    font-weight: 500;
}

.team-card .team-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 24px 24px;
}

.team-card .team-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(4, 56, 84, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-navy);
    font-size: 14px;
    transition: all 0.3s ease;
}

.team-card .team-socials a:hover {
    background: var(--luxury-gold);
    color: #fff;
}

/* Values */
.about-values {
    padding: 100px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.value-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background: var(--card-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-4px);
    border-color: var(--luxury-gold);
    box-shadow: 0 12px 30px rgba(245, 156, 34, 0.12);
}

.value-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.value-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.value-content p {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.7;
}

/* CTA */
.final-cta {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.final-cta h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 24px;
}

.final-cta p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Timeline */
.about-timeline {
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(4, 56, 84, 0.03) 0%, transparent 100%);
}

.timeline-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--luxury-gold), var(--secondary-navy));
    border-radius: 3px;
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 48px;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-content {
    width: 45%;
    background: var(--card-bg);
    padding: 28px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--luxury-gold);
}

.timeline-dot {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 20px;
    height: 20px;
    background: var(--luxury-gold);
    border-radius: 50%;
    border: 4px solid var(--bg-color);
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(245, 156, 34, 0.2);
}

.timeline-content .year {
    font-size: 14px;
    font-weight: 700;
    color: var(--luxury-gold);
    margin-bottom: 8px;
    font-family: var(--font-en);
}

.timeline-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    color: var(--secondary-text);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mission-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .top-bar-left {
        display: none;
    }

    .timeline-line {
        right: 20px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .timeline-content {
        width: calc(100% - 50px);
        margin-right: 0;
    }

    .timeline-dot {
        right: 20px;
    }

    .about-intro-content h2 {
        font-size: 28px;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .final-cta h2 {
        font-size: 32px;
    }
}




/* ===== Dashboard Integrated Styles ===== */
:root {
    --dash-navy: #071A35;
    --dash-navy-light: #0F274D;
    --dash-gold: #D4A24C;
    --dash-gold-dark: #B8892E;
    --dash-bg: #F8FAFC;
    --dash-white: #FFFFFF;
    --dash-text: #111827;
    --dash-muted: #64748B;
    --dash-border: #E5E7EB;
    --dash-success: #10B981;
    --dash-danger: #EF4444;
    --dash-warning: #F59E0B;
    --dash-info: #3B82F6;
    --dash-radius: 16px;
    --dash-radius-sm: 12px;
    --dash-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
    --dash-shadow-lg: 0 12px 40px rgba(7, 26, 53, 0.12);
    --dash-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Tajawal', sans-serif;
    background: var(--dash-bg);
    color: var(--dash-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== Top Bar ===== */
.dash-top-bar {
    background: var(--dash-navy);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-top-bar .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dash-top-bar-right,
.dash-top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dash-top-bar-right span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-top-bar-right i {
    color: var(--dash-gold);
    font-size: 12px;
}

.dash-top-bar .social-icons {
    display: flex;
    gap: 14px;
}

.dash-top-bar .social-icons a {
    color: rgba(255, 255, 255, 0.6);
    transition: var(--dash-transition);
    font-size: 14px;
}

.dash-top-bar .social-icons a:hover {
    color: var(--dash-gold);
}

.dash-top-bar .lang-switch {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--dash-transition);
}

.dash-top-bar .lang-switch:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ===== Navbar ===== */
.dash-navbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

.dash-navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dash-navbar .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.dash-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.dash-logo img {
    height: 44px;
    width: auto;
}

.dash-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-nav-links a {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text);
    text-decoration: none;
    border-radius: 10px;
    transition: var(--dash-transition);
    white-space: nowrap;
}

.dash-nav-links a:hover {
    background: rgba(7, 26, 53, 0.04);
    color: var(--dash-navy);
}

.dash-nav-links a.active {
    background: var(--dash-navy);
    color: #fff;
}

.dash-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-nav-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--dash-transition);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-nav-btn-gold {
    background: linear-gradient(135deg, var(--dash-gold), var(--dash-gold-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
}

.dash-nav-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 162, 76, 0.4);
}

.dash-mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--dash-navy);
    cursor: pointer;
    padding: 8px;
}

/* ===== Hero Banner ===== */
.dash-hero {
    background: linear-gradient(135deg, var(--dash-navy) 0%, var(--dash-navy-light) 100%);
    padding: 48px 0 56px;
    position: relative;
    overflow: hidden;
}

.dash-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 162, 76, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.dash-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(15, 39, 77, 0.4) 0%, transparent 70%);
    border-radius: 50%;
}

.dash-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.dash-hero-content {
    flex: 1;
}

.dash-hero-greeting {
    font-size: 14px;
    color: var(--dash-gold);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-hero-greeting i {
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(15deg);
    }
}

.dash-hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.dash-hero h1 span {
    color: var(--dash-gold);
}

.dash-hero p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
}

.dash-hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 24px;
}

.dash-hero-stat {
    text-align: center;
}

.dash-hero-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dash-gold);
    line-height: 1;
}

.dash-hero-stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.dash-hero-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-gold), var(--dash-gold-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 0.3s;
}

/* ===== Avatar Wrapper & Photo Upload ===== */
.dash-avatar-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.dash-avatar-edit {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dash-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 2;
}

.dash-avatar-edit:hover {
    background: var(--dash-gold-dark);
    transform: scale(1.1);
}

.dash-avatar-edit-sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
    bottom: 2px;
    right: 2px;
    border-width: 2px;
}

/* ===== Main Layout ===== */
.dash-layout {
    max-width: 1400px;
    margin: -32px auto 48px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    position: relative;
    z-index: 3;
}

/* ===== Sidebar ===== */
.dash-sidebar {
    background: var(--dash-white);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.dash-sidebar-header {
    padding: 28px 24px 20px;
    text-align: center;
    border-bottom: 1px solid var(--dash-border);
    background: linear-gradient(135deg, rgba(7, 26, 53, 0.02) 0%, rgba(212, 162, 76, 0.05) 100%);
}

.dash-sidebar-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-navy-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 14px;
    border: 3px solid var(--dash-white);
    box-shadow: 0 4px 16px rgba(7, 26, 53, 0.2);
    background-size: cover;
    background-position: center;
}

.dash-sidebar-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.dash-sidebar-email {
    font-size: 13px;
    color: var(--dash-muted);
}

.dash-sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.1), rgba(212, 162, 76, 0.15));
    color: var(--dash-gold-dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
}

.dash-sidebar-badge i {
    font-size: 11px;
}

/* Sidebar Navigation */
.dash-sidebar-nav {
    padding: 16px 12px;
}

.dash-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--dash-radius-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-muted);
    cursor: pointer;
    transition: var(--dash-transition);
    border: none;
    background: none;
    width: 100%;
    text-align: right;
}

.dash-sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.dash-sidebar-nav-item:hover {
    background: rgba(7, 26, 53, 0.04);
    color: var(--dash-navy);
}

.dash-sidebar-nav-item.active {
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-navy-light));
    color: #fff;
    box-shadow: 0 4px 12px rgba(7, 26, 53, 0.2);
}

.dash-sidebar-nav-item.active i {
    color: var(--dash-gold);
}

/* Sidebar Loyalty */
.dash-sidebar-loyalty {
    margin: 0 12px 16px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.08), rgba(212, 162, 76, 0.12));
    border-radius: var(--dash-radius-sm);
    border: 1px solid rgba(212, 162, 76, 0.15);
}

.dash-sidebar-loyalty-title {
    font-size: 12px;
    color: var(--dash-muted);
    margin-bottom: 8px;
}

.dash-sidebar-loyalty-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--dash-gold-dark);
}

.dash-sidebar-loyalty-value span {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-muted);
}

.dash-sidebar-loyalty-bar {
    height: 6px;
    background: rgba(212, 162, 76, 0.2);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
}

.dash-sidebar-loyalty-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dash-gold), var(--dash-gold-dark));
    border-radius: 3px;
    width: 70%;
    transition: width 0.6s ease;
}

.dash-sidebar-loyalty-levels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--dash-muted);
}

/* Sidebar Logout */
.dash-sidebar-logout {
    margin: 0 12px 16px;
    padding: 12px;
    border-top: 1px solid var(--dash-border);
    padding-top: 16px;
}

.dash-sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: var(--dash-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-danger);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.12);
    cursor: pointer;
    transition: var(--dash-transition);
}

.dash-sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ===== Main Content ===== */
.dash-main {
    min-width: 0;
}

.dash-page {
    display: none;
    animation: fadeUp 0.4s ease;
}

.dash-page.active {
    display: block;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* ===== Section Styles ===== */
.dash-section {
    background: var(--dash-white);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    padding: 28px;
    margin-bottom: 24px;
}

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.dash-section-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-section-header h2 i {
    color: var(--dash-gold);
    font-size: 18px;
}

/* ===== Quick Actions Grid ===== */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.dash-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    text-decoration: none;
    color: var(--dash-text);
    font-size: 14px;
    font-weight: 600;
    transition: var(--dash-transition);
    cursor: pointer;
    text-align: center;
}

.dash-quick-card i {
    font-size: 28px;
    color: var(--dash-navy);
    transition: var(--dash-transition);
}

.dash-quick-card:hover {
    border-color: var(--dash-navy);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(7, 26, 53, 0.1);
}

.dash-quick-card:hover i {
    color: var(--dash-gold);
}

.dash-quick-card.gold-card {
    background: linear-gradient(135deg, var(--dash-gold), var(--dash-gold-dark));
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
}

.dash-quick-card.gold-card i {
    color: #fff;
}

.dash-quick-card.gold-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(212, 162, 76, 0.4);
}

/* ===== Booking Cards ===== */
.dash-booking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dash-booking-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

.dash-booking-card:hover {
    border-color: var(--dash-navy);
    box-shadow: 0 4px 16px rgba(7, 26, 53, 0.08);
}

.dash-booking-img {
    width: 100px;
    height: 80px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.dash-booking-info {
    flex: 1;
    min-width: 0;
}

.dash-booking-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 8px;
}

.dash-booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--dash-muted);
}

.dash-booking-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-booking-meta i {
    color: var(--dash-gold);
    font-size: 12px;
}

.dash-booking-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--dash-navy);
    margin-top: 8px;
}

.dash-booking-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Status Badges */
.dash-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dash-status.confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dash-success);
}

.dash-status.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--dash-warning);
}

.dash-status.cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--dash-danger);
}

.dash-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ===== Profile Form ===== */
.dash-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
}

.dash-profile-card {
    text-align: center;
    padding: 32px 24px;
    background: var(--dash-bg);
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
}

.dash-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-navy-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 16px;
    background-size: cover;
    background-position: center;
}

.dash-profile-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.dash-profile-card .email {
    font-size: 14px;
    color: var(--dash-muted);
    margin-bottom: 20px;
}

.dash-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--dash-border);
}

.dash-profile-stats div strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--dash-navy);
}

.dash-profile-stats div span {
    font-size: 12px;
    color: var(--dash-muted);
}

.dash-profile-form h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.dash-profile-form .subtitle {
    font-size: 14px;
    color: var(--dash-muted);
    margin-bottom: 24px;
}

/* ===== Favorites Grid ===== */
.dash-fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.dash-fav-card {
    background: var(--dash-bg);
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    overflow: hidden;
    transition: var(--dash-transition);
}

.dash-fav-card:hover {
    border-color: var(--dash-navy);
    box-shadow: 0 8px 24px rgba(7, 26, 53, 0.1);
    transform: translateY(-4px);
}

.dash-fav-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.dash-fav-remove {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--dash-danger);
    transition: var(--dash-transition);
}

.dash-fav-remove:hover {
    background: var(--dash-danger);
    color: #fff;
}

.dash-fav-body {
    padding: 16px;
}

.dash-fav-location {
    font-size: 12px;
    color: var(--dash-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.dash-fav-location i {
    color: var(--dash-gold);
}

.dash-fav-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 8px;
}

.dash-fav-rating {
    font-size: 13px;
    color: var(--dash-gold-dark);
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-fav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--dash-border);
}

.dash-fav-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--dash-navy);
}

.dash-fav-price small {
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-muted);
}

/* ===== Notifications ===== */
.dash-notif-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-notif {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

.dash-notif:hover {
    border-color: var(--dash-navy);
}

.dash-notif.unread {
    background: rgba(7, 26, 53, 0.02);
    border-color: rgba(212, 162, 76, 0.3);
}

.dash-notif-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.dash-notif-icon.green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dash-success);
}

.dash-notif-icon.gold {
    background: rgba(212, 162, 76, 0.1);
    color: var(--dash-gold-dark);
}

.dash-notif-icon.blue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--dash-info);
}

.dash-notif-body {
    flex: 1;
}

.dash-notif-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.dash-notif-body p {
    font-size: 14px;
    color: var(--dash-muted);
    line-height: 1.5;
}

.dash-notif-time {
    font-size: 12px;
    color: var(--dash-muted);
    margin-top: 6px;
    display: block;
}

/* ===== Payment Methods ===== */
.dash-pay-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.dash-pay-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg);
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

.dash-pay-card:hover {
    border-color: var(--dash-navy);
}

.dash-pay-logo {
    width: 56px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.dash-pay-logo.visa {
    background: linear-gradient(135deg, #1a1f71, #2e3592);
    color: #fff;
}

.dash-pay-logo.mc {
    background: linear-gradient(135deg, #eb001b, #f79e1b);
    color: #fff;
}

.dash-pay-logo.bank {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dash-success);
}

.dash-pay-logo.cash {
    background: rgba(37, 211, 102, 0.1);
    color: #25D366;
}

.dash-pay-info {
    flex: 1;
}

.dash-pay-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 2px;
}

.dash-pay-info span {
    font-size: 13px;
    color: var(--dash-muted);
}

.dash-pay-default {
    display: inline-block;
    background: rgba(212, 162, 76, 0.1);
    color: var(--dash-gold-dark);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

/* ===== Transactions Table ===== */
.dash-tx-table {
    width: 100%;
    border-collapse: collapse;
}

.dash-tx-table th,
.dash-tx-table td {
    padding: 14px 16px;
    text-align: right;
    font-size: 14px;
    border-bottom: 1px solid var(--dash-border);
}

.dash-tx-table th {
    font-weight: 700;
    color: var(--dash-muted);
    font-size: 13px;
    background: var(--dash-bg);
}

.dash-tx-table tr:last-child td {
    border-bottom: none;
}

.dash-tx-table tr:hover td {
    background: rgba(7, 26, 53, 0.02);
}

.dash-tx-amount {
    font-weight: 700;
    color: var(--dash-navy);
}

.dash-tx-amount.positive {
    color: var(--dash-success);
}

/* ===== Loyalty Section ===== */
.dash-loyalty-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-navy-light));
    border-radius: var(--dash-radius-sm);
    color: #fff;
}

.dash-loyalty-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(212, 162, 76, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--dash-gold);
    flex-shrink: 0;
}

.dash-loyalty-info {
    flex: 1;
}

.dash-loyalty-label {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.dash-loyalty-value {
    font-size: 28px;
    font-weight: 800;
}

.dash-loyalty-value span {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.dash-loyalty-eq {
    text-align: center;
    padding: 0 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.dash-loyalty-eq div:first-child {
    font-size: 12px;
    opacity: 0.7;
}

.dash-loyalty-eq div:last-child {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-gold);
}

.dash-loyalty-progress {
    flex-shrink: 0;
    width: 120px;
}

.dash-loyalty-progress-label {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
}

.dash-loyalty-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.dash-loyalty-progress-fill {
    height: 100%;
    background: var(--dash-gold);
    border-radius: 4px;
    width: 62%;
}

/* ===== Settings ===== */
.dash-settings-group {
    padding: 24px;
    background: var(--dash-bg);
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    margin-bottom: 20px;
}

.dash-settings-group h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 4px;
}

.dash-settings-group .subtitle {
    font-size: 14px;
    color: var(--dash-muted);
    margin-bottom: 20px;
}

.dash-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--dash-border);
    gap: 16px;
}

.dash-setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-setting-row:first-of-type {
    padding-top: 0;
}

.dash-setting-row strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-text);
}

.dash-setting-row span {
    font-size: 13px;
    color: var(--dash-muted);
}

/* Language Cards */
.dash-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.dash-lang-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-white);
    border: 2px solid var(--dash-border);
    cursor: pointer;
    transition: var(--dash-transition);
}

.dash-lang-card:hover {
    border-color: var(--dash-navy);
}

.dash-lang-card.active {
    border-color: var(--dash-gold);
    background: rgba(212, 162, 76, 0.05);
}

.dash-lang-card span:first-child {
    font-size: 24px;
}

.dash-lang-card strong {
    font-size: 15px;
    color: var(--dash-text);
}

.dash-lang-card small {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.dash-lang-card i {
    margin-right: auto;
    color: var(--dash-gold);
}

/* Danger Zone */
.dash-danger-zone {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.03);
}

.dash-danger-zone h3 {
    color: var(--dash-danger);
}

/* ===== Toggle Switch ===== */
.dash-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.dash-toggle input {
    display: none;
}

.dash-toggle .slider {
    position: absolute;
    inset: 0;
    background: var(--dash-border);
    border-radius: 13px;
    cursor: pointer;
    transition: var(--dash-transition);
}

.dash-toggle .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: var(--dash-transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dash-toggle input:checked+.slider {
    background: var(--dash-success);
}

.dash-toggle input:checked+.slider::before {
    transform: translateX(-22px);
}

/* ===== Filter Group ===== */
.dash-filter-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-filter-select {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--dash-border);
    background: var(--dash-white);
    font-family: inherit;
    font-size: 13px;
    color: var(--dash-text);
    cursor: pointer;
    transition: var(--dash-transition);
}

.dash-filter-select:focus {
    outline: none;
    border-color: var(--dash-gold);
}

/* ===== Empty State ===== */
.dash-empty {
    text-align: center;
    padding: 48px 24px;
}

.dash-empty i {
    font-size: 48px;
    color: var(--dash-border);
    margin-bottom: 16px;
}

.dash-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 8px;
}

.dash-empty p {
    font-size: 14px;
    color: var(--dash-muted);
    margin-bottom: 20px;
}

/* ===== Footer ===== */
.dash-footer {
    background: var(--dash-navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 0 0;
}

.dash-footer .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.dash-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
}

.dash-footer-logo {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.dash-footer-logo i {
    color: var(--dash-gold);
}

.dash-footer-logo span {
    color: var(--dash-gold);
}

.dash-footer-about {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.dash-footer h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.dash-footer-links {
    list-style: none;
}

.dash-footer-links li {
    margin-bottom: 10px;
}

.dash-footer-links a {
    font-size: 14px;
    transition: var(--dash-transition);
}

.dash-footer-links a:hover {
    color: var(--dash-gold);
}

.dash-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* ===== Modals ===== */
.dash-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--dash-transition);
    padding: 24px;
}

.dash-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dash-modal {
    background: var(--dash-white);
    border-radius: var(--dash-radius);
    padding: 36px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: var(--dash-transition);
}

.dash-modal-overlay.open .dash-modal {
    transform: scale(1) translateY(0);
}

.dash-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--dash-transition);
}

.dash-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.dash-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(7, 26, 53, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--dash-navy);
    margin: 0 auto 20px;
}

.dash-modal h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text);
    margin-bottom: 10px;
}

.dash-modal p {
    font-size: 14px;
    color: var(--dash-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.dash-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===== Toast ===== */
.dash-toast-host {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--dash-white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 600;
    min-width: 280px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

.dash-toast.success {
    border-right: 4px solid var(--dash-success);
}

.dash-toast.success i {
    color: var(--dash-success);
}

.dash-toast.error {
    border-right: 4px solid var(--dash-danger);
}

.dash-toast.error i {
    color: var(--dash-danger);
}

.dash-toast.info {
    border-right: 4px solid var(--dash-info);
}

.dash-toast.info i {
    color: var(--dash-info);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .dash-layout {
        grid-template-columns: 280px 1fr;
        gap: 20px;
    }

    .dash-hero-stats {
        gap: 24px;
    }

    .dash-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    .dash-top-bar-right span:nth-child(3),
    .dash-top-bar .lang-switch {
        display: none;
    }

    .dash-nav-links {
        display: none;
        position: absolute;
        top: 72px;
        right: 0;
        left: 0;
        background: var(--dash-white);
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid var(--dash-border);
    }

    .dash-nav-links.open {
        display: flex;
    }

    .dash-nav-links a {
        padding: 12px 16px;
        width: 100%;
    }

    .dash-mobile-toggle {
        display: block;
    }

    .dash-nav-actions .dash-nav-btn-gold {
        display: none;
    }

    .dash-hero .container {
        flex-direction: column;
        text-align: center;
    }

    .dash-hero-stats {
        justify-content: center;
    }

    .dash-hero-avatar {
        display: none;
    }

    .dash-layout {
        grid-template-columns: 1fr;
        margin-top: -24px;
    }

    .dash-sidebar {
        position: static;
    }

    .dash-profile-grid {
        grid-template-columns: 1fr;
    }

    .dash-loyalty-card {
        flex-direction: column;
        text-align: center;
    }

    .dash-loyalty-eq {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 16px 0;
    }

    .dash-booking-card {
        flex-direction: column;
        text-align: center;
    }

    .dash-booking-side {
        flex-direction: row;
        align-items: center;
    }

    .dash-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .dash-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .dash-tx-table {
        display: block;
        overflow-x: auto;
    }

    .dash-setting-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

:root {
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;
    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;
    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.nav-links {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

/* Hero */
.cars-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding-top: 140px;
    padding-bottom: 120px;
    overflow: hidden;
}

.cars-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 156, 34, 0.08) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.cars-hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

.cars-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.cars-hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cars-hero-content h1 span {
    color: var(--luxury-gold);
}

.cars-hero-content p {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Search Card */
.cars-search-wrapper {
    margin-top: -70px;
    position: relative;
    z-index: 20;
    padding: 0 24px;
}

.cars-search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 28px;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.06);
    max-width: 1200px;
    margin: 0 auto;
}

.cars-search-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.cars-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cars-search-field label {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cars-search-field label i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.cars-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
    font-family: var(--font-ar);
    background: var(--card-bg);
    transition: all 0.25s ease;
    cursor: pointer;
}

.cars-input:focus {
    outline: none;
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.cars-input option {
    font-weight: 500;
}

.cars-search-btn {
    height: 48px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
    padding: 0 24px;
    cursor: pointer;
    font-family: var(--font-ar);
}

.cars-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.4);
}

/* Breadcrumb */
.breadcrumb {
    padding: 16px 0;
    background: var(--bg-color);
}

.breadcrumb ul {
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb ul li {
    color: var(--secondary-text);
}

.breadcrumb ul li a {
    color: var(--secondary-text);
}

.breadcrumb ul li a:hover {
    color: var(--luxury-gold);
}

/* Main Content */
.cars-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* Sidebar */
.cars-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.04);
    padding: 22px;
    transition: all 0.3s;
}

.sidebar-card:hover {
    box-shadow: var(--shadow-hover);
}

.sidebar-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-card h3 i {
    color: var(--luxury-gold);
    font-size: 16px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--luxury-gold);
    cursor: pointer;
}

.price-range-display {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--secondary-text);
    margin-top: 8px;
}

.apply-filters-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-ar);
}

.apply-filters-btn:hover {
    background: var(--luxury-gold);
}

/* Results Area */
.cars-results {
    min-width: 0;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.results-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
}

.results-count {
    color: var(--secondary-text);
    font-size: 14px;
    margin-top: 4px;
}

/* Car Cards */
.cars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.car-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(7, 26, 53, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px -10px rgba(7, 26, 53, 0.05);
}

.car-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(7, 26, 53, 0.12);
    border-color: var(--luxury-gold);
}

.car-card-media {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.car-card:hover .car-card-media img {
    transform: scale(1.06);
}

.car-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 11px;
    z-index: 2;
}

.badge-premium {
    background: var(--luxury-gold);
    color: #fff;
}

.badge-new {
    background: var(--primary-navy);
    color: #fff;
}

.badge-offer {
    background: var(--success);
    color: #fff;
}

.car-card-type {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(4, 56, 84, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.car-card-type i {
    color: var(--luxury-gold);
}

.car-card-body {
    padding: 16px;
}

.car-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 6px;
}

.car-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 10px;
}

.car-card-location i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.car-card-features {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.car-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--secondary-text);
    background: var(--bg-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.car-feature i {
    color: var(--success);
    font-size: 10px;
}

.car-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.car-card-price {
    display: flex;
    flex-direction: column;
}

.car-card-price .price-label {
    font-size: 10px;
    color: var(--secondary-text);
    font-weight: 600;
}

.car-card-price .price-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    font-family: var(--font-en);
}

.car-card-price .price-amount small {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
    font-family: var(--font-ar);
}

.car-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
    cursor: pointer;
    font-family: var(--font-ar);
}

.car-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 162, 76, 0.3);
    color: #fff;
}

/* Features Bar */
.cars-features {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding: 60px 0;
}

.cars-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.cars-feature-item {
    color: #fff;
}

.cars-feature-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--luxury-gold);
    transition: all 0.3s;
}

.cars-feature-item:hover .cars-feature-icon {
    background: var(--luxury-gold);
    color: #fff;
    transform: scale(1.1);
}

.cars-feature-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cars-feature-item p {
    font-size: 13px;
    opacity: 0.8;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 1024px) {
    .cars-main {
        grid-template-columns: 1fr;
    }

    .cars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cars-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cars-search-grid .cars-search-btn {
        grid-column: 1/-1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cars-hero-content h1 {
        font-size: 32px;
    }

    .nav-links {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .cars-search-grid {
        grid-template-columns: 1fr;
    }

    .cars-grid {
        grid-template-columns: 1fr;
    }

    .cars-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-bar-left {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}



@media only screen and (max-width: 991px) {
    .mobile_view {
        display: block;
    }
}

@media only screen and (min-width: 992px) {
    .mobile_view {
        display: none !important;
    }
}

#logo_home h1 a,
header.sticky #logo_home h1 a,
header#plain #logo_home h1 a,
header#colored #logo_home h1 a {
    width: 160px;
    height: 34px;
    display: block;
    background-image: url("https://alnokhbatours.com/website/images/logo/logo2024-09-21-08-52-53.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 160px 34px;
    text-indent: -9999px;
}


.irs-with-grid {
    direction: ltr !important;
}

/* Footer Styles */
.footer {
    background: var(--primary-navy, #043854);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold, #f59c22);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold, #f59c22);
    padding-right: 8px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

:root {
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;
    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;
    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.nav-links {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

/* Hero */
.boats-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding-top: 140px;
    padding-bottom: 120px;
    overflow: hidden;
}

.boats-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 156, 34, 0.08) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.boats-hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

.boats-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.boats-hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.boats-hero-content h1 span {
    color: var(--luxury-gold);
}

.boats-hero-content p {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Search Card */
.boats-search-wrapper {
    margin-top: -70px;
    position: relative;
    z-index: 20;
    padding: 0 24px;
}

.boats-search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 28px;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.06);
    max-width: 1200px;
    margin: 0 auto;
}

.boats-search-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.boats-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.boats-search-field label {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.boats-search-field label i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.boats-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
    font-family: var(--font-ar);
    background: var(--card-bg);
    transition: all 0.25s ease;
    cursor: pointer;
}

.boats-input:focus {
    outline: none;
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.boats-input option {
    font-weight: 500;
}

.boats-search-btn {
    height: 48px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
    padding: 0 24px;
    cursor: pointer;
    font-family: var(--font-ar);
}

.boats-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.4);
}

/* Breadcrumb */
.breadcrumb {
    padding: 16px 0;
    background: var(--bg-color);
}

.breadcrumb ul {
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb ul li {
    color: var(--secondary-text);
}

.breadcrumb ul li a {
    color: var(--secondary-text);
}

.breadcrumb ul li a:hover {
    color: var(--luxury-gold);
}

/* Main Content */
.boats-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* Sidebar */
.boats-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.04);
    padding: 22px;
    transition: all 0.3s;
}

.sidebar-card:hover {
    box-shadow: var(--shadow-hover);
}

.sidebar-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-card h3 i {
    color: var(--luxury-gold);
    font-size: 16px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--luxury-gold);
    cursor: pointer;
}

.price-range-display {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--secondary-text);
    margin-top: 8px;
}

.apply-filters-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-ar);
}

.apply-filters-btn:hover {
    background: var(--luxury-gold);
}

/* Results Area */
.boats-results {
    min-width: 0;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.results-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
}

.results-count {
    color: var(--secondary-text);
    font-size: 14px;
    margin-top: 4px;
}

/* Boat Cards */
.boats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.boat-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(7, 26, 53, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px -10px rgba(7, 26, 53, 0.05);
}

.boat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(7, 26, 53, 0.12);
    border-color: var(--luxury-gold);
}

.boat-card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.boat-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.boat-card:hover .boat-card-media img {
    transform: scale(1.06);
}

.boat-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 12px;
    z-index: 2;
}

.badge-premium {
    background: var(--luxury-gold);
    color: #fff;
}

.badge-new {
    background: var(--primary-navy);
    color: #fff;
}

.badge-offer {
    background: var(--success);
    color: #fff;
}

.boat-card-capacity {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(4, 56, 84, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.boat-card-capacity i {
    color: var(--luxury-gold);
}

.boat-card-body {
    padding: 16px;
}

.boat-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 6px;
}

.boat-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 10px;
}

.boat-card-location i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.boat-card-features {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.boat-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--secondary-text);
    background: var(--bg-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.boat-feature i {
    color: var(--success);
    font-size: 10px;
}

.boat-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.boat-card-price {
    display: flex;
    flex-direction: column;
}

.boat-card-price .price-label {
    font-size: 11px;
    color: var(--secondary-text);
    font-weight: 600;
}

.boat-card-price .price-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    font-family: var(--font-en);
}

.boat-card-price .price-amount small {
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
    font-family: var(--font-ar);
}

.boat-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
    cursor: pointer;
    font-family: var(--font-ar);
}

.boat-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 162, 76, 0.3);
    color: #fff;
}

/* Features Bar */
.boats-features {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding: 60px 0;
}

.boats-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.boats-feature-item {
    color: #fff;
}

.boats-feature-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: var(--luxury-gold);
    transition: all 0.3s;
}

.boats-feature-item:hover .boats-feature-icon {
    background: var(--luxury-gold);
    color: #fff;
    transform: scale(1.1);
}

.boats-feature-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.boats-feature-item p {
    font-size: 13px;
    opacity: 0.8;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .boats-main {
        grid-template-columns: 1fr;
    }

    .boats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .boats-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .boats-search-grid .boats-search-btn {
        grid-column: 1/-1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .boats-hero-content h1 {
        font-size: 32px;
    }

    .nav-links {
        display: none;
    }

    .boats-search-grid {
        grid-template-columns: 1fr;
    }

    .boats-grid {
        grid-template-columns: 1fr;
    }

    .boats-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-bar-left {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

:root {
    --primary-navy: #043854;
    --secondary-navy: #056292;
    --luxury-gold: #f59c22;
    --luxury-gold-hover: #d4850f;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;
    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;
    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.nav-links {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

/* Hero */
.flight-hero {
    position: relative;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    padding-top: 140px;
    padding-bottom: 100px;
    overflow: hidden;
}

.flight-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 156, 34, 0.08) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.flight-hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

.flight-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.flight-hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.flight-hero-content h1 span {
    color: var(--luxury-gold);
}

.flight-hero-content p {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Search Card */
.search-card-wrapper {
    margin-top: -70px;
    position: relative;
    z-index: 20;
    padding: 0 24px;
}

.search-tabs {
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 2;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto 0;
}

.search-tab {
    background: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: none;
    padding: 12px 24px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.search-tab i {
    font-size: 14px;
    transition: color 0.3s;
}

.search-tab:hover {
    color: var(--primary-text);
}

.search-tab.active {
    background: var(--card-bg);
    color: var(--primary-navy);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 3px solid var(--luxury-gold);
    position: relative;
    margin-bottom: -1px;
}

.search-tab.active i {
    color: var(--luxury-gold);
}

.flight-search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 28px;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.06);
    max-width: 1000px;
    margin: 0 auto;
}

.search-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr 0.8fr 0.8fr auto;
    gap: 14px;
    align-items: end;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-field label {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-field label i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.search-input-box {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
    font-family: var(--font-ar);
    background: var(--card-bg);
    transition: all 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.search-input-box:focus {
    outline: none;
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.search-input-box option {
    font-weight: 500;
}

.search-btn {
    height: 48px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
    padding: 0 24px;
    cursor: pointer;
    font-family: var(--font-ar);
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.4);
}

/* Filters */
.filters-bar {
    background: var(--card-bg);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.filters-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.filters-inner::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--bg-color);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-text);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-chip:hover {
    border-color: var(--luxury-gold);
    color: var(--primary-navy);
    background: rgba(245, 156, 34, 0.06);
}

.filter-chip.active {
    background: var(--primary-navy);
    color: #fff;
    border-color: var(--primary-navy);
}

.filter-chip i {
    font-size: 12px;
    opacity: 0.7;
}

.filter-divider {
    width: 1px;
    height: 24px;
    background: rgba(15, 23, 42, 0.1);
    flex-shrink: 0;
}

/* Main Layout */
.flight-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
}

/* Results */
.results-area {
    min-width: 0;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.results-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
}

.results-count {
    color: var(--secondary-text);
    font-size: 14px;
}

.sort-select {
    padding: 8px 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
    background: var(--card-bg);
    cursor: pointer;
    font-family: var(--font-ar);
    transition: border-color 0.2s;
}

.sort-select:focus {
    outline: none;
    border-color: var(--luxury-gold);
}

/* Flight Card */
.flight-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.04);
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.flight-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.flight-card-inner {
    padding: 24px;
    display: grid;
    grid-template-columns: 160px 1fr 180px;
    gap: 20px;
    align-items: center;
}

/* Airline */
.flight-airline {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flight-airline img {
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
}

.flight-airline .airline-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-text);
}

.flight-airline .flight-num {
    font-size: 11px;
    color: var(--secondary-text);
    font-weight: 600;
    direction: ltr;
    font-family: var(--font-en);
}

/* Timeline */
.flight-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 8px;
}

.time-node {
    text-align: center;
    min-width: 80px;
}

.time-node .time {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-text);
    line-height: 1.2;
    letter-spacing: -0.3px;
    font-family: var(--font-en);
}

.time-node .airport {
    font-size: 14px;
    font-weight: 700;
    color: var(--luxury-gold);
    margin-top: 2px;
}

.time-node .airport-full {
    font-size: 10px;
    color: var(--secondary-text);
    margin-top: 1px;
    white-space: nowrap;
}

.journey-line {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.journey-line .duration {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
}

.journey-line .line-draw {
    width: 100%;
    height: 2px;
    background: rgba(15, 23, 42, 0.1);
    position: relative;
    border-radius: 2px;
}

.journey-line .line-draw .dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-navy);
    top: -3px;
}

.journey-line .line-draw .dot.start {
    right: 0;
}

.journey-line .line-draw .dot.end {
    left: 0;
}

.journey-line .line-draw .plane-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--luxury-gold);
    font-size: 14px;
}

.journey-line .line-draw .stop-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--luxury-gold);
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid var(--card-bg);
}

.stops-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
}

.stops-badge.direct {
    background: rgba(22, 163, 74, 0.1);
    color: var(--success);
}

.stops-badge.transit {
    background: rgba(245, 156, 34, 0.12);
    color: var(--luxury-gold-hover);
}

/* Extras */
.flight-extras {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.flight-extra {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--secondary-text);
    font-weight: 600;
}

.flight-extra i {
    color: var(--success);
    font-size: 10px;
}

/* Price */
.flight-price {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-right: 8px;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
}

.flight-price .price-label {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
}

.flight-price .price-val {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1;
    font-family: var(--font-en);
}

.flight-price .price-val small {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-text);
}

.flight-price .price-from {
    font-size: 11px;
    color: var(--secondary-text);
    margin-bottom: -4px;
}

.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-hover));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
    min-width: 140px;
    font-family: var(--font-ar);
    cursor: pointer;
}

.book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212, 162, 76, 0.45);
    color: #fff;
}

.book-btn i {
    font-size: 14px;
}

/* Sidebar */
.flight-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.04);
    padding: 22px;
    transition: all 0.3s;
}

.sidebar-card:hover {
    box-shadow: var(--shadow-hover);
}

.sidebar-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-card h3 i {
    color: var(--luxury-gold);
    font-size: 16px;
}

.sidebar-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.06);
    margin: 14px 0;
}

/* Search Summary */
.ss-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.ss-row .label {
    color: var(--secondary-text);
    font-weight: 500;
}

.ss-row .value {
    color: var(--primary-text);
    font-weight: 700;
}

.edit-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: var(--bg-color);
    border: 1.5px dashed rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    color: var(--primary-navy);
    font-weight: 700;
    font-size: 13px;
    transition: all 0.2s;
    margin-top: 12px;
    font-family: var(--font-ar);
    cursor: pointer;
}

.edit-search-btn:hover {
    background: rgba(245, 156, 34, 0.08);
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

/* Why Choose Us */
.wcu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.wcu-item:not(:last-child) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.wcu-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.1);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.wcu-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
}

/* Help */
.help-phone {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    direction: ltr;
    text-align: center;
    display: block;
    margin-bottom: 8px;
}

.help-phone i {
    color: var(--luxury-gold);
    margin-left: 6px;
    font-size: 18px;
}

.help-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #25D366;
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.25s;
    margin-bottom: 8px;
}

.help-whatsapp:hover {
    background: #128C7E;
    color: #fff;
    transform: translateY(-2px);
}

.help-email {
    text-align: center;
    display: block;
    font-size: 13px;
    color: var(--secondary-text);
    margin-bottom: 8px;
    transition: color 0.2s;
}

.help-email:hover {
    color: var(--luxury-gold);
}

.help-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.25s;
    font-family: var(--font-ar);
    cursor: pointer;
}

.help-chat-btn:hover {
    background: var(--secondary-navy);
    transform: translateY(-2px);
}

/* Payment */
.pay-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pay-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: var(--bg-color);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-text);
    transition: all 0.2s;
}

.pay-item:hover {
    background: rgba(245, 156, 34, 0.06);
    color: var(--primary-navy);
    transform: translateY(-2px);
}

/* Mobile Sidebar */
.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-hover);
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s;
    cursor: pointer;
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    background: var(--secondary-navy);
}

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    height: 100vh;
    background: var(--card-bg);
    z-index: 200;
    box-shadow: var(--shadow-hover);
    overflow-y: auto;
    transition: left 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 20px;
}

.sidebar-drawer.open {
    left: 0;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 56, 84, 0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.drawer-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
}

.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    font-size: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.drawer-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.empty-state .empty-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
    color: var(--secondary-text);
}

.empty-state h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--secondary-text);
    font-size: 14px;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
    font-family: var(--font-ar);
    cursor: pointer;
}

.empty-btn:hover {
    background: var(--secondary-navy);
    transform: translateY(-2px);
    color: #fff;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.flight-card,
.sidebar-card {
    animation: fadeUp 0.5s ease both;
}

.flight-card:nth-child(2) {
    animation-delay: 0.05s;
}

.flight-card:nth-child(3) {
    animation-delay: 0.1s;
}

.flight-card:nth-child(4) {
    animation-delay: 0.15s;
}

.flight-card:nth-child(5) {
    animation-delay: 0.2s;
}

/* Responsive */
@media (max-width: 1100px) and (min-width: 992px) {
    .search-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .search-grid .search-btn {
        grid-column: 1/-1;
    }
}

@media (max-width: 991px) {
    .flight-main {
        grid-template-columns: 1fr;
    }

    .search-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .search-grid .search-btn {
        grid-column: 1/-1;
    }

    .flight-hero {
        min-height: auto;
        padding: 40px 0;
    }

    .flight-hero-content h1 {
        font-size: 36px;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-desktop {
        display: none;
    }

    .flight-card-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }

    .flight-airline {
        flex-direction: row;
        text-align: right;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .flight-price {
        border-right: none;
        padding-right: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .search-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .search-grid .search-btn {
        grid-column: 1/-1;
    }
}

@media (max-width: 480px) {
    .search-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .flight-search-card {
        padding: 16px;
        border-radius: 0 16px 16px 16px;
    }

    .search-tabs {
        justify-content: center;
    }

    .search-tab {
        padding: 8px 14px;
        font-size: 12px;
    }

    .filter-chip {
        font-size: 12px;
        padding: 6px 12px;
    }

    .time-node .time {
        font-size: 18px;
    }

    .flight-price .price-val {
        font-size: 20px;
    }

    .help-phone {
        font-size: 18px;
    }

    .pay-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .top-bar-left {
        display: none;
    }
}

.parallax-mirror {
    display: none !important;
}


:root {
    --primary-navy: #0f172a;
    --secondary-navy: #1e293b;
    --luxury-gold: #d4a24c;
    --luxury-gold-hover: #b88636;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;

    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;

    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-text);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.social-icons a {
    color: #fff;
    opacity: 0.8;
}

.social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.navbar {
    position: absolute;
    top: 40px;
    /* Below top bar */
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.sticky .nav-links a {
    color: var(--primary-text);
}

.navbar.sticky .nav-links a:hover {
    color: var(--luxury-gold);
}

.navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}




.logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
}

.navbar.sticky .logo {
    color: var(--primary-navy);
}

.logo-icon {
    color: var(--luxury-gold);
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.nav-links a:hover {
    color: var(--luxury-gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
}

.btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background-color: #fff;
    color: var(--primary-navy);
}

/* Hero Section Slider */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 120px;
    overflow: hidden;
    background-color: var(--primary-navy);
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1);
}

.hero-slide.active {
    opacity: 1;
    animation: kenburns 8s ease-out forwards;
}

@keyframes kenburns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.85) 0%,
            rgba(15, 23, 42, 0.4) 50%,
            rgba(15, 23, 42, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero h1 span {
    color: var(--luxury-gold);
}

.hero p {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.trust-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.trust-item i {
    color: var(--luxury-gold);
    font-size: 20px;
}

/* Hero Slider Indicators */
.hero-slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 12;
}

.hero-slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-slider-dots .dot.active {
    background: var(--luxury-gold);
    width: 32px;
    border-radius: 6px;
}

/* Hero Content Load Animations */
.hero-fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* Floating Search Card & Tabs */
.search-card-wrapper {
    margin-top: -60px;
    position: relative;
    z-index: 20;
}

.search-tabs {
    display: flex;
    gap: 6px;
    margin-right: 12px;
    position: relative;
    z-index: 2;
    justify-content: center;
}

.search-tab {
    background: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: none;
    padding: 12px 24px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.search-tab i {
    font-size: 15px;
    color: var(--secondary-text);
    transition: color 0.3s;
}

.search-tab:hover {
    color: var(--primary-navy);
}

.search-tab.active {
    background: var(--card-bg);
    color: var(--primary-navy);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 3px solid var(--luxury-gold);
    z-index: 11;
    position: relative;
    margin-bottom: -1px;
}

.search-tab.active i {
    color: var(--luxury-gold);
}

.search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 32px;
    box-shadow: var(--shadow-premium);
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 20px;
    align-items: flex-end;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.search-field label {
    display: block;
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 600;
    text-align: right;
}

.search-input-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 52px;
    position: relative;
}

.search-input-box:hover {
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.search-input-box span {
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.search-input-box span.placeholder {
    color: var(--secondary-text);
    font-weight: 400;
}

.search-input-box i {
    color: var(--secondary-text);
    font-size: 16px;
    transition: color 0.3s;
}

.search-input-box:hover i {
    color: var(--luxury-gold);
}

/* Dropdowns */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 240px;
    display: none;
    animation: slideDown 0.25s ease-out;
    padding: 8px 0;
}

.search-dropdown.active {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: right;
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.dropdown-item:hover {
    background: rgba(212, 162, 76, 0.08);
    color: var(--luxury-gold);
}

.dropdown-item i {
    color: var(--secondary-text);
    font-size: 15px;
}

.dropdown-item:hover i {
    color: var(--luxury-gold);
}

/* Traveler Counter Dropdown Custom Styles */
.counter-dropdown {
    padding: 20px;
    min-width: 280px;
}

.counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.counter-label {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 2px;
}

.counter-label .title {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-text);
}

.counter-label .subtitle {
    font-size: 11px;
    color: var(--secondary-text);
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--primary-navy);
}

.counter-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
    background: rgba(212, 162, 76, 0.05);
}

.counter-val {
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}

.dropdown-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.btn-apply {
    background: var(--primary-navy);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 13px;
}

.btn-apply:hover {
    background: var(--luxury-gold);
}

.search-btn {
    background-color: var(--primary-navy);
    color: #fff;
    border: none;
    height: 52px;
    padding: 0 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.search-btn:hover {
    background-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
}

/* Section Spacing */
/* section {
    padding: 120px 0;
} */

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    color: var(--secondary-text);
}

/* Partners */
.partners {
    padding: 100px 0 60px;
    background: #fff;
}

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;

}

.partners-grid img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    margin: 16px;
    box-shadow: var(--shadow-premium);
    background-color: #fff;
    transition: all 0.3s ease;
}

.partners-grid:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.partner-logo {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-en);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Stats */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.stat-card {
    background: var(--card-bg);
    padding: 40px 24px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    width: 64px;
    height: 64px;
    background: rgba(212, 162, 76, 0.1);
    color: var(--luxury-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 24px;
}

.stat-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    font-family: var(--font-en);
}

.stat-text {
    font-size: 16px;
    color: var(--secondary-text);
    font-weight: 500;
}

/* Services */
.services {
    background: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px 32px;
    border-radius: var(--radius-card);
    transition: all 0.3s ease;
    text-align: center;
}

.service-card img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.service-icon {
    font-size: 40px;
    color: var(--primary-navy);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    color: var(--luxury-gold);
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--primary-navy);
}

.service-card p {
    color: var(--secondary-text);
    margin-bottom: 24px;
}

.service-link {
    color: var(--luxury-gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-link i {
    font-size: 12px;
}

/* =========================
   Homepage Category Sections
   ========================= */

/* --- Shared Base --- */
.category-section {
    padding: 80px 0;
}

.category-section.alt-bg {
    background: #fff;
}

.category-header {
    text-align: center;
    margin-bottom: 48px;
}

.category-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
}

.category-header h2 span {
    color: var(--luxury-gold);
}

.category-header p {
    color: var(--secondary-text);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.category-footer {
    text-align: center;
    margin-top: 40px;
}

.category-footer .btn-outline-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    background: transparent;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-footer .btn-outline-gold:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.3);
}

/* =========================
   CARD STYLE 1: سياحة دينية
   القوس — Arch-inspired design
   ========================= */
.card-arch {
    position: relative;
    background: var(--card-bg);
    border-radius: 24px;
    overflow: visible;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(245, 156, 34, 0.15);
}

.card-arch::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 10%;
    right: 10%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--luxury-gold), transparent);
    border-radius: 3px;
    opacity: 0;
    transition: all 0.5s ease;
}

.card-arch:hover::before {
    opacity: 1;
    left: 5%;
    right: 5%;
}

.card-arch:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(212, 162, 76, 0.2);
    border-color: var(--luxury-gold);
}

.card-arch-top {
    position: relative;
    height: 170px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    background: #021526;
}

.card-arch-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-arch:hover .card-arch-top img {
    transform: scale(1.12);
}

.card-arch-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}

.card-arch-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 16px;
    background: rgba(245, 156, 34, 0.92);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 30px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-arch-body {
    padding: 24px 22px 22px;
    position: relative;
}

.card-arch-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    position: relative;
    padding-right: 16px;
}

.card-arch-body h3::before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 4px;
    height: 20px;
    background: var(--luxury-gold);
    border-radius: 2px;
}

.card-arch-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 18px;
}

.card-arch-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    position: relative;
}

.card-arch-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--luxury-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.card-arch-link:hover::after {
    transform: scaleX(1);
}

.card-arch-link:hover {
    gap: 12px;
}

/* =========================
   CARD STYLE 2: الرحلات
   البوصلة — Circular cutout design
   ========================= */
.card-compass {
    position: relative;
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--border-color);
}

.card-compass:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.card-compass-media {
    position: relative;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #043854, #0a2a4a);
    overflow: hidden;
}

.card-compass-media::before {
    content: '\f14e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    font-size: 80px;
    color: rgba(245, 156, 34, 0.06);
    top: -10px;
    left: -10px;
    transform: rotate(-15deg);
}

.card-compass-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(245, 156, 34, 0.3);
    box-shadow: 0 0 40px rgba(245, 156, 34, 0.15);
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
}

.card-compass:hover .card-compass-circle {
    border-color: var(--luxury-gold);
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(245, 156, 34, 0.25);
}

.card-compass-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-compass-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 4px 18px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.card-compass-body {
    padding: 28px 22px 22px;
    text-align: center;
}

.card-compass-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.card-compass-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 18px;
}

.card-compass-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-compass-link:hover {
    gap: 12px;
    letter-spacing: 1px;
}

/* =========================
   CARD STYLE 3: حجز الطيران
   المنحدر — Diagonal dynamic split
   ========================= */
.card-diagonal {
    position: relative;
    background: var(--card-bg);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));
}

.card-diagonal:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}

.card-diagonal-img {
    position: relative;
    height: 200px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 92%);
}

.card-diagonal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-diagonal:hover .card-diagonal-img img {
    transform: scale(1.1) rotate(1deg);
}

.card-diagonal-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(245, 156, 34, 0.3), transparent 50%);
}

.card-diagonal-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 16px;
    background: var(--primary-navy);
    color: var(--luxury-gold);
    font-size: 11px;
    font-weight: 700;
    z-index: 3;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.card-diagonal-body {
    padding: 10px 22px 22px;
    position: relative;
}

.card-diagonal-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-navy), var(--luxury-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-diagonal-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 16px;
}

.card-diagonal-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(245, 156, 34, 0.1), transparent);
    border-radius: 8px;
}

.card-diagonal-link:hover {
    gap: 12px;
    background: rgba(245, 156, 34, 0.2);
}

/* =========================
   CARD STYLE 4: الفنادق
   الشريط — Ribbon luxury design
   ========================= */
.card-ribbon {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.card-ribbon:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.card-ribbon-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.card-ribbon-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.card-ribbon:hover .card-ribbon-media img {
    transform: scale(1.08);
}

.card-ribbon-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
}

.card-ribbon-strip {
    position: absolute;
    top: 24px;
    right: -36px;
    width: 140px;
    height: 32px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    z-index: 5;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
    letter-spacing: 1px;
}

.card-ribbon-strip::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 6px;
    font-size: 9px;
}

.card-ribbon-body {
    padding: 20px 22px 22px;
}

.card-ribbon-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.card-ribbon-body h3 span {
    font-weight: 400;
    font-size: 13px;
    color: var(--luxury-gold);
    margin-right: 8px;
}

.card-ribbon-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 18px;
}

.card-ribbon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.card-ribbon-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
}

.card-ribbon-price small {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
    margin-right: 4px;
}

.card-ribbon-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-ribbon-link:hover {
    gap: 12px;
}

/* =========================
   CARD STYLE 5: المراكب السياحية
   الموجة — Wave & floating design
   ========================= */
.card-wave {
    position: relative;
    background: linear-gradient(180deg, #043854 0%, #021526 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(4, 56, 84, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-wave:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px rgba(4, 56, 84, 0.25);
}

.card-wave-img {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.card-wave-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    opacity: 0.85;
}

.card-wave:hover .card-wave-img img {
    transform: scale(1.1);
}

.card-wave-img::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='%23043854'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

.card-wave-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 30px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-wave-body {
    padding: 16px 22px 22px;
    position: relative;
    z-index: 2;
}

.card-wave-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.card-wave-body h3 span {
    color: var(--luxury-gold);
}

.card-wave-body p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 18px;
}

.card-wave-body .card-wave-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-wave-body .card-wave-link:hover {
    gap: 12px;
}

.card-wave-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px 20px;
    position: relative;
    z-index: 2;
}

.card-wave-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--luxury-gold);
}

.card-wave-price small {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

/* =========================
   CARD STYLE 6: السيارات
   السرعة — Kinetic angular design
   ========================= */
.card-speed {
    position: relative;
    background: var(--card-bg);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--border-color);
}

.card-speed:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}

.card-speed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--luxury-gold), var(--primary-navy), var(--luxury-gold));
    background-size: 200% 100%;
    animation: speedGlow 2s linear infinite;
    z-index: 5;
}

@keyframes speedGlow {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.card-speed-img {
    position: relative;
    height: 170px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.card-speed-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-speed:hover .card-speed-img img {
    transform: scale(1.1) rotate(-2deg);
}

.card-speed-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(245, 156, 34, 0.2), transparent);
    z-index: 1;
}

.card-speed-flag {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 4px 16px 4px 10px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 3;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.card-speed-body {
    padding: 12px 22px 22px;
    position: relative;
}

.card-speed-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-speed-body h3::before {
    content: '\f1b9';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: var(--luxury-gold);
}

.card-speed-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 16px;
}

.card-speed-body .card-speed-specs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.card-speed-body .speed-spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--secondary-text);
    background: var(--bg-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.card-speed-body .speed-spec i {
    color: var(--luxury-gold);
    font-size: 10px;
}

.card-speed-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-speed-link i {
    transition: transform 0.3s;
}

.card-speed-link:hover {
    color: var(--luxury-gold);
    gap: 12px;
}

.card-speed-link:hover i {
    transform: translateX(-4px);
}

/* =========================
   Floating Particles (for wave card bg)
   ========================= */
@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.6;
    }
}

.card-wave-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--luxury-gold);
    opacity: 0.3;
    animation: floatParticle 4s ease-in-out infinite;
}

.card-wave-particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.card-wave-particle:nth-child(2) {
    top: 40%;
    right: 15%;
    animation-delay: 1s;
    width: 6px;
    height: 6px;
}

.card-wave-particle:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.card-wave-particle:nth-child(4) {
    top: 60%;
    right: 25%;
    animation-delay: 0.5s;
    width: 3px;
    height: 3px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .category-header h2 {
        font-size: 24px;
    }

    .category-section {
        padding: 50px 0;
    }
}

/* Packages CSS Redesign - Premium Cinematic Layout */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: center;
    padding: 40px 0;
}

.package-card {
    background: linear-gradient(180deg, #021526 0%, #0B2545 100%);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    height: 580px;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

/* Desktop Middle Card Emphasis */
@media (min-width: 1025px) {
    .package-card.featured {
        transform: scale(1.03);
        border: 2px solid var(--luxury-gold);
        box-shadow: 0 25px 65px rgba(212, 162, 76, 0.15);
    }

    .package-card.featured:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 35px 75px rgba(212, 162, 76, 0.25);
    }
}

.package-img-container {
    position: relative;
    width: 100%;
    height: 58%;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.package-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(2, 21, 38, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.package-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-card:hover .package-img {
    transform: scale(1.06);
}

/* Bottom Curved Wave Panel */
.card-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
    pointer-events: none;
}

.card-wave .wave-bg-path {
    fill: #021526;
}

.card-wave .wave-stroke-path {
    stroke: url(#gold-grad);
    fill: none;
}

/* Badges */
.package-badge {
    position: absolute;
    top: 24px;
    z-index: 5;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.package-badge.badge-gold {
    background: var(--luxury-gold);
    color: #fff;
    right: 24px;
}

.package-badge.badge-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    left: 24px;
    border: 1px solid rgba(212, 162, 76, 0.3);
}

/* Floating Icon on Card Edge */
.floating-icon-boundary {
    position: absolute;
    top: 54%;
    right: 24px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    color: #021526;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.package-card:hover .floating-icon-boundary {
    transform: scale(1.1);
}

/* Floating Icon on Top Right */
.floating-icon-top {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    color: #021526;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.package-card:hover .floating-icon-top {
    transform: scale(1.1);
}

.package-content {
    padding: 24px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(180deg, #021526 0%, #06192c 100%);
    position: relative;
    z-index: 3;
}

.package-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    line-height: 1.2;
}

.package-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.package-meta-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

.package-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: auto;
    padding-bottom: 20px;
}

.package-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.package-meta .meta-item i {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.package-meta .meta-item i.fa-star {
    color: var(--luxury-gold);
}

.package-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.package-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-price .price-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-price .price-amount {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-en);
    line-height: 1;
}

.package-price .price-currency {
    font-size: 14px;
    color: var(--luxury-gold);
    font-family: var(--font-ar);
    margin-right: 4px;
}

.package-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.package-cta .cta-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--luxury-gold);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
}

.package-cta .cta-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--luxury-gold);
    transition: all 0.3s ease;
}

.package-cta:hover .cta-circle {
    background: #ffffff;
    color: #021526;
    transform: translateX(-6px);
}

.package-cta:hover .cta-text {
    color: #ffffff;
}

/* Mobile dots & Responsiveness overrides */
.packages-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.packages-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.packages-dots .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--luxury-gold);
}

@media (max-width: 1024px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .package-card.featured {
        transform: none !important;
        border-color: transparent !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    }

    .package-card {
        height: 540px !important;
    }

    .package-title {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .packages-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
        padding: 10px 24px 30px 24px !important;
        margin: 0 -24px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .packages-grid::-webkit-scrollbar {
        display: none !important;
    }

    .package-card {
        flex: 0 0 100% !important;
        scroll-snap-align: center !important;
        max-width: 100% !important;
        height: 520px !important;
    }

    .package-title {
        font-size: 26px !important;
    }

    .packages-dots {
        display: flex !important;
    }
}

/* Why Choose Us */
.why-us {
    background: #fff;
}

.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.why-us-content h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 24px;
}

.why-us-content p {
    color: var(--secondary-text);
    font-size: 18px;
    margin-bottom: 40px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 162, 76, 0.1);
    color: var(--luxury-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 4px;
}

.feature-text p {
    color: var(--secondary-text);
    font-size: 14px;
    margin-bottom: 0;
}

.why-us-image {
    position: relative;
}

.why-us-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-premium);
}

.experience-badge {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--primary-navy);
    color: #fff;
    padding: 40px;
    border-radius: var(--radius-card);
    text-align: center;
    border: 4px solid #fff;
}

.experience-badge .num {
    font-size: 48px;
    font-weight: 800;
    font-family: var(--font-en);
    line-height: 1;
    margin-bottom: 8px;
    color: var(--luxury-gold);
}

/* Video Section */
.video-section {
    background: var(--bg-color);
}

.video-wrapper {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    height: 600px;
    background-image: url("images/hero.png");
    /* fallback image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luxury-gold);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.play-btn:hover {
    transform: scale(1.1);
    background: #fff;
}

/* Blog */
.blog {
    background: #fff;
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.blog-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.blog-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-content {
    padding: 32px;
    background: var(--card-bg);
}

.blog-meta {
    color: var(--secondary-text);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
}

.blog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 24px;
}

.blog-link {
    color: var(--luxury-gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CTA */
.final-cta {
    background: linear-gradient(135deg,
            var(--primary-navy) 0%,
            var(--secondary-navy) 100%);
    padding: 100px 0;
    text-align: center;
    color: #fff;
}

.final-cta h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 24px;
}

.final-cta p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Footer */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 100px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 64px;
    margin-bottom: 80px;
}

.footer-logo {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 8px;
}

.newsletter-form {
    display: flex;
    margin-top: 24px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 0 12px 12px 0;
    font-family: var(--font-ar);
    outline: none;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 0 32px;
    border-radius: 12px 0 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .search-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-btn {
        grid-column: span 2;
        width: 100%;
    }

    .search-card-wrapper {
        position: static;
        margin-top: -60px;
        padding: 0 24px;
    }

    .partners {
        padding-top: 80px;
    }

    .stats-row,
    .services-grid,
    .packages-grid,
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 42px;
    }

    .nav-links {
        display: none;
    }

    .search-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .search-btn {
        grid-column: span 1;
    }

    .search-tabs {
        margin-right: 0;
        justify-content: center;
    }

    .search-tab {
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
    }

    .hero-slider-dots {
        bottom: 140px;
    }

    .stats-row,
    .services-grid,
    .packages-grid,
    .blog-cards,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .top-bar-left {
        display: none;
    }

    .video-wrapper {
        height: 300px;
    }
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* MEDIA QUERIES */
@media only screen and (max-width: 991px) {
    .mobile_view {
        display: block;
    }
}

@media only screen and (min-width: 992px) {
    .mobile_view {
        display: none !important;
    }
}

#logo_home h1 a,
header.sticky #logo_home h1 a,
header#plain #logo_home h1 a,
header#colored #logo_home h1 a {
    width: 160px;
    height: 34px;
    display: block;
    background-image: url("https://alnokhbatours.com/website/images/logo/logo2024-09-21-08-52-53.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 160px 34px;
    text-indent: -9999px;
}

/* ==========================================================================
   ✨ NEW HOTELS PAGE DESIGN - COMPLETE STYLESHEET
   ========================================================================== */

:root {
    --hotels-primary: #0a1f44;
    --hotels-primary-dark: #061533;
    --hotels-accent: #f59e0b;
    --hotels-accent-dark: #d97706;
    --hotels-text: #0b111e;
    --hotels-text-muted: #666666;
    --hotels-bg-light: #f8f9fb;
    --hotels-border: #e5e7eb;
}

/* ==========================================================================
   🏨 HERO SECTION
   ========================================================================== */

.hotels-hero {
    position: relative !important;
    min-height: 480px !important;
    display: flex !important;
    align-items: center !important;
    padding: 70px 0 90px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
}

.hotels-hero-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
}

.hotels-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(15, 25, 60, 0.92) 0%, rgba(20, 35, 80, 0.75) 100%) !important;
    z-index: 2 !important;
}

.hotels-hero-content {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    direction: rtl !important;
}

/* Stats on the LEFT (in RTL) */
.hotels-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    direction: rtl !important;
    order: 1 !important;
}

/* Title on the RIGHT (in RTL) */
.hotels-hero-text {
    order: 2 !important;
    text-align: right !important;
}

.hotels-hero-text h1 {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 18px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hotels-hero-underline {
    width: 80px !important;
    height: 4px !important;
    background: #f59e0b !important;
    border-radius: 4px !important;
    margin: 0 0 22px 0 !important;
    margin-right: 0 !important;
    animation: slideInRight 0.8s ease forwards !important;
}

@keyframes slideInRight {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 80px;
        opacity: 1;
    }
}

.hotels-hero-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    max-width: 480px !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: all 0.3s ease !important;
    text-align: right !important;
}

.hero-stat-card:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-3px) !important;
}

.hero-stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(245, 158, 11, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.hero-stat-num {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.hero-stat-label {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

/* ==========================================================================
   🔍 SEARCH BAR
   ========================================================================== */

.hotels-search-wrapper {
    margin-top: -50px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 10 !important;
}

.hotels-search-form {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.10) !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr auto !important;
    gap: 0 !important;
    align-items: center !important;
    direction: rtl !important;
    border: 1px solid rgba(10, 31, 68, 0.05) !important;
}

.hotels-search-field {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    border-left: 1px solid #f0f0f0 !important;
    transition: background 0.3s ease !important;
    border-radius: 12px !important;
}

html[dir="rtl"] .hotels-search-field {
    border-left: none !important;
    border-right: 1px solid #f0f0f0 !important;
}

html[dir="rtl"] .hotels-search-field:last-of-type {
    border-right: none !important;
}

.hotels-search-field:hover {
    background: #f8f9fb !important;
}

.field-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(10, 31, 68, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.field-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.field-content label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #888 !important;
    margin-bottom: 2px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a1f44 !important;
    width: 100% !important;
    padding: 0 !important;
    font-family: 'Tajawal', sans-serif !important;
}

.search-input::placeholder {
    color: #aaa !important;
    font-weight: 500 !important;
}

.hotels-search-btn {
    background: #0a1f44 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 26px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Tajawal', sans-serif !important;
    white-space: nowrap !important;
    margin-right: 8px !important;
}

html[dir="rtl"] .hotels-search-btn {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

.hotels-search-btn:hover {
    background: #f59e0b !important;
    color: #0a1f44 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3) !important;
}

.hotels-search-btn svg {
    transition: transform 0.3s ease !important;
}

.hotels-search-btn:hover svg {
    transform: scale(1.1) !important;
}

/* ==========================================================================
   📋 SECTION HEADER
   ========================================================================== */

.hotels-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 30px !important;
    padding-bottom: 0 !important;
    direction: rtl !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.hotels-section-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    margin: 0 !important;
    position: relative !important;
    padding-bottom: 14px !important;
}

.hotels-section-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 70px !important;
    height: 3px !important;
    background: #f59e0b !important;
    border-radius: 3px !important;
}

html[dir="rtl"] .hotels-section-title::after {
    right: 0 !important;
    left: auto !important;
}

.hotels-sort-wrapper {
    display: flex !important;
    align-items: center !important;
}

.hotels-sort-btn {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0a1f44 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Tajawal', sans-serif !important;
}

.hotels-sort-btn:hover {
    border-color: #0a1f44 !important;
    background: #f8f9fb !important;
}

.hotels-sort-btn svg {
    color: #888 !important;
}

/* ==========================================================================
   🏨 HOTEL CARDS GRID
   ========================================================================== */

.hotels-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    direction: rtl !important;
    margin-bottom: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

.hotel-card-modern {
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px -10px rgba(7, 26, 53, 0.05) !important;
    border: 1px solid rgba(7, 26, 53, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
}

@keyframes hotelCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

.hotel-card-modern:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(10, 31, 68, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.hotel-card-media {
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}

.hotel-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

.hotel-card-modern:hover .hotel-card-media img {
    transform: scale(1.08) !important;
}

.hotel-card-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    z-index: 5 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.badge-premium {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

.badge-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.badge-special {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

.hotel-card-fav {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    color: #999 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.hotel-card-fav:hover {
    background: #ffffff !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}

.hotel-card-fav.active {
    color: #ef4444 !important;
    background: #ffffff !important;
}

.hotel-card-fav.active svg {
    fill: #ef4444 !important;
}

.hotel-card-body {
    padding: 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-align: right !important;
}

.hotel-card-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
}

.hotel-card-modern:hover .hotel-card-title {
    color: #f59e0b !important;
}

.hotel-card-rating {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
    direction: ltr !important;
    justify-content: flex-start !important;
}

.hotel-card-location {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
}

.hotel-card-features {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 16px !important;
}

.hotel-feature-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #f8f9fb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.hotel-feature-icon:hover {
    background: rgba(10, 31, 68, 0.08) !important;
    transform: translateY(-2px) !important;
}

.hotel-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.hotel-card-price {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: right !important;
}

.price-label {
    font-size: 11px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.price-amount {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    line-height: 1 !important;
}

.price-amount small {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888 !important;
    margin-right: 2px !important;
}

.hotel-card-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

.hotel-card-btn:hover {
    background: linear-gradient(135deg, #0a1f44 0%, #061533 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(10, 31, 68, 0.25) !important;
}

.hotel-card-btn svg {
    transition: transform 0.3s ease !important;
}

html[dir="rtl"] .hotel-card-btn:hover svg {
    transform: translateX(-3px) !important;
}

html[dir="ltr"] .hotel-card-btn:hover svg {
    transform: translateX(3px) !important;
}

/* Show More Button */
.hotels-show-more-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.hotels-show-more-btn {
    background: #ffffff !important;
    border: 2px solid #0a1f44 !important;
    color: #0a1f44 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-family: 'Tajawal', sans-serif !important;
}

.hotels-show-more-btn:hover {
    background: #0a1f44 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(10, 31, 68, 0.2) !important;
}

.hotels-show-more-btn svg {
    transition: transform 0.3s ease !important;
}

html[dir="rtl"] .hotels-show-more-btn:hover svg {
    transform: translateX(-4px) !important;
}

html[dir="ltr"] .hotels-show-more-btn:hover svg {
    transform: translateX(4px) !important;
}

/* ==========================================================================
   📞 SIDEBAR - HELP CARD
   ========================================================================== */

.hotels-help-card {
    background: linear-gradient(135deg, #0a1f44 0%, #061533 100%) !important;
    border-radius: 20px !important;
    padding: 30px 25px !important;
    text-align: center !important;
    color: #ffffff !important;
    box-shadow: 0 15px 40px rgba(10, 31, 68, 0.15) !important;
    margin-bottom: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.hotels-help-card::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    right: -30% !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

.hotels-help-icon {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 16px auto !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    border: 2px solid rgba(245, 158, 11, 0.3) !important;
}

.hotels-help-card h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.hotels-help-card p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 0 20px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.hotels-help-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3) !important;
}

.hotels-help-phone:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   🔍 SIDEBAR - FILTER CARD
   ========================================================================== */

.hotels-filter-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
}

.hotels-filter-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 22px !important;
    background: #f8f9fb !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.hotels-filter-header h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    margin: 0 !important;
}

.hotels-filter-header svg {
    color: #0a1f44 !important;
}

.filter-section {
    padding: 20px 22px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.filter-section:last-of-type {
    border-bottom: none !important;
}

.filter-section h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    margin: 0 0 16px 0 !important;
}

/* Price Range Slider */
.price-range-slider {
    position: relative !important;
    height: 6px !important;
    margin: 12px 0 8px 0 !important;
}

.price-range-track {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: #e5e7eb !important;
    border-radius: 6px !important;
}

.price-range-progress {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #f59e0b, #d97706) !important;
    border-radius: 6px !important;
}

.price-range-thumb {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background: #f59e0b !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.price-range-thumb-min {
    right: 0 !important;
}

.price-range-thumb-max {
    left: 0 !important;
}

.price-range-values {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}

/* Star Rating */
.star-rating-filter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.star-rating-stars {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    direction: ltr !important;
}

.star-rating-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0a1f44 !important;
    margin-right: 8px !important;
}

/* Hotel Type Checkboxes */
.hotel-type-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.hotel-type-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444 !important;
    transition: color 0.2s ease !important;
    position: relative !important;
}

.hotel-type-item:hover {
    color: #0a1f44 !important;
}

.hotel-type-item input[type="checkbox"] {
    display: none !important;
}

.hotel-type-item .checkmark {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.hotel-type-item input[type="checkbox"]:checked+.checkmark {
    background: #0a1f44 !important;
    border-color: #0a1f44 !important;
}

.hotel-type-item input[type="checkbox"]:checked+.checkmark::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    right: 6px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

html[dir="rtl"] .hotel-type-item input[type="checkbox"]:checked+.checkmark::after {
    right: 5px !important;
}

.hotel-type-item input[type="checkbox"]:checked~span:last-child {
    color: #0a1f44 !important;
    font-weight: 700 !important;
}

/* Apply Filters Button */
.apply-filters-btn {
    display: block !important;
    width: calc(100% - 44px) !important;
    margin: 0 22px 22px 22px !important;
    background: #0a1f44 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Tajawal', sans-serif !important;
}

.apply-filters-btn:hover {
    background: #f59e0b !important;
    color: #0a1f44 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3) !important;
}

/* ==========================================================================
   🌟 FEATURES BAR
   ========================================================================== */

.hotels-features-bar {
    padding: 60px 0 !important;
    background: #f8f9fb !important;
    border-top: 1px solid #f0f0f0 !important;
}

.hotels-features-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 25px !important;
    direction: rtl !important;
}

.hotels-feature-item {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.hotels-feature-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: transparent !important;
}

.hotels-feature-icon-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

.hotels-feature-item:hover .hotels-feature-icon-box {
    transform: scale(1.1) !important;
}

.icon-orange {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.icon-blue {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
}

.icon-green {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.icon-purple {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #8b5cf6 !important;
}

.icon-gold {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.hotels-feature-item h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0a1f44 !important;
    margin: 0 0 6px 0 !important;
}

.hotels-feature-item p {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   📱 RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
    .hotels-hero-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .hotels-hero-text h1 {
        font-size: 36px !important;
    }

    .hotels-hero-text p {
        margin: 0 auto !important;
    }

    .hotels-hero-underline {
        margin: 0 auto 22px auto !important;
    }

    .hotels-hero-stats {
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .hotels-search-form {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .hotels-search-field {
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
    }

    .hotels-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hotels-features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .hotels-hero {
        min-height: auto !important;
        padding: 60px 0 80px !important;
    }

    .hotels-hero-text h1 {
        font-size: 28px !important;
    }

    .hotels-hero-text p {
        font-size: 15px !important;
    }

    .hotels-hero-stats {
        grid-template-columns: 1fr !important;
    }

    .hotels-search-form {
        grid-template-columns: 1fr !important;
    }

    .hotels-search-field {
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
    }

    .hotels-search-btn {
        margin: 0 !important;
        justify-content: center !important;
    }

    .hotels-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .hotels-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hotels-section-title {
        font-size: 22px !important;
    }

    .hotels-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    .hotels-features-grid {
        grid-template-columns: 1fr !important;
    }

    .hotel-card-footer {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .hotel-card-btn {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   HIDE OLD ELEMENTS
   ========================================================================== */

.parallax-window,
.parallax-mirror,
#preloader,
.layer,
#collapseMap {
    display: none !important;
}

#filters_col,
.box_style_2,
.premium-ct-grid,
#tools {
    display: none !important;
}

body {
    background: #ffffff !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   FORCE VISIBILITY OF NEW ELEMENTS
   ========================================================================== */

/* Hide old hero and search wrapper - replaced by homepage design */
.hotels-hero,
.hotels-search-wrapper {
    display: none !important;
}

.hp-hero,
.hp-search-card-wrapper,
.hotels-section-header,
.hotels-cards-grid,
.hotel-card-modern,
.hotels-show-more-wrapper,
.hotels-features-bar,
.hotels-filter-card,
.hotels-help-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hp-hero {
    display: flex !important;
}

.hp-search-card {
    display: grid !important;
}

.hotels-cards-grid {
    display: grid !important;
}

.hotels-features-grid {
    display: grid !important;
}

.hotels-hero-stats {
    display: grid !important;
}

.hotels-search-form {
    display: grid !important;
}

.hotels-features-bar {
    display: block !important;
}

.hotels-feature-item {
    display: flex !important;
}

/* ==========================================================================
   BREADCRUMB STYLING (compatible with new design)
   ========================================================================== */

#position {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding: 20px 0 !important;
    margin-bottom: 0 !important;
}

#position ul {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#position ul li {
    color: var(--secondary-text, #64748b) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative !important;
    padding: 0 !important;
}

#position ul li:not(:last-child)::after {
    content: "›" !important;
    margin-left: 12px !important;
    color: var(--secondary-text, #64748b) !important;
    opacity: 0.5 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

#position ul li a {
    color: var(--luxury-gold, #d4a24c) !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
    font-weight: 500 !important;
}

#position ul li a:hover {
    color: var(--luxury-gold-hover, #b88636) !important;
}

#position ul li:last-child {
    color: var(--primary-text, #111827) !important;
    font-weight: 600 !important;
}

/* ============================================
   HOMEPAGE DESIGN - From الرئيسية
   Top bar + Navbar + Hero Slider + Search Card
   ============================================ */

:root {
    --primary-navy: #0f172a;
    --secondary-navy: #1e293b;
    --luxury-gold: #d4a24c;
    --luxury-gold-hover: #b88636;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --primary-text: #111827;
    --secondary-text: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --success: #16a34a;

    --font-ar: "Alexandria", "Cairo", sans-serif;
    --font-en: "Inter", sans-serif;

    --radius-card: 20px;
    --radius-btn: 16px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Bar */
.hp-top-bar {
    background-color: var(--primary-navy);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 300;
    font-family: var(--font-ar);
    position: relative;
    z-index: 1001;
}

.hp-top-bar .hp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hp-top-bar-left,
.hp-top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hp-top-bar i {
    margin-inline-end: 8px;
    color: var(--luxury-gold);
}

.hp-social-icons a {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hp-social-icons a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.hp-lang-switch {
    font-family: var(--font-en);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navbar */
.hp-navbar {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.4s ease;
    background: transparent;
    font-family: var(--font-ar);
}

.hp-navbar.hp-sticky {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.hp-navbar.hp-sticky .hp-nav-links a {
    color: var(--primary-text);
}

.hp-navbar.hp-sticky .hp-nav-links a:hover,
.hp-navbar.hp-sticky .hp-nav-links a.hp-active {
    color: var(--luxury-gold);
}

.hp-navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hp-logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s;
    text-decoration: none;
}

.hp-navbar.hp-sticky .hp-logo {
    color: var(--primary-navy);
}

.hp-logo-icon {
    color: var(--luxury-gold);
}

.hp-nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.hp-nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s;
}

.hp-nav-links a:hover,
.hp-nav-links a.hp-active {
    color: var(--luxury-gold);
}

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    gap: 8px;
    text-decoration: none;
}

.hp-btn-gold {
    background-color: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.3);
}

.hp-btn-gold:hover {
    background-color: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.4);
    color: #fff;
}

.hp-btn-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.hp-btn-outline:hover {
    background-color: #fff;
    color: var(--primary-navy);
}

/* Hero Section Slider */
.hp-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 120px;
    overflow: hidden;
    background-color: var(--primary-navy);
}

.hp-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hp-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1);
}

.hp-hero-slide.hp-active {
    opacity: 1;
    animation: hp-kenburns 8s ease-out forwards;
}

@keyframes hp-kenburns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.hp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.85) 0%,
            rgba(15, 23, 42, 0.4) 50%,
            rgba(15, 23, 42, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
}

.hp-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--font-ar);
}

.hp-hero h1 {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.hp-hero h1 span {
    color: var(--luxury-gold);
}

.hp-hero p {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hp-hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.hp-trust-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.hp-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.hp-trust-item i {
    color: var(--luxury-gold);
    font-size: 20px;
}

/* Hero Slider Indicators */
.hp-hero-slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 12;
}

.hp-hero-slider-dots .hp-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hp-hero-slider-dots .hp-dot.hp-active {
    background: var(--luxury-gold);
    width: 32px;
    border-radius: 6px;
}

/* Hero Content Load Animations */
.hp-fade-in {
    opacity: 0;
    animation: hp-fadeInUp 0.8s ease-out forwards;
}

@keyframes hp-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* Floating Search Card & Tabs */
.hp-search-card-wrapper {
    margin-top: -60px;
    position: relative;
    z-index: 20;
    font-family: var(--font-ar);
}

.hp-search-tabs {
    display: flex;
    gap: 6px;
    margin-right: 12px;
    position: relative;
    z-index: 2;
    justify-content: flex-end;
}

.hp-search-tab {
    background: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: none;
    padding: 12px 24px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-family: var(--font-ar);
}

.hp-search-tab i {
    font-size: 15px;
    color: var(--secondary-text);
    transition: color 0.3s;
}

.hp-search-tab:hover {
    color: var(--primary-navy);
}

.hp-search-tab.hp-active {
    background: var(--card-bg);
    color: var(--primary-navy);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 3px solid var(--luxury-gold);
    z-index: 11;
    position: relative;
    margin-bottom: -1px;
}

.hp-search-tab.hp-active i {
    color: var(--luxury-gold);
}

.hp-search-card {
    background: var(--card-bg);
    border-radius: 0 24px 24px 24px;
    padding: 32px;
    box-shadow: var(--shadow-premium);
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 20px;
    align-items: flex-end;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.hp-search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.hp-search-field label {
    display: block;
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 600;
    text-align: right;
}

.hp-search-input-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 52px;
    position: relative;
    font-family: var(--font-ar);
}

.hp-search-input-box:hover {
    border-color: var(--luxury-gold);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.1);
}

.hp-search-input-box span {
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.hp-search-input-box span.hp-placeholder {
    color: var(--secondary-text);
    font-weight: 400;
}

.hp-search-input-box i {
    color: var(--secondary-text);
    font-size: 16px;
    transition: color 0.3s;
}

.hp-search-input-box:hover i {
    color: var(--luxury-gold);
}

/* Dropdowns */
.hp-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 240px;
    display: none;
    animation: hp-slideDown 0.25s ease-out;
    padding: 8px 0;
}

.hp-search-dropdown.hp-active {
    display: block;
}

@keyframes hp-slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.hp-dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: right;
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
}

.hp-dropdown-item:hover {
    background: rgba(212, 162, 76, 0.08);
    color: var(--luxury-gold);
}

.hp-dropdown-item i {
    color: var(--secondary-text);
    font-size: 15px;
}

.hp-dropdown-item:hover i {
    color: var(--luxury-gold);
}

/* Counter Dropdown */
.hp-counter-dropdown {
    padding: 20px;
    min-width: 280px;
}

.hp-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.hp-counter-label {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 2px;
}

.hp-counter-label .title {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-text);
}

.hp-counter-label .subtitle {
    font-size: 11px;
    color: var(--secondary-text);
}

.hp-counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hp-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--primary-navy);
}

.hp-counter-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
    background: rgba(212, 162, 76, 0.05);
}

.hp-counter-val {
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}

.hp-dropdown-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.hp-btn-apply {
    background: var(--primary-navy);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 13px;
    font-family: var(--font-ar);
}

.hp-btn-apply:hover {
    background: var(--luxury-gold);
}

.hp-search-btn {
    background-color: var(--primary-navy);
    color: #fff;
    border: none;
    height: 52px;
    padding: 0 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    font-family: var(--font-ar);
}

.hp-search-btn:hover {
    background-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.2);
}

/* Responsive */
@media (max-width: 1024px) {
    .hp-nav-links {
        display: none;
    }

    .hp-hero h1 {
        font-size: 48px;
    }

    .hp-search-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-search-btn {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .hp-top-bar-left .hp-social-icons {
        display: none;
    }

    .hp-hero h1 {
        font-size: 36px;
    }

    .hp-hero p {
        font-size: 16px;
    }

    .hp-hero-btns {
        flex-direction: column;
    }

    .hp-trust-row {
        gap: 16px;
    }

    .hp-search-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .hp-search-btn {
        grid-column: span 1;
    }

    .hp-search-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hp-search-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
}

:root {
    --ct-primary: #071A35;
    --ct-primary-hover: #051327;
    --ct-accent: #D4A24C;
    --ct-accent-light: rgba(212, 162, 76, 0.15);
    --ct-text-dark: #111827;
    --ct-text-muted: #64748B;
    --ct-bg-light: #F7F8FA;
    --ct-border: rgba(0, 0, 0, 0.08);
    --ct-shadow-subtle: 0 15px 40px rgba(7, 26, 53, 0.06);
    --ct-shadow-hover: 0 25px 50px rgba(7, 26, 53, 0.12);
    --ct-white: #ffffff;
    --primary-navy: #071A35;
    --secondary-navy: #0F274D;
    --luxury-gold: #D4A24C;
}

.premium-ct-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: var(--ct-white) !important;
    border: 1px solid rgba(7, 26, 53, 0.05) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px -5px rgba(7, 26, 53, 0.05), 0 1px 3px rgba(7, 26, 53, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    text-align: right !important;
    /* Default to RTL */
}

html[dir="ltr"] .premium-ct-card {
    text-align: left !important;
}

.premium-ct-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px -10px rgba(7, 26, 53, 0.12), 0 1px 3px rgba(7, 26, 53, 0.02) !important;
    border-color: var(--luxury-gold) !important;
}

/* Media/Image Area */
.premium-ct-media {
    position: relative !important;
    height: 240px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
}

.premium-ct-media a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.premium-ct-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.premium-ct-card:hover .premium-ct-image {
    transform: scale(1.08) !important;
}

/* Badges */
.premium-ct-badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: var(--secondary-navy) !important;
    color: var(--ct-white) !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 5 !important;
    box-shadow: 0 4px 10px rgba(7, 26, 53, 0.2) !important;
}

.premium-ct-badge-left {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: var(--luxury-gold) !important;
    color: var(--ct-white) !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 5 !important;
    box-shadow: 0 4px 10px rgba(212, 162, 76, 0.2) !important;
}

html[dir="ltr"] .premium-ct-badge {
    right: auto !important;
    left: 16px !important;
}

html[dir="ltr"] .premium-ct-badge-left {
    left: auto !important;
    right: 16px !important;
}

.premium-ct-duration {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    background: rgba(34, 34, 34, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--ct-white) !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    z-index: 5 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    direction: ltr !important;
}

html[dir="rtl"] .premium-ct-duration {
    direction: rtl !important;
}

.premium-ct-duration i {
    color: var(--ct-accent) !important;
    font-size: 14px !important;
}

/* Wishlist Button */
.premium-ct-wishlist-box {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
}

html[dir="ltr"] .premium-ct-wishlist-box {
    left: auto !important;
    right: 14px !important;
}

.premium-ct-wishlist-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.premium-ct-wishlist-btn i {
    font-size: 22px !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

.premium-ct-wishlist-btn:hover {
    background: transparent !important;
    color: #ff3366 !important;
    text-shadow: 0 2px 10px rgba(255, 51, 102, 0.4) !important;
}

.premium-ct-wishlist-btn:hover i {
    transform: scale(1.2) !important;
}

.premium-ct-wishlist-btn.active {
    background: transparent !important;
    color: #ff3366 !important;
    text-shadow: 0 2px 10px rgba(255, 51, 102, 0.4) !important;
}

.premium-ct-wishlist-btn.active i {
    color: #ff3366 !important;
}

/* Card Body */
.premium-ct-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.premium-ct-location {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ct-text-muted) !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.premium-ct-location i {
    color: var(--ct-primary) !important;
    font-size: 14px !important;
}

.premium-ct-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--ct-text-dark) !important;
    margin: 0 0 16px 0 !important;
    height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.premium-ct-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.premium-ct-card:hover .premium-ct-title a {
    color: var(--luxury-gold) !important;
}

/* Card Detail Attributes Grid */
.package-attributes {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin: 16px 0 !important;
    padding: 16px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.attr-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
}

.attr-item i {
    color: var(--luxury-gold) !important;
    font-size: 18px !important;
}

.attr-item span.attr-label {
    font-size: 10px !important;
    color: var(--ct-text-muted) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

.attr-item span.attr-val {
    font-size: 11px !important;
    color: var(--ct-text-dark) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Rating */
.premium-ct-rating {
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--ct-text-dark) !important;
    font-weight: 700 !important;
}

.premium-ct-rating ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: inline-flex !important;
    gap: 2px !important;
}

.premium-ct-rating ul li {
    color: #ffb800 !important;
    font-size: 14px !important;
    padding: 0 !important;
}

.premium-ct-rating ul li i {
    color: #ffb800 !important;
}

.premium-ct-rating ul li.voted i {
    color: #ffb800 !important;
}

.premium-ct-rating .reviews-count {
    font-size: 12px !important;
    color: var(--ct-text-muted) !important;
    font-weight: 400 !important;
}

/* Footer Section */
.premium-ct-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-top: 16px !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.premium-ct-price-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.premium-ct-price-label {
    font-size: 12px !important;
    color: var(--ct-text-muted) !important;
    font-weight: 500 !important;
}

.premium-ct-price-value {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    color: var(--primary-navy) !important;
}

.premium-ct-price-value .amount {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.premium-ct-price-value .currency {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ct-text-muted) !important;
}

/* Button with Details and Gold arrow box */
.premium-ct-btn {
    display: inline-flex !important;
    align-items: stretch !important;
    background: var(--primary-navy) !important;
    color: var(--ct-white) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(7, 26, 53, 0.15) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.premium-ct-btn span.btn-text {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
}

.premium-ct-btn span.btn-icon-box {
    background: var(--luxury-gold) !important;
    color: var(--primary-navy) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    transition: all 0.3s ease !important;
}

.premium-ct-btn:hover {
    background: var(--primary-hover) !important;
    color: var(--ct-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(7, 26, 53, 0.25) !important;
}

.premium-ct-btn:hover span.btn-icon-box {
    background: #c0913f !important;
}

/* Responsive grid modifications for list layouts in citytours */
.premium-ct-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
}

@media (max-width: 991px) {
    .premium-ct-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .premium-ct-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Luxury Slider dots */
.luxury-slider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

.luxury-slider-dots .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.luxury-slider-dots .dot.active {
    background: var(--luxury-gold) !important;
    width: 26px !important;
    border-radius: 5px !important;
}


/* ==========================================================================
   ✨ STEP-BY-STEP PREMIUM SECTIONS SYSTEM
   ========================================================================== */

/* HEADER & NAVBAR UPGRADE */
header:not(.sticky) {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    position: absolute !important;
    width: 100% !important;
    z-index: 1000 !important;
}

header:not(.sticky) #top_line {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#top_line {
    padding: 10px 0 !important;
    font-size: 13px !important;
    color: #fff !important;
    font-weight: 400 !important;
}

#top_links a {
    color: #fff !important;
    opacity: 0.9 !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
}

#top_links a:hover {
    color: var(--luxury-gold) !important;
    opacity: 1 !important;
}

#top_links .btn-warning {
    background-color: var(--luxury-gold) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 10px rgba(212, 162, 76, 0.3) !important;
    margin-left: 10px !important;
}

#top_links .btn-warning:hover {
    background-color: #c0913f !important;
    transform: translateY(-1px) !important;
}

header.sticky {
    background: #ffffff !important;
    box-shadow: 0 4px 25px rgba(7, 26, 53, 0.08) !important;
    position: fixed !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* Menu links dynamic gold underlines and spacing */
.main-menu>ul>li>a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 15px !important;
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: color 0.3s ease !important;
}

header.sticky .main-menu>ul>li>a {
    color: var(--primary-navy) !important;
}

.main-menu>ul>li:hover>a {
    color: var(--luxury-gold) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.main-menu>ul>li.active>a {
    color: var(--luxury-gold) !important;
}

/* Gold active underline */
.main-menu>ul>li.active>a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 15px !important;
    right: 15px !important;
    height: 3px !important;
    background: var(--luxury-gold) !important;
    border-radius: 3px !important;
}

.arabic-lang-btn {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

header.sticky .arabic-lang-btn {
    border-color: rgba(7, 26, 53, 0.15) !important;
    color: var(--primary-navy) !important;
    background: rgba(7, 26, 53, 0.03) !important;
}

/* LUXURY HERO SECTION */
.luxury-hero {
    position: relative !important;
    min-height: 85vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 140px 0 80px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

.luxury-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to bottom, rgba(7, 26, 53, 0.6) 0%, rgba(7, 26, 53, 0.45) 50%, rgba(7, 26, 53, 0.85) 100%) !important;
    z-index: 2 !important;
}

.luxury-hero-content {
    position: relative !important;
    z-index: 5 !important;
    text-align: center !important;
    color: #fff !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.luxury-hero h1 {
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.luxury-hero h1 span.highlight-gold {
    color: var(--luxury-gold) !important;
}

.luxury-hero p.subtitle {
    font-size: 20px !important;
    font-weight: 400 !important;
    opacity: 0.95 !important;
    margin-bottom: 48px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Bottom luxury hero features bar */
.luxury-hero-features {
    display: flex !important;
    justify-content: center !important;
    gap: 48px !important;
    flex-wrap: wrap !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 36px !important;
}

.hero-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: right !important;
}

.hero-feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--luxury-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.hero-feature-text {
    display: flex !important;
    flex-direction: column !important;
}

.hero-feature-text span.title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.hero-feature-text span.subtitle {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

@media (max-width: 767px) {
    .luxury-hero h1 {
        font-size: 38px !important;
    }

    .luxury-hero p.subtitle {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }

    .luxury-hero-features {
        gap: 20px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* PREMIUM BREADCRUMBS POSITION BAR */
#position {
    background: var(--ct-bg-light) !important;
    border-bottom: 1px solid var(--ct-border) !important;
    padding: 16px 0 !important;
}

#position ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#position ul li {
    font-size: 14px !important;
    color: var(--ct-text-muted) !important;
    font-weight: 500 !important;
}

#position ul li a {
    color: var(--ct-text-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#position ul li a:hover {
    color: var(--luxury-gold) !important;
}

#position ul li::after {
    content: "/" !important;
    margin-right: 8px !important;
    color: #ccc !important;
}

#position ul li:last-child::after {
    content: "" !important;
}


/* STICKY HELPLINE SIDEBAR CARD */
.helpline-card {
    background: var(--primary-navy) !important;
    border-radius: 28px !important;
    padding: 32px !important;
    box-shadow: var(--ct-shadow-subtle) !important;
    text-align: center !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: sticky !important;
    top: 100px !important;
}

.helpline-icon-box {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 2px solid var(--luxury-gold) !important;
    color: var(--luxury-gold) !important;
    background: rgba(212, 162, 76, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    margin: 0 auto 24px !important;
    box-shadow: 0 8px 25px rgba(212, 162, 76, 0.15) !important;
}

.helpline-card h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

.helpline-card p.sub {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 24px !important;
}

.helpline-phone {
    display: block !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--luxury-gold) !important;
    text-decoration: none !important;
    margin-bottom: 28px !important;
    transition: all 0.3s ease !important;
}

.helpline-phone:hover {
    color: #fff !important;
    transform: scale(1.02) !important;
}

/* Email container */
.helpline-email-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    text-align: right !important;
}

.helpline-email-box i {
    color: var(--luxury-gold) !important;
    font-size: 20px !important;
}

.helpline-email-text {
    display: flex !important;
    flex-direction: column !important;
}

.helpline-email-text span.label {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500 !important;
}

.helpline-email-text a.link {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.helpline-email-text a.link:hover {
    color: var(--luxury-gold) !important;
}

/* WhatsApp block inner card */
.whatsapp-chat-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #fff !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin-bottom: 28px !important;
    text-align: right !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.whatsapp-chat-box i {
    color: #25d366 !important;
    font-size: 24px !important;
}

.whatsapp-chat-text {
    display: flex !important;
    flex-direction: column !important;
}

.whatsapp-chat-text span.title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--primary-navy) !important;
}

.whatsapp-chat-text span.subtitle {
    font-size: 11px !important;
    color: var(--ct-text-muted) !important;
    font-weight: 400 !important;
}

.whatsapp-chat-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.2) !important;
}

/* Big Helpline button */
.helpline-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--luxury-gold) !important;
    color: var(--primary-navy) !important;
    padding: 14px 24px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.25) !important;
}

.helpline-btn:hover {
    background: #fff !important;
    color: var(--primary-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3) !important;
}


/* HORIZONTAL FEATURES BAR */
.luxury-features-bar {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: var(--ct-shadow-subtle) !important;
    border: 1px solid var(--ct-border) !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.features-bar-flex {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.feature-bar-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: right !important;
}

.feature-bar-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(212, 162, 76, 0.08) !important;
    color: var(--luxury-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    border: 1px solid rgba(212, 162, 76, 0.15) !important;
}

.feature-bar-text {
    display: flex !important;
    flex-direction: column !important;
}

.feature-bar-text span.number-highlight {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--primary-navy) !important;
    line-height: 1.1 !important;
}

.feature-bar-text span.title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--primary-navy) !important;
}

.feature-bar-text span.subtitle {
    font-size: 13px !important;
    color: var(--ct-text-muted) !important;
}

@media (max-width: 991px) {
    .features-bar-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

@media (max-width: 520px) {
    .features-bar-flex {
        grid-template-columns: 1fr !important;
    }
}


/* LUXURY NEWSLETTER SUBSCRIPTION ROW */
.luxury-newsletter-banner {
    background: var(--primary-navy) !important;
    border-radius: 28px !important;
    padding: 40px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 20px !important;
    margin-bottom: 60px !important;
    box-shadow: var(--ct-shadow-hover) !important;
}

.luxury-newsletter-banner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 10% 20%, rgba(212, 162, 76, 0.05) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.newsletter-flex-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    position: relative !important;
    z-index: 5 !important;
}

.newsletter-brand-section {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    max-width: 50% !important;
    text-align: right !important;
}

.newsletter-envelope-img {
    width: 110px !important;
    height: auto !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)) !important;
    animation: floatBounce 4s ease-in-out infinite !important;
}

@keyframes floatBounce {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

.newsletter-brand-text h3 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

.newsletter-brand-text p {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
}

/* Subscription Form with inline elements */
.newsletter-form-container {
    flex-grow: 1 !important;
    max-width: 45% !important;
}

.newsletter-inline-input-group {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    padding: 6px 6px 6px 16px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.newsletter-inline-input-group input.form-control {
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--ct-text-dark) !important;
    padding: 10px 12px !important;
    height: auto !important;
    box-shadow: none !important;
    width: 100% !important;
}

.newsletter-inline-input-group input.form-control:focus {
    outline: none !important;
}

.newsletter-inline-input-group button.btn-subscribe {
    background: var(--luxury-gold) !important;
    color: var(--primary-navy) !important;
    border: none !important;
    border-radius: 40px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(212, 162, 76, 0.25) !important;
    white-space: nowrap !important;
}

.newsletter-inline-input-group button.btn-subscribe:hover {
    background: #fff !important;
    color: var(--primary-navy) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 991px) {
    .newsletter-flex-container {
        flex-direction: column !important;
        text-align: center !important;
    }

    .newsletter-brand-section {
        max-width: 100% !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .newsletter-form-container {
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* PREMIUM ENTERPRISE FOOTER SYSTEM */
.site-footer {
    background: var(--primary-navy) !important;
    color: #fff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
}

.site-footer .footer-main {
    padding: 80px 0 50px !important;
}

.site-footer .footer-brand {
    margin-bottom: 20px !important;
}

.site-footer .footer-brand img.footer-logo {
    height: 50px !important;
    width: auto !important;
}

.site-footer p.footer-about {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.8 !important;
    margin-bottom: 28px !important;
}

.site-footer .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.site-footer span.social-title {
    font-size: 13px !important;
    color: var(--luxury-gold) !important;
    font-weight: 700 !important;
}

.site-footer .footer-social-links {
    display: flex !important;
    gap: 12px !important;
}

.site-footer .footer-social-links a.social-icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.site-footer .footer-social-links a.social-icon-btn:hover {
    background: var(--luxury-gold) !important;
    color: var(--primary-navy) !important;
    border-color: var(--luxury-gold) !important;
    transform: translateY(-3px) !important;
}

.site-footer h4.footer-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
}

.site-footer h4.footer-heading::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--luxury-gold) !important;
}

.site-footer ul.footer-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.site-footer ul.footer-menu li a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.site-footer ul.footer-menu li a:hover {
    color: var(--luxury-gold) !important;
    padding-right: 6px !important;
}

.site-footer .footer-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.site-footer .contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.site-footer .contact-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(212, 162, 76, 0.08) !important;
    color: var(--luxury-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    border: 1px solid rgba(212, 162, 76, 0.15) !important;
}

.site-footer .contact-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: right !important;
}

.site-footer span.contact-title {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500 !important;
}

.site-footer a.contact-link,
.site-footer span.contact-text {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.site-footer a.contact-link:hover {
    color: var(--luxury-gold) !important;
}

/* Footer bottom bar */
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 24px 0 !important;
    background: rgba(7, 26, 53, 0.5) !important;
}

.site-footer .bottom-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.site-footer p.copyright-text {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
}

.site-footer p.copyright-text a {
    color: var(--luxury-gold) !important;
    text-decoration: none !important;
}

.site-footer .created-by-text {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .site-footer .footer-main {
        padding: 50px 0 30px !important;
    }

    .site-footer .footer-col-info,
    .site-footer .footer-col-links,
    .site-footer .footer-col-contact {
        margin-bottom: 35px !important;
    }
}

/* =============================================================
   SECTION 1: SERVICES — Circular Glassmorphism Cards
   ============================================================= */
.sv-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
    position: relative;
}

.sv-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.sv-header {
    text-align: center;
    margin-bottom: 60px;
}

.sv-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.sv-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.sv-header h2 span {
    color: var(--luxury-gold);
}

.sv-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.sv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.sv-card {
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 36px 16px 28px;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff 0%, rgba(248, 249, 250, 0.85) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 162, 76, 0.08);
    box-shadow: 0 4px 20px rgba(7, 26, 53, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.sv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, transparent 40%, rgba(212, 162, 76, 0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.sv-card:hover::before {
    opacity: 1;
}

.sv-card:hover {
    transform: translateY(-14px) scale(1.04);
    box-shadow: 0 28px 60px rgba(212, 162, 76, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);
}

.sv-card-img {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 22px;
    position: relative;
    border: 3px solid rgba(212, 162, 76, 0.12);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.sv-card:hover .sv-card-img {
    border-color: var(--luxury-gold);
    box-shadow: 0 14px 40px rgba(212, 162, 76, 0.28);
    transform: scale(1.1);
}

.sv-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.sv-card:hover h4 {
    color: var(--luxury-gold);
}

.sv-card .sv-desc {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 14px;
    line-height: 1.6;
}

.sv-card .sv-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s;
}

.sv-card:hover .sv-link {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================
   SECTION 2: RELIGIOUS TOURISM — Netflix Immersive Cards
   ============================================================= */
.rt-section {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--bg-color) 0%, #eef1f5 100%);
    position: relative;
}

.rt-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.rt-header {
    text-align: center;
    margin-bottom: 52px;
}

.rt-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.rt-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.rt-header h2 span {
    color: var(--luxury-gold);
}

.rt-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.rt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.rt-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 440px;
    cursor: pointer;
    box-shadow: 0 12px 40px -10px rgba(7, 26, 53, 0.12);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px -10px rgba(7, 26, 53, 0.25);
}

.rt-card-img {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-card:hover .rt-card-img img {
    transform: scale(1.1);
}

.rt-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(7, 26, 53, 0.95) 0%, rgba(7, 26, 53, 0.35) 40%, rgba(7, 26, 53, 0.05) 65%, transparent 80%);
    transition: background 0.5s;
}

.rt-card:hover .rt-card-overlay {
    background: linear-gradient(0deg, rgba(7, 26, 53, 0.98) 0%, rgba(7, 26, 53, 0.45) 45%, rgba(7, 26, 53, 0.1) 70%, transparent 85%);
}

.rt-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    z-index: 3;
    color: #fff;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-card:hover .rt-card-content {
    transform: translateY(-4px);
}

.rt-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--luxury-gold), #c8942c);
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
}

.rt-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.rt-card .rt-meta {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rt-card .rt-meta i {
    color: var(--luxury-gold);
}

.rt-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rt-card-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--luxury-gold);
    text-shadow: 0 2px 8px rgba(212, 162, 76, 0.2);
}

.rt-card-price small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.rt-card-cta {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-card-cta:hover {
    background: var(--luxury-gold);
    border-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.35);
}

.rt-footer {
    text-align: center;
    margin-top: 48px;
}

.rt-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.rt-footer a:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 162, 76, 0.3);
}

/* =============================================================
   SECTION 3: TRIPS — Ticket / Boarding Pass Design
   ============================================================= */
.tr-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
    position: relative;
}

.tr-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.tr-header {
    text-align: center;
    margin-bottom: 52px;
}

.tr-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    background: rgba(212, 162, 76, 0.08);
    border: 1px solid rgba(212, 162, 76, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--luxury-gold);
    margin-bottom: 16px;
}

.tr-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.tr-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.tr-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.tr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- Destination Card --- */
.tr-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 400px;
    cursor: pointer;
    box-shadow: 0 10px 40px -10px rgba(7, 26, 53, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tr-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px -15px rgba(7, 26, 53, 0.25);
}

.tr-card-bg {
    position: absolute;
    inset: 0;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.tr-card:hover .tr-card-bg {
    transform: scale(1.1);
}

.tr-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 26, 53, 0.9) 0%, rgba(7, 26, 53, 0.4) 40%, rgba(7, 26, 53, 0.1) 100%);
    transition: opacity 0.4s ease;
}

.tr-card:hover .tr-card-overlay {
    background: linear-gradient(0deg, rgba(7, 26, 53, 0.95) 0%, rgba(7, 26, 53, 0.5) 40%, rgba(7, 26, 53, 0.15) 100%);
}

.tr-card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
    transform: translateX(-100%) rotate(0deg);
    transition: none;
    pointer-events: none;
}

.tr-card:hover .tr-card-shine {
    animation: cardShine 1.2s ease forwards;
}

@keyframes cardShine {
    to {
        transform: translateX(100%) rotate(0deg);
    }
}

.tr-card-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.tr-card-badge--gold {
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.4);
}

.tr-card-badge--new {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.tr-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tr-card:hover .tr-card-content {
    transform: translateY(0);
}

.tr-card-dest {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.tr-card-dest i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.tr-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tr-card-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.tr-card-meta span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
}

.tr-card-meta i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.tr-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.tr-card:hover .tr-card-footer {
    opacity: 1;
    transform: translateY(0);
}

.tr-card-price-box {
    display: flex;
    flex-direction: column;
}

.tr-card-from {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.tr-card-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--luxury-gold);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(212, 162, 76, 0.3);
}

.tr-card-price small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.tr-card-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.35);
}

.tr-card-btn:hover {
    background: #c98a2e;
    transform: translateX(-4px);
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.5);
}

.tr-card-float {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.15s;
    z-index: 2;
}

.tr-card:hover .tr-card-float {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.tr-footer {
    text-align: center;
    margin-top: 48px;
}

.tr-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.tr-footer a:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 162, 76, 0.3);
}

/* =============================================================
   SECTION 4: FLIGHTS — Boarding Pass Ticket Design
   ============================================================= */
.fl-section {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--bg-color) 0%, #e8ecf1 100%);
    position: relative;
}

.fl-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.fl-header {
    text-align: center;
    margin-bottom: 52px;
}

.fl-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.fl-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.fl-header h2 span {
    color: var(--luxury-gold);
}

.fl-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.fl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.fl-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 280px;
    box-shadow: 0 8px 30px -10px rgba(7, 26, 53, 0.12);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.fl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(7, 26, 53, 0.2);
}

.fl-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fl-card:hover .fl-card-bg {
    transform: scale(1.06);
}

.fl-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--luxury-gold);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.fl-card-glass {
    position: absolute;
    top: 10px;
    right: 9px;
    border-radius: 17px;
    bottom: 7px;
    width: 52%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.fl-card-glass h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0;
    line-height: 1.4;
}

.fl-card-location {
    font-size: 13px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.fl-card-location i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.fl-card-stars {
    display: flex;
    gap: 2px;
}

.fl-card-stars i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.fl-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fl-card-info span {
    font-size: 12px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.fl-card-info .fa-plane {
    color: var(--luxury-gold);
    font-size: 10px;
}

.fl-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}

.fl-price-label {
    font-size: 11px;
    color: var(--secondary-text);
}

.fl-price-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--luxury-gold);
}

.fl-price-val small {
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text);
}

.fl-card-btn {
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.25);
}

.fl-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 162, 76, 0.4);
}

.fl-footer {
    text-align: center;
    margin-top: 40px;
}

.fl-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--luxury-gold);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 12px 32px;
    border: 2px solid var(--luxury-gold);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.fl-footer a:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-2px);
}

/* =============================================================
   SECTION 5: HOTELS — Luxury Glass Panel Showcase
   ============================================================= */
.hl-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, #f5f6f8 100%);
    position: relative;
}

.hl-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.hl-header {
    text-align: center;
    margin-bottom: 52px;
}

.hl-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.hl-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.hl-header h2 span {
    color: var(--luxury-gold);
}

.hl-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.hl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.hl-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 420px;
    cursor: pointer;
    box-shadow: 0 12px 40px -10px rgba(7, 26, 53, 0.12);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hl-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px -10px rgba(7, 26, 53, 0.25);
}

.hl-card-img {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.hl-card:hover .hl-card-img img {
    transform: scale(1.1);
}

.hl-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(7, 26, 53, 0.88) 0%, rgba(7, 26, 53, 0.25) 45%, transparent 80%);
    transition: background 0.5s;
}

.hl-card:hover .hl-card-overlay {
    background: linear-gradient(to top, rgba(7, 26, 53, 0.92) 0%, rgba(7, 26, 53, 0.35) 50%, transparent 85%);
}

/* Floating glass panel */
.hl-card-glass {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 22px;
    color: #fff;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hl-card:hover .hl-card-glass {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.hl-card-stars {
    color: var(--luxury-gold);
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(212, 162, 76, 0.3);
}

.hl-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hl-card-location {
    font-size: 13px;
    opacity: 0.75;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hl-card-location i {
    color: var(--luxury-gold);
}

.hl-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hl-card-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--luxury-gold);
    text-shadow: 0 2px 8px rgba(212, 162, 76, 0.2);
}

.hl-card-price small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.hl-book-btn {
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--luxury-gold), #c8942c);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.25);
}

.hl-book-btn:hover {
    background: var(--luxury-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.4);
}

.hl-discount {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.3);
    letter-spacing: 0.3px;
}

.hl-footer {
    text-align: center;
    margin-top: 48px;
}

.hl-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.hl-footer a:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 162, 76, 0.3);
}

/* =============================================================
   SECTION 6: CRUISES — Polaroid Rotated Cards
   ============================================================= */
.cr-section {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--bg-color) 0%, #e8ecf1 100%);
    position: relative;
}

.cr-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.cr-header {
    text-align: center;
    margin-bottom: 52px;
}

.cr-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.cr-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.cr-header h2 span {
    color: var(--luxury-gold);
}

.cr-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.cr-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.cr-card {
    text-align: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.cr-card:nth-child(odd) {
    transform: rotate(-2deg);
}

.cr-card:nth-child(even) {
    transform: rotate(2deg);
}

.cr-card:hover {
    transform: rotate(0deg) translateY(-14px) scale(1.05);
    z-index: 5;
}

.cr-card-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 12px 30px -5px rgba(7, 26, 53, 0.1), 0 4px 12px rgba(7, 26, 53, 0.05);
    border: 5px solid #fff;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.cr-card:hover .cr-card-img {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(212, 162, 76, 0.3);
}

.cr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.cr-card:hover .cr-card-img img {
    transform: scale(1.08);
}

/* Pin effect */
.cr-card-img::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--luxury-gold), #c8942c);
    box-shadow: 0 3px 10px rgba(212, 162, 76, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    z-index: 5;
}

.cr-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 4px;
    transition: color 0.3s;
}

.cr-card:hover h4 {
    color: var(--luxury-gold);
}

.cr-card p {
    font-size: 12px;
    color: var(--secondary-text);
}

/* =============================================================
   SECTION 7: CARS — Dark Cinematic Automotive
   ============================================================= */
.ca-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, #f5f6f8 100%);
    position: relative;
}

.ca-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.ca-header {
    text-align: center;
    margin-bottom: 52px;
}

.ca-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.ca-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.ca-header h2 span {
    color: var(--luxury-gold);
}

.ca-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.ca-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ca-card {
    background: linear-gradient(160deg, #0d2240 0%, #060e1a 100%);
    border-radius: 24px;
    padding: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(212, 162, 76, 0.08);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}

.ca-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(212, 162, 76, 0.04) 0%, transparent 50%);
    transition: all 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.ca-card:hover .ca-card-glow {
    background: radial-gradient(circle at 50% 50%, rgba(212, 162, 76, 0.12) 0%, transparent 50%);
}

.ca-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5), 0 0 50px rgba(212, 162, 76, 0.1);
    border-color: rgba(212, 162, 76, 0.3);
}

.ca-card>* {
    position: relative;
    z-index: 1;
}

.ca-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 16px;
    background: rgba(212, 162, 76, 0.15);
    color: var(--luxury-gold);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(212, 162, 76, 0.2);
    backdrop-filter: blur(8px);
    z-index: 3;
}

.ca-card-badge--mid {
    background: rgba(52, 152, 219, 0.15);
    color: #5dade2;
    border-color: rgba(52, 152, 219, 0.2);
}

.ca-card-badge--lux {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.2);
}

.ca-card-badge--sport {
    background: rgba(231, 76, 60, 0.15);
    color: #ec7063;
    border-color: rgba(231, 76, 60, 0.2);
}

.ca-card-image {
    height: 180px;
    width: 100%;
    /* padding: 20px 20px 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ca-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

.ca-card:hover .ca-card-image img {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4));
}

.ca-card-body {
    padding: 8px 24px 16px;
    text-align: center;
}

.ca-card-name {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ca-card-type {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 14px;
}

.ca-card-specs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ca-spec {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.ca-card:hover .ca-spec {
    background: rgba(255, 255, 255, 0.08);
}

.ca-spec i {
    color: var(--luxury-gold);
    font-size: 10px;
}

.ca-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

.ca-price-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ca-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--luxury-gold);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(212, 162, 76, 0.25);
}

.ca-price-unit {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.ca-book-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--luxury-gold), #c8942c);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.25);
}

.ca-book-btn:hover {
    background: linear-gradient(135deg, #c8942c, #a67a1e);
    transform: translateX(-4px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.4);
}

.ca-book-btn i {
    transition: transform 0.3s ease;
}

.ca-book-btn:hover i {
    transform: translateX(-4px);
}

.ca-footer {
    text-align: center;
    margin-top: 48px;
}

.ca-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.ca-footer a:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 162, 76, 0.3);
}

/* =============================================================
   SECTION 8: OFFERS — Dark Premium Glow Cards
   ============================================================= */
.of-section {
    padding: 100px 0;
    background: linear-gradient(160deg, #021526 0%, #043854 40%, #032e4a 70%, #021526 100%);
    position: relative;
    overflow: hidden;
}

.of-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 70% 30%, rgba(212, 162, 76, 0.04) 0%, transparent 50%);
}

.of-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 70%, rgba(212, 162, 76, 0.03) 0%, transparent 50%);
}

.of-header {
    text-align: center;
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
}

.of-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.of-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.of-header h2 span {
    color: var(--luxury-gold);
}

.of-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 20px;
}

.of-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
}

.of-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(212, 162, 76, 0.08);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.of-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.25), transparent 50%, rgba(212, 162, 76, 0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.of-card:hover::before {
    opacity: 1;
}

.of-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35), 0 0 80px rgba(212, 162, 76, 0.08);
    border-color: transparent;
}

.of-card-img {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.of-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.of-card:hover .of-card-img img {
    transform: scale(1.08);
}

.of-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--luxury-gold), #c8942c);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(212, 162, 76, 0.35);
    letter-spacing: 0.3px;
}

.of-card-body {
    padding: 26px;
    color: #fff;
}

.of-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.of-card:hover h3 {
    color: var(--luxury-gold);
}

.of-card .of-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.of-card .of-meta i {
    color: var(--luxury-gold);
}

.of-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.of-card-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--luxury-gold);
    text-shadow: 0 2px 12px rgba(212, 162, 76, 0.2);
}

.of-card-price small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
}

.of-card-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(212, 162, 76, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(212, 162, 76, 0.12);
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.of-card-link:hover {
    background: var(--luxury-gold);
    color: #fff;
    border-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.3);
}

/* =============================================================
   SECTION 9: BLOG — Editorial Medium Style
   ============================================================= */
.bg-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
    position: relative;
}

.bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.2), transparent);
}

.bg-header {
    text-align: center;
    margin-bottom: 52px;
}

.bg-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.bg-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), rgba(212, 162, 76, 0.3));
    border-radius: 2px;
}

.bg-header h2 span {
    color: var(--luxury-gold);
}

.bg-header p {
    font-size: 16px;
    color: var(--secondary-text);
    margin-top: 20px;
}

.bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bg-card {
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(7, 26, 53, 0.04);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    box-shadow: 0 8px 30px -10px rgba(7, 26, 53, 0.06);
}

.bg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px -10px rgba(7, 26, 53, 0.14);
    border-color: rgba(212, 162, 76, 0.25);
}

.bg-card-img {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.bg-card-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
}

.bg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.bg-card:hover .bg-card-img img {
    transform: scale(1.08);
}

.bg-card-body {
    padding: 26px;
}

.bg-card-date {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bg-card-date i {
    color: var(--luxury-gold);
    font-size: 12px;
}

.bg-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1.5;
    margin-bottom: 12px;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-card:hover h3 {
    color: var(--luxury-gold);
}

.bg-card p {
    font-size: 14px;
    color: var(--secondary-text);
    line-height: 1.8;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-card-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(212, 162, 76, 0.06);
    border-radius: 10px;
    transition: all 0.3s;
}

.bg-card-link:hover {
    gap: 10px;
    background: rgba(212, 162, 76, 0.12);
}

/* =============================================================
   RESPONSIVE OVERRIDES
   ============================================================= */
@media (max-width: 1024px) {
    .sv-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ca-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sv-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .rt-grid,
    .fl-grid,
    .hl-grid,
    .of-grid,
    .bg-grid {
        grid-template-columns: 1fr;
    }

    .ca-grid {
        grid-template-columns: 1fr;
    }

    .cr-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   PROFESSIONAL CARD DESIGN OVERRIDES
   Enhanced visual quality across all cards
   ============================================= */

/* --- Section Headers --- */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--luxury-gold);
    border-radius: 2px;
}

.section-header h2 span {
    color: var(--luxury-gold);
}

.section-header p {
    font-size: 16px;
    color: var(--secondary-text);
    max-width: 550px;
    margin: 16px auto 0;
    line-height: 1.7;
}

/* --- Services Grid (خدماتنا) --- */
.services {
    background: #fff;
    padding: 80px 0;
    position: relative;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--luxury-gold), transparent);
    opacity: 0.15;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

/* Service Cards */
.service-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    padding: 36px 20px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(212, 162, 76, 0.06) 0%, transparent 100%);
    transition: height 0.4s ease;
    z-index: 0;
}

.service-card:hover::before {
    height: 100%;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    border-color: rgba(212, 162, 76, 0.15);
}

.service-card>* {
    position: relative;
    z-index: 1;
}

.service-card img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin: 0 auto 18px;
    object-fit: cover;
    border: 3px solid rgba(212, 162, 76, 0.1);
    transition: all 0.4s ease;
    display: block;
}

.service-card:hover img {
    border-color: var(--luxury-gold);
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.2);
}

.service-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 6px;
}

.service-card p {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 14px;
    line-height: 1.5;
}

.service-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
    opacity: 0.8;
}

.service-card:hover .service-link {
    opacity: 1;
    gap: 8px;
}

.service-link i {
    font-size: 10px;
}

/* --- Category Section Base --- */
.category-section {
    padding: 80px 0;
    position: relative;
}

.category-section.alt-bg {
    background: #fff;
}

.category-header {
    text-align: center;
    margin-bottom: 48px;
}

.category-header h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 10px;
}

.category-header h2 span {
    color: var(--luxury-gold);
}

.category-header p {
    font-size: 15px;
    color: var(--secondary-text);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.category-footer {
    text-align: center;
    margin-top: 40px;
}

.category-footer .btn-outline-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border: 2px solid var(--luxury-gold);
    color: var(--luxury-gold);
    background: transparent;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-footer .btn-outline-gold:hover {
    background: var(--luxury-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 162, 76, 0.3);
}

/* --- Card Arch (سياحة دينية) --- */
.card-arch {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.card-arch::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--luxury-gold);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.card-arch:hover::after {
    transform: scaleX(1);
}

.card-arch:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.card-arch-top {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.card-arch-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-arch:hover .card-arch-top img {
    transform: scale(1.08);
}

.card-arch-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}

.card-arch-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.3);
}

.card-arch-body {
    padding: 20px;
}

.card-arch-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    transition: color 0.3s;
}

.card-arch:hover .card-arch-body h3 {
    color: var(--luxury-gold);
}

.card-arch-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 14px;
}

.card-arch-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-arch-link:hover {
    gap: 10px;
}

/* --- Card Compass (الرحلات) --- */
.card-compass {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-compass:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.card-compass-media {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-compass-media::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 162, 76, 0.08) 0%, transparent 50%);
}

.card-compass-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.card-compass:hover .card-compass-circle {
    border-color: var(--luxury-gold);
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(212, 162, 76, 0.2);
}

.card-compass-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-compass-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.3);
    white-space: nowrap;
}

.card-compass-body {
    padding: 28px 20px 20px;
    text-align: center;
}

.card-compass-body h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.card-compass:hover .card-compass-body h3 {
    color: var(--luxury-gold);
}

.card-compass-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 14px;
}

.card-compass-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-compass-link:hover {
    gap: 10px;
}

/* --- Card Diagonal (حجز الطيران) --- */
.card-diagonal {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-diagonal:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.card-diagonal-img {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.card-diagonal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-diagonal:hover .card-diagonal-img img {
    transform: scale(1.08);
}

.card-diagonal-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

.card-diagonal-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 14px;
    background: var(--primary-navy);
    color: var(--luxury-gold);
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    z-index: 2;
}

.card-diagonal-body {
    padding: 18px 20px 20px;
}

.card-diagonal-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.card-diagonal:hover .card-diagonal-body h3 {
    color: var(--luxury-gold);
}

.card-diagonal-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 14px;
}

.card-diagonal-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-diagonal-link:hover {
    gap: 10px;
}

/* --- Card Ribbon (الفنادق) --- */
.card-ribbon {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-ribbon:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.card-ribbon-media {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.card-ribbon-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-ribbon:hover .card-ribbon-media img {
    transform: scale(1.08);
}

.card-ribbon-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}

.card-ribbon-strip {
    position: absolute;
    top: 16px;
    right: -30px;
    width: 120px;
    height: 28px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(40deg);
    z-index: 3;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.3);
    letter-spacing: 0.5px;
}

.card-ribbon-body {
    padding: 20px;
}

.card-ribbon-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.card-ribbon:hover .card-ribbon-body h3 {
    color: var(--luxury-gold);
}

.card-ribbon-body h3 span {
    font-weight: 400;
    font-size: 14px;
    color: var(--luxury-gold);
    margin-right: 6px;
}

.card-ribbon-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 14px;
}

.card-ribbon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.card-ribbon-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
}

.card-ribbon-price small {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
    margin-right: 4px;
}

.card-ribbon-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-ribbon-link:hover {
    gap: 10px;
}

/* --- Card Wave (المراكب السياحية) --- */
.card-wave {
    background: linear-gradient(160deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.card-wave:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(4, 56, 84, 0.3);
}

.card-wave-img {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.card-wave-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    opacity: 0.85;
}

.card-wave:hover .card-wave-img img {
    transform: scale(1.08);
}

.card-wave-img::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='%23043854'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

.card-wave-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-wave-body {
    padding: 14px 20px 8px;
    position: relative;
    z-index: 2;
}

.card-wave-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.card-wave-body h3 span {
    color: var(--luxury-gold);
}

.card-wave-body p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 14px;
}

.card-wave-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 18px;
    position: relative;
    z-index: 2;
}

.card-wave-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--luxury-gold);
}

.card-wave-price small {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}

.card-wave-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-wave-link:hover {
    gap: 10px;
}

.card-wave-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--luxury-gold);
    opacity: 0.2;
    animation: floatParticle 4s ease-in-out infinite;
    z-index: 1;
}

.card-wave-particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.card-wave-particle:nth-child(2) {
    top: 40%;
    right: 15%;
    animation-delay: 1s;
    width: 6px;
    height: 6px;
}

.card-wave-particle:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.card-wave-particle:nth-child(4) {
    top: 60%;
    right: 25%;
    animation-delay: 0.5s;
    width: 3px;
    height: 3px;
}

/* --- Card Speed (السيارات) --- */
.card-speed {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-speed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--luxury-gold), var(--primary-navy), var(--luxury-gold));
    background-size: 200% 100%;
    animation: speedGlow 3s linear infinite;
    z-index: 5;
}

@keyframes speedGlow {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.card-speed:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.card-speed-img {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.card-speed-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-speed:hover .card-speed-img img {
    transform: scale(1.06);
}

.card-speed-flag {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 4px 14px 4px 10px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 3;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.card-speed-body {
    padding: 16px 20px 20px;
}

.card-speed-body h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 4px;
    transition: color 0.3s;
}

.card-speed:hover .card-speed-body h3 {
    color: var(--luxury-gold);
}

.card-speed-body p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.card-speed-specs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.speed-spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--secondary-text);
    background: var(--bg-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.speed-spec i {
    color: var(--luxury-gold);
    font-size: 10px;
}

.card-speed-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.card-speed-link:hover {
    color: var(--luxury-gold);
    gap: 10px;
}

.card-speed-link i {
    transition: transform 0.3s;
}

.card-speed-link:hover i {
    transform: translateX(-3px);
}

/* --- Packages Cards (الباقات) --- */
.packages {
    padding: 80px 0;
    background: var(--bg-color);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.package-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.package-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    z-index: 5;
}

.badge-gold {
    background: var(--luxury-gold);
    color: #fff;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.3);
}

.badge-dark {
    background: var(--primary-navy);
    color: #fff;
}

.package-img-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.package-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.package-card:hover .package-img {
    transform: scale(1.06);
}

.card-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
}

.wave-bg-path {
    fill: #fff;
}

.wave-stroke-path {
    stroke: var(--luxury-gold);
}

.package-content {
    padding: 20px;
}

.package-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.package-card:hover .package-title {
    color: var(--luxury-gold);
}

.package-desc {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.package-meta-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
}

.package-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.meta-item {
    font-size: 12px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.package-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-label {
    display: block;
    font-size: 11px;
    color: var(--secondary-text);
    font-weight: 600;
}

.price-amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
}

.price-currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-text);
}

.package-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--luxury-gold);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
}

.cta-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212, 162, 76, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.package-cta:hover .cta-circle {
    background: var(--luxury-gold);
    color: #fff;
}

.package-cta:hover {
    gap: 12px;
}

.package-card.featured {
    border: 2px solid var(--luxury-gold);
    transform: scale(1.03);
}

.package-card.featured:hover {
    transform: scale(1.03) translateY(-8px);
}

.packages-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

/* --- Blog Cards (المقالات) --- */
.blog {
    padding: 80px 0;
    background: #fff;
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.blog-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.06);
}

.blog-content {
    padding: 20px;
}

.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.blog-meta span {
    font-size: 12px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.blog-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s;
}

.blog-card:hover .blog-title {
    color: var(--luxury-gold);
}

.blog-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--luxury-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.blog-link:hover {
    gap: 10px;
}

/* =============================================================
   BLOG PAGE
   ============================================================= */
.blog-hero {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, var(--primary-navy), #0a1f3d);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(212, 162, 76, 0.08) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.blog-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    position: relative;
}

.blog-hero h1 span {
    color: var(--luxury-gold);
}

.blog-hero p {
    font-size: 16px;
    opacity: 0.8;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.blog-main {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.blog-post-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    border: 1px solid rgba(7, 26, 53, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: grid;
    grid-template-columns: 320px 1fr;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -10px rgba(7, 26, 53, 0.1);
    border-color: rgba(212, 162, 76, 0.15);
}

.blog-post-img {
    height: 260px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.blog-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.blog-post-card:hover .blog-post-img img {
    transform: scale(1.06);
}

.blog-post-category {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    background: var(--luxury-gold);
    color: #fff;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.blog-post-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.blog-post-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 12px;
}

.blog-post-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-post-meta i {
    color: var(--luxury-gold);
}

.blog-post-body h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 10px;
    line-height: 1.4;
}

.blog-post-body h3 a {
    color: var(--primary-navy);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-post-body h3 a:hover {
    color: var(--luxury-gold);
}

.blog-post-body p {
    font-size: 14px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin: 0 0 auto;
}

.blog-post-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--luxury-gold);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
    width: fit-content;
}

.blog-post-link:hover {
    gap: 12px;
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.blog-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(7, 26, 53, 0.04);
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
}

.blog-sidebar-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(212, 162, 76, 0.15);
}

.blog-sidebar-card h4 span {
    color: var(--luxury-gold);
}

.sidebar-search {
    display: flex;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-search input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
}

.sidebar-search button {
    padding: 12px 18px;
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.3s;
}

.sidebar-search button:hover {
    background: #c98a2e;
}

.sidebar-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-cats li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--primary-navy);
    text-decoration: none;
    transition: all 0.3s;
    background: rgba(7, 26, 53, 0.02);
}

.sidebar-cats li a:hover {
    background: rgba(212, 162, 76, 0.08);
    color: var(--luxury-gold);
}

.sidebar-cats li a span {
    background: rgba(212, 162, 76, 0.1);
    color: var(--luxury-gold);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-post {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sidebar-post-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-post h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 4px;
}

.sidebar-post h5 a {
    color: var(--primary-navy);
    text-decoration: none;
}

.sidebar-post h5 a:hover {
    color: var(--luxury-gold);
}

.sidebar-post span {
    font-size: 11px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-post span i {
    color: var(--luxury-gold);
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-tag {
    padding: 6px 14px;
    background: rgba(212, 162, 76, 0.06);
    color: var(--luxury-gold);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(212, 162, 76, 0.1);
    transition: all 0.3s;
}

.sidebar-tag:hover {
    background: var(--luxury-gold);
    color: #fff;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.blog-pagination a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-navy);
    text-decoration: none;
    border: 1px solid rgba(7, 26, 53, 0.08);
    transition: all 0.3s;
}

.blog-pagination a:hover,
.blog-pagination a.active {
    background: var(--luxury-gold);
    color: #fff;
    border-color: var(--luxury-gold);
}

/* --- Final CTA --- */
.final-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 162, 76, 0.06) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.final-cta h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.final-cta p {
    font-size: 16px;
    opacity: 0.85;
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    line-height: 1.7;
}

.final-cta .btn {
    position: relative;
    z-index: 1;
}

/* --- Contact Section (Homepage) --- */
.contact-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
    position: relative;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    background: rgba(212, 162, 76, 0.08);
    border: 1px solid rgba(212, 162, 76, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--luxury-gold);
    margin-bottom: 16px;
}

.contact-info h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 14px;
}

.contact-info h2 span {
    color: var(--luxury-gold);
}

.contact-info>p {
    font-size: 15px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 32px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(7, 26, 53, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateX(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-color: rgba(212, 162, 76, 0.15);
}

.contact-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.1), rgba(212, 162, 76, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luxury-gold);
    font-size: 16px;
    flex-shrink: 0;
}

.contact-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--luxury-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-navy);
}

/* --- Contact Form (Homepage) --- */
.contact-form-container {
    background: #fff;
    padding: 36px;
    border-radius: 20px;
    box-shadow: 0 8px 40px -10px rgba(7, 26, 53, 0.08);
    border: 1px solid rgba(7, 26, 53, 0.04);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
}

.form-group label span {
    color: #e74c3c;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 13px 16px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--luxury-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.08);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23071a35'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 20px;
    padding-left: 44px;
}

.contact-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
    font-family: var(--font);
}

.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212, 162, 76, 0.45);
}

.contact-submit-btn i {
    transition: transform 0.3s ease;
}

.contact-submit-btn:hover i {
    transform: translateX(-6px);
}

.form-note {
    font-size: 12px;
    color: var(--secondary-text);
    text-align: center;
    margin: 0;
}

.form-note a {
    color: var(--luxury-gold);
    font-weight: 600;
    text-decoration: none;
}

.form-note a:hover {
    text-decoration: underline;
}

/* --- Contact Us Page --- */
.contact-hero-section {
    padding: 0;
    background: none;
}

.contact-hero-section .hero-flight {
    min-height: 420px;
    display: flex;
    align-items: center;
}

.contact-hero-section .hero-content {
    padding-top: 20px;
}

.contact-main {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: start;
}

.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(7, 26, 53, 0.04);
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.contact-sidebar-card:hover {
    transform: translateX(-4px);
    box-shadow: 0 8px 30px -8px rgba(7, 26, 53, 0.1);
    border-color: rgba(212, 162, 76, 0.2);
}

.contact-sidebar-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.1), rgba(212, 162, 76, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luxury-gold);
    font-size: 20px;
    flex-shrink: 0;
}

.contact-sidebar-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 3px;
}

.contact-sidebar-card p {
    font-size: 13px;
    color: var(--secondary-text);
    margin: 0;
}

.contact-sidebar-card a {
    color: var(--luxury-gold);
    font-weight: 600;
    text-decoration: none;
}

.contact-sidebar-card a:hover {
    text-decoration: underline;
}

.contact-form-box {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 40px -10px rgba(7, 26, 53, 0.06);
    border: 1px solid rgba(7, 26, 53, 0.04);
}

.contact-form-box h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 8px;
}

.contact-form-box h3 span {
    color: var(--luxury-gold);
}

.contact-form-box>p {
    font-size: 14px;
    color: var(--secondary-text);
    margin: 0 0 24px;
}

.contact-form-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.contact-form-page .form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
}

.contact-form-page .form-group label span {
    color: #e74c3c;
}

.contact-form-page input,
.contact-form-page select,
.contact-form-page textarea {
    padding: 14px 18px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
    transition: all 0.3s ease;
    outline: none;
}

.contact-form-page input:focus,
.contact-form-page select:focus,
.contact-form-page textarea:focus {
    border-color: var(--luxury-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.08);
}

.contact-form-page textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-page select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23071a35'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 20px;
    padding-left: 44px;
}

.contact-form-page .submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s ease;
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
    width: 100%;
}

.contact-form-page .submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212, 162, 76, 0.45);
}

.contact-form-page .submit-btn i {
    transition: transform 0.3s;
}

.contact-form-page .submit-btn:hover i {
    transform: translateX(-6px);
}

.contact-map {
    margin-top: 80px;
}

.contact-map .contact-map-section {
    padding: 0;
}

.contact-map h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 24px;
}

.contact-map h2 span {
    color: var(--luxury-gold);
}

.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px -10px rgba(7, 26, 53, 0.1);
    border: 1px solid rgba(7, 26, 53, 0.04);
}

/* Range slider RTL fix */
.irs-with-grid {
    direction: ltr !important;
}

/* Mobile menu visibility */
@media only screen and (max-width: 991px) {
    .mobile_view {
        display: block;
    }
}

@media only screen and (min-width: 992px) {
    .mobile_view {
        display: none !important;
    }
}

/* Logo override */
#logo_home h1 a,
header.sticky #logo_home h1 a,
header#plain #logo_home h1 a,
header#colored #logo_home h1 a {
    width: 160px;
    height: 34px;
    display: block;
    background-image: url("https://alnokhbatours.com/website/images/logo/logo2024-09-21-08-52-53.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 160px 34px;
    text-indent: -9999px;
}

/* --- Footer --- */
.footer {
    background: var(--primary-navy);
    padding: 80px 0 40px;
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    font-size: 14px;
    opacity: 0.7;
    line-height: 1.7;
    margin-bottom: 20px;
}

.footer h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--luxury-gold);
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    font-size: 14px;
    opacity: 0.7;
    transition: all 0.3s;
}

.footer-links li a:hover {
    opacity: 1;
    color: var(--luxury-gold);
}

.newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.newsletter-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-family: var(--font);
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.newsletter-btn {
    padding: 12px 20px;
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.3s;
}

.newsletter-btn:hover {
    background: var(--luxury-gold-hover);
}

.footer-bottom {
    padding: 24px 0 0;
    text-align: center;
    font-size: 13px;
    opacity: 0.5;
}

/* =============================================================
   HERO-TRIP — Map / Globe Adventure
   ============================================================= */
.hero-trip {
    position: relative;
    min-height: 48vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0a1628 0%, #0c2340 30%, #0e3a5c 60%, #0a1628 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-trip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(212, 162, 76, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(212, 162, 76, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(10, 22, 40, 0.75) 0%, rgba(12, 35, 64, 0.5) 50%, rgba(10, 22, 40, 0.8) 100%);
    z-index: 1;
}

.hero-trip::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--bg-color);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

.hero-trip-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 280px;
    color: rgba(212, 162, 76, 0.04);
    pointer-events: none;
    animation: globeSpin 30s linear infinite;
}

@keyframes globeSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.hero-trip-pin {
    position: absolute;
    font-size: 20px;
    color: var(--luxury-gold);
    opacity: 0.2;
    animation: pinPulse 3s ease-in-out infinite;
    pointer-events: none;
}

.hero-trip-pin--1 {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.hero-trip-pin--2 {
    top: 35%;
    right: 20%;
    animation-delay: 1s;
    font-size: 16px;
}

.hero-trip-pin--3 {
    bottom: 30%;
    left: 25%;
    animation-delay: 2s;
    font-size: 14px;
}

@keyframes pinPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.35;
    }
}

.hero-trip-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.15), transparent);
    pointer-events: none;
}

.hero-trip-line--1 {
    top: 30%;
    left: 10%;
    width: 80%;
    transform: rotate(-3deg);
}

.hero-trip-line--2 {
    top: 60%;
    left: 15%;
    width: 70%;
    transform: rotate(2deg);
}

.hero-trip-plane {
    position: absolute;
    top: 25%;
    right: 15%;
    font-size: 28px;
    color: rgba(212, 162, 76, 0.2);
    animation: planeFly 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes planeFly {

    0%,
    100% {
        transform: translate(0, 0) rotate(-20deg);
        opacity: 0.2;
    }

    50% {
        transform: translate(-30px, -20px) rotate(-15deg);
        opacity: 0.35;
    }
}

.hero-trip-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--luxury-gold);
    opacity: 0.1;
    pointer-events: none;
    animation: dotPulse 4s ease-in-out infinite;
}

.hero-trip-dot--1 {
    top: 15%;
    left: 30%;
    animation-delay: 0s;
}

.hero-trip-dot--2 {
    top: 40%;
    left: 60%;
    animation-delay: 0.8s;
    width: 4px;
    height: 4px;
}

.hero-trip-dot--3 {
    bottom: 35%;
    left: 45%;
    animation-delay: 1.6s;
    width: 8px;
    height: 8px;
}

.hero-trip-dot--4 {
    top: 25%;
    right: 35%;
    animation-delay: 2.4s;
    width: 5px;
    height: 5px;
}

.hero-trip-dot--5 {
    bottom: 25%;
    right: 25%;
    animation-delay: 3.2s;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.25;
        transform: scale(1.5);
    }
}

/* =============================================================
   TRIPS PAGE — Layout, Sidebar, Cards
   ============================================================= */
.trips-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 20px;
}

.trips-sidebar .sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

.trips-sidebar .sidebar-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trips-sidebar .sidebar-card h3 i {
    color: var(--luxury-gold);
}

.filter-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.filter-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 10px;
}

.filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--primary-navy);
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
}

.filter-select:focus {
    border-color: var(--luxury-gold);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font);
}

.filter-chip:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

.filter-chip.active {
    background: var(--luxury-gold);
    color: #fff;
    border-color: var(--luxury-gold);
}

.price-range {
    padding: 0 4px;
}

.range-input {
    width: 100%;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--luxury-gold) 0%, var(--luxury-gold) 50%, #e0e0e0 50%);
    outline: none;
    margin-bottom: 8px;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--luxury-gold);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(212, 162, 76, 0.3);
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--secondary-text);
}

#priceValue {
    font-weight: 700;
    color: var(--luxury-gold);
}

.filter-reset-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.filter-reset-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

.why-card .why-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.why-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--primary-navy);
    font-weight: 600;
}

.why-item i {
    color: var(--luxury-gold);
    font-size: 14px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.results-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 4px;
}

.results-header p {
    font-size: 13px;
    color: var(--secondary-text);
}

.results-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sidebar-toggle {
    display: none;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-navy);
    cursor: pointer;
    font-family: var(--font);
    align-items: center;
    gap: 6px;
}

.sort-select {
    padding: 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fff;
    cursor: pointer;
    outline: none;
}

.trips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.trip-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.trip-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.trip-card-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.trip-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.trip-card:hover .trip-card-img img {
    transform: scale(1.08);
}

.trip-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    background: var(--luxury-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(212, 162, 76, 0.3);
}

.trip-card-body {
    padding: 20px;
}

.trip-card-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.trip-card-meta span {
    font-size: 12px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.trip-card-meta i {
    color: var(--luxury-gold);
    font-size: 11px;
}

.trip-card-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    transition: color 0.3s;
}

.trip-card:hover .trip-card-body h3 {
    color: var(--luxury-gold);
}

.trip-card-body>p {
    font-size: 13px;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 12px;
}

.trip-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.trip-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-color);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
}

.trip-tag i {
    color: var(--luxury-gold);
    font-size: 10px;
}

.trip-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.trip-card-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-navy);
}

.trip-card-price small {
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
}

.trip-card-price span {
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text);
}

.trip-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--luxury-gold);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s;
}

.trip-card-cta:hover {
    background: var(--luxury-gold-hover);
    gap: 10px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-icon {
    font-size: 64px;
    color: rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.empty-btn {
    padding: 10px 24px;
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Sidebar Drawer (Mobile) */
.sidebar-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.sidebar-drawer.open {
    left: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.drawer-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
}

.drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-color);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-navy);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* =============================================================
   RESPONSIVE — Homepage 9 Card Sections
   ============================================================= */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .sv-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .tr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fl-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hl-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ca-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .of-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .contact-info h2 {
        font-size: 28px;
    }

    .contact-form-container {
        padding: 28px;
    }

    .form-row {
        gap: 14px;
    }

    .contact-grid {
        gap: 32px;
    }

    .contact-form-box {
        padding: 28px;
    }

    .bg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile Large (max-width: 768px) --- */
@media (max-width: 768px) {

    /* Services */
    .sv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .sv-header h2 {
        font-size: 26px;
    }

    .sv-card {
        padding: 24px 12px 20px;
    }

    .sv-card-img {
        width: 72px;
        height: 72px;
    }

    .sv-card h4 {
        font-size: 13px;
    }

    .sv-card .sv-desc {
        font-size: 11px;
    }

    /* Religious */
    .rt-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rt-card {
        height: 320px;
    }

    .rt-header h2 {
        font-size: 26px;
    }

    .rt-card-content {
        padding: 20px;
    }

    .rt-card h3 {
        font-size: 18px;
    }

    .rt-card-price {
        font-size: 22px;
    }

    /* Trips */
    .tr-header h2 {
        font-size: 26px;
    }

    .tr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-card {
        height: 350px;
    }

    .tr-card-title {
        font-size: 18px;
    }

    .tr-card-price {
        font-size: 22px;
    }

    /* Flights */
    .fl-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fl-header h2 {
        font-size: 26px;
    }

    .fl-card {
        flex-direction: column;
        height: auto;
    }

    .fl-card-glass {
        width: 100%;
        padding: 20px;
        position: relative;
    }

    .fl-card-bg {
        position: relative;
        height: 200px;
    }

    .fl-point .fl-code {
        font-size: 22px;
    }

    /* Hotels */
    .hl-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hl-header h2 {
        font-size: 26px;
    }

    /* Cruises */
    .cr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cr-header h2 {
        font-size: 26px;
    }

    /* Cars */
    .ca-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ca-header h2 {
        font-size: 26px;
    }

    .ca-card-name {
        font-size: 14px;
    }

    /* Offers */
    .of-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .of-header h2 {
        font-size: 26px;
    }

    /* Blog */
    .bg-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bg-header h2 {
        font-size: 26px;
    }

    /* Trips Page */
    .trips-main {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px auto;
        padding: 0 16px;
    }

    .trips-sidebar {
        display: none;
    }

    .sidebar-toggle {
        display: flex;
    }

    .trips-grid {
        grid-template-columns: 1fr;
    }

    .trip-card-img {
        height: 180px;
    }

    /* Section padding */
    .sv-section,
    .rt-section,
    .tr-section,
    .fl-section,
    .hl-section,
    .cr-section,
    .ca-section,
    .of-section,
    .bg-section {
        padding: 60px 0;
    }
}

/* --- Mobile Small (max-width: 480px) --- */
@media (max-width: 480px) {
    .sv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sv-card-img {
        width: 60px;
        height: 60px;
    }

    .sv-card h4 {
        font-size: 12px;
    }

    .sv-card .sv-desc {
        display: none;
    }

    .sv-card .sv-link {
        font-size: 11px;
    }

    .rt-card {
        height: 280px;
    }

    .rt-card-content {
        padding: 16px;
    }

    .rt-card h3 {
        font-size: 16px;
    }

    .rt-card-price {
        font-size: 18px;
    }

    .rt-card-cta {
        padding: 6px 12px;
        font-size: 12px;
    }

    .rt-card-badge {
        font-size: 10px;
        padding: 4px 10px;
    }

    .tr-card {
        height: 320px;
    }

    .tr-card-content {
        padding: 20px;
    }

    .tr-card-title {
        font-size: 16px;
    }

    .tr-card-float {
        display: none;
    }

    .fl-card-glass {
        width: 52%;
    }

    .fl-airline-name {
        font-size: 13px;
    }

    .fl-point .fl-code {
        font-size: 18px;
    }

    .fl-point .fl-time {
        font-size: 12px;
    }

    .fl-price {
        font-size: 18px;
    }

    .fl-book-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    .cr-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ca-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ca-card-name {
        font-size: 13px;
    }

    .ca-price {
        font-size: 16px;
    }

    .ca-specs {
        gap: 4px;
    }

    .ca-spec {
        font-size: 10px;
        padding: 3px 8px;
    }

    .of-card-body {
        padding: 16px;
    }

    .of-card h3 {
        font-size: 16px;
    }

    .of-card-price {
        font-size: 18px;
    }

    .bg-card-body {
        padding: 16px;
    }

    .bg-card-body h3 {
        font-size: 15px;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-info h2 {
        font-size: 26px;
    }

    .contact-form-container {
        padding: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-submit-btn {
        font-size: 14px;
        padding: 14px 24px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form-box {
        padding: 24px;
    }

    .contact-form-page .form-row {
        grid-template-columns: 1fr;
    }

    .blog-hero h1 {
        font-size: 26px;
    }

    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-post-card {
        grid-template-columns: 1fr;
    }

    .blog-post-img {
        height: 200px;
        min-height: unset;
    }

    .blog-post-body {
        padding: 20px;
    }

    .blog-post-body h3 {
        font-size: 17px;
    }

    .final-cta {
        padding: 60px 0;
    }

    .final-cta h2 {
        font-size: 24px;
    }

    .final-cta p {
        font-size: 14px;
    }

    .trip-card-body {
        padding: 16px;
    }

    .trip-card-body h3 {
        font-size: 16px;
    }

    .trip-card-price {
        font-size: 18px;
    }

    .trip-card-tags {
        gap: 4px;
    }

    .trip-tag {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* =============================================================
   CART / CHECKOUT SYSTEM
   ============================================================= */

/* --- Cart Toast Notification --- */
.cart-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(39, 174, 96, 0.3);
    z-index: 99999;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    max-width: 400px;
    direction: rtl;
}

.cart-toast--show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.cart-toast i {
    font-size: 18px;
}

/* --- Cart Badge in Navbar --- */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* --- Cart Hero --- */
.cart-hero {
    padding: 140px 0 50px;
    background: linear-gradient(135deg, var(--primary-navy), #0a1f3d);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cart-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(212, 162, 76, 0.08) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}

.cart-hero h1 {
    font-size: 34px;
    font-weight: 800;
    position: relative;
    margin-bottom: 8px;
}

.cart-hero h1 span {
    color: var(--luxury-gold);
}

.cart-hero p {
    font-size: 15px;
    opacity: 0.8;
    position: relative;
}

/* --- Cart Main --- */
.cart-main {
    padding: 60px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
    min-height: 400px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* --- Cart Table --- */
.cart-items {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    border: 1px solid rgba(7, 26, 53, 0.04);
}

.cart-items-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    padding: 16px 24px;
    background: rgba(7, 26, 53, 0.02);
    border-bottom: 1px solid rgba(7, 26, 53, 0.04);
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-text);
    text-align: center;
}

.cart-items-header span:first-child {
    text-align: right;
}

.cart-item {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    padding: 20px 24px;
    align-items: center;
    border-bottom: 1px solid rgba(7, 26, 53, 0.04);
    transition: background 0.3s;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item:hover {
    background: rgba(212, 162, 76, 0.02);
}

.cart-item-product {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
}

.cart-item-img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-color);
    flex-shrink: 0;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 4px;
}

.cart-item-info p {
    font-size: 12px;
    color: var(--secondary-text);
    margin: 0;
}

.cart-item-price,
.cart-item-total {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-navy);
    direction: ltr;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(7, 26, 53, 0.1);
    background: #fff;
    color: var(--primary-navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: var(--luxury-gold);
    color: #fff;
    border-color: var(--luxury-gold);
}

.qty-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    min-width: 24px;
    text-align: center;
}

.cart-item-remove {
    background: none;
    border: none;
    color: rgba(231, 76, 60, 0.4);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-remove:hover {
    color: #e74c3c;
    transform: scale(1.2);
}

/* --- Cart Empty --- */
.cart-empty {
    text-align: center;
    padding: 80px 40px;
}

.cart-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(212, 162, 76, 0.08);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--luxury-gold);
}

.cart-empty h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 8px;
}

.cart-empty p {
    font-size: 14px;
    color: var(--secondary-text);
    margin: 0 0 24px;
}

.cart-empty .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
}

/* --- Cart Summary Sidebar --- */
.cart-summary {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    border: 1px solid rgba(7, 26, 53, 0.04);
    position: sticky;
    top: 100px;
}

.cart-summary h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(212, 162, 76, 0.15);
}

.cart-summary h3 span {
    color: var(--luxury-gold);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--secondary-text);
}

.summary-row span:last-child {
    font-weight: 600;
    color: var(--primary-navy);
    direction: ltr;
}

.summary-divider {
    height: 1px;
    background: rgba(7, 26, 53, 0.06);
    margin: 6px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-top: 6px;
    border-top: 2px solid rgba(212, 162, 76, 0.15);
}

.summary-total span:last-child {
    color: var(--luxury-gold);
    direction: ltr;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
    text-decoration: none;
}

.cart-checkout-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212, 162, 76, 0.45);
}

.cart-continue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: none;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 12px;
    color: var(--secondary-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    text-align: center;
}

.cart-continue-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

/* --- Cart Coupon --- */
.cart-coupon {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(7, 26, 53, 0.06);
}

.cart-coupon input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
    outline: none;
}

.cart-coupon input:focus {
    border-color: var(--luxury-gold);
}

.cart-coupon button {
    padding: 12px 20px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font);
}

.cart-coupon button:hover {
    background: #0a1f3d;
}

/* =============================================================
   CHECKOUT PAGE
   ============================================================= */
.checkout-main {
    padding: 60px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Checkout Steps --- */
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-text);
    position: relative;
}

.checkout-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: rgba(7, 26, 53, 0.08);
}

.checkout-step:last-child::after {
    display: none;
}

.checkout-step--active {
    color: var(--primary-navy);
}

.checkout-step--active .step-num {
    background: var(--luxury-gold);
    color: #fff;
}

.checkout-step--done {
    color: #27ae60;
}

.checkout-step--done .step-num {
    background: #27ae60;
    color: #fff;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(7, 26, 53, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s;
}

/* --- Checkout Form --- */
.checkout-form {
    background: #fff;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    border: 1px solid rgba(7, 26, 53, 0.04);
}

.checkout-form h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 6px;
}

.checkout-form h3 span {
    color: var(--luxury-gold);
}

.checkout-form>p {
    font-size: 13px;
    color: var(--secondary-text);
    margin: 0 0 24px;
}

.form-section {
    margin-bottom: 28px;
}

.form-section h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i {
    color: var(--luxury-gold);
}

.checkout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.checkout-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkout-form .form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-navy);
}

.checkout-form .form-group label span {
    color: #e74c3c;
}

.checkout-form .form-group input,
.checkout-form .form-group select,
.checkout-form .form-group textarea {
    padding: 12px 14px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
    outline: none;
    transition: all 0.3s;
}

.checkout-form .form-group input:focus,
.checkout-form .form-group select:focus,
.checkout-form .form-group textarea:focus {
    border-color: var(--luxury-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.06);
}

.checkout-form .form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.checkout-form .form-group select {
    cursor: pointer;
}

/* --- Checkout Order Summary --- */
.checkout-summary {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(7, 26, 53, 0.04);
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    position: sticky;
    top: 100px;
}

.checkout-summary-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(7, 26, 53, 0.06);
}

.checkout-summary-header h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0;
}

.checkout-summary-header h4 span {
    color: var(--luxury-gold);
}

.checkout-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(7, 26, 53, 0.04);
}

.checkout-summary-item-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-color);
}

.checkout-summary-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-summary-item-info {
    flex: 1;
}

.checkout-summary-item-info h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 2px;
}

.checkout-summary-item-info p {
    font-size: 11px;
    color: var(--secondary-text);
    margin: 0;
}

.checkout-summary-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--luxury-gold);
    direction: ltr;
    flex-shrink: 0;
}

.checkout-summary-totals {
    padding: 20px 24px;
}

.checkout-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    margin-top: 24px;
    background: linear-gradient(135deg, var(--luxury-gold), #c98a2e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font);
    box-shadow: 0 4px 16px rgba(212, 162, 76, 0.3);
}

.checkout-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212, 162, 76, 0.45);
}

.checkout-submit-btn i {
    transition: transform 0.3s;
}

.checkout-submit-btn:hover i {
    transform: translateX(-6px);
}

.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary-text);
    font-size: 13px;
    text-decoration: none;
    margin-top: 14px;
    transition: color 0.3s;
}

.checkout-back-link:hover {
    color: var(--luxury-gold);
}

/* =============================================================
   PAYMENT PAGE
   ============================================================= */
.payment-main {
    padding: 60px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.payment-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: start;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border-radius: 14px;
    border: 2px solid rgba(7, 26, 53, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method:hover {
    border-color: rgba(212, 162, 76, 0.2);
}

.payment-method--active {
    border-color: var(--luxury-gold);
    background: rgba(212, 162, 76, 0.02);
}

.payment-method-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(7, 26, 53, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

.payment-method--active .payment-method-radio {
    border-color: var(--luxury-gold);
}

.payment-method--active .payment-method-radio::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--luxury-gold);
}

.payment-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(212, 162, 76, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--luxury-gold);
    flex-shrink: 0;
}

.payment-method-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 2px;
}

.payment-method-info p {
    font-size: 12px;
    color: var(--secondary-text);
    margin: 0;
}

/* --- Credit Card Form --- */
.payment-card-form {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-top: 16px;
    border: 1px solid rgba(7, 26, 53, 0.04);
    display: none;
}

.payment-card-form--show {
    display: block;
}

.payment-card-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.payment-card-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.payment-card-form .form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-navy);
}

.payment-card-form .form-group input {
    padding: 12px 14px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--primary-navy);
    background: #fafbfc;
    outline: none;
    transition: all 0.3s;
}

.payment-card-form .form-group input:focus {
    border-color: var(--luxury-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 162, 76, 0.06);
}

.payment-card-preview {
    background: linear-gradient(135deg, #0a1f3d, #043854);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.payment-card-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(212, 162, 76, 0.08);
}

.payment-card-preview .card-type {
    font-size: 20px;
    text-align: left;
    letter-spacing: 2px;
}

.payment-card-preview .card-number {
    font-size: 20px;
    letter-spacing: 4px;
    margin: 16px 0;
    direction: ltr;
    text-align: center;
    font-weight: 700;
}

.payment-card-preview .card-holder {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.payment-card-preview .card-name {
    font-size: 14px;
    font-weight: 600;
}

/* =============================================================
   ORDER CONFIRMATION PAGE
   ============================================================= */
.confirm-main {
    padding: 60px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.confirm-box {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.confirm-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.08), rgba(39, 174, 96, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 34px;
    color: #27ae60;
}

.confirm-box h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 8px;
}

.confirm-box h1 span {
    color: var(--luxury-gold);
}

.confirm-box>p {
    font-size: 14px;
    color: var(--secondary-text);
    margin: 0 0 32px;
}

.confirm-details {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px -6px rgba(7, 26, 53, 0.04);
    border: 1px solid rgba(7, 26, 53, 0.04);
    text-align: right;
}

.confirm-details h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(212, 162, 76, 0.15);
}

.confirm-details h4 span {
    color: var(--luxury-gold);
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
}

.confirm-row-label {
    color: var(--secondary-text);
}

.confirm-row-value {
    font-weight: 600;
    color: var(--primary-navy);
    direction: ltr;
    text-align: left;
}

.confirm-divider {
    height: 1px;
    background: rgba(7, 26, 53, 0.06);
    margin: 6px 0;
}

.confirm-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 0;
    font-size: 20px;
    font-weight: 800;
    margin-top: 10px;
    border-top: 2px solid rgba(212, 162, 76, 0.15);
}

.confirm-total span:last-child {
    color: var(--luxury-gold);
    direction: ltr;
}

.confirm-items {
    margin-top: 20px;
}

.confirm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(7, 26, 53, 0.04);
}

.confirm-item:last-child {
    border-bottom: none;
}

.confirm-item-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-color);
}

.confirm-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.confirm-item-info {
    flex: 1;
}

.confirm-item-info h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 2px;
}

.confirm-item-info p {
    font-size: 11px;
    color: var(--secondary-text);
    margin: 0;
}

.confirm-item-qty {
    font-size: 12px;
    color: var(--secondary-text);
}

.confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

.confirm-actions .btn {
    padding: 14px 28px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .payment-layout {
        grid-template-columns: 1fr;
    }

    .checkout-steps {
        gap: 6px;
    }

    .checkout-step {
        padding: 10px 16px;
        font-size: 12px;
    }

    .checkout-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .cart-items-header {
        display: none;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .cart-item-product {
        gap: 12px;
    }

    .cart-item-img {
        width: 60px;
        height: 60px;
    }

    .cart-item-info h4 {
        font-size: 14px;
    }

    .cart-item-price,
    .cart-item-total {
        text-align: right;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        padding: 0 60px 0 0;
    }

    .cart-item-qty {
        justify-content: flex-start;
    }

    .cart-item-remove {
        position: absolute;
        top: 12px;
        left: 12px;
    }

    .cart-item {
        position: relative;
    }

    .cart-summary {
        position: static;
    }

    .checkout-form {
        padding: 24px;
    }

    .checkout-form .form-row {
        grid-template-columns: 1fr;
    }

    .payment-card-form .form-row {
        grid-template-columns: 1fr;
    }

    .confirm-box {
        padding: 0 16px;
    }

    .confirm-details {
        padding: 20px;
    }

    .confirm-actions {
        flex-direction: column;
    }

    .cart-hero h1 {
        font-size: 26px;
    }

    .checkout-step {
        font-size: 11px;
        padding: 8px 10px;
    }

    .step-num {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ===== CART/CHECKOUT SYSTEM ===== */

/* Cart Toast Notification */
.cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    background: linear-gradient(135deg, var(--primary-navy), #0a2d5e);
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.35s ease;
    pointer-events: none;
}

.cart-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

/* Cart Badge */
.cart-badge {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--luxury-gold), #E8C56D);
    color: #0A1A2F;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-primary);
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.5);
    letter-spacing: 0.3px;
    z-index: 2;
}

.cart-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10, 26, 47, 0.06), rgba(10, 26, 47, 0.02));
    border: 1.5px solid rgba(201, 168, 76, 0.15);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    overflow: visible;
    flex-shrink: 0;
}

.cart-link::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 40%, rgba(201, 168, 76, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.cart-link:hover {
    background: linear-gradient(135deg, rgba(10, 26, 47, 0.1), rgba(10, 26, 47, 0.04));
    border-color: var(--luxury-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.15);
}

.cart-link:hover::before {
    opacity: 1;
}

.cart-link:active {
    transform: translateY(0) scale(0.95);
}

.cart-link i {
    font-size: 18px;
    color: #D4A24C;
    position: relative;
    z-index: 1;
    transition: all 0.35s ease;
}

.cart-link:hover i {
    color: var(--luxury-gold);
    transform: scale(1.12) rotate(-5deg);
}

/* Pulse ring when badge is visible */
.cart-link.has-items::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.3);
    animation: cartPulse 2s ease-in-out infinite;
}

@keyframes cartPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Cart Hero */
.cart-hero {
    background: linear-gradient(135deg, #0A1A2F 0%, #1a3a5c 50%, #0A1A2F 100%);
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cart-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cart-hero h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    position: relative;
}

.cart-hero h1 span {
    color: var(--luxury-gold);
}

.cart-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    position: relative;
}

/* Cart Layout */
.cart-main {
    padding: 50px 0;
    background: #f8f9fb;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}

/* Cart Items */
.cart-items-header {
    display: grid;
    grid-template-columns: 2fr 100px 100px 100px 40px;
    gap: 12px;
    padding: 14px 20px;
    background: var(--primary-navy);
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-primary);
}

.cart-item {
    display: grid;
    grid-template-columns: 2fr 100px 100px 100px 40px;
    gap: 12px;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid rgba(7, 26, 53, 0.06);
    transition: all 0.3s ease;
}

.cart-item:last-of-type {
    border-radius: 0 0 10px 10px;
    border-bottom: none;
}

.cart-item:hover {
    background: rgba(201, 168, 76, 0.03);
}

.cart-item-product {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-item-img {
    width: 70px;
    height: 55px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 3px;
    font-family: var(--font-primary);
}

.cart-item-info p {
    font-size: 12px;
    color: var(--secondary-text);
}

.cart-item-price,
.cart-item-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    font-family: var(--font-primary);
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(7, 26, 53, 0.15);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--primary-navy);
    transition: all 0.25s ease;
}

.qty-btn:hover {
    background: var(--luxury-gold);
    color: #fff;
    border-color: var(--luxury-gold);
}

.qty-value {
    font-weight: 700;
    font-size: 15px;
    min-width: 24px;
    text-align: center;
    font-family: var(--font-primary);
    color: var(--primary-navy);
}

.cart-item-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.25s ease;
}

.cart-item-remove:hover {
    background: #dc2626;
    color: #fff;
}

/* Empty Cart */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 10px;
}

.cart-empty-icon {
    font-size: 60px;
    color: rgba(201, 168, 76, 0.3);
    margin-bottom: 16px;
}

.cart-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.cart-empty p {
    color: var(--secondary-text);
    margin-bottom: 20px;
}

/* Cart Summary */
.cart-summary {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    position: sticky;
    top: 100px;
    box-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
}

.cart-summary h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

.cart-summary h3 span {
    color: var(--luxury-gold);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--secondary-text);
}

.summary-divider {
    height: 1px;
    background: rgba(7, 26, 53, 0.08);
    margin: 12px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-navy);
    font-family: var(--font-primary);
}

.summary-total span:last-child {
    color: var(--luxury-gold);
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: linear-gradient(135deg, #C9A84C, #E8C56D);
    color: #0A1A2F;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    text-decoration: none;
}

.cart-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4);
}

.cart-continue-btn {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(7, 26, 53, 0.15);
    border-radius: 10px;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
}

.cart-continue-btn:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

.cart-coupon {
    display: flex;
    margin-top: 16px;
    gap: 8px;
}

.cart-coupon input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(7, 26, 53, 0.12);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font-primary);
    outline: none;
}

.cart-coupon input:focus {
    border-color: var(--luxury-gold);
}

.cart-coupon button {
    padding: 10px 18px;
    background: var(--primary-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
}

.cart-coupon button:hover {
    background: #0a2d5e;
}

/* Checkout Steps */
.checkout-steps {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 30px;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary-text);
    font-family: var(--font-primary);
    box-shadow: 0 2px 8px rgba(7, 26, 53, 0.06);
    position: relative;
}

.checkout-step--done {
    background: var(--primary-navy);
    color: #fff;
}

.checkout-step--active {
    background: linear-gradient(135deg, #C9A84C, #E8C56D);
    color: #0A1A2F;
    font-weight: 700;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: 700;
}

.checkout-step--active .step-num {
    background: rgba(10, 26, 47, 0.15);
}

.checkout-step--done .step-num {
    background: rgba(255, 255, 255, 0.15);
}

/* Checkout Layout */
.checkout-main {
    padding: 0 0 60px;
    background: #f8f9fb;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
}

/* Checkout Form */
.checkout-form {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
}

.checkout-form>h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 6px;
    font-family: var(--font-primary);
}

.checkout-form>h3 span {
    color: var(--luxury-gold);
}

.checkout-form>p {
    color: var(--secondary-text);
    margin-bottom: 24px;
    font-size: 14px;
}

.form-section {
    margin-bottom: 24px;
}

.form-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
}

.form-section h4 i {
    color: var(--luxury-gold);
    font-size: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 6px;
    font-family: var(--font-primary);
}

.form-group label span {
    color: #dc2626;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(7, 26, 53, 0.12);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color 0.3s ease;
    background: #f8f9fb;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--luxury-gold);
    background: #fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkout Summary Sidebar */
.checkout-summary {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.checkout-summary-header {
    background: var(--primary-navy);
    padding: 18px 20px;
}

.checkout-summary-header h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-primary);
}

.checkout-summary-header h4 span {
    color: var(--luxury-gold);
}

.checkout-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(7, 26, 53, 0.06);
}

.checkout-summary-item-img {
    width: 50px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.checkout-summary-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-summary-item-info {
    flex: 1;
}

.checkout-summary-item-info h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 2px;
    font-family: var(--font-primary);
}

.checkout-summary-item-info p {
    font-size: 11px;
    color: var(--secondary-text);
}

.checkout-summary-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--luxury-gold);
    white-space: nowrap;
    font-family: var(--font-primary);
}

.checkout-summary-totals {
    padding: 16px 20px;
}

.checkout-summary-totals .summary-row {
    margin-bottom: 10px;
}

.checkout-back-link {
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
    font-family: var(--font-primary);
}

.checkout-back-link:hover {
    color: var(--luxury-gold);
}

.checkout-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: linear-gradient(135deg, #C9A84C, #E8C56D);
    color: #0A1A2F;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    text-decoration: none;
}

.checkout-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4);
}

/* Payment Methods */
.payment-main {
    padding: 0 0 60px;
    background: #f8f9fb;
}

.payment-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
}

.payment-methods {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
}

.payment-methods>h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

.payment-methods>h3 span {
    color: var(--luxury-gold);
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid rgba(7, 26, 53, 0.08);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-option:hover {
    border-color: rgba(201, 168, 76, 0.3);
}

.payment-option--active {
    border-color: var(--luxury-gold);
    background: rgba(201, 168, 76, 0.04);
}

.payment-option-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(7, 26, 53, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.payment-option--active .payment-option-radio {
    border-color: var(--luxury-gold);
}

.payment-option-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
}

.payment-option--active .payment-option-dot {
    background: var(--luxury-gold);
}

.payment-option-icon {
    font-size: 28px;
    color: var(--luxury-gold);
    flex-shrink: 0;
}

.payment-option-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 2px;
    font-family: var(--font-primary);
}

.payment-option-info p {
    font-size: 13px;
    color: var(--secondary-text);
}

/* Card Form */
.card-form {
    margin-top: 20px;
    animation: fadeInUp 0.4s ease;
}

.card-preview {
    background: linear-gradient(135deg, #0A1A2F, #1a3a5c);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: 0 8px 32px rgba(7, 26, 53, 0.3);
    position: relative;
    overflow: hidden;
}

.card-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.08);
}

.card-preview::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.05);
}

.card-preview-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
}

.card-preview-type {
    font-size: 28px;
}

.card-preview-bank {
    font-size: 22px;
    opacity: 0.5;
}

.card-preview-number {
    font-family: 'Courier New', monospace;
    font-size: 22px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    position: relative;
}

.card-preview-bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.card-preview-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.card-preview-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.card-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-form-fields .form-group {
    margin: 0;
}

/* Bank / Cash Info */
.bank-info {
    margin-top: 20px;
    animation: fadeInUp 0.4s ease;
}

.bank-info-card {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(7, 26, 53, 0.08);
}

.bank-info-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: #0A1A2F;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
}

.bank-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(7, 26, 53, 0.05);
    font-size: 14px;
}

.bank-info-row span:first-child {
    color: var(--secondary-text);
}

.bank-info-row span:last-child {
    font-weight: 600;
    color: var(--primary-navy);
    font-family: var(--font-primary);
}

.bank-info-note {
    margin-top: 14px;
    padding: 12px;
    background: rgba(201, 168, 76, 0.1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--luxury-gold);
    text-align: center;
    font-weight: 500;
}

/* Confirmation */
.confirmation-main {
    padding: 60px 0;
    background: #f8f9fb;
}

.confirmation-box {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(7, 26, 53, 0.08);
}

.confirmation-icon {
    font-size: 64px;
    color: #22c55e;
    margin-bottom: 16px;
}

.confirmation-box h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.confirmation-box h2 span {
    color: var(--luxury-gold);
}

.confirmation-msg {
    color: var(--secondary-text);
    margin-bottom: 28px;
}

.confirmation-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.confirmation-detail {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 16px 20px;
    text-align: right;
}

.confirmation-detail-label {
    display: block;
    font-size: 11px;
    color: var(--secondary-text);
    margin-bottom: 4px;
    font-weight: 500;
}

.confirmation-detail-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    font-family: var(--font-primary);
}

.confirmation-items {
    margin-top: 20px;
    text-align: right;
}

.confirmation-items h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 14px;
    font-family: var(--font-primary);
}

.confirmation-items table th {
    font-size: 13px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* Responsive */
@media (max-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .payment-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .cart-summary {
        position: static;
    }

    .confirmation-details {
        grid-template-columns: 1fr;
    }

    .confirmation-box {
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    .cart-items-header {
        display: none;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        position: relative;
    }

    .cart-item-product {
        gap: 12px;
    }

    .cart-item-img {
        width: 60px;
        height: 60px;
    }

    .cart-item-info h4 {
        font-size: 14px;
    }

    .cart-item-price,
    .cart-item-total {
        text-align: right;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        padding: 0 60px 0 0;
    }

    .cart-item-qty {
        justify-content: flex-start;
    }

    .cart-item-remove {
        position: absolute;
        top: 12px;
        left: 12px;
    }

    .checkout-form {
        padding: 24px;
    }

    .checkout-form .form-row {
        grid-template-columns: 1fr;
    }

    .payment-card-form .form-row {
        grid-template-columns: 1fr;
    }

    .confirmation-box {
        padding: 24px 16px;
    }

    .cart-hero h1 {
        font-size: 26px;
    }

    .checkout-step {
        font-size: 11px;
        padding: 8px 10px;
    }

    .step-num {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .checkout-steps {
        gap: 6px;
    }

    .checkout-step::after {
        display: none;
    }
}



.navbar {
    padding: 20px 0;
}

.navbar.sticky {
    padding: 12px 0;
}

.nav-links {
    overflow-x: visible;
}

.nav-links a {
    font-size: 14px;
    /* padding: 8px 15px; */
}

.logo-img {
    height: 48px;
}

.navbar.sticky .logo-img {
    height: 42px;
}

.cart-link {
    font-size: 18px;
}

.nav-account-btn {
    padding: 9px 18px;
    font-size: 13px;
    gap: 8px;
}

.nav-account-menu {
    left: auto;
    right: 0;
    z-index: 1100;
}

@media (max-width: 1100px) {
    .navbar {
        padding: 14px 0;
    }

    .logo-img {
        height: 40px;
    }

    .nav-links a {
        font-size: 15px;
        /* padding: 12px 16px; */
    }
}

/* ============================================
   MOBILE NAVBAR: Logo + Hamburger only
   Account, cart, and nav links move inside the mobile menu
   ============================================ */
.mobile-nav-extras {
    display: none;
}

@media (max-width: 1024px) {
    .nav-account {
        display: none !important;
    }

    .navbar-content {
        justify-content: space-between;
    }

    .cart-link {
        display: none !important;
    }

    .nav-icon-btn {
        display: none !important;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #fff;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 12px 16px 20px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 40px rgba(7, 26, 53, 0.12);
        gap: 2px;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 1000;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        color: var(--primary-navy) !important;
        border-radius: 10px;
        font-size: 15px;
        width: 100%;
        text-align: right;
        padding: 12px 16px;
        transition: all 0.25s ease;
    }

    .nav-links a:hover {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.06);
    }

    .nav-links a.active {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.08);
        font-weight: 600;
    }

    /* Mobile menu: account + cart items - shown when nav-links is open */
    .nav-links.open .mobile-nav-extras {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid #E2E8F0;
    }

    .mobile-nav-extras .mobile-menu-account {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 10px;
        color: var(--primary-navy);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.25s ease;
        cursor: pointer;
        background: none;
        border: none;
        width: 100%;
        text-align: right;
        font-family: inherit;
    }

    .mobile-nav-extras .mobile-menu-account:hover {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.06);
    }

    .mobile-nav-extras .mobile-menu-account i {
        width: 20px;
        text-align: center;
        font-size: 16px;
    }

    .mobile-nav-extras .mobile-menu-cart {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 10px;
        color: var(--primary-navy);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .mobile-nav-extras .mobile-menu-cart:hover {
        color: var(--luxury-gold) !important;
        background: rgba(201, 168, 76, 0.06);
    }

    .mobile-nav-extras .mobile-menu-cart i {
        width: 20px;
        text-align: center;
        font-size: 16px;
    }

    .mobile-nav-extras .mobile-menu-cart .cart-badge-mobile {
        background: var(--luxury-gold);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: auto;
    }

    .mobile-nav-extras .mobile-menu-divider {
        height: 1px;
        background: #E2E8F0;
        margin: 4px 0;
    }

    .mobile-nav-extras .mobile-menu-logout {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 10px;
        color: #EF4444;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .mobile-nav-extras .mobile-menu-logout:hover {
        background: #FEF2F2;
    }

    .mobile-nav-extras .mobile-menu-logout i {
        width: 20px;
        text-align: center;
        font-size: 16px;
    }

    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-img {
        height: 38px;
    }
}

/* ============================================
   FOOTER RESPONSIVE - CONSOLIDATED
   ============================================ */
.footer {
    background: var(--primary-navy);
    color: #fff;
    padding: 60px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 0px;
}

.footer-logo {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #fff;
}

.footer-logo span {
    color: var(--luxury-gold);
}

.footer-about {
    opacity: 0.7;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.8;
}

.footer h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li i {
    margin-left: 6px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--luxury-gold);
    padding-right: 6px;
}

.newsletter-form {
    display: flex;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    font-family: var(--font-ar);
    font-size: 14px;
    outline: none;
    min-width: 0;
}

.newsletter-btn {
    background: var(--luxury-gold);
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.newsletter-btn:hover {
    background: #d4a017;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.7;
    font-size: 13px;
    text-align: center;
    gap: 10px;
}

.footer-bottom p {
    margin: 0;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .footer {
        padding: 50px 0 28px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .footer-logo {
        font-size: 24px;
    }
}

/* Mobile: single column */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-logo {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .footer-about {
        margin-bottom: 16px;
    }

    .footer h4 {
        font-size: 15px;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a,
    .footer-links li {
        font-size: 13px;
    }

    .social-icons {
        margin-top: 12px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 10px;
        border-radius: 12px;
    }

    .newsletter-input {
        border-radius: 10px;
        padding: 14px 16px;
    }

    .newsletter-btn {
        border-radius: 10px;
        padding: 14px 24px;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding-top: 20px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .footer {
        padding: 32px 0 20px;
    }

    .footer-grid {
        gap: 24px;
    }

    .footer-logo {
        font-size: 22px;
    }

    .footer h4 {
        font-size: 14px;
    }
}