@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-light-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-regular-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-medium-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-semibold-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
	
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
} 
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

html {
font-family: 'Inter', sans-serif;
scroll-behavior:smooth;}

body {
margin: 0;
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.65;
background: #fff;
color: #505050;}
	
:target{scroll-margin-top: 90px;}

@media (max-width: 1199.98px) {html {font-size: 14px;}}
	
h1,h2,h3,h4,h5,h6 {font-family: 'Plus Jakarta Sans', sans-serif;}	
h1, h2, h3{color: #333;}	
h1, h2{text-transform:uppercase !important;}
h1 {
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: 0.15em;}
h2 {
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.1em;}	
h3, .h3,.h4, .h5 {
    font-weight: 300;
	line-height: 1.5;}
.h5 {color: #333;text-transform:uppercase !important;}
p, .p, li {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 1.5rem;
letter-spacing: .05rem;
	color:#505050;}
p a,li a {color:#222;text-decoration:none;}
p a:hover, li a:hover {color:#222;text-decoration:underline;}	
.text-muted,.small-text {color: #666666;}
strong {font-weight: 400;}	
ul {margin-bottom:0;}
li{margin-bottom:0.5rem;}
.rental-intro p {
    font-size: 1.25rem;
}

.link-gold {
    color: #A8894A;
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-gold:hover {
    color: #80652F;
    text-decoration: underline;
}

.gradient {
    background: linear-gradient(
        to bottom,
        #eeeeee 0%,
        #cccccc 100%
    );
}

.btn-gradient {
    background: linear-gradient(
        to bottom,
        #eeeeee 0%,
        #cccccc 100%
    );
    border: 1px solid #bbb;
    color: #505050;
}

.btn-gradient:hover {
    background: linear-gradient(
        to bottom,
        #e0e0e0 0%,
        #bdbdbd 100%
    );
    color: #333;
}

.fullBorder {
    position: relative;
}

.fullBorder .img-fluid {
    display: block;
    width: 100%;
    height: auto;
}

.border-link {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 6px 10px;
    color: #80652f;
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.border-link:hover,
.border-link:focus-visible {
    color: #ffffff;
    background-color: #80652f;
}
/* NAVIGATION ========================================================= */
/* =========================================================
   HEADER - FIRST ROW
   ========================================================= */

.header-top {
    width: 100%;
}

.header-top-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    min-height: 85px;
}

/* LEFT --------------------------------------------------- */

.header-languages {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.header-languages img {
    display: block;
    height: 16px;
    width: auto;
}
/* CENTER ------------------------------------------------- */

/* ================================================================
   LOGO SWAP — TRANSPARENT / SOLID NAVBAR
   ================================================================ */

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-logo img {
    display: block;
    width: 190px;
    height: auto;

    transition: opacity 0.35s ease-in-out;
}

/* Default logo */
.header-logo .logo-default {
    opacity: 1;
}

/* White logo overlays the default logo */
.header-logo .logo-white {
    position: absolute;
    inset: 0;

    opacity: 0;
    pointer-events: none;
}

/* Transparent navbar: show white logo */
.navbar {--bs-navbar-padding-y: 0;}
    
#navbar.navbar-overlay .header-logo .logo-default {
    opacity: 0;
}

#navbar.navbar-overlay .header-logo .logo-white {
    opacity: 1;
}

/* Solid white navbar: show standard logo */
#navbar:not(.navbar-overlay) .header-logo .logo-default {
    opacity: 1;
}

#navbar:not(.navbar-overlay) .header-logo .logo-white {
    opacity: 0;
}
/* RIGHT -------------------------------------------------- */

.header-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
}

.header-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.header-contact-item span {
    font-size: 0.9rem;
}

/* ================================================================
   HEADER CONTACT — SMOOTH COLOUR TRANSITION
   ================================================================ */

/* Default contact styling */
#navbar .header-contact-item {
    color: #222;
    text-decoration: none;

    transition: color 0.45s ease-in-out;
}

/* SVG icons inherit the link colour */
#navbar .header-contact-item svg {
    fill: currentColor;
    transition: fill 0.45s ease-in-out;
}

/* WhatsApp green */
#navbar .whatsapp-contact svg {
    fill: #25D366;
}

/* Transparent navbar: white contact details */
#navbar.navbar-overlay .header-contact-item {
    color: #fff;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

/* Solid navbar: dark contact details */
#navbar:not(.navbar-overlay) .header-contact-item {
    color: #222;
}

/* Optional: subtle hover effect */
#navbar .header-contact-item:hover {
    opacity: 0.75;
}


/* ================================================================
   TRANSPARENT HEADER AT THE TOP OF THE PAGE
   ================================================================ */
