/* =========================== Shared variables =========================== */ :root { --card-1: #df1683; --card-2: #65b2e8; --nav: #65b2e8; --navText: #fff; --border: rgb(255 255 255 / 35%); --shadow: 0 10px 26px rgb(0 0 0 / 25%); --title: #fff; --text: rgb(255 255 255 / 92%); --pad: 14px; --gap: 18px; --pink: #df1683; --blue: #65b2e8; --ink: #2c353b; --card-gap: 18px; } /* =========================== Services slider (svc) =========================== */ .svc-shell { position: relative; width: 100%; padding-top: 44px; box-sizing: border-box; } .svc-controls { position: absolute; top: 6px; left: 6px; z-index: 5; display: flex; gap: 8px; } .svc-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; touch-action: pan-y; scrollbar-width: thin; will-change: scroll-position; } .svc-wrap.is-dragging { cursor: grabbing; scroll-behavior: auto; touch-action: none; } .svc-wrap.is-dragging .svc-track { scroll-snap-type: none; } .svc-track { display: flex; gap: var(--gap); padding: 6px var(--pad) 18px; padding-right: 0; scroll-snap-type: x mandatory; will-change: transform; } .svc-endspacer { flex: 0 0 var(--pad); } .svc-card { display: flex; flex: 0 0 78%; flex-direction: column; max-width: 220px; aspect-ratio: 1; padding: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); scroll-snap-align: start; box-sizing: border-box; contain: layout paint; } .svc-card:nth-child(odd) { background: var(--card-1); } .svc-card:nth-child(even) { background: var(--card-2); } .svc-card h3, .svc-card p { font-family: Montserrat, system-ui, sans-serif; } .svc-card h3 { margin: 0 0 14px; color: var(--title); font-size: 20px; font-weight: 400; line-height: 1.15; text-shadow: 0 0 6px #fff; } .svc-card p { margin: 0; padding-right: 4px; overflow: auto; color: var(--text); font-size: 14px; line-height: 1.6; } .svc-card a { color: #fff; text-decoration: none; } .svc-card a:hover, .svc-card a:focus-visible { text-decoration: underline; } .svc-links a { display: block; margin-bottom: 8px; } .svc-links a:last-child { margin-bottom: 0; } .nav-btn { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--nav); color: var(--navText); box-shadow: 0 10px 22px rgb(0 0 0 / 22%); cursor: pointer; will-change: transform, opacity; } .nav-btn .nav-ic { width: 10px; height: 10px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(135deg); } .nav-right .nav-ic { transform: rotate(-45deg); } .nav-btn.is-disabled { opacity: .35; pointer-events: none; } .svc-wrap::-webkit-scrollbar { height: 8px; } .svc-wrap::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 28%); border-radius: 999px; } /* =========================== Testimonials slider (uhc) =========================== */ .uhc-testimonials { position: relative; width: 100%; box-sizing: border-box; padding-top: 54px; } /* Arrow controls */ .uhc-testimonials__controls { position: absolute; top: 0; left: 0; z-index: 2; display: flex; gap: 8px; } .uhc-testimonials__button { width: 38px; height: 38px; border: 1px solid rgba(101, 178, 232, .45); border-radius: 10px; background: var(--blue); color: #ffffff; box-shadow: 0 7px 18px rgba(0,0,0,.16); cursor: pointer; display: inline-grid; place-items: center; padding: 0; font-size: 22px; line-height: 1; transition: transform .2s ease, opacity .2s ease; will-change: transform, opacity; } .uhc-testimonials__button--prev { background: var(--pink); border-color: rgba(223, 22, 131, .45); } .uhc-testimonials__button:hover, .uhc-testimonials__button:focus-visible { transform: translateY(-2px); } /* Main scroll area */ .uhc-testimonials__viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; will-change: scroll-position; } .uhc-testimonials__viewport::-webkit-scrollbar { display: none; } .uhc-testimonials__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } .uhc-testimonials__track { display: flex; align-items: stretch; gap: var(--card-gap); padding: 5px 2px 18px; will-change: transform; } .uhc-testimonial-card { flex: 0 0 calc((100% - (var(--card-gap) * 2)) / 3); min-width: 0; min-height: 260px; box-sizing: border-box; display: flex; flex-direction: column; padding: 22px 20px 18px; border: 3px solid var(--pink); border-radius: 20px; background: #ffffff; box-shadow: 0 8px 24px rgba(26, 42, 55, .08); scroll-snap-align: start; contain: layout paint; } .uhc-testimonial-card:nth-child(even) { border-color: var(--blue); } .uhc-testimonial-card__stars { margin: 0 0 14px; color: #ee821d; font-size: 20px; letter-spacing: 2px; line-height: 1; } .uhc-testimonial-card blockquote { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink); font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.46; -webkit-box-orient: vertical; -webkit-line-clamp: 8; } .uhc-testimonial-card__author { margin: auto 0 0; padding-top: 16px; color: var(--ink); font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; line-height: 1.4; } .uhc-testimonial-card__author strong { font-weight: 700; } .uhc-testimonial-card__author span { color: #667178; font-weight: 400; } @media (max-width: 980px) { .uhc-testimonial-card { flex-basis: calc((100% - var(--card-gap)) / 2.4); min-height: 300px; padding: 22px 19px 18px; } } @media (max-width: 640px) { .uhc-testimonials { padding-top: 50px; } .uhc-testimonial-card { flex-basis: 72%; min-height: 290px; padding: 20px 18px 18px; } .uhc-testimonial-card__stars { margin-bottom: 14px; font-size: 19px; } .uhc-testimonial-card blockquote { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 8; } .uhc-testimonial-card__author { padding-top: 16px; font-size: 13px; } }
top of page
bottom of page