/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* =================== Font Family Kanita ===================== */
/* thai */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKZ-Go6G5tXcraBGwCYdA.woff2) format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* vietnamese */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKZ-Go6G5tXcraaGwCYdA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKZ-Go6G5tXcrabGwCYdA.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKZ-Go6G5tXcraVGwA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* thai */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5mOBWzVaF5NQ.woff2) format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* vietnamese */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5mOBWoVaF5NQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5mOBWpVaF5NQ.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5mOBWnVaE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* thai */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5KPxWzVaF5NQ.woff2) format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* vietnamese */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5KPxWoVaF5NQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5KPxWpVaF5NQ.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr5KPxWnVaE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* thai */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr4uPhWzVaF5NQ.woff2) format('woff2');
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* vietnamese */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr4uPhWoVaF5NQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr4uPhWpVaF5NQ.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kanit/v16/nKKU-Go6G5tXcr4uPhWnVaE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====================== Font Family Nunito Sans ====================== */
/* cyrillic-ext */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJDxzGOF.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJnxzGOF.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 4200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJLxzGOF.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJPxzGOF.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJ3xzA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================== */
* {
    box-sizing: border-box;
}
html, body {
    max-width: 100%;
    /*overflow-x: hidden;*/
}
section {
    overflow-x: hidden;
}
body {
    font-size: 16px;
    line-height: 22px;
    overflow-x: hidden;
    font-family: "Nunito Sans", sans-serif;
}

.text-yellow {
    color: #EFB51C;
}

.text-white-50 {
    color: #ffffffe0 !important;
}

.bg-blue {
    background-color: var(--theme-color--) !important;
}

.bg-gray {
    background-color: #F3F5F7;
}

