/* ===========================================
   SENLEXX WEBSITE
   Main Stylesheet
   =========================================== */

/* ---------- RESET ---------- */

 

body{

    background:#050505;
    color:#ffffff;

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

    overflow-x:hidden;

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#090909;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    silver,
    #444,
    crimson
    );

    border-radius:50px;
}

/* ---------- LOADER ---------- */

#loader{

    position:fixed;

  

    background:black;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:1s;

}

.snake-logo{

    font-family:"UnifrakturCook",cursive;

    font-size:72px;

    color:silver;

    text-shadow:

    0 0 20px silver,

    0 0 50px white;

}

#loader p{

    margin-top:20px;

    letter-spacing:5px;

    color:#cccccc;

}

/* ---------- NAVIGATION ---------- */

nav{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

    background:rgba(0,0,0,.45);

    

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

    z-index:5000;

}

.logo{

    font-family:"UnifrakturCook";

    font-size:42px;

    color:silver;

    letter-spacing:2px;

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.35s;

}

nav a:hover{

    color:crimson;

    text-shadow:0 0 15px crimson;

}

/* ---------- HERO ---------- */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top,
    rgba(180,180,180,.08),
    transparent 40%),

    radial-gradient(circle at bottom,
    rgba(140,0,0,.15),
    transparent 60%);

}

.hero-overlay{

    position:absolute;

   

    background:

    linear-gradient(
    rgba(0,0,0,.4),
    rgba(0,0,0,.75)
    );

}

.hero-content{

    position:relative;

    z-index:5;

   

}

.hero h1{

    font-family:"Cinzel";

    font-size:72px;

    letter-spacing:8px;

    background:
    linear-gradient(
    silver,
    white,
    #999
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:glow 4s infinite;

}

.hero p{

    margin-top:25px;

    color:#bbbbbb;

    font-size:20px;

    line-height:1.8;

}

/* ---------- BUTTONS ---------- */

.hero-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-block;

    padding:16px 42px;

    border:1px solid silver;

    color:white;

    text-decoration:none;

    transition:.35s;

    border-radius:40px;

    

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

}

.btn:hover{

    background:crimson;

    border-color:crimson;

    box-shadow:

    0 0 20px crimson,

    0 0 50px crimson;

}

.secondary{

    border-color:#666;

}

/* ---------- SECTIONS ---------- */

section{

    padding:110px 10%;

}

.about{

    text-align:center;

}

.about h2{

    font-family:"Cinzel";

    color:silver;

    font-size:42px;

    margin-bottom:30px;

}

.about p{

    color:#bbbbbb;

    line-height:2;

    max-width:900px;

    margin:auto;

}

/* ---------- FEATURES ---------- */

.features{

    display:grid;

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

    gap:40px;

}

.feature{

    padding:40px;

    border-radius:18px;

    background:

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

    border:

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

  

    transition:.4s;

}

.feature:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 25px crimson;

}

.feature h3{

    font-family:"Cinzel";

    margin-bottom:20px;

    color:silver;

}

/* ---------- MUSIC ---------- */

.music-player{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:1000;

}

.music-player button{

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

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

    color:white;

    font-size:24px;

    transition:.3s;

}

.music-player button:hover{

    background:crimson;

}

/* ---------- FOOTER ---------- */

footer{

    text-align:center;

    padding:60px;

    color:#888;

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

}

/* ---------- ANIMATIONS ---------- */

@keyframes glow{

    0%{

        filter:brightness(.8);

    }

    50%{

        filter:brightness(1.4);

    }

    100%{

        filter:brightness(.8);

    }

}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

nav{

    flex-direction:column;

    gap:20px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

}

.hero h1{

    font-size:44px;

    letter-spacing:3px;

}

.hero p{

    font-size:17px;

}

.about h2{

    font-size:34px;

}

}

/* Cursor */

#cursor{

width:18px;
height:18px;

border:2px solid crimson;

border-radius:50%;

position:fixed;

pointer-events:none;

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

box-shadow:
0 0 20px crimson;

z-index:999999;

}

/* Snake */

#snake{

position:fixed;

width:35px;
height:35px;

border-radius:50%;

background:
radial-gradient(circle,silver,#555,#111);

box-shadow:

0 0 30px silver,
0 0 60px crimson;

pointer-events:none;

z-index:999;

}

/* Particles */

#particles{

position:fixed;



overflow:hidden;

pointer-events:none;

z-index:-1;

}

