/*
 * =================================================================
 * HERO SECTION BACKGROUND - EASY CUSTOMIZATION
 */

/*
.hero-section {
    background: linear-gradient(135deg, rgba(25, 125, 0, 0.85) 0%, rgba(20, 92, 0, 0.90) 100%),
                url('../images/your-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}
*/


/* =================================================================
   OPTION 2: Solid Green Gradient (No Image)
   =================================================================
   Simple, clean, fast loading
   ================================================================= */

/*
.hero-section {
    background: linear-gradient(135deg, #197d00 0%, #145c00 100%) !important;
    background-size: cover !important;
}

.hero-section::before {
    background-image: none !important;
    animation: none !important;
}
*/


/* =================================================================
   OPTION 3: Beautiful Background Image (CURRENTLY ACTIVE)
   =================================================================
   Professional house image with elegant light overlay
   ================================================================= */

.hero-section {
    /* VERY LIGHT white overlay - bright and beautiful! */
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.10) 100%),
        url('../images/home-hero-3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
}

/* Add a subtle vignette effect only at edges */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 0;
}


/* =================================================================
   OPTION 4: Green with House Illustration
   =================================================================
   Includes a subtle house silhouette on the right side
   ================================================================= */

/*
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -5%;
    width: 55%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500"%3E%3Cg fill="white" opacity="0.1"%3E%3Cpath d="M200 200 L300 130 L400 200 L400 400 L200 400 Z"/%3E%3Cpath d="M180 200 L300 110 L420 200 L400 200 L300 130 L200 200 Z"/%3E%3Crect x="340" y="150" width="30" height="50"/%3E%3Crect x="230" y="240" width="50" height="60" opacity="0.3"/%3E%3Crect x="310" y="240" width="50" height="60" opacity="0.3"/%3E%3Crect x="340" y="320" width="50" height="80" opacity="0.4"/%3E%3C/g%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    animation: gentleFloat 20s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
*/


/* =================================================================
   OPTION 5: Upload Your Own + Overlay Adjustment
   =================================================================
   Use this if your image is too bright or too dark
   Adjust the rgba values to control darkness (0.7 = 70% dark)
   ================================================================= */

/*
.hero-section {
    background: linear-gradient(135deg, rgba(25, 125, 0, 0.7) 0%, rgba(20, 92, 0, 0.8) 100%),
                url('../images/your-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}
*/


/* =================================================================
   OPTION 6: Heizöl-Themed Background (Oil/Energy)
   =================================================================
   Modern abstract design with droplet pattern
   ================================================================= */

/*
.hero-section {
    background: linear-gradient(135deg, rgba(25, 125, 0, 0.90) 0%, rgba(20, 92, 0, 0.92) 100%),
                url('data:image/svg+xml,%3Csvg width="200" height="200" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="drops" width="100" height="100" patternUnits="userSpaceOnUse"%3E%3Cellipse cx="25" cy="50" rx="8" ry="12" fill="rgba(255,255,255,0.05)"/%3E%3Cellipse cx="75" cy="30" rx="6" ry="10" fill="rgba(255,255,255,0.04)"/%3E%3Cellipse cx="50" cy="80" rx="7" ry="11" fill="rgba(255,255,255,0.06)"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="100%25" height="100%25" fill="url(%23drops)"/%3E%3C/svg%3E') !important;
    background-size: cover !important;
}
*/

/* =================================================================
   ENHANCEMENTS FOR BACKGROUND IMAGE - Makes everything look perfect!
   ================================================================= */

/* Enhanced text with elegant shadows - works beautifully with light overlay */
.hero-section h1,
.hero-section .hero-title {
    color: #ffffff !important;
    text-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.8),
        0 6px 24px rgba(0, 0, 0, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.9) !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px;
}

.hero-section .lead,
.hero-section .hero-subtitle,
.hero-section p {
    color: #ffffff !important;
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.9) !important;
    font-weight: 500 !important;
}

/* Enhanced calculator card - stands out beautifully */
.calculator-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* SOLID trust badges - completely isolated from background! */
.trust-badge {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: #333 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.trust-badge:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(25, 125, 0, 0.3) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.trust-badge i {
    color: var(--primary-color, #197d00) !important;
    filter: none;
    font-weight: bold;
}

.trust-badge span {
    color: #333 !important;
    text-shadow: none !important;
}

/* Better bottom fade to white page */
.hero-section::after {
    background: linear-gradient(to top, 
        #ffffff 0%, 
        rgba(255, 255, 255, 0.9) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%) !important;
    height: 120px !important;
}

/* Mobile optimization for background image */
@media (max-width: 991px) {
    .hero-section {
        background-attachment: scroll !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        background-position: center center !important;
    }
    
    .hero-section h1,
    .hero-section .hero-title {
        text-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.7),
            0 2px 6px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Mobile trust badges - inline with fit-content */
    .hero-section .trust-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 2rem !important;
        margin-top: 1.5rem !important;
        justify-content: flex-start !important;
    }
    
    .hero-section .trust-badge {
        width: fit-content !important;
        max-width: fit-content !important;
        padding: 0.65rem 0.85rem !important;
        font-size: 0.8rem !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: left !important;
        gap: 0.5rem !important;
        min-height: auto !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    
    .hero-section .trust-badge i {
        font-size: 1.2rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .hero-section .trust-badge span {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}

/* Extra small mobile devices - slightly smaller badges */
@media (max-width: 480px) {
    .hero-section .trust-badge {
        padding: 0.55rem 0.7rem !important;
        font-size: 0.75rem !important;
    }
    
    .hero-section .trust-badge i {
        font-size: 1.1rem !important;
    }
    
    .hero-section .trust-badge span {
        font-size: 0.75rem !important;
    }
}