*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-size: 62.5%;

	/* Colors */
	--color-primary: #730039;
	--color-primary-m-light: hsla(330, 100%, 23%, 0.55);
	--color-primary-m-dark: hsla(330, 100%, 23%, 0.85);

	--color-secondary: #ffc513;
	--color-secondary-m-light: hsla(45, 100%, 54%, 0.55);
	--color-secondary-m-dark: rgba(255, 196, 19, 0.85);

	--color-tertiary: #ff724c;
	--color-tertiary-m-light: hsla(13, 100%, 65%, 0.55);
	--color-tertiary-m-dark: rgba(255, 115, 76, 0.85);

	--color-quaternary: #f6eedf;
	--color-quaternary-m-light: hsla(39, 56%, 92%, 0.55);
	--color-quaternary-m-dark: hsla(39, 56%, 92%, 0.85);

	/* Transtion Duration */
	--transition-duration: 0.3s;

	/* Section Title Font Size */
	--font-size-title: calc(2rem + 2vw);

	/* Section Padding */
	--padding-section: 8vh 3vw;
}

body {
	font-family: "Titillium Web", sans-serif;
	line-height: 1.7;
	background-color: var(--color-quaternary);
}

.container {
	display: grid;
	grid-template-columns: [container-start] 1fr [center-start]
		repeat(10, [col-start] minmax(min-content, 11rem) [col-end]) [center-end] 1fr [container-end];

	grid-template-rows: 100vh repeat(8, min-content);
}

/* Anchor Tags */
a:link,
a:visited {
	color: var(--color-quaternary);
	text-decoration: none;
	font-size: calc(.5rem + 1vw);
	padding: 1rem 2rem;
	border-radius: .3rem;
	position: relative;
	transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
	z-index: 1;
}

/* Paragraphs */
p {
	color: #fff;
	font-size: calc(1rem + 1vw);
	font-weight: 200;
}

/* List Items */
li {
	list-style: none;
	margin-bottom: 4rem;
}

/* Icons */
i {
	font-size: var(--font-size-title);
	color: var(--color-secondary);
}
.container section {
	height: 40rem;
}

/* SECTION HEADER */
#header {
	grid-column: container-start / container-end;

	background: linear-gradient(var(--color-primary-m-light), var(--color-primary-m-light)), url(../img/hero.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

.header-main__nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6;
}

.header-main__nav input[type="checkbox"] {
	position: absolute;
	top: 3rem;
	left: 3rem;
	height: 5rem;
	width: 5rem;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

/* hamburger */
.header-main__nav--hamburger {
	position: absolute;
	top: 3rem;
	left: 3rem;
	height: 5rem;
	width: 5rem;
	padding: 1rem;
	background-color: var(--color-secondary);
	z-index: 2;

	display: grid;
	place-items: center;

	animation: hamburger-rotate 2s;
}

/* Hamburger Animation */
@keyframes hamburger-rotate {
	0% {
		transform: translateX(150rem) rotate(1800deg);
		opacity: 0;
	}

	100% {
		transform: translateX(0) rotate(0);
		opacity: 1;
	}
}

/* hamburger middle line */
.header-main__nav--hamburger > div {
	position: relative;
	height: .3rem;
	width: 100%;
	background-color: var(--color-quaternary);

	display: grid;
	place-items: center;
	transition: all var(--transition-duration) ease-in-out;
}

/* hamburger Top and Bottom Lines */
.header-main__nav--hamburger > div::before,
.header-main__nav--hamburger > div::after {
	content: '';
	position: absolute;
	top: -1rem;
	width: 60%;
	height: inherit;
	background-color: inherit;
	z-index: 2;
}

.header-main__nav--hamburger > div::before {
	left: 0;
}

.header-main__nav--hamburger > div::after {
	top: 1rem;
	right: 0;
}

.header-main__nav input[type="checkbox"]:checked + .header-main__nav--hamburger > div {
	transform: rotate(135deg);
}

.header-main__nav input[type="checkbox"]:checked + .header-main__nav--hamburger > div::before {
	left: 0;
	top: 0;
	width: 100%;
	transform: rotate(270deg);
}

.header-main__nav input[type="checkbox"]:checked + .header-main__nav--hamburger > div::after {
	opacity: 0;
}

.header-main__nav input[type="checkbox"]:checked:hover + .header-main__nav--hamburger > div {
	transform: rotate(405deg);
}

/* links Menu */
.header-main__nav--menu {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	overflow: hiddden;

	display: grid;
	place-items: center;
}

.header-main__nav--menu > div {
	background-color: var(--color-secondary-m-dark);
	height: 200%;
	width: 200%;

	display: grid;
	place-items: center;

	transform: scaleX(0);
	transition: all .5s ease-in-out;
}

.header-main__nav--menu > div > div {
	text-align: center;
	max-width: 90vw;
	max-height: 100vh;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}

/* Display the Menu when the Checkbox is Checked */
.header-main__nav input[type="checkbox"]:checked ~ .header-main__nav--menu {
	visibility: visible;
}

.header-main__nav input[type="checkbox"]:checked ~ .header-main__nav--menu > div {
	transform: scaleX(1);
}

.header-main__nav input[type="checkbox"]:checked ~ .header-main__nav--menu > div > div {
	opacity: 1;
}

/* Styling the links and Anchor Tags */
.header-main__nav--menu ul li a:link,
.header-main__nav--menu ul li a:visited {
	position: relative;
	z-index: index 5;
	font-size: calc(1.5rem + .5vw);
}

.header-main__nav--menu ul li a:link::before,
.header-main__nav--menu ul li a:visited::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color-primary-m-dark);
	z-index: -1;
	transform: scaleY(0);
	transition: transform var(--transition-duration) ease-in-out;
}

