@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap');

:root{
  --primaryColor: #beb7b4;
  --primaryMed: #a49c99;
  --primaryDark: #625c59;
  --secondarycolor: #e91544;
  --secondaryDark: #c5153c;
  --secondaryExtraLight: #ffcbd6;
  --lightgrey: #f4f1ee;
}
body{font-family: "Plus Jakarta Sans", sans-serif;}
img{max-width:100%}
section{padding:80px 0}
.innerpage header {border-bottom:1px solid #e8e8e8; box-shadow:0 0 30px rgba(0,0,0,.20);}

.preheader {font-size:13px;}
.preheader h6 {font-size:15px; margin:0;}

header {background-color:var(--secondarycolor); padding:15px 0; box-shadow: 0 0 15px rgb(0 0 0 / 30%); z-index: 1; position: relative;}
header .container {padding-top:15px; padding-bottom:15px;}
header img {height:50px;}

main {position:relative;}
.navbar-expand-lg .navbar-nav .nav-link {font-size:14px; font-weight:600; border-radius:20px; padding-left:15px; padding-right:15px; position: relative; color:var(--lightgrey);}
.navbar-expand-lg .navbar-nav .nav-link:before {content: ""; width: 0%; height: 4px; position: absolute; left: 0; bottom: 0; transition: 0.5s transform ease; transform: scale3d(0,1,1); transform-origin: 50% 50%; background:var(--secondaryDark); border-radius: 30px;}
.navbar-expand-lg .navbar-nav .nav-link:hover::before {transform:scale3d(1,1,1); width:100%;}

.text-primary {color:var(--primaryDark) !important;}
.text-primarylight {color:var(--primaryMed) !important;}
.text-secondary {color:var(--secondaryDark) !important;}

.big_product {background-color:var(--primaryColor); margin:0; padding:100px 0;}
.big_product .container {background-image:url(../images/Brain-Support-Capsules.png); background-repeat:no-repeat; background-position:center; background-size: auto 100%; padding-top:140px; padding-bottom:140px;}
.big_product .tickList {list-style:none; font-size:22px;}
.big_product .tickList li {padding:5px 0;}
.big_product .tickList li:before {content:"✓"; display:inline-block; color:green; font-weight: bold; margin-right:10px;}

.banner {background:no-repeat center top/cover url(../images/banner1.jpg)}
.banner .col-md-6 {margin:90px 0; background-color: rgba(0, 0, 0, 0.5); padding: 60px;}

.keyoffering aside {padding: 30px 20px; text-align: center; border: 1px solid var(--lightgrey); height: 100%;}
.keyoffering img {height:75px; width:75px; object-fit:contain; margin-bottom:20px;}
.keyoffering p {text-transform:uppercase; letter-spacing:0.6px; margin:0; font-size:14px; font-weight:600;}

.btn {border-radius:8px; padding:10px;}
.btn > .badge {font-size: 10px; right: 0; transform: translateY(-50%); border-radius: 50px;}
.btn-primary{background-color:var(--primaryDark); border-color:var(--primaryDark); padding:15px 50px;}
.btn-primary:hover{background-color:var(--primaryMed);border-color:var(--primaryMed);color:#fff;}
.btnGroup .btn {flex:0 0 calc(50% - 4px);}
.btn-sm {padding:5px 15px;}

.customsearch {position:relative;}
.customsearch article {background-color: white; border-radius: 5px; position: absolute; z-index:1; box-shadow: 0 0 15px rgb(0 0 0 / 20%); width:340px; right:0; top:calc(100% + 2px); max-height:380px;
    overflow-y:scroll; display:none}
.customsearch ul {list-style:none; margin:0; padding:0}
.customsearch a {display:flex; color:#000; font-size:15px; text-decoration:none; padding:8px 10px}
.customsearch a:hover {background-color:#efefef}
.customsearch strong {color:#646464;}
.customsearch .imgBox {width:35px; flex:0 0 35px; margin-right:15px}
.customsearch img {height:35px; width:35px; object-fit: contain;}
.customsearch input {box-shadow:0 0 6px rgb(0 0 0 / 60%); padding-left:26px}
.customsearch i {position:absolute; left:15px; top:7px;}

.btn-secondary{background-color:var(--secondarycolor); border-color:var(--secondarycolor); padding:15px 50px;}
.btn-secondary:hover{background-color:var(--secondaryDark); border-color:var(--secondaryDark);color:#fff;}

.nicelist {list-style:none; padding:0; margin:35px 0;}
.nicelist li {display:flex; gap:10px; margin-bottom:20px;}
.nicelist li span {padding-top:10px;}
.nicelist li:before {flex:0 0 42px; height:42px; background-image:url(../images/icon-tick.svg); content:"";}

.bg-nutrition {background-image:url(../images/nutrition_bg.jpg); background-attachment: fixed; background-size:cover; position: relative;}
.bg-nutrition:before {position:absolute; content:""; height:100%; width:100%; z-index:1; background-color:rgb(0 0 0 / 60%); left:0; top:0;}
.bg-nutrition .container {position: relative;z-index:2; color:white;}
 
.cartbtn {padding: 0 10px; font-size: 20px; display:flex;}

.bg-secondary {background-color:var(--secondarycolor) !important;}
.bg-primary {background-color:var(--primaryColor) !important;}
.bg-primarydark {background-color:var(--primaryDark) !important;}
.bg-light {background-color:#F5F9FC !important;}

.prodData .card-body{padding:0px!important;padding-top:20px!important;}
.prodData .card-body .row{margin-left:unset;margin-right:unset;}
.prodData .imgbox {flex: 0 0 220px; padding: 10px 0; background: var(--primaryColor); border-radius:4px;}
.prodData .imgbox:hover {background:var(--secondaryExtraLight);}
.prodData .imgbox img {height:220px; width:220px; object-fit:contain;}
.prodData aside > a {text-decoration: none; color: #5c5c5c;}
.prodData aside:hover .imgbox {background-color:var(--lightgrey); box-shadow:0 0 15px rgba(0, 0, 0, 0.22);}

.prodDetail img {max-height:550px;}

.prefooter {background-color:var(--secondarycolor); color:white}
.prefooter a {color:var(--secondaryExtraLight);}

.productlist .input-group>.form-control{flex:0 0 60px}
.cart-image{height:45px;width:45px;object-fit:contain}
.table-cart td{vertical-align:middle}
.fa-circle-xmark{cursor:pointer}
#fields_note{width:100%;display:block}
.fa-circle-xmark{font-size:28px}

.form-control {border-radius:3px; box-shadow:1px 1px rgba(0,0,0,0.15); border-color:#e9e9e9; padding:0.55rem 0.75rem; font-size:14px;}

.priceShip{padding-left:17px}
.total_agree{margin-right:5px}

.err_msg{background:#ffb6c1;border:1px solid red;padding:15px;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.3);color:#8b0000;font-size:14px}
.err_msg em{font-style:normal}

.other .modalbtn {display:none;}
/* New Template */