@charset "UTF-8";
/* MEMAIL CONTINIUM Brand Color Pallette */

/* 1. Global Color Variables for Easier Application */
:root {
    --charcoal-black: #111111; /* Navbar Background */
    --charcoal-grey: #333333;  /* Main Typography, Stability Link */
    --sahara-gold: #C5A021;     /* Highlights, Secondary accent */
    --bright-gold: #FBBC05;     /* Action CTAs */
    --clean-slate: #F9F9FA;     /* Secondary BG */
    --cobalt-blue: #0047AB; /* Rich, professional Cobalt */
}


/* Core Component Styles */
#ecosystem-orbit .text-cobalt-blue {
    color: var(--cobalt-blue);
}

#ecosystem-orbit .bg-cobalt-blue {
    background-color: var(--cobalt-blue);
}

#ecosystem-orbit .border-cobalt-blue {
    border-color: var(--cobalt-blue);
}

/* Main Orbit Node Styling */
.orbit-node {
    transition: transform 0.4s ease;
}

.orbit-node:hover {
    transform: scale(1.1) translateY(-5px);
}

/* Large Nodes (Pillars) */
.node-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 15px auto;
    box-shadow: 0 10px 25px rgba(0, 71, 171, 0.1);
}

.node-title {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    tracking-tighter;
    color: #1a1a1a; /* Dark charcoal for contrast on white bg */
}

.node-desc {
    font-size: 10px;
    font-weight: 500;
    color: #718096; /* Slate gray */
    margin-top: 2px;
}

/* Small Nodes (Connectors) */
.node-icon-sm {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 8px auto;
}

.node-title-sm {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #4a5568;
}

/* 3. Animations */
@keyframes pulse-slow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 71, 171, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 71, 171, 0.6); }
}

.animate-pulse-slow {
    animation: pulse-slow 4s infinite ease-in-out;
}
    
/* 2. Global Styling Applications */

body {
  color: var(--charcoal-charcoal); /* Default text is professional grey-black */
}

/* Update any yellow elements from the original site */
.text-yellow-500,
.border-yellow-500,
.text-yellow-600 {
  color: var(--sahara-gold) !important;
  border-color: var(--sahara-gold) !important;
}

/* Standardize blue elements (Travel, etc.) */
.text-blue-600 {
  color: var(--electric-cobalt) !important;
}

.page-section { display: none; }
.page-section.active { display: block; }

/*.nav-link.active { color: #fbbf24; border-bottom: 2px solid #fbbf24; }*/
.hero-gradient { 
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), 
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80'); 
    background-size: cover; 
    background-position: center; 
}

/* 3. Navigation Styling */
nav.bg-slate-900 {
  background-color: #c99e4d !important; /* Slightly darker and richer #1d0da8 #c99e4d */ 
}

nav .text-yellow-500 {
  color: var(--action-gold) !important; /* Brightest gold for main navigation logo */
}

nav .nav-link:hover,
nav .nav-link.active {
  color: var(--action-gold) !important;
  border-bottom-color: var(--action-gold) !important;
}


/* 4. Button & Interaction Styling (CTAs) */
/*button.bg-yellow-500 {
  background-color: var(--action-gold) !important;
  color: #111111 !important;
}

button.bg-yellow-500:hover {
  background-color: #FFFFFF !important; 
  color: #111111 !important;
  border: 2px solid var(--action-gold);
}
*/
a.text-yellow-600 {
  color: var(--action-gold) !important;
}

/* 5. Special Module Highlights */

/* Specific highlights for modules and inputs on focus */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--action-gold) !important;
  box-shadow: 0 0 0 2px rgba(251, 188, 5, 0.2) !important;
}

/* Investment Calculator Result Text */
#result-text {
  color: var(--action-gold) !important;
}

/* 3. Footer Styling */
footer.bg-slate-900 {
  background-color: #bfc6d6 !important; /* Slightly darker and richer */
}

/* Floating WhatsApp Button Override */
a[href*="wa.me"] {
  background-color: #25D366 !important; /* Keep native WhatsApp green */
}


/* Sprite mapping for image_travel.png (Experiential grid) */
.icon-farm-tours, .icon-wellness-plunge, .icon-pottery-workshops, .icon-woodworking-classes, .icon-culinary-heritage, .icon-volunteering-impact {
  background-image: url('../img/image_travel.png'); /* Replace with actual path */
}

/* Coordinates based on the 3x2 grid in image_travel.png */
.icon-farm-tours { background-position: 0 0; }
.icon-wellness-plunge { background-position: -64px 0; } /* 64px = 16px grid + 48px padding */
.icon-pottery-workshops { background-position: -128px 0; }
.icon-woodworking-classes { background-position: 0 -64px; }
.icon-culinary-heritage { background-position: -64px -64px; }
.icon-volunteering-impact { background-position: -128px -64px; }