/*==========================================================
HOME
HERO
Bright Ocean Digital
==========================================================*/

.hero{

position:relative;

overflow:hidden;

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

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

#ffffff;
}

/* Decorative Glows */

.hero::before{

content:"";

position:absolute;

top:-180px;

right:-120px;

width:520px;

height:520px;

border-radius:50%;

background:

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

filter:blur(45px);

animation:glowMove 10s ease-in-out infinite;

}

.hero::after{

content:"";

position:absolute;

bottom:-200px;

left:-120px;

width:460px;

height:460px;

border-radius:50%;

background:

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

filter:blur(55px);

animation:glowMove 12s ease-in-out infinite reverse;

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:90px;

position:relative;

z-index:2;

}

.hero-content{

max-width:650px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:999px;

background:#EEF6FF;

color:var(--primary);

font-size:.82rem;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

margin-bottom:28px;

}
.hero h1{

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

line-height:1.02;

font-weight:800;

color:var(--heading);

letter-spacing:-0.05em;

margin-bottom:28px;

max-width:700px;

}


.hero h1 span{

display:inline-block;

background:

linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

.hero-text{

font-size:1.15rem;

line-height:1.9;

max-width:560px;

margin-bottom:40px;

color:#556273;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top:10px;

}

.hero-buttons .btn{

min-width:230px;

height:62px;

font-size:1rem;

font-weight:700;

border-radius:999px;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:100%;

max-width:620px;

border-radius:28px;

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

animation:floating 8s ease-in-out infinite;

}

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-content{

margin:auto;

}

.hero-text{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero h1{

font-size:clamp(2.6rem,10vw,4rem);

}

.hero-image{

max-width:500px;

margin:auto;

}

}

/*==========================================================
TRUST BAR
==========================================================*/

.trust-bar{

background:#fff;

border-top:1px solid var(--border);

border-bottom:1px solid var(--border);

}

.trust-grid{

display:grid;

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

gap:30px;

}

.trust-item{

padding:35px;

text-align:center;

background:#fff;

border-radius:24px;

transition:.35s ease;

}

.trust-item:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-md);

}

.trust-item svg{

width:44px;

height:44px;

padding:12px;

border-radius:16px;

background:#EEF6FF;

color:var(--primary);

margin-bottom:20px;

}

.trust-item h3{

margin-bottom:12px;

font-size:1.2rem;

}

.trust-item p{

font-size:.95rem;

}

@media(max-width:900px){

.trust-grid{

grid-template-columns:1fr;

}

}

/*==========================================================
BELIEF
==========================================================*/

.belief{

background:

linear-gradient(

135deg,

#071B36,

#0A66C2

);

text-align:center;

color:#fff;

}

.belief h2{

max-width:850px;

margin:auto;

color:#fff;

font-size:clamp(2rem,4vw,3rem);

line-height:1.4;

font-weight:700;

}

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

.services{

background:#F8FBFF;

}

.services-grid{

display:grid;

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

gap:32px;

margin-top:70px;

}

.services-cta{

margin-top:80px;

}

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

}

.service-card{

position:relative;

background:#fff;

padding:32px;

border-radius:28px;

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

overflow:hidden;

transition:.4s ease;

box-shadow:

0 18px 45px rgba(7,27,54,.06);

}

.service-card::before{

content:"";

position:absolute;

top:-120px;

right:-100px;

width:250px;

height:250px;

background:

radial-gradient(

circle,

rgba(72,168,255,.16),

transparent 70%

);

opacity:0;

transition:.4s;

}

.service-card:hover::before{

opacity:1;

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:

0 35px 80px rgba(7,27,54,.10);

}

.service-icon{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primary-light)

);

color:#fff;

font-size:34px;

margin-bottom:28px;

transition:.35s;

}

.service-card:hover .service-icon{

transform:

rotate(-8deg)

scale(1.08);

}

.service-card h3{

font-size:1.45rem;

margin-bottom:18px;

}

.service-card p{

margin-bottom:28px;

line-height:1.8;

}

.service-link{

font-weight:700;

color:var(--primary);

}

.service-link:hover{

letter-spacing:.04em;

}

.service-card.featured{

border:2px solid var(--primary);

background:

linear-gradient(

180deg,

#ffffff,

#F9FCFF

);

}

/*==========================================================
WHY CHOOSE US
==========================================================*/

.why-us{

background:#fff;

}

.why-grid{

display:grid;

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

gap:32px;

margin-top:70px;

}

.why-card{

background:#fff;

padding:42px;

border-radius:28px;

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

transition:.4s ease;

position:relative;

overflow:hidden;

}

