/* General page styles ---------------------------------------------------- */


:root {
	--primary: #f1b560;         /* gold (buttons / accents) */
	--primary-dark: #d4993a;
	--text: #222222;
	--muted: #777777;
	--bg-light: #f7f7f7;
	--max-width: 1100px;
	--radius-lg: 18px;
  }

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

  body {
	font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--text);
	background: #ffffff;
	line-height: 1.5;
  }

  img {
	max-width: 100%;
	display: block;
  }

  a {
	color: inherit;
	text-decoration: none;
  }

  /* ---------- HEADER ---------- */

  header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid #e4e4e4;
  }

  .header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0.8rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
  }

  .brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 600;
  }

  .brand-logo {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	border: 2px solid #c79647;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #c79647;
	font-weight: 700;
  }

  .brand-text-main {
	font-size: 1.1rem;
  }

  .brand-text-sub {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--muted);
	letter-spacing: 0.1em;
  }

  nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-size: 0.9rem;
  }

  nav a {
	position: relative;
	padding-bottom: 0.2rem;
	color: var(--muted);
  }

  nav a:hover {
	color: var(--text);
  }

  nav a.active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #000;
  }

  .header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
  }

  .header-icon {
	font-size: 1.1rem;
	cursor: pointer;
  }

  .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.2rem;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 500;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
  }

  .btn-primary {
	background: var(--primary);
	color: #000;
  }

  .btn-primary:hover {
	background: var(--primary-dark);
  }

  .nav-toggle {
	display: none;
	border: none;
	background: none;
	font-size: 1.5rem;
	cursor: pointer;
  }

  @media (max-width: 800px) {
	nav {
	  position: absolute;
	  top: 100%;
	  left: 0;
	  right: 0;
	  background: #ffffff;
	  border-bottom: 1px solid #e5e5e5;
	  flex-direction: column;
	  gap: 0.6rem;
	  padding: 0.7rem 1rem 1rem;
	  max-height: 0;
	  overflow: hidden;
	  opacity: 0;
	  pointer-events: none;
	  transition: all 0.25s ease;
	}

	nav.open {
	  max-height: 250px;
	  opacity: 1;
	  pointer-events: auto;
	}

	.header-inner {
	  padding: 0.7rem 1rem;
	}

	.header-right {
	  display: none;
	}

	.nav-toggle {
	  display: block;
	}
  }

  /* ---------- HERO ---------- */

  .hero {
	background: #000;
	color: #fff;
	position: relative;
  }

  .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url("https://via.placeholder.com/1600x700?text=LuxHome+Hero+Image");
	/* Replace above with your hero image path */
	background-size: cover;
	background-position: center;
	opacity: 0.8;
  }

  .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.75), rgba(0,0,0,0.2));
  }

  .hero-inner {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 3.5rem 1rem 3rem;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 2rem;
	align-items: center;
  }

  .hero-title {
	font-size: 2.6rem;
	line-height: 1.1;
	margin-bottom: 0.5rem;
  }

  .hero-subtitle {
	font-size: 0.95rem;
	max-width: 430px;
	color: #e6e6e6;
	margin-bottom: 1.6rem;
  }

  .hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-bottom: 1.6rem;
  }

  .btn-light {
	background: #ffffff;
	color: #000;
  }

  .btn-ghost {
	background: transparent;
	color: #fff;
	border: 1px solid #ffffff;
  }

  .btn-ghost:hover {
	background: rgba(0,0,0,0.2);
  }

  .hero-card {
	background: rgba(0,0,0,0.78);
	padding: 1.3rem 1.5rem;
	border-radius: 16px;
	max-width: 260px;
	margin-left: auto;
	text-align: left;
  }

  .hero-card-label {
	font-size: 0.8rem;
	color: #bbbbbb;
	margin-bottom: 0.3rem;
  }

  .hero-card-number {
	font-size: 2.1rem;
	font-weight: 600;
	margin-bottom: 0.1rem;
  }

  .hero-card-text {
	font-size: 0.9rem;
	color: #e4e4e4;
  }

  @media (max-width: 900px) {
	.hero-inner {
	  grid-template-columns: 1fr;
	}
	.hero-card {
	  margin: 1.5rem 0 0;
	}
  }

  @media (max-width: 600px) {
	.hero-inner {
	  padding: 2.8rem 1rem 2.4rem;
	}
	.hero-title {
	  font-size: 2.1rem;
	}
  }

  /* ---------- ICON ROW ---------- */

  .icon-row {
	background: #ffffff;
	border-bottom: 1px solid #ececec;
  }

  .icon-row-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem 1rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	font-size: 0.85rem;
	text-align: center;
  }

  .icon-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--muted);
  }

  .icon-item span.icon {
	font-size: 1.1rem;
  }

  @media (max-width: 800px) {
	.icon-row-inner {
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	}
  }

  @media (max-width: 500px) {
	.icon-row-inner {
	  grid-template-columns: 1fr;
	}
  }

  /* ---------- SECTION WRAPPER ---------- */

  .section {
	padding: 2.8rem 1rem;
  }

  .section-inner {
	max-width: var(--max-width);
	margin: 0 auto;
  }

  .section h2 {
	font-size: 1.7rem;
	margin-bottom: 1.2rem;
  }

  /* ---------- FEATURED HOMES ---------- */

  .homes-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
  }

  .home-card {
	background: #ffffff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	display: flex;
	flex-direction: column;
  }

  .home-img {
	height: 190px;
	overflow: hidden;
  }

  .home-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .home-body {
	padding: 0.9rem 1rem 1.1rem;
	font-size: 0.9rem;
  }

  .home-name {
	font-weight: 600;
	margin-bottom: 0.4rem;
  }

  .home-meta {
	color: var(--muted);
	font-size: 0.8rem;
  }

  @media (max-width: 900px) {
	.homes-grid {
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	}
  }

  @media (max-width: 600px) {
	.homes-grid {
	  grid-template-columns: 1fr;
	}
  }

  /* ---------- INFO CARDS (FLOOR PLANS / WHY) ---------- */

  .info-grid {
	margin-top: 2.4rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
  }

  .info-card {
	background: var(--bg-light);
	border-radius: var(--radius-lg);
	padding: 1.3rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  }

  .info-header {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.6rem;
  }

  .info-icon {
	font-size: 1.4rem;
  }

  .info-title {
	font-weight: 600;
  }

  .info-text {
	font-size: 0.86rem;
	color: var(--muted);
	margin-bottom: 1rem;
  }

  .info-card .btn {
	align-self: flex-start;
  }

  @media (max-width: 700px) {
	.info-grid {
	  grid-template-columns: 1fr;
	}
  }

  /* ---------- FOOTER ---------- */

  footer {
	background: #111111;
	color: #f5f5f5;
	margin-top: 3rem;
  }

  .footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 2.5rem 1rem 2.2rem;
	display: grid;
	grid-template-columns: 2fr 1.3fr 1.3fr;
	gap: 2rem;
	font-size: 0.84rem;
  }

  .footer-brand-text {
	margin-top: 0.7rem;
	color: #c9c9c9;
	max-width: 260px;
	font-size: 0.82rem;
  }

  .footer-heading {
	font-weight: 600;
	margin-bottom: 0.7rem;
	font-size: 0.88rem;
  }

  .footer-links,
  .footer-contact {
	list-style: none;
	color: #c9c9c9;
  }

  .footer-links li,
  .footer-contact li {
	margin-bottom: 0.35rem;
  }

  .footer-links a:hover {
	color: #ffffff;
  }

  .footer-bottom {
	border-top: 1px solid #222;
	padding: 0.9rem 1rem 1.4rem;
	max-width: var(--max-width);
	margin: 0 auto;
	font-size: 0.75rem;
	color: #aaaaaa;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
  }

  @media (max-width: 800px) {
	.footer-inner {
	  grid-template-columns: 1fr 1fr;
	}
  }

  @media (max-width: 600px) {
	.footer-inner {
	  grid-template-columns: 1fr;
	}
  }


		/*For image slider--------------------------------------------------*/
		.diy-slideshow {
			position: relative;
			display: block;
			overflow: hidden;
			margin: auto;
		}

		figure{
			position: absolute;
			opacity: 0;
			/*transition: 0s opacity;*/
			margin: auto;
			max-height:450px;
			max-width:450px;
			height:100%;
			width:100%;
		}

		figcaption{
			position: absolute;
			font-family: sans-serif;
			font-size: .8em;
			bottom: .75em;
			right: .35em;
			padding: .25em;
			color: #fff;
			background: rgba(0,0,0, .25);
			border-radius: 2px;
		}
		figcaption a{
			color: #fff;
		}
		figure.show{
			opacity: 1;
			position: relative;
			/*transition: 0s opacity;*/
		}
		figure.show:hover {
			cursor: pointer;
		}
		.next, .prev{
			color: #fff;
			position: absolute;
			background: rgba(0,0,0, .6);
			top: 50%;
			z-index: 1;
			font-size: 2em;
			margin-top: -.75em;
			opacity: .3;
			user-select: none;
		}
		.next:hover, .prev:hover{
			cursor: pointer;
			opacity: 1;
		}
		
		.next{
			right: 0;
			padding: 10px 5px 15px 10px;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
		
		.prev{
			left: 0;
			padding: 10px 10px 15px 5px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}

/* HEADER stays on top of everything */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;              /* <-- higher than hero/other widgets */
	background: #ffffff;
	border-bottom: 1px solid #e4e4e4;
  }
  
  .header-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.8rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
  }
  
  /* Brand styles (optional) */
  .brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
  }
  
  .brand-logo {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	border: 2px solid #c79647;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #c79647;
	font-weight: 700;
  }
  
  /* NAV layout */
  .main-nav {
	display: flex;
	align-items: center;
  }
  
  .nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
  }
  
  .nav-item {
	position: relative;
  }
  
  .nav-link {
	position: relative;
	padding-bottom: 0.2rem;
	font-family: Tahoma, Verdana, sans-serif;
	font-weight: normal;
	color: #555;
	text-decoration: none;
  }
  
  .nav-link:hover {
	color: #000;
  }
  
  .nav-item--has-sub .nav-caret {
	font-size: 0.7rem;
	margin-left: 0.25rem;
  }

  /* Invisible hover bridge so cursor can't "fall through" */
