/* Parallax Background */
.parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
    /* Adjust the height as per your need */
}

/* Dark Overlay */
.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96, 103, 167, 0.5);
    /* Dark background with opacity */
    z-index: 1;
    /* Ensure overlay stays on top of the background */
}

/* Content inside the parallax */
.parallax .content {
    position: relative;
    /* This ensures the content stays on top of the overlay */
    z-index: 2;
    /* Ensures text/content is on top */
    color: white;
    /* Adjust text color as needed */
    padding: 20px;
}


/* Add custom styles for mobile view */
@media (max-width: 767px) {
    .parallax {
        height: 60vh;
        /* Adjust height for mobile */
    }

    .parallax img {
        max-height: 400px;
        /* Control the max height of the image */
    }

    .card img {
        max-height: 300px;
        /* Control the max height of the image inside the card */
        width: 100%;
        /* Ensure the image is responsive and doesn't overflow */
    }
}


/* Default font size for smaller devices */
h2,
h5 {
    font-size: 1.2rem;
    /* Adjust as needed for smaller screens */
}

/* Font size for larger screens */




/* Font size for extra large screens */
@media (min-width: 992px) {

    /* Desktop and above */
    h2 {
        font-size: 3rem;
        /* Even larger size for h2 on desktop */
    }

    h5 {
        font-size: 1.75rem;
        /* Larger size for h5 on desktop */
    }
}



/* 4-Column Gallery */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    transition: transform 0.5s ease-in-out;
}

/* Zoom-in effect on hover */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Overlay for Gallery */
.gallery-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover:after {
    opacity: 1;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}