:root {
    --white: #ffffff;
    --blue: #00AFFF;
    --red: #ED4261;
    --grey: #C4C4C4;
}

main + .footer {
    padding-top: 0 !important ;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

main {
    background: url(../img/pattern.png), linear-gradient(180deg, #002 0%, #002 49.81%, #320072 100%);
    background-blend-mode: lighten, normal;
   
}

.main__description {
    max-width: 730px;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.48px;
    text-align: center;
    color: var(--white);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #FFF;
    background: rgba(0, 54, 136, 0.30);
    margin: 47px auto 0;
}

/* Banner */

.banner {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    border-radius: 20px;
    border: 1px solid #FFF;
    background: linear-gradient(0deg, rgba(0, 54, 136, 0.30) 0%, rgba(0, 54, 136, 0.30) 100%), rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10px);

    padding: 39px 101px 62px;
}

.banner-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}

.banner__title {
    font-size: 69px;
    font-weight: 700;
    line-height: 83px;
    color: var(--white);
    margin: 0;
}

.banner__subtitle {
    font-size: 34.5px;
    font-weight: 400;
    line-height: 38px; 
    color: var(--white);
    margin: 0;
}

/* Contest */

.contest {

}

.contest__title {
    font-size: 64px;
    font-weight: 700;
    line-height: 70px;
    text-align: center;
    color: var(--white);
    margin: 0;
}


.about-contest__text {
    max-width: 730px;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.48px;
    text-align: center;
    color: var(--white);
    border-radius: 20px;
    border: 1px solid #FFF;
    background: rgba(0, 54, 136, 0.30);
    padding: 16px 0 20px 0px;
    margin: 58px auto 0;
}

.about-contest__text span {
    font-weight: 700;
}

/* Stage */

.stage {
    position: relative;
}

.stage:before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    border-radius: 50%;
    border: 1px solid #FFF;
    background: rgba(0, 54, 136, 0.30);
}

.stage--form:before {
    content: '1';
    bottom: 22px;
    right: 17px;
} 

.stage--promocode:before {
    content: '2';
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
} 

.stage--date:before {
    content: '3';
    bottom: 26px;
    left: 19px;
} 

.stage--random:before {
    content: '4';
    bottom: 35px;
    left: 19px;
} 

.stage--prize:before {
    content: '5';    
    bottom: 19px;
    left: 19px;
} 

.stage--draw:before {
    content: '1';
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
} 

.stage--prize-1:before {
    content: '2';
    bottom: -107px;
    right: 17px;
}

.stage--prize-2:before {
    content: '3';
    bottom: -107px;
    right: 17px;
}

.stage--prize-3:before {
    content: '4';
    bottom: -107px;
    right: 17px;
}

.stage--another-rooms:before {
    content: '5';
    bottom: 19px;
    left: 19px;
}


@media(max-width: 1200px) {
    /* Banner */
    .banner {
        padding: 50px;
    }
}

@media(max-width: 1024px) {
    .wrapper {
        padding: 0 16px;
    }

    /* Main */

    .main__description {
        max-width: 424px;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.36px;
        padding: 15px;
        margin: 35px auto 0;
    }
    
    /* Banner */

    .banner {
        padding: 24px 62px 43px;
        gap: 14px;
    }

    .banner-info {
        flex-shrink: 0;
    }

    .banner__title {
        font-size: 43px;
        line-height: 52px;
    }
    
    .banner__subtitle {
        font-size: 22px;
        line-height: 24px; 
    }

    /* Contest */
    .contest__title {
        font-size: 40px;
        line-height: 1;
    }

    .about-contest__text {
        max-width: 540px;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.36px;
        border-radius: 15px;
        padding: 11px 6px 11px;
        margin: 34px auto 0;
    }

    .about-contest__text span {
        font-weight: 400;
    }


    .stage:before {
        width: 50px;
        height: 50px;
        font-size: 24px;
        font-weight: 700;
    }

    .stage--form:before {
        content: '1';
        bottom: 22px;
        right: 17px;
    } 
    
    .stage--promocode:before {
        bottom: 29px;
    } 
    
    .stage--prize:before,
    .stage--random:before,
    .stage--another-rooms:before {
        bottom: 12px;
        left: 11px;
    } 

    .stage--date:before {
        bottom: 23px;
        left: 11px;
    }
}

@media(max-width: 892px) {
    .stage--random:before {
        bottom: 23px;
        left: 11px;
    }
}

@media(max-width: 767px) {
    .wrapper--main {
        padding: 0;
    }

    /* Main */

    .main__description {
        line-height: 25px;
        padding: 18px 16px 36px;
    }

    /* Banner */
    .banner {
        border-radius: 0;
        padding: 31px 15px 26px 17px;
        gap: 22px;
        border: 0;
    }

    .banner-info {
        max-width: 125px;
        gap: 0;
    }

    .banner__title {
        font-size: 24px;
        line-height: 28px;
    }
    
    .banner__subtitle {
        font-size: 16px;
        line-height: 21px;
        letter-spacing: 0.32px;
    }

    .banner-image {
        max-width: 246px;
    }

    /* Contest */
    .contest__title {
        font-size: 40px;
        line-height: 1;
    }
    
    .about-contest__text {
        border-radius: 10px;
        padding: 8px 32px 11px;
        margin: 54px auto 0;
    }

    .stage:before {
        display: none;
    }
}