*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0

}



:root {

  --gold: #C49A2A;

  --gold2: #E8C96A;

  --gold3: #FBF2DC;

  --dark: #12090A;

  --dark2: #1E1208;

  --ink: #2C1F10;

  --muted: #7B6540;

  --cream: #FAF6EE;

  --white: #FFFDF8;

  --border: rgba(196, 154, 42, 0.18);

  --border2: rgba(196, 154, 42, 0.35);

}



html {

  scroll-behavior: smooth

}



body {

  font-family: 'Outfit', sans-serif;

  background: var(--cream);

  color: var(--ink);

  overflow-x: hidden

}



/* GREETING */

.greeting {

  background: var(--dark2);

  text-align: center;

  padding: 7px 1rem;

  font-family: 'Cormorant Garamond', serif;

  font-size: 0.9rem;

  letter-spacing: 0.25em;

  color: var(--gold2)

}



/* NAV */

nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 200;

  background: rgba(250, 246, 238, 0.96);

  backdrop-filter: blur(16px);

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

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 3.5rem;

  height: 68px;

  transition: top 0.3s;

  display: flex;

  align-items: center;

}



nav.scrolled {

  top: 0

}



.nav-brand {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  margin-top: 4rem;

  background: #faf6ee;

  padding: 4px;

}



.nav-brand img {

  width: 126px;

  /* object-fit:contain; */

}



.nav-brand-text {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--gold);

  letter-spacing: 0.05em

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 0.2rem;

  list-style: none;

  margin: 0;

}



.nav-links li a {

  font-size: 0.72rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--muted);

  text-decoration: none;

  padding: 0.4rem 0.9rem;

  border-radius: 2px;

  transition: color 0.2s, background 0.2s

}



.nav-links li a:hover,

.nav-links li a.active {

  color: var(--gold)

}



.nav-sep {

  color: var(--border2);

  font-size: 0.7rem;

  padding: 0 0.1rem

}



.nav-cta {

  background: var(--gold);

  color: #fff;

  padding: 0.5rem 1.4rem;

  border-radius: 2px;

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  font-weight: 600;

  text-decoration: none;

  transition: background 0.2s, transform 0.1s;

  white-space: nowrap

}



.nav-cta:hover {

  background: #fbf2dc;

  color: #000;

  box-shadow: 0 0 1px;

}



.hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  cursor: pointer;

  padding: 4px

}



.hamburger span {

  width: 22px;

  height: 2px;

  background: var(--gold);

  border-radius: 2px;

  transition: 0.3s

}



/* HERO */

img {

  width: 100%;

}



.banner {

  height: auto;

  margin-top: 4rem;

}



.cubeSwiper {

  height: 100%;

  width: 41vh;

}



.cubeSwiper img {

  height: 100%;

  object-fit: cover;

}



/* SECTION COMMON */

section {

  padding: 6rem 3.5rem

}



.section-inner {

  max-width: 88%;

  margin: 0 auto

}



.section-label {

  font-size: 0.62rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 600;

  margin-bottom: 0.9rem

}



.section-title {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 4vw, 3.2rem);

  font-weight: 700;

  color: var(--dark);

  line-height: 1.12;

  margin-bottom: 1rem

}



.section-title em {

  color: var(--gold);

  font-style: normal

}



.section-body {

  font-size: 0.92rem;

  color: var(--muted);

  line-height: 1.3;

  max-width: 100%;

}



.moreTextBtn {

  cursor: pointer;

  font-weight: bold;

}



.moreText {

  display: none;

}



/* ABOUT SECTION */

.about-section {

  background: var(--white)

}



.about-grid {

  display: grid;

  align-items: start

}



.about-text p {

  font-size: 0.92rem;

  color: var(--muted);

  line-height: 1.3;

  margin-bottom: 1.2rem

}



.vm-cards {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  margin-top: 2rem

}