/* ================================================================
   FIXED NAVIGATION WITH SMOOTH HEADER TRANSITION
   ================================================================ */
/* Main navbar wrapper */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1050;

background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

transition:
    background-color 0.45s ease-in-out,
    box-shadow 0.45s ease-in-out;
}

/* Transparent header at the top of the page */
#navbar.navbar-overlay {
background-color: transparent;
box-shadow: none;
}

/* Navigation background follows the wrapper */
#navbar .main-navigation {
background-color: transparent;
transition: background-color 0.45s ease-in-out;
}

/* White navigation when scrolled */
#navbar:not(.navbar-overlay) .main-navigation {
background-color: #fff;
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
#navbar,
#navbar .main-navigation {
transition: none !important;
}
}

/* Header row */
#navbar .header-top {
    position: relative;
    max-height: 150px;
    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        visibility 0s linear 0s;
}

/* Header hidden when scrolling down */
#navbar.header-hidden .header-top {
    max-height: 0;
    opacity: 0;
    visibility: hidden;

    transition:
        max-height 0.35s ease,
        opacity 0.2s ease,
        visibility 0s linear 0.35s;
}
/* END Bar itself------------------------------ */

/* ================================================================
   NAVIGATION LINKS — WHITE TO DARK
   ================================================================ */

/* Smooth colour transition */
#navbar .main-navigation .navbar-nav .nav-link {
    font-size: 1rem;
    color: #222;
    transition: color 0.4s ease-in-out;
}

/* Transparent navbar: white links */
#navbar.navbar-overlay .main-navigation .navbar-nav .nav-link {
    color: #fff;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

/* Solid navbar: dark links */
#navbar:not(.navbar-overlay) .main-navigation .navbar-nav .nav-link {
    color: #222;
}

/* Hover effect */
#navbar .main-navigation .navbar-nav .nav-link:hover {
    opacity: 0.75;
}

/* Bootstrap dropdown arrow follows the link colour */
#navbar .main-navigation .dropdown-toggle::after {
    transition: border-top-color 0.4s ease-in-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    #navbar .main-navigation .navbar-nav .nav-link {
        transition: none;
    }
}

/* Pages without a hero image */
#navbar.navbar-light-page {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* Keep the navigation white */
#navbar.navbar-light-page .main-navigation {
    background-color: #fff;
}

/* Navigation links stay dark */
#navbar.navbar-light-page .main-navigation .navbar-nav .nav-link {
    color: #222;
    transition: none;
}

/* Contact details stay dark */
#navbar.navbar-light-page .header-contact-item {
    color: #222;
    transition: none;
}

/* ================================================================
DESKTOP MEGA MENU — SMOOTH OPEN / CLOSE
================================================================ */

@media (min-width: 992px) {
#navbar .mega-menu {
    position: static;
}

/* Mega menu closed */
#navbar .mega-menu-dropdown {
    display: block;

    width: 100%;
    margin: 0;
    padding: 32px 0 36px;

    border: 0;
    border-radius: 0;

    background-color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s;
}

/* Mega menu open */
#navbar .mega-menu.show > .mega-menu-dropdown,
#navbar .mega-menu > .mega-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        visibility 0s;
}

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
#navbar .mega-menu-dropdown {
transition: none !important;
}
}
/* END of OPEN / CLOSE */

/*
 * Keep the actual mega-menu content comfortable rather than
 * stretching across the whole screen.
 */
#navbar .mega-menu-dropdown > .container-fluid {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ----------------------------------------------------------------
   COLUMNS
   ---------------------------------------------------------------- */

#navbar .mega-menu-column {
    padding: 0 20px;
}

#navbar .mega-menu-column + .mega-menu-column {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}/* ----------------------------------------------------------------
   COLUMN TITLES
   ---------------------------------------------------------------- */

#navbar .mega-menu-title {
    margin: 0 0 16px;

    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #777777;
}


/* ----------------------------------------------------------------
   LINKS
   ---------------------------------------------------------------- */

#navbar .mega-menu-dropdown .dropdown-item {
    display: block;

    padding: 5px 0;

    font-size: 0.95rem;
    line-height: 1.45;

    color: #222222;
    background-color: transparent;

    white-space: normal;
}

#navbar .mega-menu-dropdown .dropdown-item:hover,
#navbar .mega-menu-dropdown .dropdown-item:focus {
    color: #000000;
    background-color: transparent;
}
/* ----------------------------------------------------------------
   DIVIDER BEFORE "ALL LA ZAGALETA LISTINGS"
   ---------------------------------------------------------------- */

