* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --design-width: 2148;
    /* 设计稿宽度 */
    font-size: calc(100vw / var(--design-width));
}

body {
    font-family: 'MiSans', sans-serif;
    color: #2D2D2D;
    background-color: #FAFAFA;
    overflow-x: hidden;
    padding-top: 129rem;
}


/* Lazy Loading Styles */

.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
    opacity: 1;
}


/* Image Preview Modal */

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: zoom 0.3s;
}

@keyframes zoom {
    from {
        transform: translate(-50%, -50%) scale(0)
    }
    to {
        transform: translate(-50%, -50%) scale(1)
    }
}

.close {
    position: absolute;
    top: 20rem;
    right: 30rem;
    color: #f1f1f1;
    font-size: 40rem;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* Header Section */

.header {
    width: 2148rem;
    height: 1205rem;
    background: url('./img/topBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.topInfo {
    width: 2148rem;
    height: 129rem;
    background: url('./img/topInfoBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.people3 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.people3:hover {
    transform: scale(1.05) translateY(-10rem);
    box-shadow: 0 15rem 30rem rgba(0, 0, 0, 0.1);
}

.topLogo {
    width: 354rem;
    height: 140rem;
    position: absolute;
    top: 18rem;
    left: 273rem;
}

.text {
    position: absolute;
    top: 50%;
    right: 185rem;
    transform: translateY(-50%);
    display: flex;
    gap: 80rem;
}

.text div {
    font-family: Arial, sans-serif;
    font-size: 24rem;
    color: #000000;
    cursor: pointer;
    transition: color 0.3s ease;
}

.text div:hover {
    color: #FF6B00;
}

.peopleBox {
    width: 534rem;
    height: 735rem;
    position: absolute;
    top: 258rem;
    left: 353rem;
    z-index: 100;
    overflow: hidden;
    position: relative;
}

.peopleBox img {
    width: 534rem;
    height: 870rem;
    position: absolute;
    top: 0;
}

.people2 {
    width: 641rem;
    height: 468rem;
    position: absolute;
    top: 620rem;
    left: 302rem;
    z-index: 999;
}

.topText {
    width: 896rem;
    height: 159rem;
    position: absolute;
    top: 484rem;
    left: 909rem;
}

.topText2 {
    width: 844rem;
    height: 95rem;
    position: absolute;
    top: 675rem;
    left: 935rem;
}

.btn {
    font-size: 20rem;
    font-weight: 700;
    border-radius: 50rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10rem 20rem rgba(0, 0, 0, 0.1);
    font-family: 'DelaGothicOne', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topBtn1 {
    width: 259rem;
    height: 78rem;
    position: absolute;
    bottom: 300rem;
    left: 1025rem;
    cursor: pointer;
    background-color: #df1763;
    color: white;
    border: 3rem solid #E91E63;
}

.topBtn1:hover {
    transform: translateY(-8rem);
    box-shadow: 0 15rem 25rem rgba(233, 30, 99, 0.3);
}

.topBtn1 img {
    width: 150rem;
    height: 22rem;
}

.topBtn2 {
    width: 259rem;
    height: 78rem;
    position: absolute;
    bottom: 300rem;
    right: 444rem;
    cursor: pointer;
    background-color: white;
    border: 3rem solid white;
}

.topBtn2:hover {
    transform: translateY(-8rem);
    box-shadow: 0 15rem 25rem rgba(255, 255, 255, 0.4);
}

.topBtn2 img {
    width: 150rem;
    height: 22rem;
}


/* Our Story Section */

.our-story {
    width: 2148rem;
    height: 931rem;
    background-color: #fff;
}

.our-story .container {
    padding: 0 100rem;
    width: 100%;
    height: 100%;
    position: relative;
}

.our-story .container .t2-1 {
    width: 288rem;
    height: 71rem;
    position: absolute;
    top: 251rem;
    left: 282rem;
}

.our-story .container .t2-2 {
    width: 705rem;
    height: 144rem;
    position: absolute;
    top: 378rem;
    left: 285rem;
}

.our-story .container .t2-3 {
    width: 630rem;
    height: 126rem;
    position: absolute;
    top: 561rem;
    left: 311rem;
}

.our-story .container .people3 {
    width: 835rem;
    height: 523rem;
    position: absolute;
    right: 281rem;
    bottom: 212rem;
    z-index: 111;
    cursor: pointer;
}

.our-story .container .people3bg {
    width: 886rem;
    height: 574rem;
    position: absolute;
    top: 187rem;
    right: 252rem;
    z-index: 100;
}


/* Why Choose Us Section */

.why-choose {
    width: 2148rem;
    height: 1043rem;
    background: url('./img/bg3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.why-choose .container {
    width: 100%;
    height: 100%;
    position: relative;
}

.why-choose .container .t3-1 {
    width: 695rem;
    height: 71rem;
    position: absolute;
    top: 233rem;
    left: 747rem;
}

.features-grid {
    width: 100%;
    height: 468rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 356rem;
}

.feature-item {
    width: 400rem;
    height: 468rem;
    background-color: white;
    border-radius: 30rem;
    text-align: center;
    box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    margin-right: 36rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-item .icon3-1 {
    width: 132rem;
    height: 132rem;
    margin-bottom: 36rem;
}

.feature-item .icon3-4 {
    width: 132rem;
    height: 132rem;
    margin-bottom: 37rem;
}

.feature-item .icon3-7 {
    width: 132rem;
    height: 132rem;
    margin-bottom: 36rem;
}

.feature-item .icon3-10 {
    width: 132rem;
    height: 132rem;
    margin-bottom: 36rem;
}

.feature-item .icon3-2 {
    width: 223rem;
    height: 25rem;
    margin-bottom: 25rem;
}

.feature-item .icon3-3 {
    width: 335rem;
    height: 153rem;
}

.feature-item .icon3-5 {
    width: 113rem;
    height: 25rem;
    margin-bottom: 24rem;
}

.feature-item .icon3-6 {
    width: 339rem;
    height: 156rem;
}

.feature-item .icon3-8 {
    width: 131rem;
    height: 31rem;
    margin-bottom: 18rem;
}

.feature-item .icon3-9 {
    width: 339rem;
    height: 124rem;
}

.feature-item .icon3-11 {
    width: 181rem;
    height: 25rem;
    margin-bottom: 24rem;
}

.feature-item .icon3-12 {
    width: 331rem;
    height: 158rem;
}

.feature-item:hover {
    transform: translateY(-12rem);
    box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.15);
}


/* Our Delicious Dishes Section */

.dishes {
    width: 2148rem;
    height: 1212rem;
    background-color: #f9f9f9;
}

.dishes .container {
    width: 100%;
    height: 100%;
    position: relative;
}

.dishes .container .bg4 {
    width: 2148rem;
    height: 1623rem;
    position: absolute;
    top: -313rem;
    left: 0;
}

.dishes .container .bg5 {
    width: 1256rem;
    height: 468rem;
    position: absolute;
    top: 338rem;
    left: 442rem;
}

.dishes .container .t4-1 {
    width: 762rem;
    height: 127rem;
    position: absolute;
    left: 695rem;
    top: 397rem;
}

.dishes .container .t4-2 {
    width: 1127rem;
    height: 199rem;
    position: absolute;
    top: 562rem;
    left: 513rem;
}


/* Perfect for Every Moment Section */

.moments {
    width: 2148rem;
    height: 3111rem;
    background: url('./img/bg6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 227rem 0 219rem;
    position: relative;
}

.moments .container {
    width: 100%;
    height: 100%;
}

.moments .container .t5-1 {
    width: 609rem;
    height: 55rem;
    position: absolute;
    left: 782rem;
    top: 203rem;
}

.moments-grid {
    width: calc(100% - 446rem);
    height: 2582rem;
    position: absolute;
    top: 372rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.moment-item:hover {
    transform: translateY(-10rem);
    box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.15);
}

.moment-item {
    width: 528rem;
    height: 787rem;
    background-color: white;
    border-radius: 30rem;
    text-align: center;
    box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.moment-item:nth-of-type(2) {
    margin: 58rem;
}

.moment-item:nth-of-type(5) {
    margin: 58rem;
}

.moment-item .btn6 {
    width: 209rem;
    height: 38rem;
    background: url('./img/btnBg.png');
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 157rem;
    bottom: 147rem;
    z-index: 999;
}

.moment-item .icon6Bg {
    width: 528rem;
    height: 214rem;
    position: absolute;
    top: 573rem;
    left: 0;
}

.moment-item .btn6 img {
    width: 107rem;
    height: 20rem;
}

.moment-item .icon6-1 {
    width: 528rem;
    height: 638rem;
}

.moment-item .icon6-3 {
    width: 528rem;
    height: 603rem;
}

.moment-item .icon6-5 {
    width: 528rem;
    height: 613rem;
}

.moment-item .icon6-7 {
    width: 528rem;
    height: 660rem;
}

.moment-item .icon6-9 {
    width: 528rem;
    height: 627rem;
}

.moment-item .icon6-11 {
    width: 528rem;
    height: 625rem;
}

.moment-item .icon6-13 {
    width: 528rem;
    height: 614rem;
}

.moment-item .icon6-2 {
    width: 389rem;
    height: 62rem;
    position: absolute;
    left: 66rem;
    bottom: 63rem;
    z-index: 999;
}

.moment-item .icon6-4 {
    width: 441rem;
    height: 62rem;
    position: absolute;
    left: 40rem;
    bottom: 63rem;
    z-index: 999;
}

.moment-item .icon6-6 {
    width: 407rem;
    height: 62rem;
    position: absolute;
    left: 55rem;
    bottom: 63rem;
    z-index: 999;
}

.moment-item .icon6-8 {
    width: 407rem;
    height: 99rem;
    position: absolute;
    left: 58rem;
    bottom: 26rem;
    z-index: 999;
}

.moment-item .icon6-10 {
    width: 351rem;
    height: 62rem;
    position: absolute;
    left: 86rem;
    bottom: 63rem;
    z-index: 999;
}

.moment-item .icon6-12 {
    width: 421rem;
    height: 62rem;
    position: absolute;
    left: 50rem;
    bottom: 63rem;
    z-index: 999;
}

.moment-item .icon6-14 {
    width: 272rem;
    height: 62rem;
    position: absolute;
    left: 125rem;
    bottom: 63rem;
    z-index: 999;
}


/* Ready When You Are Section */

.ready {
    width: 2148rem;
    height: 1209rem;
    background: url('./img/bg7.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ready .container {
    width: 100%;
    height: 100%;
    position: relative;
}

.ready .container .t6 {
    width: 747rem;
    height: 71rem;
    position: absolute;
    top: 163rem;
    left: 717rem;
}

.ready .container .imgBox {
    width: 1605rem;
    height: 641rem;
    position: absolute;
    top: 305rem;
    left: 275rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ready .container .imgBox .item {
    width: 402rem;
    height: 641rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 1s;
    z-index: 1;
}

.ready .container .imgBox .item:hover {
    transform: scale(1.2);
    z-index: 100;
}

.icon7-1 {
    width: 1605rem;
    height: 641rem;
    position: absolute;
    left: 0;
    top: 0;
}

.icon7-2 {
    width: 1605rem;
    height: 641rem;
    position: absolute;
    left: -402rem;
    top: 0;
}

.icon7-3 {
    width: 1605rem;
    height: 641rem;
    position: absolute;
    left: -804rem;
    top: 0;
}

.icon7-4 {
    width: 1605rem;
    height: 641rem;
    position: absolute;
    left: -1206rem;
    top: 0;
}


/* People Section */

.testimonials {
    width: 2148rem;
    height: 1134rem;
    background: #fff;
}

.testimonials .container {
    width: 100%;
    height: 100%;
    position: relative;
}

.testimonials .container .t7 {
    width: 591rem;
    height: 69rem;
    position: absolute;
    top: -156rem;
    left: 792rem;
}

.testimonials .container .icon8 {
    width: 1582rem;
    height: 901rem;
    left: 286rem;
    bottom: 133rem;
    position: absolute;
}

.testimonials .container .btnArr {
    width: 1196rem;
    height: 78rem;
    position: absolute;
    top: -31rem;
    left: 450rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testimonials .container .btnArr .btn2 {
    width: 260rem;
    height: 78rem;
    left: 1025rem;
    cursor: pointer;
    background-color: #df1763;
    color: white;
    border: 3rem solid #E91E63;
    font-weight: 700;
    border-radius: 50rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10rem 20rem rgba(0, 0, 0, 0.1);
    font-family: 'DelaGothicOne', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t8-1 {
    width: 223rem;
    height: 29rem;
}

.t8-2 {
    width: 169rem;
    height: 31rem;
}

.t8-3 {
    width: 235rem;
    height: 24rem;
}

.t8-4 {
    width: 255rem;
    height: 31rem;
}

.testimonials .container .btnArr .btn3 {
    width: 298rem;
}

.testimonials .container .btnArr .btn2:hover {
    transform: translateY(-10rem);
    box-shadow: 0 15rem 25rem rgba(233, 30, 99, 0.3);
}


/* Footer Section */

.footer {
    width: 2148rem;
    height: 870rem;
    background: url('./img/footerBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.footer .container {
    width: 100%;
    height: 100%;
    display: flex;
}

.footer .container .footerLeft {
    width: 1075rem;
    height: 100%;
    position: relative;
}

.footer .container .footerLeft .footerLogo {
    width: 354rem;
    height: 140rem;
    position: absolute;
    left: 273rem;
    top: 137rem;
}

.footer .container .footerLeft .t9 {
    width: 632rem;
    height: 52rem;
    position: absolute;
    left: 284rem;
    top: 313rem;
}

.footer .container .footerLeft .social-icons {
    display: flex;
    gap: 20rem;
    margin-top: 30rem;
    position: absolute;
    left: 281rem;
    bottom: 376rem;
}

.social-icon {
    width: 92rem !important;
    height: 92rem !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rem;
    text-decoration: none;
    transition: background 0.3s;
}

.social-icon img {
    width: 27rem;
    height: 49rem;
}

.social-icon .icon9-1 {
    width: 27rem;
    height: 49rem;
}

.social-icon .icon9-2 {
    width: 53rem;
    height: 50rem;
}

.social-icon .icon9-3 {
    width: 45rem;
    height: 50rem;
}

.social-icon {
    position: relative;
    display: inline-block;
    width: 60rem;
    height: 60rem;
    border-radius: 50%;
    overflow: hidden;
}

.social-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.social-icon img:first-child {
    opacity: 1;
}

.social-icon img:last-child {
    opacity: 0;
}

.social-icon:hover {
    background: #fabc01;
}

.social-icon:hover img:first-child {
    opacity: 0;
}

.social-icon:hover img:last-child {
    opacity: 1;
}

.footer .container .footerRight {
    flex: 1;
    position: relative;
}

.QuickLinks {
    width: 180rem;
    height: 25rem;
    position: absolute;
    top: 105rem;
    left: 0;
}

.footer-links {
    width: 146rem;
    height: 175rem;
    position: absolute;
    top: 193rem;
    display: flex;
    flex-direction: column;
}

.footer-links a {
    font-family: Arial, sans-serif;
    font-size: 24rem;
    color: #000000;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-links a:hover {
    color: #FF6B00;
}

.ContactUs {
    width: 168rem;
    height: 23rem;
    position: absolute;
    top: 105rem;
    right: 488rem;
}

.footer-social {
    width: 438rem;
    height: 187rem;
    position: absolute;
    top: 194rem;
    right: 218rem;
    display: flex;
    flex-direction: column;
}

.footer-social a {
    font-family: Arial, sans-serif;
    font-size: 24rem;
    color: #000000;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-social a:nth-of-type(1) img {
    margin-right: 7rem;
    width: 27rem;
    height: 23rem;
}

.footer-social a:nth-of-type(2) img {
    margin-right: 9rem;
}

.footer-social a:nth-of-type(3) img {
    margin-right: 11rem;
}

.footer-social a:hover {
    color: #FF6B00;
}

.copyright {
    width: 100%;
    height: 30rem;
    text-align: center;
    border-top: 1rem solid rgba(255, 255, 255, 0.1);
    color: #777;
    font-size: 16rem;
    position: absolute;
    bottom: 10rem;
}