/*==================================
        SERVICES PAGE
==================================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:"Cairo",sans-serif;

background:#0b1015;

color:#fff;

overflow-x:hidden;

}

.container{

width:min(92%,1280px);

margin:auto;

}

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

.services-hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:
linear-gradient(rgba(5,8,12,.82),rgba(5,8,12,.92)),
url(كورسات.PNG);

background-size:cover;

background-position:center;

overflow:hidden;

}

.services-hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

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

top:-250px;

left:-220px;

filter:blur(60px);

}

.services-hero::after{

content:"";

position:absolute;

width:600px;

height:600px;

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

bottom:-220px;

right:-220px;

filter:blur(70px);

}

.hero-content{

position:relative;

z-index:2;

max-width:760px;

text-align:center;

}

.badge{

display:inline-block;

padding:10px 24px;

background:#18d26e22;

border:1px solid rgba(24,210,110,.25);

color:#18d26e;

border-radius:50px;

font-weight:700;

margin-bottom:30px;

}

.hero-content h1{

font-size:72px;

font-weight:900;

line-height:1.2;

margin-bottom:30px;

}

.hero-content p{

font-size:21px;

line-height:2;

color:#d0d0d0;

margin-bottom:40px;

}

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 45px;

border-radius:60px;

background:linear-gradient(135deg,#18d26e,#34ff8d);

color:#000;

font-weight:800;

font-size:18px;

text-decoration:none;

transition:.35s;

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

}

.hero-btn:hover{

transform:translateY(-6px);

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

}

/*==========================
    SERVICE SECTION
==========================*/

.service-section{

padding:120px 0;

}

.service-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.service-image{

position:relative;

}

.service-image img{

width:100%;

border-radius:28px;

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

transition:.45s;

}

.service-image img:hover{

transform:scale(1.03);

}

.service-text span{

display:inline-block;

padding:8px 20px;

background:#18d26e22;

color:#18d26e;

border-radius:30px;

font-weight:700;

margin-bottom:25px;

}

.service-text h2{

font-size:54px;

margin-bottom:25px;

}

.service-text p{

font-size:19px;

line-height:2;

color:#d2d2d2;

margin-bottom:35px;

}

.service-text ul{

list-style:none;

margin-bottom:35px;

}

.service-text ul li{

font-size:18px;

padding:12px 0;

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

}

.service-text ul li::before{

content:"✓";

margin-left:12px;

color:#18d26e;

font-weight:bold;

}

.service-btn{

display:inline-block;

padding:16px 38px;

background:#18d26e;

color:#000;

font-weight:800;

border-radius:50px;

text-decoration:none;

transition:.35s;

}

.service-btn:hover{

transform:translateY(-5px);

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

}

.reverse .service-grid{

direction:ltr;

}

.reverse .service-text{

direction:rtl;

}
/*==================================
        COMMUNITY
==================================*/

.community{

padding:140px 0;

position:relative;

overflow:hidden;

background:#10161d;

text-align:center;

}

.community::before{

content:"";

position:absolute;

width:700px;

height:700px;

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

left:-250px;

top:-250px;

filter:blur(60px);

}

.community::after{

content:"";

position:absolute;

width:600px;

height:600px;

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

right:-200px;

bottom:-250px;

filter:blur(70px);

}

.community .container{

position:relative;

z-index:2;

max-width:850px;

}

.community h2{

font-size:62px;

margin-bottom:30px;

font-weight:900;

}

.community p{

font-size:21px;

line-height:2;

color:#d6d6d6;

margin-bottom:45px;

}

/*==================================
      GLASS EFFECT
==================================*/

.service-image img,
.community,
.service-text{

transition:.45s;

}

.service-image{

position:relative;

}

.service-image::after{

content:"";

position:absolute;

inset:15px;

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

border-radius:28px;

pointer-events:none;

}

.service-image:hover img{

transform:scale(1.03);

box-shadow:

0 30px 80px rgba(24,210,110,.18),

0 0 50px rgba(24,210,110,.15);

}

.service-btn{

position:relative;

overflow:hidden;

}

.service-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:linear-gradient(90deg,

transparent,

rgba(255,255,255,.4),

transparent);

transition:.7s;

}

.service-btn:hover::before{

left:120%;

}

/*==================================
      HOVER TEXT
==================================*/

.service-text h2{

transition:.35s;

}

