/*!
Theme Name: MaroonFrog Theme
Theme URI: maroonfrog.com
Author: MaroonFrog
Author URI: maroonfrog.com
Description: Created by MaroonFrog.
Version: 1.0.0
Text Domain: maroonfrog
*/

/*
|--------------------------------------------------------------
| >>> TABLE OF CONTENTS
|--------------------------------------------------------------
|
| # Fonts
| # Variables
| # Normalization
| # Accessibility
| # Helper classes
| # Effect classes
| # Custom style
| # Media queries
|
*/

/*
|--------------------------------------------------------------
| Fonts
|--------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
@font-face {font-family: AvenirArabic; src: url(fonts/AvenirArabic-Medium.otf);}
/*
|--------------------------------------------------------------
| Variables
|--------------------------------------------------------------
*/
:root {
    /* 
    | Color variables are defined 
    | in /src/scss/app.scss
    */
    --font-en: 'Poppins';
    --font-ar: 'AvenirArabic';
    --section-spacing-y: 5rem;
}

/*
|--------------------------------------------------------------
| Normalization
|--------------------------------------------------------------
*/
body {
    font-family: var(--font-ar), var(--font-en), serif;
    color: var(--color-1);
    background-color: var(--color-body);
    text-align: right;
}

a {
    color: var(--color-1);
}

p a {
    color: var(--color-4);
}

a[href="#"]:hover {
    cursor: initial;
}

h1, .wpb_text_column h1:last-child {
    margin-bottom: 1.25rem;
}

h2, .wpb_text_column h2:last-child,
h3, .wpb_text_column h3:last-child,
h4, .wpb_text_column h4:last-child,
h5, .wpb_text_column h5:last-child,
h6, .wpb_text_column h6:last-child
p,
ul {
    margin-bottom: 1rem;
}

img {
    height: auto;
    max-width: 100%;
    border-style: none;
}

[src$="svg"] {
    width: 100%;
}

