/* ==================================== */


/* 
    PROJECT NAME : CABAL MOBILE OFFICIAL 
    VERSION : 1
    DESCRIPTION : "" 
    AUTOR : BB
*/


/* ==================================== */

@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');

	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet">
 

/* * {
    font-family: 'Kanit', sans-serif;
} */

* {
    font-family: 'Mitr', sans-serif;
}

html,
body {
    height: 100%;

    position: relative;
}
pre {tab-size: 3; }
.main-container {
    flex: 1 0 auto;
	word-wrap: break-word;
}



#sticky-footer {
    flex-shrink: none;
}


.feature-carousel-img .feature-caption {
    /* height: 144px; */
    padding: 20px 30px 20px 30px;
    position: relative;
    /* bottom: -77px; */
    margin-top: -77px;
    /* display: none; */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(239, 239, 239, 0.1);
    z-index: 2;
    left: 0;
    right: 0;
}



/* Class & Jobs */

.class-section-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.class-title {
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    z-index: 2;
}

.class-swipper-body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.class-swipper-color-1 {
    background-color: rgb(43, 43, 43);
}

.class-swipper-color-2 {
    background-color: rgb(24, 24, 24);
}

.class-swipper-color-3 {
    background-color: rgb(12, 12, 12);
}

.swiper-container {
    width: 100%;
    height: 100%;
    background: transparent;
}

.swiper-slide {
    font-size: 18px;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* padding: 40px 60px; */
}

.class-thumbs {
    top: 75px;
    height: 90px;
}

.class-thumbs span {
    width: 90px;
    height: 90px;
    background-color: transparent;
    /* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); */
}

.class-thumbs .swiper-pagination-bullet {
    opacity: 1;
    background-size: contain;
}

.class-thumbs span:hover {
    filter: drop-shadow(0px 0px 6px rgb(243, 217, 145));
}

.class-thumbs span.swiper-pagination-bullet-active {
    background-color: transparent;
    filter: drop-shadow(0px 0px 6px rgb(243, 217, 145));
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(1) {
    background-image: url(../images/a-class-1.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(1),
.class-thumbs span:hover:nth-of-type(1) {
    background-image: url(../images/a-class-1.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(2) {
    background-image: url(../images/a-class-2.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(2),
.class-thumbs span:hover:nth-of-type(2) {
    background-image: url(../images/a-class-2.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(3) {
    background-image: url(../images/a-class-3.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(3),
.class-thumbs span:hover:nth-of-type(3) {
    background-image: url(../images/a-class-3.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(4) {
    background-image: url(../images/a-class-4.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(4),
.class-thumbs span:hover:nth-of-type(4) {
    background-image: url(../images/a-class-4.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(5) {
    background-image: url(../images/a-class-5.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(5),
.class-thumbs span:hover:nth-of-type(5) {
    background-image: url(../images/a-class-5.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(6) {
    background-image: url(../images/a-class-6.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(6),
.class-thumbs span:hover:nth-of-type(6) {
    background-image: url(../images/a-class-6.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(7) {
    background-image: url(../images/class-7.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(7),
.class-thumbs span:hover:nth-of-type(7) {
    background-image: url(../images/class-7-active.png);
    background-color: transparent;
}

.class-thumbs span.swiper-pagination-bullet:nth-of-type(8) {
    background-image: url(../images/class-8.png);
    background-repeat: no-repeat;
}

.class-thumbs span.swiper-pagination-bullet-active:nth-of-type(8),
.class-thumbs span:hover:nth-of-type(8) {
    background-image: url(../images/class-8-active.png);
    background-color: transparent;
}

.class-thumbs .swiper-pagination-bullet {
    border-radius: 0;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    outline: none;
}

.class-title-underline {
    position: relative;
    top: 178px;
    z-index: 2;
}

.cha-img-m {
    display: none !important;
}

.char-1 {
    position: absolute;
}

.class-status {
    margin-top: 36px;
}

.class-quote-title {
    margin-top: 30px;
}

.cha-border-bottom {
    margin-top: 30px;
    margin-bottom: 25px;
}

.class-description-body {
    margin-bottom: 80px;
}

.progress-group {
    margin-bottom: 6px;
}

.progress-group .progress-title {
    width: 50px;
    font-size: 16px;
    font-weight: 400;
    color: #dfa504;
    ont-family: 'Mitr', sans-serif;
}

.progress-yellow {
    background-color: #dfa504;
}

.progress-group .progress {
    width: 340px;
    height: 8px;
    border-radius: 0;
    background-color: #515b72;
}

.swiper-slide-active .progress-bar {
    width: 0px;
    animation-name: progress-animate;
    animation-duration: 2s;
}

@keyframes progress-animate {
    0% {
        width: 0px;
    }
    100% {
        /* width: auto; */
    }
}

.class-vdo-preview a img {
    transition: 0.1s;
}

.class-vdo-preview a:hover img {
    transform: scale(0.98);
    filter: brightness(1.1);
}