* {
font-family: "Roboto", sans-serif;
}
html {
scroll-behavior: smooth;
height: 100%;
}
body {
background-color: #f2f2f2;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
width: min(1400px, 100%);
margin: 0 auto;
padding-left: clamp(16px, 4vw, 32px);
padding-right: clamp(16px, 4vw, 32px);
box-sizing: border-box;
}
main {
overflow: hidden;
flex: 1 0 auto;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(47, 47, 81, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: background 0.3s ease, border-bottom-color 0.3s ease,
box-shadow 0.3s ease, backdrop-filter 0.3s ease,
-webkit-backdrop-filter 0.3s ease;
}
.header--scrolled {
background: rgba(47, 47, 81, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.header--scrolled .buttons__buttons-two:hover {
background-color: #6b6999;
}
.header-block {
display: flex;
justify-content: space-between;
align-items: center;
height: 97px;
position: relative;
}
.header-block__logo {
display: flex;
align-items: center;
width: 150px;
flex-shrink: 0;
}
.header-block__img {
width: 100%;
height: 100%;
max-width: 150px;
}
.header-menu {
display: flex;
align-items: center;
gap: 40px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-burger {
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
z-index: 1000;
position: relative;
}
.header-burger span {
position: relative;
display: block;
width: 32px;
height: 3px;
background-color: #ef7f04;
border-radius: 2px;
transition: background-color 0.3s ease;
}
.header-burger span::before,
.header-burger span::after {
content: "";
position: absolute;
left: 0;
width: 32px;
height: 3px;
background-color: #ef7f04;
border-radius: 2px;
transition: transform 0.3s ease;
}
.header-burger span::before {
transform: translateY(-8px);
}
.header-burger span::after {
transform: translateY(8px);
}
.header-burger--active span {
background-color: transparent;
}
.header-burger--active span::before {
transform: rotate(45deg);
}
.header-burger--active span::after {
transform: rotate(-45deg);
}
.navigations {
display: flex;
justify-content: space-between;
align-items: center;
height: 97px;
}
.navigations-list {
display: flex;
list-style: none;
}
.navigations-list__item {
margin-right: 27px;
}
.link {
color: #ffffff;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
transition: color 0.3s ease;
outline: none;
text-decoration: none;
}
.link:hover {
color: #ef7f04;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.link:focus,
.link:active {
outline: none;
box-shadow: none;
}
.buttons {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
padding: 10px 18px;
border-radius: 3px;
color: #ffffff;
}
.buttons__buttons-one {
background-color: #ef7f04;
transition: all 0.5s ease-in-out;
}
.buttons__buttons-one:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
opacity: 0.9;
}
.buttons__buttons-two {
background-color: #5a5890;
transition: all 0.5s ease-in-out;
}
.buttons__buttons-two:hover {
background-color: #6b6999;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
opacity: 0.9;
}
.buttons__buttons-icon {
margin-right: 13px;
}
.form__feedback-button {
transition: all 0.5s ease-in-out;
}
.form__feedback-button:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
opacity: 0.8;
} .main {
position: relative;
background-image: url(//facetika.ru/wp-content/themes/facetika/img/bg-abstract.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
width: 100%;
margin-top: 0;
padding-top: 97px;
}
.main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 0;
}
.main .container {
position: relative;
z-index: 1;
}
@media screen and (min-width: 1025px) {
.main {
min-height: 100vh;
display: flex;
align-items: center;
}
}
.main-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
@media screen and (min-width: 1025px) {
.main-info {
align-items: center;
}
}
.main-info__left {
padding: 129px 30px 0 85px;
flex: 1 1 55%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
padding: 40px;
margin: 20px;
}
@media screen and (min-width: 1025px) {
.main-info__left {
padding: 40px;
margin: 20px;
}
}
.main-info__title {
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: #ef7f04;
display: block;
}
.main-info__subtitle {
font-weight: 400;
font-size: 46px;
line-height: 56px;
color: #ffffff;
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 12px rgba(0, 0, 0, 0.2);
max-width: 700px;
}
.main-info__block {
display: flex;
gap: 60px;
padding-top: 20px;
}
.main-info__item {
margin-top: 20px;
}
.main-info__icon {
width: 90px;
height: 90px;
}
.main-info__description {
margin-top: 15px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #ffffff;
text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.2);
max-width: 280px;
}
.main-info__right {
flex: 0 0 auto;
margin: 80px 0;
display: flex;
justify-content: center;
}
@media screen and (min-width: 1025px) {
.main-info__right {
margin: 0;
}
}
.form {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.form__feedback {
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
width: 100%;
max-width: 405px;
padding: 43px 40px 65px 40px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
}
.form__feedback-title {
font-size: 18px;
line-height: 21px;
font-weight: 700;
color: #ffffff;
text-align: center;
margin-bottom: 27px;
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 4px 12px rgba(0, 0, 0, 0.3);
}
.form__feedback-inputs {
margin-bottom: 15px;
}
.input__item {
width: 100%;
height: 40px;
margin-bottom: 5px;
background: #e2e2e2;
border-radius: 3px;
padding-left: 16px;
}
.input__item {
margin-bottom: 15px;
}
.input__item::placeholder {
color: #424268;
}
.input__item_check {
width: 25px;
height: 25px;
margin-top: 12px;
border: 2px solid red;
}
.input__checkbox {
display: flex;
align-items: center;
}
.input__checkbox label {
font-size: 12px;
text-align: left;
margin-left: 10px;
}
.input__text {
font-weight: 400;
font-size: 12px;
}
.input__text_color {
color: #4b67af;
text-decoration: underline;
cursor: pointer;
transition: color 0.3s ease;
}
.input__text_color:hover {
color: #ef7f04;
}
.form__feedback-button {
padding: 20px 30px;
background: #ef7f04;
border-radius: 3px;
font-size: 14px;
color: #ffffff;
margin-top: 15px;
}
.form__icon {
position: absolute;
left: -87px;
bottom: -60px;
} .title-sections {
text-align: center;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: #2f2f51;
} .title-sections[id] {
scroll-margin-top: 120px;
}
@media screen and (min-width: 1025px) {
.title-sections[id] {
scroll-margin-top: 100px;
}
}
.services__title {
padding: 56px 0 48px 0;
}
@media screen and (min-width: 1025px) {
.services__title {
padding: 40px 0 30px 0;
}
}
.services-slider {
position: relative;
}
@media screen and (min-width: 1025px) {
.services-slider {
padding: 0 30px;
overflow: visible;
}
}
.services-swiper {
width: 100%;
overflow: hidden;
}
@media screen and (min-width: 1025px) {
.services-swiper {
overflow: visible;
}
}
.services-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 56px;
}
.services-cards__cards-item {
width: 100%;
border-radius: 3px;
height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} @media screen and (min-width: 1025px) {
.services-swiper .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(120px, auto);
gap: 12px;
transform: none !important;
width: 100% !important;
padding: 10px 0;
}
.services-swiper .swiper-slide {
width: auto !important;
height: auto !important;
transform: none !important;
opacity: 1 !important;
}
.services-cards {
display: contents;
margin-bottom: 40px;
}
.services-cards__cards-item {
height: 100%;
min-height: 120px;
border-radius: 6px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.services-cards__cards-item:hover {
transform: translateY(-3px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
} .services-cards__cards-item_size_large {
min-height: 170px;
} .services-cards__cards-item_size_medium {
min-height: 170px;
} .services-cards__cards-item_size_small {
min-height: 120px;
} .services-swiper .swiper-slide:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.services-swiper .swiper-slide:nth-child(2) {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.services-swiper .swiper-slide:nth-child(3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.services-swiper .swiper-slide:nth-child(4) {
grid-column: 1 / 3;
grid-row: 3 / 5;
}
.services-swiper .swiper-slide:nth-child(5) {
grid-column: 3 / 4;
grid-row: 3 / 5;
}
.services-swiper .swiper-slide:nth-child(6) {
grid-column: 4 / 5;
grid-row: 2 / 4;
}
.services-swiper .swiper-slide:nth-child(7) {
grid-column: 4 / 5;
grid-row: 4 / 5;
}
.services-swiper .swiper-slide:nth-child(8) {
grid-column: 1 / 2;
grid-row: 5 / 7;
}
.services-swiper .swiper-slide:nth-child(9) {
grid-column: 2 / 3;
grid-row: 5 / 6;
}
.services-swiper .swiper-slide:nth-child(10) {
grid-column: 2 / 3;
grid-row: 6 / 7;
}
.services-swiper .swiper-slide:nth-child(11) {
grid-column: 3 / 5;
grid-row: 5 / 7;
}
}
.services-slider__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
margin-top: 8px;
}
.services-slider__btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(47, 47, 81, 0.3);
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(0.25rem);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, opacity 0.35s ease, transform 0.3s ease;
position: relative;
font-family: "Roboto", sans-serif;
font-size: 1rem;
line-height: 1.4;
font-weight: 700;
color: #2f2f51;
}
.services-slider__btn span {
width: 10px;
height: 10px;
border-top: 2px solid #2f2f51;
border-right: 2px solid #2f2f51;
display: inline-block;
transform: rotate(45deg);
transition: border-color 0.3s ease;
}
.services-slider__btn_prev span {
transform: rotate(-135deg);
}
.services-slider__btn:hover {
background-color: #ef7f04;
border-color: #ef7f04;
color: #ffffff;
transform: scale(1.05);
}
.services-slider__btn:hover span {
border-color: #ffffff;
}
.services-slider__btn:active {
background-color: #d66f03;
border-color: #d66f03;
color: #ffffff;
transform: scale(0.98);
}
.services-slider__btn:active span {
border-color: #ffffff;
}
.services-slider__pagination {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.services-slider__pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #d6d6dc;
opacity: 1;
}
.services-slider__pagination .swiper-pagination-bullet-active {
background-color: #ef7f04;
}
.services-swiper .swiper-slide {
height: 320px;
display: flex;
flex-shrink: 0;
box-sizing: border-box;
}
.services-cards__icon {
width: 60px;
height: 60px;
flex-shrink: 0;
} @media screen and (min-width: 1025px) {
.services-cards__icon {
width: 35px;
height: 35px;
}
.services-cards__cards-item_size_large .services-cards__icon {
width: 45px;
height: 45px;
}
.services-cards__cards-item_size_medium .services-cards__icon {
width: 38px;
height: 38px;
}
.services-cards__cards-item_size_small .services-cards__icon {
width: 32px;
height: 32px;
}
}
.services-cards__head {
display: flex;
align-items: center;
padding: 55px 55px 20px 50px;
}
.services-cards__title {
font-size: 24px;
font-weight: 700;
line-height: 28px;
color: #2f2f51;
margin-left: 20px;
}
.services-cards__description {
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #2f2f51;
padding: 20px 52px 40px 52px;
flex-grow: 1;
} @media screen and (min-width: 1025px) {
.services-cards__head {
padding: 15px 18px 8px 18px;
}
.services-cards__title {
font-size: 22px;
line-height: 26px;
margin-left: 12px;
}
.services-cards__description {
font-size: 16px;
line-height: 22px;
padding: 8px 18px 15px 18px;
} .services-cards__cards-item_size_small .services-cards__head {
padding: 12px 15px 6px 15px;
}
.services-cards__cards-item_size_small .services-cards__title {
font-size: 20px;
line-height: 24px;
margin-left: 10px;
}
.services-cards__cards-item_size_small .services-cards__description {
font-size: 16px;
line-height: 20px;
padding: 6px 15px 12px 15px;
} .services-cards__cards-item_size_medium .services-cards__head {
padding: 14px 16px 8px 16px;
}
.services-cards__cards-item_size_medium .services-cards__title {
font-size: 21px;
line-height: 25px;
margin-left: 11px;
}
.services-cards__cards-item_size_medium .services-cards__description {
font-size: 16px;
line-height: 22px;
padding: 8px 16px 14px 16px;
} .services-cards__cards-item_size_large .services-cards__head {
padding: 18px 20px 10px 20px;
}
.services-cards__cards-item_size_large .services-cards__title {
font-size: 24px;
line-height: 28px;
margin-left: 15px;
}
.services-cards__cards-item_size_large .services-cards__description {
font-size: 16px;
line-height: 24px;
padding: 10px 20px 18px 20px;
} .services-swiper .swiper-slide:nth-child(11) .services-cards__description {
max-width: 60%;
}  .services-swiper .swiper-slide:nth-child(1) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(2) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(4) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(5) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(8) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(6) .services-cards__cards-item {
min-height: 150px;
} .services-swiper .swiper-slide:nth-child(11) .services-cards__cards-item {
min-height: 100px;
} .services-swiper .swiper-slide:nth-child(1) .services-cards__head,
.services-swiper .swiper-slide:nth-child(2) .services-cards__head,
.services-swiper .swiper-slide:nth-child(4) .services-cards__head,
.services-swiper .swiper-slide:nth-child(5) .services-cards__head,
.services-swiper .swiper-slide:nth-child(6) .services-cards__head,
.services-swiper .swiper-slide:nth-child(8) .services-cards__head {
padding: 12px 16px 6px 16px;
}
.services-swiper .swiper-slide:nth-child(1) .services-cards__description,
.services-swiper .swiper-slide:nth-child(2) .services-cards__description,
.services-swiper .swiper-slide:nth-child(4) .services-cards__description,
.services-swiper .swiper-slide:nth-child(5) .services-cards__description,
.services-swiper .swiper-slide:nth-child(6) .services-cards__description,
.services-swiper .swiper-slide:nth-child(8) .services-cards__description {
padding: 6px 16px 12px 16px;
}
.services-swiper .swiper-slide:nth-child(11) .services-cards__head {
padding: 10px 15px 5px 15px;
}
.services-swiper .swiper-slide:nth-child(11) .services-cards__description {
padding: 5px 15px 10px 15px;
} .services-swiper .swiper-slide:nth-child(1) .services-cards__description,
.services-swiper .swiper-slide:nth-child(4) .services-cards__description {
max-width: 60%;
}
}
.services-cards__cards-item_theme_one {
background-image: linear-gradient(
90.45deg,
#ffffff 30.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-1.jpg);
}
.services-cards__cards-item_theme_one:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_two {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-2.jpg);
}
.services-cards__cards-item_theme_two:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_three {
background-image: linear-gradient(
90.45deg,
#ffffff 32.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-3.jpg);
}
.services-cards__cards-item_theme_three:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_four {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-4.jpg);
}
.services-cards__cards-item_theme_four:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_five {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-5.jpg);
background-position: bottom;
}
.services-cards__cards-item_theme_five:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_six {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-6.jpg);
}
.services-cards__cards-item_theme_six:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_seven {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-7.jpg);
}
.services-cards__cards-item_theme_seven:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_eight {
background-image: linear-gradient(
90.45deg,
#ffffff 2.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-8.jpg);
}
.services-cards__cards-item_theme_eight:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_nine {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-9.jpg);
}
.services-cards__cards-item_theme_nine:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_ten {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-10.jpg);
}
.services-cards__cards-item_theme_ten:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.services-cards__cards-item_theme_eleven {
background-image: linear-gradient(
90.45deg,
#ffffff 25.56%,
rgba(255, 255, 255, 0) 98.81%
),
url(//facetika.ru/wp-content/themes/facetika/img/photo-11.jpg);
}
.services-cards__cards-item_theme_eleven:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
} .production-navigations {
display: flex;
justify-content: center;
}
.production-navigations .navigations-list {
gap: 24px;
}
.li__item {
padding: 40px 0;
}
.li__link {
color: #2f2f51;
font-size: 18px;
line-height: 21px;
font-weight: 400;
padding: 10px 25px;
}
.li__link:hover {
color: #fff;
background: #ef7f04;
border-radius: 3px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.li__link_active {
color: #fff !important;
background: #ef7f04 !important;
border-radius: 3px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
} .production {
margin-bottom: 100px;
}
.production-tabs-content {
position: relative;
}
.production-tab-pane {
display: none;
}
.production-tab-pane_active {
display: block;
} .about-tabs-content {
position: relative;
}
.about-tab-pane {
display: none;
}
.about-tab-pane_active {
display: block;
}
.production-cards {
display: flex;
justify-content: center;
border-radius: 3px;
}
.production-cards_size {
height: 461px;
}
.production-cards__cards-item {
width: 50%;
padding: 20px;
display: flex;
flex-direction: column;
border-radius: 8px;
}
.production-cards__cards-item_background {
background-color: #ffffff;
}
.production-cards_sub-desription {
display: flex;
align-items: center;
}
.production-cards__cards-item_theme-one {
background-image: url(//facetika.ru/wp-content/themes/facetika/img/standart.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.production-cards__cards-item_theme-two {
background-image: url(//facetika.ru/wp-content/themes/facetika/img/premium.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.production-cards__cards-item_theme-three {
background-image: url(//facetika.ru/wp-content/themes/facetika/img/exclusive.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.production-cards__title {
font-weight: 700;
font-size: 36px;
line-height: 42px;
color: #ef7f04;
margin-bottom: 30px;
}
.production-cards__title-description {
font-weight: 500;
font-size: 18px;
line-height: 21px;
color: #000000;
}
.production-cards__feature {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(6, auto);
gap: 20px 24px;
margin-top: auto;
}
.produtcion-cards__feature-item {
display: contents;
}
.production-cards__feature-description {
font-weight: 600;
font-size: 18px;
color: #000000;
display: flex;
align-items: center;
grid-column: 1;
}
.production-cards__feature-description_border {
display: none;
}
.production-cards__feature-description_border_value {
font-weight: 500;
color: #2f2f51;
display: flex;
align-items: center;
white-space: normal;
text-align: left;
grid-column: 2;
font-size: 16px;
} .section-quality {
position: relative;
background-image: url(//facetika.ru/wp-content/themes/facetika/img/background.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
padding-bottom: 10px;
padding-top: 50px;
}
.section-quality::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 0;
}
.section-quality > * {
position: relative;
z-index: 1;
}
.quality-title {
text-align: center;
}
.section-quality__title {
margin-top: 70px;
}
.section-quality__row {
padding: 50px 50px 40px 50px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: center;
justify-items: center;
}
.quality-row__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.quality-row__icon {
height: 90px;
width: auto;
margin: 0 auto;
display: block;
}
.quality-row__description {
text-align: center;
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 19px;
padding: 30px 0;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin: 0;
}
.quality-button {
display: flex;
justify-content: center;
color: #ffffff;
background: #3b3a63;
border-radius: 3px;
font-size: 16px;
line-height: 19px;
}
.quality-button__icon {
margin-right: 13px;
}
.section-quality__button {
display: flex;
justify-content: center;
padding-top: 56px;
padding-bottom: 56px;
}
.section-quality__button:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
opacity: 0.9;
} .about h2 {
margin-bottom: 40px;
}
.about-cards {
display: flex;
}
.about-cards__text {
text-align: justify;
text-align-last: left;  hyphens: auto; word-break: normal; overflow-wrap: break-word;  line-height: 1.5; margin-bottom: 1em; text-indent: 1.5em;  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.hanging-indent {
padding-left: 30px;
text-indent: -30px;
}
.about-cards__cards {
margin-bottom: 80px;
}
.about-cards__cards_left,
.about-cards__cards_right {
width: 50%;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
}
.about-cards__background {
width: 100%;
height: 100%;
}
.about-cards__image {
margin-bottom: 24px;
}
.about-cards__description {
line-height: 22px;
}
.about-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.about-list__item {
display: flex;
width: 32%;
padding: 40px;
}
.item__block {
display: flex;
flex-direction: column;
margin-left: 24px;
}
.item__ic {
width: 86px;
height: 86px;
}
.item__ic_number {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #3b3a63 0%, #5a5890 100%);
color: #ffffff;
font-size: 36px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0px 4px 15px rgba(59, 58, 99, 0.3);
}
.item-about__title {
justify-content: flex-start;
color: #2f2f51;
font-weight: 700;
margin-bottom: 15px;
}
.item-about__description {
line-height: 26px;
}
.about-buttons {
display: flex;
justify-content: center;
margin: 50px 0;
}
.buttons__about-icon {
width: 20px;
height: 17px;
margin-right: 15px;
} .workflow {
padding: 80px 0;
}
.workflow-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 50px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.workflow-list__item {
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.workflow-list__item:hover {
border-color: #3b3a63;
box-shadow: 0px 4px 12px rgba(59, 58, 99, 0.15);
}
.workflow-list__item[open] {
border-color: #3b3a63;
box-shadow: 0px 4px 15px rgba(59, 58, 99, 0.2);
}
.workflow-list__summary {
display: flex;
align-items: center;
padding: 24px 30px;
list-style: none;
cursor: pointer;
user-select: none;
position: relative;
}
.workflow-list__summary::-webkit-details-marker {
display: none;
}
.workflow-list__summary::marker {
display: none;
}
.workflow-list__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #3b3a63 0%, #5a5890 100%);
color: #ffffff;
font-size: 28px;
font-weight: 300;
line-height: 1;
margin-right: 20px;
flex-shrink: 0;
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
box-shadow: 0px 2px 8px rgba(59, 58, 99, 0.2);
}
.workflow-list__icon_minus {
display: none;
}
.workflow-list__item[open] .workflow-list__icon_plus {
display: none;
}
.workflow-list__item[open] .workflow-list__icon_minus {
display: flex;
}
.workflow-list__title {
color: #2f2f51;
font-weight: 700;
font-size: 20px;
margin: 0;
flex: 1;
padding-left: 70px;
}
.workflow-list__content {
padding: 0 30px 30px 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.workflow-list__content-icon {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
margin-top: 10px;
}
.workflow-list__icon-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.workflow-list__description {
color: #2f2f51;
line-height: 26px;
font-size: 16px;
text-align: center;
margin: 0;
max-width: 800px;
}
.workflow-list__description b,
.workflow-list__description strong {
font-weight: 700;
} .title-portfolio {
padding-top: 48px;
}
.section-portfolio__block {
display: flex;
justify-content: center;
padding: 0 81px 0 81px;
cursor: pointer;
}
.section-portfolio__item {
margin: 47px 20px 70px 20px;
}
.section-portfolio__item:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 3px;
}
.base-template__wrapper {
max-width: 1780px;
}
.base-template__content {
max-height: 685px;
}
.base-template__text {
margin-bottom: 50px;
} .slider-section {
position: relative;
overflow: hidden;
padding: 5rem 1px;
width: 100%;
height: 685px;
border-radius: 2.5rem; }  .background-swiper {
width: 100%;
height: 100%;
}
.background-swiper .swiper-wrapper {
align-items: center;
}
.slide {
position: relative;
overflow: hidden;
max-width: 280px;
max-height: 280px;
width: 100%;
border-radius: 1.25rem;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.slide:hover {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.slide img {
cursor: pointer;
}
.slide::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #00000066;
} .centered-swiper {
position: absolute !important;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 10;
max-width: 280px;
max-height: 390px;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 1.25rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
pointer-events: auto;
}
.centered-swiper__slide {
width: 100%;
transition: transform 0.6s ease;
cursor: pointer;
}
.centered-swiper__slide img {
cursor: pointer;
}
.background-swiper img,
.centered-swiper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
} .slider-section__title {
margin: 0;
position: absolute;
top: 12.5%;
left: 50%;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1.3;
color: #2f2f51;
text-transform: uppercase;
transform: translateX(-50%);
}
.slider-section__text {
margin: 0;
position: absolute;
bottom: 10%;
left: 50%;
max-width: 280px;
height: 50px;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.3;
color: #2f2f51;
transform: translateX(-50%);
}
@keyframes slideOutLeft {
0% {
transform: translateX(-50%);
opacity: 1;
}
100% {
transform: translateX(calc((-50% - 50px)));
opacity: 0;
}
}
@keyframes slideInRight {
0% {
transform: translateX(calc(-50% + 50px));
opacity: 0;
}
100% {
transform: translateX(-50%);
opacity: 1;
}
}
.hidden-out {
animation: slideOutLeft 0.4s forwards;
}
.hidden-in {
animation: slideInRight 0.4s forwards;
}
.hidden {
opacity: 0;
} .slider-section__next-button {
position: absolute;
right: 2.5%;
top: 50%;
transform: translate(-50%, 2.5%);
}
.slider-section__next-button,
.slider-section__prev-button {
z-index: 100;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid rgba(47, 47, 81, 0.3);
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(0.25rem);
color: #2f2f51;
transform: translateY(-50%);
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, opacity 0.35s ease, transform 0.3s ease;
cursor: pointer;
}
.slider-section__prev-button {
left: 2.5%;
top: 50%;
}
.slider-section__next-button {
right: 2.5%;
top: 50%;
}
.slider-section__next-button span,
.slider-section__prev-button span {
width: 12px;
height: 12px;
border-top: 2px solid #2f2f51;
border-right: 2px solid #2f2f51;
display: block;
transform: rotate(45deg);
transition: border-color 0.3s ease;
flex-shrink: 0;
}
.slider-section__prev-button span {
transform: rotate(-135deg);
}
.slider-section__next-button.disabled,
.slider-section__prev-button.disabled {
opacity: 0.45;
pointer-events: none;
}
.slider-section__next-button:hover,
.slider-section__prev-button:hover {
background-color: #ef7f04;
border-color: #ef7f04;
color: #ffffff;
transform: translateY(-50%) scale(1.05);
}
.slider-section__next-button:hover span,
.slider-section__prev-button:hover span {
border-color: #ffffff;
}
.slider-section__next-button:active,
.slider-section__prev-button:active {
background-color: #d66f03;
border-color: #d66f03;
color: #ffffff;
transform: translateY(-50%) scale(0.98);
}
.slider-section__next-button:active span,
.slider-section__prev-button:active span {
border-color: #ffffff;
}
@media screen and (max-width: 767px) {
.slider-section {
padding: 2.5rem 1px;
height: 550px;
}
.slide {
max-width: 200px;
max-height: 200px;
}
.centered-swiper {
max-width: 200px;
max-height: 300px;
}
.slider-section__next-button,
.slider-section__prev-button {
width: 50px;
height: 50px;
font-size: 0.875rem;
}
.slider-section__title {
top: 15%;
font-size: 1.5rem;
}
.slider-section__text {
bottom: 10%;
height: 3.75rem;
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.base-template__title {
margin-bottom: 30px;
}
.slider-section__title {
top: 10%;
}
.slider-section__text {
bottom: 7.5%;
}
.slider-section__prev-button {
top: 90%;
left: 5%;
}
.slider-section__next-button {
top: 90%;
right: 5%;
}
} .section-question {
background-color: #5a5890;
padding: 30px 101px 63px 101px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 7px;
}
.question-title {
color: #ffffff;
margin-bottom: 79px;
}
.section-question__item {
color: #2f2f51;
font-weight: 700;
background: #eeeef3;
border-radius: 3px;
margin-bottom: 10px;
padding: 25px 0 10px 20px;
cursor: pointer;
position: relative;
transition: box-shadow 0.3s ease;
user-select: none;
}
.section-question__item * {
cursor: pointer;
}
.section-question__item[open] {
padding-bottom: 20px;
}
.section-question__title-answer {
display: block;
padding: 15px 20px 0 20px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.arrow::before {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #2f2f51;
transition: all 0.3s ease;
}
.arrow_left,
.arrow_right {
display: none;
} .section-question__item[open] .arrow {
transform: translateY(-50%) rotate(180deg);
}
.section-question__item[open] .arrow::before {
border-top-color: #ef7f04;
}
.section-question__item:hover {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.section-question__item:hover .section-question__title {
color: #ef7f04;
}
.section-question__item:hover .arrow::before {
border-top-color: #ef7f04;
}
.section-question__title {
margin-bottom: 15px;
position: relative;
padding-right: 50px;
transition: color 0.3s ease;
list-style: none;
}
.section-question__title::-webkit-details-marker {
display: none;
} .section-contacts {
display: flex;
padding-left: 30px;
gap: 30px;
}
.title-contacts {
margin-top: 86px;
margin-bottom: 58.29px;
}
.info-block__title {
color: #2f2f51;
font-size: 18px;
font-weight: 700;
margin-bottom: 23px;
}
.info-content {
margin-bottom: 35px;
}
.info-content__icon {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.info-block__icons-contacts {
margin-right: 26px;
}
.info-block__links {
margin-right: 30px;
color: #000;
font-weight: 700;
font-size: 22px;
display: inline-block;
word-break: break-word;
}
.contacts-text {
display: inline-block;
}
.contacts-text__mail-link {
color: #222222;
}
.contacts-text__mail-link:hover {
color: #ef7f1a;
}
.info-block__address {
margin-bottom: 13px;
display: flex;
align-items: center;
gap: 10px;
}
.info-block__mail {
display: flex;
align-items: center;
gap: 10px;
}
.info-block__description-text {
margin-top: 13px;
margin-bottom: 20px;
line-height: 22px;
max-width: 400px;
}
.icons-social {
display: flex;
}
.icons-social__icon {
margin-right: 10px;
}
.info-block {
position: relative;
width: 55%;
}
.info-block__image {
position: absolute;
right: 0;
bottom: 0;
margin-right: -15px;
z-index: 1;
}
.workers-image {
position: relative;
}
.info-block__helments {
position: absolute;
right: 107px;
bottom: 177px;
z-index: 1;
}
.info-block__images {
width: 327px;
display: none;
}
.contacts-feedback__title {
color: #2f2f51;
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.section-contacts__form-block {
width: 511px;
min-height: 564px;
margin-right: 30px;
flex-shrink: 0;
}
.contacts-feedback {
width: 45%;
}
.contacts-feedback__form {
background-color: #ffffff;
padding: 55px 57px 0 55px;
border-radius: 20px;
box-sizing: border-box;
}
.input__item_size {
padding: 20px 0 20px 20px;
}
.input__item_size_larg {
padding: 20px 0 100px 20px;
overflow: hidden;
resize: none;
}
.input__text {
margin-top: 7px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #2f2f51;
}
.input__text_hue {
color: #ef7f1a;
}
.contacts-feedback__button {
background-color: #2f2f51;
padding: 16px 43px;
color: #ffffff;
font-size: 16px;
font-weight: 700;
border-radius: 5px;
margin: 20px 0 49px 80px;
border: none;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.2s ease;
}
.contacts-feedback__button:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
opacity: 0.9;
} .footer {
background: #2f2f51;
flex: 0 0 auto;
margin-top: auto;
}
.section-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 35px 0;
}
.section-footer__logo {
margin-right: 22px;
max-width: 150px;
width: 100%;
height: auto;
}
.section-footer__description {
color: #ffffff;
}
.section-footer__description {
display: inline-block;
}
.footer-item__text_left {
display: flex;
}
.footer-item__text {
color: #ffffff;
}
.footer-item__link {
text-decoration: none;
color: #ffffff;
transition: opacity 0.3s ease;
}
.footer-item__link:hover {
opacity: 0.7;
} .privacy-policy {
padding: 60px 0 0 0;
min-height: calc(100vh - 200px);
}
@media screen and (max-width: 1024px) {
.privacy-policy {
padding-top: 40px;
}
}
.privacy-policy__content {
max-width: 900px;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.privacy-policy__title {
font-size: 36px;
font-weight: 700;
color: #2f2f51;
margin-bottom: 40px;
text-align: center;
}
.privacy-policy__section {
margin-bottom: 35px;
}
.privacy-policy__heading {
font-size: 24px;
font-weight: 700;
color: #2f2f51;
margin-bottom: 15px;
}
.privacy-policy__text {
font-size: 16px;
line-height: 1.6;
color: #333333;
margin-bottom: 15px;
}
.privacy-policy__text_date {
font-size: 14px;
color: #666666;
font-style: italic;
margin-top: 30px;
}
.privacy-policy__list {
margin: 15px 0;
padding-left: 25px;
}
.privacy-policy__list li {
font-size: 16px;
line-height: 1.6;
color: #333333;
margin-bottom: 10px;
}
.privacy-policy__list ol,
.privacy-policy__list ul {
margin: 10px 0;
padding-left: 25px;
}
.privacy-policy__list ol {
list-style-type: decimal;
}
.privacy-policy__list ul {
list-style-type: disc;
}
ol.privacy-policy__list {
list-style-type: decimal;
}
ul.privacy-policy__list {
list-style-type: disc;
}
.privacy-policy__text strong {
font-weight: 700;
color: #2f2f51;
}
.privacy-policy__link {
color: #ef7f04;
text-decoration: none;
transition: color 0.3s ease;
}
.privacy-policy__link:hover {
color: #d67003;
text-decoration: underline;
}  @media screen and (max-width: 1024px) {
.header-burger {
display: inline-flex;
position: relative;
z-index: 1000;
}
.header-menu {
position: fixed;
inset: 0;
background: rgba(47, 47, 81, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 999;
border-left: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
padding: 120px 24px 56px;
padding-bottom: calc(56px + env(safe-area-inset-bottom));
pointer-events: none;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.header-menu--open {
transform: translateX(0);
pointer-events: auto;
background-color: #2d2c4f;
visibility: visible !important;
display: flex !important;
}
.header-menu--open .navigations {
height: auto;
width: 100%;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
visibility: visible !important;
opacity: 1 !important;
}
.header-menu--open .navigations-list {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.header-menu--open .navigations-list__item {
display: list-item !important;
visibility: visible !important;
opacity: 1 !important;
}
.header-menu--open .link {
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
}
.header-menu--open .header-buttons {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.header-menu--open .header-buttons .buttons {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.production-navigations .navigations-list {
flex-direction: row;
justify-content: center;
}
.header-menu .navigations-list__item {
margin-right: 0;
visibility: visible !important;
opacity: 1 !important;
}
.header-menu .link {
visibility: visible !important;
opacity: 1 !important;
}
.header-menu .header-buttons {
width: min(320px, 100%);
flex-direction: column;
margin-top: auto;
align-self: center;
align-items: center;
gap: 12px;
padding-bottom: env(safe-area-inset-bottom);
visibility: visible !important;
opacity: 1 !important;
}
.header-menu .header-buttons .buttons {
width: 100%;
justify-content: center;
visibility: visible !important;
opacity: 1 !important;
}
.header-block__logo {
margin-left: 0;
}
body.menu-open .header-block__logo {
position: fixed;
top: 32px;
left: 5vw;
z-index: 1001;
}
body.menu-open {
overflow: hidden;
}
body.menu-open .header-burger {
position: fixed;
top: 32px;
right: 24px;
z-index: 1001;
} .header-menu--open .navigations,
.header-menu--open .header-buttons {
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
}
.header-menu--open .navigations-list,
.header-menu--open .navigations-list__item,
.header-menu--open .link {
visibility: visible !important;
opacity: 1 !important;
}
.production-cards__cards-item {
border-radius: 8px 8px 0 0;
}
.about-cards__text {
font-size: 14px;
}
.about-cards__cards_left {
width: 100%;
border-radius: 8px;
}
.about-cards__cards_right {
display: none;
}
}
@media screen and (max-width: 576px) {
.header-menu {
padding: 96px 16px 96px;
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body.menu-open .header-block__logo {
top: 24px;
}
body.menu-open .header-burger {
top: 24px;
right: 16px;
}
}
@media screen and (max-width: 480px) {
.header .header-buttons .buttons {
display: none;
}
body.menu-open .header .header-buttons .buttons {
display: flex;
}
} @media screen and (max-width: 1200px) {
.main-info__left {
padding: 35px;
margin: 15px;
}
}
@media screen and (max-width: 1024px) {
.main-info {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.main-info__left {
width: calc(100% - 40px);
padding: 35px;
margin: 20px;
}
.main-info__subtitle {
font-size: 38px;
line-height: 48px;
max-width: 100%;
}
.main-info__description {
font-size: 16px;
line-height: 22px;
max-width: 100%;
}
.main-info__right {
width: 100%;
margin: 0 0 60px;
}
.form__feedback {
max-width: 100%;
padding: 32px 28px 48px;
margin: 0 auto;
}
.form__icon {
display: none;
}
}
@media screen and (max-width: 768px) {
.main-info__left {
padding: 30px 24px;
margin: 15px;
}
.main-info__subtitle {
font-size: 32px;
line-height: 40px;
}
.main-info__description {
font-size: 15px;
line-height: 21px;
}
.form__feedback {
width: 100%;
max-width: 100%;
padding: 28px 24px 40px;
}
.form__feedback-button {
width: 100%;
}
}
@media screen and (max-width: 576px) {
.main-info__left {
width: 100%;
padding: 25px 20px;
margin: 0 auto;
margin-top: 25px;
border-radius: 16px;
}
.main-info__block {
flex-direction: row;
flex-wrap: wrap;
gap: 2px;
justify-content: center;
}
.main-info__item { display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-right: 0;
margin-top: 10px;
min-width: 140px;
}
.main-info__subtitle {
font-weight: 300;
font-size: 22px;
line-height: 30px;
color: #ffffff;
text-align: center;
text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), 0px 3px 8px rgba(0, 0, 0, 0.2);
max-width: 100%;
}
.main-info__icon {
width: 54px;
height: 54px;
}
.main-info__description {
font-size: 14px;
line-height: 20px;
max-width: 240px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.item-about__description {
font-size: 14px;
}
.item__ic {
width: 56px;
height: 56px;
}
} @media screen and (max-width: 1024px) {
.services-swiper .swiper-wrapper {
display: flex;
}
.services-cards {
gap: 0;
margin-bottom: 0px;
}
.services-cards__cards-item {
height: 320px;
border-radius: 16px;
}
}
@media screen and (min-width: 1025px) {
.services-cards__cards-item {
border-radius: 8px;
}
.services-slider__controls {
display: none;
}
.services-slider__pagination {
display: none;
}
.services-cards__cards-item_theme_three,
.services-cards__cards-item_theme_four {
margin-bottom: 0;
}
} @media screen and (max-width: 992px) {
.production-cards__feature-description_border {
width: 20%;
}
.production-cards__cards-item_theme {
background-position: center;
width: 50%;
}
.production-cards__title-description {
margin: 40px 0 30px 0;
}
.produtcion-cards__feature-item {
white-space: nowrap;
padding-bottom: 13px;
}
}
@media screen and (max-width: 768px) {
.production h2,
.about h2 {
margin-bottom: 48px;
}
.production-navigations {
margin-bottom: 40px;
}
.production-cards {
flex-direction: column;
}
.production-cards__cards-item {
width: 100%;
min-height: 250px;
}
.production-cards__cards-item_background {
order: 1;
}
.production-cards__cards-item_theme {
order: 2;
width: 100%;
min-height: 300px;
}
.production-cards_size {
height: auto;
}
.production-cards__feature {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
gap: 16px;
margin-bottom: 32px;
}
.production-cards__title {
font-size: 20px;
}
.production-cards__feature-description {
grid-column: 1;
margin-bottom: 4px;
}
.production-cards__feature-description_border_value {
grid-column: 1;
text-align: left;
justify-content: flex-start;
}
.produtcion-cards__feature-item {
padding-left: 0;
}
.li__item {
padding: 0;
}
.li__link {
padding: 5px 10px;
}
.about-cards__cards {
margin-bottom: 0;
}
.about-list__item {
padding: 20px;
}
.about-cards__background {
display: none;
}
.about-cards__cards_left {
margin-bottom: 40px;
}
} @media screen and (max-width: 992px) {
.section-quality__row {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding: 50px 30px 40px 30px;
}
.quality-row__icon {
width: 120px;
height: 120px;
}
.section-quality {
background-position: center;
}
}
@media screen and (max-width: 576px) {
.section-quality__row {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 30px 15px 30px 15px;
}
.section-quality__title {
margin-top: 40px;
padding-top: 20px;
}
.quality-row__icon {
width: 60px;
height: 60px;
}
.quality-row__description {
padding: 15px 0;
font-size: 13px;
line-height: 16px;
}
.services-cards__head {
padding: 55px 55px 16px 20px;
}
.services-cards__description {
padding: 20px 52px 40px 20px;
}
.production-cards__feature {
gap: 10px;
}
.production-cards__title-description {
font-size: 16px;
}
.production-cards__feature-description,
.production-cards__feature-description_border_value {
font-size: 14px;
}
} @media screen and (max-width: 992px) {
.about-list__item {
width: 49%;
}
.about-list {
justify-content: center;
}
.item__block {
margin-left: 16px;
width: 60%;
}
}
@media screen and (max-width: 768px) {
.about-cards {
flex-direction: column;
}
.about-cards__cards_left {
width: 100%;
order: 1;
}
.about-cards__cards_right {
width: 100%;
order: 2;
}
} @media screen and (max-width: 992px) {
.workflow {
padding: 60px 0;
}
.workflow-list {
margin-top: 30px;
gap: 15px;
}
.workflow-list__summary {
padding: 20px 20px;
}
.workflow-list__icon {
width: 36px;
height: 36px;
font-size: 24px;
margin-right: 15px;
left: 20px;
}
.workflow-list__title {
font-size: 18px;
padding-left: 60px;
}
.workflow-list__content {
padding: 0 20px 20px 20px;
gap: 15px;
}
.workflow-list__content-icon {
width: 100px;
height: 100px;
}
.workflow-list__description {
font-size: 15px;
line-height: 24px;
}
}
@media screen and (max-width: 576px) {
.workflow {
padding: 40px 0;
}
.workflow-list {
margin-top: 20px;
gap: 12px;
}
.workflow-list__summary {
padding: 16px 15px;
}
.workflow-list__icon {
width: 32px;
height: 32px;
font-size: 20px;
margin-right: 12px;
left: 15px;
}
.workflow-list__title {
font-size: 16px;
padding-left: 55px;
}
.workflow-list__content {
padding: 0 15px 15px 15px;
gap: 12px;
}
.workflow-list__content-icon {
width: 80px;
height: 80px;
}
.workflow-list__description {
font-size: 14px;
line-height: 22px;
}
} @media screen and (max-width: 992px) {
.section-portfolio__item:first-child {
display: none;
}
} @media screen and (max-width: 1024px) {
.section-portfolio {
margin-left: -32px;
margin-right: -32px;
width: calc(100% + 64px);
padding-left: 0;
padding-right: 0;
}
.base-template__wrapper {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.slider-section {
border-radius: 0;
}
}
@media screen and (max-width: 768px) {
.section-portfolio {
margin-left: -16px;
margin-right: -16px;
width: calc(100% + 32px);
}
} @media screen and (max-width: 992px) {
.section-question {
padding: 30px 16px 63px 16px;
}
} @media screen and (max-width: 992px) {
.section-contacts {
flex-wrap: wrap;
justify-content: center;
padding-left: 0;
gap: 40px;
}
.info-block {
width: 100%;
max-width: 100%;
}
.contacts-feedback {
width: 100%;
max-width: 100%;
}
.section-contacts__form-block {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-top: 40px;
}
.contacts-feedback__form {
margin-left: 0;
padding: 40px 30px 0;
}
.info-block__links {
margin-right: 20px;
font-size: 18px;
}
.info-block__image {
right: -90px;
bottom: -110px;
max-width: 200px;
}
.info-block__helments {
position: absolute;
right: 17px;
bottom: 68px;
max-width: 80px;
}
.info-block__images {
width: 100%;
max-width: 327px;
}
.contacts-feedback__button {
margin: 16px 0 25px 0;
width: 100%;
max-width: 300px;
}
.input__text {
font-size: 12px;
}
}
@media screen and (max-width: 768px) {
.section-contacts {
padding-left: 0;
gap: 30px;
}
.title-contacts {
margin-top: 50px;
margin-bottom: 40px;
}
.info-block {
padding-right: 0;
}
.info-block__title {
font-size: 16px;
}
.info-block__links {
font-size: 16px;
margin-right: 15px;
display: block;
margin-bottom: 5px;
}
.info-content__icon {
align-items: center;
}
.info-block__icons-contacts {
margin-right: 0;
margin-bottom: 10px;
}
.info-block__address,
.info-block__mail {
align-items: center;
gap: 10px;
}
.contacts-description {
width: 100%;
}
.info-block__images {
display: none;
}
.section-contacts {
margin-bottom: 50px;
}
.section-contacts__form-block {
margin-top: 20px;
margin-bottom: 20px;
min-height: auto;
}
.contacts-feedback__form {
padding: 30px 20px 20px;
}
.contacts-feedback__title {
font-size: 20px;
margin-bottom: 20px;
}
.contacts-feedback__button {
margin: 16px 0 15px 0;
width: 100%;
padding: 14px 20px;
}
.input__item_size,
.input__item_size_larg {
padding: 15px 0 15px 15px;
}
}
@media screen and (max-width: 480px) {
.section-contacts {
gap: 20px;
}
.title-contacts {
margin-top: 40px;
margin-bottom: 30px;
}
.info-block__title {
font-size: 14px;
margin-bottom: 15px;
}
.info-block__links {
font-size: 14px;
}
.info-content {
margin-bottom: 30px;
}
.info-block__address {
margin-bottom: 20px;
}
.section-contacts__form-block {
margin-bottom: 15px;
}
.contacts-feedback__form {
padding: 25px 15px 15px;
}
.contacts-feedback__title {
font-size: 18px;
}
.input__item_size,
.input__item_size_larg {
padding: 12px 0 12px 12px;
font-size: 14px;
}
.contacts-feedback__button {
font-size: 14px;
padding: 12px 20px;
margin-bottom: 10px;
}
} @media screen and (max-width: 768px) {
.section-footer__logo {
max-width: 120px;
}
.privacy-policy {
padding: 20px 0 0 0;
}
.privacy-policy__content {
padding: 40px 24px 24px 24px;
}
.privacy-policy__title {
font-size: 28px;
margin-bottom: 30px;
}
.privacy-policy__heading {
font-size: 20px;
}
.privacy-policy__text {
font-size: 14px;
}
.privacy-policy__list li {
font-size: 14px;
}
.contacts-feedback__button-block {
display: flex;
justify-content: center;
}
}
@media screen and (max-width: 480px) {
.section-footer__logo {
max-width: 100px;
}
.section-footer {
flex-direction: column;
gap: 20px;
text-align: center;
}
.section-footer__logo {
margin-right: 0;
margin-bottom: 10px;
}
.production-cards_size {
margin: 0;
}
.li__link {
font-size: 16px;
}
.li__link {
padding: 5px 5px;
}
.production-navigations .navigations-list {
gap: 10px;
}
.about-list__item {
width: 100%;
}
} .modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal[aria-hidden="false"] {
opacity: 1;
visibility: visible;
}
.modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.modal__container {
position: relative;
background: #ffffff;
border-radius: 10px;
width: 90%;
max-width: 500px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 40px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s ease;
z-index: 1001;
cursor: default;
margin: 0 auto;
}
.modal[aria-hidden="false"] .modal__container {
transform: scale(1);
}
.modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
z-index: 1002;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
transform-origin: center;
}
.modal__close:hover {
transform: rotate(90deg);
}
.modal__close span {
position: relative;
display: block;
width: 20px;
height: 2px;
background-color: #2f2f51;
border-radius: 1px;
transform: rotate(45deg);
transition: background-color 0.3s ease;
transform-origin: center;
}
.modal__close span::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 2px;
background-color: #2f2f51;
border-radius: 1px;
transform: rotate(90deg);
transition: background-color 0.3s ease;
transform-origin: center;
}
.modal__close:hover span,
.modal__close:hover span::before {
background-color: #ef7f04;
}
.modal__content {
position: relative;
}
.modal__title {
font-size: 24px;
line-height: 28px;
font-weight: 700;
color: #2f2f51;
text-align: center;
margin-bottom: 30px;
}
.modal__form {
display: flex;
flex-direction: column;
}
.modal__inputs {
margin-bottom: 20px;
}
.modal__input,
.modal__textarea {
width: 100%;
height: 40px;
margin-bottom: 15px;
background: #e2e2e2;
border: none;
border-radius: 3px;
padding: 0 16px;
font-size: 14px;
font-family: "Roboto", sans-serif;
color: #2f2f51;
box-sizing: border-box;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.modal__input:focus,
.modal__textarea:focus {
outline: none;
background: #ffffff;
box-shadow: 0 0 0 2px #ef7f04;
}
.modal__textarea {
height: auto;
min-height: 100px;
padding: 12px 16px;
resize: vertical;
}
.modal__input::placeholder,
.modal__textarea::placeholder {
color: #424268;
}
.modal__checkbox {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}
.modal__checkbox-input {
width: 20px;
height: 20px;
margin-top: 2px;
margin-right: 10px;
flex-shrink: 0;
cursor: pointer;
accent-color: #ef7f04;
}
.modal__checkbox-label {
cursor: pointer;
flex: 1;
}
.modal__checkbox-text {
font-size: 12px;
line-height: 1.5;
color: #2f2f51;
font-weight: 400;
}
.modal__checkbox-link {
color: #4b67af;
text-decoration: underline;
cursor: pointer;
transition: color 0.3s ease;
}
.modal__checkbox-link:hover {
color: #ef7f04;
}
.modal__button {
width: 100%;
padding: 18px 30px;
background: #ef7f04;
border: none;
border-radius: 3px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
font-family: "Roboto", sans-serif;
}
.modal__button:hover {
background: #d66f03;
filter: drop-shadow(0px 4px 8px rgba(239, 127, 4, 0.4));
transform: translateY(-2px);
}
.modal__button:active {
transform: translateY(0);
}
.modal__button_calculation {
background: #3b3a63;
}
.modal__button_calculation:hover {
background: #2d2c4f;
filter: drop-shadow(0px 4px 8px rgba(59, 58, 99, 0.4));
} .modal__success-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
animation: scaleIn 0.3s ease;
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal__success-text {
text-align: center;
font-size: 16px;
line-height: 1.5;
color: #2f2f51;
margin-bottom: 30px;
font-family: "Roboto", sans-serif;
} body.modal-open {
overflow: hidden;
} @media (max-width: 768px) {
.modal {
padding: 20px;
}
.modal__container {
width: 100%;
max-width: 100%;
padding: 30px 20px;
max-height: calc(100vh - 40px);
margin: 0;
}
.modal__title {
font-size: 20px;
margin-bottom: 25px;
}
.modal__close {
top: 15px;
right: 15px;
width: 28px;
height: 28px;
}
.modal__close span,
.modal__close span::before {
width: 18px;
}
}
@media (max-width: 480px) {
.modal__container {
padding: 25px 15px;
border-radius: 8px;
}
.modal__title {
font-size: 18px;
margin-bottom: 20px;
}
.modal__button {
padding: 15px 25px;
font-size: 14px;
}
} @keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.form-notification {
font-family: "Roboto", sans-serif;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
}
.form-notification--success {
background-color: #4caf50;
}
.form-notification--error {
background-color: #f44336;
} .wow {
visibility: hidden;
} .header-burger,
.header-menu,
.header-menu .navigations,
.header-menu .navigations-list,
.header-menu .navigations-list__item,
.header-menu .link,
.header-menu .header-buttons,
.header-menu .buttons {
visibility: visible !important;
}
.header-burger.wow,
.header-menu.wow,
.header-menu .navigations.wow,
.header-menu .navigations-list.wow,
.header-menu .navigations-list__item.wow,
.header-menu .link.wow,
.header-menu .header-buttons.wow,
.header-menu .buttons.wow {
visibility: visible !important;
}
.wow.animated {
visibility: visible;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation-name: fadeInUp;
animation-duration: 0.8s;
animation-fill-mode: both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 0.8s;
animation-fill-mode: both;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-40px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
animation-name: fadeInLeft;
animation-duration: 0.8s;
animation-fill-mode: both;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(40px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
animation-name: fadeInRight;
animation-duration: 0.8s;
animation-fill-mode: both;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
animation-name: slideInUp;
animation-duration: 0.8s;
animation-fill-mode: both;
} @media screen and (max-width: 1024px) {
.services-slider .swiper-slide.wow {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
}
.services-slider .swiper-slide.wow.animated {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
}
} .portfolio-gallery-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.portfolio-gallery-modal.portfolio-gallery-active {
opacity: 1;
visibility: visible;
}
.portfolio-gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
cursor: pointer;
}
.portfolio-gallery-container {
position: relative;
width: 90%;
max-width: 1200px;
max-height: 90vh;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 0 120px 0;
box-sizing: border-box;
}
.portfolio-gallery-image-wrapper {
position: relative;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.portfolio-gallery-image {
max-width: 100%;
max-height: calc(90vh - 200px);
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.portfolio-gallery-info {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 800px;
text-align: center;
color: #fff;
padding: 20px 0;
box-sizing: border-box;
}
.portfolio-gallery-title {
font-size: 24px;
font-weight: 700;
margin: 0 0 10px 0;
color: #fff;
}
.portfolio-gallery-desc {
font-size: 16px;
line-height: 1.6;
margin: 0 0 10px 0;
color: rgba(255, 255, 255, 0.9);
}
.portfolio-gallery-counter {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin-top: 10px;
}
.portfolio-gallery-close {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(0.25rem);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease,
opacity 0.3s ease, transform 0.3s ease;
z-index: 10001;
font-family: "Roboto", sans-serif;
font-weight: 700;
}
.portfolio-gallery-close:hover {
background-color: #ef7f04;
border-color: #ef7f04;
transform: scale(1.05);
}
.portfolio-gallery-close:active {
background-color: #d66f03;
border-color: #d66f03;
transform: scale(0.98);
}
.portfolio-gallery-prev,
.portfolio-gallery-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(0.25rem);
color: #fff;
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, opacity 0.35s ease, transform 0.3s ease;
cursor: pointer;
}
.portfolio-gallery-prev span,
.portfolio-gallery-next span {
width: 12px;
height: 12px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
display: block;
transform: rotate(45deg);
transition: border-color 0.3s ease;
flex-shrink: 0;
}
.portfolio-gallery-prev span {
transform: rotate(-135deg);
}
.portfolio-gallery-prev:hover,
.portfolio-gallery-next:hover {
background-color: #ef7f04;
border-color: #ef7f04;
color: #ffffff;
transform: translateY(-50%) scale(1.05);
}
.portfolio-gallery-prev:hover span,
.portfolio-gallery-next:hover span {
border-color: #ffffff;
}
.portfolio-gallery-prev:active,
.portfolio-gallery-next:active {
background-color: #d66f03;
border-color: #d66f03;
color: #ffffff;
transform: translateY(-50%) scale(0.98);
}
.portfolio-gallery-prev:active span,
.portfolio-gallery-next:active span {
border-color: #ffffff;
}
.portfolio-gallery-prev {
left: 2.5%;
}
.portfolio-gallery-next {
right: 2.5%;
}
@media (max-width: 1024px) {
.portfolio-gallery-container {
padding: 70px 0 100px 0;
}
.portfolio-gallery-image {
max-height: calc(90vh - 170px);
}
.portfolio-gallery-prev {
left: 10px;
}
.portfolio-gallery-next {
right: 10px;
}
.portfolio-gallery-close {
top: 10px;
right: 10px;
width: 45px;
height: 45px;
font-size: 20px;
}
.portfolio-gallery-title {
font-size: 20px;
}
.portfolio-gallery-desc {
font-size: 14px;
}
.portfolio-gallery-info {
padding: 15px 0;
}
}
@media (max-width: 768px) {
.portfolio-gallery-container {
width: 95%;
padding: 60px 0 90px 0;
}
.portfolio-gallery-image {
max-height: calc(90vh - 150px);
}
.portfolio-gallery-prev,
.portfolio-gallery-next {
width: 50px;
height: 50px;
font-size: 0.875rem;
}
.portfolio-gallery-prev span,
.portfolio-gallery-next span {
width: 10px;
height: 10px;
}
.portfolio-gallery-prev {
left: 5px;
}
.portfolio-gallery-next {
right: 5px;
}
.portfolio-gallery-close {
width: 40px;
height: 40px;
font-size: 18px;
top: 5px;
right: 5px;
}
.portfolio-gallery-info {
padding: 10px 0;
}
}