<style>
/* =============================================== */
/* APEX CONTAINER SCOPED STYLES */
/* =============================================== */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

.apex-container {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #2D2A26;
background-color: #F5F5F0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.apex-container *,
.apex-container *::before,
.apex-container *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.apex-container .font-serif {
font-family: 'Playfair Display', serif !important;
}/* Hero Logo - Responsive */
.hero-logo-main{height:192px;object-fit:cover;margin-bottom:24px;opacity:0;animation:fadeInUp .8s ease forwards .2s;}

/* Hero Subtitle - Responsive */
.hero-subtitle{text-align:right!important;margin-right:640px!important;font-size:14px!important;line-height:1.6;color:#fff;margin-bottom:32px;opacity:0;animation:fadeInUp .8s ease forwards .4s;}

/* Hero CTA Wrapper */
.hero-cta-wrap{display:flex;align-items:center;gap:24px;margin-top:32px;}

/* Watch Our Story Button */
.hero-cta{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#CAA777 0%,#B8935E 100%);color:#fff;padding:16px 32px;border-radius:50px;text-decoration:none;font-weight:600;font-size:16px;transition:all 0.3s;box-shadow:0 4px 20px rgba(202,167,119,0.3);white-space:nowrap;opacity:0;animation:fadeInUp .8s ease forwards .6s;}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(202,167,119,0.5);}
.hero-cta i.fa-circle-play{margin-right:4px;}

/* Social Icons Container */
.social-icons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeInUp .8s ease forwards .8s;}

/* Individual Social Icons */
.social-icons a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:all 0.3s;}
.social-icons a:hover{background:linear-gradient(135deg,#CAA777 0%,#B8935E 100%);transform:translateY(-3px);box-shadow:0 4px 15px rgba(202,167,119,0.4);border-color:rgba(202,167,119,0.6);}
.social-icons i{font-size:18px;}

/* Staggered animation for each social icon */
.social-icons a:nth-child(1){animation:fadeInUp .8s ease forwards 1s;}
.social-icons a:nth-child(2){animation:fadeInUp .8s ease forwards 1.1s;}
.social-icons a:nth-child(3){animation:fadeInUp .8s ease forwards 1.2s;}
.social-icons a:nth-child(4){animation:fadeInUp .8s ease forwards 1.3s;}
.social-icons a:nth-child(5){animation:fadeInUp .8s ease forwards 1.4s;}

/* Fade In Up Animation Keyframes */
@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(30px);}
  100%{opacity:1;transform:translateY(0);}
}

/* Video Player Fixed */
.video-player-fixed{position:fixed;bottom:20px;right:20px;width:320px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.3);z-index:9999;overflow:hidden;display:none;transition:all 0.4s ease;}
.video-player-fixed.show{display:block;animation:fadeInUp .6s ease forwards;}
.video-player-fixed.expanded{width:360px;height:640px;bottom:20px;right:20px;}
.video-player-fixed video{width:100%;height:100%;object-fit:cover;}

/* Expand Button (replacing close button) */
.video-expand-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.7);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all 0.3s;}
.video-expand-btn:hover{background:rgba(202,167,119,0.9);transform:scale(1.1);}
.video-expand-btn i{font-size:16px;transition:transform 0.3s;}
.video-player-fixed.expanded .video-expand-btn i{transform:rotate(180deg);}

/* Tablet Responsive */
@media(max-width:1024px){
  .hero-logo-main{height:140px;}
  .hero-subtitle{text-align:right!important;margin-right:200px!important;font-size:16px!important;}
  .hero-cta-wrap{gap:16px;}
  .hero-cta i.fa-circle-play{font-size:18px;}
  .social-icons a{width:40px;height:40px;}
  .social-icons i{font-size:16px;}
  .video-player-fixed.expanded{width:280px;height:498px;}
}

/* Mobile Responsive */
@media(max-width:768px){
  .hero-logo-main{height:100px;margin-bottom:16px;}
  .hero-subtitle{text-align:center!important;margin-right:0!important;font-size:14px!important;margin-bottom:24px!important;padding:0 20px!important;line-height:1.6!important;}
  .hero-cta-wrap{flex-direction:column;align-items:center;gap:20px;margin-top:24px;}
  .hero-cta{padding:14px 28px;font-size:15px;}
  .hero-cta i.fa-circle-play{font-size:18px;}
  .social-icons{justify-content:center;gap:10px;}
  .social-icons a{width:42px;height:42px;}
  .video-player-fixed{width:200px;height:112px;bottom:80px;right:10px;}
  .video-player-fixed.expanded{width:280px;height:498px;bottom:10px;right:10px;}
}

