/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* ==========================================================
   TYPOGRAPHY RULES
========================================================== */

/*
Body text:
Desktop / Tablet : 18px
Small phones (<480px): 16px

We NEVER reduce below 16px.
Layouts must adapt to typography, not vice versa.
*/



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

:root {
	
	/* Typography */

    --fs-body:1.8rem;

    --fs-h1:9.6rem;
    --fs-h2:4.2rem;
    --fs-h3:3.4rem;
	--fs-h4:2.8rem;
	--fs-h5:2.2rem;
	--fs-h6:1.6rem;

	/* Colors */
	
    --footer-bg: #a18672;
    --primary-color: #a08673;
    --secondary-color: #edddd1;
    --bg-alt-01: #edddd1;
    --text-color: #000000;
    --white-color: #ffffff;
    --black-color: #000000;
	--section-bg:#F3E7DC;
	--section-alt-bg:#EFE3D8;
    --menu-vertical-offset: -208px;
	
}


* {
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}


@font-face {
    font-family: "Generica";
    src: url("fonts/Generica.woff") format('woff');
}

@font-face {
    font-family: "Generica-Bold";
    src: url("fonts/Generica-Bold.woff") format('woff');
}


/********************************
-----------FOUNDATION-------------
*********************************/

html {
	font-size: 62.5%;
}

body, {
	font-size:var(--fs-body);
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Ubuntu', "Helvetica Neue", sans-serif;
	line-height: 1.55;
    font-weight: 400;
}

h1, h2, h3, h4, h5 {
	font-family: "Generica", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Ubuntu', "Helvetica Neue", sans-serif;
}

h6 {
	font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Ubuntu', "Helvetica Neue", sans-serif;
    font-weight: 600;
	font-size: var(--fs-h6);
}

h1 {
    font-size:var(--fs-h1);
}

h2 {
    font-size:var(--fs-h2);
}


h3 {
    font-size:var(--fs-h3);
}

p {
	font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Ubuntu', "Helvetica Neue", sans-serif;
	font-size: var(--fs-body);
	font-weight: 200;
}

.pebble-button {
    display: inline-block;
    height: 45px !important;
    line-height: 45px !important;
    border-radius: 25px;
    text-align: center;
    padding: 0 20px;
    margin-top: 15px;
    font-size: var(--fs-h6);
    background: var(--primary-color);
    color: var(--white-color);
    border: solid 1px transparent;
    transition: all 500ms ease-out;
}

.pebble-button:hover {
    background: var(--white-color);
    color: var(--primary-color);
    border: solid 1px var(--primary-color);
	cursor: pointer;
}

.villa-button {
	display: inline-block;
    height: 4.5rem;
    border-radius: 25px;
    text-align: center;
    font-size: var(--fs-h6);
    border: solid 1px transparent;
    transition: all 500ms ease-out;
	cursor: pointer;
}

.villa-button.et_pb_bg_layout_light.et_pb_module.et_pb_button {
	font-weight: 200;
	padding: 0 2rem;
	line-height: 4.5rem !important;
	color: var(--white-color);
	background: var(--primary-color);
}

.villa-button.et_pb_bg_layout_light.et_pb_module.et_pb_button:hover {
	background: var(--white-color);
	border: solid 1px var(--primary-color);
	color: var(--primary-color);
}

.villa-button.et_pb_button:after {
    content:none;
}

.villa-button {
	display: none;
}

.contact-links{
    color: #000;
    text-decoration: none;
  }
  
.contact-links:visited {
    color: #000;
    text-decoration: none;
  }
.contact-links:hover {
    color: #A18672;
    text-decoration: none;
  } 
	

/********************************************
-------------Desktop Pebbles-----------------
********************************************/

#pebble-01-left {
	min-width: 600px;
	max-width: 700px;
}

#pebble-01-left .pebble-01-left-text {
	min-height:693px;
	display:flex;
	flex:1;
	justify-content:center;
	align-items:center;
	padding:0 100px;
}

#pebble-02-left {
	min-width: 600px;
	max-width: 700px;
}

#pebble-02-left .pebble-02-left-text {
	min-height:600px;
	left: -10px;
	display:flex;
	flex:1;
	justify-content:center;
	align-items:center;
	padding:0;
	max-width: 400px;
}

#signature-hospitality {
	min-height: 70vh;
	align-items: center;
	justify-content: center;
}
#sp-signature-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 6rem);
}

#sp-signature-section .signature-image {
    flex: 0 1 750px;
    width: clamp(280px, 32vw, 750px);
}

#pebble-03-left {
	position: relative;
	width: clamp(580px, 42vw, 760px);
	min-width: 580px;
	aspect-ratio: 760 / 430;
}

#pebble-03-left .pebble-03-left-brown,
#pebble-03-left .pebble-03-left-white {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#pebble-03-left .pebble-03-left-text {
  position: absolute;
	left: 20%;
	top: 28%;
	width: 63%;
	z-index: 2;
}

/********************************************
-----------Desktop Pebbles end---------------
********************************************/

/************* 
 * Startpage *
 * ***********/

/* Slider */

h1, h2, h3,
.sp-hero-slider .et_pb_slide_description {
    text-wrap: balance;
}
body .sp-hero-slider .et_pb_slide_description {
	padding: 16% 6%;
}

.sp-hero-slider {
	height: 100vh;
}

.mk-logo-content {
	margin-top: 90px;
	transform: scale(2.2);
}

.sp-first-par p {
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 200;
}

.soulofplace-image1 {
	margin-bottom:40px;	
}

#sp-thevillas-section .pebble-02-left-text .et_pb_text_inner h2{
	font-size: var(--fs-h2);
}

#signature-hospitality-section {
	
}

#location-slider .location-box .et_pb_slide_description {
	position: absolute;
	top:88px;
	right: -60px;
	background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}
.soulofplace-image2.et_pb_image_2.et_pb_image {
    margin-left: -50px;
    margin-right: 50px;	
}

