/* START BANNER */
.banner {
	width: 								100%;
	aspect-ratio: 						2/1;
	padding: 							0 10px;
	margin-top: 						-74px;
	margin-bottom: 						130px;
}

.banner .background {
	display: 							flex;
	flex-flow: 							column nowrap;
	gap: 								55px;
	width: 								100%;
	height: 							100%;
	background-size: 					cover !important;
	border-radius: 						30px;
	padding-inline: 					110px 10px;
}

.banner .background .firstRow {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	margin-top: 						auto;
}

.banner .background .firstRow .leftInformation {
	width:								590px;
}

.banner .background .firstRow .leftInformation .title {
	color: 								var(--white);
	margin-bottom: 						5px;
}

.banner .background .firstRow .leftInformation .description {
	width: 								60%;
	font-weight: 						500;
	color: 								var(--white);
	margin-bottom: 						20px;
}

.banner .background .firstRow .leftInformation .portraits {
	width: 								260px;
	height: 							50px;
	object-fit: 						contain;
	object-position: 					center center;
	margin-bottom: 						20px;
}

.banner .background .firstRow .leftInformation .btnContact {
	width: 								fit-content;
	gap: 								40px;
}

.banner .background .firstRow .leftInformation .btnContact::after {
	background: 						var(--beige);
}

.banner .background .firstRow .leftInformation .btnContact:hover:after {
	background: 						var(--gold);
}

.banner .background .firstRow .rightInformation {
	width: 								300px;
	margin-left: 						auto;
	padding: 							15px;
	border-radius: 						20px;
	background-color: 					var(--transparency);
}

.banner .background .firstRow .rightInformation .photo {
	position: 							relative;
	width: 								100%;
	height: 							200px;
	background-size: 					cover !important;
	border-radius: 						10px;
	margin-bottom: 						10px;
}

.banner .background .firstRow .rightInformation .photo .location {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	padding: 							5px 10px;
	position: 							absolute;
	top: 								10px;
	right: 								10px;
	background-color: 					rgba(0, 0, 0, 0.5);
	border-radius: 						5px;
}

.banner .background .firstRow .rightInformation .photo .location .icon {
	height: 							100%;
	object-fit: 						contain;
	object-position: 					center center;
}

.banner .background .firstRow .rightInformation .photo .location .city {
	font-size: 							14px;
	color: 								var(--beige);
}

.banner .background .firstRow .rightInformation .tittlePrice {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content: 					space-between;
	margin-bottom: 						15px;
}

.banner .background .firstRow .rightInformation .tittlePrice .title {
	color: 								var(--white);
	font-weight: 						700;
}

.banner .background .firstRow .rightInformation .tittlePrice .price {
	padding: 							10px 20px;
	background-color: 					var(--beige);
	color: 								var(--brown);
	border-radius: 						10px;
}

.banner .background .firstRow .rightInformation .amenities {
	display: 							flex;
	flex-flow: 							row wrap;
	align-items: 						center;
	margin-bottom: 						25px;
}

.banner .background .firstRow .rightInformation .amenities .icon {
	object-fit: 						contain;
	object-position: 					center center;
	margin-right: 						5px;
}

.banner .background .firstRow .rightInformation .amenities .value {
	font-size: 							14px;
	color: 								var(--white);
}

.banner .background .firstRow .rightInformation .amenities .vr {
	background-color: 					var(--white);
	opacity: 							1;
	margin: 							0 15px;
}

.banner .background .firstRow .rightInformation .options {
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								10px;
}

.banner .background .firstRow .rightInformation .options .btnDetails,
.banner .background .firstRow .rightInformation .options .btnVisit {
	width: 								100%;
	padding: 							10px 15px;
}

.banner .background .firstRow .rightInformation .options .btnDetails::after {
	background: 						var(--brown);
}

.banner .background .firstRow .rightInformation .options .btnDetails:hover:after {
	background: 						var(--black);
}

.banner .background .firstRow .rightInformation .options .btnVisit::before {
	padding: 							10px 15px;
}

.banner .background .secondRow {
	display: 							flex;
	flex-flow: 							row nowrap;
	justify-content: 					center;
	gap: 								25px;
	padding-inline: 					60px 125px;
	margin-bottom: 						20px;
}

.banner .background .secondRow .infoCard {
	flex: 								0 0 400px;
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								20px;
	align-items: 						center;
	justify-content: 					center;
	padding: 							25px 70px;
	background-color: 					var(--transparency);
	border-radius: 						20px;
	backdrop-filter: 					blur(5px);
}