.why-card:hover{

transform:translateY(-10px);

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

}

.why-number{

font-size:4rem;

font-weight:800;

line-height:1;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:22px;

}

.why-card h3{

margin-bottom:18px;

font-size:1.4rem;

}

@media(max-width:900px){

.why-grid{

grid-template-columns:1fr;

}

}

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

.process{

background:#F8FBFF;

}

.timeline{

display:grid;

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

gap:28px;

margin-top:70px;

}

.timeline-item{

background:#fff;

padding:38px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.timeline-item:hover{

transform:translateY(-10px);

}

.timeline-circle{

width:72px;

height:72px;

margin:0 auto 24px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

color:#fff;

font-size:1.5rem;

font-weight:700;

}

.timeline-item h3{

margin-bottom:14px;

}

@media(max-width:900px){

.timeline{

grid-template-columns:1fr;

}

}

/*==========================================================
PORTFOLIO
==========================================================*/

.portfolio{

background:#fff;

}

.portfolio-grid{

display:grid;

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

gap:34px;

margin-top:70px;

}

.portfolio-card{

background:#fff;

border-radius:30px;

overflow:hidden;

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

transition:.4s;

}

.portfolio-card:hover{

transform:translateY(-10px);

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

}

.portfolio-image{

height:260px;

display:flex;

align-items:center;

justify-content:center;

font-size:1.5rem;

font-weight:700;

color:#fff;

overflow:hidden;

border-radius:24px;

aspect-ratio:16/10;

background:#F5F8FC;

}

.portfolio-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.5s ease;

}

.portfolio-card:hover .portfolio-image img{

transform:scale(1.05);

}

.portfolio-content{

padding:34px;

}

.portfolio-content h3{

margin-bottom:14px;

}

@media(max-width:900px){

.portfolio-grid{

grid-template-columns:1fr;

}

}

/*==========================================================
STORY
==========================================================*/

.story{

background:#F8FBFF;

}

.story-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

.story-card{

background:#fff;

padding:50px;

border-radius:28px;

box-shadow:var(--shadow-md);

text-align:center;

}

.story-card h3{

margin-bottom:24px;

}

.story-card blockquote{

font-size:1.4rem;

font-weight:700;

line-height:1.7;

color:var(--heading);

}

@media(max-width:900px){

.story-grid{

grid-template-columns:1fr;

}

}

/*==========================================================
CONTACT
==========================================================*/

.contact{

background:#fff;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.contact-card{

background:#fff;

padding:42px;

border-radius:30px;

box-shadow:var(--shadow-lg);

}

.contact-features{

display:grid;

gap:18px;

margin-top:35px;

}

.feature-item{

display:flex;

align-items:center;

gap:14px;

}

.feature-item svg{

color:var(--primary);

}

@media(max-width:900px){

.contact-wrapper{

grid-template-columns:1fr;

}

}

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

.final-cta{

padding:120px 0;

background:

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

}

.cta-box{

max-width:900px;

margin:auto;

padding:80px;

border-radius:36px;

text-align:center;

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

}

.cta-box h2{

color:#fff;

margin-bottom:24px;

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

}

.cta-box p{

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

max-width:680px;

margin:0 auto 40px;

}

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

.brand-promise{

background:#fff;

}

.promise-card{

max-width:950px;

margin:auto;

padding:70px;

border-radius:34px;

background:#F8FBFF;

text-align:center;

box-shadow:var(--shadow-md);

}

.promise-card h2{

margin:22px 0;

}

.promise-divider{

width:120px;

height:4px;

margin:40px auto;

background:

linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

border-radius:999px;

}

.promise-signature{

font-size:1.1rem;

color:var(--heading);

}

/*==========================================================
GLOBAL HOVER
==========================================================*/

.service-card,
.portfolio-card,
.why-card,
.timeline-item,
.story-card,
.promise-card{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.service-card:hover,
.portfolio-card:hover,
.why-card:hover,
.timeline-item:hover,
.story-card:hover,
.promise-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

/*==========================================================
IMAGE POLISH
==========================================================*/

img{

border-radius:18px;

}

.hero-image img{

border-radius:30px;

box-shadow:

0 40px 90px rgba(7,27,54,.16);

}

/*==========================================================
SECTION POLISH
==========================================================*/

.section-heading{

margin-bottom:70px;

}

.section-heading h2{

margin-bottom:18px;

}

.section-heading p{

max-width:720px;

margin:auto;

}

/*==========================================================
MOBILE
==========================================================*/

@media(max-width:768px){

section{

padding:80px 0;

}

.cta-box{

padding:45px 28px;

}

.promise-card{

padding:40px 24px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}

}

/*==========================================================
PAGE LOAD
==========================================================*/

body{

animation:fadeIn .7s ease;

}

/*==========================================================
INDUSTRIES WE HELP GROW
==========================================================*/

.industries{

background:#F8FBFF;

}

.industries-grid{

display:grid;

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

gap:32px;

margin-top:70px;

}

.industry-card{

background:#fff;

padding:42px 34px;

border-radius:28px;

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

text-align:center;

box-shadow:var(--shadow-sm);

transition:.35s ease;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

top:-100px;

right:-80px;

width:220px;

height:220px;

background:

radial-gradient(

circle,

rgba(72,168,255,.12),

transparent 70%

);

opacity:0;

transition:.4s;

}

.industry-card:hover::before{

opacity:1;

}

.industry-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-lg);

}

