@import url('https://cdn.neoloop.cz/fonts/Onest/Onest.css');
@import url('https://cdn.neoloop.cz/fonts/Kanit/Kanit.css');
@import url('https://cdn.neoloop.cz/fonts/FontAwesome/FontAwesome.css');

:root {
    scroll-behavior: smooth;
    --primary-color: #FF0B37;
    --secondary-color: #1A1728;
}
html {
    scroll-padding-top: 6.5rem;
}
body {
    font-family: Onest, sans-serif;
    padding-top: 6.5rem;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    -webkit-user-drag: none;
    pointer-events: none;
}
/*input:-webkit-autofill,*/
/*input:-webkit-autofill:hover,*/
/*input:-webkit-autofill:focus,*/
/*input:-webkit-autofill:active{*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: #ffffff;*/
/*    transition: background-color 5000s ease-in-out 0s;*/
/*}*/

@keyframes skeletonLoading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

/* TITLES */
h1 {
    color: var(--primary-color);
}
h2 {
    color: black;
    padding-left: 1.75rem;
    font-size: 1.5rem;
    font-family: Kanit, sans-serif;
    font-weight: 600;
    position: relative;
    margin-bottom: 1rem;
}
h2:after {
    content: '';
    width: 1rem;
    height: 100%;
    background-color: var(--primary-color);
    top: 0;
    left: 0;
    border-radius: .25rem;
    position: absolute;
}
@media (max-width: 991.98px) {
    h2 {
        font-size: 1.25rem;
    }
}
/* -/ TITLES */

/* BUTTONS */
.btn {
    width: 100%;
    padding: .75rem 1rem;
    text-align: center;
    font-family: Kanit, sans-serif;
    font-weight: 600;
    border: 0;
    border-radius: .5rem;
    transition: .1s linear;
    display: flex;
    place-items: center;
    justify-content: center;
}
.btn:hover, .btn:focus {
    outline: 0;
}
.btn.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn.btn-primary:hover {
    background-color: #e60a32;
}
.btn.btn-primary:active,
.btn.btn-primary:focus {
    background-color: #cc092c;
}
.btn.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}
.btn.btn-secondary:hover {
    background-color: #1A1728;
}
.btn.btn-secondary:active,
.btn.btn-secondary:focus {
    background-color: #1A1728;
}
.btn.btn-light {
    background-color: white;
    color: var(--secondary-color);
}
.btn.btn-light:hover {
    background-color: #e6e6e6;
}
.btn.btn-light:active,
.btn.btn-light:focus {
    background-color: #cccccc;
    color: var(--secondary-color);
}
.btn.btn-light-outline {
    border: 1px solid #FFF;
    background-color: transparent;
    color: white;
}
.btn.btn-light-outline:hover {
    background: #FFF;
    color: var(--secondary-color);
}
.btn.btn-light-outline:active,
.btn.btn-light-outline:focus {
    background-color: #cccccc;
    color: var(--secondary-color);
    border-color: #cccccc;
}
@media screen and (max-width: 768px) {
    .btn {
        width: 100% !important;
    }
}
/* -/ BUTTONS */

/* CUSTOM CAROUSEL */
.sc-carousel-dots__container {
    gap: .35rem;
    padding: 0 !important;
    z-index: 20;
}
.sc-carousel-dots__container .sc-carousel-dots__dot-container {
    width: fit-content !important;
}
.sc-carousel-dots__container .sc-carousel-dots__dot-container button {
    border: 1px solid rgba(26, 23, 40, 0.60);
    background-color: transparent !important;
    opacity: 1 !important;
    transition: width .1s linear, background-color .1s linear !important;
}
.sc-carousel-dots__container .sc-carousel-dots__dot-container button.sc-carousel-dot__dot_active {
    width: 1rem !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color);
    border-radius: 1.5rem;
}
.carousel-arrows {
    position: absolute;
    width: 100%;
    bottom: .1rem;
    left: 0;
    display: flex;
    justify-content: center;
}
.carousel-arrows i {
    color: rgba(26, 23, 40, 0.60);
    cursor: pointer;
}
/* -/ CUSTOM CAROUSEL */