.banner .background .secondRow .infoCard .icon {
	object-fit: 						contain;
	object-position: 					center center;
}

.banner .background .secondRow .infoCard .info .first {
	display: 							flex;
	flex-flow: 							row wrap;
	column-gap: 						10px;
	align-items: 						center;
}

.banner .background .secondRow .infoCard .info .first .firstIcon,
.banner .background .secondRow .infoCard .info .first .secondIcon {
	font-size: 							30px;
	color: 								var(--beige);
}

.banner .background .secondRow .infoCard .info .first animateNumber {
	font-size: 							50px;
	font-weight: 						700;
	color: 								var(--white);
	line-height: 						50px;
}

.banner .background .secondRow .infoCard .info h4 {
	font-weight: 						500;
	color: 								var(--beige);
}
/* END BANNER */

/* START DESCRIPTION */
.descriptionSection {
	margin-bottom: 						210px;
}

.descriptionSection .leftSide {
	padding: 							30px 0 10px 50px;
}

.descriptionSection .leftSide .title {
	font-weight: 						700;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	margin-bottom: 						40px;
	text-transform: 					uppercase;
	letter-spacing: 					5px;
}

.descriptionSection .leftSide .description {
	font-size: 							40px;
	font-weight: 						250;
	color: 								var(--brown);
	margin-bottom: 						40px;
}

.descriptionSection .leftSide .btnContact {
	width: 								fit-content;
	gap: 								40px;
}

.descriptionSection .leftSide .btnContact::after {
	background: 						var(--beige);
}

.descriptionSection .leftSide .btnContact:hover:after {
	background: 						var(--gold);
}

.descriptionSection .rightSide .image {
	height: 							100%;
	object-fit: 						contain;
	object-position: 					center center;
	position: 							absolute;
	top: 								20px;
	right: 								-45px;
	bottom: 							0;
	margin: 							auto;
}

.descriptionSection .texture {
	width: 								auto;
	height: 							85%;
	object-fit: 						contain;
	object-position: 					center center;
	position: 							absolute;
	top: 								-100px;
	right: 								-50px;
	bottom: 							0;
	margin: 							auto 0;
	padding: 							0;
	z-index: 							-1;
}
/* END DESCRIPTION */

/* START EXPERTISE */
.expertise {
	margin-bottom: 						150px;
}

.expertise .row {
	position: 							relative;
	background-color: 					var(--brown);
	border-radius: 						30px;
	padding-block:  					130px 60px;
}

.expertise .row .title {
	margin-bottom: 						10px;
	color: 								var(--beige);
	line-height: 						47px;
}

.expertise .row .title cc {
	color: 								var(--white);
}

.expertise .row .description {
	color: 								var(--beige);
	font-weight: 						300;
	margin-bottom: 						30px;
	line-height: 						20px;
}

.expertise .row .btnContact {
	width: 								fit-content;
	gap: 								40px;
}

.expertise .row .btnContact::after {
	background: 						var(--beige);
}

.expertise .row .btnContact:hover::after {
	background: 						var(--gold);
}

.expertise .row .texture {
	width: 								auto;
	height: 							95%;
	position: 							absolute;
	left: 								0;
	bottom: 							0;
	padding:							0;
}

.expertise .row .image {
	width: 								auto;
	height: 							118%;
	position: 							absolute;
	left: 								0;
	bottom: 							0;
	padding:							0;
}
/* END EXPERTISE */

/* START REALITY */
.reality {
	margin-bottom: 						150px;
}

.reality .information {
	display: 							flex;
	flex-flow: 							column nowrap;
	gap: 								20px;
	align-items: 						center;
	text-align: 						center;
}

.reality .information .title {
	font-weight: 						700;
	letter-spacing: 					5px;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	text-transform: 					uppercase;
}

.reality .information .description {
	width: 								60%;
	font-weight: 						250;
	color: 								var(--brown);
}

.reality .information .rowData {
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								25px;
}

.reality .information .rowData .wrapper {
	padding: 							0 105px;
}

.reality .information .rowData .wrapper .number {
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								10px;
	align-items: 						center;
	justify-content: 					center;
}

.reality .information .rowData .wrapper .number animateNumber {
	font-size: 							90px;
	font-weight: 						600;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
}

.reality .information .rowData .wrapper .number .symbol {
	font-weight: 						900;
	color: 								var(--brown);
}

