#project-section{
     background-color: #000000; 
    /*background-image: url('/img/random\ banner.jpg');
    background-size: cover; /* Optional: Adjusts the size of the background image to cover the entire section 
    background-position: center; /* Optional: Centers the background image 
    background-repeat: no-repeat; Optional: Prevents the background image from repeating*/

color: white;
min-height: 200px;
padding: 50px;
}
section.container {
    padding: 20px 0;
}

.col {
    text-align: center;
    padding: 20px;
}

.protfolio-section-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

}
.row-section-portfolio{
    padding: 10px;
    /* background-color: rgb(195, 105, 15); */
    background-color: rgb(178 178 178 / 73%);
    border: 5px solid rgb(247, 241, 241);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
h2{
    vertical-align: middle;
}
.content{
    color: #000000;
}
.zoom-out {
    transition: transform 0.3s ease;
}

.zoom-out:hover {
    transform: scale(1.1); /* Adjust the scale factor as needed */
}
/* Define the CSS animation
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the animation to the element */
/* .scroll-animation {
    opacity: 0;
    animation: fade-in 0.5s ease forwards; 
} */