.blog-v2 {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px 80px;
padding-top: 32px;
background: #ffffff;
}
.blog-v2 * {
box-sizing: border-box;
} .blog-v2__breadcrumbs {
font-family: Montserrat, sans-serif;
font-size: 12px;
line-height: 15px;
margin-bottom: 16px;
}
.blog-v2__breadcrumb {
color: #113555;
text-decoration: none;
}
.blog-v2__breadcrumb:hover {
text-decoration: underline;
}
.blog-v2__breadcrumb--active {
color: #2f2f2f;
}
.blog-v2__breadcrumb-separator {
color: #bdbdbd;
margin: 0 5px;
} .blog-v2__title {
font-family: Montserrat, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 41px;
color: #2f2f2f;
margin: 0 0 24px;
} .blog-v2__container {
display: flex;
gap: 24px;
} .blog-v2__articles {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;
} .blog-v2__article {
display: flex;
gap: 24px;
}
.blog-v2__article--main {
flex-direction: column;
gap: 16px;
}
.blog-v2__article--base {
align-items: center;
} .blog-v2__article-hero {
display: block;
border-radius: 7px;
background: #eeeeee;
overflow: hidden;
}
.blog-v2__article--main .blog-v2__article-hero {
width: 100%;
height: 220px;
}
.blog-v2__article-hero--base {
width: 280px;
height: 230px;
flex-shrink: 0;
}
.blog-v2__article-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
.blog-v2__article-hero:hover .blog-v2__article-img {
transform: scale(1.05);
}
.blog-v2__article-img--base {
width: 280px;
height: 230px;
} .blog-v2__article-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.blog-v2__article-content--base {
flex: 1;
} .blog-v2__article-tags {
display: flex;
gap: 12px;
align-items: center;
}
.blog-v2__tag {
display: inline-flex;
align-items: center;
gap: 5px;
}
.blog-v2__tag--date {
opacity: 0.5;
}
.blog-v2__tag-icon {
width: 18px;
height: 18px;
}
.blog-v2__tag-text {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #2f2f2f;
}
.blog-v2__tag-text--fire {
color: #ffbd45;
}
.blog-v2__tag--fire {
opacity: 1;
} .blog-v2__article-title {
display: flex;
flex-direction: column;
gap: 12px;
}
.blog-v2__article-heading {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
color: #113555;
margin: 0;
line-height: 1.3;
}
.blog-v2__article-heading a {
color: inherit;
text-decoration: none;
}
.blog-v2__article-heading a:hover {
color: #ffbd45;
}
.blog-v2__article-heading--main {
font-size: 32px;
line-height: 38px;
}
.blog-v2__article-excerpt {
font-family: Montserrat, sans-serif;
font-size: 18px;
line-height: 27px;
color: #2f2f2f;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-v2__article-excerpt--main {
font-size: 20px;
line-height: 30px;
-webkit-line-clamp: 3;
} .blog-v2__divider {
height: 1px;
border: none; background-image: radial-gradient(circle, #d3d7e0 1px, transparent 1px);
background-size: 6px 1px;
background-repeat: repeat-x;
} .blog-v2__paginator {
display: flex;
align-items: center;
gap: 16px;
}
.blog-v2__paginator-arrow {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.blog-v2__paginator-arrow img {
width: 44px;
height: 44px;
}
.blog-v2__paginator-arrow--next img {
transform: rotate(-180deg);
}
.blog-v2__paginator-numbers {
display: flex;
align-items: center;
gap: 8px;
}
.blog-v2__paginator-number {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #ffffff;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: #2f2f2f;
text-decoration: none;
transition: background 0.3s;
}
.blog-v2__paginator-number:hover {
background: #f6f7f9;
}
.blog-v2__paginator-number--active {
background: #0e3456;
color: #ffffff;
}
.blog-v2__paginator-number--dots {
cursor: default;
}
.blog-v2__paginator-number--dots:hover {
background: #ffffff;
} .blog-v2__sidebar {
width: 367px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 24px;
} .blog-v2__video-widget {
display: flex;
flex-direction: column;
gap: 16px;
}
.blog-v2__video-title {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 29px;
color: #113555;
margin: 0;
}
.blog-v2__video-part {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 7px;
background: #f6f7f9;
padding: 8px;
}
.blog-v2__video-tabs {
display: flex;
align-items: center;
gap: 4px;
border-radius: 7px;
background: #ffffff;
padding: 4px;
width: 100%;
}
.blog-v2__video-tab {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
flex-shrink: 0;
cursor: pointer;
transition: opacity 0.3s;
box-sizing: border-box;
}
.blog-v2__video-tab--nav:hover {
opacity: 0.7;
}
.blog-v2__video-tab--active {
flex: 1;
background: #f6f7f9;
padding: 10px 19px;
gap: 8px;
cursor: pointer;
text-decoration: none;
transition: opacity 0.3s;
}
.blog-v2__video-tab--active:hover {
opacity: 0.8;
}
.blog-v2__video-tab-icon {
width: 36px;
height: 36px;
}
.blog-v2__video-tab-logo {
width: 24px;
height: 16px;
}
.blog-v2__video-tab-text {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: #2f2f2f;
} .blog-v2__video-slider {
width: 100%;
margin-top: 8px;
}
.blog-v2__video-slide {
display: none;
}
.blog-v2__video-slide--active {
display: block;
}
.blog-v2__video-player {
position: relative;
width: 100%;
height: 196px;
border-radius: 7px;
overflow: hidden;
cursor: pointer;
}
.blog-v2__video-preview {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
}
.blog-v2__video-preview::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
}
.blog-v2__video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 99px;
background: #ffbd45;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0px 0px 25px 0px rgba(217, 148, 23, 0.37);
z-index: 2;
transition: transform 0.3s;
}
.blog-v2__video-player:hover .blog-v2__video-play {
transform: translate(-50%, -50%) scale(1.1);
}
.blog-v2__video-play-icon {
width: 24px;
height: 24px;
}
.blog-v2__video-caption {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 18px;
color: #0e3456;
margin: 8px 0 0;
padding: 0 8px;
}
.blog-v2__video-pagination {
display: flex;
align-items: center;
gap: 4px;
margin-top: 12px;
}
.blog-v2__video-dot {
width: 8px;
height: 8px;
border-radius: 99px;
background: #0e3456;
opacity: 0.2;
cursor: pointer;
transition: opacity 0.3s;
}
.blog-v2__video-dot:hover {
opacity: 0.5;
}
.blog-v2__video-dot--active {
opacity: 1;
} .blog-v2__form-widget-wrapper {
position: sticky;
top: 137px;
} .blog-v2__form-widget {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 7px;
background: linear-gradient(
90deg,
rgba(28, 87, 142, 0) 2.11%,
#1c568d 91.56%
);
background-color: #0e3456;
padding: 24px;
overflow: hidden;
}
.blog-v2__form-header {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin-bottom: 16px;
}
.blog-v2__form-title {
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 29px;
letter-spacing: 0.24px;
color: #ffffff;
margin: 0;
}
.blog-v2__form-subtitle {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: #ffffff;
margin: 0;
}
.blog-v2__form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 16px;
}
.blog-v2__form-field {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.blog-v2__input-wrapper {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 9px 0;
width: 100%;
}
.blog-v2__input-border {
display: block;
width: 100%;
height: 6px;
}
.blog-v2__input-border--sidebar {
width: 100%;
}
.blog-v2__input-border--cta {
width: 100%;
}
.blog-v2__input-icon {
width: 24px;
height: 41px;
flex-shrink: 0;
}
.blog-v2__input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: #ffffff;
padding: 14px 0 11px;
}
.blog-v2__input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.blog-v2__field-label {
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: #ffffff;
opacity: 0.5;
margin-top: 10px;
text-align: center;
}
.blog-v2__form-submit {
width: 100%;
border-radius: 4px;
background: #ffbd45;
border: none;
padding: 18px 19px 15px;
font-family: "Exo 2", sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 16px;
letter-spacing: 0.68px;
color: #113555;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s;
}
.blog-v2__form-submit:hover {
background: #ffc857;
} .blog-v2__checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.blog-v2__checkbox-box {
width: 14px;
height: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blog-v2__checkbox-icon {
width: 14px;
height: 14px;
}
.blog-v2__checkbox-text {
flex: 1;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: #ffffff;
}
.blog-v2__checkbox-link {
color: #ffbd45;
text-decoration: none;
}
.blog-v2__checkbox-link:hover {
text-decoration: underline;
}
.blog-v2__form-security {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
width: calc(100% + 48px);
margin: 8px -24px -24px;
padding: 8px;
}
.blog-v2__security-icon {
width: 16px;
height: 16px;
}
.blog-v2__security-text {
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: #ffffff;
}
.blog-v2__form-bg {
position: absolute;
top: -70px;
left: 75px;
opacity: 0.1;
width: 547px;
height: 271px;
pointer-events: none;
} .blog-v2__cta-form {
position: relative;
display: flex;
border-radius: 7px;
background: linear-gradient(
90deg,
rgba(28, 87, 142, 0) 2.11%,
#1c568d 91.56%
);
background-color: #0e3456;
padding: 32px;
margin-top: 0; min-height: 300px;
overflow: hidden;
}
.blog-v2__cta-content {
flex: 1; }
.blog-v2__cta-title {
font-family: Montserrat, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 39px;
color: #ffffff;
margin: 0 0 16px;
}
.blog-v2__cta-subtitle {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 24px;
color: #ffffff;
margin: 0 0 24px;
}
.blog-v2__cta-form-inner {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 370px;
}
.blog-v2__specialist {
position: absolute;
right: 0;
bottom: 0;
width: 386px;
height: 100%;
border-radius: 7px;
background-size: contain;
background-position: bottom center;
background-repeat: no-repeat;
}
.blog-v2__specialist-tag {
position: absolute;
border-radius: 7px;
padding: 8px 12px;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0.14px;
box-shadow: 0px 8px 25px 0px rgba(47, 75, 101, 0.25);
}
.blog-v2__specialist-tag--name {
bottom: 62px;
left: 63px;
background: #ffffff;
color: #113555;
font-weight: 700;
z-index: 2;
}
.blog-v2__specialist-tag--position {
bottom: 32px;
left: 89px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
backdrop-filter: blur(5px);
} .blog-v2__video-widget--mobile {
display: none;
}
.blog-v2__divider--mobile {
display: none;
}
.blog-v2__video-yt-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 3px;
background: #f6f7f9;
padding: 10px 19px;
text-decoration: none;
width: 100%;
margin-top: 12px;
transition: opacity 0.3s;
}
.blog-v2__video-yt-link:hover {
opacity: 0.8;
} @media (max-width: 768px) { .blog-v2 {
padding: 82px 16px 40px;
padding-top: 32px;
} .blog-v2__title {
font-size: 26px;
line-height: 1.2;
margin-bottom: 16px;
} .blog-v2__container {
flex-direction: column;
} .blog-v2__sidebar {
display: none;
} .blog-v2__articles {
gap: 24px;
} .blog-v2__video-widget--mobile {
display: flex;
flex-direction: column;
gap: 12px;
}
.blog-v2__divider--mobile {
display: block;
}
.blog-v2__video-widget--mobile .blog-v2__video-title {
font-size: 20px;
line-height: 24px;
}
.blog-v2__video-widget--mobile .blog-v2__video-player {
height: 186px;
}
.blog-v2__video-widget--mobile .blog-v2__video-part {
background: transparent;
padding: 0;
border-radius: 0;
} .blog-v2__video-widget--mobile {
overflow: hidden;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
.blog-v2__video-widget--mobile .blog-v2__video-slider {
display: flex;
transition: transform 0.4s ease;
}
.blog-v2__video-widget--mobile .blog-v2__video-slide {
display: block !important;
flex: 0 0 85%;
width: 85%;
margin: 0 1.5%;
opacity: 0.5;
transition: opacity 0.4s ease;
pointer-events: none;
}
.blog-v2__video-widget--mobile .blog-v2__video-slide--active {
opacity: 1;
pointer-events: auto;
} .blog-v2__article--main .blog-v2__article-hero {
height: 220px;
}
.blog-v2__article-heading--main {
font-size: 20px;
line-height: 24px;
}
.blog-v2__article-excerpt--main {
font-size: 16px;
line-height: 24px;
-webkit-line-clamp: 3;
} .blog-v2__article--base {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.blog-v2__article-hero--base {
width: 100%;
height: 220px;
}
.blog-v2__article-img--base {
width: 100%;
height: 220px;
}
.blog-v2__article-content--base {
display: flex;
flex-direction: column-reverse;
gap: 8px;
}
.blog-v2__article-heading {
font-size: 20px;
line-height: 24px;
}
.blog-v2__article-excerpt {
font-size: 16px;
line-height: 24px;
}
.blog-v2__tag-text {
font-size: 12px;
line-height: 17px;
} .blog-v2__paginator { } .blog-v2__cta-form {
flex-direction: column;
align-items: center;
padding: 24px;
padding-bottom: 0;
margin-top: 34px;
min-height: auto;
}
.blog-v2__cta-content {
text-align: center;
}
.blog-v2__cta-title {
font-size: 24px;
line-height: 29px;
letter-spacing: 0.24px;
margin-bottom: 8px;
}
.blog-v2__cta-subtitle {
font-size: 18px;
line-height: 24px;
margin-bottom: 24px;
}
.blog-v2__cta-form-inner {
max-width: 100%;
align-items: center;
} .blog-v2__specialist {
position: relative;
width: 322px;
height: 320px;
min-height: auto;
margin-top: 0;
right: unset;
bottom: auto;
background-position: bottom right;
background-size: cover;
background-repeat: no-repeat;
}
.blog-v2__specialist-tag--name {
bottom: 78px;
left: 50%;
width: 200px;
transform: translateX(-50%);
}
.blog-v2__specialist-tag--position {
bottom: 46px;
left: 50%;
width: 240px;
transform: translateX(-50%);
} .blog-v2__form-security {
width: calc(100% + 48px);
margin: 8px -24px -24px;
}
}