@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    :root {
	--primary-color: #3498db;
	--secondary-color: #2c3e50;
	--accent-color: #e74c3c;
	--light-color: #ecf0f1;
	--dark-color: #2c3e50;
	--success-color: #2ecc71;
	--warning-color: #f39c12;
}
body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #f8f9fa;
	color: var(--dark-color);
}


/* modal readmore */
.leanmore-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(25, 42, 50, 0.7);
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.leanmore-modal .payment-icons-modal img {
    width: 23px;
}
.protection-box{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.leanmore-modal h3 {
    font-size: 20px;
    padding: 14px 21px;
    border-bottom: solid 1px #ccc;
    color: #000;
    margin-bottom: 0px;
    font-weight: 600;
}
.leanmore-modal .protection-item {
    display: flex;
    gap: 18px;
}
.leanmore-modal .modal-content {
background: white;
    max-width: 830px;
    margin: 10% auto;
    border-radius: 13px;
    position: relative;
    width: 100%;
}
.leanmore-modal .protection-item p {
    margin-bottom: 0;
    font-size: 14px;
    color: rgb(63, 86, 99);
}
.leanmore-modal .protection-item h4 {
font-size: 17px;
    line-height: normal;
    font-weight: 600;
    color: rgb(14, 22, 28);
    margin-bottom: 2px;
}

.leanmore-modal .protection-item i {
color: #545454;
    font-size: 23px;
    line-height: normal;
}

.leanmore-modal .close {
  position: absolute;
  right: 15px;
  top: 10px;
  cursor: pointer;
  font-size: 20px;
}
/* =============== HEADER CSS ===============  */

.main-header {
	background-color: white;
	padding: 5px 0 0px;
	border-bottom: solid 1px #e2e4e6;
    z-index: 10;
}
.navbar-brand {
	font-weight: bold;
	font-size: 25px;
}
.search-bar {
	position: relative;
}
.search-bar input::placeholder {
	color: #646464;
	font-size: 14px;
	font-weight: 500;
}
.form-control:focus {
	outline: none;
	box-shadow: none;
	border-color: #dddddd3b;
	background: #f8f9fb;
}
.search-bar .form-control {
	border-radius: 50px;
	border: 1px solid #dddddd3b;
	background: #f8f9fb;
	padding: 4px 20px;
	font-size: 13px;
	height: 36px;
	padding-right: 35px;
}
.search-bar button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #666565;
}
.navbar-nav .nav-link {
	font-weight: 500;
	color: var(--dark-color) !important;
	margin: 0 10px;
	transition: color 0.3s ease;
}
.navbar-nav .profile-tag {
	background: #00adff26;
	width: 25px;
	text-align: center;
	height: 25px;
	border-radius: 50px;
	padding: 0;
	color: #00adff !important;
	font-size: 0.8rem;
	line-height: 24px;
	font-weight: 700;
}
.navbar-nav .nav-link:hover {
	color: var(--primary-color) !important;
}
.badge-cart {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--accent-color);
	color: white;
	border-radius: 50%;
	padding: 1px;
	font-size: 0.7rem;
	font-weight: bold;
	width: 17px;
	height: 17px;
	text-align: center;
}
.category-nav {
	background-color: #fff;
	padding: 0;
}
.category-nav .nav-link {
	color: #4f535c !important;
	padding: 10px 14px;
	font-weight: 500;
	position: relative;
	margin: 0;
	font-size: 0.9rem;
	margin-right: 4px;
	white-space: nowrap;
}
#categoryNav {
	overflow-x: auto;
}
.navbar-nav .nav-item{
    cursor: pointer;
}
.navbar-nav .nav-item:hover .login-header{
    opacity: 1;
    top: 44px;
    visibility: visible;

}
.login-main{
    max-width: 480px;
    margin: auto;
}
.login-header {
    position: absolute;
    width: 280px;
    background: #fff;
    z-index: 999;
    left: 50%;
    top: 50px;
    padding: 17px;
    box-shadow: 0px 0px 10px #cccccc6e;
    border-radius: 5px;
    transform: translate(-50%, -3px);
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}
.login-header .create-account{
    color: #ff5621;
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
}
.login-header a.login-btn{
display: block;
    background-color: #ff5621;
    border-radius: 50px;
    padding: 7px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    width: 80%;
    margin:auto;
    font-size: 14px;
    font-weight: 500;
}
.login-header:after {
    content: "";
    background: #ffffff;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -8px;
    transform: translate(-50%, 0%) rotate(45deg);
    left: 50%;
    box-shadow: rgba(0, 0, 0, 0.1) -1px -2px 4px;
}
/* =============== HEADER CSS ===============  */
/* =============== CREATE ACCOUNT CSS ===============  */
.post-banner {
    padding: 50px 0px;
}
.create-account-main{
    padding: 50px 0px;
}
.form-main p a {
    color: #ff5621;
    font-weight: 600;
}
.form-main {
    margin: auto;
    max-width: 620px;
    width: 100%;
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}
.btn {
    font-size: 18px;
    padding: 6px 10px;
    font-weight: 500;
}
.theme-button{
    background:#ff5621;
    color:#fff;
    border:solid 1px #ff5621;
}
.theme-button:hover{
    background:#ff5621;
    color:#fff;
    border:solid 1px #ff5621;
}
.form-main h1 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 7px;
    color: #000;
}

