.about-us-block{
    background: #083D5B;
    background: linear-gradient(90deg,rgba(8, 61, 91, 1) 0%, rgba(8, 61, 91, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
    color: var(--wp--preset--color--white);
    padding: 75px 0 48px;
    position: relative;
    width:100vw;
    overflow-x: hidden;
    .wp-block-heading{
        margin-bottom: 33px;
        color: var(--wp--preset--color--white);
    }
    .wp-block-buttons{
      margin-top:35px;
    }
    &:before{
        content: "";
        position: absolute;
        width: calc(var(--wp--style--global--content-size) /2);
        height: 100%;
        top: 0;
        bottom:0;
        left: 50%;
        margin-left:-3px;
        background: var(--wp--preset--color--light-blue);
        border-radius: 0 100px 0 0;
    }
    ul.checked-list{
        padding-top:20px;
        padding-bottom: 10px;
        padding-left:0;
    }
    &.box-added{
        padding: 93px 0;
          &:before{
            margin-left:0;
          }
    }
}

.about-us-image{
    position: absolute;
    width: calc(var(--wp--style--global--content-size) /2);
    height: 100%;
    top: 0;
    bottom:0;
    left: 50%;
    margin-left:-3px;
    background: var(--wp--preset--color--light-blue);
    border-radius: 0 100px 0 0;
    overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
}

.about-us-block.type-simple{
    &:before{
        display: none;
    }
    .about-us-image{
        margin-left:0;
        background: #083D5B;
    }
}

.about-us-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.about-us-block-inner, .about-us-media{
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
}

.about-us-block-inner{
    .acf-innerblocks-container{
        padding-right:128px;
    }
}

.about-us-media{
    .img-holder{
        width:392px;
        height: 446px;
        border-radius: 8px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .gallery-slider-grid{
        transform: translateX(-74px);
        width:calc(100% + 74px);
        position: relative;
    }
    .splide-custom-nav{
        position: relative;
        width:calc(var(--wp--style--global--content-size) /2);
        text-align: right;
        .splide__arrows{
            width: 128px;
            height: 52px;
            border-radius: 100px;
            border:2px solid #F1F6FA;
            background: var(--wp--preset--color--white);
            margin-left:auto;
            transform: translateY(-50%);
            position: relative;
            &:before{
                content: "";
                position: absolute;
                width: 1px;
                height: 31px;
                transform: translateY(-50%);
                background: #DCE2E6;
                top: 50%;
                left:50%;
            }
            .splide__arrow{
                opacity: 1;
                background: transparent;
                    &.splide__arrow--prev {
                        left: 8px;
                    }
                    &.splide__arrow--next {
                        right: 8px;
                    }
            }
        }
    }
    .resources-row{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        gap:9px;
        transform: translateX(-74px);
    }
    .resource-col{
        flex-basis: 48%;
        flex-grow: 1;
        flex-shrink: 1;
        position: relative;
        border-radius: 4px;
        border:solid 2px rgba(140, 157, 171, 0.3);
        background-color: var(--wp--preset--color--white);
        padding:28px 31px 68px;
        transition: all 0.3s ease-in-out;
            .img-holder{
                width:32px;
                height:32px;
                overflow: hidden;
                position: relative;
                margin-bottom:12px;
                border-radius: 0;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        object-position: center left;
                    }
            }
            a{
                text-decoration: none !important;
            }
            h3{
                font-size:24px;
                line-height:30px;
                font-weight: 500;
                margin-bottom:15px;
            }
            .col-desc{
                font-size:16px;
                line-height:24px;
                font-family: var(--wp--preset--font-family--outfit);
            }
            *{ 
                color: var(--wp--preset--color--tertiary);
            }
            .arrow-aslink{
                width:38px;
                height:24px;
                background-image: url("data:image/svg+xml,%3Csvg width='38' height='24' viewBox='0 0 38 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.8699 23.0488L0.996793 23.2816C0.423946 23.2928 0.275599 23.0432 0.555459 22.5391L12.1751 1.69163C12.455 1.18753 12.8894 0.929313 13.4659 0.924357L37.3317 0.679126C37.9082 0.67417 38.0566 0.923743 37.773 1.42161L26.1608 22.2816C25.8772 22.7794 25.4428 23.0376 24.8699 23.0488Z' fill='%231a8c95'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                position: absolute;
                bottom: 25px;
                right: 25px;
                z-index: 1;
                transition: all 0.3s ease-in-out;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        &.has-link:hover{
            border:solid 2px rgba(26, 140, 149, 0.8);
            transition: all 0.3s ease-in-out;
            box-shadow: inset 0px 4px 20px rgba(26, 140, 149, 0.2);
            .arrow-aslink{
                transform: translateX(4px);
                transition: all 0.3s ease-in-out;
            }
        }  
    }
}
@media (max-width: 1240px){
    .about-us-block.type-simple{
        .about-us-block-inner {
            .acf-innerblocks-container {
                padding-right:var(--wp--style--root--padding-right);
            }
        }
    }
}



@media (max-width: 1100px){
    .about-us-block {
        padding-top:55px;
        background: linear-gradient(0deg,rgba(8, 61, 91, 1) 0%, rgba(8, 61, 91, 1) 70%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
        &:before {
            width: 100%;
            height: 538px;
            top: 0;
            bottom: initial;
            left: 0;
            margin-left: 0;
        }
        &.type-simple{
            background: linear-gradient(90deg,rgba(8, 61, 91, 1) 0%, rgba(8, 61, 91, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
            &:before {
                display: none;
            }
            .about-us-wrapper{
                align-items: flex-start;
            }
            .about-us-block-inner{
                flex-basis: 50%;
                width:50%;
                padding-top:0;
            }
        }
        &.box-added{
            padding: 0 0 40px 0;
            background: var(--wp--preset--color--tertiary);
            &:before{
                display: none;
            }
            .about-us-wrapper {
                flex-direction: column;
            }
            .about-us-media {
                position: relative;
                &:before{
                    content: "";
                    position: absolute;
                    top: 70px;
                    left: calc(var(--wp--style--root--padding-left) * -1);
                    right: calc(var(--wp--style--root--padding-right) * -1);
                    bottom: -40px;
                    background: var(--wp--preset--color--light-blue);
                    border-radius: 0 100px 0 0;
                }
                .resources-row {
                    transform: translateX(0);
                }
            }
            ~ .loan-uses-block{
                .loan-uses-media{
                    .img-holder{
                        border-radius: 0 !important;
                    }
                }
            }
        }
    }
    .about-us-wrapper {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .about-us-media {
        .gallery-slider-grid {
            transform: translateX(0);
            margin-right:calc(var(--wp--style--root--padding-right)* -1) !important;
        }
        .splide-custom-nav {
            width: 100%;
            text-align: center;
              .splide__arrows {
                margin-left: auto;
                margin-right: auto;
                transform: translateY(-50%) translateX(100%);
            }
        }
    }
    .about-us-block-inner, .about-us-media {
        flex-basis: 100%;
        flex-grow: 1;
        width:100%;
    }
    .about-us-block-inner{
        padding-top:31px;
            .acf-innerblocks-container {
                padding-right: 0;
            }
    }
}

@media (max-width: 850px){
    .about-us-block {
        &.type-simple{
            background: #083D5B;
            background: linear-gradient(0deg,rgba(8, 61, 91, 1) 0%, rgba(8, 61, 91, 1) 85%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
            padding:0;
                .about-us-block-inner {
                    flex-basis: 100%;
                    width: 100%;
                    padding-top:31px;
                        .acf-innerblocks-container {
                            padding-right: 0;
                        }
                }
                .about-us-image {
                    position: static;
                    width:100vw;
                    margin-left: calc(var(--wp--style--root--padding-left) * -1);
                }
                .links-accordion-block{
                    margin-top: 0 !important;
                    > div{
                        padding: 0 !important;
                    }
                }
        }
    }
}



@media (max-width: 768px){
    .about-us-block {
        &:before {
            height: 391px;
        }
    }
    .gallery-slider-grid {
        .img-holder {
           aspect-ratio: 1 / 1.14 !important;
           height: 299px;
        }
    }
    .about-us-media {
        .splide-custom-nav {
            .splide__arrows {
                width: 89px;
                height: 36px;
            }
        }
        .splide__arrow{
            width: 14px;
            height: 14px;
            svg{
                width: 14px;
                height: 14px;
                *{
                    fill: var(--wp--preset--color--primary) !important
                }
            }
        }
    }
}

@media (max-width: 680px){
    .about-us-block {
        &.box-added {
            & .about-us-media {
                .resources-row {
                    flex-direction: column;
                }
            }
        }
    }
}

@media (max-width: 480px){
    .about-us-block {
        &.type-simple{
            .about-us-image {
                aspect-ratio: 1 / 1.086;
                height: auto;
            }
        }
    }
}