/*Стили каталог*/


@font-face {
    font-family: 'CoFo Gothic';
    src: url('https://static.tildacdn.com/tild3834-3231-4166-b239-646264356531/CoFoGothic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'CoFo Gothic';
    src: url('https://static.tildacdn.com/tild3163-3635-4366-b031-356330666233/CoFoGothic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
        .filters-mob {
                display: none;
        }
        
.filter-popup {
    display: block;
    width: 100%;
}

.filter-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    position: relative;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: auto;
    width: 100%;
}

.filter-section-title {
    color: black;
    font: 500 18px/19.8px 'CoFo Gothic', sans-serif;
}

.clear-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: #000000;
    font: 400 16px/17.6px 'CoFo Gothic', sans-serif;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.clear-btn:hover {
    opacity: 0.7;
}

.clear-btn-img {
    width: 18px;
    height: 18px;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M5 13L13 5" stroke="%23000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 13L5 5" stroke="%23000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.filter-select {
    position: relative;
    width: 100%;
}

.filter-select-toggle {
    width: 262px;
    height: 48px;
    padding: 0 16px;
    background: #F6F6F6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

.filter-select-text {
    color: #878787;
    font: 400 16px/17.6px 'CoFo Gothic', sans-serif;
}

.filter-select-text.selected {
    color: black;
}

.filter-select-arrow {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M15 6L9 12L3 6" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transition: transform 0.3s ease;
}

.filter-select-arrow.open {
    transform: rotate(180deg);
}

.filter-items {
    display: none;
    position: static !important;
    width: 100%;
    background: #F6F6F6;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 8px;
    max-height: 168px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
}

.filter-items.open {
    display: flex;
}

.filter-item {
    color: black;
    font: 400 16px/17.6px 'CoFo Gothic', sans-serif;
    cursor: pointer;
    padding: 4px 0;
}

.filter-select-text.selected[data-value=""] {
    color: #878787 !important;
}

.filter-item:hover {
    color: #555;
}

.filter-footer {
    display: none;
}

.apply-btn, .clear-all-btn {
    width: 100%;
    padding: 16px 0;
    border-radius: 4px;
    font: 500 18px/19.8px 'CoFo Gothic', sans-serif;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.apply-btn {
    background: black;
    color: white;
    border: none;
}

.clear-all-btn {
    background: transparent;
    color: black;
    border: 1px solid black;
}

.catalog-wrapper {
    display: grid;
    grid-template-columns: 326px 1fr;
    gap: 32px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 120px;
}

.filter-column {
    position: relative;
    align-self: start;
    height: 100%;
}

.filter-container {
    padding: 32px;
    background: white;
    border-radius: 16px;
    width: 326px;
    box-sizing: border-box;
    position: sticky;
    top: 132px;
    align-self: start;
    height: auto !important;
    min-height: 380px;
    max-height: calc(100vh - 48px);
    overflow-y: visible;
    z-index: 100;
}

.catalog-container {
    grid-column: 2;
    min-width: 0;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
    position: relative;
    justify-content: flex-start;
}

.card {
    width: 100%;
    max-width: 842px;
    height: auto;
    padding: 32px;
    background: white;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: flex;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.card .image-container {
    width: 150px;
    height: 150px;
    position: relative;
    background: #F6F6F6;
    overflow: hidden;
    border-radius: 8px;
}

.card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.card .info-container {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    display: flex;
}

.card .name {
    align-self: stretch;
    color: black;
    font: 500 40px/44px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .role {
    align-self: stretch;
    color: rgba(0, 0, 0, 0.50);
    font: 400 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .attributes {
    width: 320px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.card .attribute {
    border-radius: 100px;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: flex;
}

.card .experience-icon {
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 2.15664C9.21736 2.15664 8.54981 2.63859 8.30242 3.31322C8.192 3.61436 7.8492 3.7722 7.53677 3.66576C7.22434 3.55932 7.06059 3.22892 7.17102 2.92778C7.58257 1.80547 8.693 1 10.0002 1C11.3073 1 12.4177 1.80547 12.8293 2.92778C12.9397 3.22892 12.776 3.55932 12.4635 3.66576C12.1511 3.7722 11.8083 3.61436 11.6979 3.31322C11.4505 2.63859 10.7829 2.15664 10.0002 2.15664Z" fill="black"/><path d="M6.80861 11.8871L2.80469 10.7294C2.82876 13.1309 2.97431 15.3426 3.85433 16.0966C4.90875 17 6.6058 17 9.99992 17C13.394 17 15.0911 17 16.1455 16.0966C17.0255 15.3426 17.1711 13.1309 17.1951 10.7294L13.1914 11.8871L9.99992 13L6.80861 11.8871Z" fill="black"/><path d="M6.48714 3.89159H13.5129C15.473 3.89159 16.453 3.89159 17.1147 4.41052C17.2419 4.51026 17.3581 4.62229 17.4616 4.74487C18 5.38264 18 6.32729 18 8.21658C18 8.69598 18 8.93569 17.8794 9.12267C17.8559 9.15909 17.8293 9.19356 17.7998 9.22572C17.6487 9.39081 17.4105 9.59744 16.9341 9.59744L13.2 10.6772L10 11.5L6.8 10.6772L3.06592 9.59744C2.58952 9.45968 2.35132 9.39081 2.20017 9.22572C2.17073 9.19356 2.14412 9.15909 2.12062 9.12267C2 8.93569 2 8.69598 2 8.21658C2 6.32729 2 5.38264 2.53839 4.74487C2.64186 4.62229 2.7581 4.51026 2.88528 4.41052C3.54696 3.89159 4.52702 3.89159 6.48714 3.89159Z" fill="black"/></svg>');
}

.card .competence-icon {
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M11.8477 2.91637C10.6636 2.36121 9.33652 2.36121 8.15234 2.91637L2.57642 5.53049C1.67975 5.95087 1.44597 7.13627 1.87508 7.95555L1.87508 12.0833C1.87508 12.4285 2.1549 12.7083 2.50008 12.7083C2.84526 12.7083 3.12508 12.4285 3.12508 12.0833V8.89336L8.15242 11.2503C9.33659 11.8055 10.6636 11.8055 11.8478 11.2503L17.4237 8.63617C18.6366 8.06754 18.6366 6.09916 17.4237 5.53053L11.8477 2.91637Z" fill="black"/><path d="M4.16675 10.7623V13.8545C4.16675 14.6945 4.58633 15.481 5.32119 15.888C6.54483 16.5656 8.50341 17.5 10.0001 17.5C11.4968 17.5 13.4553 16.5656 14.679 15.888C15.4138 15.481 15.8334 14.6945 15.8334 13.8545V10.7623L12.3784 12.3821C10.8581 13.0949 9.14216 13.0949 7.62181 12.3821L4.16675 10.7623Z" fill="black"/></svg>');
}

.card .students-icon {
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6.05909 9.74074C7.9597 9.74074 9.50044 8.23177 9.50044 6.37037C9.50044 4.50897 7.9597 3 6.05909 3C4.15849 3 2.61775 4.50897 2.61775 6.37037C2.61775 8.23177 4.15849 9.74074 6.05909 9.74074ZM12.0812 15.0762C12.6419 15.3012 13.3557 15.4444 14.2645 15.4444C18.5 15.4444 18.5 12.3333 18.5 12.3333C18.5 11.4742 17.7889 10.7778 16.9117 10.7778H12.0115C12.4273 11.2709 12.6771 11.9032 12.6771 12.5926V12.9167C12.6771 12.9167 12.6771 12.916 12.6771 12.9188L12.6771 12.921L12.677 12.9258L12.6769 12.9363L12.6765 12.9616C12.6761 12.9802 12.6754 13.0025 12.6742 13.0283C12.6717 13.0797 12.6674 13.1451 12.6596 13.2226C12.644 13.3771 12.6144 13.5827 12.558 13.8228C12.4755 14.1736 12.3322 14.6123 12.0812 15.0762ZM16.9126 7.14815C16.9126 8.58 15.7274 9.74074 14.2654 9.74074C12.8034 9.74074 11.6182 8.58 11.6182 7.14815C11.6182 5.7163 12.8034 4.55556 14.2654 4.55556C15.7274 4.55556 16.9126 5.7163 16.9126 7.14815ZM0.5 12.8519C0.5 11.7064 1.44815 10.7778 2.61775 10.7778H9.50044C10.67 10.7778 11.6182 11.7064 11.6182 12.8519C11.6182 12.8519 11.6182 17 6.05909 17C0.5 17 0.5 12.8519 0.5 12.8519ZM12.6765 12.9616L12.6742 13.0283Z" fill="black"/></svg>');
}

.card .attribute-text {
    color: black;
    font: 400 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .tags {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.card .tag {
    padding: 12px 16px;
    background: white;
    border-radius: 100px;
    outline: 1px solid black;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.card .tag-text {
    text-align: center;
    color: black;
    font: 500 16px/17.6px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .education-section,
.card .results-section,
.card .about-section {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.card .section-title {
    color: black;
    font: 500 24px/26.4px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .education-verified {
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: flex;
}

.card .verified-icon {
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.33557 3.77417C2 4.25825 2 5.69716 2 8.57499V9.99222C2 15.0665 5.76797 17.5289 8.13205 18.5745C8.77335 18.8582 9.09399 19 10 19C10.906 19 11.2267 18.8582 11.8679 18.5745C14.232 17.5289 18 15.0665 18 9.99222V8.57499C18 5.69716 18 4.25825 17.6644 3.77417C17.3289 3.29009 15.9926 2.82696 13.3201 1.90071L12.8109 1.72425C11.4178 1.24142 10.7212 1 10 1C9.27877 1 8.58221 1.24142 7.18909 1.72425L6.67992 1.90071C4.0074 2.82696 2.67114 3.29009 2.33557 3.77417ZM12.7195 8.64956C12.9647 8.37148 12.9409 7.94478 12.6662 7.69649C12.3916 7.44821 11.9702 7.47236 11.7249 7.75044L9.04762 10.7865L8.27507 9.91044C8.02985 9.63236 7.60841 9.60821 7.33377 9.85649C7.05912 10.1048 7.03527 10.5315 7.28049 10.8096L8.55033 12.2496C8.67681 12.393 8.85771 12.475 9.04762 12.475C9.23753 12.475 9.41843 12.393 9.54491 12.2496L12.7195 8.64956Z" fill="%2312990B"/></svg>') no-repeat center/contain;
}

.card .verified-text {
    color: #12990B;
    font: 400 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .education-text,
.card .about-text {
    align-self: stretch;
    color: black;
    font: 400 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .education-text.truncated {
    max-height: 60px;
    overflow: hidden;
    position: relative;
}

.card .education-text.truncated::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    padding: 0 5px;
}

.card .more-btn {
    display: none;
    align-self: stretch;
    height: 56px;
    background: white;
    border: 1px solid black;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.card .more-btn .button-text {
    text-align: center;
    color: black;
    font: 500 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .results-container {
    align-self: stretch;
    padding: 20px;
    background: #F6F6F6;
    border-radius: 8px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.card .result-item {
    align-self: stretch;
    background: #F6F6F6;
    border-radius: 4px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.card .result-content {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
}

.card .result-icon {
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM12.5757 7.57574L9 11.1515L7.42426 9.57574C7.18995 9.34142 7.81005 9.34142 6.57574 9.57574C6.34142 9.81005 6.34142 10.1899 6.57574 10.4243L8.57574 12.4243C8.81005 12.6586 9.18995 12.6586 9.42426 12.4243L13.4243 8.42426C13.6586 8.18995 13.6586 7.81005 13.4243 7.57574C13.19 7.34142 12.8101 7.34142 12.5757 7.57574Z" fill="black"/></svg>');
}

.card .result-text {
    flex: 1;
    align-self: stretch;
    color: black;
    font: 400 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
}

.card .button-container {
    align-self: stretch;
    border-radius: 8px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: flex;
}

.card .button {
    align-self: stretch;
    height: 56px;
    background: black;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    text-decoration: none;
}

.card .button-text {
    flex: 1;
    text-align: center;
    color: white;
    font: 500 18px/19.8px 'CoFo Gothic', sans-serif;
    word-wrap: break-word;
    text-decoration: none;
}

.pagination-container {
    width: 100%;
    max-width: 842px;
    margin: 32px auto 0;
    display: flex;
    justify-content: center;
}

.pagination {
    padding: 4px;
    background: white;
    border-radius: 100px;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.pagination button {
    width: 36px;
    height: 36px;
    padding: 0;
    background: #F6F6F6;
    border-radius: 100px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    
}

.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination .arrow-btn {
    width: 36px;
    height: 36px;
    background: #F6F6F6;
    border-radius: 100px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

.pagination .arrow-btn::before {
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 13L1 7L7 1' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.pagination .arrow-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination .arrow-btn:hover {
    background: #EDEDED;
}


.pagination .page-btn {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 100px;
    border: none;
    font: 400 16px/1.1 'CoFo Gothic', sans-serif;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination .page-btn.active {
    background: #f6f6f6;
    color: #000000;
    font-weight: 400;
}

.pagination .arrow-btn.next::before {
    transform: rotate(180deg);
}

.filter-content::-webkit-scrollbar,
.filter-items::-webkit-scrollbar {
    width: 6px;
}

.filter-content::-webkit-scrollbar-track,
.filter-items::-webkit-scrollbar-track {
    background: #F6F6F6;
    border-radius: 4px;
}

.filter-content::-webkit-scrollbar-thumb,
.filter-items::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.filter-content::-webkit-scrollbar-button,
.filter-items::-webkit-scrollbar-button {
    display: none;
}

@media screen and (max-width: 1200px) {
    .catalog-wrapper {
        grid-template-columns: 1fr;
        gap: 0px;
    }
    
    .filter-column,
    .catalog-container {
        grid-column: 1;
    }
    
    .filter-column {
        max-width: 100%;
    }
    
    .filter-container {
        width: 100%;
        padding: 0;
        position: absolute;
        z-index: auto;
        background: transparent;
    }
    
        .filters-mob {
                display: flex;
    justify-content: space-between;
    align-items: center;
    width: 360px;
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 20px;
    background-color: #fff;
    border-radius: 16px;
    margin: 0 auto 20px auto;
        }
        .filter-mob-text {
            text-size: 18px;
            font-family: "CoFo Gothic", sans-seif;
            line-height: 1.1;
            font-weight: 500;
        }
        .filter-mob-img {
            width: 24px;
            height: 24px;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M1 7L23 7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 17L23 17" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7" cy="17" r="3" fill="white" stroke="black" stroke-width="1.5"/><circle cx="17" cy="7" r="3" fill="white" stroke="black" stroke-width="1.5"/></svg>');
        }
    
    .cards-container {
        gap: 20px;
        justify-content: center;
        width: 360px;
        margin: 0 auto;
    }
    
    .card {
        width: 360px;
        padding: 20px;
        gap: 20px;
    }
    
    .card .image-container {
        width: 100%;
        height: 320px;
    }
    
    .card .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .card .info-container {
        gap: 16px;
    }
    
    .card .name {
        font-size: 28px;
        line-height: 30.8px;
    }
    
    .card .role {
        font-size: 16px;
        line-height: 17.6px;
    }
    
    .card .attributes {
        width: 100%;
        gap: 8px;
    }
    
    .card .attribute-text {
        font-size: 16px;
        line-height: 17.6px;
    }
    
    .card .tags {
        gap: 8px;
    }
    
    .card .tag {
        padding: 8px 10px;
    }
    
    .card .tag-text {
        font-size: 14px;
        line-height: 15.4px;
    }
    
    .card .section-title {
        font-size: 20px;
        line-height: 22px;
    }
    
    .card .education-text,
    .card .about-text,
    .card .result-text {
        font-size: 16px;
        line-height: 17.6px;
    }
    
    .card .verified-text {
        font-size: 14px;
        letter-spacing: -0.2px;
        line-height: 1.1;
    }
    
    .card .verified-icon {
        width: 14px;
        height: 14px;
    }
    
    .card .more-btn {
        display: flex;
    }
    
    .card .results-section,
    .card .about-section {
        display: none;
    }
    
    .card.expanded .results-section,
    .card.expanded .about-section {
        display: flex !important;
        align-self: stretch;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
    }
    
    .card .results-container {
        padding: 12px;
    }
    
    .card .button-container {
        gap: 8px;
    }
    
    .pagination {
        gap: 12px;
    }
    
    .pagination button {
        width: 32px;
        height: 32px;
        padding: 0;
        box-sizing: border-box;
    }
    
    .pagination .arrow-btn svg {
        width: 6px;
        height: 10px;
    }
    
    .pagination .text-container div {
        font-size: 16px;
        line-height: 15.4px;
    }
    
    .pagination .text-container .current-page {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
    }
    
    .pagination .text-container input {
        width: 32px;
        height: 32px;
        font-size: 16px;
        line-height: 15.4px;
        padding: 0;
        box-sizing: border-box;
    }
    
    .filter-select-toggle {
        display: none;
    }
    
    .filter-items {
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 8px;
        padding: 12px 0;
        background: transparent;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .filter-item {
        padding: 8px 12px;
        background: #F6F6F6;
        border-radius: 4px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    
    .filter-item.selected {
        background: #EEE6FE;
        color: #8137FB;
    }
    
    .filter-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        flex-direction: column;
        z-index: 10000;
        overflow: hidden;
        overflow-y: auto;
    }
    
    .filter-popup.active {
        display: flex;
    }
    
    .filter-content {
        top: 62px;
        padding: 20px;
        padding-bottom: 60px;
        overflow-y: auto;
        flex: 1;
        height: 100%;
        box-sizing: border-box;
    }
    
    .filter-footer {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        background: white;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
    
    .clear-btn {
        display: none !important;
    }
    
    .clear-section-btn {
        display: none;
    }
    
    .clear-section-btn.active {
        display: flex;
    }
}


/*Заголовок каталога*/

    .katalog-title-wrapper {
    width: 1200px;
    margin: 0 auto;
}
    .katalog-title {
        font-family: 'CoFo Gothic', sans-serif;
        font-size: 48px;
        line-height: 1.1;
        font-weight: 500;
        padding: 0px 0px 48px 0px;
    }
    
    @media (max-width: 1200px) {
    .katalog-title-wrapper {
    width: 360px;
    margin: 0 auto;
}
    .katalog-title {
        font-family: 'CoFo Gothic', sans-serif;
        font-size: 28px;
        font-weight: 500;
        padding: 0px 0px 32px 0px;
    }
    }


/*Скелетон*/


.skeleton-card {
    width: 100%;
    max-width: 842px;
    height: auto;
    padding: 32px;
    background: white;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: flex;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.skeleton-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.skeleton-image {
    width: 150px;
    height: 150px;
    background: #F6F6F6;
    border-radius: 8px;
}

.skeleton-text {
    background: #F6F6F6;
    border-radius: 4px;
}

.skeleton-name {
    height: 44px;
    width: 70%;
}

.skeleton-role {
    height: 20px;
    width: 50%;
}

.skeleton-attribute {
    height: 20px;
    width: 120px;
}

.skeleton-tag {
    width: 80px;
    height: 24px;
    background: #F6F6F6;
    border-radius: 12px;
}

.skeleton-section-title {
    height: 26px;
    width: 40%;
}

.skeleton-section-text {
    height: 20px;
    width: 90%;
}

.skeleton-button {
    height: 56px;
    width: 100%;
    background: #F6F6F6;
    border-radius: 4px;
}

@media screen and (max-width: 1200px) {
    .skeleton-card {
        width: 360px;
        padding: 20px;
        gap: 20px;
    }
    
    .skeleton-image {
        width: 100%;
        height: 320px;
    }
    
    .skeleton-info-container {
        display: none !important;
    }
    
    .skeleton-name {
        height: 31px;
    }
    
    .skeleton-role {
        height: 18px;
    }
    
    .skeleton-section-title {
        height: 22px;
    }
    
    .skeleton-section-text {
        height: 18px;
    }
}


/*Промоблоки*/


.promo-block-first,
.promo-block-second,
.promo-block-third {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.promo-block-first::before,
.promo-block-second::before,
.promo-block-third::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

@media (min-width: 1201px) {
    .promo-block-first::before {
        background-image: url('https://static.tildacdn.com/tild3336-6436-4038-a239-373939353038/d1.svg');
    }
    .promo-block-second::before {
        background-image: url('https://static.tildacdn.com/tild6234-3133-4231-b366-333462386238/d2.svg');
    }
    .promo-block-third::before {
        background-image: url('https://static.tildacdn.com/tild3539-6537-4266-a461-333530643961/d3.svg');
    }
    .promo-block-first.desktop,
    .promo-block-second.desktop,
    .promo-block-third.desktop {
        width: 842px;
        padding: 32px;
        border-radius: 16px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 32px;
    }
    .promo-block-first-title.desktop,
    .promo-block-second-title.desktop,
    .promo-block-third-title.desktop {
        color: black;
        font-size: 36px;
        font-family: CoFo Gothic;
        font-weight: 500;
        line-height: 39.60px;
        word-wrap: break-word;
    }
    .promo-block-second-text.desktop,
    .promo-block-third-text.desktop {
        color: black;
        font-size: 18px;
        font-family: CoFo Gothic;
        font-weight: 400;
        line-height: 21.60px;
        word-wrap: break-word;
        width: 560px;
    }
}

@media (max-width: 1200px) {
    .promo-block-first::before {
        background-image: url('https://static.tildacdn.com/tild3961-3164-4862-a263-386230343333/m1.svg');
    }
    .promo-block-second::before {
        background-image: url('https://static.tildacdn.com/tild6539-3665-4361-a261-326262373662/m2.svg');
    }
    .promo-block-third::before {
        background-image: url('https://static.tildacdn.com/tild3430-3836-4462-a435-383833356537/m3.svg');
    }
    .promo-block-first.mobile,
    .promo-block-second.mobile,
    .promo-block-third.mobile {
        width: 360px;
        padding: 20px;
        border-radius: 16px;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    .promo-block-first-title.mobile,
    .promo-block-second-title.mobile,
    .promo-block-third-title.mobile {
        align-self: stretch;
        color: black;
        font-size: 24px;
        font-family: CoFo Gothic;
        font-weight: 500;
        line-height: 1.1;
        word-wrap: break-word;
        text-align: center;
    }
    .promo-block-second-text.mobile,
    .promo-block-third-text.mobile {
        align-self: stretch;
        color: black;
        font-size: 16px;
        font-family: CoFo Gothic;
        font-weight: 400;
        line-height: 1.2;
        word-wrap: break-word;
        text-align: center;
    }
}

.promo-block-first.mobile { height: 320px; }
.promo-block-second.mobile { height: 440px; }
.promo-block-third.mobile { height: 380px; }

.promo-block-second-content,
.promo-block-third-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}
.promo-block-second-content.mobile,
.promo-block-third-content.mobile {
    gap: 12px;
}

.promo-button {
    width: 320px;
    height: 56px;
    background: #8137FB;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.promo-button:hover {
    background: #6C24E2;
}

.promo-button-text {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 18px;
    font-family: CoFo Gothic;
    font-weight: 500;
    line-height: 19.80px;
    word-wrap: break-word;
}


/*Хлебные крошки*/


.breadcrumbs {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0px 48px 0px;
}

.breadcrumbs a {
    color: #000 !important;
    text-decoration: none !important;
}

.breadcrumbs-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: #000;
    opacity: 0.5;
    font-size: 18px;
    line-height: 1.2;
    font-family: 'CoFo Gothic', sans-serif;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb-current {
    color: #000;
    font-size: 18px;
    line-height: 1.2;
    font-family: 'CoFo Gothic', sans-serif;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb-link:hover {
    color: #000;
    opacity: 1;
    text-decoration: underline;
}

.breadcrumb-separator {
    width: 6px;
    height: 10px;
    opacity: 0.5;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.601562 0.599609L4.60156 4.59961L0.601562 8.59961' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.breadcrumb-link:focus {
    outline: 2px solid #8137FB;
    outline-offset: 2px;
}

@media (max-width: 1200px) {
    .breadcrumbs {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 32px 0px 32px 0px;
}

.breadcrumbs-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-link {
    font-size: 16px;
}

.breadcrumb-current {
    font-size: 16px;
}

}
    
    
    
    /*Блок записи*/
    
     
    .kl-card-container {
        padding-bottom: 120px;
        width: 1200px;
        margin: 0 auto;
      border-radius: 16px;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 12px;
      display: flex;
    }

    .kl-hero-block {
        width: 1200px;
      align-self: stretch;
      padding: 32px;
      overflow: hidden;
      border-radius: 16px;
      justify-content: space-between;
      align-items: center;
      display: flex;
      background-image: url('https://static.tildacdn.com/tild3838-6233-4633-a135-333737306635/d.svg'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: #EEE6FE;
      box-sizing: border-box;
    }

    .kl-hero-text {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 12px;
      display: flex;
    }

    .kl-hero-title {
      align-self: stretch;
      color: black;
      font-size: 28px;
      font-family: 'CoFo Gothic', sans-serif;
      font-weight: 500;
      line-height: 1.1;
      word-wrap: break-word;
    }

    .kl-hero-description {
      align-self: stretch;
      color: black;
      font-size: 18px;
      font-family: 'CoFo Gothic', sans-serif;
      font-weight: 400;
      line-height: 1.2;
      word-wrap: break-word;
    }

    .kl-buttons-group {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 12px;
      display: flex;
    }

    .kl-btn {
      width: 320px;
      height: 56px;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      display: flex;
      cursor: pointer;
      transition: 0.2s ease;
      font: 500 18px/1.1 'CoFo Gothic', sans-serif;
      text-align: center;
    }

    .kl-btn-primary {
      background: #8137FB;
      outline: 1px solid #8137FB;
      outline-offset: -1px;
      color: white !important;
      transition: background 0.2s ease;
    }
    
    .kl-btn-primary:hover {
        background: #6C24E2;
    }

    .kl-btn-outline {
      background: transparent;
      outline: 1px solid #8137FB !important;
      outline-offset: -1px;
      color: #8137FB !important;
      transition: background 0.2s ease;
    }
    
    .kl-btn-outline:hover {
    background: #E4D4FE;
    }

    .kl-contact-bar {
        width: 1200px;
      align-self: stretch;
      padding-top: 20px;
      padding-bottom: 20px;
      background: #EEE6FE;
      border-radius: 16px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      display: flex;
    }

    .kl-contact-text {
      width: 1200px;
      text-align: center;
      color: #806DA5;
      font-size: 18px;
      font-family: 'CoFo Gothic', sans-serif;
      font-weight: 500;
      line-height: 1.1;
      word-wrap: break-word;
    }

    @media (max-width: 1200px) {
      .kl-card-container {
        margin: 0 auto;
        width: 360px;
      }

      .kl-hero-block {
        width: 360px;
        height: auto;
        min-height: 500px;
        padding: 20px;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        background-image: url('https://static.tildacdn.com/tild3332-3231-4065-b130-396262613433/m.svg');
        background-size: auto, cover;
        background-color: #EEE6FE;
      }

.kl-contact-bar {
        width: 360px;
}

      .kl-hero-title {
        font-size: 24px;
        line-height: 1.1;
        text-align: center;
      }

      .kl-hero-description {
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
      }

      .kl-buttons-group {
        align-self: center;
        width: 100%;
        align-items: center;
      }

      .kl-btn {
        width: 100%;
        max-width: 320px;
      }

      .kl-contact-text {
        width: 228px;
        font-size: 16px;
        line-height: 1.2;
        white-space: normal;
        padding: 0 12px;
      }
    }