/* Global styles */
body {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Hero section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.highlight-title {
    color: #ffdd57;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: titlePulse 2s infinite alternate, titleGlow 3s infinite;
}

@keyframes titlePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 204, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.5); }
    100% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
}

/* Principles section */
.principles {
    background-color: #f5f5f5;
}

/* Benefits section */
.benefits {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
}

.benefits .title {
    color: white;
}

.principles-image img {
    border-radius: 10px;
}

.community-image-text {
    color: white;
    margin-bottom: 15px;
}

.benefit-image-circle {
    margin: 0 auto;
    border: 5px solid #3273dc;
}

/* Floating button */
.floating-band-btn {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    transition: all 0.3s ease;
}

.floating-band-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Bottom image link */
.bottom-image-link {
    background-color: #f5f5f5;
}

.bottom-image-link img {
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.bottom-image-link img:hover {
    transform: translateY(-5px);
}

/* Page navigation */
.page-navigation {
    background-color: #f5f5f5;
}

/* Principe item animation */
.principle-item {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.principles-image:hover ~ .principles-content .principle-item:nth-child(1) {
    transform: translateY(-10px);
    transition-delay: 0s;
}

.principles-image:hover ~ .principles-content .principle-item:nth-child(2) {
    transform: translateY(-10px);
    transition-delay: 0.1s;
}

.principles-image:hover ~ .principles-content .principle-item:nth-child(3) {
    transform: translateY(-10px);
    transition-delay: 0.2s;
}

.principles-image:hover ~ .principles-content .principle-item:nth-child(4) {
    transform: translateY(-10px);
    transition-delay: 0.3s;
}