/* ------------------------------------------------------------------------------

  Template Name: Go.arch 
  Description: Go.arch  - Architecture HTML Template (Rebranded for Neralu Farms)
  Brand Palette:
    - Primary: #033E3E (Deep Teal Green)
    - Secondary: #F0E0C6 (Warm Sandstone Beige)
    - Main Bg: #FFF9E9 (Soft Cream Ivory)
    - Alt Bg: #F4E6D2 (Light Almond Beige)

/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/

/* 1.1 General */

@import url('bootstrap.min.css');
@import url('font-awesome.min.css');
@import url('animate.css');
@import url('hover.css');
@import url('magnific-popup.css');
@import url('owl.carousel.css');
@import url('owl.transitions.css');
@import url('settings.css');
@import url('layers.css');
@import url('navigation.css');
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Playfair+Display:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@200..800&display=swap');


html {
  font-size: 75%;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'montserratlight', sans-serif;
  font-size: 1em;
  line-height: 1.65;
  color: #033E3E;
  /* Updated to Deep Teal for text */
  background-color: #FFF9E9;
  /* Soft Cream Ivory */
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #033E3E;
  /* Deep Teal */
}

::selection {
  background-color: #033E3E;
  /* Deep Teal */
  color: #FFF9E9;
}

::-webkit-selection {
  background-color: #033E3E;
  color: #FFF9E9;
}

::-moz-selection {
  background-color: #033E3E;
  color: #FFF9E9;
}



/* 1.2 Typography */



@font-face {
  font-family: 'montserratlight';
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'montserratsemibold';
  src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
  font-weight: normal;
  font-style: normal;

}

h1,
.h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 8vmin;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #033E3E;
  /* Deep Teal */
}

h2,
.h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.1875em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #033E3E;
  /* Deep Teal */
}

h3,
.h3 {
  font-family: 'montserratsemibold';
  font-size: 1.875em;
  line-height: 1.1;
  font-weight: normal;
  color: #033E3E;
  /* Deep Teal */
}

h4,
.h4 {
  font-family: 'montserratsemibold';
  font-size: 1.125em;
  line-height: 1.35;
  font-weight: normal;
  color: #033E3E;
  /* Deep Teal */
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a {
  color: inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover {
  text-decoration: none;
}

p {
  margin-bottom: 1.6em;
}

b,
strong {
  font-family: 'Montserrat', sans-serif;
  color: #033E3E;
}

ul {
  list-style: none;
  padding-left: 0;
}

a {
  color: #033E3E;
  /* Deep Teal */
  -webkit-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
}

a:hover,
a:focus {
  color: #F0E0C6;
  /* Warm Sandstone on hover for contrast */
  outline: none;
}

a:focus {
  text-decoration: none;
}



/* 1.3 Fields */



.form-control,
textarea.form-control {
  font-size: 1em;
  height: 3.625em;
  border-radius: 0.75em;
  padding-left: 22px;
  color: #033E3E;
  background-color: #F4E6D2;
  /* Light Almond Beige */
  border: 1px solid #F4E6D2;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -webkit-transition: all .15s;
  -o-transition: all .15s;
  transition: all .15s;
}

textarea.form-control {
  height: 7.9em;
  padding-top: 1.1em;
  resize: none;
}

.form-control:focus {
  border-color: #033E3E;
  background-color: #FFF9E9;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control::-moz-placeholder {
  color: #5d6d6d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #5d6d6d;
}

.form-control::-webkit-input-placeholder {
  color: #5d6d6d;
}

.form-control.error {
  border-color: #033E3E;
}

.form-group {
  margin-bottom: 10px;
}

.wobble-error {
  -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
  animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
}

label.error {
  display: block !important;
  color: #d9534f;
  font-size: 13px;
  margin-top: 5px;
  font-family: 'Montserrat', sans-serif;
}



/* 1.4 Buttons */



.btn {
  font-family: 'montserratsemibold';
  position: relative;
  display: inline-block;
  border: 0.2em solid #033E3E;
  /* Deep Teal */
  border-radius: 30px;
  padding: 1.1em 2.2em 1.05em;
  font-size: 0.875em;
  color: #FFF9E9;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #033E3E;
  /* Deep Teal */
  border: 0;
  -webkit-transition: all .3s ease-out !important;
  transition: all .3s ease-out !important;
}

.btn:hover,
.btn:focus {
  color: #033E3E;
  background-color: #F0E0C6;
  /* Warm Sandstone */
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
}

.btn .icon-next {
  position: relative;
  top: -0.1em;
  margin-left: 0.6em;
  vertical-align: middle;
}

.btn-gray {
  background-color: #F4E6D2;
  color: #033E3E;
}

.btn-shadow-1 {
  box-shadow: 0 15px 34px rgba(3, 62, 62, 0.18);
}

.btn-shadow-2 {
  box-shadow: 0 15px 34px rgba(3, 62, 62, 0.5);
}



/* 1.5 Icons */



.icon-next {
  display: inline-block;
  width: 0.94em;
  height: 0.75em;
  background: url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size: 0.94em 0.75em;
}



/* 1.6 Loader */



.loader {
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FFF9E9;
  /* Soft Cream */
  color: #033E3E;
  text-align: center;
}

.loader .page-lines .line {
  background-color: #F4E6D2;
}

.loader-brand {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #033E3E;
  /* Deep Teal */
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {

  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {

  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}



/* 1.7 Content styles */



.layout {
  position: relative;
  overflow: hidden;
}

.text-primary {
  color: #033E3E;
}

.page-lines {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-lines .col-line {
  padding: 0;
}

.page-lines .line {
  position: absolute;
  left: 0;
  width: 1px;
  height: 50000px;
  background-color: #F4E6D2;
  /* Warm Sandstone */
}

.page-lines .col-line:last-child .line:last-child {
  left: auto;
  right: 0;
}

.row-base {
  margin-top: -3em;
}

.col-base {
  margin-top: 3em;
}

/*-------------------------------------------------------------*/
/* 1. Backgrounf leaf Styling */
/*--------------------------------------------------------------*/
/* 1. The Main About Section */
.about {
  position: relative;
  background-color: #F4E6D2;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 4em;
  padding-bottom: 4em;
  overflow: hidden;
  isolation: isolate;
}

/* 2. The Leaf "Wall Sticker" Pattern */
.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/img/bg-leaf/leaf_raw1.png');
  opacity: 0.07;
  background-size: 800px auto;
  background-repeat: repeat;
  pointer-events: none;
  z-index: -1;
}

/* 3. Ensure Text Sits Above the Pattern */
.about .container {
  position: relative;
  z-index: 2;
}



/* FIX: Remove the solid background color so the leaves show through behind the title */
.section-title {
  background-color: transparent !important;
  /* Forces transparency */
  text-align: center;
}

/* Ensure the big "fade" title doesn't create a solid block either */
.fade-title-left {
  z-index: 1;
  background: transparent !important;
}

.projects-section {
  background-color: #F4E6D2;
}

/* Remove the permanent overlay so images are clear by default */
.project figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* No color by default */
  transition: all 0.5s ease;
  z-index: 1;
}

/* Add the overlay ONLY on hover to make the "Explore" button and text stand out */
.project figure:hover:after {
  background-color: rgba(3, 62, 62, 0.6);
  /* Brand Deep Teal overlay on hover */
}

/* Ensure project text is always readable against the image */
/* Adding a subtle text-shadow helps legibility without needing a full color overlay */
.project-title,
.project-category {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 5 !important;
}

/* Ensure the text and button sit ABOVE the overlay */
.project figcaption {
  z-index: 5 !important;
}

/* Project 3: Light Teal Version */
/* Project 3: Lighter Brand Teal variant */
.project-teal-light {
  background-color: #5d8c8c !important;
}

/* Project 4: Solid Brand Deep Teal (#033E3E) */
.project-teal-solid {
  background-color: #033E3E !important;
}

/* Disable the hover overlay effect for solid color cards so they stay their brand color */
.project-teal-light figure:hover:after,
.project-teal-solid figure:hover:after {
  background-color: transparent !important;
}

/* Force the placeholder images in projects 3 & 4 to be invisible 
   to show the solid brand colors underneath */
.project-teal-light figure img,
.project-teal-solid figure img {
  opacity: 0 !important;
}

/* READABILITY FIX: 
   If these "Coming Soon" blocks use a placeholder image, 
   the background-color might be hidden. Use this rule to 
   remove the image overlay and show the solid color instead.
*/
.project-teal-light figure,
.project-teal-solid figure {
  background: none !important;
}


/* Ensure text remains Cream/Ivory (#FFF9E9) for contrast */
.project-teal-light .project-title,
.project-teal-solid .project-title,
.project-teal-light .project-category,
.project-teal-solid .project-category {
  color: #FFF9E9 !important;
}

/* Ensure the "Explore" button stays visible */
.project-teal-light .project-explore-btn,
.project-teal-solid .project-explore-btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/



.header-inner .vertical-panel-content {
  bottom: auto;
  top: 12.2vmin;
}

.header-inner {
  overflow: visible !important;
}


/* 2.1 Brand */


.brand-panel {
  position: absolute;
  z-index: 9999 !important;
  left: 0;
  top: 0;
  width: 39.47vmin;

  /* THE FIX: Allow the box to grow dynamically */
  min-height: 40.7vmin;
  height: auto !important;
  padding-bottom: 6vmin !important;
  /* Adds a nice cushion at the very bottom */

  padding: 4.8vmin 2em;
  background-color: #F4E6D2;
  text-align: center;
  transition: all 0.3s;
  overflow: hidden;
  pointer-events: auto !important;
}

.brand {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 4vmin;
  line-height: 1;
  color: #033E3E;
}

.brand:hover,
.brand:focus {
  color: #033E3E;
  text-decoration: none;
}

.brand-name {
  position: absolute;
  z-index: -1;

  /* Align to bottom right INSIDE the box */
  bottom: -10px;
  right: 10px;

  font-family: 'Montserrat', sans-serif;
  font-weight: 700;

  /* Drastically reduced size to fit the panel */
  font-size: 5em;

  line-height: 1;
  opacity: 0.05;
  /* Keeps the watermark subtle */
  color: #033E3E;

  /* Ensures it aligns to the right edge */
  text-align: right;
  width: 100%;
  pointer-events: none;
  /* Prevents clicking on the text */
}

.slide-number {
  font-family: 'Oswald', sans-serif;
  margin-top: 8vmin;
}

.slide-number .current-number {
  font-size: 8vmin;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #033E3E;
}

.slide-number sup {
  display: inline-block;
  position: relative;
  top: -3px;
  font-size: 2vmin;
  letter-spacing: 0.1em;
  color: #033E3E;
  vertical-align: top;
  margin-left: 0.46em;
}

.slide-number sup .delimiter {
  display: inline-block;
  margin-right: 0.4em;
}

.header-phone {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  position: absolute;
  z-index: 3;
  color: #FFF9E9;
  left: 50vmin;
  top: 5.9vmin;
}

@media (max-width: 991px) {

  /* 1. Stack the panel */
  .brand-panel,
  .header-inner .brand-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Changed this so it pushes from the top */
    padding: 0 !important;
  }

  /* 2. THE NEW FIX: Push the image itself down */
  .page-logo-header {
    margin-top: 100px !important;
    /* Adjust this to 80px, 120px, etc. */
    margin-bottom: 0 !important;
  }

  /* 3. The slide numbers */
  .slide-number {
    margin-top: 20px !important;
    margin-left: 70px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* 4. Number sizing */
  .slide-number .current-number {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .slide-number sup {
    position: static !important;
    vertical-align: baseline !important;
    font-size: 18px !important;
    margin-left: 6px !important;
    top: auto !important;
  }
}

/* 2.2 Vertical Panel */



.vertical-panel,
.vertical-panel-content {
  position: absolute;
  width: 19.735vmin;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.vertical-panel {
  z-index: 3;
  height: 10000px;
  background-color: #F4E6D2;
}

.vertical-panel-content {
  z-index: 4;
}

.vertical-panel-info {
  margin-bottom: 3.5vmin;
}

.vertical-panel-info .line {
  height: 7vmin;
  width: 1px;
  margin: 15px auto 0;
  background-color: #033E3E;
}

.vertical-panel-title {
  font-family: 'montserratsemibold';
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: #033E3E;
  position: relative;
  left: -6px;
  margin: 0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}



@media (min-width: 992px) {
  .vertical-panel-title {
    display: none !important;

  }
}

/* Ensure it is visible on Mobile (typically under 991px) */
@media (max-width: 991px) {
  .vertical-panel-title {
    display: block;
    /* Optional: Adjust positioning for mobile if needed */
  }

  .page-social-list {
    display: none !important;
    /* Hide social icons on mobile if they don't fit well */
  }

}

@media (max-height: 850px) {}

.social-list {
  margin-bottom: 3.5vmin;
}

.social-list li {
  margin-top: 3.8vmin;
}

.social-list .fa {
  font-size: 2.4vmin;
  color: #033E3E;
}

.social-list .fa:hover {
  color: #F0E0C6;
  /* Sandstone on hover */
  text-decoration: none;
}



/* 2.3 Navbar Desctop */



.navbar-desctop {
  display: none;
  position: absolute;
  z-index: 1000;
  /* CHANGED from 2 to 1000 */
  top: 0;
  left: 0;
  width: 100%;
  padding: 5.9vmin 0 0;

}

.navbar-desctop .brand {
  display: none;
  position: relative;
  top: -0.22em;
  font-size: 1.6em;
}

.navbar-desctop-menu {
  float: right;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.navbar-desctop-menu li {
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.navbar-desctop-menu li a {
  display: block;
  text-decoration: none;
  color: #F4E6D2;
  /* Light text for transparent header */
}

.navbar-desctop-menu li a:hover,
.navbar-desctop-menu .active>a {
  color: #033E3E;
  /* Deep Teal */
}

.navbar-desctop-menu>li {
  float: left;
  margin-left: 3.8em;
}

.navbar-desctop-menu>li>a {
  color: #FFF9E9;
  background-color: transparent;
  margin-bottom: 1.5em;
}

.navbar-desctop-menu li ul {
  position: absolute;
  z-index: 10;
  left: 100%;
  top: 60%;
  visibility: hidden;
  min-width: 200px;
  opacity: 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  background: #F4E6D2;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.navbar-desctop-menu>li>ul {
  left: -20px;
  margin-top: 0;
}

.navbar-desctop-menu li:hover>ul {
  top: 0;
  visibility: visible;
  opacity: 1;
}

.navbar-desctop-menu>li:hover>ul {
  top: 100%;
}

.navbar-desctop-menu li li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar-desctop-menu li li:last-child {
  border-bottom: 0;
}

.navbar-desctop-menu li li a {
  color: #033E3E;
  padding: 12px 20px 10px;
}



/* 2.4 Navbar Desctop Affix */



.navbar-desctop.affix {
  position: fixed;
  z-index: 9999 !important;
  /* CHANGED from 5 to 1001 */
  top: 0;
  background-color: #F0E0C6;
  /* Warm Sandstone */
  padding: 1.3em 0 0;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
}

.navbar-desctop.affix.affix-top {
  padding-top: 2.2em;
}

.navbar-desctop.affix .brand {
  display: inline-block;
  color: #033E3E;
}

.navbar-desctop.affix .navbar-desctop-menu li a {
  color: #033E3E;
}

.navbar-desctop.affix .navbar-desctop-menu li>a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active>a {
  color: #FFF9E9;
  /* Cream on hover/active in sticky */
}



/* 2.5 Navbar Mobile */


.navbar-mobile {
  position: absolute;
  z-index: 1000;
  /* CHANGED from 2 to 1000 */
  left: 0;
  top: 0;
  width: 100%;
  padding: 6vmin 0;
}

.navbar-mobile .brand {
  display: none;
  margin-left: 15px;
  font-size: 1.6em;
}

.navbar-collapse {
  background-color: #F4E6D2;
}

@media (max-height: 320px) {
  .navbar-collapse {
    max-height: 240px;
  }
}

.navbar-toggle {
  padding: 0;
  margin: 15px 15px 0 0;
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
}

.navbar-toggle .icon-bar {
  background-color: #F4E6D2;
  height: 2px;
  width: 30px;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 5px;
}

.navbar-toggle.collapsed .icon-bar {
  background-color: #F4E6D2;
}

.navbar-nav-mobile {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 1.2em;
  margin-bottom: 0;
}

.navbar-nav-mobile li {
  position: relative;
  border-top: 1px solid #F4E6D2;
}

.navbar-nav-mobile li a {
  display: block;
  padding: 1em 1em;
  color: #033E3E;
  text-decoration: none;
}

.navbar-nav-mobile>.current>a {
  color: #033E3E;
}

.navbar-nav-mobile li a .fa-angle-down {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav-mobile>.current>a .fa-angle-down {
  top: -0.2em;
  left: -0.3em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navbar-nav-mobile>.active>a,
.navbar-nav-mobile>.active>a:hover {
  background-color: #033E3E;
  color: #F4E6D2;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.navbar-nav-mobile ul {
  display: none;
}

.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li .active>a {
  color: #033E3E;
}



/* 2.6 Navbar Mobile Affix */



.navbar-mobile.affix {
  position: fixed;
  z-index: 9999 !important;
  /* CHANGED from 5 to 1001 */
  background-color: #F4E6D2;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  padding: 1.2em 0;
}

.navbar-mobile.affix .brand {
  display: inline-block;
}

.navbar-mobile.affix .navbar-toggle .icon-bar {
  background-color: #033E3E;
}



/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/

.bg-blog {
  background: url(../img/bg/bg_blog.jpeg) 100% 0 no-repeat;
  background-position: center center;

  /* Ensures the image covers the entire area, cropping if necessary */
  background-size: cover;

  /* Prevents the image from repeating */
  background-repeat: no-repeat;
}

.main {
  position: relative;
  overflow: hidden;
  min-height: 100px;

}

.main-inner {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 33.7vmin 0 17vmin;
}

.main-inner:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.6;
}

.main-projects,
.main-contacts {
  padding: 33.7vmin 0 17vmin;
}

.main-projects {
  padding: 33.7vmin 0 17vmin;
  background-size: cover;
  background-position: center 0;
}

.main-contacts:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.6;
  background: -webkit-linear-gradient(bottom, rgba(3, 62, 62, 0.95) 0%, rgba(3, 62, 62, 0.95) 26%, rgba(3, 62, 62, 0.6) 100%);
  /* Deep Teal Gradient */
  background: linear-gradient(to top, rgba(3, 62, 62, 0.95) 0%, rgba(3, 62, 62, 0.95) 26%, rgba(3, 62, 62, 0.6) 100%);
}

.main-header {
  position: relative;
  z-index: 2;
  color: #FFF9E9;
  text-align: right;
  padding-left: 38.5vmin;
}

.main-header h1 {
  color: #FFF9E9;
  margin: 0;
  margin-right: -0.32em;
}

.main-inner .page-lines {
  z-index: 1;
  opacity: 0.15;
}

.main-inner .page-lines .line {
  border-color: #FFF9E9;
}

.main-blog .page-lines,
.main-projects .page-lines,
.main-project .page-lines,
.main-contacts .page-lines {
  opacity: 0.08;
}


/* 3.1 Slider */



.rev_slider {
  color: #FFF9E9;
  min-height: 420px;
}

.rev_slider .btn {
  -webkit-transition: background-color .3s ease-out !important;
  transition: background-color .3s ease-out !important;
}

.tp-caption {
  padding: 0 20px;
  text-align: right;
}

/* --- 1. HIDE DEFAULT REVOLUTION SLIDER ARROWS --- */
/* This removes the arrows stuck in the middle of the screen */
.tparrows,
.tp-leftarrow,
.tp-rightarrow {
  display: none !important;
  visibility: hidden !important;
}


/* =========================================
   CUSTOM SLIDER ARROWS (Ultimate Fix - Sidebar Cleared)
   ========================================= */

#slider-prev,
#slider-next,
.arrow-left,
.arrow-right {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  /* Safely hidden below the sticky navbar */
  bottom: auto !important;
  width: 50px !important;
  height: 50px !important;
  border: 2px solid rgba(255, 249, 233, 0.7) !important;
  border-radius: 50% !important;
  color: #FFF9E9 !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* --- DESKTOP POSITIONING --- */
/* Left Arrow */
#slider-prev,
.arrow-left {
  left: 260px !important;
  /* FIXED: Pushes the arrow past the wide desktop sidebar */
  right: auto !important;
}

/* Right Arrow */
#slider-next,
.arrow-right {
  right: 40px !important;
  left: auto !important;
}

/* Hover Effect */
#slider-prev:hover,
#slider-next:hover,
.arrow-left:hover,
.arrow-right:hover {
  background-color: #FFF9E9 !important;
  color: #033E3E !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* --- MOBILE POSITIONING --- */
@media (max-width: 991px) {

  #slider-prev,
  #slider-next,
  .arrow-left,
  .arrow-right {
    top: auto !important;
    bottom: 30px !important;
    transform: none !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 16px !important;
  }

  /* Left Arrow */
  #slider-prev,
  .arrow-left {
    left: 90px !important;
    /* FIXED: Pushes the arrow past the Facebook icon */
  }

  /* Right Arrow */
  #slider-next,
  .arrow-right {
    right: 85px !important;
  }

  #slider-prev:hover,
  #slider-next:hover,
  .arrow-left:hover,
  .arrow-right:hover {
    transform: scale(1.1) !important;
  }
}


/* -------------------------------
   SMALL MOBILE (Below 480px)
--------------------------------*/
@media (max-width: 480px) {

  /* TITLE */
  .slide-title {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  /* SUBTITLE */
  .slide-subtitle {
    font-size: 13px !important;
    line-height: 20px !important;
  }

  /* BUTTON */
  .tp-caption .btn {
    font-size: 12px !important;
    padding: 9px 16px !important;
  }

}


/* ------------------------------------------------------------------------------- */
/* 4. About
/* ------------------------------------------------------------------------------- */



.bg-about {
  background: url(../img/bg/bg_about.jpeg) 100% 0 no-repeat;
  background-position: center center;

  /* Ensures the image covers the entire area, cropping if necessary */
  background-size: cover;

  /* Prevents the image from repeating */
  background-repeat: no-repeat;
}

.entry {
  margin: 3.2em 0;
}

.entry-title {
  font-size: 3.6em;
  margin: 0 0 1em;
}

.entry-text {
  font-size: 1.6em;
  line-height: 1.6;
}

.about .fade-title-left {
  top: 1em;
}

.col-about-title {
  margin-top: 0;
  margin-bottom: 1.1em;
}

.col-about-info p:last-child {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: normal;
}

.col-about-img {
  position: relative;
}

.col-about-img img {
  display: block;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}



/* 4.1 Services */



.row-services {
  margin-left: -4.1em;
  margin-right: -4.1em;
}

.col-service {
  padding: 0 4.1em;
}

.service-item {
  margin-bottom: 2em;
}

.service-item:last-child {
  margin-bottom: 0;
}

.service-item h4 {
  margin-top: 0.8em;
  margin-bottom: 1.1em;
}

.services .service-item h4 {
  margin-top: 1.25em;
}

.service-item p:last-child {
  margin-bottom: 0;
}



/* 4.2 Object Map */



.objects {
  position: relative;
}

.object-label {
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #F0E0C6;
  /* Sandstone */
  border-radius: 50%;
  cursor: pointer;
}

.popover.top {
  margin-top: -20px;
}

.object-info {
  position: absolute;
  display: none;
  z-index: 1;
  left: 50%;
  bottom: 40px;
  width: 12.4em;
  margin-left: -6.2em;
  padding: 1.1em 1.3em 3em;
  border: 0;
  background-color: rgba(3, 62, 62, 0.9);
  /* Deep Teal Transparent */
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.object-info.in {
  display: block;
}

.object-info:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top: 14px solid rgba(3, 62, 62, 0.9);
}

.object-title {
  font-size: 1em;
  font-family: 'montserratsemibold';
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F0E0C6;
  /* Sandstone */
  padding: 0 0 1em;
  border-bottom: 1px solid rgba(249, 249, 249, 0.2);
  margin: 0 0 .5em;
}

.object-content {
  font-family: 'montserratlight', sans-serif;
  font-size: 0.75em;
  line-height: 2.6;
  color: #FFF9E9;
  padding: 0;
}

.popover.top>.arrow {
  border-top-color: transparent;
}

.popover.top>.arrow:after {
  border-top-color: rgba(3, 62, 62, 0.9);
}




/* ------------------------------------------------------------------------------- */
/* 5. Projects
/* ------------------------------------------------------------------------------- */

/* ==================================================
   FINAL FIX: LOCKED CARD HEIGHT & OBJECT FIT
   ================================================== */

/* --- 1. DEFINE A FIXED HEIGHT FOR ALL CARDS --- */
/* This is crucial. Without this, images determine the height and break the layout. */
.project {
  position: relative;
  /* Lock the height to match your 'Coming Soon' placeholder height */
  /* 550px is a standard vertical card height. Adjust if needed. */
  height: 550px !important;
  overflow: hidden;
  /* Cuts off anything that spills out */
  background-color: #ccc;
  /* Fallback color for placeholders */
}

/* --- 2. FIGURE CONTAINER --- */
.project figure {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  /* Fills the 550px locked height */
  margin: 0 !important;
}

/* --- 3. IMAGE SCALING (OBJECT-FIT) --- */
.project figure img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  /* This makes the image fill the 550px box without stretching.
       It crops the top/bottom automatically to fit. */
  object-fit: cover !important;

  /* Animation settings */
  transition: transform 0.6s ease, filter 0.6s ease;
  backface-visibility: hidden;
}

/* --- 4. TEXT OVERLAY --- */
.project figcaption {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  /* Restore original text padding */
  padding: 3.2em 3.6em !important;
  pointer-events: none;

  /* OPTIONAL: Align text to bottom like your design usually prefers */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: flex-end; */
}

/* Hide old Zoom */
.project-zoom {
  display: none !important;
}

/* --- 5. EXPLORE BUTTON --- */
.project-explore-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.9);

  background-color: #033E3E;
  /* Deep Teal */
  color: #FFF9E9;
  /* Cream */
  padding: 12px 30px;
  border-radius: 50px;

  font-family: 'montserratsemibold', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 100;
  pointer-events: auto;
}

/* --- 6. HOVER INTERACTIONS --- */

/* Show Button */
.project figure:hover .project-explore-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Button Color Change */
.project-explore-btn:hover {
  background-color: #F0E0C6 !important;
  /* Sandstone */
  color: #033E3E !important;
  /* Deep Teal */
}

/* Image Zoom */
.project figure:hover img {
  filter: brightness(0.6);
  transform: scale(1.08);
}

/* Hide Text */
.project figure:hover .project-title,
.project figure:hover .project-category {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* 5.1 Carousel */



.owl-prev,
.owl-next {
  position: absolute;
  top: 50%;
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F4E6D2;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.owl-prev:hover,
.owl-next:hover {
  opacity: 1;
}

.owl-prev {
  left: 0.8em;
  padding-left: 35px;
  background: url(../img/img-icon/prev.png) left 50% no-repeat;
  background-size: 1.3em 1em;

}

.owl-next {
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background: url(../img/img-icon/next.png) right 50% no-repeat;
  background-size: 1.3em 1em;
}



/* 5.2 Magnific popup */



.mfp-figure {
  box-shadow: none;
}

.mfp-iframe-scaler {
  overflow: visible;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  padding: 0;
  margin-top: -10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 300;
  line-height: 0;
}

img.mfp-img {
  min-height: 460px;
}


.mfp-title {
  padding-right: 40px;
  font-size: 1.2em;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.mfp-counter {
  top: 5px;
}

.mfp-bg {
  background-color: #033E3E;
  /* Deep Teal Overlay */
}

.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
  display: none;
}

.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
  display: none;
}

.mfp-wrap .mfp-content {
  -webkit-perspective: 1300px;
  perspective: 1300px
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: scale(0) rotateY(60deg);
  -o-transform: scale(0) rotateY(60deg);
  transform: scale(0) rotateY(60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-transform: rotateY(-60deg);
  -ms-transform: rotateY(-60deg);
  -o-transform: rotateY(-60deg);
  transform: rotateY(-60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mfp-wrap.mfp-ready .mfp-figure,
.mfp-wrap.mfp-ready .mfp-iframe-scaler {
  opacity: 1;
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-wrap.mfp-removing .mfp-figure,
.mfp-wrap.mfp-removing .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform: rotateX(-60deg);
  -ms-transform: rotateX(-60deg);
  -o-transform: rotateX(-60deg);
  transform: rotateX(-60deg);

}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: url(../img/zoom-out.cur), zoom-out;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}



/* 5.3 Project Details */



.project-title-info {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 2vmin;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item {
  display: inline-block;
  margin-left: 1.8em;
}

.project-details-item {
  position: relative;
}

.project-details-img {
  position: relative;
  padding: 0;
}

.project-details-info {
  background-color: #033E3E;
  /* Deep Teal */
  padding: 4.8em 3.1em 4.8em;
  color: #FFF9E9;
}

.project-details-title {
  position: relative;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #F4E6D2;
  margin: 0 0 0.7em;
}

.project-details-title:before {
  content: '';
  position: absolute;
  bottom: -0.35em;
  width: 10em;
  border-top: 1px solid #ededed;
  left: -4.4em;
  width: 5.5em;
}

.project-details-descr {
  font-size: 1.1em;
  line-height: 1.62;
}

.project-details-descr p:last-child {
  margin-bottom: 0;
}

.project-details-item:nth-child(even) .project-details-info {
  right: 0;
  left: auto;
  top: 13%;
  background-color: #F0E0C6;
  /* Sandstone */
  color: #033E3E;
}

.project-details-item:nth-child(even) .project-details-title {
  color: #033E3E;
}

.project-details-item:nth-child(even) .project-details-title:before {
  border-top: 1px solid #033E3E;
}

/* 5.4 project list details */


/* --- Real Estate Card Styling --- */
.real-estate-card {
  background: #F4E6D2;
  /* Almond Beige */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* Soft shadow */
  overflow: hidden;
  margin-bottom: 30px;
  font-family: 'Montserrat', sans-serif;
  /* Matches your template font */
  border: 1px solid #eee;
  transition: transform 0.3s ease;
}

.real-estate-card:hover {
  transform: translateY(-5px);
  /* Hover lift effect */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Image Section */
.card-img-wrap {
  position: relative;
  height: 250px;
  overflow: hidden;
}

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

/* "Ongoing" Badge */
.status-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #033E3E;
  /* Deep Teal badge */
  color: #FFF9E9;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}

/* Card Content */
.card-body {
  padding: 20px 25px;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  color: #033E3E;
  margin: 0 0 10px 0;
}

.card-location {
  color: #555;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-location i {
  color: #033E3E;
}

/* Meta Data (Compass / Units) */
.card-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #555;
  margin-bottom: 15px;
}

.card-meta i {
  color: #033E3E;
  margin-right: 5px;
}

.meta-separator {
  margin: 0 10px;
  color: #ccc;
}

/* Divider Line */
.card-divider {
  height: 1px;
  background-color: #eee;
  margin: 15px 0 20px 0;
}

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

.cinematic-footer {
  position: relative;
  width: 100%;
  background: #081511;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.footer-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: scale(1.05);
  /* Slightly scaled to hide edges during mousemove */
}

/* --- SVG MASK FIXES --- */
.knockout-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 20vw;
  min-height: 100px;
  max-height: 350px;
  display: block;
  margin-top: 0;
  margin-bottom: 0px;
  pointer-events: none;
}

/* --- BOTTOM DETAILS --- */
.footer-details-section {
  position: relative;
  z-index: 3;
  background: #081511;
  /* seamlessly blends with the bottom of the SVG gradient */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 30px 0;
}

.footer-details {
  display: flex;
  justify-content: space-between;
  width: 75%;
  max-width: 850px;
  margin-bottom: 40px;
}

.info-col h4 {
  color: #c5a059;
  /* Brand Gold */
  font-family: "Playfair Display", serif;
  font-size: 24px;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

.info-col p,
.info-col a {
  color: #e0e0e0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.6;
  margin: 0 0 6px 0;
  display: block;
  /* Ensures social links stack vertically instead of side-by-side */
  font-weight: 500;
  transition: color 0.3s ease;
}

.info-col a:hover {
  color: #c5a059;
}

/* --- LEGAL BOTTOM BAR --- */
.footer-bottom {
  width: 85%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-bottom p {
  margin: 0;
}

.legal-links a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.3s ease;
}

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

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .knockout-svg {
    height: 18vw;
    min-height: unset;
    margin-top: 0px;
  }

  .footer-details {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    width: 90%;
  }

  .info-col a {
    display: inline-block;
    /* Puts social links in a row on mobile to save space */
    margin: 0 10px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    width: 90%;
  }

  .legal-links {
    margin-top: 5px;
  }

  .legal-links a {
    margin: 0 15px;
  }
}

/* ------------------------------------------------------------------------------- */
/* 6. Experience
/* ------------------------------------------------------------------------------- */



.experience {
  text-align: center;
}

.text-parallax {
  display: inline-block;
  background-color: #033E3E;
  /* Solid Teal fallback in case the image fails to load */
  background-position: center center !important;
  background-size: cover !important;

  /* This is the magic that clips the image to the shape of the text */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.text-parallax-content {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 21.8em;
  line-height: 1;
  margin-bottom: 0px;
  margin-top: -45px;

  /* We must make these transparent so the parent's background image shows through */
  background: transparent !important;
  color: transparent !important;
  mix-blend-mode: normal;
}

.experience-info {
  position: relative;
  top: -0.75em;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5625em;
  line-height: 1.45;
  letter-spacing: 0.06em;
  display: inline-block;
  text-align: left;
  margin: 0 0 0 0.5em;
}

/* =========================================
   MOBILE FIX: EXPERIENCE SECTION (12+)
   ========================================= */
@media (max-width: 768px) {

  /* 1. Shrink the massive 12+ so it fits on the screen */
  .text-parallax-content {
    font-size: 21em !important;
    margin-top: 0 !important;
  }

  /* 2. Push the text down so it stops overlapping the numbers */
  .experience-info {
    top: 0 !important;
    /* Removes the negative overlap */
    margin: 15px 0 0 0 !important;
    /* Adds safe breathing room below the numbers */
    text-align: center !important;
    /* Centers the text cleanly on mobile */
    font-size: 1.8em !important;
    /* Slightly scales down the text for mobile readability */
    display: block !important;
  }
}



/* =========================================
   STATS COUNTER SECTION (1 SINGLE ROW)
   ========================================= */
.stats-section {
  position: relative;
  padding: 80px 0;
  /* Adjust this URL to your desired background image */
  background-image: url('../img/bg/bg_projects.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* Deep Teal Overlay */
.stats-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 62, 62, 0.85);
  z-index: 1;
}

/* Expand the container specifically for this section to fit 7 items */
.stats-section .container {
  width: 100%;
  max-width: 1400px !important;
  /* Gives the 7 items room to breathe */
  position: relative;
  z-index: 2;
}

/* 1 Single Row Grid Layout */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Forces 7 columns in 1 row */
  align-items: start;
  /* Aligns items to the top so text wraps neatly */
  text-align: center;
  gap: 15px;
  /* Spacing between columns */
}

.stat-item {
  padding: 10px 5px;
  position: relative;
}

/* Thin, elegant vertical dividers */
.stat-item::after {
  content: '';
  position: absolute;
  top: 15%;
  right: -7px;
  width: 1px;
  height: 70%;
  background-color: rgba(240, 224, 198, 0.3);
  /* Subtle Sandstone line */
}

/* Remove the divider from the very last item */
.stat-item:last-child::after {
  display: none;
}

/* --- FIX FOR THE TEXT COLOR & SIZE BUG --- */
.stat-number {
  font-family: 'Oswald', sans-serif;
  font-size: 2.6rem !important;
  /* Scaled perfectly to fit 7 in a row */
  font-weight: 700;
  color: #F4E6D2 !important;
  /* Forces Cream Color */
  margin: 0 0 10px 0;
  line-height: 1.1;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

  display: block !important;
  white-space: nowrap;
  /* Keeps numbers and plus signs perfectly together */
}

/* Forces the animated numbers to exactly match the text next to it */
.stat-number .counter {
  font-size: inherit !important;
  color: #F4E6D2 !important;
  /* Overrides the template's grey color bug */
  display: inline !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Subtext Styling */
.stat-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem !important;
  /* Sleek, readable size */
  color: #F4E6D2 !important;
  /* Sandstone color */
  margin: 0 auto;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 140px;
  /* Keeps text neatly stacked under the numbers */
}


/* =========================================
   RESPONSIVE FALLBACKS (For Smaller Screens)
   ========================================= */

/* On smaller laptops, 7 items is too tight. Fall back to 4 top / 3 bottom */
@media (max-width: 1199px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40px;
  }

  .stat-item::after {
    display: block;
    right: 0;
  }

  .stat-item:nth-child(4)::after,
  .stat-item:last-child::after {
    display: none;
  }
}

/* Tablets (iPad) */
@media (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-item::after {
    display: block;
    right: 0;
  }

  .stat-item:nth-child(3n)::after,
  .stat-item:last-child::after {
    display: none;
  }
}

/* Mobile Phones (Stacks into 2 neat columns) */
/* Mobile Phones (2 columns, perfectly centered 7th item) */
@media (max-width: 767px) {
  .stats-section {
    padding: 60px 15px;
    /* Added side padding so text doesn't touch screen edges */
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 45px;
    /* Gives the items more breathing room vertically */
    column-gap: 10px;
  }

  /* THE MAGIC FIX: Forces the 7th item to stretch across both columns and center itself */
  .stat-item:last-child {
    grid-column: span 2;
    margin: 0 auto;
  }

  /* Completely hide the messy vertical dividers on mobile screens */
  .stat-item::after {
    display: none !important;
  }

  /* Optimized mobile font sizes */
  .stat-number {
    font-size: 2.8rem !important;
    margin-bottom: 5px;
  }

  .stat-text {
    font-size: 0.85rem !important;
    max-width: 100%;
    /* Prevents text from wrapping awkwardly */
  }
}

/* =========================================
   KEY PILLARS SECTION (3D FLIP + 1 ROW GRID)
   ========================================= */

.pillars-section {
  padding: 80px 0;
  background-color: #F4E6D2;
  /* Almond Beige */
  text-align: center;
  font-family: 'Playfair Display', serif;
  /* Elegant Serif Font */
  overflow: hidden;
  /* Keeps everything contained */
}

/* --- HEADER STYLES --- */
.pillars-header {
  margin-bottom: 50px;
}

.pillars-kicker {
  display: block;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #033E3E;
  /* Deep Teal */
  margin-bottom: 10px;
  font-weight: 600;
}

.pillars-title {
  font-size: 3rem;
  color: #033E3E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-weight: 700;
}

.title-icon {
  width: 35px;
  height: 35px;
  transform: rotate(-20deg);
}

/* --- GRID LAYOUT (The 1-Row Fix) --- */
.pillars-grid {
  display: grid;
  /* CRITICAL: Forces exactly 5 columns in one row */
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  /* Wide enough to fit 5 cards comfortably */
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 3D CARD CONTAINER --- */
.pillar-card {
  background-color: transparent;
  width: 100%;
  height: 320px;
  /* Fixed height required for 3D flip */
  perspective: 1000px;
  /* Creates the 3D depth effect */
  cursor: pointer;
  min-width: 0;
  /* Prevents overflow issues */
}

/* --- INNER FLIPPER --- */
.pillar-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  /* Smooth flip speed */
  transform-style: preserve-3d;
}

/* Hover Effect: Trigger the Flip */
.pillar-card:hover .pillar-card-inner {
  transform: rotateY(180deg);
}

/* --- FRONT & BACK FACE SHARED STYLES --- */
.pillar-card-front,
.pillar-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Hides the back side during flip */
  backface-visibility: hidden;
  border-radius: 15px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 230, 210, 0.5);
  /* Thin elegant border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* --- FRONT FACE STYLING --- */
.pillar-card-front {
  background-color: #FFF9E9;
  /* Cream base */
  color: #033E3E;
}

.pillar-icon img {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
}



.pillar-text {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #033E3E;
  line-height: 1.4;
}

/* --- BACK FACE STYLING --- */
.pillar-card-back {
  background-color: #033E3E;
  /* Deep Teal Background */
  color: #F4E6D2;
  transform: rotateY(180deg);
  /* Starts flipped away */
  border: 1px solid #033E3E;
}

.pillar-back-title {
  font-size: 1.1rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #F0E0C6;
  /* Sandstone text accent */
  border-bottom: 1px solid rgba(240, 224, 198, 0.3);
  padding-bottom: 8px;
  width: 90%;
}

.pillar-back-desc {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #FFF9E9;
  opacity: 0.95;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

/* Tablet (Switch to 2 rows if needed, or keep tight) */
@media (max-width: 1024px) {
  .pillars-grid {
    gap: 10px;
  }

  .pillar-text {
    font-size: 1rem;
  }

  .pillar-card {
    height: 340px;
    /* Taller to fit text on narrower cards */
  }
}

/* Mobile (Stack vertically) */
@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    /* 1 column layout */
    max-width: 320px;
  }

  .pillar-card {
    height: 280px;
    margin-bottom: 15px;
  }
}

/* =========================================
          SECTION 1: TEAM (Curve & Scroll)
          ========================================= */
.team-section {
  text-align: center;
  padding: 80px 20px;
  padding-top: 100px;
  position: relative;
  background-color: #F4E6D2;
}

.team-section h2 {
  font-size: 2.8rem;
  color: #033E3E;
  margin-bottom: 40px;
  font-weight: 700;
  letter-spacing: -1px;
}

.team-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 400px;
}

.member {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1;
}

/* CURVE LOGIC (Desktop Only) */
@media (min-width: 769px) {
  .member:nth-child(4) {
    margin-top: 0px;
  }

  .member:nth-child(3),
  .member:nth-child(5) {
    margin-top: 30px;
  }

  .member:nth-child(2),
  .member:nth-child(6) {
    margin-top: 60px;
  }

  .member:nth-child(1),
  .member:nth-child(7) {
    margin-top: 100px;
  }

  .member:hover {
    transform: translateY(-10px);
    z-index: 100;
  }
}

.member img {
  height: 260px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

/* TOOLTIP */
.tooltip-wrapper {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 200px;
  background: #FFF9E9;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
  margin-bottom: 15px;
}

.tooltip-wrapper strong {
  display: block;
  margin-bottom: 5px;
  color: #033E3E;
  font-size: 0.95rem;
  font-weight: 700;
}

.tooltip-wrapper::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #F4E6D2 transparent transparent transparent;
}

.member:hover .tooltip-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* TEAM MOBILE VIEW */
@media (max-width: 768px) {
  .team-section {
    padding-top: 40px;
    overflow: hidden;
  }

  .team-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .team-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .team-row::-webkit-scrollbar {
    display: none;
  }

  .member {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .member img {
    height: 350px;
    max-width: 80%;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));
  }

  .tooltip-wrapper {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 80%;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .tooltip-wrapper::after {
    display: none;
  }
}

/* TEAM DOTS */
.dots-container {
  display: none;
}

@media (max-width: 768px) {
  .dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 30px;
  }
}

/* ------------------------------------------------------------------------------- */
/* Reviews Section Styling */
/* ------------------------------------------------------------------------------- */

/* Reviews Section - General */
.reviews-section {
  padding: 80px 0;
  background-color: #F4E6D2;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #033E3E;
  margin-bottom: 50px;
  text-align: center;
}

/* 3D Container Setup */
.slider-container {
  position: relative;
  max-width: 1000px;
  /* Reduced width since arrows are gone */
  margin: 0 auto;
  perspective: 1000px;
}

.reviews-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
  padding-top: 20px;
}

.reviews-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none !important;
  transition: none !important;
  left: 0 !important;
  display: block !important;
}

.stories-section .section-header {
  margin-bottom: 20px !important;
}

/* 3D Card Styling */
.review-card {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 380px;
  background: #FFF9E9;
  /* Cream Cards */
  border-radius: 20px;
  padding: 0 20px 30px 20px;
  text-align: center;
  border: none;
  box-sizing: border-box;

  /* Default State */
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  z-index: 0;
  /* Slower transition (0.8s) for smoother auto-play */
  transition: all 0.8s ease-in-out;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- DYNAMIC CLASSES (Handled by JS) --- */

/* 1. The Active Card (Center) */
.review-card.active {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* 2. The Next Card (Right) */
.review-card.next {
  opacity: 1;
  z-index: 5;
  transform: translateX(10%) scale(0.85) perspective(1000px) rotateY(-10deg);
  filter: blur(1px) brightness(0.85);
}

/* 3. The Prev Card (Left) */
.review-card.prev {
  opacity: 1;
  z-index: 5;
  transform: translateX(-110%) scale(0.85) perspective(1000px) rotateY(10deg);
  filter: blur(1px) brightness(0.85);
}

/* Profile Image & Badge */
.profile-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  margin: -45px auto 15px auto;
  z-index: 12;
}

.profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #F4E6D2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.google-badge {
  position: absolute;
  bottom: 0;
  right: -5px;
  width: 24px;
  height: 24px;
  background: #F4E6D2;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-badge img {
  width: 16px;
  height: 16px;
}

/* Text Content */
.reviewer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #033E3E;
  margin: 10px 0 5px;
}

.review-date {
  font-size: 0.85rem;
  color: #888;
  display: block;
  margin-bottom: 10px;
}

.stars {
  color: #033E3E;
  font-size: 1.4rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.review-text {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
}

/* Hide nav arrows if they exist in HTML */
.nav-arrow {
  display: none !important;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .reviews-wrapper {
    height: 520px;
  }

  .review-card {
    width: 85%;
    top: 60px;
  }

  .review-card.next {
    transform: translateX(5%) scale(0.85);
  }

  .review-card.prev {
    transform: translateX(-105%) scale(0.85);
  }
}

/* =========================================
   REVIEW PAGINATION DOTS
   ========================================= */
.review-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  position: relative;
  z-index: 20;
}

.review-dots .dot {
  width: 10px;
  height: 10px;
  background-color: rgba(3, 62, 62, 0.2);
  /* Faded Teal for inactive */
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* The current review dot expands into a pill shape */
.review-dots .dot.active {
  background-color: #033E3E;
  /* Solid Deep Teal */
  width: 28px;
  border-radius: 10px;
}

/* --- MOBILE DOTS ADJUSTMENT --- */
/* =========================================
   MOBILE FIX: EXPANDED FRAME FOR TALL CARDS
   ========================================= */
@media (max-width: 991px) {

  /* 1. Make the container MASSIVE (620px) so the tallest card easily fits inside */
  .reviews-wrapper {
    height: 620px !important;
  }

  /* 2. Position the dots safely in the normal flow beneath the tall cards */
  .review-dots {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    z-index: 9999 !important;
    gap: 8px !important;
  }

  /* 3. Normal layout rules so the beige backgrounds stop overlapping */
  .reviews-section {
    overflow: visible !important;
    padding-bottom: 20px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .stories-section {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0px !important;
    padding-top: 20px !important;
  }

  /* 4. Perfect finger-tap sizing for mobile screens */
  .review-dots .dot {
    width: 8px !important;
    height: 8px !important;
  }

  .review-dots .dot.active {
    width: 24px !important;
    height: 8px !important;
  }
}

/* ------------------------------------------------------------------------------- */
/* STORIES SECTION STYLES */
/* ------------------------------------------------------------------------------- */

/* =========================================
   STORIES FROM OUR FAMILY (YOUTUBE SHORTS - ULTIMATE UX)
   ========================================= */

/* --- SECTION & CAROUSEL LAYOUT --- */
.stories-section {
  padding: 30px 0 20px 0 !important;
  background-color: #F4E6D2;
  /* Almond Beige */
  text-align: center;
}

.stories-section .section-subhead {
  color: #666;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 40px auto;
}

.carousel-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 20px 0;
  margin: 0;
  overflow-x: auto;
  justify-content: center;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
}

.carousel-track::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome/Safari/Edge */
}

/* --- CARD BASE & LIFT EFFECT --- */
.story-card.video-short-card {
  width: 260px;
  min-width: 260px;
  height: 462px;
  /* Perfect height for vertical video */
  border-radius: 15px;
  position: relative;
  background: #000;
  padding: 0;
  border: 1px solid rgba(240, 224, 198, 0.3);
  /* Subtle sandstone border */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.4s ease;
}

.story-card.video-short-card:hover {
  transform: translateY(-12px);
  /* Card physically lifts up */
  box-shadow: 0 25px 45px rgba(3, 62, 62, 0.25);
  /* Drops a deep teal shadow */
  border-color: #033E3E;
}

/* --- IFRAME CONTAINER --- */
.short-iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 15px;
  overflow: hidden;
  /* Keeps the zoom effect cleanly inside the rounded corners */
}

.short-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 15px;
}

