/* =========================
   GX ABOUT SECTION
========================= */

.gx-about-section{
width:100%;
padding:90px 0;
position:relative;
overflow:hidden;
background:transparent !important;
}

.gx-about-container{
width:100%;
max-width:1700px;
margin:auto;
padding-left:20px;
padding-right:20px;
background:transparent !important;
}

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

.gx-about-hero{
text-align:center;
margin-bottom:70px;
}

/* BADGE */

.gx-about-badge{
display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 26px;

border-radius:999px;

background:#0f172a;

border:1px solid #1e293b;

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

color:#ffffff;

margin-bottom:30px;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);
}

/* TITLE */

.gx-about-hero h2{
font-size:68px;
font-weight:900;
line-height:1.1;

margin-bottom:24px;

text-align:center;

background:
linear-gradient(
135deg,
#8b5cf6,
#06b6d4
);

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

/* DESCRIPTION */

.gx-about-hero p{
max-width:950px;
margin:auto;

font-size:18px;
line-height:1.9;

color:#cbd5e1;

margin-bottom:18px;

text-align:center;
}

/* =========================
   ABOUT GRID
========================= */

.gx-about-grid{
display:grid;

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

gap:24px;

margin-bottom:70px;
}

/* CARD */

.gx-about-card{
background:#0f172a;

border:1px solid #1e293b;

border-radius:30px;

padding:38px 28px;

text-align:center;

position:relative;
overflow:hidden;

transition:0.4s ease;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);
}

/* HOVER EFFECT */

.gx-about-card::before{
content:'';
position:absolute;
inset:0;

background:
radial-gradient(
circle at top,
rgba(139,92,246,0.25),
transparent 70%
);

opacity:0;

transition:0.4s ease;
}

.gx-about-card::after{
content:'';
position:absolute;
inset:0;

border-radius:30px;

padding:1px;

background:
linear-gradient(
135deg,
#8b5cf6,
#06b6d4,
#8b5cf6
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

opacity:0;

transition:0.4s ease;
}

.gx-about-card:hover{
transform:
translateY(-10px)
scale(1.02);

background:
linear-gradient(
180deg,
#172036,
#1e293b
);

border-color:#8b5cf6;

box-shadow:
0 25px 60px rgba(139,92,246,0.25),
0 0 40px rgba(6,182,212,0.12);
}

.gx-about-card:hover::before{
opacity:1;
}

.gx-about-card:hover::after{
opacity:1;
}

/* ICON */

.gx-about-icon{
width:90px;
height:90px;

margin:auto auto 24px;

border-radius:26px;

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

font-size:38px;

background:
linear-gradient(
135deg,
#7c3aed,
#06b6d4
);

box-shadow:
0 15px 35px rgba(139,92,246,0.25);

transition:0.4s ease;
}

.gx-about-card:hover .gx-about-icon{
transform:scale(1.08);
}

/* TITLE */

.gx-about-card h3{
font-size:28px;
font-weight:800;

margin-bottom:14px;

color:#ffffff;
}

/* TEXT */

.gx-about-card p{
font-size:16px;
line-height:1.8;

color:#cbd5e1;
}

/* =========================
   PLATFORM SECTION
========================= */

.gx-about-platform{
background:#0f172a;

border:1px solid #1e293b;

border-radius:36px;

padding:60px 40px;

text-align:center;

margin-bottom:70px;

position:relative;
overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);
}

/* TITLE */