.bg-yellow-gradient {
    background-image: linear-gradient(to right, #ED831E, #EFB11C) !important;
}

.bg-blue-gradient {
    background-image: linear-gradient(to bottom, #0961CF, #063B86);
}

.text-blue {
    color: var(--theme-color--);
}

.text-left {
    text-align: left !important;
}

h2 {
    font-size: 35px;
    line-height: 41px;
    font-weight: 700;
}
.rounded-3 {
    border-radius: 60px !important;
    overflow: hidden;
}
.border-30 {
    border-radius: 30px !important;
    overflow: hidden;
}
.border-20 {
    border-radius: 20px !important;
    overflow: hidden;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007bff' stroke='%23007bff' stroke-width='2'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007bff' stroke='%23007bff' stroke-width='2'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
}
@media (min-width: 992px) {
    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    /* wrap band karo */
    .navbar .navbar-nav {
        flex-wrap: nowrap;
    }

    .navbar .navbar-nav .nav-link {
        white-space: nowrap;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}
/* ===========Course Content============ */
.course-content h2.accordion-header{
    line-height: 25px;
}
/* ===========End Course Content============ */
/* ===========topbar============ */
.top-bar {
    background-color: rgba(13, 27, 65, 1); /* Dark background */
    position: sticky;
    top: 0;
    z-index: 9999; /* Ensures the bar stays above other content */
}
.top-bar .col-md-12{
    display: flex !important;
}
.top-bar .top-btn {
    height: 28px;
    line-height: 1px;
    border-radius: 2px;

}
.top-bar #clockdiv {
    font-size: 16px;
    line-height: 22px;
}

.top-bar #clockdiv div>span {
    padding: 2px 5px;
    border-radius: 3px;
}
.top-bar .grab-btn {
    position: relative;
    right: -3%;
}
/* ./ ===========topbar============ */
/* ===========MENU============ */
.menu{
    background: linear-gradient(180deg, #3157A7 -1.31%, #3157A7 110.09%);
    position: sticky;
    top: 48px;
    z-index: 9999; /* Ensures the bar stays above other content */
}
.navbar-nav {
    /*    position: absolute;
        left: 24%;*/
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}
.navbar-collapse.collapse.show{
    z-index: 999;
}
.login-btn {
    position: absolute;
    right: 7%;
}
.img-fluidlo {
    filter: brightness(0) invert(1);
    max-width: 70%;
    height: auto;

}

.navbar-nav .nav-link {
    color: white !important;

}
/* ./ ===========MENU============ */
/*  ===========BANNER============ */
.banner-img-fluid {
    width: 80%;
    //100%;
    border-radius: 15px;
    height: auto;
}
.banner .custom-form {
    width: 100%;
    padding: 20px;
    background-color: #0d1b41;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-bottom: 35px;
}
.banner form input, .banner form select{
    /*    margin-top: 39px;
        margin-left: 20px;*/
    border-radius: 33px;
    margin: 0 auto;
    margin-bottom: 16px;
    width: 427.000031px;
    height: 48px;
    opacity: 1;
    gap: 14px;
}
.banner .btn-primary {

    width: 427px;
    height: 49px;
    opacity: 1;
    gap: 8px;
    border-radius: 1000px;
    padding-top: 10px;
    padding-right: 29px;
    padding-bottom: 10px;
    padding-left: 29px;
    background-color: #3157a7;

}


.banner .btn-primary:hover {
    background-color: #ED831E;
    border-color: #f1b605;

}
/* ./ ===========BANNER============ */

/*  ===========GAME PLAN============ */
.gameplan h2{
    font-size: 29px;
    line-height: 38px;
}
.gameplan .gameplan-card-1 {
    position: absolute;
    font-family: Nunito Sans;
    bottom: 20px;
    font-size: 15px;
    line-height: 25px;
    width: 230px;
    height: 61px;
    opacity: 1;
    overflow: visible;
    opacity: 1;
    right: 0;
}

.gameplan .gameplan-card-1 .dot {
    position: absolute;
    left: -7px;
    top: 22px;
    background-color: #3766B1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 10;
}

.gameplan .gameplan-card-2 .dot {
    position: absolute;
    left: -6px;
    top: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3766B1;


}

.gameplan .gameplan-card-2 {
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 15px;
    line-height: 25px;
    width: 230px;
    height: 61px;
    opacity: 1;
    overflow: visible;
}
.gameplan .gameplan-card-2 .gm-text , .gameplan .gameplan-card-1 .gm-text {
    top: 6px;
    position: absolute;
}

.gameplan .join-button {
    display: flex;
    width: 200px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    border-radius: 1000px;
    background-color: #3157A7;
    color: white;
    text-decoration: none;
}

.gameplan .join-button:hover {
    background-color: #ED831E;
    /* Orange color on hover */
    border-color: #f1b605;
    /* Optional: To change border color as well */
}
.gameplan .join-button span{
    width: 100%;
    text-align: center;
}
.gameplan .left-txt{
    color: #EB8122;
}
.gameplan .right-txt{
    color: #FF0000;
}
.gameplan figure:after {
    content: '';
    z-index: -2;
    width: 77px;
    height: 60px;
    position: absolute;
    background-image: url(../images/dot.png);
    bottom: -28px;
    left: 110px;
}
.gameplan figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ./ ===========GAME PLAN============ */
/* ==================== stats ===================== */
.icon {
    background-color: #ffffff;
    gap: 30px;
    opacity: 1;

}

.stat-card {
    width: 100%;
    /*height: 246.16883850097656px;*/
    border-radius: 12px;
    background-color: #F7F9FC;
    border: 2px solid transparent;
    transition: all 0.3s ease;

}

.stat-card>b {
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 34.97px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: center;

}

.stat-card:hover {
    background-color: #ffffff;
    /* change to blue (or any color tu chaahe) */
    border-color: #EB8122;
    /* border color on hover */
    /* optional: text color white on hover */
    cursor: pointer;
    /* cursor pointer for better UX */
}

.icon .icon-box img {
    width: 60px;
    /*height: 60px;*/
    line-height: 57px;
}

.icon b {
    font-size: 30px;
    line-height: 43px;
}

.icon span {
    font-size: 20px;
    color: #19191969;
    line-height: 26px;
}

.heading {
    width: 1400px;
    height: 60px;
    margin-bottom: 18px;
}

.heading h1 {
    margin: 20px;
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 48px;
    line-height: 125%;
    letter-spacing: 0px;
    text-align: center;

}
/* ./ ==================== stats ===================== */
/* ==================== why-us ===================== */
.why-us {
    display: block;
    margin: 0px auto;
    max-width: 100%; /*1250px;*/
    /*border-radius: 30px;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ADC3E51A;

}

.why-us figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stu-love {
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: normal;
    font-size: 48px;
    line-height: 125%;
    letter-spacing: 0px;
    text-align: center;

}

.why-img-fluid {
    border-radius: 15px;


}
/* ./ ==================== why-us ===================== */
/* ==================== testimonial ===================== */

/* .slider {
  position: relative;
} */
/*.slider {
    gap: 1rem;
    height: 700px;
    overflow: hidden;
}
.slider .slide, .slider .slide-2{
    animation: scrollUp 50s linear infinite;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
}
.slider .slide-2{
    animation-duration: 20s;  Faster animation for .slide-2
}
.slider .slide:hover, .slider .slide-2:hover {
    animation-play-state: paused;
}
.slider .bg-gradient-white{
    background-image: linear-gradient(#fff 20%, transparent 60%, #fff 20%);
}
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(-100%);
    }
}
.slider .slide img,
.slider .slide-2 img {
    width: 100%;
    height: auto;
}*/
.testimonial {
    background-color: #fff; /*#f8f9fa;*/
}

.text-orange {
    color: #fd7e14 !important;
}

.slider-container {
    display: flex;
    gap: 1rem;
    height: 500px; /* Reduced height for mobile */
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider-column {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0; /* Important for flexbox on mobile */
}

.slider-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    width: 100%;
    will-change: transform; /* Performance optimization */
}

.slider-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0) 15%,
        rgba(255,255,255,0) 85%,
        rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 2;
}

.slider-column img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
/* ./ ==================== testimonials ===================== */
/* ===================== community ===================== */
.community {
    display: block;
    margin: 0px auto;
    max-width: 100%; /*1250px;*/
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ADC3E51A;
}
.community .owl-carousel {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/com-bg.png);
}
.community .join-button {
    display: flex;
    width: 300px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    border-radius: 1000px;
    background-color: #3157A7;
    color: white;
    text-decoration: none;
}
.community .join-button:hover {
    background-color: #ED831E;
    /* Orange color on hover */
    border-color: #f1b605;
    /* Optional: To change border color as well */
}
.community .join-button span{
    width: 100%;
    text-align: center;
}
/* ./ ===================== community ===================== */
/* ===================== Game Changer ====================== */
.game-changer .col-4 a {
    width: 260px;
    height: 50px;
    color: #0d1538;
    font-size: 24px;
    line-height: 35px;
}

