/*=====================================================
    GOOGLE MEET CLONE
    STYLE.CSS - PARTIE 2A
======================================================*/

:root {

    --google-blue: #1a73e8;
    --google-green: #34A853;
    --google-red: #EA4335;
    --google-yellow: #FBBC04;

    --text: #202124;
    --text-light: #5f6368;

    --border: #dadce0;

    --bg: #ffffff;

    --transition: .30s ease;

}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Roboto, Arial, sans-serif;
    background: #fff;
    color: var(--text);
    overflow-x: hidden;
}

/*=====================================================
                    NAVBAR
======================================================*/
.navbar {
    height: 72px;
    border-bottom: 1px solid transparent;
    z-index: 999;
}

.menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    transition: var(--transition);
}

.menu-btn:hover {

    background: #f1f3f4;

}

.menu-btn i {

    font-size: 24px;

    color: #5f6368;

}

/*=====================================================
                GOOGLE MEET LOGO
======================================================*/

.logo {

    user-select: none;

}

.meet-logo {

    width: 42px;

    height: 30px;

    position: relative;

    margin-right: 12px;

}

.camera-body {

    position: absolute;

    left: 0;

    width: 28px;

    height: 28px;

    background: var(--google-red);

    border-radius: 6px;

}

.camera-side {

    position: absolute;

    right: 0;

    top: 6px;

    width: 16px;

    height: 16px;

    background: red;

    clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);

}

.brand-name {

    font-size: 30px;

    font-weight: 500;

    color: #202124;

}

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

.navbar-right {

    gap: 20px;

}

.time {
    font-size: 20px;
    color: #5f6368;
}

.nav-icon {

    font-size: 22px;

    color: #5f6368;

    cursor: pointer;

    transition: var(--transition);

}

.nav-icon:hover {

    color: #202124;

    transform: scale(1.08);

}

.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}

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

.hero {
    padding-top: 120px;
    padding-bottom: 60px;
}

.hero .container {

    max-width: 1100px;

}

.hero h1 {
    font-size: 30px;
    line-height: 1.12;
    font-weight: 300;
    color: #202124;
    margin-bottom: 20px;
}

.hero p {
    max-width: 700px;
    margin: auto;
    font-size: 20px;
    line-height: 1.45;
    color: #5f6368;
}

/*=====================================================
                ACTIONS
======================================================*/

.meeting-actions {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;

}
.meeting-actions2 {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}

/*=====================================================
            BOUTON BLEU
======================================================*/

.btn-new {

    background: var(--google-blue);

    color: #fff;

    height: 52px;

    padding: 0 28px;

    border-radius: 28px;

    font-size: 17px;

    font-weight: 500;

    transition: var(--transition);

    display: flex;

    align-items: center;

}

.btn-new:hover {

    background: #1669d8;

    transform: translateY(-2px);

    color: #fff;

}

.btn-new i {

    font-size: 18px;

}

/*=====================================================
                JOIN BOX
======================================================*/

.join-box {

    width: 360px;

    height: 52px;

    border: 1px solid var(--border);

    border-radius: 28px;

    display: flex;

    align-items: center;

    padding: 0 18px;

    transition: var(--transition);

}

.join-box:hover {

    border-color: #9aa0a6;

}

.join-box i {

    font-size: 20px;

    color: #5f6368;

    margin-right: 15px;

}

.join-box input {

    border: none;

    outline: none;

    width: 100%;

    font-size: 17px;

    background: transparent;

    color: #202124;

}

.join-box input::placeholder {

    color: #5f6368;

}

.meeting-actions a,
.meeting-actions2 a {

    text-decoration: none;

    font-size: 17px;

    color: #5f6368;

    transition: var(--transition);

}

.meeting-actions a:hover
.meeting-actions2 a:hover {
    color: var(--google-blue);
}

/*=====================================================
                SEPARATOR
======================================================*/

.separator {
    width: 620px;
    max-width: 100%;
    height: 1px;
    background: var(--border);
    margin: 55px auto;
}
.separator2 {
    width: 620px;
    max-width: 100%;
    height: 1px;
    background: var(--border);
    margin: 30px auto;
    margin-bottom: -30px;
}

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

