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

body{

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

background:#061321;

color:#fff;

}

a{
text-decoration:none;
}

.custom-navbar{

background:#071624;

padding:10px 0;

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

}

.logo{

height:55px;

}

.navbar-nav .nav-link{

color:#c8d3dc;

margin:0 12px;

font-size:15px;

transition:.3s;

}

.nav-link:hover,
.nav-link.active{

color:#10d2ff;

}

.btn-login{

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

color:white;

padding:10px 22px;

}

.btn-primary-custom{

background:#0fd3ff;

color:#051321;

padding:11px 30px;

font-weight:600;

border-radius:10px;

}

.btn-primary-custom:hover{

background:#08bde6;

}

.hero{

padding-top:160px;

padding-bottom:80px;
background: url('../images/bull.png');
background-size: contain;
background-position: right;
}

.subtitle{

color:#18d3ff;

font-weight:600;

margin-bottom:20px;

}

.hero h1{

font-size:65px;

font-weight:800;

line-height:1.1;

}

.hero h1 span{

color:#17d2ff;

}

.hero p{

margin:30px 0;

font-size:18px;

line-height:1.9;

color:#b8c2ca;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:35px;

}

.btn-outline-custom{

border:1px solid #18d3ff;

color:#18d3ff;

padding:11px 30px;

border-radius:10px;

}

.members{

display:flex;

align-items:center;

gap:20px;

}

.avatars img{

width:45px;

height:45px;

border-radius:50%;

margin-left:-10px;

border:3px solid #08141f;
object-fit: cover;

}

.hero-image{

width:100%;

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

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

.market-section{

padding:60px 0;

}

.market-header{

display:flex;

justify-content:space-between;

margin-bottom:25px;

}

.market-card-today{

background:#0b1c2c;

padding:20px;

border-radius:16px;

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

transition:.3s;

height:100%;

}

.market-card-today:hover{

transform:translateY(-8px);

border-color:#10d2ff;

}

.market-card-today h3{

font-size:30px;

margin:15px 0;

}

.green{

color:#00ff95;

}

.red{

color:#ff5656;

}

.yellow{

color:#ffd23f;

}

.chart{

height:60px;

margin-top:15px;

border-radius:8px;

}

.green-chart{

background:linear-gradient(to right,#00ff95,#004d35);

}

.red-chart{

background:linear-gradient(to right,#ff5656,#451212);

}

.yellow-chart{

background:linear-gradient(to right,#ffd23f,#665200);

}

.mood{

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

}

.gauge{

width:120px;

height:120px;

border-radius:50%;

border:10px solid #16d4ff;

display:flex;

justify-content:center;

align-items:center;

font-size:45px;

margin-bottom:15px;

}

@media(max-width:991px){

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.members{

justify-content:center;

margin-bottom:40px;

}

.hero h1{

font-size:45px;

}

}

/*==================================================
FEATURES
==================================================*/

.features-section{

    padding:45px 0 70px;

    background:#071522;

}

.feature-card{

    background:#0c1c2c;

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

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

    background:#11d9ff;

    transition:.4s;

}

.feature-card:hover::before{

    left:0;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#12d8ff;

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

}

.feature-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    margin:auto;

    margin-bottom:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px solid rgba(17,217,255,.4);

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

    transition:.35s;

}

.feature-card:hover .feature-icon{

    background:#10d8ff;

    color:#061320;

    transform:rotateY(180deg);

}

.feature-icon i{

    font-size:34px;

    color:#12d8ff;

    transition:.35s;

}

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

    color:#07131f;

}

.feature-card h5{

    color:#fff;

    font-size:18px;

    font-weight:600;

    margin-bottom:15px;

}

.feature-card p{

    color:#9baec0;

    font-size:14px;

    line-height:1.8;

    margin:0;

}

/*====================================
LATEST ANALYSIS
====================================*/

.analysis-section{

    background:#07131f;

    padding:90px 0;

}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.sub-heading{

    color:#18d5ff;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-title h2{

    color:#fff;

    margin-top:10px;

    font-size:40px;

    font-weight:700;

}

.btn-view-all{

    color:#18d5ff;

    text-decoration:none;

    font-weight:600;

}

.btn-view-all:hover{

    color:#fff;

}

.featured-analysis{

    position:relative;

    border-radius:20px;

    overflow:hidden;

    height:100%;

}

.featured-analysis img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
    object-position: left;


}

.featured-analysis:hover img{

    transform:scale(1.08);

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(5,15,25,.95),
    rgba(5,15,25,.15));

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:40px;

}

.badge-analysis{

    display:inline-block;

    width:max-content;

    padding:8px 18px;

    border-radius:30px;

    background:#15d5ff;

    color:#04121d;

    font-weight:600;

    margin-bottom:18px;

}

.overlay h3{

    color:white;

    font-size:34px;

    margin-bottom:20px;

}

.overlay p{

    color:#c4d1db;

    line-height:1.8;

}

.overlay a{

    color:#15d5ff;

    text-decoration:none;

    font-weight:600;

    margin-top:18px;

}

