.test {
    border: 2px solid #ff0600;
}

.gsap-all-ease{
    transition: all 1s cubic-bezier(0.42, -0.33, 0.24, 1);
}

.am-r1-1 {
    position: fixed;
    top: -13%;
    left: -16%;
    width: 130%;
    height: 57%;
    z-index: 4;
}

.am-r1-2 {
    position: fixed;
    top: -57%;
    left: -16%;
    width: 130%;
    height: 57%;
    z-index: 4;
}

.am-r2-1 {
    position: fixed;
    top: -13%;
    left: -16%;
    width: 130%;
    height: 141%;
    z-index: 3;
}

.am-r2-2 {
    position: fixed;
    top: -143%;
    left: -16%;
    width: 130%;
    height: 141%;
    z-index: 3;
}

.spin {
    border-radius: 50%;
    animation: spin 2.5s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}
@font-face {
    font-family: "PSL PojamarnSpecial Pro";
    src: url('../fonts/PSL253pro.otf') format('truetype');
}

.youtube-ps {
    height: 130%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -42%);
    width: 130%;
    -ms-transform: translate(-50%, -42%);
    -webkit-transform: translate(-50%, -50%);
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .clip-bg-blend {
        display: block !important;
        mix-blend-mode: color-dodge;
        z-index: 0 !important;
        pointer-events: none;
        opacity: .9;
    }
}

/* กำหนดขนาด scrollbar */
.level-info-fm-container::-webkit-scrollbar {
    width: 9px;
    height: 9px;
    border-radius: 10px;
}

/* Track (พื้นหลังของ scrollbar) */
.level-info-fm-container::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #9F8A6B;
    border: 2px solid #9F8A6B;
}

/* Handle (ตัวเลื่อน) */
.level-info-fm-container::-webkit-scrollbar-thumb {

    border-radius: 10px;
    background-color: #3D0404;
    border: 2px solid #3D0404;
}

/* Hover บน Handle */
.level-info-fm-container::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background-color: #3D0404;
    border: 2px solid #3D0404;

}

.background-image,
.background-image-parent {
    display: flex;
    flex-direction: column;
    position: relative;
}

.background-image-parent {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    font-size: 1rem;
    color: #fff;
    font-family: Kanit;
}

.background-image {
    align-self: stretch;
    /* height: 55rem; */
    overflow: hidden;
    flex-shrink: 0;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
    gap: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 0;
    background-image: url(../public/Background-Image.png);
}

.fireworks-loop-1 {
    width: 120rem;
    height: 67.5rem;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 540px);
    left: calc(50% - 960px);
    filter: blur(4px);
    background: linear-gradient(180deg, transparent 30.77%, #000 84.62%);
    mix-blend-mode: screen;
    z-index: 0;
}

.left-column,
.main-content {
    display: flex;
    align-items: flex-start;
}

.main-content {
    width: 100%;
    position: relative;
    gap: 0.625rem;
    max-width: 82.5rem;
    /* min-height: 55rem; */
    z-index: 1;
}

.left-column {
    align-self: stretch;
    flex: 1;
    flex-direction: column;
    z-index: 0;
    flex-shrink: 0;
}

.left-column-fm-container {
    align-self: stretch;
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.625rem;
}

.carnival-image-fm-container,
.left-column-background {
    /* height: 55rem; */
    width: 40.938rem;
    position: relative;
    /* object-fit: cover; */
    z-index: 0;
    flex-shrink: 0;
}

.carnival-image-fm-container {
    /* height: 20%; */
    /* width: 20%; */
    position: absolute;
    margin: 0 !important;
    top: -4%;
    left: -27%;
    /* height: 20%; */
    width: 150%;
    z-index: 1;
}