@media(max-width:992px) {

    .hero h1 {

        font-size: 48px;

    }

    .hero p {

        font-size: 22px;

    }

    .join-box {

        width: 320px;

    }

    .brand-name {

        font-size: 24px;

    }

    .time {

        display: none;

    }

}

@media(max-width:768px) {

    .navbar {

        height: auto;

        padding: 10px 0;

    }

    .navbar .container-fluid {

        flex-wrap: wrap;

        gap: 10px;

    }

    .hero {

        padding-top: 120px;

    }

    .hero h1 {

        font-size: 38px;

    }

    .hero p {

        font-size: 18px;

    }

    .meeting-actions, .meeting-actions2 {
        flex-direction: column;
    }

    .join-box {

        width: 100%;

        max-width: 420px;

    }

    .btn-new {

        width: 100%;

        max-width: 420px;

        justify-content: center;

    }

    .brand-name {

        font-size: 22px;

    }

    .navbar-right {

        gap: 12px;

    }

}

@media(max-width:576px) {

    .hero h1 {

        font-size: 32px;

        line-height: 1.25;

    }

    .hero p {

        font-size: 16px;

    }

    .avatar {

        width: 34px;

        height: 34px;

    }

    .nav-icon {

        font-size: 18px;

    }

    .brand-name {

        font-size: 20px;

    }

    .menu-btn {

        width: 38px;

        height: 38px;

    }

}

/*=====================================================
        PRESENTATION (Illustration Google Meet)
======================================================*/

.presentation {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    margin-top: 25px;

}

.illustration {

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

}

.circle {

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: #e8f0fe;

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

    overflow: hidden;

    transition: var(--transition);

}

.circle:hover {

    transform: scale(1.02);

}

.circle img {

    width: 78%;
    height: auto;
    object-fit: contain;

}

/*=====================================================
                SLIDER BUTTON
======================================================*/

.slider-btn {

    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: #fff;

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

    transition: var(--transition);

    cursor: pointer;

}

.slider-btn i {

    font-size: 22px;
    color: #5f6368;

}

.slider-btn:hover {

    background: #f8f9fa;

    transform: scale(1.08);

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

}

.slider-btn:hover i {

    color: var(--google-blue);

}

/*=====================================================
                PRESENTATION TEXT
======================================================*/

.presentation-text {

    margin-top: 45px;

    text-align: center;

}

.presentation-text h2 {

    font-size: 34px;

    font-weight: 400;

    color: #202124;

    margin-bottom: 18px;

}

.presentation-text p {

    max-width: 680px;

    margin: auto;

    color: #5f6368;

    font-size: 18px;

    line-height: 1.8;

}

/*=====================================================
                    DOTS
======================================================*/

.dots {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

}

.dots span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #c7c7c7;

    transition: var(--transition);

}

.dots span.active {

    width: 26px;

    border-radius: 25px;

    background: var(--google-blue);

}

/*=====================================================
                GLOBAL TRANSITIONS
======================================================*/

button,
.btn,
input,
a {

    transition: var(--transition);

}

input:focus {

    outline: none;

}

/*=====================================================
                    HOVER
======================================================*/

.join-box:focus-within {

    border-color: var(--google-blue);

    box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);

}

.avatar {

    transition: var(--transition);

}

.avatar:hover {

    transform: scale(1.08);

}

.brand-name {

    letter-spacing: -0.4px;

}

/*=====================================================
                LARGE SCREEN
======================================================*/

@media(min-width:1400px) {

    .hero .container {

        max-width: 1180px;

    }

    .hero h1 {

        font-size: 68px;

    }

}

/*=====================================================
                TABLET
======================================================*/

@media(max-width:992px) {

    .presentation {

        gap: 20px;

    }

    .circle {

        width: 340px;

        height: 340px;

    }

    .presentation-text h2 {

        font-size: 30px;

    }

    .presentation-text p {

        font-size: 17px;

    }

    .slider-btn {

        width: 46px;

        height: 46px;

    }

}

