/*
 Theme Name:   Solace Child
 Template:     solace
 Description:  Child theme for the Solace theme
 Author:       Your Name
 Version:      1.0.0
*/

/* Add your custom CSS below */
header .button.solace-component-button-customizer.button-primary.button1 {
    background: linear-gradient(to right, rgb(237, 75, 83), rgb(255, 118, 76)) !important;
}

body,
body *:not(.fa):not(.fab):not(.fas):not(.far) {
    font-family: 'Montserrat', Verdana, Arial, sans-serif;
}

/* Optional: Ensure form inputs use the same font */
input, 
textarea, 
select, 
button {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

.btn, .button.button-primary, .is-style-primary .wp-block-button__link, 
button, input[type=button], input[type=reset], input[type=submit] {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 10px 0px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    letter-spacing: 1px;
    transition: 0.2s;
    background: rgb(51, 52, 86);
    border-width: 1px;
    border-radius: 2rem;
    border-style: solid;
    text-transform: none;
    color: rgb(255, 255, 255); /* Added for better contrast */
    
}

.btn:hover, .button.button-primary:hover, .is-style-primary .wp-block-button__link:hover, 
button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background: linear-gradient(to right, rgb(136, 23, 28), rgb(136, 23, 28));
    color: rgb(255, 255, 255);
    transition: 0.2s;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px 0px; /* Slightly stronger shadow on hover */
    transform: translateY(-1px); /* Optional: Adds subtle lift effect */
}
.elementor-60 .elementor-element.elementor-element-78f649c0 {
    background-image: url('https://yourworldeducationlab.com/wp-content/uploads/2025/05/background.webp') !important;
}





.nav-ul li {
	margin: 0px 2rem;
}

/* Style updates for mobile responsiveness */
@media (max-width: 767px) {
  .elementor-slide-heading {
    font-size: 60px; /* Smaller fixed size for mobile */
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
  }
}

/* Add additional layers to ensure proper stacking context */
.elementor-slides .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}/* Make the slide container position relative to properly position elements */
.elementor-slides .swiper-slide {
  position: relative;
  overflow: hidden;
}

/* Style for the large transparent text with white outline */
.elementor-slide-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center position when not animated */
  font-size: 112px; /* Fixed size as requested */
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;
  z-index: 0; /* Lower z-index to place behind the image */
  white-space: normal; /* Allow text to wrap */
  text-align: center; /* Center the text */
  width: 100%; /* Full width to allow proper line breaks */
  opacity: 0.8;
  letter-spacing: 3px;
  animation: textSlide 2s ease-out forwards;
 /* Faster animation that stops at the end */
  word-break: break-word; /* Break words properly */
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1; /* Better spacing for stacked text */
}

/* Make the slide content visible */
.swiper-slide-contents {
  display: block !important;
  position: relative;
  z-index: 0; /* Lower z-index for the text container */
  width: 100%;
}

/* Image styling */
.swiper-slide-bg {
  background-size: cover;
  background-position: center;
  animation: imageSlide 15s ease infinite;
  position: relative;
  z-index: 1; /* Higher z-index to place image in front of text */
}

/* Animation for text movement (left to center) - faster motion */
@keyframes textSlide {
  0% {
    transform: translate(-100%, -50%); /* Start from far left */
  }
  70% {
    transform: translate(-50%, -50%); /* End at center */
  }
  100% {
    transform: translate(-50%, -50%); /* Stay at center */
  }
}

/* Animation for image movement (bottom to top) */
@keyframes imageSlide {
  0% {
    background-position: center bottom;
  }
  100% {
    background-position: center top;
  }
}
.elementor-slide-heading{
	width: 82rem;
	font-family: arial !important;
}
/* Reset animations when slide changes */
.swiper-slide-active .elementor-slide-heading {
   animation: textSlide 2s ease-out forwards;
}

.swiper-slide-active .swiper-slide-bg {
  animation: imageSlide 8s ease-out forwards;
}

/* Make sure non-active slides don't show animations */
.swiper-slide:not(.swiper-slide-active) .elementor-slide-heading,
.swiper-slide:not(.swiper-slide-active) .swiper-slide-bg {
  animation: none;
}