/* =========================================================
   SCCORIA SUCCESS STORIES
   Ultra Premium V1
   File: success-story.css
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root{

--navy:#071529;
--blue:#123D7A;
--gold:#D4AF37;
--gold-light:#F5C542;
--white:#ffffff;
--light:#F8FAFC;
--text:#64748B;
--border:#E2E8F0;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

.sccoria-success-single{

font-family:'Outfit',sans-serif;
background:#F8FAFC;
overflow:hidden;

}

.success-container{

max-width:1400px;
margin:auto;
padding:0 20px;

}

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

.success-hero{

padding:100px 0;

background:
linear-gradient(
135deg,
#071529 0%,
#0C2140 50%,
#123D7A 100%
);

position:relative;
overflow:hidden;

}

.success-hero::before{

content:'';

position:absolute;

width:600px;
height:600px;

border-radius:50%;

top:-250px;
right:-200px;

background:
radial-gradient(
circle,
rgba(212,175,55,.25),
transparent
);

}

.success-hero::after{

content:'';

position:absolute;

width:500px;
height:500px;

border-radius:50%;

bottom:-250px;
left:-200px;

background:
radial-gradient(
circle,
rgba(255,255,255,.08),
transparent
);

}

.success-hero-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;

position:relative;
z-index:2;

}

.success-badge{

display:inline-block;

padding:12px 22px;

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

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

backdrop-filter:blur(12px);

border-radius:999px;

color:#fff;

font-size:13px;
font-weight:700;

letter-spacing:2px;

margin-bottom:25px;

}

.success-left h1{

font-size:clamp(42px,5vw,78px);

font-weight:900;

line-height:1.05;

color:#fff;

margin-bottom:25px;

}

.success-left p{

font-size:19px;

line-height:1.8;

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

max-width:700px;

}

.success-stat-grid{

display:grid;

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

gap:20px;

margin-top:40px;

}

.success-stat-card{

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

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

backdrop-filter:blur(15px);

padding:28px;

border-radius:24px;

}

.success-stat-card strong{

display:block;

font-size:28px;

font-weight:900;

color:#fff;

margin-bottom:8px;

}

.success-stat-card span{

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

font-size:14px;

}

.success-right{

text-align:center;

}

.success-right img{

width:100%;
max-width:500px;

aspect-ratio:4/5;

object-fit:cover;

border-radius:40px;

border:6px solid
rgba(255,255,255,.15);

display:block;

margin:auto;

box-shadow:
0 30px 70px rgba(0,0,0,.25);

}

/* ==========================================
   PROFILE SECTION
========================================== */

.student-profile-section{

padding:80px 0;

margin-top:-60px;

position:relative;
z-index:20;

}

