:root {
        --color-bg: #f8f1e9;
        --color-text: #3d2f1e;
        --color-accent: #8b9a6f;
        --color-dark: #5c4b3e;
        --color-muted: #7a6a5a;
    }
    .hero-villas {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 65vh;
        color: white;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    }
    .card-villa {
        border: none;
        border-radius: 0;
        overflow: hidden;
        background: white;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }
    .card-villa:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
    }
    .card-villa .position-relative {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #e9e2d8;
    }
    .card-villa .card-img-top {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .card-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 55%);
    }
    .btn-outline-accent {
        color: var(--color-accent);
        border-color: var(--color-accent);
        border-radius: 50rem;
    }
    .btn-outline-accent:hover {
        background-color: var(--color-accent);
        color: white;
    }

    @media (max-width: 767.98px) {
        .card-villa .position-relative {
            aspect-ratio: 4 / 3;
        }
    }