.form-main p {
    font-size: 13px;
    color: #0000008f;
    margin-bottom: 30px;
}

form .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #686868;
}
form .form-control {
    background: #ffffff;
    min-height: 35px;
    border: solid 1px #00000052;
}
/* =============== WISHLIST CSS ===============  */

.wishlist-product-img {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
}
.wishlist-item .card-body{
    border-left: solid 1px #d9d9d9;
    padding: 20px 20px;
}
.wishlist-item .card-body .card-title{
    font-size: 16px;
    color: #585858;
    margin-bottom: 5px;
}
.wishlist-item .card-body .price {
    font-size: 19px;
    font-weight: 500;
    color: #ff5621;
}
.wishlist-item .card-body .card-text {
    font-size: 14px;
    color: #919191;
    margin-bottom: 6px;
}
.wishlist-product-img img{
    max-width: 100px;
}
.wishlist-item {
    background: #fff;
    border-radius: 6px;
    transition: 0.3s;
    overflow: hidden;
}

.wishlist-item:hover {
    box-shadow: 0px 6px 6px rgb(0 0 0 / 2%);
    transform:translateY(-5px)
}
.wishlist-button {
    background: #f1f1f1;
}
.wishlist-button button{
background-color: #ff5621;
    border: none;
    padding: 5px 15px;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    height: 36px;
    line-height: 23px;
}
.wishlist-button .remove-product{
background-color: #ffffff;
    border: solid 1px #ff5621;
    padding: 5px 11px;
    color: #ff5621;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    height: 36px;
    line-height: 23px;
}

/* ============ RIGHT CART CSS ==========  */

.add-cart-open{
    padding-right:360px;
}

.right-addcart {
    position: fixed;
    right: 0;
    height: 100%;
    background: #fff;
    z-index: 999;
    width: 360px;
    border-left: solid 1px #dce5e9;
    padding: 20px;
}
.right-addcart .cart-box img {
    width: 100px;
    border: solid 1px #dce5e9;
    padding: 6px;
    border-radius: 6px;
    height: 100px;
}    
.right-addcart .main-right{
    flex-direction: column;
    display: flex;
    -webkit-box-pack: justify;
    gap:20px;
    overflow-y: auto;
    height: 82vh;
}
.right-view-cart{
    position: absolute;
    bottom: 0;
    padding: 18px 15px;
    width: 100%;
    left: 0;
    border-top: solid 1px #dce5e9;
    background:#fff;
}
.right-view-cart button{
    color: rgb(255, 255, 255);
    background-color: rgb(0, 144, 217);
    font-size: 16px;
    font-weight: 700;
    height: 40px;
    border: none;
    width: 100%;
    border-radius: 50px;
}
.right-addcart h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}
.right-addcart .rightcart-info {
    font-size: 13px;
    color: rgb(63, 86, 99);
    flex:1;
}
.right-addcart .price {
    font-size: 14px;
    font-weight: 600;
    color: rgb(14, 22, 28);
}
.right-addcart .product-dis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.right-addcart .product-name {
    width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(14, 22, 28);
    font-size: 14px;
    font-weight: 500;
}


