.testimonials {
    --testimonial-offset: clamp(3rem, 10vw, 5rem);

    .testimonial-wrapper::-webkit-scrollbar {
        display: none;
    }

    .testimonial-wrapper {
        overflow-x: auto;
        padding-inline: 0.4rem;
        scroll-snap-type: x proximity;
    }

    .testimonial-track {
        display: grid;
        width: max-content;
        gap: 0.9rem;
    }

    .testimonial-row {
        display: flex;
        gap: 0.9rem;
        width: max-content;

        &.testimonial-row-bottom {
            padding-inline-start: var(--testimonial-offset);
        }

        .testimonial {
            text-align: left;
            background-color: var(--light-bg);
            border-radius: var(--card-radius);
            padding: 1.25rem;
            flex: 0 0 auto;
            width: clamp(16rem, 78vw, 20rem);
            scroll-snap-align: start;

            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;

                svg {
                    display: inline;

                }

                .quotes {
                    color: var(--callout-icon);

                    svg {
                        height: 32px;
                        width: 32px;
                    }


                }

                .stars {
                    color: gold;

                    svg {
                        height: 12px;
                        width: 12px;
                    }

                }

            }

            .text {
                margin-bottom: 1rem;

                p {
                    font-size: 0.9rem;
                    line-height: 1.5;
                }
            }

            .details {
                .name {
                    font-size: 1rem;
                    font-weight: 500;
                    margin-bottom: 0.2rem;
                }

                .title {
                    font-size: 0.8rem;
                }
            }
        }
    }

    /*tablet styles */
    @media (min-width: 800px) {
        --testimonial-offset: clamp(9rem, 15vw, 12rem);

        .testimonial-wrapper {
            padding-inline: 1rem;
        }

        .testimonial-track {
            gap: 1.5rem;
        }

        .testimonial-row {
            gap: 1.5rem;

            .testimonial {
                width: clamp(18rem, 30vw, 24rem);
                padding: 1.5rem;

                &:nth-child(3n + 1) {
                    width: clamp(20rem, 34vw, 26rem);
                }

                &:nth-child(3n + 2) {
                    width: clamp(17rem, 26vw, 21rem);
                }

                &:nth-child(3n) {
                    width: clamp(19rem, 28vw, 23rem);
                }

                .text {
                    p {
                        line-height: 1.6;
                    }

                }

                .details {
                    .name {
                        line-height: 1rem;
                    }
                }
            }
        }
    }
}

.vacancies-footer-cta {
    background-color: var(--light-bg);
    text-align: left;

    .section-inner {
        display: grid;
        gap: 1.5rem;
        align-items: center;
        background-color: white;
        border-radius: var(--card-radius);
        padding: var(--card-padding);
    }

    .nav-pill {
        margin: 0 0 1rem;
    }

    h2,
    p {
        margin-left: 0;
    }

    p {
        margin-bottom: 0;
    }

    .button {
        margin-bottom: 0;
    }

    @media (min-width: 800px) {
        .section-inner {
            grid-template-columns: 1fr auto;
        }
    }
}

.transport-footer-cta {
    background-color: white;
    text-align: left;

    .section-inner {
        display: grid;
        gap: 1.5rem;
        align-items: center;
        background-color: var(--light-bg);
        border-radius: var(--card-radius);
        padding: var(--card-padding);
    }

    .nav-pill {
        margin: 0 0 1rem;
    }

    h2,
    p {
        margin-left: 0;
    }

    p {
        margin-bottom: 0;
    }

    .button {
        margin-bottom: 0;
    }

    @media (min-width: 800px) {
        .section-inner {
            grid-template-columns: 1fr auto;
        }
    }
}


.enquiry-form {
    background-color: var(--light-bg);

    .contact {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;

        a {
            text-decoration: none;
            color: var(--text);
            font-weight: 500;
        }

        svg {
            height: 24px;
            width: 24px;
            display: inline;
            color: var(--pink);
        }
    }

    .form-container {
        text-align: left;
        background-color: white;
        border-radius: var(--card-radius);
        padding: 2rem;
        margin-bottom: 1.4em;

        h2 {
            font-size: 1.5rem;
            margin-bottom: 1.4rem;
        }

    }

    .jobs {
        text-align: center;
        text-decoration: none;
        color: black;

        svg {
            height: 16px;
            width: 16px;
            display: inline;
            color: var(--text);

        }

        span {
            display: block;
            margin-bottom: 0;
        }

        .jobs-2nd-line-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    /*tablet styles */
    @media (min-width: 800px) {
        .contact-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 2rem;
            margin-top: 2rem;
            font-size: 1.2rem;

            .contact {
                gap: 1rem;
            }
        }

        button.primary {
            width: 100%;
        }

        .jobs {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            display: block;

            span {
                display: inline;
            }

            .jobs-2nd-line-container {
                display: inline;
            }
        }

        .form-container {
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

    }

    /*desktop styles */

    @media (min-width: 1000px) {
        display: flex;
        text-align: left;
        justify-content: center;
        align-items: baseline;
        gap: 3rem;

        p {
            max-width: 38ch;
            margin-right: auto;
            margin-left: 0;
        }

        .contact-container {
            flex-direction: column;
            align-items: baseline;
        }
    }

}

.footer-call-to-action {
    .section-inner {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/participant-with-staff-looking-at-fountains.webp');
        background-position: center;
        background-size: cover;

        border-radius: var(--card-radius);
        padding: var(--card-padding);

        h2,
        p,
        button {

            color: white;
        }

        button.secondary {
            border: 1px solid white;
        }
    }
}


footer {
    padding: 2rem var(--section-padding-x) 1rem;
    background-color: var(--dark-gray);
    color: white;
    font-weight: 200;
    text-align: center;

    a {
        text-decoration: none;
        color: white;
    }

    ul {
        list-style: none;
        padding: 0;
        margin-bottom: 2.4rem;

        li {
            margin-bottom: 1rem;
        }
    }

    h3 {
        margin-bottom: 1rem;
        color: white;
    }

    img {
        display: inline;
        max-width: 200px;
        height: auto;
        margin-bottom: 2rem;
        border-radius: var(--radius);
    }

    p {
        margin-bottom: 2rem;
        color: white;
        text-align: left;

        @media (max-width: 800px) {
            text-align: center;
        }
    }

    .contact-item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        svg {
            width: 20px;
            height: 20px;
            display: inline;
            color: var(--pink);
            margin-right: 8px;
        }
    }

    p.copyright {
        font-size: 0.8rem;
    }

    hr {
        border: none;
        color: #2e2e4c;
        border: 1px solid;
        margin-bottom: 1.5rem;
    }


    /*tablet styles */
    @media (min-width: 800px) {
        text-align: left;
        padding: 3rem var(--section-padding-x);

        h3 {
            font-size: 1.8rem;
        }


        ul li {
            font-size: 1.2rem;
        }

        ul {
            li.contact-item {

                text-align: left;
                justify-content: left;
            }
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 700px;
            gap: 2rem;
            margin-left: auto;
            margin-right: auto;

            div {
                padding: 2rem;
            }
        }

        .copyright {
            text-align: center;
            font-weight: 200;
        }

    }

    /*desktop styles */

    @media (min-width: 1000px) {

        .grid {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            max-width: 70vw;
        }

        .copyright {
            margin-bottom: 0;
        }
    }
}