/* ============================================================
   PREMIUM CINEMATIC NAVBAR
   Inspired by Interra Design Reference
============================================================ */

/* =========================================
NAVBAR
========================================= */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  height: 110px;

  padding: 0 clamp(22px, 4vw, 60px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  /* Replaced with the exact luxury deep olive gradient fading to transparent */
  
background: linear-gradient(to bottom, rgb(81 96 54 / 98%) 0%, /* Rich deep green at the very top */ rgb(74 89 51 / 85%) 35%, /* Smooth shading starts here */ rgb(91 103 66) 65%, /* Dropping opacity quickly for clarity */ rgb(91 99 63) 85%, /* Ultra-thin mist layer */ rgb(90 101 62) 100% /* 100% crystal clear at the very bottom */);  /* Keeps the elegant frosted glass texture underneath the fade */
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  /* A very soft, subtle gold/champagne border as seen in your original code */
  /*border-bottom: 1px solid rgba(228, 212, 170, 0.08);*/

  /* Softened the shadow to keep it looking clean and modern */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);

  overflow: visible;

  transition:
    background 0.45s ease,
    box-shadow 0.45s ease,
    height 0.4s ease;
}

/* =========================================
SCROLLED NAV
========================================= */

nav.nav-scrolled{

  height:88px;

 background: linear-gradient(to bottom, rgb(81 96 54 / 98%) 0%, /* Rich deep green at the very top */ rgb(74 89 51 / 85%) 35%, /* Smooth shading starts here */ rgb(91 103 66) 65%, /* Dropping opacity quickly for clarity */ rgb(91 99 63) 85%, /* Ultra-thin mist layer */ rgb(90 101 62) 100% /* 100% crystal clear at the very bottom */);  /* Keeps the elegant frosted glass texture underneath the fade */


  /*box-shadow:*/
  /*  0 10px 50px rgba(0,0,0,0.42);*/
}

/* =========================================
GLOW LINE
========================================= */

nav::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  /*height:1px;*/

  /*background:*/
  /*  linear-gradient(*/
  /*    90deg,*/
  /*    transparent,*/
  /*    rgba(215,190,128,0.7),*/
  /*    transparent*/
  /*  );*/
}

/* =========================================
LOGO
========================================= */

.nL{
  display:flex;
  align-items:center;

  flex-shrink:0;

  position:relative;

  z-index:10;
}

.nLogoImg{
  height:76px;
  width:auto;

  object-fit:contain;

  transition:
    transform 0.4s ease,
    filter 0.35s ease;
}

.nLogoImg:hover{
  transform:scale(1.03);

  filter:
    drop-shadow(
      0 0 20px rgba(215,190,128,0.28)
    );
}

/* =========================================
RIGHT SIDE
========================================= */

.nR{
  display:flex;
  align-items:center;

  gap:16px;
}

/* =========================================
LINK WRAPPER
========================================= */

.nLinks{
  display:flex;
  align-items:center;
  gap:0px;
}

/* =========================================
PREMIUM PILLS
========================================= */

.nPill{
  position: relative;
    min-width: 170px;
    height: 44px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgb(238 209 139 / 41%);
    box-shadow: inset 0 1px 0 rgba(214, 191, 146, 0.95);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

}

/* =========================================
PILL SHINE
========================================= */

.nPill::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.18) 50%,
      transparent 100%
    );

  transform:translateX(-120%);

  transition:transform 0.65s ease;
}

.nPill:hover::before{
  transform:translateX(120%);
}

/* =========================================
PILL HOVER
========================================= */

.nPill:hover{

  transform:translateY(-2px);

  border-color:
    rgba(226,206,157,0.45);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04)
    );

  box-shadow:
    0 8px 28px rgba(0,0,0,0.22),
    0 0 18px rgba(215,190,128,0.14);
}

/* =========================================
PILL TEXT
========================================= */

.nPill span{

  position:relative;
  z-index:2;

  font-family:"Raleway",sans-serif;

  font-size:10px;
  font-weight:500;

  letter-spacing:0.24em;

  text-transform:uppercase;

  color:
    rgba(255,248,232,0.92);

  white-space:nowrap;

  transition:
    letter-spacing 0.35s ease,
    color 0.35s ease;
}

