.banner {
    position: relative;
    background-image: url('/images/keys.jpg');
    background-size: cover;
    background-position: center;
    aspect-ratio: 3/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden; /* This is important to prevent bleed */
}

.banner-content {
    z-index: 2;
    padding: 2rem;
    width: 100%;
    text-align: left;
}

@media (max-width: 768px) {
    .banner{
        aspect-ratio: unset !important;   /* Best neutraliser */
        height: 300px !important;           /* Or whatever works well visually */
    }
    .banner-content {
        text-align: center;
    }
}


.custom-bottom-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 11vw;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMXZ3IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMGwtMjY2IDkxLjUyYTcyLjU5IDcyLjU5IDAgMCAxLTMwLjc2IDMuNzFMMCAwdjE0MGgxMjgweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDBsLTI2Mi4xIDExNi4yNmE3My4yOSA3My4yOSAwIDAgMS0zOS4wOSA2TDAgMHYxNDBoMTI4MHoiLz48L2c+PC9zdmc+");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transform: scale(-1, 1);
    pointer-events: none;
}





.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* semi-transparent dark overlay */
    z-index: 0;
}
.banner > .container {
    position: relative;
    z-index: 2;
}



iframe.map {
  border: none;
  height: 500px;
  width: 100%;
  margin-bottom: 30px;
}