/* ============================================================
   Veda Nadi Jyotish Karyalay — style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Raleway:wght@300;400;500;600;700&display=swap');

/* ---- Variables ---- */
:root {
   --red: #8B1A1A;
   --red-dark: #5C0E0E;
   --red-deep: #3A0808;
   --red-light: #B84040;
   --gold: #C8960C;
   --gold-light: #E8B84D;
   --cream: #FDF6EC;
   --cream-2: #F5E8D0;
   --text: #1A0A0A;
   --text-mid: #4A2020;
   --text-light: #7A5050;
   --white: #FFFFFF;
   --sh-sm: 0 2px 14px rgba(139, 26, 26, 0.10);
   --sh-md: 0 6px 30px rgba(139, 26, 26, 0.16);
   --sh-lg: 0 14px 50px rgba(139, 26, 26, 0.22);
   --radius: 12px;
   --r-sm: 6px;
   --tr: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---- Reset ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
   font-family: 'Raleway', sans-serif;
   background: var(--cream);
   color: var(--text);
   overflow-x: hidden;
   line-height: 1.75;
}

body,
section,
header,
footer,
nav {
   max-width: 100%;
}

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

::-webkit-scrollbar {
   width: 6px;
}

::-webkit-scrollbar-track {
   background: var(--cream-2);
}

::-webkit-scrollbar-thumb {
   background: var(--red);
   border-radius: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Cinzel', serif;
   line-height: 1.3;
   color: var(--red-dark);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
   background: var(--red-dark);
   color: rgba(255, 255, 255, .8);
   font-size: .78rem;
   padding: 7px 0;
   border-bottom: 2px solid var(--gold);
   letter-spacing: .03em;
}

.topbar a {
   color: var(--gold-light);
   text-decoration: none;
   transition: var(--tr);
}

.topbar a:hover {
   color: #fff;
}

.topbar .sep {
   color: rgba(255, 255, 255, .25);
   margin: 0 8px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.site-nav {
   background: var(--white);
   position: sticky;
   top: 0;
   z-index: 1050;
   border-bottom: 3px solid var(--gold);
   box-shadow: var(--sh-md);
}

.brand-wrap {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
}

.brand-logo {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: 2px solid var(--gold);
   box-shadow: 0 0 0 4px rgba(200, 150, 12, .12);
   object-fit: cover;
   flex-shrink: 0;
}

.brand-text .b-title {
   font-family: 'Cinzel', serif;
   font-size: .95rem;
   font-weight: 700;
   color: var(--red-dark);
   line-height: 1.2;
}

.brand-text .b-sub {
   font-size: .66rem;
   color: var(--gold);
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.navbar-nav .nav-link {
   font-family: 'Cinzel', serif;
   font-size: 16px;
   font-weight: 700;
   color: var(--text) !important;
   padding: 1.4rem .78rem !important;
   letter-spacing: .04em;
   position: relative;
   transition: var(--tr);
}

.navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 3px;
   background: var(--gold);
   border-radius: 3px 3px 0 0;
   transition: var(--tr);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: var(--red) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
   width: 70%;
}

.navbar-toggler {
   border: 2px solid var(--red);
   padding: 5px 9px;
   border-radius: var(--r-sm);
}

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%238B1A1A' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
   .navbar-collapse {
      background: #fff;
      border-top: 2px solid var(--gold);
      padding: 8px 0;
   }

   .navbar-nav .nav-link {
      padding: .7rem 1rem !important;
   }

   .navbar-nav .nav-link::after {
      display: none;
   }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-red {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
   color: #fff;
   border: none;
   padding: 12px 28px;
   border-radius: var(--r-sm);
   font-family: 'Cinzel', serif;
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-decoration: none;
   box-shadow: 0 4px 18px rgba(139, 26, 26, .32);
   transition: var(--tr);
   cursor: pointer;
}

.btn-red:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 26px rgba(139, 26, 26, .42);
   color: #fff;
   background: linear-gradient(135deg, var(--red-light), var(--red));
}

.btn-outline-w {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: #fff;
   border: 2px solid rgba(255, 255, 255, .65);
   padding: 11px 26px;
   border-radius: var(--r-sm);
   font-family: 'Cinzel', serif;
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-decoration: none;
   transition: var(--tr);
   cursor: pointer;
}

