@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');

:root {
    color: var(--colorText);
    font-weight: 300;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.0);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.0);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
    }
}

* {
    --colorPrimaryDeepBlue:var(--colorCustom1);
    --colorPrimaryDeepBlueLight:var(--colorCustom2);
    --colorPrimaryBlue:var(--colorPrimary1);
    --colorPrimaryBlueLight:var(--colorCustom3);
    --colorPrimaryCyan:#C3E6FF;
    --colorPrimaryWhite:#ffffff;

    --colorPrimary1:#21409A;
    --colorPrimary2:#F26522;
    --colorSecondary1:#222222;
    --colorSecondary2:#7F7F7F;
    --colorSecondary3:#85A4C0;
    --colorSecondary4:#73B5B8;
    --colorSecondary5:#FEF6E4;
    --colorSecondary6:#ffffff;
    --colorCustom1:#152860;
    --colorCustom2:#1D3887;
    --colorCustom3:#3760D4;
    --colorCustom4:#7A95E3;


    --colorSecondaryDeepBlueGray: #353E59;
    --colorSecondaryDarkBlueGray: #56648F;
    --colorSecondaryMediumBlueGray: #7B8BBD;
    --colorSecondaryLightBlueGray: #ACBBE8;
    --colorSecondaryPaleBlueGray: #DBE5FF;

    --colorTertiaryRed: #ED1834;
    --colorTertiaryYellow: #FFD400;
    --colorTertiaryBlue: #32ACE7;
    --colorTertiaryTeal: #2AB6A9;
    --colorTertiaryOrange: #FA6609;
    --colorTertiaryPurple: #9C45AE;
    --colorTertiaryGray: #CCCDD5;

    --colorText:var(--colorPrimaryWhite);
    --colorTextDark:var(--colorPrimaryDeepBlue);
    --colorBody: var(--colorPrimaryDeepBlue);
    --colorLink: var(--colorPrimaryCyan);
    --colorLinkOverlay: var(--colorTertiaryYellow);
    --colorHighlight: var(--colorPrimary2);

    --colorError:var(--colorTertiaryRed);
    --colorSuccess:var(--colorTertiaryTeal);

    --gradientPrimary: linear-gradient(30deg, var(--colorPrimary1) 0%, var(--colorCustom1) 100%);

    /* Bg Gradient */
    --colorGradientStart: #000000c0;
    --colorGradientEnd: #00000000;

    /* Header & Footer */
    --colorHeader: transparent;
    --colorFooter: transparent;
    --colorHeaderFooterBorder:transparent;
    --hotspotIconSize: 22px;

    /* Header: Dots for top Navigator */
    --navigatorIconLast: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="12" height="12" rx="6" fill="black" fill-opacity="0.2" stroke="white" stroke-opacity="1" stroke-width="1" /></svg>');
    --navigatorIcon: url('data: image/svg+xml;utf8,<svg width="34" height="14" viewBox="0 0 34 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="14" y="6" width="20" height="1" fill="%23ffffff" /><rect x="1" y="1" width="12" height="12" rx="6" fill="black" fill-opacity="0.2" stroke="white" stroke-opacity="1.5" stroke-width="1" /></svg>');
    --navigatorIconSelected: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="14" rx="7" fill="%23F26522" /></svg>');
    --navigatorIconHovered: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="14" rx="7" fill="%23F26522" /></svg>');



    /* Menu */
    --menuTop: var(--colorWhite);
    --menuBottom: var(--colorPrimaryDeepBlueLight);
    --menuBottomText: var(--colorText);
    --menu1levelBg: var(--colorPrimaryDeepBlue);
    --menu1levelHoverBg: var(--colorPrimary2);
    --menu1levelActive: var(--colorPrimaryDeepBlueLight);
    --menuTextActive: #ffffff;
    --menuTextHover: #ffffff;
    --menuText: #ffffff;

    --menu2levelBg: var(--colorPrimaryDeepBlue);
    --menu2levelHoverBg:var(--colorPrimaryBlue);
    /* Map */


    /* Fonts */
    --fontSerif: "Montserrat", sans-serif;
    --fontSanSerif:"Roboto Slab", sans-serif;

    --fontHeader: var(--fontSerif);
    --fontRegular: var(--fontSanSerif);
    --fontBig: var(--fontSanSerif);

    /* Buttons */
    --buttonGradient: linear-gradient(45deg, var(--colorPrimary1) 30%, var(--colorCustom1) 70%);
    --buttonOverGradient: linear-gradient(30deg, var(--colorPrimary1) 0%, var(--colorCustom1) 100%);
    --buttonOverOutline: 0 0 0 2px rgba(255, 255, 255, 1.2) !important;
    --buttonOverTransition: background-color 0.3s ease, background-position 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border 0.3s ease;
    --buttonSize: 40px;

    /* Filter Colors */
    --colorSold: rgba(255, 0, 0, 1);
    --colorAvailable: #40cd3a;
    --colorReserved: rgba(255, 165, 0,1);
    --colorAvailableFloorPlan: rgba(0, 128, 0, 1);
}

