/* =========================================================
HOTEL UNIFORMS PAGE CSS
========================================================= */

/* HERO SECTION */

.product-banner{
padding:120px 0;
background:var(--gradient-primary);
text-align:center;
color:var(--white);
}

.section-tag{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(255,255,255,.15);
font-weight:600;
margin-bottom:20px;
}

.product-banner h1{
font-size:52px;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
}

.product-banner p{
max-width:850px;
margin:auto;
line-height:1.8;
opacity:.9;
}

/* MAIN CONTENT */

.product-content{
padding:100px 0;
background:var(--light);
}

/* CONTENT BOX */

.content-box{
background:var(--white);
padding:45px;
border-radius:20px;
box-shadow:var(--shadow);
margin-bottom:40px;
border:1px solid var(--border);
transition:.3s;
}

.content-box:hover{
transform:translateY(-5px);
}

.content-box h2{
color:var(--primary-dark);
font-size:30px;
font-weight:700;
margin-bottom:20px;
}

.content-box p{
color:#666;
line-height:1.9;
}

/* SECTION TITLE */

.section-heading{
text-align:center;
margin-bottom:40px;
}

.section-heading h2{
color:var(--primary-dark);
font-size:34px;
font-weight:700;
margin-bottom:10px;
}

.section-heading p{
color:#666;
}

/* PRODUCT GALLERY */

.product-gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-bottom:70px;
}

.gallery-item{
position:relative;
overflow:hidden;
border-radius:18px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

.gallery-item:hover{
transform:translateY(-8px);
}

.gallery-item img{
width:100%;
height:300px;
object-fit:cover;
display:block;
transition:.5s;
}

.gallery-item:hover img{
transform:scale(1.08);
}

.gallery-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:20px;
background:linear-gradient(
to top,
rgba(0,0,0,.85),
rgba(0,0,0,0)
);
}

.gallery-overlay h5{
color:#fff;
margin:0;
font-size:18px;
font-weight:600;
}

/* INFO CARD */

.info-card{
background:var(--white);
padding:35px 25px;
border-radius:18px;
text-align:center;
box-shadow:var(--shadow);
height:100%;
border:1px solid var(--border);
transition:.3s;
}

.info-card:hover{
background:var(--primary);
transform:translateY(-8px);
}

.info-card i{
font-size:42px;
color:var(--primary);
margin-bottom:15px;
display:block;
transition:.3s;
}

.info-card h5{
color:var(--primary-dark);
margin:0;
font-weight:600;
transition:.3s;
}

.info-card:hover i,
.info-card:hover h5{
color:var(--white);
}

/* PRODUCT LIST */

.product-list{
list-style:none;
padding:0;
margin:0;
}

.product-list li{
position:relative;
padding:14px 0 14px 30px;
border-bottom:1px solid var(--border);
color:#555;
}

.product-list li:last-child{
border-bottom:none;
}

.product-list li::before{
content:"✓";
position:absolute;
left:0;
color:var(--primary);
font-weight:700;
}

/* CTA */

.product-cta{
margin-top:80px;
padding:70px 40px;
border-radius:25px;
background:var(--gradient-primary);
text-align:center;
color:var(--white);
box-shadow:var(--shadow);
}

.product-cta h2{
font-size:34px;
font-weight:700;
margin-bottom:20px;
}

.product-cta p{
max-width:700px;
margin:0 auto 30px;
line-height:1.8;
}

.cta-btn{
display:inline-block;
padding:14px 35px;
background:#fff;
color:var(--primary);
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.cta-btn:hover{
background:var(--secondary);
color:#fff;
}

/* TABLET */

@media(max-width:992px){

.product-banner h1{
    font-size:42px;
}

.product-gallery{
    grid-template-columns:repeat(2,1fr);
}

}

/* MOBILE */

@media(max-width:768px){

.product-banner{
    padding:80px 0;
}

.product-banner h1{
    font-size:32px;
}

.product-content{
    padding:70px 0;
}

.content-box{
    padding:30px;
}

.product-gallery{
    grid-template-columns:1fr;
}

.gallery-item img{
    height:250px;
}

.section-heading h2{
    font-size:28px;
}

.product-cta{
    padding:50px 25px;
}

.product-cta h2{
    font-size:28px;
}
}