/* =========================
   GLOBAL
========================= */
/* =========================
   HOME SLIDER
========================= */

.carousel,
.carousel-inner,
.carousel-item{
    width:100%;
    height:550px;
}

.slider-img{
    width:100%;
    height:550px;

    object-fit:cover;      /* Slider full cover */
    object-position:center center;

    display:block;
}

.carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Arrow */

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:45px;
    height:45px;
    background-size:60%;
    background-color:rgba(0,0,0,.45);
    border-radius:50%;
}

/* Mobile */

@media(max-width:992px){

.carousel,
.carousel-inner,
.carousel-item{
    height:380px;
}

.slider-img{
    height:380px;
}

}

@media(max-width:768px){

.carousel,
.carousel-inner,
.carousel-item{
    height:260px;
}

.slider-img{
    height:260px;
}

}

@media(max-width:576px){

.carousel,
.carousel-inner,
.carousel-item{
    height:200px;
}

.slider-img{
    height:200px;
}

} 

body{
    background:#f8f9fa;
    font-family:Arial, Helvetica, sans-serif;
}

/* =========================
   PRODUCT CARD
========================= */

.product-card,
.product{
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    transition:.35s;
}

.product-card:hover,
.product:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* Image Box */

.product-img{
    width:100%;
    height:300px;

    object-fit:contain;      /* FULL IMAGE */
    object-position:center;

    background:#fff;
    padding:10px;

    transition:.4s;
}

.product:hover .product-img,
.product-card:hover .product-img{
    transform:scale(1.05);
}

/* =========================
   CATEGORY
========================= */

.category-card,
.card-box{
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    transition:.35s;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.category-card:hover,
.card-box:hover{
    transform:translateY(-6px);
}

.cat-img{
    width:100%;
    height:220px;

    object-fit:contain;      /* FULL IMAGE */
    object-position:center;

    background:#fff;
    padding:10px;
}

/* =========================
   SLIDER
========================= */

.slider-img{

    width:100%;
    height:550px;

    object-fit:contain;      /* FULL SLIDER IMAGE */

    object-position:center;

    background:#f5f5f5;

}

/* =========================
   REVIEW
========================= */

.review-card{

    width:650px;
    max-width:100%;

    border:none;

    border-radius:18px;

    background:#fff;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.review-card:hover{

    transform:translateY(-6px);

}

/* =========================
   OFFER
========================= */

.offer{

    background:linear-gradient(90deg,#000,#d4af37,#000);

    color:#fff;

    font-size:18px;

    padding:12px;

    text-align:center;

    font-weight:bold;

}

/* =========================
   OFFER BANNER
========================= */

.offer-banner{

    background:linear-gradient(135deg,#111,#333,#111);

    color:#fff;

    border-radius:20px;

    padding:70px 40px;

    text-align:center;

}

.offer-banner h2{

    font-size:46px;

    font-weight:700;

}

.offer-banner span{

    color:#ffc107;

}

/* =========================
   SECTION TITLE
========================= */

h2{

    font-size:34px;

    font-weight:700;

    position:relative;

    margin-bottom:35px;

}

h2::after{

    content:"";

    width:80px;

    height:4px;

    background:#d4af37;

    position:absolute;

    left:0;

    bottom:-10px;

}

/* =========================
   MOBILE
========================= */

@media(max-width:992px){

.product-img{
    height:240px;
}

.cat-img{
    height:180px;
}

.slider-img{
    height:320px;
}

.review-card{
    width:100%;
}

}

@media(max-width:768px){

.product-img{
    height:210px;
}

.cat-img{
    height:160px;
}

.slider-img{
    height:240px;
}

.offer-banner{
    padding:40px 20px;
}

.offer-banner h2{
    font-size:30px;
}

}

@media(max-width:576px){

.product-img{
    height:170px;
}

.cat-img{
    height:140px;
}

.slider-img{
    height:180px;
}

.offer{
    font-size:13px;
}

h2{
    font-size:24px;
}

}