/* ============================================

   SEQUOIA HEIGHTS - House of Nobles

   Theme CSS - Brochure Inspired

   ============================================ */



/* --- CSS Variables --- */

:root {

  --primary-dark: #152d25;

  --primary-gold: #bd9d5f;

  --primary-gold-hover: #a8893f;

  --text-dark: #231f20;

  --bg-cream: #f8f4f1;

  --bg-sand: #e4d3be;

  --white: #ffffff;

  --muted: #d1d3d4;

  --font-main: 'Roboto', sans-serif;

  --font-heading: 'Cormorant Garamond', serif;

  --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);

}



/* --- Reset & Base --- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: var(--font-main);

  color: var(--text-dark);

  background: var(--white);

  line-height: 1.8;

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

}



html {

  overflow-x: hidden;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--font-heading);

  color: var(--primary-dark);

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: -0.02em;

}



a {

  color: var(--primary-gold);

  text-decoration: none;

  transition: all 0.3s ease;

}



a:hover {

  color: var(--primary-gold-hover);

  text-decoration: none;

}



img {

  max-width: 100%;

  height: auto;

}

.color-black{
  color: black;
}

/* --- Section Spacing --- */

.section {

  padding: 80px 0;

}



.section-sm {

  padding: 50px 0;

}



.section-cream {

  background: var(--bg-cream);

}



.section-sand {

  background: var(--bg-sand);

}



.section-dark {

  background: var(--primary-dark);

  color: var(--white);

}



.section-dark h2,

.section-dark h3,

.section-dark h4 {

  color: var(--white);

}



.section-dark p {

  color: rgba(255, 255, 255, 0.85);

}



.section-gold {

  background: var(--primary-gold);

  color: var(--white);

}



.section-gold h2,

.section-gold h3,

.section-gold p {

  color: var(--white);

}



.section-title {

  font-size: 42px;

  margin-bottom: 20px;

  font-weight: 700;

  letter-spacing: -0.03em;

}



.section-subtitle {

  font-size: 18px;

  color: #666;

  margin-bottom: 50px;

  max-width: 700px;

  margin-left: auto;

  margin-right: auto;

  font-weight: 300;

}



.section-dark .section-subtitle {

  color: rgba(255, 255, 255, 0.7);

}



.gold-text {

  color: var(--primary-gold);

}



/* --- Buttons --- */

.btn-gold {

  background: var(--primary-gold);

  color: var(--white);

  border: 1px solid var(--primary-gold);

  padding: 14px 36px;

  border-radius: 5px;

  font-family: var(--font-main);

  font-weight: 600;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

  transition: var(--transition-smooth);

  display: inline-block;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

}



.btn-gold:hover {

  background: var(--primary-gold-hover);

  border-color: var(--primary-gold-hover);

  color: var(--white);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.btn-gold-sm {

  background: var(--primary-gold);

  color: var(--white);

  border: 1px solid var(--primary-gold);

  padding: 8px 18px;

  border-radius: 5px;

  font-family: var(--font-main);

  font-weight: 600;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition: var(--transition-smooth);

  display: inline-block;

  cursor: pointer;

}



.btn-gold-sm:hover {

  background: var(--primary-gold-hover);

  border-color: var(--primary-gold-hover);

  color: var(--white);

}



.btn-outline {

  background: transparent;

  color: var(--white);

  border: 1px solid var(--white);

  padding: 14px 36px;

  border-radius: 5px;

  font-family: var(--font-main);

  font-weight: 600;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

  transition: var(--transition-smooth);

  display: inline-block;

  cursor: pointer;

}



.btn-outline:hover {

  background: var(--white);

  color: var(--primary-dark);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.btn-dark {

  background: var(--primary-dark);

  color: var(--white);

  border: 1px solid var(--primary-dark);

  padding: 14px 36px;

  border-radius: 5px;

  font-family: var(--font-main);

  font-weight: 600;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

  transition: var(--transition-smooth);

  display: inline-block;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

}



.btn-dark:hover {

  background: #1a3d32;

  border-color: #1a3d32;

  color: var(--white);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



/* --- Navbar --- */

.navbar-hon {

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 1000;

  padding: 25px 0;

  transition: var(--transition-smooth);

  background: transparent;

}



.navbar-hon.scrolled {

  background: rgba(21, 45, 37, 0.98);

  backdrop-filter: blur(10px);

  padding: 15px 0;

  box-shadow: var(--shadow-md);

}



.navbar-hon .navbar-brand {

  font-family: var(--font-heading);

  color: var(--white);

  font-size: 22px;

  font-weight: 700;

  letter-spacing: 1px;

}



.navbar-hon .navbar-brand span {

  display: block;

  font-size: 11px;

  font-weight: 300;

  letter-spacing: 2px;

  opacity: 0.8;

}



.navbar-hon .navbar-brand:hover {

  color: var(--white);

}



.location-badge {

  display: inline-block;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(5px);

  padding: 8px 24px;

  border-radius: 50px;

  font-size: 14px;

  color: var(--white);

  border: 1px solid rgba(255, 255, 255, 0.2);

  letter-spacing: 1px;

}



.location-badge i {

  color: var(--primary-gold);

  margin-right: 8px;

}



.navbar-hon .nav-link {

  color: rgba(255, 255, 255, 0.85) !important;

  font-family: var(--font-heading);

  font-size: 14px;

  font-weight: 400;

  padding: 8px 18px !important;

  letter-spacing: 0.5px;

  transition: color 0.3s ease;

}



.navbar-hon .nav-link:hover,

.navbar-hon .nav-link.active {

  color: var(--primary-gold) !important;

}



.navbar-hon .navbar-toggler {

  border: 1px solid rgba(255, 255, 255, 0.5);

  padding: 5px 10px;

}



.navbar-hon .navbar-toggler-icon {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}



.navbar-hon .nav-cta {

  background: var(--primary-gold);

  color: var(--white) !important;

  border-radius: 5px;

  padding: 8px 20px !important;

  margin-left: 10px;

  font-weight: 500;

}



.navbar-hon .nav-cta:hover {

  background: var(--primary-gold-hover);

}



/* --- Page Banner --- */

.page-banner {

  background: var(--primary-dark);

  padding: 140px 0 60px;

  text-align: center;

  position: relative;

}



.page-banner::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: var(--primary-gold);

}



.page-banner h1 {

  color: var(--white);

  font-size: 42px;

  margin-bottom: 10px;

}



.page-banner .breadcrumb {

  background: none;

  justify-content: center;

  padding: 0;

  margin: 0;

}



.page-banner .breadcrumb-item,

.page-banner .breadcrumb-item a {

  color: rgba(255, 255, 255, 0.7);

  font-size: 14px;

}



.page-banner .breadcrumb-item.active {

  color: var(--primary-gold);

}



.page-banner .breadcrumb-item+.breadcrumb-item::before {

  color: rgba(255, 255, 255, 0.5);

}



/* --- Modern Hero Styles --- */

.hero-section {

  position: relative;

  height: 100vh;

  min-height: 700px;

  overflow: hidden;

  background: var(--primary-dark);

}



.hero-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  transition: transform 10s ease-out;

  transform: scale(1.1);

}



.hero-section:hover .hero-background {

  transform: scale(1.2);

}



.hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, rgba(21, 45, 37, 0.7) 0%, rgba(21, 45, 37, 0.2) 50%, rgba(21, 45, 37, 0.8) 100%);

  opacity: 0.85;

}



