*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    scroll-behavior: smooth;

}

:root {

    --primary: #5a3e2b;

    --secondary: #8B5A2B;

    --accent: #d4af37;

    --gold:#D9A62E;

    --light:white;

    --biology-green:rgb(68, 157, 68);

    --coding-purple:#bd83ff;

    --dark: #2c1d12;

    --black: #050407;

    --black-2: #09070d;

    --purple-dark: #10091c;

    --purple: #7b3fe4;

    --purple-light: #ad72ff;

    --gold-light: #f4c95d;

    --white: #f8f7f5;

    --muted: #b9b4c2;

    --border: rgba(170, 104, 255, 0.28);

}

body{

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    background: #000;

}

.container{

    width:100%;

    overflow:hidden;

}

/* NAVBAR */
#navbar {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    transition: all 1s ease;

}

/* NAV CLEAN */
.over-lay{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding: 18px 30px;

    background: linear-gradient( to right, #090909, #17130E, #17130E, #19120a);
    
    backdrop-filter: blur(10px);
    
    position: relative;

    transition: all 1s ease;
    
    z-index: 2000;
    
}

.logo-first-sec{
    
    width: 390px;
    
    height: 100px;
    
    background-size: cover;
    
    background-position: bottom;
    
    overflow: hidden;
    
}

.logo-first-sec img{
    
    width: 100%;
    
    height: 100%;
    
    object-fit: cover;
    
    display: block;
    
}


/* NAV WRAPPER */
.main-nav{
    
    position: relative;
    
    z-index: 2000;
    
}

/* MAIN NAV */
.navigation{
    
    display: flex;
    
    gap: 40px;
    
    list-style: none;
    
}

/* NAV ITEMS */
.navigation > li{

    position: relative;

}

/* LINKS */
.navigation a{

    display: inline-block;

    padding: 10px 16px;

    border-radius: 30px;

    color: gold;

    text-decoration: none;

    background:#030303;
    
    transition: 0.3s ease;

}

.navigation a:hover{

    background: linear-gradient(135deg, purple, gold);
    
    color: white;

    box-shadow: 0 0 10px rgba(255,215,0,0.6);

}

.navigation li .this{

    display:flex;

    align-items:center;

    gap:10px;

}

.navigation li .this.active{

    background: linear-gradient(
        135deg,
        #3A2A16 0%,
        #17130E 45%,
        #0B0B0A 100%
    );

    bottom:none;

    border: 1px solid #D9A62E;

    box-shadow: 0 0 18px rgba(217, 166, 46, 0.45);

}

/* DROPDOWN BASE */
.dropdown{

    position: absolute;

    top: 120%;

    left: 0;

    min-width: 260px;



    background: white;

    list-style: none;

    border-radius: 12px;

    padding: 15px;



    display: grid;

    gap: 10px;



    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);



    transition: 0.3s ease;

    z-index: 3000;
    
}

/* DROPDOWN LINKS */
.dropdown a{

    background: none;

    color: #333;

    padding: 6px 10px;

    border-radius: 8px;

}

.dropdown a:hover{

    background: #f0f0f0;

    color: purple;

}

/* SHOW DROPDOWN */
.has-dropdown:hover .dropdown{

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.has-dropdown-icon > span::after{

    content: " ▾";

    font-size: 12px;

}

.hamburger{

    display: none;

}

/* LOGO */
.logo-first-sec {

    display: flex;

    align-items: center;

    gap: 10px;

}

#navbar.scrolled .logo-first-sec{

    width: 300px;

    height: 100px;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

#navbar.scrolled .navigation a {

    padding: 6px 12px;

    font-size: 14px;
    
}

#navbar.scrolled .navigation li .this{

    flex-direction:column;

    gap:5px;

    justify-content:center;

}

/* ========================= */
/* 🔥 SCROLLED STATE */
/* ========================= */

#navbar.scrolled .header-con {

    display: none;

}

#navbar.scrolled .over-lay {

    padding: 10px 20px;

    border-radius: 50px;

    max-width: 900px;

    margin: 10px auto;

    background: rgba(7, 7, 8, 0.9);

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.3);

}

.mobile-overlay{

    display: none;

}

.mobile-nav{

    display: none;

}

.fade-in {

    opacity: 0;

    transform: translateY(40px);

    transition: all 0.8s ease;

}

.fade-in.show {

    opacity: 1;

    transform: translateY(0);
    
}

.header-con {
    
    min-height:100vh;

    width:100%;
    
    margin-top:70px;

}

.header-con_inner-wrap{

    width:100%;

    height:100%;

    padding:150px 50px;

    background-position: center;
    
    display: flex;

    flex-direction:column;
    
    justify-content: center;
    
    align-items: center;

    animation:fadeInUp 1s ease forwards;

}

@keyframes fadeInUp{
    from{

        opacity: 0;

        transform: translateY(40px);

    }
    to{

        opacity: 1;

        transform: translateY(0);

    }
}

.maths{

    width:55px;

    height:55px;

    margin-bottom:20px;

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

    display:grid;

    grid-template-columns:repeat(2, 20px);

    grid-template-rows:repeat(2, 20px);

    justify-content:center;

    align-content:center;

    box-shadow:0px 0px 10px var(--gold);

    border-radius:7px;

}

.maths span{

    color:var(--gold);

    font-size:20px;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    text-shadow:0px 0px 15px var(--gold);

}

h1 {

    margin-bottom:15px;

    font-size: 60px;

    letter-spacing: -1px;

    color:var(--light);

    font-family:normal;

}

h1 span:last-child{

    color:#D9A62E;

}

.diamond_wrap{

    padding:20px;

    position:relative;

    /* border:1px solid red; */

}

.diamond{

    width:10px;

    height:10px;

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

    transform:rotate(45deg);

}

.diamond_wrap::before,
.diamond_wrap::after{

    content:"";

    width:150px;

    height:1px;

    background:var(--gold);

    position:absolute;

    top:50%;

}

.diamond_wrap::before{

    left:calc(-100% - 100px);
    
}

.diamond_wrap::after{

    right:calc(-100% - 100px);

}

.awrd{

    margin-bottom:15px;

    color:var(--light);

    font-size:24px;

    text-align:center;

}

.awrd_info-fllUP{

    width:40%;

    margin-bottom:25px;

    text-align:center;

    color:rgba(255, 255, 255, 0.30);

}

