/* Add custom CSS styles below */ 
:root {
    --font-main: 'Almarai';
    --color-primary: #4a0856;
    --color-primary-dark: #240030;
    --color-primary-light: #702e7c;
    --color-primary-reverse: #ffd4ff;
    --color-breadcrumbs: #f9fafb;
    --color-text-breadcrumbs: #374151;
    --background-color-theme: #ffffff;
    --main-text-color: #5a397f;
    --color-header-main: #ffffff;
    --color-header-text: #000000;
    --color-navbar-main: #ffffff;
    --color-navbar-text: #ffffff;
    --color-submenu-background: #ffffff;
    --color-submenu-text: #000000;
    --color-footer-main: #ffffff;
    --color-footer-text: #000000;
}
  

@media (min-width: 1280px) {
    .s-block--hero-slider .swiper-slide {
        height: 680px;
    }
}
.s-block--hero-slider .swiper-slide {
    position: relative;
    height: 39rem;
}
.prestige-banner-2-2 h3, .prestige-banner-2-2 span {
    color: #ffffff;
    font-size: 24px !important;
}
@media (min-width: 1024px) {
    .lg\:py-4 {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

h3.text-\[var\(--color-primary-reverse\)\].text-xl.text-base.font-semibold {
    display: none;
}
.mobile-menu {
    background-color: #4c0656 !important;
}
.navbar-mobile-menu {
    background-color: #4c0656;
}


footer.bg-\[var\(--color-footer-main\)\].text-\[var\(--color-footer-text\)\].relative.px-12.py-12.md\:py-20.md\:px-20 {
    background: #A483AA;
    color: #4A0856;
}
.prestige-banner-2-2 .prestige-button {
    border-color: unset;
    color: #fff;
}

.prestige-card .img {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
}

.prestige-card .img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#app > div.app-inner.flex.flex-col.min-h-full > div.relative.pt-3.md\:pt-8.container.md\:px-20.mx-auto.prestige-banner-1.block.block > div > div.lg\:col-start-1.lg\:col-end-4.md\:col-end-2.md\:h-80.relative.group.overflow-hidden.lg\:h-80 > div {
    padding-right: 14%;
    text-align: right;
}
.copyright p {
    color: #4A0856 !important;
}

.prestige-features-slider .swiper-slide {
    padding: 2rem;
    background: #F9E8FC;
    border-radius: 8px;
}

#app > footer > div > div > div:nth-child(1) > ul.flex.items-stretch.rtl\:space-x-reverse.space-x-2 > li:nth-child(8) {
    display: none !important;
}