/* Reset & Base Styles */
:root {
    --primary-color: #264653;
    /* Deep Blue-Green (Stronger) */
    --secondary-color: #E76F51;
    /* Burnt Sienna/Coral - VIBRANT ACCENT */
    --accent-color: #E9C46A;
    /* Warm Sand/Gold - Secondary Accent */
    --text-color: #333333;
    --light-text: #555555;
    --bg-color: #FDFDFD;

    /* Alternating Section Backgrounds */
    --bg-section-1: #FFFFFF;
    --bg-section-2: #F7F9F9;
    /* Very light cool grey/blue */
    --bg-section-3: #FFF8F0;
    /* Very light warm beige */

    --font-main: 'Noto Sans KR', sans-serif;
    --font-serif: 'Nanum Myeongjo', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.5;
    /* Slightly tighter line height */
    word-break: keep-all;
}

/* ... (container, a, ul styles remain similar) ... */

.container {
    max-width: 1100px;
    /* Slightly tighter width */
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Header - EMPHASIS */
.header {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 15px 0;
    /* Compact padding */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.header .logo {
    font-size: 1.5rem;
    /* Larger than before (1.2rem) */
    color: var(--primary-color);
    font-weight: 500;
    letter-spacing: -0.5px;
}

.header .logo strong {
    font-weight: 800;
    font-size: 1.7rem;
    /* Significantly highlighted */
    color: var(--primary-color);
}

/* Hero Section */
.hero {
    min-height: 85vh;
    /* Changed to min-height for content flexibility */
    /* Beautiful Eden-like Nature Background */
    background: linear-gradient(rgba(0, 40, 20, 0.3), rgba(0, 40, 20, 0.4)), url('images/main_banner_bg_new.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    position: relative;
    padding-top: 100px;
    /* Increased top padding for header space */
    padding-bottom: 60px;
}

.hero-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-left {
    flex: 1;
    text-align: left;
    /* Align text to left */
    padding-left: 20px;
}

.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    /* Center the card */
    padding-right: 20px;
}

.hero-content {
    animation: fadeInUp 1.2s ease-out;
}

.hero-verse {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    color: #FFD700;
    font-weight: 700;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.hero-title {
    font-family: var(--font-serif);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000, 0px 0px 30px rgba(0, 0, 0, 0.8);
}

/* Hero Links Box (New Content) */
/* Hero Links Box (New Content) */
.hero-links-box {
    background: rgba(0, 0, 0, 0.1);
    /* More transparent background */
    backdrop-filter: blur(3px);
    /* Reduced blur */
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    animation: fadeInRight 1.2s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-links-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--accent-color);
    /* Gold color for title */
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-links-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-links-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.hero-links-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hero-links-list a {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #ffffff;
    /* White text for contrast */
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-links-list a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.icon-wrapper {
    width: 40px;
    text-align: center;
    margin-right: 15px;
    font-size: 1.4rem;
    color: var(--accent-color);
    /* Gold icons */
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scroll Down Indicator */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    opacity: 0.9;
    animation: bounce 2s infinite;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    width: 100%;
    text-align: center;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column;
        gap: 30px;
        padding-top: 40px;
    }

    .hero-left {
        text-align: center;
        padding: 0;
    }

    .hero-right {
        padding: 0;
        width: 100%;
    }

    .hero-title {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-links-title {
        font-size: 1.8rem;
    }
}

/* COMPACT SECTIONS & VIBRANT STYLES */
.section {
    padding: 60px 0;
    /* Half of previous 100px */
}

/* Invitation - Clean White */
.invitation-section {
    background-color: var(--bg-section-1);
    text-align: left;
    /* Changed from center to left */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232f4f4f' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sub-title {
    font-family: var(--font-serif);
    color: var(--secondary-color);
    /* Vibrant Coral */
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: block;
    font-weight: 700;
}

.section-title {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 40px;
    /* Reduced from 60px */
    font-weight: 800;
    letter-spacing: -1px;
}

.text-center {
    text-align: center;
}

.invitation-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    /* Slightly smaller for compactness */
    color: var(--light-text);
    line-height: 1.8;
}

.invitation-content p {
    margin-bottom: 25px;
    /* Reduced margin */
}

.bible-quote {
    font-family: var(--font-serif);
    color: var(--primary-color);
    font-weight: 700;
    font-style: italic;
    font-size: 1.2rem;
    margin-top: 30px;
    border-top: 2px solid var(--accent-color);
    display: inline-block;
    padding-top: 20px;
}

/* Ministries - Warm & Vibrant */
.ministries-section {
    background-color: var(--bg-section-3);
    /* Warm Beige */
}

.ministries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    /* Tighter gap */
}

.ministry-card {
    background: var(--white);
    padding: 25px 20px;
    /* Reduced padding */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Clean border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.ministry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(231, 111, 81, 0.15);
    /* Orange glow */
    border-top-color: var(--secondary-color);
}

.ministry-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-family: var(--font-serif);
}

.ministry-card h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--secondary-color);
    /* Underline accent */
    margin-top: 5px;
}