.vm-card {

  background: var(--gold3);

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

  border-radius: 4px;

  padding: 1.8rem

}



.vm-card-label {

  font-size: 0.6rem;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 600;

  margin-bottom: 0.5rem

}



.vm-card h3 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.6rem

}



.vm-card p {

  font-size: 0.85rem;

  color: var(--muted);

  line-height: 1.85

}



.mission-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.65rem;

  margin-top: 0.6rem

}



.mission-list li {

  font-size: 0.82rem;

  color: var(--muted);

  line-height: 1.7;

  display: flex;

  gap: 0.7rem;

  align-items: flex-start

}



.mission-list li::before {

  content: "—";

  color: var(--gold);

  font-weight: 700;

  flex-shrink: 0;

  margin-top: 1px

}



/* WHY SECTION */

.why-section {

  background: var(--gold3);

}



.why-section .section-title {

  color: #25231f;

}



.why-section .section-body {

  color: rgb(6 6 6 / 50%);

}



.why-section .section-label {

  color: #917d40;

}



.why-grid {

  display: grid;

  /* grid-template-columns:1fr 1fr; */

  gap: 2.5rem;

  align-items: center

}



.why-cards {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  text-align: center;

}



.why-card {

  /* background: rgba(196, 154, 42, 0.06); */

  border-right: 1px solid rgba(196, 154, 42, 0.15);

  border-radius: 4px;

  padding: 1.6rem;

  transition: background 0.25s

}

.why-card:nth-child(4)

{

  border-right: none;

}

.why-card:hover {

  background: rgba(196, 154, 42, 0.12)

}

.carousel-control-next-icon  {

    background-image: url(../images/download.svg);

}

.carousel-control-prev-icon  {

    background-image: url(../images/download1.svg);

}

.gatherings

{

    margin: auto;

    text-align: center;

    margin-top: 25px;

}

.why-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 103px;

  margin: auto;

  margin-bottom: 1rem;

}



.why-icon svg {

  width: 180px;

  height: 180px;

  stroke: var(--gold2);

  fill: none;

  stroke-width: 1.5;

  background: rgba(196, 154, 42, 0.12);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.why-card h3 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.05rem;

  font-weight: 600;

  color: #000000;

  margin-bottom: 0.4rem

}



.why-card p {

  font-size: 0.78rem;

  color: rgb(0 0 0 / 42%);

  line-height: 1.3

}



/* STAKEHOLDERS */

.stake-section {

  background: var(--white);

}



.stake-grid {

  display: grid;

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

  gap: 1.5rem;

  margin-top: 3.5rem

}



.stake-card {

  background: var(--white);

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

  border-radius: 4px;

  padding: 2rem;

  position: relative;

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s

}



.stake-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: var(--gold);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s

}



.stake-card:hover::before {

  transform: scaleX(1)

}



.stake-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 48px rgba(18, 9, 10, 0.1)

}



.stake-num {

  font-family: 'Cormorant Garamond', serif;

  font-size: 2.8rem;

  font-weight: 700;

  color: rgb(4 4 3 / 18%);

  line-height: 1;

  margin-bottom: 0.8rem

}



.stake-card h3 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.7rem

}



.stake-card p {

  font-size: 0.82rem;

  color: var(--muted);

  line-height: 1.3

}



/* MEMBERSHIP */

.membership-section {

  background: var(--gold3);

}



.mem-grid {

  display: grid;

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

  gap: 1.2rem;

  margin-top: 3.5rem

}



.mem-card {

  background: var(--cream);

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

  border-radius: 4px;

  padding: 1.8rem 1.4rem;

  text-align: center;

  transition: box-shadow 0.2s, transform 0.2s

}



.mem-card:hover {

  box-shadow: 0 12px 40px rgba(18, 9, 10, 0.08);

  transform: translateY(-3px)

}



.mem-num {

  font-family: 'Cormorant Garamond', serif;

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--gold2);

  line-height: 1;

  margin-bottom: 0.8rem

}



