.why-choose {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;

    height: 1050px;
    width: 100vw;
}

.why-choose-title {
    max-width: 740px;
    text-align: center;
    font-family: 'Smeshariki';
    font-size: 64px;

    background: var(--orange-gradient-0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    line-height: 60px;
}

.why-choose-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 180px;
    width: 100%;
    height: 100%;

    box-sizing: border-box; 
    padding: 150px 196px 0 196px;

    text-align: center;
    max-width: var(--content-max-width);
    position: relative;

    z-index: 200;
}

.why-choose-arrow-1 {
    position: absolute;
    left: 400px;
    top: 20px;
    width: 100px;
    height: 100px;
}

.why-choose-arrow-2 {
    position: absolute;
    right: 400px;
    top: 0;
    width: 100px;
    height: 100px;
}

.why-choose-arrow-3 {
    position: absolute;
    left: 400px;
    top: 550px;
    width: 100px;
    height: 100px;
    display: none;
}

.why-choose-arrow-4 {
    position: absolute;
    right: 400px;
    top: 800px;
    width: 100px;
    height: 100px;
    display: none;
}


.why-choose-content-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    gap: 44px;
}

.why-choose-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    background-color: var(--purple-0);
    max-width: 470px;
    border-radius: 32px;
    padding: 24px;
    box-sizing: border-box; 

    position: relative;

    box-shadow: 1px 3px 5px rgba(73, 51, 78, 0.5);
}

.why-choose-card--1 { transform: rotate(-10deg); }
.why-choose-card--2 { transform: rotate(4deg); }
.why-choose-card--3 { transform: rotate(7deg); }
.why-choose-card--4 { transform: rotate(-5deg); }

.why-choose-card-title {
    text-align: center;
    font-family: 'Smeshariki';
    font-size: 28px;

    padding: 0 32px;
}

.why-choose-card-title--1 {
    background: var(--violete-gradient-0);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.why-choose-card-title--2 {
    background: var(--violete-gradient-1);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.why-choose-card-description {
    font-size: 16px;   
}

.why-choose-card-description--1 {
    max-width: 400px;
}

.star {
    position: absolute;

    width: 60px;
    height: 60px;
    animation: spin 15s linear infinite;
}

.star--1 {
    top: -16px;
    left: -16px;
}

.star--2 {
    top: -28px;
    left: -5px;
}

.star--3 {
    top: -10px;
    left: -28px;
}

.star--4 {
    top: -16px;
    left: -10px;
}

.why-choose-main-image {
    position: absolute;
    bottom: -220px;
    
    width: 700px;
    height: 1000px;
    
    z-index: -10;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1360px) {
    .why-choose {
        height: 1600px;
    }

    .why-choose-content {
        gap: 96px;
    }

    .why-choose-content-row {
        flex-direction: column;
        gap: 120px;
    }

    .why-choose-content-row .why-choose-card:first-child {
        align-self: flex-start;
    }

    .why-choose-content-row .why-choose-card:last-child {
        align-self: flex-end;
    }

    .why-choose-card--3 { transform: rotate(-7deg); }
    .why-choose-card--4 { transform: rotate(5deg); }

    .why-choose-arrow-2 {
        top: 280px;
    }

    .why-choose-arrow-3 {
        display: block;
    }

    .why-choose-arrow-4 {
        display: block;
    }
}

@media (max-width: 1180px) {
    .why-choose-content {
        padding: 120px 96px 0 96px;
    }

    .star {
        position: absolute;

        width: 40px;
        height: 40px;
        animation: spin 15s linear infinite;
    }

    .star--1 {
        top: -6px;
        left: -6px;
    }

    .star--2 {
        top: -18px;
        left: -5px;
    }

    .star--3 {
        top: -10px;
        left: -18px;
    }

    .star--4 {
        top: -6px;
        left: -10px;
    }

    .why-choose-arrow-1 {
        left: 230px;
    }

    .why-choose-arrow-2 {
        right: 250px;
    }

    .why-choose-arrow-3 {
        left: 230px;
    }
    
    .why-choose-arrow-4 {
       right: 250px;
    }
}


@media (max-width: 990px) { 
    .why-choose {
        height: 1500px;
    }

    .why-choose-main-image {
        bottom: -250px;
    }
}

@media (max-width: 820px) {

    .why-choose-title {
        font-size: 40px;
        max-width: 600px;
        line-height: 46px;
    }

    .why-choose-main-image {
        bottom: -240px;
    }

    .why-choose {
        height: 1600px;
    }

    .why-choose-arrow-1 {
        width: 85px;
        height: 85px;
    }

    .why-choose-arrow-2 {
        width: 85px;
        height: 85px;
        top: 300px
    }

    .why-choose-arrow-3 {
        width: 85px;
        height: 85px;
        top: 570px
    }
    
    .why-choose-arrow-4 {
       width: 85px;
       height: 85px;
       top: 830px
    }
}

@media (max-width: 670px) {
   .why-choose-card-title {
        font-size: 20px;
   }

   .why-choose-card-description {
        font-size: 12px;
    }

    .why-choose-content {
        padding: 70px 32px 0 32px;
    }

    .why-choose-arrow-1 {
        width: 55px;
        height: 55px;
        left: 140px;
    }

    .why-choose-arrow-2 {
        width: 55px;
        height: 55px;
        top: 230px;
        right: 160px;
    }

    .why-choose-arrow-3 {
        width: 55px;
        height: 55px;
        top: 460px;
        left: 140px;
    }
    
    .why-choose-arrow-4 {
       width: 55px;
       height: 55px;
       top: 690px;
       right: 160px;
    }
}

@media (max-width: 560px) {
    .why-choose {
        height: 1500px;
    }

    .why-choose-main-image {
        bottom: -110px;
        
        width: 470px;
        height: 650px;
    }
}


@media (max-width: 480px) { 
    .why-choose-arrow-3 {
        top: 475px;
    }
    
    .why-choose-arrow-4 {
       top: 705px;
    }
}

@media (max-width: 450px) { 
    .why-choose {
        height: 1600px;
    }

    .why-choose-main-image {
        bottom: -125px;
    }

    .why-choose-card-title {
        font-size: 18px;
        padding: 0;
    }
}

@media (max-width: 400px) { 
    .why-choose-title {
        font-size: 32px;
        line-height: 40px;
        max-width: 340px;
    }

    .why-choose-arrow-1 {
        left: 80px;
    }

    .why-choose-arrow-2 {
        top: 245px;
    }

    .why-choose-arrow-3 {
        top: 485px;
    }
    
    .why-choose-arrow-4 {
       top: 735px;
    }
}

@media (max-width: 370px) {
    .why-choose-arrow-3 {
        top: 525px;
    }
    
    .why-choose-arrow-4 {
       top: 760px;
    } 
}

@media (max-width: 330px) {
    .why-choose-arrow-3 {
        top: 545px;
    }
    
    .why-choose-arrow-4 {
       top: 800px;
    } 
}