/* ====== DESKTOP HEADER ====== */
.gerege-header {
    background-color: #ffffff;
}

.gerege-logo img {
    max-height: 40px;
}

.gerege-header .temp-text,
.gerege-header .currency-text {
    font-size: 0.95rem;
}

.btn-signup {
    background-color: #8c4bff;
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 1.5rem;
    font-weight: 600;
}
.btn-signup:hover {
    color: #fff;
    opacity: 0.9;
}

/* ====== MOBILE HEADER (small box) ====== */
.gerege-mobile-box {
    background-color: #ffffff;
}

.gerege-mobile-logo img {
    max-height: 40px;
    min-height: 35px;
}

.gerege-mobile-item {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Remove default button styles for icon buttons */
.icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
}
.btn-primary {
    background-color: #8559E2 !important;   /* your brand color */
    border-color: #8559E2 !important;
}

.btn-primary:hover {
    background-color: #7739e6 !important;   /* darker shade */
    border-color: #7739e6 !important;
}
.temp-text {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.temp-text:hover {
    transform: scale(1.04);
}

.currency-text {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.currency-text:hover {
    transform: scale(1.04);
}
#languageDropdown:focus,
#languageDropdown:active,
#languageDropdown.show {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

#languageDropdown {
    border: none !important;
}

:root {
        --gerege-purple: #5730a4;
        --gerege-purple-dark: #3e2178;
    }

    .gerege-footer-top,
    .gerege-footer-mobile-main {
        background-color: var(--gerege-purple);
        color: #ffffff;
    }

    .gerege-footer-bottom,
    .gerege-footer-mobile-bottom {
        background-color: var(--gerege-purple-dark);
        color: #ffffff;
        font-size: 0.9rem;
    }

    .gerege-footer-logo img {
        max-height: 40px;
    }

    .social-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
    }

    .social-circle i {
        color: var(--gerege-purple-dark);
        font-size: 1.1rem;
    }

    .social-circle-sm {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
    }

    .social-circle-sm i {
        font-size: 0.9rem;
        color: #ffffff;
    }

    /* ===== Right-side decorative footer image ===== */
    .footer-side-image {
        width: 135px;        /* adjust size according to your design */
        height: auto;
        opacity: 0.35;       /* same transparent look as screenshot */
    }

    /* Fullscreen overlay base */
.full-menu-overlay {
    position: fixed;
    inset: 0;
    /* background: #312f86;  */
    background: #3e2178; 
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.full-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Inner layout */
.full-menu-inner {
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Draw vertical border between left/right only on lg+ */
@media (min-width: 992px) {
    .border-end-lg {
        border-right: 1px solid rgba(255,255,255,0.2);
    }
}

/* LEFT SIDE */
.menu-left {
    color: #fff;
    display: flex;
    flex-direction: column;
}

.menu-logo img {
    max-height: 40px;
}

/* scrollable content if small screens */
.menu-left-content {
    flex: 1;
    padding: 30px 0 20px;
    overflow-y: auto;
}

.menu-heading {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 30px;
}

.menu-section {
    margin-bottom: 22px;
}

.menu-section h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.menu-section a {
    display: inline-block;
    margin-right: 20px;
    margin-top: 2px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.85;
}

.menu-section a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* RIGHT SIDE */
.menu-right {
    color: #fff;
    display: flex;
    flex-direction: column;
}

.menu-subbrand {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-top-link {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}

.menu-top-link:hover {
    text-decoration: underline;
}

/* Close button */
.close-menu-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* Right main content */
.menu-right-content {
    flex: 1;
    padding: 30px 0 10px;
    display: flex;
    flex-direction: column;
}

.menu-search-text {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 18px;
}

/* Search line style */
.menu-search-wrapper {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.7);
}

.menu-search-input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
}

.menu-search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.menu-search-button {
    position: absolute;
    right: 0;
    top: -5px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 20px;
}

/* Social icons row */
.menu-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.menu-socials a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
}

/* Store buttons */
.menu-store-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 260px;
    margin-bottom: 30px;
}

.store-btn {
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.8);
    color: #ffffff;
    font-size: 14px;
    text-align: left;
}

.store-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Footer copy */
.menu-footer-copy {
    font-size: 12px;
    opacity: 0.8;
    margin-top: auto;
}

