/* services start */

.about-section{
    background:#f4f4f4;
    padding:80px 0;
}

.about-box{
    display:flex;
    align-items:center;
    gap:40px;
}

/* Left Image */

.about-left img{
    width:100%;
    height:600px;
    object-fit:cover;
}


/* Right Content */

.about-right{
    background:#fff;
    padding:40px;
}

.about-small{
    color:red;
    letter-spacing:5px;
    font-weight:bold;
}

.about-right h2{
    font-size:40px;
    font-weight:bold;
    margin:15px 0;
}

.about-text{
    color:#666;
    line-height:28px;
}


/* Bottom Gallery */

.about-gallery{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.about-gallery img{
    width:50%;
    height:150px;
    object-fit:cover;
}


/* Responsive */

@media(max-width:991px){

.about-box{
flex-direction:column;
}

.about-left img{
height:auto;
}

.about-right h2{
font-size:28px;
}

}






/* Image Animation on Load */

.about-left img{
    animation: slideLeft 1.5s ease;
}

.about-gallery img{
    animation: slideUp 1.5s ease;
    transition: 0.5s;
}


/* Hover Zoom Animation */

.about-left img:hover{
    transform: scale(1.05);
}

.about-gallery img:hover{
    transform: scale(1.08);
}


/* Keyframes */

@keyframes slideLeft{

    from{
        transform: translateX(-100px);
        opacity:0;
    }

    to{
        transform: translateX(0);
        opacity:1;
    }

}


@keyframes slideUp{

    from{
        transform: translateY(100px);
        opacity:0;
    }

    to{
        transform: translateY(0);
        opacity:1;
    }

}
/* services end */























.gallery-box{

position:relative;
overflow:hidden;
border-radius:10px;

}

.gallery-box img{

width:100%;
height:350px;
object-fit:cover;

}


/* Eye Icon */

.gallery-icon{

position:absolute;
top:50%;
left:50%;

transform:translate(-50%,-50%);

opacity:0;
transition:0.5s;

}


/* Icon Design */

.gallery-icon i{

font-size:25px;
color:#fff;
background:red;
padding:15px;
border-radius:50%;

}


/* Hover Effect */

.gallery-box:hover .gallery-icon{

opacity:1;

}


.gallery-box:hover img{

filter:brightness(50%);

transition:0.5s;

}