:root {
   --g: #173b2b;
   --g2: #28543d;
   --c: #fffaf0;
   --gold: #d8aa56;
   --gold2: #f1d28f;
   --ink: #1f2c25;
   --muted: #68766e;
   --soft: #f5f2e9
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   background: var(--soft);
   color: var(--ink);
   font-family: "Arima", sans-serif
}

h1,
h2,
h3,
.brand,
.display-font {
   font-family: "Arima", serif
}

a {
   text-decoration: none
}

.site-nav {
   background: rgba(18, 55, 39, .97);
   box-shadow: 0 8px 30px #0002
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff !important;
   font-size: 1.45rem;
   line-height: 1
}

.brand small {
   display: block;
   font: 500 .57rem "Arima";
   letter-spacing: .12em;
   color: #d9d2bd;
   margin-top: 5px
}

.brand-icon {
   width: 42px;
   height: 42px;
   border: 1px solid #f1d28f99;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: var(--gold2)
}

.nav-link {
   color: #fffc !important;
   font-size: .9rem
}

.cart-badge {
   display: inline-grid;
   place-items: center;
   min-width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: .7rem;
   background: var(--gold);
   color: var(--g)
}

.btn-gold {
   background: linear-gradient(135deg, #f4d991, #d6a94d);
   color: #173b2b;
   border: 0;
   font-weight: 700;
   border-radius: 999px
}

.hero {
   min-height: 650px;
   display: flex;
   align-items: center;
   position: relative;
   background: linear-gradient(110deg, #092a1bdd, #0c2d1f77), url("../images/hero-background.png") center/cover
}

.hero-content {
   max-width: 760px;
   color: #fff;
   padding: 90px 0
}

.kicker {
   font-size: .76rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: #efd18c;
   font-weight: 700
}

.hero h1 {
   font-size: clamp(3.2rem, 7vw, 6.4rem);
   line-height: .95;
   margin: 14px 0 22px
}

.hero p {
   font-size: 1.08rem;
   line-height: 1.8;
   color: #ffffffda;
   max-width: 650px
}

.section {
   padding: 90px 0
}

.section-title {
   font-size: clamp(2.3rem, 4vw, 4rem);
   line-height: 1.05
}

.section-lead {
   color: var(--muted);
   max-width: 700px
}

.glass-card,
.feature-card,
.product-card {
   background: #ffffffe8;
   border: 1px solid #fff;
   box-shadow: 0 18px 50px #1a302512;
   border-radius: 28px
}

.glass-card {
   padding: 34px
}

.feature-card {
   padding: 28px;
   height: 100%;
   transition: .25s
}

.feature-card:hover,
.product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 25px 60px #1a302521
}

.feature-icon {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   background: #e7f0e8;
   color: var(--g2);
   font-size: 25px;
   margin-bottom: 18px
}

.product-card {
   height: 100%;
   overflow: hidden;
   transition: .25s
}

.product-image {
   height: 220px;
   background: linear-gradient(135deg, #dfeadd, #f3eee1);
   display: grid;
   place-items: center;
   font-size: 72px;
   color: #477456
}

.product-body {
   padding: 25px
}

.price {
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--g2)
}

.badge-soft {
   background: #e9f0e8;
   color: #2c6040;
   border-radius: 999px;
   padding: 7px 11px;
   font-size: .72rem;
   font-weight: 700
}

.btn-outline-green {
   border: 1px solid #406a50;
   color: #28543d;
   border-radius: 999px;
   font-weight: 600
}

.split-hero {
   background: linear-gradient(110deg, #153c2b, #28543d);
   color: #fff;
   border-radius: 36px;
   padding: 55px
}

.gallery-img {
   width: 100%;
   height: 240px;
   object-fit: cover;
   border-radius: 22px
}

.booking-panel {
   position: relative;
   margin-top: -70px;
   z-index: 3
}

.form-control,
.form-select {
   border-radius: 14px;
   padding: .75rem 1rem;
   border: 1px solid #ddd5c4
}

.site-footer {
   background: #143627;
   color: #fff
}

.site-footer a {
   display: block;
   color: #ffffffb3;
   margin: 7px 0
}

.site-footer h6 {
   color: #eed08b
}

.brand-footer {
   color: #fff
}

.table-clean {
   border-radius: 20px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 12px 40px #0000000f
}

.table-clean th {
   background: #173b2b;
   color: #fff;
   padding: 14px
}

.table-clean td {
   padding: 14px;
   vertical-align: middle
}

.auth-shell {
   min-height: 78vh;
   display: grid;
   place-items: center;
   padding: 70px 0;
   background: radial-gradient(circle at 20% 20%, #e6f0e5, transparent 30%), #f7f4ec
}

.auth-card {
   max-width: 480px;
   width: 100%;
   padding: 42px;
   background: #fff;
   border-radius: 30px;
   box-shadow: 0 25px 70px #1b38201f
}

@media(max-width:767px) {
   .hero {
      min-height: 580px
   }

   .hero-content {
      padding: 70px 0
   }

   .section {
      padding: 65px 0
   }

   .split-hero {
      padding: 35px 25px
   }

   .booking-panel {
      margin-top: -35px
   }

   .product-image {
      height: 190px
   }
}

/* =========================================================
   Sri Ambal premium landing page (merged from sri-ambal-home)
   ========================================================= */
.landing-page {
   position: relative;
   min-height: 100vh;
   overflow: hidden;
   isolation: isolate;
   color: #fff;
   background-image: linear-gradient(115deg, rgba(11, 40, 26, .76), rgba(12, 40, 28, .42) 42%, rgba(30, 22, 12, .58)), url('../images/landing-background.png');
   background-size: cover;
   background-position: center;
   background-attachment: fixed
}

.landing-page .background-overlay {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: radial-gradient(circle at 50% 10%, rgba(255, 224, 153, .18), transparent 35%), linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(5, 20, 13, .55));
   pointer-events: none
}

.landing-page .ambient {
   position: absolute;
   z-index: -1;
   width: 28rem;
   height: 28rem;
   border-radius: 50%;
   filter: blur(90px);
   opacity: .16;
   pointer-events: none
}

.landing-page .ambient-one {
   top: -12rem;
   left: -10rem;
   background: #f1d28b
}

.landing-page .ambient-two {
   right: -12rem;
   bottom: -12rem;
   background: #7ebd7f
}

.landing-page .hero-section {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: 35px 20px 30px
}

.landing-page .hero-container {
   position: relative;
   max-width: 1280px;
   margin: auto
}

.landing-page .brand-block {
   margin: 0 auto 42px;
   max-width: 850px;
   text-align: center;
   animation: saFadeUp .9s ease both
}

.landing-page .brand-mark {
   width: 58px;
   height: 58px;
   margin: 0 auto 14px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 224, 157, .55);
   border-radius: 50%;
   color: #f1d28b;
   background: rgba(20, 54, 37, .55);
   box-shadow: 0 8px 35px rgba(0, 0, 0, .18);
   font-size: 25px;
   backdrop-filter: blur(8px)
}

.landing-page .brand-kicker,
.landing-page .eyebrow {
   text-transform: uppercase;
   letter-spacing: .22em;
   font-size: .72rem;
   font-weight: 600
}

.landing-page .brand-kicker {
   color: #f6dda5;
   margin-bottom: 3px
}

.landing-page .brand-block h1 {
   margin: 0;
   font-family: 'Arima', serif;
   font-size: clamp(3.5rem, 8vw, 7rem);
   line-height: .9;
   font-weight: 600;
   letter-spacing: -.035em;
   text-shadow: 0 8px 30px rgba(0, 0, 0, .3)
}

.landing-page .brand-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin: 18px auto 12px
}