.particle{

position:absolute;

bottom:-20px;

width:4px;
height:4px;

background:silver;

border-radius:50%;

animation:float linear forwards;

}

/* Scroll animation */

.hidden{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.visible{

opacity:1;

transform:translateY(0);

}

/* Floating animation */

@keyframes float{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:.8;

}

100%{

transform:translateY(-110vh);

opacity:0;

}

}

/* ===========================
   Marketplace
=========================== */

.page-hero{

padding-top:170px;
padding-bottom:80px;

text-align:center;

}

.page-hero h1{

font-family:"Cinzel";

font-size:64px;

letter-spacing:6px;

color:silver;

margin-bottom:20px;

}

.page-hero p{

color:#bdbdbd;

font-size:20px;

}

.market-search{

display:flex;

justify-content:center;

padding:20px;

}

.market-search input{

width:450px;

max-width:90%;

padding:15px;

background:#111;

border:1px solid crimson;

color:white;

border-radius:40px;

outline:none;

}

.market-grid{

display:grid;

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

gap:40px;

padding:80px 8%;

}

.product-card{

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

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

border-radius:20px;

overflow:hidden;

transition:.4s;



}

.product-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 25px crimson;

}

.product-image{

height:260px;

overflow:hidden;

}

.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-info{

padding:25px;

}

.product-info h2{

font-family:"Cinzel";

margin-bottom:15px;

color:silver;

}

.product-info p{

color:#bdbdbd;

margin-bottom:20px;

line-height:1.6;

}

.price{

font-size:24px;

color:crimson;

margin-bottom:20px;

font-weight:bold;

}

.product-info button{

width:100%;

padding:14px;

background:transparent;

border:1px solid crimson;

color:white;

cursor:pointer;

transition:.3s;

}

.product-info button:hover{

background:crimson;

}

.featured-banner{

text-align:center;

padding:120px 10%;

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

}

.featured-banner h2{

font-family:"Cinzel";

font-size:42px;

margin-bottom:25px;

color:silver;

}

.featured-banner p{

max-width:700px;

margin:auto;

color:#bdbdbd;

line-height:1.8;

margin-bottom:35px;

}

/* ===========================
   Portfolio
=========================== */

.portfolio-filter{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

padding:30px;

}

.filter-btn{

padding:12px 28px;

background:#111;

color:white;

border:1px solid crimson;

cursor:pointer;

transition:.3s;

border-radius:40px;

}

.filter-btn:hover,
.filter-btn.active{

background:crimson;

box-shadow:

0 0 20px crimson;

}

.gallery{

padding:80px 8%;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

background:#111;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.6s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.overlay{

position:absolute;



display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.55);

opacity:0;

transition:.4s;

}

.gallery-item:hover .overlay{

opacity:1;

}

.overlay h2{

font-family:"Cinzel";

color:white;

font-size:28px;

text-shadow:

0 0 20px crimson;

}

#lightbox{

position:fixed;


background:rgba(0,0,0,.92);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

#lightbox img{

max-width:90%;

max-height:90%;

border:2px solid crimson;

box-shadow:

0 0 40px crimson;

}

#lightbox span{

position:absolute;

top:30px;

right:40px;

font-size:60px;

cursor:pointer;

color:white;

transition:.3s;

}

#lightbox span:hover{

color:crimson;

}

/* ==========================================
   SENLEXX ACADEMY
========================================== */

.academy-intro{

padding:100px 10%;
text-align:center;

}

.academy-intro h2{

font-family:"Cinzel",serif;
font-size:46px;
color:silver;
margin-bottom:25px;
letter-spacing:2px;

}

.academy-intro p{

max-width:900px;
margin:auto;
line-height:2;
color:#cfcfcf;
font-size:18px;

}

/* ===========================
   Course Cards
=========================== */

.course-grid{

display:grid;

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

gap:35px;

padding:80px 8%;

}

.course-card{

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



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

border-radius:20px;

padding:35px;

transition:.4s;

position:relative;

overflow:hidden;

}

.course-card::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transition:.8s;

}

.course-card:hover::before{

left:100%;

}

.course-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 30px crimson,
0 0 60px rgba(220,20,60,.35);

}

.course-card h3{

font-family:"Cinzel";

font-size:30px;

color:crimson;

margin-bottom:10px;

}

.course-card h4{

font-size:22px;

color:silver;

margin-bottom:20px;

}

.course-card ul{

list-style:none;

}

