*:not(i) {
    font-family: "Poppins", serif !important;
    font-weight: 300 !important;
}




@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}
.m-60 {
    padding-top: 6em;
}
.p-30 {
    padding-top: 30px;
}
.hero.container.d-flex {
    min-height: 500px;
}
i.fas {
    min-width: 1em;
    min-height: 1em;
    display: inline-block;
}
.main-menu__nav {
    min-height: 60px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #2a254d !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease 0.1s; /* 0.1s gecikmə əlavə edin */
}

body.dark-mode-active #preloader {
    background-color: #1E1E1E !important; /* Dark mode üçün important */
}

.dropdown-submenu:hover .sub-menu {
        display: block;
        transition: all .5s ease

}

/* Logo animasiyasını dəyişdirin */
#preloader-logo {
    width: 120px;
    height: 120px;
    animation: zoomInOutQuick 0.2s ease-in-out forwards; /* Animasiyanı 0.6s etdik */
}

@keyframes zoomInOutQuick {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}



.teacher_desc {
    color:#2A254D;
    font-size: 15px;
}

/*darkmode*/
body.dark-mode-active {
    background: #121212;
    color: white;
}

#searchCard {
    border-radius: 15px !important;
}

body.dark-mode-active #searchCard h5 {
        color: #E0E0E0;
}

body.dark-mode-active #statusSelect {
    background-color: #303030;
    color: #b0b0b0;
    border: 1px solid #4e4a4a;
}

body.dark-mode-active #searchCard {
    background-color: #1E1E1E !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

body.dark-mode-active #courseCategorySelect,
body.dark-mode-active #quizCategorySelect,
body.dark-mode-active #quizSectorId {
    background-color: #303030;
    color: #b0b0b0;
    border: 1px solid #4e4a4a;
}

body.dark-mode-active .scrollable-menu input {
    background-color: #303030;
    color: #b0b0b0;
    border: 1px solid #4e4a4a;
}


.dark-mode-toggle {
    position: relative;
    width: 37px;
    height: 36px;
    background: #ccc;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s;
}

    .dark-mode-toggle.dark-mode-on {
        background: #666;
    }

.dark-mode-toggle-circle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

body.dark-mode-active .page-header .container {
    border-bottom: 1px solid #313131 !important;
}

.dark-mode-toggle.dark-mode-on .dark-mode-toggle-circle {
    /*transform: translateX(34px);*/
}

body.dark-mode-active .course-list-container div h2 {
    color: #e0e0e0 !important;
}
    body.dark-mode-active .course-list-container div p {
            color: #b0b0b0 !important;
    }
    /*.ko-faq-section {
    padding: 40px 0;
}*/
    .hero-section {
        background: #fff;
        position: relative;
        overflow: hidden;
        padding: 60px 0;
        margin-bottom: 50px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .hero-section {
    background-color: #121212;
}


body.dark-mode-active .hero-section::before {
    background: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    background: linear-gradient(to right, #fff, #e2e8f0);
    -webkit-background-clip: text;
    color: #0000009e;
    transition: all 0.3s ease;
}

body.dark-mode-active .hero-title {
    color: #e0e0e0;
}

.hero-description {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    color: #0000009e;
}

body.dark-mode-active .hero-description {
    color: #B0B0B0;
}

.cta-button {
    padding: 14px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    background: white;
    color: #54a771;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

body.dark-mode-active .cta-button {
    background-color: #3b3a3a;
    color: #e0e0e0;
}

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        color: #54a771;
    }

.hero-section .exam-center-container {
    padding: 0px !important;
}

.features-grid {
    display: flex;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    border-radius: 20px;
    padding: 1.8rem;
    transition: all 0.3s ease;
    border: 1px solid rgb(124 121 121 / 20%);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 24%;
    transition: all 0.3s ease;
}

body.dark-mode-active .feature-card {
    background-color: #1E1E1E;
}

    .feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.1), transparent );
        transform: translateX(-100%);
        transition: 0.5s;
    }

    .feature-card:hover::before {
        transform: translateX(100%);
    }

    .feature-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

.feature-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

    .feature-icon i {
        font-size: 1.5rem;
        color: #54a771;
    }

