/* #box11, #h3{
    background-color: white;
    border-radius: 20px;
    color: black;
}

#box11 :hover{
    background-color: black;
    color: white;
}
#h3:hover{
    background-color: black;
    color: white; 
} */


#box11{
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 1);
    width: 400px;
    margin-left: 80px;
    margin-bottom: 50px;

}

#box11:hover {
    transform: scale(1.1); /* Slight zoom-out on hover */
}

#body{
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 30px;
}
/* 
#image{
    width: 100%;
    height: 300px;
} */


@media (max-width: 768px) {
    #box11{
        margin-left: 1px;
    }
    #body{
        padding: 30px;
    }
    #img, #_ytid_82194    {
        margin-right: 420px;
    }
    .video-promo-block,.video-promo-blocks{
        display: block;
    }
    /* #block  {
        display: block;
    } */
}

#head   {
    color: #00ADCF;
}
#para   {
    color: black;
}



/* Default card styling */
#box11 {
    background: #ffffff; /* Initial background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensures the animation stays within the div */
    transition: color 0.5s ease-in-out;
}

/* Create a pseudo-element for the background animation */
#box11::before {
    content: "";
    position: absolute;
    top: -100%; /* Start from above */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #d46334, #b64520);
    transition: top 0.5s ease-in-out; /* Smooth downward movement */
    z-index: -1; /* Behind the content */
}

/* Hover effect to bring down the gradient smoothly */
#box11:hover::before {
    top: 0; /* Moves the gradient down */
}

/* Text color transition */
#box11:hover #head, 
#box11:hover #para {
    color: white;
    transition: color 0.5s ease-in-out;
}

/* Image zoom effect */
.elementor-image-box-img img {
    transition: transform 0.5s ease-in-out;
}

#box11:hover .elementor-image-box-img img {
    transform: scale(1.1);
}

/* Button transition */
.elementor-button {
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

#box11:hover .elementor-button {
    background: white;
    color: #d46334;
}







/* Target only this section */
#custom-hover-section .elementor-column {
    background: #ffffff; /* Initial background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensures animation stays inside the div */
    transition: color 0.5s ease-in-out;
    margin: 15px;  /* Adjust this value as needed */
}

/* Create a pseudo-element for the background transition */
/* Create a pseudo-element for the background transition */
#custom-hover-section .elementor-column::before {
    content: "";
    position: absolute;
    bottom: -100%; /* Start from bottom */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #d46334, #b64520); /* Adjust gradient direction */
    transition: bottom 0.5s ease-in-out; /* Smooth upward movement */
    z-index: 0; /* Behind the content */
}

/* Hover effect - moves the background up */
#custom-hover-section .elementor-column:hover::before {
    bottom: 0; /* Moves the gradient up */
}


/* Text and icon transition */
#custom-hover-section .elementor-column .elementor-icon-box-content,
#custom-hover-section .elementor-column .elementor-icon {
    position: relative;
    z-index: 1; /* Ensure content is above the background */
    transition: color 0.5s ease-in-out;
}

/* Change text and icon color on hover */
#custom-hover-section .elementor-column:hover .elementor-icon-box-content,
#custom-hover-section .elementor-column:hover .elementor-icon {
    color: white;
}

/* Icon transition (enlarges slightly on hover) */
#custom-hover-section .elementor-icon {
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out;
}

#custom-hover-section .elementor-column:hover .elementor-icon {
    transform: scale(1.1);
    color: white;
}



/* Change text color on hover */
#custom-hover-section .elementor-column:hover h3,
#custom-hover-section .elementor-column:hover p {
    color: white;
    transition: color 0.5s ease-in-out; /* Smooth color transition */
}






/* Initially hide the divs */
#custom-hover-section .elementor-column {
    opacity: 0;
    transform: translateY(50px); /* Move slightly down */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When the div enters the viewport, fade in and move up */
#custom-hover-section .elementor-column.show {
    opacity: 1;
    transform: translateY(0);
}







/* Start hidden */
#box11 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When visible, fade in and move up */
#box11.show {
    opacity: 1;
    transform: translateY(0);
}