/* =======================================
   RESET
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

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

    background:#f8f8f8;

    color:#222;

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

}








/* =======================================
   BACKGROUND
======================================= */

.bg-light{

    position:fixed;

    inset:0;

    z-index:-20;

    background:
    
radial-gradient(circle at top,#ffffff 0%,#f5f7ff 45%,#eef3ff 100%);

}


.bg-light::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 20% 15%,
        rgba(111,163,255,.16),
        transparent 28%),

        radial-gradient(circle at 80% 10%,
        rgba(190,210,255,.20),
        transparent 25%),

        radial-gradient(circle at 50% 80%,
        rgba(190,210,255,.18),
        transparent 30%);

    pointer-events:none;

}



/* =======================================
   GLASS ORB
======================================= */

.glass-orb{

    position:fixed;

    border-radius:50%;

    background:

    rgba(255,255,255,.45);

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

    border:

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

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.8),

    0 20px 60px rgba(0,0,0,.05);

    z-index:-5;

}

.orb1{

    width:250px;

    height:250px;

    top:100px;

    right:5%;

}

.orb2{

    width:180px;

    height:180px;

    left:6%;

    bottom:15%;

}

.orb3{

    width:120px;

    height:120px;

    right:25%;

    bottom:10%;

}

/* =======================================
   CONTAINER
======================================= */

.container{

    width:min(1600px,92%);

    margin:auto;

}

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

header{

    position:fixed;

    width:100%;

    top:20px;

    left:0;

    z-index:999;

}

.nav-wrapper{

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    border-radius:100px;

    background:

    rgba(255,255,255,.55);

    -webkit-backdrop-filter: blur(25px) saturate(180%);
    backdrop-filter: blur(25px) saturate(180%);

    border:

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

    box-shadow:

    0 10px 40px rgba(0,0,0,.05),

    inset 0 1px 1px rgba(255,255,255,.9);

}

.logo{
    font-family: "Cormorant Garamond", serif;
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #3f85c8;
    line-height: 1;
}


.logo,
.logo:link,
.logo:visited{

    text-decoration:none;

    color:#3f85c8;

}

.logo:hover{

    text-decoration:none;

}

nav{

    display:flex;

    gap:45px;

}

nav a{

    text-decoration:none;

    color:#555;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:#3f85c8;

}

.nav-button{

    border:none;

    padding:15px 28px;

    border-radius:50px;

    background:white;

    cursor:pointer;

    font-weight:600;

    box-shadow:

    0 8px 20px rgba(0,0,0,.06);

    transition:.3s;

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

}

.nav-button:hover{

    transform:translateY(-3px);

    background:#3f85c8;

color: #fff;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;



}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:70px;

    align-items:center;

}

.hero-badge{

    display:inline-flex;

    padding:12px 22px;

    border-radius:999px;

    background:

    rgba(255,255,255,.6);

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

    border:

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

    box-shadow:

    0 5px 20px rgba(0,0,0,.05);

    margin-bottom:35px;

}

.hero-left h1{

    font-size:82px;

    line-height:1.1;

    font-weight:700;

}

.hero-left span{

    color:#3f85c8;

}

.hero-left p{

    margin-top:30px;

    font-size:18px;

    color:#666;

    line-height:1.8;

    max-width:650px;

}

.hero-action{

    display:flex;

    gap:20px;

    margin-top:50px;

}






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

.primary-btn{

    padding:18px 38px;

    border-radius:999px;

    border:none;

    background:white;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    box-shadow:

    0 12px 25px rgba(0,0,0,.08);

    transition:.35s;


    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    cursor: pointer;

}

.primary-btn:hover{

    transform:

    translateY(-5px);

    background:#22C55E;

    color: #fff;
text-decoration: none;
}


.primary-btn,
.primary-btn:link,
.primary-btn:visited,

.secondary-btn,
.secondary-btn:link,
.secondary-btn:visited{

    text-decoration:none;

}




.secondary-btn{

    padding:18px 38px;

    border-radius:999px;

    background:

    rgba(255,255,255,.5);

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

    border:

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

    cursor:pointer;

    font-size:17px;

    transition:.35s;


    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    cursor: pointer;

}

