.elementor-992905 .elementor-element.elementor-element-1e64e957{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:00px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:00px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-992905 .elementor-element.elementor-element-1e2f082b img{width:38%;}.elementor-992905 .elementor-element.elementor-element-84396d6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-992905 .elementor-element.elementor-element-84396d6{text-align:center;}@media(max-width:1024px){.elementor-992905 .elementor-element.elementor-element-1e2f082b img{width:38%;}}@media(min-width:768px){.elementor-992905 .elementor-element.elementor-element-1e64e957{--width:50%;}}@media(max-width:767px){.elementor-992905 .elementor-element.elementor-element-1e64e957{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-992905 .elementor-element.elementor-element-1e2f082b img{width:40%;}}/* Start custom CSS *//* Define the hover effect for the first container */
#container1:hover {
    background-size: 105%; /* Increase the background image size by 10% */
    transition: background-size 0.9s ease; /* Smooth transition for the size change */
}

/* Define the background image for the first container */
#container1 {
    background-image: url('https://sriramhospital.co/wp-content/uploads/2024/02/paediatrics-hm.jpg');
    background-size: 100%; /* Adjust the background size */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center center; /* Center the background image */
    /* Add other styles for the container as needed */
}
/* Define the hover effect for the second container */
#container2:hover {
    background-size: 105%; /* Increase the background image size by 10% */
    transition: background-size 0.9s ease; /* Smooth transition for the size change */
}

/* Define the background image for the second container */
#container2 {
    background-image: url('https://sriramhospital.co/wp-content/uploads/2024/02/gynaecology-hm.jpg');
    background-size: 100%; /* Adjust the background size */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center center; /* Center the background image */
    /* Add other styles for the container as needed */
}
/* Define the hover effect for the third container */
#container3:hover {
    background-size: 105%; /* Increase the background image size by 10% */
    transition: background-size 0.9s ease; /* Smooth transition for the size change */
}

/* Define the background image for the third container */
#container3 {
    background-image: url('https://sriramhospital.co/wp-content/uploads/2024/02/general-hm.jpg');
    background-size: 100%; /* Adjust the background size */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center center; /* Center the background image */
    /* Add other styles for the container as needed */
}
/* Define the hover effect for the third container */
#container4:hover {
    background-size: 105%; /* Increase the background image size by 10% */
    transition: background-size 0.9s ease; /* Smooth transition for the size change */
}
/* Define the background image for the third container */
#container4 {
    background-image: url('https://sriramhospital.co/wp-content/uploads/2024/02/Dental.jpg');
    background-size: 100%; /* Adjust the background size */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: top right; /* Set the background image position to top left */
    /* Add other styles for the container as needed */
}

/* Show the button and move the text on hover */
.elementor-section:hover .buttonicon {
    visibility: visible; /* Show the button */
    transform: translateY(-10px); /* Move button upwards */
    opacity: 1; /* Ensure the button is fully visible */
    transition: transform 0.9s ease; /* Smooth transition for transform */
}

.elementor-section:hover .elementor-widget-text-editor {
    transform: translateY(-50px); /* Move text upwards */
    transition: transform 0.9s ease; /* Smooth transition for text */
}

/* Reduce opacity of the image on hover */
.elementor-section:hover .elementor-widget-image {
    opacity: 0.2; /* Reduce opacity to 80% */
    transition: opacity 0.9s ease; /* Smooth transition for image opacity */
}

/* Hide the button by default */
.elementor-section .buttonicon {
    display: none; /* Hide all buttons within the section by default */
    opacity: 0; /* Set initial opacity to 0 */
}

/* Style for the button */
.elementor-section .buttonicon {
    position: absolute;
    bottom: 0px; /* Adjust as needed */
    left: 24%; /* Align to the center horizontally */
    transform: translateX(-50%) translateY(20px); /* Center horizontally and move it up slightly */
    padding: -20px -90px;
    background-color: #0000;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

/* Show the button with a bounce animation when hovering over the section */
.elementor-section:hover .buttonicon {
    display: block; /* Show only buttons within the hovered section */
    animation: bounceIn 0.9s ease; /* Apply bounce animation */
}

/* Define keyframes for bounce animation */
@keyframes bounceIn {
    0% {
        transform: translateY(30px); /* Initial position below the section */
        opacity: 0; /* Initial opacity */
    }
    70% {
        transform: translateY(-10px); /* Bounce height */
    }
    100% {
        transform: translateY(0); /* Final position */
        opacity: 1; /* Fully visible */
    }
}/* End custom CSS */