/************ MAP **************/
#sp-location-cta {
	position: absolute;
	z-indeX: 4;
	top: 80px;
	right: 50px;
}

/********** Footer ***********/
.et-l--footer .et_pb_icon_3_tb_footer .et_pb_icon_wrap .et-pb-icon {
    bottom: 2px;
}

#get-direct {
	padding-top: 15px;
}

/* ==========================================================
The Villas Page - The Villas Section
========================================================== */

#the-villas-section {
    position: relative;
    overflow: hidden;
    background: var(--section-bg);
}

#the-villas-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 4vw, 6rem);
}

/* Left column */

.the-villas-lc {
    position: relative;
    z-index: 4;
    flex: 0 1 clamp(56rem, 42vw, 78rem);
	max-width: 78rem;
}


.the-villas-left-image img {
    display: block;
    width: clamp(60rem, 48vw, 92rem);
    max-width: 700px;
    height: auto;
    border-radius: 10px;

    opacity: 0;
    transform: translateX(-36px);
    animation: villas-image-in 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

/* Right column artwork */

.the-villas-rc {
    position: relative;
    flex: 0 0 clamp(640px, 52vw, 840px);
    min-width: 640px;
    aspect-ratio: 1 / 1;
}

/* Brown pebble */
.the-villas-rc::before {
    content: "";
    position: absolute;
    inset: 0;
    
    background: url("/wp-content/themes/divi-child/pebbles/p4-brown-right.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(18px) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: villas-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.the-villas-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p4-white-right.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(18px) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: villas-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

/* Text */

.the-villas-p4-right-text {
    position: absolute;
    left: 21%;
    top: 20%;
    width: 56%;
    max-width: 520px;
    z-index: 3;
}

.the-villas-p4-right-text h2 {
    margin-bottom: clamp(2rem, 3vw, 3rem);
}


/* Animation */

.the-villas-p4-right-text p {
    opacity: 0;
    transform: translateY(2.4rem);
    filter: blur(.4rem);
    animation: villas-text-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

.the-villas-p4-right-text .pebble-button {
    opacity: 0;
    transform: translateY(1.8rem);
    animation: villas-text-in .75s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .95s;
}

.the-villas-p4-right-text h2 {
    opacity: 0;
    transform: translateY(2rem);
    filter: blur(.3rem);
    animation: villas-text-in .85s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .55s;
}

@keyframes villas-pebble-in {
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes villas-image-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes villas-text-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* ==========================================================
The Villas Page - Aegean Crest Section
========================================================== */

#aegean-crest-section {
    position: relative;
    padding-top:0;
    padding-bottom:0;
    overflow: hidden;
    background: var(--section-alt-bg);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content:center;
	padding-block:clamp(4rem,5vh,7rem);
}

#aegean-crest-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
	margin: auto;
}

/* Left pebble artwork */

.aegean-crest-lc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.aegean-crest-lc::before,
.aegean-crest-lc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

.aegean-crest-lc::before {
    background-image: url("/wp-content/themes/divi-child/pebbles/p5-brown-left.svg");
    z-index: 1;
    opacity: 0;
    transform: translateY(1.8rem) rotate(45deg) scale(.97);
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.aegean-crest-lc::after {
    background-image: url("/wp-content/themes/divi-child/pebbles/p5-white-left.svg");
    z-index: 2;
    opacity: 0;
    transform: translateY(1.8rem) rotate(45deg) scale(.97);
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.aegean-crest-p5-left-text {
    left: 17%;
    top: 29%;
    width: 78%;
    z-index: 3;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    .aegean-crest-p5-left-text {
        top: 190px;
    }
}

.aegean-crest-p5-left-text h2 {
    margin-bottom: 1rem;
}

.aegean-crest-p5-left-text p {
    line-height: 1.45;
}

/* Right column */

.aegean-crest-rc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.aegean-crest-right-image,
.aegean-crest-legend {
    width: 100%;
}

.aegean-crest-right-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;

    opacity: 0;
    transform: translateX(3.6rem);
    animation: iw-image-in-right 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

/* Animations */

@keyframes iw-pebble-in {
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes iw-image-in-right {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/********* Villa Legend Component ********/

.aegean-crest-legend{
    width:100%;
    margin-top:2.8rem;

    opacity:0;
    transform:translateY(2rem);

    animation:iw-legend-in .9s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:.75s;
}


.aegean-crest-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

.villa-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;

    border-top: 1px solid rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(0, 0, 0, .25);

    color: #72675f;
    font-size: 1.6rem;
    line-height: 1.25;
}

.villa-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;

    min-height: 7.4rem;
    padding: 1.2rem 1.4rem;

    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .18);

    transition: background .35s ease;
}

.villa-legend-item:hover {
    background: rgba(255, 255, 255, .22);
}

.villa-legend-item img {
    width: 2.9rem;
    height: 2.9rem;
    min-width: 2.9rem;
    object-fit: contain;
    opacity: .88;
}

.villa-legend-item span {
    display: block;
}

.villa-legend-area {
    grid-column: auto;
}

.villa-legend-area span {
    font-size: 1.7rem;
    font-weight: 500;
}

.villa-legend-item:nth-child(4) {
    border-right: 0;
}

.villa-legend-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;

    min-height: 5.8rem;
    padding: 1.2rem 2rem;
    gap: 1.4rem;

    border-top: 1px solid rgba(0, 0, 0, .2);
    border-right: 0;
}

.villa-legend-wide img {
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
}

@keyframes iw-legend-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   The Villas Page - Azure Vista Section
========================================================== */

#azure-vista-section {
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 5vh, 7rem);
	background:var(--section-bg);
}

#azure-vista-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
    margin: auto;
}

/* Left column */

.azure-vista-lc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.azure-vista-left-image,
.azure-vista-legend {
    width: 100%;
}

.azure-vista-left-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;

    opacity: 0;
    transform: translateX(-3.6rem);
    animation: azure-image-in-left 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

.azure-vista-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

/* Right pebble artwork */

.azure-vista-rc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.azure-vista-rc::before,
.azure-vista-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

