@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

* {margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none;}
body {font-size: 15px; line-height: normal; color: #333; font-family: "Poppins", sans-serif; background: #fff;}
a {outline: none; text-decoration: none; color: #071526; -webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s;}
a:hover {text-decoration: none;}
input, textarea, select {font-size: 14px; color: #071526; vertical-align: middle; font-family: "Poppins", sans-serif; outline: none; resize: none;}
input[type="button"], input[type="submit"], button {-webkit-transition: ease-in-out .3s; -moz-transition: ease-in-out .3s; -ms-transition: ease-in-out .3s; -o-transition: ease-in-out .3s; transition: ease-in-out .3s; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; cursor: pointer;  font-family: "Poppins", sans-serif;}
select {appearance: none; -ms-appearance: none; -webkit-appearance: none;}
select::-ms-expand {display: none;}
.transition {-webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; -ms-transition: ease-in-out .5s; -o-transition: ease-in-out .5s; transition: ease-in-out .5s;}
img {border: none; vertical-align: top; max-width: 100%;}
.mainCon {padding: 125px 0 0 0;}
.flexBox {display: flex; flex-wrap: wrap;}
.flexBox.nowrap {flex-wrap: nowrap;}
.itemCenter {align-items: center;}
.justifyContentBetween {justify-content: space-between;}
.tac {text-align: center !important;}
.container {width: 100%; margin: auto; max-width: 1130px; padding: 0 15px;}

.header {background: #17302a; position: relative; position: fixed; width: 100%; left: 0; top: 0; z-index: 1001;}
.header .container {height: 125px; transition: ease-in-out .4s;}

.logo {position: absolute; left: 50%; top: 0; margin-left: -107px; z-index: 1;}
.logo img {transition: ease-in-out .4s; height: 125px;}
a.showMobMenu {display: none;}
.menu {justify-content: space-between; width: 100%; position: relative; z-index: 2;}
.menu li {font-size: 20px; font-weight: 400;}
.menu li:nth-child(2) {padding-right: 110px;}
.menu li:nth-child(3) {padding-left: 110px;}
.menu li a {color: #fff; display: block; padding: 0 5px; position: relative;}
.menu li a:after {content: ''; width: 100%; height: 4px; position: absolute; left: 0; bottom: -5px;}
.menu li a:hover:after, .menu li a.active:after {background: #cab44b;}

.bannerSlider .item {background-size: cover !important;}
.bannerSlider .item .container {height: 700px; display: flex; align-items: center; justify-content: flex-end; max-width: 1400px;}
.bannerInner {max-width: 670px; width: 55%; color: #fff;}
.bannerHd {font-size: 64px; font-weight: 700;}
.bannerText {font-size: 20px;}

.midCon {background-size: cover !important;}
.pt60 {padding-top: 60px;}
.pb60 {padding-bottom: 60px;}
.mainHd {margin-bottom: 10px; position: relative;}
.mainHd:after {content: ''; background: #044A07; position: absolute; left: 0; top: 50%; margin-top: -1px; height: 2px; width: 100%;}
.mainHd span {display: inline-block; font-size: 26px; font-weight: 600; color: #000; background: #fff; padding: 5px 35px; position: relative; z-index: 10;}

.topText {font-size: 15px; line-height: 28px; max-width: 910px; margin: auto;}
.mb30 {margin-bottom: 30px;}
.brandsSlider .slick-list {margin: -15px; padding: 10px 0;}
.brandsSlider .item {padding: 15px;}
.brandsSlider .slick-dots {display: flex; justify-content: center; width: 100%; padding-top: 25px;}
.brandsSlider .slick-dots li {padding: 3px;}
.brandsSlider .slick-dots li button {overflow: hidden; width: 12px; height: 12px; border: 1px solid #707070; border-radius: 100%; text-indent: -100px;}
.brandsSlider .slick-dots li.slick-active button {background: #707070;}

.wwdList {margin: -10px; justify-content: space-between;}
.wwdList li {width: 33.33%; max-width: 320px; padding: 10px;}
.wwdList li .inner {position: relative; overflow: hidden;}
.wwdList li .inner img {width: 100%; transition: ease-in-out .4s;}
.wwdList li .inner:hover img {transform: scale(1.1);}
.wwdList li .over {position: absolute; bottom: 0; left: 0; text-align: center; padding: 40px; width: 100%;}
.wwdList li .over a {display: inline-block; background: rgba(48,71,13,.8); border: 1px solid #fff; font-size: 18px; color: #fff; padding: 10px 30px;}
.wwdList li .over a:hover {background: rgba(0,0,0,.8);}

.customerList .slick-list {margin: -15px;}
.customerList li {padding: 15px;}
.customerList li .inner {background: #fff;}
.customerList li .inner .img {width:145px;}
.customerList li .inner .det {padding: 15px; width: calc(100% - 145px); font-size: 18px; line-height: 26px; color: #777;}
.customerList li .inner .det .hd {display: block; padding: 0 0 5px 0; font-size: 20px; font-weight: 700; color: #000;}
.customerList li .inner .det .name {padding-top: 15px; font-weight: 500; display: block; font-size: 16px; color: #000;}

.customerList .slick-arrow {position: absolute; border: 1px solid #333; border-radius: 100%; top: 50%; margin-top: -60px; overflow: hidden; width: 54px; height: 54px; z-index: 10; font-size: 0px; background: none;}
.customerList .slick-arrow:before {font-family: 'Material Icons'; color: #333; width: 36px; height: 36px; font-size:36px; position: absolute; left: 14px; top: 7px;}
.customerList .slick-arrow.slick-prev {left: -80px;}
.customerList .slick-arrow.slick-prev:before {content: 'arrow_back_ios';}
.customerList .slick-arrow.slick-next {right: -80px;}
.customerList .slick-arrow.slick-next:before {content: 'arrow_forward_ios';}
.customerList .slick-dots {display: flex; justify-content: center; width: 100%; padding-top: 25px;}
.customerList .slick-dots li {padding: 3px;}
.customerList .slick-dots li button {overflow: hidden; width: 12px; height: 12px; border: 1px solid #707070; border-radius: 100%; text-indent: -100px;}
.customerList .slick-dots li.slick-active button {background: #707070;}

.footer {background: #17302a;}
.footerLogo {padding: 15px 0;}
.footerLogo img {max-width: 155px;}
.footerCen {padding: 25px 0; display: flex; flex-direction: column; justify-content: space-between;}
.footerMenu li {font-size: 15px; font-weight: 500; padding: 0 20px;}
.footerMenu li a {color: #fff;}
.footerMenu li a:hover, .footerMenu li a.active {color: #CAB44B;}
.followUs {display: flex; justify-content: center;}
.followUs span {margin-right: 10px; color: #fff; font-size: 15px; font-weight: 500; text-transform: uppercase;}
.followUs a {margin-left: 5px;}
.footerRight {padding: 25px 0; text-align: right; display: flex; flex-direction: column; justify-content: center; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.5);}

.copy {padding-bottom: 10px;}
.innerBanner {background-size: cover !important; color: #fff; font-size:70px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.innerBanner .container {height: 300px; text-align: center; display: flex; align-items: center; justify-content: center;}
.innerHd {font-size: 26px; line-height: 38px; font-weight: 600; padding-bottom: 15px;}

.coreValues {margin: -15px; padding-top: 10px;}
.coreValues li {width: 25%; padding: 15px; font-size: 14px; line-height: 24px;}
.coreValues li span {display: block; font-size: 20px; line-height: 26px; font-weight: 600; padding-bottom: 15px;}
.whtClr {color: #fff;}

.missionBox .left {width: calc(100% - 400px); padding-right: 100px;}
.missionBox .right {width: 400px;}
.missionBox .right img {width: 100%;}
.visionBox .left {width: 400px; position: relative;}
.visionBox .left img {width: 100%;}
.visionBox .right {width: calc(100% - 400px); padding-left: 100px;}

.contactDet {width: 50%; padding-right: 80px;}
.contactSubText {font-size: 18px;}
.contactInfo li {font-size: 18px;}
.contactInfo li span {display: block; font-size: 20px;}
.contactInfo li strong {font-weight: 600;}

.contactForm {width: 50%;}
.contactSubHd {font-size: 24px; font-weight: 700; text-transform: uppercase; padding-bottom: 15px;}
.form {margin: -10px;}
.form li {width: 50%; padding: 10px;}
.form li.full {width: 100%;}
.formInput {width: 100%; border: 1px solid #C5C5C5; height: 46px; padding: 0 15px; font-size: 16px;}
textarea.formInput {height: auto; padding: 15px;}
.formBtn {background: #CAB44B; width: 100%; height: 46px; font-size: 19px; text-transform: uppercase; font-weight: 700; color: #fff;}
.formBtn:hover {background: #000; color: #fff;}

.callUs li {text-align: center; color: #fff; font-size: 20px; padding: 2px 0;}
.callUs li span {color: #C2A209; margin-left: 5px;}
.callUs li a {color: #C2A209;}
.callUs li .hd {display: inline-block; color: #fff; border-bottom: 1px solid #fff; font-size: 26px; font-weight: 500; margin-bottom: 20px;}

.map img {width: 100%;}

.shopTop {background: #cab44b;}
.shopTop .container {max-width: 1260px;}
.searchCon {height: 66px;}
.searchBox {background: #fff; max-width: 900px; width: calc(100% - 130px); padding-right: 84px; height: 40px; border-radius: 40px; overflow: hidden; position: relative;}
.searchBox .input {width: 100%; height: 40px; background: none; border: none; padding: 0 20px;}
.searchBox .btn {background: #17302A; width: 84px; height: 40px; position: absolute; right: 0; top: 0; border: none; border-radius: 30px; color: #fff; display: flex; align-items: center; justify-content: center;}
.searchBox .btn:hover {background: #000;}

.cartLink li {margin-left: 10px;}
.cartLink li a {width: 44px; height: 44px; border-radius: 100%; position: relative; border: 1px solid #fff; display: flex; color: #fff; align-items: center; justify-content: center;}
.cartLink li a .count {position: absolute; right: -4px; top: -4px; background: #1B1B1B; width: 20px; height: 20px; border-radius: 100%; font-size: 12px; display: flex; align-items: center; justify-content: center;}
.cartLink li a:hover {background: #000;}

.shopCon .container {max-width: 1260px;}
.shopLeft {width: 260px; padding: 30px 0;}
a.showFilter {display: none;}
.applyBtn {display: none;}
.mb20 {margin-bottom: 20px;}
.shopHd {border-bottom: 2px solid #eeeeee; font-size: 20px; font-weight: 700; position: relative; padding-bottom: 10px; margin-bottom: 20px;}
.shopHd span {display: inline-block;}
.shopHd:before {content: ''; background: #CAB44B; height: 2px; width: 70px; position: absolute; left: 0; bottom: -2px;}
.categoryLinks li {padding-bottom: 10px; font-size: 16px; font-weight: 600;}
.categoryLinks li a {color: #071526;}
.categoryLinks li a:hover {color: #CAB44B;}

.checkWrapper {position:relative; width:20px; height:20px; display:inline-block; vertical-align:middle; margin:0 5px 4px 0;}
.checkInpt {opacity:0; height:20px; width:20px; position:absolute; top:0; left:0; z-index:2; margin:0;}
.checkInpt + .bg {height:20px; width:20px; display:inline-block; position:absolute; top:0; left:0; z-index:1; border:2px solid #ccc; background:#fff; border-radius: 4px;}
.checkInpt:checked + .bg {background:#044A07 url(../images/check_icon.png) no-repeat center; border: 2px solid #044A07;}

.shopRight {width: calc(100% - 260px); padding:30px 0 30px 30px;}
.shopFilter {display: flex; justify-content: flex-end;}
.filterSelect {border: 1px solid #cccccc; background: #fff url(../images/select-arrow.gif) no-repeat right 10px center; border-radius: 3px; height: 50px; padding: 0 30px 0 10px; font-size: 16px; font-weight: 500; margin-left: 10px;}

.productList {margin: -15px;}
.productList li {width: 33.33%; padding: 15px;}
.productList li .imgBox {position: relative; overflow: hidden;}
.productList li .imgBox img {width: 100%; transition: ease-in-out .3s;}
.productList li .imgBox:hover img {transform: scale(1.1);}
.productList li .imgBox .status {position: absolute; left: 10px; top: 10px; background: #CAB44B; font-size: 14px; color: #fff; padding: 6px 20px;}
.productList li .imgBox .discount {position: absolute; right: 10px; top: 10px; background: #17302a; font-size: 14px; color: #fff; padding: 6px 20px;}
.productList li .imgBox .fav  {position: absolute; right: 10px; bottom: 10px; width: 42px; height: 42px; border-radius: 100%; display: flex; align-items: center; justify-content: center; color: #fff; transition: ease-in-out .3s;}
.productList li .imgBox a.addToCart {display: flex; align-items: center; justify-content: center; position: absolute; left: 0; bottom: -44px; height: 44px; background: #CAB44B; font-size: 16px; font-weight: 600; color: #fff; text-transform: uppercase; width: 100%; text-align: center; transition: ease-in-out .3s;}
.productList li .imgBox a.addToCart:hover {background: #071526;}
.productList li .imgBox:hover a.addToCart {bottom: 0;}
.productList li .imgBox:hover .fav {background: #fff; color: #1B1B1B; bottom: 64px;}
.productList li .name {padding-top: 10px; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.productList li .price {padding-top: 5px; font-size: 18px; font-weight: 600;}
.productList li .price span {color: #969696;}

.viewMore {padding: 30px 0 0 0; text-align: center;}
.viewMore a {display: inline-flex; align-items: center; justify-content: center; background: #17302AE6; height: 60px; font-size: 18px; font-weight: 600; color: #fff; padding: 0 20px; min-width: 280px;}
.viewMore a:hover {background: #17302a;}

.bradcrumb {color: #1A1A1A; font-size: 15px;}
.bradcrumb a {color: #666666; margin: 0 5px;}
.detailImage {width: 55%;}
.detailBox {padding: 30px 0;}
.productThumb {width: 100px;}
.productThumb .item {padding: 5px 0;}
.productThumb .item.slick-current img {border: 1px solid #044A07;}

.productSlider {width: calc(100% - 110px); margin-left: 10px;}
.productSlider .item img {width: 100%;}
.productSlider .slick-arrow {position: absolute; border: 1px solid #fff; border-radius: 100%; top: 50%; margin-top: -21px; overflow: hidden; width: 42px; height: 42px; z-index: 10; font-size: 0px; background: none;}
.productSlider .slick-arrow:before {font-family: 'Material Icons'; color: #fff; width: 36px; height: 36px; font-size:26px; position: absolute; left: 7px; top: 7px;}
.productSlider .slick-arrow.slick-prev {left: 10px;}
.productSlider .slick-arrow.slick-prev:before {content: 'arrow_back_ios';}
.productSlider .slick-arrow.slick-next {right: 10px;}
.productSlider .slick-arrow.slick-next:before {content: 'arrow_forward_ios';}
.productSlider .slick-arrow.slick-disabled {opacity:.1;}

.detailInfo {width: 45%; padding-left: 30px;}
.productName {font-size: 26px; font-weight: 600; padding-bottom: 10px; color: #000;}
.iconLink {margin: -10px; padding-bottom: 10px;}
.iconLink li {font-size: 16px; color: #666; font-weight: 600; padding: 10px;}
.iconLink li a {color: #666; display: flex; align-items: center;}
.iconLink li a .icon {margin-right: 5px;}
.iconLink li a:hover {color: #044A07;}
.detPrice {font-size: 32px; font-weight: 600;}
.detDecs {font-size: 14px; line-height: 24px; padding-bottom: 20px;}
.detailInfo .count {background: #e7e7e7; width: 150px; height: 44px; display: flex; align-items: center; padding: 8px 15px; font-size: 18px;}
.detailInfo .count a {cursor: pointer;}
.countInput {width: 100%; background: none; border: none; text-align: center; font-weight: 700; font-size: 17px;}

.addCart {width: calc(100% - 150px); padding-left: 10px;}
.addCart button {width: 100%; background: #cab44b; color: #fff; height: 44px; font-weight: 600; font-size: 17px;}
.addCart button:hover {background: #C2A209;}

.buyNowBtn {border: 1px solid #071526; background: #fff; width: 100%; font-size: 18px; font-weight: 600; padding:6px 10px; margin-top: 20px;}
.buyNowBtn:hover {background: #071526; color: #fff;}
.detInfo {padding-top: 10px;}
.detInfo li {color: #333; padding-top: 10px; font-size: 18px;}

.benifite {margin: -10px; justify-content: space-between; }
.benifite li {width: 25%; padding: 10px; max-width: 280px;}
.benifite li .inner {border: 1px solid #e4e4e4; height: 100%; border-radius: 2px; border-bottom: 4px solid #cab44b; padding: 15px 20px; display: flex; align-items: center; font-size: 16px; line-height: 21px; font-weight: 700; color: #000;}
.benifite li .inner .icon {color: #cab44b; font-size: 36px; margin-right: 15px;}
.detHd {font-size: 26px; font-weight: 700; padding-bottom: 10px; text-transform: uppercase; color: #000;}

.relatedProduct {margin: 0 !important;}
.relatedProduct li {width: auto;}
.relatedProduct .slick-list {margin: -15px;}
.relatedProduct .slick-arrow {position: absolute; border: 1px solid #000; top: 0; margin-top: -36px; overflow: hidden; width: 36px; height: 36px; z-index: 10; font-size: 0px; background: none;}
.relatedProduct .slick-arrow:before {font-family: 'Material Icons'; color: #000; width: 36px; height: 36px; font-size:26px; position: absolute; left: 4px; top: 3px;}
.relatedProduct .slick-arrow.slick-prev {right: 52px;}
.relatedProduct .slick-arrow.slick-prev:before {content: 'arrow_back_ios';}
.relatedProduct .slick-arrow.slick-next {right: 0;}
.relatedProduct .slick-arrow.slick-next:before {content: 'arrow_forward_ios';}


.productList.list li {width: 100%;}
.productList.list li .inner {display: flex; align-items: center; border: 2px solid #ddd;}
.productList.list li .imgBox {width: 290px;}
.productList li .det {width: calc(100% - 290px); padding-left: 30px;}
.productList.list li .imgBox:hover .fav {bottom: 14px;}
.productList.list li .name {font-size: 20px; padding: 0;}
.productList.list li .price {font-size: 22px; padding-bottom: 10px;}
.productList.list li .desc {font-size: 16px; line-height: 24px; padding-bottom: 20px;}
.productList.list li .det a.addToCart {display: inline-flex; align-items: center; justify-content: center; height: 44px; background: #CAB44B; padding: 0 50px; font-size: 16px; font-weight: 600; color: #fff; text-transform: uppercase; text-align: center; transition: ease-in-out .3s;}
.productList.list li .det a.addToCart:hover {background: #071526;}


/* Critical CSS required for first paint of header - keep tiny */
/* Navbar Styles */
.custom-navbar {
  background-color: #17302a !important;
  padding: 10px 0 !important;
}
.custom-navbar .navbar-brand img {
  height: 80px !important; /* Adjust logo size */
  display: block !important;
}
.custom-navbar .nav-link {
  color: #ffffff !important;
  font-size: 18px !important;
  text-decoration: none !important;
}
.custom-navbar .navbar-toggler {
  border: 1px solid black !important;
  background: transparent !important;
}
/* toggler visibility */
.custom-navbar .navbar-toggler {
  display: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: transparent !important;
  padding: 6px !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 991.98px) {
  .custom-navbar .navbar-toggler {
    display: inline-flex !important;
  }
}

.custom-navbar .nav-item {
  padding: 5px 15px !important;
}

/* Mobile View Adjustments */
@media (max-width: 991px) {
  .custom-navbar {
    padding: 5px 0 !important;
  }
  .custom-navbar .navbar-brand img {
    height: 60px !important;
  }
  .custom-navbar .nav-item {
    padding: 10px 0 !important;
  }
  .custom-navbar .navbar-collapse {
    background: #17302a !important;
    padding: 10px !important;
    text-align: center !important;
  }
}
