/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
	/**
   * colors
   */

	--dark-jungle-green: hsl(188, 63%, 7%);
	--prussian-blue: hsl(200, 69%, 14%);
	--raisin-black-1: hsl(227, 29%, 13%);
	--raisin-black-2: hsl(229, 17%, 19%);
	--yellow-green: hsl(89, 72%, 45%);
	--orange-soda: hsl(9, 100%, 62%);
	--cultured-1: hsl(0, 0%, 93%);
	--cultured-2: hsl(192, 24%, 96%);
	--misty-rose: hsl(7, 56%, 91%);
	--alice-blue: hsl(210, 100%, 97%);
	--seashell: hsl(8, 100%, 97%);
	--cadet: hsl(200, 15%, 43%);
	--white: hsl(0, 0%, 100%);
	--white-1: hsl(0, 14%, 99%);
	--white-2: hsl(0, 14%, 97%);
	--black: hsl(0, 0%, 0%);
	--opal: hsl(180, 20%, 62%);

	--gold: hsl(41, 62%, 55%);
	--navy: hsl(216, 20%, 20%);

	/**
   * typography
   */

	--ff-nunito-sans: "Nunito Sans", sans-serif;
	--ff-poppins: "Poppins", sans-serif;

	--fs-1: 1.875rem;
	--fs-2: 1.5rem;
	--fs-3: 1.375rem;
	--fs-4: 1.125rem;
	--fs-5: 0.875rem;
	--fs-6: 0.813rem;
	--fs-7: 0.75rem;

	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;

	/**
   * transition
   */

	--transition: 0.25s ease;

	/**
   * spacing
   */

	--section-padding: 80px;
	--section-padding1: 30px;

	/**
   * shadow
   */

	--shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);
	--shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1);

	--radius-2: 2px;
	--radius-5: 5px;
	--radius-8: 8px;
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

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

li {
	list-style: none;
}

a {
	text-decoration: none;
}

a,
img,
span,
time,
label,
input,
button,
textarea,
ion-icon {
	display: block;
}

input,
button,
textarea {
	background: none;
	border: none;
	font: inherit;
}

input,
textarea {
	width: 100%;
}

button {
	border: none;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

address {
	font-style: normal;
}

ion-icon {
	pointer-events: none;
}

html {
	font-family: var(--ff-nunito-sans);
	scroll-behavior: smooth;
}

body {
	background: var(--white);
	overflow-x: hidden;
}

::-webkit-scrollbar {
	width: 10px;
	height: 8px;
	display: none;
}

::-webkit-scrollbar-track {
	background: var(--white);
}

::-webkit-scrollbar-thumb {
	background: var(--cadet);
	border-left: 2px solid var(--white);
}

.fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1.5s ease, transform 1.5s ease;
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0);
}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/
.max-width-80 {
	max-width: 80%;
}
.width-80 {
	width: 80%;
}
.width-90 {
	width: 90%;
}
.container {
	padding-inline: 15px;
}

button,
a {
	transition: var(--transition);
}

.h1,
.h2,
.h3 {
	color: var(--dark-jungle-green);
	font-family: var(--ff-poppins);
	line-height: 1.3;
}

.h1 {
	font-size: var(--fs-1);
	line-height: 1;
}

.h2 {
	font-size: var(--fs-2);
}

.h3 {
	font-size: var(--fs-4);
	font-weight: var(--font-weight, 700);
}

.h3 > a {
	color: inherit;
}

.btn {
	position: relative;
	background: var(--navy);
	color: var(--white);
	font-family: var(--ff-poppins);
	font-size: var(--fs-5);
	text-transform: var(--text-transform, capitalize);
	border: 2px solid var(--gold);
	padding: 10px 20px;
	z-index: 1;
}

.btn a {
	color: var(--white);
}

.btn a:hover {
	color: var(--black);
}

.btn:is(:hover, :focus) {
	background: var(--gold);
	color: var(--black);
	border-color: var(--navy);
}

.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--gold);
	transition: var(--transition);
	z-index: -1;
}

.btn:is(:hover, :focus)::before {
	width: 100%;
}

.w-100 {
	width: 100%;
}

.section-subtitle {
	color: var(--white);
	font-size: var(--fs-5);
	font-weight: var(--fw-600);
	padding: 5px 20px;
	background: var(--navy);
	width: max-content;
	border-radius: 50px;
	margin-inline: auto;
	margin-bottom: 15px;
}

.section-title {
	text-align: var(--text-align, center);
	margin-bottom: var(--margin-bottom, 50px);
	color: var(--gold);
}

.designation {
	font-size: var(--fs-3);
	margin-bottom: var(--margin-bottom, 5px);
	color: var(--navy);
}

.card-badge {
	background: var(--black);
	color: var(--white);
	font-size: var(--fs-7);
	text-transform: uppercase;
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 4px 10px;
}

.card-badge.green {
	background: var(--yellow-green);
}

.card-badge.orange {
	background: var(--orange-soda);
}

.has-scrollbar {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	overflow-x: auto;
	margin-inline: -15px;
	padding-inline: 15px;
	scroll-padding-left: 15px;
	padding-bottom: 60px;
	scroll-snap-type: inline mandatory;
	margin-bottom: 50px;
}

.has-scrollbar > li {
	min-width: 100%;
	scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar {
	height: 8px;
}

.has-scrollbar::-webkit-scrollbar-track {
	background: var(--cultured-2);
	outline: 2px solid var(--cadet);
	border-radius: 10px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
	background: var(--cadet);
	border: 1px solid var(--cultured-2);
	border-radius: 10px;
}

.has-scrollbar::-webkit-scrollbar-button {
	width: 15%;
}

/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
	position: relative;
	z-index: 5;
	/* margin-bottom: 20px; */
	/* opacity: 0.7; */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* z-index: 2; Ensures the header stays on top of other content */
}

