* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    font-weight: 400 !important;
}

.container {
    max-width: 1600px;
    width: 100%;
    padding: 0 15px;
    display: table;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

a,
a:hover {
    text-decoration: none;
}

.my-100 {
    margin: 70px 0;
}

.text-coffe {
    color: #806000;
}

.text-blue {
    color: #002060;
}

.text-green {
    color: #70ad47;
}

.text-red {
    color: #a50023;
}

.text-sky {
    color: #009999;
}

.text-gray {
    color: #8496b1;
}

.text-pink {
    color: #ff99cc;
}

.text-yellow {
    color: #ffc006;
}

.text-rani {
    color: #d769ff;
}

.ml-50 {
    margin-left: 50px !important;
}

.see-more,
.see-more:hover {
    text-decoration: none;
    color: rgb(156, 163, 175);
    letter-spacing: 2px;
}

.achieved-number {
    font-size: 20px;
    line-height: 30px;
    /* padding-left: 10px; */
    padding: 0 40px 0 10px;
}

.card--content .text-right {
    width: 320px;
}

/* ============= Header ========== */

.header {
    background-color: black;
    padding: 10px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}


.header img,
.search-bar img {
    width: 30px;
}

.logo {
    width: 70px !important;
}

.lives_red .achieved-number {
    color: red;
}

.governance_token .achieved-number {
    color: #bd8f00;
}

.tournaments_token .achieved-number {
    color: #d9e1f1;
}

.learning_token .achieved-number {
    color: #eb7c30;
}

.user-div button {
    background-color: transparent;
    border: 0;
}

.user-div img {
    margin-left: 20px;
}

/* ======= Search Bar ====== */
.wrapper {
    background-color: #d0cece;

}

.wrapper .search {
    position: relative;
    -webkit-box-shadow: 0 10px 0px 0px #c9c8c8;
    -moz-box-shadow: 0 10px 0px 0px #c9c8c8;
    box-shadow: 0 10px 0px 0px #c9c8c8;
}

.search input {
    height: 45px;
    width: 100%;
    outline: none;
    border: none;
    background-color: #d0cece;
    font-size: 18px;

}

.search input::placeholder {
    color: #fefffd;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

.search input::-webkit-input-placeholder {
    color: #fefffd;
    font-size: 20px;
    line-height: 30px;
}

.search input:-ms-input-placeholder {
    color: #fefffd;
    font-size: 20px;
    line-height: 30px;
}

.search .icon {
    position: absolute;
    right: 20px;
    top: 0px;
    line-height: 49px;
    cursor: pointer;
}

.search-icon{
    width: 22px !important;
}

/* ======= Tabs ====== */


.card {
    /* width: 100%; */
    box-shadow: none !important;
    border: 0;
}

.tab-section {
    background-color: white;
    width: 100%;
    padding: 30px 0 20px;
    box-shadow: 0px 9px 9px rgb(232 232 232);
    -moz-box-shadow: 0px 9px 9px rgb(232 232 232);
    -webkit-box-shadow: 0px 9px 9px rgb(232 232 232);
}

.tab-section .title {
    padding-left: 15px;
    font-size: 30px;
    line-height: 40px;
}

.tab-section img {
    width: 45px;
}

.tournaments-box .sub-title {
    font-size: 30px;
    line-height: 40px;
}

.tabbable .nav-tabs .nav-item {
    display: inline-block;
    margin-left: 30px;
}

.tabbable .nav-tabs .nav-item .nav-link {
    font-size: 20px;
    /* font-weight: bold; */
    padding: 0px 40px;
    color: #b2a7a6;
    letter-spacing: 2px;
    border-radius: 3px;
    background-color: #f2f2f2;
}

.card-header {
    padding: 0px;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 0px;
}

.card-body {
    -ms-flex: 0;
    flex: 0;
    min-height: 0px;
    padding: 0px;
}

.tab-section .sub-title {
    font-size: 30px;
    line-height: 40px;
}

.nav {
    display: inherit;
}

.nav-tabs {
    border-bottom: 0px;
}


.nav-tabs .nav-link.active {
    color: #806000 !important;
    border: 1.5px solid #c9a22a;
    background-color: transparent !important;
    font-weight: bold;
}

.third-tab {
    position: relative;
}

.nav-item .position-absolute {
    top: -8px;
    left: -20px;
}

.tournaments-box {
    background-color: white;
    padding: 15px;
    border: 4px solid #d8d8d8;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 4px #d8d8d8;
    box-shadow: 0 0 4px #d8d8d8;
    width: 320px;
    margin-left: 100px;
}

.card-body .title {
    font-size: 30px;
    line-height: 40px;
    color: #002060;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 700;
}

.tournaments-box .mw-50 {
    width: 150px;
    padding: 50px 0;
}

.tournaments-box .d-flex img {
    width: 60px;
}

.tournaments-box .timing {
    font-size: 22px;
    line-height: 32px;
    color: #8faadc;
    letter-spacing: 2px;

}

.card--content:last-child {
    margin-left: 40px;
}

.card--content {
    white-space: nowrap;
}

.card1 {
    background-color: #fff;
    min-width: 100%;
    min-height: 200px;
    display: flex;
    margin-top: 50px;
    overflow-x: auto;
}

.mw-1600 {
    max-width: 1600px;
    width: 100%;
    padding: 0 15px;
    margin: auto;
}

.nav-tabs-second .nav-link.active {
    color: #009999 !important;
    border: 1.5px solid #009999;
    ;
    background-color: transparent !important;
    font-weight: bold;
}

.tournaments-box .sub-title span {
    position: relative;
}

.tournaments-box .sub-title span::before {
    position: absolute;
    content: "'";
    top: -3px;
    transform: rotate(45deg);

}

.second-tab-section {
    box-shadow: 2px 1px 18px #e6e6e6, 0px 1px 17px #e6e6e6;
}

.my-20 {
    width: 150px;
    padding: 20px 0 !important;
}

.mission-rewards {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
}

.achieved-numbers {
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    padding-left: 10px;
}

.pb-glass {
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 3px;
    border: 2px solid black;
    /* border-top-left-radius: 10% 50%;
    border-top-right-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    border-bottom-right-radius: 10% 50%; */
    border-radius: 20px;
    margin-top: 15px;
}

.pb-glass .pb-bar {
    display: block;
    width: 50%;
    height: 100%;
    border-top-left-radius: 14% 50%;
    border-top-right-radius: 14% 50%;
    border-bottom-left-radius: 14% 50%;
    border-bottom-right-radius: 14% 50%;
    background: #00b050;
}

.sm-img {
    width: 40px !important;
}

.footer {
    background-color: #44546a;
    padding: 5px 0;
    margin-top: 30px;
    position: sticky;
    bottom: 0px;
}

.footer img {
    width: 48px;
    height: 34px;
}

.footer p {
    padding-top: 5px;
    font-size: 20px;
    line-height: 30px;
}

button.position-absolute {
    top: -16px;
    right: -7px;
    border: 0;
    background-color: #44546a !important;
    border-radius: 50%;
    border: 1px solid white;
    /* padding: 15px; */
    width: 25px;
    height: 25px;
}

.home-menus {
    background-color: white;
    border: 2px solid #44546a;
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 50%;
    margin-top: -30px;
}

.home-menus img {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-title {
    background: white;
    position: absolute;
    left: -1px;
    bottom: -7px;
    padding: 0px 10px;
    border: 2px solid #44546a;
    margin-top: -30px;
}

.home-title p {
    font-size: 13px !important;
    line-height: 15px !important;
    color: #44546a;
    font-weight: 500;
    padding-top: 0px !important;

}

.modal-title {
    font-size: 20px;
    line-height: 30px;
}

.modal-dialog {
    max-width: 610px;
    margin: auto;
}

form .form-control {
    border: 0;
    background-color: #c5c5c5;
    outline: none;
}

form input::placeholder {
    color: rgb(231, 231, 231);
    font-size: 14px;
}

.modal-dialog button.submit {
    background-color: #d1cc00;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
}


@media screen and (max-width:1536px) {
    .card--content .text-right {
        width: auto;
    }
}

@media screen and (max-width:1336px) {
    .card-body .title {
        font-size: 26px;
        line-height: 36px;
    }

    .tournaments-box .d-flex img {
        width: 70px;
    }

    .tournaments-box .d-flex img {
        width: 50px;
    }
}

@media screen and (max-width:992px) {
    .tab-section .title {
        padding-left: 15px;
        font-size: 23px;
        line-height: 33px;
    }

    .tab-section img {
        width: 30px;
    }

    .tabbable .nav-tabs .nav-item .nav-link {
        font-size: 17px;
        padding: 0px 20px;
    }

    .tabbable .nav-tabs .nav-item {
        margin-left: 20px;
    }

    .nav-item .position-absolute {
        top: -2px;
        left: -20px;
    }

    .ml-50 {
        margin-left: 40px !important;
    }
}

@media screen and (max-width:767px) {
    .tournaments-box {
        width: 300px;
    }

    .tournaments-box .sub-title {
        font-size: 25px;
        line-height: 35px;
    }

    .tournaments-box .mw-50 {
        width: 120px;
        padding: 45px 0;
    }

    .footer img {
        width: 37px;
        height: 25px;
    }

    .footer p {
        padding-top: 5px;
        font-size: 15px;
        line-height: 25px;
    }

    .mission-rewards {
        font-size: 17px;
        line-height: 27px;
    }

    .sm-img {
        width: 32px !important;
    }

    .achieved-number {
        padding: 0 10px 0 10px;
    }

    .achieved-number {
        padding: 0 10px 0 10px;
        font-size: 14px;
    }

    .logo {
        width: 45px !important;
    }

}

@media screen and (max-width:575px) {
    .tab-section img {
        width: 24px;
    }

    .tab-section .title {
        padding-left: 7px;
        font-size: 17px;
        line-height: 27px;
    }

    .tabbable .nav-tabs .nav-item .nav-link {
        font-size: 14px;
        padding: 0px 12px;
    }

    .tab-section img:last-child {
        width: 20px;
    }

    .nav-item .position-absolute {
        top: -2px;
        left: -18px;
    }

    .tabbable .nav-tabs .nav-item {
        margin-left: 8px;
    }

    .modal-title {
        font-size: 15px;
        line-height: 25px;
    }

    .d-flex-575 {
        flex-direction: column;
    }

    .tournaments-box {
        margin-left: 50px;
    }

    .ml-50 {
        margin-left: 22px !important;
    }
}

@media screen and (max-width:480px) {
    .header img {
        width: 25px;
    }

    .achieved-number {
        font-size: 15px;
        line-height: 25px;
        padding-left: 3px;
    }

    .user-div img {
        margin-left: 10px;
    }

    .search input {
        height: 34px;
    }

    .search-bar img {
        width: 25px;
    }

    .search .icon {
        line-height: 37px;
    }

    .search input::placeholder {
        font-size: 15px;
        line-height: 25px;
    }

    .d-flex-480 {
        flex-direction: column;
    }

    .tabbable .nav-tabs .nav-item {
        margin-left: 15px;
    }

    .card {
        margin-top: 15px;
    }

    .tournaments-box {
        width: 220px;
        margin-left: 20px;
    }

    .tournaments-box .sub-title {
        font-size: 22px;
        line-height: 32px;
    }

    .tournaments-box .timing {
        font-size: 17px;
        line-height: 27px;
    }

    .tournaments-box .d-flex img {
        width: 30px;
    }

    .tournaments-box .mw-50 {
        width: 120px;
        padding: 30px 0;
    }


    .footer img {
        width: 26px;
        height: 18px;
    }

    .footer p {
        font-size: 12px;
        line-height: 22px;
    }

    button.position-absolute {
        width: 22px;
        height: 22px;
    }

    .home-title {
        left: -5px;
    }

    .home-menus {
        width: 50px;
        height: 50px;

        border-radius: 50%;
        margin-top: -20px;
    }

    .second-tab-section .tabbable .nav-tabs .nav-item {
        margin-left: 5px;
    }

    .tabbable .nav-tabs .nav-item .nav-link {
        font-size: 11px;
        padding: 0px 12px;
    }

    .ml-50 {
        margin-left: 29px !important;
    }
    .search-icon {
        width: 15px !important;
    }
}

@media screen and (max-width:425px) {
    .logo {
        width: 45px !important;
    }

    .footer p {
        display: none;
    }

    .footer {
        padding: 10px 0;
    }

    .home-menus img {
        top: 45%;
        left: 50%;
    }

    .pb-glass {
        width: 100%;
        height: 27px;
    }

    .tournaments-box .sub-title {
        font-size: 17px;
        line-height: 23px;
    }

    .mission-rewards {
        font-size: 14px;
        line-height: 25px;
    }

    .sm-img {
        width: 24px !important;
    }

    .tournaments-box .timing {
        font-size: 13px;
        line-height: 23px;
    }

    .achieved-numbers {
        font-size: 15px !important;
        line-height: 25px !important;
    }

    .achieved-number {
        display: none;
    }

    .header .lives_red img,
    .header .governance_token img,
    .header .tournaments_token img,
    .header .learning_token img {
        margin: 0 10px 0 0;
    }

    .tabbable .nav-tabs .nav-item .nav-link {
        font-size: 11px;
        padding: 0px 6px;
    }

    .tabbable .nav-tabs .nav-item {
        margin-left: 25px;
    }

    .second-tab-section .tabbable .nav-tabs .nav-item {
        margin-left: 15px;
    }

    .ml-50 {
        margin-left: 39px !important;
    }


}

@media screen and (max-width:400px) {
    .tournaments-box .d-flex img {
        width: 30px;
    }

    .tournaments-box {
        width: 170px;
        padding: 5px;
        margin-left: 10px;
    }

    .tournaments-box .mw-50 {
        width: 85px;
        padding: 20px 0;
    }
}

@media screen and (max-width:375px) {
    .header img {
        width: 18px;
    }

    .achieved-number {
        font-size: 12px;
        line-height: 22px;
    }

    .user-div img {
        margin-left: 3px;
    }
}