section {
    position:relative;
    clear:left;
    width:100%;
    max-inline-size:min(var(--page_max_width),100%);
    margin-inline:auto;
    overflow-x:clip;
    overflow-y:visible;
    scroll-margin-top: 50px;

    & > .wrap {
        z-index:1;
    } 
}

.pad_top {
    padding-top:var(--global_block_padding);
}
.pad_bottom {
    padding-bottom:var(--global_block_padding);
}
.pad_left {
    padding-left:var(--global_inline_padding);
}
.pad_right {
    padding-right:var(--global_inline_padding);
}

@media screen and (min-width > 1400px) {
    .pad_left {
        padding-left:0;
    }
    .pad_right {
        padding-right:0;
    }
}

:is(h1,h2,h3,h4,h5,h6,p,li) {

    &.vlarge {font-size:clamp(2.5rem,5vw,6rem) !important;}
    &.large {font-size:clamp(2rem,3vw,3rem) !important;}
    &.medium {font-size:clamp(1.4rem,2vw,2rem) !important;}
    &.small {font-size:clamp(1rem,1vw,1rem) !important;}
    &.vsmall {font-size:clamp(0.8rem,1vw,0.8rem) !important;}
    &.yellow {color:#ffe400 !important;}
    &.black {color:#000000 !important;}
}

/***********************************************/

.flip .slide_from_left.run {
    animation-name: slide_from_right;
}

.flip .slide_from_right.run {
    animation-name: slide_from_left;
}

.heading {
    font-size:clamp(1.8rem,2.7vw,2.5rem);
    text-align: center;
    margin-bottom:1.5lh;
    grid-column: 1/-1;
    width:100%;
    text-wrap:balance;
}

.textonly {
    & .text {
        width:min(1000px,100%);
        margin-inline:auto;
    }
}

h1 {
    margin-bottom:1rem;
}

/************************************************/

.two_col {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--global_inline_padding);
    align-items:center;

    & .image {
        position:sticky;
        top:0;
        height:100%;
        max-height:100vh;
        & img {
            width:100%;
            max-height:100%;
            object-fit:contain;
        }
    }

    & .image:not(:has(img)){
        display:none;
    }

    & .text {
        /* padding:var(--global_block_padding) var(--global_inline_padding); */

        & h2 {
            font-size:clamp(1.6rem,4vw,3.5rem);
            margin-bottom:0.75lh;
        }
    }
    &.flip {
        & > .text {
            order:-1;
        }
    }

    @media screen and (max-width:900px){
        grid-template-columns: 1fr;

        & .image,
        .flip & .image {
            position:static;
            order:2;

            & img {
                position: static;
            }
        }
    }

    @media screen and (max-width:800px){

        & .faqs,
        &.faqs.flip {
            grid-template-columns: 1fr;
        }
    }

    @media screen and (max-width:350px){
        &.numbered .numbered_blocks {
            grid-template-columns: 1fr;
        }
    }
}

.faqs {
    & .heading {
        margin-bottom:0;
    }
}

details {
    position:relative;
    display:grid;
    align-items:start;
    padding-bottom:1.5rem;
    margin-bottom:1.5rem;

    &::after {
        position:absolute;
        content:'';
        background-image:url('../img/wavy-black.svg');
        opacity:0.25;
        height:0.25rem;
        width:100%;
        bottom:0;
        left:0;
    }

    &:last-of-type::after {
        display:none;
    }

    & summary {
        display:grid;
        grid-template-columns: 1fr 1.5rem;
        gap:1rem;
        align-items:center;
        cursor:pointer;

        & h3 {
            margin:0;
            color:#000;
            font-size: clamp(1.2rem,2vw,1.4rem);
        }

        &:hover {
            & h3 {
                color:var(--yellow);
            }
            & .plus,
            & .minus {
                color:var(--yellow);
            }
        }

        & .plus,
        & .minus {
            text-align:center;
            margin:0;
            font-family: "Freckle Face", system-ui;
            color:#000;
            font-size: clamp(1.2rem,2vw,1.4rem);
        }

        & .minus {
            display:none;
        }
    }

    &[open]{
        & summary {
            & h3 {
                color:var(--yellow);
            }
            & .plus {
                display:none;
            }
            & .minus {
                color:var(--yellow);
                display:block;
            }
        }
    }

    & .content {
        padding-top:0.5rem;
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
        gap:3rem;

        & > p {
            grid-column: 1/-1;
        }
    }

    &:last-of-type {
        margin-bottom:0;
        border-bottom:none;
    }

    .b_theme &,
    .lg_theme & {
        
        &::after {
            background-image:url('../img/wavy-white.svg');
        }

        & summary {
            & h3 {
                color:#fff;
            }
        }

        & summary:hover,
        &[open] summary {
            & h3 {
                color:var(--yellow);
            }
        }
    }
}

.counting_stats,
.cols {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap:var(--global_inline_padding);

    & .stat {
        width:min(220px,100%);
        text-align: center;

        & p {
            margin:0;
        }
        & p:has(.count-up) {
            font-size:clamp(3rem,6vw,6rem);
            font-family: "Freckle Face", system-ui;
            line-height:1;
            color:var(--yellow);
        }
        & p.other {
            font-family: 'GeneralSans-Bold',sans-serif;
            font-size: clamp(1.2rem,2vw,1.6rem);
            line-height: 1;
        }
    }

    & .col {
        width:min(220px,100%);
        text-align: left;

        & .image {
            margin-bottom:2rem;
            & img {
             height:80px;
            }
        }

        & h3 {
            margin:0 0 0.5rem 0;
        }
    }
}

.all_steps {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:var(--global_inline_padding);

    & .step {
        position:relative;
        display:grid;
        grid-template-columns: max-content 1fr;
        gap:1rem;

        &::after {
            position:absolute;
            left:calc(100% + 1rem);
            top:1rem;
            width:1.5rem;
            content:url('../img/arrow-black.svg');
        }

        &:nth-of-type(3n){
            &::after {
                display:none;
            }
        }

        & p.big {
            font-size: clamp(1.4rem,4vw,3.5rem);
            font-family: "Freckle Face", system-ui;
            line-height:0.9;
            margin:0;
            color:var(--yellow);
        }

        & h3 {
            margin-bottom:0.5rem;
        }

    }
}

.b_theme .all_steps {
    & .step {
        &::after {
            content:url('../img/arrow-white.svg');
        }
    }
}

.match-height {
    & .images,
    & .image {
        position:absolute;
        width:100%;
        height:100%;

        & img {
            height:100%;
            object-fit:cover;
        }
    }
}

.rs {
    position: absolute;
    inset:0;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index:0;

    & li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100vw;
        height:100%;
        max-width:100%;
        left: 0;
        top: 0;
        padding:0;
        margin:0;

        &:first-child {
            position: relative;
            display: block;
            float: left;
        }
    }

    & img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }
}