.feature-title {
    color: #0000009e;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

body.dark-mode-active .feature-title {
    color: #e0e0e0;
}

.feature-description {
    color: #0000009e;
    line-height: 1.6;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

body.dark-mode-active .feature-description {
    color: #B0B0B0;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.shape {
    position: absolute;
    opacity: 0.15;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    border-radius: 50%;
    background: white;
    backdrop-filter: blur(5px);
}

.shape-1 {
    top: 15%;
    right: 8%;
    width: 180px;
    height: 180px;
    animation: float 8s ease-in-out infinite, rotate 20s linear infinite;
    background: linear-gradient(45deg, #54a771, #2a254d);
}

.shape-2 {
    bottom: 20%;
    left: 10%;
    width: 120px;
    height: 120px;
    animation: float 7s ease-in-out infinite, rotate 15s linear infinite reverse;
    background: linear-gradient(45deg, #ff6b6b, #9c27b0);
}

.shape-3 {
    top: 45%;
    left: 20%;
    width: 80px;
    height: 80px;
    animation: float 6s ease-in-out infinite, rotate 12s linear infinite;
    background: linear-gradient(45deg, #54a771, #ff6b6b);
}

.shape-4 {
    bottom: 30%;
    right: 15%;
    width: 140px;
    height: 140px;
    animation: float 9s ease-in-out infinite, rotate 18s linear infinite reverse;
    background: linear-gradient(45deg, #2a254d, #9c27b0);
}

.shape-5 {
    top: 25%;
    left: 35%;
    width: 60px;
    height: 60px;
    animation: float 5s ease-in-out infinite, rotate 10s linear infinite;
    background: linear-gradient(45deg, #ff6b6b, #54a771);
}

.shape-6 {
    top: 60%;
    right: 25%;
    width: 40px;
    height: 40px;
    animation: float 4s ease-in-out infinite, rotate 8s linear infinite reverse;
    background: linear-gradient(45deg, #9c27b0, #2a254d);
}

.shape-7 {
    top: 75%;
    left: 45%;
    width: 100px;
    height: 100px;
    animation: float 7s ease-in-out infinite, rotate 15s linear infinite;
    background: linear-gradient(45deg, #54a771, #ff6b6b);
}

.shape-8 {
    top: 30%;
    right: 40%;
    width: 70px;
    height: 70px;
    animation: float 6s ease-in-out infinite, rotate 12s linear infinite reverse;
    background: linear-gradient(45deg, #2a254d, #9c27b0);
}

 

@keyframes float {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) scale(1.05) rotate(180deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {

    body.dark-mode-active .no-exam-card .no-exam-card-title {
        line-height: 2.5rem;
    }

    .drkmode {
        display: none;
    }
    .filter_main {
        padding-top: 1rem !important;
    }
    .chart-container {
        height: 45vh !important;
    }
    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }

        .hero-section .exam-center-container {
            padding: 0px 15px !important;
        }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        flex-direction: column;
    }

    .feature-card {
        padding: 1.5rem;
        width: 100%;
    }
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 20px;
    transition: all 0.3s ease;
}

body.dark-mode-active .modal-content {
    background: #1e1e1e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

.modal-header {
    border-bottom: none;
    padding: 1.5rem 1.5rem 0.5rem;
}

body.dark-mode-active .modal-header button {
    padding: 8px 12px;
    background: #e0e0e0;
    color: #121212;
    border-radius: 50%;
}

.modal-body {
    padding: 1.5rem;
}

body.dark-mode-active .modal-body p {
    color: #b0b0b0;
}

.modal-footer {
    border-top: none;
    padding: 0.5rem 1.5rem 1.5rem;
}

.modal-title {
    color: #2a254d;
    font-weight: 600;
    transition: all 0.3s ease;
}

body.dark-mode-active .modal-title {
        color: #E0E0E0;
}

.close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #2a254d;
    opacity: 0.7;
    transition: all 0.3s ease;
}

    .close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

.modal-icon {
    width: 60px;
    height: 60px;
    background: #54a771;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .modal-icon i {
        font-size: 1.8rem;
        color: white;
    }

.modal-btn {
    background: #54a771;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .modal-btn:hover {
        color: #fff;
        background: #2a254d;
        transform: translateY(-2px);
    }

/* Plan Modal Styles */
.plan-timeline {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 15px;
    position: relative;
    border-left: 4px solid #54a771;
    transition: all 0.3s ease;
}

body.dark-mode-active .timeline-item {
    background: #303030;
}

    .timeline-item:hover {
        transform: translateX(10px);
        background: #e9ecef;
    }

    .timeline-item h6 {
        color: #2a254d;
        margin-bottom: 5px;
    }

    body.dark-mode-active .timeline-item h6 {
        color: #E0E0E0;
    }

    .timeline-item p {
        color: #6c757d;
        margin: 0;
        font-size: 0.9rem;
    }

    body.dark-mode-active .timeline-item p {
        color: #B0B0B0;
    }

/* Questions Modal Styles */
.question-container {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body.dark-mode-active .question-container {
    background: #303030;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.question-text {
    font-size: 1.1rem;
    color: #2a254d;
    margin-bottom: 20px;
}

.option-list {
    list-style: none;
    padding: 0;
}

.option-item {
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode-active .option-item {
    background: #414040;
    border: none;
}

    .option-item:hover {
        background: #e9ecef;
    }

    .option-item.selected {
        background: #54a771;
        color: white;
        border-color: #54a771;
    }

.option-item.correct {
    background: #26a026 !important;
    color: white;
    border-color: #28a745;
}

.option-item.wrong {
    background: #bd2424 !important;
    color: white;
    border-color: #dc3545;
}

/* Analysis Modal Styles */
.chart-container {
    position: relative;
    height: 300px;
    margin: 20px 0;
}

.analysis-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.stat-card {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #c3e0cd;
}

body.dark-mode-active .stat-card {
    background: #303030;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #54a771;
}

.stat-label {
    color: #6c757d;
    font-size: 0.9rem;
}

body.dark-mode-active .stat-label {
    color: #B0B0B0;
}

/* Tests Modal Styles */
.test-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.test-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #c3e0cd;
}

body.dark-mode-active .test-card {
    background: #303030;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

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

.test-icon {
    font-size: 2rem;
    color: #54a771;
    margin-bottom: 10px;
}

.test-title {
    color: #2a254d;
    font-weight: 600;
    margin-bottom: 5px;
}

body.dark-mode-active .test-title {
    color: #E0E0E0;
}

.test-info {
    color: #6c757d;
    font-size: 0.9rem;
}


.mobile-view-left {
    padding: 20px 0px;
}

.mobile-view-right {
    padding: 20px 0px 0px 90px;
}

.video {
    height: 664px;
}

    .video video {
        height: 100%;
        border-radius: 20px;
        box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
    }

.feature-card-video {
    background: #fff;
    transition: all 0.3s ease;
    height: 100%;
    border-radius: 10px !important;
    border: 1px solid rgb(212, 231, 238);
    padding: 1.2rem !important;
    position: relative;
    overflow: hidden;
}

    .feature-card-video::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2a254d;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .feature-card-video:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(42, 37, 77, 0.1);
    }

        .feature-card-video:hover::before {
            opacity: 0.05;
        }

    .feature-card-video i {
        font-size: 2rem;
        color: #54a771;
        margin-bottom: 1rem;
    }

    .feature-card-video h5 {
        font-weight: 600 !important;
        margin-bottom: 0.5rem;
        color: #2a254d;
        transition: all 0.3s ease;
    }

body.dark-mode-active .feature-card-video h5 {
        color: #E0E0E0 !important;
    }

.feature-card-video p {
    color: #2a254d;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    line-height: 1.4;
}

body.dark-mode-active .feature-card-video p {
        color: #B0B0B0;
}

.btn-primary {
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #54a771;
    border: none;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #fff;
}

.mobile-search-btn-group {
    background: #303030 !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    color: #fff;
}

.mobile-search-btn-group:hover {
    background: #282828 !important;
}

.main-title-video {
    font-size: 2.5rem;
    font-weight: 700 !important;
    color: #2a254d;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

body.dark-mode-active .main-title-video {
     color: #E0E0E0 !important;
}

body.dark-mode-active .mobile-video a {
    background-color: #3b3a3a;
    color: #e0e0e0;
}

.main-description-video {
    color: #000000c9;
    line-height: 1.8;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

body.dark-mode-active .main-description-video {
    color: #b0b0b0;
}

.features-section-video {
    position: relative;
}

/* .features-section::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, rgba(0,123,255,0.1), rgba(0,191,255,0.1));
        border-radius: 50%;
        z-index: -1;
      } */

/* .features-section::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: -20px;
        width: 100px;
        height: 100px;
        background: linear-gradient(45deg, rgba(0,123,255,0.1), rgba(0,191,255,0.1));
        border-radius: 50%;
        z-index: -1;
      } */


.leader-title {
    transition: all 0.3s ease;
}

body.dark-mode-active .leader-title {
    color: #E0E0E0 !important;
}

body.dark-mode-active .leaderboard:hover {
    border: none !important;
}

/* Yeni şekiller */
.mobile-view-right {
    position: relative;
    overflow: hidden;
}

    .mobile-view-right::before {
        content: "";
        position: absolute;
        top: 10%;
        right: -5%;
        width: 300px;
        height: 300px;
        background: #54a771;
        opacity: 0.6;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        animation: morphShape 8s ease-in-out infinite;
        z-index: -1;
    }

    .mobile-view-right::after {
        content: "";
        position: absolute;
        bottom: 15%;
        left: -5%;
        width: 200px;
        height: 200px;
        background: #2a254d;
        opacity: 0.3;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        animation: morphShape 8s ease-in-out infinite reverse;
        z-index: -1;
    }

.feature-card-video {
    cursor:pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

body.dark-mode-active .feature-card-video {
    background-color: #1E1E1E;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

/*.feature-card-video::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 45deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100% );
    transform: rotate(45deg);
    transition: all 0.3s ease;
    opacity: 0;
}*/

    .feature-card-video:hover::after {
        opacity: 1;
        animation: shine 1.5s ease-in-out;
    }

@keyframes morphShape {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }

    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}


.mobile-video{
    margin-top:100px;
}
/* Dekoratif noktalar */
.decorative-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #2a254d;
    opacity: 0.2;
    border-radius: 50%;
}

    .dot:nth-child(1) {
        top: 20%;
        left: 10%;
    }

    .dot:nth-child(2) {
        top: 40%;
        right: 15%;
    }

    .dot:nth-child(3) {
        bottom: 30%;
        left: 20%;
    }

    .dot:nth-child(4) {
        bottom: 15%;
        right: 25%;
    }

    .dot:nth-child(5) {
        top: 60%;
        left: 30%;
    }

    .dot:nth-child(6) {
        top: 25%;
        right: 35%;
    }

/* Başlık altı çizgi efekti */
.main-title-video {
    position: relative;
    display: inline-block;
}

    .main-title-video::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60%;
        height: 3px;
        background: #54a771;
        border-radius: 3px;
    }





    .ko-faq-section h2 {
        text-align: center;
        font-size: 36px;
        line-height: 54px;
        margin-bottom: 10px;
    }

.ko-container {
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    /*padding: 0 15px;*/
}

body.dark-mode-active .ko-container h2 {
        color: #E0E0E0 !important;

}

.ko-faq-section .ko-container > p {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
    color: #000000b0;
}

.ko-container .faq-new {
    /*margin-top:30px;*/
    display: flex;
    justify-content: space-between;
}

.ko-container .ko-faq-accordion {
    width: 50%;
    height: auto;
}

body.dark-mode-active ko-faq-accordion {
    background: #121212;
}

.ko-container .ko-faq-ilsPng {
    width: 40%;
    height: 380px;
}

.ko-faq-ilsPng img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ko-accordion-item {
    background-color: #fff;
    border-bottom: 1px solid #dfdfdf;
    transition: all 0.3s ease;
}

.ko-accordion-item-header {
    padding: 20px 0;
    font-size: 19px;
    line-height: 30px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode-active .ko-accordion-item-header span {
    color: #E0E0E0 !important;
}

.ko-accordion-item-header::after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background: url("../../plus-svgrepo.svg");
    background-repeat: no-repeat;
    /*background-size: cover;*/
    transition: all 0.4s ease;
}

    .ko-accordion-item-header.active::after {
        content: "";
        transform: rotate(45deg);
    }

.ko-accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

body.dark-mode-active .ko-accordion-item {
    background: transparent !important;
    border-bottom: 1px solid #313030;
}

.ko-accordion-item-body-content {
    padding-bottom: 20px;
    color: #000000b0;
    transition: all 0.3s ease;
}

body.dark-mode-active .ko-accordion-item-body-content {
    color: #b0b0b0;
}

.ko-faq-accordion {
    margin-bottom: 30px;
}
@media (min-width: 601px) {
    .main-footer .container {
        padding:0 !important;
    }
    .ko-faq-section {
        padding: 6rem 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .mobile-video {
        display: none;
    }

    .exam-cardd-new a {
        width: 100% !important;
    }

    .faq-new {
        flex-direction: column;
    }

        .faq-new .ko-faq-ilsPng {
            width: 100%;
            height: 240px;
        }

        .faq-new .ko-faq-accordion {
            width: 100%;
            margin-top: 30px;
        }

   

        .ko-faq-section h2 {
            font-size: 25px;
        }

        .ko-faq-section .ko-container > p {
            display: none;
        }

        .ko-accordion-item-header span {
            display: block;
            width: 90%;
        }

        .ko-faq-section {
            padding-top: 3em !important;
        }
    }


    /* Chart Section */

    /*h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #2A254D, #54A771);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(84, 167, 113, 0.3);
    position: relative;
}*/

    .chart-container {
        position: relative;
        height: 540px !important;
        width: 100%;
        margin: auto;
        background: linear-gradient(180deg, #000000, #2A254D);
        /*background: linear-gradient(135deg, rgba(20, 20, 20, 0.99), rgba(82, 15, 81, 0.97));*/
        border-radius: 24px;
        padding: 24px;
        backdrop-filter: blur(20px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 1px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
        overflow: visible;
        display: flex;
        flex-direction: column;
        transform-style: preserve-3d;
        perspective: 2000px;
        transform: translateZ(0);
    }

        /* 3D Grid Arka Plan */
        .chart-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 30px 30px, radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
            border-radius: 24px;
            pointer-events: none;
            animation: gridMove 30s linear infinite;
            transform: translateZ(-10px);
        }

        .chart-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%), linear-gradient(225deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            border-radius: 24px;
            pointer-events: none;
            animation: gradientShift 15s ease-in-out infinite alternate;
            transform: translateZ(-5px);
        }

    @keyframes gridMove {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 30px 30px;
        }
    }

    @keyframes gradientShift {
        0% {
            opacity: 0.5;
            background-position: 0% 0%;
        }

        100% {
            opacity: 1;
            background-position: 100% 100%;
        }
    }

    .chart-container:hover {
        box-shadow: 0 15px 35px rgba(42, 37, 77, 0.12), 0 5px 15px rgba(42, 37, 77, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
    }

    /* Öğrenci Bilgi Kutuları */
    .student-info-box {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
        padding: 20px;
        position: relative;
    }

    /* Kartların sıralamasını değiştir */
    .student-card:nth-child(1) {
        order: 2; /* Birinci yer - ortada */
        transform: scale(1.05);
        z-index: 3;
    }

    .student-card:nth-child(2) {
        order: 1; /* İkinci yer - solda */
        z-index: 2;
    }

    .student-card:nth-child(3) {
        order: 3; /* Üçüncü yer - sağda */
        z-index: 1;
    }

    .student-card {
        background: rgba(30, 30, 30, 0.8);
        border-radius: 15px;
        padding: 15px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 180px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        /* Birinci yer için altın kart */
        .student-card:first-child {
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        /* İkinci yer için gümüş kart */
        .student-card:nth-child(2) {
            background: rgba(192, 192, 192, 0.15);
            border: 1px solid rgba(192, 192, 192, 0.3);
        }

        /* Üçüncü yer için bronz kart */
        .student-card:nth-child(3) {
            background: rgba(205, 127, 50, 0.15);
            border: 1px solid rgba(205, 127, 50, 0.3);
        }

        .student-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 24px rgba(84, 167, 113, 0.3);
        }

        /* Birinci yer için altın hover */
        .student-card:first-child:hover {
            box-shadow: 0 8px 24px 0 rgba(255, 215, 0, 0.15);
        }

        /* İkinci yer için gümüş hover */
        .student-card:nth-child(2):hover {
            box-shadow: 0 8px 24px 0 rgba(192, 192, 192, 0.15);
        }

        /* Üçüncü yer için bronz hover */
        .student-card:nth-child(3):hover {
            box-shadow: 0 8px 24px 0 rgba(205, 127, 50, 0.15);
        }

        .student-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 12px;
            border: 3px solid #54A771;
            box-shadow: 0 0 20px rgba(84, 167, 113, 0.4);
        }

        .student-card h3, .student-card p {
            color: #fff;
        }

        .student-card h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .student-card p {
            margin: 6px 0;
            font-size: 0.9rem;
        }

        .student-card .rank {
            display: inline-block;
            padding: 4px 12px;
            background: linear-gradient(45deg, #54A771, #3A355D);
            border-radius: 20px;
            color: #fff;
            font-weight: bold;
            margin-top: 8px;
            font-size: 0.9rem;
        }

    /* Chart Tasarımı */
    .chart {
        flex: 1;
        display: flex;
        position: relative;
        padding-left: 50px;
        padding-bottom: 30px;
    }

    .chart-bars {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex: 1;
        height: 100%;
        position: relative;
    }

    .bar {
        width: 40px;
        background: linear-gradient(to top, rgba(84, 167, 113, 0.4), rgba(84, 167, 113, 0.5));
        /*background: linear-gradient(to top, rgba(84, 167, 113, 0.2), rgba(84, 167, 113, 0.5));*/
        border-radius: 8px 8px 0 0;
        position: relative;
        transition: height 0.5s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 0 0 15px rgba(84, 167, 113, 0.15);
    }

        .bar.gold {
            background: linear-gradient(to top, rgba(84, 167, 113, 0.3), rgba(84, 167, 113, 0.7));
        }

            /* Birinci yer için altın stil */
            .bar.gold:first-child {
                background: linear-gradient(45deg, rgb(255 215 0 / 80%), rgb(255 215 0 / 60%), rgb(255 215 0 / 30%));
                /*background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.15) );*/
                box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
                position: relative;
            }

                .bar.gold:first-child::before {
                    content: '🥇';
                    position: absolute;
                    top: -29px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 2rem;
                    animation: floatMedal 3s ease-in-out infinite;
                    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
                }

                .bar.gold:first-child::after {
                    content: none;
                }

    @keyframes shimmer {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    /* İkinci yer için gümüş stil */
    .bar.gold:nth-child(2) {
        background: linear-gradient(45deg, rgba(192, 192, 192, 0.8), rgba(192, 192, 192, 0.6), rgba(192, 192, 192, 0.3));
        /*background: linear-gradient(45deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.25), rgba(192, 192, 192, 0.15) );*/
        box-shadow: 0 0 10px rgba(192, 192, 192, 0.1);
        position: relative;
    }

        .bar.gold:nth-child(2)::before {
            content: '🥈';
            position: absolute;
            top: -29px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2rem;
            animation: floatMedal 3s ease-in-out infinite;
            animation-delay: 0.3s;
            filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.5));
        }

        .bar.gold:nth-child(2)::after {
            content: none;
        }

    /* Üçüncü yer için bronz stil */
    .bar.gold:nth-child(3) {
        background: linear-gradient(45deg, rgba(205, 127, 50, 0.8), rgba(205, 127, 50, 0.6), rgba(205, 127, 50, 0.3) );
        box-shadow: 0 0 10px rgba(205, 127, 50, 0.1);
        position: relative;
    }

        .bar.gold:nth-child(3)::before {
            content: '🥉';
            position: absolute;
            top: -29px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2rem;
            animation: floatMedal 3s ease-in-out infinite;
            animation-delay: 0.6s;
            filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.5));
        }

        .bar.gold:nth-child(3)::after {
            content: none;
        }

    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
            transform: scaleY(1);
        }

        50% {
            background-position: 100% 50%;
            transform: scaleY(1.02);
        }

        100% {
            background-position: 0% 50%;
            transform: scaleY(1);
        }
    }

    @keyframes pulseGlow {
        0%, 100% {
            box-shadow: 0 0 10px currentColor;
            transform: scaleY(1);
        }

        50% {
            box-shadow: 0 0 15px currentColor;
            transform: scaleY(1.01);
        }
    }

    @keyframes floatMedal {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }

        50% {
            transform: translateX(-50%) translateY(-10px);
        }
    }

    .bar-label {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 0.8rem;
        color: #fff;
        text-align: center;
        width: 100px;
    }

    .bar-value {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        font-weight: bold;
        color: #fff;
        z-index: 2;
        font-size: 0.9rem;
    }

    /* İlk 3 yer için rakamları yukarıda göster */
    .bar.gold .bar-value {
        top: -65px;
    }

    /* Madalya İkonları */
    .medal-icon, .gold-medal, .silver-medal, .bronze-medal {
        display: none;
    }

    .chart-axis {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 21.5vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 30px;
    }

    .axis-label {
        color: #fff;
        font-size: 0.8rem;
    }

    /* Responsive Tasarım */
    @media (max-width: 768px) {
        .lead-main {
            display: none;
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }
    }






    /* From Uiverse.io by gharsh11032000 */
    .button {
        cursor: pointer;
        position: relative;
        padding: 10px 24px;
        font-size: 18px;
        color: rgb(193, 163, 98);
        border: 2px solid rgb(193, 163, 98);
        border-radius: 34px;
        background-color: transparent;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        overflow: hidden;
    }

        .button::before {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            border-radius: inherit;
            scale: 0;
            z-index: -1;
            background-color: rgb(193, 163, 98);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .button:hover::before {
            scale: 3;
        }

        .button:hover {
            color: #212121;
            scale: 1.1;
            box-shadow: 0 0px 20px rgba(193, 163, 98,0.4);
        }

        .button:active {
            scale: 1;
        }




  




    .exam-cardd-new {
        padding: 6rem 0 !important;
    }


    /*.exam-cardd-new a {
    width: 24%;
}*/

    .exam-cardd {
        max-width: 100%;
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;
        font-family: 'Segoe UI', sans-serif;
    }

body.dark-mode-active .exam-cardd {
    background-color: #1E1E1E;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

    .exam-cardd-image {
        height: 160px;
        width: 100%;
    }

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

    .exam-cardd-content {
        padding: 24px;
    }

    .exam-cardd-title {
        font-size: 17px;
        font-weight: 700;
        color: #1a365d;
        margin: 0 0 12px;
        position: relative;
        padding-bottom: 12px;
        transition: all 0.3s ease;
        display: inline-block;
    }

    body.dark-mode-active .exam-cardd-title {
        color: #E0E0E0 !important;
    }

body.dark-mode-active .exam-total-desc p {
    color: #B0B0B0;
}

body.dark-mode-active .date-item-text {
    color: #B0B0B0;
}

body.dark-mode-active .chart-container {
    background: #0e0e0e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.exam-cardd-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #54A771, #82C596);
    border-radius: 2px;
    transition: .5s ease;
}

    .exam-cardd:hover .exam-cardd-title::after {
        width: 100%;
    }

    .exam-cardd-dates {
        display: flex;
        gap: 15px;
        margin-bottom: 18px;
    }

    .exam-total-desc {
        color: black;
        opacity: 0.6;
    }

    .date-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #4a5568;
    }

        .date-item .date-item-text {
            font-weight: 600;
        }

    .date-icon {
        color: #54A771;
        font-size: 16px;
    }

    .card-tag {
        font-size: 12px;
        color: #54A771;
        background-color: #e6f2e9;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: 500;
    }

    .exam-cardd-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .exam-button {
        flex: 1;
        padding: 10px 0;
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        border-radius: 20px;
    }

    @media (max-width: 768px) {

        .exam-cardd-new {
            flex-direction: column;
            padding: 1em !important;
        }

        .exam-cardd {
            max-width: 100%;
            margin-bottom: 20px;
            padding: 10px;
        }

        .exam-cardd-image {
            height: 200px;
            border-radius: 10px;
        }

            .exam-cardd-image img {
                border-radius: 10px;
            }

        .exam-cardd-content {
            padding: 20px;
        }

        .exam-cardd-title {
            font-size: 20px;
        }

        .exam-cardd-dates {
            gap: 8px;
        }

        .exam-cardd-footer {
            flex-direction: column;
            gap: 10px;
        }

        .exam-button {
            font-size: 18px;
            font-weight: 500 !important;
            width: 100%;
        }

        .details-button {
            font-size: 16px;
            font-weight: 500 !important;
        }
    }


    .free-button {
        background-color: #54A771;
        color: white;
        transition: all 0.3s ease;
    }

        .free-button:hover {
            background-color: #3e8055;
            transform: translateY(-2px);
        }

body.dark-mode-active .free-button {
    background-color: #3b3939;
    color: #e0e0e0;
}

    body.dark-mode-active .free-button:hover {
        background-color: #2e2b2b;
    }

    .details-button {
        background-color: white;
        color: #54A771;
        border: 1px solid #54A771;
        transition: all 0.3s ease;
    }

        .details-button:hover {
            background-color: #f0f7f2;
            transform: translateY(-2px);
        }

body.dark-mode-active .details-button {
    background-color: #e0e0e0;
    color: #3b3939;
}

    body.dark-mode-active .details-button:hover {
        background-color: #a5a3a3;
    }
    /* ---------------- HERO START */
    .ex-header {
        padding-top: 5em;
        background-color: #2A254D;
        transition: background-color 0.3s ease;
    }

body.dark-mode-active .ex-header {
    background-color: #121212;
}

.hero {
    /*margin-bottom: 4em;*/
    padding: 6em 0px 0px 0px !important;
    position: relative;
}

        .hero .hero-smile-svg {
            width: 120px;
            position: absolute;
            top: 6%;
            right: -30px;
        }

        .hero .line-svg {
            width: 100%;
            position: absolute;
            top: 50%;
            right: 0;
        }

        .hero .pen-svg {
            width: 35px;
            position: absolute;
            top: 12%;
            left: 18%;
        }

        .hero .bottom-svg {
            width: 200px;
            position: absolute;
            bottom: -20px;
            left: -277px;
        }

        .hero .hero-content {
            width: 65%;
            height: 450px;
            /* background-color: lightblue; */
        }

    .hero-content h3 {
        font-size: 25px;
    }

    .hero-content h2 {
        font-size: 40px;
        color: #fff;
        line-height: 60px;
        margin: 20px 0px;
        font-weight: 800;
    }

        .hero-content h2 span {
            font-weight: 600 !important;
            color: #54A771;
            font-size: 55px;
        }


    .hero-content .hero-btns {
        display: inline-block;
        margin-top: 25px;
    }

    .hero-btns a {
        padding: 15px 40px;
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        display: inline-block;
        z-index: 1;
        border: 2px solid transparent;
        color: #fff;
        transition: color 0.4s ease, border-color 0.4s ease;
        font-weight: 600;
    }
    


        .hero-btns a::before {
            content: "";
            position: absolute;
            top: 0;
            right: 100%;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: right 0.4s ease;
        }

        /* First a */
        .hero-btns a:first-of-type {
            background-color: #54A771;
            border: 2px solid #fff;
            color: #fff;
        }

        body.dark-mode-active .hero-btns a {
            background-color: transparent;
        }

            .hero-btns a:first-of-type::before {
                background-color: #fff;
            }

            .hero-btns a:first-of-type:hover {
                color: #54A771;
                border-color: #fff;
            }

                .hero-btns a:first-of-type:hover::before {
                    right: 0;
                }

        /* Second a */
        .hero-btns a:last-of-type {
            background-color: #2A254D;
            border: 2px solid #fff;
            color: #fff;
        }

            .hero-btns a:last-of-type::before {
                background-color: #fff;
            }

            .hero-btns a:last-of-type:hover {
                color: #54A771;
                border-color: #fff;
            }

                .hero-btns a:last-of-type:hover::before {
                    right: 0;
                }





    /* ------------- Avatar Group */
.avatar-group {
    margin-left: 22px;
    display: inline-block;
    position: relative;
    top: 0px;
    border-radius: 30px;
    padding: 8px 30px;
    border: 2px solid white;
    width: 31%;
    transition: all 0.5s ease;
    overflow: hidden;
}

    .avatar-group:hover {
        background: #dc3545;
    }
.youtube_main{
    display:flex;
        justify-content: center;
    align-items: center;

}

    .youtube_main span {
        margin-left: 10px;
        color:white;
    }

.avatar-group:hover .youtube_main span {
    color: #fff !important;
}
.hero-content .avatar-group .fa-youtube {
    font-size: 2.5rem !important;
    transition: all 0.5s ease;
}

.avatar-group:hover .fa-youtube {
    color: #fff !important;
}

.avatar-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* burda left olacaq */
    width: 100%;
    height: 100%;
    background: #dc3545; /* hover rəngi */
    transform: scaleX(0);
    transform-origin: right; /* sağdan sola animasiya */
    transition: transform 0.4s ease;
    z-index: -1;
}

.avatar-group:hover::before {
    transform: scaleX(1); /* tam genişliyə qədər açılır */
}
    /* ----------------- HERO IMG */
  

body.dark-mode-active .hero .hero-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    opacity: 0.6;
    border-top-left-radius: 40px;
    border-top-right-radius: 70px;
}

.hero .hero-img .total-students {
    width: 140px;
    position: absolute;
    top: 10%;
    left: -70px;
    text-align: center;
    background-color: #fff;
    color: #444;
    padding: 22px 20px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    z-index: 2;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transition: all 0.3s ease;
}

body.dark-mode-active .hero .hero-img .total-students {
    background-color: #1E1E1E;
}

.hero-img:hover .total-students {
    transform: translate(-10px, -5px);
}


    .total-students .total-icon i {
        font-size: 2.5em;
    }

    .total-students h1 {
        font-size: 25px;
        font-weight: 700;
        margin: 15px 0px 0px;
    }

    body.dark-mode-active .total-students h1 {
        color: #E0E0E0 !important;
    }

    .total-students p {
        margin: 0;
    }

body.dark-mode-active .total-students p {
    color: #888888 !important;
}


.hero .hero-img .total-course {
    position: absolute;
    bottom: -54px;
    right: -45px;
    display: flex;
    align-items: center;
    text-align: left;
    background-color: #fff;
    color: #444;
    padding: 15px 40px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    z-index: 2;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transiition: aaall 0.3s ease;
}

body.dark-mode-active .hero .hero-img .total-course {
    background-color: #1e1e1e;
}


.total-course .total-course-icon {
    width: 30%;
}

    .total-course-icon i {
        font-size: 3em;
    }

    .course-content {
        margin-left: 15px;
    }

        .course-content h2 {
            font-size: 25px;
            font-weight: 700;
            margin: 15px 0px 0px;
        }

body.dark-mode-active .course-content h2 {
    color: #E0E0E0 !important;
}

    .hero-img:hover .total-course {
        transform: translate(20px, -5px);
    }

    .row > * {
        /*padding-left: 0px !important;
    padding-right: 0px !important;*/
    }
    /* -------------- MOBILE */
    @media (max-width: 768px) {
        .hero {
            flex-direction: column;
            padding: 3em 0px 0px 0px !important;
        }

            .hero .hero-content,
            .hero .hero-img {
                width: 100%;
            }

            .hero .hero-content {
                height: auto;
                padding: 0 15px 50px;
                text-align: left;
                margin-bottom: 30px;
            }

        .hero-content h3 {
            font-size: 18px;
        }

        .hero-content h2 span {
            font-size: 47px;
        }

        .hero-content h2 {
            font-size: 32px;
            line-height: 1.3;
            margin: 10px 0;
        }

        .hero-content p {
            font-size: 14px;
            margin-bottom: 20px;
            display: none;
        }

        .hero-btns {
            display: flex !important;
            flex-direction: row;
            align-items: center;
            gap: 15px;
            text-align: center;
        }

            .hero-btns a {
                width: 50%;
                margin: 0 !important;
                padding: 12px 20px !important;
            }

        .avatar-group {
            display: block !important;
            margin: 20px auto 0 !important;
            top: 0 !important;
            text-align: left;
            width:100% !important;
        }
        .modal-content_youtube{
            height:300px !important;
        }

        .hero .hero-img {
            height: 300px;
            margin-top: 30px;
            display: none;
        }

        .hero .hero-smile-svg,
        .hero .line-svg,
        .hero .pen-svg,
        .hero .bottom-svg {
            display: none;
        }

        .hero-img .total-students {
            top: -30px !important;
            left: 50% !important;
            transform: translateX(-50%);
            padding: 15px !important;
        }

        .hero-img .total-course {
            bottom: -30px !important;
            right: 50% !important;
            transform: translateX(50%);
            padding: 10px 20px !important;
        }

        .total-students h1,
        .course-content h2 {
            font-size: 20px !important;
            margin: 5px 0 0 !important;
        }

        .total-students .total-icon i,
        .total-course-icon i {
            font-size: 1.8em !important;
        }

        .hero-img:hover .total-students,
        .hero-img:hover .total-course {
            transform: translateX(-50%) !important;
        }

        .hero-img:hover .total-course {
            transform: translateX(50%) !important;
        }
    }

    /*.edu-main .edu-cart-main {
    margin-bottom: 5rem;
}*/

    .edu-main {
        padding: 6em 0 0 !important;
    }

    .edu-main h1 {
        transition: color 0.3s ease
    }

   body.dark-mode-active .edu-main h1 {
    color: #E0E0E0 !important;
      }

        .edu-main .edu-cart-main .edu-cart {
            width: 310px;
            padding: 60px 30px 30px;
            border: 1px solid #ededf0;
            text-align: center;
            transition: .5s;
            border-radius: 8px;
            background-color: #fffdfd;
            position: relative;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

body.dark-mode-active .edu-main .edu-cart-main .edu-cart {
    background-color: #1E1E1E;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

            .edu-main .edu-cart-main .edu-cart a {
                color: #697585;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .edu-cart-main .edu-cart:hover {
                border-radius: 8px 65px 8px 8px;
                border-color: lightgray;
                transition: .5s;
                background-color: #fff;
                /*box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;*/
            }

    .edu-cart h3 {
        font-size: 20px;
    }

    .edu-cart .edu-abs {
        position: absolute;
        top: 0px;
        left: 40px;
        padding: 5px;
        background-color: #2A254D;
        border-radius: 0px 0px 5px 5px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .edu-cart .edu-abs {
    background-color: #3b3b3b;
    color: #E0E0E0;
}

    .edu-cart .edu-cart-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightgray;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

body.dark-mode-active .edu-cart .edu-cart-icon {
    background-color: #383838;
}

.edu-cart .edu-cart-icon i {
    font-size: 1.7em;
    transition: .5s;
}

    .edu-cart:hover i {
        color: white !important;
        transition: .5s;
    }

    .edu-cart:hover .edu-cart-icon {
        background: #54A771;
        transition: .5s;
    }

    body.dark-mode-active .edu-cart h3 {
        color: #E0E0E0 !important;
    }



    /* MOBILE CART */
    @media (max-width: 768px) {
        .edu-main {
            padding-top: 3em !important;
        }

            .edu-main h1 {
                font-size: 30px;
                margin-bottom: 20px;
            }

        .edu-cart-main {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

            .edu-cart-main .edu-cart {
                width: 100% !important;
                max-width: 350px;
                padding: 60px 20px 35px !important;
                margin: 0 auto;
            }

        .edu-cart h3 {
            font-size: 18px !important;
        }

        .edu-cart p {
            font-size: 14px;
        }

        .edu-cart .edu-abs {
            left: 50% !important;
            transform: translateX(-50%);
            width: 60px;
            text-align: center;
        }

        .edu-cart .edu-cart-icon i {
            font-size: 1.5em !important;
            padding: 15px !important;
        }

        .edu-cart-main .edu-cart:hover {
            transform: translateY(-5px);
            border-radius: 8px 65px 8px 8px !important;
        }
    }

     .exam-card, .exam-header {
        overflow: hidden
    }

     .exam-card {
        position: relative
    }

     a, a:focus, a:hover, a:visited {
        text-decoration: none
    }

    .res_logo {
        width: 3%;
    }

    @media (max-width:768px) {
        .res_logo {
            width: 10% !important;
        }

        .main-content {
            flex-direction: column
        }

        .content {
            width: 100% !important
        }

        .slideshow-container .slider h2 {
            font-size: 2rem !important;
        }

        .content p {
            padding-top: 10px;
        }
    }

    .main-content, .pagination {
        justify-content: center
    }

    .slideshow-container {
        height: 100%;
        color: #fff;
        text-align: center
    }

        .slideshow-container .slides {
            height: 100%;
            white-space: nowrap;
            font-size: 0;
            transition: .8s;
            padding: 40px 0;
        }

            .slideshow-container .slides > * {
                font-size: 1rem;
                display: inline-block;
                white-space: normal;
                vertical-align: top;
                height: 100%;
                width: 100%;
                background: 50%;
                cover: no-repeat none;
            }

    .content {
        padding: 20px;
        color: #fff;
        width: 50%;
        float: left;
    }

        .content h2 {
            font-size: 2.5em;
        }

        .content p {
            font-size: 20px;
        }

    .main-content {
        display: flex;
        width: 100%;
        align-items: center
    }





     .course-details__sidebar__post li:hover .course-details__sidebar__post__title a, .course-two__item:hover .course-two__title a {
        background-size: 0 1px,100% 1px
    }

    .exam-card {
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0,0,0,.1);
        font-family: 'Poppins',sans-serif;
        background-color: #fff;
        margin: 15px;
        transition: .3s ease-in-out;
        border-top: 4px solid #5bc0de
    }

    .exam-header {
        /*background-color: #5bc0de;*/
        padding: 0;
        height: 250px
    }

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

    .exam-body {
        padding: 10px
    }

    .exam-date, .exam-price, .exam-time {
        border-radius: 20px;
        padding: 8px 9px;
        transition: background-color .3s
    }

    .exam-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px
    }

    .exam-date {
        background-color: #f1f1f1;
        color: #2a254d
    }

    .exam-price, .exam-time {
        background-color: #f57005;
        color: #fff
    }

        .exam-price:hover, .exam-time:hover {
            background-color: #e1e1e1
        }

    .exam-price {
        color: #fff;
        font-weight: 700;
        background: #28a745 !important
    }

    .exam-content {
        margin-top: 15px
    }

    .exam-section {
        font-size: 16px;
        margin-bottom: 10px
    }

    .exam-icon {
        font-size: 19px;
        color: #2a254d;
        font-weight: 700
    }

    .exam-details p {
        margin: 0;
        font-size: 14px;
        color: #555;
        font-weight: 700
    }

    .exam-details ul {
        list-style-type: none;
        padding-left: 0;
        margin-top: 8px
    }

    .exam-details ul li {
        font-size: 13px;
        color: #333;
        margin-bottom: 5px
    }

        .exam-details ul li a {
            color: #007bff;
            text-decoration: none;
            font-weight: 700
        }

    .exam-footer {
        padding: 10px;
        text-align: center;
        background-color: #f8f9fa
    }

    .tags {
        margin-bottom: 10px;
        max-height: 60px;
        overflow-y: auto;
        padding: 5px;
        display: flex;
        flex-wrap: wrap
    }

    .tag {
        display: inline-block;
        background-color: #e9ecef;
        color: #007bff;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        margin: 5px;
        white-space: nowrap
    }

    .tags::-webkit-scrollbar {
        width: 5px
    }

    .tags::-webkit-scrollbar-thumb {
        background-color: #d1d1d1;
        border-radius: 10px
    }

    .exam-btn {
        background-color: #f57005;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color .3s
    }

    .exam-btn:hover {
        background-color: #46b8da
    }

    .pagination .page-item {
        margin: 0 5px
    }

     .main-footer__bg {
        background-size: cover;
        background-position: center center
    }

     .main-footer__bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0
    }

     .main-footer__bg {
        left: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat
    }

    @media (max-width:1199px) {

        .main-menu__right .eduact-btn {
            display: none
        }
    }

    .sidebar {
        position: relative
    }

    @keyframes tm-shape1 {
        0%,100% {
            fill: var(--eduact-base)
        }

        50% {
            fill: var(--eduact-secondary)
        }
    }

    @keyframes tm-shape2 {
        0%,100% {
            fill: var(--eduact-secondary)
        }

        50% {
            fill: var(--eduact-base)
        }
    }

     .contact-one__input-box {
        position: relative;
        display: block;
        margin-bottom: 20px
    }

     .contact-one .eduact-btn {
        text-transform: inherit
    }

    @media (max-width:991px) {

        .sidebar {
            margin: 60px 0 0
        }
    }

         a {
            color: var(--eduact-base)
        }

    .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a, .main-menu__login:hover, .stricky-header .main-menu__list > li.current > a, .stricky-header .main-menu__list > li:hover > a {
        color: #54a771;
    }

     .course-details .tabs-content {
        display: block;
        position: relative
    }

     .eduact-btn-second {
        background-color: var(--eduact-secondary)
    }

     .course-details {
        position: relative;
        padding: 120px 0
    }

     .course-details__thumb {
        position: relative;
        margin: 0 0 40px;
        border: 1px solid lightblue;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .course-details__thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    opacity: 0.5;
    border: none;
}

.course-details__thumb img {
    border-radius: 15px;
}

     .eduact-btn, .eduact-btn i, .main-menu .main-menu__list > li.dropdown > a, .page-wrapper, .search-popup__form, .stricky-header .main-menu__list > li.dropdown > a {
        position: relative
    }

body.dark-mode-active .eduact-btn {
    background-color: #1e1e1e;
    color: #ffffff;
}

body.dark-mode-active .course-details__sidebar__item a {
    background-color: #382f2f;
    color: #e0e0e0;
}

body.dark-mode-active .course-details__sidebar__post__content .course-details__sidebar__post__title a {
    background-color: transparent !important;
    font-size: 17px;
}

body.dark-mode-active .course-details__sidebar__post__content .course-details__sidebar__post__meta a {
    background-color: #303030;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 5px;
}

     .eduact-btn:hover {
        color: var(--eduact-white)
    }

    :root {
        --eduact-font: 'Poppins',sans-serif;
        --heading-font: 'Poppins',sans-serif;
        --eduact-text: #697585;
        --eduact-text-rgb: 105,117,133;
        --eduact-text2: #B3ADE1;
        --eduact-text2-rgb: 179,173,225;
        --eduact-grey: #B7B0B4;
        --eduact-grey-rgb: 183,176,180;
        --eduact-soft: #F1F2FD;
        --eduact-soft-rgb: 241,242,253;
        --eduact-soft2: #F6F5F5;
        --eduact-soft2-rgb: 246,245,245;
        --eduact-soft3: #E0E3FD;
        --eduact-soft3-rgb: 224,227,253;
        --eduact-soft4: #E4E4E4;
        --eduact-soft4-rgb: 228,228,228;
        --eduact-soft5: #F6F6F6;
        --eduact-soft5-rgb: 246,246,246;
        --eduact-base: #4F5DE4;
        --eduact-base-rgb: 79,93,228;
        --eduact-secondary: #F57005;
        --eduact-secondary-rgb: 245,112,5;
        --eduact-black: #2A254D;
        --eduact-black-rgb: 42,37,77;
        --eduact-black2: #000000;
        --eduact-black2-rgb: 0,0,0;
        --eduact-white: #ffffff;
        --eduact-white-rgb: 255,255,255
    }

    body {
        font-family: var(--eduact-font);
        color: var(--eduact-text);
        font-size: 16px;
        line-height: 25px;
        font-weight: 400
    }

    a {
        transition: .5s
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--heading-font);
        color: var(--eduact-black);
        font-weight: 700
    }

    ::placeholder {
        color: inherit;
        opacity: 1
    }

    .page-wrapper {
        margin: 0 auto;
        width: 100%;
        min-width: 300px;
        overflow: hidden;
        transition: filter .5s
    }

    .eduact-btn {
        display: inline-block;
        vertical-align: middle;
        -webkit-appearance: none;
        border: none;
        outline: 0 !important;
        background-color: var(--eduact-base);
        color: var(--eduact-white);
        font-size: 18px;
        font-weight: 700;
        border-radius: 6px;
        text-transform: capitalize;
        padding: 16px 32px 15px;
        overflow: hidden;
        z-index: 2;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        transition: .3s
    }

body.dark-mode-active .course-details__sidebar__post__content h4 {
    color: #e0e0e0;
}

body.dark-mode-active .course-details__sidebar__post__content span {
    color: #b0b0b0;
}

.comment-header img {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.eduact-btn__curve {
    position: absolute;
    right: -15px;
    top: 0;
    width: 33px;
    height: 100%;
    background: var(--eduact-soft2);
    opacity: .2;
    z-index: 0;
    -webkit-transform: skewX(-22deg);
    transform: skewX(-22deg);
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

    .preloader {
        background-repeat: no-repeat;
        background-position: center center
    }

    .scroll-top, .scroll-top::after {
        -webkit-transition: .2s linear;
        cursor: pointer
    }

    .eduact-btn i {
        display: inline-block;
        margin-left: 11px;
        top: 2px
    }

    .eduact-btn:hover .eduact-btn__curve {
        right: 0;
        width: 100%;
        -webkit-transform: skewX(0);
        transform: skewX(0)
    }
    .chat-window-wrapper .chat-window{
        border-radius: 25px !important;
    }

    .preloader {
        position: fixed;
        background-color: var(--eduact-black);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9991;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        text-align: center
    }

    .scroll-top {
        position: fixed;
        left: 30px;
        bottom: 30px;
        height: 50px;
        width: 50px;
        display: block;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px RGBA(var(--eduact-black2-rgb),.3);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: .2s linear
    }

     .scroll-top--active {
        opacity: 1;
        visibility: visible
    }

    .scroll-top--active {
        transform: translateY(0)
    }

    .scroll-top::after {
        position: absolute;
        content: "\e904";
        font-family: icomoon !important;
        text-align: center;
        line-height: 50px;
        font-size: 17px;
        color: var(--eduact-base);
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        display: block;
        z-index: 1;
        transition: .2s linear
    }

    .scroll-top__circle path {
        stroke: var(--eduact-base);
        stroke-width: 4;
        fill: none;
        box-sizing: border-box;
        -webkit-transition: .2s linear;
        transition: .2s linear
    }

             .main-menu__right .eduact-btn {
                background-color: var(--eduact-secondary)
            }

             .main-menu .main-menu__list li ul li > ul ul, .stricky-header .main-menu__list li ul li > ul ul {
                display: none
            }

    .section-title {
        position: relative;
        display: block;
        margin-bottom: 50px
    }

    .section-title__title {
        font-size: 40px;
        line-height: 47px;
        color: var(--eduact-black);
        margin: 0
    }

    body.dark-mode-active .section-title__title {
        color: #e0e0e0 !important;
    }

    .main-menu .container, .main-menu__logo {
        display: flex;
        align-items: center;
        position: relative
    }

    .main-menu {
        background-color: transparent;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 91;
        padding: 0
    }

    .main-menu__nav {
        margin-left: auto;
        margin-right: auto
    }

    .main-menu .main-menu__list, .main-menu .main-menu__list ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        align-items: center;
        display: none
    }

        .main-menu .main-menu__list > li, .stricky-header .main-menu__list > li {
            padding-top: 39px;
            padding-bottom: 44px;
            position: relative
        }

            .main-menu .main-menu__list > li.dropdown > a::after, .stricky-header .main-menu__list > li.dropdown > a::after {
                position: relative;
                right: 0;
                top: 0;
                border-radius: 0;
                font-size: 11px;
                font-weight: 600;
                font-family: "Font Awesome 5 Free";
                content: "\f078";
                color: inherit;
                line-height: 10px;
                margin-left: 5px
            }

            .main-menu .main-menu__list > li + li, .stricky-header .main-menu__list > li + li {
                margin-left: 55px
            }

            .main-menu .main-menu__list > li > a, .stricky-header .main-menu__list > li > a {
                font-size: 16px;
                display: flex;
                align-items: center;
                font-family: var(--heading-font);
                color: var(--eduact-white);
                font-weight: 600;
                text-transform: capitalize;
                letter-spacing: .48px;
                position: relative;
                transition: .5s
            }

        .main-menu .main-menu__list li ul, .stricky-header .main-menu__list li ul {
            position: absolute;
            top: 80%;
            left: -25px;
            min-width: 300px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            opacity: 0;
            visibility: hidden;
            transform-origin: top center;
            transform: scaleY(0) translateZ(100px);
            transition: opacity .5s,visibility .5s,transform .7s;
            z-index: 99;
            background-color: whitesmoke;
            padding: 15px 20px 10px;
            border-radius: 0
        }

body.dark-mode-active .counter-one__area {
    background: #303030 !important;
}

body.dark-mode-active .counter-one__title {
    color: #e0e0e0;
}

body.dark-mode-active .counter-one__list li {
    background-color: #414040;
}

body.dark-mode-active .main-menu .main-menu__list li ul,
body.dark-mode-active .stricky-header .main-menu__list li ul {
    background: #303030;
}

        .main-menu .main-menu__list li:hover > ul, .stricky-header .main-menu__list li:hover > ul {
            opacity: 1;
            visibility: visible;
            transform: scaleY(1) translateZ(0)
        }

        .main-menu .main-menu__list > .megamenu, .stricky-header .main-menu__list > .megamenu {
            position: static
        }

            .main-menu .main-menu__list > .megamenu > ul, .stricky-header .main-menu__list > .megamenu > ul {
                top: 100% !important;
                left: 0 !important;
                right: 0 !important;
                background-color: transparent;
                box-shadow: none;
                padding: 0
            }

        .main-menu .main-menu__list li ul li, .stricky-header .main-menu__list li ul li {
            flex: 1 1 100%;
            width: 100%;
            position: relative
        }

            .main-menu .main-menu__list li ul li > a, .stricky-header .main-menu__list li ul li > a {
                font-size: 16px;
                line-height: 26px;
                color: var(--eduact-text);
                font-weight: 500;
                font-family: var(--heading-font);
                display: flex;
                padding: 7px 20px;
                transition: .4s;
                margin-bottom: 4px
            }

                body.dark-mode-active .main-menu .main-menu__list li ul li > a, 
                body.dark-mode-active .stricky-header .main-menu__list li ul li > a {
                    color: #e1e1e1;
                }

                .main-menu .main-menu__list li ul li > a::after, .stricky-header .main-menu__list li ul li > a::after {
                    position: absolute;
                    right: 20px;
                    top: 7px;
                    border-radius: 0;
                    font-size: 14px;
                    font-weight: 700;
                    font-family: "Font Awesome 5 Free";
                    content: "\f0da";
                    color: var(--eduact-base);
                    visibility: hidden;
                    opacity: 0;
                    transition: .5s;
                    transform: scale(0)
                }

            .main-menu .main-menu__list li ul li.current > a, .main-menu .main-menu__list li ul li:hover > a, .stricky-header .main-menu__list li ul li.current > a, .stricky-header .main-menu__list li ul li:hover > a {
                background-color: var(--eduact-black);
                color: var(--eduact-white)
            }

                body.dark-mode-active .main-menu .main-menu__list li ul li.current > a,
                body.dark-mode-active .main-menu .main-menu__list li ul li:hover > a,
                body.dark-mode-active .stricky-header .main-menu__list li ul li.current > a,
                body.dark-mode-active .stricky-header .main-menu__list li ul li:hover > a {
                    background-color: #3b3939;
                    color: #fff;
                }

                .main-menu .main-menu__list li ul li.current > a::after, .main-menu .main-menu__list li ul li:hover > a::after, .stricky-header .main-menu__list li ul li.current > a::after, .stricky-header .main-menu__list li ul li:hover > a::after {
                    visibility: visible;
                    opacity: 1;
                    transform: scale(1)
                }

            .main-menu .main-menu__list li ul li > ul, .stricky-header .main-menu__list li ul li > ul {
                top: 0;
                left: calc(100% + 20px)
            }

.noneContainerPadding {
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: sticky !important;
}

.special-logo {
    width: 55px;
}

.main-footer__about a img {
    width: 55px;
}

@media (min-width:1200px) and (max-width:1400px) {
    .main-menu__list li:last-child ul li > ul, .main-menu__list li:nth-last-child(2) ul li > ul {
            left: auto;
            right: calc(100% + 20px)
        }
    }

    .main-menu__right, .mobile-nav__social {
        display: flex;
        align-items: center
    }
    /*
    .main-menu__right .eduact-btn {
        font-size: 16px;
        margin-left: 19px;
        font-weight: 600;
        padding: 7px 20.5px;
        height: 40px
    }*/

    @media (max-width:768px) {
        
        .noneContainerPadding {
            margin: 15px auto;
            width: 90%;
        }
        .mobile-nav__content .eduact-btne {
            padding: 6px 16px !important;
            font-size: 14px !important;
            margin-right: 5px !important;
        }

            .mobile-nav__content .eduact-btne::before {
                width: 37px !important;
                height: 13px !important;
            }

        .mobile-nav__content .lgs::before {
            width: 30px !important;
        }
    }



    .main-menu__right .eduact-btn, .mobile-nav__content .eduact-btne {
        cursor: pointer;
        position: relative;
        padding: 5px 18px;
        font-size: 18px;
        color: #e0e0e0;
        border: 2px solid #54A771;
        border-radius: 34px;
        background-color: transparent;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        overflow: hidden;
        margin-right: 20px;
    }

        .main-menu__right .eduact-btn::before, .mobile-nav__content .eduact-btne::before {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            border-radius: inherit;
            scale: 0;
            z-index: -1;
            background-color: #54A771;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
        }

        .main-menu__right .eduact-btn:hover, .mobile-nav__content .eduact-btne:hover {
            color: #fff;
            scale: 1.1;
            /*box-shadow: 0 0px 7px #54A771;*/
        }

        .main-menu__right .eduact-btn:active, .mobile-nav__content .eduact-btne:active {
            scale: 1;
        }





        .main-menu__right .eduact-btn:hover .eduact-btn__curve {
            opacity: .2
        }

    .main-menu__right .eduact-btn__curve {
        opacity: 0
    }

    .main-menu__right .mobile-nav__toggler {
        margin-right: 18px
    }

    .main-menu__login {
        position: relative;
        font-size: 20px;
        color: var(--eduact-white);
        display: flex;
        align-items: center;
        height: 50px;
        transition: .5s
    }

    .main-menu__login {
        font-size: 24px;
        margin-left: 11px;
    }

    .stricky-header {
        position: fixed;
        z-index: 991;
        top: 0;
        left: 0;
        background-color: var(--eduact-black);
        box-shadow: 0 10px 60px 0 RGBA(var(--eduact-black-rgb),.07);
        width: 100%;
        transform: translateY(-120%);
        transition: transform .5s
    }

body.dark-mode-active .stricky-header {
    background-color: #1e1e1e;
}

             .mobile-nav__toggler:hover {
                color: var(--eduact-base)
            }

    .mobile-nav__toggler {
        font-size: 24px;
        color: var(--eduact-white);
        cursor: pointer;
        transition: .5s
    }

    @keyframes bubbleMover {
        0% {
            -webkit-transform: translateY(0) translateX(0) rotate(0);
            transform: translateY(0) translateX(0) rotate(0)
        }

        30% {
            -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
            transform: translateY(30px) translateX(50px) rotate(15deg);
            -webkit-transform-origin: center center;
            transform-origin: center center
        }

        50% {
            -webkit-transform: translateY(50px) translateX(100px) rotate(45deg);
            transform: translateY(50px) translateX(100px) rotate(45deg);
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom
        }

        80% {
            -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
            transform: translateY(30px) translateX(50px) rotate(15deg);
            -webkit-transform-origin: left top;
            transform-origin: left top
        }

        100% {
            -webkit-transform: translateY(0) translateX(0) rotate(0);
            transform: translateY(0) translateX(0) rotate(0);
            -webkit-transform-origin: center center;
            transform-origin: center center
        }
    }

    @keyframes footerTree {
        0%,100% {
            -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0)
        }

        25%,75% {
            -webkit-transform: rotate(5deg) translateX(15px);
            transform: rotate(5deg) translateX(15px)
        }

        50% {
            -webkit-transform: rotate(10deg) translateX(30px);
            transform: rotate(10deg) translateX(30px)
        }
    }

    @keyframes shapeMover2 {
        0%,100%,30%,80% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        20%,60% {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
        }
    }

    @keyframes shapeMover3 {
        0%,100%,30%,80% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        20%,60% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-79deg)
        }
    }

    @keyframes shapeMover {
        0%,100% {
            transform: perspective(400px) translateY(0) rotate(0) translateZ(0) translateX(0)
        }

        50% {
            transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px)
        }
    }

    @keyframes banner3Shake {
        0%,100% {
            -webkit-transform: rotate3d(0,1,0,0deg);
            transform: rotate3d(0,1,0,0deg)
        }

        30%,80% {
            -webkit-transform: rotate3d(0,0,1,5deg);
            transform: rotate3d(0,0,1,5deg)
        }

        60% {
            -webkit-transform: rotate3d(1,0,0,0deg);
            transform: rotate3d(1,0,0,0deg)
        }
    }

    @keyframes squareMover {
        0%,100% {
            -webkit-transform: translate(0,0) rotate(0);
            transform: translate(0,0) rotate(0)
        }

        20%,60% {
            -webkit-transform: translate(20px,40px) rotate(180deg);
            transform: translate(20px,40px) rotate(180deg)
        }

        30%,80% {
            -webkit-transform: translate(40px,60px) rotate(0);
            transform: translate(40px,60px) rotate(0)
        }
    }

    @keyframes treeMove {
        0%,100% {
            -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0)
        }

        25%,75% {
            -webkit-transform: rotate(5deg) translateX(15px);
            transform: rotate(5deg) translateX(15px)
        }

        50% {
            -webkit-transform: rotate(10deg) translateX(30px);
            transform: rotate(10deg) translateX(30px)
        }
    }

    @-webkit-keyframes float-bob-y-2 {
        0%,100% {
            -webkit-transform: translateY(0) translateX(0) rotate(0);
            transform: translateY(0) translateX(0) rotate(0)
        }

        50% {
            -webkit-transform: translateY(10px) translateX(10px) rotate(5deg);
            transform: translateY(10px) translateX(10px) rotate(5deg)
        }
    }

    @keyframes float-bob-y-2 {
        0%,100% {
            -webkit-transform: translateY(0) translateX(0) rotate(0);
            transform: translateY(0) translateX(0) rotate(0)
        }

        50% {
            -webkit-transform: translateY(10px) translateX(10px) rotate(5deg);
            transform: translateY(10px) translateX(10px) rotate(5deg)
        }
    }

    @keyframes ripple {
        70% {
            -webkit-box-shadow: 0 0 0 40px rgba(255,255,255,0);
            box-shadow: 0 0 0 40px rgba(255,255,255,0)
        }

        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0);
            box-shadow: 0 0 0 0 rgba(255,255,255,0)
        }
    }

    @keyframes blinker {
        0%,100% {
            transform: scale(1,1)
        }

        50% {
            transform: scale(1.03,1.03)
        }
    }

    @keyframes blinker2 {
        0%,100% {
            transform: scale(1,1)
        }

        50% {
            transform: scale(.6,.6)
        }
    }

    @keyframes sunMove {
        0%,100% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        25%,75% {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        50% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
    }

    @keyframes circle {
        0% {
            transform: rotate(90deg)
        }

        100% {
            transform: rotate(450deg)
        }
    }

    @keyframes zoomBig {
        0% {
            transform: translate(-50%,-50%) scale(.5);
            opacity: 1;
            border-width: 3px
        }

        40% {
            opacity: .5;
            border-width: 2px
        }

        65% {
            border-width: 1px
        }

        100% {
            transform: translate(-50%,-50%) scale(1);
            opacity: 0;
            border-width: 1px
        }
    }

    .mobile-nav__content .main-menu__list li:not(:last-child) {
        border-bottom: 1px solid RGBA(var(--eduact-white-rgb),.1)
    }

    @keyframes rotated {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes rotated2 {
        0%,100% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        50% {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }
    }

    @keyframes iconTranslateX {
        49% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%)
        }

        50% {
            opacity: 0;
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%)
        }

        51% {
            opacity: 1
        }
    }

    @keyframes iconTranslateY {
        49% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%)
        }

        50% {
            opacity: 0;
            -webkit-transform: translateX(100%);
            transform: translateX(100%)
        }

        51% {
            opacity: 1
        }
    }

    @keyframes animationFrames {
        0%,100% {
            transform: translate(0,0) rotate(0) scale(1)
        }

        20% {
            transform: translate(73px,-1px) rotate(36deg) scale(.9)
        }

        40% {
            transform: translate(141px,72px) rotate(72deg) scale(1)
        }

        60% {
            transform: translate(83px,122px) rotate(108deg) scale(1.2)
        }

        80% {
            transform: translate(-40px,72px) rotate(144deg) scale(1.1)
        }
    }

    @keyframes movebounce {
        0%,100% {
            transform: translateX(0) translateY(0)
        }

        50% {
            transform: translateX(-10px) translateY(-10px)
        }
    }

    @keyframes movebounce2 {
        0%,100% {
            transform: translateX(0)
        }

        50% {
            transform: translateX(-10px)
        }
    }

    @keyframes movebounce3 {
        0%,100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(20px)
        }
    }

    @keyframes movebounce4 {
        0%,100% {
            transform: translateX(0)
        }

        50% {
            transform: translateX(10px)
        }
    }

    @keyframes shadows {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--eduact-white-rgb),.21),0 0 0 30px rgba(var(--eduact-white-rgb),.21),0 0 0 50px rgba(var(--eduact-white-rgb),.21)
        }

        100% {
            box-shadow: 0 0 0 30px rgba(var(--eduact-white-rgb),.21),0 0 0 50px rgba(var(--eduact-white-rgb),.21),0 0 0 70px rgba(var(--eduact-white-rgb),0)
        }
    }

    @keyframes shadows2 {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--eduact-white-rgb),.05),0 0 0 30px rgba(var(--eduact-white-rgb),.05),0 0 0 50px rgba(var(--eduact-white-rgb),.05)
        }

        100% {
            box-shadow: 0 0 0 30px rgba(var(--eduact-white-rgb),.05),0 0 0 50px rgba(var(--eduact-white-rgb),.05),0 0 0 70px rgba(var(--eduact-white-rgb),0)
        }
    }

    .mobile-nav__wrapper {
        top: 0;
        left: 0;
        /*width: 100vw;*/
        height: 100vh;
        z-index: 999;
        transform: translateX(-100%);
        transform-origin: left center;
        transition: transform .5s .5s,visibility .5s .5s;
        visibility: hidden;
        position: fixed
    }
