.vvoa-hero-section-container {
    display: flex;
    position: relative;
    background: linear-gradient(135deg, 
        #E8F5E8 0%, 
        #F1F8E9 25%, 
        #E0F2F1 50%, 
        #F3E5F5 75%, 
        #E8F5E8 100%);
    background-size: 400% 400%;
    animation: vvoa-hero-ambient-shift 20s ease-in-out infinite;
    overflow: hidden;
}

@keyframes vvoa-hero-ambient-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
}

.vvoa-alberta-landscape-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top,
        rgba(76, 175, 80, 0.1) 0%,
        rgba(76, 175, 80, 0.05) 50%,
        transparent 100%);
    clip-path: polygon(
        0% 100%, 
        0% 60%, 
        15% 50%, 
        25% 65%, 
        35% 45%, 
        45% 70%, 
        55% 40%, 
        65% 75%, 
        75% 35%, 
        85% 80%, 
        100% 30%, 
        100% 100%
    );
}

.vvoa-prairie-wind-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.vvoa-wheat-stalk-graphic {
    position: absolute;
    width: 3px;
    background: linear-gradient(to top, #4CAF50, #81C784);
    border-radius: 2px;
    transform-origin: bottom center;
    animation: vvoa-prairie-sway 4s ease-in-out infinite;
}

.vvoa-wheat-stalk-graphic:nth-child(1) { left: 5%; height: 80px; bottom: 200px; animation-delay: 0s; }
.vvoa-wheat-stalk-graphic:nth-child(2) { left: 15%; height: 120px; bottom: 180px; animation-delay: 1s; }
.vvoa-wheat-stalk-graphic:nth-child(3) { left: 25%; height: 100px; bottom: 190px; animation-delay: 2s; }
.vvoa-wheat-stalk-graphic:nth-child(4) { right: 20%; height: 90px; bottom: 185px; animation-delay: 0.5s; }
.vvoa-wheat-stalk-graphic:nth-child(5) { right: 10%; height: 110px; bottom: 175px; animation-delay: 1.5s; }
.vvoa-wheat-stalk-graphic:nth-child(6) { right: 5%; height: 95px; bottom: 195px; animation-delay: 2.5s; }

@keyframes vvoa-prairie-sway {
    0%, 100% { transform: rotate(-2deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-1deg); }
    75% { transform: rotate(2deg); }
}

.vvoa-floating-community-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.vvoa-community-connection-node {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2);
    animation: vvoa-community-pulse 6s ease-in-out infinite;
    border: 2px solid rgba(76, 175, 80, 0.3);
}

.vvoa-community-connection-node::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 50%;
    animation: vvoa-connection-ripple 4s ease-out infinite;
}

@keyframes vvoa-community-pulse {
    0%, 100% { transform: scale(1) translateY(0px); }
    25% { transform: scale(1.05) translateY(-5px); }
    50% { transform: scale(1.02) translateY(-2px); }
    75% { transform: scale(1.08) translateY(-8px); }
}

@keyframes vvoa-connection-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.5); opacity: 0.3; }
    100% { transform: scale(2); opacity: 0; }
}

.vvoa-community-connection-node:nth-child(1) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    color: #4CAF50;
}

.vvoa-community-connection-node:nth-child(2) {
    top: 25%;
    right: 15%;
    animation-delay: 1.5s;
    color: #E91E63;
}

.vvoa-community-connection-node:nth-child(3) {
    bottom: 35%;
    left: 8%;
    animation-delay: 3s;
    color: #66BB6A;
}

.vvoa-community-connection-node:nth-child(4) {
    top: 60%;
    right: 8%;
    animation-delay: 4.5s;
    color: #4CAF50;
}

.vvoa-community-connection-node:nth-child(5) {
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
    color: #E91E63;
}

.vvoa-hero-content-wrapper {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 125px auto;
    padding: 0 5%;
    width: 100%;
    position: relative;
    z-index: 10;
}

.vvoa-hero-text-content-area {
    flex: 1;
    padding-right: 80px;
    position: relative;
}

.vvoa-hero-main-heading {
    font-size: clamp(3rem, 7vw, 4rem);
    line-height: 0.85;
    margin-bottom: 50px;
    position: relative;
}

.vvoa-hero-heading-celebrating {
    color: #E91E63;
    font-weight: 800;
    padding-bottom: 20px;
    display: block;
    position: relative;
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #E91E63);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-text-gradient-flow 4s ease-in-out infinite;
}

@keyframes vvoa-text-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-hero-heading-everything-veg {
    color: #E91E63;
    font-weight: 300;
    display: block;
    margin-top: 5px;
    padding-bottom: 10px;
    position: relative;
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #C2185B);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-text-gradient-flow 6s ease-in-out infinite reverse;
}

.vvoa-hero-heading-everything-veg::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 50%;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, #4CAF50, #66BB6A);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: vvoa-community-dot-growth 3s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

@keyframes vvoa-community-dot-growth {
    0%, 100% { transform: translateY(-50%) scale(1); }
    25% { transform: translateY(-60%) scale(1.3); }
    50% { transform: translateY(-45%) scale(0.9); }
    75% { transform: translateY(-55%) scale(1.1); }
}

.vvoa-hero-description-text {
    font-size: 20px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 50px;
    max-width: 520px;
    position: relative;
    opacity: 0;
    animation: vvoa-text-reveal 1.5s ease-out 1.2s forwards;
}
.vvoa-hero-description-text span {
    padding: 0 5px;
    background-color: #fedc34;

}

@keyframes vvoa-text-reveal {
    to { opacity: 1; }
}

.vvoa-hero-description-text::before {
    content: '"';
    position: absolute;
    left: -20px;
    top: -10px;
    font-size: 60px;
    color: rgba(76, 175, 80, 0.3);
    font-family: serif;
    line-height: 1;
}

.vvoa-hero-description-text::after {
    content: '"';
    position: absolute;
    right: -15px;
    bottom: -30px;
    font-size: 60px;
    color: rgba(233, 30, 99, 0.3);
    font-family: serif;
    line-height: 1;
}

.vvoa-hero-cta-button-container {
    position: relative;
    display: inline-block;
}

.vvoa-primary-cta-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #673AB7, #9C27B0, #8E24AA);
    background-size: 200% 100%;
    color: white;
    padding: 22px 45px;
    border: none;
    border-radius: 60px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 35px rgba(103, 58, 183, 0.4);
    animation: vvoa-cta-gradient-shift 4s ease-in-out infinite;
}

@keyframes vvoa-cta-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-primary-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-primary-cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.vvoa-primary-cta-button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px rgba(103, 58, 183, 0.6);
    animation-duration: 2s;
}

.vvoa-primary-cta-button::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 57px;
    background: linear-gradient(135deg, #673AB7, #9C27B0);
    background-size: 200% 100%;
    z-index: -1;
    transition: all 0.4s ease;
    animation: vvoa-cta-gradient-shift 4s ease-in-out infinite reverse;
}

.vvoa-primary-cta-button:hover::after {
    inset: 0px;
}

.vvoa-cta-button-icon {
    margin-left: 12px;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-primary-cta-button:hover .vvoa-cta-button-icon {
    transform: translateX(8px) rotate(90deg);
}

.vvoa-hero-visual-content-area {
    flex: 1;
    position: relative;
    min-width: 500px;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvoa-hero-food-showcase-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(76, 175, 80, 0.25);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(76, 175, 80, 0.05));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(76, 175, 80, 0.2);
}

.vvoa-hero-food-showcase-container::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, 
        #4CAF50, #81C784, #E91E63, #FF6B9D, 
        #66BB6A, #4CAF50);
    background-size: 400% 400%;
    border-radius: 39px;
    z-index: -1;
    animation: vvoa-border-rainbow 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

@keyframes vvoa-border-rainbow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.vvoa-hero-food-showcase-container:hover::before {
    opacity: 1;
}

.vvoa-hero-food-showcase-container:hover {
    transform: scale(1.03) rotate(2deg);
    box-shadow: 0 35px 100px rgba(76, 175, 80, 0.35);
}

.vvoa-hero-main-food-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.05) contrast(1.1) saturate(1.2);
}

.vvoa-hero-food-showcase-container:hover .vvoa-hero-main-food-image {
    transform: scale(1.15) rotate(-2deg);
}

.vvoa-alberta-local-producer-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 3;
    border: 2px solid rgba(76, 175, 80, 0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2);
}

.vvoa-alberta-local-producer-badge::before {
    content: '🌾';
    margin-right: 8px;
    font-size: 14px;
    animation: vvoa-wheat-bounce 2s ease-in-out infinite;
}

@keyframes vvoa-wheat-bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.vvoa-alberta-local-producer-badge:hover {
    background: #4CAF50;
    color: white;
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);
}

.vvoa-sustainable-impact-indicator {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(233, 30, 99, 0.9);
    backdrop-filter: blur(15px);
    padding: 15px 25px;
    border-radius: 30px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vvoa-sustainable-impact-indicator::before {
    content: '♻️';
    font-size: 16px;
    animation: vvoa-recycle-spin 4s linear infinite;
}

@keyframes vvoa-recycle-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vvoa-sustainable-impact-indicator:hover {
    background: rgba(233, 30, 99, 1);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 35px rgba(233, 30, 99, 0.5);
}

.vvoa-floating-nutrition-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.vvoa-nutrition-molecule-structure {
    position: absolute;
    width: 80px;
    height: 80px;
    animation: vvoa-molecular-orbit 8s linear infinite;
}

.vvoa-nutrition-molecule-structure:nth-child(1) {
    top: 20%;
    left: -15%;
    animation-delay: 0s;
}

.vvoa-nutrition-molecule-structure:nth-child(2) {
    bottom: 25%;
    right: -15%;
    animation-delay: 4s;
}

.vvoa-nutrition-molecule-structure:nth-child(3) {
    top: 65%;
    left: -20%;
    animation-delay: 2s;
}

@keyframes vvoa-molecular-orbit {
    0% { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

.vvoa-molecule-center-atom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #4CAF50, #66BB6A);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
    animation: vvoa-atom-pulse 2s ease-in-out infinite;
}

@keyframes vvoa-atom-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

.vvoa-molecule-electron-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(233, 30, 99, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: vvoa-electron-orbit 3s linear infinite;
}

.vvoa-molecule-electron-orbit::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #E91E63;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.8);
}

@keyframes vvoa-electron-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vvoa-community-growth-visualization {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 5;
}

.vvoa-growth-metric-bar {
    width: 4px;
    background: linear-gradient(to top, #4CAF50, #81C784);
    border-radius: 2px;
    position: relative;
    animation: vvoa-metric-growth 3s ease-out infinite;
}

.vvoa-growth-metric-bar:nth-child(1) { height: 25px; animation-delay: 0s; }
.vvoa-growth-metric-bar:nth-child(2) { height: 40px; animation-delay: 0.5s; }
.vvoa-growth-metric-bar:nth-child(3) { height: 60px; animation-delay: 1s; }
.vvoa-growth-metric-bar:nth-child(4) { height: 35px; animation-delay: 1.5s; }
.vvoa-growth-metric-bar:nth-child(5) { height: 50px; animation-delay: 2s; }

@keyframes vvoa-metric-growth {
    0% { transform: scaleY(0); opacity: 0.5; }
    50% { transform: scaleY(1.2); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0.8; }
}

.vvoa-scroll-discovery-invitation {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4CAF50;
    z-index: 10;
}

.vvoa-scroll-invitation-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    opacity: 0.8;
    font-weight: 600;
}

.vvoa-scroll-discovery-arrow {
    font-size: 24px;
    animation: vvoa-scroll-invitation-bounce 2.5s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vvoa-scroll-discovery-arrow:hover {
    color: #E91E63;
    transform: scale(1.2);
}

@keyframes vvoa-scroll-invitation-bounce {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(0px); }
    75% { transform: translateY(-4px); }
}

.vvoa-hero-ambient-energy-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.vvoa-energy-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: vvoa-energy-flow 12s linear infinite;
}

