/*==================================
        ABOUT PAGE
==================================*/

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Cairo",sans-serif;
background:#0b0f14;
color:#fff;
overflow-x:hidden;
}

.container{
width:min(92%,1300px);
margin:auto;
}

/*==========================
HEADER
==========================*/

.about-header{

min-height:100vh;

background:
linear-gradient(rgba(8,10,15,.82),rgba(8,10,15,.92)),
url(images/about-bg.jpg);

background-size:cover;

background-position:center;

position:relative;

overflow:hidden;

}

.about-header::before{

content:"";

position:absolute;

width:700px;
height:700px;

background:radial-gradient(circle,#18d26e25,transparent 70%);

left:-250px;
top:-220px;

filter:blur(50px);

}

.about-header::after{

content:"";

position:absolute;

width:600px;
height:600px;

background:radial-gradient(circle,#18d26e15,transparent 70%);

right:-220px;
bottom:-220px;

filter:blur(70px);

}

/*==========================
NAVBAR
==========================*/

.about-header nav{

width:min(92%,1300px);

margin:auto;

height:95px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

width:80px;

transition:.4s;

}

.logo img:hover{

transform:rotate(-8deg) scale(1.05);

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav ul a{

color:#fff;

text-decoration:none;

font-size:17px;

font-weight:600;

transition:.35s;

position:relative;

}

nav ul a::after{

content:"";

position:absolute;

right:0;
bottom:-8px;

width:0;

height:3px;

background:#18d26e;

border-radius:30px;

transition:.35s;

}

nav ul a:hover{

color:#18d26e;

}

nav ul a:hover::after{

width:100%;

}

.active{

color:#18d26e;

}

.btn-main{

padding:15px 34px;

border-radius:50px;

background:linear-gradient(135deg,#18d26e,#39ff95);

color:#000;

font-weight:bold;

text-decoration:none;

transition:.35s;

box-shadow:0 15px 35px rgba(24,210,110,.25);

}

.btn-main:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(24,210,110,.4);

}

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

.hero{

width:min(92%,1300px);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

min-height:calc(100vh - 95px);

}

.hero-text span{

display:inline-block;

padding:8px 20px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

margin-bottom:25px;

font-weight:700;

}

.hero-text h1{

font-size:68px;

line-height:1.2;

margin-bottom:25px;

font-weight:900;

}

.hero-text p{

font-size:20px;

line-height:2;

color:#d2d2d2;

margin-bottom:35px;

max-width:650px;

}

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:560px;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.45);

transition:.45s;

}

.hero-image img:hover{

transform:scale(1.03);

}

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

@media(max-width:991px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding:50px 0;

}

.hero-image{

order:-1;

}

.hero-text h1{

font-size:42px;

}

nav ul{

display:none;

}

.btn-main{

display:none;

}

.logo img{

width:65px;

}

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

.story{

padding:120px 0;

background:#10161d;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 22px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

font-weight:700;

margin-bottom:18px;

}

.section-title h2{

font-size:56px;

margin-bottom:18px;

font-weight:800;

}

.story-box{

max-width:950px;

margin:auto;

background:#171e28;

padding:60px;

border-radius:30px;

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

box-shadow:0 20px 60px rgba(0,0,0,.3);

position:relative;

overflow:hidden;

}

.story-box::before{

content:"";

position:absolute;

width:320px;
height:320px;

background:radial-gradient(circle,#18d26e25,transparent);

top:-150px;

left:-150px;

}

.story-box p{

font-size:20px;

line-height:2.2;

color:#d6d6d6;

margin-bottom:25px;

position:relative;

z-index:2;

}

/*==================================
        FOUNDER
==================================*/

.founder{

padding:120px 0;

background:#0b0f14;

}

.founder-grid{

display:grid;

grid-template-columns:470px 1fr;

gap:70px;

align-items:center;

}

.founder-image{

position:relative;

}

.founder-image img{

width:100%;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.45);

transition:.45s;

}

.founder-image img:hover{

transform:scale(1.03);

}

.founder-image::after{

content:"";

position:absolute;

inset:-12px;

border:2px solid #18d26e;

border-radius:35px;

opacity:.35;

pointer-events:none;

}

.founder-text span{

display:inline-block;

padding:8px 22px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

margin-bottom:20px;

font-weight:bold;

}

.founder-text h2{

font-size:58px;

margin-bottom:8px;

}

.founder-text h4{

font-size:24px;

color:#18d26e;

margin-bottom:8px;

}

.founder-text h5{

font-size:18px;

font-weight:500;

color:#bdbdbd;

margin-bottom:30px;

}

.founder-text p{

font-size:19px;

line-height:2.1;

color:#d4d4d4;

margin-bottom:22px;

}

.founder-text blockquote{

margin-top:35px;

padding:25px;

background:#171e28;

border-right:5px solid #18d26e;

border-radius:20px;

font-size:21px;

font-weight:700;

color:#fff;

line-height:2;

}

/*==================================
        TIMELINE
==================================*/

.timeline{

padding:120px 0;

background:#10161d;

}

.timeline-box{

display:grid;

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

gap:35px;

margin-top:60px;

}

.time-card{

background:#171e28;

padding:55px 35px;

text-align:center;

border-radius:25px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.time-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

background:#18d26e22;

border-radius:50%;

top:-80px;

left:-80px;

transition:.45s;

}

.time-card:hover::before{

transform:scale(1.8);

}

.time-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

box-shadow:0 25px 60px rgba(24,210,110,.18);

}

.time-card h2{

font-size:58px;

color:#18d26e;

margin-bottom:18px;

font-weight:900;

position:relative;

}

.time-card p{

font-size:18px;

line-height:2;

color:#d4d4d4;

position:relative;

}

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

@media(max-width:991px){

.story-box{

padding:35px;

}

.story-box p{

font-size:17px;

}

.founder-grid{

grid-template-columns:1fr;

}

.founder-image{

order:-1;

}

.founder-text{

text-align:center;

}

.founder-text h2{

font-size:42px;

}

.timeline-box{

grid-template-columns:1fr;

}

}
/*==================================
            TEAM
==================================*/

.team{

padding:120px 0;

background:#0b0f14;

}

.team-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.team-card{

background:linear-gradient(180deg,#1a222d,#111820);

padding:45px 25px;

border-radius:25px;

text-align:center;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.team-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:#18d26e22;

border-radius:50%;

top:-120px;

left:-120px;

transition:.45s;

}

.team-card:hover::before{

transform:scale(2);

}

.team-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

box-shadow:0 25px 60px rgba(24,210,110,.18);

}

.team-card h3{

font-size:28px;

margin-bottom:12px;

position:relative;

}

.team-card p{

font-size:17px;

color:#bdbdbd;

position:relative;

}

/*==================================
            VALUES
==================================*/

