.banner h1,
.banner h2 {
    margin-bottom: 20px;
}

/* section services */
section.services>.container>.column,
section.services .container-services {
    gap: var(--space-xl);
}

section.services .container-services .cercle-1,
section.services .container-services .cercle-2,
section.services .container-services .cercle-3 {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
    height: 100%;
    width: auto;
}

section.services .container-services .cercle-1 {
    animation: pulse-animation-1 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

section.services .container-services .cercle-2 {
    animation: pulse-animation-2 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

section.services .container-services .cercle-3 {
    animation: pulse-animation-3 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-animation-1 {
    0% {
        scale: 0;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }

    30% {
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 10%);
    }

    60% {
        scale: 0.6;
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 20%);
    }

    100% {
        scale: 0.6;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }
}

@keyframes pulse-animation-2 {
    0% {
        scale: 0;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }

    20% {
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 10%);
    }

    50% {
        scale: 0.8;
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 20%);
    }

    100% {
        scale: 0.8;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }
}

@keyframes pulse-animation-3 {
    0% {
        scale: 0;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }

    10% {
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 10%);
    }

    40% {
        scale: 1;
        box-shadow: 0 0 0 4px hsl(var(--secondary-values), 20%);
    }

    100% {
        scale: 1;
        box-shadow: 0 0 0 0px hsl(var(--secondary-values), 0%);
    }
}

section.services .container-services .grid-elements {
    --grid-gap: var(--space-xl);
}

section.services .card {
    max-width: 18rem;
    padding: 3rem 1rem 1rem 1rem;
}

section.services .card svg.icon {
    position: absolute;
    top: -32px;
    margin: auto;
    left: 0;
    right: 0;
    scale: 1;
    transition: var(--fast-transition);
}

section.services .card:hover svg.icon {
    transform: rotate(10deg);
    scale: 1.05;
    transition: var(--fast-transition);
}


/* section partners */
section.partners h2.h3 {
    background: var(--gradient);
    color: var(--white);
    border-radius: var(--radius-round);
    padding: 16px 24px;
}

section.partners picture {
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    aspect-ratio: 1 / 1;
}

/* section contact */
section#contact form {
    width: 100%;
    max-width: 40rem;
    padding: var(--space-l);
}

section#contact form button {
    width: 100%;
    box-shadow: var(--shadow);
}

@media screen and (max-width: 1024px) {
    section.services .container-services .grid-elements.grid-3 {
        --grid-col: 3;
    }
}

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

    section.partners .grid-elements.grid-5,
    section.services .container-services .grid-elements.grid-3 {
        --grid-col: 3;
    }
}

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

    section.services .container-services .cercle-1,
    section.services .container-services .cercle-2,
    section.services .container-services .cercle-3,
    section.services .container-services .grid-elements.grid-3 .card-logo {
        display: none;
        visibility: hidden;
    }

    section.services .container-services .grid-elements.grid-3 {
        --grid-col: 1;
    }

    section.services .container-services .card {
        max-width: 80%;
        left: 16px;
        padding: 1rem 1rem 1rem 3rem;
    }

    section.services .container-services .card svg.icon {
        top: 0;
        bottom: 0;
        margin: auto;
        left: -32px;
        right: auto;
    }

    section.partners .grid-elements.grid-5 {
        --grid-col: 3;
    }
}