/* =========================================
GLOBAL SECTION STYLING
========================================= */

section{
position:relative;
overflow:hidden;
}

.section-title{
font-size:42px;
font-weight:600;
margin-bottom:20px;

background:linear-gradient(90deg,#22c55e,#16a34a,#4ade80);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


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

.about-hero{

min-height:90vh;

display:flex;
align-items:center;

padding:120px 20px;

background:linear-gradient(
135deg,
#022c22,
#064e3b 40%,
#065f46
);

position:relative;

overflow:hidden;

}


/* CONTAINER */

.about-hero-container{

max-width:1200px;

margin:auto;

width:100%;

}


/* GRID */

.about-hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}


/* TAG */

.about-tag{

display:inline-block;

margin-bottom:18px;

padding:6px 14px;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

color:#d1fae5;

background:rgba(255,255,255,0.08);

border:1px solid rgba(255,255,255,0.15);

border-radius:20px;

}


/* MAIN HEADING */

.about-hero-heading h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:white;

letter-spacing:-1px;

}


/* GRADIENT TEXT */

.gradient-text{

background:linear-gradient(
90deg,
#93c5fd,
#60a5fa,
#3b82f6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* PARAGRAPH */

.about-hero-text p{

font-size:18px;

line-height:1.8;

color:#cbd5f5;

max-width:520px;

}


/* ========================================
GLOW EFFECTS
======================================== */

.about-glow{

position:absolute;

width:500px;
height:500px;

background:radial-gradient(
circle,
rgba(16,185,129,0.35),
transparent 70%
);

filter:blur(140px);

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

}

.about-glow-left{

top:-200px;
left:-200px;

}

.about-glow-right{

bottom:-200px;
right:-200px;

}


@keyframes glowMove{

0%{
transform:translate(0,0);
}

100%{
transform:translate(80px,40px);
}

}
@media (max-width:900px){

.about-hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.about-hero-heading h1{

font-size:48px;

}

.about-hero-text p{

margin:auto;

}

}

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

.about-story{
padding:110px 0;
background:#ffffff;
}

.story-text{
color:#555;
line-height:1.8;
margin-bottom:18px;
font-size:16px;
}

.story-image img{

border-radius:16px;

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

transition:all .5s ease;

}

.story-image img:hover{

transform:scale(1.05);

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

}


/* =========================================
FEATURE SECTION
========================================= */

.about-features{

padding:110px 0;
background:#fafafa;

}


/* FEATURE CARD */

.feature-card{

background:#ffffff;

padding:34px 28px;

border-radius:12px;

text-align:center;

border:1px solid #f0f0f0;

transition:all .35s ease;

box-shadow:0 4px 12px rgba(0,0,0,0.04);

}


/* ICON */

.feature-icon{

font-size:28px;

width:56px;
height:56px;

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

margin:0 auto 16px auto;

border-radius:50%;

background:#f7f7f7;

color:#444;

transition:.3s;

}


/* TEXT */

.feature-card h3{

font-size:18px;
font-weight:600;
margin-bottom:8px;

}

.feature-card p{

font-size:14px;
color:#666;

}


/* HOVER EFFECT */

.feature-card:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(0,0,0,0.12);

border-color:#e5e5e5;

}


/* ICON HOVER */

.feature-card:hover .feature-icon{

background:#f1f1f1;

}




/* =========================================
CRAFT SECTION
========================================= */

.about-craft{

padding:110px 0;

background:white;

}

.craft-image img{

border-radius:16px;

box-shadow:
0 20px 45px rgba(0,0,0,0.12);

transition:.4s;

}

.craft-image img:hover{

transform:scale(1.04);

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

}


/* =========================================
CTA SECTION (DARK THEME)
========================================= */

.about-cta{

padding:120px 0;

background:linear-gradient(
135deg,
#022c22,
#064e3b,
#065f46
);

position:relative;

overflow:hidden;

}


/* BLUE GLOW */

.cta-blue-glow{

position:absolute;

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

width:500px;
height:500px;

background:radial-gradient(
circle,
rgba(90,130,255,0.35),
transparent 70%
);

filter:blur(140px);

z-index:0;

}


/* CONTENT */

.cta-container{

position:relative;

z-index:2;

color:white;

}


/* TITLE */

.cta-title{

font-size:40px;

font-weight:700;

margin-bottom:16px;

}


/* SUBTITLE */

.cta-subtitle{

font-size:18px;

max-width:650px;

margin:auto;

margin-bottom:30px;

color:#cbd5ff;

line-height:1.7;

}


.cta-btn{

display:inline-block;

padding:14px 36px;

border-radius:40px;

background:linear-gradient(
135deg,
#10b981,
#059669
);

color:white;

font-weight:600;

transition:all .35s ease;

box-shadow:
0 10px 30px rgba(16,185,129,0.4);

}

.cta-btn:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(16,185,129,0.6);

}

@media (max-width:768px){

.cta-title{
font-size:28px;
}

.cta-subtitle{
font-size:16px;
}

.about-cta{
padding:80px 0;
}

}

.about-cta{
border-top:1px solid rgba(255,255,255,0.05);
}