/* ============ RIGHT CART CSS ==========  */

/* =============== MAIN-BODY ===============  */

.sticky-left {
    position: fixed;
    overflow-y: scroll;
    top: 92px;
    height: 100%;
    background: #fff;
    width: 160px;
    padding-bottom: 90px;
}

.category-sidebar {
	padding-top: 15px;
}
.all-category {
    color: rgb(72, 99, 111);
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
    /* font-family: "ginto", sans-serif; */
}

.category-sidebar h1 {
	font-size: 12px;
}

.product-right {
	padding: 10px 0px;
}

.main-title {
	font-size: 1.3rem;
	margin-bottom: 1.3rem;
	font-weight: 700;
	color: #000000;
}

/* LEFT BAR  */
.category-title {
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 15px;
}

.main-category {
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
    font-size: 12px;
}

.sub-category {
	list-style: none;
	padding-left: 15px;
}
.sub-category li{
    margin-bottom:5px;
}
.sub-category li a {
    padding: 1px 4px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    border-radius: 3px;
}
.sub-category li a:hover{
    background-color: #f0f5f7;
}

.filter-btn {
	border-radius: 8px;
}

.mobile-fillter {
	display: none;
}

/* product Modal  */
.product-modal .modal-content {
    border-radius: 0px;
    position: relative;
}
.product-modal .modal-header .modal-title{
    color: #000000;
    font-size: 17px;
    border-bottom: solid 2px #0d6efd;
    display: inline-block;
}
.product-modal .modal-header {
    border: none;
    padding: 10px 20px 0px 20px;
}
.product-modal .modal-header .btn-close{
    font-size: 12px;
    color: #000;
    opacity: 1;
}
.btn-close:focus{
    box-shadow: none;
}

