@font-face {
    font-family: 'TASA Explorer';
    src: url('../fonts/TASAExplorer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TASA Explorer';
    src: url('../fonts/TASAExplorer-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Zalando Sans';
    src: url('../fonts/ZalandoSans-SemiCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Zalando Sans';
    src: url('../fonts/ZalandoSans-Italic-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

html,

body {

    height: 100%;

    background: #fff;

}



header {

    padding: 1.4em 22em;

    height: 101px;

    /* border-bottom: 4px solid #dee2e6; */

    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);

    display: flex;

}



header img.logo {

    width: auto;

    height: 55px;

}



.wrapper {

    margin: 5em 22em;

}



.reg-page .wrapper {

    margin: 3.5em 12em 5em;

}



.row {

    margin-bottom: 2em;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: 'TASA Explorer', 'Syne', sans-serif;

}



body,

a,

li,

p,

span,

strong {

    font-family: 'Zalando Sans', 'DM Sans', sans-serif;

}



.heading {

    margin-bottom: 0.3em;

}



label span,

.required-star {

    font-weight: 500;

    color: red;

}



h3.heading>small>span {

    color: #8fc740;

}



.row.cart-options {

    margin: 0 0 1em;

    display: none;

    /* remove this to enable multiple registration option in checkout page */

}



form .row {

    margin-bottom: 0;

}



.card input.disabled,

.card textarea.disabled,

.card select.disabled {

    pointer-events: none;

    user-select: none;

    opacity: 0.6;

}



label.error {

    font-size: 11px;

    font-weight: 600;

    color: #ff3245;

    margin-bottom: 0 !important;

}



.form-group {

    margin-bottom: 0.5rem;

}



.modal.checkoutModal .modal-body .student-details * {

    font-size: 14px;

    margin: 0;

}



.modal.checkoutModal .modal-body .student-details {

    display: flex;

    align-items: start;

    gap: 2.5rem;

}



strong.sd-name {

    font-size: 16px !important;

    color: #8fc740;

    font-weight: 600;

}



.student-details article.sd-address {

    margin-top: 3px !important;

}



.modal.checkoutModal .modal-header {

    border-bottom: none !important;

    padding-bottom: 0 !important;

}



.modal.checkoutModal .modal-title {

    font-size: 13px;

    color: #505050;

}



.modal.checkoutModal .modal-body hr {

    width: 60px;

    margin: 20px 0 15px;

    border: none;

    border-bottom: 1px dashed #cbcbcb;

}



.modal.checkoutModal .modal-body h5 {

    font-size: 12px;

    color: #626262;

    margin-bottom: 15px;

}



.modal.checkoutModal .modal-body h4 {

    font-size: 18px;

    font-weight: 600;

}



.modal.checkoutModal .modal-body h3 {

    font-size: 24px;

    color: #8fc740;

    font-weight: 800;

}



.checkout-details {

    /* display: flex; */

    /* align-items: end; */

    /* flex-direction: column;

    gap: 5px; */

    margin-top: 1em;

}



.price-info {

    text-align: right;

    margin-bottom: 1rem;

}



.accordion .card:not(:last-child) {

    margin-bottom: 8px;

}



div.accordion .card-header {

    padding: 5px;

    border-bottom: none !important;

}



div.accordion .card-body {

    padding: 15px;

}



div.accordion .card-header button {

    font-size: 12px;

    text-decoration: none;

    color: black;

    font-weight: 600;

}



.payment-options {

    background: #f3f3f3;

    padding: 12px;

    border-radius: 6px;

}



.payment-options h2 {

    font-size: 14px;

    margin-bottom: 1rem;

}



.payment-options #card-element {

    padding: 10px;

    width: 100%;

}



button.stripe-btn {

    background: #635bff !important;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    margin-top: 0 !important;

    width: 100%;

    padding: 7px;

    height: 46px;

}



button.stripe-btn img {

    width: 48px;

    margin-left: 5px;

}



article.basic-details i.fa {

    font-size: 13px !important;

    margin-right: 2px !important;

    color: #8fc740;

}



span.cd-total {

    font-size: 12px;

    font-weight: 500;

    color: gray;

}



.waiting-content {

    display: none;

}



.waiting-content>div {

    height: 175px;

    display: flex;

    margin: 0 3em;

    flex-direction: column;

    justify-content: center;

}



.waiting-content p {

    color: #ff5151;

    font-weight: 500;

}



.waiting-content span {

    color: #7a7a7a;

    font-weight: 500;

}



h4.success {

    font-size: 27px;

    color: #8fc740;

}



h4.error {

    font-size: 27px;

    color: #dc3545;

}



p.action-text {

    margin-bottom: 2em;

}



table.success-data {

    min-width: 60%;

    margin-bottom: 2em;

}



::placeholder {

    color: #ced4da !important;

}



th {

    width: 35%;

    font-weight: 500;

}



th,

td {

    padding: 10px 15px;

    border: 3px solid #e9ecef;

}



.cards .card {

    margin-bottom: 1em;

    border-top: 5px solid #8fc740;

}



.display_price {

    border: 1px solid #dfdfdf;

    border-radius: 5px;

    padding: 0px 5px 5px;

}



.counter span {

    cursor: pointer;

}



.counter {

    display: inline-block;

    margin: 5px;

    background: #dfdfdf;

    padding: 2px 4px;

    border-radius: 30px;

}



.labels {

    position: relative;

    top: 3px;

}



.labels label {

    margin: 0;

    font-size: 11px;

    font-weight: 500;

    color: #6c757d;

}



label.one {

    position: relative;

    left: 1.5em;

}



label.two {

    position: relative;

    left: 12em;

}



label.three {

    position: relative;

    left: 17em;

}



span.actual-price span {

    color: #545b62;

}



span.actual-price {

    display: inline-block;

    font-size: 24px;

    position: relative;

    top: 5px;

    margin: 0px 5px;

    padding: 0px 15px 2px;

    font-weight: 600;

    background: #dfdfdf;

    color: #a0a7ae;

    border-radius: 30px;

}



h4.total span {

    color: #8fc740;

}



h4.total {

    display: inline-block;

    font-size: 32px;

    font-weight: 700;

    color: #6c757d;

    position: relative;

    top: 7px;

    margin: 0 5px;

}



button.btn.disabled {

    pointer-events: none;

}



.card .error-message span {

    display: block;

    font-size: 14px;

    font-weight: 600;

    border-radius: 3px;

    padding: 8px 15px;

    margin: 0 20px 20px 20px;

}



.card .error-message span.text-success {

    background: #f8ffea;

    border: 2px solid #28a745;

}



.card .error-message span.text-danger {

    background: #ffe4e4;

    border: 2px solid #dc3545;

}



.counter .minus {

    background: #ff4254;

    border: 4px solid #ff2828;

    color: #fff;

}



.counter .plus {

    background: #39df5f;

    border: 4px solid #0ad939;

    color: #fff;

}



.counter .minus,

.counter .plus {

    width: 30px;

    height: 30px;

    border-radius: 30px;

    padding: 0px 0px 0px 0px;

    line-height: 18px;

    font-weight: 700;

    display: inline-block;

    vertical-align: middle;

    text-align: center;

    user-select: none;

}



.counter input {

    background: transparent;

    height: 34px;

    width: 50px;

    text-align: center;

    font-size: 24px;

    color: #545b62;

    position: relative;

    font-weight: 600;

    top: -2px;

    border: none;

    display: inline-block;

    vertical-align: middle;

    outline: none;

}



ul.menu-list {

    list-style: none;

    display: block;

    margin: 15px 5px;

}



li.menu-item {

    display: inline-block;

    margin: 0px 14px;

}



li.menu-item a {

    color: #444;

    font-size: 15px;

}



li.menu-item a:hover {

    text-decoration: none;

    color: #8fc740;

}



ul.social-list {

    list-style: none;

    display: block;

    margin: 10px 15px;

    padding: 0;

}



ul.sb-social-list {

    display: none;

}



li.social-item {

    display: inline-block;

    margin: 0px 5px;

    background: #d0d0d0;

    width: 35px;

    height: 35px;

    text-align: center;

    border-radius: 50px;

    cursor: pointer;

}



li.social-item a {

    font-size: 14px;

    vertical-align: sub;

    color: #444;

}



section.breadcrumb {

    margin: 0;

    background-color: rgba(0, 0, 0, .07);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    z-index: -1;

}



section.breadcrumb::before {

    content: "";

    position: absolute;

    display: block;

    left: 0;

    top: 0;

    bottom: 0;

    right: 0;

    background: #FFF;

    opacity: .75;

}



.page-title {

    margin: 2em 22em;

    z-index: 0;

}



.page-title:after {

    content: "";

    background: #8fc740;

    width: 4em;

    height: 2px;

    position: absolute;

    margin-top: 8px;

}



section.breadcrumb h1 {

    font-size: 48px;

    font-weight: 700;

}



section.breadcrumb h4 {

    font-size: 18px;

    font-weight: 400;

    font-family: 'Zalando Sans', 'DM Sans', sans-serif;

}



.course-logo {

    border: 2px solid #97969b4d;

    padding: 15px 20px;

    margin-bottom: 15px;

    border-radius: 10px;

}



.course-logo img {

    width: 100%;

}



.course-title {

    margin-top: 18px;

}



.course-title:after {

    content: "";

    background: #444;

    width: 4em;

    height: 2px;

    position: absolute;

    margin-top: 5px;

}



.course-title h2 {

    font-size: 35px;

}



.course-title h4 {

    font-size: 18px;

    font-weight: 400;

    font-family: 'Zalando Sans', 'DM Sans', sans-serif;

    margin-bottom: 15px;

}



.course-item h3.course-name {

    margin-bottom: 15px;

}



h3.course-name a {

    color: #8fc740;

    font-size: 21px;

    font-family: 'TASA Explorer', 'Syne', sans-serif;

    font-weight: 600;

    text-decoration: none;

}



.course-description {

    margin-bottom: 1.5em;

}



.course-price {

    font-size: 24px;

    font-weight: 600;

    color: #8fc740;

}



.course-item {

    margin-bottom: 1em;

}



.course-item strong {

    color: #444;

    font-family: 'Zalando Sans', 'DM Sans', sans-serif;

    font-size: 14px;

    font-weight: 600;

}



a.course-register-button {

    margin-top: .7em;

    padding: 8px 16px;

    border-radius: 5px !important;

    border: 2px solid #8fc740 !important;

    background-color: #8fc740 !important;

    text-decoration: none;

    color: #fff;

    font-size: 12px !important;

    font-weight: 600;

    position: relative;

    bottom: 5px;

    left: 10px;

}



footer {

    width: 100%;

    overflow-x: hidden;

    background: #2d4a14;

    position: relative;

    bottom: 0;

    left: 0;

    right: 0;

    color: #fff;

    padding: 15px;

}



footer .wrapper {

    margin: 0 22em;

}



footer ul {

    display: block;

    list-style: none;

}



footer ul li {

    display: inline-block;

    margin: 0 10px;

}



footer ul li a {

    color: #fff;

    text-decoration: none !important;

    font-size: 14px !important;

}



a.back-to-top:after {

    content: "\f102";

    font-family: FontAwesome;

    color: #ffffff;

    font-size: 1.2em;

    margin: 0 0 0 5px;

}



footer ul li a:hover,

a.back-to-top:hover:after {

    color: #ffa2ad;

}



footer p,

footer ul,

footer .row {

    margin: 0;

}



.schedule-item {

    background: #f7ffe8;

    padding: 1.5em 2em;

    border: 3px solid #8fc740;

    border-radius: 10px;

    margin-bottom: 2em;

}



.schedule-item.future {

    background: #fff8e2;

    border: 3px solid #f1cf84;

    opacity: 0.7;

    pointer-events: none;

    user-select: none;

}



.schedule-item.future::after {

    content: "UPCOMING";

    position: absolute;

    top: 0px;

    right: 15px;

    background: red;

    font-size: 11px;

    padding: 3px 7px;

    color: #fff;

    font-weight: 700;

    border-radius: 0 8px;

    box-shadow: -2px 2px 3px 0px #00000061;

}



.schedule-item h2 {

    font-weight: 600;

    color: #495057;

    font-size: 16px;

    position: relative;

}



.schedule-item.future h2 {

    color: #b9873d;

}



.schedule-item.future a {

    text-decoration: none;

}



.schedule-item h4 {

    font-size: 24px;

    color: #4b6919;

    margin-bottom: .3rem;

    margin-top: 1.6rem;

}



.schedule-item h2::after {

    content: "";

    width: 40px;

    height: 2px;

    background: #8fc74055;

    position: absolute;

    left: 0;

    bottom: -15px;

}



.schedule-item p {

    margin: 0;

}



.schedule-item a {

    text-decoration: none;

}



.no-items {

    background: #e9ecef;

    height: 300px;

    border-radius: 10px;

    text-align: center;

    vertical-align: middle;

}



.no-items p {

    padding: 8em;

}



span.menu-trigger {

    display: none;

    position: absolute;

    top: 27px;

    left: 20px;

}



span.menu-trigger a:before {

    content: "";

    background: black;

    width: 27px;

    height: 2px;

    position: absolute;

}



span.menu-trigger a:after {

    content: "";

    background: black;

    width: 27px;

    height: 2px;

    position: absolute;

    top: 12px;

}



span.menu-trigger a span:after {

    content: "";

    background: black;

    width: 27px;

    height: 2px;

    position: absolute;

    top: 24px;

}



.sidebar-close {

    display: none;

}



img.sidebar-logo {

    display: none;

}



li.menu-item.active:after {

    content: "";

    width: 100%;

    height: 3px;

    background: #8fc740;

    display: block;

    position: relative;

    margin-top: 12px;

}



/* div#paypal-button {

    text-align: center;

    margin: 2em 0;

} */



.payment-options form label {

    font-size: 13px;

}



div#card-errors:empty {

    display: none;

}



div#card-errors {

    font-size: 12px;

    text-align: left;

    font-weight: 500;

    color: #ff5252;

    background: #ffefef;

    padding: 5px 8px 6px;

    margin: 8px 5px 0;

    border-radius: 5px;

}



.action-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}



