* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    overflow-x: hidden
}

#navbar.scrolled {
    max-width: 1100px;
    margin-top: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 25px rgba(31, 41, 55, .12);
    backdrop-filter: blur(14px)
}

#navbar.scrolled a,
#navbar.scrolled button {
    color: #1f2937
}

#navbar.scrolled .nav-brand {
    color: #1f2937
}

.hero-bg {
    background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=85') center/cover
}

.cta-bg {
    background: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1800&q=80') center/cover
}

.floating-shape {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite
}

.search-card {
    transition: transform .25s, box-shadow .25s
}

.search-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 50px rgba(0, 0, 0, .2)
}

.property-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    transition: transform .25s, box-shadow .25s
}

.property-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 30px rgba(31, 41, 55, .12)
}

.property-card:hover img,
.location-card:hover img,
.agent-card:hover img {
    transform: scale(1.08)
}

.property-card img {
    height: 190px;
    width: 100%;
    object-fit: cover;
    transition: transform .45s
}

.feature-card {
    padding: 28px;
    border-radius: 14px;
    background: white;
    transition: .25s
}

.feature-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: #ecfdf5
}

.feature-card svg {
    color: #D4AF37
}

.feature-card h3 {
    margin-top: 18px;
    font-weight: 600
}

.feature-card p {
    margin-top: 8px;
    font-size: .875rem;
    color: #6b7280
}

.location-card {
    position: relative;
    height: 270px;
    overflow: hidden;
    border-radius: 14px
}

.location-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s
}

.location-card div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 22px;
    background: linear-gradient(transparent, rgba(31, 41, 55, .86));
    color: white
}

.testimonial {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
    transition: transform .25s
}

.testimonial:hover {
    transform: rotate(-1.2deg) translateY(-4px)
}

.testimonial p:nth-child(2) {
    margin: 18px 0;
    line-height: 1.7;
    color: #4b5563
}

.testimonial strong,
.testimonial span {
    display: block
}

.testimonial span {
    font-size: .85rem;
    color: #6b7280
}

footer a {
    display: block;
    margin-top: 10px;
    font-size: .875rem;
    transition: color .2s
}

footer a:hover {
    color: #10b981
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(17, 24, 39, .7);
    padding: 20px;
    animation: fade .2s
}

.modal-panel {
    position: relative;
    width: min(100%, 430px);
    border-radius: 16px;
    background: white;
    padding: 32px;
    animation: slide .25s
}

.modal-panel h2 {
    font-size: 1.5rem;
    font-weight: 700
}

.modal-panel>div>p:first-of-type {
    margin-top: 5px;
    font-size: .9rem;
    color: #6b7280
}

.modal-panel input:not([type=checkbox]) {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px;
    outline-color: #10b981
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 28px;
    color: #6b7280
}

.mobile-menu a,
.mobile-menu button {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: .95rem
}

.fade-up {
    animation: slide .7s ease both
}

@keyframes slide {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes float {
    50% {
        transform: translateY(-18px)
    }
}