:root {
    --section_padding: 100px 0;
	--image_border_radius: 15px;
}

.g-0, .gx-0 {
    --bs-gutter-x: 0;
}
.g-5, .gx-5 {
    --bs-gutter-x: 3rem;
}
.g-7, .gx-7 {
    --bs-gutter-x: 5rem;
}
.g-10, .gx-10 {
    --bs-gutter-x: 8rem;
    .pbuilder-content-column {
        padding-right: 40px;
        &:last-of-type {
            padding-right: 0!important;
        }
    }
}
.g-15, .gx-15 {
    --bs-gutter-x: 12rem;
}
.g-20, .gx-20 {
    --bs-gutter-x: 15rem;
}

.max_75 p {
	max-width: 75%;
}
.max_85 p {
	max-width: 85%;
}
.max_95 p {
	max-width: 95%;
}

.icon_embedded {
    font-size: 100%!important;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    &.has_background {
        border-radius: 50em;
        padding: 9px;
    }
}

.section.admin_only { display: none; }
body.logged-in {
    .section.admin_only {
        display: block;
    }
}

.container,
.container-right {
    .container_inner {
        width: 100%;
    }
}

.pbuilder-row {
    .pbuilder-content-column {
        .col_inner {
            width: 100%;
            &.height_100 {
                height: 100%;
            }
            strong {
                color: #404e53;
            }
            &.height_100 {
                height: 100%;
            }
			pre {
				font-family: var(--bodyFont);
				padding: 2px 14px;
				margin: 0 0 20px;
				border-radius: 50em;
				width: fit-content;
				background: var(--default);
				color: #fff;
				font-size: 1.5rem;
				font-weight: 600;
			}
            p {

            }
            .img {
                height: 100%;
                width: 100%;
                background-size: cover!important;
				border-radius: var(--image_border_radius);
            }
        }
        img {
            border-radius: var(--image_border_radius);
        }
        &.img_portrait {
            img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 4;
                object-fit: cover;
            }
        }
    }
}

.background_ {
    h2, h3, h4, h5, h6 {
        color: #012c3a;
    }
}

.background_white {
	background: #fff;
}

.background_primary {
    background: #1e39d7;
}

.background_secondary {
    background: #ffaa21;
}

.background_default {
    background: #27262c;
}

a.card {
    &:after {
        content: '+';
        display: inline-block;
        vertical-align: top;
        position: absolute;
        right: 13px;
        top: 13px;
        bottom: 0;
        background-color: #f0f4f5 !important;
        color: #000;
        text-align: center;
        height: 50px;
        line-height: 50px;
        width: 50px;
        font-size: 2.0rem;
        font-weight: 400;
        border-radius: 50em;
        background-size: 24px 24px;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        transition: all 0.25s;
    }
    &:hover,
    &:focus,
    &:active {
        &:after {
            background-color: var(--primary)!important;
            color: #fff;
        }
    }
}

.card_wrapper {
    height: 100%;
    .card {
        height: 100%;
        border: 0;
        .img_base {
            position: relative;
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            .img {
                background-size: cover!important;
                background-repeat: no-repeat!important;
                background-position: center center!important;
                height: 100%;
            }
            &:has(.img) {
                .caption {
                    color: #fff;
                    h4 {
                        color: #fff;
                    }
                }
            }
            .caption {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 30px;
                color: #000;
                h4 {
                    margin: 0 0 10px;
                    color: #000;
                }
                .description {
                    line-height: 1.35;
                }
                .button_wrap {
                    margin-top: 15px;
                }
            }
        }
    }
}

.section {
    position: relative;
    z-index: 0;
	&.header_img {
		h1 {
			text-wrap: balance;
		}
	}
    .overlapping {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        z-index: -1;
        pointer-events: none;
        &.top {
            top: 0;
            bottom: inherit;
        }
        &.bottom {
            top: inherit;
            bottom: 0;
        }
        &.height_10 {
            height: 10%;
        }
        &.height_20 {
            height: 20%;
        }
        &.height_30 {
            height: 30%;
        }
        &.height_40 {
            height: 40%;
        }
        &.height_50 {
            height: 50%;
        }
    }
    .header_image {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        .wave {
            position: absolute;
            bottom: 0;
            z-index: 1;
            pointer-events: none;
        }
        .img {
            position: absolute;
            z-index: -1;
            pointer-events: none;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-size: cover!important;
            background-repeat: no-repeat!important;
            width: 100%;
            .overlay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                pointer-events: none;
                z-index: 0;
            }
        }
    }
    .container_inner {
        position: relative;
        z-index: 1;
    }
}

.swiper {
    .swiper-wrapper.img_contain {
        .swiper-slide {
            background-size: contain!important;
        }
    }
    .swiper-slide {
        background-size: cover!important;
        background-position: center center!important;
        background-repeat: no-repeat!important;
    }
    .swiper-button-next,
    .swiper-button-prev {
        color: #000;
        background: #fff;
        width: 55px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        border-radius: 50em;
        top: 50%;
        transform: translateY(-50%);
        &:after {
            font-size: 2.2rem;
        }
    }
    .swiper-pagination {
        position: relative;
        top: 0!important;
        bottom: 0!important;
        margin: 30px 0 0 0;
        .swiper-pagination-bullet {
            &.swiper-pagination-bullet-active {
                background: #000;
            }
        }
    }
}