:root {
    --color-white: #fff;
    --color-nero: #212121;
    --color-white-smoke: #f8f8f8;
    --color-whisper: #e4e4e4;
    --color-whisper-light: #ececec;
    --color-ivory: #fbfbf9;
    --color-grey: #7d7d7d;
    --color-tahiti-gold: #e86f2a;
    --color-blue-gem: #534496;
    --color-lavender-blue: #d7ceff;
    --color-apricot: #fed3ac;
    --color-seashell: #fff6ee;
    --color-astronaut-blue: #17455f;
    --color-sapphire: #12326e;
}

.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
    border: 0;
    clip-path: inset(100%);
}

.custom-container {
    width: 100%;
    max-width: 1440px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
    box-sizing: border-box;
}

.breadcrumb-container {
    width: 100%;
    max-width: 1380px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}

.breadcrumb span {
    justify-content: left;
}

html body .breadcrumb#breadcrumbs {
    padding-bottom: 0;
}

@media (max-width: 992px) {
    .custom-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .breadcrumb-container {
        margin-top: 110px;
    }

    html body .breadcrumb#breadcrumbs {
        margin-left: 0;
        padding-bottom: 0;
    }
}

.section-title {
    font-weight: 500;
    font-size: 50px;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--color-nero);
    margin: 0;
}

.section-title--white {
    color: var(--color-ivory);
}

@media (max-width: 992px) {
    .section-title {
        font-size: 30px;
    }
}

.intro {
    margin-top: 20px;
    margin-bottom: 60px;
}

.intro__container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.intro__text-wrapper {
    max-width: 460px;
    margin-left: auto;
}

.intro__title {
    font-weight: 500;
    font-size: 60px;
    text-transform: uppercase;
    color: var(--color-nero);
    margin: 0;
    max-width: 630px;
}

.intro__text {
    font-size: 18px;
    color: var(--color-nero);
    margin: 0;
    margin-bottom: 20px;
}

.intro__btn {
    max-width: 280px;
}

@media (max-width: 992px) {
    .intro {
        margin-bottom: 50px;
    }

    .intro__container {
        flex-direction: column;
    }

    .intro__text-wrapper {
        max-width: none;
    }

    .intro__title {
        font-size: 36px;
        text-align: center;
        max-width: none;
    }

    .intro__text  {
        font-size: 15px;
        text-align: center;
    }

    .intro__btn {
        max-width: none;
    }
}

.about {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 60px;
    margin-bottom: 160px;
    background-color: var(--color-blue-gem);
}

.about__content {
    display: flex;
    gap: 110px;
}

.about__card {
    position: relative;
    padding-top: 17px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 50%;
}

.about__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--color-ivory);
}

.about__title {
    font-weight: 600;
    font-size: 24px;
    color: var(--color-ivory);
    margin: 0;
}

.about__text {
    font-size: 18px;
    color: rgba(251, 251, 249, 0.7);
    margin: 0;
    margin-top: auto;
}

@media (max-width: 992px) {
    .about {
        padding: 0;
        margin-top: 50px;
        margin-bottom: 60px;
        background-color: transparent;
    }

    .about__content {
        flex-direction: column;
        gap: 40px;
        padding: 35px 20px;
        background-color: var(--color-blue-gem);
        border-radius: 30px;
    }

    .about__card {
        gap: 15px;
        max-width: none;
    }

    .about__title {
        font-size: 20px;
    }

    .about__text {
        font-size: 15px;
        margin: 0;
    }
}

.features {
    margin-top: 160px;
    margin-bottom: 160px;
}

.features__title {
    font-weight: 500;
    font-size: 50px;
    text-transform: uppercase;
    color: var(--color-nero);
    margin: 0;
    margin-bottom: 50px;
}

.features__title span {
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
    padding: 0 10px;
    background-color: var(--color-lavender-blue);
    color: var(--color-blue-gem);
    text-transform: lowercase;
    transform: translateY(-10px) rotate(5deg);
}