.analysis-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.analysis-card{

    display:flex;

    background:#0d1d2c;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

}

.analysis-card:hover{

    transform:translateY(-6px);

    border-color:#18d5ff;

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

}

.analysis-card img{

    width:180px;

    object-fit:cover;
    object-position: left;

}

.analysis-content{

    padding:25px;

}

.analysis-content h5{

    color:#fff;

    font-size:22px;

    margin:15px 0;

}

.analysis-content p{

    color:#9eb0be;

    line-height:1.7;

    margin-bottom:18px;

}

.analysis-content a{

    color:#15d5ff;

    text-decoration:none;

    font-weight:600;

}

.mini-badge{

    display:inline-block;

    background:#15d5ff;

    color:#04121d;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.green{

    background:#25d366;

    color:white;

}

.orange{

    background:#ff8c32;

    color:white;

}

/*=========================================
ECONOMIC CALENDAR
=========================================*/

.economic-calendar{

    background:#081521;

    padding:90px 0;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:45px;

}

.section-subtitle{

    color:#13d7ff;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-header h2{

    color:white;

    font-size:42px;

    margin:10px 0;

}

.section-header p{

    color:#93a8b8;

    max-width:650px;

}

.btn-calendar{

    padding:14px 28px;

    border:1px solid #12d8ff;

    color:#12d8ff;

    border-radius:10px;

    transition:.35s;

    text-decoration:none;

}

.btn-calendar:hover{

    background:#12d8ff;

    color:#081521;

}

.calendar-wrapper{

    background:#0d1c2b;

    border-radius:18px;

    overflow:hidden;

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

}

.calendar-head{

    display:grid;

    grid-template-columns:
    100px
    150px
    2fr
    120px
    120px
    120px
    120px;

    background:#102233;

    color:white;

    padding:18px 25px;

    font-weight:600;

}

.calendar-row{

    display:grid;

    grid-template-columns:
    100px
    150px
    2fr
    120px
    120px
    120px
    120px;

    padding:22px 25px;

    color:#b5c5d2;

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

    transition:.35s;

}

.calendar-row:hover{

    background:#132a40;

}

.impact{

    display:inline-block;

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.high{

    background:#ff4d4f;

    color:white;

}

.medium{

    background:#ffb300;

    color:#222;

}

.low{

    background:#2ecc71;

    color:white;

}

/*=====================================================
TOP PERFORMING SECTORS
======================================================*/

.sector-section{

    padding:90px 0;

    background:#07131f;

    position:relative;

    overflow:hidden;

}

.sector-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(16,216,255,.12),
    transparent 70%);

    top:-220px;

    right:-180px;

}

.btn-sector{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:14px 26px;

    border-radius:12px;

    background:transparent;

    border:1px solid #10d8ff;

    color:#10d8ff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-sector:hover{

    background:#10d8ff;

    color:#07131f;

}


/*-------------------------
Sector Card
--------------------------*/

.sector-card{

    background:#0c1d2d;

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

    border-radius:20px;

    padding:30px;

    height:100%;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.sector-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#10d8ff,#00ff95);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.sector-card:hover{

    transform:translateY(-10px);

    border-color:#10d8ff;

    box-shadow:0 18px 40px rgba(16,216,255,.15);

}

.sector-card:hover::before{

    transform:scaleX(1);

}


/*-------------------------
Header
--------------------------*/

.sector-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.sector-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#fff;

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

}

.sector-growth{

    font-size:20px;

    font-weight:700;

}


/*-------------------------
Texts
--------------------------*/

.sector-card h4{

    color:#fff;

    margin-bottom:12px;

    font-weight:600;

}

.sector-card p{

    color:#9fb2c2;

    line-height:1.8;

    font-size:15px;

    margin-bottom:25px;

}


/*-------------------------
Progress
--------------------------*/

.sector-progress{

    height:10px;

    background:#14283a;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

}

.sector-progress .progress-bar{

    border-radius:20px;

}


/*-------------------------
Stock List
--------------------------*/

.stock-list{

    list-style:none;

    margin:0;

    padding:0;

}

.stock-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

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

}

.stock-list li:last-child{

    border-bottom:none;

}

.stock-list span{

    color:#d7e3eb;

    font-weight:500;

}

.stock-list strong{

    font-size:15px;

}


/*-------------------------
Statistics Cards
--------------------------*/

