section.banner:first-of-type {
    padding-top: 188px !important;
}

section.town{
    .row{
        gap: 24px 0;
    }
}

.town_cards {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Create an overlay for the hover image */
.town_cards::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use the variable defined in PHP */
    background-image: var(--hover-bg); 
    background-size: cover;
    background-position: top;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1; /* Keep it behind the text */
}

/* Show image on hover */
.town_cards:hover::before {
    opacity: 1;
}

/* Ensure content stays readable */
.town_cards .content, 
.town_cards .location {
    position: relative;
    z-index: 2;
}

/* 1. Change general text color on hover */
.town_cards:hover,
.town_cards:hover h2,
.town_cards:hover p,
.town_cards:hover .gold_text,
.town_cards:hover span.location {
    color: #141311 !important;
    transition: color 0.3s ease;
}

.town_cards:hover span.location,
.town_cards:hover span.gold_text {
    background: #141311 !important;
    background-clip: text;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

/* 2. Update CTA Button colors on hover */
.town_cards:hover .cta_btn {
    background: #FFFFFF !important;
    color: #B57C00 !important;
    border-color: #FFFFFF !important; /* Optional: matches bg if there's a border */
    transition: all 0.3s ease;
}

.town_cards .cta_btn:hover {
    color: #432C07 !important;
}

/* 3. Change SVG icon color on hover */
/* We target the path inside the SVG to override the linear gradient */
.town_cards:hover svg path {
    fill: #141311 !important;
    transition: fill 0.3s ease;
}

/* Optional: Smooth transition for the horizontal rule if you want it to match */
.town_cards:hover .hr-2 {
    background: #141311 !important;
}


section.banner.contact-information .cta_btn {
    margin: auto;
}