.course-card li{

padding:12px 0;

border-bottom:

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

color:#d5d5d5;

}

/* ===========================
   Pricing
=========================== */

.pricing-section{

padding:120px 10%;

text-align:center;

}

.pricing-section h2{

font-family:"Cinzel";

font-size:48px;

margin-bottom:50px;

color:silver;

}

.pricing-card{

max-width:550px;

margin:auto;

padding:50px;

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

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

border-radius:25px;



transition:.4s;

}

.pricing-card:hover{

box-shadow:

0 0 35px crimson;

}

.pricing-card h3{

font-size:56px;

color:crimson;

margin-bottom:25px;

}

.pricing-card p{

color:#d6d6d6;

margin-bottom:30px;

}

.pricing-card ul{

list-style:none;

margin-bottom:35px;

}

.pricing-card li{

padding:10px;

color:#bbbbbb;

}

/* ===========================
   Software Grid
=========================== */

.software-section{

padding:110px 8%;

text-align:center;

}

.software-section h2{

font-family:"Cinzel";

font-size:44px;

margin-bottom:55px;

color:silver;

}

.software-grid{

display:grid;

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

gap:30px;

}

.software-card{

padding:40px;

background:#101010;

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

border-radius:18px;

transition:.35s;

}

.software-card:hover{

background:#181818;

transform:translateY(-8px);

box-shadow:

0 0 20px crimson;

}

.software-card h3{

font-size:28px;

color:silver;

margin-bottom:12px;

}

/* ===========================
   Timeline
=========================== */

.timeline{

padding:120px 10%;

}

.timeline h2{

text-align:center;

font-family:"Cinzel";

font-size:46px;

margin-bottom:60px;

color:silver;

}

.timeline-item{

padding:30px;

margin-bottom:30px;

border-left:4px solid crimson;

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

transition:.35s;

}

.timeline-item:hover{

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

transform:translateX(8px);

}

.timeline-item h3{

color:crimson;

margin-bottom:10px;

font-size:28px;

}

/* ===========================
   FAQ
=========================== */

.faq{

padding:120px 10%;

}

.faq h2{

text-align:center;

font-family:"Cinzel";

font-size:44px;

margin-bottom:60px;

color:silver;

}

.faq-item{

padding:30px;

margin-bottom:20px;

border-radius:18px;

background:#111;

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

transition:.3s;

}

.faq-item:hover{

box-shadow:

0 0 20px crimson;

}

.faq-item h3{

color:crimson;

margin-bottom:12px;

}

.faq-item p{

color:#c9c9c9;

}

/* ===========================
   Call To Action
=========================== */

.cta-banner{

padding:140px 10%;

text-align:center;

background:

linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(30,0,0,.55)
);

}

.cta-banner h2{

font-family:"Cinzel";

font-size:56px;

margin-bottom:25px;

color:silver;

}

.cta-banner p{

max-width:750px;

margin:auto;

font-size:20px;

line-height:1.8;

color:#d6d6d6;

margin-bottom:45px;

}

/* ===========================
   Academy Buttons
=========================== */

.pricing-card .btn,
.cta-banner .btn{

display:inline-block;

padding:16px 40px;

border-radius:40px;

border:1px solid crimson;

background:transparent;

color:white;

text-decoration:none;

transition:.35s;

}

.pricing-card .btn:hover,
.cta-banner .btn:hover{

background:crimson;

box-shadow:

0 0 25px crimson,
0 0 60px crimson;

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

.academy-intro h2,
.pricing-section h2,
.software-section h2,
.timeline h2,
.faq h2,
.cta-banner h2{

font-size:34px;

}

.pricing-card h3{

font-size:42px;

}

.course-card{

padding:28px;

}

}

/* ==========================================
   SENLEXX ACADEMY
========================================== */

.academy-intro{

padding:100px 10%;
text-align:center;

}

.academy-intro h2{

font-family:"Cinzel",serif;
font-size:46px;
color:silver;
margin-bottom:25px;
letter-spacing:2px;

}

.academy-intro p{

max-width:900px;
margin:auto;
line-height:2;
color:#cfcfcf;
font-size:18px;

}

/* ===========================
   Course Cards
=========================== */

.course-grid{

display:grid;

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

gap:35px;

padding:80px 8%;

}

.course-card{

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



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

border-radius:20px;

padding:35px;

transition:.4s;

position:relative;

overflow:hidden;

}

.course-card::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transition:.8s;

}

