/* ============= mobile ============= */

@media only screen and (max-width: 1800px) {
    .bg .content-box h1 {
        font-size: 50px;
    }
    .bg .content-box .logo-title {
        width: 450px;
    }
    .bg .content-box .logo {
        width: 150px;
    }
    .bg .content-box .title {
        width: 100px;
    }
    .bg .content-box .title-2 {
        margin-top: -15px;
        margin-left: -10px;
        width: 80px;
    }
}

@media only screen and (max-width: 1440px) {
    .set-w {
        max-width: 100%;
        flex: auto;
    }
    .block {
        height: auto;
    }
}

@media only screen and (max-width: 1200px) {
    ::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: transparent;
    }
    .content .flex-cus {
        flex: 0 0 76%;
    }
    .bg .content-box h1 {
        font-size: 46px;
    }
    .bg .content-box .logo-title {
        width: 400px;
    }
    .bg .content-box .logo {
        width: 130px;
    }
    .bg .content-box .title {
        width: 100px;
    }
    .bg .content-box .title-2 {
        margin-top: -15px;
        margin-left: -10px;
        width: 80px;
    }
}

@media only screen and (max-width: 768px) {
    /* ============================== */
    /* =========== header =========== */
    /* ============================== */
    .header {
        padding: 15px 0;
    }
    .header .logo-box .logo-info img {
        width: 90%;
        height: 100%;
        margin-right: 5px;
    }
    .header .logo-box .logo-info h2 {
        font-size: 16px;
    }
    .header .account-info {
        width: 100%;
    }
    .dropdown button {
        font-size: 14px;
    }
    .dropdown-menu {
        transform: translate3d(-7px, 42px, 0px) !important;
    }
    /* ================================ */
    /* =========== content 1 content-box ========== */
    /* ================================ */
    .bg {
        background: url("../img/bg.png");
        background-size: cover;
        padding-top: 20px;
        padding-bottom: 0;
    }
    .bg .content-box h1 {
        font-size: 24px;
    }
    .bg .content-box .logo-title {
        width: 350px;
    }
    .bg .content-box .logo {
        width: 90px;
    }
    .bg .content-box .title {
        width: 90px;
    }
    .bg .content-box .title-2 {
        margin-top: -15px;
        margin-left: -8px;
        width: 70px;
    }
    .bg .content-box h2 {
        font-size: 18px;
    }
    /* ================================ */
    /* =========== content 2 price-box ========== */
    /* ================================ */
    .content {
        margin-top: 0;
    }
    .content .price-box {
        margin-bottom: 50px;
    }
    .content .price-box h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .content .graph {
        padding: 40px 30px;
    }
    .content .graph .icon img {
        width: 40px;
    }
    .content .graph img {
        margin: 10px 0 30px;
    }
    .content .price-box .graph .price {
        font-size: 36px;
    }
    .content .price-box .graph p {
        font-size: 14px;
    }
    .content .price-box .graph .round {
        font-size: 14px;
        margin-top: 10px;
    }
    .content .price-box .btn {
        font-size: 18px;
    }
    /* ================================ */
    /* =========== content 3 intro-box ========== */
    /* ================================ */
    .content .intro iframe {
        height: 180px;
        width: 95%;
    }
    .content .intro img {
        width: 110%;
        margin-left: -5%;
        margin-bottom: 30px;
    }
    .content .intro h2 {
        font-size: 24px;
    }
    .content .intro h3 {
        font-size: 18px;
    }
    .content .intro p {
        text-align: left;
        font-size: 12px;
    }
    .content .intro .btn {
        font-size: 18px;
    }
    /* ================================ */
    /* =========== why ========== */
    /* ================================ */
    .why {
        padding: 40px 10px 20px;
        margin-top: -60px;
        margin-bottom: 30px;
    }
    .why .why-box h2 {
        font-size: 22px;
    }
    .why .why-box .why-point {
        margin-bottom: 20px;
    }
    .why .why-box .why-point img {
        margin-right: 15px;
        height: 24px;
    }
    .why .why-box .why-point p {
        font-size: 14px;
    }
    /* ================================ */
    /* =========== how ========== */
    /* ================================ */
    .how {
        text-align: center;
        padding: 25px 5px 0;
    }
    .how .how-box h2 {
        font-size: 24px;
    }
    .how .how-box .step h3 {
        font-size: 14px;
    }
    .how .how-box .step p {
        font-size: 12px;
    }
    .how .how-box .btn {
        width: 260px;
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 0;
    }
    /* ================================ */
    /* =========== start ========== */
    /* ================================ */
    .start {
        padding: 50px 0px 10px;
        margin-top: -20px;
    }
    .start h2 {
        font-size: 18px;
        line-height: 1.5;
    }
    .start p {
        font-size: 12px;
    }
    /* ================================ */
    /* =========== wallet ========== */
    /* ================================ */
    .wallet .wallet-box h1 {
        font-size: 18px;
    }
    .wallet .wallet-box h3 {
        font-size: 14px;
    }
    .wallet .wallet-desc p {
        font-size: 10px;
    }
    .wallet .wallet-step .wallet-step-box {
        padding: 25px 15px;
        margin-right: 15px;
    }
    .wallet .wallet-step .wallet-step-box img {
        margin-right: 15px;
    }
    .wallet .wallet-step .wallet-step-box .w {
        width: 180px;
    }
    .wallet .wallet-step .wallet-step-box p {
        font-size: 12px;
    }
    .wallet .wallet-step .wallet-step-box h3 {
        font-size: 14px;
    }
    .wallet .btn {
        font-size: 14px;
        width: 260px;
    }
    .qrmodal .modal-dialog {
        align-items: center;
    }
    .qrmodal .modal-content h3 {
        font-size: 14px;
    }
    .qrmodal .qr-box img {
        border-radius: 10px;
        object-fit: cover;
    }
    .statusmodal button {
        font-size: 14px;
    }
    .insuranceModal .modal-content .modal-footer .btn-insurance {
        font-size: 14px;
    }
    /* ================================ */
    /* =========== block ========== */
    /* ================================ */
    .block-box {
        max-width: 100%;
    }
    .block h1 {
        font-size: 18px;
    }
    .block .block-box #amount label {
        width: 100%;
        margin: 0;
        margin-bottom: 25px;
        height: 60px;
    }
    .block .block-box #amount {
        display: block;
        width: 250px;
        min-height: 260px;
    }
    .insuranceModal .modal-content .modal-footer .btn {
        font-size: 14px;
    }
    .block .block-box .desc p {
        font-size: 14px;
    }
    ol li {
        font-size: 12px;
    }
    .block .block-box .btn {
        width: 250px;
        font-size: 14px;
    }
    .block .block-box .tncCheckBox {
        margin-bottom: 20px;
    }
    .block .block-box .tnc {
        font-size: 10px;
    }
    /* ================================ */
    /* =========== dashboard ========== */
    /* ================================ */
    .dashboard .swiper img {
        height: 160px;
    }
    .dashboard .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
    .dashboard .dashboard-item {
        padding: 10px;
    }
    /* .dashboard .dashboard-item .item-box .icon-1 {
        width: 40px;
        height: 40px;
    }
    .dashboard .dashboard-item .item-box .icon-2 {
        width: 40px;
        height: 45px;
    } */
    .dashboard .dashboard-item .item-box img {
        width: 30px;
        height: 30px;
    }
    .dashboard .dashboard-item p {
        font-size: 12px;
        margin-bottom: 15px;
    }
    .dashboard .dashboard-item .market .title {
        font-size: 14px;
    }
    .dashboard .dashboard-item .market .amount {
        font-size: 20px;
    }
    .dashboard .dashboard-item .market .total {
        font-size: 11px;
    }
    .dashboard .dashboard-item .market-2 .title {
        font-size: 15px;
    }
    .dashboard .dashboard-item .market-2 .rate {
        font-size: 10px;
    }
    .dashboard .dashboard-item .market-2 .date {
        font-size: 10px;
    }
    .dashboard .dashboard-item .market-2 .amount {
        font-size: 28px;
    }
    .dashboard .dashboard-item .market-2 .desc {
        font-size: 9px;
    }
    .dashboard .dashboard-item .market-2 .blocks {
        font-size: 9px;
    }
    .dashboard .dashboard-item .market-2 .blocks span {
        font-size: 11px;
    }
    .dashboard .dashboard-box h3 {
        font-size: 18px;
    }
    .pool .dashboard-info .token {
        font-size: 12px;
    }
    .pool .dashboard-info .info-flex .name {
        font-size: 14px;
    }
    .pool .dashboard-info .info-flex .details {
        font-size: 10px;
    }
    .pool .dashboard-info .info-flex .value {
        font-size: 11px;
    }
    .pool .table thead tr th {
        font-size: 14px;
    }
    .pool .table thead tr th span {
        font-size: 12px;
    }
    .pool .table tbody tr td {
        font-size: 14px;
    }
    .dashboard .dashboard-block {
        justify-content: start;
    }
    .dashboard .dashboard-block .dashboard-block-box {
        min-width: 320px;
    }
    .dashboard .dashboard-block .dashboard-block-box .block-value {
        font-size: 14px;
    }
    .dashboard .dashboard-block .dashboard-block-box .block-name {
        font-size: 16px;
    }
    .dashboard .dashboard-block .dashboard-block-box .btn {
        font-size: 14px;
    }
    .dashboard .dashboard-block .dashboard-block-box .btn2 {
        font-size: 14px;
    }
    .dashboard .dashboard-block .dashboard-block-box .btn3 {
        font-size: 14px;
    }
    /* ================================ */
    /* =========== dashboard modal ========== */
    /* ================================ */
    .globe .modal-content {
        max-height: 550px;
    }
    .globe .nav-tabs {
        border-bottom: unset;
    }
    .globe .globe-flex .date {
        font-size: 12px;
    }
    .globe .globe-flex .datename {
        font-size: 12px;
    }
    .globe .datetime p {
        font-size: 12px;
    }
    .globe .globe-flex .amount {
        font-size: 12px;
    }
    /* ================================ */
    /* =========== dashboard insurance modal ========== */
    /* ================================ */
    .info p {
        font-size: 10px !important;
    }
    /* ================================ */
    /* =========== filter ========== */
    /* ================================ */
    .filter {
        width: 100px;
    }
    .filtermodal .modal-dialog {
        align-items: flex-end;
    }
    .mobile-w {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .content .flex-cus {
        flex: unset;
        justify-content: center;
    }
    .logout button {
        width: 200px;
    }
    .insuranceModal .modal-content .modal-body p {
        font-size: 12px;
    }
    .terms-content {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 767px) {
    .globe .modal-dialog {
        align-items: flex-end;
    }
    .insuranceModal .modal-dialog {
        align-items: flex-end;
    }
    .statusmodal .modal-dialog {
        align-items: flex-end;
    }
    .qrmodal .modal-dialog {
        align-items: flex-end;
    }
    .wallet .wallet-step {
        justify-content: start;
    }
    .wallet .wallet-desc {
        margin: 20px 0 30px;
    }
    .animate-bottom {
        position: relative;
        animation: animatebottom 0.4s;
    }
    @keyframes animatebottom {
        from {
            bottom: -300px;
            opacity: 0;
        }
        to {
            bottom: 0;
            opacity: 1;
        }
    }
    .dashboard .dashboard-item p {
        font-size: 9px;
        margin-bottom: 15px;
    }
    .filter {
        font-size: 13px;
    }
    .content .intro h3 {
        margin-top: 0;
    }
    .content .graph {
        padding: 0;
        text-align: center;
    }
    .content .graph .icon img {
        margin-top: 15px;
    }
    .content .price-box .graph .round {
        margin: auto;
    }
    .how .how-box h2 {
        margin-bottom: 20px;
    }
    .dropdown button {
        font-size: 14px;
    }
    .header .account-info {
        padding: 7px 5px;
    }
    .logout button {
        width: 160px;
    }
    .bg .content-box .logo-title {
        width: 320px;
    }
    .bg .content-box .title {
        height: 80px;
    }
    #myChart {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 376px) {
    .logout button {
        width: 140px;
    }
    .bg .content-box .logo-title {
        width: 300px;
    }
}

@media only screen and (max-width: 361px) {
    .globe .modal-content {
        max-height: 400px;
    }
    .logout button {
        width: 130px;
    }
}

@media only screen and (max-width: 321px) {
    .how .how-box .step {
        height: 200px;
    }
    .content .intro p {
        text-align: justify;
    }
    .logout button {
        width: 110px;
    }
}