.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-container{min-height:500px;}.elementor-2479 .elementor-element.elementor-element-b80635b:not(.elementor-motion-effects-element-type-background), .elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://maranathadelaware.org/wp-content/uploads/2025/06/DSC_7440-scaled-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, var( --e-global-color-sk_color_16 ) 100%);opacity:0.65;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2479 .elementor-element.elementor-element-b80635b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-sk_color_1 );}.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-shape-bottom svg{height:75px;}.elementor-bc-flex-widget .elementor-2479 .elementor-element.elementor-element-f4265f2.elementor-column .elementor-widget-wrap{align-items:space-between;}.elementor-2479 .elementor-element.elementor-element-f4265f2.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-between;align-items:space-between;}.elementor-2479 .elementor-element.elementor-element-f4265f2.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-2479 .elementor-element.elementor-element-d80b5b3{text-align:center;}.elementor-2479 .elementor-element.elementor-element-d80b5b3 .elementor-heading-title{font-size:65px;font-weight:900;line-height:1.2em;text-shadow:0px 5px 5px rgba(0,0,0,0.3);}.elementor-2479 .elementor-element.elementor-element-d80b5b3.elementor-widget-heading .elementor-heading-title, .elementor-2479 .elementor-element.elementor-element-d80b5b3.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:#FFFFFF;}.elementor-2479 .elementor-element.elementor-element-6344061{text-align:center;}.elementor-2479 .elementor-element.elementor-element-6344061 .elementor-heading-title{font-size:24px;font-weight:100;line-height:1.2em;text-shadow:0px 5px 5px rgba(0,0,0,0.3);}.elementor-2479 .elementor-element.elementor-element-6344061.elementor-widget-heading .elementor-heading-title, .elementor-2479 .elementor-element.elementor-element-6344061.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:#FFFFFF;}.elementor-2479 .elementor-element.elementor-element-7b7ad24 .elementor-button{fill:#FFFFFF;color:#FFFFFF;background-color:transparent;background-image:linear-gradient(145deg, var( --e-global-color-90d86cb ) 0%, var( --e-global-color-955ed07 ) 100%);border-style:none;border-radius:8px 8px 8px 8px;}.elementor-2479 .elementor-element.elementor-element-7b7ad24 .elementor-button:hover, .elementor-2479 .elementor-element.elementor-element-7b7ad24 .elementor-button:focus{background-color:var( --e-global-color-90d86cb );box-shadow:0px 0px 10px -58px rgba(0,0,0,0.5);}.elementor-2479 .elementor-element.elementor-element-7b7ad24 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-7b7ad24{width:auto;max-width:auto;}.elementor-2479 .elementor-element.elementor-element-5822350:not(.elementor-motion-effects-element-type-background), .elementor-2479 .elementor-element.elementor-element-5822350 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2479 .elementor-element.elementor-element-5822350{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2479 .elementor-element.elementor-element-5822350 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2479 .elementor-element.elementor-element-d4eedfd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;}.elementor-2479 .elementor-element.elementor-element-d4eedfd > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2479 .elementor-element.elementor-element-d4eedfd.elementor-section{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-96bf128 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-2479 .elementor-element.elementor-element-96bf128 > .elementor-element-populated.elementor-element-populated.elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-3b53d37 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-3b53d37{width:var( --container-widget-width, 118.482% );max-width:118.482%;--container-widget-width:118.482%;--container-widget-flex-grow:0;z-index:0;}.elementor-2479 .elementor-element.elementor-element-a8bb3ac{margin-top:-400px;margin-bottom:0px;}.elementor-2479 .elementor-element.elementor-element-a8bb3ac.elementor-section{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-eb46ccb.elementor-section{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-7720e25{text-align:center;font-family:"Montserrat", Sans-serif;font-size:32px;font-weight:400;text-transform:uppercase;color:var( --e-global-color-5b92981 );}.elementor-2479 .elementor-element.elementor-element-ff34975{text-align:center;}.elementor-2479 .elementor-element.elementor-element-ff34975 .elementor-heading-title{font-size:62px;}.elementor-2479 .elementor-element.elementor-element-ff34975.elementor-widget-heading .elementor-heading-title, .elementor-2479 .elementor-element.elementor-element-ff34975.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:var( --e-global-color-90d86cb );}.elementor-2479 .elementor-element.elementor-element-a0af900 .elementor-button{fill:#FFFFFF;color:#FFFFFF;background-color:transparent;background-image:linear-gradient(45deg, var( --e-global-color-90d86cb ) 0%, var( --e-global-color-955ed07 ) 100%);}.elementor-2479 .elementor-element.elementor-element-a0af900 .elementor-button:hover, .elementor-2479 .elementor-element.elementor-element-a0af900 .elementor-button:focus{color:#000000;}.elementor-2479 .elementor-element.elementor-element-a0af900 .elementor-button:hover svg, .elementor-2479 .elementor-element.elementor-element-a0af900 .elementor-button:focus svg{fill:#000000;}.elementor-2479 .elementor-element.elementor-element-57f21a4:not(.elementor-motion-effects-element-type-background), .elementor-2479 .elementor-element.elementor-element-57f21a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2479 .elementor-element.elementor-element-57f21a4{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2479 .elementor-element.elementor-element-57f21a4 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2479 .elementor-element.elementor-element-06f8b7d > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2479 .elementor-element.elementor-element-06f8b7d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}:root{--page-title-display:none;}body.elementor-page-2479{padding:0px 0px 0px 0px;}body.elementor-page-2479:not(.elementor-motion-effects-element-type-background), body.elementor-page-2479 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-2479 .elementor-element.elementor-element-96bf128{width:100%;}}@media(max-width:1024px){.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-container{min-height:400px;}.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-shape-bottom svg{height:50px;}}@media(max-width:767px){.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-container{min-height:200px;}.elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-shape-bottom svg{height:25px;}.elementor-2479 .elementor-element.elementor-element-d80b5b3 .elementor-heading-title{font-size:40px;}.elementor-2479 .elementor-element.elementor-element-6344061 .elementor-heading-title{font-size:15px;}.elementor-2479 .elementor-element.elementor-element-7b7ad24 .elementor-button{font-size:15px;}.elementor-2479 .elementor-element.elementor-element-a8bb3ac{margin-top:-316px;margin-bottom:0px;}.elementor-2479 .elementor-element.elementor-element-eb46ccb.elementor-section{padding:0px 0px 0px 0px;}.elementor-2479 .elementor-element.elementor-element-7720e25{font-size:20px;}.elementor-2479 .elementor-element.elementor-element-ff34975 .elementor-heading-title{font-size:38px;}.elementor-2479 .elementor-element.elementor-element-ff34975 > .elementor-widget-container{margin:-37px 0px 0px 0px;}}@media(min-width:1025px){.elementor-2479 .elementor-element.elementor-element-b80635b:not(.elementor-motion-effects-element-type-background), .elementor-2479 .elementor-element.elementor-element-b80635b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-3b53d37 */:root {
    --font-primary-cards: 'Poppins', sans-serif;
    --font-secondary-cards: 'Roboto Slab', serif;
    --color-primary-cards: #05aeb9;
    --color-secondary-cards: #2575fc;
    --card-bg-cards: #ffffff;
    --card-shadow-cards: rgba(0, 0, 0, 0.1);
    --card-shadow-hover-cards: rgba(0, 0, 0, 0.2);
    --text-light-cards: #f8f9fa;
    --text-dark-cards: #343a40;
    --text-muted-cards: #6c757d;
    --section-bg-cards: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
    --border-radius-card-cards: 16px;
    --border-radius-button-cards: 8px;
}