.course-card:hover::before{

left:100%;

}

.course-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 30px crimson,
0 0 60px rgba(220,20,60,.35);

}

.course-card h3{

font-family:"Cinzel";

font-size:30px;

color:crimson;

margin-bottom:10px;

}

.course-card h4{

font-size:22px;

color:silver;

margin-bottom:20px;

}

.course-card ul{

list-style:none;

}

.course-card li{

padding:12px 0;

border-bottom:

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

color:#d5d5d5;

}

/* ===========================
   Pricing
=========================== */

.pricing-section{

padding:120px 10%;

text-align:center;

}

.pricing-section h2{

font-family:"Cinzel";

font-size:48px;

margin-bottom:50px;

color:silver;

}

.pricing-card{

max-width:550px;

margin:auto;

padding:50px;

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

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

border-radius:25px;



transition:.4s;

}

.pricing-card:hover{

box-shadow:

0 0 35px crimson;

}

.pricing-card h3{

font-size:56px;

color:crimson;

margin-bottom:25px;

}

.pricing-card p{

color:#d6d6d6;

margin-bottom:30px;

}

.pricing-card ul{

list-style:none;

margin-bottom:35px;

}

.pricing-card li{

padding:10px;

color:#bbbbbb;

}

/* ===========================
   Software Grid
=========================== */

.software-section{

padding:110px 8%;

text-align:center;

}

.software-section h2{

font-family:"Cinzel";

font-size:44px;

margin-bottom:55px;

color:silver;

}

.software-grid{

display:grid;

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

gap:30px;

}

.software-card{

padding:40px;

background:#101010;

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

border-radius:18px;

transition:.35s;

}

.software-card:hover{

background:#181818;

transform:translateY(-8px);

box-shadow:

0 0 20px crimson;

}

.software-card h3{

font-size:28px;

color:silver;

margin-bottom:12px;

}

/* ===========================
   Timeline
=========================== */

.timeline{

padding:120px 10%;

}

.timeline h2{

text-align:center;

font-family:"Cinzel";

font-size:46px;

margin-bottom:60px;

color:silver;

}

.timeline-item{

padding:30px;

margin-bottom:30px;

border-left:4px solid crimson;

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

transition:.35s;

}

.timeline-item:hover{

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

transform:translateX(8px);

}

.timeline-item h3{

color:crimson;

margin-bottom:10px;

font-size:28px;

}

/* ===========================
   FAQ
=========================== */

.faq{

padding:120px 10%;

}

.faq h2{

text-align:center;

font-family:"Cinzel";

font-size:44px;

margin-bottom:60px;

color:silver;

}

.faq-item{

padding:30px;

margin-bottom:20px;

border-radius:18px;

background:#111;

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

transition:.3s;

}

.faq-item:hover{

box-shadow:

0 0 20px crimson;

}

.faq-item h3{

color:crimson;

margin-bottom:12px;

}

.faq-item p{

color:#c9c9c9;

}

/* ===========================
   Call To Action
=========================== */

.cta-banner{

padding:140px 10%;

text-align:center;

background:

linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(30,0,0,.55)
);

}

.cta-banner h2{

font-family:"Cinzel";

font-size:56px;

margin-bottom:25px;

color:silver;

}

.cta-banner p{

max-width:750px;

margin:auto;

font-size:20px;

line-height:1.8;

color:#d6d6d6;

margin-bottom:45px;

}

/* ===========================
   Academy Buttons
=========================== */

.pricing-card .btn,
.cta-banner .btn{

display:inline-block;

padding:16px 40px;

border-radius:40px;

border:1px solid crimson;

background:transparent;

color:white;

text-decoration:none;

transition:.35s;

}

.pricing-card .btn:hover,
.cta-banner .btn:hover{

background:crimson;

box-shadow:

0 0 25px crimson,
0 0 60px crimson;

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

.academy-intro h2,
.pricing-section h2,
.software-section h2,
.timeline h2,
.faq h2,
.cta-banner h2{

font-size:34px;

}

.pricing-card h3{

font-size:42px;

}

.course-card{

padding:28px;

}

}

/* ==========================================
   SENLEXX ACADEMY
========================================== */

.academy-intro{

padding:100px 10%;
text-align:center;

}

.academy-intro h2{

font-family:"Cinzel",serif;
font-size:46px;
color:silver;
margin-bottom:25px;
letter-spacing:2px;

}

