/* Aquí puedes agregar tus estilos personalizados para sobreescribir los de Bootstrap si es necesario */

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    line-height: 1.2;
    color: #228B22 !important;
}

.navbar-nav .nav-link {
    color: #0c0c0c !important;
}

.navbar-nav .nav-link:hover {
    color: #228B22 !important;
}

.mt-5 {
    margin-top: 3rem !important; /* Adjust margin for mobile */
}

.py-5 {
    padding-top: 3rem !important; /* Adjust padding for mobile */
    padding-bottom: 3rem !important;
}

.lead {
    font-size: 1.1rem; /* Adjust lead text size for mobile */
}

/* Adjust gallery layout for smaller screens */
.row-cols-md-2 { /* On medium screens and up, show 2 columns */
    grid-template-columns: repeat(2, 1fr); /* Explicitly set grid columns */
}

/* On small screens (default), show 1 column */
.row-cols-1 > * {
    flex-basis: 100%;
    max-width: 100%;
}

/* On larger screens, Bootstrap's default will handle 3 columns */

.card-img-top {
    object-fit: cover;
    height: 200px;
    transition: transform 0.3s ease-in-out; /* Add hover animation */
    cursor: pointer; /* Indicate that the image is clickable */
}


.image-gallery {
    overflow: hidden; /* To contain animations that might go out of bounds */
}

.gallery-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.gallery-item.show {
    opacity: 1;
    transform: translateY(0);
}

.card-img-top {
    object-fit: cover;
    height: 200px;
    transition: transform 0.3s ease-in-out; /* Add hover animation */
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Adjust gallery layout for smaller screens */
.row-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
}

.row-cols-1 > * {
    flex-basis: 100%;
    max-width: 100%;
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 24px;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }

    .navbar-nav .ml-lg-3, .navbar-nav .ml-2 {
        margin-left: 0 !important;
    }

    .navbar-nav .nav-link.align-items-center.d-flex {
        justify-content: center;
    }

    .footer-content p {
        font-size: 0.8em;
    }

    .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .mt-2 {
        margin-top: 1rem !important;
    }

    .card-img-top {
        height: 150px; /* Adjust image height for mobile */
    }
}