.nPill:hover span{
  letter-spacing:0.30em;

  color:#fff7e8;
}

/* =========================================
DIVIDER
========================================= */

.nDivider{
  width:1px;
  height:30px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(215,190,128,0.42),
      transparent
    );

  margin:0 8px;
}

/* =========================================
MENU BUTTON
========================================= */

.nHamPill{
  position:relative;

  width:78px;
  height:44px;

  border:none;
  outline:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  border-radius:999px;

  cursor:pointer;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(234,218,179,0.98),
      rgba(214,191,146,0.95)
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================
MENU BUTTON GLOW
========================================= */

.nHamPill::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.35),
      transparent
    );

  transform:translateX(-120%);

  transition:transform 0.65s ease;
}

.nHamPill:hover::before{
  transform:translateX(120%);
}

.nHamPill:hover{
  transform:translateY(-2px);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.28);
}

/* =========================================
MENU LINES
========================================= */

.nHamLine{
  width:24px;
  height:1.8px;

  border-radius:999px;

  background:
    rgba(58,42,18,0.85);

  transition:
    width 0.3s ease,
    transform 0.3s ease;
}

.nHamLine--short{
  width:14px;
}

.nHamPill:hover .nHamLine--short{
  width:22px;
}

/* =========================================
MOBILE BUTTON
========================================= */

.mobileMenuBtn2{
  display:none;

  width:44px;
  height:44px;

  border:none;

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      rgba(234,218,179,1),
      rgba(214,191,146,0.95)
    );

  align-items:center;
  justify-content:center;
  flex-direction:column;

  gap:5px;

  cursor:pointer;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.18);
}

.mobileMenuBtn2 b{
  width:18px;
  height:1.6px;

  border-radius:999px;

  background:#3b2c15;
}

/* =========================================
MOBILE MENU
========================================= */

.mobileMenu{
  display:none;

  position:fixed;

  inset:0;

  z-index:99999;

  background:
    linear-gradient(
      180deg,
      rgba(25,28,18,0.98),
      rgba(12,14,10,0.99)
    );

  backdrop-filter:blur(20px);

  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:28px;

  opacity:0;

  transition:opacity 0.4s ease;
}

.mobileMenu.open{
  opacity:1;
}

.mobileMenu a{
  position:relative;

  font-family:
    "Cormorant Garamond",
    serif;

    font-size: clamp(28px, 2vw, 40px);

  font-style:italic;

  font-weight:300;

  letter-spacing:0.08em;

  color:#f7ecd7;

  text-decoration:none;

  transition:
    color 0.3s ease,
    letter-spacing 0.35s ease;
}

.mobileMenu a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-2px;

  width:0;
  height:1px;

  background:#d8c08b;

  transition:width 0.35s ease;
}

.mobileMenu a:hover{
  color:#fff6e7;

  letter-spacing:0.14em;
}

.mobileMenu a:hover::after{
  width:100%;
}

/* =========================================
MOBILE CLOSE
========================================= */

.mobileMenuClose{
  position:absolute;

  top:24px;
  right:24px;

  width:44px;
  height:44px;

  border-radius:12px;

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

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

  color:#fff;

  font-size:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.mobileMenuClose:hover{
  transform:rotate(90deg);

  background:
    rgba(255,255,255,0.08);
}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width:1200px){

  .nPill{
    min-width:150px;
    padding:0 18px;
  }

}

@media (max-width:992px){

  .nPill{
    min-width:130px;
  }

}

@media (max-width:768px){

  nav{
    height:76px;
    padding:0 20px;
  }

  .nLogoImg{
    height:54px;
  }

  .nR{
    display:none !important;
  }

  .mobileMenuBtn2{
    display:flex;
  }

  .footer-tagline,
  .footer-caption{
    display:none;
  }

}



/* about hero */

.from-\[\#b08a66\] {
    --tw-gradient-from: #d9c59c var(--tw-gradient-from-position) !important;
}



/*floating icons*/