.main-nav .nav-item--has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;     /* directly under the parent li */
    height: 8px;   /* small buffer zone */
    /* fully transparent, just extends the hover area */
    z-index: 1;
}
  
 /* DROPDOWN */
.nav-submenu {
    list-style: none;
    position: absolute;
    top: 100%;              /* sit exactly at the bottom of the li */
    left: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    padding: 0.4rem 0;
    margin-top: 0;          /* remove the gap */
    display: none;
    z-index: 2000;
}
  
  .nav-subitem { padding: 0; }
  
  .nav-sublink {
	display: block;
	padding: 0.45rem 0.9rem;
	font-size: 0.85rem;
	color: #444;
	text-decoration: none;
	white-space: nowrap;
  }
  
  .nav-sublink:hover {
	background: #f5f5f5;
	color: #000;
  }
  
  /* Show submenu on hover on desktop */
  @media (min-width: 801px) {
	.nav-item--has-sub:hover > .nav-submenu {
	  display: block;
	}
  }
  
  /* MOBILE */
  .nav-toggle {
	display: none;
	border: none;
	background: none;
	font-size: 1.5rem;
	cursor: pointer;
  }
  
  .header-right { display: flex; align-items: center; gap: 1rem; }
  
  @media (max-width: 800px) {
	.nav-toggle { display: block; }
  
	.header-right { display: none; }
  
	.main-nav {
	  position: absolute;
	  top: 100%;
	  left: 0;
	  right: 0;
	  background: #fff;
	  border-bottom: 1px solid #e5e5e5;
	  padding: 0.7rem 1rem 1rem;
	  max-height: 0;
	  overflow: hidden;
	  opacity: 0;
	  pointer-events: none;
	  transition: max-height 0.25s ease, opacity 0.25s ease;
	  flex-direction: column;
	  z-index: 1500;          /* <-- on top of hero */
	}
  
	.main-nav.open {
	  max-height: 400px;
	  opacity: 1;
	  pointer-events: auto;
	}
  
	.nav-list {
	  flex-direction: column;
	  align-items: flex-start;
	  gap: 0.4rem;
	}
  
	.nav-submenu {
	  position: static;
	  border: none;
	  box-shadow: none;
	  padding-left: 0.75rem;
	  margin-top: 0.2rem;
	  display: none;          /* hidden until .nav-item--open */
	}
  
	.nav-item--open > .nav-submenu {
	  display: block;
	}
  }
  