.contact-header {
	padding-right: 5%;
	width: 100%;
	text-align: right;
	color: var(--white);
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.contact-header a {
	/* display: inline; */
	/* display: block; */
	color: var(--white);
}

.header-top {
	color: var(--white);
	background: var(--navy);
	/* padding-block: 15px; */
	/* border-bottom: 2px solid var(--gold); */
	/* padding-bottom: 10px; */
}

.container-top {
	display: flex;
}

.bars-icon-container {
	margin-top: 10%;
	padding-right: 20%;
}

.header-top .container,
.header-top-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.header-top .container {
	gap: 8px 20px;
}

.header-top-list {
	gap: 15px;
}

.header-top-link {
	color: var(--white);
	font-size: var(--fs-6);
	font-weight: var(--fw-700);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.header-top-link:is(:hover, :focus) {
	color: var(--gold);
}

.header-top-link ion-icon {
	color: var(--gold);
	font-size: 15px;
	--ionicon-stroke-width: 60px;
}

.header-top .wrapper,
.header-top-social-list {
	display: flex;
	align-items: center;
}

.header-top .wrapper {
	gap: 20px;
}

.header-top-social-list {
	gap: 8px;
}

.header-top-social-link {
	color: var(--white);
	font-size: 15px;
}

.header-top-btn {
	background: var(--gold);
	color: var(--black);
	font-size: var(--fs-6);
	font-weight: var(--fw-700);
	padding: 4px 15px;
}

.header-top-btn:is(:hover, :focus) {
	--orange-soda: hsl(7, 72%, 46%);
}

.header-bottom {
	/* background-color: rgba(0, 0, 0, 0.1); */
	padding-block: 20px;
	position: fixed;
	top: 0;
	width: 100%;
}

.header-bottom .logo img {
	margin-inline: auto;
	width: 150px;
	height: auto;
	margin-top: -10px;
}

.navbar {
	background: var(--white);
	position: fixed;
	top: 0;
	left: -310px;
	max-width: 300px;
	width: 100%;
	height: 100%;
	box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
	z-index: 5;
	padding: 60px 20px;
	visibility: hidden;
	transition: 0.15s ease-in;
}

.navbar.active {
	visibility: visible;
	transform: translateX(310px);
	transition: 0.25s ease-in-out;
}

.navbar-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--gold);
	margin-bottom: 25px;
	top: 0;
}

.navbar-top .logo img {
	width: 180px;
}

.nav-close-btn ion-icon {
	font-size: 30px;
	--ionicon-stroke-width: 45px;
	padding: 5px;
	color: var(--gold);
}

.navbar-link {
	color: var(--cadet);
	font-size: var(--fs-5);
	font-weight: var(--fw-600);
	text-transform: uppercase;
	padding-block: 15px;
}

.navbar-link:is(:hover, :focus) {
	color: var(--gold);
}

video,
img {
	pointer-events: none;
}

.overlay {
	position: fixed;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: var(--transition);
	z-index: 4;
}

.overlay.active {
	opacity: 1;
	pointer-events: all;
}

.header-bottom-actions {
	position: relative;
	z-index: 3;
	width: 10%;
	display: flex;
	justify-content: space-evenly;
}

.header-bottom-actions-btn ion-icon {
	color: var(--gold);
	font-size: 35px;
	margin-inline: auto;
	margin-bottom: -10px;
	--ionicon-stroke-width: 40px;
	transition: var(--transition);
}

.header-bottom-actions-btn:is(:hover, :focus) ion-icon {
	color: var(--gold);
}

.header-bottom-actions-btn span {
	color: var(--cadet);
	font-family: var(--ff-poppins);
	font-size: var(--fs-7);
	font-weight: var(--fw-500);
}

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero {
	/* background-image: url("../images/Main view Night for whole Site.jpg"); */
	padding-block: var(--section-padding);
	background-size: cover;
	background-position: center;
	padding-block: var(--section-padding);
	position: relative;
	margin-top: -160px;
	height: 120vh;
}

.hero-content {
	z-index: 1;
	align-items: center;
	margin-top: 13rem;
}

.hero .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.hero-subtitle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin-bottom: 20px;
}

.hero-subtitle ion-icon {
	color: var(--gold);
}

.hero-subtitle span {
	color: var(--gold);
	font-size: var(--fs-5);
	font-weight: var(--fw-700);
}

.hero-title {
	margin-bottom: 20px;
	color: var(--white);
}

.hero-text {
	color: var(--alice-blue);
	font-size: var(--fs-5);
	line-height: 1.8;
	padding-left: 15px;
	border-left: 1px solid;
	margin-bottom: 30px;
	font-weight: bold;
	/* -webkit-text-stroke-width: 0.5px; */
	/* -webkit-text-stroke-color: black; */
}

.hero-video {
	margin-top: -20px;
	position: relative;
	width: 100%;
	height: 70vh;
	/* Full viewport height */
	overflow: hidden;
}

.about-us-image-container {
	/* Centers the container horizontally on the page */
	margin: 0 auto;
}

.about-us-image-container img {
	/* This is the crucial part for responsiveness */
	width: 100%;
	/* Makes the image take 100% of the container's width */
	height: auto;
	/* Automatically calculates the height to maintain aspect ratio */
	max-height: 600px;
	/* Optional: Ensures images don't exceed their original pixel size on large screens */
	max-width: 100%;
	display: block;
	/* Helps with layout consistency, removes extra space below the image */
}

.background-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures the video covers the entire section */
	transform: translate(-50%, -50%);
	z-index: 1;
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about {
	padding-block: var(--section-padding1);
}

.about-banner {
	position: relative;
	margin-bottom: 40px;
}
.mobile-view-only {
	display: none;
}
.desktop-view-only {
	display: none;
}

.about-banner > img {
	max-width: max-content;
	width: 100%;
	border-radius: 8px;
}

.about-banner .abs-img {
	position: absolute;
	bottom: 100px;
	left: 15px;
	width: 50%;
	border-radius: 4px;
}

.about .section-subtitle {
	margin-bottom: 50px;
	font-size: var(--fs-3);
}

.about .section-title {
	--text-align: left;
	--margin-bottom: 2px;
	color: var(--gold);
}

.about-text {
	color: var(--black);
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 30px;
	text-align: justify;
}

.about-list {
	margin-bottom: 30px;
}

