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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#081221;
    color:#fff;
    overflow-x:hidden;
    line-height:1.6;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/*==========================
    VARIÁVEIS
===========================*/

:root{

    --primary:#0A84FF;
    --secondary:#00C2FF;
    --dark:#081221;
    --dark2:#0d1730;
    --card:#122340;
    --yellow:#FDB515;
    --text:#ffffff;
    --text2:#BFC9D4;

    --radius:18px;

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

}

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

.container{

    width:min(1320px, 92%);
    margin:auto;

}

/*==========================
    HEADER
===========================*/

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    backdrop-filter:blur(14px);

    background:rgba(8,18,33,.75);

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

}

.header .container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==========================
    LOGO
===========================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img {
    width: 100%;
    max-width: 265px;
}

.logo-icon{

    width:48px;
    height:48px;

    border-radius:12px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:bold;

    box-shadow:0 0 30px rgba(0,132,255,.4);

}

.logo-text{

    font-size:24px;
    font-weight:700;

}

.logo-text span{

    color:var(--yellow);

}

.logo-footer {
    width: 100%;
    max-width: 250px;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 15px;
}

/*==========================
    MENU
===========================*/

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:#fff;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:var(--secondary);

}

/*==========================
    BOTÃO HEADER
===========================*/

.btn-header{

    padding:14px 28px;

    border-radius:40px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    font-weight:600;

    transition:.35s;

}

.btn-header:hover{

    transform:translateY(-3px);

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

}

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

.hero{

    padding-top:160px;

    padding-bottom:120px;

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    /*width:550px;*/

    height:550px;

    background:var(--primary);

    filter:blur(180px);

    opacity:.18;

    right:-150px;

    top:-100px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/*==========================
    BADGE
===========================*/

.badge{

    display:inline-flex;

    padding:12px 22px;

    background:rgba(0,132,255,.15);

    border:1px solid rgba(0,194,255,.35);

    border-radius:30px;

    margin-bottom:25px;

    color:#8EDCFF;

    font-size:14px;

}

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

.hero h1{

    font-size:62px;

    line-height:1.15;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--secondary);

}

/*==========================
    TEXTO
===========================*/

.hero p{

    font-size:20px;

    color:var(--text2);

    margin-bottom:40px;

}

/*==========================
    BOTÕES
===========================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:60px;

}

.btn-primary{

    background:#0A66C2;

    padding:18px 34px;

    border-radius: 10px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(0,132,255,.35);

}

.btn-outline{

    padding:18px 34px;

    border-radius:45px;

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

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#081221;

}

/*==========================
    ESTATÍSTICAS
===========================*/

.hero-numbers{

    display:grid;

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

    gap:25px;

}

.hero-numbers div{

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

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

    border-radius:18px;

    /*padding:25px;*/

    text-align:center;

}

.hero-numbers img {
    border-radius: 18px;
}

.hero-numbers h3{

    color:var(--secondary);

    font-size:34px;

}

.hero-numbers span{

    color:#BFC9D4;

}

/*==========================
    CODE WINDOW
===========================*/

.code-window{

    background:#0b1830;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

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

}

.window-header{

    display:flex;

    gap:10px;

    padding:18px;

    background:#142544;

}

.window-header span{

    width:14px;

    height:14px;

    border-radius:50%;

}

.red{background:#ff5f56;}
.yellow{background:#ffbd2f;}
.green{background:#27c93f;}

.code-window pre{

    padding:35px;

    color:#7FFFD4;

    font-size:16px;

    line-height:2;

    overflow:auto;

}

/*==========================
    SEÇÕES
===========================*/

section{

    padding:100px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:46px;

    margin-bottom:18px;

}

.section-title p{

    color:#BFC9D4;

    font-size:18px;

}

/*==========================
    ÁREAS
===========================*/

.areas-grid{

    display:grid;

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

    gap:30px;

}

.area-card{

    background:linear-gradient(180deg,#132544,#0d1932);

    border-radius:22px;

    padding:40px;

    transition:.35s;

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

}

.area-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,194,255,.35);

    box-shadow:0 25px 45px rgba(0,132,255,.18);

}

.area-card .icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:25px;

}

.area-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.area-card p{

    color:#BFC9D4;

}

/*==========================
    FOOTER (base)
===========================*/

footer{

    background:#060d18;

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

    padding:60px 0;

    text-align:center;

    color:#9AA8B7;

}

/*==========================
    RESPONSIVIDADE
===========================*/

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-numbers{

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

}

.areas-grid{

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

}

}