.flex {

    display: flex;

    align-items: center;

    justify-content: right;

    gap: 10px;

}



.waiting-loader {

    display: flex;

    align-items: center;

    column-gap: 10px;

}



.waiting-loader span {

    font-size: 12px;

    font-weight: 600;

    color: #818181;

}



.waiting-loader i {

    color: #8fc740;

    font-size: 24px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



.success-page {

    min-height: 61vh;

    background: #f2fff5;

    padding: 4rem;

    border-radius: 8px;

}



.cancel-page {

    min-height: 61vh;

    background: #fff6f7;

    padding: 4rem;

    border-radius: 8px;

}



.zoid-outlet {

    animation: none !important;

    transition: none !important;

}



.hellobar {

    background: #ffad0a;

    padding: 8px;

    color: #fff;

    font-weight: 800;

    text-shadow: -1px 1px 7px #6b6b6b;

    text-align: center;

    box-shadow: 0px 18px 20px #0000001f;

}



.hellobar p {

    margin-bottom: 2px;

}



.hellobar a {

    color: #734e1e !important;

    text-decoration: underline !important;

    cursor: pointer !important;

}



@media screen and (max-width: 1750px) {

    header {

        padding: 1.4em 17em;

    }



    .page-title {

        margin: 2em 17em;

    }



    .wrapper {

        margin: 5em 17em;

    }



    footer .wrapper {

        margin: 0 15em;

    }

}



@media screen and (max-width: 1700px) {

    header {

        padding: 1.4em 10em;

    }



    .page-title {

        margin: 2em 10em;

    }



    .wrapper {

        margin: 5em 10em;

    }



    footer .wrapper {

        margin: 0 8em;

    }

}



@media screen and (max-width: 1500px) {

    header {

        padding: 1.4em 2em;

    }



    .page-title {

        margin: 2em 5em;

    }



    .wrapper {

        margin: 5em 5em;

    }



    footer .wrapper {

        margin: 0 3em;

    }

}





@media screen and (max-width: 480px) {

    .container-fluid {

        overflow-x: hidden;

    }



    li.menu-item.active a {

        color: #8fc740;

        font-weight: 500;

    }



    li.menu-item.active:after {

        display: none;

    }



    ul.sb-social-list {

        list-style: none;

        display: block;

        margin: 30px 15px 10px;

        padding: 0;

        text-align: center;

    }



    li.sb-social-item {

        display: inline-block;

        margin: 0px 5px;

        background: #d0d0d0;

        width: 35px;

        height: 35px;

        text-align: center;

        border-radius: 50px;

        cursor: pointer;

    }



    li.sb-social-item a {

        font-size: 14px;

        vertical-align: sub;

        color: #444;

    }



    .sidebar {

        display: none;

        background: white;

        height: 100%;

        width: 320px;

        position: absolute;

        left: 0;

        top: 0;

        bottom: 0;

        z-index: 1;

        box-shadow: 0px 0px 10px #00000024;

    }



    .sidebar-close {

        display: block;

        background: white;

        text-decoration: none;

        width: 32px;

        height: 32px;

        text-align: center;

        padding: 4px;

        position: absolute;

        top: 0;

        left: 0;

        margin: 15px;

        border-radius: 50px;

        box-shadow: 1px 1px 8px 2px #00000024;

    }



    img.sidebar-logo {

        display: block;

        width: 70%;

        margin: 2em 3em 1em;

    }



    ul.menu-list {

        padding: 0 !important;

    }



    span.menu-trigger {

        display: block;

    }



    footer {

        padding: 15px 5px;

    }



    .wrapper {

        margin: 1.5em 0;

    }



    .reg-page .wrapper {

        margin: 1.5em 0 3em;

    }



    header {

        padding: 1em;

        height: 84px;

    }



    header img.logo {

        width: auto;

        height: 38px;

    }



    a.brand-img {

        position: relative;

        left: 50px;

        top: 5px;

    }



    .no-items p {

        padding: 4em;

    }



    .no-items {

        height: 175px;

        margin-bottom: 2em;

    }



    .page-title {

        margin: 1em;

        z-index: 0;

    }



    ul.social-list {

        display: none;

    }



    li.menu-item {

        padding: 20px 0;

        border-bottom: 1px solid #efefef;

        display: block;

    }



    .sidebar-close a i {

        color: #6c757d;

        font-size: 18px;

    }



    footer .wrapper {

        margin: 0;

    }



    section.breadcrumb h1 {

        font-size: 32px;

    }



    section.breadcrumb h4 {

        font-size: 14px;

    }



    p.copyright {

        position: absolute;

        top: 2px;

        font-size: 13px;

    }



    footer ul li:not(:last-child) {

        display: none;

    }



    footer ul {

        text-align: right;

    }



    footer ul li a {

        position: relative;

        top: -2px;

        font-size: 12px !important;

    }



    .course-logo {

        margin: 10px;

    }



    .course-title {

        margin: 1em 15px 3em;

    }



    .course-item {

        margin: 0 30px 3em;

    }



    .row {

        margin-bottom: 0em;

    }



}