﻿.flickity-prev-next-button {
    background: #4054AC; /* Add background color */
    border: none;
    width: 50px !important;
    height: 48px !important;
    /* border-radius: 50%; */
    border-radius: 0 !important;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}

    /* position outside */
    .flickity-prev-next-button.previous {
        /* left: -40px; */
        background-image: url("../../images/tertiaryleft.WebP");
        left: 0% !important;
        width: 50px !important;
        height: 48px !important;
    }

    .flickity-prev-next-button.next {
        /* right: -40px;  */
        background-image: url("../../images/tertiaryright.WebP");
        right: 0% !important;
        width: 50px !important;
        height: 48px !important;
    }

    /* position outside */
    .flickity-prev-next-button.previous:hover {
        /* left: -40px; */
        background-image: url("../../images/tertiaryleft.WebP");
        left: 0% !important;
        width: 50px !important;
        height: 48px !important;
    }

    .flickity-prev-next-button.next:hover {
        /* right: -40px;  */
        background-image: url("../../images/tertiaryright.WebP");
        right: 0% !important;
        width: 50px !important;
        height: 48px !important;
    }

.gallery {
    margin: 0 auto;
    width: 673px; 
    height: 477px;
}

.gallery-cell {
    width: 100%;
    height: auto;
}

    .gallery-cell img {
        display: block;
        max-width: 100%;
        height: auto;
    }

.rectangle ul {
    margin-left: 1rem;
    list-style: none; /* Removes default list bullets */
}

.rectangle li::before {
    content: url("/images/rectcontent.png");
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
    position: relative;
    top: 2px; /* Adjusts vertical alignment */
}

@media (max-width: 768px) {
    .gallery-cell {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 929px) {
    .ctaimage {
        flex-direction: column-reverse;
    }

    .article-text {
        order: 2;
    }

    .article-image {
        order: 1;
        width: 100%;
    }

        .article-image img {
            width: 100%;
            height: auto;
        }
}