.btn-outline-w:hover {
   background: rgba(255, 255, 255, .12);
   border-color: #fff;
   color: #fff;
   transform: translateY(-2px);
}

.btn-gold {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(135deg, var(--gold) 0%, #a07000 100%);
   color: #fff;
   border: none;
   padding: 12px 28px;
   border-radius: var(--r-sm);
   font-family: 'Cinzel', serif;
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-decoration: none;
   box-shadow: 0 4px 18px rgba(200, 150, 12, .28);
   transition: var(--tr);
   cursor: pointer;
}

.btn-gold:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(200, 150, 12, .4);
   color: #fff;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-hdr {
   text-align: center;
   margin-bottom: 52px;
}

.sec-hdr .eyebrow {
   display: inline-block;
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 9px;
}

.sec-hdr h2 {
   font-size: clamp(1.5rem, 4vw, 2.25rem);
   font-weight: 700;
   margin-bottom: 13px;
}

.ornament {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 11px;
   margin-bottom: 13px;
}

.ornament .ln {
   width: 48px;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--gold));
   border-radius: 2px;
}

.ornament .ln.r {
   background: linear-gradient(to left, transparent, var(--gold));
}

.ornament i {
   color: var(--gold);
   font-size: .9rem;
}

.sec-hdr p {
   color: var(--text-light);
   max-width: 570px;
   margin: 0 auto;
   font-size: .9rem;
}

/* ============================================================
      HERO CAROUSEL (HOME PAGE)
      ============================================================ */
#heroCarousel {
   overflow: hidden;
}

.hero-slide {
   min-height: 88vh;
   position: relative;
   
   align-items: center;
   overflow: hidden;
}

.hero-slide::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(125deg, rgba(0, 0, 0, 0.815) 0%, rgba(0, 0, 0, 0.418) 45%, rgba(0, 0, 0, 0.384) 100%);
   z-index: 1;
}

.hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
}

.hero-layer {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 20% 50%, rgba(200, 150, 12, .07) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(200, 150, 12, .05) 0%, transparent 40%);
   z-index: 2;
}

.hero-content {
   position: relative;
   z-index: 3;
   padding: 90px 0 70px;
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: rgba(200, 150, 12, .15);
   border: 1px solid rgba(200, 150, 12, .45);
   color: var(--gold-light);
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   padding: 5px 16px;
   border-radius: 30px;
   margin-bottom: 20px;
   backdrop-filter: blur(4px);
}

.hero-title {
   font-size: clamp(1.75rem, 5.5vw, 3.3rem);
   font-weight: 900;
   color: #fff;
   text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
   line-height: 1.2;
   margin-bottom: 13px;
}

.hero-title span {
   color: var(--gold-light);
}

.hero-sub {
   font-size: clamp(.92rem, 2.2vw, 1.2rem);
   color: rgba(255, 255, 255, .82);
   font-weight: 300;
   margin-bottom: 8px;
}

.hero-desc {
   font-size: .9rem;
   color: rgba(255, 255, 255, .68);
   max-width: 520px;
   margin-bottom: 30px;
   line-height: 1.85;
}

.hero-div {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px;
}

.hero-div span {
   width: 52px;
   height: 2px;
   background: var(--gold);
   border-radius: 2px;
}

.hero-div i {
   color: var(--gold);
   font-size: .95rem;
}

.hero-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

/* Ornament ring – desktop only */
.hero-orn {
   position: absolute;
   right: 6%;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;
   display: none;
}

@media (min-width: 1100px) {
   .hero-orn {
      display: block;
   }
}

.orn-ring {
   width: 250px;
   height: 250px;
   border: 2px solid rgba(200, 150, 12, .28);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: sping 22s linear infinite;
}

.orn-ring::before {
   content: '';
   position: absolute;
   inset: 14px;
   border: 1px dashed rgba(200, 150, 12, .22);
   border-radius: 50%;
}

.orn-inner {
   width: 158px;
   height: 158px;
   background: rgba(200, 150, 12, .1);
   border-radius: 50%;
   border: 1px solid rgba(200, 150, 12, .42);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   animation: sping 22s linear infinite reverse;
   backdrop-filter: blur(4px);
}