.mini-sector-card{

    background:#0d1d2c;

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

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.mini-sector-card:hover{

    transform:translateY(-8px);

    border-color:#10d8ff;

    box-shadow:0 15px 30px rgba(16,216,255,.15);

}

.mini-sector-card h3{

    color:#10d8ff;

    font-size:38px;

    margin-bottom:10px;

    font-weight:700;

}

.mini-sector-card span{

    color:#9fb2c2;

    font-size:15px;

}


/*-------------------------
Animations
--------------------------*/

.sector-card:hover .sector-icon{

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

    transition:.35s;

}

.stock-list li:hover{

    padding-left:10px;

    transition:.3s;

}


/*-------------------------
Responsive
--------------------------*/

@media(max-width:991px){

    .sector-section{

        padding:70px 0;

    }

    .btn-sector{

        margin-top:20px;

    }

    .sector-card{

        margin-bottom:25px;

    }

}

@media(max-width:768px){

    .sector-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .sector-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .sector-growth{

        font-size:18px;

    }

}

@media(max-width:576px){

    .sector-card{

        padding:22px;

    }

    .sector-card h4{

        font-size:22px;

    }

    .mini-sector-card{

        padding:20px;

    }

    .mini-sector-card h3{

        font-size:30px;

    }

}

/*====================================================
POPULAR COURSES
=====================================================*/

.courses-section{

    padding:100px 0;

    background:#07131f;

    position:relative;

    overflow:hidden;

}

.courses-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
        rgba(16,216,255,.08),
        transparent 70%);

    top:-250px;
    left:-220px;

}

.courses-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:radial-gradient(circle,
        rgba(0,255,149,.05),
        transparent 70%);

    bottom:-200px;
    right:-180px;

}

/*======================================
Section Header
=======================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:60px;

}

.section-subtitle{

    display:inline-block;

    color:#11d8ff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:600;

    margin-bottom:10px;

}

.section-header h2{

    color:#fff;

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

.section-header p{

    color:#9db0c0;

    max-width:650px;

    line-height:1.8;

}

.btn-course{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border:1px solid #10d8ff;

    border-radius:12px;

    color:#10d8ff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-course:hover{

    background:#10d8ff;

    color:#07131f;

}

/*======================================
Course Card
=======================================*/

.course-card{

    background:#0d1d2c;

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

    border-radius:20px;

    overflow:hidden;

    height:100%;

    transition:.35s;

    position:relative;

}

.course-card:hover{

    transform:translateY(-12px);

    border-color:#10d8ff;

    box-shadow:0 18px 40px rgba(16,216,255,.18);

}

/*======================================
Image
=======================================*/

.course-image{

    position:relative;

    overflow:hidden;

}

.course-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.45s;

}

.course-card:hover .course-image img{

    transform:scale(1.08);

}

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

.course-level{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    border-radius:30px;

    color:#fff;

    font-size:13px;

    font-weight:600;

}

.beginner{

    background:#27ae60;

}

.intermediate{

    background:#f39c12;

}

.advanced{

    background:#e74c3c;

}

/*======================================
Body
=======================================*/

.course-body{

    padding:28px;

}

.course-meta{

    display:flex;

    justify-content:space-between;

    color:#9fb2c2;

    font-size:14px;

    margin-bottom:18px;

}

.course-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.course-meta i{

    color:#10d8ff;

}

.course-body h4{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

    line-height:1.35;

}

.course-body p{

    color:#9fb2c2;

    line-height:1.8;

    margin-bottom:22px;

}

/*======================================
Rating
=======================================*/

.rating-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.stars{

    color:#ffc107;

    font-size:15px;

}

.stars span{

    color:#fff;

    margin-left:8px;

    font-weight:600;

}

.price{

    font-size:26px;

    font-weight:700;

    color:#10d8ff;

}

/*======================================
Footer
=======================================*/

.course-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:20px;

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

}

.instructor{

    display:flex;

    align-items:center;

    gap:12px;

}

.instructor img{

    width:50px;

    height:50px;

    border-radius:50%;

    border:3px solid #10d8ff;

    object-fit:cover;

}

.instructor small{

    display:block;

    color:#7d92a3;

    font-size:12px;

}

.instructor strong{

    color:#fff;

    font-size:15px;

}

.btn-enroll{

    padding:11px 24px;

    background:#10d8ff;

    color:#07131f;

    border-radius:10px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.btn-enroll:hover{

    background:#fff;

    color:#07131f;

}

/*======================================
Hover Effects
=======================================*/

.course-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
        #10d8ff,
        #00ff95);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.course-card:hover::before{

    transform:scaleX(1);

}

.course-card:hover .btn-enroll{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(16,216,255,.25);

}

.course-card:hover .price{

    color:#00ff95;

}

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

@media(max-width:991px){

.section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

}

.btn-course{

    margin-top:10px;

}

.course-card{

    margin-bottom:20px;

}

}

@media(max-width:768px){

.course-image img{

    height:220px;

}

.course-body{

    padding:22px;

}

.course-body h4{

    font-size:22px;

}

.course-meta{

    flex-direction:column;

    gap:10px;

}

.course-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.btn-enroll{

    width:100%;

    text-align:center;

}

}

@media(max-width:576px){

.section-header h2{

    font-size:32px;

}

.course-image img{

    height:200px;

}

.course-body{

    padding:20px;

}

.price{

    font-size:22px;

}

}

/*====================================================
WHY CHOOSE US
Part 4B.1
Section Background + Illustration + Floating Cards +
Statistics Counter Cards
=====================================================*/

.why-us-section{

    position:relative;

    padding:100px 0;

    background:#07131f;

    overflow:hidden;

}

.why-us-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-250px;

    top:-250px;

    background:radial-gradient(circle,
        rgba(16,216,255,.08),
        transparent 70%);

}

