@charset "utf-8";

/**
 * Custom Rooms Component Styles
 * @description Estilos modularizados para la sección de apartamentos (custom-rooms)
 * @note Incluye estilos base y media queries para las tres resoluciones del proyecto
 * @version 1.0.0
 */

/* ========================================
   ESTILOS BASE - DESKTOP GRANDE (> 1920px)
   ======================================== */
#apartmentsSec {
	position: relative;
	z-index: 0;
	padding-top: 96px;
	padding-bottom: 64px;
	overflow: hidden;
	--circleFullWidth: 696px;
}

#apartmentsSec .circleFull {
	--p: 0;
	/* the percentage */
	--b: 1px;
	/* the thickness */
	--c: #f7f4f1;
	/* the color */
	--w: var(--circleFullWidth);
	/* the size*/
	width: var(--w);
	aspect-ratio: 1/1;
	position: relative;
	display: inline-grid;
	place-content: center;
	position: absolute;
	top: 159px;
	right: -60px;
	z-index: -1;
	transform: rotate(-90deg);
}

#apartmentsSec .circleFull:before,
#apartmentsSec .circleFull:after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

#apartmentsSec .circleFull:before {
	inset: 0;
	background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
		conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
	-webkit-mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
	mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
}

#apartmentsSec .circleFull:after {
	inset: calc(50% - var(--b) / 2);
	background: var(--c);
	transform: rotate(calc(var(--p) * 3.6deg - 90deg)) translate(calc(var(--w) / 2 - 50%));
}

#apartmentsSec.in-viewport .circleFull {
	animation-name: circleFullDrawDecorLine;
	animation-duration: 7s;
	animation-fill-mode: both;
	animation-delay: 0s;
	animation-timing-function: ease-out;
}

#apartmentsSec .contentBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

#apartmentsSec .contentBox .titleBox {
	width: 48%;
}

#apartmentsSec .contentBox .titleBox h2.h2 {
	display: block;
	margin: 0;
	font-family: "Juana";
	font-size: 3.8125rem;
	color: #606060;
	font-weight: 200;
	line-height: 4.575rem;
	letter-spacing: -0.025rem;
	margin-bottom: 32px;
}

#apartmentsSec .contentBox .titleBox h2.h2 strong {
	font-family: "Juana Medium It";
	font-weight: 500;
}

#apartmentsSec .contentBox .titleBox p {
	width: 100%;
	margin: 0 0 32px 0;
	font-size: 1.25rem;
	color: #898787;
	font-weight: 300;
	line-height: 1.75rem;
}

#apartmentsSec .contentBox .titleBox p strong {
	font-weight: 500;
}

#apartmentsSec .contentBox .content {
	width: 40%;
}

#apartmentsSec .contentBox .content p {
	width: 100%;
	margin: 0 0 32px 0;
	font-size: 1.25rem;
	color: #898787;
	font-weight: 300;
	line-height: 1.75rem;
}

#apartmentsSec .contentBox .content p strong {
	font-weight: 500;
}

#apartmentsSec .contentBox .content p:last-child {
	margin-bottom: 0;
}

#apartmentSlider {
	position: relative;
}

#apartmentSlider .caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 747px;
	margin: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	left: 0;
	z-index: 2;
}

#apartmentSlider .caption h3.h3 {
	margin: 0;
	font-family: "Juana";
	font-size: 3.0625rem;
	color: #ffffff;
	font-weight: 200;
	line-height: 3.675rem;
	letter-spacing: -0.025rem;
	text-align: center;
}

#apartmentSlider .caption .bookBtnBox {
	display: flex;
	gap: 15px;
}

#apartmentSlider .caption .bookBtnBox .bookNowBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #ffffff;
	background-color: #ffffff;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 500;
	line-height: 1.05rem;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .caption .bookBtnBox .bookNowBtn:hover {
	border-color: #8c8275;
	background-color: #8c8275;
	color: #606060;
}

#apartmentSlider .caption .bookBtnBox .bookNowBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#apartmentSlider .caption .bookBtnBox .bookNowBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .caption .bookBtnBox .bookNowBtn:hover .btnText span {
	text-shadow: 0px 20px #ffffff;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .caption .bookBtnBox .exploreBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #ffffff;
	background-color: transparent;
	border-radius: 0px;
	font-size: 1rem;
	color: #ffffff;
	font-weight: 300;
	line-height: 1.05rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .caption .bookBtnBox .exploreBtn:hover {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #606060;
}

