/* Подключение шрифта Inter */
body {
    margin: 0; padding: 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px; line-height: auto;
    color: #000;
    font-weight: 400;
}

h1 {font-size: 58px; font-weight: 700;}
    @media (max-width: 600px) {h1 {font-size: 34px;}}
h2 {font-size: 42px; font-weight: 700;}
    @media (max-width: 600px) {h2 {font-size: 34px;}}
h3 {font-size: 32px; font-weight: 500; margin-bottom: 34px;}
.hcenter {text-align: center; margin-bottom: 20px;}

.all {
    max-width: 1456px; padding: 0 20px; margin: 0 auto;
}

.desktop {display: block;}
.mobile {display: none;}
    @media (max-width: 800px) {
        .desktop {display: none;}
        .mobile {display: block;}
    }

/* INTRO SECTION */
#intro {
  padding: 28px 0 0 0;
}
    @media (max-width: 1000px) { #intro {padding: 20px 0 0 0; margin-bottom: 68px;} }
    /* header */
    header.all {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        gap: 20px 32px;
        margin-bottom: 80px;
    }
        @media (max-width: 600px) { header.all {margin-bottom: 0;} }
        header #header-logo {}
            header #header-logo img {
                width: 136px; height: auto;
            }
                @media (max-width: 800px) {
                    header #header-logo {width: auto;}
                    header #header-logo img {width: 110px;}
                }
        header #header-title {
            background: #EBF6F8;
            color: #000;
            font-size: 14px; font-weight: 300;
            padding: 10px; border-radius: 10px;
        }
            @media (max-width: 600px) {
                header #header-title {
                    order: -1; width: 100%; text-align: center;
                }
            }
        header #header-button {margin-left: auto;}
            header #header-button a {
                font-size: 14px; font-weight: 300;
                color: #fff;
                background: #2C2C2C;
                text-decoration: none;
                padding: 11px 30px;
                border-radius: 10px;
            }
    /* intro-about */
    #intro-about {
        padding: 0;
        display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px 0;
    }
        @media (max-width: 1000px) { #intro-about {flex-direction: column;} }
        #intro-about-content {
            width: 43%;
            padding: 0 20px 123px 20px;
            box-sizing: border-box;
        }
            @media (min-width: 1956px) { #intro-about-content {padding-left: 0;} }
            @media (max-width: 1200px) { #intro-about-content {width: 53%;} }
            @media (max-width: 1000px) { #intro-about-content {width: 100%; padding-bottom: 0;} }
            #intro-about h1 {margin: 0 0 47px 0;}
                @media (max-width: 800px) { #intro-about h1 {margin: 10px 0 32px 0;} }
            #intro-about p {
                font-size: 19px; line-height: 29px; font-weight: 300;
                margin: 0 0 61px 0;
            }
                @media (max-width: 600px) { #intro-about p {font-size: 16px; line-height: 24px; margin-bottom: 32px;} }
            #intro-about a.intro-button {
                text-decoration: none;
                font-size: 19px; color: #fff;
                padding: 13px 40px;
                background: linear-gradient(239.31deg, #DD1C88 58.64%, #8C20A8 108.89%), #FFFFFF;
                opacity: 0.9;
                display: inline-block;
                border-radius: 10px;
            }
                @media (max-width: 600px) { #intro-about a.intro-button {font-size: 16px;} }
        #intro-about-image {
            width: 56%;
        }
            @media (max-width: 1200px) { #intro-about-image {width: 46%;} }
            @media (max-width: 1000px) { #intro-about-image {width: 100%; order: -1; border-bottom: 1px solid #E5E5E5;} }
            #intro-about-image img {
                width: 100%; height: auto;
                display: block;
            }
                @media (max-width: 600px) { 
                    #intro-about-image {overflow: hidden;}
                        #intro-about-image img {width: 135%; margin: 0 auto; display: block;
                            position: relative;
                            left: 50%;
                            transform: translateX(-50%);} 
                        }


/* FEATURES SECTION */
#features {
    padding: 72px 52px;
    box-sizing: border-box;
    margin-bottom: 64px;
    border-radius: 20px; box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.1);
    z-index: 99;
    position: relative;
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 60px 0;
}
    @media (max-width: 800px) { 
        #features {flex-direction: column; padding: 72px 20px; margin-bottom: 0;} 
    }
    .features-item {
        width: 27%;
    }
        @media (max-width: 800px) { .features-item {width: 100%;} }
        .features-item h2 {
            font-size: 19px; font-weight: 700;
            margin: 0 0 16px 0;
        }
        .features-item p {
            font-size: 16px; line-height: 24px; color: #858DA6;
            padding: 0; margin: 0;
        }


/* PROFESSIONAL SECTION */
#professional {
    padding: 126px 20px;
    box-sizing: border-box;
    margin-bottom: 112px;
    background: #EBF6F8;
    border-radius: 20px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 76px;
}
    @media (max-width: 600px) { 
        #professional {
            padding: 84px 20px 72px 20px; gap: 40px; margin-bottom: 0; border-radius: 20px 20px 0 0;
            border-bottom: 1px solid #ccc;
        } 
    }
    #professional h2 {
        margin: 0; padding: 0;
    }
        @media (max-width: 600px) { #professional h2 {font-size: 24px;} }
    #professional p {
        margin: 0; padding: 0;
        line-height: 27px;
        max-width: 740px;
    }
    .professional-items {
        display: flex; flex-wrap: wrap; gap: 20px 24px; justify-content: center;
    }
        .professional-item {
            background: #2C2C2C;
            color: #fff;
            font-size: 17px; line-height: 24px;
            border-radius: 10px;
            padding: 12px 30px;
        }
            @media (max-width: 600px) { .professional-item {width: 100%; font-size: 15px;} }
            .professional-item b {
                display: block;
            }