.about-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.about-item-icon {
	background: var(--misty-rose);
	height: 45px;
	min-width: 45px;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.about-item-icon ion-icon {
	color: var(--orange-soda);
	font-size: 18px;
}

.about-item-text {
	color: var(--cadet);
	font-size: var(--fs-5);
}

.about .callout {
	background: var(--navy);
	color: var(--white);
	font-size: 18px;
	font-weight: var(--fw-500);
	line-height: 1.8;
	padding: 20px 25px;
	border-left: 6px solid var(--gold);
	margin-bottom: 40px;
}

.about .btn {
	max-width: max-content;
	--text-transform: uppercase;
}

/*-----------------------------------*\
  #AMINITES
\*-----------------------------------*/

.aminities-carousel {
	padding-top: 3%;
	position: relative;
	overflow: hidden;
	/* Hide the overflow content */
}

.aminities-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	animation: carousel 10s linear infinite;
	/* Auto scroll animation */
}

.aminities-list li {
	flex-shrink: 0;
	width: 300px;
	/* Fixed width of each card */
	margin-right: 20px;
	/* Space between cards */
	position: relative;
	padding-bottom: 60px;
}

.aminities-card {
	overflow: hidden;
	box-shadow: var(--shadow-2);
}

.aminities-card-banner img {
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.aminities-content {
	padding: 15px;
	text-align: center;
	background-color: var(--cultured-2);
	/* Dark overlay */
	bottom: 0;
	width: 100%;
}

.aminities-title {
	font-size: 1.3rem;
	--font-weight: var(--fw-600);
	margin: 10px 0;
}

.aminities-title:is(:hover, :focus) {
	color: var(--gold);
}

/* Carousel scrolling animation */
@keyframes carousel {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
		/* Scroll by one full width */
	}
}

/* Adjust number of visible cards */
@media (min-width: 1200px) {
	.aminities-list {
		gap: 20px;
		width: calc(300px * 6);
		/* For 5 cards visible */
	}

	.aminities-list li {
		width: 300px;
		/* Card width remains the same */
	}
}

@media (max-width: 1200px) {
	.aminities-list {
		width: calc(300px * 6);
		/* For 4 cards visible */
	}

	.aminities-list li {
		width: 300px;
		/* Card width remains the same */
	}
}

@media (max-width: 768px) {
	.aminities-list {
		width: calc(300px * 6);
		/* For 3 cards visible */
	}

	.aminities-list li {
		width: 300px;
		/* Card width remains the same */
	}
}

@media (max-width: 480px) {
	.aminities-list {
		width: calc(300px * 6);
		/* For 2 cards visible */
	}

	.aminities-list li {
		width: 300px;
		/* Card width remains the same */
	}
}

/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

.service {
	/* background: var(--cultured-2); */
	padding-block: var(--section-padding);
}

.master-service-list,
.service-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.master-service-card,
.service-card {
	position: relative;
	background: var(--white);
	text-align: center;
	padding: 30px 10px;
	box-shadow: var(--shadow-2);
}

.master-service-card .card-icon,
.service-card .card-icon {
	width: max-content;
	margin-inline: auto;
	margin-bottom: 20px;
}

.card-icon img {
	width: 300px;
	/* Set width */
	height: auto;
	/* Set height */
	/* Ensures the image covers the area without distortion */
}

.master-card-icon img {
	width: 100%;
	max-width: 900px;
	height: auto;
	margin: auto;
}

.master-service-card .card-title,
.service-card .card-title {
	margin-bottom: 15px;
}

.master-service-card .card-title > a:is(:hover, :focus),
.service-card .card-title > a:is(:hover, :focus) {
	color: var(--gold);
}

.master-service-card .card-text,
.service-card .card-text {
	color: var(--cadet);
	font-size: var(--fs-5);
	line-height: 1.8;
	margin-bottom: 25px;
}

.master-service-card .card-link,
.service-card .card-link {
	color: var(--opal);
	font-size: var(--fs-5);
	font-weight: var(--fw-600);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.master-service-card:is(:hover, :focus) .card-link,
.service-card:is(:hover, :focus) .card-link {
	color: var(--gold);
}

.master-service-card::after,
.service-card::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 4px;
	background: var(--gold);
	transition: var(--transition);
}

.master-service-card:is(:hover, :focus)::after,
.service-card:is(:hover, :focus)::after {
	width: 100%;
}

/*-----------------------------------*\
  #PROPERTY
\*-----------------------------------*/

.property {
	padding-block: var(--section-padding);
}

.property-card {
	border: 1px solid var(--alice-blue);
	box-shadow: var(--shadow-2);
}

.property-card .card-banner {
	position: relative;
	aspect-ratio: 2 / 1.5;
	overflow: hidden;
}

.property-card .card-banner a {
	height: 100%;
}

.property-card .card-banner img {
	height: 100%;
	object-fit: cover;
	transition: 0.9s ease;
}

.property-card:hover .card-banner img {
	transform: scale(1.1);
}

.property-card .card-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, hsla(0, 0%, 0%, 0.95), transparent 30%);
	pointer-events: none;
	z-index: 1;
}

.property-card .banner-actions {
	position: absolute;
	bottom: 15px;
	left: 15px;
	right: 15px;
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	gap: 15px 10px;
	z-index: 1;
}

.banner-actions-btn {
	color: var(--white);
	font-size: var(--fs-6);
	line-height: 1;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.banner-actions-btn ion-icon {
	font-size: 16px;
}

.banner-actions-btn:first-child {
	margin-right: auto;
}

.banner-actions-btn:is(:hover, :focus) {
	color: var(--gold);
}

.property-card .card-content {
	padding: 30px 15px 15px;
	border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
}

.card-price {
	color: var(--black);
	font-family: var(--ff-poppins);
	font-size: var(--fs-5);
	margin-bottom: 5px;
}

.card-price strong {
	font-size: var(--fs-3);
	font-weight: var(--fw-600);
	color: var(--gold);
}

.property-card .card-title {
	--font-weight: var(--fw-600);
	margin-bottom: 15px;
	color: var(--gold);
}

.property-card .card-title > a:is(:hover, :focus) {
	color: var(--navy);
}

.property-card .card-text {
	color: var(--cadet);
	font-size: var(--fs-5);
	line-height: 1.8;
	margin-bottom: 25px;
}

.property-card .card-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 15px;
}