.features__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.features__item {
    position: relative;
    padding: 30px;
    border: 2px solid var(--color-whisper-light);
    border-radius: 30px;
}

.features__item::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 33px;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' viewBox='0 0 25 25'%3E%3Cpath fill='%23fed3ac' d='M12.5 0C19.375 0 25 5.625 25 12.5S19.375 25 12.5 25 0 19.375 0 12.5 5.625 0 12.5 0m6.02 8.255a1 1 0 0 0-1.414-.002l-6.381 6.37-2.83-2.832a1 1 0 0 0-1.415 1.414l3.538 3.538a1 1 0 0 0 1.414.001l7.087-7.075a1 1 0 0 0 .002-1.414'/%3E%3C/svg%3E");
}

.features__item-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    margin-bottom: 45px;
}

.features__item-icon svg {
    flex-shrink: 0;
}

.features__item-title {
    font-weight: 600;
    font-size: 24px;
    color: var(--color-nero);
    margin: 0;
    margin-bottom: 10px;
}

.features__item-text {
    font-size: 18px;
    color: var(--color-grey);
    margin: 0;
}

@media (max-width: 1200px) {
    .features__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .features {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .features__title {
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
    }

    .features__list {
        grid-template-columns: 1fr;
    }

    .features__item {
        padding: 20px;
    }

    .features__item::before {
        top: 22px;
        left: 22px;
    }

    .features__item-icon {
        margin-bottom: 40px;
    }

    .features__item-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .features__item-text {
        font-size: 15px;
    }
}


.catalog-coaches {
    margin-top: 160px;
    margin-bottom: 160px;
}

.catalog-coaches__results {
    position: relative;
    transition: opacity 0.2s ease-in-out;
}

.catalog-coaches.is-loading .catalog-coaches__results {
    opacity: 0.5;
    pointer-events: none;
}

.catalog-coaches__panel {
    display: flex;
    align-items: center;
    gap: 50px;
}

.catalog-coaches__count-title {
    font-weight: 500;
    font-size: 40px;
    color: var(--color-nero);
    margin: 0;
}

.catalog-coaches__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.catalog-coaches__empty-list {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
}

@media (max-width: 992px) {
    .catalog-coaches {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .catalog-coaches__count-title {
        display: none;
    }

    .catalog-coaches__items  {
        grid-template-columns: 1fr;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.coaches-card {
    padding: 20px;
    border-radius: 30px;
    background-color: var(--color-white-smoke);
}

.coaches-card__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.coaches-card__photo {
    width: 200px;
    height: 200px;
}

.coaches-card__photo img {
    object-fit: contain;
    border-radius: 20px;
}

.coaches-card__qualification {
    border-radius: 30px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: var(--color-blue-gem);
    background-color: var(--color-lavender-blue);
}

.coaches-card__title {
    font-weight: 600;
    font-size: 24px;
    color: var(--color-nero);
    margin-bottom: 20px;
}

.coaches-card__experience {
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
}

.coaches-card__experience-label {
    font-weight: 600;
    color: var(--color-nero);
}

.coaches-card__experience-value {
    margin-left: auto;
    color: var(--color-grey);
}

.coaches-card__btn  {
    background-color: var(--color-blue-gem);
}

.coaches-card__btn:hover,
.coaches-card__btn:focus-visible {
    color: var(--color-blue-gem);
    background-color: var(--color-lavender-blue);
}

@media (max-width: 992px) {
    .coaches-card__top {
        margin-bottom: 20px;
    }

    .coaches-card__photo {
        width: 140px;
        height: 140px;
    }

    .coaches-card__photo img {
        border-radius: 10px;
    }

    .coaches-card__qualification {
        font-size: 12px;
    }

    .coaches-card__title {
        font-size: 20px;
    }

    .coaches-card__experience {
        font-size: 15px;
    }
}

.coaches-filters__search {
    margin-bottom: 50px;
}

.coaches-filters__search-btn {
    display: none;
}

.coaches-filters__search-field {
    width: 100%;
    padding: 27px;
    padding-left: 80px;
    border-radius: 100px;
    outline: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: var(--color-grey);
    background-color: var(--color-white-smoke);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' viewBox='0 0 25 25'%3E%3Cpath fill='%23212121' d='m24.127 22.8-5.868-5.866a10.325 10.325 0 1 0-1.325 1.325l5.866 5.868a.937.937 0 1 0 1.327-1.327M1.9 10.338a8.437 8.437 0 1 1 8.437 8.438 8.447 8.447 0 0 1-8.437-8.438'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 28px center;
}

.coaches-filters__sort {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.coaches-filters__sort-label {
    font-size: 18px;
    color: var(--color-nero);
}

.coaches-filters__sort-select {
    width: 160px;
    padding: 0;
    margin: 0;
}

.coaches-filters__sort-select .custom-select__button {
    border: none;
    padding: 0 10px;
    height: auto;
}

.coaches-filters__sort-select .custom-select__text {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: var(--color-tahiti-gold);
    opacity: 1;
}

.coaches-filters__sort-select .custom-select__icon {
    display: none;
}

.coaches-filters__sort-select .custom-select__list {
    bottom: -10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: max-content;
    max-height: 150px;
    border-radius: 20px;
    padding: 20px;
    border: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06);
    background: var(--color-white);
}

.coaches-filters__sort-select .custom-select__item {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 125%;
    color: var(--color-tahiti-gold);
}

.coaches-filters__sort-select .custom-select__item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: currentColor;
}

.coaches-filters__sort-select .custom-select__list .custom-select__item-icon {
    margin-left: auto;
}

.coaches-filters__sort-select .custom-select__text .custom-select__item-icon {
    margin-left: 0;
}

.coaches-filters__sort-select .custom-select__item[aria-selected=true] {
    opacity: 0.7;
    background-color: transparent;
}

.coaches-filters__qualification-select {
    width: 190px;
    padding: 0;
    margin: 0;
}

.coaches-filters__qualification-select .custom-select__button {
    border: 1px solid var(--color-tahiti-gold);
    border-radius: 10px;
    padding: 18px 15px;
    height: 60px;
}

.coaches-filters__qualification-select .custom-select__placeholder {
    font-weight: 500;
    font-size: 18px;
    color: var(--color-nero);
}

.coaches-filters__qualification-select .custom-select__text {
    font-weight: 500;
    font-size: 18px;
    color: var(--color-nero);
}

.coaches-filters__qualification-select .custom-select__icon {
    width: 11px;
    height: 6px;
    background-color: var(--color-nero);
}

.coaches-filters__qualification-select .custom-select__list {
    bottom: -10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 190px;
    max-height: 140px;
    border-radius: 20px;
    padding: 20px;
    border: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06);
    background: var(--color-white);
}

.coaches-filters__qualification-select .custom-select__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    font-weight: 400;
    font-size: 15px;
    color: var(--color-nero);
}

.coaches-filters__qualification-select .custom-select__item::before {
    flex-shrink: 0;
    content: "";
    border-radius: 4px;
    width: 24px;
    height: 24px;
    background-color: var(--color-apricot);
}

.coaches-filters__qualification-select .custom-select__item[aria-selected=true] {
    background-color: transparent;
}

.coaches-filters__qualification-select .custom-select__item[aria-selected=true]::before {
    background-size: 9px 7px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' fill='none' viewBox='0 0 9 7'%3E%3Cpath fill='%23e86f2a' fill-rule='evenodd' d='M8.943.464A.75.75 0 0 0 7.72.22L3 4.94 1.28 3.22A.75.75 0 0 0 .22 4.282l2.25 2.25a.75.75 0 0 0 1.06 0l5.25-5.25a.75.75 0 0 0 .163-.818' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.coaches-filters__qualification-select .custom-select__placeholder {
    left: 15px;
}

@media (hover: hover) {
    .coaches-filters__sort-select .custom-select__item[aria-selected=true]:hover:not(.focus-visible),
    .coaches-filters__qualification-select .custom-select__item[aria-selected=true]:hover:not(.focus-visible) {
        background-color: transparent;
    }

    .coaches-filters__sort-select .custom-select__item:hover:not(.focus-visible),
    .coaches-filters__qualification-select .custom-select__item:hover:not(.focus-visible) {
        background-color: transparent;
    }
}

@media (max-width: 992px) {
    .catalog-coaches__header {
        position: relative;
        display: flex;
        gap: 10px;
    }

    .coaches-filters__search {
        margin-bottom: 0;
    }

    .coaches-filters__search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        color: var(--color-nero);
        background-color: var(--color-white-smoke);
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    .coaches-filters__search-btn:hover,
    .coaches-filters__search-btn:focus-visible {
        color: var(--color-ivory);
        background-color: var(--color-tahiti-gold);
    }

    .coaches-filters__search-field {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 20;
        padding: 20px;
        padding-left: 60px;
        font-size: 15px;
        background-position: left 20px center;
        background-size: 20px;
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    }

    .coaches-filters__search--active .coaches-filters__search-field {
        display: block;
    }

    .catalog-coaches__panel {
        gap: 20px;
    }

    .coaches-filters__sort {
        margin-left: 0;
    }

    .coaches-filters__sort-select .custom-select__text,
    .coaches-filters__sort-select .custom-select__placeholder,
    .coaches-filters__sort-label {
        display: none;
    }

    .coaches-filters__sort-select {
        width: auto;
    }

    .coaches-filters__sort-select .custom-select__button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: var(--color-white-smoke);
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23212121' d='M3.75 12a.75.75 0 0 1 .75-.75h6.75a.75.75 0 1 1 0 1.5H4.5a.75.75 0 0 1-.75-.75m.75-5.25h5.25a.75.75 0 1 0 0-1.5H4.5a.75.75 0 0 0 0 1.5m12.75 10.5H4.5a.75.75 0 1 0 0 1.5h12.75a.75.75 0 1 0 0-1.5m4.28-9.53-3.75-3.75a.75.75 0 0 0-1.06 0l-3.75 3.75a.75.75 0 1 0 1.06 1.061l2.47-2.47v7.19a.75.75 0 1 0 1.5 0V6.31l2.47 2.47a.751.751 0 0 0 1.06-1.061'/%3E%3C/svg%3E");
        transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    .coaches-filters__sort-select .custom-select__button:hover,
    .coaches-filters__sort-select .custom-select__button:focus-visible {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbfbf9' d='M3.75 12a.75.75 0 0 1 .75-.75h6.75a.75.75 0 1 1 0 1.5H4.5a.75.75 0 0 1-.75-.75m.75-5.25h5.25a.75.75 0 1 0 0-1.5H4.5a.75.75 0 0 0 0 1.5m12.75 10.5H4.5a.75.75 0 1 0 0 1.5h12.75a.75.75 0 1 0 0-1.5m4.28-9.53-3.75-3.75a.75.75 0 0 0-1.06 0l-3.75 3.75a.75.75 0 1 0 1.06 1.061l2.47-2.47v7.19a.75.75 0 1 0 1.5 0V6.31l2.47 2.47a.751.751 0 0 0 1.06-1.061'/%3E%3C/svg%3E");
        background-color: var(--color-tahiti-gold);
    }


    .coaches-filters__qualification-select {
        width: 170px;
    }

    .coaches-filters__qualification-select .custom-select__placeholder {
        font-size: 15px;
        transform: translateY(-50%);
    }

    .coaches-filters__qualification-select .custom-select__text {
        font-size: 15px;
    }

    .coaches-filters__qualification-select .custom-select__list {
        width: 170px;
    }
}