.values{

padding:120px 0;

background:#10161d;

}

.values-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.value-card{

background:#171e28;

padding:40px 20px;

border-radius:22px;

text-align:center;

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

transition:.35s;

}

.value-card:hover{

transform:translateY(-10px);

border-color:#18d26e;

box-shadow:0 20px 45px rgba(24,210,110,.18);

}

.value-card i{

font-size:48px;

color:#18d26e;

margin-bottom:20px;

}

.value-card h3{

font-size:22px;

}

/*==================================
            CONTACT
==================================*/

.contact{

padding:120px 0;

background:#0b0f14;

}

.contact-box{

max-width:850px;

margin:auto;

background:#171e28;

padding:60px;

border-radius:30px;

text-align:center;

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

}

.contact-box p{

font-size:20px;

margin-bottom:22px;

color:#d8d8d8;

}

.contact-box a{

display:inline-block;

margin:12px;

padding:14px 28px;

background:#18d26e;

color:#000;

font-weight:700;

border-radius:40px;

text-decoration:none;

transition:.35s;

}

.contact-box a:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(24,210,110,.35);

}

/*==================================
            FOOTER
==================================*/

footer{

padding:60px 20px;

text-align:center;

background:#070b10;

border-top:1px solid rgba(255,255,255,.06);

}

footer h3{

font-size:34px;

margin-bottom:15px;

}

footer p{

color:#999;

}

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

@media(max-width:991px){

.team-grid{

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

}

.values-grid{

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

}

.contact-box{

padding:35px 20px;

}

.contact-box p{

font-size:17px;

}

}

@media(max-width:768px){

.team-grid{

grid-template-columns:1fr;

}

.values-grid{

grid-template-columns:1fr;

}

}
.team{

padding:120px 0;

background:#0b1016;

}

.team-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:60px;

}

.team-card{

background:#151d28;

border-radius:25px;

padding:35px 25px;

text-align:center;

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

transition:.35s;

}

.team-card:hover{

transform:translateY(-10px);

border-color:#00ff88;

box-shadow:0 20px 50px rgba(0,255,136,.18);

}

.team-image{

width:150px;

height:150px;

margin:0 auto 25px;

border-radius:50%;

overflow:hidden;

border:4px solid #00ff88;

background:#222c38;

}

.team-image img{

width:100%;

height:100%;

object-fit:cover;

}

.team-card h3{

font-size:24px;

margin-bottom:10px;

color:#fff;

}

.team-card span{

display:inline-block;

padding:8px 18px;

background:#00ff8815;

color:#00ff88;

border-radius:30px;

font-size:15px;

font-weight:700;

margin-top:8px;

}
.hero-text h1{

font-size:clamp(38px,5vw,68px);

font-weight:900;

line-height:1.35;

letter-spacing:-1px;

margin:20px 0 30px;

color:#fff;

max-width:700px;

text-shadow:0 8px 25px rgba(0,0,0,.35);

}

