*{
    margin:0;
    padding:0;
    font-family: 'Poppins',sans-serif;
}


/* 全局基准字体 */
.header{
    min-height: 100vh;
    width: 100%;
    /* 第一栏背景图 */
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("assets/1-background.png");
    background-position: center;
    background-size: cover;
    position: relative;
}





/*---------- 页面1：HOME ----------*/


/*----- 栏位1 -----*/
nav{ /* 左上角：Logo位置 */
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav > a{
    display: inline-block; /* shrink-wrap the anchor to the image */
    padding: 0;            /* remove extra clickable padding */
    line-height: 0;        /* remove inline whitespace height */
}
nav img{ /* Logo大小 */
    display: block; /* ensure image fills anchor and removes inline gaps */
    width: 150px;
    height: auto;

    /* 视觉放大 */
    transform-origin: left center; /* 以左侧为基点放大，避免居中移动 */
    transform: scale(2.2);        /* 调整为需要的放大倍数（例如 1.1 ~ 1.5） */
    transition: transform 0.2s ease;
}
.nav-links{ /* 右上角：信息行列 */
    flex: 1;
    text-align: right;
}
.nav-links ul li{ /* 右上角about水平 */
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
    transition: 0.5s;
}

/*----- 中心句子 -----*/
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1{
    font-size: 65px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 18px;
    color: #fff;
}
/* 中心button */
.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}

/*----- PC电脑端 -----*/
@media (min-width: 1200px){

    nav img{ /* Logo 放大 */
        display: block;
        width: 200px;
        height: auto;
    }

    .text-box{ /* 文本框宽度与标题（用合适的大屏尺寸）*/
        width: 70%;
        max-width: 1100px;
    }
    .text-box h1{
        font-size: clamp(48px, 6vw, 90px); /* "NewFolium" 在40px到90px之间随视口放大）*/
        line-height: 1.05;
    }
    .text-box p{
        font-size: 1.125rem;
        line-height: 1.4;
    }

    .nav-links ul li a{ /* 导航文字放大 */
        font-size: 1.125rem;
    }

    :root{ /* 全局基准字体在大屏放大（可选）*/
        font-size: 18px; /* 1rem = 18px 在大屏 */
    }

    .hero-btn{ /* 按钮放大 */
        font-size: 1.5rem;
        padding: 14px 40px;
    }
    
    /* 在大屏上隐藏切换菜单图标（保留手机端） */
    nav .fa-bars,
    nav .fa-times {
        display: none;
    }
}

/*----- 手机端：改为竖排 -----*/
@media (max-width: 700px){ /* 手机屏幕小于700px时，调整文字大小和导航栏布局 */
    .text-box h1{
        font-size: 30px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: fixed; /* 菜单：固定位置 */
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -220px; /* 菜单：初始位置在屏幕外 */
        text-align: left;
        z-index: 2;
        transition: 0.8s; /* 菜单：滑动时间 */
    }

    /* 菜单：打开时滑入 */
    .nav-links.open{
        right: 0;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }   
    .nav-links ul{
        padding: 30px;
    }
    
}



/*----- 栏位2：Categories -----*/

.categories{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 80px;
}
.categories-col{
    flex-basis: 32%;
    aspect-ratio: 1 / 1; /* 强制正方形 */
    border-radius: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.categories-col img{
    width: 100%;
}

.categories_title{ /* 标题样式 */
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
}
.categories_title::after{ /* 下划线 */
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 与标题保持固定距离并居中 */
}

.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.75s;
}
.layer:hover{ /* hover时背景变色 */
    background: rgba(212, 179, 109, 0.5);
}
.layer h3{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: clamp(35px, 3.5vw, 80px); /* 最小 20px，按视口宽度缩放，最大 80px */
}