.header-main__nav--menu ul li a:link:hover::before,
.header-main__nav--menu ul li a:visited:active::before {
	transform: scaleY(1);
}

/* Showcase */
.header-showcase {
	display: grid;
	grid-template-columns: 1fr minmax(30rem, 1fr) 1fr;
	grid-template-rows: min-content;
	height: 90%;
	justify-items: center;
}

.header-showcase__logo {
	grid-column: 2 / 3;
	letter-spacing: .2rem;
}

.header-showcase__logo span {
	color: var(--color-tertiary);
	font-size: 3rem;
	font-family: 'Times New Roman', Times, serif;
}

.header-showcase__content {
	grid-column: 1 / -1;
	align-self: center;
}

.header-showcase__content--title {
	font-size: calc(4rem + 4vw);
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
	padding: 0 2rem 0 var(--font-size-title);
}

.header-showcase__content--para {
	font-size: calc(1rem + 2vw);
	font-weight: 500;
	padding: 2vh 2rem 6vh var(--font-size-title);
}

.header-showcase__content--link:link,
.header-showcase__content--link:visited {
	margin-left: var(--font-size-title);
	border: .2rem solid var(--color-tertiary);
}

.header-showcase__content--link:link::before,
.header-showcase__content--link:visited::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color-tertiary);
	transform: scaleX(0);
	transition: transform .45s cubic-bezier(1, 0, 0, 1);
	z-index: -1;
}

.header-showcase__content--link:link:hover::before,
.header-showcase__content--link:visited:active::before {
	transform: scaleX(1);
	border: none;
}

/* BOOKING CONTENT SECTION */
#booking-content {
	height: auto;
	grid-column: center-start / col-end 6;
	padding: var(--padding-section);

	display: grid;
	grid-template-rows: repeat(3, max-content);
	grid-gap: 2vh;
}

.booking-content__title {
	font-size: var(--font-size-title);
	padding: 0 2rem 1rem;
	font-weight: 300;
	position: relative;
}

.booking-content__title::after {
	content: '';
	position: absolute;
	left: 15%;
	bottom: 0%;
	height: .2rem;
	width: 30%;
	background-color: var(--color-secondary);
}

.booking-content__para {
	padding: 2rem;
}

section#booking-content p {
	color: var(--color-primary);
}

