body {
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.header {
    margin-bottom: 6px;
    min-height: 50px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2)
}

.filtered-blue-cloud-background {
    position: relative;
    z-index: 0;
}

.filtered-blue-cloud-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/wedding-program-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    filter: opacity(88%);
    z-index: -1;
}

.blue-cloud-background {
    background-image: url('../img/wedding-program-background.jpg');
    background-size: cover;
    background-repeat: repeat;
}

.card-shadow {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.hover-highlight {
    transition: all 0.3s ease;
}

.hover-highlight:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    filter: brightness(110%) drop-shadow(6px 7px 7px #e0e0e0)
}

.img-wrapper {
    overflow: hidden;
}

.btn-shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.img-zoom {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.header-title {
    font-size: 36px;
    font-family: 'Great Vibes', cursive;
}

.contact-card {
    width: 75%;
}

@media (max-width: 440px) {
    .header-title {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .contact-card {
        width: 95%;
    }
}