.why-us-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    bottom:-220px;

    background:radial-gradient(circle,
        rgba(0,255,149,.05),
        transparent 70%);

}

/*=====================================
Section Header
======================================*/

.why-us-section .section-header{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}

.why-us-section .section-subtitle{

    display:inline-block;

    color:#10d8ff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:600;

    margin-bottom:12px;

}

.why-us-section .section-header h2{

    color:#fff;

    font-size:46px;

    font-weight:700;

    line-height:1.25;

    margin-bottom:18px;

}

.why-us-section .section-header p{

    color:#9eb2c2;

    line-height:1.9;

    font-size:16px;

}


/*=====================================
Illustration
======================================*/

.why-image{

    position:relative;

    text-align:center;
    

}

.why-image img{

    width:100%;

    max-width:500px;

    border-radius:25px;

    position:relative;

    z-index:2;

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

}


/* Decorative Circle */

.why-image::before{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:0%;

    background-color:linear-gradient(135deg,
        rgba(16,216,255,.18),
        rgba(0,255,149,.12));

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    z-index:1;
    background: url('../images/why-us.png');
background-size:contain;
}


/*=====================================
Floating Cards
======================================*/

.floating-box{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    background:rgba(16,29,44,.92);

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

    border-radius:18px;

    backdrop-filter:blur(18px);

    z-index:5;

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

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

}

.floating-box i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#10d8ff;

    color:#07131f;

    font-size:24px;

}

.floating-box h5{

    color:#fff;

    font-size:24px;

    margin-bottom:3px;

}

.floating-box span{

    color:#9fb2c2;

    font-size:14px;

}

.box-one{

    top:40px;

    left:-20px;

}

.box-two{

    bottom:45px;

    right:-15px;

    animation-delay:2s;

}

@keyframes floatBox{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.why-content h3{

    color:#fff;

    font-size:38px;

    margin-bottom:20px;

    line-height:1.35;

}

.why-content>p{

    color:#9fb2c2;

    line-height:1.9;

    margin-bottom:35px;

}


/*=====================================
Counter Cards
======================================*/

.counter-card{

    background:#0d1d2c;

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

    border-radius:20px;

    padding:28px;

    text-align:center;

    height:100%;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.counter-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
        #10d8ff,
        #00ff95);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.counter-card:hover{

    transform:translateY(-8px);

    border-color:#10d8ff;

    box-shadow:0 18px 35px rgba(16,216,255,.18);

}

.counter-card:hover::before{

    transform:scaleX(1);

}

.counter-card h2{

    color:#10d8ff;

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.counter-card p{

    color:#a5b6c5;

    font-size:15px;

    margin:0;

}


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

@media(max-width:991px){

    .why-us-section{

        padding:80px 0;

    }

    .why-image{

        margin-bottom:60px;

    }

    .why-content{

        text-align:center;

    }

    .floating-box{

        position:relative;

        margin:20px auto;

        left:auto;

        right:auto;

        top:auto;

        bottom:auto;

        width:280px;

    }

}

@media(max-width:768px){

    .why-us-section .section-header h2{

        font-size:34px;

    }

    .why-content h3{

        font-size:30px;

    }

    .counter-card{

        padding:24px;

    }

    .counter-card h2{

        font-size:34px;

    }

}

@media(max-width:576px){

    .why-image img{

        max-width:100%;

    }

    .floating-box{

        width:100%;

    }

    .counter-card{

        padding:20px;

    }

    .counter-card h2{

        font-size:30px;

    }

}


/*====================================================
TESTIMONIAL SECTION
Part 5B.1
=====================================================*/

.testimonial-section{

    position:relative;

    padding:100px 0;

    background:#07131f;

    overflow:hidden;

}

.testimonial-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-300px;

    left:-250px;

    background:radial-gradient(circle,
        rgba(16,216,255,.08),
        transparent 70%);

}

.testimonial-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    bottom:-220px;

    right:-220px;

    background:radial-gradient(circle,
        rgba(0,255,149,.06),
        transparent 70%);

}

/*=====================================
Swiper
======================================*/

.testimonialSwiper{

    padding:20px 5px 70px;

}

/*=====================================
Glassmorphism Card
======================================*/

.testimonial-card{

    position:relative;

    background:rgba(13,29,44,.88);

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.4s;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
        #10d8ff,
        #00ff95);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:#10d8ff;

    box-shadow:0 20px 45px rgba(16,216,255,.18);

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

/*=====================================
Quote Icon
======================================*/

.quote-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:linear-gradient(135deg,
        #10d8ff,
        #00ff95);

    color:#07131f;

    font-size:32px;

    margin-bottom:25px;

    box-shadow:0 12px 25px rgba(16,216,255,.25);

}

/*=====================================
Rating
======================================*/

.testimonial-rating{

    margin-bottom:20px;

    color:#ffc107;

    font-size:17px;

}

.testimonial-rating i{

    margin-right:2px;

}

/*=====================================
Review Text
======================================*/

.testimonial-text{

    color:#b8c6d3;

    line-height:1.9;

    font-size:15px;

    margin-bottom:30px;

    min-height:145px;

}

/*=====================================
User Profile
======================================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.testimonial-user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #10d8ff;

}

.testimonial-user h5{

    color:#fff;

    font-size:18px;

    margin-bottom:4px;

}

.testimonial-user span{

    color:#8ea4b7;

    font-size:14px;

}

/*=====================================
Footer
======================================*/

.testimonial-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

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

}

