/* =====================
 VARIABLES
===================== */


:root{

--bg:#000E2B;
--bg2:#01153e;

--gold:#E8CD02;
--gold2:#f5df02;

--text:#F5F7FF;

--muted:#B7C1E0;

--border:rgba(232,205,2,.18);

}





*{

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

}



body{


background:

linear-gradient(
135deg,
var(--bg),
var(--bg2)
);


color:var(--text);


font-family:'Montserrat',sans-serif;


overflow-x:hidden;


}




.container{

width:90%;

max-width:1400px;

margin:auto;

}





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


header{

position:absolute;

top:0;

left:0;

width:100%;

z-index:10;

}



.navbar{


height:75px;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 5%;


background:rgba(0,14,43,.85);


backdrop-filter:blur(15px);


border-bottom:1px solid var(--border);


}



.logo{


display:flex;


align-items:center;


gap:12px;


}



.logo img{


width:45px;

height:45px;

border-radius:10px;


}



.logo h2{


font-family:'Cinzel',serif;


color:var(--gold);


letter-spacing:3px;


}





nav ul{


display:flex;


gap:35px;


list-style:none;


}



nav a{


color:white;


text-decoration:none;


font-size:14px;


}



nav a:hover,
nav a.active{


color:var(--gold);


}






.login-btn{


padding:12px 25px;


border-radius:30px;


background:linear-gradient(
135deg,
var(--gold2),
var(--gold)
);


color:var(--bg);


font-weight:700;


text-decoration:none;


font-size:13px;


}







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


.course-hero{


min-height:100vh;


padding-top:75px;


display:flex;


align-items:center;



background:


radial-gradient(
circle at 80% 50%,
rgba(232,205,2,.2),
transparent 30%
);


}





.course-wrapper{


display:grid;


grid-template-columns:1fr 1fr;


align-items:center;


gap:50px;


}




/* =====================
 HERO TEXT ANIMATION
===================== */


.course-text{

animation:fadeUp 1s ease forwards;

}



.tag{

opacity:0;

animation:fadeDown .8s ease forwards;

animation-delay:.2s;

}





.course-text h1{

opacity:0;

animation:fadeUp 1s ease forwards;

animation-delay:.4s;

}





.course-text h1 span{


display:inline-block;


animation:goldGlow 2.5s infinite alternate;


}






.description{


opacity:0;


animation:fadeUp 1s ease forwards;


animation-delay:.7s;


}




.buttons{


opacity:0;


animation:fadeUp 1s ease forwards;


animation-delay:1s;


}







/* ANIMATIONS */


@keyframes fadeUp{


from{


opacity:0;


transform:translateY(40px);


}



to{


opacity:1;


transform:translateY(0);


}


}






@keyframes fadeDown{


from{


opacity:0;


transform:translateY(-30px);


}



to{


opacity:1;


transform:translateY(0);


}


}






@keyframes goldGlow{


from{


text-shadow:

0 0 0px rgba(232,205,2,0);


}



to{


text-shadow:

0 0 25px rgba(232,205,2,.45);


}


}





.tag{


display:inline-block;


padding:10px 22px;


border:1px solid var(--gold);


border-radius:30px;


color:var(--gold);


font-size:12px;


letter-spacing:3px;


margin-bottom:25px;


}





.course-text h1{


font-family:'Cinzel',serif;


font-size:80px;


line-height:1.05;


}




.course-text h1 span{


color:var(--gold);


}





.description{


margin-top:25px;


max-width:550px;


color:var(--muted);


line-height:1.9;


font-size:17px;


}




.buttons{


margin-top:35px;


}




.gold-btn{


padding:16px 35px;


border-radius:40px;


background:linear-gradient(
135deg,
var(--gold2),
var(--gold)
);


color:var(--bg);


font-weight:800;


text-decoration:none;


display:inline-flex;


gap:10px;


align-items:center;


}







/* IMAGE */



.course-visual{


height:650px;


position:relative;


display:flex;


align-items:center;


justify-content:center;


}





.course-visual img{


width:100%;


height:100%;


object-fit:contain;


z-index:2;


filter:


drop-shadow(
0 0 70px rgba(232,205,2,.25)
);


}





.glow{


position:absolute;


width:450px;


height:450px;


background:


radial-gradient(
circle,
rgba(232,205,2,.25),
transparent 65%
);


filter:blur(30px);


}