.landing-page .brand-divider span {
   width: 70px;
   height: 1px;
   background: linear-gradient(to right, transparent, rgba(244, 211, 145, .85))
}

.landing-page .brand-divider span:last-child {
   background: linear-gradient(to left, transparent, rgba(244, 211, 145, .85))
}

.landing-page .brand-divider i {
   color: #f1d28b;
   font-size: .8rem
}

.landing-page .brand-tagline {
   margin: 0;
   font-size: clamp(.95rem, 2vw, 1.18rem);
   color: rgba(255, 250, 239, .88);
   letter-spacing: .02em
}

.landing-page .business-grid {
   animation: saFadeUp 1s .18s ease both
}

.landing-page .business-card {
   position: relative;
   min-height: 355px;
   padding: 48px 44px 42px;
   overflow: hidden;
   border: 1px solid rgba(255, 246, 218, .38);
   border-radius: 30px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .07)), rgba(19, 59, 39, .42);
   box-shadow: 0 24px 70px rgba(16, 38, 23, .28);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.landing-page .business-card::before {
   content: '';
   position: absolute;
   inset: 1px;
   border-radius: 29px;
   background: linear-gradient(130deg, rgba(255, 255, 255, .18), transparent 38%, rgba(239, 199, 112, .08));
   pointer-events: none
}