.hero-section>.container {

  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  min-height: 100vh;

  padding-top: 100px;

  padding-bottom: 60px;

}



.hero-content-modern {

  position: relative;

  z-index: 5;

  text-align: left;

  max-width: 700px;

}



.hero-tagline {

  color: var(--primary-gold);

  text-transform: uppercase;

  letter-spacing: 5px;

  font-size: 13px;

  font-weight: 700;

  animation: fadeInDown 1s ease-out;

}



.hero-logo-modern {

  max-width: 160px;

  margin-bottom: 25px;

  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6));

  animation: fadeInDown 1.5s ease;

}



.hero-main-title {

  font-size: 90px;

  line-height: 1.0;

  letter-spacing: -3px;

  color: var(--white);

  font-weight: 900;

  text-transform: uppercase;

  margin: 0;

  animation: fadeInLeft 1.2s ease-out;

}



.hero-main-title span {

  color: var(--primary-gold);

}



.hero-separator {

  width: 80px;

  height: 2px;

  background: var(--primary-gold);

  animation: fadeInLeft 1.4s ease-out;

}



.hero-desc {

  font-size: 20px;

  font-style: italic;

  font-weight: 300;

  animation: fadeInUp 1.6s ease-out;

}



/* --- New Buttons --- */

.btn-royal {

  background: var(--primary-gold);

  color: var(--white);

  padding: 12px 30px;

  border-radius: 0;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 11px;

  display: inline-block;

  transition: var(--transition-smooth);

  border: 1px solid var(--primary-gold);

}



.btn-royal:hover {

  background: transparent;

  color: var(--primary-gold);

  transform: translateX(5px);

}



.btn-clean {

  color: var(--white);

  padding: 12px 20px;

  border-bottom: 2px solid var(--primary-gold);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 11px;

  display: inline-block;

  transition: var(--transition-smooth);

}



.btn-clean:hover {

  color: var(--primary-gold);

  padding-bottom: 16px;

}



/* --- Scroll Indicator --- */

.scroll-indicator {

  position: absolute;

  bottom: 40px;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  color: var(--white);

  z-index: 10;

}



.scroll-indicator .mouse {

  width: 25px;

  height: 40px;

  border: 2px solid rgba(255, 255, 255, 0.5);

  border-radius: 20px;

  margin: 0 auto 10px;

  position: relative;

}



.scroll-indicator .mouse::after {

  content: '';

  width: 4px;

  height: 8px;

  background: var(--primary-gold);

  position: absolute;

  top: 8px;

  left: 50%;

  transform: translateX(-50%);

  border-radius: 2px;

  animation: scrollMouse 2s infinite;

}