.hero-text h1::after{

content:"";

display:block;

width:120px;

height:5px;

background:linear-gradient(90deg,#00ff88,#00d4ff);

border-radius:50px;

margin-top:22px;

}
.hero-text h1 span{

background:linear-gradient(90deg,#00ff88,#00d4ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

font-weight:900;

}
.hero-text h1{

font-size:68px;
font-weight:900;
line-height:1.2;

}

.hero-text h1 br{
display:block;
margin-bottom:8px;
content:"";
}
/* Hero Title */

.hero-text h1{

font-size:58px !important;

line-height:1.2 !important;

font-weight:900;

letter-spacing:-1px;

margin:20px 0;

max-width:650px;

}

/* اللابتوب */

@media (max-width:1400px){

.hero-text h1{

font-size:50px !important;

}

}

/* التابلت */

@media (max-width:992px){

.hero-text h1{

font-size:42px !important;

text-align:center;

}

}

/* الموبايل */

@media (max-width:768px){

.hero-text h1{

font-size:34px !important;

line-height:1.35 !important;

}

}
/*==================================
        ABOUT PAGE
==================================*/

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Cairo",sans-serif;
background:#0b0f14;
color:#fff;
overflow-x:hidden;
}

.container{
width:min(92%,1300px);
margin:auto;
}

/*==========================
HEADER
==========================*/

.about-header{

min-height:100vh;

background:
linear-gradient(rgba(8,10,15,.82),rgba(8,10,15,.92)),
url(images/about-bg.jpg);

background-size:cover;

background-position:center;

position:relative;

overflow:hidden;

}

.about-header::before{

content:"";

position:absolute;

width:700px;
height:700px;

background:radial-gradient(circle,#18d26e25,transparent 70%);

left:-250px;
top:-220px;

filter:blur(50px);

}

.about-header::after{

content:"";

position:absolute;

width:600px;
height:600px;

background:radial-gradient(circle,#18d26e15,transparent 70%);

right:-220px;
bottom:-220px;

filter:blur(70px);

}

/*==========================
NAVBAR
==========================*/

.about-header nav{

width:min(92%,1300px);

margin:auto;

height:95px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

width:80px;

transition:.4s;

}

.logo img:hover{

transform:rotate(-8deg) scale(1.05);

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav ul a{

color:#fff;

text-decoration:none;

font-size:17px;

font-weight:600;

transition:.35s;

position:relative;

}

nav ul a::after{

content:"";

position:absolute;

right:0;
bottom:-8px;

width:0;

height:3px;

background:#18d26e;

border-radius:30px;

transition:.35s;

}

nav ul a:hover{

color:#18d26e;

}

nav ul a:hover::after{

width:100%;

}

.active{

color:#18d26e;

}

.btn-main{

padding:15px 34px;

border-radius:50px;

background:linear-gradient(135deg,#18d26e,#39ff95);

color:#000;

font-weight:bold;

text-decoration:none;

transition:.35s;

box-shadow:0 15px 35px rgba(24,210,110,.25);

}

.btn-main:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(24,210,110,.4);

}

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

.hero{

width:min(92%,1300px);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

min-height:calc(100vh - 95px);

}

.hero-text span{

display:inline-block;

padding:8px 20px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

margin-bottom:25px;

font-weight:700;

}

.hero-text h1{

font-size:68px;

line-height:1.2;

margin-bottom:25px;

font-weight:900;

}

.hero-text p{

font-size:20px;

line-height:2;

color:#d2d2d2;

margin-bottom:35px;

max-width:650px;

}

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:560px;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.45);

transition:.45s;

}

.hero-image img:hover{

transform:scale(1.03);

}

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

@media(max-width:991px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding:50px 0;

}

.hero-image{

order:-1;

}

.hero-text h1{

font-size:42px;

}

nav ul{

display:none;

}

.btn-main{

display:none;

}

.logo img{

width:65px;

}

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

.story{

padding:120px 0;

background:#10161d;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 22px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

font-weight:700;

margin-bottom:18px;

}

.section-title h2{

font-size:56px;

margin-bottom:18px;

font-weight:800;

}

.story-box{

max-width:950px;

margin:auto;

background:#171e28;

padding:60px;

border-radius:30px;

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

box-shadow:0 20px 60px rgba(0,0,0,.3);

position:relative;

overflow:hidden;

}

.story-box::before{

content:"";

position:absolute;

width:320px;
height:320px;

background:radial-gradient(circle,#18d26e25,transparent);

top:-150px;

left:-150px;

}

.story-box p{

font-size:20px;

line-height:2.2;

color:#d6d6d6;

margin-bottom:25px;

position:relative;

z-index:2;

}

/*==================================
        FOUNDER
==================================*/

.founder{

padding:120px 0;

background:#0b0f14;

}

.founder-grid{

display:grid;

grid-template-columns:470px 1fr;

gap:70px;

align-items:center;

}

.founder-image{

position:relative;

}

.founder-image img{

width:100%;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.45);

transition:.45s;

}

.founder-image img:hover{

transform:scale(1.03);

}

.founder-image::after{

content:"";

position:absolute;

inset:-12px;

border:2px solid #18d26e;

border-radius:35px;

opacity:.35;

pointer-events:none;

}

.founder-text span{

display:inline-block;

padding:8px 22px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

margin-bottom:20px;

font-weight:bold;

}

.founder-text h2{

font-size:58px;

margin-bottom:8px;

}

.founder-text h4{

font-size:24px;

color:#18d26e;

margin-bottom:8px;

}

.founder-text h5{

font-size:18px;

font-weight:500;

color:#bdbdbd;

margin-bottom:30px;

}

.founder-text p{

font-size:19px;

line-height:2.1;

color:#d4d4d4;

margin-bottom:22px;

}

.founder-text blockquote{

margin-top:35px;

padding:25px;

background:#171e28;

border-right:5px solid #18d26e;

border-radius:20px;

font-size:21px;

font-weight:700;

color:#fff;

line-height:2;

}

/*==================================
        TIMELINE
==================================*/

.timeline{

padding:120px 0;

background:#10161d;

}

.timeline-box{

display:grid;

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

gap:35px;

margin-top:60px;

}

.time-card{

background:#171e28;

padding:55px 35px;

text-align:center;

border-radius:25px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.time-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

background:#18d26e22;

border-radius:50%;

top:-80px;

left:-80px;

transition:.45s;

}

.time-card:hover::before{

transform:scale(1.8);

}

.time-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

box-shadow:0 25px 60px rgba(24,210,110,.18);

}

.time-card h2{

font-size:58px;

color:#18d26e;

margin-bottom:18px;

font-weight:900;

position:relative;

}

.time-card p{

font-size:18px;

line-height:2;

color:#d4d4d4;

position:relative;

}

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

@media(max-width:991px){

.story-box{

padding:35px;

}

.story-box p{

font-size:17px;

}

.founder-grid{

grid-template-columns:1fr;

}

.founder-image{

order:-1;

}

.founder-text{

text-align:center;

}

.founder-text h2{

font-size:42px;

}

.timeline-box{

grid-template-columns:1fr;

}

}
/*==================================
            TEAM
==================================*/

.team{

padding:120px 0;

background:#0b0f14;

}

.team-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.team-card{

background:linear-gradient(180deg,#1a222d,#111820);

padding:45px 25px;

border-radius:25px;

text-align:center;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.team-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:#18d26e22;

border-radius:50%;

top:-120px;

left:-120px;

transition:.45s;

}

.team-card:hover::before{

transform:scale(2);

}

.team-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

box-shadow:0 25px 60px rgba(24,210,110,.18);

}

.team-card h3{

font-size:28px;

margin-bottom:12px;

position:relative;

}

.team-card p{

font-size:17px;

color:#bdbdbd;

position:relative;

}

/*==================================
            VALUES
==================================*/

.values{

padding:120px 0;

background:#10161d;

}

.values-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.value-card{

background:#171e28;

padding:40px 20px;

border-radius:22px;

text-align:center;

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

transition:.35s;

}

.value-card:hover{

transform:translateY(-10px);

border-color:#18d26e;

box-shadow:0 20px 45px rgba(24,210,110,.18);

}

.value-card i{

font-size:48px;

color:#18d26e;

margin-bottom:20px;

}

.value-card h3{

font-size:22px;

}

/*==================================
            CONTACT
==================================*/

.contact{

padding:120px 0;

background:#0b0f14;

}

.contact-box{

max-width:850px;

margin:auto;

background:#171e28;

padding:60px;

border-radius:30px;

text-align:center;

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

}

.contact-box p{

font-size:20px;

margin-bottom:22px;

color:#d8d8d8;

}

.contact-box a{

display:inline-block;

margin:12px;

padding:14px 28px;

background:#18d26e;

color:#000;

font-weight:700;

border-radius:40px;

text-decoration:none;

transition:.35s;

}

.contact-box a:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(24,210,110,.35);

}

/*==================================
            FOOTER
==================================*/

footer{

padding:60px 20px;

text-align:center;

background:#070b10;

border-top:1px solid rgba(255,255,255,.06);

}

footer h3{

font-size:34px;

margin-bottom:15px;

}

footer p{

color:#999;

}

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

@media(max-width:991px){

.team-grid{

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

}

.values-grid{

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

}

.contact-box{

padding:35px 20px;

}

.contact-box p{

font-size:17px;

}

}

@media(max-width:768px){

.team-grid{

grid-template-columns:1fr;

}

.values-grid{

grid-template-columns:1fr;

}

}
.team{

padding:120px 0;

background:#0b1016;

}

.team-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:60px;

}

.team-card{

background:#151d28;

border-radius:25px;

padding:35px 25px;

text-align:center;

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

transition:.35s;

}

.team-card:hover{

transform:translateY(-10px);

border-color:#00ff88;

box-shadow:0 20px 50px rgba(0,255,136,.18);

}

.team-image{

width:150px;

height:150px;

margin:0 auto 25px;

border-radius:50%;

overflow:hidden;

border:4px solid #00ff88;

background:#222c38;

}

.team-image img{

width:100%;

height:100%;

object-fit:cover;

}

.team-card h3{

font-size:24px;

margin-bottom:10px;

color:#fff;

}

.team-card span{

display:inline-block;

padding:8px 18px;

background:#00ff8815;

color:#00ff88;

border-radius:30px;

font-size:15px;

font-weight:700;

margin-top:8px;

}
.hero-text h1{

font-size:clamp(38px,5vw,68px);

font-weight:900;

line-height:1.35;

letter-spacing:-1px;

margin:20px 0 30px;

color:#fff;

max-width:700px;

text-shadow:0 8px 25px rgba(0,0,0,.35);

}