/* Extra Small Mobile */
@media(max-width:480px){
  .hero-logo-main{height:80px;}
  .hero-subtitle{font-size:13px!important;}
  .hero-cta{padding:12px 24px;font-size:14px;}
  .hero-cta i.fa-circle-play{font-size:16px;}
  .social-icons a{width:38px;height:38px;}
  .social-icons i{font-size:15px;}
  .video-player-fixed.expanded{width:240px;height:426px;}
}

/* Override any conflicting apex-container styles */
.apex-container .hero-subtitle{
  text-align:right!important;
  margin-right:540px!important;
  font-size:14px!important;
  line-height:1.25!important;
  color:#fff!important;
  margin-bottom:32px!important;
  opacity:0;
  animation:fadeInUp .8s ease forwards .4s;
}

@media(max-width:768px){
  .apex-container .hero-subtitle{
    text-align:center!important;
    margin-right:0!important;
    font-size:14px!important;
    padding:0 20px!important;
    line-height:1.6!important;
  }
}

@media(max-width:480px){
  .apex-container .hero-subtitle{
    font-size:13px!important;
  }
}
/* =============================================== */
/* LAYOUT & CONTAINER */
/* =============================================== */

.apex-container .container-max {
max-width: 1200px;
/* margin-left: auto; */
/* margin-right: auto; */
padding-left: 24px;
padding-right: 24px;
}

.apex-container .section {
padding: 64px 24px;
}

@media (min-width: 768px) {
.apex-container .container-max {
padding-left: 40px;
padding-right: 40px;
}

.apex-container .section {
padding: 96px 40px;
}
}

/* =============================================== */
/* HEADER / NAVIGATION */
/* =============================================== */

.apex-container .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
opacity: 90%;
}

.apex-container .header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}

@media (min-width: 768px) {
.apex-container .header-inner {
padding: 0 40px;
}
}

.apex-container .logo-wrapper {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}

.apex-container .logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #4A5D4F;
}

.apex-container .logo-text {
font-family: 'Playfair Display', serif;
font-size: 20px;
letter-spacing: -0.02em;
color: #2D2A26;
}

.apex-container .nav-menu {
  display: none;
  gap: 40px;
  margin-left: auto !important;

  /* ALIGN TO container-max */
  /* padding-right: calc((100vw - 1200px) / 2 + 24px) !important; */
}

@media (max-width: 1200px) {
  .apex-container .nav-menu {
    padding-right: 24px !important;
  }
}

@media (min-width: 768px) {
  .apex-container .nav-menu {
    display: flex !important;
  }
}


.apex-container .nav-item {
font-size: 12px;
color: #ffffff;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color 0.2s ease;
}

.apex-container .nav-item:hover {
color: #2D2A26;
}

/* .apex-container .nav-item.active {
color: #4A5D4F;
font-weight: 500;
} */

.apex-container .btn {
padding: 12px 24px;
border-radius: 9999px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.apex-container .btn-primary {
background-color: rgb(202 170 119);
color: white;
}

.apex-container .btn-primary:hover {
background-color: #3A4D39;
}

.apex-container .btn-outline {
background-color: transparent;
color: #2D2A26;
border: 1px solid #2D2A26;
}

.apex-container .btn-outline:hover {
background-color: rgba(45, 42, 38, 0.05);
}

.apex-container .btn-ghost {
background-color: transparent;
color: #2D2A26;
}

.apex-container .btn-ghost:hover {
background-color: #F5F5F0;
}

.apex-container .mobile-menu-btn {
display: block;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}

@media (min-width: 768px) {
.apex-container .mobile-menu-btn {
display: none;
}
}

/* Mobile Menu Overlay */
.apex-container .mobile-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.apex-container .mobile-overlay.active {
opacity: 1;
pointer-events: auto;
}

.apex-container .mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background: rgb(202 170 119);
z-index: 1000;
padding: 32px 24px;
transition: right 0.3s ease;
overflow-y: auto;
}

.apex-container .mobile-menu.active {
right: 0;
}

.apex-container .mobile-menu-items {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 64px;
}

.apex-container .mobile-menu-item {
font-size: 18px;
padding: 12px 0;
border-bottom: 1px solid #E8E6E1;
}
.apex-container .hero-cta{
display:inline-block;
/* margin-top:18px; */
padding:12px 28px;
font-size:16px;
font-weight:600;
color:#58595b;
background:rgb(202 170 119);
border-radius:28px;
text-decoration:none;
box-shadow:0 6px 16px rgba(0,0,0,.25);
transition:.3s;
opacity:0;
transform:translateY(30px);
animation:fadeInUp .8s ease forwards .8s;
}
.apex-container .hero-cta:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.hero-cta1{
display:inline-block;
margin-top:18px;
padding:12px 28px;
font-size:14px;
font-weight:600;
color:#fff;
/* background:rgb(202 170 119); */
/* border-radius:28px; */
text-decoration:none;
box-shadow:0 6px 16px rgba(0,0,0,.25);
transition:.3s;
opacity:0;
transform:translateY(30px);
animation:fadeInUp .8s ease forwards .8s;
}
/* =============================================== */
/* TABS SYSTEM */
/* =============================================== */