body {
    margin: 0;
}

.section-title-cards {
    font-family: var(--font-secondary-cards, 'Roboto Slab', serif);
    font-size: 2.8em;
    font-weight: 700;
    color: var(--color-primary-cards);
    text-align: center;
    margin-bottom: 40px;
    margin-top: 0;
}

.cta-cards-section-wrapper {
    background: var(--section-bg-cards);
    padding: 60px 20px;
    font-family: var(--font-primary-cards);
    color: var(--text-dark-cards);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

.card-carousel-viewport {
    width: 100%;
    max-width: 900px; 
    margin: 0 auto;
    overflow: hidden; /* This clips the cta-cards-container as it slides */
    position: relative; 
    perspective: 1500px; /* For 3D transforms */
    -webkit-perspective: 1500px; /* For Safari */
    -webkit-user-select: none; /* Disable text selection for smoother dragging */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cta-cards-container {
    display: flex;
    position: relative; 
    transition: transform 1.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth snap transition */
    transform-style: preserve-3d; /* Enable 3D transforms for children */
    -webkit-transform-style: preserve-3d; /* For Safari */
}

.cta-card {
    background-color: var(--card-bg-cards);
    border-radius: var(--border-radius-card-cards);
    box-shadow: 0 8px 20px var(--card-shadow-cards);
    width: 320px; 
    flex: 0 0 320px; /* Prevent cards from shrinking */
    margin: 0 15px; /* Spacing between cards */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d;
    font-family: var(--font-primary-cards);
    /* Transition for individual card properties controlled by JS updates */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.5s ease,
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary-cards), var(--color-secondary-cards));
    transition: width 0.4s ease-out;
    z-index: 2;
}