.booking-content__icons {
	margin-left: 2rem;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.booking-content__icons--weather,
.booking-content__icons--time {
	display: grid;
	grid-template-columns: .5fr 1fr;
	grid-template-rows: 10vh;
	justify-items: start;
	align-items: center;
}

/* BOOKING DATE SECTION */
#booking-date {
	height: auto;
	grid-column: col-start 7 / center-end;
	padding: var(--padding-section);

	display: grid;
	grid-template-rows: repeat(2, 1fr);
}

.booking-date__schedule {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 2vw;
	place-items: center;
}

.booking-date__schedule--arrival,
.booking-date__schedule--departure,
.booking-date__schedule--guests {
	display: grid;
	grid-row-gap: 3vh;
}

.booking-date__schedule--arrival h5,
.booking-date__schedule--departure h5,
.booking-date__schedule--guests h5 {
	font-size: calc(1rem + 1vw);
	text-align: center;
}

.booking-date__schedule--arrival > div,
.booking-date__schedule--departure > div,
.booking-date__schedule--guests > div {
	background-color: var(--color-secondary);
	padding: 2rem 4rem;

	display: grid;
	grid-template-rows: repeat(3, 1fr);
	place-items: center;
	position: relative;
}

.booking-date__schedule--arrival > div::before,
.booking-date__schedule--departure > div::before,
.booking-date__schedule--guests > div::before {
	content: '';
	position: absolute;
	bottom: 99%;
	left: 50%;
	border-width: 1.5rem;
	border-style: solid;
	border-color: transparent transparent var(--color-secondary) transparent;
	margin-left: -1.5rem;
}

.booking-date__schedule--arrival > div p:nth-of-type(2),
.booking-date__schedule--departure > div p:nth-of-type(2),
.booking-date__schedule--guests > div p:nth-of-type(2) {
	font-size: 3rem;
	font-weight: 700;
}

.booking-date__contact {
	align-self: flex-end;
}

.booking-date__contact p {
	color: var(--color-primary);
}

.booking-date__contact--link:link,
.booking-date__contact--link:visited {
	background-color: var(--color-secondary);
	color: #fff;
	transition: all var(--transition-duration) ease-in-out;
}

.booking-date__contact--link:hover,
.booking-date__contact--link:active {
	color: var(--color-secondary);
	background-color: #fff;
	border: .1rem var(--color-secondary) solid;
}

.booking-date__contact p:first-of-type {
	margin-top: 4rem;
}

.booking-date__contact p:first-of-type,
.booking-date__contact p:nth-of-type(2),
.booking-date__contact p:nth-of-type(3) {
	font-size: 2rem;
}

/* VILLAS SECTION */
#villas {
	height: auto;
	grid-column: container-start /container-end;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	grid-gap: 2rem;
}

div[class^="villas"] {
	padding: 2rem;
	background-position: center;
	background-size: cover;
	transition: transform var(--transition-duration) ease-in-out;
}

div[class^="villas"]:hover,
div[class^="villas"]:active {
	transform: scale(1.05);
}

div[class^="villas"] h2[class^="villas"] {
	font-size: var(--font-size-title);
	padding: 0 2rem 1rem 0;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
}

div[class^="villas"] p[class^="villas"] {
	font-size: 2rem;
	margin: 1.5rem 0 4rem 0;
	color: #fff;
	font-weight: 500;
}

div[class^="villas"] a[class^="villas"]:link,
div[class^="villas"] a[class^="villas"]:visited {
	display: inline-block;
	margin-bottom: 2rem;
	background-color: #fff;
	color: var(--color-primary);
	z-index: 2;
	overflow: hidden;
}

div[class^="villas"] a[class^="villas"]:hover,
div[class^="villas"] a[class^="villas"]:active {
	color: #fff;
}

div[class^="villas"] a[class^="villas"]:link::before,
div[class^="villas"] a[class^="villas"]:visited::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0%;
	z-index: -1;
	background-color: var(--color-secondary);
	transition: height var(--transition-duration) ease-in-out;
}

div[class^="villas"] a[class^="villas"]:hover::before,
div[class^="villas"] a[class^="villas"]:active::before {
	height: 400%;
}

div[class^="villas"]:nth-child(n) a[class^="villas"]:link::before,
div[class^="villas"]:nth-child(n) a[class^="villas"]:visited::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