.apex-container .tab-content {
display: none;
}

.apex-container .tab-content.active {
display: block;
}

/* =============================================== */
/* HERO SECTION */
/* =============================================== */

.apex-container .hero-section {
position: relative;
height: 95vh;
overflow: hidden;
margin-top: -80px;
}

.apex-container .hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.apex-container .hero-image {
width: 100%;
height: 100%;
object-fit: cover;
/* transform: scaleX(-1); */
}

.apex-container .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
}

.apex-container .hero-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 24px;
}

@media (min-width: 768px) {
.apex-container .hero-content {
padding: 40px;
}
}

.apex-container .hero-text {
max-width: 1200px;
color: white;
margin-top: 360px;
}

@media (min-width: 768px) {
.apex-container .hero-text {
margin-top: 120px;
}
}

.apex-container .hero-title {
font-family: 'Playfair Display', serif;
font-size: 48px;
line-height: 1.1;
margin-bottom: 32px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards 0.4s;
}

@media (min-width: 768px) {
.apex-container .hero-title {
font-size: 72px;
}
}

.apex-container .hero-subtitle {
font-size: 14px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards 0.6s;
text-align: ;
margin-bottom:24px;

}

@media (min-width: 768px) {
.apex-container .hero-subtitle {
font-size: 14px;
}
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* =============================================== */
/* PARTNER ACCORDION */
/* =============================================== */

.apex-container .partners-section {
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid #E5E7EB;
}

.apex-container .section-label {
text-align: center;
font-size: 12px;
font-weight: 700;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 64px;
}

@media (min-width: 768px) {
.apex-container .section-label {
margin-bottom: 96px;
}
}

.apex-container .partner-accordion {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
min-height: 800px;
}

@media (min-width: 768px) {
.apex-container .partner-accordion {
flex-direction: row;
gap: 24px;
min-height: 500px;
}
}

.apex-container .partner-item {
position: relative;
border-radius: 32px;
overflow: hidden;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
opacity: 0.7;
border: 1px solid transparent;
}

.apex-container .partner-item:hover {
opacity: 1;
}

.apex-container .partner-item.active {
flex: 2;
background-color: white;
border: 1px solid #F3F4F6;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
opacity: 1;
}

.apex-container .partner-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
transition: all 0.5s ease;
}

.apex-container .partner-logo {
height: 64px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.apex-container .partner-logo {
  height: 64px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  
  /* Add these two lines to stop stretching */
  max-width: 100%;
}

.apex-container .partner-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
.apex-container .partner-logo {
height: 64px;
}
}

.apex-container .partner-item.active .partner-logo {
height: 80px;
margin-bottom: 32px;
}

@media (min-width: 768px) {
.apex-container .partner-item.active .partner-logo {
height: 96px;
margin-bottom: 32px;
}
}

.apex-container .partner-item:not(.active) .partner-content {
filter: grayscale(1);
}

.apex-container .partner-details {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
padding: 0 16px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease 0.1s;
}

@media (min-width: 768px) {
.apex-container .partner-details {
bottom: 48px;
}
}

.apex-container .partner-item.active .partner-details {
opacity: 1;
transform: translateY(0);
}

.apex-container .partner-name {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 500;
color: #2D2A26;
margin-bottom: 8px;
}

@media (min-width: 768px) {
.apex-container .partner-name {
font-size: 24px;
margin-bottom: 12px;
}
}

.apex-container .partner-role {
font-size: 10px;
color: rgb(202 170 119);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
}

@media (min-width: 768px) {
.apex-container .partner-role {
font-size: 12px;
}
}

/* =============================================== */
/* MISSION SECTION */
/* =============================================== */

.apex-container .grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}

@media (min-width: 768px) {
.apex-container .grid-2 {
grid-template-columns: 1fr 1fr;
gap: 96px;
}
}

.apex-container .mission-text {
position: relative;
z-index: 10;
}

.apex-container .mission-label {
font-size: 12px;
font-weight: 700;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 24px;
}

.apex-container .mission-title {
font-size: 48px;
line-height: 1.1;
margin-bottom: 40px;
}

@media (min-width: 768px) {
.apex-container .mission-title {
font-size: 72px;
margin-bottom: 56px;
}
}