#apartmentSlider .caption .bookBtnBox .exploreBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#apartmentSlider .caption .bookBtnBox .exploreBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .caption .bookBtnBox .exploreBtn:hover .btnText span {
	text-shadow: 0px 20px #606060;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentSlider .apartment-slider {
	display: block;
	height: 600px;
}

#apartmentSlider .apartment-slider .swiper-slide {
	height: 600px;
}

#apartmentSlider .apartment-slider .swiper-slide:before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgb(52 52 52 / 35%);
	background: linear-gradient(360deg,
			rgba(52, 52, 52, 0.3) 0%,
			rgba(52, 52, 52, 0.299) 1.8%,
			rgba(52, 52, 52, 0.298) 4.8%,
			rgba(52, 52, 52, 0.294) 9%,
			rgba(52, 52, 52, 0.287) 13.9%,
			rgba(52, 52, 52, 0.278) 19.8%,
			rgba(52, 52, 52, 0.262) 27%,
			rgba(52, 52, 52, 0.242) 35%,
			rgba(52, 52, 52, 0.217) 43.5%,
			rgba(52, 52, 52, 0.185) 53%,
			rgba(52, 52, 52, 0.138) 66%,
			rgba(52, 52, 52, 0.079) 81%,
			rgba(52, 52, 52, 0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#apartmentSlider .apartment-slider .swiper-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

#apartmentSlider .apartment-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#apartmentSlider .apartment-slider .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#apartmentSlider .apartment-slider .swiperNav {
	display: flex;
	justify-content: space-between;
	margin-top: 0;
	position: absolute;
	top: 50%;
	right: var(--container-padding);
	left: var(--container-padding);
	transform: translateY(-50%);
	z-index: 1;
}

#apartmentSlider .apartment-slider .swiperNav [class*="swiper-button-"] {
	background: #faf8f5;
}

#apartmentSlider .apartment-slider .swiperCountDots {
	margin-top: 0;
	color: #ffffff;
	position: absolute;
	top: 7%;
	right: 15px;
	left: 15px;
}

#apartmentSlider .apartment-slider .swiperCountDots .countline {
	display: inline-block;
	width: 64px;
	height: 1px;
	background: #ffffff;
	border-radius: 0px;
}

#apartmentSlider .apartment-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet {
	background: #ffffff;
}

#apartmentSlider .apartment-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet:hover,
#apartmentSlider .apartment-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #ffffff;
}

#apartmentThumbSec {
	position: relative;
	z-index: 0;
	padding: 16px 16px 80px 16px;
	background-color: #ece9e3;
	overflow: hidden;
	--circleFullWidth: 647px;
}

#apartmentThumbSec .circleFull {
	--p: 0;
	/* the percentage */
	--b: 1px;
	/* the thickness */
	--c: #ded9cf;
	/* the color */
	--w: var(--circleFullWidth);
	/* the size*/
	width: var(--w);
	aspect-ratio: 1/1;
	position: relative;
	display: inline-grid;
	place-content: center;
	position: absolute;
	top: -10px;
	right: -270px;
	z-index: -1;
	transform: rotate(0deg);
}

#apartmentThumbSec .circleFull:before,
#apartmentThumbSec .circleFull:after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

#apartmentThumbSec .circleFull:before {
	inset: 0;
	background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
		conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
	-webkit-mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
	mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
}

#apartmentThumbSec .circleFull:after {
	inset: calc(50% - var(--b) / 2);
	background: var(--c);
	transform: rotate(calc(var(--p) * 3.6deg - 90deg)) translate(calc(var(--w) / 2 - 50%));
}

#apartmentThumbSec.in-viewport .circleFull {
	animation-name: circleFullDrawDecorLine;
	animation-duration: 4s;
	animation-fill-mode: both;
	animation-delay: 0s;
	animation-timing-function: ease-out;
}

#apartmentThumbSec .apartmentThumbBox {
	display: flex;
	gap: 16px;
	width: 100%;
}

#apartmentThumbSec .apartmentThumbBox .item {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#apartmentThumbSec .apartmentThumbBox .item picture {
	display: block;
	width: 100%;
	aspect-ratio: 615 / 557;
	overflow: hidden;
	background-color: #f5f5f5;
}

#apartmentThumbSec .apartmentThumbBox .item picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 16px;
	padding: 32px 24px 0px 24px;
}