/* Base */
.btn-floating:hover img {
  margin-bottom: -3px
}

.btn-floating {
    position: fixed;
    right: 25px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    border: 0;
    z-index: 9999;
    color: white;
    transition: .2s;
}

.btn-floating:hover {
    width: auto;
    padding: 0 20px;
    cursor: pointer;
}

.btn-floating span {
    font-size: 16px;
    margin-left: 5px;
    transition: .2s;
    line-height: 0px;
    display: none;
}

.btn-floating:hover span {
    display: inline-block;
}

/* Phone */
.btn-floating.phone {
    bottom: 85px;
    background-color: #760f10;
}

.btn-floating.phone:hover {
    background-color: #c03421;
}

/* WhatsApp */
.btn-floating.whatsapp {
    background-color: #34af23;
    bottom: 25px;
}

.btn-floating.whatsapp:hover {
    background-color: #1f7a12
}
.float-btn{
    display:unset;
}

@media (max-width: 769px) {
.mbl-nPill{
    background:#fff;
    color:black;
}
}

.mbl-nPill{
    background:#fff;
        color:black;

}



 /* ═════════ DESIGN GUIDE LEAD MODAL ═════════ */
        #leadModal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 999999;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(6px);
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        #leadModal.active { display: flex; }

        .lead-modal-box {
            background: #fff;
            border-radius: 20px;
            padding: 44px 40px 36px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
            position: relative;
            font-family: 'Raleway', sans-serif;
            animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes modalIn {
            from { opacity: 0; transform: translateY(24px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .lead-modal-close {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #aaa;
            line-height: 1;
            transition: color .2s;
        }

        .lead-modal-close:hover { color: #333; }

        .lead-modal-eyebrow {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .35em;
            text-transform: uppercase;
            color: #B8960C;
            margin-bottom: 10px;
        }

        .lead-modal-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 28px;
            font-weight: 500;
            color: #0C2B1A;
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .lead-modal-sub {
            font-size: 13px;
            font-weight: 300;
            color: #666;
            margin-bottom: 28px;
            line-height: 1.7;
        }

        .lead-field { margin-bottom: 16px; }

        .lead-label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #0C2B1A;
            margin-bottom: 6px;
        }

        .lead-input,
        .lead-select,
        .lead-textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 11px 16px;
            border: 1.5px solid #e0dbd0;
            border-radius: 10px;
            font-size: 14px;
            font-family: 'Raleway', sans-serif;
            color: #1a1a1a;
            background: #faf9f6;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }

        .lead-input:focus,
        .lead-select:focus,
        .lead-textarea:focus {
            border-color: #B8960C;
            box-shadow: 0 0 0 3px rgba(184, 150, 12, 0.12);
            background: #fff;
        }

        .lead-textarea { resize: vertical; min-height: 88px; }

        .lead-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        @media(max-width:480px) {
            .lead-row { grid-template-columns: 1fr; }
            .lead-modal-box { padding: 38px 22px 28px; }
        }

        .lead-error {
            display: none;
            color: #c0392b;
            font-size: 12px;
            margin-bottom: 10px;
            padding: 10px 14px;
            background: #fdf0ee;
            border-radius: 8px;
            border-left: 3px solid #c0392b;
        }

        .lead-submit-btn {
            width: 100%;
            padding: 14px;
            background: #0C2B1A;
            color: #F5ECC8;
            border: none;
            border-radius: 10px;
            font-family: 'Raleway', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background .25s, transform .2s;
            margin-top: 4px;
        }

        .lead-submit-btn:hover:not(:disabled) {
            background: #B8960C;
            transform: translateY(-1px);
        }

        .lead-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

        #leadModal, #leadModal * { cursor: auto !important; }
        #leadModal button, #leadModal select, #leadModal .lead-submit-btn, #leadModal .lead-modal-close { cursor: pointer !important; }
        #leadModal input, #leadModal textarea { cursor: text !important; }
        body.lead-modal-open #cur, body.lead-modal-open #cuf { display: none !important; opacity: 0 !important; visibility: hidden !important; }

/*model css ends here*/