@keyframes scrollMouse {

  0% {

    transform: translate(-50%, 0);

    opacity: 1;

  }



  100% {

    transform: translate(-50%, 15px);

    opacity: 0;

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* --- Highlight Cards --- */

.highlight-card {

  text-align: center;

  padding: 45px 30px;

  background: var(--white);

  border-radius: 12px;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-smooth);

  height: 100%;

  border: 1px solid rgba(0, 0, 0, 0.03);

}



.highlight-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.highlight-card .icon {

  width: 70px;

  height: 70px;

  margin: 0 auto 25px;

  background: var(--bg-cream);

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  color: var(--primary-gold);

  transition: var(--transition-smooth);

}



.highlight-card:hover .icon {

  background: var(--primary-gold);

  color: var(--white);

  transform: rotateY(180deg);

}



.highlight-card h5 {

  font-size: 18px;

  margin-bottom: 12px;

  font-weight: 700;

}



.highlight-card p {

  font-size: 14px;

  color: #666;

  margin: 0;

  line-height: 1.6;

}



/* --- About Row --- */

.about-img {

  border-radius: 12px;

  overflow: hidden;

  height: 100%;

  box-shadow: var(--shadow-md);

}



.about-img-premium {

  position: relative;

  z-index: 1;

}



.about-img-premium img {

  border-radius: 15px;

  box-shadow: var(--shadow-lg);

}



.img-accent {

  position: absolute;

  top: -20px;

  left: -20px;

  width: 100px;

  height: 100px;

  border-top: 5px solid var(--primary-gold);

  border-left: 5px solid var(--primary-gold);

  z-index: -1;

}



.founder-img-wrapper {

  position: relative;

}



.founder-img-wrapper::after {

  content: '';

  position: absolute;

  bottom: -20px;

  right: -20px;

  width: 150px;

  height: 150px;

  background: var(--bg-cream);

  z-index: -1;

  border-radius: 15px;

}



/* --- Project Card --- */

.project-card {

  background: var(--white);

  border-radius: 15px;

  overflow: hidden;

  box-shadow: var(--shadow-md);

  transition: var(--transition-smooth);

  border: 1px solid rgba(0, 0, 0, 0.03);

  height: 100%;

}



.project-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.project-img-wrapper {

  overflow: hidden;

}



.project-img-wrapper img {

  transition: var(--transition-smooth);

}



.project-card:hover .project-img-wrapper img {

  transform: scale(1.05);

}



.project-overlay-badge {

  position: absolute;

  top: 20px;

  right: 20px;

  background: var(--primary-gold);

  color: var(--white);

  padding: 5px 15px;

  border-radius: 50px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  box-shadow: var(--shadow-sm);

}



.project-card img {

  width: 100%;

  height: 250px;

  object-fit: cover;

}



.project-card-body {

  padding: 25px;

}



.project-card-body h4 {

  font-size: 20px;

  margin-bottom: 5px;

}



.project-card-body .location {

  color: #888;

  font-size: 14px;

  margin-bottom: 12px;

}



.project-card-body .location i {

  color: var(--primary-gold);

  margin-right: 5px;

}



.project-card-body .tags span {

  display: inline-block;

  background: var(--bg-cream);

  padding: 4px 12px;

  font-size: 12px;

  border-radius: 3px;

  margin: 3px 3px 3px 0;

  color: var(--text-dark);

}



.project-card-body .status {

  display: inline-block;

  background: #d4edda;

  color: #155724;

  padding: 3px 12px;

  font-size: 12px;

  border-radius: 3px;

  margin-top: 10px;

}



.project-card-body .rera {

  font-size: 12px;

  color: #999;

  margin-top: 10px;

}



/* --- Stats --- */

.stat-box {

  text-align: center;

  padding: 20px;

}



.stat-box h3 {

  font-size: 42px;

  color: var(--primary-gold);

  font-weight: 700;

  margin-bottom: 5px;

}



.section-dark .stat-box h3 {

  color: var(--primary-gold);

}



.stat-box p {

  font-size: 14px;

  margin: 0;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* --- Contact Info Card --- */

.contact-card {

  text-align: center;

  padding: 45px 30px;

  background: var(--white);

  border-radius: 15px;

  box-shadow: var(--shadow-sm);

  height: 100%;

  transition: var(--transition-smooth);

  border: 1px solid rgba(0, 0, 0, 0.03);

}



.luxury-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.icon-circle {

  width: 60px;

  height: 60px;

  background: var(--bg-cream);

  color: var(--primary-gold);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 25px;

  font-size: 24px;

  transition: var(--transition-smooth);

}



.luxury-card:hover .icon-circle {

  background: var(--primary-gold);

  color: var(--white);

}



.contact-card h5 {

  font-size: 20px;

  margin-bottom: 12px;

  font-weight: 700;

}



.contact-card p {

  color: #666;

  font-size: 15px;

  margin: 0;

  line-height: 1.6;

}



/* --- Forms --- */

.form-control {

  border: 1px solid #ddd;

  border-radius: 5px;

  padding: 12px 15px;

  font-size: 14px;

  color: var(--text-dark);

  background: var(--white);

  transition: border-color 0.3s ease;

}



.form-control:focus {

  border-color: var(--primary-gold);

  box-shadow: 0 0 0 0.15rem rgba(189, 157, 95, 0.2);

}



/* --- Quick Facts Bar --- */

.quick-facts {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}



.quick-fact-item {

  text-align: center;

  padding: 25px 35px;

  border-right: 1px solid rgba(255, 255, 255, 0.15);

}



.quick-fact-item:last-child {

  border-right: none;

}



.quick-fact-item i {

  font-size: 24px;

  color: var(--primary-gold);

  margin-bottom: 8px;

  display: block;

}



.quick-fact-item h5 {

  color: var(--white);

  font-size: 14px;

  margin-bottom: 3px;

}



.quick-fact-item p {

  color: rgba(255, 255, 255, 0.7);

  font-size: 13px;

  margin: 0;

}



/* --- Plot Cards --- */

.plot-card {

  text-align: center;

  padding: 25px;

  background: var(--white);

  border: 2px solid #eee;

  border-radius: 5px;

  transition: all 0.3s ease;

  height: 100%;

}



.plot-card:hover {

  border-color: var(--primary-gold);

}



.plot-card h4 {

  font-size: 20px;

  color: var(--primary-dark);

  margin-bottom: 5px;

}



.plot-card p {

  color: #666;

  font-size: 14px;

  margin: 0;

}



/* --- Amenity Tabs --- */

.amenity-tabs .nav-link {

  color: var(--text-dark);

  font-family: var(--font-heading);

  font-size: 14px;

  padding: 10px 20px;

  border: none;

  border-bottom: 2px solid transparent;

  border-radius: 0;

  font-weight: 500;

}



.amenity-tabs .nav-link.active {

  color: var(--primary-gold);

  border-bottom-color: var(--primary-gold);

  background: none;

}



.amenity-tabs .tab-pane ul {

  list-style: none;

  padding: 0;

}



.amenity-tabs .tab-pane ul li {

  padding: 8px 0;

  border-bottom: 1px solid #f0f0f0;

  font-size: 14px;

}



.amenity-tabs .tab-pane ul li i {

  color: var(--primary-gold);

  margin-right: 10px;

  width: 20px;

}



/* --- Accordion --- */

.spec-accordion .card {

  border: none;

  border-bottom: 1px solid #eee;

  border-radius: 0;

}



.spec-accordion .card-header {

  background: none;

  padding: 15px 0;

  cursor: pointer;

}



.spec-accordion .card-header h5 {

  font-size: 16px;

  font-weight: 500;

  margin: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.spec-accordion .card-header h5 i {

  color: var(--primary-gold);

  font-size: 14px;

}



.spec-accordion .card-body {

  padding: 0 0 15px;

  font-size: 14px;

  color: #555;

}



/* --- Gallery Grid --- */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}



.gallery-grid img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: 3px;

  cursor: pointer;

  transition: opacity 0.3s ease;

}



.gallery-grid img:hover {

  opacity: 0.85;

}



/* --- Value Card --- */

.value-card {

  text-align: center;

  padding: 30px 20px;

}



.value-card i {

  font-size: 36px;

  color: var(--primary-gold);

  margin-bottom: 15px;

}



.value-card h5 {

  font-size: 18px;

  margin-bottom: 8px;

}



.value-card p {

  font-size: 14px;

  color: #666;

}



/* --- Nearby List --- */

.nearby-list {

  list-style: none;

  padding: 0;

}



.nearby-list li {

  padding: 10px 0;

  border-bottom: 1px solid #f0f0f0;

  font-size: 14px;

  display: flex;

  justify-content: space-between;

}



.nearby-list li span {

  color: var(--primary-gold);

  font-weight: 600;

}



/* --- Filter Tabs --- */

.filter-tabs {

  display: flex;

  gap: 10px;

  margin-bottom: 30px;

  flex-wrap: wrap;

}



.filter-tabs .filter-btn {

  padding: 8px 20px;

  border: 1px solid #ddd;

  border-radius: 5px;

  background: var(--white);

  cursor: pointer;

  font-size: 13px;

  font-family: var(--font-heading);

  transition: all 0.3s ease;

}



.filter-tabs .filter-btn.active,

.filter-tabs .filter-btn:hover {

  background: var(--primary-gold);

  color: var(--white);

  border-color: var(--primary-gold);

}



/* --- Security Card --- */

.security-card {

  text-align: center;

  padding: 25px;

}



.security-card i {

  font-size: 30px;

  color: var(--primary-gold);

  margin-bottom: 12px;

}



.security-card h5 {

  font-size: 16px;

  margin-bottom: 5px;

}



.security-card p {

  font-size: 13px;

  color: #666;

  margin: 0;

}



/* --- Footer --- */

.footer {

  background: var(--primary-dark);

  color: rgba(255, 255, 255, 0.8);

  padding: 60px 0 0;

}



.footer h5 {

  color: var(--white);

  font-size: 18px;

  margin-bottom: 20px;

  font-weight: 600;

}



.footer p {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.7);

}



