/* MODIFY BOOTSTRAP THEMEING */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

html, body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

body {
    background: #F8F1E8;
}

header {

}

/* Override Display Classes */
.display-1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
}

.display-2 {
    font-size: 3rem !important;
    font-weight: 500 !important;
}

.display-3 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
}

.display-4 {
    font-size: 2.25rem !important;
    font-weight: 500 !important;
}

.display-5 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.display-6 {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
}

/* Override Bootstrap primary color with #DA6635 */
.btn-primary,
.bg-primary,
.text-primary,
.border-primary {
    background-color: #DA6635 !important;
    border-color: #DA6635 !important;
    color: #fff !important;
}

.text-primary {
    color: #DA6635 !important;
}

.bg-primary {
    background-color: #DA6635 !important;
}

.border-primary {
    border-color: #DA6635 !important;
}

.bg-body-secondary {
    background-color: #DBCE76 !important;
}

/* Override Bootstrap secondary color with #416C65 */
.btn-secondary,
.bg-secondary,
.text-secondary,
.border-secondary {
    background-color: #416C65 !important;
    border-color: #416C65 !important;
    color: #fff !important;
}

.text-secondary {
    color: #416C65 !important;
}

.bg-secondary {
    background-color: #416C65 !important;
}

.border-secondary {
    border-color: #416C65 !important;
}

:root {
    --bs-light: #F8F1E8;
    --bs-light-rgb: 248, 241, 232;
    --bs-dark: #0F2F2E;
    --bs-dark-rgb: 15, 47, 46;
    --bs-body-font-weight: 300;
    --bs-heading-color: #0F2F2E;
    --bs-body-color: #0F2F2E;
    --bs-body-color-rgb: 15, 47, 46;
}

/* CUSTOM STYLES FOR HEADERS */

.video-header {
    position: relative;
    background-color: black;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

.image-header {
    position: relative;
    background-color: black;
    height: 50vh;
    width: 100%;
    overflow: hidden;
}

.no-header {
    position: relative;
    background-color: black;
    height: 90px;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

header .container {
    position: relative;
    z-index: 2;
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--bs-dark);
    opacity: 0.5;
    z-index: 1;
}

/* Media Query for devices with coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
@media (pointer: coarse) and (hover: none) {
    header {
        background: url('') black no-repeat center center scroll;
    }

    header video {
        display: none;
    }
}

.mask-custom {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, .10);
}

.wave-underline-svg {
    display: inline-block;
    position: relative;
    padding-bottom: 0.5em; /* Increase this value for more space below text */
}

.wave-underline-svg svg {
    position: absolute;
    left: 0;
    bottom: 0; /* Position SVG at the bottom */
    width: 100%;
    height: 1em; /* Match or slightly less than padding-bottom */
    pointer-events: none;
}

.wave-underline {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #DBCE76;
}

.text-shadow-outline {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Adjust color and offset for desired effect */
}

/* CUSTOM STYLES FOR TEXT SCROLLER */

.text-scroller {
    height: 3em;
    width: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #DBCE76;
    display: flex;
    align-items: center;
    z-index: 2;
}

.text-scroller-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: scroll-track 30s linear infinite;
}

.text-scroller-item {
    font-size: 1.25em;
}

@keyframes scroll-track {
    0% {
        transform: translateX(0);
    }

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

/* Custom styles for accordions */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion,
.accordion-item,
.accordion-header,
.accordion-body,
.accordion-button {
    background-color: transparent !important;
    box-shadow: none;
}

/* Custom styles for accordion-light */
.accordion-light .accordion-button {
    color: var(--bs-light);
}

.accordion-light .accordion-button:not(.collapsed) {
    color: var(--bs-light);
}

.accordion-light .accordion-button:focus,
.accordion-light .accordion-button:active {
    color: var(--bs-light) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.accordion-light .accordion-body {
    color: var(--bs-light) !important;
    background-color: transparent !important;
}

.accordion-light .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F8F1E8' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    /* Plus icon, color #F8F1E8 */
}

.accordion-light .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F8F1E8' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    /* Dash icon, color #F8F1E8 */
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* MODIFY EVENT CALENDAR */

#event-calendar {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
    padding: 1rem;
}

#event-calendar, #event-calendar * {
    color: var(--bs-body-color) !important;
    text-decoration: none !important;
}

#event-calendar .fc-event,
#event-calendar .fc-daygrid-event {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-light) !important;
    border: none !important;
    font-size: 0.75rem !important;
    padding: 0.25em 0.5em !important;
    border-radius: 0.4em !important;
    line-height: 1.2 !important;
}

#event-calendar .fc-event-title,
#event-calendar .fc-daygrid-event .fc-event-title {
    text-decoration: none !important;
    font-weight: 500 !important;
    color: var(--bs-light) !important;
}

.date-box {
    display: inline-block;
    min-width: 2em;
    min-height: 2em;
    background: #DA6635;
    font-weight: 700;
    font-size: 2em;
    color: #F8F1E8;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.25em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 0.25em 0.25em;
    line-height: 1em;
}