.cta-card:hover {
    box-shadow: 0 15px 35px var(--card-shadow-hover-cards), 0 5px 15px rgba(0,0,0,0.1);
}
.cta-card:hover::before {
    width: 100%;
}

.card-image-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}
.card-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-primary-cards);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.cta-card:hover .card-image-wrapper::after {
    opacity: 0.1;
}

.cta-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cta-card:hover img {
    transform: scale(1.1);
}

.card-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    z-index: 1;
    color: var(--text-dark-cards); 
}

.card-content h3 {
    font-family: var(--font-secondary-cards);
    font-size: 1.6em;
    font-weight: 700;
    color: var(--color-primary-cards);
    margin-top: 0;
    margin-bottom: 12px;
}

.card-content p {
    font-size: 0.95em;
    color: var(--text-muted-cards);
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, var(--color-primary-cards), var(--color-secondary-cards));
    color: var(--text-light-cards);
    padding: 14px 30px;
    text-decoration: none;
    border-radius: var(--border-radius-button-cards);
    font-weight: 600;
    font-size: 1em;
    font-family: var(--font-primary-cards); 
    border: none;
    cursor: pointer;
    margin-top: auto; /* Pushes button to the bottom if content varies */
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 4px 10px rgba(45, 55, 227, 0.3);
}

.cta-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
    transition: transform 0.5s ease;
    opacity: 0;
}
.cta-button:hover::after {
    transform: translate(25%, 25%) rotate(45deg);
    opacity: 1;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.cta-button:hover,
.cta-button:focus {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 7px 15px rgba(45, 55, 227, 0.4);
    outline: none;
}
.cta-button:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 8px rgba(45, 55, 227, 0.35);
}

/* ARROW STYLES */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary-cards);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.carousel-arrow:hover:not(.disabled) {
    background-color: var(--color-primary-cards);
    color: var(--text-light-cards);
}
.carousel-arrow:focus {
    outline: 2px solid var(--color-secondary-cards);
    outline-offset: 2px;
}
.prev-arrow {
    left: 10px;  /* Positioned inside the viewport */
}
.next-arrow {
    right: 10px; /* Positioned inside the viewport */
}
.carousel-arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none; /* Disable interaction */
}

/* Responsive Adjustments */
@media (max-width: 960px) {
    .card-carousel-viewport {
        max-width: 600px;
    }
    .cta-card {
        width: 280px;
        flex-basis: 280px;
        margin: 0 10px;
    }
}