.game-changer .other-box-2 .join-button {
    display: flex;
    width: 300px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    border-radius: 1000px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    margin: 0 auto;
}
.game-changer .other-box .join-button {
    display: flex;
    width: 300px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    border-radius: 1000px;
    background-color: #3157A7;
    color: white;
    text-decoration: none;
    margin: 0 auto;
}
.game-changer .other-box .join-button:hover,.game-changer .other-box-2 .join-button:hover {
    background-color: #ED831E;
    /* Orange color on hover */
    border-color: #f1b605;
    /* Optional: To change border color as well */
}
.game-changer .other-box .join-button span,.game-changer .other-box-2 .join-button span{
    width: 100%;
    text-align: center;
}

.game-changer .top-btn {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.game-changer .top-btn a {
    color: #b2b3b3;
    background-color: #e4e5e5;
    transform: translateY(-25px);
}
/* ./ ===================== Game Changer ====================== */
/* ===================== BLOGS ====================== */
.blogs img{
    width: 100%;
}
.blogs .box{
    background-color: #ADC3E51A;
    padding: 30px;
}
section.blogs, section.banner {
    overflow: hidden !important;
}
/* ./ ===================== BLOGS ====================== */
/*  ===================== Top Course ====================== */
.top-courses .box {
    display: block;
    margin: 0px auto;
    max-width: 1250px;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ADC3E51A;
    padding: 15px;
}
.top-courses img{
    width: 100%;
}
.top-courses .join-button {
    font-size: 16px;
    border-radius: 1000px;
    background-color: #3157A7;
    color: white;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    z-index: 10;
}
.top-courses .join-yello-button {
    font-size: 16px;
    border-radius: 1000px;
    background-color: #EB7B23;
    color: white;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 10px;
}

/* ./ ===================== Top Course ====================== */
/* ===================== Products ====================== */
.products{
    background-color: #ADC3E51A;
    /*height: -webkit-fill-available;*/
}
.products img{
    width: 100%;
}
.products .box{
    background-color: #fff;
    padding: 15px;
}
.products .join-button {
    font-size: 16px;
    border-radius: 1000px;
    background-color: #3157A7;
    color: white;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
}
.products .join-yello-button {
    font-size: 16px;
    border-radius: 1000px;
    background-color: #EB7B23;
    color: white;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 10px;
}
/* ./ ===================== Products ====================== */
/* ===================== AREAS ====================== */
.areas .box{

    /*padding: 20px;*/
}
.areas a{
    padding: 15px;
    border-radius: 30px;
    background-color: #ADC3E51A;
    color: #000;
    text-decoration: none;
}
.areas a:hover {
    background-color: #ED831E;
    border-color: #f1b605;
    color: #fff;
}
.areas a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    z-index: -1;
    transition: all 1s;
    border-bottom: 3px solid #06c;
}