.hero-text h1::after{

content:"";

display:block;

width:120px;

height:5px;

background:linear-gradient(90deg,#00ff88,#00d4ff);

border-radius:50px;

margin-top:22px;

}
.hero-text h1 span{

background:linear-gradient(90deg,#00ff88,#00d4ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

font-weight:900;

}
.hero-text h1{

font-size:68px;
font-weight:900;
line-height:1.2;

}

.hero-text h1 br{
display:block;
margin-bottom:8px;
content:"";
}
/* Hero Title */

.hero-text h1{

font-size:58px !important;

line-height:1.2 !important;

font-weight:900;

letter-spacing:-1px;

margin:20px 0;

max-width:650px;

}

/* اللابتوب */

@media (max-width:1400px){

.hero-text h1{

font-size:50px !important;

}

}

/* التابلت */

@media (max-width:992px){

.hero-text h1{

font-size:42px !important;

text-align:center;

}

}

/* الموبايل */

@media (max-width:768px){

.hero-text h1{

font-size:34px !important;

line-height:1.35 !important;

}

}
/* ===== TEAM SECTION ===== */

.team-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(380px,1fr)) !important;
    gap:35px !important;
    margin-top:60px !important;
}

.trainer-card{
    display:flex !important;
    align-items:flex-start !important;
    gap:25px !important;

    background:#111823 !important;
    border:1px solid rgba(0,255,170,.15) !important;
    border-radius:22px !important;

    padding:25px !important;

    transition:.4s !important;
}

.trainer-card:hover{
    transform:translateY(-8px) !important;
    border-color:#19ff9c !important;
    box-shadow:0 0 30px rgba(0,255,170,.18) !important;
}

.team-image{
    flex:0 0 120px !important;
}

.team-image img{
    width:120px !important;
    height:120px !important;
    border-radius:50% !important;
    border:4px solid #19ff9c !important;
    object-fit:cover !important;
}

.trainer-info{
    flex:1 !important;
}

.trainer-info h3{
    font-size:30px !important;
    margin-bottom:8px !important;
    color:#fff !important;
}

.trainer-job{
    display:inline-block !important;
    color:#19ff9c !important;
    font-weight:bold !important;
    margin-bottom:18px !important;
}

.trainer-team h4{
    margin-bottom:12px !important;
    color:#fff !important;
}

.members{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
}

.member{
    background:#18212d !important;
    border-radius:10px !important;
    padding:8px 12px !important;
    text-align:center !important;
    color:#ddd !important;
    transition:.3s !important;
}

.member:hover{
    background:#19ff9c !important;
    color:#000 !important;
}

/* Mobile */

@media(max-width:992px){

.team-grid{
    grid-template-columns:1fr !important;
}

.trainer-card{
    flex-direction:column !important;
    text-align:center !important;
}

.team-image{
    margin:auto !important;
}

}
/* ===== Trainer Image ===== */

.team-image{
    width:150px !important;
    height:150px !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:none !important;
}

.team-image img{
    width:150px !important;
    height:150px !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:50% !important;

    border:4px solid #19ff9c !important;

    outline:none !important;
    box-shadow:none !important;

    display:block !important;
}
/*==================================
        GLOBAL OVERRIDE
===================================*/

html{
scroll-behavior:smooth;
}

body{
overflow-x:hidden;
}

/* تحسين الحاويات */

.container{
width:min(92%,1350px)!important;
margin:auto!important;
}

/* تحسين العناوين */

h1{
font-size:clamp(38px,5vw,70px)!important;
font-weight:800!important;
line-height:1.2!important;
}

h2{
font-size:clamp(30px,4vw,50px)!important;
font-weight:800!important;
}

p{
line-height:1.9!important;
color:#cfcfcf;
}

/* جميع الصور */

img{
display:block;
max-width:100%;
height:auto;
transition:.5s;
}

img:hover{
transform:scale(1.04);
}

/* جميع الكروت */

.course-card,
.partner-card,
.event-card,
.service-card,
.feature-card,
.gallery-card,
.card{

border-radius:20px!important;
overflow:hidden!important;
transition:.35s!important;
border:1px solid rgba(255,255,255,.08);

}

.course-card:hover,
.partner-card:hover,
.event-card:hover,
.service-card:hover,
.feature-card:hover,
.gallery-card:hover,
.card:hover{

transform:translateY(-10px)!important;

box-shadow:0 25px 60px rgba(61,220,132,.18)!important;

}

/* الأزرار */

button,
.btn,
.details-btn,
.book-btn{

transition:.3s!important;
border-radius:12px!important;

}

button:hover,
.btn:hover,
.details-btn:hover,
.book-btn:hover{

transform:translateY(-3px)!important;

box-shadow:0 12px 35px rgba(61,220,132,.35)!important;

}

/* لينكات النافبار */

.navbar a{

transition:.3s;

}

.navbar a:hover{

color:#3ddc84!important;

}

/* أي Grid */

.courses-grid,
.partners-grid,
.gallery-grid,
.services-grid,
.features-grid{

gap:30px!important;

}

/* أنيميشن بسيط */

section{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Scrollbar */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#3ddc84;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#0b1118;

}
/* ===========================
        SMOOTH WEBSITE
=========================== */

/* Smooth Scroll */

html{
    scroll-behavior:smooth;
}

/* حركة عامة */

*{
    transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

/* الصور */

img{
    transition:
    transform .6s ease,
    filter .6s ease;
    will-change:transform;
}

/* الأزرار */

button,
.btn,
.hero-btn,
.service-btn{

    transition:.35s ease;

}

button:hover,
.btn:hover,
.hero-btn:hover,
.service-btn:hover{

    transform:translateY(-5px);

}

/* الكروت */

.service-section,
.service-card,
.course-card,
.company-card{

    transition:
    transform .4s ease,
    box-shadow .4s ease;

}

.service-section:hover,
.service-card:hover,
.course-card:hover,
.company-card:hover{

    transform:translateY(-8px);

}

/* الصور */

.service-image{

    overflow:hidden;

    border-radius:28px;

}

.service-image img:hover{

    transform:scale(1.05);

}

/* منع التقطيع */

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}
/* ================= TEAM ================= */

.team{
    padding:120px 0;
    background:#0b1016;
}

.trainers-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    align-items:start;
}

