/*=============================================================
Home 
============================================================= */

/*========header-home-page============*/
.header {
    height: 80px;
    background: linear-gradient(266deg, #0298CA -2.63%, #194E91 106.03%);
    display: flex;
    padding-top: 20px;
    padding-bottom: 20px;
}

.header__container {
    flex-grow: 1;
    display: flex;
}

.header__row {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 800px) {
    .logo-header span {
        display: none;
    }
}

@media (max-width: 450px) {
    .logo-header .logout-btn {
        display: none;
    }
}


/*=======content-home-page==========*/
.content-home-page {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
}

.content-home-page__bg-img {
    position: absolute;
    background: transparent;
    width: 25%;
    top: 15%;
    left: 60%;
}

.content-home-page__bg-img img {
    position: absolute;
    object-fit: contain;
    width: 100%;
    object-position: center;
}

.content-home-page__column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    padding-top: 180px;
    padding-bottom: 100px;
    position: relative;
    z-index: 3;
}

.home-title-block {
    max-width: 1100px;
    padding-right: 25px;
    margin-bottom: 40px;
}

.home-title-block__page-title {
    margin-bottom: 10px;
}

.content-home-page__btn {
    margin-bottom: 40px;
}

.untitle-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
}

.untitle-row__column {
    flex-basis: 33.333%;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.untitle-row__column p span {
    font-weight: 700;
}

@media (max-width: 1000px) {}

@media (max-width: 800px) {
    .untitle-row {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    .untitle-row__column {
        flex: 0 0 50%;
    }
}

@media (max-width: 600px) {
    .content-home-page__column {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .home-title-block {
        padding-right: 0px;
    }

    .untitle-row {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    .untitle-row__column {
        flex: 0 0 100%;
    }
}

/*===== footer ===== */
.home-page__footer {
    height: 80px;
    background: linear-gradient(266deg, #0298CA -2.63%, #194E91 106.03%);
    padding: 20px;
}

.footer-home-page__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-home-page__text {
    text-align: center;
    color: #F7FBFF;
}


/*================================
Authorization   .login-page
==================================*/
.login-page__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-radial-blue, radial-gradient(66.53% 66.53% at 50% 50%, #527CB1 0%, #194E91 100%));
}

.login-page__block {
    padding: 100px 40px;
    border-radius: 20px;
    background: var(--light, #F7FBFF);
}

.login-page__title {
    color: var(--dark-text, #0D3356);
    /* head shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-family: Merriweather;
    font-size: 1.5rem;
    line-height: 130%;
    font-weight: 700;
    margin-bottom: 40px;
}


.login-page__btn {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding-top: 30px;
}

.login-page__btn .btn {
    width: 100%;
}


/*================================
Sory   .sory-page
==================================*/
.sory-page__btn {
    display: flex;
    justify-content: center;
}

.sory-page .login-page__title {
    text-align: center;
}

.sory-page .btn {
    width: auto;
}


/*================================
    Groups   .groups-page
==================================*/

/*=========== groups-content =======*/

.groups-head__container {
    align-items: start;
}

.title-block {
    flex-basis: 40%;
    padding-right: 20px;
    position: relative;
}

.title-block__title {
    color: var(--dark-text, #0D3356);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-family: Merriweather;
    font-size: 3rem;
    font-weight: 700;
    line-height: 110%;
    margin-bottom: 10px;
}


.title-block__subtitle {
    color: var(--dark-text, #0D3356);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-size: 1rem;
    line-height: 130%;
}

.groups-numbers {
    flex-basis: 60%;
    padding: 20px;
    border-radius: 20px;
    background: rgba(238, 242, 17, 0.20);
    box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    column-gap: 15px;
}

.groups-numbers__column {
    display: flex;
    flex-direction: column;
}

.groups-numbers__number {
    font-family: Merriweather;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    /* margin-bottom: 20px; */
}

.groups-numbers__number span {
    font-family: 'Bitter', serif;
    font-size: 3rem;
}

.number-area {
    color: #613F1F;
}

.number-cost {
    color: #0D562A;
}

.number-sum {
    color: #AC2E4F;
}

.groups-numbers__text {
    text-align: center;
    font-weight: 700;
}

@media (max-width: 900px) {
    .groups-head__container {
        flex-direction: column;
        align-items: start;
    }

    .title-block {
        flex-basis: auto;
        padding-right: 40px;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .title-block__title {
        font-size: 2rem;
    }

    .groups-numbers {
        padding: 30px;
        row-gap: 30px;
        flex-wrap: wrap;
    }

    .groups-numbers__column {
        flex-basis: 100%;
    }
}

/*======= groups-cards =======*/
.groups-cards {
    padding-top: 80px;
    padding-bottom: 80px;
}

.groups-cards__row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 80px;
    margin-left: -20px;
    margin-right: -20px;
}

.groups-cards__group-item {
    flex: 0 0 50%;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 767px) {
    .groups-cards__group-item {
        flex: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .groups-cards__row {
        row-gap: 40px;
    }
}

.group-item__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 3px solid #0D562A;
    /*style put into tag*/
    padding-left: 20px;
}

.group-item__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.group-item__head-text {
    color: var(--dark-text, #0D3356);
    font-family: Merriweather;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 120%;
    padding-right: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
}

.group-item__head-number {
    flex-shrink: 0;
    color: var(--dark-text, #0D3356);
    font-family: Merriweather;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 120%;
}

.group-item__text {
    flex: 1 0 auto;
    margin-bottom: 30px;
}

.group-item__btn {
    display: flex;
    justify-content: start;
}

/*================================
    Group   .group-page
==================================*/

/*========== breadcrump ==========*/
.breadcrump {
    margin-bottom: 40px;
}

/*========== group-dicript ==========*/
.group-dicript {
    display: flex;
    flex-direction: column;
}

.group-dicript__header-row {
    margin-bottom: 50px;
}

.header-row {
    width: 100%;
    display: flex;
    column-gap: 30px;
}

.header-row__img {
    flex: 0 0 500px;
    position: relative;
    width: 500px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.header-row__img img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%;
    top: 0;
    left: 0;
}

.header-row__column {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.header-row__title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-family: Merriweather;
    font-size: 2rem;
    font-weight: 700;
    line-height: 120%;
}

.header-row__subtitle-block {
    padding: 20px;
    border-radius: 20px;
    background: rgba(248, 253, 4, 0.20);
    box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.25);
}

.header-row__item span,
.header-row__item {
    color: var(--dark-text, #0D3356);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-size: 1.25rem;
    line-height: 140%;
}

.header-row__item span {
    font-weight: 700;
}

@media (max-width: 967px) {
    .header-row {
        flex: 1 0 100%;
        flex-direction: column;
        row-gap: 30px;
    }

    .header-row__img {
        flex: 0 0 400px;
        position: relative;
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 967px) {
    .header-row__img {
        flex: 0 0 300px;
        position: relative;
        width: 100%;
    }
}

@media (max-width: 967px) {
    .header-row__img {
        order: 2;
        flex: 0 0 300px;
        position: relative;
        width: 100%;
    }

    .header-row__column {
        order: 1;
    }
}

/* .group-discript__text */

.group-discript__container {
    /* flex-direction: column; */
    display: block;
}

.group-discript__text {
    margin-bottom: 40px;
}

.attention,
.recomendation {
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(97deg, #FAEEF1 -1.96%, #F9FAEE 103.94%);
    box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {

    .attention,
    .recomendation {
        padding: 20px;
    }
}

.attention {
    background: linear-gradient(97deg, #FAEEF1 -1.96%, #F9FAEE 103.94%);
}

.recomendation {
    background: linear-gradient(104deg, rgba(63, 173, 208, 0.40) -18.93%, rgba(247, 255, 153, 0.40) 98.93%);
}

.attention__title,
.recomendation__title {
    display: block;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}

.attention,
.recomendation {
    width: 100%;
    margin-bottom: 40px;
}

.attention:last-child,
.recomendation:last-child {
    margin-bottom: 0px;
}

.attention:first-child,
.recomendation:first-child {
    margin-top: 40px;
}

.notes {
    cursor: pointer;
    color: #01B1F7;
    position: relative;
}

.notes:hover {
    color: #87A7D0;
}

.notes__text {
    position: absolute;
    bottom: 24px;
    display: block;
    width: 400px;
    border-radius: 20px;
    background: #D7E2EC;
    box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    color: #0D3356;
    opacity: 0;
    translate: scale(0);
    transition: 0.3s
}

@media (max-width: 450px) {
    .notes__text {
        width: 320px;
        border-radius: 10px;
        padding: 15px;
    }
}


.notes__text.active {
    opacity: 1;
    translate: scale(1);
}