/*
Theme Name: Habesha creative lab
Author: Behagerlij
Description: A simple custom one-page theme
Version: 1.0
*/

/* Put your Figma-exported CSS here. You can delete this comment */
main section ul { list-style: none; padding: 0; }
main section ul li { margin: 8px 0; }
form { max-width: 560px; margin: 20px auto; display: grid; gap: 10px; }
input, textarea, button { padding: 0; border: 1px solid #ccc; border-radius: 6px; }
button { cursor: pointer; border: none; }
:root{
  --sbw: calc(100vw - 100%);   /* ~17px on desktop; 0 on mobile */
}


/* Reset & Global */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* prevent horizontal scroll */
  overflow-y: scroll;
  background: #efefef;
}
* { box-sizing: border-box; }

/* ===== Header base (desktop-first) ===== */
.site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: #fff;
 border-radius: 0 0 clamp(40px, 8vmin, 60px) clamp(40px, 8vmin, 60px);
  padding: 10px 20vh;
  z-index: 10;
 height: clamp(80px, 12vmin, 100px);

  /* robust desktop layout */
  display: grid;
  grid-template-columns: auto 1fr auto;  /* left logo | nav | right logo */
  align-items: center;
  column-gap: 24px;
}

.site-header .logo img { max-height: 70px; }

.main-nav { justify-self: center; }
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0; padding: 0;
}
.main-nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* Hamburger button (hidden by default on desktop) */
.nav-toggle{
  display: none;                 /* shown in responsive.css */
  position: absolute;
  right: 12px; top: 10px;
  width: 44px; height: 44px;
  border: 0; background: transparent; padding: 0;
  cursor: pointer; z-index: 11;
}
.nav-toggle .bar{
  display: block;
  width: 24px; height: 2px;
  background: #111;
  margin: 6px auto;
  transition: transform .25s ease, opacity .2s ease, background .2s ease;
}

/* Morph to “X” when menu is open */
body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Optional: lock scroll when mobile menu is open */
body.nav-open { overflow: hidden; }

/* Hero section (unchanged) */
.hero-section { position: relative; height: 100vh; width: 100%; }

.hero-section .hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;   /* so clicks go to the button/text */
  z-index: 0;             /* behind the content */
}
.hero-section .hero-content {
  position: relative;
  margin: 66px auto 0;
width: min(90%, 800px);
  max-width: 800px;
  text-align: center;
  color: #fff;
  z-index: 1;
padding: clamp(30px, 6vmin, 40px) clamp(15px, 4vmin, 20px);
  background: #07B0B280;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
  z-index: 1;
  /* NEW FLEX STYLES */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* spacing between elements */

  /* Blur the background behind this element (glass effect) */
  -webkit-backdrop-filter: blur(12.7px);
  backdrop-filter: blur(12.7px);
}

.hero-section p {
  font-size: 19px;
  margin-top: 20px;
  font-family: "Lucida Regular" ;
  text-align: center;
  line-height: 1;
  font-weight: 400;
  color: black;
}

:root {
  --font-size: 20px;
  --line-height: 1.2;
  --num-words: 6;
  --animation-duration: 8s;
  --blue: #02b0ff;
}
.rotating-text {
  font-size: var(--font-size) !important;
  font-family: "Lucida Regular" !important;
  line-height: 1.3 !important;
  color: black !important;
  font-weight: normal !important;
}

/* 3-line viewport; width eases to the active (bottom) word */
.window{
  display:inline-block;
  vertical-align:bottom;
  overflow:hidden;
  height: calc(var(--font-size) * var(--line-height));
  width:auto;
}

/* the column we slide as one piece */
.window-inner{
  display:flex;
  flex-direction:column;
  will-change: transform;
  width:auto;
}

/* each line */
.window-inner > span{
  display:block;
  opacity: .42;
  transition: opacity 220ms ease, transform 220ms ease;
  

}
.window-inner > span.is-mid{ opacity:.8 ; font-weight:300 !important; }
.window-inner > span.is-active{ opacity:1; font-weight:700 !important;  /* Immediate font-weight */
 } 

/* keep your markup; just hide the <br> inside the spans */
.window-inner br{ display:none; }

.hero-section h1 {
  font-size: 96px;
  margin-bottom: 20px;
  font-family: Manrope Regular;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  margin-top: 0;
}
.hero-section h1 span { color: black; }

.hero-section .btn {
    display: inline-block;
    padding: 20px 25px;
    font-family: "Lucida Regular";
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 400;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: all 0.5s ease-in-out;
}


.hero-section .btn:hover {
    color: #fff; 
     background: #000;
}
.hero-section .btn:hover::before {
    width: 100%;
}
/* About */
.about-section {
  position: relative;
  top: clamp(-40px, -6vmin, -60px);
padding: clamp(60px, 10vmin, 80px) clamp(30px, 5vmin, 40px);
  background: #07B0B2;
  border-top-left-radius: 120px;
  border-top-right-radius: 120px;
  z-index: 5;
  padding-bottom: 12vh;
}

/* 3-column layout: left | divider | right */
.about-container{
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  column-gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.about-left, .about-right { min-width: 0; }
.about-right { display: flex; flex-direction: column; gap: 20px; }
.about-right > * { width: 100%; }

/* Divider */
.about-divider{
  width: 1px;
  height: 30%;
  background: rgba(255, 255, 255, 0.55);
  margin: 0 auto;
  position: relative;
  margin-top: 30vh;
  border-radius: 20px;
  z-index: 3;
}

.about-left{ padding-right: 60px; }
.about-left h2{
  font: 400 64px/1 "Manrope Regular";
  color:#000;
  margin:0 0 22px;
  margin-top: clamp(24px, 8vh, 140px);
}
.about-left p{
  font: 16px/2 "Lucida Regular";
  color:#fff;
  margin:0;
}

/* Right column: stack logo → video → marquee */
.about-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  width:100%;
}