.vvoa-energy-particle:nth-child(odd) {
    background: radial-gradient(circle, #4CAF50, transparent);
    animation-duration: 15s;
}

.vvoa-energy-particle:nth-child(even) {
    background: radial-gradient(circle, #E91E63, transparent);
    animation-duration: 18s;
}

@keyframes vvoa-energy-flow {
    0% { 
        transform: translateY(100vh) translateX(0px) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(90vh) translateX(20px) scale(1); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(-10vh) translateX(-20px) scale(1); 
    }
    100% { 
        transform: translateY(-20vh) translateX(0px) scale(0); 
        opacity: 0; 
    }
}

.vvoa-energy-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.vvoa-energy-particle:nth-child(2) { left: 20%; animation-delay: 3s; }
.vvoa-energy-particle:nth-child(3) { left: 30%; animation-delay: 6s; }
.vvoa-energy-particle:nth-child(4) { left: 40%; animation-delay: 9s; }
.vvoa-energy-particle:nth-child(5) { left: 50%; animation-delay: 12s; }
.vvoa-energy-particle:nth-child(6) { left: 60%; animation-delay: 2s; }
.vvoa-energy-particle:nth-child(7) { left: 70%; animation-delay: 5s; }
.vvoa-energy-particle:nth-child(8) { left: 80%; animation-delay: 8s; }
.vvoa-energy-particle:nth-child(9) { left: 90%; animation-delay: 11s; }

@media (max-width: 1200px) {
    .vvoa-hero-content-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 0 4%;
        margin-top: 150px;
    }

    .vvoa-hero-text-content-area {
        padding-right: 0;
        margin-bottom: 50px;
    }

    .vvoa-hero-visual-content-area {
        height: 500px;
    }

    .vvoa-scroll-discovery-invitation {
        display: none;
    }
}

@media (max-width: 1024px) {
    .vvoa-main-navigation-menu {
        display: none;
    }

    .vvoa-floating-nutrition-nodes,
    .vvoa-prairie-wind-elements,
    .vvoa-floating-community-icons {
        display: none;
    }
}

@media (max-width: 768px) {
    .vvoa-navigation-wrapper {
        padding: 12px 4%;
    }

    .vvoa-brand-main-title {
        font-size: 20px;
    }

    .vvoa-hero-main-heading {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .vvoa-hero-description-text {
        font-size: 18px;
        max-width: 100%;
    }

    .vvoa-hero-visual-content-area {
        height: 400px;
    }

    .vvoa-hero-ambient-energy-field {
        display: none;
    }
}

@media (max-width: 480px) {
    .vvoa-alberta-local-producer-badge {
        display: none;    
    }
    
    .vvoa-sustainable-impact-indicator {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .vvoa-hero-text-content-area {
        margin-bottom: 30px;
    }

    .vvoa-primary-cta-button {
        padding: 18px 35px;
        font-size: 16px;
    }

    .vvoa-hero-visual-content-area {
        height: 300px;
    }

    .vvoa-hero-description-text::before,
    .vvoa-hero-description-text::after {
        display: none;
    }
}

.vvoa-about-section-main-container {
    height: max-content;
    padding: 120px 0;
    background: linear-gradient(135deg, 
        #FAFAFA 0%, 
        #F5F5F5 25%, 
        #EEEEEE 50%, 
        #F8F9FA 75%, 
        #FAFAFA 100%);
    position: relative;
    overflow: hidden;
}

.vvoa-compassionate-living-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(76, 175, 80, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(233, 30, 99, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 40% 80%, rgba(76, 175, 80, 0.02) 0%, transparent 50%);
    animation: vvoa-compassion-wave 15s ease-in-out infinite;
}

@keyframes vvoa-compassion-wave {
    0%, 100% { opacity: 1; transform: translateY(0px); }
    25% { opacity: 0.7; transform: translateY(-10px); }
    50% { opacity: 1; transform: translateY(0px); }
    75% { opacity: 0.8; transform: translateY(-5px); }
}

.vvoa-about-content-wrapper {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    gap: 100px;
    position: relative;
    z-index: 10;
}

.vvoa-animal-sanctuary-visual-area {
    flex: 1;
    position: relative;
    height: 600px;
}

.vvoa-compassionate-image-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(76, 175, 80, 0.1));
    backdrop-filter: blur(20px);
    border: 3px solid rgba(76, 175, 80, 0.2);
    box-shadow: 0 30px 80px rgba(76, 175, 80, 0.15);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-compassionate-image-showcase::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(45deg, 
        transparent 0%,
        rgba(76, 175, 80, 0.3) 25%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(76, 175, 80, 0.3) 75%,
        transparent 100%);
    background-size: 400% 400%;
    border-radius: 45px;
    z-index: -1;
    animation: vvoa-sanctuary-light-shift 12s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

@keyframes vvoa-sanctuary-light-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.vvoa-compassionate-image-showcase:hover::before {
    opacity: 1;
}

.vvoa-compassionate-image-showcase:hover {
    transform: scale(1.02) rotate(1deg);
    box-shadow: 0 40px 100px rgba(76, 175, 80, 0.25);
}

.vvoa-animal-welfare-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1) contrast(1.05) saturate(1.15);
}

.vvoa-compassionate-image-showcase:hover .vvoa-animal-welfare-main-image {
    transform: scale(1.08);
    filter: brightness(1.15) contrast(1.1) saturate(1.25);
}

.vvoa-animal-protection-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 15px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    border: 2px solid rgba(76, 175, 80, 0.3);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vvoa-animal-protection-badge::before {
    content: '🐑';
    font-size: 18px;
    animation: vvoa-animal-gentle-bounce 3s ease-in-out infinite;
}

@keyframes vvoa-animal-gentle-bounce {
    0%, 100% { transform: translateY(0px) scale(1); }
    25% { transform: translateY(-3px) scale(1.05); }
    50% { transform: translateY(0px) scale(1); }
    75% { transform: translateY(-1px) scale(1.02); }
}

.vvoa-animal-protection-badge:hover {
    background: #4CAF50;
    color: white;
    transform: scale(1.1) rotate(-2deg);
    box-shadow: 0 20px 50px rgba(76, 175, 80, 0.4);
}

.vvoa-compassionate-choice-indicator {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: rgba(233, 30, 99, 0.9);
    backdrop-filter: blur(15px);
    padding: 18px 30px;
    border-radius: 35px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.vvoa-compassionate-choice-indicator::before {
    content: '💚';
    font-size: 20px;
    animation: vvoa-heart-pulse 2.5s ease-in-out infinite;
}

@keyframes vvoa-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.vvoa-compassionate-choice-indicator:hover {
    background: rgba(233, 30, 99, 1);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(233, 30, 99, 0.5);
}

.vvoa-floating-compassion-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.vvoa-compassion-spirit-particle {
    position: absolute;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    animation: vvoa-compassion-float 8s ease-in-out infinite;
    border: 2px solid rgba(76, 175, 80, 0.4);
}

.vvoa-compassion-spirit-particle:nth-child(1) {
    top: 15%;
    left: -8%;
    animation-delay: 0s;
}

.vvoa-compassion-spirit-particle:nth-child(2) {
    top: 60%;
    left: -12%;
    animation-delay: 2s;
}

.vvoa-compassion-spirit-particle:nth-child(3) {
    top: 35%;
    right: -10%;
    animation-delay: 4s;
}

.vvoa-compassion-spirit-particle:nth-child(4) {
    bottom: 20%;
    right: -8%;
    animation-delay: 6s;
}

@keyframes vvoa-compassion-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(90deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
    75% { transform: translateY(-15px) rotate(270deg); }
}

.vvoa-about-text-content-area {
    flex: 1;
    position: relative;
}

.vvoa-mission-statement-header {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 25px;
    position: relative;
    color: #E91E63;
    font-weight: 700;
    text-align: left;
}

.vvoa-who-we-are-text {
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #C2185B);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-mission-text-flow 5s ease-in-out infinite;
    display: block;
}

.vvoa-what-we-do-text {
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #C2185B);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-mission-text-flow 5s ease-in-out infinite reverse;
    display: block;
    margin-top: 8px;
}

@keyframes vvoa-mission-text-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-mission-purpose-underline {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #E91E63, #FFC107, #4CAF50);
    background-size: 300% 100%;
    border-radius: 3px;
    animation: vvoa-purpose-underline-flow 4s ease-in-out infinite;
}

@keyframes vvoa-purpose-underline-flow {
    0%, 100% { background-position: 0% 50%; width: 120px; }
    50% { background-position: 100% 50%; width: 200px; }
}

.vvoa-organizational-description-text {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 50px;
    position: relative;
    max-width: 600px;
}

.vvoa-organizational-description-text::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #4CAF50, #81C784, #E91E63);
    border-radius: 3px;
    opacity: 0.6;
}

.vvoa-mission-highlights-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.vvoa-mission-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(76, 175, 80, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vvoa-mission-highlight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(76, 175, 80, 0.1), 
        transparent);
    transition: left 0.8s ease;
}

.vvoa-mission-highlight-item:hover::before {
    left: 100%;
}

.vvoa-mission-highlight-item:hover {
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.3);
}

.vvoa-mission-icon-container {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-mission-highlight-item:hover .vvoa-mission-icon-container {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 12px 35px rgba(76, 175, 80, 0.4);
}

.vvoa-mission-highlight-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    font-weight: 500;
}

.vvoa-mission-highlight-text strong {
    color: #2E7D32;
    font-weight: 700;
}

.vvoa-learn-more-cta-container {
    position: relative;
    display: inline-block;
}

.vvoa-learn-about-us-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #673AB7, #9C27B0, #8E24AA);
    background-size: 200% 100%;
    color: white;
    padding: 20px 40px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 35px rgba(103, 58, 183, 0.4);
    animation: vvoa-cta-pulse-glow 4s ease-in-out infinite;
}

@keyframes vvoa-cta-pulse-glow {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 12px 35px rgba(103, 58, 183, 0.4);
    }
    50% { 
        background-position: 100% 50%; 
        box-shadow: 0 15px 45px rgba(103, 58, 183, 0.6);
    }
}

.vvoa-learn-about-us-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-learn-about-us-button:hover::before {
    width: 300px;
    height: 300px;
}

.vvoa-learn-about-us-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 50px rgba(103, 58, 183, 0.6);
}