.mobile-nav__wrapper.expanded {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition: transform .5s,visibility .5s
}
.mobile-nav__content .main-menu__list li a button.expanded {
    transform: rotate(0);
    background-color: #d0aed4;
    color: var(--eduact-black)
}


body.dark-mode-active .mobile-nav__content .main-menu__list li a button.expanded {
    color: #e0e0e0;
}

.mobile-nav__wrapper.expanded .mobile-nav__content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 100ms ease 100ms, visibility 100ms ease 100ms, transform 100ms ease 100ms;
    /*transition: opacity .5s .5s,visibility .5s .5s,transform .5s .5s*/
}

        .mobile-nav__wrapper .container {
            padding-left: 0;
            padding-right: 0
        }

    .mobile-nav__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--eduact-black);
        opacity: .3;
        cursor: url(../images/close.png),auto
    }

.mobile-nav__content {
    width: 300px;
    background-color: whitesmoke;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    z-index: 10;
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding: 30px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: opacity .5s,visibility .5s,transform .5s
}

body.dark-mode-active .mobile-nav__content {
    background-color: #232222;
}

.logo-box h4 {
    color: #000000d4;
}

body.dark-mode-active .logo-box h4 {
    color: #e0e0e0 !important;
}

.fa-times:before {
    color: #000000d4;
}

