/* Header service
============================================================ */

.header-service {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 0;
    margin-top: 20px;
    margin-bottom: 60px;
    padding-bottom: 100px;
}

.header-service::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -200px;
    right: 0;
    width: 75%;
    height: calc(100% + 200px);
    background-color: var(--tertiary);
}

.header-service .image {
    position: relative;
}

.header-service .image::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    aspect-ratio: 1/0.89;
    background-image: url('data:image/svg+xml,<svg width="410" height="363" viewBox="0 0 410 363" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:soft-light" opacity="0.86"><path d="M0 362.998H377.73C388.362 348.727 399.102 334.563 409.735 320.292C399.102 306.021 388.362 291.857 377.73 277.586C250.459 277.586 127.27 277.586 0 277.586V362.892V362.998Z" fill="white"/><path d="M300.938 223.359C310.819 209.405 320.7 195.452 330.581 181.393C320.7 167.439 310.711 153.486 300.83 139.427C200.518 139.533 100.313 139.638 0 139.85V222.302C100.313 222.619 200.625 223.042 300.938 223.359Z" fill="white"/><path d="M0 85.2002H377.73C388.362 71.0354 399.102 56.8706 409.735 42.7058C399.102 28.4353 388.362 14.2705 377.73 0C250.459 0 127.27 0 0 0V85.2002Z" fill="white"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    mix-blend-mode: soft-light;
}

.header-service .content {
    padding-right: calc((100% - 540px));
}

.header-service .title {
    font-size: 2.5rem;
}

.header-service .description {
    color: var(--primary);
    max-width: 400px;
    margin-top: 20px;
}

.header-service .button-wrapper {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 15px;
}

@media (min-width: 1800px) {
    .header-service .content {
        padding-right: calc((100% - 740px));
    }
}

@media (max-width: 1200px) {
    .header-service .content {
        padding-left: 30px;
    }
}

@media (max-width: 992px) {
    .header-service {
        margin-top: 0;
        gap: 30px;
        padding-bottom: 30px;
    }

    .header-service::before {
        width: 100%;
        height: 100%;
        top: 0;
    }
}

@media (max-width: 767px) {
    .header-service {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .header-service .content {
        padding: 0 30px 30px 30px;
    }

    .header-service .title {
        font-size: 1.75rem;
    }
}

/* Card grid
============================================================ */

.card-grid {
    width: 1200px;
    max-width: 100%;
    margin: 70px auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-grid .title {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    position: relative;
}

.card-grid .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.card-grid img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.card-grid .card {
    background-color: var(--tertiary);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.card-grid .card .icon {
    width: 70px;
    height: 90px;
    background-color: var(--primary);
    padding: 20px 10px;
    border-radius: 100px;
}

.card-grid .card .title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (min-width: 1800px) {
    .card-grid {
        width: 1600px;
    }
}

@media (max-width: 1024px) {
    .card-grid .title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .card-grid {
        gap: 30px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .card-grid .image {
        aspect-ratio: 1;
    }
}