/* ========================================
   HEADER LAYOUT FIX - THREE COLUMN LAYOUT
   Logo LEFT | Menu CENTER | Auth RIGHT
   ======================================== */

/* Main navbar container - flex layout */
.navbar.header-nav-three .container,
.header-nav-three .container,
nav.navbar .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    padding: 0 30px !important;
    height: 80px !important;
}

/* LEFT: Logo section */
.navbar-header {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-header .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
}

/* CENTER: Main menu wrapper */
.main-menu-wrapper {
    flex: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
}

/* Center menu navigation */
.main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    flex-wrap: wrap !important;

}

.main-nav li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #333333 !important; /* Dark text for white background */
    font-weight: 500 !important;
    font-size: 15px !important;
    text-decoration: none;
    white-space: nowrap;
}

.main-nav .nav-link {
    display: inline-block !important;
    padding: 10px 15px !important;
    white-space: nowrap !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: #6c63ff !important;
}

/* RIGHT: Auth buttons section (Cart, Login, Register, User) */
ul.header-navbar-rht,
.header-navbar-rht,
.nav.header-navbar-rht {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    list-style: none !important;
    order: 3 !important;
    min-width: fit-content !important;
}
.coming-soon,
.banner-image,
.hero-image,
img {
    max-width: 100%;
}
/* Force nav items to display inline */
ul.header-navbar-rht li,
.header-navbar-rht .nav-item {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cart and user icons */
.header-navbar-rht .cart-nav,
.header-navbar-rht .user-nav {
    display: inline-flex !important;
    align-items: center !important;
}

/* User nav link styling */
.header-navbar-rht .user-nav-link,
.header-navbar-rht .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    padding: 8px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.header-navbar-rht .user-nav-link:hover,
.header-navbar-rht .nav-link:hover {
    color: #6c63ff !important;
}

/* Mobile menu toggle */
#mobile_btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

#mobile_btn .bar-icon span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Header Top Bar Alignment */
.header-top .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
}

.header-top .d-flex {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.header-top .dropdown {
    margin: 0 !important;
}

.header-top .icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-left: 15px !important;
}

.header-top .icon-btn i {
    font-size: 14px !important;
}

/* Responsive styles */
@media (max-width: 991px) {
    #mobile_btn {
        display: block !important;
    }
    
    .navbar-header {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    .main-menu-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 300px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        order: 2 !important;
        display: block !important;
        padding: 20px !important;
    }
    
    .main-menu-wrapper.show {
        left: 0 !important;
    }
    
    .main-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .main-nav li {
        width: 100% !important;
    }
    
    .main-nav .nav-link {
        width: 100% !important;
        padding: 12px 15px !important;
        display: block !important;
    }
    
    .navbar.header-nav-three .container {
        flex-wrap: nowrap !important;
    }
    
    ul.header-navbar-rht,
    .header-navbar-rht {
        gap: 10px !important;
        order: 3 !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }
    
    .header-top .container {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    
    .header-top .icon-btn {
        margin-left: 0 !important;
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .header-navbar-rht .nav-link {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }
    
    ul.header-navbar-rht,
    .header-navbar-rht {
        gap: 8px !important;
    }
    
    .header-navbar-rht .user-nav-link {
        font-size: 0 !important;
    }
    
    .header-navbar-rht .user-nav-link i {
        font-size: 18px !important;
    }
    
    .navbar-header .navbar-brand img {
        max-height: 40px !important;
    }
}


/* --- BENEFIT HEADER FIX (PROPER STACK LAYOUT) --- */
body .benefit-section .section-header {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* Label (Our Benefits) */
    body .benefit-section .section-header span {
        white-space: normal !important; /* IMPORTANT FIX */
        display: inline-block;
    }

    /* Heading */
    body .benefit-section .section-header h2 {
        font-size: 32px !important;
        font-weight: 700 !important;
        color: #222 !important;
        line-height: 1.4 !important;
        white-space: normal !important; /* allow wrap */
        max-width: 800px; /* controls line break */
    }

    /* Paragraph */
    body .benefit-section .section-header p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #555 !important;
        max-width: 700px;
        margin: 0 auto !important;
        white-space: normal !important;
    }


body a.nav-link {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* BENEFIT SECTION WHITE BACKGROUND */
.benefit-section {
    background: #ffffff !important;
    padding: 80px 0 !important;
}

    /* Container width fix */
    .benefit-section .container {
        max-width: 1200px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Heading black */
    .benefit-section .section-header h2 {
        color: #111111 !important;
    }

    /* Paragraph gray */
    .benefit-section .section-header p {
        color: #666666 !important;
    }

    /* Top label pink */
    .benefit-section .section-header span {
        color: #ff4d6d !important;
    }

    /* Cards */
    .benefit-section .benefit-card,
    .benefit-section .feature-item,
    .benefit-section .course-group {
        background: #ffffff !important;
        box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 230px !important;
        border-radius: 12px !important;
        padding: 30px !important;
    }

    /* Row spacing */
    .benefit-section .row {
        row-gap: 25px !important;
    }

/* Sidebar overlay for mobile menu */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
    display: block;
}

/* ========================================
   COURSE CARDS GRID LAYOUT
   Consistent alignment for preview cards
   ======================================== */

/* Course list container  course grid*/
.course-list,
.course-grid,
.courses-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 0px !important;
    justify-items: center !important;
    padding: 0px 0 !important;
    overflow: hidden !important;
    white-space: normal !important; /* allow wrapping */
    word-break: break-word;
}

/* Individual course card   course grid*/
.course-card,
.course-item,
.single-demo {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 10px;
}

    /* Course grid */
.course-card:hover,
.course-item:hover,
.single-demo:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-5px) !important;
}

/* Course card image course grid */
    .course-card img,
    .course-item img,
    .demo-img img {
        width: 300% !important;
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
        object-position: center;
        display: block;
    }

    /* Course card content  course grid*/
.course-card .demo-info,
.course-item .course-content,
.single-demo .demo-info {
    padding: 20px !important;
    text-align: center !important;
}
    /* Course grid */
    .course-card h6,
    .course-card .title,
    .demo-info a {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 10px 0 !important;
        text-decoration: none !important;
    }