.student-profile-card{

background:#fff;

border-radius:35px;

padding:45px;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.student-profile-card h2{

font-size:36px;

font-weight:900;

color:var(--navy);

margin-bottom:35px;

}

.profile-grid{

display:grid;

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

gap:20px;

}

.profile-item{

padding:25px;

background:#F8FAFC;

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

border-radius:22px;

}

.profile-item span{

display:block;

font-size:13px;

font-weight:600;

color:var(--text);

margin-bottom:8px;

text-transform:uppercase;

letter-spacing:1px;

}

.profile-item strong{

font-size:18px;

font-weight:800;

color:var(--navy);

line-height:1.5;

}

/* ==========================================
   HEADINGS
========================================== */

.section-heading{

text-align:center;

margin-bottom:50px;

}

.section-heading span{

display:block;

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:var(--gold);

margin-bottom:12px;

}

.section-heading h2{

font-size:46px;

font-weight:900;

line-height:1.1;

color:var(--navy);

}

/* ==========================================
   RESULT IMAGE
========================================== */

.result-image-section{

padding:100px 0;

}

.result-image-box{

background:#fff;

padding:30px;

border-radius:35px;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

.result-image-box img{

width:100%;
height:auto;

display:block;

border-radius:25px;

object-fit:contain;

}

/* ==========================================
   TESTIMONIAL
========================================== */

.testimonial-section{

padding:80px 0;

}

.testimonial-card{

max-width:1000px;

margin:auto;

background:#fff;

padding:60px;

border-radius:40px;

text-align:center;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.quote-icon{

width:90px;
height:90px;

display:flex;
align-items:center;
justify-content:center;

margin:auto;

border-radius:50%;

font-size:38px;

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

color:#071529;

margin-bottom:30px;

}

.testimonial-card p{

font-size:24px;

line-height:1.8;

font-style:italic;

color:#334155;

margin-bottom:25px;

}

.testimonial-card h3{

font-size:26px;

font-weight:900;

color:var(--navy);

}

/* ==========================================
   VIDEO
========================================== */

.video-section{

padding:100px 0;

background:#fff;

}

.video-box{

overflow:hidden;

border-radius:35px;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.video-box iframe{

width:100%;
height:700px;

border:none;

display:block;

}

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

.full-story-section{

padding:100px 0;

}

.story-content{

max-width:1000px;

margin:auto;

background:#fff;

padding:60px;

border-radius:35px;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.story-content h2{

font-size:34px;

font-weight:900;

color:var(--navy);

margin:40px 0 20px;

}

.story-content h2:first-child{

margin-top:0;

}

.story-content p{

font-size:18px;

line-height:2;

color:#475569;

margin-bottom:22px;

}

/* ==========================================
   RELATED STORIES
========================================== */

.related-stories-section{

padding:100px 0;

background:#fff;

}

.related-story-grid{

display:grid;

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

gap:30px;

}

.related-story-card{

display:block;

background:#fff;

border-radius:30px;

overflow:hidden;

text-decoration:none;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.related-story-card:hover{

transform:
translateY(-10px);

}

.related-story-card img{

width:100%;

height:340px;

object-fit:cover;

display:block;

}

.related-story-card h3{

padding:25px;

font-size:22px;

font-weight:800;

line-height:1.4;

color:var(--navy);

}

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

.success-cta{

padding:120px 0;

text-align:center;

background:
linear-gradient(
135deg,
#071529,
#123D7A
);

}

.success-cta h2{

font-size:56px;

font-weight:900;

line-height:1.1;

color:#fff;

margin-bottom:25px;

}

.success-cta p{

max-width:800px;

margin:auto;

font-size:20px;

line-height:1.8;

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

margin-bottom:40px;

}

.cta-btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:18px 40px;

border-radius:999px;

text-decoration:none;

font-size:16px;

font-weight:800;

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

color:#071529;

transition:.3s;

}

.cta-btn:hover{

transform:
translateY(-4px);

box-shadow:
0 15px 30px rgba(212,175,55,.35);

}

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

@media(max-width:1100px){

.success-hero-grid{

grid-template-columns:1fr;

}

.profile-grid{

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

}

.related-story-grid{

grid-template-columns:
1fr 1fr;

}

.video-box iframe{

height:500px;

}

}

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

@media(max-width:768px){

.success-container{

padding:0 15px;

}

.success-hero{

padding:70px 0;

}

.success-left h1{

font-size:36px;

}

.success-left p{

font-size:16px;

}

.success-stat-grid{

grid-template-columns:1fr;

}

.student-profile-card{

padding:25px;

}

.profile-grid{

grid-template-columns:
1fr 1fr;

gap:12px;

}

.profile-item{

padding:15px;

}

.profile-item strong{

font-size:15px;

}

.section-heading h2{

font-size:32px;

}

.testimonial-card{

padding:30px 20px;

}

.testimonial-card p{

font-size:18px;

}

.story-content{

padding:30px 20px;

}

.story-content h2{

font-size:26px;

}

.story-content p{

font-size:16px;

line-height:1.9;

}

.related-story-grid{

grid-template-columns:
1fr;

}

.related-story-card img{

height:280px;

}

.video-box iframe{

height:280px;

}

.success-cta h2{

font-size:34px;

}

.success-cta p{

font-size:16px;

}

}

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

@media(max-width:480px){

.profile-grid{

grid-template-columns:
1fr;

}

.success-left h1{

font-size:30px;

}

.success-right img{

max-width:320px;

}

}