/* --- CINEMATIC BACKGROUND ZOOM --- */
.custom-video-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Smooth zoom */
}

.short-iframe-container:hover .custom-video-overlay {
  transform: scale(1.08);
  /* The image pushes toward the user */
}

/* --- COLOR-SHIFTING BRAND GRADIENT --- */
.custom-video-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
  transition: background 0.5s ease;
}

.short-iframe-container:hover .custom-video-overlay::before {
  /* Shifts to your rich Deep Teal brand color on hover */
  background: linear-gradient(to bottom, rgba(3, 62, 62, 0.1) 0%, rgba(3, 62, 62, 0.9) 100%);
}

/* --- SLEEK PLAY ICON & SONAR PULSE --- */
.custom-play-btn {
  position: relative;
  z-index: 3;
  color: #ffffff;
  /* Pure white play icon (No circle) */
  font-size: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.6));
  /* Heavy drop shadow for contrast */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

/* The radiating sonar rings behind the icon */
.custom-play-btn::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: -1;
  animation: video-sonar 2s infinite;
}

@keyframes video-sonar {
  0% {
    transform: scale(0.8);
    opacity: 1;
    border: 2px solid rgba(255, 255, 255, 0.8);
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
    border: 2px solid rgba(255, 255, 255, 0);
  }
}

.short-iframe-container:hover .custom-play-btn {
  transform: scale(1.15);
  /* Icon pops out slightly */
  color: #F0E0C6;
  /* Icon turns elegant Sandstone on hover */
}

.short-iframe-container:hover .custom-play-btn::before {
  animation: none;
  /* Stops the pulse so the user can focus on clicking */
}

