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

top:-180px;

right:-140px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(10,102,194,.15),
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:700px;

margin:0 auto 42px;

font-size:1.15rem;

color:var(--text);

line-height:1.8;

}

.page-hero .btn{

min-width:240px;

}


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

.about-story{

padding:120px 0;

background:#fff;

}

.story-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}

.story-grid h2{

margin:22px 0 28px;

}

.story-grid p{

margin-bottom:24px;

font-size:1.08rem;

line-height:1.9;

color:var(--text);

}


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

.story-highlight{

position:relative;

overflow:hidden;

padding:60px;

border-radius:32px;

background:

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

color:#fff;

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

}

.story-highlight::before{

content:"";

position:absolute;

width:320px;

height:320px;

top:-150px;

right:-150px;

border-radius:50%;

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

}

.story-highlight::after{

content:"";

position:absolute;

width:180px;

height:180px;

bottom:-90px;

left:-90px;

border-radius:50%;

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

}

.belief-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

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

backdrop-filter:blur(12px);

margin-bottom:28px;

}

.belief-label{

display:inline-block;

font-size:.8rem;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:#9ED3FF;

margin-bottom:20px;

}

.story-highlight blockquote{

font-size:2rem;

font-weight:800;

line-height:1.45;

margin-bottom:30px;

color:#fff;

}

.belief-line{

width:90px;

height:4px;

border-radius:999px;

background:

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

margin-bottom:30px;

}

.story-highlight p{

font-size:1rem;

line-height:1.9;

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

max-width:90%;

}

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

.story-highlight{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.story-highlight:hover{

transform:translateY(-8px);

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

}


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

@media(max-width:900px){

.page-hero{

padding:150px 0 90px;

}

.story-grid{

grid-template-columns:1fr;

gap:50px;

}

.story-highlight{

padding:45px 35px;

}

.story-highlight blockquote{

font-size:1.6rem;

}

}

@media(max-width:768px){

.page-hero h1{

font-size:clamp(2.4rem,8vw,3.6rem);

}

.page-hero p{

font-size:1.05rem;

}

.story-grid{

text-align:center;

}

.story-highlight{

text-align:left;

}

}