@media (min-width: 1200px){
    .categories_title::after{ /* 下划线 */
        content: '';
        display: block;
        position: static; /* 重置：不再绝对定位 */
        left: auto;
        bottom: auto;
        transform: none;
        background: #ff523b;
        width: 150px;
        height: 10px;
        border-radius: 5px;
        margin: 15px auto 0; /* 与标题保持固定距离并居中 */
    }
    /* 在大屏上增加 categories 标题的上下间距（可按需调整） */
    .categories_title{
        margin: 60px auto 140px; /* top / horiz / bottom */
    }
}





/*----- 栏位3：Our Products -----*/
/*---------- 页面3：Our Products ----------*/
.products{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 80px;
}
/* Our Products 标题样式 */
.products_title{ 
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
}
.products_title::after{ /* 下划线：使用块级元素并通过 margin 控制间距，保证在各屏幕一致 */
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 与标题保持固定距离并居中 */
}
/* 产品行 */
.products-col{
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
/* 产品图片 */
.products-col img{ 
    width: 100%;
}
/* 产品名 */
.products-col h3{ 
    color: #444;
    font-weight: normal;
    font-size: clamp(22px, 2.5vw, 32px); /* 最小，按视口宽度缩放，最大 */
}
/* 产品价格 */
.products-col p{ 
    color: #333;
    font-weight: 550; /* 半粗体 */
    font-size: clamp(22px, 2.5vw, 32px);
    position: center;
}
/* 产品MOQ */
.products-col .moq{ 
    color: #666;
    font-weight: 500; /* 正常粗细 */
    font-size: clamp(16px, 2.5vw, 25px);
    position: center;
}

.products-col:hover{
    transform: translateX(-12px);
}

/* 分页按钮 Pagination 
.page-btn{ 
    margin: 0 auto 80px;
}
.page-btn span{
    display: inline-block;
    border: 1px solid #ff523b;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 20px;
}
.page-btn span:hover{
    background: #ff523b;
    color: #fff;
    transition: 0.5s;
} */




/*----- PC电脑端 -----*/
@media (min-width: 1200px){
    .products .row{
        display: flex;
        align-items: center;
        gap: 50px; /* 图片文字间距 */
        flex-wrap: wrap; /* 窗口窄时允许换行 */
        justify-content: center; /* 居中对齐 */
    }

    /* 在大屏上增加 Our Products 标题的上下间距（可按需调整） */
    .products_title{
        margin: 60px auto 140px; /* top / horiz / bottom */
    }
    .products_title::after{ /* 下划线：使用块级元素并通过 margin 控制间距，保证在各屏幕一致 */
        content: '';
        display: block;
        position: static; /* 重置：不再绝对定位 */
        left: auto;
        bottom: auto;
        transform: none;
        background: #ff523b;
        width: 150px;
        height: 10px;
        border-radius: 5px;
        margin: 15px auto 0; /* 与标题保持固定距离并居中 */
    }
    
    .products .products-col{
        flex: 1; /* 四列等分，可改为 flex: 0 0 25% 指定宽度 */
        max-width: 700px; /* 限制产品图最大宽度 */
    }
    .products .products-col img{
        width: 100%;
        height: auto;
        max-width: 700px; /* 限制图片过大 */
        display: block;
        margin: auto; /* 图片居中 */
    }

    /* 分页按钮 Pagination
    .page-btn span{
        display: inline-block;
        border: 1px solid #ff523b;
        margin-left: 10px;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        font-size: clamp(25px, 5vw, 35px);   /* button改大小 
    } */
    
}


/*----- 栏位4：Contact to Action -----*/
.cta{
    margin: 80px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("assets/banner2.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    width: 90%;
    margin: auto;
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}
@media (max-width: 700px){
    .cta{
    margin: 20px auto;
    }
    .cta h1{
        font-size: 25px;
    }
    .cta .hero-btn{
        font-size: 18px;
    }
}



/*---------- 栏位5：Footer ----------*/
.footer{
    width: 80%;
    text-align: center;
    padding: 30px 0;
    margin: 0 auto;
}
.footer h4{
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}
.icons .fa{
    color: #f44336;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
}
.fa-heart-o{
    color: #f44336;
}









/*---------- 页面2-3-4 ----------*/
/*----- 栏位一 -----*/
.sub-header{
    height: 55vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("assets/234-background.png");
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
/* About Us 标题 */
.sub-header h1{
    margin-top: 100px;
}
@media (min-width: 1200px){
    .sub-header{
        height: 60vh; /* 大屏时再增高（可按需调整） */
    }
}




/*---------- 页面2：ABOUT US ----------*/
.about-us{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.about-col{
    flex-basis: 48%;
    padding: 30px 2px;
}
.about-col img{
    width: 100%;
}
.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
/* CONTACT US 按钮 */
.red-btn{
    border: 1px solid #f44336;
    background: transparent;
    color: #f44336;
}
.red-btn:hover{ 
    color: #fff;
}


@media (min-width: 1200px){
    
    /* 栏位一：“ABOUT US”标题放大 */
    .sub-header h1{
        font-size: clamp(40px, 6vw, 96px); /* 在40px到96px之间随视口放大）*/
        line-height: 1.05;
    }
    /* 栏位二：文字与图片并排，图片在右侧 */
    .about-us .row{
        display: flex;
        align-items: center;
        gap: 100px; /* 图片文字间距 */
    }
    .about-us .about-col{
        flex: 1;     /* 两列等分，可改为 flex: 0 0 50% 指定宽度 */
    }
    .about-us .about-col img{
        width: 100%;
        height: auto;
        max-width: 900px;    /* 限制图片过大 */
        display: block;
    }
}










/*---------- 页面三：Our Products ----------*/

/*----- 栏位二：All Products -----*/
/*-- 产品区的代码在上面 页面一里 --*/
.row.row-2{
    display: flex;
    align-items: center;
    gap: 24px;         /* 列间距，可按需调整 */
    flex-wrap: wrap;   /* 窗口窄时允许换行 */
    justify-content: center; /* 居中对齐 */
}
select{
    border: 1px solid #ff523b;
    padding: 5px;
}
select:focus{
    outline: none;
}



/*---------- 页面3.1：Single product details ----------*/
.small-container{
    width: 85%;
    margin: auto;
    padding: 80px 0;
}
.single-product{ /* 第二栏img与第一栏的距离 */
    margin-top: -10px;
}
.single-product .col-2 img{
    padding: 0;
}
.single-product .col-2{
    padding: 20px;
}

/* 产品文字 */
.single-product .col-2 h1{ /* 产品名称 */
    font-size: 28px;
    margin: 10px 0;
}
.single-product .col-2 h4{ /* $价格 */
    font-size: 24px;
    margin-top: 30px;
} 
.single-product .col-2 .moq{ /* MOQ */
    font-size: 23px;
    font-weight: bold;
    margin-top: 10px;
    color: #222;
}
.single-product .col-2 h3{ /* Product Details */
    font-size: 22px;
    margin-top: 70px;
    margin-bottom: 0px;
    color: #555;
}
.single-product .col-2 p{ /* text */
    font-size: 18px;
    margin: -2px 0;
    color: #666;
    text-align: justify; /* 文字两端对齐 */
} 

/* 小图行 */
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}















@media (min-width: 1200px){ 
    /* Desktop: make the sorting/select area larger and more prominent */
    .row.row-2{
        justify-content: flex-end; /* align to left for desktop */
        gap: 32px;
    }
    .row.row-2 select{
        min-width: 320px; /* make select wider on desktop */
        padding: 10px 14px;
        font-size: 30px;   /* button改大小 */
        border-radius: 6px;
    }

    /* Desktop: single product layout - image left, details right */
    .single-product .row{
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }
    .single-product .col-2{
        flex: 1 1 0;
        padding: 20px;
    }
    .single-product .col-2:first-child{
        flex: 0 0 35%; /* image column width */
    }
    .single-product .col-2:first-child img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        object-fit: cover;
    }
    .single-product .col-2:last-child{
        flex: 1 1 55%; /* details column */
        text-align: left;
    }


    /* 产品文字 */
    .single-product .col-2 h1{ /* 产品名称 */
        font-size: 80px;
        margin-top: 50px;
    }
    .single-product .col-2 h4{ /* $价格 */
        font-size: 50px;
        margin-top: 30px;
    } 
    .single-product .col-2 .moq{ /* MOQ */
        font-size: 48px;
        font-weight: bold;
        margin-top: 10px;
        color: #222;
    }
    .single-product .col-2 h3{ /* 产品细节标题 “Product Details” */
        font-size: 40px;
        margin-top: 70px;
        margin-bottom: 0px;
        color: #555;
    }
    .single-product .col-2 p{ /* text */
        font-size: 35px;
        margin: 0px 0;
        color: #666;
    } 

 
    .products .products-col p{
        text-align: center;
        font-size: clamp(22px, 2.5vw, 45px); /* 调整最大值到45px，可以根据需要修改 */
    }
}








/*---------- 页面四：Contact Us ----------*/

/*----- 栏位一 -----*/
.location{
    width: 80%;
    margin: auto;
    padding: 80px 0;
}
.location iframe{
    width: 100%;
}

.contact-us{
    width: 80%;
    margin: auto;
}
.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{ /* icons样式 */
    font-size: 30px;
    color: #f44336;
    margin: 10px;
    margin-right: 30px;
}
.contact-col div h5{ /* icons旁边的标题 */
    font-size: 20px;
    margin-bottom: 5px;
    color: #111;
    font-weight: 400;
}
.contact-col div p{ /* icons旁边的文字 */
    padding: 0;
    color: #555;
}

/* 填写区：样式 */
.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="password"],
.contact-us textarea,
.contact-us button {
    font-family: 'Poppins', sans-serif; /* 保持与页面一致 */
    font-size: 30px;    /* 边框 改大小 */
    line-height: 1.3;
    padding: 5px 12px; /* 增加内边距配合大字体 */
    box-sizing: border-box;
}
/* 放大 placeholder 方框内字体：“name, email...” */
.contact-us input::placeholder,
.contact-us textarea::placeholder {
    font-size: 22px;
    opacity: 0.8;
}

/* 填写区：样式 */
.contact-box-title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px;
}
.contact-col input, .contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box; /* 包括padding在内 */
}

