.main-content__introduction {
    align-items: center;
    gap: 32px;
    margin: 100px 0 180px;

    .content {
        position: relative;

        h2 {
            font-weight: 800;
            position: relative;
            display: inline-block;
        }
        .highlight {
            position: relative;
            z-index: 1;
        }

        .circle-svg {
            position: absolute;
            left: -5%;
            top: -16%;
            width: 107%;
            height: 134%;
            z-index: 0;
            pointer-events: none;
            transform: skewY(1deg);
        }

        .arrow-right {
            position: absolute;
            width: 216px;
            top: -56px;
            right: -32px;
        }
    }

    img {
        width: 100%;
    }
}

.main-content__intro {
    gap: 120px;

    .content--image {
        img {
            width: 100%;
        }
    }

    .content {
        position: relative;

        h2 {
            margin: -64px 0 32px;
        }

        .arrow-left {
            position: absolute;
            top: -104px;
            left: -188px;
            width: 176px;
        }

        .table-animated-img {
            width: 100%;
            position: relative;
            top: -80px;
            background-color: transparent;
            z-index: -1;
            transform: rotateY(180deg) rotateX(30deg);
        }
    }
}

.main-content__projects {
    background-color: var(--secondary-bg-color);
    padding: 160px 0;
    position: relative;


    .triangle--up {
        width: 100%;
        height: 72px;
        background: var(--secondary-color);
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        position: absolute;
        bottom: 0;
    }


    .triangle--down {
        width: 100%;
        height: 72px;
        background: var(--secondary-color);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        top: 0;
    }

    .content {
        h2 {
            color: var(--secondary-color);
            text-align: center;
            margin: 0 0 88px;
            position: relative;

            .underline-container {
                position: relative;
                display: inline-block;
            }

            .underline-svg {
                position: absolute;
                left: 0;
                bottom: -30px;
                width: 108%;
                height: 60px;
            }

            .underline-svg path {
                stroke-dasharray: 250;
                stroke-dashoffset: 250;
                transition: stroke-dashoffset 2s ease-in-out;
            }

            .drawn path {
                stroke-dashoffset: 0;
            }
        }

        .project-carousel {
            display: flex;
            flex-wrap: wrap;
            gap: 64px;

            .project-card {
                width: calc(50% - 32px);
                height: 500px;
                overflow: hidden;
                border-radius: var(--image-border-radius);
                position: relative;
                cursor: pointer;

                &:hover {
                    .project-card--title {
                        font-size: 64px;
                        line-height: 72px;
                    }
                }


                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: all .3s ease;
                    &:hover {
                        transform: scale(1.2);
                    }
                }

                .project-card--title {
                    font-size: 56px;
                    line-height: 64px;
                    position: absolute;
                    top: 75%;
                    left: 50%;
                    transform: translate(-75%, -50%);
                    color: var(--secondary-color);
                    transition: all .3s ease;
                    text-transform: uppercase;
                    font-family: var(--title-font);
                    letter-spacing: 6px;
                }
            }
        }
    }
}

.main-content__about-us {
    margin-top: 148px;
    gap: 64px;

    > div {
        img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            object-position: top;
            border-radius: 4px;
        }
    }
}

.main-content__contact {
    gap: 64px;
    margin-top: 148px;
    margin-bottom: 148px;

    > div {
        img {
            width: 100%;
            object-fit: cover;
        }

        &.content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .contact-button {
            margin-top: 48px;
        }
    }
}

@media screen and (max-width: 600px) {
    .main-content__introduction {
        margin: 56px 0;
        & .content {
            .arrow-right {
                display: none;
            }
        }
    }

    .main-content__intro {
        gap: 0;
        .content--image {
            margin-bottom: 24px;
        }

        .content {
            .table-animated-img {
                top: 0;
            }
        }
    }

    .main-content__projects {
        padding: 112px 0;
        .triangle--down {
            top: -1px;
            height: 32px;
        }
        .triangle--up {
            height: 32px;
        }

        .content {
            .project-carousel {
                .project-card {
                    height: 300px;
                    width: 100%;
                    .project-card--title {
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
    }

    .main-content__about-us {
        margin-top: 56px;
        gap: 32px;
    }

    .main-content__contact {
        margin: 56px 0;
        .content-image {
            order: 2;
        }
    }
}