/* HEADER */
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
header:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 5rem;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 100%);
    top: 0;
    left: 0;
    z-index: -10;
}
header .navbar {
    background-color: var(--primary-color);
    border-radius: .75rem;
    margin: .75rem 0 1.5rem 0;
    padding: .5rem .75rem .5rem 1.5rem;
}
header .navbar .navbar-brand {
    width: 9rem;
    min-width: 9rem;
    margin-right: 2rem;
}
header .navbar .navbar-nav {
    width: 100%;
    gap: .25rem;
}
header .navbar .nav-item .nav-link {
    color: white;
    padding: 1rem;
    border-radius: .5rem;
    transition: .1s linear;
    font-size: .9rem;
}
header .navbar .nav-item .nav-link i {
    color: rgba(255, 255, 255, 0.70);
}
header .navbar .nav-item:hover .nav-link {
    background-color: rgba(0, 0, 0, .05);
}
header .navbar .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, .1);
}
header .navbar .navbar-buttons {
    display: flex;
    gap: 1rem;
}
header .navbar .navbar-buttons .btn {
    white-space: nowrap;
}
header .navbar .navbar-toggler {
    height: 3rem;
    border: 0;
    color: white;
    font-size: 1rem;
    padding-right: .5rem;
}
header .navbar .navbar-toggler:focus,
header .navbar .navbar-toggler:active {
    outline: none;
    box-shadow: none;
}
@media (max-width: 991.98px) {
    header .navbar {
        padding: .65rem .75rem .65rem .75rem;
    }
    header .navbar .navbar-nav {
        margin-top: .5rem;
    }
    header .navbar .navbar-buttons {
        margin: .5rem 0;
        flex-direction: column;
    }
    header .navbar .navbar-brand {
        margin-left: .5rem;
    }
    header .navbar .nav-item.dropdown .dropdown-menu {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        padding: 0 1rem;
    }
    header .navbar .nav-item.dropdown .dropdown-menu li {
        font-family: Onest, sans-serif;
        font-weight: 300;
        padding: .25rem 0;
        font-size: .9rem;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }
    header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item {
        padding: .75rem 0;
        display: block;
        color: rgba(255, 255, 255, 0.7);
        transition: none;
    }
    header .navbar .nav-item:hover .nav-link {
        background-color: transparent;
    }
    header .navbar .nav-item.dropdown:has(.dropdown-menu.show) {
        background-color: rgba(0, 0, 0, .05) !important;
        border-radius: 0.5rem;
    }
}
header .navbar .nav-item .nav-link.dropdown-toggle {
    width: 100%;
    text-align: left;
}
header .navbar .nav-item .nav-link.dropdown-toggle::after {
    display: none;
}
@media (hover: hover) {
    header .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
header .navbar .nav-item.dropdown:has(.show) .dropdown-menu {
    display: block;
    margin-top: 0;
}
header .navbar .nav-item:hover .dropdown-background {
    display: block;
}
header .navbar .nav-item .dropdown-background {
    position: absolute;
    height: .5rem;
    width: 100%;
    display: none;
}
header .navbar .nav-item .dropdown-menu {
    left: 0;
    top: 3.8rem !important;
    max-width: 100%;
    padding: .75rem;
    box-shadow: 0 0 22px 0 #00000026;
    border: 1px solid #0000001A !important;
    border-radius: .5rem;
    margin-top: 0 !important;
}
header .navbar .nav-item .dropdown-menu:after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    background-color: white;
    border: 1px solid #0000001A;
    transform: rotate(-45deg);
    top: -.5rem;
    left: 1.5rem;
    z-index: 20;
}
header .navbar .nav-item .dropdown-menu:before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: .75rem;
    background-color: white;
    top: 0;
    left: 1.25rem;
    z-index: 30;
}
header .navbar .nav-item .dropdown-menu ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
}
header .navbar .nav-item .dropdown-menu ul li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    transition: .1s linear;
    border-radius: .25rem;
}
header .navbar .nav-item .dropdown-menu ul li a:hover {
    background: #1A17280D;
}
header .navbar .nav-item .dropdown-menu ul li a img {
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    object-fit: cover;
    border-radius: .25rem;
}
header .navbar .nav-item .dropdown-menu ul li a .item-content {
    display: flex;
    flex-direction: column;
    color: #252B4699;
    width: 100%;
}
header .navbar .nav-item .dropdown-menu ul li span {
    font-weight: 700;
    color: #252B46;
    transition: .1s linear;
}
header .navbar .nav-item .dropdown-menu ul li small {
    color: #00000080;
    font-size: 1rem;
}
header .navbar .nav-item .dropdown-menu.multi-column ul {
    display: block;
    columns: 2;
}
header .navbar .nav-item .dropdown-menu.multi-column ul li {
    width: 17.75rem;
}
header .navbar .nav-item .dropdown-menu.multi-column ul li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 13rem;
}
@media (max-width: 991.98px) {
    header .navbar .nav-item .dropdown-background {
        display: none;
    }
    header .navbar .nav-item .dropdown-menu {
        padding: 0 !important;
        box-shadow: none;
        border: 0 !important;
    }
    header .navbar .nav-item .dropdown-menu ul {
        display: block;
        columns: 2;
    }
    header .navbar .nav-item .dropdown-menu ul li {
        width: 100% !important;
    }
    header .navbar .nav-item .dropdown-menu:before,
    header .navbar .nav-item .dropdown-menu:after {
        display: none;
    }
    header .navbar .nav-item .dropdown-menu span {
        color: white !important;
        max-width: 100% !important;
    }
    header .navbar .nav-item .dropdown-menu small {
        color: white !important;
        opacity: .75 !important;
    }
}
@media (max-width: 767.98px) {
    header .navbar .nav-item .dropdown-menu ul {
        columns: 1 !important;
    }
}
/* -/ HEADER */

