/* ====================================
   Cover Video Styles
==================================== */
#cover-video {
    width: 100%; /* Full width */
    height: 100vh; /* Full screen height */
    object-fit: cover; /* Cover the container */
    position: relative; /* Position relative */
    z-index: -2; /* Place behind overlay */
    transition: 0.3s ease, filter 0.3s ease; /* Smooth transitions */
    overflow: hidden; /* Ensure no overflow */
}

#video-overlay {
    position: fixed; /* Fixed position */
    top: 0; /* Start at top */
    left: 0; /* Start at left */
    width: 100%; /* Full width */
    height: 100vh; /* Full screen height */
    background: rgba(96, 175, 255, 0); /* Transparent background */
    z-index: -1; /* Place above video */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

/* ====================================
   Welcome Section Styles
==================================== */
.welcome-content {
    display: flex; /* Flexbox for layout */
    align-items: stretch; /* Stretch items to fill container */
    justify-content: space-between; /* Space between items */
    width: 100%; /* Full width */
    height: 90vh; /* Flexible height based on viewport */
    max-width: 1400px; /* Increased max-width */
    margin: 0 auto 20px; /* Center horizontally with bottom margin */
    padding: 20px; /* Padding for spacing */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background-color: #f9f9f9; /* Background color */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure no overflow */
    text-shadow: none; /* Remove text shadow */
}

.left-content {
    flex: 1; /* Take up equal space */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Column direction */
    justify-content: center; /* Center content vertically */
    padding-right: 20px; /* Right padding */
    box-sizing: border-box; /* Include padding in width/height */
    overflow: hidden; /* Ensure no overflow */
}

.right-image {
    flex: 1; /* Take up equal space */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    background-image: url("https://cdn.luisicanales.com/cdshouston/media/images/welcome-images/inicio_bienvenida.webp"); /* Background image */
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */
    border-radius: 10px; /* Rounded corners */
    transition: transform 0.3s ease; /* Smooth transition for transform */
    width: 100%; /* Ensure full width */
    height: 100%; /* Ensure full height */
    background-color: #f9f9f9; /* Fallback background color */
}

.right-image img {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Cover the container */
    border-radius: 10px; /* Rounded corners */
    transition: transform 0.3s ease; /* Smooth transition for transform */
}

/* Stylized Welcome Message */
.welcome-message {
    position: relative; /* Position relative */
    font-size: clamp(0.8rem, 2vw, 1.2rem); /* Responsive font size */
    line-height: 1.4; /* Line height */
    margin-bottom: 10px; /* Space below message */
    padding: 15px; /* Padding around message */
    background-color: #F5F1ED; /* Background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #000000; /* Light text color */
    text-align: left; /* Left-align text */
}

.welcome-message .quote-author {
    display: block; /* Block display */
    margin-top: 5px; /* Space above author */
    text-align: right; /* Right-align text */
    font-style: bold; /* Bold font style */
    font-size: clamp(0.6rem, 1.5vw, 0.8rem); /* Responsive font size */
}

.quote-author {
    display: block; /* Block display */
    margin-top: 5px; /* Space above author */
    text-align: right; /* Right-align text */
    font-style: italic; /* Italic font style */
    color: #495867; /* Dark text color */
}

.pastor-title {
    display: block; /* Block display */
    font-style: italic; /* Italic font style */
    font-weight: lighter; /* Lighter font weight */
    color: #495867; /* Gray text color */
    font-size: clamp(0.6rem, 1.5vw, 0.8rem); /* Responsive font size */
}

/* Scripture Container Styles */
.scripture-container {
    margin-top: 15px; /* Space above container */
    padding: 15px; /* Padding around container */
    background-color: #F5F1ED; /* Background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 100%; /* Full width */
    overflow: hidden; /* Ensure no overflow */
}

.scripture-text {
    font-size: clamp(0.8rem, 2vw, 1rem); /* Responsive font size */
    color: #000000; /* Medium text color */
    text-align: justify; /* Justify text alignment */
}

.scripture-location {
    display: block; /* Block display */
    margin-top: 5px; /* Space above location */
    text-align: right; /* Right-align text */
    font-style: italic; /* Italic font style */
    color: #495867; /* Light text color */
    font-size: clamp(0.6rem, 1.5vw, 0.8rem); /* Responsive font size */
}

/* Leer Más Button Styles */
.leer-mas-btn {
    align-self: flex-end; /* Align to the end */
    margin-top: 15px; /* Space above button */
    padding: 8px 12px; /* Padding around button */
    font-size: clamp(0.8rem, 2vw, 1rem); /* Responsive font size */
    color: #fff; /* White text color */
    background-color: #495867; /* Background color */
    border: none; /* No border */
    border-radius: 10px; /* Rounded corners */
    text-decoration: none; /* No text decoration */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    text-align: center; /* Center text alignment */
}