/* --- SLIDING "WATCH STORY" TEASER --- */
.custom-video-overlay::after {
  content: 'WATCH STORY';
  position: absolute;
  bottom: -30px;
  /* Hidden below the card */
  left: 50%;
  transform: translateX(-50%);
  color: #F0E0C6;
  /* Sandstone text */
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  opacity: 0;
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.short-iframe-container:hover .custom-video-overlay::after {
  bottom: 30px;
  /* Glides up into view */
  opacity: 1;
}

/* --- YOUTUBE BOTTOM BUTTON --- */
.stories-footer {
  margin-top: 40px;
}

.btn-youtube {
  background-color: #bd081c;
  /* YouTube Red */
  color: #FFF9E9;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(189, 8, 28, 0.2);
}

.btn-youtube i {
  margin-right: 8px;
  font-size: 1.1rem;
}

.btn-youtube:hover {
  background-color: #9a0717;
  color: #FFF9E9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(189, 8, 28, 0.3);
}

/* --- MOBILE ADJUSTMENTS --- */
/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {

  /* Only target the text so it doesn't mess up our layout padding */
  .section-subhead {
    padding: 0 15px;
    font-size: 1rem;
    margin-bottom: 20px !important;
    /* Pulls the videos slightly closer to the text */
  }

  .carousel-track {
    justify-content: flex-start;
    /* Allows smooth scrolling from the left edge on mobile */
    padding: 10px 15px 30px 15px;
    /* Adds edge padding and bottom breathing room */
  }
}

/* ------------------------------------------------------------------------------- */
/* FAQ Section
/* ------------------------------------------------------------------------------- */

/* FAQ SECTION STYLES */
.faq-section {
  padding: 80px 0;
  background-color: #F4E6D2;
  /* Off-white background */
  font-family: 'Segoe UI', sans-serif;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

/* The FAQ Card */
.faq-item {
  background: #FFF9E9;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* The Question (Clickable Header) */
.faq-question {
  width: 100%;
  text-align: left;
  background: #FFF9E9;
  border: none;
  padding: 20px 25px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #033E3E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* The Arrow Icon */
.faq-icon svg {
  transition: transform 0.4s ease;
  /* Smooth rotation */
  color: #888;
}

/* The Answer (Hidden by default) */
.faq-answer {
  max-height: 0;
  /* Hidden initially */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  /* The smooth slide animation */
  background: #FFF9E9;
}

.faq-answer p {
  padding: 15px 25px 25px 25px;
  margin: 0;
  line-height: 1.6;

  /* UPDATED FOR BOLDNESS */
  color: #333;
  /* Darker black (instead of grey) makes it pop */
  font-weight: 500;
  /* Medium Boldness (Standard is 400) */

  opacity: 0;
  transition: opacity 0.3s ease;
}

/* --- ACTIVE STATE (When Open) --- */

/* 1. Change Header Color */
.faq-item.active .faq-question {
  background-color: #033E3E;
  /* Deep Teal */
  color: #F4E6D2;
}

/* 2. Rotate Arrow */
.faq-item.active .faq-icon svg {
  transform: rotate(180deg);
  color: #F4E6D2;
}

/* 3. Show Text */
.faq-item.active .faq-answer p {
  opacity: 1;
}

/* --- MOBILE RESPONSIVENESS FIXES --- */
@media (max-width: 768px) {

  /* 1. Add Side Spacing to the Whole Section */
  .faq-section {
    padding: 60px 20px;
  }

  #about.faq-section {
    margin-top: -20px !important;
  }

  .faq-container {
    width: 100%;
    /* Use full available width inside the padding */
    margin: 0 auto;
  }

  /* 2. Fix the Title Size */
  .section-title-faq {
    font-size: 1.8rem !important;
    /* Smaller title for mobile */
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .section-subhead {
    font-size: 0.95rem;
    padding: 0 10px;
    /* Prevent text hitting edges */
  }

  /* 3. Card Styling for Mobile */
  .faq-question {
    padding: 18px 20px;
    /* Comfortable touch target */
    font-size: 1rem;
    /* Readable text size */
  }

  /* 4. Answer Text Padding (Matches your screenshot) */
  .faq-answer p {
    /* Top Right Bottom Left */
    padding: 25px 20px 30px 20px;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* 5. Add space between cards */
  .faq-item {
    margin-bottom: 15px;
    /* Gap between questions */
  }
}

/* ------------------------------------------------------------------------------- */
/* 8. Blog
/* ------------------------------------------------------------------------------- */

.neralu-blog-section {
  padding: 80px 0;
  background: #F4E6D2;
}

.blog-header {
  text-align: center;
  margin-bottom: 60px;
}

.blog-header h2 {
  font-size: 36px;
  color: #033E3E;
  margin-bottom: 10px;
}

.blog-header p {
  color: #555;
  max-width: 650px;
  margin: auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.blog-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-image {
  height: 230px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: 0.5s ease;
}

.blog-card:hover .blog-image {
  transform: scale(1.08);
}

.blog-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.category {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: #033E3E;
  color: #fff;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 50px;
  z-index: 2;
}

.blog-content {
  padding: 25px;
}

.blog-content h3 {
  font-size: 20px;
  margin-bottom: 12px;
  line-height: 1.4;
  position: relative;
}

.blog-content h3::after {
  content: "";
  width: 0;
  height: 2px;
  background: #033E3E;
  display: block;
  transition: 0.4s;
  margin-top: 6px;
}

.blog-card:hover h3::after {
  width: 60px;
}

.blog-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.read-more {
  display: inline-block;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #033E3E;
  transition: 0.3s;
}

.blog-card:hover .read-more {
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* 8.1 Blog Details */

.blog-details {
  margin: 10.2em 0 8.3em;
}

/* Center the header and meta data */
.post-header {
  margin-bottom: 5em;
  text-align: center;
}

.post-header .blog-meta {
  display: flex;
  justify-content: space-between;
  /* Keeps author left and date right within the center column */
  margin-top: 2.45em;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* Professional text justification for the body */
.post-content p {
  text-align: justify;
  text-justify: inter-word;
  /* Makes justification look cleaner */
  line-height: 1.8;
  margin-bottom: 1.5em;
  font-size: 1.1em;
  color: #444;
}

.post-thumbnail {
  margin-bottom: 2.5em;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Ensures image is centered */
}

/* Center the tags at the bottom */
.blog-tags {
  margin-top: 5.4em;
  text-align: center;
}


/* 8.2 Widgets */

.widget {
  margin-bottom: 3.65em;
}

.widget-title {
  font-family: 'montserratsemibold';
  font-weight: normal;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2.25em 0;
}

/* ---------------------------------------------------
   Glassmorphism Sidebar Form & Interactivity
----------------------------------------------------- */

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  margin-top: 1em;
}

/* Background Blobs to create the glass effect */
.glass-blob {
  position: absolute;
  filter: blur(35px);
  z-index: -1;
  opacity: 0.6;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.blob-1 {
  width: 180px;
  height: 180px;
  background: #2c5e43;
  /* Your brand green */
  top: -30px;
  right: -40px;
}

.blob-2 {
  width: 200px;
  height: 200px;
  background: #d4a373;
  /* Warm sandalwood tone */
  bottom: -40px;
  left: -50px;
  animation-delay: 2s;
}

/* The Frosted Glass Container */
.glass-widget {
  background: rgba(255, 255, 255, 0.4);
  /* More transparent so the blur shows */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Adding a white top/left border simulates light hitting glass */
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  border-left: 1.5px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 35px 25px;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
}

.glass-widget-title {
  font-family: 'montserratsemibold', sans-serif;
  font-weight: 700;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.5em 0;
  color: #1a3c2a;
}

.glass-subtitle {
  text-align: center;
  font-size: 0.95em;
  color: #444;
  margin-bottom: 25px;
}

/* Glass Inputs */
.glass-control {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  height: 48px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  color: #222;
}

.glass-control:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.9);
  border-color: #2c5e43;
}

.glass-submit-btn {
  background-color: #2c5e43;
  color: #fff;
  height: 50px;
  width: 100%;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-top: 10px;
  cursor: pointer;
  letter-spacing: 1px;
}

.glass-submit-btn:hover {
  background-color: #1a3c2a;
  transform: translateY(-2px);
}

/* Success State Styling */
.hidden-state {
  display: none;
  animation: fadeIn 0.6s ease-in-out forwards;
}

.glass-success-card {
  text-align: center;
  padding: 20px 0;
}

.success-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  color: #1a3c2a;
  margin-bottom: 15px;
}

.success-text {
  font-size: 0.95em;
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

.success-icon i {
  font-size: 3.5em;
  color: #2c5e43;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* --- Desktop Sticky Behavior Assurance --- */
/* Note: For position: sticky to work, the parent row/container must be taller than the sidebar itself. */
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  margin-top: 1em;
}

/* --- Mobile Pop-up Styles --- */
.close-popup-btn {
  display: none;
  /* Hidden on desktop */
}

.mobile-popup-overlay {
  display: none;
}

@media (max-width: 767px) {

  /* Dark blurred overlay for mobile pop-up */
  .mobile-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    backdrop-filter: blur(4px);
  }

  .mobile-popup-overlay.active {
    display: block;
  }

  /* Override sticky to make it a centered fixed pop-up */
  .sidebar-sticky {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    z-index: 1000;
    display: none;
    /* Hidden until 5 sec delay fires */
    margin-top: 0;
  }

  .sidebar-sticky.show-popup {
    display: block;
    animation: popIn 0.5s ease forwards;
  }

  /* Bottom form override - we don't want the bottom form to become a pop-up too! */
  .bottom-blog-form .sidebar-sticky {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    display: block;
  }

  /* Mobile Close Button styling */
  .close-popup-btn {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #1a3c2a;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
  }

  @keyframes popIn {
    from {
      opacity: 0;
      transform: translate(-50%, -45%);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* --- Desktop Sticky Behavior --- */
.sidebar-parent {
  height: 100%;
  /* Important: Helps the sticky element slide down the whole column */
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  z-index: 10;
}

/* --- Mobile Pop-up specific --- */
.mobile-overlay {
  display: none;
}

.close-popup-btn {
  display: none;
}

@media (max-width: 767px) {

  /* The dark blurred background */
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9998;
    /* High z-index */
  }

  .mobile-overlay.active {
    display: block;
  }

  /* Make the sidebar form a centered popup */
  .sidebar-sticky {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    z-index: 9999;
    /* Higher than overlay so it is NOT blurry! */
    display: none;
    /* Hidden until JS shows it */
    margin-top: 0;
  }

  .sidebar-sticky.show-popup {
    display: block;
    animation: popIn 0.5s ease forwards;
  }

  /* Mobile Close Button */
  .close-popup-btn {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: #1a3c2a;
    cursor: pointer;
    z-index: 10000;
  }

  /* Keep Bottom Form visible and static on mobile */
  .bottom-form-container {
    display: block;
    width: 100%;
  }

  @keyframes popIn {
    from {
      opacity: 0;
      transform: translate(-50%, -45%);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

/* ===================================================
   DESKTOP STICKY FORM FIX (SCOPED TO BLOG ONLY)
=================================================== */

/* 1. Safely remove "Sticky-Killers" ONLY on the blog page */
.blog-page-template,
.blog-page-template .layout,
.blog-page-template .content,
.blog-page-template .blog-details {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* 2. Upgrade the blog row to Flexbox on Desktop so the column stretches */
@media (min-width: 992px) {
  .blog-details .container>.row {
    display: flex;
  }

  /* Turn off the old Bootstrap floats for these two columns */
  .blog-details .col-primary,
  .blog-details .sidebar-parent {
    float: none;
  }

  /* Force the sidebar column to stretch to the bottom of the article */
  .sidebar-parent {
    height: auto;
  }
}

/* 3. Apply the Sticky Rules to the form itself */
.sidebar-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  /* Distance from the top of the screen */
  height: max-content;
  z-index: 10;
}

/* Hide the bottom form on Desktop and Tablet */
@media (min-width: 768px) {
  .bottom-form-container {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------------- */
/* 9. Contacts
/* ------------------------------------------------------------------------------- */



.bg-contacts {
  background: url(../img/bg/bg_contact.jpeg) 100% 0 no-repeat;
  background-size: cover;
}

.contacts .fade-title-right {
  left: 90%;
}

.row-field {
  margin-left: -5px;
  margin-right: -5px;
}

.col-field {
  padding: 0 5px;
}

.col-message {
  display: none;
  margin-top: 20px;
}

.col-address {
  font-size: 1.125em;
  line-height: 2.1;
  margin-top: 2em;
}

.form-submit {
  margin-top: 1.2em;
}

.success-message {
  display: none;
}

.error-message {
  display: none;
}

.success-message .fa {
  margin-right: 7px;
  font-size: 1.5em;
}

.contact-details {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}

.col-map {
  height: 35em;
}

.gmap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: 100%;
}

.map-info {
  padding: 1.2em;
}

.map-title {
  margin-bottom: 2em;
}

.map-title h3 {
  margin: 0;
}

.map-address-row {
  margin-top: 1em;
}

.map-address-row .fa {
  float: left;
  margin: 0.35em 0.6em 0 0;
  width: 1.1em;
  text-align: center;
  color: #033E3E;
  font-size: 1.2em;
}

.map-address-row .text {
  display: block;
  overflow: hidden;
  font-size: 1.15em;
}

.contact-info {
  color: #FFF9E9;
  padding: 0;
  background: url(../img/bg/contact-details.jpg) 50% no-repeat;
  background-size: cover;
}

.contact-info-content {
  padding: 5.5em 5.6em;
  background-color: rgba(3, 62, 62, 0.95);
  /* Deep Teal */
}

.contact-info-title {
  font-family: 'Oswald', sans-serif;
  font-size: 80px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F4E6D2;
  opacity: 0.1;
  position: absolute;
  top: 100%;
  left: 100%;
  margin-top: -0.5em;
  margin-left: -2.3em;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.contact-row {
  position: relative;
  z-index: 1;
  margin-bottom: 2.3em;
}

.contact-row:last-child {
  margin-bottom: 0;
}

.contact-row h4 {
  margin: 0 0 0.8em;
  color: #F4E6D2;
}

.contact-row .fa {
  float: left;
  width: 1.1em;
  margin-top: -0.15em;
  padding: 1px;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.25;
}

.contact-body {
  padding-left: 2.6em;
}

.contact-content {
  font-size: 1.3em;
}

.phone-row {
  font-size: 1.3em;
  letter-spacing: 0.2em;
  margin-top: 0.5em;
}




/* ------------------------------------------------------------------------------- */
/* 10. Footer
/* ------------------------------------------------------------------------------- */



.footer {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
  text-align: center;
  margin: 7.1em 0 5.5em;
  font-size: 12px;
  color: #aaa;
}

.footer .brand {
  margin-top: -0.45em;
  font-size: 3.4em;
  color: #033E3E;
}

.author-link {
  font-family: 'Montserrat', sans-serif;
  color: #d0d0d0;
}

.author-link:hover {
  text-decoration: none;
}



/* ------------------------------------------------------------------------------- */
/* 11. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 11.1 Min width 768px */



@media (min-width: 768px) {



  html {
    font-size: 85%;
  }




  /* About */



  .entry {
    padding: 0 7.5em;
  }

  .col-about-spec {
    padding: 0 4.4em;
  }



  /* Project Carousel */



  .owl-prev {
    left: 3.6em
  }

  .owl-next {
    right: 3.6em;
  }



  /* Projects Deatails */



  .project-details {
    margin-top: 7.1em;
  }


  .project-details-item {
    margin-bottom: 7.1em;
  }

  .project-details-info {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 13%;
    bottom: 13%;
    width: 55%;
  }

  .project-details-item:nth-child(odd) .project-details-img {
    padding-left: 15px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img {
    padding-right: 15px;
    padding-left: 15px;
  }

}



/* 11.2 Min width 992px */



@media (min-width: 992px) {



  html {
    font-size: 92%;
  }



  /* Content styles */



  .text-center-md {
    text-align: center;
  }

  .text-right-md {
    text-align: right;
  }

  .text-left-md {
    text-align: left;
  }



  /* Navbar Mobile */


  .navbar-mobile {
    position: absolute;
    left: -50000px;
    top: -50000px;
  }



  /* About */



  .col-about-img {
    padding-left: 0;
    left: -5px;
  }

  .col-about-img img {
    max-width: calc(100% + 60px);
  }



  /* Project Details */



  .project-details-item:nth-child(odd) .project-details-img {
    padding-left: 5px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img {
    padding-right: 5px;
    padding-left: 15px;
  }



  /* Blog Details */



  .col-primary {
    padding-right: 2.2em;
  }

  .col-secondary {
    margin-top: 10.62em;
    margin-left: -5px;
    padding: 0 10px 0 0;
  }



  /* Contacts */


  .row-field {
    margin-left: -15px;
  }

  .col-map {
    position: static;
    height: 100%;
  }
}


/* 11.3 Min width 1200px */



@media (min-width: 1200px) {


  html {
    font-size: 100%;
  }



  /* Header */



  .main-header {
    padding-left: 0;
  }



  /* Project Details */


  .project-details-info {
    width: 44%;
  }

}






/* ==============================================
   NERALU FARMS CUSTOM SECTIONS
   ============================================== */

/* --- VALUES SECTION --- */
.values-section {
  padding: 20px 20px 30px 20px;
  background-color: #F4E6D2;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
}

.values-header {
  margin-bottom: 40px;
}

.values-header h2 {
  font-family: "Georgia", serif;
  font-size: 2.8rem;
  color: #033E3E;
  margin: 0;
}

.values-subtitle {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #4a4a4a;
  margin-bottom: 10px;
}

.gold-text {
  color: #033E3E;
  font-style: italic;
}

/* Mapped to Primary for contrast on light bg */

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.value-card {
  background: #FFF9E9;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.value-card:hover {
  transform: translateY(-5px);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
}

.card-top .icon {
  font-size: 1.5rem;
  background: #F4E6D2;
  padding: 8px;
  border-radius: 50%;
  color: #033E3E;
}

.card-top h3 {
  font-size: 1rem;
  color: #033E3E;
  margin: 0;
  font-weight: 600;
}

.image-container {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
}

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

.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 40%;
  padding: 15px;
  background: rgba(3, 62, 62, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  color: white;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 300;
}

@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .values-header h2 {
    font-size: 2rem;
  }
}

/* ==============================================
   NERALU FARMS SAFE HORIZONTAL SCROLL
   ============================================== */

.journey-section {
  padding: 20px 20px 80px 0;
  /* Remove side padding to let cards touch edges */
  background-color: #F4E6D2;
  position: relative;
  overflow: hidden;
  /* Keeps it contained safely */
}

.journey-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 20px;
}

.journey-header h2 {
  font-family: "Georgia", serif;
  font-size: 2.5rem;
  color: #033E3E;
  margin: 0;
}

.journey-subtitle {
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 10px;
}


/* THE SCROLLABLE TRACK */
.journey-container {
  width: 100%;
  overflow-x: auto;
  /* Allows standard scrolling */
  overflow-y: hidden;
  /* Hide Scrollbar */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  cursor: grab;
  /* Shows user they can grab/scroll */
}

.journey-container::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.journey-track {
  display: flex;
  gap: 30px;
  padding: 20px 5vw;
  /* Side padding inside the scroll area */
  width: max-content;
  /* Ensure it fits all cards */
  align-items: center;
}

/* CARD STYLING */
.journey-card {
  width: 400px;
  /* Fixed nice width */
  height: 550px;
  background: #FFF9E9;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  /* Prevent squishing */
  white-space: normal;
  /* Ensure text inside wraps normally */
  transition: transform 0.3s ease;
}

.journey-card:hover {
  transform: translateY(-5px);
}

.card-image {
  width: 100%;
  height: 260px;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
}

.card-image img {
  width: calc(100% + 16px) !important;
  /* Forces image to be 16px wider than the box */
  max-width: none !important;
  /* Overrides Bootstrap's strict image limits */
  height: 100% !important;
  margin-left: -8px !important;
  /* Shifts the image left to hide the edges */
  object-fit: cover;
  display: block;
}

.year {
  font-family: "Georgia", serif;
  font-size: 2rem;
  color: #033E3E;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

.card-content h4 {
  font-family: "Georgia", serif;
  font-size: 1.3rem;
  color: #033E3E;
  margin-bottom: 10px;
  text-align: center;
}

.card-content p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  text-align: center;
}

/* ALTERNATING LAYOUT */
.journey-card.img-bottom .card-content {
  order: 1;
  margin-bottom: 20px;
}

.journey-card.img-bottom .card-image {
  order: 2;
  margin-bottom: 0;
}

/* MOBILE RESPONSIVE */
.mobile-dots {
  display: none;
}

@media (max-width: 768px) {
  .journey-card {
    width: 85vw;
    /* Full width on mobile */
    height: auto;
  }

  .journey-track {
    gap: 15px;
    padding: 20px;
  }

  /* Dots */
  .mobile-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .dot {
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    transition: 0.3s;
  }

  .dot.active {
    background: #033E3E;
    transform: scale(1.2);
  }
}

.nav-logo {
  /* Adjust the height to fit your navbar design */
  height: 50px;
  width: auto;

  /* Ensures the logo aligns vertically with other nav items */
  vertical-align: middle;

  /* Optional: adds a little breathing room */
  padding: 5px 0;
}

/* --- Fix for Clickable Logo --- */
.main-logo-link {
  display: inline-block !important;
  position: relative !important;
  z-index: 99999 !important;
  /* Guarantees it stays clickable */
  margin-top: -15px !important;
  /* Pulls logo up slightly. Adjust as needed. */
  width: 100% !important;
  text-align: center !important;
}

.nav-logo-header {
  /* Set your desired size */
  height: 100px;
  width: auto;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  /* Guarantees the browser registers the click */
  /* Constraints to prevent layout breaking */
  max-width: 100%;
  object-fit: contain;

  /* Alignment and Spacing */
  vertical-align: middle;
  padding: 10px 0;

  /* Smooth scaling if the size changes */
  transition: height 0.3s ease;
}

/* Optional: If 100px is too large for small mobile screens (under 480px) */
@media (max-width: 480px) {
  .nav-logo-header {
    height: 70px;
  }
}

/* 1. Target the Footer Logo specifically */
.nav-logo-footer {
  /* Increased size (adjust 90px up or down as needed) */
  height: 90px;
  width: auto;

  /* Alignment constraints */
  display: block;
  /* Forces it to sit firmly, removing text-alignment issues */
  margin-left: 0;
  /* Locks it to the left side */
  margin-right: auto;

  /* Safety to ensure it doesn't overflow on small mobile screens */
  max-width: 100%;
  object-fit: contain;
}

/* 2. Reset the parent 'brand' link styles ONLY inside the footer */
/* This is critical because your header .brand class likely has padding/margins */
.footer .brand {
  display: inline-block;
  /* Wraps tightly around the image */
  padding: 0;
  /* Removes header padding */
  margin: 0;
  /* Removes header margins */
  line-height: 1;
  /* Removes text spacing gaps */
  border: none;
}

/* 3. Responsive Tweak: Prevent it from being too huge on phones */
@media (max-width: 768px) {
  .nav-logo-footer {
    height: 70px;
    /* Slightly smaller on mobile for better fit */
  }
}

/* =========================================
          PROJECT LIST SECTION
   ========================================= */


.bg-projects {
  background: url(../img/bg/bg_projects.jpeg) 100% 0 no-repeat;
  background-position: center center;

  /* Ensures the image covers the entire area, cropping if necessary */
  background-size: cover;

  /* Prevents the image from repeating */
  background-repeat: no-repeat;
}

/* ==========================================================================
   SIGNATURE COLLECTIONS SECTION (DUAL-THEMED PROJECT CARDS)
   ========================================================================== */

/* --- 1. SECTION WRAPPER & LAYOUT --- */
.cinematic-projects {
  padding: 10px 0;
  background-color: #F4E6D2;
  overflow: hidden;
}

.cinematic-row {
  display: flex;
  align-items: center;
  margin-bottom: 120px;
  position: relative;
}

.cinematic-row.reversed {
  flex-direction: row-reverse;
}

/* --- 2. IMAGE CONTAINER & EFFECTS --- */
.cinematic-image-wrap {
  flex: 0 0 65%;
  max-width: 65%;
  height: 500px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cinematic-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cinematic-row:hover .cinematic-image-wrap img {
  transform: scale(1.05);
}

.img-badge {
  position: absolute;
  top: 30px;
  padding: 8px 20px;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 10;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* --- 3. THE CREAM CONTENT BOX --- */
.cinematic-content {
  flex: 0 0 45%;
  max-width: 45%;
  z-index: 5;
  position: relative;
}

.cinematic-row:not(.reversed) .cinematic-content {
  margin-left: -10%;
}

.cinematic-row.reversed .cinematic-content {
  margin-left: 0;
  margin-right: -10%;
}

.content-inner {
  background: #FFF9E9;
  padding: 50px;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  min-height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Shared Typography */
.project-category {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-weight: 700;
}

.project-desc {
  color: #555;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 30px;
}

/* Stats Grid */
.project-stats {
  display: grid;
  /* This rule prevents long words from breaking the grid! */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px;
  margin-bottom: 35px;
  padding-top: 25px;
  border-top: 1px solid #eee;
}

.stat-item strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  word-wrap: break-word;
}

.stat-item span {
  font-size: 11px;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 1px;
  margin-top: 4px;
  display: block;
}

/* Shared Button Styles */
.btn-cinematic {
  display: inline-block;
  width: max-content !important;
  padding: 14px 40px !important;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  border-radius: 50px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-cinematic:hover {
  transform: translateY(-3px);
}

.btn-cinematic i {
  margin-left: 8px;
  transition: margin-left 0.3s;
}

.btn-cinematic:hover i {
  margin-left: 12px;
}


/* ==========================================================================
   THEME 1: KORLAPARTHI (FOREST GREEN THEME)
   ========================================================================== */
.cinematic-row:not(.reversed) .content-inner {
  border-left: 5px solid #1a3c2a !important;
}

.cinematic-row:not(.reversed) .project-category,
.title-korlaparthi {
  color: #1A3C28 !important;
}

.title-korlaparthi {
  text-shadow: none !important;
  font-family: 'Times New Roman', serif;
  font-size: 42px;
  margin: 0 0 10px 0;
  line-height: 1.1;
}

.cinematic-row:not(.reversed) .stat-item strong {
  color: #1A3C28 !important;
}

.cinematic-row:not(.reversed) .img-badge {
  left: 30px;
  background-color: #1A3C28 !important;
  color: #FFF9E9 !important;
}

.cinematic-row:not(.reversed) .btn-cinematic {
  align-self: flex-start;
  background-color: transparent !important;
  color: #1A3C28 !important;
  border: 2px solid #1A3C28 !important;
  box-shadow: 0 5px 15px rgba(26, 60, 40, 0.1) !important;
}

.cinematic-row:not(.reversed) .btn-cinematic:hover {
  background-color: #1A3C28 !important;
  color: #FFF9E9 !important;
  box-shadow: 0 8px 20px rgba(26, 60, 40, 0.3) !important;
}


/* ==========================================================================
   THEME 2: SANDAL VALLEY (RED SANDALWOOD & GOLD THEME)
   ========================================================================== */
@media (min-width: 992px) {

  /* Desktop Alignments */
  .cinematic-row.reversed .content-inner {
    border-right: 5px solid #521A15 !important;
    text-align: right !important;
  }

  .cinematic-row.reversed .stat-item {
    text-align: right !important;
  }

  .cinematic-row.reversed .img-badge {
    left: auto !important;
    right: 30px !important;
  }

  .cinematic-row.reversed .btn-cinematic {
    align-self: flex-end !important;
  }
}

.cinematic-row.reversed .project-category,
.title-sandalvalley {
  color: #8B251E !important;
}

.title-sandalvalley {
  text-shadow: none !important;
  font-family: 'Times New Roman', serif;
  font-size: 42px;
  margin: 0 0 10px 0;
  line-height: 1.1;
}

.cinematic-row.reversed .stat-item strong {
  color: #B2853E !important;
}

.cinematic-row.reversed .img-badge {
  background-color: #8B251E !important;
  color: #FFF9E9 !important;
}

.cinematic-row.reversed .btn-cinematic {
  background-color: transparent !important;
  color: #8B251E !important;
  border: 2px solid #8B251E !important;
  box-shadow: 0 5px 15px rgba(139, 37, 30, 0.1) !important;
}

.cinematic-row.reversed .btn-cinematic:hover {
  background-color: #8B251E !important;
  color: #FFF9E9 !important;
  box-shadow: 0 8px 20px rgba(139, 37, 30, 0.3) !important;
}


/* ==========================================================================
   MOBILE RESPONSIVENESS (PERFECT STACKING & CENTERED BUTTON)
   ========================================================================== */

@media (max-width: 991px) {

  /* Stack rows */
  .cinematic-row,
  .cinematic-row.reversed {
    flex-direction: column !important;
    margin-bottom: 70px !important;
  }

  /* Image container */
  .cinematic-image-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: 280px !important;
    margin-bottom: -40px !important;
    border-radius: 18px !important;
  }

  /* Content wrapper */
  .cinematic-content,
  .cinematic-row.reversed .cinematic-content {
    flex: 0 0 95% !important;
    max-width: 95% !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 5;
  }

  /* Content box */
  .cinematic-projects .content-inner,
  .cinematic-projects .cinematic-row.reversed .content-inner {
    padding: 35px 28px !important;
    min-height: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
    border-radius: 14px !important;
  }

  /* Mobile borders */
  .cinematic-row:not(.reversed) .content-inner {
    border-left: 5px solid #1A3C28 !important;
  }

  .cinematic-row.reversed .content-inner {
    border-left: 5px solid #521A15 !important;
    border-right: none !important;
  }

  /* Badge fix */
  .cinematic-row.reversed .img-badge,
  .cinematic-row:not(.reversed) .img-badge {
    left: 24px !important;
    right: auto !important;
    top: 24px !important;
  }

  /* Titles smaller */
  .title-korlaparthi,
  .title-sandalvalley {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  /* Description spacing */
  .project-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
  }

  /* =========================
       PERFECT 2x2 STATS GRID
       ========================= */

  .cinematic-projects .project-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 12px !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    padding-top: 20px !important;
  }

  .cinematic-projects .stat-item {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .cinematic-projects .stat-item strong {
    font-size: 17px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .cinematic-projects .stat-item span {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  /* =========================
       CENTER BUTTON
       ========================= */

  .cinematic-projects .btn-cinematic,
  .cinematic-projects .cinematic-row.reversed .btn-cinematic,
  .cinematic-projects .cinematic-row:not(.reversed) .btn-cinematic {
    display: block !important;
    align-self: center !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    width: max-content !important;
    padding: 14px 36px !important;
  }

  .content-inner {
    min-height: auto !important;
  }

  .cinematic-projects .project-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .cinematic-projects .project-stats .stat-item {
    grid-column: auto !important;
    width: auto !important;
  }


}

/* =========================================
                SECTION: AMENITIES CAROUSEL
                ========================================= */


.amenities {
  padding: 60px 0;
  background-color: #F4E6D2;
}

.section-title-amenities {
  font-size: 36px;
  color: #033E3E;
  margin-bottom: 40px;
  font-weight: 700;
}

/* Card Styling */
.amenity-card {
  background: #FFF9E9;
  border-radius: 12px;
  overflow: hidden;
  /* Ensures image corners are rounded */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin: 10px;
  /* Space between slides */
  transition: transform 0.3s ease;
}

.amenity-card:hover {
  transform: translateY(-5px);
}

.amenity-img-wrap {
  height: 220px;
  width: 100%;
}

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

/* Card Footer (Grey Box) */
.amenity-footer {
  background-color: #F0E0C6;
  /* Sandstone */
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.amenity-icon {
  width: 40px;
  height: 40px;
  background: #FFF9E9;
  border-radius: 50%;
  /* Circle icon background */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #033E3E;
  /* Teal Icon Color */
  font-size: 18px;
  flex-shrink: 0;
}

.amenity-title {
  font-size: 16px;
  font-weight: 600;
  color: #033E3E;
  margin: 0;
}

/* --- Owl Carousel Custom Navigation (Orange Arrows) --- */
.amenities-slider .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-color: #033E3E !important;
  /* Teal background */
  border-radius: 50%;
  color: #FFF9E9 !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(3, 62, 62, 0.4);
  transition: 0.3s;
}

.amenities-slider .owl-nav button:hover {
  background-color: #F0E0C6 !important;
  /* Sandstone on hover */
  transform: translateY(-50%) scale(1.1);
  color: #033E3E !important;
}

/* Position Left/Right Arrows */
.amenities-slider .owl-nav .owl-prev {
  left: -60px;
}

.amenities-slider .owl-nav .owl-next {
  right: -60px;
}

/* Dots Pagination */
.amenities-slider .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.amenities-slider .owl-dot span {
  width: 10px;
  height: 10px;
  background: #ccc;
  display: block;
  border-radius: 50%;
  margin: 5px;
  transition: 0.3s;
}

.amenities-slider .owl-dot.active span {
  background: #FFF9E9;
  border: 2px solid #033E3E;
  /* Teal ring for active dot */
  width: 12px;
  height: 12px;
}

/* Responsive Arrows (Hide them on mobile if screen is too small) */
@media (max-width: 991px) {
  .amenities-slider .owl-nav .owl-prev {
    left: -20px;
  }

  .amenities-slider .owl-nav .owl-next {
    right: -20px;
  }
}

/* =========================================
                SECTION: PRESENCE MAP (TIGHTER & HIGHER)
                ========================================= */
.presence-section {
  padding: 0px 20px 0px 20px;
  background-color: #F4E6D2;
  text-align: center;
  overflow: hidden;

  /* ADD THESE 2 LINES: */
  position: relative;
  z-index: 1;
  /* Keeps all child elements (like markers) contained below the navbar */
}

.presence-header {
  margin-top: 60px;
  /* Space for the header itself */
  position: relative;
  z-index: 5;
  /* Ensures text stays above map if they overlap */
}

.presence-header h2 {
  font-family: "Georgia", serif;
  font-size: 2.5rem;
  color: #033E3E;
  margin-top: 0;
}

.presence-header .subtitle {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

.presence-header .highlight {
  color: #033E3E;
  font-style: italic;
}

/* --- 1. THE MAP CONTAINER --- */
.map-frame {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 1200px;

  /* FIXED: Changed from -380px to -280px. */
  /* This pushes the map DOWN so it doesn't touch the text. */
  margin: -110px auto -510px;
}

/* --- 2. THE DOTTED LAYER --- */
.dotted-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: radial-gradient(circle,
      #033E3E 2px,
      transparent 2.5px);
  background-size: 11px 11px;

  -webkit-mask-image: url("../img/karnataka-soild.png");
  mask-image: url("../img/karnataka-soild.png");

  -webkit-mask-size: contain;
  mask-size: contain;

  /* ADJUSTMENT 2: Aligns map to 20% from the top (Moves dots UP inside the box) */
  -webkit-mask-position: center 20%;
  mask-position: center 20%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  opacity: 0.9;
}

/* --- THE MARKERS (New Pin Style) --- */
.map-marker {
  position: absolute;
  /* Lower this if needed, but the section z-index: 1 should fix it */
  z-index: 10;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.marker-dot {
  /* Shape: Teardrop Pin */
  width: 30px;
  height: 30px;
  background-color: #033E3E;
  /* Deep Teal */
  border: 2px solid #F4E6D2;
  border-radius: 50% 50% 50% 0;
  /* Creates the teardrop point */

  /* Point the pin down */
  transform: rotate(-45deg);

  /* Pull it up slightly so the "tip" sits on the city */
  margin-top: -15px;

  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* The Gold Center Dot inside the Pin */
.marker-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #F0E0C6;
  /* Sandstone */
  border-radius: 50%;
}

/* Hover Effect: Bounce Up */
.map-marker:hover .marker-dot {
  transform: rotate(-45deg) scale(1.1) translate(2px, -2px);
  background-color: #033E3E;
}

/* --- POPUP CARD --- */
/* --- POPUP CARD (DESKTOP - GIGANTIC SIZE) --- */
/* --- POPUP CARD (DESKTOP - ULTRA MASSIVE 4K SIZE) --- */
.marker-card {
  position: absolute;
  /* Push it WAY up so this giant card doesn't cover the pin */
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  /* 1. ULTRA WIDTH */
  width: 900px !important;

  background: #033E3E;
  /* Deep Teal */
  color: #FFF9E9;

  /* 2. GIANT PADDING */
  padding: 60px !important;

  border-radius: 25px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1100;
  /* Highest priority */
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

/* 3. TITLE (Massive) */
.marker-card h3 {
  margin: 0 0 25px 0;
  color: #F0E0C6;
  /* Sandstone */
  font-family: "Georgia", serif;
  font-size: 4.5rem !important;
  /* Huge Header */
  line-height: 1.1;
}

/* 4. BODY TEXT (Very Big) */
.marker-card p {
  font-size: 2rem !important;
  /* Giant readable text */
  margin: 0 0 45px 0;
  color: #FFF9E9;
  line-height: 1.6;
}

/* 5. BUTTON (Big & Bold) */
.marker-card a {
  color: #F4E6D2;
  font-size: 1.8rem !important;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 4px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 8px;
  letter-spacing: 3px;
}

/* 6. GIANT POINTER ARROW */
.marker-card::after {
  content: "";
  position: absolute;
  bottom: -28px;
  /* Push down to match arrow size */
  left: 50%;
  margin-left: -30px;
  border-width: 30px 30px 0;
  /* Huge Triangle */
  border-style: solid;
  border-color: #033E3E transparent transparent transparent;
}

/* --- THE TRIGGER (MUST BE INCLUDED) --- */
.map-marker:hover .marker-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}



/* Mobile Adjustment */
/* =========================================
   MOBILE FIXES (Final Alignment to Match Desktop)
   ========================================= */
@media (max-width: 768px) {

  /* 1. HEADER */
  .presence-header {
    position: relative;
    z-index: 50;
    background-color: #F4E6D2;
    padding-bottom: 10px;
  }

  /* 2. MAP FRAME */
  .map-frame {
    height: 600px !important;

    /* Keep the Scale 2.0 as it was "good" */
    transform: scale(2);
    transform-origin: top center;
    margin: -10px auto -250px !important;

    width: 100% !important;
    z-index: 1 !important;
  }

  /* 3. DOTS */
  .dotted-map {
    mask-position: center top !important;
    mask-size: contain !important;
    background-image: radial-gradient(circle,
        #033E3E 1px,
        transparent 1.5px) !important;
    background-size: 5px 5px !important;
  }

  /* 4. MARKERS - MOVE UP & LEFT */

  /* Gowribidanur (Left Pin) */
  .map-marker:nth-of-type(2) {
    /* Decrease 'left' to move Left (was 64% -> now 54%) */
    left: 52% !important;

    /* Decrease 'top' to move UP (was 35% -> now 22%) */
    top: 22% !important;
  }

  /* Chikballapura (Right Pin) */
  .map-marker:nth-of-type(3) {
    /* Decrease 'left' to move Left (was 74% -> now 62%) */
    left: 58% !important;

    /* Decrease 'top' to move UP (was 41% -> now 28%) */
    top: 23% !important;
  }

  /* 5. MARKER STYLE */
  .marker-dot {
    width: 14px !important;
    height: 14px !important;
    border-width: 1px !important;
    margin-top: -7px !important;
    border-radius: 50% 50% 50% 0 !important;
    transform: rotate(-45deg) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
  }

  .marker-dot::after {
    width: 4px !important;
    height: 4px !important;
  }

  .marker-card {
    width: 150px;
    bottom: 30px;
    padding: 10px;
  }
}

/* 6. FIX HUGE CARD (Counter-acting the Zoom) */
/* Since map is Scale 2.0, we make the card Tiny so it looks Normal */

.marker-card {
  /* Code width 110px -> Visual width 220px (Perfect for phone) */
  width: 110px !important;

  /* Code bottom 25px -> Visual bottom 50px */
  bottom: 25px !important;

  padding: 8px !important;
  border-radius: 4px !important;
}

/* Make the text tiny in code so it reads normally on screen */
.marker-card h3 {
  font-size: 9px !important;
  /* Visual: 18px */
  margin-bottom: 2px !important;
}

.marker-card p {
  font-size: 7px !important;
  /* Visual: 14px */
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
}

.marker-card a {
  font-size: 6px !important;
  /* Visual: 12px */
}

/* Fix the little triangle arrow at the bottom of the card */
.marker-card::after {
  border-width: 4px 4px 0 !important;
  margin-left: -4px !important;
  bottom: -4px !important;
}

/* =========================================
   SECTION: AMENITIES PANORAMA (project-korlaparthi)
   ========================================= */

.amenities-panorama {
  padding: 80px 0;
  background: #f4e6d2;
  overflow: hidden;
}

.panorama-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #033E3E;
  margin-bottom: 10px;
}

.panorama-header p {
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
}

/* --- The Flex Container --- */
.panorama-container {
  display: flex;
  width: 100%;
  height: 350px;
  gap: 15px;
  overflow: hidden;

  /* CRITICAL FIX: Adds space between the two rows so they don't merge */
  margin-bottom: 30px;
}

/* --- Individual Cards --- */
.panorama-card {
  position: relative;
  flex: 1;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Hover Effect: Expansion */
.panorama-card:hover {
  flex: 3.5;
}

/* --- Dark Gradient Overlay --- */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  opacity: 0.9;
  transition: all 0.4s ease;
}

.panorama-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(3, 62, 62, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 1;
}

/* --- Icons & Text (Alignment Fixed) --- */
.card-icon {
  /* Fixes the icon circle alignment */
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: #FFF9E9;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;

  /* Centers the icon perfectly inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Ensures the icon itself has no extra margin messing up the center */
.card-icon i {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.panorama-card:hover .card-icon {
  background: #F0E0C6;
  transform: scale(1.1);
  color: #033E3E;
}

.card-content h3 {
  color: #FFF9E9;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .panorama-container {
    flex-direction: column;
    /* Stack vertically */
    height: auto;
    gap: 15px;
    /* Space between cards */
    margin-bottom: 15px;
    /* Space between the two container rows */
  }

  .panorama-card {
    height: 140px;
    /* Slightly taller to fit content comfortably */
    width: 100%;
    flex: none;
  }

  /* Disable hover expansion on mobile */
  .panorama-card:hover {
    flex: none;
  }

  /* OVERLAY: Push content to Bottom-Right */
  .card-overlay {
    flex-direction: column;
    /* Stack Icon on top of Text */
    justify-content: flex-end;
    /* Push to Bottom */
    align-items: flex-end;
    /* Push to Right */
    padding: 15px;
    /* Small padding from edge */

    /* Stronger gradient so text is readable on small images */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  }

  /* TEXT: Align Right and Scale Down */
  .card-content {
    text-align: right;
    width: 100%;
  }

  .card-content h3 {
    font-size: 14px;
    /* Smaller font for mobile */
    white-space: normal;
    /* Allow wrapping if text is long */
  }


}


/* =========================================
                SECTION: CONTACT FORM
                ========================================= */

/* --- SCOPED WRAPPER (Replaces Body) --- */
.section-wrapper {
  /* Define variables LOCALLY so they work everywhere */
  --primary-green: #033E3E;
  --input-bg: #F0E0C6;
  --text-color: #333;
  --gap-size: 40px;

  /* Layout & Reset for this section only */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  background: #F4E6D2;
  font-family: "Manrope", sans-serif;
  /* Forces font on this section */
  box-sizing: border-box;
  width: 100%;
}

/* Ensure all elements inside use border-box */
.section-wrapper * {
  box-sizing: border-box;
}

/* --- WATERMARK --- */
.bg-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Playfair Display", serif;
  font-size: 15vw;
  color: rgba(3, 62, 62, 0.03);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* --- LAYOUT GRID --- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-size);
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* --- FORM CARD --- */
.form-card {
  background: #FFF9E9;
  padding: 50px;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-family: "Playfair Display", serif;
  font-size: 38px;
  color: var(--primary-green);
  margin-bottom: 30px;
  margin-top: 0;
  line-height: 1.2;
}

/* --- INPUTS (With Overrides) --- */
.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
}

.full-width {
  grid-template-columns: 1fr;
}

/* Specific selector to override Theme/Bootstrap defaults */
.section-wrapper .input-bubble {
  width: 100%;
  background-color: #F0E0C6 !important;
  /* Forces Sandstone BG */
  border: 1px solid transparent !important;
  /* Removes default borders */
  border-radius: 50px !important;
  padding: 18px 25px !important;
  font-size: 15px;
  color: #033E3E !important;
  outline: none;
  font-family: "Manrope", sans-serif;
  transition: all 0.3s ease;
  height: auto !important;
  /* Fixes height collapse issues */
  box-shadow: none !important;
}

.section-wrapper .input-bubble::placeholder {
  color: #5d6d6d;
  opacity: 1;
}

.section-wrapper .input-bubble:focus {
  background-color: #FFF9E9 !important;
  border: 1px solid #033E3E !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Select Dropdown Styling */
.section-wrapper select.input-bubble {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 25px top 50%;
  background-size: 10px auto;
  cursor: pointer;
}

/* --- CHECKBOX --- */
.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.checkbox-container input[type="checkbox"] {
  min-width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-green);
  cursor: pointer;
}

.checkbox-text {
  font-size: 11px;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

/* --- BUTTON & SUCCESS --- */
.submit-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-wrapper .bubble-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50px;
  padding: 8px 8px 8px 30px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: "Manrope", sans-serif;
  min-width: 180px;
}

.section-wrapper .bubble-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: #033E3E !important;
}

.btn-text {
  font-weight: 700;
  font-size: 16px;
  color: #033E3E;
  margin-right: 20px;
}

.btn-icon {
  background-color: var(--primary-green);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF9E9;
  font-size: 18px;
  transition: transform 0.3s;
}

.section-wrapper .bubble-btn:hover .btn-icon {
  transform: rotate(45deg);
}

/* Success Message */
.success-message {
  margin-top: 15px;
  font-size: 14px;
  color: var(--primary-green);
  font-weight: 600;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.success-message.visible {
  display: block;
  opacity: 1;
}

/* --- MAP CARD --- */
.map-card {
  position: relative;
  height: 100%;
  min-height: 550px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: #eee;
  /* Placeholder bg if map fails */
}

.map-card iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(10%);
  display: block;
  /* Removes bottom gap */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 850px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .map-card {
    height: 350px;
    min-height: auto;
  }

  .input-row {
    grid-template-columns: 1fr;
    /* Stack inputs on mobile */
    gap: 15px;
  }
}



/* =========================================
   PROJECT OVERVIEW — KORLAPARTHI
   Scoped: .pd-overview
   ========================================= */

.pd-overview-story {
  padding: 60px 0;
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
  position: relative;
  overflow: hidden;
}

/* Layout */

.pd-story-row {
  display: flex;
  align-items: center;
}

/* STORY CONTENT */

.pd-story-title {
  font-family: 'Oswald', sans-serif;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #033E3E;
  margin-bottom: 10px;
}

.pd-story-title span {
  display: block;
  color: #033E3E;
}

.pd-story-divider {
  width: 90px;
  height: 2px;
  background: #033E3E;
  margin: 25px 0 30px;
}

.pd-story-content {
  padding-left: 30px;
}

.pd-story-content p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 18px;
  max-width: 520px;
}

/* IMAGE VISUAL SECTION */

.pd-story-visual {
  display: flex;
  justify-content: center;
  /* centers visual block */
}

/* Main Image Frame */

.pd-story-image-main {
  position: relative;
}

/* Enlarged Cinematic Image */

.pd-story-image-main img {
  width: 106%;
  margin-left: -3%;
  border-radius: 24px;
  box-shadow: none;
  transition: transform 0.6s ease;
}

/* Hover Motion */

.pd-story-image-main img:hover {
  transform: scale(1.03);
}

/* Decorative Border Frame */

.pd-story-image-main:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #033E3E;
  border-radius: 24px;
  pointer-events: none;
  display: none;
}

/* Floating Image */

.pd-story-image-float {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 220px;
}

.pd-story-image-float img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.20);
}

/* =========================================
   MOBILE FIX — CREATIVE OVERVIEW
========================================= */

@media (max-width: 992px) {

  .pd-overview-story {
    padding: 70px 0 60px;
    text-align: center;
  }

  /* Stack layout */
  .pd-story-row {
    display: block;
  }

  /* Image wrapper */
  .pd-story-visual {
    padding: 0 12px;
    margin-bottom: 30px;
  }

  .pd-story-image-main {
    text-align: center;
  }

  .pd-story-image-main img {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }

  /* Decorative border remove on mobile */
  .pd-story-image-main:after {
    display: none;
  }

  /* Hide floating image */
  .pd-story-image-float {
    display: none;
  }

  /* Title */
  .pd-story-title {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
  }

  .pd-story-title span {
    display: block;
    font-size: 28px;
  }

  /* Divider centered */
  .pd-story-divider {
    margin: 18px auto 25px;
    width: 70px;
  }

  /* Text */
  .pd-story-content p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 100%;
    padding: 0 10px;
  }

}


/* =========================================
   KEY HIGHLIGHTS — ROYAL GOLD THEME
========================================= */

/* The main deep teal background and golden borders */
.project-detail-custom.pd-highlights {
  /* REPLACE the old radial-gradient with this: */
  background-color: #521A15 !important;
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(to right, rgba(139, 37, 30, 0.75), rgba(82, 26, 21, 0.9)),
    url('../img/wood-texture.jpg') !important;
  background-blend-mode: multiply, multiply, normal !important;
  background-size: cover !important;
  background-position: center !important;

  /* Keep your existing padding and borders below */
  padding: 60px 0 !important;
  text-align: center;
  border-top: 4px solid #E6C27A !important;
  border-bottom: 4px solid #E6C27A !important;
}

.project-detail-custom.pd-highlights .pd-title {
  display: block !important;
  font-family: 'Oswald', sans-serif;
  font-size: 42px !important;
  letter-spacing: 0.08em;
  margin-bottom: 40px !important;
  /* REDUCED from 70px */
  text-transform: uppercase;
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0px 4px 15px rgba(252, 246, 186, 0.1);
}

/* The primary numbers/data (Bright Gold) */
.project-detail-custom .pd-highlight-box h3 {
  font-size: 32px;
  color: #FADE80 !important;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  font-weight: 800;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* The small descriptor text (Light Grey for contrast) */
.project-detail-custom .pd-highlight-box p {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #E0E0E0 !important;
  font-weight: 600;
}

/* =========================================
   MOBILE — KEY HIGHLIGHTS FIX
========================================= */

@media (max-width: 992px) {

  /* Adjust overall padding for smaller screens */
  .project-detail-custom.pd-highlights {
    padding: 60px 18px;
  }

  /* Turns the text boxes into elegant, slightly transparent premium cards */
  .project-detail-custom .pd-highlight-box {
    background: rgba(230, 194, 122, 0.08);
    /* Subtle gold tint */
    padding: 24px 18px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    border: 1px solid rgba(252, 246, 186, 0.2);
  }

  /* Slightly shrink the gold numbers on mobile */
  .project-detail-custom .pd-highlight-box h3 {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .project-detail-custom .pd-highlight-box p {
    font-size: 11px;
    margin-bottom: 0;
  }
}

/* =========================================
   Location Advantage Section — KORLAPARTHI
   ========================================= */

.pd-location-advantage {
  padding: 120px 0;
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
}

/* Title */

.pd-location-title {
  font-family: 'Oswald', sans-serif;
  font-size: 42px;
  letter-spacing: 0.08em;
  margin-bottom: 50px;
  color: #033E3E;
}

.pd-location-title span {
  color: #033E3E;
}

/* List wrapper */

.pd-location-list {
  position: relative;
  padding-left: 40px;
}

/* Vertical connector line */

.pd-location-list:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#033E3E, transparent);
}

/* Item */

.pd-location-item {
  display: flex;
  align-items: center;
  margin-bottom: 38px;
}

/* Bigger icon circle */

.pd-location-icon {
  width: 44px;
  height: 44px;
  background: #F4E6D2;
  border: 2px solid #033E3E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #033E3E;
  font-size: 18px;
  /* Bigger icon */
  margin-right: 22px;
  transition: all .35s ease;
}

/* Hover animation */

.pd-location-item:hover .pd-location-icon {
  background: #033E3E;
  color: #FFF9E9;
  transform: scale(1.18);
  box-shadow: 0 10px 24px rgba(3, 62, 62, 0.35);
}

/* Bigger text */

.pd-location-text {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #555;
}

/* CTA Button */

.pd-location-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 34px;
  background: #033E3E;
  /* Deep Teal */
  color: #FFF9E9;
  /* White text */
  text-decoration: none;
  border-radius: 50px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all .35s ease;
  box-shadow: 0 12px 28px rgba(3, 62, 62, 0.28);
}

.pd-location-btn:hover {
  background: #F0E0C6;
  /* Sandstone */
  color: #033E3E;
  /* Teal text */
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(197, 164, 126, 0.35);
}

/* Map */

.pd-location-map {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.18);
  line-height: 0;
  background: #000;
  /* fallback while loading */
}

/* Remove iframe baseline gap */

.pd-location-map iframe {
  width: 100%;
  height: 510px;
  border: 0;
  display: block;
  vertical-align: top;
  /* KEY FIX */
}

/* Extra safeguard — clip bottom */

.pd-location-map:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #FFF9E9;
  /* section bg */
}

/* =========================================
   MOBILE — LOCATION ADVANTAGE FIXED
========================================= */

@media (max-width: 992px) {

  /* Section spacing */

  .pd-location-advantage {
    padding: 70px 18px 60px;
    text-align: center;
  }

  /* Title */

  .pd-location-title {
    font-size: 26px;
    margin-bottom: 35px;
  }

  /* Remove vertical connector line */

  .pd-location-list {
    padding-left: 0;
  }

  .pd-location-list:before {
    display: none;
  }

  /* Align icon + text properly */

  .pd-location-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* FIX */
    text-align: left;
    margin-bottom: 26px;
  }

  /* Icon sizing */

  .pd-location-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
    margin-right: 14px;
  }

  /* Text sizing */

  .pd-location-text {
    font-size: 15px;
    line-height: 1.5;
  }

  /* CTA Button spacing */

  .pd-location-btn {
    display: inline-block;
    margin: 25px auto 30px;
  }

  /* Map container fix */

  .pd-location-map {
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto;
  }

  /* Map iframe */

  .pd-location-map iframe {
    width: 100%;
    height: 320px;
    display: block;
  }

}

/* =========================================
   Master Plan Section — KORLAPARTHI
   ========================================= */
/* =========================================
   PROJECT SPECIFICATIONS (REFINED EXECUTIVE STYLE)
   ========================================= */

.project-spec-section {
  background-color: #F4E6D2 !important;
  /* Soft warm neutral background */
  padding: 100px 0;
  position: relative;
}

/* Masterplan Visual Area */
.spec-masterplan-box {
  position: relative;
  padding-right: 20px;
}

/* Styled Pill Badge for Layout Title */
.project-layout-badge {
  display: inline-block;
  background-color: #ffffff;
  /* Brand Sandstone */
  color: #033E3E;
  /* Deep Teal */
  padding: 6px 22px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Image Interaction */
.masterplan-image-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  /* Keeps the height consistent with the right column */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  background: #f4f8f8;
}

/* Technical Specs Content */
.spec-title {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 45px;
  line-height: 1.1;
}

.spec-title span {
  color: #033E3E;
  /* Highlighting 'Specifications' in brand teal */
}

/* Data Grid Styling */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  /* Increased gap for better readability */
  margin-bottom: 50px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  /* Cleaner separator */
}

.spec-icon {
  font-size: 29px;
  color: #033E3E;

  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  /* ensures perfect square */

  background: #f4f8f8;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  /* prevents stretching in flex layout */
  transition: all 0.3s ease;
}

.spec-item:hover .spec-icon {
  background-color: #033E3E;
  color: #F0E0C6;
}

.spec-info p {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1.5px;
}

.spec-info strong {
  display: block;
  font-size: 15px;
  color: #222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Lead Form Trigger Button */
.spec-download-btn {
  display: inline-block;
  padding: 18px 40px;
  background: #033E3E;
  color: #F0E0C6;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spec-download-btn:hover {
  background: #055a5a;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(3, 62, 62, 0.2);
}

/* =========================================
   BROCHURE LEAD FORM MODAL (THE MISSING PIECE)
   ========================================= */

.lead-form-modal {
  display: none;
  /* Hidden by default - JS turns this to 'flex' */
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* Must be higher than the navbar */
  background: rgba(3, 62, 62, 0.95);
  /* Deep Teal Semi-transparent Overlay */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  /* Premium frosted glass effect */
}

.modal-content {
  background: #FFF9E9;
  /* Brand Cream Background */
  padding: 50px 40px;
  border-radius: 24px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(240, 224, 198, 0.5);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 30px;
  color: #033E3E;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s ease;
}

.close-modal:hover {
  transform: rotate(90deg);
  color: #bd081c;
  /* Changes to alert red on hover */
}

.modal-content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  color: #033E3E;
  margin-bottom: 10px;
}

.modal-content p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

/* Form Elements */
.lead-generation-form input {
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 15px;
  background-color: #F0E0C6;
  /* Sandstone Input BG */
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #033E3E;
  outline: none;
  transition: all 0.3s ease;
}

.lead-generation-form input:focus {
  border-color: #033E3E;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(3, 62, 62, 0.1);
}

.btn-submit {
  width: 100%;
  background: #033E3E;
  color: #F0E0C6;
  padding: 18px;
  border: none;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-submit:hover {
  background: #055a5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile Tweak */
@media (max-width: 480px) {
  .modal-content {
    padding: 40px 25px;
  }
}

/* Mobile Responsiveness for Data Grid */
@media (max-width: 768px) {
  .spec-grid {
    grid-template-columns: 1fr;
    /* Single column on phones */
    gap: 20px;
  }

  .spec-masterplan-box {
    padding-right: 0;
    margin-bottom: 50px;
  }

  .spec-title {
    font-size: 32px;
  }
}

/* =========================================
   LEAD FORM & MASTERPLAN MODAL STYLING
   ========================================= */

/* The Dark Background Overlay */
.lead-form-modal,
.pd-masterplan-modal {
  display: none;
  /* JS will change this to 'flex' */
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Ensures it is on top of everything */
  background: rgba(3, 62, 62, 0.96);
  /* Brand teal overlay */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
}

/* The White Box in the Center */
.modal-content {
  background: #FFF9E9;
  padding: 50px 40px;
  border-radius: 24px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.close-modal,
.pd-masterplan-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 32px;
  color: #033E3E;
  cursor: pointer;
  line-height: 1;
}

/* Masterplan Image Modal Adjustment */
.pd-masterplan-modal img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}

/* Form Elements Styling */
.lead-generation-form input {
  width: 100%;
  padding: 16px 20px;
  margin-bottom: 15px;
  background-color: #F0E0C6;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  outline: none;
}

.btn-submit {
  width: 100%;
  background: #033E3E;
  color: #F0E0C6;
  padding: 18px;
  border: none;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

/* =========================================
   1. CONTAINER & TYPOGRAPHY
   ========================================= */
.pd-3d-gallery-container {
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
}

.pd-3d-gallery-container.about .gallery-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: bolder;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #033E3E !important;
}

.pd-3d-gallery-container.about .gallery-header p {
  font-size: 15px;
  font-weight: bold;
  color: #6f7c7d !important;
}

/* =========================================
   2. DESKTOP GALLERY (Standard)
   ========================================= */
.pd-3d-gallery {
  perspective: 2000px;
  height: 500px;
  /* Standard height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.pd-3d-stage {
  width: 420px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
}

.pd-3d-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: spin3d 60s linear infinite;
  /* Smooth speed */
}

.pd-3d-stage:hover .pd-3d-spinner {
  animation-play-state: paused;
}

/* =========================================
   3. ITEM STYLES & REFLECTION
   ========================================= */
.pd-3d-item {
  position: absolute;
  width: 420px;
  height: 220px;
  top: 0;
  left: 0;
  background: #F4E6D2;
  border: 4px solid #F4E6D2;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border-radius: 12px;
  /* Reflection effect */
  -webkit-box-reflect: below 8px linear-gradient(transparent,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.35));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.pd-3d-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   4. DESKTOP POSITIONS (10 Items)
   Radius: 680px
   ========================================= */
.pd-3d-item:nth-child(1) {
  transform: rotateY(0deg) translateZ(680px);
}

.pd-3d-item:nth-child(2) {
  transform: rotateY(36deg) translateZ(680px);
}

.pd-3d-item:nth-child(3) {
  transform: rotateY(72deg) translateZ(680px);
}

.pd-3d-item:nth-child(4) {
  transform: rotateY(108deg) translateZ(680px);
}

.pd-3d-item:nth-child(5) {
  transform: rotateY(144deg) translateZ(680px);
}

.pd-3d-item:nth-child(6) {
  transform: rotateY(180deg) translateZ(680px);
}

.pd-3d-item:nth-child(7) {
  transform: rotateY(216deg) translateZ(680px);
}

.pd-3d-item:nth-child(8) {
  transform: rotateY(252deg) translateZ(680px);
}

.pd-3d-item:nth-child(9) {
  transform: rotateY(288deg) translateZ(680px);
}

.pd-3d-item:nth-child(10) {
  transform: rotateY(324deg) translateZ(680px);
}

/* Desktop Hover: Pop Forward */
.pd-3d-item:hover {
  transform: rotateY(inherit) translateZ(750px) scale(1.1) !important;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* =========================================
   5. MOBILE OPTIMIZATION (No Merging!)
   ========================================= */
@media (max-width: 992px) {

  /* Reduce container height */
  .pd-3d-gallery {
    height: 380px;
    perspective: 1200px;
  }

  /* Smaller Cards */
  .pd-3d-stage,
  .pd-3d-item {
    width: 210px;
    height: 130px;
  }

  /* MOBILE POSITIONS (Critical Fix) 
     Radius increased to 360px to prevent merging */
  .pd-3d-item:nth-child(1) {
    transform: rotateY(0deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(2) {
    transform: rotateY(36deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(3) {
    transform: rotateY(72deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(4) {
    transform: rotateY(108deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(5) {
    transform: rotateY(144deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(6) {
    transform: rotateY(180deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(7) {
    transform: rotateY(216deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(8) {
    transform: rotateY(252deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(9) {
    transform: rotateY(288deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(10) {
    transform: rotateY(324deg) translateZ(360px);
  }

  /* Mobile Hover */
  .pd-3d-item:hover {
    transform: rotateY(inherit) translateZ(390px) scale(1.05) !important;
  }

  .gallery-header h2 {
    font-size: 1.8rem;
  }
}

/* Animation Keyframes */
@keyframes spin3d {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(-360deg);
  }
}

/* =========================================
      CTA Section — KORLAPARTHI
   ========================================= */

/* Ensure the deep background is set */
.project-detail-custom.pd-sitevisit {
  background-color: #521A15 !important;
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(to right, rgba(139, 37, 30, 0.75), rgba(82, 26, 21, 0.9)),
    url('../img/wood-texture.jpg') !important;

  background-blend-mode: multiply, multiply, normal !important;
  background-size: cover !important;
  background-position: center !important;

  /* Keep your existing padding and text styles from your current code */
  color: #FFF9E9;
  padding: 80px 0;
  border-top: 3px solid #E6C27A;
  border-bottom: 3px solid #E6C27A;
}

/* Make the title pop with a subtle golden glow */
.pd-sitevisit-title {
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  letter-spacing: 0.08em;
  margin-bottom: 15px;
  /* Royal gold text */
  background: linear-gradient(to right, #F9D423 0%, #FF4E50 100%);
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-shadow: 0px 4px 15px rgba(252, 246, 186, 0.1);
}

.pd-sitevisit-text {
  color: #E0E0E0;
  margin-bottom: 35px;
  font-size: 17px;
  max-width: 600px;
  margin: 0 auto 35px auto;
}

/* --- THE PREMIUM TRUST STRIP --- */
.trust-strip {
  background: linear-gradient(90deg, rgba(252, 246, 186, 0) 0%, rgba(252, 246, 186, 0.1) 50%, rgba(252, 246, 186, 0) 100%);
  padding: 15px 20px;
  margin-bottom: 50px;
  border-top: 1px solid rgba(252, 246, 186, 0.5);
  border-bottom: 1px solid rgba(252, 246, 186, 0.5);
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  /* Bright golden text for the trust items */
  color: #FADE80;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- THE IRRESISTIBLE BUTTON --- */
.pd-sitevisit-btn {
  /* Rich metallic gold gradient */
  background: linear-gradient(135deg, #F9D976 0%, #E6C27A 50%, #B38728 100%) !important;
  color: #012222 !important;
  /* Extremely dark teal for maximum contrast */
  border: none !important;
  border-radius: 50px;
  /* Pill shape from your screenshot */
  padding: 16px 50px !important;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
  /* Creates a continuous subtle pulsing glow */
  animation: goldPulse 2s infinite;
}

.pd-sitevisit-btn:hover {
  /* Flips the gradient and increases the shadow on hover */
  background: linear-gradient(135deg, #FCF6BA 0%, #F9D976 50%, #E6C27A 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(252, 246, 186, 0.6) !important;
  color: #000000 !important;
}

/* --- THE PULSING ANIMATION --- */
@keyframes goldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 217, 118, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(249, 217, 118, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(249, 217, 118, 0);
  }
}




/* Standardize Custom Section Padding */
.pd-overview-story,
.project-detail-custom .pd-highlights,
.pd-location-advantage,
.pd-masterplan-grid,
.project-detail-custom .pd-virtual-tour,
.amenities-panorama,
.pd-3d-gallery-container,
.project-detail-custom .pd-sitevisit {
  padding-top: 60px !important;
  /* Was 100px - 140px */
  padding-bottom: 60px !important;
  /* Was 100px - 140px */
}

/* Reduce gap specifically for the Amenities Header */
.panorama-header {
  margin-bottom: 30px !important;
  /* Was 40px/50px */
}

/* Reduce the Hero Image Height */
.main-project {
  padding-top: 180px !important;
  /* Was 33.7vmin (approx 300px+) */
  padding-bottom: 80px !important;
  /* Was 11vmin */
  min-height: auto !important;
}

@media (max-width: 768px) {

  /* Tighter spacing on mobile */
  .pd-overview-story,
  .project-detail-custom .pd-highlights,
  .pd-location-advantage,
  .pd-masterplan-grid,
  .project-detail-custom .pd-virtual-tour,
  .amenities-panorama,
  .pd-3d-gallery-container,
  .project-detail-custom .pd-sitevisit {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce Hero Section on Mobile */
  .main-project {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce margins between stacked items */
  .pd-story-visual,
  .pd-location-map,
  .pd-masterplan-preview {
    margin-bottom: 30px !important;
  }
}

/* ------------------------------
   MOBILE SOCIAL ICON SIZE FIX
------------------------------ */
@media (max-width: 768px) {

  .vertical-panel-content .social-list a {
    font-size: 32px !important;
    /* Icon size */
    width: 44px;
    /* Click area */
    height: 44px;
    line-height: 44px;
  }

}

@media (max-width: 768px) {

  /* Reduce icon size */
  .vertical-panel-content .social-list a {
    font-size: 25px !important;
    line-height: 14px !important;
  }

  /* FIX: Reduce space between icons */
  .vertical-panel-content .social-list li {
    margin: 0px 0 !important;
    /* reduce vertical gap */
    padding: 0 !important;
  }

  /* If flex gap is applied */
  .vertical-panel-content .social-list {
    gap: 6px !important;
    /* reduce flex spacing */
  }

}


/* --- NERALU INTERACTIVE FORM (THEMED) --- */

#neralu-contact-section {
  padding: 80px 0;
  background-color: #F4E6D2;
  display: flex;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
}

.ni-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1170px;
  background: #F4E6D2;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(3, 62, 62, 0.1);
  overflow: hidden;
  min-height: 550px;
  margin: 0 15px;
}

.ni-form-wrapper {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #FFF9E9;
}

.ni-step-indicator {
  position: static;
  margin-left: auto;
  /* Pushes it to the right */
  font-size: 0.85rem;
  color: #033E3E;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Oswald', sans-serif;
  opacity: 0.6;
}

/* FIX 1: Hiding steps properly, showing only .ni-active */
.ni-step {
  display: none !important;
  animation: niFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ni-step.ni-active {
  display: block !important;
}

.ni-label {
  display: block;
  font-size: 1rem;
  color: #888;
  margin-bottom: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}

.ni-question {
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  color: #033E3E;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  font-weight: 400;
}

.ni-input {
  width: 100%;
  padding: 15px 0;
  font-size: 1.4rem;
  border: none;
  border-bottom: 2px solid #ddd;
  background: transparent;
  outline: none;
  color: #033E3E;
  transition: border-color 0.3s;
  font-family: 'Oswald', sans-serif;
}

.ni-input:focus {
  border-bottom-color: #033E3E;
}

.ni-input::placeholder {
  color: #ccc;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
}

.ni-btn {
  margin-top: 2.5rem;
  padding: 14px 35px;
  background-color: #033E3E;
  color: #FFF9E9;
  border: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ni-btn:hover {
  background-color: #F0E0C6;
  color: #033E3E;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.ni-card-wrapper {
  background: linear-gradient(135deg, #033E3E 0%, #022a2a 100%);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ni-preview-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  border-radius: 20px;
  width: 100%;
  color: #FFF9E9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.ni-card-header {
  border-bottom: 1px solid rgba(244, 230, 210, 0.2);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.ni-card-header h3 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #F0E0C6;
}

.ni-card-header span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  opacity: 0.7;
  display: block;
  margin-bottom: 5px;
}

.ni-card-row {
  margin-bottom: 1.8rem;
}

.ni-card-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.ni-card-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  min-height: 24px;
  color: #FFF;
}

.ni-placeholder {
  opacity: 0.3;
  font-style: italic;
  font-size: 1rem;
}

.ni-card-footer {
  margin-top: 2rem;
  border-top: 1px solid rgba(244, 230, 210, 0.2);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ni-status-badge {
  color: #F0E0C6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.ni-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3) rotate(-15deg);
  border: 5px solid #F0E0C6;
  color: #F0E0C6;
  padding: 15px 25px;
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  background: rgba(3, 62, 62, 0.8);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ni-preview-card.stamped .ni-stamp {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-10deg);
}

.ni-preview-card.stamped .ni-status-badge {
  color: #4cd137;
  text-shadow: 0 0 10px rgba(76, 209, 55, 0.5);
}

/* FIX 2: Checkbox Alignment */
.ni-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.ni-checkbox-container input[type="checkbox"] {
  min-width: 18px;
  height: 18px;
  margin-top: 4px;
  /* Perfectly aligns box with text baseline */
  accent-color: #033E3E;
  cursor: pointer;
  flex-shrink: 0;
  /* Prevents box from squishing */
}

.ni-checkbox-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
  padding-top: 1px;
  /* Micro-adjustment for text baseline */
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  transition: color 0.3s ease;
}

.ni-checkbox-text.ni-error-text {
  color: #e76f51;
  font-weight: 600;
}

@keyframes niFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Desktop Header & Back Button Styles --- */
.ni-form-header {
  position: absolute;
  top: 30px;
  left: 4rem;
  display: flex;
  align-items: center;
  width: calc(100% - 8rem);
  z-index: 10;
}

.ni-back-btn {
  background: none;
  border: none;
  color: #033E3E;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0;
  display: none;
  /* Hidden on Step 1 */
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s;
}

.ni-back-btn:hover {
  opacity: 0.7;
}

.ni-back-btn i {
  font-size: 1.2rem;
}

/* Reset Step Indicator position to flow with Flexbox */
.ni-step-indicator {
  position: static;
  margin-left: auto;
  /* Pushes it to the right */
  font-size: 0.85rem;
  color: #033E3E;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Oswald', sans-serif;
  opacity: 0.6;
}


/* ========================================================
   MOBILE RESPONSIVENESS (THE "RECEIPT GENERATION" UX)
   ======================================================== */
@media (max-width: 991px) {

  /* 1. Restore normal spacing so it doesn't hit the Hero section */
  #neralu-contact-section {
    padding: 60px 20px !important;
    background-color: #FFF9E9 !important;
  }

  .ni-container {
    display: flex;
    flex-direction: column;
    /* Normal stacking */
    width: 100%;
    margin: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
  }

  /* 2. INITIAL STATE: Hide the Card completely on mobile */
  .ni-card-wrapper {
    display: none !important;
  }

  /* 3. Format the Form to look like a clean, flat card */
  .ni-form-wrapper {
    padding: 2.5rem 1.5rem;
    background: #FFF9E9;
    border-radius: 20px;
    margin-top: 0;
    /* Removes the problematic overlap */
    z-index: 10;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    min-height: auto;
  }

  /* Remove the old drag handle */
  .ni-form-wrapper::before {
    display: none;
  }

  .ni-form-header {
    position: static;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .ni-question {
    font-size: 1.8rem;
  }

  .ni-input {
    font-size: 1.2rem;
  }

  /* ====================================================
       4. SUBMITTED STATE: The Receipt Generation Effect
       ==================================================== */

  /* Hide the form box */
  .ni-container.form-submitted .ni-form-wrapper {
    display: none !important;
  }

  /* Show the generated card */
  .ni-container.form-submitted .ni-card-wrapper {
    display: flex !important;
    padding: 2.5rem 1.5rem !important;
    background: linear-gradient(135deg, #033E3E 0%, #022a2a 100%);
    border-radius: 20px;
    /* Rounded corners for the receipt */
    min-height: auto;
    align-items: center;

    /* The animation that makes it feel like a generated ticket */
    animation: generateReceipt 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: top center;
  }

  /* Tweak internal card padding for mobile */
  .ni-preview-card {
    padding: 1.5rem;
    box-shadow: none;
    border: none;
    /* Cleaner look on mobile */
    width: 100%;
  }

  .ni-card-header h3 {
    font-size: 1.6rem;
  }

  .ni-card-row {
    margin-bottom: 1.2rem;
  }

  .ni-card-value {
    font-size: 1.1rem;
  }

  /* The "Receipt Generation" Animation */
  @keyframes generateReceipt {
    0% {
      opacity: 0;
      transform: translateY(-30px) scale(0.95);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* --- NERALU INTERACTIVE MAP HUB --- */

.nm-section {
  padding: 100px 20px;
  background-color: #F4E6D2;
  /* Almond Beige Background */
  font-family: 'Montserrat', sans-serif;
}

.nm-container {
  max-width: 1200px;
  margin: 0 auto;
}

.nm-header {
  text-align: center;
  margin-bottom: 50px;
}

.nm-subtitle {
  display: block;
  font-size: 0.9rem;
  color: #033E3E;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 10px;
}

.nm-title {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  color: #033E3E;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.nm-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  /* Slightly thinner left column */
  gap: 20px;
  /* Tighter gap between cards and map */
  background: #FFF9E9;
  padding: 20px;
  /* Reduced outer padding for a sleeker box */
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(3, 62, 62, 0.06);
}

/* LEFT: Location Cards */
.nm-locations {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Slight adjustment for better breathing room */
  height: 100%;
  /* Forces the container to take the full height of the grid */
}

.nm-loc-card {
  flex: 1;
  /* THIS IS THE FIX: Forces each card to grow evenly and fill the empty vertical space */
  display: flex;
  align-items: center;
  padding: 20px;
  background: #F4E6D2;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.nm-loc-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: #033E3E;
  transition: width 0.4s ease;
  z-index: 0;
}

/* Active & Hover States */
.nm-loc-card:hover {
  transform: translateX(5px);
  border-color: #033E3E;
}

.nm-loc-card.active {
  background: #033E3E;
  transform: translateX(10px);
  box-shadow: 0 10px 25px rgba(3, 62, 62, 0.2);
}

.nm-loc-card.active::before {
  width: 100%;
  /* Fills the card on active */
}

/* Card Content (z-index pulls it above the background fill) */
.nm-card-icon,
.nm-card-info,
.nm-card-indicator {
  position: relative;
  z-index: 1;
}

.nm-card-icon {
  width: 45px;
  /* Slightly smaller icon circle */
  height: 45px;
  background: #FFF9E9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #033E3E;
  flex-shrink: 0;
  margin-right: 15px;
  /* Tighter margin */
  transition: all 0.3s;
}

.nm-card-info h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  /* Better scale */
  color: #033E3E;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  transition: color 0.3s;
}

.nm-card-info p {
  font-size: 0.8rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s;
}

.nm-card-indicator {
  margin-left: auto;
  color: #033E3E;
  opacity: 0;
  /* Hidden by default */
  transform: translateX(-10px);
  transition: all 0.3s;
}

/* Text Color Changes on Active */
.nm-loc-card.active .nm-card-info h3,
.nm-loc-card.active .nm-card-info p,
.nm-loc-card.active .nm-card-indicator {
  color: #FFF9E9;
}

.nm-loc-card.active .nm-card-indicator {
  opacity: 1;
  transform: translateX(0);
}

/* RIGHT: Dynamic Map Display */
.nm-map-display {
  position: relative;
  border-radius: 12px;
  /* Matches card border radius */
  overflow: hidden;
  height: 100%;
  min-height: 420px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
}

/* The Cinematic Map Filter! */
.nm-map-display iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* This filter makes the map match your Sandstone/Teal vibe */
  filter: grayscale(30%) sepia(20%) hue-rotate(170deg) contrast(110%);
  transition: filter 0.5s ease;
}

.nm-map-display iframe:hover {
  filter: grayscale(0%) sepia(0%) hue-rotate(0deg) contrast(100%);
  /* Reveals true color on hover */
}

/* The Scanning Animation Overlay */
.nm-map-scanner {
  position: absolute;
  inset: 0;
  background: rgba(3, 62, 62, 0.95);
  /* Deep Teal Solid */
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #F0E0C6;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* Animation defaults */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nm-map-scanner.scanning {
  opacity: 1;
  pointer-events: auto;
}

/* Spinner inside Scanner */
.nm-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(240, 224, 198, 0.3);
  border-top-color: #F0E0C6;
  border-radius: 50%;
  animation: nmSpin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes nmSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Floating Action Button */
.nm-direction-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #033E3E;
  color: #FFF9E9;
  padding: 12px 25px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 5;
  border: 2px solid #033E3E;
}

.nm-direction-btn:hover {
  background: #F0E0C6;
  color: #033E3E;
  border-color: #033E3E;
  transform: translateY(-3px);
}

.nm-direction-btn i {
  margin-right: 8px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .nm-grid {
    grid-template-columns: 1fr;
    /* Stacks vertically */
    padding: 20px;
  }

  .nm-map-display {
    height: 400px;
  }

  .nm-title {
    font-size: 2.2rem;
  }
}

/* =========================================
   CUSTOM SLIDER ARROWS (Unified & Fixed)
   ========================================= */

/* General Desktop & Tablet Positioning */
.arrow-left,
.arrow-right {
  position: absolute !important;
  top: 50% !important;
  /* Vertically centers the arrows in the slider */
  transform: translateY(-50%) !important;
  /* Ensures perfect vertical centering */
  z-index: 100 !important;
  /* Kept low so sticky nav (9999) goes OVER them */
  bottom: auto !important;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 249, 233, 0.7);
  /* Cream outline */
  border-radius: 50%;
  color: #FFF9E9;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 !important;
  /* Resets any stray margins */
}

/* Specific Left/Right Placement */
.arrow-left {
  left: 200px !important;
  /* Keep it near the left edge, past the sidebar */
}

.arrow-right {
  right: 60px !important;
  /* Keep it near the right edge */
  left: auto !important;
  /* Overrides any previous left rules */
}

/* Hover Effect */
.arrow-left:hover,
.arrow-right:hover {
  background-color: #FFF9E9;
  color: #033E3E;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Mobile Adjustments (Moves them to the bottom corners) */
@media (max-width: 991px) {

  .arrow-left,
  .arrow-right {
    top: auto !important;
    bottom: 30px !important;
    /* Moves arrows to the bottom on mobile */
    transform: none !important;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .arrow-left {
    left: 90px !important;
    /* Avoids the mobile menu button */
  }

  .arrow-right {
    right: 10px !important;
  }

  /* Reset hover scale for mobile so it doesn't break alignment */
  .arrow-left:hover,
  .arrow-right:hover {
    transform: scale(1.1) !important;
  }
}

/* =========================================
   STATIC FLOATING CONTACT BUTTONS (WhatsApp & Call)
   ========================================= */

.floating-contact-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Space between the two buttons */
  z-index: 99999 !important;
  /* Ensures it sits above EVERYTHING */
}

.float-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Hover Effect */
.float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
}

/* WhatsApp Specific Colors & Pulse Animation */
.whatsapp-btn {
  background-color: #25d366;
  /* Official WhatsApp Green */
}

.whatsapp-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #25d366;
  border-radius: 50%;
  z-index: -1;
  animation: pulse-wa 2s infinite;
  /* Grabs the user's attention softly */
}

@keyframes pulse-wa {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.phone-btn {
  background-color: #F0E0C6;
  /* Warm Sandstone Beige */
  color: #033E3E !important;
  /* Dark Teal Icon for contrast */
}

.phone-btn:hover {
  background-color: #FFF9E9;
  /* Brightens to Cream on hover */
  color: #033E3E !important;
}

.phone-btn:hover i {
  animation: ring-shake 0.4s ease-in-out infinite;
}

@keyframes ring-shake {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-15deg);
  }

  60% {
    transform: rotate(10deg);
  }

  80% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .floating-contact-wrap {
    bottom: 20px;
    right: 20px;
    gap: 12px;
  }

  .float-btn {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}


/* =========================================
   TRANSPARENT NAVBAR FIX (Cinematic Fade + White Text)
   ========================================= */

/* 1. Cinematic Top Fade (Only when at the top) */
.navbar-desctop {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding-bottom: 30px;
}

/* 2. White Text + Shadow (Transparent State) */
.navbar-desctop-menu>li>a,
.header-phone {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9) !important;
}

/* 3. Hover Effect (Transparent State) */
.navbar-desctop-menu>li>a:hover,
.navbar-desctop-menu .active>a {
  color: #F0E0C6 !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* 4. CRITICAL FIX: The Sticky/Scrolling State */
/* When you scroll, this removes the shadow and makes text dark teal again */
.navbar-desctop.affix {
  background: #F0E0C6 !important;
  /* Solid Sandstone Background */
}

.navbar-desctop.affix .navbar-desctop-menu>li>a,
.navbar-desctop.affix .header-phone {
  color: #033E3E !important;
  /* Dark Teal Text */
  text-shadow: none !important;
  /* Removes the dark shadow */
}

.navbar-desctop.affix .navbar-desctop-menu>li>a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active>a {
  color: #ffffff !important;
  /* White on hover when sticky */
  text-shadow: none !important;
}

/* =========================================
   UNIQUE HEADER PHONE (Glass Pill + Icon)
   ========================================= */

/* 1. The Main Pill Design (Transparent Top State) */
.header-phone {
  display: inline-flex !important;
  align-items: center;
  background: rgba(255, 255, 255, 0.15) !important;
  /* Frosted glass base */
  backdrop-filter: blur(6px);
  /* Blurs the trees behind it */
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* Glossy edge */
  padding: 8px 24px !important;
  border-radius: 50px;
  /* Perfect pill shape */
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-shadow: none !important;
  /* Removed shadow for a cleaner look */
  transition: all 0.3s ease !important;
  cursor: pointer;
  top: 4.5vmin;
  /* Adjusted slightly up to account for the new padding */
  z-index: 1005 !important;
}

/* 2. Inject the Phone Icon via CSS */
.header-phone::before {
  content: "\f095";
  /* FontAwesome Phone Icon Code */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 12px;
  font-size: 16px;
  color: #F0E0C6;
  /* Brand Sandstone color for the icon */
  animation: header-ring 2.5s infinite;
  /* Ringing animation */
}

/* 3. Hover Effect (Glows and lifts) */
.header-phone:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 4. Sticky State (When Scrolling Down) */
.navbar-desctop.affix .header-phone {
  background: #033E3E !important;
  /* Solid Brand Teal */
  color: #FFF9E9 !important;
  /* Cream Text */
  border: none;
  box-shadow: 0 4px 15px rgba(3, 62, 62, 0.2);
}

.navbar-desctop.affix .header-phone::before {
  color: #F0E0C6;
  /* Keep icon sandstone */
}

.navbar-desctop.affix .header-phone:hover {
  background: #022a2a !important;
  /* Darker Teal on hover */
  transform: translateY(-2px);
}

/* 5. The Ringing Animation */
@keyframes header-ring {

  0%,
  100% {
    transform: rotate(0);
  }

  10%,
  30%,
  50% {
    transform: rotate(15deg);
  }

  20%,
  40%,
  60% {
    transform: rotate(-15deg);
  }

  70%,
  80%,
  90% {
    transform: rotate(0);
  }
}


/* 1. Project Card Base & Fluid Shape */
.project {
  position: relative;
  height: 650px !important;
  margin: 0 15px !important;
  background-color: #ccc;
  overflow: hidden;
  /* Ensures image doesn't bleed out of the shape */

  /* Advanced 8-point border radius for a fluid shape */
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important;

  /* Smooth liquid morphing animation */
  transition: border-radius 0.6s ease-in-out !important;
}

/* Morphs into a new fluid shape on hover */
.project:hover {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
}

/* 2. Text Container (The Fix for Alignment) */
.project figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Flexbox for perfect centering */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Keeps text in the top half */
  align-items: center;
  /* Centers horizontally */
  text-align: center;
  /* Centers lines of text */

  /* Increased top padding pushes text away from the narrow top curve */
  /* Increased side padding prevents text from touching the "walls" */
  padding: 100px 45px 20px 45px !important;
  box-sizing: border-box;
  z-index: 10;
}

/* 3. Typography Styles */
.project .project-title,
.project .project-category {
  color: #FFF9E9 !important;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9) !important;
}

.project .project-title {
  font-size: 2.5rem;
  /* Slightly smaller to fit better */
  line-height: 1.2 !important;
  margin: 0 0 15px 0 !important;

  /* Crucial: Restricts width so text stays in the center of the blob */
  max-width: 95%;
  word-wrap: break-word;
}

.project .project-category {
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  max-width: 80%;
  margin-bottom: 25px !important;
}

/* 4. Dark Gradient Overlay for Readability */
.project figure:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  /* Slightly deeper gradient to cover category text */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* 5. Button Positioning */
.project-explore-btn {
  margin-top: auto;
  /* Pushes button away from the text if needed */
  margin-bottom: 20px;
  z-index: 11;
}

/* =========================================
   MOBILE FIX FOR PROJECT CARD SHAPES
   ========================================= */
@media (max-width: 768px) {
  .project {
    /* 1. Reduce the height so it fits comfortably on a phone screen */
    height: 480px !important;

    /* 2. Reset the crazy shape to a clean, premium rounded rectangle */
    border-radius: 20px !important;
    clip-path: none !important;
    /* Safety catch in case you used the polygon shapes */

    /* 3. Slightly reduce the gap between cards for small screens */
    margin: 0 10px !important;
  }

  /* 4. Adjust the text padding so it sits perfectly inside the new mobile card */
  .project figcaption {
    padding: 2.5em 2em !important;
  }
}

/* =========================================
   AGGRESSIVE MOBILE OVERRIDES
   ========================================= */
@media screen and (max-width: 991px) {

  /* 1. Force the header phone to completely disappear */
  a.header-phone,
  div.header-phone,
  .header-phone {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2. Destroy the massive empty space above the Stories section */
  .stories-section {
    padding-top: 0 !important;
    margin-top: -100px !important;
    /* INCREASED NEGATIVE PULL: yanks it up even further */
    padding-bottom: 30px !important;
  }

  /* Pushes the subhead closer to the title to save space */
  .stories-section .section-header {
    margin-bottom: 15px !important;
  }

  /* If the review section above it is causing the gap, this pulls the stories section up */
  .stories-section {
    position: relative;
    top: -20px;
  }
}

/* =========================================
   PERMANENT DOTS & LAYOUT FIX
   ========================================= */

/* 1. Create a guaranteed safe zone at the bottom of the slider */
.slider-container {
  position: relative !important;
  padding-bottom: 50px !important;
}

/* 2. Pin the dots permanently inside that safe zone */
.review-dots {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 9999 !important;
}

/* 3. Make the dots look beautiful again */
.review-dots .dot {
  width: 10px !important;
  height: 10px !important;
  background-color: rgba(3, 62, 62, 0.2) !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.review-dots .dot.active {
  width: 28px !important;
  background-color: #033E3E !important;
}

/* 4. Mobile specific fixes for tall text */
@media (max-width: 991px) {
  .reviews-wrapper {
    height: 580px !important;
    /* Enough room for the tall review text */
  }

  .stories-section {
    margin-top: 20px !important;
    /* Safely distances the Stories heading */
    position: relative !important;
    z-index: 10 !important;
  }

  /* Slightly smaller dots for mobile fingers */
  .review-dots .dot {
    width: 8px !important;
    height: 8px !important;
  }

  .review-dots .dot.active {
    width: 24px !important;
  }
}


/* =========================================
   THE 3D ANATOMY STYLING (FIXED & CONSOLIDATED)
   ========================================= */

/* =========================================
   1. GLOBAL STICKY BUG FIX
   ========================================= */
.layout {
  overflow: visible !important;
  /* This allows position: sticky to work */
  overflow-x: clip !important;
  /* Safely prevents horizontal scrolling */
}

/* =========================================
   2. THE 3D ANATOMY STYLING
   ========================================= */
.anatomy-section {
  position: relative;
  height: 300vh;
  /* Scroll track length */
  background: radial-gradient(circle at center, #0f2621 0%, #050f0c 100%);
  width: 100%;
  margin: 0;
  padding: 0;
  /* CRITICAL: No overflow properties here! */
}

.anatomy-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: hidden;

  /* Slightly reduced top padding to buy us more room at the bottom */
  padding-top: 90px;
  box-sizing: border-box;
}

.anatomy-header {
  margin-bottom: 10px;
  /* Tighter gap below header */
  text-align: center;
  z-index: 10;
}

.anatomy-header h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 40px);
  /* Slightly scaled down */
  color: #fff;
  margin: 0;
}

.anatomy-header p {
  font-family: "Manrope", sans-serif;
  color: #c5a059;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 10px;
}

.anatomy-container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

/* 3D Visual Box */
.anatomy-visual {
  flex: 1;
  perspective: 2500px;
  display: flex;
  justify-content: center;
  /* Reduced from 80px to align better with the shorter cards */
  margin-top: 40px;
  margin-left: -40px;
}

.anatomy-iso {
  position: relative;
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(45deg);
}

.anatomy-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  will-change: transform;
}

#layer4 {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(0, 0, 0, 0));
  border-color: rgba(197, 160, 89, 0.4);
}

/* Text List Styling */
.anatomy-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Tighter gaps between cards (was 15px) */
}

.anatomy-card {
  display: flex;
  gap: 15px;
  background: rgba(255, 255, 255, 0.03);
  /* Compressed vertical padding (was 24px) */
  padding: 16px 24px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  opacity: 0.1;
  transform: translateX(40px);
  transition: all 0.5s ease-out;
}

.anatomy-card.active {
  opacity: 1;
  transform: translateX(0);
  background: rgba(255, 255, 255, 0.07);
  border-left-color: #c5a059;
}

.anatomy-card .card-num {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  /* Slightly smaller number */
  color: #c5a059;
  font-weight: bold;
}

.anatomy-card h4 {
  color: #fff;
  margin: 0 0 4px 0;
  /* Tighter gap below heading */
  font-family: "Playfair Display", serif;
  font-size: 18px;
  /* Slightly smaller heading */
}

.anatomy-card p {
  color: #aaa;
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  /* Slightly smaller text */
  line-height: 1.5;
}

/* Mobile Responsiveness */
/* =========================================
   Mobile Responsiveness (Ultimate Alignment & Fit Fix)
   ========================================= */
@media (max-width: 991px) {
  .anatomy-sticky {
    /* Anchors content to the top safely */
    justify-content: flex-start !important;
    padding-top: 85px !important;
  }

  .anatomy-header {
    margin-bottom: 5px;
  }

  .anatomy-header h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  .anatomy-header p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 10px;
  }

  .anatomy-container {
    flex-direction: column;
    gap: 0px;
    /* Reduced to zero to pull cards up */
    width: 100%;
    padding: 0 15px;
  }

  .anatomy-visual {
    margin-left: 0;
    /* --- THE KEY FIX --- */
    height: auto;
    /* Remove height restriction */
    padding-top: 80px;
    /* Forces a large gap ABOVE the layers */
    padding-bottom: 20px;
    /* Gap BELOW the layers */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .anatomy-iso {
    width: 100px;
    /* Slightly smaller box for maximum clearance */
    height: 100px;
  }

  .anatomy-info {
    width: 100%;
    gap: 5px;
    /* Tighter card gaps */
  }

  .anatomy-card {
    padding: 8px 15px;
    gap: 12px;
    align-items: center;
  }

  .anatomy-card .card-num {
    font-size: 14px;
  }

  .anatomy-card h4 {
    font-size: 14px;
    margin-bottom: 0;
  }

  .anatomy-card p {
    font-size: 10px;
    line-height: 1.2;
    margin: 0;
  }
}

/* Safety net for ultra-short mobile screens */
@media (max-width: 991px) and (max-height: 660px) {
  .anatomy-container {
    transform: scale(0.88);
    transform-origin: top center;
  }
}

/* =========================================
   LAPTOP SCREEN FIX (Prevents Bottom Cutoff)
   ========================================= */
@media (min-width: 992px) and (max-height: 900px) {
  .anatomy-sticky {
    padding-top: 80px;
    /* Pulls it tighter to the navbar */
  }

  .anatomy-container {
    transform: scale(0.85);
    /* Shrinks everything by 15% to fit short screens */
    transform-origin: top center;
  }

  /* Optional: Push the visual up slightly since the scale shrunk it */
  .anatomy-visual {
    margin-top: 0px;
  }
}


/* =========================================
   project detail hero section text 
   ========================================= */

.project-title-info .text-primary {
  color: #F4E6D2 !important;
}

/* Forcing the main text to be white with a shadow */
.project-title-info {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Stacking the items neatly */
.project-title-info .project-info-item {
  display: block !important;
  margin-bottom: 0.5em !important;
  margin-left: 0 !important;
}

/* =========================================
   ULTRA-PREMIUM PROJECT BRIDGE (1 MILLION DOLLAR LOOK)
   ========================================= */

.luxury-bridge-section {
  position: relative;
  width: 100%;

  /* --- THE NEW REDUCED HEIGHT --- */
  height: clamp(280px, 35vh, 400px);

  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #033E3E;
  margin-top: 0px;
}

/* --- VIDEO & OVERLAY --- */
.lb-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.lb-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Subtle zoom when the user hovers over the section */
.luxury-bridge-section:hover .lb-video-bg {
  transform: scale(1.06);
}

/* Complex Vignette: Dark at the bottom left where text sits, clear in center */
.lb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 21, 17, 0.9) 0%, rgba(8, 21, 17, 0.2) 80%, rgba(8, 21, 17, 0.4) 100%);
  z-index: 2;
  transition: background 0.8s ease;
}

/* --- LAYOUT CONTAINER --- */
.lb-container {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 60px;
  /* Space from the bottom edge */
}

/* --- LEFT: MASSIVE TYPOGRAPHY --- */
.lb-text-content {
  max-width: 700px;
}

.lb-kicker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #F0E0C6;
  /* Sandstone */
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.lb-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(50px, 7vw, 90px);
  /* Absolutely massive on desktop */
  font-weight: 700;
  color: #FFF9E9;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* --- RIGHT: THE SPINNING AWWWARDS BUTTON --- */
.lb-action-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-circle-btn {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* The spinning SVG text */
.lb-spin-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spinRing 15s linear infinite;
  /* Smooth continuous rotation */
}

.lb-spin-ring text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 4px;
  fill: #F0E0C6;
  /* Sandstone */
  text-transform: uppercase;
}

/* The center circle and arrow */
.lb-arrow-center {
  width: 70px;
  height: 70px;
  background: rgba(240, 224, 198, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(240, 224, 198, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F0E0C6;
  font-size: 24px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

/* --- HOVER EFFECTS --- */
.lb-circle-btn:hover {
  transform: scale(1.05);
  /* Entire button pops */
}

.lb-circle-btn:hover .lb-spin-ring {
  animation-play-state: paused;
  /* Text stops spinning on hover */
}

.lb-circle-btn:hover .lb-arrow-center {
  background: #F0E0C6;
  /* Fills with Sandstone */
  color: #033E3E;
  /* Arrow turns Teal */
  box-shadow: 0 10px 30px rgba(240, 224, 198, 0.4);
  transform: rotate(-45deg);
  /* Arrow points diagonally up-right! Extremely premium feel */
}

@keyframes spinRing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
  .luxury-bridge-section {
    height: 500px;
    align-items: center;
    /* Center everything on mobile */
  }

  .lb-container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: 0;
    gap: 40px;
    /* Space between text and button */
  }

  .lb-title {
    font-family: 'Oswald', sans-serif;
    /* Your brand font */
    font-weight: 700;
    /* Makes it ultra-thick and readable */

  }

  .lb-kicker {
    letter-spacing: 4px;
  }

  /* Scale down the button slightly for phones */
  .lb-circle-btn {
    width: 130px;
    height: 130px;
  }

  .lb-spin-ring text {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    /* Your brand font */
    font-weight: 800;
  }

  .lb-arrow-center {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
}




/* --------------------------------------------------- */
/* --- 360 virtual tour section style (project korlaparthi & sandal valley) --- */
/* --------------------------------------------------- */
.pd-virtual-tour {
  background-color: #F4E6D2;
  /* Matching the cream background in your image */
  padding: 60px 20px;
  overflow: hidden;
}

/* --- Header & Typography --- */
.pd-virtual-header {
  margin-bottom: 30px;
  text-align: center;
}

.pd-title {
  font-family: 'Oswald', sans-serif;
  /* Using a bold condensed font similar to the image */
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #003d29;
  /* Dark Green */
  line-height: 1.2;
  margin-bottom: 15px;
}

.pd-virtual-subtext {
  font-size: 1rem;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- Responsive Iframe Wrapper --- */
.pd-virtual-frame-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Maintain 16:9 aspect ratio */
  padding-top: 56.25%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  background: #000;
}

.pd-virtual-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Mobile Specific Fixes --- */
@media (max-width: 768px) {
  .pd-virtual-tour {
    padding: 40px 15px;
  }

  .pd-title {
    /* Reducing size and spacing to prevent ugly wrapping on mobile */
    font-size: 1.5rem;
    letter-spacing: 1px;
    padding: 0 10px;
  }

  .pd-virtual-subtext {
    font-size: 0.9rem;
    padding: 0 10px;
  }

  .pd-virtual-frame-wrapper {
    /* Making the tour slightly taller on mobile for easier touch navigation */
    padding-top: 65%;
    border-radius: 8px;
  }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 400px) {
  .pd-title {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------- */
/* --- Project Specifications & Media Slider (project korlaparthi & sandal valley) --- */
/* --------------------------------------------------- */
/* --- Section Layout --- */
.project-spec-section {
  background-color: #FDFDFD;
  padding: 80px 0;
}

/* --- Masterplan Visual Area --- */
.spec-masterplan-box {
  position: relative;
  padding-right: 20px;
}

.masterplan-image-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  /* Gives the image a solid, consistent presence */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  background: #f4f8f8;
}

.masterplan-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* --- Masterplan Hover Overlay Effect --- */
.plan-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 62, 62, 0.7);
  /* Deep Teal overlay */
  color: #F0E0C6;
  /* Brand cream color */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Triggers the zoom and overlay when hovering over the box */
.masterplan-image-wrapper:hover img {
  transform: scale(1.05);
}

.masterplan-image-wrapper:hover .plan-overlay {
  opacity: 1;
}

.plan-overlay i {
  font-size: 45px;
  margin-bottom: 15px;
}

.plan-overlay span {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- Lead Form & Blur Effect --- */
body.modal-open .project-spec-section,
body.modal-open .container {
  filter: blur(10px);
  pointer-events: none;
}

.lead-form-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 62, 62, 0.5);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: #FFF9E9;
  padding: 50px 40px;
  border-radius: 24px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.close-modal {
  display: none;
  /* Controlled by JS Timer */
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
  color: #033E3E;
}

/* =========================================
   FULLSCREEN MASTERPLAN MODAL
   ========================================= */

.pd-masterplan-modal {
  display: none;
  /* Hidden by default, JavaScript changes this to 'flex' */
  position: fixed;
  inset: 0;
  /* Covers the entire screen */
  z-index: 100000;
  /* Extremely high to stay above navbars and everything else */
  background: rgba(3, 62, 62, 0.95);
  /* Deep Teal brand color with slight transparency */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  /* Frosted glass effect for the background */
}

/* The Image inside the Modal */
.pd-masterplan-modal img {
  max-width: 95vw;
  /* Almost full width of the viewport */
  max-height: 90vh;
  /* Almost full height of the viewport */
  object-fit: contain;
  /* CRUCIAL: Ensures the whole map is visible without cropping */
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Close Button Styling */
.pd-masterplan-close {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 40px;
  color: #F0E0C6;
  /* Brand cream color */
  cursor: pointer;
  line-height: 1;
  z-index: 100001;
  transition: transform 0.3s ease, color 0.3s ease;
}

.pd-masterplan-close:hover {
  transform: rotate(90deg);
  /* Nice spin effect on hover */
  color: #ffffff;
}

/* Animation for the image popping in */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Adjustments for the Fullscreen Modal */
@media (max-width: 768px) {
  .pd-masterplan-close {
    top: 15px;
    right: 20px;
    font-size: 35px;
  }

  .pd-masterplan-modal img {
    max-width: 100vw;
    border-radius: 8px;
    /* Slightly smaller borders on mobile */
  }
}

/* --- Mobile Adjustments --- */
@media (max-width: 991px) {
  .spec-masterplan-box {
    padding-right: 0;
    margin-bottom: 40px;
  }

  .masterplan-image-wrapper {
    height: 350px;
    /* Slightly shorter on mobile devices */
  }

  .spec-title {
    font-size: 32px;
    text-align: center;
  }
}


/* =========================================
   gallery Page Styling
   ========================================= */

.elite-gallery-section {
  background-color: #081511;
  padding: 120px 5%;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
}

/* --- Fixed Header --- */
.gallery-header {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 80px auto;
  text-align: center;
}

.accent-text {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
}

.gallery-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  margin: 0;
  color: #f1f1f1;
}

/* --- The Grid --- */
.elite-grid {
  display: grid;
  /* The min() function prevents the grid from breaking on very small phones */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.elite-item {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  background-color: #000;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.elite-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
  opacity: 0.8;
}

/* Hidden state for Load More functionality */
.hidden-item {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  pointer-events: none;
  position: absolute;
  /* Keeps hidden items from taking up blank space */
  visibility: hidden;
}

/* --- Overlay & Hover Icons --- */
.elite-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 21, 17, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.overlay-icon {
  width: 45px;
  height: 45px;
  color: #fff;
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.elite-item:hover img {
  transform: scale(1.08);
  opacity: 1;
}

.elite-item:hover .elite-overlay {
  opacity: 1;
}

.elite-item:hover .overlay-icon {
  transform: scale(1);
}

/* --- THE LIGHTBOX --- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 8, 0.98);
  z-index: 10000;
  backdrop-filter: blur(15px);
  align-items: center;
  justify-content: center;
}

.lightbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.lightbox-content.visible {
  opacity: 1;
  transform: scale(1);
}

.close-lightbox {
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 30px;
  font-weight: 200;
  cursor: pointer;
  color: #fff;
  z-index: 10001;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  padding: 20px;
  opacity: 0.4;
  transition: 0.3s;
  z-index: 10001;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* --- Load More Button & Counter --- */
.load-more-container {
  text-align: center;
  margin-top: 60px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.premium-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* Creates the clear button shape */
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  padding: 18px 45px;
  /* Makes the button nice and wide */
  border-radius: 3px;
  /* Subtle rounding for a premium feel */
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-line {
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 10px auto 0;
  transition: width 0.4s ease, background 0.4s ease;
}

.premium-button:hover .btn-line {
  width: 80px;
  background: rgba(255, 255, 255, 1);
}

.premium-button:hover {
  background: #ffffff;
  /* Fills solid white */
  color: #081511;
  /* Text turns to your signature dark color */
  border-color: #ffffff;
  letter-spacing: 4px;
  /* Very subtle text expansion */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* Slight lift effect */
}

.gallery-count-text {
  margin-top: 25px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease;
}

#current-count,
#total-count {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* THE FIX: Premium styling for when all images are loaded */
.gallery-count-text.all-loaded-msg {
  font-size: 14px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 40px;
}

/* --- Back to Top Button --- */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: rgba(8, 21, 17, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  backdrop-filter: blur(10px);
}

.back-to-top-btn svg {
  width: 20px;
  height: 20px;
}

.back-to-top-btn.show-btn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: #fff;
  color: #081511;
  transform: translateY(-5px);
}


/* --- Premium Lightbox Counter --- */
.lightbox-counter {
  position: absolute;
  top: 40px;
  /* Distance from the top */
  left: 50%;
  /* Pushes it to the middle */
  transform: translateX(-50%);
  /* Perfectly centers it on its own axis */
  color: rgba(255, 255, 255, 0.8);
  /* Brighter white for better visibility */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  /* Increased font size (was 14px) */
  letter-spacing: 6px;
  /* Wider spacing for a high-end look */
  z-index: 10001;
}

/* Brightens up slightly when hovered */
.lightbox-counter:hover {
  color: #ffffff;
}


/* --- Mobile Fixes --- */
/* --- Mobile Fixes --- */
@media (max-width: 768px) {

  /* 1. Fix the main section padding to be perfectly even on mobile */
  .elite-gallery-section {
    padding: 80px 20px;
    /* 20px solid padding on left and right */
  }

  /* 2. Tighten the gap between images on smaller screens */
  .elite-grid {
    gap: 20px;
  }

  /* 3. Lightbox mobile adjustments */
  .lightbox-prev,
  .lightbox-next {
    display: none;
  }

  .lightbox-content {
    max-width: 95%;
  }

  .lightbox-counter {
    top: 25px;
    font-size: 14px;
    letter-spacing: 4px;
  }

  .back-to-top-btn {
    bottom: 90px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}



/* 1. Fix the Cream Box (Brand Panel) */
.header-inner .brand-panel {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 39.47vmin !important;
  height: 45vmin !important;
  background-color: #f2e8d9 !important;
  display: block !important;
  z-index: 9999 !important;
  /* THE FIX: Forces box above the transparent navbar */
}

/* 2. Logo Position Fix */
/* This ONLY affects the About page logo */
.page-logo-header {
  display: inline-block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-height: 9vmin !important;
  position: relative !important;
}

/* Ensure the container doesn't hide the new logo class */


/* 3. Social Content - Locked to the Left Cream Panel */
.header-inner .page-vertical-panel-content {
  position: absolute !important;
  left: 0 !important;
  top: 18vmin !important;
  /* Moves icons under the logo */
  width: 39.47vmin !important;
  /* Matches brand-panel width exactly */
  text-align: center !important;

  /* THE FIX: Changed from 20 to 10005 so it sits on top of the cream box */
  z-index: 10005 !important;

  display: block !important;
}

/* 4. Line and Icon Styling */


.page-social-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3.5vmin !important;
  padding: 10px !important;
  margin: 0 !important;
  list-style: none !important;
}

.header-inner .page-vertical-panel-content .page-social-list li a i {
  font-size: 45px !important;
  /* Extremely large to verify it's working */
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-block !important;
  min-width: 50px !important;
  /* Forces the width to match the size */
  text-align: center !important;
}

/* 5. Watermark Background Text */
.header-inner .brand-name {
  position: absolute !important;
  bottom: 2vmin !important;
  left: -35px !important;
  width: 100% !important;
  font-size: 9vmin !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .header-inner .page-vertical-panel-content .page-social-list li a i {
    display: none !important;
  }

  .header-inner .brand-name {
    font-size: 9vmin !important;
    left: -35px !important;
  }

}

.bg-korlaparthi {
  background: url(../img/bg/bg_Korlaparthi.jpeg) 100% 0 no-repeat;
  background-position: center center;

  /* Ensures the image covers the entire area, cropping if necessary */
  background-size: cover;

  /* Prevents the image from repeating */
  background-repeat: no-repeat;
  padding: 33.7vmin 0 11vmin;
}

.bg-valley {
  background: url(../img/bg/bg_projects.jpeg) 100% 0 no-repeat;
  background-position: center center;

  /* Ensures the image covers the entire area, cropping if necessary */
  background-size: cover;

  /* Prevents the image from repeating */
  background-repeat: no-repeat;
  padding: 33.7vmin 0 11vmin;
}

@media (max-width: 991px) {

  /* 1. Turns the cream box into a perfectly centered container */
  .brand-panel,
  .header-inner .brand-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    /* Removes desktop padding that was pushing the logo off-center */
  }

  /* 2. Resets the link wrapper so it sits perfectly in the middle */
  .main-logo-link {
    position: relative !important;
    margin: 0 !important;
    top: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 3. Ensures the image respects the center alignment */
  .page-logo-header {
    margin: 0 auto !important;
  }
}

/* =========================================
   PROJECT OVERVIEW — KORLAPARTHI
   Scoped: .pd-overview
   ========================================= */

.pd-overview-story {
  padding: 60px 0;
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
  position: relative;
  overflow: hidden;
}

/* Layout */

.pd-story-row {
  display: flex;
  align-items: center;
}

/* STORY CONTENT */

.pd-story-title {
  font-family: 'Oswald', sans-serif;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #033E3E;
  margin-bottom: 10px;
}

.pd-story-title span {
  display: block;
  color: #033E3E;
}

.pd-story-divider {
  width: 90px;
  height: 2px;
  background: #033E3E;
  margin: 25px 0 30px;
}

.pd-story-content {
  padding-left: 30px;
}

.pd-story-content p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 18px;
  max-width: 520px;
}

/* IMAGE VISUAL SECTION */

.pd-story-visual {
  display: flex;
  justify-content: center;
  /* centers visual block */
}

/* Main Image Frame */

.pd-story-image-main {
  position: relative;
}

/* Enlarged Cinematic Image */

.pd-story-image-main img {
  width: 106%;
  margin-left: -3%;
  border-radius: 24px;
  box-shadow: none;
  transition: transform 0.6s ease;
}

/* Hover Motion */

.pd-story-image-main img:hover {
  transform: scale(1.03);
}

/* Decorative Border Frame */

.pd-story-image-main:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #033E3E;
  border-radius: 24px;
  pointer-events: none;
  display: none;
}

/* Floating Image */

.pd-story-image-float {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 220px;
}

.pd-story-image-float img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.20);
}

/* =========================================
   MOBILE FIX — CREATIVE OVERVIEW
========================================= */

@media (max-width: 992px) {

  .pd-overview-story {
    padding: 70px 0 60px;
    text-align: center;
  }

  /* Stack layout */
  .pd-story-row {
    display: block;
  }

  /* Image wrapper */
  .pd-story-visual {
    padding: 0 12px;
    margin-bottom: 30px;
  }

  .pd-story-image-main {
    text-align: center;
  }

  .pd-story-image-main img {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }

  /* Decorative border remove on mobile */
  .pd-story-image-main:after {
    display: none;
  }

  /* Hide floating image */
  .pd-story-image-float {
    display: none;
  }

  /* Title */
  .pd-story-title {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
  }

  .pd-story-title span {
    display: block;
    font-size: 28px;
  }

  /* Divider centered */
  .pd-story-divider {
    margin: 18px auto 25px;
    width: 70px;
  }

  /* Text */
  .pd-story-content p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 100%;
    padding: 0 10px;
  }

}


/* =========================================
   KEY HIGHLIGHTS — ROYAL GOLD THEME
========================================= */

/* The main deep teal background and golden borders */
.project-detail-custom.pd-highlights {
  background: radial-gradient(circle at center, #054F4F 0%, #033E3E 80%) !important;
  padding: 60px 0 !important;
  /* REDUCED from 120px */
  text-align: center;
  border-top: 4px solid #E6C27A !important;
  border-bottom: 4px solid #E6C27A !important;
  margin-bottom: 0px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.project-detail-custom.pd-highlights .pd-title {
  display: block !important;
  font-family: 'Oswald', sans-serif;
  font-size: 42px !important;
  letter-spacing: 0.08em;
  margin-bottom: 40px !important;
  /* REDUCED from 70px */
  text-transform: uppercase;
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0px 4px 15px rgba(252, 246, 186, 0.1);
}

/* The primary numbers/data (Bright Gold) */
.project-detail-custom .pd-highlight-box h3 {
  font-size: 32px;
  color: #FADE80 !important;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  font-weight: 800;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* The small descriptor text (Light Grey for contrast) */
.project-detail-custom .pd-highlight-box p {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #E0E0E0 !important;
  font-weight: 600;
}

/* =========================================
   MOBILE — KEY HIGHLIGHTS FIX
========================================= */

@media (max-width: 992px) {

  /* Adjust overall padding for smaller screens */
  .project-detail-custom.pd-highlights {
    padding: 60px 18px;
  }

  /* Turns the text boxes into elegant, slightly transparent premium cards */
  .project-detail-custom .pd-highlight-box {
    background: rgba(230, 194, 122, 0.08);
    /* Subtle gold tint */
    padding: 24px 18px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    border: 1px solid rgba(252, 246, 186, 0.2);
  }

  /* Slightly shrink the gold numbers on mobile */
  .project-detail-custom .pd-highlight-box h3 {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .project-detail-custom .pd-highlight-box p {
    font-size: 11px;
    margin-bottom: 0;
  }
}

/* =========================================
   Location Advantage Section — KORLAPARTHI
   ========================================= */

.pd-location-advantage {
  padding: 120px 0;
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
}

/* Title */

.pd-location-title {
  font-family: 'Oswald', sans-serif;
  font-size: 42px;
  letter-spacing: 0.08em;
  margin-bottom: 50px;
  color: #033E3E;
}

.pd-location-title span {
  color: #033E3E;
}

/* List wrapper */

.pd-location-list {
  position: relative;
  padding-left: 40px;
}

/* Vertical connector line */

.pd-location-list:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#033E3E, transparent);
}

/* Item */

.pd-location-item {
  display: flex;
  align-items: center;
  margin-bottom: 38px;
}

/* Bigger icon circle */

.pd-location-icon {
  width: 44px;
  height: 44px;
  background: #F4E6D2;
  border: 2px solid #033E3E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #033E3E;
  font-size: 18px;
  /* Bigger icon */
  margin-right: 22px;
  transition: all .35s ease;
}

/* Hover animation */

.pd-location-item:hover .pd-location-icon {
  background: #033E3E;
  color: #FFF9E9;
  transform: scale(1.18);
  box-shadow: 0 10px 24px rgba(3, 62, 62, 0.35);
}

/* Bigger text */

.pd-location-text {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #555;
}

/* CTA Button */

.pd-location-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 34px;
  background: #033E3E;
  /* Deep Teal */
  color: #FFF9E9;
  /* White text */
  text-decoration: none;
  border-radius: 50px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all .35s ease;
  box-shadow: 0 12px 28px rgba(3, 62, 62, 0.28);
}

.pd-location-btn:hover {
  background: #F0E0C6;
  /* Sandstone */
  color: #033E3E;
  /* Teal text */
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(197, 164, 126, 0.35);
}

/* Map */

.pd-location-map {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.18);
  line-height: 0;
  background: #000;
  /* fallback while loading */
}

/* Remove iframe baseline gap */

.pd-location-map iframe {
  width: 100%;
  height: 510px;
  border: 0;
  display: block;
  vertical-align: top;
  /* KEY FIX */
}

/* Extra safeguard — clip bottom */

.pd-location-map:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #FFF9E9;
  /* section bg */
}

/* =========================================
   MOBILE — LOCATION ADVANTAGE FIXED
========================================= */

@media (max-width: 992px) {

  /* Section spacing */

  .pd-location-advantage {
    padding: 70px 18px 60px;
    text-align: center;
  }

  /* Title */

  .pd-location-title {
    font-size: 26px;
    margin-bottom: 35px;
  }

  /* Remove vertical connector line */

  .pd-location-list {
    padding-left: 0;
  }

  .pd-location-list:before {
    display: none;
  }

  /* Align icon + text properly */

  .pd-location-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* FIX */
    text-align: left;
    margin-bottom: 26px;
  }

  /* Icon sizing */

  .pd-location-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
    margin-right: 14px;
  }

  /* Text sizing */

  .pd-location-text {
    font-size: 15px;
    line-height: 1.5;
  }

  /* CTA Button spacing */

  .pd-location-btn {
    display: inline-block;
    margin: 25px auto 30px;
  }

  /* Map container fix */

  .pd-location-map {
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto;
  }

  /* Map iframe */

  .pd-location-map iframe {
    width: 100%;
    height: 320px;
    display: block;
  }

}

/* =========================================
   Master Plan Section — KORLAPARTHI
   ========================================= */
/* =========================================
   PROJECT SPECIFICATIONS (REFINED EXECUTIVE STYLE)
   ========================================= */

.project-spec-section {
  background-color: #F4E6D2 !important;
  /* Soft warm neutral background */
  padding: 100px 0;
  position: relative;
}

/* Masterplan Visual Area */
.spec-masterplan-box {
  position: relative;
  padding-right: 20px;
}

/* Styled Pill Badge for Layout Title */
.project-layout-badge {
  display: inline-block;
  background-color: #ffffff;
  /* Brand Sandstone */
  color: #033E3E;
  /* Deep Teal */
  padding: 6px 22px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Image Interaction */
.masterplan-image-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  /* Keeps the height consistent with the right column */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  background: #f4f8f8;
}

/* Technical Specs Content */
.spec-title {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 45px;
  line-height: 1.1;
}

.spec-title span {
  color: #033E3E;
  /* Highlighting 'Specifications' in brand teal */
}

/* Data Grid Styling */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  /* Increased gap for better readability */
  margin-bottom: 50px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  /* Cleaner separator */
}

.spec-icon {
  font-size: 29px;
  color: #033E3E;

  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  /* ensures perfect square */

  background: #f4f8f8;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  /* prevents stretching in flex layout */
  transition: all 0.3s ease;
}

.spec-item:hover .spec-icon {
  background-color: #033E3E;
  color: #F0E0C6;
}

.spec-info p {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1.5px;
}

.spec-info strong {
  display: block;
  font-size: 15px;
  color: #222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Lead Form Trigger Button */
.spec-download-btn {
  display: inline-block;
  padding: 18px 40px;
  background: #033E3E;
  color: #F0E0C6;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spec-download-btn:hover {
  background: #055a5a;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(3, 62, 62, 0.2);
}

/* =========================================
   BROCHURE LEAD FORM MODAL (THE MISSING PIECE)
   ========================================= */

.lead-form-modal {
  display: none;
  /* Hidden by default - JS turns this to 'flex' */
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* Must be higher than the navbar */
  background: rgba(3, 62, 62, 0.95);
  /* Deep Teal Semi-transparent Overlay */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  /* Premium frosted glass effect */
}

.modal-content {
  background: #FFF9E9;
  /* Brand Cream Background */
  padding: 50px 40px;
  border-radius: 24px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(240, 224, 198, 0.5);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 30px;
  color: #033E3E;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s ease;
}

.close-modal:hover {
  transform: rotate(90deg);
  color: #bd081c;
  /* Changes to alert red on hover */
}

.modal-content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  color: #033E3E;
  margin-bottom: 10px;
}

.modal-content p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

/* Form Elements */
.lead-generation-form input {
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 15px;
  background-color: #F0E0C6;
  /* Sandstone Input BG */
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #033E3E;
  outline: none;
  transition: all 0.3s ease;
}

.lead-generation-form input:focus {
  border-color: #033E3E;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(3, 62, 62, 0.1);
}

.btn-submit {
  width: 100%;
  background: #033E3E;
  color: #F0E0C6;
  padding: 18px;
  border: none;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-submit:hover {
  background: #055a5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile Tweak */
@media (max-width: 480px) {
  .modal-content {
    padding: 40px 25px;
  }
}

/* Mobile Responsiveness for Data Grid */
@media (max-width: 768px) {
  .spec-grid {
    grid-template-columns: 1fr;
    /* Single column on phones */
    gap: 20px;
  }

  .spec-masterplan-box {
    padding-right: 0;
    margin-bottom: 50px;
  }

  .spec-title {
    font-size: 32px;
  }
}

/* =========================================
   LEAD FORM & MASTERPLAN MODAL STYLING
   ========================================= */

/* The Dark Background Overlay */
.lead-form-modal,
.pd-masterplan-modal {
  display: none;
  /* JS will change this to 'flex' */
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Ensures it is on top of everything */
  background: rgba(3, 62, 62, 0.96);
  /* Brand teal overlay */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
}

/* The White Box in the Center */
.modal-content {
  background: #FFF9E9;
  padding: 50px 40px;
  border-radius: 24px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.close-modal,
.pd-masterplan-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 32px;
  color: #033E3E;
  cursor: pointer;
  line-height: 1;
}

/* Masterplan Image Modal Adjustment */
.pd-masterplan-modal img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}

/* Form Elements Styling */
.lead-generation-form input {
  width: 100%;
  padding: 16px 20px;
  margin-bottom: 15px;
  background-color: #F0E0C6;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  outline: none;
}

.btn-submit {
  width: 100%;
  background: #033E3E;
  color: #F0E0C6;
  padding: 18px;
  border: none;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

/* =========================================
   1. CONTAINER & TYPOGRAPHY
   ========================================= */
.pd-3d-gallery-container {
  background: linear-gradient(180deg, #F4E6D2, #F4E6D2);
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
}

.pd-3d-gallery-container.about .gallery-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: bolder;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #033E3E !important;
}

.pd-3d-gallery-container.about .gallery-header p {
  font-size: 15px;
  font-weight: bold;
  color: #6f7c7d !important;
}

/* =========================================
   2. DESKTOP GALLERY (Standard)
   ========================================= */
.pd-3d-gallery {
  perspective: 2000px;
  height: 500px;
  /* Standard height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.pd-3d-stage {
  width: 420px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
}

.pd-3d-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: spin3d 60s linear infinite;
  /* Smooth speed */
}

.pd-3d-stage:hover .pd-3d-spinner {
  animation-play-state: paused;
}

/* =========================================
   3. ITEM STYLES & REFLECTION
   ========================================= */
.pd-3d-item {
  position: absolute;
  width: 420px;
  height: 220px;
  top: 0;
  left: 0;
  background: #F4E6D2;
  border: 4px solid #F4E6D2;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border-radius: 12px;
  /* Reflection effect */
  -webkit-box-reflect: below 8px linear-gradient(transparent,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.35));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.pd-3d-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   4. DESKTOP POSITIONS (10 Items)
   Radius: 680px
   ========================================= */
.pd-3d-item:nth-child(1) {
  transform: rotateY(0deg) translateZ(680px);
}

.pd-3d-item:nth-child(2) {
  transform: rotateY(36deg) translateZ(680px);
}

.pd-3d-item:nth-child(3) {
  transform: rotateY(72deg) translateZ(680px);
}

.pd-3d-item:nth-child(4) {
  transform: rotateY(108deg) translateZ(680px);
}

.pd-3d-item:nth-child(5) {
  transform: rotateY(144deg) translateZ(680px);
}

.pd-3d-item:nth-child(6) {
  transform: rotateY(180deg) translateZ(680px);
}

.pd-3d-item:nth-child(7) {
  transform: rotateY(216deg) translateZ(680px);
}

.pd-3d-item:nth-child(8) {
  transform: rotateY(252deg) translateZ(680px);
}

.pd-3d-item:nth-child(9) {
  transform: rotateY(288deg) translateZ(680px);
}

.pd-3d-item:nth-child(10) {
  transform: rotateY(324deg) translateZ(680px);
}

/* Desktop Hover: Pop Forward */
.pd-3d-item:hover {
  transform: rotateY(inherit) translateZ(750px) scale(1.1) !important;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* =========================================
   5. MOBILE OPTIMIZATION (No Merging!)
   ========================================= */
@media (max-width: 992px) {

  /* Reduce container height */
  .pd-3d-gallery {
    height: 380px;
    perspective: 1200px;
  }

  /* Smaller Cards */
  .pd-3d-stage,
  .pd-3d-item {
    width: 210px;
    height: 130px;
  }

  /* MOBILE POSITIONS (Critical Fix) 
     Radius increased to 360px to prevent merging */
  .pd-3d-item:nth-child(1) {
    transform: rotateY(0deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(2) {
    transform: rotateY(36deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(3) {
    transform: rotateY(72deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(4) {
    transform: rotateY(108deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(5) {
    transform: rotateY(144deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(6) {
    transform: rotateY(180deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(7) {
    transform: rotateY(216deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(8) {
    transform: rotateY(252deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(9) {
    transform: rotateY(288deg) translateZ(360px);
  }

  .pd-3d-item:nth-child(10) {
    transform: rotateY(324deg) translateZ(360px);
  }

  /* Mobile Hover */
  .pd-3d-item:hover {
    transform: rotateY(inherit) translateZ(390px) scale(1.05) !important;
  }

  .gallery-header h2 {
    font-size: 1.8rem;
  }
}

/* Animation Keyframes */
@keyframes spin3d {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(-360deg);
  }
}

/* =========================================
     CTA Section — KORLAPARTHI
   ========================================= */

/* Ensure the deep background is set */
.project-detail-custom.pd-sitevisit {
  background: #033E3E !important;
  color: #FFF9E9;
  padding: 80px 0;
  border-top: 3px solid #E6C27A;
  border-bottom: 3px solid #E6C27A;
}

/* Make the title pop with a subtle golden glow */
.pd-sitevisit-title {
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  letter-spacing: 0.08em;
  margin-bottom: 15px;
  /* Royal gold text */
  background: linear-gradient(to right, #F9D423 0%, #FF4E50 100%);
  background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-shadow: 0px 4px 15px rgba(252, 246, 186, 0.1);
}

.pd-sitevisit-text {
  color: #E0E0E0;
  margin-bottom: 35px;
  font-size: 17px;
  max-width: 600px;
  margin: 0 auto 35px auto;
}

/* --- THE PREMIUM TRUST STRIP --- */
.trust-strip {
  background: linear-gradient(90deg, rgba(252, 246, 186, 0) 0%, rgba(252, 246, 186, 0.1) 50%, rgba(252, 246, 186, 0) 100%);
  padding: 15px 20px;
  margin-bottom: 50px;
  border-top: 1px solid rgba(252, 246, 186, 0.5);
  border-bottom: 1px solid rgba(252, 246, 186, 0.5);
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  /* Bright golden text for the trust items */
  color: #FADE80;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- THE IRRESISTIBLE BUTTON --- */
.pd-sitevisit-btn {
  /* Rich metallic gold gradient */
  background: linear-gradient(135deg, #F9D976 0%, #E6C27A 50%, #B38728 100%) !important;
  color: #012222 !important;
  /* Extremely dark teal for maximum contrast */
  border: none !important;
  border-radius: 50px;
  /* Pill shape from your screenshot */
  padding: 16px 50px !important;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
  /* Creates a continuous subtle pulsing glow */
  animation: goldPulse 2s infinite;
}

.pd-sitevisit-btn:hover {
  /* Flips the gradient and increases the shadow on hover */
  background: linear-gradient(135deg, #FCF6BA 0%, #F9D976 50%, #E6C27A 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(252, 246, 186, 0.6) !important;
  color: #000000 !important;
}

/* --- THE PULSING ANIMATION --- */
@keyframes goldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 217, 118, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(249, 217, 118, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(249, 217, 118, 0);
  }
}

/* Standardize Custom Section Padding */
.pd-overview-story,
.project-detail-custom .pd-highlights,
.pd-location-advantage,
.pd-masterplan-grid,
.project-detail-custom .pd-virtual-tour,
.amenities-panorama,
.pd-3d-gallery-container,
.project-detail-custom .pd-sitevisit {
  padding-top: 60px !important;
  /* Was 100px - 140px */
  padding-bottom: 60px !important;
  /* Was 100px - 140px */
}

/* Reduce gap specifically for the Amenities Header */
.panorama-header {
  margin-bottom: 30px !important;
  /* Was 40px/50px */
}

/* Reduce the Hero Image Height */
.main-project {
  padding-top: 180px !important;
  /* Was 33.7vmin (approx 300px+) */
  padding-bottom: 80px !important;
  /* Was 11vmin */
  min-height: auto !important;
}

@media (max-width: 768px) {

  /* Tighter spacing on mobile */
  .pd-overview-story,
  .project-detail-custom .pd-highlights,
  .pd-location-advantage,
  .pd-masterplan-grid,
  .project-detail-custom .pd-virtual-tour,
  .amenities-panorama,
  .pd-3d-gallery-container,
  .project-detail-custom .pd-sitevisit {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce Hero Section on Mobile */
  .main-project {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce margins between stacked items */
  .pd-story-visual,
  .pd-location-map,
  .pd-masterplan-preview {
    margin-bottom: 30px !important;
  }
}

/* --------------------------------------------------- */
/* --- 360 virtual tour section style (project korlaparthi & sandal valley) --- */
/* --------------------------------------------------- */
.pd-virtual-tour {
  background-color: #F4E6D2;
  /* Matching the cream background in your image */
  padding: 60px 20px;
  overflow: hidden;
}

/* --- Header & Typography --- */
.pd-virtual-header {
  margin-bottom: 30px;
  text-align: center;
}

.pd-title {
  font-family: 'Oswald', sans-serif;
  /* Using a bold condensed font similar to the image */
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #003d29;
  /* Dark Green */
  line-height: 1.2;
  margin-bottom: 15px;
}

.pd-virtual-subtext {
  font-size: 1rem;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- Responsive Iframe Wrapper --- */
.pd-virtual-frame-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Maintain 16:9 aspect ratio */
  padding-top: 56.25%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  background: #000;
}

.pd-virtual-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Mobile Specific Fixes --- */
@media (max-width: 768px) {
  .pd-virtual-tour {
    padding: 40px 15px;
  }

  .pd-title {
    /* Reducing size and spacing to prevent ugly wrapping on mobile */
    font-size: 1.5rem;
    letter-spacing: 1px;
    padding: 0 10px;
  }

  .pd-virtual-subtext {
    font-size: 0.9rem;
    padding: 0 10px;
  }

  .pd-virtual-frame-wrapper {
    /* Making the tour slightly taller on mobile for easier touch navigation */
    padding-top: 65%;
    border-radius: 8px;
  }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 400px) {
  .pd-title {
    font-size: 1.3rem;
  }
}

/* =========================================
   SECTION: AMENITIES PANORAMA (project-korlaparthi)
   ========================================= */

.amenities-panorama {
  padding: 80px 0;
  background: #f4e6d2;
  overflow: hidden;
}

.panorama-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #033E3E;
  margin-bottom: 10px;
}

.panorama-header p {
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
}

/* --- The Flex Container --- */
.panorama-container {
  display: flex;
  width: 100%;
  height: 350px;
  gap: 15px;
  overflow: hidden;

  /* CRITICAL FIX: Adds space between the two rows so they don't merge */
  margin-bottom: 30px;
}

/* --- Individual Cards --- */
.panorama-card {
  position: relative;
  flex: 1;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Hover Effect: Expansion */
.panorama-card:hover {
  flex: 3.5;
}

/* --- Dark Gradient Overlay --- */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  opacity: 0.9;
  transition: all 0.4s ease;
}

.panorama-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(3, 62, 62, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 1;
}

/* --- Icons & Text (Alignment Fixed) --- */
.card-icon {
  /* Fixes the icon circle alignment */
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: #FFF9E9;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;

  /* Centers the icon perfectly inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Ensures the icon itself has no extra margin messing up the center */
.card-icon i {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.panorama-card:hover .card-icon {
  background: #F0E0C6;
  transform: scale(1.1);
  color: #033E3E;
}

.card-content h3 {
  color: #FFF9E9;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .panorama-container {
    flex-direction: column;
    /* Stack vertically */
    height: auto;
    gap: 15px;
    /* Space between cards */
    margin-bottom: 15px;
    /* Space between the two container rows */
  }

  .panorama-card {
    height: 140px;
    /* Slightly taller to fit content comfortably */
    width: 100%;
    flex: none;
  }

  /* Disable hover expansion on mobile */
  .panorama-card:hover {
    flex: none;
  }

  /* OVERLAY: Push content to Bottom-Right */
  .card-overlay {
    flex-direction: column;
    /* Stack Icon on top of Text */
    justify-content: flex-end;
    /* Push to Bottom */
    align-items: flex-end;
    /* Push to Right */
    padding: 15px;
    /* Small padding from edge */

    /* Stronger gradient so text is readable on small images */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  }

  /* TEXT: Align Right and Scale Down */
  .card-content {
    text-align: right;
    width: 100%;
  }

  .card-content h3 {
    font-size: 14px;
    /* Smaller font for mobile */
    white-space: normal;
    /* Allow wrapping if text is long */
  }
}

/* ==========================================================================
   SANDAL VALLEY THEME OVERRIDES (RED SANDALWOOD & MAHOGANY)
   ========================================================================== */

/* STORY CONTENT */
.theme-sandalvalley .pd-story-title,
.theme-sandalvalley .pd-story-title span {
  color: #8B251E !important;
}

.theme-sandalvalley .pd-story-divider {
  background: #8B251E !important;
}

.theme-sandalvalley .pd-story-image-main:after {
  border-color: #8B251E !important;
}

/* KEY HIGHLIGHTS */
.theme-sandalvalley .project-detail-custom.pd-highlights {
  background: radial-gradient(circle at center, #521A15 0%, #2A0D0A 80%) !important;
}

/* LOCATION ADVANTAGE */
.theme-sandalvalley .pd-location-title,
.theme-sandalvalley .pd-location-title span {
  color: #8B251E !important;
}

.theme-sandalvalley .pd-location-list:before {
  background: linear-gradient(#8B251E, transparent) !important;
}

.theme-sandalvalley .pd-location-icon {
  border-color: #8B251E !important;
  color: #8B251E !important;
}

.theme-sandalvalley .pd-location-item:hover .pd-location-icon {
  background: #8B251E !important;
  color: #FFF9E9 !important;
  box-shadow: 0 10px 24px rgba(139, 37, 30, 0.35) !important;
}

.theme-sandalvalley .pd-location-btn {
  background: #8B251E !important;
  box-shadow: 0 12px 28px rgba(139, 37, 30, 0.28) !important;
}

.theme-sandalvalley .pd-location-btn:hover {
  color: #8B251E !important;
  background: #F0E0C6 !important;
}

/* PROJECT SPECIFICATIONS */
.theme-sandalvalley .project-layout-badge {
  color: #8B251E !important;
}

.theme-sandalvalley .spec-title span {
  color: #8B251E !important;
}

.theme-sandalvalley .spec-icon {
  color: #8B251E !important;
}

.theme-sandalvalley .spec-item:hover .spec-icon {
  background-color: #8B251E !important;
  color: #FFF9E9 !important;
}

.theme-sandalvalley .spec-download-btn {
  background: #8B251E !important;
}

.theme-sandalvalley .spec-download-btn:hover {
  background: #521A15 !important;
  box-shadow: 0 10px 25px rgba(139, 37, 30, 0.2) !important;
}

/* MODALS & FORMS */
.theme-sandalvalley .lead-form-modal,
.theme-sandalvalley .pd-masterplan-modal {
  background: rgba(139, 37, 30, 0.95) !important;
}

.theme-sandalvalley .close-modal,
.theme-sandalvalley .pd-masterplan-close {
  color: #8B251E !important;
}

.theme-sandalvalley .modal-content h3 {
  color: #8B251E !important;
}

.theme-sandalvalley .lead-generation-form input {
  color: #8B251E !important;
}

.theme-sandalvalley .lead-generation-form input:focus {
  border-color: #8B251E !important;
  box-shadow: 0 5px 15px rgba(139, 37, 30, 0.1) !important;
}

.theme-sandalvalley .btn-submit {
  background: #8B251E !important;
}

.theme-sandalvalley .btn-submit:hover {
  background: #521A15 !important;
}

.theme-sandalvalley #thankYouMessage i {
  color: #8B251E !important;
}

/* 3D GALLERY */
.theme-sandalvalley .pd-3d-gallery-container.about .gallery-header h2 {
  color: #8B251E !important;
}

/* SITE VISIT CTA */
.theme-sandalvalley .project-detail-custom.pd-sitevisit {
  background: #2A0D0A !important;
}

/* VIRTUAL TOUR */
.theme-sandalvalley .pd-virtual-tour .pd-title,
.theme-sandalvalley .pd-virtual-tour .pd-title span {
  color: #8B251E !important;
}

/* AMENITIES PANORAMA */
.theme-sandalvalley .panorama-header h2,
.theme-sandalvalley .panorama-header h2 span {
  color: #8B251E !important;
}

.theme-sandalvalley .panorama-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(139, 37, 30, 0.9) 0%, rgba(0, 0, 0, 0) 60%) !important;
}

.theme-sandalvalley .panorama-card:hover .card-icon {
  color: #8B251E !important;
}


/* ==========================================================================
   PREMIUM RED WOOD TEXTURE (HIGHLIGHTS & SITE VISIT SECTIONS)
   ========================================================================== */

/* 1. The Deep Red Wood Background & Golden Borders */
.theme-sandalvalley .project-detail-custom.pd-highlights,
.theme-sandalvalley .project-detail-custom.pd-sitevisit {
  /* Base mahogany color used to 'stain' the wood */
  background-color: #521A15 !important;

  /* Layer 1: A dark shadow around the edges (Vignette) to make text pop
       Layer 2: A rich red Sandalwood tint
       Layer 3: Your actual wood bark texture 
    */
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(to right, rgba(139, 37, 30, 0.75), rgba(82, 26, 21, 0.9)),
    url('../img/wood-texture.jpg') !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* THE MAGIC: This physically blends the red color INTO the gray bark texture! */
  background-blend-mode: multiply, multiply, normal !important;

  /* Golden borders and inner depth */
  border-top: 4px solid #C59B53 !important;
  border-bottom: 4px solid #C59B53 !important;
  box-shadow: inset 0 10px 50px rgba(0, 0, 0, 0.8) !important;
}

/* --- ADD EXTRA SHADOWS TO TEXT SO IT STANDS OUT FROM THE BARK --- */
.theme-sandalvalley .project-detail-custom.pd-highlights .pd-title,
.theme-sandalvalley .project-detail-custom.pd-sitevisit .pd-sitevisit-title {
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8) !important;
  /* Separates title from wood */
}

.theme-sandalvalley .pd-highlight-box h3 {
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9) !important;
  /* Makes the gold numbers pop */
}

.theme-sandalvalley .pd-highlight-box p {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  font-weight: 700 !important;
}

/* 4. Site Visit Text & Trust Strip */
.theme-sandalvalley .pd-sitevisit-text {
  color: #F0E0C6 !important;
}

.theme-sandalvalley .trust-strip {
  border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
  background: transparent !important;
}

.theme-sandalvalley .trust-item {
  color: #D4AF37 !important;
  /* Matching soft gold */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 5. The Premium 3D Gold Button (Matches screenshot perfectly) */
.theme-sandalvalley .pd-sitevisit-btn {
  background: linear-gradient(180deg, #FADE80 0%, #B2853E 100%) !important;
  color: #2A0807 !important;
  /* Dark mahogany text */
  border: 2px solid #5A1612 !important;
  /* Dark red rim */
  /* Uses a double box-shadow to create that outer golden glowing rim effect */
  box-shadow: 0 0 0 3px rgba(178, 133, 62, 0.4), 0 10px 20px rgba(0, 0, 0, 0.5) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.theme-sandalvalley .pd-sitevisit-btn:hover {
  background: linear-gradient(180deg, #FFF2CD 0%, #D4AF37 100%) !important;
  box-shadow: 0 0 0 3px rgba(178, 133, 62, 0.7), 0 12px 25px rgba(0, 0, 0, 0.6) !important;
  color: #1A0503 !important;
  transform: translateY(-2px);
}

.theme-sandalvalley .pd-3d-gallery-container .gallery-header h2 {
  color: #8B251E !important;
}

.theme-sandalvalley .pd-3d-gallery-container .gallery-header p {
  color: #521A15 !important;
  /* Deep Mahogany for the subtext */
  font-weight: 700 !important;
}

/* ==========================================================================
   ULTIMATE MOBILE RESPONSIVENESS FIXES (ALL SECTIONS)
   ========================================================================== */

@media (max-width: 991px) {

  /* --- 1. OVERVIEW STORY SECTION --- */
  .pd-overview-story .pd-story-row {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .pd-overview-story .pd-story-visual {
    width: 100% !important;
    margin-bottom: 40px !important;
    padding: 0 15px !important;
  }

  .pd-overview-story .pd-story-content {
    padding-left: 0 !important;
    padding: 0 20px !important;
  }

  .pd-story-title {
    font-size: 32px !important;
  }

  .pd-story-divider {
    margin: 20px auto !important;
    /* Centers the small line */
  }

  .pd-story-content p {
    margin: 0 auto 18px auto !important;
  }


  /* --- 2. KEY HIGHLIGHTS SECTION (2x2 Grid) BULLETPROOF FIX --- */

  /* Kills the invisible Bootstrap elements that are breaking the grid */
  .pd-highlights .row::before,
  .pd-highlights .row::after {
    display: none !important;
  }

  .pd-highlights .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Perfect 2-column grid */
    gap: 15px !important;
    padding: 0 15px !important;
  }

  .pd-highlights .row>div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    /* Stops Bootstrap from floating the boxes */
  }

  .pd-highlight-box {
    padding: 20px 10px !important;
    margin-bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .pd-highlight-box h3 {
    font-size: 22px !important;
  }

  .pd-highlight-box p {
    font-size: 11px !important;
  }


  /* --- 3. PROJECT SPECIFICATIONS --- */
  .project-spec-section .row.align-items-center {
    display: flex !important;
    flex-direction: column !important;
    /* Stacks map on top of specs */
  }

  .spec-masterplan-box {
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 40px !important;
  }

  .masterplan-image-wrapper {
    height: 250px !important;
    /* Shrinks the map height to fit mobile screens */
  }

  .spec-title {
    text-align: center !important;
    font-size: 34px !important;
    margin-bottom: 35px !important;
  }

  .spec-grid {
    grid-template-columns: 1fr !important;
    /* Single column list for icons */
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  .spec-item {
    display: flex !important;
    flex-direction: row !important;
    /* Keeps icon next to text */
    align-items: center !important;
    text-align: left !important;
    padding-bottom: 15px !important;
  }

  .spec-footer {
    text-align: center !important;
  }

  /* Full-width premium button */
  .spec-download-btn {
    width: 100% !important;
    display: block !important;
    font-size: 14px !important;
    padding: 16px 20px !important;
  }


  /* --- 4. SCHEDULE A SITE VISIT --- */
  .pd-sitevisit-title {
    font-size: 30px !important;
  }

  .pd-sitevisit-text {
    font-size: 15px !important;
    padding: 0 15px !important;
  }

  /* Stacks the 3 trust items vertically so they don't squish */
  .trust-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 20px !important;
  }

  .trust-item {
    font-size: 13px !important;
    width: 100% !important;
  }

  /* Full-width premium button */
  .pd-sitevisit-btn {
    width: 100% !important;
    max-width: 320px !important;
    display: block !important;
    margin: 0 auto !important;
    font-size: 14px !important;
  }
}

/* =============================================================
   KORLAPARTHI ECO-LIVING WOOD THEME (Green/Teal Tint)
   ============================================================= */


section.pd-highlights.about,
section.pd-sitevisit.about {
  /* Deep Forest Teal Base */
  background-color: #022b2b !important;

  background-image:
    /* 1. Subtle Vignette for depth */
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%),
    /* 2. The Wood Texture */
    url('../img/wood-texture.jpg') !important;

  /* LUMINOSITY makes the wood grain look real and textured instead of 'painted' */
  background-blend-mode: luminosity !important;

  background-size: cover !important;
  background-position: center !important;

  /* Premium Gold Borders */
  border-top: 3px solid #BF953F !important;
  border-bottom: 3px solid #BF953F !important;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure text is crisp against the natural grain */
section.pd-highlights.about .pd-highlight-box h3,
section.pd-highlights.about .pd-title {
  color: #FADE80 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* =============================================================
   KORLAPARTHI TEXT VISIBILITY FIX
   ============================================================= */
/* =============================================================
   KORLAPARTHI MAXIMUM LEGIBILITY FIX
   ============================================================= */

/* 1. Add a subtle dark overlay to the entire section to 'quiet' the bark */
section.pd-highlights.about,
section.pd-sitevisit.about {
  position: relative;
}

section.pd-highlights.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  /* Darkens the wood slightly globally */
  z-index: 0;
}

/* 2. Ensure content sits above the overlay */
section.pd-highlights.about .container {
  position: relative;
  z-index: 1;
}

/* 3. The 'Glass Card' effect for Highlight Boxes */
section.pd-highlights.about .pd-highlight-box {
  background: rgba(0, 0, 0, 0.6) !important;
  /* Solid dark backing */
  backdrop-filter: blur(4px);
  /* Blurs the wood texture behind the text */
  padding: 30px 20px !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  /* Subtle gold rim */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 4. Ultra-Bright Golden Text */
section.pd-highlights.about .pd-highlight-box h3 {
  color: #FFF2AF !important;
  /* Brighter Pale Gold */
  font-size: 34px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 15px rgba(0, 0, 0, 1) !important;
  margin-bottom: 5px;
}

section.pd-highlights.about .pd-highlight-box p {
  color: #FFFFFF !important;
  /* Pure White */
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  opacity: 1 !important;
}

/* 5. Main Title - Glow Effect */
section.pd-highlights.about .pd-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  /* Overriding previous gradient */
  text-shadow: 0 0 20px rgba(191, 149, 63, 0.8), 0 0 40px rgba(0, 0, 0, 1) !important;
  font-size: 48px !important;
}

/* =============================================================
   KORLAPARTHI ELITE PREMIER THEME (Clean & Modern)
   ============================================================= */

/* 1. The Main Wood Section - Dark, Matte, & Deep */
section.pd-highlights.about,
section.pd-sitevisit.about {
  /* Deep Forest Charcoal Base */
  background-color: #0d1a1a !important;
  background-image:
    /* Top & Bottom Vignette for a focused look */
    linear-gradient(to bottom, rgba(13, 26, 26, 1) 0%, rgba(13, 26, 26, 0.7) 30%, rgba(13, 26, 26, 0.7) 70%, rgba(13, 26, 26, 1) 100%),
    /* The Wood Texture used as a subtle 'Grain' */
    url('../img/wood-texture.jpg') !important;

  background-blend-mode: luminosity !important;
  /* Highlights the grain without the 'filter' look */
  background-size: cover !important;
  background-position: center !important;

  /* Thin, sharp gold borders (The 'Jewelry' of the site) */
  border-top: 1px solid #C59B53 !important;
  border-bottom: 1px solid #C59B53 !important;
  padding: 100px 0 !important;
}

/* 2. Premium Typography for 'Key Highlights' */
section.pd-highlights.about .pd-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 300 !important;
  /* Elegant light weight */
  letter-spacing: 0.3em !important;
  /* High-end fashion spacing */
  text-transform: uppercase;
  font-size: 38px !important;
  margin-bottom: 60px !important;
}

/* 3. The Highlight Cards - Minimalist & Balanced */
section.pd-highlights.about .pd-highlight-box {
  background: rgba(255, 255, 255, 0.03) !important;
  /* Barely-there glass */
  border: 1px solid rgba(197, 155, 83, 0.2) !important;
  /* Faded gold rim */
  padding: 40px 20px !important;
  backdrop-filter: blur(10px);
  /* Smooths the bark behind the card */
  transition: all 0.4s ease;
}

section.pd-highlights.about .pd-highlight-box:hover {
  background: rgba(197, 155, 83, 0.1) !important;
  border: 1px solid rgba(197, 155, 83, 0.6) !important;
  transform: translateY(-5px);
}

section.pd-highlights.about .pd-highlight-box h3 {
  color: #C59B53 !important;
  /* Deep Royal Gold */
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: 5px;
}

section.pd-highlights.about .pd-highlight-box p {
  color: #a0aec0 !important;
  /* Sophisticated muted grey */
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

/* =============================================================
   KORLAPARTHI MOBILE RESPONSIVENESS FIX
   ============================================================= */

@media (max-width: 767px) {

  /* 1. Tighten section padding */
  section.pd-highlights.about {
    padding: 50px 15px !important;
  }

  /* 2. Smaller title to fit screen width */
  section.pd-highlights.about .pd-title {
    font-size: 32px !important;
    margin-bottom: 30px !important;
  }

  /* 3. Force the 2x2 Grid Layout */
  section.pd-highlights.about .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Two equal columns */
    gap: 12px !important;
    margin: 0 !important;
  }

  /* 4. Reset Bootstrap column widths */
  section.pd-highlights.about .col-md-3,
  section.pd-highlights.about .col-sm-6 {
    width: 100% !important;
    padding: 0 !important;
  }

  /* 5. Mobile Glass Card Styling */
  section.pd-highlights.about .pd-highlight-box {
    padding: 20px 10px !important;
    min-height: 140px !important;
    /* Ensures uniform height */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.75) !important;
    /* Slightly darker for mobile glare */
  }

  /* 6. Adjust font sizes for small cards */
  section.pd-highlights.about .pd-highlight-box h3 {
    font-size: 24px !important;
    margin-bottom: 2px !important;
  }

  section.pd-highlights.about .pd-highlight-box p {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
}

/* Extra small screen adjustment for very narrow phones */
@media (max-width: 380px) {
  section.pd-highlights.about .row {
    grid-template-columns: 1fr !important;
    /* Single column on tiny screens */
  }
}

/* =============================================================
   INDEPENDENT BLOG TITLE OVERRIDE (Shrunk for Premium Look)
   ============================================================= */

/* =========================================
   PREMIUM BLOG HERO ALIGNMENT FIX
   ========================================= */

/* Desktop Refinement */
.main-header.blog-hero-title {
  text-align: right !important;
  padding-left: 20vmin !important;
  /* Reduced to prevent text squishing */
  padding-right: 5% !important;
}

.blog-hero-title h1 {
  font-size: 5.5vmin !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em !important;
  margin: 0 !important;
}

/* Mobile Alignment Fix (Tablet & Phones) */
@media (max-width: 991px) {
  .main-header.blog-hero-title {
    text-align: center !important;
    /* Centers text for better mobile balance */
    padding-left: 15px !important;
    /* Resets the massive desktop padding */
    padding-right: 15px !important;
    padding-top: 120px !important;
    /* Pushes text below the logo */
  }

  .blog-hero-title h1 {
    font-size: 7vmin !important;
    /* Scales text to fit the screen width */
    max-width: 100% !important;
    margin-right: 0 !important;
    /* Removes the right-aligned offset */
    letter-spacing: 0.05em !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8) !important;
  }
}

/* Specific Fix for Small Phones */
@media (max-width: 480px) {
  .blog-hero-title h1 {
    font-size: 28px !important;
    /* Fixed size for maximum legibility */
    line-height: 1.3 !important;
  }
}

.col-message {
  display: none;
}

.col-message .success-message {
  color: #155724;
  font-weight: 500;
}

.col-message .error-message {
  color: #721c24;
}

/* Form validation error messages */

label.error {
  color: #d9534f;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  margin-top: 6px;
  display: block;
}

input.error,
textarea.error,
select.error {
  border: 1px solid #d9534f !important;
}

.form-message {
  margin-top: 15px;
  font-family: 'Montserrat', sans-serif;
  display: none;
}

.form-message.success {
  display: block;
  color: #155724;
}

.form-message.error {
  display: block;
  color: #721c24;
}


/* =========================================================
   FARMLAND JOURNEY SECTION
========================================================= */

/* Base Section Styling */
.nf-farmland-steps-section {
  background-color: #f4e6d2;
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #3e2723;
}

.nf-farmland-steps-container {
  max-width: 1200px;
  margin: 0 auto;
}

.nf-farmland-steps-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  /* Increased to give more breathing room */
  color: #033E3E;
  font-weight: 700;
}

/* Horizontal Grid Wrapper */
.nf-farmland-horizontal-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 40px;
  /* Increased gap to prevent crowding */
}

/* Individual Step (FIXED: Now a Flex column to prevent overflow) */
.nf-farmland-step {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Horizontal Connecting Line */
.nf-farmland-step::after {
  content: '';
  position: absolute;
  top: 30px;
  /* Aligns with the middle of the 60px icon */
  left: 50%;
  width: 100%;
  height: 2px;
  /* Thinner, cleaner line */
  background-color: #d7ccc8;
  z-index: 1;
}

/* Remove line from the last item in each row */
.nf-farmland-step:nth-child(3n)::after {
  display: none;
}

/* The Number Circles */
.nf-farmland-step-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px auto;
  /* Increased bottom margin for better spacing */
  background-color: #5d4037;
  border: 4px solid #fcfaf8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  /* Keeps circle above the connecting line */
}

/* The Content Boxes (FIXED: removed height:100%, added flex:1) */
.nf-farmland-step-content {
  padding: 25px 20px;
  background-color: #FFF9E9;
  border-radius: 8px;
  border: 1px solid #efebe5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
  /* This tells the box to fill available space safely */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.nf-farmland-step-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.nf-farmland-step-content h3 {
  margin-top: 0;
  color: #033E3E;
  font-size: 1.25rem;
  margin-bottom: 15px;
}

.nf-farmland-step-content p {
  margin: 0;
  line-height: 1.6;
  color: #5d4037;
  font-size: 0.95rem;
}

/* Footer Quote (FIXED: Added more top margin so it clears the boxes) */
.nf-farmland-steps-footer {
  text-align: center;
  margin-top: 80px;
  font-size: 1.2rem;
  font-style: italic;
  color: #6d4c41;
  padding: 0 20px;
}

/* --- Responsive Media Queries --- */

/* Tablet view: 2 items per row */
@media screen and (max-width: 992px) {
  .nf-farmland-horizontal-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reset previous line hiding rule */
  .nf-farmland-step:nth-child(3n)::after {
    display: block;
  }

  /* Hide line on every 2nd item instead */
  .nf-farmland-step:nth-child(2n)::after {
    display: none;
  }
}

/* Mobile view: Stack vertically */
@media screen and (max-width: 768px) {
  .nf-farmland-horizontal-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Remove horizontal lines completely on mobile */
  .nf-farmland-step::after {
    display: none !important;
  }

  .nf-farmland-steps-title {
    font-size: 2rem;
  }
}