html {
scroll-padding-top: 90px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--background-f3f5f9);
font-family: 'Manrope', sans-serif;
color: var(--color-ffffff);
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
.site-wrapper {
width: 100%;
margin: 0 auto;
overflow-x: clip;
position: relative;
}
.badge-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 15px;
background: rgb(255,255,255,0.1);
width: fit-content;
}
.badge-pill--dark {
background-color: rgb(9, 12, 14, 0.54);
}
.section-why .badge-pill {
background-color: #24282C;
border: none;
}
.badge-pill-light {
background: var(--background-f3f5f9);
border: none;
}
.badge-dot {
width: 10px;
height: 10px;
border-radius: 100px;
background-color: var(--background-64717b);
}
.badge-text {
font-family: 'Manrope', sans-serif;
font-weight: 600;
font-size: var(--font-size-16);
color: var(--color-ffffff);
letter-spacing: 2%;
}
.badge-pill-light .badge-text {
color: var(--color-64686a);
}
.text-muted {
color: var(--color-64717b);
}
.text-underline {
text-decoration: underline;
}
.slider-controls {
display: flex;
gap: 20px;
align-items: center;
}
.slider-btn {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-f3f5f9);
color: var(--color-11161a);
font-size: var(--font-size-20);
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.icon-square-btn {
width: 55px;
height: 55px;
background: var(--background-1d2225);
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
background-color: rgba(17, 22, 26, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} .section-hero {
width: 100%;
height: 1000px;
background: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/hero-bg.webp) no-repeat center top;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
padding: 130.83px 0 0 0;
justify-content: flex-end;
}
.hero-top-bar {
width: 100%;
max-width: 1300px;
height: 81.83px;
padding: 15px;
padding-inline: 40px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transition: border-bottom-color 0.2s ease;
}
.site-header.is-scrolled .hero-top-bar {
border-bottom-color: transparent;
}
.hero-tablet-controls {
display: none;
}
.hero-contacts-wrapper {
display: flex;
gap: 30px;
align-items: center;
}
.hero-contact-col {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-end;
justify-content: center;
height: 50px;
}
.hero-contact-label {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-8-53);
font-weight: 500;
line-height: normal;
letter-spacing: 0.03em;
color: var(--color-rgba-255-255-255-0-71);
}
.hero-contact-row {
display: flex;
align-items: center;
gap: 7px;
}
.hero-contact-value {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-18);
font-weight: 700;
line-height: 25px;
letter-spacing: 0.03em;
color: var(--color-ffffff);
}
.hero-btn-consult {
width: 206px;
height: 50px;
border: 2px solid #64717b;
padding: 11px 20px;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
color: var(--color-ffffff);
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-14);
font-weight: 700;
line-height: normal;
background: transparent;
transition: all 0.2s ease;
}
.hero-nav-bar {
width: 100%;
max-width: 1300px;
height: 49px;
padding: 15px;
padding-inline: 40px;
display: flex;
justify-content: space-between;
align-items: center;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
max-height: 50px;
overflow: hidden;
}
.site-header.is-scrolled .hero-nav-bar {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
.hero-nav-link {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-16);
font-weight: 600;
color: var(--color-ffffff);
transition: color 0.2s ease;
}
.hero-nav-link:hover {
color: var(--color-babbbd);
}
.hero-content-wrapper {
width: 100%;
max-width: 1300px;
height: 730px;
padding: 50px 0 80px 0;
padding-inline: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.hero-left-content {
width: 876px;
height: 365px;
display: flex;
flex-direction: column;
gap: 44px;
}
.hero-text-group {
width: 876px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-text-group .badge-pill {
background: var(--background-rgba-9-12-14-0-54);
padding: 7px 15px;
gap: 10px;
}
.hero-mobile-br {
display: none;
}
.hero-desktop-br {
display: inline;
}
.hero-title {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-60);
font-weight: 500;
line-height: 1.175;
color: var(--color-ffffff);
}
.hero-subtitle {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-20);
font-weight: 500;
color: var(--color-rgba-255-255-255-0-8);
width: 876px;
line-height: 1.4;
letter-spacing: normal;
}
.hero-action-btn {
width: 300px;
height: 65px;
padding: 11px 58px;
background: var(--background-64717b);
display: inline-flex;
justify-content: center;
align-items: center;
gap: 20px;
color: var(--color-ffffff);
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-16);
font-weight: 600;
letter-spacing: 0.02em;
line-height: normal;
transition: background 0.2s ease;
}
.section-about {
width: 100%;
min-height: 478px;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
padding-inline: 40px;
}
.about-container {
width: 100%;
max-width: 1300px;
min-height: 318px;
display: flex;
justify-content: space-between;
gap: 40px;
}
.about-left-col {
flex: 1 1 630px;
max-width: 630px;
min-height: 318px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.about-quote-box {
border-left: 1px solid var(--background-64717b);
padding-left: 20px;
width: 100%;
}
.about-quote-text {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-18);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.about-right-col {
flex: 1 1 630px;
max-width: 630px;
min-height: 318px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
}
.about-title {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-34);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.about-description {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-18);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.section-partners {
width: 100%;
height: 140px;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
padding-inline: 40px;
}
.partners-container {
width: 100%;
max-width: 1300px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
.partner-item {
width: 236px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.section-specialization {
width: 100%;
min-height: 1090.46px;
height: auto;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
}
.specialization-container {
width: 100%;
max-width: 1300px;
min-height: 930.46px;
height: auto;
background-color: var(--background-11161a);
padding: 50px;
display: flex;
flex-direction: column;
gap: 59px;
align-items: center;
}
.specialization-header {
width: 100%;
display: flex;
gap: 40px;
justify-content: space-between;
align-items: flex-end;
}
.specialization-header-left {
width: 580px;
display: flex;
flex-direction: column;
gap: 11px;
}
.specialization-title {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-34);
font-weight: 600;
line-height: normal;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.specialization-header-right {
width: 580px;
}
.specialization-header-desc {
font-family: 'Manrope', sans-serif;
font-size: var(--font-size-18);
font-weight: 600;
line-height: normal;
letter-spacing: 0.02em;
color: #babbbd;
}
.specialization-content {
width: 100%;
min-height: 632.46px;
height: auto;
display: flex;
gap: 40px;
justify-content: space-between;
}
.specialization-list {
width: 580px;
display: flex;
flex-direction: column;
}
.specialization-item {
cursor: pointer;
user-select: none;
border-top: 1px solid var(--background-1d2225);
padding: 18px 10px;
display: flex;
flex-direction: column;
transition: background-color 0.25s ease;
}
.specialization-item-header {
display: flex;
align-items: center;
cursor: pointer;
}
.specialization-num {
font-size: var(--font-size-18);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-rgba-255-255-255-0-63);
width: 50px;
transition: color 0.3s ease;
}
.specialization-item.is-open .specialization-num {
color: var(--color-64717b);
}
.specialization-name {
font-size: var(--font-size-18);
font-weight: 600;
letter-spacing: 2%;
flex-grow: 1;
color: var(--color-rgba-255-255-255-0-63);
transition: color 0.3s ease;
}
.specialization-item.is-open .specialization-name {
color: var(--color-ffffff);
}
.specialization-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.specialization-arrow svg {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.specialization-item.is-open .specialization-arrow svg {
transform: rotate(45deg);
}
.specialization-arrow svg path {
transition: stroke 0.3s ease;
}
.specialization-item.is-open .specialization-arrow svg path {
stroke: #ffffff;
}
.specialization-item-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
padding: 0;
}
.specialization-item.is-open .specialization-item-body {
max-height: 160px;
opacity: 1;
padding-top: 12px;
transition: max-height 0.3s ease, opacity 0.25s ease 0.05s, padding 0.3s ease;
}
.specialization-item-text {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
letter-spacing: 2%;
color: #BABBBD;
}
.specialization-footer-row {
border-top: 1px solid var(--background-1d2225);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.specialization-footer-text {
font-size: var(--font-size-18);
font-weight: 500;
color: var(--color-babbbd);
}
.specialization-footer-link {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-64717b);
text-decoration: underline;
}
.specialization-image-wrapper {
width: 580px;
position: relative;
}
.spec-glass-badge {
position: absolute;
right: 30px;
bottom: 30px;
max-width: 300px;
width: min-content;
height: 177.78px;
background: var(--background-rgba-9-12-14-0-54);
border: 1px solid rgba(255, 255, 255, 0.07);
padding: 16px;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
transition: opacity 0.25s ease;
}
.section-competencies .badge-pill {
background-color: var(--background-ffffff);
}
.spec-badge-dot {
width: 10px;
height: 10px;
border-radius: 100px;
background-color: var(--background-64717b);
}
.spec-badge-stat {
display: flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.spec-badge-num {
font-size: 58px;
font-weight: 400;
line-height: 1;
color: var(--color-ffffff);
letter-spacing: 2%;
}
.spec-badge-unit {
font-size: var(--font-size-16);
font-weight: 600;
color: var(--color-ffffff);
letter-spacing: 2%;
}
.spec-badge-desc {
font-size: var(--font-size-14);
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-c6c6c7);
}
.specialization-img {
display: block;
width: 580px;
height: 100%;
object-fit: cover;
transition: opacity 0.25s ease;
}
.section-competencies {
width: 100%;
min-height: 1385px;
background-color: var(--background-f3f5f9);
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0 110px 0;
padding-inline: 40px;
}
.competencies-container {
width: 100%;
max-width: 1300px;
display: flex;
flex-direction: column;
gap: 80px;
}
.competencies-quote-card {
width: 100%;
max-width: 1300px;
height: 315px;
display: flex;
gap: 36px;
align-items: center;
}
.quote-icon-box {
height: 70%;
}
.quote-avatar {
width: 215px;
height: 215px;
border-radius: 2171.55px;
flex-shrink: 0;
object-fit: cover;
}
.quote-content-wrapper {
display: flex;
gap: 10px;
}
.quote-content-main {
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
margin-top: 17.5px;
margin-left: 5px;
}
.quote-main-text {
font-size: var(--font-size-24);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.quote-author-block {
display: flex;
flex-direction: column;
gap: 10px;
}
.quote-author-role {
font-size: var(--font-size-18);
font-weight: 500;
color: var(--color-64686a);
letter-spacing: 2%;
}
.quote-author-name {
font-size: var(--font-size-22);
font-weight: 700;
color: var(--color-11161a);
letter-spacing: 2%;
}
.competencies-cards-grid {
width: 100%;
max-width: 1300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.competency-header-card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 15px;
}
.competencies-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.competencies-desc {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
color: var(--color-64686a);
}
.competency-card {
width: 100%;
background-color: var(--background-ffffff);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.competency-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(17, 22, 26, 0.12);
}
.competency-card-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.competency-title {
font-size: var(--font-size-20);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.competency-text {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.competency-card-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.competency-link {
font-size: var(--font-size-16);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-64717b);
border-bottom: 1px solid var(--background-64717b);
width: fit-content;
padding-bottom: 1px;
}
.competency-icon {
opacity: 0.25;
}
.competency-card-wide {
grid-column: span 2;
width: 100%;
background-color: var(--background-ffffff);
padding: 30px;
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.competency-card-wide:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(17, 22, 26, 0.12);
}
.card-wide-left {
flex: 1 1 auto;
max-width: 58%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
z-index: 2;
}
.card-wide-text-block {
display: flex;
flex-direction: column;
gap: 15px;
}
.card-wide-title {
font-size: var(--font-size-20);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.card-wide-desc {
font-size: var(--font-size-16);
font-weight: 500;
max-width: 100%;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.card-wide-btn {
width: 282px;
max-width: 100%;
height: 55px;
background-color: var(--background-64717b);
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.card-wide-right {
position: absolute;
right: 0;
bottom: 0;
width: auto;
max-width: 40%;
height: auto;
max-height: 95%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
pointer-events: none;
}
.card-wide-img {
max-width: 100%;
height: auto;
max-height: 272px;
object-fit: contain;
display: block;
}
.section-experts {
position: relative;
width: 100%;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 80px 0;
padding-inline: 40px;
}
.experts-container {
width: 100%;
max-width: 1300px;
display: flex;
flex-direction: column;
gap: 40px;
}
.experts-header {
width: 100%;
max-width: 1300px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.experts-header-left {
width: 640px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 11px;
}
.experts-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.experts-desc {
font-size: var(--font-size-18);
letter-spacing: 0.02em;
font-weight: 500;
line-height: 1.5;
color: var(--color-64686a);
}
.experts-nav-wrapper,
.pressa-nav-wrapper,
.activities-nav-wrapper,
.blog-nav-wrapper,
.cases-nav-hint {
display: none;
}
.experts-cards-grid {
--expert-gap: 30px;
width: 100%;
max-width: 1300px;
display: flex;
gap: var(--expert-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.experts-cards-grid::-webkit-scrollbar {
display: none;
}
.expert-card {
flex: 0 0 calc((100% - 3 * var(--expert-gap)) / 4);
width: calc((100% - 3 * var(--expert-gap)) / 4);
min-width: 0;
max-width: calc((100% - 3 * var(--expert-gap)) / 4);
box-sizing: border-box;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.expert-card-photo-wrapper {
width: 100%;
aspect-ratio: 302.5 / 350;
background-color: var(--background-f3f5f9);
position: relative;
overflow: hidden;
}
.expert-card-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.expert-info-btn {
position: absolute;
left: 20px;
bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--color-64717b);
border: 2px solid var(--color-64717b);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
padding: 0;
}
.expert-info-btn svg {
width: 100%;
height: 100%;
display: block;
}
.expert-info-btn:hover,
.expert-info-btn.is-active {
transform: scale(1.08);
background-color: #75838e;
}
.expert-info-btn:active {
transform: scale(0.96);
}
.expert-info-popup {
position: absolute;
width: 420px;
max-width: 420px;
background-color: #ffffff;
padding: 22px 29px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
pointer-events: none;
box-sizing: border-box;
text-align: left;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 3px 12px rgba(0, 0, 0, 0.08);
}
.expert-info-popup.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.expert-popup-close {
display: none;
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background: transparent;
border: none;
font-size: 18px;
color: #64717b;
cursor: pointer;
}
.expert-popup-header {
padding-bottom: 15px;
border-bottom: 1px solid rgba(100, 113, 123, 0.18);
display: flex;
flex-direction: column;
gap: 7px;
}
.expert-popup-name {
font-size: 22px;
font-weight: 600;
letter-spacing: 0.01em;
color: #11161a;
line-height: normal;
margin: 0;
}
.expert-popup-role {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
color: #64717b;
line-height: normal;
}
.expert-popup-body {
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.45;
color: #000000;
}
.expert-popup-body p {
margin: 0;
}
@media (max-width: 900px) {
.expert-info-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 90vw;
max-width: 350px;
max-height: 85vh;
overflow-y: auto;
padding: 24px 20px;
z-index: 10001;
}
.expert-info-popup.is-visible {
transform: translate(-50%, -50%) scale(1);
}
.expert-popup-close {
display: block;
}
}
.expert-card-info {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.expert-card-header {
display: flex;
flex-direction: column;
gap: 7px;
}
.expert-name {
font-size: var(--font-size-22);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-11161a);
}
.expert-role {
font-size: var(--font-size-16);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.expert-tags {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.expert-tag {
background-color: #F3F5F9;
color: var(--color-64686a);
padding: 5px 14px;
font-size: var(--font-size-12);
font-weight: 600;
line-height: normal;
}
.section-why {
width: 100%;
height: 840px;
padding-inline: 40px;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0 110px 0;
}
.why-container {
width: 100%;
max-width: 1300px;
min-height: 650px;
background-color: var(--background-11161a);
padding: 40px;
display: flex;
gap: 40px;
justify-content: space-between;
}
.why-left-block {
flex: 1 1 560px;
max-width: 560px;
min-width: 0;
display: flex;
flex-direction: column;
}
.why-title {
font-size: var(--font-size-34);
font-weight: 600;
line-height: 1.3;
letter-spacing: 2%;
color: var(--color-ffffff);
margin-top: 15px;
}
.why-desc {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
letter-spacing: 2%;
color: var(--color-babbbd);
margin-top: 15px;
}
.why-action-row {
display: flex;
gap: 15px;
align-items: center;
margin-top: auto;
}
.why-btn-discuss {
width: 283px;
height: 55px;
padding: 11px 25px;
background: var(--background-64717b);
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 600;
}
.why-right-grid {
flex: 1 1 690px;
max-width: 690px;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.why-right-grid .why-card:last-child {
background-color: #0A1013;
}
.why-card {
background-color: var(--background-1d2225);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 270px;
width: 100%;
min-width: 0;
}
.why-card-dashed {
background: transparent;
border: 1px dashed var(--background-64686a);
}
.why-card-title {
font-size: var(--font-size-22);
font-weight: 700;
color: var(--color-ffffff);
margin-bottom: 10px;
}
.why-card-text {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
color: var(--color-babbbd);
}
.why-card-bottom {
display: flex;
justify-content: flex-end;
}
.section-cases {
width: 100%;
background-color: var(--background-f3f5f9);
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 34px 0;
padding-inline: 40px;
}
.cases-container {
--cases-gap: 30px;
width: 100%;
max-width: 1300px;
display: flex;
gap: var(--cases-gap);
}
.cases-col-left {
flex: 0 0 calc((100% - 2 * var(--cases-gap)) / 3);
width: calc((100% - 2 * var(--cases-gap)) / 3);
min-width: 0;
max-width: calc((100% - 2 * var(--cases-gap)) / 3);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
.cases-col-left-top {
display: flex;
flex-direction: column;
gap: 11px;
}
.badge-pill-white {
background-color: var(--background-ffffff);
border: none;
}
.badge-pill-white .badge-text {
color: var(--color-64686a);
}
.cases-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.cases-desc {
font-size: var(--font-size-18);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.cases-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
}
.slider-btn-white {
background-color: var(--background-ffffff);
color: var(--color-11161a);
}
.cases-divider-line {
flex: 1;
height: 1px;
}
.cases-counter-line {
font-size: var(--font-size-18);
font-weight: 600;
letter-spacing: 2%;
line-height: 0;
}
.counter-active {
font-size: var(--font-size-34);
font-weight: 600;
color: var(--color-11161a);
}
.counter-total {
font-size: 17px;
font-weight: 600;
color: var(--color-64717b);
}
.cases-slider-track {
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: var(--cases-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.cases-slider-track::-webkit-scrollbar {
display: none;
}
.cases-card {
flex: 0 0 calc((100% - var(--cases-gap)) / 2);
width: calc((100% - var(--cases-gap)) / 2);
min-width: 0;
max-width: calc((100% - var(--cases-gap)) / 2);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
}
.case-card-img-wrapper {
width: 100%;
aspect-ratio: 413.33 / 320;
position: relative;
overflow: hidden;
padding: 20px 0 20px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
box-sizing: border-box;
}
.case-card-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
transition: transform 0.4s ease;
}
.cases-card:hover .case-card-img {
transform: scale(1.06);
}
.case-tag-badge {
position: relative;
z-index: 2;
align-self: flex-start;
padding: 5px 14px;
background: var(--background-rgba-255-255-255-0-1);
backdrop-filter: blur(10px);
font-size: var(--font-size-12);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.case-stat-badge {
position: relative;
z-index: 2;
width: 190px;
height: 128px;
background: var(--background-rgba-9-12-14-0-54);
border: 0.79px solid rgba(255, 255, 255, 0.07);
backdrop-filter: blur(10px);
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.case-stat-val {
display: flex;
align-items: baseline;
gap: 6px;
}
.case-stat-num {
font-size: 58px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 2%;
color: var(--color-ffffff);
}
.case-stat-unit {
font-size: var(--font-size-18);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.case-stat-label {
font-size: var(--font-size-14);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--color-c6c6c7);
}
.case-card-body {
width: 100%;
box-sizing: border-box;
min-height: 176px;
height: auto;
flex: 1 1 auto;
padding: 0 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 15px;
}
.case-card-content {
display: flex;
flex-direction: column;
gap: 7px;
}
.case-card-title {
font-size: var(--font-size-22);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
color: var(--color-11161a);
}
.case-card-text {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.case-card-link {
font-size: var(--font-size-16);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-64717b);
border-bottom: 1px solid var(--background-64717b);
width: fit-content;
padding-bottom: 1px;
margin-top: auto;
}
.section-team-image {
width: 100%;
background: linear-gradient(to bottom, var(--background-f3f5f9) 389px, var(--background-11161a) 389px);
display: flex;
flex-direction: column;
align-items: center;
padding: 70px 0 80px 0;
padding-inline: 40px;
}
.team-image-container {
width: 100%;
max-width: 1300px;
height: 628px;
}
.team-banner-card {
width: 100%;
max-width: 1300px;
height: 628px;
position: relative;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.team-banner-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 1300px;
height: 628px;
object-fit: cover;
z-index: 1;
}
.team-banner-quote-box {
position: absolute;
left: 30px;
bottom: 30px;
z-index: 2;
width: 690px;
height: 126px;
background: var(--background-rgba-14-15-17-0-6);
backdrop-filter: blur(10px);
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.team-banner-quote-text {
font-size: var(--font-size-24);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-ffffff);
border-left: 1px solid var(--background-64717b);
padding-left: 20px;
}
.team-banner-quote-icon {
position: absolute;
top: -15px;
left: 15px;
width: 30px;
height: 30px;
background-color: var(--background-64717b);
color: var(--color-ffffff);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.team-banner-crest-badge {
position: absolute;
right: 45px;
bottom: -75px;
z-index: 2;
width: 170px;
height: 170px;
border-radius: 50%;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
}
.team-banner-circle-text {
transform-origin: 85px 85px;
transform-box: view-box;
animation: rotateText 20s linear infinite;
}
@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.section-how {
width: 100%;
min-height: 889px;
background-color: var(--background-11161a);
display: flex;
flex-direction: column;
align-items: center;
padding: 70px 0 80px 0;
padding-inline: 40px;
}
.how-container {
width: 100%;
max-width: 1300px;
min-height: 739px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.how-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.how-header-left {
width: 635px;
display: flex;
flex-direction: column;
gap: 11px;
}
.how-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.how-header-right {
width: 635px;
}
.how-header-desc {
font-size: var(--font-size-18);
font-weight: 600;
line-height: normal;
letter-spacing: 0.02em;
color: #babbbd;
}
.how-cards-grid {
display: flex;
gap: 30px;
}
.how-card {
width: 302.5px;
min-width: 0;
min-height: 590px;
background-color: var(--background-rgba-255-255-255-0-05);
padding: 40px 30px 30px;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.how-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}
.how-card:last-child {
background-color: var(--background-1d2225);
}
.how-card-badge {
position: absolute;
top: -15px;
left: 30px;
padding: 5px 14px;
background-color: var(--background-64717b);
font-size: var(--font-size-14);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.how-card-icon-box {
width: 60px;
height: 60px;
background-color: var(--background-rgba-14-15-16-0-53);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.how-card:last-child .how-card-icon-box {
background-color: var(--background-161819);
}
.how-card-title {
font-size: var(--font-size-22);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-ffffff);
margin-bottom: 7px;
}
.how-card-desc {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-babbbd);
margin-bottom: 20px;
}
.how-card-subtitle {
font-size: var(--font-size-18);
font-weight: 600;
color: var(--color-ffffff);
margin-bottom: 12px;
}
.how-card-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 25px;
}
.how-card-list li {
font-size: var(--font-size-14);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-babbbd);
display: flex;
gap: 8px;
}
.check-icon {
color: var(--color-64717b);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.how-card-btn {
width: 100%;
height: 55px;
margin-top: auto;
border: 1px solid var(--background-64717b);
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.section-prolex-watermark {
width: 100%;
height: 262.99px;
background-color: var(--background-11161a);
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
padding-inline: 40px;
}
.section-expert-discuss {
width: 100%;
height: 390px;
background: linear-gradient(to bottom, var(--background-11161a) 200px, var(--background-ffffff) 200px);
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
padding-inline: 40px;
}
.expert-discuss-container {
width: 100%;
max-width: 1300px;
height: 270px;
background-color: var(--background-0a1013);
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.expert-discuss-left {
width: 600px;
display: flex;
flex-direction: column;
gap: 20px;
}
.expert-discuss-title {
font-size: var(--font-size-28);
font-weight: 600;
color: var(--color-ffffff);
}
.expert-discuss-desc {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
color: var(--color-babbbd);
}
.expert-discuss-actions {
display: flex;
align-items: center;
gap: 15px;
}
.expert-discuss-btn {
width: 200px;
height: 55px;
padding: 11px 20px;
border: 1px solid var(--background-64717b);
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.expert-discuss-phone-block {
display: flex;
flex-direction: column;
gap: 2px;
margin-left: 10px;
}
.expert-discuss-phone-label {
font-size: var(--font-size-14);
color: var(--color-64717b);
}
.expert-discuss-phone-val {
font-size: var(--font-size-25);
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-ffffff);
}
.expert-discuss-right {
width: 500px;
display: flex;
flex-direction: column;
gap: 25px;
}
.expert-discuss-avatar-row {
flex-shrink: 0;
display: flex;
gap: 20px;
align-items: center;
}
.expert-discuss-avatar {
width: 90px;
height: 90px;
border-radius: 900px;
flex-shrink: 0;
object-fit: cover;
object-position: top;
}
.expert-discuss-profile {
display: flex;
flex-direction: column;
gap: 6px;
}
.expert-discuss-name {
font-size: var(--font-size-22);
font-weight: 700;
color: var(--color-ffffff);
}
.expert-discuss-role {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-babbbd);
}
.expert-discuss-points {
display: flex;
flex-wrap: wrap;
gap: 15px 30px;
}
.point-item {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-ffffff);
display: flex;
gap: 8px;
}
.point-item-wide {
width: 100%;
}
.section-pressa {
position: relative;
width: 100%;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 80px 0;
padding-inline: 40px;
}
.pressa-container {
width: 100%;
max-width: 1300px;
display: flex;
flex-direction: column;
gap: 40px;
}
.pressa-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.pressa-header-left {
display: flex;
flex-direction: column;
gap: 15px;
}
.pressa-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.pressa-desc {
font-size: var(--font-size-18);
font-weight: 500;
color: var(--color-64686a);
}
.pressa-cards-grid {
--pressa-gap: 30px;
width: 100%;
max-width: 1300px;
display: flex;
gap: var(--pressa-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pressa-cards-grid::-webkit-scrollbar {
display: none;
}
.pressa-card {
flex: 0 0 calc((100% - 3 * var(--pressa-gap)) / 4);
width: calc((100% - 3 * var(--pressa-gap)) / 4);
min-width: 0;
max-width: calc((100% - 3 * var(--pressa-gap)) / 4);
box-sizing: border-box;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 15px;
cursor: pointer;
}
.pressa-logo-box {
width: 100%;
aspect-ratio: 302.5 / 180;
background: var(--background-f3f5f9);
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
box-sizing: border-box;
}
.pressa-card:hover .pressa-logo-box {
background-color: #e2e6ee;
}
.pressa-logo-img {
max-width: 80%;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
}
.pressa-card-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.pressa-category {
font-size: var(--font-size-14);
font-weight: 500;
color: var(--color-64717b);
}
.pressa-card-title {
font-size: var(--font-size-18);
font-weight: 700;
line-height: 1.35;
color: var(--color-11161a);
}
.section-faq {
width: 100%;
min-height: 970px;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 80px 0;
}
.faq-container {
width: 100%;
max-width: 1300px;
min-height: 790px;
background: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/faq.webp);
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
}
.faq-header {
width: 100%;
max-width: 1220px;
min-height: 122px;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 30px;
}
.faq-header-left {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-title {
font-size: var(--font-size-34);
font-weight: 600;
color: var(--color-ffffff);
letter-spacing: 0.02em;
}
.faq-header-right {
width: 100%;
max-width: 480px;
}
.faq-header-desc {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
color: var(--color-babbbd);
}
.faq-accordion {
width: 100%;
max-width: 1220px;
display: flex;
flex-direction: column;
}
.faq-item {
width: 100%;
max-width: 1220px;
padding: 26px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
flex-direction: column;
cursor: pointer;
user-select: none;
transition: background-color 0.25s ease;
}
.faq-item-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
width: 100%;
cursor: pointer;
}
.faq-question-row {
display: flex;
align-items: center;
gap: 18px;
flex-grow: 1;
}
.faq-num {
font-size: var(--font-size-20);
font-weight: 600;
color: var(--color-64717b);
}
.faq-question {
font-size: var(--font-size-24);
font-weight: 600;
color: var(--color-ffffff);
}
.faq-toggle-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
color: var(--color-ffffff);
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.is-open .faq-toggle-btn {
color: var(--color-64717b);
}
.faq-item-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.35s ease;
padding: 0 0 0 43px;
max-width: 1017px;
}
.faq-item.is-open .faq-item-body {
max-height: 320px;
opacity: 1;
padding-top: 19px;
}
.faq-answer {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
color: var(--color-babbbd);
}
.section-activities {
width: 100%;
background-color: var(--background-f3f5f9);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
padding-inline: 40px;
}
.activities-container {
--activities-gap: 30px;
width: 100%;
max-width: 1300px;
display: flex;
justify-content: space-between;
gap: var(--activities-gap);
}
.activities-left-col {
flex: 0 0 calc((100% - 2 * var(--activities-gap)) / 3);
width: calc((100% - 2 * var(--activities-gap)) / 3);
min-width: 0;
max-width: calc((100% - 2 * var(--activities-gap)) / 3);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
.activities-info-block {
display: flex;
flex-direction: column;
gap: 11px;
}
.activities-title {
font-size: var(--font-size-34);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.activities-desc {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.activities-cards-grid {
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: var(--activities-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.activities-cards-grid::-webkit-scrollbar {
display: none;
}
.activity-card {
flex: 0 0 calc((100% - var(--activities-gap)) / 2);
width: calc((100% - var(--activities-gap)) / 2);
min-width: 0;
max-width: calc((100% - var(--activities-gap)) / 2);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
cursor: pointer;
}
.activity-video-wrapper {
width: 100%;
aspect-ratio: 413.33 / 247;
position: relative;
overflow: hidden;
}
.activity-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.activity-card:hover .activity-thumb {
transform: scale(1.06);
}
.activity-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.3s ease;
}
.activity-card:hover .activity-play-btn {
transform: translate(-50%, -50%) scale(1.12);
}
.video-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(14, 15, 17, 0.85);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.video-modal-backdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.video-modal-container {
position: relative;
width: 90%;
max-width: 800px;
background: #11161A;
border: 1px solid #24282C;
border-radius: 4px;
overflow: hidden;
}
.video-modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 36px;
height: 36px;
background: rgba(100, 113, 123, 0.3);
border: none;
color: #ffffff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: background-color 0.2s ease;
}
.video-modal-close:hover {
background: #64717B;
}
.video-modal-player-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
background: #0E0F11;
position: relative;
}
.video-modal-player-wrapper iframe,
.video-modal-player-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-modal-player-stub {
width: 100%;
height: 100%;
background: #0E0F11;
display: flex;
align-items: center;
justify-content: center;
}
.video-stub-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
padding: 20px;
}
.activity-title {
font-size: var(--font-size-18);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.section-blog {
position: relative;
width: 100%;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 80px 0;
padding-inline: 40px;
}
.blog-container {
width: 100%;
max-width: 1300px;
display: flex;
flex-direction: column;
gap: 40px;
}
.blog-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.blog-header-left {
width: 640px;
display: flex;
flex-direction: column;
gap: 11px;
}
.blog-title {
font-size: var(--font-size-34);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.blog-desc {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
}
.blog-cards-grid {
--blog-gap: 30px;
width: 100%;
max-width: 1300px;
display: flex;
gap: var(--blog-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog-cards-grid::-webkit-scrollbar {
display: none;
}
.blog-card {
flex: 0 0 calc((100% - 2 * var(--blog-gap)) / 3);
width: calc((100% - 2 * var(--blog-gap)) / 3);
min-width: 0;
max-width: calc((100% - 2 * var(--blog-gap)) / 3);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
}
.blog-img-wrapper {
width: 100%;
aspect-ratio: 413.33 / 260;
position: relative;
overflow: hidden;
}
.blog-tag-badge {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
padding: 5px 14px;
background-color: var(--background-ffffff);
font-size: var(--font-size-12);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-11161a);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.blog-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card-body {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.blog-meta-row {
display: flex;
align-items: center;
gap: 15px;
}
.blog-badge-tag {
font-size: var(--font-size-14);
font-weight: 600;
color: var(--color-64717b);
}
.blog-card-title {
font-size: var(--font-size-18);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.blog-card-excerpt {
font-size: var(--font-size-14);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-64686a);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.blog-card-link {
font-size: var(--font-size-16);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-64717b);
border-bottom: 1px solid var(--background-64717b);
width: fit-content;
padding-bottom: 1px;
}
.section-form {
width: 100%;
min-height: auto;
background: linear-gradient(to bottom, var(--background-ffffff) 50%, var(--background-0a1013) 50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
padding-top: 70px;
padding-inline: 40px;
}
.form-container {
width: 100%;
max-width: 1300px;
min-height: auto;
background-color: var(--background-11161a);
padding: 50px;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 50px;
align-items: stretch;
}
.form-left-col {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.form-title {
font-size: var(--font-size-34);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-ffffff);
}
.form-title span {
color: #BA9475;
}
.form-desc {
font-size: var(--font-size-18);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-babbbd);
margin-bottom: 31px;
}
.main-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
flex-grow: 1;
}
.form-label {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-babbbd);
}
.form-input {
width: 100%;
height: 60px;
background-color: var(--background-1d2225);
border: none;
padding: 0 15px;
font-family: inherit;
font-size: var(--font-size-16);
color: var(--color-ffffff);
outline: none;
}
.form-input::placeholder {
color: #BABBBD;
}
.textarea-wrapper {
position: relative;
}
.form-textarea {
width: 100%;
height: 140px;
background-color: var(--background-1d2225);
border: none;
padding: 16px;
font-family: inherit;
font-size: var(--font-size-16);
color: var(--color-ffffff);
outline: none;
resize: none;
}
.form-textarea::placeholder {
color: #BABBBD;
}
.textarea-counter {
position: absolute;
bottom: 15px;
right: 20px;
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-babbbd);
}
.file-dropzone {
width: 100%;
height: 80px;
border: 1px dashed var(--background-64686a);
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-size: var(--font-size-14);
font-weight: 500;
color: var(--color-ffffff);
cursor: pointer;
}
.file-dropzone .text-underline {
text-decoration: none;
color: #64717B;
}
.form-checkbox-row {
display: flex;
align-items: center;
gap: 12px;
}
.checkbox-custom-label {
display: flex;
align-items: center;
cursor: pointer;
}
.checkbox-input {
display: none;
}
.checkbox-box {
width: 25px;
height: 25px;
background-color: var(--background-24282c);
border: 1px solid var(--background-64717b);
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.modal-checkbox-box {
width: 20px;
height: 20px;
margin-top: 2px;
}
.checkbox-input:checked + .checkbox-box {
background-color: var(--background-64717b);
border-color: var(--background-64717b);
}
.checkbox-input:checked + .checkbox-box::after {
content: '';
width: 12px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4.5 8L10.5 2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: block;
}
.modal-checkbox-box::after {
width: 10px;
height: 8px;
}
.checkbox-text {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-babbbd);
line-height: 1.35;
}
.form-legal-link {
color: var(--color-ffffff);
text-decoration: underline;
}
.form-submit-btn {
width: 100%;
height: 60px;
background-color: var(--background-64717b);
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
.form-right-col {
width: 100%;
min-width: 0;
min-height: auto;
height: auto;
background-color: #0A1013;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.form-expert-profile {
display: flex;
gap: 26px;
align-items: center;
border-bottom: 1px solid #11161A;
padding-bottom: 30px;
margin-bottom: 40px;
}
.form-expert-avatar {
width: 90px;
height: 90px;
border-radius: 900px;
object-fit: cover;
object-position: top;
}
.form-expert-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-expert-name {
font-size: var(--font-size-22);
font-weight: 700;
color: var(--color-ffffff);
}
.form-expert-role {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-babbbd);
}
.form-direct-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-direct-title {
font-size: var(--font-size-24);
font-weight: 600;
color: var(--color-ffffff);
}
.form-direct-desc {
font-size: var(--font-size-16);
font-weight: 500;
line-height: 1.4;
color: var(--color-babbbd);
}
.form-contact-cards {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.form-contact-card {
background-color: #11161A;
border: 1px solid #11161A;
padding: 12.5px 15px;
display: flex;
gap: 15px;
align-items: center;
}
.form-card-icon {
display: flex;
align-items: center;
justify-content: center;
}
.form-card-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-card-label {
font-size: var(--font-size-10);
color: var(--color-babbbd);
}
.form-card-val {
font-size: var(--font-size-18);
font-weight: 700;
color: var(--color-ffffff);
}
.form-contact-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-mini-contact {
flex: 1;
background-color: #11161A;
border: 1px solid #11161A;
padding: 12.5px 15px;
display: flex;
gap: 10px;
align-items: center;
}
.form-mini-icon {
display: flex;
align-items: center;
justify-content: center;
}
.form-mini-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-mini-label {
font-size: var(--font-size-10);
color: var(--color-babbbd);
}
.form-mini-val {
font-size: var(--font-size-18);
font-weight: 700;
color: var(--color-ffffff);
}
.form-nda-note {
display: flex;
gap: 12px;
align-items: center;
font-size: var(--font-size-14);
color: var(--color-babbbd);
line-height: 1.4;
margin-top: auto;
}
.section-footer {
width: 100%;
min-height: auto;
height: auto;
background: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/footer-bg.webp);
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-inline: 40px;
padding-top: 40px;
}
.footer-container {
width: 100%;
max-width: 1300px;
height: auto;
padding-top: 32px;
padding-bottom: 40px;
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.2fr) minmax(220px, 1.2fr) minmax(200px, 1.1fr);
gap: 40px;
}
.footer-col-1 {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 40px;
}
.footer-logo {
width: 213.36px;
height: 65.57px;
}
.footer-social-block {
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-social-label {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-babbbd);
}
.footer-social-icons {
display: flex;
gap: 15px;
}
.footer-social-btn {
width: 55px;
height: 55px;
background-color: var(--background-11161a);
display: flex;
justify-content: center;
align-items: center;
}
.footer-col-2 {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 25px;
}
.footer-nav-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-nav-title {
font-size: var(--font-size-16);
font-weight: 600;
color: var(--color-ffffff);
}
.footer-nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-nav-list a {
font-size: var(--font-size-14);
font-weight: 400;
color: var(--color-babbbd);
}
.footer-col-3 {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.footer-info-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-info-header {
display: flex;
align-items: center;
gap: 8px;
}
.footer-info-title {
font-size: var(--font-size-16);
font-weight: 700;
color: var(--color-ffffff);
}
.footer-info-text {
font-size: var(--font-size-18);
font-weight: 600;
color: var(--color-babbbd);
line-height: 1.4;
}
.footer-info-legal {
font-size: var(--font-size-14);
font-weight: 400;
color: var(--color-babbbd);
line-height: 1.4;
}
.footer-requisites-link {
font-size: var(--font-size-14);
font-weight: 600;
color: var(--color-64717b);
border-bottom: 1px solid var(--background-64717b);
width: fit-content;
padding-bottom: 1px;
margin-top: 4px;
}
.footer-col-4 {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-call-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-call-label {
font-size: var(--font-size-14);
font-weight: 400;
color: var(--color-babbbd);
}
.footer-phone-val {
font-size: var(--font-size-28);
font-weight: 700;
color: var(--color-ffffff);
}
.footer-callback-link {
font-size: var(--font-size-14);
font-weight: 500;
color: var(--color-64717b);
border-bottom: 1px solid var(--background-64717b);
width: fit-content;
padding-bottom: 1px;
}
.footer-email-val {
font-size: var(--font-size-22);
font-weight: 600;
color: var(--color-ffffff);
}
.footer-social-row {
display: flex;
gap: 15px;
}
.footer-write-btn {
width: 263px;
height: 55px;
border: 2px solid var(--background-64717b);
color: var(--color-ffffff);
font-size: var(--font-size-14);
font-weight: 600;
letter-spacing: 0.02em;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: auto;
margin-bottom: 40px;
}
.footer-bottom-bar {
width: 100%;
height: 50px;
border-top: 1px solid rgba(61, 85, 106, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.footer-bottom-inner {
width: 100%;
max-width: 1300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copyright {
font-size: var(--font-size-14);
font-weight: 400;
color: var(--color-babbbd);
}
.footer-policy-links {
display: flex;
gap: 20px;
}
.footer-bottom-link {
font-size: var(--font-size-14);
font-weight: 400;
color: var(--color-babbbd);
}
a,
button,
.hero-btn-consult,
.hero-action-btn,
.slider-btn,
.icon-square-btn,
.competency-link,
.card-wide-btn,
.expert-card-photo,
.why-card,
.why-btn-discuss,
.how-card-btn,
.expert-discuss-btn,
.blog-thumb,
.blog-card-link,
.file-dropzone,
.form-submit-btn,
.form-mini-contact,
.form-contact-card,
.footer-social-btn,
.footer-requisites-link,
.footer-callback-link,
.footer-write-btn {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.hero-contact-value:hover {
color: var(--color-babbbd);
}
.hero-btn-consult:hover {
background: var(--background-rgba-255-255-255-0-1);
border-color: var(--background-ffffff);
}
.hero-action-btn:hover {
background: var(--background-888a8c);
}
.slider-btn:hover {
background-color: var(--background-64717b);
}
.slider-btn svg rect,
.slider-btn svg path {
transition: fill 0.2s ease, stroke 0.2s ease;
}
.slider-btn:hover svg rect {
fill: var(--background-64717b);
}
.slider-btn:hover svg path {
stroke: #ffffff;
}
.slider-btn-white:hover {
background-color: var(--background-64717b);
}
.slider-btn-white:hover svg path {
stroke: #ffffff;
}
.icon-square-btn:hover {
background: var(--background-64717b);
}
.specialization-item:hover {
background: var(--background-rgba-255-255-255-0-02);
}
.specialization-footer-link:hover {
color: var(--color-ffffff);
}
.competency-link:hover {
color: var(--color-11161a);
border-color: var(--background-11161a);
}
.card-wide-btn:hover {
background: var(--background-888a8c);
}
.why-card:hover {
background-color: var(--background-24282c);
}
.why-btn-discuss:hover {
background: var(--background-888a8c);
}
.how-card-btn:hover {
background: var(--background-64717b);
color: var(--color-ffffff);
}
.expert-discuss-btn:hover {
background: var(--background-64717b);
color: var(--color-ffffff);
}
.expert-discuss-phone-val:hover {
color: var(--color-babbbd);
}
.blog-card-link:hover {
color: var(--color-11161a);
border-color: var(--background-11161a);
}
.file-dropzone:hover {
background-color: var(--background-24282c);
border-color: var(--background-ffffff);
}
.form-submit-btn:hover {
background: var(--background-888a8c);
}
.form-mini-contact:hover {
background-color: var(--background-1d2225);
}
.form-contact-card:hover {
background-color: var(--background-1d2225);
}
.footer-social-btn rect,
.footer-social-row .icon-square-btn rect,
.footer-social-btn path,
.footer-social-row .icon-square-btn path {
transition: fill 0.25s ease, stroke 0.25s ease;
}
.footer-social-btn:hover,
.footer-social-row .icon-square-btn:hover {
background-color: var(--background-64717b);
}
.footer-social-btn:hover rect,
.footer-social-row .icon-square-btn:hover rect {
fill: #64717b;
}
.footer-social-btn:hover path[fill="#64717B"] {
fill: #ffffff;
}
.footer-social-btn:hover path[stroke="#64717B"],
.footer-social-row .icon-square-btn:hover path[stroke="#64717B"] {
stroke: #ffffff;
}
.footer-nav-list a:hover {
color: var(--color-ffffff);
}
.footer-requisites-link:hover {
color: var(--color-ffffff);
border-color: var(--background-ffffff);
}
.footer-callback-link:hover {
color: var(--color-ffffff);
border-color: var(--background-ffffff);
}
.footer-phone-val:hover {
color: var(--color-babbbd);
}
.footer-email-val:hover {
color: var(--color-babbbd);
}
.footer-write-btn:hover {
background: var(--background-64717b);
color: var(--color-ffffff);
}
.footer-bottom-link:hover {
color: var(--color-ffffff);
}
.section-article-hero {
width: 100%;
height: 583.83px;
background-color: #11161A;
background-image: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/page__article/hero-bg.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
padding: 130.83px 0 0 0;
}
.article-hero-content {
width: 100%;
max-width: 1300px;
height: 453px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 12px;
}
.article-hero-title {
font-size: var(--font-size-46);
font-weight: 500;
line-height: 1.16;
color: var(--color-ffffff);
width: 850px;
max-width: 100%;
}
.article-hero-subtitle {
font-size: var(--font-size-20);
font-weight: 500;
line-height: 1.4;
color: var(--color-rgba-255-255-255-0-8);
width: 850px;
max-width: 100%;
}
.section-article-body {
width: 100%;
background-color: var(--background-ffffff);
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
box-sizing: border-box;
}
.article-body-container {
width: 100%;
max-width: 1300px;
display: flex;
gap: 50px;
justify-content: space-between;
align-items: flex-start;
box-sizing: border-box;
}
.article-main-col {
width: 850px;
max-width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
box-sizing: border-box;
}
.article-meta-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 5px;
}
.article-meta-info {
display: flex;
align-items: center;
gap: 10px;
}
.article-meta-date {
font-size: var(--font-size-14);
font-weight: 600;
color: var(--color-64686a);
}
.article-meta-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--background-64686a);
}
.article-meta-time {
display: flex;
gap: 5px;
align-items: center;
font-size: var(--font-size-14);
font-weight: 600;
color: var(--color-64686a);
}
.article-heading-2 {
font-size: var(--font-size-30);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-paragraph {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-bullet-list {
list-style: disc;
padding-left: 25px;
display: flex;
flex-direction: column;
gap: 8px;
}
.article-bullet-list li {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-image-box {
display: flex;
flex-direction: column;
gap: 8px;
width: 850px;
max-width: 100%;
margin: 20px 0;
box-sizing: border-box;
}
.article-image-content {
width: 850px;
max-width: 100%;
height: 468px;
object-fit: cover;
display: block;
}
.article-image-caption {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-64686a);
padding: 0 20px;
}
.article-subsection {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
margin-top: 5px;
}
.article-heading-3 {
font-size: var(--font-size-22);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-11161a);
}
.article-heading-3-normal {
font-weight: 500;
}
.article-highlight-box {
background-color: var(--background-f3f5f9);
padding: 20px 15px;
border-left: 2px solid #64717B;
}
.article-highlight-text {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-sub-points {
display: flex;
flex-direction: column;
gap: 12px;
}
.article-sub-point {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.4;
padding-left: 1.28em;
text-indent: -0.9em;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-conclusion-block {
display: flex;
flex-direction: column;
gap: 20px;
}
.article-callout-box {
background-color: var(--background-f3f5f9);
border-left: 2px solid var(--background-64717b);
padding: 20px 15px;
}
.article-callout-text {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.text-bold {
font-weight: 700;
}
.text-bullet {
font-weight: 700;
color: var(--color-11161a);
}
.article-sidebar-col {
width: 400px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
position: sticky;
top: 30px;
box-sizing: border-box;
}
.article-author-card {
width: 400px;
max-width: 100%;
height: 340px;
background-color: var(--background-11161a);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.author-profile-row {
display: flex;
align-items: center;
gap: 20px;
}
.author-profile-avatar {
width: 80px;
height: 80px;
border-radius: 800px;
object-fit: cover;
object-position: top;
}
.author-profile-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.author-profile-label {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-babbbd);
}
.author-profile-name {
font-size: var(--font-size-20);
font-weight: 600;
color: var(--color-ffffff);
}
.author-stats-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.author-stat-item {
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-ffffff);
display: flex;
gap: 10px;
align-items: center;
}
.author-share-row {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.author-share-label {
font-size: var(--font-size-14);
font-weight: 600;
color: var(--color-babbbd);
}
.author-share-icons {
display: flex;
gap: 15px;
align-items: center;
}
.author-share-icon {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
}
.author-share-icon:hover {
opacity: 1;
}
.article-related-card {
width: 400px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 25px;
box-sizing: border-box;
}
.article-related-title {
font-size: var(--font-size-20);
font-weight: 700;
color: var(--color-11161a);
}
.article-related-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.related-item-row {
display: flex;
gap: 20px;
align-items: center;
}
.related-item-thumb-box {
width: 137px;
height: 96px;
background-color: var(--background-f3f5f9);
flex-shrink: 0;
overflow: hidden;
}
.related-item-thumb {
width: 137px;
height: 96px;
object-fit: cover;
}
.related-item-info {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.related-item-title {
font-size: var(--font-size-14);
font-weight: 700;
line-height: 1.35;
color: var(--color-11161a);
}
.related-item-row:hover .related-item-title {
color: var(--color-64717b);
}
.related-item-date-row {
display: flex;
align-items: center;
gap: 6px;
}
.related-item-date {
font-size: var(--font-size-12);
font-weight: 600;
color: var(--color-64717b);
}
.hero-mobile-controls {
display: none;
}
.mobile-drawer-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-drawer-overlay.active {
display: block;
opacity: 1;
pointer-events: auto;
}
.mobile-nav-drawer {
position: fixed;
top: 0;
right: -390px;
width: 100%;
max-width: 375px;
height: 100vh;
background: #0a1013;
z-index: 9999;
padding: 0 15px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
overflow-y: auto;
}
@media (max-width: 480px) {
.mobile-nav-drawer {
width: 100vw;
max-width: 100vw;
right: -100vw;
}
}
.mobile-nav-drawer.active {
right: 0;
}
.mobile-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 0;
min-height: 62px;
box-sizing: border-box;
}
.mobile-drawer-logo {
width: 124.56px;
height: 38.28px;
object-fit: contain;
display: block;
}
.mobile-drawer-close-btn {
color: var(--color-ffffff);
width: 40px;
height: 40px;
background: rgba(9, 12, 14, 0.54);
border: none;
border-radius: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color 0.2s ease;
}
.mobile-drawer-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.mobile-drawer-close-btn svg {
display: block;
}
.mobile-drawer-nav {
display: flex;
flex-direction: column;
padding: 15px 0;
gap: 0;
}
.mobile-drawer-link {
font-family: 'Manrope', sans-serif;
font-size: 21px;
font-weight: 600;
line-height: normal;
color: #ffffff;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
min-height: 45px;
box-sizing: border-box;
transition: color 0.2s ease;
}
.mobile-drawer-link:hover {
color: var(--color-64717b);
}
.mobile-drawer-contacts {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: auto;
}
.mobile-drawer-call-group {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.mobile-drawer-call-label {
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: normal;
color: #babbbd;
}
.mobile-drawer-phone {
font-family: 'Manrope', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: normal;
color: #ffffff;
display: inline-block;
transition: color 0.2s ease;
}
.mobile-drawer-phone:hover {
color: var(--color-64717b);
}
.mobile-drawer-callback-link {
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 500;
color: #64717b;
border-bottom: 1px solid #64717b;
width: fit-content;
padding-bottom: 1px;
cursor: pointer;
background: none;
border-top: none;
border-left: none;
border-right: none;
padding-left: 0;
padding-right: 0;
transition: color 0.2s ease, border-color 0.2s ease;
}
.mobile-drawer-callback-link:hover {
color: #ffffff;
border-color: #ffffff;
}
.mobile-drawer-email {
font-family: 'Manrope', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: normal;
color: #ffffff;
display: inline-block;
transition: color 0.2s ease;
}
.mobile-drawer-email:hover {
color: var(--color-64717b);
}
.mobile-drawer-social-row {
display: flex;
align-items: center;
gap: 15px;
}
.mobile-drawer-social-btn {
width: 55px;
height: 55px;
background: #11161a;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.2s ease;
}
.mobile-drawer-social-btn:hover {
background-color: #1a2228;
}
.mobile-drawer-btn {
width: 100%;
height: 55px;
border: 2px solid #64717b;
background: transparent;
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: normal;
letter-spacing: 0.02em;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 20px;
box-sizing: border-box;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mobile-drawer-btn:hover {
background-color: rgba(100, 113, 123, 0.2);
border-color: #75838e;
}
.mobile-drawer-btn svg {
flex-shrink: 0;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: 20px;
box-sizing: border-box;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal-container {
width: 527px;
max-width: 100%;
background-color: #0a1013;
padding: 40px;
position: relative;
transform: translateY(20px) scale(0.97);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.modal-overlay.active .modal-container {
transform: translateY(0) scale(1);
}
.modal-close-btn {
position: absolute;
top: 25px;
right: 25px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: #babbbd;
transition: transform 0.2s ease, color 0.2s ease;
}
.modal-close-btn:hover {
transform: rotate(90deg);
color: #ffffff;
}
.modal-title {
font-size: var(--font-size-26);
font-weight: 600;
line-height: normal;
letter-spacing: 0.02em;
color: var(--color-ffffff);
margin-top: 15px;
margin-bottom: 10px;
}
.modal-title span {
color: #64717B;
}
.modal-subtitle {
font-size: var(--font-size-16);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-babbbd);
margin-bottom: 25px;
}
.modal-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-inputs-row {
display: flex;
gap: 20px;
}
.modal-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-field-full {
width: 100%;
}
.modal-label {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-ffffff);
}
.modal-input {
width: 100%;
height: 60px;
background-color: var(--background-1d2226);
border: 1px solid transparent;
padding: 0 15px;
font-family: inherit;
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-ffffff);
outline: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.modal-input:focus {
border-color: var(--color-64717b);
}
.modal-input::placeholder {
color: var(--color-babbbd);
}
.modal-textarea-wrapper {
position: relative;
background-color: var(--background-1d2226);
border: 1px solid transparent;
transition: border-color 0.2s ease;
}
.modal-textarea-wrapper:focus-within {
border-color: var(--color-64717b);
}
.modal-textarea {
width: 100%;
height: 140px;
background: transparent;
border: none;
padding: 15px;
padding-bottom: 30px;
font-family: inherit;
font-size: var(--font-size-16);
font-weight: 500;
color: var(--color-ffffff);
resize: none;
outline: none;
box-sizing: border-box;
}
.modal-textarea::placeholder {
color: var(--color-babbbd);
}
.modal-char-counter {
position: absolute;
right: 15px;
bottom: 10px;
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-babbbd);
}
.modal-consent-row {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.modal-checkbox {
width: 20px;
height: 20px;
accent-color: var(--color-64717b);
flex-shrink: 0;
margin-top: 2px;
}
.modal-consent-text {
font-size: var(--font-size-12);
font-weight: 400;
line-height: 1.4;
color: var(--color-babbbd);
}
.modal-submit-btn {
height: 60px;
background-color: var(--color-64717b);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--font-size-14);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ffffff);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.modal-submit-btn:hover {
background-color: #75838e;
}
.modal-submit-btn:active {
transform: scale(0.98);
}
.modal-success-view {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 0 10px;
}
.modal-success-icon-box {
width: 80px;
height: 80px;
background-color: var(--background-1d2226);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.modal-success-title {
font-size: var(--font-size-26);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ffffff);
margin-bottom: 12px;
}
.modal-success-desc {
font-size: var(--font-size-16);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--color-babbbd);
}
@media (max-width: 1366px) {
.why-card {
padding: 20px;
}
.hero-left-content {
height: unset;
}
.hero-text-group, .hero-left-content {
width: 100%;
}
.hero-action-btn {
flex-shrink: 0;
}
.why-left-block { flex: 1 1 500px; }
.how-cards-grid { 
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.how-card { width: 100%; }
.section-expert-discuss { height: 100%; }
.expert-discuss-container {
flex-direction: column;
height: 100%;
align-items: flex-start;
gap: 40px;
}
.form-title br { display: none; }
.section-article-hero {
padding-inline: 40px;
}
.section-article-body {
padding-inline: 40px;
}
.article-hero-content {
max-width: 100%;
}
.article-hero-title {
width: 100%;
max-width: 100%;
}
.article-hero-subtitle {
width: 100%;
max-width: 100%;
}
.article-body-container {
max-width: 100%;
}
.article-main-col {
width: calc(100% - 450px);
max-width: 100%;
}
.article-image-box {
width: 100%;
max-width: 100%;
}
.article-image-content {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 850 / 468;
}
}
@media (max-width: 1100px) {
.why-card-text { font-size: var(--font-size-16); }
}
@media (max-width: 1024px) {
.competencies-cards-grid { 
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.why-left-block { flex: 1 1 100%; }
.team-banner-quote-box { width: 600px; }
.team-banner-quote-text { font-size: 22px; }
.section-prolex-watermark { padding: 0; }
.modal-container {
padding: 30px 18px;
}
.modal-inputs-row {
flex-direction: column;
gap: 15px;
}
.hero-tablet-controls {
display: flex;
align-items: center;
gap: 12px;
}
.hero-tablet-btn {
width: 50px;
height: 50px;
border: 2px solid #64717b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-decoration: none;
padding: 0;
box-sizing: border-box;
}
.hero-tablet-btn:hover {
background: var(--background-rgba-255-255-255-0-1);
border-color: var(--background-ffffff);
}
.hero-tablet-btn:active {
transform: translateY(0);
}
.hero-tablet-btn svg {
display: block;
}
.hero-tablet-btn svg path {
stroke: #ffffff;
transition: stroke 0.2s ease;
}
.hero-contacts-wrapper .hero-contact-col {
display: none;
}
.about-left-col {
flex: 1 1 450px;
}
.section-partners {
height: auto;
padding: 15px;
}
.partners-container {
max-width: 100%;
height: auto;
flex-wrap: wrap;
gap: 20px;
}
.partner-item {
width: 160px;
height: 70px;
}
.hero-contacts-wrapper {
gap: 20px;
}
.team-banner-bg-img, .team-banner-card, .team-image-container { height: 450px; }
.specialization-content {
gap: 20px;
}
.section-footer {
height: auto;
background-color: var(--background-0a1013);
padding: 0 40px;
}
.footer-container {
max-width: 100%;
height: auto;
padding: 40px 0 30px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 30px;
}
.footer-col {
width: 100%;
}    
.form-container {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.form-left-col { width: 100%; }
.form-right-col { width: 100%; }
.card-wide-left {
max-width: 100%;
}
.specialization-footer-link {
text-align: right;
}
.card-wide-right {
display: none;
}
.expert-card {
flex: 0 0 calc((100% - 2 * var(--expert-gap)) / 3);
width: calc((100% - 2 * var(--expert-gap)) / 3);
max-width: calc((100% - 2 * var(--expert-gap)) / 3);
}
.pressa-card { 
flex: 0 0 calc((100% - 2 * var(--pressa-gap)) / 3);
width: calc((100% - 2 * var(--pressa-gap)) / 3);
max-width: calc((100% - 2 * var(--pressa-gap)) / 3);     
}
.case-stat-badge {
height: unset;
}
.case-stat-num {
font-size: 44px;
}
.section-why {
height: auto;
padding: 50px 0;
}
.why-container {
max-width: 100%;
height: auto;
min-height: auto;
flex-direction: column;
gap: 30px;
padding: 40px 15px;
}
.why-left-block {
width: 100%;
max-width: 100%;
}
.why-desc br {
display: none;
}
.why-action-row {
margin-top: 25px;
}
.why-btn-discuss {
width: 100%;
}
.why-right-grid {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
gap: 15px;
}
.why-card {
min-height: auto;
padding: 20px 15px;
}
.article-body-container {
flex-direction: column;
gap: 40px;
}
.article-main-col {
width: 100%;
max-width: 100%;
}
.article-sidebar-col {
width: 100%;
max-width: 100%;
position: static;
}
.article-author-card {
width: 100%;
max-width: 100%;
height: auto;
}
.article-related-card {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 900px) {
.team-banner-crest-badge {
right: 15px;
}
.how-header-desc { margin-top: 20px;}
.section-form {
padding-inline: 15px;
}
.form-container {
padding: 30px;
}
.section-footer { padding-inline: 15px; }
.section-blog .slider-controls {
margin-top: 20px;
}
.cases-col-left {
flex: unset;
max-width: 100%;
}
.section-experts .slider-controls { 
margin-top: 20px;
}
.hero-top-bar {
height: 62px;
border-bottom: none;
}
.hero-logo img {
width: 124.56px;
height: 38.28px;
}
.hero-contacts-wrapper,
.hero-nav-bar {
display: none;
}
.hero-mobile-controls {
display: flex;
align-items: center;
}
.hero-mobile-phone-btn {
display: none;
}
.hero-mobile-burger-btn {
gap: 4px;
padding: 11px 12px;
}
.specialization-header {
gap: 20px;
}
.partners-container { 
gap: 10px;
}
.hero-mobile-burger-btn {
width: 40px;
height: 40px;
background: rgba(9, 12, 14, 0.54);
border: none;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.burger-bar {
width: 16px;
height: 2px;
background-color: var(--background-ffffff);
}
.hero-content-wrapper {
height: auto;
min-height: 639px;
padding: 40px 15px 40px 15px;
flex-direction: column;
justify-content: flex-end;
margin: 0;
}
.hero-left-content {
width: 100%;
height: auto;
justify-content: space-between;
}
.hero-text-group {
width: 100%;
}
.hero-text-group .badge-pill {
width: fit-content;
}
.hero-text-group .badge-text {
font-weight: 600;
letter-spacing: 0.02em;
}
.hero-mobile-br {
display: inline;
}
.hero-desktop-br {
display: none;
}
.hero-title {
width: 100%;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.8);
width: 100%;
}
.hero-action-btn {
width: 100%;
height: 60px;
background-color: var(--background-64717b);
display: flex;
justify-content: space-between;
}
.section-about {
height: auto;
padding: 30px 15px;
justify-content: center;
}
.about-container {
max-width: 100%;
height: auto;
flex-direction: column;
justify-content: flex-start;
}
.about-left-col,
.about-right-col {
width: 100%;
height: auto;
display: contents;
}
.about-left-col .badge-pill {
order: 1;
width: fit-content;
}
.about-left-col .badge-text {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
color: #64686a;
}
.about-title {
order: 2;
color: #11161a;
}
.about-quote-box {
order: 3;
border-left: 1px solid #64717b;
}
.about-quote-text {
color: #11161a;
}
.about-description {
order: 4;
color: #64686a;
}
.section-specialization {
background-color: transparent;
padding: 30px 0;
justify-content: center;
}
.specialization-container {
max-width: 100%;
padding: 50px 15px;
justify-content: space-between;
}
.specialization-header {
flex-direction: column;
align-items: flex-start;
}
.specialization-header-left {
width: 100%;
}
.specialization-header-left .badge-pill {
width: fit-content;
}
.specialization-header-left .badge-text {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
}
.specialization-header-right {
width: 100%;
}
.specialization-header-desc {
color: var(--color-babbbd);
}
.specialization-content {
flex-direction: column-reverse;
}
.specialization-image-wrapper {
width: 100%;
max-width: 100%;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.specialization-img {
width: 100%;
height: 400px;
}
.spec-glass-badge {
right: 20px;
bottom: 20px;
}
.specialization-list {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.specialization-item {
width: 100%;
border-top: 1px solid #292d31;
}
.specialization-item-header {
width: 100%;
justify-content: space-between;
}
.specialization-num {
width: 30px;
}
.specialization-name {
color: var(--color-babbbd);
}
.specialization-arrow {
width: 30px;
height: 30px;
}
.specialization-item-text {
color: var(--color-babbbd);
}
.specialization-footer-row {
width: 100%;
}
.section-competencies {
height: auto;
min-height: 100%;
padding: 30px 15px;
}
.competencies-container {
max-width: 100%;
}
.competencies-quote-card {
display: grid;
grid-template-columns: 90px 1fr;
column-gap: 50px;
row-gap: 0;
max-width: 100%;
height: auto;
padding: 0 0 30px;
}
.quote-content-wrapper,
.quote-content-main {
display: contents;
}
.quote-icon-box {
grid-row: 1;
grid-column: 1;
display: flex;
justify-content: flex-start;
align-self: stretch;
width: 30px;
z-index: 1;
height: 80%;
}
.quote-icon-box svg {
width: 30px;
height: auto;
max-height: 100%;
display: block;
}
.quote-main-text {
grid-row: 1;
grid-column: 1 / -1;
padding-left: 42px;
margin: 0;
}
.quote-avatar {
grid-row: 2;
grid-column: 1;
width: 120px;
height: 120px;
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
border-radius: 50%;
}
.quote-author-block {
grid-row: 2;
grid-column: 2;
gap: 5px;
justify-content: center;
padding: 0;
}
.section-experts {
height: auto;
padding: 40px 15px;
justify-content: center;
}
.experts-container {
max-width: 100%;
height: auto;
justify-content: space-between;
}
.experts-header {
height: auto;
flex-direction: column;
align-items: flex-start;
}
.experts-header-left {
width: 100%;
}
.experts-title {
font-family: 'Manrope', sans-serif;
color: #11161a;
}
.experts-desc {
font-family: 'Manrope', sans-serif;
color: #64686a;
}
.experts-cards-grid {
scroll-snap-type: x mandatory;
}
.section-cases {
height: auto;
min-height: 712px;
padding: 50px 15px 34px 15px;
justify-content: center;
}
.cases-container {
max-width: 100%;
height: auto;
flex-direction: column;
}
.cases-col-left {
width: 100%;
height: auto;
}
.cases-nav-wrapper {
max-width: 100%;
align-items: center;
justify-content: space-between;
}
.cases-divider-line {
display: none;
}
.cases-counter-line {
margin-left: auto;
}
.cases-slider-track {
width: 100%;
max-width: 100%;
height: auto;
scroll-snap-type: x mandatory;
}
.case-stat-badge {
width: fit-content;
max-width: 100%;
height: auto;
}
.case-card-body {
max-width: 100%;
}
.cases-card:nth-of-type(2) {
display: flex;
}
.section-how {
height: auto;
padding: 0 15px 40px 15px;
justify-content: center;
}
.how-container {
max-width: 100%;
height: auto;
}
.hero-top-bar { padding-inline: 15px; }
.section-team-image { padding-inline: 15px; }
.how-header {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.how-header-left {
width: 100%;
}
.how-header-right {
width: 100%;
}
.how-header-desc {
color: var(--color-babbbd);
}
.how-cards-grid {
width: 100%;
flex-direction: column;
}
.how-card {
width: 100%;
max-width: 100%;
height: auto;
min-height: 480px;
}
.section-prolex-watermark {
height: 180px;
}
.expert-discuss-actions {
flex-wrap: wrap;
flex-direction: row;
width: 100%;
}
.expert-discuss-btn {
width: 100%;
background-color: var(--background-64717b);
justify-content: center;
}
.expert-discuss-actions .icon-square-btn {
width: 50px;
height: 50px;
flex-shrink: 0;
}
.expert-discuss-phone-label {
color: var(--color-888a8c);
}
.section-pressa {
height: auto;
padding: 40px 0;
justify-content: center;
}
.pressa-container {
max-width: 100%;
height: auto;
padding: 0 15px;
justify-content: space-between;
}
.section-faq {
height: auto;
min-height: 100%;
background-color: var(--background-11161a);
padding: 40px 0;
justify-content: center;
}
.activities-left-col {
flex: 100%;
max-width: 100%;
}
.faq-container {
max-width: 100%;
height: auto;
min-height: 100%;
padding: 0 15px;
}
.section-hero {
padding: 200px 0 0 0;
}
.team-banner-quote-box { 
width: 500px; 
}
.section-expert-discuss { padding-inline: 15px; padding-block: 40px; }
.faq-header {
height: auto;
flex-direction: column;
align-items: flex-start;
}
.faq-header-left {
width: 100%;
}
.faq-title {
font-family: 'Manrope', sans-serif;
}
.faq-header-desc {
font-family: 'Manrope', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
color: #babbbd;
}
.section-activities {
height: auto;
padding: 40px 15px;
justify-content: center;
}
.activities-container {
max-width: 100%;
height: auto;
flex-direction: column;
}
.activities-left-col,
.activities-cards-grid {
width: 100%;
}
.activities-cards-grid {
flex-direction: row;
width: 100%;
scroll-snap-type: x mandatory;
}
.section-blog {
height: auto;
padding: 40px 15px;
justify-content: center;
}
.blog-container {
max-width: 100%;
height: auto;
justify-content: space-between;
}
.section-article-hero {
height: 635px;
min-height: 635px;
background: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/page__article/hero-bg.webp) no-repeat center center;
background-size: cover;
padding: 62px 0 0 0;
justify-content: space-between;
box-sizing: border-box;
}
.article-hero-content {
height: calc(100% - 62px);
max-height: 573px;
padding: 0 15px 35px 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 12px;
}
.article-hero-title {
font-weight: 600;
width: 100%;
max-width: 100%;
}
.article-hero-subtitle {
width: 100%;
max-width: 100%;
}
.section-article-body {
padding: 40px 15px;
justify-content: center;
box-sizing: border-box;
}
.article-body-container {
width: 100%;
max-width: 100%;
flex-direction: column;
box-sizing: border-box;
}
.article-main-col {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-heading-3 {
font-weight: 500;
}
.article-image-box {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-image-content {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 850 / 468;
object-fit: cover;
}
.article-highlight-box {
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.article-conclusion-block {
width: 100%;
}
.article-callout-box {
width: 100%;
color: var(--color-11161a);
box-sizing: border-box;
}
.article-sidebar-col {
width: 100%;
max-width: 100%;
position: static;
box-sizing: border-box;
}
.article-author-card {
width: 100%;
max-width: 100%;
height: auto;
box-sizing: border-box;
}
.author-profile-avatar {
border-radius: 50%;
}
.author-share-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
box-sizing: border-box;
}
.article-related-card {
width: 100%;
max-width: 100%;
background-color: var(--background-ffffff);
box-sizing: border-box;
}
.related-item-row {
width: 100%;
}
.related-item-info {
flex-grow: 1;
min-width: 0;
}
.related-item-date {
color: var(--color-64686a);
}
.expert-discuss-left { width: 100%; }
}
@media (max-width: 800px) {
.expert-card {
flex: 0 0 calc((100% - 1 * var(--expert-gap)) / 2);
width: calc((100% - 1 * var(--expert-gap)) / 2);
max-width: calc((100% - 1 * var(--expert-gap)) / 2);
}
.blog-card{
flex: 0 0 calc((100% - 1 * var(--blog-gap)) / 2);
width: calc((100% - 1 * var(--blog-gap)) / 2);
max-width: calc((100% - 1 * var(--blog-gap)) / 2);
}
.pressa-card {
flex: 0 0 calc((100% - 1 * var(--pressa-gap)) / 2);
width: calc((100% - 1 * var(--pressa-gap)) / 2);
max-width: calc((100% - 1 * var(--pressa-gap)) / 2);
}
.competencies-quote-card {
row-gap: 40px;
}    
.quote-icon-box { height: 100%; }
.competencies-cards-grid { grid-template-columns: 1fr; }
.competency-card-wide { grid-column: unset;}
.team-banner-crest-badge { width: 120px; height: 120px; bottom: -50px; }
.team-banner-quote-text { font-size: 18px; }
.team-banner-quote-box { left: 15px; bottom: 15px; width: 400px; padding: 20px; height: 110px; }
.team-banner-bg-img, .team-banner-card, .team-image-container { height: 350px; }
}
@media (max-width: 550px) {
.site-wrapper {
min-width: 320px;
max-width: 100%;
}
.about-container { gap: 10px; }
.section-about { padding: 30px 15px; min-height: 100%; }
.section-partners { padding: 0 15px;  }
.specialization-item.is-open .specialization-item-body {
padding-top: 0;
padding-left: 0;
}
.section-hero {
height: auto;
min-height: 701px;
background: url(//iddqd.p90.ru/wp-content/themes/prolex/assets/images/hero-bg--mobile.webp) no-repeat center top;
background-size: cover;
padding: 62px 0 0 0;
margin: 0;
justify-content: space-between;
}
.badge-text {
font-size: 14px;
}
.section-how .badge-text {
font-size: 16px;
}
.about-title,
.specialization-title,
.competencies-title,
.experts-title,
.why-title,
.cases-title,
.how-title,
.pressa-title,
.faq-title,
.activities-title,
.blog-title,
.form-title,
.article-hero-title {
font-size: 26px;
line-height: normal;
}
.competencies-desc,
.experts-desc,
.why-desc,
.cases-desc,
.pressa-desc,
.faq-header-desc,
.activities-desc,
.blog-desc,
.form-desc,
.article-hero-subtitle {
font-size: 16px;
line-height: normal;
}
.specialization-header-desc {
font-size: 18px;
}
.competency-title,
.card-wide-title {
font-size: 18px;
}
.competency-text,
.card-wide-desc {
font-size: 14px;
}
.faq-num {
font-size: 16px;
}
.faq-question {
font-size: 16px;
}
.faq-answer {
font-size: 14px;
}
.faq-toggle-btn {
font-size: 14px;
}
.form-expert-name {
font-size: 18px;
}
.form-direct-title {
font-size: 22px;
}
.form-direct-desc {
font-size: 14px;
}
.form-checkbox-row .checkbox-text,
.form-legal-link {
font-size: 12px;
}
.article-heading-2 {
font-size: 22px;
margin: 0;
}
.article-meta-date,
.article-meta-time {
font-size: 14px;
}
.hero-top-bar {
padding: 11px 15px;
}
.hero-mobile-controls {
gap: 10px;
}
.hero-left-content {
gap: 32px;
}
.hero-text-group .badge-pill {
padding: 5px 10px;
}
.hero-text-group .badge-text {
font-size: 14px;
}
.hero-title {
font-size: 37px;
line-height: 1.25;
}
.hero-subtitle {
font-size: 16px;
}
.hero-action-btn {
padding: 11px 20px;
font-size: 16px;
}
.section-about {
gap: 30px;
}
.about-container {
gap: 20px;
}
.about-left-col .badge-pill {
padding: 7px 15px;
gap: 10px;
}
.about-left-col .badge-text {
font-size: 14px;
}
.about-title {
font-size: 26px;
line-height: normal;
}
.about-quote-box {
padding: 0px 0px 0px 20px;
}
.about-quote-text {
font-size: 16px;
line-height: normal;
}
.about-description {
font-size: 16px;
line-height: normal;
}
.specialization-container {
gap: 40px;
}
.specialization-header {
gap: 15px;
}
.specialization-header-left {
gap: 10px;
}
.specialization-header-left .badge-pill {
padding: 7px 15px;
gap: 10px;
}
.specialization-header-left .badge-text {
font-size: 14px;
}
.specialization-title {
font-size: 26px;
}
.specialization-item {
padding: 22px 10px;
}
.quote-icon-box { height: 80%; align-self: unset; }
.competencies-quote-card { gap: 0px; column-gap: 20px; }
.quote-main-text { padding-left: 30px; }
.competency-card { padding: 20px; }
.specialization-item-header {
gap: 15px;
}
.quote-avatar {
grid-row: 2;
grid-column: 1;
width: 90px;
height: 90px;
min-width: 90px;
max-width: 90px;
min-height: 90px;
max-height: 90px;
border-radius: 50%;
}    
.specialization-name {
font-size: var(--font-size-16);
}
.specialization-item-body {
padding-left: 45px;
}
.specialization-item-text {
font-size: var(--font-size-14);
margin-top: 15px;
}
.competency-card-wide { padding: 0; }
.card-wide-left { padding: 20px; padding-bottom: 0; }
.competency-card-wide { flex-direction: column; }
.card-wide-right { display: flex; position: static; max-width: 100%; width: 100%; justify-content: center; }
.specialization-footer-row {
padding-top: 25px;
}
.specialization-footer-text {
font-size: var(--font-size-14);
}
.section-competencies {
gap: 20px;
}
.competencies-container {
gap: 20px;
}
.quote-main-text {
font-size: var(--font-size-16);
line-height: 1.4;
}
.quote-author-role {
font-size: var(--font-size-14);
font-weight: 600;
letter-spacing: 0.02em;
}
.quote-author-name {
font-size: var(--font-size-18);
letter-spacing: 0.02em;
}
.section-experts {
padding: 40px 15px;
}
.experts-container {
gap: 20px;
}
.experts-header {
gap: 20px;
}
.experts-header-left {
gap: 10px;
}
.experts-title {
font-size: 26px;
}
.experts-desc {
font-size: 16px;
line-height: 1.4;
}
.section-experts .slider-controls {
display: none;
}
.experts-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
height: 27px;
}
.experts-nav-hint {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: #64717b;
line-height: 1;
white-space: nowrap;
margin-bottom: 2px;
}
.experts-divider-line {
flex: 1;
height: 1px;
border-bottom: 1px dashed rgba(100, 113, 123, 0.35);
margin-bottom: 4px;
}
.experts-counter-line {
display: flex;
align-items: baseline;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.02em;
line-height: 1;
}
.experts-counter-line .counter-active {
font-size: 26px;
font-weight: 600;
color: #11161a;
line-height: 1;
}
.experts-counter-line .counter-total {
font-size: 16px;
font-weight: 600;
color: #64717b;
line-height: 1;
}
.experts-cards-grid {
--expert-gap: 20px;
gap: 20px;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.why-container {
gap: 0;
}
.why-left-block {
display: contents;
}
.why-left-block .badge-pill {
order: 1;
width: fit-content;
}
.why-title {
order: 2;
margin-top: 15px;
}
.why-desc {
order: 3;
margin-top: 15px;
}
.why-right-grid {
order: 4;
margin-top: 30px;
}
.why-action-row {
order: 5;
margin-top: 25px;
}
.cases-container {
gap: 30px;
}
.cases-col-left {
gap: 20px;
}
.section-cases .slider-controls {
display: none;
}
.cases-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
height: 27px;
}
.cases-nav-hint {
display: block;
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: #64717b;
line-height: 1;
white-space: nowrap;
margin-bottom: 2px;
}
.cases-divider-line {
display: block;
flex: 1;
height: 1px;
border-bottom: 1px dashed rgba(100, 113, 123, 0.35);
margin-bottom: 4px;
}
.cases-divider-line svg {
display: none;
}
.cases-counter-line {
display: flex;
align-items: baseline;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.02em;
line-height: 1;
margin-left: 0;
}
.cases-counter-line .counter-active {
font-size: 26px;
font-weight: 600;
color: #11161a;
line-height: 1;
}
.cases-counter-line .counter-total {
font-size: 16px;
font-weight: 600;
color: #64717b;
line-height: 1;
}
.cases-slider-track {
gap: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.case-stat-badge {
padding: 10px 14px;
gap: 4px;
}
.case-stat-num {
font-size: 36px;
line-height: 1.1;
}
.case-card-body {
padding: 0;
}
.team-banner-card {
padding: 0;
}
.team-banner-quote-box {
padding: 10px;
gap: 8px;
width: 320px;
}
.how-header-desc { margin-top: 0; }
.how-cards-grid { grid-template-columns: 1fr; gap: 40px; }
.how-card br { display: none; }
.how-card { min-height: 100%; }
.team-banner-quote-text {
font-size: 16px;
}
.team-banner-quote-icon {
font-size: 10px;
}
.how-container {
gap: 30px;
}
.how-header {
gap: 15px;
}
.how-title {
font-size: 26px;
line-height: 1.3;
}
.how-header-desc {
font-size: var(--font-size-16);
line-height: 1.4;
}
.how-card {
padding: 30px 20px 25px 20px;
}
.section-expert-discuss {
height: auto;
padding-block: 30px;
padding-inline: 0;
background: linear-gradient(to bottom, var(--background-11161a) calc(100% - 30px), var(--background-ffffff) calc(100% - 30px));
display: flex;
flex-direction: column;
align-items: center;
}
.expert-discuss-container {
width: 100%;
max-width: 100%;
height: auto;
padding: 40px 15px;
background: radial-gradient(198px 198px at 90% 120px, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%), var(--background-0a1013);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
box-sizing: border-box;
}
.expert-discuss-left {
display: contents;
}
.expert-discuss-title {
order: 1;
margin: 0 0 10px 0;
}
.expert-discuss-desc {
order: 2;
margin: 0 0 48px 0;
color: var(--color-888a8c);
letter-spacing: 0.02em;
}
.expert-discuss-right {
order: 3;
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
margin: 0 0 48px 0;
}
.expert-discuss-avatar-row {
display: flex;
flex-direction: row;
gap: 26px;
align-items: center;
width: 100%;
}
.expert-discuss-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.faq-item { padding: 26px 0; }
.faq-item.is-open .faq-item-body { padding-left: 36px;  }
.form-contact-row-2 { flex-direction: column; }
.form-nda-note svg { height: 30px; width: 30px; }
.expert-discuss-profile {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.expert-discuss-name {
letter-spacing: 0.01em;
color: var(--color-ffffff);
}
.expert-discuss-role {
color: var(--color-888a8c);
line-height: normal;
letter-spacing: 0.02em;
}
.expert-discuss-points {
display: flex;
flex-direction: column;
gap: 15px;
padding-top: 13px;
width: 100%;
}
.expert-discuss-points .point-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
}
.expert-discuss-points .point-item .check-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.expert-discuss-actions {
order: 4;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
gap: 19px 15px;
margin: 0;
}
.expert-discuss-btn {
width: 100%;
height: 55px;
background: transparent;
background-color: transparent;
border: 2px solid var(--background-64717b);
padding: 11px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
box-sizing: border-box;
}
.expert-discuss-actions .icon-square-btn {
width: 55px;
height: 55px;
background: rgba(255, 255, 255, 0.1);
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.expert-discuss-phone-block {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
margin-left: 4px;
height: 55px;
}
.expert-discuss-phone-label {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-888a8c);
line-height: normal;
letter-spacing: 0.03em;
}
.expert-discuss-phone-val {
font-size: 18px;
font-weight: 700;
line-height: 25px;
letter-spacing: 0.03em;
color: var(--color-ffffff);
}
.pressa-container {
gap: 20px;
}
.section-pressa .slider-controls {
display: none;
}
.pressa-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
height: 27px;
}
.pressa-nav-hint {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: #64717b;
line-height: 1;
white-space: nowrap;
margin-bottom: 2px;
}
.pressa-divider-line {
flex: 1;
height: 1px;
border-bottom: 1px dashed rgba(100, 113, 123, 0.35);
margin-bottom: 4px;
}
.pressa-counter-line {
display: flex;
align-items: baseline;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.02em;
line-height: 1;
}
.pressa-counter-line .counter-active {
font-size: 26px;
font-weight: 600;
color: #11161a;
line-height: 1;
}
.pressa-counter-line .counter-total {
font-size: 16px;
font-weight: 600;
color: #64717b;
line-height: 1;
}
.pressa-cards-grid {
gap: 20px;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.faq-container {
gap: 29px;
}
.faq-header {
gap: 15px;
padding-bottom: 0;
}
.faq-title {
font-size: 26px;
line-height: normal;
}
.faq-header-desc {
font-size: 16px;
line-height: normal;
}
.activities-container {
gap: 20px;
}
.activities-left-col {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.section-activities .slider-controls {
display: none;
}
.activities-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
height: 27px;
}
.activities-nav-hint {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: #64717b;
line-height: 1;
white-space: nowrap;
margin-bottom: 2px;
}
.activities-divider-line {
flex: 1;
height: 1px;
border-bottom: 1px dashed rgba(100, 113, 123, 0.35);
margin-bottom: 4px;
}
.activities-counter-line {
display: flex;
align-items: baseline;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.02em;
line-height: 1;
}
.activities-counter-line .counter-active {
font-size: 26px;
font-weight: 600;
color: #11161a;
line-height: 1;
}
.activities-counter-line .counter-total {
font-size: 16px;
font-weight: 600;
color: #64717b;
line-height: 1;
}
.activities-cards-grid {
gap: 20px;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.blog-container {
gap: 20px;
}
.blog-header {
gap: 15px;
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.section-blog .slider-controls {
display: none;
}
.blog-nav-wrapper {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
height: 27px;
}
.blog-nav-hint {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: #64717b;
line-height: 1;
white-space: nowrap;
margin-bottom: 2px;
}
.blog-divider-line {
flex: 1;
height: 1px;
border-bottom: 1px dashed rgba(100, 113, 123, 0.35);
margin-bottom: 4px;
}
.blog-counter-line {
display: flex;
align-items: baseline;
font-family: 'Manrope', sans-serif;
letter-spacing: 0.02em;
line-height: 1;
}
.blog-counter-line .counter-active {
font-size: 26px;
font-weight: 600;
color: #11161a;
line-height: 1;
}
.blog-counter-line .counter-total {
font-size: 16px;
font-weight: 600;
color: #64717b;
line-height: 1;
}
.blog-cards-grid {
gap: 20px;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.footer-container {
gap: 40px;
}
.section-article-hero {
height: 635px;
min-height: 635px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 62px 0 0 0;
justify-content: space-between;
box-sizing: border-box;
}
.article-hero-content {
height: calc(100% - 62px);
padding: 0 15px 35px 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 12px;
}
.article-hero-title {
font-size: 26px;
line-height: 1.25;
font-weight: 600;
width: 100%;
max-width: 100%;
}
.article-hero-subtitle {
font-size: 16px;
line-height: 1.35;
font-weight: 500;
width: 100%;
max-width: 100%;
}
.section-article-body {
padding: 30px 15px 40px;
box-sizing: border-box;
}
.article-body-container {
gap: 30px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-main-col {
width: 100%;
max-width: 100%;
gap: 20px;
box-sizing: border-box;
}
.article-meta-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0;
}
.article-meta-info {
gap: 8px;
}
.article-meta-dot {
display: none;
}
.article-heading-2 {
font-size: 22px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.01em;
margin: 0;
}
.article-paragraph {
font-size: 15px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.01em;
margin: 0;
}
.article-bullet-list {
padding-left: 20px;
gap: 8px;
margin: 0;
}
.article-bullet-list li {
font-size: 15px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.01em;
}
.article-image-box {
padding: 0;
gap: 8px;
margin: 10px 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-image-content {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 850 / 468;
object-fit: cover;
display: block;
}
.article-image-caption {
padding: 0;
font-size: 12px;
font-weight: 500;
color: #64717b;
margin-top: 4px;
}
.article-subsection {
gap: 15px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.article-heading-3 {
font-size: 18px;
font-weight: 600;
line-height: 1.35;
margin: 0;
}
.article-sub-points {
gap: 12px;
margin: 0;
width: 100%;
}
.article-sub-point {
font-size: 15px;
font-weight: 500;
line-height: 1.4;
margin: 0;
padding-left: 1.2em;
text-indent: -0.9em;
}
.article-highlight-box {
padding: 16px;
gap: 10px;
margin: 0;
width: 100%;
box-sizing: border-box;
border-left: 2px solid #64717B;
}
.article-highlight-text {
font-size: 15px;
font-weight: 500;
line-height: 1.4;
margin: 0;
}
.article-conclusion-block {
gap: 15px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.article-callout-box {
padding: 16px;
margin: 0;
width: 100%;
box-sizing: border-box;
border-left: 2px solid #64717B;
}
.article-callout-text {
font-size: 15px;
font-weight: 500;
line-height: 1.45;
margin: 0;
}
.article-callout-text br {
display: none;
}
.article-sidebar-col {
margin: 10px 0 0 0;
width: 100%;
max-width: 100%;
gap: 30px;
position: static;
box-sizing: border-box;
}
.article-author-card {
padding: 20px;
gap: 20px;
width: 100%;
max-width: 100%;
height: auto;
box-sizing: border-box;
}
.author-profile-row {
gap: 16px;
align-items: center;
}
.author-profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.author-profile-text {
gap: 8px;
}
.author-profile-label {
font-size: 14px;
}
.author-profile-name {
font-size: 18px;
font-weight: 600;
}
.author-stats-list {
gap: 12px;
padding: 0;
}
.author-stat-item {
font-size: 14px;
gap: 10px;
}
.author-share-row {
gap: 10px;
padding-top: 16px;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
box-sizing: border-box;
}
.author-share-label {
font-size: 14px;
font-weight: 500;
color: #babbbd;
white-space: nowrap;
}
.author-share-icons {
gap: 12px;
display: flex;
align-items: center;
}
.article-related-card {
padding: 0;
gap: 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-related-title {
font-size: 20px;
font-weight: 700;
margin: 0;
}
.article-related-list {
gap: 15px;
width: 100%;
}
.related-item-row {
gap: 15px;
align-items: stretch;
width: 100%;
text-decoration: none;
}
.related-item-thumb-box {
width: 120px;
height: auto;
align-self: stretch;
display: flex;
flex-shrink: 0;
overflow: hidden;
}
.related-item-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.related-item-info {
gap: 8px;
flex: 1;
min-width: 0;
}
.related-item-title {
font-size: 14px;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.related-item-date {
font-size: 12px;
font-weight: 600;
}
.expert-card {
width: 100%;
min-width: 100%;
max-width: 100%;
flex: 0 0 100%;
height: auto;
scroll-snap-align: start;
}
.expert-card-photo-wrapper {
max-width: 100%;
height: 350px;
max-height: 350px;
}
.cases-card {
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto;
scroll-snap-align: start;
}
.case-card-img-wrapper {
max-width: 100%;
height: auto;
min-height: 240px;
padding: 15px;
}
.case-card-img {
max-width: 100%;
}    
.pressa-cards-grid {
scroll-snap-type: x mandatory;
}
.pressa-card {
width: 100%;
min-width: 100%;
scroll-snap-align: start;
}
.pressa-logo-box {
max-width: 100%;
height: 180px;
}    
.activity-card {
width: 100%;
min-width: 100%;
height: auto;
scroll-snap-align: start;
}
.activity-video-wrapper,
.activity-thumb {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 413.33 / 247;
}    
.blog-header {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.blog-cards-grid {
scroll-snap-type: x mandatory;
}
.blog-card {
width: 100%;
min-width: 100%;
height: auto;
scroll-snap-align: start;
}
.blog-img-wrapper,
.blog-thumb {
width: 100%;
max-width: 100%;
height: 200px;
}
.blog-card-body {
max-width: 100%;
height: auto;
}
.case-stat-badge { 
position: absolute;
right: 0;
bottom: 20px;
}
.case-card-link { margin-top: unset; }
.case-card-body { gap: 0; }
}
@media (max-width: 500px) {
.team-banner-quote-icon { height: 20px; width: 20px; }
.team-banner-quote-box { width: 250px; height: 70px; }
.team-banner-crest-badge { width: 90px; height: 90px; }
.team-banner-quote-text { font-size: 12px; }
.form-row-2 { flex-direction: column; }
.file-dropzone { padding-inline: 20px; }
.section-team-image { padding-inline: 0; }
.team-banner-bg-img, .team-banner-card, .team-image-container {
height: 250px;
}
.section-team-image { padding-bottom: 0; }
.section-how { padding-block: 40px; }
}
@media (max-width: 400px) {
.team-banner-quote-text { font-size: 10px; }
.team-banner-quote-box { width: 220px; height: 70px; }
.section-prolex-watermark { height: 100px; }
.section-form { padding-inline: 0; }
.form-container { padding-inline: 15px; }
.form-expert-avatar { width: 80px; height: 80px; }
}
@media (max-width: 375px) {
.quote-main-text {
padding-left: 40px; 
}
.why-action-row { flex-wrap: wrap; justify-content: center; }
.form-right-col { height: 100%; }
.form-nda-note { margin-top: 20px; }
.author-share-row {
flex-wrap: wrap;
gap: 8px;
}
.related-item-thumb-box {
width: 105px;
height: auto;
align-self: stretch;
}
}
.article-content {
display: flex;
flex-direction: column;
gap: 18px;
}
.article-content h2 {
font-size: var(--font-size-30);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-content h3 {
font-size: var(--font-size-22);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-11161a);
}
.article-content p,
.article-content li {
font-size: var(--font-size-18);
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.02em;
color: var(--color-11161a);
}
.article-content ul,
.article-content ol {
list-style: disc;
padding-left: 25px;
display: flex;
flex-direction: column;
gap: 8px;
}
.article-content figure {
display: flex;
flex-direction: column;
gap: 8px;
width: 850px;
max-width: 100%;
margin: 20px 0;
box-sizing: border-box;
}
.article-content figure img {
width: 850px;
max-width: 100%;
height: 468px;
object-fit: cover;
display: block;
}
.article-content figcaption {
font-size: var(--font-size-12);
font-weight: 500;
color: var(--color-64686a);
padding: 0 20px;
}
.article-content blockquote {
background-color: var(--background-f3f5f9);
padding: 20px 15px;
border-left: 2px solid #64717B;
display: flex;
flex-direction: column;
gap: 10px;
}
.article-content blockquote p {
margin: 0;
}
@media (max-width: 1100px) {
.article-content h2 {
font-size: 22px;
margin: 0;
}
.article-content p,
.article-content li {
font-size: 15px;
margin: 0;
}
.article-content figure {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-content figure img {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 850 / 468;
object-fit: cover;
}
.article-content blockquote {
width: 100%;
box-sizing: border-box;
}
}
.prolex-archive-section {
padding: 60px 0 100px;
}
.prolex-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
width: 100%;
box-sizing: border-box;
}
.prolex-archive-grid .blog-card {
width: 100%;
}
.prolex-archive-empty {
font-size: var(--font-size-18);
font-weight: 500;
color: var(--color-64686a);
}
.prolex-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
}
.prolex-pagination a,
.prolex-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 8px;
background: var(--background-f3f5f9);
color: var(--color-11161a);
font-size: var(--font-size-14, 14px);
font-weight: 600;
text-decoration: none;
}
.prolex-pagination .current {
background: var(--color-11161a);
color: #fff;
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-bottom-inner {
flex-direction: column;
gap: 12px;
text-align: center;
}
.footer-policy-links {
flex-wrap: wrap;
justify-content: center;
}
.form-row-2 {
grid-template-columns: 1fr;
}
.form-contact-row-2 {
grid-template-columns: 1fr;
}
.footer-write-btn {
width: 100%;
}
}
.reveal-init {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-init.is-revealed {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-init {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}