/*
|--------------------------------------------------------------
| Accessibility
|------------------------------------------------------------
*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    right: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

#primary[tabindex="-1"]:focus {
    outline: 0;
}

/*
|--------------------------------------------------------------
| Helper classes
|--------------------------------------------------------------
*/
.list-reset {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hide-text a span:last-child {
    display: none;
}

.font-en {
    font-family: var(--font-en) serif !important;
}

.font-ar {
    font-family: var(--font-ar), var(--font-en), serif !important;
}

.icon-xs,
.vc_single_image-img.attachment-icon-xs {
    height: 16px;
    width: auto;
}

.icon-sm,
.vc_single_image-img.attachment-icon-sm {
    height: 24px;
    width: auto;
}

.icon-md,
.vc_single_image-img.attachment-icon-md {
    height: 32px;
    width: auto;
}

.icon-lg,
.vc_single_image-img.attachment-icon-lg {
    height: 48px;
    width: auto;
}

.icon-xl,
.vc_single_image-img.attachment-icon-xl {
    height: 64px;
    width: auto;
}

.icon-xxl,
.vc_single_image-img.attachment-icon-xxl {
    height: 96px;
    width: auto;
}

.square-xs {
    height: 16px;
    width: 16px;
}

.square-sm {
    height: 24px;
    width: 24px;
}

.square-md {
    height: 32px;
    width: 32px;
}

.square-lg {
    height: 48px;
    width: 48px;
}

.square-xl {
    height: 64px;
    width: 64px;
}

.square-xxl {
    height: 96px;
    width: 96px;
}

.filter-color-1 svg,
img.filter-color-1,
.filter-color-1 img,
.filter-color-1:before,
.filter-lottie-color-1 > .maroonfrog-lottie {
    filter: brightness(0) saturate(100%);
}

.filter-color-2 svg,
img.filter-color-2,
.filter-color-2 img,
.filter-color-2:before,
.filter-lottie-color-2 > .maroonfrog-lottie {
    filter: brightness(0) saturate(100%) invert(1);
}

.filter-color-3 svg,
img.filter-color-3,
.filter-color-3 img,
.filter-color-3:before,
.filter-lottie-color-3 > .maroonfrog-lottie {
    filter: brightness(0) saturate(100%) invert(83%) invert(88%) sepia(21%) saturate(94%) hue-rotate(352deg) brightness(88%) contrast(91%);
}

.filter-color-4 svg,
img.filter-color-4,
.filter-color-4 img,
.filter-color-4:before,
.filter-lottie-color-4 > .maroonfrog-lottie {
    filter: brightness(0) saturate(100%) invert(58%) sepia(32%) saturate(435%) hue-rotate(11deg) brightness(94%) contrast(90%);
}

.filter-color-5 svg,
img.filter-color-5,
.filter-color-5 img,
.filter-color-5:before,
.filter-lottie-color-5 > .maroonfrog-lottie {
    filter: brightness(0) saturate(100%) invert(25%) sepia(40%) saturate(409%) hue-rotate(20deg) brightness(92%) contrast(90%);
}

.w-full {
    width: 100vw;
    padding-left: calc((100vw - 100%) / 2);
    padding-right: calc((100vw - 100%) / 2);
    transform: translateX(50%);
    position: relative;
    left: 50%;
}

.w-full-fluid {
    width: 100vw;
    transform: translateX(50%);
    position: relative;
    right: 50%;
}

.ws-full {
    width: 50vw;
    position: absolute;
    left: 0;
}

.we-full {
    width: 50vw;
    position: absolute;
    right: 0;
}

[class*="separator-"]:before {
    content: "";
    width: 1px;
    height: 16px;
    background: var(--color-1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.separator-end:before {
    left: 0;
}

.separator-start:before {
    right: 0;
}

.shadow-light-lg {
    box-shadow: 0 0 3rem rgb(0 0 0 / 5%) !important;
}

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

.section-spacing-pt {
    padding-top: var(--section-spacing-y) !important;
}

.section-spacing-pb {
    padding-bottom: var(--section-spacing-y) !important;
}

.section-spacing-mt {
    margin-top: var(--section-spacing-y) !important;
}

.section-spacing-mb {
    margin-bottom: var(--section-spacing-y) !important;
}

.border-width-2 {
    border-width: 2px !important;
}

.border-width-3 {
    border-width: 3px !important;
}

[class*="bg-color-1-"],
[class*="bg-color-2-"],
[class*="bg-color-3-"],
[class*="bg-color-4-"],
[class*="bg-color-5-"] {
    position: relative;
}

[class*="bg-color-1-"] > *,
[class*="bg-color-2-"] > *,
[class*="bg-color-3-"] > *,
[class*="bg-color-4-"] > *,
[class*="bg-color-5-"] > * {
    position: relative;
    z-index: 2;
}

[class*="bg-color-1-"]:before,
[class*="bg-color-2-"]:before,
[class*="bg-color-3-"]:before,
[class*="bg-color-4-"]:before,
[class*="bg-color-5-"]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: inherit;
    pointer-events: none;
    z-index: 1;
	opacity: 0.9;
}

/*
|--------------------------------------------------------------
| Animations
|--------------------------------------------------------------
*/
@keyframes shine {
    20% {left: 100%;}
    100% { left: 100%;}
}

@keyframes float {
    0% {transform: translateY(5px);}
    50% {transform: translateY(-5px);}
    100% {transform: translateY(5px);}
}

@keyframes dancingBall {
    0% {margin-left: 8px;}
    50% {margin-left: -8px;}
    100% {margin-left: 8px;}
}

@keyframes show {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes zoomIn {
    0% {transform: scale(1.15);}
}

@keyframes slideDown {
    0% {top: -50%;}
}

@keyframes letterSpacing {
    0% {letter-spacing: -2px;}
    100% {letter-spacing: 2px;}
}

@keyframes rotate {
    2.5% {transform: rotateY(0deg) scale(1.075);}
    15% {transform: rotateY(360deg) scale(1.075);}
    17.5% {transform: rotateY(360deg) scale(1.075);}
    20% {transform: rotateY(360deg) scale(1);}
    100% {transform: rotateY(360deg) scale(1);}
}

@keyframes letterSpacing {
    0% {letter-spacing: -3px;}
    100% {letter-spacing: 3px;}
}

/*
|--------------------------------------------------------------
| Effect classes
|--------------------------------------------------------------
*/
[class*="effect-"] {
    position: relative;
}

.effect-bg-zoom {
    overflow: hidden;
}

.effect-bg-zoom:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: inherit;
    transition: all .4s;
}

.effect-bg-zoom:hover:after {
    transform: scale(1.15);
}

.effect-tiles {
    opacity: 0;
}

.effect-tiles .tiles-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    pointer-events: none;
}

.effect-tiles .tile {
    transition: all 1s; 
    background: #f5f5f3;
    opacity: 1;
    pointer-events: none;
}

.effect-tiles .tile.toggled {
    opacity: 0;
}

.effect-letter-spacing {
    animation: letterSpacing 2.2s forwards;
}

.effect-rotate {
    animation: rotate 12s 2s infinite;
}

.effect-shine {
    position: relative;
    overflow: hidden;
}

.effect-shine:after {
    content: "";
    height: calc(150%);
    width: 100%;
    position: absolute;
    top: -25%;
    left: -150%;
    background: linear-gradient(90deg, white, white 10%, transparent 10%, transparent 30%, white 30%, white, white 80%, transparent 80%, transparent 90%, white 90%);
    transform: rotate(25deg);
    animation: shine 12s infinite;
    opacity: .15;
}

.effect-zoom-in {
    position: relative;
}

.effect-zoom-in > * {
    animation: zoomIn 2s 1 ease-out;
}

.effect-particles > * {
    position: relative;
    z-index: 2;
}

.effect-particles .particles-js-canvas-el {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

[class*="effect-icon-bg"] {
    position: relative;
    padding: 0.5rem;
}

[class*="effect-icon-bg"] > * {
    position: relative;
    z-index: 2;
}

[class*="effect-icon-bg"]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: .65;
}

.effect-icon-bg-1:after {
    background-image: url('img/icon-bg-1.svg');
}

.effect-glass {
    position: relative;
}

.effect-glass:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(255 255 255 / 20%);
    backdrop-filter: blur(5px);
}