.trainer-card{
    background:#151d28;
    border-radius:24px;
    padding:25px;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.trainer-card:hover{
    transform:translateY(-8px);
    border-color:#19ff9c;
    box-shadow:0 20px 45px rgba(25,255,156,.18);
}

.trainer-top{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.team-image{
    width:120px;
    height:120px;
    flex-shrink:0;
}

.team-image img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #19ff9c;
}

.trainer-info h3{
    color:#fff;
    font-size:28px;
    margin-bottom:8px;
}

.trainer-job{
    color:#19ff9c;
    font-size:16px;
    font-weight:bold;
}

.trainer-team h4{
    color:#fff;
    margin-bottom:20px;
    font-size:22px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.member{
    display:flex;
    align-items:center;
    gap:12px;
    background:#1d2733;
    padding:10px;
    border-radius:14px;
    transition:.3s;
}

.member:hover{
    background:#243342;
}

.member img{
    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #19ff9c;
}

.member span{
    color:#fff;
    font-weight:700;
    font-size:15px;
}

@media(max-width:992px){

.trainers-grid{
    grid-template-columns:1fr;
}

.trainer-top{
    flex-direction:column;
    text-align:center;
}

.members{
    grid-template-columns:1fr;
}

}
/*================ TEAM SECTION ================*/

.team{
    padding:100px 0;
    background:#0b0f17;
}

.team .section-title{
    text-align:center;
    margin-bottom:60px;
}

.team .section-title span{
    color:#00d084;
    font-weight:600;
    letter-spacing:2px;
}

.team .section-title h2{
    color:#fff;
    font-size:42px;
    margin:15px 0;
}

.team .section-title p{
    color:#bdbdbd;
}

.trainers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
    gap:35px;
}

.trainer-card{
    background:#151b26;
    border-radius:22px;
    padding:30px;
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
}

.trainer-card:hover{
    transform:translateY(-8px);
    border-color:#00d084;
    box-shadow:0 20px 50px rgba(0,208,132,.18);
}

.trainer-top{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
}

.team-image{
    width:110px;
    height:110px;
    flex-shrink:0;
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #00d084;
}

.trainer-info h3{
    color:#fff;
    font-size:28px;
    margin-bottom:8px;
}

.trainer-job{
    color:#00d084;
    font-weight:bold;
}

.trainer-team h4{
    color:#fff;
    margin-bottom:20px;
    font-size:22px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.member{
    display:flex;
    align-items:center;
    gap:12px;
    background:#1f2633;
    padding:12px;
    border-radius:14px;
    transition:.3s;
}

.member:hover{
    background:#293445;
}

.member img{
    width:80px;
    height:80px;
    min-width:80px;
    min-height:80px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #19ff9c;
}
.member span{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

@media(max-width:992px){

.trainers-grid{
    grid-template-columns:1fr;
}

.members{
    grid-template-columns:1fr;
}

.trainer-top{
    flex-direction:column;
    text-align:center;
}

.team-image{
    margin:auto;
}

}
/*================ PREMIUM TEAM CARD =================*/

.trainer-card{
    background:linear-gradient(145deg,#141c27,#1b2432) !important;
    border:none !important;
    border-radius:28px !important;
    padding:35px !important;
    overflow:hidden;
    position:relative;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.trainer-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#18ff9a;
}

.trainer-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(24,255,154,.25);
}

.trainer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px;
}

.team-image{
    width:140px !important;
    height:140px !important;
    flex-shrink:0;
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #18ff9a;
    box-shadow:0 0 35px rgba(24,255,154,.35);
}

.trainer-info{
    flex:1;
}

.trainer-info h3{
    font-size:48px !important;
    color:#fff;
    margin-bottom:12px;
    line-height:1.2;
}

.trainer-job{
    display:inline-block;
    background:#18ff9a;
    color:#081018;
    padding:8px 18px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
}

.trainer-team h4{
    text-align:center;
    color:#fff;
    font-size:30px;
    margin:10px 0 25px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.member{
    display:flex;
    align-items:center;
    gap:15px;
    background:#222d3d;
    border-radius:18px;
    padding:12px 16px;
    transition:.3s;
}

.member:hover{
    background:#18ff9a;
    transform:scale(1.05);
}

.member:hover span{
    color:#081018;
}

.member img{
    width:65px !important;
    height:65px !important;
    min-width:65px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #18ff9a;
}

.member span{
    color:#fff;
    font-size:18px;
    font-weight:700;
}

@media(max-width:992px){

.trainer-top{
    flex-direction:column;
    text-align:center;
}

.trainer-info h3{
    font-size:34px !important;
}

.team-image{
    width:120px !important;
    height:120px !important;
}

.members{
    grid-template-columns:1fr;
}

}
/*========== TEAM CARD NEW DESIGN ==========*/

.trainer-card{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:25px;
    background:#171f2b;
    border-radius:25px;
    padding:30px;
    border:1px solid rgba(0,255,170,.15);
    transition:.35s;
    align-items:start;
    overflow:hidden;
}

.trainer-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,255,170,.15);
}

.trainer-top{
    display:contents;
}

.team-image{
    width:140px;
    height:140px;
    margin:auto;
}

.team-image img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #19ff9c;
}

.trainer-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.trainer-info h3{
    font-size:32px !important;
    color:#fff;
    margin:0 0 8px;
    line-height:1.2;
}

.trainer-job{
    color:#19ff9c !important;
    background:none !important;
    padding:0 !important;
    font-size:18px;
    font-weight:600;
}

.trainer-team{
    grid-column:1/-1;
    margin-top:20px;
}

.trainer-team h4{
    text-align:center;
    color:#fff;
    margin-bottom:20px;
    font-size:28px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.member{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    background:#212b39;
    border-radius:15px;
}

.member img{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #19ff9c;
}

.member span{
    color:#fff;
    font-size:16px;
    font-weight:600;
}

@media(max-width:900px){

.trainer-card{
    grid-template-columns:1fr;
    text-align:center;
}

.team-image{
    margin:auto;
}

.trainer-info{
    align-items:center;
}

.members{
    grid-template-columns:1fr;
}

}
/* ========= Equal Team Cards ========= */

.trainers-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:35px;
    align-items:stretch;
}

.trainer-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:430px;
    height:100%;
    padding:30px;
    border-radius:25px;
}

.trainer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    min-height:150px;
}

.team-image{
    width:120px;
    height:120px;
    flex-shrink:0;
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.trainer-info{
    flex:1;
}

.trainer-info h3{
    font-size:34px !important;
    line-height:1.2;
    margin-bottom:8px;
    min-height:82px;
    display:flex;
    align-items:flex-end;
}

.trainer-job{
    display:block !important;
    font-size:18px;
    color:#19ff9c !important;
    margin-top:8px;
    min-height:45px;
}

.trainer-team{
    margin-top:20px;
}

.trainer-team h4{
    text-align:center;
    margin-bottom:20px;
    font-size:22px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.member{
    height:78px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:15px;
}

.member img{
    width:55px;
    height:55px;
    min-width:55px;
}

.member span{
    font-size:16px;
    font-weight:600;
}

@media(max-width:992px){

.trainers-grid{
    grid-template-columns:1fr;
}

.trainer-card{
    min-height:auto;
}

.members{
    grid-template-columns:1fr;
}

}
/* ===== مساواة جميع كروت الفريق ===== */

.trainer-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    height:520px !important;
    padding:30px !important;
}

.trainer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:140px;
    margin-bottom:25px;
}