.service-section:hover h2{

color:#18d26e;

}

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

@media(max-width:991px){

.hero-content h1{

font-size:46px;

}

.hero-content p{

font-size:18px;

}

.service-grid{

grid-template-columns:1fr;

gap:45px;

}

.reverse .service-grid{

direction:rtl;

}

.service-image{

order:-1;

}

.service-text{

text-align:center;

}

.service-text h2{

font-size:40px;

}

.community h2{

font-size:42px;

}

.community p{

font-size:18px;

}

}

@media(max-width:768px){

.services-hero{

padding:120px 0 80px;

height:auto;

}

.hero-content h1{

font-size:36px;

}

.hero-content p{

font-size:17px;

}

.hero-btn{

padding:15px 35px;

font-size:16px;

}

.service-section{

padding:80px 0;

}

.service-text h2{

font-size:34px;

}

.service-text p{

font-size:17px;

}

.service-text ul li{

font-size:16px;

}

.community{

padding:90px 0;

}

.community h2{

font-size:34px;

}

.community p{

font-size:17px;

}

}



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

.footer{

padding:100px 20px;

background:#0b1017;

}

.footer-box{

max-width:950px;

margin:auto;

background:#1b222d;

padding:60px 40px;

border-radius:30px;

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

text-align:center;

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

}

.footer-logo{

width:90px;

margin-bottom:25px;

}

.footer h2{

font-size:55px;

color:#fff;

margin-bottom:45px;

font-weight:900;

}

.contact-list{

display:flex;

flex-direction:column;

gap:22px;

margin-bottom:45px;

}

.contact-item{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:22px;

color:#ddd;

flex-wrap:wrap;

}

.contact-item i{

color:#19e66e;

font-size:22px;

}

.contact-item a{

color:#fff;

text-decoration:none;

transition:.3s;

}

.contact-item a:hover{

color:#19e66e;

}

.footer-social{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:35px;

}

.footer-social a{

width:150px;

height:60px;

background:#19e66e;

border-radius:50px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

text-decoration:none;

color:#000;

font-weight:700;

font-size:18px;

transition:.35s;

}

.footer-social a:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(25,230,110,.35);

}

.footer-social i{

font-size:22px;

}

.copyright{

margin-top:50px;

padding-top:25px;

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

color:#8f98a8;

font-size:15px;

}

@media(max-width:768px){

.footer h2{

font-size:42px;

}

.contact-item{

font-size:18px;

}

.footer-social a{

width:100%;

max-width:260px;

}

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

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:rgba(10,15,22,.92);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
height:90px;
}

.logo img{
height:58px;
}

.nav-links{
display:flex;
align-items:center;
gap:35px;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:#fff;
font-size:18px;
font-weight:700;
transition:.3s;
position:relative;
}

.nav-links a::after{
content:"";
position:absolute;
right:0;
bottom:-8px;
width:0;
height:2px;
background:#00ff88;
transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
color:#00ff88;
}

.nav-links a:hover::after,
.nav-links a.active::after{
width:100%;
}

.register-btn{
background:#00ff88;
color:#111;
padding:14px 32px;
border-radius:50px;
font-weight:800;
text-decoration:none;
transition:.3s;
}

.register-btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,255,136,.35);
}

.services-hero{
padding-top:90px;
}

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

@media(max-width:992px){

.nav-container{
flex-direction:column;
height:auto;
padding:15px 0;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
gap:18px;
margin:20px 0;
}

.register-btn{
padding:12px 25px;
}

.logo img{
height:50px;
}

}
/* ================= HERO FIX ================= */
.services-hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(rgba(5,8,12,.45), rgba(5,8,12,.55)),
        url("هيرو\ كورس.png");

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
/* تخفيف الإضاءة الخضراء */

.services-hero::before{

    width:500px !important;
    height:500px !important;

    top:-180px !important;
    left:-180px !important;

    filter:blur(90px) !important;

    opacity:.45;

}

.services-hero::after{

    width:450px !important;
    height:450px !important;

    right:-150px !important;
    bottom:-150px !important;

    filter:blur(90px) !important;

    opacity:.35;

}

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

.hero-content h1{

    color:#fff;

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

}

.hero-content p{

    color:#f1f1f1 !important;

    text-shadow:
    0 2px 10px rgba(0,0,0,.7);

    max-width:900px;

    margin:auto auto 40px;

}

/* الزر */

