.hero{

margin:20px auto 40px;

max-width:1320px;

border-radius:16px;

overflow:hidden;

}

.heroSwiper{

width:100%;

height:680px;

border-radius:16px;

}

.swiper-slide{

position:relative;

overflow:hidden;

}

.hero-image{

width:100%;

height:680px;

object-fit:cover;

object-position:center;

display:block;

}

.hero-overlay{

background:linear-gradient(

90deg,

rgba(0,0,0,.35),

rgba(0,0,0,.15)

);

}

.hero-content{

position:absolute;

top:50%;

right:8%;

transform:translateY(-50%);

max-width:520px;

z-index:20;

color:#fff;

}

.hero-content h1{

font-size:36px;

font-weight:800;

margin-bottom:18px;

}

.hero-content p{

font-size:17px;

line-height:1.9;

max-width:550px;

margin-bottom:30px;

color:#fff;

}

.hero-overlay{

background:linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.20)
);

}

.swiper-button-next,

.swiper-button-prev{

width:48px;

height:48px;

border-radius:50%;

background:rgba(255,255,255,.18);

color:#fff;

}

.swiper-button-next:after,

.swiper-button-prev:after{

font-size:18px;

font-weight:bold;

}

.swiper-pagination-bullet{

width:10px;

height:10px;

opacity:.5;

background:#fff;

}

.swiper-pagination-bullet-active{

width:26px;

border-radius:20px;

opacity:1;

background:#2563eb;

}


.category-image{

width:100%;

height:180px;

object-fit:contain;

display:block;

margin:auto;

background:#fff;

padding:15px;

}