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

    body {
        background-attachment: fixed;
        height: 100%;
        width: 100%;
        background-image: url(/assets/img/background.webp);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        color: #fff;
    }

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

    ul {
        list-style: none;
    }

    .modal {
        color: #777;
    }

    .main-section {
        width: 70%;
        margin: 100px auto 0;
        padding: 10px 15px;
        background-color: rgb(0 0 0 / 69%);
    }

    .main-header {
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 70%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        margin: auto;
        padding: 0 15px;
        height: 100px;
    }

    .main-header img {
        width: 20%;
        display: block;
    }


    .first-section h1 {
        margin-bottom: 18px;
        font-weight: 400;
        font-size: 38px;
    }

    .first-section a {
        font-size: 11px;
        color: #999;
    }

    .first-section p {
        margin-right: 16px;
    }

    .first-section h6 {
        font-weight: 400;
        font-size: 21px;
        margin-bottom: 15px;
    }

    .first-section h6 i {
        color: #1e90ff;
    }

    .first-section ul li {
        margin-bottom: 6px;
        font-size: 18px;
    }

    .first-section ul {
        padding: 8px 0;
    }

    .first-section-responsive {
        padding: 20px 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        display: none;
    }


    .first-section-responsive p {
        font-size: 14x;
        text-shadow: 2px 2px #000;

    }

    .content-icon img {
        width: 8%;
    }

    table {
        width: 100%;
    }

    .responsive-table {
        display: none;
    }

    .main-table table button {
        border: 0;
        background: #1ee600;
        background: linear-gradient(180deg, #1ee600, #088205);
        padding: 12px 0;
        color: #fff;
        font-size: 20px;
        border-radius: 5px;
        margin: 0 auto;
        width: 90%;
        display: block;
        line-height: 30px;
        transition: all .25s;
    }

    .main-table table button:hover {
        background: #1ee600;
    }

    table img {
        filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5));
        width: 180px;
    }

    .main-table table tbody tr td i {
        color: #ffd700;
    }

    .main-table table tbody tr {
        height: 120px;
        transition: all .25s;
        cursor: pointer;
        vertical-align: middle;
    }

    .main-table table tbody tr h5 {
        font-size: 16px;
    }

    .main-table table tbody tr h6 {
        font-size: 13px;
        color: #000;
        font-weight: 600;
    }

    .main-table table tbody tr h4 {
        font-size: 40px;
    }

    .main-table table tbody tr p {
        color: #4369cf;
        font-size: 13px;
    }

    .CA-tables p {
        font-size: #ccc;
        font-size: 18px;
    }

    .CA-tables h2 {
        font-size: 25px;
    }

    .CA-tables td {
        padding: 18px 12px;
    }

    tr:nth-child(odd) {
        background: #f8f8f8;
    }

    tr:nth-child(even) {
        background: #fdfdfd;
    }

    tr:hover {
        background: #ededed;
    }

    .second-section {
        padding: 20px 0;
    }

    .second-section p span {
        font-weight: 700;
        color: #4369cf;
    }

    .second-section h2 {
        font-size: 28px;
    }

    footer {
        width: 70%;
        margin: auto;
        padding: 10px 15px;
        background-color: #35383c;
    }

    footer p {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 6px;
    }

    footer a {
        margin-right: 10px;
    }

    .back-to-top {
        position: fixed;
        bottom: 4%;
        right: 4%;
        border: 1px solid #ececec;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: #0000008c;
        color: #fff;
    }

    .back-to-top:hover {
        color: #fff;
    }

    .ribbon-tag {
        position: relative;
    }

    .ribbon-text {
        background: linear-gradient(90deg, #088205 0, #1ee600 100%);
    }

    .ribbon-text-position {
        position: absolute;
        top: 10px;
        left: -1px;
    }

    .ribbon .ribbon-text {
        position: relative;
        text-align: center;
        line-height: 1.5;
        text-transform: capitalize;
        color: #fff;
        font-size: 17px;
        font-weight: 400;
        padding: 3px 5px;
    }

    .ribbon .ribbon-text::after {
        content: "";
        position: absolute;
        width: 0;
        top: 0px;
        right: -31px;
        height: 100%;
        border-color: #1ee600 transparent #1ee600 #1ee600;
        border-style: solid;
        border-width: 13px 9px 13px 23px;
        ;
        border-radius: 0 1px 1px 0;
    }

    .icon-wrapper {
        border-radius: 50%;
        width: 35px;
        height: 35px;
        background: linear-gradient(to right, #dd4501, #f59d1a);
        border: 2px solid #088205;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        left: -41px;
    }

    .icon-wrapper img {
        width: 80%;
    }

    .svg-right {
        transform: rotate(180deg);
        height: 40px;
        position: absolute;
        top: 3px;
        left: -7px;
    }

    .svg-left {
        height: 40px;
        position: absolute;
        top: 2px;
        left: -47px;
    }

    .brand-link,
    .brand-link:hover {
        color: #212529;
    }

    .progress {
        width: 100px;
        height: 100px;
        font-size: 30px;
        color: #000;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        background: #07070c00;
        text-align: center;
        line-height: 200px;
        margin: auto;
    }


    .progress .overlay {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: #07070c00
    }

    .progress .title h4 {
        position: absolute;
        z-index: 8;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .progress .left,
    .progress .right {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 8px solid #1e90ff;
        border-radius: 100px 0px 0px 100px;
        border-right: 0;
        transform-origin: right;
    }

    .progress .left {
        animation: load1 1s linear forwards;
    }

    .progress:nth-of-type(2) .right,
    .progress:nth-of-type(3) .right {
        animation: load2 .5s linear forwards 1s;
    }

    .progress:last-of-type .right,
    .progress:first-of-type .right {
        animation: load3 .8s linear forwards 1s;
    }

    @keyframes load1 {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(186deg);
        }
    }

    @keyframes load2 {
        0% {
            z-index: 7;
            transform: rotate(180deg);
        }

        100% {
            z-index: 7;
            transform: rotate(270deg);
        }
    }

    @keyframes load3 {
        0% {
            z-index: 7;
            transform: rotate(180deg);
        }

        100% {
            z-index: 7;
            transform: rotate(365deg);
        }
    }


    @media (max-width: 1199.98px) {
        .main-header {
            width: 90%;
        }

        .main-section {
            width: 90%;
        }

        footer {
            width: 90%;
        }

        .first-section h1 {
            font-size: 35px;
        }

        .first-section ul li {
            font-size: 17px;
        }

        .progress {
            width: 90px;
            height: 90px;
        }

        .main-table table tbody tr h4 {
            font-size: 30px;
        }

        .progress .left,
        .progress .right {
            border: 7px solid #1e90ff;
            border-right: 0;
        }

        .svg-left {
            left: -42px;
        }

        .svg-right {
            top: 4px;
            left: 0px;
        }

        .icon-wrapper {
            left: -35px;
        }

        .ribbon-text-position {
            left: 7px;
            top: 11px;
        }

        .main-table table button {
            padding: 10px 0;
        }
    }

    @media (max-width: 991.98px) {
        .main-header {
            width: 100%;
        }

        .main-section {
            width: 100%;
        }

        footer {
            width: 100%;
        }

        thead {
            display: none;
        }

        .table-index {
            display: none;
        }

        .svg-left {
            left: 0px;
        }

        .svg-right {
            height: 38px;
            left: 42px;
        }

        .ribbon .ribbon-text {
            font-size: 16px;
        }

        .icon-wrapper {
            left: 7px;
        }

        .ribbon-text-position {
            left: 48px;
        }

        table img {
            width: 139px;
        }


        .main-table table button {
            padding: 8px 0;
            font-size: 18px;
            width: 88%;
        }

        .progress {
            width: 85px;
            height: 85px;
        }

        .first-section-responsive {
            display: flex;
        }

        .first-section-responsive h1 {
            font-size: 25px;
            text-shadow: 3px 2px 3px #000;
        }
    }
    /*
    @media (max-width: 767.98px) {
        .content-icon img {
            width: 11%;
            display: none;
        }

        .first-section-responsive p {
            font-size: 16px;
        }

        .table-big {
            display: none;
        }

        .main-table table h4 {
            color: #000;
        }

        tbody {
            background: #706e6e;
        }

        tr:nth-child(odd),
        tr:nth-child(even) {
            background: #fff;
        }

        .main-table td {
            padding: 0 10px;
        }

        tbody {
            border-bottom: 1px solid #eeeeee;
        }

        .main-header img {
            width: 37%;
        }

        .second-section h2 {
            font-size: 22px;
        }

        .CA-tables p {
            font-size: #ccc;
            font-size: 16px;
        }

        .CA-tables h2 {
            font-size: 22px;
        }
        .main-table table tbody tr p {
            text-align: center;
            margin-top: 10px;
        }
        .main-table table tbody tr p {
             text-align: center;
             margin-top: 10px;
        }
            
    }*/

/* Added in the rebuild (bonus text no longer scrolls, approved change d).
   Desktop: keep the star row on one line.
   Below 992px the old scrolling text was squeezed to a ~16px sliver, so hide it there
   to keep the phone/tablet layout the same width as before. */
@media (min-width: 992px) {
    .main-table table tbody tr td div[role="img"] {
        white-space: nowrap;
    }
}
@media (max-width: 991.98px) {
    .main-table .bonus-text {
        display: none;
    }
}