/* 1. Global Reset & Pro Fonts */
@import url('https://googleapis.com');

:root {
    --fb-blue: #1877F2; /* Classic modern Facebook Blue */
    --bg-gray: #F0F2F5; /* Neutral FB background */
    --card-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { background-color: var(--bg-gray); color: #1c1e21; }

/* 2. Sleek Sticky Navigation */
header {
    background: white;
    padding: 10px 5%;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.logo { color: var(--fb-blue); font-weight: 800; font-size: 1.8rem; letter-spacing: -1.5px; }

/* 3. Immersive Hero with Opacity Overlay */
.hero {
    position: relative;
    padding: 80px 20px;
    background: url('https://unsplash.com'); /* Modern home interior */
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
}

/* Fix for the non-clickable issue: Ensure content is above the overlay */
.hero::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Modern dark opacity layer */
    pointer-events: none; /* Clicks pass through to the search bar */
}

.hero-content { position: relative; z-index: 2; }

/* 4. Modern Bento Search Bar */
.search-container {
    display: flex; max-width: 600px; margin: 30px auto 0;
    background: white; border-radius: 50px; padding: 5px;
    box-shadow: var(--card-shadow);
}

input[type="text"] {
    flex: 1; border: none; padding: 15px 25px; 
    border-radius: 50px 0 0 50px; outline: none; font-size: 1rem;
}

.btn-primary {
    background: var(--fb-blue); color: white; border: none;
    padding: 12px 30px; border-radius: 50px; font-weight: 700; cursor: pointer;
}

/* 5. FB-Style Feed Cards */
.service-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px; padding: 40px 5%;
}

.card {
    background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover { transform: scale(1.01); box-shadow: var(--card-shadow); }

.card img { width: 100%; height: 200px; object-fit: cover; }

.card-content { padding: 16px; }

.price-range strong { color: var(--fb-blue); font-size: 1.3rem; }

.btn-outline {
    width: 100%; padding: 10px; border-radius: 6px; border: none;
    background: #E4E6EB; color: #050505; font-weight: 600; cursor: pointer;
}

.btn-outline:hover { background: #D8DADF; }