/* Responsive grid for course cards */
@media (max-width: 1200px) {
    .course-list,
    .course-grid,
    .courses-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .course-list,
    .course-grid,
    .courses-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 576px) {
    .course-list,
    .course-grid,
    .courses-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Course image */

a {
    color: var(--gray-900);
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.img-fluid {
    max-width: 1000%;
    width: 30%;
    height: 0%;
}
p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

td, th {
    white-space: normal;
    word-break: break-word;
}

 
    /* --- BUG #108: SEARCH BOX HIGHLIGHT --- */
    body .search-filter, body div[class*="search"] {
    border: 2px solid #6c63ff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2) !important;
}


.course-category-three {
    padding: 40px 0 60px;
    text-align: center;
    position: relative;

    @include mixins.respond-below(lg) {
        padding: 40px 0 50px;
    }

    .btn {
        margin-top: 16px;
        padding: 7px 16px;
        background-color: variables.$primary;
        border-color: variables.$primary;

        &:hover {
            background-color: variables.$secondary;
            border-color: variables.$secondary;
        }
    }

    p {
        color: var(--gray-500);
    }

    .course-bg3 {
        right: 0px;
        bottom: 0;
        z-index: -0;
    }

    .course-group {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        transition: all 0.5s;
        margin-bottom: 30px;
        flex-direction: column; /* Ensures vertical stacking like the theme */
    }

    .course-group-img img {
        width: 60px; /* Adjust based on theme icon size */
        margin-bottom: 15px;
    }
    /* Course Category 3 */
    /*  
      .category-item-3-image {
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

        .category-item-3-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }  */

    .course-category-three .category-item-3 img {
        .category-item-3 {
            border: 1px solid #eee;
            box-shadow: variables.$box-shadow-xs-2;
            border-radius: 12px;
            margin-bottom: 24px;
            overflow: hidden;
            background: #fff;
            text-align: center;

            img {
                transition: 0.5s;
                max-width: 200%;
                height: auto;
            }

            .img-fluid {
                max-width: 200%;
                height: auto;
            }

            &:hover {
                .course-category-3-item-image {
                    img {
                        transform: scale(1.1);
                    }
                }
            }

            .course-category-3-item-image {
                overflow: hidden;
                border-radius: 10px 10px 0 0;
            }

            .course-category-3-card-body {
                padding: 20px;

                h6 {
                    font-size: variables.$font-size-18;
                    font-weight: variables.$font-weight-bold;

                    &:hover {
                        color: variables.$secondary;
                    }
                }

                p {
                    color: variables.$gray-500;
                    font-size: variables.$font-size-16;
                    text-decoration: underline;
                }
            }
        }
    }
}
    /* ========================================
   SIDEBAR NAVIGATION ALIGNMENT
   Vertical list of links
   ======================================== */
    /* Sidebar container */
    .sidebar,
    .sidebar-menu,
    .side-navigation {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    }
        /* Sidebar links */
        .sidebar a,
        .sidebar-menu a,
        .side-navigation a {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 12px 15px !important;
            text-align: left !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            color: #333 !important;
            text-decoration: none !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
        }

            .sidebar a:hover,
            .sidebar-menu a:hover,
            .side-navigation a:hover {
                background: #f5f5f5 !important;
                color: #6c63ff !important;
            }

            .sidebar a.active,
            .sidebar-menu a.active,
            .side-navigation a.active {
                background: #6c63ff !important;
                color: #ffffff !important;
            }

            .sidebar a i,
            .sidebar-menu a i,
            .side-navigation a i {
                font-size: 16px !important;
                width: 20px !important;
                text-align: center !important;
            }
    /* ========================================
   FLOATING MENU (Purple Menu)
   Fixed positioning
   ======================================== */

    .floating-menu,
    .fixed-menu,
    .quick-actions {
        position: fixed !important;
        right: 20px !important;
        bottom: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        z-index: 1000 !important;
    }

        .floating-menu a,
        .fixed-menu a,
        .quick-actions a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 50px !important;
            height: 50px !important;
            background: #6c63ff !important;
            color: #ffffff !important;
            border-radius: 50% !important;
            box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3) !important;
            transition: all 0.3s ease !important;
            text-decoration: none !important;
        }

            .floating-menu a:hover,
            .fixed-menu a:hover,
            .quick-actions a:hover {
                background: #5a52e0 !important;
                transform: scale(1.1) !important;
                box-shadow: 0 6px 16px rgba(108, 99, 255, 0.4) !important;
            }

            .floating-menu a i,
            .fixed-menu a i,
            .quick-actions a i {
                font-size: 20px !important;
            }
    /* Responsive floating menu */
    @media (max-width: 768px) {
        .floating-menu,
        .fixed-menu,
        .quick-actions {
            right: 15px !important;
            bottom: 15px !important;
        }

            .floating-menu a,
            .fixed-menu a,
            .quick-actions a {
                width: 45px !important;
                height: 45px !important;
            }
    }


    lidation-summary-errors,
    .validation-summary-valid,
    div[data-valmsg-summary="true"],
    ul.text-danger,
    form ul {
        display: none !important;
    }

    span.field-validation-error,
    .text-danger.field-validation-error {
        display: block !important;
        color: #ff0000 !important;
        font-size: 13px !important;
        margin-top: 5px !important;
        font-weight: 500;
    }

    input.input-validation-error {
        border: 1px solid #ff0000 !important;
    }
    /* Showing 19 - 18 of 24 results text*/

    .show-result {
        display: flex !important;
        justify-content: space-between;
        align-items: center !important;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 20px !important;
        flex: 1 !important;
    }


        .show-result h4 {
            margin: 0 !important;
            font-size: 15px;
            color: #777;
            display: flex !important;
            justify-content: space-between;
            align-items: center !important;
            margin-top: 30px;
            flex-wrap: wrap;
            gap: 20px !important;
            flex: 1 !important;
        }


    .pagination {
        margin: 0 !important;
    }
    /* ========================================
   COURSE GRID PAGE - SCOPED STYLES
   Prevents global selector conflicts
   ======================================== */
    /* Scope all course grid styles to prevent conflicts */
    .course-grid-page.course-content {
        padding: 50px 0 !important;
        background: #f8f9fa !important;
    }
    /* CRITICAL: Ensure header is NOT affected by course page styles */
    .course-grid-page .header,
    .course-grid-page .navbar,
    .course-grid-page header,
    .course-grid-page .header-nav,
    .course-grid-page .header-navbar-rht,
    .course-grid-page .navbar-header,
    .course-grid-page .main-menu-wrapper {
        all: revert !important;
    }
    /* Prevent body styles from affecting header */
    body .header,
    body .navbar,
    body header {
        all: revert !important;
    }
    /* Course Section - scoped to page content only */
    .course-grid-page .course-content,
    section.course-content {
        padding: 50px 0 !important;
        background: #f8f9fa !important;
    }
        /* Showing List Container - scoped to course content */
        section.course-content .showing-list,
        .course-grid-page .showing-list {
            background: #ffffff !important;
            border-radius: 12px !important;
            padding: 20px 25px !important;
            margin-bottom: 30px !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
        }

            section.course-content .showing-list .row,
            .course-grid-page .showing-list .row {
                display: flex !important;
                /* flex-direction: row !important;*/
                justify-content: space-between !important; /* This is the key for Left/Right split */
                align-items: center !important;
                width: 100% !important;
            }
        /* Left Side - Show Result - scoped */
        section.course-content .show-result,
        .course-grid-page .show-result {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            padding-right: 20px !important;
        }

            section.course-content .show-result h6,
            .course-grid-page .show-result h6 {
                font-size: 15px !important;
                font-weight: 600 !important;
                color: #333333 !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }
        /* Right Side - Filter Controls - scoped --newly published*/
        /* Move view icons near search bar (RIGHT SIDE GROUP) */
        section.course-content .show-filter,
        .course-grid-page .show-filter {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 15px !important;
            flex: 1 !important;
        }
        /* search button course grid align*/
.btn.btn-primary {
    background-color: #342777;
    border: 3px vertical #342777;
    color: var(--white);
    white-space: nowrap; 
    min-width: 100px; 
    padding: 10px 20px; 
    font-size: 16px;
}

        /* Put everything in one line */
        section.course-content .filter-controls,
        .course-grid-page .filter-controls {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 15px !important;
        }
        /* 🔥 KEY FIX: Change order */
        section.course-content .view-icons,
        .course-grid-page .view-icons {
            /*  order: 1 !important;  FIRST */
            order: 2 !important;
            margin: 0 !important;
            background: #f5f5f5 !important;
            border-radius: 8px !important;
            padding: 5px !important;
            display: flex !important;
            gap: 8px !important;
        }

        section.course-content .search-group,
        .course-grid-page .search-group {
            order: 1 !important;
            min-width: 200px !important;
            /* order: 2 !important;  SECOND */
        }

        section.course-content .form-select,
        .course-grid-page .form-select {
            order: 3 !important; /* THIRD */
            margin: 0 !important;
        }

        section.course-content .view-icons a.active,
        .course-grid-page .view-icons a.active {
            width: 36px !important;
            height: 36px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #ffffff !important;
            color: #6c63ff !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        }
        /* Select Dropdown - scoped */
        section.course-content .filter-controls .form-select,
        .course-grid-page .filter-controls .form-select {
            min-width: 180px !important;
            height: 45px !important;
            padding: 10px 40px 10px 15px !important;
            border: 1px solid #e0e0e0 !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            color: #333333 !important;
            background-color: #ffffff !important;
            background-position: right 15px center !important;
            flex-shrink: 0 !important;
            cursor: pointer !important;
        }

            section.course-content .filter-controls .form-select:focus,
            .course-grid-page .filter-controls .form-select:focus {
                border-color: #6c63ff !important;
                box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
                outline: none !important;
            }
        /* Search Group - scoped */
        section.course-content .search-group,
        .course-grid-page .search-group {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            min-width: 100px !important;
            flex-shrink: 0 !important;
        }

            section.course-content .search-group input.form-control,
            .course-grid-page .search-group input.form-control {
                width: 100% !important;
                height: 45px !important;
                padding: 10px 15px 10px 45px !important;
                border: 1px solid #e0e0e0 !important;
                border-radius: 8px !important;
                font-size: 14px !important;
                color: #333333 !important;
                background-color: #ffffff !important;
            }
                /*search our courses */
                section.course-content .search-group input.form-control:focus,
                .course-grid-page .search-group input.form-control:focus {
                    border-color: #6c63ff !important;
                    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
                    outline: none !important;
                }

                section.course-content .search-group input.form-control::placeholder,
                .course-grid-page .search-group input.form-control::placeholder {
                    color: #999999 !important;
                }

            section.course-content .search-group i,
            .course-grid-page .search-group i {
                position: absolute !important;
                left: 15px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                color: #999999 !important;
                font-size: 18px !important;
                pointer-events: none !important;
                z-index: 2 !important;
            }
        /* Sidebar and Content Layout - scoped */
        section.course-content > .container > .row,
        .course-grid-page > .container > .row {
            display: flex !important;
            align-items: flex-start !important;
            gap: 30px !important;
        }

        section.course-content .col-lg-3,
        .course-grid-page .col-lg-3 {
            flex: 0 0 calc(25% - 15px) !important;
            max-width: calc(25% - 15px) !important;
        }

        section.course-content .col-lg-9,
        .course-grid-page .col-lg-9 {
            flex: 0 0 calc(75% - 15px) !important;
            max-width: calc(75% - 15px) !important;
        }
        /* Filter Sidebar - scoped */
        section.course-content .filter-clear,
        .course-grid-page .filter-clear {
            background: #ffffff !important;
            border-radius: 12px !important;
            padding: 25px !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
            position: sticky !important;
            top: 100px !important;
        }
        /* Course Grid - scoped */
        section.course-content .row.g-4,
        .course-grid-page .row.g-4 {
            display: flex !important;
            flex-wrap: wrap !important;
            margin: 0 -12px !important;
        }

        section.course-content .col-xl-4,
        .course-grid-page .col-xl-4 {
            flex: 0 0 33.333333% !important;
            max-width: 33.333333% !important;
            padding: 0 12px !important;
            margin-bottom: 24px !important;
        }
        /* Course Item Cards - scoped */
        section.course-content .course-item,
        .course-grid-page .course-item {
            height: 100% !important;
            background: #ffffff !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
            transition: all 0.3s ease !important;
        }

            section.course-content .course-item:hover,
            .course-grid-page .course-item:hover {
                box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
                transform: translateY(-5px) !important;
            }
    /* Responsive Breakpoints - scoped to course content */
    @media (max-width: 1199px) {
        section.course-content .col-lg-3,
        .course-grid-page .col-lg-3 {
            flex: 0 0 calc(30% - 15px) !important;
            max-width: calc(30% - 15px) !important;
        }

        section.course-content .col-lg-9,
        .course-grid-page .col-lg-9 {
            flex: 0 0 calc(70% - 15px) !important;
            max-width: calc(70% - 15px) !important;
        }
    }

    @media (max-width: 991px) {
        section.course-content > .container > .row,
        .course-grid-page > .container > .row {
            flex-direction: column !important;
            gap: 30px !important;
        }

        section.course-content .col-lg-3,
        section.course-content .col-lg-9,
        .course-grid-page .col-lg-3,
        .course-grid-page .col-lg-9 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        section.course-content .filter-clear,
        .course-grid-page .filter-clear {
            position: relative !important;
            top: 0 !important;
        }

        section.course-content .showing-list .row,
        .course-grid-page .showing-list .row {
            flex-direction: column !important;
            gap: 15px !important;
        }

        section.course-content .showing-list .col-lg-4,
        section.course-content .showing-list .col-lg-8,
        .course-grid-page .showing-list .col-lg-4,
        .course-grid-page .showing-list .col-lg-8 {
            width: 50% !important;
            max-width: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 15px !important;
            flex: 1 !important;
        }

        section.course-content .show-result,
        .course-grid-page .show-result {
            justify-content: center !important;
            padding-right: 0 !important;
        }

        section.course-content .show-filter,
        .course-grid-page .show-filter {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 10px !important;
            flex-wrap: nowrap !important;
        }

        section.course-content .filter-controls,
        .course-grid-page .filter-controls {
            justify-content: center !important;
            flex-wrap: wrap !important;
        }
    }

    @media (max-width: 767px) {
        section.course-content .col-xl-4,
        .course-grid-page .col-xl-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }

    @media (max-width: 576px) {
        section.course-content,
        .course-grid-page {
            padding: 30px 0 !important;
        }

            section.course-content .showing-list,
            .course-grid-page .showing-list {
                padding: 20px 15px !important;
            }

            section.course-content .filter-controls,
            .course-grid-page .filter-controls {
                flex-direction: column !important;
                width: 100% !important;
                gap: 12px !important;
            }

            section.course-content .view-icons,
            section.course-content .form-select,
            section.course-content .search-group,
            .course-grid-page .view-icons,
            .course-grid-page .form-select,
            .course-grid-page .search-group {
                width: 100% !important;
                min-width: 100% !important;
            }

            section.course-content .view-icons,
            .course-grid-page .view-icons {
                order: 1 !important;
            }
    }
    /* ========================================
   CRITICAL FIX: FORCE RIGHT ALIGNMENT FOR AUTH
   MAXIMUM PRIORITY - OVERRIDE EVERYTHING
   ======================================== */
    /* CRITICAL: Protect header from page-specific CSS */
    header,
    header *,
    .header,
    .header *,
    .navbar,
    .navbar *,
    .header-nav,
    .header-nav * {
        /* Prevent any page-specific styles from affecting header */
    }
        /* Force the container to use flexbox */
        .header-nav-three .container,
        .navbar.header-nav-three > .container,
        .navbar-expand-lg .container {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            height: 80px; /* Standard height for this design */
            padding: 0 30px;
            background-color: #2b235a; /* Matching your dark theme */
            flex-wrap: nowrap !important;
            height: 80px !important;
        }
        /* Force auth section to the RIGHT with maximum specificity */
        header .navbar ul.nav.header-navbar-rht,
        header .navbar ul.header-navbar-rht,
        header ul.nav.header-navbar-rht,
        header ul.header-navbar-rht,
        ul.nav.header-navbar-rht,
        ul.header-navbar-rht,
        .nav.header-navbar-rht,
        .header-navbar-rht {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-end !important;
            margin-left: auto !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            list-style: none !important;
            flex-shrink: 0 !important;
            order: 3 !important;
            position: relative !important;
            left: auto !important;
            right: 0 !important;
            float: none !important;
            text-align: right !important;
        }
        /* Force logo to left */
        header .navbar-header,
        .navbar-header {
            order: 1 !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }
        /* Force menu to center */
        header .main-menu-wrapper,
        .main-menu-wrapper {
            position: static !important;
            flex: 1;
            display: flex !important;
            justify-content: center !important;
            transform: none !important;
        }
    /* Force items to display horizontally on right */
    .header-navbar-rht > li,
    .header-navbar-rht > .nav-item,
    ul.header-navbar-rht > li,
    ul.header-navbar-rht > .nav-item {
        display: inline-flex !important;
        float: none !important;
        position: relative !important;
    }
    /* Remove any float or absolute positioning */
    .header-navbar-rht,
    .header-navbar-rht *,
    ul.header-navbar-rht,
    ul.header-navbar-rht * {
        float: none !important;
        position: relative !important;
    }
    /* Ensure no text-align interference */
    .header-navbar-rht {
        text-align: right !important;
    }
    /* ================= HEADER FIX ================= */
    .header-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: #ffffff !important; /* Change to white as seen in ref image */
        height: 90px !important;
        padding: 0 40px !important;
        position: relative;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-menu-wrapper {
        position: static !important;
        flex: 1;
        display: flex !important;
        justify-content: center !important;
        transform: none !important;
    }

.header-btn {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    /* ================= COURSE GRID FIX ================= */
    .course-content .row {
        display: flex;
        flex-wrap: wrap;
    }

    .course-item-two {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        .course-item-two .course-content {
            flex: 1;
        }

    .course-content .col-xl-4,
    .course-content .col-md-6 {
        margin-bottom: 25px;
    }
}

.about-image-wrapper {
    position: relative;
    padding: 40px;
    display: inline-block;
}

.about-main-image {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    width: 100%;
    max-width: 570px;
}

/* Purple Shape */
.shape-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

/* Pink Shape */
.shape-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

/* Yellow Arrow */
.shape-3 {
    position: absolute;
    bottom: 50px;
    left: -20px;
    z-index: 3;
}

/* Shape Image Sizes */
.shape img {
    max-width: 100%;
    height: auto;
}

.institutions-items img {
    width: 70%;
    display: block;
}


.testimonials-item {
    padding: 40px 25px;
    text-align: center;
    min-height: 320px;
}

    /* Image Center */
    .testimonials-item .position-relative {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    /* Avatar Size */
    .testimonials-item .avatar {
        max-width: 100%;
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 100%;
    }

        /* FIX IMAGE */
        .testimonials-item .avatar img {
            max-width: 500%;
            width: 100% !important;
            height: 100px !important;
            object-fit: cover;
            border-radius: 300px !important;
            display: block;
        }

    /* Quote Alignment */
    .testimonials-item .quote {
        position: absolute;
        right: 130px;
        bottom: 4px;
        background: #ff4d6d;
        color: #fff;
    }

    /* Stars */
    .testimonials-item .fa-star {
        font-size: 16px;
        margin: 0 2px;
    }

.faq-img-wrap img {
    height: 100%;
    min-height: 650px;
    object-fit: cover;
}

.faq-section {
    padding: 80px 0;
}


.footer-contact-info .footer-address img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.footer-contact-info .footer-address {
    gap: 12px;
    margin-bottom: 20px;
}

    .footer-contact-info .footer-address p {
        margin-bottom: 0;
        line-height: 1.5;
    }


.custom-image {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 20px;
}



.share-your-knowledge-img {
    min-height: 600px;
    position: relative;
}

.big-image {
    width: 280px;
    height: 350px;
    object-fit: cover;
}

/* Optional positioning */
.become-instructor-bg-04 {
    position: absolute;
    left: 20px;
    top: 80px;
}

.become-instructor-bg-05 {
    position: absolute;
    right: 20px;
    top: 180px;
}

.login-content {
    min-height: 50vh;
}

.login-wrapper {
    width: 100%;
    max-width: 520px;
    margin: auto;
    padding: 40px;
}

.loginbox {
    width: 150%;
}

.login-carousel-section {
    max-width: 500px;
    margin: auto;
}

.login-banner img {
    max-width: 500px;
}

.login-carousel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 40px 20px;
}

.login-banner {
    margin-bottom: 30px;
}

.mentor-course {
    margin-top: 10px;
}

    .mentor-course h3 {
        font-size: 52px;
        line-height: 70px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .mentor-course p {
        font-size: 18px;
        line-height: 32px;
        color: #6b7280;
        max-width: 560px;
        margin: 0 auto;
        text-align: center;
    }

.slick-dots {
    margin-top: 35px !important;
    position: relative !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: center;
    gap: 10px;
}
/* Custom Dots */

.slick-dots-custom {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-left: 0;
}

    .slick-dots-custom li {
        list-style: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #d1d5db;
    }

        .slick-dots-custom li.active {
            width: 35px;
            border-radius: 20px;
            background: #ff4667;
        }

/* UNDER CONSTRUCTION IMAGE SIZE FIX */

.error-box {
    text-align: center;
    padding: 80px 20px;
}

.error-box-img {
    margin-bottom: 30px;
}

    .error-box-img img {
        width: 100%;
        max-width: 650px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

/* Title */
.error-box h3 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Description */
.error-box p {
    font-size: 22px;
    margin-bottom: 30px;
}

/* Mobile Responsive */
@media (max-width: 768px) {

    .error-box-img img {
        max-width: 90%;
    }

    .error-box h3 {
        font-size: 32px;
    }

    .error-box p {
        font-size: 18px;
    }
}

/* =====================================
   COURSE IMAGE ALIGNMENT FIX
===================================== */

/* course card */
.course-item-two {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

/* image container */
.course-img {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

    /* image */
    .course-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        border-radius: 20px 20px 0 0;
    }

/* remove image stretching */
.swiper-slide {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* fix rotated cards */
.swiper-slide-next,
.swiper-slide-prev {
    overflow: hidden;
}

/* fix content */
.course-content,
.content-course {
    padding: 20px;
    background: #fff;
}



/*blcok carousel*/
.blog-slide {
    padding: 12px;
}

.blog {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: 0.3s;
    height: 100%;
}

    .blog:hover {
        transform: translateY(-5px);
    }

.blog-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

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

.blog-item {
    padding: 20px;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.user-profile img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.slick-prev,
.slick-next {
    z-index: 1000;
}

.slick-prev {
    left: -15px;
}

.slick-next {
    right: -15px;
}

    .slick-prev:before,
    .slick-next:before {
        color: #000;
        font-size: 28px;
    }

.slick-dots li button:before {
    font-size: 12px;
    color: #6c63ff;
}


.blog-carousel .slick-slide {
    padding: 10px;
}

.blog-carousel .blog {
    margin: 0 10px;
}

.slick-prev,
.slick-next {
    z-index: 999;
}

.slick-prev {
    left: -25px;
}

.slick-next {
    right: -25px;
}

    .slick-prev:before,
    .slick-next:before {
        color: black;
        font-size: 30px;
    }



/* ========================================
   GLOBAL IMAGE FIX
======================================== */

img,
.img-fluid {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

/* ========================================
   COURSE CARD IMAGE FIX
======================================== */

.course-card img,
.course-item img,
.demo-img img,
.course-img img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px 12px 0 0 !important;
}

/* ========================================
   COURSE CARD FIX
======================================== */

.course-card,
.course-item,
.single-demo,
.course-item-two {
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #fff !important;
}

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

.header-nav-three .container,
.navbar.header-nav-three .container,
nav.navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* logo */
.navbar-header {
    flex: 0 0 auto !important;
}

/* menu center */
.main-menu-wrapper {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

/* right menu */
.header-navbar-rht {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* ================================
   INSTITUTIONS LOGO SECTION FIX
================================ */

/* Section spacing */
.client-section {
    padding: 40px 0;
    background: #fff;
    overflow: hidden;
}

/* Slider alignment */
.institutions-slider-rtl .slick-track {
    display: flex !important;
    align-items: center !important;
}

/* Each logo item */
.institutions-items {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding: 10px;
}

    /* Image size fix */
    .institutions-items img {
        max-width: 140px;
        width: auto !important;
        height: 40px !important;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

/* Prevent vertical stacking */
.slick-slide {
    float: left !important;
    height: auto !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .institutions-items img {
        max-width: 100px;
        height: 30px !important;
    }
}


/* ======================================
   TOP COURSES & CATEGORIES ALIGN FIX
====================================== */

.top-courses-sec {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

/* Slider row fix */
.top-courses-slider-rtl .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

/* Each slide spacing */
.top-courses-slider-rtl .slick-slide {
    height: auto !important;
    padding: 0 10px;
}

    /* Remove block issue */
    .top-courses-slider-rtl .slick-slide > div {
        height: 100%;
    }

/* Category card */
.categories-item-three {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
    min-height: 190px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

    /* Hover effect */
    .categories-item-three:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }

    /* Image alignment */
    .categories-item-three img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain;
        margin-bottom: 20px;
    }

    /* Title */
    .categories-item-three .title {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
    }

        .categories-item-three .title a {
            color: #111;
            text-decoration: none;
        }

/* Center button */
.top-courses-sec .btn {
    display: table;
    margin: 40px auto 0;
}

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

    .categories-item-three {
        min-height: 170px;
        padding: 25px 15px;
    }

        .categories-item-three img {
            width: 50px !important;
            height: 50px !important;
        }

        .categories-item-three .title {
            font-size: 16px;
        }
}


/* =========================================
   FEATURED COURSES SECTION
========================================= */
.featured-courses-section

{
    background: #fff;
}

.featured-courses-section .course-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
    height: 100%;
}

    .featured-courses-section .course-item:hover {
        transform: translateY(-5px);
    }

.featured-courses-section .course-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.price-badge {
    background: #ff4667;
    color: #fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.course-title h5 {
    font-size: 18px;
    line-height: 28px;
    margin: 0;
}

    .course-title h5 a {
        color: #111;
        text-decoration: none;
    }

        .course-title h5 a:hover {
            color: #0d6efd;
        }

.course-user img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.buy-course-btn {
    background: #0d6efd;
    color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
}

    .buy-course-btn:hover {
        background: #0b5ed7;
        color: #fff;
    }

/* Slick Slider Spacing */
.feature-course-slider-2-rtl .slick-slide {
    padding: 10px;
}

/* Responsive */
@media (max-width: 991px) {
    .featured-courses-section .course-img img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .featured-courses-section .course-img img {
        height: 180px;
    }

    .course-title h5 {
        font-size: 16px;
        line-height: 24px;
    }
}


/* ========================================
   COURSE USER IMAGE ROUND FIX
   ======================================== */

.course-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Round circle container */
.course-user {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

    /* Image perfect circle */
    .course-user img {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
    }

/* Instructor name */
.course-rating a {
    margin: 0;
    display: flex;
    align-items: center;
}



/* =========================================
   FULL WIDTH COMMUNITY SECTION
========================================= */

.community-to-learn {
    width: 100%;
    background: #f5f5f5;
    padding: 80px 0;
}

    /* REMOVE BOOTSTRAP CONTAINER WIDTH */
    .community-to-learn .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 60px;
        padding-right: 60px;
    }

    /* FULL WIDTH ROW */
    .community-to-learn .row {
        margin: 0;
        width: 100%;
    }

    /* LEFT CONTENT */
    .community-to-learn .col-lg-6:first-child {
        padding-right: 40px;
    }

/* RIGHT IMAGE */
.community-img {
    width: 100%;
    height: 760px;
    position: relative;
}

/* MAIN IMAGE */
.community-img-03 {
    width: 100%;
    max-width: 620px;
    height: 700px;
    object-fit: cover;
    border-radius: 40px;
}

/* =========================================
   HOW IT WORKS SECTION FIX
========================================= */

.how-it-works-sec-two {
    background: #ffffff !important; /* change color here */
    padding: 100px 0 !important;
}

    /* Container */
    .how-it-works-sec-two .container {
        max-width: 1320px !important;
    }

    /* Row alignment */
    .how-it-works-sec-two .row {
        display: flex !important;
        align-items: center !important;
    }

    /* Left image */
    .how-it-works-sec-two .col-lg-6:first-child {
        padding-right: 60px !important;
    }

    /* Image */
    .how-it-works-sec-two img {
        width: 100% !important;
        border-radius: 35px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Heading */
    .how-it-works-sec-two h2 {
        font-size: 52px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    /* Subtitle */
    .how-it-works-sec-two p {
        color: #666666 !important;
        font-size: 18px !important;
        line-height: 1.7 !important;
    }

    /* Steps */
    .how-it-works-sec-two .works-items {
        border-bottom: 1px solid #e5e5e5 !important;
        padding: 30px 0 !important;
        gap: 20px !important;
    }

        /* Last item remove border */
        .how-it-works-sec-two .works-items:last-child {
            border-bottom: 0 !important;
        }

    /* Numbers */
    .how-it-works-sec-two .count {
        font-size: 55px !important;
        font-weight: 700 !important;
        color: #392c7d !important;
        min-width: 80px !important;
        line-height: 1 !important;
    }

    /* Step titles */
    .how-it-works-sec-two h5 {
        font-size: 24px !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
        color: #111111 !important;
    }

/* Mobile */
@media (max-width: 991px) {

    .how-it-works-sec-two {
        padding: 70px 0 !important;
    }

        .how-it-works-sec-two .row {
            flex-direction: column !important;
        }

        .how-it-works-sec-two .col-lg-6:first-child {
            padding-right: 0 !important;
            margin-bottom: 40px !important;
        }

        .how-it-works-sec-two h2 {
            font-size: 38px !important;
        }

        .how-it-works-sec-two .count {
            font-size: 40px !important;
        }
}

/* FEATURED INSTRUCTORS */
.featured-instructor-sec {
    background: #35257a;
    padding: 80px 0;
    overflow: hidden;
}

/* SLIDER */
.featured-instructor-slider-rtl {
    display: flex;
    gap: 25px;
    margin-top: 50px;
}

/* CARD */
.instructor-item-three {
    width: 300px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    overflow: hidden;
    padding: 16px;
}

/* IMAGE BOX */
.instructors-img {
    position: relative;
    width: 100%;
    height: 265px; /* reduce white part */
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
}

    /* EXACT IMAGE FIX */
    .instructors-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
        border-radius: 14px;
    }

/* CONTENT */
.instructor-content {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    /* NAME */
    .instructor-content .title a {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        text-decoration: none;
    }

    /* DESIGNATION */
    .instructor-content .designation {
        color: #d4d4d4;
        font-size: 15px;
    }

    /* RATING */
    .instructor-content .rating {
        color: #fff;
        font-weight: 600;
        margin-bottom: 0;
    }

/* VERIFY ICON */
.verify img {
    width: 28px !important;
    height: 28px !important;
}

/* HEART ICON */
.favourite {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
}

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

    .featured-instructor-slider-rtl {
        flex-direction: column;
        align-items: center;
    }

    .instructor-item-three {
        width: 100%;
        max-width: 340px;
    }

    .instructors-img {
        height: 420px;
    }
}

/* =========================================
   FULL WHITE BACKGROUND FIX
========================================= */

/* Main page background */
body,
.faq-section,
.latest-blog-three,
.footer,
.footer-top,
.footer-bottom {
    background: #ffffff !important;
}

/* Remove purple gradient/bg */
.faq-banner-bg,
.footer-bg {
    background: #ffffff !important;
    background-image: none !important;
}

    /* Hide footer bg images */
    .footer-bg img,
    .faq-bg2,
    .faq-bg3 {
        display: none !important;
    }

/* FAQ section spacing */
.faq-section {
    padding: 80px 0 !important;
}

    /* FAQ headings */
    .faq-section h2,
    .latest-blog-three h2,
    .footer-title {
        color: #111111 !important;
    }

    /* Paragraph colors */
    .faq-section p,
    .latest-blog-three p,
    .footer p,
    .footer a,
    .footer-contact-info p {
        color: #666666 !important;
    }

        /* Footer links */
        .footer a:hover {
            color: #6f42c1 !important;
        }

/* Footer top border */
.footer-top {
    border-top: 1px solid #e5e5e5 !important;
    padding-top: 60px !important;
}

/* Footer bottom */
.footer-bottom {
    border-top: 1px solid #e5e5e5 !important;
    padding: 20px 0 !important;
}

    /* Footer copyright */
    .footer-bottom p,
    .footer-bottom a {
        color: #444444 !important;
    }

/* Newsletter box */
.subscribe-input input {
    background: #f5f5f5 !important;
    border: 1px solid #dddddd !important;
    color: #111111 !important;
}

/* Subscribe button */
.subscribe-input .btn-primary {
    background: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Blog cards */
.event-blog-three {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 16px !important;
    overflow: hidden;
}

    /* Blog titles */
    .event-blog-three h5 a {
        color: #111111 !important;
    }

/* Footer logo section */
.footer-about {
    padding-right: 20px;
}

/* Remove extra bottom purple space */
.footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* BLOG IMAGE FIX */
.blog-img-three {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

    .blog-img-three img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
    }

/* BLOG CARD */
.event-blog-three {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    margin-bottom: 24px;
}

/* BLOG CONTENT */
.latest-blog-content {
    padding: 20px;
}

/* AUTHOR */
.blog-user-top {
    padding: 0 20px 20px;
}

    .blog-user-top img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
    }

/* REMOVE EXTRA PURPLE */
.blog-white-section {
    background: #ffffff !important;
    padding: 80px 0;
}

/* =========================
   BLOG SECTION DESIGN FIX
========================= */

.latest-blog-three {
    padding: 80px 0;
    background: #fff;
}

/* Blog Card */
.event-blog-three {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 25px;
    height: 270px;
    background: #000;
}

/* Main Blog Image */
.blog-img-three img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 20px;
    transition: 0.4s ease;
}

.event-blog-three:hover .blog-img-three img {
    transform: scale(1.05);
}

/* Dark Overlay */
.event-blog-three::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,0.85), rgba(0,0,0,0.15) );
    z-index: 1;
    border-radius: 20px;
}

/* Blog Content */
.latest-blog-content {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    z-index: 2;
}

/* Category + Date */
.event-span-three {
    margin-bottom: 12px;
    gap: 15px;
}

.category {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
}

.blog-date {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Blog Title */
.event-three-title h5 {
    margin: 0;
    line-height: 1.4;
}

    .event-three-title h5 a,
    .event-three-title h5 {
        color: #fff !important;
        font-size: 20px;
        font-weight: 700;
        text-decoration: none;
    }

/* Author Section */
.blog-user-top {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

    .blog-user-top a {
        background: #6c2bff;
        color: #fff;
        border-radius: 30px;
        padding: 6px 14px 6px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    /* Small Circle Author Image */
    .blog-user-top img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
    }

/* Section Heading */
.latest-blog-three .section-header h2 {
    font-size: 54px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}

.latest-blog-three .section-header p {
    font-size: 22px;
    color: #666;
}

/* Button */
.btn-view-all {
    background: #000;
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 991px) {

    .latest-blog-three .section-header h2 {
        font-size: 38px;
    }

    .latest-blog-three .section-header p {
        font-size: 18px;
    }

    .event-three-title h5 a {
        font-size: 18px;
    }
}


/* =========================
   INSTRUCTOR ROUND IMAGE FIX
========================= */

/* Avatar container */
.course-content .avatar.avatar-sm {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Instructor Image */
    .course-content .avatar.avatar-sm img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 50% !important;
        display: block;
        border: 2px solid #ffffff;
    }

/* Instructor Name */
.course-content .link-default {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    text-decoration: none;
}

/* Align properly */
.course-content .d-flex.align-items-center {
    gap: 8px;
}

/* MAIN BANNER SECTION */
.banner-bg {
    background: #3b2c8f !important;
    overflow: hidden;
    position: relative;
}

    /* REMOVE EXTRA COLOR EFFECT */
    .banner-bg::before,
    .banner-bg::after,
    .hero-section::before,
    .hero-section::after {
        display: none !important;
        background: transparent !important;
    }

/* RIGHT SIDE COURSE CARD */
.banner-course-card,
.course-widget,
.course-card {
    background: #fff !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

    /* CARD IMAGE */
    .banner-course-card img,
    .course-widget img,
    .course-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 14px;
    }

/* FIX PENDING THIRD CARD */
.swiper-slide {
    height: auto !important;
}

    /* REMOVE ALL EXTRA COLORS/SHAPES FROM COURSE IMAGE */
    .course-box::before,
    .course-box::after,
    .course-widget::before,
    .course-widget::after,
    .banner-course-card::before,
    .banner-course-card::after,
    .course-img::before,
    .course-img::after,
    .swiper-slide::before,
    .swiper-slide::after {
        display: none !important;
        background: transparent !important;
        content: none !important;
    }

/* REMOVE IMAGE OVERLAY COLORS */
.course-img,
.course-img img {
    background: transparent !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* REMOVE RED/BLUE/BLACK DECORATION */
.course-info-label,
.course-label,
.course-badge,
.shape-img,
.banner-shape,
.animation-shape,
[class*="shape"],
[class*="overlay"] {
    display: none !important;
}

/* KEEP CLEAN IMAGE */
.course-img img {
    border-radius: 12px;
    object-fit: cover;
}

/* RIGHT SIDE CARD CONTAINER */
.banner-image {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 40px;
}

/* SWIPER WRAPPER */
.swiper-wrapper {
    align-items: flex-start !important;
}

/* EACH CARD */
.swiper-slide {
    height: auto !important;
    margin-bottom: 20px;
}

/* COURSE CARD */
.course-box,
.course-widget,
.banner-course-card {
    min-height: 360px;
    overflow: hidden;
}

/* MAIN BANNER SECTION */
.banner-section,
.banner-bg {
    padding-bottom: 120px !important;
    overflow: visible !important;
}

/* REMOVE EXTRA CUTTING */
.container,
.row,
.col-lg-5,
.col-xl-4 {
    overflow: visible !important;
}


/* SLIDE FULL HEIGHT */
.swiper-slide {
    height: auto !important;
    overflow: visible !important;
}

/* COURSE CARD */
.course-item-two {
    height: auto !important;
    overflow: visible !important;
    border-radius: 16px;
}

    /* IMAGE CONTAINER */
    .course-item-two .course-img {
        width: 100%;
        height: 220px !important;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        position: relative;
    }

        /* IMAGE FULL DISPLAY */
        .course-item-two .course-img img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            display: block;
        }

    /* CONTENT SECTION */
    .course-item-two .course-content {
        padding: 20px;
        background: #fff;
    }

/* SWIPER WRAPPER */
.swiper-wrapper {
    align-items: stretch !important;
}

/* RIGHT SIDE BANNER AREA */
.banner-image {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 120px;
}

/* REMOVE CUTTING */
.banner-bg,
.banner-section,
.col-lg-5,
.col-xl-4 {
    overflow: visible !important;
}

/* MAIN SWIPER */
.swiper-slider-banner {
    height: auto !important;
    overflow: visible !important;
}

/* SWIPER WRAPPER */
.swiper-wrapper {
    height: auto !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* EACH SLIDE */
.swiper-slide {
    height: auto !important;
    overflow: visible !important;
}

/* COURSE CARD */
.course-item-two.course-item {
    width: 100%;
    min-height: 420px !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
}

/* IMAGE FULL SHOW */
.course-item-two .course-img {
    width: 100%;
    height: 230px !important;
    overflow: hidden;
}

    .course-item-two .course-img img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

/* CONTENT */
.course-item-two .course-content {
    padding: 20px;
    min-height: 190px;
}

/* RIGHT SIDE CONTAINER */
.banner-image {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 100px !important;
}

/* COLUMN FIX */
.col-xl-4,
.col-lg-5 {
    overflow: visible !important;
}

/* MAIN BANNER SECTION HEIGHT */
.banner-bg,
.banner-section {
    min-height: 1100px !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 150px !important;
}

/* RIGHT SIDE IMAGE AREA */
.banner-image {
    position: relative;
    height: auto !important;
    min-height: 1000px !important;
    overflow: visible !important;
}

/* SWIPER */
.swiper-slider-banner,
.swiper-wrapper {
    height: auto !important;
    overflow: visible !important;
}

/* EACH SLIDE */
.swiper-slide {
    height: auto !important;
    margin-bottom: 30px;
}

/* CARD */
.course-item-two.course-item {
    height: auto !important;
    min-height: 420px;
}

/* INSTITUTION SECTION */
.client-section {
    padding: 60px 0;
}

/* SLIDER FIX */
.institutions-slider-rtl {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 40px;
    overflow: hidden;
}

/* EACH LOGO ITEM */
.institutions-items {
    flex: 0 0 auto;
    text-align: center;
}

    /* LOGO IMAGE */
    .institutions-items img {
        width: auto;
        max-width: 160px;
        height: 40px;
        object-fit: contain;
        display: block;
    }

/* REMOVE VERTICAL STYLE */
.slick-track,
.slick-slide {
    display: flex !important;
    align-items: center;
    height: auto !important;
}

/* PREVENT COLUMN ALIGN */
.slick-track {
    flex-direction: row !important;
}

/* =========================
   BENEFIT SECTION
========================= */

.benefit-section {
    background: #ffffff !important;
    padding: 80px 0;
}

    /* CARD STYLE */
    .benefit-section .card {
        background: #ffffff !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
        transition: all 0.3s ease;
        position: relative;
    }

        /* REMOVE DARK COLOR */
        .benefit-section .card::before,
        .benefit-section .card::after {
            display: none !important;
            background: transparent !important;
        }

    /* CARD BODY */
    .benefit-section .card-body {
        background: #ffffff !important;
        position: relative;
        z-index: 2;
    }

    /* HEADING */
    .benefit-section h2,
    .benefit-section h5 {
        color: #111111 !important;
    }

    /* PARAGRAPH */
    .benefit-section p {
        color: #666666 !important;
    }

/* ICON BACKGROUND */
.bg-skyblue-transparent,
.bg-secondary-transparent,
.bg-primary-transparent {
    background: #f5f5f5 !important;
}

/* HOVER EFFECT */
.benefit-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* TOP COURSES */
.top-courses-slider-rtl .slick-slide {
    padding: 0 10px;
}

.categories-item-three {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 220px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .categories-item-three img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        margin-bottom: 20px;
    }

    .categories-item-three .title {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }

.top-courses-sec .btn {
    display: table;
    margin: 40px auto 0;
}


/* COURSE CARD WHITE BACKGROUND */
.course-item,
.course-item-two,
.course-content,
.course-box,
.card {
    background: #ffffff !important;
    color: #111111 !important;
}

    /* Course title */
    .course-item h5,
    .course-item h6,
    .course-item p,
    .course-item a,
    .course-content h5,
    .course-content h6,
    .course-content p,
    .course-content a {
        color: #111111 !important;
    }

/* Remove dark background */
.course-item-two {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

/* Image fix */
.course-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

/* Button */
.course-item .btn,
.course-item-two .btn {
    background: #ff4667 !important;
    border-color: #ff4667 !important;
    color: #fff !important;
}

/* Rating line */
.course-item hr,
.course-item-two hr {
    border-color: #e5e5e5;
}

/* COURSE CARD FIX */
.course-box {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

    /* IMAGE */
    .course-box .product-img img {
        width: 100%;
        border-radius: 16px;
        display: block;
    }

/* CONTENT AREA */
.course-content {
    padding-top: 15px;
    text-align: center;
}

    /* TITLE FIX */
    .course-content .title {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 12px;
    }

        .course-content .title a {
            color: #111;
            text-decoration: none;
        }

            /* ROUND TEXT BACKGROUND */
            .course-content .title a span,
            .course-title-bg {
                background: #f3f4ff;
                padding: 8px 18px;
                border-radius: 50px;
                display: inline-block;
            }

/* AUTHOR */
.course-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

    .course-author img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
    }

/* PRICE BUTTON */
.btn-cart {
    border-radius: 30px;
    padding: 10px 22px;
}

/* COURSE CARD */
.course-item-two {
    background: #ffffff !important;
    border-radius: 20px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

    /* COURSE IMAGE */
    .course-item-two .course-img img {
        width: 100%;
        border-radius: 18px;
        display: block;
    }

/* CONTENT */
.content-course {
    padding-top: 15px;
}

    /* AUTHOR ALIGNMENT */
    .content-course .avatar img {
        width: 42px;
        height: 42px;
        object-fit: cover;
        border-radius: 50%;
    }

    .content-course .link-default {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        text-decoration: none;
    }

    /* CATEGORY BADGE */
    .content-course .badge {
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 12px;
    }

    /* TITLE ALIGNMENT FIX */
    .content-course h6 {
        margin-top: 12px;
        margin-bottom: 12px;
        line-height: 1.5;
        text-align: center;
    }

        .content-course h6 a {
            color: #111 !important;
            font-size: 24px;
            font-weight: 700;
            text-decoration: none;
            display: inline-block;
            max-width: 100%;
        }

    /* REVIEW */
    .content-course p {
        justify-content: center;
        font-size: 15px;
        color: #555;
    }

    /* PRICE & BUTTON */
    .content-course .text-secondary {
        color: #111 !important;
        font-size: 22px !important;
        font-weight: 700;
    }

    .content-course .btn-dark {
        background: #ff4d6d !important;
        border: none;
        border-radius: 30px;
        padding: 10px 20px;
    }

/* CARD SPACING */
.swiper-slide {
    padding: 10px;
}

/* COURSE CARD FIX */
.course-item-two {
    background: #fff !important;
    border-radius: 22px;
    overflow: hidden;
    padding: 14px;
    max-width: 320px;
    margin: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

    /* IMAGE FIX */
    .course-item-two .course-img {
        overflow: hidden;
        border-radius: 18px;
    }

        .course-item-two .course-img img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 18px;
            display: block;
        }

/* CONTENT */
.content-course {
    padding-top: 15px;
}

    /* AUTHOR SECTION */
    .content-course .d-flex.justify-content-between {
        align-items: center;
    }

    .content-course .avatar img {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    /* AUTHOR NAME */
    .content-course .link-default {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        text-decoration: none;
    }

    /* CATEGORY BADGE */
    .content-course .badge {
        background: #f3f3f3 !important;
        border-radius: 30px;
        padding: 7px 14px;
        font-size: 12px;
        color: #111;
    }

    /* TITLE FIX */
    .content-course h6 {
        text-align: center;
        line-height: 1.5;
        margin: 15px 0;
        min-height: 75px;
    }

        .content-course h6 a {
            color: #111 !important;
            font-size: 20px;
            font-weight: 700;
            text-decoration: none;
        }

    /* REVIEW */
    .content-course p {
        justify-content: center;
        font-size: 15px;
        margin-bottom: 18px;
    }

    /* PRICE + BUTTON */
    .content-course .justify-content-between {
        align-items: center;
    }

    .content-course .text-secondary {
        font-size: 30px !important;
        font-weight: 700;
        color: #111 !important;
    }

    /* BUTTON */
    .content-course .btn-dark {
        background: #ff4f74 !important;
        border: none;
        border-radius: 30px;
        padding: 10px 22px;
        font-size: 14px;
        font-weight: 600;
    }

/* SLIDER SPACING */
.swiper-slide {
    padding: 12px;
}




/* TESTIMONIAL SECTION */
.testimonials-section {
    padding: 80px 0;
    background: #f8f9fc;
    overflow: hidden;
}

/* CARD */
.testimonials-item {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    min-height: 360px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    margin: 10px;
    position: relative;
    overflow: hidden;
}

    .testimonials-item:hover {
        transform: translateY(-5px);
    }

    /* IMAGE */
    .testimonials-item .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

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

    /* IMAGE + QUOTE WRAPPER */
    .testimonials-item .position-relative {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    /* QUOTE ICON */
    .testimonials-item .quote {
        position: absolute;
        right: -5px;
        bottom: 8px;
        width: 34px;
        height: 34px;
        background: #ff4667 !important;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        z-index: 2;
    }

    /* NAME */
    .testimonials-item h6 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 6px;
    }

        .testimonials-item h6 a {
            color: #111;
            text-decoration: none;
        }

    /* ROLE */
    .testimonials-item .fs-14 {
        color: #777;
        font-size: 15px !important;
    }

    /* DESCRIPTION */
    .testimonials-item .line-clamb-2 {
        min-height: 55px;
        max-width: 100%;
        overflow: hidden;
        color: #555;
        line-height: 1.7;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

/* STARS */
.rating-stars {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 6px;
}

    .rating-stars i {
        font-size: 16px;
        color: #ffc107 !important;
    }

/* SLICK FIX */
.slick-track {
    display: flex !important;
}

.slick-slide {
    height: inherit !important;
    display: flex !important;
}

    .slick-slide > div {
        width: 100%;
    }

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

    .testimonials-item {
        min-height: auto;
        padding: 30px 20px;
    }

        .testimonials-item h6 {
            font-size: 18px;
        }

        .testimonials-item .avatar {
            width: 100px;
            height: 100px;
        }
}