@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #020617 !important;
    color: #fff !important;
    overflow-x: hidden;
    padding-bottom: 50px;
}

a {
    text-decoration: none;
    display: inline-block;
}


h1 {
    text-align: center;
    color: #fff !important;
}

.courses {
    border-left: 2px solid #fff;
    padding-left: 80px;
    font-size: 22px
}

.summary {
    font-size: 18px
}

@media (max-width: 792px) {
    .courses {
        padding-left: 0;
        border-left:0;
        border-top:2px solid #fff;
        padding-top: 50px;
    }

    .summary {
        padding-bottom: 30px;
    }
}

.courses p {
    font-size: 22px;
}

@media (max-width: 792px) {
    .courses p {
        font-size: 18px;
    }

    .courses ul {
        font-size: 18px;
    }

    .courses ul li {
        font-size: 18px;
    }
}

.swal2-buttonswrapper {
    flex-direction: row-reverse !important;
}

.swal2-container button {
    background-color: #ff3d00 !important;
    color:#fff !important;
}

.swal2-container a {
    text-decoration: none;
    color:#fff;
}

.summary a {
    color: #fff;
    text-decoration: none;
}

.summary-curent {
    color:#ff3d00 !important;
}

.quiz-container {
    border: 2px solid #fff;
    padding: 2rem;
    border-radius: 10px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 792px) {
    .quiz-container {
        padding: 1rem;
    }
}

.question {
    margin-bottom: 1rem;
}

.choices label {
    display: block;
    margin-bottom: 0.5rem;
}

@media (max-width: 792px) {

    .question {
        font-size: 18px;
    }

    .choices label {
        font-size: 18px;
    }
}

.submitquizz {
    background-color: #ff3d00;
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

iframe {
    max-width: 100% !important;
}

.input-degree {
    padding: 5px;
    display: none;
}


.text-underline {
    text-decoration: underline !important;
}

.degree {
    width: fit-content;
    justify-content: center;
    background-color: #ff3d00;
    color:#fff;
    padding: 10px;
    border:none;
    border-radius: 5px;
    font-weight: bold;
    display: none;
}

.degree-alt {
    width: fit-content;
    display: flex;
    justify-content: center;
    background-color: #ff3d00;
    color:#fff;
    padding: 10px;
    border:none;
    border-radius: 5px;
    font-weight: bold;
}

.swal2-container .swal2-cancel{
    background-color: #020617 !important;
}

section .custom-card {
    position: relative;
    z-index: 555;;
    box-shadow: 0.063em 0.75em 1.563em rgba(0, 0, 0, 0.78);
    border-radius: 2.25rem;
    height: 100%;
}
.custom-card {
    transition: all ease-in-out 200ms;
}

.custom-card:hover {
    transform: scale(1.1);
}

section .custom-card::before {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.25rem;
    z-index: -1;
    border: 0.155rem solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

section .custom-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 0.5em 0em 1.5em;
}

section .custom-card-header .date {
    color: #ddd;
}

.custom-card a {
    text-decoration: none;
}

section .custom-card-header svg {
    color: #fff;
    width: 2.5rem;
    cursor: pointer;
}

section .custom-card-body {
    width: 100%;
    display: block;
    padding: 0.7em 1.25em 0.5em 1.5em;
}

section .custom-card-body h3 {
    color: #fff;
    font-size: 1.375rem;
    margin-top: 0.625em;
    margin-bottom: 0.188em;
    text-transform: capitalize;
    font-weight: 600;
}

section .custom-card-body p {
    color: #ddd;
    font-size: 1rem;
    letter-spacing: 0.031rem;
}

section .custom-card-body .custom-progress {
    margin-top: 0.938rem;
}

section .custom-card-body .custom-progress .progress-bar {
    position: relative;
    width: 100%;
    background: #363636;
    height: 0.313rem;
    display: block;
    border-radius: 3.125rem;
}

section .custom-card-body .custom-progress .progress-bar:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: block;
    border-radius: 3.125rem;
}

section .custom-card-body .custom-progress span:first-of-type {
    color: #fff;
    text-align: left;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 0.313rem;
}

section .custom-card-body .custom-progress span {
    margin-top: 0.313rem;
    text-align: right;
    display: block;
    color: #fff;
}

section .custom-card-footer {
    width: 100%;
    border-top: 0.063rem solid #292929;
    display: flex;
    justify-content: space-between;
    padding: 0.7em 1.25em 0.5em 1.5em;
    background: #151419;
    border-bottom-left-radius: 2.25rem;
    border-bottom-right-radius: 2.25rem;
}

section .custom-card-footer ul {
    display: flex;
    align-items: center;
}

section .custom-card-footer ul li {
    list-style-type: none;
    display: flex;
    margin-right: -0.625rem;
}

section .custom-card-footer ul li img {
    border-radius: 50%;
    width: 1.875rem;
    height: 1.875rem;
    object-fit: cover;
}

