@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

.filter-bar {
    margin-bottom: 50px;
}

.activitys {
    display: flex;
    flex-wrap: wrap;
}

.activitys .activity-titel {
    color: #357abe;
    margin-top: 0px;
}

.activitys .activity-item {
    margin-bottom: 90px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #444;
    width: 100%;
}

.activitys .activity-item {
    color: #444;
}

.activitys .activity-item a:hover {
    color: #444;
}

.activitys .activity-item-img-wrapper {
    position: relative;
    margin-bottom: 40px;
    height: 240px;
    border-radius: 80px 0px 10px 10px;
    overflow: hidden;
}

.activitys .activity-item-img-wrapper img {
    width: 100%;
    border-radius: 80px 0px 10px 10px;
    object-fit: cover;
    transition: transform 0.3s ease;
    height: 100%;
}

.activitys .activity-item-img-wrapper img.no-padding {
    padding-bottom: 0px;
}

.activitys .activity-item-img-wrapper:hover img {
    transform: scale(1.05);
}

.activitys .green-text-area {
    background-color: #357abe;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px;
}

.activitys .green-text-area .name {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.activitys .green-text-area .name:hover {
    color: #fff;
}

.activitys .green-text-area .function-title {
    color: #000;
}

.activitys .green-text-area .function-title:hover {
    color: #000;
}

.activitys .activity-title h3 {
    color: #523888;
    font-weight: 700;
    margin-top: 0px;
}

.activitys .activity-content {
    color: #523888;
    margin-bottom: 20px;
}

#site-main .activitys a.button {
    width: fit-content;
    margin-top: auto;
}

.activitys .activity-item-detail {
    margin-bottom: 50px;
    width: 100%;
}

.activitys .activity-item-detail .activity-item-img-wrapper {
    position: relative;
    margin-bottom: 40px;
    height: 550px;
    border-radius: 80px 0px 10px 10px;
}

.activitys .activity-item-detail .activity-item-img-wrapper img {
    width: 100%;
    border-radius: 80px 0px 10px 10px;
    height: 100%;
    object-fit: cover;
    padding-bottom: 100px;
}

.activitys .activity-item-detail .green-text-area {
    background-color: #357abe;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px;
}

.activitys .activity-item-detail .green-text-area .name {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.activitys .activity-item-detail .green-text-area .function-title {
    color: #000;
    font-size: 18px;
}

.activitys .activity-item-detail .activity-title {
    margin-bottom: 30px;
}

.activitys .activity-item-detail .activity-title h3 {
    color: #357abe;
    font-size: 24px;
    font-weight: 600;
}

.activitys .activity-item-detail .activity-content {
    color: #357abe;
    font-size: 20px;
}

.activitys .information-area {
    margin-bottom: 20px;
}

.activitys .information-area .information-icon {
    margin-bottom: 10px;
}

.activitys .information-area .information-icon i {
    margin-right: 2px;
    width: 20px;
    color: #357abe;
    text-align: center;
}

.activity-item:hover .activity-item-img-wrapper img {
    transform: scale(1.05);
}

.activity-item {
    position: relative;
}

.activity-item:hover {
    cursor: pointer;
}

.activity-item:hover button {
    color: #fff;
    opacity: .9;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: all 0.3s ease;
}

.activity-item:hover .activity-item-img-wrapper img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* detail pagina banner */

.activity-banner {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    overflow: hidden;
}

.activity-banner .banner-text-wrapper .banner-text,
.activity-banner .pink-speech-bubble .speech-bubble-text {
    position: relative;
    display: inline-block;
    -webkit-transform: scaleX(-1) !important;
    transform: scaleX(-1) !important;
}

/* filter banner styling */
.filter-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    height: 100%;
    padding-bottom: 150px;
    z-index: 100;
    position: relative;
}

.filter-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
}

#filtersForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.filter-option-container {
    width: 16%;
    display: inline-block;
    margin-bottom: 10px;
}

@media only screen and (max-width: 1200px) {
    .filter-option-container {
        width: 32%;
        display: inline-block;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .filter-option-container {
        width: 48%;
        display: inline-block;
        margin-bottom: 10px;
    }
}

#site-main .filter-option-container .filter-option button {
    width: 100%;
}

.filter-option-container .filter-option {
    width: 100%;
}

#site-main .filter-option-container .filter-option button {
    margin-top: 0px;
    /* padding: 11px 46px 11px 20px; */
    padding: 11px 20px;
}

#filtersForm select {
    padding: 10px;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#filtersForm input {
    padding: 6.5px 10px;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#filtersForm input {
    padding: 6.5px 10px;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#filtersForm select:disabled, #filtersForm input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.filter-option input:-webkit-autofill {
    background-color: #fff !important;
    color: #000 !important;
}