.header-con a{

    padding:20px 40px;

    background:linear-gradient(
        to right,
        rgb(0,0,0),
        rgb(0,0,0)
    );

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

    border-radius:20px;

    display:flex;

    align-items:center;

    gap:20px;

    color:var(--gold);

    text-decoration:none;

    transition:all 0.25s linear;

}

.header-con a:hover{

    transform:translateY(-10px);

}

@media(max-width:395px){

    .diamond_wrap::before,
    .diamond_wrap::after{

        width:90px;

    }

    .diamond_wrap::before{

        left:calc(-100% - 30px);
        
    }

    .diamond_wrap::after{

        right:calc(-100% - 30px);

    }

}

.header-con.math{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/mathematics.jpg)
    ;
    
    background-size: cover;

}

@media (max-width:534px){

    .header-con.math .awrd_info-fllUP{

        width:80%;
        
    }

}

.header-con.furthermaths{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/furthermaths.jpg)
    ;
    
    background-size: cover;

}

.header-con.furthermaths .maths{

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.furthermaths .maths i{

    font-size:20px;

    color:var(--gold);

}

@media (max-width:534px){

    .header-con.furthermaths .awrd_info-fllUP{

        width:80%;
        
    }

}

.header-con.english{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/english.jpg)
    ;
    
    background-size: cover;

}

.header-con.english .header-con_inner-wrap{

    width:50%;

}

.header-con.english .maths{

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.english .maths i{

    font-size:30px;

    color:var(--gold);

}

.header-con.english .awrd{

    text-align:start;

}

.header-con.english .awrd_info-fllUP{

    width:100%;

    text-align:start;

}

@media (max-width:761px){

    .header-con.english .header-con_inner-wrap{

        width:100%;

    }

    .header-con.english .maths{

        align-self:center;
    }

}

.header-con.literature{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/literature.jpg)
    ;
    
    background-size: cover;

}

.header-con.literature .header-con_inner-wrap{

    width:clamp(400px, 600px, 50%);

}

.header-con.literature .maths{

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.literature .maths i{

    font-size:30px;

    color:var(--gold);

}

.header-con.literature h1{

    display:flex;

    flex-direction:column;

}

.header-con.literature h1 > span:last-child{

    color:var(--light);

}

.header-con.literature .awrd{

    text-align:start;

}

.header-con.literature .awrd_info-fllUP{

    width:100%;

    text-align:start;

}

@media (max-width:761px){

    .header-con.literature .header-con_inner-wrap{

        width:100%;

    }

}

.header-con.phonics{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/phonics.jpg)
    ;
    
    background-size: cover;

}

.header-con.phonics .header-con_inner-wrap{

    width:50%;

}

.header-con.phonics .maths{

    align-self:flex-start;

    margin-left:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    box-shadow:none;

}

.header-con.phonics .maths p{

    font-size:30px;

    color:var(--gold);

    border:none;

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

}

.header-con.phonics h1{

    display:flex;

    flex-direction:column;

}

.header-con.phonics .awrd_badges_nd_info{

    margin:20px 0px;

    display:flex;

    gap:20px;

    align-items:center;

}