@media (max-width: 768px) {
    .section-title-cards {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .card-carousel-viewport {
        perspective: none; /* Disable 3D perspective on smaller screens */
        -webkit-perspective: none;
        max-width: 100%; 
        padding: 0 20px; /* Add padding to viewport for spacing around cards/arrows */
    }
    /* Arrows are positioned relative to this padded viewport */
    .prev-arrow { 
        left: 5px; /* Closer to edge because of viewport padding */
    }
    .next-arrow { 
        right: 5px; /* Closer to edge because of viewport padding */
    }
    .cta-card {
        width: 250px;
        flex-basis: 250px;
        margin: 0 8px;
    }
    .card-content h3 { font-size: 1.4em; }
    .card-content p { font-size: 0.9em; }
}
@media (max-width: 600px) {
    .cta-cards-section-wrapper { padding-top: 30px; padding-bottom: 30px; }
    .cta-card {
        width: 80vw; /* Take 80% of viewport width */
        flex-basis: 80vw;
        max-width: 300px; /* But not wider than 300px */
    }
    .card-image-wrapper {
        height: 180px; 
    }
    .prev-arrow,
    .next-arrow {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}
@media (max-width: 480px) {
    .section-title-cards {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2e3c72f */:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto Slab', serif;
    --color-primary: #6a11cb;
    --color-secondary: #2575fc;
    --text-light: #f8f9fa;
    --text-dark: #343a40;
    --text-muted: #6c757d;
    
    --bg-page: #eef2f7; 
    --card-bg-light: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-shadow-hover: rgba(0, 0, 0, 0.15);

    --border-radius-medium: 12px;
    --border-radius-large: 20px;
}

body {
    margin: 0; 
    font-family: var(--font-primary);
    background-color: var(--bg-page); 
}

/* --- Water Baptism Section --- */
.water-baptism-section {
    position: relative; 
    min-height: 700px; /* Kept it tall, adjust if needed */
    height: 80vh; /* Example: 80% of viewport height */
    max-height: 750px; /* Max height if vh is too much */
    display: flex; /* For centering content */
    align-items: center;
    justify-content: center; 
    text-align: center;
    overflow: hidden; 
    color: var(--text-light); 
    background-color: #333; /* Fallback */
    /* No border-radius if it's full width */
}

.water-baptism-video-bg {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}

.water-baptism-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 2;
}

.water-baptism-content {
    position: relative;
    z-index: 3; 
    padding: 20px;
}

.water-baptism-title {
    font-family: var(--font-secondary);
    font-size: 3em; 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    color: #fff; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.water-baptism-subtitle {
    font-size: 1.25em; 
    font-weight: 400;
    margin-bottom: 35px; 
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9); 
}

.water-baptism-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;  
    height: 70px; 
    background-color: #fff; 
    color: var(--color-primary); 
    border-radius: 50%; 
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.water-baptism-cta .arrow-icon { width: 32px; height: 32px; stroke-width: 2.5; }
.water-baptism-cta:hover, .water-baptism-cta:focus { transform: scale(1.1) translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background-color: #f0f0f0; outline: none; }


/* Responsive adjustments */
@media (max-width: 768px) { /* Tablet and smaller */
     .water-baptism-section {
        min-height: 50vh; /* Adjust baptism height for tablet */
        height: auto;
        max-height: 550px;
    }
    .water-baptism-title { font-size: 2.4em; }
    .water-baptism-subtitle { font-size: 1.15em; }
}
@media (max-width: 480px) { /* Mobile */
     .water-baptism-section {
        min-height: 45vh;
        max-height: 450px;
    }
    .water-baptism-title { font-size: 2em; }
    .water-baptism-subtitle { font-size: 1.05em; }
    .water-baptism-cta { width: 60px; height: 60px; }
    .water-baptism-cta .arrow-icon { width: 28px; height: 28px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5d63f8a *//* :root variables */
:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto Slab', serif;
    --color-primary: #05aeb9;
    --color-secondary: #2575fc;
    --text-light: #f8f9fa; /* This is already very close to white */
    --text-dark: #343a40;
    --text-muted: #6c757d;
    
    --bg-page: #eef2f7; /* This is the light grey that was previously used for the section */
    --card-bg-light: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-shadow-hover: rgba(0, 0, 0, 0.15);

    --border-radius-medium: 12px;
    --border-radius-large: 20px;
}

body {
    margin: 0; 
    font-family: var(--font-primary);
    background-color: var(--bg-page); /* Body still uses the light grey for overall page background */
}

/* --- Upcoming Event Section --- */
.upcoming-event-section-container {
    padding: 50px 20px;
    background-color: #ffffff; /* CHANGED: Now explicitly white */
}

.event-card-wrapper {
    max-width: 850px; 
    margin: 0 auto;
}

.event-card-supertitle { 
    text-align: center; 
    font-size: 1.1em; 
    font-weight: 500; 
    color: var(--color-primary); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 10px; 
}
.event-card-maintitle { 
    font-family: var(--font-secondary); 
    text-align: center; 
    font-size: 2.2em; 
    font-weight: 700; 
    color: var(--text-dark); 
    margin-top: 0; 
    margin-bottom: 20px; /* Adjusted for new button */
}

.view-all-events-button {
    display: block;
    width: -moz-fit-content; /* Firefox */
    width: fit-content;     /* Standard */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px; /* Space before the event card */
    padding: 10px 25px;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary)); /* Slightly different gradient or solid */
    color: var(--text-light);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95em;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.view-all-events-button:hover, .view-all-events-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    outline: none;
}


.event-card {
    background-color: var(--card-bg-light); 
    border-radius: var(--border-radius-large); 
    box-shadow: 0 10px 30px var(--card-shadow); 
    display: flex;
    flex-direction: row;
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%; 
    height: 310px; /* Fixed height for the card */
}
.event-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px var(--card-shadow-hover); }

