/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

.container-fluid {
    max-width: 900px;
    text-align: center;
    background-color: #ead0ad;
    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: normal;
    font-style: normal;
    font-size: medium;
}

.content {
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    border: 1px solid #9E6921;
    background-color: #F1DABB;
}

.church-footer {
    background-color: #8f6632;
    background: url(../images/footer.jpg) center repeat-x;
    background-size: auto 100%;
    color: #FFFFFF;
    font-weight: lighter;
    padding-top: 1.1rem;
}

.menuStyle {
    font-family: "Noto Sans", Arial, Helvetica, "Times New Roman";
    font-weight: bold;
    font-size: small;
}

.titleStrong {
    color: #993300;
    font-weight: bold;
    font-size: medium;
}

.pageTitle {
    text-align: left;
    font-weight: bold;
    color: #993300;
    font-size: large;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 1px #FFFFFF;
}

.langMenuOption {
    font-family: "Noto Sans", Arial, Helvetica, "Times New Roman";
    font-weight: bold;
    text-decoration: none;
    color: #286CB7;
    font-size: smaller;
}

.table-responsive table {
    --bs-table-bg: #F1DABB !important;
}

.table-bordered td {
    border: 1px solid #E9CB9E !important;
}

.verseStyle {
    color: #993300;
    font-size: small;
}

.text-justify {
    text-align: justify !important;
}

.facebook-icon-color {
    color: rgba(24, 119, 242, 1) !important;
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bi-facebook:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    cursor: pointer;
}

.youtube-icon-color {
    background: linear-gradient(135deg, #FF0000, #CC0000);

    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    /* Fallback for browsers that don't support background-clip */

    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bi-youtube:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    cursor: pointer;
}

.instagram-icon-color {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;

    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bi-instagram:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    cursor: pointer;
}

.globe-icon-color {
    color: rgba(0, 180, 219, 1);
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bi-globe:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    cursor: pointer;
}

.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee {
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    display: inline-block;
    padding-left: 100%;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.dropdown-menu.scrollable-dropdown {
    overflow-y: auto;
    /* required for scrolling support */
    border-radius: 0 !important;
    max-height: calc(8 * 2.5rem);
    /* fallback */
}

@supports (max-height: calc(1lh * 1)) {
    .dropdown-menu.scrollable-dropdown {
        max-height: calc(8 * 1lh);
        /* modern browsers */
    }
}

.instagram-media,
.instagram-media[style],
iframe.instagram-media-rendered[style] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
}

.instagram-crop-container {
    overflow: hidden;
    position: relative;
}

.instagram-crop-container .instagram-media {
    margin-top: -55px !important;
    margin-bottom: -155px !important;
}

.instagram-crop-container iframe.instagram-media-rendered {
    margin-top: -55px !important;
    margin-bottom: -155px !important;
}