/*==========================================================
SERVICES PAGE
Bright Ocean Digital
Part 1
Hero + Services Grid
==========================================================*/


/*==========================================================
PAGE HERO
==========================================================*/

.page-hero{

position:relative;

overflow:hidden;

padding:180px 0 120px;

text-align:center;

background:
radial-gradient(circle at top right,
rgba(72,168,255,.10),
transparent 45%),

radial-gradient(circle at bottom left,
rgba(10,102,194,.06),
transparent 45%),

#fff;

}

.page-hero::before{

content:"";

position:absolute;

top:-180px;

right:-150px;

width:420px;

height:420px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(10,102,194,.16),
transparent 70%);

filter:blur(35px);

z-index:0;

}

.page-hero .container{

position:relative;

z-index:2;

max-width:900px;

}

.page-hero .section-tag{

margin-bottom:24px;

}

.page-hero h1{

font-size:clamp(3rem,6vw,5rem);

line-height:1.05;

margin-bottom:28px;

color:var(--heading);

}

.page-hero p{

max-width:760px;

margin:0 auto 42px;

font-size:1.1rem;

line-height:1.9;

color:var(--text);

}

.page-hero .btn{

min-width:240px;

}



/*==========================================================
SERVICES SECTION
==========================================================*/

.services-page{

padding:120px 0;

background:#ffffff;

}

.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:32px;

margin-top:70px;

}



/*==========================================================
SERVICE CARD
==========================================================*/

.service-card{

background:#fff;

padding:42px 36px;

border-radius:28px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 20px 50px rgba(7,27,54,.06);

transition:.4s ease;

position:relative;

overflow:hidden;

display:flex;

flex-direction:column;

}

.service-card::before{

content:"";

position:absolute;

top:-140px;

right:-140px;

width:280px;

height:280px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(72,168,255,.12),
transparent 70%);

opacity:0;

transition:.4s ease;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(7,27,54,.12);

}

.service-card:hover::before{

opacity:1;

}



/*==========================================================
SERVICE ICON
==========================================================*/

.service-icon{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

border-radius:22px;

background:

linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

margin-bottom:28px;

box-shadow:0 18px 35px rgba(10,102,194,.22);

transition:.35s ease;

}

.service-card:hover .service-icon{

transform:

rotate(-8deg)

scale(1.08);

}



/*==========================================================
TEXT
==========================================================*/

.service-card h3{

margin-bottom:18px;

font-size:1.45rem;

}

.service-card p{

margin-bottom:24px;

line-height:1.85;

color:var(--text);

}



/*==========================================================
FEATURE LIST
==========================================================*/

.service-card ul{

margin-bottom:30px;

display:flex;

flex-direction:column;

gap:14px;

}

.service-card li{

color:var(--text);

font-weight:500;

display:flex;

align-items:center;

gap:10px;

}



/*==========================================================
LINK
==========================================================*/

.service-link{

margin-top:auto;

font-weight:700;

color:var(--primary);

transition:.35s ease;

}

.service-link:hover{

letter-spacing:.04em;

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.page-hero{

padding:150px 0 90px;

}

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

.service-card{

padding:34px 28px;

}

.page-hero h1{

font-size:clamp(2.5rem,8vw,3.8rem);

}

.page-hero p{

font-size:1rem;

}

}

/*==========================================================
FEATURED SERVICE
==========================================================*/

.featured-service{

padding:120px 0;

background:#F8FBFF;

}

.featured-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.featured-content{

max-width:620px;

}

.featured-content .section-tag{

margin-bottom:22px;

}

.featured-content h2{

margin-bottom:24px;

line-height:1.15;

}

.featured-content>p{

font-size:1.08rem;

line-height:1.9;

color:var(--text);

margin-bottom:40px;

}



/*==========================================================
FEATURE LIST
==========================================================*/

.feature-list{

display:flex;

flex-direction:column;

gap:18px;

margin-bottom:45px;

}

.feature-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:18px 22px;

background:#fff;

border:1px solid rgba(10,102,194,.08);

border-radius:18px;

box-shadow:0 10px 25px rgba(7,27,54,.04);

transition:.35s ease;

}

