/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*base css start*/
.header {
    background: #ffffff;
}
ul {
    padding: 0;
    margin: 0;
}
li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.logo {
    line-height: 100px;
}

.logo a {
    display: block;
    float: left;
}
.menu-container{
    position: sticky;
    z-index: 999;
    top: 0;
    background: #ffffff;
    -webkit-box-shadow: 0  1px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0  1px 1px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}

.main-menu {
    z-index: 999;
}

.main-menu nav {}

.main-menu nav>ul {

}
@media screen and (min-width: 768px) {
.main-menu nav>ul>li {
    display: block;
    float: left;
    margin-right: 15px;
    position: relative;
}
}


.main-menu nav>ul>li>a {
    color: #004071;
    display: block;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 80px;
    padding-right: 22px;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    .main-menu nav>ul>li>a::before {
    background: #e2214b none repeat scroll 0 0;
    bottom: 20px;
    content: "";
    height: 3px;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 0;
}

.main-menu nav>ul>li:hover>a::before,
.main-menu nav>ul>li.active>a::before {
    width: 30px;
}
}


#carouselExampleControls img {
    max-height: 600px;
}

.service {
    background: rgb(255, 255, 255);

}

.font {
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(68, 68, 68);
    height: 60px;
    line-height: 60px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.service-icon-container {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 20px;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

}

.service-icon-font {
    text-align: center;
    font-size: medium;
}

.service-icon-container svg:hover {
    fill: red;
}

.hot-products-container {
    background: rgb(238, 238, 238);
    overflow: hidden;

}

.hot-products-container ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}

.hot-products-container ul li {
    overflow: hidden;
    margin: 10px;
    position: relative;
}

.product-img:hover::before {
    content: "+";
    /* 添加内容 */
    position: absolute;
    /* 设置绝对定位 */
    top: 50%;
    /* 与父元素垂直居中 */
    left: 50%;
    /* 与父元素水平居中 */
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    /* 使伪元素居中 */
    font-size: 60px;
    /* 设置字体大小 */
    color: rgb(255, 255, 255, 0.7);
    /* 设置字体颜色 */
    z-index: 1;
    /* 将伪元素放置在图片上层 */
    cursor: pointer;
}

.product-img:hover .product-shadow {
    display: block;
    cursor: pointer;
}

.product-hotimg {
    position: absolute;
    top: 5%;
    right: 0;
    /* z-index: 1; */
}

.product-shadow {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 0;
    display: none;
}

.product-name {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    color: rgb(51, 51, 51);
}

.product-name:hover {
    color: palevioletred;
}

.hot-products-container ul li a:hover {
    -webkit-text-decoration: palevioletred underline;
            text-decoration: palevioletred underline;
}