/* Brown pebble */
.azure-vista-rc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p6-brown-right.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.azure-vista-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p6-white-right.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.azure-vista-text {
    position: absolute;
    left: 22%;
    top: 28%;
    width: 64%;
    z-index: 5;
}

.azure-vista-text h2 {
    margin-bottom: 1rem;
}

.azure-vista-text p {
    line-height: 1.45;
}

/* Animation */

@keyframes azure-image-in-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================
   The Villas Page - Azure Peak Villa
========================================================== */

#azure-peak-section {
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 5vh, 7rem);
	background:var(--section-alt-bg);
}

#azure-peak-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
    margin: auto;
}

/* Right column */

.azure-peak-rc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.azure-peak-right-image,
.azure-peak-legend {
    width: 100%;
}

.azure-peak-right-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    opacity: 0;
    transform: translateX(-3.6rem);
    animation: azure-image-in-right 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

.azure-peak-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

/* Left pebble artwork */

.azure-peak-lc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.azure-peak-lc::before,
.azure-peak-lc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

/* Brown pebble */
.azure-peak-lc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p7-brown-right.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.azure-peak-lc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p7-white-right.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.azure-peak-text {
    position: absolute;
    left: 22%;
    top: 24%;
    width: 60%;
    z-index: 5;
}

.azure-peak-text h2 {
    margin-bottom: 1rem;
}

.azure-peak-text p {
    line-height: 1.45;
}

/* Animation */

@keyframes azure-image-in-right {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================
   The Villas Page - Azure Haven Section
========================================================== */

#azure-haven-section {
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 5vh, 7rem);
	background:var(--section-bg);
}

#azure-haven-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
    margin: auto;
}

/* Left column */

.azure-haven-lc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.azure-haven-left-image,
.azure-haven-legend {
    width: 100%;
}

.azure-haven-left-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;

    opacity: 0;
    transform: translateX(-3.6rem);
    animation: azure-image-in-left 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

.azure-haven-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

/* Right pebble artwork */

.azure-haven-rc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.azure-haven-rc::before,
.azure-haven-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

/* Brown pebble */
.azure-haven-rc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p8-brown-right.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.azure-haven-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p8-white-right.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.azure-haven-text {
    position: absolute;
    position: absolute;
    left: 14%;
    top: 22%;
    width: 69%;
    z-index: 5;
}

.azure-haven-text h2 {
    margin-bottom: 1rem;
}

.azure-haven-text p {
    line-height: 1.45;
}

/* Animation */

@keyframes azure-image-in-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================
   The Villas Page - Infinity Edge Villa
========================================================== */

#infinity-edge-section {
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 5vh, 7rem);
	background:var(--section-alt-bg);
}

#infinity-edge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
    margin: auto;
}

/* Right column */

.infinity-edge-rc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.infinity-edge-right-image,
.infinity-edge-legend {
    width: 100%;
}


.infinity-edge-right-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    opacity: 0;
    transform: translateX(-3.6rem);
    animation: azure-image-in-right 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

.infinity-edge-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

/* Left pebble artwork */

.infinity-edge-lc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.infinity-edge-lc::before,
.infinity-edge-lc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

/* Brown pebble */
.infinity-edge-lc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p9-brown-left.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.infinity-edge-lc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p9-white-left.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.infinity-edge-text {
    position: absolute;
    left: 20%;
    top: 26%;
    width: 72%;
    z-index: 5;
}

.infinity-edge-text h2 {
    margin-bottom: 1rem;
}

.infinity-edge-text p {
    line-height: 1.45;
}

/* Animation */

@keyframes azure-image-in-right {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* ==========================================================
   The Villas Page - Infinity Rise Section
========================================================== */

#infinity-rise-section {
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 5vh, 7rem);
	background:var(--section-bg);
}

#infinity-rise-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(94vw, 184rem);
    max-width: 184rem;
    margin: auto;
}

/* Left column */

.infinity-rise-lc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 clamp(76rem, 52vw, 104rem);
    max-width: 104rem;
    width: 100%;
    z-index: 4;
}

.infinity-rise-left-image,
.infinity-rise-legend {
    width: 100%;
}

.infinity-rise-left-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;

    opacity: 0;
    transform: translateX(-3.6rem);
    animation: azure-image-in-left 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .35s;
}

.infinity-rise-legend {
    width: 100%;
    margin-top: 3rem;

    opacity: 0;
    transform: translateY(2rem);
    animation: iw-legend-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .75s;
}

/* Right pebble artwork */

.infinity-rise-rc {
    position: relative;
    z-index: 3;
    flex: 0 0 clamp(58rem, 38vw, 76rem);
    min-width: 58rem;
    aspect-ratio: 1 / 1;
}

.infinity-rise-rc::before,
.infinity-rise-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform-origin: center;
}

/* Brown pebble */
.infinity-rise-rc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p4-brown-right.svg") center / contain no-repeat;
    z-index: 1;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* White pebble */
.infinity-rise-rc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/wp-content/themes/divi-child/pebbles/p4-white-right.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;

    opacity: 0;
    transform: translateY(1.8rem) rotate(-45deg) scale(.97);
    transform-origin: center;
    animation: iw-pebble-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .2s;
}

.infinity-rise-text {
    position: absolute;
    left: 16%;
    top: 17%;
    width: 73%;
    z-index: 5;
}

.infinity-rise-text h2 {
    margin-bottom: 1rem;
}

.infinity-rise-text p {
    line-height: 1.45;
}

/* Animation */

@keyframes azure-image-in-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* Villa Infinity Edge/Infinity Rise - Legend 3 Column adjustment */

.villa-legend.villa-legend-3cols {
    grid-template-columns: repeat(3, 1fr);
}

.villa-legend.villa-legend-3cols .villa-legend-item:nth-child(3) {
    border-right: 0;
}

.villa-legend.villa-legend-3cols .villa-legend-wide {
    grid-column: 1 / -1;
}

/* ==========================================================
The Villas Page - Amenities Section
========================================================== */