.hero-btn{

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

}
.hero h1,
.hero-content h1{

    animation:neonPulse 2.5s infinite alternate;

}

@keyframes neonPulse{

from{

text-shadow:
0 0 5px #19e66a,
0 0 10px #19e66a,
0 0 20px #19e66a;

}

to{

text-shadow:
0 0 10px #19e66a,
0 0 20px #19e66a,
0 0 40px #19e66a,
0 0 70px #19e66a;

}

}
/*=========================
    NEON SERVICE CARDS
=========================*/

.service-section{

    position:relative;

}

.service-image,
.service-text{

    animation:floatCard 4s ease-in-out infinite;

}

/* كل كارت يتحرك في وقت مختلف */

.service-section:nth-child(even) .service-image,
.service-section:nth-child(even) .service-text{

    animation-delay:1.2s;

}

/* الصورة */

.service-image{

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 0 0 rgba(24,210,110,0);

    transition:.45s;

}

/* Glow */

.service-image::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:30px;

    background:linear-gradient(
    45deg,
    #18d26e,
    transparent,
    #18d26e);

    opacity:0;

    z-index:-1;

    filter:blur(18px);

    transition:.45s;

}

/* Hover */

.service-section:hover .service-image{

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

    box-shadow:

    0 0 25px rgba(24,210,110,.35),

    0 0 60px rgba(24,210,110,.18);

}

.service-section:hover .service-image::before{

    opacity:1;

}

/* الصورة */

.service-image img{

    transition:.5s;

}

.service-section:hover img{

    transform:scale(1.06);

}

/* العنوان */

.service-text h2{

    transition:.35s;

}

.service-section:hover h2{

    color:#19e66a;

    text-shadow:

    0 0 10px #19e66a,

    0 0 25px rgba(25,230,106,.55);

}

/* الزر */

.service-btn{

    transition:.35s;

}

.service-section:hover .service-btn{

    box-shadow:

    0 0 20px rgba(25,230,106,.45),

    0 0 40px rgba(25,230,106,.25);

}

/* الحركة */

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}
/* ===================================================
        PREMIUM EFFECTS - PHOTO SHOOT ACADEMY
===================================================*/

/* Grid Background */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
    z-index:-1;
}

/* Floating */

.service-section{
    animation:floatSection 5s ease-in-out infinite;
}

.service-section:nth-child(even){
    animation-delay:1.2s;
}

@keyframes floatSection{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

}

/* Image */

.service-image{
    position:relative;
    overflow:hidden;
    border-radius:28px;
}

.service-image img{
    transition:.6s;
}

.service-section:hover img{
    transform:scale(1.06);
}

/* Shine */

.service-image::after{

content:"";

position:absolute;

top:0;

left:-130%;

width:55%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent);

transform:skewX(-25deg);

transition:1s;

}

.service-section:hover .service-image::after{

left:180%;

}

/* Glow */

.service-section:hover .service-image{

box-shadow:
0 0 25px rgba(25,230,106,.30),
0 0 55px rgba(25,230,106,.18);

}

/* Title */

.service-text h2{

transition:.35s;

}

.service-section:hover h2{

color:#19e66a;

text-shadow:
0 0 8px #19e66a,
0 0 18px rgba(25,230,106,.45);

}

/* Paragraph */

.service-text p{

transition:.35s;

}

.service-section:hover p{

color:#fff;

}

/* Button */

.service-btn{

transition:.35s;

}

.service-section:hover .service-btn{

transform:translateY(-5px);

box-shadow:
0 0 20px rgba(25,230,106,.35),
0 15px 35px rgba(25,230,106,.25);

}

/* Line */

.service-text h2::after{

content:"";

display:block;

width:70px;

height:4px;

margin-top:15px;

border-radius:20px;

background:#19e66a;

transition:.4s;

}

.service-section:hover h2::after{

width:130px;

}

/* Reveal */

.hidden{

opacity:0;

transform:translateY(70px);

transition:
opacity .8s ease,
transform .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Scroll Progress */

#progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,#19e66a,#5cffae);

box-shadow:
0 0 15px #19e66a;

z-index:999999;

}
/*====================================
      ULTIMATE PREMIUM EFFECT
====================================*/

/* Glass Effect */

.service-section{
    position:relative;
    overflow:hidden;
}

.service-section::before{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(circle at top left,
rgba(24,210,110,.05),
transparent 45%);

opacity:0;

transition:.5s;

pointer-events:none;

}