.footer a {

  color: rgba(255, 255, 255, 0.7);

  font-size: 14px;

}



.footer a:hover {

  color: var(--primary-gold);

}



.footer-links {

  list-style: none;

  padding: 0;

}



.footer-links li {

  padding: 5px 0;

}



.footer-links li a {

  font-size: 14px;

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding: 20px 0;

  margin-top: 40px;

  text-align: center;

  font-size: 13px;

}



.footer-bottom a {

  color: var(--primary-gold);

}



.footer-social a {

  display: inline-block;

  width: 36px;

  height: 36px;

  line-height: 36px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  margin-right: 8px;

  color: rgba(255, 255, 255, 0.8);

  font-size: 14px;

  transition: all 0.3s ease;

}



.footer-social a:hover {

  background: var(--primary-gold);

  border-color: var(--primary-gold);

  color: var(--white);

}



/* --- CTA Strip --- */

.cta-strip {

  padding: 40px 0;

  text-align: center;

}



.cta-strip h3 {

  margin-bottom: 5px;

}



.cta-strip p {

  margin-bottom: 20px;

}



/* --- Inline Enquiry Form --- */

.inline-form {

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

}



.inline-form .form-control {

  max-width: 200px;

}



.inline-form .btn-dark {

  white-space: nowrap;

}



/* --- Responsive --- */

@media (max-width: 991px) {

  .hero-main-title {

    font-size: 56px;

  }



  .hero-desc {

    font-size: 16px;

  }



  .hero-section>.container {

    padding-top: 80px;

  }



  .section-title {

    font-size: 32px;

  }



  .navbar-hon {

    padding: 15px 0;

    background: var(--primary-dark);

  }



  .gallery-grid {

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

  }



  .quick-fact-item {

    border-right: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    width: 50%;

  }



  .page-header-modern::after {

    margin-left: 15px;

  }

}



@media (max-width: 575px) {

  .hero-section {

    min-height: 100vh;

  }



  .hero-main-title {

    font-size: 40px !important;

    letter-spacing: -1px;

  }



  .hero-tagline {

    font-size: 11px;

    letter-spacing: 3px;

  }



  .hero-desc {

    font-size: 15px;

  }



  .section {

    padding: 60px 0;

  }



  .section-modern {

    padding: 50px 0;

  }



  .section-title {

    font-size: 28px;

  }



  .editorial-title {

    font-size: 28px !important;

  }



  .page-header-modern {

    padding: 120px 0 40px;

  }



  .page-header-modern h1 {

    font-size: 32px;

  }



  .inline-form .form-control {

    max-width: 100%;

  }



  .gallery-grid {

    grid-template-columns: 1fr;

  }



  .btn-royal {

    padding: 10px 20px;

    font-size: 10px;

  }



  .showcase-content {

    padding: 25px;

  }



  .gallery-item-premium {

    height: 200px;

  }



  .gallery-item-premium.tall {

    height: 250px;

  }

}



/* --- Editorial Layouts --- */

.section-modern {

  padding: 80px 0;

}



.editorial-title {

  font-size: 48px;

  line-height: 1.1;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: -1px;

  margin-bottom: 20px;

}



.editorial-title span {

  color: var(--primary-gold);

}



.editorial-lead {

  font-size: 16px;

  line-height: 1.7;

  color: #555;

  font-weight: 300;

  border-left: 3px solid var(--primary-gold);

  padding-left: 20px;

}



/* --- Staggered Highlights --- */

.highlights-staggered .staggered-item {

  position: relative;

  padding: 30px;

  background: var(--white);

  border-bottom: 2px solid var(--bg-cream);

  transition: var(--transition-smooth);

  height: 100%;

  z-index: 1;

}