.level-card{


position:absolute;


bottom:80px;


left:0;


z-index:3;


padding:20px;


display:flex;


gap:15px;


align-items:center;


background:rgba(11,28,73,.85);


border:1px solid var(--border);


border-radius:20px;


}





.level-card i{


font-size:30px;


color:var(--gold);


}




.level-card p{


color:var(--muted);


font-size:13px;


}






@keyframes slide{


from{

opacity:0;

transform:translateX(-40px);

}


to{

opacity:1;

transform:none;

}


}







@media(max-width:1000px){


nav{

display:none;

}



.course-wrapper{


grid-template-columns:1fr;


text-align:center;


}



.description{


margin:auto;


}



.course-text h1{


font-size:55px;


}




.course-visual{


height:450px;


}


.level-card{


display:none;


}



}






@media(max-width:600px){


.course-text h1{


font-size:40px;


}



.course-visual{


height:330px;


}



}
#course-level{


background:

linear-gradient(

90deg,

white,

var(--gold)

);


-webkit-background-clip:text;


background-clip:text;


color:transparent;


transition:.5s;


}




#course-level.fade{


opacity:0;


transform:translateY(20px);


}




#course-level{


display:inline-block;


animation:levelGlow 3s infinite alternate;


}





@keyframes levelGlow{


from{


text-shadow:

0 0 0 rgba(232,205,2,0);


}



to{


text-shadow:

0 0 25px rgba(232,205,2,.45);


}


}
/* =========================
 FOUNDATION PROGRAM
========================= */


.foundation-section{

padding:80px 0 45px;

}




.foundation-wrapper{


display:grid;


grid-template-columns:220px 1fr 220px;


gap:35px;


align-items:center;



padding:45px;



border-radius:35px;



background:


linear-gradient(

135deg,

rgba(11,28,73,.95),

rgba(18,40,95,.9)

);



border:1px solid rgba(232,205,2,.18);



box-shadow:

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


}





/* IMAGE */


.foundation-image-box{


text-align:center;


}




.course-image-circle{


width:150px;

height:150px;


border-radius:50%;


overflow:hidden;



border:2px solid var(--gold);



background:


radial-gradient(

circle,

rgba(232,205,2,.25),

transparent 70%

);



box-shadow:


0 0 60px rgba(232,205,2,.25);



margin:auto;



}




.course-image-circle img{


width:100%;


height:100%;


object-fit:cover;


}





.foundation-image-box p{


margin-top:20px;


font-size:12px;


letter-spacing:3px;


color:var(--gold);


}





/* CONTENT */


.small-tag{


display:inline-block;


padding:8px 18px;


border-radius:30px;


font-size:11px;


letter-spacing:2px;


color:var(--gold);


border:1px solid var(--gold);


margin-bottom:15px;


}




.foundation-content h2{


font-family:'Cinzel',serif;


font-size:55px;


margin-bottom:15px;


}





.foundation-desc{


color:var(--muted);


font-size:16px;


line-height:1.8;


max-width:650px;


}





.course-points{


display:flex;


gap:15px;


flex-wrap:wrap;


margin:30px 0;


}




.point{


display:flex;


align-items:center;


gap:10px;



padding:12px 18px;



border-radius:30px;



background:

rgba(232,205,2,.08);



border:1px solid rgba(232,205,2,.18);


}



.point i{


color:var(--gold);


}





.program-btn{


display:inline-flex;


align-items:center;


gap:10px;



padding:15px 32px;



border-radius:40px;



background:


linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:#f5df02;


font-weight:800;


text-decoration:none;


}







/* LEVEL BOX */


.foundation-level{


padding:25px;



border-radius:25px;



background:

rgba(0,14,43,.45);



border:1px solid rgba(232,205,2,.15);



text-align:center;


}





.foundation-level h3{


font-family:'Cinzel',serif;


font-size:32px;


color:var(--gold);


margin-bottom:15px;


}





.foundation-level p{


color:var(--muted);


font-size:14px;


line-height:1.7;


}





.level-line{


height:2px;


background:var(--gold);


margin:25px 0;


}





.foundation-level strong{


font-size:13px;


letter-spacing:2px;


}







/* MOBILE */