body.dark-mode-active .fa-times:before {
    color: #e0e0e0 !important;
}

.search-popup__form .eduact-btn::after, .search-popup__overlay {
    background-color: var(--eduact-black)
}

    .mobile-nav__content .main-menu__nav {
        display: block;
        padding: 0
    }

    .mobile-nav__content .logo-box {
        margin-bottom: 15px;
        display: flex
    }

     .mobile-nav__container .main-menu__logo, .mobile-nav__container .main-menu__right {
        display: none
    }

    .mobile-nav__close {
        position: absolute;
        top: 31px;
        right: 19px;
        font-size: 21px;
        color: var(--eduact-white);
        cursor: pointer;
    }

       

    .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list ul {
        margin: 0;
        padding: 0;
        list-style-type: none
    }

        .mobile-nav__content .main-menu__list ul {
            display: none;
            border-top: 1px solid RGBA(var(--eduact-white-rgb),.1)
        }

            .mobile-nav__content .main-menu__list ul li > a {
                padding-left: 1em
            }

        .mobile-nav__content .main-menu__list li > a {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
            color: #000000d4;
            font-size: 16px;
            font-family: var(--heading-font);
            text-transform: capitalize;
            font-weight: 600;
            height: 46px;
            letter-spacing: .48px;
            align-items: center;
            transition: .5s
        }

