style.css

/* Hero section enhancements */
.min-h-\[500px\] {
    min-height: 500px;
}

/* Hero button hover effect */
.btn-accent {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-accent:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(141, 198, 63, 0.35);
}
:root {
    --vlc-navy: #002060;
    --vlc-navy-700: #001a50;
    --vlc-sky: #00A0E9;
    --vlc-leaf: #8DC63F;
    --vlc-ink: #1F2A44;
    --vlc-card: #ffffff;
    --vlc-navy-50: #F5F7FF;
    --vlc-navy-100: #ECF1FF;
    --vlc-sky-50: #F0FAFF;
    --vlc-leaf-50: #F4FAEC;
    --vlc-sky-700: #0086C1;
    --vlc-leaf-700: #79b32e;
}
body {
    padding: 0;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
    overflow-x: hidden;
    color: var(--vlc-ink);
    line-height: 1.6;
}
/* Alert message styles */
#fail_email, #success_email {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  max-width: 24rem;
  width: 90%;
  z-index: 9999;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#fail_email .flex, #success_email .flex {
  padding: 0.75rem 1rem;
}

#fail_email .p-4, #success_email .p-4 {
  padding: 1rem;
}

/* Notification component styles are now in the component itself */
h1, h2, h3, h4 {
    color: var(--vlc-navy);
    font-weight: 700;
    margin-top: 0;
}

.pattern-grid {
    background:
        linear-gradient(transparent 23px, rgba(0,32,96,.06) 24px),
        linear-gradient(90deg, transparent 23px, rgba(0,32,96,.06) 24px);
    background-size: 24px 24px;
}

.pattern-navy {
    background:
        radial-gradient(24px 24px at 12% 10%, rgba(255,255,255,.06) 0 6px, transparent 7px),
        radial-gradient(24px 24px at 64% 28%, rgba(255,255,255,.05) 0 6px, transparent 7px),
        radial-gradient(24px 24px at 30% 72%, rgba(255,255,255,.04) 0 6px, transparent 7px),
        linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.14));
    background-color: var(--vlc-navy);
}

.pattern-leaf {
    background:
        linear-gradient(135deg, rgba(141,198,63,.18), rgba(0,160,233,.12)),
        radial-gradient(600px 300px at 10% -10%, rgba(141,198,63,.20), transparent 60%),
        radial-gradient(600px 300px at 110% 110%, rgba(0,160,233,.18), transparent 60%);
    background-color: var(--vlc-leaf-50);
}

.pattern-sky {
    background:
        radial-gradient(18px 18px at 20% 30%, rgba(0,160,233,.14) 0 6px, transparent 7px),
        radial-gradient(18px 18px at 72% 64%, rgba(141,198,63,.14) 0 6px, transparent 7px),
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
    background-color: var(--vlc-sky-50);
}

.pattern-diamond {
    --c: rgba(0,32,96,.06);
    background:
        conic-gradient(from 45deg, transparent 0 25%, var(--c) 0 50%, transparent 0 75%, var(--c) 0) 12px 12px/24px 24px,
        conic-gradient(from 45deg, var(--c) 0 25%, transparent 0 50%, var(--c) 0 75%, transparent 0)/24px 24px;
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 32, 96, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 32, 96, 0.15);
}

.btn-primary {
    background: var(--vlc-navy);
    color: white;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: var(--vlc-navy-700);
}
.btn-accent {
    background: var(--vlc-leaf);
    color: var(--vlc-navy);
    transition: background 0.2s ease;
}
.btn-accent:hover {
    background: var(--vlc-leaf);
    opacity: 0.9;
}

/* Ensure feather icons are visible */
[data-feather] {
  display: inline-block;
  vertical-align: middle;
}