/* ./ ===================== AREAS ====================== */
/* ./ ===================== Feature Courses ====================== */
.course-offered {
	background : #f8f9fa;
}
.course-offered .segmented-tabs {
    display: inline-flex;
    /*background: #f1f5f9;*/
    border-radius: 999px;
    padding: 6px;
    gap: 2rem;
}
.course-offered .segmented-tabs .nav-link {
    border-radius: 20px;
    padding: .5rem 3.25rem;
    background: #EAEAEA;
    color: #205075;
}
.course-offered .segmented-tabs .nav-link.active,  .course-offered .segmented-tabs .nav-link:hover{
    background: #ffb703;      /* pick your brand color */
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Course cards */
.course-offered .course-card {
    background: #fff; /*#f8fafc;*/
    border-radius: 18px;
    padding: 22px 16px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    border: 2px solid transparent;
    height: 100%;
}
.course-offered .course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    border-color: #ffb703;
    background: #fff;
}
.course-offered .course-card img{
    width: 100%;
}
.course-offered .course-logo {
    height: 90px;             /* tune per logo */
    object-fit: contain;
    margin-bottom: .75rem;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.course-offered .course-title {
    font-weight: 700;
    margin-bottom: .25rem;
    color: #000;
}
.course-offered .course-sub {
    font-size: .9rem;
    color: #64748b;
    margin: 0;
}
.course-offered a .course-card {
    color: inherit; /* keeps text color normal */
}
.course-offered a:hover .course-card {
    text-decoration: none;
}
/* ./ ===================== Feature Courses ====================== */



































/* ===========topbar============ */

.bg-custom {
    background-color: #2a4a92;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;

}

.dropdown-submenu>.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dropdown-submenu>.dropdown-toggle::after {
    transform: rotate(-90deg);
    margin-left: .5rem;
}

:root {
    --theme-color--: #0164DD;
}

body {
    font-size: 16px;
    line-height: 22px;
    overflow-x: hidden;
    font-family: "Nunito Sans", sans-serif;
}

.banner p {
    font-family: Nunito Sans;
    font-weight: 400;

    font-size: 20px;
    line-height: 125%;


}

.text-yellow {
    color: #EFB51C;
}

.text-red {
    color: #e94444;
}

.bg-blue {
    background-color: var(--theme-color--) !important;
}

.bg-gray {
    background-color: #F3F5F7;
}

.bg-yellow-gradient {
    background-image: linear-gradient(to right, #ED831E, #EFB11C) !important;
}

.bg-blue-gradient {
    background-image: linear-gradient(to bottom, #0961CF, #063B86);
}

.text-blue {
    color: var(--theme-color--);
}

h2 {
    font-size: 35px;
    line-height: 41px;
    font-weight: 700;
}

header .logo {
    width: 2000px;
}

header .nav-item .nav-link:after {
    position: absolute;
    content: "";
    width: 0%;
    height: 100%;
    transition: all 1s;
}

header .nav-item .nav-link:after {
    left: 6px;
    bottom: 4px;
    height: 3px;
    background-image: linear-gradient(to right, #ED831E, #EFB11C);
}

header .nav-item .nav-link:hover:after {
    width: 60%;
}

.time {
    /* background: #fff;  */
    padding: 5px;
    margin: 0 10px;
    text-transform: uppercase;
}





/* Add this custom CSS if you want full control over the rounded button */


/* This will ensure a properly rounded button */





/*
}

/* ======================= banner  ====================== */
h1 {
    font-size: 42px;
    line-height: 48px;
    font-weight: 400px;
    font-family: "Kanit", sans-serif;
    /* text-shadow: 0 4px 4px rgba(0,0,0,0.25); */
}

/* h2 {
  font-size: 24px;
  line-height: 30px;
  font-family: "Nunito Sans", sans-serif;
} */

.banner {

    max-width: 100%;
    max-height: 100%;

    position: relative;
    background: linear-gradient(180deg, #3157A7 -1.31%, #0A1336 110.09%);


}


.custom-image,
.custom-form {
    background-color: white;
    height: auto;
    //300px;
}

.custom-image {
    width: 40%;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 110px;
}



/*.form-control {
    margin-top: 39px;
    margin-left: 20px;
    border-radius: 33px;
    margin-bottom: 20px;
    width: 427.000031px;
    height: 48px;
    opacity: 1;
    gap: 14px;
}*/


.text-orange {
    color: #EB8122;

}
.bg-orange {
    background-color: #EB8122;

}

.mt-3 small {
    color:
        #aab1c3;

}

.mt-2 a {
    text-decoration: none;
}





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


/* ==================== footer  ===================== */
.footer {
    background-color: #2a4a92;
    background: linear-gradient(180deg, #3157A7 -1.31%, #0A1336 110.09%);
}

/*.footer-form {
    width: 40%;
    padding: 65px;
    position: relative;
    right: 21px;
    height: 95%;
}*/
.footer-links h6{
    font-size: 18px;
    line-height: 22px;
}
/*.custom-links-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    position: relative;
    bottom: 280px;
    left: 280px;
    padding: 27px 0;

}

.custom-links-section h6 {

     Header text color
    font-size: 18px;
     Font size for headings
}

.custom-links-section a {
    color: white;
     Links color
    text-decoration: none;
     Remove underline
}

.custom-links-section a:hover {
    color: #f1b605;
     Hover effect
    text-decoration: underline;
     Optional: add underline on hover
}

.custom-links-section .row .col-md-2 {
    width: 180;
    height: 283;
    angle: 0 deg;
    opacity: 1;
    border-right-width: 1px;
}*/




.row-main {
    background-color: black;
    height: 20%;
}

.footer-container {
    max-height: 100%;
}

.img-footer {
    filter: brightness(0) invert(1);
    max-width: 57%;
    height: auto;
    /*margin-left: 40px;*/


}

.copy-right {
    background: #EB8122;
}

.list-unstyled {
    text-decoration: none;
    width: 124;
    height: 218;
    angle: 0 deg;
    opacity: 1;
    top: 46px;

}
.list-unstyled li a{
    text-decoration: none;
}

.footer-form-control {
    margin-top: 39px;
    border-radius: 33px;
    padding: .375rem .75rem;
    margin-bottom: 20px;
    width: 427.000031px;
    height: 48px;
    opacity: 1;
    gap: 14px;
}

.footer-btn-primary {
    width: 427px;
    height: 49px;
    angle: 0 deg;
    opacity: 1;
    gap: 8px;
    border-radius: 1000px;
    padding-top: 10px;
    padding-right: 29px;
    padding-bottom: 10px;
    padding-left: 29px;
    background-color: #3157a7;

}

.footer-btn-primary:hover {
    background-color: #ED831E;
    /* Orange color on hover */
    border-color: #f1b605;
    /* Optional: To change border color as well */
}

/* ==================== game_play  ===================== */

.gameplay {
    width: 1920px;
    height: 680px;
    top: 839px;
    background-color: #f7f9fd;
    /* background-color: #ADC3E5; */
}

.join-container,
.img-container {
    transform: scale(0.9);

    /* This will reduce the size by 10% */
}


.gm-container {
    width: 1550.6300048828125;
    height: 445.79998779296875;
    opacity: 1;

}

.join-container {
    width: 698;
    MARGIN-TOP: 140px;
    height: 396;
    opacity: 1;
    gap: 30px;
    position: relative;
    left: 73px;

}

.img-container {
    width: 730px;
    height: 445.79998779296875;
    opacity: 1;
    MARGIN-TOP: 140px;
    margin-left: 37px;

}

.gm-img-fluid {
    width: 773;
    height: 426;
    border-radius: 40px;
    opacity: 1;
    left: 23px;
    margin: -26px;
    margin-left: 20px;

}



.join-container h1 {
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 48px;
    line-height: 125%;
    letter-spacing: 0px;

}

.join-container h2 {
    font-family: Nunito Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 22px;
    line-height: 160%;
    letter-spacing: 0px;

}

.join-container P {
    font-family: Nunito Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 23px;
    margin-top: 20px;
    line-height: 160%;
    letter-spacing: 0px;
    color: #EB8122;


}

.figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}





.play-img-fluid {
    position: absolute;
    bottom: 178px;
    left: 367px;
}



/* ==================== course_content ===================== */
.content {
    width: 1520px;
    height: 583px;
    gap: 41px;
    opacity: 1;
}





.real-testimonial {
    height: 1300px;

}

.fade-vert {
    /* adjust the middle 60% fully visible, edges fade */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, 0) 100%);
}

.real-testimonial h2 {
    /* styles */
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 48px;
    line-height: 125%;
    letter-spacing: 0px;
    text-align: center;


}

.real-testimonial h3 {
    font-family: Nunito Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 26px;
    line-height: 160%;
    letter-spacing: 0px;
    text-align: center;



}

/* ====================community=====================.container .owl-carousel {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/com-bg.png");
} */

/* ==================== old css ===================== */
/* ================= video ================== */
/* .video h2 {
  font-size: 35px;
  line-height: 42px;
} */

.video figcaption {
    top: 15px;
    left: 15px
}

/* ===================== Accordion  ====================== */
.timeline-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.timeline-section {
    text-align: center;
    padding: 40px 20px;
}

.timeline-section h1 {
    font-size: 28px;
    margin-bottom: 40px;
    color: #000;
}

.timeline-container {
    background: linear-gradient(90deg, #0c4ca3, #2d79d4);
    padding: 30px 20px;
    border-radius: 16px;
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
}

.timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.step {
    position: relative;
    text-align: center;
    flex: 1;
}

.step::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    height: 3px;
    width: 100%;
    z-index: 0;
    background-color: white;
}

.step:first-child::after {
    left: 50%;
    width: 100%;
}

.step:nth-child(1)::after,
.step:nth-child(2)::after,
.step:nth-child(3)::after {
    background-color: #f7b500;
}

.step:last-child::after {
    display: none;
}

.circle {
    position: relative;
    z-index: 1;
    width: 35px;
    height: 35px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background-color: white;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 4px solid white; */
}

.step.active .circle {
    background-color: #f7b500;
    /* border: 4px solid #3557a4; */
}

.title {
    font-size: 14px;
    color: white;
    line-height: 18px;
    margin-bottom: 0;
}



/* ================== success =================== */
.success {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.other-box {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.success figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success .other-box p,
.success .other-box-2 p,
.publish .other-box p,
.publish .other-box-2 p {
    font-size: 18px;
    line-height: 24px;
}

/* ======================= publish  ======================= */
.publish .view-btn {
    width: 190px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    transform: translateY(-20px);
}
.publish .card-image-desktop {
    display: block;
}
.publish .card-btn-desktop {
    display: inline-block;
}
.publish .card-image-mobile,.card-btn-mobile {
    display: none;
}

/* ===================== Review ===================== */
.owl-carousel .owl-item img {
    width: revert-layer;
}

.review {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.owl-carousel {
    display: block;
}

.owl-dots {
    display: none;
}

.review .owl-carousel .testimonial {
    width: 370px;
    min-height: 160px;        /* set height */
    height: 160px;
}

.review .owl-carousel .testimonial p {
    font-size: 12px;
    line-height: 16px;
}

.review .owl-carousel .owl-nav, .trusted .owl-carousel .owl-nav, .endorsed .owl-carousel .owl-nav{
    display: none;
}

.review .carousel-circle {
    width: 40px;
    height: 40px;
    background-color: #e6effb;
}

.review .owl-carousel .testimonial .right-box h3 {
    font-size: 14px;
    line-height: 16px;
}

#video-carousel .owl-item {
    width: 390px !important;
}

#video-carousel .item-video iframe {
    border-radius: 15px;
}

.review .item-video .video-box {
    width: 365px;
    height: 180px;
}

.review .item-video .video-box figcaption {
    top: 50%;
    left: 40%;
    transform: translate(45%, -50%);
}

/* ================== guarantee ====================== */
.guarantee .other-box p,
.guarantee .other-box-2 p {
    font-size: 18px;
    line-height: 24px;
}

.guarantee .list-inline .high-text {
    font-size: 55px;
    line-height: 55px;
    font-weight: 800;
}

.guarantee .list-inline .sub-text {
    font-size: 30px;
    line-height: 36px;
}

.guarantee .money-text {
    font-size: 23px;
}

.guarantee .money-text-2 {
    font-size: 25px;
    font-weight: 800;
}

.guarantee .guarantee-text {
    font-size: 32px;
    font-weight: 800;
}

.guarantee .adm-text {
    font-size: 38px;
    line-height: 44px;
}

.guarantee aside {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/g-img.png);
}

/* ====================== trusted ==================== */
.trusted {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/banner.png);
}

.trusted .other-box p,
.trusted .other-box-2 p {
    font-size: 18px;
    line-height: 24px;
}

.trusted .item-video .video-box {
    width: 365px;
    height: 180px;
}

.trusted .item-video .video-box figcaption {
    top: 50%;
    left: 40%;
    transform: translate(45%, -50%);
}

#video-carousel-2 .owl-item, #video-carousel-3 .owl-item {
    width: 390px !important;
}

/* ==================== endorsed  ==================== */
.endorsed .endor-img {
    filter: drop-shadow(6px 8px 5px #ccc);
}
.endorsed .item-video .video-box {
    width: 365px;
    height: 180px;
}

.endorsed .item-video .video-box figcaption {
    top: 50%;
    left: 40%;
    transform: translate(45%, -50%);
}

/* ==================== conclusion  =================== */
.conclusion {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/conclusion-bg.png);
}

.conclusion h2 {
    font-size: 50px;
    line-height: 56px;
}

.conclusion p {
    font-size: 22px;
    line-height: 28px;
}

/* ================== founder ================== */
.founder figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.founder .founder-box {
    height: 200px;
    width: 100%;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    /*background-image: url(../images/founder-bg.png);*/
}

.founder .founder-box h3 {
    font-size: 24px;
    line-height: 30px;
}

.founder .founder-box a {
    width: 240px;
    font-size: 22px;
}

/* ================== teaching =================== */
.teaching {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/teaching-bg.png);
}