.orn-inner i {
   font-size: 2rem;
   color: var(--gold-light);
   margin-bottom: 5px;
}

.orn-inner span {
   color: #fff;
   font-size: .68rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   font-family: 'Cinzel', serif;
}

@keyframes sping {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* Controls */
.carousel-control-prev,
.carousel-control-next {
   width: 44px;
   height: 44px;
   background: rgba(200, 150, 12, .75);
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   margin: 0 16px;
   opacity: 1;
   border: none;
   transition: var(--tr);
   position: absolute;
   /* ADD THIS */
   z-index: 10;
   /* ADD THIS — above hero overlay layers */
   bottom: auto;
   /* ADD THIS — reset Bootstrap's default */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
   background: var(--gold);
   transform: translateY(-50%) scale(1.1);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
   width: 16px;
   height: 16px;
}



.carousel-indicators {
   bottom: 22px;
   z-index: 100;
}

.carousel-indicators [data-bs-target] {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(200, 150, 12, .45);
   border: none;
   transition: var(--tr);
   cursor: pointer;
   z-index: 100;
}

.carousel-indicators .active {
   background: var(--gold);
   width: 26px;
   border-radius: 5px;
}




.carousel-indicators {
   bottom: 22px;
}

.carousel-indicators [data-bs-target] {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(200, 150, 12, .45);
   border: none;
   transition: var(--tr);
}

.carousel-indicators .active {
   background: var(--gold);
   width: 26px;
   border-radius: 5px;
}

/* Animations per slide */
.carousel-item .hero-badge,
.carousel-item .hero-title,
.carousel-item .hero-sub,
.carousel-item .hero-desc,
.carousel-item .hero-div,
.carousel-item .hero-btns {
   opacity: 0;
   transform: translateY(26px);
}

.carousel-item.active .hero-badge {
   animation: fup .55s .10s forwards;
}

.carousel-item.active .hero-title {
   animation: fup .55s .22s forwards;
}

.carousel-item.active .hero-sub {
   animation: fup .55s .34s forwards;
}

.carousel-item.active .hero-desc {
   animation: fup .55s .46s forwards;
}

.carousel-item.active .hero-div {
   animation: fup .55s .56s forwards;
}

.carousel-item.active .hero-btns {
   animation: fup .55s .66s forwards;
}

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

@media (max-width: 767.98px) {
   .hero-slide {
      min-height: 90vh;
      padding: 12px;
   }

   .hero-content {
      padding: 80px 0 60px;
   }

   .hero-btns {
      flex-direction: column;
   }

   .hero-btns a {
      justify-content: center;
   }

   .carousel-control-prev {
      left: -6px;
   }

   .carousel-control-next {
      right: -6px;
   }

   .carousel-control-prev,
   .carousel-control-next {
      width: 38px;
      height: 38px;
      margin: 0 8px;
   }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-strip {
   background: linear-gradient(90deg, var(--red-dark) 0%, var(--red) 50%, var(--red-dark) 100%);
   color: var(--gold-light);
   padding: 11px 0;
   overflow: hidden;
   border-top: 2px solid var(--gold);
   border-bottom: 2px solid var(--gold);
   font-size: .83rem;
   font-weight: 600;
   letter-spacing: .04em;
   white-space: nowrap;
}

.marquee-track {
   display: inline-flex;
   animation: marquee 32s linear infinite;
}

.marquee-track span {
   padding: 0 28px;
}

.marquee-track span i {
   color: var(--gold);
   margin-right: 6px;
}

@keyframes marquee {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band {
   background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);
   padding: 54px 0;
   position: relative;
   overflow: hidden;
}

.stats-band::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23c8960c' opacity='.06'/%3E%3C/svg%3E");
}

.stat-box {
   text-align: center;
   padding: 14px 10px;
   position: relative;
   z-index: 1;
}

.stat-num {
   font-family: 'Cinzel', serif;
   font-size: clamp(2rem, 5vw, 2.9rem);
   font-weight: 900;
   color: var(--gold-light);
   line-height: 1;
   margin-bottom: 6px;
}

.stat-lbl {
   font-size: .72rem;
   color: rgba(255, 255, 255, .62);
   letter-spacing: .1em;
   text-transform: uppercase;
   font-weight: 600;
}

/* ============================================================
   PAGE INNER HERO
   ============================================================ */
.page-hero {
   position: relative;
   min-height: 260px;
   display: flex;
   align-items: center;
   overflow: hidden;
}

.page-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, rgba(92, 14, 14, .92) 0%, rgba(26, 5, 5, .85) 100%);
   z-index: 1;
}

