:root {
    --bg-color-white: #FFFFFF;
    --bg-color-blue: #336FEE;
    --bg-color-dark-blue: #243148;
    --bg-activities-color: #2A5DCA;
    --bg-color-button: #FEC300;
    --bg-color-login-button: #354259;
    --bg-color-yellow-button: #FEC300;

    --text-color-blue: #1a70c1;
    --text-color-white: #ffff;
    --text-color-dark-blue: #243148;
    --text-color-dark-gray: #262E3A;
    --text-color-light-gray: #676B70;
    --text-color-yellow: #FEC300;
    --placeholder-color: #676B70;

    --button-border-radius: 10px;
    --button-submit-border-radius: 8px;
    --input-border-radius: 12px;

    --border-color: #dedede;
    --border-radius-s: 8px;
    --border-radius-m: 12px;
    --border-radius-l: 16px;
    --border-radius-xl: 16px;
    --font-size-navbar: 1.0625rem;

    --details-translate: scale(0.5);
    --transition-duration: 0.2s;
    --transition-function: linear;
    --bg-color-light-blue-radial: radial-gradient(31.35% 61.44% at 82.85% 91.89%, rgba(210, 225, 255, 0.24) 0%, rgba(255, 255, 255, 0.01875) 100%);

    --bland-mode: normal;

    --filter-brightness-hover: brightness(1.1);
}

@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: 1200px;
        padding: 0 15px;
        margin: 0 auto;
    }
}

body {
    height: 100%;
}

img {
    pointer-events: none;
    font-style: italic;
    max-width: 100%;
    height: fit-content;
}

.main-page .h1, h2, h3, .h4, .h5, ul, li, p {
    margin: 0;
    padding: 0;
}

a {
    font-size: 1rem;
    width: fit-content;

    &:hover {
        text-decoration: none;
    }
}

.main-page .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(90deg, #293A56 5.24%, #293A56 24.26%, #2A3B57 34.5%, #2C3D59 39.91%, #334460 61.35%, #384965 68.8%, #3f506c 88.36%, #42536f 95.24%);
}

.main-page .header-search:not(.navbar-nav),
.main-page .navbar-header .user-block .user-block-list:not(.navbar-nav) {
    background: linear-gradient(90deg, #293A56 5.24%, #293A56 24.26%, #2A3B57 34.5%, #2C3D59 39.91%, #334460 61.35%, #384965 68.8%, #3f506c 88.36%, #42536f 95.24%);

}

.main-page .auth__button {
    background-color: var(--bg-color-dark-blue);
}

.title {
    font-weight: 700;
    font-size: 2.375rem;

    &.title__white {
        color: var(--text-color-white);
    }

    &.title__dark {
        color: var(--text-color-dark-blue);
    }
}

.subtitle {
    color: var(--text-color-white);
    font-size: 1.625rem;
    font-weight: 400;
}

/* Секция 1 (с фото сотрудника) */
.hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 72px;
    background: linear-gradient(152.11deg, #293A56 17.31%, #60708D 112.02%);
}

.hero__wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 47px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .main-page .navbar {
        background: linear-gradient(90deg, #293A56 5.24%, #293A56 24.26%, #2A3B57 34.5%, #2C3D59 39.91%, #293a56 61.35%, #2b3c58 68.8%, #2d3e5a 88.36%, #2f405c 95.24%);
    }

    .main-page .navbar {
        justify-content: center;
    }

    .hero__wrap {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-template-columns: none;
    }

    .hero__title {
       font-size: 1.313rem;
    }
}

.hero__logo {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Левая часть */
.hero__left-wrapper {
    display: flex;
    flex-direction: column;
}

.hero blockquote {
    font-size: 1.25rem;
    color: var(--text-color-white);
    position: relative;
    border: none;
    min-height: 210px;
    margin: 0 0 0 8px;
    padding-bottom: 59px;
}

.hero blockquote::before {
    content: '\00ab';
    position: absolute;
    left: -10px;
    top: -22px;
    color: #FEC300;
    font-size: 2.8rem;
    font-weight: 300;
}

.hero__search-form {
    display: flex;
    width: 580px;
    max-width: 100%;
    background-color: var(--bg-color-white);
    border-radius: 10px;
}

.hero__search-form .clear {
    display: none;
}

.hero__search-form.is-valid .clear {
    display: flex;
    content: "\00d7";
    font-size: 1.85rem;
    margin-right: 8px;
    margin-bottom: 4px;
    color: var(--text-color-dark-blue);
    font-weight: 300;
    opacity: .6;
    z-index: 3;
    transition: opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);
}

.hero__search-form.is-valid .clear:hover {
    opacity: 1;
}

.hero__input-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    height: 50px;
    padding: 0 12px;
}