.gx-about-platform h2{
font-size:52px;
font-weight:900;

margin-bottom:22px;

text-align:center;

background:
linear-gradient(
135deg,
#8b5cf6,
#06b6d4
);

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

/* DESCRIPTION */

.gx-about-platform p{
max-width:950px;
margin:auto;

font-size:18px;
line-height:1.9;

color:#cbd5e1;

margin-bottom:40px;
}

/* GRID */

.gx-platform-grid{
display:grid;

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

gap:22px;
}

/* BOX */

.gx-platform-box{
padding:24px 20px;

border-radius:22px;

background:
linear-gradient(
180deg,
#172036,
#1e293b
);

border:1px solid #334155;

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

color:#ffffff;

transition:0.35s ease;
}

.gx-platform-box:hover{
transform:
translateY(-5px)
scale(1.02);

border-color:#8b5cf6;

box-shadow:
0 15px 35px rgba(139,92,246,0.18);
}

/* =========================
   WHY SECTION
========================= */

.gx-about-why{
margin-bottom:70px;
}

/* TITLE */

.gx-about-why h2{
font-size:52px;
font-weight:900;

text-align:center;

margin-bottom:40px;

background:
linear-gradient(
135deg,
#8b5cf6,
#06b6d4
);

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

/* GRID */

.gx-why-grid{
display:grid;

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

gap:22px;
}

/* ITEM */

.gx-why-item{
padding:24px 20px;

border-radius:24px;

background:#0f172a;

border:1px solid #1e293b;

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

text-align:center;

color:#ffffff;

transition:0.35s ease;

box-shadow:
0 10px 30px rgba(0,0,0,0.20);
}

.gx-why-item:hover{
transform:
translateY(-5px)
scale(1.02);

background:
linear-gradient(
180deg,
#172036,
#1e293b
);

border-color:#8b5cf6;

box-shadow:
0 15px 35px rgba(139,92,246,0.18);
}

/* =========================
   CREATOR SECTION
========================= */

.gx-about-creator{
background:#0f172a;

border:1px solid #1e293b;

border-radius:36px;

padding:60px 40px;

text-align:center;

position:relative;
overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);
}

/* TITLE */

.gx-about-creator h2{
font-size:52px;
font-weight:900;

margin-bottom:24px;

text-align:center;

background:
linear-gradient(
135deg,
#8b5cf6,
#06b6d4
);

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

/* TEXT */

.gx-about-creator p{
max-width:950px;
margin:auto;

font-size:18px;
line-height:1.9;

color:#cbd5e1;

margin-bottom:35px;
}

/* QUOTE */

.gx-about-quote{
max-width:700px;
margin:auto;

padding:28px 30px;

border-radius:24px;

background:
linear-gradient(
180deg,
#172036,
#1e293b
);

border:1px solid #334155;

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

line-height:1.8;

color:#ffffff;

box-shadow:
0 15px 35px rgba(139,92,246,0.12);
}

/* =========================
   LARGE SCREEN
========================= */

@media(min-width:1600px){

.gx-about-container{
max-width:1800px;
}

}

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

@media(max-width:1200px){

.gx-about-grid{
grid-template-columns:
repeat(2,1fr);
}

.gx-platform-grid{
grid-template-columns:
repeat(2,1fr);
}

.gx-why-grid{
grid-template-columns:
repeat(2,1fr);
}

.gx-about-hero h2{
font-size:56px;
}

}

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

@media(max-width:768px){

.gx-about-section{
padding:70px 0;
}

.gx-about-container{
padding-left:14px;
padding-right:14px;
}

.gx-about-hero h2{
font-size:40px;
line-height:1.2;
}

.gx-about-hero p{
font-size:16px;
}

.gx-about-grid,
.gx-platform-grid,
.gx-why-grid{
grid-template-columns:1fr;
}

.gx-about-platform,
.gx-about-creator{
padding:40px 24px;
border-radius:28px;
}

.gx-about-platform h2,
.gx-about-why h2,
.gx-about-creator h2{
font-size:34px;
line-height:1.3;
}

.gx-about-card{
padding:32px 24px;
}

.gx-about-icon{
width:80px;
height:80px;
font-size:32px;
}

.gx-about-card h3{
font-size:24px;
}

.gx-about-card p,
.gx-about-platform p,
.gx-about-creator p{
font-size:15px;
}

.gx-platform-box,
.gx-why-item{
font-size:16px;
padding:20px 18px;
}

.gx-about-quote{
font-size:18px;
padding:24px 22px;
}

}