/* ==========================================
   Khati Shad by Takia
   Product Details CSS
========================================== */
/* ==========================
   Global
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#f5f5f5;

    font-family:

    "Noto Sans Bengali",
    Arial,
    sans-serif;

    color:#333;

}



/* ==========================
   Navbar
========================== */


.navbar{

    padding:15px 0;

}


.navbar-brand{

    font-size:25px;

    letter-spacing:.5px;

}




/* ==========================
   Main Image
========================== */


#mainImage{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:12px;

    background:#fff;

}




/* ==========================
   Thumbnail
========================== */


#thumbnailContainer{

    margin-top:15px;

}



.thumb{


    width:85px;


    height:85px;


    object-fit:cover;


    border-radius:8px;


    border:2px solid #ddd;


    cursor:pointer;


    transition:.3s;


}



.thumb:hover{

    border-color:#198754;

    transform:scale(1.05);

}



.thumb.active{

    border-color:#198754;

}



/* ==========================
 Product Information
========================== */


#productCategory{


    font-size:14px;


}



#productName{


    font-size:34px;


    line-height:1.4;


}



#productDescription{


    font-size:16px;


    line-height:1.8;


}



/* ==========================
 Rating
========================== */


.fa-star,
.fa-star-half-stroke{

    font-size:18px;

}



/* ==========================
 Price
========================== */


#mainPrice{


    font-size:42px;


    color:#f57224 !important;


}



/* ==========================
 Weight Button
========================== */


#weightContainer{


    display:flex;


    flex-wrap:wrap;


}



.weight-btn{


    padding:10px 22px;


    border:2px solid #198754;


    background:white;


    color:#198754;


    border-radius:8px;


    cursor:pointer;


    font-weight:bold;


    transition:.3s;


}



.weight-btn:hover{


    background:#198754;


    color:white;


}



.weight-btn.active{


    background:#198754;


    color:white;


}



/* ==========================
 Feature Box
========================== */


.border{


    border-color:#ddd!important;


}



.border:hover{


    box-shadow:0 5px 15px rgba(0,0,0,.08);


}



/* ==========================
 Card
========================== */


.card{


    border:none;


    border-radius:12px;


    background:white;


}



.card-body{


    padding:30px;


}



.card h4{


    font-weight:700;


    color:#198754;


}




/* ==========================
 Table
========================== */


.table{


    margin-bottom:0;


}



.table th{


    background:#f8f9fa;


    font-weight:600;


}



.table td{


    color:#555;


    line-height:1.8;


}





/* ==========================
 Benefits
========================== */


#benefits li{


    padding:12px;


    border-bottom:1px solid #eee;


    font-size:16px;


}



#benefits li::before{


    content:"✓";


    color:#198754;


    font-weight:bold;


    margin-right:10px;


}





/* ==========================
 Footer
========================== */


footer{


    background:#212529;


}



footer h5{


    color:#198754;


    font-size:24px;


}





/* ==========================
 Mobile Responsive
========================== */


@media(max-width:992px){


#mainImage{


    height:400px;


}



#productName{


    font-size:28px;


}



#mainPrice{


    font-size:35px;


}


}




@media(max-width:768px){


#mainImage{


    height:320px;


}



.thumb{


    width:70px;


    height:70px;


}



#productName{


    font-size:24px;


}



.card-body{


    padding:20px;


}



}




@media(max-width:576px){



#weightContainer{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:10px;


}



.weight-btn{


    width:100%;


}



#mainPrice{


    font-size:30px;


}



}