@charset "UTF-8";

/*
Smaller smartphones (< 480px)
Larger smartphones/tablets (480px - 768px)
Tablets (768px - 1024px)
Laptops/desktops (1024px+)
*/

:root,
[data-my-theme=main] {
    --my-font-monospace: "Courier New", monospace;
    --my-header-gradient: radial-gradient(53% 465% at 48% 117%, #FCF1E3 22.39%, rgba(150, 143, 135, 0.6));
    --my-footer-gradient: radial-gradient(53% 465% at 48% 117%, #FCF1E3 22.39%, rgba(150, 143, 135, 0.6));
    --my-body-font-family: 'Cormorant Garamond', Arial, sans-serif;
    --my-font-montserrat: 'Montserrat', "Courier New", monospace;
    --my-body-color: #000;
    --my-body-bg: #FCF1E3;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--my-body-font-family);
    margin: 0;
    padding: 0;
    background-color: var(--my-body-bg);
    color: var(--my-body-color);
}

.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: #CDA87D;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #CDA87D;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #0d6efd;
    --bs-btn-active-bg: #CDA87D;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #CDA87D;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #CDA87D;
    --bs-gradient: none;
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #ece4d4;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #0d6efd;
    --bs-btn-hover-bg: #ece4d4;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #0d6efd;
    --bs-btn-active-bg: #ece4d4;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ece4d4;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ece4d4;
    --bs-gradient: none;
}

.btn-outline-primary {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FCF1E3;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #0d6efd;
    --bs-btn-active-bg: #FCF1E3;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FCF1E3;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FCF1E3;
    --bs-gradient: none;
}

.lang-btn {
    border: none;
    background: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 18px;
}

    .lang-btn img {
        width: 24px;
        height: 16px;
        margin: 0 5px;
    }

    .lang-btn:focus {
        outline: none;
    }

header, nav, main, footer {
    padding: 20px;
    margin-bottom: 20px;
}

header {
    background: var(--my-header-gradient) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    /* font-family: 'Montserrat', Arial, sans-serif; */
    /* color: #000; */
    border-bottom: 1px solid #000;
}


    header h1 {
        margin: 0;
        font-size: 1.875em; /* 30px; Equivalent to 1.875em */
    }

    header address {
        font-size: 1.75em;
    }

nav ul {
    font-family: var(--my-font-montserrat);
    font-size: 1.75em;
    font-weight: bold;
    list-style: none;
    padding: 0;
}

    nav ul li {
        /* display: inline;
    margin-right: 10px; */
    }

        nav ul li a {
            /* text-decoration: none;
    color: #333; */
        }

main h1, main h2 {
    font-family: var(--my-body-font-family);
    font-size: 1.125em;
}

main h1 {
    font-size: 2.125em;
}

main h3 {
    font-size: 1.75em;
}

main section {
    font-family: var(--my-font-montserrat);
    font-size: 1.125em;
    margin-bottom: 20px;
}

.card {
    background-color: inherit;
    border: none;
    font-family: var(--my-font-montserrat);
}

.owl-item img {
    margin-bottom: 30px; /* Adjust as needed */
}

/*.owl-item {
    width: 368px !important;
    height: 217px !important;
}*/

.church-calendar .toastui-calendar-layout {
    background-color: var(--my-body-bg) !important;
    font-family: var(--my-font-montserrat) !important;
    font-size: 1.25em !important;
}
.church-calendar .toastui-calendar-day-names {
    background-color: var(--my-body-bg) !important;
}
.church-calendar .toastui-calendar-day-name-item {
    font-size: 1.8em !important;
}

.church-calendar .toastui-calendar-day-name-item {
    font-size: 1.8em !important;
}

.church-calendar .toastui-calendar-daygrid-cell {
    background-color: #DCCFBE !important;
    padding: 3px 3px;
}



footer {
    background: var(--my-footer-gradient);
    font-family: var(--my-font-montserrat);
    color: #000;
}

    footer h3 {
        font-size: 1.35em;
    }

.google-map iframe {
    height: 450px;
    width: 100%;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    header h1 {
        margin: 0;
        font-size: 1.125em;
    }

    header address {
        font-size: 1.00em; /* 16px; Equivalent to 1.0 em */
    }

    .logo .img-fluid {
        max-width: 170%;
        height: auto
    }

    .card .row > div.col-md-8 {
        order: 2;
    }

    .card .row > div.col-md-4 {
        order: 1;
    }

    .google-map {
        padding-bottom: 33.33%; /* 1:1 aspect ratio for very small screens */
    }
}