.vvoa-cta-arrow-icon {
    margin-left: 12px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-learn-about-us-button:hover .vvoa-cta-arrow-icon {
    transform: translateX(6px) rotate(45deg);
}

.vvoa-impact-statistics-visualization {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    width: 200px;
    height: 300px;
    pointer-events: none;
}

.vvoa-impact-metric-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(76, 175, 80, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4CAF50;
    font-weight: 700;
    animation: vvoa-impact-orbit 12s linear infinite;
}

.vvoa-impact-metric-circle:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 30%;
    right: 0;
    font-size: 14px;
    animation-delay: 4s;
}

.vvoa-impact-metric-circle:nth-child(2) {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 0;
    font-size: 13px;
    animation-delay: 8s;
}

@keyframes vvoa-impact-orbit {
    0% { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

.vvoa-environmental-benefit-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.vvoa-benefit-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(76, 175, 80, 0.6);
    border-radius: 50%;
    animation: vvoa-environmental-flow 10s linear infinite;
}

.vvoa-benefit-particle:nth-child(odd) {
    background: rgba(233, 30, 99, 0.6);
    animation-duration: 14s;
}

@keyframes vvoa-environmental-flow {
    0% { 
        transform: translateY(100vh) translateX(-50px) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(90vh) translateX(0px) scale(1); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(-10vh) translateX(50px) scale(1); 
    }
    100% { 
        transform: translateY(-20vh) translateX(100px) scale(0); 
        opacity: 0; 
    }
}

.vvoa-benefit-particle:nth-child(1) { left: 15%; animation-delay: 0s; }
.vvoa-benefit-particle:nth-child(2) { left: 25%; animation-delay: 2s; }
.vvoa-benefit-particle:nth-child(3) { left: 35%; animation-delay: 4s; }
.vvoa-benefit-particle:nth-child(4) { left: 45%; animation-delay: 6s; }
.vvoa-benefit-particle:nth-child(5) { left: 55%; animation-delay: 8s; }
.vvoa-benefit-particle:nth-child(6) { left: 65%; animation-delay: 1s; }
.vvoa-benefit-particle:nth-child(7) { left: 75%; animation-delay: 3s; }
.vvoa-benefit-particle:nth-child(8) { left: 85%; animation-delay: 5s; }

@media (max-width: 1200px) {
    .vvoa-about-content-wrapper {
        gap: 60px;
    }

    .vvoa-impact-statistics-visualization {
        display: none;
    }
}

@media (max-width: 1024px) {
    .vvoa-about-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .vvoa-animal-sanctuary-visual-area {
        height: 500px;
        order: 2;
    }

    .vvoa-about-text-content-area {
        order: 1;
    }

    .vvoa-floating-compassion-elements {
        display: none;
    }
}

@media (max-width: 768px) {
    .vvoa-about-section-main-container {
        padding: 80px 0;
    }

    .vvoa-about-content-wrapper {
        padding: 0 4%;
        gap: 40px;
    }

    .vvoa-mission-statement-header {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }

    .vvoa-organizational-description-text {
        font-size: 16px;
        max-width: 100%;
    }

    .vvoa-animal-sanctuary-visual-area {
        height: 400px;
    }

    .vvoa-environmental-benefit-particles {
        display: none;
    }
}

@media (max-width: 480px) {
    .vvoa-mission-highlights-container {
        gap: 15px;
    }

    .vvoa-mission-highlight-item {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }

    .vvoa-mission-icon-container {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .vvoa-learn-about-us-button {
        padding: 16px 32px;
        font-size: 14px;
    }
}


.vvoa-team-section-main-container {
    height: max-content;
    padding: 120px 0;
    background: linear-gradient(135deg, 
        #E3F2FD 0%, 
        #E8F5E8 25%, 
        #F3E5F5 50%, 
        #E0F2F1 75%, 
        #E3F2FD 100%);
    background-size: 400% 400%;
    animation: vvoa-team-atmosphere-shift 25s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes vvoa-team-atmosphere-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
}

.vvoa-edmonton-skyline-silhouette-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top,
        rgba(76, 175, 80, 0.15) 0%,
        rgba(25, 118, 210, 0.1) 30%,
        rgba(76, 175, 80, 0.08) 60%,
        transparent 100%);
    clip-path: polygon(
        0% 100%, 
        0% 75%, 
        8% 70%, 
        12% 80%, 
        18% 60%, 
        22% 85%, 
        28% 45%, 
        32% 75%, 
        38% 40%, 
        42% 80%, 
        48% 35%, 
        52% 75%, 
        58% 50%, 
        62% 85%, 
        68% 45%, 
        72% 70%, 
        78% 55%, 
        82% 80%, 
        88% 50%, 
        92% 75%, 
        100% 65%, 
        100% 100%
    );
    animation: vvoa-skyline-gentle-sway 20s ease-in-out infinite;
}

@keyframes vvoa-skyline-gentle-sway {
    0%, 100% { transform: translateY(0px); opacity: 0.6; }
    25% { transform: translateY(-5px); opacity: 0.8; }
    50% { transform: translateY(0px); opacity: 0.7; }
    75% { transform: translateY(-3px); opacity: 0.9; }
}

.vvoa-team-content-wrapper {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    gap: 120px;
    position: relative;
    z-index: 10;
}

.vvoa-team-description-content-area {
    flex: 1;
    position: relative;
}

.vvoa-team-section-main-heading {
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 35px;
    position: relative;
    color: #E91E63;
    font-weight: 700;
}

.vvoa-meet-our-team-text {
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #C2185B, #AD1457);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-team-leadership-gradient-flow 6s ease-in-out infinite;
    display: block;
    position: relative;
}

@keyframes vvoa-team-leadership-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    33% { background-position: 50% 0%; }
    66% { background-position: 100% 50%; }
}

.vvoa-meet-our-team-text::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        #E91E63 0%, 
        #1976D2 25%, 
        #4CAF50 50%, 
        #1976D2 75%, 
        #E91E63 100%);
    background-size: 400% 100%;
    animation: vvoa-team-underline-expansion 3s ease-out 1s forwards,
               vvoa-team-underline-wave 8s ease-in-out infinite;
}

@keyframes vvoa-team-underline-expansion {
    to { width: 100%; }
}

@keyframes vvoa-team-underline-wave {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-team-volunteer-spirit-icon {
    position: absolute;
    right: -40px;
    top: 20%;
    font-size: 35px;
    color: rgba(25, 118, 210, 0.3);
    animation: vvoa-volunteer-spirit-orbit 12s linear infinite;
    transform-origin: -20px 50px;
}

@keyframes vvoa-volunteer-spirit-orbit {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

.vvoa-team-organizational-description {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 50px;
    max-width: 580px;
    position: relative;
}

.vvoa-team-organizational-description::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, 
        #1976D2 0%, 
        #4CAF50 25%, 
        #E91E63 50%, 
        #4CAF50 75%, 
        #1976D2 100%);
    background-size: 100% 300%;
    border-radius: 3px;
    animation: vvoa-team-dedication-flow 10s ease-in-out infinite;
}

@keyframes vvoa-team-dedication-flow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

.vvoa-volunteer-passion-highlights {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
}

.vvoa-passion-highlight-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    border: 2px solid rgba(25, 118, 210, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vvoa-passion-highlight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(25, 118, 210, 0.1), 
        rgba(76, 175, 80, 0.1),
        transparent);
    transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-passion-highlight-item:hover::before {
    left: 100%;
}

.vvoa-passion-highlight-item:hover {
    transform: translateX(15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.4);
}

.vvoa-volunteer-dedication-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1976D2, #42A5F5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.vvoa-volunteer-dedication-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(45deg, #1976D2, #42A5F5, #1976D2);
    background-size: 200% 200%;
    border-radius: 50%;
    z-index: -1;
    animation: vvoa-dedication-aura 4s ease-in-out infinite;
    opacity: 0;
}

@keyframes vvoa-dedication-aura {
    0%, 100% { 
        background-position: 0% 50%; 
        opacity: 0; 
        transform: scale(1);
    }
    50% { 
        background-position: 100% 50%; 
        opacity: 0.6; 
        transform: scale(1.2);
    }
}

.vvoa-passion-highlight-item:hover .vvoa-volunteer-dedication-icon {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 15px 40px rgba(25, 118, 210, 0.4);
}

.vvoa-passion-highlight-item:hover .vvoa-volunteer-dedication-icon::after {
    opacity: 0.8;
}

.vvoa-volunteer-passion-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    font-weight: 500;
}

.vvoa-volunteer-passion-text strong {
    color: #1976D2;
    font-weight: 700;
}

.vvoa-meet-team-cta-container {
    position: relative;
    display: inline-block;
}

.vvoa-meet-team-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #673AB7, #9C27B0, #8E24AA, #7B1FA2);
    background-size: 300% 100%;
    color: white;
    padding: 22px 45px;
    border: none;
    border-radius: 55px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(103, 58, 183, 0.4);
    animation: vvoa-team-cta-energy-pulse 5s ease-in-out infinite;
}

@keyframes vvoa-team-cta-energy-pulse {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 15px 40px rgba(103, 58, 183, 0.4);
    }
    33% { 
        background-position: 50% 0%; 
        box-shadow: 0 18px 50px rgba(103, 58, 183, 0.5);
    }
    66% { 
        background-position: 100% 50%; 
        box-shadow: 0 20px 55px rgba(103, 58, 183, 0.6);
    }
}

.vvoa-meet-team-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-meet-team-button:hover::before {
    width: 350px;
    height: 350px;
}

.vvoa-meet-team-button:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 25px 60px rgba(103, 58, 183, 0.7);
    animation-duration: 2.5s;
}

.vvoa-team-cta-icon {
    margin-left: 15px;
    font-size: 16px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-meet-team-button:hover .vvoa-team-cta-icon {
    transform: translateX(8px) rotate(90deg) scale(1.2);
}

.vvoa-edmonton-cityscape-visual-area {
    flex: 1;
    position: relative;
    height: 650px;
}

.vvoa-edmonton-skyline-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    overflow: hidden;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15), 
        rgba(25, 118, 210, 0.1));
    backdrop-filter: blur(20px);
    border: 3px solid rgba(25, 118, 210, 0.3);
    box-shadow: 0 30px 80px rgba(25, 118, 210, 0.2);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-edmonton-skyline-showcase::before {
    content: '';
    position: absolute;
    inset: -6px;
    background: linear-gradient(45deg, 
        transparent 0%,
        rgba(25, 118, 210, 0.4) 20%,
        rgba(76, 175, 80, 0.3) 40%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(76, 175, 80, 0.3) 80%,
        transparent 100%);
    background-size: 500% 500%;
    border-radius: 41px;
    z-index: -1;
    animation: vvoa-edmonton-pride-shimmer 15s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.8s ease;
}

@keyframes vvoa-edmonton-pride-shimmer {
    0%, 100% { background-position: 0% 50%; }
    20% { background-position: 100% 0%; }
    40% { background-position: 100% 100%; }
    60% { background-position: 0% 100%; }
    80% { background-position: 0% 0%; }
}

.vvoa-edmonton-skyline-showcase:hover::before {
    opacity: 1;
}

.vvoa-edmonton-skyline-showcase:hover {
    transform: scale(1.03) rotate(1.5deg);
    box-shadow: 0 40px 100px rgba(25, 118, 210, 0.3);
}

.vvoa-edmonton-cityscape-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1) contrast(1.05) saturate(1.2);
}