.hero__input {
    width: 100%;
    font-size: 1rem;
    border: 0;
    border-radius: 12px;
    color: var(--text-color-dark-blue);
}

.hero__input::placeholder {
    color: var(--placeholder-color);
}

.hero__input:focus {
    color: var(--text-color-dark-blue);
    caret-color: #1A70C1;
    border-radius: 12px;
}

.hero__submit[disabled] {
    opacity: .85;
    cursor: not-allowed;
}

.hero__submit {
    background-color: var(--bg-color-blue);
    color: var(--text-color-white);
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1 0;
    padding: 0 10px;
    min-height: 34px;
    border-radius: var(--border-radius-m);
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);
    cursor: pointer;

    &:hover {
        filter: var(--filter-brightness-hover);
    }
}


.hero__search-tags {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 83px;

}

.links__item {
    color: var(--text-color-white);
    background-color: #1c2e4d;
    padding: 8px 12px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    z-index: 1;
    transition: all;
    transition-duration: var(--transition-duration);
    transition-delay: var(--details-translate);

    & p {
        margin: 0;
    }

    &:hover {
        text-decoration: none;
        background-color: var(--bg-color-blue);
        color: var(--text-color-white);
        transition-duration: var(--transition-duration);
        transition-delay: var(--details-translate);
    }

    &:active {
        filter: brightness(1.2);
    }
}


/* Правая часть */
.hero__right-wrapper {
    display: flex;
    position: relative;
    justify-content: flex-end;
}

.hero__person-info {
    flex-basis: 203px;
}

.hero__person-photo {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.hero__person-name {
    font-size: 1.25rem;
    color: var(--text-color-white);
    font-weight: 700;
}

.hero__person-position {
    font-size: 0.875rem;
    color: #7D889B;
}

@media screen and (max-width: 767px) {
    .hero {
        padding: 16px 0 24px;
    }

    .hero__wrap {
        gap: 0;
    }

    .hero__title,
    .services__title {
        margin: 0 0 24px;
    }

    .hero__search-form {
        max-width: 90vw;
    }

    .hero__search-tags {
        margin: 16px 0 28px;
    }

    .hero__right-wrapper {
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
    }

    .hero__logo {
        width: 50%;
    }

    .main-page-block-heading .block-submenu {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .hero__person-info {
        flex-basis: auto;
    }

    .hero__person-photo-wrap {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        clip-path: circle(50%);
        z-index: 3;
        overflow: hidden;
    }

    .hero__person-photo {
        position: inherit;
        background-color: #243148;
        z-index: 3;
        transform: scale(2.05);
        margin-top: 40%;
        width: auto;
        height: auto;
        object-fit: cover;
    }

    .hero blockquote {
        padding-bottom: 16px;
        min-height: auto;
    }

}

/*Избранные сервисы, баннер, статистика*/
.info {
    background-color: var(--bg-color-dark-blue);
    padding: 32px 0 34px;
}

.favorite-services-list {
    display: none;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}


.favorite-services-list .services-item .services-item-text {
    display: none;
}

.favorite-services-list .favorite:nth-child(1),
.favorite-services-list .favorite:nth-child(2) {
    background-color: var(--bg-color-blue);
}

.favorite-services-list .favorite:nth-child(3n+3) {
    background-color: #32476B;
}

.favorite-services-list .services-item {
    background-color: #33476B;
    border-radius: var(--border-radius-medium);
    width: auto;
    transition: all;
    list-style: none;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        filter: brightness(110%);
        transition: filter;
        transition-duration: var(--transition-duration);
    }

    &:active {
        filter: brightness(100%);
    }
}

.favorite-services-list .favorite {
    background-color: var(--bg-color-blue);
}

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

.services-item__icon-title {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--text-color-white);
}