.effect-float {
    animation: float 3s infinite;
}

.effect-hover-outline {
    position: relative;
}

.effect-hover-outline:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border: 8px solid var(--color-1);
    border-radius: inherit;
    opacity: 0;
    transition: all .4s;
    pointer-events: none;
}

.effect-bg-animated .maroonfrog-lottie {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.maroonfrog-lottie[data-path$='rings.json'] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 90px);
    width: calc(100% + 90px);
}

.maroonfrog-lottie[data-path$='stars.json'] {
    height: calc(100% + 30px);
    width: calc(100% + 30px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.maroonfrog-lottie[data-path$="shapes.json"] {
    height: calc(100% + 20rem);
    width: calc(100% + 20rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.effect-quote {
    border: 3px solid var(--color-4);
    border-top: none;
}

.effect-quote:after {
    content: "\F027E";
    position: absolute;
    top: -25px;
    right: calc(12% - 25px);
    height: 50px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    font-family: "Material Design Icons";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: inherit;
    animation: float 3s infinite;
}

.effect-quote:before {
    content: "";
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-4) 81%, transparent 81%, transparent 95%, var(--color-4) 90%);
}

.effect-fade-in {
    animation: show 1s;
}

/*
|--------------------------------------------------------------
| Bootstrap Overrides
|--------------------------------------------------------------
*/
.rounded {
    border-radius: .25rem !important;
}

.rounded-1 {
    border-radius: .5rem !important;
}

.rounded-2 {
    border-radius: .75rem !important;
}

.rounded-3 {
    border-radius: 1rem !important;
}

.form-control {
    border-color: var(--color-3);
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: transparent;
    color: var(--color-4);
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 2px 0.15rem var(--color-4);
}

.form-floating>.form-control,
.form-floating>.form-select {
    height: calc(3.8rem + 2px);
}

.form-floating>.form-control:focus, 
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.925rem;
}

.form-control {
    text-align: inherit;
}

/*
|--------------------------------------------------------------
| Visual Composer Overrides
|--------------------------------------------------------------
*/
section,
.vc_section {
    padding-top: 0;
    padding-bottom: var(--section-spacing-y);
}

section:first-child,
.vc_section:first-child {
    padding-top: var(--section-spacing-y);
}

.vc_section.vc_section-has-fill,
.vc_section[class*="bg-color-"],
.vc_section.vc_section-has-fill+.vc_row-full-width+.vc_section, 
.vc_section.vc_section-has-fill+.vc_section,
.vc_section[class*="bg-color-"]+.vc_row-full-width+.vc_section, 
.vc_section[class*="bg-color-"]+.vc_section {
    padding-top: var(--section-spacing-y);
}

.wpb_content_element {
    margin-bottom: 0;
}

.vc_col-has-fill>.vc_column-inner, 
.vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner, 
.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner, 
.vc_row-has-fill>.vc_column_container>.vc_column-inner {
    padding-top: 0;
}

.vc_column_container>.vc_column-inner>.wpb_wrapper {
    height: 100%;
}

/* WPBakery Tabs */
.maroonfrog-tabs .vc_tta-tab>a {
    background: transparent !important;
    color: var(--color-1) !important;
    border: none !important;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.maroonfrog-tabs .vc_tta-tab>a:hover {
    color: var(--color-1) !important;
}

.maroonfrog-tabs .vc_tta-tab.vc_active>a {
    color: var(--color-1) !important;
}

.maroonfrog-tabs .vc_tta-panel-body {
    padding-top: 3rem !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/*
|--------------------------------------------------------------
| Custom Style
|--------------------------------------------------------------
*/
/**
 * Header
 */
.site {
    overflow: hidden;
}

.site-header > * {
    position: relative;
    z-index: 5;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-branding img.custom-logo {
    max-height: 250px;
    width: 100%;
    max-width: 100px !important
}

.custom-logo-link:not(.alternative-logo),
body:not(.home) .custom-logo-link:not(.alternative-logo) {
    display: none;
}

.site-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header .menu {
    position: relative;
}

.site-header .menu li {
    position: relative;
    padding: 0 1rem;
}

.site-header .menu li:focus {
    outline: none;
}

.site-header .menu li a {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.site-header .menu li a > span:first-child {
    margin-right: .5rem;
}

.site-header .menu > li > a {
    text-transform: uppercase;
}

.site-header .menu > li.current-menu-item > a {
    color: var(--color-4);
}

#primary-menu .sub-menu-opener {
    margin-left: .5rem;
    margin-right: .5rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

/**
 * Footer
 */
.site-footer .copyright {
    background-color: #f8f8f8;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
}

.site-footer a {
    color: inherit;
}
.site-footer .menu,
.site-footer .menu ul {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer .menu li {
    position: relative;
}

.site-footer .menu li a:after {
    padding-inline-start: .5rem;
    padding-inline-end: .5rem;
    content: "/";
}

/**
 * Sidebar 
 */
#secondary > * {
    margin-bottom: 2rem;
}

#secondary ul {
    padding-left: 1rem;
    list-style: none;
}

#secondary .search-form {
    display: flex;
    border: 1px solid;
    position: relative;
}

#secondary .search-form > label {
    margin-bottom: 0;
    flex-grow: 1;

}

#secondary .search-form > label > input {
    width: 100%;
    border: none;
}

#secondary .search-form input {
    border: none;
}

