/* more styles */
@import "/css/style-material-new.css";
.service-wrap * {font-family: "Inter", Arial, sans-serif, sans-serif; font-style: normal; font-weight: 500;}
.service-wrap h2 {
font-weight: 500;
font-size: 40px;
line-height: 105%;
color: #2C374A;
}
.variants-row svg {width: 60px; height: 60px; max-width: unset;}
.variants-row .benefits-row {gap: 0; row-gap: 30px;}
.variants-row .benefits-col {width: 100%;}
.variants-row .benefits-col, .variants-card-carousel .benefits-col .extra-data {font-size: 18px;}
.benefits-row {gap: 30px;}
.benefits-col {border: 2px solid #53A351;border-radius: 20px;padding: 40px 20px; font-weight: 400; font-size: 16px; line-height: 140%; width: 100%; text-align: center; text-decoration: none;}
.benefits-col:hover {background-color: #53a35161; border-color: #53a35161;}
.benefits-col .extra-data {color: #4680C2; font-weight: 700; padding-bottom: 10px; font-size: 24px;}
.variants-row .benefits-col {display: flex; gap: 12px; flex-direction: column;}
.variants-row .benefits-col .extra-data {height: auto; padding-bottom: 0px;font-weight: 600; font-size: 20px; color: #2C374A;}
.variants-row .benefits-col .extra-data .text-accent {height: auto; padding-bottom: 0px;font-weight: 600; font-size: 20px;}
.variants-row .benefits-col .text {font-weight: 400; font-size: 16px; color: #2C374A; line-height: 110%;}
.benefits-col img, .benefits-col svg {width: 100px; height: 100px; align-self: center;}
/*.benefits-col div {text-align: center;}*/
.content_wrap.service-wrap {background-color: #FFFFFF}
.h1-count {font-weight: 500; font-size: 24px; line-height: 29px; text-align: right; color: #4680C2;}
.h1-header-text, .h1-header-text p{font-weight: 400;
font-size: 16px;
line-height: 19px;
}
/*ARTICLES GRID*/
.service-wrap .container-article-items {row-gap: 15px;}
.service-wrap .article-href {text-decoration: none; display: flex; flex-direction: column; padding: 15px; border: 0.8px solid #53A351;
border-radius: 16px; height: 100%;}
.article-item-wr {
padding-bottom: 20px;
/*border-bottom: 1px solid #DFDFDF;*/
margin-bottom: 20px;
color: #2C374A;
}
.article-item-top { padding: 20px 0;}
.article-item-top-title { text-align: left; font-weight: 500; font-size: 16px; line-height: 19px; color: #2C374A;}
.new-project-select-item-text {font-weight: 400;}
.article-author-picture { width: 100px; height: 100px; border-radius: 50%; object-fit: cover;}
.article-author-wr { display: flex; flex-direction: row; align-items: center; gap: 20px;
}
.fa, .fas, .far, .fal, .fad, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.article-author-name {font-size: 16px; color: #2C374A; font-weight: 400; line-height: 110%; color: #2C374A;}
.article-author-name-wr {display: flex; flex-direction: column; gap: 10px;}
.article-item-text {font-weight: 400; font-size: 14px; line-height: 17px; color: #2C374A;}
.article-item-date, .article-item-date-wr .best_article_info {filter: opacity(50%); }
.article-author-name span {
padding-left: 15px;
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: rgba(44, 55, 74, 0.6);
}
.article-item-date-wr, .article-item-date-wr .article_dop_info_text {font-size: 14px; line-height: 110%; color: #2C374A; }
.article-item-date-wr .best_article_info { margin-bottom: 0px;}
.article-item-date-wr .article_num_look, .article-item-date-wr .article_num_look, .article-item-date-wr .article_num_comm, .article-item-date-wr .article_num_like { background-size: 16px; background-position-y: top;}
/*ARTICLES GRID END*/
/*PAGINATION*/
.service-wrap .nav-pages .navpage {
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: rgba(44, 55, 74, 0.6);
}
.service-wrap .nav-pages .navpage.active {color: #2C374A; font-weight: bold;}
.service-wrap .nav-pages .navpage:hover {cursor: pointer; color: #2C374A; font-weight: bold;}
.service-wrap .nav-pages { float: unset!important; font-weight: 400; font-size: 20px; line-height: 24px; color: rgba(44, 55, 74, 0.6);}
.nav-pages .nav-prev {background: url('data:image/svg+xml,') center no-repeat;
height: 28px;
width: 28px;
}
.nav-pages .nav-next {background: url('data:image/svg+xml,') center no-repeat;
height: 28px;
width: 28px;
}
/* Общий стиль */
.filter-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.filter-item {
flex: 1;
min-width: 200px;
}
.service-select {
position: relative;
width: 100%;
background: #E0E9F8;
border-radius: 20px;
padding: 8px 16px;
cursor: pointer;
font-size: 16px;
color: #2C374A;
user-select: none;
}
.service-select:hover {
background: #e6ebf0;
}
.service-select .selected {
display block;
}
/* Стрелка вниз — указатель раскрывающегося списка */
.service-select::after {
content: ">";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-size: 16px;
color: #2C374A;
pointer-events: none; /* чтобы не мешала кликам */
transition: transform 0.3s;
}
.service-select.open::after {
content: ">"; /* при открытом списке — стрелка вверх */
transform: translateY(-50%) rotate(270deg);
}
.service-select .options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
list-style: none;
margin: 6px 0;
padding: 0;
display: none;
z-index: 100;
}
.service-select.open .options {
display: block;
}
.service-select .options li {
padding: 8px 16px;
cursor: pointer;
white-space: nowrap;
}
.service-select .options li:hover {
background: #f0f4f8;
}
.service-wrap .material-informer {border-radius: 20px;}
.hrclub-leads-row {padding: 30px; background: url('data:image/svg+xml,') left 35% bottom 25px / 23% no-repeat ;
background-color: rgba(224, 233, 248, 0.1);
border: 1px solid #E0E9F8;
border-radius: 20px;
margin-bottom: 50px; row-gap: 20px;}
.hrclub-leads-row .hrclub-leads-title {
font-weight: 500;
font-size: 24px;
line-height: 120%;
}
.hrclub-leads-row .hrclub-leads-text {padding-top: 10px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
}
.btn-green:hover { background: #45a049; }
.hrclub-recomm-wr {border: 1px solid #4680C2; border-radius: 20px; padding: 30px 40px; margin-top: 30px}
.hrclub-recomm-title {font-weight: 500; font-size: 24px; line-height: 29px; color: #2C374A;}
.hrclub-recomm-text {font-weight: 400; font-size: 16px; line-height: 19px;}
.recomm-row div {font-weight: 400; font-size: 16px; line-height: 19px;}
@media (min-width: 1170px) {
.service-wrap .material-informer {background: url('data:image/svg+xml,') left 53% bottom 45px /51% no-repeat; background-color: #F1F7FB;}
.service-wrap .material-informer-wr { width: 50%; background-color: transparent;}
.service-wrap .material-informer-img { margin-right: 120px; display: flex;}
.service-wrap .material-informer-img img:first-of-type { height: 100px;}
}
@media (max-width: 1170px) {
.service-wrap .material-informer-img { padding-top: 20px; height: unset; display: flex; justify-content: center; }
.nav-pages .nav-prev {padding-left: 30px;}
.hrclub-leads-row {background: none;}
}
@media (max-width: 900px) {
.hrclub-leads-row {padding: 20px 5px; background: url('data:image/svg+xml,') right 10% top 44% / 12% no-repeat ;}
.variants-card-carousel .benefits-col .extra-data {font-size: 14px; height: auto;}
.service-wrap .best_article-title {height: 100px;}
.hrclub-recomm-wr {padding: 30px 10px;}
}
/* Кнопка "Выбрать" */
.btn-green {
background: #4CAF50;
color: white;
border: none;
border-radius: 30px;
padding: 8px 24px;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}