.feature-item:hover{

transform:translateX(8px);

box-shadow:0 18px 40px rgba(7,27,54,.08);

}

.feature-item span{

width:42px;

height:42px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

font-weight:700;

font-size:1rem;

}

.feature-item p{

margin:0;

line-height:1.7;

color:var(--text);

}



/*==========================================================
FEATURED IMAGE
==========================================================*/

.featured-image{

position:relative;

}

.featured-image::before{

content:"";

position:absolute;

top:-35px;

right:-35px;

width:100%;

height:100%;

border-radius:32px;

background:linear-gradient(
135deg,
rgba(72,168,255,.15),
rgba(10,102,194,.08)
);

z-index:0;

}

.featured-image img{

position:relative;

z-index:2;

width:100%;

display:block;

border-radius:28px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 30px 70px rgba(7,27,54,.12);

transition:.45s ease;

}

.featured-image:hover img{

transform:

translateY(-8px)

scale(1.02);

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

.featured-grid{

grid-template-columns:1fr;

gap:60px;

}

.featured-content{

max-width:100%;

text-align:center;

}

.feature-list{

text-align:left;

}

.featured-content .btn{

margin:auto;

display:inline-flex;

}

.featured-image{

max-width:700px;

margin:auto;

}

}

@media(max-width:768px){

.featured-service{

padding:90px 0;

}

.feature-item{

padding:16px 18px;

}

.feature-item span{

width:38px;

height:38px;

font-size:.9rem;

}

}

/*==========================================================
OUR PROCESS
==========================================================*/

.service-process{

padding:120px 0;

background:#ffffff;

}

.service-process .section-heading{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}



/*==========================================================
TIMELINE GRID
==========================================================*/

.timeline{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

position:relative;

}



/*==========================================================
TIMELINE CARD
==========================================================*/

.timeline-item{

position:relative;

background:#fff;

padding:42px 36px;

border-radius:28px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 20px 50px rgba(7,27,54,.05);

transition:.4s ease;

overflow:hidden;

}

.timeline-item::before{

content:"";

position:absolute;

top:0;

left:0;

width:6px;

height:100%;

background:linear-gradient(
180deg,
#0A66C2,
#48A8FF
);

transition:.35s ease;

}

.timeline-item:hover{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(7,27,54,.10);

}

.timeline-item:hover::before{

width:10px;

}



/*==========================================================
STEP NUMBER
==========================================================*/

.timeline-number{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:28px;

border-radius:22px;

background:linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

font-size:1.35rem;

font-weight:800;

box-shadow:0 18px 35px rgba(10,102,194,.20);

transition:.35s ease;

}

.timeline-item:hover .timeline-number{

transform:

rotate(-8deg)

scale(1.08);

}



/*==========================================================
TEXT
==========================================================*/

.timeline-item h3{

margin-bottom:16px;

font-size:1.45rem;

}

.timeline-item p{

color:var(--text);

line-height:1.85;

}



/*==========================================================
BACKGROUND GLOW
==========================================================*/

.timeline-item::after{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(72,168,255,.12),
transparent 70%);

opacity:0;

transition:.4s ease;

}

.timeline-item:hover::after{

opacity:1;

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.timeline{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.service-process{

padding:90px 0;

}

.timeline{

grid-template-columns:1fr;

gap:25px;

}

.timeline-item{

padding:34px 28px;

}

.timeline-number{

width:64px;

height:64px;

font-size:1.2rem;

}

}

/*==========================================================
FAQ SECTION
==========================================================*/

.faq-section{

padding:120px 0;

background:#F8FBFF;

}

.faq-section .section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}



/*==========================================================
FAQ LIST
==========================================================*/

.faq-list{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}



/*==========================================================
FAQ CARD
==========================================================*/

.faq-item{

background:#fff;

border:1px solid rgba(10,102,194,.08);

border-radius:22px;

overflow:hidden;

box-shadow:0 15px 40px rgba(7,27,54,.05);

transition:.35s ease;

}

.faq-item:hover{

transform:translateY(-5px);

box-shadow:0 25px 60px rgba(7,27,54,.10);

}



/*==========================================================
QUESTION BUTTON
==========================================================*/

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:26px 30px;

