/*
Theme Name:   Landeseiten Design Child
Theme URI:    #
Description:  Child theme for Hello Elementor for Landeseiten Design projects.
Author:       Your Name
Author URI:   #
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  landeseiten-design-child
*/

/*----------------------------------------------------------------*/
/* Add your custom CSS below this line
/*----------------------------------------------------------------*/

html, body {
	overflow-x:hidden;
}

body{
	background: #16211B;
}

.elementor .container-animated-wrapper {
  border-radius: 28px;
  transition: box-shadow 0.3s ease;
}

.elementor  .container-animated-wrapper:hover {
  box-shadow: 
    0 0 0 2px rgba(77,131,163,0.6),
    0 0 12px rgba(77,131,163,0.6),
    0 0 24px rgba(77,131,163,0.4);
}

/*Button Style*/

.cs-primary-button .elementor-button-icon{
    --btn-size:48px;
 
    right: 16px;
    width:var(--btn-size);
    height:var(--btn-size);
    background: var(--e-global-color-secondary);
   display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin:0 8px 0 16px;
}
.cs-primary-button .elementor-button-icon svg{
    width: 16px;
    height: auto;
	transition:transform ease .3s;
}
.cs-primary-button .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
}

.cs-primary-button:hover .elementor-button-icon svg{
    transform:rotate(45deg);
	transition:transform ease .3s;
}

.cs-slide-icon {
    --icon-width:64px;
    max-width:max-content;
    width:var(--icon-width);
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
/*     border: 1px solid rgba(255, 255, 255, 0.15); */
    background: linear-gradient(180deg, #192832 43.53%, #4D83A3 127.06%), #131C17;
    box-shadow: 0 12px 20px 0 #365466;
    border-radius: 50%;

}

.cs-slide-icon:hover svg {
	width:40px;
	height:auto;
}

.cs-slide-icon:hover, .cs-slide-icon.btn-active {
    background: linear-gradient(0deg, #4D83A3 0%, #4D83A3 100%), #131C17;
   
}

.cs-slide-icon:hover svg path , .cs-slide-icon.btn-active svg path {
    fill:#ffffff !important;
     transition: all ease .4s;
}

.cs-slide-icon.btn-active{
	border: 1px solid #ffffff;	
}


/* The Main Container */
.cs-hero-slide-content {
    display: grid !important;
    grid-template-columns: 100%;
    align-items: center;
    position: relative;
    overflow: hidden;
 
}

/* The Image Wrappers */
.cs-hero-slide-image {
    grid-area: 1 / 1 / 2 / 2; /* All images occupy the same space */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    filter: blur(5px);
    transition: 
        opacity 0.7s ease, 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s ease;
}

/* Entering Animation */
.cs-hero-slide-image.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0px);
    z-index: 2;
}

/* Button UI Feedback */
.cs-slide-icon { cursor: pointer; transition: 0.3s; }
.cs-slide-icon.btn-active svg { transform: scale(1.15); }

/* FAQs */
.faqs .elementor-element.e-con-full.e-flex.e-con.e-child {
    margin-top: -30px;
}