.reality .information .rowData .wrapper .subtitle {
	color: 								var(--brown);
	font-weight: 						500;
}

.reality .photoLink {
	position: 							relative;
	width: 								100%;
	height: 							450px;
	margin-top: 						25px;
}

.reality .photoLink .image {
	width: 								inherit;
	height: 							inherit;
	object-fit: 						cover;
	object-position: 					center center;
}

.reality .photoLink .btnReality {
	display: 							flex;
	align-items: 						center;
	gap: 								100px;
	padding: 							15px;
	background-color: 					rgba(0, 0, 0, 0.6);
	border-radius: 						20px;
	backdrop-filter: 					blur(10px);
	border: 							0.5px solid rgba(255, 255, 255, 0.3);
	font-size: 							16px;
	font-weight: 						900;
	color: 								var(--white);
	position: 							absolute;
	right: 								25px;
	bottom: 							130px;
}

.reality .photoLink .btnReality::after {
	content: 							"";
	width: 								50px;
	height: 							50px;
	background: 						url("../images//diagonalArrow.svg") center center no-repeat;
	background-size: 					40px 40px;
	background-color: 					var(--transparency);
	border-radius: 						50px;
}
/* END REALITY */

/* START OUR CLIENTS */
.ourClients {
	position: 							relative;
	margin-bottom: 						150px;
}

.ourClients .title {
	width: 								fit-content;
	margin-bottom: 						40px;
	padding-left: 						calc(50% - 660px);
}

.ourClients .title cc {
	color: 								var(--brown);
}

.ourClients .arrows {
	width: 								fit-content;
	height: 							62px;
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								25px;
	align-items: 						center;
	position: 							absolute;
	top: 								0;
	right: 								calc(50% - 660px);
}

.ourClients .arrows .leftArrow {
	transform: 							rotate(180deg);
}

.ourClients .arrows .leftArrow,
.ourClients .arrows .rightArrow {
	cursor: 							pointer;
}

.ourClients .clientSlick {
	height: 							365px;
}

.ourClients .clientSlick .slick-list {
	height: 							100%;
	padding-left: 						calc(50% - 660px);
}

.ourClients .clientSlick .slick-list .slick-track {
	height: 							100%;
}

.ourClients .clientSlick .slickCard {
	width: 								545px !important;
	height: 							100%;
	display: 							flex;
	flex-flow: 							column nowrap;
	gap: 								10px;
	background-color: 					#FFFFFF;
	padding: 							30px;
	border-radius: 						30px;
	margin-right: 						25px;
	transition: 						all 0.3s ease-in-out;
}

.ourClients .clientSlick .slickCard::before {
	content: 							"";
	width: 								55px;
	height: 							55px;
	mask-image: 						url("../images/quoted.svg");
	mask-position: 						center center;
	mask-repeat: 						no-repeat;
	mask-size:							55px 55px;
	margin: 							0 0 0 auto;
	background: 						var(--brown);
	transition: 						all 0.3s ease-in-out;
}

.ourClients .clientSlick .slickCard .cardTitle {
	font-weight: 						900;
	color: 								var(--brown);
	margin-bottom: 						0;
	transition: 						all 0.3s ease-in-out;
}

.ourClients .clientSlick .slickCard .description {
	font-weight: 						300;
	color: 								var(--brown);
	margin-bottom: 						0;
	transition: 						all 0.3s ease-in-out;
}

.ourClients .clientSlick .slickCard .portrait {
	display: 							block;
	width: 								50px;
	height: 							50px;
	object-fit: 						cover;
	object-position: 					center center;
	border-radius: 						30px;
	border: 							1px solid rgba(242, 242, 242, 1);
	margin-top: 						auto;
}

.ourClients .clientSlick .slickCard.slick-current {
	background-color: 					var(--brown);
}

.ourClients .clientSlick .slickCard.slick-current::before {
	background: 						var(--gold);
}

.ourClients .clientSlick .slickCard.slick-current .cardTitle {
	color: 								var(--white);
}

.ourClients .clientSlick .slickCard.slick-current .description {
	color: 								#FFFFFF;
}
/* END OUR CLIENTS */

/* START FAQ */
.faq {
	margin-bottom: 						150px;
}

.faq .leftSide .title {
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	margin-bottom: 						10px;
	font-weight: 						700;
	letter-spacing: 					5px;
	text-transform: 					uppercase;
}
.faq .leftSide .question {
	margin-bottom: 						10px;
}