.page-hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}

.page-hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
   color: #fff;
   padding: 55px 0;
}

.page-hero-content h1 {
   font-size: clamp(1.7rem, 4.5vw, 2.8rem);
   color: #fff;
   margin-bottom: 11px;
}

.page-hero-content p {
   font-size: .9rem;
   color: rgba(255, 255, 255, .68);
   max-width: 520px;
   margin: 0 auto 14px;
}

.breadcrumb {
   background: none;
   justify-content: center;
   padding: 0;
   margin: 0;
}

.breadcrumb-item a {
   color: var(--gold-light);
   text-decoration: none;
   font-size: .8rem;
}

.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before {
   color: rgba(255, 255, 255, .45);
   font-size: .8rem;
}

@media (max-width: 575.98px) {
   .page-hero {
      min-height: 200px;
   }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-section {
   background: var(--white);
   padding: 88px 0;
}

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

.about-img-main {
   width: 100%;
   height: 400px;
   object-fit: cover;
   border-radius: var(--radius);
   box-shadow: var(--sh-lg);
   border: 3px solid var(--cream-2);
}

.about-float {
   position: absolute;
   bottom: 20px;
   left: -14px;
   background: var(--red-dark);
   color: #fff;
   border-radius: var(--radius);
   padding: 14px 18px;
   box-shadow: var(--sh-md);
   border: 2px solid var(--gold);
   text-align: center;
   min-width: 115px;
}

.about-float .num {
   font-family: 'Cinzel', serif;
   font-size: 1.8rem;
   font-weight: 900;
   color: var(--gold-light);
   line-height: 1;
}

.about-float .lbl {
   font-size: .65rem;
   color: rgba(255, 255, 255, .72);
   letter-spacing: .06em;
   text-transform: uppercase;
   margin-top: 3px;
}

.about-lead {
   border-left: 4px solid var(--gold);
   padding-left: 15px;
   color: var(--red);
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.7;
   margin-bottom: 18px;
}

.about-text {
   color: var(--text-mid);
   font-size: .9rem;
   line-height: 1.9;
   margin-bottom: 13px;
}

.feat-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9px;
   margin-top: 20px;
}

.feat-item {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   padding: 9px 11px;
   background: var(--cream);
   border-radius: var(--r-sm);
   border: 1px solid rgba(200, 150, 12, .16);
}

.feat-item i {
   color: var(--gold);
   font-size: .9rem;
   margin-top: 2px;
   flex-shrink: 0;
}

.feat-item span {
   font-size: .8rem;
   color: var(--text-mid);
   font-weight: 500;
}

.val-card {
   background: var(--cream);
   border-radius: var(--radius);
   padding: 26px 20px;
   text-align: center;
   border: 1px solid rgba(200, 150, 12, .14);
   box-shadow: var(--sh-sm);
   transition: var(--tr);
   height: 100%;
}

.val-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--sh-md);
   border-color: rgba(200, 150, 12, .3);
}

.val-icon {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, var(--red), var(--red-dark));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
   border: 2px solid var(--gold);
}

.val-icon i {
   font-size: 1.35rem;
   color: #fff;
}

.val-card h4 {
   font-size: .92rem;
   color: var(--red-dark);
   margin-bottom: 7px;
}

.val-card p {
   font-size: .8rem;
   color: var(--text-light);
   line-height: 1.7;
   margin: 0;
}

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

   .about-float {
      left: 8px;
   }

   .about-img-main {
      height: 280px;
   }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.services-section {
   background: var(--cream);
   padding: 88px 0;
}

.svc-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   height: 100%;
   border: 1px solid rgba(200, 150, 12, .13);
   box-shadow: var(--sh-sm);
   transition: var(--tr);
}

.svc-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--sh-lg);
   border-color: rgba(200, 150, 12, .3);
}