.secondary-btn:hover{
text-decoration: none;
    transform:

    translateY(-5px);

    background: #3f85c8;

    color: #fff;

}


/* PRIMARY BUTTON */

.primary-btn,
.primary-btn:link,
.primary-btn:visited {

    color: #1b1b1b;
    text-decoration: none;
    transition: all 0.3s ease;

}

.primary-btn:hover,
.primary-btn:focus,
.primary-btn:active {

    color: #ffffff;
    text-decoration: none;

}


/* SECONDARY BUTTON */

.secondary-btn,
.secondary-btn:link,
.secondary-btn:visited {

    color: #1b1b1b;
    text-decoration: none;
    transition: all 0.3s ease;

}

.secondary-btn:hover,
.secondary-btn:focus,
.secondary-btn:active {

    color: #ffffff;
    text-decoration: none;

}




/* =======================================
VIDEO
======================================= */

.video-glass{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

    border-radius:32px;

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

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

}

.video-glass::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    130deg,

    rgba(255,255,255,.45),

    transparent 30%,

    transparent 70%,

    rgba(255,255,255,.25)

    );

    pointer-events:none;

}

.video-glass:hover{

    transform:

    translateY(-8px);

}

.video-glass iframe{

    width:100%;

    height:100%;

    border:none;

    transform:scale(1);

    pointer-events:none;

}

/* =======================================
FEATURE
======================================= */

.feature{

    padding:120px 0;

}

.section-title{

    text-align:center;

    font-size:56px;

    font-weight:700;

    margin-bottom:30px;

}

.feature-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}

.feature-card{
    position:relative;
    overflow:hidden;

        height:360px;    

    border-radius:30px;
    padding:50px;

    /* lebih clean, jangan terlalu putih */
    background:rgba(20,20,20,.25);

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

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

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

    transition:.4s;
}

.feature-card:hover{
    transform:translateY(-10px);
}


.feature-card{
    width:500px;
    height:360px;
    position:relative;
    overflow:hidden;
}

.card-image{
    position:absolute;
    inset:0;
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* VIDEO BACKGROUND */
.card-video{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.card-video iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:140%;
    height:140%;
    transform:translate(-50%,-50%) scale(1.2);
    border:none;
    pointer-events:none;

    /* bikin video lebih “hidup” */
    /* filter:contrast(1.2) saturate(1.3) brightness(0.9); */
}

/* OVERLAY GRADIENT (BIAR TIDAK KUSAM) */
.card-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.25),
        rgba(0,0,0,.55)
    );
}

/* CONTENT DI ATAS SEMUA */
.card-content{
    position:relative;
    z-index:2;
    color:white;
}

/* ICON */
.icon{
    font-size:50px;
    margin-bottom:30px;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.4));
}

/* TEXT FIX KONTRAS */
.feature-card h3{
    font-size:28px;
    margin-bottom:0px;
    margin-top: 100px;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}

.feature-card p{
    
    color:rgba(255,255,255,.85);
    line-height:1.8;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}



/* =======================================
CTA
======================================= */

.cta{

    padding:100px 0;

}

.cta-card{

    background:

    rgba(255,255,255,.55);

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

    border-radius:40px;

    padding:100px;

    text-align:center;

    border:

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

    box-shadow:

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

}

.cta-card h2{

    font-size:64px;

}

.cta-card p{

    margin:25px auto 50px;

    color:#666;

    font-size:22px;

    max-width:700px;

}

 

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

.footer{

    padding:90px 0 30px;

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

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

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

    margin-top:10px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr 1fr;

    gap:80px;

}

.footer-brand h2{

    font-family: "Cormorant Garamond", serif;
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #3f85c8;
    line-height: 1;
}

.footer-brand p{

    color:#666;

    line-height:1.8;

    max-width:280px;

    font-size:18px;

}

.footer-column h3{

    font-size:22px;

    margin-bottom:25px;

    color:#111;

}

