/* 
 * Custom CSS
 * Add your custom styles here - no compilation needed!
 */


/*General */

.block .o-container {
    padding: 40px 15px;
}

.block h1,
.block h2,
.block h3 {
    margin: 0;
}

.block .subheading {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.block .c-btn {
    width: fit-content;
}

.block div p {
    padding: 0;
    margin: 0;
}


/*main content*/

.main-content .o-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}



.main-content .o-container .c-main-content__container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-content .o-container .c-main-content__container .c-main-content__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-content .o-container .c-main-content__container .c-main-content__copy p {
    margin: 0;
}

.main-content .o-container .c-main-content__container.full {
    width: 100%;
}

.main-content .o-container .c-main-content__container.six-six {
    width: 66.66%;
}

.main-content .o-container .c-main-content__container.fifty {
    width: 50%;
}

.main-content .o-container .c-main-content__image {
    flex: 1;
}

@media (max-width: 768px) {
    .main-content .o-container {
        flex-direction: column;
    }

    .main-content .o-container .c-main-content__container.six-six,
    .main-content .o-container .c-main-content__container.fifty {
        width: 100%;
    }

    .main-content .o-container .c-main-content__image {
        flex: none;
        height: 300px;
    }
}

/* Page Title Image Right */

.page-title-image-right .c-page-title-image-right__copy h2 {
    font-size: 40px;
    font-weight: 700;
}

.page-title-image-right .c-page-title-image-right__copy {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page-title-image-right .c-page-title-image-right__copy ul {
    margin-bottom: 0;
}

.stretched-content .c-btn {
    margin-top: 30px;
}

.stretched-content .c-page-title-image-right__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/*CTA*/
.cta .o-container .c-cta__container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cta .o-container .c-cta__container.center {
    align-items: center;
    text-align: center;
    justify-content: center;
}

.cta .o-container .c-cta__container .superheading {
    font-size: .75rem;
    line-height: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0db7e1;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

/*Multi Content*/
.multi-content .o-container,
.multi-content .c-multi-content_heading__container,
.display-services .o-container,
.display-services .c-display-services_heading__container,
.accordion .o-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.multi-content .c-multi-content__container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.multi-content .subheading-full {
    max-width: 100%;
}

.multi-content .subheading-fifty {
    max-width: 50%;
}

.multi-content .c-multi-content {
    width: 50%;
}

.multi-content .c-multi-content__left-column,
.multi-content .c-multi-content__right-column {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.multi-content .c-multi-content__left-column div,
.multi-content .c-multi-content__right-column div,
.review-slider .o-container .c-review-slider-copy-block__copy-holder {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.multi-content .c-multi-content__right-column .c-btn {
    margin-top: 25px;
}

.review-slider .o-container .c-review-slider-copy-block__copy-holder p {
    margin: 0;
}

.block .item__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.block .item__title {
    font-size: 20px;
    font-weight: 500;
}

.block .item__copy {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.multi-content .c-multi-content__left-column__items,
.multi-content .c-multi-content__right-column__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.multi-content .c-multi-content__left-column__items .c-multi-content__left-column__item,
.multi-content .c-multi-content__right-column__items .c-multi-content__right-column__item,
.display-services .c-display-services__grid__items .c-display-services__grid__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
}

.multi-content .c-multi-content img {
    width: 30px;
    height: 30px;
}

.multi-content h2 {
    line-height: 2.2rem;
}

/*stats*/

.stats {
    padding: 40px 0;
}

.stats .o-container .c-stats__container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.display-services .o-container .c-text-image-tiles__grid {
    grid-template-columns: repeat(3, 1fr);
}

.stats .o-container .c-stats__container .c-stats__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.stats .o-container .c-stats__container .c-stats__item h3 {
    font-size: 48px;
    font-weight: 700;
    color: #0db7e1;
}

.stats .o-container .c-stats__container .c-stats__item p {
    width: 75%;
    text-align: center;
    font-weight: 500;
    font-size: 22px;
}


.stats .o-container .c-stats__container .columns-1,
.display-services .o-container .c-display-services__cards__items .columns-1 {
    grid-column: span 12;
}


.stats .o-container .c-stats__container .columns-2,
.display-services .o-container .c-display-services__cards__items .columns-2 {
    grid-column: span 6;
}


.stats .o-container .c-stats__container .columns-3,
.display-services .o-container .c-display-services__cards__items .columns-3 {
    grid-column: span 4;
}


.stats .o-container .c-stats__container .columns-4,
.display-services .o-container .c-display-services__cards__items .columns-4 {
    grid-column: span 3;
}

/*Services */

.multi-content h2.left {
    text-align: start;
    margin: 0;
}

.multi-content h2.center,
.display-services h2 {
    text-align: center;
    max-width: 66.66%;
    margin: 0 auto;
    ;
}

.display-services .c-display-services__grid__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.display-services .c-display-services__grid__items .c-display-services__grid__item {
    padding: 20px;
    border-top: 1px solid #c9d0d3;
    grid-column: span 1;
    display: flex;
    flex-direction: row;
    gap: 20px;
}


.display-services .c-display-services__cards__items .c-display-services__cards__item {
    padding: 20px;
    background-color: white;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.display-services .c-display-services__cards__items .c-display-services__cards__item img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;

}


.display-services .item__content {
    gap: 20px;
    align-items: flex-start;
}

.display-services .item__title {
    text-align: center;
}

/* Case study grid */

.case-study-grid .o-container,
.services-grid .c-services-grid__intro__content,
.contact-form .c-contact-form__copy,
.services-grid .c-services-grid__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.case-study-grid h2,
.services-grid h2,
.services-grid .c-services-grid__intro__content p {
    text-align: center;
    margin: 0 auto;
}

.services-grid .c-services-grid__wrapper .link {
    justify-self: end;
}

/*Contact Form*/
.contact-form .o-container.c-contact-form__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-form form {
    padding: 50px;
}

.contact-form form .sd-action-bar {
    justify-content: flex-end;
}

/*Mobile */

@media (max-width: 768px) {

    .multi-content .subheading-fifty,
    .multi-content .c-multi-content,
    .multi-content .c-multi-content__left-column {
        width: 100%;
    }

    .multi-content .c-multi-content__container {
        flex-direction: column;
    }

    .display-services .o-container .c-text-image-tiles__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-form form {
        padding: 20px;
    }

}