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

@font-face {
    font-family: "Josefin Sans";
    src: url("../fonts/JosefinSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SF Pro Text";
    src: local("SF Pro Text"),url("../fonts/SFProText-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SF Pro Text";
    src: local("SF Pro Text"),url("../fonts/SFProText-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

:root {
    --ff-marcellus: "Marcellus",sans-serif;
    --ff-josefin: "Josefin Sans",sans-serif;
    --ff-body: "SF Pro Text",sans-serif;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --wrapper-max-size: 1600px;
    --wrapper-md-max-size: 1400px;
    --wrapper-half: calc(var(--wrapper-max-size)/2);
    --wrapper-inline-padding: 100px;
    --clr-bg-light: #f7f7f7;
    --clr-bg-dark: #0b0e0f;
    --clr-border-dark: #0b0e0f;
    --clr-brand: #de261d;
    --clr-brand-light: #ec4f59;
    --clr-text-light: #fff;
    --clr-text-dark: #0b0e0f;
    --clr-666: #666;
    --clr-373737: #373737;
    --fs-60: 60px;
    --fs-32: 32px;
    --fs-26: 26px;
    --fs-18: 18px;
    --fs-17: 17px;
    --fs-16: 16px;
    --fs-15: 15px;
    --fs-14: 14px;
    --fs-13: 13px;
    --radius-6: 6px;
    --social-link-size: 50px;
    --social-link-icon-size: 26px;
    --social-link-bg: #333
}

@media(max-width: 1500px) {
    :root {
        --wrapper-inline-padding:80px;
        --fs-60: 50px;
        --fs-32: 28px;
        --fs-26: 23px
    }
}

@media(max-width: 1200px) {
    :root {
        --fs-60:45px;
        --fs-32: 22px;
        --fs-26: 20px
    }
}

@media(max-width: 860px) {
    :root {
        --wrapper-inline-padding:40px;
        --fs-60: 40px
    }
}

@media(max-width: 700px) {
    :root {
        --wrapper-inline-padding:20px;
        --fs-18: 16px
    }
}

*,*::after,*::before {
    box-sizing: border-box;
    margin: 0
}

body {
    position: relative;
    min-height: 100svh;
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
    background-color: var(--clr-bg-light);
    color: var(--clr-text-dark);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media(prefers-reduced-motion:no-preference) {
    body {
        scroll-behavior: smooth
    }
}

a {
    cursor: pointer;
    text-decoration: none
}

ul,ol,li {
    list-style: none;
    padding: 0
}

input,button,textarea,select {
    font: inherit
}

img {
    border: 0;
    outline: 0;
    display: block
}

img.custom-logo{
    width:100%;
    height:auto
}

img.fluid {
    width: 100%;
    height: auto
}

.img--cover,.vid--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0
}

@media(prefers-reduced-motion:no-preference) {
    .animate,.animate-loop {
        opacity: 0;
        transition: all 1s;
        will-change: transform
    }

    .fade-in {
        opacity: 0;
        transition: opacity ease-in 200ms
    }

    .animate-up {
        transform: translateY(100px)
    }

    .animate-down {
        transform: translateY(-100px)
    }

    .animate-up-lg {
        transform: translateY(150px)
    }

    .animate-zoom-in {
        transform: scale(.7)
    }

    .animate-delay-100 {
        transition-delay: 100ms
    }

    .animate-delay-150 {
        transition-delay: 150ms
    }

    .animate-delay-200 {
        transition-delay: 200ms
    }

    .animate-delay-250 {
        transition-delay: 250ms
    }

    .animate-delay-300 {
        transition-delay: 300ms
    }

    @media(max-width: 860px) {
        .animate-up {
            transform:translateY(40px)
        }

        .animate-up-lg {
            transform: translateY(80px)
        }

        .animate-delay-100 {
            transition-delay: 30ms
        }

        .animate-delay-150 {
            transition-delay: 50ms
        }

        .animate-delay-200 {
            transition-delay: 80ms
        }

        .animate-delay-250 {
            transition-delay: 100ms
        }

        .animate-delay-300 {
            transition-delay: 120ms
        }
    }

    .animated,.animate-looped {
        opacity: 1;
        transform: translate(0)
    }

    .fade-in.animated {
        opacity: 1
    }

    .animate-zoom-in.animated {
        transform: scale(1)
    }
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--ff-marcellus);
    font-weight: var(--fw-regular);
    line-height: 1.1
}

.ff--special {
    font-family: var(--ff-josefin)
}

.text--upper {
    text-transform: uppercase
}

.txt--center {
    text-align: center
}

.txt--balance {
    text-wrap: balance
}

.txt--pretty {
    text-wrap: pretty
}

.clr--brand {
    color: var(--clr-brand)
}

.clr--brand-light {
    color: var(--clr-brand-light)
}

.wrapper {
    position: relative;
    width: 100%;
    margin-inline:auto;padding-inline:var(--wrapper-inline-padding);max-width: calc(var(--wrapper-max-size) + calc(var(--wrapper-inline-padding)*2))
}

.wrapper.wrapper--md {
    --wrapper-max-size: var(--wrapper-md-max-size)
}

.wrapper--overflow {
    padding-inline:0}

@media(max-width: 860px) {
    .wrapper--overflow--mob {
        padding-inline:0;
        overflow-x: auto
    }
}

.d__flex {
    display: flex
}

.flex--center {
    justify-content: center;
    align-items: center
}

.flex--column {
    flex-direction: column
}

.flex--justify--center {
    justify-content: center
}

.flex--align--center {
    align-items: center
}

.flex--align--end {
    align-items: end
}

.flex--end {
    justify-content: end
}

.flex--between {
    justify-content: space-between
}

.flex--wrap {
    flex-wrap: wrap
}

.d__grid {
    display: grid
}

.grid--center {
    place-items: center;
    place-content: center
}

.grid--start {
    justify-items: start
}

.grid--align-start {
    align-content: start
}

.grid--content--gap {
    row-gap: 20px
}

.w--100 {
    width: 100%
}

.h--100 {
    height: 100%
}

.pos--relative {
    position: relative
}

.img--rounded {
    border-radius: var(--radius-6)
}

header {
    --header-min-height: 120px;
    --header-logo-inline-size: 250px;
    --header-link-size: 48px;
    --header-link-icon-size: 22px;
    --header-block-padding: 30px;
    --header-aside-gap: 15px;
    --lang-switch-bg: #1e1e1e;
    position: sticky;
    z-index: 55;
    top: 0;
    width: 100%;
    transition: all ease-in-out 300ms;
    padding-block:var(--header-block-padding);background-color: var(--clr-bg-dark);
    min-height: var(--header-min-height)
}

@media(max-width: 1500px) {
    header {
        --header-min-height:100px;
        --header-block-padding: 20px;
        --wrapper-inline-padding: 40px
    }
}

@media(max-width: 1200px) {
    header {
        --wrapper-inline-padding:20px;
        --header-aside-gap: 5px
    }
}

@media(max-width: 700px) {
    header {
        --header-min-height:85px;
        --header-logo-inline-size: 170px;
        --header-link-icon-size: 20px;
        --header-aside-gap: 2px
    }
}

.custom-logo-link {
    z-index: 2;
    max-width: var(--header-logo-inline-size)
}

.header__nav {
    --primary-nav-f-size: 16px;
    --primary-nav-item-gap: 10px;
    --primary-nav-color: #b0b0b0;
    --primary-nav-inline-gap: 30px;
    --primary-nav-inline-padding: 15px;
    --primary-nav-main-blocksize: var(--header-min-height);
    --secondary-nav-bg: #fff;
    --secondary-nav-color: #101517;
    --secondary-nav-f-size: 14px;
    --secondary-nav-block-size: 60px;
    --secondary-nav-inline-size: 30px;
    --nav-title-size: 30px;
    position: absolute;
    width: 100%;
    top: 0
}

@media(max-width: 1500px) {
    .header__nav {
        --primary-nav-f-size:15px
    }
}

.primary__nav .nav__item:not(.has--full--menu) {
    position: relative
}

.primary__nav .nav__item:first-child {
    margin-inline-start:auto}

.primary__nav .nav__item:last-child {
    margin-inline-end:auto}

.primary__nav {
    align-items: center
}

.primary__nav .nav__item__main {
    display: flex;
    align-items: center;
    font-family: var(--ff-josefin);
    font-size: var(--primary-nav-f-size);
    min-height: var(--primary-nav-main-blocksize);
    color: var(--primary-nav-color);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    transition: all ease-in-out 200ms;
    padding-inline:var(--primary-nav-inline-padding)}

.primary__nav .sub__menu {
    opacity: 0;
    pointer-events: none;
    transition: all ease-in-out 300ms;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--clr-bg-dark)
}

.primary__nav .has--sub__menu.drop--open .sub__menu,.show__nav .secondary__nav {
    opacity: 1;
    pointer-events: all
}

.primary__nav .sub__menu__lg {
    position: static
}

.primary__nav .sub__menu__lg .sub__menu__overflow--wrapper {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #2b2b2b;
    background-image: linear-gradient(to right,#000,rgba(15,15,15,.9),rgba(25,25,25,.914),#000)
}

.menu--wrapper {
    --menu-img-size: 300px;
    --menu-wrapper-gap: 30px;
    --block-padding: 40px;
    --sub-menu-f-size: 15px;
    --menu-col: 2;
    --menu-col-gap: 5px;
    --menu-item-block-padding: 10px;
    gap: var(--menu-wrapper-gap);
    padding-block:var(--block-padding)}

.nav__with__img .menu--wrapper {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.nav__with__img .nav__title__bar {
    grid-column: span 2
}

.menu--list {
    --menu-list-col: 4;
    --menu-list-col-gap: 20px;
    --block-padding: 30px;
    --menu-list-img: 120px;
    --menu-f-size: 18px;
    --menu-content-padding: 10px;
    grid-template-columns: repeat(var(--menu-list-col),1fr);
    gap: var(--menu-list-col-gap);
    padding-block:calc(var(--block-padding)/2) var(--block-padding)}

.menu--list a {
    position: relative;
    display: grid;
    grid-template-columns: var(--menu-list-img) 1fr;
    gap: 10px;
    align-items: center;
    font-size: var(--menu-f-size);
    color: var(--primary-nav-color);
    transition: all ease-in-out 200ms
}

.menu--list a span {
    padding: var(--menu-content-padding)
}

.menu--list a:hover {
    background-color: #1b1e1f;
    color: #fff
}

.nav__list {
    --block-padding: 30px;
    padding-block-end:var(--block-padding)}

.nav__list ul {
    grid-template-columns: repeat(var(--menu-col),1fr);
    gap: var(--menu-col-gap)
}

.nav__list.two--col ul {
    --menu-col: 2
}

.nav__list.three--col ul {
    --menu-col: 3
}

.nav__list.four--col ul {
    --menu-col: 4
}

.nav__list ul a {
    position: relative;
    display: inline-block;
    color: var(--primary-nav-color);
    font-size: var(--sub-menu-f-size);
    padding-block:var(--menu-item-block-padding);transition: all ease-in-out 200ms
}

.secondary__nav {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: var(--secondary-nav-bg);
    transition: all ease-in-out 200ms
}

.nav__open .secondary__nav {
    opacity: 1;
    pointer-events: all
}

.secondary__nav ul {
    gap: var(--secondary-nav-inline-size);
    justify-content: center
}

.secondary__nav a {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-family: var(--ff-josefin);
    font-weight: var(--fw-semibold);
    font-size: var(--secondary-nav-f-size);
    color: var(--secondary-nav-color);
    min-height: var(--secondary-nav-block-size)
}

.primary__nav .nav__item__main,.secondary__nav a {
    position: relative
}

.primary__nav .nav__item__main::after,.secondary__nav a::after {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--clr-brand);
    transition: all ease-in-out 200ms
}

.primary__nav .nav__item:hover .nav__item__main,.primary__nav .nav__item.drop--open .nav__item__main,.primary__nav .nav__item.active .nav__item__main {
    color: #fff
}

.primary__nav .nav__item:hover .nav__item__main::after,.primary__nav .nav__item.drop--open .nav__item__main::after,.primary__nav .nav__item.active .nav__item__main::after {
    opacity: 1
}

.nav__title {
    font-size: var(--nav-title-size);
    color: #fff;
    font-family: var(--ff-marcellus)
}

@media(hover: hover) {
    .secondary__nav a:hover {
        color:var(--clr-brand)
    }

    .primary__nav .nav__item__main:hover::after,.secondary__nav a:hover::after {
        opacity: 1
    }

    .primary__nav .nav__item__main:hover {
        color: #fff
    }

    .nav__list ul a::before,.menu--list a::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: var(--clr-brand);
        transition: all ease-in-out 200ms
    }

    .nav__list ul a:hover {
        color: #fff;
        padding-inline-start:15px}

    .nav__list ul a:hover::before {
        width: 4px
    }

    .primary__nav .has--sub__menu:hover .sub__menu {
        opacity: 1;
        pointer-events: all
    }

    .menu--list a::after {
        width: auto;
        height: 0;
        top: auto;
        bottom: 0;
        right: 0;
        left: var(--menu-list-img)
    }

    .menu--list a:hover::after {
        height: 5px
    }
}

@media(max-width: 1200px) {
    .header__nav {
        --header-nav-width:80%;
        --primary-nav-main-blocksize: 60px;
        --secondary-nav-color: #b0b0b0;
        --secondary-nav-inline-size: 0px;
        --secondary-nav-f-size: 15px;
        --nav-block-start-padding: 40px;
        --nav-block-end-padding: 60px;
        --nav-inline-padding: 40px;
        --nav-title-size: 22px;
        --primary-nav-inline-padding: 0px;
        position: fixed;
        left: 0;
        height: 100vh;
        z-index: 56;
        bottom: 0;
        width: var(--header-nav-width);
        overflow-y: auto;
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        padding-block-start:var(--nav-block-start-padding);padding-inline: var(--nav-inline-padding);
        padding-block-end:var(--nav-block-end-padding);transition: all ease-in-out 300ms;
        background-color: rgba(0,0,0,.9);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transform: translateX(calc(100%*-1))
    }

    .nav__open .header__nav {
        transform: translateX(0)
    }

    .primary__nav,.secondary__nav ul {
        flex-direction: column;
        align-items: stretch
    }

    .primary__nav .nav__item__main,.secondary__nav a {
        border-bottom: 1px solid #2b2b2b
    }

    .has--sub__menu .nav__item__main::before {
        position: absolute;
        right: 0;
        content: "";
        width: 12px;
        aspect-ratio: 1;
        transform: translateY(-6px) rotate(135deg);
        transition: all ease-in-out 200ms;
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor
    }

    .secondary__nav,.primary__nav .sub__menu {
        opacity: 1;
        pointer-events: all;
        position: relative;
        top: inherit;
        left: inherit;
        background-color: transparent
    }

    .primary__nav .sub__menu__lg .sub__menu__overflow--wrapper {
        position: relative;
        background-image: none;
        -webkit-backdrop-filter: inherit;
        backdrop-filter: inherit
    }

    .secondary__nav a {
        padding-inline:var(--primary-nav-inline-padding)}

    .primary__nav .nav__item: first-child {
        margin-inline-start:inherit
    }

    .primary__nav .nav__item:last-child {
        margin-inline-end:inherit}

    .primary__nav .sub__menu {
        opacity: 1;
        display: none
    }

    .primary__nav .nav__item.has--sub__menu.drop--open .sub__menu {
        display: block
    }

    .menu--wrapper {
        --block-padding: 20px;
        --menu-wrapper-gap: 20px;
        padding-inline:var(--primary-nav-inline-padding)}

    .menu--list {
        --menu-list-col: 2;
        --menu-list-img: 0px;
        --menu-content-padding: 0px;
        --menu-f-size: 15px;
        --menu-list-col-gap: 5px;
        --block-padding: 10px
    }

    .menu--list a {
        grid-template-columns: auto;
        gap: 0;
        align-content: start;
        padding-block:var(--menu-item-block-padding)}

    .menu--list img,.nav__with__img img {
        display: none
    }

    .nav__with__img .nav__title__bar {
        grid-column: span 1
    }

    .nav__with__img .menu--wrapper {
        grid-template-columns: auto
    }

    .nav__list {
        padding: 0
    }

    .nav__list ul a {
        width: 100%
    }

    .nav__list.four--col ul {
        --menu-col: 2
    }
}

@media(max-width: 640px) {
    header {
        isolation:isolate
    }

    .header__nav {
        --header-nav-width: 100%;
        --primary-nav-main-blocksize: 55px;
        --nav-block-start-padding: 90px;
        --nav-block-end-padding: 120px;
        --nav-inline-padding: 25px;
        z-index: -1;
        background-color: #000;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0)
    }

    .nav__list.four--col ul,.nav__list.two--col ul {
        --menu-col: 1
    }

    .menu--list {
        grid-template-columns: auto;
        --menu-list-col-gap: 0px
    }

    .nav__title__bar .btn__wrapper {
        display: none
    }

    .menu--wrapper {
        --menu-col-gap: 0px;
        --menu-wrapper-gap: 10px
    }

    .nav__title__bar .nav__title {
        display: none
    }

    .nav__with__img .menu--wrapper {
        --menu-wrapper-gap: 10px
    }
}

header aside {
    z-index: 2;
    align-items: center;
    gap: var(--header-aside-gap)
}

header aside a:not(.lang__switcher a) {
    width: var(--header-link-size);
    height: var(--header-link-size);
    transition: all ease-in-out 200ms
}

header aside a:not(.lang__switcher a) svg {
    width: var(--header-link-icon-size)
}

header aside a:not(.lang__switcher a):hover {
    background-color: #373737
}

.lang__switcher {
    position: relative;
    display: flex;
    align-items: center
}

.lang__switcher .lang__en,.lang__switcher .lang__ar {
    color: #fff;
    font-size: 13px;
    font-weight: var(--fw-bold)
}

.lang__switcher .lang__switch {
    background-color: var(--lang-switch-bg);
    gap: 5px;
    padding: 10px 12px
}

.lang__dropdown.ar a:last-child {
    display: none
}

.lang__dropdown.en a:first-child {
    display: none
}

html[lang="ar"] .lang__switcher .lang__switch .lang__ar,html[lang="ar"] .lang__switcher .lang__drop .lang__en {
    display: block
}

html[lang="ar"] .lang__switcher .lang__switch .lang__en,html[lang="ar"] .lang__switcher .lang__drop .lang__ar {
    display: none
}

.lang__switcher .lang__drop {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    top: 100%;
    background-color: var(--lang-switch-bg);
    transition: all ease-in-out 200ms
}

.lang__switcher.show .lang__drop {
    opacity: 1;
    pointer-events: all
}

.lang__switcher .lang__drop a {
    display: block;
    padding: 10px 12px
}

.lang__switcher .lang__drop a:hover {
    background-color: var(--clr-brand)
}

@media(hover: hover) {
    .lang__switcher:hover .lang__drop {
        opacity:1;
        pointer-events: all
    }
}

.site__theme svg {
    grid-area: 1/1;
    transition: all ease-in-out 200ms
}

.site__theme .sun,.dark .site__theme .moon {
    opacity: 0
}

.dark .site__theme .sun {
    opacity: 1
}

.nav__toggle {
    --nav-icon-width: 28px;
    --nav-icon-height: 2px;
    --nav-toggle-gap: 8px;
    height: var(--header-icon-size);
    color: #fff
}

.nav__toggle i {
    gap: var(--nav-toggle-gap);
    transition: all ease-in-out 200ms
}

.nav__toggle i span {
    background-color: currentColor;
    height: var(--nav-icon-height);
    width: var(--nav-icon-width);
    transform-origin: right;
    transition: all ease-in-out 200ms
}

.nav__toggle.nav--active {
    background-color: #373737
}

.nav__toggle.nav--active i {
    transform: translateX(-3px)
}

.nav__toggle.nav--active i span:nth-child(1) {
    transform: rotate(-45deg)
}

.nav__toggle.nav--active i span:nth-child(2) {
    opacity: 0
}

.nav__toggle.nav--active i span:nth-child(3) {
    transform: rotate(45deg)
}

.lang a,.lang__nav {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif
}

.search {
    --search-f-size: 20px;
    --search-gaps: 15px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 2;
    background-color: var(--clr-bg-dark);
    transition: all ease-in-out 200ms
}

.search--open .search {
    opacity: 1;
    pointer-events: all
}

.search .wrapper {
    grid-template-columns: 1fr auto;
    align-content: center
}

.search form {
    grid-template-columns: auto 1fr;
    gap: var(--search-gaps);
    align-items: center;
    position: relative
}

.search form input {
    width: 100%;
    border: 0;
    font-size: var(--search-f-size);
    border-inline-start:1px solid #373737;padding-inline-start:var(--search-gaps);padding-block: 10px;
    color: #fff;
    border-radius: 0;
    appearance: none;
    background-color: transparent
}

.search form input:focus {
    outline: 0;
    border-color: #ab2d34
}

.search form input::placeholder {
    color: rgba(255,255,255,.8)
}

.search .close__search {
    width: var(--header-link-size);
    height: var(--header-link-size)
}

.search .close__search:hover {
    background-color: #373737
}

@media(max-width: 700px) {
    .lang__switcher {
        display:none
    }

    .search {
        --search-f-size: 16px;
        --search-gaps: 10px
    }

    .search form svg {
        width: 25px
    }

    .nav__toggle i {
        transform: scale(.8)
    }

    .header--wrapper,.search .wrapper {
        padding-inline-end:10px}
}

.btn {
    --btn-f-size: 14px;
    --btn-b-padding: 16px;
    --btn-min-height: 54px;
    --btn-inline-s-padding: 25px;
    --btn-inline-e-padding: 20px;
    --btn-gap: 20px;
    --btn-border-clr: var(--clr-border-dark);
    --btn-hover-bg-clr: var(--clr-bg-dark);
    display: flex;
    align-items: center;
    gap: var(--btn-gap);
    font-size: var(--btn-f-size);
    font-family: var(--ff-josefin);
    padding-block:var(--btn-b-padding);padding-inline: var(--btn-inline-s-padding) var(--btn-inline-e-padding);
    min-height: var(--btn-min-height);
    border: 1px solid var(--btn-border-clr);
    color: var(--clr-text-dark);
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: all ease-in-out 200ms
}

.btn span {
    transform: translateY(2px)
}

.btn:hover {
    background-color: var(--btn-hover-bg-clr);
    color: #fff
}

.btn.btn--white {
    --btn-border-clr: white;
    color: #fff
}

.btn.btn--white:hover {
    --btn-hover-bg-clr: white;
    color: var(--clr-text-dark)
}

.btn.btn--brand--filled {
    --btn-border-clr: var(--clr-brand);
    padding-inline:30px;min-width: 200px;
    background-color: var(--clr-brand);
    color: #fff;
    text-align: center;
    justify-content: center
}

.btn.btn--brand--filled:hover {
    --btn-border-clr: var(--clr-bg-dark);
    background-color: var(--clr-bg-dark);
    color: #fff
}

@media(max-width: 1200px) {
    .btn {
        --btn-b-padding:10px;
        --btn-min-height: 48px;
        --btn-inline-s-padding: 15px;
        --btn-inline-e-padding: 10px;
        --btn-gap: 10px
    }

    .btn span {
        transform: translateY(1px)
    }
}

@media(max-width: 640px) {
    .btn {
        --btn-f-size:13px
    }

    .btn.btn--brand--filled {
        --btn-f-size: 14px;
        --btn-b-padding: 12px;
        --btn-min-height: 50px;
        width: 100%
    }

    .btn__wrapper.flex--center {
        justify-content: start
    }
}

.card__grid {
    --card-gap: 20px;
    --card-count: 4;
    grid-template-columns: repeat(var(--card-count),minmax(0,1fr));
    gap: var(--card-gap)
}

.card {
    --card-content-b-end-padding: 35px;
    --card-content-inline-padding: 30px;
    --card-content-gap: 20px
}

.card figure {
    display: grid;
    border-radius: var(--radius-6);
    overflow: clip
}

.card figure picture,.card figure figcaption {
    grid-area: 1/1
}

.card figure img,.card figure figcaption {
    transition: all ease-in-out 300ms
}

.card figure figcaption {
    display: grid;
    z-index: 2;
    height: 100%;
    align-content: end;
    color: #fff;
    gap: var(--card-content-gap);
    justify-items: start;
    padding-inline:var(--card-content-inline-padding);padding-block-end: var(--card-content-b-end-padding);
    background: #000;
    background: linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%)
}

.card .card__title {
    font-size: var(--fs-32)
}

.card .card__tag {
    border: 1px solid rgba(255,255,255,.5);
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 20px
}

.card .card__link {
    font-family: var(--ff-josefin);
    font-size: clamp(10px,1vw,14px);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 4px
}

.block--grid .card figure {
    width: 100%;
    height: 100%;
    aspect-ratio: 1
}

.card__stack {
    color: var(--clr-text-dark)
}

.card__stack figure,.card__stack figure figcaption {
    display: grid;
    gap: clamp(15px,3vw,20px)
}

.card__stack figure img {
    border-radius: var(--radius-6)
}

.card__stack .tag__group {
    gap: 20px;
    font-size: 14px;
    color: var(--clr-373737)
}

.card__stack .tag__group span:empty {
    display: none
}

.card__stack .card__title {
    font-size: var(--fs-26);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

@media(hover: hover) {
    .card .card__title,.card .card__link,.card .card__tag,.card__stack img {
        transition:all ease-in-out 300ms
    }

    a.card:hover {
        --card-content-b-end-padding: 70px
    }

    .card .card__link {
        opacity: 0;
        position: absolute;
        bottom: 0;
        transform: translateY(60px)
    }

    a.card:hover .card__title {
        transform: translateY(-15px)
    }

    a.card:hover .card__tag {
        transform: translateY(-10px);
        transition-delay: 100ms
    }

    a.card:hover .card__link {
        opacity: 1;
        transform: translateY(-40px)
    }

    a.card:hover img {
        transform: scale(1.2)
    }

    .card__stack picture {
        aspect-ratio: 1/1;
        overflow: clip;
        border-radius: var(--radius-6)
    }

    .card__stack:hover .card__title {
        color: var(--clr-brand)
    }

    .card__stack:hover img {
        transform: scale(1.1)
    }
}

@media(max-width: 1200px) {
    .card__grid {
        --card-count:3
    }
}

@media(max-width: 860px) {
    .card {
        --card-content-b-end-padding:25px;
        --card-content-inline-padding: 20px;
        --card-content-gap: 15px
    }

    .card__stack .tag__group {
        font-size: 13px;
        gap: 15px
    }
}

@media(max-width: 700px) {
    .featured__models .card__grid {
        --card-gap:15px;
        grid-template-columns: auto;
        grid-auto-flow: column;
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        padding-inline:var(--wrapper-inline-padding);scroll-padding: var(--wrapper-inline-padding)
    }

    .featured__models .card__grid .card {
        width: 250px;
        scroll-snap-align: start
    }

    .featured__models .card .animate-up {
        transform: none
    }

    .card__grid::-webkit-scrollbar {
        display: none
    }
}

.hero {
    --hero-grid-gap: 50px;
    --hero-grid-b-s-padding: 60px;
    --hero-grid-b-e-padding: 90px;
    background-color: var(--clr-bg-dark)
}

.hero--grid {
    gap: var(--hero-grid-gap);
    padding-block-start:var(--hero-grid-b-s-padding)}

.hero .banner__title {
    font-family: var(--ff-marcellus);
    font-size: var(--fs-60);
    color: #fff
}

.hero--cards {
    --card-count: 4
}

.mall--highlights {
    min-width: 0
}

.mall--highlights .swiper-wrapper {
    padding-block-end:var(--hero-grid-b-e-padding)}

.mall--highlights .mall--highlights--item: nth-child(1) .animate-up {
    transition-delay:250ms
}

.mall--highlights .mall--highlights--item:nth-child(2) .animate-up {
    transition-delay: 500ms
}

.mall--highlights .mall--highlights--item:nth-child(3) .animate-up {
    transition-delay: 750ms
}

.mall--highlights .mall--highlights--item:nth-child(4) .animate-up {
    transition-delay: 1000ms
}

@media(max-width: 860px) {
    .hero__title {
        flex-direction:column-reverse;
        align-items: start;
        gap: 15px
    }
}

@media(max-width: 700px) {
    .hero {
        --hero-grid-gap:40px;
        --hero-grid-b-s-padding: 40px;
        --hero-grid-b-e-padding: 60px
    }

    .mall__highlights__slider.swiper {
        padding-inline:var(--wrapper-inline-padding)}

    .mall--highlights.wrapper {
        padding-inline: 0
    }

    .mall--highlights .mall__highlights--item {
        width: 260px
    }
}

.section__content {
    --content-gap: 30px;
    gap: var(--content-gap)
}

.section__title {
    font-family: var(--ff-marcellus);
    font-size: var(--fs-60);
    color: var(--clr-text-dark)
}

.section__content p {
    font-size: var(--fs-18);
    font-weight: var(--fw-regular);
    line-height: 1.6
}

.tag__title {
    font-weight: var(--fw-semibold);
    font-size: clamp(12px,3vw,14px);
    font-family: var(--ff-josefin)
}

.zb__info {
    --b-padding: 60px;
    --mall-info-icon: 42px;
    --title-f-size: 22px;
    --title-link-f-size: 16px;
    padding-block:var(--b-padding);color: var(--clr-text-dark)
}

.zb__info svg:not(a svg) {
    width: var(--mall-info-icon)
}

.zb__info span:not(a span) {
    font-family: var(--ff-marcellus);
    font-size: var(--title-f-size);
    padding-inline:10px}

.zb__info a {
    gap: 5px;
    color: var(--clr-text-dark);
    font-family: var(--ff-body);
    font-size: var(--title-link-f-size);
    font-weight: var(--fw-bold)
}

.zb__info a span {
    display: block
}

.zb__info a:hover {
    color: var(--clr-brand);
    text-decoration: underline;
    text-underline-offset: 5px
}

@media(max-width: 1500px) {
    .zb__info__list li {
        flex-wrap:wrap;
        flex: 1;
        align-items: start
    }

    .zb__info a {
        width: 100%;
        padding-inline-start:52px}
}

@media(max-width: 860px) {
    .zb__info {
        display:none
    }
}

.featured__models {
    --section-b-padding: 80px;
    --content-gap: 60px;
    padding-block:var(--section-b-padding)}

.featured__models .content--wrapper {
    gap: var(--content-gap)
}

.featured__models .card:nth-child(1) .animate-up {
    transition-delay: 100ms
}

.featured__models .card:nth-child(2) .animate-up {
    transition-delay: 150ms
}

.featured__models .card:nth-child(3) .animate-up {
    transition-delay: 200ms
}

.featured__models .card:nth-child(4) .animate-up {
    transition-delay: 250ms
}

.featured__models .card:nth-child(5) .animate-up {
    transition-delay: 300ms
}

.featured__models .card:nth-child(6) .animate-up {
    transition-delay: 350ms
}

.featured__models .card:nth-child(7) .animate-up {
    transition-delay: 400ms
}

.featured__models .card:nth-child(8) .animate-up {
    transition-delay: 450ms
}

@media(max-width: 1200px) {
    .featured__models .card:nth-child(7),.featured__models .card:nth-child(8) {
        display:none
    }
}

@media(max-width: 700px) {
    .featured__models {
        --content-gap:30px;
        --section-b-padding: 50px
    }

    .featured__models .section__content {
        text-align: start;
        --content-gap: 20px
    }

    .featured__models .section__content .section__title,.featured__models .section__content p {
        text-wrap: balance
    }

    .wrapper.card--wrapper {
        padding-inline:0;min-width: 0
    }
}

.whats__new {
    padding-block:clamp(40px,4vw,60px)}

.whats__new .section__content {
    padding-block-end:clamp(30px,4vw,50px)}

.mall__happenings .card__stack:nth-child(1) .animate-up {
    transition-delay: 100ms
}

.mall__happenings .card__stack:nth-child(2) .animate-up {
    transition-delay: 150ms
}

.mall__happenings .card__stack:nth-child(3) .animate-up {
    transition-delay: 200ms
}

@media(max-width: 700px) {
    .whats__new .section__content {
        --content-gap:15px;
        flex-direction: column-reverse;
        justify-content: start;
        align-items: start
    }

    .mall__happenings.wrapper {
        --wrapper-inline-padding: 0px
    }

    .mall__happenings .card__slider.swiper {
        padding-inline:20px}

    .mall__happenings .card__slider .card__slider--item {
        width: 300px
    }
}

.featured__content {
    --block-space: 120px;
    --inline-space: 80px;
    --gap: 30px;
    padding-block:var(--block-space)}

.wrapper--two--col {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--gap)
}

.wrapper--two--col .section__content {
    --content-gap: 40px;
    padding-inline-start:var(--inline-space);justify-items: start;
    align-content: center
}

@media(max-width: 1500px) {
    .featured__content {
        --block-space:100px;
        --inline-space: 50px
    }
}

@media(max-width: 1200px) {
    .featured__content {
        --block-space:80px;
        --inline-space: 30px
    }
}

@media(max-width: 860px) {
    .featured__content {
        --inline-space:0px
    }

    .wrapper--two--col .section__content {
        --content-gap: 25px
    }
}

@media(max-width: 700px) {
    .featured__content {
        --block-space:60px
    }

    .wrapper--two--col {
        grid-template-columns: auto
    }
}

.movies {
    --block-space: 120px;
    --movie-list-gap: 60px;
    background-color: var(--clr-bg-dark);
    padding-block:var(--block-space);color: #fff
}

.movies .section__title {
    color: #fff
}

.awards.movies .movie__name {
    color: #fff
}

.movies .movie__name {
    display: block;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    padding-block-start:15px}

.movie__list {
    padding-block:var(--movie-list-gap)}

@media(max-width: 1200px) {
    .movies {
        --block-space:80px;
        --movie-list-gap: 40px
    }
}

@media(max-width: 700px) {
    .movies {
        --block-space:60px;
        --movie-list-gap: 30px
    }

    .movies .section__content {
        --content-gap: 15px;
        flex-direction: column-reverse;
        align-items: start
    }

    .movie__list {
        padding-inline:0}

    .movie__list .card__slider--item {
        width: 210px
    }

    .movie__slider.swiper {
        padding-inline:var(--wrapper-inline-padding)}
}

footer {
    --block-space: 100px;
    --footer-title-size: 22px;
    --footer-link-size: 17px;
    --footer-link: #ababab;
    --social-board-padding: 50px;
    background-color: var(--clr-bg-dark);
    padding-block:var(--block-space)}

footer h5 {
    font-size: var(--footer-title-size);
    color: #fff
}

footer .footer__col {
    gap: 30px;
    align-content: start;
    align-items: start
}

.footer__col__group {
    padding-block-end:var(--social-board-padding)}

footer a {
    transition: all ease-in-out 200ms
}

footer .footer__col ul {
    gap: 10px;
    justify-items: start
}

footer .footer__col a {
    display: flex;
    padding-block:5px;font-family: var(--ff-josefin);
    font-size: var(--footer-link-size);
    font-weight: var(--fw-regular);
    color: var(--footer-link)
}

footer hr {
    border-color: var(--clr-brand)
}

.socialboard__link {
    padding-block:var(--social-board-padding)}

.socialboard__link a {
    font-size: var(--footer-title-size);
    font-family: var(--ff-marcellus);
    color: #fff;
    gap: 10px
}

.socialboard__link a:hover {
    color: var(--clr-brand)
}

.footer__legal {
    padding-block-start:var(--social-board-padding);gap: 10px
}

.footer__legal ul {
    gap: clamp(10px,4vw,20px)
}

.footer__legal p,.footer__legal a {
    color: var(--footer-link);
    font-size: 14px
}

footer .footer__col a:hover,.footer__legal a:hover {
    color: var(--clr-brand-light);
    text-decoration: underline;
    text-underline-offset: 4px
}

.social__links a {
    width: var(--social-link-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--social-link-bg)
}

.social__links a:hover {
    --social-link-bg: var(--clr-brand)
}

@media(max-width: 1200px) {
    footer .footer__col {
        width:calc(100%/3)
    }
}

@media(max-width: 860px) {
    footer {
        --block-space:80px
    }

    .footer__col__group {
        flex-wrap: wrap;
        row-gap: 40px
    }
}

@media(max-width: 700px) {
    footer {
        --block-space:60px;
        --footer-title-size: 20px;
        --footer-link-size: 15px;
        --social-board-padding: 35px
    }

    .footer__col__group {
        row-gap: 30px
    }

    footer .footer__col {
        width: calc(100%/2);
        gap: 20px
    }

    footer .footer__col:last-child {
        width: 100%;
        grid-auto-flow: column;
        align-items: center;
        justify-content: space-between
    }

    .footer__col__group .footer__col:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .alwahda__review {
        gap: 30px
    }

    .socialboard__link a {
        text-align: start
    }
}

body::-webkit-scrollbar {
    width: 12px
}

body::-webkit-scrollbar-track {
    background-color: #1e1e1e
}

body::-webkit-scrollbar-thumb {
    background-color: #393939
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--clr-brand)
}

