@media  screen and (min-width: 2102px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.4em;
    }

    .download-btn > div {
        font-size: 1.3em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0px;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.8em;
    }

    .easport1 h4 {
        font-size: 2em;
    }

    .company-logos h2 {
        font-size: 5.5em;
    }

    .company-logos-container > div > div {
        height: 150px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 52%;
    }

    .carousel-3D-swiper-section {
        width: 60%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 200px 0;
    }

    .step1-cont {
        scale: 2;
        gap: 3%;
    }

    .step2-cont {
        scale: 2;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 400px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 712px;
    }

    .sbs-loader-line1 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 265.033V30C0 13.4315 13.4315 0 30 0H2022C2038.57 0 2052 13.4315 2052 30V265.033V483.742V557.238V818.708V820.49V970C2052 986.569 2038.57 1000 2022 1000H731.925C722.899 1000 714.353 995.936 708.656 988.935L673.744 946.032C668.047 939.031 659.501 934.967 650.475 934.967H307.304C298.382 934.967 289.923 938.938 284.223 945.802L248.217 989.165C242.517 996.029 234.058 1000 225.136 1000H30C13.4314 1000 0 986.569 0 970L0 265.033Z");
        height: 1000px;
        width: 2052px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 85%;
        width: 100%;
    }

    .wcg-content > img {
        width: 37%;
    }

    .frequently-asked > h4 {
        font-size: 2.5em;
    }

    .frequently-asked > h2 {
        font-size: 6.5em;
    }

    .frequently-asked > a {
        width: 10%;
        height: 70px;
    }

    .frequently-asked > a > div {
        font-size: 1.6em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 70px !important;
    }

    .download-btn-gaimin > div {
        font-size: 1.7em;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .footer-top > h2 {
        font-size: 6em;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.9em;
    }

    .footer-middle > ul > li {
        font-size: 1.5em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 2001px) and (max-width: 2101px){
    /* header*/
    .header-container {

        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;

    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.3em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0px;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.8em;
    }

    .easport1 h4 {
        font-size: 2em;
    }

    .company-logos h2 {
        font-size: 5.5em;
    }

    .company-logos-container > div > div {
        height: 100px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 52%;
    }

    .carousel-3D-swiper-section {
        width: 60%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 200px 0;
    }

    .step1-cont {
        scale: 1.9;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.7;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 400px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 712px;
    }

    .sbs-loader-line1 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 246.481V30C0 13.4315 13.4315 0 30 0H1922C1938.57 0 1952 13.4315 1952 30V246.481V449.88V518.232V761.399V763.056V900C1952 916.569 1938.57 930 1922 930H696.748C687.839 930 679.39 926.04 673.69 919.192L641.341 880.327C635.641 873.479 627.193 869.519 618.283 869.519H292.811C284.006 869.519 275.645 873.387 269.945 880.098L236.548 919.421C230.848 926.132 222.487 930 213.682 930H30C13.4315 930 0 916.569 0 900L0 246.481Z");
        height: 936px;
        width: 1952px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 85%;
        width: 100%;
    }

    .wcg-content > img {
        width: 38%;
    }

    .frequently-asked > h4 {
        font-size: 2.5em;
    }

    .frequently-asked > h2 {
        font-size: 6.5em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .footer-top > h2 {
        font-size: 6em;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.9em;
    }

    .footer-middle > ul > li {
        font-size: 1.5em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1882px) and (max-width: 2000px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.3em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        z-index: 4;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 80vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.8em;
    }

    .easport1 h4 {
        font-size: 2em;
    }

    .company-logos h2 {
        font-size: 5.5em;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 52%;
    }


    .carousel-3D-swiper-section {
        width: 60%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 200px 0;
    }

    .step1-cont {
        scale: 1.7;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.7;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 400px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 712px;
    }

    .sbs-loader-line1 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 238.53V30C0 13.4314 13.4315 0 30 0H1820C1836.57 0 1850 13.4315 1850 30V238.53V435.367V501.514V736.837V738.441V870C1850 886.569 1836.57 900 1820 900H661.263C652.246 900 643.707 895.944 638.01 888.955L608.306 852.515C602.609 845.526 594.07 841.47 585.053 841.47H278.423C269.51 841.47 261.059 845.433 255.359 852.286L224.667 889.184C218.968 896.037 210.516 900 201.603 900H30C13.4315 900 0 886.569 0 870L0 238.53Z");
        height: 885px;
        width: 1850px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 85%;
        width: 100%;
    }

    .wcg-content > img {
        width: 38%;
    }

    .frequently-asked > h4 {
        font-size: 2.5em;
    }

    .frequently-asked > h2 {
        font-size: 6.5em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .footer-top > h2 {
        font-size: 6em;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.9em;
    }

    .footer-middle > ul > li {
        font-size: 1.5em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1782px) and (max-width: 1881px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.2em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0px;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.8em;
    }

    .easport1 h4 {
        font-size: 2em;
    }

    .company-logos h2 {
        font-size: 5.5em;
    }

    .company-logos-container > div > div {
        height: 100px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 52%;
    }

    .carousel-3D-swiper-section {
        width: 69%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 200px 0;
    }

    .step1-cont {
        scale: 1.7;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.7;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 400px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 712px;
    }

    .sbs-loader-line1 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 219.978V30C0 13.4315 13.4315 0 30 0H1720C1736.57 0 1750 13.4315 1750 30V219.978V401.506V462.508V679.528V681.007V800C1750 816.569 1736.57 830 1720 830H626.061C617.174 830 608.746 826.061 603.046 819.243L575.902 786.779C570.202 779.962 561.773 776.022 552.887 776.022H263.905C255.124 776.022 246.783 779.87 241.083 786.551L212.996 819.472C207.296 826.152 198.955 830 190.173 830H30C13.4315 830 0 816.569 0 800L0 219.978Z");
        height: 830px;
        width: 1750px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 85%;
        width: 100%;
    }

    .wcg-content > img {
        width: 37%;
    }

    .frequently-asked > h4 {
        font-size: 2.5em;
    }

    .frequently-asked > h2 {
        font-size: 6.5em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .footer-top > h2 {
        font-size: 6em;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.9em;
    }

    .footer-middle > ul > li {
        font-size: 1.5em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1682px) and (max-width: 1781px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.2em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }


    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.8em;
    }

    .easport1 h4 {
        font-size: 2em;
    }

    .company-logos h2 {
        font-size: 5.5em;
    }

    .company-logos-container > div > div {
        height: 100px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 52%;
    }

    .carousel-3D-swiper-section {
        width: 70%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 200px 0;
    }

    .step1-cont {
        scale: 1.6;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.6;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 400px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 712px;
    }

    .sbs-loader-line1 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 212.027V30C0 13.4314 13.4315 0 30 0H1620C1636.57 0 1650 13.4315 1650 30V212.027V386.993V445.791V654.967V656.392V770C1650 786.569 1636.57 800 1620 800H591.285C582.286 800 573.761 795.96 568.063 788.993L543.516 758.98C537.818 752.014 529.293 747.973 520.294 747.973H249.814C240.918 747.973 232.482 751.921 226.782 758.751L201.35 789.223C195.65 796.052 187.213 800 178.318 800H30C13.4314 800 0 786.569 0 770L0 212.027Z");
        height: 800px;
        width: 1650px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 85%;
        width: 100%;
    }

    .wcg-content > img {
        width: 37%;
    }

    .frequently-asked > h4 {
        font-size: 2.3em;
    }

    .frequently-asked > h2 {
        font-size: 5.5em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.7em;
    }

    .footer-middle > ul > li {
        font-size: 1.4em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1582px) and (max-width: 1681px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.2em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 6em;
    }

    .easport-title-img h2 {
        font-size: 6em;
    }

    .easport-title-img p {
        font-size: 2em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.4em;
    }

    .easport1 h4 {
        font-size: 1.6em;
    }

    .company-logos h2 {
        font-size: 5em;
    }

    .company-logos-container > div > div {
        height: 100px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 75%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 130px 0 200px 0;
    }

    .step1-cont {
        scale: 1.6;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.6;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 350px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.7;
        top: 610px;
    }

    .sbs-loader-line1 {
        height: 271px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 204.076V30C0 13.4315 13.4315 0 30 0H1520C1536.57 0 1550 13.4315 1550 30V204.076V372.481V429.073V630.405V631.777V740C1550 756.569 1536.57 770 1520 770H556.53C547.406 770 538.777 765.847 533.085 758.716L511.126 731.208C505.433 724.077 496.805 719.924 487.68 719.924H235.743C226.722 719.924 218.18 723.984 212.483 730.978L189.701 758.947C184.004 765.941 175.462 770 166.441 770H30C13.4315 770 0 756.569 0 740L0 204.076Z");
        height: 770px;
        width: 1550px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 39%;
    }

    .frequently-asked > h4 {
        font-size: 2.2em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 40px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 6em;
    }

    .footer-content {
        gap: 60px;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.7em;
    }

    .footer-middle > ul > li {
        font-size: 1.4em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1482px) and (max-width: 1581px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.2em;
    }

    .download-btn > div {
        font-size: 1.2em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 4.5em;
    }

    .easport-title-img h2 {
        font-size: 4.5em;
    }

    .easport-title-img p {
        font-size: 1.8em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.4em;
    }

    .easport1 h4 {
        font-size: 1.6em;
    }

    .company-logos h2 {
        font-size: 4em;
    }

    .company-logos-container > div > div {
        height: 90px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 80%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .step-by-step {
        overflow: hidden;
        padding: 130px 0 200px 0;
    }

    .step1-cont {
        scale: 1.5;
        gap: 2%;
    }

    .step2-cont {
        scale: 1.5;
        gap: 2%;
    }

    .step-by-step-content {
        gap: 258px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.4;
        top: 450px;
    }

    .sbs-loader-line1 {
        height: 286px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 201.425V30C0 13.4315 13.4315 0 30 0H1420C1436.57 0 1450 13.4315 1450 30V201.425V367.644V423.501V622.218V623.572V730C1450 746.569 1436.57 760 1420 760H522.04C512.641 760 503.786 755.596 498.116 748.101L478.727 722.474C473.056 714.979 464.201 710.575 454.802 710.575H221.937C212.641 710.575 203.871 714.884 198.19 722.242L178.047 748.333C172.366 755.691 163.596 760 154.3 760H30C13.4314 760 0 746.569 0 730L0 201.425Z");
        height: 760px;
        width: 1450px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 39%;
    }

    .frequently-asked > h4 {
        font-size: 1.8em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 30px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h3 {
        font-size: 4em;
    }

    .power-of-gaimin > h2 {
        font-size: 4.5em;
    }

    .power-of-gaimin > p {
        font-size: 1.8em;
    }

    .track-text > h2 {
        font-size: 5em;
    }

    .footer-content {
        gap: 60px;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.7em;
    }

    .footer-middle > ul > li {
        font-size: 1.4em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1.2em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1382px) and (max-width: 1481px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1.1em;
    }

    .download-btn > div {
        font-size: 1.1em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 4.5em;
    }

    .easport-title-img h2 {
        font-size: 4.5em;
    }

    .easport-title-img p {
        font-size: 1.8em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.2em;
    }

    .easport1 h4 {
        font-size: 1.4em;
    }

    .company-logos h2 {
        font-size: 3.5em;
    }

    .company-logos-container > div > div {
        height: 90px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 83%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .step-by-step {
        overflow: hidden;
        padding: 130px 0 200px 0;
    }

    .step1-cont {
        scale: 1.4;
        gap: 3%;
    }

    .step2-cont {
        scale: 1.4;
        gap: 3%;
    }

    .step-by-step-content {
        gap: 258px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.4;
        top: 450px;
    }

    .sbs-loader-line1 {
        height: 286px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 198.775V30C0 13.4315 13.4315 0 30 0H1320C1336.57 0 1350 13.4315 1350 30V198.775V362.806V417.929V614.031V615.367V720C1350 736.569 1336.57 750 1320 750H487.589C477.897 750 468.803 745.318 463.172 737.429L446.302 713.796C440.671 705.907 431.576 701.225 421.884 701.225H208.171C198.581 701.225 189.568 705.81 183.922 713.562L166.368 737.663C160.721 745.415 151.709 750 142.118 750H30C13.4315 750 0 736.569 0 720L0 198.775Z");
        height: 750px;
        width: 1350px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 44%;
    }

    .frequently-asked > h2 {
        font-size: 4.2em;
    }

    .frequently-asked > h4 {
        font-size: 1.5em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 700px;
    }

    .power-of-gaimin {
        gap: 30px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.6em;
    }

    .power-of-gaimin > h3 {
        font-size: 3.5em;
    }

    .power-of-gaimin > h2 {
        font-size: 4em;
    }

    .power-of-gaimin > p {
        font-size: 1.5em;
    }

    .track-text > h2 {
        font-size: 4.5em;
    }

    .footer-content {
        gap: 60px;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.5em;
    }

    .footer-middle > ul > li {
        font-size: 1.2em;
    }

    .footer-middle > ul > li > svg {
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1281px) and (max-width: 1381px){
    /* header*/
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1em;
    }

    .download-btn > div {
        font-size: 1em;
    }

    /*home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .hero-social-media {
        top: 20%;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 4.5em;
    }

    .easport-title-img h2 {
        font-size: 4.5em;
    }

    .easport-title-img p {
        font-size: 1.8em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1.2em;
    }

    .easport1 h4 {
        font-size: 1.4em;
    }

    .company-logos h2 {
        font-size: 3.5em;
    }

    .company-logos-container > div > div {
        height: 90px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 60px 0 140px 0;
    }

    .step1-cont {
        scale: 1.3;
        gap: 4%;
    }

    .step2-cont {
        scale: 1.3;
        gap: 4%;
    }

    .step-by-step-content {
        gap: 140px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.4;
        top: 330px;
    }

    .sbs-loader-line1 {
        height: 201px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 188.174V30C0 13.4314 13.4315 0 30 0H1220C1236.57 0 1250 13.4315 1250 30V188.174V343.457V395.639V581.283V582.548V680C1250 696.569 1236.57 710 1220 710H452.814C443.012 710 433.828 705.211 428.216 697.174L413.889 676.653C408.278 668.615 399.094 663.826 389.291 663.826H194.081C184.379 663.826 175.276 668.518 169.647 676.419L154.695 697.407C149.066 705.308 139.963 710 130.262 710H30C13.4315 710 0 696.569 0 680L0 188.174Z");
        height: 710px;
        width: 1250px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 44%;
    }

    .frequently-asked > h2 {
        font-size: 3.8em;
    }

    .frequently-asked > h4 {
        font-size: 1.3em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    .bg-gaimin {
        height: 450px;
    }

    .power-of-gaimin {
        gap: 15px;
    }

    .download-btn-gaimin {
        height: 60px;
    }

    .power-of-gaimin > h4 {
        font-size: 1.1em;
    }

    .power-of-gaimin > h3 {
        font-size: 3em;
    }

    .power-of-gaimin > h2 {
        font-size: 3em;
    }

    .power-of-gaimin > p {
        font-size: 1.3em;
    }

    .track-text > h2 {
        font-size: 4em;
    }

    .footer-content {
        gap: 35px;
    }
    
    .footer-top > h2 {
        font-size: 3em;
    }

    .btn-contact-foo {
        height: 60px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.3em;
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li {
        font-size: 1em;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 150px;
    }

    .footer-bottom h6 {
        font-size: 1em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1125px) and (max-width: 1280px){
    /* header */
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 1em;
    }

    .download-btn > div {
        font-size: 0.9em;
    }

    /* end header */

    /* home */
    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .hero-social-media {
        top: 21%;
    }

    .sm-svg {
        height: 2vh;
    }

    .trust-site-logo {
        height: 3vh !important;
    }

    .digicert-logo {
        height: 3vh;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 4em;
    }

    .easport-title-img h2 {
        font-size: 4em;
    }

    .easport-title-img p {
        font-size: 1.5em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1em;
    }

    .easport1 h4 {
        font-size: 1.2em;
    }

    .company-logos h2 {
        font-size: 3em;
    }

    .company-logos-container > div > div {
        height: 70px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 60px 0 60px 0;
    }

    .step1-cont {
        scale: 1.1;
        gap: 4%;
    }

    .step2-cont {
        scale: 1.1;
        gap: 4%;
    }

    .step-by-step-content {
        gap: 96px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1.1;
        top: 202px;
    }

    .sbs-loader-line1 {
        height: 243px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 169.621V30C0 13.4314 13.4315 0 30 0H1045C1061.57 0 1075 13.4315 1075 30V169.621V309.595V356.633V523.973V525.114V610C1075 626.569 1061.57 640 1045 640H392.03C381.995 640 372.625 634.983 367.062 626.631L357.148 611.748C351.585 603.396 342.215 598.379 332.18 598.379H169.495C159.559 598.379 150.268 603.298 144.683 611.515L134.251 626.864C128.666 635.081 119.375 640 109.439 640H30C13.4315 640 0 626.569 0 610L0 169.621Z");
        height: 640px;
        width: 1075px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 46%;
    }

    .frequently-asked > h2 {
        font-size: 3em;
    }

    .frequently-asked > h4 {
        font-size: 1em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    footer  {
        margin-top: 50px;
    }

    .pre-footer {
        margin-top: 65px;
    }

    .bg-gaimin {
        height: 450px;
    }

    .power-of-gaimin {
        gap: 15px;
    }

    .download-btn-gaimin {
        height: 50px;
    }

    .download-btn-gaimin > div {
        font-size: 0.9em;
    }

    .power-of-gaimin > h4 {
        font-size: 1em;
    }

    .power-of-gaimin > h3 {
        font-size: 2.8em;
    }

    .power-of-gaimin > h2 {
        font-size: 2.8em;
    }

    .power-of-gaimin > p {
        font-size: 1.2em;
    }

    .track-text > h2 {
        font-size: 3.5em;
    }

    .footer-content {
        gap: 30px;
    }
    
    .footer-top > h2 {
        font-size: 3em;
    }

    .btn-contact-foo {
        height: 50px;
        width: 200px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.2em;
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li {
        font-size: 0.9em;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 120px;
    }

    .footer-bottom h6 {
        font-size: 0.9em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 1025px) and (max-width: 1124px){
    /* header */
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-nav > a {
        font-size: 0.8em;
    }

    .download-btn > div {
        font-size: 0.8em;
    }

    /* end header */

    /* home */
    .mask-btn-container {
        height: 20.5%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }
    
    .mask-btn-cont-txt {
        gap: 1rem;
    }

    .mask-btn-content > img {
        width: 13%;
    }

    .hero-social-media {
        top: 19%;
    }

    .sm-svg {
        height: 2vh;
    }

    .trust-site-logo {
        height: 3vh !important;
    }

    .digicert-logo {
        height: 3vh;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team-content {
        width: 96%;
        height: 95vh;
    }

    .easport-title h2 {
        font-size: 3em;
    }

    .easport-title-img h2 {
        font-size: 3em;
    }

    .easport-title-img p {
        font-size: 1.4em;
    }

    .easport1 {
        width: 24%;
    }

    .easport1 h3 {
        font-size: 1em;
    }

    .easport1 h4 {
        font-size: 1.2em;
    }

    .company-logos h2 {
        font-size: 3em;
    }

    .company-logos-container > div > div {
        height: 70px;
    }

    .company-logos-container svg {
        height: auto;
        width: 100%;
    }

    .company-logos-container svg {
        height: auto;
        width: 45%;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .step-by-step {
        overflow: hidden;
        padding: 0 0 60px 0;
    }

    .step1-cont {
        scale: 1;
        gap: 4%;
    }

    .step2-cont {
        scale: 1;
        gap: 4%;
    }

    .step-by-step-content {
        gap: 70px;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        scale: 1;
        top: 90px;
    }

    .sbs-loader-line1 {
        height: 251px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 161.67V30C0 13.4315 13.4315 0 30 0H945C961.569 0 975 13.4315 975 30V161.67V295.082V339.915V499.412V500.499V580C975 596.569 961.569 610 945 610H357.497C347.221 610 337.66 604.74 332.158 596.061L324.684 584.269C319.183 575.589 309.621 570.33 299.345 570.33H155.647C145.469 570.33 135.984 575.49 130.457 584.037L122.53 596.293C117.002 604.839 107.518 610 97.3398 610H30C13.4314 610 0 596.569 0 580L0 161.67Z");
        height: 610px;
        width: 975px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 48%;
    }

    .frequently-asked > h2 {
        font-size: 3em;
    }

    .frequently-asked > h4 {
        font-size: 1em;
    }

    .fa-content-item {
        gap: 5%;
    }

    /* footer */
    footer  {
        margin-top: 50px;
    }

    .pre-footer {
        margin-top: 65px;
    }

    .bg-gaimin {
        height: 450px;
    }

    .power-of-gaimin {
        gap: 15px;
    }

    .download-btn-gaimin {
        height: 50px;
    }

    .download-btn-gaimin > div {
        font-size: 0.9em;
    }

    .power-of-gaimin > h4 {
        font-size: 1em;
    }

    .power-of-gaimin > h3 {
        font-size: 2.8em;
    }

    .power-of-gaimin > h2 {
        font-size: 2.8em;
    }

    .power-of-gaimin > p {
        font-size: 1.2em;
    }

    .track-text > h2 {
        font-size: 3.5em;
    }

    .footer-content {
        gap: 30px;
    }
    
    .footer-top > h2 {
        font-size: 3em;
    }

    .btn-contact-foo {
        height: 50px;
        width: 200px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.2em;
        height: auto;
        width: 150px;
    }

    .footer-middle > ul > li {
        font-size: 0.9em;
    }

    .footer-middle > ul > li > img {
        height: auto;
        width: 120px;
    }

    .footer-bottom h6 {
        font-size: 0.9em;
    }

    .footer-bottom div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
}

@media  screen and (min-width: 925px) and (max-width: 1024px) {
    .mask-btn-container {
        height: 20%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .hero-social-media {
        top: 20%
    }

    .hero-social-media > .socialm-top {
        gap: 5px;
    }

    .hero-social-media > .socialm-bottom {
        gap: 5px;
    }

    .hero-img-container {
        padding: 0;
        align-items: flex-start;
    }

    .hero-img-container li {
        width: 180px; 
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .htp-content2 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 132.517V30C0 13.4315 13.4315 0 30 0H845C861.569 0 875 13.4315 875 30V132.517V241.871V278.619V409.354V410.245V470C875 486.569 861.569 500 845 500H321.717C311.884 500 302.676 495.182 297.07 487.104L292.403 480.379C286.798 472.301 277.589 467.483 267.757 467.483H140.549C130.817 467.483 121.69 472.204 116.066 480.146L110.973 487.337C105.349 495.279 96.2223 500 86.4905 500H30C13.4315 500 0 486.569 0 470L0 132.517Z");
        height: 500px;
        width: 875px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 45%;
    }
}

@media  screen and (min-width: 825px) and (max-width: 924px) {
    .download-btn {
        width: 55%;
    }

    .mask-btn-container {
        height: 21%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .hero-social-media {
        top: 20%
    }

    .hero-social-media > .socialm-top {
        gap: 5px;
    }

    .hero-social-media > .socialm-bottom {
        gap: 5px;
    }

    .trust-site-logo {
        display: none;
    }

    .hero-img-container {
        padding: 0;
        margin-top: 10px;
        align-items: flex-start;
    }

    .hero-img-container li {
        width: 180px;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .htp-content2 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 119.265V30C0 13.4314 13.4315 0 30 0H745C761.569 0 775 13.4315 775 30V119.265V217.684V250.757V368.419V369.22V420C775 436.569 761.569 450 745 450H286.886C276.974 450 267.703 445.104 262.113 436.919L259.993 433.816C254.403 425.631 245.131 420.735 235.219 420.735H126.403C116.591 420.735 107.4 425.533 101.79 433.582L99.302 437.153C93.6923 445.202 84.5008 450 74.6892 450H30C13.4315 450 0 436.569 0 420L0 119.265Z");
        height: 450px;
        width: 775px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 45%;
    }
}

@media  screen and (min-width: 768px) and (max-width: 824px) {
    .mask-btn-container {
        height: 20.5%;
        display: unset;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        z-index: 4;
    }

    .hero-social-media {
        top: 18%
    }

    .hero-social-media > .socialm-top {
        gap: 5px;
    }

    .hero-social-media > .socialm-bottom {
        gap: 5px;
    }

    .trust-site-logo {
        display: none;
    }

    .hero-img-container {
        padding: 0;
        margin: 0.5rem 0;
        align-items: flex-start;
    }

    .hero-img-container li {
        width: 180px;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .htp-content2 {
        height: 300px;
    }

    .why-choose-gaiming {
        margin-top: 0;
    }

    .wcg-content-mask {
        clip-path: path("M0 111.314V30C0 13.4315 13.4315 0 30 0H688C704.569 0 718 13.4315 718 30V111.314V203.171V234.04V343.857V344.606V390C718 406.569 704.569 420 688 420H267.017C257.069 420 247.768 415.068 242.186 406.834L241.52 405.852C235.937 397.618 226.636 392.686 216.688 392.686H118.324C108.476 392.686 99.2547 397.52 93.652 405.619L92.6501 407.067C87.0474 415.166 77.8263 420 67.978 420H30C13.4315 420 0 406.569 0 390L0 111.314Z");
        height: 420px;
        width: 718px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .wcg-content {
        height: 88%;
        width: 100%;
    }

    .wcg-content > img {
        width: 45%;
    }
}

@media  screen and (min-width: 768px) and (max-width: 1024px) {
    /* header */
    .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2% 0 2% 0%;
    }

    .header-nav > a {
        font-size: 0.5rem;
    }

    .digicert-logo,
    .trust-site-logo {
        display: none;
    }

    .download-btn {
        height: 35px;
    }

    .download-btn > div {
        font-size: 0.5em;
    }

    .download-btn > svg {
        height: auto;
        width: 18px;
    }

    /* end header */

    /* home */

    .home-banner {
        height: auto;
    }

    .masks-container {
        overflow: hidden;
        height: 100%;
    }

    .hero-mask {
        height: 35vh;
        min-height: 310px;
    }

    .hero-imgs {
        height: auto;
    }

    .hero-social-media {
        gap: 5px;
    }

    .hero-social-media svg {
        width: 20px;
        height: auto;
    }

    .hero-social-media > .socialm-bottom {
        gap: 5px;
    }

    .trust-site-logo {
        height: auto !important;
        width: 60px !important;
    }

    .mask-btn-content > img {
        margin-left: 5%;
    }

    .mask-btn-cont-txt h3 {
        font-size: 1.65vw;
    }
    .mask-btn-cont-txt h4 {
        font-size: 1.2vw;
    }

    .game-txt {
        font-size: 1em;
    }

    .money-txt {
        font-size: 1em;
    }

    .easport-team {
        margin: 50px 0 0 0;
    }

    .easport-team-content {
        height: 383px;
        gap: 8%;
    }

    .easport-title h2 {
        font-size: 3em;
    }

    .easport-title-img h2 {
        font-size: 3em;
    }

    .easport-title-img p {
        font-size: 0.8em;
    }

    .easport1-text {
        bottom: 10%;
    }

    .easport1 h3 {
        font-size: 0.8em;
        margin-bottom: 5px;
    }

    .easport1 h4 {
        font-size: 0.8em;
    }

    .company-logos {
        padding: 2rem 1rem;
    }

    .company-logos h2 {
        font-size: 3em;
    }

    .company-logos-container svg {
        width: 60px;
        height: auto;
    }
    
    .how-to-play-text p {
        font-size: 0.5em;
    }

    .mask-step1 {
        scale: 0.7;
    }

    .mask-step2 {
        scale: 0.7;
    }

    .bg-step1 {
        height: 40px;
    }

    .sbs-loader-circle {
        scale: 0.6;
    }

    .sbs-loader-line1 {
        scale: 1.17;
        height: 182px;
    }

    .step1-text-cont {
        scale: 0.7;
        left: -8%;
        width: 300px;
    }

    .step1-text-cont h2 {
        font-size: 1.5em;
    }

    .step2-text-cont {
        scale: 0.7;
        right: -8%;
        width: 300px;
    }

    .step2-text-cont h2 {
        font-size: 1.5em;
    }

    .step2-text-cont p {
        font-size: 1em;
    }

    .step1-text-cont p {
        font-size: 1em;
    }

    .frequently-asked {
        margin-top: 70px;
    }

    .frequently-asked > h4 {
        font-size: 1em;
    }

    .frequently-asked > h2 {
        font-size: 3em;
    }

    .frequently-asked > h2 > span {
        font-size: 1em;
    }

    .inactive-faq > div > h3 {
        font-size: 1em;
    }

    .inactive-faq > div > p {
        font-size: 0.6em;
    }

    .inactive-faq1 > div > h3 {
        font-size: 1.5vw;
    }

    .inactive-faq1 > div > p {
        font-size: 1vw;
    }

    /* footer */

    .bg-gaimin {
        height: 400px;
    }

    .power-of-gaimin > h4 {
        font-size: 1em;
    }

    .power-of-gaimin > h3 {
        font-size: 2em;
    }

    .power-of-gaimin > h2 {
        font-size: 2.5em;
    }

    .power-of-gaimin > h2 > span {
        font-size: 1em;
    }

    .power-of-gaimin > p {
        font-size: 1em;
    }

    .download-btn-gaimin > div {
        font-size: 0.6em;
    }

    .download-btn-gaimin {
        width: 23%;
    }

    .track-text > h2 {
        font-size: 3em;
    }

    .track-text {
        gap: 20px;
    }

    .track-text img {
        width: 90px;
        height: 90px;
    }

    footer {
        margin-top: 40px;
    }

    .footer-top {
        height: 100px;
    }

    .footer-top > h2 {
        font-size: 2em;
    }

    .btn-contact-content div {
        font-size: 0.9em;
    }

    .btn-contact-content svg {
        width: 15px;
        height: auto;
    }

    .btn-contact-foo {
        width: 160px;
        height: 40px;
    }

    .footer-middle > ul > h3 {
        font-size: 1em;
    }
    
    .footer-middle > ul > li {
        font-size: 0.7em;
    }

    .footer-middle > ul > li > a > div {
        font-size: 0.7em;
    }

    .footer-bottom > h6 {
        font-size: 0.5em;
    }

    .footer-middle > ul > li > svg {
        width: 80px;
        height: auto;
    }
    
    .footer-middle > ul > li > img {
        width: 80px;
        height: auto;
    }
    
    .footer-middle > ul > li > a > svg {
        width: 4px;
        height: auto;
    }
}

@media  screen and (min-width: 481px) and (max-width: 767px) {
    /* header */
    .hero-mask {
        display: flex;
        flex-direction: column;
        gap: 13px;
        height: auto;
    }

    .header-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5% 5%;
    }

    .menu-color-mobile-blue {
        display: none;
    }

    .header-nav, .header-btn-cont {
        display: none;
    }

    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 30%;
    }

    .menu-mobile-content {
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100dvh;
        background: linear-gradient(286deg, rgba(68, 0, 153, 0.80) -1.03%, rgba(33, 23, 71, 0.80) 102.04%);
        backdrop-filter: blur(15px);
        display: none;
        flex-direction: column;
        align-items: center;
    }

    .menu-mobile-top {
        display: flex;
        flex-direction: row;
        width: 90%;
        justify-content: space-between;
        align-items: center;
        padding: 4% 0;
        height: 20%;
    }

    .menu-mobile-top img {
        width: 40%;
        height: auto;
    }

    .menu-mobile-center {
        list-style: none;
        margin: 0;
        padding: 0;
        color: unset;
        display: flex;
        flex-direction: column;
        gap: 5%;
        height: 60%;
        width: 90%;
    }

    .menu-mobile-center > li {
        color: rgba(255, 255, 255, 0.70);
        font-family: "Clash Grotesk Semibold";
        font-size: 2.5em;
        font-style: normal;
        font-weight: 600;
        line-height: 96%;
        text-transform: capitalize;
    }

    .menu-mobile-center > li:hover {
        color: #FFF;
    }

    .menu-mobile-center > li > a {
        color: unset;
        text-decoration: none;
    }

    .menu-mobile-bottom {
        width: 90%;
        height: 20%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10%;
    }

    /* end header */

    /* home */
    .home-banner {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 2% 2% 0 2%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .home-banner .mask > video {
        padding: 0;
    }

    .masks-container {
        width: 100%;
        height: 455px;
        border-radius: 8px;
        overflow: hidden;
    }

    .mask {
        width: 100%;
        height: 100%;
        overflow: hidden;
        clip-path: none;
    }

    .mask > svg {
        display: none;
    }

    .grad-bg {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .mask-btn-container {
        display: none;
    }

    .mask-btn-container-mobile {
        display: block;
        position: relative;
        height: 90px;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    .mask-btn-content {
        justify-content: space-between;
        padding: 0 3%;
    }

    .mask-btn-content > img {
        width: 60px !important;
        height: auto !important;
        margin: 0;
    }

    .hero-social-media {
        top: 26%;
        gap: 10px;
    }

    .hero-social-media svg {
        width: 34px;
        height: auto;
    }

    .trust-site-logo,
    .digicert-logo {
        display: none;
    }

    .mask-btn-cont-txt h3 {
        font-size: 4.5vw;
    }
    .mask-btn-cont-txt h4 {
        font-size: 3.2vw;
    }

    .hero-imgs {
        margin: 25px 0 0 0;
        padding: 0 4% 0 4%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: auto;
        max-height: unset;
    }

    .hero-img-text-cont {
        top: 0;
        width: 100%;
    }

    .hero-img-text {
        width: 100%;
        gap: 5px;
    } 

    .hero-img-text h1 {
        font-size: 5em;
        line-height: 100%;
    }

    .hero-img-text p {
        font-size: 1.4em;
    }

    .game-txt {
        font-size: 1em;
        background: unset;
        -webkit-text-fill-color: unset;
    }

    .money-txt {
        font-size: 1em;
    }

    .hero-img-cont { 
        width: 100%;
        overflow-x: auto;
    }

    .hero-img-container {
        margin: 10px 0 30px 0;
        padding: 0;
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        width: 100%;
        min-width: max-content;
        justify-content: flex-start;
    }

    .hero-img-container li {
        width: 200px;
        height: 200px;
    }

    .hero-img-container li > img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .easport-team-content {
        height: fit-content;
        gap: 20px;
        max-height: unset;
    }

    .easport-team-content > img {
        width: 80%;
        height: auto;
    }

    .ea-title-img-desk {
        display: none;
    }

    .ea-title-img-mobile {
        display: block;
    }

    .easport-team-content-img {
        gap: 12px;
    }

    .easport-title {
        width: 100%;
    }

    .easport-title h2 {
        font-size: 2.6em;
    }

    .easport-title-img {
        gap: 5%;
    }

    .easport-title-img h2 {
        font-size: 2.6em;
    }

    .easport-title-img p {
        display: none;
    }

    .easport-title-img img {
        width: 25%;
        height: auto;
    }

    .easport-team-content-img {
        display: flex;
        flex-direction: column;
        height: 80%;
    }

    .easport-team-content-txt > p {
        display: block;
        color: #FFF;
        font-family: "Clash Grotesk";
        font-size: 1em;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
        margin-top: 10px;
    }

    .easport1 {
        width: 100%;
    }

    .easport-img-desk {
        display: none;
    }

    .easport-img-mobile {
        display: block;
    }


    .easport1-text {
        bottom: 10%;
    }

    .easport1 h3 {
        font-size: 1em;
        margin-bottom: 5px;
    }

    .easport1 h4 {
        font-size: 1em;
    }

    .company-logos {
        padding: 2rem 1rem;
    }

    .company-logos h2 {
        font-size: 2.5em;
    }

    .company-logos-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .company-logos-container svg {
        width: 45%;
        height: auto;
    }

    .how-to-play {
        gap: 0;
    }

    .how-to-play-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .how-to-play-text {
        width: 100%;
    }
    
    .br-desk {
        display: none;
    }

    .br-mobile {
        display: block;
    }


    .how-to-play-text h2 {
        font-size: clamp( 1rem , 9.07vw, 50px);
    }

    .how-to-play-text h3 {
        font-size: 2.2em;
        margin: 1.5rem 0;
    }
    
    .how-to-play-text p {
        font-size: 1.5em;
    }

    .step-by-step {
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        width: 430px;
    }

    .step-by-step-content {
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        left: unset;
        right: 0;
    }

    .step1-cont {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 500px;
    }

    .step2-cont {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        width: 100%;
        height: 500px;
    }
    
    .mask-step1 {
        scale: 0.8;
        transform-origin: center;
    }

    .mask-step2 {
        scale: 0.8;
        transform-origin: center;
        clip-path: path("M0 15.36C0 6.876928 6.876928 0 15.36 0H424.453632C433.64352 0 440.676 6.876928 440.676 15.36V80.45312C440.676 85.51424 436.6336 91.0928 429.78176 93.02464C397.35648 109.679232 393.049472 161.348416 427.44896 185.9888L434.80576 190.9896C439.46272 194.61848 440.676 200.52864 440.676 205.64032V266.24C440.676 276.07264 433.64352 283.2 424.453632 283.2H15.36C6.876928 283.2 0 276.07264 0 266.24V15.36Z");
    }

    .bg-step1 {
        height: 40px;
    }

    .sbs-loader-circle {
        scale: 0.8;
    }

    .sbs-loader-line1 {
        scale: 1.07;
        height: 399px;
    }

    .step1-text-cont {
        scale: 1;
        left: unset;
        width: 345px;
    }

    .step1-text-cont h2 {
        font-size: 1.5em;
    }

    .step2-text-cont {
        scale: 1;
        left: unset;
        width: 345px;
    }

    .step2-text-cont h2 {
        font-size: 1.5em;
    }

    .step2-text-cont p {
        font-size: 1em;
    }

    .step1-text-cont p {
        font-size: 1em;
    }

    .why-choose-gaiming {
        margin: 0;
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .htp-content2 {
        width: 100%;
    }

    .wcg-content {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wcg-content > video {
        mix-blend-mode: hard-light;
    }

    .chapter-mobile {
        display: block;
    }

    .chapter-desk {
        display: none;
    }

    .wcg-content > img {
        position: relative;
        left: unset;
        width: 450px;
    }

    .wcg-text {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        padding: 2%;
        gap: 30px;
    }

    .wcg-text > h2 {
        font-size: 2.4em;
    }

    .wcg-text > h3 {
        font-size: 1.4em;
    }

    .wcg-text > p {
        font-size: 1em;
    }

    .fa-content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 98%;
        gap: 20px;
    }

    .fa-content > img {
        width: 100%;
    }

    .fa-home-img {
        display: none;
    }

    .fa-home-img-mobile {
        display: block;
    }

    .fa-content-item svg {
        width: 65px;
        height: 93px;
    }

    .frequently-asked {
        margin-top: 70px;
    }

    .frequently-asked > h4 {
        font-size: 1.4em;
    }

    .frequently-asked > h2 {
        font-size: 2.5em;
    }

    .frequently-asked > h2 > span {
        font-size: 1em;
    }



    .fa-container {
        gap: 20px;
        width: 100%;
    }

    .fa-content-item {
        gap: 6%;
    }

    .fa-imgs-cont {
        width: 100%;
        height: auto;
    }

    .fa-content-item1 > div,
    .fa-content-item2 > div,
    .fa-content-item3 > div {
        gap: 10px;
    }

    .fa-content-item1 > div > h3,
    .fa-content-item2 > div > h3,
    .fa-content-item3 > div > h3 {
        font-size: clamp(11px, 4.8vw, 27px);
    }

    .fa-content-item1 > div > p,
    .fa-content-item2 > div > p,
    .fa-content-item3 > div > p {
        font-size: clamp(9px, 4.27vw, 24px);
    }

    .frequently-asked > a {
        margin-top: 80px;
    }

    /* footer */
    .pre-footer {
        margin-top: 40px;
    }

    .bg-gaimin {
        height: auto;
    }

    .power-of-gaimin {
        padding: 9% 2%;
    }

    .power-of-gaimin > h4 {
        font-size: 1em;
    }

    .power-of-gaimin > h3 {
        font-size: 1.8em;
    }

    .power-of-gaimin > h2 {
        font-size: 3.1em;
    }

    .power-of-gaimin > h2 > span {
        font-size: 1em;
    }

    .power-of-gaimin > p {
        font-size: 0.95em;
        width: 80%;
    }

    .download-btn-gaimin {
        width: 35%;
    }

    .download-btn-gaimin > div {
        font-size: 0.6em;
    }

    .track-text > h2 {
        font-size: 3em;
    }

    .track-text {
        gap: 20px;
    }

    .track-text img {
        width: 90px;
        height: 90px;
    }

    footer {
        margin-top: 40px;
    }

    .footer-top {
        height: 200px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-top > h2 {
        font-size: 2.5em;
    }

    .btn-contact-content div {
        font-size: 0.9em;
    }

    .btn-contact-content svg {
        width: 15px;
        height: auto;
    }

    .btn-contact-foo {
        width: 160px;
        height: 40px;
    }

    .footer-middle{
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 25px;
    }

    .footer-middle > ul {
        gap: 10px;
    }

    .footer-middle > ul > h3 {
        font-size: 1.7em;
    }
    
    .footer-middle > ul > li {
        font-size: 1.3em;
    }

    .footer-middle > ul > li > a > div {
        font-size: 1.1em;
    }

    .footer-bottom > h6 {
        font-size: 1em;
    }

    .footer-middle > ul > li > svg {
        width: 140px;
        height: auto;
    }
    
    .footer-middle > ul > li > img {
        width: 140px;
        height: auto;
    }
    
    .footer-middle > ul > li > a > svg {
        width: 10px;
        height: auto;
    }

    .trusted-footer-cont {
        position: absolute;
        bottom: 45px;
        right: 0;
        gap: 20px !important;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

@media  screen and (min-width: 371px) and (max-width: 480px){
     /* header */
    .header-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5% 5%;
    }

    .menu-color-mobile-blue {
        display: none;
    }

    .header-container > .logo-cont > img {
        width: 161px;
        height: 27.085px;
    }

    .logo-white {
        display: none;
    }

    .header-nav, .header-btn-cont {
        display: none;
    }

    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 30%;
        right: 5%;
        position: relative;
    }

    .menu-mobile-content {
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100vh;
        background: linear-gradient(286deg, rgba(68, 0, 153, 0.80) -1.03%, rgba(33, 23, 71, 0.80) 102.04%);
        backdrop-filter: blur(15px);
        display: none;
        flex-direction: column;
        align-items: center;
    }

    .menu-mobile-top {
        display: flex;
        flex-direction: row;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        padding: 4% 0;
        height: 20%;
    }

    .menu-mobile-top img {
        width: 40%;
        height: auto;
    }

    .menu-mobile-center {
        list-style: none;
        margin: 0;
        padding: 0;
        color: unset;
        display: flex;
        flex-direction: column;
        gap: 5%;
        height: 60%;
        width: 80%;
    }

    .menu-mobile-center > li {
        color: rgba(255, 255, 255, 0.70);
        font-family: "Clash Grotesk Semibold";
        font-size: 2.5em;
        font-style: normal;
        font-weight: 600;
        line-height: 96%;
        text-transform: capitalize;
    }

    .menu-mobile-center > li:hover {
        color: #FFF;
    }

    .menu-mobile-center > li > a {
        color: unset;
        text-decoration: none;
    }

    .menu-mobile-bottom {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5%;
    }

    .menu-mobile-bottom > a {
        height: auto;
        width: 15%;
    }

    .menu-mobile-bottom > a > svg {
        width: 100%;
        height: auto;
    }

    /* end header */

    /* home */
    .home-banner {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 2% 2% 0 2%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-mask {
        display: flex;
        flex-direction: column;
        gap: 13px;
        height: auto;
    }

    .home-banner .mask > video {
        padding: 0;
    }

    .masks-container {
        width: 100%;
        height: 455px;
        border-radius: 8px;
        overflow: hidden;
    }

    .mask {
        width: 100%;
        height: 100%;
        overflow: hidden;
        clip-path: none;
    }

    .mask > svg {
        display: none;
    }

    .grad-bg {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .mask-btn-container {
        display: none;
    }

    .mask-btn-container-mobile {
        display: block;
        position: relative;
        height: 65px;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    .mask-btn-content {
        justify-content: space-between;
        padding: 0 3%;
    }

    .mask-btn-content > img {
        width: 50px !important;
        height: auto !important;
        margin: 0;
    }

    .hero-social-media {
        top: 26%;
        gap: 10px;
    }

    .hero-social-media svg {
        width: 34px;
        height: auto;
    }

    .trust-site-logo,
    .digicert-logo {
        display: none;
    }

    .mask-btn-cont-txt h3 {
        font-size: clamp(16px, 4.5vw, 22px);
    }
    .mask-btn-cont-txt h4 {
        font-size: clamp(12px, 3.2vw, 16px);
    }

    .hero-imgs {
        margin: 12px 0 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        height: auto;
        max-height: unset;
    }

    .hero-img-text-cont {
        top: 0;
        width: 100%;
    }

    .hero-img-text {
        width: 100%;
        gap: 5px;
    }

    .hero-img-text h1 {
        font-size: 14vw;
        line-height: 100%;
    }

    .hero-img-text p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(12px, 18px, 22px);
        font-style: normal;
        font-weight: 400;
        line-height: 27.84px;
        text-transform: capitalize;
    }

    .hero-img-text p > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }

    .game-txt {
        font-size: 1em;
        background: unset;
        -webkit-text-fill-color: unset;
    }

    .money-txt {
        font-size: 1em;
    }

    .hero-img-cont {
        width: 100%;
        overflow-x: auto;
    }

    .hero-img-container {
        margin: 10px 0 30px 0;
        padding: 0;
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        gap: 10.31px;
        min-width: max-content;
    }

    .hero-img-container li {
        width: 200px;
        height: 200px;
    }

    .hero-img-container li > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .easport-team-content {
        height: fit-content;
        gap: 20px;
        width: 98%;
        padding: 31.61px 0 20px 0;
        max-height: unset;
    }

    .ea-title-img-desk {
        display: none;
    }

    .ea-title-img-mobile {
        display: block;
    }

    .easport-team-content-img {
        gap: 12px;
    }

    .easport-team-content > img {
        width: 80%;
        height: auto;
    }

    .easport-team-content-txt {
        padding-left: 14px;
    }

    .easport-title {
        width: 100%;
    }

    .easport-title h2 {
        font-size: clamp(2em, 37.426px, 50px);
        font-weight: 600;
        line-height: 98%;
    }

    .easport-title-img {
        gap: 5%;
    }

    .easport-title-img h2 {
        font-size: clamp(2em, 37.426px, 50px);
        font-weight: 600;
        line-height: 98%;
    }

    .easport-title-img p {
        display: none;
    }

    .easport-title-img img {
        width: 111px;
        height: auto;
    }

    .easport-team-content-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 80%;
        gap: 12px;
    }

    .easport-team-content-txt > p {
        display: block;
        color: #FFF;
        font-family: "Clash Grotesk";
        font-size: 1.1em;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
        margin-top: 10px;
    }

    .easport1 {
        height: auto;
        width: 94.25%;
    }

    .easport-img-desk {
        display: none;
    }

    .easport-img-mobile {
        display: block;
    }


    .easport1-text {
        bottom: 10%;
    }

    .easport1 h3 {
        font-size: clamp(1.2em, 18.171px, 22px);
        margin: 0;
    }

    .easport1 h4 {
        font-size: clamp(1.3em, 21.578px, 25px);
        margin: 0;
    }

    .company-logos {
        padding: 51px 1% 40.97px 1%;
        gap: 13.78px;
    }

    .company-logos h2 {
        font-size: clamp(1.9em, 43.682px, 60px);
    }

    .company-logos-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .company-logos-container > div {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .company-logos > div {
        width: 100%;
    }

    .company-logos-container > div > div {
        width: 166.178px;
        height: 59.824px;
    }

    .company-logos-container svg {
        width: 45%;
        height: auto;
    }

    .how-to-play {
        gap: 0;
        padding: 0;
    }

    .how-to-play-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .how-to-play-text {
        width: 92%;
    }
    
    .br-desk {
        display: none;
    }

    .br-mobile {
        display: block;
    }

    .how-to-play-text h2 {
        font-size: clamp( 1rem , 9.07vw, 50px);
    }

    .how-to-play-text h3 {
        font-size: clamp(1.4em, 24px, 40px);
        margin: 1.5rem 0;
    }

    .how-to-play-text h3 > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }
    
    .how-to-play-text p {
        font-size: clamp(1.1em, 18px, 35px);
        opacity: 0.5;
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-style: normal;
        font-weight: 500;
        line-height: 26px;
        text-transform: capitalize;
        margin-bottom: 36px;
    }

    .how-to-play-text p > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 95%;
        height: auto;
    }

    .carousel-3D-swiper-section .swiper-pagination-bullet {
        margin: 0 4px;
        width: 10px;
        height: 10px;
        z-index: 50;
        bottom: unset;
    }

    .htp-content2 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: unset;
    }

    .how-to-play-swiper {
        width: 100%;
    }

    .step-by-step {
        margin: 0;
        align-self: center;
        width: 365px;
    }

    .step-by-step-content {
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    .sbs-loader {
        top: 71px;
        left: 314px;
        right: 0;
    }

    .step1-cont {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 430px;
    }

    .step2-cont {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100%;
        height: 430px;
    }
    
    .mask-step1 {
        scale: 1;
        transform-origin: 40% 50%;
        clip-path: path('M4 11.1277C4 4.98204 8.98204 0 15.1277 0H311.499C317.645 0 322.627 4.98204 322.627 11.1277V58.1309C322.627 61.1586 320.944 63.9353 318.26 65.3363V65.3363C291.337 79.389 288.778 116.931 313.546 134.506L318.866 138.282C321.225 139.956 322.627 142.669 322.627 145.562V192.88C322.627 199.026 317.645 204.008 311.499 204.008H15.1277C8.98202 204.008 4 199.026 4 192.88V11.1277Z');
        width: 318.627px;
        height: 204.008px;
    }

    .mask-step2 {
        scale: 1;
        transform-origin: 40% 50%;
        clip-path: path('M4 11.1277C4 4.98204 8.98204 0 15.1277 0H311.499C317.645 0 322.627 4.98204 322.627 11.1277V58.1309C322.627 61.1586 320.944 63.9353 318.26 65.3363V65.3363C291.337 79.389 288.778 116.931 313.546 134.506L318.866 138.282C321.225 139.956 322.627 142.669 322.627 145.562V192.88C322.627 199.026 317.645 204.008 311.499 204.008H15.1277C8.98202 204.008 4 199.026 4 192.88V11.1277Z');
        width: 318.627px;
        height: 204.008px;
    }

    .bg-step1 {
        width: 82.637px;
        height: 30.445px;
    }

    .bg-step1 > div {
        color: #FFF;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(10px, 14.912px, 19px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
    }

    .sbs-loader-circle {
        width: 60.831px;
        height: 60.831px;
    }

    .sbs-loader-circle > svg {
        width: 20px;
        height: auto;
    }

    .sbs-loader-line1 {
        scale: 1;
        height: 369px;
    }

    .step1-text-cont {
        scale: 1;
        left: unset;
        width: 80%;
        gap: 5px;
        padding-left: 14px;
        margin-top: 17px;
    }

    .step1-text-cont h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1.5em, 21.514px, 26px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .step2-text-cont {
        scale: 1;
        left: unset;
        width: 80%;
        gap: 5px;
        padding-left: 14px;
        margin-top: 17px;
    }

    .step2-text-cont h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1.5em, 21.514px, 26px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .step2-text-cont p {
        font-size: clamp(1em, 16px, 23px);
        color: #409;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .step1-text-cont p {
        font-size: clamp(1em, 16px, 23px);
        color: #409;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .why-choose-gaiming {
        margin: 0;
    }

    .wcg-content {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wcg-content > video {
        mix-blend-mode: hard-light;
    }

    .wcg-content-mask {
        clip-path: path('M0 577.522V11.3684C0 5.08983 5.08982 1.06337e-07 11.3684 2.37511e-07L353.632 7.38814e-06C359.91 7.51931e-06 365 5.08982 365 11.3684V577.522V670.508V701.756V812.922V813.68V878.632C365 884.91 359.91 890 353.632 890H329.628C325.84 890 322.302 888.114 320.19 884.97L308.378 867.381C306.267 864.237 302.728 862.35 298.941 862.35H173.991C170.241 862.35 166.733 864.199 164.613 867.292L152.439 885.058C150.32 888.151 146.811 890 143.061 890H11.3684C5.08981 890 0 884.91 0 878.632V577.522Z');
        width: 365px;
        height: 890px;
    }

    .chapter-mobile {
        display: block;
    }

    .chapter-desk {
        display: none;
    }

    .wcg-content > img {
        position: relative;
        left: unset;
        width: 100%;
    }

    .wcg-text {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        padding: 30px 15px 0 15px;
        gap: 18px;
    }

    .wcg-text > h2 {
        color: #FFF;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1.6em, 25px, 35px);
        font-style: normal;
        font-weight: 600;
        line-height: 30.147px;
        text-transform: capitalize;
    }

    .wcg-text > h3 {
        font-size: clamp(1.2em, 18px, 24px);
        color: #FFF;
        font-family: "Clash Grotesk Semibold";
        font-style: normal;
        font-weight: 600;
        line-height: 18.189px;
        text-transform: capitalize;
        margin: 0;
    }

    .wcg-text > p {
        font-size: clamp(1em, 18px, 24px);
        color: #FFF;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
        margin-bottom: 1rem;
    }

    .fa-content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 98%;
        gap: 16px;
    }

    .fa-content > img {
        width: 100%;
    }

    .fa-home-img {
        display: none;
    }

    .fa-home-img-mobile {
        display: block;
    }

    .fa-content-item svg {
        width: 58.12px;
        height: 71.139px;
        align-self: flex-start;
    }

    .frequently-asked {
        margin-top: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .frequently-asked > h4 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em ,18px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .frequently-asked > h2 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(12px, 7.87vw, 40px);
        font-style: normal;
        font-weight: 600;
        text-transform: capitalize;
        margin: 18px 0 26px 0;
    }

    .frequently-asked > h2 > span {
        font-size: 1em;
    }

    .fa-container {
        gap: 15px;
        width: 100%;
    }

    .fa-imgs-cont {
        width: 100%;
        height: auto;
    }

    .fa-content-item1 > div,
    .fa-content-item2 > div,
    .fa-content-item3 > div {
        gap: 10px;
    }

    .fa-content-item1 > div > h3,
    .fa-content-item2 > div > h3,
    .fa-content-item3 > div > h3 {
        font-size: clamp(11px, 4.8vw, 27px);
    }

    .fa-content-item1 > div > p,
    .fa-content-item2 > div > p,
    .fa-content-item3 > div > p {
        font-size: clamp(9px, 4.27vw, 24px);
    }

    .frequently-asked > a {
        margin-top: 80px;
    }

    /* footer */
    .pre-footer {
        margin-top: 50px;
    }

    .bg-gaimin {
        height: auto;
        width: 98%;
    }

    .power-of-gaimin {
        padding: 9% 2%;
    }

    .power-of-gaimin > h4 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 18px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .power-of-gaimin > h3 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1.5em, 24px, 28px);
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        text-transform: capitalize;
    }

    .power-of-gaimin > h2 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(2.2em, 38px, 45px);
        font-style: normal;
        font-weight: 600;
        line-height: 35px;
        text-transform: capitalize;
    }

    .power-of-gaimin > h2 > span {
        font-size: 1em;
    }

    .power-of-gaimin > p {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(0.9em, 18px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .download-btn-gaimin {
        width: 60%;
    }

    .download-btn-gaimin > div {
        font-size: 0.8em;
    }

    .track-text > h2 {
        font-size: 3em;
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(3em, 43.619px, 60px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
    }

    .track-text {
        gap: 20px;
    }

    .track-text img {
        width: 52.351px;
        height: 52.351px;
    }

    footer {
        margin-top: 40px;
    }

    .footer-top {
        height: 216px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-top > h2 {
        font-size: 2.5em;
        margin: 0;
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(2.5em, 38px, 50px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
    }

    .btn-contact-content div {
        color: #FFF;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(0.9em, 17px, 22px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
    }

    .btn-contact-content svg {
        width: 15px;
        height: auto;
    }

    .btn-contact-foo {
        width: 160px;
        height: 40px;
    }

    .footer-middle{
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 50px;
    }

    .footer-middle > ul {
        gap: 20px;
    }

    .footer-middle > ul > h3 {
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(1.2em, 24px, 32px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    
    .footer-middle > ul > li {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 18px, 25);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .footer-middle > ul > li > a > div {
        font-size: 1.1em;
    }

    .footer-bottom > h6 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 16px, 21px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .footer-middle > ul > li > svg {
        width: 100px;
        height: auto;
    }
    
    .footer-middle > ul > li > img {
        width: 100px;
        height: auto;
    }
    
    .footer-middle > ul > li > a > svg {
        width: 9px;
        height: auto;
    }

    .trusted-footer-cont {
        position: absolute;
        bottom: 15px;
        right: 0;
        gap: 20px !important;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-bottom > div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 6%;
    }
}

@media  screen and (max-width: 371px){
        /* header */
        .header-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5% 5%;
    }

    .menu-color-mobile-blue {
        display: none;
    }

    .header-container > .logo-cont > img {
        width: 161px;
        height: 27.085px;
    }

    .logo-white {
        display: none;
    }

    .header-nav, .header-btn-cont {
        display: none;
    }

    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 30%;
        right: 5%;
        position: relative;
    }

    .menu-mobile-content {
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100vh;
        background: linear-gradient(286deg, rgba(68, 0, 153, 0.80) -1.03%, rgba(33, 23, 71, 0.80) 102.04%);
        backdrop-filter: blur(15px);
        display: none;
        flex-direction: column;
        align-items: center;
    }

    .menu-mobile-top {
        display: flex;
        flex-direction: row;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        padding: 4% 0;
        height: 20%;
    }

    .menu-mobile-top img {
        width: 40%;
        height: auto;
    }

    .menu-mobile-center {
        list-style: none;
        margin: 0;
        padding: 0;
        color: unset;
        display: flex;
        flex-direction: column;
        gap: 5%;
        height: 60%;
        width: 80%;
    }

    .menu-mobile-center > li {
        color: rgba(255, 255, 255, 0.70);
        font-family: "Clash Grotesk Semibold";
        font-size: 2.5em;
        font-style: normal;
        font-weight: 600;
        line-height: 96%;
        text-transform: capitalize;
    }

    .menu-mobile-center > li:hover {
        color: #FFF;
    }

    .menu-mobile-center > li > a {
        color: unset;
        text-decoration: none;
    }

    .menu-mobile-bottom {
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5%;
    }

    .menu-mobile-bottom > a {
        height: auto;
        width: 15%;
    }

    .menu-mobile-bottom > a > svg {
        width: 100%;
        height: auto;
    }


    /* end header */

    /* home */
    .home-banner {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 2% 2% 0 2%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-mask {
        display: flex;
        flex-direction: column;
        gap: 13px;
        height: auto;
    }

    .home-banner .mask > video {
        padding: 0;
    }

    .masks-container {
        width: 100%;
        height: 455px;
        border-radius: 8px;
        overflow: hidden;
    }

    .mask {
        width: 100%;
        height: 100%;
        overflow: hidden;
        clip-path: none;
    }

    .mask > svg {
        display: none;
    }

    .grad-bg {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .mask-btn-container {
        display: none;
    }

    .mask-btn-container-mobile {
        display: block;
        position: relative;
        height: 65px;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    .mask-btn-content {
        justify-content: space-between;
        padding: 0 3%;
    }

    .mask-btn-content > img {
        width: 50px !important;
        height: auto !important;
        margin: 0;
    }

    .hero-social-media {
        top: 26%;
        gap: 10px;
    }

    .hero-social-media svg {
        width: 34px;
        height: auto;
    }

    .trust-site-logo,
    .digicert-logo {
        display: none;
    }

    .mask-btn-cont-txt h3 {
        font-size: clamp(10px, 4.5vw, 22px);
    }
    .mask-btn-cont-txt h4 {
        font-size: clamp(10px, 3.2vw, 16px);
    }

    .hero-imgs {
        margin: 12px 0 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        height: auto;
        max-height: unset;
    }

    .hero-img-text-cont {
        top: 0;
        width: 100%;
    }

    .hero-img-text {
        width: 100%;
        gap: 5px;
    }

    .hero-img-text h1 {
        font-size: 14vw;
        line-height: 100%;
    }

    .hero-img-text p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(12px, 14px, 22px);
        font-style: normal;
        font-weight: 400;
        line-height: 27.84px;
        text-transform: capitalize;
    }

    .hero-img-text p > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }

    .game-txt {
        font-size: 1em;
        background: unset;
        -webkit-text-fill-color: unset;
    }

    .money-txt {
        font-size: 1em;
    }

    .hero-img-cont {
        width: 100%;
        overflow-x: auto;
    }

    .hero-img-container {
        margin: 10px 0 30px 0;
        padding: 0;
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        width: 100%;
        min-width: max-content;
        justify-content: flex-start;
        gap: 10.31px;
    }

    .hero-img-container li {
        width: 200px;
        height: 200px;
    }

    .hero-img-container li > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-img-container img {
        width: 189.77px;
        height: 146.117px;
    }

    .easport-team-content {
        height: fit-content;
        gap: 20px;
        width: 98%;
        padding: 31.61px 0 20px 0;
        max-height: unset;
    }

    .ea-title-img-desk {
        display: none;
    }

    .ea-title-img-mobile {
        display: block;
    }

    .easport-team-content-img {
        gap: 12px;
    }

    .easport-team-content > img {
        width: 80%;
        height: auto;
    }

    .easport-team-content-txt {
        padding-left: 14px;
    }

    .easport-title {
        width: 100%;
    }

    .easport-title h2 {
        font-size: clamp(1em, 28.426px, 50px);
        font-weight: 600;
        line-height: 98%;
    }

    .easport-title-img {
        gap: 5%;
    }

    .ea-title-img-desk {
        display: none;
    }

    .ea-title-img-mobile {
        display: block;
    }

    .easport-title-img h2 {
        font-size: 28px;
        font-weight: 600;
        line-height: 98%;
    }

    .easport-title-img p {
        display: none;
    }

    .easport-title-img img {
        width: 111px;
        height: auto;
    }

    .easport-team-content-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 80%;
        gap: 12px;
    }

    .easport-team-content-txt > p {
        display: block;
        color: #FFF;
        font-family: "Clash Grotesk";
        font-size: 1.1em;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
        margin-top: 10px;
    }

    .easport1 {
        height: auto;
        width: 94.25%;
    }

    .easport-img-desk {
        display: none;
    }

    .easport-img-mobile {
        display: block;
    }


    .easport1-text {
        bottom: 10%;
    }

    .easport1 h3 {
        font-size: clamp(1.2em, 18.171px, 22px);
        margin: 0;
    }

    .easport1 h4 {
        font-size: clamp(1.3em, 21.578px, 25px);
        margin: 0;
    }

    .company-logos {
        padding: 51px 1% 40.97px 1%;
        gap: 13.78px;
    }

    .company-logos h2 {
        font-size: clamp(1em, 35.682px, 60px);
    }

    .company-logos-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .company-logos-container > div {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .company-logos > div {
        width: 100%;
    }

    .company-logos-container > div > div {
        width: 166.178px;
        height: 59.824px;
    }

    .company-logos-container svg {
        width: 45%;
        height: auto;
    }

    .how-to-play {
        gap: 0;
        padding: 0;
    }

    .how-to-play-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .how-to-play-text {
        width: 92%;
    }
    
    .br-desk {
        display: none;
    }

    .br-mobile {
        display: block;
    }

    .how-to-play-text h2 {
        font-size: clamp( 1rem , 9.07vw, 50px);
    }

    .how-to-play-text h3 {
        font-size: clamp(1em, 22px, 40px);
        margin: 1.5rem 0;
    }

    .how-to-play-text h3 > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }
    
    .how-to-play-text p {
        font-size: clamp(1em, 16px, 35px);
        opacity: 0.5;
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-style: normal;
        font-weight: 500;
        line-height: 26px;
        text-transform: capitalize;
        margin-bottom: 36px;
    }

    .how-to-play-text p > strong {
        font-size: 500;
        font-family: "Clash Grotesk Medium";
    }

    .carousel-3D-swiper-section {
        width: 100%;
    }

    .carousel-3D-swiper .swiper-slide {
        width: 75%;
        height: auto;
    }

    .carousel-3D-swiper-section .swiper-pagination-bullet {
        margin: 0 4px;
        width: 10px;
        height: 10px;
        z-index: 50;
    }

    .swiper-cont img {
        border-radius: 20px;
    }

    .htp-content2 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: unset;
    }

    .how-to-play-swiper {
        width: 100%;
    }

    .step-by-step {
        margin: 0;
        align-self: center;
        width: 290px;
    }

    .step-by-step-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .sbs-loader {
        top: 56px;
        left: 246px;
        right: 0;
    }

    .step1-cont {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 360px;
        gap: 0;
    }

    .step2-cont {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100%;
        height: 360px;
        gap: 0;
    }
    
    .mask-step1 {
        clip-path: path('M243.627 10.8423C243.627 4.85425 238.773 0 232.785 0H11.7546C5.60899 0 0.62695 4.98204 0.62695 11.1277V52.8354V80.4962V118.103V159.81C0.62695 165.956 5.60899 170.938 11.7546 170.938H232.499C238.645 170.938 243.627 165.956 243.627 159.81V121.874C243.627 119.495 242.527 117.25 240.646 115.792L236.072 112.247C216.572 97.1308 218.7 67.0478 240.134 54.8272V54.8272C242.293 53.5957 243.627 51.3003 243.627 48.814V10.8423Z');
        width: 243px;
        height: 171px;
    }

    .mask-step2 {
        clip-path: path('M243.627 10.8423C243.627 4.85425 238.773 0 232.785 0H11.7546C5.60899 0 0.62695 4.98204 0.62695 11.1277V52.8354V80.4962V118.103V159.81C0.62695 165.956 5.60899 170.938 11.7546 170.938H232.499C238.645 170.938 243.627 165.956 243.627 159.81V121.874C243.627 119.495 242.527 117.25 240.646 115.792L236.072 112.247C216.572 97.1308 218.7 67.0478 240.134 54.8272V54.8272C242.293 53.5957 243.627 51.3003 243.627 48.814V10.8423Z');
        width: 243px;
        height: 171px;
    }

    .bg-step1 {
        width: 82.637px;
        height: 30.445px;
    }

    .bg-step1 > div {
        color: #FFF;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(10px, 14.912px, 19px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
    }

    .sbs-loader-circle {
        width: 60.831px;
        height: 60.831px;
    }

    .sbs-loader-circle > svg {
        width: 20px;
        height: auto;
    }

    .sbs-loader-line1 {
        scale: 1;
        height: 339px;
    }

    .step1-text-cont {
        scale: 1;
        left: unset;
        width: 80%;
        gap: 5px;
        padding-left: 14px;
        margin-top: 17px;
    }

    .step1-text-cont h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1.5em, 21.514px, 26px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .step2-text-cont {
        scale: 1;
        left: unset;
        width: 80%;
        gap: 5px;
        padding-left: 14px;
        margin-top: 17px;
    }

    .step2-text-cont h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1.5em, 21.514px, 26px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .step2-text-cont p {
        font-size: clamp(0.9em, 16px, 23px);
        color: #409;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .step1-text-cont p {
        font-size: clamp(0.9em, 16px, 23px);
        color: #409;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .why-choose-gaiming {
        margin: 0;
    }

    .wcg-content {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wcg-content > video {
        mix-blend-mode: hard-light;
    }

    .wcg-content-mask {
        clip-path: path('M0 577.522V11.3684C0 5.08983 5.08981 1.33838e-07 11.3684 2.98936e-07L278.632 7.32671e-06C284.91 7.49181e-06 290 5.08982 290 11.3684V577.522V670.508V701.756V812.922V813.68V878.632C290 884.91 284.91 890 278.632 890H263.901C259.704 890 255.848 887.687 253.871 883.983L245.539 868.367C243.563 864.664 239.707 862.35 235.509 862.35H140.234C136.071 862.35 132.24 864.626 130.25 868.283L121.655 884.068C119.664 887.724 115.834 890 111.671 890H11.3684C5.08982 890 0 884.91 0 878.632V577.522Z');
        width: 290px;
        height: 890px;
    }

    .chapter-mobile {
        display: block;
    }

    .chapter-desk {
        display: none;
    }

    .wcg-content > img {
        position: relative;
        left: unset;
        width: 100%;
    }

    .wcg-text {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        padding: 30px 15px 0 15px;
        gap: 18px;
    }

    .wcg-text > h2 {
        color: #FFF;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(1em, 22px, 35px);
        font-style: normal;
        font-weight: 600;
        line-height: 30.147px;
        text-transform: capitalize;
    }

    .wcg-text > h3 {
        font-size: clamp(1.2em, 18px, 24px);
        color: #FFF;
        font-family: "Clash Grotesk Semibold";
        font-style: normal;
        font-weight: 600;
        line-height: 18.189px;
        text-transform: capitalize;
        margin: 0;
    }

    .wcg-text > p {
        font-size: clamp(0.8em, 15px, 24px);
        color: #FFF;
        font-family: "Clash Grotesk";
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
        margin-bottom: 1rem;
    }

    .fa-imgs-cont {
        width: 100%;
        height: auto;
    }

    .fa-content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 98%;
        gap: 16px;
    }

    .fa-content > img {
        width: 100%;
    }

    .fa-home-img {
        display: none;
    }

    .fa-home-img-mobile {
        display: block;
    }

    .fa-content-item svg {
        width: 58.12px;
        height: 71.139px;
        align-self: flex-start;
    }

    .frequently-asked {
        margin-top: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .frequently-asked > h4 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em ,18px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .frequently-asked > h2 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 28px, 50px);
        font-style: normal;
        font-weight: 600;
        text-transform: capitalize;
        margin: 18px 0 26px 0;
    }

    .frequently-asked > h2 > span {
        font-size: 1em;
    }

    .fa-container {
        gap: 15px;
        width: 100%;
    }

    .fa-content-item1 > div,
    .fa-content-item2 > div,
    .fa-content-item3 > div {
        gap: 10px;
    }

    .fa-content-item1 > div > h3,
    .fa-content-item2 > div > h3,
    .fa-content-item3 > div > h3 {
        font-size: clamp(11px, 4.8vw, 27px);
    }

    .fa-content-item1 > div > p,
    .fa-content-item2 > div > p,
    .fa-content-item3 > div > p {
        font-size: clamp(9px, 4.27vw, 24px);
    }

    .frequently-asked > a {
        margin-top: 80px;
    }

    /* footer */
    .pre-footer {
        margin-top: 50px;
    }

    .bg-gaimin {
        height: auto;
        width: 98%;
    }

    .power-of-gaimin {
        padding: 9% 2%;
    }

    .power-of-gaimin > h4 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(0.7em, 13px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .power-of-gaimin > h3 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 19px, 28px);
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        text-transform: capitalize;
    }

    .power-of-gaimin > h2 {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 30px, 45px);
        font-style: normal;
        font-weight: 600;
        line-height: 35px;
        text-transform: capitalize;
    }

    .power-of-gaimin > h2 > span {
        font-size: 1em;
    }

    .power-of-gaimin > p {
        color: #FFF;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(0.7em, 10px, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        text-transform: capitalize;
    }

    .download-btn-gaimin {
        width: 60%;
    }

    .download-btn-gaimin > div {
        font-size: 0.8em;
    }

    .track-text > h2 {
        font-size: 3em;
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(3em, 43.619px, 60px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
    }

    .track-text {
        gap: 20px;
    }

    .track-text img {
        width: 52.351px;
        height: 52.351px;
    }

    footer {
        margin-top: 40px;
    }

    .footer-top {
        height: 216px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-top > h2 {
        font-size: 2.5em;
        margin: 0;
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(2.5em, 38px, 50px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
    }

    .btn-contact-content div {
        color: #FFF;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(0.9em, 17px, 22px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
    }

    .btn-contact-content svg {
        width: 15px;
        height: auto;
    }

    .btn-contact-foo {
        width: 160px;
        height: 40px;
    }

    .footer-middle{
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 50px;
    }

    .footer-middle > ul {
        gap: 20px;
    }

    .footer-middle > ul > h3 {
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(1.2em, 24px, 32px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    
    .footer-middle > ul > li {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 18px, 25);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .footer-middle > ul > li > a > div {
        font-size: 1.1em;
    }

    .footer-bottom > h6 {
        color: #409;
        text-align: center;
        font-family: "Clash Grotesk";
        font-size: clamp(1em, 16px, 21px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .footer-middle > ul > li > svg {
        width: 100px;
        height: auto;
    }
    
    .footer-middle > ul > li > img {
        width: 100px;
        height: auto;
    }
    
    .footer-middle > ul > li > a > svg {
        width: 9px;
        height: auto;
    }

    .trusted-footer-cont {
        position: absolute;
        bottom: 15px;
        right: 0;
        gap: 20px !important;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-bottom > div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 6%;
    }
}