.header-con.phonics .awrd_badges_nd_info > span:first-child{

    width:50px;
    
    height:50px;

    border-radius:50%;

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

    color:var(--gold);

    font-size:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.phonics .awrd_badges_nd_info > span:last-child{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.header-con.phonics .awrd_badges_nd_info > span:last-child > span:first-child{

    color:var(--gold);

}

.header-con.phonics .awrd_badges_nd_info > span:last-child > span:last-child{

    color:rgba(255, 255, 255, 0.30);

}

.header-con.phonics a{

    margin-top:10px;

}

@media (max-width:996px){

    .header-con.phonics .header-con_inner-wrap{

        width:100%;

    }

}

@media (max-width:739px){

    .header-con.phonics .maths{

        align-self:center;

    }

}

@media (max-width:534px){

    .header-con.phonics .awrd_badges_nd_info{

        flex-direction:column;

        align-items:flex-start;

    }

}

.header-con.reasoning{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/verbal.jpg)
    ;
    
    background-size: cover;

}

.header-con.reasoning .header-con_inner-wrap{

    width:50%;

}

.header-con.reasoning .maths{

    width:fit-content;

    padding:0px 30px;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.header-con.reasoning .maths i{

    color:#b47e00;

    font-size:25px;

}

.header-con.reasoning h1{

    display:flex;

    flex-direction:column;

}

.header-con.reasoning h1 span:nth-child(2){

    color:var(--gold);

}

.header-con.reasoning h1 span:last-child{

    color:var(--light);

}

.header-con.reasoning .awrd_info-fllUP{

    width:100%;

    text-align:start;
    
}

@media (max-width:761px){

    .header-con.reasoning .header-con_inner-wrap{

        width:100%;

    }

}

.header-con.biology{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/biology_main.jpg)
    ;
    
    background-size: cover;

}

.header-con.biology .header-con_inner-wrap{

    width:60%;

}

.header-con.biology .maths{

    width:fit-content;

    height:fit-content;

    padding:0px 5px;

    align-self:flex-start;

    margin-left:40px;

    display:flex;

    gap:8px;

    border:none;

    box-shadow:none;

    border-bottom:2px solid var(--biology-green);

    border-radius:0px;

}

.header-con.biology .maths i,
.header-con.biology .maths p{

    color:var(--biology-green);

    font-size:20px;

}

.header-con.biology h1{

    display:flex;

    flex-direction:column;

}

.header-con.biology h1 span:last-child{

    color:var(--biology-green);

}

.header-con.biology .awrd_badges_nd_info{

    margin:20px 0px;

    display:flex;

    gap:20px;

    align-items:center;

}

.header-con.biology .awrd_badges_nd_info > span:first-child{

    width:50px;
    
    height:50px;

    border-radius:50%;

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

    color:rgb(68, 157, 68);

    font-size:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.biology .awrd_badges_nd_info > span:last-child{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.header-con.biology .awrd_badges_nd_info > span:last-child > span:first-child{

    color:var(--biology-green);

}

.header-con.biology .awrd_badges_nd_info > span:last-child > span:last-child{

    color:rgba(255, 255, 255, 0.30);

}

.header-con.biology a{

    margin-top:10px;

}

.header-con.biology a i,
.header-con.biology a span{

    color:var(--biology-green);

}

@media (max-width:996px){

    .header-con.biology .header-con_inner-wrap{

        width:100%;

    }

}

@media (max-width:534px){

    .header-con.biology .awrd_badges_nd_info{

        flex-direction:column;

        align-items:flex-start;

    }

}

.header-con.chemistry{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/chemistry.jpg)
    ;
    
    background-size: cover;

}

.header-con.chemistry .header-con_inner-wrap{

    width:60%;

}

.header-con.chemistry .maths{

    width:fit-content;

    height:fit-content;

    padding:0px 5px;

    align-self:flex-start;

    margin-left:40px;

    display:flex;

    gap:8px;

    border:none;

    box-shadow:none;

}

.header-con.chemistry .maths i,
.header-con.chemistry .maths p{

    color:var(--gold);

    font-size:20px;

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

}

.header-con.chemistry h1{

    display:flex;

    flex-direction:column;

}

.header-con.chemistry .awrd{

    margin-bottom:30px;

    text-align:start;

}

@media (max-width:770px){

    .header-con.chemistry .header-con_inner-wrap{

        width:100%;

    }

}

.header-con.physics{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/physics.jpg)
    ;
    
    background-size: cover;

}

.header-con.physics .header-con_inner-wrap{

    width:50%;

}

.header-con.physics .maths{

    width:fit-content;

    height:fit-content;

    padding:0px 5px;

    align-self:flex-start;

    margin-left:40px;

    display:flex;

    gap:8px;

    border:none;

    box-shadow:none;

}

.header-con.physics .maths i,
.header-con.physics .maths p{

    color:var(--gold);

    font-size:20px;

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

}

.header-con.physics h1{

    display:flex;

    flex-direction:column;

}

.header-con.physics .awrd{

    text-align:start;

}

.header-con.physics .awrd_badges_nd_info{

    margin:20px 0px;

    display:flex;

    gap:20px;

    align-items:center;

}

.header-con.physics .awrd_badges_nd_info > span:first-child{

    width:50px;
    
    height:50px;

    border-radius:50%;

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

    color:var(--gold);

    font-size:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.physics .awrd_badges_nd_info > span:last-child{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.header-con.physics .awrd_badges_nd_info > span:last-child > span:first-child{

    color:rgb(129, 178, 6);

}

.header-con.physics .awrd_badges_nd_info > span:last-child > span:last-child{

    color:rgba(255, 255, 255, 0.40);

}

.header-con.physics a{

    margin-top:10px;

}

@media (max-width:996px){

    .header-con.physics .header-con_inner-wrap{

        width:100%;

    }

}

@media (max-width:739px){

    .header-con.phonics .maths{

        align-self:center;

    }

}

@media (max-width:534px){

    .header-con.physics .awrd_badges_nd_info{

        flex-direction:column;

        align-items:flex-start;

    }

}

.header-con.coding{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/coding.jpg)
    ;
    
    background-size: cover;

}

.header-con.coding .header-con_inner-wrap{

    width:50%;

}

.header-con.coding .maths{

    width:fit-content;

    padding-bottom:10px;

    align-self:flex-start;

    margin-left:40px;

    display:flex;

    gap:10px;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:0px;

    border-bottom:2px solid var(--coding-purple);

    box-shadow:none;

}

.header-con.coding .maths i,
.header-con.coding .maths p{

    font-size:30px;

    color:var(--coding-purple);

}

.header-con.coding h1{

    display:flex;

    flex-direction:column;

}

.header-con.coding .awrd{

    text-align:start;

}

.header-con.coding a{

    margin-top:10px;

    background:rgb(94, 38, 145);

    color:var(--light);

    border:none;

}

.header-con.coding .awrd_badges_nd_info_wrap{

    width:100%;

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}

.header-con.coding .awrd_badges_nd_info{

    width:150px;

    margin-top:30px;

    padding:10px;

    border-right:2px solid rgba(95, 95, 95, 0.2);

    display:flex;

    flex-direction:column;

    gap:20px;

    align-items:center;

}

.header-con.coding .awrd_badges_nd_info:last-child{

    border:none;

}

.header-con.coding .awrd_badges_nd_info > span:first-child{

    width:50px;
    
    height:50px;

    border-radius:50%;

    color:var(--coding-purple);

    font-size:35px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.coding .awrd_badges_nd_info > span:last-child{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.header-con.coding .awrd_badges_nd_info > span:last-child > span:first-child{

    color:var(--coding-purple);

}

.header-con.coding .awrd_badges_nd_info > span:last-child > span:last-child{

    color:rgba(255, 255, 255, 0.50);

}

@media (max-width:1121px){

    .header-con.coding .maths{

        padding-bottom:20px;

    }

}

@media (max-width:996px){

    .header-con.coding .header-con_inner-wrap{

        width:100%;

    }

}

@media (max-width:739px){

    .header-con.phonics .maths{

        align-self:center;

    }

}

@media (max-width:770px){

    .header-con.coding .maths{

        padding-bottom:5px;

    }

    .header-con.coding .maths i,
    .header-con.coding .maths p{

        font-size:clamp(10px, 15px, 20px);

    }

}

@media (max-width:610px){

    .header-con.coding .awrd_badges_nd_info:last-child{

        border-right:2px solid rgba(95, 95, 95, 0.2);

    }

}

@media (max-width:534px){

    .header-con.physics .awrd_badges_nd_info{

        flex-direction:column;

        align-items:flex-start;

    }

}

.header-con.religious{

    background: 
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.30) 100%
        ),
        url(../media/religious.jpg)
    ;
    
    background-size: cover;

}

.header-con.religious .header-con_inner-wrap{

    width:50%;

}

.header-con.religious .maths{

    width:fit-content;

    align-self:start;

    margin-left:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border:none;

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

    border-radius:0px;

    box-shadow:none;

}

.header-con.religious .maths i,
.header-con.religious .maths p{

    font-size:20px;

    color:var(--light);

}

.header-con.religious h1{

    display:flex;

    flex-direction:column;

}

.header-con.religious h1 span:nth-child(2){

    color:var(--gold);

}

.header-con.religious .awrd{

    text-align:start;

}

.header-con.religious a{

    margin-top:10px;

}

.header-con.religious .awrd_badges_nd_info{

    margin:20px 0px;

    display:flex;

    gap:20px;

    align-items:center;

}

.header-con.religious .awrd_badges_nd_info > span:first-child{

    width:50px;
    
    height:50px;

    border-radius:50%;

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

    color:var(--gold);

    font-size:25px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.header-con.religious .awrd_badges_nd_info > span:last-child{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.header-con.religious .awrd_badges_nd_info > span:last-child > span:first-child{

    color:var(--gold);

}

.header-con.religious .awrd_badges_nd_info > span:last-child > span:last-child{

    color:rgba(255, 255, 255, 0.30);

}

@media (max-width:996px){

    .header-con.religious .header-con_inner-wrap{

        width:100%;

    }

}

@media (max-width:739px){

    .header-con.religious .maths{

        align-self:center;

    }

}

@media (max-width:534px){

    .header-con.religious .awrd_badges_nd_info{

        flex-direction:column;

        align-items:flex-start;

    }

}


.main{

    min-height: 100vh;

    color: var(--white);

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;

}



/* =========================================
   MAIN INTRO
========================================= */

.coding-intro {

    max-width: 1400px;

    margin: 60px auto 70px;

    padding: 0 45px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 50px;

    align-items: center;

}



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

.intro-content {

    position: relative;

    z-index: 2;

}


.eyebrow {

    width: fit-content;

    padding: 9px 16px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.5px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.intro-content h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(55px, 5vw, 82px);

    line-height: 0.95;

    font-weight: 600;

    letter-spacing: -1px;

    max-width: 650px;

}


.intro-content h1 span {

    display: block;

    color: var(--gold);

    margin-top: 7px;

    text-shadow:
        0 0 20px rgba(217, 166, 46, 0.12)
    ;

}



/* =========================================
   GOLD DIVIDER
========================================= */

.gold-line {

    width: 220px;

    margin: 25px 0;

    display: flex;

    align-items: center;

    gap: 12px;

}


.gold-line span {

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

    flex: 1;

}

.gold-line span:last-child {

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        )
    ;

}


.gold-line i {

    color: var(--gold);

    font-size: 7px;

}



/* =========================================
   DESCRIPTION
========================================= */

.intro-description {

    max-width: 570px;

    color: #ddd9df;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 28px;

}



/* =========================================
   FEATURES
========================================= */

.feature-list {

    display: grid;

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

    max-width: 600px;

    margin-bottom: 30px;

}


.feature {

    min-height: 75px;

    padding: 5px 15px;

    border-right:
        1px solid rgba(255,255,255,0.12);

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

}


.feature:first-child {

    padding-left: 0;

}


.feature:last-child {

    border-right: none;

}


.feature i {

    font-size: 25px;

}


.feature span {

    color: var(--light);

    font-size: 13px;

    line-height: 1.4;

}



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

.gold-button {

    width: fit-content;

    padding: 15px 22px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #e8b337,
            #c58c19
        );

    color: #080609;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 18px;

    transition: 0.3s ease;

    box-shadow:
        0 8px 25px rgba(217, 166, 46, 0.15)
    ;

}


.gold-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(217, 166, 46, 0.25)
    ;

}



/* =========================================
   VISUAL AREA
========================================= */

.coding-visual {

    min-height: 500px;

    position: relative;

}


.main-image {

    position: absolute;

    width: 55%;

    height: 400px;

    top: 10px;

    left: 10%;

    transform: rotate(-4deg);

    overflow: hidden;

    border-radius: 22px;

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

    z-index: 2;

}

.main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* =========================================
   CODE CARD
========================================= */

.code-card {

    position: absolute;

    width: 43%;

    right: 0;

    top: 0;

    padding: 20px;

    border-radius: 18px;

    z-index: 4;

    transform: rotate(3deg);

    overflow: hidden;

}


.code-card pre {

    margin: 0;

    white-space: pre-wrap;

    font-size: 11px;

    line-height: 1.6;

    font-family: monospace;

}

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

.keyboard-image {

    position: absolute;

    width: 46%;

    height: 170px;

    right: 7%;

    bottom: 40px;

    transform: rotate(4deg);

    overflow: hidden;

    border-radius: 20px;

    z-index: 3;

}

.keyboard-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* =========================================
   THINK CARD
========================================= */

.think-card {

    position: absolute;

    right: -2%;

    top: 210px;

    width: 100px;

    min-height: 160px;

    border-radius: 15px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    transform: rotate(3deg);
    
}

.think-card i,
.think-card p {

    font-size: 30px;

}


.think-card strong {

    font-size: 13px;

    line-height: 1.5;

    font-weight: 500;

    text-align: center;

}



/* =========================================
   DID YOU KNOW
========================================= */

.did-you-know {

    position: absolute;

    left: 25%;

    bottom: -5px;

    width: 260px;

    padding: 22px;

    border-radius: 18px;

    z-index: 6;

    transform: rotate(-2deg);

}


.dyk-title {

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 12px;

    display: flex;

    gap: 10px;

    align-items: center;

}


.did-you-know p {

    color: #ddd7e4;

    font-size: 13px;

    line-height: 1.6;

}



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

.stats {

    max-width: 1300px;

    margin: 0 auto 20px;

    padding: 30px 35px;

    border-radius: 18px;

    display: grid;

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

}


.stat {

    min-height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    border-right:
        1px solid rgba(255,255,255,0.12)
    ;

}


.stat:last-child {

    border-right: none;

}


.stat > i {

    font-size: 30px;

}

.stat strong {

    display: block;

    font-size: 30px;

    font-weight: 600;

}


.stat span {

    display: block;

    color: #aaa4b2;

    font-size: 13px;

    margin-top: 3px;

}



/* =========================================
   LEARNING CARDS
========================================= */

.learning-cards {

    max-width: 1300px;

    margin: 20px auto 80px;

    display: grid;

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

    gap: 18px;

    padding: 0 20px;

}


.learning-card {

    min-height: 190px;

    padding: 23px;

    border-radius: 16px;

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;

    transition: 0.3s ease;

}

.learning-card:hover {

    transform: translateY(-6px);

}


.card-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}