.mem-card h3 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.5rem

}



.mem-card p {

  font-size: 0.78rem;

  color: var(--muted);

  line-height: 1.3

}



/* GROWTH */

.growth-section {

  background: var(--cream)

}



.growth-stats {

  display: grid;

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

  gap: 1px;

  background: var(--border);

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

  border-radius: 4px;

  overflow: hidden;

  margin-bottom: 5rem

}



.gstat {

  background: var(--cream);

  padding: 2.2rem 1.5rem;

  text-align: center

}



.gstat-num {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 3.5vw, 3rem);

  font-weight: 700;

  color: var(--gold);

  line-height: 1;

  margin-bottom: 0.5rem

}



.gstat-label {

  font-size: 0.7rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted);

  font-weight: 500

}



.growth-two {

  display: grid;

  grid-template-columns: 1fr 1.4fr;

  gap: 5rem;

  align-items: start

}



.timeline {

  position: relative;

  padding-left: 2rem

}



.timeline::before {

  content: '';

  position: absolute;

  left: 0;

  top: 8px;

  bottom: 8px;

  width: 1px;

  background: var(--border2)

}



.tl-item {

  position: relative;

  padding: 0 0 2.8rem 2.5rem

}



.tl-item:last-child {

  padding-bottom: 0

}



.tl-dot {

  position: absolute;

  left: -2.02rem;

  top: 6px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

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

  background: var(--cream);

  transform: translateX(50%)

}



.tl-year {

  font-size: 0.62rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 600;

  margin-bottom: 0.3rem

}



.tl-title {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.4rem

}



.tl-body {

  font-size: 0.82rem;

  color: var(--muted);

  line-height: 1.3

}



/* EVENTS */

.events-section {

  background: var(--white);

}



.events-section .section-title {

  color: #1a1a18;

}



.events-section .section-label {

  color: var(--gold2)

}



.events-section .section-body {

  color: rgb(0 0 0 / 45%);

}



.events-grid {

  display: grid;

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

  gap: 1.5rem;

  margin-top: 3.5rem

}



.ev-card {

  border: 1px solid rgba(196, 154, 42, 0.18);

  border-radius: 4px;

  overflow: hidden;

  transition: border-color 0.2s

}



.ev-card:hover {

  border-color: rgba(196, 154, 42, 0.45)

}



.ev-top {

  background: rgba(196, 154, 42, 0.07);

  padding: 2rem

}



.ev-badge {

  font-size: 0.6rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gold2);

  background: rgba(196, 154, 42, 0.14);

  padding: 0.28rem 0.8rem;

  border-radius: 2px;

  display: inline-block;

  margin-bottom: 1rem

}



.ev-card h3 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--cream);

  line-height: 1.3;

  margin-bottom: 0.6rem

}



.ev-sub {

  font-size: 0.72rem;

  color: rgba(250, 246, 238, 0.28);

  letter-spacing: 0.08em;

  text-transform: uppercase

}



.ev-bottom {

  padding: 1rem 2rem;

  border-top: 1px solid rgba(196, 154, 42, 0.1);

  display: flex;

  align-items: center;

  justify-content: space-between

}



.ev-bar {

  flex: 1;

  height: 4px;

  border-radius: 2px;

  background: rgba(196, 154, 42, 0.08);

  margin-right: 1rem

}



.ev-action {

  font-size: 0.65rem;

  color: rgba(250, 246, 238, 0.22);

  letter-spacing: 0.1em;

  text-transform: uppercase

}



/* FAQ */

.faq-section {

  background: var(--gold3)

}



.faq-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

  margin-top: 3.5rem

}



.faq-item {

  background: var(--white);

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

  border-radius: 4px;

  overflow: hidden

}



.faq-q {

  padding: 1.4rem 1.6rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  user-select: none

}



.faq-q span {

  font-size: 0.88rem;

  font-weight: 500;

  color: var(--ink);

  line-height: 1.3

}



