/*=====================================
      LENS ACADEMY UI KIT
======================================*/

:root{

--primary:#18d26e;
--primary-hover:#10b85d;

--dark:#0b0f14;
--dark2:#111820;
--dark3:#1a222d;

--white:#ffffff;
--text:#cfcfcf;

--radius:22px;

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

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--dark);

color:var(--white);

overflow-x:hidden;

line-height:1.8;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(92%,1300px);

margin:auto;

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

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;

background:rgba(11,15,20,.55);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

transition:.4s ease;

}

header.active{

background:#0b0f14;

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

}

.nav{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

/*======================
      LOGO
=======================*/

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:800;

color:#fff;

}

.logo img{

width:60px;

height:60px;

object-fit:contain;

transition:.35s;

}

.logo:hover img{

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

}

/*======================
       MENU
=======================*/

nav ul{

display:flex;

align-items:center;

gap:35px;

}

nav ul li{

position:relative;

}

nav ul li a{

font-size:17px;

font-weight:600;

color:#fff;

padding:8px 0;

transition:.35s;

}

/* الخط الأخضر */

nav ul li a::after{

content:"";

position:absolute;

bottom:-8px;
right:0;

width:0;

height:3px;

background:#18d26e;

border-radius:20px;

transition:.35s;

}

nav ul li:hover a{

color:#18d26e;

}

nav ul li:hover a::after{

width:100%;

left:0;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 34px;

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

border-radius:50px;

font-weight:bold;

color:#000;

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

transition:.35s;

}

.btn:hover{

transform:translateY(-5px);

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

}

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

.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

color:#fff;

}

@media(max-width:991px){

nav{

display:none;

}

.menu-btn{

display:block;

}

.logo{

font-size:24px;

}

.logo img{

width:50px;

height:50px;

}

.btn{

display:none;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding:140px 0 80px;

background:
linear-gradient(to left,
rgba(11,15,20,.15),
rgba(11,15,20,.92)),
url("images/hero-bg.jpg") center/cover no-repeat;

}

.hero::before{

content:"";

position:absolute;

width:700px;
height:700px;

background:radial-gradient(circle,
rgba(24,210,110,.15),
transparent 70%);

top:-250px;

left:-250px;

border-radius:50%;

pointer-events:none;

}

.hero-content{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:70px;

}

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

.hero-text h4{

display:inline-block;

padding:8px 20px;

background:rgba(24,210,110,.12);

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

border-radius:30px;

color:#18d26e;

font-size:17px;

margin-bottom:25px;

}

.hero-text h1{

font-size:68px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}

.hero-text p{

font-size:19px;

color:#c8c8c8;

max-width:620px;

margin-bottom:40px;

}

/*=====================
BUTTONS
======================*/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn2{

padding:14px 32px;

border-radius:50px;

border:2px solid #18d26e;

color:#fff;

transition:.35s;

}

.btn2:hover{

background:#18d26e;

color:#000;

}

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

.hero-image{

display:flex;

justify-content:center;

align-items:center;

perspective:1200px;

}

.hero-image img{

width:100%;

max-width:700px;

border-radius:30px;

box-shadow:

0 35px 80px rgba(0,0,0,.45);

transition:.5s ease;

}

.hero-image img:hover{

transform:scale(1.03);

}

/*=====================
STATS
======================*/

.hero-stats{

display:flex;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

.hero-stats div{

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

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

backdrop-filter:blur(15px);

padding:20px 28px;

border-radius:20px;

min-width:140px;

transition:.35s;

}

.hero-stats div:hover{

transform:translateY(-8px);

border-color:#18d26e;

}

.hero-stats h2{

font-size:34px;

color:#18d26e;

margin-bottom:8px;

}

.hero-stats span{

color:#d5d5d5;

}

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

@media(max-width:991px){

.hero{

padding-top:130px;

}

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

margin-bottom:40px;

}

.hero-image img{

max-width:100%;

}

.hero-text h1{

font-size:42px;

}

.hero-text p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

}
/*=====================================
        ABOUT SECTION
======================================*/

.about{

padding:120px 0;

background:#10161d;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:46px;

font-weight:800;

margin-bottom:15px;

}

.section-title p{

max-width:720px;

margin:auto;

color:#bdbdbd;

line-height:2;

}

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

.about-grid{

display:grid;

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

gap:30px;

}

.card{

position:relative;

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

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

border-radius:26px;

padding:45px 30px;

text-align:center;

overflow:hidden;

transition:.45s ease;

cursor:pointer;

}

/* Glow */

.card::before{

content:"";

position:absolute;

width:220px;
height:220px;

background:rgba(24,210,110,.15);

border-radius:50%;

top:-130px;
left:-130px;

transition:.5s;

}

.card:hover::before{

transform:scale(2);

}

.card:hover{

transform:translateY(-15px);

border-color:#18d26e;

box-shadow:

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

}

.card i{

font-size:52px;

color:#18d26e;

margin-bottom:22px;

transition:.4s;

}

.card:hover i{

transform:rotate(-10deg) scale(1.15);

}

.card h3{

font-size:26px;

margin-bottom:15px;

}

.card p{

color:#bdbdbd;

line-height:2;

}

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

.services{

padding:120px 0;

background:#0b0f14;

}

.services-grid{

display:grid;

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

gap:28px;

}

.service{

position:relative;

background:#151d27;

border-radius:22px;

padding:45px 20px;

text-align:center;

overflow:hidden;

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

transition:.45s ease;

cursor:pointer;

}

.service::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#18d26e;

transform:scaleX(0);

transition:.4s;

}