.service-section:hover::before{

opacity:1;

}

/* Neon Border */

.service-image{

position:relative;

}

.service-image::before{

content:"";

position:absolute;

inset:-2px;

border-radius:30px;

background:linear-gradient(
45deg,
transparent,
#19e66a,
transparent,
#19e66a);

opacity:0;

filter:blur(18px);

transition:.4s;

z-index:-1;

}

.service-section:hover .service-image::before{

opacity:1;

}

/* Image */

.service-image img{

transition:
transform .6s,
filter .6s;

}

.service-section:hover img{

transform:scale(1.05);

filter:brightness(1.08);

}

/* List Animation */

.service-text ul li{

transition:.35s;

}

.service-section:hover ul li{

padding-right:12px;

color:#fff;

}

/* Button */

.service-btn{

position:relative;

overflow:hidden;

}

.service-btn::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.4),
transparent);

transform:skewX(-20deg);

transition:.8s;

}

.service-btn:hover::after{

left:180%;

}

/* Smooth */

.service-section,
.service-image,
.service-text{

will-change:transform;

transform:translateZ(0);

}
/*====================================
      PREMIUM SERVICE HOVER
====================================*/

.service-section{
    position: relative;
    overflow: hidden;
}

.service-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(25,230,106,.06),
        transparent 45%,
        rgba(25,230,106,.04)
    );
    opacity: 0;
    transition: .5s ease;
    pointer-events: none;
}

.service-section:hover::before{
    opacity: 1;
}

.service-grid{
    transition: .45s ease;
}

.service-section:hover .service-grid{
    transform: translateY(-8px);
}

.service-image{
    overflow: hidden;
    border-radius: 28px;
}

.service-image img{
    transition: transform .6s ease, filter .6s ease;
}

.service-section:hover .service-image img{
    transform: scale(1.06) rotate(.5deg);
    filter: brightness(1.08);
}

.service-text h2{
    transition: .35s ease;
}

.service-section:hover .service-text h2{
    color: #19e66a;
    text-shadow:
        0 0 10px rgba(25,230,106,.6),
        0 0 25px rgba(25,230,106,.35);
}

.service-text ul li{
    transition: .35s ease;
}

.service-section:hover .service-text ul li{
    transform: translateX(-8px);
    color: #fff;
}

.service-btn{
    transition: .35s ease;
}

.service-section:hover .service-btn{
    transform: translateY(-5px) scale(1.04);
    box-shadow:
        0 0 25px rgba(25,230,106,.45),
        0 15px 40px rgba(25,230,106,.25);
}

.service-image::after{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: skewX(-25deg);
    transition: .9s;
}

.service-section:hover .service-image::after{
    left: 170%;
}

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

@media (max-width:768px){

.services-hero{
    min-height:100vh;
    padding:130px 20px 70px;
    text-align:center;
}

.services-hero h1{
    font-size:42px;
    line-height:1.3;
}

.services-hero p{
    font-size:18px;
    line-height:1.9;
    max-width:100%;
}

.hero-btn{
    width:100%;
    max-width:260px;
    margin:auto;
}

.service-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:30px;
}

.service-grid.reverse{
    flex-direction:column !important;
}

.service-image{
    width:100%;
}

.service-image img{
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:contain;
    border-radius:18px;
    display:block;
    background:#111;
}

.service-text{
    text-align:center;
}

.service-text h2{
    font-size:32px;
}

.service-text p,
.service-text li{
    font-size:18px;
    line-height:1.9;
}

.service-btn{
    width:100%;
    max-width:240px;
    margin:25px auto 0;
}

.community{
    padding:70px 20px;
    text-align:center;
}

.community h2{
    font-size:34px;
}

.community p{
    font-size:18px;
}

.footer{
    padding:50px 20px;
}

.footer-logo{
    width:150px;
}

.contact-item{
    justify-content:center;
    text-align:center;
    flex-wrap:wrap;
}

.footer-social{
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.footer-social a{
    width:48%;
    justify-content:center;
}

}
/* ================= FORCE MOBILE FIX ================= */

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

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

.services-hero{
    min-height:auto !important;
    padding:140px 20px 70px !important;
}

.hero-content{
    width:100% !important;
}

.hero-content h1{
    font-size:34px !important;
    line-height:1.35 !important;
}

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