.highlights-staggered .staggered-item:hover {

  border-bottom-color: var(--primary-gold);

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.staggered-num {

  font-size: 48px;

  font-weight: 900;

  color: var(--bg-cream);

  position: absolute;

  top: 10px;

  right: 20px;

  pointer-events: none;

  opacity: 0.6;

}



.staggered-icon {

  font-size: 24px;

  color: var(--primary-gold);

  margin-bottom: 18px;

  display: block;

}



.staggered-item h5 {

  font-size: 16px;

  margin-bottom: 15px;

  font-weight: 700;

}



.staggered-item p {

  font-size: 13px;

  color: #666;

  line-height: 1.7;

  margin: 0;

}



/* --- Editorial Grid/Overlap --- */

.section-editorial {

  overflow: hidden;

  padding: 80px 0;

}



.editorial-row {

  display: flex;

  align-items: center;

  position: relative;

}



.editorial-img-block {

  flex: 0 0 65%;

  position: relative;

}



.editorial-img-block .main-img {

  width: 100%;

  height: 550px;

  object-fit: cover;

  box-shadow: var(--shadow-lg);

}



.editorial-img-block .accent-box {

  position: absolute;

  top: -40px;

  left: -40px;

  width: 250px;

  height: 250px;

  background: var(--primary-gold);

  z-index: -1;

  opacity: 0.15;

}



.editorial-text-block {

  flex: 0 0 50%;

  background: var(--white);

  padding: 50px;

  margin-left: -15%;

  position: relative;

  z-index: 2;

  box-shadow: var(--shadow-md);

}



.editorial-text-block h2 {

  font-size: 36px;

  line-height: 1.1;

  text-transform: uppercase;

  margin-bottom: 20px;

}



.editorial-text-block h2 span {

  color: var(--primary-gold);

}



.btn-minimal {

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 12px;

  color: var(--primary-dark);

  border-bottom: 2px solid var(--primary-gold);

  padding-bottom: 5px;

  transition: var(--transition-smooth);

  display: inline-block;

}



.btn-minimal:hover {

  color: var(--primary-gold);

  padding-left: 10px;

  text-decoration: none;

}



/* --- Project Showcase --- */

.project-showcase {

  background: var(--white);

  box-shadow: var(--shadow-lg);

}



.showcase-main-img {

  position: relative;

  overflow: hidden;

}



.project-showcase .row {

  align-items: stretch;

}



.showcase-img-grid {

  height: 100%;

}



.showcase-main-img {

  height: 100%;

}



.showcase-main-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 5s ease;

}



.project-showcase:hover .showcase-main-img img {

  transform: scale(1.05);

}



.premium-badge {

  position: absolute;

  top: 40px;

  left: 40px;

  background: var(--primary-gold);

  color: var(--white);

  padding: 10px 30px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 11px;

  z-index: 3;

}



