.helping-clients {
margin-bottom: var(--section-gap, 120px);
& * {
font-family: 'Mulish', sans-serif !important;
}
}
.helping-clients__wrapper {
display: flex;
column-gap: 50px; @media screen and (max-width: 991px) {
row-gap: 30px;
flex-direction: column;
}
& .helping-clients__content {
width: 51.69%;
min-width: 51.69%;
@media screen and (max-width: 991px) {
width: 100%;
}
}
& .helping-clients__addit {
width: 100%;
margin-top: auto;
& .helping-clients__separator {
margin: 52px 12px 20px;
width: calc(100% - 24px);
height: 1px;
background: linear-gradient(90deg, #1F4FCE 0%, rgba(31, 79, 206, 0) 50%, #1F4FCE 100%);
@media screen and (max-width: 1024px) {
margin: 30px 12px 20px;
}
@media screen and (max-width: 485px) {
margin: 30px 0 20px;
width: 100%;
}
}
}
}
.helping-clients__header {
display: flex;
row-gap: 32px;
flex-direction: column;
margin-bottom: 52px;
@media screen and (max-width: 1024px) {
row-gap: 16px;
margin-bottom: 30px;
}
& .helping-clients__title {
font-weight: 700;
font-size: 42px;
line-height: 52px;
color: #1F4FCE;
@media screen and (max-width: 1024px) {
font-size: 28px;
line-height: 35px;
}
@media screen and (max-width: 640px) {
font-size: 22px;
line-height: 29px;
}
}
& .helping-clients__subtitle {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #1B1B1B;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 24px;
}
}
}
.helping-clients__items {
display: flex;
row-gap: 20px;
flex-direction: column;
list-style: none;
& li {
list-style: none;
position: relative;
padding-left: 28px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #1B1B1B;
&::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #1F4FCE;
}
}
}
.helping-clients__partners {
--helping-clients-partners-width: 140px;
display: grid;
row-gap: 20px;
column-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(var(--helping-clients-partners-width), 1fr));
padding: 0 12px;
@media screen and (max-width: 1200px) {
--helping-clients-partners-width: 120px;
}
@media screen and (max-width: 1024px) {
--helping-clients-partners-width: 80px;
}
@media screen and (max-width: 991px) and (min-width: 486px) {
--helping-clients-partners-width: 120px;
}
@media screen and (max-width: 485px) {
padding: 0;
}
& .helping-clients__image {
height: 100px;
overflow: hidden;
display: block;
border-radius: 10px;
background-color: white;
@media screen and (max-width: 1200px) {
height: 80px;
}
@media screen and (max-width: 1024px) {
height: 60px;
}
@media screen and (max-width: 991px) and (min-width: 486px) {
height: 80px;
}
& img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
}
}
}
.helping-clients__text {
font-size: 20px;
font-weight: 500;
line-height: 28px;
text-align: center;
color: #1F4FCE;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 24px;
}
}
.helping-clients__button {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 32px;
width: max-content;
height: 40px;
padding: 0 30px;
border-radius: 40px;
position: relative;
text-decoration: none;
background: transparent;
transform: translateY(0);
transition: transform .25s;
font-size: 16px;
font-weight: 400;
color: white;
background: linear-gradient(180deg, #4085D9 0%, #0C3E9A 100%);
&:hover {
color: white;
transform: translateY(-2px);
background-color: rgba(31, 79, 206, 0.08);;
}
}