.faq .leftSide .description {
	font-weight: 						300;
	color: 								var(--brown);
	margin-bottom: 						30px;
}

.faq .leftSide .image {
	width: 								100%;
	object-fit: 						contain;
	object-position: 					center center;
}

.faq .rightSide .wrapperFaq {
	position: 							relative;
	border-radius: 						30px;
	padding: 							35px 120px 35px 25px;
	cursor: 							pointer;
	transition: 						all 0.3s ease-in-out;
}

.faq .rightSide .wrapperFaq::after {
	content: 							"";
	width: 								50px;
	height: 							50px;
	background: 						url("../images/diagonalArrow.svg") center center no-repeat;
	background-size: 					40px 40px;
	background-color: 					var(--transparency);
	border-radius: 						50px;
	position: 							absolute;
	top: 								25px;
	right: 								25px;
	transform: 							rotate(90deg);
	transition: 						all 0.3s ease-in-out;
}

.faq .rightSide .wrapperFaq.show {
	background-color: 					var(--brown);
}

.faq .rightSide .wrapperFaq.show::after {
	transform: 							rotate(0deg);
}

.faq .rightSide .wrapperFaq .question {
	font-weight: 						900;
	color: 								var(--brown);
	margin-bottom: 						10px;
	pointer-events: 					none;
	transition: 						all 0.3s ease-in-out;
}

.faq .rightSide .wrapperFaq .answer {
	font-weight: 						300;
	color: 								var(--white);
	transition: 						all 0.3s ease-in-out;
	max-height: 						0;
	overflow: 							hidden;
	pointer-events: 					none;
}
.faq .rightSide .wrapperFaq.show .question {
	color: 								var(--beige);
}

.faq .rightSide .wrapperFaq.show .answer {
	max-height: 						100px;
}
/* END FAQ */

