@media screen and (max-width:800px) {
    .web_top_banner {
        display: none;
    }

    .phone_top_banner_img {
        display: block;
    }

    .phone_top_banner_img_relative {
        position: relative;
    }

    .menu_container {
        z-index: 100;
        position: absolute;
        right: 50px;
        top: 20%;
        display: inline-block;
        align-content: center;
    }

    .menu_bar1,
    .menu_bar2,
    .menu_bar3 {
        position: relative;
        width: 30px;
        height: 4px;
        margin: 5px 0;
        background-color: white;
        transition-duration: 0.3s;
    }

    .change .menu_bar1 {
        position: fixed;
        top: 9px;
        right: 8vw;
        background-color: #841811;
        transform: translate(0, 9px) rotate(-45deg);
    }

    .change .menu_bar2 {
        position: fixed;
        right: 8vw;
        opacity: 0;
    }

    .change .menu_bar3 {
        position: fixed;
        top: 27px;
        right: 8vw;
        background-color: #841811;
        transform: translate(0, -9px) rotate(45deg);
    }

    .menu_item {
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu_item a {
        font-size: 24px;
        color: #841811;
        font-weight: bold;
        text-decoration: none;
    }

    .user_information_container{
        align-items: start;
    }

    .change.menu_box {
        display: inline-block;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

    .carousel-indicators {
        display: none;
    }

    .right_container_innerdiv {
        top: 15%;
    }

    .right_container_innerdiv h1 {
        font-size: 18px;
    }

    .right_container_innerdiv p {
        font-size: 12px;
    }

    .left_container_innerdiv {
        top: 15%;
    }

    .left_container_innerdiv h1 {
        font-size: 18px;
    }

    .left_container_innerdiv p {
        font-size: 12px;
    }

    .left_container h1,
    .left_container p,
    .left_container button {
        margin: 8px 0;
        /* Adjust spacing between elements as needed */
    }

    .right_container h1,
    .right_container p,
    .right_container button {
        margin: 8px 0;
        /* Adjust spacing between elements as needed */
    }

    .quote {
        height: 35vh;
    }

    .quote_left_div {
        max-height: 100px;
    }

    .quote_middle_div {
        top: 6vh;
        width: 60vw;
        max-height: 125px;
    }

    .quote_top_text {
        font-size: 14px;
    }

    .quote_middle_text {
        font-size: 10px;
    }

    .quote_bottom_text {
        font-size: 8px;
    }

    .quote_img {
        left: 0;
        width: 100vw;
    }

    .recommend_text {
        width: 50vw;
        margin-bottom: 6%;
    }

    .web_recommend_middle_div {
        display: none;
    }

    .phone_recommend_middle_div {
        display: grid;
    }

    .recommend_button {
        width: 150px;
        height: 30px;
        right: 0px;
        font-size: 12px;
        padding: 6px 20px 6px;
    }

    .recommend_button_shadow {
        position: absolute;
        right: 5px;
        bottom: -5px;
        width: 150px;
        height: 30px;
    }

    .recommend_button p {
        margin: 0;
    }

    .recommend_button_shadow:has(.recommend_button:hover) {
        bottom: 0px;
        right: 0px;
    }

    .recommend_arrow {
        height: 5px;
        transform: translate(0%, -50%);
    }

    .image_video {
        width: 50vw;
        margin-block: 4%;
    }

    .image_video_playdiv {
        width: 75vw;
        max-height: 250px;
    }

    .video_button {
        position: absolute;
        cursor: pointer;
        width: 20vw;
        right: -10%;
        bottom: -5%;
    }

    /* about_us.css */
    .about_fans_button_container {
        display: flex;
        justify-content: center;
        height: 45px;
    }

    .about_fans_button_div {
        position: absolute;
        left: auto;
        bottom: 0;
    }

    .set_button {
        border: none;
        font-size: 14px;
        width: 22vw;
        height: 37.5px;
        padding: 5px 0;
        background-color: transparent;
        color: white;
        transform: translate(0%, 1px);
    }

    .set_button_select {
        border: none;
        width: 22vw;
        height: 37.5px;
        padding: 5px 0;
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        background-color: white;
        color: #A13D5C;
        transform: translate(0%, 1px);
    }

    .history_container {
        height: 25vh;
    }

    .history_img {
        filter: drop-shadow(3px 3px 2px black);
    }

    .history_bottom_line {
        margin: 7px 0;
    }

    .history_top_text_div h1 {
        font-size: 5vw;
    }

    .history_top_text_div h3 {
        font-size: 2.6vw;
    }

    .international_exchange_container {
        height: 55vh;
    }

    .international_exchange_background {
        height: 55vh;
    }

    .international_exchange_textimg {
        width: 50vw;
    }

    .welcome_div {
        display: none;
    }

    .phone_welcome_div {
        display: block;
    }

    .welcome_button {
        width: 75px;
        border: 2px solid #F7931E;
    }

    .welcome_button div,
    .welcome_button:before {
        font-size: 8px;
        padding: 0.6vh 0.3vw;
    }

    .carousel_button {
        width: 75px;
        border: 2px solid #F7931E;
    }

    .carousel_button div,
    .carousel_button:before {
        font-size: 8px;
        padding: 0.4vh 0.2vw;

    }

    /* product.css */
    .product_carousel_container {
        display: none;
    }

    .product_container {
        height: 90vh;
    }

    .product_div {
        width: 82%;
    }

    .product_item_left {
        width: 45%;
    }

    .product_item_right {
        width: 50%;
    }

    .product_item_header {
        font-size: 25px;
    }

    .product_item_price {
        font-size: 12px;
    }

    .product_item_gray {
        font-size: 12px;
    }

    .product_item_description {
        font-size: 12px;
    }

    .product_number_div{
        height: 25px;
    }
    .product_item_left {
        height: calc(100% - 25px);
        width: 20%;
    }

    .product_item_left img {
        user-select: none;
        object-fit: cover;
        max-height: 100%;
        width: 100%;
    }

    .product_item_right {
        align-content: center;
        height: calc(100% - 25px);
        width: 70%;
    }

    .product_number_div {
        width: 50px;
    }

    .product_number_minus {
        padding: 2px;
        height: 16px;
        width: 16px;
    }

    .product_number_minus_sign {
        height: 1px;
        transform: translate(0, 3px);
    }

    .product_number_plus {
        padding: 2px;
        height: 16px;
        width: 16px;
    }

    .product_number_plus_sign_hori,
    .product_number_plus_sign_vert {
        height: 1px;
        transform: translate(0, 3px);
    }

    .product_number_plus_sign_vert {
        bottom: -2px;
        transform: rotate(90deg);
    }

    .product_number_counter {
        font-size: 15px;
    }

    .add_ons_div {
        width: 82%;
    }

    .add_ons_text_div {
        margin: 20px auto;
    }

    .add_ons_text {
        width: 36%;
    }

    .add_ons_line {
        width: 62%;
    }

    .add_ons_container {
        height: 30vh;
    }

    .add_ons_item_container {
        height: 55%;
    }

    .phone_product_bottom_container {
        display: flex;
    }

    /* user_login.css */
    .animation_container {
        display: none;
    }

    .web_user_login_container {
        display: none;
    }

    .web_user_sign_up_container {
        display: none;
    }

    .phone_animation_container {
        position: relative;
        display: block;
        overflow: hidden;
        /* margin: 5vh 0px; */
    }

    .phone_user_login_container,
    .phone_user_sign_up_container {
        transition: ease 0.45s;
    }

    .phone_user_login_container {
        position: absolute;
        height: 100%;
        width: 100%;
        display: block;
        opacity: 1;
        justify-content: center;
        align-items: center;
    }

    .phone_user_sign_up_container {
        position: absolute;
        height: 100%;
        width: 100%;
        display: none;
        opacity: 0;
        justify-content: center;
        align-items: center;
    }

    /* user_information.css */
    .user_logs_modal_div {
        position: relative;
        background-color: white;
        height: 50%;
        width: 90%;
    }

    .user_logs_modal_innerdiv {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #B3B3B3;
        padding: 0px 2%;
    }

    .user_logs_information_modal_div {
        justify-content: center;
        align-content: center;
        height: 70%;
        width: 100%;
        color: #808080;
    }

    .user_logs_modal_div_right_section {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .user_logs_modal_div_right_section>.user_logs_div_status h2 {
        font-size: 24px;
        margin: 0;
    }

    .user_logs_div_status {
        justify-content: start;
        width: 50%;
    }

    .phone_user_logs_modal_right_section {
        width: 50%;
    }

    .user_logs_information_modal_div {
        border-bottom: 1px solid #eaeaea;
    }

    .user_logs_information_modal_div h1 {
        margin: 2px 0px;
        font-size: 18px;
    }

    .user_logs_information_modal_div p {
        margin: 0;
        font-size: 16px;
    }

    .user_information_top_div h1 {
        font-size: 24px;
    }

    .user_information_change_button {
        height: 50%;
        width: 25%;
        text-align: center;
        border: 1px solid #F7931E;
        background-color: transparent;
        color: #F7931E;
        font-weight: bold;
        border-radius: 8px;
        transition-duration: 0.3s;
    }

    .user_information_change_button:hover {
        background-color: #F7931E;
        color: white;
    }

    .user_information_change_button_lock {
        display: none;
        height: 50%;
        width: 25%;
        text-align: center;
        border: 1px solid #C1272D;
        background-color: transparent;
        color: #C1272D;
        font-weight: bold;
        border-radius: 8px;
        transition-duration: 0.3s;
    }

    .user_information_change_button_lock:hover {
        background-color: #C1272D;
        color: white;
    }

    .user_information_change_button_confirm {
        display: none;
        height: 75%;
        width: 100%;
        text-align: center;
        background-color: #F7931E;
        color: white;
    }

    .user_information_change_button_confirm:hover {
        background-color: #F7931E;
        color: white;
    }

    .phone_user_information_middle_bottom_div {
        display: block;
        border-top: 1px solid #dddddd;
    }

    .user_logs_number {
        font-weight: bold;
        font-size: 18px;
        margin: 0;
        width: 5%;
    }

    .user_logs_information_div p {
        font-size: 12px;
    }

    .user_logs_status_delivered {
        font-size: 18px;
    }

    .user_logs_status_notsend {
        font-size: 18px;
    }

    .user_logs_status_sending {
        font-size: 18px;
    }

    .user_logs_status_complete {
        font-size: 18px;
    }

    .check_user_logs_button {
        font-size: 12px;
        margin: 2px;
    }

    .user_information_logout_div {
        display: none;
    }

    .phone_user_information_middle_bottom_user_logs {
        display: none;
    }

    /* pay.css */
    .pay_item_container {
        margin-top: 50px;
        margin-bottom: 0px;
        height: 500px;
    }

    .pay_item_top h1 {
        padding-left: 12px;
        font-size: 24px;
    }

    .pay_item {
        padding: 24px;
    }

    .pay_item_left {
        justify-content: space-around;
    }

    .pay_item_left h2 {
        font-size: 18px;
    }

    .pay_item_right h2 {
        font-size: 18px;
    }

    .cart_number_counter {
        font-size: 16px;
    }

    .pay_item_bottom p {
        font-size: 16px;
    }

    .pay_item_bottom h2 {
        font-size: 18px;
    }

    .address_container {
        margin-top: 75px;
        height: 700px;
    }

    .address_top h1 {
        font-size: 24px;
        padding-left: 12px;
    }

    .address_bottom {
        padding: 24px;
    }

    .address_item h4 {
        font-size: 14px;
    }

    .address_item p {
        font-size: 14px;
    }

    .pay_address_div {
        height: 100%;
        margin-bottom: 0px;
    }

    .receive_address_div {
        height: 100%;
        margin-top: 75px;
    }

    .address_change_button {
        font-size: 18px;
    }

    .pay_receive_data_div {
        height: 450px;
        width: 90vw;
    }

    .pay_receive_top {
        height: 15%;
    }

    .pay_receive_top h1 {
        font-size: 24px;
        padding-left: 12px;
    }

    .pay_receive_top_div {
        padding-right: 12px;
    }

    .pay_receive_bottom {
        height: 85%;
        padding: 24px;
    }

    .admin_pay_receive_div {
        align-content: center;
        width: 100%;
    }

    .pay_receive h4 {
        font-size: 16px;
    }

    .receive_address_top_checkbox p {
        font-size: 18px;
    }

    .pay_method_container {
        margin-top: 75px;
        margin-bottom: 75px;
        height: 700px;
    }

    .pay_method_div {
        margin-top: 0px;
    }

    .pay_method_top {
        justify-content: space-between;
    }

    .pay_method_top h2 {
        font-size: 24px;
        padding-left: 12px;
    }

    .pay_method_top p {
        font-size: 10px;
        padding-right: 12px;
        font-weight: bold;
    }

    .pay_method_middle {
        height: 60%;
    }

    .remit_title_div{
        padding: 4%;
        width: 100%;
    }

    .remit_title h2{
        font-size: 18px;
    }

    .remit_title p{
        font-size: 16px;
    }

    .remit_description h4{
        font-size: 12px;
    }

    .remit_input{
        width: 100%;
        padding: 4%;
    }

    .remit_input input{
        width: 50px;
    }

    .remit_input p{
        font-size: 16px;
    }

    .cashondelivery_div h2{
        font-size: 18px;
    }

    .pay_method_middle_method_div {
        height: 15%;
    }

    .pay_method_btn {
        width: 30%;
        font-size: 14px;
    }

    .pay_method_bottom {
        height: 30%;
        padding: 24px;
    }

    .pay_method_item {
        height: 22.5%;
    }

    .pay_method_item h4 {
        font-size: 16px;
    }

    .pay_method_item p {
        font-size: 18px;
    }

    .pay_method_price {
        height: 22.5%;
    }

    .pay_method_price h4 {
        font-size: 16px;
    }

    .pay_method_price h2 {
        font-size: 18px;
    }

    .pay_method_confirm {
        height: 20%;
    }

    .pay_method_confirm p {
        font-size: 12px;
    }

    .pay_method_confirm_button {
        display: none;
    }

    .phone_pay_method_confirm {
        display: flex;
    }

    .user_information_middle_div{
        display: initial;
    }

    .user_information_button img{
        width: 25px;
    }

    .user_information_inner_container{
        height: initial;
    }

    .user_information_middle_left_div{
        width: 100%;
    }

    .user_information_middle_right_div {
        width: 100%;
        height: auto;
    }

    .user_information_input_box{
        margin: 20px 0px;
    }

    .input-group-lg>.btn, .input-group-lg>.form-control, .input-group-lg>.form-select, .input-group-lg>.input-group-text{
        padding: .375rem .75rem;
        font-size: 1rem;
    }
}