body.dark-mode-active .mobile-nav__content .main-menu__list li > a {
    color: #c2baba;
}

.mobile-nav__contact li a {
    color: #000000d4 !important;
}

body.dark-mode-active .mobile-nav__contact li a {
    color: #c2baba !important;
}
.mobile-nav__social a {
    color: #2a254d !important;
}

body.dark-mode-active .mobile-nav__social a {
    color: #e0e0e0 !important;
}

    .mobile-nav__contact li a:hover, .mobile-nav__social a:hover {
        color: var(--eduact-base)
    }

    .mobile-nav__content .main-menu__list li a button {
        width: 30px;
        height: 30px;
        background-color: #2a254d;
        border: none;
        outline: 0;
        color: var(--eduact-white);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transform: rotate(-90deg);
        transition: transform .5s;
        transition: all 0.3s ease;
    }

body.dark-mode-active .mobile-nav__content .main-menu__list li a button {
    background-color: #303030;
}

.mobile-nav__social a {
    font-size: 16px;
    color: var(--eduact-white);
    transition: .5s
}

        .mobile-nav__social a + a {
            margin-left: 20px
        }

    .mobile-nav__contact {
        margin-top: 20px;
        margin-bottom: 20px
    }

        .mobile-nav__contact li {
            color: var(--eduact-white);
            font-size: 14px;
            font-weight: 500;
            position: relative;
            display: flex;
            align-items: center
        }

    .mobile-nav__contact li + li {
        margin-top: 15px
    }

    .mobile-nav__contact li a {
        color: inherit;
        transition: .5s
    }

    .mobile-nav__contact li > i {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #2a254d;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 14px;
        margin-right: 10px;
        color: var(--eduact-white)
    }