#navbar .mega-menu-divider {
    height: 1px;
    margin: 14px 0 10px;

    background-color: rgba(0, 0, 0, 0.10);
}


/* Make the complete listings link slightly more prominent */
#navbar .mega-menu-dropdown .mega-menu-all {
    font-weight: 600;
}


/* ----------------------------------------------------------------
   /END MEGA RULES
   ---------------------------------------------------------------- */
@media (min-width: 992px) {

    #navbar .mega-menu > .mega-menu-dropdown {
        display: block !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(10px);

        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    #navbar .mega-menu.show > .mega-menu-dropdown,
    #navbar .mega-menu > .mega-menu-dropdown.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);

        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            visibility 0s;
    }
}


/* HERO ========================================================= */

.hero-villa-kaizen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: #222;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;}
.hero-villa-kaizen.loaded { opacity: 1;}

.hero-overlay,
.hero-overlay a,
.hero-overlay h1,
.hero-overlay h2 { color: #f5f5f5;}
.hero-overlay { width: 90%; bottom: 5em;}

.villa-title {
    padding-top: 0;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.8s;
}
.hero-villa-kaizen.loaded .villa-title {
    opacity: 1;
    transform: translateY(0);
}
.hero-meta {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

/* ========================================================= */
	
.villa-sub {text-shadow: 0 2px 3px rgba(0,0,0,1);}
.villa-subtitle {text-shadow: 0 2px 10px rgba(0,0,0,0.45);}
.villa-micro{
    line-height: 1.2;
	font-size: 1.25rem;
	letter-spacing:0.08em;
	text-shadow: 0 2px 3px rgba(0,0,0,1);
	}
	
.page-links {display:none}
@media (min-width:1200px){
.page-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: var(--page-nav-height);
}
.page-links, .page-links a {
    color: #505050;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
.page-links a:hover {text-decoration: underline;}
	}
	
@media (min-width:992px){.overview{
  background-image: url('/images/body/light-bg-sun.png');
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  padding-left:1.5rem;
}}
.keyfacts p, .keyfacts li {font-size:1.25rem;}
.keyfacts {border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;padding-left:1.5rem;}
	
.mosaic-row {
    display: flex;
    margin: 0 0 5px 0;
    height: 90px;
}
	
.mosaic-row-360 {
    height: 90px;
}
	
.mosaic-row > a {
    height: 100%;
    padding: 0 3px;
}

@media (min-width:992px){
.mosaic-row {
    margin: 0 0 16px 0;
    height: 400px;}
.mosaic-row-360 {
    height: 360px;}
.mosaic-row > a {
    padding: 0 8px;}
}
	
.mosaic-row > a:first-child {
    padding-left: 0;
}
.mosaic-row > a:last-child {
    padding-right: 0;
}
.mosaic-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
	
.carousel-item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 .75em .75em;
    background: #e6e6e6;
    box-sizing: border-box;
}

.img-container {
    position: relative;
    display: inline-block;
	overflow:hidden;
	padding: 1rem !important;
	background-color: #e6e6e6;
}	
.img-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay span{position:absolute;color:#fff;text-align:center;}
.vid{background-color:#e6e6e6;cursor:pointer}
@media (min-width: 767px){.vid{padding:1rem;}}	
footer{background-color:#e6e6e6;}
footer p,footer li{font-size: 1rem}
#videoModal .modal-content {background-color:rgba(255,255,255,.2);border:none;border-radius:0;}
.ratio-9x16 {--bs-aspect-ratio: 177.7778%;}
figcaption {
    padding-top: .75rem;
    font-size: .85rem;
}
.map:before{
  display: inline-block;
  content: ' ';
  background-image: url('/images/body/ico/marker.svg');
  background-size:1rem 1rem;
  background-repeat: no-repeat;
  height:1rem;
  width:1rem;
  margin-right:.25rem
}
/* --------------------------------
   Scroll animations
-------------------------------- */

/* Navbar initial fade-in */
#navbar {
    opacity: 0;
    animation: navbarFadeIn 1.5s ease-in-out forwards;
}
/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    #navbar {
        animation: none;
        opacity: 1;
    }
}


.animate-image,
.animate-title,
.animate-text,
.animate-right {
    opacity: 0;
}

/* Images + headings */
.in-view.animate-image,
.in-view.animate-title {
    animation: fadeIn 1.2s ease forwards;
    animation-delay: var(--delay, 0s);
}

/* Paragraphs, lists, etc. */
.in-view.animate-text {
    animation: fadeUp 1s ease forwards;
    animation-delay: var(--delay, 0s);
}
/* from left */
.in-view.animate-right {
    animation: fadeInRight 1s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes navbarFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
	
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}	
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}