.services-link {
    display: flex;
    height: 100%;
    width: 100%;
    color: var(--text-color-white);
    padding: 16px 24px;
    transition: all;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        filter: brightness(1.2);
        text-decoration: none;
    }
}

.services-item-icon {
    position: inherit;
    margin-right: 20px;
    fill: currentColor;
    width: 32px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(7477%) hue-rotate(285deg) brightness(114%) contrast(106%);
}

.services-item-title {
    color: var(--text-color-white);
    font-size: 1.125rem;
    line-height: 1.18;
    margin: 0;
    font-family: inherit;
}

.services-item-text {
    font-size: 1rem;
    line-height: 1.375;
    color: #676b70;
}

.services-item-arrow,
.services-list__item-arrow {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 17px;
    background: url('../../images/redesign/services/arrow_services_white.svg') center no-repeat;
    background-size: contain;
    transition: background, transform .3s ease;
    -webkit-transition: background 0.25s;
}

.show-button-text {
    font-weight: 500;
}

/* Баннер */
.info__banner {
    position: relative;
}

.info__banner-bg-wrap {
    overflow: hidden;
}

.info__banner-bg {
    position: absolute;
    right: 25%;
    left: 70%;
    top: 0;
    width: 25%;
    height: 100%;
    opacity: .7;
}

.info__banner-text {
    padding-top: clamp(10px, 1vw, 32px);
    padding-bottom: clamp(10px, 1vw, 32px);
    padding-left: 32px;
    border-radius: var(--border-radius-xl);
    color: var(--text-color-white);
    background: linear-gradient(90.72deg, rgba(78, 134, 255, 0.14) 43.44%, #33476B 97.22%);
}


.info__banner-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-yellow);
    position: relative;
    z-index: 4;
}

.info__banner-description {
    font-size: 1rem;
    color: inherit;
    font-weight: 400;
}

.info__banner-views {
    position: absolute;
    right: 2%;
    bottom: 10%;
    z-index: 2;
}

.main-actual-counter {
    margin: 0;
    color: rgba(114, 114, 114, 0.89);
    font-size: 0.75rem;
}

.main-actual-icon {
    width: 16px;
    height: 16px;
    opacity: .3;
    background: url('../../images/redesign/main/icon-eye-views-count.svg');
    background-size: cover;
}

/*Библиотека трудовых ситуаций 7 сервисов*/
.wsl-rubricator_bg_dark_blue {
    background: var(--bg-color-dark-blue);
}

.wsl-list__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 15px;
    width: 100%;
}

.wsl-list__title {
    margin-bottom: 24px;
    text-align: center;
}

.services-wrapper {
    border-bottom: 1.5px solid #2B3B57;
}

.b-rubrics-text {
    color: var(--text-color-white);
    opacity: .8;
    font-size: 1rem;
    text-wrap: balance;
    max-width: 70%;
}

@media screen and (max-width: 767px) {
    .row {
        margin: 0;
    }

    .info__banner-text {
        padding: 20px;
    }

    .info__banner-title {
        line-height: 24px;
        font-size: 1.125rem;
        text-wrap: balance;
    }

    .info__banner-description {
        font-size: 0.875rem;
    }

    .main-actual-counter {
        font-size: 1.2rem;
    }

    .info__banner-views {
        right: 4%;
        bottom: 8%;
    }

    .info__banner-bg {
        right: 0;
        top: 0;
        left: auto;
        width: 37%;
        opacity: .5;
    }
}

/*Статистика */
.statistics {
    padding: 40px 0 56px;
}
.statistics_bg_dark_blue {
    background-color: var( --bg-color-dark-blue);
}

.statistics__title {
    color: var(--text-color-white);
    font-size: 1.625rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
}

.b-counts {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(24px, 2vw, 120px);
    width: 100%;
}

.b-counts__number {
    text-align: center;
    font-weight: 500;
    font-size: 2.5rem;
}

.b-counts__text {
    margin-top: 10px;
    font-size: 0.938rem;
    line-height: 1.3;
    text-align: center;
}