/*=====================================================
                    MOBILE
======================================================*/

@media(max-width:768px) {

    .presentation {

        flex-direction: column;

    }

    .circle {

        width: 280px;

        height: 280px;

    }

    .slider-btn {

        width: 42px;

        height: 42px;

    }

    .presentation-text {

        margin-top: 30px;

    }

    .presentation-text h2 {

        font-size: 26px;

    }

    .presentation-text p {

        width: 95%;

        font-size: 16px;

        line-height: 1.7;

    }

}

/*=====================================================
                SMALL MOBILE
======================================================*/

@media(max-width:576px) {

    .circle {

        width: 230px;

        height: 230px;

    }

    .presentation {

        gap: 15px;

    }

    .slider-btn {

        width: 38px;

        height: 38px;

    }

    .slider-btn i {

        font-size: 18px;

    }

    .presentation-text h2 {

        font-size: 22px;

    }

    .presentation-text p {

        font-size: 15px;

    }

    .dots {

        gap: 10px;

    }

}

/*=====================================================
                SMOOTH APPEAR
======================================================*/

.hero {

    animation: fadeIn .8s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.top-header {
    background: #fff;
    height: 178px;
    overflow: hidden;
}

.top-wrapper {
    display: flex;
    height: 100%;
}

/* =====================================================
       LOGO
    ====================================================== */
.logo-side {
    width: 26%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-right: 1px solid #f1f1f1;
    overflow: hidden;
}

.logo-box {
    width: 100%;
    height: 100%;
}

.main-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
}

.main-logo img {
    width: 500px;
    height: 200px;
    /* max-width: 100%;
    max-height: 170px; */
    object-fit: contain;
    display: block;
}

@media(max-width:992px) {

    .logo-side {
        width: 100%;
        height: 150px;
        border-right: none;
        border-bottom: 1px solid #f1f1f1;
    }

    .main-logo img {
        max-height: 130px;
    }
}

@media(max-width:768px) {

    .logo-side {
        height: 130px;
    }

    .main-logo {
        padding: 10px;
    }

    .main-logo img {
        max-height: 115px;
    }
    .slide-item {
        min-width: 100%;
    }
}

@media(max-width:480px) {

    .logo-side {
        height: 110px;
    }

    .main-logo img {
        max-height: 200px;
    }

    .slide-item {
        min-width: 100%;
    }
}

/* =====================================================
       SLIDER
    ====================================================== */

.slider-side {
    width: 74%;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.ads-slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ads-track {
    display: flex;
    height: 100%;
    transition: transform .7s ease;
}

.slide-item {
    min-width: 50%;
    height: 130px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}


.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slider Arrows */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 20;
    cursor: pointer;
    transition: 0.3s;
    backdrop-filter: blur(4px);
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.32);
}

.slider-prev {
    left: 16px;
}

.slider-next {
    right: 16px;
}




.course-card{
    border-radius:5px;
    overflow:hidden;
    border:1px solid #ececec;
    transition:.35s;
}

.course-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.course-top{
    height:7px;
    background:linear-gradient(90deg,#1a73e8,#34a853);
}

.course-body{
    padding:10px;
}

.course-title{
    font-size:15px;
    font-weight:700;
    color:#202124;
    margin-bottom: -2px;
}

.course-description{
    color:#5f6368;
    margin-top:10px;
    line-height:1.6;
}

.meeting-link{
    background:#f8f9fa;
    border-radius:14px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    word-break:break-all;
}

.meeting-link span{
    font-weight:500;
    color:#202124;
}

.course-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.btn-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    transition:.3s;
}

.btn-icon i{
    font-size:20px;
}

.btn-icon:hover{
    background:#e8f0fe;
    color:#1a73e8;
    transform:scale(1.08);
}

.course-actions .btn-primary{
    height:46px;
    display:flex;
    align-items:center;
    font-weight:600;
}

.badge{
    font-size:13px;
}

.course-card hr{
    margin:25px 0;
}

.btn-copy{

    width:42px;
    height:42px;

    border-radius:12px;

    transition:.3s;
}