.testimonial-footer small{

    color:#8ea4b7;

    font-size:13px;

}

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

.experience{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    color:#fff;

    font-size:13px;

    font-weight:600;

}

.experience.beginner{

    background:#27ae60;

}

.experience.intermediate{

    background:#f39c12;

}

.experience.advanced{

    background:#e74c3c;

}

/*=====================================
Subtle Animations
======================================*/

.testimonial-card:hover .quote-icon{

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

    transition:.35s;

}

.testimonial-card:hover .testimonial-user img{

    transform:scale(1.08);

    transition:.35s;

}

.testimonial-card:hover .testimonial-user h5{

    color:#10d8ff;

    transition:.35s;

}

/*====================================================
TESTIMONIALS
Part 5B.2
Hover Animations + Swiper + Responsive
=====================================================*/

/*=====================================
Card Hover Effects
======================================*/

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:#10d8ff;

    box-shadow:0 25px 50px rgba(16,216,255,.18);

}

.testimonial-card:hover .quote-icon{

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

    box-shadow:0 18px 35px rgba(16,216,255,.35);

}

.testimonial-card:hover .testimonial-user img{

    transform:scale(1.08);

    border-color:#00ff95;

}

.testimonial-card:hover .testimonial-user h5{

    color:#10d8ff;

}

.testimonial-card:hover .testimonial-rating{

    letter-spacing:2px;

}

.testimonial-card:hover .experience{

    transform:translateY(-2px);

}


/*=====================================
Smooth Transitions
======================================*/

.testimonial-card,
.quote-icon,
.testimonial-user img,
.testimonial-user h5,
.testimonial-rating,
.experience,
.swiper-button-next,
.swiper-button-prev{

    transition:.35s ease;

}


/*=====================================
Swiper Navigation
======================================*/

.testimonial-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:45px;

}

.testimonial-prev,
.testimonial-next{

    position:relative !important;

    top:auto !important;

    left:auto !important;

    right:auto !important;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0d1d2c;

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

    color:#10d8ff;

    cursor:pointer;

    box-shadow:none;

}

.testimonial-prev::after,
.testimonial-next::after{

    display:none;

}

.testimonial-prev i,
.testimonial-next i{

    font-size:20px;

}

.testimonial-prev:hover,
.testimonial-next:hover{

    background:linear-gradient(
        135deg,
        #10d8ff,
        #00ff95
    );

    color:#07131f;

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(16,216,255,.25);

}


/*=====================================
Pagination
======================================*/

.testimonial-pagination{

    position:relative !important;

    margin-top:35px;

}

.testimonial-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    margin:0 6px !important;

    background:#52697d;

    opacity:1;

    transition:.35s;

}

.testimonial-pagination .swiper-pagination-bullet-active{

    width:34px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #10d8ff,
        #00ff95
    );

}


/*=====================================
Swiper Slide
======================================*/

.testimonialSwiper .swiper-slide{

    height:auto;

    display:flex;

}

.testimonialSwiper .swiper-slide .testimonial-card{

    width:100%;

}


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

@keyframes testimonialFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}

.testimonial-card{

    animation:testimonialFloat 6s ease-in-out infinite;

}

.testimonialSwiper .swiper-slide:nth-child(2) .testimonial-card{

    animation-delay:.5s;

}

.testimonialSwiper .swiper-slide:nth-child(3) .testimonial-card{

    animation-delay:1s;

}

.testimonialSwiper .swiper-slide:nth-child(4) .testimonial-card{

    animation-delay:1.5s;

}

.testimonialSwiper .swiper-slide:nth-child(5) .testimonial-card{

    animation-delay:2s;

}

.testimonialSwiper .swiper-slide:nth-child(6) .testimonial-card{

    animation-delay:2.5s;

}


/*=====================================
Tablet
======================================*/

@media(max-width:991px){

    .testimonial-section{

        padding:80px 0;

    }

    .testimonial-card{

        padding:30px;

    }

    .testimonial-text{

        min-height:auto;

    }

    .testimonial-prev,
    .testimonial-next{

        width:55px;

        height:55px;

    }

}


/*=====================================
Mobile
======================================*/

@media(max-width:768px){

    .testimonial-section{

        padding:70px 0;

    }

    .testimonial-card{

        padding:25px;

    }

    .testimonial-user{

        flex-direction:column;

        text-align:center;

    }

    .testimonial-footer{

        flex-direction:column;

        gap:12px;

        text-align:center;

    }

    .testimonial-navigation{

        margin-top:30px;

        gap:15px;

    }

    .testimonial-prev,
    .testimonial-next{

        width:50px;

        height:50px;

    }

    .testimonial-prev i,
    .testimonial-next i{

        font-size:18px;

    }

}