.b-counts__item {
    flex: 1 0 24%;
    color: inherit;
    display: block;
    border-radius: 20px;
    padding: 15px;
    transition: all .2s linear;

    &:hover {
        color: var(--text-color-white);
        background-color: #243c67;
        transition: all .2s linear;
    }

    &:active {
        color: var(--text-color-white);
        filter: contrast(1.2);
    }
}

.b-counts__item-container {
    color: var(--text-color-white);
    transition: all;
    transition-timing-function: var(--transition-function);
    transition-duration: var(--transition-duration);

    &:hover {
        color: var(--text-color-blue);
        filter: brightness(1.3);
        transition: color;
        border-radius: 20px;
        transition-timing-function: var(--transition-function);
        transition-duration: var(--transition-duration);
    }

    &:active {
        color: var(--text-color-white);
    }
}

@media screen and (max-width: 767px) {
    .b-counts__item-container {
        flex-basis: 46%;
    }

    .b-counts {
        row-gap: 16px;
        column-gap: 24px;
        align-items: flex-start;
    }

    .b-counts__text {
        width: 92%;
    }

    .b-rubrics-text {
        max-width: 100%;
    }

    .b-counts__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
    }

}


/*Все сервисы*/
.services .services-wrapper {
    border-bottom: 1.5px solid #EFF1F4;
}

.services-list {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0;
    padding: 0;
    gap: 10px;
}

.services-list__wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-list__item {
    background-color: #F7F8F9;
    border-radius: 16px;
    width: 100%;
    flex: 0 0 32%;
    transition: background-color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        background-color: #EBF1F7;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-function);
    }

    &:active {
        background-color: #F7F8F9;
    }
}

.services-list__item-icon {
    display: block;
    min-width: 36px;
    min-height: 40px;
    margin: 25px 0 42px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.services-list__item-arrow__blue {
    min-width: 7px;
    height: 12px;
    margin-top: 2%;
    filter: brightness(0) saturate(100%) invert(34%) sepia(76%) saturate(1432%) hue-rotate(203deg) brightness(95%) contrast(97%);
}

.services-list__item-arrow__down {
    min-width: 7px;
    height: 12px;
    margin-right: 7px;
    transform: rotate(90deg);
    filter: brightness(0) saturate(100%) invert(34%) sepia(76%) saturate(1432%) hue-rotate(203deg) brightness(95%) contrast(97%);
}

.services-list__link {
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    padding: 20px;
    gap: 20px;
}

.services-list__item-title {
    font-size: 1.125rem;
    color: var(--text-color-dark-blue);
}

.services-list__title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.services-list__item-icon-title {
    filter: none;
}

.services-list__item-description {
    color: #8F9BAE;
    font-size: 0.875rem;
    line-height: 20px;
}

.services-list__item-icon-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
    .services-list__item-title {
        font-size: 1.2rem;
    }

    .services-list {
        display: flex;
        flex-direction: column;
    }
}

/*Деятельность роструда*/
.activities {
    color: var(--text-color-white);
    background-color: #33476B;
    padding: 80px 0 88px;
}

.activities__title {
    margin-bottom: 48px;
}

.activities-list {
    display: flex;
    gap: 10px;
}

.activities-list__item {
    background-color: var(--bg-activities-color);
    padding: 20px 24px;
    border-radius: 16px;
    width: 100%;
    flex: 1 0;
}

.activities-list__item_bg_dark {
    background-color: var(--bg-color-dark-blue);
}

.activities-list__item-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.activities-list__item-description {
    line-height: 22px;
    text-wrap: balance;
    margin-bottom: 16px;
}

.activities-list__item-link {
    color: var(--text-color-white);
    background-color: #507AD4;
    font-size: 0.938rem;
    border-radius: var(--border-radius-s);
    padding: 11px 18px;
    text-align: center;
    transition: background-color, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        color: var(--text-color-white);
        background-color: #4C5669;
        transition: background-color;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-function);
    }

    &:active {
        background-color: #507AD4;
    }
}

.activities-list__item-link_dark {
    background-color: #4C5669;

    &:hover {
        background-color: #507AD4;
        transition: background-color;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-function);
    }

    &:active {
        background-color: #4C5669;
    }
}