/* HOME CAROUSEL */
.h-panel {
    margin-bottom: 1rem;
}
.h-panel .h-panel-inner {
    min-height: 30rem;
    background: linear-gradient(295deg, rgba(0, 0, 0, .40) 0.59%, rgba(0, 0, 0, 0) 51.64%), linear-gradient(83deg, #000 0%, rgba(0, 0, 0, 0) 99.78%), url('/images/bg.webp') no-repeat center -2rem, lightgray 0 no-repeat;
    background-size: cover;
    border-radius: 1rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.h-panel h1 {
    font-size: 2.25rem;
    font-weight: 700;
    font-family: Kanit, sans-serif;
}
.h-panel b {
    color: white;
    font-weight: 700;
    margin: 1.25rem 0 1rem 0;
    display: block;
}
.h-panel p {
    color: white;
    font-weight: 400;
    margin-bottom: 1.25rem;
    max-width: 30rem;
}
.h-panel .panel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* -/ HOME CAROUSEL */

/* HOME BENEFITS */
.h-benefits {
    margin: 3rem 0;
}
.h-benefits .benefit-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.h-benefits .benefit-item .item-icon {
    width: 6.5rem;
    min-width: 6.5rem;
    height: 6.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('/images/icons/benefit-circle.svg') no-repeat center;
    background-size: contain;
}
.h-benefits .benefit-item .item-icon img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
}
.h-benefits .benefit-item .item-content {
    display: flex;
    flex-direction: column;
}
.h-benefits .benefit-item .item-content span {
    font-size: 1rem;
    font-family: Kanit, sans-serif;
    font-weight: 600;
    margin: 0;
    color: var(--primary-color);
}
.h-benefits .benefit-item .item-content p {
    margin-bottom: 0;
}
/* -/ HOME BENEFITS */

/* HOME COURSES */
.h-courses {
    margin-bottom: 4rem;
}
.h-courses .courses-item {
    height: 25rem;
    padding: 2rem;
    border: 1px solid #b0b0b0;
    border-radius: 1rem;
    display: flex;
    place-items: end;
    justify-content: space-between;
    gap: 1rem;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.h-courses .courses-item .item-left span.old-price {
    font-family: Kanit, sans-serif;
    font-size: 1rem;
    color: white;
    text-decoration: line-through;
}
.h-courses .courses-item .item-left span.new-price {
    background-color: var(--primary-color);
    color: white;
    padding: .25rem .5rem;
    border-radius: .4rem;
    font-family: Kanit, sans-serif;
    font-size: 1rem;
    width: fit-content;
}
.h-courses .courses-item .item-left h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 1rem 0 .5rem 0;
    font-family: Kanit, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
.h-courses .courses-item .item-left p {
    color: rgba(255, 255, 255, .8);
    margin-bottom: 0;
}
.h-courses .courses-item .item-right {
    background-color: var(--primary-color);
    color: white;
    display: grid;
    place-items: center;
    width: 10rem;
    min-width: 7rem;
    height: 5rem;
    aspect-ratio: 1/1;
    border-radius: .5rem;
    transition: .1s linear;
}
.h-courses .courses-item .item-right i {
    font-size: 2rem;
}
.h-courses .courses-item:hover .item-right {
    background-color: white;
    color: var(--primary-color);
}
.h-courses .courses-last-item {
    height: 28.55rem;
    padding: 3rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 1rem;
}
.h-courses .courses-last-item h3 {
    color: var(--primary-color);
    font-size: 2rem;
    margin: 1rem 0 .5rem 0;
    font-family: Kanit, sans-serif;
    font-weight: 600;
}
.h-courses .courses-last-item p {
    color: rgba(255, 255, 255, .8);
}
.h-courses .courses-subjects {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}
.h-courses .courses-subjects .subject-item {
    background-color: #1A1728;
    border-radius: 1rem;
    padding: 1.625rem;
    display: flex;
    position: relative;
    overflow: hidden;
}
.h-courses .courses-subjects .subject-item:not(:last-child) {
    margin-bottom: 0;
}
.h-courses .courses-subjects .subject-item .item-icon {
    width: 6rem;
    min-width: 4rem;
    height: 100%;
    display: flex;
    place-items: center;
}
.h-courses .courses-subjects .subject-item .item-icon img {
    width: 6rem;
    min-width: 4rem;
    aspect-ratio: 1/1;
}
.h-courses .courses-subjects .subject-item .item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2rem;
}
.h-courses .courses-subjects .subject-item .item-content h4 {
    font-size: 1.8rem;
    font-weight: 600;
    font-family: Kanit, sans-serif;
}
.h-courses .courses-subjects .subject-item .item-content ul {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    white-space: normal;
}
.h-courses .courses-subjects .subject-item .item-content ul li {
    color: rgba(255, 255, 255, 0.70);
    font-weight: 300;
    padding-right: .75rem;
    margin-right: .5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
    white-space: nowrap;
}
.h-courses .courses-subjects .subject-item .item-content ul li:nth-child(1) {
    margin-right: .75rem;
}
.h-courses .courses-subjects .subject-item .item-content ul li:last-child {
    border-right: 0;
}
.h-courses .courses-subjects .subject-item .item-content ul li i {
    margin-right: .5rem;
}
.h-courses .courses-subjects .subject-item .item-arrow {
    position: absolute;
    top: 0;
    right: 2.5rem;
    height: 100%;
    width: 2rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    transition: .2s linear;
}
.h-courses .courses-subjects .subject-item:hover .item-arrow {
    right: 2rem;
}
.h-courses .courses-subjects .subject-item.text-chemistry .item-content h4,
.h-courses .courses-subjects .subject-item.text-chemistry .item-content ul li i,
.h-courses .courses-subjects .subject-item.text-chemistry .item-arrow {
    color: #77E0EC;
}
.h-courses .courses-subjects .subject-item.text-physics .item-content h4,
.h-courses .courses-subjects .subject-item.text-physics .item-content ul li i,
.h-courses .courses-subjects .subject-item.text-physics .item-arrow {
    color: #F5C452;
}
.h-courses .courses-subjects .subject-item.text-biology .item-content h4,
.h-courses .courses-subjects .subject-item.text-biology .item-content ul li i,
.h-courses .courses-subjects .subject-item.text-biology .item-arrow {
    color: #5AE692;
}
@media (max-width: 1399.98px) {
    .h-courses .courses-last-item {
        height: 25.25rem;
    }
    .h-courses .courses-subjects .subject-item .item-arrow {
        right: 1rem;
    }
    .h-courses .courses-subjects .subject-item:hover .item-arrow {
        right: .5rem;
    }
}
@media (max-width: 1199.98px) {
    .h-courses .courses-subjects .subject-item .item-icon {
        display: none;
    }
    .h-courses .courses-subjects .subject-item .item-content {
        padding-left: 0;
    }
}
@media (max-width: 991.98px) {
    .h-courses .courses-item .item-left h3 {
        font-size: 1.25rem;
    }
    .h-courses .courses-item .item-left p {
        font-size: .9rem;
    }
    .h-courses .courses-last-item {
        padding: 2rem;
        gap: 0;
    }
    .h-courses .courses-last-item h3 {
        font-size: 1.25rem;
    }
    .h-courses .courses-last-item p {
        font-size: .9rem;
    }
    .h-courses .courses-subjects .subject-item .item-icon {
        display: flex;
    }
    .h-courses .courses-subjects .subject-item .item-content {
        padding-left: 2rem;
    }
    .h-courses .courses-subjects .subject-item .item-arrow {
        right: 2.5rem;
    }
    .h-courses .courses-subjects .subject-item:hover .item-arrow {
        right: 2rem;
    }
}
@media (max-width: 575.98px) {
    .h-courses .courses-subjects .subject-item .item-content ul {
        flex-direction: column;
    }
    .h-courses .courses-subjects .subject-item .item-content ul li {
        margin-bottom: .5rem;
        border-right: 0;
    }
}
/* HOME COURSES */

/* HOME RATING */
.h-rating {
    margin-bottom: 4rem;
}
.h-rating h2 {
    margin-bottom: 0;
}
.h-rating .rating-inner {
    position: relative;
}
.h-rating .rating-item {
    padding: 1rem 0;
}
.h-rating .rating-item.video {
    cursor: pointer;
}
.h-rating .rating-item .item-inner {
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    transition: .1s linear;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.05);
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    height: 100%;
}
.h-rating .rating-item .item-inner:hover {
    background-color: #FFF;
    box-shadow: 0 0 20px 0 rgba(26, 23, 40, .1);
    border-color: transparent;
}
.h-rating .rating-item i {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, .3);
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    border: 1px solid transparent;
}
.h-rating .rating-item .item-header {
    display: flex;
    gap: 1rem;
}
.h-rating .rating-item .item-header .item-profile {
    width: 4.25rem;
    min-width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: grid;
    place-items: center;
    background-color: white;
    font-size: 1.2rem;
    font-weight: 600;
    transition: .1s linear;
}
.h-rating .rating-item:hover .item-header .item-profile {
    background-color: rgba(0, 0, 0, 0.05);
}
.h-rating .rating-item .item-header .item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
}
.h-rating .rating-item .item-header .item-info .item-name {
    font-family: Kanit, sans-serif;
    font-weight: 600;
    color: black;
    font-size: 1.2rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.h-rating .rating-item .item-header .item-info .item-course {
    color: white;
    background-color: var(--secondary-color);
    padding: .15rem .5rem;
    border-radius: .25rem;
    width: fit-content;
    font-weight: 300;
    font-size: .9rem;
}
.h-rating .rating-item p {
    color: black;
    margin: 1.5rem 0 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.h-rating .rating-item .btn {
    background-color: rgba(0, 0, 0, .05);
}
.h-rating .rating-item .btn:hover {
    background-color: rgba(0, 0, 0, .1);
}
@media (max-width: 575.98px) {
    .h-rating .rating-item .item-inner .fa-quote-right {
        display: none;
    }
}
/* -/ HOME RATING */

/* HOME GUIDE */
.h-guide {
    margin-bottom: 4rem;
}
.h-guide .h-guide-inner {
    background-color: var(--secondary-color);
    border-radius: 1rem;
    padding: 2rem 0;
    display: flex;
    min-height: 15rem;
}
.h-guide .guide-icon {
    width: 10%;
    display: flex;
    justify-content: center;
    place-items: center;
}
.h-guide .guide-icon i {
    font-size: 2.5rem;
    color: var(--primary-color);
}
.h-guide .guide-content {
    width: 50%;
}
.h-guide .guide-content span {
    font-size: 1.75rem;
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: .5rem;
}
.h-guide .guide-content p {
    color: rgba(255, 255, 255, 0.60);
}
.h-guide .guide-form {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.h-guide .guide-form .btn {
    white-space: nowrap;
}
.h-guide .guide-form .form-group {
    position: relative;
    width: 60rem;
}
.h-guide .guide-form .form-group i {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    color: rgba(255, 255, 255, 0.40);
}
.h-guide .guide-form .form-group input,
.h-guide .guide-form .form-group textarea {
    width: 100%;
    padding: .75rem .75rem .75rem 3rem;
    border: 1px solid rgba(0, 0, 0, .15);
    background: rgba(255, 255, 255, .15);
    border-radius: .5rem !important;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
}
.h-guide .guide-form .form-group input:focus,
.h-guide .guide-form .form-group textarea:focus {
    outline: 0;
}
.h-guide .h-guide-inner .guide-img {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: center;
    place-items: center;
}
.h-guide .h-guide-inner .guide-img img {
    position: absolute;
    width: 14rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .75rem;
}
@media screen and (max-width: 992px) {
    .h-guide .h-guide-inner {
        padding: 2rem 0 2rem 2rem;
    }
    .h-guide .h-guide-inner .guide-icon {
        display: none;
    }
    .h-guide .h-guide-inner .guide-content {
        width: 50%;
    }
    .h-guide .h-guide-inner .guide-content .guide-form {
        flex-direction: column;
    }
    .h-guide .h-guide-inner .guide-content .guide-form .btn {
        width: 100% !important;
    }
    .h-guide .h-guide-inner .guide-content .guide-form .form-group {
        width: 100%;
    }
    .h-guide .h-guide-inner .guide-img {
        width: 50%;
    }
    .h-guide .h-guide-inner .guide-img img {
        position: relative;
    }
}
@media screen and (max-width: 768px) {
    .h-guide .h-guide-inner {
        padding: 2rem;
    }
    .h-guide .h-guide-inner .guide-content {
        width: 100%;
    }
    .h-guide .h-guide-inner .guide-img {
        display: none;
    }
}
/* -/ HOME GUIDE */

/* HOME BLOG */
.h-blog {
    margin-bottom: 4rem;
}

/* --> BLOG ITEM */
.blog-item {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: .5rem;
    overflow: hidden;
    transition: .1s linear;
}
.blog-item:hover {
    background: #FFF;
    box-shadow: 0 0 20px 0 rgba(26, 23, 40, 0.20);
}
.blog-item .item-img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.blog-item .item-img span {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background-color: rgba(255, 11, 55, 0.50);
    color: white;
    padding: .4rem .65rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.blog-item .item-text {
    height: 60%;
    padding: 1.25rem;
}
.blog-item .item-text span {
    background-color: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, 0.50);
    padding: .25rem .3rem;
    border-radius: .25rem;
}
.blog-item .item-text h4 {
    font-family: Kanit, sans-serif;
    color: black;
    margin-top: .75rem;
    font-size: 1.25rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.blog-item .item-text p {
    color: rgba(0, 0, 0, .6);
    margin-bottom: .5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.blog-item .item-text a {
    color: var(--primary-color);
}
.blog-item .item-text a i {
    margin-left: .25rem;
    transition: .1s linear;
}
.blog-item:hover .item-text a i {
    margin-left: .5rem;
}
/* --> -/ BLOG ITEM */
/* -/ HOME BLOG */

/* CONTACT INFO */
.contact {
    margin: 3rem 0 4rem 0;
}
.contact .contact-inner {
    height: fit-content;
}
.contact .contact-info {
    height: 100%;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact .contact-info span {
    font-weight: 700;
    font-size: 1.4rem;
}
.contact .contact-info ul {
    list-style-type: none;
    padding-left: 0;
}
.contact .contact-info a {
    background-color: #FF0B3733;
    padding: .75rem;
    color: var(--primary-color);
    transition: .1s linear;
    border-radius: .5rem;
    width: 16rem;
}
.contact .contact-info a:hover {
    background-color: var(--primary-color);
    color: white;
}
.contact .contact-map {
    height: 20rem;
}
.contact .contact-map #mapa {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    animation: skeletonLoading 1s linear infinite alternate;
}
.contact .contact-map img {
    max-width: unset !important;
}
@media (max-width: 1199.98px) {
    .contact {
        margin: 1rem 0 4rem 0;
    }
}
/* -/ CONTACT INFO */

/* CONTACT FAQ */
.faq {
    background-color: rgba(0, 0, 0, .05);
    padding: 4rem 0;
}
.faq .accordion {
    background-color: transparent;
}
.faq .accordion .accordion-item {
    background-color: transparent;
    border-right: 0;
    border-left: 0;
}
.faq .accordion .accordion-item h2 {
    padding-left: 0;
}
.faq .accordion .accordion-item h2:after {
    display: none;
}
.faq .accordion .accordion-item .accordion-button {
    background-color: transparent;
    color: black;
    font-weight: 600;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.faq .accordion .accordion-item .accordion-body {
    color: rgba(0, 0, 0, .6);
    padding-left: 0;
    padding-right: 0;
}
.faq .faq-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq .faq-form .form-group {
    position: relative;
}
.faq .faq-form .form-group i {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    color: rgba(0, 0, 0, .4);
}
.faq .faq-form .form-group input,
.faq .faq-form .form-group textarea {
    width: 100%;
    padding: .75rem .75rem .75rem 3rem;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: rgba(0, 0, 0, .1);
    border-radius: .5rem !important;
    overflow: hidden;
}
.faq .faq-form .form-group input:focus,
.faq .faq-form .form-group textarea:focus {
    outline: 0;
}
/* -/ CONTACT FAQ */

/* LECTURERS */
.lecturers {
    margin: 3rem 0 4rem 0;
}
.lecturers h2 {
    margin-bottom: 2rem;
}
.lecturers .lecturers-item {
    display: flex;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    min-height: 16rem;
    height: 100%;
}
.lecturers .lecturers-item .item-img {
    width: 40%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1/1;
}
.lecturers .lecturers-item .item-text {
    width: 60%;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.lecturers .lecturers-item .item-text span {
    font-family: Kanit, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--primary-color);
    display: block;
    position: relative;
}
.lecturers .lecturers-item .item-text span:after {
    position: absolute;
    content: '';
    width: 5rem;
    height: 2px;
    left: 0;
    bottom: -.25rem;
    background-color: var(--primary-color);
}
.lecturers .lecturers-item .item-text p {
    color: rgba(0, 0, 0, 0.60);
    margin-bottom: 0;
}
.lecturers .lecturers-item .item-text a {
    background-color: #FF0B3733;
    padding: .75rem;
    color: var(--primary-color);
    transition: .1s linear;
    border-radius: .5rem;
    text-align: center;
}
.lecturers .lecturers-item .item-text a:hover {
    background-color: var(--primary-color);
    color: white;
}
.lecturers .lecturers-item.blank {
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: none;
    min-height: 16rem;
    height: calc(100% - 1.5rem);
    display: flex;
    place-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .60);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: Kanit, sans-serif;
    transition: .2s linear;
}
.lecturers .lecturers-item.blank:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
}
@media (max-width: 1199.98px) {
    .lecturers {
        margin: 1rem 0 2rem 0;
    }
}
@media (max-width: 1399.98px) {
    .lecturers .lecturers-item {
        flex-direction: column;
    }
    .lecturers .lecturers-item .item-img {
        width: 100%;
    }
    .lecturers .lecturers-item .item-text {
        width: 100%;
    }
    .lecturers .lecturers-item .item-text p {
        margin: 1rem 0;
    }
}
/* -/ LECTURERS */

/* BLOG */
.blog {
    margin: 3rem 0 4rem 0;
}
.blog .blog-form {
    margin-bottom: .5rem;
}
.blog .blog-form .form-group {
    position: relative;
    margin-bottom: 1rem;
}
.blog .blog-form .form-group i {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: rgba(0, 0, 0, 0.40);
}
.blog .blog-form .form-group input {
    width: 100%;
    padding: .75rem .75rem .75rem 3rem;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: .25rem !important;
    overflow: hidden;
    color: var(--secondary-color);
}
.blog .blog-form .form-group input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.blog .blog-form .form-group input[type="date"]:focus {
    outline: 0;
}
.blog .blog-form .form-group input[type="date"].form-tip:after {
    content: attr(data-text);
    position: absolute;
    width: 10rem;
    left: 3rem;
    top: .8rem;
    pointer-events: none;
    background: #f2f2f2;
    color: rgba(0, 0, 0, .6);
}
.blog .blog-pager {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.blog .blog-pager .pager-body {
    border: 1px solid rgba(0, 0, 0, 0.20);
    border-radius: .25rem;
    display: flex;
    overflow: hidden;
}
.blog .blog-pager .pager-body button {
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.20);
    transition: .1s linear;
}
.blog .blog-pager .pager-body button:last-child {
    border-right: 0;
}
.blog .blog-pager .pager-body .pager-btn {
    width: 5.75rem;
    padding: .75rem 0;
    background-color: var(--primary-color);
    color: rgba(0, 0, 0, 0.50);
    text-align: center;
}
.blog .blog-pager .pager-body .pager-btn:hover {
    color: white;
    background-color: var(--secondary-color);
}
.blog .blog-pager .pager-body .pager-item {
    padding: .5rem .75rem;
    width: 2.75rem;
    background-color: transparent;
}
.blog .blog-pager .pager-body .pager-item:hover {
    background-color: rgba(0, 0, 0, 0.10);
}
.blog .blog-pager .pager-body .pager-item.active {
    background-color: rgba(0, 0, 0, 0.10);
}
@media (max-width: 1199.98px) {
    .blog {
        margin: 1rem 0 2rem 0;
    }
}
/* -/ BLOG */

/* BLOG DETAIL */
.blog-detail {
    margin: 3rem 0 4rem 0;
    min-height: 60vh;
}
.blog-detail .blog-header span {
    color: rgba(0, 0, 0, 0.50);
    display: block;
}
.blog-detail .blog-header .blog-badge {
    padding: .4rem .8rem;
    border-radius: .5rem;
    width: fit-content;
    margin: .5rem 0 1rem 0;
}
@media (max-width: 1199.98px) {
    .blog-detail {
        margin: 1rem 0 3rem 0;
    }
}
/* -/ BLOG DETAIL */

/* COURSE PANEL */
.c-panel {
    margin-bottom: 2rem;
}
.c-panel .c-panel-inner {
    height: 25rem;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    border-radius: 1rem;
    padding: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    place-items: end;
    border: 1px solid #b0b0b0;
}
.c-panel span.old-price {
    font-family: Kanit, sans-serif;
    font-size: 1rem;
    color: white;
    text-decoration: line-through;
}
.c-panel span.new-price {
    background-color: var(--primary-color);
    color: white;
    padding: .25rem .5rem;
    border-radius: .4rem;
    font-family: Kanit, sans-serif;
    font-size: 1rem;
    width: fit-content;
}
.c-panel h1 {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: Kanit, sans-serif;
    margin: 1rem 0 0 0;
    text-transform: uppercase;
}
@media (max-width: 991.98px) {
    .c-panel .c-panel-inner {
        flex-direction: column;
        justify-content: end;
        place-items: start;
        gap: 1rem;
        padding: 2rem;
    }
    .c-panel h1 {
        font-size: 1.25rem;
    }
}
/* -/ COURSE PANEL */

/* COURSE STATS */
.c-stats {
    margin-bottom: 2rem;
}
.c-stats .stats-inner {
    background-color: #1A1728;
    border-radius: 1.5rem;
    padding: 3rem 4rem;
}
.c-stats .stats-item {
    color: white;
    display: flex;
    place-items: center;
}
.c-stats .stats-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-right: 1.25rem;
    margin-top: 1rem;
}
.c-stats .stats-item .item-inner p {
    font-size: 2rem;
    font-family: Kanit, sans-serif;
    display: flex;
    align-items: end;
    margin-bottom: -.5rem;
}
.c-stats .stats-item .item-inner p span {
    font-size: 2.5rem;
    font-family: Kanit, sans-serif;
}
.c-stats .stats-item .item-inner p small {
    margin-bottom: .3rem;
}
.c-stats .stats-item .item-inner span {
    font-size: 1.1rem;
    font-family: Onest, sans-serif;
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    .c-stats .stats-inner {
        padding: 3rem;
    }
}
@media (max-width: 767.98px) {
    .c-stats .stats-inner {
        padding: 2rem;
    }
}
/* -/ COURSE STATS */

/* COURSE TABLE */
.c-table {
    margin-bottom: 3rem;
}
.c-table table {
    width: 100%;
    background-color: white;
}
.c-table table thead tr th {
    text-transform: uppercase;
    color: rgba(26, 23, 40, 0.50);
}
.c-table table.column-2 thead tr th:nth-child(2),
.c-table table.column-3 thead tr th:nth-child(3),
.c-table table.column-4 thead tr th:nth-child(4) {
    background-color: #1A1728;
    color: white;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.c-table table tbody tr {
    background-color: rgba(26, 23, 40, 0.03);
    font-family: Onest, sans-serif;
    font-weight: 600;
}
.c-table table tbody tr td {
    padding: 1rem;
    font-family: Kanit, sans-serif;
}
.c-table table tbody tr td i {
    color: rgba(26, 23, 40, 0.50);
    font-size: 1.5rem;
}
.c-table table tbody tr:last-child td {
    font-family: Onest, sans-serif;
    font-weight: 600;
}
.c-table table tbody tr td:first-child {
    font-family: Onest, sans-serif;
    font-weight: 600;
}
.c-table table.column-2 tbody tr td:nth-child(2),
.c-table table.column-3 tbody tr td:nth-child(3),
.c-table table.column-4 tbody tr td:nth-child(4) {
    background: rgba(26, 23, 40, 0.05);
}
.c-table table.column-2 tbody tr td:nth-child(2) i,
.c-table table.column-3 tbody tr td:nth-child(3) i,
.c-table table.column-4 tbody tr td:nth-child(4) i {
    color: black;
}
.c-table table.column-2 tbody tr:last-child td:nth-child(2),
.c-table table.column-3 tbody tr:last-child td:nth-child(3),
.c-table table.column-4 tbody tr:last-child td:nth-child(4) {
    color: var(--primary-color);
}
.c-table table tbody tr:last-child td:nth-child(2) span.old-price,
.c-table table tbody tr:last-child td:nth-child(3) span.old-price,
.c-table table tbody tr:last-child td:nth-child(4) span.old-price {
    color: rgba(0, 0, 0, .5);
    font-family: Kanit, sans-serif;
    text-decoration: line-through;
}
.c-table table tbody tr:last-child td:nth-child(3),
.c-table table tbody tr:last-child td:nth-child(4) {
    color: rgba(0, 0, 0, 0.50);
}
.c-table table thead tr th:not(:first-child),
.c-table table tbody tr td:not(:first-child),
.c-table table tfoot tr th:not(:first-child) {
    text-align: center;
}
.c-table table thead tr th:not(:first-child) {
    padding: 1rem .25rem;
    font-size: 1rem;
    width: 20%;
}
.c-table table tbody tr td:not(:first-child) {
    color: rgba(0, 0, 0, 0.50);
}
.c-table table thead tr th:not(:last-child) ,
.c-table table tbody tr td:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.c-table table thead tr th,
.c-table table tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.c-table table tfoot tr th a {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 1.5rem 0;
    font-family: Kanit, sans-serif;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    transition: .1s linear;
}
.c-table table.column-2 tfoot tr th:nth-child(2) a,
.c-table table.column-3 tfoot tr th:nth-child(3) a,
.c-table table.column-4 tfoot tr th:nth-child(4) a {
    background-color: var(--primary-color);
    color: white;
}
.c-table table.column-2 tfoot tr th:nth-child(2) a:hover,
.c-table table.column-3 tfoot tr th:nth-child(3) a:hover,
.c-table table.column-4 tfoot tr th:nth-child(4) a:hover {
    background-color: #e60a32;
}
.c-table table.column-2 tfoot tr th:nth-child(2) a:active,
.c-table table.column-2 tfoot tr th:nth-child(2) a:focus,
.c-table table.column-3 tfoot tr th:nth-child(3) a:active,
.c-table table.column-3 tfoot tr th:nth-child(3) a:focus,
.c-table table.column-4 tfoot tr th:nth-child(4) a:active,
.c-table table.column-4 tfoot tr th:nth-child(4) a:focus {
    background-color: #cc092c;
}
.c-table table tfoot tr th:nth-child(2) a,
.c-table table tfoot tr th:nth-child(3) a,
.c-table table tfoot tr th:nth-child(4) a {
    background-color: white;
    color: var(--secondary-color);
}
.c-table table tfoot tr th:nth-child(2) a:hover,
.c-table table tfoot tr th:nth-child(3) a:hover,
.c-table table tfoot tr th:nth-child(4) a:hover {
    background-color: #e6e6e6;
}
.c-table table tfoot tr th:nth-child(2) a:active,
.c-table table tfoot tr th:nth-child(3) a:active,
.c-table table tfoot tr th:nth-child(4) a:active,
.c-table table tfoot tr th:nth-child(2) a:focus,
.c-table table tfoot tr th:nth-child(3) a:focus,
.c-table table tfoot tr th:nth-child(4) a:focus {
    background-color: #cccccc;
    color: var(--secondary-color);
}
.c-table .table-switch {
    display: flex;
    justify-content: center;
}
.c-table .table-switch .switch-tab {
    display: flex;
    justify-content: space-between;
    background-color: rgba(26, 23, 40, 0.03);
    width: 30rem;
    max-width: 100%;
    padding: .25rem;
    border-radius: 1rem;
}
.c-table .table-switch .switch-tab .tab-item {
    width: 33.33%;
    text-align: center;
    padding: .5rem .75rem;
    cursor: pointer;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    transition: .1s linear;
}
.c-table .table-switch .switch-tab .tab-item:nth-child(1) {
    border-top-left-radius: .75rem;
    border-bottom-left-radius: .75rem;
}
.c-table .table-switch .switch-tab .tab-item:nth-child(3) {
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
}
.c-table .table-switch .switch-tab .tab-item.active {
    background-color: var(--primary-color);
    color: white;
}
.c-table .table-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1.5rem;
    background-color: rgba(26, 23, 40, 0.03);
    color: var(--secondary-color);
}
.c-table .table-list li {
    display: flex;
    justify-content: space-between;
    place-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1rem;
    text-align: end;
}
.c-table .table-list li:last-child {
    border-bottom: 0;
}
.c-table .table-list li .list-left {
    width: 80%;
    text-align: start;
    font-weight: 700;
}
/* -/ COURSE TABLE */

/* COURSE CAROUSEL */
.c-slider {
    margin-bottom: 3rem;
}
.c-slider .slider-inner {
    position: relative;
}
.c-slider .slider-item {
    padding: 1rem 0;
}
.c-slider .slider-item .item-inner {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* -/ COURSE CAROUSEL */

/* COURSE FORM */
.c-form {
    margin-bottom: 3rem;
}
.c-form p {
    color: rgba(0, 0, 0, 0.60);
}
.c-form .course-form .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
.c-form .course-form .form-group i {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    color: rgba(0, 0, 0, .4);
}
.c-form .course-form .form-group input,
.c-form .course-form .form-group textarea {
    width: 100%;
    padding: .75rem .75rem .75rem 3rem;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: rgba(0, 0, 0, .1);
    border-radius: .5rem !important;
    overflow: hidden;
    font-family: Onest, sans-serif;
}
.c-form .course-form .form-group input:focus,
.c-form .course-form .form-group textarea:focus {
    outline: 0;
}
.c-form .course-form .form-group textarea {
    min-height: 12.5rem;
    max-height: 20rem;
}
.c-form .course-form .form-group .svelte-select {
    border: 1px solid rgba(0, 0, 0, .15) !important;
    background-color: rgba(0, 0, 0, .1) !important;
    border-radius: .5rem !important;
    height: 3.25rem;
    cursor: pointer !important;
}
.c-form .course-form .form-group .svelte-select .selected-item {
    padding-left: 2rem;
}
.c-form .course-form .form-group .svelte-select input {
    padding-left: 2rem !important;
    cursor: pointer !important;
}
.c-form .course-form .form-group .svelte-select input::placeholder {
    font-family: Onest, sans-serif !important;
    font-size: 1rem !important;
}
.c-form .course-form .form-group .svelte-select .icon.chevron i {
    left: unset !important;
    right: .5rem;
}
.c-form .course-form .form-btn {
    display: flex;
    justify-content: end;
}
/* -/ COURSE FORM */

/* COURSE CARDS */
.c-cards {
    margin-bottom: 3rem;
}
.c-cards .cards-inner .cards-item {
    color: white;
    padding: 3.5rem 2rem;
    border-radius: 1.5rem;
}
.c-cards .cards-inner .cards-item.chemistry {
    background-color: #77E0EC;
}
.c-cards .cards-inner .cards-item.physics {
    background-color: #F5C452;
}
.c-cards .cards-inner .cards-item.biology {
    background-color: #5AE692;
}
.c-cards .cards-inner .cards-item h4 {
    font-family: Kanit, sans-serif;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.c-cards .cards-inner .cards-item ul {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    white-space: normal;
}
.c-cards .cards-inner .cards-item ul li {
    color: rgba(255, 255, 255, 0.70);
    font-weight: 300;
    padding-right: .75rem;
    margin-right: .5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
    white-space: nowrap;
}
.c-cards .cards-inner .cards-item ul li:nth-child(1) {
    margin-right: .75rem;
}
.c-cards .cards-inner .cards-item ul li:last-child {
    border-right: 0;
}
.c-cards .cards-inner .cards-item ul li i {
    margin-right: .5rem;
}
@media (max-width: 575.98px) {
    .c-cards .cards-inner .cards-item ul {
        flex-direction: column;
    }
    .c-cards .cards-inner .cards-item ul li {
        margin-bottom: .5rem;
        border-right: 0;
    }
}
/* -/ COURSE CARDS */

/* COURSE FOOTER */
.c-footer {
    --c-footer-height: 18rem;
    height: var(--c-footer-height);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.c-footer .footer-text,
.c-footer .footer-btn {
    height: var(--c-footer-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-footer .footer-text span {
    color: #FF0B37;
    font-family: Kanit, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.c-footer .footer-text p {
    color: rgba(255, 255, 255, 0.60);
    font-weight: 300;
}
@media screen and (max-width: 992px) {
    .c-footer {
        padding: 5rem 1rem;
        --c-footer-height: fit-content;
    }
    .c-footer .footer-text p {
        margin-bottom: 1.5rem;
    }
}
/* -/ COURSE FOOTER */

/* COURSE SHOWCASE */
.c-showcase {
    margin-bottom: 4rem;
}
.c-showcase .showcase-item {
    aspect-ratio: 1/1;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    justify-content: space-between;
    place-items: end;
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    user-select: none;
}
.c-showcase .showcase-item .item-text h5 {
    color: white;
    font-family: Kanit, sans-serif;
    font-size: 1.4rem;
}
.c-showcase .showcase-item .item-text > div {
    display: flex;
    gap: 1rem;
}
.c-showcase .showcase-item .item-text > div span {
    padding: .5rem .75rem;
    color: white;
    border-radius: .5rem;
    font-weight: 400;
    font-size: .9rem;
}
.c-showcase .showcase-item.chemistry .item-text > div span.item-subject {
    background-color: rgba(119, 224, 236, 0.50);
    color: rgb(119, 224, 236);
}
.c-showcase .showcase-item.physics .item-text > div span.item-subject {
    background-color: rgba(245, 196, 82, 0.50);;
    color: rgb(245, 196, 82);
}
.c-showcase .showcase-item.biology .item-text > div span.item-subject {
    background-color: rgba(90, 230, 146, 0.50);
    color: rgb(90, 230, 146);
}
.c-showcase .showcase-item .item-text > div span.item-time {
    background: rgba(255, 255, 255, 0.30);
}
.c-showcase .showcase-item .item-btn {
    border-radius: .5rem;
    height: 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    display: grid;
    place-items: center;
    background-color: var(--primary-color);
    color: white;
    transition: .1s linear;
    font-size: 1.5rem;
}
.c-showcase .showcase-item:hover .item-btn {
    background-color: #e60a32;
}
.c-showcase .showcase-btn {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
/* -/ COURSE SHOWCASE */

/* COURSE MODAL */
#videoModal .modal-content {
    border-radius: .75rem !important;
}
#videoModal .modal-title {
    font-size: 1.1rem;
}
#videoModal video {
    width: 100%;
    aspect-ratio: 16/9;
}
/* -/ COURSE MODAL */

/* DYNAMIC PAGE */
.page {
    margin: 3rem 0 4rem 0;
    min-height: 60vh;
}
.page .page-header {
    margin-bottom: .5rem;
}
.page .page-content h3 {
    margin-bottom: 0;
    margin-top: 1rem;
}
.page .page-content .row > div {
    margin-bottom: 1.5rem;
}
.page .page-content .row > div:not(:has(*)) {
    display: none;
}
.page .page-content .row:last-child > div:last-child {
    margin-bottom: 0;
}
@media (max-width: 1199.98px) {
    .page {
        margin: 1rem 0 3rem 0;
    }
}
/* -/ DYNAMIC PAGE */

/* FACULTIES */
.faculty {
    margin: 3rem 0 4rem 0;
}
.faculty .faculty-header {
    margin-bottom: .5rem;
}
.faculty .faculty-content h3:first-child {
    margin-top: .5rem;
}
.faculty .faculty-content h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 1.75rem 0 .75rem 0;
}
.faculty .faculty-content img {
    margin: .75rem 0 1.75rem 0;
    width: 100%;
    max-width: 100%;
}
.faculty .faculty-content img ~ h3 {
    margin-top: 0;
}
.faculty .faculty-content p:last-child {
    margin-bottom: 0;
}
.faculty .faculty-content p a {
    color: black;
    font-weight: 600;
}
.faculty .faculty-content p a:hover {
    text-decoration: underline;
}
.faculty .faculty-content .logo-slider {
    height: 100%;
}
.faculty .faculty-content .logo-slider img {
    position: sticky;
    top: 8rem;
    margin: 0;
}
@media (max-width: 1199.98px) {
    .faculty {
        margin: 1rem 0 3rem 0;
    }
}
/* -/ FACULTIES */

/* SPECIALIZATION */
.specialization {
    margin: 3rem 0 4rem 0;
}
.specialization .specialization-header {
    margin-bottom: .5rem;
}
.specialization .specialization-content h3:first-child {
    margin-top: .5rem;
}
.specialization .specialization-content h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 1.75rem 0 .75rem 0;
}
.specialization .specialization-content img {
    margin: .75rem 0 1.75rem 0;
    width: 100%;
    max-width: 100%;
}
.specialization .specialization-content img ~ h3 {
    margin-top: 0;
}
.specialization .specialization-content p:last-child {
    margin-bottom: 0;
}
.specialization .specialization-content p a {
    color: black;
    font-weight: 600;
}
.specialization .specialization-content p a:hover {
    text-decoration: underline;
}
.specialization .specialization-content .logo-slider {
    height: 100%;
}
.specialization .specialization-content .logo-slider img {
    position: sticky;
    top: 8rem;
    margin: 0;
}
@media (max-width: 1199.98px) {
    .specialization {
        margin: 1rem 0 3rem 0;
    }
}
/* -/ SPECIALIZATION */

/* ERROR */
.error {
    min-height: 60vh;
}
.error .error-inner {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.error p {
    font-size: 1.2rem;
    font-weight: 500;
}
.error p + p {
    font-size: 1rem;
    font-weight: normal;
}
/* -/ ERROR */

/* FOOTER */
footer {
    background-color: var(--secondary-color);
    padding: 2.5rem 0;
}
footer span {
    color: white;
    margin-bottom: .5rem;
    display: block;
    font-family: Kanit, sans-serif;
    font-weight: 600;
}
footer ul {
    list-style-type: none;
    padding-left: 0;
}
footer ul li {
    margin-bottom: .25rem;
}
footer ul li a,
footer ul li p {
    cursor: pointer;
    transition: .1s linear;
    color: rgba(255, 255, 255, 0.50);
    font-family: Onest, sans-serif;
    font-weight: 300;
    width: fit-content;
}
footer ul li a:hover,
footer ul li p:hover {
    color: white;
}

footer .footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}
footer .footer-legal img.footer-logo {
    margin-bottom: 1rem;
    width: 8rem;
}
footer .footer-legal p {
    color: rgba(255, 255, 255, 0.30);
    margin-bottom: 0;
}
footer .footer-legal .footer-socials {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}
footer .footer-legal .footer-socials a {
    height: 2.25rem;
    width: 2.25rem;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: white;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: .25rem;
    transition: .1s linear;
}
footer .footer-legal .footer-socials a:hover {
    color: var(--secondary-color);
    background-color: white;
}
/* -/ FOOTER */