@media (min-width: 1200px){ /* 大屏幕样式：注意先后顺序，只有放在最后面才不会出错 */
    .row {
    display: flex;
    gap: 24px;         /* 列间距，可按需调整 */
    flex-wrap: wrap;   /* 窗口窄时允许换行 */
    align-items: flex-start;
    }
    
    .contact-col div .fa{ /* PC端：icons样式 */
    font-size: 60px;
    color: #f44336;
    margin: 10px;
    margin-right: 30px;
    }
    .contact-col div h5{ /* icons旁边的标题 */
        font-size: 40px;
        margin-bottom: 5px;
        color: #111;
        font-weight: 400;
    }
    .contact-col div p{ /* icons旁边的文字 */
    font-size: 35px;
    }

    .contact-us input[type="text"],
    .contact-us input[type="email"],
    .contact-us input[type="password"],
    .contact-us textarea,
    .contact-us button {
        font-family: 'Poppins', sans-serif; /* 保持与页面一致 */
        font-size: 35px;    /* button改大小 */
        line-height: 1.3;
        padding: 10px 12px; /* 增加内边距配合大字体 */
        box-sizing: border-box;
    }
    /* 放大 placeholder 方框内字体：“name, email...” */
    .contact-us input::placeholder,
    .contact-us textarea::placeholder {
        font-size: 35px;
        opacity: 0.8;
    }

    .contact-box-title {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 12px;
    }   
}