#amenities-section { 
	background: var(--section-alt-bg);
}

@media (max-width: 1450px) {
	
	/*********** Startpage - The Villas Section *************/
    .the-villas-rc {
        flex: 0 0 clamp(660px, 58vw, 820px);
        min-width: 660px;
        aspect-ratio: 1 / 1;
    }

    .the-villas-p4-right-text {
        left: 22%;
        top: 18%;
        width: 54%;
        max-width: 500px;
    }

    .the-villas-p4-right-text p {
        font-size: 1.8rem;
        line-height: 1.38;
    }

    .the-villas-p4-right-text h2 {
        margin-bottom: 2rem;
    }
	
	/*********** The Villas - Aegean Crest Villas *************/
	
	#aegean-crest-row{
        gap:clamp(3rem,3vw,5rem);
        width:min(96vw,168rem);
    }

    .aegean-crest-lc{
        flex:0 0 clamp(54rem,40vw,68rem);
        min-width:54rem;
    }

    .aegean-crest-p5-left-text{
        left: 14%;
        top: 17%;
        width: 78%;
    }

    .aegean-crest-p5-left-text p{
        line-height:1.35;
    }

    .aegean-crest-rc{
        flex:0 0 clamp(62rem,50vw,88rem);
        max-width:88rem;
    }

	.the-villas-left-image{
        padding-left:clamp(2rem,2vw,4rem);
    }
	
    .villa-legend{
        font-size:1.5rem;
    }

    .villa-legend-item{
        min-height:6.8rem;
        padding:1rem 1.2rem;
    }

    .villa-legend-wide{
        min-height:5rem;
    }
	
	
	/*********** The Villas - Azure Vista Villas *************/
	
	 #azure-vista-row{
        width:min(94vw,140rem);
        gap:clamp(2.5rem,3vw,4.5rem);
    }

    .azure-vista-lc{
        flex:0 0 clamp(52rem,44vw,66rem);
        max-width:66rem;
    }

    .azure-vista-left-image img{
        width:100%;
        display:block;
    }

    .azure-vista-legend{
        width:100%;
        margin-top:2rem;
    }

    .azure-vista-rc {
        flex: 0 0 clamp(56rem, 44vw, 72rem);
        min-width: 56rem;
        aspect-ratio: 1 / 1;
        overflow: visible;
    }
	
	.azure-vista-rc::before,
	.azure-vista-rc::after{
 		background-size: contain;

	}
	
    .azure-vista-text{
        left:19%;
        top:22%;
        width:64%;
    }
	
	/*********** The Villas - Azure Peak Villas *************/
	/*********** The Villas - Azure peak Villas *************/
	
	 #azure-peak-row{
        width:min(94vw,140rem);
        gap:clamp(2.5rem,3vw,4.5rem);
    }

    .azure-peak-rc{
        flex:0 0 clamp(52rem,44vw,66rem);
        max-width:66rem;
    }

    .azure-peak-right-image img{
        width:100%;
        display:block;
    }

    .azure-peak-legend{
        width:100%;
        margin-top:2rem;
    }

    .azure-peak-lc {
        flex: 0 0 clamp(56rem, 44vw, 72rem);
        min-width: 56rem;
        aspect-ratio: 1 / 1;
        overflow: visible;
    }
	
	.azure-peak-lc::before,
	.azure-peak-lc::after{
 		background-size: contain;

	}
	
    .azure-peak-text{
        left:19%;
        top:22%;
        width:64%;
    }
	
	/*********** The Villas - Azure Haven Villas *************/
	
	 #azure-haven-row{
        width:min(94vw,140rem);
        gap:clamp(2.5rem,3vw,4.5rem);
    }

    .azure-haven-lc{
        flex:0 0 clamp(52rem,44vw,66rem);
        max-width:66rem;
    }

    .azure-haven-left-image img{
        width:100%;
        display:block;
    }

    .azure-haven-legend{
        width:100%;
        margin-top:2rem;
    }

    .azure-haven-rc {
        flex: 0 0 clamp(56rem, 44vw, 72rem);
        min-width: 56rem;
        aspect-ratio: 1 / 1;
        overflow: visible;
    }
	
	.azure-haven-rc::before,
	.azure-haven-rc::after{
 		background-size: contain;

	}
	
    .azure-haven-text{
        left:19%;
        top:22%;
        width:64%;
    }
	
	
}


@media (max-width: 1350px) {

	#pebble-01-left  .pebble-01-left-text {
		padding:0 75px;
	}
	
	#the-soul-of-place-section {
		--flex-direction: unset;
	} 
	
	.soulofplace-image1 {
		margin-top: -150px;
	}
	
	#sp-signature-section {
		--flex-direction: unset;
	}
	.infinity-rise-text {
		left: 13%;
		top: 17%;
		width: 71%;
	}
}


/* Tablet */

