body {
    margin: 0;
    padding: 0;
    font-family: Garamond, Georgia, serif;
    font-size: large;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    max-width: 55ch;
    margin: 1em auto;
}


/* From hover.css*/
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.hvr-icon-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

    .hvr-icon-forward .hvr-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

/* Re-usable elements */
.divider {
    position: relative;
    width: 120%;
    height: 5rem;
    margin: -2.5rem;
    background-image: url('Divider_export.svg');
    background-repeat: repeat-x;
    background-size: contain;
    mix-blend-mode: overlay;
    z-index: 10;
}

/* Hero section */
.hero {
    position: relative;
    display: block;
    width: 100%;
    height: 60svh;
    min-height: 25rem;
    overflow: hidden;
}

.hero-image {
    z-index: -2;
    position: absolute;
    width: 100%;
    height: 100%;
}
    .hero-image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.hero-content {
    position: absolute;
    width: 40vw;
    transform: translate(0%, -50%);
    top: 50%;
}
    .hero-text {
        padding: 1.5rem;
        font-size: x-large;
    }
        .hero-text h1 {
            text-shadow: 0px 0px 1em #fff, 0px 0px 0.5em #fff, 0px 0px 0.25em #fff, 0px 0px 0.1em #fff;
        }
        .hero-text h3 {
            font-style: italic;
        }
        .hero-contact-button {
            display: inline-block;
            margin-top: 0.5rem;
            padding: 0.75rem 1.25rem;
            border: 0.15rem solid #769f68;
            border-radius: 0.35rem;
            color: #263d22;
            background-color: #f3fed2;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 0.2rem 0.4rem #a6c897;
            width: fit-content;
        }

        .hero-contact-button:hover {
            background-color: #dcefc2;
        }

        .hero-contact-button:focus-visible {
            outline: 0.2rem solid #263d22;
            outline-offset: 0.2rem;
        }
    .hero-text-background {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        width: 200%;
        min-width: max(30rem, 20vh);
        aspect-ratio: 1;
        border-radius: 100000px;
        background-color: floralwhite;
        z-index: -1;
    }

@media screen and (max-width: 1000px) {
    .hero-text {
        padding: 1rem;
        font-size: large;
    }
}

/* Service description */
.service-description {
    background-color: #fef6d1; /* from https://heropatterns.com/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23a6c897' fill-opacity='0.11'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 2.5rem) 2rem;
    line-height: 1.25;
    text-align: center;
}

/* How I can help */
.how-i-can-help {
    background-image: linear-gradient(#f7e9c3ef, #f7e9c3df),url('h-co--unsplash.jpg');
    background-size: cover;
    padding: clamp(1.5rem, 4vw, 2.5rem) 2rem;
    text-align: center;
}

    .how-i-can-help ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: clamp(1rem, 3vw, 5rem);
        max-width: 75rem;
        margin: 2rem auto;
        padding: 0;
        list-style: none;
    }

    .how-i-can-help li {
        --p: 1.25rem;
        --s: 17rem;
        width: var(--s);
        height: var(--s);
        box-sizing: border-box;
        border: 0.2rem double #a6c897;
        border-radius: 50%;
        background-color: #fffdf3e6;
        box-shadow: 0 0.3rem 0.7rem #a6c897;
    }
        /* Slightly random looking positions */
        .how-i-can-help li:nth-child(even) {
            transform: translate(-0.5rem, 0.75rem);
        }

        .how-i-can-help li:nth-child(3n) {
            transform: translate(0.5rem, -0.5rem);
        }

        .how-i-can-help li:nth-child(even):hover {
            transform: translate(-0.5rem, 0.75rem) scale(1.1);
        }

        .how-i-can-help li:nth-child(3n):hover {
            transform: translate(0.5rem, -0.5rem) scale(1.1);
        }

        /* Limit text inside bubbles*/
        .how-i-can-help i,
        .how-i-can-help li::before {
            content: '';
            display: block;
            float: left;
            height: 100%;
            width: 50%;
            shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
        }

        .how-i-can-help i {
            float: right;
            shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);
        }