.filter-option input:-internal-autofill-selected {
    background-color: #fff !important;
    color: #000 !important;
}

.activitys {
    margin-top: -265px;
    z-index: 100;
    position: relative;
}

@media only screen and (max-width: 600px) {
    .activitys {
        margin-top: -210px;
    }
}

.no-results-message {
    margin-top: 200px;
    margin-bottom: 100px;
    font-size: 1.2em;
    font-weight: bold;
}

.activity-filter .image-banner.content-page-small-image {
    background: #96b134;
}

.activity-filter button {
    background: #357abe;
    /* background-image: url(../images/icon_arrow_right_white.svg); */
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right 16px center;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image {
    background: #96b134; 
    margin-bottom: 100px; 
}

.vacature-detail.activity-detail .not-found {
    min-height: 500px;
}

.vacature-detail.activity-detail .not-found h1 {
    padding-top: 150px;
}

@media only screen and (max-width: 991px) {
    .vacature-detail.activity-detail .image-banner.content-page-small-image {
        margin-bottom: 50px;
        background-position: center;
        transform: scaleX(-1);
    }
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper .banner-text {
    text-align: left;
    word-break: break-word;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper .banner-text h1 {
    color: #fff;
    text-align: left;
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: 0px;
    font-size: 44px;
    word-break: break-word;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper .banner-text p {
    color: #fff;
    text-align: left;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    word-break: break-word;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper .banner-text {
    padding: 70px 80px 70px 32px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 580px;
    word-break: break-word;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper {
    width: unset;
    min-height: 240px;
    float: right;
    padding-left: 32px;
    height: 100%;
}

.vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container {
    height: 100%;
}

.vacature-detail.activity-detail .image-banner .hero-text-container-page-title img {
    -webkit-transform: scaleX(-1) !important;
    transform: scaleX(-1) !important;
    border-radius: 0px 80px 10px 10px !important;
}

.activity-filter .pagination {
    width: 100%;
    text-align: center;
    display: block;
}

.activity-filter .pagination a {
    font-size: 1.2em;
    width: 28px;
    height: 28px;
    display: inline-block;
}

.activity-filter .pagination a.active {
    color: #96b134;
    background-color: #e1ebf5;
    border-radius: 50%;
}

.activity-filter .pagination a:hover {
    color: #96b134;
    background-color: #e1ebf5;
    border-radius: 50%;
    text-decoration: none;
}

.activitys .information-area {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Adds space between each information icon block */
}

.activitys .information-icon {
    display: flex;
    align-items: flex-start; /* Aligns the icon with the top of the text */
    gap: 5px; /* Adds space between the icon and the text */
}

.activitys .left-icon-area {
    padding-top: 5px;
    width: 20px; /* Fixed width for the icon */
    display: flex;
    justify-content: center; /* Centers the icon horizontally */
}

.activitys .right-icon-area {
    flex-grow: 1; /* Takes up the remaining space */
    white-space: normal; /* Allows the text to wrap naturally */
    word-wrap: break-word; /* Breaks long words if needed */
    display: flex;
    flex-wrap: wrap; /* Wraps the text if it overflows */
    align-items: flex-start; /* Aligns the text with the top */
}

.activity-title p {
    min-height: 58px;
}

.activity-banner .image-banner .hero-text-container-page-title img {
    bottom: -20px !important;
}

@media only screen and (max-width: 1400px) {
    .activity-banner .image-banner .hero-text-container-page-title img {
        max-width: 500px;
        right: 350px !important;
    }
}

.activity-banner .image-banner.content-page-small-image {
    height: 400px;
}

@media only screen and (max-width: 1200px) {
    .activity-banner .image-banner.content-page-small-image .content-page-hero-wrapper .hero-pink-wrapper .hero-text-container-page-title img {
        right: 350px;
    }
}

.mobile-description {
    display: none;
}

@media only screen and (max-width: 992px) {
    .mobile-description {
        display: block;
    }
}

.activity-detail .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.activity-detail .activity-details {
    width: 100%;
    min-width: 600px;
    table-layout: auto;
}

#site-main.activity-detail table.activity-details .button {
    margin-top: 4px;
    margin-right: 0px;
    margin-bottom: 4px;
    margin-left: 0px;
}

.activity-item:hover .button {
    color: #fff;
    opacity: .9;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.activity-details .centered-text {
    text-align: center;
}

.activity-details .button.waitinglist {
    width: 200px;
}

@media only screen and (max-width: 1400px) {
    .vacature-detail.activity-detail .image-banner.content-page-small-image .content-page-hero-wrapper .hero-text-container .banner-text-wrapper .banner-text {
        max-width: 550px;
    }
}

.kalam {
    font-family: "Kalam", cursive;
}