.service:hover::after{

transform:scaleX(1);

}

.service:hover{

transform:translateY(-15px);

box-shadow:

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

border-color:#18d26e;

}

.service i{

font-size:54px;

margin-bottom:22px;

color:#18d26e;

transition:.4s;

}

.service:hover i{

transform:scale(1.2);

}

.service h3{

font-size:23px;

}

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

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.card,
.service{

padding:35px 25px;

}

}
/*=====================================
          COURSES
======================================*/

.courses{

padding:120px 0;

background:#10161d;

}

.course-grid{

display:grid;

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

gap:35px;

}

.course-card{

position:relative;

background:#151d27;

border-radius:28px;

overflow:hidden;

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

transition:.45s ease;

cursor:pointer;

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

}

.course-card:hover{

transform:translateY(-15px);

border-color:#18d26e;

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

}

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

.course-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.6s ease;

}

.course-card:hover img{

transform:scale(1.08);

}

/*======================
CONTENT
=======================*/

.course-content{

padding:28px;

}

.course-content h3{

font-size:28px;

margin-bottom:12px;

font-weight:700;

}

.course-content p{

color:#bfbfbf;

line-height:1.9;

margin-bottom:20px;

}

.course-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:15px;

}

.price{

font-size:24px;

font-weight:700;

color:#18d26e;

}

.course-btn{

padding:12px 22px;

background:#18d26e;

border-radius:30px;

font-weight:bold;

color:#000;

transition:.35s;

}

.course-btn:hover{

transform:translateY(-4px);

background:#32ff8d;

}

/*======================
BADGE
=======================*/

.badge{

position:absolute;

top:18px;

right:18px;

background:#18d26e;

color:#000;

padding:8px 18px;

font-size:14px;

font-weight:bold;

border-radius:25px;

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

}

/*======================
HOVER LIGHT
=======================*/

.course-card::before{

content:"";

position:absolute;

width:320px;

height:320px;

background:rgba(24,210,110,.08);

border-radius:50%;

top:-180px;

left:-180px;

transition:.5s;

}

.course-card:hover::before{

transform:scale(1.8);

}

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

@media(max-width:991px){

.course-grid{

grid-template-columns:1fr;

}

.course-card img{

height:230px;

}

.course-content h3{

font-size:24px;

}

}
/*=====================================
        COMPANIES
======================================*/

.companies{

padding:120px 0;

background:#0b0f14;

overflow:hidden;

}

.companies .section-title{

margin-bottom:70px;

}

.company-slider{

display:flex;

gap:30px;

align-items:center;

animation:companies 25s linear infinite;

width:max-content;

}