.academy-intro p{

max-width:900px;
margin:auto;
line-height:2;
color:#cfcfcf;
font-size:18px;

}

/* ===========================
   Course Cards
=========================== */

.course-grid{

display:grid;

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

gap:35px;

padding:80px 8%;

}

.course-card{

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



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

border-radius:20px;

padding:35px;

transition:.4s;

position:relative;

overflow:hidden;

}

.course-card::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transition:.8s;

}

.course-card:hover::before{

left:100%;

}

.course-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 30px crimson,
0 0 60px rgba(220,20,60,.35);

}

.course-card h3{

font-family:"Cinzel";

font-size:30px;

color:crimson;

margin-bottom:10px;

}

.course-card h4{

font-size:22px;

color:silver;

margin-bottom:20px;

}

.course-card ul{

list-style:none;

}

.course-card li{

padding:12px 0;

border-bottom:

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

color:#d5d5d5;

}

/* ===========================
   Pricing
=========================== */

.pricing-section{

padding:120px 10%;

text-align:center;

}

.pricing-section h2{

font-family:"Cinzel";

font-size:48px;

margin-bottom:50px;

color:silver;

}

.pricing-card{

max-width:550px;

margin:auto;

padding:50px;

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

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

border-radius:25px;



transition:.4s;

}

.pricing-card:hover{

box-shadow:

0 0 35px crimson;

}

.pricing-card h3{

font-size:56px;

color:crimson;

margin-bottom:25px;

}

.pricing-card p{

color:#d6d6d6;

margin-bottom:30px;

}

.pricing-card ul{

list-style:none;

margin-bottom:35px;

}

.pricing-card li{

padding:10px;

color:#bbbbbb;

}

/* ===========================
   Software Grid
=========================== */

.software-section{

padding:110px 8%;

text-align:center;

}

.software-section h2{

font-family:"Cinzel";

font-size:44px;

margin-bottom:55px;

color:silver;

}

.software-grid{

display:grid;

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

gap:30px;

}

.software-card{

padding:40px;

background:#101010;

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

border-radius:18px;

transition:.35s;

}

.software-card:hover{

background:#181818;

transform:translateY(-8px);

box-shadow:

0 0 20px crimson;

}

.software-card h3{

font-size:28px;

color:silver;

margin-bottom:12px;

}

/* ===========================
   Timeline
=========================== */

.timeline{

padding:120px 10%;

}

.timeline h2{

text-align:center;

font-family:"Cinzel";

font-size:46px;

margin-bottom:60px;

color:silver;

}

.timeline-item{

padding:30px;

margin-bottom:30px;

border-left:4px solid crimson;

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

transition:.35s;

}

.timeline-item:hover{

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

transform:translateX(8px);

}

.timeline-item h3{

color:crimson;

margin-bottom:10px;

font-size:28px;

}

/* ===========================
   FAQ
=========================== */

.faq{

padding:120px 10%;

}

.faq h2{

text-align:center;

font-family:"Cinzel";

font-size:44px;

margin-bottom:60px;

color:silver;

}

.faq-item{

padding:30px;

margin-bottom:20px;

border-radius:18px;

background:#111;

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

transition:.3s;

}

.faq-item:hover{

box-shadow:

0 0 20px crimson;

}

.faq-item h3{

color:crimson;

margin-bottom:12px;

}

.faq-item p{

color:#c9c9c9;

}

/* ===========================
   Call To Action
=========================== */

.cta-banner{

padding:140px 10%;

text-align:center;

background:

linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(30,0,0,.55)
);

}

.cta-banner h2{

font-family:"Cinzel";

font-size:56px;

margin-bottom:25px;

color:silver;

}

.cta-banner p{

max-width:750px;

margin:auto;

font-size:20px;

line-height:1.8;

color:#d6d6d6;

margin-bottom:45px;

}

/* ===========================
   Academy Buttons
=========================== */

.pricing-card .btn,
.cta-banner .btn{

display:inline-block;

padding:16px 40px;

border-radius:40px;

border:1px solid crimson;

background:transparent;

color:white;

text-decoration:none;

transition:.35s;

}

.pricing-card .btn:hover,
.cta-banner .btn:hover{

background:crimson;

box-shadow:

0 0 25px crimson,
0 0 60px crimson;

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

.academy-intro h2,
.pricing-section h2,
.software-section h2,
.timeline h2,
.faq h2,
.cta-banner h2{

font-size:34px;

}

.pricing-card h3{

font-size:42px;

}

.course-card{

padding:28px;

}

}

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

