/* Start custom CSS for html, class: .elementor-element-607b553 *//* =====================================================
DIGITAL MARKETING SERVICES PAGE
===================================================== */
.services-page {
--services-primary: #6c4df6;
--services-primary-dark: #5134d8;
--services-dark: #11121a;
--services-text: #60626f;
--services-light: #f7f7fb;
--services-border: #e7e7ee;
--services-white: #ffffff;
font-family: Arial, Helvetica, sans-serif;
color: var(--services-dark);
overflow: hidden;
}
/* =====================================================
CONTAINER
===================================================== */
.services-container {
width: min(1180px, 90%);
margin: 0 auto;
}
/* =====================================================
COMMON EYEBROW
===================================================== */
.services-eyebrow {
display: inline-block;
color: var(--services-primary);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 18px;
}
/* =====================================================
HERO
===================================================== */
.services-hero {
position: relative;
min-height: 700px;
display: flex;
align-items: center;
background:
radial-gradient(
circle at 85% 40%,
rgba(108,77,246,.12),
transparent 30%
),
#fafaff;
}
.services-hero::before {
content: "";
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background: rgba(108,77,246,.06);
top: -150px;
left: -150px;
}
.services-hero-content {
width: 52%;
position: relative;
z-index: 2;
}
.services-hero-content h1 {
margin: 0 0 25px;
font-size: clamp(48px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -2px;
}
.services-hero-content h1 span {
display: block;
color: var(--services-primary);
}
.services-hero-content p {
max-width: 610px;
color: var(--services-text);
font-size: 17px;
line-height: 1.8;
margin-bottom: 35px;
}
/* =====================================================
HERO BUTTONS
===================================================== */
.services-hero-buttons {
display: flex;
align-items: center;
gap: 15px;
}
.services-primary-btn {
display: inline-flex;
align-items: center;
gap: 13px;
padding: 15px 24px;
background: var(--services-primary);
color: #ffffff !important;
text-decoration: none !important;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
transition: .3s ease;
}
.services-primary-btn span {
font-size: 20px;
transition: transform .3s ease;
}
.services-primary-btn:hover {
background: var(--services-primary-dark);
transform: translateY(-3px);
}
.services-primary-btn:hover span {
transform: translateX(5px);
}
.services-secondary-btn {
padding: 14px 22px;
border: 1px solid var(--services-border);
color: var(--services-dark) !important;
text-decoration: none !important;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
background: #ffffff;
transition: .3s ease;
}
.services-secondary-btn:hover {
border-color: var(--services-primary);
color: var(--services-primary) !important;
}
/* =====================================================
HERO VISUAL
===================================================== */
.services-hero-visual {
position: absolute;
width: 480px;
height: 480px;
right: 7%;
top: 50%;
transform: translateY(-50%);
}
.hero-orbit {
position: absolute;
border: 1px solid rgba(108,77,246,.22);
border-radius: 50%;
}
.orbit-one {
width: 420px;
height: 420px;
top: 30px;
left: 30px;
}
.orbit-two {
width: 310px;
height: 310px;
top: 85px;
left: 85px;
}
.hero-center-card {
position: absolute;
width: 190px;
height: 190px;
top: 145px;
left: 145px;
background: var(--services-dark);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow:
0 30px 70px rgba(0,0,0,.18);
z-index: 3;
}
.hero-center-icon {
color: #9c8cff;
font-size: 32px;
margin-bottom: 8px;
}
.hero-center-card span {
font-size: 10px;
letter-spacing: 2px;
color: #d5d4df;
}
.hero-center-card strong {
color: #9c8cff;
font-size: 18px;
margin: 2px 0;
}
.hero-center-card small {
margin-top: 7px;
color: #ffffff;
letter-spacing: 2px;
font-size: 9px;
}
.hero-floating-card {
position: absolute;
z-index: 5;
background: #ffffff;
padding: 15px 20px;
border-radius: 10px;
box-shadow:
0 15px 40px rgba(20,20,40,.12);
display: flex;
flex-direction: column;
}
.hero-floating-card strong {
color: var(--services-primary);
font-size: 16px;
}
.hero-floating-card span {
color: #777985;
font-size: 11px;
margin-top: 3px;
}
.hero-card-one {
top: 45px;
right: 15px;
}
.hero-card-two {
bottom: 50px;
left: 10px;
}
/* =====================================================
INTRO
===================================================== */
.services-intro {
padding: 110px 0;
background: #ffffff;
}
.services-intro-grid {
display: grid;
grid-template-columns: 1fr .8fr;
gap: 100px;
align-items: start;
}
.services-intro h2 {
font-size: clamp(40px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -1px;
margin: 0;
}
.services-intro h2 span {
display: block;
color: var(--services-primary);
}
.services-intro p {
color: var(--services-text);
font-size: 15px;
line-height: 1.8;
margin: 0 0 18px;
}
/* =====================================================
SERVICES LIST
===================================================== */
.services-list {
padding: 110px 0;
background: var(--services-light);
}
.services-section-heading {
max-width: 700px;
margin-bottom: 60px;
}
.services-section-heading h2 {
font-size: clamp(40px, 4vw, 58px);
line-height: 1.08;
margin: 0 0 18px;
}
.services-section-heading h2 span {
color: var(--services-primary);
}
.services-section-heading p {
color: var(--services-text);
line-height: 1.8;
font-size: 15px;
margin: 0;
}
/* =====================================================
SERVICE GRID
===================================================== */
.service-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* =====================================================
SERVICE CARD
===================================================== */
.service-big-card {
position: relative;
background: #ffffff;
border: 1px solid var(--services-border);
border-radius: 15px;
padding: 32px;
min-height: 485px;
overflow: hidden;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.service-big-card:hover {
transform: translateY(-8px);
border-color: var(--services-primary);
box-shadow:
0 25px 55px rgba(20,20,40,.09);
}
/* CARD TOP */
.service-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 35px;
}
.service-number {
color: var(--services-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.service-arrow {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--services-border);
border-radius: 50%;
color: #555765;
transition: .3s ease;
}
.service-big-card:hover .service-arrow {
background: var(--services-primary);
border-color: var(--services-primary);
color: #ffffff;
transform: rotate(45deg);
}
/* ICON */
.service-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #eeeafd;
color: var(--services-primary);
border-radius: 12px;
font-size: 28px;
margin-bottom: 25px;
transition: .3s ease;
}
.service-big-card:hover .service-icon {
background: var(--services-primary);
color: #ffffff;
transform: scale(1.05);
}
/* TITLE */
.service-big-card h3 {
color: var(--services-dark);
font-size: 22px;
line-height: 1.25;
margin: 0 0 15px;
}
.service-big-card h3 span {
color: var(--services-primary);
display: block;
}
/* DESCRIPTION */
.service-big-card > p {
color: #70727e;
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
/* LIST */
.service-big-card ul {
list-style: none;
padding: 0;
margin: 0 0 25px;
}
.service-big-card li {
position: relative;
color: #555765;
font-size: 12px;
margin-bottom: 8px;
padding-left: 17px;
}
.service-big-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--services-primary);
font-weight: 700;
}
/* CARD LINK */
.service-big-card > a {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--services-primary) !important;
text-decoration: none !important;
font-size: 13px;
font-weight: 700;
}
.service-big-card > a span {
transition: transform .3s ease;
}
.service-big-card > a:hover span {
transform: translateX(5px);
}
/* =====================================================
ADVANTAGE
===================================================== */
.services-advantage {
padding: 120px 0;
background: var(--services-dark);
color: #ffffff;
}
.advantage-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 110px;
align-items: center;
}
.advantage-content h2 {
font-size: clamp(40px, 4vw, 57px);
line-height: 1.08;
margin: 0 0 25px;
}
.advantage-content h2 span {
color: #9b8cff;
}
.advantage-content p {
color: #bfc0ca;
line-height: 1.8;
font-size: 15px;
margin-bottom: 30px;
}
.advantage-content .services-eyebrow {
color: #9b8cff;
}
/* ADVANTAGE POINTS */
.advantage-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.advantage-point {
padding: 28px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
transition: .3s ease;
}
.advantage-point:hover {
border-color: #6c4df6;
background: rgba(108,77,246,.08);
transform: translateY(-5px);
}
.advantage-point > span {
color: #9b8cff;
font-size: 12px;
font-weight: 700;
}
.advantage-point h3 {
font-size: 18px;
margin: 18px 0 8px;
}
.advantage-point p {
color: #aeb0bd;
font-size: 13px;
line-height: 1.7;
margin: 0;
}
/* =====================================================
PROCESS
===================================================== */
.services-process {
padding: 120px 0;
background: #ffffff;
}
.process-heading {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.process-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
}
.process-step {
text-align: center;
}
.process-number {
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
background: #eeeafd;
color: var(--services-primary);
border-radius: 50%;
font-size: 13px;
font-weight: 700;
transition: .3s ease;
}
.process-step:hover .process-number {
background: var(--services-primary);
color: #ffffff;
}
.process-step h3 {
font-size: 20px;
margin: 0 0 10px;
}
.process-step p {
color: #70727e;
font-size: 13px;
line-height: 1.7;
margin: 0;
}
.process-line {
width: 55px;
height: 1px;
background: #dddde5;
}
/* =====================================================
CTA
===================================================== */
.services-cta {
padding: 120px 0;
background: var(--services-light);
text-align: center;
}
.services-cta-content {
max-width: 800px;
margin: 0 auto;
}
.services-cta h2 {
font-size: clamp(42px, 5vw, 65px);
line-height: 1.07;
letter-spacing: -1.5px;
margin: 0 0 25px;
}
.services-cta h2 span {
display: block;
color: var(--services-primary);
}
.services-cta p {
max-width: 600px;
margin: 0 auto 30px;
color: var(--services-text);
font-size: 16px;
line-height: 1.8;
}
.services-cta-btn {
display: inline-flex;
align-items: center;
gap: 13px;
padding: 16px 25px;
background: var(--services-dark);
color: #ffffff !important;
text-decoration: none !important;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
transition: .3s ease;
}
.services-cta-btn span {
font-size: 20px;
transition: transform .3s ease;
}
.services-cta-btn:hover {
background: var(--services-primary);
transform: translateY(-3px);
}
.services-cta-btn:hover span {
transform: translateX(5px);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1000px) {
.services-hero {
min-height: auto;
padding: 100px 0;
}
.services-hero-content {
width: 100%;
max-width: 700px;
}
.services-hero-visual {
display: none;
}
.service-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-intro-grid {
gap: 50px;
}
.advantage-grid {
gap: 60px;
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 45px;
}
.process-line {
display: none;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.services-container {
width: 88%;
}
.services-hero {
padding: 70px 0;
}
.services-hero-content h1 {
font-size: 43px;
letter-spacing: -1px;
}
.services-hero-content p {
font-size: 15px;
}
.services-hero-buttons {
flex-direction: column;
align-items: flex-start;
}
.services-intro,
.services-list,
.services-advantage,
.services-process,
.services-cta {
padding: 75px 0;
}
.services-intro-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.services-intro h2,
.services-section-heading h2 {
font-size: 39px;
}
.service-cards-grid {
grid-template-columns: 1fr;
}
.service-big-card {
min-height: auto;
padding: 28px;
}
.advantage-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.advantage-points {
grid-template-columns: 1fr;
}
.process-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.process-step {
max-width: 300px;
margin: 0 auto;
}
.services-cta h2 {
font-size: 40px;
}
.services-cta p {
font-size: 14px;
}
}/* End custom CSS */