.darabi-page {
font-family: "Lato", Arial, sans-serif;
color: #4a4d51;
background: #ffffff;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
/* `overflow-x: clip` hides horizontal overflow WITHOUT creating a new
scroll container — `position: sticky` on .darabi-header still works
because there's no scroll context between it and the viewport. */
overflow-x: clip;
}
.darabi-page *,
.darabi-page *::before,
.darabi-page *::after {
box-sizing: inherit;
}
.darabi-page a {
color: inherit;
text-decoration: none;
}
.darabi-page img {
max-width: 100%;
height: auto;
display: block;
}
.darabi-page strong {
font-weight: 700;
color: #2f3236;
}
.darabi-page ul {
list-style: none;
margin: 0;
padding: 0;
}
.darabi-page h1, .darabi-page h2, .darabi-page h3, .darabi-page h4, .darabi-page h5, .darabi-page h6,
.darabi-page .darabi-heading {
font-family: "Jost", Arial, sans-serif;
}
.darabi-page .darabi-section-label {
font-family: "Lato", Arial, sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
margin: 0;
width: 100%;
/* Figma gradient (text fill): 90deg, #013E55 30.77% → #7CC6D6 55.77% */
background: linear-gradient(90deg, #013E55 30.77%, #7CC6D6 55.77%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Mobile section labels — Figma: 11px, left, SemiBold, tighter gradient (applies site-wide) */
@media (max-width: 768px) {
.darabi-page .darabi-section-label {
font-weight: 600;
font-size: 11px;
line-height: 16px;
text-align: left;
background: linear-gradient(90deg, #013E55 9.37%, #7CC6D6 55.77%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.darabi-page .darabi-br--lg {
display: none;
}
@media (min-width: 1024px) {
.darabi-page .darabi-br--lg {
display: block;
}
}
/* Single source of truth for every section container: wide content area (1428) + token gutter.
box-sizing:content-box keeps max-width as the CONTENT width, padding sits outside it. */
.darabi-page .darabi-container {
box-sizing: content-box;
max-width: var(--darabi-content-max);
margin-inline: auto;
padding-left: var(--darabi-section-px);
padding-right: var(--darabi-section-px);
}
@media screen and (max-width: 768px) {
.darabi-page .darabi-container {
padding-left: 24px;
padding-right: 24px;
}
}
.darabi-page .darabi-container--widest {
max-width: 1680px;
}
.darabi-page .darabi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
border-radius: 32px;
padding: 12px 20px;
cursor: pointer;
border: none;
transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
white-space: nowrap;
}
.darabi-page .darabi-btn:hover {
opacity: 1;
}
.darabi-page .darabi-btn--primary:hover {
background: rgba(1, 63, 86, 0.7);
color: #ffffff;
}
.darabi-page .darabi-btn--outline-white:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.85);
}
.darabi-page .darabi-btn--outline-dark:hover {
background: rgba(1, 63, 86, 0.7);
border-color: rgba(1, 63, 86, 0.7);
color: #ffffff;
}
@media (max-width: 768px) {
.darabi-page .darabi-btn {
font-size: 14px;
line-height: 20px;
padding: 8px 18px;
}
}
.darabi-page .darabi-btn--primary {
background: #013E55;
color: #ffffff;
}
.darabi-page .darabi-btn--outline-white {
background: transparent;
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.darabi-page .darabi-btn--outline-white:hover {
background: rgba(255, 255, 255, 0.12);
opacity: 1;
}
.darabi-page .darabi-btn--outline-dark {
background: transparent;
color: #16384a;
border: 1px solid rgba(1, 63, 86, 0.5);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.darabi-page .darabi-btn--outline-dark:hover {
background: transparent;
color: rgba(1, 63, 86, 0.5);
border-color: rgba(1, 63, 86, 0.5);
opacity: 1;
}
.darabi-page .darabi-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.admin-bar .darabi-page .darabi-header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .darabi-page .darabi-header {
top: 46px;
}
}
.darabi-page .darabi-header__inner {
max-width: 1640px;
margin: 0 auto;
padding: 0 50px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
@media (max-width: 1440px) {
.darabi-page .darabi-header__inner {
padding: 0 32px;
gap: 16px;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-header__inner {
padding: 0 20px;
height: 64px;
}
}
.darabi-page .darabi-header__logo-link {
display: flex;
flex-shrink: 0;
}
.darabi-page .darabi-header__logo {
height: 52px;
width: auto;
}
@media (max-width: 1024px) {
.darabi-page .darabi-header__logo {
height: 42px;
}
}
.darabi-page .darabi-header__nav {
display: flex;
align-items: center;
gap: 35px;
flex-wrap: nowrap;
}
@media (max-width: 1440px) {
.darabi-page .darabi-header__nav {
gap: 22px;
}
}
@media (max-width: 1280px) {
.darabi-page .darabi-header__nav {
gap: 14px;
}
}
@media (max-width: 1200px) {
.darabi-page .darabi-header__nav {
position: fixed;
inset: 0;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
background: #ffffff;
padding: 100px 32px 40px;
gap: 0;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 99;
overflow-y: auto;
}
.darabi-page .darabi-header__nav.is-open {
transform: translateX(0);
}
}
.darabi-page .darabi-header__nav-link {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #013e55;
white-space: nowrap;
transition: color 0.15s;
}
.darabi-page .darabi-header__nav-link:hover {
color: #5e93a8;
}
.darabi-page .darabi-header__nav-item {
position: relative;
display: inline-flex;
align-items: center;
}
.darabi-page .darabi-header__nav-item--has-dropdown::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 14px;
pointer-events: none;
}
.darabi-page .darabi-header__nav-item--has-dropdown:hover::after,
.darabi-page .darabi-header__nav-item--has-dropdown:focus-within::after {
pointer-events: auto;
}
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 12px;
pointer-events: none;
}
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu:hover::after,
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu:focus-within::after {
pointer-events: auto;
}
.darabi-page .darabi-header__nav-link--has-dropdown {
display: inline-flex;
align-items: center;
gap: 6px;
}
.darabi-page .darabi-header__nav-caret {
display: block;
transition: transform 0.2s ease;
}
.darabi-page .darabi-header__dropdown {
position: absolute;
top: calc(100% + 12px);
left: -16px;
margin-top: 0;
min-width: 253px;
background: #ffffff;
border: 1px solid #DADEE3;
border-radius: 4px;
padding: 8px 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 100;
box-shadow: 0 8px 24px rgba(1, 63, 86, 0.08);
}
.darabi-page .darabi-header__nav-item--has-dropdown:hover .darabi-header__dropdown,
.darabi-page .darabi-header__nav-item--has-dropdown:focus-within .darabi-header__dropdown,
.darabi-page .darabi-header__nav-item.is-open .darabi-header__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.darabi-page .darabi-header__nav-item--has-dropdown:hover .darabi-header__nav-caret,
.darabi-page .darabi-header__nav-item.is-open .darabi-header__nav-caret {
transform: rotate(180deg);
}
.darabi-page .darabi-header__dropdown-item {
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 20px;
color: #394452;
padding: 8px 16px;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.darabi-page .darabi-header__dropdown-item:hover {
background: #F5F7F9;
color: #013E55;
}
.darabi-page .darabi-header__dropdown-item-wrap {
position: relative;
display: flex;
flex-direction: column;
}
.darabi-page .darabi-header__dropdown-item--has-submenu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.darabi-page .darabi-header__submenu-caret {
display: block;
flex-shrink: 0;
}
.darabi-page .darabi-header__submenu {
position: absolute;
top: -9px;
left: 100%;
margin-left: 0;
min-width: 253px;
background: #ffffff;
border: 1px solid #DADEE3;
border-radius: 4px;
padding: 8px 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateX(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 101;
box-shadow: 0 8px 24px rgba(1, 63, 86, 0.08);
}
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu:hover > .darabi-header__submenu,
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu:focus-within > .darabi-header__submenu,
.darabi-page .darabi-header__dropdown-item-wrap.is-open > .darabi-header__submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.darabi-page .darabi-header__dropdown-item-wrap--has-submenu:hover > .darabi-header__dropdown-item--has-submenu {
color: #7CC6D6;
}
@media (max-width: 1200px) {
.darabi-page .darabi-header__nav-link {
font-size: 18px;
padding: 14px 0;
width: 100%;
border-bottom: 1px solid #eef1f2;
}
.darabi-page .darabi-header__nav-item {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.darabi-page .darabi-header__dropdown {
position: static;
margin: 0;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0 0 8px 12px;
min-width: 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.darabi-page .darabi-header__nav-item.is-open .darabi-header__dropdown {
display: flex;
}
.darabi-page .darabi-header__dropdown-item {
font-size: 15px;
padding: 10px 0;
}
.darabi-page .darabi-header__submenu {
position: static;
margin: 0;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0 0 4px 12px;
min-width: 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.darabi-page .darabi-header__dropdown-item-wrap.is-open > .darabi-header__submenu {
display: flex;
}
}
.darabi-page .darabi-header__actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
@media (max-width: 1440px) {
.darabi-page .darabi-header__actions {
gap: 4px;
}
}
@media (max-width: 1200px) {
.darabi-page .darabi-header__actions {
display: none;
}
}
.darabi-page .darabi-header__action-link {
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #013e55;
white-space: nowrap;
padding: 8px 18px;
transition: color 0.15s;
}
@media (max-width: 1440px) {
.darabi-page .darabi-header__action-link {
padding: 8px 10px;
}
}
.darabi-page .darabi-header__action-link {
border-radius: 32px;
transition: color 0.15s, background 0.15s;
}
.darabi-page .darabi-header__action-link:hover {
color: #014A65;
background: rgba(1, 63, 86, 0.1);
}
.darabi-page .darabi-header__cta {
font-size: 14px;
line-height: 20px;
padding: 8px 18px;
background: #013E55;
border-radius: 32px;
}
/* Awards CTA now inherits the medium base — no override needed. */
.darabi-page .darabi-header__hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 101;
flex-shrink: 0;
}
@media (max-width: 1200px) {
.darabi-page .darabi-header__hamburger {
display: flex;
}
}
.darabi-page .darabi-header__hamburger-bar {
display: block;
width: 24px;
height: 2px;
background: #16384a;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.darabi-page .darabi-header__hamburger[aria-expanded=true] .darabi-header__hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.darabi-page .darabi-header__hamburger[aria-expanded=true] .darabi-header__hamburger-bar:nth-child(2) {
opacity: 0;
}
.darabi-page .darabi-header__hamburger[aria-expanded=true] .darabi-header__hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.darabi-page .darabi-hero {
position: relative;
min-height: 680px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #01070f;
}
.darabi-page .darabi-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.darabi-page .darabi-hero__overlay {
position: absolute;
inset: 0;
background: rgba(1, 7, 15, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 1;
}
.darabi-page .darabi-hero__content {
position: relative;
z-index: 2;
box-sizing: content-box;
max-width: var(--darabi-content-max);
width: 100%;
padding-top: var(--darabi-section-py);
padding-bottom: var(--darabi-section-py);
padding-left: var(--darabi-section-px);
padding-right: var(--darabi-section-px);
}
.darabi-page .darabi-hero__title {
font-family: "Jost", Arial, sans-serif;
font-weight: 600;
color: #ebeef2;
font-size: clamp(36px, 4.8vw, 69px);
line-height: 1;
margin: 0 0 20px;
}
.darabi-page .darabi-hero__subtitle {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
color: #ebeef2;
font-size: clamp(16px, 1.8vw, 23px);
line-height: 28px;
margin: 0 auto;
max-width: 628px;
}
.darabi-page .darabi-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 35px;
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 28px;
color: #ffffff;
background: transparent;
border: 1px solid #a5abb3;
border-radius: 32px;
padding: 14px 25px;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.darabi-page .darabi-hero__cta:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.08);
}
/* ── Mobile hero — matches Figma 6428-34240 (390px frame).
Placed AFTER the base hero rules so these overrides win at ≤768px
(a media query adds no specificity, so source order decides). ── */
@media (max-width: 768px) {
.darabi-page .darabi-hero {
min-height: calc(100vh - 64px); /* full screen height */
min-height: calc(100svh - 64px); /* svh: excludes mobile browser UI so the hero always fits */
}
.darabi-page .darabi-hero__content {
padding-left: 50px; /* Figma mobile: px-50 (hero-specific, keeps the 24px services gutter intact) */
padding-right: 50px;
}
.darabi-page .darabi-hero__title {
font-size: 45px; /* Figma mobile: Jost SemiBold 45/45 */
line-height: 45px;
}
.darabi-page .darabi-hero__subtitle {
font-size: 15px; /* Figma mobile: Jost Regular 15/17 */
line-height: 17px;
}
.darabi-page .darabi-hero__cta {
font-size: 14px; /* Figma mobile: Lato SemiBold 14/20 */
line-height: 20px;
border-radius: 25px; /* Figma mobile: button radius 25px (padding comes from global .darabi-btn) */
}
}
.darabi-page .darabi-value {
position: relative;
text-align: left;
padding-top: calc(var(--darabi-section-py) * 2);
padding-bottom: var(--darabi-section-py);
}
.darabi-page .darabi-value .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-content-gap);
}
.darabi-page .darabi-value__textblock {
display: flex;
flex-direction: column;
gap: var(--darabi-content-gap);
width: 100%;
}
.darabi-page .darabi-value__text > :first-child { margin-top: 0; }
.darabi-page .darabi-value__text > :last-child { margin-bottom: 0; }
.darabi-page .darabi-value__text p { margin: 0; }
.darabi-page .darabi-value .darabi-btn {
align-self: center; /* button stays centered while heading/text run full-width */
}
.darabi-page .darabi-value__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: clamp(32px, 3.4vw, 57px);
line-height: 1.12;
width: 100%;
margin: 0;
/* Figma gradient: to left, #7CC6D6 25% → #013E55 176% */
background: linear-gradient(to left, #7CC6D6 25%, #013E55 176%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.darabi-page .darabi-value__text {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
color: rgba(1, 63, 86, 0.7);
font-size: clamp(16px, 1.6vw, 23px);
line-height: 36px;
margin: 0;
width: 100%;
}
.darabi-page .darabi-value .darabi-btn {
margin-top: 0;
}
/* ── Mobile About/value section — matches Figma 6428-34246 (390px frame).
Placed AFTER the base rules so these overrides win at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-value {
padding-top: calc(var(--darabi-section-py) * 2); /* Figma mobile: py-75 */
}
.darabi-page .darabi-value .darabi-container {
gap: 75px; /* Figma mobile: text block ↔ button */
}
.darabi-page .darabi-value__textblock {
gap: 35px; /* Figma mobile: heading ↔ paragraph */
}
.darabi-page .darabi-value__heading {
font-weight: 600; /* Figma mobile: Jost SemiBold */
font-size: 29px; /* Figma mobile: 29/32 */
line-height: 32px;
}
.darabi-page .darabi-value__text {
font-family: "Lato", Arial, sans-serif; /* Figma mobile: Lato Regular (not Jost) */
font-size: 11px; /* Figma mobile: 11/16 (Paragraph XSmall) */
line-height: 16px;
}
}
.darabi-page .darabi-team {
padding: var(--darabi-section-py) 0;
}
.darabi-page .darabi-team .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-content-gap);
}
.darabi-page .darabi-team__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.08; /* 52/48 ≈ 1.08 — Figma F1/Heavy */
text-align: center;
margin: 0;
}
.darabi-page .darabi-team__row {
display: flex;
gap: var(--darabi-grid-gap);
align-items: center; /* Figma items-center */
}
@media (max-width: 1024px) {
.darabi-page .darabi-team__row {
flex-direction: column;
align-items: flex-start;
}
}
.darabi-page .darabi-team__row--photo-right {
margin-top: 80px;
gap: 100px;
align-items: center;
}
@media (max-width: 1279px) {
.darabi-page .darabi-team__row--photo-right {
margin-top: var(--darabi-row-gap);
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-team__row--photo-right {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--darabi-grid-gap); /* responsive: 36 tablet / 24 mobile */
}
}
.darabi-page .darabi-team__photo-wrap {
flex-shrink: 0;
}
@media (max-width: 1024px) {
.darabi-page .darabi-team__photo-wrap {
width: 100%;
max-width: 480px;
}
}
.darabi-page .darabi-team__photo {
width: 100%;
height: auto;
border-radius: 10px;
object-fit: cover;
}
.darabi-page .darabi-team__photo-wrap {
flex-shrink: 0;
}
.darabi-page .darabi-team__photo--darabi {
width: 563px;
aspect-ratio: 563 / 564;
}
.darabi-page .darabi-team__photo--taylor {
width: 506px;
aspect-ratio: 506 / 507;
}
@media (max-width: 1280px) {
.darabi-page .darabi-team__photo--darabi { width: 440px; }
.darabi-page .darabi-team__photo--taylor { width: 400px; }
}
@media (max-width: 1024px) {
.darabi-page .darabi-team__photo--darabi,
.darabi-page .darabi-team__photo--taylor { width: 100%; max-width: 560px; }
.darabi-page .darabi-team__photo-wrap { width: 100%; }
}
.darabi-page .darabi-team__bio {
flex: 1;
color: #2C3A4B;
font-family: "Lato", Arial, sans-serif;
font-size: 16px;
line-height: 24px;
}
.darabi-page .darabi-team__bio p { margin: 0 0 1em; }
.darabi-page .darabi-team__bio p:last-of-type { margin-bottom: 25px; }
.darabi-page .darabi-team__bio-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 28px;
color: rgba(1, 63, 86, 0.8);
text-decoration: underline;
text-underline-offset: 4px;
align-self: flex-start;
transition: color 0.15s;
}
.darabi-page .darabi-team__bio-link:hover { color: #013E55; }
.darabi-page .darabi-team__bio-link::after {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: url("images/arrow-right.svg") no-repeat center / contain;
mask: url("images/arrow-right.svg") no-repeat center / contain;
flex-shrink: 0;
}
/* ── Mobile team section — matches Figma 6428-34251 (390px frame).
After the base rules so these overrides win at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-team .darabi-container {
gap: 0; /* per-element margins below control spacing */
}
.darabi-page .darabi-team__heading {
font-weight: 600; /* Figma mobile: Jost SemiBold */
font-size: 23px; /* Figma mobile: 23/24 */
line-height: 24px;
text-align: left;
margin-top: 10px; /* gap: label → heading */
}
.darabi-page .darabi-team__row {
gap: 50px; /* gap: photo → bio (stacked) */
}
.darabi-page .darabi-team__row--photo-left {
margin-top: 50px; /* gap: heading → photo */
}
.darabi-page .darabi-team__row--photo-right {
gap: 50px; /* gap: photo → bio (stacked) */
margin-top: 150px; /* gap: Dr row → Taylor row */
}
.darabi-page .darabi-team__bio {
font-size: 13px; /* Figma mobile: Lato 13/20 */
line-height: 20px;
}
.darabi-page .darabi-team__bio-link {
font-size: 14px; /* Figma mobile: Lato SemiBold 14/20 */
line-height: 20px;
gap: 4px;
}
.darabi-page .darabi-team__bio-link::after {
width: 16px; /* Figma mobile: arrow icon 16px */
height: 16px;
}
}
.darabi-page .darabi-awards {
padding: var(--darabi-section-py) 0;
}
.darabi-page .darabi-awards__inner {
display: flex;
gap: 75px;
align-items: center;
padding: 75px 100px;
border-radius: 15px;
}
@media (max-width: 1024px) {
.darabi-page .darabi-awards__inner {
flex-direction: column;
gap: 40px;
padding: 48px 40px;
text-align: center;
}
}
@media (max-width: 768px) {
.darabi-page .darabi-awards__inner { padding: 75px 0; }
}
.darabi-page .darabi-awards__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 36px; /* + ~14.4px p margin-bottom ≈ 50px visual, per Figma */
}
.darabi-page .darabi-awards__statement {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: clamp(24px, 2.7vw, 40px);
line-height: 1.1; /* Figma F2 40/44 ≈ 1.1 */
color: rgba(1, 63, 86, 0.8);
margin: 0;
}
.darabi-page .darabi-awards__statement strong {
font-weight: 700;
color: rgba(1, 63, 86, 0.9);
}
.darabi-page .darabi-awards__statement strong:nth-of-type(2) {
color: #013E55;
}
.darabi-page .darabi-awards__statement p { margin: 0; }
.darabi-page .darabi-awards__sub {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: clamp(18px, 1.9vw, 28px);
line-height: 1.14; /* Figma F4 28/32 */
color: rgba(1, 63, 86, 0.7);
margin: 0;
}
.darabi-page .darabi-awards__badges-col {
flex-shrink: 0;
width: 273px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
@media (max-width: 768px) {
.darabi-page .darabi-awards__badges-col { width: auto; }
}
.darabi-page .darabi-awards__badges-row {
display: flex;
gap: 50px;
align-items: center;
}
.darabi-page .darabi-awards__badge {
display: flex;
}
.darabi-page .darabi-awards__badge-img {
display: block;
object-fit: contain;
}
.darabi-page .darabi-awards__badge-img--left {
width: 100px;
height: 146px;
}
.darabi-page .darabi-awards__badge-img--right {
width: 123px;
height: 160px;
}
/* ── Mobile awards — matches Figma 6428-34275 (390px frame). After base rules so it wins at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-awards__inner {
gap: 75px; /* content block → badges block */
text-align: left; /* statement/sub left; badges + button stay centered via flex */
}
.darabi-page .darabi-awards__content {
gap: 50px; /* statement → sub */
}
.darabi-page .darabi-awards__statement {
font-size: 23px; /* Figma: Jost 23/24 */
line-height: 24px;
}
.darabi-page .darabi-awards__sub {
font-size: 20px; /* Figma: Jost 20/24 */
line-height: 24px;
}
}
.darabi-page .darabi-services {
padding: var(--darabi-section-py) 0;
}
@media (max-width: 768px) {
/* Section is flat white on mobile; the cyan glow is anchored to the paragraph below
(Figma positions it as a % of the frame height, which is unreliable here because the
real section is much taller than the 1239px design frame). */
.darabi-page .darabi-services {
background: #FFFFFF;
}
}
.darabi-page .darabi-services .darabi-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.darabi-page .darabi-services__header {
display: flex;
flex-direction: column;
gap: 25px;
text-align: center;
}
.darabi-page .darabi-services__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.08;
margin: 0;
}
.darabi-page .darabi-services__intro p { margin: 0 0 1em; font-size: 16px; line-height: 24px; }
.darabi-page .darabi-services__intro p:last-child { margin-bottom: 0; }
.darabi-page .darabi-services__intro {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
color: #2C3A4B;
font-size: 16px;
line-height: 24px;
margin: 0;
text-align: left;
}
@media screen and (min-width: 769px) {
.darabi-page .darabi-services__intro {
font-size: 11px;
line-height: 16px;
text-align: center;
}
}
/* ── Mobile services header — matches Figma 6428-35688 (390px frame). After base rules so it wins at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-services__header {
gap: 10px; /* label → heading */
text-align: left; /* whole header left-aligned */
}
.darabi-page .darabi-services__heading {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 18px; /* Figma: 18/20 */
line-height: 20px;
}
.darabi-page .darabi-services__intro {
font-size: 11px; /* Figma: Lato 11/16 */
line-height: 16px;
text-align: left;
margin-top: 15px; /* heading → intro = 10px gap + 15px = 25px */
/* Figma cyan glow (#7CC6D6 → #BEE2EB → white), anchored to the paragraph box so it
always sits behind the intro text regardless of section height. */
background: radial-gradient(46% 62% at 50% 50%, rgba(124,198,214,0.55) 0%, rgba(190,226,235,0.32) 45%, rgba(255,255,255,0) 80%);
}
}
.darabi-page .darabi-services__tabs {
display: inline-flex;
align-self: center;
gap: 10px;
padding: 5px;
border-radius: 32px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.darabi-page .darabi-services__tabs {
padding: 0;
}
}
@media screen and (min-width: 769px) {
.darabi-page .darabi-services__tabs {
background: #ffffff;
}
}
.darabi-page .darabi-services__tab {
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
cursor: pointer;
padding: 12px 16px;
border-radius: 32px;
background: #ffffff;
color: #013E55;
border: 1px solid #013F561A;
appearance: none;
-webkit-appearance: none;
outline: none;
box-shadow: none;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
@media screen and (min-width: 769px) {
.darabi-page .darabi-services__tab {
border: none;
}
}
.darabi-page .darabi-services__tab:focus,
.darabi-page .darabi-services__tab:focus-visible,
.darabi-page .darabi-services__tab:active {
outline: none;
box-shadow: none;
}
.darabi-page .darabi-services__tab:hover {
background: rgba(1, 63, 86, 0.1);
color: rgba(1, 63, 86, 0.8);
}
.darabi-page .darabi-services__tab--active,
.darabi-page .darabi-services__tab--active:hover,
.darabi-page .darabi-services__tab--active:focus {
background: #013E55;
color: #ffffff;
}
@media (max-width: 768px) {
.darabi-page .darabi-services__tabs {
justify-content: center;
}
.darabi-page .darabi-services__tab {
width: auto;
white-space: normal;
text-align: center;
font-size: 14px;
line-height: 20px;
padding: 8px 10px;
}
}
.darabi-page .darabi-services__slider-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
}
.darabi-page .darabi-services__slider {
position: relative;
width: 100%;
overflow: hidden;
}
@media (max-width: 1729px) {
.darabi-page .darabi-services__slider { overflow: visible; }
}
.darabi-page .darabi-services__track {
display: flex;
align-items: stretch;
}
.darabi-page .darabi-services__panel {
position: relative;
width: 1428px; /* desktop: full design width */
height: auto;
min-height: 500px;
border-radius: 25px;
overflow: hidden;
display: flex;
align-items: stretch;
background-color: #39464f;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
@media (max-width: 1728px) {
/* Reserve 150px on the right so the next slide always peeks (≈100px after 50px spaceBetween). */
.darabi-page .darabi-services__panel { width: calc(100vw - 150px); }
}
@media (max-width: 1024px) {
.darabi-page .darabi-services__panel { width: calc(100vw - 100px); }
}
@media (max-width: 768px) {
.darabi-page .darabi-services__panel { width: calc(100vw - 70px); }
.darabi-page .darabi-services__panel { border-radius: 18px; }
}
/* Dark scrim over the full-bleed panel photo (Figma look) — overlay-on-image layout only, mobile untouched */
@media (min-width: 769px) {
.darabi-page .darabi-services__panel::before {
content: "";
position: absolute;
inset: 0;
background: rgba(2, 26, 35, 0.4);
pointer-events: none;
}
}
.darabi-page .darabi-services__panel-overlay {
position: relative;
width: 492px;
max-width: 100%;
margin: 24px;
background: rgba(44, 65, 75, 0.5);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
border-radius: 25px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
align-self: flex-start; /* Figma: items-start, overlay sits at top-left */
}
@media (max-width: 1024px) {
.darabi-page .darabi-services__panel-overlay {
width: 492px;
margin: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
@media (max-width: 768px) {
.darabi-page .darabi-services__panel-overlay {
width: 492px;
padding: 24px;
border-radius: 18px;
}
}
.darabi-page .darabi-services__panel-body {
display: flex;
flex-direction: column;
gap: 25px;
}
.darabi-page .darabi-services__panel-header {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.darabi-page .darabi-services__panel-title {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #ffffff;
font-size: 33px;
line-height: 36px;
margin: 0;
flex: 1;
}
@media (max-width: 768px) {
.darabi-page .darabi-services__panel-title { font-size: 26px; line-height: 30px; }
}
.darabi-page .darabi-services__panel-arrow {
color: #ffffff;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: opacity 0.15s ease;
}
.darabi-page a.darabi-services__panel-arrow:hover { opacity: 0.7; }
.darabi-page .darabi-services__panel-arrow svg {
display: block;
width: 24px;
height: 24px;
}
.darabi-page .darabi-services__panel-text {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #DADEE3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.darabi-page .darabi-services__panel-text { -webkit-line-clamp: 5; }
}
.darabi-page .darabi-services__panel-text p { margin: 0 0 1em; }
.darabi-page .darabi-services__panel-text p:last-child { margin-bottom: 0; }
.darabi-page .darabi-services__panel-link {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #DADEE3;
text-decoration: underline;
text-underline-offset: 2px;
align-self: flex-start;
transition: color 0.15s;
}
.darabi-page .darabi-services__panel-link:hover { color: #ffffff; }
/* ── Desktop breakpoints to match Figma 1728 / 1440 / 1200 (tablet <=1024 & mobile untouched) ── */
@media (min-width: 1025px) {
/* 1200 & 1440 frames: wide text column, smaller type, full text (no clamp) */
.darabi-page .darabi-services__panel { min-height: 552px; } /* 1200 frame card height */
.darabi-page .darabi-services__panel-overlay {
width: 727px;
margin: 50px;
padding: 30px;
gap: 35px;
}
.darabi-page .darabi-services__panel-title { font-size: 28px; line-height: 32px; }
.darabi-page .darabi-services__panel-text {
font-size: 13px;
line-height: 20px;
-webkit-line-clamp: unset; /* show the whole description, no truncation */
display: block;
overflow: visible;
}
}
@media (min-width: 1201px) {
.darabi-page .darabi-services__panel { min-height: 706px; } /* 1440 frame card height */
}
@media (min-width: 1601px) {
/* 1728 frame: narrow text column, larger type, taller card */
.darabi-page .darabi-services__panel { min-height: 788px; } /* 1728 frame card height */
.darabi-page .darabi-services__panel-overlay { width: 492px; }
.darabi-page .darabi-services__panel-title { font-size: 33px; line-height: 36px; }
.darabi-page .darabi-services__panel-text { font-size: 16px; line-height: 24px; }
}
/* Mobile: stacked service card — photo banner on top, solid dark panel below (Figma 6428-35697) */
@media (max-width: 768px) {
/* One slide at a time: clip the neighbours so nothing peeks (design shows a single full-width card) */
.darabi-page .darabi-services__slider { overflow: hidden; }
.darabi-page .darabi-services__panel {
width: 100%; /* fill the slider (container inner width) — single slide, no peek */
flex-direction: column;
min-height: auto;
border-radius: 25px;
padding-top: 214px; /* reserves the top photo band */
background-color: #2C414B; /* solid panel colour below the band */
background-repeat: no-repeat;
background-position: top center;
background-size: 0 0; /* panel itself no longer paints the photo; the ::before band does (keeps the inline URL available to inherit) */
}
/* Top photo band: fill the 214px banner with the per-card photo, preserving aspect ratio (crop, don't stretch) */
.darabi-page .darabi-services__panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 214px;
background-image: inherit; /* reuse the inline per-card photo URL */
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* scale to fill the band, keep aspect ratio */
box-shadow: inset 0 0 0 9999px rgba(2, 26, 35, 0.4); /* dark scrim over the photo (matches desktop) */
pointer-events: none;
}
.darabi-page .darabi-services__panel-overlay {
width: 100%;
max-width: 100%;
margin: 0;
padding: 30px;
gap: 25px;
background: transparent; /* solid colour comes from the panel */
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
}
.darabi-page .darabi-services__panel-title {
font-size: 26px;
line-height: 32px;
}
.darabi-page .darabi-services__panel-text {
-webkit-line-clamp: unset; /* show full copy, no truncation */
display: block;
overflow: visible;
font-size: 13px;
line-height: 20px;
}
.darabi-page .darabi-services__panel-link {
font-size: 13px;
line-height: 20px;
}
}
.darabi-page .darabi-services__cta-wrap {
display: flex;
justify-content: center;
}
/* ── Mobile spacing — Figma node 6428:35686 (root gap-25, header↔pills gap-50) ── */
@media (max-width: 768px) {
.darabi-page .darabi-services .darabi-container { gap: 25px; } /* pills → card, card → CTA */
.darabi-page .darabi-services__slider-wrap {
gap: 25px; /* pills → card */
margin-top: 25px; /* + 25px container gap = 50px between intro and pills (Figma group gap-50) */
}
}
.darabi-page .darabi-regional {
padding: var(--darabi-section-py) 0;
background: radial-gradient(36.59% 15.94% at 50% 46.32%, #E2FAFF 0%, #FFF 100%);
}
.darabi-page .darabi-regional__inner {
display: flex;
gap: var(--darabi-block-gap);
align-items: center;
}
@media (max-width: 1024px) {
.darabi-page .darabi-regional__inner { flex-direction: column; align-items: stretch; }
}
.darabi-page .darabi-regional__image-wrap {
flex: 1 1 0;
min-width: 0;
}
.darabi-page .darabi-regional__image {
width: 100%;
height: auto;
border-radius: 10px;
aspect-ratio: 676.5 / 557;
object-fit: cover;
}
.darabi-page .darabi-regional__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 50px;
}
@media (max-width: 1024px) {
.darabi-page .darabi-regional__content { gap: 32px; }
}
@media (max-width: 768px) {
.darabi-page .darabi-regional__content { gap: 24px; }
}
.darabi-page .darabi-regional__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: rgba(1, 63, 86, 0.9);
font-size: clamp(26px, 3vw, 40px);
line-height: 1.1; /* Figma F2/Heavy 40/44 ≈ 1.1 */
margin: 0;
}
.darabi-page .darabi-regional__textblock {
display: flex;
flex-direction: column;
gap: 35px;
}
@media (max-width: 1024px) {
.darabi-page .darabi-regional__textblock { gap: 24px; }
}
@media (max-width: 768px) {
.darabi-page .darabi-regional__textblock { gap: 16px; }
}
.darabi-page .darabi-regional__text {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(1, 63, 86, 0.9);
margin: 0;
}
.darabi-page .darabi-regional__text p { margin: 0 0 1em; }
.darabi-page .darabi-regional__text p:last-child { margin-bottom: 0; }
.darabi-page .darabi-regional__text a,
.darabi-page .darabi-regional__inline-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s;
}
.darabi-page .darabi-regional__text a:hover,
.darabi-page .darabi-regional__inline-link:hover { color: #013E55; }
.darabi-page .darabi-regional .darabi-btn {
align-self: flex-start;
}
/* ── Mobile Top-Rated/Regional — matches Figma 6428-34286 (390px frame). After base rules so it wins at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-regional__inner {
gap: 75px; /* image → content */
}
.darabi-page .darabi-regional__image {
height: 242px; /* Figma: fixed 242px banner, cropped */
aspect-ratio: auto;
}
.darabi-page .darabi-regional__content {
gap: 50px; /* text → button */
}
.darabi-page .darabi-regional__textblock {
gap: 35px; /* heading → text */
}
.darabi-page .darabi-regional__heading {
font-weight: 600; /* Figma: Jost SemiBold */
line-height: 32px; /* Figma: 26/32 */
}
.darabi-page .darabi-regional__text {
font-size: 11px; /* Figma: Lato 11/16 */
line-height: 16px;
}
.darabi-page .darabi-regional .darabi-btn {
align-self: center; /* Figma: button centered */
}
}
.darabi-page .darabi-locations {
padding: var(--darabi-section-py) 0;
}
.darabi-page .darabi-locations .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap);
}
.darabi-page .darabi-locations__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
.darabi-page .darabi-locations__icon-wrap {
display: flex;
}
.darabi-page .darabi-locations__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: clamp(28px, 2.8vw, 40px);
line-height: 1.1; /* Figma F2/Heavy 40/44 */
margin: 0;
}
.darabi-page .darabi-locations__intro {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
color: #2C3A4B;
font-size: clamp(16px, 1.6vw, 23px);
line-height: 36px;
margin: 0;
}
.darabi-page .darabi-locations__intro p { margin: 0; }
@media (max-width: 768px) {
.darabi-page .darabi-locations__intro { line-height: 28px; }
.darabi-page .darabi-locations__header {
align-items: flex-start;
text-align: left;
}
.darabi-page .darabi-locations__icon-wrap { display: none; }
}
.darabi-page .darabi-locations__body {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 25px;
}
@media (max-width: 1024px) {
.darabi-page .darabi-locations__body {
grid-template-columns: 1fr;
row-gap: var(--darabi-grid-gap);
}
}
.darabi-page .darabi-locations__cards,
.darabi-page .darabi-locations__features-row {
display: contents;
}
@media (max-width: 1024px) {
.darabi-page .darabi-locations__cards > :nth-child(1) { order: 1; }
.darabi-page .darabi-locations__features-row > :nth-child(1) { order: 2; }
.darabi-page .darabi-locations__cards > :nth-child(2) { order: 3; }
.darabi-page .darabi-locations__features-row > :nth-child(2) { order: 4; }
}
.darabi-page .darabi-locations__card {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 35px;
padding-bottom: 20px;
border-bottom: 3px solid #EBEEF2;
}
@media (max-width: 768px) {
.darabi-page .darabi-locations__card { gap: 20px; }
}
.darabi-page .darabi-locations__photo-wrap {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.darabi-page .darabi-locations__photo {
display: block;
width: 100%;
height: 278px;
object-fit: cover;
}
@media (max-width: 768px) {
.darabi-page .darabi-locations__photo { height: 220px; }
}
.darabi-page .darabi-locations__card-text {
display: flex;
flex-direction: column;
gap: 15px;
}
.darabi-page .darabi-locations__office-name {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #2C3A4B;
font-size: 23px;
line-height: 24px; /* Figma F5/Heavy 23/24 */
margin: 0;
}
.darabi-page .darabi-locations__office-desc {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
color: #2C3A4B;
font-size: 16px;
line-height: 24px;
margin: 0;
}
.darabi-page .darabi-locations__features-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.darabi-page .darabi-locations__feature {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #6D7580;
margin: 0;
}
.darabi-page .darabi-locations__feature strong {
font-weight: 700;
color: #6D7580;
}
/* ── Mobile locations — matches Figma 6428-34294 (390px frame). After base rules so it wins at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-locations .darabi-container {
gap: 75px; /* header → body */
}
.darabi-page .darabi-locations__heading {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 26px; /* Figma: 26/32 */
line-height: 32px;
}
.darabi-page .darabi-locations__intro {
font-family: "Lato", Arial, sans-serif; /* Figma: Lato (not Jost) */
line-height: 24px; /* Figma: 16/24 */
}
.darabi-page .darabi-locations__body {
row-gap: 35px; /* card ↔ its features, and between office groups (design 40 between groups) */
}
.darabi-page .darabi-locations__card {
gap: 35px; /* image → title/desc */
}
.darabi-page .darabi-locations__photo {
height: 278px; /* Figma: 278px */
}
.darabi-page .darabi-locations__office-name {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 21px; /* Figma: 21/24 */
}
.darabi-page .darabi-locations__office-desc {
font-size: 13px; /* Figma: Lato 13/20 */
line-height: 20px;
}
.darabi-page .darabi-locations__feature {
font-size: 13px; /* Figma: Lato 13/20 */
line-height: 20px;
}
.darabi-page .darabi-locations__features-col {
gap: 20px; /* Figma: ~20px between features */
}
}
/* ===========================================================
TESTIMONIALS
=========================================================== */
.darabi-page .darabi-testimonials {
padding: var(--darabi-section-py) 0;
}
@media (max-width: 768px) {
.darabi-page .darabi-testimonials {
background: radial-gradient(17.04% 18.69% at 58.88% 48.13%, #E2FAFF 0%, #FFF 100%);
}
}
.darabi-page .darabi-testimonials .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap);
}
.darabi-page .darabi-testimonials__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
@media screen and (max-width: 768px) {
.darabi-page .darabi-testimonials__header {
gap: 10px;
}
}
.darabi-page .darabi-testimonials__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.08; /* Figma 48/52 */
margin: 0;
}
@media screen and (max-width: 768px) {
.darabi-page .darabi-testimonials__heading {
margin-bottom: 10px;
}
}
.darabi-page .darabi-testimonials__intro {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.6vw, 23px);
line-height: 36px;
color: #2C3A4B;
margin: 0;
}
.darabi-page .darabi-testimonials__intro p { margin: 0 0 .6em; }
.darabi-page .darabi-testimonials__intro p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.darabi-page .darabi-testimonials__intro { line-height: 28px; }
}
.darabi-page .darabi-testimonials__rating {
display: inline-flex;
align-items: center;
gap: 25px;
align-self: center;
background: #ffffff;
border-radius: 10px;
padding: 10px 20px;
}
@media (max-width: 600px) {
.darabi-page .darabi-testimonials__rating { gap: 16px; flex-wrap: wrap; justify-content: center; }
}
.darabi-page .darabi-testimonials__rating-left {
display: flex;
align-items: center;
}
.darabi-page .darabi-testimonials__google-icon {
display: block;
}
.darabi-page .darabi-testimonials__rating-right {
display: flex;
align-items: center;
gap: 25px;
}
@media (max-width: 600px) {
.darabi-page .darabi-testimonials__rating-right { gap: 12px; }
}
.darabi-page .darabi-testimonials__score {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: 33px;
line-height: 36px;
color: #2C3A4B;
}
@media (max-width: 600px) {
.darabi-page .darabi-testimonials__score { font-size: 26px; line-height: 30px; }
}
.darabi-page .darabi-testimonials__stars {
display: inline-flex;
align-items: center;
gap: 5px;
color: #F1BD42;
line-height: 1;
}
.darabi-page .darabi-testimonials__star {
width: 24px;
height: 24px;
display: block;
}
@media (max-width: 600px) {
.darabi-page .darabi-testimonials__star { width: 20px; height: 20px; }
}
.darabi-page .darabi-testimonials__count {
font-family: "Jost", Arial, sans-serif;
font-weight: 300;
font-size: 23px;
line-height: 36px;
color: #858C94;
}
@media (max-width: 600px) {
.darabi-page .darabi-testimonials__count { font-size: 17px; line-height: 24px; }
}
/* ─── Video Testimonials slider ─────────────────────────── */
.darabi-page .darabi-testimonials__video-slider {
position: relative;
overflow: hidden;
width: 100%;
}
.darabi-page .darabi-testimonials__video-slide {
display: flex;
gap: 25px;
align-items: stretch;
height: auto;
}
@media (max-width: 1024px) {
.darabi-page .darabi-testimonials__video-slide { flex-direction: column; gap: 24px; }
}
.darabi-page .darabi-testimonials__video-thumb {
flex: 0 0 55%;
position: relative;
display: block;
border-radius: 25px;
overflow: hidden;
aspect-ratio: 793 / 460;
}
@media (max-width: 1024px) {
.darabi-page .darabi-testimonials__video-thumb { flex: 1 1 auto; width: 100%; }
}
.darabi-page .darabi-testimonials__video-img,
.darabi-page .darabi-testimonials__video-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}
.darabi-page .darabi-testimonials__video-play {
position: absolute;
inset: 0;
margin: auto;
width: 72px;
height: 72px;
border-radius: 999px;
background: rgba(1, 63, 86, 0.7);
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, opacity 0.2s ease;
}
.darabi-page .darabi-testimonials__video-thumb:hover .darabi-testimonials__video-play {
background: #013E55;
}
.darabi-page .darabi-testimonials__video-thumb--file.is-playing .darabi-testimonials__video-play {
opacity: 0;
pointer-events: none;
}
.darabi-page .darabi-testimonials__video-body {
flex: 1 1 0;
min-width: 0;
padding: 25px 35px;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (max-width: 768px) {
.darabi-page .darabi-testimonials__video-body { padding: 16px 10px; } /* Figma 6428-35562: 10px side padding (was 4px) */
}
.darabi-page .darabi-testimonials__video-quote {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #2C3A4B;
margin: 0;
}
@media (max-width: 768px) {
.darabi-page .darabi-testimonials__video-quote { font-size: 16px; line-height: 24px; }
}
.darabi-page .darabi-testimonials__video-controls {
position: absolute;
bottom: 18px;
right: 0;
width: 42%; /* roughly under the quote column */
display: flex;
align-items: center;
gap: 12px;
padding: 0 35px;
z-index: 5;
}
@media (max-width: 1024px) {
.darabi-page .darabi-testimonials__video-controls {
position: static;
width: auto;
padding: 0;
margin-top: 8px;
}
}
.darabi-page .darabi-testimonials__video-counter {
flex: 1 1 auto;
font-family: "Lato", Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
}
.darabi-page .darabi-testimonials__video-arrow {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(1, 63, 86, 0.8);
background: transparent;
color: rgba(1, 63, 86, 0.8);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
appearance: none;
-webkit-appearance: none;
outline: none;
box-shadow: none;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.darabi-page .darabi-testimonials__video-arrow--next {
border-color: rgba(1, 63, 86, 0.8);
color: rgba(1, 63, 86, 0.8);
}
.darabi-page .darabi-testimonials__video-arrow:hover,
.darabi-page .darabi-testimonials__video-arrow:focus,
.darabi-page .darabi-testimonials__video-arrow:active {
background: transparent;
border-color: #013E55;
color: #013E55;
box-shadow: none;
outline: none;
}
.darabi-page .darabi-testimonials__video-arrow.swiper-button-disabled {
border-color: rgba(1, 63, 86, 0.2);
color: rgba(1, 63, 86, 0.4);
pointer-events: none;
}
.darabi-page .darabi-testimonials__grid {
width: 100%; /* flex item needs a definite width, otherwise Chromium mis-sizes it */
overflow: visible; /* override Swiper's default .swiper{overflow:hidden} outside mobile */
}
.darabi-page .darabi-testimonials__grid-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
align-items: stretch;
}
@media (max-width: 1024px) {
.darabi-page .darabi-testimonials__grid-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
/* Divider zone (Figma 6428-34316): ~50px above (25 container gap + 25 margin) and 50px below the Vector 1 rule */
.darabi-page .darabi-testimonials__grid { overflow: hidden; margin-top: 25px; padding: 50px 6px 0; border-top: 3px solid #EBEEF2; }
.darabi-page .darabi-testimonials__grid-track { display: flex; gap: 0; }
}
.darabi-page .darabi-testimonials__grid-controls {
display: none;
}
@media (max-width: 768px) {
.darabi-page .darabi-testimonials__grid-controls {
display: flex;
align-items: center;
gap: 10px;
margin-top: 25px;
}
}
.darabi-page .darabi-testimonials__grid-counter {
flex: 1 1 auto;
font-family: "Lato", Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
}
.darabi-page .darabi-testimonials__grid-arrow {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(1, 63, 86, 0.8);
background: transparent;
color: rgba(1, 63, 86, 0.8);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
appearance: none;
-webkit-appearance: none;
outline: none;
box-shadow: none;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.darabi-page .darabi-testimonials__grid-arrow--next {
border-color: rgba(1, 63, 86, 0.8);
color: rgba(1, 63, 86, 0.8);
}
.darabi-page .darabi-testimonials__grid-arrow:hover,
.darabi-page .darabi-testimonials__grid-arrow:focus,
.darabi-page .darabi-testimonials__grid-arrow:active {
background: transparent;
border-color: #013E55;
color: #013E55;
box-shadow: none;
outline: none;
}
.darabi-page .darabi-testimonials__grid-arrow.swiper-button-disabled {
border-color: rgba(1, 63, 86, 0.2);
color: rgba(1, 63, 86, 0.4);
pointer-events: none;
}
.darabi-page .darabi-testimonials__card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 25px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
padding: 25px 35px;
}
@media (max-width: 768px) {
/* height:auto (not 100%) lets the flex track's align-items:stretch equalize slide heights;
an explicit percentage height on the flex item itself would disable that stretch. */
.darabi-page .darabi-testimonials__card { height: auto; padding: 25px 35px; gap: 25px; width: 100%; flex-shrink: 0; }
}
.darabi-page .darabi-testimonials__card-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.darabi-page .darabi-testimonials__card-quote {
display: block;
flex-shrink: 0;
}
.darabi-page .darabi-testimonials__content {
flex: 1;
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
}
.darabi-page .darabi-testimonials__content p { margin: 0 0 24px; }
.darabi-page .darabi-testimonials__content p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.darabi-page .darabi-testimonials__content p { margin-bottom: 16px; }
}
.darabi-page .darabi-testimonials__footer {
display: flex;
flex-direction: column;
gap: 10px;
}
.darabi-page .darabi-testimonials__name {
display: block;
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: 23px;
line-height: 24px;
color: #2C3A4B;
font-style: normal;
}
.darabi-page .darabi-testimonials__role {
font-family: "Lato", Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
}
.darabi-page .darabi-testimonials__cta-wrap {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
/* Testimonials CTAs inherit the medium base (48px total height). */
/* ── Mobile testimonials — matches Figma 6428-34316 (390px frame). After base rules so it wins at ≤768px. ── */
@media (max-width: 768px) {
.darabi-page .darabi-testimonials .darabi-container {
gap: 25px; /* Figma: 25px between blocks (was block-gap 32) — tightens the divider zone */
}
.darabi-page .darabi-testimonials__header {
align-items: flex-start; /* Figma: left-aligned header */
text-align: left;
}
.darabi-page .darabi-testimonials__heading {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 29px; /* Figma: 29/32 */
line-height: 32px;
}
.darabi-page .darabi-testimonials__intro {
font-family: "Lato", Arial, sans-serif; /* Figma: Lato (not Jost) */
font-size: 13px; /* Figma: 13/20 */
line-height: 20px;
}
.darabi-page .darabi-testimonials__score {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 23px; /* Figma: 23/24 */
line-height: 24px;
}
.darabi-page .darabi-testimonials__count {
font-family: "Lato", Arial, sans-serif; /* Figma: Lato Light */
font-size: 13px; /* Figma: 13/20 */
line-height: 20px;
}
.darabi-page .darabi-testimonials__star {
width: 18px; /* Figma: 18px stars */
height: 18px;
}
.darabi-page .darabi-testimonials__video-quote {
font-size: 15px; /* Figma: 15/25 */
line-height: 25px;
}
.darabi-page .darabi-testimonials__content {
font-size: 11px; /* Figma: 11/16 */
line-height: 16px;
}
.darabi-page .darabi-testimonials__name {
font-weight: 600; /* Figma: Jost SemiBold */
font-size: 20px; /* Figma: 20/24 */
line-height: 24px;
}
.darabi-page .darabi-testimonials__role {
font-size: 13px; /* Figma: Lato Light 13/20 */
line-height: 20px;
}
.darabi-page .darabi-testimonials__cta-wrap {
margin-top: 25px; /* + 25px container gap = 50px from testimonials to buttons (Figma) */
gap: 15px; /* Figma: 15px between the two buttons */
}
}
/* ===========================================================
FAQ
=========================================================== */
.darabi-page .darabi-faq {
padding: var(--darabi-section-py) 0;
}
.darabi-page .darabi-faq .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap);
}
.darabi-page .darabi-faq__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}
.darabi-page .darabi-faq__icon-wrap {
display: flex;
}
.darabi-page .darabi-faq__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: 48px;
line-height: 1.12; /* Figma 57/64 */
margin: 0;
}
.darabi-page .darabi-faq__list {
display: flex;
flex-direction: column;
}
.darabi-page .darabi-faq__item {
background: #ffffff;
border-top: 2px solid #EBEEF2;
}
.darabi-page .darabi-faq__item:last-child {
border-bottom: 2px solid #EBEEF2;
}
.darabi-page .darabi-faq__question {
width: 100%;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
white-space: normal;
gap: 24px;
padding: 40px;
text-align: left;
transition: background 0.15s, padding-bottom 150ms ease-out;
}
.darabi-page .darabi-faq__question-text {
flex: 1;
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: 23px;
line-height: 24px;
color: #2C3A4B;
}
.darabi-page .darabi-faq__chevron {
flex-shrink: 0;
transition: transform 150ms ease-out;
color: #013E55;
}
.darabi-page .darabi-faq__item--open .darabi-faq__chevron {
transform: rotate(180deg);
}
.darabi-page .darabi-faq__answer {
overflow: hidden;
max-height: 0;
padding: 0 40px;
/* Smart-animate-like: ease-out 150ms */
transition: max-height 150ms ease-out, padding-bottom 150ms ease-out;
}
.darabi-page .darabi-faq__item--open .darabi-faq__answer {
max-height: 1500px;
padding-bottom: 40px;
}
/* Question→answer gap = 20px (Figma "Selected") */
.darabi-page .darabi-faq__item--open .darabi-faq__question { padding-bottom: 20px; }
.darabi-page .darabi-faq__answer p {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(18, 18, 18, 0.75); /* Figma open-state body color */
margin: 0 0 16px;
}
.darabi-page .darabi-faq__answer p:last-child { margin-bottom: 0; }
/* Bulleted answers (Figma "What conditions does dermatopathology diagnose?") */
.darabi-page .darabi-faq__answer ul,
.darabi-page .darabi-faq__answer ol {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(18, 18, 18, 0.75);
margin: 0 0 16px;
padding-left: 24px;
}
.darabi-page .darabi-faq__answer ul { list-style: disc; }
.darabi-page .darabi-faq__answer ol { list-style: decimal; }
.darabi-page .darabi-faq__answer li { margin: 0; }
.darabi-page .darabi-faq__answer > *:last-child { margin-bottom: 0; }
.darabi-page .darabi-faq__answer a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.darabi-page .darabi-faq__answer a:hover { color: #013E55; }
/* ── Mobile (≤ 768px) — Figma node 6428:34370 ─────────── */
@media (max-width: 768px) {
.darabi-page .darabi-faq .darabi-container { gap: 75px; } /* header → list (Figma gap-75) */
.darabi-page .darabi-faq__header {
align-items: flex-start;
text-align: left;
}
.darabi-page .darabi-faq__icon-wrap svg { width: 31px; height: 31px; }
.darabi-page .darabi-faq__heading {
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
.darabi-page .darabi-faq__question {
gap: 15px;
padding: 30px 20px;
}
.darabi-page .darabi-faq__item--open .darabi-faq__question { padding-bottom: 12px; }
.darabi-page .darabi-faq__question-text {
font-size: 20px;
line-height: 24px;
}
.darabi-page .darabi-faq__answer { padding: 0 20px; }
.darabi-page .darabi-faq__item--open .darabi-faq__answer { padding-bottom: 20px; }
}
/* ===========================================================
LATEST BLOGS
=========================================================== */
.darabi-page .darabi-blogs {
padding: var(--darabi-section-py) 0;
}
.darabi-page .darabi-blogs .darabi-container {
display: flex;
flex-direction: column;
gap: 50px;
}
.darabi-page .darabi-blogs__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
color: #013E55;
font-size: 48px;
line-height: 1.12;
margin: 0;
text-align: left;
}
.darabi-page .darabi-blogs__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px;
}
@media (max-width: 1024px) {
.darabi-page .darabi-blogs__grid {
grid-template-columns: 1fr;
gap: var(--darabi-grid-gap);
}
}
.darabi-page .darabi-blogs__article {
display: flex;
flex-direction: column;
}
.darabi-page .darabi-blogs__image-link {
display: block;
border-radius: 20px;
overflow: hidden;
}
.darabi-page .darabi-blogs__image-link:hover .darabi-blogs__image {
transform: scale(1.03);
}
.darabi-page .darabi-blogs__image {
width: 100%;
height: 278px;
object-fit: cover;
border-radius: 20px;
transition: transform 0.3s ease;
}
.darabi-page .darabi-blogs__text {
padding: 25px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.darabi-page .darabi-blogs__author {
font-family: "Lato", Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
margin: 0;
}
.darabi-page .darabi-blogs__title {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: 23px;
line-height: 24px;
color: #2C3A4B;
margin: 0;
}
.darabi-page .darabi-blogs__title a {
color: inherit;
transition: color 0.15s;
}
.darabi-page .darabi-blogs__title a:hover {
color: #7CC6D6;
}
.darabi-page .darabi-blogs__excerpt {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.darabi-page .darabi-blogs__cta-wrap {
display: flex;
justify-content: center;
}
.darabi-page .darabi-blogs .darabi-btn--blogs-more {
background: transparent;
border: 1px solid rgba(1, 63, 86, 0.5);
color: #013E55;
font-family: "Lato", Arial, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
padding: 12px 20px;
border-radius: 32px;
}
.darabi-page .darabi-blogs .darabi-btn--blogs-more:hover {
background: rgba(1, 63, 86, 0.05);
border-color: #013E55;
opacity: 1;
}
/* ── Mobile (≤ 768px) — Figma node 6428:34380 ─────────── */
@media (max-width: 768px) {
.darabi-page .darabi-blogs__heading {
font-size: 33px;
line-height: 36px;
}
.darabi-page .darabi-blogs__grid { gap: 35px; } /* between cards (Figma gap-35) */
.darabi-page .darabi-blogs__title {
font-size: 20px;
font-weight: 600; /* Jost SemiBold (Figma F5/Heavy) */
}
.darabi-page .darabi-blogs__excerpt {
font-size: 13px;
line-height: 20px;
}
.darabi-page .darabi-blogs .darabi-btn--blogs-more {
font-size: 14px;
line-height: 20px;
padding: 8px 18px;
}
}
/* ===========================================================
SCHEDULE CTA
=========================================================== */
.darabi-page .darabi-schedule {
padding: var(--darabi-section-py) 0;
background: radial-gradient(53.81% 14.69% at 50% 45.94%, #E2FAFF 0%, #FFF 100%);
}
@media (min-width: 768px) {
.darabi-page .darabi-schedule { background: radial-gradient(20.77% 54.06% at 50% 45.94%, #E2FAFF 0%, #FFFFFF 100%); }
}
@media (min-width: 1024px) {
.darabi-page .darabi-schedule { padding: 100px 0; }
}
.darabi-page .darabi-schedule__inner {
display: flex;
gap: 75px;
align-items: stretch;
}
@media (max-width: 1024px) {
.darabi-page .darabi-schedule__inner {
flex-direction: column;
gap: 40px;
align-items: stretch;
}
}
.darabi-page .darabi-schedule__map-wrap {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.darabi-page .darabi-schedule__map-frame {
position: relative;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 728 / 622;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Both the iframe and the fallback ![]()
fill the frame. Do NOT offset the iframe to hide
the My Maps header bar: the pin info panel is anchored to the iframe's top edge, so any
upward shift clips the panel's photo and title along with the header. */
.darabi-page .darabi-schedule__map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
object-fit: cover;
}
.darabi-page .darabi-schedule__content {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 75px;
justify-content: center;
}
@media (max-width: 1024px) {
.darabi-page .darabi-schedule__content { gap: 40px; }
}
.darabi-page .darabi-schedule__textblock {
display: flex;
flex-direction: column;
gap: 35px;
}
@media (max-width: 768px) {
.darabi-page .darabi-schedule__textblock { gap: 24px; }
}
.darabi-page .darabi-schedule__heading {
font-family: "Jost", Arial, sans-serif;
font-weight: 500;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.1; /* Figma 40/44 */
margin: 0;
width: 100%;
background: linear-gradient(to left, #7CC6D6 25%, #013E55 176%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.darabi-page .darabi-schedule__text {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.6vw, 23px);
line-height: 36px;
color: rgba(1, 63, 86, 0.7);
margin: 0;
}
.darabi-page .darabi-schedule__text p { margin: 0 0 36px; }
.darabi-page .darabi-schedule__text p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.darabi-page .darabi-schedule__text { line-height: 28px; }
.darabi-page .darabi-schedule__text p { margin-bottom: 20px; }
}
.darabi-page .darabi-schedule__text a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s;
}
.darabi-page .darabi-schedule__text a:hover { color: #013E55; }
.darabi-page .darabi-schedule .darabi-btn {
align-self: flex-start;
}
/* ── Mobile schedule CTA. After the base rules so it wins at equal specificity. ── */
@media (max-width: 768px) {
.darabi-page .darabi-schedule__map-wrap {
gap: 16px;
}
.darabi-page .darabi-schedule__map-frame {
aspect-ratio: 4 / 3;
}
.darabi-page .darabi-schedule__directions {
gap: 10px;
}
.darabi-page .darabi-schedule .darabi-btn--directions {
font-size: 14px;
line-height: 20px;
padding: 8px 14px;
}
}
/* ===========================================================
FOOTER
=========================================================== */
.darabi-page .darabi-footer {
padding: 100px 0;
background: #ffffff;
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer { padding: 64px 0; }
}
@media (max-width: 768px) {
.darabi-page .darabi-footer { padding: 48px 0; }
}
.darabi-page .darabi-footer .darabi-footer__container {
box-sizing: content-box;
max-width: var(--darabi-content-max);
margin-inline: auto;
padding-left: var(--darabi-section-px);
padding-right: var(--darabi-section-px);
}
.darabi-page .darabi-footer__row {
display: flex;
gap: 205px;
align-items: flex-start;
justify-content: space-between;
}
@media (max-width: 1280px) {
.darabi-page .darabi-footer__row { gap: 64px; }
}
@media (max-width: 1200px) {
.darabi-page .darabi-footer__row { gap: 32px; }
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer__row { flex-direction: column; gap: 40px; }
}
.darabi-page .darabi-footer__inner {
display: flex;
gap: 168px;
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 1280px) {
.darabi-page .darabi-footer__inner { gap: 64px; flex-wrap: wrap; }
}
@media (max-width: 1200px) {
.darabi-page .darabi-footer__inner { gap: 32px; flex-wrap: nowrap; }
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer__inner {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 32px;
align-items: start;
}
.darabi-page .darabi-footer__logo-link { grid-column: 1; }
.darabi-page .darabi-footer__contact { grid-column: 1; }
.darabi-page .darabi-footer__nav-area { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
.darabi-page .darabi-footer__inner {
grid-template-columns: 1fr;
}
.darabi-page .darabi-footer__logo-link,
.darabi-page .darabi-footer__contact,
.darabi-page .darabi-footer__nav-area { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
.darabi-page .darabi-footer__inner { gap: 24px; }
}
.darabi-page .darabi-footer__logo-link {
flex-shrink: 0;
display: block;
}
.darabi-page .darabi-footer__logo {
width: 155px;
height: 72px;
object-fit: contain;
}
@media (max-width: 768px) {
.darabi-page .darabi-footer__logo { width: 120px; height: 56px; }
}
.darabi-page .darabi-footer__contact {
flex: 0 0 307px;
display: flex;
flex-direction: column;
gap: 24px;
font-family: "Jost", Arial, sans-serif;
}
@media (max-width: 1200px) {
.darabi-page .darabi-footer__contact { flex: 0 0 240px; gap: 20px; }
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer__contact { flex: 1 1 auto; width: 100%; gap: 32px; }
}
.darabi-page .darabi-footer__offices {
display: flex;
flex-direction: column;
gap: 10px;
}
.darabi-page .darabi-footer__office {
display: flex;
flex-direction: column;
}
.darabi-page .darabi-footer__office-label {
margin: 0;
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 23px;
color: #013E55;
}
.darabi-page .darabi-footer__address {
margin: 0;
font-style: normal;
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 23px;
color: rgba(1, 63, 86, 0.7);
}
.darabi-page .darabi-footer__contact-lines {
display: flex;
flex-direction: column;
gap: 15px;
}
.darabi-page .darabi-footer__contact-line { margin: 0; }
.darabi-page .darabi-footer__contact-link {
font-family: "Jost", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #013E55;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s;
}
.darabi-page .darabi-footer__contact-link:hover { color: #7CC6D6; }
.darabi-page .darabi-footer__nav-area {
flex: 0 0 520px;
display: flex;
flex-direction: column;
gap: 20px;
}
.darabi-page .darabi-footer__social { margin-top: 30px; }
@media (max-width: 1200px) {
.darabi-page .darabi-footer__nav-area { flex: 1 1 auto; min-width: 0; gap: 16px; }
.darabi-page .darabi-footer__nav-cols { gap: 10px 24px; }
.darabi-page .darabi-footer__social { margin-top: 16px; }
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer__nav-area { width: 100%; }
}
.darabi-page .darabi-footer__nav-cols {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
gap: 10px 45px;
}
@media (max-width: 600px) {
.darabi-page .darabi-footer__nav-cols { gap: 10px 24px; }
}
.darabi-page .darabi-footer__nav-link {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #013E55;
opacity: 0.75;
transition: opacity 0.15s;
}
.darabi-page .darabi-footer__nav-link:hover { opacity: 1; }
.darabi-page .darabi-footer__social {
display: flex;
align-items: center;
gap: 20px;
}
.darabi-page .darabi-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
color: #013E55;
opacity: 0.9;
transition: opacity 0.15s;
}
.darabi-page .darabi-footer__social-link:hover { opacity: 1; }
.darabi-page .darabi-footer__social-link svg {
width: 100%;
height: 100%;
display: block;
}
.darabi-page .darabi-footer__copyright {
font-family: "Lato", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #013E55;
opacity: 0.65;
margin: 0;
}
.darabi-page .darabi-footer__back-to-top {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(1, 63, 86, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: #013E55;
background: transparent;
transition: border-color 0.15s, background 0.15s;
align-self: flex-start;
}
@media (max-width: 1024px) {
.darabi-page .darabi-footer__back-to-top { align-self: center; }
}
.darabi-page .darabi-footer__back-to-top:hover {
border-color: #013E55;
background: rgba(1, 63, 86, 0.06);
}
.elementor-section:has(.elementor-widget-darabi-header),
.e-con:has(.elementor-widget-darabi-header) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.elementor-widget-darabi-header .elementor-widget-container {
padding: 0;
margin: 0;
overflow: visible;
}
.elementor-widget-darabi-header .darabi-page {
background: transparent;
overflow: visible;
}
.elementor-widget-darabi-header .darabi-header {
width: 100%;
}
.elementor-widget-darabi-header {
height: 72px;
}
@media (max-width: 1024px) {
.elementor-widget-darabi-header {
height: 64px;
}
}
.elementor-section:has(.elementor-widget-darabi-hero),
.e-con:has(.elementor-widget-darabi-hero) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.elementor-widget-darabi-hero .elementor-widget-container {
padding: 0;
margin: 0;
}
.elementor-widget-darabi-hero .darabi-page {
background: transparent;
overflow: visible;
}
.elementor-widget-darabi-hero .darabi-hero {
width: 100vw;
position: relative;
left: calc(50% - 50vw);
}
/* The three rules below target Elementor's own classes, not `.darabi-*`, so they
are scoped to `.darabi-redesign` — a body class the mu-plugin adds only when
the page's own Elementor content uses a Darabi widget. Without that scope they
would resize every Elementor container on the site once legacy pages start
rendering the shared header/footer. */
.darabi-redesign.elementor-template-canvas,
.darabi-redesign.elementor-template-full-width {
overflow-x: hidden;
}
.darabi-redesign .e-con > .e-con-inner {
max-width: 1512px;
}
.darabi-redesign.elementor-template-canvas .elementor-section:first-of-type,
.darabi-redesign.elementor-template-full-width .elementor-section:first-of-type {
margin-top: 0;
}
/*# sourceMappingURL=styles.css.map */
/* ============================================================
DERMATOPATHOLOGY SERVICE PAGE — sections 01-06 (Figma file 2H81retn90xmqs4wK3WhGK)
Appended in page order; each block ends with its own mobile @media.
============================================================ */
/* =========== Service Hero — Figma 5787:852 =========== */
.darabi-page .darabi-service-hero {
position: relative;
min-height: var(--darabi-hero-min-height); /* 689px, Figma desktop frame height */
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--darabi-hero-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.darabi-page .darabi-service-hero__scrim {
position: absolute;
inset: 0;
background: var(--darabi-hero-overlay); /* rgba(1,7,15,0.5) */
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
z-index: 1;
}
.darabi-page .darabi-service-hero .darabi-container {
position: relative;
z-index: 2;
width: 100%;
}
.darabi-page .darabi-service-hero__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 75px 0;
text-align: center;
}
.darabi-page .darabi-service-hero__breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.darabi-page .darabi-service-hero__crumb {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--darabi-font-display); /* Jost */
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #ffffff;
text-decoration: underline;
text-underline-position: from-font;
}
.darabi-page .darabi-service-hero__crumb-icon {
width: 24px;
height: 24px;
display: block;
/* Source SVG fill is #D9D9D9, not white — force pure white on the dark photo. */
filter: brightness(0) invert(1);
}
.darabi-page .darabi-service-hero__sep {
font-family: var(--darabi-font-body); /* Lato */
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
.darabi-page .darabi-service-hero__crumb--current {
font-family: var(--darabi-font-display); /* Jost */
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #ffffff;
text-decoration: none;
}
.darabi-page .darabi-service-hero__heading {
font-family: var(--darabi-font-display);
font-weight: 600;
font-size: var(--darabi-display-l); /* 69px */
line-height: var(--darabi-display-l-lh); /* 65px */
color: var(--darabi-n8); /* #EBEEF2 */
margin: 0;
max-width: 100%;
}
.darabi-page .darabi-service-hero__subtext {
font-family: var(--darabi-font-display);
font-weight: 400;
font-size: var(--darabi-p-large); /* 23px */
line-height: var(--darabi-p-large-lh); /* 28px */
color: var(--darabi-n8); /* #EBEEF2 */
max-width: 965px;
margin: 0 auto;
}
/* ── Tablet (769–1279) — the Figma frame is 1440/1728 wide; 69px display type and a
689px min-height are sized for that. Step both down before the ≤768 block. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-service-hero {
min-height: 560px;
}
.darabi-page .darabi-service-hero__content {
padding: 60px 0;
}
.darabi-page .darabi-service-hero__heading {
font-size: 52px;
line-height: 1.08;
}
.darabi-page .darabi-service-hero__subtext {
font-size: 20px;
line-height: 26px;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-service-hero {
min-height: 480px;
}
.darabi-page .darabi-service-hero__heading {
font-size: 44px;
}
}
/* ── Mobile (≤768) — derived, no Figma mobile frame (see SPEC-01 notes).
Placed AFTER all base rules above so these overrides win at equal specificity. ── */
@media (max-width: 768px) {
.darabi-page .darabi-service-hero {
min-height: auto;
}
.darabi-page .darabi-service-hero__content {
padding: 60px 0;
gap: 15px;
}
.darabi-page .darabi-service-hero__crumb,
.darabi-page .darabi-service-hero__sep,
.darabi-page .darabi-service-hero__crumb--current {
font-size: 14px;
line-height: 20px;
}
.darabi-page .darabi-service-hero__crumb-icon {
width: 20px;
height: 20px;
}
.darabi-page .darabi-service-hero__heading {
font-size: 36px;
line-height: 1.15;
}
.darabi-page .darabi-service-hero__subtext {
font-size: 14px;
line-height: 20px;
}
}
/* =========== Service CTA — Figma 5787:864 / 5787:1165 =========== */
.darabi-page .darabi-service-cta {
padding: var(--darabi-section-py) 0;
background: radial-gradient(20.77% 54.06% at 50% 45.94%, #E2FAFF 0%, #FFFFFF 100%);
}
.darabi-page .darabi-service-cta .darabi-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--darabi-block-gap);
}
/* Carries the content ↔ button gap (Figma 75px) and the button's alignment.
Without flex here the button falls to the left and the gap collapses. */
.darabi-page .darabi-service-cta__inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--darabi-block-gap);
}
.darabi-page .darabi-service-cta__content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--darabi-content-gap);
}
.darabi-page .darabi-service-cta__icon {
width: 54px;
height: 54px;
}
.darabi-page .darabi-service-cta__heading {
width: 100%;
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 500;
font-size: clamp(32px, 3.4vw, 57px);
line-height: 1.12;
/* Figma gradient: to left, #7CC6D6 25% → #013E55 176% (same idiom as .darabi-value__heading) */
background: linear-gradient(to left, #7CC6D6 25%, #013E55 176%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.darabi-page .darabi-service-cta__text {
width: 100%;
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 400;
font-size: 23px;
line-height: 36px;
color: rgba(1, 63, 86, 0.7);
}
.darabi-page .darabi-service-cta .darabi-btn--lg {
font-size: var(--darabi-btn-large-size);
line-height: var(--darabi-btn-large-lh);
padding: 14px 25px;
}
/* ── Mobile (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
.darabi-page .darabi-service-cta {
padding: 50px 0;
}
.darabi-page .darabi-service-cta .darabi-container,
.darabi-page .darabi-service-cta__inner {
gap: 50px; /* Figma mobile idiom: 50px between sub-blocks */
}
.darabi-page .darabi-service-cta__content {
gap: 25px; /* Figma mobile idiom: 25px group gap */
}
.darabi-page .darabi-service-cta__icon {
width: 44px;
height: 44px;
}
/* Heading: clamp() already floors at 32px and line-height 1.12 stays — no override needed */
.darabi-page .darabi-service-cta__text {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-cta .darabi-btn--lg {
font-size: var(--darabi-btn-small-size);
line-height: var(--darabi-btn-small-lh);
padding: 8px 18px;
border-radius: 25px; /* per-widget override beats global mobile .darabi-btn radius */
}
}
/* =========== Service Overview — Figma 5787:872 =========== */
.darabi-page .darabi-service-overview {
background: #fff;
padding: var(--darabi-section-py) 0; /* 75px desktop, 50px ≤1279 */
}
.darabi-page .darabi-service-overview__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 120px;
}
.darabi-page .darabi-service-overview__media {
flex: none;
}
.darabi-page .darabi-service-overview__collage {
width: 385px;
height: auto;
}
.darabi-page .darabi-service-overview__body {
display: flex;
flex-direction: column;
gap: 25px;
max-width: 796px;
}
.darabi-page .darabi-service-overview__heading {
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 500;
font-size: 45px;
line-height: 52px;
color: rgba(1, 63, 86, 0.8);
text-align: left;
}
.darabi-page .darabi-service-overview__text {
font-family: var(--darabi-font-body);
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(1, 63, 86, 0.7);
}
.darabi-page .darabi-service-overview__text p {
margin: 0 0 24px;
}
.darabi-page .darabi-service-overview__text p:last-child {
margin-bottom: 0;
}
.darabi-page .darabi-service-overview__text strong,
.darabi-page .darabi-service-overview__text b {
font-family: var(--darabi-font-body);
font-weight: 700;
color: rgba(1, 63, 86, 0.7);
}
/* ── Tablet (769–1279) — collage 385 + gap 120 + body 796 = 1301px, so this row
overflows every viewport under ~1330. Tighten, then stack at ≤1024. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-service-overview__inner {
gap: 60px;
}
.darabi-page .darabi-service-overview__collage {
width: 320px;
}
.darabi-page .darabi-service-overview__heading {
font-size: 38px;
line-height: 44px;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-service-overview__inner {
flex-direction: column;
align-items: stretch;
gap: 40px;
}
.darabi-page .darabi-service-overview__media {
order: 2;
align-self: center;
}
.darabi-page .darabi-service-overview__body {
max-width: 100%;
}
.darabi-page .darabi-service-overview__heading {
font-size: 34px;
line-height: 40px;
}
}
/* ── Mobile (≤768px) — derived, no Figma mobile frame (see SPEC-03 notes).
Placed AFTER all base rules above so these overrides win at equal specificity. ── */
@media (max-width: 768px) {
.darabi-page .darabi-service-overview {
padding: 50px 0;
}
.darabi-page .darabi-service-overview__inner {
flex-direction: column;
align-items: stretch;
gap: 35px;
}
.darabi-page .darabi-service-overview__media {
order: 2;
align-self: center;
}
.darabi-page .darabi-service-overview__collage {
width: 280px;
}
.darabi-page .darabi-service-overview__body {
max-width: 100%;
}
.darabi-page .darabi-service-overview__heading {
font-size: 32px;
line-height: 1.15;
}
.darabi-page .darabi-service-overview__text {
font-size: 13px;
line-height: 20px;
}
}
/* =========== Service Advantage — Figma 5787:1102 =========== */
.darabi-page .darabi-service-advantage {
padding: var(--darabi-section-py) 0; /* 75px 0 */
background: radial-gradient(15.94% 36.59% at 50% 46.32%, #E2FAFF 0%, #FFFFFF 100%);
}
.darabi-page .darabi-service-advantage__inner {
width: 100%;
max-width: 1328px; /* narrower than the 1428 .darabi-container content width */
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap); /* 75px */
}
.darabi-page .darabi-service-advantage__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}
.darabi-page .darabi-service-advantage__heading {
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 500;
font-size: var(--darabi-f2); /* 40px */
line-height: var(--darabi-f2-lh); /* 44px */
color: rgba(1, 63, 86, 0.9);
}
.darabi-page .darabi-service-advantage__media {
display: flex;
align-items: center;
gap: var(--darabi-block-gap); /* 75px */
}
.darabi-page .darabi-service-advantage__photo {
flex: none;
width: 677px;
height: 431px;
border-radius: 10px;
object-fit: cover;
}
.darabi-page .darabi-service-advantage__text {
flex: 1;
font-family: var(--darabi-font-body);
font-weight: 400;
font-size: var(--darabi-p-base); /* 16px */
line-height: var(--darabi-p-base-lh); /* 24px */
color: rgba(1, 63, 86, 0.9);
}
.darabi-page .darabi-service-advantage__text p {
margin: 0 0 24px;
}
.darabi-page .darabi-service-advantage__text p:last-child {
margin-bottom: 0;
}
.darabi-page .darabi-service-advantage__cards {
display: flex;
align-items: stretch;
gap: 25px;
}
.darabi-page .darabi-service-advantage__card {
flex: 1 1 0;
padding: 50px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center; /* card content column is centered as a block... */
gap: 10px;
text-align: left; /* ...but the text itself stays left-aligned (per SPEC) */
}
.darabi-page .darabi-service-advantage__card--light {
border: 0.5px solid rgba(1, 63, 86, 0.4);
}
.darabi-page .darabi-service-advantage__card--dark {
background: var(--darabi-primary); /* #013E55 */
}
.darabi-page .darabi-service-advantage__card-title {
width: 100%;
margin: 0;
font-size: 16px;
line-height: 24px;
}
.darabi-page .darabi-service-advantage__card--light .darabi-service-advantage__card-title {
font-family: var(--darabi-font-body);
font-weight: 700;
color: rgba(1, 63, 86, 0.7);
}
.darabi-page .darabi-service-advantage__card--dark .darabi-service-advantage__card-title {
font-family: var(--darabi-font-display);
font-weight: 500;
color: #8CACB8;
}
.darabi-page .darabi-service-advantage__card-list {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px; /* SPEC gives no explicit item-to-item gap; reused the card's 10px rhythm */
}
.darabi-page .darabi-service-advantage__card-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--darabi-font-body);
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.darabi-page .darabi-service-advantage__card--light .darabi-service-advantage__card-list li {
color: var(--darabi-n1); /* #2C3A4B */
}
.darabi-page .darabi-service-advantage__card--light .darabi-service-advantage__card-list li::before {
content: "\2014"; /* — */
flex: none;
color: var(--darabi-n1);
}
.darabi-page .darabi-service-advantage__card--dark .darabi-service-advantage__card-list li {
color: var(--darabi-white);
}
.darabi-page .darabi-service-advantage__check-icon {
flex: none;
width: 13px;
height: 11px;
margin-top: 6px; /* optically aligns the icon to the first text line (24px line-height) */
}
.darabi-page .darabi-service-advantage__note {
display: flex;
align-items: center;
gap: 25px;
padding: 75px 150px;
border-top: 0.5px solid rgba(1, 63, 86, 0.4);
}
.darabi-page .darabi-service-advantage__note-icon {
flex: none;
width: 96px;
height: 96px;
}
.darabi-page .darabi-service-advantage__note-text {
flex: 1;
margin: 0;
font-family: var(--darabi-font-body);
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(1, 63, 86, 0.8);
}
.darabi-page .darabi-service-advantage__note-text p {
margin: 0 0 16px;
}
.darabi-page .darabi-service-advantage__note-text p:last-child {
margin-bottom: 0;
}
.darabi-page .darabi-service-advantage__note-text strong {
font-weight: 700;
/* Without this the global `.darabi-page strong { color: #2f3236 }` wins — the rule
above only set font-weight, so the grey leaked in over the note's own colour. */
color: var(--darabi-n1); /* #2C3A4B = rgba(44, 58, 75, 1) */
}
/* ── Tablet (769–1279) — the photo is a hard 677×431 with `flex: none`, so every px the
viewport loses comes out of the text column (132px at 769px — unreadable). Make the
photo fluid here, and stack the row at ≤1024. The note's 150px side padding is a
1328px-inner value and has to go at the same time. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-service-advantage__heading {
font-size: 34px;
line-height: 40px;
}
.darabi-page .darabi-service-advantage__media {
gap: 50px;
}
.darabi-page .darabi-service-advantage__photo {
width: 45%;
max-width: 677px;
height: auto;
aspect-ratio: 677 / 431;
}
.darabi-page .darabi-service-advantage__card {
padding: 35px;
}
.darabi-page .darabi-service-advantage__note {
padding: 50px 0;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-service-advantage__media {
flex-direction: column;
align-items: stretch;
gap: 35px;
}
.darabi-page .darabi-service-advantage__photo {
width: 100%;
max-width: none;
}
.darabi-page .darabi-service-advantage__cards {
flex-direction: column;
gap: 25px;
}
.darabi-page .darabi-service-advantage__note-icon {
width: 72px;
height: 72px;
}
}
/* ── Mobile (≤768px) — Figma 5787:1102, derived per SPEC-04.
Placed AFTER all base rules above so these overrides win at equal specificity. ── */
@media (max-width: 768px) {
/* Left-aligned head, matching the home page's mobile convention and process-steps
here. The global mobile `.darabi-section-label` is already full-width + left, so
once the head follows it there's nothing left to override. */
.darabi-page .darabi-service-advantage__head {
align-items: flex-start;
text-align: left;
}
.darabi-page .darabi-service-advantage {
padding: 50px 0;
/* Flat on mobile: the section grows much taller than the Figma frame once photo/
text/cards stack, so a section-level % radial-gradient would blow the ellipse
out of proportion. Anchor the glow to __media instead (same idiom as Services'
intro glow — see CLAUDE.md gradient gotcha). */
background: #fff;
}
.darabi-page .darabi-service-advantage__inner {
gap: 50px;
}
.darabi-page .darabi-service-advantage__heading {
font-size: 28px;
line-height: 34px;
}
.darabi-page .darabi-service-advantage__media {
flex-direction: column;
align-items: stretch;
gap: 25px;
background: radial-gradient(ellipse 70% 55% at 50% 35%, #E2FAFF 0%, rgba(255, 255, 255, 0) 100%);
}
.darabi-page .darabi-service-advantage__photo {
width: 100%;
height: auto;
aspect-ratio: 677 / 431;
}
/* Body type steps to the 14/13 mobile ramp (home page runs 13/11; this page sits one
notch above it so the comparison lists stay comfortable). Card titles stay 16px —
they have to outrank their own list items. */
.darabi-page .darabi-service-advantage__text {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-advantage__cards {
flex-direction: column;
gap: 25px;
}
.darabi-page .darabi-service-advantage__card {
padding: 25px;
}
.darabi-page .darabi-service-advantage__card-list li {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-advantage__note-text {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-advantage__note {
gap: 15px;
padding: 50px 0;
}
.darabi-page .darabi-service-advantage__note-icon {
width: 64px;
height: 64px;
}
}
/* =========== Service Conditions — Figma 5869:34463 =========== */
.darabi-page .darabi-service-conditions {
padding: var(--darabi-section-py) 0; /* 75px 0 */
background: #fff radial-gradient(ellipse 42% 26% at 50% 49%, rgba(226, 250, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
}
.darabi-page .darabi-service-conditions .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap); /* 75px */
}
.darabi-page .darabi-service-conditions__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}
.darabi-page .darabi-service-conditions__heading {
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 500;
font-size: 48px;
line-height: 52px;
color: #013E55;
}
.darabi-page .darabi-service-conditions__intro {
margin: 0;
/* header gap already gives 15px label→heading; +5px here reaches spec's 20px heading→intro */
margin-top: 5px;
font-family: var(--darabi-font-display);
font-weight: 400;
font-size: 23px;
line-height: 36px;
color: #2C3A4B;
}
.darabi-page .darabi-service-conditions__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.darabi-page .darabi-service-conditions__card {
display: flex;
flex-direction: column;
}
.darabi-page .darabi-service-conditions__card-img-wrap {
/* Ratio instead of a fixed height, so the crop stays identical at every width.
Figma is 459.3×257 = 1.787, i.e. 16:9 to within 1.4px at the design width — so the
desktop rendering is unchanged and no per-breakpoint height override is needed. */
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
margin-bottom: 35px;
}
.darabi-page .darabi-service-conditions__card-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.darabi-page .darabi-service-conditions__card-title {
margin: 0 0 15px;
font-family: var(--darabi-font-display);
font-weight: 600;
font-size: 28px;
line-height: 32px;
color: rgba(1, 63, 86, 0.8);
text-align: left;
}
.darabi-page .darabi-service-conditions__card-caption {
margin: 0;
font-family: var(--darabi-font-body);
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #2C3A4B;
text-align: left;
}
.darabi-page .darabi-service-conditions__divider {
width: 100%;
height: 0;
margin: 0;
border: none;
border-top: 1px solid rgba(1, 63, 86, 0.2);
}
.darabi-page .darabi-service-conditions__statement {
display: flex;
align-items: center;
gap: 50px;
}
.darabi-page .darabi-service-conditions__statement-lead {
flex: 1;
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 500;
font-size: 33px;
line-height: 36px;
color: #013E55;
text-align: left;
}
.darabi-page .darabi-service-conditions__statement-text {
flex: 1;
font-family: var(--darabi-font-display);
font-weight: 400;
font-size: 23px;
line-height: 36px;
color: #2C3A4B;
}
.darabi-page .darabi-service-conditions__statement-text p {
margin: 0;
}
.darabi-page .darabi-service-conditions__statement-text strong {
font-family: var(--darabi-font-display);
font-weight: 500; /* Jost Medium — NOT browser-default bold Lato */
}
.darabi-page .darabi-service-conditions__icon-cells {
display: flex;
align-items: stretch;
border-top: 1px solid rgba(1, 63, 86, 0.2);
border-bottom: 1px solid rgba(1, 63, 86, 0.2);
}
.darabi-page .darabi-service-conditions__icon-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 25px;
padding: 75px 25px;
text-align: center;
}
.darabi-page .darabi-service-conditions__icon-cell + .darabi-service-conditions__icon-cell {
border-left: 1px solid rgba(1, 63, 86, 0.2);
}
.darabi-page .darabi-service-conditions__icon {
height: 50px;
width: auto;
}
.darabi-page .darabi-service-conditions__icon-title {
margin: 0;
font-family: var(--darabi-font-display);
font-weight: 600;
font-size: 19px;
line-height: 20px;
color: rgba(1, 63, 86, 0.8);
}
/* ── Tablet (769–1279) — 48px/33px/23px Jost and the 75px icon-cell padding are all
1440-frame values; step them down and stack the two-column statement at ≤1024. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-service-conditions__heading {
font-size: 40px;
line-height: 44px;
}
.darabi-page .darabi-service-conditions__intro {
font-size: 20px;
line-height: 30px;
}
.darabi-page .darabi-service-conditions__card-img-wrap {
margin-bottom: 25px; /* height comes from aspect-ratio now */
}
.darabi-page .darabi-service-conditions__card-title {
font-size: 24px;
line-height: 28px;
}
.darabi-page .darabi-service-conditions__statement {
gap: 35px;
}
.darabi-page .darabi-service-conditions__statement-lead {
font-size: 28px;
line-height: 32px;
}
.darabi-page .darabi-service-conditions__statement-text {
font-size: 20px;
line-height: 30px;
}
/* gap stays at the base 25px — the ≤768 block doesn't re-declare it, so anything set
here would leak into mobile. */
.darabi-page .darabi-service-conditions__icon-cell {
padding: 50px 20px;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-service-conditions__heading {
font-size: 36px;
line-height: 40px;
}
.darabi-page .darabi-service-conditions__statement {
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
.darabi-page .darabi-service-conditions__icon-cell {
padding: 35px 15px;
}
}
/* ── Mobile (≤ 768px) — Figma node 5869:34463 (derived per SPEC-05) ── */
@media (max-width: 768px) {
/* See the advantage head — left-aligned to match the home page and the rest of this page. */
.darabi-page .darabi-service-conditions__head {
align-items: flex-start;
text-align: left;
}
.darabi-page .darabi-service-conditions {
padding: 50px 0;
}
.darabi-page .darabi-service-conditions .darabi-container {
gap: 50px;
}
.darabi-page .darabi-service-conditions__heading {
font-size: 32px;
line-height: 1.15;
}
.darabi-page .darabi-service-conditions__intro {
font-size: 13px;
line-height: 20px;
}
.darabi-page .darabi-service-conditions__cards {
grid-template-columns: 1fr;
gap: 35px;
}
.darabi-page .darabi-service-conditions__card-img-wrap {
margin-bottom: 35px; /* height comes from aspect-ratio now */
}
.darabi-page .darabi-service-conditions__card-title {
font-size: 20px;
line-height: 26px;
}
.darabi-page .darabi-service-conditions__card-caption {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-conditions__statement {
flex-direction: column;
align-items: stretch;
gap: 25px;
}
.darabi-page .darabi-service-conditions__statement-lead {
font-size: 22px;
line-height: 28px;
}
.darabi-page .darabi-service-conditions__statement-text {
font-size: 14px;
line-height: 22px;
}
.darabi-page .darabi-service-conditions__icon-cells {
flex-direction: column;
}
.darabi-page .darabi-service-conditions__icon-cell {
padding: 25px;
border-top: 1px solid rgba(1, 63, 86, 0.2);
}
.darabi-page .darabi-service-conditions__icon-cell:first-child {
border-top: none;
}
.darabi-page .darabi-service-conditions__icon-cell + .darabi-service-conditions__icon-cell {
border-left: none;
}
.darabi-page .darabi-service-conditions__icon {
height: 40px;
}
.darabi-page .darabi-service-conditions__icon-title {
font-size: 16px;
line-height: 20px;
}
}
/* =========== Process Steps — Figma 5787:1116 =========== */
.darabi-page .darabi-process-steps {
background: #ffffff;
padding: var(--darabi-section-py) 0; /* 75px desktop, 50px ≤1279 */
}
.darabi-page .darabi-process-steps .darabi-container {
display: flex;
flex-direction: column;
gap: var(--darabi-block-gap); /* header → nav+steps body (75px desktop / 32px mobile via token) */
}
/* ── Header ──────────────────────────────────────────────── */
.darabi-page .darabi-process-steps__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.darabi-page .darabi-process-steps__heading {
margin: 15px 0 0; /* label → heading gap 15px */
font-family: var(--darabi-font-display); /* Jost */
font-weight: 500;
font-size: var(--darabi-f1); /* 48px */
line-height: var(--darabi-f1-lh); /* 52px */
color: var(--darabi-primary); /* #013E55 */
}
.darabi-page .darabi-process-steps__intro {
margin: 20px 0 0; /* heading → intro gap 20px */
font-family: var(--darabi-font-display); /* Jost */
font-weight: 400;
font-size: var(--darabi-p-large); /* 23px */
line-height: 36px;
color: var(--darabi-n1); /* #2C3A4B */
}
/* ── Body: sticky nav + step list ────────────────────────── */
.darabi-page .darabi-process-steps__body {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 75px;
}
.darabi-page .darabi-process-steps__nav {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
align-items: flex-start; /* pills hug their label (Figma: 263/288/234/333px) */
gap: 10px;
width: 100%;
max-width: 340px;
flex: 0 0 auto;
/* 75 here + the container's 75px gap = the 150px Figma puts between the intro and the
first step. It used to be 150 on top of the gap, i.e. 225px of dead space.
Must stay equal to __steps' padding-top — that's what keeps the nav level with the
first step photo. */
padding-top: 75px;
}
.darabi-page .darabi-process-steps__nav-item {
display: block;
width: fit-content;
max-width: 100%;
font-family: var(--darabi-font-body); /* Lato */
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: var(--darabi-primary); /* #013E55 */
background: transparent;
border-radius: var(--darabi-radius-pill); /* 32px */
padding: 12px 20px;
white-space: normal;
transition: background 0.18s ease, color 0.18s ease;
}
.darabi-page .darabi-process-steps__nav-dash {
font-weight: 300;
}
.darabi-page .darabi-process-steps__nav-item.is-active {
background: rgba(1, 63, 86, 0.1);
color: #014A65;
}
.darabi-page .darabi-process-steps__steps {
flex: 1;
display: flex;
flex-direction: column;
gap: 75px; /* between steps */
padding-top: 75px; /* see __nav — 75 + container gap 75 = Figma's 150 */
padding-bottom: 50px;
}
/* ── Individual step ─────────────────────────────────────── */
.darabi-page .darabi-process-steps__step {
scroll-margin-top: 100px; /* keeps the step clear of the sticky nav's top offset on jump/scroll */
}
.darabi-page .darabi-process-steps__step-media {
position: relative;
/* Figma 1020×658 = 1.55. Same reasoning as the conditions card: a ratio keeps the
crop constant across widths and reproduces the desktop design exactly. */
aspect-ratio: 1.55;
border-radius: 20px;
overflow: hidden;
}
.darabi-page .darabi-process-steps__step-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.darabi-page .darabi-process-steps__step-chip {
position: absolute;
top: 50px;
left: 50px;
width: 97px;
height: 97px;
padding: 20px;
border-radius: 25px;
background: rgba(1, 63, 86, 0.3);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
display: flex;
align-items: center;
justify-content: center;
}
.darabi-page .darabi-process-steps__step-icon {
width: 55px;
height: 55px;
display: block;
/* Source SVGs (icon-step-syringe/pen/search) are already fill/stroke white — no filter needed. */
}
.darabi-page .darabi-process-steps__step-title {
margin: 50px 0 0; /* media → title gap 50px */
font-family: var(--darabi-font-display); /* Jost */
font-weight: 500;
font-size: var(--darabi-f2); /* 40px */
line-height: var(--darabi-f2-lh); /* 44px */
color: var(--darabi-primary); /* #013E55 */
}
.darabi-page .darabi-process-steps__step-text {
margin: 20px 0 0; /* title → text gap 20px */
font-family: var(--darabi-font-display); /* Jost */
font-weight: 400;
font-size: var(--darabi-p-large); /* 23px */
line-height: 36px;
color: var(--darabi-n1); /* #2C3A4B */
}
/* ── Tablet (769–1279) — nav↔steps gap 75px and the 150px top padding on both columns
are 1440-frame values; the 658px step media eats a whole tablet viewport. The nav and
steps padding-top must move together — they're what keeps the sticky nav aligned
with the first step. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-process-steps__heading {
font-size: 40px;
line-height: 44px;
}
.darabi-page .darabi-process-steps__intro {
font-size: 20px;
line-height: 30px;
}
.darabi-page .darabi-process-steps__body {
gap: 50px;
}
/* Nav keeps its full width here on purpose: narrowing it hands the freed width straight
to the step photo, which then reads as oversized at 1024 — and makes the pills wrap
more. padding-top is already 75px in the base rule, so nothing to override. */
.darabi-page .darabi-process-steps__steps {
gap: 50px;
padding-bottom: 25px;
}
.darabi-page .darabi-process-steps__step-title {
margin-top: 35px;
font-size: 32px;
line-height: 36px;
}
.darabi-page .darabi-process-steps__step-text {
font-size: 20px;
line-height: 30px;
}
}
@media (max-width: 1024px) {
.darabi-page .darabi-process-steps__body {
gap: 35px;
}
.darabi-page .darabi-process-steps__nav {
padding-top: 50px;
}
.darabi-page .darabi-process-steps__steps {
gap: 40px;
padding-top: 50px;
}
.darabi-page .darabi-process-steps__step-title {
font-size: 28px;
line-height: 32px;
}
}
/* ── The sticky step nav needs real width to work: below 1024 its pills wrap to two
lines and eat the step column. Hidden instead — the numbered step titles already
carry the sequence. 1023 and not 1024 on purpose: iPad landscape is exactly 1024
and keeps the nav. ── */
@media (max-width: 1023px) {
.darabi-page .darabi-process-steps__nav {
display: none;
}
}
/* ── Mobile (≤768) — derived, no Figma mobile frame (see SPEC-06 notes).
Placed AFTER all base rules above so these overrides win at equal specificity. ── */
@media (max-width: 768px) {
.darabi-page .darabi-process-steps {
padding: 50px 0;
}
.darabi-page .darabi-process-steps__head {
align-items: flex-start;
text-align: left; /* judgment call: matches sitewide mobile convention (label already forces
left-align globally — centering the heading/intro above a left label
reads as broken, see FAQ/Services mobile headers for precedent) */
}
.darabi-page .darabi-process-steps__heading {
font-size: 32px;
line-height: 1.15;
}
.darabi-page .darabi-process-steps__intro {
font-size: 14px;
line-height: 22px;
}
/* nav is already hidden from ≤1023 above */
.darabi-page .darabi-process-steps__steps {
gap: 50px;
padding-top: 0;
padding-bottom: 0;
}
.darabi-page .darabi-process-steps__step-media {
border-radius: 15px; /* height comes from aspect-ratio now */
}
.darabi-page .darabi-process-steps__step-chip {
top: 20px;
left: 20px;
width: 64px;
height: 64px;
padding: 12px;
border-radius: 15px;
}
.darabi-page .darabi-process-steps__step-icon {
width: 36px;
height: 36px;
}
.darabi-page .darabi-process-steps__step-title {
margin-top: 25px; /* media → title gap 25px */
font-size: 28px;
line-height: 34px;
}
.darabi-page .darabi-process-steps__step-text {
margin-top: 15px; /* title → text gap 15px */
font-size: 14px;
line-height: 22px;
}
}
/* ── Tablet section padding, SERVICE PAGES ONLY ──────────────────────────────
75px top/bottom is a 1440-frame value and reads as dead space once the viewport
drops. Deliberately NOT done via `--darabi-section-py` in tokens.css: that token is
shared with the home page, which is signed off and must not shift.
Must stay AFTER every section's base rule (a @media adds no specificity). It also
sits after the ≤768 blocks, which is fine — they set the same 50px. ── */
@media (max-width: 1279px) {
.darabi-page .darabi-service-cta,
.darabi-page .darabi-service-overview,
.darabi-page .darabi-service-advantage,
.darabi-page .darabi-service-conditions,
.darabi-page .darabi-process-steps {
padding-block: 50px;
}
}
/* ============================================================
SERVICE-PAGE SECTIONS — full-bleed inside any Elementor container
Each darabi service widget renders its own edge-to-edge and centres
its content itself via `.darabi-container` (1428px + gutter). So the wrapping
Elementor container must not add gutters or a max-width — otherwise the hero
photo and the CTA glow stop short of the viewport edges (Elementor's default
container is boxed with 10px side padding).
Scoped by `:has()` to containers that actually hold one of these widgets, so
dropping a widget into a plain default container on ANY page just works.
Must stay AFTER `.darabi-redesign .e-con > .e-con-inner { max-width: 1512px }`
— equal specificity, later wins.
============================================================ */
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-hero),
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-cta),
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-overview),
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-advantage),
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-conditions),
.e-con:has(> .e-con-inner > .elementor-widget-darabi-process-steps),
.e-con:has(> .elementor-widget-darabi-service-hero),
.e-con:has(> .elementor-widget-darabi-service-cta),
.e-con:has(> .elementor-widget-darabi-service-overview),
.e-con:has(> .elementor-widget-darabi-service-advantage),
.e-con:has(> .elementor-widget-darabi-service-conditions),
.e-con:has(> .elementor-widget-darabi-process-steps) {
/* All four sides: Elementor's kit default is `10px` on every container, which shows
up as a white band between the sticky header and the hero photo (and a 20px seam
between every two sections). The widgets own their own vertical rhythm. */
padding: 0 !important;
}
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-hero) > .e-con-inner,
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-cta) > .e-con-inner,
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-overview) > .e-con-inner,
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-advantage) > .e-con-inner,
.e-con:has(> .e-con-inner > .elementor-widget-darabi-service-conditions) > .e-con-inner,
.e-con:has(> .e-con-inner > .elementor-widget-darabi-process-steps) > .e-con-inner {
max-width: none;
padding-left: 0;
padding-right: 0;
/* Boxed containers carry the kit's 10px padding on the INNER element, so the
rule above (which targets .e-con) never reaches it — zero it here too. */
padding-block: 0;
}