.right-column,
.top-section {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.right-column {
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    padding: 2rem 0;
    gap: 1rem;
    z-index: 1;
    flex-shrink: 0;
}

.top-section {
    align-items: flex-start;
    position: relative;
    gap: 0.625rem;
}

.top-section-background {
    width: 40.938rem;
    height: 25.563rem;
    position: relative;
    object-fit: cover;
    z-index: 0;
}

.top-section-image {
    /* width: 40.75rem; */
    position: absolute;
    /* margin: 0 !important; */
    /* top: calc(50% - 244.5px); */
    /* left: calc(50% - 326.5px); */
    /* max-height: 100%; */
    /* object-fit: cover; */
    z-index: 1;
    top: -12%;
    left: -15%;
    /* height: 100%; */
    width: 130%;
}

.bottom-section,
.download-game-fm-container-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bottom-section {
    /* height: 22.438rem; */
    overflow: hidden;
    flex-shrink: 0;
    gap: 1.25rem;
}

.download-game-fm-container-wrapper {
    text-decoration: none;
}

.download-game-fm-container {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
}

.buttons-fm-container {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 1.625rem;
}

.button-fm-container-wrapper {
    text-decoration: none;
    /* width: 19.656rem; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.button-fm-container-icon {
    width: 19.656rem;
    flex: 1;
    max-height: 100%;
    object-fit: cover;
}

.background-image-d5f036d-ec32-474b-8425-1c661f2-icon,
.d5f036d-ec32-474b-8425-1c661f2-icon {
    width: 22.006rem;
    position: absolute;
    margin: 0 !important;
    top: 1.5rem;
    left: -9.187rem;
    max-height: 100%;
    object-fit: contain;
    display: none;
    mix-blend-mode: lighten;
    z-index: 2;
    flex-shrink: 0;
}

.background-image-d5f036d-ec32-474b-8425-1c661f2-icon {
    width: 31.888rem;
    top: -1.75rem;
    left: 25.313rem;
    z-index: 3;
}

.right-column-image {
    height: 28.5rem;
    width: 37.938rem;
    position: absolute;
    margin: 0 !important;
    top: 3.875rem;
    left: 42.188rem;
    z-index: 4;
    flex-shrink: 0;
}

.icon-fm-container,
.logo-image-icon {
    position: absolute;
    margin: 0 !important;
    right: 1rem;
}

.logo-image-icon {
    width: 10.625rem;
    top: 5.313rem;
    max-height: 100%;
    object-fit: cover;
    z-index: 2;
    left: 10px;
    position: fixed;
    z-index: 22222;
}
.logo-image-icon.ps-1{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 40%;
}
.logo-image-icon.ps-2{
    /* left: 50%; */
    /* top: 50%; */
    /* transform: translate(-50%, -50%); */
    /* width: 10%; */
    width: 10.625rem;
    top: 5.313rem;
    max-height: 100%;
    object-fit: cover;
    z-index: 2;
    left: 10px;
    position: fixed;
    z-index: 22222;
}

.icon-fm-container {
    width: 11.638rem;
    height: 22.75rem;
    top: 20.813rem;
    z-index: 3;
}

.icon-list {
    position: absolute;
    top: 5.125rem;
    left: 0.25rem;
    border-radius: 10px;
    background: linear-gradient(0deg, #a41e21, #3a0000);
    border: 1px solid #ffe734;
    box-sizing: border-box;
    width: 10.938rem;
    height: 17.625rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2.75rem 2.25rem;
    gap: 1.187rem;
}

.icon-item {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
}

.user-solid-full-1-icon {
    width: 1.875rem;
    position: relative;
    max-height: 100%;
}

.icon-label {
    position: relative;
    text-transform: capitalize;
}

.repeat-group-1 {
    width: 10.063rem;
    height: 22.969rem;
    position: relative;
    margin: 0 !important;
}

.repeat-group-1-child,
.repeat-group-1-item {
    position: absolute;
    top: 1.375rem;
    left: 0.438rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff19e, #ffcd18);
    width: 0.313rem;
    height: 0.313rem;
}

.repeat-group-1-item {
    left: 10.188rem;
}

.tent-fm-container-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.638rem;
    height: 5.938rem;
    object-fit: cover;
}

.bottom-bar {
    width: 120rem;
    height: 4.625rem;
    position: absolute;
    margin: 0 !important;
    bottom: 0;
    left: calc(50% - 960px);
    background: linear-gradient(180deg, transparent, #000);
    z-index: 4;
}

.rectangle-parent {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7.125rem 1rem;
    position: relative;
    gap: 7.75rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 0;
    font-size: 2rem;
    color: #7a6344;
    font-family: "PSL PojamarnSpecial Pro" !important;
    background: url(../public/Rectangle39748.jpg) lightgray 50% / cover no-repeat;
}

.frame-child {
    width: 120rem;
    height: 14.688rem;
    position: absolute;
    margin: 0 !important;
    top: 0;
    left: calc(50% - 960px);
    background: linear-gradient(0deg, transparent, #000);
    z-index: 0;
}

.vector-smart-object-4 {
    width: 17.575rem;
    position: absolute;
    margin: 0 !important;
    top: 277.625rem;
    left: 98.125rem;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
}

.main-frame,
.main-frame-parent {
    display: flex;
    flex-direction: column;
}

.main-frame-parent {
    width: 100%;
    align-items: flex-start;
    gap: 6.5rem;
    max-width: 82.5rem;
    z-index: 2;
}

.main-frame {
    align-self: stretch;
    align-items: flex-end;
    position: relative;
    gap: 1.75rem;
}

.header-fm-container-icon {
    width: 48.369rem;
    height: 7.438rem;
    object-fit: cover;
    z-index: 0;
}

.component-1 {
    align-self: stretch;
    /* height: 39.313rem; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 1rem;
    z-index: 1;
}

.background-image-background-shape,
.background-shape {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 !important;
    box-shadow: 0 0 22.3px rgba(0, 0, 0, 0.25);
    transform-origin: 0 0;
}

.background-shape {
    /* top: calc(50% - 290.8px); */
    /* left: calc(50% - 670.8px); */
    background-color: #eadfc4;
    transform: rotate(-2deg) translate(-50%, -50%);
    z-index: 0;
    top: 50%;
    left: 50%;
}

.background-image-background-shape {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #a8866d;
    transform: rotate(-1deg) translate(-50%, -50%);
    z-index: 1;
}

.main-content-fm-container {
    align-self: stretch;
    /* min-height: 39.313rem; */
    box-shadow: 0 0 22.3px rgba(0, 0, 0, 0.25), 0 0 0 5px #9f8a6b inset, 0 0 0 16px #f5ecd6 inset, 0 0 0 18px #9f8a6b inset;
    background-color: #f5ecd6;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 4rem;
    box-sizing: border-box;
    gap: 1rem;
    min-height: 39.313rem;
    z-index: 2;
    flex-direction: column;
}

.image-background-icon,
.image-fm-container {
    align-self: stretch;
    flex: 1;
    position: relative;
}

.image-fm-container {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    position: relative;
}

.image-background-icon {
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
    z-index: 0;
    flex-shrink: 0;
}

.image-frame-icon {
    /* height: 48.5rem; */
    /* width: 35.875rem; */
    position: absolute;
    margin: 0 !important;
    /* top: -13.187rem; */
    /* left: -1.437rem; */
    /* object-fit: cover; */
    z-index: 1;
    flex-shrink: 0;
    top: -35.5%;
    left: -13%;
    /* height: 20%; */
    width: 118%;
}

.text-fm-container {
    /* width: 42.438rem; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
}

.text-section-icon {
    width: 42.438rem;
    height: 9.875rem;
    position: relative;
    object-fit: cover;
}

.background-image-text-section-icon {
    align-self: stretch;
    height: 9.875rem;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}

.gemini-generated-image-21t4k12-icon {
    width: 11.813rem;
    position: absolute;
    margin: 0 !important;
    top: 0.688rem;
    left: 21.313rem;
    max-height: 100%;
    object-fit: cover;
    z-index: 2;
}

.background,
.image-background {
    width: 82.5rem;
    height: 39.313rem;
    position: absolute;
    margin: 0 !important;
    top: 1.606rem;
    left: -0.994rem;
    box-shadow: 0 0 22.3px rgba(0, 0, 0, 0.25);
    background-color: #eadfc4;
    transform: rotate(-2.2deg);
    transform-origin: 0 0;
    z-index: 0;
}

.image-background {
    top: 3.188rem;
    left: -1.875rem;
    background-color: #a8866d;
    transform: rotate(-4.4deg);
    z-index: 1;
}

.content-fm-container,
.main-image,
.main-image-p1,
.main-image-p2,
.main-image-p3 {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
}

.main-image {
    min-height: 39.313rem;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 2;
    background: url(../public/Rectangle39749.png) 100px 160px repeat, #F5ECD6;
    background-blend-mode: lighten, normal;
    box-shadow: 0 0 22.3px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px #9F8A6B inset, 0 0 0 16px #F5ECD6 inset, 0 0 0 18px #9F8A6B inset;
}

.main-image-p1 {
    /* min-height: 37.313rem; */
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    padding: 4rem 2rem 5rem 2rem;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 2;
    background: url(../public/Rectangle39749.png) 100px 160px repeat, #F5ECD6;
    background-blend-mode: lighten, normal;
    box-shadow: 0 0 22.3px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px #9F8A6B inset, 0 0 0 16px #F5ECD6 inset, 0 0 0 18px #9F8A6B inset;
}

.main-image-p2 {
    min-height: 39.313rem;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    padding: 5rem 5rem;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 2;
    background: url(../public/Rectangle39749.png) 100px 160px repeat, #F5ECD6;
    background-blend-mode: lighten, normal;
    box-shadow: 0 0 22.3px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px #9F8A6B inset, 0 0 0 16px #F5ECD6 inset, 0 0 0 18px #9F8A6B inset;
}

.main-image-p3 {
    /*min-height: 39.313rem;*/
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    padding: 5rem 2rem;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 2;
    background: url(../public/Rectangle39749.png) 100px 160px repeat, #F5ECD6;
    background-blend-mode: lighten, normal;
    box-shadow: 0 0 22.3px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px #9F8A6B inset, 0 0 0 16px #F5ECD6 inset, 0 0 0 18px #9F8A6B inset;
}

.content-fm-container {
    gap: 2.625rem;
}

.frame-parent {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.625rem;
}

.frame-inner,
.frame-item {
    /* height: 31.063rem; */
    width: 26.75rem;
    /* object-fit: cover; */
    z-index: 0;
}

.frame-inner {
    position: absolute;
    margin: 0 !important;
    /* top: 0; */
    /* left: 0; */
    z-index: 1;
    /* top: -4%; */
    /* left: -6%; */
    /* width: 99%; */
    top: -5%;
    left: -6%;
    width: 105%;
}

.background-image-text-fm-container {
    /* width: 49.125rem; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.title-fm-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    color: #6e5a3b;
    font-family: "PSL PojamarnSpecial Pro" !important;
}

.title {
    position: relative;
    line-height: 0.85;
}

.subtitle-fm-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: 2.25rem;
}

.subtitle-fm-container-child {
    height: 1.656rem;
    width: 9.863rem;
    object-fit: cover;
}

.step-fm-container {
    align-self: stretch;
    flex-direction: column;
    gap: 1rem;
    margin-top: -25px;
}

.step,
.step-fm-container,
.step-image {
    display: flex;
    align-items: flex-start;
}

.step {
    align-self: stretch;
    gap: 1.5rem;
}

.step-image {
    flex: 1;
    border-radius: 78px;
    background-color: #dac5a6;
    padding: 0.75rem;
    gap: 0.2rem;
    font-size: 1.85rem;
    color: #7a6344;
    font-family: "PSL PojamarnSpecial Pro" !important;
    position: relative;
    height: 100%;
    background-image: url(../public/icon-bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

.step-image::before {
    /* position: absolute; */
    /* z-index: 0; */
    /* top: -24px; */
    /* right: -30px; */
    /* width: 20%; */
    /* height: 124px; */
    /* content: ''; */
    /* transform: translate(-50%, 0); */
    /* pointer-events: none; */
    /* background-image: url(public/icon-bg.png); */
    /* background-repeat: no-repeat; */
    /* background-position: center center; */
    /* background-size: 100%; */
}

.step-image-frame {
    align-self: stretch;
    width: 4.125rem;
    position: relative;
}

.step-image-mask {
    position: absolute;
    top: -0.9rem;
    left: -0.85rem;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
}

.step-text-fm-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.step-description {
    position: relative;
    font-size: 1rem;
    font-family: Kanit;
    color: #7c5d5d;
}

.footer,
.footer-fm-container {
    display: flex;
    align-items: center;
    gap: 2.125rem;
}

.footer-fm-container {
    align-self: stretch;
    min-height: 9.5rem;
    border-radius: 22px;
    background-color: #dac5a6;
    padding: 1rem;
    box-sizing: border-box;
    margin-top: 20px;
    font-size: 2rem;
    color: #7a6344;
    font-family: "PSL PojamarnSpecial Pro" !important;
}

.footer {
    flex: 1;
}

.footer-image-fm-container {
    height: 7.563rem;
    width: 8.625rem;
    display: flex;
    align-items: flex-start;
    padding: 0.625rem;
    box-sizing: border-box;
    position: relative;
}

.footer-image-frame {
    height: 10.938rem;
    width: 10.938rem;
    position: absolute;
    margin: 0 !important;
    top: -1.675rem;
    left: -1.125rem;
    object-fit: cover;
    z-index: 0;
    flex-shrink: 0;
}

.footer-text-fm-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    font-family: "PSL PojamarnSpecial Pro" !important;
    color: #7a6344;
}

.footer-description,
.footer-title {
    align-self: stretch;
    position: relative;
}

.footer-description {
    font-size: 1rem;
    font-family: Kanit;
    color: #7c5d5d;
}

.p {
    margin: 0;
}

.footer-button,
.footer-button-fm-container {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.footer-button-fm-container {
    text-decoration: none;
    width: 11.625rem;
    color: #ffe9cb;
}

.footer-button {
    flex: 1;
    border-radius: 10px;
    background-color: #6e5a3b;
    justify-content: center;
    padding: 1rem;
}

.frame-group {
    width: 6.319rem;
    height: 35.688rem;
    position: absolute;
    margin: 0 !important;
    top: 1.831rem;
    left: -13.75rem;
    display: none;
    z-index: 3;
}

.ellipse-parent {
    position: absolute;
    top: 0;
    left: 2rem;
    width: 2.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.812rem;
}

.ellipse-div {
    width: 2.188rem;
    height: 2.125rem;
    position: relative;
    border-radius: 50%;
    border: 8px solid #ffd19c;
    box-sizing: border-box;
}

.vector-icon {
    width: 0;
    height: 30.75rem;
    position: relative;
    border-radius: 7px;
}

.background-image-frame-child {
    width: 2.188rem;
    height: 2.188rem;
    position: relative;
    border-radius: 50%;
    border: 8px solid #ffd19c;
    box-sizing: border-box;
}

.group-parent {
    position: absolute;
    top: 5.938rem;
    left: 0;
    width: 6.319rem;
    height: 23.75rem;
}

.group-child {
    top: 8.713rem;
}

.group-child,
.group-inner,
.group-item {
    position: absolute;
    left: 0;
    width: 6.319rem;
    height: 6.319rem;
}

.group-item {
    top: 0;
}

.group-inner {
    top: 17.431rem;
}

.close-button-fm-container,
.close-button-fm-container-wrapper {
    /* width: 5rem; */
    /* height: 6.413rem; */
    position: absolute;
    /* margin: 0 !important; */
    cursor: pointer;
}

.close-button-fm-container-wrapper {
    /* text-decoration: none; */
    top: -1.006rem;
    right: -1.05rem;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
    /* padding: 0.625rem; */
    /* box-sizing: border-box; */
    z-index: 999;
    display: block;
    width: 5rem;
}

.close-button-fm-container {
    /* top: 0; */
    /* left: 0; */
    /* object-fit: cover; */
    /* z-index: 0; */
}

.button-fm-container-frame,
.button-fm-container-icon2 {
    /* height: 4.988rem; */
    width: 20.375rem;
    /* position: absolute; */
    margin: 0 !important;
}

.button-fm-container-icon3 {
    /* height: 4.988rem; */
    width: 20.375rem;
    /* position: absolute; */
    /* margin: 0 !important; */
}

.button-fm-container-icon4 {
    height: 4.988rem;
    width: 20.375rem;
    position: absolute;
    margin: 0 !important;
    bottom: -5.3rem;
}

.button-fm-container-icon5 {
    /* height: 4.988rem; */
    width: 20.375rem;
    /* position: absolute; */
    margin: 0 !important;
}

.button-fm-container-icon6 {
    /* height: 4.988rem; */
    width: 20.375rem;
    position: absolute;
    margin: 0 !important;
}

.button-fm-container-frame {
    text-decoration: none;
    bottom: 0;
    left: 31.063rem;
    display: flex;
    align-items: flex-start;
    padding: 0.625rem;
    box-sizing: border-box;
    z-index: 5;
}

.button-fm-container-icon2 {
    /* bottom: -6px; */
    /* left: calc(50% - 163px); */
    /* object-fit: cover; */
    /* z-index: 0; */
}

.button-fm-container-icon3 {
    /* bottom: 19px; */
    /* left: calc(50% - 163px); */
    object-fit: cover;
    z-index: 0;
}

.button-fm-container-icon4 {
    /* bottom: -9px; */
    left: calc(50% - 171px);
    width: 24rem;
}

.button-fm-container-icon5 {
    /* bottom: -10px; */
    /* left: calc(50% - 199px); */
    /* width: 24rem; */
}

.button-fm-container-icon6 {
    bottom: -10px;
    left: calc(50% - 171px);
    width: 24rem;
}

.component-7,
.text-fm-container2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.component-7 {
    align-self: stretch;
    position: relative;
    gap: 0.625rem;
    text-align: center;
    font-size: 3rem;
    color: #6e5a3b;
    font-family: "PSL PojamarnSpecial Pro";
}

.text-fm-container2 {
    flex: 1;
    gap: 1rem;
}

.background-image-title-fm-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-fm-container {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    text-align: left;
    font-size: 1rem;
    color: #7c5d5d;
    font-family: Kanit;
    flex-direction: column;
}

.level-image,
.level-info-fm-container {
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
}

.level-info-fm-container {
    height: 23.313rem;
    /* width: 48.563rem; */
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0.75rem;
    gap: 1.5rem;
}

.level-image {
    align-self: stretch;
    /* min-height: 6.75rem; */
    border-radius: 78px;
    background-color: #dac5a6;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem 1rem 1rem;
    gap: 1.25rem;
    position: relative;
    background-image: url(../public/icon-bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

.level-image::before {
    /* position: absolute; */
    /* z-index: 0; */
    /* top: -5px; */
    /* right: -67px; */
    /* width: 20%; */
    /* height: 119px; */
    /* content: ''; */
    transform: translate(-50%, 0);
    pointer-events: none;
    background-image: url(../public/icon-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.level-image-fm-container {
    width: 24.031rem;
    display: flex;
    align-items: flex-start;
    gap: 2.625rem;
}

.level-icon-fm-container {
    height: 4.75rem;
    width: 4.75rem;
    display: flex;
    align-items: center;
    position: relative;
}

.level-icon-fm-container-child {
    height: 6.906rem;
    width: 6.906rem;
    position: absolute;
    margin: 0 !important;
    top: -1rem;
    left: -1.562rem;
    object-fit: cover;
    z-index: 0;
    flex-shrink: 0;
}

.level-title {
    position: relative;
    font-size: 2.25rem;
    font-family: "PSL PojamarnSpecial Pro";
    color: #7a6344;
    line-height: 1;
}

.level-reward-fm-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reward-box-icon {
    width: 2.5rem;
    position: relative;
    border-radius: 4px;
    max-height: 100%;
    object-fit: cover;
}

.level-info-fm-container-child {
    width: 47.063rem;
    height: 39.75rem;
    position: relative;
    flex-shrink: 0;
    object-fit: cover;
}

.divider-fm-container {
    align-self: stretch;
    width: 0.563rem;
    position: relative;
    border-radius: 23px;
    background-color: #9f8a6b;
    overflow: hidden;
    flex-shrink: 0;
}

.divider {
    position: absolute;
    top: 2.219rem;
    left: 0;
    border-radius: 9px;
    background-color: #3d0404;
    width: 0.563rem;
    height: 6.25rem;
}

.group-div {
    width: 6.319rem;
    height: 35.688rem;
    position: absolute;
    margin: 0 !important;
    top: 1.781rem;
    left: -13.75rem;
    display: none;
    z-index: 3;
}

.background-image-group-child {
    position: absolute;
    top: 8.719rem;
    left: 0;
    width: 6.319rem;
    height: 6.319rem;
}

.close-button-fm-container-fm-container,
.frame-a {
    /* text-decoration: none; */
    /* margin: 0 !important; */
    position: absolute;
    /* display: flex; */
    /* align-items: flex-start; */
    /* padding: 0.625rem; */
    box-sizing: border-box;
    justify-content: center;
}

.close-button-fm-container-fm-container {
    width: 5.656rem;
    height: 6.413rem;
    top: -1.594rem;
    left: 77.85rem;
    flex-direction: column;
    z-index: 4;
}

.frame-a {
    /* width: 20.375rem; */
    /* height: 4.988rem; */
    bottom: -2.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: block;
}

.component-8 {
    align-items: flex-start;
    position: relative;
    gap: 0.625rem;
    font-size: 3rem;
}

.component-8,
.task-fm-container,
.title-fm-container2 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.title-fm-container2 {
    align-items: center;
    text-align: center;
    color: #6e5a3b;
    font-family: "PSL PojamarnSpecial Pro" !important;
}

.task-fm-container {
    align-items: flex-start;
    gap: 1rem;
    font-size: 2rem;
}

.note-fm-container {
    align-self: stretch;
    /* height: 9.5rem; */
    border-radius: 22px;
    background-color: #dac5a6;
    display: flex;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    font-size: 2.25rem;
}

.ma-20251204 {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 1.312rem;
}

.background-image-frame-parent {
    width: 6.319rem;
    height: 35.688rem;
    position: absolute;
    margin: 0 !important;
    top: 1.8rem;
    left: -13.75rem;
    display: none;
    z-index: 3;
}

.background-image-button-fm-container-wrapper,
.close-button-fm-container-frame {
    text-decoration: none;
    margin: 0 !important;
    position: absolute;
    display: flex;
    align-items: flex-start;
    padding: 0.625rem;
    box-sizing: border-box;
}

.close-button-fm-container-frame {
    width: 5.656rem;
    height: 6.413rem;
    top: -1.637rem;
    left: 77.85rem;
    flex-direction: column;
    z-index: 4;
}

.background-image-button-fm-container-wrapper {
    width: 20.375rem;
    /* height: 4.988rem; */
    bottom: -2.425rem;
    left: calc(50% - 163px);
    z-index: 5;
}

.main-fm-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    gap: 2rem;
}

.background-image-vector-smart-object-6,
.vector-smart-object-6 {
    width: 13.756rem;
    position: absolute;
    margin: 0 !important;
    right: -8.319rem;
    bottom: 6.438rem;
    max-height: 100%;
    object-fit: contain;
    z-index: 0;
}

.background-image-vector-smart-object-6 {
    width: 16.638rem;
    right: -8.3rem;
    bottom: 0.088rem;
    z-index: 1;
}

.vector-smart-object,
.vector-smart-object-2 {
    position: absolute;
    margin: 0 !important;
    top: -4.375rem;
    max-height: 100%;
    object-fit: cover;
}

.vector-smart-object {
    width: 12rem;
    right: 2rem;
    z-index: 2;
}

.vector-smart-object-2 {
    width: 12rem;
    left: 2rem;
    z-index: 3;
}

.background-image-header-fm-container-icon {
    width: 42.813rem;
    height: 7.438rem;
    object-fit: cover;
    z-index: 4;
}

.content-fm-container4 {
    /* width: 82.5rem; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 0.625rem;
    z-index: 5;
}

.content-background-icon {
    align-self: stretch;
    /* height: 39.313rem; */
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
    z-index: 2;
}

.button-fm-container-wrapper2 {
    text-decoration: none;
    /* width: 20.375rem; */
    /* height: 4.988rem; */
    margin: 0 !important;
    position: absolute;
    bottom: -2.125rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    /* padding: 0.625rem; */
    /* box-sizing: border-box; */
    z-index: 3;
}

.button-fm-container-wrapper3 {
    text-decoration: none;
    width: 20.375rem;
    /* height: 4.988rem; */
    margin: 0 !important;
    position: absolute;
    bottom: -2.425rem;
    left: calc(50% - 163px);
    display: flex;
    align-items: flex-start;
    padding: 0.625rem;
    box-sizing: border-box;
    z-index: 3;
}

.background-image-main-fm-container,
.left-fm-container {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.background-image-main-fm-container {
    /* height: 46.188rem; */
    position: relative;
    text-align: center;
}

.left-fm-container {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
}

.activity-content-fm-container {
    width: 19.688rem;
    height: 13.625rem;
    object-fit: cover;
}

.big-patch-fm-container-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.big-patch-fm-container {
    text-decoration: none;
    /* width: 21.438rem; */
    /* height: 6.813rem; */
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.big-patch-fm-container-child {
    width: 21.438rem;
    height: 6.781rem;
    position: absolute;
    margin: 0 !important;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
}

.center-fm-container,
.events-fm-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.events-fm-container {
    text-decoration: none;
    width: 21.438rem;
    height: 6.75rem;
    overflow: hidden;
    flex-shrink: 0;
}

.center-fm-container {
    flex: 1;
    justify-content: flex-end;
    gap: 1rem;
    z-index: 2;
    position: relative;
}

.character-background-icon {
    width: 21.938rem;
    height: 26.563rem;
    position: relative;
    object-fit: cover;
    z-index: 0;
}

.icon {
    /* width: 33.188rem; */
    position: absolute;
    margin: 0 !important;
    /* top: -1.562rem; */
    /* left: -3.019rem; */
    max-height: 100%;
    object-fit: cover;
    z-index: 1;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
}

.character-info-fm-container-wrapper {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
}

.character-info-fm-container {
    width: 25.913rem;
    height: 18.625rem;
    position: relative;
    object-fit: cover;
}

.right-fm-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.687rem;
    z-index: 1;
}

.market-system-fm-container,
.market-system-text-fm-container {
    display: flex;
    align-items: center;
    /* gap: 1.375rem; */
    gap: 0;
    text-align: end;
}

.market-system-text-fm-container {
    text-decoration: none;
    gap: 1rem;
}

.market-system-text {
    position: relative;
    background: linear-gradient(180deg, #fff4dd 30.79%, #ffca8d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.market-system-icon-background,
.market-system-icon-fm-container {
    height: 5.856rem;
    width: 5.844rem;
    position: relative;
    object-fit: cover;
}

.market-system-icon-background {
    height: 3.938rem;
    width: 4.813rem;
}

.balance-adjustment-icon-backgr,
.mail-system-icon-background-2 {
    height: 3.938rem;
    width: 0.063rem;
    position: relative;
    object-fit: cover;
}

.balance-adjustment-icon-backgr {
    width: 1.875rem;
}

.p2 {
    margin: 0;
    font-size: 1.25rem;
}

.good-equipment-icon-background {
    height: 3.938rem;
    width: 4.75rem;
    position: relative;
    object-fit: cover;
}

.background-image-vector-smart-object-2,
.main-fm-container-child {
    position: absolute;
    margin: 0 !important;
    object-fit: cover;
    z-index: 0;
}

.main-fm-container-child {
    height: 30rem;
    width: 30rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.background-image-vector-smart-object-2 {
    width: 12.063rem;
    top: 6.625rem;
    left: -5.625rem;
    max-height: 100%;
}

.header-fm-container-icon2 {
    width: 39.75rem;
    height: 7.438rem;
    object-fit: cover;
    z-index: 1;
}

.content-fm-container5 {
    max-width: 82.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 0.625rem;
    z-index: 2;
}

.yg-calendar-nov68-1200x628-1-wrapper {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vector-smart-object-1,
.yg-calendar-nov68-1200x628-1-icon {
    width: 59.563rem;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.vector-smart-object-1 {
    width: 8.875rem;
    position: absolute;
    margin: 0 !important;
    right: -3.75rem;
    bottom: -1.75rem;
    z-index: 3;
}

.background-image-gemini-generated-image-21t4k12-icon {
    width: 11.813rem;
    position: absolute;
    margin: 0 !important;
    top: 2.4rem;
    left: 61.125rem;
    max-height: 100%;
    object-fit: cover;
    z-index: 4;
}

.fm-container,
.footer-bottom-fm-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fm-container {
    align-self: stretch;
    background-color: #000;
    padding: 2.625rem 0;
    z-index: 2;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    font-family: Inter;
}

.footer-bottom-fm-container {
    width: 100%;
    gap: 1rem;
    max-width: 82.5rem;
}

.logo-icon {
    width: 19.875rem;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.wrapper {
    margin: 0 !important;
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background-color: red;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 0.687rem;
    z-index: 3;
    text-align: center;
    position: fixed;
}

.frame-parent2,
.group-child7 {
    position: absolute;
    height: 28.438rem;
}

.frame-parent2 {
    width: 5.019rem;
    margin: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    left: 3rem;
    z-index: 4;
    position: fixed;
}

.group-child7 {
    top: 50%;
    transform: translateY(-50%);
    left: 1.45rem;
    width: 2.375rem;
    object-fit: cover;
}

.frame-parent3,
.group-wrapper {
    position: absolute;
    left: 0;
    width: 5.019rem;
}

.frame-parent3 {
    top: 4.5rem;
    height: 18.875rem;
}

.group-wrapper {
    text-decoration: none;
    top: 6.925rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.frame-child10 {
    width: 5.019rem;
    height: 5.019rem;
    position: relative;
    object-fit: cover;
}

.background-image-group-wrapper,
.group-frame {
    text-decoration: none;
    position: absolute;
    left: 0;
    width: 5.019rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.group-frame {
    top: 0;
}

.background-image-group-wrapper {
    top: 13.856rem;
}




@media (max-width: 1353px) {
    .gemini-generated-image-21t4k12-icon {
        left: 3rem;
    }

    .image-frame-icon {
        /* top: -31%; */
        /* left: -13%; */
        /* width: 118%; */
    }

    .main-image {
        min-height: 45rem;
    }
}

@media (max-width: 1200px) {
    .main-image {
        min-height: 45rem;

    }

    .step-image::before {
        /* position: absolute; */
        /* z-index: 0; */
        /* top: -29px; */
        /* right: -29px; */
        /* width: 31%; */
        /* height: 113px; */
        /* content: ''; */
        /* transform: translate(-50%, 0); */
        /* pointer-events: none; */
        /* background-image: url(public/icon-bg.png); */
        /* background-repeat: no-repeat; */
        /* background-position: center center; */
        /* background-size: 100%; */
    }
}

@media (min-width: 992px)and (max-width:1199px) {
    .button-fm-container-icon2 {
        bottom: -14px;
        left: calc(50% - 126px);
        width: 24rem;
    }

    .button-fm-container-icon3 {
        bottom: 7px;
        left: calc(50% - 126px);
        width: 24rem;
    }

    .button-fm-container-icon4 {
        bottom: -9px;
        left: calc(50% - 108px);
        width: 24rem;
    }

    .button-fm-container-icon5 {
        bottom: -10px;
        left: calc(50% - 108px);
        width: 24rem;
    }

    .button-fm-container-icon6 {
        bottom: -10px;
        left: calc(50% - 108px);
        width: 24rem;
    }


    .main-image {
        min-height: 46rem;
    }

    .main-fm-container-child {
        /* height: 28rem; */
        /* width: 28rem; */
        /* top: calc(50% - 202.5px); */
        /* left: calc(50% - 184px); */
    }

    .step-image::before {
        position: absolute;
        z-index: 0;
        top: -29px;
        right: -29px;
        width: 31%;
        height: 113px;
        content: '';
        transform: translate(-50%, 0);
        pointer-events: none;
        background-image: url(../public/icon-bg.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
    }
}

@media (min-width: 768px)and (max-width:991px) {

    .main-fm-container-child {
        /* height: 23rem; */
        /* width: 23rem; */
        /* top: calc(50% - 155.5px); */
        /* left: calc(50% - 138px); */
    }

    .main-content-fm-container {
        min-height: 20rem;
    }

    .gemini-generated-image-21t4k12-icon {
        display: none;
    }

    .image-frame-icon {
        /* top: -32.5%; */
        /* left: -13%; */
        /* height: 20%; */
        /* width: 121%; */
    }

    .button-fm-container-icon2 {
        /* bottom: -6px; */
        /* left: calc(50% - 78px); */
        /* width: 20rem; */
    }

    .button-fm-container-icon3 {
        bottom: 12px;
        left: calc(50% - 78px);
        width: 20rem;
    }

    .button-fm-container-icon4 {
        bottom: -9px;
        left: calc(50% - 108px);
        width: 24rem;
    }

    .button-fm-container-icon5 {
        bottom: -10px;
        left: calc(50% - 108px);
        width: 24rem;
    }

    .button-fm-container-icon6 {
        bottom: -10px;
        left: calc(50% - 108px);
        width: 24rem;
    }

    .main-image {
        min-height: 40rem;
    }

    .card-1 {
        width: 60%;
        margin: 0 auto;
    }

    .main-image-p1 {
        padding: 4rem;
    }

    .main-image-p2 {
        padding: 4rem;
    }

    .main-image-p3 {
        padding: 4rem;
    }

    .rectangle-parent {
        font-size: 1.6rem;

    }

}

@media (min-width: 576px)and (max-width:767px) {

    .step-image {
        gap: 5rem;
    }

    .main-image-p1 {
        padding: 4rem;
    }

    .main-image-p2 {
        padding: 4rem;
    }

    .main-image-p3 {
        padding: 4rem;
    }

    .main-content-fm-container {
        min-height: 20rem;
        padding: 2rem
    }

    .gemini-generated-image-21t4k12-icon {
        display: none;
    }


    .button-fm-container-icon3 {
        bottom: 12px;
        left: calc(50% - 70px);
        width: 17rem;
    }

    .button-fm-container-icon4 {
        bottom: 0;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .button-fm-container-icon5 {
        bottom: 0px;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .button-fm-container-icon6 {
        bottom: 0px;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .main-image {
        min-height: 33rem;
    }

    .card-1 {
        width: 70%;
        margin: 0 auto;
    }

    .right-fm-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        row-gap: 1rem;
        column-gap: 1rem;
        z-index: 1;
        flex-wrap: wrap;
        width: 100%;
        float: none;
        align-content: center;
        justify-content: flex-start;
    }

    .title-img-size {
        width: 70%;
        margin: 0 auto;
    }

    .content-1 {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .main-fm-container-child {
        display: none;
    }
        .market-system-text-fm-container {
        text-decoration: none;
        gap: 1rem;
        text-align: start;
        display: flex
;
        flex-direction: row-reverse;
    }
}

@media (max-width: 575px) {
    
    .step-image::before {
        /* top: -30px; */
        /* right: -29px; */
        /* width: 15%; */
    }

    .rectangle-parent {
        padding: 2rem 1rem;
    }

    .main-image-p1 {
        padding: 3.5rem 2.5rem;
    }

    .main-image-p2 {
        padding: 3.5rem 2rem;
    }

    .main-image-p3 {
        padding: 3rem 2.5rem;
    }

    .step-image {
        gap: 2rem;
    }

    .card-1 {
        width: 70%;
        margin: 0 auto;
    }

    .subtitle-fm-container-child {
        display: none;
    }

    .footer,
    .footer-fm-container {
        display: flex;
        align-items: center;
        gap: 2.125rem;
        flex-direction: column;
    }

    .footer-fm-container {
        align-self: stretch;
        min-height: 0.5rem;
        border-radius: 22px;
        background-color: #dac5a6;
        padding: 3rem 1rem 1rem 1rem;
        box-sizing: border-box;
        margin-top: 0;
    }

    .button-fm-container-icon3 {
        bottom: 0;
    }

    .main-frame-parent {
        gap: 2.5rem;
    }

    .vector-smart-object {
        width: 7rem;
        right: -0.1025rem;
        z-index: 2;
        top: -1.375rem;
    }

    .vector-smart-object-2 {
        width: 7rem;
        left: 0;
        z-index: 3;
        top: -1.375rem;
    }

    .main-content-fm-container {
        min-height: 15rem;
        padding: 2rem
    }

    .main-image {
        min-height: 20rem;
    }

    .gemini-generated-image-21t4k12-icon {
        display: none;
    }

    .text-fm-container {
        gap: 0.5rem;
    }

    .vector-smart-object-1 {
        z-index: 1;
    }


    .button-fm-container-icon2 {
        /* bottom: 5px; */
        /* left: calc(50% - 43px); */
        /* width: 14rem; */
    }

    .button-fm-container-icon3 {
        bottom: 12px;
        left: calc(50% - 43px);
        width: 14rem;
    }

    .button-fm-container-icon4 {
        bottom: 0;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .button-fm-container-icon5 {
        bottom: 0px;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .button-fm-container-icon6 {
        bottom: 0px;
        left: calc(50% - 70px);
        width: 18rem;
    }

    .bottom-bar {
        z-index: 0;
    }

    .background-image-vector-smart-object-2 {
        width: 8.063rem;
        top: 5.625rem;
        left: -5.625rem;
        max-height: 100%;
    }

    .step-image-mask {
        width: 5rem;
        height: 5rem;
        left: -1rem;
    }

    .background-image-text-fm-container {
        gap: 1rem;
    }

    .card-1 {
        width: 60%;
        margin: 0 auto;
    }

    .title-img-size {
        width: 80%;
        margin: 0 auto;
    }

    .big-patch-fm-container-parent {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }

    .level-title {
        font-size: 1.8rem;
    }

    .level-image-fm-container {
        gap: 2rem;
    }

    .right-fm-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0rem;
        row-gap: 0.25rem;
        column-gap: 0rem;
        z-index: 1;
        flex-wrap: wrap;
        width: 100%;
        float: none;
        align-content: center;
        justify-content: flex-start;
    }



    .market-system-icon-background,
    .market-system-icon-fm-container {
        height: 4rem;
        width: 4rem;

    }

    .main-fm-container-child {
        display: none;
    }


    .market-system-text-fm-container {
        text-decoration: none;
        gap: 1rem;
        text-align: start;
        display: flex;
        flex-direction: row-reverse;
    }

    .rectangle-parent {
        font-size: 1.5rem;
    }

    .content-1 {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
}

@media (max-width:375px) {
    .step-image::before {
        right: -25px;
        width: 19%;
    }

    .step-image {
        gap: 2rem;
    }

    .main-content-fm-container {
        min-height: 8rem;
        padding: 2rem;
    }

    .main-content-fm-container {
        box-shadow: 0 0 22.3px rgba(0, 0, 0, 0.25), 0 0 0 5px #9f8a6b inset, 0 0 0 8px #f5ecd6 inset, 0 0 0 10px #9f8a6b inset;

    }

    .image-frame-icon {
        top: -35.5%;
        left: -16%;
        /* height: 20%; */
        width: 128%;
    }

    .vector-smart-object-1 {
        z-index: 1;
    }

    .button-fm-container-icon2 {
        left: calc(50% - 86px);
    }

    .vector-smart-object,
    .vector-smart-object-2 {
        width: 6rem;
        top: -0.375rem;
    }

    .button-fm-container-icon2 {
        bottom: 8px;
        left: calc(50% - 31px);
        width: 12rem;
    }

    .button-fm-container-icon3 {
        bottom: 16px;
        left: calc(50% - 31px);
        width: 12rem;
    }

    .button-fm-container-icon4 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .button-fm-container-icon5 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .button-fm-container-icon6 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .level-info-fm-container {
        height: auto;

    }

    .main-image {
        min-height: 15rem;
    }

    .market-system-text-fm-container {
        text-decoration: none;
        gap: 0rem;
        line-height: 1;
    }

    .rectangle-parent {
        font-size: 1.5rem;
    }

    .market-system-text-fm-container {
        text-decoration: none;
        gap: 1rem;
        text-align: end;
    }

    .card-1 {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width:320px) {
    .step-image::before {
        right: -31px;
        width: 28%;
        top: -22px;
    }

    .card-1 {
        width: 100%;
        margin: 0 auto;
    }

    .step-image {
        flex: 1;
        border-radius: 78px;
        background-color: #dac5a6;
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .step-image-mask {
        top: -1.35rem;
        left: -1.2rem;
    }

    .vector-smart-object,
    .vector-smart-object-2 {
        width: 5rem;
        top: -0.375rem;
    }

    .button-fm-container-icon2 {
        bottom: 12px;
        left: calc(50% - 19px);
        width: 10rem;
    }

    .button-fm-container-icon3 {
        bottom: 19px;
        left: calc(50% - 19px);
        width: 10rem;
    }


    .button-fm-container-icon4 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .button-fm-container-icon5 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .button-fm-container-icon6 {
        bottom: 5px;
        left: calc(50% - 50px);
        width: 15rem;
    }

    .main-image {
        min-height: 15rem;
    }

    .market-system-text-fm-container {
        text-decoration: none;
        gap: 0.5rem;
        text-align: end;
    }
}