.industry-card svg{

width:72px;

height:72px;

padding:18px;

margin-bottom:24px;

border-radius:20px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primary-light)

);

color:#fff;

}

.industry-card h3{

margin-bottom:16px;

font-size:1.35rem;

font-weight:700;

}

.industry-card p{

line-height:1.8;

font-size:.98rem;

color:var(--text);

}

.industry-card.featured{

background:

linear-gradient(

180deg,

#ffffff,

#F5FAFF

);

border:2px solid var(--primary);

}

.industries-footer{

margin-top:70px;

padding:60px;

background:#fff;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow-md);

}

.industries-footer h3{

font-size:2rem;

margin-bottom:20px;

color:var(--heading);

}

.industries-footer p{

max-width:700px;

margin:0 auto 35px;

font-size:1.08rem;

line-height:1.9;

}

.industries-footer .btn{

min-width:240px;

}

/*==============================
TABLET
==============================*/

@media(max-width:992px){

.industries-grid{

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

}

}

/*==============================
MOBILE
==============================*/

@media(max-width:768px){

.industries{

padding:90px 0;

}

.industries-grid{

grid-template-columns:1fr;

gap:24px;

}

.industry-card{

padding:34px 26px;

}

.industries-footer{

padding:40px 24px;

}

.industries-footer h3{

font-size:1.7rem;

}

}

/*==========================================================
WHY BUSINESSES LOSE CUSTOMERS ONLINE
==========================================================*/

.business-problems{

background:#ffffff;

}

.problems-grid{

display:grid;

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

gap:32px;

margin-top:70px;

}

.problem-card{

background:#F8FBFF;

padding:40px 34px;

border-radius:28px;

text-align:center;

transition:.35s ease;

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

}

.problem-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.problem-card svg{

width:70px;

height:70px;

padding:18px;

border-radius:20px;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

color:#fff;

margin-bottom:24px;

}

.problem-card h3{

margin-bottom:18px;

font-size:1.35rem;

}

.problem-card p{

line-height:1.8;

}

.problems-footer{

margin-top:70px;

padding:70px;

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

border-radius:32px;

text-align:center;

}

.problems-footer h3{

color:#fff;

font-size:2.3rem;

margin-bottom:20px;

}

.problems-footer p{

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

max-width:720px;

margin:0 auto 35px;

line-height:1.9;

font-size:1.08rem;

}

@media(max-width:992px){

.problems-grid{

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

}

}

@media(max-width:768px){

.problems-grid{

grid-template-columns:1fr;

}

.problems-footer{

padding:45px 25px;

}

}

/*==========================================================
WHY INVEST
==========================================================*/

.website-value{

background:#F8FBFF;

}

.comparison-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.comparison-card{

background:#fff;

padding:45px;

border-radius:28px;

box-shadow:var(--shadow-md);

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

}

.comparison-card h3{

margin-bottom:25px;

font-size:1.6rem;

}

.comparison-card ul{

list-style:none;

padding:0;

margin:0;

}

.comparison-card li{

padding:14px 0;

border-bottom:1px solid rgba(0,0,0,.06);

font-size:1rem;

line-height:1.7;

}

.comparison-card li:last-child{

border:none;

}

.negative{

border-left:6px solid #E74C3C;

}

.positive{

border-left:6px solid var(--primary);

}

.value-footer{

margin-top:70px;

text-align:center;

background:#fff;

padding:60px;

border-radius:30px;

box-shadow:var(--shadow-md);

}

.value-footer h3{

font-size:2rem;

margin-bottom:20px;

}

.value-footer p{

max-width:760px;

margin:0 auto 35px;

line-height:1.9;

font-size:1.08rem;

}

@media(max-width:768px){

.comparison-grid{

grid-template-columns:1fr;

}

.value-footer{

padding:40px 25px;

}

}