/* Photo URLs as CSS Variables */
:root {
    /* Hero Section - Bright and positive family/success images */
    --hero-family: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=2000&q=80');
    
    /* Features Section - Clear, well-lit activity photos */
    --home-photo: url('https://images.unsplash.com/photo-1560440021-33f9b867899d?auto=format&fit=crop&w=1500&q=80');
    --education-photo: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1500&q=80');
    --business-photo: url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1500&q=80');
    
    /* Benefits Section - Bright success moments */
    --success-photo: url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1500&q=80');
    
    /* Form Section - Light, positive background */
    --form-bg: url('https://images.unsplash.com/photo-1565843714144-d5a3292ae82d?auto=format&fit=crop&w=2000&q=80');
}

/* Photo Container Styles */
.photo-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-container:hover img {
    transform: scale(1.05);
}

/* Specific Section Styles */
.hero-photo {
    height: 500px;
    background-image: var(--hero-family);
    background-size: cover;
    background-position: center;
    border-radius: 24px;
}

.feature-photo {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.feature-photo.home {
    background-image: var(--home-photo);
}

.feature-photo.education {
    background-image: var(--education-photo);
}

.feature-photo.business {
    background-image: var(--business-photo);
}

.benefits-photo {
    height: 400px;
    background-image: var(--success-photo);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.form-bg-photo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--form-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-photo {
        height: 300px;
    }
    
    .feature-photo {
        height: 200px;
    }
    
    .benefits-photo {
        height: 300px;
    }
}