.apex-container .mission-title-accent {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
color: #4A5D4F;
}

.apex-container .mission-body {
font-size: 18px;
line-height: 1.6;
color: #717182;
font-weight: 300;
margin-bottom: 40px;
}

@media (min-width: 768px) {
.apex-container .mission-body {
font-size: 20px;
}
}

.apex-container .mission-stats {
border-top: 1px solid #E5E7EB;
padding-top: 40px;
margin-bottom: 40px;
}

.apex-container .stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}

.apex-container .stat-number {
font-size: 48px;
font-family: 'Playfair Display', serif;
color: #2D2A26;
margin-bottom: 8px;
}

@media (min-width: 768px) {
.apex-container .stat-number {
font-size: 60px;
}
}

.apex-container .stat-label {
font-size: 10px;
color: #717182;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
}

@media (min-width: 768px) {
.apex-container .stat-label {
font-size: 12px;
}
}

.apex-container .mission-footnote {
font-size: 14px;
color: #717182;
font-weight: 300;
font-style: italic;
line-height: 1.6;
max-width: 448px;
}

@media (min-width: 768px) {
.apex-container .mission-footnote {
font-size: 16px;
}
}

.apex-container .mission-images {
position: relative;
height: 500px;
width: 100%;
margin-top: 48px;
}

@media (min-width: 768px) {
.apex-container .mission-images {
height: 650px;
margin-top: 0;
}
}

.apex-container .mission-img-1 {
position: absolute;
top: 0;
right: 0;
width: 85%;
height: 300px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
z-index: 10;
}

@media (min-width: 768px) {
.apex-container .mission-img-1 {
width: 75%;
height: 420px;
}
}

.apex-container .mission-img-2 {
position: absolute;
bottom: 0;
left: 0;
width: 85%;
height: 280px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
z-index: 20;
border: 8px solid #F5F5F0;
}

@media (min-width: 768px) {
.apex-container .mission-img-2 {
width: 75%;
height: 380px;
}
}

.apex-container .mission-badge {
position: absolute;
top: 50%;
left: 64%;
z-index: 30;
width: 96px;
height: 96px;
background-color: #D4E157;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 6px solid #F5F5F0;
}

@media (min-width: 768px) {
.apex-container .mission-badge {
left: 64%;
width: 128px;
height: 128px;
}
}

.apex-container .mission-badge-text {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 24px;
color: #2D2A26;
}

@media (min-width: 768px) {
.apex-container .mission-badge-text {
font-size: 30px;
}
}

.apex-container .mission-img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* =============================================== */
/* FEATURES SECTION */
/* =============================================== */

.apex-container .features-section {
background: white;
}

.apex-container .features-header {
text-align: center;
max-width: 896px;
margin: 0 auto 80px;
}

.apex-container .features-title {
font-family: 'Playfair Display', serif;
font-size: 40px;
margin-bottom: 24px;
}

@media (min-width: 768px) {
.apex-container .features-title {
font-size: 48px;
}
}

.apex-container .features-desc {
font-size: 16px;
line-height: 1.6;
color: #717182;
}

.apex-container .grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}

@media (min-width: 768px) {
.apex-container .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.apex-container .grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}

.apex-container .feature-card {
padding: 40px;
border-radius: 32px;
background-color: #F5F5F0;
transition: all 0.3s ease;
cursor: pointer;
}

@media (min-width: 768px) {
.apex-container .feature-card {
border-radius: 40px;
}
}

.apex-container .feature-card:hover {
background-color: #E8E6E1;
}

.apex-container .feature-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.apex-container .feature-card:hover .feature-icon {
transform: scale(1.1);
}

.apex-container .feature-icon svg {
width: 28px;
height: 28px;
color: rgb(202 170 119);
}

.apex-container .feature-title {
font-size: 24px;
margin-bottom: 16px;
}

.apex-container .feature-text {
font-size: 16px;
line-height: 1.6;
color: #717182;
}

/* =============================================== */
/* STATS BANNER */
/* =============================================== */

.apex-container .stats-banner {
background-color: rgb(202 170 119);
color: white;
}

.apex-container .grid-3 {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}

@media (min-width: 768px) {
.apex-container .grid-3 {
grid-template-columns: repeat(3, 1fr);
gap: 64px;
border-left: none;
}

.apex-container .grid-3 > div {
border-left: 1px solid rgba(255, 255, 255, 0.2);
padding-left: 32px;
}

.apex-container .grid-3 > div:first-child {
border-left: none;
padding-left: 0;
}
}

.apex-container .grid-3 > div {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 48px;
}

@media (min-width: 768px) {
.apex-container .grid-3 > div {
border-top: none;
padding-top: 0;
}
}