body.dark-mode-active .mobile-nav__contact li > i {
        background-color: #303030;
    }

.search-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    -webkit-transition: 1s;
    -khtml-transition: all 1s ease;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}

    .search-popup__overlay {
        position: fixed;
        width: 224vw;
        height: 224vw;
        top: calc(90px - 112vw);
        right: calc(50% - 112vw);
        z-index: 3;
        display: block;
        -webkit-border-radius: 50%;
        -khtml-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: scale(0);
        -khtml-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transition: transform .8s ease-in-out .3s;
        -khtml-transition: transform .8s ease-in-out;
        -moz-transition: transform .8s ease-in-out;
        -ms-transition: transform .8s ease-in-out;
        -o-transition: transform .8s ease-in-out;
        transition: transform .8s ease-in-out .3s;
        opacity: .8;
        cursor: url(../images/close.png),auto
    }

    .search-popup__content {
        position: fixed;
        width: 0;
        max-width: 560px;
        padding: 30px 15px;
        left: 50%;
        top: 50%;
        opacity: 0;
        z-index: 3;
        -webkit-transform: translate(-50%,-50%);
        -khtml-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        -webkit-transition: opacity .5s,width .8s cubic-bezier(.225, .01, .475, 1.01) .8s,transform .2s;
        -khtml-transition: opacity 0.5s 0s,width 0.8s 0.8s cubic-bezier(0.225,0.01,0.475,1.01),transform 0.2s 0s;
        -moz-transition: opacity .5s,width .8s cubic-bezier(.225, .01, .475, 1.01) .8s,transform .2s;
        -ms-transition: opacity .5s,width .8s cubic-bezier(.225, .01, .475, 1.01) .8s,transform .2s;
        -o-transition: opacity .5s,width .8s cubic-bezier(.225, .01, .475, 1.01) .8s,transform .2s;
        transition: opacity .5s,width .8s cubic-bezier(.225, .01, .475, 1.01) .8s,transform .2s;
        transition-delay: .2s;
        -webkit-transition-delay: .2s
    }

    .search-popup__form input[type=search], .search-popup__form input[type=text] {
        width: 100%;
        background-color: var(--eduact-white);
        font-size: 15px;
        color: var(--eduact-text);
        border: none;
        outline: 0;
        height: 66px;
        padding-left: 30px
    }

    .search-popup__form .eduact-btn {
        padding: 0;
        width: 66px;
        height: 66px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: absolute;
        top: 0;
        right: -1px;
        border-radius: 0
    }

        .search-popup__form .eduact-btn i {
            margin: 0
        }

    .search-popup.active {
        z-index: 9999
    }

        .search-popup.active .search-popup__overlay {
            top: auto;
            bottom: calc(90px - 112vw);
            -webkit-transform: scale(1);
            -khtml-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            transition-delay: 0s;
            -webkit-transition-delay: 0s;
            opacity: .8;
            -webkit-transition: transform 1.6s cubic-bezier(.4, 0, 0, 1);
            -khtml-transition: transform 1.6s cubic-bezier(0.4,0,0,1);
            -moz-transition: transform 1.6s cubic-bezier(.4, 0, 0, 1);
            -ms-transition: transform 1.6s cubic-bezier(.4, 0, 0, 1);
            -o-transition: transform 1.6s cubic-bezier(.4, 0, 0, 1);
            transition: transform 1.6s cubic-bezier(.4, 0, 0, 1)
        }

    .search-popup.active .search-popup__content {
        width: 100%;
        opacity: 1;
        transition-delay: .7s;
        -webkit-transition-delay: .7s
    }

@media(max-width: 767px) {
    body.dark-mode-active .stricky-header {
        background-color: #1e1e1e;;
    }
}

    /*@media (max-width:1199px) {
        .stricky-header {
            display: none
        }*/

    @media (max-width:1400px) {
        .main-menu .main-menu__list > li + li, .stricky-header .main-menu__list > li + li {
            margin-left: 44px
        }
    }

    .about-two__thumb__one {
        text-align: right
    }

    @keyframes change-background {
        0%,100% {
            fill: var(--eduact-base)
        }

        50% {
            fill: var(--eduact-secondary)
        }
    }

     .main-footer__newsletter .eduact-btn:hover .eduact-btn__curve {
        opacity: .2
    }

     .about-two, .about-two__content, .about-two__thumb {
        position: relative
    }

    @media (max-width:575px) {
        h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, p br {
            display: none
        }
    }

    .about-two {
        overflow: hidden;
        padding: 120px 0 168px
    }

    @media (max-width:1199px) {

        .about-two {
            padding-bottom: 120px
        }
    }

    @media (max-width:767px) {

        .main-menu__list li {
            border-bottom: 1px solid #deeaee !important;
        }

        body.dark-mode-active .main-menu__list li {
            border-bottom: 1px solid #deeaee17 !important;
        }

        .dark-mode-toggle {
            margin: 15px 0px;
        }

        .mobile-nav__content .eduact-btne {
            margin: 5px 0px 0px !important;
            background-color: transparent;
            border: 2px solid #2a254d;
            color: #000000d4;
        }

        body.dark-mode-active .mobile-nav__content .eduact-btne {
            background-color: #303030;
            color: #e0e0e0;
            border: 2px solid #b0b0b0;
        }

        .section-title {
            margin-bottom: 40px
        }

        .section-title__title {
            font-size: 30px;
            line-height: 40px
        }

             .section-title__title br {
                display: none
            }

        /* .main-menu__logo {
        padding: 23px 0
    }*/

        .search-popup__overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: none;
            width: 100%;
            height: 100%;
            border-radius: 0;
            transform: translateY(-110%)
        }

        .search-popup.active .search-popup__overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: none;
            width: 100%;
            height: 100%;
            border-radius: 0;
            transform: translateY(0)
        }

        .about-two {
            padding: 80px 0
        }

        .about-two__thumb__one {
            text-align: left
        }
    }

    .about-two--about {
        padding-bottom: 65px
    }

    @media (max-width:1199px) {
        .about-two--about {
            padding-bottom: 0
        }

        .about-two__thumb {
            max-width: 613px;
            margin: auto
        }

        .about-two__content {
            padding-top: 70px
        }
    }

    .about-two__thumb__one {
        position: relative
    }

        .about-two__thumb__one img {
            border-radius: 500px;
            max-width: 100%;
            height: auto
        }

    .about-two__thumb__two {
        border-radius: 500px;
        border: 10px solid var(--eduact-white);
        position: absolute;
        left: -41px;
        bottom: 8px;
        max-width: 305px
    }

    .about-two__fact__icon, .about-two__thumb__two-icon {
        height: 70px;
        border-radius: 14px;
        align-items: center;
        color: var(--eduact-white);
        font-size: 44px;
        background-color: var(--eduact-base)
    }

    .about-two__thumb__two img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 500px
    }

    .about-two__thumb__two svg {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 212px;
        height: auto
    }

    .about-two__thumb__two-icon {
        width: 70px;
        display: flex;
        justify-content: center;
        z-index: 2;
        position: absolute;
        right: -5px;
        bottom: 12px
    }

        .about-two__thumb__two-icon span {
            display: inline-block
        }

    .about-two__thumb__shape1 {
        position: absolute;
        left: 149px;
        top: 9px;
        z-index: -1
    }

        .about-two__thumb__shape1 img {
            -webkit-animation: 20s linear infinite rotated;
            animation: 20s linear infinite rotated
        }

    .about-two__thumb__shape2 {
        position: absolute;
        left: -84px;
        top: 117px;
        z-index: -1
    }

        .about-two__thumb__shape2 img {
            -webkit-animation: 15s linear infinite rotated;
            animation: 15s linear infinite rotated
        }

    .about-two__thumb__shape3 {
        position: absolute;
        left: -54px;
        bottom: 2px;
        z-index: -1
    }

        .about-two__thumb__shape3 img {
            -webkit-animation: 15s linear infinite rotated;
            animation: 15s linear infinite rotated
        }

    .about-two__thumb__shape4 img {
        -webkit-animation-name: float-bob-y-2;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear
    }

    .about-two__thumb__shape4 {
        position: absolute;
        right: 88px;
        bottom: -54px
    }

        .about-two__thumb__shape4 img {
            animation-name: float-bob-y-2;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-timing-function: linear
        }

    .about-two__fact {
        position: absolute;
        left: -32px;
        top: 9px;
        width: 267px
    }

    .about-two__fact__icon {
        width: 70px;
        display: flex;
        justify-content: center;
        margin: 0 0 -34px 30px;
        z-index: 2;
        position: relative
    }

        .about-two__fact__icon span {
            display: inline-block
        }

    .about-two__fact:hover .about-two__fact__icon span {
        animation: 2s linear bounceIn
    }

    .about-two__fact__content {
        position: relative;
        background-color: var(--eduact-white);
        border-radius: 10px;
        box-shadow: 0 0 60px 0 rgba(var(--eduact-black2-rgb),.07);
        padding: 49px 25px 27px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .about-two__fact__count {
        display: block;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        color: var(--eduact-secondary);
        margin: 0;
        position: relative;
        z-index: 2
    }

        .about-two__fact__count .count-box {
            display: inline-flex
        }

    .about-two__fact__title {
        line-height: 1;
        font-size: 20px;
        color: var(--eduact-text);
        font-weight: 600;
        margin: 0
    }



.about-two__content .section-title {
    margin-bottom: 25px
}

    .about-two__content__text {
        font-weight: 600;
        margin: 0 0 33px
    }

body.dark-mode-active .about-two__content__text {
    color: #b0b0b0;
}

.about-two__content__text strong {
    font-size: 1.7em !important;
}

body.dark-mode-active .about-two__content__text strong {
    color: #e0e0e0 !important;
}

body.dark-mode-active .about-two__content ul li {
        color: #b0b0b0;
}

    .about-two__about-box {
        position: relative;
        margin-bottom: 46px
    }

        .about-two__about-box:hover .about-two__about-box__icon span {
            transform: rotateY(360deg)
        }

    .about-two__about-box__top {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 5px
    }

    .about-two__about-box__icon {
        font-size: 50px;
        line-height: 50px;
        color: var(--eduact-base);
        margin-right: 29px
    }

        .about-two__about-box__icon span {
            display: block;
            -webkit-transition: .6s;
            -o-transition: .6s;
            transition: .6s
        }

    .about-two__about-box__title {
        font-size: 32px;
        font-weight: 700;
        line-height: 26px;
        margin: 0
    }

body.dark-mode-active .about-two__about-box__title {
    color: #e0e0e0;
}

.about-two__about-box__text {
    font-weight: 600;
    margin: 0
}

    @keyframes border-background {
        0%,100% {
            border-color: var(--eduact-secondary);
            transform: translateX(0) translateY(0)
        }

        50% {
            border-color: var(--eduact-base);
            transform: translateX(10px) translateY(10px)
        }
    }

    @keyframes bg2-background {
        0% {
            background-color: var(--eduact-secondary);
            transform: translateY(0)
        }

        50% {
            background-color: var(--eduact-base)
        }

        100% {
            background-color: var(--eduact-secondary);
            transform: translateY(-20px)
        }
    }

    @keyframes border2-background {
        0%,100% {
            border-color: var(--eduact-base)
        }

        50% {
            border-color: var(--eduact-secondary)
        }
    }

    @keyframes ball-top {
        0%,100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(20px)
        }
    }

    @keyframes ball-bottom {
        0%,100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-20px)
        }
    }

    @keyframes br-translate {
        0%,100% {
            transform: translateX(0) translateY(0)
        }

        50% {
            transform: translateX(10px) translateY(10px)
        }
    }

         .contact-info ul li.active::after, .contact-info ul li:hover::after {
            top: -40%
        }

     .course-two__like:hover {
        background-color: var(--eduact-base)
    }

    .course-details__meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .course-details__sidebar__item, .course-two__item {
        box-shadow: 0 0 60px 0 rgba(2,2,2,.07)
    }