.dark {
    --clr-bg-light: #161a1c;
    --clr-text-dark: #fff;
    --clr-border-dark: #fff;
    --clr-373737: #b3b3b3
}

.dark p {
    --clr-text-dark: #828282;
    color: var(--clr-text-dark)
}

.dark .hero__image-banner-title p {
    color: #fff
}

.dark .content-info svg path,.dark .service-item svg path,.dark .event-info svg path {
    fill: var(--clr-border-dark)!important
}

.dark .content-detail-block .social-media-icon a svg path {
    fill: var(--clr-border-dark)!important
}

.dark .content-detail-block .social-media-icon a {
    border-color: #fff
}

.dark .movies-list figcaption .type,.dark .content-tags span {
    border-color: var(--clr-brand);
    color: #fff
}

.dark .form__group .text-danger {
    color: #ff222e;
    font-size: 14px
}

.dark .form__group select,.dark .form__group input,.dark .form__group textarea {
    border-color: #666;
    color: var(--clr-text-dark)
}

.dark .floorPlans {
    background: #fff
}

.dark .btn-wrap .btn {
    background: var(--clr-bg-light)
}

.dark .input-group-addon,.dark .form__group .radio-inline {
    border-color: #fff
}

.dark .form__group select option {
    background: rgba(0,0,0,.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.4)
}