/*=====================================
Small Mobile
======================================*/

@media(max-width:576px){

    .testimonial-card{

        padding:22px;

        border-radius:18px;

    }

    .quote-icon{

        width:60px;

        height:60px;

        font-size:28px;

    }

    .testimonial-user img{

        width:60px;

        height:60px;

    }

    .testimonial-user h5{

        font-size:17px;

    }

    .testimonial-text{

        font-size:14px;

        line-height:1.8;

    }

    .experience{

        font-size:12px;

        padding:7px 16px;

    }

    .testimonial-pagination{

        margin-top:25px;

    }

    .testimonial-pagination .swiper-pagination-bullet{

        width:10px;

        height:10px;

    }

    .testimonial-pagination .swiper-pagination-bullet-active{

        width:28px;

    }

}


/*=====================================
Reduce Motion
======================================*/

@media(prefers-reduced-motion:reduce){

    .testimonial-card{

        animation:none;

    }

}


/*====================================================
TESTIMONIAL SECTION
Part 5B.1
=====================================================*/

.testimonial-section{

    position:relative;

    padding:100px 0;

    background:#07131f;

    overflow:hidden;

}

.testimonial-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-300px;

    left:-250px;

    background:radial-gradient(circle,
        rgba(16,216,255,.08),
        transparent 70%);

}

.testimonial-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    bottom:-220px;

    right:-220px;

    background:radial-gradient(circle,
        rgba(0,255,149,.06),
        transparent 70%);

}

/*=====================================
Swiper
======================================*/

.testimonialSwiper{

    padding:20px 5px 70px;

}

/*=====================================
Glassmorphism Card
======================================*/

.testimonial-card{

    position:relative;

    background:rgba(13,29,44,.88);

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.4s;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
        #10d8ff,
        #00ff95);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:#10d8ff;

    box-shadow:0 20px 45px rgba(16,216,255,.18);

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

/*=====================================
Quote Icon
======================================*/

.quote-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:linear-gradient(135deg,
        #10d8ff,
        #00ff95);

    color:#07131f;

    font-size:32px;

    margin-bottom:25px;

    box-shadow:0 12px 25px rgba(16,216,255,.25);

}

/*=====================================
Rating
======================================*/

.testimonial-rating{

    margin-bottom:20px;

    color:#ffc107;

    font-size:17px;

}

.testimonial-rating i{

    margin-right:2px;

}

/*=====================================
Review Text
======================================*/

.testimonial-text{

    color:#b8c6d3;

    line-height:1.9;

    font-size:15px;

    margin-bottom:30px;

    min-height:145px;

}

/*=====================================
User Profile
======================================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.testimonial-user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #10d8ff;

}

.testimonial-user h5{

    color:#fff;

    font-size:18px;

    margin-bottom:4px;

}

.testimonial-user span{

    color:#8ea4b7;

    font-size:14px;

}

/*=====================================
Footer
======================================*/

.testimonial-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

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

}

.testimonial-footer small{

    color:#8ea4b7;

    font-size:13px;

}

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

.experience{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    color:#fff;

    font-size:13px;

    font-weight:600;

}

.experience.beginner{

    background:#27ae60;

}

.experience.intermediate{

    background:#f39c12;

}

.experience.advanced{

    background:#e74c3c;

}

/*=====================================
Subtle Animations
======================================*/

.testimonial-card:hover .quote-icon{

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

    transition:.35s;

}

.testimonial-card:hover .testimonial-user img{

    transform:scale(1.08);

    transition:.35s;

}

.testimonial-card:hover .testimonial-user h5{

    color:#10d8ff;

    transition:.35s;

}

/*====================================================
FOOTER
Part 6C.1
Premium Footer + Newsletter + Widgets
=====================================================*/

/*=====================================
Footer Section
======================================*/

.footer-section{

    position:relative;

    background:linear-gradient(
        180deg,
        #07131f 0%,
        #091a29 40%,
        #05111c 100%
    );

    padding:120px 0 0;

    overflow:hidden;

}

.footer-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-300px;

    top:-300px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(16,216,255,.08),
        transparent 70%);

}

.footer-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,255,149,.06),
        transparent 70%);

}

/*=====================================
Newsletter Card
======================================*/

.footer-newsletter{

    position:relative;

    background:rgba(13,29,44,.9);

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

    backdrop-filter:blur(18px);

    border-radius:25px;

    padding:55px;

    margin-bottom:80px;

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

}

.newsletter-tag{

    display:inline-block;

    color:#10d8ff;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:12px;

}

.footer-newsletter h2{

    color:#fff;

    font-size:40px;

    margin-bottom:15px;

}

.footer-newsletter p{

    color:#a6b7c6;

    line-height:1.9;

    margin-bottom:0;

}

/*=====================================
Newsletter Form
======================================*/

.newsletter-form{

    display:flex;

    gap:15px;

}

.newsletter-form input{

    flex:1;

    height:60px;

    padding:0 22px;

    border-radius:12px;

    background:#13293e;

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

    color:#fff;

    outline:none;

    transition:.35s;

}