#secondary .search-form:after {
    content: "\F0349";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    font-family: 'Material Design Icons';
    pointer-events: none;
}

#secondary .search-form input,
#secondary .search-form:after {
    width: 30px;
}

#secondary .widget-title {
    color: var(--color-1);
    font-size: 1.25rem;
    border-left: 3px solid;
    padding-left: .75rem;
}

/**
 * Home
 */
.splide {
    visibility: visible;
}

.splide .item {
    background-size: cover;
    background-position: center;
}

.splide__arrow {
    z-index: 1;
    background: var(--color-2) !important;
    opacity: .9;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .5;
}

.splide__arrow:hover {
    opacity: 1;
}

.splide__arrow--prev {
    left: 10px !important;
}

.splide__arrow--next {
    right: 10px !important;
    left: initial !important;
}

.section-title > *:first-child {
    margin-bottom: 0;
}

.property-category-slider .item {
    height: 450px;
    position: relative;
}

.property-category-slider .item > * {
    position: relative;
    z-index: 2;
}

.property-category-slider .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(rgb(0 0 0 / 35%), transparent 20%, transparent 80%, rgb(0 0 0 / 35%));
    z-index: 1;
}

.property-slider .thumbnail {
    background-image: url(img/property-default-thumbnail.jpg);
    background-size: cover;
    background-position: center;
    height: 300px;
}

.splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background-color: transparent;
}

.splide__arrow[disabled] {
    opacity: 0;
}

.splide__arrow svg {
    fill: var(--color-1);
    opacity: .35;
}

.splide__arrow--prev {
    left: -100px;
    transform: translateY(-50%) rotate(180deg);
}

.splide__arrow--next {
    right: -100px;
}

/**
 * Other
 */
.banner {
    min-height: 300px;
    background-image: url(img/dubai-skyline.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.banner {
    background-image: url(img/dubai-skyline.jpg);
}

.entry-header.banner {
    width: 100vw;
    padding-top: var(--section-spacing-y);
    padding-bottom: var(--section-spacing-y);
    padding-left: calc((100vw - 100%) / 2);
    padding-right: calc((100vw - 100%) / 2);
    transform: translateX(50%);
    right: 50%;
}

.banner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--color-1);
    opacity: .65;
}

.banner .entry-title {
    color: var(--color-2);
    margin-bottom: 0 !important;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}

.breadcrumbs {
    text-align: center;
    color: var(--color-1);
}

.breadcrumbs a {
    color: inherit;
}

.breadcrumbs a:not(:last-child):after {
    content: "/";
    padding: 0 .5rem;
}

.entry-gallery > .row > .col {
    height: calc(100vh - 111px);
}

.entry-gallery > .row > .col.none {
    height: 300px;
}

.entry-gallery > .row > .col.more:before {
    cursor: pointer;
}

.content-box {
    background-color: var(--color-2);
    padding: 1.5rem;
    box-shadow: 0 0 3rem rgb(0 0 0 / 5%);
    /*margin-bottom: 1.5rem;*/
}

.property-section-title {
    font-size: 1.0625rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.property-sidebar section {
    padding-top: 0;
}

.pagination {
    justify-content: center;
    margin-bottom: var(--section-spacing-y);
}

.page-numbers {
    height: 32px;
    width: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.page-numbers.current {
    border-radius: 50%;
    background: var(--color-4);
    color: var(--color-2);
}

.rooms img {
    opacity: .75;
}

.property-fav.active .mdi-star-outline:before {
    content: "\F04CE";
    color: var(--color-4);
}

.property-fav.active {
    border: 1px solid var(--color-4);
}

.more {
    cursor: pointer;
}

.noUi-tooltip {
    background: none;
    border: 0;
    font-size: .75rem;
    padding: 0;
}

.noUi-handle-lower .noUi-tooltip {
    bottom: -100% !important;
    right: 0;
    transform: initial !important;
}

.noUi-handle-upper .noUi-tooltip {
    bottom: 100% !important;
    right: initial;
    left: 0;
    transform: initial !important;
}

.noUi-connect {
    background: var(--color-5);
}

.noUi-handle {
    border: 1px solid var(--color-5);
    border-radius: 50%;
    height: 25px !important;
    width: 25px !important;
    background: var(--color-2);
    box-shadow: none;
}

.noUi-horizontal {
    height: 2px;
}

.noUi-target {
    background: var(--color-3);
    box-shadow: none;
    border: 0;
}

.noUi-handle:after, .noUi-handle:before {
    display: none;
}

.noUi-handle {
    top: 0 !important;
    left: 0 !important;
    right: initial;
    transform: translate(-50%, -50%);
}

#area {
    padding-left: 12px;
    padding-right: 12px;
}

/*
|--------------------------------------------------------------
| Media queries (min)
|--------------------------------------------------------------
*/
/**
 * sm 
 */
@media (min-width: 576px) {}

/**
 * md 
 */
@media (min-width: 768px) {
    #menu-footer > li {
        flex-basis: 0%;
    }
}

