i {
    width: 2em;
    aspect-ratio: 1/1;
    position: absolute;
    inset: 0;
    background: var(--three-color);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 50%;
    opacity: 0;
    transition: 3s linear;
    animation: i--star 3s infinite linear;
    z-index: 9000;
}

@keyframes i--star {
    40%, 60% {
        opacity: 1;
        scale: 1.1;
    }
}

.section--index {
    min-height: 100dvh;
    max-height: 100dvh;
    padding-bottom: 2em;
    display: grid;
    grid-template-columns: 1fr;

    & > article {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        padding: 2em 5em;
        background: var(--white-color);
        border-radius: 0 0 5em 0;
        box-shadow: var(--box-shadow);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5em;

        @media only screen and (max-width: 800px) {
            gap: 1em;
            padding: 2em;
        }
    }
}

.section--index > article > :nth-child(1) {
    min-width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 1em;
    z-index: 1;

    & > :nth-child(1) {
        margin: 0 0 auto auto;
    }

    & > :nth-child(2) {
        margin: auto auto 0 0;
        animation-delay: 1s;
    }

    & > h1 {
        margin: auto;
        font-size: 5rem;
        color: var(--one-color);
        text-shadow: .5mm .5mm var(--parameter-color);
        display: flex;
        flex-direction: column;
        animation-direction: alternate-reverse;
    }

    & > h2 {
        margin: auto;
        font-size: 1em;
        font-family: "title", "sans-serif";
        font-size: 2.5em;
        color: var(--two-color);
        animation-direction: alternate-reverse;

        &::after {
            width: 100%;
            height: 100%;
            background: var(--white-color);
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            content: "";
            animation: section--index--article--nth-child--1--span--after 1.5s linear;
        }
    }

    @media only screen and (max-width: 800px) {
        grid-area: 1/1/1/3;
    }
}

@keyframes section--index--article--nth-child--1--span--after {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-150%);
    }
}

.section--index > article > :nth-child(2) {
    min-width: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    padding: 1em;
    z-index: 1;

    & > :nth-child(1) {
        margin: 0 auto auto 0;
        animation-delay: .5s;
    }

    & > :nth-child(2) {
        margin: auto 0 auto auto;
        animation-delay: 2s;
    }

    & > :nth-child(3) {
        margin: auto auto 0 0;
        animation-delay: 1s;
    }

    & > :last-child {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        stroke-width: 0;
        z-index: 4;
        scale: 1.25;
        animation-direction: alternate-reverse;
    }

    @media only screen and (max-width: 800px) {
        padding: 1em;
        grid-area: 2/1/2/3;

        & > :nth-child(1) {
            margin: 0 auto auto 60%;
        }

        & > :nth-child(2) {
            margin: auto 0 auto auto;
        }

        & > :nth-child(3) {
            margin: auto auto 0 20%;
        }
    }
}

.section--index > article > button {
    padding: 1mm 1em;
    font-size: 1.5em;
    z-index: 1;
    overflow: unset;
    animation-direction: alternate-reverse;

    &:hover::before {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        border-radius: 1em;
        position: absolute;
        inset: 0;
        content: "";
        transition: .5s linear;
        animation: section--index--article--button--hover .5s infinite linear;
        z-index: -1;
    }

    @media only screen and (max-width: 800px) {
        min-width: 100%;
        max-width: 100%;
        justify-content: center;
        font-size: 1em;
    }
}

@keyframes section--index--article--button--hover {
    to {
        opacity: 0;
        scale: 1.5;
    }
}

.section--index > article > :nth-child(3) {
    margin-left: 0;
    background: var(--one-color);

    & > span {
        color: var(--white-color);
    }

    &::before {
        background: var(--one-color);
    }
}

.section--index > article > :nth-child(4) {
    margin-right: 0;
    background: var(--two-color);

    & > span {
        color: var(--white-color);
    }

    &::before {
        background: var(--two-color);
    }
}