.vvoa-edmonton-skyline-showcase:hover .vvoa-edmonton-cityscape-image {
    transform: scale(1.1);
    filter: brightness(1.15) contrast(1.1) saturate(1.3);
}

.vvoa-edmonton-location-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 15px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #1976D2;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    border: 2px solid rgba(25, 118, 210, 0.3);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vvoa-edmonton-location-badge::before {
    content: '🏙️';
    font-size: 18px;
    animation: vvoa-city-pulse 3s ease-in-out infinite;
}

@keyframes vvoa-city-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.vvoa-edmonton-location-badge:hover {
    background: #1976D2;
    color: white;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 20px 50px rgba(25, 118, 210, 0.4);
}

.vvoa-team-collaboration-indicator {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(76, 175, 80, 0.9);
    backdrop-filter: blur(15px);
    padding: 18px 30px;
    border-radius: 35px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.vvoa-team-collaboration-indicator::before {
    content: '🤝';
    font-size: 20px;
    animation: vvoa-collaboration-handshake 4s ease-in-out infinite;
}

@keyframes vvoa-collaboration-handshake {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(3deg); }
}

.vvoa-team-collaboration-indicator:hover {
    background: rgba(76, 175, 80, 1);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(76, 175, 80, 0.5);
}

.vvoa-floating-volunteer-network-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.vvoa-volunteer-network-node {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.3);
    animation: vvoa-volunteer-network-pulse 8s ease-in-out infinite;
    border: 3px solid rgba(25, 118, 210, 0.4);
}

.vvoa-volunteer-network-node::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(25, 118, 210, 0.2);
    border-radius: 50%;
    animation: vvoa-network-connection-ripple 6s ease-out infinite;
}

@keyframes vvoa-volunteer-network-pulse {
    0%, 100% { transform: scale(1) translateY(0px); }
    25% { transform: scale(1.1) translateY(-8px); }
    50% { transform: scale(1.05) translateY(-4px); }
    75% { transform: scale(1.15) translateY(-12px); }
}

@keyframes vvoa-network-connection-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.8); opacity: 0.3; }
    100% { transform: scale(2.5); opacity: 0; }
}

.vvoa-volunteer-network-node:nth-child(1) {
    top: 20%;
    left: -8%;
    animation-delay: 0s;
    color: #1976D2;
}

.vvoa-volunteer-network-node:nth-child(2) {
    top: 50%;
    left: -12%;
    animation-delay: 2s;
    color: #4CAF50;
}

.vvoa-volunteer-network-node:nth-child(3) {
    top: 75%;
    left: -6%;
    animation-delay: 4s;
    color: #E91E63;
}

.vvoa-volunteer-network-node:nth-child(4) {
    top: 25%;
    right: -10%;
    animation-delay: 6s;
    color: #1976D2;
}

.vvoa-volunteer-network-node:nth-child(5) {
    bottom: 30%;
    right: -8%;
    animation-delay: 1s;
    color: #4CAF50;
}

.vvoa-team-leadership-constellation {
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(-50%);
    width: 250px;
    height: 300px;
    pointer-events: none;
}

.vvoa-leadership-star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(25, 118, 210, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(25, 118, 210, 0.6);
    animation: vvoa-star-constellation-twinkle 4s ease-in-out infinite;
}

.vvoa-leadership-star:nth-child(odd) {
    background: rgba(76, 175, 80, 0.8);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

@keyframes vvoa-star-constellation-twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.vvoa-leadership-star:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.vvoa-leadership-star:nth-child(2) { top: 25%; left: 60%; animation-delay: 0.5s; }
.vvoa-leadership-star:nth-child(3) { top: 40%; left: 30%; animation-delay: 1s; }
.vvoa-leadership-star:nth-child(4) { top: 55%; left: 70%; animation-delay: 1.5s; }
.vvoa-leadership-star:nth-child(5) { top: 70%; left: 40%; animation-delay: 2s; }
.vvoa-leadership-star:nth-child(6) { top: 85%; left: 80%; animation-delay: 2.5s; }
.vvoa-leadership-star:nth-child(7) { top: 15%; left: 80%; animation-delay: 3s; }
.vvoa-leadership-star:nth-child(8) { top: 60%; left: 10%; animation-delay: 3.5s; }

.vvoa-team-motivation-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.vvoa-motivation-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: vvoa-team-motivation-flow 14s linear infinite;
}