/* FUNCTIONALITY SECTION */
#functionality {
    background: #F5F5F5;
    padding: 62px 0;
    margin-bottom: 112px;
}
    #functionality .all {
        display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px 0;
    }
        #functionality .functionality-item {
            width: 48%;
            background: #fff;
            text-align: center;
            padding: 50px 80px 0 80px;
            box-sizing: border-box;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
        }
            @media (max-width: 800px) { #functionality .functionality-item {width: 100%; padding: 40px 20px 0 20px;} }
            #functionality .functionality-icon {
                margin-bottom: 42px;
                width: 48px; height: auto;
                align-self: center;
            }
            .functionality-item.functionality-item-sports {
                justify-content: center;
                gap: 30px;
            }
            .functionality-item.functionality-item-sports div {
                display: flex; flex-wrap: wrap; gap: 8px;
                justify-content: center;
                margin-bottom: 30px;
            }
                .functionality-item.functionality-item-sports span {
                    display: inline-block;
                    padding: 10px 20px;
                    background: #2c2c2c; color: #fff; font-size: 14px;
                    border-radius: 10px;
                }
            #functionality .functionality-item p {
                line-height: 27px;
                margin: 0 0 20px 0; padding: 0;
            }
            #functionality .functionality-img {
                margin-top: auto;
                align-self: center;
                display: block;
                width: 100%; height: auto;
            }
            #functionality .functionality-img.functionality-img-5 {
                width: 70%;
            }
            

/* PRICE SECTION */
#price {
    margin-bottom: 100px;
}
    #price h2 {
        text-align: center;
        margin-bottom: 84px;
    }
    #price .price-items {
        display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 48px;
    }
    #price .price-item {
        max-width: 390px;
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.1);
        padding: 40px 30px;
        box-sizing: border-box;
    }
    #price .price-item-title {
        font-size: 12px;
        margin-bottom: 12px;
    }
    #price .price-item-subtitle {
        color: #858DA6;
        margin-bottom: 36px;
        padding-bottom: 18px;
        border-bottom: 1px solid #E5E5E5;
    }
        #price .price-item-subtitle span {
            font-size: 22px; color: #000; font-weight: 700;
        }
    #price .price-item-content {
        font-size: 16px; line-height: 24px;
        margin-bottom: 16px;
    }
        #price .price-item-content div {
            padding-left: 24px;
            background: url(img/checked.png) no-repeat 0 9px / 11px auto;
            margin-bottom: 12px;
        }

/* VERY PERSONAL SECTION */
#very-personal {
    display: flex; flex-direction: column; align-items: center;
    gap: 45px;
    text-align: center;
    margin-bottom: 150px;
    max-width: 820px;
}
    @media (max-width: 600px) { #very-personal {gap: 28px; margin-bottom: 100px;} }
    #very-personal-image {}
        #very-personal-image img {
            width: 77px; height: auto;
        }
    #very-personal p {
        margin: 0; padding: 0;
        line-height: 27px;
    }
    #very-personal a.go-button {
        text-decoration: none;
        font-size: 19px; color: #fff;
        padding: 13px 40px;
        background: linear-gradient(239.31deg, #DD1C88 58.64%, #8C20A8 108.89%), #FFFFFF;
        opacity: 0.9;
        display: inline-block;
        border-radius: 10px;
    }

/* FOOTER SECTION */
footer {
    border-top: 1px solid #E5E5E5;
    padding: 36px 0;
}
    footer .footer-content {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        gap: 30px 20px;
    }
        footer .footer-left {
            font-size: 13px; line-height: 20px; font-weight: 300; color: #3B3B3B;
        }
        footer .footer-right {
            font-weight: 300;
            background: url(img/telegram.png) no-repeat 0 50% / 15px auto;
            padding-left: 25px;
        }
            footer .footer-right a {
                color: #000;
                font-weight: 500;
            }