/* Hero Section Custom Styles */

/* Make hero section full width */
.elementor-section.hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 80px 0 !important;
    position: relative;
    overflow: hidden;
}

/* Background wave effect similar to founderplaybook */
.hero-section:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f5f5f5' fill-opacity='0.2' d='M0,96L48,122.7C96,149,192,203,288,208C384,213,480,171,576,165.3C672,160,768,192,864,197.3C960,203,1056,181,1152,154.7C1248,128,1344,96,1392,80L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}

/* Headline styling */
.hero-section .hero-headline {
    font-size: 4.5rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

/* Colored Text Highlight */
.hero-section .highlight-text {
    color: #4c5aef !important;
    font-weight: 900 !important;
}

/* Subheadline styling */
.hero-section .hero-subheadline {
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin-bottom: 30px !important;
    color: #333 !important;
}

/* Feature list styling */
.hero-section .feature-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    font-size: 1.2rem !important;
}

.hero-section .feature-item i {
    margin-right: 12px !important;
    color: #4c5aef !important;
    font-size: 1.4rem !important;
}

/* Call-to-action button */
.hero-section .cta-button {
    padding: 15px 40px !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background-color: #4c5aef !important;
    color: white !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
    box-shadow: 0 5px 15px rgba(76, 90, 239, 0.3) !important;
}

.hero-section .cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(76, 90, 239, 0.4) !important;
}

/* Social proof section */
.hero-section .social-proof {
    margin-top: 30px !important;
    display: flex !important;
    align-items: center !important;
}

.hero-section .avatar-group {
    display: flex !important;
    margin-right: 15px !important;
}

.hero-section .avatar-group img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    margin-right: -15px !important;
}

/* Hero image container */
.hero-section .hero-image-container {
    position: relative !important;
    padding-top: 40px !important;
}

/* Create an animated floating effect for the hero image */
.hero-section .hero-image {
    animation: float 6s ease-in-out infinite !important;
    box-shadow: 0 25px 30px rgba(0,0,0,0.1) !important;
    border-radius: 20px !important;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-section .hero-headline {
        font-size: 3.5rem !important;
    }
    
    .hero-section .hero-subheadline {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 767px) {
    .hero-section .hero-headline {
        font-size: 2.5rem !important;
    }
    
    .hero-section .hero-subheadline {
        font-size: 1.2rem !important;
    }
    
    .hero-section {
        padding: 60px 20px !important;
    }
    
    .hero-section .hero-image-container {
        margin-top: 40px !important;
    }
}