.elementor-5170 .elementor-element.elementor-element-82002d0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5170 .elementor-element.elementor-element-91a44a0{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5170 .elementor-element.elementor-element-82002d0{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-91a44a0 *//*==================================================
        BASIC TRADING HERO SECTION
        Premium Dark UI
==================================================*/

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

body{
    font-family:"Poppins",sans-serif;
    background:#050816;
    color:#fff;
}

.basic-hero{
    position:relative;
    overflow:hidden;
    padding:120px 20px;
    background:
    radial-gradient(circle at top left,#193a8d25,transparent 35%),
    radial-gradient(circle at bottom right,#00d4ff15,transparent 35%),
    linear-gradient(135deg,#050816,#081222,#050816);
}

.container{
    width:100%;
    max-width:1250px;
    margin:auto;
    position:relative;
    z-index:5;
    text-align:center;
}

/*====================================
Background Glow
====================================*/

.hero-bg{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:linear-gradient(180deg,#2563eb30,#00c8ff15);
    filter:blur(120px);
    top:-250px;
    left:50%;
    transform:translateX(-50%);
    animation:glowMove 10s ease-in-out infinite alternate;
    z-index:0;
}

@keyframes glowMove{

    from{
        transform:translateX(-50%) scale(1);
    }

    to{
        transform:translateX(-50%) scale(1.15);
    }

}



/*====================================
Badge
====================================*/

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:50px;

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

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

    backdrop-filter:blur(20px);

    color:#64b5ff;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:30px;

    letter-spacing:.4px;

}

/*====================================
Heading
====================================*/

.course-label{

    color:#4da3ff;

    font-size:1rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:4px;

    margin-bottom:15px;

}

.hero-title{

    font-size:4.4rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:28px;

}

.hero-title span{

    background:linear-gradient(90deg,#00d4ff,#4f8cff,#7b61ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-description{

    max-width:850px;

    margin:auto;

    font-size:1.12rem;

    line-height:1.9;

    color:#bfc8d7;

}

/*====================================
Info Cards
====================================*/

.hero-info{

    margin-top:65px;

    display:grid;

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

    gap:25px;

}

.info-card{

    padding:32px 20px;

    border-radius:22px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.info-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,#4f8cff18,transparent,#00d4ff12);

    opacity:0;

    transition:.45s;

}

.info-card:hover{

    transform:translateY(-12px);

    border-color:#3d9fff;

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

}

.info-card:hover::before{

    opacity:1;

}

.info-card h5{

    color:#93a8c9;

    font-size:.92rem;

    margin-bottom:15px;

    font-weight:500;

}

.info-card span{

    display:block;

    font-size:1.5rem;

    font-weight:700;

    color:#fff;

}

/*====================================
Experience Box
====================================*/

.experience-box{

    margin:55px auto;

    display:inline-block;

    padding:18px 32px;

    border-radius:60px;

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

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

    color:#d7ddeb;

    font-size:1rem;

}

.experience-box strong{

    color:#4db6ff;

}

.hero-whatsapp{
    margin-top:18px;
    display:flex;
    justify-content:center;
}

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:auto;
    max-width:fit-content;

    padding:14px 28px;

    background:#25D366;
    color:#fff;

    text-decoration:none;
    border-radius:50px;

    font-weight:600;
    font-size:15px;

    transition:.3s;
}

.whatsapp-btn:hover{
    background:#1EBE5D;
    transform:translateY(-3px);
}


/*====================================
Buttons
====================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}

.hero-buttons a{

    text-decoration:none;

    transition:.4s;

    font-weight:600;

}

.btn-primary{

    padding:18px 42px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#00b7ff);

    color:#fff;

    box-shadow:0 18px 45px rgba(37,99,235,.35);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 55px rgba(0,183,255,.45);

}

.btn-secondary{

    padding:18px 42px;

    border-radius:14px;

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

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

    color:#fff;

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

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

    border-color:#4da3ff;

    transform:translateY(-6px);

}

/*====================================
Responsive
====================================*/

@media(max-width:1100px){

.hero-title{

font-size:3.5rem;

}

.hero-info{

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

}

}

@media(max-width:768px){

.basic-hero{

padding:90px 20px;

}

.hero-title{

font-size:2.7rem;

}

.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-info{

grid-template-columns:1fr;

gap:18px;

margin-top:45px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

}

.experience-box{

display:block;

}

}

@media(max-width:480px){

.hero-title{

font-size:2.2rem;

}

.course-label{

font-size:.85rem;

letter-spacing:2px;

}

.hero-badge{

font-size:.8rem;

padding:10px 18px;

}

.info-card{

padding:25px 18px;

}

.info-card span{

font-size:1.3rem;

}

.btn-primary,
.btn-secondary{

padding:16px 25px;

font-size:.95rem;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b86f49 *//*====================================================
            COURSE CURRICULUM
        Premium Vertical Accordion
=====================================================*/

.curriculum{
    position:relative;
    padding:120px 20px;
    background:
        radial-gradient(circle at top left,#1d4ed81a,transparent 35%),
        radial-gradient(circle at bottom right,#06b6d41a,transparent 35%),
        linear-gradient(180deg,#050816,#081221,#050816);
    overflow:hidden;
}

.curriculum .container{
    max-width:1200px;
    margin:auto;
}

/*==================================
Section Heading
==================================*/

.section-title{
    text-align:center;
    max-width:820px;
    margin:0 auto 70px;
}

.section-badge{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#4da3ff;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:22px;
}

.section-title h2{
    font-size:3rem;
    font-weight:800;
    color:#fff;
    margin-bottom:18px;
}

.section-title p{
    color:#aebcd2;
    font-size:1.05rem;
    line-height:1.8;
}

/*==================================
Vertical Layout
==================================*/

.curriculum-grid{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/*==================================
Module Card
==================================*/

.module-card{
    width:100%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    overflow:hidden;
    backdrop-filter:blur(18px);
    transition:.35s ease;
}

.module-card:hover{
    border-color:#3b82f6;
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(37,99,235,.18);
}

/*==================================
Summary
==================================*/

.module-card summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px 32px;
}

.module-card summary::-webkit-details-marker{
    display:none;
}

.module-left{
    display:flex;
    align-items:center;
    gap:22px;
    flex:1;
}

/*==================================
Number
==================================*/

.module-number{
    width:64px;
    height:64px;
    flex-shrink:0;

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

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#00c8ff);

    color:#fff;

    font-size:1.2rem;

    font-weight:700;

    box-shadow:0 12px 30px rgba(37,99,235,.35);
}

/*==================================
Content
==================================*/

.module-content{
    flex:1;
}

.module-content h3{
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:8px;
}

.module-content p{
    color:#9fb0c9;
    line-height:1.7;
    font-size:.96rem;
}

/*==================================
Plus Icon
==================================*/

.module-icon{
    width:44px;
    height:44px;

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

    border-radius:50%;

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

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

    color:#4da3ff;

    font-size:1.7rem;

    transition:.35s;

    flex-shrink:0;
}

.module-card[open] .module-icon{
    transform:rotate(45deg);
    background:#2563eb;
    color:#fff;
}

/*==================================
Lessons
==================================*/

.lesson-list{
    padding:0 32px 30px 118px;
    display:grid;
    gap:15px;
}

.lesson-list li{
    list-style:none;
    position:relative;

    color:#d7e2f2;

    font-size:.97rem;

    line-height:1.7;

    padding-left:34px;

    transition:.25s;
}

.lesson-list li:hover{
    color:#fff;
    transform:translateX(5px);
}

.lesson-list li::before{

    content:"✓";

    position:absolute;

    left:0;
    top:2px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

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

    font-size:.72rem;

}

/*==================================
Animation
==================================*/

.module-card[open]{
    animation:fadeDown .3s ease;
}

@keyframes fadeDown{

from{
opacity:.5;
transform:translateY(-8px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/*==================================
Scrollbar
==================================*/

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:20px;
}

/*==================================
Responsive
==================================*/

@media(max-width:768px){

.curriculum{
padding:90px 20px;
}

.section-title{
margin-bottom:50px;
}

.section-title h2{
font-size:2rem;
}

.section-title p{
font-size:.95rem;
}

.module-card summary{
padding:22px;
align-items:flex-start;
}

.module-left{
gap:16px;
}

.module-number{
width:54px;
height:54px;
font-size:1rem;
border-radius:14px;
}

.module-content h3{
font-size:1.05rem;
}

.module-content p{
font-size:.88rem;
}

.module-icon{
width:38px;
height:38px;
font-size:1.4rem;
}

.lesson-list{
padding:0 22px 22px 22px;
}

.lesson-list li{
padding-left:30px;
font-size:.92rem;
}

}

@media(max-width:480px){

.section-title h2{
font-size:1.7rem;
}

.section-badge{
font-size:.8rem;
padding:8px 18px;
}

.module-card summary{
flex-direction:column;
align-items:flex-start;
}

.module-left{
width:100%;
}

.module-icon{
align-self:flex-end;
}

.module-number{
width:50px;
height:50px;
}

.lesson-list{
padding:0 18px 18px;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-91cb5d6 *//*====================================================
            COURSE OVERVIEW SECTION
            PART 01
        Layout • Cards • Heading
=====================================================*/

.course-overview{
    position:relative;
    padding:120px 20px;
    overflow:hidden;
    background:
    radial-gradient(circle at top left,#1d4ed81a,transparent 35%),
    radial-gradient(circle at bottom right,#06b6d41a,transparent 35%),
    linear-gradient(180deg,#050816,#081221,#050816);
}

.course-overview .container{
    max-width:1250px;
    margin:auto;
    position:relative;
    z-index:2;
}

/*==========================
Section Heading
==========================*/

.section-title{
    max-width:850px;
    margin:0 auto 70px;
    text-align:center;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 24px;
    margin-bottom:22px;
    border-radius:50px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#4da3ff;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.5px;
}

.section-title h2{
    color:#fff;
    font-size:3rem;
    line-height:1.2;
    font-weight:800;
    margin-bottom:22px;
}

.section-title p{
    color:#b8c4d9;
    font-size:1.05rem;
    line-height:1.9;
}

/*==========================
Overview Grid
==========================*/

.overview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:70px;
}

/*==========================
Overview Cards
==========================*/

.overview-card{

    position:relative;

    overflow:hidden;

    padding:38px 32px;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.overview-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(135deg,
    rgba(37,99,235,.15),
    transparent 55%,
    rgba(0,212,255,.08));

    opacity:0;

    transition:.4s;

}

.overview-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 25px 60px rgba(37,99,235,.20);

}

.overview-card:hover::before{

    opacity:1;

}

/*==========================
Card Icon
==========================*/

.card-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    margin-bottom:28px;

    font-size:2rem;

    background:
    linear-gradient(135deg,#2563eb,#00b7ff);

    box-shadow:
    0 15px 35px rgba(37,99,235,.30);

    transition:.35s;

}

.overview-card:hover .card-icon{

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

}

/*==========================
Card Content
==========================*/

.overview-card h3{

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:16px;

}

.overview-card p{

    color:#aebbd1;

    font-size:.97rem;

    line-height:1.8;

}

/*==========================
Glass Glow
==========================*/

.overview-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:#2563eb18;

    border-radius:50%;

    filter:blur(70px);

    top:-90px;

    right:-90px;

}

/*==========================
Smooth Animation
==========================*/

.overview-card{

    animation:cardFade .6s ease both;

}

@keyframes cardFade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================
Responsive
==========================*/

@media(max-width:1100px){

.overview-grid{

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

}

.section-title h2{

font-size:2.5rem;

}

}

@media(max-width:768px){

.course-overview{

padding:90px 20px;

}

.overview-grid{

grid-template-columns:1fr;

gap:22px;

}

.section-title{

margin-bottom:55px;

}

.section-title h2{

font-size:2rem;

}

.section-title p{

font-size:.95rem;

}

.overview-card{

padding:30px 25px;

}

.card-icon{

width:64px;

height:64px;

font-size:1.8rem;

}

.overview-card h3{

font-size:1.2rem;

}

}

@media(max-width:480px){

.section-title h2{

font-size:1.7rem;

}

.section-badge{

font-size:.8rem;

padding:9px 18px;

}

.overview-card{

padding:25px 20px;

}

.card-icon{

width:58px;

height:58px;

font-size:1.6rem;

}

}

/*====================================================
        COURSE OVERVIEW SECTION
        PART 02
Learning Outcomes • CTA • Pricing • Buttons
=====================================================*/

/*==================================
Learning Box
==================================*/

.learning-box{

    margin-top:100px;

    padding:70px 55px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    position:relative;

    overflow:hidden;

}

.learning-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:#2563eb15;

    filter:blur(120px);

    top:-150px;

    right:-120px;

}

/*==================================
Learning Header
==================================*/

.learning-header{

    text-align:center;

    max-width:780px;

    margin:0 auto 60px;

}

.learning-header span{

    display:inline-block;

    color:#4da3ff;

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.6px;

    margin-bottom:18px;

}

.learning-header h2{

    color:#fff;

    font-size:2.6rem;

    font-weight:800;

    margin-bottom:18px;

}

.learning-header p{

    color:#b7c4d9;

    line-height:1.8;

}

/*==================================
Learning Grid
==================================*/

.learning-grid{

    display:grid;

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

    gap:20px;

}

.learning-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

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

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

    border-radius:16px;

    color:#dbe7f6;

    font-weight:500;

    transition:.35s;

}

.learning-item:hover{

    transform:translateX(6px);

    border-color:#3b82f6;

    background:rgba(37,99,235,.12);

}

.learning-item::before{

    content:"✓";

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#00c8ff);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    flex-shrink:0;

}

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

.course-cta{

    margin-top:90px;

    text-align:center;

    padding:70px 50px;

    border-radius:30px;

    background:linear-gradient(180deg,rgba(37,99,235,.12),rgba(255,255,255,.03));

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

    backdrop-filter:blur(20px);

}

.course-cta h3{

    color:#fff;

    font-size:2rem;

    font-weight:800;

    margin:30px 0 20px;

}

.course-cta p{

    max-width:760px;

    margin:0 auto;

    color:#b8c6da;

    line-height:1.8;

}

/*==================================
Price Box
==================================*/

.price-box{

    display:inline-block;

    padding:28px 60px;

    border-radius:22px;

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

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

}

.price-label{

    display:block;

    color:#4da3ff;

    font-weight:600;

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.price-box h2{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    margin-bottom:10px;

}

.price-box p{

    color:#9fb2cd;

    font-size:.95rem;

}

/*==================================
Buttons
==================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.cta-buttons a{

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.cta-buttons .btn-primary{

    padding:18px 40px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#00c8ff);

    color:#fff;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.cta-buttons .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 55px rgba(37,99,235,.45);

}

.cta-buttons .btn-secondary{

    padding:18px 40px;

    border-radius:14px;

    color:#fff;

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

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

}

.cta-buttons .btn-secondary:hover{

    border-color:#3b82f6;

    transform:translateY(-5px);

}

/*==================================
Risk Note
==================================*/

.risk-note{

    margin-top:45px;

    padding:22px 28px;

    border-radius:18px;

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

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

    color:#aebdd3;

    line-height:1.8;

    font-size:.95rem;

}

.risk-note strong{

    color:#ffb84d;

}

/*==================================
Responsive
==================================*/

@media(max-width:992px){

.learning-grid{

grid-template-columns:1fr;

}

.price-box h2{

font-size:3.2rem;

}

}

@media(max-width:768px){

.learning-box{

padding:50px 25px;

margin-top:70px;

}

.learning-header h2{

font-size:2rem;

}

.course-cta{

padding:50px 25px;

}

.course-cta h3{

font-size:1.6rem;

}

.price-box{

padding:24px 30px;

}

.price-box h2{

font-size:2.8rem;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons a{

width:100%;

text-align:center;

}

}

@media(max-width:480px){

.learning-header h2{

font-size:1.7rem;

}

.learning-item{

padding:15px 18px;

font-size:.9rem;

}

.price-box{

width:100%;

}

.price-box h2{

font-size:2.4rem;

}

.course-cta h3{

font-size:1.4rem;

}

.risk-note{

font-size:.9rem;

}

}/* End custom CSS */