@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Anton&family=Archivo+Black&family=Bangers&family=Bayon&family=Bebas+Neue&family=Changa+One:ital@0;1&family=Dangrek&family=Denk+One&family=Flow+Circular&family=Francois+One&family=Great+Vibes&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Koulen&family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Khmer:wght@100..900&family=Oswald:wght@200..700&family=Paytone+One&family=Playwrite+AU+SA:wght@100..400&family=Playwrite+FR+Moderne+Guides&family=Preahvihear&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sriracha&family=Teko:wght@300..700&display=swap');

:root {
  --primary-color: #100e17;
  --primary-color-dark: #0c0b12;
  --white: #ffffff;
  --max-width: 1200px;
  --background-gradient-1: linear-gradient(to right, #cfa12d, #ffb700);
  --background-gradient-2: linear-gradient(to right, #0d1003, #242304);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* Navbar container */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(124, 124, 124, 0.2); /* transparent & blurred */
  padding: 12px 24px;
  border-bottom: 0.5px solid rgb(156, 156, 156);
  z-index: 1000;
  box-sizing: border-box;
}

/* Navbar inner container - default (desktop) */
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width); /* desktop max width */
  margin: 0 auto;             /* center on desktop */
  width: 100%;
  padding: 0 24px;
}

/* Mobile adjustment */
@media (max-width: 500px) {
  .navbar-container {
    max-width: 100%; /* remove desktop max-width */
    padding: 0 0px; /* optional: smaller padding on mobile */
  }
}

/* Logo */
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

/* Hamburger Menu */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  position: relative; /* <-- important */
}

.hamburger div {
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
}

.nav-menu {
  position: absolute;
  top: 250%;      
  right: 0;       
  background: rgba(243, 186, 0, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: 12px;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  box-sizing: border-box;

  /* Keep it in layout but invisible */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex; /* always flex to allow animation */
}

.nav-menu.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-menu a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
}

.nav-menu a:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Show menu when active */
.nav-menu.active {
  display: flex;
}

/* Always hide nav links on desktop, only use hamburger */
@media(min-width: 0px) {
  /* no changes needed, links hidden by default */
}

.section__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 5rem 1rem;
}

.section__header {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
}

.section__subheader {
  max-width: 600px;
  margin: auto;
  text-align: center;
}

.gradient__header {
  background: var(--background-gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn {
  padding: 1rem 2rem;
  outline: none;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  font-family: sans-serif;
  color:black;
  background: var(--background-gradient-1);
  border-radius: 5px;
  cursor: pointer;
}

img {
  width: 80%;
  display: flex;
}

a {
  text-decoration: none;
}
#paytone-one-regular {
  font-family: "Paytone One", sans-serif;
  font-weight: 100;
}
body {
  font-family: "Poppins", sans-serif;
  color: var(--white);
}

header {
  position: relative;
  /* Add a gradient on the left that fades to transparent */
  background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0, 0, 0, 0)), 
              url("assets/pexels-tima-miroshnichenko-6473981.jpg") center/cover no-repeat;
}


header::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

header * {
  position: relative;
  z-index: 1; /* keep text above overlay */
}

.header__container {
  padding-top: 4rem;
  text-align: left;
}

.header__container h1 {
  max-width: 700px;
  margin-bottom: 1rem;
  font-size: clamp(24px, 8.5vw, 50px);
  line-height: 1.2; /* unitless makes it proportional to font size */
}

.header__container p {
  max-width: 600px;
  margin-bottom: 4rem;
  font-size: clamp(14px, 2.5vw, 18px);
  line-height: 1.5; /* unitless also scales with font size */
}

.rewards {
  background-color: #000000;
    /* Background image */
  background-image: url('assets/banner.jpg');
  background-size: cover;      /* makes it cover the entire container */
  background-position: center; /* center the image */
  background-repeat: no-repeat; /* prevent tiling */
  padding: 2rem;               /* optional: add padding so content isn’t against edges */
}
.map {
    /* Background image */
  background-image: url('assets/ye1.jpg');
  color:#000;
  background-size: cover;      /* makes it cover the entire container */
  background-position: center; /* center the image */
  background-repeat: no-repeat; /* prevent tiling */
  padding: 2rem;   
}