@media (max-width: 1250px) {
	
	:root{
		--fs-h1:5.6rem;
		--fs-h2:4.2rem;
		--fs-h3:3rem;
    }
	
	/**********************************
	 ----------- Startpage ------------
	**********************************/
	
	#the-soul-of-place-section > b {
		margin-bottom: 100px;
	}
	.mk-logo-content {
		position: relative;
		transform: translate(0, -50%) scale(1.2);
	}
	
	.soulofplace-image2.et_pb_image_2.et_pb_image {
		margin-left: 50px;
		margin-right: -50px;
	}
	
	#sp-thevillas-section {
		min-height: 75vh;
	}
	
	#sp-thevillas-section .et_pb_row_3.et_pb_row  {
		    margin-top: -150px !important;
			margin-bottom:150px;
	}
	
	.sp-image-hospitality {
		position: relative;
		z-index: 5;
		max-width:90%;
	}
	#pebble-03-left {
		position: relative;
    	z-index: 1;
	}
	
	.amenities-row1 {
		flex-direction: column;
	}
	
	/********************************************************
	 --------- The Villas Page / The Villas Section ---------
	********************************************************/
	
 	#the-villas-row{
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    /* ---------- IMAGE ---------- */

    #the-villas-row {
        position: relative;
    }

    .the-villas-lc {
        order: 1;
        position: relative;
        z-index: 2;

        width: 100%;
        flex: 0 0 clamp(49rem, 42vw, 76rem);
        justify-content: center;
    }
	
	.the-villas-rc {
        flex: 0 0 clamp(660px, 66vw, 82rem);
        min-width: 660px;
        aspect-ratio: 1 / 1;
    }

    .the-villas-left-image {
		padding-left: unset;
        position: relative;
        z-index: 2;
    }

    .the-villas-left-image img {
		width: min(92vw, 72rem);
		max-width: 72rem;
        margin-inline: auto;
    }


    /* ---------- PEBBLE ---------- */
	
	.the-villas-rc {
        order: 2;
        position: relative;
        z-index: 10;

        margin-top: clamp(-18rem, -14vw, -10rem);
        margin-left: clamp(-8rem, -5vw, -3rem);
    }

    .the-villas-rc::before,
    .the-villas-rc::after,
    .the-villas-p4-right-text {
        position: absolute;
        z-index: inherit;
    }

    .the-villas-rc::before {
        z-index: 11;
    }

    .the-villas-rc::after {
        z-index: 12;
    }



    /* ---------- TEXT ---------- */
	.the-villas-p4-right-text {
        z-index: 13;
		left: 16%;
        top: 19%;
        width: 74%;
    }
	
	
	/********************************************************
	 --------- The Villas Page / Aegean Crest Villa ---------
	********************************************************/
	
	#aegean-crest-row{
		gap:0;
	}
	
	#aegean-crest-row {
		flex-direction: column;
		align-items: center;
		width:min(92vw,104rem);
		gap: 0;
	}

	.aegean-crest-rc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.aegean-crest-right-image {
		width: 100%;
		max-width: 100%;
	}
	
	.aegean-crest-legend {
		width:min(92vw,96rem);
    	margin:2.4rem auto 0;
	}

	
	.aegean-crest-right-image,
	.aegean-crest-right-image .et_pb_image_wrap,
	.aegean-crest-right-image img,
	.aegean-crest-legend {
		display: block;
		width: 100%;
		max-width: none;
	}
	
	.aegean-crest-right-image {
		text-align: initial;
	}
	
	.aegean-crest-legend {
		margin-top: 3rem;
	}

	.aegean-crest-lc {
		order: 2;
		width:min(90vw,78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top:-2rem;
		margin-inline:auto;
		margin-left: 0;
		z-index: 4;
	}

	.aegean-crest-p5-left-text {
		left:23%;
		top:28%;
		width:65%;
	}
	
	/********************************************************
	 --------- The Villas Page / Azure Vista Villa ----------
	********************************************************/

	#azure-vista-row {
		flex-direction: column;
		align-items: center;
		width: min(92vw, 104rem);
		gap: 0;
	}

	.azure-vista-lc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.azure-vista-left-image,
	.azure-vista-left-image .et_pb_image_wrap,
	.azure-vista-left-image img,
	.azure-vista-legend {
		display: block;
		width: 100%;
		max-width: none;
	}

	.azure-vista-legend {
		margin-top: 3rem;
	}

	.azure-vista-rc {
		order: 2;
		width: min(90vw, 78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top: -2rem;
		margin-inline: auto;
		z-index: 4;

		position: relative;
		left: clamp(2rem, 3vw, 4rem);
	}
	
	.azure-vista-text {
		left: 22%;
		top: 35%;
		width: 62%;
	}
	
	/********************************************************
	 --------- The Villas Page / Azure Peak Villa ----------
	********************************************************/

	#azure-peak-row {
		flex-direction: column;
		align-items: center;
		width: min(92vw, 104rem);
		gap: 0;
	}

	.azure-peak-rc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.azure-peak-right-image,
	.azure-peak-right-image .et_pb_image_wrap,
	.azure-peak-right-image img,
	.azure-peak-legend {
		display: block;
		width: 100%;
		max-width: none;
	}

	.azure-peak-legend {
		margin-top: 3rem;
	}

	.azure-peak-lc {
		order: 2;
		width: min(90vw, 78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top: -5rem;
		margin-inline: auto;
		z-index: 4;
		margin-left: clamp(-4rem, -3vw, -2rem)
	}

	.azure-peak-text {
		left: 22%;
		top: 26%;
		width: 60%;
	}
	
	/********************************************************
	 --------- The Villas Page / Azure Haven Villa ----------
	********************************************************/

	#azure-haven-row {
		flex-direction: column;
		align-items: center;
		width: min(92vw, 104rem);
		gap: 0;
	}

	.azure-haven-lc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.azure-haven-left-image,
	.azure-haven-left-image .et_pb_image_wrap,
	.azure-haven-left-image img,
	.azure-haven-legend {
		display: block;
		width: 100%;
		max-width: none;
	}

	.azure-haven-legend {
		margin-top: 3rem;
	}

	.azure-haven-rc {
		order: 2;
		width: min(90vw, 78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top: -2rem;
		margin-inline: auto;
		z-index: 4;

		position: relative;
		left: clamp(2rem, 3vw, 4rem);
	}
	
	.azure-haven-text {
        left: 17%;
        top: 27%;
        width: 63%;
	}
	
	/********************************************************
	 -------- The Villas Page / Infinity Edge Villa ---------
	********************************************************/

	#infinity-edge-row {
		flex-direction: column;
		align-items: center;
		width: min(92vw, 104rem);
		gap: 0;
	}

	.infinity-edge-rc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.infinity-edge-right-image,
	.infinity-edge-right-image .et_pb_image_wrap,
	.infinity-edge-right-image img,
	.infinity-edge-legend {
		display: block;
		width: 100%;
		max-width: none;
	}

	.infinity-edge-legend {
		margin-top: 3rem;
	}

	.infinity-edge-lc {
		order: 2;
		width: min(90vw, 78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top: -5rem;
		margin-inline: auto;
		z-index: 4;
		margin-left: clamp(-4rem, -3vw, -2rem)
	}

	.infinity-edge-text {
		left: 22%;
		top: 26%;
		width: 60%;
	}
	
	
	/********************************************************
	 --------- The Villas Page / Infinity Rise Villa ----------
	********************************************************/

	#infinity-rise-row {
		flex-direction: column;
		align-items: center;
		width: min(92vw, 104rem);
		gap: 0;
	}

	.infinity-rise-lc {
		order: 1;
		width: min(92vw, 104rem);
		max-width: 104rem;
		flex: none;
		z-index: 5;
	}

	.infinity-rise-left-image,
	.infinity-rise-left-image .et_pb_image_wrap,
	.infinity-rise-left-image img,
	.infinity-rise-legend {
		display: block;
		width: 100%;
		max-width: none;
	}

	.infinity-rise-legend {
		margin-top: 3rem;
	}

	.infinity-rise-rc {
		order: 2;
		width: min(90vw, 78rem);
		min-width: 0;
		flex: none;
		aspect-ratio: 1 / 1;
		margin-top: -2rem;
		margin-inline: auto;
		z-index: 4;

		position: relative;
		left: clamp(2rem, 3vw, 4rem);
	}
	
	.infinity-rise-text {
        left: 17%;
        top: 27%;
        width: 63%;
	}
}
	
	
	