.teaching .card-body {
    /*transform: translate(14px, 15px);
    position: absolute;
    bottom: 0;
    width: 90%;*/
}
.teaching .card img {
    background-image: linear-gradient(to top, #e8e8e8, #fff);
    width: 100%;
}



/* ==================== switching ==================== */
.switching h2 picture {
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

/* .switching h2{
  font-size: 35px;
  line-height: 41px;
} */
.switching ul {
    /* background-size: contain; */
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(../images/switching-bg.png);
}



.switching table {
    border: 1px solid #000;
}

.switching table thead th {
    width: 30%;
    font-size: 24px;
    line-height: 30px;
}

.switching table {
    font-size: 20px;
    line-height: 30px;
}

.switching table .bg-secondary-subtle {
    background-color: #F2F2F2 !important;
}

.switching table td .travel-text {
    font-size: 12px;
    line-height: 12px;
}

.switching figcaption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.switching a {
    font-size: 30px;
    line-height: 36px;
}

/* ================= problem  =================== */
.problem .border-img {
    margin-top: -12px;
}

.problem .problem-box {
    padding: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/accord-bg.png);
    display: flex !important;
    align-items: center !important; /* Vertically aligns text and image */
    gap: 20px !important; /* Adds space between the text and the image */
}

.problem .problem-box div {
    flex: 1;
}
.problem .problem-box picture {
    flex: 0 0 auto; /* Ensures the image container doesn't grow or shrink */
    max-width: 100%; /* Make the image responsive */
}
.problem .problem-box h3 {
    font-size: 24px;
    line-height: 30px;
}

.problem .problem-box p {
    font-size: 18px;
    line-height: 24px;
}

.problem .problem-box img {
    width: 215px;
    height: auto;
}

.problem .count {
    width: 50px;
    height: 50px;
    font-size: 26px;
    line-height: 50px;
    border-radius: 10px;
}

.problem .count-text {
    width: 100%;
    border-radius: 10px;
    padding-left: 10px;
}

.problem .count-text span {
    font-size: 18px;
    line-height: 50px;
}
.problem .count-text .count{
    border: 1px solid #EB8122;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
}
.problem .count-text .text{
    padding-left: 15px;
}


.problem .m-img {
    width: 850px;
    margin: 25px auto 15px auto;
}

/* ================== join ================= */
.join .count {
    width: 25px;
    height: 25px;
    font-size: 13px;
    line-height: 25px;
}
.join .circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: blue;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
}