.apex-container .grid-3 > div:first-child {
border-top: none;
padding-top: 0;
}

.apex-container .stat-value {
font-family: 'Playfair Display', serif;
font-size: 56px;
margin-bottom: 24px;
letter-spacing: -0.02em;
opacity: 0;
transform: scale(0.5);
animation: scaleIn 0.8s ease forwards;
}

@media (min-width: 768px) {
.apex-container .stat-value {
font-size: 80px;
}
}

@keyframes scaleIn {
to {
opacity: 1;
transform: scale(1);
}
}

.apex-container .stat-text {
font-size: 14px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}

/* =============================================== */
/* PROJECTS / HIGHLIGHTS */
/* =============================================== */

.apex-container .projects-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 80px;
flex-wrap: wrap;
gap: 24px;
}

.apex-container .projects-label {
font-size: 12px;
font-weight: 700;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 8px;
}

.apex-container .projects-title {
font-family: 'Playfair Display', serif;
font-size: 40px;
}

@media (min-width: 768px) {
.apex-container .projects-title {
font-size: 48px;
}
}

.apex-container .project-card {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding: 24px;
border-radius: 32px;
background-color: white;
border: 1px solid transparent;
transition: all 0.5s ease;
margin-bottom: 40px;
}

@media (min-width: 768px) {
.apex-container .project-card {
grid-template-columns: 1fr 2fr;
gap: 40px;
padding: 32px;
border-radius: 40px;
}
}

.apex-container .project-card:hover {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border-color: #F3F4F6;
}

.apex-container .project-image-wrapper {
height: 288px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
.apex-container .project-image-wrapper {
height: 100%;
min-height: 300px;
}
}

.apex-container .project-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}

.apex-container .project-card:hover .project-image {
transform: scale(1.05);
}

.apex-container .project-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
padding: 24px 0;
}

@media (min-width: 768px) {
.apex-container .project-content {
padding: 24px 24px 24px 0;
}
}

.apex-container .project-badges {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}

.apex-container .badge {
padding: 6px 16px;
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.apex-container .badge-location {
background-color: #F5F5F0;
color: #2D2A26;
}

.apex-container .badge-completed {
background-color: #D1FAE5;
color: #065F46;
}

.apex-container .badge-progress {
background-color: #DBEAFE;
color: #1E40AF;
}

.apex-container .project-title {
font-size: 32px;
transition: color 0.3s ease;
}

@media (min-width: 768px) {
.apex-container .project-title {
font-size: 40px;
}
}

.apex-container .project-card:hover .project-title {
color: rgb(202 170 119);
}

.apex-container .project-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 32px 0;
border-top: 1px dashed #E5E7EB;
border-bottom: 1px dashed #E5E7EB;
}

.apex-container .project-stat-label {
font-size: 12px;
color: #717182;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}

.apex-container .project-stat-value {
font-size: 28px;
font-weight: 500;
}

@media (min-width: 768px) {
.apex-container .project-stat-value {
font-size: 30px;
}
}

.apex-container .project-actions {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}

/* =============================================== */
/* MODAL / DIALOG */
/* =============================================== */

.apex-container .modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(4px);
animation: fadeIn 0.3s ease;
}

