/* General Styles */
body {
    font-family: 'Roboto Slab', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.page-section {
    padding: 80px 0;
}

.bg-light {
    background-color: #f8f9fa; /* Light background color for sections */
}

/* Typography */
h2.section-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #222;
}

h3.section-subheading {
    font-family: 'Droid Serif', serif;
    font-style: italic;
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 60px;
    color: #777;
}

/* Navigation */
.navbar {
    background-color: #222; /* Default background for mobile and non-shrunk state */
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: padding 0.3s ease, background-color 0.3s ease; /* Added background-color transition */
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand a {
    display: block;
}

.navbar-brand img {
    height: 40px;
    transition: height 0.3s ease; /* Smooth transition for logo size */
}

.navbar-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* Hidden by default for desktop */
}

.navbar-collapse {
    display: none; /* Hidden by default for mobile */
    width: 100%;
    text-align: center;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stacked vertically on mobile */
}

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

.nav-item a {
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease; /* Added transitions for button effect */
    padding: 8px 15px; /* Padding for button-like appearance */
    border-radius: 4px; /* Rounded corners for button-like appearance */
}

.nav-item a:hover {
    color: #E75480; /* Highlight color on hover - Changed to pink */
    background-color: transparent; /* Ensure background is transparent on hover unless active */
}

/* Style for the active (selected) menu item */
.navbar-nav .nav-item.active a {
    background-color: #E75480; /* Pink background for selected item */
    color: #ffffff; /* White text for selected item */
    border-radius: 4px; /* Rounded corners for the active button */
}

.navbar-nav .nav-item.active a:hover,
.navbar-nav .nav-item.active a:focus {
    background-color: #d14a72; /* Slightly darker pink on hover/focus for active item */
    color: #ffffff;
}


.navbar-collapse.open {
    display: block; /* Show menu when toggle is clicked */
}

/* Navbar shrink effect - applies green background universally when class is present */
.navbar.navbar-shrink {
    background-color: #62c462; /* Green background */
    padding: 10px 0; /* Smaller padding when shrunk */
}

@media (max-width: 767px) {
    .navbar-toggle {
        display: block; /* Show toggle button on mobile */
    }
    /* On mobile, the default .navbar background-color will be #222 (dark) */
    /* If navbar-shrink is applied, it will override to green */
}

@media (min-width: 768px) {
    .navbar {
        background-color: transparent; /* Transparent on desktop initially */
        padding: 25px 0; /* Larger padding on desktop */
    }
    /* The .navbar-shrink rule above handles the background-color for all sizes.
       This media query can still define other desktop-specific shrink styles. */
    .navbar.navbar-shrink {
        padding: 10px 0; /* Smaller padding when shrunk on desktop */
    }
    .navbar-toggle {
        display: none; /* Hide toggle button on desktop */
    }
    .navbar-collapse {
        display: flex; /* Show menu on desktop */
        width: auto;
    }
    .navbar-nav {
        flex-direction: row; /* Horizontal on desktop */
    }
    .nav-item {
        margin-left: 20px;
        margin-right: 0;
    }
}

/* Header for Arreglos and Funeral pages */
.page-header-simple {
    background-color: #f8f9fa; /* Light background for this header */
    padding-top: 100px; /* Space to push content below fixed navbar */
    padding-bottom: 50px;
    text-align: left; /* Align text to the left */
}

.page-header-simple .container {
    /* Add padding-left to shift content right, clearing space for the logo */
    padding-left: 100px; /* Adjust this value as needed based on logo width */
}

.page-header-simple .page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #222;
    margin-top: 0;
    margin-bottom: 0;
}

/* Header for Index page */
.masthead {
    background-image: url('../img/header-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Allow background to scroll */
    color: #fff;
    text-align: center;
    padding-top: 150px; /* Space for fixed navbar */
    padding-bottom: 100px;
}

.masthead .intro-text {
    max-width: 800px;
    margin: 0 auto;
}

.masthead .intro-lead-in {
    font-family: 'Droid Serif', serif;
    font-style: italic;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #E75480; /* Original accent color for lead-in text */
}

.masthead .intro-heading {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 3.5rem;
    margin-bottom: 30px;
}

.masthead .intro-body {
    display: flex;
    flex-direction: column; /* Always column, for carousel below text */
    gap: 30px;
    margin-top: 30px;
    align-items: center; /* Center text and slider horizontally */
}

.masthead .text-column {
    width: 100%; /* Ensure text takes full width within intro-body */
    max-width: 800px; /* Limit max width for readability on very wide screens */
    text-align: left; /* Align text to the left within its column */
}

.masthead .image-slider {
    width: 100%; /* Make slider take full available width within intro-body */
    max-width: 800px; /* Match max width of text column for consistent layout */
}

@media (min-width: 992px) {
    .masthead .intro-lead-in {
        font-size: 3rem;
    }
    .masthead .intro-heading {
        font-size: 5rem;
    }
    .masthead .text-column {
        text-align: left; /* Ensure text is left-aligned on larger screens */
    }
}

/* Compromiso Section (Timeline) */
#compromiso {
    position: relative;
    background-color: #62c462; /* Original background color */
    background-image: url('../img/encinolight3.jpg'); /* Original background image */
    background-position: center;
    background-repeat: repeat;
    color: #4a3d34; /* Changed text color to a dark brown/charcoal */
}