.btn-copy:hover{

    transform:scale(1.08);
}

.btn-copy.copied{

    background:#198754;
    color:#fff;
}

.btn-copy i{

    transition:.3s;
}

.btn-copy.copied i{

    transform:scale(1.2);
}

#btnJoin{

    transition:.3s;

}

#btnJoin:disabled{

    opacity:.45;

    cursor:not-allowed;

}

#btnJoin:not(:disabled){

    opacity:1;

    cursor:pointer;

}



/*
|--------------------------------------------------------------------------
| Root cours 
|--------------------------------------------------------------------------
*/

:root {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --hero: #18171f;
    --body: #f6f7fb;
    --text: #222;
    --muted: #6c757d;
    --success: #22c55e;
    --warning: #f97316;
    --white: #ffffff;
    --border: #e9e9ef;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

body {
    font-family:
        "Google Sans",
        "Inter",
        "Roboto",
        sans-serif;
    background: var(--body);
    color: var(--text);
}

a {
    text-decoration: none;
    transition: .3s;
}

.course-page {
    padding: 45px 0 80px;
}

.course-hero {
    background: var(--hero);
    padding-top: 60px;
    padding-bottom: 50px;
    margin-top: 100px;
}

.course-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 22px;
}

@media(max-width:991px) {
    .course-main-row {
        margin-top: 0;
    }
    .course-content {
        padding-top: 0;
    }
    .course-sidebar {
        position: relative;
        top: 0;
    }
    .course-hero {
        padding-bottom: 70px;
    }
}

.course-breadcrumb a {
    color: #b794f4;
    font-weight: 500;
}
.course-breadcrumb span {
    color: #b794f4;
}

.course-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1.15;
    margin-bottom: 18px;
}

.course-description {
    font-size: 22px;
    color: #cfcfd6;
    max-width: 900px;
    margin-bottom: 22px;
}

.best-seller {
    display: inline-block;
    padding: 6px 14px;
    background: #d9f99d;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 18px;
}

.course-author {
    margin-bottom: 16px;
    font-size: 16px;
    color: #ddd;
}

.course-author a {
    color: #b794f4;
    font-weight: 600;
}

.course-author a:hover {
    color: white;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    font-size: 15px;
    color: #d1d5db;
}

.course-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-meta i {
    font-size: 15px;
}

@media(max-width:992px) {
    .course-title {
        font-size: 38px;
    }

    .course-description {
        font-size: 18px;
    }
}

@media(max-width:768px) {
    .course-hero {
        padding: 50px 0;
    }

    .course-title {
        font-size: 30px;
    }

    .course-description {
        font-size: 17px;
    }

    .course-meta {
        gap: 15px;
        font-size: 14px;
    }
}

/*==================================================
PREMIUM
==================================================*/
.premium-section {
    /* margin-top: -42px; */
    position: relative;
    /* z-index: 20; */
    margin-bottom: 40px;
}

.premium-card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    border: 1px solid #ececf3;
}

.premium-left {
    width: 150px;
    background: var(--primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 25px;
}

.premium-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.premium-icon i {
    font-size: 24px;
}

.premium-left span {
    font-size: 18px;
    font-weight: 700;
}

.premium-content {
    flex: 1;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    border-right: 1px solid #ececf3;
}

.premium-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

.premium-content a {
    color: var(--primary);
    font-weight: 600;
}

.premium-content a:hover {
    color: var(--primary-hover);
}

.premium-rating {
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #ececf3;
    padding: 20px;
}

.premium-rating h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
}

.stars {
    margin: 8px 0;
    color: #f59e0b;
}

.stars i {
    font-size: 13px;
}

.premium-rating a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: underline;
}

