.about-content {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
} .about-content section {
margin-bottom: 0;
}
.about-section-title {
color: var(--black);
font-size: 28px;
font-weight: 500;
margin: 0;
text-align: center;
margin-bottom: 20px;
} .about-intro {
background-color: var(--white);
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
display: flex;
gap: 30px;
align-items: center;
}
.about-intro-logo {
flex-shrink: 0;
width: 35%;
display: flex;
align-items: center;
justify-content: center;
}
.about-intro-logo img {
max-height: 80px;
width: auto;
height: 100%;
object-fit: contain;
}
.about-intro-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.about-intro-title {
color: var(--black);
font-size: 24px;
font-weight: 500;
margin: 0;
}
.about-intro-text {
text-align: left;
}
.about-intro-text p {
color: var(--black);
font-size: 16px;
line-height: 1.4;
margin: 0;
} .about-assortment {
background-color: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
}
.about-assortment .catalog-wrapper-main {
margin-top: 20px;
} .about-partners {
background-color: var(--white);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
.about-partners-text-up,
.about-partners-text-down {
font-size: 16px;
line-height: 1.5;
color: var(--gray-dark);
}
.about-partners-text-up p,
.about-partners-text-down p {
margin: 0;
line-height: 1.5;
color: var(--gray-dark);
font-size: 16px;
} .manufacturers-logos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
gap: 30px;
margin: 30px 0;
justify-content: center;
align-items: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.manufacturer-logo-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
height: 120px;
padding: 15px;
background-color: var(--white);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
}
.manufacturer-logo-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.manufacturer-logo-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
} @media (max-width: 760px) {
.manufacturers-logos-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 70%;
}
.manufacturer-logo-item {
max-width: 100%;
height: 120px;
padding: 10px;
}
}
@media (max-width: 560px) {
.manufacturers-logos-grid {
max-width: 90%;
}
}
@media (max-width: 460px) {
.manufacturers-logos-grid {
gap: 15px;
max-width: 100%;
}
.manufacturer-logo-item {
height: 90px;
padding: 8px;
}
} .about-advantages {
background-color: var(--white);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.about-advantages .advantages-flex {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 10px;
width: 100%;
box-sizing: border-box;
justify-content: center;
}
.about-advantages .advantage-block {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;
width: auto;
max-width: 250px;
min-width: 200px;
box-sizing: border-box;
}
.about-advantages .advantage-icon {
width: 90px;
height: 90px;
background-color: rgba(53, 57, 142, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: inset 0 2px 8px rgba(53, 57, 142, 0.3);
transition: transform 0.3s ease;
flex-shrink: 1;
max-width: 100%;
box-sizing: border-box;
}
.about-advantages .advantage-icon i {
font-size: 48px;
color: var(--primary-blue);
max-width: 100%;
}
.about-advantages .advantage-text {
width: 100%;
box-sizing: border-box;
}
.about-advantages .advantage-text p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
margin: 0 0 4px 0;
text-align: center;
word-wrap: break-word;
overflow-wrap: break-word;
} .about-future-wrapper {
display: flex;
gap: 30px;
align-items: center;
}
.about-future-image {
flex-shrink: 0;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.about-future-img {
width: 100%;
height: auto;
max-height: 300px;
object-fit: cover;
object-position: center;
border-radius: 8px;
}
.about-future-content {
flex: 1;
text-align: left;
}
.about-future-content .about-section-title {
text-align: left;
margin-bottom: 20px;
}
.about-future-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
}
.about-future-list li {
color: var(--black);
font-size: 16px;
line-height: 1.6;
position: relative;
padding-left: 30px;
}
.about-future-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-blue);
border: 2px solid var(--white);
box-shadow: 0 0 0 2px var(--primary-blue);
} .about-cta {
padding: 0px;
}
.about-cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.about-cta-button {
display: flex;
align-items: center;
gap: 10px;
background-color: var(--primary-red);
color: var(--white);
text-decoration: none;
padding: 15px 30px;
border-radius: 6px;
font-weight: 400;
font-size: 16px;
transition: all 0.3s ease;
border: 2px solid var(--primary-red);
cursor: pointer;
}
.about-cta-button:hover {
background-color: var(--primary-red-light);
border-color: var(--primary-red-light);
}
.about-cta-button i {
font-size: 20px;
} @media (min-width: 1000px) {
.about-advantages .advantages-flex {
grid-template-columns: repeat(4, auto);
}
.about-advantages .advantage-block {
max-width: 230px;
min-width: 200px;
}
}
@media (min-width: 700px) and (max-width: 999px) {
.about-advantages .advantages-flex {
grid-template-columns: repeat(3, auto);
}
.about-advantages .advantage-block {
max-width: 220px;
min-width: 180px;
}
}
@media (min-width: 500px) and (max-width: 699px) {
.about-advantages .advantages-flex {
grid-template-columns: repeat(2, auto);
}
.about-advantages .advantage-block {
max-width: 100%;
min-width: 150px;
}
}
@media (max-width: 499px) {
.about-advantages .advantages-flex {
grid-template-columns: repeat(2, auto);
}
.about-advantages .advantage-block {
max-width: 100%;
min-width: 0;
}
}
@media (max-width: 1000px) {
.about-section-title {
font-size: 24px;
}
}
@media (max-width: 840px) {
.about-intro {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.about-intro-logo {
width: 100%;
justify-content: center;
}
.about-intro-logo img {
max-height: 60px;
}
.about-intro-content {
align-items: center;
text-align: center;
}
.about-intro-title {
font-size: 22px;
text-align: center;
}
.about-intro-text p {
font-size: 16px;
}
.about-intro,
.about-partners,
.about-advantages{
padding: 20px;
}
.about-advantages .advantages-flex {
gap: 12px;
}
.about-future {
padding: 0px 20px;
}
.about-future-wrapper {
flex-direction: column;
gap: 20px;
}
.about-future-image {
width: 100%;
}
.about-future-img {
max-height: 200px;
}
.about-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.about-cta-button {
justify-content: center;
padding: 12px 20px;
}
}
@media (max-width: 460px) {
.about-section-title {
font-size: 22px;
}
.about-intro,
.about-partners,
.about-advantages {
padding: 15px;
}
.about-intro-title {
font-size: 20px;
}
.about-future-img {
max-height: 180px;
}
.about-future-list li {
padding-left: 25px;
}
.about-future-list li::before {
width: 10px;
height: 10px;
top: 6px;
}
.about-advantages .advantages-flex {
gap: 10px;
}
.about-advantages .advantage-block {
padding: 8px;
}
.about-advantages .advantage-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.about-advantages .advantage-text p {
font-size: 14px;
line-height: 1.4;
}
}
@media (max-width: 400px) {
.about-advantages .advantages-flex {
gap: 8px;
}
.about-advantages .advantage-block {
padding: 6px;
}
.about-advantages .advantage-icon {
width: 60px;
height: 60px;
margin-bottom: 12px;
}
.about-advantages .advantage-text p {
line-height: 1.3;
}
}
@media (max-width: 360px) {
.about-advantages {
padding: 12px;
}
.about-advantages .advantages-flex {
gap: 6px;
}
.about-advantages .advantage-block {
padding: 5px;
}
.about-advantages .advantage-icon {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.about-advantages .advantage-text p {
line-height: 1.3;
}
}