.property-card .card-item {
	padding-block: 5px;
	color: var(--cadet);
	font-size: var(--fs-5);
}

.property-card .card-item:not(:last-child) {
	padding-right: 15px;
	border-right: 1px solid hsla(0, 0%, 0%, 0.2);
	margin-right: 20px;
}

.property-card .card-item :is(strong, ion-icon) {
	display: inline-block;
}

.property-card .card-item ion-icon {
	margin-left: 2px;
	margin-bottom: -2px;
}

.property-card .card-item span {
	margin-top: 5px;
}

.card-footer {
	padding: 15px;
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}

.card-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.author-avatar {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
}

.author-name > a {
	color: var(--dark-jungle-green);
	font-family: var(--ff-poppins);
	font-size: var(--fs-5);
	font-weight: var(--fw-600);
	margin-bottom: 3px;
}

.author-name > a:is(:hover, :focus) {
	color: var(--orange-soda);
}

.author-title {
	color: var(--cadet);
	font-size: var(--fs-7);
}

.card-footer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.card-footer-actions-btn {
	background: var(--cultured-2);
	color: var(--cadet);
	width: 35px;
	height: 35px;
	display: grid;
	place-items: center;
	font-size: 18px;
}

.card-footer-actions-btn:is(:hover, :focus) {
	background: var(--orange-soda);
	color: var(--white);
}

/*-----------------------------------*\
  #FEATURES
\*-----------------------------------*/

.features {
	/* background: var(--cultured-2); */
	padding-block: var(--section-padding);
}

.features-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px 20px;
}

.features-list > li {
	width: calc(50% - 10px);
}

.features-card {
	position: relative;
	background: var(--white);
	padding: 40px 15px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow-1);
}

.features-card:is(:hover, :focus) {
	background: var(--navy);
}

.features-card .card-icon {
	background: var(--cultured-2);
	color: var(--gold);
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 28px;
}

.features-card .card-icon ion-icon {
	--ionicon-stroke-width: 20px;
}

.features-card .card-title {
	color: var(--dark-jungle-green);
	font-family: var(--ff-poppins);
	font-size: var(--fs-6);
	font-weight: var(--fw-600);
	text-align: center;
	transition: var(--transition);
}

.features-card:is(:hover, :focus) .card-title {
	color: var(--white);
}

.features-card .card-btn {
	background: var(--white);
	color: var(--cadet);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 20px;
	border-radius: 50%;
	box-shadow: 0 0 10px hsla(219, 56%, 21%, 0.1);
	transition: var(--transition);
}

.features-card:is(:hover, :focus) .card-btn {
	color: var(--orange-soda);
}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog {
	padding-top: 50px;
	padding-bottom: 10px;
}

.blog-card {
	box-shadow: var(--shadow-2);
}

.blog-card .card-banner {
	overflow: hidden;
	aspect-ratio: 2 / 1.5;
}

.blog-card .card-banner img {
	height: 100%;
	object-fit: cover;
	transition: 0.5s ease;
}

.blog-card:is(:hover, :focus) .card-banner img {
	transform: scale(1.1);
}

.blog-content {
	padding: 30px;
}