.svc-img {
   position: relative;
   overflow: hidden;
}

.svc-img img {
   width: 100%;
   height: 195px;
   object-fit: cover;
   transition: transform .5s ease;
}

.svc-card:hover .svc-img img {
   transform: scale(1.07);
}

.svc-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(92, 14, 14, .65) 0%, transparent 55%);
   opacity: 0;
   transition: var(--tr);
}

.svc-card:hover .svc-overlay {
   opacity: 1;
}

.svc-body {
   padding: 20px 18px 22px;
}

.svc-ic {
   width: 46px;
   height: 46px;
   background: var(--cream);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid rgba(200, 150, 12, .2);
   margin-bottom: 13px;
   transition: var(--tr);
}

.svc-card:hover .svc-ic {
   background: linear-gradient(135deg, var(--red), var(--red-dark));
   border-color: var(--gold);
}

.svc-ic i {
   font-size: 1.15rem;
   color: var(--red);
   transition: var(--tr);
}

.svc-card:hover .svc-ic i {
   color: #fff;
}

.svc-body h4 {
   font-size: 20px;
   color: var(--red-dark);
   margin-bottom: 7px;
   font-weight: 600;
}

.svc-body p {
   font-size: 15px;
   color: var(--text-light);
   line-height: 1.7;
   margin: 0;
   font-weight: 400;
}

/* ============================================================
   WHY US BAND
   ============================================================ */
.why-band {
   background: var(--red-dark);
   padding: 88px 0;
   position: relative;
   overflow: hidden;
}

.why-band::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 10% 20%, rgba(200, 150, 12, .08) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(200, 150, 12, .06) 0%, transparent 40%);
}

.why-card {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(200, 150, 12, .17);
   border-radius: var(--radius);
   padding: 28px 20px;
   text-align: center;
   transition: var(--tr);
   height: 100%;
   backdrop-filter: blur(4px);
   position: relative;
   z-index: 1;
}

.why-card:hover {
   background: rgba(200, 150, 12, .09);
   border-color: var(--gold);
   transform: translateY(-6px);
   box-shadow: 0 10px 36px rgba(200, 150, 12, .12);
}

.why-ic {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, var(--gold), #a07000);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
}

.why-ic i {
   font-size: 1.35rem;
   color: #fff;
}

.why-card h4 {
   font-size: 18px;
   color: var(--gold-light);
   margin-bottom: 7px;
   font-weight: 600;
}

.why-card p {
   font-size: .8rem;
   color: rgba(255, 255, 255, .58);
   margin: 0;
   line-height: 1.7;
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps-section {
   background: linear-gradient(135deg, var(--cream) 0%, var(--cream-2) 100%);
   padding: 88px 0;
}

.step-box {
   text-align: center;
   padding: 26px 16px;
   position: relative;
}

.step-num {
   width: 52px;
   height: 52px;
   background: var(--red-dark);
   color: var(--gold-light);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Cinzel', serif;
   font-size: 1.1rem;
   font-weight: 900;
   margin: 0 auto 14px;
   border: 3px solid var(--gold);
   position: relative;
   z-index: 1;
}

.step-line {
   position: absolute;
   top: 39px;
   left: calc(50% + 32px);
   right: calc(-50% + 32px);
   height: 2px;
   background: linear-gradient(90deg, var(--gold), rgba(200, 150, 12, .15));
   z-index: 0;
}

.step-box:last-child .step-line {
   display: none;
}

.step-box h4 {
   font-weight: 600;
   font-size: 18px;
   color: var(--red-dark);
   margin-bottom: 7px;
}

.step-box p {
   font-size: .8rem;
   color: var(--text-light);
   line-height: 1.7;
}

@media (max-width: 767.98px) {
   .step-line {
      display: none;
   }
}

/* ============================================================
   GURUJI CARD
   ============================================================ */
.guruji-section {
   background: var(--white);
   padding: 88px 0;
}

.guruji-card {
   background: var(--cream);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--sh-lg);
   border: 2px solid var(--gold);
   display: flex;
   flex-wrap: wrap;
}

.gj-left {
   background: linear-gradient(180deg, var(--red-dark) 0%, var(--red) 100%);
   padding: 42px 32px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex: 0 0 265px;
   min-width: 230px;
}

