/* CSS Document*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('animate.css');

html, body{height:100%; overflow: hidden;}
body{font-family: "Inter", sans-serif; color:#111827; background-color: #f5f8fc;}
body:before {content: ''; position: absolute; z-index:2; background-color: rgba(255, 255, 255, .8); width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
.coming-soon-wrap {position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%;display: flex; align-items: center; justify-content: center; text-align: center; }
.coming-soon-wrap img {max-height: 60px;}
.coming-soon-wrap h3 {margin-bottom: .5rem;}
.coming-soon-wrap p {color: #111827; font-weight: 500; max-width: 60%; margin: 0 auto; font-size: 18px;}
::-webkit-input-placeholder {color:#999;}
::-moz-placeholder{color:#111827;} /* firefox 19+ */
:-ms-input-placeholder {color:#999;} /* ie */
input:-moz-placeholder {color:#111827;}
input, input:focus, textarea:focus{outline:none;}
input:focus, textarea:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul, ol {list-style:none; margin:0; padding:0}
h1,h2,h3,h4,h5,h6{font-family: "Jost", sans-serif; color:#111827; font-weight:700; margin:0; line-height:1.3;}
a {text-decoration:none; color:#111827; cursor:pointer; outline:none; transition: all 0.3s ease 0s;}
a:hover {text-decoration:none; color:#2563EB;}
img {max-width: 100%; height: auto;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.btn-primary {background-color: #2563EB; border-color: #2563EB; border-radius: 100px; padding: .5rem 1.5rem; transition: all 0.3s ease 0s;}
.btn-outline {padding: .5rem 1.3rem !important; font-size: 0.875rem; border-radius: 100px;  transition: all 0.3s ease 0s; border: 1px solid #bdbecc; display: flex; align-items: center;}
.btn-outline:hover {background-color: #111827; border-color: #111827; color: #fff;}
.wrapper{width:100%; min-height:100%;}
.navbar-brand img {max-height: 44px;}
.navbar-toggler-icon {background-size: 80%; --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 10h22M4 20h22'/%3E%3C/svg%3E");}
.navbar-toggler{--bs-navbar-toggler-border-color: rgba(0,0,0, 0.5); padding: 0.2rem;}
.navbar-toggler:focus{outline: none; box-shadow: none;}
.navbar {padding: 0;}
.navbar-nav li a {color: #111827; font-weight: 500; font-family: "Jost", sans-serif; position: relative; transition: all 0.3s ease 0s;}
.navbar-nav li a:hover {color:#2563EB !important;}
.navbar-nav li a.active {color:#2563EB !important;}
.navbar-nav li a.active:before {content: ''; background: #2563EB; width:100%; height: 2px; position: absolute; bottom: 0; left: 0;}
.navbar-nav li {padding: 0 1.2rem !important;}
.navbar-nav li a {font-size: 17px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 2rem; padding-bottom: 2rem;}
.header {min-height: 89px; background-color: #fff;}
.header.fixed-header {position: sticky; left: 0; top: 0; right: 0; width: 100%; z-index: 9; backdrop-filter: blur(24px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1); background-color: #fff;}
.home-banner-wrap {min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; background: url(../images/banner-two-gradient.png) no-repeat;}
.home-banner-wrap h1 {margin: auto; font-weight: 700;}
.search-box .form-control {background: transparent; border: none; height: 70px; padding: 1rem 4rem 1rem 2rem;}
.form-control:focus {box-shadow: none;}
.search-box {max-width: 636px; background-color: #fff; border-radius: 50px; display: flex; margin: 2rem auto; position: relative; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;}
.search-box .btn-primary {width: 56px; height:56px; border-radius: 100%; background-color: #2563EB; position: absolute; top: 8px; right: 8px; padding: .6rem;}
.popular-search {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 auto;}
.popular-search label {font-family: "Jost", sans-serif; font-weight: 600; margin-right: 1rem;}
.popular-labels {display: flex; flex-wrap: wrap; gap: 1.5rem;}
.popular-labels a {border-radius: 50px; padding: .3rem .8rem; border: 1px solid rgba(37, 100, 235, 0.2); font-size: 13px; }
.popular-labels a:hover {border-color: #2563EB;}
.popular-categories {padding: 5rem 0; background-color: #fff;}
.title-wrapper {display: flex; justify-content: center;}
.title-wrapper .title {position: relative; padding-bottom:1.5rem; margin-bottom:1.5rem; display: flex; justify-content: center;}
.title-wrapper .title:before {content: ''; position: absolute; bottom: 0; width: 40px; height: 2px; background: #2563EB;}
.product-grid-wrap {background-color: rgba(37, 100, 235, 0.037); padding: 5rem 0;}
.category-box {display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; align-items: center; margin: 2rem auto 0; border: 10px solid rgba(37, 100, 235, 0.067); height: 200px; border-radius: 10px;  transition: all 0.3s ease 0s;}
.category-box:hover {border-color: rgba(37, 100, 235, 1);}
.category-box img {max-height: 45px;}
.category-box label {font-weight: 600;}
.tabs-main-wrapper {display: flex; justify-content: center; flex-wrap: wrap;}
.tabs-main-wrapper .tab-content {width: 100%;}
.tabs-main-wrapper .nav-pills li {margin: 0 .5rem;}
.tabs-main-wrapper .nav-pills li button {border: 1px solid #e4e3e8; border-radius: 10px; font-size: .85rem; color: #111827; transition: all 0.3s ease 0s; margin-bottom: .5rem;}
.tabs-main-wrapper .nav-pills li button:hover {background-color: #fff; color: #2563EB; color: #2563EB;}
.tabs-main-wrapper .nav-pills .nav-link.active, .tabs-main-wrapper .nav-pills .show>.nav-link {background-color: #111827; color: #fff;}
.product-item {border-radius: 10px; background-color: #fff; transition: all 0.3s ease 0s; overflow: hidden;}
.product-item:hover {box-shadow: 0px 20px 30px 0px rgba(197, 196, 201, 0.25);}
.product-item-thumb a {width: 100%;}
.product-item-thumb {margin: 8px; border-radius: inherit; overflow: hidden; padding-bottom: 0; position: relative; display: flex;}
.product-item-thumb::before {position: absolute; content: ""; width: 100%; height: 0%; left: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 4, 37, 0.5) 69.5%, rgba(0, 4, 37, 0.5) 100%); pointer-events: none; visibility: hidden; opacity: 0; transition: 0.2s linear;}
.product-item:hover .product-item-thumb::before {height: 100%; visibility: visible; opacity: 1; z-index: 1;}
.product-item-title {text-transform: capitalize; margin-bottom: 8px;}
.product-item-title a {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.product-item-content {padding:24px 16px; padding-top: 16px;}
.product-item-thumb img {transition: 0.2s linear;}
.cover-img {width: 100%; height: 100%; object-fit: cover;}
.product-item:hover .product-item-thumb img {transform: scale(1.1);}
.product-item-info {display: flex; justify-content: space-between;}
.product-item-author,.product-item-author a, .product-item-sales {color: #686973; font-size: .85rem;}
.product-item-author a:hover {text-decoration: underline;}
.product-item-prevprice {font-size: 0.875rem; font-weight: 400; color: #686973;}
.product-item-sales {margin-bottom: .5rem;}
.product-price {display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem;}
.product-item-bottom {margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e3e8; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.star-rating {gap: 4px; display: flex; align-items: center; flex-wrap: wrap;}
.star-rating-item {font-size: 0.6875rem; color: #FFA944;}
.star-rating-text {font-size: 0.6875rem;}
.featured-products-wrapper {padding: 4rem 0 7rem; background: url(../images/featured-gradient.png) no-repeat; background-size: cover;}
.section-content .title-wrapper,.section-content .title {text-align: left; justify-content: flex-start;}
.featured-products-wrapper .btn-primary {margin-top: 1rem;}
.box-shadow {box-shadow: 0px 20px 30px 0px rgba(197, 196, 201, 0.25);}
/* Footer */
.footer{background-color: #111827; padding:5rem 0; color: #fff;}
.footer-copyright{background-color: #122e40; padding: 30px 0; font-size: 13px; color: #b2baca;}
.footer-copyright span{color: #fff;}
.footer-logo img {max-height: 40px;}
.social-list {display: flex; column-gap: .5rem;}
.social-list li a {width: 40px; height: 40px; border-radius: 100%; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; padding: .8rem;}
.social-list li a:hover {background: #2563EB; border-color: #2563EB;}
.footer-list li {margin-bottom: .5rem;}
.footer-list li a {color: rgba(255, 255, 255, 0.5); font-size: .85rem;}
.footer-list li a:hover {color:rgba(255, 255, 255, 1); ;}
.footer-title {font-weight: 700; color: #fff; margin-bottom: 1rem; font-size: 1rem;}
.subscribe-form .form-group {position: relative;}
.subscribe-form .form-control {border-radius: 50px; padding:.8rem 4rem .8rem 1.5rem;}
.subscribe-form .btn {position: absolute; top: 0; right: 0; padding: .8rem 1.5rem; border-radius: 0 25px 25px 0;}
/* Footer */






/* ==========================================================================
   Media Queries
   ========================================================================== */
@media(min-width:1200px) {
   .home-banner-wrap h1 {font-size: 3rem; max-width: 63%;}
   .category-wrapper {max-width: 70%; margin: auto;}
   .product-item {max-width: 300px;}
}
@media (min-width:576px) {
   .product-item-thumb {max-height: 156px;}
   .card-wrapper div[class*=col]:nth-child(even) .product-item {transform: translateY(56px);}
   .card-wrapper {margin-bottom: 56px;}
}
@media(min-width:424px) and (max-width:575px) {
   .product-item {display: flex;}
   .rating-sales-count {margin-bottom: 1rem;}
}
@media(max-width:767px) {
   .header {min-height: 70px; padding: .5rem 0;}
   .navbar-nav li {padding: 0 !important;}
   .navbar-nav li a {padding:1rem 0;}
   .featured-products-wrapper {padding: 0 0 3rem;}
}
@media(max-width:575px) {
   .category-box {width: 100%; height: 160px; text-align: center; margin:0 auto 1rem; padding: .5rem;}
   .category-box label {font-size: .85rem;}
   .popular-search {justify-content: flex-start;}
   .popular-search label {margin-right: 0; margin-bottom: .5rem;}
   .popular-labels {gap: .5rem;}
   
}