.trainer-team{
    margin-top:auto !important;
}

.trainer-team h4{
    text-align:center;
    margin-bottom:20px;
}

.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    min-height:180px;
    align-content:start;
}

.member{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:70px;
}

.member img{
    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
}

@media(max-width:992px){

.trainer-card{
    height:auto !important;
}

.members{
    min-height:auto;
    grid-template-columns:1fr;
}

}
/* مسافة بين كروت الأعضاء */
.members{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px !important; /* زود أو قلل الرقم حسب رغبتك */
}

/* تنسيق كل عضو */
.member{
    display:flex;
    align-items:center;
    gap:15px;              /* مسافة بين الصورة والاسم */
    padding:12px 15px;
    margin:8px 0;          /* مسافة بين الصفوف */
    border-radius:15px;
}

/* الصورة */
.member img{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:50%;
    object-fit:cover;
    margin-left:10px;      /* مسافة بين الصورة والاسم في RTL */
}
/* ===== صورة المدير ===== */

.team-image{
    width:160px !important;
    height:160px !important;
    min-width:160px !important;
    min-height:160px !important;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
}

.team-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top;
    display:block;
    border-radius:50%;
    border:4px solid #19ff9c;
}

/* ===== صور أعضاء الفريق ===== */

.member img{
    width:70px !important;
    height:70px !important;
    min-width:70px !important;
    min-height:70px !important;
    object-fit:cover !important;
    object-position:center;
    display:block;
    border-radius:50%;
    border:2px solid #19ff9c;
}
/* تكبير صور أعضاء الفريق */

.member img{
    width:85px !important;
    height:85px !important;
    min-width:85px !important;
    min-height:85px !important;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #19ff9c;
}

/* تكبير الكارت الصغير عشان يستوعب الصورة */

.member{
    padding:14px 18px !important;
    min-height:95px;
    gap:18px !important;
}
/* ===== VALUES ANIMATION ===== */

.values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.value-card{
    position:relative;
    overflow:hidden;
    transition:.45s ease;
    animation:fadeUp .8s ease both;
    border:1px solid rgba(37,211,102,.12);
}

/* تأخير بسيط لكل كارت */
.value-card:nth-child(1){animation-delay:.1s;}
.value-card:nth-child(2){animation-delay:.2s;}
.value-card:nth-child(3){animation-delay:.3s;}
.value-card:nth-child(4){animation-delay:.4s;}
.value-card:nth-child(5){animation-delay:.5s;}

.value-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(37,211,102,.15),transparent);
    opacity:0;
    transition:.4s;
}

.value-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:4px;
    background:#25d366;
    transition:.45s;
}

.value-card:hover::before{
    opacity:1;
}

.value-card:hover::after{
    left:0;
}

.value-card:hover{
    transform:translateY(-15px) scale(1.04);
    box-shadow:0 20px 50px rgba(37,211,102,.18);
    border-color:#25d366;
}

.value-card i,
.value-card svg{
    transition:.45s;
}

.value-card:hover i,
.value-card:hover svg{
    transform:rotate(12deg) scale(1.25);
    color:#25d366;
}

.value-card h3{
    transition:.35s;
}

.value-card:hover h3{
    color:#25d366;
    letter-spacing:1px;
}

/* حركة دخول */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ================= MOBILE OVERRIDE ================= */

@media only screen and (max-width:768px){

.container{
    width:94% !important;
    padding:0 18px !important;
}

.about-header,
.story,
.founder,
.team,
.values,
.contact{
    padding:70px 0 !important;
}

.story-grid,
.founder-grid,
.team-grid,
.values-grid,
.contact-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
}

.story-image,
.founder-image,
.team-image,
.story-text,
.founder-text,
.team-text,
.values-box,
.contact-box{
    width:100% !important;
    max-width:100% !important;
}

.story-image img,
.founder-image img,
.team-image img{
    width:100% !important;
    height:auto !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:22px !important;
}

.story-text,
.founder-text,
.team-text,
.values-box,
.contact-box{
    text-align:center !important;
}

.story-text h2,
.founder-text h2,
.team-text h2{
    font-size:32px !important;
    line-height:1.4 !important;
}

.story-text p,
.founder-text p,
.team-text p,
.values-box p,
.contact-box p{
    font-size:17px !important;
    line-height:1.9 !important;
}

.story-text span,
.founder-text span{
    display:inline-block !important;
    margin-bottom:18px !important;
}

img{
    max-width:100% !important;
    height:auto !important;
}

button,
.btn,
.hero-btn{
    width:100% !important;
    max-width:260px !important;
    margin:20px auto 0 !important;
}

}
/* ===== FINAL MOBILE FIX ===== */

@media screen and (max-width:768px){

.about-header{
    min-height:auto !important;
    padding:120px 0 60px !important;
}

.hero{
    display:flex !important;
    flex-direction:column-reverse !important;
    align-items:center !important;
    text-align:center !important;
    gap:35px !important;
    min-height:auto !important;
    padding:20px 0 !important;
}

.hero-text,
.hero-image{
    width:100% !important;
    max-width:100% !important;
}

.hero-text h1{
    font-size:34px !important;
    line-height:1.35 !important;
    max-width:100% !important;
}

.hero-text p{
    font-size:17px !important;
    line-height:1.9 !important;
}

.hero-image img{
    width:100% !important;
    max-width:360px !important;
    height:auto !important;
    object-fit:contain !important;
    margin:auto !important;
    border-radius:20px !important;
}

.founder-grid,
.story-grid,
.timeline-box,
.team-grid,
.trainers-grid,
.values-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:25px !important;
}

.story-box,
.contact-box{
    padding:25px !important;
}

.trainer-card,
.team-card,
.time-card,
.value-card{
    width:100% !important;
    height:auto !important;
}

.members{
    grid-template-columns:1fr !important;
}

.member{
    min-height:85px !important;
}

.team-image{
    width:120px !important;
    height:120px !important;
    margin:auto !important;
}

.team-image img{
    width:120px !important;
    height:120px !important;
}

nav ul{
    display:none !important;
}

.btn-main{
    display:none !important;
}

.container{
    width:94% !important;
    padding:0 15px !important;
}

}
/* ===== إزالة الفراغ أعلى الصفحة على الموبايل ===== */