.card-content h2 {

    font-size: 17px;

    font-weight: 500;

    margin-bottom: 12px;
    
}


.card-content p {

    color: #a9a3b0;

    font-size: 13px;

    line-height: 1.7;
    
}


.card-arrow {

    position: absolute;

    right: 20px;

    bottom: 20px;

}

.main.coding{

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(107, 47, 175, 0.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #050407,
            #0b0711 55%,
            #050407
        )
    ;


}

.main.coding .eyebrow{

    background:
        rgba(94, 38, 145, 0.16);

    border: 1px solid
        rgba(166, 93, 255, 0.25);

    color: #bd83ff;

}

.main.coding .feature i {

    color: var(--purple-light);
    
}

.main.coding .main-image{

    border: 1px solid rgba(180, 110, 255, 0.7);

}

.main.coding .code-card{

    background:
        rgba(5, 4, 8, 0.88);

    border: 1px solid
        rgba(178, 102, 255, 0.7);

}

.main.coding .code-card pre{

    color: #c98cff;

}

.main.coding .keyboard-image{

    border:
        1px solid rgba(173, 96, 255, 0.55)
    ;

}

.main.coding .think-card{

    color: #c18aff;

    border:
        1px solid rgba(180, 105, 255, 0.5)
    ;

    background:
        rgba(16, 8, 25, 0.88)
    ;

}