section .custom-card-footer .btn-add {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

section .custom-card-footer .btn-add svg {
    width: 1rem;
}

section .custom-card-footer .btn-countdown {
    background: #222127;
    color: #fff;
    border-radius: 2em;
    padding: 0.625rem 1.5rem;
}

section .red {
    background: radial-gradient(ellipse at right top, #a63d2a82 0%, #151419 47%, #151419 100%);
}

section .red:before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #a63d2a) border-box;
}

section .red .btn-add {
    background: #ff3d00;
}

section .red .progress-bar:after {
    width: var(--width);
    background: #ff3d00;
}

section .red .btn-countdown:hover {
    background: #ff3d00;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ff3d00;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.logomain {
    display: block;
    margin: 50px auto 0 auto;
    width: 100px;
    position: absolute;
    top:0;
    left:16%;
}

@media(max-width: 792px){
    .logomain {
        width: 40px;
        left:5%;
    }
}

.cert-container {
    display: block;
    padding: 3px;
    border: 1px solid #6f6f6f;
    width: 0;
    background-image: url(images/mt_icon_grayscale.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    background-color: #020617;
    position: relative;
    transform: translateX(-5000px);
    transform: translateY(-5000px);
    height: 0;
}

.certif-bg {
    position: absolute;
    top:0;
    left:0;
}

#cert-id {
    position: absolute;
    margin-top: 1rem;
    font-size: 25px;
    left: 0;
    width: 100%;
    text-align: center;
    top: 37%;
}

.lessons-completed {
    list-style: none!important;
    padding-inline-start: 0!important;
    padding-left: 0 !important;
}

.lessons-completed li {
    font-size: 14px;
}

@media(max-width: 792px){
    .lessons-completed li {
        font-size: 12px;
    }
}

.lessons {
    position: absolute;
    margin-top: 1rem;
    font-size: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
}

/* Certificate Outer Border (Gray) */
.border-gray {
    padding: 5px;
    border: 3px solid #58595B;
}

/* Certificate Inner Border (red) */
.border-red {
    border: 3px double #CE202F;
}

.courses a {
    color:#fff !important;
}

.white-link {
    color:#fff;
}

.content {
    padding: 20px;
    text-align: center;
}


.main-copytext{
    text-align: left;
    color:#020617;
}

.congrats-copytext {
    margin-bottom: 25px;
}

.flameboi {
    position: absolute;
    bottom:-70px;
    right: -30px;
}

.course-copytext {
    margin-bottom: 22px;
}

.congrats-copytext h2 {
    text-align: center;
}

.congrats-copytext h3 {
    text-align: center;
}

.address-copytext {

}


#mt-site {
    color: #CE202F;
    font-size: 8pt;
}

#user-id {
    line-height: 10%;
}

#course-id {
    line-height: 10%;
}


.section-modal {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 50em;
    margin-inline: auto;
    gap: 3.25rem;
    position: relative;
    z-index: 10;
    align-items: center;
    padding: 5em 0;
}
.section-modal .card {
    position: relative;
    z-index: 555;
    max-width: 38rem;
    min-height: 20rem;
    width: 90%;
    display: grid;
    place-content: center;
    place-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0.063em 0.75em 1.563em rgba(0, 0, 0, 0.78);
    border-radius: 1rem;
}

