/* ============================================
   HERO SECTION WITH FORM
   ============================================ */
.hero-content-with-form {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: space-between;
}

.hero-container {
    padding: 0 10px;
}

.hero-text {
    flex: 1;
    color: #c9d6e2;
}

.hero-text h1 {
    color: #c9d6e2 !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-text p {
    color: #c9d6e2;
    font-size: 20px;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-form {
    flex: 0 0 420px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Hide service selection rows initially - they appear when clicking "Add Service" */
.hero-form .service-pricing-col {
    display: none !important;
}

/* Keep the Add Service button visible */
.hero-form button[onclick*="add_service"],
.hero-form a[onclick*="add_service"],
.hero-form .add-service-btn {
    display: inline-block !important;
}

/* Fix "Add Another Service" button text to show "Add Service" instead */
.hero-form button[onclick*="add_service"],
.hero-form a[onclick*="add_service"] {
    font-size: 0 !important;
    line-height: 0;
}

.hero-form button[onclick*="add_service"]::before,
.hero-form a[onclick*="add_service"]::before {
    content: 'Add Service';
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    display: inline-block;
}

/* Preserve icons in the button */
.hero-form button[onclick*="add_service"] *,
.hero-form a[onclick*="add_service"] * {
    font-size: 16px !important;
    line-height: normal !important;
}


/* Update hero section for darker overlay */
.hero-section {
    min-height: 600px !important;
}

.hero-section::before {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)) !important;
}

.hero-container {
    text-align: left !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-content-with-form {
        flex-direction: column;
        gap: 30px;
    }

    .hero-text {
        text-align: center;
    }

    .hero-form {
        flex: 1 1 auto;
        width: 100%;
        max-width: 500px;
        padding: 30px 10px;
    }
}