.main.coding .did-you-know{

    background:
        rgba(10, 7, 15, 0.94)
    ;

    border:
        1px solid rgba(176, 102, 255, 0.5)
    ;

}

.main.coding .dyk-title{

    color: #bb7cff;

}

.main.coding .stats{

    border:
        1px solid rgba(174, 100, 255, 0.28)
    ;

    background:
        linear-gradient(
            135deg,
            rgba(39, 17, 62, 0.45),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.coding .stat i{

    color: #b873ff;

}

.main.coding .learning-card{

    border:
        1px solid rgba(166, 94, 255, 0.28)
    ;

    background:
        linear-gradient(
            145deg,
            rgba(30, 14, 46, 0.65),
            rgba(8, 6, 12, 0.85)
        )
    ;

}

.main.coding .learning-card:hover{

    border-color:
        rgba(180, 105, 255, 0.6)
    ;

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

}

.main.coding .card-icon{

    color: #b675ff;

    background:
        rgba(93, 40, 150, 0.22)
    ;

}

.main.coding .card-arrow{

    color: #ad72ff;

}


/*MATHS */

.main.math{

    /* background:
        radial-gradient(
            circle at 70% 25%,
            rgba(107, 47, 175, 0.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #050407,
            #0b0711 55%,
            #050407
        )
    ; */


}

.main.math .eyebrow,
.main.furtherMaths .eyebrow,
.main.english .eyebrow,
.main.literature .eyebrow,
.main.phonics .eyebrow,
.main.reasoning .eyebrow,
.main.chemistry .eyebrow,
.main.physics .eyebrow,
.main.religious .eyebrow{

    background:#000;

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

    color: var(--gold);

}

.main.math .feature i,
.main.furtherMaths .feature i,
.main.english .feature i,
.main.literature .feature i,
.main.phonics .feature i,
.main.reasoning  .feature i,
.main.chemistry .feature i,
.main.physics .feature i,
.main.religious .feature i{

    color: var(--gold);
    
}

.main.math .main-image,
.main.furtherMaths .main-image,
.main.english .main-image,
.main.literature .main-image,
.main.phonics .main-image,
.main.reasoning  .main-image,
.main.chemistry .main-image,
.main.physics .main-image,
.main.religious .main-image{

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

}

.main.math .code-card,
.main.furtherMaths .code-card,
.main.english .code-card,
.main.literature .code-card,
.main.phonics .code-card,
.main.reasoning  .code-card,
.main.chemistry .code-card,
.main.physics .code-card,
.main.religious .code-card{

    height:70%;

    padding:0;

    border-radius:18px;

    overflow:hidden;

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

}

.main.math .code-card img,
.main.furtherMaths .code-card img,
.main.english .code-card img,
.main.literature .code-card img,
.main.phonics .code-card img,
.main.reasoning  .code-card img,
.main.chemistry .code-card img,
.main.physics .code-card img,
.main.religious .code-card img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.main.math .keyboard-image,
.main.furtherMaths .keyboard-image,
.main.english .keyboard-image,
.main.literature .keyboard-image,
.main.phonics .keyboard-image,
.main.reasoning  .keyboard-image,
.main.chemistry .keyboard-image,
.main.physics .keyboard-image,
.main.religious .keyboard-image{

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

}

.main.math .think-card,
.main.furtherMaths .think-card,
.main.physics .think-card,
.main.religious .think-card{

    color:var(--gold);

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

    background:
        rgba(0, 0, 0, 0.88)
    ;

}

.main.math .did-you-know,
.main.furtherMaths .did-you-know,
.main.english .did-you-know,
.main.literature .did-you-know,
.main.phonics .did-you-know,
.main.reasoning  .did-you-know,
.main.chemistry .did-you-know,
.main.physics .did-you-know,
.main.religious .did-you-know{

    background:
        rgba(10, 7, 15, 0.94)
    ;

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

}

.main.math .dyk-title,
.main.furtherMaths .dyk-title,
.main.english .dyk-title,
.main.literature .dyk-title,
.main.phonics .dyk-title,
.main.reasoning  .dyk-title,
.main.chemistry .dyk-title,
.main.physics .dyk-title,
.main.religious .dyk-title{

    color:var(--gold);

}

.main.math .stats,
.main.furtherMaths .stats,
.main.english .stats,
.main.literature .stats,
.main.physics .stats{

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

    background:
        linear-gradient(
            135deg,
            rgb(48, 32, 13),
            rgb(32, 20, 7),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.math .stat i,
.main.furtherMaths .stat i,
.main.english .stat i,
.main.literature .stat i,
.main.phonics .stat i,
.main.reasoning  .stat i,
.main.chemistry .stat i,
.main.physics .stat i,
.main.religious .stat i{

    color:var(--gold);

}

.main.math .learning-card,
.main.furtherMaths .learning-card,
.main.english .learning-card,
.main.literature .learning-card,
.main.physics .learning-card{

    border:1px solid #b08319;

    background:
        linear-gradient(
            135deg,
            rgb(48, 32, 13),
            rgb(32, 20, 7),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.math .learning-card:hover,
.main.furtherMaths .learning-card:hover,
.main.english .learning-card:hover,
.main.literature .learning-card:hover,
.main.phonics .learning-card:hover,
.main.reasoning .learning-card:hover,
.main.chemistry .learning-card:hover,
.main.physics .learning-card:hover,
.main.religious .learning-card:hover{

    border-color:#fbc546;

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

}

.main.math .card-icon,
.main.furtherMaths .card-icon,
.main.english .card-icon,
.main.literature .card-icon,
.main.phonics .card-icon,
.main.reasoning .card-icon,
.main.chemistry .card-icon,
.main.physics .card-icon,
.main.religious .card-icon{

    color:var(--accent);

    background:rgba(172, 163, 105, 0.20);
    
}

.main.math .card-content h2,
.main.furtherMaths .card-content h2,
.main.english .card-content h2,
.main.literature .card-content h2,
.main.phonics .card-content h2,
.main.reasoning  .card-content h2,
.main.chemistry .card-content h2,
.main.physics .card-content h2,
.main.religious .card-content h2{

    color:var(--gold);

}

.main.math .card-arrow,
.main.furtherMaths .card-arrow,
.main.english .card-arrow,
.main.literature .card-arrow,
.main.phonics .card-arrow,
.main.reasoning  .card-arrow,
.main.chemistry .card-arrow,
.main.physics .card-arrow,
.main.religious .card-arrow{

    color:var(--gold);

}

.main.phonics .stats,
.main.reasoning  .stats,
.main.chemistry .stats,
.main.religious .stats{

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

    background:
        linear-gradient(
            135deg,
            rgb(25, 17, 6),
            rgb(12, 7, 2),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.phonics .learning-card,
.main.reasoning  .learning-card,
.main.chemistry .learning-card,
.main.religious .learning-card{

    border:1px solid #b08319;

    background:
        linear-gradient(
            135deg,
            rgb(25, 17, 6),
            rgb(12, 7, 2),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.biology .eyebrow{

    background:#000;

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

    color: var(--biology-green);

}

.main.biology  .feature i {

    color: var(--biology-green);
    
}

.main.biology .main-image{

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

}

.main.biology .code-card{

    height:70%;

    padding:0;

    border-radius:18px;

    overflow:hidden;

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

}

.main.biology .code-card img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.main.biology .keyboard-image{

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

}

.main.biology .did-you-know{

    background:
        rgba(10, 7, 15, 0.94)
    ;

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

}

.main.biology .dyk-title{

    color:var(--biology-green);

}

.main.biology .stats{

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

    background:
        linear-gradient(
            135deg,
            rgb(25, 17, 6),
            rgb(12, 7, 2),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.biology .stat i{

    color:var(--biology-green);

}

.main.biology .learning-card{

    border:1px solid #b08319;

    background:
        linear-gradient(
            135deg,
            rgb(25, 17, 6),
            rgb(12, 7, 2),
            rgba(10, 7, 15, 0.7)
        )
    ;

}

.main.biology .learning-card:hover{

    border-color:var(--biology-green);

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

}

.main.biology .card-icon{

    color:var(--biology-green);

    background:rgba(172, 163, 105, 0.20);
    
}

.main.biology .card-content h2{

    color:var(--biology-green);

}

.main.biology .card-arrow{

    color:var(--biology-green);

}


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

@media (max-width: 1100px) {

    .coding-intro {

        gap: 25px;

        padding: 0 25px;
    }


    .intro-content h1 {

        font-size: 60px;
    }


    .feature-list {

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


    .feature {

        border-right: none;

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

        padding: 12px;
    }


    .stats {

        margin-left: 20px;

        margin-right: 20px;
    }


    .learning-cards {

        grid-template-columns:
            repeat(2, 1fr);
    }
}
/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 800px) {

    .coding-intro {

        grid-template-columns: 1fr;

        margin-top: 45px;

        padding: 0 18px;

        gap: 45px;
    }


    .intro-content h1 {

        font-size:
            clamp(50px, 14vw, 70px);
    }


    .intro-description {

        font-size: 15px;

        line-height: 1.7;
    }


    .feature-list {

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


    .coding-visual {

        min-height: 430px;

        width: 100%;
    }


    .main-image {

        width: 68%;

        height: 310px;

        left: 4%;
    }


    .code-card {

        width: 42%;

        padding: 12px;

        right: 0;
    }


    .code-card pre {

        font-size: 8px;
    }


    .keyboard-image {

        width: 55%;

        height: 125px;

        right: 3%;

        bottom: 35px;
    }


    .think-card {

        width: 75px;

        min-height: 120px;

        top: 185px;

        right: -3%;
    }


    .think-card i {

        font-size: 22px;
    }


    .think-card strong {

        font-size: 10px;
    }


    .did-you-know {

        width: 220px;

        left: 12%;

        bottom: 0;

        padding: 16px;
    }


    .stats {

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

        padding: 20px;
    }


    .stat {

        padding: 18px 8px;

        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,0.1);
    }


    .stat strong {

        font-size: 25px;
    }


    .learning-cards {

        grid-template-columns: 1fr;

        padding: 0 18px;
    }
}



/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 500px) {

    .coding-intro {

        margin-top: 35px;
    }


    .eyebrow {

        font-size: 11px;

        padding: 8px 11px;
    }


    .intro-content h1 {

        font-size: 48px;

        line-height: 0.98;
    }


    .intro-description {

        font-size: 14px;
    }


    .feature-list {

        grid-template-columns: 1fr 1fr;

        gap: 0;
    }


    .feature {

        min-height: 85px;
    }


    .feature i {

        font-size: 20px;
    }


    .feature span {

        font-size: 11px;
    }


    .gold-button {

        width: 100%;

        justify-content: center;

        font-size: 12px;
    }


    .coding-visual {

        min-height: 380px;
    }


    .main-image {

        width: 72%;

        height: 270px;

        left: 0;
    }


    .code-card {

        width: 45%;

        top: -10px;

        right: -2px;

        padding: 9px;
    }


    .code-card pre {

        font-size: 6px;

        line-height: 1.5;
    }


    .keyboard-image {

        width: 58%;

        height: 105px;

        right: 0;

        bottom: 45px;
    }


    .think-card {

        width: 65px;

        min-height: 105px;

        right: -5px;

        top: 160px;
    }


    .think-card strong {

        font-size: 9px;
    }


    .did-you-know {

        width: 190px;

        left: 5%;

        bottom: 0;

        padding: 14px;
    }


    .dyk-title {

        font-size: 11px;
    }


    .did-you-know p {

        font-size: 10px;
    }


    .stats {

        margin-left: 10px;

        margin-right: 10px;

        padding: 10px;
    }


    .stat {

        gap: 10px;

        padding: 15px 5px;
    }


    .stat > i {

        font-size: 21px;
    }


    .stat strong {

        font-size: 21px;
    }


    .stat span {

        font-size: 10px;
    }


    .learning-card {

        min-height: 175px;

        padding: 20px;
    }

}

















.second-topic{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.main.coding + .second-topic{

    padding-top:40px;

}

.second-topic h2{

    color:var(--gold);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    text-shadow: 2px 2px 4px rgb(81, 0, 128);

}

#mid-sec{

    padding:20px;

    display: flex;

    justify-content: center;

    gap: 40px;

}

.prim-lev,
.sec-lev,
.mid-lev {

    background:#000;

    border-radius: 20px;

    padding: 25px;

    width: 320px;

    position: relative;

    overflow: hidden;

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

    transition: all 0.4s ease;

}

/* HOVER LIFT */
.prim-lev:hover,
.sec-lev:hover,
.mid-lev:hover {

    transform: translateY(-12px);

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

}

.prim-lev-sub,
.sec-lev-sub,
.mid-lev-sub{

    background: none;

    text-align: left;

    margin-bottom: 15px;

    padding-bottom: 10px;

}

.prim-lev-sub h3,
.sec-lev-sub h3,
.mid-lev-sub h3{

    color: var(--gold);

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 1px;

    position: relative;

}

/* SMALL GOLD ACCENT UNDER TITLE */
.prim-lev-sub h3::after,
.sec-lev-sub h3::after,
.mid-lev-sub h3::after{

    content: "";

    display: block;

    width: 40px;

    height: 3px;

    background: var(--accent);

    margin-top: 6px;

}

.prim-lev p,
.sec-lev p,
.mid-lev p{

    padding: 10px 0;

    border-bottom: 1px solid rgba(173, 171, 171, .2);

    color: #a9a3b0;

    font-size: 15px;

    transition: 0.3s;

}

.prim-lev p:last-child,
.sec-lev p:last-child,
.mid-lev p:last-child{

    border-bottom: none;

}

/* ICON STYLE */
.prim-lev p::before,
.sec-lev p::before,
.mid-lev p::before{

    content: "✔";

    color: var(--accent);

    font-size:14px;

    margin-right: 8px;

    position:relative;

}

.min-head{

    display: flex;

    flex-direction: column;

    align-items:center;

    gap: 20px;

}

.min-head > h2{

    text-align: center;

    color:var(--gold);

}

.method {

    margin-bottom:20px;

    background:#000;

    border-radius: 20px;

    padding: 30px;

    gap: 40px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

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

}

.method p {

    padding:10px 0;

    position: relative;

    padding-left: 20px;

    border-bottom: 1px solid rgba(173, 171, 171, .2);

    color: #a9a3b0;

}

.method p:last-child{

    border:none;

}

.method p::before {

    content: "✔";

    position: absolute;

    left: 0;

    color: var(--accent);

    opacity:1;

    animation: pop 4s linear infinite;

    animation-delay:3s;

}

@keyframes pop{

    0%{

        opacity:1;

        transform:translateY(0px);

    } 10%{

        opacity:1;
     
        transform:translateY(0px);

    } 20%{

        opacity:0;
     
        transform:translateY(0px);

    } 30%{

        transform:translateY(-10px);

    } 40%{

        opacity:0.20;

    } 50%{

        transform:translateY(10px);
     
        opacity:1;

    } 60%{

        transform:translateY(-5px);

    } 70%{

        transform:translateY(5px);

    } 80%,90%,100%{

        opacity:1;
     
        transform:translateY(0px);

    }

}

.moto{
    
    display:flex;

    text-align:center;

}

.moto > p{

    padding:0 45px;

    color:var(--gold);

    font-size: 26px;

    font-style: italic;

}

.bold-bio{

    color:var(--biology-green);

}

.bold-code{

    color:var(--purple);

}

.card-container {

    padding: 100px 40px;

    gap: 30px;

}

.card {

    width:100%;

    background:#000;

    border-radius: 20px;

    padding: 25px;

    transition: all 0.4s ease;

    border:1px solid var(--gold)

}

.card:hover {

    transform: translateY(-10px);

}

.card p:nth-child(1) {

    color: var(--gold);

    font-size: 22px;

    margin-bottom: 10px;

}

.card p {

    color:#a9a3b0;

}

.bookaLesson {

    display: flex;

    flex-direction: column;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            rgb(25, 17, 6),
            rgb(12, 7, 2),
            rgba(10, 7, 15, 0.7)
        )
    ;

    padding: 60px 20px;

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

}

.bookaLesson p:first-child {

    font-size: 40px;

    color:var(--gold);

    text-align:center;

    font-family:normal;

}

.bookaLesson p:nth-child(3){

    color:#a9a3b0;

    margin-bottom:30px;

}

.logoSec{

    width:100%;

    display: flex;

    justify-content:center;

    gap: 30px;

    padding-top: 10px;

}

.first-logo,
.second-logo,
.third-logo{

    width:20%;

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

}

.first-logo::after,
.second-logo::after,
.third-logo::after{

    content:"";

    width:80px;

    height:1px;

    background:var(--gold);

    position:absolute;

    bottom:0;

    left:35%;

}

.first-logo >p,
.second-logo >p,
.third-logo >p{

    color:#a9a3b0;

    text-align:center;

}

.first-logo >p:first-of-type,
.second-logo >p:first-of-type,
.third-logo >p:first-of-type{

    color:var(--gold);

    font-family:normal;

    margin-bottom:20px;

}

.btn-bookNow {

    border: none;

    transition: 0.3s;

}

.btn-bookNow{

    width: 200px;

    height: 50px;

    margin-top: 50px;

    padding:10px;

    text-decoration:none;

    color:var(--dark);

    font-size:22px;

    font-weight:600;

    font-family:normal;

    background: var(--gold);

    border: o.25em solid rgb(248, 225, 93); 

    border-radius: 30px;





    display: flex;

    justify-content:space-around;

    align-items: center;

    animation: glow 3s infinite ease-in-out;

    transition: all 0.3s;

}

@keyframes glow {

    0%,
    100% {
        box-shadow: none;
        transform: scale(0.96);
    }

    50% {
        box-shadow:
            0 0 1em 0.15em rgba(249, 238, 172, 0.75),
            0 0 3em 0.5em rgba(255, 235, 121, 0.35);
        transform: scale(1);
    }

}

.btn-bookNow:hover {
 
    transform: scale(1.1);

    box-shadow: 0 0 20px rgba(212,175,55,0.6);

}


/* dektops with smaller screen sizes */
@media (max-height:670px){

    .dropdown{

        width:350px;

        top: 120%;

        left: -80px;

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

    }

}

@media (max-width:1181px){

    .navigation{

        gap:20px;

    }

    .navigation li .this{

        font-size:12px;

    }

}


/* =========================
   TABLET
========================= */
@media (max-width: 1024px){
    
    .navigation{

        height: 110em;

        width: 80%;

        padding-top: 230px;

        position: fixed;

        top: 0;

        left: 0;
        
        z-index: 10;

        opacity: 0;

        transition: all 0.4s ease;
    }

    .navigation{

        display: none;
        
    }

    .hamburger{

        display:flex;

        flex-direction:column;

        gap:5px;

        cursor:pointer;

    }

    .hamburger span{

        width:25px;

        height:3px;

        background:#8B5A2B;
        
    }


    /* MOBILE NAV (SAME AS HOME) */
    .mobile-nav{

        display: block;

        position:fixed;

        top:0;

        left:-100%;

        width:min(80vw, 420px);

        box-sizing:border-box;

        height:100dvh;

        /* background:linear-gradient(180deg,#6b3f1d,#4a2b13); */

        background: radial-gradient(
            circle at 35% 35%,
            #3a2a16 0%,
            #21170d 25%,
            #100e0a 50%,
            #080807 75%,
            #030303 100%
        );

        /* background: radial-gradient(
            circle at 30% 35%,
            #2a2115 0%,
            #17130e 35%,
            #0b0b0a 70%,
            #050505 100%
        ); */

        
        z-index:3000;

        padding:clamp(15px, 3vw, 25px);

        transition:0.4s ease;

        overflow-y:hidden;

        overflow-x:hidden;

        display:flex;

        flex-direction:column;

    }

    

    .mobile-nav.active{

        left:0;

    }

    /* MOBILE NAV (SAME AS HOME) */

    .mobile-overlay{

        display: block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,0.5);

        opacity:0;
        
        visibility:hidden;
        
        transition:0.3s;

        z-index:2500;

    }

    .mobile-overlay.active{

        opacity:1;

        visibility:visible;

    }

    .mobile-header{

        display:flex;

        justify-content:space-between;

        align-items:center;

    }

    .menu_logo_wrap{

        width:min(60%, 250px);

        aspect-ratio: 5 / 3;

        /* height:150px; */

        overflow:hidden;



        display:flex;

        justify-content:center;

        align-items:center;

    }

    .menu_logo_wrap img{

        width:100%;

        height:100%;

        object-fit:contain;

    }

    .close-btn{

        width:40px;

        height:40px;

        padding:0;

        flex-shrink:0;



        background:#241a0d;

        border-radius:50%;

        border: 0.20px solid gold;

        box-shadow:
            -4px 10px 15px rgb(67, 57, 1), 
            -4px 10px 10px rgb(67, 57, 1), 
            -4px 10px 5px rgb(107, 91, 2),
            4px 10px 10px rgb(67, 57, 1)
        ;



        display:flex;

        justify-content:center;

        align-items:center;

        text-align:center;

        font-size:clamp(28px, 8vw, 40px);

        color:gold;

        cursor:pointer;

    }

    .mobile-menu{

        margin-top:clamp(15px, 4vh, 40px);

        padding:clamp(10px, 4vw, 40px);

        display:flex;

        flex-direction:column;

        gap:clamp(10px, 3vh, 30px);

        min-height:0;

    }

    .mobile-menu a{

        min-height:clamp(55px, 8vh, 90px);

        height:auto;

        padding:
            clamp(10px, 2vw, 20px)
            clamp(15px, 4vw, 40px)
        ;

        box-sizing:border-box;

        border-bottom:1px solid rgb(109, 111, 91);


        color: #F5C95B;

        font-size:clamp(15px, 2.5vw, 22px);

        text-decoration:none;


        display:flex;

        justify-content:space-between;

        align-items:center;

        gap:15px;

    }

    .mobile-menu a:last-child,
    .mobile-menu a:nth-child(2){

        border-bottom:none;

    }

    .gap{

        display:flex;

        align-items:center;

        gap:clamp(15px, 4vw, 40px);

        min-width:0;

    }

    .mobile-menu .active{

        background: linear-gradient(
            135deg,
            #3A2A16 0%,
            #17130E 45%,
            #0B0B0A 100%
        );

        bottom:none;

        border: 1px solid #D9A62E;

        box-shadow: 0 0 18px rgba(217, 166, 46, 0.45);

        border-radius:clamp(15px, 4vw, 30px);

    }

    .nav-footer {

        width:auto;

        flex-shrink:0;

        margin-top:auto;

        box-sizing:border-box;

        position: relative;

        padding:
            clamp(20px, 4vh, 40px)
            clamp(15px, 4vw, 30px);

        background: linear-gradient(
            135deg,
            #15110C,
            #0A0907
        );

        border-top: 1px solid rgba(218, 169, 61, 0.45);

        box-shadow:
            0 -8px 25px rgba(218, 169, 61, 0.08),
            0 -1px 8px rgba(218, 169, 61, 0.18);

        color: #E8C56A;


        display:flex;

        align-items:center;

        gap:clamp(15px, 4vw, 40px);

    }

    .nav-footer::before {

        content: "";

        position: absolute;

        top: -1px;

        right: 0;

        width: 70%;

        height: 2px;

        background: linear-gradient(
            to right,
            transparent,
            #D9A62E,
            #F5D477
        );

        box-shadow:
            0 0 8px rgba(217, 166, 46, 0.7),
            0 0 18px rgba(217, 166, 46, 0.35);
    }

    .nav-footer_txt{

        min-width:0;

    }

    .nav-footer_txt p{

        margin:0;

        font-size:clamp(12px, 2vw, 16px);

        line-height:1.5;

    }

    #mid-sec{
    
        flex-direction: column;
    
        align-items: center;
    
    }

    .card-container{
    
        flex-wrap: wrap;
    
        justify-content: center;
    
    }

}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
    

    h1{
    
        font-size: 36px;
    
        text-align: center;
    
        padding: 0 10px;
    
    }

    .box{
    
        width: 100%;
    
    }

    .prim-lev, .sec-lev, .mid-lev{
    
        width: 100%;
    
    }

    .method{
    
        flex-direction: column;
    
        gap: 15px;
    
    }

    .card-container{
    
        flex-direction: column;
    
        align-items: center;
    
    }

    /* .card{
    
        width: 90%;
    
    } */

    .logoSec{
    
        flex-direction: column;
    
        align-items: center;
    
    }

    .logoSec > div{

        width:100%;

    }

    .first-logo::after,
    .second-logo::after,
    .third-logo::after{

        left:37%;

    }

}


@media (min-width:755px){

    .mobile-nav{

        width:80%;

    }

}