.image-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

    .image-container img {
        vertical-align: middle;
    }

    .image-container a {
        color: white; /* Blue */
        font-size: 20px;
    }

    .image-container .image-content {
        position: absolute;
        bottom: 0;
        color: whitesmoke;
        background: rgb(0, 0, 0); /* Fallback color */
        background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
        color: #f1f1f1;
        width: 100%;
        padding: 15px;
    }

        .image-container .image-content .heading {
            color: whitesmoke;
            font-size: 22px;
            font-weight: bold;
            line-height: 1.5;
            font-family: 'Dosis', sans-serif;
            margin: 0;
        }

        .image-container .image-content .text {
            color: #fbf3f3;
            /*font-family: 'Dosis', sans-serif;*/
            margin: 0;
        }

.text-divider {
    display: flex;
    align-items: center; /* Vertically aligns the text and lines */
    text-align: center; /* Centers the text within its span */
    margin: 20px 0; /* Adds some vertical spacing */
}

    .text-divider::before,
    .text-divider::after {
        content: '';
        flex-grow: 1; /* Allows lines to expand and fill available space */
        height: 1px; /* Thickness of the line */
        background-color: #ccc; /* Color of the line */
    }

    .text-divider span {
        padding: 0 15px; /* Spacing between the text and the lines */
        white-space: nowrap; /* Prevents text from wrapping */
        color: #555; /* Color of the text */
        font-weight: bold;
    }

    .text-divider::before {
        margin-right: 15px; /* Adjusts spacing on the left of the text */
    }

    .text-divider::after {
        margin-left: 15px; /* Adjusts spacing on the right of the text */
    }

.arrowSeperator {
    display: block;
    text-align: center;
    border: 1px solid #ddd;
    width: 100%;
    height: 0;
    position: relative;
}

    .arrowSeperator:before {
        content: '';
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        /*      this is the length of the side of the arrow border-right: 15px solid transparent;
         this is the length of the side of the arrow border-bottom: 15px solid #ddd;
         set to same color as the line, this is the height of the arrow position: absolute;
*/ bottom: 100%;
        left: 50%;
        /*    used to center arrow right: 50%;
         used to center arrow margin: 0 -15px;
         left & right offset need to match the width of the arrow to center arrow z-index:1;
*/
    }


    .arrowSeperator:after {
        content: '';
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        /*     this is the length of the side of the arrow border-right: 15px solid transparent;
     this is the length of the side of the arrow border-bottom: 15px solid #fff;
     set to color of background, this is the height of the arrow position: absolute;
*/ bottom: 100%;
        left: 50%;
        /*    used to center arrow right: 50%;
     used to center arrow margin: 0 -15px -2px -15px;
     left & right offset need to match the width of the arrow to center arrow z-index: 2;
*/
    }

.img-50 {
    width: 100%;
    height: 50px;
}

.img-100 {
    width: 100%;
    height: 100px;
}

.img-150 {
    width: 100%;
    height: 150px;
}

.img-200 {
    width: 100%;
    height: 250px;
}

.img-250 {
    width: 250px;
    height: 250px;
}

.img-300 {
    width: 100%;
    height: 300px;
}

.img-350 {
    width: 100%;
    height: 350px;
}