.landing-page .business-card:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 225, 157, .68);
   box-shadow: 0 30px 80px rgba(9, 31, 19, .42)
}

.landing-page .card-glow {
   position: absolute;
   width: 190px;
   height: 190px;
   top: -100px;
   right: -80px;
   border-radius: 50%;
   background: rgba(240, 204, 121, .17);
   filter: blur(10px)
}

.landing-page .business-icon {
   width: 66px;
   height: 66px;
   display: grid;
   place-items: center;
   margin-bottom: 25px;
   border: 1px solid rgba(255, 222, 150, .45);
   border-radius: 20px;
   color: #f1d28b;
   background: rgba(10, 45, 28, .5);
   font-size: 30px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
   position: absolute;
   right: 15px;
   top: 15px;
}

.landing-page .business-content {
   position: relative;
   z-index: 2;
   max-width: 560px
}

.landing-page .eyebrow {
   color: #f0d18e
}

.landing-page .business-card h2 {
   margin: 7px 0 13px;
   font-family: 'Arima', serif;
   font-size: clamp(1.9rem, 3.2vw, 2.65rem);
   line-height: 1.1;
   font-weight: 600;
   color: #fffaf0
}

.landing-page .business-card p {
   margin: 0 0 28px;
   max-width: 530px;
   color: rgba(255, 252, 244, .84);
   font-size: 1rem;
   line-height: 1.75
}

.landing-page .explore-btn {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   min-height: 50px;
   padding: 0 20px 0 22px;
   color: #203b2a;
   background: linear-gradient(135deg, #fff5d4, #e6bf6d);
   border: 0;
   border-radius: 999px;
   font-size: .95rem;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
   transition: all .25s ease
}

.landing-page .explore-btn i {
   width: 31px;
   height: 31px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(32, 59, 42, .12);
   transition: transform .25s ease
}

.landing-page .explore-btn:hover {
   color: #162d20;
   transform: translateY(-2px);
   box-shadow: 0 14px 32px rgba(0, 0, 0, .25)
}

.landing-page .explore-btn:hover i {
   transform: rotate(45deg)
}

.landing-page .card-decoration {
   position: absolute;
   right: 26px;
   bottom: 22px;
   display: flex;
   align-items: flex-end;
   gap: 15px;
   color: rgba(238, 205, 133, .18);
   font-size: 48px;
   transform: rotate(-8deg)
}

.landing-page .card-decoration i:nth-child(2) {
   font-size: 72px;
   transform: translateY(-18px)
}

.landing-page .page-footer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-top: 34px;
   color: rgba(255, 249, 233, .66);
   font-size: .78rem;
   letter-spacing: .06em;
   text-align: center;
   animation: saFadeUp 1s .32s ease both
}