@media (max-width: 1024px) {

    /********************************************************
     --------- The Villas Page / The Villas Section ---------
    ********************************************************/

	
    .the-villas-rc {
        width: min(98vw, 700px);
        margin-top: clamp(-14rem, -10vw, -8rem);
        margin-left: clamp(-6rem, -4vw, -2rem);
    }

    .the-villas-p4-right-text {
        left: 20%;
        top: 18%;
        width: 58%;
    }


    /********************************************************
     --------- The Villas Page / Aegean Crest Villa ---------
    ********************************************************/

    .aegean-crest-rc {
		width: min(92vw, 92rem);
		max-width: 92rem;
	}

	.aegean-crest-lc {
		margin-bottom: clamp(6rem, 8vw, 10rem);
	}
	
    .aegean-crest-right-image,
    .aegean-crest-right-image .et_pb_image_wrap,
    .aegean-crest-right-image img,
    .aegean-crest-legend {
        width: 100%;
        max-width: 100%;
    }
	 .aegean-crest-right-image {
        display: block;
        margin-inline: auto;
    }
	
	.aegean-crest-right-image .et_pb_image_wrap {
        display: block;
    }
	
	.aegean-crest-right-image img {
        display: block;
        height: auto;
    }
	
	.aegean-crest-legend {
		width: 100%;
	}

	.villa-legend {
		grid-template-columns: repeat(2, 1fr);
		border: 0;
		border-top: 1px solid rgba(0,0,0,.25);
		border-bottom: 1px solid rgba(0,0,0,.25);
	}

	.villa-legend-area {
		grid-column: auto;
	}

	.villa-legend-wide {
		grid-column: 1 / -1;
	}

	.villa-legend-item {
		min-height: 7.2rem;
		padding: 1.3rem 1.4rem;
		border-right: 1px solid rgba(0,0,0,.18);
		border-bottom: 1px solid rgba(0,0,0,.18);
	}

	.villa-legend-item img {
		width: 2.8rem;
		height: 2.8rem;
		min-width: 2.8rem;
	}

	.villa-legend-item:nth-child(2),
	.villa-legend-item:nth-child(4) {
		border-right: 0;
	}

	.villa-legend-wide {
		border-right: 0;
		border-left: 0;
		border-bottom: 0;
		border-top: 1px solid rgba(0,0,0,.2);
	}

	.villa-legend-wide::before {
		display: none;
	}
	
    /********************************************************
     ------- The Villas Page / Infinity Edge Villas ---------
    ********************************************************/
	
	
	/ Legend 2 Colums Adjustment 
	
	.villa-legend.villa-legend-3cols {
        grid-template-columns: 1fr;
    }

    .villa-legend.villa-legend-3cols .villa-legend-item {
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.18);
    }

    .villa-legend.villa-legend-3cols .villa-legend-item:last-child {
        border-bottom: 0;
    }	
}

@media (max-width: 980px) {
	.sp-first-par p {
		font-size: var(--fs-body);
	}
	
	#pebble-03-left .pebble-03-left-text {
		left: 0%;
		top: 22%;
		width: 100%;
	}
	
	.pebble-02-left-white {
		transform: translateX(0px) translateY(10px) rotateX(0deg) rotateY(0deg) rotateZ(10deg);
	}

    .the-villas-rc{
        width:min(120vw,760px);
    }
	
	#location-slider .location-box .et_pb_slide_description {
		position: absolute;
		left:0;
	}
}


/* Mobile */