.dark .btn:hover {
    background-color: #5d5d5d;
    color: #fff
}

.dark .iti__country-list {
    background-color: #000
}

.dark .swiper--arrows {
    background: #262b2d
}

.dark .swiper--arrows:not(.swiper-button-disabled):hover {
    background-color: #722226
}

.dark .content-tags a {
    border: 1px solid #fff;
    color: var(--clr-text-light)
}

.dark .content-tags a:hover {
    background-color: #5d5d5d
}

.video-banner .site__header {
    position: fixed;
    background: transparent
}

.video-banner.show--nav.nav__open .site__header,.video-banner .site__header.bg,.video-banner .site__header:hover {
    background: var(--clr-bg-dark);
    transition: all .3s ease-in-out
}

.hero__slider .swiper--arrows.swiper-button-disabled {
    opacity: .5
}

.hero__video-banner {
    position: relative;
    top: 0;
    height: 70svh;
    width: 100%
}

.hero__image-banner {
    position: relative;
    overflow: hidden
}

.hero__slider--item,.hero__slider,.hero__image-banner {
    height: 750px
}

.hero__video-banner::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0
}

.hero__video-banner::before {
    z-index: 49;
    background: rgba(0,0,0,.4);
    background: linear-gradient(0deg,rgb(0 0 0/80%) 0%,rgb(0 0 0/70%) 35%,rgb(0 0 0/30%) 75%,rgb(0 0 0/80%) 100%)
}