.service-grid,
.reverse .service-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
}

.service-image{
    width:100% !important;
    order:1 !important;
}

.service-text{
    width:100% !important;
    order:2 !important;
    text-align:center !important;
}

.service-image img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    border-radius:20px !important;
    transform:none !important;
}

.service-text h2{
    font-size:30px !important;
}

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

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

.footer-social a{
    width:100% !important;
}

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

}
/* ===============================
   ULTIMATE HERO UPGRADE
   ضع في آخر ملف CSS
================================ */

.services-hero{

position:relative !important;

min-height:100vh !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

padding:140px 20px 90px !important;

overflow:hidden;

background-attachment:fixed;

}

/* Overlay احترافي */

.services-hero::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
rgba(5,10,15,.25),
rgba(5,10,15,.72)
),

radial-gradient(circle at top,
rgba(0,255,150,.12),
transparent 60%);

filter:none !important;

opacity:1 !important;

z-index:1;

}

.services-hero::after{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,255,153,.25),
transparent 70%);

top:-180px;

right:-180px;

animation:heroGlow 8s linear infinite;

z-index:1;

}

@keyframes heroGlow{

0%{

transform:scale(1) rotate(0);

}

50%{

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

}

100%{

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

}

}

.hero-content{

position:relative;

z-index:10;

max-width:720px;

text-align:center;

animation:heroFade 1s ease;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:none;

}

}

.hero-content h1{

font-size:clamp(38px,7vw,72px)!important;

line-height:1.15;

font-weight:900;

margin-bottom:25px;

color:#fff;

text-shadow:

0 0 10px rgba(0,255,150,.35),

0 15px 35px rgba(0,0,0,.55);

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

}

@keyframes titleFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

.hero-content p{

font-size:20px;

line-height:2;

max-width:650px;

margin:auto auto 35px;

color:#f2f2f2;

}

.badge{

background:rgba(0,255,153,.15)!important;

border:1px solid rgba(0,255,153,.35)!important;

backdrop-filter:blur(15px);

box-shadow:

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

}

.hero-btn{

background:linear-gradient(135deg,#00ff99,#19e66a)!important;

color:#000;

font-weight:800;

border-radius:60px;

transition:.45s;

box-shadow:

0 20px 45px rgba(0,255,153,.28);

}

.hero-btn:hover{

transform:translateY(-8px) scale(1.05);

box-shadow:

0 0 30px rgba(0,255,153,.45),

0 25px 60px rgba(0,255,153,.30);

}

/* الهاتف */

@media(max-width:768px){

.services-hero{

background-position:60% center!important;

padding:120px 18px 70px!important;

min-height:90vh!important;

}

.hero-content h1{

font-size:42px!important;

line-height:1.3!important;

}

.hero-content p{

font-size:17px!important;

line-height:1.9!important;

}

.hero-btn{

width:100%;

max-width:260px;

margin:auto;

}

}
/* ================= HERO MOBILE FIX ================= */

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

.services-hero{

    min-height:100vh !important;

    height:100vh !important;

    padding:85px 20px 35px !important;

    display:flex !important;

    align-items:flex-start !important;

    justify-content:center !important;

    background-image:
    linear-gradient(rgba(5,8,12,.35),rgba(5,8,12,.55)),
    url("هيرو كورس.png") !important;

    background-size:contain !important;

    background-repeat:no-repeat !important;

    background-position:center top !important;

}

.hero-content{

    margin-top:15px !important;

    transform:none !important;

}

.badge{

    margin-bottom:18px !important;

}

.hero-content h1{

    font-size:34px !important;

    line-height:1.25 !important;

    margin-bottom:18px !important;

}

.hero-content p{

    font-size:17px !important;

    line-height:1.8 !important;

    margin-bottom:25px !important;

}

.hero-btn{

    width:100% !important;

    max-width:250px !important;

    margin:auto !important;

}

}
/* Hero Image Fix */

.services-hero{

background-size:cover !important;

background-position:22% center !important;
/* حرّك الصورة ناحية الشمال */

background-repeat:no-repeat;

}

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

@media (max-width:768px){

.services-hero{

background-position:18% top !important;

background-size:145% auto !important;
/* تكبير بسيط يركز على الشخص */

min-height:92vh !important;

}

.services-hero::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
rgba(6,10,14,.45),
rgba(6,10,14,.72)
);

z-index:1;

}