.premium-users {
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.premium-users i {
    font-size: 22px;
    margin-bottom: 8px;
    color: #444;
}

.premium-users h3 {
    font-size: 30px;
    margin: 0;
    font-weight: 700;
}

.premium-users span {
    font-size: 14px;
    color: #777;
}

.premium-card {
    transition: .35s;
}

.premium-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

@media(max-width:992px) {

    .premium-section {
        margin-top: 35px;
    }

    .premium-card {
        flex-direction: column;
    }

    .premium-left {
        width: 100%;
        padding: 20px;
        flex-direction: row;
        gap: 15px;
    }

    .premium-content,
    .premium-rating,
    .premium-users {
        width: 100%;
        border-right: none;
        border-top: 1px solid #ececf3;
        padding: 25px;
    }
}

@media(max-width:576px) {
    .premium-rating h2 {
        font-size: 30px;
    }

    .premium-users h3 {
        font-size: 24px;
    }

    .premium-content {
        padding: 20px;
    }
}

/*==================================================
LEARNING
==================================================*/
.learning-section {
    margin-bottom: 40px;
}

.learning-card {
    border: 1px solid rgba(0, 0, 0, .05);
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, .05); */
    transition: .35s;
    overflow: hidden;
}

.learning-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .10);
}

.learning-card .card-body {
    padding: 35px;
}

.section-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.learning-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.learning-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    transition: .3s;
}

.learning-list i {
    color: var(--success);
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.learning-list li:hover {
    transform: translateX(6px);
}

.learning-list li:hover i {
    transform: scale(1.15);
}

.learning-list i {
    transition: .3s;
}

@media(max-width:768px) {
    .learning-card .card-body {
        padding: 25px;
    }

    .section-title {
        font-size: 28px;
    }

    .learning-list li {
        margin-bottom: 18px;
        font-size: 15px;
    }
}

/*==================================================
TAGS
==================================================*/
.course-tags-section {
    margin-bottom: 45px;
}

.course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.course-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #d9dbe7;
    border-radius: 50px;
    color: #343a40;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}

.course-tag:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, .25);
}

.course-tag.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@media(max-width:768px) {
    .course-tags {
        gap: 10px;
    }

    .course-tag {
        font-size: 13px;
        padding: 9px 15px;
    }
}

/*==================================================
SIDEBAR
==================================================*/
.course-sidebar {
    position: sticky;
    top: 30px;
    margin-top: 0;
}

.sidebar-card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
    transition: .35s;
    border: 1px solid #ececf3;
}

.sidebar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

.course-preview {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.course-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.course-preview:hover img {
    transform: scale(1.08);
}

.preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.preview-overlay span {
    font-weight: 600;
    margin-top: 18px;
}

.play-btn {
    width: 82px;
    height: 82px;
    border: none;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.play-btn i {
    font-size: 42px;
    color: var(--primary);
    margin-left: 5px;
}

.play-btn:hover {
    transform: scale(1.08);
}

.sidebar-body {
    padding: 28px;
}

.price-box h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 8px;
}

.price-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.old-price {
    text-decoration: line-through;
    color: #888;
}

.discount {
    color: var(--primary);
    font-weight: 700;
}

.expire {
    color: var(--warning);
    font-weight: 600;
    margin-bottom: 30px;
}

.btn-course-primary {
    height: 55px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: .3s;
}

.btn-course-primary:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(124, 58, 237, .30);
}

.btn-course-outline {
    height: 55px;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: .3s;
}

.btn-course-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.02);
}

.course-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
}

.feature-item i {
    font-size: 20px;
    color: #444;
    width: 22px;
}

.subscription-box {
    text-align: center;
}

.subscription-box h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

.subscription-box strong {
    font-size: 26px;
    color: var(--primary);
}

.coupon-box h6 {
    font-weight: 700;
    margin-bottom: 8px;
}

.coupon-success {
    display: block;
    margin-top: 15px;
    color: var(--success);
    font-weight: 600;
}

.coupon-success i {
    margin-right: 5px;
}

@media (max-width:991px) {
    .course-sidebar {
        position: relative;
        top: 0;
        margin-top: 40px;
    }

    .sidebar-body {
        padding: 22px;
    }
    .price-box h2 {
        font-size: 36px;
    }
}

