.features {
padding: 80px 0;
background: #ffffff;
overflow: hidden;
}
.features__title {
color: #113555;
font-family: Montserrat, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 32px;
max-width: 100%;
}
.features__grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.features__row {
display: flex;
justify-content: space-between;
gap: 20px;
} .features__card {
background: #f6f7f9;
border-radius: 7px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.features__card-title {
color: #113555; font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
}
.features__card-text {
color: #2f2f2f;
font-family: Montserrat, sans-serif;
font-size: 16px;
line-height: 1.4;
font-weight: 500;
}
.features__card-image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}  .features__card--supply {
flex: 0 1 40%; padding: 0 30px 30px;
}
.features__card--supply .features__card-image {
border-radius: 0 0 5px 5px;
}
.features__card--supply .features__card-content {
padding-top: 24px;
} .features__card--production {
flex: 0 1 60%; padding: 30px 30px 0;
align-items: center; }
.features__card--production .features__card-content {
width: 100%;
}
.features__card--production .features__card-image-wrapper {
margin-top: 24px;
width: 100%;
}
.features__card--production .features__card-image {
border-radius: 5px 5px 0 0;
} .features__card--quality {
flex: 0 1 66%; flex-direction: row;
align-items: center;
padding: 20px 50px 20px 0;
}
.features__card--quality .features__card-image-wrapper {
flex: 0 0 297px; margin-right: 30px;
}
.features__card--quality .features__card-image {
border-radius: 0 5px 5px 0;
width: 100%;
height: auto;
}
.features__card--quality .features__card-content {
flex: 1;
} .features__card--video {
flex: 0 1 33%; position: relative;
background: transparent; border-radius: 7px; }
.features__video-bg {
width: 100%;
height: 100%;
min-height: 218px; background-size: cover;
background-position: center;
position: relative;
border-radius: 7px;
overflow: hidden;
}
.features__video-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.65);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 20px;
}
.features__video-text {
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
text-align: center;
margin-top: 15px;
line-height: 1.2;
}
.features__video-play {
width: 60px;
height: 60px;
background: #ffbd45;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 25px 0px rgba(217, 148, 23, 0.37);
transition: transform 0.3s ease;
}
.features__video-play:hover {
transform: scale(1.1);
}
.features__video-icon {
width: 24px;
height: 24px;
}
.features__video-link {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10;
} @media (max-width: 991px) {
.features {
padding: 50px 0;
}
.features__title {
font-size: 26px;
text-align: center;
margin: 0 auto 30px;
max-width: 100%;
}
.features br {
display: none;
}
.features__grid {
gap: 10px;
}
.features__row {
flex-direction: column;
gap: 10px;
} .features__card {
flex: 1 1 auto;
max-width: 100%;
border-radius: 7px;
} .features__card--supply {
padding: 0 16px 16px 16px;
}
.features__card--supply .features__card-content {
padding-top: 0;
}
.features__card--supply .features__card-title {
font-size: 18px;
margin-top: 12px;
}
.features__card--supply .features__card-text {
font-size: 15px;
}
.features__card--supply .features__card-image-wrapper {
margin-left: -8px;
margin-right: -8px;
width: calc(100% + 16px);
} .features__card--production {
padding: 0 16px 16px 16px;
flex-direction: column-reverse; }
.features__card--production .features__card-image-wrapper {
margin-top: 0;
margin-bottom: 12px;
margin-left: -8px;
margin-right: -8px;
width: calc(100% + 16px);
}
.features__card--production .features__card-image,
.features__card--supply .features__card-image {
border-radius: 5px; }
.features__card--production .features__card-title {
font-size: 18px;
align-self: flex-start;
}
.features__card--production .features__card-text {
font-size: 15px;
align-self: flex-start;
}
.features__card--production .features__card-content {
align-items: flex-start;
text-align: left;
} .features__card--quality {
flex-direction: column; padding: 0 16px 16px 16px;
align-items: stretch;
}
.features__card--quality .features__card-image-wrapper {
margin: 0 0 12px 0;
margin-left: -8px;
margin-right: -8px;
width: calc(100% + 16px);
flex: 0 0 auto;
}
.features__card--quality .features__card-image {
border-radius: 5px;
}
.features__card--quality .features__card-title {
font-size: 18px;
}
.features__card--quality .features__card-text {
font-size: 15px;
} .features__card--video {
width: 100%;
}
.features__video-bg {
min-height: 184px;
}
.features__video-text {
font-size: 16px;
}
}