.footer-column{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column a{

    text-decoration:none;

    color:#666;

    transition:.3s;

    width:fit-content;

}

.footer-column a:hover{

    color:#3f85c8;

    transform:translateX(5px);

}

.footer-bottom{

    margin-top:70px;

    padding-top:25px;

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

    text-align:center;

    color:#888;

    font-size:15px;

}

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

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr 1fr;

gap:50px;

}

}

@media(max-width:640px){

.footer{

padding:70px 0 25px;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer-brand p{

margin:auto;

}

.footer-column{

align-items:center;

}

.footer-column a:hover{

transform:none;

}

}






header{

    transition:.4s;

}

header.scroll{

    top:10px;

}

header.scroll .nav-wrapper{

    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);

    background:

    rgba(255,255,255,.72);

}


.hero-left,
.hero-right,
.feature-card,
.cta-card{

    opacity:0;

    transform:

    translateY(60px);

    transition:

    1s cubic-bezier(.19,1,.22,1);

}

.show{

    opacity:1;

    transform:

    translateY(0);

}



.glass-orb{

    animation:

    floating 10s ease-in-out infinite;

}

.orb2{

    animation-delay:2s;

}

.orb3{

    animation-delay:4s;

}

@keyframes floating{

0%{

transform:

translateY(0px);

}

50%{

transform:

translateY(-20px);

}

100%{

transform:

translateY(0px);

}

}





.feature-card{

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    rgba(255,255,255,.55);

    filter:blur(60px);

    top:-120px;

    right:-120px;

    transition:.5s;

}

.feature-card:hover::before{

    transform:scale(1.4);

}


@media(max-width:1200px){

    .portfolio-grid{

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

    }

.hero-grid{

grid-template-columns:1fr;

gap:60px;


}




@media(max-width:768px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .portfolio-category h2{

        text-align:center;

    }

        nav{

        display:none;

        }







        .feature-grid{

        grid-template-columns:1fr;

        }

        .hero-left{

        text-align:center;

        }

        .hero-action{

        justify-content:center;

        }

        .hero-left p{

        margin:auto;

        margin-top:25px;

        }

}












.hero{

padding-top:140px;

}

.hero-left h1{

font-size:54px;

}

.section-title{

font-size:42px;


}

.cta-card{

padding:50px 30px;

}

.cta-card h2{

font-size:42px;

}

.hero-action{

flex-direction:column;

}

.primary-btn,

.secondary-btn{

width:100%;

}

}















/* =======================================
PORTFOLIO
======================================= */

.portfolio{

    padding:0px 0;

}

.portfolio-desc{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

    color:#666;

    line-height:1.8;

}



.portfolio-category h2{

    font-size:38px;

    margin-bottom:0px;

    font-weight:700;

}

.portfolio-grid{

    display:grid;

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

    gap:25px;

    margin-bottom: 100px;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

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

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

    aspect-ratio:4/5;

    cursor:pointer;

    transition:.4s;

}

.portfolio-item:hover{

    transform:translateY(-10px);

}

.portfolio-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.7)

    );

    display:flex;

    align-items:flex-end;

    padding:25px;

    opacity:0;

    transition:.35s;

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

.portfolio-overlay h3{

    color:white;

    font-size:22px;

}



.portfolio-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.portfolio-header h2{

    font-size:38px;

    font-weight:700;

}

