/* ==========================
   PNX EDUCATION
   AI Webinar Landing Page
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#111827;
    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{

    max-width:100%;
    display:block;

}

.container{

    width:90%;
    max-width:1280px;
    margin:auto;

}

/*=========================================
HEADER + HERO
=========================================*/

.hero{

    min-height:100vh;

    background:
    radial-gradient(circle at top left,#7c3aed 0%,transparent 35%),
    radial-gradient(circle at bottom right,#2563eb 0%,transparent 35%),
    linear-gradient(135deg,#312e81,#4f46e5,#2563eb);

    color:#fff;
    position:relative;

    overflow:hidden;

}
.hero::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

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

    border-radius:50%;

    top:-120px;

    right:-120px;

    filter:blur(40px);

}

.hero::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

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

    border-radius:50%;

    bottom:-90px;

    left:-90px;

    filter:blur(40px);

}

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

.navbar{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    padding:18px 0;

    background:rgba(49,46,129,.35);

    backdrop-filter:blur(15px);

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

    z-index:999;

    transition:all .35s ease;

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

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:75px;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

}

.logo img{

    width:60px;

    height:60px;

    background:#ffffff;

    border-radius:14px;

    padding:5px;

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

    transition:all .35s ease;

}
.logo:hover img{

    transform:rotate(-5deg) scale(1.05);

}

.logo-content h2{

    color:#fff;

    font-size:32px;

    margin:0;

    line-height:1.1;

}

.logo-content span{

    color:#d1d5db;

    font-size:15px;

}

.nav-menu{

    display:flex;

    gap:35px;

    list-style:none;

}

.nav-menu li{

    list-style:none;

}

.nav-menu a{

    color:#fff;

    font-size:17px;

    font-weight:600;

    padding:8px 0;

    position:relative;

    transition:all .3s ease;

}
.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#FFD54A;

    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}

.nav-menu a:hover{

    color:#FFD54A;

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:20px;

}

.btn-register{

    background:#FFD54A;

    color:#111827;

    padding:15px 30px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn-register:hover{

    background:#FFC107;

    transform:translateY(-3px);

}

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

.hero-section{

    padding:50px 0 80px;

}

.hero-container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:60px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    background:#FFD54A;

    color:#111827;

    padding:12px 24px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}

.hero-left h1{

font-size:42px;

line-height:1.15;

text-align:center;

}

.hero-left h1 span{

    color:#FFD54A;

}

.hero-left p{

    font-size:22px;
    line-height:1.9;
    color:#E5E7EB;
    max-width:620px;
    text-align:center;
    margin:25px auto 40px;

}

.hero-features{

    display:grid;

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

    gap:15px;

    margin-bottom:40px;

}

.hero-features div{

    font-size:18px;

}

.hero-buttons{

display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;

flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;
    min-width:240px;

    background:#FFD54A;

    color:#111827;

    padding:18px 38px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:all .35s ease;

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

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(255,213,74,.45);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

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

border-radius:50px;

background:transparent;

color:#ffffff;

font-size:18px;

font-weight:600;

transition:all .35s ease;

}
/* Hero WhatsApp Button */

.btn-whatsapp{

display:inline-flex;

align-items:center;

justify-content:center;

min-width:240px;

padding:18px 38px;

border-radius:50px;

background:#25D366;

color:#ffffff;

font-size:18px;

font-weight:700;

text-decoration:none;

box-shadow:0 15px 35px rgba(37,211,102,.35);

transition:all .35s ease;

}

.btn-whatsapp:hover{

background:#1EBE5D;

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(37,211,102,.45);

color:#ffffff;

}
.btn-secondary:hover{

background:#ffffff;

color:#4F46E5;

border-color:#ffffff;

transform:translateY(-4px);

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

}

.hero-cards{

    display:flex;

    gap:20px;

}

.hero-card{

    flex:1;

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

    backdrop-filter:blur(18px);

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

    border-radius:20px;

    padding:25px;

    transition:all .35s ease;

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

}

.hero-card:hover{

    transform:translateY(-8px);

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

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

}