@media (max-width:576px) {
    .play-btn {
        width: 70px;
        height: 70px;
    }

    .play-btn i {
        font-size: 34px;
    }

    .price-box h2 {
        font-size: 32px;
    }
    .btn-course-primary,
    .btn-course-outline {
        width: 100%;
    }
}

/*==================================================
MAIN LAYOUT
==================================================*/

.course-main-row {
    position: relative;
    margin-top: -460px;
    /* z-index: 20; */
}

.course-content {
    padding-top: 320px;
}

.course-section {
    margin-bottom: 35px;
}

.course-card {
    border: 1px solid #ececec;
}

.accordion-item {
    border: none;
    /* border-bottom: 1px solid #ececec; */
}

.accordion-button {
    background: #fafafa;
    padding: 18px;
    font-weight: 600;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: #f4f1ff;
    color: var(--primary);
}

.chapter-meta {
    font-size: 13px;
    color: #777;
    margin-top: 6px;
}

.lesson-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-list li {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f1f1f1;
}

.lesson-list i {
    margin-right: 12px;
    color: var(--primary);
}

.expand-link {
    font-weight: 600;
    color: var(--primary);
}

/*==================================================
MOBILE BUY BAR
==================================================*/
.mobile-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 14px 18px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
    z-index: 3000;
    border-top: 1px solid #ececec;
}

.mobile-buy-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mobile-price {
    display: flex;
    flex-direction: column;
}

.mobile-price h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.mobile-price-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.mobile-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
}

.mobile-rating i {
    color: #f59e0b;
}

.mobile-buy-bar .btn {
    width: 170px;
    height: 52px;
    flex-shrink: 0;
}

@media(min-width:992px) {
    .mobile-buy-bar {
        display: none;
    }
}

@media(max-width:576px) {
    .mobile-buy-content {
        flex-direction: column;
        align-items: stretch;
    }
    .mobile-price {
        text-align: center;
    }
    .mobile-buy-bar .btn {
        width: 100%;
    }
    .mobile-price h4 {
        font-size: 22px;
    }
}

@media(max-width:991px) {
    body {
        padding-bottom: 110px;
    }
}










/*=====================================================
=            GOOGLE FONT & VARIABLES
=====================================================*/

:root{

    --primary:#140369;
    --primary-light:#5E3BEE;
    --primary-soft:#8B5CF6;

    --text:#222;
    --text-light:#6c757d;

    --white:#fff;

    --radius:18px;
    --radius-btn:12px;

    --transition:.35s ease;

    --shadow-sm:0 10px 25px rgba(20,3,105,.08);

    --shadow-md:0 18px 40px rgba(20,3,105,.15);

    --shadow-lg:0 30px 60px rgba(20,3,105,.22);

    --glass:rgba(255,255,255,.12);

}

/*=====================================================
=                 GLOBAL
=====================================================*/

body{

    font-family:'Poppins',sans-serif;
    background:#f7f8fc;
    color:var(--text);

}

.hero-section{
    padding:35px 0;
    margin-top: 75px;
}

.hero-slider{
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

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

.hero-slide{

    min-height:400px;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding:20px 0;

}

.hero-slide .container{

    position:relative;

    z-index:10;

}

.hero-slide::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-260px;

    top:-220px;

    border-radius:50%;

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

    filter:blur(5px);

}

.hero-slide::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-250px;

    border-radius:50%;

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

    filter:blur(10px);

}

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

.hero-card{

    background:#fff;

    border-radius:18px;

    padding:42px;

    max-width:460px;

    box-shadow:var(--shadow-md);

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#ede8ff;

    color:var(--primary);

    font-weight:600;

    margin-bottom:18px;

    font-size:14px;

}

.hero-title{
    font-size:28px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:22px;
    color: #140369;
}

.hero-description{

    font-size:20px;

    line-height:1.8;

    color:var(--text-light);

    margin-bottom:35px;

}

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

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-btn-primary{

    background:var(--primary);

    color:#fff;

    border-radius:12px;

    padding:14px 28px;

    font-weight:600;

    transition:var(--transition);

    border:none;

    box-shadow:0 10px 25px rgba(20,3,105,.18);

}

