.elementor-5922 .elementor-element.elementor-element-843a311{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:26px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5922 .elementor-element.elementor-element-7ea381b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5922 .elementor-element.elementor-element-de9e8b4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-5922 .elementor-element.elementor-element-ed62062{--spacer-size:50px;}/* Start custom CSS for html, class: .elementor-element-0c926ca *//* Banner Container */
.website-themed-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #4f8cf7, #764ba2); /* Blue to purple gradient */
  color: #ffffff;
  padding: 20px 15px; /* Keep compact padding */
  border-radius: 16px; /* Rounded corners */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Text Section */
.banner-content {
  max-width: 60%; /* Increase space for text */
  z-index: 2; /* Keep text above background elements */
  padding-left: 30px; /* Add padding from the left */
}

.banner-content h1 {
  font-size: 36px; /* Heading size for desktop */
  font-weight: 700;
  line-height: 1.3; /* Slightly increase line height for readability */
  margin: 0 0 15px; /* Add more space below the heading */
}

.banner-content h1 span {
  color: #c3e0ff; /* Light blue for emphasis */
}

.banner-subtext {
  font-size: 18px; /* Subtext size for desktop */
  font-weight: 500;
  margin-bottom: 20px; /* Add spacing below the subtext */
  opacity: 0.9; /* Slight transparency */
}

/* Illustration Section */
.banner-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.banner-image img {
  max-width: 350px; /* Larger illustration size for desktop */
  height: auto;
  position: relative;
  z-index: 2;
  animation: float 6s infinite ease-in-out; /* Vertical and horizontal floating animation */
}

/* Floating Animation for Illustration */
@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(10px, -10px); /* Slight diagonal top-right */
  }
  50% {
    transform: translate(0px, -15px); /* Vertical up */
  }
  75% {
    transform: translate(-10px, -10px); /* Slight diagonal top-left */
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .website-themed-banner {
    flex-direction: row; /* Maintain row layout */
    padding: 15px 10px; /* Smaller padding for mobile */
  }

  .banner-content {
    max-width: 55%; /* Reduce text width for smaller screens */
    padding-left: 10px; /* Smaller left padding */
  }

  .banner-content h1 {
    font-size: 24px; /* Reduced heading size for mobile */
    line-height: 1.2; /* Tighter line spacing */
  }

  .banner-subtext {
    font-size: 14px; /* Slightly reduced subtext size for mobile */
  }

  .banner-image {
    max-width: 45%; /* Adjust image container size */
  }

  .banner-image img {
    max-width: 160px; /* Increased image size for mobile */
    animation: float-mobile 6s infinite ease-in-out; /* Adjusted floating for mobile */
  }
}

/* Mobile-Specific Floating Animation */
@keyframes float-mobile {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -10px); /* Smaller vertical movement */
  }
  100% {
    transform: translate(0px, 0px);
  }
}/* End custom CSS */