.service__page-tariffs-block {
position: relative;
padding: 80px 0;
width: 100%;
}
.service__page-tariffs-block::after {
content: "";
position: absolute;
top: 0;
left: calc(
-1 *
(
max(
0px,
calc(
(
100vw - var(--container-max-width) - 2 *
var(--content-padding)
) /
2
)
) +
var(--content-padding)
)
);
width: 100vw;
height: 100%;
background-color: var(--blue-white-color);
border-radius: 80px;
z-index: -1;
}
.service__page-tariffs-block .service__badge {
background-color: var(--white-color);
}
.service__page-tariffs-block .service__page-content-subtitle {
color: var(--gray-color-second);
}
.service__page-tariff-blue-card {
padding: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
)
clamp(
24px,
calc(24px + (36 - 24) * (100cqw - 1280px) / (1600 - 1280)),
36px
);
margin-bottom: clamp(
36px,
calc(36px + (50 - 36) * (100cqw - 1280px) / (1600 - 1280)),
50px
);
background-color: var(--blue-color);
border-radius: 32px;
display: flex;
flex-direction: column;
gap: clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
color: var(--white-color);
}
.service__page-tariff-blue-card-top {
display: flex;
flex-direction: row;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
align-items: center;
font-size: 15px;
line-height: 160%;
color: #d2dbf3;
}
.service__page-tariff-blue-card-top-dot {
display: block;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #d2dbf3;
}
.service__page-tariff-blue-card-mid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: clamp(
20px,
calc(20px + (40 - 20) * (100cqw - 1280px) / (1600 - 1280)),
40px
);
align-items: center;
}
.service__page-tariff-blue-card-mid-title {
font-family: "Unbounded", sans-serif;
font-size: clamp(
48px,
calc(48px + (58 - 48) * (100cqw - 1280px) / (1600 - 1280)),
58px
);
font-weight: 600;
line-height: 140%;
}
.service__page-tariff-blue-card-mid-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.service__page-tariff-blue-card-mid-text-title {
font-family: "Unbounded", sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 133.333%;
}
.service__page-tariff-blue-card-mid-text-desc {
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
color: #d2dbf3;
line-height: 140%;
}
.service__page-tariff-blue-card-line {
width: 100%;
height: 1px;
background-color: var(--white-color);
opacity: 0.2;
}
.service__page-tariff-blue-card-bot {
color: var(--white-color);
opacity: 0.4;
font-size: clamp(
14px,
calc(14px + (15 - 14) * (100cqw - 1280px) / (1600 - 1280)),
15px
);
line-height: 140%;
}
.service__page-pricing-section-picker-shell {
display: flex;
flex-direction: column;
gap: clamp(
16px,
calc(16px + (20 - 16) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
margin-bottom: 30px;
}
.service__page-pricing-section-picker-copy {
display: flex;
flex-direction: column;
gap: 12px;
}
.service__page-pricing-section-picker-title,
.service__page-pricing-section-bottom-title,
.service__page-pricing-section-picker-copy > h3 {
margin: 0;
font-family: "Unbounded", Arial, sans-serif;
font-size: clamp(
21px,
calc(21px + (24 - 21) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
line-height: 126%;
font-weight: 600;
}
.service__page-pricing-section-picker-text {
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 140%;
color: var(--gray-color-second);
}
.service__page-pricing-section-filters-shell {
display: flex;
flex-direction: column;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
}
.service__page-pricing-section-filter-row {
display: flex;
align-items: center;
gap: 16px;
}
.service__page-pricing-section-filter-label {
width: clamp(124px, calc(124px + (140 - 124) * (100cqw - 1280px) / (1600 - 1280)), 140px);
color: var(--gray-color-second);
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 140%;
}
.service__page-pricing-section-filter-tabs {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.service__page-pricing-section-filter-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 45px;
border: 1px solid var(--blue-white-color-second);
border-radius: 12px;
padding: 11px 19px;
background: transparent;
font-size: 15px;
line-height: 132%;
white-space: nowrap;
cursor: pointer;
}
.service__page-pricing-section-filter-tab.active {
border-color: var(--blue-color);
background: var(--blue-color);
color: var(--white-color);
font-weight: 700;
}
.service__page-pricing-slider-inner .swiper-slide {
height: auto !important;
}
.service__page-pricing-slider-card {
position: relative;
border-radius: 32px;
height: 100%;
}
.service__page-pricing-slider-card.bg__blue {
background-color: var(--blue-color);
color: var(--white-color);
}
.service__page-pricing-slider-card.bg__white {
background-color: var(--white-color);
}
.service__page-pricing-slider-card.bg__gray {
background-color: var(--blue-white-color);
outline: 1px solid var(--white-color);
}
.service__page-pricing-slider-card.selected {
outline: 3px solid var(--pink-color);
}
.service__page-pricing-slider-card-badge {
position: absolute;
top: -14px;
right: 50%;
transform: translateX(50%);
padding: 8px 16px;
background-color: var(--pink-color);
color: var(--white-color);
border-radius: 12px;
font-family: "Unbounded", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 100%;
text-transform: lowercase;
width: fit-content;
}
.service__page-pricing-slider-card.selected.hit .service__page-pricing-slider-card-badge{
left: 10px;
}
.service__page-pricing-slider-card-badge.tariff {
display: none;
}
.service__page-pricing-slider-card.selected .service__page-pricing-slider-card-badge.tariff {
display: block;
right: 25px;
transform: translateX(0);
}
.service__page-pricing-slider-card.selected.hit .service__page-pricing-slider-card-badge.tariff {
right: 25px;
left: auto;
transform: none;
}
.service__page-pricing-slider-card-top {
padding: clamp(
24px,
calc(24px + (28 - 24) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
padding-bottom: clamp(
20px,
calc(20px + (28 - 20) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
display: flex;
flex-direction: column;
gap: clamp(
16px,
calc(16px + (22 - 16) * (100cqw - 1280px) / (1600 - 1280)),
22px
);
}
.service__page-pricing-slider-card-top-chip {
border-radius: 60px;
background: var(--blue-white-color);
padding: clamp(
4px,
calc(4px + (6 - 4) * (100cqw - 1280px) / (1600 - 1280)),
6px
)
clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
font-size: clamp(
16px,
calc(16px + (18 - 16) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 136%;
font-weight: 700;
width: fit-content;
}
.service__page-pricing-slider-card.bg__blue
.service__page-pricing-slider-card-top-chip {
color: var(--white-color);
background: #ffffff4d;
}
.service__page-pricing-slider-card-top-head {
display: flex;
flex-direction: column;
gap: 8px;
}
.service__page-pricing-slider-card-top-plan {
color: var(--gray-color-second);
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
font-weight: 400;
line-height: 140%;
}
.service__page-pricing-slider-card.bg__blue
.service__page-pricing-slider-card-top-plan {
color: var(--white-color);
opacity: 0.7;
}
.service__page-pricing-slider-card-top-body {
display: flex;
flex-direction: column;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
}
.service__page-pricing-slider-card-top-name {
font-family: "Unbounded", sans-serif;
font-size: clamp(19px, calc(19px + (21 - 19) * (100cqw - 1280px) / (1600 - 1280)), 21px);
font-weight: 600;
line-height: 133%;
}
.service__page-pricing-slider-card-top-desc {
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
line-height: 136%;
color: var(--gray-color);
}
.service__page-pricing-slider-card.bg__blue
.service__page-pricing-slider-card-top-desc {
color: var(--white-color);
opacity: 0.7;
}
.service__page-pricing-slider-card-top-footer {
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 138%;
}
.service__page-pricing-slider-card-top-price {
font-family: "Unbounded", sans-serif;
font-size: clamp(
21px,
calc(21px + (24 - 21) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
font-weight: 600;
line-height: 126%;
}
.service__page-pricing-slider-card-bot {
padding: clamp(
20px,
calc(20px + (28 - 20) * (100cqw - 1280px) / (1600 - 1280)),
28px
)
clamp(
24px,
calc(24px + (28 - 24) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
padding-bottom: clamp(
18px,
calc(18px + (26 - 18) * (100cqw - 1280px) / (1600 - 1280)),
26px
);
position: relative;
display: flex;
flex-direction: column;
gap: clamp(
16px,
calc(16px + (24 - 16) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
}
.service__page-pricing-slider-card-bot::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: var(--blue-white-color);
}
.service__page-pricing-slider-card.bg__gray .service__page-pricing-slider-card-bot::before {
background-color: var(--white-color);
}
.service__page-pricing-slider-card-bot ul.service__page-pricing-slider-card-bot-list {
display: flex;
flex-direction: column;
gap: clamp(
10px,
calc(10px + (12 - 10) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
list-style: none;
padding: 0;
margin: 0;
font-size: clamp(
16px,
calc(16px + (17 - 16) * (100cqw - 1280px) / (1600 - 1280)),
17px
);
line-height: 136%;
letter-spacing: -0.034px;
padding-inline-start: 0;
}
.service__page-pricing-slider-card-bot ul.service__page-pricing-slider-card-bot-list
> li.service__page-pricing-slider-card-bot-list-item {
position: relative;
padding-left: clamp(
26px,
calc(26px + (28 - 26) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
list-style: none;
}
.service__page-pricing-slider-card-bot li.service__page-pricing-slider-card-bot-list-item::before {
content: "";
position: absolute;
top: 3px;
left: 0;
display: block;
width: clamp(
18px,
calc(18px + (20 - 18) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
height: clamp(
18px,
calc(18px + (20 - 18) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/ok-circle-blue2.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.service__page-pricing-slider-card-bot li.service__page-pricing-slider-card-bot-list-item.minus::before {
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/minus-circle.svg) !important;
}
.service__page-pricing-slider-card.bg__blue
li.service__page-pricing-slider-card-bot-list-item::before {
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/ok-circle-white2.svg);
}
.service__page-pricing-slider-card-bot-note {
padding: clamp(
6px,
calc(6px + (10 - 6) * (100cqw - 1280px) / (1600 - 1280)),
10px
)
clamp(
10px,
calc(10px + (14 - 10) * (100cqw - 1280px) / (1600 - 1280)),
14px
);
background-color: #345ec9;
color: var(--white-color);
outline: 1px solid #ffffff4d;
text-align: center;
border-radius: 12px;
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
line-height: 134%;
}
.service__page-pricing-slider-arrows {
display: none;
margin-top: 10px;
}
.service__page-pricing-slider-wrap {
margin-bottom: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.service__page-pricing-section-cta-shell {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
margin-bottom: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.service__page-pricing-section-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 60px;
border-radius: 21px;
background: var(--pink-color);
padding: 17px
clamp(
34px,
calc(34px + (45 - 34) * (100cqw - 1280px) / (1600 - 1280)),
45px
);
color: var(--white-color);
font-family: "Unbounded", Arial, sans-serif;
font-size: clamp(
16px,
calc(16px + (18 - 16) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 144%;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.service__page-pricing-section-cta-button:hover {
background: var(--blue-color);
box-shadow: 0px 0px 20px 0px var(--blue-color-second);
}
.service__page-pricing-section-cta-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.service__page-pricing-section-cta-meta-text {
color: var(--black-color);
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
line-height: 140%;
opacity: 0.6;
}
.service__page-pricing-section-cta-meta-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--black-color);
}
.service__page-pricing-section-facts-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)), 30px);
margin-bottom: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.service__page-pricing-section-fact-box {
display: flex;
align-items: center;
gap: clamp(
10px,
calc(10px + (20 - 10) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
border: 1px solid var(--blue-white-color-second);
border-radius: 24px;
padding: 17px 19px;
}
.service__page-pricing-section-fact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(
48px,
calc(48px + (58 - 48) * (100cqw - 1280px) / (1600 - 1280)),
58px
);
height: clamp(
48px,
calc(48px + (58 - 48) * (100cqw - 1280px) / (1600 - 1280)),
58px
);
flex: 0 0
clamp(
48px,
calc(48px + (58 - 48) * (100cqw - 1280px) / (1600 - 1280)),
58px
);
border-radius: 50%;
background: var(--white-color);
}
.service__page-pricing-section-fact-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.service__page-pricing-section-fact-title {
margin: 0;
font-family: "Unbounded", sans-serif;
font-size: clamp(
18px,
calc(18px + (19 - 18) * (100cqw - 1280px) / (1600 - 1280)),
19px
);
line-height: 138%;
font-weight: 600;
}
.service__page-pricing-section-fact-text {
margin: 0;
font-size: clamp(
16px,
calc(16px + (17 - 16) * (100cqw - 1280px) / (1600 - 1280)),
17px
);
line-height: 138%;
letter-spacing: -0.034px;
opacity: 0.7;
}
.service__page-pricing-section-bottom-note {
display: flex;
flex-direction: column;
gap: clamp(
16px,
calc(16px + (24 - 16) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
border: 1px solid #9ba4ba;
border-radius: 30px;
padding: clamp(
28px,
calc(28px + (30 - 28) * (100cqw - 1280px) / (1600 - 1280)),
30px
)
clamp(
30px,
calc(30px + (32 - 30) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
}
.service__page-pricing-section-bottom-text {
font-size: clamp(
18px,
calc(18px + (20 - 18) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
line-height: 153%;
}
@media(max-width: 1366px) {
.service__page-tariff-blue-card-top {
line-height: 140%;
}
.service__page-pricing-slider-card-top-name {
line-height: 137%;
}
.service__page-pricing-section-picker-text {
line-height: 122%;
}
.service__page-pricing-section-filter-label {
line-height: 136%;
}
.service__page-pricing-slider-card-top-plan {
line-height: 150%;
}
.service__page-pricing-slider-card-top-desc {
line-height: 140%;
}
.service__page-pricing-slider-card-bot ul.service__page-pricing-slider-card-bot-list {
line-height: 140%;
}
.service__page-pricing-section-fact-text {
line-height: 145%;
}
.service__page-pricing-section-bottom-text {
line-height: 141%;
}
}
@media(max-width: 992px) {
.service__page-tariffs-block {
padding: 40px 0;
}
.service__page-tariffs-block::after {
border-radius: 60px;
}
.service__page-tariff-blue-card {
padding: 16px 20px;
gap: 8px;
margin-bottom: 24px;
}
.service__page-tariff-blue-card-mid-title {
font-size: 40px;
line-height: 140%;
}
.service__page-tariff-blue-card-mid {
gap: 16px;
}
.service__page-tariff-blue-card-mid-text-title {
font-size: 17px;
line-height: 140%;
}
.service__page-tariff-blue-card-bot {
line-height: 143%;
}
.service__page-pricing-section-picker-copy {
gap: 8px;
}
h3.service__page-pricing-section-picker-title {
font-size: 19px;
line-height: 140%;
}
.service__page-pricing-section-picker-text {
font-size: 15px;
line-height: 140%;
}
.service__page-pricing-section-filters-shell {
gap: 8px;
}
.service__page-pricing-section-filter-tabs {
margin-right: -48px;
overflow-x: scroll;
flex-wrap: nowrap;
gap: 6px;
}
.service__page-pricing-section-filter-label {
font-size: 15px;
width: 110px;
}
.service__page-pricing-section-filter-tab {
padding: 9px 15px;
font-size: 14px;
line-height: 144%;
}
.service__page-pricing-section-filter-tab {
min-height: 40px;
}
.service__page-pricing-section-picker-shell {
margin-bottom: 24px;
}
.service__page-pricing-slider-inner .swiper-slide {
opacity: 0;
transition: 0.3s;
}
.service__page-pricing-slider-inner .swiper-slide-active,
.service__page-pricing-slider-inner .swiper-slide-next {
opacity: 1;
}
.service__page-pricing-slider-card-top {
padding: 18px 20px 14px 20px;
}
.service__page-pricing-slider-card-bot {
padding: 18px 20px 16px 20px;
gap: 16px;
}
.service__page-pricing-slider-card-top-chip {
padding: 3px 12px;
font-size: 15px;
line-height: 140%;
}
.service__page-pricing-slider-card-top-plan {
font-size: 14px;
}
.service__page-pricing-slider-card-top-name {
font-size: 18px;
line-height: 142%;
}
.service__page-pricing-slider-card-top-desc {
font-size: 14px;
line-height: 143%;
}
.service__page-pricing-slider-card-top-footer {
font-size: 16px;
}
.service__page-pricing-slider-card-top-price {
font-size: 19px;
line-height: 137%;
}
.service__page-pricing-slider-card-bot ul.service__page-pricing-slider-card-bot-list {
font-size: 15px;
}
.service__page-pricing-slider-card-bot li.service__page-pricing-slider-card-bot-list-item::before {
top: 1px;
}
.service__page-pricing-slider-arrows {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 10px;
min-height: 26px;
}
.service__page-pricing-slider-notify {
color: var(--gray-light-color-second);
text-align: center;
font-family: 'Onest';
font-size: 12px;
line-height: 115%;
}
.service__page-pricing-slider-arr {
position: relative;
display: block;
width: 25px;
height: 25px;
}
.service__page-pricing-slider-arr::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
display: block;
width: 30px;
height: 30px;
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/arrow-left-circle-white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.service__page-pricing-slider-arr.next::before {
transform: translateY(-50%) rotate(180deg);
left: auto;
right: 0;
}
.service__page-pricing-slider-arr.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
.service__page-pricing-section-cta-button {
padding: 20px 34px;
font-size: 14px;
line-height: 144%;
}
.service__page-pricing-section-facts-row {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 20px;
}
.service__page-pricing-section-fact-box {
padding: 13px 16px;
}
.service__page-pricing-section-fact-title {
font-size: 17px;
}
.service__page-pricing-section-fact-text {
font-size: 15px;
line-height: 137%;
}
.service__page-pricing-section-bottom-note {
padding: 20px 24px;
gap: 12px;
}
.service__page-pricing-section-bottom-title {
font-size: 19px;
}
.service__page-pricing-section-bottom-text {
font-size: 16px;
line-height: 138%;
}
}
@media(max-width: 650px) {
.service__page-tariff-blue-card-mid {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.service__page-pricing-section-filter-tabs {
margin-right: -23px;
}
.service__page-pricing-section-filter-row {
display: block;
}
.service__page-pricing-section-filter-label {
margin-bottom: 4px;
display: block;
}
}