background:none;

border:none;

cursor:pointer;

font-size:1.08rem;

font-weight:700;

color:var(--heading);

text-align:left;

transition:.3s ease;

}

.faq-question:hover{

color:var(--primary);

}



/*==========================================================
PLUS / MINUS ICON
==========================================================*/

.faq-question span{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(
135deg,
#0A66C2,
#48A8FF
);

color:#fff;

font-size:1.3rem;

font-weight:700;

flex-shrink:0;

transition:.35s ease;

}

.faq-item:hover .faq-question span{

transform:rotate(90deg);

}



/*==========================================================
ANSWER
==========================================================*/

.faq-answer{

display:none;

padding:0 30px 30px;

animation:faqFade .35s ease;

}

.faq-answer p{

line-height:1.85;

color:var(--text);

}



/*==========================================================
ANIMATION
==========================================================*/

@keyframes faqFade{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==========================================================
ACTIVE STATE
==========================================================*/

.faq-item.active{

border-color:rgba(10,102,194,.25);

box-shadow:0 30px 70px rgba(10,102,194,.12);

}

.faq-item.active .faq-question{

color:var(--primary);

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

.faq-section{

padding:90px 0;

}

.faq-question{

padding:22px;

font-size:1rem;

}

.faq-answer{

padding:0 22px 22px;

}

.faq-question span{

width:34px;

height:34px;

font-size:1.1rem;

}

}

/*==========================================================
FINAL CTA
==========================================================*/

.services-cta{

padding:120px 0;

background:linear-gradient(
135deg,
#071B36,
#0A66C2
);

position:relative;

overflow:hidden;

}

.services-cta::before{

content:"";

position:absolute;

width:700px;

height:700px;

top:-320px;

right:-220px;

background:radial-gradient(
circle,
rgba(255,255,255,.10),
transparent 70%
);

}

.services-cta::after{

content:"";

position:absolute;

width:500px;

height:500px;

bottom:-220px;

left:-180px;

background:radial-gradient(
circle,
rgba(72,168,255,.20),
transparent 70%
);

}

.cta-card{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

text-align:center;

color:#fff;

}

.cta-card .section-tag{

background:rgba(255,255,255,.12);

color:#fff;

backdrop-filter:blur(10px);

}

.cta-card h2{

color:#fff;

font-size:clamp(2.5rem,4vw,3.8rem);

margin:24px 0;

line-height:1.15;

}

.cta-card p{

max-width:700px;

margin:0 auto 45px;

color:rgba(255,255,255,.88);

font-size:1.08rem;

line-height:1.9;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-buttons .btn-secondary{

background:#fff;

color:#0A66C2;

border:none;

}

.cta-buttons .btn-secondary:hover{

background:#eef5ff;

}



/*==========================================================
BRAND PROMISE
==========================================================*/

.brand-promise{

padding:120px 0;

background:#F8FBFF;

}

.promise-card{

max-width:900px;

margin:auto;

background:#fff;

padding:70px;

border-radius:34px;

border:1px solid rgba(10,102,194,.08);

box-shadow:0 35px 80px rgba(7,27,54,.06);

text-align:center;

position:relative;

overflow:hidden;

}

.promise-card::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(
circle,
rgba(72,168,255,.12),
transparent 70%
);

}

.promise-card>*{

position:relative;

z-index:2;

}

.promise-card h2{

margin:22px 0;

line-height:1.2;

}

.promise-card>p{

max-width:700px;

margin:0 auto;

line-height:1.9;

}

.promise-divider{

width:90px;

height:4px;

margin:45px auto;

border-radius:999px;

background:linear-gradient(
90deg,
#0A66C2,
#48A8FF
);

}

.promise-signature{

font-size:1rem;

color:#64748B;

line-height:1.9;

}

.promise-signature strong{

display:block;

font-size:1.2rem;

color:#071B36;

margin-bottom:6px;

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

.services-cta{

padding:90px 0;

}

.cta-card h2{

font-size:2.2rem;

}

.promise-card{

padding:45px 28px;

border-radius:26px;

}

.promise-card h2{

font-size:2rem;

}

}