/*=====================================
      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;

}

}