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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

:root{

--primary:#FFD54A;

--secondary:#D32F2F;

--dark:#080808;

--card:#171717;

--text:#d5d5d5;

--shadow:0 20px 45px rgba(0,0,0,.35);

}

html{

scroll-behavior:smooth;

}

body{

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

background:#050505;

color:white;

line-height:1.7;

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

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

.coming-hero{

position:relative;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:100px 8%;

background:

linear-gradient(

rgba(0,0,0,.82),

rgba(0,0,0,.82)

),

url(image/backgroundimg.png);

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(

135deg,

rgba(0,0,0,.35),

rgba(211,47,47,.18)

);

}

.hero-content{

position:relative;

z-index:2;

max-width:850px;

}

.logo{

width:180px;

margin:auto;

margin-bottom:35px;

}

.coming-icon{

width:110px;

height:110px;

margin:auto;

margin-bottom:35px;

border-radius:50%;

background:rgba(255,213,74,.12);

display:flex;

justify-content:center;

align-items:center;

font-size:45px;

color:var(--primary);

}

.hero-content h1{

font-size:62px;

margin-bottom:25px;

line-height:1.2;

}

.hero-content p{

font-size:20px;

color:var(--text);

line-height:1.9;

margin-bottom:40px;

}

.release-box{

display:inline-block;

padding:25px 40px;

border-radius:20px;

background:var(--card);

box-shadow:var(--shadow);

}

.release-box h3{

margin-bottom:12px;

}

.release-box span{

font-size:24px;

font-weight:700;

color:var(--primary);

}

/*==================================================
        CONTINUE LEARNING
==================================================*/

.continue-learning{

padding:100px 8%;

background:#101010;

text-align:center;

}

.continue-learning h2{

font-size:48px;

margin-bottom:20px;

}

.continue-learning>p{

max-width:750px;

margin:auto;

margin-bottom:55px;

color:var(--text);

}

.option-grid{

display:grid;

grid-template-columns:

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

gap:35px;

}

.option-card{

background:var(--card);

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

}

.option-card:hover{

transform:translateY(-10px);

}

.option-card i{

font-size:55px;

color:var(--primary);

margin-bottom:25px;

}

.option-card h3{

font-size:28px;

margin-bottom:18px;

}

.option-card p{

color:var(--text);

margin-bottom:30px;

line-height:1.8;

}

.option-card a{

display:inline-block;

padding:15px 35px;

background:var(--primary);

color:#111;

border-radius:40px;

font-weight:700;

transition:.35s;

}

.option-card a:hover{

transform:translateY(-4px);

}

/*=========================================
            NOTIFY SECTION
=========================================*/

.notify{

padding:90px 8%;

text-align:center;

background:#080808;

}

.notify h2{

font-size:46px;

margin-bottom:20px;

}

.notify p{

max-width:700px;

margin:0 auto 35px;

color:var(--text);

}

.notify-form{

max-width:650px;

margin:auto;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.notify-form input{

flex:1;

min-width:280px;

padding:18px 22px;

border:none;

outline:none;

border-radius:50px;

font-size:16px;

background:#1d1d1d;

color:#fff;

}

.notify-form button{

padding:18px 35px;

border:none;

border-radius:50px;

background:var(--primary);

color:#111;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.notify-form button:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(255,213,74,.35);

}

.privacy-note{

margin-top:20px;

font-size:14px;

color:#9b9b9b;

}

/*=========================================
            ACTION BUTTONS
=========================================*/

.action-buttons{

padding:70px 8%;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:25px;

background:#101010;

}

.back-btn,
.youtube-btn{

padding:18px 35px;

border-radius:50px;

font-weight:700;

transition:.35s;

display:inline-flex;

align-items:center;

gap:10px;

}

.back-btn{

background:#2a2a2a;

color:#fff;

}

.youtube-btn{

background:#ff0000;

color:#fff;

}

.back-btn:hover,
.youtube-btn:hover{

transform:translateY(-5px);

}

/*=========================================
                QUOTE
=========================================*/

.quote{

padding:100px 8%;

text-align:center;

background:#050505;

}

.quote i{

font-size:60px;

color:var(--primary);

margin-bottom:25px;

}

.quote p{

max-width:800px;

margin:auto;

font-size:28px;

font-style:italic;

line-height:1.8;

}

.quote h3{

margin-top:35px;

color:var(--primary);

font-size:24px;

}

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

.faq{

padding:100px 8%;

background:#111;

}

.faq h2{

text-align:center;

font-size:45px;

margin-bottom:55px;

}

.faq-box{

background:var(--card);

padding:35px;

border-radius:20px;

margin-bottom:25px;

box-shadow:var(--shadow);

}

.faq-box h3{

margin-bottom:15px;

color:var(--primary);

}

.faq-box p{

color:var(--text);

}


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

.contact-help{

padding:100px 8%;

text-align:center;

background:#080808;

}

.contact-help h2{

font-size:45px;

margin-bottom:20px;

}


.contact-help p{

max-width:700px;

margin:0 auto 35px;

color:var(--text);

}

.contact-help a{

display:inline-block;

padding:18px 40px;

background:var(--primary);

color:#111;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.contact-help a:hover{

transform:translateY(-5px);

}

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

footer{

padding:45px 8%;

text-align:center;

background:#000;

border-top:1px solid #222;

}

.footer-logo{

width:140px;

margin:0 auto 25px;

}

footer p{

color:#888;

font-size:15px;

}


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

.back-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#111;

font-size:22px;

cursor:pointer;

display:none;

box-shadow:var(--shadow);

transition:.35s;

z-index:999;

}

.back-top:hover{

transform:translateY(-6px);

}

/*=========================================
            SUCCESS POPUP
=========================================*/

.success-popup{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

padding:20px;

z-index:1000;

}

.success-box{

background:#fff;

color:#111;

max-width:500px;

width:100%;

padding:40px;

border-radius:20px;

text-align:center;

animation:popup .4s ease;

}


.success-box i{

font-size:70px;

color:#28a745;

margin-bottom:20px;

}


.success-box h2{

margin-bottom:15px;

}


.success-box p{

line-height:1.8;

margin-bottom:30px;

}

.success-box button{

padding:15px 35px;

border:none;

border-radius:40px;

background:var(--primary);

font-weight:700;

cursor:pointer;

}

@keyframes popup{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

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

@media(max-width:768px){

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:17px;

}

.continue-learning h2,
.notify h2,
.faq h2,
.contact-help h2{

font-size:34px;

}

.quote p{

font-size:22px;

}

.action-buttons{

flex-direction:column;

align-items:center;

}

.back-btn,
.youtube-btn{

width:100%;

max-width:350px;

justify-content:center;

}

}