.hero__image-banner .hero__slider--item::after {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    z-index: 49;
    background: linear-gradient(360deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 50.5%,rgba(0,0,0,0) 100%)
}

.hero__video-banner-title,.hero__image-banner-title {
    position: absolute;
    z-index: 50;
    bottom: 5rem;
    color: #fff;
    width: 100%
}

.hero__video-banner-title {
    text-align: center;
    bottom: 150px
}

.hero__image-banner-title p,.hero__video-banner-title p {
    font-family: var(--ff-josefin);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14)
}

.hero__video-banner-title .wrapper,.hero__image-banner-title .wrapper {
    gap: 20px
}

.hero__image-banner-title .wrapper {
    align-items: start
}

.hero__image-banner-title .btn,.hero__video-banner-title .btn {
    margin-top: 1rem
}

.hero__slider--item {
    position: relative
}

.hero__video-banner-title h1,.hero__image-banner-title h1 {
    font-size: var(--fs-60)
}

.hero__slider .slider__nav.inline .swiper--arrows {
    background: var(--clr-text-light)
}

.hero__slider .slider__nav.inline {
    top: 45%;
    z-index: 100;
    transform: translateY(-50%)
}

@media(max-width: 1600px) {
    .hero__slider--item,.hero__slider,.hero__image-banner {
        height:550px
    }

    .hero__video-banner-title {
        bottom: 120px
    }

    .hero__image-banner-title {
        bottom: 60px
    }
}