.apex-container .modal-overlay.active {
display: flex;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.apex-container .modal-content {
background: #F5F5F0;
border-radius: 32px;
max-width: 896px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
padding: 32px;
position: relative;
z-index: 9999;
animation: slideUp 0.3s ease;
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.apex-container .modal-header {
margin-bottom: 24px;
}

.apex-container .modal-title {
font-family: 'Playfair Display', serif;
font-size: 28px;
color: #2D2A26;
margin-bottom: 8px;
}

.apex-container .modal-desc {
font-size: 14px;
color: #717182;
}

.apex-container .modal-close {
position: absolute;
top: 24px;
right: 24px;
background: white;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}

.apex-container .modal-close:hover {
background-color: #E8E6E1;
}

.apex-container .gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

@media (min-width: 768px) {
.apex-container .gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}

.apex-container .gallery-item {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
height: 240px;
}

.apex-container .gallery-item.featured {
height: 320px;
}

@media (min-width: 768px) {
.apex-container .gallery-item.featured {
grid-column: span 2;
}
}

.apex-container .gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.apex-container .gallery-item:hover .gallery-image {
transform: scale(1.05);
}

/* =============================================== */
/* CTA BANNER */
/* =============================================== */

.apex-container .cta-section {
padding-top: 0;
padding-bottom: 128px;
}

.apex-container .cta-banner {
position: relative;
border-radius: 32px;
overflow: hidden;
background-color: rgb(202 170 119);
color: white;
padding: 32px;
text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
.apex-container .cta-banner {
border-radius: 48px;
padding: 128px;
}
}

.apex-container .cta-pattern {
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
opacity: 0.1;
}

.apex-container .cta-content {
position: relative;
z-index: 10;
max-width: 896px;
margin: 0 auto;
}

.apex-container .cta-title {
font-family: 'Playfair Display', serif;
font-size: 40px;
color: white;
margin-bottom: 24px;
}

@media (min-width: 768px) {
.apex-container .cta-title {
font-size: 56px;
margin-bottom: 40px;
}
}

.apex-container .cta-text {
font-size: 20px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
}

@media (min-width: 768px) {
.apex-container .cta-text {
font-size: 24px;
}
}

.apex-container .cta-button {
background-color: white;
color: rgb(202 170 119);
padding: 20px 48px;
font-size: 18px;
font-weight: 500;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

@media (min-width: 768px) {
.apex-container .cta-button {
font-size: 20px;
}
}

.apex-container .cta-button:hover {
background-color: #F3F4F6;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}

/* =============================================== */
/* FAQ ACCORDION */
/* =============================================== */

.apex-container .faq-section {
max-width: 896px;
margin: 0 auto;
}

.apex-container .faq-header {
text-align: center;
margin-bottom: 80px;
}

.apex-container .faq-label {
font-size: 12px;
font-weight: 700;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 24px;
}

.apex-container .faq-title {
font-family: 'Playfair Display', serif;
font-size: 40px;
}

@media (min-width: 768px) {
.apex-container .faq-title {
font-size: 48px;
}
}

.apex-container .accordion {
width: 100%;
}

.apex-container .accordion-item {
border-bottom: 1px solid #E5E7EB;
}

.apex-container .accordion-trigger {
width: 100%;
padding: 32px 0;
background: none;
border: none;
text-align: left;
font-family: 'Playfair Display', serif;
font-size: 20px;
color: #2D2A26;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.2s ease;
}

@media (min-width: 768px) {
.apex-container .accordion-trigger {
font-size: 24px;
}
}

.apex-container .accordion-trigger:hover {
color: rgb(202 170 119);
}

.apex-container .accordion-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 16px;
}

.apex-container .accordion-item.active .accordion-icon {
transform: rotate(180deg);
}

.apex-container .accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

.apex-container .accordion-item.active .accordion-content {
max-height: 500px;
}

.apex-container .accordion-text {
padding-bottom: 32px;
color: #717182;
font-size: 18px;
line-height: 1.6;
font-weight: 300;
}

@media (min-width: 768px) {
.apex-container .accordion-text {
font-size: 20px;
}
}

/* =============================================== */
/* FOOTER */
/* =============================================== */

.apex-container .footer {
background-color: #1C1917;
color: rgba(255, 255, 255, 0.8);
padding: 96px 24px;
}

@media (min-width: 768px) {
.apex-container .footer {
padding: 96px 40px;
}
}

.apex-container .footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 64px;
margin-bottom: 80px;
}

@media (min-width: 768px) {
.apex-container .footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}

.apex-container .footer-brand {
grid-column: 1;
}

@media (min-width: 768px) {
.apex-container .footer-brand {
grid-column: span 1;
}
}

.apex-container .footer-logo {
font-family: 'Playfair Display', serif;
font-size: 28px;
color: white;
margin-bottom: 32px;
}

.apex-container .footer-desc {
line-height: 1.6;
font-weight: 300;
font-size: 18px;
margin-bottom: 32px;
}

.apex-container .footer-powered {
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.apex-container .footer-powered-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.6;
margin-bottom: 12px;
}

.apex-container .footer-powered-text {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: #D4AF37;
font-weight: 700;
}

.apex-container .footer-section-title {
color: white;
font-weight: 500;
margin-bottom: 32px;
font-size: 18px;
}

.apex-container .footer-links {
list-style: none;
}

.apex-container .footer-links li {
margin-bottom: 24px;
}

.apex-container .footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 18px;
font-weight: 300;
transition: color 0.2s ease;
}

.apex-container .footer-links a:hover {
color: white;
}

.apex-container .footer-social {
display: flex;
gap: 24px;
}

.apex-container .social-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
}

.apex-container .social-icon:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.apex-container .social-icon svg {
width: 24px;
height: 24px;
color: white;
}

.apex-container .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
font-size: 14px;
font-weight: 300;
opacity: 0.6;
}

@media (min-width: 768px) {
.apex-container .footer-bottom {
flex-direction: row;
justify-content: space-between;
}
}

.apex-container .footer-links-bottom {
display: flex;
gap: 32px;
}

.apex-container .footer-links-bottom a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.2s ease;
}