.showcase-content {

  padding: 35px;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.showcase-content .content-inner {

  display: flex;

  flex-direction: column;

}



.showcase-content .content-inner .mt-auto {

  margin-top: 20px !important;

}



.status-indicator {

  display: inline-block;

  padding: 5px 20px;

  background: #f0fdf4;

  color: #16a34a;

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 2px;

}



.showcase-content h3 {

  font-size: 28px;

  text-transform: uppercase;

  letter-spacing: -1px;

}



.showcase-desc {

  font-size: 14px;

  line-height: 1.7;

  color: #666;

}



.feature-list-minimal {

  list-style: none;

  padding: 0;

}



.feature-list-minimal li {

  font-size: 14px;

  padding-bottom: 15px;

  color: #444;

  font-weight: 500;

  display: flex;

  align-items: center;

}



.feature-list-minimal li i {

  color: var(--primary-gold);

  margin-right: 15px;

  font-size: 12px;

}



@media (max-width: 991px) {

  .editorial-row {

    flex-direction: column;

  }



  .editorial-img-block,

  .editorial-text-block {

    flex: 0 0 100%;

    margin: 0;

    width: 100%;

  }



  .editorial-img-block .main-img {

    height: 400px;

  }



  .editorial-text-block {

    padding: 30px;

    margin-top: -60px;

    width: 90%;

    margin-left: auto;

    margin-right: auto;

  }



  .showcase-content {

    padding: 30px;

  }



  .editorial-title {

    font-size: 32px;

  }



  .editorial-lead {

    font-size: 15px;

    padding-left: 15px;

  }

}



/* --- Landscape & Landmark Registry --- */

.landmark-registry {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.landmark-registry-item {

  display: flex;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  transition: var(--transition-smooth);

}



.landmark-registry-item:hover {

  padding-left: 10px;

}



.landmark-num {

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: 14px;

  color: var(--primary-gold);

  margin-right: 20px;

  opacity: 0.6;

}



.landmark-name {

  font-size: 14px;

  color: var(--primary-dark);

  font-weight: 500;

  flex-grow: 1;

}



.distance-label {

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--primary-gold);

  background: var(--bg-cream);

  padding: 4px 10px;

  border-radius: 20px;

}



.map-wrapper-premium-editorial {

  position: relative;

  box-shadow: var(--shadow-lg);

  padding: 15px;

  background: var(--white);

  z-index: 1;

}



.map-frame-top {

  position: absolute;

  top: -20px;

  right: -20px;

  width: 150px;

  height: 150px;

  border-top: 5px solid var(--primary-gold);

  border-right: 5px solid var(--primary-gold);

  z-index: -1;

  opacity: 0.5;

}



.map-frame-bottom {

  position: absolute;

  bottom: -20px;

  left: -20px;

  width: 150px;

  height: 150px;

  border-bottom: 5px solid var(--primary-gold);

  border-left: 5px solid var(--primary-gold);

  z-index: -1;

  opacity: 0.5;

}



.map-wrapper-premium-editorial iframe {

  filter: grayscale(0.2) contrast(1.1);

  transition: var(--transition-smooth);

}



.map-wrapper-premium-editorial:hover iframe {

  filter: grayscale(0);

}



/* --- Luxury CTA Section --- */

.cta-bg-accent {

  position: absolute;

  top: -10%;

  right: -10%;

  width: 500px;

  height: 500px;

  background: var(--primary-gold);

  opacity: 0.05;

  border-radius: 50%;

}



.luxury-form-inline {

  background: var(--white);

  box-shadow: var(--shadow-lg);

  overflow: hidden;

  border-radius: 5px;

}



.luxury-input {

  width: 100%;

  padding: 22px 30px;

  border: none;

  border-right: 1px solid rgba(0, 0, 0, 0.05);

  font-size: 14px;

  font-weight: 500;

  outline: none;

}



.luxury-input:focus {

  background: #fdfcfb;

}



@media (max-width: 767px) {

  .luxury-input {

    border-right: none;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  }

}



/* --- Luxury Project Card & Filters --- */

.filter-tabs-modern {

  gap: 15px;

}



.filter-btn-clean {

  background: transparent;

  border: none;

  border-bottom: 2px solid transparent;

  padding: 5px 0;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 11px;

  color: #888;

  transition: var(--transition-smooth);

}



.filter-btn-clean:hover,

.filter-btn-clean.active {

  color: var(--primary-gold);

  border-bottom-color: var(--primary-gold);

}



.project-card-luxury {

  background: var(--white);

  box-shadow: var(--shadow-md);

  transition: var(--transition-smooth);

  height: 100%;

}



.project-card-luxury:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.luxury-img-wrapper {

  position: relative;

  overflow: hidden;

}



.luxury-img-wrapper .main-img {

  width: 100%;

  height: 250px;

  object-fit: cover;

  transition: transform 3s ease;

}



.project-card-luxury:hover .main-img {

  transform: scale(1.1);

}



.card-status-badge {

  position: absolute;

  top: 20px;

  right: 20px;

  background: rgba(255, 255, 255, 0.9);

  padding: 4px 12px;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.luxury-card-content {

  padding: 30px;

}



.location-minimal {

  font-size: 12px;

  color: var(--primary-gold);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.excerpt {

  font-size: 14px;

  color: #666;

  line-height: 1.6;

}



.meta-tags-minimal {

  display: flex;

  gap: 10px;

}



.meta-tags-minimal span {

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  padding: 3px 10px;

  background: var(--bg-cream);

  color: #888;

}



.opacity-0-5 {

  opacity: 0.5;

}



/* --- Project Detail Premium Styles --- */

/* --- Project Detail Premium Styles (Consolidated in Hero) --- */



.location-badge-premium {

  display: inline-block;

  padding: 10px 25px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  color: var(--white);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 11px;

  border-radius: 5px;

}



.border-gold {

  border-left-color: var(--primary-gold) !important;

}



.fact-card-premium {

  padding: 20px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  transition: var(--transition-smooth);

  text-align: center;

}



.fact-card-premium:hover {

  background: var(--primary-gold);

}



.fact-card-premium:hover * {

  color: var(--white) !important;

}



.fact-label {

  display: block;

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--primary-gold);

  margin-bottom: 15px;

}



.fact-value {

  font-size: 24px;

  font-weight: 800;

  color: var(--white);

  margin-bottom: 5px;

}



.fact-sub {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

  margin: 0;

  text-transform: uppercase;

  letter-spacing: 1px;

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* --- Master Plan & Amenities Modern --- */

.masterplan-premium-wrapper {

  position: relative;

  overflow: hidden;

}



.map-accent-box {

  position: absolute;

  bottom: -30px;

  right: -30px;

  width: 200px;

  height: 200px;

  background: var(--primary-gold);

  z-index: -1;

  opacity: 0.1;

}



.nav-tabs-clean {

  border: none;

  gap: 30px;

}



.nav-tabs-clean .nav-item .nav-link {

  border: none;

  background: transparent;

  color: #888;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 12px;

  padding: 10px 0;

  border-bottom: 2px solid transparent;

  transition: var(--transition-smooth);

}



.nav-tabs-clean .nav-item .nav-link.active {

  color: var(--primary-gold);

  border-bottom-color: var(--primary-gold);

}



.tab-img-wrapper img {

  width: 100%;

  height: 400px;

  object-fit: cover;

}



/* --- Infrastructure & Gallery Premium --- */

.accordion-premium {

  border: none;

}



.accordion-item-premium {

  background: var(--white);

  border: 1px solid rgba(0, 0, 0, 0.05);

  box-shadow: var(--shadow-sm);

  transition: var(--transition-smooth);

}



.accordion-trigger {

  width: 100%;

  padding: 20px 25px;

  background: transparent;

  border: none;

  text-align: left;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 12px;

  color: var(--primary-dark);

  outline: none;

}



.accordion-trigger .num {

  color: var(--primary-gold);

  margin-right: 20px;

  font-size: 12px;

}



.accordion-body-premium {

  padding: 0 25px 20px 55px;

}



.gallery-item-premium {

  position: relative;

  overflow: hidden;

  height: 250px;

}



.gallery-item-premium.tall {

  height: 500px;

}



.gallery-item-premium img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 5s ease;

}



.gallery-item-premium:hover img {

  transform: scale(1.1);

}



/* --- Luxury Form Box --- */

.luxury-form-box {

  max-width: 700px;

  margin: 0 auto;

}



.luxury-input-full {

  width: 100%;

  padding: 15px 20px;

  border: 1px solid rgba(0, 0, 0, 0.1);

  font-size: 14px;

  font-weight: 500;

  outline: none;

  background: #fdfcfb;

  transition: var(--transition-smooth);

  border-radius: 5px;

}



.luxury-input-full:focus {

  border-color: var(--primary-gold);

  background: var(--white);

}



.letter-spacing-2 {

  letter-spacing: 2px;

}



/* --- Contact Page Modern --- */

.contact-card-premium {

  background: var(--white);

  padding: 40px;

  text-align: left;

  transition: var(--transition-smooth);

  border-radius: 5px;

}



.contact-card-premium:hover {

  transform: translateY(-10px);

}



.gold-line {

  width: 40px;

  height: 2px;

  background: var(--primary-gold);

}



.min-vh-400 {

  min-height: 400px;

}



/* --- Footer Modern Styles --- */

.footer-modern {

  background: var(--primary-dark);

  color: var(--white);

}



.footer-logo {

  height: 50px;

  filter: brightness(0) invert(1);

}



.footer-nav-clean {

  list-style: none;

  padding: 0;

}



.footer-nav-clean li {

  margin-bottom: 12px;

}



.footer-nav-clean li a {

  color: rgba(255, 255, 255, 0.6);

  font-size: 13px;

  text-decoration: none;

  transition: var(--transition-smooth);

}



.footer-nav-clean li a:hover {

  color: var(--primary-gold);

  padding-left: 5px;

}



.border-white-10 {

  border-color: rgba(255, 255, 255, 0.1) !important;

}



.footer-social-modern {

  display: flex;

  gap: 20px;

}



.footer-social-modern a {

  color: rgba(255, 255, 255, 0.6);

  transition: var(--transition-smooth);

}



.footer-social-modern a:hover {

  color: var(--primary-gold);

}



/* --- Utility Classes --- */

.opacity-0-8 {

  opacity: 0.8;

}



.letter-spacing-5 {

  letter-spacing: 5px;

}



.z-index-2 {

  position: relative;

  z-index: 2;

}



.border-top-white-10 {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



/* --- Footer fix: remove editorial-lead border in footer --- */

.footer-modern .editorial-lead {

  border-left: none;

  padding-left: 0;

}



/* --- Mobile Nav --- */

.nav-mobile {

  padding: 20px 0;

}



.nav-mobile .nav-link {

  display: block;

  padding: 10px 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.nav-mobile .nav-cta {

  margin-left: 0;

  margin-top: 15px;

  display: inline-block;

  text-align: center;

}



/* --- Page header for inner pages (replaces page-banner) --- */

.page-header-modern {

  background: var(--primary-dark);

  padding: 160px 0 60px;

  position: relative;

}



.page-header-modern::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 60px;

  height: 3px;

  background: var(--primary-gold);

  margin-left: calc((100% - 1140px) / 2 + 15px);

}



.page-header-modern h1 {

  color: var(--white);

  font-size: 48px;

  text-transform: uppercase;

  letter-spacing: -1px;

  margin-bottom: 10px;

}



.page-header-modern h1 span {

  color: var(--primary-gold);

}



.page-header-modern .breadcrumb {

  background: none;

  padding: 0;

  margin: 0;

}



.page-header-modern .breadcrumb-item,

.page-header-modern .breadcrumb-item a {

  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-weight: 600;

}



.page-header-modern .breadcrumb-item.active {

  color: var(--primary-gold);

}



.page-header-modern .breadcrumb-item+.breadcrumb-item::before {

  color: rgba(255, 255, 255, 0.3);

}



/* --- Horizontal Scroll Amenities --- */

.amenity-scroll {

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

  scrollbar-color: var(--primary-gold) transparent;

  padding: 0 0 20px;

  cursor: grab;

}



.amenity-scroll:active {

  cursor: grabbing;

}



.amenity-scroll::-webkit-scrollbar {

  height: 4px;

}



.amenity-scroll::-webkit-scrollbar-track {

  background: transparent;

}



.amenity-scroll::-webkit-scrollbar-thumb {

  background: var(--primary-gold);

  border-radius: 2px;

}



.amenity-brochure-card {

  transition: var(--transition-smooth);

  height: 100%;

}



.amenity-brochure-card .card-img-wrapper {

  overflow: hidden;

  border-radius: 5px;

  box-shadow: var(--shadow-md);

  aspect-ratio: 3/2;

}



.amenity-brochure-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);

}



.amenity-brochure-card:hover img {

  transform: scale(1.05);

}



.amenity-title {

  font-family: var(--font-heading);

  font-weight: 500;

  font-size: 16px;

  color: var(--primary-dark);

  margin-top: 15px;

}



/* --- Clean Tabs --- */

.nav-tabs-clean {

  border-bottom: 2px solid rgba(197, 168, 124, 0.1);

}



.nav-tabs-clean .nav-item {

  margin: 0 15px;

}



.nav-tabs-clean .nav-link {

  border: none;

  background: transparent;

  color: var(--primary-dark);

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 12px;

  font-weight: 700;

  padding: 15px 0;

  position: relative;

  opacity: 0.6;

}



.nav-tabs-clean .nav-link:after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--primary-gold);

  transition: var(--transition-smooth);

}



