:root {
--n: #101828;
--r: #de7a6d;
--m: #667085;
--l: #e7e9ee;
--s: #f6f7fb
}
section {
padding-block: 88px;
}
.section-head {
max-width: 640px;
margin-inline: auto;
text-align: center;
margin-bottom: 48px;
} .btn-fill {
background-color: var(--primary-color);
color: var(--white);
}
.btn-outline {
color: var(--primary-color);
border-radius: 30px;
background-color: transparent;
}
.btn-fill:hover {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: var(--white);
}
.btn-block {
width: 100%;
}
.btn-fill svg,
.btn-outline svg {
width: 16px;
height: 16px;
flex: none;
} .site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.logo {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-family);
font-weight: var(--w800);
font-size: 1.24rem;
color: var(--ink);
}
.logo-mark {
width: 34px;
height: 34px;
border-radius: 10px;
flex: none;
background: linear-gradient(135deg, #e26f5a, var(--coral-dark));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.05rem;
font-weight: var(--w800);
}
.logo span {
color: var(--primary-color);
}
.nav-links {
display: flex;
align-items: center;
gap: 34px;
font-weight: var(--w500);
font-size: 0.95rem;
color: var(--navy);
}
.nav-links a {
position: relative;
padding-block: 6px;
}
.nav-links a.active,
.nav-links a:hover {
color: var(--coral-dark);
}
.header-cta {
display: flex;
align-items: center;
gap: 18px;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 30px;
}
.nav-toggle span {
height: 2.4px;
background: var(--ink);
border-radius: 2px;
transition: 0.25s;
} .breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 0.86rem;
color: var(--text-color);
margin-bottom: 22px;
flex-wrap: wrap;
}
.breadcrumb a {
color: var(--text-color);
}
.breadcrumb a:hover {
color: var(--coral-dark);
}
.breadcrumb .sep {
color: var(--text-soft);
}
.breadcrumb .current {
color: var(--ink);
font-weight: var(--w600);
} .search-bar {
display: flex;
gap: 10px;
max-width: 440px;
background: #fff;
padding: 6px;
border-radius: 14px;
box-shadow: var(--shadow-soft);
}
.search-bar input {
flex: 1;
border: none;
outline: none;
padding: 12px 14px;
font-family: var(--font-family);
font-size: 0.95rem;
color: var(--ink);
background: transparent;
}
.search-bar button {
background: linear-gradient(135deg, #e26f5a, var(--coral-dark));
color: #fff;
font-family: var(--font-family);
font-weight: var(--w600);
padding: 12px 24px;
border-radius: 10px;
font-size: 0.94rem;
box-shadow: var(--shadow-btn);
} .hero-visual {
position: relative;
height: 430px;
}
.collage-blob {
position: absolute;
inset: 6% 10%;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffe0dc, #ffc9c0 60%, transparent 75%);
filter: blur(2px);
}
.map-dots {
position: absolute;
inset: 0;
}
.map-dots i {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary-color);
opacity: 0.8;
}
.floater {
position: absolute;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 14px 26px rgba(11, 23, 63, 0.18);
border: 3px solid #fff;
}
.floater svg,
.floater img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.f1 {
width: 96px;
height: 96px;
top: 2%;
left: 0;
transform: rotate(-6deg);
}
.f2 {
width: 104px;
height: 104px;
top: 8%;
left: 38%;
transform: rotate(4deg);
}
.f3 {
width: 88px;
height: 88px;
top: 0%;
right: 2%;
transform: rotate(6deg);
}
.f4 {
width: 96px;
height: 96px;
bottom: 16%;
left: 6%;
transform: rotate(-4deg);
}
.social-badge {
position: absolute;
width: 52px;
height: 52px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(11, 23, 63, 0.18);
color: #fff;
}
.social-badge.ig {
background: linear-gradient(135deg, #f9ce34, #ee2a7b 60%, #6228d7);
}
.social-badge.yt {
background: #ff3b30;
border-radius: 13px;
}
.b1 {
top: 26%;
left: 30%;
}
.b2 {
top: 14%;
right: 16%;
}
.b3 {
top: 44%;
right: 4%;
}
.center-illustration {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 190px;
height: 250px;
}
.script-text {
position: absolute;
right: 0;
bottom: 6%;
font-family: var(--font-family);
font-style: italic;
font-weight: var(--w700);
color: var(--navy);
font-size: 1.5rem;
line-height: 1.15;
text-align: right;
} .city-hero {
background: linear-gradient(120deg, var(--background-color) 0%, var(--card-background) 100%);
padding-top: 36px;
padding-bottom: 0;
}
.city-hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center;
padding-bottom: 60px;
}
.city-hero h1 {
margin-bottom: 16px;
}
.city-hero-copy p {
color: var(--text-color);
font-size: var(--font18);
max-width: 460px;
margin-bottom: 30px;
}
.hero-btn-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.city-hero-media {
position: relative;
}
.city-photo {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.city-photo svg,
.city-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.city-script {
position: absolute;
top: -8px;
right: 6%;
font-family: var(--font-family);
font-style: italic;
font-weight: var(--w700);
color: var(--navy);
font-size: 1.6rem;
line-height: 1.1;
text-align: center;
transform: rotate(-3deg);
}
.hashtag-badge {
position: absolute;
bottom: 20px;
right: 20px;
background: #fff;
padding: 9px 16px;
border-radius: 10px;
font-family: var(--font-family);
font-weight: var(--w600);
font-size: 0.82rem;
color: var(--ink);
box-shadow: var(--shadow-soft);
}
.paper-plane {
position: absolute;
bottom: 70px;
right: 14px;
width: 34px;
height: 34px;
color: var(--primary-color);
} .stats-wrap {
margin-top: 56px;
position: relative;
z-index: 10;
}
.stats-bar {
background: #fff5f4;
border-radius: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 30px 10px;
}
.stat {
display: flex;
align-items: center;
gap: 14px;
padding-inline: 22px;
border-right: 1px solid var(--border);
}
.stat:last-child {
border-right: none;
}
.stat-icon {
width: 46px;
height: 46px;
flex: none;
border-radius: 13px;
background: var(--card-background);
display: flex;
align-items: center;
justify-content: center;
color: var(--coral-dark);
}
.stat-icon svg {
width: 22px;
height: 22px;
}
.stat-num {
display: block;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 1.28rem;
color: var(--ink);
line-height: 1.2;
}
.stat p {
font-size: 0.82rem;
color: var(--text-color);
margin-top: 1px;
} .locations {
background: #fff;
}
.locations-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
.city-card {
padding: 10px;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.city-card .thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
}
.city-card .thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 20px;
}
.city-card-body {
padding: 16px 0px 18px;
}
.city-card-body h3 {
font-size: 1.06rem;
margin-bottom: 4px;
}
.city-card-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.city-card-link span {
font-size: 0.84rem;
color: var(--text-color);
line-height: normal;
}
.city-card-link svg {
width: 16px;
height: 16px;
color: var(--primary-color);
flex: none;
transition: transform 0.2s ease;
}
.city-card:hover .city-card-link svg {
transform: translateX(4px);
} .why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.why-item h4 {
font-size: 1.02rem;
margin-bottom: 8px;
}
.why-item p {
color: var(--text-color);
font-size: 0.9rem;
max-width: 230px;
margin-inline: auto;
}
.why-icon {
width: 66px;
height: 66px;
border-radius: 50%;
background: var(--card-background);
color: var(--coral-dark);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
} .services {
background: var(--bg-soft);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border);
}
.service-card .thumb {
aspect-ratio: 16 / 11;
}
.service-card .thumb svg,
.service-card .thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.service-body {
padding: 18px 20px 22px;
}
.service-body h3 {
font-size: 18px;
font-weight:700;
margin-bottom: 7px;
}
.service-body p {
color: var(--text-color);
font-size: 0.88rem;
margin-bottom: 14px;
min-height: 40px;
}
.learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--coral-dark);
font-family: var(--font-family);
font-weight: var(--w600);
font-size: 0.86rem;
}
.learn-more svg {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.service-card:hover .learn-more svg {
transform: translateX(4px);
} .faq-list {
max-width: 760px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-family: var(--font-family);
font-weight: var(--w600);
font-size: 0.95rem;
color: var(--ink);
text-align: left;
}
.faq-q .plus {
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--card-background);
color: var(--coral-dark);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.25s ease, background 0.25s ease;
}
.faq-q .plus::before,
.faq-q .plus::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 2px;
}
.faq-q .plus::before {
width: 11px;
height: 2px;
}
.faq-q .plus::after {
width: 2px;
height: 11px;
transition: transform 0.25s ease;
}
.faq-item.open .faq-q .plus {
background: var(--coral-dark);
color: #fff;
}
.faq-item.open .faq-q .plus::after {
transform: rotate(90deg) scaleY(0);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.faq-a p {
padding: 0 22px 20px;
color: var(--text-color);
font-size: 0.92rem;
max-width: 640px;
} .local-focus {
background: #fff;
}
.industry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.industry-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
padding: 22px 20px;
box-shadow: var(--shadow-soft);
}
.industry-card .industry-icon {
font-size: 1.5rem;
margin-bottom: 12px;
}
.industry-card h4 {
font-size: 0.98rem;
margin-bottom: 4px;
}
.industry-card p {
color: var(--text-color);
font-size: 0.85rem;
} .creator-types {
background: var(--navy);
color: #fff;
}
.creator-types .section-head h2,
.creator-types .section-head p {
color: #fff;
}
.creator-types .section-head p {
color: #c7cedd;
}
.creator-types .eyebrow {
color: #ffc9c0;
}
.creator-types-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.why-works-copy,.why-works-list{
text-align: center;
max-width: 740px;
margin: auto;
}
.creator-type-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
padding: 22px 14px;
text-align: center;
}
.creator-type-card h4 {
color: #fff;
font-size: 0.98rem;
margin-bottom: 6px;
}
.creator-type-card .range {
color: #c7cedd;
font-size: 0.82rem;
margin-bottom: 10px;
}
.creator-type-card .tag {
color: #ff9f8f;
font-size: 0.8rem;
font-weight: var(--w600);
} .process-sec {
background: #fff;
}
.process {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}
.process-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}
.process-step {
border-left: 3px solid var(--primary-color);
padding-left: 16px;
}
.process-step .step-num {
color: var(--primary-color);
font-weight: var(--w700);
font-size: 0.9rem;
margin-bottom: 8px;
display: block;
}
.process-step h4,.process-step h3 {
font-size: 18px;
margin-bottom: 6px;
}
.process-step p {
color: var(--text-color);
font-size: 0.85rem;
} .case-studies {
background: var(--bg-soft);
}
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.case-card {
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border);
}
.case-card .thumb {
aspect-ratio: 11 / 6;
background: linear-gradient(120deg, var(--background-color), var(--card-background));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--ink);
}
.case-card .thumb img{
height: 100%;
}
.case-card .thumb .icon {
font-size: 1.6rem;
}
.case-card .thumb .kicker {
font-size: 0.72rem;
font-weight: var(--w700);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--coral-dark);
}
.case-body {
padding: 18px 20px 22px;
}
.case-body h4 {
font-size: 1rem;
margin-bottom: 10px;
}
.case-body p {
font-size: 0.86rem;
color: var(--text-color);
margin-bottom: 4px;
}
.case-body p strong {
color: var(--ink);
font-weight: var(--w600);
} .why-works {
background: #fff;
}
.why-works .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.why-works-kicker {
font-size: 0.76rem;
font-weight: var(--w700);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
margin-bottom: 14px;
display: block;
}
.why-works h2 {
font-size: var(--font34);
margin-bottom: 16px;
}
.why-works-copy p {
color: var(--text-color);
}
.why-works-list {
background: var(--bg-soft);
border-radius: var(--radius-md);
padding: 26px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.why-works-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.94rem;
color: var(--ink);
font-weight: var(--w500);
}
.why-works-list li::before {
content: "\2713";
color: var(--coral-dark);
font-weight: var(--w700);
flex: none;
}
.areas-serve {
background: var(--bg-soft);
}
.areas-box {
border: 1px dashed var(--border);
background: #fff;
border-radius: var(--radius-md);
padding: 26px 30px;
text-align: center;
max-width: 900px;
margin-inline: auto;
}
.areas-box p {
color: var(--text-color);
font-size: 0.95rem;
line-height: 2;
}
.areas-box a {
color: var(--text-color);
}
.areas-box a:hover {
color: var(--primary-color);
} .grow-panel {
background: linear-gradient(120deg, var(--background-color), var(--card-background));
border-radius: var(--radius-lg);
padding: 14px;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 34px;
align-items: center;
}
.grow-photo {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.grow-photo svg,
.grow-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.grow-copy {
padding: 14px 28px 14px 0;
}
.grow-copy h3 {
font-size: 1.5rem;
margin-bottom: 12px;
}
.grow-copy p {
color: var(--text-color);
margin-bottom: 24px;
max-width: 440px;
}
.grow-btn-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
} .cta-banner {
background: var(--navy);
border-radius: 0;
text-align: center;
color: #fff;
}
.cta-banner .eyebrow {
color: #ffc9c0;
}
.cta-banner h2 {
color: #fff;
font-size: var(--font36);
margin-bottom: 12px;
}
.cta-banner p {
color: #c7cedd;
max-width: 480px;
margin-inline: auto;
margin-bottom: 28px;
}
.cta-call-btn {
border-color: #fff;
color: #fff;
}
.cta-call-btn:hover {
background-color: #fff;
color: var(--navy);
}
.trust-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 26px;
font-size: 0.86rem;
color: #c7cedd;
}
.avatars {
display: flex;
}
.avatars span {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--navy);
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family);
font-weight: var(--w700);
font-size: 0.72rem;
color: #fff;
}
.avatars span:first-child {
margin-left: 0;
} .site-footer {
background: var(--navy-deep);
color: #c7cedd;
padding-block: 64px 26px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 46px;
}
.footer-brand p {
margin-top: 14px;
font-size: 0.9rem;
line-height: 1.7;
max-width: 280px;
color: var(--text-soft);
}
.footer-col h5 {
color: #fff;
font-family: var(--font-family);
font-size: 0.92rem;
margin-bottom: 16px;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col a {
font-size: 0.88rem;
color: #c7cedd;
}
.footer-col a:hover {
color: var(--primary-color);
}
.footer-social {
display: flex;
gap: 10px;
margin-top: 18px;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
justify-content: center;
}
.footer-social svg {
width: 16px;
height: 16px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.09);
padding-top: 22px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.82rem;
} @media (max-width: 1024px) {
.locations-grid {
grid-template-columns: repeat(3, 1fr);
}
.why-grid,
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.hero .container,
.city-hero .container {
gap: 30px;
}
.industry-grid {
grid-template-columns: repeat(2, 1fr);
}
.creator-types-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.process-steps {
grid-template-columns: repeat(2, 1fr);
}
.case-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-works .container {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.nav-links {
display: none;
}
.nav-toggle {
display: flex;
}
.header-cta .btn-fill {
padding: 11px 18px;
font-size: 0.86rem;
}
.hero .container {
grid-template-columns: 1fr;
padding-bottom: 44px;
}
.hero-visual {
order: -1;
height: 300px;
}
.city-hero .container {
grid-template-columns: 1fr;
padding-bottom: 44px;
}
.city-hero-media {
order: -1;
height: 280px;
}
.stat p {
display: none;
}
.grow-panel {
grid-template-columns: 1fr;
}
.grow-photo {
height: 220px;
}
.grow-copy {
padding: 6px 6px 20px;
}
}
@media (max-width: 640px) {
section {
padding-block: 56px;
}
.container {
padding-inline: 18px;
}
.locations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.why-grid {
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.services-grid {
grid-template-columns: 1fr;
}
.industry-grid {
grid-template-columns: 1fr;
}
.creator-types-grid {
grid-template-columns: 1fr 1fr;
}
.process-steps {
grid-template-columns: 1fr;
}
.case-grid {
grid-template-columns: 1fr;
}
.stats-bar {
grid-template-columns: repeat(2, 1fr);
gap: 18px 0;
border-radius: 18px;
}
.stat {
border-right: none;
padding-inline: 14px;
}
.stat:nth-child(odd) {
border-right: 1px solid var(--border);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.search-bar {
max-width: 100%;
flex-direction: column;
background: transparent;
padding: 0;
box-shadow: none;
gap: 10px;
}
.search-bar input {
background: #fff;
border-radius: 10px;
box-shadow: var(--shadow-soft);
padding: 13px 14px;
}
.search-bar button {
width: 100%;
}
.hero-btn-row,
.grow-btn-row {
flex-direction: column;
}
.hero-btn-row .btn-fill,
.hero-btn-row .btn-outline,
.grow-btn-row .btn-fill,
.grow-btn-row .btn-outline {
width: 100%;
}
.city-hero-media,
.hero-visual {
height: 230px;
}
}
@media (max-width: 420px) {
.locations-grid {
grid-template-columns: 1fr 1fr;
}
.why-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
}
.city-stats {
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
gap: 8px;
border-top: 1px solid #eef0f3;
padding: 9px 0 0px;
margin-top: 15px;
}
.city-stats > div {
width: 100%;
}
.stat-value {
display: block;
color: #17233b;
font-size: 14px;
font-weight: 900;
line-height: normal;
}
.stat-label {
display: block;
color: #667085;
font-size: 12px;
line-height: normal;
margin-top: 3px;
}
.city-divider {
height: 25px;
background: #e4e7ec;
}
.city-button {
font-size: 12px;
font-weight: 900;
}
.location-showcase {
padding: 72px 0 64px;
background: #fff
}
.location-showcase .container {
width: min(1260px, 94%);
margin: auto
}
.location-heading {
text-align: center;
margin-bottom: 32px
}
.location-heading .kicker {
color: #ff5b5f;
font-size: 11px;
font-weight: 900;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 8px
}
.location-heading h2 {
margin: 0;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.05;
letter-spacing: -2.4px;
color: #101828
}
.location-heading h2 em {
font-style: normal;
color: #ef3f58
}
.location-heading p {
max-width: 760px;
margin: 10px auto 0;
color: #667085;
font-size: 14px
}
.location-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.premium-city-card {
background: #fff;
border: 1px solid #e5e8ee;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 9px 26px rgba(16, 24, 40, .07);
transition: .28s ease
}
.premium-city-card:hover {
transform: translateY(-7px);
box-shadow: 0 22px 45px rgba(16, 24, 40, .14)
}
.city-visual {
height: 174px;
position: relative;
overflow: hidden
}
.city-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease
}
.premium-city-card:hover .city-visual img {
transform: scale(1.05)
}
.city-visual:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 14, 25, .06), rgba(7, 14, 25, .03) 45%, rgba(7, 14, 25, .55))
}
.city-badge {
position: absolute;
z-index: 2;
top: 11px;
left: 11px;
background: rgba(255, 255, 255, .9);
padding: 5px 9px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 900;
letter-spacing: .4px;
color: #17233b;
box-shadow: 0 4px 15px rgba(0, 0, 0, .08)
}
.city-fav {
position: absolute;
z-index: 2;
right: 11px;
top: 11px;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: #1b2b46;
font-size: 16px;
cursor: pointer
}
.city-tagline {
position: absolute;
z-index: 2;
left: 12px;
bottom: 10px;
color: #fff;
font: italic 20px Georgia, serif;
text-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}
.city-content {
padding: 14px 12px 12px
}
.city-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px
}
.city-name {
margin: 0;
color: #17233b;
font-size: 22px;
line-height: 1;
letter-spacing: -.8px
}
.city-mini-cta {
width: 29px;
height: 29px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff0ee;
color: #ff5b5f;
font-weight: 900;
font-size: 16px
}
.city-description {
font-size: 10.7px;
line-height: 1.45;
color: #667085;
margin: 8px 0 10px;
min-height: 45px
}
.city-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px
}
.city-tag {
padding: 4.5px 6.5px;
border-radius: 999px;
background: #f8f9fb;
border: 1px solid #edf0f4;
color: #344054;
font-size: 8.4px;
font-weight: 800
}
.city-tag i {
font-style: normal;
color: #ff5260
}
.city-stats {
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
gap: 8px;
border-top: 1px solid #eef0f3;
padding: 9px 0 9px
}
.city-divider {
height: 25px;
background: #e4e7ec
}
.stat-value {
display: block;
color: #17233b;
font-size: 14px;
font-weight: 900;
line-height: 1
}
.stat-label {
display: block;
color: #667085;
font-size: 8px;
margin-top: 3px
}
.city-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 31px;
border-radius: 999px;
border: 1.1px solid #ff5b5f;
color: #ff4f58;
background: #fff;
font-size: 9.5px;
font-weight: 900
}
.city-button.primary {
background: linear-gradient(90deg, #ff6460, #ef3f6a);
color: #fff;
border-color: transparent;
box-shadow: 0 5px 14px rgba(255, 91, 95, .18)
}
.city-button:hover {
box-shadow: 0 7px 17px rgba(255, 91, 95, .14)
}
.location-pager {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 17px
}
.location-pager span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #d8dde7
}
.location-pager .active {
background: #ff5b5f
}
.location-all {
display: flex;
justify-content: center;
margin-top: 20px
}
.location-all a {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 1.1px solid #ff5b5f;
border-radius: 999px;
color: #ff4f58;
font-size: 10px;
font-weight: 900
}
@media(max-width:1050px) {
.location-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:600px) {
.location-grid {
grid-template-columns: 1fr
}
.city-visual {
height: 210px
}
} 
.tags {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 20px
}
.tag {
background: #f8f8fa;
border: 1px solid #eceef2;
border-radius: 999px;
padding: 6px 10px;
font-size: 10.5px;
font-weight: 800;
color: #344054
}
.link {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 900;
color: #101828;
border-top: 1px solid #eef0f3;
padding-top: 15px
}
.link:after {
content: "Explore →";
color: var(--r);
font-weight: 900;
transition: .25s
}
.city:hover .link:after {
transform: translateX(4px)
}
.soft {
background: var(--s)
}
.fg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}
.fc {
background: #fff;
border: 1px solid var(--l);
border-radius: 23px;
padding: 27px
}
.ico {
font-size: 24px
}
.fc h3 {
margin: 8px 0;
font-size: 21px
}
.fc p {
margin: 0;
color: var(--m);
font-size: 14px
}
.niches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.niche {
padding: 20px;
border: 1px solid var(--l);
border-radius: 17px
}
.niche strong {
display: block
}
.niche span {
font-size: 12px;
color: var(--m)
}
.step {
padding: 21px;
border: 1px solid var(--l);
border-radius: 18px
}
.step b {
color: var(--r);
font-size: 16px
}
.step h3 {
margin: 8px 0 4px;
font-size: 17px
}
.step p {
margin: 0;
font-size: 12px;
color: var(--m)
}
.faq {
margin: auto
}
.faq details {
border-bottom: 1px solid var(--l);
padding: 19px 0
}
.faq summary {
font-weight: 800;
cursor: pointer
}
.faq p {
font-size: 14px;
color: var(--m)
}
.cta {
background: var(--n);
color: #fff;
padding: 65px 0
}
.ctag {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px
}
.cta h2 {
font-size: 40px;
line-height: 1.1;
margin: 8px 0
}
.cta p {
color: #b9c0cc
}
.cta a {
background: var(--r);
padding: 14px 21px;
border-radius: 12px;
font-weight: 800;
white-space: nowrap
}
footer {
padding: 30px 0;
color: var(--m);
font-size: 13px
}
.empty {
text-align: center;
color: var(--m);
padding: 35px;
display: none
}
@media(max-width:900px) {
.hg, .fg {
grid-template-columns: 1fr
}
.cards {
grid-template-columns: repeat(2, 1fr)
}
.niches {
grid-template-columns: repeat(2, 1fr)
}
.process {
grid-template-columns: repeat(2, 1fr)
}
.links {
display: none
}
.sg {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:600px) {
.cards, .niches, .process {
grid-template-columns: 1fr
}
.hero h1 {
font-size: 44px
}
.orb {
width: 245px;
height: 245px
}
.ctag {
display: block
}
.search button {
padding: 0 15px
}
.sec {
padding: 58px 0
}
}
.head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 25px;
margin-bottom: 30px;
}
.k {
color: var(--r);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.head p {
max-width: 470px;
color: var(--m);
}
.hero-bg{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
background-color: #0000004e;
}
.hero-bg img{
width: 100%;
height: 100%;
}
@media(max-width: 900px) {
.hero-bg img{
object-position: left;
}
}
@media(max-width: 767px) {
.hero-inner{
padding-top: 120!important;
padding-bottom: 100px!important;
}
}
.overlay {  position: absolute;
z-index: -1;
pointer-events: none;
}
.location-hero {
height: 100vh ;
display: flex;
align-items: center;
}