*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--navy: #0F1F64;
--navy-dark: #091247;
--white: #ffffff;
--blue-accent: #2A65AD;
--dark: #111;
--transition: 0.3s ease;
}
html {
overflow-x: hidden;
width: 100%;
}
body {
font-family: 'Inter', sans-serif;
color: var(--white);
background: #fff;
position: relative;
width: 100%;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 20px 60px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--navy);
transition: background var(--transition);
}
.header.scrolled {
background: rgba(13, 27, 94, 0.95);
backdrop-filter: blur(12px);
padding: 14px 60px;
}
.header__logo {
display: flex;
align-items: center;
gap: 0;
}
.header__logo img {
height: 62px;
width: 238px;
}
.header__nav {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.header__nav-link {
position: relative;
padding: 10px 18px 10px 30px;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
transition: color var(--transition);
cursor: pointer;
}
.header__nav-link::before {
content: "";
position: absolute;
top: 50%;
left: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--white);
transform: translateY(-50%) scale(0.7);
opacity: 0;
transition: opacity var(--transition), transform var(--transition);
}
.header__nav-link:hover {
color: var(--white);
}
.header__nav-link.is-active {
color: var(--white);
}
.header__nav-link:hover::before,
.header__nav-link.is-active::before,
.header__nav-link:focus-visible::before {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.header__dropdown {
position: relative;
}
.header__dropdown-trigger {
display: flex;
align-items: center;
}
.header__dropdown-toggle {
display: flex;
align-items: center;
gap: 6px;
position: relative;
padding: 10px 18px 10px 30px;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
background: none;
border: none;
font-family: inherit;
transition: color var(--transition);
}
.header__dropdown-toggle--icon {
gap: 0;
padding: 10px 14px 10px 8px;
}
.header__dropdown-toggle--icon::before {
display: none;
}
.header__dropdown-toggle::before {
content: "";
position: absolute;
top: 50%;
left: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--white);
transform: translateY(-50%) scale(0.7);
opacity: 0;
transition: opacity var(--transition), transform var(--transition);
}
.header__dropdown-toggle:hover {
color: var(--white);
}
.header__dropdown-toggle.is-active {
color: var(--white);
}
.header__dropdown:hover .header__dropdown-toggle::before,
.header__dropdown-toggle.is-active::before,
.header__dropdown-toggle:hover::before,
.header__dropdown-toggle:focus-visible::before {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.header__dropdown-arrow {
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--transition);
margin-top: -3px;
}
.header__dropdown:hover .header__dropdown-arrow {
transform: rotate(-135deg);
}
.header__dropdown:hover .header__dropdown-toggle--icon {
color: var(--white);
}
.header__dropdown-menu {
position: absolute;
top: calc(100% + 2px);
left: 0;
min-width: 176px;
background: #f1f1f1;
border-radius: 0;
padding: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all var(--transition);
border: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.header__dropdown-menu--services {
overflow: visible;
}
.header__dropdown:hover .header__dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header__dropdown-menu a {
display: block;
padding: 12px 18px;
font-size: 14px;
color: #1f1f1f;
border-bottom: 1px solid #d7d7d7;
transition: background-color 0.12s ease, color 0.12s ease;
}
.header__dropdown-menu a:last-child {
border-bottom: none;
}
.header__dropdown-menu a:hover {
color: #fff;
background: #2A65AD;
border-bottom-color: #2A65AD;
outline: none;
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD;
}
.header__dropdown-menu a:first-child:hover {
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD, inset 0 1px 0 #2A65AD;
}
.header__dropdown-menu a:last-child:hover {
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD, inset 0 -1px 0 #2A65AD;
}
.header__dropdown-item--nested {
position: relative;
}
.header__dropdown-subtrigger {
display: flex;
align-items: stretch;
}
.header__dropdown-link {
flex: 1 1 auto;
}
.header__dropdown-subtoggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
color: #1f1f1f;
background: #f1f1f1;
border: none;
border-bottom: 1px solid #d7d7d7;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.header__dropdown-subtoggle:hover {
color: #fff;
background: #2A65AD;
border-bottom-color: #2A65AD;
outline: none;
box-shadow: none;
}
.header__dropdown-subtoggle .header__dropdown-arrow {
width: 8px;
height: 8px;
transform: rotate(-45deg);
margin-top: 0;
transition: none;
}
.header__dropdown:hover .header__dropdown-subtoggle .header__dropdown-arrow,
.header__dropdown-item--nested:hover>.header__dropdown-subtrigger .header__dropdown-arrow,
.header__dropdown-item--nested.active>.header__dropdown-subtrigger .header__dropdown-arrow {
transform: rotate(-45deg);
}
.header__dropdown-submenu {
position: absolute;
top: -1px;
left: 100%;
min-width: 200px;
background: #f1f1f1;
border: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition: all var(--transition);
overflow: hidden;
z-index: 5;
}
.header__dropdown-item--nested:hover>.header__dropdown-submenu,
.header__dropdown-item--nested.active>.header__dropdown-submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.header__dropdown-item--nested:hover>.header__dropdown-subtrigger .header__dropdown-subtoggle,
.header__dropdown-item--nested.active>.header__dropdown-subtrigger .header__dropdown-subtoggle {
color: #fff;
background: #2A65AD;
border-bottom-color: #2A65AD;
outline: none;
box-shadow: none;
}
.header__dropdown-item--nested:hover>.header__dropdown-subtrigger .header__dropdown-link,
.header__dropdown-item--nested.active>.header__dropdown-subtrigger .header__dropdown-link {
color: #fff;
background: #2A65AD;
border-bottom-color: #2A65AD;
outline: none;
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD;
}
.header__dropdown-menu>.header__dropdown-item--nested:first-child:hover>.header__dropdown-subtrigger .header__dropdown-link,
.header__dropdown-menu>.header__dropdown-item--nested:first-child.active>.header__dropdown-subtrigger .header__dropdown-link {
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD, inset 0 1px 0 #2A65AD;
}
.header__dropdown-menu>.header__dropdown-item--nested:last-child:hover>.header__dropdown-subtrigger .header__dropdown-link,
.header__dropdown-menu>.header__dropdown-item--nested:last-child.active>.header__dropdown-subtrigger .header__dropdown-link {
box-shadow: inset 1px 0 0 #2A65AD, inset -1px 0 0 #2A65AD, inset 0 -1px 0 #2A65AD;
}
.header__burger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 8px;
}
.header__burger span {
display: block;
width: 26px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: all var(--transition);
}
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
overflow: clip;
}
.hero__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__video-wrap video,
.hero__video-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(9, 18, 71, 0.55) 0%,
rgba(9, 18, 71, 0.35) 50%,
rgba(9, 18, 71, 0.6) 100%);
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
padding: 0 60px;
max-width: 900px;
}
.hero__title {
font-size: clamp(32px, 4.2vw, 60px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 40px;
color: var(--white);
}
.home .hero__content {
max-width: 1320px;
}
.home .hero__title {
font-size: clamp(36px, 4.6vw, 60px);
line-height: 1.12;
max-width: 100%;
text-wrap: balance;
}
@media (max-width: 1440px) {
.home .hero__title {
font-size: clamp(30px, 4vw, 48px);
}
}
.hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--blue-accent);
color: var(--white);
font-size: 15px;
font-weight: 500;
border-radius: 16px;
border: none;
cursor: pointer;
transition: background-color var(--transition), box-shadow var(--transition);
font-family: inherit;
letter-spacing: 0.02em;
}
.hero__cta-curtain {
display: inline-block;
overflow: hidden;
}
.hero__cta:hover {
background: #0F1F64;
box-shadow: 0 8px 24px rgba(15, 31, 100, 0.28);
}
.hero__cta-arrow {
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition);
}
.hero__cta:hover .hero__cta-arrow {
transform: translateX(4px);
}
.hero__scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
opacity: 0.7;
transition: opacity var(--transition);
}
.hero__scroll:hover {
opacity: 1;
}
.hero__scroll-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--transition);
}
.hero__scroll:hover .hero__scroll-circle {
border-color: var(--white);
}
.hero__scroll-circle svg {
animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
@media (max-width: 900px) {
.header {
padding: 16px 24px;
}
.header.scrolled {
padding: 12px 24px;
}
.header__nav {
position: fixed;
top: 0;
right: -100%;
left: auto;
transform: none;
width: 280px;
height: 100vh;
background: var(--navy-dark);
flex-direction: column;
align-items: flex-start;
padding: 80px 32px 32px;
gap: 4px;
transition: right var(--transition);
}
.header__nav.active {
right: 0;
}
.header__burger {
display: flex;
z-index: 101;
}
.header__burger.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.header__burger.active span:nth-child(2) {
opacity: 0;
}
.header__burger.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.header__dropdown-menu {
position: static;
background: #f1f1f1;
backdrop-filter: none;
border: none;
border-radius: 0;
padding: 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.header__dropdown-menu a {
padding-left: 30px;
}
.header__dropdown.active .header__dropdown-menu {
display: block;
}
.header__dropdown-submenu {
position: static;
min-width: 0;
background: #e8e8e8;
border: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
padding-left: 0;
display: none;
}
.header__dropdown-submenu a {
padding-left: 45px;
}
.header__dropdown-item--nested.active>.header__dropdown-submenu {
display: block;
}
.header__dropdown-subtoggle {
width: 44px;
background: transparent;
border-bottom: 1px solid #d7d7d7;
}
.header__dropdown-subtoggle .header__dropdown-arrow {
transform: rotate(45deg);
transition: none;
}
.header__dropdown:hover .header__dropdown-subtoggle .header__dropdown-arrow,
.header__dropdown-item--nested.active>.header__dropdown-subtrigger .header__dropdown-arrow {
transform: rotate(45deg);
}
.header__dropdown-item--nested.active>.header__dropdown-subtrigger .header__dropdown-link {
color: #111;
background: #e8e8e8;
}
.header__dropdown:hover .header__dropdown-arrow {
transform: rotate(45deg);
}
.header__dropdown.active .header__dropdown-arrow {
transform: rotate(-135deg);
}
.hero__content {
padding: 0 24px;
}
.hero__title {
font-size: clamp(28px, 7vw, 42px);
}
.home .hero__title {
font-size: clamp(28px, 7vw, 42px);
max-width: 100%;
}
}
@media (max-width: 480px) {
.hero__scroll-circle {
width: 42px;
height: 42px;
}
.hero__cta {
padding: 12px 24px;
font-size: 14px;
}
}
.vm {
padding: 100px 0;
background: #fff;
color: #111;
}
.vm__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.vm__row {
display: grid;
grid-template-columns: minmax(0, 0.80fr) minmax(0, 1.20fr);
gap: 80px;
margin-bottom: 140px;
align-items: start;
}
.vm__row:last-child {
margin-bottom: 0;
}
.vm__left {
display: flex;
flex-direction: column;
gap: 24px;
}
.vm__heading,
.wcu__heading,
.wwd__heading,
.nationwide__heading,
.connect__heading,
.faq__heading {
font-weight: 600;
}
.vm__heading {
font-size: 52px;
color: #000;
line-height: 1.1;
letter-spacing: -0.02em;
}
.vm__image {
width: 100%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4/3;
background: transparent;
}
.vm__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vm__right {
display: flex;
flex-direction: column;
padding-top: 10px;
width: 100%;
}
.vm__title {
font-size: 40px;
font-weight: 400;
line-height: 1.25;
margin-bottom: 24px;
color: #111;
letter-spacing: -0.01em;
max-width: 100%;
}
.vm__desc {
font-size: 16px;
line-height: 1.5;
color: #555;
margin-bottom: 48px;
max-width: 100%;
}
.vm__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vm__feature {
display: flex;
flex-direction: column;
gap: 12px;
}
.vm__icon {
width: 48px;
height: 48px;
background: linear-gradient(282.32deg, #0F1F64 -8.95%, #3A91FB 118.24%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-bottom: 4px;
}
.vm__icon svg {
width: 24px;
height: 24px;
}
.vm__feature-title {
font-size: 18px;
font-weight: 600;
color: #000;
}
.vm__feature-text {
font-size: 16px;
line-height: 1.5;
color: #111;
text-align: left;
}
.vm__row:first-child .vm__image {
aspect-ratio: 1 / 1;
}
.vm__row:first-child .vm__image img {
object-position: 15% center;
}
.vm__row:last-child .vm__image {
aspect-ratio: 1 / 1;
}
.vm__row:last-child .vm__image img {
object-position: 15% center;
}
.vm__row:first-child .vm__feature-text {
text-align: left;
}
@media (max-width: 1024px) {
.vm__heading {
font-size: 40px;
}
.vm__title {
font-size: 28px;
}
.vm__row {
gap: 40px;
}
}
@media (max-width: 900px) {
.vm__container {
padding: 0 24px;
}
.vm__row {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 80px;
}
.vm__image {
aspect-ratio: 16/9;
}
.vm__features {
grid-template-columns: 1fr;
gap: 32px;
}
.vm__heading {
margin-bottom: 16px;
}
}
.partners-section {
width: 100%;
padding: 48px 0;
overflow: hidden;
background: var(--navy);
}
.partners-label {
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.partners-label::before,
.partners-label::after {
content: '';
display: block;
width: 60px;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.carousel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 8px;
margin-top: -8px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.carousel-track {
display: flex;
width: max-content;
animation: scroll-left 28s linear infinite;
}
.carousel-group {
display: flex;
gap: 20px;
padding-right: 20px;
flex-shrink: 0;
}
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.logo-card {
flex-shrink: 0;
background: #ffffff;
border-radius: 50px;
padding: 22px 44px;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
min-width: 220px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
}
.logo-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.logo-card svg,
.logo-card img {
max-height: 50px;
width: auto;
display: block;
filter: invert(100%);
}
.logo-text {
font-size: 22px;
font-weight: 700;
color: #111;
white-space: nowrap;
letter-spacing: -0.5px;
}
.logo-text.spectrum {
font-size: 20px;
}
.logo-text.comcast {
font-size: 17px;
line-height: 1.15;
text-align: center;
}
.logo-text.amazon {
font-size: 17px;
}
.logo-text.cox {
font-size: 28px;
font-style: italic;
}
.logo-text.mediacom {
font-size: 20px;
}
.logo-text.att {
font-size: 22px;
}
.logo-text.verizon {
font-size: 20px;
color: #cd040b;
}
.logo-text.tmobile {
font-size: 20px;
color: #e20074;
}
.wcu {
padding: 100px 0;
background: #fff;
color: #111;
overflow: hidden;
}
.wcu__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.wcu__heading {
font-size: 52px;
color: #111;
margin-bottom: 16px;
line-height: 1.1;
}
.wcu__subtitle {
font-size: 15px;
line-height: 1.6;
color: #666;
max-width: 480px;
margin-bottom: 48px;
}
.wcu__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.25fr;
grid-template-rows: auto auto;
gap: 20px;
position: relative;
}
.wcu__card {
border-radius: 16px;
padding: 32px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wcu__card--navy {
background: var(--navy);
color: var(--white);
}
.wcu__card--white {
background: #f4f6fb;
color: #111;
border: none;
}
.wcu__stat {
font-size: 52px;
font-weight: 700;
line-height: 1;
display: block;
}
.wcu__stat--dark {
color: #111;
}
.wcu__divider {
width: 36px;
height: 1px;
background: rgba(255, 255, 255, 0.35);
margin-top: auto;
margin-bottom: 12px;
}
.wcu__divider--dark {
background: rgba(0, 0, 0, 0.12);
}
.wcu__label {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
}
.wcu__label--dark {
color: #111;
}
.wcu__label--bold {
font-weight: 700;
}
.wcu__card-text {
font-size: 15px;
line-height: 1.55;
color: #444;
}
.wcu__photo {
grid-column: 4;
grid-row: 1 / 3;
border-radius: 16px;
overflow: hidden;
position: relative;
min-height: 100%;
}
.wcu__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wcu__card--coverage {
grid-column: 1;
grid-row: 1;
}
.wcu__card--staff {
grid-column: 2 / 4;
grid-row: 1;
}
.wcu__card--support {
grid-column: 1;
grid-row: 2;
}
.wcu__card--reliability {
grid-column: 2;
grid-row: 2;
}
.wcu__card--experience {
grid-column: 3;
grid-row: 2;
z-index: 1;
width: auto;
padding: 32px 28px;
}
@media (max-width: 1024px) {
.wcu__grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.wcu__card--coverage {
grid-column: 1;
grid-row: 1;
}
.wcu__card--staff {
grid-column: 2;
grid-row: 1;
}
.wcu__card--support {
grid-column: 1;
grid-row: 2;
}
.wcu__card--reliability {
grid-column: 2;
grid-row: 2;
}
.wcu__card--experience {
grid-column: 1;
grid-row: 3;
}
.wcu__photo {
grid-column: 2;
grid-row: 3;
aspect-ratio: 16/9;
min-height: auto;
}
}
@media (max-width: 600px) {
.wcu {
padding: 60px 0;
}
.wcu__container {
padding: 0 20px;
}
.wcu__heading {
font-size: 32px;
}
.wcu__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.wcu__card--coverage,
.wcu__card--staff,
.wcu__card--support,
.wcu__card--reliability,
.wcu__card--experience,
.wcu__photo {
grid-column: auto;
grid-row: auto;
}
.wcu__photo {
order: -1;
height: 240px;
width: 100%;
aspect-ratio: unset;
min-height: unset;
}
}
.wwd {
padding: 100px 0;
background: var(--navy);
color: #fff;
}
.wwd__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
--wwd-expand-duration: 0.3s;
--wwd-expand-ease: ease-out;
}
.wwd__heading {
font-size: 52px;
margin-bottom: 16px;
color: #fff;
}
.wwd__subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 500px;
margin-bottom: 48px;
}
.wwd__content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: stretch;
}
.wwd__image-col {
position: relative;
border-radius: 12px;
overflow: hidden;
height: auto;
min-height: 600px;
}
.wwd__image-col img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
.wwd__accordion {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
overflow: hidden;
}
.wwd__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background 0.3s ease;
}
.wwd__item:last-child {
border-bottom: none;
}
.wwd__header {
padding: 18px 32px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none;
}
.wwd__header:hover {
background: rgba(255, 255, 255, 0.05);
}
.wwd__title {
font-size: 24px;
font-weight: 600;
line-height: 120%;
letter-spacing: -0.02em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
transition: color 0.3s ease;
}
.wwd__item.active .wwd__title {
color: #fff;
}
.wwd__icon {
display: flex;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: rgba(255, 255, 255, 0.3);
opacity: 0;
}
.wwd__item:hover .wwd__icon,
.wwd__item:focus-within .wwd__icon,
.wwd__item.active .wwd__icon {
opacity: 1;
}
.wwd__item--with-subitems .wwd__icon {
display: none;
}
.wwd__item.active {
background: rgba(255, 255, 255, 0.05);
}
.wwd__item.active .wwd__icon {
border-color: #fff;
color: #fff;
}
.wwd__body {
max-height: 0;
transition: max-height var(--wwd-expand-duration) var(--wwd-expand-ease), visibility 0s var(--wwd-expand-duration);
padding: 0;
overflow: hidden;
visibility: hidden;
}
.wwd__item.active .wwd__body {
visibility: visible;
transition: max-height var(--wwd-expand-duration) var(--wwd-expand-ease), visibility 0s 0s;
}
.wwd__inner {
overflow: hidden;
padding: 0 32px 32px 32px;
min-height: 0;
opacity: 0;
transition: opacity var(--wwd-expand-duration) var(--wwd-expand-ease);
}
.wwd__item.active .wwd__inner {
opacity: 1;
transition: opacity var(--wwd-expand-duration) var(--wwd-expand-ease) 0.08s;
}
.wwd__body p {
font-size: 16px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.8);
max-width: 90%;
margin: 0;
}
.wwd__subitems {
display: flex;
flex-direction: column;
gap: 8px;
}
.wwd__subitem {
width: 100%;
}
.wwd__subitem-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: color 0.25s ease;
}
.wwd__subitem-main {
display: inline-flex;
align-items: center;
gap: 16px;
}
.wwd__subitem:hover .wwd__subitem-link,
.wwd__subitem:focus-within .wwd__subitem-link,
.wwd__subitem.active .wwd__subitem-link {
color: #fff;
}
.wwd__subitem-bullet {
width: 14px;
height: 14px;
flex: 0 0 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.85);
transition: background 0.25s ease, border-color 0.25s ease;
}
.wwd__subitem-label {
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.01em;
}
.wwd__subitem:not(.active) .wwd__subitem-label {
color: rgba(198, 194, 172, 0.82);
}
.wwd__subitem.active .wwd__subitem-bullet,
.wwd__subitem:hover .wwd__subitem-bullet,
.wwd__subitem:focus-within .wwd__subitem-bullet {
background: #fff;
border-color: #fff;
}
.wwd__subitem-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
opacity: 0;
transition: opacity 0.25s ease, border-color 0.25s ease;
}
.wwd__subitem:hover .wwd__subitem-icon,
.wwd__subitem:focus-within .wwd__subitem-icon,
.wwd__subitem.active .wwd__subitem-icon {
opacity: 1;
}
.wwd__subitem-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.wwd__subitem.active .wwd__subitem-body {
grid-template-rows: 1fr;
}
.wwd__subdesc {
overflow: hidden;
margin: 8px 0 10px 30px;
max-width: calc(100% - 88px);
min-height: 0;
color: rgba(255, 255, 255, 0.58);
line-height: 1.55;
}
.wwd__subitem .wwd__subdesc {
opacity: 0;
transition: opacity 0.2s ease;
}
.wwd__subitem.active .wwd__subdesc {
opacity: 1;
}
@media (max-width: 900px) {
.wwd {
padding: 60px 0;
}
.wwd__container {
padding: 0 20px;
}
.wwd__content {
grid-template-columns: 1fr;
gap: 32px;
}
.wwd__image-col {
min-height: 240px;
max-height: 320px;
order: -1;
}
.wwd__heading {
font-size: 32px;
}
.wwd__header {
padding: 16px 20px;
}
.wwd__inner {
padding: 0 20px 24px 20px;
}
.wwd__subitem-label {
font-size: 16px;
}
.wwd__subitem-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
}
.wwd__subdesc {
max-width: 100%;
margin-left: 30px;
}
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.nationwide {
padding: 100px 0;
background: #fff;
color: #000;
}
.nationwide__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.nationwide__heading {
font-size: 52px;
color: #000;
margin-bottom: 24px;
max-width: 800px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.nationwide__text {
font-size: 16px;
line-height: 1.6;
color: #555;
max-width: 600px;
margin-bottom: 60px;
}
.nationwide__map {
position: relative;
width: 100%;
max-width: 1100px;
}
.nationwide__map {
position: relative;
}
.nationwide__map-image {
width: 100%;
display: block;
height: auto;
object-fit: contain;
}
.nationwide__map-image--primary {
position: relative;
z-index: 1;
}
.nationwide__map-image--secondary {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.nationwide__map.is-transitioning .nationwide__map-image--secondary {
opacity: 1;
}
@media (max-width: 900px) {
.nationwide {
padding: 60px 0;
}
.nationwide__container {
padding: 0 20px;
}
.nationwide__heading {
font-size: 32px;
}
.nationwide__text {
font-size: 15px;
margin-bottom: 40px;
margin-bottom: 40px;
}
}
.connect {
position: relative;
padding: 100px 0;
background: var(--navy);
color: #fff;
overflow: hidden;
}
.connect__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 10;
}
.connect__bg-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.connect--white {
background: var(--white);
padding: 80px 0;
}
.connect--white .connect__heading {
color: var(--dark);
}
.connect--white .connect__text {
color: #444;
}
.connect--white .connect__bg-circle {
border: 1px dashed rgba(0, 0, 0, 0.05);
}
.connect__bg-circle--1 {
width: 600px;
height: 600px;
right: -100px;
top: -100px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
}
.connect__bg-circle--2 {
width: 800px;
height: 800px;
right: -200px;
top: 50%;
transform: translateY(-50%);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.connect__bg-circle--3 {
width: 500px;
height: 500px;
right: 15%;
bottom: -200px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.connect__content {
max-width: 600px;
}
.connect__heading {
font-size: 52px;
margin-bottom: 24px;
}
.connect__text {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
}
.connect__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 48px;
padding: 14px 28px;
min-width: 172px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 16px;
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 15px;
line-height: 1;
letter-spacing: 0.02em;
box-shadow: none;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.connect__btn:hover {
background: #fff;
border-color: #fff;
color: #2F4CA3;
box-shadow: 0 10px 24px rgba(8, 18, 64, 0.16);
}
.connect__btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.connect__btn--white {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
border: 1px solid var(--navy);
border-radius: 9999px;
color: var(--white);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
background-color: var(--navy);
}
.connect__btn--white:hover {
background: var(--white);
color: var(--navy);
}
.faq {
padding: 120px 0;
background: #fff;
color: #000;
}
.faq__container {
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
.faq__heading {
font-size: 52px;
text-align: center;
margin-bottom: 16px;
line-height: 1.2;
}
.faq__subtitle {
font-size: 16px;
color: #666;
text-align: center;
margin-bottom: 60px;
line-height: 1.5;
}
.faq__list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq__item {
border-bottom: 1px solid transparent;
padding: 24px 0;
}
.faq__header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
gap: 20px;
}
.faq__title {
font-size: 18px;
font-weight: 500;
color: #111;
transition: color 0.3s;
}
.faq__icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: #111;
transition: transform 0.3s ease;
}
.faq__item.active .faq__icon {
transform: rotate(180deg);
}
.faq__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
padding: 0;
overflow: hidden;
}
.faq__item.active .faq__body {
grid-template-rows: 1fr;
}
.faq__inner {
overflow: hidden;
min-height: 0;
padding-top: 16px;
font-size: 16px;
line-height: 1.6;
color: #555;
opacity: 0;
transition: opacity 0.3s ease;
}
.faq__item.active .faq__inner {
opacity: 1;
transition-delay: 0.1s;
}
@media (max-width: 900px) {
.connect__heading {
font-size: 36px;
}
.connect__btn {
min-width: 172px;
min-height: 48px;
padding: 14px 24px;
font-size: 15px;
gap: 12px;
}
.connect__btn svg {
width: 22px;
height: 22px;
}
.faq__heading {
font-size: 32px;
}
.faq__container {
padding: 0 20px;
}
.footer {
padding: 60px 0 150px;
}
.footer__top {
flex-direction: column;
gap: 60px;
}
.footer__links-group {
width: 100%;
justify-content: space-between;
gap: 40px;
}
.footer__bottom {
flex-direction: column;
text-align: center;
}
.footer__watermark {
font-size: 140px;
bottom: -20px;
}
.footer__container {
padding: 0 20px;
}
}
.footer {
background: var(--navy);
color: #fff;
padding: 80px 0 320px;
position: relative;
overflow: hidden;
}
.footer__watermark {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 280px;
font-weight: 700;
color: rgba(255, 255, 255, 0.03);
line-height: 0.8;
pointer-events: none;
z-index: 0;
user-select: none;
letter-spacing: 20px;
}
.footer__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
.footer__top {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
flex-wrap: wrap;
gap: 40px;
}
.footer__col--brand {
max-width: 400px;
flex: 1 1 300px;
}
.footer__logo img {
height: 62px;
width: 238px;
margin-bottom: 24px;
}
.footer__description {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 24px;
}
.footer__socials {
display: flex;
gap: 16px;
}
.footer__social-link {
color: #fff;
opacity: 0.8;
transition: opacity 0.3s;
}
.footer__social-link:hover {
opacity: 1;
}
.footer__links-group {
display: flex;
gap: 80px;
}
.footer__heading {
font-size: 16px;
font-weight: 600;
margin-bottom: 24px;
color: #fff;
}
.footer__nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 15px;
transition: color 0.3s;
}
.footer__link:hover {
color: #fff;
}
.footer__divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin-bottom: 32px;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
flex-wrap: wrap;
gap: 20px;
}
.footer__legal {
display: flex;
align-items: center;
gap: 12px;
}
.footer__legal-link {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.3s;
}
.footer__legal-link:hover {
color: #fff;
}
.footer__sep {
opacity: 0.5;
}
@media (max-width: 900px) {
.footer__top {
flex-direction: column;
gap: 60px;
}
.footer__links-group {
width: 100%;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.footer__bottom {
flex-direction: column;
text-align: center;
}
.footer {
padding: 60px 0 24vw;
}
.footer__watermark {
font-size: 18vw;
bottom: 0;
letter-spacing: 1vw;
}
.footer__container {
padding: 0 20px;
}
}
.about-blocks {
background: #fff;
padding: 100px 0;
}
.about-block {
margin-bottom: 120px;
}
.about-block:last-child {
margin-bottom: 0;
}
.about-block__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.about-block__grid {
display: grid;
grid-template-columns: 4fr 7fr;
gap: 80px;
margin-bottom: 90px;
}
.about-block__grid--no-margin {
margin-bottom: 0;
}
.about-block__title {
font-size: 52px;
font-weight: 600;
color: #111;
line-height: 1.1;
letter-spacing: -0.02em;
}
.about-block__text {
font-size: 16px;
line-height: 1.6;
color: #444;
}
.about-block__text p {
margin-bottom: 24px;
}
.about-block__text p:last-child {
margin-bottom: 0;
}
.about-block__image-full {
width: 100%;
margin-top: 60px;
}
.about-block__image-full img {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
object-position: center;
display: block;
}
.about-block__image-col {
margin-top: 40px;
border-radius: 12px;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
}
.about-block__image-col img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.about-block__grid {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 40px;
}
.about-block__image-full {
margin-top: 40px;
}
}
.deliver {
background: var(--white);
color: #111;
padding: 100px 0;
}
.deliver__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.deliver__header {
max-width: 800px;
margin: 0 0 50px 0;
text-align: left;
}
.deliver__title {
font-size: 52px;
font-weight: 600;
margin-bottom: 16px;
line-height: 1.1;
letter-spacing: -0.02em;
color: #111;
}
.deliver__desc {
font-size: 16px;
line-height: 1.6;
color: #555;
text-align: left;
}
.deliver__grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.deliver__left {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.deliver__card {
border-radius: 12px;
padding: 30px 24px;
display: flex;
flex-direction: column;
}
.deliver__card--navy {
background: var(--navy-dark);
color: var(--white);
}
.deliver__card--white {
background: #f8f9fa;
color: var(--navy-dark);
}
.deliver__card--blue {
background: #2e6db4;
color: var(--white);
}
.deliver__card-title {
font-size: 32px;
font-weight: 600;
line-height: 1.3;
margin-bottom: auto;
min-height: 48px;
}
.deliver__card-line {
width: 100%;
height: 1px;
margin: 24px 0 16px 0;
}
.deliver__card-line--light {
background: rgba(255, 255, 255, 0.2);
}
.deliver__card-line--dark {
background: rgba(0, 0, 0, 0.1);
}
.deliver__card-desc {
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}
.deliver__right {
border-radius: 12px;
overflow: hidden;
height: 100%;
}
.deliver__right img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.values {
background: var(--white);
color: #111;
padding: 100px 0 160px;
}
.values__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 2.2fr;
gap: 60px;
align-items: start;
}
.values__left {
padding-top: 6px;
}
.values__title {
font-size: 52px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: #111 !important;
text-transform: none !important;
}
.values__right {
display: flex;
flex-direction: column;
}
.values__right-header {
margin-bottom: 50px;
}
.values__subtitle {
font-size: 40px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 24px;
color: #111;
}
.values__desc {
font-size: 16px;
line-height: 1.6;
color: #777;
max-width: 600px;
}
.values__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.values__card {
display: flex;
flex-direction: column;
}
.values__icon {
width: 44px;
height: 44px;
background: linear-gradient(282.32deg, #0F1F64 -8.95%, #3A91FB 118.24%);
color: var(--white);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.values__icon svg {
width: 20px;
height: 20px;
}
.values__card-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
color: #111;
}
.values__card-desc {
font-size: 16px;
line-height: 1.6;
color: #111;
font-weight: 400;
}
@media (max-width: 900px) {
.hww__timeline-wrap {
border-radius: 24px;
padding: 24px;
}
.hww__line {
display: none;
}
.hww__steps {
flex-direction: column;
gap: 40px;
}
.hww__step {
width: 100%;
flex-direction: row;
align-items: center;
text-align: left;
}
.hww__circle {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.deliver__grid,
.deliver__left {
grid-template-columns: 1fr;
}
.deliver__right {
height: 400px;
}
.values__container {
grid-template-columns: 1fr;
gap: 40px;
}
.values__grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
.portfolio {
padding: 0 0 100px;
background: var(--white);
color: #111;
}
.portfolio__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: flex;
flex-direction: column;
gap: 80px;
}
.portfolio-item {
display: flex;
flex-direction: column;
gap: 24px;
}
.portfolio-item__details-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.portfolio-item__title {
font-size: 22px;
font-weight: 600;
color: #111;
letter-spacing: -0.01em;
text-align: right;
margin: 0;
line-height: 1.3;
}
.portfolio-item__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
.portfolio-item__photo {
width: 100%;
border-radius: 12px;
overflow: hidden;
height: 100%;
min-height: 380px;
display: flex;
}
.portfolio-item__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.portfolio-item__details {
background: #eff2fe;
border-radius: 12px;
padding: 40px;
display: flex;
flex-direction: column;
}
.portfolio-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e2e8fa;
color: #111;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 6px 12px;
border-radius: 40px;
width: fit-content;
margin-bottom: 20px;
}
.portfolio-item__details-top .portfolio-badge {
margin-bottom: 0;
}
.portfolio-badge svg {
width: 14px;
height: 14px;
}
.portfolio-item__subtitle {
font-size: 16px;
font-weight: 700;
color: #111;
margin-bottom: 16px;
line-height: 1.4;
}
.portfolio-item__desc {
font-size: 16px;
line-height: 1.6;
color: #333;
margin-bottom: 12px;
}
.portfolio-item__desc:last-of-type {
margin-bottom: 32px;
}
.portfolio-item__location {
font-size: 16px;
font-weight: 700;
color: #111;
line-height: 1.5;
}
.portfolio-item.is-collapsed {
display: none;
}
.portfolio__toggle-wrap {
display: flex;
justify-content: flex-start;
margin-top: 0;
}
.portfolio__toggle {
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
width: 108px;
height: 44px;
padding: 6px 20px;
border: none;
border-radius: 16px;
background: #2A65AD;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.portfolio__toggle:hover {
background: #0F1F64;
box-shadow: 0 4px 10px rgba(15, 31, 100, 0.22);
}
@media (max-width: 900px) {
.portfolio-item__row {
grid-template-columns: 1fr;
}
.portfolio-item__photo {
min-height: 250px;
}
.portfolio__container {
padding: 0 24px;
gap: 60px;
}
.portfolio-item__details {
padding: 24px;
}
.portfolio-item__details-top {
flex-direction: column-reverse;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.portfolio-item__title {
text-align: left;
font-size: 20px;
}
.portfolio__toggle {
width: 108px;
}
}
.fdk {
background: #f8f9fc;
padding: 100px 0;
color: #111;
}
.fdk__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.fdk__top {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.fdk__heading {
font-size: 52px;
font-weight: 600;
margin-bottom: 12px;
}
.fdk__subtitle {
font-size: 14px;
color: #666;
}
.fdk__controls {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 5px;
}
.fdk__btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue-accent);
cursor: pointer;
transition: all 0.3s;
}
.fdk__btn:hover {
background: var(--navy);
color: #fff;
}
.fdk__dots {
display: flex;
align-items: center;
gap: 8px;
}
.fdk__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #d1d5db;
}
.fdk__dot.active {
width: 24px;
border-radius: 4px;
background: var(--blue-accent);
}
.fdk__slider {
width: 100%;
overflow: hidden;
padding: 10px 0;
margin: -10px 0;
}
.fdk__grid {
display: flex;
gap: 24px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
align-items: stretch;
}
.fdk__card {
background: #fff;
border: 1px solid #eaeef5;
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
flex: 0 0 calc((100% - 48px) / 3);
min-width: 0;
}
.fdk__quote {
font-size: 15px;
font-weight: 500;
line-height: 1.6;
color: #111;
margin-bottom: 32px;
flex: 1;
}
.fdk__profile {
display: flex;
align-items: center;
gap: 12px;
}
.fdk__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.fdk__name {
font-size: 13px;
font-weight: 700;
}
.fdk__role {
font-size: 12px;
color: #888;
}
@media (max-width: 900px) {
.fdk__container {
padding: 0;
}
.fdk__top {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 0 20px;
}
.fdk__controls {
display: none;
}
.fdk__slider {
margin: 0;
padding: 0;
}
.fdk__grid {
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 10px 20px 30px 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 16px;
scroll-padding-left: 20px;
}
.fdk__grid::-webkit-scrollbar {
display: none;
}
.fdk__grid::after {
content: '';
flex: 0 0 1px;
}
.fdk__card {
flex: 0 0 85%;
max-width: 320px;
scroll-snap-align: start;
}
}
.apply {
background: #fff;
padding: 120px 0;
position: relative;
overflow: hidden;
}
.apply__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.apply__content {
max-width: 680px;
position: relative;
z-index: 2;
}
.apply__heading {
font-size: 52px;
font-weight: 600;
color: #111;
margin-bottom: 16px;
white-space: nowrap;
}
.apply__subtitle {
font-size: 16px;
color: #555;
line-height: 1.6;
margin-bottom: 32px;
}
.apply__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #2b5cbe;
color: #fff;
padding: 14px 28px;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.3s, box-shadow 0.3s;
}
.apply__btn:hover {
background: #1e3a8a;
box-shadow: 0 8px 24px rgba(43, 92, 190, 0.35);
}
.apply__pattern {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
width: 600px;
height: 600px;
background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0, rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 0, rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 20px);
border-radius: 50%;
mask-image: radial-gradient(circle, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(circle, black 20%, transparent 70%);
z-index: 1;
}
.apHero {
background: var(--navy);
padding: 160px 0 60px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.apHero__content {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.apHero__title {
font-size: 40px;
font-weight: 500;
color: var(--white);
letter-spacing: -0.01em;
}
.apForm {
background: #fff;
padding: 60px 0 100px;
color: #111;
}
.apForm__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.apForm__inner {
max-width: 680px;
}
.apForm__heading {
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
color: #1c202a;
}
.apForm__section {
margin-bottom: 48px;
}
.apForm__section-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: #374151;
}
.apForm__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.apForm__group {
display: flex;
flex-direction: column;
gap: 6px;
}
.apForm__group--full {
grid-column: 1 / -1;
}
.apForm__group label {
font-size: 11px;
font-weight: 700;
color: #374151;
}
.apForm__group label span,
.apForm__radio-main-label span {
font-weight: 500;
color: #9cb3a8;
font-size: 11px;
margin-left: 4px;
}
.apForm__group input,
.apForm__group select {
padding: 0 12px;
height: 38px;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
color: #1f2937;
transition: border-color 0.2s;
}
.apForm__group input:focus,
.apForm__group select:focus {
outline: none;
border-color: var(--blue-accent);
}
.apForm__hint {
font-size: 12px;
color: #666;
margin-top: 4px;
}
.apForm__divider {
border: none;
height: 2px;
background: #9ca3af;
margin: 32px 0 40px;
}
.apForm__divider--thin {
border: none;
height: 2px;
background: #9ca3af;
margin: 16px 0;
}
.apForm__radio-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.apForm__radio-main-label {
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
color: #374151;
}
.apForm__radio {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #1f2937;
font-weight: 400;
cursor: pointer;
}
.apForm__radio input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--blue-accent);
cursor: pointer;
}
.apForm__checkbox {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.apForm__checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--blue-accent);
cursor: pointer;
}
.apForm__checkbox-text {
font-size: 14px;
color: #444;
}
.apForm__submit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #2b5cbe;
color: #fff;
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background 0.2s;
margin-top: 24px;
}
.apForm__submit-btn:hover {
background: #1e3a8a;
}
.apForm__error-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #b91c1c;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
}
.apForm__error {
display: block;
color: #d32f2f;
font-size: 12px;
font-weight: 500;
margin-top: 5px;
}
.apForm__error:empty {
display: none;
}
.apForm__group--error input,
.apForm__group--error select {
border-color: #d32f2f !important;
outline-color: #d32f2f;
}
.apForm__radio-group--error .apForm__radio-main-label {
color: #d32f2f;
}
.apForm__checkbox--error .apForm__checkbox-text {
color: #d32f2f;
}
.apForm__success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 20px;
gap: 16px;
color: var(--navy-dark);
}
.apForm__success svg {
color: var(--navy-dark);
}
.apForm__success h3 {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.apForm__success p {
font-size: 16px;
color: #555;
max-width: 460px;
margin: 0;
}
@media (max-width: 768px) {
.apForm__grid {
grid-template-columns: 1fr;
}
.apForm__container {
padding: 40px 20px;
}
}
@media (max-width: 900px) {
.apply__pattern {
display: none;
}
.apply__container {
flex-direction: column;
text-align: center;
}
}
.hww-about {
background: var(--navy-dark);
color: var(--white);
padding: 100px 0;
}
.hww-about__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.hww-about__header {
max-width: 800px;
margin-bottom: 60px;
}
.hww-about__heading {
font-size: 52px;
font-weight: 600;
margin-bottom: 16px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hww-about__subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
max-width: 700px;
}
.hww-about__timeline-wrap {
background: rgba(255, 255, 255, 0.05);
border-radius: 120px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
display: block;
}
.hww-about__timeline {
position: relative;
padding: 10px 40px;
width: 100%;
box-sizing: border-box;
}
.hww-about__line {
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 1px;
background: rgba(255, 255, 255, 0.3);
z-index: 1;
}
.hww-about__steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
}
.hww-about__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
flex: 1;
}
.hww-about__circle {
width: 160px;
height: 160px;
border-radius: 50%;
background: var(--white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.hww-about__circle:hover {
transform: scale(1.05);
}
.hww-about__icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--blue-accent);
}
.hww-about__icon svg {
width: 28px;
height: 28px;
stroke-width: 1.5;
}
.hww-about__step-text {
font-size: 16px;
font-weight: 500;
text-align: center;
color: var(--navy-dark);
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.hww-about__timeline-wrap {
border-radius: 24px;
padding: 40px 20px;
}
.hww-about__line {
top: 40px;
bottom: 40px;
left: 50%;
width: 1px;
height: auto;
right: auto;
transform: translateX(-50%);
}
.hww-about__steps {
flex-direction: column;
gap: 40px;
align-items: center;
}
.hww-about__circle {
width: 120px;
height: 120px;
}
}
.hww-career {
background: var(--navy-dark);
color: var(--white);
padding: 100px 0;
}
.hww-career__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.hww-career__heading {
font-size: 52px;
font-weight: 600;
margin-bottom: 16px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hww-career__subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin-bottom: 60px;
}
.hww-career__timeline-wrap {
background: rgba(255, 255, 255, 0.05);
border-radius: 120px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
display: block;
}
.hww-career__timeline {
position: relative;
padding: 10px 40px;
width: 100%;
box-sizing: border-box;
}
.hww-career__line {
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 1px;
background: rgba(255, 255, 255, 0.3);
z-index: 1;
}
.hww-career__circles {
display: grid;
grid-template-columns: repeat(5, 1fr);
width: 100%;
position: relative;
z-index: 2;
}
.hww-career__circle-wrap {
display: flex;
justify-content: center;
}
.hww-career__circle {
width: 140px;
height: 140px;
border-radius: 50%;
background: var(--white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.hww-career__circle:hover {
transform: scale(1.05);
}
.hww-career__icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--blue-accent);
}
.hww-career__icon svg {
width: 24px;
height: 24px;
stroke-width: 1.5;
}
.hww-career__label {
font-size: 16px;
font-weight: 500;
color: var(--navy-dark);
text-align: center;
line-height: 1.2;
}
.hww-career__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 50px;
padding: 0 70px;
}
.hww-career__text {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hww-career__grid-title {
font-size: clamp(24px, 1.5vw, 20px);
font-weight: 700;
color: var(--white);
margin-bottom: 8px;
}
.hww-career__grid-desc {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
max-width: 160px;
}
@media (max-width: 900px) {
.hww-career__timeline-wrap {
border-radius: 24px;
padding: 40px 20px;
}
.hww-career__line {
top: 40px;
bottom: 40px;
left: 50%;
width: 1px;
height: auto;
right: auto;
transform: translateX(-50%);
}
.hww-career__circles {
grid-template-columns: 1fr;
gap: 40px;
}
.hww-career__grid {
display: flex;
flex-direction: column;
gap: 30px;
padding: 0;
}
.hww-career__grid-desc {
max-width: 100%;
}
}
.pwHero {
position: relative;
width: 100%;
background: #0d1b5e;
color: var(--white);
padding: 160px 0 100px;
overflow: hidden;
display: flex;
align-items: center;
}
.pwHero__bg-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.pwHero__bg-circle--1 {
width: 800px;
height: 800px;
right: -200px;
top: -200px;
}
.pwHero__bg-circle--2 {
width: 600px;
height: 600px;
right: 0px;
top: -100px;
}
.pwHero__bg-circle--3 {
width: 1200px;
height: 1200px;
right: -400px;
top: -400px;
}
.pwHero__content {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
width: 100%;
padding: 0 40px;
}
.pwHero__title {
font-size: clamp(32px, 4.2vw, 48px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
}
.pwForm__subtitle {
font-size: 13.5px;
color: #666;
margin-top: 8px;
margin-bottom: 40px;
}
.pwForm__checkbox-group {
display: flex;
flex-direction: column;
}
.pwForm__checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: #444;
cursor: pointer;
margin-bottom: 12px;
}
.pwForm__checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #3870e0;
}
.pwForm__crew-row {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.pwForm__crew-row .pwForm__checkbox-label {
min-width: 160px;
margin-bottom: 0;
}
.pwForm__crew-input {
display: flex;
align-items: center;
gap: 8px;
}
.pwForm__crew-num {
border: none;
border-bottom: 1px solid #777;
width: 50px;
padding: 2px 4px;
font-family: inherit;
font-size: 13.5px;
outline: none;
background: transparent;
text-align: center;
}
.pwForm__crew-num:focus {
border-bottom-color: var(--blue-accent);
}
.pwForm__crew-input span {
font-size: 13.5px;
color: #444;
}
.pwForm__textarea {
width: 100%;
border: 1px solid #eaeef5;
border-radius: 8px;
padding: 16px;
font-family: inherit;
font-size: 15px;
color: #111;
resize: vertical;
outline: none;
background: #fff;
transition: border-color var(--transition);
}
.pwForm__textarea:focus {
border-color: var(--navy);
}
@media (max-width: 768px) {
.pwHero {
padding: 120px 0 80px;
}
.pwForm__crew-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.hero-bottom-curve {
position: relative;
width: 100%;
height: 80px;
margin-top: -80px;
z-index: 10;
pointer-events: none;
}
.hero-bottom-curve>svg {
width: 100%;
height: 100%;
display: block;
}
.hero-bottom-curve .hero__scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
pointer-events: auto;
}
.sc-top {
padding: 80px 0 100px;
background: #fff;
color: #111;
}
.sc-top__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: minmax(0, 0.80fr) minmax(0, 1.20fr);
gap: 80px;
}
.sc-top__title {
font-size: 52px;
font-weight: 600;
line-height: 1.1;
color: #111;
}
.sc-top__content {
display: flex;
flex-direction: column;
align-items: stretch;
}
.sc-top__desc {
max-width: 640px;
font-size: 40px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 24px;
color: #111;
}
.sc-top__subdesc {
font-size: 16px;
line-height: 1.6;
color: #666;
margin-bottom: 48px;
}
.sc-top__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.sc-top__feature {
display: flex;
flex-direction: column;
gap: 16px;
}
.sc-top__icon {
width: 48px;
height: 48px;
background: linear-gradient(282.32deg, #0F1F64 -8.95%, #3A91FB 118.24%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.sc-top__ftitle {
font-size: 18px;
font-weight: 700;
color: #111;
}
.sc-top__ftext {
font-size: 16px;
line-height: 1.5;
color: #444;
}
.sc-steps {
background: var(--navy);
padding: 100px 0;
color: #fff;
}
.sc-steps__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.sc-steps__title {
font-size: 52px;
font-weight: 600;
margin-bottom: 16px;
}
.sc-steps__subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
max-width: 500px;
margin-bottom: 80px;
}
.sc-steps__flow {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.sc-steps__line {
position: absolute;
top: 70px;
left: 12.5%;
right: 12.5%;
height: 1px;
background: rgba(255, 255, 255, 0.2);
z-index: 1;
}
.sc-steps__item {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.sc-steps__circle {
width: 140px;
height: 140px;
background: #fff;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--navy);
margin-bottom: 24px;
border: 8px solid rgba(255, 255, 255, 0.1);
background-clip: padding-box;
}
.sc-steps__circle svg {
width: 24px;
height: 24px;
}
.sc-steps__clabel {
font-size: 16px;
font-weight: 600;
}
.sc-steps__ititle {
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.sc-steps__itext {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
.sc-bottom {
background: #fff;
padding: 100px 0;
color: #111;
}
.sc-bottom__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.sc-bottom__title {
font-size: 52px;
font-weight: 600;
margin-bottom: 24px;
color: #111;
}
.sc-bottom__text {
font-size: 16px;
line-height: 1.6;
color: #555;
max-width: 600px;
margin-bottom: 40px;
}
.sc-bottom__btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: #3b82f6;
color: #fff;
padding: 16px 32px;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
text-decoration: none;
}
.sc-bottom__btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
@media (max-width: 900px) {
.sc-top__container {
grid-template-columns: 1fr;
gap: 40px;
}
.sc-top__features {
grid-template-columns: 1fr;
}
.sc-steps__flow {
grid-template-columns: 1fr;
gap: 60px;
}
.sc-steps__line {
display: none;
}
.sc-top__title,
.sc-steps__title,
.sc-bottom__title {
font-size: 40px;
}
.sc-top__desc {
font-size: 28px;
}
}
@media (max-width: 600px) {
.sc-top,
.sc-steps,
.sc-bottom {
padding: 60px 0;
}
.sc-top__title,
.sc-steps__title,
.sc-bottom__title {
font-size: 32px;
}
.sc-top__desc {
font-size: 24px;
}
.sc-top__container,
.sc-steps__container,
.sc-bottom__container {
padding: 0 24px;
}
}
.cuHero {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 40px;
background: #0d1b5e;
}
.cuHero .hero__video-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.cuContent {
padding: 80px 0;
background: #fff;
color: #111;
}
.cuContent__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
}
.cuContent__heading {
font-size: 52px;
font-weight: 600;
margin-bottom: 24px;
color: #111;
}
.cuContent__info {
display: flex;
flex-direction: column;
gap: 24px;
}
.cuContent__info-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.cuContent__info-label {
font-size: 24px;
font-weight: 500;
color: #333;
}
.cuContent__info-text {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #555;
}
.cuContent__text {
font-size: 14px;
color: #555;
margin-bottom: 32px;
}
.cuForm {
display: flex;
flex-direction: column;
gap: 24px;
}
.cuForm__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.cuForm__group {
display: flex;
flex-direction: column;
gap: 8px;
}
.cuForm__group label {
font-size: 13px;
font-weight: 700;
color: #333;
}
.cuForm__group label span {
font-weight: 400;
color: #888;
}
.cuForm__group input,
.cuForm__group textarea {
border: 1px solid #eaeef5;
border-radius: 4px;
padding: 12px;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color var(--transition);
background: #fff;
}
.cuForm__group input:focus,
.cuForm__group textarea:focus {
border-color: var(--blue-accent);
}
.cuForm__group textarea {
resize: vertical;
min-height: 120px;
}
.cuForm__checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 13px;
color: #555;
}
.cuForm__checkbox input {
margin-top: 2px;
accent-color: var(--blue-accent);
}
.cuForm__submit {
display: inline-flex;
align-items: center;
gap: 8px;
background: #3870e0;
color: #fff;
border: none;
border-radius: 30px;
padding: 12px 32px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background var(--transition);
width: fit-content;
}
.cuForm__submit:hover {
background: #2354b3;
}
.contact-map {
width: 100%;
height: 500px;
background: #f4f5f7;
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.contact-map iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
@media (max-width: 900px) {
.cuContent__container {
grid-template-columns: 1fr;
gap: 40px;
}
.cuForm__row {
grid-template-columns: 1fr;
}
.cuHero {
padding-top: 100px;
padding-bottom: 60px;
}
}
.services-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
}
.services-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.services-hero__bg img,
.services-hero__bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.services-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(9, 18, 71, 0.4) 0%,
rgba(9, 18, 71, 0.6) 100%);
z-index: 1;
}
.services-hero--video .services-hero__overlay {
display: none;
}
.services-hero__content {
position: relative;
z-index: 2;
padding: 0 60px;
max-width: 900px;
}
.services-hero__title {
font-size: clamp(40px, 5vw, 64px);
font-weight: 500;
color: var(--white);
letter-spacing: -0.01em;
}
.services-page {
padding: 100px 0;
background: #fff;
color: #111;
}
.services-page__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
}
.service-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: flex-start;
margin-bottom: 100px;
scroll-margin-top: 130px;
}
.service-row:last-child {
margin-bottom: 0;
}
.service-row__content {
display: flex;
flex-direction: column;
}
.service-row__title {
font-size: 52px;
font-weight: 600;
color: #000;
margin-bottom: 12px;
line-height: 1.15;
letter-spacing: -0.01em;
}
.service-row__desc {
font-size: 16px;
line-height: 1.45;
color: #555;
margin-bottom: 12px;
}
.service-row__sub-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
color: #111;
}
.service-row__list {
list-style: disc;
padding-left: 18px;
font-size: 16px;
color: #555;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.35;
margin-bottom: 0;
}
.service-row__tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.service-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 16px;
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
cursor: pointer;
font-family: inherit;
transition: all 0.3s ease;
}
.service-tag--filled {
background: #2A65AD;
color: #fff;
border: 1px solid #2A65AD;
}
.service-tag--outlined {
background: transparent;
border: 1px solid #7eaaff;
color: #558eff;
}
.service-tag--active {
background: var(--blue-accent);
border: 1px solid var(--blue-accent);
color: #fff;
}
.service-row__tab-content {
display: none;
}
.service-row__tab-content.active {
display: block;
animation: fadeIn 0.4s ease;
}
.service-row__image {
width: 100%;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.service-row__image img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4/3;
object-fit: cover;
}
.service-row__img {
display: none !important;
}
img.service-row__img.active {
display: block !important;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 900px) {
.service-row {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 80px;
scroll-margin-top: 100px;
}
.service-row__title {
font-size: 28px;
}
}
@media (max-width: 480px) {
.services-page__container {
padding: 0 24px;
}
.services-hero__content {
padding: 0 24px;
}
}
.tc-page {
background: #fff;
}
.tc-hero {
position: relative;
background: #091247;
height: 350px;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 80px;
}
.tc-hero__circles {
position: absolute;
right: 0;
top: 0;
width: 600px;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.tc-hero__circle {
position: absolute;
border: 1px dashed rgba(255, 255, 255, 0.15);
border-radius: 50%;
}
.tc-hero__circle--1 {
width: 500px;
height: 500px;
right: -100px;
top: -100px;
}
.tc-hero__circle--2 {
width: 700px;
height: 700px;
right: -200px;
top: -200px;
}
.tc-hero__circle--3 {
width: 900px;
height: 900px;
right: -300px;
top: -300px;
}
.tc-hero__content {
position: relative;
z-index: 2;
padding: 0 60px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.tc-hero__title {
font-size: clamp(36px, 5vw, 48px);
font-weight: 500;
color: #fff;
letter-spacing: -0.02em;
}
.tc-content {
background: #fff;
padding: 60px 60px 100px;
max-width: 1200px;
margin: 0 auto;
}
.tc-intro {
font-size: 14px;
line-height: 1.6;
color: #111;
margin-bottom: 60px;
max-width: 800px;
}
.tc-grid {
display: flex;
flex-direction: column;
gap: 40px;
}
.tc-row {
display: grid;
grid-template-columns: 350px 1fr;
gap: 40px;
align-items: flex-start;
}
.tc-row__title {
font-size: 28px;
font-weight: 500;
color: #2b3d63;
margin: 0;
line-height: 1.2;
}
.tc-row__text {
font-size: 14px;
line-height: 1.6;
color: #111;
}
.tc-row__text p {
margin-bottom: 16px;
}
.tc-row__text p:last-child {
margin-bottom: 0;
}
.tc-list {
list-style: disc;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.tc-list:last-child {
margin-bottom: 0;
}
@media (max-width: 900px) {
.tc-row {
grid-template-columns: 1fr;
gap: 16px;
}
.tc-hero {
height: 250px;
}
}
@media (max-width: 480px) {
.tc-content {
padding: 40px 24px 80px;
}
.tc-hero__content {
padding: 0 24px;
}
}
@media (max-width: 600px) {
.footer__links-group {
flex-direction: column;
gap: 40px;
}
.footer__bottom {
gap: 24px;
}
}  .reveal-heading,
.reveal-text,
.reveal-image,
.reveal-stagger,
.reveal-mask,
.reveal-button,
.reveal-scroll,
.reveal-left,
.reveal-up,
.reveal-right,
.reveal-down-block,
.reveal-btn-left {
visibility: hidden;
}
.reveal-fade {
visibility: hidden;
} .reveal-mask-container {
overflow: hidden; padding-bottom: 10px;
margin-bottom: -10px;
}
.reveal-curtain-left {
display: inline-block;
overflow: hidden;
}