.newsletter-form input::placeholder{

    color:#7d94a8;

}

.newsletter-form input:focus{

    border-color:#10d8ff;

    box-shadow:0 0 0 4px rgba(16,216,255,.12);

}

.newsletter-form button{

    height:60px;

    padding:0 28px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #10d8ff,
        #00ff95
    );

    color:#07131f;

    font-weight:700;

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(16,216,255,.25);

}

/*=====================================
Footer Widgets
======================================*/

.footer-content{

    padding-bottom:60px;

}

.footer-widget h4{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

}

.footer-widget p{

    color:#9fb2c2;

    line-height:1.9;

    margin-top:20px;

}

.footer-logo img{

    max-width:180px;

}

/*=====================================
Footer Links
======================================*/

.footer-widget ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-widget ul li{

    margin-bottom:14px;

}

.footer-widget ul li a{

    color:#9fb2c2;

    text-decoration:none;

    transition:.35s;

    position:relative;

}

.footer-widget ul li a::before{

    content:"";

    width:0;

    height:2px;

    position:absolute;

    left:0;

    bottom:-4px;

    background:#10d8ff;

    transition:.35s;

}

.footer-widget ul li a:hover{

    color:#10d8ff;

    padding-left:8px;

}

.footer-widget ul li a:hover::before{

    width:100%;

}

/*=====================================
Contact List
======================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#9fb2c2;

}

.footer-contact i{

    color:#10d8ff;

    font-size:18px;

    margin-top:2px;

}

/*=====================================
Social Icons
======================================*/

.footer-social{

    display:flex;

    gap:14px;

    margin-top:30px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#13293e;

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

    color:#10d8ff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:linear-gradient(
        135deg,
        #10d8ff,
        #00ff95
    );

    color:#07131f;

    transform:translateY(-6px) rotate(-8deg);

    box-shadow:0 15px 30px rgba(16,216,255,.22);

}

/*=====================================
Market Widget
======================================*/

.market-status-widget{

    display:grid;

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

    gap:20px;

    margin-top:30px;

    padding:35px;

    background:#0d1d2c;

    border-radius:22px;

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

}

.market-card{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:16px;

    background:#13293e;

    transition:.35s;

}

.market-card:hover{

    transform:translateY(-5px);

    border:1px solid rgba(16,216,255,.25);

    box-shadow:0 15px 30px rgba(16,216,255,.12);

}

.market-card small{

    display:block;

    color:#8ea4b7;

    margin-bottom:5px;

}

.market-card h5{

    color:#fff;

    margin:0;

    font-size:20px;

}

.market-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#00ff95;

    box-shadow:0 0 15px #00ff95;

    animation:marketPulse 1.8s infinite;

}

@keyframes marketPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*====================================================
FOOTER
Part 6C.2
Copyright + Back To Top + Responsive
=====================================================*/

/*=====================================
Copyright Bar
======================================*/

.footer-bottom{

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

    padding:28px 0;

    margin-top:60px;

}

.copyright-text{

    color:#8ea4b7;

    margin:0;

    font-size:15px;

}

.copyright-text strong{

    color:#10d8ff;

}

.footer-bottom-links{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    flex-wrap:wrap;

    gap:25px;

}

.footer-bottom-links a{

    color:#8ea4b7;

    text-decoration:none;

    position:relative;

    transition:.35s;

}

.footer-bottom-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#10d8ff;

    transition:.35s;

}

.footer-bottom-links a:hover{

    color:#10d8ff;

}

.footer-bottom-links a:hover::after{

    width:100%;

}


/*=====================================
Back To Top Button
======================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #10d8ff,
        #00ff95
    );

    color:#07131f;

    font-size:22px;

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

    transition:.35s;

    z-index:999;

}

.back-to-top:hover{

    transform:translateY(-8px) rotate(360deg);

    box-shadow:0 22px 45px rgba(16,216,255,.35);

}

.back-to-top:focus{

    outline:none;

}


/*=====================================
General Hover Effects
======================================*/

.footer-widget ul li a,
.footer-contact li,
.market-card,
.footer-social a,
.newsletter-form button{

    transition:all .35s ease;

}

.footer-widget:hover h4{

    color:#10d8ff;

}

.market-card:hover h5{

    color:#10d8ff;

}

.footer-widget:hover .footer-logo img{

    transform:scale(1.04);

    transition:.35s;

}

.newsletter-form button:hover i{

    transform:translateX(5px);

    transition:.35s;

}


/*=====================================
Responsive (Tablet)
======================================*/

@media(max-width:991px){

    .footer-section{

        padding-top:90px;

    }

    .footer-newsletter{

        padding:40px;

    }

    .newsletter-form{

        margin-top:30px;

    }

    .market-status-widget{

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

    }

    .footer-bottom-links{

        justify-content:flex-start;

        margin-top:20px;

    }

}


/*=====================================
Responsive (Mobile)
======================================*/

