.component-projects {
    margin-top: 149px;
}
.component-projects.top-fix {
    margin-top: 119px;
    margin-bottom: 46px;
}
.projects-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg width='1426' height='607' viewBox='0 0 1426 607' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1017.55 565.322C751.266 465.882 744.446 458.189 462.821 523.153C181.197 588.116 -46.4331 624.302 -112.079 424.568C-173.747 236.801 1269.05 -235.608 1392.38 142.775C1454.05 331.682 1479.91 737.703 1017.55 565.322Z' fill='%23FEF4DF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.no-background {
    background-image: none;
}
.component-projects .icon-heart::before {
    width: 82px;
    height: 73px;
    background-image: url("data:image/svg+xml,%3Csvg width='82' height='73' viewBox='0 0 82 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.7841 0C55.9383 0.0606081 52.1764 1.14833 48.8783 3.15333C45.5801 5.15833 42.8626 8.00961 41 11.4192C39.1374 8.00961 36.4199 5.15833 33.1217 3.15333C29.8236 1.14833 26.0617 0.0606081 22.2159 0C16.0853 0.269877 10.3092 2.98718 6.14965 7.55825C1.99009 12.1293 -0.214854 18.1826 0.0165338 24.3956C0.0165338 40.1299 16.3621 57.3141 30.0711 68.9651C33.1319 71.5712 37.0019 73 41 73C44.9981 73 48.8681 71.5712 51.9289 68.9651C65.6379 57.3141 81.9835 40.1299 81.9835 24.3956C82.2149 18.1826 80.0099 12.1293 75.8503 7.55825C71.6908 2.98718 65.9147 0.269877 59.7841 0Z' fill='%23F0A3A3'/%3E%3C/svg%3E%0A");
    margin-left: 0;
}
.icon-container {
    margin-top: 44px;
}
.projects-intro {
    padding-top: 99px;
    font-family: 'Comfortaa', monospace;
    font-size: 28px;
    line-height: 32px;
    color: #6E4593;
}
@media (max-width: 1560px) {
    .projects-intro {
        font-size: 26px;
    }
    .projects-wrapper {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1070px' height='455px' viewBox='0 0 1068 455' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:evenodd;fill:rgb(99.607843%25,95.686275%25,87.450981%25);fill-opacity:1;' d='M 762.09375 423.757812 C 562.660156 349.21875 557.550781 343.453125 346.628906 392.148438 C 135.707031 440.84375 -34.777344 467.96875 -83.941406 318.25 C -130.128906 177.503906 950.453125 -176.609375 1042.820312 107.023438 C 1089.007812 248.625 1108.375 552.972656 762.09375 423.757812 Z M 762.09375 423.757812 '/%3E%3C/g%3E%3C/svg%3E%0A");
    }
    .component-projects .container-master .head {
        width: 90%;
        margin: 0 auto;
    }
    .project-cards-container {
        width: 90%;
        margin: 0 auto;
    }
}
@media (max-width: 576px) {
    .component-projects {
        margin-top: 98px;
    }
    .project-cards-container {
        margin-top: 10px;
        position: relative;
    }
    .container-master .head h2 {
        font-size: 30px;
    }
    .icon-container {
        margin-top: 14px;
    }
    .project-card {

    }

    .project-cards-container .project-card-title {
        padding-top: 334px;
    }
    .projects-intro {
        padding-top: 88px;
        font-size: 22px;
        line-height: 26px;
    }
    .project-button-prev {
        position: absolute;
        top: 185px;
        left: -10px;
        display: block;
        width: 50px;
        height: 50px;
        background: url("/src/app/component/projects/prev.png");
        z-index: 10;
    }
    .project-button-next {
        position: absolute;
        top: 185px;
        left: auto;
        right: -10px;
        display: block;
        width: 50px;
        height: 50px;
        background: url("/src/app/component/projects/next.png");
        z-index: 10;
    }
    .button-help .btn {
        width: 100%;
    }
    .detail-link::before {
        background-image: none;
    }
    .project-cards-container .detail-link {
        padding-left: 0;
    }
    .swiper-button-prev:after, .swiper-button-next:after {
        content: '' !important;
    }
}

@media (max-width: 360px) {
    .container-master .head h2 {
        font-size: 28px;
    }
}