@media (max-width: 991px) {
	/* START BANNER */
	.banner {
		width: 								100%;
		height: 							725px;
		padding: 							0;
		margin-top: 						-75px;
		margin-bottom: 						85px;
	}

	.banner .background {
		gap: 								0;
		border-radius: 						0;
		padding-inline: 					0;
		padding-top: 						115px;
	}

	.banner .background .firstRow {
		text-align: 						center;
		margin-bottom: 						auto;
		margin-top: 						0;
	}

	.banner .background .firstRow .leftInformation {
		width:								100%;
	}

	.banner .background .firstRow .leftInformation .title {
		padding: 							0 20px;
		margin-bottom: 						15px;
	}

	.banner .background .firstRow .leftInformation .description {
		width: 								100%;
		padding: 							0 20px;
	}

	.banner .background .firstRow .leftInformation .btnContact {
		gap: 								50px;
		margin: 							0 auto;
		padding: 							20px;
	}

	.banner .background .firstRow .leftInformation .btnContact::before {
		text-align: 						start;
		padding: 							20px;
	}

	.banner .background .firstRow .leftInformation .btnContact::after {
		background: 						var(--beige);
	}

	.banner .background .firstRow .leftInformation .btnContact:hover:after {
		background: 						var(--gold);
	}

	.banner .background .firstRow .rightInformation {
		display: 							none;
	}

	.banner .background .secondRow {
		justify-content: 					unset;
		gap: 								5px;
		padding: 							0 5px 5px;
		margin-bottom: 						-30px;
		overflow-x: 						auto;
	}

	.banner .background .secondRow::-webkit-scrollbar {
		display: 							none;
	}

	.banner .background .secondRow .infoCard {
		flex: 								0 0 250px;
		flex-flow: 							column nowrap;
		padding: 							25px 30px;
	}

	.banner .background .secondRow .infoCard .info .first {
		justify-content: 					center;
		column-gap: 						5px;
	}

	.banner .background .secondRow .infoCard .info .first .firstIcon,
	.banner .background .secondRow .infoCard .info .first .secondIcon {
		font-size: 							15px;
	}

	.banner .background .secondRow .infoCard .info .first animateNumber {
		font-size: 							30px;
		line-height: 						25px;
	}
	/* END BANNER */

	/* START DESCRIPTION */
	.descriptionSection {
		margin-bottom: 						60px;
	}

	.descriptionSection .leftSide {
		text-align: 						center;
		padding: 							0;
		margin-bottom: 						30px;
	}

	.descriptionSection .leftSide .title {
		margin-bottom: 						20px;
	}

	.descriptionSection .leftSide .description {
		font-size: 							25px;
		margin-bottom: 						20px;
	}

	.descriptionSection .leftSide .btnContact {
		gap: 								50px;
		margin: 							0 auto;
	}

	.descriptionSection .rightSide .image {
		width: 								100%;
		height:								auto;
		position: 							relative;
		top: 								0;
		right: 								0;
		bottom: 							0;
		margin: 							unset;
	}

	.descriptionSection .texture {
		width: 								100%;
		height: 							auto;
		position: 							absolute;
		top: 								unset;
		right: 								0;
		bottom: 							35px;
		left: 								5px;
		margin: 							unset;
	}
	/* END DESCRIPTION */

	/* START EXPERTISE */
	.expertise {
		margin-bottom: 						70px;
	}

	.expertise .row {
		background-color: 					transparent;
		padding-block:  					0;
		text-align: 						center;
	}

	.expertise .row > div {
		background-color: 					var(--brown);
	}

	.expertise .row > div:nth-of-type(1) {
		position: 							relative;
		border-radius:  					0 0 30px 30px;
		overflow: 							hidden;
	}

	.expertise .row > div:nth-of-type(2) {
		border-radius:  					30px 30px 0 0;
		padding: 							40px 30px 0;
	}

	.expertise .row .title {
		font-size: 							25px;
		margin-bottom: 						15px;
		line-height: 						100%;
	}

	.expertise .row .description {
		margin-bottom: 						15px;
	}

	.expertise .row .btnContact {
		text-align: 						start;
		gap: 								50px;
		margin: 							0 auto;
		margin-bottom: 						20px;
	}

	.expertise .row .texture {
		width: 								100%;
		height: 							auto;
	}

	.expertise .row .image {
		width: 								100%;
		height: 							auto;
		position: 							relative;
	}
	/* END EXPERTISE */

	/* START REALITY */
	.reality {
		margin-bottom: 						70px;
	}

	.reality .container {
		padding: 							0;
	}

	.reality .information {
		padding-inline: 					calc(0.5 * 1.5rem);
	}

	.reality .information .description {
		width: 								100%;
	}

	.reality .information .rowData {
		flex-flow: 							column nowrap;
	}

	.reality .information .rowData .wrapper .number {
		gap: 								5px;
	}

	.reality .information .rowData .wrapper .number animateNumber {
		font-size: 							30px;
		line-height: 						100%;
	}

	.reality .information .rowData .wrapper .number .symbol {
		font-size: 							15px;
	}

	.reality .photoLink {
		width: 								100%;
		height: 							235px;
	}

	.reality .photoLink .btnReality {
		width: 								fit-content;
		gap: 								50px;
		padding: 							10px 15px;
		border-radius: 						20px;
		font-size: 							14px;
		right: 								0;
		bottom: 							10px;
		left: 								0;
		margin: 							0 auto;
	}

	.reality .photoLink .btnReality::after {
		width: 								25px;
		height: 							25px;
		background-size: 					20px 20px;
	}
	/* END REALITY */

	/* START OUR CLIENTS */
	.ourClients {
		margin-bottom: 						70px;
	}

	.ourClients .title {
		font-size: 							25px;
		margin-bottom: 						15px;
		padding-left: 						calc(50% - 175px);
	}

	.ourClients .arrows {
		display: 							none;
	}

	.ourClients .clientSlick {
		height: 							370px;
	}

	.ourClients .clientSlick .slick-list {
		padding-left: 						calc(50% - 175px);
	}

	.ourClients .clientSlick .slickCard {
		width: 								280px !important;
		padding: 							20px;
		margin-right: 						5px;
	}

	.ourClients .clientSlick .slickCard::before {
		width: 								30px;
		height: 							30px;
		mask-size:							30px 30px;
	}

	.ourClients .clientSlick .slickCard .cardTitle {
		font-size: 							14px;
	}
	/* END OUR CLIENTS */

	/* START FAQ */
	.faq {
		margin-bottom: 						100px;
	}

	.faq .leftSide .question {
		font-size: 							25px;
	}

	.faq .leftSide .description {
		font-weight: 						300;
		color: 								var(--brown);
		margin-bottom: 						20px;
	}

	.faq .leftSide .image {
		display: 							none;
	}

	.faq .rightSide .wrapperFaq {
		padding: 							15px 85px 15px 15px;
	}

	.faq .rightSide .wrapperFaq::after {
		width: 								30px;
		height: 							30px;
		background-size: 					15px 15px;
		top: 								15px;
		right: 								15px;
	}
	/* END FAQ */
}