div[class^="villas"]:nth-child(2n) a[class^="villas"]:link::before,
div[class^="villas"]:nth-child(2n) a[class^="villas"]:visited::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.villas-villa__1 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)),
		url(../img/Villas/villa-1.jpg);
}
.villas-villa__2 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)),
		url(../img/Villas/villa-2.jpg);
}
.villas-villa__3 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)),
		url(../img/Villas/villa-3.jpg);
}
.villas-villa__4 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)), url(/img/Villas/villa-4.jpg);
}
.villas-villa__5 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)),
		url(../img/Villas/villa-5.jpg);
}
.villas-villa__6 {
	background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-light)),
		url(../img/Villas/villa-6.jpg);
}

/* MOTTO SECTION */
#motto {
	height: auto;
	background-color: var(--color-primary);
	grid-column: container-start / container-end;
	padding: 10vh 3vw;
}

.motto-content {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.motto-content__title {
	font-size: var(--font-size-title);
	font-weight: 300;
	padding: 0 2rem 1rem;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 2rem;
	position: relative;
}

.motto-content__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 45%;
	height: .2rem;
	width: 10%;
	background-color: #fff;
}

/* EVENT CONTENT SECTION */
#event-content,
#features-content {
	height: auto;
	grid-column: container-start / col-end 9;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#event-content > div,
#features-content > div {
	padding: var(--padding-section);

	display: grid;
	grid-template-areas: "title" "para";
	grid-row-gap: 4vh;
	align-items: center;
	justify-items: start;
}

#event-content > div:first-child {
	background: linear-gradient(var(--color-tertiary-m-light), var(--color-tertiary-m-light)),
		url(../img/Events/beach-party.jpg);
	border-right: .3rem solid var(--color-tertiary);
}

#event-content > div:last-child {
	background: linear-gradient(var(--color-tertiary-m-light), var(--color-tertiary-m-light)),
		url(../img/Events/culture-discovery.jpg);
	border-left: .3rem solid var(--color-tertiary);
}

#event-content > div:first-child,
#event-content > div:last-child {
	background-size: cover;
	background-position: center;
}

#event-content > div h2[class*="title"],
#features-content > div h2[class*="title"] {
	grid-area: title;
	font-size: var(--font-size-title);
	font-weight: 400;
	color: #fff;
}

#event-content > div p[class*="para"],
#features-content > div p[class*="para"] {
	grid-area: para;
	color: #fff;
	font-weight: 500;
}

/* EVENT title SECTION */
#event-header,
#features-header {
	height: auto;
	grid-column: col-start 10 / center-end;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	place-items: center;
}

#event-header {
	background-color: var(--color-tertiary);
}

.event-header__content,
.features-header__content {
	transform: rotate(.25turn);
}

.event-header__content--title,
.gallery-header__content--title,
.features-header__content--title {
	font-size: var(--font-size-title);
	font-weight: 500;
	color: #fff;
	letter-spacing: .2rem;
}

/* GALLERY TEXT SECTION */
#gallery-header {
	height: auto;
	background-color: var(--color-primary);
	grid-column: center-start / col-start;

	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	place-items: center;
}

.gallery-header__content {
	transform: rotate(.75turn);
}

/* GALLERY CAOUSEL SECTION*/
#gallery-carousel {
	grid-column: col-start 2 / container-end;
	height: 90vh;
	overflow: hidden;
	border: solid 0.2rem var(--color-secondary);
	position: relative;
}

/* Image Container */
div.gallery-carousel__img-container {
	/* background-color: lawngreen; */
	height: 100%;
	width: 100%;
	position: relative;
}

/* Image Container List (UL) */
.gallery-carousel__img-container--list {
	position: relative;
	height: 100%;
	width: 100%;
	transition: transform var(--transition-duration) ease-in-out;
}

/* Image Container List Items (LIs) */
.gallery-carousel__img-container--list__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Carousel Images */
.gallery-carousel__img-container--list__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carousel Buttons */
.gallery-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	z-index: 1;
}

/* Button Right */
.gallery-carousel__btn--right {
	right: 0;
}