.vvoa-motivation-particle:nth-child(odd) {
    background: radial-gradient(circle, #1976D2, rgba(25, 118, 210, 0.3));
    animation-duration: 16s;
}

.vvoa-motivation-particle:nth-child(even) {
    background: radial-gradient(circle, #4CAF50, rgba(76, 175, 80, 0.3));
    animation-duration: 18s;
}

@keyframes vvoa-team-motivation-flow {
    0% { 
        transform: translateY(100vh) translateX(-30px) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(90vh) translateX(0px) scale(1); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(-10vh) translateX(30px) scale(1); 
    }
    100% { 
        transform: translateY(-20vh) translateX(60px) scale(0); 
        opacity: 0; 
    }
}

.vvoa-motivation-particle:nth-child(1) { left: 12%; animation-delay: 0s; }
.vvoa-motivation-particle:nth-child(2) { left: 22%; animation-delay: 3s; }
.vvoa-motivation-particle:nth-child(3) { left: 32%; animation-delay: 6s; }
.vvoa-motivation-particle:nth-child(4) { left: 42%; animation-delay: 9s; }
.vvoa-motivation-particle:nth-child(5) { left: 52%; animation-delay: 12s; }
.vvoa-motivation-particle:nth-child(6) { left: 62%; animation-delay: 2s; }
.vvoa-motivation-particle:nth-child(7) { left: 72%; animation-delay: 5s; }
.vvoa-motivation-particle:nth-child(8) { left: 82%; animation-delay: 8s; }
.vvoa-motivation-particle:nth-child(9) { left: 88%; animation-delay: 11s; }

@media (max-width: 1200px) {
    .vvoa-team-content-wrapper {
        gap: 80px;
    }

    .vvoa-team-leadership-constellation {
        display: none;
    }
}

@media (max-width: 1024px) {
    .vvoa-team-content-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 60px;
    }

    .vvoa-edmonton-cityscape-visual-area {
        height: 500px;
    }

    .vvoa-floating-volunteer-network-elements {
        display: none;
    }

    .vvoa-volunteer-spirit-icon {
        display: none;
    }
}

@media (max-width: 768px) {
    .vvoa-team-section-main-container {
        padding: 80px 0;
    }

    .vvoa-team-content-wrapper {
        padding: 0 4%;
        gap: 50px;
    }

    .vvoa-team-section-main-heading {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }

    .vvoa-team-organizational-description {
        font-size: 16px;
        max-width: 100%;
    }

    .vvoa-edmonton-cityscape-visual-area {
        height: 400px;
    }

    .vvoa-team-motivation-particles {
        display: none;
    }
}

@media (max-width: 480px) {
    .vvoa-volunteer-passion-highlights {
        gap: 20px;
    }

    .vvoa-passion-highlight-item {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .vvoa-volunteer-dedication-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .vvoa-meet-team-button {
        padding: 18px 35px;
        font-size: 15px;
    }
}





.vvoa-events-section-main-container {
    height: max-content;
    padding: 140px 0;
    background: radial-gradient(ellipse at top left, #FFF8E1 0%, #F3E5F5 25%),
                radial-gradient(ellipse at top right, #E8F5E8 0%, #E3F2FD 25%),
                radial-gradient(ellipse at bottom left, #FCE4EC 0%, #F1F8E9 25%),
                radial-gradient(ellipse at bottom right, #E0F2F1 0%, #FFF3E0 25%);
    background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%;
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
    animation: vvoa-events-cosmic-atmosphere 30s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes vvoa-events-cosmic-atmosphere {
    0%, 100% { 
        background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
        filter: hue-rotate(0deg);
    }
    25% { 
        background-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
        filter: hue-rotate(15deg);
    }
    50% { 
        background-position: 20% 20%, 80% 20%, 20% 80%, 80% 80%;
        filter: hue-rotate(30deg);
    }
    75% { 
        background-position: 10% 30%, 90% 30%, 10% 70%, 90% 70%;
        filter: hue-rotate(15deg);
    }
}

.vvoa-events-content-wrapper {
    display: flex;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    gap: 100px;
    position: relative;
    z-index: 10;
}

.vvoa-events-calendar-visual-area {
    flex: 1;
    position: relative;
}

.vvoa-upcoming-events-heading-container {
    margin-bottom: 60px;
    position: relative;
}

.vvoa-events-section-main-heading {
    font-size: clamp(3.2rem, 8vw, 5.5rem);
    line-height: 1.05;
    position: relative;
    color: #E91E63;
    font-weight: 800;
    text-align: center;
}

.vvoa-upcoming-events-text {
    background: linear-gradient(135deg, 
        #E91E63 0%, 
        #FF6B9D 15%, 
        #FFC107 30%, 
        #4CAF50 45%, 
        #1976D2 60%, 
        #9C27B0 75%, 
        #E91E63 90%);
    background-size: 600% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-events-rainbow-spectrum-flow 8s linear infinite;
    display: block;
    position: relative;
}

@keyframes vvoa-events-rainbow-spectrum-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 600% 50%; }
}

.vvoa-events-cosmic-orbit-decorations {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
}

.vvoa-event-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(233, 30, 99, 0.2);
    animation: vvoa-orbit-rotation 20s linear infinite;
}

.vvoa-event-orbit-ring:nth-child(1) {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 25s;
    border-color: rgba(233, 30, 99, 0.3);
}

.vvoa-event-orbit-ring:nth-child(2) {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 35s;
    animation-direction: reverse;
    border-color: rgba(76, 175, 80, 0.3);
}

.vvoa-event-orbit-ring:nth-child(3) {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 45s;
    border-color: rgba(25, 118, 210, 0.3);
}

@keyframes vvoa-orbit-rotation {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vvoa-event-orbit-planet {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    animation: vvoa-planet-orbit 20s linear infinite;
}

.vvoa-event-orbit-planet:nth-child(4) {
    background: radial-gradient(circle, #E91E63, #C2185B);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 25s;
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.6);
}

.vvoa-event-orbit-planet:nth-child(5) {
    background: radial-gradient(circle, #4CAF50, #2E7D32);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-duration: 35s;
    animation-direction: reverse;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
}

.vvoa-event-orbit-planet:nth-child(6) {
    background: radial-gradient(circle, #1976D2, #0D47A1);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 45s;
    box-shadow: 0 0 20px rgba(25, 118, 210, 0.6);
}

@keyframes vvoa-planet-orbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); }
}

.vvoa-events-calendar-showcase-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    border-radius: 40px;
    padding: 50px;
    border: 3px solid rgba(233, 30, 99, 0.2);
    box-shadow: 0 35px 90px rgba(233, 30, 99, 0.15);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vvoa-events-calendar-showcase-container:hover::before {
    opacity: 1;
}

.vvoa-events-calendar-showcase-container:hover {
    transform: scale(1.02) rotate(1deg);
    box-shadow: 0 45px 110px rgba(233, 30, 99, 0.25);
}

.vvoa-event-item-container {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    border: 2px solid rgba(233, 30, 99, 0.1);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vvoa-event-item-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(233, 30, 99, 0.1) 25%,
        rgba(76, 175, 80, 0.1) 50%,
        rgba(25, 118, 210, 0.1) 75%,
        transparent 100%);
    transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-event-item-container:hover::before {
    left: 100%;
}

.vvoa-event-item-container:hover {
    transform: translateX(20px) scale(1.03);
    box-shadow: 0 25px 60px rgba(233, 30, 99, 0.2);
    border-color: rgba(233, 30, 99, 0.3);
}

.vvoa-event-date-display-container {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #E91E63, #FF6B9D);
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 15px 40px rgba(233, 30, 99, 0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-event-date-display-container::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(135deg, #FF6B9D, #E91E63);
    border-radius: 22px;
    z-index: -1;
    transition: all 0.4s ease;
}

.vvoa-event-item-container:hover .vvoa-event-date-display-container {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 20px 50px rgba(233, 30, 99, 0.5);
}

.vvoa-event-item-container:hover .vvoa-event-date-display-container::after {
    inset: 0px;
}

.vvoa-event-month-abbreviation {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.vvoa-event-day-number {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.vvoa-event-details-container {
    flex: 1;
}

.vvoa-event-title-text {
    font-size: 20px;
    font-weight: 700;
    color: #2E7D32;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.vvoa-event-item-container:hover .vvoa-event-title-text {
    color: #E91E63;
}

.vvoa-event-time-details {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.vvoa-floating-event-celebration-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.vvoa-celebration-confetti-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(45deg, #E91E63, #FF6B9D);
    animation: vvoa-confetti-celebration-fall 6s linear infinite;
    transform-origin: center;
}

.vvoa-celebration-confetti-piece:nth-child(odd) {
    background: linear-gradient(45deg, #4CAF50, #81C784);
    animation-duration: 8s;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.vvoa-celebration-confetti-piece:nth-child(even) {
    background: linear-gradient(45deg, #1976D2, #42A5F5);
    animation-duration: 7s;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.vvoa-celebration-confetti-piece:nth-child(3n) {
    background: linear-gradient(45deg, #FFC107, #FFD54F);
    animation-duration: 9s;
    border-radius: 50%;
}

@keyframes vvoa-confetti-celebration-fall {
    0% { 
        transform: translateY(-100vh) rotate(0deg) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(-80vh) rotate(90deg) scale(1); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(100vh) rotate(720deg) scale(1); 
    }
    100% { 
        transform: translateY(120vh) rotate(810deg) scale(0); 
        opacity: 0; 
    }
}

.vvoa-celebration-confetti-piece:nth-child(1) { left: 5%; animation-delay: 0s; }
.vvoa-celebration-confetti-piece:nth-child(2) { left: 15%; animation-delay: 1s; }
.vvoa-celebration-confetti-piece:nth-child(3) { left: 25%; animation-delay: 2s; }
.vvoa-celebration-confetti-piece:nth-child(4) { left: 35%; animation-delay: 3s; }
.vvoa-celebration-confetti-piece:nth-child(5) { left: 45%; animation-delay: 4s; }
.vvoa-celebration-confetti-piece:nth-child(6) { left: 55%; animation-delay: 0.5s; }
.vvoa-celebration-confetti-piece:nth-child(7) { left: 65%; animation-delay: 1.5s; }
.vvoa-celebration-confetti-piece:nth-child(8) { left: 75%; animation-delay: 2.5s; }
.vvoa-celebration-confetti-piece:nth-child(9) { left: 85%; animation-delay: 3.5s; }
.vvoa-celebration-confetti-piece:nth-child(10) { left: 95%; animation-delay: 4.5s; }

.vvoa-events-description-content-area {
    flex: 1;
    position: relative;
    padding-left: 40px;
}

.vvoa-events-organizational-description {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 50px;
    position: relative;
}

.vvoa-events-organizational-description::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 0;
    width: 8px;
    height: 100%;
    background: conic-gradient(from 0deg, 
        #E91E63, #FF6B9D, #FFC107, #4CAF50, 
        #1976D2, #9C27B0, #E91E63);
    border-radius: 4px;
    animation: vvoa-events-dedication-spectrum 10s linear infinite;
}

@keyframes vvoa-events-dedication-spectrum {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.vvoa-vegfest-highlight-container {
    background: linear-gradient(135deg, 
        rgba(255, 193, 7, 0.15) 0%, 
        rgba(76, 175, 80, 0.15) 25%,
        rgba(233, 30, 99, 0.15) 50%,
        rgba(25, 118, 210, 0.15) 75%,
        rgba(156, 39, 176, 0.15) 100%);
    background-size: 400% 400%;
    animation: vvoa-vegfest-celebration-aura 12s ease-in-out infinite;
    padding: 35px;
    border-radius: 30px;
    border: 3px solid rgba(255, 193, 7, 0.3);
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

@keyframes vvoa-vegfest-celebration-aura {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.vvoa-vegfest-highlight-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    transition: left 2s ease;
}

.vvoa-vegfest-highlight-container:hover::before {
    left: 100%;
}

.vvoa-vegfest-festival-emphasis {
    font-weight: 700;
    color: #ffb24d;
    background: linear-gradient(135deg, #ffdeb3, #ffffff, #fefaf6);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-vegfest-golden-shimmer 3s ease-in-out infinite;
    font-size: 19px;
}

@keyframes vvoa-vegfest-golden-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-view-calendar-cta-container {
    position: relative;
    display: inline-block;
}

.vvoa-view-calendar-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, 
        #673AB7 0%, 
        #9C27B0 25%, 
        #E91E63 50%, 
        #9C27B0 75%, 
        #673AB7 100%);
    background-size: 400% 100%;
    color: white;
    padding: 25px 50px;
    border: none;
    border-radius: 60px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 18px 45px rgba(103, 58, 183, 0.4);
    animation: vvoa-calendar-cta-energy-wave 6s ease-in-out infinite;
}

@keyframes vvoa-calendar-cta-energy-wave {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 18px 45px rgba(103, 58, 183, 0.4);
    }
    25% { 
        background-position: 100% 0%; 
        box-shadow: 0 22px 55px rgba(156, 39, 176, 0.5);
    }
    50% { 
        background-position: 200% 50%; 
        box-shadow: 0 25px 60px rgba(233, 30, 99, 0.6);
    }
    75% { 
        background-position: 300% 100%; 
        box-shadow: 0 22px 55px rgba(156, 39, 176, 0.5);
    }
}

.vvoa-view-calendar-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-view-calendar-button:hover::before {
    width: 400px;
    height: 400px;
}

.vvoa-view-calendar-button:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 30px 70px rgba(103, 58, 183, 0.7);
    animation-duration: 3s;
}

.vvoa-calendar-cta-icon {
    margin-left: 18px;
    font-size: 18px;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-view-calendar-button:hover .vvoa-calendar-cta-icon {
    transform: translateX(10px) rotate(180deg) scale(1.3);
}

.vvoa-event-impact-statistics-orbital {
    position: absolute;
    top: 20%;
    right: -100px;
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.vvoa-impact-orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 50%;
    animation: vvoa-impact-orbital-rotation 15s linear infinite;
}

.vvoa-impact-orbital-ring:nth-child(1) {
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    animation-duration: 20s;
}

.vvoa-impact-orbital-ring:nth-child(2) {
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    animation-duration: 30s;
    animation-direction: reverse;
    border-color: rgba(76, 175, 80, 0.3);
}

.vvoa-impact-orbital-ring:nth-child(3) {
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
    animation-duration: 40s;
    border-color: rgba(233, 30, 99, 0.3);
}

@keyframes vvoa-impact-orbital-rotation {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vvoa-impact-data-satellite {
    position: absolute;
    width: 35px;
    height: 35px;
    background: radial-gradient(circle, #FFC107, #FF8F00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: white;
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.8);
    animation: vvoa-satellite-orbit 15s linear infinite;
}

.vvoa-impact-data-satellite:nth-child(4) {
    animation-duration: 20s;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.vvoa-impact-data-satellite:nth-child(5) {
    animation-duration: 30s;
    animation-direction: reverse;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: radial-gradient(circle, #4CAF50, #2E7D32);
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.8);
}

.vvoa-impact-data-satellite:nth-child(6) {
    animation-duration: 40s;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, #E91E63, #C2185B);
    box-shadow: 0 0 25px rgba(233, 30, 99, 0.8);
}

@keyframes vvoa-satellite-orbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(60px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg); }
}

@media (max-width: 1200px) {
    .vvoa-events-content-wrapper {
        gap: 60px;
    }

    .vvoa-event-impact-statistics-orbital {
        display: none;
    }
}

@media (max-width: 1024px) {
    .vvoa-events-content-wrapper {
        flex-direction: column;
        gap: 80px;
    }

    .vvoa-events-description-content-area {
        padding-left: 0;
        order: 1;
        text-align: center;
    }

    .vvoa-events-calendar-visual-area {
        order: 2;
    }

    .vvoa-floating-event-celebration-elements {
        display: none;
    }

    .vvoa-events-cosmic-orbit-decorations {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .vvoa-events-section-main-container {
        padding: 50px 0;
    }

    .vvoa-events-content-wrapper {
        padding: 0 4%;
        gap: 60px;
    }

    .vvoa-events-section-main-heading {
        font-size: clamp(2.8rem, 10vw, 4.5rem);
    }

    .vvoa-events-organizational-description {
        font-size: 16px;
    }

    .vvoa-events-calendar-showcase-container {
        padding: 30px;
    }

    .vvoa-event-item-container {
        padding: 20px;
        gap: 20px;
    }

    .vvoa-event-date-display-container {
        width: 80px;
        height: 80px;
    }

    .vvoa-event-day-number {
        font-size: 24px;
    }

    .vvoa-events-cosmic-orbit-decorations {
        display: none;
    }

    .vvoa-countdown-timer-container {
        padding: 20px;
        margin-top: 30px;
    }

    .vvoa-countdown-display {
        gap: 15px;
    }

    .vvoa-countdown-unit {
        min-width: 60px;
        padding: 10px 15px;
    }

    .vvoa-countdown-number {
        font-size: 24px;
    }

    .vvoa-next-event-name {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .vvoa-event-item-container {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .vvoa-event-date-display-container {
        width: 70px;
        height: 70px;
    }

    .vvoa-event-day-number {
        font-size: 20px;
    }

    .vvoa-event-month-abbreviation {
        font-size: 12px;
    }

    .vvoa-view-calendar-button {
        padding: 20px 40px;
        font-size: 16px;
    }

    .vvoa-vegfest-highlight-container {
        padding: 25px;
    }
}



.vvoa-team-section-main-container {
    height: max-content;
    padding: 120px 0;
    background: linear-gradient(135deg, 
        #E3F2FD 0%, 
        #E8F5E8 25%, 
        #F3E5F5 50%, 
        #E0F2F1 75%, 
        #E3F2FD 100%);
    background-size: 400% 400%;
    animation: vvoa-team-atmosphere-shift 25s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes vvoa-team-atmosphere-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
}

.vvoa-edmonton-skyline-silhouette-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top,
        rgba(76, 175, 80, 0.15) 0%,
        rgba(25, 118, 210, 0.1) 30%,
        rgba(76, 175, 80, 0.08) 60%,
        transparent 100%);
    clip-path: polygon(
        0% 100%, 
        0% 75%, 
        8% 70%, 
        12% 80%, 
        18% 60%, 
        22% 85%, 
        28% 45%, 
        32% 75%, 
        38% 40%, 
        42% 80%, 
        48% 35%, 
        52% 75%, 
        58% 50%, 
        62% 85%, 
        68% 45%, 
        72% 70%, 
        78% 55%, 
        82% 80%, 
        88% 50%, 
        92% 75%, 
        100% 65%, 
        100% 100%
    );
    animation: vvoa-skyline-gentle-sway 20s ease-in-out infinite;
}

@keyframes vvoa-skyline-gentle-sway {
    0%, 100% { transform: translateY(0px); opacity: 0.6; }
    25% { transform: translateY(-5px); opacity: 0.8; }
    50% { transform: translateY(0px); opacity: 0.7; }
    75% { transform: translateY(-3px); opacity: 0.9; }
}

.vvoa-team-content-wrapper {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    gap: 120px;
    position: relative;
    z-index: 10;
}

.vvoa-team-description-content-area {
    flex: 1;
    position: relative;
}

.vvoa-team-section-main-heading {
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 35px;
    position: relative;
    color: #E91E63;
    font-weight: 700;
}

.vvoa-meet-our-team-text {
    background: linear-gradient(135deg, #E91E63, #FF6B9D, #C2185B, #AD1457);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-team-leadership-gradient-flow 6s ease-in-out infinite;
    display: block;
    position: relative;
}

@keyframes vvoa-team-leadership-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    33% { background-position: 50% 0%; }
    66% { background-position: 100% 50%; }
}

.vvoa-meet-our-team-text::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        #E91E63 0%, 
        #1976D2 25%, 
        #4CAF50 50%, 
        #1976D2 75%, 
        #E91E63 100%);
    background-size: 400% 100%;
    animation: vvoa-team-underline-expansion 3s ease-out 1s forwards,
               vvoa-team-underline-wave 8s ease-in-out infinite;
}

@keyframes vvoa-team-underline-expansion {
    to { width: 100%; }
}

@keyframes vvoa-team-underline-wave {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-team-volunteer-spirit-icon {
    position: absolute;
    right: -40px;
    top: 20%;
    font-size: 35px;
    color: rgba(25, 118, 210, 0.3);
    animation: vvoa-volunteer-spirit-orbit 12s linear infinite;
    transform-origin: -20px 50px;
}

@keyframes vvoa-volunteer-spirit-orbit {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

.vvoa-team-organizational-description {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 50px;
    max-width: 580px;
    position: relative;
}

.vvoa-team-organizational-description::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, 
        #1976D2 0%, 
        #4CAF50 25%, 
        #E91E63 50%, 
        #4CAF50 75%, 
        #1976D2 100%);
    background-size: 100% 300%;
    border-radius: 3px;
    animation: vvoa-team-dedication-flow 10s ease-in-out infinite;
}

@keyframes vvoa-team-dedication-flow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

.vvoa-volunteer-passion-highlights {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
}

.vvoa-passion-highlight-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    border: 2px solid rgba(25, 118, 210, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vvoa-passion-highlight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(25, 118, 210, 0.1), 
        rgba(76, 175, 80, 0.1),
        transparent);
    transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-passion-highlight-item:hover::before {
    left: 100%;
}

.vvoa-passion-highlight-item:hover {
    transform: translateX(15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.4);
}

.vvoa-volunteer-dedication-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1976D2, #42A5F5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.vvoa-volunteer-dedication-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(45deg, #1976D2, #42A5F5, #1976D2);
    background-size: 200% 200%;
    border-radius: 50%;
    z-index: -1;
    animation: vvoa-dedication-aura 4s ease-in-out infinite;
    opacity: 0;
}

@keyframes vvoa-dedication-aura {
    0%, 100% { 
        background-position: 0% 50%; 
        opacity: 0; 
        transform: scale(1);
    }
    50% { 
        background-position: 100% 50%; 
        opacity: 0.6; 
        transform: scale(1.2);
    }
}

.vvoa-passion-highlight-item:hover .vvoa-volunteer-dedication-icon {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 15px 40px rgba(25, 118, 210, 0.4);
}

.vvoa-passion-highlight-item:hover .vvoa-volunteer-dedication-icon::after {
    opacity: 0.8;
}

.vvoa-volunteer-passion-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    font-weight: 500;
}

.vvoa-volunteer-passion-text strong {
    color: #1976D2;
    font-weight: 700;
}

.vvoa-meet-team-cta-container {
    position: relative;
    display: inline-block;
}

.vvoa-meet-team-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #673AB7, #9C27B0, #8E24AA, #7B1FA2);
    background-size: 300% 100%;
    color: white;
    padding: 22px 45px;
    border: none;
    border-radius: 55px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(103, 58, 183, 0.4);
    animation: vvoa-team-cta-energy-pulse 5s ease-in-out infinite;
}

@keyframes vvoa-team-cta-energy-pulse {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 15px 40px rgba(103, 58, 183, 0.4);
    }
    33% { 
        background-position: 50% 0%; 
        box-shadow: 0 18px 50px rgba(103, 58, 183, 0.5);
    }
    66% { 
        background-position: 100% 50%; 
        box-shadow: 0 20px 55px rgba(103, 58, 183, 0.6);
    }
}

.vvoa-meet-team-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-meet-team-button:hover::before {
    width: 350px;
    height: 350px;
}

.vvoa-meet-team-button:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 25px 60px rgba(103, 58, 183, 0.7);
    animation-duration: 2.5s;
}

.vvoa-team-cta-icon {
    margin-left: 15px;
    font-size: 16px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-meet-team-button:hover .vvoa-team-cta-icon {
    transform: translateX(8px) rotate(90deg) scale(1.2);
}

.vvoa-edmonton-cityscape-visual-area {
    flex: 1;
    position: relative;
    height: 650px;
}

.vvoa-edmonton-skyline-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    overflow: hidden;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15), 
        rgba(25, 118, 210, 0.1));
    backdrop-filter: blur(20px);
    border: 3px solid rgba(25, 118, 210, 0.3);
    box-shadow: 0 30px 80px rgba(25, 118, 210, 0.2);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-edmonton-skyline-showcase::before {
    content: '';
    position: absolute;
    inset: -6px;
    background: linear-gradient(45deg, 
        transparent 0%,
        rgba(25, 118, 210, 0.4) 20%,
        rgba(76, 175, 80, 0.3) 40%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(76, 175, 80, 0.3) 80%,
        transparent 100%);
    background-size: 500% 500%;
    border-radius: 41px;
    z-index: -1;
    animation: vvoa-edmonton-pride-shimmer 15s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.8s ease;
}

@keyframes vvoa-edmonton-pride-shimmer {
    0%, 100% { background-position: 0% 50%; }
    20% { background-position: 100% 0%; }
    40% { background-position: 100% 100%; }
    60% { background-position: 0% 100%; }
    80% { background-position: 0% 0%; }
}

.vvoa-edmonton-skyline-showcase:hover::before {
    opacity: 1;
}

.vvoa-edmonton-skyline-showcase:hover {
    transform: scale(1.03) rotate(1.5deg);
    box-shadow: 0 40px 100px rgba(25, 118, 210, 0.3);
}

.vvoa-edmonton-cityscape-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1) contrast(1.05) saturate(1.2);
}

.vvoa-edmonton-skyline-showcase:hover .vvoa-edmonton-cityscape-image {
    transform: scale(1.1);
    filter: brightness(1.15) contrast(1.1) saturate(1.3);
}

.vvoa-edmonton-location-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 15px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #1976D2;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
    border: 2px solid rgba(25, 118, 210, 0.3);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vvoa-edmonton-location-badge::before {
    content: '🏙️';
    font-size: 18px;
    animation: vvoa-city-pulse 3s ease-in-out infinite;
}

@keyframes vvoa-city-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.vvoa-edmonton-location-badge:hover {
    background: #1976D2;
    color: white;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 20px 50px rgba(25, 118, 210, 0.4);
}

.vvoa-team-collaboration-indicator {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(76, 175, 80, 0.9);
    backdrop-filter: blur(15px);
    padding: 18px 30px;
    border-radius: 35px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.vvoa-team-collaboration-indicator::before {
    content: '🤝';
    font-size: 20px;
    animation: vvoa-collaboration-handshake 4s ease-in-out infinite;
}

@keyframes vvoa-collaboration-handshake {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(3deg); }
}

.vvoa-team-collaboration-indicator:hover {
    background: rgba(76, 175, 80, 1);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(76, 175, 80, 0.5);
}

.vvoa-floating-volunteer-network-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.vvoa-volunteer-network-node {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.3);
    animation: vvoa-volunteer-network-pulse 8s ease-in-out infinite;
    border: 3px solid rgba(25, 118, 210, 0.4);
}

.vvoa-volunteer-network-node::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(25, 118, 210, 0.2);
    border-radius: 50%;
    animation: vvoa-network-connection-ripple 6s ease-out infinite;
}

@keyframes vvoa-volunteer-network-pulse {
    0%, 100% { transform: scale(1) translateY(0px); }
    25% { transform: scale(1.1) translateY(-8px); }
    50% { transform: scale(1.05) translateY(-4px); }
    75% { transform: scale(1.15) translateY(-12px); }
}

@keyframes vvoa-network-connection-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.8); opacity: 0.3; }
    100% { transform: scale(2.5); opacity: 0; }
}

.vvoa-volunteer-network-node:nth-child(1) {
    top: 20%;
    left: -8%;
    animation-delay: 0s;
    color: #1976D2;
}

.vvoa-volunteer-network-node:nth-child(2) {
    top: 50%;
    left: -12%;
    animation-delay: 2s;
    color: #4CAF50;
}

.vvoa-volunteer-network-node:nth-child(3) {
    top: 75%;
    left: -6%;
    animation-delay: 4s;
    color: #E91E63;
}

.vvoa-volunteer-network-node:nth-child(4) {
    top: 25%;
    right: -10%;
    animation-delay: 6s;
    color: #1976D2;
}

.vvoa-volunteer-network-node:nth-child(5) {
    bottom: 30%;
    right: -8%;
    animation-delay: 1s;
    color: #4CAF50;
}

.vvoa-team-leadership-constellation {
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(-50%);
    width: 250px;
    height: 300px;
    pointer-events: none;
}

.vvoa-leadership-star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(25, 118, 210, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(25, 118, 210, 0.6);
    animation: vvoa-star-constellation-twinkle 4s ease-in-out infinite;
}

.vvoa-leadership-star:nth-child(odd) {
    background: rgba(76, 175, 80, 0.8);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

@keyframes vvoa-star-constellation-twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.vvoa-leadership-star:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.vvoa-leadership-star:nth-child(2) { top: 25%; left: 60%; animation-delay: 0.5s; }
.vvoa-leadership-star:nth-child(3) { top: 40%; left: 30%; animation-delay: 1s; }
.vvoa-leadership-star:nth-child(4) { top: 55%; left: 70%; animation-delay: 1.5s; }
.vvoa-leadership-star:nth-child(5) { top: 70%; left: 40%; animation-delay: 2s; }
.vvoa-leadership-star:nth-child(6) { top: 85%; left: 80%; animation-delay: 2.5s; }
.vvoa-leadership-star:nth-child(7) { top: 15%; left: 80%; animation-delay: 3s; }
.vvoa-leadership-star:nth-child(8) { top: 60%; left: 10%; animation-delay: 3.5s; }

.vvoa-team-motivation-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.vvoa-motivation-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: vvoa-team-motivation-flow 14s linear infinite;
}

.vvoa-motivation-particle:nth-child(odd) {
    background: radial-gradient(circle, #1976D2, rgba(25, 118, 210, 0.3));
    animation-duration: 16s;
}

.vvoa-motivation-particle:nth-child(even) {
    background: radial-gradient(circle, #4CAF50, rgba(76, 175, 80, 0.3));
    animation-duration: 18s;
}

@keyframes vvoa-team-motivation-flow {
    0% { 
        transform: translateY(100vh) translateX(-30px) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(90vh) translateX(0px) scale(1); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(-10vh) translateX(30px) scale(1); 
    }
    100% { 
        transform: translateY(-20vh) translateX(60px) scale(0); 
        opacity: 0; 
    }
}

.vvoa-motivation-particle:nth-child(1) { left: 12%; animation-delay: 0s; }
.vvoa-motivation-particle:nth-child(2) { left: 22%; animation-delay: 3s; }
.vvoa-motivation-particle:nth-child(3) { left: 32%; animation-delay: 6s; }
.vvoa-motivation-particle:nth-child(4) { left: 42%; animation-delay: 9s; }
.vvoa-motivation-particle:nth-child(5) { left: 52%; animation-delay: 12s; }
.vvoa-motivation-particle:nth-child(6) { left: 62%; animation-delay: 2s; }
.vvoa-motivation-particle:nth-child(7) { left: 72%; animation-delay: 5s; }
.vvoa-motivation-particle:nth-child(8) { left: 82%; animation-delay: 8s; }
.vvoa-motivation-particle:nth-child(9) { left: 88%; animation-delay: 11s; }

@media (max-width: 1200px) {
    .vvoa-team-content-wrapper {
        gap: 80px;
    }

    .vvoa-team-leadership-constellation {
        display: none;
    }
}

@media (max-width: 1024px) {
    .vvoa-team-content-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 60px;
    }

    .vvoa-edmonton-cityscape-visual-area {
        height: 500px;
    }

    .vvoa-floating-volunteer-network-elements {
        display: none;
    }

    .vvoa-volunteer-spirit-icon {
        display: none;
    }
}

@media (max-width: 768px) {
    .vvoa-team-section-main-container {
        padding: 80px 0;
    }

    .vvoa-team-content-wrapper {
        padding: 0 4%;
        gap: 50px;
    }

    .vvoa-team-section-main-heading {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }

    .vvoa-team-organizational-description {
        font-size: 16px;
        max-width: 100%;
    }

    .vvoa-edmonton-cityscape-visual-area {
        height: 400px;
    }

    .vvoa-team-motivation-particles {
        display: none;
    }
}

@media (max-width: 480px) {
    .vvoa-volunteer-passion-highlights {
        gap: 20px;
    }

    .vvoa-passion-highlight-item {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .vvoa-volunteer-dedication-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .vvoa-meet-team-button {
        padding: 18px 35px;
        font-size: 15px;
    }
}



.vvoa-get-involved-section-main-container {
    height: max-content;
    padding: 160px 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, #E8F5E8 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 0% 50%, #FCE4EC 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 100% 50%, #E3F2FD 0%, transparent 50%),
                radial-gradient(ellipse 80% 50% at 50% 100%, #FFF8E1 0%, transparent 50%),
                linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
    animation: vvoa-involvement-ecosystem-breathing 35s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes vvoa-involvement-ecosystem-breathing {
    0%, 100% { 
        filter: hue-rotate(0deg) brightness(1); 
        transform: scale(1);
    }
    25% { 
        filter: hue-rotate(10deg) brightness(1.05); 
        transform: scale(1.01);
    }
    50% { 
        filter: hue-rotate(20deg) brightness(1.1); 
        transform: scale(1.02);
    }
    75% { 
        filter: hue-rotate(10deg) brightness(1.05); 
        transform: scale(1.01);
    }
}

.vvoa-community-growth-network-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(76, 175, 80, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(233, 30, 99, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 20% 80%, rgba(25, 118, 210, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(156, 39, 176, 0.05) 0%, transparent 30%);
    animation: vvoa-network-pulse-synchronization 25s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vvoa-network-pulse-synchronization {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    25% { opacity: 0.8; transform: scale(1.05); }
    50% { opacity: 1; transform: scale(1.1); }
    75% { opacity: 0.8; transform: scale(1.05); }
}

.vvoa-get-involved-heading-cosmic-container {
    text-align: center;
    margin-bottom: 100px;
    position: relative;
}

.vvoa-get-involved-main-heading {
    font-size: clamp(3.5rem, 9vw, 6.5rem);
    line-height: 1;
    position: relative;
    color: #E91E63;
    font-weight: 800;
    margin-bottom: 40px;
}

.vvoa-get-involved-text {
    background: conic-gradient(from 0deg, 
        #E91E63 0deg, 
        #FF6B9D 60deg, 
        #FFC107 120deg, 
        #4CAF50 180deg, 
        #1976D2 240deg, 
        #9C27B0 300deg, 
        #E91E63 360deg);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-involvement-conic-rotation 12s linear infinite;
    display: block;
    position: relative;
}

@keyframes vvoa-involvement-conic-rotation {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.vvoa-involvement-motivation-description {
    font-size: 20px;
    line-height: 1.7;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.vvoa-involvement-motivation-description::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    width: 100px;
    height: 6px;
    background: linear-gradient(90deg, 
        #E91E63, #FFC107, #4CAF50, #1976D2, #9C27B0, #E91E63);
    background-size: 200% 100%;
    border-radius: 3px;
    animation: vvoa-motivation-energy-flow 8s ease-in-out infinite;
}

@keyframes vvoa-motivation-energy-flow {
    0%, 100% { background-position: 0% 50%; width: 100px; }
    50% { background-position: 100% 50%; width: 200px; }
}

.vvoa-involvement-options-grid-container {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
}

.vvoa-involvement-option-card {
    flex: 1;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    border-radius: 40px;
    padding: 60px 40px;
    text-align: center;
    border: 3px solid transparent;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
}

.vvoa-involvement-option-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, 
        var(--card-primary-color), 
        var(--card-secondary-color), 
        var(--card-primary-color));
    border-radius: 43px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
    animation: vvoa-card-border-rotation 8s linear infinite;
}

@keyframes vvoa-card-border-rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vvoa-involvement-option-card:hover::before {
    opacity: 0.3;
}

.vvoa-involvement-option-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
    z-index: 9;
}

.vvoa-membership-card {
    --card-primary-color: #4CAF50;
    --card-secondary-color: #81C784;
}

.vvoa-donate-card {
    --card-primary-color: #FF9800;
    --card-secondary-color: #FFB74D;
}

.vvoa-volunteer-card {
    --card-primary-color: #2196F3;
    --card-secondary-color: #64B5F6;
}

.vvoa-involvement-icon-constellation {
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
    position: relative;
    background: linear-gradient(135deg, var(--card-primary-color), var(--card-secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-involvement-icon-constellation::before {
    content: '';
    position: absolute;
    inset: -15px;
    background: conic-gradient(from 0deg, 
        var(--card-primary-color), 
        transparent, 
        var(--card-secondary-color), 
        transparent, 
        var(--card-primary-color));
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    animation: vvoa-constellation-orbit 6s linear infinite;
    transition: opacity 0.6s ease;
}

@keyframes vvoa-constellation-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vvoa-involvement-option-card:hover .vvoa-involvement-icon-constellation::before {
    opacity: 0.6;
}

.vvoa-involvement-option-card:hover .vvoa-involvement-icon-constellation {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.vvoa-involvement-icon-constellation i {
    font-size: 50px;
    color: white;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.4s ease;
}

.vvoa-involvement-option-card:hover .vvoa-involvement-icon-constellation i {
    transform: scale(1.1) rotate(-10deg);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.vvoa-floating-impact-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.vvoa-impact-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: vvoa-impact-spiral-dance 15s ease-in-out infinite;
}

.vvoa-impact-particle:nth-child(odd) {
    background: radial-gradient(circle, #4CAF50, rgba(76, 175, 80, 0.3));
    animation-duration: 18s;
}

.vvoa-impact-particle:nth-child(even) {
    background: radial-gradient(circle, #FF9800, rgba(255, 152, 0, 0.3));
    animation-duration: 22s;
}

.vvoa-impact-particle:nth-child(3n) {
    background: radial-gradient(circle, #2196F3, rgba(33, 150, 243, 0.3));
    animation-duration: 20s;
}

@keyframes vvoa-impact-spiral-dance {
    0% { 
        transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
        transform: translateY(80vh) translateX(20px) rotate(36deg) scale(1); 
    }
    20% { 
        transform: translateY(60vh) translateX(-15px) rotate(72deg) scale(1.2); 
    }
    30% { 
        transform: translateY(40vh) translateX(25px) rotate(108deg) scale(1); 
    }
    40% { 
        transform: translateY(20vh) translateX(-20px) rotate(144deg) scale(1.3); 
    }
    50% { 
        transform: translateY(0vh) translateX(15px) rotate(180deg) scale(1.1); 
    }
    60% { 
        transform: translateY(-20vh) translateX(-25px) rotate(216deg) scale(1.4); 
    }
    70% { 
        transform: translateY(-40vh) translateX(20px) rotate(252deg) scale(1.2); 
    }
    80% { 
        transform: translateY(-60vh) translateX(-15px) rotate(288deg) scale(1.5); 
    }
    90% { 
        opacity: 1; 
        transform: translateY(-80vh) translateX(10px) rotate(324deg) scale(1.3); 
    }
    100% { 
        transform: translateY(-100vh) translateX(0px) rotate(360deg) scale(0); 
        opacity: 0; 
    }
}

.vvoa-impact-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.vvoa-impact-particle:nth-child(2) { left: 20%; animation-delay: 3s; }
.vvoa-impact-particle:nth-child(3) { left: 30%; animation-delay: 6s; }
.vvoa-impact-particle:nth-child(4) { left: 40%; animation-delay: 9s; }
.vvoa-impact-particle:nth-child(5) { left: 50%; animation-delay: 12s; }
.vvoa-impact-particle:nth-child(6) { left: 60%; animation-delay: 2s; }
.vvoa-impact-particle:nth-child(7) { left: 70%; animation-delay: 5s; }
.vvoa-impact-particle:nth-child(8) { left: 80%; animation-delay: 8s; }
.vvoa-impact-particle:nth-child(9) { left: 90%; animation-delay: 11s; }

.vvoa-involvement-option-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 25px;
    position: relative;
}

.vvoa-involvement-option-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-primary-color), var(--card-secondary-color));
    opacity: 0.1;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vvoa-involvement-option-card:hover .vvoa-involvement-option-title::after {
    width: 80px;
}

.vvoa-involvement-option-description {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 40px;
    position: relative;
}

.vvoa-involvement-cta-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--card-primary-color), var(--card-secondary-color));
    color: white;
    padding: 18px 35px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.vvoa-involvement-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vvoa-involvement-cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.vvoa-involvement-cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.vvoa-involvement-cta-icon {
    margin-left: 10px;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.vvoa-involvement-cta-button:hover .vvoa-involvement-cta-icon {
    transform: translateX(5px) rotate(90deg);
}

.vvoa-community-connection-visualization {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    pointer-events: none;
    z-index: 1;
}

.vvoa-connection-node {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 2px solid rgba(233, 30, 99, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    animation: vvoa-connection-network-pulse 8s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.vvoa-connection-node::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(233, 30, 99, 0.2);
    border-radius: 50%;
    animation: vvoa-connection-ripple 6s ease-out infinite;
}

@keyframes vvoa-connection-network-pulse {
    0%, 100% { transform: scale(1) translateY(0px); }
    25% { transform: scale(1.1) translateY(-5px); }
    50% { transform: scale(1.05) translateY(0px); }
    75% { transform: scale(1.15) translateY(-8px); }
}

@keyframes vvoa-connection-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(2); opacity: 0.3; }
    100% { transform: scale(3); opacity: 0; }
}

.vvoa-connection-node:nth-child(1) {
    top: 10%;
    left: 30%;
    animation-delay: 0s;
    color: #4CAF50;
}

.vvoa-connection-node:nth-child(2) {
    top: 10%;
    right: 30%;
    animation-delay: 1s;
    color: #FF9800;
}

.vvoa-connection-node:nth-child(3) {
    top: 30%;
    left: 10%;
    animation-delay: 2s;
    color: #2196F3;
}

.vvoa-connection-node:nth-child(4) {
    top: 30%;
    right: 10%;
    animation-delay: 3s;
    color: #E91E63;
}

.vvoa-connection-node:nth-child(5) {
    bottom: 30%;
    left: 10%;
    animation-delay: 4s;
    color: #9C27B0;
}

.vvoa-connection-node:nth-child(6) {
    bottom: 30%;
    right: 10%;
    animation-delay: 5s;
    color: #4CAF50;
}

.vvoa-connection-node:nth-child(7) {
    bottom: 10%;
    left: 30%;
    animation-delay: 6s;
    color: #FF9800;
}

.vvoa-connection-node:nth-child(8) {
    bottom: 10%;
    right: 30%;
    animation-delay: 7s;
    color: #2196F3;
}

.vvoa-involvement-impact-metrics {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 60px;
    z-index: 10;
}

.vvoa-impact-metric-display {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    padding: 20px 30px;
    border-radius: 25px;
    border: 2px solid rgba(233, 30, 99, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}

.vvoa-impact-metric-display:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.vvoa-impact-metric-number {
    font-size: 24px;
    font-weight: 800;
    color: #E91E63;
    display: block;
    margin-bottom: 5px;
}

.vvoa-impact-metric-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .vvoa-involvement-options-grid-container {
        gap: 60px;
    }

    .vvoa-community-connection-visualization {
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 1024px) {
    .vvoa-involvement-options-grid-container {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .vvoa-involvement-option-card {
        max-width: 500px;
    }

    .vvoa-community-connection-visualization {
        display: none;
    }

    .vvoa-involvement-impact-metrics {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 80px;
    }
}

@media (max-width: 768px) {
    .vvoa-get-involved-section-main-container {
        padding: 120px 0;
    }

    .vvoa-involvement-options-grid-container {
        padding: 0 4%;
        gap: 40px;
    }

    .vvoa-get-involved-main-heading {
        font-size: clamp(3rem, 10vw, 5rem);
    }

    .vvoa-involvement-motivation-description {
        font-size: 18px;
        padding: 0 20px;
    }

    .vvoa-involvement-option-card {
        padding: 50px 30px;
    }

    .vvoa-involvement-icon-constellation {
        width: 100px;
        height: 100px;
    }

    .vvoa-involvement-icon-constellation i {
        font-size: 40px;
    }

    .vvoa-floating-impact-elements {
        display: none;
    }

    .vvoa-involvement-impact-metrics {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .vvoa-involvement-option-card {
        padding: 40px 25px;
    }

    .vvoa-involvement-icon-constellation {
        width: 80px;
        height: 80px;
    }

    .vvoa-involvement-icon-constellation i {
        font-size: 32px;
    }

    .vvoa-involvement-option-title {
        font-size: 24px;
    }

    .vvoa-involvement-cta-button {
        padding: 16px 30px;
        font-size: 14px;
    }
}


.vvoa-sponsors-section-main-container {
    height: max-content;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, 
        #FAFAFA 0%, 
        #F8F9FA 25%, 
        #FFFFFF 50%, 
        #F5F5F5 75%, 
        #FAFAFA 100%);
    position: relative;
    overflow: hidden;
}

.vvoa-partnership-energy-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 40% 30% at 20% 20%, rgba(76, 175, 80, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 80% 20%, rgba(233, 30, 99, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 80%, rgba(25, 118, 210, 0.08) 0%, transparent 50%);
    animation: vvoa-partnership-harmony-flow 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vvoa-partnership-harmony-flow {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
        opacity: 0.7; 
    }
    33% { 
        transform: translateY(-10px) scale(1.05); 
        opacity: 0.9; 
    }
    66% { 
        transform: translateY(-5px) scale(1.02); 
        opacity: 0.8; 
    }
}

.vvoa-sponsors-heading-container {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.vvoa-sponsors-main-heading {
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1.1;
    position: relative;
    color: #E91E63;
    font-weight: 700;
    margin-bottom: 30px;
}

.vvoa-our-sponsors-text {
    background: linear-gradient(135deg, 
        #E91E63 0%, 
        #FF6B9D 20%, 
        #4CAF50 40%, 
        #66BB6A 60%, 
        #1976D2 80%, 
        #E91E63 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vvoa-sponsors-appreciation-flow 8s ease-in-out infinite;
    display: block;
    position: relative;
}

@keyframes vvoa-sponsors-appreciation-flow {
    0%, 100% { background-position: 0% 50%; }
    33% { background-position: 100% 0%; }
    66% { background-position: 100% 100%; }
}

.vvoa-sponsors-gratitude-underline {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        #E91E63 0%, 
        #4CAF50 25%, 
        #1976D2 50%, 
        #4CAF50 75%, 
        #E91E63 100%);
    background-size: 400% 100%;
    border-radius: 4px;
    animation: vvoa-gratitude-underline-expansion 3s ease-out 1s forwards,
               vvoa-gratitude-energy-pulse 6s ease-in-out infinite;
}

@keyframes vvoa-gratitude-underline-expansion {
    to { width: 200px; }
}

@keyframes vvoa-gratitude-energy-pulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vvoa-sponsors-showcase-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
}

.vvoa-sponsor-logos-constellation-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    position: relative;
    z-index: 3;
}

.vvoa-sponsor-logo-orbital-container {
    position: relative;
    width: 280px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border: 3px solid rgba(233, 30, 99, 0.15);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.vvoa-sponsor-logo-orbital-container::before {
    content: '';
    position: absolute;
    inset: -6px;
    background: conic-gradient(from 0deg, 
        rgba(233, 30, 99, 0.4) 0deg, 
        rgba(76, 175, 80, 0.4) 120deg, 
        rgba(25, 118, 210, 0.4) 240deg, 
        rgba(233, 30, 99, 0.4) 360deg);
    border-radius: 36px;
    z-index: -1;
    opacity: 0;
    animation: vvoa-sponsor-orbital-rotation 12s linear infinite;
    transition: opacity 0.8s ease;
}

@keyframes vvoa-sponsor-orbital-rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vvoa-sponsor-logo-orbital-container:hover::before {
    opacity: 1;
}

.vvoa-sponsor-logo-orbital-container:hover {
    transform: translateY(-15px) scale(1.05) rotate(2deg);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.2);
    border-color: rgba(233, 30, 99, 0.3);
}

.vvoa-sponsor-brand-logo-display {
    width: 140px;
    height: 80px;
    background: linear-gradient(135deg, #2D2D2D, #4A4A4A);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    border: 2px solid rgba(233, 30, 99, 0.2);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.vvoa-sponsor-brand-logo-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    transition: left 1s ease;
}

.vvoa-sponsor-logo-orbital-container:hover .vvoa-sponsor-brand-logo-display::before {
    left: 100%;
}

.vvoa-sponsor-logo-orbital-container:hover .vvoa-sponsor-brand-logo-display {
    transform: scale(1.1) rotate(-2deg);
    border-color: rgba(233, 30, 99, 0.5);
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.3);
}

.vvoa-cynful-sweets-logo {
    background: linear-gradient(135deg, #8E24AA, #AB47BC);
    color: white;
}

.vvoa-freson-bros-logo {
    background: linear-gradient(135deg, #D32F2F, #F44336);
    color: white;
}

.vvoa-sponsor-business-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    transition: all 0.4s ease;
}

.vvoa-sponsor-logo-orbital-container:hover .vvoa-sponsor-business-name {
    color: #E91E63;
    transform: scale(1.05);
    text-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);
}

.vvoa-partnership-connection-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    pointer-events: none;
    z-index: 1;
}

.vvoa-connection-energy-beam {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(233, 30, 99, 0.6) 50%, 
        transparent 100%);
    background-size: 200% 100%;
    animation: vvoa-energy-beam-flow 4s ease-in-out infinite;
    border-radius: 2px;
}

.vvoa-connection-energy-beam:nth-child(1) {
    top: 50%;
    left: 0;
    right: 0;
    animation-delay: 0s;
}

.vvoa-connection-energy-beam:nth-child(2) {
    top: 40%;
    left: 10%;
    right: 10%;
    animation-delay: 1s;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(76, 175, 80, 0.6) 50%, 
        transparent 100%);
    background-size: 200% 100%;
}

.vvoa-connection-energy-beam:nth-child(3) {
    top: 60%;
    left: 15%;
    right: 15%;
    animation-delay: 2s;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(25, 118, 210, 0.6) 50%, 
        transparent 100%);
    background-size: 200% 100%;
}

@keyframes vvoa-energy-beam-flow {
    0%, 100% { 
        background-position: 0% 50%; 
        opacity: 0.3; 
    }
    50% { 
        background-position: 100% 50%; 
        opacity: 1; 
    }
}

.vvoa-floating-gratitude-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.vvoa-gratitude-particle {
    position: absolute;
    font-size: 20px;
    animation: vvoa-gratitude-appreciation-float 12s ease-in-out infinite;
}

.vvoa-gratitude-particle:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
}

.vvoa-gratitude-particle:nth-child(2) {
    right: 15%;
    top: 30%;
    animation-delay: 3s;
}

.vvoa-gratitude-particle:nth-child(3) {
    left: 20%;
    bottom: 25%;
    animation-delay: 6s;
}

.vvoa-gratitude-particle:nth-child(4) {
    right: 25%;
    bottom: 35%;
    animation-delay: 9s;
}

@keyframes vvoa-gratitude-appreciation-float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1); 
        opacity: 0.6; 
    }
    25% { 
        transform: translateY(-20px) rotate(90deg) scale(1.2); 
        opacity: 0.8; 
    }
    50% { 
        transform: translateY(-10px) rotate(180deg) scale(1.1); 
        opacity: 1; 
    }
    75% { 
        transform: translateY(-15px) rotate(270deg) scale(1.3); 
        opacity: 0.9; 
    }
}