.blog-card .card-meta-list {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.blog-card :is(.card-meta-link, .publish-date) {
	color: var(--cadet);
	font-size: var(--fs-7);
	font-weight: var(--fw-600);
	display: flex;
	align-items: center;
	gap: 5px;
	transition: var(--transition);
}

.blog-card :is(.card-meta-link, .publish-date) ion-icon {
	color: var(--orange-soda);
}

.blog-card .card-meta-link:is(:hover, :focus) {
	color: var(--gold);
}

.blog-title {
	font-size: 1rem;
	--font-weight: var(--fw-600);
	text-align: center;
}

.blog-card .blog-title:is(:hover, :focus) {
	color: var(--gold);
}

.blog-content-bottom {
	padding-top: 20px;
	border-top: 1px solid hsla(0, 0%, 0%, 0.1);
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.blog-card .read-more-btn {
	color: var(--orange-soda);
	font-size: var(--fs-7);
	font-weight: var(--fw-600);
	text-transform: uppercase;
}

.map {
	padding-block-start: 60px;
	/* background-color: var(--cultured-2); */
	width: 100%;
}

/*-----------------------------------*\
  #MAP
\*-----------------------------------*/

.section.map {
	padding: 60px 20px;
	/* background-color: var(--cultured-2); */
}

.map-container {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.map-left {
	flex: 1;
	max-width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
}

.map-left .h2 {
	font-size: 2rem;
	margin-bottom: 20px;
	color: var(--navy);
}

.location-advantages {
	list-style: none;
	padding: 0;
	margin: 0;
}

.location-advantages li {
	font-size: 1.2rem;
	line-height: 1.8;
	margin-bottom: 10px;
}

.location-advantages strong {
	color: var(--gold);
}

.map-right {
	flex: 1;
	max-width: 55%;
	position: relative;
	box-shadow: var(--shadow-2);
	overflow: hidden;
}

.map-right iframe {
	border: none;
	width: 100%;
	height: 520px;
}

@media (max-width: 768px) {
	.map-container {
		flex-direction: column;
	}

	.map-left,
	.map-right {
		max-width: 100%;
		width: 100%;
	}

	.map-left .h2 {
		font-size: 1.8rem;
	}
}

/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact {
	background-color: var(--cultured-2);
	padding-block-end: 20px;
}

.contact .section-text {
	margin-block: 5px 35px;
}

.contact-form {
	background-color: var(--white);
	padding: 20px;
	border-radius: var(--radius-2);
	margin-block-end: 30px;
	box-shadow: var(--shadow-1);
}

.input-field {
	background-color: var(--white-2);
	color: var(--navy);
	font-size: var(--fs-5);
	padding: 15px;
	border-radius: var(--radius-2);
	outline: 1px solid transparent;
	outline-offset: 0;
	margin-block-end: 15px;
}

.input-field::-webkit-inner-spin-button {
	display: none;
}

.input-field:focus {
	outline-color: var(--gold);
}

.input-field {
	outline-color: var(--navy);
}

.input-field::placeholder {
	transition: var(--transition-1);
}

.input-field:focus::placeholder {
	opacity: 0;
}

textarea.input-field {
	resize: vertical;
	min-height: 80px;
	height: 100px;
	max-height: 200px;
	overscroll-behavior: contain;
}

.checkbox {
	width: max-content;
	margin-block-start: 5px;
	accent-color: var(--navy);
}

.label-link {
	display: inline-block;
	color: var(--gold);
}

.label-link:is(:hover, :focus) {
	text-decoration: underline;
}

.checkbox-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 15px;
}

.checkbox-wrapper .label {
	font-size: var(--fs-6);
}

/*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta {
	background: linear-gradient(
		to bottom,
		var(--cultured-2) 50%,
		var(--raisin-black-1) 50%
	);
}

.cta-card {
	background: var(--gold);
	padding: 50px 25px;
	box-shadow: var(--shadow-2);
}

.cta-card .card-content {
	max-width: max-content;
	margin-inline: auto;
	margin-bottom: 30px;
}

.cta-card .card-title {
	color: var(--black);
	line-height: 1.3;
	margin-bottom: 15px;
}

.cta-card .card-text {
	color: var(--navy);
	font-size: var(--fs-5);
}

.cta-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--black);
	background: var(--white);
	box-shadow: var(--shadow-2);
	border-color: var(--navy);
	margin-inline: auto;
}

.cta-btn:is(:hover, :focus) {
	background: none;
	color: var(--white);
	border-color: transparent;
	border-color: var(--black);
}

.cta-btn::before {
	background: var(--navy);
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
	background: var(--raisin-black-1);
	color: var(--white);
	margin-bottom: 68px;
}

.footer .container {
	padding-inline: 30px;
}

.footer a {
	color: inherit;
}

.footer-top {
	padding-top: 80px;
	padding-bottom: 40px;
}

.footer-brand {
	margin-bottom: 70px;
}

.footer-brand .logo {
	margin-bottom: 15px;
	margin-top: -20px;
}

.section-text {
	font-size: var(--fs-5);
	line-height: 1.8;
	margin-bottom: 30px;
	max-width: 45ch;
}

.contact-list {
	display: grid;
	gap: 15px;
	margin-bottom: 30px;
	padding-block: 10px;
}

.contact-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.contact-link ion-icon {
	font-size: 18px;
}

.contact-link :is(address, span) {
	font-size: var(--fs-5);
	transition: var(--transition);
}

.contact-link:is(:hover, :focus) span {
	color: var(--gold);
}

.social-list {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block: 10px;
}

.social-list a:hover {
	color: var(--gold);
}

.footer-list:not(:last-child) {
	margin-bottom: 50px;
}

.footer-list-title {
	font-family: var(--ff-poppins);
	font-size: var(--fs-3);
	font-weight: var(--fw-700);
	margin-bottom: 15px;
}

.footer-link {
	font-size: var(--fs-5);
	padding-block: 10px;
}

.footer-link:is(:hover, :focus) {
	color: var(--gold);
}

.footer-bottom {
	/* background: var(--raisin-black-2); */
	padding-block: 25px;
}

.footer-last-info {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.footer-last-info a {
	color: var(--gold);
}

.footer-last-info .web-link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-last-info ion-icon {
	font-size: 20px;
}

.copyright {
	font-size: var(--fs-5);
	text-align: center;
}

.copyright a {
	display: inline-block;
}

.copyright a:is(:hover, :focus) {
	color: var(--gold);
}

/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/

.back-top-btn {
	position: fixed;
	bottom: 10px;
	right: 20px;
	background-color: var(--navy);
	color: var(--white);
	font-size: 14px;
	padding: 12px;
	border-radius: 50px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 4;
}

.back-top-btn.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(-10px);
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

@media (min-width: 150px) {
	.header-bottom .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header.active .header-bottom {
		position: fixed;
		bottom: auto;
		top: 0;
		width: 100%;
		padding-block: 20px;
		/* box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2); */
		animation: slideDown 0.25s ease-in-out forwards;
	}

	.about .container-intro-nowara {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 3%;
	}

	.nowara-intro-ul {
		padding-left: 5%;
		padding-right: 5%;
	}

	.nowara-intro-ul li {
		padding: 1%;
		list-style: disc;
	}

	.container-vision {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 5%;
	}

	.sidenav.open {
		width: 100%;
	}
	.mobile-view-only {
		display: block;
	}
}

/**
 * responsive for larger than 600px screen
 */

@media (min-width: 600px) {
	/**
   * CUSTOM PROPERTY
   */

	:root {
		/**
     * typography
     */

		--fs-2: 1.875rem;
	}

	/**
   * REUSED STYLE
   */

	.container {
		max-width: 550px;
		margin-inline: auto;
	}

	.has-scrollbar {
		gap: 25px;
		margin-inline: -25px;
		padding-inline: 25px;
		scroll-padding-left: 25px;
	}

	.has-scrollbar > li {
		min-width: calc(50% - 12.5px);
	}

	/**
   * SERVICE
   */

	.service-list > li {
		width: calc(50% - 15px);
	}

	.master-service-list > li {
		width: 100%;
	}

	/**
   * PROPERTY
   */

	.property .container {
		max-width: unset;
		padding-inline: 25px;
	}

	/**
   * CONTACT
   */

	.input-wrapper {
		display: flex;
		gap: 15px;
	}

	.contact-item {
		min-width: calc(50% - 18px);
	}

	/**
   * CTA
   */

	.cta-card {
		--fs-2: 1.5rem;
	}

	.about .container-intro-nowara {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 3%;
	}
	.mobile-view-only {
		display: block;
	}
	.desktop-view-only {
		display: none;
	}

	.nowara-intro-ul {
		padding-left: 5%;
		padding-right: 5%;
	}

	.nowara-intro-ul li {
		padding: 1%;
		list-style-type: disc;
	}

	.container-vision {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 5%;
	}

	.sidenav.open {
		width: 100%;
	}

	/**
   * FOOTER
   */

	.footer-link-box {
		display: flex;
		justify-content: space-between;
		gap: 20px;
	}

	.footer {
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
}

/**
 * responsive for larger than 768px screen
 */

@media (min-width: 768px) {
	/**
   * CUSTOM PROPERTY
   */

	:root {
		/**
     * typography
     */

		--fs-1: 2.5rem;
		--fs-5: 0.938rem;
		--fs-6: 0.875rem;
	}

	/**
   * REUSED STYLE
   */

	.container {
		max-width: 720px;
	}

	.btn {
		--fs-5: 1rem;
		padding: 12px 28px;
	}

	/**
   * HEADER
   */

	.header-top {
		padding-block: 5px;
	}

	.header-top .wrapper {
		margin-left: auto;
	}

	.header-top-social-list {
		gap: 12px;
	}

	.header-top-social-link {
		font-size: 1rem;
	}

	.header-top-btn {
		padding: 10px 20px;
	}

	.header-bottom-actions {
		all: unset;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.header-bottom .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
	}

	.hamburger-menu {
		width: 30px;
		height: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
	}

	.bar {
		width: 100%;
		height: 3px;
		background-color: var(--white);
	}

	.header-bottom-actions-btn ion-icon {
		margin-bottom: 0;
	}

	.header-bottom-actions-btn span {
		display: none;
	}

	.header-bottom-actions-btn {
		width: 50px;
		height: 50px;
		box-shadow: var(--shadow-2);
	}

	.header.active .header-bottom {
		position: fixed;
		bottom: auto;
		top: 0;
		width: 100%;
		padding-block: 20px;
		/* box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2); */
		animation: slideDown 0.25s ease-in-out forwards;
	}

	/**
   * HERO
   */

	.hero-content {
		max-width: 400px;
	}

	/**
   * ABOUT
   */

	.about .section-title {
		max-width: 30ch;
	}

	.about-text {
		max-width: 55ch;
	}

	.about-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.about .container-intro-nowara {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 3%;
	}
	.mobile-view-only {
		display: block;
	}
	.desktop-view-only {
		display: none;
	}

	.nowara-intro-ul {
		padding-left: 5%;
		padding-right: 5%;
	}

	.nowara-intro-ul li {
		padding: 1%;
		list-style-type: disc;
	}

	.container-vision {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 5%;
	}

	.sidenav.open {
		width: 25%;
	}

	/**
   * FEATURES
   */

	.features-list > li {
		width: calc(33.33% - 13.33px);
	}

	.features-card {
		gap: 20px;
	}

	.features-card .card-icon {
		width: 80px;
		height: 80px;
		font-size: 32px;
	}

	.features-card .card-title {
		--fs-6: 1.125rem;
	}

	/**
   * BLOG
   */

	.blog-card {
		--fs-7: 0.875rem;
	}

	.blog-title {
		font-size: 1.25rem;
	}

	.blog .card-meta-list {
		gap: 30px;
	}

	/**
   * CONTACT
   */

	.contact-form {
		padding: 30px;
	}

	.contact-item {
		min-width: calc(50% - 12.5px);
	}

	/**
   * CTA
   */

	.cta-card {
		--fs-2: 1.625rem;
	}

	/**
   * FOOTER
   */

	.footer {
		margin-bottom: 0;
	}
}

/**
 * responsive for larger than 992px screen
 */

@media (min-width: 992px) {
	/**
   * CUSTOM PROPERTY
   */

	:root {
		/**
     * typography
     */

		--fs-1: 3.125rem;
		--fs-4: 1.375rem;
	}

	/**
   * REUSED STYLE
   */

	.container {
		max-width: 970px;
	}

	.btn {
		padding: 15px 40px;
	}

	/**
   * HEADER
   */

	.header-bottom {
		padding-block: 20px;
	}

	.header-bottom-actions-btn:last-child,
	.navbar-top,
	.overlay {
		display: none;
	}

	.navbar,
	.navbar.active {
		all: unset;
	}

	.navbar-list {
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.navbar-link {
		color: var(--white);
		--fs-5: 1.125rem;
		text-transform: capitalize;
	}

	.header {
		padding-bottom: 100px;
	}

	.header-bottom {
		position: fixed;
		left: 0;
		bottom: auto;
		width: 100%;
	}

	.header.active .header-bottom {
		position: fixed;
		bottom: auto;
		top: 0;
		width: 100%;
		padding-block: 20px;
		/* box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2); */
		animation: slideDown 0.25s ease-in-out forwards;
	}

	.navbar-list {
		margin-left: 150px;
	}

	.hamburger-menu {
		width: 30px;
		height: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
	}

	.bar {
		width: 100%;
		height: 3px;
		background-color: var(--white);
	}

	/**
   * HERO
   */

	.hero-content {
		max-width: unset;
		margin-bottom: 0;
	}

	.hero .container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	/**
   * ABOUT
   */

	.about .container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 60px;
	}

	.about .container-intro-nowara {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 3%;
	}
	.mobile-view-only {
		display: none;
	}
	.desktop-view-only {
		display: block;
	}

	.nowara-intro-ul li {
		padding: 1%;
		list-style-type: disc;
	}

	.container-vision {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 5%;
	}

	.about-banner {
		margin-bottom: 0;
	}

	.about-banner > img {
		width: 100%;
	}

	.sidenav.open {
		width: 25%;
	}

	/**
   * SERVICE
   */

	.service-list > li {
		width: calc(33.33% - 20px);
	}

	.master-service-list {
		width: 100%;
	}

	/**
   * PROPERTY
   */

	.property-card .card-content {
		padding-inline: 30px;
	}

	.card-footer {
		padding: 20px 30px 30px;
	}

	/**
   * FEATURES
   */

	.features-list {
		column-gap: 30px;
	}

	.features-list > li {
		width: calc(25% - 30px);
	}

	/**
   * BLOG
   */

	.blog-title {
		font-size: 1.375rem;
	}

	/**
   * CONTACT
   */

	.checkbox-wrapper {
		margin-block: 20px;
	}

	.contact-item {
		min-width: calc(33.33% - 16.66px);
	}

	.contact-card {
		padding: 30px;
	}

	.contact-card .card-icon {
		font-size: 32px;
	}

	/**
   * CTA
   */

	.cta-card {
		--fs-2: 1.875rem;
		--fs-5: 1rem;

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50px;
	}

	.cta-card :is(.card-content, .cta-btn) {
		margin: 0;
	}

	/**
   * FOOTER
   */

	.footer-top .container {
		display: flex;
		justify-content: space-between;
	}

	.footer-brand {
		max-width: 300px;
		margin-bottom: 0;
	}

	.footer-link-box {
		flex-basis: 550px;
	}
}

/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {
	/**
   * CUSTOM PROPERTY
   */

	:root {
		/**
     * typography
     */

		--fs-2: 2.75rem;
		--fs-4: 1.5rem;
	}

	/**
   * REUSED STYLE
   */

	.container {
		max-width: 1200px;
	}

	.has-scrollbar > li {
		min-width: calc(33.33% - 16.66px);
	}

	/**
   * HEADER
   */

	.header-bottom {
		padding-block: 20px;
	}

	.header-bottom-actions-btn:last-child,
	.navbar-top,
	.overlay {
		display: none;
	}

	.navbar,
	.navbar.active {
		all: unset;
	}

	.navbar-list {
		display: flex;
		align-items: center;
		gap: 30px;
		margin-left: 400px;
	}

	.navbar-link {
		color: var(--white);
		--fs-5: 1.125rem;
		text-transform: capitalize;
	}

	.header {
		padding-bottom: 100px;
		/* top: 0; */
	}

	.header-bottom {
		position: fixed;
		left: 0;
		bottom: auto;
		width: 100%;
	}

	.header.active .header-bottom {
		position: fixed;
		/* bottom: auto; */
		top: 0;
		width: 100%;
		padding-block: 20px;
		/* box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2); */
		animation: slideDown 0.25s ease-in-out forwards;
	}

	.hamburger-menu {
		width: 30px;
		height: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
	}

	.bar {
		width: 100%;
		height: 3px;
		background-color: var(--white);
	}

	.sidenav.open {
		width: 25%;
	}

	/**
   * HERO
   */

	.hero-text {
		padding-left: 30px;
		max-width: 450px;
		margin-bottom: 40px;
	}
	.mobile-view-only {
		display: none;
	}
	.desktop-view-only {
		display: block;
	}

	/**
   * FEATURES
   */

	.features-card .card-icon {
		width: 100px;
		height: 100px;
		font-size: 45px;
	}

	.features-card .card-title {
		--fs-6: 1.375rem;
	}

	/**
   * CONTACT
   */

	.contact-form {
		padding: 50px;
	}

	.contact-card {
		gap: 20px;
	}

	.contact-card .card-icon {
		padding: 15px;
	}

	/**
   * CTA
   */

	.cta-card {
		--fs-2: 2.25rem;
		padding-inline: 60px;
	}

	/**
   * FOOTER
   */

	.footer {
		--fs-5: 1rem;
	}

	.footer-link-box {
		flex-basis: 800px;
	}
}

@keyframes slideDown {
	0% {
	}

	100% {
		position: absolute;
		background: var(--raisin-black-1);
	}
}

/* Floating Button Style */
.floating-btn {
	background: var(--navy);
	color: var(--white);
	font-family: var(--ff-poppins);
	font-size: var(--fs-5);
	text-transform: var(--text-transform, capitalize);

	position: fixed;
	/* top: 180px; */
	top: 9rem;
	right: 0px;
	padding: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
	z-index: 9000;
}

.floating-btn:is(:hover, :focus) {
	background: var(--gold);
	color: var(--black);
	border-color: var(--navy);
}

.popup-form {
	position: fixed;
	top: 11.5rem;
	right: -100%;
	width: 250px;
	height: auto;
	max-height: 90%;
	background-color: #fff;
	border: 2px solid var(--navy);
	box-shadow: var(--shadow-2);
	padding: 20px;
	z-index: 9000;
	overflow-y: auto;
	transition: right 0.3s ease, transform 0.3s ease;
}

.popup-form .close-btn {
	background-color: transparent;
	border: none;
	font-size: 30px;
	cursor: pointer;
	color: var(--navy);
	position: absolute;
	top: 10px;
	right: 10px;
}

.popup-form h3 {
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
	color: var(--navy);
}

.popup-form label {
	display: block;
	margin: 10px 0 5px;
}

.popup-form input {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.input-group {
	position: relative;
	width: 100%;
}

/* Ionicons Inside Input */
.input-group ion-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--gold);
}

.input-group input {
	width: 90%;
	padding: 12px 12px 12px 40px;
	border: 1px solid #ccc;
	border-radius: 5px;
	outline: none;
	font-size: 16px;
}

.input-group input:focus {
	border-color: var(--navy);
}

.popup-form button[type="submit"] {
	width: 90%;
	padding: 10px;
	background-color: var(--gold);
	color: var(--black);
	border: none;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.popup-form button[type="submit"]:hover {
	background-color: var(--navy);
	color: var(--white);
}

section,
.content {
	position: relative;
	z-index: 1;
}

.floating-btn.active {
	transform: translateX(-60%);
}

.popup-form.active {
	right: 0;
}

.whatsapp_float {
	position: fixed;
	width: 40px;
	height: 40px;
	bottom: 65px;
	right: 20px;
	background-color: var(--gold);
	color: var(--white);
	border-radius: 50px;
	text-align: center;
	font-size: 20px;
	z-index: 9001;
}

.whatsapp-icon {
	margin-top: 9px;
	font-size: 20px;
}

@media screen and (max-width: 767px) {
	.whatsapp-icon {
		margin-top: 11px;
		font-size: 20px;
	}

	.whatsapp_float {
		width: 40px;
		height: 40px;
		bottom: 65px;
		right: 20px;
		font-size: 15px;
	}
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.notice-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9998;
}

.popup {
	background: white;
	padding: 20px;
	width: 90%;
	max-width: 1000px;
	border: 2px solid var(--gold);
	text-align: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 5000;
}

.popup h2 {
	margin-bottom: 10px;
	color: var(--navy);
}

.popup p {
	max-height: 300px;
	overflow-y: auto;
	font-size: var(--fs-5);
	padding-right: 10px;
	margin-bottom: 20px;
	text-align: justify;
}

.popup button {
	display: block;
	margin: 10px auto 0;
	width: 50%;
	padding: 10px;
	background-color: var(--gold);
	color: var(--black);
	border: none;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.popup button:hover {
	background-color: var(--navy);
	color: var(--white);
}

.hidden {
	display: none;
}

.faq {
	margin-top: 11.5rem;
	margin-bottom: 5rem;
}

.faq-container {
	margin: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.faq-item {
	border-bottom: 1px solid #ddd;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	cursor: pointer;
	color: var(--navy);
}

.faq-question:hover {
	background: var(--navy);
	color: var(--white);
}

.faq-question span {
	font-weight: bold;
	font-size: 16px;
}

.faq-icon {
	font-size: 20px;
	transition: transform 0.3s ease;
}

.faq-answer {
	display: none;
	padding: 15px 20px;
	background: var(--cultured-2);
	font-size: 15px;
	line-height: 1.5;
	color: var(--navy);
}

.faq-answer ol {
	padding-left: 20px;
	margin: 10px 0;
}

.faq-answer li {
	margin-bottom: 8px;
}

.active .faq-question {
	background: var(--navy);
	color: var(--white);
}

.active .faq-answer {
	display: block;
}

.active .faq-icon {
	transform: rotate(45deg);
}

@media (max-width: 600px) {
	.faq-question span {
		font-size: 15px;
	}

	.faq-answer {
		font-size: 14px;
	}
}

#popupAlert {
	display: none;
	position: fixed;
	bottom: 20px;
	/* show at the bottom on mobile for better UX */
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--gold);
	color: white;
	padding: 14px 20px;
	border-radius: 8px;
	font-size: var(--fs-5);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 9999;
	animation: fadeInOut 2s ease-in-out;
	max-width: 90%;
	text-align: center;
	word-wrap: break-word;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}

	10% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
}

/* loader */
#preloader {
	position: fixed;
	/* Ensures it covers the entire screen */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	/* Or any background color */
	display: flex;
	/* To easily center the image */
	justify-content: center;
	align-items: center;
	z-index: 9999;
	/* Ensures it's on top of other content */

	/* Add your image as a background */
	background-image: url("./assets/images/favicon.webp");
	/* Use a GIF for animation */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px;
	/* Adjust size as needed */
}

.disclamer-image {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	/* width: 30%; */
}

.enquiry-image {
	display: block;
	margin: auto;
	width: 75%;
}

.urban-development-vision {
	display: flex;
	justify-content: center;
}

.urban-development-vision-img {
	width: 100%;
}

.fa-bars {
	color: var(--white);
	cursor: pointer;
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 2%;
	background-color: var(--white-1);
}

.sidenav a {
	padding: 1% 1% 1% 4%;
	text-decoration: none;
	font-size: 20px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidebar-div {
	background-color: var(--white-1);
	padding: 2%;
	margin: 2%;
}

.sidebar-div:hover {
	background-color: var(--white-2);
}

.sidenav a:hover {
	color: var(--gold);
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: var(--fs-1);
	margin-left: 50px;
}

@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}

	.sidenav a {
		font-size: var(--fs-1);
	}
}