.faq-icon {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: var(--gold3);

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

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: background 0.2s, transform 0.3s

}



.faq-icon svg {

  width: 10px;

  height: 10px;

  stroke: var(--gold);

  fill: none;

  stroke-width: 2.5;

  transition: transform 0.3s

}



.faq-item.open .faq-icon {

  background: var(--gold)

}



.faq-item.open .faq-icon svg {

  stroke: #fff;

  transform: rotate(45deg)

}



.faq-a {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease, padding 0.3s

}



.faq-a p {

  padding: 0 1.6rem 1.4rem;

  font-size: 0.82rem;

  color: var(--muted);

  line-height: 1.3

}



.faq-item.open .faq-a {

  max-height: 300px

}



/* CONTACT */

.contact-section {

  background: var(--white)

}



.contact-inner {

  max-width: 860px;

  margin: 0 auto;

  text-align: center

}



.contact-cards {

  display: grid;

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

  gap: 1.2rem;

  margin-top: 3rem

}



.cc {

  background: var(--cream);

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

  border-radius: 4px;

  padding: 2rem 1.2rem;

  text-align: center

}



.cc-icon {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--gold3);

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

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1rem

}



.cc-icon svg {

  width: 18px;

  height: 18px;

  stroke: var(--gold);

  fill: none;

  stroke-width: 1.5

}



.cc h4 {

  font-size: 0.65rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 0.4rem

}



.cc p {

  font-size: 0.85rem;

  color: var(--ink);

  line-height: 1.3

}



/* CTA BANNER */

.cta-section {

  background: var(--gold);

  text-align: center;

  padding: 5.5rem 3.5rem

}



.cta-section h2 {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2rem, 4vw, 3.5rem);

  font-weight: 700;

  color: #fff;

  margin-bottom: 0.6rem

}



.cta-section p {

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

  font-size: 0.9rem;

  margin-bottom: 2rem

}



.btn-white {

  background: #fff;

  color: var(--gold);

  padding: 0.85rem 2.4rem;

  border-radius: 2px;

  font-size: 0.75rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  font-weight: 600;

  text-decoration: none;

  display: inline-block;

  transition: background 0.2s, color 0.2s

}



.btn-white:hover {

  background: var(--dark);

  color: #fff

}



/* FOOTER */

footer {

  background: var(--gold3);

  padding: 3rem 3.5rem;

  border-top: 1px solid rgba(196, 154, 42, 0.12)

}



.footer-inner {

  max-width: 1120px;

  margin: 0 auto;

  /* display: flex; */

  /* align-items: center; */

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1.5rem

}



.footer-brand {

  display: flex;

  align-items: center;

  gap: 0.8rem

}



.footer-brand img {

    width: 141px;

    object-fit: contain

}



.footer-logo-text {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--gold)

}



.footer-tag {

  font-size: 0.62rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: rgba(250, 246, 238, 0.28);

  margin-top: 0.25rem

}



.footer-links {

  /* display: flex; */

  gap: 1.8rem;

  list-style: none;

  flex-wrap: wrap

}



.footer-links a {

  font-size: 0.72rem;

  color: rgb(0 0 0 / 91%);

  text-decoration: none;

  letter-spacing: 0.08em;

  transition: color 0.2s;

  width: 100%;

  display: block;

  margin-bottom: 10px;

  /* border-bottom: 1px solid #ccc; */

  /* padding-bottom: 6px; */

}



.footer-links a:hover {

  color: #161616;

}



.footer-copy {

  font-size: 0.68rem;

  color: rgb(0 0 0 / 77%);

}