.rewards__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: center;

}


.rewards__container :is(.section__header, .section__subheader) {
  text-align: left;
  max-width: 100%;
}

.rewards__container .section__header sup {
  font-size: 1rem;
  font-weight: 500;
}

.rewards__grid {
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--background-gradient-2);
}

.rewards__card {
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--primary-color);
}

.rewards__card img {
  max-width: 40px;
}

.rewards__card:hover {
  background: var(--background-gradient-2);
}

.rewards__details p {
  margin-bottom: 5px;
  font-size: 1.2rem;
  font-weight: 500;
}

.rewards__details h4 {
  font-size: 2rem;
  font-weight: 500;
}

.holders1 {
  background-image: url('assets/ye1.jpg');
  background-size: cover;      /* makes it cover the entire container */
  background-position: center; /* center the image */
  background-repeat: no-repeat; /* prevent tiling */
  padding: 2rem;   
  color: black;
}
.holders {
  background-color: black;
}
.transform {
  background-color: #000;
  background-image: url('assets/yellow.png');
  background-size: cover;           /* fills container */
  background-position: bottom center; /* always sticks to bottom */
  background-repeat: no-repeat;
  padding: 2rem;
}

/* Responsive: on smaller screens, scale down background */
@media (max-width: 768px) {
  .transform {
  /* scales down image to fit container */
    background-position: bottom center; /* keep at bottom */
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .transform {
    background-size: contain;
    background-position: bottom center;
    padding: 0.5rem;
  }
}


.holders__grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--background-gradient-2);
}

.holders__card {
  padding: 2rem;
  text-align: center;
  background-color: var(--primary-color-dark);
}

.holders__card span {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 100%;
}

.holders__card span img {
  max-width: 50px;
}

.holders__card h4 {
  font-size: 1.5rem;
  font-weight: 400;
}

.holders__content {
  max-width: 700px;
  margin: auto;
  margin-top: 2rem;
  padding: 2rem;
  text-align: center;
  background: var(--background-gradient-2);
  border-radius: 10px;
}

.work {
    /* Background image */
  background-image: url('assets/download.jpg');
  background-size: cover;      /* makes it cover the entire container */
  background-position: center; /* center the image */
  background-repeat: no-repeat; /* prevent tiling */
  padding: 2rem;   
}

.work__subheader {
  font-size: 1.2rem;
  text-align: center;
}

.work__subheader span {
  margin: 2rem;
}

.work__grid {
  margin-top: 4rem;
  padding-bottom: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--background-gradient-2);
}

.work__card {
  padding: 2rem;
  text-align: center;
  background-color:black;
}

.work__card span {
  display: inline-block;
  margin-bottom: 1rem;
}

.work__card span img {
  max-width: 50px;
}

.work__card h4 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.work__card p {
  font-size: 0.9rem;
}

.mission {
  /* Dark overlay + background image */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
    url('assets/pexels-curtis-adams-1694007-8583638.jpg');
  background-size: cover;      /* cover the entire container */
  background-position: center; /* center the image */
  background-repeat: no-repeat; /* prevent tiling */
  color: #fff; /* optional: makes text readable */
}


.mission__grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.mission__list {
  display: grid;
  gap: 2px;
  background: var(--background-gradient-2);
}

.mission__list h4 {
  font-size: 1.2rem;
  font-weight: 500;
  background-color: var(--primary-color);
}

.mission__list h4:hover {
  background: var(--background-gradient-2);
}

.mission__content {
  align-items: center;
  gap: 4rem; 
  color: white;
  text-align: center;
  max-width: 700px;
  margin: auto;
}

.mission__content img {
  max-width: 150px;
}

.faq {
  background-color:black;
}

.question__accordian {
  position: relative;
  isolation: isolate;
  max-width: 900px;
  margin: 4rem auto 0;
  display: grid;
  gap: 2px;
}