/*--------------------------Responsive menu--------------------------*/

		
		
		/*modal dialog styles*/			
		 .page-container {
		  height: 100%;
		}
		.page-container a, .page-container a:link, .page-container a:visited, .page-container a:focus {
		  padding: 0px 0px;
		  background: transparent;
		  color: #003366;
		  display: inline-block;
		  text-decoration: none;
		}
		.page-container > * {
		  width: 120px;
		  padding: 0px;
		  margin: 0 auto;
		  color: white;
		}
		
		/* Modal window sample styles */
		/* Vertical centering trick http://css-tricks.com/centering-in-the-unknown/ */
		.modal::before {
		  content: '';
		  display: inline-block;
		  height: 100%;
		  vertical-align: middle;
		  margin: 0;
		}
		
		.target {
		  display: block;
		  left: 0;
		  position: fixed;
		  top: 0;
		  width: 0;
		  height: 0;
		  visibility: hidden;
		  pointer-events: none;
		 }
		
		.modal {
		  position: fixed;
		  top: 0;
		  right: 0;
		  left: 0;
		  bottom: 0;
		  z-index: 100;
		  text-align: center;
		  display: none;
		  /* Fallback for legacy browsers */
		  background-color: rgba(0,0,0,0.6);
		}
		.modal > .content {
		   text-align: left;
		   display: inline-block;
		   background-color:#fafafa;
		   color:#333;
		   border-radius: 3px;
		   box-sizing: border-box;
		   position: relative;
		   width: 450px;
		   padding: 30px;
		 }
		 
		 @media (max-width: 760px){
			.modal > .content {
				text-align: left;
				display: inline-block;
				background-color:#fafafa;
				color:#333;
				border-radius: 3px;
				box-sizing: border-box;
				position: relative;
				width: 90%;
				padding: 8%;
			}
		}
		
		 .modal > .content .close-btn {
		    position: absolute;
		    top: 5px;
		    right: 15px;
		    width: 15px;
		    height: 15px;
		    color: white;
		    font-size: 18px;
		    text-decoration: none;
		 }
		
		 /* Behaviour on legacy browsers */
		.target:target + .modal {
		    display: block;
		}
		
		/* Fallback for IE8 */
		.modal.is-expanded {
		   display: block;
		}
		.modal.is-expanded > .content {
		  top: 50%;
		  margin-top: -45px;
		}
		
		/* Making main page blurred when modal window open */
		:root .target:target + .page-container {
		   filter: blur(50px);
		  -webkit-filter: blur(50px);
		  -webkit-filter: blur(50px) grayscale(100%);
		
		}
		
		
		:root span[id="start"]:target + .page-container {
		 filter: none;
		 -webkit-filter: none;
		
		}
		
		/* Behavior on modern browsers */
		:root .modal {
		  display: block;
		  background-color: transparent;
		  /*background-color: rgba(0,0,0,0.7);*/
		  /*transition: transform 0.4s cubic-bezier(0.5, -0.5, 0.5, 1.5);*/
		  transition: all 0.05s;
		  /*transform-origin: center center;*/
		  transform: scale(0, 0);
		}
		
		:root .target:target + .modal {
			/*background-color: rgba(0,0,0,0.7);*/
			transform: scale(1, 1);
			
		}
		
		
		:root .modal > .content {
		  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
		}


		.button {
		    background-color: #008CBA; /* Blue */
		    width: 150px;
		    border: none;
		    color: white;
		    cursor: pointer;
		    padding: 5px 5px;
		    text-align: center;
		    text-decoration: none;
		    display: inline-block;
		    font-size: 12px;
		}
		
		.button:hover {
			opacity:0.5;
			cursor: pointer;
			filter: Alpha(opacity=50); /* IE8 and earlier */
		}
		
		.thumbnail {
			position: relative;
			display: inline-block;
		}
		
		.caption {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate( -50%, -50% );
			text-align: center;
			color: white;
			font-weight: bold;
		}
		
		/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
		@media screen and (min-width: 601px) {
			.respTxt {
				font-size: 110%;
			}
		}

		/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
		@media screen and (max-width: 600px) {
		  .respTxt {
			font-size: 70%;
		  }
		}
		
		/* Gallery Thumbnails */
		.gallery-thumbnail {
			width: 200px; /* Set desired width */
			height: 150px; /* Set desired height */
			object-fit: cover; /* Ensure aspect ratio is maintained, and image is cropped if necessary */
		}

		/* Modal Images */
		.w3-modal img {
			width: 80%; /* Set to 80% of the modal width, adjust as necessary */
			height: auto; /* Auto height to maintain aspect ratio */
			max-height: 90vh; /* Ensure it doesn't exceed the viewport height */
			object-fit: contain; /* Contain the image within the modal, maintaining aspect ratio */
			margin: auto; /* Center the image horizontally */
			display: block; /* Ensure the image is displayed as a block element */
		}

		@media screen and (max-width: 600px) {
			.w3-modal img {
			  width: 100%;       /* Use full width of viewport */
			  max-height: 90vh;  /* Still constrain vertical height */
			}
		  }
		
    /* General arrow button styling */
    .arrow-button {
        z-index: 10001;
        color: white;
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    }

    /* Ensure the arrows are positioned inside the image */
    @media screen and (max-width: 600px) {
        .arrow-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
            color: black; /* Black arrow for mobile view */
            padding: 10px; /* Optional padding for better visibility */
            /*border-radius: 50%; Optional for circular arrow buttons */
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .w3-display-left {
            left: 10px; /* Position inside the image container */
        }

        .w3-display-right {
            right: 10px; /* Position inside the image container */
        }

        /* Center the image vertically and horizontally */
        .w3-modal-content {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Make the image responsive for small screens */
        .responsive-img {
            width: auto;
            height: auto; /* Maintain aspect ratio */
            max-height: 90vh; /* Ensure it doesn't exceed the viewport height */
            max-width: 100%; /* Ensure it fits within the viewport width */
        }
    }