@media(max-width: 1300px) {
    .hero__slider--item,.hero__slider,.hero__image-banner {
        height:500px
    }

    .hero__image-banner-title {
        bottom: 40px
    }
}

@media(max-width: 640px) {
    .hero__slider--item,.hero__slider,.hero__image-banner {
        height:450px
    }

    .hero__video-banner-title {
        bottom: 100px
    }

    .hero__image-banner-title {
        bottom: 30px
    }
}

.scrollWheel {
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 50;
    margin-inline-start:-5px}

.scrollWheel::before {
    content: '';
    height: 40px;
    width: 2px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
    border-radius: 1px;
    transform: scaleY(0);
    -webkit-animation: scroll 2s linear infinite;
    animation: scroll 2s linear infinite
}

@-webkit-keyframes scroll {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }

    25% {
        transform: scaleY(1);
        transform-origin: top
    }

    26% {
        transform-origin: bottom
    }

    50% {
        transform: scaleY(0);
        transform-origin: bottom
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom
    }
}

@keyframes scroll {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }

    25% {
        transform: scaleY(1);
        transform-origin: top
    }

    26% {
        transform-origin: bottom
    }

    50% {
        transform: scaleY(0);
        transform-origin: bottom
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom
    }
}

.cookie {
    --space-30: 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 105;
    background-color: #fff;
    padding-block:var(--space-30)}

