.company {
padding: 100px 0 80px;
}
.company__wrap {
display: flex;
flex-direction: column;
gap: 40px;
}
.company__header {
display: flex;
flex-direction: column;
gap: 14px;
}
.breadcrumbs {
color: var(--clr-gray-600);
}
.breadcrumbs a {
color: var(--clr-gray-600);
text-decoration: none;
}
.company__title {
margin: 0;
color: var(--clr-black);
}
.company__body {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.company__sidebar {
position: sticky;
top: 100px;
width: 30%;
}
.company__sidebar-nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 14px;
}
.company__sidebar-link {
padding: 14px 28px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-self: stretch;
gap: 10px;
text-decoration: none;
color: var(--clr-black);
font-weight: 600;
margin: 0;
border-radius: 12px;
transition: .3s ease-in-out;
}
.company__sidebar-link:hover {
color: var(--clr-white);
background: var(--clr-blue);
}
.company__sidebar-link.is-active {
color: var(--clr-white);
background: var(--clr-blue);
}
.company__content {
width: 100%;
}
@media screen and (max-width: 768px) {
.company {
padding: 40px 0 80px;
}
.company__body {
flex-direction: column;
}
.company__sidebar-nav {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.company__sidebar-link {
padding: 12px 18px;
white-space: nowrap;
background-color: var(--clr-gray);
}
.company__sidebar {
position: relative;
top: initial;
width: 100%;
}
} .company-about {
}
.company-about__section {
padding: 40px 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.company-about__section--first {
padding: 0 0 40px;
}
.company-about__article {
padding: 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.company-about__article--first {
padding: 0 0 20px;
}
.company-about__title {
margin: 0;
}
.company-about__subtitle {
margin: 0;
}
.company-about__picture {
}
.company-about__img {
height: 100%;
width: 100%;
display: block;
object-fit: cover;
}
.company-about__text {
margin: 0;
padding: 20px 0px;
font-weight: 400;
color: var(--clr-gray-600);
}
.company-about__list {
display: flex;
flex-direction: column;
gap: 40px;
}
.company-about__item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
.company-about__step-article {
width: 30%;
}
.company-about__step-year {
margin: 0 0 40px;
color: var(--clr-blue);
font-weight: 500;
}
.company-about__step-title {
margin: 0 0 24px;
color: var(--clr-black);
font-weight: 600;
}
.company-about__step-text {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.company-about__step-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media screen and (max-width: 1024px) {
.company-about__section {
padding: 20px 0;
gap: 10px;
}
.company-about__article {
padding: 10px 0;
}
.company-about__item {
flex-direction: column;
align-items: flex-start;
}
.company-about__step-article {
width: 100%;
}
.company-about__step-year {
margin: 0 0 10px;
}
.company-about__step-title {
margin: 0 0 4px;
}
}  .custom-title-h2 {
font-weight: 500;
font-size: var(--title-small-font-size);
line-height: 110%;
color: var(--clr-black);
}
.custom-title-h3 {
margin: 40px 0 20px;
font-weight: 500;
font-size: var(--paragraph-large-font-size);
line-height: var(--paragraph-large-line-height);
}
.custom-text {
font-weight: 400;
font-size: var(--paragraph-medium-font-size);
line-height: var(--paragraph-medium-line-height);
}
.btn-custom {
padding: 14px 28px;
text-decoration: none;
justify-self: flex-start;
}
.wp-lightbox-container button {
opacity: 1;
}
.custom_ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 24px;
counter-reset: step;
}
.custom_ul li {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
color: var(--clr-gray-600);
font-size: var(--paragraph-medium-font-size);
line-height: var(--paragraph-medium-line-height);
}
.custom_ul li::before {
counter-increment: step; content: counter(step, decimal-leading-zero);
width: 20px;
height: 20px;
padding: 4px;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--clr-white);
border-radius: 6px;
background: var(--clr-blue);
} .company-docs {
display: flex;
flex-direction: column;
gap: 20px;
}
.docs__article {
display: flex;
flex-direction: column;
gap: 16px;
}
.docs__title {
margin: 0;
color: var(--clr-black);
font-weight: 600;
}
.docs__subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.docs__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.docs__item {
padding: 20px;
position: relative;
text-decoration: none;
border-radius: 24px;
background: var(--clr-gray);
transition: .3s ease-in-out;
}
.docs__item::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 24px;
height: 24px;
background: no-repeat url(//vodomatika.ru/wp-content/themes/vodomatika/assets/images/icon/external-link.svg) center / cover;
transition: .3s ease-in-out;
}
.docs__item:hover {
background-color: #dde1ee;
}
.docs__item:hover::after {
transform: translate(0, -6px);
}
.docs__item-article {
display: flex;
flex-direction: column;
gap: 20px;
}
.docs__item-img {
height: 42px;
width: 42px;
display: block;
object-fit: cover;
pointer-events: none;
}
.docs__item-title {
margin: 0;
color: var(--clr-black);
font-weight: 600;
}
.docs__item-subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.docs__card {
display: flex;
flex-direction: column;
gap: 20px;
}
.docs__card-article {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.docs__card-title {
margin: 0;
color: var(--clr-black);
font-weight: 600;
}
.docs__card-subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.docs__card-list {
display: flex;
flex-direction: column;
}
.docs__card-item {
padding: 10px 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--clr-gray);
}
.docs__card-item:nth-child(2n) {
background-color: var(--clr-white);
}
.docs__card-item-title {
margin: 0;
color: var(--clr-gray-600);
font-weight: 600;
}
.docs__card-item-subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.docs__btn {
align-self: flex-start;
}
@media screen and (max-width: 768px) {
.docs__card-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}