@media(max-width:1000px){


.foundation-wrapper{


grid-template-columns:1fr;


text-align:center;


}



.foundation-content h2{


font-size:42px;


}



.course-points{


justify-content:center;


}



}
/* =========================
 INTERMEDIATE PROGRAM
========================= */


.intermediate-section{

padding:45px 0;

}




.intermediate-wrapper{


display:grid;


grid-template-columns:1.1fr .9fr;


gap:60px;


align-items:center;


padding:55px;



border-radius:40px;



background:


linear-gradient(

135deg,

#06153d,

#12285F

);



border:1px solid rgba(232,205,2,.16);



overflow:hidden;



position:relative;


}




.intermediate-wrapper::after{


content:"";


position:absolute;


right:-150px;


top:-150px;


width:350px;


height:350px;



background:

radial-gradient(

circle,

rgba(232,205,2,.18),

transparent 70%

);


}






/* CONTENT */


.intermediate-content{


position:relative;


z-index:2;


}



.intermediate-content h2{


font-family:'Cinzel',serif;


font-size:60px;


margin-bottom:20px;


color:white;


}




.intermediate-desc{


color:var(--muted);


font-size:17px;


line-height:1.9;


max-width:650px;


}






/* SKILLS */


.skill-grid{


display:grid;


grid-template-columns:1fr 1fr;


gap:15px;



margin:35px 0;


}




.skill-box{


display:flex;


align-items:center;


gap:12px;



padding:15px 18px;



background:


rgba(232,205,2,.08);



border-radius:18px;



border:1px solid rgba(232,205,2,.15);



}



.skill-box i{


color:var(--gold);


font-size:20px;


}





.knight-btn{


display:inline-flex;


align-items:center;


gap:12px;



padding:15px 35px;



border-radius:40px;



background:


linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:#f5df02;



font-weight:800;


text-decoration:none;


}








/* IMAGE */


.knight-visual{


display:flex;


justify-content:center;


align-items:center;


position:relative;


}





.knight-circle{


width:330px;


height:330px;



border-radius:50%;



overflow:hidden;



border:2px solid var(--gold);



box-shadow:


0 0 80px rgba(232,205,2,.25);



}




.knight-circle img{


width:100%;


height:100%;


object-fit:cover;


}








/* SMALL CARD */


.rating-card{


position:absolute;



bottom:20px;


left:20px;



background:


rgba(0,14,43,.85);



backdrop-filter:blur(15px);



padding:20px;



border-radius:20px;



border:1px solid rgba(232,205,2,.18);



width:220px;



}




.rating-card span{


font-size:11px;


letter-spacing:3px;


color:var(--gold);


}



.rating-card h3{


margin:8px 0;


font-family:'Cinzel';


}



.rating-card p{


font-size:13px;


color:var(--muted);


}








@media(max-width:1000px){


.intermediate-wrapper{


grid-template-columns:1fr;


text-align:center;


}



.intermediate-content h2{


font-size:42px;


}



.skill-grid{


grid-template-columns:1fr;


}



.knight-circle{


width:260px;


height:260px;


}



.rating-card{


position:relative;


left:auto;


bottom:auto;


margin-top:20px;


}


}
/* =========================
 ADVANCED PROGRAM
========================= */

.advanced-section{

 padding:45px 0 100px;

}




.advanced-wrapper{


display:grid;


grid-template-columns:.9fr 1.1fr;


gap:70px;



align-items:center;



padding:60px;



border-radius:45px;



background:



linear-gradient(

135deg,

#12285F,

#000E2B

);



border:1px solid rgba(232,205,2,.22);



box-shadow:


0 30px 90px rgba(0,0,0,.45);



position:relative;


overflow:hidden;


}





.advanced-wrapper::before{


content:"";


position:absolute;


inset:0;



background:


radial-gradient(

circle at left,

rgba(232,205,2,.18),

transparent 35%

);



}








/* IMAGE */


.queen-visual{


position:relative;


display:flex;


justify-content:center;


z-index:2;


}





.queen-image{


width:360px;


height:360px;



border-radius:50%;



overflow:hidden;



border:3px solid var(--gold);



box-shadow:



0 0 90px rgba(232,205,2,.35);



}





.queen-image img{


width:100%;


height:100%;


object-fit:cover;


}