@media (max-width: 767px) {
	
    :root{
        --fs-h1:4.2rem;
        --fs-h2:3.6rem;
        --fs-h3:2.8rem;
    }
	
	/**********************************
	 ----------- Startpage ------------
	**********************************/
	
	.sp-first-section {
		flex-direction: column;
	}
	
	.mk-logo-content {
		position: relative;
		transform: translate(0, -50%) scale(1.5);
	}
	
	.sp-first-section .et-last-child {
		width: unset;
	}
	
	.sp-first-section ..et_flex_column_24_24_phone{
		width: unset;
	}
	
	#location-slider .location-box .et_pb_slide_description {
		transform: translate(-38%, 25%) !important;
		min-width: 360px;
        max-width: 468px;
        padding: 20px;
	}
	
	.et_pb_divider_3.pebble-02-left-white
	{
		transform: translateX(0px) translateY(10px) rotateX(0deg) rotateY(0deg) rotateZ(10deg);
	}
	
	#pebble-02-left .pebble-02-left-text {
		left: 0px;
	}
	
	#sp-signature-section #pebble-03-left .pebble-03-left-text {
        left: 10%;
        top: 25%;
        width: 82%;
        z-index: 2;
	}
	
	
	/**********************************
	 --------- The Villas Page --------
	**********************************/
	
    #the-villas-row {
        gap: 2rem;
    }

    .the-villas-rc {
        width: min(100vw, 560px);
    }
	
	.the-villas-lc {
		flex: 0 0 clamp(38rem, 42vw, 76rem);
	}

    .the-villas-p4-right-text {
        left: 16%;
        top: 15%;
        width: 66%;
    }

    .the-villas-p4-right-text h2 {
        margin-bottom: 1.5rem;
    }

    .the-villas-p4-right-text p {
        line-height: 1.25;
    }

    .the-villas-left-image img {
        width: min(92vw, 52rem);
    }
	
	.aegean-crest-p5-left-text {
        left: 18%;
        top: 26%;
        width: 73%;
    }
	

	.azure-vista-rc {
		margin-top: -5rem;
		margin-bottom: 5rem !important;
	}
	
	.azure-vista-text {
		top:30%;
		width: 66%;
    }
	
	.azure-peak-lc {
		margin-top: -6rem;
		margin-bottom: 5rem;
	}
	
	.azure-peak-text {
        left: 19%;
        top: 24%;
        width: 67%;
    }
	
	.azure-haven-text {
        left: 15%;
        top: 22%;
        width: 69%;
    }
	
	.infinity-rise-text {
		left: 13%;
		top: 18%;
		width: 74%;
	}
}


@media (max-width:600px){
	
	/***************** Pebbles gone in Mobile ***************/
	.pebble-01-left-brown,
	.pebble-01-left-white,
	.pebble-02-left-brown,
	.pebble-02-left-white ,
	.pebble-03-left-brown,
	.pebble-03-left-white,
	.the-villas-rc::before,
    .the-villas-rc::after,
    .aegean-crest-lc::before,
    .aegean-crest-lc::after,
    .azure-vista-rc::before,
    .azure-vista-rc::after,
	.azure-peak-lc::before,
    .azure-peak-lc::after,
	.azure-haven-rc::before,
    .azure-haven-rc::after,
	.infinity-edge-lc::before,
    .infinity-edge-lc::after,
	.infinity-rise-rc::before,
    .infinity-rise-rc::after {
        display:none;
    }
	.villa-button {
		display: block;
	}

	/********************************************************
	 --------- Startpage / The Soul of Place -----------------
	********************************************************/
	
	#pebble-01-left .pebble-01-left-text {
		min-height: unset;
	}
	
	#pebble-02-left .pebble-02-left-text {
		min-height: 1100px;
		margin-left: -70px;
	}
	
	#the-soul-of-place-section {
        padding: 100px 0;
        gap: 200px;
    }
	.soulofplace-image1 {
		max-width: 90%;
	}
		
	.soulofplace-image2.et_pb_image_2.et_pb_image  {
		margin-right: unset;
	}
	/********************************************************
	 --------- The Villas Page / The Villas -----------------
	********************************************************/
    
	#the-villas-section{
        height:auto;
        min-height:auto;
        padding-block:6rem;
        overflow:visible;
    }

    #the-villas-row{
        gap:3rem;
    }

    .the-villas-lc,
    .the-villas-rc{
        flex:none;
        width:100%;
        max-width:100%;
    }

	.the-villas-p4-right-text{
		position:relative;
		left:auto;
		top:auto;
		width:100%;
		max-width:none;
		padding-inline:0;
	}
	
	.the-villas-left-image,
	.the-villas-left-image .et_pb_image_wrap,
	.the-villas-left-image img{

		width:100%;
		max-width:100%;
		display:block;

	}

	.the-villas-rc{
		width:100%;
		min-width:0;
		aspect-ratio:auto;
		margin-top:0;
		margin-left:0;
	}

	#pebble-03-left .pebble-03-left-text {
		left: 0;
	}
	
	/********************************************************
	 --------- The Villas Page / Aegean Crest Villa ---------
	********************************************************/
	
	#aegean-crest-row {
		display: flex;
		flex-direction: column;
	}
	
	.aegean-crest-rc {
		display: contents;
	}
	
	.aegean-crest-right-image {
		order: 2;
	}
	 .aegean-crest-right-image img {
        width: 100%;
        max-width: none;
    }

    .aegean-crest-lc {
		order:1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 4rem;
        margin-left: 0;
        padding-inline: 2rem;
		margin-bottom: 0;
    }

    .aegean-crest-p5-left-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
    }
	   .aegean-crest-legend {
		order:3;
        width: 100%;
        margin-top: 3rem;
    }

	/******** Villa Button Ordering **********/
	.aegean-crest-rc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.aegean-crest-rc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
    .villa-legend {
        grid-template-columns: 1fr;
        font-size: 1.6rem;
    }

    .villa-legend-item,
    .villa-legend-area,
    .villa-legend-wide {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;

        min-height: 6.8rem;
        padding: 1.8rem 1.5rem;
        gap: 1.2rem;
    }

	.villa-legend-item img,
	.villa-legend-area img,
	.villa-legend-wide img {
		width: 3.4rem;
		height: 3.4rem;
		min-width: 3.4rem;
		object-fit: contain;
		opacity: .92;
	}

    .villa-legend-item:nth-child(n) {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .28);
    }

    .villa-legend-item:last-child {
        border-bottom: 0;
    }
	
	.aegean-crest-lc .pebble-button {
		display: none;
	}
	
	/********************************************************
	 --------- The Villas Page / Azure Vista Villa ----------
	********************************************************/

	#azure-vista-section{
		display: flex;
		flex-direction: column;
	}

	.azure-vista-rc {
		display: contents;
	}
	
	#azure-vista-row{
		width:min(94vw,58rem);
		gap:3rem;
	}

	.azure-vista-rc{
		order: 1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        margin-left: 0;
        padding-inline: 2rem;
        margin-bottom: 0;
	}

	.azure-vista-right-image {
		order: 2;
	}
	.azure-vista-legend{
		order: 3;
		margin-top:2rem;
	}
	
     .azure-vista-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 90%;
		margin-bottom: 0
    }
	
	/******** Villa Button Ordering **********/
	.azure-vista-lc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.azure-vista-lc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
	.azure-vista-rc .pebble-button {
		display: none;
	}



	/********************************************************
	 --------- The Villas Page / Azure Peak Villa ----------
	********************************************************/

	#azure-peak-section{
		min-height:auto;
		padding-block:8rem;
	}

	#azure-peak-row{
		width:min(94vw,58rem);
	}

	.azure-peak-lc{
		order: 1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        margin-left: 0;
        padding-inline: 2rem;
        margin-bottom: 5%;
	}

	.azure-peak-legend{
		margin-top:2rem;
	}
	
     .azure-peak-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
    }
	
	/******** Villa Button Ordering **********/
	.azure-peak-rc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.azure-peak-rc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
	.azure-peak-lc .pebble-button {
		display: none;
	}	
	
	/********************************************************
	 --------- The Villas Page / Azure Haven Villa ----------
	********************************************************/

	#azure-haven-section{
		display: flex;
		flex-direction: column;
	}

	.azure-haven-rc {
		display: contents;
	}
	
	#azure-haven-row{
		width:min(94vw,58rem);
		gap:3rem;
	}

	.azure-haven-rc{
		order: 1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        margin-left: 0;
        padding-inline: 2rem;
        margin-bottom: 0;
	}

	.azure-haven-right-image {
		order: 2;
	}
	.azure-haven-legend{
		order: 3;
		margin-top:2rem;
	}
	
     .azure-haven-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 90%;
		margin-bottom: 0
    }
	
	/******** Villa Button Ordering **********/
	.azure-haven-lc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.azure-haven-lc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
	.azure-haven-rc .pebble-button {
		display: none;
	}
	
	/********************************************************
	 --------- The Villas Page / Infinity Edge Villa --------
	********************************************************/

	#infinity-edge-section{
		min-height:auto;
		padding-block:8rem;
	}

	#infinity-edge-row{
		width:min(94vw,58rem);
	}

	.infinity-edge-lc{
		order: 1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        margin-left: 0;
        padding-inline: 2rem;
        margin-bottom: 5%;
	}

	.infinity-edge-legend{
		margin-top:2rem;
	}
	
     .infinity-edge-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
    }
	
	/******** Villa Button Ordering **********/
	.infinity-edge-rc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.infinity-edge-rc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
	.infinity-edge-lc .pebble-button {
		display: none;
	}	
	
	/********************************************************
	 --------- The Villas Page / Infinity Rise Villa ----------
	********************************************************/

	#infinity-rise-section{
		display: flex;
		flex-direction: column;
	}

	.infinity-rise-rc {
		display: contents;
	}
	
	#infinity-rise-row{
		width:min(94vw,58rem);
		gap:3rem;
	}

	.infinity-rise-rc{
		order: 1;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        margin-left: 0;
        padding-inline: 2rem;
        margin-bottom: 0;
	}

	.infinity-rise-right-image {
		order: 2;
	}
	.infinity-rise-legend{
		order: 3;
		margin-top:2rem;
	}
	
     .infinity-rise-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 90%;
		margin-bottom: 0
    }
	
	/******** Villa Button Ordering **********/
	.infinity-rise-lc > .et_pb_button_module_wrapper {
		order:4;	
		padding: 50px 0;
		align-self: flex-start;
	}
	
	.infinity-rise-lc > .et_pb_button_module_wrapper .et_pb_button{
        margin-left:0;
        margin-right:auto;
    }
	
	.infinity-rise-rc .pebble-button {
		display: none;
	}
}