.footer{
    background: -webkit-gradient(linear, left top, left bottom, from(#485563), to(#29323c));
    background: -o-linear-gradient(top, #485563, #29323c);
    background: linear-gradient(to bottom, #485563, #29323c);
}

.footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-left: 15%;
    margin-right: 15%;
}

.footer-item {
    text-align: start;
    max-width: 300px;

}
.footer-item-name {
    color: white;
    height: 26px;
    line-height: 26px;
    font-size: 20px;
    margin-top: 20px;
}
.footer-container .divider {
    padding-top: 20px;
    position: relative;
}

.footer-container .divider::before{
    content: '';
    position: absolute;
    left: 0;
    background: orange;
    width: 20%;
    height: 2px;
    z-index: 1;
}
.footer-container .divider::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    background: rgb(89, 96, 103);
    height: 2px;
}

.quick-link {
    padding: 0;
    margin-left: 15px;
    margin-top: 10px;
}
.quick-link li {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.quick-link a:hover{
    text-decoration: none;
    color: white;
    cursor: pointer;
}
.quick-link-arrow {
    color: white;
    font-size: 16px;
}

.quick-link .quick-link-arrow::before {
    position: absolute;
    top: 30%;
    left: -10%;
    content: '';
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #ff9900;
}

.shopping-card-btn-container{
    position: fixed;
    bottom: 15%;
    right: 0;
}
/* .shopping-card-btn::before {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid red;
    background: red;
    content: "";
    color: white;
    text-align: center;
    line-height: 20px;
    right: 5px;
    top: -5px;
} */
.shopping-card-count {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid red;
    background: red;
    color: white;
    text-align: center;
    line-height: 20px;
    right: 5px;
    top: -5px;
    font-size: 14px;
}

.shopping-card-list-container{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 250px;
    background: white;
    display: none;
}
.shopping-card-list-btn {
    width: 100%;
    height: 30px;
    background: #7a8599;
    border: 1px solid rgb(128, 128, 128);
    text-align: center;
    position: relative;
    color: white;
}
.shopping-card-list-btn::before {
    content: "";
}

.shopping-card-list {
    overflow-y: auto;
    max-height: 300px;
    min-height: 300px;
    z-index: 1;
}
.shopping-card-list li {
    padding: 8px 0;
    margin: auto 10px;
    position: relative;

}

.shopping-card-list li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(187, 183, 183);
  }

.shopping-card-list-item-delete {
    line-height: 40px;
    margin-left: 10px;
    display: none;
    color: rgb(143, 143, 142);
}
.shopping-card-list li:hover .shopping-card-list-item-delete {
    display: block;
}

.shopping-card-list-item-delete:hover{
    cursor: pointer;
    text-decoration: underline;
}
/*base css end*/


/*produucts css start*/
.products-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* justify-content: left; */
}

.products-container .card-img {
    margin: 20px;
    padding: 20px;
}

.products-container .card-text:hover {
    color: #ff9900;

}

/*products css end*/


/*product css start*/
.buy-button {
    height: 40px;
    border-radius: 45px;
    border: 1px solid #ec7331;
    color: #ec7331;
    background-color: white;
    position: relative;
}

.buy-button:hover {
    background-color: #ec7331;
    color: white;
}

@media (max-width: 768px) {
    .img-container img{
        height: 100px !important;
        width: 100px !important;
        margin: 40px !important;
    }
}
.img-container img {
    height: 200px;
    width: 200px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    margin: 20px;
}

.img-container img:hover {
    border: 1px solid #ec7331;
}

.myalert {
    width: 20%;
    margin-left: 80%;
    z-index: 1;
}
/* 媒体查询：移动端样式 */
@media screen and (max-width: 768px) {

    /* 汉堡菜单按钮样式 */
    .hamburger {
        display: block; /* 显示汉堡菜单按钮 */
        font-size: 1.5rem;
        cursor: pointer;
        padding: 10px;
        text-align: right;
    }

    /* 隐藏菜单项容器 */
    .menu-items {
        display: none; /* 默认隐藏 */
        list-style: none;
        margin: 0;
        padding: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; /* 垂直排列 */
    }
    .main-menu nav>ul>li>a {
        line-height: normal;
        text-align: center;
    }

    /* 当菜单展开时显示菜单项 */
    .menu-items.open {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; /* 允许换行 */
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-line-pack: center;
            align-content: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .menu-items li {
        width: 50%; /* 每个菜单项占一半宽度 */
        -webkit-box-sizing: border-box;
                box-sizing: border-box; /* 包括内边距和边框 */
        margin: 0; /* 去除外边距 */
        padding: 5px; /* 减少内边距 */
        text-align: center; /* 居中对齐 */
    }

    .menu-items li a {
        display: block; /* 链接占满整个行 */
        padding: 10px;
        text-decoration: none;
        color: #000;
    }
}


/* 移动端优化样式 */
@media screen and (max-width: 768px) {
    /* 容器布局调整 */
    .card.card-img.card-product{
        width: 10rem !important;
    }
    .card.card-img.card-product>button{
        width: auto !important;
        font-size: 10px !important;
    }
    .container-full {
        padding: 0 10px; /* 两侧增加间距 */
        overflow: hidden;
    }


    /* 产品卡片样式调整 */
    .products-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; /* 切换为垂直布局 */
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end; /* 居中对齐 */

    }
    .products-container .card-img {
        margin: 5px;
        padding: 5px;
    }
    .card-product {
        width: 100%; /* 占满宽度 */
        margin: 10px 0; /* 调整间距 */
    }

    .card-img {
        margin: 0; /* 去除间距 */
        padding: 10px; /* 缩小内边距 */
    }
    @media (max-width: 768px) {
   .card-img img{
       width: 70%;
       height: 70%;
       margin: auto;
   }
  }
    .card-text {
        font-size: 1rem; /* 调整字体大小 */
        text-align: center; /* 居中对齐 */
    }

}

/*product css end*/