:root {
--intro-color: #22242c;
}
.intro {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
color: var(--intro-color) !important;
background-color: #f5fbf8;
}
@media (min-width: 1200px) {
.intro .container {
max-width: 1200px;
}
}
.intro h1:before {
display: none;
}
.intro h1 span + span {
padding-left: 10px;
}
.intro-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.intro-image img {
width: 100%;
height: auto;
object-fit: fill;
margin-left: auto;
display: flex;
}
@media (min-width: 768px) {
.intro-image img {
width: auto;
}
}
@media (min-width: 1024px) {
.intro-image img {
height: 100%;
}
}
.intro .mob-img {
width: 208px;
}
.intro h1 .text {
font-weight: 600;
font-size: 28px;
}
.intro-content {
position: relative;
z-index: 2;
}
.intro h1 .text-dark {
font-weight: 600;
font-size: 26px;
line-height: 120%;
color: #22242c;
padding-top: 16px;
}
@media (min-width: 768px) {
.intro h1 .text-dark {
font-size: 24px;
}
}
@media (min-width: 1024px) {
.intro h1 .text-dark {
font-size: 28px;
}
}
@media (min-width: 480px) {
.intro-content .btn {
max-width: 310px;
min-width: 310px;
}
}
@media (max-width: 480px) {
.intro-content .btn {
max-width: 100%;
min-width: 100%;
}
}
.intro-content .btn:before,
.intro-content .btn:after {
width: 320px;
}
.intro-description,
.intro h1 {
margin-top: 24px;
}
.intro-content .btn {
margin-top: 24px;
}
.intro-head {
font-weight: 400;
font-size: 18px;
line-height: 40%;
color: #22242c;
margin-top: 16px;
margin-bottom: 32px;
}
.intro-head .content-text span {
font-weight: 700;
color: #3bb57c;
}
.intro-head .content-text {
max-width: 435px;
}
.intro-head .content-text small {
color: #66729c;
font-size: 15px;
}
.content-text p:has(small) {
margin-bottom: 8px;
}
.content-text p:has(small) + p {
margin-top: 0 !important;
}
@media (min-width: 768px) {
.intro-description,
.intro h1 {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.intro-content .btn {
margin-left: auto;
margin-right: auto;
}
}
.content-text + .content-text {
margin-top: 4px;
}
.intro .decorated-letter {
color: inherit;
}
.intro .extended-list {
list-style: none;
padding: 0;
}
.intro .extended-list li {
text-align: center;
}
.intro .extended-list li::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: var(--icon-url);
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 1199px) {
.intro .btn-secondary {
margin-top: 8px;
}
} .breadcrumbs-intro {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.breadcrumbs-intro a,
.breadcrumbs-intro span {
font-size: 12px;
line-height: 1.5;
text-decoration: none;
}
.breadcrumbs-intro a {
color: #8691b1;
transition: color 0.2s ease;
}
.breadcrumbs-intro a:hover {
color: #8691b1;
}
.breadcrumbs-intro span:last-child {
color: #bebfd9;
}
.breadcrumbs__separator-intro {
display: inline-block;
margin-right: 8px;
margin-left: 8px;
width: 8px;
height: 8px;
background-color: #cacbe0;
border-radius: 50%;
}
.breadcrumbs-intro .active {
color: #bebfd9;
}:root {
--list-bg-color: #fff;
}
.list-icon {
background-color: var(--list-bg-color);
}
.list-icon-text {
font-weight: 500;
font-size: 18px;
line-height: 150%;
}
.list-icon-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.list-icon-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 24px;
flex: 0 1 100%;
}
@media (min-width: 768px) {
.list-icon-block {
gap: 24px;
}
.list-icon-item {
min-height: 264px;
flex: 0 1 calc(50% - 24px);
}
}
@media (min-width: 992px) {
.list-icon-block {
gap: 32px;
}
.list-icon-item {
flex: 0 1 calc(33.333% - 32px);
}
} .multi-icon-block.bg-green .decorated-letter::before {
background-color: #2f9163;
}
.multi-icon-block .list-icon-title,
.multi-icon-block .list-icon-text {
color: #fff;
}
.multi-icon-block .list-icon-text {
font-weight: 400;
font-size: 18px;
line-height: 150%;
}
.multi-icon-block img {
width: 100px;
height: 100px;
object-fit: cover;
min-width: 100px;
}
.multi-icon-block .list-icon-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.multi-icon-block .list-icon-item {
gap: 0;
}
@media (min-width: 420px) {
.multi-icon-block .list-icon-item {
flex: 0 1 calc(50% - 16px);
}
}
@media (min-width: 768px) {
.multi-icon-block .list-icon-item {
min-height: auto;
flex: 0 1 calc(33.333% - 24px);
}
.multi-icon-block .list-icon-text {
font-weight: 500;
font-size: 18px;
line-height: 150%;
}
}
@media (min-width: 1280px) {
.multi-icon-block .list-icon-block {
gap: 8px;
}
.multi-icon-block .list-icon-item {
flex: 0 1 calc(16.666% - 8px);
}
.multi-icon-block.multi-icon-block-four .list-icon-item {
flex: 0 1 calc(25% - 8px);
}
}
.list-icon-block.has-cols-2 .list-icon-item,
.list-icon-block.has-cols-3 .list-icon-item,
.list-icon-block.has-cols-4 .list-icon-item,
.list-icon-block.has-cols-6 .list-icon-item {
flex: 0 1 100%;
}
.list-icon-block.has-cols-5 .list-icon-item {
flex: 0 1 calc(50% - 16px);
}
@media (min-width: 520px) {
.list-icon-block.has-cols-6 .list-icon-item {
flex: 0 1 calc(50% - 24px);
}
}
@media (min-width: 768px) {
.list-icon-block.has-cols-2 .list-icon-item,
.list-icon-block.has-cols-3 .list-icon-item {
flex: 0 1 calc(50% - 24px);
}
.list-icon-block.has-cols-4 .list-icon-item {
flex: 0 1 calc(50% - 24px);
}
.list-icon-block.has-cols-5 .list-icon-item,
.list-icon-block.has-cols-6 .list-icon-item {
flex: 0 1 calc(33.333% - 24px);
}
}
@media (min-width: 1280px) {
.list-icon-block.has-cols-2 .list-icon-item {
flex: 0 1 calc(50% - 32px);
}
.list-icon-block.has-cols-3 .list-icon-item {
flex: 0 1 calc(33.333% - 32px);
}
.list-icon-block.has-cols-4 .list-icon-item {
flex: 0 1 calc(25% - 32px);
}
.list-icon-block.has-cols-5 .list-icon-item {
flex: 0 1 calc(20% - 32px);
}
.list-icon-block.has-cols-6 .list-icon-item {
flex: 0 1 calc(16.666% - 32px);
}
}
.list-icon-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
object-fit: contain;
}
.list-icon-text {
max-width: 260px;
}
.list-icon-title {
font-weight: 600;
}
.list-icon-number {
font-size: 20px;
color: #fff;
margin-bottom: 10px;
font-weight: 400;
}