:root{
  --mm-purple:#6f42c1;          /* main purple */
  --mm-purple-soft:#8a63d2;     /* footer purple */
  --mm-text:#2b2b2b;
  --mm-muted:#7a7a7a;
  --mm-border:#e7e7ef;
}

/* Overlay */
.mm-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  background:rgba(0,0,0,.15);
}

.mm-overlay.is-open{ display:block; }

.mm-panel{
  position:absolute;
  inset:0;
  background:#fff;
  display:flex;
  flex-direction:column;
}

/* Header */
.mm-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:18px 18px 10px;
}

.mm-brand{ text-decoration:none; color:inherit; }

.mm-logo-title{
  font-weight:800;
  letter-spacing:.5px;
  font-size:28px;
  color:var(--mm-purple);
  line-height:1;
}

.mm-logo-sub{
  margin-top:2px;
  font-size:14px;
  color:var(--mm-purple);
  font-weight:600;
}

.mm-pass{
  background:#f3c34c;
  color:#3b2a00;
  padding:1px 6px;
  border-radius:10px;
  font-weight:800;
  margin-left:4px;
}

.mm-close{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  padding:6px 8px;
  cursor:pointer;
  color:#222;
}

/* Topbar */
.mm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px 14px;
  gap:12px;
}

.mm-language{
  min-width:120px;
  border:1px solid #cdbaf0;
  padding:7px 10px;
  border-radius:0; /* screenshot looks square-ish */
  color:var(--mm-purple);
  font-weight:600;
  background:#fff;
}

.mm-auth{
  display:flex;
  gap:18px;
  align-items:center;
}

.mm-auth-link{
  text-decoration:none;
  font-weight:600;
  color:var(--mm-purple);
}

/* Content scroll area */
.mm-content{
  padding:0 18px;
  overflow:auto;
  flex:1;
}

/* Blocks */
.mm-block{
  padding:10px 0;
}

.mm-title{
  font-weight:900;
  color:#2f2353;
  letter-spacing:.5px;
  font-size:34px;
  margin:10px 0 8px;
}

/* Search */
.mm-search{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:2px solid var(--mm-border);
  padding-bottom:8px;
}

.mm-search-input{
  border:0;
  outline:none;
  flex:1;
  font-size:14px;
  color:var(--mm-text);
}

.mm-search-input::placeholder{ color:#a3a3ad; }

.mm-search-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  color:var(--mm-purple);
}

/* Sections */
.mm-section{
  padding:12px 0;
  border-bottom:1px solid #f0f0f6;
}

.mm-section-title{
  font-weight:800;
  color:#2f2353;
  margin-bottom:8px;
}

.mm-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px 22px;
}

.mm-links a{
  text-decoration:none;
  color:var(--mm-purple);
  font-weight:600;
  font-size:14px;
}

/* Spacer for footer */
.mm-bottom-spacer{
  height:140px;
}

/* Footer */
.mm-footer{
  background:var(--mm-purple-soft);
  color:#fff;
  padding:18px;
}

.mm-footer-title{
  font-weight:900;
  letter-spacing:.5px;
  font-size:18px;
  margin-bottom:12px;
}

.mm-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-bottom:14px;
}

.mm-footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  opacity:.95;
}

.mm-social{
  display:flex;
  gap:14px;
  margin-bottom:14px;
}