.company-slider:hover{

animation-play-state:paused;

}

.company-card{

width:220px;

height:120px;

background:#151d27;

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

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

transition:.4s ease;

}

.company-card:hover{

transform:translateY(-10px);

border-color:#18d26e;

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

}

.company-card img{

max-width:120px;

max-height:60px;

filter:grayscale(100%);

opacity:.7;

transition:.4s ease;

}

.company-card:hover img{

filter:none;

opacity:1;

transform:scale(1.08);

}

@keyframes companies{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

@media(max-width:991px){

.company-card{

width:160px;

height:90px;

}

.company-card img{

max-width:90px;

}

}
/*==============================
CONTACT FIX
==============================*/

.contact{
    padding:120px 0;
    background:#10161d;
}

.contact form{
    max-width:850px;
    margin:50px auto 0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.contact input,
.contact textarea{

    width:100%;
    padding:18px 20px;

    border:none;
    outline:none;

    background:#181f29;

    color:#fff;

    border-radius:15px;

    font-size:17px;

    transition:.3s;

}

.contact input:focus,
.contact textarea:focus{

    border:1px solid #18d26e;

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

}

.contact textarea{

    grid-column:1/3;

    min-height:180px;

    resize:none;

}

.contact button{

    grid-column:1/3;

    height:60px;

    border:none;

    border-radius:15px;

    background:linear-gradient(135deg,#18d26e,#38ff98);

    color:#000;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.contact button:hover{

    transform:translateY(-4px);

}

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

footer{

    margin-top:100px;

    padding:70px 20px;

    text-align:center;

    background:#070b10;

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

}

footer h3{

    font-size:36px;

    margin-bottom:15px;

}

footer p{

    color:#bbb;

    margin-bottom:20px;

}

.social{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:30px 0;

}

.social a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#181f29;

    color:#fff;

    transition:.35s;

}

.social a:hover{

    background:#18d26e;

    color:#000;

    transform:translateY(-5px);

}

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

@media(max-width:768px){

.contact form{

grid-template-columns:1fr;

}

.contact textarea,
.contact button{

grid-column:auto;

}

}
/*==================================
        PORTFOLIO GRID
==================================*/

.gallery{

display:grid;

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

gap:30px;

margin-top:60px;

}

.gallery a,
.gallery .item{

display:block;

overflow:hidden;

border-radius:22px;

background:#151d27;

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

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

transition:.4s ease;

}

.gallery img{

width:100%;

height:280px;

object-fit:cover;

display:block;

transition:.6s ease;

}

.gallery a:hover,
.gallery .item:hover{

transform:translateY(-12px);

border-color:#18d26e;

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

}

.gallery a:hover img,
.gallery .item:hover img{

transform:scale(1.08);

}

/* Tablet */

@media(max-width:991px){

.gallery{

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

}

}

/* Mobile */

@media(max-width:600px){

.gallery{

grid-template-columns:1fr;

}

.gallery img{

height:240px;

}

}
/*==============================
CONTACT INFO
==============================*/

.contact-info{

display:grid;

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

gap:25px;

margin:50px auto;

}

.info-card{

background:#151d27;

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

border-radius:22px;

padding:35px 25px;

text-align:center;

transition:.35s;

}

.info-card:hover{

transform:translateY(-10px);

border-color:#18d26e;

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

}

.info-card i{

font-size:42px;

color:#18d26e;

margin-bottom:18px;

}

.info-card h3{

margin-bottom:12px;

font-size:24px;

}

.info-card a{

color:#d7d7d7;

font-size:18px;

word-break:break-word;

transition:.3s;

}

.info-card a:hover{

color:#18d26e;

}

@media(max-width:991px){

.contact-info{

grid-template-columns:1fr;

}

}
/*==============================
CONTACT HEADER
==============================*/

.contact-title{

text-align:center;
font-size:42px;
font-weight:800;
margin-bottom:12px;
color:#fff;

}

.contact-subtitle{

text-align:center;
color:#bdbdbd;
font-size:18px;
margin-bottom:50px;

}

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

.contact-info{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
max-width:1050px;
margin:auto;

}

.info-card{

padding:28px 20px;

background:#161d26;

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

border-radius:18px;

text-align:center;

transition:.35s;

}

.info-card:hover{

transform:translateY(-8px);

border-color:#18d26e;

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

}

.info-card i{

font-size:38px;

color:#18d26e;

margin-bottom:15px;

}

.info-card h3{

font-size:28px;

margin-bottom:10px;

}

.info-card a{

font-size:17px;

color:#d5d5d5;

transition:.3s;

}

.info-card a:hover{

color:#18d26e;

}

@media(max-width:991px){

.contact-info{

grid-template-columns:1fr;

}

.contact-title{

font-size:34px;

}

}
/*====================================
      CINEMATIC INTRO
====================================*/

header{
opacity:0;
transform:translateY(-80px);
animation:navReveal 1s cubic-bezier(.22,1,.36,1) forwards;
}

.logo{
opacity:0;
transform:translateX(60px);
animation:logoReveal .9s .3s forwards;
}

nav ul li{
opacity:0;
transform:translateY(-30px);
}

nav ul li:nth-child(1){animation:menuReveal .6s .45s forwards;}
nav ul li:nth-child(2){animation:menuReveal .6s .55s forwards;}
nav ul li:nth-child(3){animation:menuReveal .6s .65s forwards;}
nav ul li:nth-child(4){animation:menuReveal .6s .75s forwards;}
nav ul li:nth-child(5){animation:menuReveal .6s .85s forwards;}
nav ul li:nth-child(6){animation:menuReveal .6s .95s forwards;}

.hero-image{
opacity:0;
transform:translateX(-140px) scale(.9);
animation:imageReveal 1.3s .7s cubic-bezier(.22,1,.36,1) forwards;
}

.hero-text h4{
opacity:0;
transform:translateY(40px);
animation:textReveal .8s .8s forwards;
}

.hero-text h1{
opacity:0;
transform:translateY(70px);
animation:textReveal 1s 1s forwards;
}

.hero-text p{
opacity:0;
transform:translateY(70px);
animation:textReveal 1s 1.25s forwards;
}

.hero-buttons{
opacity:0;
transform:translateY(70px);
animation:textReveal .9s 1.45s forwards;
}

.hero-stats{
opacity:0;
transform:translateY(70px);
animation:textReveal .9s 1.7s forwards;
}

@keyframes navReveal{

0%{
opacity:0;
transform:translateY(-80px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes logoReveal{

0%{
opacity:0;
transform:translateX(60px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes menuReveal{

0%{
opacity:0;
transform:translateY(-30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes imageReveal{

0%{
opacity:0;
transform:translateX(-140px) scale(.9) rotate(-4deg);
}

100%{
opacity:1;
transform:translateX(0) scale(1) rotate(0);
}

}

@keyframes textReveal{

0%{
opacity:0;
transform:translateY(70px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
/*==============================
BOOKING EVENT
==============================*/

.booking{

padding:120px 0;

background:#10161d;

}

.booking-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.booking-text span{

display:inline-block;

padding:8px 18px;

background:rgba(24,210,110,.12);

color:#18d26e;

border-radius:30px;

margin-bottom:20px;

font-weight:bold;

}

.booking-text h2{

font-size:55px;

margin-bottom:20px;

}

.booking-text p{

font-size:19px;

color:#cfcfcf;

line-height:2;

margin-bottom:30px;

}

.booking-text ul{

margin-bottom:35px;

}

.booking-text li{

margin:15px 0;

font-size:18px;

display:flex;

align-items:center;

gap:12px;

}

.booking-text i{

color:#18d26e;

}

.booking-image img{

width:100%;

border-radius:30px;

transition:.5s;

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

}

.booking-image img:hover{

transform:scale(1.04);

}

@media(max-width:991px){

.booking-content{

grid-template-columns:1fr;

}

.booking-image{

order:-1;

}

.booking-text{

text-align:center;

}

.booking-text li{

justify-content:center;

}

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

@media (max-width:768px){

header{
padding:10px 0;
}

.nav{

height:75px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 18px;

}

.logo{

font-size:22px;

}

.logo img{

width:42px;

height:42px;

}

nav{

position:fixed;

top:75px;

right:15px;

left:15px;

background:#121821;

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

border-radius:20px;

padding:20px;

display:flex;

flex-direction:column;

gap:18px;

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

transform:translateY(-20px);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:999;

}

nav.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

nav ul{

display:flex;

flex-direction:column;

gap:18px;

width:100%;

}

nav ul li{

width:100%;

text-align:center;

}

nav ul li a{

display:block;

padding:14px;

border-radius:12px;

font-size:18px;

transition:.3s;

}

nav ul li a:hover{

background:#18d26e;

color:#000;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

width:48px;

height:48px;

background:#18d26e;

border-radius:12px;

font-size:24px;

color:#000;

cursor:pointer;

}

.btn{

display:none;

}

}
/*==================================
        ABOUT PREMIUM
==================================*/

.about{

position:relative;

padding:120px 0;

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

width:420px;

height:420px;

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

top:-150px;

left:-120px;

filter:blur(60px);

pointer-events:none;

}

.about-title{

display:inline-block;

padding:8px 20px;

background:rgba(24,210,110,.12);

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

color:#18d26e;

border-radius:30px;

font-weight:bold;

margin-bottom:18px;

}

.about h2{

font-size:62px;

margin-bottom:18px;

line-height:1.2;

position:relative;

}

.about h2::after{

content:"";

display:block;

width:90px;

height:5px;

background:#18d26e;

border-radius:20px;

margin:20px auto 0;

}

.about p{

max-width:900px;

margin:30px auto 70px;

font-size:20px;

line-height:2;

color:#cfcfcf;

}

/* Cards */

.about-grid{

display:grid;

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

gap:30px;

}

.about-card{

background:#171e28;

padding:45px 30px;

border-radius:24px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.about-card::before{

content:"";

position:absolute;

width:120px;

height:120px;

background:#18d26e22;

border-radius:50%;

top:-50px;

left:-50px;

transition:.4s;

}

.about-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

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

}

.about-card:hover::before{

transform:scale(1.4);

}

.about-card i{

font-size:52px;

color:#18d26e;

margin-bottom:25px;

}

.about-card h3{

font-size:34px;

margin-bottom:18px;

}

.about-card p{

font-size:17px;

margin:0;

line-height:1.8;

}

@media(max-width:768px){

.about h2{

font-size:42px;

}

.about-grid{

grid-template-columns:1fr;

}

.about p{

font-size:17px;

}

}
/*==================================
        SERVICES
==================================*/

.services{

padding:120px 0;

background:#0f141b;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 22px;

border-radius:30px;

background:rgba(24,210,110,.12);

color:#18d26e;

font-weight:700;

margin-bottom:20px;

}

.section-title h2{

font-size:58px;

margin-bottom:18px;

}

.section-title p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:2;

color:#bdbdbd;

}

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

background:#171e28;

padding:40px 30px;

border-radius:22px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:-70px;

left:-70px;

width:150px;

height:150px;

background:rgba(24,210,110,.08);

border-radius:50%;

transition:.4s;

}

.service-card:hover{

transform:translateY(-12px);

border-color:#18d26e;

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

}

.service-card:hover::before{

transform:scale(1.5);

}

.service-card i{

font-size:50px;

color:#18d26e;

margin-bottom:25px;

}

.service-card h3{

font-size:30px;

margin-bottom:18px;

}

.service-card p{

font-size:17px;

line-height:1.9;

color:#d0d0d0;

}

@media(max-width:991px){

.services-grid{

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

}

}

@media(max-width:768px){

.services{

padding:80px 0;

}

.section-title h2{

font-size:40px;

}

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px 25px;

}

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

.founder{

padding:120px 0;

background:#111820;

}

.founder-content{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.founder-image{

position:relative;

}

.founder-image img{

width:100%;

border-radius:28px;

display:block;

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

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

transition:.4s;

}

.founder-image img:hover{

transform:scale(1.03);

}

.founder-text span{

display:inline-block;

padding:8px 18px;

background:rgba(24,210,110,.12);

color:#18d26e;

border-radius:30px;

font-weight:700;

margin-bottom:18px;

}

.founder-text h2{

font-size:58px;

margin-bottom:10px;

}

.founder-text h3{

font-size:26px;

color:#d4d4d4;

margin-bottom:25px;

}

.speaker-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 18px;

background:#171f29;

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

border-radius:14px;

margin-bottom:30px;

}

.speaker-badge i{

color:#18d26e;

}

.founder-text p{

font-size:18px;

line-height:2;

color:#d2d2d2;

margin-bottom:20px;

}

blockquote{

margin-top:35px;

padding:25px;

border-right:5px solid #18d26e;

background:#171f29;

border-radius:18px;

font-size:22px;

font-style:italic;

color:#fff;

line-height:1.8;

}

@media(max-width:991px){

.founder-content{

grid-template-columns:1fr;

text-align:center;

}

.founder-image{

max-width:380px;

margin:auto;

}

blockquote{

border-right:none;

border-top:4px solid #18d26e;

}

}
    /*==============================
    Founder Image Premium
==============================*/

.founder-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.founder-image img{
    width: 320px;
    max-width: 100%;
    position: relative;
    z-index: 2;

    transition: .35s ease;

    filter:
    drop-shadow(0 20px 35px rgba(0,0,0,.35));
}

/* هالة خضراء خلف الصورة */

.founder-image::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(24,210,110,.28),
    transparent 70%);

    bottom:70px;

    left:50%;

    transform:translateX(-50%);

    z-index:1;

    transition:.35s;

}

/* خط مضيء أسفل الصورة */

.founder-image::after{

    content:"";

    position:absolute;

    width:180px;

    height:18px;

    background:rgba(24,210,110,.18);

    filter:blur(18px);

    bottom:5px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

}

/* Hover */

.founder-content:hover .founder-image img{

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

}

.founder-content:hover .founder-image::before{

    transform:
    translateX(-50%)
    scale(1.15);

    opacity:1;

}
/*=========================================
  FORCE FOUNDER IMAGE STYLE
  ضع هذا في آخر style.css
=========================================*/

.founder-image{
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
    overflow:visible !important;
    isolation:isolate !important;
}

/* الهالة الخضراء */

.founder-image::before{

    content:"" !important;

    position:absolute !important;

    width:340px !important;
    height:430px !important;

    left:50% !important;
    top:50% !important;

    transform:translate(-50%,-50%) !important;

    background:radial-gradient(circle,
    rgba(24,210,110,.45) 0%,
    rgba(24,210,110,.22) 35%,
    rgba(24,210,110,.08) 60%,
    transparent 80%) !important;

    filter:blur(45px) !important;

    z-index:0 !important;

    pointer-events:none !important;

}

/* لمعة أمامية */

.founder-image::after{

    content:"" !important;

    position:absolute !important;

    width:140px !important;
    height:320px !important;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.16),
        rgba(255,255,255,0)
    ) !important;

    left:42% !important;
    top:30px !important;

    transform:rotate(8deg) !important;

    filter:blur(18px) !important;

    opacity:.75 !important;

    z-index:1 !important;

}

/* الصورة */

.founder-image img{

    position:relative !important;

    z-index:2 !important;

    width:330px !important;

    max-width:100% !important;

    transition:.35s ease !important;

    filter:
    brightness(1.12)
    contrast(1.12)
    saturate(1.15)
    drop-shadow(0 20px 45px rgba(0,0,0,.45))
    !important;

}

/* Hover */

.founder-content:hover .founder-image img{

    transform:
    translateY(-8px)
    scale(1.04) !important;

}
.logo img{
    width: 220px; /* كبر أو صغر الرقم حسب اللي يناسبك */
    height: auto;
    transition: .3s ease;
}

.logo img:hover{
    transform: scale(1.05);
}
/*==============================
 FEATURED COURSE
==============================*/

.featured-course{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:70px;

padding:90px 8%;

background:#121821;

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

border-radius:28px;

margin:80px auto;

overflow:hidden;

}

.course-image{

position:relative;

}

.course-image img{

width:100%;

border-radius:24px;

display:block;

transition:.4s;

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

}

.course-image:hover img{

transform:scale(1.03);

}

.course-badge{

position:absolute;

top:20px;

right:20px;

background:#22e67a;

color:#111;

padding:10px 18px;

font-weight:700;

border-radius:40px;

}

.course-category{

color:#22e67a;

font-weight:700;

letter-spacing:1px;

}

.course-content h2{

font-size:48px;

margin:15px 0;

line-height:1.3;

}

.course-content p{

color:#bbb;

line-height:2;

margin-bottom:35px;

}

.course-info{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.course-info div{

background:#1b222d;

padding:18px;

border-radius:16px;

}

.course-info i{

color:#22e67a;

margin-left:10px;

}

.course-features{

display:grid;

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

gap:15px;

margin-bottom:35px;

}

.course-features div{

padding:12px 18px;

background:#18212a;

border-radius:12px;

}

.course-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/* Mobile */

@media(max-width:900px){

.featured-course{

grid-template-columns:1fr;

text-align:center;

padding:60px 25px;

}

.course-content h2{

font-size:34px;

}

.course-info{

grid-template-columns:1fr;

}

.course-features{

grid-template-columns:1fr;

}

.course-buttons{

justify-content:center;

}

}
/*==================================
      Companies Box
==================================*/

.company-slider{

display:grid;

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

gap:12px;

padding:25px;

background:#161d27;

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

border-radius:24px;

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

}

.company-card{

background:#1d2531;

height:85px;

display:flex;

justify-content:center;

align-items:center;

border-radius:14px;

overflow:hidden;

transition:.3s ease;

}

.company-card:hover{

transform:translateY(-5px);

background:#232d3a;

border:1px solid #18d26e;

}

.company-card img{

max-width:90%;

max-height:70px;

object-fit:contain;

transition:.3s ease;

}

.company-card:hover img{

transform:scale(1.08);

}

/* Tablet */

@media(max-width:992px){

.company-slider{

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

}

}

/* Mobile */

@media(max-width:768px){

.company-slider{

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

padding:18px;

gap:10px;

}

.company-card{

height:70px;

}

.company-card img{

max-height:55px;

}

}
/* إيقاف أي حركة للشركات */

.company-slider{
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.company-card{
    animation: none !important;
    transform: none !important;
    transition: .3s ease !important;
}

.company-card img{
    animation: none !important;
    transform: none !important;
}
/*==============================
      FIX COMPANIES GRID
==============================*/

.company-slider{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;

    max-width:1250px !important;
    margin:50px auto !important;

    padding:25px !important;

    background:#171e28 !important;
    border:1px solid rgba(255,255,255,.06) !important;
    border-radius:28px !important;
}

.company-card{
    width:180px !important;
    height:95px !important;

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

    background:#212937 !important;

    border:1px solid rgba(255,255,255,.05) !important;
    border-radius:18px !important;

    transition:.35s ease !important;
}

.company-card:hover{
    transform:translateY(-6px) !important;
    border-color:#18d26e !important;
    box-shadow:0 10px 25px rgba(24,210,110,.18) !important;
}

.company-card img{
    width:85px !important;
    height:85px !important;
    object-fit:contain !important;
    filter:grayscale(100%) !important;
    opacity:.9 !important;
    transition:.35s !important;
}

.company-card:hover img{
    filter:none !important;
    opacity:1 !important;
    transform:scale(1.08) !important;
}

@media(max-width:768px){

.company-card{
    width:140px !important;
    height:80px !important;
}

.company-card img{
    width:65px !important;
    height:65px !important;
}

}
/* ==========================
   Company Cards Effects
========================== */

.company-card{
    position:relative !important;
    overflow:hidden !important;

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

    transition:.35s ease !important;
}

.company-card:nth-child(even){
    animation-delay:1.5s;
}

.company-card:nth-child(3n){
    animation-delay:3s;
}

/* نيون متحرك */
.company-card::before{

    content:"";

    position:absolute;

    top:-150%;
    left:-60%;

    width:45%;
    height:400%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(24,210,110,.45),
        transparent
    );

    transform:rotate(25deg);

    animation:shine 6s linear infinite;

}

/* Hover */

.company-card:hover{

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

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

    border-color:#18d26e;

}

.company-card img{

    transition:.35s;

}

.company-card:hover img{

    transform:scale(1.08);

    filter:none;

}

/* حركة خفيفة */

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

}

/* مرور النيون */

@keyframes shine{

0%{

left:-70%;

}

100%{

left:170%;

}

}
/* دخول احترافي للشركات */

.company-card{

    opacity:0;

    transform:translateY(40px) scale(.9);

    transition:all .6s ease;

}

/* بعد ظهورها */

.company-card.aos-animate{

    opacity:1;

    transform:translateY(0) scale(1);

}
/*==============================
        LOADER
==============================*/

#loader{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:#070b10;

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

z-index:999999;

transition:opacity .7s,visibility .7s;

}

#loader.hide{

opacity:0;
visibility:hidden;

}

.loader-content{

text-align:center;

}

.camera-loader{

width:120px;
height:120px;

margin:auto;

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

border-radius:50%;

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

position:relative;

animation:rotateLens 2s linear infinite;

}

.camera-loader span{

position:absolute;

width:18px;
height:50px;

background:#18d26e;

border-radius:30px;

transform-origin:center 60px;

}

.camera-loader span:nth-child(1){transform:rotate(0deg);}
.camera-loader span:nth-child(2){transform:rotate(60deg);}
.camera-loader span:nth-child(3){transform:rotate(120deg);}
.camera-loader span:nth-child(4){transform:rotate(180deg);}
.camera-loader span:nth-child(5){transform:rotate(240deg);}
.camera-loader span:nth-child(6){transform:rotate(300deg);}

.loader-content h2{

margin-top:35px;

font-size:42px;

font-weight:800;

color:#fff;

letter-spacing:1px;

}

.loader-content p{

margin:10px 0 30px;

color:#999;

}

.loading-bar{

width:260px;

height:6px;

margin:auto;

background:#1b2430;

border-radius:20px;

overflow:hidden;

}

.loading-fill{

width:0%;

height:100%;

background:linear-gradient(90deg,#18d26e,#42ff96);

animation:loadingBar 2.4s linear forwards;

}

@keyframes rotateLens{

100%{

transform:rotate(360deg);

}

}

@keyframes loadingBar{

100%{

width:100%;

}
}
/*==========================
      Camera Lens Loader
==========================*/

.lens-loader{

position:relative;

width:170px;
height:170px;

margin:auto;

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

animation:lensRotate 5s linear infinite;

}

.lens-ring{

position:absolute;

border-radius:50%;

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

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

}

.ring1{

width:170px;
height:170px;

}

.ring2{

width:140px;
height:140px;

border-color:#18d26e55;

animation:rotateReverse 8s linear infinite;

}

.ring3{

width:110px;
height:110px;

border-color:#18d26e;

box-shadow:
0 0 25px #18d26e55,
inset 0 0 30px #18d26e33;

}

.ring4{

width:75px;
height:75px;

background:radial-gradient(circle,#1ef27f,#08110c);

box-shadow:

0 0 40px #18d26e,

inset 0 0 35px rgba(255,255,255,.3);

}

.lens-center{

position:absolute;

width:22px;
height:22px;

border-radius:50%;

background:#fff;

box-shadow:

0 0 20px #fff,

0 0 60px #18d26e;

z-index:5;

}

.flash{

position:absolute;

width:12px;
height:70px;

background:linear-gradient(transparent,#fff,transparent);

opacity:.8;

border-radius:30px;

transform:rotate(35deg);

animation:flashMove 2.5s linear infinite;

}

/* دوران العدسة */

@keyframes lensRotate{

100%{

transform:rotate(360deg);

}

}

@keyframes rotateReverse{

100%{

transform:rotate(-360deg);

}

}

/* لمعان العدسة */

@keyframes flashMove{

0%{

transform:rotate(35deg) translateX(-35px);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:rotate(35deg) translateX(35px);

opacity:0;

}

}
.navbar .logo{
    width: 90px !important;
    height: 90px !important;
}

.navbar .logo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}