/*==========================================================
PORTFOLIO PAGE
Bright Ocean Digital
==========================================================*/


/*==========================================================
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;

width:420px;

height:420px;

top:-180px;

right:-150px;

border-radius:50%;

background:

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

filter:blur(30px);

z-index:0;

}

.page-hero .container{

position:relative;

z-index:2;

max-width:820px;

}

.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:720px;

margin:0 auto 42px;

font-size:1.1rem;

line-height:1.8;

color:var(--text);

}

/*==========================================================
FEATURED PROJECTS
==========================================================*/

.portfolio-showcase{

padding:120px 0;

background:#fff;

}

.portfolio-grid{

display:grid;

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

gap:34px;

margin-top:70px;

}

.portfolio-card{

background:#fff;

border-radius:28px;

overflow:hidden;

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

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

transition:.4s ease;

}

.portfolio-card:hover{

transform:translateY(-10px);

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

}

.portfolio-card img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

display:block;

transition:.45s ease;

}

.portfolio-card:hover img{

transform:scale(1.05);

}

.portfolio-content{

padding:30px;

}

.project-type{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:#EAF4FF;

color:var(--primary);

font-size:.8rem;

font-weight:700;

margin-bottom:18px;

}

.portfolio-content h3{

margin-bottom:16px;

}

.portfolio-content p{

line-height:1.8;

}

@media(max-width:1000px){

.portfolio-grid{

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

}

}

@media(max-width:768px){

.page-hero{

padding:150px 0 90px;

}

.portfolio-grid{

grid-template-columns:1fr;

}

}

/*==========================================================
DESIGN PHILOSOPHY
==========================================================*/

.design-philosophy{

padding:120px 0;

background:#F8FBFF;

}

.philosophy-card{

display:grid;

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

gap:30px;

margin-top:70px;

padding:50px;

background:#fff;

border-radius:32px;

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

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

position:relative;

overflow:hidden;

}

.philosophy-card::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:360px;

height:360px;

border-radius:50%;

background:

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

}

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

.belief-item{

display:flex;

align-items:flex-start;

gap:20px;

padding:26px;

border-radius:22px;

transition:.35s ease;

position:relative;

z-index:2;

}

.belief-item:hover{

background:#F5F9FF;

transform:translateY(-5px);

}

.belief-item i{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:

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

color:#fff;

flex-shrink:0;

padding:15px;

box-shadow:

0 18px 35px rgba(10,102,194,.22);

}

.belief-item h3{

margin-bottom:10px;

font-size:1.25rem;

}

.belief-item p{

line-height:1.8;

color:var(--text);

}

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

.belief-item i{

transition:.35s ease;

}

.belief-item:hover i{

transform:

rotate(-8deg)

scale(1.08);

}

@media(max-width:900px){

.philosophy-card{

grid-template-columns:1fr;

padding:35px;

}

}

@media(max-width:768px){

.belief-item{

padding:20px;

}

}

/*==========================================================
PROJECTS IN PROGRESS
==========================================================*/

.projects-progress{

padding:120px 0;

background:#ffffff;

}

.progress-grid{

display:grid;

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

gap:32px;

margin-top:70px;

}

.progress-card{

background:#fff;

padding:40px;

border-radius:30px;

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

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

transition:.4s ease;

display:flex;

flex-direction:column;

position:relative;

overflow:hidden;

}

.progress-card:hover{

transform:translateY(-10px);

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

}

.progress-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:240px;

height:240px;

border-radius:50%;

background:

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

}

/*==========================================================
PROGRESS ICON
==========================================================*/

.progress-icon{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

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

margin-bottom:28px;

color:#fff;

box-shadow:

0 18px 35px rgba(10,102,194,.25);

}

.progress-icon i{

width:34px;

height:34px;

}

.progress-card h3{

margin-bottom:18px;

font-size:1.45rem;

}

.progress-card p{

margin-bottom:28px;

line-height:1.8;

color:var(--text);

flex:1;

}

