/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

@font-face {
  font-family: 'Manrope';
  font-weight: 300;
  src: url('fonts/Manrope-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-weight: 400;
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-weight: 500;
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-weight: 700;
  src: url('fonts/Manrope-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'AcciaPiano';
  font-weight: 400;
  src: url('fonts/AcciaPiano-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'AcciaPiano';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/AcciaPiano-LightItalic.ttf') format('truetype');
}

.font-accia,
.font-accia * {
  font-family: 'AcciaPiano';
}

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

ul li {
  position: relative;
  padding-left: max(20px, 1.5vw);
  margin-bottom: 8px;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: max(10px, 0.5vw);
  height: max(10px, 0.5vw);
  border-radius: 50%;
  background-color: rgba(228, 190, 145, 1);
  transform: translateY(-50%);
}

/* ============  WRITE YOUR PROJECT CODE BELOW ============ */

/* ============ GLOBAL ============ */

:root {
  --cream: #F9F5E5;
}

* {
  font-family: 'Manrope', sans-serif;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  font-family: 'AcciaPiano', sans-serif;
}

/* ============ LIB ============ */

/* reveal word */

.reveal-word {
  display: inline-flex;
  overflow: hidden;
  line-height: 1.5;
}

.text-reveal span.reveal-char {
  display: inline-block;
  transform: translateY(125%);
  transition: 0.25s;
  will-change: transform, opacity, transition;
}

.text-reveal.revealed span.reveal-char {
  transform: translateY(0);
}

/* scrolling effect */

.bg-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-fixed,
.scroll-zoomin,
/* .scroll-zoomout, */
.scroll-fade {
  transition: 0.1s;
}

.scroll-zoomout-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.scroll-zoomout-section > div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform: scale(var(--zoom, 1.2));
  z-index: -1; 
  transition: transform 0.01s linear;
}

section {
  position: relative;
  z-index: 10;
}

/* ============ HEADER ============ */

.cr-header {
  transition: .25s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.cr-header.scrolled {
  background-color: var(--cream);
  box-shadow: 0 4px 20px 0 rgba(228, 190, 145, 0.2);
}

.cr-header .cr-header-logo-residences {
  margin: 0;
  max-width: 0;
  transition: max-width 0.25s, margin 0.25s;
  transition-delay: 0.2s;
}

.cr-header.scrolled .cr-header-logo-residences {
  margin: 0 16px;
  max-width: 86px;
}

.cr-header-hamburger {
  position: relative;
  padding: 0;
  margin: auto;
  width: 44px;
  height: 18px;
  background-color: unset;
  border: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 10;
}

.cr-header-hamburger:hover,
.cr-header-hamburger:focus,
.cr-header-hamburger:active {
  background-color: unset;
}

.cr-header-hamburger.active {
  height: 44px;
}

.cr-header-hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--contrast);
  border-radius: 24px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.cr-social-header svg path {
  transition: .25s;
}

.cr-header.background-scrolled .cr-social-header svg path {
  fill : var(--contrast);
}

.cr-header-hamburger span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.cr-header-hamburger span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.cr-header-hamburger span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.cr-header-hamburger.active span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -5px;
  left: 5px;
  width: 44px;
  background: var(--cream);
}

.cr-header-hamburger.active span:nth-child(2) {
  width: 0%;
  opacity: 0;
  background: var(--cream);
}

.cr-header-hamburger.active span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 26px;
  left: 5px;
  width: 44px;
  background: var(--cream);
}

.cr-clear-btn .gb-shape svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content !important;
  height: max-content !important;
}

.cr-header-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #19051E;
  transform: translateY(-100%);
  transition: transform 0.25s;
}

.cr-header-menu.active {
  transform: translateY(0%);
}

.cr-header-menu-container {
  width: 50%;
  height: 100%;
}

.cr-header-menu-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cr-header-menu-list {
  position: absolute;
  left: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}

.cr-nav-lists {
  display: flex;
  margin: auto;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;

}

#menu-main-menu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  text-align: center;
  color: #F9F5E5;
  list-style-type: none;
}

#menu-main-menu a {
  color: #F9F5E5;
  font-family: 'AcciaPiano';
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.cr-svg-solid-line svg {
  fill: transparent!important;
}

/* ============ LANDING PAGE ============ */

.cr-h2-full-responsive span {
  font-size: max(60px, 4vw);
  line-height: 1.25;
}

.cr-play-icon {
  display: inline-block;
  width: max(20px, 1.2vw);
  height: max(20px, 1.2vw);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='%23F9F5E5' fill='none' stroke-width='1.6666666' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 18.333333 18.333333'><path d='M8.333333 16.666666C12.935707 16.666666 16.666666 12.935707 16.666666 8.333333C16.666666 3.7309604 12.935707 0 8.333333 0C3.7309604 0 0 3.7309604 0 8.333333C0 12.935707 3.7309604 16.666666 8.333333 16.666666Z' transform='translate(0.833171 0.833171)'/><path d='M6.6666665 5L11.666667 8.333333L6.6666665 11.666667L6.6666665 5Z' transform='translate(0.833171 0.833171)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cr-near-lists p {
  font-size: max(14px, 0.9vw);
  line-height: 1.6;
}

.cr-near-lists p:has(> span:nth-child(2)) > span:last-child {
  text-align: right;
  min-width: 75px;
}

.bg-video-mobile {
  display: none;
}

/* ============ FORM ============ */

.cr-form-row {
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  gap: max(36px, 3vw);
  margin-bottom: max(40px, 2.8vw);
}

#cira-comtact-form .cr-form-row:last-child {
  margin-bottom: max(36px, 2.6w);
}