/**
 * lg 
 */
@media (min-width: 992px) {}

/**
 * xl 
 */
@media (min-width: 1200px) {}

/**
 * xxl 
 */
@media (min-width: 1400px) {
    /**
     * Magic indicator
     */
    .indicator {
        position: absolute !important;
        pointer-events: none;
        height: 100%;
        /*bottom: -.25rem;*/
        left: 0;
        overflow: hidden;
        padding: 0 !important;
    }

    .site-header .menu .indicator {
        margin: 0 1rem;
    }

    .site-header .menu .indicator:before {
        position: absolute;
        bottom: 4px;
        right: 25%;
        content: "";
        width: 50%;
        height: 2px;
        background: var(--color-4);
        border-radius: 50px;
    }

    .effect-tabs-indicator .indicator {
        background-color: transparent !important;
        border-bottom: 3px solid var(--color-3-dark) !important;
    }

    .effect-tabs-indicator .vc_tta-tab {
        margin: 0 !important;
    }

    .home .site-header {
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .home .header-container {
        background: linear-gradient(180deg, rgb(255 255 255 / 50%), transparent);
    }

    body:not(.home) .site-header {
        align-items: center;
    }

    .site-header .menu {
        display: flex;
        justify-content: flex-end;
        height: 100%;
    }

    .site-header .menu li {
        display: flex;
        align-items: center;
    }

    .site-header .menu ul {
        display: none;
        position: absolute;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .site-header .menu > li > ul {
        position: absolute;
        top: 100%;
        right: 0;
        width: 200px;
        border-radius: 5px;
        overflow: hidden;
        font-size: .875rem;
    }

    .site-header .menu > li > ul:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: var(--color-2);
        opacity: .95;
        box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    }

    .site-header .menu > li > ul ul {
        right: 100%;
        top: 0;
    }

    .site-header .menu li:hover > ul {
        display: block;
    }

    .site-header .menu > li > a:hover:before {
        width: 2rem;
    }

    .site-header .menu li a {
        padding: .25rem 0;
        color: inherit;
    }

    #primary-menu .sub-menu-opener {
        position: initial;
        width: initial;
        margin-inline-end: 0;
    }

    .custom-logo-link:not(.alternative-logo) {
        display: block;
    }

    .home .alternative-logo {
        display: none;
    }
}

/*
|--------------------------------------------------------------
| Media queries (max)
|--------------------------------------------------------------
*/
/**
 * xxl 
 */
@media (max-width: 1399px) {
    .site-header .menu li a {
        justify-content: center;
        padding: .35rem 0;
    }

    .site-header .menu > li.active {
        color: var(--color-5);
    }

    .site-branding {
        justify-content: center;
    }
}

/**
 * xl 
 */
@media (max-width: 1199px) {}

/**
 * lg 
 */
@media (max-width: 991px) {}

/**
 * md 
 */
@media (max-width: 767px) {}

/**
 * sm 
 */
@media (max-width: 575px) {
    :root {
        --section-spacing-y: 3rem !important;
    }

    .property-category-slider .item {
        height: 300px;
    }
}