/*
 * Yewodze Enterprise - Yellow Banner Styles
 * Applied to all page headers across the website
 */

/* Common Yellow Banner Styles */
.page-header,
.about-header,
.products-header,
.testimonials-header,
.faqs-header,
.contact-header,
section.about-header,
section.products-header,
section.testimonials-header,
section.faqs-header,
section.contact-header {
    background: #ffd700 !important; /* Bright yellow */
    background-color: #ffd700 !important; /* Bright yellow */
    background-image: none !important;
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

/* Remove any existing background images or gradients */
.page-header::before,
.about-header::before,
.products-header::before,
.testimonials-header::before,
.faqs-header::before,
.contact-header::before {
    background-image: none !important;
    background: none !important;
}

/* Update text colors to black */
.page-header .page-title,
.about-header .page-title,
.products-header .page-title,
.testimonials-header .page-title,
.faqs-header .page-title,
.contact-header .page-title {
    color: #000000 !important;
    text-transform: capitalize !important;
    text-shadow: none !important;
    position: relative;
    z-index: 1;
    font-size: 3rem !important;
    font-weight: 700 !important;
}

.page-header .lead,
.about-header .lead,
.products-header .lead,
.testimonials-header .lead,
.faqs-header .lead,
.contact-header .lead {
    color: #000000 !important;
    text-shadow: none !important;
    position: relative;
    z-index: 1;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
}

/* Ensure overlay is yellow */
.hero-overlay,
.page-header .overlay,
.about-header .overlay,
.products-header .overlay,
.testimonials-header .overlay,
.faqs-header .overlay,
.contact-header .overlay,
.about-header::before,
.products-header::before,
.testimonials-header::before,
.faqs-header::before,
.contact-header::before,
.hero-overlay::before,
.page-header::before {
    background-color: #ffd700 !important;
    background-image: none !important;
    background: #ffd700 !important;
    opacity: 0 !important;
}

/* Floating shapes styling */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    background-color: rgba(46, 139, 87, 0.25); /* Green shapes on yellow background */
    border-radius: 50%;
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    animation: float 15s infinite alternate;
}

.shape-2 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: -100px;
    animation: float 12s infinite alternate-reverse;
}

.shape-3 {
    width: 150px;
    height: 150px;
    bottom: -75px;
    left: 30%;
    animation: float 10s infinite alternate;
}

.shape-4 {
    width: 100px;
    height: 100px;
    top: 20%;
    right: 20%;
    animation: float 8s infinite alternate-reverse;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(30px, 30px) rotate(15deg);
    }
}