.cookie .wrapper {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-30)
}

.cookie .title {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--clr-666)
}

.cookie .btn-wraper,.cookie .content {
    gap: 10px
}

.text--balance {
    text-wrap: balance
}

.cookie .cookie--text {
    display: block;
    color: var(--clr-666);
    font-size: clamp(var(--fs-13),3vw,var(--fs-16))
}

.cookie .btn--secondary {
    background-color: rgba(var(--clr-brand),.1);
    color: var(--clr-666)
}

.pop-up-wrap {
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21,17,17,.734);
    display: flex;
    align-items: center
}

.pop-up-close:before,.pop-up-close:after {
    position: absolute;
    left: 50%;
    content: " ";
    height: 20px;
    width: 2px;
    background-color: currentColor;
    top: 10px;
    left: 19px
}

.pop-up-close:after {
    transform: rotate(-45deg)
}

.pop-up-close:before {
    transform: rotate(45deg)
}

.pop-up-wrap.pop-up-open {
    visibility: visible;
    opacity: 1;
    z-index: 999
}

.pop-up {
    background-color: #fff;
    margin: auto;
    padding: 10px;
    border-radius: 6px;
    position: relative;
    max-width: 600px
}

@media(min-width: 1900px) {
    .pop-up {
        max-width:700px
    }
}