.course-details__sidebar {
    border: 1px solid #80808038;
    border-radius: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

    .course-two__author img, .course-two__like {
        height: 44px;
        border-radius: 50%;
        position: absolute
    }

     .course-two__title a:hover {
        color: var(--eduact-base)
    }

    @media (min-width:1200px) and (max-width:1399px) {

         .course-two__author {
            padding-left: 0
        }
    }

    .course-two {
        position: relative;
        padding: 116px 0 85px
    }

    @media (max-width:767px) {
         .about-two__thumb__shape1, .about-two__thumb__shape2, .about-two__thumb__shape3, .about-two__thumb__shape4, .about-two__thumb__two {
            display: none
        }

        .about-two__fact {
            position: relative;
            left: 0;
            top: 0;
            margin: -70px 0 -20px
        }

         .course-two {
            padding: 76px 0 80px
        }
    }

    @media (max-width:767px) {

        body.dark-mode-active .no-exam-card {
            background-color: transparent !important;
            border: none !important;
        }

        .no-exam-card-title {
            font-size: 26px !important;
        }

        body.dark-mode-active .no-exam-card-title {
            color: #e0e0e0 !important;
        }

    }

    .course-two--page {
        padding: 120px 0 85px
    }

    .course-two__shape-top {
        position: absolute;
        right: 50px;
        top: 85px;
        display: none
    }

        .course-two__shape-top img {
            -webkit-animation: 2s linear infinite movebounce3;
            animation: 2s linear infinite movebounce3
        }

    @media (min-width:992px) {

        .course-two__shape-top {
            display: block
        }
    }

    .course-two__shape-bottom {
        position: absolute;
        left: 70px;
        bottom: 135px;
        display: none
    }

     .course-details__overview, .course-details__sidebar, .course-details__tabs, .course-two__author, .course-two__item, .course-two__meta {
        position: relative
    }

    .course-two__shape-bottom img {
        -webkit-animation: 2s linear infinite movebounce2;
        animation: 2s linear infinite movebounce2
    }

    @media (min-width:1500px) {
        .course-two__shape-bottom {
            display: block
        }
    }

    .course-two__item {
        background-color: var(--eduact-white);
        border-radius: 14px;
        overflow: hidden;
        margin: 0 0 36px
    }

     .course-two__like {
        background-color: var(--eduact-secondary)
    }

    .course-two__item:hover .course-two__thumb svg {
        fill: var(--eduact-base)
    }

    .course-two__thumb {
        position: relative;
        z-index: 2;
        margin: 0;
        padding: 0
    }

        .course-two__thumb img {
            -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 416 276" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="208" cy="-2" rx="279" ry="278" fill="black"/></svg>');
            mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 416 276" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="208" cy="-2" rx="279" ry="278" fill="black"/></svg>');
            mask-repeat: repeat;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: cover;
            mask-size: cover;
            width: 100%
        }

        .course-two__thumb svg {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -15px;
            margin: auto;
            fill: var(--eduact-secondary);
            transition: .5s;
            z-index: -1;
            width: calc(100% - 63px)
        }

     .course-two__title a {
        color: inherit;
        transition: .4s;
        background-image: linear-gradient(currentcolor,currentcolor),linear-gradient(currentcolor,currentcolor);
        background-size: 0 1px,0 1px;
        background-position: 100% 100%,0 100%;
        background-repeat: no-repeat
    }

    .course-two__like {
        left: 20px;
        top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        color: var(--eduact-white);
        font-size: 20px
    }

        .course-two__like:hover {
            color: var(--eduact-white)
        }

    .course-two__content {
        position: relative;
        padding: 42px 30px 30px
    }

    .course-two__title {
        font-size: 24px;
        line-height: 29px;
        margin: 0 0 25px
    }

        .course-two__title a {
            display: inline
        }

     .course-two__bottom {
        position: relative;
        background-color: var(--eduact-soft2);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 14px 19px 15px
    }

    .course-two__author img {
        width: 44px !important;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .course-two__author__name {
        font-size: 16px;
        line-height: 1;
        margin: 0 0 6px
    }

    .course-two__meta__price {
        margin: 0 0 5px;
        font-size: 20px;
        color: var(--eduact-black);
        line-height: 1
    }

    @media (max-width:767px) {
        .course-two--page {
            padding: 80px 0 45px
        }

        .course-details {
            padding: 80px 0
        }

        .course-details__title {
            margin-bottom:15px !important;
            font-size: 22px !important;
        }
    }

body.dark-mode-active .course-details__title {
    color: #e0e0e0 !important;
}

body.dark-mode-active .course-details__thumb {
    border: none !important;
}

.course-details__thumb img {
    width: 100%;
    height: auto;
    border-radius: 14px
}

    .course-details__title {
        font-size: 30px;
        margin: 0px;
    }

    .course-details__meta {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0 0 22px
    }
.main-menu__login{
    margin-right: 12px;
}

    @media (max-width:768px) {

        .main-menu__right .eduact-btn:hover, .mobile-nav__content .eduact-btne:hover {
            color: #2a254d;
        }

        .main-menu__login {
            margin-right: 0px;
        }
        .course-details__meta {
            display: block
        }

        .course-details__thumb img {
            height: auto !important
        }
    }

    .course-details__meta__price {
        color: var(--eduact-secondary);
        font-weight: 600 !important;
        font-size: 30px;
    }

            .contact-info ul li.active .contact-info__icon, .contact-info ul li.active .contact-info__text, .contact-info ul li.active .contact-info__title, .contact-info ul li:hover .contact-info__icon, .contact-info ul li:hover .contact-info__text, .contact-info ul li:hover .contact-info__title {
                color: var(--eduact-white)
            }

    .course-details .tabs-content .tab {
        position: relative;
        display: none;
        -webkit-transition: .6s;
        -moz-transition: .6s;
        -ms-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
        z-index: 10
    }

        .course-details .tabs-content .tab.active-tab {
            display: block
        }

    .course-details__overview__text {
        font-weight: 600;
        line-height: 32px;
        letter-spacing: .32px;
        margin: 0 0 19px
    }

body.dark-mode-active .course-details__overview__text {
    color: #b0b0b0;
}

body.dark-mode-active .course-details__overview h4 {
    color: #e0e0e0;
}

body.dark-mode-active .course-details__overview ul li {
    color: #b0b0b0;
}

.course-details__overview__lists {
    margin: 27px 0 0;
    padding: 0
}

    .course-details__overview__lists li {
        display: block;
        position: relative;
        padding: 0 0 0 38px;
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        color: #697585;
        margin: 0 0 14px
    }

            .course-details__overview__lists li span {
                position: absolute;
                left: 0;
                top: 3px;
                width: 24px;
                height: 24px;
                background-color: var(--eduact-secondary);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                color: var(--eduact-white)
            }

    .course-details__sidebar__item {
        margin-bottom: 15px;
        position: relative;
        background-color: var(--eduact-white);
        border-radius: 14px;
        padding: 25px 15px 30px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .course-details__sidebar {
    border: none !important;
    box-shadow: none !important;
}

body.dark-mode-active .course-details__sidebar__item {
    border: none;
    background-color: #1e1e1e;
    box-shadow: none;
}


/*.course-details__sidebar__item + .course-details__sidebar__item {*/
/*    margin-top: 36px*/
/*}*/

    .course-details__sidebar__title {
        position: relative;
        font-size: 24px;
        line-height: 26px;
        text-transform: capitalize;
        border-bottom: 1px dashed var(--eduact-secondary);
        margin: 0 0 30px;
        padding-bottom: 25px
    }

    body.dark-mode-active .course-details__sidebar__title {
        color: #e0e0e0;
    }

    .course-details__sidebar__lists, .course-details__sidebar__post {
        margin: 0;
        padding: 0;
        list-style: none
    }

        .course-details__sidebar__lists li {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            line-height: 26px;
            text-transform: capitalize;
            border-bottom: 1px solid var(--eduact-soft4);
            padding: 0 0 30px;
            margin: 29px 0 0
        }

    .course-details__sidebar__lists li i {
        color: var(--eduact-secondary);
        display: inline-block;
        margin-right: 11px
    }

    .course-details__sidebar__lists li span {
        margin-left: auto;
        font-weight: 600;
        color: var(--eduact-black);
        font-size: 16px;
    }

body.dark-mode-active .course-details__sidebar__lists li {
    border-bottom: 1px solid #313131;
}

body.dark-mode-active .course-details__sidebar__lists li span {
    color: #b0b0b0;
}

 .main-footer__social a + a {
    margin-left: 10px
}

    .course-details__sidebar .eduact-btn {
        margin: 30px 0 0;
        width: 100%;
        text-align: center
    }

    .counter-one__list::after, .counter-one__list::before {
        margin: auto;
        background-color: var(--eduact-soft);
        content: ''
    }

    .course-details__sidebar__post li {
        list-style: none;
        min-height: 89px;
        position: relative;
        border-bottom: 1px solid var(--eduact-soft4);
        padding: 0 0 29px 110px;
        margin: 0 0 29px
    }

        .course-details__sidebar__post li:last-child {
            margin-bottom: 0
        }

body.dark-mode-active .course-details__sidebar__post li {
    border-bottom: 1px solid  #313131;
}

.course-details__sidebar__post__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 89px;
    height: 89px;
    border-radius: 6px;
    overflow: hidden
}

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

     .counter-one__shapes, .course-details__sidebar__post__content, .main-footer__about, .main-footer__navmenu, .main-footer__newsletter, .main-footer__social {
        position: relative
    }

    .course-details__sidebar__post__meta {
        font-weight: 600;
        display: block;
        line-height: 1.2;
        margin: 0 0 10px
    }

        .course-details__sidebar__post__meta a {
            color: #fff;
            background-color: #f57005;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin-bottom: 5px;
        }

            .course-details__sidebar__post__meta a:hover {
                color: var(--eduact-base)
            }

    .course-details__sidebar__post__title {
        margin: 0 0 10px;
        font-size: 20px
    }

        .course-details__sidebar__post__title a {
            color: inherit;
            background-image: linear-gradient(currentcolor,currentcolor),linear-gradient(currentcolor,currentcolor);
            display: inline;
            background-size: 0 1px,0 1px;
            background-position: 100% 100%,0 100%;
            background-repeat: no-repeat;
            font-size: 17px !important;
            transition: .4s
        }

            .counter-one__title span, .course-details__sidebar__post__title a:hover {
                color: var(--eduact-secondary)
            }

    .course-details__sidebar__post__ratings {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: var(--eduact-secondary);
        letter-spacing: 4px
    }

    .course-details__sidebar__post__ratings__reviews {
        color: var(--eduact-black);
        letter-spacing: 0;
        font-size: 14px;
        font-weight: 500
    }

body.dark-mode-active .course-details__sidebar__post__ratings__reviews {
        color: #b0b0b0;

}

.counter-one {
    position: relative;
    background-color: var(--eduact-base);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 22px 0 59px;
    z-index: 1;
    transition: all 0.3s ease;
}

body.dark-mode-active .counter-one {
    background-color: #1E1E1E;
}

.counter-one__left {
    position: relative;
    padding: 62px 0 0
}

    .counter-one__left__title {
        color: var(--eduact-white);
        font-size: 40px;
        margin: 0 0 30px
    }

    @media (max-width:767px) {

        .counter-one__left__title {
            font-size: 30px
        }
    }

    .counter-one__left__content {
        border-radius: 12px;
        background: rgba(255,252,252,.12);
        font-size: 20px;
        line-height: 30px;
        color: var(--eduact-white);
        padding: 31px 29px;
        margin: 0 0 40px;
        overflow: hidden;
        position: relative
    }

    .counter-one__area {
        background-color: var(--eduact-white)
    }

    .counter-one__left__content::after {
        position: absolute;
        content: '';
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 90px 52px;
        border-color: transparent transparent var(--eduact-secondary) transparent
    }

    .counter-one__left img {
        position: absolute;
        right: 23px;
        bottom: -42px;
        -webkit-animation: 20s linear infinite rotated;
        animation: 20s linear infinite rotated
    }

    .counter-one__area {
        position: relative;
        width: 392px;
        height: 392px;
        border-radius: 50%;
        margin: 0 101px 0 auto;
        z-index: 2;
        text-align: center;
        padding: 55px 40px
    }

    @media (max-width:991px) {

        .course-two__author {
            padding-left: 0
        }

            .course-two__author img {
                display: none !important
            }

        .counter-one__area {
            margin: 35px auto 0
        }
    }

    .counter-one__title {
        font-size: 24px;
        margin: 0
    }

        .counter-one__title br {
            display: inherit
        }

    .counter-one__shapes svg {
        position: absolute;
        top: -90px;
        right: 0;
        width: 581px;
        height: 596px;
        animation: 1.5s ease-in-out infinite blinker;
        -webkit-animation: 1.5s ease-in-out infinite blinker;
        -moz-animation: 1.5s ease-in-out infinite blinker
    }

    .counter-one__list {
        margin: 0 auto;
        padding: 0;
        max-width: 200px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative
    }

        .counter-one__list li {
            list-style: none;
            width: 78px;
            height: 78px;
            border-radius: 10px;
            background: var(--eduact-soft);
            font-size: 26.343px;
            font-weight: 700;
            color: var(--eduact-base);
            padding: 18px 15px 15px;
            margin-top: 25px
        }

        body.dark-mode-active .counter-one__list li span {
            color: #e0e0e0 !important;
        }

        .counter-one__list li i {
            display: block;
            font-size: 14.583px;
            font-weight: 400;
            color: var(--eduact-black);
            font-style: normal
        }

        .counter-one__list::after {
            position: absolute;
            left: 0;
            bottom: 90px;
            width: 100%;
            height: 1px
        }

        .counter-one__list::before {
            position: absolute;
            left: 97px;
            bottom: 0;
            width: 1px;
            height: calc(100% - 25px)
        }

    @media (max-width:767px) {
        .counter-one__area {
            max-width: 100%;
            height: auto
        }

        .counter-one__shapes {
            display: none
        }
    }

    .main-footer {
        background-color: var(--eduact-black);
        position: relative;
        padding: 132px 0 120px;
        transition: all 0.3s ease;
    }

    body.dark-mode-active .main-footer {
        background-color: #1e1e1e;
    }

    .main-footer__about__text {
        color: var(--eduact-text2);
        font-size: 15px;
        line-height: 24px;
        margin: 24px 10px 24px;
    }

     .main-footer__title {
        font-weight: 600;
        line-height: 29.407px;
        text-transform: capitalize;
        font-style: normal
    }

     .main-footer__logo {
        display: block;
        margin: 0 0 20px
    }

    .main-footer__social a {
        padding: 7px 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: rgba(var(--eduact-base-rgb),.17);
        color: var(--eduact-white);
        line-height: 30px;
        border-radius: 50%;
        font-size: 15px;
        text-align: center
    }

        .main-footer__social a i {
            font-size: 25px;
        }

        .main-footer__social a:hover {
            background-color: var(--eduact-base);
            color: var(--eduact-white)
        }

    .main-footer__title {
        font-size: 23.526px;
        color: var(--eduact-white);
        padding-bottom: 11px;
        margin: 0 0 22px;
        overflow: hidden;
        position: relative
    }

        .main-footer__title::after {
            position: absolute;
            left: 0;
            bottom: 1px;
            content: '';
            width: 85px;
            height: 1px;
            background-color: var(--eduact-secondary)
        }

        .main-footer__title::before {
            position: absolute;
            left: -10px;
            bottom: -1px;
            content: '';
            width: 52px;
            height: 4px;
            background-color: var(--eduact-base);
            z-index: 2;
            -webkit-animation: 2s linear infinite movebounce2;
            animation: 2s linear infinite movebounce2
        }

    @media (min-width:1200px) {
        .main-menu .main-menu__list, .main-menu .main-menu__list ul, .stricky-header .main-menu__list, .stricky-header .main-menu__list ul {
            display: flex
        }

         .mobile-nav__toggler {
            display: none
        }

        .main-footer__widget01 {
            padding-left: 30px
        }
    }

    .main-footer__navmenu ul {
        margin: 0;
        padding: 0
    }

     .main-footer__info-list li {
        padding: 0 0 0 40px;
        font-size: 18px;
        line-height: 30px;
        display: block;
        list-style: none
    }

    .main-footer__navmenu ul li {
        list-style: none;
        display: block;
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 5px;
        color: var(--eduact-text2);
        text-transform: capitalize
    }

        .main-footer__navmenu ul li a {
            color: inherit;
            display: inline-block
        }

            .main-footer__navmenu ul li a:hover {
                color: var(--eduact-secondary);
                padding-left: 5px
            }

    .main-footer__info-list {
        margin: 27px 0 35px;
        padding: 0;
        list-style: none
    }

        .main-footer__info-list li {
            position: relative;
            color: var(--eduact-text2);
            margin: 0 0 16px
        }

            .main-footer__info-list li a {
                color: inherit
            }

                .main-footer__info-list li a:hover {
                    color: var(--eduact-secondary)
                }

            .main-footer__info-list li span {
                position: absolute;
                left: 0;
                top: 0;
                color: var(--eduact-secondary);
                font-size: 24px;
                line-height: inherit
            }

    .copyright__text a {
        color: inherit
    }

    .main-footer__newsletter .eduact-btn {
        position: absolute;
        right: 0;
        top: 0;
        height: 55px;
        padding: 0 22.3px;
        background-color: var(--eduact-secondary)
    }

    .main-footer__newsletter .eduact-btn__curve {
        opacity: 0
    }

    .copyright {
        position: relative;
        background-color: #1f1944;
        padding: 27px 0 28px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .copyright {
    background-color: #181717;
}

    .copyright__text {
        font-size: 13px;
        color: var(--eduact-text2);
        margin: 0
    }

        .copyright__text a:hover {
            color: var(--eduact-secondary)
        }

    @media (min-width:1400px) {

        .main-footer__about__text {
            padding-right: 40px
        }

        .container {
            padding-left: 18px;
            padding-right: 18px;
            max-width: 1356px
        }

        .row {
            --bs-gutter-x: 36px
        }

        .about-two__thumb {
            margin-right: 29px
        }

        .counter-one__left {
            margin-right: 67px
        }

        .main-footer__widget01 {
            padding-left: 42px
        }

        .main-footer__newsletter {
            margin-left: -15px;
            margin-right: 20px
        }
    }

    @media (min-width:1200px) and (max-width:1300px) {
        .main-menu .main-menu__list > li + li, .stricky-header .main-menu__list > li + li {
            margin-left: 38px
        }
    }

    @media (min-width:991px) and (max-width:1199px) {
        .counter-one__left__title {
            font-size: 36px
        }

        .counter-one__area {
            margin-right: 50px
        }

        .counter-one__shapes svg {
            width: 501px;
            height: auto;
            right: -20px
        }
    }

    @media (min-width:1200px) and (max-width:1399px) {
        .course-two__author img {
            display: none !important
        }

        .counter-one__area {
            margin-right: 50px
        }

        .counter-one__shapes svg {
            right: -50px
        }
    }

    .contact-info ul li.active .contact-info__icon span, .contact-info ul li:hover .contact-info__icon span {
        transform: rotateY(360deg)
    }

body.dark-mode-active .contact-info__icon span {
    color: #e0e0e0;
}

body.dark-mode-active .contact-info__text {
    color: #e0e0e0;
}

    @media (max-width:1199px) {

        .course-details__sidebar {
            margin-top: 60px
        }
    }

     .page-header__breadcrumb li, .page-header__title {
        color: var(--eduact-white)
    }

body.dark-mode-active .page-header__title {
    color: #e0e0e0 !important;
}

    @keyframes dash {
        0% {
            stroke-dashoffset: 1200;
            stroke-width: 5;
            stroke-dashoffset: 1200;
            stroke-width: 1;
            stroke-dashoffset: 1200;
            stroke: var(--eduact-secondary)
        }

        100% {
            stroke-dashoffset: 0;
            stroke-width: 10;
            stroke-dashoffset: 0;
            stroke-width: 1;
            stroke-dashoffset: 0;
            stroke: var(--eduact-secondary)
        }

        50% {
            stroke: var(--eduact-base)
        }
    }

    @keyframes dash4 {
        0% {
            stroke-dashoffset: 1200
        }

        100% {
            stroke-dashoffset: 0
        }
    }

    @keyframes zump-one {
        0% {
            transform: translateY(0)
        }

        100% {
            transform: translateY(-15px)
        }
    }

    .page-header {
        background-color: var(--eduact-black);
        position: relative
    }

    .page-header__bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .page-header__overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #2A254D;
    }

    body.dark-mode-active .page-header__overlay {
        background-color: #121212;
    }

    .page-header .container {
        position: relative;
        z-index: 2;
        padding: 6em 0px;
    }

    .page-header__title {
        margin: 50px 0 15px;
        font-size: 40px;
        line-height: 1;
    }

    .contact-info__icon, .page-header__breadcrumb li a:hover {
        color: var(--eduact-base)
    }

    .page-header__breadcrumb {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        list-style: none;
        margin: 0
    }

body.dark-mode-active .page-header__breadcrumb li a {
    color: #b0b0b0 !important;
}

.page-header__breadcrumb li {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    position: relative
}

    @media (max-width:480px) {
        .page-header__title {
            font-size: 24px
        }

        .page-header__breadcrumb li {
            font-size: 18px
        }
    }

    .page-header__breadcrumb li:not(:last-of-type)::after {
        position: absolute;
        right: -17px;
        bottom: 0;
        content: '/';
        font-size: inherit;
        line-height: 1;
        color: currentColor
    }

    .page-header__breadcrumb li:not(:last-of-type) {
        margin-right: 26px
    }

    .page-header__breadcrumb li a {
        color: inherit
    }

    .page-header__breadcrumb li span {
        display: block;
        line-height: 1
    }

    .contact-one {
        position: relative;
        padding: 116px 0 120px
    }

        .contact-one .container {
            max-width: 904px
        }

        .contact-one .section-title {
            margin-bottom: 51px
        }

    .contact-one__form-box {
        position: relative;
        display: block;
        padding: 0
    }

    .contact-one__input-box input[type=email], .contact-one__input-box input[type=text] {
        height: 60px;
        width: 100%;
        border: none;
        background-color: var(--eduact-soft5);
        padding-left: 30px;
        padding-right: 30px;
        outline: 0;
        font-size: 16px;
        color: var(--eduact-text);
        font-family: var(--eduact-font);
        display: block;
        font-weight: 600;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

body.dark-mode-active .contact-one__input-box input[type=email], 
body.dark-mode-active .contact-one__input-box input[type=text] {
    background-color: #1E1E1E;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

        .contact-one__input-box textarea {
            font-size: 16px;
            font-weight: 600;
            color: var(--eduact-text);
            height: 176px;
            width: 100%;
            background-color: var(--eduact-soft5);
            font-family: var(--eduact-font);
            padding: 20px 30px 30px;
            border: none;
            outline: 0;
            border-radius: 4px;
            margin-bottom: 0
        }

    .contact-one__input-box.text-message-box {
        height: 176px;
        margin-bottom: 40px
    }

body.dark-mode-active .contact-one__input-box textarea {
    background-color: #1E1E1E;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #383838;
}

    .contact-info {
        position: relative;
        padding: 0 0 120px
    }

        .contact-info ul {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: center;
            box-shadow: 0 0 60px 0 rgba(0,0,0,.07);
            background-color: var(--eduact-white);
            border-radius: 10px;
            overflow: hidden
        }

            .contact-info ul li {
                cursor:pointer;
                list-style: none;
                display: block;
                width: 33.35%;
                text-align: center;
                padding: 47px 20px 44px;
                position: relative;
                overflow: hidden;
                z-index: 2;
                transition: all 0.3s ease
            }

body.dark-mode-active .contact-info ul li:nth-child(1),
body.dark-mode-active .contact-info ul li:nth-child(3) {
    background-color: #303030;
}

body.dark-mode-active .contact-info__text a {
    color: #b0b0b0 !important;
}

@media (min-width:992px) and (max-width:1199px) {

        .contact-info ul li {
            height: 252px
        }
    }

    .contact-info ul li::after {
        -webkit-transition-duration: .6s;
        transition-duration: .6s;
        position: absolute;
        width: 100%;
        height: 200%;
        content: "";
        top: 110%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: -1;
        background-color: var(--eduact-base);
        border-radius: 10px;
    }

body.dark-mode-active .contact-info ul li::after {
            background-color: #1e1e1e;
    
}

.contact-info__icon {
    font-size: 45px;
    line-height: 45px;
    transition: .5s;
    margin-bottom: 24px
}

        .contact-info__icon span {
            display: block;
            -webkit-transition: .6s;
            -o-transition: .6s;
            transition: .6s
        }

    .contact-info__title {
        font-size: 20px;
        font-weight: 500;
        transition: .5s;
        margin-bottom: 9px
    }

    .contact-info__text {
        font-size: 24px;
        transition: .5s;
        margin-bottom: 0
    }

        .contact-info__text a {
            color: inherit
        }

            .contact-info__text a:hover {
                color: var(--eduact-secondary)
            }

    @media (max-width:991px) {
        .contact-info ul li {
            width: 100%
        }
    }

    @media (max-width:767px) {

         .contact-info ul {
            display: block
        }

        .main-footer {
            padding: 20px 0;
        }

         .main-footer__navmenu, .main-footer__newsletter {
            margin-top: 30px
        }
        .main-menu__logo img{
            width:55px !important;
        }
        .page-header .container {
            padding-top: 35px;
            padding-bottom: 65px;
        }

        

        .contact-one {
            padding: 76px 0 80px
        }

        .contact-info {
            padding-bottom: 80px
        }
    }

.sticky-header__content {
    transition: all 0.3s ease;
}


body.dark-mode-active .no-exam-card {
    background-color: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
}

body.dark-mode-active .no-exam-card h2 {
    color: #e0e0e0;
}