*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100%;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

h2{
    color: white;
    margin: 1rem;
}

a{
    text-decoration: none;
}


.left-side{
    border-right: 2px solid yellow;
}

.col-md-4 img , h2{
    transition: all 0.5s ease-in-out;
}
.col-md-4:hover img{
    transform: scale(1.1);
}


.col-md-4:hover h2{
    margin-bottom: 2rem;
    color: yellow;
}

@media all and (max-width: 768px) {

    .row{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .left-side{
        margin: 2rem 0;
        padding-bottom: 3rem;
        border-right: none;
        border-bottom: 2px solid yellow;
        width:80%;
    }
}

/* Animation for sliding and fading in */
.col-md-4 {
    opacity: 0; /* Initially invisible */
    transform: translateY(30px); /* Start from a lower position */
    animation: fadeInUp 1s forwards;
}

.col-md-4:nth-child(1) {
    animation-delay: 0.2s; /* Delay the first column slightly */
}

.col-md-4:nth-child(2) {
    animation-delay: 0.4s; /* Delay the second column */
}

.col-md-4:nth-child(3) {
    animation-delay: 0.6s; /* Delay the third column */
}

/* Keyframes for the animation */
@keyframes fadeInUp {
    to {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* End at original position */
    }
}