.sidebar-logo {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	width: 35%;
	padding: 5%;
	padding-top: 2%;
}

.page-width-container {
	max-width: 1350px;
	margin: auto;
	padding: 0.2rem;
}
.page-width-container-footer {
	max-width: 1350px;
	margin: auto;
}

.project-images-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.main-image {
	padding-top: 0.5%;
	flex: 2;
	position: relative;
}

.side-images {
	/* in media query we need to remove this flex 1 when screen is smaller. only show flex = 1 when screen size is larger than mobile */
	flex: 1;
	display: flex;
	flex-direction: column;
}

.side-image {
	position: relative;
	padding: 1%;
}

.side-image img,
.main-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main-image,
.main-image img {
	max-height: 500px;
}

.main-image:hover img,
.side-image:hover img {
	transform: scale(1.05);
	transition: transform 2s ease;
}

.project-image-label {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 6px 12px;
	font-size: 14px;
	border-radius: 4px;
}

.project-navigation-menu-section,
.project-navigation-menu {
	list-style: none;
	display: flex;
	/* horizontal layout */
	justify-content: center;
	background: #fff;
	border-bottom: 2px solid #eee;
	padding: 15px 0.2rem;
	margin: 0;
	position: sticky;
	/* stays at top */
	top: 0;
	z-index: 9000;
}