#cira-contact-form label {
  display: flex;
  flex-direction: column;
  gap: max(8px, 0.5vw);
  font-size: max(12px, 0.8vw);
  color: rgba(25, 5, 30, 0.5);
  letter-spacing: 1px;
}

#cira-contact-form form.wpcf7-form>p:last-child {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#cira-contact-form input.wpcf7-form-control {
	max-width: 100%;
	width: 100%;
	height: max(25px, 1.8vw);
	padding: 0 0 max(8px, 0.5vw) 0;
  font-size: max(14px, 1vw);
  line-height: 1.2;
  /* letter-spacing: 0.7px; */
  color: #000;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #E4BE91;
  border-left: 0;
  border-radius: 0;
}

#cira-contact-form input.wpcf7-form-control.wpcf7-submit {
  border-bottom: 0;
}

#cira-contact-form input.wpcf7-form-control:focus {
  outline: 0;
}

#cira-contact-form .wpcf7-form select {
	max-width: 100%;
	width: 100%;
	height: max(32px, 2.6vw);
	padding: 0 0 8px 0;
  font-size: max(14px, 1vw);
  line-height: 1.2;
  /* letter-spacing: 0.7px; */
  color: #000;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #E4BE91;
  border-left: 0;
  border-radius: 0;
}


#cira-contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='none' d='M0 0L24 0L24 24L0 24L0 0Z'/><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(6 9)' d='M0 0L6 6L12 0'/></svg>");
	background-position: right 6px center;
	background-repeat: no-repeat;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#cira-contact-form input.wpcf7-submit {
	padding: 0!important;
	margin: auto;
	width: max(231px, 13vw );
  height: max(48px, 3vw);
  font-size: max(20px, 1.25vw);
  font-weight: 400;
  font-family: 'AcciaPiano';
	color: #F9F5E5 !important;
	background: var(--contrast);
}

.cira-register-button-wrapper {
  display: flex;
	flex-direction: column;
  align-items: center;
	gap: 18px;
  text-align: center;
}

.cira-register-button-wrapper p {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.disabled-submit {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* .wpcf7-spinner {
  display: none;
} */

.wpcf7-not-valid-tip {
  letter-spacing: 0.7px;
}

/* ============ SWIPER ============ */

.cira-swiper {
  overflow: hidden;
}

.swiper-wrapper {
  aspect-ratio: 16/9;
}

.cira-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cr-swiper-btn-prev {
  position: absolute;
  top: 50%;
  left: max(-78px, -4.5vw);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  transition: opacity 0.25s;
  cursor: pointer;
  z-index: 1;
}

.cr-swiper-btn-next {
  position: absolute;
  top: 50%;
  right: max(-78px, -4.5vw);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  transition: opacity 0.25s;
  cursor: pointer;
  z-index: 1;
}

.cr-swiper-btn-next svg,
.cr-swiper-btn-prev svg {
  width: 100%;
  height: 100%;
}

.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.swiper-section .swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.swiper-section .swiper-pagination-bullet {
  background-color: #FFF!important;
}


/* ============ FOOTER ============ */

.cr-footer-logo-residences {
  margin: 0 32px;
  max-width: 250px;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.5s,  max-width 0.75s, margin 1s;
  transition-delay: 0.2s;
}

.logo-expand .cr-footer-logo-residences {
  margin: 0px;
  max-width: 0px;
  opacity: 0;
  transition-delay: 0;
}

/* ============ CIRA MAP ============ */

.cira-map-section {
  text-align: center;
}

gmp-map {
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
}

/* Label styling */
.map-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.map-label img {
  width: 24px;
  height: 24px;
}

.map-label .cira-google-map-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  width: 120px;
  height: 29px;
  background-color: #19051E;
}

.map-label .cira-google-map-logo img {
  width: 88px;
  height: auto;
}

.map-label span {
  padding: 4px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 300;
  font-family: "AcciaPiano";
  color: #FFF;
  background-color: #E4BE91;
}

gmp-advanced-marker>a {
  text-decoration: none;
}

gmp-advanced-marker[data-location="cira"] {
  z-index: 1;
}

/* ============ FLOATING BUTTON BUBBLE ============ */

.cr-main-bubble {
  cursor: pointer;
}

.cr-main-bubble span {
  transition: transform 0.25s;
}

.cr-main-bubble.active span {
  transform: rotate( -45deg );
}

.cr-sub-bubble {
  opacity: 0;
  transform: translateY(50%);
  transition: 0.25s;
}

.cr-sub-bubble.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============ COOKIE YES ============ */

.cky-btn-revisit-wrapper {
  display: none!important;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
  .cr-swiper-btn-prev {
    left: 0;
  }
  
  .cr-swiper-btn-next {
    right: 0;
  }
}

@media (max-width: 768px) {

  .cr-form-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  #cira-contact-form input.wpcf7-submit {
    width: 100%;
  }

  gmp-map {
    height: 600px;
    aspect-ratio: unset;
  }

  .cr-h2-full-responsive span {
    font-size: 36px;
    line-height: 45px;
  }

  .logo-expand .cr-footer-logo-residences {
    margin: 0 8px;
  }

  .swiper-wrapper,
  .cira-swiper img {
    aspect-ratio: 3/2;
  }

  .bg-video-desktop {
    display: none;
  }

  .bg-video-mobile {
    display: block;
  }

  .cr-footer-logo-residences {
    margin: 0 18px;
  }
}