.question__accordian::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--background-gradient-2);
  z-index: -1;
}

.question__box {
  background-color: var(--primary-color-dark);
}

.question__box .title {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.question__box .title p span {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 1rem;
  background: var(--background-gradient-2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 100%;
}

.question__box .title p {
  font-size: 1.1rem;
  font-weight: 500;
}

.question__box .title .icon {
  padding: 5px 10px;
  font-size: 1.2rem;
  cursor: pointer;
}

.question__box .content {
  height: 0;
  padding: 0 2rem;
  background: var(--background-gradient-2);
  transition: 0.5s;
  overflow: hidden;
}

.question__box.active .content {
  height: 130px;
  padding: 2rem;
}

/* Footer base styles */
.footer {
  position: relative;
  background: black;
  isolation: isolate;
  padding: 3rem 1rem;
  color: #fff;
}

.footer::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    var(--primary-color-dark),
    rgba(0, 0, 0, 0)
  );
  z-index: -1;
}

.footer__container {
  display: grid;
  grid-template-columns: 2fr repeat(2, 1fr) 2fr;
  gap: 2rem;
}

.footer__col h3 {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.footer__col p {
  margin-bottom: 2rem;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__socials span {
  padding: 6px 11px;
  font-size: 1.25rem;
  background: var(--background-gradient-2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.footer__socials span:hover {
  background: var(--background-gradient-1);
}

.footer__col h4 {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.footer__col a {
  display: block;
  margin-bottom: 1rem;
  color: var(--white);
}

.footer__col form {
  padding: 5px;
  width: 100%;
  max-width: 350px;
  display: flex;
  align-items: center;
  background: var(--background-gradient-2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.footer__col input {
  width: 100%;
  padding: 0 1rem;
  outline: none;
  border: none;
  font-size: 1rem;
  color: var(--white);
  background-color: transparent;
}

.footer__col input::placeholder {
  color: var(--white);
}

.footer__col .submit__btn {
  padding: 10px 12px;
  font-size: 1.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr; /* stack all columns vertically */
    gap: 1.5rem;
  }

  .footer__socials {
    justify-content: center; /* center icons on mobile */
  }
}

/* Optional: Sticky footer layout */
html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* pushes footer to bottom if page is short */
}

@media (width < 900px) {
  .header__banner__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .header__banner__grid .col:nth-child(3) {
    grid-area: 2/1/2/3;
  }

  .rewards__container {
    grid-template-columns: repeat(1, 1fr);
  }

  .question__box.active .content {
    height: 175px;
  }
}

@media (width < 750px) {
  .holders__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .work__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .mission__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (width < 600px) {
  .header__banner__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .header__banner__grid .col:nth-child(3) {
    grid-area: unset;
  }

  .mission__content {
    gap: 2rem;
  }

  .question__box.active .content {
    height: 250px;
  }
}



/* Carousel base styles */
        .carousel-wrapper-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
          width: 100%;
        }

        .carousel-container {
          width: 100%;
          overflow: hidden;
          position: relative;
        }

        .carousel-wrapper {

          display: flex;
          transition: transform 0.5s ease;
        }

        .card {
          flex: 0 0 calc(33.333% - 20px);
          margin-right: 20px;
          background: #ffffff;
          color: #000000;
          padding: 20px;
          border-radius: 12px;
          text-align: left;
          position: relative;
          border: 2px solid black;
        }

        .card:last-child {
          margin-right: 0;
        }

        .carousel-button {
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          border: none;
          padding: 2px 6px 2px;
          cursor: pointer;
          font-size: 20px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        /* Google logo in top-right */
        .google-logo {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 60px;
          height: auto;
        }

        /* Review card content */
        .review-profile {
          display: flex;
          align-items: flex-start;
          gap: 15px;
          margin-top: 15px;
        }

        .review-profile img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }

        .review-name {
          display: flex;
          align-items: center;
          gap: 5px;
        }

        .verified {
          color: #1a73e8;
          font-size: 14px;
        }

        .review-text {
          font-size: 14px;
          color: #000000;
          margin-top: 5px;
        }

        /* Stars */
        .review-stars {
          color: #ffc400;
          margin-top: 5px;
          font-size: 14px;
        }

        /* Responsive adjustments */
        @media (max-width: 900px) {
          .card {
            flex: 0 0 45%;
            /* 2 cards per slide */
            margin-right: 10px;
          }

          .card:last-child {
            margin-right: 0;
          }
        }

        @media (max-width: 700px) {
          .carousel-container {
            overflow-x: auto;
            /* enable horizontal swipe */
            scroll-snap-type: x mandatory;
            /* snap to each card */
            -webkit-overflow-scrolling: touch;
            /* smooth scroll on iOS */
          }

          .carousel-wrapper {
            display: flex;
            flex-wrap: nowrap;
            gap: 10px;
            /* gap between cards */
          }

          .card {
            flex: 0 0 100%;
            /* show 1 card per view */
            scroll-snap-align: start;
            /* snap to start of each card */
            margin-right: 0;
          }

          .carousel-button {
            display: none;
            /* hide buttons on mobile */
          }
        }

            .ticker {
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      border-top: 0.5px solid rgb(136, 136, 136);
      border-bottom: 0.8px solid rgb(182, 182, 182);
      background: #3b2f0b;
      background: linear-gradient(322deg, rgba(59, 47, 11, 1) 0%, rgba(13, 8, 1, 1) 51%, rgba(26, 21, 4, 1) 100%);
      padding: 12px 0;
    }

    .ticker-track {
      display: inline-flex;
    }

    .ticker-item {
      flex: none;
      /* prevent shrinking */
      margin-right: 40px;
      /* spacing between phrases */
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      white-space: nowrap;
    }


            .reviews-container {
          display: flex;
          gap: 18px;
          flex-wrap: wrap;
        }

        .review-card {
          padding: 12px;
          background-color: rgba(112, 112, 112, 0.3);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border: 0.5px solid rgb(175, 175, 175);
          display: flex;
          gap: 12px;
          flex: 1 1 calc(50% - 9px);
          max-width: 200px;
          border-radius: 6px;
          box-sizing: border-box;
        }

        .review-card .img img {
          width: 40px;
          border-radius: 50%;
        }

        .review-card .txt {
          font-size: 14px;
        }

        .review-card .star {
          display: flex;
          gap: 5px;
          align-items: center;
        }

        .review-card .star span {
          color: rgb(255, 174, 0);
          font-size: 12px;
          display: flex;
          gap: 4px;
          margin-top: -2px;
        }

        /* Responsive: smaller screens */
        @media (max-width: 800px) {
          #web {
            font-size: 10px;
          }

          .reviews-container {
            justify-content: center;
          }

          .review-card {
            flex: 1 1 100%;
            max-width: 170px;
          }

          .review-card .img img {
            width: 30px;
          }

          .review-card .txt {
            font-size: 12px;
          }

          .review-card .star span {
            font-size: 10px;
            margin-top: -2px;
          }

        }

                /* Only affects mobile screens */
        @media (max-width: 500px) {
          .cta {
            flex-direction: column;
            gap: 12px;
          }

          .cta a {
            width: 100%;
            justify-content: center;
          }
        }

                .highlight {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 0;
          color: #fff;
          font-size: 18px;
        }

        .highlight::before,
        .highlight::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(to right, transparent, #fff, transparent);
        }

        .highlight::before {
          top: 0;
        }

        .highlight::after {
          bottom: 0;
        }

        /* Mobile adjustments */
        @media (max-width: 500px) {
          .highlight {
            justify-content: center;
            width: 100%;
            font-size: 12px;
          }

          .mobile-center-text {
            padding-left: 0;
          }
        }

        .map-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        /* 16:9 ratio */
        height: 0;
        overflow: hidden;
        border-radius: 12px;
        /* optional: rounded corners */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        /* optional shadow */
        margin-bottom: 20px;
        border: 4px solid black;
      }

      .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }

      /* Optional: stack map and text nicely on smaller screens */
      @media (max-width: 768px) {
        .rewards__container {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
      }