.framecc {
    display: flex;
    width: 19.25rem;
    height: 8.081rem;
    align-items: center;
    gap: 0.1rem;
    padding: 1.97rem 0rem 1.97rem 2.71rem;
    position: relative;
}

.framecc .div {
    display: flex;
    flex-direction: column;
    width: 19.25rem;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/forgotten/image-32.png);
    background-size: cover;
    background-position: 50% 50%;
}

.framecc .div-2 {
    display: flex;
    flex-direction: column;
    /* width: 4.95rem; */
    align-items: flex-end;
    gap: 0.22rem;
    position: absolute;
    top: 0.9rem;
    left: 11.76rem;
    z-index: 2;
}

.framecc .text-wrapper {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.62rem;
    letter-spacing: 0;
    line-height: normal;
}

.framecc .image {
    width: 0.5rem;
    height: 0.045rem;
    aspect-ratio: 11.11;
    position: relative;
    object-fit: cover;
}

.framecc .text-wrapper-2 {
    align-self: stretch;
    color: #ffffff;
    font-size: 0.442rem;
    text-align: right;
    position: relative;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

.framecc .img {
    width: 13.7rem;
    height: 8.06rem;
    margin-top: 0rem;
    z-index: 0;
    aspect-ratio: 1.7;
    position: relative;
    object-fit: cover;
}

.framecc .div-3 {
    display: flex;
    flex-direction: column;
    width: 3.965rem;
    align-items: stretch;
    gap: 0.45rem;
    position: relative;
}

.framecc .frame-wrapper {
    display: flex;
    flex-direction: column;
    height: 0.885rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.27rem 1.52rem 0.27rem 0.32rem;
    position: relative;
    align-self: stretch;
    width: 100%;
}

.framecc .div-4 {
    display: flex;
    width: 2.1166rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.framecc .text-wrapper-3 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.28rem;
    letter-spacing: 0;
    line-height: normal;
}

.framecc .div-5 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.27rem 1.52rem 0.27rem 0.32rem;
    position: relative;
    flex: 0 0 auto;
    height: 0.885rem;
    box-sizing: border-box;
}