@media(max-width:768px){

.header .container{

height:75px;

}

nav{

display:none;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.hero-numbers{

grid-template-columns:1fr;

}

.areas-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.btn-header{

display:none;

}

}

@media(max-width:480px){

.hero{

padding-top:130px;

}

.badge{

font-size:12px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.code-window pre{

font-size:13px;

padding:20px;

}

}


/*====================================================
            CURSOS EM DESTAQUE
====================================================*/

.courses{
    background:#0b162b;
    position:relative;
}

.section-badge{

    display:inline-block;
    padding:8px 18px;

    border-radius:30px;

    background:rgba(0,132,255,.15);

    color:#66d4ff;

    border:1px solid rgba(0,194,255,.25);

    margin-bottom:20px;

    font-size:.9rem;

    font-weight:600;

}

.courses-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:35px;

    margin-top:60px;

}

.course-card{

    /*background:#122340;*/
    background: rgba(255,255,255,.04);

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

    display:flex;

    flex-direction:column;

}

.course-card:hover{

    transform:translateY(-10px);

    border-color:#00C2FF;

    box-shadow:0 20px 50px rgba(0,132,255,.18);

}

.course-image{
    height:220px;
    overflow:hidden;
    padding: 10px;

}

.course-image img{
    width:100%;
    height:100%;
    object-fit:fill;
    transition:.5s;
    border-radius: 8px;

}

.course-card:hover img{

    transform:scale(1.08);

}

.course-content{

    padding:30px;

    flex:1;

    display:flex;

    flex-direction:column;

}

.course-category{

    color:#00C2FF;

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:15px;

}

.course-content h3{

    font-size:1.55rem;

    margin-bottom:15px;

}

.course-content p{

    color:#bfc9d4;

    margin-bottom:20px;

}

.course-content ul{

    margin-bottom:30px;

}

.course-content li{

    color:#d8dde4;

    margin-bottom:10px;

}

.btn-course{

    margin-top:auto;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px;

    border-radius:10px;

    background:#0A66C2;

    font-weight:600;

    transition:.35s;

}

.btn-course:hover{

    transform:translateY(-3px);

}

.section-button{

    margin-top:60px;

    text-align:center;

}

/*====================================================
            TRILHAS
====================================================*/

.learning-paths{

    background:#081221;

}

.paths-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.path-card{

    background:linear-gradient(180deg,#132544,#0e1d38);

    padding:40px;

    border-radius:20px;

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.path-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:linear-gradient(#0A84FF,#00C2FF);

}

.path-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,132,255,.18);

}

.path-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    border-radius:18px;

    background:linear-gradient(135deg,#0A84FF,#00C2FF);

    margin-bottom:30px;

}

.path-card h3{

    margin-bottom:25px;

    font-size:1.5rem;

}

.path-card ul{

    margin-bottom:30px;

}

.path-card li{

    padding:12px 0;

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

    color:#cfd6df;

}

.path-card a{

    display:inline-flex;

    margin-top:15px;

    color:#00C2FF;

    font-weight:600;

}

.path-card a:hover{

    color:#fff;

}

/*====================================================
            DIFERENCIAIS
====================================================*/

.features{

    background:#081221;

}

.features-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:18px;

}