.apex-container .footer-links-bottom a:hover {
color: white;
}

/* =============================================== */
/* ANALYTICS PAGE */
/* =============================================== */

.apex-container .analytics-header {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #E8E6E1;
margin-bottom: 48px;
}

@media (min-width: 768px) {
.apex-container .analytics-header {
flex-direction: row;
align-items: flex-end;
}
}

.apex-container .analytics-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.apex-container .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #10B981;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

.apex-container .status-text {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #717182;
}

.apex-container .analytics-title {
font-family: 'Playfair Display', serif;
font-size: 36px;
color: #2D2A26;
}

.apex-container .analytics-badge {
display: flex;
align-items: center;
gap: 8px;
background: white;
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid #E8E6E1;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font-size: 14px;
}

.apex-container .analytics-badge-label {
color: #717182;
}

.apex-container .analytics-badge-value {
font-weight: 500;
color: #2D2A26;
}

.apex-container .analytics-cards {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
}

@media (min-width: 768px) {
.apex-container .analytics-cards {
grid-template-columns: repeat(3, 1fr);
}
}

.apex-container .analytics-card {
position: relative;
overflow: hidden;
border-radius: 32px;
padding: 32px;
transition: transform 0.3s ease;
}

.apex-container .analytics-card:hover {
transform: translateY(-4px);
}

.apex-container .analytics-card-primary {
background-color: rgb(202 170 119);
color: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.apex-container .analytics-card-secondary {
background-color: white;
border: 1px solid #F5F5F0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.apex-container .card-bg-icon {
position: absolute;
top: 16px;
right: 16px;
opacity: 0.1;
}

.apex-container .card-bg-icon svg {
width: 128px;
height: 128px;
}

.apex-container .card-icon-wrapper {
padding: 12px;
width: fit-content;
border-radius: 16px;
margin-bottom: 16px;
}

.apex-container .analytics-card-primary .card-icon-wrapper {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
}

.apex-container .analytics-card-secondary .card-icon-wrapper {
background-color: #F5F5F0;
transition: background-color 0.3s ease;
}

.apex-container .analytics-card-secondary:hover .card-icon-wrapper {
background-color: #E8E6E1;
}

.apex-container .card-icon-wrapper svg {
width: 24px;
height: 24px;
}

.apex-container .analytics-card-primary .card-icon-wrapper svg {
color: white;
}

.apex-container .analytics-card-secondary .card-icon-wrapper svg {
color: rgb(202 170 119);
}

.apex-container .card-value {
font-family: 'Playfair Display', serif;
font-size: 40px;
font-weight: 500;
margin-bottom: 4px;
}

@media (min-width: 768px) {
.apex-container .card-value {
font-size: 48px;
}
}

.apex-container .card-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}

.apex-container .analytics-card-primary .card-label {
color: rgba(255, 255, 255, 0.8);
}

.apex-container .analytics-card-secondary .card-label {
color: #717182;
}

.apex-container .card-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.1);
width: fit-content;
padding: 4px 12px;
border-radius: 9999px;
margin-top: 16px;
}

.apex-container .card-badge svg {
width: 12px;
height: 12px;
}

.apex-container .card-secondary-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 10;
}

.apex-container .card-secondary-left {
flex: 1;
}

.apex-container .card-secondary-right {
text-align: right;
}

.apex-container .card-secondary-value {
font-family: 'Playfair Display', serif;
font-size: 28px;
color: #2D2A26;
}

.apex-container .card-secondary-label {
font-size: 12px;
color: #717182;
text-transform: uppercase;
letter-spacing: 0.1em;
}

.apex-container .card-progress-wrapper {
margin-top: 32px;
}

.apex-container .progress-row {
display: flex;
justify-content: space-between;
font-size: 14px;
margin-bottom: 12px;
}

.apex-container .progress-label {
color: #717182;
}

.apex-container .progress-value {
font-weight: 500;
}

.apex-container .progress-bar-bg {
width: 100%;
height: 8px;
background-color: #F5F5F0;
border-radius: 9999px;
overflow: hidden;
}