.leer-mas-btn:hover {
    background-color: #fe5f55; /* Darker background on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

/* ====================================
   Address Section Styles
==================================== */
#direccion {
    position: relative; /* Position relative */
    padding: 50px 20px; /* Padding around section */
    background: linear-gradient(to bottom, #60AFFF, #778DA9); /* Gradient background */
    background-size: cover; /* Cover the container */
    height: 100vh; /* Full screen height */
    display: flex; /* Flexbox for layout */
}

.address-content {
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between items */
    max-width: 1600px; /* Maximum width */
    margin: 0 auto; /* Center horizontally */
    padding: 60px; /* Padding around content */
    overflow: hidden; /* Ensure no overflow */
    background: linear-gradient(to top, #ffffff20, #00000020); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
}

.address-content .left-content,
.address-content .right-content {
    flex: 1; /* Take up equal space */
    padding: 20px; /* Padding around content */
    text-align: center; /* Center text alignment */
    overflow-y: auto; /* Scrollable content */
}

.address-content .address-text {
    font-size: 1.4rem; /* Medium font size */
}

.address-content .church-description {
    margin-top: 3px; /* Space above description */
    font-size: 1rem; /* Small font size */
    color: #FFFFFF; /* White text color */
}

.address-content .address-link {
    color:#B2DBBF; /* Link color */
    font-weight: 700; /* Bold font weight */
    text-decoration: none; /* No text decoration */
    transition: color 0.3s ease; /* Smooth transition for color */
}

.address-content .address-link:hover {
    color:#FE5F55; /* Hover color */
    text-decoration: none; /* No text decoration */
}

.address-content .right-content iframe {
    border-radius: 10px; /* Rounded corners */
    width: 100%; /* Full width */
    height: 60vh; /* Full height */
    display: block; /* Ensure iframe is block-level */
}

.contact-btn {
    margin-top: 15px; /* Space above button */
    padding: 10px 20px; /* Padding around button */
    font-size: 1rem; /* Medium font size */
    color: #fff; /* White text color */
    background-color: #495867; /* Background color */
    border: none; /* No border */
    border-radius: 10px; /* Rounded corners */
    text-decoration: none; /* No text decoration */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    text-align: center; /* Center text alignment */
    display: inline-block; /* Inline-block display */
    cursor: pointer; /* Pointer cursor */
}

.contact-btn:hover {
    background-color: #fe5f55; /* Darker background on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

/* ====================================
   Hours Section Styles
==================================== */
.hours-outer {
    background: linear-gradient(to bottom, #AFD7FF, #60AFFF); /* Gradient background */
    padding: 50px 20px; /* Padding around section */
    min-height: 100vh; /* Ensure section takes full screen height */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

.hours-background {
    color: #fff; /* White text color */
    padding: 50px 20px; /* Padding around section */
    text-align: center; /* Center text alignment */
    max-width: 1400px; /* Maximum width */
    width: 100%; /* Full width */
    margin: 0 auto; /* Center horizontally */
    line-height: 1.2; /* Line height */
    background: linear-gradient(to top, #ffffff20, #00000020); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
}

.hours-item-container {
    display: flex; /* Flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Space between items */
}

.hours-item {
    position: relative; /* Position relative */
    width: calc(33.33% - 20px); /* Width calculation for three items per row */
    max-width: 400px; /* Maximum width */
    height: 400px; /* Fixed height */
    overflow: hidden; /* Ensure no overflow */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Smooth transitions */
    color: #fff; /* White text color */
}

.hours-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire item */
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* Smooth transition */
    z-index: 0;
}

.hours-item.wednesday::before {
    background-image: url('../media/images/inicio-images/servicios-images/miercoles_servicio.webp');
}

.hours-item.friday::before {
    background-image: url('../media/images/inicio-images/servicios-images/viernes_servicio.webp');
}

.hours-item.sunday::before {
    background-image: url('../media/images/inicio-images/servicios-images/domingo_servicio.webp');
}

.hours-overlay {
    position: absolute; /* Ensure the overlay covers the item */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #60AFFF, #ff8652bd); /* Semi-transparent background */
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    z-index: 1;
}

.hours-overlay::before {
    content: attr(data-day); /* Display the day and service name */
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.service-time {
    display: block;
    font-size: 1.2rem;
    color: #FFFFFF;
}

.hours-item:hover .service-time {
    display: none; /* Hide the service time on hover */
}

.hours-item:hover .service-description {
    display: block; /* Show the service description on hover */
}

.hours-item:hover .hours-overlay::before {
    content: attr(data-day); /* Keep the day only */
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.hours-item:hover .hours-overlay {
    background-color: #ff8652bd; /* Change background color on hover */
    transition: background 0.6s ease; /* Smooth transition for background color */
}

.hours-item:hover::before {
    transform: scale(1.2); /* Scale the background image on hover */
}

.hours-overlay p.service-description {
    font-size: 0.9rem; /* Slightly smaller font size for description */
    opacity: 1; /* Initially visible */
}

/* ====================================
   Gallery Section Styles
==================================== */
#galeria {
    background: linear-gradient(to bottom, #778DA9, #8F95D3); /* Gradient background */
    min-height: 100vh; /* Ensure the section takes full screen height */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

.gallery-content {
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    max-width: 1500px; /* Maximum width */
    margin: 0 auto; /* Center horizontally */
    padding: 20px; /* Padding for spacing */
    width: 100%; /* Full width */
    background: linear-gradient(to top, #ffffff20, #00000020); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
}

.gallery-wrapper {
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between items */
    width: 100%; /* Full width */
}

.left-content {
    flex: 1; /* Take up equal space */
    color: #FFFFFF; /* White text color */
}

.gallery-description {
    font-size: 1.2rem; /* Medium font size */
    line-height: 1.6; /* Line height */
}

.right-gallery {
    flex: 1; /* Take up equal space */
    display: flex; /* Use flex display */
    align-items: center; /* Center gallery vertically */
    justify-content: center; /* Center gallery horizontally */
}

.slideshow-container {
    position: relative; /* Position relative */
    width: 100%; /* Full width */
    max-width: 800px; /* Set a max width */
    height: 450px; /* Set a fixed height */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 1; /* Ensure the slideshow is below the buttons */
    overflow: hidden; /* Hide overflow */
}

/* General Styles */
.slide {
    position: absolute; /* Position absolute */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    top: 0; /* Start at top */
    left: 0; /* Start at left */
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
    z-index: 2; /* Place below active slide */
}

.slide img {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Ensure the image covers the container */
    border-radius: 10px; /* Rounded corners */
}

/* Active slide */
.active-img {
    opacity: 1; /* Fully visible */
    z-index: 1; /* Place above other slides */
}

/* ====================================
   Facebook Live Streaming Section Styles
==================================== */
#en-vivo {
    position: relative; /* Position relative */
    padding: 20px; /* Padding around section */
    background-image: url('../media/images/inicio-images/en_vivo.webp'); /* Background image */
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */
    color: #fff; /* White text color */
    min-height: 100vh; /* Full screen height */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

#en-vivo .overlay {
    position: absolute; /* Position absolute */
    top: 0; /* Start at top */
    left: 0; /* Start at left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(to top, #60afffb3, #8F95D3); /* Gradient overlay */
    z-index: 0; /* Place below content */
}

.facebook-live-content {
    position: relative; /* Position relative */
    z-index: 1; /* Place above overlay */
    padding: 100px 140px; /* Padding around content */
}

.facebook-live-content .live-description {
    font-size: 1.2rem; /* Medium font size */
    margin-bottom: 30px; /* Space below description */
    color: #fff; /* White text color */
}

.facebook-live-content .multimedia-btn {
    display: inline-block; /* Inline-block display */
    padding: 15px 30px; /* Padding around button */
    font-size: 1.2rem; /* Medium font size */
    color: #FFFFFF; /* White text color */
    background-color: #495867; /* Background color */
    border: none; /* No border */
    border-radius: 10px; /* Rounded corners */
    text-decoration: none; /* No text decoration */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.facebook-live-content .multimedia-btn:hover {
    background-color: #fe5f55; /* Darker background on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

/* Tooltip container */
.address-link[data-tooltip] {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Custom tooltip styles */
.address-link[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 1;
}

.address-link[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow */
.address-link[data-tooltip]::after {
    content: "";
    position: absolute;
    bottom: 115%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.address-link[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ====================================
   Responsive Styles
==================================== */
@media (max-width: 930px) {
    .welcome-content {
        flex-direction: column; /* Column direction on mobile */
        align-items: center; /* Center items */
        text-align: center; /* Center text alignment */
        height: auto; /* Auto height */
        padding: 20px; /* Padding around section */
        background: linear-gradient(135deg, #f5f5f5, #e0e0e0); /* Gradient background */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        border-radius: 10px; /* Rounded corners */
    }

    .right-image {
        flex: none;
        order: -1; /* Place before left content */
        width: 100%; /* Full width */
        height: 400px; /* Fixed height */
        margin-bottom: 20px; /* Space below image */
        border-radius: 10px; /* Rounded corners */
        overflow: hidden; /* Ensure no overflow */
    }

    .right-image img {
        width: 100%; /* Full width */
        height: auto; /* Auto height */
        border-radius: 10px; /* Rounded corners */
        transition: transform 0.3s ease; /* Smooth transition for transform */
    }

    .left-content {
        width: 100%; /* Full width */
        padding: 0; /* No padding */
    }

    .left-content h1 {
        font-size: 1.8rem; /* Adjust font size for mobile */
        line-height: 1.2; /* Line height */
        margin-bottom: 20px; /* Space below heading */
        text-align: center; /* Center text alignment */
    }

    .welcome-message {
        font-size: 1rem; /* Adjust font size for mobile */
        padding: 15px; /* Padding around message */
        background-color: rgba(255, 255, 255, 0.8); /* Light background color */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        margin-bottom: 15px; /* Space below message */
    }

    .quote-author,
    .pastor-title {
        font-size: 0.8rem; /* Adjust font size for mobile */
    }

    .scripture-container {
        margin-top: 15px; /* Space above container */
        padding: 15px; /* Padding around container */
        background-color: rgba(255, 255, 255, 0.8); /* Light background color */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        font-size: 1rem; /* Adjust font size for mobile */
    }

    .scripture-location {
        font-size: 0.8rem; /* Adjust font size for mobile */
    }

    .leer-mas-btn {
        font-size: 1rem; /* Adjust font size for mobile */
        margin: 20px auto 0; /* Center horizontally with top margin */
        display: block; /* Block display */
        padding: 10px 20px; /* Padding around button */
        color: #fff; /* White text color */
        border: none; /* No border */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
        text-align: center; /* Center text alignment */
    }

    .hours-item-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
    }

    .hours-item {
        width: 100%; /* Full width */
        margin-bottom: 20px; /* Space between items */
    }

    .hours-overlay {
        padding: 20px; /* Adjust padding for better spacing */
        background: linear-gradient(to bottom, #60AFFF, #ff8652bd); /* Ensure gradient background remains */
    }

    .hours-overlay p.service-time {
        display: none; /* Hide the time text on hover */
    }

    .hours-overlay p.service-description {
        display: block; /* Show the service description */
        font-size: 1rem; /* Adjust font size */
    }

    .hours-item:hover .hours-overlay {
        background-color: #ff8652bd; /* Change the background color on hover */
        transition: background 0.6s ease; /* Smooth transition for background color */
    }

    .hours-item:hover::before {
        transform: none; /* Remove scaling effect on mobile */
    }

    #direccion {
        padding-top: 40px; /* Ensure enough space at the top */
    }

    .address-content .right-content {
        margin-top: 20px; /* Space above right content */

    }

    /* Adjust the iframe (map) size on mobile */
    .address-content .right-content iframe {
        width: 100%; /* Full width for the map */
        height: 250px; /* Adjust height for better fit on mobile */
    }

    .address-content .left-content iframe {
        height: 100px; /* Fixed height */
        width: 100%; /* Full width */
    }

    .address-content {
        flex-direction: column; /* Stack items vertically */
        display: block;
        align-items: center; /* Center items */
        text-align: center; /* Center text */
    }

     /* Adjust padding for better readability */
     .address-content .left-content,
     .address-content .right-content {
         padding: 10px; /* Reduce padding on mobile */
     }
     
     .address-content .address-text {
         font-size: 1rem; /* Adjust font size */
         margin-bottom: 10px; /* Add space below address */
     }
 
     .address-content .contact-btn {
         margin: 20px auto 0; /* Center the button and add margin */
     }

    #en-vivo img {
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        object-position: right; /* Position image */
    }

    #en-vivo {
        background-position: center; /* Center the image for smaller screens */
        background-size: cover; /* Ensure the image covers the container */
    }

    .facebook-live-content {
        padding: 20px; /* Adjust padding for smaller screens */
        text-align: center; /* Center text for better readability */
    }

    .facebook-live-content .live-description {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .facebook-live-content .multimedia-btn {
        font-size: 1rem; /* Adjust button font size */
        padding: 10px 20px; /* Adjust button padding */
    }

    .gallery-wrapper {
        flex-direction: column; /* Stack items on smaller screens */
        align-items: normal; /* Normal alignment */
    }

    .left-content, .right-gallery {
        padding: 10px; /* Reduce padding */
    }

}

@media (max-width: 540px) {
    /* General Layout Adjustments */
    .welcome-content {
        flex-direction: column; /* Column direction on mobile */
        align-items: center; /* Center items */
        text-align: center; /* Center text alignment */
        height: auto; /* Auto height */
        padding: 20px; /* Padding around section */
        background: linear-gradient(135deg, #f5f5f5, #e0e0e0); /* Gradient background */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        border-radius: 10px; /* Rounded corners */
    }

    .right-image {
        flex: none;
        order: -1; /* Place before left content */
        width: 100%; /* Full width */
        height: 400px; /* Fixed height */
        margin-bottom: 20px; /* Space below image */
        border-radius: 10px; /* Rounded corners */
        overflow: hidden; /* Ensure no overflow */
    }

    .right-image img {
        width: 100%; /* Full width */
        height: auto; /* Auto height */
        border-radius: 10px; /* Rounded corners */
        transition: transform 0.3s ease; /* Smooth transition for transform */
    }

    .left-content {
        width: 100%; /* Full width */
        padding: 0; /* No padding */
    }

    .left-content h1 {
        font-size: 1.8rem; /* Adjust font size for mobile */
        line-height: 1.2; /* Line height */
        margin-bottom: 20px; /* Space below heading */
        text-align: center; /* Center text alignment */
    }

    .welcome-message {
        font-size: 1rem; /* Adjust font size for mobile */
        padding: 15px; /* Padding around message */
        background-color: rgba(255, 255, 255, 0.8); /* Light background color */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        margin-bottom: 15px; /* Space below message */
    }

    .quote-author,
    .pastor-title {
        font-size: 0.8rem; /* Adjust font size for mobile */
    }

    .scripture-container {
        margin-top: 15px; /* Space above container */
        padding: 15px; /* Padding around container */
        background-color: rgba(255, 255, 255, 0.8); /* Light background color */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        font-size: 1rem; /* Adjust font size for mobile */
    }

    .scripture-location {
        font-size: 0.8rem; /* Adjust font size for mobile */
    }

    .leer-mas-btn {
        font-size: 1rem; /* Adjust button font size */
        margin: 20px auto 0; /* Center horizontally with top margin */
        display: block; /* Block display */
        padding: 10px 20px; /* Padding around button */
        color: #fff; /* White text color */
        border: none; /* No border */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
        text-align: center; /* Center text alignment */
    }

    .hours-item {
        margin-bottom: 15px; /* Reduce space between items */
    }

    .hours-overlay {
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .hours-overlay p.service-description {
        font-size: 0.9rem; /* Slightly smaller font size */
    }

    /* Direccion Section */
    #direccion {
        height: auto; /* Adjust height to auto */
        padding: 30px 20px; /* Adjust padding to prevent content overlap */
        overflow: hidden; /* Ensure no overflow */
    }

    .address-content .right-content iframe {
        height: 250px; /* Adjust iframe height for better fit */
    }

    .address-content .left-content, .address-content .right-content {
        padding: 10px; /* Adjust padding for better fit */
    }

    /* Facebook Live Section */
    #en-vivo {
        background-position: center; /* Keep the image centered */
        background-size: cover; /* Ensure the image covers the container */
    }

    .facebook-live-content {
        padding: 20px; /* Adjust padding for smaller screens */
        text-align: center; /* Center text for better readability */
    }

    .facebook-live-content .live-description {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .facebook-live-content .multimedia-btn {
        font-size: 1rem; /* Adjust button font size */
        padding: 10px 20px; /* Adjust button padding */
    }

    /* Gallery Section */
    #galeria {
        align-items: normal;
    }
    .gallery-wrapper {
        flex-direction: column; /* Stack items on smaller screens */
    }

    .left-content, .right-gallery {
        padding: 10px; /* Reduce padding */
    }

    /* Slideshow adjustments */
    .slideshow-container {
        width: 100%; /* Full width on mobile */
        height: 25vh; /* Adjust height */
    }

    .slideshow-container img {
        width: 100%; /* Ensure images take full width */
    }

    /* General Responsive Adjustments */
    .hours-overlay {
        padding: 20px; /* Adjust padding for better fit */
    }
}

@media (max-width: 430px) {
    /* Full width slideshow on smaller mobile devices */
    .slideshow-container {
        width: 100%; /* Full width on mobile */
        height: 25vh; /* Adjust height */
    }

    .slideshow-container img {
        width: 100%; /* Ensure images take full width */
    }

    #en-vivo {
        background-position: center; /* Center the image for smaller screens */
        background-size: cover; /* Ensure the image covers the container */
    }
}