.pro-tf-experts.shop-redesign-container,
.pro-tf-experts.shop-redesign-container * {
box-sizing: border-box;
}
.pro-tf-experts-page {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #eaf2fb;
padding: 0 0 48px;
overflow: visible;
}
.pro-tf-experts-page--embed {
padding-top: 8px;
}
.pro-tf-experts {
--exl-blue: #11519b;
--exl-blue-soft: #e8f0ff;
--exl-text: #1f1d1d;
--exl-muted: #1f1d1d;
padding: 28px 15px 8px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
font-family: 'Montserrat', system-ui, sans-serif;
} .pro-tf-experts,
.pro-tf-experts h1,
.pro-tf-experts h2,
.pro-tf-experts h3,
.pro-tf-experts h4,
.pro-tf-experts h5,
.pro-tf-experts h6,
.pro-tf-experts .heading-font,
.pro-tf-experts .exl-title,
.pro-tf-experts .exl-subtitle,
.pro-tf-experts .exl-name,
.pro-tf-experts .exl-role,
.pro-tf-experts .exl-points,
.pro-tf-experts .exl-cta-title,
.pro-tf-experts .exl-cta-text {
font-family: 'Montserrat', system-ui, sans-serif !important;
}
.exl-hero {
text-align: center;
max-width: 820px;
margin: 0 auto 28px;
}
.exl-title {
margin: 0 0 12px;
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.01em;
text-transform: none;
color: #08162d !important;
}
.exl-subtitle {
margin: 0 auto;
max-width: 680px;
font-size: 16px;
line-height: 1.5;
color: var(--exl-muted);
}
.exl-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 28px;
}
.exl-card {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 16px;
align-items: stretch;
background: #fff;
border: 1px solid #e4e7ec;
border-radius: 16px;
padding: 16px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
min-height: 100%;
}
.exl-photo {
width: 170px;
border-radius: 12px;
overflow: hidden;
background: #eef2f6;
align-self: stretch;
min-height: 210px;
}
.exl-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.exl-info {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
}
.exl-info-text {
flex: 1 1 auto;
}
.exl-name {
margin: 0 0 6px;
font-size: 17px;
font-weight: 800;
line-height: 1.25;
color: var(--exl-blue) !important;
}
.exl-role {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: #11519b;
}
.exl-points {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
}
.exl-points li {
position: relative;
padding-left: 14px;
font-size: 14px;
line-height: 1.4;
color: var(--exl-text);
}
.exl-points li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--exl-blue);
}
.exl-card-actions {
margin-top: 14px;
}
.pro-tf-experts .exl-btn,
.pro-tf-experts a.exl-btn,
.pro-tf-experts button.exl-btn {
appearance: none !important;
-webkit-appearance: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 10px 16px !important;
border-radius: 10px !important;
border-style: solid !important;
border-width: 1.5px !important;
font-family: 'Montserrat', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-align: center;
cursor: pointer;
box-shadow: none !important;
background-image: none !important;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pro-tf-experts .exl-btn--primary,
.pro-tf-experts a.exl-btn--primary,
.pro-tf-experts button.exl-btn--primary,
.pro-tf-experts .exl-cta-btn.exl-btn--primary {
background: #11519b !important;
background-color: #11519b !important;
background-image: none !important;
color: #fff !important;
border-color: #11519b !important;
}
.pro-tf-experts .exl-btn--primary:hover,
.pro-tf-experts .exl-btn--primary:focus,
.pro-tf-experts .exl-btn--primary:active,
.pro-tf-experts a.exl-btn--primary:hover,
.pro-tf-experts a.exl-btn--primary:focus,
.pro-tf-experts a.exl-btn--primary:active,
.pro-tf-experts a.exl-btn--primary:visited,
.pro-tf-experts button.exl-btn--primary:hover,
.pro-tf-experts button.exl-btn--primary:focus,
.pro-tf-experts button.exl-btn--primary:active {
background: #0d3f7a !important;
background-color: #0d3f7a !important;
background-image: none !important;
border-color: #0d3f7a !important;
color: #fff !important;
}
.pro-tf-experts .exl-btn--primary span,
.pro-tf-experts a.exl-btn--primary span,
.pro-tf-experts button.exl-btn--primary span {
color: #fff !important;
} .exl-cta {
border-radius: 16px;
background: #dceafb;
padding: 22px 24px;
}
.exl-cta-inner {
display: flex;
align-items: center;
gap: 18px 24px;
}
.exl-cta-ico {
flex: 0 0 48px;
width: 48px;
height: 48px;
color: var(--exl-blue);
display: flex;
align-items: center;
justify-content: center;
}
.exl-cta-ico svg,
.exl-cta-ico .exp-cta-chat-img {
width: 44px !important;
height: 44px !important;
display: block;
object-fit: contain;
}
.exl-cta-copy {
flex: 1 1 auto;
min-width: 0;
}
.exl-cta-title {
margin: 0 0 4px;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 800;
line-height: 1.25;
color: var(--exl-blue) !important;
}
.exl-cta-text {
margin: 0;
font-size: 15px;
line-height: 1.45;
color: var(--exl-muted);
}
.exl-cta-btn {
flex: 0 0 auto;
width: auto !important;
min-width: 280px;
white-space: nowrap;
}
body.pro-tf-experts-template,
body.pro-tf-experts-template #main,
body.pro-tf-experts-template #content,
body.pro-tf-experts-template .page-wrapper {
background: #eaf2fb !important;
}
.pro-tf-experts-template .page-title,
.pro-tf-experts-template .page-header {
display: none;
}
@media (max-width: 1100px) {
.exl-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.pro-tf-experts {
padding: 18px 15px 8px;
}
.exl-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.exl-card {
grid-template-columns: 132px minmax(0, 1fr);
gap: 12px;
padding: 14px;
}
.exl-photo {
width: 132px;
min-height: 165px;
}
.exl-cta-inner {
flex-direction: column;
align-items: stretch;
text-align: left;
}
.exl-cta-btn {
width: 100% !important;
min-width: 0;
white-space: normal;
}
}