.hero {
    background:url('../images/hero.JPG') center/cover no-repeat;
    height:500px; display:flex; align-items:center; justify-content:center;
    color:#fff; text-align:center; position:relative;
}
.hero-text h1 { font-size:48px; margin-bottom:24px; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.search-form { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.search-form input, .search-form button { padding:10px 14px; border-radius:8px; border:none; }
.search-form button { background:#ff385c; color:#fff; cursor:pointer; }
.search-form button:hover { background:#e52c50; }

.popular-destinations { padding:40px 20px; text-align:center; }
.destination-cards { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.destination-cards .card { background:#fff; padding:40px 20px; border-radius:12px; text-decoration:none; color:#333; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,0.05); }

.featured-listings { padding:40px 20px; }
.listing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.listing-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.05); }
.listing-card img { width:100%; height:160px; object-fit:cover; }
.listing-info { padding:12px; }

.how-it-works { background:#f7f7f8; padding:40px 20px; text-align:center; }
.steps { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.step { background:#fff; padding:20px; border-radius:12px; width:180px; box-shadow:0 4px 20px rgba(0,0,0,0.05); }

.cta-host { padding:40px 20px; text-align:center; background:#ff385c; color:#fff; }
.btn-cta { display:inline-block; padding:12px 20px; border-radius:10px; background:#fff; color:#ff385c; font-weight:600; text-decoration:none; margin-top:12px; }
.btn-cta:hover { background:#f2f2f2; }

.destination-round-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 20px 0;
}

.round-card {
    width: 120px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.round-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.25s ease;
}

.round-card:hover img {
    transform: scale(1.08);
}

.round-card span {
    display: inline-block;
    margin-top: 8px;
}