.landing-page .footer-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #f1d28b
}

@keyframes saFadeUp {
   from {
      opacity: 0;
      transform: translateY(22px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@media(max-width:991.98px) {
   .landing-page .hero-section {
      padding-top: 40px
   }

   .landing-page .business-card {
      min-height: 330px;
      padding: 38px 34px
   }

   .landing-page {
      background-attachment: scroll;
      background-position: 57% center
   }
}

@media(max-width:575.98px) {
   .landing-page .hero-section {
      padding: 38px 15px 24px
   }

   .landing-page .brand-block {
      margin-bottom: 30px
   }

   .landing-page .brand-block h1 {
      font-size: clamp(3.2rem, 17vw, 5rem)
   }

   .landing-page .brand-tagline {
      padding: 0 15px;
      line-height: 1.6
   }

   .landing-page .business-card {
      min-height: 350px;
      padding: 30px 26px;
      border-radius: 24px
   }

   .landing-page .business-card::before {
      border-radius: 23px
   }

   .landing-page .business-icon {
      width: 58px;
      height: 58px;
      margin-bottom: 20px
   }

   .landing-page .business-card h2 {
      font-size: 1.85rem
   }

   .landing-page .business-card p {
      font-size: .92rem;
      line-height: 1.65
   }

   .landing-page .card-decoration {
      opacity: .7;
      right: 12px;
      bottom: 10px;
      font-size: 35px
   }

   .landing-page .card-decoration i:nth-child(2) {
      font-size: 55px
   }

   .landing-page .page-footer {
      flex-direction: column;
      gap: 5px;
      margin-top: 25px;
      padding-bottom: 10px
   }

   .landing-page .footer-dot {
      display: none
   }
}

@media(prefers-reduced-motion:reduce) {
   .landing-page * {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important
   }
}


/* Google language selector */
.language-switcher {
   display: flex;
   align-items: center;
   gap: .45rem;
   padding: .2rem .35rem;
   border: 1px solid rgba(255, 255, 255, .20);
   border-radius: 999px;
   background: rgba(255, 255, 255, .08);
}

.language-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   color: #f5d98a;
   font-size: 1rem;
}

#google_translate_element {
   min-width: 112px;
}

#google_translate_element .goog-te-gadget {
   font-family: 'Arima', sans-serif !important;
   font-size: 0 !important;
   white-space: nowrap;
}

#google_translate_element .goog-te-gadget-simple {
   display: flex !important;
   align-items: center;
   gap: .3rem;
   height: 32px;
   padding: 0 .55rem !important;
   border: 0 !important;
   border-radius: 999px !important;
   background: transparent !important;
   color: #fff !important;
   font-family: 'Arima', sans-serif !important;
}

#google_translate_element .goog-te-gadget-simple span {
   color: #fff !important;
   font-size: .78rem !important;
}

#google_translate_element .goog-te-gadget-simple img {
   display: none !important;
}

#google_translate_element select {
   max-width: 125px;
   border: 0;
   outline: 0;
   background: transparent;
   color: inherit;
}

.goog-te-banner-frame.skiptranslate {
   display: none !important;
}

body {
   top: 0 !important;
}

body>.skiptranslate {
   display: none !important;
}

.landing-language {
   position: absolute;
   z-index: 30;
   top: 22px;
   right: 28px;
   display: flex;
   align-items: center;
   gap: .35rem;
   padding: .25rem .4rem;
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 999px;
   background: rgba(17, 35, 22, .40);
   backdrop-filter: blur(12px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
   color: #fff;
}

.landing-language #google_translate_element {
   min-width: 116px;
}

@media (max-width: 767.98px) {
   .landing-language {
      top: 14px;
      right: 14px;
   }

   .landing-language #google_translate_element {
      min-width: 104px;
   }

   .language-switcher {
      margin: .55rem 0;
      width: max-content;
   }
}