.feature-item{

    text-align:center;

    padding:45px 30px;

    border-radius:18px;

    background:linear-gradient(180deg,#132544,#0d1932);

    transition:.35s;

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

}

.feature-item:hover{

    transform:translateY(-8px);

    border-color:#00C2FF;

    box-shadow:0 20px 45px rgba(0,132,255,.15);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    /*background:linear-gradient(135deg,#0A84FF,#00C2FF);*/

    border: 1px solid;

    margin-bottom:25px;

}

.feature-item h3{

    font-size:1.35rem;

    margin-bottom:15px;

}

.feature-item p{

    color:#bfc9d4;

    line-height:1.8;

}

/*====================================================
            ANIMAÇÕES
====================================================*/

.course-card,
.path-card,
.feature-item{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s forwards;

}

.course-card:nth-child(2),
.path-card:nth-child(2),
.feature-item:nth-child(2){

    animation-delay:.15s;

}

.course-card:nth-child(3),
.path-card:nth-child(3),
.feature-item:nth-child(3){

    animation-delay:.3s;

}

.feature-item:nth-child(4){

    animation-delay:.45s;

}

.feature-item:nth-child(5){

    animation-delay:.6s;

}

.feature-item:nth-child(6){

    animation-delay:.75s;

}

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*====================================================
            RESPONSIVO
====================================================*/

@media(max-width:992px){

    .courses-grid,
    .paths-grid,
    .features-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .course-content{

        padding:25px;

    }

    .path-card{

        padding:30px;

    }

    .feature-item{

        padding:35px 25px;

    }

    .course-content h3{

        font-size:1.35rem;

    }

    .feature-item h3{
        margin-top:15px;
    }

}



/*====================================================
                ESTATÍSTICAS
====================================================*/

.stats{

    background:linear-gradient(135deg,#0B132B,#101E3C);

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-card{

    background:#132544;

    padding:45px 30px;

    border-radius:20px;

    text-align:center;

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

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#00C2FF;

    box-shadow:0 20px 40px rgba(0,132,255,.18);

}

.stat-card h2{

    font-size:3rem;

    color:#00C2FF;

    margin-bottom:15px;

}

.stat-card span{

    color:#bfc9d4;

    font-size:1rem;

}

/*====================================================
                PROFESSORES
====================================================*/

.teachers{

    background:#081221;

}

.teachers-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}

.teacher-card{

    background:#122340;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

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

    transition:.35s;

}

.teacher-card:hover{

    transform:translateY(-10px);

    border-color:#00C2FF;

}

.teacher-card img{

    width:100%;

    height:330px;

    object-fit:cover;

}

.teacher-card h3{

    margin-top:25px;

    font-size:1.5rem;

}

.teacher-card span{

    display:block;

    color:#00C2FF;

    margin:12px 0;

    font-weight:600;

}

.teacher-card p{

    padding:0 30px 35px;

    color:#c7d0da;

}

/*====================================================
                DEPOIMENTOS
====================================================*/

.testimonials{

    background:#0E1A33;

}

.testimonials-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:35px;

    margin-top:60px;

}

.testimonial-card{

    background:linear-gradient(180deg,#132544,#0d1932);

    padding:40px;

    border-radius:20px;

    border-left:5px solid #00C2FF;

}

.testimonial-card p{

    font-style:italic;

    color:#d8dee6;

    line-height:1.9;

    margin-bottom:30px;

}

.testimonial-card h4{

    font-size:1.2rem;

    margin-bottom:6px;

}

.testimonial-card span{

    color:#00C2FF;

}

/*====================================================
                    BLOG
====================================================*/

.blog{

    background:#081221;

}

.blog-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:35px;

    margin-top:60px;

}

.blog-card{

    background:#132544;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.blog-card:hover{

    transform:translateY(-8px);

}

.blog-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.blog-content{

    padding:30px;

}

.blog-content span{

    color:#00C2FF;

    text-transform:uppercase;

    font-size:.85rem;

    font-weight:600;

}

.blog-content h3{

    margin:18px 0;

    font-size:1.45rem;

}

.blog-content p{

    color:#c7d0da;

    margin-bottom:25px;

}

.blog-content a{

    color:#00C2FF;

    font-weight:600;

}

.blog-content a:hover{

    color:#fff;

}

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

.cta{
    background:radial-gradient(circle at 20% 20%, rgba(10,102,194,.25), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(0,255,200,.12), transparent 45%),
        linear-gradient(180deg, #061826 0%, #050F18 100%);
    text-align:center;
}

.cta-content{

    max-width:820px;

    margin:auto;

}

.cta h2{

    font-size:3rem;

    margin-bottom:25px;

}

.cta p{

    font-size:1.2rem;

    margin-bottom:45px;

    color:#f8f8f8;

}

.cta .btn-primary{

    background:#0A66C2;

    color:#fff;

}

.cta .btn-primary:hover{

    background:#122340;

}

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

footer{

    background:linear-gradient(180deg,#132544,#0d1932);

    padding:80px 0 25px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

}

.footer-grid h3{

    margin-bottom:20px;

    font-size:2rem;

}

.footer-grid h4{

    margin-bottom:20px;

    color:#fff;

}

.footer-grid p{

    color:#bfc9d4;

    line-height:1.9;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:15px;

}

.footer-grid a{

    color:#bfc9d4;

    transition:.3s;

}

.footer-grid a:hover{

    color:#f1f2f3;

}

.social-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
    justify-content: center;
}

.social-links a{

    padding:10px 18px;

    border-radius:8px;

    background:#132544;

    transition:.3s;

}

.social-links a:hover{

    background:#0A84FF;

}

.footer-bottom{

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

    margin-top:60px;

    padding-top:25px;

    text-align:center;

}

.footer-bottom p{

    color:#8fa3b8;

}

/*====================================================
            RESPONSIVIDADE
====================================================*/

@media(max-width:1200px){

.footer-grid{

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

}

.stats-grid{

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

}

}

@media(max-width:992px){

.teachers-grid,
.blog-grid,
.testimonials-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-links{

justify-content:center;

}

.cta h2{

font-size:2.2rem;

}

.cta p{

font-size:1rem;

}

.teacher-card img{

height:260px;

}

}

@media(max-width:480px){

.stat-card h2{

font-size:2.3rem;

}

.teacher-card h3{

font-size:1.3rem;

}

.blog-content{

padding:22px;

}

.cta{

padding:70px 0;

}

}


 /*====================================
    LINKEDIN
=====================================*/

.linkedin-section{

    background:#071423;

    padding:100px 20px;
}

.linkedin-section .container{

    max-width:1320px !important;
    margin:auto;
}

.section-header{

    text-align:center;
    margin-bottom:60px;
}

.section-badge{

    display:inline-block;

    background:#0A66C2;

    color:#FFF;

    padding:10px 22px;

    border-radius:40px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;
}

.section-header h2{

    color:#FFF;

    font-size:3rem;

    margin-bottom:20px;
}

.section-header p{

    color:#AFC2D4;

    max-width:700px;

    margin:auto;

    font-size:1.1rem;

    line-height:1.8;
}

.linkedin-grid{

    display:grid;

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

    gap:15px;
}

.linkedin-card{

    background:#132843;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;
    
}

.linkedin-card:hover{

    transform:translateY(-8px);
}

.linkedin-card-header{

    background:#0A66C2;

    color:#FFF;

    padding:18px 25px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    position: relative;
    top: 5px;
}

.linkedin-post{

    padding:15px;

    background:#FFF;
}

.linkedin-post iframe{

    width:100%;

    height:590px;

    border:none;

    border-radius:10px;
}

.linkedin-footer{
    margin-top:60px;
    text-align:center;
}

.linkedin-button{

    display:inline-block;

    background:#0A66C2;

    color:#FFF;

    text-decoration:none;

    padding:18px 40px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;
}

.linkedin-button:hover{

    background:#004182;

    transform:translateY(-3px);
}

/*=========================================
    PLATAFORMA
==========================================*/

.platform-section{

    padding:100px 20px;
    background:#081420;
    color:#FFF;
}

.platform-section .container{

    max-width:1200px;
    margin:auto;
}

.section-header{

    text-align:center;
    margin-bottom:70px;
}

.section-badge{

    display:inline-block;
    background:#0E7490;
    color:#FFF;
    padding:8px 20px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:18px;
}

.section-header h2{

    font-size:2.6rem;
    margin-bottom:18px;
    line-height:1.2;
}

.section-header p{

    max-width:720px;
    margin:auto;
    color:#C8D3DD;
    font-size:1.1rem;
    line-height:1.8;
}

.platform-content{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;
}

.feature{

    display:flex;
    gap:20px;
    margin-bottom:35px;
}

.feature-icon{

    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    /*background:#0EA5E9;*/

    font-size:1.8rem;

    flex-shrink:0;
}

.feature h3{

    margin-bottom:8px;
    font-size:1.25rem;
}

.feature p{

    color:#BFC9D4;
    line-height:1.7;
}

.btn-platform{

    display:inline-block;

    margin-top:20px;

    padding:16px 34px;

    background:linear-gradient(135deg,#0A84FF,#00C2FF);

    color:#FFF;

    text-decoration:none;

    border-radius: 10px;

    font-weight:bold;

    transition:.3s;
}

.btn-platform:hover{

    background:#0891B2;

    transform:translateY(-3px);
}

.platform-images{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.desktop-image img{

    width:100%;
    max-width:760px;

    border-radius:18px;

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

.mobile-image{

    position:absolute;

    right:-20px;
    bottom:-10px;
}

.mobile-image img{

    width:230px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.55);
}

/*=====================================
    RESPONSIVO
======================================*/

@media(max-width:992px){

.platform-content{

    grid-template-columns:1fr;
}

.platform-info{

    order:2;
}

.platform-images{

    order:1;
}

.mobile-image{

    position:absolute;

    width:170px;

    right:0;

    bottom:-25px;
}

.mobile-image img{

    width:170px;
}

.section-header h2{

    font-size:2rem;
}

}

@media(max-width:768px){

.platform-section{

    padding:70px 20px;
}

.desktop-image img{

    width:100%;
}

.mobile-image{

    position:relative;

    right:auto;

    bottom:auto;

    margin-top:-40px;

    text-align:center;
}

.mobile-image img{

    width:170px;
}

.feature{

    flex-direction:column;
    text-align:center;
}

.feature-icon{

    margin:auto;
}

.btn-platform{

    width:100%;
    text-align:center;
}

}


/*==============================
        RESPONSIVO
===============================*/

@media(max-width:1200px){

.linkedin-grid{

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

}

@media(max-width:768px){

.linkedin-grid{

    grid-template-columns:1fr;
}

.section-header h2{

    font-size:2.2rem;
}

.linkedin-post iframe{

    height:650px;
}

}


 .video-card{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:16px;

}

.video-card img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:16px;

}

/* Camada sobre a imagem */

.video-overlay{

    opacity: .8;
    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        rgba(0,0,0,.20),
        rgba(0,0,0,.55)
    );

    transition:.35s;

}

.video-card:hover .video-overlay{

    background:linear-gradient(
        rgba(0,0,0,.10),
        rgba(0,0,0,.70)
    );

}

.video-overlay h3{

    color:#fff;

    font-size:2rem;

    font-weight:700;

    text-shadow:0 4px 15px rgba(0,0,0,.9);

    margin:0;

    text-align:center;

}



/*=========================================
        BADGE - TURMAS ENCERRADAS
=========================================*/

.course-card{

    position:relative;

}

.course-image{

    position:relative;

    overflow:hidden;

}

.course-badge{

    position:absolute;

    top:18px;

    left:18px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:linear-gradient(135deg,#dc3545,#b71c1c);

    color:#fff;

    border-radius:30px;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    box-shadow:0 10px 25px rgba(220,53,69,.35);

    z-index:20;

}

.course-badge i{

    font-size:.9rem;

}

/* Escurece a imagem */

.course-card.closed .course-image img{

    filter:brightness(.55);

}

/* Botão desabilitado */

.course-card.closed .btn-course{

    background:#5f6772;

    color:#d9d9d9;

    cursor:not-allowed;

    pointer-events:none;

    opacity:.8;

}

.course-card.closed .btn-course:hover{

    transform:none;

    box-shadow:none;

}

/* Opcional: efeito ao passar o mouse */

.course-card.closed:hover .course-badge{

    transform:scale(1.05);

    transition:.3s;

}





        /* Botão WhatsApp Flutuante */
         .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            z-index: 9999;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 30px rgba(0,0,0,0.4);
        }

        .whatsapp-icon {
            width: 30px;
            height: 30px;
        }

        /* ajuste mobile */
        @media (max-width: 768px) {
            .whatsapp-float {
                width: 55px;
                height: 55px;
                bottom: 15px;
                right: 15px;
            }
        }

        /* Botão Participe da Comunidade do WhatsApp */
        .btn-community {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            margin-top: 18px;
            padding: 16px 28px;

            background: linear-gradient(135deg, #25D366, #1faa52);
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;

            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08);

            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.22);
            transition: all 0.3s ease;
        }

        .btn-community:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
        }

        .community-icon {
            font-size: 1.2rem;
        }


/* ===== BOTÃO HAMBURGUER ===== */
        .menu-toggle {
            display: none;
            font-size: 28px;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
        }

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

            .menu-toggle {
                display: block;
                border-radius: 50px;
                background-color: #ddd;
                color: #111;
                font-size: 17px;
                padding: 2px;
                width: 38px;
                height: 38px;
                border: 3px solid #0A66C2;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 70px;
                right: 20px;
                background: #0A66C2;
                padding: 15px;
                border-radius: 2px;
                width: 200px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            }

            .nav-links.active {
                display: flex;
                border-radius: 6px;
            }
        }


        /* ==========================================================================
           4. DIRETRIZES DE RESPONSIVIDADE (MOBILE BREAKPOINTS)
        ========================================================================== */
        @media (max-width: 968px) {
            .hero .container, .checkout-box {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .hero {
                padding: 40px 0;
                text-align: center;
            }

            .hero-title {
                font-size: 32px;
            }

            .hero-cta-box {
                justify-content: center;
            }

            .nav-links {
                display: none; /* Simplificado para Mobile omitindo menu complexo */
            }
        }

        @media (max-width: 480px) {

            .platform-info {
                text-align: center;
            }

            .checkout-box {
                padding: 24px;
            }
            .price-tag {
                font-size: 40px;
            }
            .footer .container {
                flex-direction: column;
                text-align: center;
            }

            .logo {
                font-size: 16px;
                /*margin: 0 auto;*/
            }

            .logo-icon {
                display: none;
            }

            .btn {
                width: 100%;
            }

            .hero-content {
                margin-top: 50px;
            }

            .hero-numbers div {
                width: 100%;
    /*max-width: 250px;*/
    height: 100%;
    max-height: 110px;
            }

            .hero .container, .checkout-box {
                gap: 10px;
                margin: 0 auto;
            }

            .video-card {                
                margin: 0 auto;
                margin-top: 20px;
            }

            /*section {
                padding: 0px;
            }*/

            .course-card {
                background: #122340;
            }
        }