/*Fixed Section for Mobile*/
#bgfixed{
  background-attachment: fixed;  
}

.custom-text{
	color:#0FABB4;
}

.link-text{
	color:#0FABB4;
	text-decoration: underline !important;
}


/*Sticky Header*/

.home.elementor-sticky--effects {
	background: white;
  box-shadow: 0px 2px 4px 0px #2127363d;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; 
}


.home.elementor-sticky--effects, .sticky-menu ul li a {
  transition: .5s all ease-in-out;
}

/*Header Dropdown Padding*/

.elementor-296 .elementor-element.elementor-element-60edb34d .elementor-nav-menu--dropdown{
	padding: 1.1em 1.1em;
}


/*Footer Dropdown Padding*/

.elementor-305 .elementor-element.elementor-element-53ba8d2e .elementor-nav-menu--dropdown{
		padding: 1.1em 1.1em;
	z-index: 999;
}



/* Ensure the container is properly positioned */
.hover-box {
    position: relative;
    overflow: hidden;
}

/* Create a pseudo-element for the background overlay */
.hover-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Inherit background image */
    transition: transform 0.4s ease-in-out;
    z-index: 1;
}

/* Create a separate dark overlay (initially transparent) */
.hover-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background-color 0.4s ease-in-out;
    z-index: 2;
}

/* Apply zoom to background image */
.hover-box:hover::before {
    transform: scale(1.1); /* Slight zoom effect */
}

/* Dark overlay appears on hover */
.hover-box:hover::after {
    background-color: rgba(47, 52, 63, 0.56); /* Dark overlay */
}

/* Text styling */
.hover-box h3,
.hover-box p,
.hover-box a {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 3; /* Ensures text appears above overlay */
}

/* Show text on hover */
.hover-box:hover h3,
.hover-box:hover p,
.hover-box:hover a {
    opacity: 1;
    transform: translateY(0);
}