.gj-avatar {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   border: 4px solid var(--gold);
   object-fit: cover;
   box-shadow: 0 0 0 8px rgba(200, 150, 12, .12);
   margin-bottom: 16px;
}

.gj-name {
   font-family: 'Cinzel', serif;
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 3px;
   text-align: center;
}

.gj-title-text {
   font-size: .68rem;
   color: var(--gold-light);
   letter-spacing: .1em;
   text-transform: uppercase;
   text-align: center;
}

.gj-stars {
   color: var(--gold);
   margin-top: 9px;
   font-size: .82rem;
}

.gj-meta {
   margin-top: 14px;
   font-size: .76rem;
   color: rgba(255, 255, 255, .58);
   text-align: center;
   line-height: 1.9;
}

.gj-meta i {
   color: var(--gold);
   margin-right: 4px;
}

.gj-right {
   padding: 38px 34px;
   flex: 1;
   min-width: 0;
}

.gj-right h3 {
   font-size: 1.45rem;
   color: var(--red-dark);
   margin-bottom: 4px;
}

.gj-tagline {
   color: var(--gold);
   font-size: .92rem;
   font-weight: 600;
   margin-bottom: 16px;
}

.gj-right p {
   color: var(--text-mid);
   font-size: .9rem;
   line-height: 1.9;
   margin-bottom: 11px;
}

.tags-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 16px;
}

.etag {
   background: var(--red-dark);
   color: var(--gold-light);
   padding: 4px 12px;
   border-radius: 20px;
   font-size: .7rem;
   font-weight: 600;
   border: 1px solid var(--gold);
}

@media (max-width: 991.98px) {
   .guruji-card {
      flex-direction: column;
   }

   .gj-left {
      flex: none;
      width: 100%;
      padding: 30px 22px;
   }
}

@media (max-width: 575.98px) {
   .gj-right {
      padding: 26px 18px;
   }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-section {
   background: var(--cream);
   padding: 88px 0;
}

.testi-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 36px 22px;
   height: 100%;
   border: 1px solid rgba(200, 150, 12, .15);
   box-shadow: var(--sh-sm);
   transition: var(--tr);
   position: relative;
}

.testi-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh-md);
   border-color: var(--gold);
}

.testi-card::before {
   content: '\201C';
   position: absolute;
   top: 4px;
   left: 20px;
   font-size: 4.2rem;
   color: var(--gold);
   font-family: Georgia, serif;
   line-height: 1;
   opacity: .32;
}

.testi-stars {
   color: var(--gold);
   font-size: .8rem;
   margin-bottom: 12px;
}

.testi-text {
   font-size: .86rem;
   color: var(--text-mid);
   line-height: 1.85;
   margin-bottom: 16px;
   padding-top: 12px;
}

.testi-auth {
   display: flex;
   align-items: center;
   gap: 11px;
}

.auth-av {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 1.05rem;
   font-weight: 700;
   font-family: 'Cinzel', serif;
   flex-shrink: 0;
}

.auth-name {
   font-family: 'Cinzel', serif;
   font-weight: 700;
   font-size: .83rem;
   color: var(--red-dark);
}

.auth-place {
   font-size: .72rem;
   color: var(--text-light);
   margin-top: 1px;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section {
   background: var(--white);
   padding: 88px 0;
}

.gal-item {
   overflow: hidden;
   border-radius: var(--radius);
   position: relative;
   cursor: pointer;
   box-shadow: var(--sh-sm);
   border: 2px solid rgba(200, 150, 12, .12);
   transition: var(--tr);
}

.gal-item img {
   width: 100%;
   height: 215px;
   object-fit: cover;
   display: block;
   transition: transform .5s ease;
}

.gal-item:hover {
   border-color: rgba(200, 150, 12, .35);
   box-shadow: var(--sh-md);
}

.gal-item:hover img {
   transform: scale(1.07);
}

.gal-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(92, 14, 14, .8) 0%, transparent 55%);
   opacity: 0;
   display: flex;
   align-items: flex-end;
   padding: 15px;
   transition: var(--tr);
}

.gal-item:hover .gal-overlay {
   opacity: 1;
}

.gal-lbl {
   color: #fff;
   font-size: .78rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 5px;
}