/* Carousel Nav */
.gallery-carousel__nav {
	/* background-color: red; */
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 5%;
	transform: translateX(-50%);
	margin-bottom: 1rem;

	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: repeat(10, 1fr);
	grid-gap: 3rem;
}

/* Carousel Nav Buttons */
.gallery-carousel__nav--btn {
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	background-color: var(--color-secondary);
	border: none;
	cursor: pointer;
}

/* Current Button/Image */
.current--img {
	background-color: var(--color-primary);
}

/* To hide the arrows */
.hidden {
	display: none;
}

/* FEATURES TEXT SECTION */
#features-header {
	background-color: var(--color-secondary);
}

/* FEATURES CONTENT SECTION */
#features-content > div:first-child {
	background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)),
		url("../img/Features/cocktail.jpg");
	border-right: solid 0.2rem var(--color-secondary);
}

#features-content > div:last-child {
	background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)),
		url("../img/Features/surfing.jpg");
	border-left: solid 0.2rem var(--color-secondary);
}

section#features-content > div:first-child,
section#features-content > div:last-child {
	background-size: cover;
	background-position: left;
}

/* TESTIMONIAL SECTION  */
#testimonials {
	height: auto;
	/* background-color: var(--color-tertiary-m-dark); */
	grid-column: center-start / center-end;
	padding: var(--padding-section);

	display: grid;
	grid-template-columns: repeat(auto-fit, 28rem);
	grid-gap: 5rem;
	place-content: center;
}

.testimonials-card {
	width: 28rem;
	height: 50rem;
	position: relative;
}

.testimonials-card__front,
.testimonials-card__back {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: all 1s ease-in-out;
	backface-visibility: hidden; /*Use to hide the back of an element*/
	transform: perspective(100rem);

	display: grid;
	justify-items: center;
	align-items: flex-start;
	padding: 3rem;
}

.testimonials-card__front h2 {
	background-color: var(--color-secondary-m-light);
	padding: 1rem;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
}

.testimonials-card__back p {
	place-self: center;
	color: var(--color-primary-m-light);
	font-size: 2rem;
	font-weight: 400;
}

.testimonials-card:first-child .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-1.jpg);
}
.testimonials-card:nth-child(2) .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-2.jpg);
}
.testimonials-card:nth-child(3) .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-3.jpg);
}
.testimonials-card:nth-child(4) .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-4.jpg);
}
.testimonials-card:nth-child(5) .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-5.jpg);
}
.testimonials-card:nth-child(6) .testimonials-card__front {
	background-image: url(../img/Testimonials/testimonials-6.jpg);
}

.testimonials-card__back {
	transform: perspective(100rem) rotateY(.5turn);
}

.testimonials-card:hover .testimonials-card__front {
	transform: perspective(100rem) rotateY(.5turn);
}

.testimonials-card:hover .testimonials-card__back {
	transform: perspective(100rem) rotateY(1turn);
	background-color: var(--color-secondary);
}

/* FOOTER */
#footer {
	background-color: var(--color-primary);
	grid-column: container-start / container-end;
	padding: 6vh 4vw;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-items: center;
}

.footer-social__link:link,
.footer-social__link:visited {
	display: inline-block;
	background-color: var(--color-secondary);
	border-radius: 4rem;
	margin-right: 1rem;
	box-shadow: .5rem .5rem 2rem 0.5rem var(--color-secondary-m-light),
		-0.5rem -0.5rem 2rem 0.5rem var(--color-secondary-m-light);
	transform: scale(0.8);
	animation: social 3s linear infinite;
}

.footer-social__link i {
	font-size: 2rem;
	color: var(--color-primary);
}

.footer-social__link:link:nth-child(1),
.footer-social__link:visited:nth-child(1) {
	animation-delay: 0s;
}
.footer-social__link:link:nth-child(2),
.footer-social__link:visited:nth-child(2) {
	animation-delay: .3s;
}
.footer-social__link:link:nth-child(3),
.footer-social__link:visited:nth-child(3) {
	animation-delay: .6s;
}
.footer-social__link:link:nth-child(4),
.footer-social__link:visited:nth-child(4) {
	animation-delay: .9s;
}

@keyframes social {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
		transform: scale(1.2);
	}

	100% {
		opacity: 0;
	}
}