.header-xl {
    min-height: 50em;
}
.divider-curve {
    width: 100%;
    height: 2em;
    margin-top: -2em;
    clip-path: polygon(0% 0em, 10% 0.618em, 20% 1.176em, 30% 1.618em, 40% 1.902em, 50% 2em, 60% 1.902em, 70% 1.618em, 80% 1.176em, 90% 0.618em, 100% 0em, 100% 100%, 0 100%);
    transform: skewY(0.001deg);
}

.image-wrapper {
    position: relative;
    display: inline-block;
}

.rounded-image {
    border-radius: 50%; /* Makes the image circular */
    display: block;
}

.inner-ring {
    position: absolute;
    top: 2.5%; /* Centers the ring vertically */
    left: 2.5%; /* Centers the ring horizontally */
    width: calc(95% - 2px); /* 95% of the image size */
    height: calc(95% - 2px); /* 95% of the image size */
    border: 2px solid white; /* Red ring */
    border-radius: 50%; /* Makes the ring circular */
    pointer-events: none; /* Ensures the ring doesn't interfere with interactions */
}

.inner-square {
    position: absolute;
    top: 2.5%; /* Centers the ring vertically */
    left: 2.5%; /* Centers the ring horizontally */
    width: calc(95% - 2px); /* 95% of the image size */
    height: calc(95% - 2px); /* 95% of the image size */
    border: 2px solid white; /* Red ring */
    border-radius: 5%; /* Makes the ring circular */
    pointer-events: none; /* Ensures the ring doesn't interfere with interactions */
}

.fslightbox-source iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Ensures the video scales proportionally */
}

.navbar-brand-logo {
    width: 100%;
    min-width: 5rem;
    max-width: 5rem;
}

.navbar .nav-pills .nav-link {
    padding: .5rem .5rem;
}

.opacity-100-hover:hover {
    opacity: 1 !important;
}
.half-underline-pink {
    display: inline-block;
    position: relative;
}
.half-underline-pink:before {
    content: "";
    position: absolute;
    width: 75%;
    bottom: 0;
    border-bottom: 3px solid #d20f8b;
}

/*#region top margin for main container to clear navigation */

#main {
    margin: 105px auto 0 auto;
}

/* typical tablet screen resolution */
@media only screen and (max-width : 834px) {
    #main {
        margin: 155px auto 0 auto;
    }
}
/* landscape orientation */
@media only screen and (min-width : 768px) and (max-width : 834px) and (orientation : landscape) {
    #main {
        margin: 155px auto 0 auto;
    }
}
/* portrait orientation */
@media only screen and (min-width : 768px) and (max-width : 834px) and (orientation : portrait) {
    #main {
        margin: 155px auto 0 auto;
    }
}

/* portrait orientation */
@media only screen and (min-width : 1024px) and (max-width : 1366px) and (orientation : portrait) {
    #main {
        margin: 155px auto 0 auto;
    }
}

@media only screen and (min-width : 1140px) {
    #main {
        margin: 155px auto 0 auto;
    }
}

@media only screen and (min-width : 1224px) {
    #main {
        margin: 155px auto 0 auto;
    }
}

/*#endregion */

.full-underline-teal {
    display: inline-block;
    position: relative
}
.full-underline-teal:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 2px solid #077c76;
}

.article-main {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

img, svg {
    max-width: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

.filter.form-check {
    display: inline-block;
    min-width: 10em;
    margin-right: 0.5em;
}

.umbraco-forms-indicator {
    color: red;
}

.box-mh-1 {
    min-height: 10rem;
}

.content-container {
    max-width: initial;
}

.column-3 {
    /* Mobile layout (1 column) */
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

.card-body-fixed-height {
    height: 200px; /* Set your desired fixed height */
    overflow-y: auto; /* Enable vertical scrolling */
    position: relative; /* Ensure the gradient overlay is positioned correctly */
}



    .card-body-fixed-height::-webkit-scrollbar {
        width: 5px; /* Set the width of the scrollbar */
    }

    .card-body-fixed-height::-webkit-scrollbar-thumb {
        background-color: transparent; /* Set the default color of the scrollbar thumb */
        border-radius: 10px; /* Optional: Make the scrollbar thumb rounded */
    }

    .card-body-fixed-height:hover::-webkit-scrollbar-thumb {
        background-color: #f5851f; /* Change the color when the card body is hovered */
    }

.fadeout {
    position: relative;
    bottom: 2em;
    height: 2em;
    background: -webkit-linear-gradient( rgba(255,249,255, 0) 0%, rgba(255,255,255, 1) 100% );
    background-image: -moz-linear-gradient( rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100% );
    background-image: -o-linear-gradient( rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100% );
    background-image: linear-gradient( rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100% );
}


@media (min-width: 992px) {
    .mt-lg-15 {
        margin-top: 7rem !important;
    }
}

@media only screen and (min-width: 768px) {
    /* Larger screens (3 columns) */
    .column-3 {
        
        column-count: 3;
    }
        .column-3 p {
            page-break-inside: avoid; /* For Firefox. */
            -webkit-column-break-inside: avoid; /* For Chrome & friends. */
            break-inside: avoid; /* For standard browsers like IE. :-) */
        }
}


@media only screen and (min-width : 1224px) {
    .show-on-hover .card-text {
        opacity: 0;
    }
}

.show-on-hover .card-body:hover .card-text {
    opacity: 1;
}

.show-on-hover .card-body .card-text p {
    color: #fff;
}


@media (min-width: 576px) {
    .content-container {
        max-width: initial;
    }
}

@media (min-width: 768px) {
    .content-container {
        max-width: initial;
    }
}

@media (min-width: 992px) {
    .content-container {
        max-width: 480px
    }

    .w-lg-90 {
        width: 90% !important;
    }
}

@media (min-width: 1200px) {
    .content-container {
        max-width: 570px;
        padding: 0 15px;
    }
}


@media only screen and (min-width : 1224px) {
    .box-mh-1 {
        min-height: 16rem;
    }
}