.gal-lbl i {
   color: var(--gold-light);
}

/* Lightbox */
.lightbox {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .93);
   z-index: 9999;
   align-items: center;
   justify-content: center;
}

.lightbox.open {
   display: flex;
}

.lightbox img {
   max-width: 90vw;
   max-height: 85vh;
   border-radius: var(--radius);
   border: 2px solid var(--gold);
   box-shadow: var(--sh-lg);
}

.lb-close {
   position: absolute;
   top: 16px;
   right: 18px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(200, 150, 12, .75);
   border: none;
   color: #fff;
   font-size: 1.45rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--tr);
   line-height: 1;
}

.lb-close:hover {
   background: var(--gold);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section {
   background: var(--cream);
   padding: 88px 0;
}

.accordion-item {
   border: 1px solid rgba(200, 150, 12, .17);
   border-radius: var(--radius) !important;
   margin-bottom: 9px;
   overflow: hidden;
   box-shadow: var(--sh-sm);
}

.accordion-button {
   font-family: 'Cinzel', serif;
   font-size: .86rem;
   font-weight: 600;
   color: var(--red-dark);
   background: var(--cream);
   padding: 16px 20px;
   border: none !important;
   box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
   background: var(--red-dark);
   color: var(--gold-light);
}

.accordion-body {
   font-size: .86rem;
   color: var(--text-mid);
   line-height: 1.85;
   background: var(--white);
   padding: 16px 20px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
   background: var(--cream);
   padding: 88px 0;
}

.info-card {
   background: var(--red-dark);
   border-radius: var(--radius);
   padding: 36px 28px;
   color: #fff;
   height: 100%;
   border: 2px solid var(--gold);
   box-shadow: var(--sh-lg);
   position: relative;
   overflow: hidden;
}

.info-card::before {
   content: '';
   position: absolute;
   top: -30%;
   right: -15%;
   width: 240px;
   height: 240px;
   border-radius: 50%;
   background: rgba(200, 150, 12, .06);
}

.info-card h3 {
   font-size: 1.3rem;
   color: var(--gold-light);
   margin-bottom: 4px;
}

.info-tagline {
   font-size: .8rem;
   color: rgba(255, 255, 255, .55);
   margin-bottom: 24px;
}

.ci {
   display: flex;
   align-items: flex-start;
   gap: 13px;
   margin-bottom: 18px;
}

.ci-ic {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(200, 150, 12, .11);
   border: 1px solid var(--gold);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: .9rem;
   color: var(--gold-light);
}

.ci-lbl {
   font-size: .65rem;
   color: rgba(255, 255, 255, .42);
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 1px;
}

.ci-val {
   font-size: .88rem;
   color: #fff;
   font-weight: 500;
   line-height: 1.5;
}

.ci-val a {
   color: var(--gold-light);
   text-decoration: none;
   transition: var(--tr);
}

.ci-val a:hover {
   color: #fff;
}

.info-social {
   display: flex;
   gap: 8px;
   margin-top: 22px;
}

.soc-btn {
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(200, 150, 12, .26);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold-light);
   font-size: .9rem;
   text-decoration: none;
   transition: var(--tr);
}

.soc-btn:hover {
   background: var(--gold);
   color: #fff;
   transform: translateY(-3px);
   border-color: var(--gold);
}

.form-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 36px 28px;
   box-shadow: var(--sh-md);
   border: 1px solid rgba(139, 26, 26, .13);
   height: 100%;
}

.form-card h3 {
   font-size: 1.3rem;
   color: var(--red-dark);
   margin-bottom: 20px;
}

.form-label {
   font-size: .72rem;
   font-weight: 700;
   color: var(--text-mid);
   letter-spacing: .05em;
   text-transform: uppercase;
   margin-bottom: 5px;
}

.form-control,
.form-select {
   border: 1px solid rgba(139, 26, 26, .17);
   border-radius: var(--r-sm);
   padding: 10px 14px;
   font-size: .87rem;
   color: var(--text);
   background: var(--cream);
   transition: var(--tr);
}

.form-control:focus,
.form-select:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(200, 150, 12, .1);
   background: #fff;
   outline: none;
}

textarea.form-control {
   min-height: 105px;
   resize: vertical;
}