.framecc .text-wrapper-4 {
    width: 1.24rem;
    margin-top: -0.01rem;
    color: #a17e58;
    font-size: 0.28rem;
    position: relative;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

.framecc .image-3 {
    width: 0.09rem;
    height: 0.01rem;
    aspect-ratio: 9;
    position: relative;
    object-fit: cover;
}

.framecc .text-wrapper-5 {
    width: fit-content;
    margin-top: -0.01rem;
    color: #a17e58;
    font-size: 0.28rem;
    position: relative;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

/* Delay animations */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.4s;
}

.delay-4 {
    transition-delay: 0.5s;
}

.delay-5 {
    transition-delay: 0.6s;
}

.delay-6 {
    transition-delay: 0.7s;
}

.delay-7 {
    transition-delay: 0.8s;
}

.delay-8 {
    transition-delay: 0.9s;
}

.delay-9 {
    transition-delay: 1.0s;
}

.delay-10 {
    transition-delay: 1.1s;
}

.element {
    overflow: hidden;
    width: 100%;
    min-width: 19.2rem;
    min-height: 65.84rem;
    position: relative;
}

.element .frame {
    display: flex;
    flex-direction: column;
    width: 1.63rem;
    align-items: flex-start;
    gap: 0.16rem;
    position: absolute;
    top: 14.32rem;
    left: 8.47rem;
}

.element .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.25rem;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.element .section-title {
    width: 11.18rem;
    position: relative;
    text-align: center;
}

.element .section-title-bg {
    position: absolute;
    width: 100%;
    height: 0.66rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.element .section-title-text {
    font-size: 0.62rem;
    font-weight: 600;
    color: #b08056;
    position: relative;
    z-index: 2;
}

.element .div {
    position: relative;
    width: fit-content;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.18rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-2 {
    display: flex;
    flex-direction: column;
    width: 14.12rem;
    align-items: center;
    gap: 0.75rem;
    position: absolute;
    top: 1.42rem;
    left: 2.54rem;
}

.element .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.element .OMO-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.1rem;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-3 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.2rem;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.15rem 0.15rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-wrapper {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.29rem 0 0 0.19rem;
    position: relative;
    background-image: url(../images/forgotten/frame-60.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-5 {
    display: flex;
    flex-direction: column;
    /* width: 1.6347rem; */
    align-items: flex-start;
    gap: 0.16rem;
    position: relative;
    flex: 0 0 auto;
    margin-right: -0.0047rem;
}

.element .div-wrapper {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.24rem 0 0 0.23rem;
    position: relative;
    background-image: url(../images/forgotten/frame-62.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-6 {
    display: flex;
    flex-direction: column;
    /* width: 1.6347rem; */
    align-items: flex-start;
    gap: 0.16rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-7 {
    position: relative;
    width: 2.7rem;
    height: 3.57rem;
    background-image: url(../images/forgotten/image-40.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-8 {
    display: flex;
    flex-direction: column;
    /* width: 1.62rem; */
    align-items: flex-start;
    gap: 0.16rem;
    position: relative;
    top: 0.27rem;
    left: 0.26rem;
}

.element .text-wrapper-4 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.25rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-5 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.18rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-9 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.29rem 0 0 0.38rem;
    position: relative;
    background-image: url(../images/forgotten/frame-65.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-10 {
    display: flex;
    flex-direction: column;
    /* width: 1.63rem; */
    align-items: flex-start;
    gap: 0.16rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-11 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.24rem 0 0 0.33rem;
    position: relative;
    background-image: url(../images/forgotten/frame-67.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-12 {
    display: flex;
    flex-direction: column;
    /* width: 1.634rem; */
    align-items: flex-start;
    gap: 0.13rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-13 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0 0 0.25rem;
    position: relative;
    background-image: url(../images/forgotten/frame-69.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-14 {
    display: flex;
    flex-direction: column;
    /* width: 1.6334rem; */
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-15 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0 0 0.28rem;
    position: relative;
    background-image: url(../images/forgotten/frame-71.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-16 {
    display: flex;
    flex-direction: column;
    /* width: 1.6342rem; */
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    flex: 0 0 auto;
    margin-right: -0.0042rem;
}

.element .frame-17 {
    display: flex;
    flex-direction: column;
    width: 2.705rem;
    height: 3.565rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.26rem 0 0 0.26rem;
    position: relative;
    background-image: url(../images/forgotten/frame-73.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-18 {
    display: flex;
    flex-direction: column;
    /* width: 1.62rem; */
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    flex: 0 0 auto;
    margin-bottom: -0.005rem;
    margin-right: -0.005rem;
}

.element .frame-19 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0 0 0.27rem;
    position: relative;
    background-image: url(../images/forgotten/frame-75.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-20 {
    display: flex;
    flex-direction: column;
    /* width: 1.62rem; */
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-21 {
    display: flex;
    flex-direction: column;
    width: 2.7rem;
    height: 3.57rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0.8rem 2.6rem 0.27rem;
    position: relative;
    background-image: url(../images/forgotten/frame-77.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-22 {
    display: flex;
    flex-direction: column;
    width: 1.6284rem;
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-23 {
    display: flex;
    flex-direction: column;
    width: 19.2rem;
    height: 9.38rem;
    align-items: center;
    gap: 0.71rem;
    padding: 1.38rem 0 1.47rem 0;
    position: absolute;
    top: 13.04rem;
    left: 0.02rem;
    background-image: url(../images/forgotten/frame-86.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.element .group-wrapper {
    display: flex;
    flex-direction: column;
    /* width: 7.4rem; */
    align-items: flex-start;
    gap: 0.1rem;
    position: relative;
    flex: 0 0 auto;
}

.element .group {
    position: relative;
    width: 8.4rem;
    height: 0.48rem;
    margin-right: -0.02rem;
}

.element .text-wrapper-7 {
    position: absolute;
    width: 99.73%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.2rem;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-25 {
    display: flex;
    flex-direction: column;
    width: 14.196rem;
    height: 3.9768rem;
    align-items: center;
    gap: 0.52rem;
    padding: 1.09rem 1.86rem 1.28rem 2.75rem;
    position: relative;
    margin-bottom: -0.0018rem;
    background-image: url(../images/forgotten/frame-84.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-26 {
    display: inline-flex;
    align-items: center;
    gap: 1.02rem;
    position: relative;
    flex: 0 0 auto;
    margin-left: -0.002rem;
    margin-right: -0.002rem;
}

.element .text-wrapper-8 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "MiSans VF-Demibold", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.6rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .line {
    position: relative;
    width: 0.01rem;
    height: 0.39rem;
    object-fit: cover;
}

.element .frame-27 {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-9 {
    position: relative;
    width: 0.19rem;
    height: 0.72rem;
    margin-top: -0.01rem;
    font-family: "MiSans VF-Demibold", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.3rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-10 {
    position: relative;
    width: fit-content;
    margin-bottom: -0.0008rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.24rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-28 {
    display: flex;
    flex-direction: column;
    width: 12.39rem;
    height: 12.23rem;
    align-items: center;
    gap: 0.78rem;
    position: absolute;
    top: 23.88rem;
    left: 3.42rem;
}

.element .image-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.element .text-wrapper-12 {
    position: relative;
    width: fit-content;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.2rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
    text-align: center;
}

.element .frame-29 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 8.195rem;
}

.element .frame-30 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    position: absolute;
    top: 3.07rem;
    left: 0.93rem;
}

.element .text-wrapper-13 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-size: 0.24rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-3 {
    position: relative;
    width: 0.23rem;
    height: 0.23rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .frame-31 {
    display: flex;
    flex-direction: column;
    width: 8.19rem;
    height: 7.9rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.88rem 0.98rem 0.88rem 0.85rem;
    position: absolute;
    top: 0;
    left: 2.05rem;
    background-image: url(../images/forgotten/frame-88.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .image-4 {
    position: relative;
    width: 6.365rem;
    height: 6.15rem;
    margin-bottom: -0.005rem;
    margin-right: -0.005rem;
    aspect-ratio: 1.03;
    object-fit: cover;
}

.element .image-5 {
    position: absolute;
    top: 1.74rem;
    left: 1.67rem;
    width: 4.71rem;
    height: 4.5rem;
    aspect-ratio: 1.05;
    object-fit: cover;
}

.element .frame-32 {
    display: flex;
    flex-direction: column;
    width: 1.54rem;
    align-items: center;
    gap: 0.1rem;
    position: absolute;
    top: 3.76rem;
    left: 3.26rem;
}

.element .text-wrapper-14 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.32rem;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-15 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.22rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-33 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    position: absolute;
    top: 6.66rem;
    left: 2.14rem;
}

.element .frame-34 {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    position: absolute;
    top: 3.07rem;
    left: 9.11rem;
}

.element .frame-35 {
    display: flex;
    flex-direction: column;
    /* width: 1.68rem; */
    align-items: center;
    gap: 0.1rem;
    position: absolute;
    top: 0.33rem;
    left: 5.245rem;
}

.element .text-wrapper-16 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.24rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-36 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    position: absolute;
    top: 6.66rem;
    left: 7.93rem;
}

.element .frame-37 {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    flex: 0 0 auto;
    margin-bottom: -0.585rem;
}

.element .frame-38 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.09rem;
    position: relative;
    flex: 0 0 auto;
}

.element .image-6 {
    position: relative;
    width: 0.22rem;
    height: 0.22rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-17 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.22rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-39 {
    display: inline-flex;
    align-items: center;
    gap: 0.09rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-40 {
    display: flex;
    flex-direction: column;
    width: 19.2rem;
    height: 10.56rem;
    align-items: center;
    gap: 1.4rem;
    padding: 0.96rem 2.52rem 1.37rem 2.4rem;
    position: absolute;
    top: 37.49rem;
    left: 0;
    background-image: url(../images/forgotten/frame-112.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-42 {
    display: inline-flex;
    align-items: center;
    gap: 1.32rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-43 {
    display: flex;
    flex-direction: column;
    width: 4.45rem;
    align-items: flex-start;
    gap: 0.32rem;
    position: relative;
}

.element .frame-44 {
    display: flex;
    flex-direction: column;
    /* width: 2.12rem; */
    align-items: center;
    justify-content: center;
    gap: 0.06rem;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-19 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.4rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-20 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.4rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-45 {
    display: flex;
    align-items: center;
    gap: 0.39rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-46 {
    display: inline-flex;
    align-items: center;
    gap: 0.07rem;
    position: relative;
    flex: 0 0 auto;
}

.element .image-7 {
    position: relative;
    width: 0.205rem;
    height: 0.205rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .frame-47 {
    display: inline-flex;
    align-items: center;
    gap: 0.06rem;
    position: relative;
    flex: 0 0 auto;
}

.element .frame-48 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, fit-content(100%));
    width: 8.51rem;
    height: fit-content;
    gap: 0.2rem;
}

.element .frame-49 {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 4.15rem;
    height: 2.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 2.35rem 2.75rem 0.27rem 0.36rem;
    background-image: url(../images/forgotten/frame-106.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .text-wrapper-21 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.26rem;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.element .frame-50 {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    width: 4.15rem;
    height: 2.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 2.35rem 2.78rem 0.27rem 0.33rem;
    background-image: url(../images/forgotten/frame-107.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-51 {
    position: relative;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    width: 4.15rem;
    height: 2.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 2.37rem 2.75rem 0.25rem 0.36rem;
    background-image: url(../images/forgotten/frame-108.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-52 {
    position: relative;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    width: 4.15rem;
    height: 2.93rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 2.37rem 2.79rem 0.25rem 0.32rem;
    background-image: url(../images/forgotten/frame-109.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .group-2 {
    position: relative;
    width: 1.06rem;
    height: 0.31rem;
    margin-right: -0.02rem;
}

.element .text-wrapper-22 {
    position: absolute;
    width: 98.11%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.26rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-53 {
    display: flex;
    flex-direction: column;
    width: 15.39rem;
    align-items: center;
    justify-content: center;
    gap: 0.99rem;
    position: absolute;
    top: 49.2rem;
    left: 1.93rem;
}

.element .frame-55 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-56 {
    display: flex;
    align-items: flex-end;
    gap: 1.17rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-57 {
    display: flex;
    flex-direction: column;
    width: 2.97rem;
    height: 4.44rem;
    align-items: center;
    gap: 0.28rem;
    position: relative;
}

.element .frame-58 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 3.63rem;
}

.element .text-wrapper-24 {
    position: absolute;
    top: 0.15rem;
    left: 1.33rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.3rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.97rem;
    height: 2.97rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .image-9 {
    position: absolute;
    top: 0.79rem;
    left: 0;
    width: 2.96rem;
    height: 2.96rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-25 {
    position: relative;
    /* width: 2.66rem; */
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.22rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-59 {
    position: relative;
    width: 2.97rem;
    height: 4.47rem;
}

.element .image-10 {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.96rem;
    height: 2.96rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .image-11 {
    position: absolute;
    top: 0.77rem;
    left: 0;
    width: 2.96rem;
    height: 2.96rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-26 {
    position: absolute;
    width: 89.04%;
    height: 4.35%;
    top: 89.49%;
    left: 10.10%;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.22rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-27 {
    position: absolute;
    width: 10.12%;
    height: 5.13%;
    top: 3.39%;
    left: 44.52%;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.3rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-60 {
    position: relative;
    width: 2.97rem;
    height: 4.44rem;
}

.element .frame-61 {
    position: relative;
    top: -0.15rem;
    height: 4.31rem;
}

.element .image-12 {
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 2.96rem;
    height: 2.96rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-28 {
    position: absolute;
    top: 4.04rem;
    left: 0.01rem;
    width: 2.96rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.22rem;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-29 {
    position: absolute;
    width: 10.12%;
    height: 6.01%;
    top: 5.57%;
    left: 44.78%;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.3rem;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-13 {
    position: absolute;
    top: 0.76rem;
    left: 0;
    width: 2.96rem;
    height: 2.96rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-30 {
    position: absolute;
    top: 3.91rem;
    left: 0.38rem;
    width: 2.96rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.22rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-31 {
    position: absolute;
    width: 10.12%;
    height: 8.47%;
    top: 3.71%;
    left: 44.86%;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.3rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-62 {
    display: flex;
    flex-direction: column;
    width: 19.2rem;
    height: 7.68rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 1.37rem 0 4.75rem 2.51rem;
    position: absolute;
    top: 58.17rem;
    left: 0;
    background-image: url(../images/forgotten/frame-124.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-63 {
    display: flex;
    flex-direction: column;
    /* width: 8.3612rem; */
    align-items: flex-start;
    gap: 0.38rem;
    position: relative;
    flex: 0 0 auto;
    margin-right: -0.0012rem;
}

.element .text-wrapper-32 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.5rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-wrapper-33 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.22rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-64 {
    display: flex;
    width: 19.2rem;
    height: 5.22rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.01rem 2.49rem 1.31rem 2.48rem;
    position: absolute;
    top: 74.83rem;
    left: -0.06rem;
    background-image: url(../images/forgotten/frame-42.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-65 {
    display: flex;
    flex-direction: column;
    width: 6.59rem;
    align-items: flex-start;
    gap: 0.6rem;
    position: relative;
}

.element .text-wrapper-34 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.26rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-66 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-67 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.17rem;
    position: relative;
    flex: 0 0 auto;
}

.element .image-14 {
    position: relative;
    width: 0.365rem;
    height: 0.365rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-35 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.4rem;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.element .frame-68 {
    display: flex;
    flex-direction: column;
    width: 3.9784rem;
    align-items: flex-start;
    gap: 0.48rem;
    position: relative;
}

.element .frame-69 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element .frame-70 {
    display: flex;
    flex-direction: column;
    width: 1.625rem;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    position: relative;
}

.element .image-15 {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.element .text-wrapper-36 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.2rem;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-71 {
    display: flex;
    flex-direction: column;
    width: 1.595rem;
    align-items: center;
    gap: 0.27rem;
    position: relative;
}

.element .frame-72 {
    display: flex;
    width: 19.25rem;
    height: 8.08rem;
    align-items: center;
    gap: 0.1rem;
    padding: 1.97rem 0rem 1.97rem 2.71rem;
    position: absolute;
    top: 1.56rem;
    left: -0.05rem;
}

.element .frame-73 {
    display: flex;
    flex-direction: column;
    width: 19.25rem;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.element .frame-74 {
    display: flex;
    flex-direction: column;
    width: 4.95rem;
    align-items: flex-end;
    gap: 0.22rem;
    position: absolute;
    top: 0.9rem;
    left: 11.76rem;
    z-index: 2;
}

.element .text-wrapper-37 {
    position: relative;
    align-self: stretch;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.62rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-16 {
    position: relative;
    width: 0.5rem;
    height: 0.045rem;
    aspect-ratio: 11.11;
    object-fit: cover;
}

.element .text-wrapper-38 {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.442rem;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-17 {
    position: relative;
    width: 13.7rem;
    height: 8.06rem;
    margin-top: -18rem;
    z-index: 1;
    aspect-ratio: 1.7;
    object-fit: cover;
}

.element .image-18 {
    position: relative;
    align-self: stretch;
    width: 100%;
    margin-top: -18rem;
    z-index: 0;
    aspect-ratio: 2.38;
    object-fit: cover;
}

.element .frame-75 {
    display: flex;
    flex-direction: column;
    width: 3.965rem;
    align-items: flex-start;
    gap: 0.45rem;
    position: relative;
}

.element .frame-76 {
    display: flex;
    flex-direction: column;
    height: 0.885rem;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.27rem 1.52rem 0.27rem 0.32rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    background-image: url(../images/forgotten/frame-51.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .frame-77 {
    display: flex;
    width: 2.1166rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-39 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.28rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-78 {
    display: flex;
    width: 2.51rem;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0.34rem;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-40 {
    position: relative;
    width: 1.24rem;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.28rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .image-19 {
    position: relative;
    width: 0.09rem;
    height: 0.01rem;
    aspect-ratio: 9;
    object-fit: cover;
}

.element .text-wrapper-41 {
    position: relative;
    width: fit-content;
    margin-top: -0.01rem;
    font-family: "Inter-Regular", Helvetica;
    font-weight: 400;
    color: #a17e58;
    font-size: 0.28rem;
    letter-spacing: 0;
    line-height: normal;
}

.element .frame-79 {
    display: flex;
    width: 100.00%;
    height: 0;
    align-items: center;
    gap: 3.01rem;
    padding: 0.46rem 2.41rem 0.47rem 2.4rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/forgotten/frame-126.png);
    background-size: cover;
    background-position: 50% 50%;
}

.element .image-20 {
    position: relative;
    width: 2.18rem;
    height: 0.635rem;
    margin-top: -0.0025rem;
    margin-bottom: -0.0025rem;
    aspect-ratio: 3.43;
    object-fit: cover;
}

.element .navbar {
    display: inline-flex;
    align-items: center;
    gap: 1.04rem;
    position: relative;
    flex: 0 0 auto;
}

/* Framecc menu interaction styles */
.framecc .menu-item {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.framecc .menu-item:hover {
    transform: translateX(0.05rem);
}

.framecc .menu-item.active .text-wrapper-3,
.framecc .menu-item.active .text-wrapper-4,
.framecc .menu-item.active .text-wrapper-5 {
    color: #ffffff;
    font-weight: 600;
}

.framecc .menu-item .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background-size: cover;
    background-position: 50% 50%;
}

.framecc .menu-item.active .bg-image {
    opacity: 1;
}

.framecc .frame-wrapper {
    position: relative;
    overflow: hidden;
}

.framecc .frame-wrapper .bg-image {
    border-radius: 0;
}

.framecc .div-5 {
    position: relative;
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    height: 0.885rem;
    padding: 0.27rem 1.52rem 0.27rem 0.32rem;
    box-sizing: border-box;
}

.framecc .div-5 .bg-image {
    border-radius: 0;
}

/* Ensure text and icons are above background */
.framecc .menu-item .div-4,
.framecc .menu-item .text-wrapper-4,
.framecc .menu-item .text-wrapper-5,
.framecc .menu-item .image-3,
.framecc .menu-item .arrow-icon {
    position: relative;
    z-index: 1;
}

/* Arrow icon and default icon visibility */
.framecc .menu-item .arrow-icon {
    display: none;
    font-family: "Inter-Regular", Helvetica;
    font-size: 0.28rem;
    color: #a17e58;
    margin-left: auto;
}

.framecc .menu-item.active .arrow-icon {
    display: block;
    color: #ffffff;
}

.framecc .menu-item .default-icon {
    display: block;
    margin-left: auto;
}

.framecc .menu-item.active .default-icon {
    display: none;
}

#main-image {
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

#main-title {
    transition: opacity 0.2s ease;
    will-change: opacity;
}

#main-title.fade-out {
    opacity: 0;
}