@media (max-width:768px){

.about-header,
.hero{
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
}

.hero-text{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-image{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body{
    padding-top: 0 !important;
}

}
/* ===== إزالة الفراغ الجانبي على الهاتف ===== */

@media (max-width:768px){

html,
body{
    width:100% !important;
    overflow-x:hidden !important;
}

.container{
    width:100% !important;
    max-width:100% !important;
    padding:0 15px !important;
    margin:0 auto !important;
}

.about-header,
.story,
.founder,
.team,
.values,
.contact{
    width:100% !important;
    margin:0 !important;
    padding-left:15px !important;
    padding-right:15px !important;
}

}
/* ================= MOBILE NAVBAR ================= */

@media (max-width:768px){

.about-header nav{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    width:100% !important;
    padding:18px 15px !important;
    position:fixed !important;
    top:0;
    right:0;
    left:0;
    z-index:9999;
    background:rgba(8,10,15,.95);
    backdrop-filter:blur(15px);
}

.logo img{
    width:55px !important;
}

nav ul{
    display:flex !important;
    align-items:center;
    gap:15px !important;
    list-style:none;
    margin:0;
    padding:0;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
}

nav ul::-webkit-scrollbar{
    display:none;
}

nav ul li{
    flex:0 0 auto;
}

nav ul a{
    font-size:15px !important;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.btn-main{
    display:none !important;
}

.hero{
    padding-top:100px !important;
}

}
/* ========= PREMIUM WEBSITE ========= */

body{
    background:
    radial-gradient(circle at top,#0f1720,#080c12 70%);
}

/* جميع الأقسام */

section{

padding:110px 0;

position:relative;

overflow:hidden;

}

/* كروت */

.card,
.story-box,
.team-card,
.value-card,
.contact-box,
.time-card{

background:rgba(24,30,40,.82)!important;

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08)!important;

border-radius:28px!important;

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

transition:.45s;

}

.card:hover,
.story-box:hover,
.team-card:hover,
.value-card:hover,
.contact-box:hover,
.time-card:hover{

transform:
translateY(-12px)
scale(1.02);

border-color:#19ff9c!important;

box-shadow:
0 35px 80px rgba(25,255,156,.18);

}

/* العناوين */

h1,h2{

background:
linear-gradient(90deg,#fff,#d8fff0);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* الصور */

img{

border-radius:24px;

transition:.6s;

}

img:hover{

transform:scale(1.05);

}

/* الأزرار */

button,
.btn,
.hero-btn,
.btn-main{

border-radius:60px!important;

transition:.35s;

}

button:hover,
.btn:hover,
.hero-btn:hover,
.btn-main:hover{

transform:
translateY(-5px)
scale(1.04);

box-shadow:
0 0 45px rgba(25,255,156,.35);

}

/* خطوط مضيئة */

section::before{

content:"";

position:absolute;

width:350px;
height:350px;

background:

radial-gradient(circle,
rgba(25,255,156,.12),
transparent 70%);

top:-120px;
left:-120px;

pointer-events:none;

}

/* Scroll */

html{

scroll-behavior:smooth;

}

/* ظهور */

section{

animation:
fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(40px);

}

to{

opacity:1;

transform:none;

}

}
/* =============================
   PREMIUM TRAINER CARD
============================= */

@media (max-width:768px){

.trainer-card{

background:
linear-gradient(145deg,#1a2230,#101720)!important;

border:1px solid rgba(0,255,170,.15)!important;

border-radius:30px!important;

padding:30px 22px 35px!important;

overflow:hidden;

position:relative;

box-shadow:
0 20px 60px rgba(0,0,0,.35);

}

/* الخط الأخضر أعلى الكارت */

.trainer-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:6px;

background:
linear-gradient(90deg,#00ff99,#00d4ff);

}

/* الصورة */

.team-image{

margin:-15px auto 18px!important;

width:135px!important;

height:135px!important;

}

.team-image img{

width:135px!important;

height:135px!important;

border-radius:50%!important;

border:4px solid #00ff99!important;

box-shadow:
0 0 35px rgba(0,255,153,.35);

}

/* الاسم */

.trainer-info h3{

font-size:38px!important;

text-align:center!important;

margin-bottom:12px!important;

}

/* الوظيفة */

.trainer-job{

display:inline-block!important;

padding:10px 22px!important;

border-radius:50px!important;

background:#00ff9918!important;

color:#00ff99!important;

font-size:18px!important;

margin:auto!important;

}

/* عنوان الفريق */

.trainer-team h4{

font-size:28px!important;

text-align:center!important;

margin:35px 0 22px!important;

}

/* أعضاء الفريق */

.members{

display:flex!important;

flex-direction:column!important;

gap:16px!important;

}

.member{

display:flex!important;

align-items:center!important;

justify-content:flex-start!important;

padding:15px 18px!important;

background:#1d2633!important;

border-radius:18px!important;

transition:.35s;

}

.member:hover{

background:#00ff99!important;

transform:translateX(-6px);

}

.member:hover span{

color:#000!important;

}

.member img{

width:70px!important;

height:70px!important;

border:3px solid #00ff99!important;

}

.member span{

font-size:18px!important;

font-weight:700!important;

margin-right:15px!important;

}

}
/* ===============================
   PREMIUM WEBSITE EFFECTS
=================================*/

html{
scroll-behavior:smooth;
}

body{
overflow-x:hidden;
background:#090d14;
}

/* انتقالات */

*{
transition:
all .45s cubic-bezier(.22,.61,.36,1);
}

/* ===============================
   SECTION EFFECT
=================================*/

section{

position:relative;

overflow:hidden;

}

section::before{

content:"";

position:absolute;

inset:-40%;

background:
radial-gradient(circle,
rgba(0,255,140,.10),
transparent 65%);

animation:sectionGlow 10s linear infinite;

pointer-events:none;

}

@keyframes sectionGlow{

0%{
transform:rotate(0deg) scale(1);
}

50%{
transform:rotate(180deg) scale(1.25);
}

100%{
transform:rotate(360deg) scale(1);
}

}

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

.card,
.service-card,
.team-card,
.trainer-card,
.company-card{

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

backdrop-filter:blur(14px);

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

box-shadow:
0 20px 60px rgba(0,0,0,.35);

border-radius:24px;

overflow:hidden;

}

.card:hover,
.service-card:hover,
.team-card:hover,
.trainer-card:hover,
.company-card:hover{

transform:
translateY(-10px)
scale(1.02);

box-shadow:
0 0 30px rgba(0,255,170,.35),
0 20px 70px rgba(0,0,0,.45);

}

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

img{

transition:1s;

}

.card:hover img,
.service-card:hover img,
.team-card:hover img,
.trainer-card:hover img{

transform:scale(1.08);

}

/* ===============================
   BUTTON
=================================*/

button,
.btn,
.hero-btn,
.service-btn{

position:relative;

overflow:hidden;

}

button:hover,
.btn:hover,
.hero-btn:hover,
.service-btn:hover{

transform:
translateY(-4px);

box-shadow:

0 0 18px #00ff99,

0 0 35px rgba(0,255,153,.35);

}

button::after,
.btn::after,
.hero-btn::after,
.service-btn::after{

content:"";

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent);

transform:skewX(-25deg);

}

button:hover::after,
.btn:hover::after,
.hero-btn:hover::after,
.service-btn:hover::after{

left:170%;

transition:1s;

}

/* ===============================
   IMAGE GLOW
=================================*/

.team-image img,
.service-image img,
.hero img{

box-shadow:

0 0 25px rgba(0,255,170,.25);

}

.team-image img:hover,
.service-image img:hover{

box-shadow:

0 0 40px rgba(0,255,170,.45);

}

/* ===============================
   HEADING
=================================*/

h1,
h2{

position:relative;

}

h1::after,
h2::after{

content:"";

display:block;

width:70px;

height:4px;

margin:15px auto 0;

background:

linear-gradient(90deg,#00ff99,#00d4ff);

border-radius:50px;

}

/* ===============================
   FLOAT
=================================*/

.hero-content,
.about-content,
.story-content{

animation:floatSection 5s ease-in-out infinite;

}

@keyframes floatSection{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* ===============================
   FADE
=================================*/

.hidden{

opacity:0;

transform:translateY(60px);

}

.show{

opacity:1;

transform:translateY(0);

}

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

i{

transition:.4s;

}

.card:hover i,
.service-card:hover i{

transform:

rotate(10deg)

scale(1.2);

color:#00ff99;

}

/* ===============================
   SCROLLBAR
=================================*/

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(#00ff99,#00d4ff);

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#0b1018;

}

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

@media(max-width:768px){

section{

padding:70px 18px;

}

h1{

font-size:34px;

}

h2{

font-size:28px;

}

.card,
.service-card,
.team-card,
.trainer-card{

margin-bottom:22px;

}

}
/* ===========================
   PREMIUM CONTACT SECTION
=========================== */

.contact{

position:relative;

overflow:hidden;

}

.contact::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(circle,#00ff9940,transparent 70%);

top:-140px;

left:-120px;

animation:contactGlow 8s linear infinite;

pointer-events:none;

}

@keyframes contactGlow{

0%{

transform:scale(1) rotate(0deg);

}

50%{

transform:scale(1.25) rotate(180deg);

}

100%{

transform:scale(1) rotate(360deg);

}

}

/* الكارت */

.contact-card{

background:linear-gradient(145deg,#1a2230,#111823)!important;

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

border-radius:28px;

padding:35px 25px;

box-shadow:

0 25px 70px rgba(0,0,0,.35);

backdrop-filter:blur(15px);

transition:.5s;

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 35px rgba(0,255,170,.35),

0 25px 70px rgba(0,0,0,.45);

}

/* النصوص */

.contact-card p{

font-size:18px;

line-height:2;

opacity:.9;

}

/* الأيقونات */

.contact-card i{

font-size:28px;

color:#00ff99;

margin-left:10px;

transition:.45s;

}

.contact-card:hover i{

transform:scale(1.3) rotate(12deg);

text-shadow:

0 0 15px #00ff99;

}

/* أزرار السوشيال */

.contact-social a{

position:relative;

overflow:hidden;

background:#16e67a;

color:#000;

border-radius:50px;

padding:15px 28px;

font-weight:700;

transition:.45s;

box-shadow:

0 10px 25px rgba(0,255,153,.25);

}

.contact-social a:hover{

transform:

translateY(-6px)

scale(1.05);

box-shadow:

0 0 20px #00ff99,

0 0 40px rgba(0,255,153,.45);

}

.contact-social a::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(90deg,

transparent,

rgba(255,255,255,.6),

transparent);

transform:skewX(-20deg);

}

.contact-social a:hover::after{

left:160%;

transition:1s;

}

/* عنوان */

.contact h2{

animation:titleFloat 3s ease-in-out infinite;

}

@keyframes titleFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/* ظهور العناصر */

.contact-card,
.contact-social a,
.contact h2,
.contact p{

opacity:0;

transform:translateY(60px);

animation:fadeContact .8s forwards;

}

.contact h2{

animation-delay:.1s;

}

.contact p{

animation-delay:.3s;

}

.contact-card{

animation-delay:.5s;

}

.contact-social a:nth-child(1){

animation-delay:.7s;

}

.contact-social a:nth-child(2){

animation-delay:.9s;

}

.contact-social a:nth-child(3){

animation-delay:1.1s;

}

.contact-social a:nth-child(4){

animation-delay:1.3s;

}

@keyframes fadeContact{

to{

opacity:1;

transform:none;

}

}

/* الهاتف */

@media(max-width:768px){

.contact-card{

padding:28px 18px;

}

.contact h2{

font-size:42px;

}

.contact-card p{

font-size:17px;

}

.contact-social{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.contact-social a{

width:100%;

text-align:center;

}

}
/* ===== Language Button ===== */

.lang-desktop{
    list-style: none;
    display: flex;
    align-items: center;
}

.lang-btn-nav{
    width: 52px;
    height: 52px;

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

    border-radius: 50%;
    border: 2px solid #1fe27f;

    background: rgba(255,255,255,.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;

    text-decoration: none;

    transition: .35s cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 0 0 1px rgba(31,226,127,.15),
        0 0 18px rgba(31,226,127,.18),
        inset 0 0 12px rgba(31,226,127,.08);
}

.lang-btn-nav:hover{
    background: linear-gradient(160deg,#37ffa0,#149457);
    color: #04140b;

    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 0 20px rgba(31,226,127,.45),
        0 0 45px rgba(31,226,127,.30),
        inset 0 1px 0 rgba(255,255,255,.4);
}

.lang-btn-nav:active{
    transform: scale(.95);
}
/* FORCE SMALL LANGUAGE BUTTON */

.lang-btn-nav{
    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

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

    padding: 0 !important;
    line-height: 36px !important;

    border-radius: 50% !important;
}

.lang-desktop{
    width: auto !important;
    height: auto !important;
}
/* ===== Mobile Scroll Navbar ===== */
@media (max-width:768px){

.about-header nav{
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
}

nav ul{
    display:flex !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
    -ms-overflow-style:none;

    flex:1;
}

nav ul::-webkit-scrollbar{
    display:none;
}

nav ul li{
    flex:0 0 auto;
}

nav ul a{
    display:block;
    font-size:14px;
    padding:8px 10px;
    white-space:nowrap;
}

.logo{
    flex-shrink:0;
}

.lang-desktop{
    flex-shrink:0;
}
}
nav ul{
    scroll-snap-type:x proximity;
}

nav ul li{
    scroll-snap-align:start;
}