/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 10 2025 | 09:44:15 */
/* Background Overlay */
.baner_overlay {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    transition: justify-content 0.5s ease;
}

.baner_overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*     background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                linear-gradient(180deg, rgba(225, 78, 45, 0) 50%, rgba(225, 78, 45, 0.5) 100%); */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49.5%, rgba(0, 0, 0, 0.8) 100%);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 1;
} 
.baner_overlay_1:hover::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, rgba(225, 78, 45, 0) 50%, #E14E2D 100%);
}
.baner_overlay2:hover::before {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
linear-gradient(180deg, rgba(85, 180, 157, 0) 50%, #55B49D 100%);
}
.baner_overlay3:hover::before {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
linear-gradient(180deg, rgba(124, 59, 164, 0) 50%, rgba(124, 59, 164, 0.8) 100%);

}

/* Hover Effect for Overlay */
.baner_overlay:hover::before {
    opacity: 1;
}

.baner_overlay:hover {
    cursor: pointer;
    justify-content: center; /* Smoothly adjust content alignment */
}

/* Content Styles */
.baner_overlay .sub_container {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    transition: opacity 0.5s ease-in, transform 0.5s ease;
    opacity: 1; 
}
.baner_overlay_1 .sub_container {
    transform: translateY(114px);
}
.baner_overlay2 .sub_container {
    transform: translateY(118px);
}
.baner_overlay3 .sub_container {
    transform: translateY(144px);
}
.baner_overlay:hover .sub_container {
    opacity: 1; /* Fade in on hover */
    transform: translateY(0); /* Smoothly move into place */
}

/* Banner Title */
.baner_overlay .banner_title h2 {
    margin-bottom: 40px;
    transition: margin-bottom 0.5s ease;
}

.baner_overlay:hover .banner_title h2 {
    margin-bottom: 0; /* Adjust margin smoothly */
}

/* Button and Paragraph */
.baner_overlay .ban_btn, 
.baner_overlay .banner_para {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Slight offset for animation */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.baner_overlay:hover .ban_btn, 
.baner_overlay:hover .banner_para {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move into place */
}

@media(max-width: 767px){
.baner_overlay_1 .sub_container {
    transform: translateY(55%);
}
.baner_overlay2 .sub_container {
    transform: translateY(50%);
}
.baner_overlay3 .sub_container {
    transform: translateY(55%);
}	
}