.ministry-card p {
    color: var(--light-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* NEW: Combined Features Layout (Ministries + Promises) */
.combined-features-wrapper {
    padding: 60px 0;
    background-color: var(--bg-section-3);
    /* Warm Beige */
}

.split-layout {
    display: flex;
    gap: 40px;
}

.feature-column {
    flex: 1;
    background: transparent;
    padding: 0;
    /* Ensure content fills height */
    display: flex;
    flex-direction: column;
}

/* Specific styles for side-by-side components */
.feature-column .section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
}

/* Compact Ministries Grid */
.ministries-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    /* Make the grid fill the remaining height if needed, 
       though grid items naturally fill space. 
       To force visual height match with Promises, 
       we might need to stretch items or just rely on the container. */
    flex-grow: 1;
}

/* ... */

/* Compact Promises List */
/* ... */

.promises-list-wrapper-compact {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    /* Fill column height */
    flex-grow: 1;
    /* Stretch to fill column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically if list is short */
}

.ministries-grid-compact .ministry-card {
    padding: 20px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ministries-grid-compact h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.ministries-grid-compact p {
    font-size: 0.9rem;
}

/* Compact Promises List */
.promises-column .section-title {
    color: var(--primary-color);
}

.promises-intro-compact {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--light-text);
}

.promises-list-wrapper-compact {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    /* Fill column height */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.promises-list-wrapper-compact .promises-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute items evenly */
}

.promises-list-wrapper-compact .promises-list li {
    padding: 10px 0;
    font-size: 0.95rem;
    padding-left: 25px;
}

.promises-list-wrapper-compact .promises-list li::before {
    top: 10px;
    font-size: 0.8rem;
}

/* Promises Section */
.promises-section {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 60px 0;
    /* Compact */
}

.promises-section .section-title {
    color: #ffffff;
    margin-bottom: 30px;
}

.promises-intro {
    background: rgba(255, 255, 255, 0.05);
    /* Lighter touch */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.intro-text {
    opacity: 0.95;
    font-size: 1rem;
    line-height: 1.6;
}

.promises-list-wrapper {
    background: #ffffff;
    color: var(--text-color);
    padding: 30px;
    /* Reduced */
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.promises-list li {
    padding: 12px 0;
    /* Reduced */
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.05rem;
    position: relative;
    padding-left: 28px;
    font-weight: 500;
}

.promises-list li:last-child {
    border-bottom: none;
}

.promises-list li::before {
    content: "♥";
    /* Heart or check */
    color: var(--secondary-color);
    /* Coral accent */
    position: absolute;
    left: 0;
    top: 12px;
    font-weight: bold;
}

/* Info Section */
.info-section {
    background-color: var(--bg-section-2);
    /* Light cool grey */
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.info-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.info-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--accent-color);
    /* Gold accent */
    font-family: var(--font-serif);
    color: var(--primary-color);
    font-weight: 800;
}

.service-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0;
}

.service-row:last-child {
    border-bottom: none;
}

.service-name {
    font-weight: 700;
    color: var(--primary-color);
}

.service-time {
    color: var(--secondary-color);
    /* Accent color for time */
    font-weight: 600;
    font-family: var(--font-main);
}

.pastor-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-history li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.profile-history li::before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

/* Footer */
footer {
    background-color: #1a2a30;
    /* Darker navy */
    color: #bbb;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.footer-logo strong {
    font-weight: 800;
    color: var(--accent-color);
    /* Gold Highlight in Footer */
    font-size: 1.5rem;
}

.map-container {
    width: 100%;
    max-width: 500px;
    /* Increased to 500px per feedback */
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

.footer-info p {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.contact-item {
    margin: 0 10px;
}

.copyright {
    margin-top: 30px;
    font-size: 0.8rem;
    opacity: 0.6;
    border-top: 1px solid #333;
    padding-top: 20px;
    width: 100%;
}

/* Responsive for Grid */
@media (max-width: 768px) {
    .grid-2-cols {
        grid-template-columns: 1fr;
    }

    .contact-item {
        display: block;
        margin: 5px 0;
    }
}

/* Responsive Split Layout for Ministries & Promises */
@media (max-width: 900px) {
    .split-layout {
        flex-direction: column;
        gap: 60px;
        /* More space between the two major sections on mobile */
    }

    .ministries-grid-compact {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        /* ensure cards are wide enough */
    }

    .promises-list-wrapper-compact {
        text-align: left;
        align-items: flex-start;
        /* Ensure flex items start from left */
    }
}

/* Twinkle/Blink Animation for Emphasis */
@keyframes twinkling {
    0% {
        opacity: 1;
        color: var(--primary-color);
    }

    50% {
        opacity: 0.3;
        color: var(--secondary-color);
        text-shadow: 0 0 5px var(--secondary-color);
    }

    100% {
        opacity: 1;
        color: var(--primary-color);
    }
}

.twinkle-text {
    animation: twinkling 1s infinite ease-in-out;
    /* Faster 1s duration */
    display: inline-block;
    cursor: pointer;
}

.twinkle-text:hover {
    color: var(--secondary-color);
}

.blink-animation {
    animation: twinkling 1s infinite ease-in-out;
}

@keyframes twinkling-white {
    0% {
        opacity: 1;
        color: #ffffff;
    }

    50% {
        opacity: 0.5;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    100% {
        opacity: 1;
        color: #ffffff;
    }
}

.hero-links-list .twinkle-text {
    animation: twinkling-white 1.5s infinite ease-in-out;
    color: #ffffff;
}