/* Logo */
.about-image img{
  width: 212px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Video */
.media-box{ width:100%; }
.media-box video{
  width: 56%;
  height: auto;
  display: block;
  outline: none;
  margin: 0 auto;
}

/* Text carousel */
.text-carousel{
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: 12px;
  text-align: initial;
  width: auto !important;
}
.text-carousel .carousel-track{
  display: inline-flex;
  align-items: center;
  gap: 48px;               /* desktop spacing */
  will-change: transform;
  flex-wrap: nowrap;       /* prevent wrapping */
}
.text-carousel .slide{
  flex: 0 0 auto;
  display: inline-block;
  white-space: normal;
  font: 16px / 2 "Lucida Regular";
  color: #fff;
  padding-left: 15vh;
  width:100%;
}

/* Accordion section header band */
.accordion-section{
  background-color: #07b0b21f;
  position: relative;
  top: -7vh;
  z-index: 45;
  width:100%;
  margin-left: auto;
    margin-right: auto;
}
.accordion-section::before{
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 245px;
  background: #07B0B2;
  pointer-events: none;
}

/* ===============  TIMING VARIABLES & EASING  =============== */
.image-accordion{
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-open: .48s;
  --t-slide: .40s;
  --t-arrow: .45s;
  --d-arrow-in: .10s;
  --d-text-in:  .18s;
  --d-arrow-out: 0s;
  --d-text-out:  .05s;
}

/* ===============  LAYOUT  =============== */
.image-accordion {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 386px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.image-accordion {
  display: flex;
  justify-content: center;
  align-items: center;
}




.accordion {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 386px;
}

/* Fallback for older browsers */
@supports not (gap: 20px) {
  .accordion > * + * {
    margin-left: 20px;
  }
}

/* Panel: default size 92×386; expand to 442 on hover */
.accordion-item {
  position: relative;
  flex: 0 0 92px;
  height: 386px;
  overflow: hidden;
  border-radius: 48px;
  cursor: pointer;
  transition: flex-basis var(--t-open) var(--ease);
  will-change: flex-basis;
}
.accordion-item:hover {
  flex-basis: 442px;
  z-index: 2;
}

/* Image zoom matches the expand timing */
.accordion-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-open) var(--ease);
}
.accordion-item:hover img { transform: scale(1.08); }

/* Overlay wrapper */
.accordion-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(0 0 0 / 70%);
  transition: background .28s var(--ease);
}
.accordion-item:hover .accordion-overlay { background: transparent; }

/* Arrow circle */
.arrow-circle {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left var(--t-open) var(--ease) var(--d-arrow-out),
    right var(--t-open) var(--ease) var(--d-arrow-out),
    transform var(--t-arrow) var(--ease) var(--d-arrow-out),
    background .28s var(--ease) var(--d-arrow-out);
}
.accordion-item:hover .arrow-circle {
  left: auto;
  right: 12px;
  transform: none;
  background: #07B0B2;
  transition-delay: var(--d-arrow-in);
}

/* PNG arrow inside the circle */
.arrow-circle .arrow {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  transition: transform var(--t-arrow) var(--ease) var(--d-arrow-out),
              filter .25s var(--ease) var(--d-arrow-out);
  filter: none;
}
.accordion-item:hover .arrow-circle .arrow {
  transform: rotate(134deg);
  filter: brightness(0) invert(1);
  transition-delay: var(--d-arrow-in);
}

/* Text panel */
.accordion-overlay .text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  color: #000;
  padding: 16px 18px;
  border-bottom-left-radius:48px;
  border-bottom-right-radius:48px;
  transform: translate3d(0, 100%, 0);
  transform-origin: bottom center;
  will-change: transform;
  transition: transform var(--t-slide) var(--ease) var(--d-text-out);
  opacity: .98;
  contain: layout paint;
}
.accordion-item:hover .accordion-overlay .text {
  transform: translate3d(0, 8px, 0);
  transition-delay: var(--d-text-in);
}
.accordion-overlay .text h3 {
  color: #07B0B2;
  font-size: 20px;
  font-family: Lucida DM;
  font-weight: 600;
  margin-bottom: 0;
}
.accordion-overlay .text p {
  font-size: 12px;
  line-height: 1.6;
  font-family: "Lucida Regular";
  color: #000;
  padding-bottom: 10px;
}
.mr{
    width: 95%;
    float: left;
    padding-left: 4vh;
    }

/* Membership */
.membership-section{
  position: relative;
  z-index: 1;
  top: -7vh;
  padding-top: 15vh;
  padding-bottom: 8vh;
}
.membership-section::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 56vh;
  background: #07b0b21f;
  pointer-events: none;
  z-index: -1;
  border-bottom-left-radius: 120px;
  border-bottom-right-radius: 120px;
}
.membership-container{ max-width: 1200px; margin: 0 auto; }