.section--services {
    padding-top: 1em;

    & > article {
        min-width: 100%;
        max-width: 100%;
        background: var(--white-color);
        box-shadow: var(--vertical-reverse-box-shadow);
        border-radius: 5em 0 0 0;
        padding: 5em 2em;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5em 2em;

        @media only screen and (max-width: 800px) {
            padding: 2em;
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

.section--services > article > h2 {
    grid-area: 1/1/1/6;
    font-size: 2em;
    font-family: "title", "sans-serif";
    background: linear-gradient(to right, var(--two-color), var(--one-color));
    background-clip: text;
    color: transparent;
    padding-bottom: 1em;
    border-bottom: .1em dashed var(--parameter-color);
    @media only screen and (max-width: 800px) {
        grid-area: 1/1/1/3;
    }
}

.section--services > article > a {
    min-width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    z-index: 2;

    & > svg {
        min-width: 100%;
        max-width: 100%;
        aspect-ratio: 1/1;
        margin: 0 auto;
        z-index: 1;
    }

    & > img {
        min-width: 20%;
        max-width: 20%;
        aspect-ratio: 1/1;
        border: .3em solid var(--white-color);
        border-radius: 50%;
        position: absolute;
        inset: 0;
        margin: 0;
        transform: translate(0, 0);
        z-index: 1;
        @media only screen and (max-width: 800px) {
            min-width: 50%;
            max-width: 50%;
        }
    }

    & > h3 {
        font-size: 2em;
        font-family: "title", "sans-serif";
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--two-color);
        cursor: pointer;
        z-index: 1;
    }

    &:hover {
        & > svg {
            opacity: .25;
            filter: grayscale(100);
        }

        & > img {
            transform: translate(-50%, 50%);
            scale: 3;
        }
    }

}

.section--services > article > :nth-child(2) {
    @media only screen and (max-width: 800px) {
        grid-area: 2/1/2/3;
        & > img {
            min-width: 25%;
            max-width: 25%;
        }
    }
}

.section--about--us {
    & > article {
        min-width: 100%;
        max-width: 100%;
        background: var(--white-color);
        padding: 2em 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5em;

        @media only screen and (max-width: 800px) {
            padding: 0 2em;
            grid-template-columns: 1fr;
            gap: 1em;
        }
    }
}

.section--about--us > article > :first-child {
    min-width: 100%;
    max-width: 100%;
    display: grid;
    padding: 2em;
    grid-template-columns: 1fr;
    gap: 1em;

    & > h2 {
        padding: 1mm;
        font-size: 3em;
        font-family: "title", "sans-serif";
        color: var(--one-color);
        display: flex;
        align-items: center;
        gap: 1em;
        z-index: 1;

        &::before {
            width: 1em;
            aspect-ratio: 1/1;
            position: relative;
            background: var(--one-color);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            border-radius: .1ch;;
            margin: auto -.5em;
            scale: 1.25;
            content: "";
            z-index: 1;
        }

        &::after {
            height: 100%;
            width: 100%;
            position: absolute;
            inset: 0;
            background: linear-gradient(to left, var(--one-color), transparent);
            opacity: .5;
            border-radius: 1em;
            margin: auto 0;
            content: "";
            z-index: -1;
        }
    }

    & > p {
        font-size: 1.25em;
        text-align: justify;
        line-height: 2em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & > a {
        padding: 1mm 1em;
        border-radius: 1ch;
        background: var(--two-color);
        color: var(--white-color);
        margin: auto auto auto 0;
        z-index: 2;

        &::before {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            margin: auto;
            border-radius: 1ch;
            background: var(--parameter-color);
            transform: translate(15%, 25%);
            content: "";
            z-index: -1;
        }
    }

    @media only screen and (max-width: 800px) {
        padding: 0;
    }
}

.section--about--us > article > :last-child {
    min-width: 100%;
    max-width: 100%;
    background: var(--background-color);
    border-radius: 0 50% 50% 0;
    display: flex;
    padding: 2em;

    & > svg {
        min-width: 100%;
        max-width: 100%;
        aspect-ratio: 1/1;
    }

    @media only screen and (max-width: 800px) {
        border-radius: 50% 50% 0 0;
    }
}

.section--articles {
    padding: 2em 0;
    display: flex;
}

.section--articles > article {
    min-width: 100%;
    max-width: 100%;
    padding: 2em 5em;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5em;


    @media only screen and (max-width: 800px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.section--articles > article > div {
    min-width: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
    padding: 13% 1ch 1mm 1ch;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;

    & > :nth-child(1) {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        position: absolute;
        inset: 0;
        margin: auto;
        fill: var(--white-color);
        z-index: 1;
    }

    & > :nth-child(2) {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        border-radius: 1em 1em 1em 1em;
        margin: 0 auto;
    }

    & > a {
        padding: 1mm 0;
        text-align: justify;
        margin: 0 auto;
        color: var(--two-color);
        font-size: 1.25em;
        font-weight: bold;
    }

    &::before, &::after {
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        background: var(--two-color);
        border-radius: 1em;
        rotate: 5deg;
        position: absolute;
        inset: 0;
        margin: auto;
        content: "";
        scale: 1.05;
        opacity: .75;
        z-index: -1;
    }

    &::before {
        background: var(--one-color);
        rotate: -5deg;
    }
}

/* Mobile fix for typing animation */
@media only screen and (max-width: 800px) {
    .section--index > article > :nth-child(1) > h2 {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 1.5em !important;
        text-align: center !important;
    }
    
    .section--index > article > :nth-child(1) > h2::after {
        animation: none !important;
        display: none !important;
    }
    
    /* Alternative: Make animation faster and complete on mobile */
    .section--index > article > :nth-child(1) > h2 {
        overflow: visible !important;
    }
}