.portfolio-more{

    text-decoration:none;

    color:#444;

    font-size:16px;

    font-weight:600;

    padding:12px 24px;

    border-radius:999px;

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

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

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

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.portfolio-more:hover{

    transform:translateY(-3px);

    background:#3f85c8;

color: #fff;

}





.card-cta{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.btn-pricelist,
.btn-order{
    flex:1;
    text-align:center;
    padding:12px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.btn-pricelist{
    background:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.9);
    color:#333;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.btn-pricelist:hover{
    transform:translateY(-3px);
    background:white;
}

.btn-order{
    background:#22C55E;
    color:white;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 10px 25px rgba(57,132,199,.25);
}

.btn-order:hover{
    transform:translateY(-3px);
    background:#118d3e;
}






/* ==========================================================
TESTIMONIAL
========================================================== */

.testimonial{

padding:0px 0;

}

.testimonial-card{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

padding:70px;

border-radius:40px;

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


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

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

box-shadow:

0 30px 80px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.testimonial-card::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:

rgba(255,255,255,.35);

border-radius:50%;

filter:blur(80px);

right:-120px;

top:-120px;

}

.testimonial-left span{

letter-spacing:4px;

font-size:14px;

color:var(--primary);

font-weight:600;

}

.testimonial-left h2{

font-size:72px;

margin-top:20px;

line-height:1.1;

}

.testimonial-left p{

margin-top:30px;

font-size:22px;

line-height:1.8;

color:#666;

max-width:500px;

}

.testimonial-left button{

font-family:"Outfit",sans-serif;
margin-top:45px;

padding:18px 38px;

border:none;

border-radius:999px;

background:white;

cursor:pointer;

font-weight:600;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

transition:.4s;

}

.testimonial-left button:hover{

transform:

translateY(-6px);

background:#3f85c8;

color: #fff;

}

.testimonial-right img{

width:100%;

border-radius:30px;

display:block;

}








/* =======================================
TESTIMONIAL SLIDER
======================================= */

.testimonial-slider{
    position:relative;
    min-height:120px;
    margin-top:30px;
}

.testimonial-text{
    position:absolute;
    top:0;
    left:0;
    right:0;

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

    transition:.6s ease;
    font-size:22px;
    line-height:1.8;
    color:#666;
    max-width:500px;
}

.testimonial-text.active{
    opacity:1;
    transform:translateY(0);
}

.testimonial-dots{
    display:flex;
    gap:10px;
    margin-top:25px;
}

.testimonial-dots .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ccc;
    cursor:pointer;
    transition:.3s;
}

.testimonial-dots .dot.active{
    background:#3f85c8;
    transform:scale(1.2);
}






/* =======================================
GUARANTEE SECTION
======================================= */

.guarantee{
    padding:0px 0;
    margin-bottom: 100px;
}

.guarantee-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.guarantee-card{
    padding:45px;
    border-radius:30px;

    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);

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

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

    text-align:center;

    transition:.4s;
}

.guarantee-card:hover{
    transform:translateY(-10px);
}

.guarantee-icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

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

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

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

    transition:.35s ease;

}

.guarantee-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

    transition:.35s ease;

}

.guarantee-card:hover .guarantee-icon{

    transform:translateY(-6px);

    background:rgba(59, 160, 255, 0.12);

}

.guarantee-card:hover .guarantee-icon img{

    transform:scale(1.08);

}

.guarantee-card h3{
    font-size:22px;
    margin-bottom:10px;
    font-weight:700;
    color:#222;
}

.guarantee-card p{
    color:#666;
    line-height:1.6;
}



/* ===================================
BACK TO TOP
=================================== */
/* ===================================
BACK TO TOP
=================================== */

.back-to-top{

    

    position:fixed;

    right:32px;

    bottom:32px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:50%;

    z-index:9999;

    /* Glass */

    background:rgba(11, 125, 255, 0.788);

    -webkit-backdrop-filter:blur(30px) saturate(180%);
    backdrop-filter:blur(30px) saturate(180%);
    
    /* border:1px solid rgba(255,255,255,.15); */

    box-shadow:

        0 10px 35px rgba(0,0,0,.08),

        inset 0 1px 1px rgba(255,255,255,.15);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        background .35s ease,

        transform .35s ease,

        opacity .35s ease;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px);

    background:rgba(116, 192, 255, 0.952);

}

.back-to-top svg{

    width:22px;

    height:22px;

    color:#fff;

    transition:

        transform .35s ease,

        color .35s ease;

}

.back-to-top:hover svg{

    transform:translateY(-2px);

    color:#fff;

}



.card-price{

    margin-top:20px;

    font-size:15px;

    color:rgba(255,255,255,.8);

}


.card-price strong{

    display:inline-block;

    margin-left:6px;

    font-size:26px;

    font-weight:700;

}


.card-price span{

    font-size:14px;

    margin-left:5px;

}


/* ==========================================
   LIVE2D COURSE
========================================== */

.course{

    padding:80px 0;

    margin-bottom: 100px;
}