@media(max-width:768px){

    .footer-newsletter{

        padding:30px;

    }

    .footer-newsletter h2{

        font-size:30px;

    }

    .newsletter-form{

        flex-direction:column;

    }

    .newsletter-form input,

    .newsletter-form button{

        width:100%;

    }

    .market-status-widget{

        grid-template-columns:1fr;

        padding:25px;

    }

    .footer-content{

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

        text-align:left;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        gap:18px;

    }

}


/*=====================================
Small Mobile
======================================*/

@media(max-width:576px){

    .footer-section{

        padding-top:70px;

    }

    .footer-newsletter{

        padding:25px;

        border-radius:20px;

    }

    .footer-newsletter h2{

        font-size:26px;

    }

    .footer-widget{

        margin-bottom:25px;

    }

    .footer-widget h4{

        font-size:20px;

    }

    .footer-social a{

        width:44px;

        height:44px;

        font-size:18px;

    }

    .market-card{

        flex-direction:column;

        text-align:center;

    }

    /* .back-to-top{

        width:50px;

        height:50px;

        right:18px;

        bottom:18px;

        font-size:18px;

    } */

    .back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#10d8ff,#00ff95);

    color:#07131f;

    font-size:22px;

    cursor:pointer;

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

    z-index:999;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px) rotate(360deg);

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

}
}


/*=====================================
Large Desktop Enhancement
======================================*/

@media(min-width:1400px){

    .footer-newsletter{

        padding:70px;

    }

    .footer-section{

        padding-top:140px;

    }

}


/*=====================================
Reduce Motion
======================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }
}
/* =====================================
   YOUTUBE DAILY MARKET ANALYSIS
===================================== */

.youtube-analysis-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.youtube-analysis-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);
    color: inherit;
}


/* Thumbnail */

.youtube-thumbnail-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

.youtube-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.youtube-analysis-card:hover .youtube-thumbnail {
    transform: scale(1.03);
}


/* YouTube Play Button */

.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 72px;
    height: 50px;

    border-radius: 14px;

    background: rgba(255, 0, 0, 0.95);

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

    color: #fff;

    font-size: 28px;

    transition: all 0.3s ease;
}

.youtube-analysis-card:hover .youtube-play-button {
    transform: translate(-50%, -50%) scale(1.1);
}


/* Content */

.youtube-analysis-content {
    padding: 25px;
}

.youtube-analysis-content h3 {
    margin-top: 12px;
    margin-bottom: 10px;

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

    line-height: 1.3;
}

.youtube-date {
    margin-bottom: 15px;

    font-size: 14px;

    color: #777;
}

.youtube-watch {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-weight: 600;

    color: #dc3545;
}


/* Mobile */

@media (max-width: 767px) {

    .youtube-analysis-content {
        padding: 18px;
    }

    .youtube-analysis-content h3 {
        font-size: 19px;
    }

    .youtube-play-button {
        width: 60px;
        height: 42px;
        font-size: 23px;
    }

}

.courses-section {
    background-color: #071624;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.section-subtitle {
    color: #0d6efd;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.25rem;
}

.btn-course {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}

.btn-course:hover {
    text-decoration: underline;
}

/* Card Styling */
.course-card {
    background: #071624;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.course-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.course-level {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.course-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.course-body h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-body p {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.btn-enroll {
    display: inline-block;
    background-color: #0d6efd;
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-enroll:hover {
    background-color: #0b5ed7;
    color: #ffffff;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.5);
    border-radius: 10px;
}
.rule-item {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.rule-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(4px);
}
/* Container Wrapper */
.playlist-slider-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Sliding Track */
.playlist-slider-track {
    width: max-content;
    animation: slideRightToLeft 25s linear infinite;
}

/* Pause Scrolling when user hovers over any card */
.playlist-slider-wrapper:hover .playlist-slider-track {
    animation-play-state: paused;
}

/* Continuous Infinite Scroll Keyframe */
@keyframes slideRightToLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .playlist-card-item {
        width: 300px !important;
    }
}
/* Mobile Touch & Drag Optimization */
@media (max-width: 768px) {
    .playlist-slider-wrapper {
        /* Enables standard horizontal touch scrolling on mobile */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth inertia scrolling for iOS Safari */
        scroll-snap-type: x mandatory;
    }

    .playlist-slider-track {
        /* Disable automatic CSS sliding animation on mobile so users can swipe freely */
        animation: none !important;
        width: auto !important;
    }

    .playlist-card-item {
        /* Snap cards neatly when swiping on mobile screens */
        scroll-snap-align: start;
        width: 85vw !important; /* Makes each card take up 85% of screen width */
    }
}
/* Prevent hover states from freezing touch events on mobile */
@media (hover: none) {
    .playlist-slider-track {
        animation-play-state: running !important;
    }
}
/* Mobile Navbar Fixes */
@media (max-width: 991.98px) {
    /* Ensures the mobile menu opens cleanly on dark backgrounds */
    .navbar-collapse {
        background-color: #0b1329; /* Adjust to match your dark header background */
        padding: 15px;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    /* Style for mobile nav links */
    .navbar-nav .nav-link {
        padding: 10px 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Ensure the hamburger button border & icon stand out */
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.3) !important;
        padding: 6px 10px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}