.service .container {
padding-top: 50px;
}
h1.service__title {
font-family: var(--second-family);
font-weight: 700;
font-size: 50px;
text-transform: uppercase;
color: var(--tekst-zagolovkm);
margin-bottom: 20px;
}
.service__desc {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 70px;
}
.service__desc-price {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--blue-dark);
}
.service__desc-change {
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
padding: 4px;
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--tekst-zagolovkm);
cursor: pointer;
position: relative;
}
.service__desc-tooltip {
position: absolute;
top: calc(100% - 38px);
left: -12px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.service__desc-change:hover .service__desc-tooltip {
opacity: 1;
visibility: visible;
}
.service__desc-tooltip-content {
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
color: #ffffff;
padding: 12px 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 312px;
position: relative;
}
.service__desc-tooltip-title {
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--blue-dark);
margin-bottom: 20px;
}
.service__desc-tooltip-list {
margin: 0;
list-style: decimal;
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 16px;
}
.service__desc-tooltip-list li {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: var(--text-medium);
}
.service__desc-tooltip-list li:last-child {
margin-bottom: 0;
}
.service__form {
margin-bottom: 160px;
}
.service__content {
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 50px;
}
.service__content--item {
display: flex;
gap: 24px;
}
.service__content--text {
flex: 1 1 calc(50% - 12px);
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 150%;
color: var(--text-medium);
display: flex;
flex-direction: column;
gap: 40px;
}
.service__content--text a {
text-decoration: none;
color: var(--knopka---akcentnyy);
transition: color 0.3s linear;
}
.service__content--text a:hover {
color: var(--blue);
}
.service__content--text h3 {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--tekst-zagolovkm);
}
.service__content--text ol,
.service__content--text ul {
padding-left: 40px;
margin-top: -30px;
}
.service__content--image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.top--text,
.bottom--text {
display: flex;
gap: 40px;
flex-direction: column;
}
.service__content--image-mobile {
display: none;
}
.service__content--item.left-image .service__content--image {
flex: 1 1 calc(50% - 12px);
}
.service__content--item.right-image .service__content--image {
flex: 1 1 calc(50% - 12px);
order: 2;
}
.service__content--item.top-image,
.service__content--item.bottom-image {
flex-direction: column;
}
.service__content--item.bottom-image .service__content--image {
order: 2;
}
.service__static {
background-color: var(--blue-dark);
padding: 100px 0;
}
.service__static .container {
display: flex;
gap: 24px;
padding: 0;
}
.service__static--content {
display: flex;
flex-direction: column;
}
.service__static--image {
flex: 1 1 calc(50% - 12px);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.service__static--content {
flex: 1 1 calc(50% - 12px);
padding: 40px;
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
}
.service__static--title {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--tekst-zagolovkm);
margin-bottom: 40px;
}
.service__static--text {
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 150%;
color: var(--text-medium);
margin-bottom: 40px;
}
.service__static--btn {
align-self: flex-start;
padding: 18px 30px;
text-decoration: none;
}
.service .servicesSlider {
padding-top: 0;
}
.service .servicesSlider .container {
padding: 50px 0 100px 0;
}
@media screen and (max-width: 1279px) {
.service .breadcrumbs,
.service__title,
.service__desc,
.service__content,
.service__static .container,
.servicesSlider {
padding: 0 40px;
}
}
@media screen and (min-width: 1023px) {
.service__static {
background-image: none !important;
}
}
@media screen and (max-width: 1023px) {
.service__form {
margin-bottom: 60px;
}
.service__desc {
margin-bottom: 32px;
}
.service__content--item {
gap: 30px;
}
.service__content--text ol,
.service__content--text ul {
padding-left: 40px;
margin-top: -20px;
}
.service__content--image {
display: none;
}
.service__content--image-mobile {
display: inline-block;
min-height: 534px !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.service__content--text,
.top--text,
.bottom--text,
.service__content {
gap: 30px;
}
.service__content {
margin-bottom: 70px;
}
.service__content--item.top-mob .service__content--image-mobile {
order: 1;
}
.service__content--item.top-mob .top--text,
.service__content--item.top-mob .bottom--text {
order: 2;
}
.service__content--item.middle-mob .service__content--image-mobile {
order: 2;
}
.service__content--item.middle-mob .top--text {
order: 1;
}
.service__content--item.middle-mob .bottom--text {
order: 3;
}
.service__content--item.bottom-mob .service__content--image-mobile {
order: 2;
}
.service__content--item.top-mob .top--text,
.service__content--item.top-mob .bottom--text {
order: 1;
}
.service__static {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 0;
}
.service__static--image {
display: none;
}
.service__static--text {
margin-bottom: 30px;
}
.service .servicesSlider .container {
padding: 70px 0 100px;
}
}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 767px) {
.service .container {
padding-top: 30px;
}
.service .breadcrumbs,
.service__title,
.service__desc,
.service__content,
.service__static .container,
.servicesSlider {
padding: 0 15px;
}
h1.service__title {
font-size: 36px;
margin-bottom: 10px;
}
.service__desc-price {
font-size: 20px;
}
.service__desc {
margin-bottom: 23px;
}
.service__content--text {
flex: 1px;
font-size: 18px;
}
.service__content--image-mobile {
min-height: 350px !important;
}
.service__content--text h3 {
font-size: 20px;
}
.service__static--content {
flex: 1;
padding: 25px 15px;
}
.service__static--title {
margin-bottom: 20px;
}
.service__static--text {
font-size: 18px;
}
.service__static--btn {
align-self: center;
}
}
@media screen and (max-width: 549px) {
.service__content--image-mobile {
min-height: 260px !important;
}
.service__desc-tooltip-content {
min-width: 250px;
}
}
@media screen and (max-width: 474px) {}
@media screen and (max-width: 374px) {
.service__desc {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.service__desc-tooltip-content {
min-width: 290px;
}
}