/* Title */
.membership-title{
  margin: 0 0 24px;
  text-align: left;
  font: 700 96px/1 "Manrope Regular";
  color:#000;
  margin-left: 10vh;
  padding-bottom: 5vh;
}
.membership-title span{ color:#07B0B2; }

.intxt{
  font-size: 24px;
  text-align: right;
  width: 100%;
  margin-left: 17vh;
  font-family: 'Lucida Regular';
  color: #07B0B266 !important;
  font-weight: 400;
}
.tb{
  font-family: 'Manrope Bold';
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: #07B0B2B2;
  padding-top: 20px;
  margin-bottom: 5px;
  line-height:1;
}
.td{
  font-family: 'Lucida Regular';
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #00000040;
  margin: 0;
}

/* Grid of cards */
.tiers{
  display: grid;
  grid-template-columns: repeat(5, 233px);
  gap: 18px;
  justify-content: center;
}

/* Card */
.membership-card{
  --card-t: .6s;
  --card-ease: ease-in-out;

  width: 233px;
  height: 416px;
  border-radius: 39px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;

  /* keep a concise, consistent transition baseline on the card itself */
  transition: background-color var(--card-t) var(--card-ease),
              color var(--card-t) var(--card-ease),
              box-shadow var(--card-t) var(--card-ease),
              transform var(--card-t) var(--card-ease);
}

/* Apply the same timing & easing to all children and pseudo elements so every hover effect is consistent */
.membership-card,
.membership-card *,
.membership-card *::before,
.membership-card *::after {
  transition: background-color var(--card-t) var(--card-ease),
              color var(--card-t) var(--card-ease),
              transform var(--card-t) var(--card-ease),
              box-shadow var(--card-t) var(--card-ease),
              filter var(--card-t) var(--card-ease),
              border-color var(--card-t) var(--card-ease);
}

/* HOVER EFFECT FOR MEMBERSHIP CARD */
.membership-card:hover {
  background: #07B0B2 !important; /* Full teal background on hover */
  z-index: 5;
  position: relative;
}

/* Title on hover */
.membership-card:hover .tier-title {
  color: #fff !important;
}
.membership-card:hover .tier-title span {
  color: #FFFFFFB2 !important; /* 70% opacity white */
}

/* Price & Description */
.membership-card:hover .price,
.membership-card:hover .desc {
  color: #fff !important;
}
/* Price amount → WHITE */
.membership-card:hover .price .amount {
  color: #fff ;
}
.membership-card:hover .price .unit,
.membership-card:hover .price .period {
  color: #FFFFFFB2 !important;
}

/* Icon background */
.membership-card:hover .tier-icon {
  background: #ffffff80 !important; /* 50% opacity white */
}

/* All ::before and ::after (circles) in icons → white */
.membership-card:hover .tier-icon.starter::before,
.membership-card:hover .tier-icon.starter::after,
.membership-card:hover .tier-icon.professional::before,
.membership-card:hover .tier-icon.professional::after,
.membership-card:hover .tier-icon.premium::before,
.membership-card:hover .tier-icon.premium::after,
.membership-card:hover .tier-icon.incubated::before,
.membership-card:hover .tier-icon.day-pass::after {
  background: #fff !important;
}

/* Calendar line text & icon */
.membership-card:hover .line {
  color: #fff !important;
}
.membership-card:hover .cal {
  filter: brightness(0) invert(1) !important; /* White calendar icon */
}
/* ——————————————————— METER DOTS ON HOVER (PER TIER) ——————————————————— */

/* STARTER: 3 Half Days (gradient) + 4 Closed */
.membership-card:hover .meter.starter li:nth-child(-n+3) {
  background: linear-gradient(to bottom, #fff 50%, #ffffff80 50%) !important;
  opacity: 1 !important;
}
.membership-card:hover .meter.starter li:nth-child(n+4):nth-child(-n+7) {
  background: #ffffff40 !important; /* 25% white */
  opacity: 1 !important;
}

/* PROFESSIONAL: 5 Half Days + 2 Closed */
.membership-card:hover .meter.professional li:nth-child(-n+5) {
  background: linear-gradient(to bottom, #fff 50%, #ffffff80 50%) !important;
  opacity: 1 !important;
}
.membership-card:hover .meter.professional li:nth-child(n+6):nth-child(-n+7) {
  background: #ffffff40 !important;
  opacity: 1 !important;
}

/* PREMIUM: 5 Full Days + 2 Closed */
.membership-card:hover .meter.premium li:nth-child(-n+5) {
  background: #fff !important; /* Full white */
  opacity: 1 !important;
}
.membership-card:hover .meter.premium li:nth-child(n+6):nth-child(-n+7) {
  background: #ffffff40 !important;
  opacity: 1 !important;
}

/* INCUBATED: 3 Half Days + 4 Closed (alternating pattern) */
.membership-card:hover .meter.incubated li:nth-child(1),
.membership-card:hover .meter.incubated li:nth-child(3),
.membership-card:hover .meter.incubated li:nth-child(5) {
  background: linear-gradient(to bottom, #fff 50%, #ffffff80 50%) !important;
  opacity: 1 !important;
}
.membership-card:hover .meter.incubated li:nth-child(2),
.membership-card:hover .meter.incubated li:nth-child(4),
.membership-card:hover .meter.incubated li:nth-child(6),
.membership-card:hover .meter.incubated li:nth-child(7) {
  background: #ffffff40 !important;
  opacity: 1 !important;
}

/* DAY PASS: 1 Full Day + 6 Closed */
.membership-card:hover .meter.day-pass li:nth-child(1) {
  background: #fff !important;
  opacity: 1 !important;
}
.membership-card:hover .meter.day-pass li:nth-child(n+2):nth-child(-n+7) {
  background: #ffffff40 !important;
  opacity: 1 !important;
}

/* Ensure meter dots also follow the same timing */
.membership-card .meter li {
  transition: background-color var(--card-t) var(--card-ease),
              opacity var(--card-t) var(--card-ease),
              transform var(--card-t) var(--card-ease);
}



/* Featured */
.membership-card.featured{
  background:#07B0B2;
  color:#fff;
  box-shadow: 0 10px 22px rgba(7,176,178,.35);
}

/* Header strip */
.tier-head{
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.membership-card.featured .tier-head{
  border-bottom-color: rgba(255,255,255,.2);
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0));
}
.tier-icon {
    width: 32px;
    height: 50px;
    background: #07B0B233;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 60px;
}

/* Top circle */
.tier-icon.starter::before,
.mm-tier-icon.starter .mm-led::before  {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom circle */
.tier-icon.starter::after,
.mm-tier-icon.starter .mm-led::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
}
/* Top circle */
.tier-icon.professional::before,
.mm-tier-icon.professional .mm-led::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom circle */
.tier-icon.professional::after,
.mm-tier-icon.professional .mm-led::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 24px;
    background: #fff;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* Top circle */
.tier-icon.premium::before,
.mm-tier-icon.premium .mm-led::before  {
    content: '';
    position: absolute;
    width: 16px;
    height: 24px;
    background: #07B0B2;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Bottom circle */
.tier-icon.premium::after,
.mm-tier-icon.premium .mm-led::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
     border-radius: 50%;
    
}
/* Top circle */
.tier-icon.incubated::before,
.mm-tier-icon.incubated .mm-led::before  {
    content: '';
    position: absolute;
    width: 16px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* Bottom circle */
.tier-icon.day-pass::after,
.mm-tier-icon.day-pass .mm-led::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
     border-radius: 50%;
    
}
.membership-card.featured .tier-icon{ background: rgba(255,255,255,.25); color:#fff; }

/* Title + sublabel */
.tier-title{
  margin: 0;
  font: 700 20px/1.2 "Manrope Bold";
  color:#07B0B2;
}
.tier-title span{
  display:block; font: 600 14px/1.1 "Lucida DM"; color:#69C9C6; margin-top:2px;
}
.membership-card.featured .tier-title{ color:#fff; }
.membership-card.featured .tier-title span{ color:#DAF3F2; }

/* Body */
.tier-body{ padding: 16px; display: grid; grid-auto-rows: min-content; gap: 10px; }

/* Price row */
.price{ font: 700 14px/1.2 "Manrope Regular"; color:#7A8B90; }
.price .amount{ display:inline-block; font: 700 36px/1 "Manrope Bold"; color:#000; }
.membership-card.featured .price{ color:#E7FFFF; }
.membership-card.featured .price .amount{ color:#fff; }
.price .unit{ margin-left:6px; font-weight:700; }
.price .period{ margin-left:4px; color: currentColor; opacity:.9; }

/* Description */
.desc{ font: 400 12px/1.6 "Lucida Regular"; color:#5a6a70; }
.membership-card.featured .desc{ color:#EAFDFD; }
/* Dots meter */
.meter {
    display: flex;
    gap: 8px;
    margin: 0;
    list-style: none;
    margin-top: 4vh;
}

.meter li {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Default: Half Day */
    opacity: .65;
}

/* Starter: 3 Half Day, 4 Closed (7-day default) */
.meter.starter li:nth-child(-n+3) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.starter li:nth-child(n+4):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Professional: 5 Half Day, 2 Closed (7-day default) */
.meter.professional li:nth-child(-n+5) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.professional li:nth-child(n+6):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Premium: 5 Full Day, 2 Closed (7-day default, add 5+2 exact option) */
.meter.premium li:nth-child(-n+5) {
    background: #07B0B2; /* Full Day */
    opacity: .65;
}

.meter.premium li:nth-child(n+6):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Add exact 5+2 rule for Premium */
.meter.premium-5-2 li:nth-child(-n+5) {
    background: #07B0B2; /* Full Day */
    opacity: .65;
}

.meter.premium-5-2 li:nth-child(n+6):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Incubated: 1 Half Day, 1 Closed, 1 Half Day, 1 Closed, 1 Half Day, 1 Closed, 1 Closed (7-day default) */
.meter.incubated li:nth-child(1) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated li:nth-child(2) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated li:nth-child(3) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated li:nth-child(4) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated li:nth-child(5) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated li:nth-child(6) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated li:nth-child(7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Add exact 7-day rule for Incubated (no change needed, just clarify) */
.meter.incubated-7-exact li:nth-child(1) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated-7-exact li:nth-child(2) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated-7-exact li:nth-child(3) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated-7-exact li:nth-child(4) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated-7-exact li:nth-child(5) {
    background: linear-gradient(to bottom, #07B0B2 50%, #07B0B233 50%); /* Half Day */
    opacity: .65;
}

.meter.incubated-7-exact li:nth-child(6) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

.meter.incubated-7-exact li:nth-child(7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Day Pass: 1 Full Day, 6 Closed (7-day default, add 1+6 exact option) */
.meter.day-pass li:nth-child(1) {
    background: #07B0B2; /* Full Day */
    opacity: .65;
}

.meter.day-pass li:nth-child(n+2):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Add exact 1+6 rule for Day Pass */
.meter.day-pass-1-6 li:nth-child(1) {
    background: #07B0B2; /* Full Day */
    opacity: .65;
}

.meter.day-pass-1-6 li:nth-child(n+2):nth-child(-n+7) {
    background: #07B0B233; /* Closed */
    opacity: 1;
}

/* Existing overrides (unchanged unless needed) */
.meter-5 li:nth-child(-n+5),
.meter-5full li:nth-child(-n+5),
.meter-flex li:nth-child(-n+4),
.meter-1full li:nth-child(-n+1) {
    background: #07B0B2;
    opacity: 1;
}

.membership-card.featured .meter li {
    background: rgba(255, 255, 255, .45);
}

.membership-card.featured .meter li:nth-child(-n+5) {
    background: #fff;
}
/* Calendar line */
.line{ display:flex; align-items:center; gap:8px; margin: 0 auto; font: 600 14px/1.2 "Lucida Regular"; color:#000; }
.membership-card.featured .line{ color:#fff; }
.cal{ font-size:16px; 
width: 17px;      /* Adjust size as needed */
      height: 18px;
      display: inline-block;
    background-image: url(../images/calendar.png) !important;      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
    filter: grayscale(100%) brightness(1.2);
  -webkit-filter: grayscale(100%) brightness(1.2);}

.cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font: 700 14px/1 "Manrope Regular";
  margin-top: 3vh;
  position: relative;
  overflow: visible;
  transition: all 0.5s ease-in-out;
  transform: translateY(0);
  
  z-index: 1;
}

/* ——— BUTTON TYPES (Normal State) ——— */
.cta-dark {
  background: #000;
  color: #fff;
}

.cta-light {
  background: #fff;
  color: #07B0B2;
  border: 1px solid #07B0B2;
}

.cta-light-teal {
  background: #07B0B2;
  color: #fff;
}

/* ——— HOVER: ALL → WHITE BG + BLACK TEXT ——— */
.cta:hover,
.cta-dark:hover,
.cta-light:hover,
.cta-light-teal:hover {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 20px rgba(7, 176, 178, 0.3);
}



/* Slider frame */
.news-slider{
  position: relative;
  width: calc(100vw - var(--sbw));
  height: 640px;
  margin-left:  calc(50% - 50vw + var(--sbw)/2);
  margin-right: calc(50% - 50vw + var(--sbw)/2);
  border-radius:  120px 120px 0 0;
  overflow: hidden;
  --hold: 5.8s;
}
.news-slide {
  position: absolute;
    inset: 0;
    background-size: cover;          /* keep these separate for clarity */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
        background-position: center;
}

.news-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Dark overlay (keep or adjust colors/opacity to taste) */
.news-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.58) 35%,
        rgba(0,0,0,0.38) 55%,
        rgba(0,0,0,0.20) 70%,
        rgba(0,0,0,0.04) 88%,
        transparent 100%);
    z-index: 1;
}

/* Optional but recommended: subtle Ken Burns zoom + drift */
.news-slide::after {
    content: "";
    position: absolute;
    inset: -10%;                 /* extra room for zoom & movement */
    background: inherit;
    background-size: 115% auto;  /* start slightly zoomed in */
    background-position: 50% 50%;
    transform: scale(1.00);
    animation: kenburns var(--hold) ease-in-out infinite;
    opacity: 0.94;               /* very slight vignette feel */
    z-index: 0;
}

.news-slide.is-active::after {
    animation-play-state: running;
}



/* Content */
.news-content{
  position: relative; z-index: 1;
  height: 100%;
  padding: clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  color: #fff;
}
.news-content .left{ padding-left: 30vh; }
.news-content .left h2 span{ color: #fff; }
.news-content .left h2{
  margin: 0 0 12px;
  font: 800 clamp(36px, 6.5vw, 64px)/1.04 "Manrope Bold";
  color: #07B0B2;
}
.news-content .left .strap{
  margin: 10px 0 18px;
  font: 400 clamp(16px, 2.1vw, 20px)/1.2 "Manrope Regular";
  color: #FFFFFF80;
}
.news-content .left .strap span{ color:#07B0B2; }
/* Only apply on 1280×800 and similar small laptops */
@media screen and (max-width: 1280px) {
  .news-content .right {
    padding-right: 0;
  }

  .news-content .left {
    padding-left: 0;
  }
}
.btn-teal {
    display: inline-block;
    padding: 16px;                     /* you already had this */
    background: #07B0B2;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font: 400 16px / 1 "Lucida Regular";
    transition: all 0.5s ease-in-out;

    /* THESE 3 LINES ARE THE FIX → perfect centering + fixed size */
    width: 158px;
    height: 48px;
    line-height: 1;                 /* vertically center */
    text-align: center;                /* horizontally center */
    box-sizing: border-box;            /* VERY IMPORTANT – keeps 158×48 exact */
}
.btn-teal:hover{ background:#fff;color:#07B0B2;}
.news-content .right{
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
  font: 400 clamp(14px, 1.3vw, 16px)/1.6 "Lucida Regular";
  color: rgba(255,255,255,.92);
  padding-right: 30vh;
}

/* Dots */
.news-pagination {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  align-items: center; /* Center items vertically */
}

.news-pagination .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  position: relative;
  overflow: hidden;
  /* Adjust vertical position to center with active dot (28px height) */
  margin-top: 5px; /* (28px - 8px) / 2 = 10px to shift inactive dots up */
}

.news-pagination .dot.is-active {
  width: 8px;
  height: 28px; /* Final height */
  background: rgba(255, 255, 255, .45);
  margin-top: 0; /* Reset margin for active dot */
}

.news-pagination .dot.is-active::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: #fff;
  transform-origin: bottom; /* Grow from bottom to top */
  animation: fill var(--hold) linear forwards;
}

@keyframes fill {
  from {
    transform: scaleY(0); /* Start at 0 height from bottom */
  }
  to {
    transform: scaleY(1); /* Grow to full height (28px) */
  }
}

/* Partners */
.partners{ background:#eef2f2; padding: clamp(32px, 6vw, 72px) 20px; }
.partners__container{
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 25px;
  padding-bottom: 8vh;
}
.partners__title{
  margin: 0 0 clamp(18px, 3vw, 28px);
  font: 800 clamp(22px, 3.6vw, 40px)/1 "ManropeRegular", Arial, sans-serif;
  color: #a1a1a1;
}
.partners__primary{
  display: grid;
  grid-template-columns: 0fr 0fr;
  align-items: center;
  gap: clamp(20px, 8vw, 120px);
  padding: clamp(8px, 2.5vw, 16px) 0 clamp(12px, 3vw, 24px);
}
.partners__primary .partner{
  height: clamp(80px, 12vw, 120px);
  display: grid;
  place-items: normal;
}
.partners__primary .partner img{
  max-height: 100%;
  width: auto;
  height: 206px;
  object-fit: contain;
}
.partners__divider{
  height: 1px;
  border: 0;
  background: rgba(7,176,178, .25);
  margin: 97px 0 0px 0px;
}
.partners__grid{
  list-style: none; margin: 0; padding: 0;

  /* This is the normal static grid (used elsewhere on the site) */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: clamp(18px, 5vw, 58px);
}

/* This forces ONLY the scrolling carousel to stay flex – this is the real fix */
#partnersGrid,
.partners__slider-wrapper .partners__grid {
  display: flex !important;
  grid-template-columns: none !important;
}
/* 5 logos perfectly visible at once – this is the final fix */
#partnersGrid .partner,
.partners__slider-wrapper .partner {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#partnersGrid .partner img,
.partners__slider-wrapper .partner img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner img{ transition: filter .2s ease, transform .2s ease; }
.partner:hover img{ transform: translateY(-2px); }
/* Events */
.events-section {
  padding: clamp(24px, 5vw, 48px) 16px;
  background: #eef2f2;
  padding-bottom: 12vh;
}

.events-card {
  max-width: 1300px;
  margin: 0 auto;
  background: #fff;
  border-radius: 48px;
  box-shadow: 0 30px 60px rgba(7, 176, 178, .12);
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
  flex-wrap: wrap;
}

.event-media {
  flex: 1 1 640px;
  min-width: 320px;
}

.event-side {
  flex: 1 1 420px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/* YOUR ORIGINAL STYLES — 100% PRESERVED */
.media-frame {
  position: relative;
  height: clamp(320px, 48vh, 520px);
  border-radius: 36px;
  overflow: hidden;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Replace video → iframe while keeping exact same look */
.video-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 36px;           /* matches parent */
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;             /* same visual feel as your old video */
  display: block;
}

.media-nav {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 0;
  background: rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  font: 100 40px/1 Lucida Regular;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}

.media-nav:hover {
  background: rgba(255, 255, 255, .9);
  transform: scale(1.04);
}

.media-nav.prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%); /* Vertical center within frame */
}

.media-nav.next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%); /* Vertical center within frame */
}

.thumbs-wrap {
  position: relative;
  margin-top: 8vh;
 
}

#eventThumbs {
  overflow-y: hidden;
}

.thumbs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thumbs::-webkit-scrollbar {
  display: none;
}

.thumb {
  width: 78px;
  height: 78px;
  padding: 4px;
  border-radius: 22px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  cursor: pointer;
  transition: border-color .5s ease, box-shadow .5s ease, transform .5s ease;
  flex: 0 0 auto;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}


.thumb.is-active {
  border-color: #07B0B2;
  width: 80px;
  height: 80px;
}

.thumb-scroll {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(7, 176, 178, .18);
  color: #066e70;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease;
}

.thumb-scroll:hover {
  background: rgba(7, 176, 178, .28);
}

.thumb-scroll.left {
  left: 0;
}

.thumb-scroll.right {
  right: 0;
}

/* Hide thumb-scroll if less than or equal to 4 thumbs */
.thumb-scroll.hidden {
  display: none;
}

.event-sep {
  height: 2px;
    border: 0;
    background: #e8f2f2;
    margin: 20px 0 12px;
    width: 85%;
}

.event-title {
  margin: 0;
  font: 700 clamp(22px, 2.6vw, 32px)/1 "Manrope Bold";
  color: #0b0b0b;
}

.event-date {
  margin: 10px 0 6px;
  font: 400 14px/1.2 "Lucida Regular";
  color: #8aa1a1;
}

.event-desc {
  margin: 0;
  font: 400 14px/1.7 "Lucida Regular";
  color: #263333;
  padding-bottom:20px;
}/* Footer */
.site-footer {
  text-align: center;
  padding: 20px;
  background: #111;
  color: #fff;
}

/* ===== Full-width, scrollbar-safe setup ===== */
:root {
  --sbw: calc(100vw - 100%);
}

.connect-footer {
  background: #f0f2f3;
  padding-block: 18px 36px;
  padding-inline: 0;
  height: auto; /* Changed from fixed 262px for better responsiveness */
  min-height: 262px;
}

.connect-wrap {
  width: calc(100vw - var(--sbw));
  max-width: 100%; /* Prevent overflow issues */
  margin-left: calc(50% - 50vw + var(--sbw)/2);
  margin-right: calc(50% - 50vw + var(--sbw)/2);
  background: #CFEAEB;
  border-radius: clamp(40px, 10vw, 120px) clamp(40px, 10vw, 120px) 0 0; /* Responsive curve */
  box-shadow: 0 30px 60px rgba(7,176,178,.15);
  display: flex;
  flex-direction: row; /* Default: row for larger screens */
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  --teal: #07B0B2;
  padding: clamp(20px, 4vw, 60px) clamp(24px, 6vw, 115px); /* Increased max for better spacing on large screens */
  padding-top: max(9vh, 40px); /* Ensure minimum top padding */
  box-sizing: border-box;
}

.connect-left,
.connect-right {
  min-width: 280px; /* Slightly reduced min-width for smaller screens */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* Allow growing/shrinking */
}

.connect-left {
  flex-direction: row;
  gap: clamp(14px, 2.6vw, 24px);
  text-align: center;
}

.connect-logo {
  width: clamp(72px, 8vw, 120px);
  height: auto;
  display: block;
}

.connect-title {
  margin: 0;
  font: 800 clamp(28px, 5vw, 64px)/1.05 "Manrope Bold";
  text-align: left;
  color: #fff;
}

.connect-title span {
  color: #07B0B2;
}

.connect-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: rgba(255,255,255,.7);
  margin-inline: clamp(12px, 2vw, 24px);
}

.connect-right {
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 16px;
  text-align: center;
}

.contact-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

.icon-square {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-text {
  font: 400 clamp(13px, 1.8vw, 14px)/1.5 "Lucida Regular";
  color: #0a0a0a;
  text-align: left;
}

.contact-text a {
  color: inherit;
  text-decoration: none;
  font-family: 'Lucida DM';
  border-bottom: 1px dotted transparent;
}

.contact-text a:hover {
  border-bottom-color: currentColor;
}

.socials {
     max-width: 38vh;
    float: left;
    position: relative;
}

.socials h4 {
  margin: 0 0 6px;
  font: 800 clamp(14px, 2vw, 16px)/1.2 "Lucida DM";
  color: #111;
  text-align: left;
}

.socials p {
  margin: 0 0 6px;
  font: 400 clamp(11px, 1.5vw, 12px) "Lucida Regular";
  color: #213;
  text-align: left;
  width: 100%; /* Changed from fixed 53% for better mobile fit */
}

.social-icons {
  display: block;

}

.social {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--teal) inset;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.social:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(7,176,178,.22);
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 900px) {
  .connect-wrap {
    flex-direction: column;
    text-align: center;
    padding-top: clamp(30px, 8vh, 60px);
  }

  .connect-left {
    flex-direction: column;
    text-align: center;
  }

  .connect-title {
    text-align: center;
  }

  .connect-divider {
    display: none; /* Hide divider on mobile as layout is stacked */
  }

  .contact-list {
    max-width: 300px;
  }

  .contact-list li {
    justify-content: flex-start;
  }

  .socials h4,
  .socials p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    padding-left: 27px;
  }

  .socials p {
    width: 60%;
  }
}

@media (max-width: 480px) {
  .connect-left,
  .connect-right {
    min-width: auto;
    width: 90%;
  }

  .icon-square,
  .social {
    width: 40px;
    height: 40px;
  }

  .contact-text {
    font-size: 13px;
  }
}

/* ====== Base helpers ====== */
body.no-scroll{ overflow:hidden; }
/* ====== Modal shell ====== */
.mm-modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000000 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s .25s;
}
.mm-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .25s ease, visibility 0s;
}
.mm-modal.debug {
  /* Removed red border and yellow outline */
}
.mm-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(2px) !important;
}

/* ====== Dialog ====== */
.mm-dialog {
  position: relative !important;
  width: min(1100px, 92vw) !important;
  max-height: min(92vh, 860px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.28) !important;
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  z-index: 1000001 !important;
  height: 770px;
  
}
.dss{
    display:none;color:#d33;margin-top:6px;font-size:13px;
}
.des{
    display:none;color:#d33;margin-top:6px;font-size:13px;
}

/* ====== Close (always visible, above everything) ====== */
.mm-close {
  position: absolute !important;
  z-index: 1000002 !important;
  top: 6vh !important;
  left: 5vh !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  background: #fff !important;
  color: #0b0b0b !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
}
.mm-close:after { content: "✕"; font: 700 16px/1 system-ui; }

/* Wrapper with exact geometry + spacing */
.mm-left {
  --pad: 0px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: var(--pad) !important;
  min-height: 520px !important;
  border-radius: 80px 25px 25px 80px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #ccc !important; /* Debug background */
}

.mm-left__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.mm-left__img,
.mm-left-text {
  display: none !important;
}
.mm-left-step1 {
  display: block !important;
}
.mm-left-step2 {
  display: none !important;
}
.mm-modal.is-step2 .mm-left-step1 {
  display: none !important;
}
.mm-modal.is-step2 .mm-left-step2 {
  display: block !important;
}

.mm-left::after {
  content: "" !important;
  position: absolute !important;
  inset: var(--pad) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(7,176,178,0) 0%, rgba(7,176,178,1) 100%) !important;
}

.mm-left-content {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
}
.mm-left-content h2 {
  font: 800 clamp(22px, 3.6vw, 54px) / 0.87 "Manrope Bold" !important;
  bottom: 2vh !important;
  z-index: 9 !important;
  position: absolute !important;
  left: 7vh !important;
}
.mm-left-content h2 span {
  color: #000 !important;
}
.mm-left > * { position: relative !important; }

@media (max-width: 680px) {
  .mm-left {
    padding: 28px 0 28px 28px !important;
    border-radius: 72px 20px 20px 72px !important;
    min-height: 420px !important;
  }
}

/* ====== Right pane (form) ====== */
.mm-right {
  padding: clamp(16px, 2.2vw, 28px) !important;
  overflow-y: auto !important;
  padding: 60px !important;
  background: #f0f0f0 !important; /* Debug background */
}

/* ===== Step header (matches screenshot) ===== */
.mm-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(14px, 2vw, 24px) !important;
  margin-bottom: clamp(14px, 2.2vw, 22px) !important;
  margin-left: 20px !important;
}

/* Left vertical double-pill icon */
.mm-step-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding-top: 20px !important;
}
.mm-step-icon .pill {
  width: 24px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 3px #9FE3E1 !important;
}
.mm-step-icon .pill.top {
  box-shadow: inset 0 0 0 3px #07B0B2 !important;
}
.mm-step-icon .link {
  width: 3px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #9FE3E1 !important;
}

/* Right pill chip with two lines */
.mm-step-chip {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(6px, .9vmin, 8px) !important;
  padding: 20px !important;
  border-radius: 19px !important;
  background: linear-gradient(180deg, #EDF8F8 0%, #E7F6F6 100%) !important;
  box-shadow: 0 18px 44px rgba(7,176,178,.12) inset !important, 0 1px 0 rgba(0,0,0,.04) inset !important;
  width: auto !important;
}

/* Top line: "Step 1/2" */
.mm-step-meta {
  font: 400 12px/1.2 "Lucida Regular", system-ui, sans-serif !important;
  color: #223 !important;
  letter-spacing: .2px !important;
}
.mm-step-meta b { font-weight: 800 !important; }
.mm-step-meta .muted { color: #9AA6AD !important; font-weight: 700 !important; }

/* Bottom line: big title */
.mm-step-title {
  font: 700 14px/1 "Manrope Bold", system-ui, sans-serif !important;
  color: #0b0b0b !important;
}

/* Small screens */
@media (max-width: 900px) {

  .mm-step-icon .pill { width: 58px !important; }
}

/* “Joining as” pill */
.mm-tier-card {
  position: relative !important;
  margin: 6px 0 22px !important;
  background: #FFF !important;
  border-radius: 28px !important;
  padding: 50px 18px 20px 76px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 18px 32px rgba(7, 176, 178, .26) !important;
  width: 95% !important;
}
/* Existing styles */
.mm-tier-icon {
  position: absolute !important;
  left: 18px !important;
  bottom: -10px !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 58px !important;
  border-radius: 18px !important;
  display: grid !important; 
  place-items: center !important;
  overflow: visible !important;
}

.mm-tier-icon::after {
  content: "Joining as" !important;
  position: absolute !important;
  top: -3vh !important;
  left: 75% !important;
  transform: translateX(-50%) !important;
  font: 600 12px/1 "Lucida Regular" !important;
  color: rgba(7, 176, 178, 0.4) !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

.mm-led {
     width: 32px;
    height: 50px;
    background: #07B0B233;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 60px;
}
.btns{
    margin-top:22px;display:flex;gap:12px;align-items:center;
}
.mm-subtle {margin-top: 25px !important; font: 400 12px/1.2 "Lucida Regular" !important; color: #07B0B2B2 !important; }
.mm-tier-title { margin: 0 !important; font: 800 clamp(20px,2.6vw,32px)/1.15 "Manrope Bold" !important; color: #0b0b0b !important; }
.mm-price { margin: 2px 0 0 !important; font: 400 18px/1.1 "Lucida Regular" !important; color: #9bb1b1 !important; }
.mm-price strong { font: 800 24px/1 "Lucida Regular" !important; color: #0b0b0b !important; }
.mm-tier-edit {
  width: 54px !important; height: 54px !important; border: 0 !important; border-radius: 18px !important; cursor: pointer !important;
  background: #e9f6f7 !important; color: #0d3b3c !important; display: grid !important; place-items: center !important; font-size: 20px !important;
  box-shadow: 0 10px 24px rgba(7,176,178,.12) inset !important; transition: filter .2s ease, transform .15s ease !important;
}
.mm-tier-edit:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; }

/* Fields */
.mm-fields { display: block !important; }
.mm-fields.is-active { display: block !important; }
.mm-group { margin-bottom: 16px !important; }
.mm-label { display: block !important; margin: 0 0 8px; font: 700 14px/1.1 "Manrope Regular" !important; color: #0b0b0b !important; }
.req { color: #ff4d4f !important; margin-left: 4px !important; }

.mm-3col { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
.mm-row.two { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: start !important; }
.mm-row.two .mm-group { margin: 0 !important; padding-bottom: 29px; }
.mm-row.two .mm-input { width: 100% !important; display: block !important; }

.mm-input {
  position: relative !important;
  border-radius: 999px !important;
  background: #f7fbfb !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset !important;
}
.mm-input.invalid {
  box-shadow: 0 0 0 2px #ff4d4f inset !important; /* Red inner border for invalid fields */
}
.mm-input input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  font: 400 14px/1.2 "Lucida Regular" !important;
  color: #07B0B280 !important;
}
.mm-input input::placeholder { color: #9ab3b3 !important; }
.mm-input.with-icon input { padding-left: 42px !important; }
.i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  opacity: .78 !important;
  color: #067a7c !important;
  font-style: normal !important;
}
.i-user::before { content: "👤" !important; }
.i-calendar::before {
  content: '';
  background-image: url('../images/calendar.png') !important;
  width: 22px;
  height: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.i-mail::before {
  content: '';
  background-image: url('../images/mail.png') !important;
  width: 22px;
  height: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.i-phone::before {
  content: '';
  background-image: url('../images/phone.png') !important;
  width: 22px;
  height: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.i-brief::before {
  content: '';
  background-image: url('../images/brief.png') !important;
  width: 22px;
  height: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.mm-input:focus-within { box-shadow: 0 0 0 2px rgba(7,176,178,.28) !important, 0 1px 0 rgba(0,0,0,.04) inset !important; }
.mt{margin-top: 37px;}
.mtt{margin-top: 20px;  width: fit-content;}
.mb{margin-bottom: 25px !important;}
/* Gender pills */
.mm-pills { display: block !important; gap: 12px !important; align-items: center !important; color: #07B0B280!important; }
.pill { display: inline-flex !important; align-items: center !important; cursor: pointer !important; user-select: none !important; }
.pill input { display: none !important; }
.pill span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font: 400 14px/1.2 "Lucida Regular" !important;
  color: #07B0B280 !important;
  transition: box-shadow .2s ease !important, background .2s ease !important;
  min-width: 130px !important;
  background: #fff !important;
}
.mm-pills .pill input[type="radio"]:checked + span {
  box-shadow: 0 0 0 2px #07b0b2 inset !important;
}
.mm-pills .pill.invalid input[type="radio"]:checked + span {
  box-shadow: 0 0 0 2px red inset !important;
  background: #d32f2f;
  color: white;
  border-color: #d32f2f;
}

.custom-upload-btn {
  display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 23px !important;
    background-color: #ffffff;
    color: #07B0B2;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 0 0 2px #07b0b2 inset !important;
    border-radius: 24px;
}


.upload-icon {
  width: 20px; /* Adjust icon size */
  height: 20px; /* Adjust icon size */
  object-fit: contain; /* Ensure icon scales properly */
}

.upload-text {
  font-family: "Lucida Regular", sans-serif; /* Match your theme */
}
/* CTA */
.mm-actions { margin-top: 20px !important; }
.mm-primary {
  min-width: 260px !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #07B0B2 ;
  color: #fff ;
  padding: 16px 24px !important;
  font: 800 15px/1 "Manrope Regular" !important;
  transition: transform .15s ease !important, filter .2s ease !important;
  float: right !important;
}
.btt{
  color: #000;
  background-color: #fff;
}
.mm-primary:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; }

/* ====== Responsive ====== */
@media (max-width: 1060px) {
  .mm-3col { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 900px) {
  .mm-dialog { grid-template-columns: 1fr !important; width: min(720px, 94vw) !important; }
  .mm-left { height: 38vh !important; min-height: 280px !important; }
  .mm-left-content h2 { font-size: clamp(22px, 6vw, 34px) !important; }
  .mm-right { max-height: 100% !important; }
  .mm-3col { grid-template-columns: 1fr !important; }
  .mm-row.two { grid-template-columns: 1fr !important; }
  .mm-actions { display: flex !important; justify-content: center !important; }
}

/* Plan picker inserted inside .mm-tier-card */
.mm-plan-picker {
  margin-top: -14vh !important;
  font-family: "Lucida Regular", system-ui, sans-serif !important;
  
}

/* Style the ul as a grid */
.mm-plan-picker .plan-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Style each li as a card container */
.mm-plan-picker .plan-options li {
  display: flex !important;
  justify-content: center !important;
}

/* Style buttons as cards */ 
.mm-plan-picker .plan-options button {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 30px !important;
  background: #f9f9f9 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #333 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Hover effect for buttons */
.mm-plan-picker .plan-options button:hover {
  background: #e0e0e0 !important;
  border-color: #aaa !important;
}

/* Selected state for the active plan */
.mm-plan-picker .plan-options button.selected {
  border-color: #07b0b2 !important;
  background: #e6f7f7 !important;
  box-shadow: 0 0 0 2px #07b0b2 inset !important;
}

/* Ensure plan picker is hidden by default */
.mm-plan-picker[hidden] {
  display: none !important;
}

/* STEP VISIBILITY - SIMPLE & BULLETPROOF */
.mm-step1-fields,
.mm-form-step {
  display: none;
}

.mm-step1-fields.is-active,
.mm-form-step.is-active {
  display: block;
}

/* Optional: smooth fade (purely visual) */
.mm-step1-fields,
.mm-form-step {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mm-step1-fields.is-active,
.mm-form-step.is-active {
  opacity: 1;
}
/* small tweaks for file/select styling */
.mm-input.mm-file input[type="file"] {
  padding: 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.mm-input.mm-select select {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #fff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Validation error style for all form elements */
.mm-input.invalid,
.mm-input.invalid input,
.mm-input.invalid select,
.mm-pills .pill.invalid,
.mm-checkbox.invalid,.custom-upload-btn.invalid {
  box-shadow: 0 0 0 1px #ff0000 inset !important;
  border: none !important; /* Remove any conflicting borders */
  outline: none !important; /* Remove any conflicting outlines */
}
.mm-pills .pill{border-radius: 20px;}
/* Ensure file input occupies space when hidden */
.mm-input.mm-file {
  visibility: visible;
  box-sizing: border-box;
}

.mm-input.mm-file.visible {
  visibility: visible;
}
.bank{
  width:100%;padding:12px 95px;border-radius:999px;border:0;background:#fff;color:#07B0B280; font-family: "Lucida Regular";
}
/* Optional: Smooth transition for validation effect */
.mm-input,
.mm-input input,
.mm-input select,
.mm-pills .pill,
.mm-checkbox {
  transition: box-shadow 0.3s ease;
}

.mg{
  margin-top: -20vh;
}
.mgf{
  margin-top: -13vh;
}


/* Fonts */
@font-face {
  font-family: 'LucidaBold';
  src: url('../fonts/lusida-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LucidaDM';
  src: url('../fonts/lusida-dm.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LucidaRegular';
  src: url('../fonts/lusida-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ManropeBold';
  src: url('../fonts/manrope-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ManropeRegular';
  src: url('../fonts/manrope-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Icomoon Icon Font */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?og7s7x');
  src:  url('../fonts/icomoon.eot?og7s7x#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?og7s7x') format('truetype'),
    url('../fonts/icomoon.woff?og7s7x') format('woff'),
    url('../fonts/icomoon.svg?og7s7x#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Icon definitions */
.icon-tiktok:before   { content: "\e900"; }
.icon-instagram:before { content: "\ea92"; }
.icon-linkedin2:before { content: "\eaca"; }
/* Floating left container */
.social-icons-float {
  overflow: hidden;           /* clears the floats */
  padding: 0;
  margin: 0;
  list-style: none;
  margin-right:11vh;
}

/* Each square floats left */
.social-icons-float .icon-square2 {
  float: left;                /* ← THIS makes them float left */
  margin-right: 16px;         /* space between icons */
  margin-bottom: 16px;        /* space when they wrap */
}

/* Square button style */
.icon-square2 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--teal) inset;
  transition: all 0.25s ease;
}

/* Make the <a> fill the entire square */
.icon-square2 a {
  display: grid;
  text-decoration: none;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  font-size: 20px; /* adjust icon size */
}

/* Hover effect (optional but nice) */
.icon-square2:hover {
  background: var(--teal);
  color: #fff;
}
/* Apply globally */
html, body { font-family: 'LucidaRegular', Arial, sans-serif; }