@media screen and (max-width: 600px) {
    .how-i-can-help ul {
        gap: 1rem;
    }

    .how-i-can-help li {
        --s: clamp(8rem, 40vw, 11rem);
        width: var(--s);
        height: var(--s);
        --p: 1rem;
    }
}
/* TODO: add hover interactions (in particular i was thinking to make the circles bigger on hover) */

/* Constructive process and what to expect */
.overall-process {
    display: flex;
    background-color: #fef6d1; /* from https://heropatterns.com/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23a6c897' fill-opacity='0.11'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.a-constructive-process,
.what-to-expect {
    flex: 1 1 0;
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 2.5rem) 2rem;
}

    .a-constructive-process h1 {
        margin: 1rem auto;
        max-width: 30ch;
    }
    .a-constructive-process p {
        font-size: 1.25rem;
        line-height: 1.3;
    }

.what-to-expect {
    border-left: 0.2rem double #a6c897;
}
    .what-to-expect h1 {
        margin: 1rem auto;
        max-width: 30ch;
    }
    .what-to-expect ol {
        max-width: 50ch;
        margin: 1rem auto;
    }

@media screen and (max-width: 700px) {
    .overall-process {
        display: block;
    }

    .what-to-expect {
        border-top: 0.2rem double #a6c897;
        border-left: 0;
    }
}


/* Dispute Types grid section */
.dispute-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    background-color: #feeed1;
    background-image: url('joao-marcelo-martins-unsplash.jpg'); 
    background-size: cover;
}

    .dispute-types > div {
        box-sizing: border-box;
        padding: clamp(1.5rem, 3vw, 2.5rem) 2rem;
        border: 0.2rem double #a6c897;
        height: fit-content;
        background-color: #fef6d1;
    }

    .dispute-types h1 {
        margin: 1rem auto;
        max-width: 30ch;
    }

@media screen and (min-width: 700px) {
    .dispute-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1700px) {
    .dispute-types {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Why work with Resolvewise section */
#why-work-with {
    background-color: #f3fed2;
    border-color: #769f68;
    box-shadow: 0 0.3rem 0.7rem #a6c897;
}

    #why-work-with h1 {
        margin: 1rem auto;
        max-width: 30ch;
    }

    #why-work-with ul {
        max-width: 50ch;
        margin: 1rem auto;
        font-size: 1.25rem;
    }

/* Fees section */
.fees {
    background-color: #fef6d1; /* from https://heropatterns.com/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23a6c897' fill-opacity='0.11'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 2.5rem) 2rem;
}

    .fees h2 {
        margin: 1rem auto;
        max-width: 35ch;
    }

    .fees-text {
        max-width: 55ch;
        margin: 0 auto;
    }

    .fees ul {
        max-width: 55ch;
        margin: 1rem auto;
    }

/* Contact section */
.contact {
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 2.5rem) 2rem;
    text-align: center;
    background-color: #f3fed2;
}

    .contact > p,
    .contact ul {
        max-width: 55ch;
        margin: 1rem auto;
    }

    .contact ul {
        padding: 1rem 2rem;
        border: 0.2rem double #a6c897;
        background-color: #fef6d1;
        text-align: left;
    }

/* About Robert section */
.about-robert {
    background-color: #fef6d1; /* from https://heropatterns.com/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23a6c897' fill-opacity='0.11'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 3rem) 2rem;
}

.about-robert-content {
    flex: 1 1 0;
    max-width: 65ch;
    margin: 0 auto;
    line-height: 1.25;
}

    .about-robert-content h1 {
        max-width: 30ch;
        margin: 1rem auto;
    }

.robert-portrait {
    flex: 0 1 24rem;
    order: 2;
    margin: 0 auto;
}

    .robert-portrait img {
        display: block;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
        border: 0.2rem double #a6c897;
        border-radius: 50%;
        box-shadow: 0 0.3rem 0.7rem #a6c897;
    }

@media screen and (max-width: 700px) {
    .about-robert {
        display: block;
    }

    .robert-portrait {
        max-width: 18rem;
        margin-top: 1.5rem;
    }
}