/*==========================================================
STATUS BADGES
==========================================================*/

.progress-status{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 18px;

border-radius:999px;

font-size:.82rem;

font-weight:700;

width:max-content;

}

.completed{

background:#EAFBF2;

color:#10B981;

}

.development{

background:#FFF6E5;

color:#F59E0B;

}

/*==========================================================
HIGHLIGHT CARD
==========================================================*/

.highlight-card{

background:

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

color:#fff;

}

.highlight-card h3{

color:#fff;

}

.highlight-card p{

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

}

.highlight-card .btn{

margin-top:10px;

}

.progress-icon{

transition:.35s ease;

}

.progress-card:hover .progress-icon{

transform:

rotate(-8deg)

scale(1.08);

}

@media(max-width:1100px){

.progress-grid{

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

}

}

@media(max-width:768px){

.progress-grid{

grid-template-columns:1fr;

}

.progress-card{

padding:30px;

}

}

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

.brand-promise{

padding:120px 0;

background:linear-gradient(
180deg,
#F8FBFF 0%,
#FFFFFF 100%
);

}

.promise-card{

max-width:950px;

margin:0 auto;

padding:70px 60px;

text-align:center;

border-radius:36px;

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

color:#fff;

position:relative;

overflow:hidden;

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

}

.promise-card::before{

content:"";

position:absolute;

width:420px;

height:420px;

top:-220px;

right:-180px;

border-radius:50%;

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

}

.promise-card::after{

content:"";

position:absolute;

width:260px;

height:260px;

bottom:-130px;

left:-100px;

border-radius:50%;

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

}

.promise-card .section-tag{

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

color:#fff;

margin-bottom:28px;

}

.promise-card h2{

color:#fff;

margin-bottom:28px;

font-size:clamp(2.2rem,4vw,3.5rem);

line-height:1.2;

}

.promise-card p{

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

font-size:1.08rem;

line-height:1.9;

max-width:760px;

margin:0 auto;

}

.promise-divider{

width:120px;

height:4px;

margin:45px auto;

border-radius:999px;

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

}

.promise-signature{

font-size:1rem;

line-height:1.8;

color:#fff;

}

.promise-signature strong{

font-size:1.15rem;

font-weight:700;

}

/*==========================================================
PROMISE HOVER
==========================================================*/

.promise-card{

transition:

transform .4s ease,

box-shadow .4s ease;

}

.promise-card:hover{

transform:translateY(-8px);

box-shadow:0 45px 100px rgba(7,27,54,.22);

}

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

@media(max-width:900px){

.promise-card{

padding:50px 35px;

}

}

@media(max-width:768px){

.promise-card h2{

font-size:2rem;

}

.promise-card p{

font-size:1rem;

}

}

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

.portfolio-note{

background:#ffffff;

padding:0 0 100px;

}

.note-box{

max-width:900px;

margin:auto;

padding:60px;

background:linear-gradient(
135deg,
#F8FBFF,
#FFFFFF
);

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

border-radius:30px;

text-align:center;

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

position:relative;

overflow:hidden;

transition:.35s ease;

}

.note-box::before{

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%
);

pointer-events:none;

}

.note-box::after{

content:"";

position:absolute;

bottom:-100px;

left:-100px;

width:220px;

height:220px;

border-radius:50%;

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

pointer-events:none;

}

.note-box:hover{

transform:translateY(-6px);

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

}

.note-box h2{

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

color:var(--heading);

margin-bottom:24px;

line-height:1.2;

}

.note-box p{

max-width:720px;

margin:auto;

font-size:1.08rem;

line-height:1.9;

color:#5D6877;

}

.note-box strong{

color:var(--primary);

font-weight:700;

}

@media(max-width:768px){

.portfolio-note{

padding:0 0 80px;

}

.note-box{

padding:40px 28px;

border-radius:24px;

}

.note-box h2{

font-size:2rem;

}

.note-box p{

font-size:1rem;

line-height:1.8;

}

}