@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Korean:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --font-open-sans: 'Open Sans', sans-serif;
    --kimchi-color: #ff6b6b;
    --bloom-color: #4ecdc4;
    --navy-blue: #000080;
    --deep-blue: #000033;
}

.font-open-sans {
    font-family: 'Open Sans', sans-serif;
}

body {
    font-family: var(--font-open-sans);
}

.kimchibloom-logo-container {
    /* Add responsive design later */
    padding: 0.25rem 0.5rem; /* Add some padding for the background */
    border-radius: 0.5rem; /* Slightly rounded corners */
    animation: pulse 4s infinite alternate;
}

.kimchibloom-logo-container span {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5);
    transition: text-shadow 0.3s ease-in-out;
}

.kimchibloom-logo-container:hover span {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8);
}

.korean-text {
    font-family: 'Noto Serif Korean', serif;
}

/* fullPage.js specific styles */
.gradient-hero {
    background: linear-gradient(135deg, #fdf2f8 0%, #f0fdfa 100%);
}

.gradient-features {
    background: linear-gradient(135deg, #f0fdfa 0%, #fef3c7 100%);
}

.gradient-pricing {
    background: linear-gradient(135deg, #fef3c7 0%, #fae8ff 100%);
}

.gradient-faq {
    background: linear-gradient(135deg, #fae8ff 0%, #f0f9ff 100%);
}

.feature-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.faq-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.section-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-dot.active {
    background: var(--bloom-color);
    transform: scale(1.2);
}