/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1761268430
Updated: 2025-10-24 01:13:50

*/
:root {
    --e-global-color-primary: #78C9AD;
    --e-global-color-accent: #FDA172;
    --e-global-color-secondary: #54595F;
    --e-global-color-text: #171F1C;
    /* Light Background color */
    --e-global-color-27d1e2b: #F5EEE1;
    /* Dark Green */
    --e-global-color-2de7a4f: #245041;
    /* Blacked Orange */
    --e-global-color-0f6940f: #492615;
    /* Light Green */
    --e-global-color-ff055e6: #CDFAEB;
    /* Orange Hover */
    --e-global-color-dc2a3e0: #FFB38C;

}

/* Fixing some issues with navigation and the page */

#content{
	top: -90px;
	position: relative;
}
footer{
	margin-top: -90px;
}
#content .elementor-widget-text-editor a {
	color: #295848;
	font-weight: bold;
	border-bottom: 2px solid #295848;

	/* Gradient setup */
	background-image: linear-gradient(
		to top,
		rgba(253, 161, 114, .5) 0%,
		rgba(253, 161, 114, .5) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	background-position: bottom;

	transition: background-size 0.2s ease-in-out;
}

#content .elementor-widget-text-editor a:hover {
	background-size: 100% 100%;
}
.hero-masked-text {
    overflow: hidden; /* acts as the mask */
    display: inline-block;
}

.hero-masked-text .elementor-heading-title span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: revealAnimation 0.5s ease-out forwards;
}

/* Add delays for each span using nth-child */
.hero-masked-text .elementor-heading-title span:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-masked-text .elementor-heading-title span:nth-child(2) {
    animation-delay: 0.4s;
}

.hero-masked-text .elementor-heading-title span:nth-child(3) {
    animation-delay: 0.5s;
}

/* Add more nth-child rules as needed for additional spans */

@keyframes revealAnimation {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.gradient-text{
    background-image: linear-gradient(45deg, var(--e-global-color-primary), var(--e-global-color-ff055e6));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

}


.gradient-border {
    border: 2px solid transparent; /* Transparent border to allow gradient to show */
    border-radius: 15px; /* Apply desired border-radius */
    background: linear-gradient( var(--e-global-color-27d1e2b), var(--e-global-color-27d1e2b)) border-box, /* Gradient for the border */
                linear-gradient(to bottom,var(--e-global-color-primary), var(--e-global-color-2de7a4f)) border-box; /* Solid color for the inner background */
    background-clip: padding-box, border-box; /* Clip the backgrounds */
  }


.alec-profile{
	position: relative;
	overflow: visible;
}
.alec-profile img{
    position: relative;
    z-index: 2;
}
.alec-profile .elementor-widget-container{
	z-index: 1;
	position: relative;
}
.alec-profile:after{
	content: "";
    width: 302px;
    height: 430px;
    display: block;
    position: absolute;
    left: 190px;
    top: 94px;
    z-index: 0;
    background-color: #2a3b34;
}
@media(max-width: 768px){
    .alec-profile:after{
        height: 300px;
        width: 300px;
        display: block;
        position: absolute;
        left: 77px;
        top: 29px;
        z-index: 0;
    }
}


/* Fill button styling */
.btn-primary a, [type=submit]{
    outline: 0;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    border: 2px solid var(--e-global-color-accent); /* Button border */
    overflow: hidden; /* Ensure the fill stays within the button */
    transition: color 0.3s ease-in-out; /* Smooth text color transition */
}
.btn-primary .elementor-button-content-wrapper, [type=submit] .elementor-button-content-wrapper{
    position: relative;
    z-index: 5;
}

.btn-primary a::after, [type=submit]::after{
    content: "";
    background-color: var(--e-global-color-dc2a3e0); /* Fill color */
    width: 0; /* Start with no fill */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Place behind the text */
    transition: width 0.4s ease-in-out; /* Smooth fill animation */
}

.btn-primary a:hover::after, [type=submit]:hover::after{
    width: 100%; /* Fill the entire button */
}

.btn-primary svg, [type=submit] svg{
    position: relative;
    left: 0;
    transition: ease-in-out all .2s;
}
.btn-primary a:hover svg, [type=submit]:hover svg{
    left: 10px;
}
.alec-header{
    margin: 0 auto;
}
.alec-header.scrolled {
    background-color: var(--e-global-color-27d1e2b) !important;
/* 	background-color: #DBD1BA !important; */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }



  .alec-header.scrolled a{
    color: var(--e-global-color-text) !important;
  }
  .alec-header.scrolled a svg{
    fill: var(--e-global-color-text) !important;
  }
  .alec-header.scrolled a:hover{
    color: var(--e-global-color-accent) !important;
  }
  .alec-header.scrolled a:hover svg{
    fill: var(--e-global-color-accent) !important;
  }

/* @media(max-width: 1024px){
	.alec-header{
		background-color: var(--e-global-color-27d1e2b) !important;
	}
	.alec-header .elementor-menu-toggle svg{
    fill: var(--e-global-color-text) !important;
  }
} */