.nav-tabs-clean .nav-link.active,

.nav-tabs-clean .nav-link:hover {

  opacity: 1;

  color: var(--primary-gold);

  background: transparent;

}



.nav-tabs-clean .nav-link.active:after {

  width: 100%;

}



.tab-content>.tab-pane {

  padding-top: 30px;

}



/* --- Endowments Matrix --- */

.spec-matrix-card {

  padding: 0 15px;

  height: 100%;

}



.gold-icon {

  color: var(--primary-gold);

  font-size: 24px;

}



.spec-category-title {

  font-family: var(--font-heading);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 11px;

  color: var(--primary-gold);

  border-bottom: 1px solid rgba(197, 168, 124, 0.2);

  padding-bottom: 10px;

}



.spec-list-refined {

  list-style: none;

  padding: 0;

  margin: 0;

}



.spec-list-refined li {

  font-size: 13px;

  color: var(--primary-dark);

  margin-bottom: 12px;

  position: relative;

  padding-left: 15px;

  line-height: 1.4;

  opacity: 0.9;

}



.spec-list-refined li:before {

  content: '•';

  position: absolute;

  left: 0;

  color: var(--primary-gold);

  font-weight: bold;

}



.feature-card-minimal {

  padding: 30px;

  background: var(--cream-light);

  border-left: 3px solid var(--primary-gold);

  height: 100%;

  transition: var(--transition-smooth);

}