.bgimg,
.bgrs,
.bgvid {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
    z-index:0;
    padding:0;
    margin:0;
    user-select: none;
    pointer-events: none;
    background-color:var(--background);
  }

:is(.bgrs,.bgimg) img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: center;
}

.btns {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;

    & a {
        display:inline-block;
    }
}

.splide__track {
    max-width:100%;
    /* mask-image: linear-gradient(90deg,rgba(19, 2, 39, 0) 0%, rgba(19, 2, 39, 1) 15%, rgba(19, 2, 39, 1) 85%, rgba(19, 2, 39, 0) 100%); */
}

.splide__slide {
    &::before {
        content:'' !important;
    }
    padding-inline:1.25rem;

    & .quote {
        grid-column: 1/-1;
        position:relative;
        background-color:var(--bg_colour);
        padding:clamp(1rem,2vw,2rem);
        border-radius:1rem;
        font-style: italic;
        margin-bottom:2rem;

        &::after {
            position:absolute;
            content:url('../img/speech-part-green.svg');
            width:2.5rem;
            right:2rem;
            top:100%;
        }
    }

    .g_theme & .quote {
        background-color:#000;
    }

    & .info {
        display:grid;
        grid-template-columns: 4rem 1fr;
        align-items: center;
        gap:1rem;
    }

    & .image {
        position: relative;
        width:100%;
        aspect-ratio: 1;
        background-color:var(--yellow);
        border-radius:100%;
        overflow:hidden;
    }

    & .image:not(:has(img))::after{
        position: absolute;
        top:0;
        left:0;
        padding:1rem;
        width:calc(100% - 2rem);
        content:url('../img/person-black.svg');
    }

    & h3 {
        margin:0;
    }
}

section:has(.splide__track) .btns {
    justify-content: center;
    margin-top:3rem;
}


.final_cta {
    text-align: center;
    & h2 {
        max-width:30ch;
        margin-inline:auto;
        margin-bottom:0.5lh;
    }
    & p {
        max-width:65ch;
        margin-inline:auto;
    }
    & .bg {
        position:absolute;
        opacity:0.15;
        left:0;
        bottom:0;
        height:100%;
        max-height:100vh;
        width:30%;
        background-size: cover;
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    & .btns {
        margin-top:3rem;
        justify-content: center;
    }
}




@media screen and (max-width:1300px) {


}

@media screen and (max-width:1100px) {

}

@media screen and (max-width:1000px) {

}

@media screen and (min-width:990px){
    .hide_d {
        display:none;
    }
}

@media screen and (max-width:990px) and (min-width:600px){
    .hide_t {
        display:none;
    }
}

@media screen and (max-width:900px) {

}

@media screen and (max-width:800px) {

}

@media screen and (max-width:700px) {

}

@media screen and (max-width:600px) {
    
    .hide_m {
        display:none;
    }
}

@media screen and (max-width:500px) {

}

@media screen and (max-width:375px) {

}