.hero-card strong{

    display:block;

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

    color:#ffffff;

}

.hero-card span{

    color:#E5E7EB;

    font-size:16px;

    line-height:1.6;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-right img{

    width:100%;

    max-width:620px;

    animation:floatImage 5s ease-in-out infinite;

    filter:drop-shadow(0 25px 45px rgba(0,0,0,.25));

}
@keyframes floatImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}
.hero-left{

    animation:fadeUp .8s ease;

}

.hero-right{

    animation:fadeIn 1.2s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

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

.hamburger{

    display:none;

}

@media(max-width:992px){

    /* Navbar */

    .nav-menu{
        display:none;
    }

    .btn-register{
        display:none;
    }

    .hamburger{
        display:flex;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
    }

    .hamburger span{
        width:28px;
        height:3px;
        background:#fff;
        border-radius:4px;
    }

    /* Hero */

    .hero-section{
        padding:120px 0 60px;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .hero-left{
        order:2;
    }

    .hero-right{
        order:1;
    }

    .hero-left h1{
        font-size:38px;
        line-height:1.25;
        margin-bottom:20px;
    }

    .hero-left p{
        font-size:18px;
        line-height:1.7;
        margin:0 auto 30px;
        max-width:100%;
        text-align:center;
    }

    .hero-features{
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:30px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-cards{
        flex-direction:column;
    }

    .hero-right img{
        max-width:420px;
        margin:auto;
    }

    .logo-content h2{
        font-size:24px;
    }

    .logo-content span{
        font-size:13px;
    }

}
@media(max-width:768px){

    .hero-section{
        padding:110px 0 50px;
    }

    .hero-left h1{
        font-size:32px;
        line-height:1.25;
    }

    .hero-left p{
        font-size:16px;
        line-height:1.7;
    }

    .hero-badge{
        font-size:14px;
        padding:10px 18px;
    }

    .btn-primary,
    .btn-whatsapp,
    .btn-secondary{
        width:100%;
        min-width:100%;
        padding:16px 20px;
        font-size:17px;
    }

    .hero-card{
        padding:20px;
    }

    .hero-card strong{
        font-size:20px;
    }

    .countdown{
        justify-content:center;
        flex-wrap:wrap;
    }

    .time-box{
        width:70px;
        height:70px;
    }

    .time-box span{
        font-size:28px;
    }

}
/* ==========================
   WHY SECTION
========================== */

.why-section{

    padding:100px 0;
    background:#f8f9ff;

}

.section-title{

    text-align:center;
    max-width:760px;
    margin:auto;

}

.section-badge{

    display:inline-block;

    padding:12px 24px;

    background:#EEF2FF;

    color:#4F46E5;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    margin-bottom:24px;

    box-shadow:0 10px 25px rgba(79,70,229,.12);

}

.section-title h2{

    font-size:48px;
    font-weight:800;
    color:#111827;
    margin-bottom:20px;

}

.section-title p{

    font-size:21px;

    color:#6B7280;

    line-height:1.9;

    max-width:720px;

    margin:0 auto;

}

.features-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;

}

.feature-card{

    background:#ffffff;

    padding:40px;

    border-radius:24px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

    border:1px solid #eef2ff;

    height:100%;

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 45px rgba(79,70,229,.18);

}

.feature-icon{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    border-radius:20px;

    margin-bottom:25px;

    background:linear-gradient(135deg,#4F46E5,#7C3AED);

    color:#ffffff;

    box-shadow:0 12px 30px rgba(79,70,229,.30);

    transition:all .35s ease;

}
.feature-card:hover .feature-icon{

    transform:rotate(-8deg) scale(1.08);

}

.feature-card h3{

    font-size:24px;
    margin-bottom:15px;
    color:#111827;

}

.feature-card p{

    color:#6b7280;
    line-height:1.8;

}

@media(max-width:992px){

.features-grid{

grid-template-columns:1fr;

}

.section-title h2{

    font-size:52px;

    font-weight:800;

    color:#111827;

    margin-bottom:20px;

    line-height:1.2;

    letter-spacing:-1px;

}
}
/*=============================
AGENDA
=============================*/

.agenda-section{

padding:100px 0;

background:#ffffff;

}

.agenda-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.agenda-card{

display:flex;

gap:25px;

padding:30px;

border-radius:20px;

background:#f8f9ff;

transition:.35s;

}

.agenda-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(79,70,229,.15);

}

.agenda-number{

width:65px;

height:65px;

background:#4f46e5;

color:white;

font-size:26px;

font-weight:700;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

}

.agenda-card h3{

font-size:24px;

margin-bottom:10px;

}

.agenda-card p{

color:#6b7280;

line-height:1.8;

}

.agenda-btn{

text-align:center;

margin-top:60px;

}

@media(max-width:992px){

.agenda-grid{

grid-template-columns:1fr;

}

}
/*============================
TRAINERS
=============================*/

.trainer-section{

padding:100px 0;

background:#f8f9ff;

}

.trainer-box{

margin-top:60px;

background:#fff;

padding:60px;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.trainer-content h3{

font-size:34px;

margin-bottom:40px;

text-align:center;

color:#111827;

}

.trainer-grid{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.trainer-item{

display:flex;

align-items:center;

gap:15px;

font-size:20px;

font-weight:600;

color:#374151;

}

.trainer-item i{

color:#4f46e5;

font-size:24px;

}

.mission-box{

background:#eef2ff;

padding:35px;

border-radius:20px;

text-align:center;

}

.mission-box h4{

font-size:30px;

margin-bottom:20px;

color:#4f46e5;

}

.mission-box p{

font-size:19px;

line-height:1.8;

color:#4b5563;

}

@media(max-width:992px){

.trainer-grid{

grid-template-columns:1fr;

}

.trainer-box{

padding:35px;

}

}
/*============================
TESTIMONIALS
=============================*/

.testimonial-section{

padding:100px 0;

background:white;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:#f8f9ff;

padding:35px;

border-radius:20px;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.testimonial-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(79,70,229,.15);

}

.stars{

font-size:24px;

color:#FFD700;

margin-bottom:20px;

}

.testimonial-card p{

font-size:18px;

line-height:1.8;

color:#4b5563;

margin-bottom:25px;

}

.testimonial-card h4{

font-size:22px;

margin-bottom:5px;

}

.testimonial-card span{

color:#6b7280;

}

.stats-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.stat-box{

background:#4f46e5;

color:white;

text-align:center;

padding:35px;

border-radius:20px;

}

.stat-box h2{

font-size:42px;

margin-bottom:10px;

}

.stat-box p{

font-size:18px;

}

@media(max-width:992px){

.testimonial-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

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

.faq-section{

padding:100px 0;

background:#f8f9ff;

}

.faq-container{

max-width:900px;

margin:60px auto 0;

}

.faq-item{

background:white;

border-radius:18px;

margin-bottom:20px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.faq-question{

width:100%;

padding:25px 30px;

background:white;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:21px;

font-weight:700;

}

.faq-question i{

color:#4f46e5;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.faq-answer p{

padding:0 30px 30px;

font-size:18px;

line-height:1.8;

color:#6b7280;

}
/*============================
FINAL CTA
=============================*/

.cta-section{

padding:100px 0;

background:linear-gradient(135deg,#312e81,#4f46e5,#2563eb);

}

.cta-box{

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

backdrop-filter:blur(15px);

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

border-radius:30px;

padding:70px;

text-align:center;

color:white;

}

.cta-box h2{

font-size:54px;

margin:25px 0;

font-weight:800;

}

.cta-box p{

font-size:22px;

max-width:850px;

margin:auto;

line-height:1.8;

color:#f3f4f6;

}

.cta-details{

display:flex;

justify-content:center;

gap:30px;

margin:50px 0;

flex-wrap:wrap;

}

.cta-details div{

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

padding:25px 35px;

border-radius:18px;

min-width:220px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}


.cta-buttons .btn:hover{

transform:translateY(-5px);

background:#FFC107;

box-shadow:0 20px 45px rgba(255,213,74,.45);

}
.cta-buttons .btn{

display:inline-flex;

align-items:center;

justify-content:center;

min-width:240px;

padding:18px 36px;

border-radius:50px;

font-size:20px;

font-weight:700;

text-decoration:none;

background:#FFD54A;

color:#111827;

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

transition:all .35s ease;

}

.cta-buttons .btn:hover{

transform:translateY(-5px);

background:#FFC107;

box-shadow:0 20px 45px rgba(255,213,74,.45);

}

.btn-outline-white{

background:#25D366 !important;

border:2px solid #25D366;

color:#ffffff !important;

box-shadow:0 15px 35px rgba(37,211,102,.35);

}

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

.footer{

    background:#0f172a;

    color:#cbd5e1;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.footer-logo img{

    width:65px;

    height:65px;

    border-radius:10px;

}

.footer-logo h3{

    color:white;

    margin-bottom:5px;

    font-size:28px;

}

.footer-logo p{

    color:#94a3b8;

}

.footer-text{

    line-height:1.9;

    color:#cbd5e1;

}

.footer h4{

    color:white;

    margin-bottom:25px;

    font-size:22px;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:18px;

    line-height:1.8;

}

.footer-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#FFD54A;

}

.footer-links i{

    width:25px;

    color:#FFD54A;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-bottom:30px;

}

.social-icons a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#1e293b;

    color:white;

    font-size:20px;

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-5px);

}

.social-icons a:nth-child(1):hover{

    background:#1877F2;

}

.social-icons a:nth-child(2):hover{

    background:#E1306C;

}

.social-icons a:nth-child(3):hover{

    background:#FF0000;

}

.social-icons a:nth-child(4):hover{

    background:#0A66C2;

}

.footer-btn{

    display:inline-block;

    background:#FFD54A;

    color:#111827;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.footer-btn:hover{

    background:#FFC107;

    transform:translateY(-4px);

}

.footer hr{

    margin:60px 0 30px;

    border:none;

    border-top:1px solid #334155;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom a{

    color:#cbd5e1;

    text-decoration:none;

}

.footer-bottom a:hover{

    color:#FFD54A;

}

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.social-icons{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

}

}
/*==================================
Floating WhatsApp
==================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

display:flex;

align-items:center;

gap:12px;

padding:15px 22px;

background:#25D366;

color:#fff;

border-radius:60px;

text-decoration:none;

font-size:17px;

font-weight:600;

box-shadow:0 15px 35px rgba(37,211,102,.35);

z-index:9999;

transition:all .35s ease;

}

.floating-whatsapp i{

font-size:30px;

}

.floating-whatsapp:hover{

background:#1EBE5D;

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(37,211,102,.45);

color:#fff;

}
@media(max-width:768px){

.floating-whatsapp{

right:15px;

bottom:15px;

padding:14px 18px;

}

.floating-whatsapp span{

display:none;

}

.floating-whatsapp i{

font-size:34px;

}

}
/*==================================
COUNTDOWN TIMER
==================================*/

.countdown-box{

margin:10px 0 35px;

width:100%;

}

.countdown-title{

font-size:18px;

font-weight:600;

color:#ffffff;

margin-bottom:18px;

}

.countdown{

display:flex;

gap:15px;

margin-top:18px;

}

.time-box{

width:85px;

height:85px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

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

border-radius:18px;

backdrop-filter:blur(15px);

}

.time-box span{

font-size:34px;

font-weight:700;

color:#FFD54A;

line-height:1;

}

.time-box small{

margin-top:8px;

font-size:14px;

color:#ffffff;

}
/*==================================
MOBILE SLIDE MENU
==================================*/

.mobile-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:998;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

@media (max-width:992px){

    .nav-menu{
        position:fixed;
        top:0;
        right:-320px;

        width:300px;
        height:100vh;

        background:#1e1b4b;

        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;

        padding:100px 30px;

        gap:25px;

        transition:right .35s ease;

        z-index:999;
    }

    .nav-menu.active{
        right:0;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu a{
        display:block;
        width:100%;
        font-size:20px;
        color:#fff;
    }
}