.footer {
    background:  linear-gradient(0deg, #00000040 0%, #00000000 100%);
    border:none;
}
#header {
    background: linear-gradient(180deg, #00000040 0%, #00000000 100%);
    border:none;
}

html,body{
    background-color: var(--colorPrimary1);
    width: 100vw;
    height: 100vh;
}
.mainIframe, .panoContainer, .mapContainer {
    background-color: var(--colorPrimary1);
}
.startScreenLoader {
    background-color: transparent;
}
.blindsScreenNext, .blindsScreenPrev{
    background: var(--gradientPrimary);
    opacity: 0.7;
}
input, textarea {
    font-size:1rem;
    font-family: var(--fontRegular);
}

.buttonPrimary,
.buttonSecondary {
    background-color: var(--colorPrimary1);
}

.buttonSecondary {
    color: white;
    border-radius: 3em;
    /* background: var(--buttonGradient); */
    background-size: 200% 100%;
    background-position: left;
}

body.hasHover .buttonPrimary:hover {
    background-color: var(--colorPrimary2);
}

body.hasHover .buttonSecondary:hover {
    background-position: right;
    background-color: var(--colorPrimary2);
}
.buttonSecondary i, .buttonPrimaryWithText i {
    color: var(--colorWhite);
    transition: all 0.3s cubic-bezier(.74,.11,.2,.88);
}
.buttonSecondary, .buttonPrimaryWithText{
    color: var(--colorWhite);
    width: fit-content;
    height: fit-content;
}
/* Buttons */



/* Headers */
h1, h2, h3, h4, h5, h6{
    font-family: var(--fontHeader);
    margin: 0;
    padding: 0;
    font-weight: 400;
}
h1{
    color:var(--colorWhite);
    font-size: max(3vh, 14px);
}
h2{
    color:var(--colorWhite);
    font-size: max(2.2vh, 13px);
}
h4{
    font-family: var(--fontHeader);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--colorText);
}
/* Headers */


/* Menu */
.topMenuLogo{
    height: 65px;    
}
.menuBottom>div{
    display: flex;
    gap: 1rem;
}
.menuBottom div{
    position: relative;
}
.menuBottom > div > div > div:nth-child(1){
    text-transform: uppercase;
    font-weight: 700;
}
/* Menu */


/* Slide Map-360 */
.slideLeft{
    transform: translateX(-100%);
}
.slideRight{
    transform: translateX(100%);
}
/* Slide Map-360 */

/* Theme fixes */
.leftSide{
    padding-top:1rem;
    padding-bottom:1rem;
}
.rightSide{
    height: auto;
}
.switcherSelector{
    background: linear-gradient(0deg, var(--colorPrimary1) 0%, var(--colorCustom3) 100%);
}

.popupContent{
    padding: 0 !important;
    width: auto;
}
body[data-page-url="contact-us"] .popupContent{
    max-width: 1000px;
}
.popupContent > div{
    color:var(--colorPrimaryWhite);
    background-color: var(--colorPrimary1);
    border-radius: 1rem;
    padding: 2rem;
    overflow-y: auto;
}
.popupContent{
    border-radius: 1rem;
}
.fancybox__container button{
    border:none !important;
}
.popupCloseButton i {
    color:#fff;
}
.fancybox__backdrop {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background-color: #4D93FF80 !important;
    opacity: 1;
}
.f-button{
    background-color: var(--colorPrimary1) !important;
}
.f-button i{
    color:#fff;
}
.f-button:hover{
    background-color: var(--colorPrimary2) !important;
}
.f-button::after{
    background-color: var(--colorPrimary2) !important;
}
.gallery.popupContent, .disclaimerContainer.popupContent{
    background-color: transparent !important;
}
.verticalScreenLocker{
    display: none;
}
.buttonSecondary{
    padding: 0.8em 1em;
    color:var(--colorPrimaryWhite);
}
a.buttonSecondary{
    color:var(--colorPrimaryWhite);
}
.renderLabel{
    font-size: 0.6rem;
}
main[data-page-url="start"]{
    pointer-events: none;
}
.startScreenButton{
    pointer-events: all;
}
.mobileVisible{
    display: none;
}
.switherItem{
    white-space: nowrap;
}
/* Theme fixes */


/* Left side Icons */
.leftBlurBox{
    background-color: #00000020;
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    width: fit-content;
}

.leftBlurBox > div{
    display: flex;
    align-items: center;
    padding: 0.3rem 0;
    gap:1rem;
}
.leftBlurBox > div img{
    width:48px;
    height:48px;
}

/* Left side Icons */