.estimate {
    background: url("/images/redesign/main/banner-work-feedback-poll_v2.png") center no-repeat;
    background-size: cover;
    border-radius: 16px;
    margin-top: 12px;
    width: 1184px;
    min-height: 260px;
    min-width: 228px;
    max-width: 100%;
    /*background: linear-gradient(89.37deg, rgba(55, 140, 220, 0.16) 0.94%, #33476B 117.4%);*/
}

.estimate__title {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 0 10px;
}

.estimate__description {
    padding: 0 0 24px;

}

.estimate__inner {
    padding: 32px 24px;
}

.estimate__banner-bg {
    display: none;
}

.estimate__title {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 0 10px;
}

.estimate__description {
    padding: 0 0 24px;
    max-width: 69%;
}

.estimate__link {
    display: block;
    color: var(--text-color-white);
    background-color: var(--bg-activities-color);
    padding: 14px 37px;
    position: relative;
    z-index: 2;
    border-radius: var(--border-radius-s);
    transition: all;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        color: var(--text-color-white);
        filter: brightness(1.3);
        transition: filter;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-function);
    }

    &:active {
        filter: brightness(1.5);
    }
}

@media screen and (max-width: 767px) {
    .activities {
        padding: 32px 0 20px;
    }

    .activities-list {
        flex-wrap: wrap;
    }

    .activities-list__item {
        flex: 1 0 100%;
    }

    .activities-list__item-link {
        font-weight: 500;
    }

    .activities__title {
        margin-bottom: 24px;
    }

    .estimate__inner {
        max-width: 100%;
    }

    .activities-list__item-description {
        margin-bottom: 24px;
    }
}

/*Баннер госулсгуи решаем вмете*/
.gosuslugi {
    background-color: #EDF2FE;
    padding: 28px 0;
}

.gosuslugi__inner-left {
    display: flex;
    gap: clamp(30px, 4.49vw, 80px);
    align-items: center;
}

.gosuslugi__inner-middle {
    display: flex;
    justify-content: space-between;
    flex-basis: 100%;
}

.gosuslugi__inner-right {
    display: flex;
    gap: clamp(30px, 2.58vw, 80px);
    align-items: center;
}

.gosuslugi__title {
    color: #0066B3;
    font-size: clamp(1.25rem, 4vw, 1.875rem);
    line-height: clamp(28px, 4vw, 42px);
    text-align: left;
    text-wrap: nowrap;
}

.gosuslugi__link {
    color: #1666B0;
    border: 2px solid #1666B0;
    border-radius: var(--border-radius-s);
    padding: 14px 51px;
    background-color: var(--bg-color-white);
    transition: background-color, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    &:hover {
        color: var(--text-color-white);
        background-color: var(--bg-color-blue);
        transition: all;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-function);
    }

    &:active {
        filter: brightness(1.3);
    }
}

@media screen and (max-width: 767px) {
    .title {
        font-size: 1.313rem;
        line-height: 30px;
    }

    .gosuslugi__title {
        text-wrap: balance;
    }

    .gosuslugi__inner-left {
        flex-direction: column;
    }

    .gosuslugi__inner-middle {
        gap: 24px;
    }

    .estimate__description {
        max-width: 100%;
    }


    .footer-top {
        grid-template-areas:
        "menu"
        "sidebar";
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .favorite-services-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .statistics__title {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .services-list__item-description {
        font-size: 1rem;
    }

    .gosuslugi__logo-together {
        width: 106px;
        height: 115px;
    }

    .gosuslugi__title {
        text-wrap: nowrap;
    }

    .estimate {
        background-size: cover !important;
        min-height: 300px;
        background: url("/images/redesign/main/banner_work_feedback_poll_mobile.png") center no-repeat;
        /*background: linear-gradient(89.37deg, rgba(55, 140, 220, 0.16) 0.94%, #33476B 117.4%);*/
        padding: 20px;
    }

    .estimate__inner {
        padding: 20px;
    }

    .estimate__banner-bg {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        opacity: .7;
    }
}

@media (max-width: 1025px) {
    .gosuslugi__inner-right {
        flex-direction: column;
    }
}