.event-image-container {
    flex: 0 0 60%; /* Image container takes 60% of card width. */
    position: relative; 
    height: 100%; 
}

.event-image-container img {
    display: block; 
    width: 100%;    
    height: 100%;   
    object-fit: cover; 
}

.event-details-content {
    flex: 0 0 40%; /* Details take the remaining 40%. */
    padding: 25px 30px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    height: 100%; 
    overflow: hidden; 
}
.event-date-badge { 
    align-self: flex-start; 
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary)); 
    color: var(--text-light); padding: 8px 15px; 
    border-radius: var(--border-radius-medium); 
    font-weight: 600; font-size: 0.9em; 
    margin-bottom: 12px; 
    display: inline-flex; align-items: baseline; gap: 4px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}
.event-date-badge .month { text-transform: uppercase; font-weight: 700; font-size: 0.9em; }
.event-date-badge .day { font-size: 1.4em; font-weight: 700; line-height: 1; }

.event-title { 
    font-family: var(--font-secondary); 
    font-size: 1.6em; 
    font-weight: 700; color: var(--text-dark); 
    margin-top: 0; margin-bottom: 10px; 
    line-height: 1.2; 
}
.event-time-location { 
    font-size: 0.95em; 
    color: var(--text-muted); 
    margin-bottom: 12px; 
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; 
}
.event-time-location svg { width: 16px; height: 16px; fill: var(--text-muted); flex-shrink: 0; }

.event-description { 
    font-size: 0.95em; 
    color: var(--text-dark); 
    line-height: 1.6; 
    margin-bottom: 15px; 
    flex-grow: 1; 
    overflow-y: auto; /* Allows scrolling if description is too long */
    min-height: 50px; 
}
.event-cta-button { 
    display: inline-block; 
    align-self: flex-start; /* Keeps button aligned to the left */
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary)); 
    color: white !important; /* This ensures the text is WHITE */
    padding: 10px 22px; 
    text-decoration: none; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 0.95em; 
    border: none; cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    margin-top: auto; /* Pushes button to the bottom if content varies */
}
.event-cta-button:hover, .event-cta-button:focus { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); outline: none; }

/* Responsive adjustments */
@media (max-width: 768px) { 
    .event-card {
        flex-direction: column; /* Stack image and content vertically */
        height: auto; /* Allow height to adjust */
        min-height: auto; 
    }
    .event-image-container {
        flex-basis: auto; /* Reset flex basis */
        width: 100%; 
        height: 250px; /* Fixed height for mobile image */
    }
    .event-details-content {
        flex-basis: auto; 
        width: 100%;
        height: auto; 
        padding: 25px;
        justify-content: flex-start;
    }
    .event-title { font-size: 1.6em; } 
    .event-description { font-size: 1em; overflow-y: visible; } /* Allow description to fully show */
    .event-cta-button { margin-top: 15px; font-size: 1em; padding: 12px 28px;} 
}
@media (max-width: 480px) { 
    .upcoming-event-section-container { padding: 40px 15px; }
    .event-card-maintitle { font-size: 1.8em; margin-bottom: 15px;} /* Adjusted for mobile */
    .view-all-events-button { font-size: 0.9em; padding: 8px 20px; margin-bottom: 25px;}
    .event-title { font-size: 1.5em; } 
    .event-details-content { padding: 20px; } 
    .event-image-container {
        height: 200px; /* Smaller image height for very small screens */
    }
}/* End custom CSS */