.project-navigation-menu-section {
	flex-direction: column;
}

.project-navigation-menu li {
	margin: 0 20px;
}

.project-navigation-menu a {
	/* margin: 0 20px; */
	text-decoration: none;
	color: #333;
	font-weight: 500;
	position: relative;
	padding-bottom: 5px;
}

.project-navigation-menu a:hover,
.project-navigation-menu a.active {
	font-weight: bold;
	color: #0077cc;
}

.project-navigation-menu a.active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #0077cc;
}

.project-about-container {
	width: 100%;
	padding-top: 3%;
}

.read-more-box {
	margin: 30px auto;
	padding: 20px;
	border-radius: 8px;
	position: relative;
}

.read-more-box p {
	margin: 0 0 10px;
	line-height: 1.6;
	color: #333;
}

.hidden {
	display: none;
}

.project-about-read-more-toggle-btn {
	display: inline;
	background-color: #0077cc;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
}

.project-about-read-more-toggle-btn:hover {
	background-color: #005fa3;
}

/* Preloader covers the whole page */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	/* or dark background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	opacity: 1;
	/* start fully visible */
	transition: opacity 0.5s ease;
	/* smooth fade */
}

/* Blink animation */
#preloader img {
	height: 30%;
	animation: blink 1s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	70% {
		opacity: 0.2;
	}

	100% {
		opacity: 1;
	}
}

#preloader.fade-out {
	opacity: 0;
	/* fade to invisible */
	transition: opacity 0.5s ease;
	pointer-events: none;
	/* prevent blocking clicks */
}