body{font-family: "Poppins", sans-serif; font-size:14px; }

.navbar-brand{width: 150px;}
h1{color: #a8cf40; font-weight: 800;}
p{line-height: 24px; color: #3a3b3a;}

.relative{position: relative;}

.card{border:none;}
h4.sectionsubhead{text-align: center; font-size: 24px; color: #272727; font-weight: 300; line-height: 40px; line-height: 32px;}
h6.sectionhead{text-transform: uppercase; color: #4b4949; text-align: center; font-size: 15px; letter-spacing: 1px; margin-bottom: 1.2rem;}
.btn-lg{font-size: 14px; padding: 1rem;}
.btn-primary{background: #000!important; border-color:#000!important; transition: all 0.5s ease;}
.btn-primary:hover{color: #000!important; background: #fff!important; border-color: #000!important; font-weight: 600;}
.btn-outline-primary{background: #fff; border-color:#000; transition: all 0.5s ease; color: #000;}
.btn-outline-primary:hover{color: #fff; background: #000; border-color: #000; }

.banner{background: linear-gradient(0deg,rgba(231, 231, 231, 1) 0%, rgba(255, 255, 255, 1) 53%);}
.banner h1{font-family: "Playfair Display", serif; color: #272727;}
.banner .btn{padding: 0.9rem 2rem; font-size: 12px;}
.banner h4{font-weight: 300;}

.category {padding-top: 6rem; padding-bottom: 5rem;}
.category .card{border: 0; border-radius: 1px!important; --bs-card-border-radius:0px; position: relative;}
.category .card img{border-radius: 0px!important;}
.category .card .cardtitle{position: absolute; bottom: 1rem; left: 1rem; font-size: 26px; font-weight: 600; color: #fff; transition: all 0.5s ease;}
.category .card:hover .cardtitle{bottom: 1.7rem; color: #f3f3f3;}
.aboutsection{padding-top: 6rem; padding-bottom: 8rem;}
/*shortcuts*/
.shortcuts .card{border-radius: 20px; background-size: cover;}
.shortcuts .card .cardtitle{position: absolute; bottom: 2rem; left: 2rem; font-size: 36px; font-weight: 700; color: #ffffff; transition: all 0.5s ease;}
.shortcuts .card:hover .cardtitle{bottom: 1.7rem; color: #ffffff;}
.mostpopular{background: url(../images/mostpopular.png); background-size: cover;}
.bestvalue{background: url(../images/bestvalue.png); background-size: cover;}
.newproducts{background: url(../images/newproducts.png);}
.newproducts.card{position: relative; overflow: hidden;  height: 100%; width: 100%; min-height: 500px;}

.howtoorder{padding-top: 5rem; padding-bottom: 5rem;}
.howtoorder h6{text-transform: uppercase; color: #4b4949; text-align: left; font-size: 15px; letter-spacing: 1px; margin-bottom: 0.8rem;}
.howtoorder h4{text-align: left; font-size: 24px; color: #272727; font-weight: 300;}

footer .border-top{border-top:1px solid #a3a3a3!important; }
.footer h6{font-weight: 500!important; color: #424242;}
.sm a{font-size: 20px; margin: 0 5px; padding: 5px;}
.sm a.fb{color: #325bb0;}
.sm a.insta{color: #ff6d00;}
.footerlinks span{color: #a19d9d; padding: 0 10px;}
.footerlinks a{color: #4b4949; text-decoration: none; }
.footerlinks a:hover {color: #000;}
.footerlinks small{color: #a19d9d;}

/* Floating button */
.menu-btn { position: fixed; top: 30px; right: 30px; z-index: 900; color: #333; border: none; width: 50px; height: 50px; font-size: 28px;
  cursor: pointer; display: none; align-items: center; justify-content: center;}

.sidebar { position: fixed; top: 0; right: -290px; width: 250px; height: 100%; background-color: #f3f3f3; color: #444444; padding: 20px;
  box-shadow: -2px 0 10px rgba(0,0,0,0.5); transition: right 0.5s ease; z-index: 1000;}
.sidebar.active {  right: 0;}
.sidebar ul{margin: 20px 0 0; padding: 0;}
.sidebar ul li{padding: 0.5rem; list-style: none;}
.sidebar ul li a{color: #444444; font-size: 20px; font-weight:300; text-decoration:none; transition: all 0.3s ease; }
.sidebar ul li a:hover{letter-spacing: 1px; color: #000;}
.close-btn { background: none; color: #444; border: none; font-size: 24px; position: absolute; top: 10px; right: 30px; cursor: pointer;}
/* Sidebar menu */
/*modal*/
.modal.right-side .modal-dialog { position: fixed; right: 0; top: 0; margin: 0; height: 100vh; max-width: 450px; width: 100%;
      transform: translateX(100%); transition: transform 0.3s ease-out; }
.modal.right-side.show .modal-dialog { transform: translateX(0); }
.modal.right-side .modal-content { height: 100vh; border-radius: 0; border-left: 1px solid #dee2e6; padding: 0 1.5rem;}
.modal-backdrop.show { opacity: 0.5;}
/*modal*/

@media only screen and (min-width: 1400px) {

}

@media only screen and (max-width: 768px) {
.newproducts.card, .mostpopular.card, .bestvalue.card{min-height: 400px;}
.newproductmargin{margin-bottom: 1.5rem}
.category .card{margin-bottom: 1rem;}
}

@media only screen and (max-width: 600px) {
.menu-btn{right:0;}

}