/* --- Bento Specifications Layout --- */

.spec-matrix-card-bento {

  border-radius: 10px;

  overflow: hidden;

  height: 100%;

  transition: var(--transition-smooth);

}



.spec-matrix-card-bento:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-md) !important;

}



.spec-index-bg {

  position: absolute;

  top: 10px;

  right: 20px;

  font-size: 100px;

  font-weight: 800;

  color: var(--primary-gold);

  opacity: 0.1;

  font-family: var(--font-heading);

  line-height: 1;

}



.spec-category-title-bento {

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: 22px;

  color: var(--primary-dark);

}



.bg-cream-light {

  background-color: #fdfaf5;

}



.amenity-card-scroll {

  flex: 0 0 280px;

  background: var(--white);

  overflow: hidden;

  transition: var(--transition-smooth);

  box-shadow: var(--shadow-sm);

}



.amenity-card-scroll:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-md);

}



.amenity-card-img {

  overflow: hidden;

  height: 200px;

}



.amenity-card-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 3s ease;

}



.amenity-card-scroll:hover .amenity-card-img img {

  transform: scale(1.1);

}



.amenity-card-info {

  padding: 20px;

}



.amenity-card-info h6 {

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 5px;

}



.amenity-card-info p {

  font-size: 12px;

  color: #888;

  margin: 0;

  line-height: 1.5;

}



.scroll-arrows {

  display: inline-flex;

  gap: 8px;

}



.scroll-arrow-btn {

  width: 40px;

  height: 40px;

  border: 1px solid rgba(0, 0, 0, 0.1);

  background: var(--white);

  color: var(--primary-dark);

  cursor: pointer;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

}



.scroll-arrow-btn:hover {

  background: var(--primary-gold);

  color: var(--white);

  border-color: var(--primary-gold);

}



@media (max-width: 1199px) {

  .amenity-scroll-track {

    padding: 0 15px;

  }

}



@media (max-width: 767px) {

  .amenity-card-scroll {

    flex: 0 0 240px;

  }



  .amenity-card-img {

    height: 160px;

  }

}



/* --- Modern Gallery Grid --- */

.gallery-grid-modern {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 15px;

}



.gallery-cell {

  position: relative;

  overflow: hidden;

  height: 260px;

  cursor: pointer;

}



.gallery-cell.wide {

  grid-column: span 2;

  height: 300px;

}



.gallery-cell img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.gallery-cell:hover img {

  transform: scale(1.08);

}



.gallery-overlay {

  position: absolute;

  inset: 0;

  background: rgba(21, 45, 37, 0);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: var(--transition-smooth);

}



.gallery-overlay i {

  color: var(--white);

  font-size: 20px;

  opacity: 0;

  transform: scale(0.8);

  transition: var(--transition-smooth);

}



.gallery-cell:hover .gallery-overlay {

  background: rgba(21, 45, 37, 0.4);

}



.gallery-cell:hover .gallery-overlay i {

  opacity: 1;

  transform: scale(1);

}



@media (max-width: 767px) {

  .gallery-grid-modern {

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

    gap: 8px;

  }



  .gallery-cell {

    height: 180px;

  }



  .gallery-cell.wide {

    grid-column: span 2;

    height: 200px;

  }

}



@media (max-width: 480px) {

  .gallery-grid-modern {

    grid-template-columns: 1fr;

  }



  .gallery-cell.wide {

    grid-column: span 1;

  }

}



/* --- Lightbox --- */

.lightbox-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.92);

  z-index: 9999;

  display: none;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: 40px;

  cursor: pointer;

}



.lightbox-overlay.active {

  display: flex;

}



.lightbox-overlay img {

  max-width: 90%;

  max-height: 80vh;

  object-fit: contain;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

}



.lightbox-close {

  position: absolute;

  top: 20px;

  right: 30px;

  background: none;

  border: none;

  color: var(--white);

  font-size: 36px;

  cursor: pointer;

  opacity: 0.7;

  transition: opacity 0.3s;

  line-height: 1;

}



.lightbox-close:hover {

  opacity: 1;

}



.lightbox-caption {

  color: rgba(255, 255, 255, 0.7);

  margin-top: 15px;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

}



/* --- Popup Modal Styles --- */

.hon-modal-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.7);

  z-index: 10000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;

  backdrop-filter: blur(5px);

}



.hon-modal-overlay.active {

  display: flex;

}



.hon-modal {

  background: var(--white);

  width: 100%;

  max-width: 480px;

  padding: 40px;

  position: relative;

  border-radius: 5px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);

  animation: modalSlideIn 0.4s ease;

}



@keyframes modalSlideIn {

  from {

    opacity: 0;

    transform: translateY(-30px) scale(0.95);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.hon-modal-close {

  position: absolute;

  top: 15px;

  right: 20px;

  background: none;

  border: none;

  font-size: 28px;

  color: #999;

  cursor: pointer;

  line-height: 1;

  transition: color 0.3s;

}



.hon-modal-close:hover {

  color: var(--primary-dark);

}



.hon-modal-title {

  font-size: 28px;

  text-transform: uppercase;

  letter-spacing: -1px;

  margin-bottom: 8px;

}



.hon-modal-title span {

  color: var(--primary-gold);

}



.hon-modal-desc {

  font-size: 14px;

  color: #888;

  margin-bottom: 25px;

}



.hon-form-group {

  margin-bottom: 15px;

}



.hon-form-msg {

  font-size: 13px;

  margin-top: 10px;

  text-align: center;

}



.hon-form-msg.error {

  color: #dc3545;

}



.hon-form-msg.success {

  color: #28a745;

}



@media (max-width: 575px) {

  .hon-modal {

    padding: 25px;

    max-width: 100%;

  }



  .hon-modal-title {

    font-size: 22px;

  }

}