.hero-btn-primary:hover{

    background:var(--primary-light);

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(20,3,105,.30);

}

.hero-btn-outline{

    background:#fff;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:12px;

    padding:13px 28px;

    font-weight:600;

    transition:var(--transition);

}

.hero-btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*=====================================================
=                 RIGHT IMAGE
=====================================================*/

.hero-image-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    height:400px;

}

.hero-image{

    max-height:460px;

    width:auto;

    max-width:100%;

    position:relative;

    z-index:2;

}

/*=====================================================
=             FLOATING CARDS
=====================================================*/

.floating-card{

    position:absolute;

    width:80px;

    height:80px;

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

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

    z-index:20;

}

.floating-card:hover{

    transform:translateY(-6px) scale(1.05);

}

.floating-card i{

    font-size:34px;

    color:var(--primary-light);

}

/*=====================================================
=              POSITIONS
=====================================================*/

.analytics{

    top:10%;

    left:12%;

}

.ai{

    top:2%;

    right:16%;

}

.security{

    bottom:18%;

    left:4%;

}

.marketing{

    bottom:6%;

    right:3%;

}

.data{

    top:42%;

    right:-2%;

}

/*=====================================================
=          SLIDER NAVIGATION
=====================================================*/

.carousel-control-prev,

.carousel-control-next{

    width:70px;

    opacity:1;

}