.hero-content{

position:relative;

z-index:2;

}

}
/* ===========================
   HERO IMAGE FULL FIX
   ضع في آخر ملف CSS
=========================== */

.services-hero{
    position: relative !important;
    min-height: 100vh !important;
    height: 100vh !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;
    background-color: #0b1118 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    overflow: hidden !important;
}

.services-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    linear-gradient(
        to bottom,
        rgba(7,12,18,.15),
        rgba(7,12,18,.45)
    );
    z-index: 1;
}

.services-hero .container,
.services-hero .hero-content{
    position: relative;
    z-index: 2;
}

@media (max-width:768px){

.services-hero{

    min-height:100vh !important;
    height:100vh !important;

    background-size:100% auto !important;
    background-position:center top !important;

    padding-top:55vh !important;
    padding-bottom:30px !important;

}

.hero-content{

    margin:0 auto !important;

}

.hero-content h1{

    font-size:38px !important;
    line-height:1.2 !important;

}

.hero-content p{

    font-size:17px !important;

}

.hero-btn{

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

}

}
/* ===== HERO IMAGE POSITION FIX ===== */

.services-hero{
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;

    /* انزل الصورة لتحت */
    background-position: center 60px !important;

    min-height: 100vh !important;
    padding-top: 360px !important;
}

@media (max-width:768px){

.services-hero{

    background-size: 100% auto !important;

    /* غير الرقم ده لو عايزها تنزل أكتر */
    background-position: center 70px !important;

    padding-top: 340px !important;

}

}
/* =========================
   HERO TEXT TOP FIX
========================= */

.services-hero{

display:flex !important;
justify-content:flex-start !important;
align-items:flex-start !important;

padding-top:140px !important;
padding-bottom:40px !important;

min-height:100vh !important;

}

.hero-content{

margin-top:0 !important;

padding-top:0 !important;

transform:none !important;

display:flex;
flex-direction:column;
align-items:center;

}

.badge{

margin-bottom:18px !important;

}

.hero-content h1{

margin:0 0 20px !important;

line-height:1.15 !important;

}

.hero-content p{

margin:0 auto 30px !important;

}

@media(max-width:768px){

.services-hero{

padding-top:120px !important;

justify-content:flex-start !important;
align-items:flex-start !important;

}

.hero-content{

margin-top:0 !important;

}

}
/* ===== REMOVE HERO OVERLAY ===== */

.services-hero::before,
.services-hero::after{
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* إزالة أي فلاتر أو تعتيم */

.services-hero{
    filter: none !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
}

/* الصورة نفسها */

.services-hero img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}
/* ===== Language Switcher ===== */

.lang-switcher{
    position:absolute;
    top:25px;
    right:25px;

    display:flex;
    gap:10px;
}

.lang-btn{
    width:46px;
    height:46px;

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

    text-decoration:none;
    font-weight:800;
    font-size:15px;

    color:#fff;

    border:2px solid rgba(255,255,255,.15);
    border-radius:50%;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);

    transition:.3s;
}

.lang-btn:hover{
    transform:translateY(-2px);
    border-color:#00ff99;
}

.lang-btn.active{
    background:#00ff99;
    color:#000;
    border-color:#00ff99;
}

/* Mobile */

@media(max-width:768px){

.lang-switcher{
    top:15px;
    right:15px;
}

.lang-btn{
    width:40px;
    height:40px;
    font-size:13px;
}

.form-box{
    margin-top:40px;
}

}
.lang-switcher{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}
/* ===========================
   MOBILE NAVBAR FINAL FIX
=========================== */

@media (max-width:768px){

.navbar{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    background:#0b1015 !important;
    z-index:999999;
    padding:12px 0 !important;
}

.nav-container{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    height:auto !important;
}

.logo{
    flex:0 0 auto;
}

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

.nav-links{
    flex:1;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    gap:12px !important;

    margin:0 !important;
    padding:0 !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;
    scrollbar-width:none;
}

.nav-links::-webkit-scrollbar{
    display:none;
}

.nav-links li{
    flex:0 0 auto;
    list-style:none;
}

.nav-links a{
    font-size:15px !important;
    font-weight:700;
    white-space:nowrap;
}

.lang-switcher{
    position:static !important;
    transform:none !important;
    display:flex;
    gap:6px;
}

.lang-btn{
    width:36px !important;
    height:36px !important;
    font-size:12px !important;
}

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

}