@media (max-width:480px) {
	
    :root{
        --fs-body:1.6rem;

        --fs-h1:3.6rem;
        --fs-h2:3rem;
        --fs-h3:2.4rem;
    }
	
	/**********************************
	 ----------- Startpage ------------
	**********************************/
	
	#location-slider .location-box .et_pb_slide_description {
		transform: translate(-43%, 25%) !important;
		max-width: 430px;
		padding: 10px;
	}
	
	.mk-logo-content {
		margin-top: -100px
	}
	#pebble-01-left {
		min-width: unset;
	}
	
	#pebble-01-left .pebble-01-left-brown,
	#pebble-01-left .pebble-01-left-white {
		display: none;
	}

    .mk-logo-content {
        position: relative;
        transform: translate(0, 0) scale(1);
    }

	#pebble-01-left .pebble-01-left-text {
		margin-top: 150px;
		padding: 0 35px;
		min-width: 335px;
	}
	
	#pebble-02-left .pebble-02-left-text {
		min-height: 950px;
		max-width: 340px;
	}

	
	#sp-signature-section #pebble-03-left .pebble-03-left-text {
		left: 0;
		margin-left: -20px;
		padding-right: 10px;
	}
	
	.sp-image-hospitality.et_pb_image_4 {
		padding-top: 0;
		margin: unset;
		margin-left: 18px;
		margin-top: -30px;
	}
	
	#sp-location-cta {
		position: absolute;
		z-indeX: 4;
		top: 80px;
		left: 4%;
	}
	
	
	/**********************************
	 ---------- The Villas ------------
	**********************************/
	
	
	#the-villas-row {
		width: 100%;
		max-width: none;
	}

	.the-villas-lc,
	.the-villas-left-image,
	.the-villas-left-image .et_pb_image_wrap,
	.the-villas-left-image img {
		width: 100% !important;
		max-width: none !important;
		padding: .5rem;
	}

	.the-villas-left-image img {
		display: block;
	}
	
	.the-villas-p4-right-text {
        padding: 2.5rem;
    }
	
	.the-villas-text .et_pb_button_wrapper,
    .aegean-crest-text .et_pb_button_wrapper,
    .azure-vista-text .et_pb_button_wrapper{

        margin-top:3rem;

    }
	
	#the-villas-section,
    #aegean-crest-section,{
        padding-bottom:7rem;
    }

	#azure-vista-section {
		padding-bottom: 20rem;
	}
}