.course-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    padding:50px;

    border-radius:30px;


    background:#ffffff;

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

    position:relative;

    overflow:hidden;



}

.course-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(125,90,255,.30),
        transparent 70%);

    right:-120px;

    top:-120px;

    pointer-events:none;

}








.course-video{

    display:flex;
    justify-content:center;

}

.course-video .video-glass{

    width:500px;
    height:640px;

    border-radius:28px;

    overflow:hidden;


}

.course-video iframe{

    width:240%;
    height:240%;

    margin-left:-70%;
    margin-top: -87%;

    border:none;

}





.course-badge{

    display:inline-block;

    margin-bottom:20px;

    padding:10px 20px;

    border-radius:999px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #7C4DFF,
        #A855F7,
        #4FC3F7
    );

    box-shadow:0 10px 30px rgba(124,77,255,.4);

}

.course-content h2{

    font-size:2.5rem;

    margin-bottom:20px;

    line-height:1.2;

}

.course-content p{

    color:rgba(12, 12, 12, 0.75);

    line-height:1.8;

    margin-bottom:30px;

    text-align:justify;
}

.course-stats{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.course-stat{

    flex:1;

    min-width:120px;

    text-align:center;

    padding:18px;

    border-radius:18px;

    background:rgba(210, 170, 255, 0);

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

}

.course-stat strong{

    display:block;

    font-size:3rem;

    color:#51a2ff;

}

.course-stat span{

    color:rgba(0, 0, 0, 0.7);

    font-size:.9rem;

}
.course-features{

    display:grid;

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

    column-gap:16px;

    row-gap:25px;

    margin-bottom:50px;

}

.course-features div{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    background:#ffffff;

    /* border:1px solid rgba(124,77,255,.12); */

    border-radius:50px;

    color:#535353;

    font-weight:500;

    box-shadow:
        0 8px 20px rgba(0,0,0,.05);

    transition:.25s ease;

}


.course-features div:hover{

    transform:translateY(-3px);

    border-color:#7C4DFF;

    box-shadow:
        0 14px 28px rgba(124,77,255,.18);

}


.course-price{

    margin-bottom:35px;

}

.course-price small{

    color:rgba(255,255,255,.6);

}

.course-price h3{

    margin-top:5px;

    font-size:2.4rem;

}

.course-price span{

    font-size:1rem;

    color:rgba(255,255,255,.6);

}

/* Course Button */

.course-btn{

    background:#22C55E;

    border:1px solid #22C55E;

    color:#fff !important;

    transition:.25s ease;

    align-items: flex-end;

}

.course-btn:hover{

    background:#16A34A;

    border-color:#16A34A;

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(34,197,94,.35);

}



.course-buttons{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

    margin-top:25px;

    width:100%;

}



@media(max-width:900px){

    .course-card{

        grid-template-columns:1fr;

        padding:30px;

        gap:40px;

    }

    .course-content{

        text-align:center;

    }

    .course-stats{

        justify-content:center;

    }

    .course-features{

        grid-template-columns:1fr;

    }

    .course-buttons{

        justify-content:center;

    }

}







/* =====================================
   PAGE TRANSITION
===================================== */


.page-transition{

    position:fixed;

    inset:0;

    z-index:999999;


    background:

    radial-gradient(
        circle,
        #ffffff 0%,
        #ecf1ff 45%,
        #c7d5fd 100%
    );


    clip-path:

    circle(
        0% at 50% 50%
    );


    opacity:0;


    transition:

    clip-path .9s cubic-bezier(
        .76,
        0,
        .24,
        1
    ),

    opacity .5s ease;


    pointer-events:none;

}



.page-transition.active{


    opacity:1;


    clip-path:

    circle(
        150% at 50% 50%
    );


}



/* =========================
   PAGE EXIT FADE
========================= */


body.page-exit > *:not(.page-transition){


    animation:

    pageFadeOut .45s ease forwards;


}



@keyframes pageFadeOut{


    from{

        opacity:1;

        transform:translateY(0);

    }


    to{

        opacity:0;

        transform:translateY(-20px);

    }

}