.mm-social a{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.mm-copyright{
  font-size:11px;
  opacity:.9;
}

/* E-commerce */

/* section */
.merch{
  padding: 28px 0 36px;
}
.merch-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* title like screenshot (center, simple border feel) */
.merch-title{
  text-align:center;
  font-weight: 800;
  font-size: clamp(20px, 3.5vw, 28px);
  color: var(--purple);
  margin: 0 0 18px;
}

/* responsive grid */
.merch-grid{
  display:grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* breakpoints: 3 cols, 2 cols, 1 col */
@media (max-width: 1024px){
  .merch-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .merch-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .merch-grid{ grid-template-columns: 1fr; }
}

/* card */
.p-card{
  border: 1px dashed #b9c6ff;       /* matches your dotted guide vibe */
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

/* image panel */
.p-media{
  border-radius: var(--radius);
  height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.p-media img{
  max-width: 70%;
  max-height: 75%;
  object-fit: contain;
  display:block;
}

/* colored backgrounds */
.bg-purple{ background:#9b7cf1; }
.bg-yellow{ background:#ffcd57; }
.bg-pink{ background:#ff9f9f; }
.bg-blue{ background:#3bb8ff; }

/* body */
.p-body{
  padding: 10px 2px 2px;
}

.p-colors{
  display:flex;
  gap: 6px;
  margin: 8px 0 10px;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
  border: 1px solid rgba(0,0,0,.08);
}
.d-yellow{ background:#ffcd57; }
.d-purple{ background:#9b7cf1; }
.d-blue{ background:#3bb8ff; }
.d-green{ background:#5cd6a7; }
.d-pink{ background:#ff9f9f; }

.p-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.p-price{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--price);
}

/* button */
.p-btn{
  margin-top: 10px;
  display:block;
  width: 100%;
  text-align:center;
  background: var(--purple);
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  transition: transform .12s ease, filter .12s ease;
}
.p-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* learn more */
.merch-more{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}
.more-btn{
  background: var(--purple);
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 16px;
  border-radius: 999px;
}

/* E-commerce - END */

/* Hero slider */
.hero-slider{
  position: relative;
}

/* Carousel base */
#heroCarousel{
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
}
#heroCarousel.dragging{ cursor: grabbing; }

/* Height responsive */
#heroCarousel .carousel-item{
  height: clamp(220px, 42vw, 520px);
}

/* Fill media */
.hero-media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay layer on top, but not blocking slide gestures */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hero-overlay-inner{
  position: relative;
  height: 100%;
}

/* Indicators: centered relative to container */
.hero-indicators{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  margin: 0;
  pointer-events: auto;
}
.hero-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  opacity: 1;
  border: none;
  margin: 0 6px 0 0;
}
.hero-indicators .active{
  background: #8559E2;
  width: 26px;
}

/* Bottom-right buttons INSIDE container */
.hero-actions{
  position: absolute;
  right: 0;
  bottom: 16px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.hero-btn{
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  backdrop-filter: blur(6px);
}
.hero-btn-primary{
  background: #6f42c1;
  color: #fff;
}
.hero-btn-outline{
  background: rgba(255,255,255,.85);
  color: #2b2b2b;
  border: 1px solid rgba(0,0,0,.08);
}

/* Sound toggle bottom-left INSIDE container */
.hero-sound-toggle{
  position: absolute;
  left: 0;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;               /* will be hidden by JS on non-video slides */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 6;
}

/* Bootstrap icons show/hide */
.hero-sound-toggle i{
  font-size: 18px;
  display: none;
}
.hero-sound-toggle.is-muted .bi-volume-mute{ display: block; }
.hero-sound-toggle.is-unmuted .bi-volume-up{ display: block; }

/* Prevent selecting media while dragging */
#heroCarousel img,
#heroCarousel video{
  user-select: none;
}

/* IMPORTANT: allow swipe/drag; do not block JS mute toggle.
   You may keep pointer-events none for video/image if you want,
   but not required. If you keep it, slide gestures are smoother. */
#heroCarousel img,
#heroCarousel video{
  pointer-events: none;
}

/* Mobile */
@media (max-width: 480px){
  .hero-actions{ bottom: 30px; gap: 8px; }
  .hero-btn{ height: 40px; font-size: 13px; padding: 0 12px; }
  .hero-indicators{ bottom: 12px; }
  .hero-sound-toggle{ bottom: 12px; width: 40px; height: 40px; }
}


/* Hero slider - END */

/* Value and propostion  */
.value-prop{
  background: #fff;
}

.value-title{
  color: #6f42c1;            /* match your purple */
  font-weight: 600;
  letter-spacing: .5px;
  font-size: clamp(18px, 2.2vw, 26px);
}

.value-card{
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 10px 25px rgba(17, 24, 39, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.value-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(17, 24, 39, .12);
}

.value-icon{
  height: 90px;              /* keeps all icons aligned */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.value-icon img{
  max-height: 90px;
  max-width: 120px;
  width: auto;
  height: auto;
}

.value-heading{
  font-weight: 600;
  color: #2b2b2b;
  margin-bottom: 6px;
  font-size: 16px;
}

.value-text{
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

/* Value and proposition  */