.join .join-box {
    background-image: linear-gradient(to top, #e8e8e82b 20%, #fff 80%);
}

.join .join-bullet{
    display: -webkit-inline-box;
}
.join .join-bullet p {
    font-size: 20px;
    line-height: 26px;
}







/* ==================== perfect =================== */
.perfect img{
    width: 80px;
}
.perfect .box{
    background-color: #ADC3E51A;
    padding: 15px;
}
/*.perfect .box picture {
     width: 270px;
    padding: 30px;
     height: 165px;
     line-height: 115px;
    background-color: #f3f7fd;
}

.perfect .box p {
    font-size: 20px;
    line-height: 26px;
}*/

/* ==================== works ==================== */
/* .works h2:after{
  content: '';
  bottom:0;
  left: 50%;
  height: 5px;
  width: 260px;
  position: absolute;
  transform: translateX(-50%);
  background-image: linear-gradient(transparent,#EFB51C,transparent );
} */
.works .work-card {
    padding: 35px 0 0 35px;
}

.works .work-circle {
    width: 55px;
    height: 55px;
    padding: 5px;
    left: -28px;
    top: -30px;
}

.works .work-circle .count {
    width: 45px;
    height: 45px;
    line-height: 45px;
}

.works .work-circle .count {
    font-size: 22px;
}

.works .work-border {
    height: 6px;
    width: 130px;
}

/* =================== Frequently ==================== */
.frequently{
    overflow: hidden !important;
}
.frequently .accordion>.card:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.frequently .card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}
.frequently .card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.frequently .card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.frequently .accordion-body {
    border: none !important;
}
.frequently .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.frequently .btn {
    white-space: normal;
    text-decoration: none;
    border: none;
    font-weight: bold;
    font-size: 16px !important;
}
.frequently .accordion .card .card-header .btn-link.collapsed::after {
    /*content: "\f107";*/
}
.frequently .accordion .card .card-header .btn-link::after {
    /*content: "\f106";*/
    right: 10px;
    position: absolute;
    font-family: "FontAwesome";
    color: #007bff;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}
.frequently .accordion-button:not(.collapsed){
    background: none !important;
    box-shadow: none;
}
.frequently .accordion-button:focus{
    box-shadow: none;
}
/* .portfolio-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
} */

.portfolio-menu {
    width: 345px;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
}

.portfolio-menu ul li {
    gap: 40px;
    font-size: 18px;
    line-height: 24px;
}

/* .accordion-item:first-of-type>.accordion-header .accordion-button{
  border-radius: 0.375rem 0.375rem 0 0 !important;
} */
.btn-outline-dark2:not(:disabled):not(.disabled):active::after {
    content: '';
    left: 0;
    bottom: -1px;
    width: 20%;
    height: 2px;
    position: absolute;
    background-color: #007bff;
}

.frequently .accordion-header,
.frequently .accordion-body {
    /*border: 1px solid var(--theme-color--);*/
    border: 0px solid var(--theme-color--);
}

.frequently .accordion-button::after {
    background-image: url(../images/plus.svg);
}

.frequently .accordion-button:not(.collapsed)::after {
    background-image: url(../images/minus.svg);
}
@media (max-width: 767px) {
    h1,h2{
        font-size: 18px;
        line-height: 24px;
    }
    h3,h4{
        font-size: 16px;
        line-height: 22px;
    }
    /* ============== TOPBAR ============*/
    .top-bar .col-md-12{
        display: block !important;
    }
    .top-bar p, .top-bar #clockdiv{
        font-size: 14px;
        line-height: 20px;
    }
    .top-bar #clockdiv{
        margin-top: 7px;
    }
    .top-bar .top-btn{
        font-size: 14px;
        float: right;
    }
    /* ============== MENU ============*/
    .nav-logo.logo{
        text-align: left;
        width: 75%;
    }
    .img-fluidlo{
        width: 60%;
    }
    .menu{
        top:68px;
    }
    .menu .login-btn{
        display:none;
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    /* ============== BANNER ============*/
    .banner{
        max-height: none;
        top: -3px;
    }
    .banner p{
        font-size: 14px;
        line-height: 20px;
    }
    .banner .custom-form{
        margin-top: 20px;
    }
    .banner form input, .banner .btn-primary{
        width: 100%;
    }
    .banner .form-img {
        margin-top: 0px !important;
    }
    .banner .form-img .img {
        order: 3;
    }
    .banner .form-img .form {
        order: 1;
        margin-bottom: 20px;
    }
    .banner .form-img .img img{
        width: 100%;
    }
    /* ============== GAME PLAN ============*/
    .gameplan small, .gameplan p span{
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
    }
    .gameplan .join-button{
        margin-top: 30px !important;
        width: 100%;
    }
    .gameplan .gameplan-card-1, .gameplan .gameplan-card-2, .gameplan figure:after{
        display: none;
    }
    .gameplan figure img.d-block{
        width: 100%;
    }
    /* ========= WHY ============ */
    .why-img-fluid{
        width: 100%;
        height: auto;
    }
    /*===== Courses Offered========*/
    .course-offered .segmented-tabs{
        gap: 1rem;
    }
    .course-offered .segmented-tabs .nav-link {
        width: 20px;
        border-radius: 20px;
        padding: 0.5rem 3.25rem;
        background: #EAEAEA;
        color: #205075;
        text-align: center;
        font-weight: 500;
        min-width: 150px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .course-offered .segmented-tabs .nav-link.active{
        text-align: center;
        font-weight: 500;
        min-width: 150px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*============ GAME CHANGER ============*/
    .game-changer .other-box-2{
        margin-top: 20px;
    }
    .game-changer .other-box .join-button, .game-changer .other-box-2 .join-button{
        width: 100%;
    }
    .game-changer .other-box i.fa-ban{
        font-size: 2em;
    }
    .game-changer .other-box-2 img{
        width:45px;
    }

    /*====== SUCCESS =========*/
    .success .other-box-2{
        margin-top: 20px;
    }
    .success .other-box i.fa-ban{
        font-size: 2em;
    }
    .success .other-box-2 img{
        width:45px;
    }
    .success .other-box p, .success .other-box-2 p, .publish .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }
    /*============ pulish =========*/
    .publish .other-box-2{
        margin-top: 20px;
    }
    .publish .other-box i.fa-ban{
        font-size: 2em;
    }
    .publish .other-box-2 img{
        width:45px;
    }
    .publish .other-box p, .success .other-box-2 p, .publish .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }
    .publish .card-image-desktop,.card-btn-desktop {
        display: none;
    }
    .publish .card-image-mobile {
        display: block;
    }
    .publish .card-btn-mobile{
        display: inline-block;
    }
    /*============= review =============*/
    .review .other-box-2{
        margin-top: 20px;
    }
    .review .other-box i.fa-ban{
        font-size: 2em;
    }
    .review .other-box-2 img{
        width:45px;
    }
    .review .other-box p, .success .other-box-2 p, .review .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }

    /*============= guarantee ============*/
    .guarantee .other-box-2{
        margin-top: 20px;
    }
    .guarantee .other-box i.fa-ban{
        font-size: 2em;
    }
    .guarantee .other-box-2 img{
        width:45px;
    }
    .guarantee .other-box p, .success .other-box-2 p, .guarantee .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }
    /*=========== trusted ===========*/
    .trusted .other-box-2{
        margin-top: 20px;
    }
    .trusted .other-box i.fa-ban{
        font-size: 2em;
    }
    .trusted .other-box-2 img{
        width:45px;
    }
    .trusted .other-box p, .success .other-box-2 p, .trusted .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }
    /*========= endorsed =======*/
    .endorsed .other-box-2{
        margin-top: 20px;
    }
    .endorsed .other-box i.fa-ban{
        font-size: 2em;
    }
    .endorsed .other-box-2 img{
        width:45px;
    }
    .endorsed .other-box p, .success .other-box-2 p, .endorsed .other-box p, .publish .other-box-2 p {
        font-size: 14px;
        line-height: 20px;
    }
    /*========= Founder ===========*/
    .founder .founder-box{
        margin-top:20px;
    }
    /*======= Switching =======*/
    .switching table thead th{
        font-size: 16px;
        line-height: 22px;
    }
    .switching table{
        font-size: 14px;
        line-height: 20px;
    }
    .switching .table-container{
        overflow-x: auto;
    }
    /*======= Problem =========*/
    .problem .problem-box p{
        font-size: 14px;
        line-height: 20px;
    }
    /*===== Join =========*/
    .join .join-bullet p{
        font-size: 14px;
        line-height: 20px;
    }
    /*===== Footer =======*/
    .footer-links{
        margin-top: 30px;
        text-align: center;
    }
    .footer .footer-form-control, .footer .footer-btn-primary{
        width: 100%;
    }
    .copy-right .d-flex{
        display: block !important;
    }
    .copy-right .d-flex .copy-right-text, .copy-right .d-flex .links {
        width: 100%;
        display: block;
        text-align: center;
    }
    /* =========== Top Courses ============*/
    .top-courses .btns{
        text-align: center !important;
    }
    .top-courses .join-button{
        padding-left: 15px;
        padding-right: 15px;
    }
    .top-courses .join-yello-button{
        padding-left: 20px;
        padding-right: 20px;
    }
    /*Testimonials*/
    .slider-container {
        flex-direction: column; /* Stack columns on mobile */
        height: 800px; /* Increased height for stacked layout */
        gap: 0.5rem;
    }

    .slider-column {
        flex: none;
        height: 50%; /* Each column takes half height on mobile */
    }

    .slider-content {
        gap: 0.5rem; /* Smaller gap on mobile */
    }

    .slider-column img {
        border-radius: 6px;
    }
    /* ========== You May Seen ===========*/.
    .video iframe{
        width: 100%;
        height: auto;
    }
}
@media (max-width: 420px) {
    .menu{
        top:88px;
    }
    /*Testimonials*/
    .slider-container {
        height: 700px;
    }

    .slider-column {
        height: 45%;
    }
}