.apex-container .progress-bar-fill {
height: 100%;
background-color: rgb(202 170 119);
border-radius: 9999px;
transition: width 1s ease-out;
}
/* 
.apex-container .chart-card {
background: white;
border: none;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border-radius: 32px;
padding: 32px;
margin-bottom: 24px;
}

.apex-container .chart-header {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 16px;
gap: 16px;
}

@media (min-width: 768px) {
.apex-container .chart-header {
flex-direction: row;
align-items: center;
}
}

.apex-container .chart-title {
font-family: 'Playfair Display', serif;
font-size: 24px;
color: #2D2A26;
margin-bottom: 4px;
}

.apex-container .chart-desc {
font-size: 14px;
color: #717182;
}

.apex-container .chart-legend {
display: flex;
gap: 16px;
}

.apex-container .legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

.apex-container .legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}

.apex-container .legend-dot.received {
background-color: #E8E6E1;
}

.apex-container .legend-dot.distributed {
background-color: #4A5D4F;
}

.apex-container .legend-text {
color: #717182;
}

/* Simple CSS Bar Chart 
.apex-container .chart-wrapper {
height: 400px;
display: flex;
align-items: flex-end;
gap: 24px;
padding: 16px 0;
}

.apex-container .chart-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.apex-container .chart-bars {
display: flex;
align-items: flex-end;
gap: 4px;
width: 100%;
height: 350px;
justify-content: center;
}

.apex-container .chart-bar {
width: 24px;
border-radius: 4px 4px 0 0;
transition: all 0.8s ease;
max-width: 40px;
}

.apex-container .chart-bar.received {
background-color: #E8E6E1;
}

.apex-container .chart-bar.distributed {
background-color: #4A5D4F;
}

.apex-container .chart-label {
font-size: 12px;
color: #717182;
text-align: center;
} */

/* District Breakdown */
.apex-container .district-card {
background: white;
border: none;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border-radius: 32px;
overflow: hidden;
display: flex;
flex-direction: column;
margin-bottom: 24px;
}

.apex-container .district-header {
padding: 24px;
background-color: #F5F5F0;
}

.apex-container .district-title {
font-family: 'Playfair Display', serif;
font-size: 18px;
color: #2D2A26;
margin-bottom: 16px;
}

.apex-container .district-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
}

.apex-container .district-tab {
white-space: nowrap;
padding: 6px 16px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
background-color: white;
color: #717182;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}

.apex-container .district-tab:hover {
background-color: #E8E6E1;
}

.apex-container .district-tab.active {
background-color: #2D2A26;
color: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.apex-container .district-list {
padding: 24px;
max-height: 500px;
overflow-y: auto;
}

.apex-container .district-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-radius: 16px;
background-color: rgba(245, 245, 240, 0.5);
transition: all 0.3s ease;
cursor: pointer;
margin-bottom: 12px;
opacity: 0;
transform: translateX(20px);
animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}

.apex-container .district-item:hover {
background-color: #F5F5F0;
}

.apex-container .district-item-left {
display: flex;
align-items: center;
gap: 12px;
}

.apex-container .district-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}

.apex-container .district-status-dot.completed {
background-color: #10B981;
}

.apex-container .district-status-dot.progress {
background-color: #3B82F6;
}

.apex-container .district-status-dot.scheduled {
background-color: #D1D5DB;
}

.apex-container .district-name {
font-weight: 500;
font-size: 14px;
color: #2D2A26;
}

.apex-container .district-children {
font-size: 12px;
color: #717182;
}

.apex-container .district-status-icon svg {
width: 16px;
height: 16px;
}

.apex-container .district-status-icon.completed svg {
color: #059669;
}

.apex-container .district-status-icon.progress svg {
color: #2563EB;
}

.apex-container .district-status-text {
font-size: 12px;
font-weight: 500;
color: #9CA3AF;
}

/* Login Page */
.apex-container .login-wrapper {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: 96px 24px 48px;
}

.apex-container .login-card {
background: white;
border-radius: 32px;
padding: 48px;
max-width: 480px;
width: 100%;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.apex-container .login-title {
font-family: 'Playfair Display', serif;
font-size: 32px;
text-align: center;
margin-bottom: 32px;
}

.apex-container .form-group {
margin-bottom: 24px;
}

.apex-container .form-label {
display: block;
font-weight: 500;
margin-bottom: 8px;
font-size: 14px;
}

.apex-container .form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #E5E7EB;
border-radius: 12px;
font-size: 16px;
transition: border-color 0.2s ease;
}

.apex-container .form-input:focus {
outline: none;
border-color: #4A5D4F;
}

.apex-container .btn-full {
width: 100%;
padding: 16px;
font-size: 16px;
}

/* Utility Classes */
.apex-container .hidden {
display: none !important;
}

.apex-container .text-center {
text-align: center;
}

.apex-container .mb-8 {
margin-bottom: 32px;
}

.apex-container .mt-24 {
margin-top: 96px;
}

/* Scrollbar Styling */
.apex-container ::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.apex-container ::-webkit-scrollbar-track {
background: #F5F5F0;
}

.apex-container ::-webkit-scrollbar-thumb {
background: #D1D5DB;
border-radius: 4px;
}

.apex-container ::-webkit-scrollbar-thumb:hover {
background: #9CA3AF;
}
</style>