@media (max-width: 575.98px) {

   .info-card,
   .form-card {
      padding: 24px 16px;
   }
}

/* MAP */
.map-frame {
   width: 100%;
   height: 360px;
   border: none;
   display: block;
   filter: sepia(8%) contrast(95%);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
   background: var(--red-deep);
   color: rgba(255, 255, 255, .7);
   padding: 62px 0 0;
}

.foot-brand {
   font-family: 'Cinzel', serif;
   font-size: 1.02rem;
   color: var(--gold-light);
   font-weight: 700;
   margin-bottom: 4px;
}

.foot-sub {
   font-size: .65rem;
   color: var(--gold);
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 11px;
}

.foot-desc {
   font-size: .8rem;
   line-height: 1.8;
   color: rgba(255, 255, 255, .48);
   margin-bottom: 16px;
}

footer h5 {
   font-family: 'Cinzel', serif;
   font-size: .82rem;
   color: var(--gold-light);
   letter-spacing: .06em;
   margin-bottom: 14px;
   padding-bottom: 6px;
   border-bottom: 1px solid rgba(200, 150, 12, .16);
}

.foot-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.foot-links li {
   margin-bottom: 8px;
}

.foot-links a {
   color: rgba(255, 255, 255, .5);
   text-decoration: none;
   font-size: .8rem;
   display: flex;
   align-items: center;
   gap: 7px;
   transition: var(--tr);
}

.foot-links a i {
   font-size: .62rem;
   color: var(--gold);
}

.foot-links a:hover {
   color: var(--gold-light);
   padding-left: 3px;
}

.foot-ci {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin-bottom: 11px;
   font-size: .8rem;
}

.foot-ci i {
   color: var(--gold);
   font-size: .82rem;
   margin-top: 3px;
   flex-shrink: 0;
}

.foot-ci a {
   color: rgba(255, 255, 255, .52);
   text-decoration: none;
}

.foot-ci a:hover {
   color: var(--gold-light);
}

.foot-bottom {
   background: rgba(0, 0, 0, .3);
   padding: 15px 0;
   margin-top: 46px;
   border-top: 1px solid rgba(200, 150, 12, .11);
   font-size: .74rem;
   color: rgba(255, 255, 255, .33);
}

.foot-bottom a {
   color: var(--gold);
   text-decoration: none;
}

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.float-wrap {
   position: fixed;
   bottom: 24px;
   right: 16px;
   z-index: 2000;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
}

.fb {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   text-decoration: none;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
   transition: var(--tr);
   position: relative;
}

.fb:hover {
   transform: scale(1.12) translateY(-3px);
}

.fb-call {
   background: var(--red);
   color: #fff;
   animation: pulse 2.5s ease-in-out infinite;
}

.fb-wa {
   background: #25D366;
   color: #fff;
}

.fb-top {
   background: var(--gold);
   color: #fff;
   width: 39px;
   height: 39px;
   font-size: .88rem;
   opacity: 0;
   pointer-events: none;
   transition: var(--tr);
}

.fb-top.show {
   opacity: 1;
   pointer-events: all;
}

.fb-tip {
   position: absolute;
   right: 56px;
   background: rgba(10, 2, 2, .85);
   color: #fff;
   font-size: .68rem;
   padding: 3px 9px;
   border-radius: 4px;
   white-space: nowrap;
   opacity: 0;
   transition: var(--tr);
   pointer-events: none;
}

.fb:hover .fb-tip {
   opacity: 1;
}

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 4px 16px rgba(139, 26, 26, .4);
   }

   50% {
      box-shadow: 0 4px 24px rgba(139, 26, 26, .65), 0 0 0 8px rgba(139, 26, 26, .1);
   }
}

@media (max-width: 575.98px) {
   .fb {
      width: 45px;
      height: 45px;
      font-size: 1.15rem;
   }

   .float-wrap {
      bottom: 16px;
      right: 12px;
   }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .65s ease, transform .65s ease;
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

/* ============================================================
   GLOBAL SPACING & OVERFLOW SAFEGUARD
   ============================================================ */
.overflow-safe {
   overflow: hidden;
}
@media(max-width:424px)
{
	.brand-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}
.navbar-brand{
	margin-right:0px;
}
}