.section-modal .card-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.8em 0.8em 0em 1.5em;
}
.section-modal .card-header .close {
    color: #d9d9d9;
    width: 1.5rem;
    cursor: pointer;
}
.section-modal .card-body {
    width: 100%;
    padding: 0.7em 2em 0.5em 2em;
    text-align: left;
}
@media screen and (min-width: 33.75rem) {
    section .card-body {
        display: flex;
        text-align: unset;
    }
}
.section-modal .card-body .icon {
    width: 3rem;
}
@media screen and (min-width: 33.75rem) {
    .section-modal .card-body .icon {
        width: 4rem;
    }
}
@media screen and (min-width: 33.75rem) {
    .section-modal .card-body > div {
        margin-left: 2em;
    }
}
.section-modal .card-body h2 {
    text-align: left;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.035em;
    margin-top: 0.625em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

@media (max-width: 792px) {
    .section-modal .card-body h2 {
        text-align: center;
    }
}
.section-modal .card-body p {
    text-align: left;
    color: #cccccc;
    font-size: 1rem;
    letter-spacing: 0.031rem;
}

.certif-bg  {
    max-width: 100%;
 }

@media (max-width: 792px) {
    .section-modal .card-body p {
        text-align: center;
    }

    .modal-logo {
        display: block;
        margin: 0 auto;
    }

    .section-modal .card {
        min-height: 30rem;
    }
}
.section-modal .card .modal-progress {
    width: 100%;
    margin-top: 0.938rem;
}
@media screen and (min-width: 33.75rem) {
    .section-modal .card .modal-progress {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.section-modal .card .modal-progress > div {
    width: 100%;
}
.section-modal .card .modal-progress .progress-bar {
    position: relative;
    width: 100%;
    background: #363636;
    height: 0.35rem;
    display: block;
    border-radius: 3.125rem;
}
.section-modal .card .modal-progress .progress-bar:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: block;
    border-radius: 3.125rem;
}
.section-modal .card .modal-progress span:first-of-type {
    color: #cccccc;
    text-align: right;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 0.313rem;
    font-size: 0.9rem;
}
.section-modal .card .btn-first,
.section-modal .card .btn-second {
    background: #222127;
    color: #fff;
    border-radius: 0.25em;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    font-size: 0.9rem;
}
@media screen and (min-width: 33.75rem) {
    .section-modal .card .btn-first,
    .section-modal .card .btn-second {
        padding: 0.625rem 2.2rem;
    }
}
.section-modal .card .btn-second {
    margin-left: 2em;
}
.section-modal .blue {
    background: radial-gradient(ellipse at right top, #00458f8f 0%, #151419 45%, #151419 100%);
    opacity: 0.95;
    transition: opacity 0.25s ease-in;
}
.section-modal .blue:hover {
    opacity: 1;
}
.section-modal .blue .icon {
    color: #5a81ff;
}
.section-modal .blue:before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #1890ff) border-box;
}
.section-modal .blue .progress-bar:after {
    width: 68%;
    background: #5a81ff;
    background: linear-gradient(90deg, #1d1da3 0%, #4242cf 60%, #5a81ff 100%);
}
.section-modal .blue .btn-first {
    margin-top: 1.5em;
    margin-bottom: 1em;
}
@media screen and (min-width: 33.75rem) {
    .section-modal .blue .btn-first {
        margin-left: 2.5em;
        margin-top: 0;
        margin-bottom: 0;
    }
}
.section-modal .blue .btn-first:hover {
    background: #5a81ff;
}
.section-modal .green {
    background: radial-gradient(ellipse at right top, #107667ed 0%, #151419 47%, #151419 100%);
    opacity: 0.95;
    transition: opacity 0.25s ease-in;
}

.modal-logo {
    margin-top: 1rem;
    height: 100px;
}
.section-modal .green:hover {
    opacity: 1;
}
.section-modal .green .icon {
    color: #2eea9d;
}
.section-modal .green .card-body {
    align-items: center;
}
.section-modal .green:before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #01c3a8) border-box;
}
.section-modal .green .progress-bar:after {
    width: 90%;
    background: #2eea9d;
}
.section-modal .green .btn-first {
    margin-left: 0;
}
.section-modal .green .btn-first:hover {
    background: #ccff00;
    color: #111;
}
.section-modal .green .btn-second:hover {
    background: #2eea9d;
}
.section-modal .red {
    background: radial-gradient(ellipse at right top, #a63d2a82 0%, #151419 47%, #151419 100%);
    opacity: 0.95;
    transition: opacity 0.25s ease-in;
}
.section-modal .red:hover {
    opacity: 1;
}
.section-modal .red .icon {
    color: #fe6c9b;
}
.section-modal .red .card-body {
    align-items: start;
}
.section-modal .red:before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #a63d2a) border-box;
}
.section-modal .red .btn-first {
    margin-left: 0;
}
.section-modal .red .btn-first:hover {
    background: #ff3d00;
    color: #fff;
}
.section-modal .red .btn-second:hover {
    background: #fe6c9b;
}

.modal-flameboi {
    width: 80px;
    height: 80px;
}

.section-modal {
    position: fixed;
    top:50%;
    left:50%;
    z-index: 999;
    transform: translate(-50%,-50%);
    display: none;
}

.section-modal:before {
    position: absolute;
    content:'';
    width: 100vw;
    height: 100vh;
    background-color: #020617;
    opacity: 0.8;
}

.section-modal--active {
    display: flex;
}

.mo-fire {
    width: 90px;
    height: auto;
    position: absolute;
    left: 78%;
    /* margin-left: -100px; */
    top: -45px;
    z-index: -10;
    pointer-events: none;
}

.summary {
    position: relative;
}

.mo-fire-summary {
    top:initial;
    left:0;
    bottom:-180px;
}

@media (max-width: 792px) {
    .mo-fire-summary {
        top: 0;
        right: 20px;
        left: initial;
    }
}

.mo-fire svg {
    width: 100%;
    height: auto;
    position: relative
}
.flame {
    animation-name: flamefly;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0;
    transform-origin: 50% 50% 0;
}
.flame.one {
    animation-delay: 1s;
    animation-duration: 3s;
}
.flame3.two{
    animation-duration: 5s;
    animation-delay: 1s;
}

.flame-main {
    animation-name: flameWobble;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.flame-main.one {
    animation-duration: 4s;
    animation-delay: 1s;
}
.flame-main.two {
    animation-duration: 3s;
    animation-delay: 2s;
}
.flame-main.three {
    animation-duration: 2.1s;
    animation-delay: 3s;
}
.flame-main.four {
    animation-duration: 3.2s;
    animation-delay: 4s;
}
.flame-main.five {
    animation-duration: 2.5s;
    animation-delay: 5s;
}
@keyframes flameWobble {
    50% {
        transform: scale(1,1.2) translate(0, -30px) rotate(-2deg);
    }
}
@keyframes flamefly {
    0%{
        transform: translate(0) rotate(180deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-20px, -100px) rotate(180deg);
        opacity: 0;
    }