/* RIGHT CARD */
.product-main {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.product-items {
	background: #ffffff;
	box-shadow: 9px 3px 6px rgb(0 0 0 / 0%);
	border-radius: 4px;
    text-decoration:none;
    cursor: pointer;
}

.product-content {
    padding: 10px;
}
.product-items img {
width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.product-price {
	font-size: 0.9rem;
	font-weight: 500;
	color: #000;
	margin-top: auto;
}

.product-title {
    font-size: 11px;
    color: #60686b;
    font-weight: 500;
}

.product-price span {
    font-size: 12px;
    text-decoration: line-through;
    color: #83969c;
    margin-left: 2px;
}

.offcanvas-start {
	width: 220px;
}

.navbar-toggler {
	width: 30px;
	height: 30px;
	font-size: 32px;
	border-radius: 4px;
	color: #000;
}


/* PAYMENT-METHODS */
 .payment-methods{
    padding: 20px 0px;
    background-color: #fff;
 }


 /* accordion css */
.shopping_cart .accordion-button{
    background: #f0f5f8 !important;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0px !important;
}
.shopping_cart .accordion-button:after{
    display:none;
}
.summary-box h5{
    background: #f0f5f8 !important;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    border: #dee2e6 1px solid !important;
    margin-bottom: 0px;
}
.accordion-item {
    border-radius: 0px !important;
}
.accordion-button:focus{
    box-shadow:none;
}
.summary-right{
    border: solid 1px #dee2e6;
    padding: 15px 15px;
    background: #fff;
    border-top: none;

}
.summary-right .input-group input {
    background: #f0f5f8;
    flex: 1 1 0%;
    border: 1px solid rgb(212, 227, 235);
    border-radius: 2px;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    padding: 12px;
    text-align: left;
    color: rgb(25, 42, 50);
    background-color: rgb(248, 250, 251);
    cursor: auto;
}
.summary-right .input-group button {
    background: #ffffff;
    border-radius: 3px !important;
    font-size: 14px;
    border: solid 1px #3498db;
    color: #3498db;
    font-weight: 500;
    width: 65px;
}
.summary-right a{
    color:#3498db;
    font-weight: 600;

}
.summary-right span {
    font-size: 13px;
    color: #000;
}
.save-address {
    margin-top: 20px;
}

.save-address h6 {
    font-size: 15px;margin-bottom: 15px;
}

.save-address label {
    font-size: 14px;
}
.save-address .form-check {
    padding: 10px;
    border-width: 1px;
    font-size: 15px;
    background: #f0f5f857;
    border-radius: 6px;
    border-style: dashed;
    border-color: #d5e1e9;
    display: flex;
}

.save-address .form-check input {
    margin-left: 0px;
    margin-right: 12px;
}

.items-list .form-select{
    width: 56px;
    height: 38px;
    border-radius: 0px;
    font-size: 14px;
    background-color: #f0f5f8;
}
.form-select:focus{
    box-shadow: none;
    border-color: #f0f5f8;
}
.items-list .remove-link{
color: #3498db;
    font-weight: 500;
    text-decoration: none;
    margin-left: 13px;
    font-size: 15px;
}
.address-save-btn button {
    border-radius: 4px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 17px;;
    
}
.offer-price {
    font-weight: 500;
    text-decoration: line-through;
    color: #b4b4b4;
}
.cancel-btn{
    background: #fff;
    color:#2fb7ec;
    border: 1px solid #2fb7ec;
}
.address-save-btn .save-btn{
    background: #2fb7ec;
    color:#fff;
    border: 1px solid #2fb7ec;
}
.address-form form .form-label{
    color: rgb(25, 42, 50);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
}
.address-form form input,
.address-form form select{
border: 1px solid rgb(212, 227, 235);
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    height: 32px;
    padding: 3px 12px;
    text-align: left;
    color: rgb(25, 42, 50);
    background-color: rgb(248, 250, 251);
    cursor: auto;
}
.return-text{
    color: #3498db;
    font-size: 13px;
    margin-top: 14px;
}
.payment-icons img {
    width: 25px;
}

.payment-icons {
    width: 68px;
}
.payment-box {
    border: solid 1px #dddddd;
}

.summary-right .checkout-btn {
    background: #ff5621;
    display: block;
    width: 100%;
    border: none;
    padding: 6px;
    margin: 15px 0px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
}
/* CARD DETAIL PAGE DESIGN  */

/* custom css  */

.share-product {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: solid 1px #7373734a;
}

.product-img{
    width: 100%;

}
.product-lagre {
    background: #ffffff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* .product-lagre img {
    max-width: 340px;
} */
.thumb-img{
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 0;
    cursor: pointer;
    border: 1px solid #00000026;
    padding: 2px;
}

.thumb-img:hover{
    border-color:#0d6efd;
}
.product-info{
    max-width: 368px;
    margin-left: auto;
    position: sticky;
    top: 25px;
    border: 1px solid rgb(240, 245, 247);
    padding: 32px;
}

.product-info h4{
    font-size: 17px;
    color: #585858;
}

.ratting span {
font-size: 14px;
    color: rgb(0, 152, 211);
    font-weight: 500;
    cursor: pointer;
}

.product-info .price{
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: rgb(198, 40, 0);
    font-weight: 700;
}

.old-price{
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 700;
    margin-right: 12px;
    line-height: 24px;
    color: rgb(175, 199, 209);
}

.add-cart-btn {
    background: #ff5621;
    color: white;
    font-size: 23px;
    padding: 8px 10px;
    width: 100%;
    border: none;
    font-weight: 700;
}

.add-cart-btn:hover{
    background:#e85d00;
}

.badge-save {
    background: rgb(255, 236, 230);
    color: rgb(204, 69, 27);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
}

.return-box{
background: rgb(210, 255, 226);
    color: rgb(7, 55, 25);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}
.charging-drop select{
    height: 38px;
    border-radius: 0px;
    font-size: 15px;
    background-color: #f0f5f8;
    font-weight: 500;
}
.first-purchase{
    text-align: center;
    background: #2bab76;
    color: #fff;
    padding: 4px 3px;
    font-size: 12px;
    width: 100%;
}
.first-purchase strong{
    font-size: 15px;
    font-weight: 500;
}
.add-to-wishlist {
    display: flex;
    gap: 10px;
    font-size: 17px;
    justify-content: center;
    color: #94a3aa;
    text-decoration: none;
    align-items: center;
    font-weight: 500;
}
.add-to-wishlist i{
        color: #000;
    line-height: 0;
}
.product-all-info{
    margin-top: 2rem;
}
.product-all-info .product-sub-title{
    font-weight: 700;
    color: #192a32;
    font-size: 17px;
    margin-bottom: 0px;
}
.product-all-info .product-sub-title span{
    font-size: 16px;
    font-weight: 400;
}
.product-all-info .items-list-line{
    padding: 20px 0px;
    border-bottom: 3px solid rgb(240, 245, 247);
}

.confidence-product h6 {
    margin-bottom: 25px;
    font-size: 24px;
    line-height: 18px;
    padding-top: 0px;
    font-weight: 700;
    color: rgb(14, 22, 28);
}
.confidence-product a {
    font-size: 14px;
    color: rgb(0, 152, 211);
    margin-top: 5px;
    display: inline-block;
}

.confidence-product ul li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: rgb(14, 22, 28);
}

.confidence-product ul li i {
color: #243b5c;
    font-size: 17px;
}
.brand-text{
    font-size: 15px;
    color: rgb(126, 154, 166);
    width: 100%;
    font-weight: 500;
}

.product-all-info .accordion-item{
    border: none;
    border-bottom:3px solid rgb(240, 245, 247);
}
.product-all-info .accordion-item .accordion-body ul li{
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    line-height: 27px;
    font-weight: 500;
    color: rgb(14, 22, 28);
}


.product-all-info .accordion-button:not(.collapsed),
.product-all-info .accordion-button {
    background: #ffff;
    padding: 22px 0px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(25, 42, 50);
}
.product-all-info .accordion-button:focus{
    box-shadow:none;
}
.product-all-info .accordion-button::after {
    content: "Show More";
    min-width: 87px;
    top: 2px;
    position: relative;
    background-image: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.3px;
    color: rgb(47, 183, 236);
}
.product-all-info .accordion-button:not(.collapsed)::after{
    content: "Show Less";
    transform:none;
}
@media(max-width:767px){
    .right-addcart{
        display: none;
    }
    .add-cart-open{
        padding-right: 0px;
    }
    .product-info{
        max-width:100%;
        border:none;
        padding:0px;
        margin-top:20px;
    }
    .mobile-add-card {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background: #f1f1f1;
        left: 0;
        justify-content: space-between;
}
.mobile-add-card .add-to-wishlist{
        display: flex;
        color: #ff5621;
        text-decoration: none;
        width: 50%;
        margin-top: 0px !important;
        border: solid 1px #ff5621;
        align-items: center;
        background: #ffffff;
}
.mobile-add-card .add-to-wishlist i {
    color: #ff5621;
    line-height: 0;
}
.mobile-add-card .add-cart-btn {
        background: #ff5621;
        color: white;
        font-size: 15px;
        padding: 10px 10px;
        width: 50%;
        border: none;
        font-weight: 300;
}
.product-all-info{
    margin-top:0rem;
}
.product-all-info .accordion-button:not(.collapsed), .product-all-info .accordion-button {
    padding: 14px 0px;
    font-size: 13px;
}
.product-all-info .accordion-button::after {
    content: "Show More";
    min-width: 70px;
    font-size: 10px;
}
.product-all-info .accordion-item .accordion-body ul li {
    line-height: 22px;
    font-size: 12px;
}
.product-all-info .accordion-body {
    padding: 0px;
}
}



/* =============== MAIN-BODY ===============  */

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

@media(max-width:1100px) {
	.product-main {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 991px) {
    .wishlist-item .card-body{
        border:none !important;
        text-align: center;
    }
    .wishlist-button {
    padding: 15px;
}
	.mobile-fillter {
		display: block;
	}

	header .container {
		max-width: 100%;
	}

	.sticky-left {
		display: none;

	}

	.hero-section h1 {
		font-size: 2.5rem;
	}

	.category-nav {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.category-nav .nav-item {
		display: inline-block;
	}

	.product-main {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media(max-width:600px) {
	.product-main {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(max-width:400px) {
	.product-main {
		grid-template-columns: repeat(1, 1fr);
	}
}