@media(min-width: 1400px) {
    .pop-up {
        max-width:500px
    }
}

.pop-up-close {
    width: 40px;
    height: 40px;
    background: var(--clr-brand);
    color: #fff;
    float: right;
    border-radius: 2px;
    position: absolute;
    cursor: pointer;
    top: -42px;
    right: -42px;
    transition: all .3s ease-in-out
}

.pop-up-close:hover {
    background: #fff;
    color: var(--clr-brand)
}

.pop-up-data {
    max-height: 80vh;
    overflow: auto
}

.form-wrap.event-booking {
    grid-template-columns: repeat(3,1fr)
}

.dark .floorplan__list a {
    background: #1f2326
}

.dark .floorplan__list a svg path:first-child {
    fill: #5e5f5f
}

.sitemap__list h4,.leasing--form .form__group h4,.event-booking .form__group h4 {
    width: 100%;
    padding-block-end:calc(var(--gap-40)/4);border-bottom: 1px solid #ab2d344f
}

.form-wrap.event-booking .category-list {
    margin-block-end:1rem}

.form-wrap.event-booking .category-list,.form-wrap.event-booking .form__group.full--width {
    grid-column: span 3
}

@media(max-width: 860px) {
    .pop-up {
        max-width:75%
    }

    .cookie .wrapper {
        grid-template-columns: 1fr
    }

    .cookie .btn-wraper {
        flex-wrap: wrap
    }
}

