:root {
    --buttons-color: #ff0000;
    --bg-cards-color: #A30000;
    --bg-button-color: #a30000c9;
    --header-footer-def-color: #6b0000;
    --section-bg-color: #ffdede;
    --white-color: #fff;
    --price-title: #79bfff;
    --price-text: #b7dcff;
}

/*================= HEADER ===============*/

@media screen and (min-width: 320px) {
    .header__ff {
        padding: 28px 10px;
    }

    .contacts__menu {
        display: flex;
        gap: 10px;
    }

    .contact__link {
        font-size: 12px;
        font-weight: 450;
        padding: 8px 12px;
    }

    .sub__h {
        font-size: 26px;
    }

    .button__div {
        max-width: 200px;
        padding: 20px;
    }

    .sub__button {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) {
    .header__ff {
        padding: 28px 58px;
    }

    .contacts__menu {
        display: flex;
        gap: 24px;
    }

    .contact__link {
        font-size: 20px;
        font-weight: 450;
        padding: 4px 12px;
    }

    .sub__h {
        font-size: 38px;
    }

    .button__div {
        max-width: 300px;
        padding: 20px;
    }

    .sub__button {
        font-size: 22px;
    }
}

@media screen and (min-width: 1158px) {
    .header__ff {
        padding: 28px 88px;
    }

    .contacts__menu {
        display: flex;
        gap: 28px;
    }

    .contact__link {
        font-size: 24px;
        font-weight: 450;
        padding: 5px 15px;
    }

    .sub__h{
        font-size: 50px;
    }

    .button__div {
        max-width: 340px;
        padding: 26px;
    }

    .sub__button {
        font-size: 28px;
    }
}



.header__ff{
    display: flex;
    background-color: var(--header-footer-def-color);
        background-image: url(../images/gamepad.png);
        background-size: cover;
        box-shadow: 5px 0 40px 1px #6b0000;
}

.header__div {
    margin: 0 auto;
    padding: 0 auto;
    width: 100%;
}

.header__menu {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.contacts__menu{
    display: flex;
    list-style-type: none;
}

.contact__link {
    color: var(--bg-cards-color);
    transition: 600ms;
    border: 2px solid var(--bg-button-color);
    border-radius: 50px;
}

.header__admin__svg {
    fill: var(--bg-cards-color);
    transition: 600ms;
}

.header__admin__svg:hover {
    fill: var(--buttons-color)
}

.contact__link:hover {
    color: var(--buttons-color);
    border: 2px solid var(--buttons-color);
}

.sub__div {
    width: 100%;
    padding-top: 180px;
    padding-bottom: 235px;
    margin: 0;
}

.sub__h{
    text-align: center;
    color: var(--white-color);
    margin-bottom: 80px;
}

.button__div {
    background-color: var(--bg-button-color);
    margin: 0 auto;
    text-align: center;
    border-radius: 50px;
    transition: 600ms;
}

.button__div:hover {
    background-color: var(--bg-cards-color);
}

.sub__button {
    text-decoration: none;
    color: var(--white-color);
}

/* MAIN */

/* .main__ff {
    padding: 0px 60px 0px 60px;
} */

@media screen and (min-width: 320px) {
    .section__title {
        font-size: 32px;
        margin-top: 100px;
        margin-bottom: 80px;
    }

    .section {
        margin-top: 80px;
    }
}

@media screen and (min-width: 768px) {
    .section__title {
        font-size: 32px;
        margin-top: 100px;
        margin-bottom: 80px;
    }

    .section {
        margin-top: 120px;
    }
}

@media screen and (min-width: 1158px) {
    .section__title {
        font-size: 44px;
        margin-top: 100px;
        margin-bottom: 80px;
    }

    .section {
        margin-top: 120px;
    }
}

.section__title {
    text-align: center;
}

/* SECTION 1 */

@media screen and (min-width: 320px) {
    .about__us {
        padding: 0 5px;
    }

    .about__us__div {
        display: block;
        text-align: center;
    }

    .about__us__p {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) {
    .about__us {
        padding: 0 60px;
    }

        .about__us__div {
            display: flex;
        }

    .about__us__p {
        font-size: 24px;
        padding-left: 30px;text-align: start;
    }
}

@media screen and (min-width: 1158px) {
    .about__us {
        padding: 0 180px;
    }

    .about__us__div {
        display: flex;
    }

    .about__us__p {
        font-size: 34px;
        padding-left: 40px;
        text-align: start;
    }
}

.about__us__div {
    margin: 0 auto;
    /* align-items: center; */
}

.about__us__img {
    border-radius: 20%;
}



/* SECTION 2 */

@media screen and (min-width: 320px) {

    .how__it__works {
            padding: 1px 20px 80px 20px;
        }

    .how__it__works__li {
        margin-bottom: 60px;
    }

    .how__it__works__p {
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) {

    .how__it__works {
            padding: 1px 20px 80px 20px;
        }

    .how__it__works__li {
        margin-bottom: 60px;
    }

    .how__it__works__p {
        font-size: 20px;
    }
}

@media screen and (min-width: 1158px) {
    .how__it__works {
        padding: 1px 20px 80px 20px;
    }
    .how__it__works__li {
        margin-bottom: 60px;
    }

    .how__it__works__p {
        font-size: 28px;
    }
}

.how__it__works {
    background-color: var(--section-bg-color);
}

.how__it__works__list {
    text-align: center;
    list-style-type: none;
    margin-left: -40px;
}

/* SECTION 3 */

@media screen and (min-width: 320px) {
    .price__section {
        margin: 0 20px;
        text-align: center;
    }

    .vb__img {
        height: 300px;
        border-radius: 20px;
        background-image: url(../images/img.png);
        background-size: cover;
    }

    .gift__img {
        height: 300px;
        border-radius: 20px;
        background-image: url(../images/gift.jpg);
        background-size: cover;
    }

    .price__div {
        display: block;
    }

    .price__img__div {
        width: 100%;
    }

    .price__h {
        font-size: 42px;
    }

    .price__li {
        font-size: 24px;
    }
}

@media screen and (min-width: 768px) {
    .price__section {
        margin: 0 120px;
        text-align: center;
    }

    .vb__img {
        height: 300px;
        border-radius: 20px;
        background-image: url(../images/img.png);
        background-size: cover;
    }

    .gift__img {
        height: 300px;
        border-radius: 20px;
        background-image: url(../images/gift.jpg);
        background-size: cover;
    }

    .price__div {
        display: block;
    }

    .price__img__div {
        width: 100%;
    }

    .price__h {
        font-size: 42px;
    }

    .price__li {
        font-size: 24px;
    }
}

@media screen and (min-width: 1158px) {
    .price__section {
        margin: 0 240px;
    }

    .price__div {
        display: flex;
        text-align: start;
    }

.vb__img {
    height: 440px;
    border-radius: 20px;
    background-image: url(../images/img.png);
    background-size: cover;
}

.gift__img {
    height: 660px;
    border-radius: 20px;
    background-image: url(../images/gift.jpg);
    background-size: cover;
}

    .price__img__div {
        width: 600px;
    }

    .price__h {
        font-size: 42px;
    }

    .price__li {
        font-size: 24px;
    }
}

.price__div {
    background-color: #195dac;
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 25px;
}

.price__img__div {
    border-radius: 20px;
    margin-right: 20px;
}

.price__h {
    color: var(--price-title);
}

.price__list {
    margin-left: -40px;
    list-style-type: none;
}

.price__li {
    color: var(--price-text);
}

/* SECTION 4 */

@media screen and (min-width: 320px) {
    .our__team {
        padding: 1px 10px 60px 10px;
        margin: 0;
    }

    .our__team__list {
        display: block;
        text-align: center;
        margin-left: -40px;
    }

    .our__team__li {
        margin: 0 auto;
        width: 300px;
        margin-bottom: 30px;

    }

    .worker__name {
        font-size: 34px;
    }

    .worker__role {
        font-size: 14px;
    }

    .worker__contact {
        font-size: 20px;
    }
}

@media screen and (min-width: 952px) {
    .our__team {
        padding: 1px 20px 60px 20px;
        margin: 0;
    }

    .our__team__list {
        display: flex;
        text-align: center;
    }

    .our__team__li {
        margin: 0 auto;
        width: 300px;
        margin-bottom: 30px;

    }

    .worker__name {
        font-size: 38px;
    }

    .worker__role {
        font-size: 14px;
    }

    .worker__contact {
        font-size: 20px;
    }
}

@media screen and (min-width: 1158px) {
    .our__team {
        padding: 1px 120px 60px 120px;
    }

    .our__team__list {
        display: flex;
        justify-content: space-evenly;
    }

    .worker__name {
        font-size: 38px;
    }

    .worker__role {
        font-size: 14px;
    }

    .worker__contact {
        font-size: 20px;
    }
}


.our__team {
    background-color: var(--section-bg-color);
}

.our__team__list {
    list-style-type: none;
}

.our__team__li {
    border-radius: 30px;
    background-color: var(--bg-cards-color);
}

.worker__img {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.worker__info {
    text-align: center;
    padding: 16px;
}

.worker__name {
    color: var(--section-bg-color);
    margin-top: 10px;
    margin-bottom: 8px;
}

.worker__role {
    color: var(--white-color);
}

.contact__div {
    background-color: var(--buttons-color);
    padding: 12px;
    border-radius: 20px;
    transition: 800ms;
}

.worker__contact {
    font-weight: 400;
    color: var(--white-color);
    text-decoration: none;
}

.contact__div:hover {
    background-color: var(--header-footer-def-color);
}

/* FOOTER */

@media screen and (min-width: 320px) {
    .footer__ff {
        padding: 80px 20px 10px 20px;
    }

        .footer__master__div {
            display: block;
            text-align: center;
        }

    .footer__text {
        font-size: 18px;
    }

    .footer__network_h {
        margin-top: 80px;
        font-size: 18px;
    }

    .footer__soc__list {
        margin-left: -36px;
    }
}

@media screen and (min-width: 768px) {
    .footer__ff {
        padding: 80px 100px 10px 100px;
    }

        .footer__master__div {
            display: flex;
            text-align: start;
        }

    .footer__text {
        font-size: 20px;
    }

    .footer__network_h {
        margin-top: 0;
        font-size: 18px;
        /* margin-left: 42px; */
    }
}

@media screen and (min-width: 1158px) {
    .footer__ff {
        padding: 80px 160px 10px 160px;
    }

    .footer__master__div {
        display: flex;
        text-align: start;
    }

    .footer__text {
        font-size: 28px;
    }

    .footer__network_h {
        margin: 0;
        font-size: 24px;
    }
}

.footer__ff {
    background-color: var(--header-footer-def-color);
}

.footer__text {
    color: var(--section-bg-color);
}

.footer__master__div {
    justify-content: space-between;
}

.footer__network_h {
    color: var(--section-bg-color);
}

.footer__soc__list {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.footer_li {
list-style: none;
    background-color: var(--section-bg-color);
    border-radius: 30%;
    padding: 8px;
    transition: 600ms;
}

.footer_li:hover {
    background-color: var(--buttons-color);
    border-radius: 50%;
}

.made__in {
    margin-top: 70px;
    display: block;
    text-align: center;
}

.made__in__p {
    color: #ffc0c0c0;
    font-size: 12px;
}