/* Variables */
:root {
    --lilac-primary: #9897F5;
    --lilac-secondary: #8E8EBB;
    --lilac-tertiary: rgb(210, 210, 255);    
}

body {
    font-family: 'Kumbh Sans';
}

h1, h2, h3 {
    font-family: 'Prata';
}

.text-lilac-primary {
    color: var(--lilac-primary);
}

.text-lilac-secondary {
    color: var(--lilac-secondary);
}

.bg-lilac-primary {
    background-color: var(--lilac-primary);
}

.bg-lilac-tertiary {
    background-color: var(--lilac-tertiary);
}

.bg-lilac-gradient {
    background: linear-gradient(to right, #9897F5 0%, #9897F5 50%, #E0E0FA 100%);
}

.bg-white-gradient {
	background:  linear-gradient(to right, #D8D7FF 0%, #FFFFFF 100%);
}

.navbar {
	background-color: transparent;
	height: 5rem;
	display: flex;
	flex-direction: row;
	position: absolute;
	width: 100%;
	align-items: center;
	z-index: 100;
}

.navbar-logo {
	margin-left: 15%;
}

.navbar-logo img {
	width: 10rem;
}

.navbar a {
	position: relative;
	padding-bottom: 0.125rem;
}

.hamburger {
	margin-left: 2rem;
}

.section-list-mobile {
	flex-direction: column;
	background:  rgb(244, 244, 244);
	color: var(--lilac-primary);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 500;
	width: 70%;
	position: absolute;
	top: 0;     
	padding: 1.5rem 2rem;
	border-bottom-right-radius: 1rem;
	z-index: 100;
}

.section-list {
	position: absolute;
	top: 0;
	right: 10%;
	height: 5rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: white;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 500;
}

.section-item:hover {
	color: white;
}

.section-item::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 0.125rem;
	border-radius: 0.25rem;
	background-color: white;
	bottom: -0.25rem;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .4s ease-in-out;
}

.section-item:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}

.nav-icon {
	font-size: 1.5rem;
}

.header {
	width: 100%;
	color: white;
}

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

.header-content {
	margin-left: 15vw;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	width: 30%;
}

.header-text-title {
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 3rem;
	width: 30vw;
}

.section-row {
	display: flex;
	flex-direction: row;
}

.section-aboutme {
	align-items: center;
	justify-content: center;
}

.section-introduction {
	width: 100%;
	color: white;
}

.introduction-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.introduction-content {
	margin-left: 15vh;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	width: 33.3333%;
}

.section-location {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 8rem;
	padding-bottom: 8rem;
}

.section-faq {
	display: flex;                                  
	justify-content: center;
	align-items: center;
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.location-gallery {
	position: absolute;
	display: flex;
	flex-direction: row;
	width: 100%;
	top: -1rem;
}

.location-carousel {
	display: none;
	flex-direction: column;
	width: 100%;
}

.faq-list {
	display: flex;
	flex-direction: column;
	width: 30%;
}

.faq-question {
	flex-direction: row;
	justify-content: space-between;
	border-radius: 0.5rem;
	font-weight: 600;
	width: 100%;
	color: white;
	background-color: var(--lilac-primary);
	padding: 1rem;
}

.faq-question:hover {
	cursor: pointer;
}

.faq-answer {
	flex-direction: column;
	border-radius: 0.5rem;
	padding: 1rem;
	background:  linear-gradient(to top, #E5E5FD 0%, #FFFFFF 50%);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.faq-answer:hover {
	cursor: pointer;
}

.footer {
    display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    background-color: white;
    color: var(--lilac-primary);
    font-size: 0.75rem; 
	line-height: 1rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

#whatsapp:hover {
	animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
}

/* Media Query */

/* Smartphones and Tablets */
@media (max-width: 61.99875rem) {
	.navbar {
		height: 4rem;
	}

	.navbar-logo {
		margin-left: 2rem;
	}

	.navbar-logo img {
		width: 5rem;
	}

	.section-list {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.header {
		display: flex;
		flex-direction: column;
	}

	.header-bg {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.header-content {
		background-color: var(--lilac-primary);
		margin-left: 0;
		align-items: center;
		text-align: center;
		width: 100%;
		padding: 4rem 0rem;
	}

	.header-text-title {
		width: 60%
	}

	.header-text-description {
		width: 60%;
	}

	.section-aboutme {
		padding-top: 4rem;
		flex-direction: column;
		text-align: center;
	}

	.section-aboutme div {
		width: 75%;
		margin-bottom: 4rem;
	}

	.section-aboutme img {
		width: 60%;
	}

    .section-introduction {
		display: flex;
		flex-direction: column;
	}

    .introduction-bg {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

    .introduction-content {
		background-color: rgb(155, 155, 255);
		margin-left: 0;
		align-items: center;
		text-align: center;
		width: 100%;
		padding: 4rem 0rem;
	}

	.introduction-content * {
		width: 70%;
	}

	.introduction-content ul {
		text-align: center;
	}

	.introduction-content ul li {
		display: inline-block;
		text-align: center;
	}

	.section-location {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 0;
	}

	.section-location address {
		width: 60%;
		text-align: center;
	}

	.location-gallery {
		display: none;
	}

	.location-carousel {
		display: flex;
	}

	.map-wrapper {
		width: 70%;
		margin-bottom: 4rem;
		margin-top: 6rem;
	}

	.faq-list {
		width: 60%;
	}
}

/* Desktops */
@media (min-width: 62rem) {
	.hamburger {
		display: none;
	}

	.section-list {
		display: flex;
	}

	.header {
		height: 100vh;
		position: relative;
	}

	.header-content {
		position: absolute;
		top: 0;
	}

	.section-aboutme {
		height: 100vh;
	}

	.section-aboutme img {
		margin-right: 3.5rem;
		width: 80%;
	}

    .section-introduction {
		height: 100vh;
		position: relative;
	}

    .introduction-content {
		position: absolute;
		top: 0;
	}

	.section-location {
		flex-direction: row;
	}

	.section-location address {
		margin-top: 18rem;
	}

	.map-wrapper {
		width: 35%;
		margin-right: 4rem;
		margin-top: 18rem;
	}
}

/* Animations */
@keyframes shake {
	10%, 90% {
		transform: translate3d(-0.0625rem, 0, 0);
	}

	20%, 80% {
		transform: translate3d(0.125rem, 0, 0);
	}
	
	30%, 50%, 70% {
		transform: translate3d(-0.125rem, 0, 0);
	}

	40%, 60% {
		transform: translate3d(0.125rem, 0, 0);
	}
}