@media(max-width: 640px) {
    .pop-up {
        max-width:90%
    }

    .pop-up-close {
        right: 0
    }

    .scrollWheel {
        bottom: 30px
    }
}

.alwahda__review {
    gap: 15px
}

.alwahda__review a img {
    max-height: 30px
}

.notification {
    position: fixed;
    cursor: pointer;
    right: 20px;
    bottom: 20px;
    border: 1px solid var(--clr-brand);
    border-radius: 50%;
    padding: 10px;
    width: var(--social-link-size);
    height: var(--social-link-size);
    z-index: 999
}

.notification:hover {
    background-color: var(--clr-brand)
}

.notification:hover .bell {
    stroke: var(--clr-text-light)
}

.notification span {
    background: var(--clr-brand);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: -5px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    text-align: center
}

.bell {
    fill: none;
    stroke: var(--clr-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.autocomplete-results {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    display: none;
    z-index: 1000;
    top: 60px
}

.autocomplete-item {
    padding: 8px;
    cursor: pointer;
    color: var(--clr-bg-dark)
}

.autocomplete-item:hover {
    background-color: #f1f1f1
}




#modelsList .card__title {
 margin-left: 20px;
	margin-bottom: 5px;
	color: #fff !important		
}


#modelsList .card__tag {
	 margin-top: 170px;
 margin-left: 20px;
	margin-bottom: 5px;
	color: #fff !important		
}