#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 {
	display: block;
	margin: 0;
	font-family: "Juana";
	font-size: 2.4375rem;
	color: #606060;
	font-weight: 200;
	line-height: 2.925rem;
	letter-spacing: -0.025rem;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox {
	display: flex;
	justify-content: center;
	gap: 15px;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #ded9d4;
	background-color: #ded9d4;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 500;
	line-height: 1.05rem;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn:hover {
	border-color: #8c8275;
	background-color: #8c8275;
	color: #606060;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn:hover .btnText span {
	text-shadow: 0px 20px #ffffff;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #d3d0cf;
	background-color: transparent;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 300;
	line-height: 1.05rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn:hover {
	border-color: #ded9d4;
	background-color: #ded9d4;
	color: #606060;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn:hover .btnText span {
	text-shadow: 0px 20px #606060;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .discoverBox {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 100px;
}

#apartmentThumbSec .discoverBox .discoverBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #d3d0cf;
	background-color: transparent;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 300;
	line-height: 1.05rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .discoverBox .discoverBtn:hover {
	border-color: #ded9d4;
	background-color: #ded9d4;
	color: #606060;
}

#apartmentThumbSec .discoverBox .discoverBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#apartmentThumbSec .discoverBox .discoverBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#apartmentThumbSec .discoverBox .discoverBtn:hover .btnText span {
	text-shadow: 0px 20px #606060;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}
/* ========================================
   MEDIA QUERY - DESKTOP GRANDE (1367px - 1600px)
   ======================================== */

@media only screen and (min-width: 1367px) and (max-width: 1600px) {

#apartmentsSec 										{ --circleFullWidth: 596px; }

#apartmentSlider .apartment-slider .swiper-slide 	{ min-height: 550px; }

#apartmentThumbSec 									{ --circleFullWidth: 547px; }

}

/* ========================================
   MEDIA QUERY - DESKTOP MEDIO (1180px - 1366px)
   ======================================== */

@media only screen and (min-width: 1180px) and (max-width: 1366px) {

#apartmentsSec 										{ --circleFullWidth: 496px; }
#apartmentsSec .contentBox .titleBox 				{ width: 48%; }
#apartmentsSec .contentBox .titleBox h2.h2 			{ font-size: 3.125rem; line-height: 3.75rem; }
#apartmentsSec .contentBox .content 				{ width: 48%; }

#apartmentSlider .caption 							{ max-width: 627px; }
#apartmentSlider .caption h3.h3 					{ font-size: 2.5rem; line-height: 3.125rem; }
#apartmentSlider .apartment-slider .swiper-slide 	{ min-height: 500px; }

#apartmentThumbSec 									{ --circleFullWidth: 457px; }
#apartmentThumbSec .circleFull 						{ right: -170px; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 { font-size: 1.875rem; line-height: 2.5rem; }

}

/* ========================================
   MEDIA QUERY - DESKTOP PEQUEÑO (959px - 1180px)
   ======================================== */

@media only screen and (min-width: 959px) and (max-width: 1180px) {

#apartmentsSec 										{ padding-top: 70px; padding-bottom: 40px; --circleFullWidth: 496px; }
#apartmentsSec .contentBox .titleBox 				{ width: 42%; }
#apartmentsSec .contentBox .titleBox h2.h2 			{ font-size: 2.125rem; line-height: 2.75rem; }
#apartmentsSec .contentBox .content 				{ width: 54%; }
#apartmentsSec .contentBox .content p 				{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.5625rem; }

#apartmentSlider .caption 							{ gap: 30px; max-width: 470px; }
#apartmentSlider .caption h3.h3						{ font-size: 1.875rem; line-height: 2.5rem; }
#apartmentSlider .caption .bookBtnBox .exploreBtn,
#apartmentSlider .caption .bookBtnBox .bookNowBtn	{ padding: 10px 17px; }
#apartmentSlider .apartment-slider .swiper-slide 	{ min-height: 400px; }

#apartmentThumbSec 									{ padding: 15px 15px 70px 15px; --circleFullWidth: 357px; }
#apartmentThumbSec .circleFull 						{ right: -170px; }
#apartmentThumbSec .apartmentThumbBox .item .info 	{ padding: 15px 0 0 0; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 { font-size: 1.5625rem; line-height: 1.875rem; }
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn,
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn { padding: 10px 17px; }
#apartmentThumbSec .discoverBox 					{ margin-top: 50px; }
#apartmentThumbSec .discoverBox .discoverBtn		{ padding: 10px 17px; }

}

/* ========================================
   MEDIA QUERY - TABLET (768px - 959px)
   ======================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {

#apartmentsSec 										{ padding-top: 70px; padding-bottom: 40px; --circleFullWidth: 496px; }
#apartmentsSec .contentBox 							{ flex-direction: column; align-items: flex-start; }
#apartmentsSec .contentBox .titleBox 				{ width: 100%; }
#apartmentsSec .contentBox .titleBox h2.h2 			{ font-size: 2.125rem; line-height: 2.75rem; }
#apartmentsSec .contentBox .content 				{ width: 100%; }
#apartmentsSec .contentBox .content p 				{ max-width: none; font-size: 1rem; line-height: 1.5rem; }
#apartmentSlider .apartment-slider .swiper-slide 	{ min-height: 450px; }

#apartmentSlider .caption 							{ gap: 20px; max-width: 420px; }
#apartmentSlider .caption h3.h3						{ font-size: 1.6875rem; line-height: 2.3125rem; }
#apartmentSlider .caption .bookBtnBox .exploreBtn,
#apartmentSlider .caption .bookBtnBox .bookNowBtn	{ padding: 10px 17px; font-size: 0.875rem; }
#apartmentSlider .apartment-slider .swiperNav 		{ padding: 0 15px; }

#apartmentThumbSec 									{ padding: 15px 15px 70px 15px; --circleFullWidth: 307px; }
#apartmentThumbSec .circleFull 						{ right: -170px; }
#apartmentThumbSec .apartmentThumbBox .item .info 	{ padding: 15px 0 0 0; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 { min-height: 56px; font-size: 1.4375rem; line-height: 1.75rem; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 br { display: none; }
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox { gap: 6px; }
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn,
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn { padding: 10px 17px; font-size: 0.8125rem; }
#apartmentThumbSec .discoverBox 					{ margin-top: 50px; }
#apartmentThumbSec .discoverBox .discoverBtn		{ padding: 10px 17px; font-size: 0.875rem; }

}

/* ========================================
   MEDIA QUERY - MÓVIL (< 767px)
   ======================================== */

@media only screen and (max-width: 767px) {

#apartmentsSec 										{ padding-top: 50px; padding-bottom: 30px; --circleFullWidth: 370px; }
#apartmentsSec .circleFull 							{ top: 50%; right: -120px; transform: rotate(-120deg); }
#apartmentsSec .contentBox 							{ flex-direction: column; align-items: flex-start; }
#apartmentsSec .contentBox .titleBox 				{ width: 100%; }
#apartmentsSec .contentBox .titleBox h2.h2 			{ font-size: 2.125rem; line-height: 2.75rem; }
#apartmentsSec .contentBox .content 				{ width: 100%; }
#apartmentsSec .contentBox .content p 				{ font-size: 1rem; line-height: 1.5rem; }

#apartmentSlider .caption 							{ gap: 20px; width: calc(100% - 30px); max-width: 540px; }
#apartmentSlider .caption h3.h3						{ font-size: 1.5rem; line-height: 2.2rem; }
#apartmentSlider .caption .bookBtnBox .exploreBtn,
#apartmentSlider .caption .bookBtnBox .bookNowBtn	{ padding: 10px 17px; font-size: 0.875rem; }
#apartmentSlider .apartment-slider .swiper-slide 	{ min-height: 450px; }
#apartmentSlider .apartment-slider .swiperNav 		{ justify-content: center; padding: 0 15px; top: auto; bottom: 30px; transform: translateY(0%); }

#apartmentThumbSec 									{ padding: 15px 15px 50px 15px; --circleFullWidth: 370px; }
#apartmentThumbSec .circleFull 						{ right: -170px; }
#apartmentThumbSec .apartmentThumbBox 				{ flex-direction: column; gap: 32px; }
#apartmentThumbSec .apartmentThumbBox .item 		{ width: 100%; }
#apartmentThumbSec .apartmentThumbBox .item .info 	{ padding: 15px 0 0 0; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 { font-size: 1.875rem; line-height: 2.5rem; }
#apartmentThumbSec .apartmentThumbBox .item .info h3.h3 br { display: none; }
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .bookNowBtn,
#apartmentThumbSec .apartmentThumbBox .item .info .bookBtnBox .exploreBtn { padding: 10px 17px; font-size: 0.875rem; }
#apartmentThumbSec .discoverBox 					{ margin-top: 50px; }
#apartmentThumbSec .discoverBox .discoverBtn		{ padding: 10px 17px; font-size: 0.875rem; }

}

/* ========================================
   SCROLL SNAP TRANSITIONS - DESKTOP (>= 992px)
   ======================================== */

@media (min-width: 992px) {

body.is-snapping #apartmentsSec,
body.is-snapping #apartmentThumbSec {
	will-change: transform;
}

}