/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Fonts */
@font-face{
    src: url("../fonts/Montserrat-Light.ttf");
    font-weight: 200;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Montserrat-Regular.ttf");
    font-weight: 400;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: 700;
    font-family: Montserrat;
    font-display: swap;
}
/* CSS Reset */
*{
    padding: 0;
    margin: 0;
    font-family: Montserrat, serif;
    font-size: var(--defaultFont);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #1f2749;
}
/* Global */
:root{
    --colorMain: #352CE8;
    --colorSecond: #E0DEFF;
    --colorWhite: #FFFFFF;
    --colorGrey: #F8F8F8;
    --colorMainLight: #847EFC;
    --colorBlack: #000000;
    --borderRadiusSmall: 15px;
    --borderRadius: 25px;
    --borderRadiusBig: 50px;
    --h1: 72px;
    --h2: 68px;
    --h3: 48px;
    --h4: 36px;
    --h5: 28px;
    --h6: 24px;
    --h7: 16px;
    --defaultFont: 18px;
}
body{
    background-color: var(--colorGrey);
}
html{
    scroll-behavior: smooth;
}
.header_relative header{
    position: relative;
}
header{
    position: absolute;
    z-index: 9;
    width: 100%;
}
.section{
    width: 100%;
    display: -ms-grid;
    display: grid;
    padding: 75px 0;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    z-index: 2;
    position: relative;
    overflow: hidden;
}
.container{
    width: 100%;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: start;
        align-content: start;
    padding: 0 10%;
}
.h1{
    font-size: var(--h1);
}
.h2{
    font-size: var(--h2);
}
.h3{
    font-size: var(--h3);
}
.h4{
    font-size: var(--h4);
}
.h5{
    font-size: var(--h5);
}
.h6{
    font-size: var(--h6);
}
.h7{
    font-size: var(--h7);
}
.default-font{
    font-size: var(--defaultFont);
}
.link{
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.btn-main, .btn-white{
    padding: 10px 25px;
    cursor: pointer;
    text-decoration: none;
    color: var(--colorWhite);
    background-color: var(--colorMain);
    outline: none;
    border-radius: var(--borderRadiusSmall);
    -webkit-transition: background-color .3s ease, color .3s ease, color .3s ease;
    -o-transition: background-color .3s ease, color .3s ease, color .3s ease;
    transition: background-color .3s ease, color .3s ease, color .3s ease;
    text-align: center;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid var(--colorMain);
}
.btn-white{
    background-color: var(--colorWhite);
    color: var(--colorBlack);
    border: 1px solid var(--colorBlack);
}
.btn-long{
    padding: 10px 75px;
}
.btn-main:hover, .btn-main:focus-visible{
    background-color: transparent;
    color: var(--colorMain);
}
.btn-white:hover, .btn-white:focus-visible{
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}
.w-200{
    font-weight: 200;
}
.w-400{
    font-weight: 400;
}
.w-600{
    font-weight: 600;
}
.w-700{
    font-weight: 700;
}
.txt-gradient{
    background: -o-linear-gradient(330deg, var(--colorMainLight) 20%, var(--colorMain));
    background: linear-gradient(120deg, var(--colorMainLight) 20%, var(--colorMain));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.border-2{
    border-width: 2px;
}
.color-main{
    color: var(--colorMain);
}
.color-main-light{
    color: var(--colorMainLight);
}
.color-white{
    color: var(--colorWhite);
}
.color-grey{
    color: var(--colorGrey);
}
.color-black{
    color: var(--colorBlack);
}
.color-second{
    color: var(--colorSecond);
}
.color-red{
    color: red;
}
.color-green{
    color: #447e43;
}
.grid{
    display: -ms-grid;
    display: grid;
}
.gap-10{
    gap: 10px;
}
.gap-25{
    gap: 25px;
}
.gap-50{
    gap: 50px;
}
.gap-75{
    gap: 75px;
}
.gap-100{
    gap: 100px;
}
.grid-row{
    grid-auto-flow: column;
}
.grid-column{
    grid-auto-flow: row;
}
.ta-c{
    text-align: center;
}
.jc-s{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}
.jc-c{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.jc-e{
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}
.jc-sb{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.jc-se{
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.jc-sa{
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.ac-s{
    -ms-flex-line-pack: start;
        align-content: start;
}
.ac-c{
    -ms-flex-line-pack: center;
        align-content: center;
}
.ac-e{
    -ms-flex-line-pack: end;
        align-content: end;
}
.ac-sb{
    -ms-flex-line-pack: justify;
        align-content: space-between;
}
.ac-se{
    -ms-flex-line-pack: space-evenly;
        align-content: space-evenly;
}
.ai-s{
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}
.ai-c{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.ai-e{
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}
.ji-s{
    justify-items: start;
}
.ji-c{
    justify-items: center;
}
.ji-e{
    justify-items: end;
}
.js-s{
    -ms-grid-column-align: start;
        justify-self: start;
}
.js-c{
    -ms-grid-column-align: center;
        justify-self: center;
}
.js-e{
    -ms-grid-column-align: end;
        justify-self: end;
}
.as-s{
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
}
.as-c{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}
.as-e{
    -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-75{
    margin-bottom: 75px;
}
.mb-100{
    margin-bottom: 100px;
}
.w-inherit{
    font-weight: inherit;
}
.font-inherit{
    font-size: inherit;
}
.family-inherit{
    font-family: inherit;
}
.txt-inherit{
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
}
.width-100{
    width: 100%;
}
.input{
    border: none;
    border-radius: var(--borderRadiusSmall);
    padding: 15px 20px;
    background-color: var(--colorWhite);
    width: 100%;
    color: var(--colorBlack);
}
.label{
    position: relative;
    width: 100%;
}
.input:focus{
    outline: 1px solid var(--colorSecond);
}
.form{
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: start;
        align-content: start;
    width: 100%;
    max-width: 576px;
}
/* Menu */
.menu__section{
    padding: 10px 10%;
}
.menu__container{
    padding: 10px 25px;
    background-color: var(--colorWhite);
    border-radius: var(--borderRadiusBig);
}
.menu__socials_img{
    width: 30px;
    height: 30px;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}
.menu__link_socials:hover .menu__socials_img{
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}
.menu__logo_img{
    width: 80px;
}
#burger__open{
    display: none;
}
.menu__container_burger{
    display: none;
}
/* Banner */
@-webkit-keyframes UpDown{
    0%{
        -webkit-transform: translate(0, -5px);
                transform: translate(0, -5px);
    }
    50%{
        -webkit-transform: translate(0, 5px);
                transform: translate(0, 5px);
    }
    100%{
        -webkit-transform: translate(0, -5px);
                transform: translate(0, -5px);
    }
}
@keyframes UpDown{
    0%{
        -webkit-transform: translate(0, -5px);
                transform: translate(0, -5px);
    }
    50%{
        -webkit-transform: translate(0, 5px);
                transform: translate(0, 5px);
    }
    100%{
        -webkit-transform: translate(0, -5px);
                transform: translate(0, -5px);
    }
}
.banner__section::after{
    content: '↑';
    position: absolute;
    font-size: 64px;
    font-weight: 700;
    color: var(--colorMain);
    top: 95px;
    right: calc(10% + 80px);
    -webkit-animation: UpDown 2s linear infinite;
            animation: UpDown 2s linear infinite;
}
.banner__section::before{
    content: 'Соц. сети Анны';
    position: absolute;
    font-size: var(--h6);
    font-weight: 600;
    top: 160px;
    right: calc(10% - 0px);
    -webkit-animation: UpDown 2s linear infinite;
            animation: UpDown 2s linear infinite;
}
.banner__container{
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}
.banner__section{
    min-height: 100vh;
    background-image: url("../img/ban/bg.png");
    background-size: cover;
    background-position: right center;
}
.banner__section ul{
    margin-left: 25px;
}
.banner__point{
    width: 40px;
}
.banner__img{
    width: 100%;
}
/* Swiper */
.swiper-prev, .swiper-next{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--colorMain);
    color: var(--colorWhite);
    cursor: pointer;
    -webkit-transition: background-color .3s ease, color .3s ease;
    -o-transition: background-color .3s ease, color .3s ease;
    transition: background-color .3s ease, color .3s ease;
    font-weight: 700;
    padding-bottom: 5px;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    font-size: var(--h4);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.swiper-button-disabled{
    cursor: default;
    background-color: var(--colorGrey);
    color: var(--colorBlack);
}
.swiper-prev:hover, .swiper-next:hover{
    background-color: var(--colorWhite);
    color: var(--colorMain);
}
.swiper-button-disabled:hover{
    color: var(--colorBlack);;
    background-color: var(--colorGrey);
}
/* Reviews */
.reviews__card{
    padding: 20px;
    border-radius: var(--borderRadiusSmall);
    -webkit-box-shadow: var(--colorSecond) 0 0 50px -15px;
            box-shadow: var(--colorSecond) 0 0 50px -15px;
    position: relative;
    background-color: var(--colorWhite);
    -ms-grid-rows: auto auto 1fr;
    grid-template-rows: auto auto 1fr;
}
.reviews-card__text, .reviews-card__title, .reviews-card__name{
    word-break: break-word;
}
.swiper{
    overflow: hidden;
    width: calc(100% + 100px);
    padding-right: 100px;
}
.reviews__inner{
    padding: 50px;
}
.reviews__card::after{
    content: '"';
    position: absolute;
    top: 80px;
    right: 60px;
    height: 40px;
    width: 40px;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    font-family: Cambria, serif;
    color: var(--colorSecond);
    font-size: 240px;
    z-index: -1;
}
/* Review */
.review__wrapper{
    -ms-grid-columns: 3fr 2fr;
    grid-template-columns: 3fr 2fr;
}
.review__title{
    padding: 20px;
    background-image: -o-linear-gradient(120deg, var(--colorMain), var(--colorMainLight));
    background-image: linear-gradient(-30deg, var(--colorMain), var(--colorMainLight));
    border-radius: var(--borderRadiusSmall);
    color: var(--colorWhite);
    -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
            transform: rotate(-1deg);
}
.review__textarea{
    resize: none;
    height: 300px;
}
.review__section::after{
    content: '↓';
    position: absolute;
    font-size: 64px;
    font-weight: 700;
    color: var(--colorMain);
    bottom: 0;
    right: calc(10% + 80px);
    -webkit-animation: UpDown 2s linear infinite;
            animation: UpDown 2s linear infinite;
}
.review__section::before{
    content: 'Соц. сети Анны';
    position: absolute;
    font-size: var(--h6);
    font-weight: 600;
    bottom: 60px;
    right: calc(10% - 0px);
    -webkit-animation: UpDown 2s linear infinite;
            animation: UpDown 2s linear infinite;
}
/* Footer */
.footer__section{
    background-color: var(--colorWhite);
    padding: 50px 0;
}
/* Auth */
.auth__section{
    min-height: 100vh;
}
/* Admin */
.admin__section{
    min-height: 100vh;
}
.admin__card{
    background-color: var(--colorWhite);
    padding: 20px;
    border-radius: var(--borderRadius);
}
.admin__card div span, .admin__card div p{
    word-break: break-word;
}
/* Media */
@media(max-width: 1480px){
    :root{
        --h1: 54px;
        --h2: 48px;
        --h3: 36px;
        --h4: 28px;
        --h5: 24px;
        --h6: 22px;
        --h7: 16px;
        --defaultFont: 18px;
    }
    .section{
        padding: 70px 0;
    }
    .container{
        padding: 0 7%;
    }
    .menu__section{
        padding: 10px 7%;
    }
    .menu__container{
        padding: 10px 25px;
    }
    .review__wrapper{
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .banner__container{
        -ms-grid-columns: 3fr 2fr;
        grid-template-columns: 3fr 2fr;
    }
    .review__section::after{
        font-size: 56px;
        bottom: 0;
        right: calc(7% + 75px);
    }
    .review__section::before{
        font-size: var(--h6);
        bottom: 60px;
        right: 7%;
    }
    .banner__section::after{
        font-size: 56px;
        top: 105px;
        right: calc(7% + 75px);
    }
    .banner__section::before{
        font-size: var(--h6);
        top: 170px;
        right: 7%;
    }
}
@media(max-width: 1024px){
    :root{
        --h1: 48px;
        --h2: 36px;
        --h3: 28px;
        --h4: 24px;
        --h5: 20px;
        --h6: 18px;
        --h7: 14px;
        --defaultFont: 16px;
    }
    .section{
        padding: 70px 0;
    }
    .container{
        padding: 0 7%;
    }
    .menu__section{
        padding: 10px 7%;
    }
    .menu__container{
        padding: 10px 25px;
    }
    .swiper-prev, .swiper-next{
        width: 40px;
        height: 40px;
    }
    .menu__logo__container{
        width: 100%;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .menu__nav{
        gap: 10px;
    }
    .menu__container{
        grid-auto-flow: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .banner__container{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .banner__section{
        padding-top: 200px;
    }
    .banner__img{
        width: 400px;
    }
    .menu__logo__container_footer{
        gap: 25px;
    }
    .review__section::after{
        font-size: 56px;
        bottom: 0;
        right: calc(7% + 75px);
    }
    .review__section::before{
        font-size: var(--h6);
        bottom: 54px;
        right: 9%;
    }
    .banner__section::after{
        display: none;
    }
    .banner__section::before{
        display: none;
    }
}
@media(max-width: 768px){
    :root{
        --h1: 40px;
        --h2: 32px;
        --h3: 24px;
        --h4: 20px;
        --h5: 18px;
        --h6: 15px;
        --h7: 14px;
        --defaultFont: 14px;
    }
    #burger__open{
        display: block;
        width: 50px;
        height: 50px;
        cursor: pointer;
    }
    #burger__open path{
        -webkit-transition: stroke .3s ease;
        -o-transition: stroke .3s ease;
        transition: stroke .3s ease;
    }
    #burger__open:hover path{
        stroke: var(--colorMain);
    }
    .menu__container_burger{
        display: -ms-grid;
        display: grid;
        width: 320px;
        height: 100vh;
        position: fixed;
        right: -320px;
        top: 0;
        background-color: var(--colorWhite);
        padding: 30px;
        -webkit-transition: right .5s ease, -webkit-box-shadow .2s ease;
        transition: right .5s ease, -webkit-box-shadow .2s ease;
        -o-transition: right .5s ease, box-shadow .2s ease;
        transition: right .5s ease, box-shadow .2s ease;
        transition: right .5s ease, box-shadow .2s ease, -webkit-box-shadow .2s ease;
        -webkit-box-shadow: rgba(128, 128, 128, 0) 0 0 0 100vw;
                box-shadow: rgba(128, 128, 128, 0) 0 0 0 100vw;
        z-index: 9;
    }
    .menu__container_burger_active{
        right: 0;
        -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 0 100vw;
                box-shadow: rgba(128, 128, 128, 0.3) 0 0 0 100vw;
    }
    .menu__burger__hide{
        display: none;
    }
    .menu__nav{
        gap: 10px;
    }
    .menu__container{
        grid-auto-flow: column;
        -webkit-box-pack: stretch;
            -ms-flex-pack: stretch;
                justify-content: stretch;
    }
    .menu__container_burger .menu__socials_img{
        width: 35px;
        height: 35px;
    }
    #burger__close{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #burger__close svg{
        -webkit-transition: fill .3s ease;
        -o-transition: fill .3s ease;
        transition: fill .3s ease;
    }
    #burger__close:hover svg{
        fill: var(--colorMain);
    }
    .menu__nav_links{
        gap: 20px;
    }
    .review__textarea{
        height: 150px;
    }
    .menu__nav_footer{
        justify-items: center;
    }
    .footer__container{
        justify-items: stretch;
        -webkit-box-pack: stretch;
            -ms-flex-pack: stretch;
                justify-content: stretch;
        grid-auto-flow: row;
        gap: 25px;
    }
    .menu__logo__container_footer{
        width: 100%;
        -ms-grid-column-align: start;
            justify-self: start;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .menu__nav_socials_footer{
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        justify-items: center;
    }
    .menu__logo_img{
        width: 60px;
    }
    .footer__section::after{
        content: '↑';
        position: absolute;
        font-size: 36px;
        font-weight: 700;
        color: var(--colorMain);
        bottom: 30px;
        right: 0;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-animation: UpDown 2s linear infinite;
                animation: UpDown 2s linear infinite;
    }
    .footer__section{
        padding-bottom: 80px;
    }
    .footer__section::before{
        content: 'Соц. сети Анны';
        position: absolute;
        font-size: var(--h6);
        font-weight: 600;
        text-align: center;
        bottom: 20px;
        right: 0;
        left: 0;
        width: 100%;
        -webkit-animation: UpDown 2s linear infinite;
                animation: UpDown 2s linear infinite;
    }
    .review__section::after{
        display: none;
    }
    .review__section::before{
        display: none;
    }
    .banner__section::after{
        display: none;
    }
    .banner__section::before{
        display: none;
    }
    .menu__container_burger .menu__nav_socials{
        position: relative;
    }
    .menu__container_burger .menu__nav_socials::after{
        content: 'Соц. сети Анны';
        position: absolute;
        font-size: var(--h6);
        font-weight: 600;
        text-align: center;
        bottom: -50px;
        right: 0;
        left: 0;
        width: 100%;
        -webkit-animation: UpDown 2s linear infinite;
                animation: UpDown 2s linear infinite;
    }
    .menu__container_burger .menu__nav_socials::before{
        content: '↑';
        position: absolute;
        font-size: 36px;
        font-weight: 700;
        color: var(--colorMain);
        bottom: -40px;
        right: 0;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-animation: UpDown 2s linear infinite;
                animation: UpDown 2s linear infinite;
    }
}
@media(max-width: 576px){
    .section{
        padding: 50px 0;
    }
    .container{
        padding: 0 5%;
    }
    .menu__section{
        padding: 10px 5%;
    }
    .menu__container{
        padding: 10px 25px;
    }
    :root{
        --h1: 36px;
        --h2: 28px;
        --h3: 22px;
        --h4: 18px;
        --h5: 16px;
        --h6: 14px;
        --h7: 12px;
        --defaultFont: 14px;
    }
    #burger__open{
        width: 40px;
        height: 40px;
    }
    .menu__logo__container_footer{
        width: 100%;
        grid-auto-flow: row;
        justify-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .banner__img{
        width: 300px;
    }
    .banner__section{
        padding-top: 125px;
    }
    .banner__point{
        width: 30px;
    }
    .menu__nav_footer{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .review__wrapper{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }
    .review__inner:first-child{
        justify-items: center;
        text-align: center;
    }
    .reviews__container{
        gap: 25px;
    }
    .banner__img{
        width: 250px;
    }
    .admin-card__btns{
        grid-auto-flow: row;
    }
    .footer__section{
        padding-bottom: 80px;
    }
}