.about-story{

display:grid;

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

gap:60px;

padding:120px 8%;

align-items:center;

}

.about-text h2{

font-family:"Cinzel";

font-size:48px;

color:silver;

margin-bottom:30px;

}

.about-text p{

line-height:2;

color:#cfcfcf;

font-size:18px;

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:100%;

max-width:500px;

border-radius:20px;

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

box-shadow:

0 0 40px rgba(220,20,60,.25);

transition:.5s;

}

.about-image img:hover{

transform:scale(1.03);

box-shadow:

0 0 50px crimson;

}

/* Mission */

.mission{

padding:120px 10%;

text-align:center;

}

.mission h2{

font-family:"Cinzel";

font-size:48px;

color:silver;

margin-bottom:30px;

}

.mission p{

max-width:850px;

margin:auto;

font-size:20px;

line-height:2;

color:#d2d2d2;

}

/* Values */

.values{

display:grid;

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

gap:35px;

padding:100px 8%;

}

.value-card{

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

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

border-radius:20px;

padding:40px;


transition:.35s;

}

.value-card:hover{

transform:translateY(-8px);

box-shadow:

0 0 30px crimson;

}

.value-card h3{

font-family:"Cinzel";

font-size:30px;

color:crimson;

margin-bottom:20px;

}

.value-card p{

line-height:1.8;

color:#d0d0d0;

}

/* Stats */

.stats{

display:grid;

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

gap:30px;

padding:120px 8%;

text-align:center;

}

.stat{

padding:40px;

background:#111;

border-radius:18px;

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

}

.stat h2{

font-size:56px;

color:crimson;

margin-bottom:10px;

}

.stat p{

color:#bfbfbf;

}

/* Creator */

.creator{

padding:120px 10%;

text-align:center;

}

.creator h2{

font-family:"Cinzel";

font-size:46px;

margin-bottom:35px;

color:silver;

}

.creator p{

max-width:900px;

margin:auto;

line-height:2;

font-size:18px;

color:#d2d2d2;

}

/* Quote */

.quote{

padding:160px 10%;

text-align:center;

}

.quote h1{

font-family:"Cinzel";

font-size:72px;

letter-spacing:8px;

background:linear-gradient(
silver,
white,
#777
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 30px crimson;

}

/* Mobile */

@media(max-width:768px){

.about-story{

grid-template-columns:1fr;

}

.quote h1{

font-size:42px;

letter-spacing:3px;

}

.mission h2,
.creator h2{

font-size:34px;

}

}

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

.contact-wrapper{

display:grid;

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

gap:40px;

padding:120px 8%;

}

.contact-card,
.info-card{

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

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



border-radius:20px;

padding:40px;

}

.contact-card h2,
.info-card h2{

font-family:"Cinzel";

font-size:40px;

color:silver;

margin-bottom:25px;

}

.contact-card p{

line-height:1.8;

color:#d0d0d0;

margin-bottom:35px;

}

.contact-card form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-card input,
.contact-card textarea{

background:#111;

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

padding:16px;

border-radius:10px;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}

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

border-color:crimson;

box-shadow:

0 0 15px crimson;

}

.contact-card button{

padding:16px;

background:transparent;

border:1px solid crimson;

color:white;

font-size:17px;

cursor:pointer;

border-radius:40px;

transition:.3s;

}

.contact-card button:hover{

background:crimson;

box-shadow:

0 0 25px crimson;

}

.info-box{

padding:18px 0;

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

}

.info-box:last-child{

border-bottom:none;

}

.info-box h3{

color:crimson;

margin-bottom:8px;

}

.info-box p{

color:#d4d4d4;

}

.commission-section{

padding:120px 8%;

text-align:center;

}

.commission-section h2{

font-family:"Cinzel";

font-size:46px;

color:silver;

margin-bottom:50px;

}

.commission-grid{

display:grid;

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

gap:30px;

}

.commission-card{

background:#111;

padding:35px;

border-radius:18px;

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

transition:.35s;

}

.commission-card:hover{

transform:translateY(-8px);

box-shadow:

0 0 25px crimson;

}

.commission-card h3{

font-family:"Cinzel";

color:crimson;

margin-bottom:18px;

}

.commission-card p{

line-height:1.8;

color:#d2d2d2;

}

@media(max-width:768px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-card h2,
.info-card h2,
.commission-section h2{

font-size:32px;

}

}