/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 26 2026 | 06:59:52 */
@charset "UTF-8";
.home-banner { text-align: center; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/home-bg.jpg");height:945px;padding-top:110px; }
.home-banner .product-showcase { display: flex; gap: 37px; justify-content: center; margin-top: 125px; }
.home-banner .product-showcase .product-item { width: 128px; height: 128px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.home-banner .product-showcase .product-item:hover{backdrop-filter: blur(10px);}
.home-banner .product-showcase .product-item img { object-fit: contain; }
.ice-bags-for-sale { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/sale-bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; padding: 120px 0 60px; }
.ice-bags-for-sale .grid-container { position: relative; }
.ice-bags-for-sale .grid-container::before { content: ""; position: absolute; top: -90px; left: -85px; width: 576px; aspect-ratio: 576/152; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/sale-text.png"); background-repeat: no-repeat; display: block; }
.ice-bags-for-sale .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; margin-bottom: 40px; }
.ice-bags-for-sale .products-grid .product-card { padding: 20px 30px; background-color: #ffffff; position: relative; overflow: hidden; display: flex; justify-content: space-between; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.ice-bags-for-sale .products-grid .product-card > p{margin-bottom:0;}
.ice-bags-for-sale .products-grid .product-card h3 { font-size: 18px; font-weight: 500; margin-bottom: 20px; }
.ice-bags-for-sale .products-grid .product-card ul { list-style-type: none; padding: 0; }
.ice-bags-for-sale .products-grid .product-card ul li { line-height: 2; font-size: 15px; position: relative; padding: 0 8px 0 15px; }
.ice-bags-for-sale .products-grid .product-card ul li::before { content: "\e6af"; position: absolute; left: 0; font-family: "iconfont" !important; font-size: 8px; top: 4px; }
.ice-bags-for-sale .products-grid .product-card .more-details { display: inline-block; font-size: 15px; color: var(--contrast); text-decoration: underline; }
.ice-bags-for-sale .products-grid .product-card .more-details:hover { color: var(--accent); }
.ice-bags-for-sale .products-grid .product-card .product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: 30px;word-break: break-word; }
.ice-bags-for-sale .products-grid .product-card .cover { object-fit: contain; flex-shrink: 0;transition: all 0.4s; }
.ice-bags-for-sale .products-grid .product-card:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.ice-bags-for-sale .products-grid .product-card:hover .cover{transform: scale(1.1);}

.company-overview { padding: 120px 0; }
.company-overview h2 { text-align: center; margin-bottom: 70px; }
.company-overview .grid-container { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/company-overview-bg.png"); background-repeat: no-repeat; background-position: left top; background-size: contain; padding: 12px 12px 12px 30px; box-sizing: border-box; background-color: #FFFFFF; box-shadow: 0 0 10px rgba(44, 44, 44, 0.1); }
.company-overview .grid-container .overview-content { display: flex; align-items: center; gap: 40px; }
.company-overview .grid-container .overview-content .company-info { flex: 1; }
.company-overview .grid-container .overview-content .company-info p { margin-bottom: 40px; line-height: 2;}
.company-overview .grid-container .overview-content .company-info .btn-primary { display: inline-block; padding: 8px 15px; background-image: linear-gradient(to right, #4aadd4, #89de7b); color: white; text-decoration: none; border-radius: 4px; font-weight: 500; }
.company-overview .grid-container .overview-content .stats-grid { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; width: 818px; }
.company-overview .grid-container .overview-content .stats-grid .stat-card { position: relative; }
.company-overview .grid-container .overview-content .stats-grid .stat-card .stat-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF; }
.company-overview .grid-container .overview-content .stats-grid .stat-card .stat-content .stat-content-num { font-size: 32px; font-weight: 600; }
.company-overview .grid-container .overview-content .stats-grid .stat-card .stat-content p { margin: 0; }

.marquee-box { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/why_bg.jpg"); height: 945px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }
.marquee-box h2 { margin-bottom: 70px; }
.marquee-box .grid-container { display: flex; align-items: center; height: 100%; gap: 100px; }
.marquee-box .left { width: 63%; color: white; }
.marquee-box .marquee-grid-container { width: 100%; overflow: hidden; position: relative; /* 核心：内容透明度渐变遮罩（从中间向两边透明） */ /* Webkit内核浏览器（Chrome/Safari） */ -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); /* 标准写法 */ mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); /* 遮罩默认覆盖整个元素（可选，默认值） */ -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.marquee-box .marquee-wrapper { display: flex; position: relative; }
.marquee-box .marquee-content { box-sizing: border-box; flex-shrink: 0; }
.marquee-box .marquee-content .f { display: flex; margin: 12px 0; }
.marquee-box .marquee-content .f2 .marquee-item:first-child { margin-left: -161px; }
.marquee-box .marquee-item { flex-shrink: 0; border-radius: 4px; box-sizing: border-box; width: 322px; margin: 0 6px; display: flex; justify-content: center; align-items: center; }

@media screen and (min-width: 1450px) { .marquee-box .grid-container { max-width: 100vw; padding-left: calc((100vw - 1450px) / 2); } }
.certificates-section { padding: 120px 0; }
.certificates-section .grid-container { text-align: center; }
.certificates-section .grid-container h2 { margin-bottom: 30px; }

.service-process { position: relative; height: 945px; overflow: hidden; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/service-process-bg1.jpg"); background-size: cover; background-position: center; transition: all 0.4s; }
.service-process h2 { position: relative; z-index: 3; margin-top: 80px; color: #FFFFFF; }
.service-process .grid-container { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.service-process .service-steps { display: flex; width: 100%; height: 100%; position: relative; margin-top: -148px; }
.service-process .service-steps .service-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; background-color: transparent; background: linear-gradient(to top, transparent, #fff 50%, transparent) right/1px 100% no-repeat; }
.service-process .service-steps .service-step.More{display:none;}
.service-process .service-steps .service-step:hover, .service-process .service-steps .service-step.active { background: linear-gradient(to top, transparent, #fff 50%, transparent) right/1px 100% no-repeat, linear-gradient(to top, rgba(74, 173, 212, 0.8), rgba(137, 222, 123, 0.8)); }
.service-process .service-steps .service-step:hover .step-content, .service-process .service-steps .service-step.active .step-content { opacity: 1; visibility: visible; transform: translateY(0); }
.service-process .service-steps .service-step .step-number { font-size: 170px; color: rgba(255, 255, 255, 0.3); position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-weight: 300; z-index: 1; transition: all 0.5s ease; }
.service-process .service-steps .service-step .step-icon { margin-bottom: 10px; position: relative; z-index: 2; }
.service-process .service-steps .service-step h3 { font-size: 20px; color: white; margin-bottom: 40px; text-align: center; position: relative; z-index: 2; transition: all 0.5s ease; }
.service-process .service-steps .service-step .step-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.5s ease; }
.service-process .service-steps .service-step .step-content p { color: white; font-size: 14px; line-height: 2; margin: 0; }

.why-choose-raybo { position: relative; padding: 120px 0 180px; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/why_bg.jpg"); background-size: cover; background-position: center; }
.why-choose-raybo .grid-container { position: relative; z-index: 2; }
.why-choose-raybo .grid-container h2 { margin-bottom: 170px; text-align: center; color: white; }
.why-choose-raybo .grid-container .choose-content { display: flex; justify-content: space-between; gap: 60px; align-items: flex-end; }
.why-choose-raybo .grid-container .choose-content .choose-list { flex: 0 0 425px; }
.why-choose-raybo .grid-container .choose-content .choose-list .choose-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: white; cursor: pointer; transition: all 0.3s ease; font-size: 20px; }
.why-choose-raybo .grid-container .choose-content .choose-list .choose-item:hover, .why-choose-raybo .grid-container .choose-content .choose-list .choose-item.active { color: #4aadd4; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #4aadd4, #89de7b) 1; }
.why-choose-raybo .grid-container .choose-content .choose-list .choose-item:hover span, .why-choose-raybo .grid-container .choose-content .choose-list .choose-item.active span { color: transparent; background-clip: text; background-image: linear-gradient(to right, #4aadd4, #89de7b); }
.why-choose-raybo .grid-container .choose-content .choose-list .choose-item .iconfont { font-size: 12px; }
.why-choose-raybo .grid-container .choose-content .choose-details { display: flex; gap: 14px; overflow-x: auto; align-items: flex-end; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item { flex: 0 0 80px; width: 80px; height: 80px; background-color: rgba(0, 0, 0, 0.41); padding: 0; text-align: center; transition: all 0.5s ease; cursor: pointer; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active { flex: 0 0 360px; width: 360px; height: 370px; background-color: rgba(0, 0, 0, 0.41); padding: 40px 18px 30px; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #4aadd4, #89de7b) 1; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active .detail-title, .why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active p { opacity: 1; transform: translateY(0); }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active .detail-icon { margin: 0 0 20px; width: auto; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item .detail-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 0; transition: all 0.5s ease; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item .detail-title { font-size: 20px; font-weight: 500; color: white; margin-bottom: 25px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; text-align: left; }
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item p { color: #fff; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; text-align: left;width:324px;}
.why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active .detail-title, .why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active p { opacity: 1; transform: translateY(0); }


@media screen and (max-width: 1450px) { .ice-bags-for-sale, .why-choose-raybo, .company-overview, .marquee-box { padding-left: 30px; padding-right: 30px; } }
@media screen and (max-width: 768px) { .home-banner { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/home-bg.jpg"); }
  .home-banner .product-showcase { flex-wrap: wrap; gap: 10px; margin-top: 30px;gap: 20px;display: grid;grid-template-columns: repeat(3, 1fr); }
  .home-banner .product-showcase .product-item { width: auto; height: auto;background:none;border:0;overflow:visible;border-radius:0; }
  .ice-bags-for-sale { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/sale-bg.png"); padding: 30px 15px 20px; }
  .ice-bags-for-sale .grid-container::before { top: 0px; left: 0px; width: 300px; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/sale-text.png"); background-size: 100% 100%; }
  .ice-bags-for-sale .products-grid { grid-template-columns: repeat(1, 1fr); gap: 15px; margin-bottom: 20px; }
  .ice-bags-for-sale .products-grid .product-card { padding: 15px; }
  .ice-bags-for-sale .products-grid .product-card h3 { margin-bottom: 10px; }
	.ice-bags-for-sale .products-grid .product-card:hover .cover{transform: scale(1);}
  .company-overview { padding: 30px 15px; }
  .company-overview h2 { text-align: center; margin-bottom: 30px; }
  .company-overview .grid-container { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/company-overview-bg.png"); background-size: contain; padding: 15px; }
  .company-overview .grid-container .overview-content { display: block; }
  .company-overview .grid-container .overview-content .company-info { margin-bottom: 20px; }
  .company-overview .grid-container .overview-content .company-info p { margin-bottom: 40px; }
  .company-overview .grid-container .overview-content .company-info .btn-primary { display: inline-block; padding: 8px 15px; background-image: linear-gradient(to right, #4aadd4, #89de7b); color: white; text-decoration: none; border-radius: 4px; font-weight: 500; }
  .company-overview .grid-container .overview-content .stats-grid { gap: 10px; width: 100%; }
  .company-overview .grid-container .overview-content .stats-grid .stat-card { width: calc(50% - 5px); }
  .company-overview .grid-container .overview-content .stats-grid .stat-card img { object-fit: cover; height: 100%; }
  .company-overview .grid-container .overview-content .stats-grid .stat-card .stat-content .stat-content-num { font-size: 25px; font-weight: 500; }
  .marquee-box { background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/why_bg.jpg"); height: auto; padding-top: 30px; padding-bottom: 30px; }
  .marquee-box h2 { margin-bottom: 30px; text-align: center; }
  .marquee-box .grid-container { display: block; }
  .marquee-box .left { width: 100%; padding-left: 15px; padding-right: 15px; }
  .marquee-box .marquee-content .f { display: flex; margin: 6px 0; }
  .marquee-box .marquee-content .f2 .marquee-item:first-child { margin-left: -75px; }
  .marquee-box .marquee-item { width: 150px; }
  .certificates-section { padding: 30px 15px; }
  .certificates-section .grid-container { text-align: center; }
  .certificates-section .grid-container h2 { margin-bottom: 30px; }
  .service-process { height: auto; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/service-process-bg1.jpg"); padding: 30px 0 0; }
  .service-process h2 { margin-top: 0; }
  .service-process .grid-container { display: block; }
  .service-process .service-steps { display: flex; margin-top: 0;flex-wrap:wrap; }
  .service-process .service-steps .service-step { display: block; background-color: transparent; background: linear-gradient(to top, transparent, #fff 50%, transparent) right/1px 100% no-repeat;width:50%;flex:unset;text-align: center;padding: 15px;border-bottom: 1px solid transparent;border-image: linear-gradient(to right,transparent, #ffffff, transparent) 1; }
	.service-process .service-steps .service-step.More{display:flex;color: #fff;font-size: 20px;}
	.service-process .service-steps .service-step:nth-child(2){background:none;}
  .service-process .service-steps .service-step .step-number { font-size: 48px; position: relative; bottom: 0; left: 0; transform: none; transition: none; }
  .service-process .service-steps .service-step .step-icon { margin-bottom: 10px; position: relative; z-index: 2; }
  .service-process .service-steps .service-step h3 { font-size: 20px; margin-bottom: 20px; transition: none; }
  .service-process .service-steps .service-step .step-content { opacity: 1; visibility: visible; transform: none; transition: none;padding:0; }
  .why-choose-raybo { padding: 30px 0 0; background-image: url("https://rayboicebags.com/wp-content/uploads/2026/02/why_bg.jpg"); }
  .why-choose-raybo .grid-container h2 { margin-bottom: 30px; }
  .why-choose-raybo .grid-container .choose-content { display: block; }
  .why-choose-raybo .grid-container .choose-content .choose-list { display: none; }
  .why-choose-raybo .grid-container .choose-content .choose-details { display: grid;grid-template-columns: 1fr 1fr; gap: 8px;align-items:unset;}
  .why-choose-raybo .grid-container .choose-content .choose-details .detail-item { width: 100%; height: auto; padding: 0; display: block; max-width: 100%; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #4aadd4, #89de7b) 1; padding: 20px 18px 30px; }
  .why-choose-raybo .grid-container .choose-content .choose-details .detail-item:last-child { border: none; }
  .why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active { width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.41); padding: 20px 18px 30px; }
  .why-choose-raybo .grid-container .choose-content .choose-details .detail-item .detail-title { opacity: 1;transform: translateY(0); }
	.why-choose-raybo .grid-container .choose-content .choose-details .detail-item.active .detail-icon{width: 80px;display:none;}
	.why-choose-raybo .grid-container .choose-content .choose-details .detail-item .detail-icon{display:none;}
  .why-choose-raybo .grid-container .choose-content .choose-details .detail-item p { opacity: 1;width:auto;font-size:14px;transform: translateY(0); } }

/*# sourceMappingURL=home.css.map */