#compromiso .section-heading,
#compromiso .section-subheading {
    color: #4a3d34; /* Changed heading/subheading color to dark brown/charcoal */
}

.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #f1f1f1; /* Light line color */
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    clear: both; /* Clear floats for each item */
}

.timeline-image {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 60px; /* Reduced by 25% from 80px */
    height: 60px; /* Reduced by 25% from 80px */
    border-radius: 50%;
    background-color: #32b1f1; /* Primary color for circles */
    color: #fff;
    text-align: center;
    line-height: 60px; /* Vertically center icon, matches new height */
    transform: translateX(-50%);
    z-index: 1;
    font-size: 1rem; /* Adjusted icon size to 1rem for better fit */
    box-shadow: 0 0 0 7px #fff; /* White border effect */
}

.timeline-panel {
    width: calc(50% - 60px); /* Adjust width to make space for image */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.timeline-item:nth-child(odd) .timeline-panel {
    float: left;
    text-align: right;
    margin-right: 60px; /* Space from the center line */
}

.timeline-item:nth-child(even) .timeline-panel {
    float: right;
    text-align: left;
    margin-left: 60px; /* Space from the center line */
}

/* Specific styling for inverted items (right side on desktop) */
.timeline-item.inverted .timeline-panel {
    float: right;
    text-align: left;
}

/* Mobile adjustments for timeline */
@media (max-width: 767px) {
    .timeline::before {
        left: 20px; /* Move line to the left */
        transform: none;
    }
    .timeline-image {
        left: 20px; /* Align image to the left */
        transform: none;
    }
    .timeline-panel {
        width: calc(100% - 70px); /* Full width minus image and padding */
        margin-left: 70px; /* Push panel to the right of the image */
        float: none;
        text-align: left;
    }
    .timeline-item:nth-child(odd) .timeline-panel,
    .timeline-item:nth-child(even) .timeline-panel {
        margin-right: 0;
        margin-left: 70px;
    }
}


/* Categorías Section (Portfolio) */
/* Updated to include #funeral-gallery for consistent layout */
#categorias, #arreglos-gallery, #funeral-gallery {
    background-color: #f7f7f7; /* Original light gray background */
}

#categorias .row, #arreglos-gallery .row, #funeral-gallery .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between items */
}

.portfolio-item {
    width: 100%; /* Full width on mobile */
    max-width: 400px; /* Max width for consistency */
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.portfolio-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

.portfolio-link {
    display: block;
    position: relative;
}

.portfolio-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.portfolio-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 177, 241, 0.8); /* Primary color with transparency */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-hover-content {
    color: #fff;
    font-size: 2.5rem; /* Larger icon for hover */
}

.portfolio-item:hover .portfolio-hover {
    opacity: 1;
}

.portfolio-item:hover .portfolio-link img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.portfolio-caption {
    background-color: #fff;
    padding: 20px;
    text-align: center;
}

.portfolio-caption h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    margin: 0;
    color: #222;
}

@media (min-width: 768px) {
    .portfolio-item {
        width: calc(50% - 15px); /* Two columns on larger screens */
    }
}

@media (min-width: 992px) {
    .portfolio-item {
        width: calc(33.33% - 20px); /* Three columns on larger screens for galleries */
    }
}

/* Footer */
.footer {
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer .copyright {
    font-size: 0.9rem;
    margin: 0;
}

.footer .copyright a {
    color: #0f9be1; /* Accent color for link */
    text-decoration: none;
}

/* Owl Carousel Specific Styles */
.owl-theme .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    margin: 0 5px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    display: block;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #0f9be1; /* Active dot color */
}

/* Utility Classes (if needed, can be expanded) */
.text-muted {
    color: #777;
}

.text-primary {
    color: #0f9be1;
}

/* Image Modal Styles */
.image-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    -webkit-animation: fadeIn 0.6s;
    animation: fadeIn 0.6s;
}

.image-modal.active {
    display: flex; /* Show when active */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    max-height: 90vh; /* Limit height to viewport height */
    object-fit: contain; /* Ensure image fits within bounds without cropping */
    -webkit-animation: zoomIn 0.6s;
    animation: zoomIn 0.6s;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Animations */
@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@-webkit-keyframes zoomIn {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoomIn {
    from {transform:scale(0)}
    to {transform:scale(1)}
}