/* ANIMATIONS */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(18px)

  }



  to {

    opacity: 1;

    transform: translateY(0)

  }

}
.commonBox .inner {
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 1px #000;
  height: 100%;
}
.commonBox .inner img {
  transition: all 1s linear;
  box-shadow: 0 0 1px #000;
  height: auto;
}
.padding
{
  padding-top:3rem;
  padding-bottom:3rem;
}
.commonBox .inner .commonBoxText {
  /* position: absolute; */
  inset: auto 0 0;
  z-index: 1;
  padding: 1rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgb(249 246 243 / 66%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}


/* RESPONSIVE */

@media(max-width:960px) {

  nav { 

    padding: 0 1.5rem

  }



  .nav-links {

    display: none;

    position: fixed;

    top: 101px;

    left: 0;

    right: 0;

    background: var(--white);

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

    flex-direction: column;

    padding: 1.5rem;

    gap: 0.2rem;

    z-index: 300

  }



  .nav-links.open {

    display: flex

  }



  .nav-links li a {

    padding: 0.6rem 0.8rem;

    display: block

  }



  .nav-sep {

    display: none

  }



  .hamburger {

    display: flex

  }



  section {

    padding: 4rem 1.5rem

  }



  .about-grid,

  .why-grid,

  .growth-two {

    grid-template-columns: 1fr;

    gap: 3rem

  }



  .stake-grid {

    grid-template-columns: 1fr 1fr

  }



  .mem-grid {

    grid-template-columns: 1fr 1fr

  }



  .growth-stats {

    grid-template-columns: 1fr 1fr

  }



  .events-grid {

    grid-template-columns: 1fr

  }



  .faq-grid {

    grid-template-columns: 1fr

  }



  .contact-cards {

    grid-template-columns: 1fr

  }



  .footer-inner {

    flex-direction: column;

    text-align: center;

    padding-bottom: 1.5rem

  }



  footer {

    padding: 2.5rem 1.5rem

  }

}



@media(max-width:560px) {
  .footer-brand {
    justify-content: center;
    margin-bottom: 10px;
}
.footer-links {
    display: none;
}
.commonBox
{
  margin-bottom: 10px;
}
.foot-links li {
    justify-content: center;
}
.why-cards {
    grid-template-columns: none;
}
.stake-card, .mem-card {
    padding: 1rem;
}
.section-inner {
    max-width: 100%;
}
.nav-brand img {
    width: 68px;
}
.nav-brand {
    margin-top: 5px;
}
.banner img
{
  min-height: 200px;
  object-fit: cover;

}
.why-card
{
    border-bottom: 1px solid rgba(196, 154, 42, 0.15);
    border-right:none;
}
.why-card:nth-child(4)
{
    border-bottom: none;
    border-right:none;
}
.why-icon {
    width: 81px;
}
.cubeSwiper {
    width: 52vh;
}
  .stake-grid,

  .mem-grid,

  .growth-stats,

  .hero-btns {

    grid-template-columns: 1fr

  }



  .hero-btns {

    flex-direction: column;

    align-items: center

  }

}

swiper

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

.swiper {

    width: 100%;

    height: 100%;

}



.swiper-slide {

    text-align: center;

    font-size: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.swiper-slide img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.gallBox .referenceText {

    position: absolute;

    left: 1rem;

    bottom: 0.8rem;

    font-size: 0.6rem;

    text-transform: uppercase;

    color: var(--white);

}

.foot-links li {

  display: flex;

  align-items: center;

  gap: 8px;

}



.foot-links li a {

  position: relative;

  display: grid;

  transition: all 300ms ease-in-out;

    text-decoration: none;

}

.foot-links ul

{

  padding: 0;

}



.icon-circular {

    width: 34px;

    flex: 0 0 34px;

    height: 34px;

    font-size: 12px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgb(196 154 42);

    transition: all 300ms ease-in-out;

    color: #000;

    text-decoration: none;

}



.icon-circular:hover {

  background-color: #fff;

  color: #000;

  box-shadow: 0 0 8px rgba(196, 154, 42, 0.6);

}



.icon-circular.stroke {

  background-color: transparent;

  box-shadow: 0 0 0 1px rgb(255 255 255 / 20%);

}