.elite-badge{


position:absolute;


bottom:25px;


right:10px;



display:flex;


align-items:center;


gap:15px;



padding:18px 25px;



background:


rgba(0,14,43,.85);



border-radius:20px;



border:1px solid rgba(232,205,2,.25);



backdrop-filter:blur(15px);



}





.elite-badge i{


font-size:35px;


color:var(--gold);


}




.elite-badge span{


font-size:11px;


letter-spacing:3px;


color:var(--gold);


}



.elite-badge h3{


font-family:'Cinzel';


font-size:22px;


}








/* CONTENT */


.advanced-content{


position:relative;


z-index:2;


}



.advanced-content h2{


font-family:'Cinzel';


font-size:65px;


margin:20px 0;


}




.advanced-content p{


color:var(--muted);


font-size:17px;


line-height:1.9;


max-width:650px;


}






/* SKILLS */


.advanced-skills{


display:grid;


grid-template-columns:1fr 1fr;


gap:18px;



margin:35px 0;


}



.advanced-skills div{


display:flex;


align-items:center;


gap:15px;



padding:18px;



border-radius:20px;



background:


rgba(232,205,2,.08);



border:1px solid rgba(232,205,2,.15);


}




.advanced-skills i{


color:var(--gold);


font-size:22px;


}





.queen-btn{


display:inline-flex;


align-items:center;


gap:12px;



padding:16px 38px;



border-radius:40px;



background:


linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:#f5df02;



font-weight:800;


text-decoration:none;


}








@media(max-width:1000px){


.advanced-wrapper{


grid-template-columns:1fr;


text-align:center;


}



.advanced-content h2{


font-size:45px;


}



.advanced-skills{


grid-template-columns:1fr;


}



.queen-image{


width:260px;

height:260px;


}



.elite-badge{


position:relative;


right:auto;

bottom:auto;


margin-top:20px;


}



}
/* SPACE BETWEEN COURSE CARDS */

.foundation-wrapper,
.intermediate-wrapper,
.advanced-wrapper{

    margin-bottom:20px;

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


.footer{

    margin-top:80px;

    padding:70px 5% 25px;

    background:

    linear-gradient(
    135deg,
    #000E2B,
    #01153e
    );


    border-top:

    1px solid var(--border);


}



/* FOOTER GRID */


.footer-grid{


    max-width:1400px;

    margin:auto;


    display:grid;


    grid-template-columns:

    1.5fr 1fr 1fr;


    gap:50px;


    padding-bottom:45px;


}





/* BRAND */


.footer-brand h2{


    font-family:'Cinzel',serif;


    font-size:45px;


    letter-spacing:5px;


    color:var(--gold);


    margin-bottom:15px;


}




.footer-brand p{


    color:var(--muted);


    max-width:350px;


    line-height:1.8;


    font-size:15px;


}





/* HEADINGS */


.footer h3{


    font-family:'Cinzel',serif;


    color:white;


    font-size:20px;


    margin-bottom:25px;


    position:relative;


}




.footer h3::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-10px;


    width:45px;


    height:2px;


    background:var(--gold);


}





/* LINKS */


.footer-links,


.footer-social{


    display:flex;


    flex-direction:column;


    gap:16px;


}





.footer-links a,


.footer-social a{


    text-decoration:none;


    color:var(--muted);


    font-size:15px;


    transition:.3s ease;


    display:flex;


    align-items:center;


    gap:12px;


}




.footer-links a:hover,


.footer-social a:hover{


    color:var(--gold);


    transform:translateX(5px);


}




/* SOCIAL ICONS */


.footer-social i{


    color:var(--gold);


    font-size:18px;


}





/* BOTTOM */


.footer-bottom{


    max-width:1400px;


    margin:auto;


    padding-top:25px;


    border-top:


    1px solid rgba(232,205,2,.15);



    text-align:center;


    color:var(--muted);


    font-size:14px;


}





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


@media(max-width:900px){



.footer-grid{


    grid-template-columns:1fr;


    gap:35px;


    text-align:center;


}



.footer-brand p{


    margin:auto;


}



.footer h3::after{


    left:50%;


    transform:translateX(-50%);


}



.footer-links a,


.footer-social a{


    justify-content:center;


}


}





@media(max-width:500px){


.footer{


    padding:50px 25px 20px;


}



.footer-brand h2{


    font-size:38px;


}



}