.hero-arrow{

    width:60px;

    height:60px;

    background:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.hero-arrow i{

    font-size:24px;

    color:var(--primary);

    transition:var(--transition);

}

.carousel-control-prev:hover .hero-arrow,

.carousel-control-next:hover .hero-arrow{

    background:var(--primary);

    transform:scale(1.08);

}

.carousel-control-prev:hover i,

.carousel-control-next:hover i{

    color:#fff;

}

/*=====================================================
=               INDICATORS
=====================================================*/

.carousel-indicators{

    margin-bottom:18px;

    gap:10px;

}

.carousel-indicators [data-bs-target]{

    width:12px;

    height:12px;

    border-radius:50%;

    border:none;

    background:#ffffff;

    opacity:.45;

    transition:var(--transition);

}

.carousel-indicators .active{

    width:38px;

    border-radius:30px;

    opacity:1;

    background:#fff;

}

/*=====================================================
=          GLASS DECORATION
=====================================================*/

.hero-slide .glass{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:var(--glass);

    backdrop-filter:blur(18px);

    filter:blur(2px);

}
/*=====================================================
=            PREMIUM BACKGROUNDS
=====================================================*/

.slide-purple{
    background:linear-gradient(135deg,#140369,#5E3BEE,#8B5CF6);
}

.slide-ai{
    background:linear-gradient(135deg,#24135f,#5f3bff,#8d67ff);
}

.slide-web{
    background:linear-gradient(135deg,#16235d,#3459ff,#638dff);
}

.slide-powerbi{
    background:linear-gradient(135deg,#3a0c62,#6b21d8,#a855f7);
}

.slide-laravel{
    background:linear-gradient(135deg,#1d1b7d,#5B21B6,#7C3AED);
}

/*=====================================================
=            DECORATIVE SHAPES
=====================================================*/

.hero-slide .shape-1,
.hero-slide .shape-2,
.hero-slide .shape-3{

    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    filter:blur(1px);

}

.hero-slide .shape-1{

    width:520px;
    height:520px;
    top:-240px;
    right:-140px;

}

.hero-slide .shape-2{

    width:340px;
    height:340px;
    bottom:-120px;
    left:-120px;

}

.hero-slide .shape-3{

    width:170px;
    height:170px;
    right:30%;
    top:15%;

}

/*=====================================================
=            DEFAULT ANIMATION STATE
=====================================================*/

.hero-card,
.hero-image,
.floating-card{

    opacity:0;

}

.hero-card{

    transform:translateX(-40px);

}

.hero-image{

    transform:translateX(70px) scale(.92);

}

.floating-card{

    transform:translateY(30px);

}

/*=====================================================
=            ACTIVE SLIDE ANIMATIONS
=====================================================*/

.carousel-item.active .hero-card{

    animation:heroText .8s ease forwards;

}

.carousel-item.active .hero-buttons{

    animation:heroButtons .9s .25s ease forwards;
    opacity:0;

}

.carousel-item.active .hero-image{

    animation:heroImage .9s .15s ease forwards;

}

.carousel-item.active .floating-card{

    animation:floatingAppear .8s ease forwards;

}

.carousel-item.active .analytics{

    animation-delay:.20s;

}

.carousel-item.active .ai{

    animation-delay:.35s;

}

.carousel-item.active .security{

    animation-delay:.50s;

}

.carousel-item.active .marketing{

    animation-delay:.65s;

}

.carousel-item.active .data{

    animation-delay:.80s;

}

/*=====================================================
=            KEYFRAMES
=====================================================*/

@keyframes heroText{

    from{

        opacity:0;
        transform:translateX(-40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes heroButtons{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes heroImage{

    from{

        opacity:0;
        transform:translateX(80px) scale(.90);

    }

    to{

        opacity:1;
        transform:translateX(0) scale(1);

    }

}

@keyframes floatingAppear{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

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

    }

    50%{

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

    }

    100%{

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

    }

}

/*=====================================================
=            FLOATING LOOP
=====================================================*/

.carousel-item.active .floating-card{

    animation-name:floatingAppear,floating;
    animation-duration:.8s,4s;
    animation-delay:0s,.8s;
    animation-fill-mode:forwards,none;
    animation-iteration-count:1,infinite;
    animation-timing-function:ease,ease-in-out;

}

.carousel-item.active .hero-card{

    animation:heroText .8s ease forwards,
              pulseGlow 5s ease-in-out infinite;

}

/*=====================================================
=            IMAGE EFFECT
=====================================================*/

.hero-image{

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

    transition:.4s;

}

.hero-image:hover{

    transform:scale(1.02);

}

/*=====================================================
=            CARD EFFECT
=====================================================*/

.hero-card{

    backdrop-filter:blur(10px);

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

}

/*=====================================================
=            FLOATING CARD EFFECT
=====================================================*/

.floating-card{

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

}

.floating-card:hover{

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

}

/*=====================================================
=            TABLET
=====================================================*/

@media(max-width:991px){

.hero-slide{

    min-height:340px;

}

.hero-card{

    max-width:100%;
    padding:30px;

}

.hero-title{

    font-size:36px;

}

.hero-description{

    font-size:18px;

}

.hero-image{

    max-height:360px;

}

.analytics,
.ai,
.security,
.marketing,
.data{

    width:70px;
    height:70px;

}

.floating-card i{

    font-size:28px;

}

.hero-arrow{

    width:52px;
    height:52px;

}

}

/*=====================================================
=            MOBILE
=====================================================*/

@media(max-width:767px){

.hero-slide{

    min-height:auto;
    padding:50px 0;

}

.hero-card{

    margin:auto;
    text-align:center;
    padding:30px 22px;

}

.hero-title{

    font-size:30px;

}

.hero-description{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-btn-primary,
.hero-btn-outline{

    width:100%;

}

.hero-image-wrapper{

    margin-top:40px;
    height:auto;

}

.hero-image{

    max-height:300px;

}

.analytics,
.ai,
.security,
.marketing,
.data{

    display:none;

}

.carousel-control-prev,
.carousel-control-next{

    display:none;

}

.carousel-indicators{

    bottom:-5px;

}

}

/*=====================================================
=            SMALL MOBILE
=====================================================*/

@media(max-width:480px){

.hero-title{

    font-size:26px;

}

.hero-description{

    font-size:15px;
    line-height:1.7;

}

.hero-card{

    border-radius:16px;

}

.hero-image{

    max-height:240px;

}

}
.animate-card{
    animation:heroText .8s forwards;
}

.animate-image{
    animation:heroImage .9s forwards;
}

.animate-buttons{
    animation:heroButtons .8s forwards;
}

.animate-floating{
    animation:floatingAppear .7s forwards,
             floating 4s ease-in-out infinite;
}