.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Disabled button style */
.btn-login-blue:disabled {
    background-color: #a0aec0; /* grayish color */
    cursor: not-allowed;
    opacity: 0.6;
}
    .sign-in-box {
        width: 400px;
        max-width: 100%;
        margin: auto;
        text-align: center;
        padding: 20px;
    }
    .main-title {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
        line-height: 32px;
        letter-spacing: normal;
        padding-bottom: 0px;
        color: #151e27;
    }
    .form-login-input{
        width: 100%;
        max-width: 100%;
        padding: 11px;
        border-radius: 8px;
        border: 1px solid #8f8f8f;
        color: #8f8f8f;
        transition: 0.3s;
        background-color: #f7f7f7;
    }
    .btn-login-blue {
        background-color: #3665f3;
        color: #fff;
        width: 100%;
        max-width: 100%;
        border: none;
        border-radius: 50px;
        min-height: 48px;
        padding: 13px 20px;
        font-size: 16px;
        font-weight: 700;
        transition: 0.3s;
    }
    .mb-4{
        margin-bottom:16px;
    }
    .separator {
        display: block;
        width: 100%;
        margin: 40px 0px 30px 0px;
    }
    .separator-content {
        position: relative;
        top: -9px;
        font-size: 12px;
        line-height: 14px;
        text-align: center;
        vertical-align: middle;
    }
    .separator-line {
        width: 100%;
        height: 1px;
        margin: 16px 0 0;
        background-color: #c7c7c7;
    }
    .separator-content mark {
        background-color: #FFF;
        padding: 0 4px;
    }
    .btn-social-login-box>button {
        background-color: #ffffff;
        color: #444;
        width: 100%;
        max-width: 100%;
        border: 1px solid #444;
        border-radius: 50px;
        min-height: 48px;
        padding: 10px 12px;
        font-size: 16px;
        font-weight: 700;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    .btn-social-login-box>button:hover{
        border: thin solid #888;
        background-color: #eee;
        color: #444;
    } 
/* start top header */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
}
.logo img{
    width: 150px;
    height: 50px;
}
.search-bar{
    position: relative;
}
.search-bar>input {
    width: 500px;
    padding: 12px 12px 12px 40px;
    color: #000;
    border-radius: 25px;
    background-color: #ededed;
    border: 1px solid #bababa00;
}
.search-bar>input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.search-bar>input::placeholder {
    color: #131619;
}
.search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 20px;
    transform: translateY(-50%);
    color: #000;
}
.user-actions {
    min-width: 190px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-user-actions{
    min-width: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-actions a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    gap: 5px;
    align-items: center;
    line-height: 24px;
}
.login{
    font-family: 16px;
    font-weight: 500;
    color: var(--theme-color-dark);
}
.register {
    background-color: var(--theme-color-dark);
    color: var(--theme-color-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 11px 24px;
    border-radius: 24px;
}
.cart>span {
    background-color: var(--theme-color-yellow);
    color: var(--theme-color-dark);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* end top header */

/* Submenu (Mega Menu) */
.main-mega-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    background-color: var(--theme-color-dark);
}
.main-mega-menu > li {
    padding: 15px;
}
.main-mega-menu > li > a {
    padding: 14px 18px;
    display: block;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    text-wrap-mode: nowrap;
    line-height: 24px;
    border: none;
    text-transform: uppercase;
}
.main-mega-menu > li > a:hover {

}
.main-mega-menu > li{
    padding:0px;
}
.sm-menu-title {
    position: relative;
    font-size: 17px;
    margin-bottom: 18px;
}
.sm-menu-title::after {
    content: '';
    width: 60px;
    height: 1px;
    position: absolute;
    bottom: -8px;
    left: 0;
    background-color: #000;
}
.sub-menu {
    display: none;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    width: 1300px;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 8%);
    z-index: 10;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: none;
}
.sub-menu ul {
    padding-left: 0px;
    display: flex;
    list-style: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}
.sub-menu li {
    vertical-align: top;
}
.sub-menu ul>li>a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}
.sub-menu ul>li>a:hover{
    color: var(--bg-color-theme2);
    padding-left: 3px;
}
    
.dropdown-item{
    font-size:14px;   
}
/* Show submenu on hover with animation */
.main-mega-menu>li:hover>.sub-menu {
    display: block;
    animation: slideUp 0.5s ease forwards; /* Trigger the animation */
}
.main-mega-menu >li:hover>a {
    color: var(--theme-color-yellow);
}
.img-featured {
    border-radius: 0;
}
.category-menu {
    background-color: #fff;
}
.sub-menu-content {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    padding: 0px 0px;
}
.sub-menu-content .sub-menu-content-left {
    width: 50%;
}
.sub-menu-content .sub-menu-content-right {
    width: 50%;
}
/* Keyframe for bottom-to-top animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Starts 20px below */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Ends at its normal position */
    }
}

/*===== end mega menu =====*/

/*===== start Banner  =====*/ 
.bg-banner{

}
.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-content>a{
    width: 50%;
}

/*===== end start Banner =====*/

/*=====start Only mobile login =====*/
@media (min-width: 768px) {
    .home-login-section{
        display:none;
    }
}
.home-login-section{
    text-align: center;
    padding: 30px;
    background-color: #f5f5f5;
}
.section-content{
         
}
.section-content a{
    border: 1px solid var(--theme-color-sky);
    color: var(--theme-color-sky);
    padding: 18px 20px;
    border-radius: 50px;
    width: 126px;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
}
.section-content>h4 {
    font-weight: 400;
    color: var(--theme-color-dark);
}

/*=====end Only mobile login =====*/

/*===== start product card =====*/
.category-section{
    background-color: #FAFAFA;
    padding: 20px 50px;
}
.category-list{
    margin-bottom: 40px;
}
.category-list ul {
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.28%, 1fr));
    gap: 10px;
    list-style: none;
    justify-items: center;
    margin-bottom: 0;
}
.category-list ul li{
    padding: 0px;
}
.category-list ul li a {
    text-decoration: none;
    color: var(--theme-color-dark);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    display: flex;
    margin-bottom: 16px;
    flex-direction: column;
    text-transform: uppercase;
    width: 156px;
    height: 156px;
    align-items: center;
    justify-content: center;
    line-height: normal;
    text-align: center;
    gap: 8px;
}
.category-list ul li a>span {
    font-size: 16px;
    padding: 35px;
    background-color: #F2F2F2;
    border-radius: 50%;
}
.category-list ul li a>span>img {
    width: 65px;
    height: 65px;
}
.category-title>h2 {
    font-size: 40px;
    color: var(--theme-color-dark);
    margin: 20px 0px 40px 0px;
    font-family: var(--theme-font-bold);
}
/*===== end product card =====*/

/*===== start NEWLY ARRIVED PRODUCTS start =====*/
.newly-arrived-section {
    background-color: #FAFAFA;
    padding: 20px 50px 50px 50px;
}
.view-all{
    text-decoration: none;
    color: var(--theme-color-dark);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.newly-arrived-list {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}
.newly-arrived-section .newly-arrived-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newly-arrived-title h2 {
    font-size: 40px;
    color: var(--theme-color-dark);
    margin: 20px 0px 40px 0px;
    font-family: var(--theme-font-bold);
}   
.view-all {
    background-color: var(--theme-color-dark);
    color: var(--theme-color-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 11px 24px;
    border-radius: 24px;
    line-height: 24px;
}
.card-header{
    background-color: #F5F5F5;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    text-align: center;
}
.newly-arrived-list .card-header{
    padding: 16px;
}
.card-details{
        padding: 0px 16px;
        line-height: normal;
    }
.card-image{
    width: 100%;
}
.card-details .card-title{
    font-size: 14px;
    color: var(--theme-color-dark);
    margin: 10px 0px 10px 0px;
    font-family: var(--theme-font-bold);
}
.card-price {
    font-size: 14px;
    color: var(--theme-color-dark);
    margin: 10px 0px 10px 0px;
    font-family: var(--theme-font);
    font-weight: 400;
}
.card-tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--theme-color-dark);
    text-transform: uppercase;
    padding: 5px 10px;
    background-color: #F5F5F5;
    border-radius: 5px;
    width: fit-content;
}
/*===== end NEWLY ARRIVED PRODUCTS start =====*/

/* ===== Product offer section start ==== */
.product-offer-content{
        display: grid ;
        grid-template-columns: repeat(auto-fill, minmax(32.333%, 1fr));
}
/* ===== Product offer section end ==== */

/* ================== ================== 
================== ================== 
        CART PAGE STYLE START 
================== ================== 
================== ==================  */
.cart-card-section {
    padding: 50px 20px;
}
.cart-card {
    display: flex;
    padding: 20px;
    border: 1px solid #ECEAE7;
    border-radius: 20px;
    gap: 20px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.cart-image{
    width: 130px;
    min-height: 130px;
    background-color: #F5F5F5;
    display: grid;
    justify-items: center;
    align-items: center;
}
.cart-image img {
    width: 80px;
    height: auto;
    border-radius: 10px;
}
.cart-details {
  flex: 1;
}
.cart-details .tag {
    font-family: var(--theme-font);
    display: inline-block;
    background-color: #ffffff;
    color: var(--theme-color-red);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 12px;
    border: 1px solid var(--theme-color-red);
    margin-bottom: 5px;
}
.cart-details h4 {
    margin: 5px 0px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--theme-font);
}
.qty-details {
    display: flex;
    gap: 25px;
    margin-bottom: 10px;
    align-items: flex-start;
    min-height: 80px;
}
.qty-num {
    display: flex;
    align-items: center;
    gap: 5px;
}
.qty-num label {
    font-family: var(--theme-font);
    font-weight: 400;
    font-size: 14px;
    /*new add*/
    color:#6a6a6a;
}
.qty-num input {
    width: 50px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #6a6a6a;
    border-radius: 10px;
    text-align: left;
}
.qty-price {
    font-family: var(--theme-font);
    font-weight: 600;
    margin-left: auto;
    font-size: 20px;
}
.card-action{
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    min-height: 20px;
    align-items: center;
}
.card-action a {
    font-family: var(--theme-font);
    color: var(--theme-color-sky);
    margin-right: 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}
.card-action a:hover {
  text-decoration: underline;
}
.cart-summary {
    background-color: #F6F6F6;
    padding: 20px;
    gap: 20px;
    border-radius: 20px;
    border: none;
}
.cart-summary-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.summary-row.total {
    font-family: var(--theme-font);
    font-weight: 600;
    font-size: 20px;
}
.checkout-btn {
  margin-top: 20px;
  padding: 12px 0;
  border: none;
  background-color: var(--theme-color-dark);
  color: var(--theme-color-white);
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
}
.secure-msg {
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
.custom-hr{
    width: 100%;
    border: none;
    border-bottom: 1px solid #ECEAE7;
}
.txt-gray{
    color:#6a6a6a;
}
/* responsive cart */
@media (max-width: 767px) {
.cart-card-section {
    padding: 16px 0px;
}
.cart-row{
    flex-direction: column;
}
.cart-card {
    gap: 15px;
    padding: 0 0px 15px 0px;
    border: none;
    border-bottom: 1px solid #ECEAE7;
    border-radius: 0;
}
.cart-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.qty-details{
    flex-direction: column;
    gap: 9px;
}
.qty-price {
    margin-left: inherit;
    font-size: 18px;
}
.cart-details h4{
    margin-bottom: 0
}
.card-action a{
    text-wrap-mode: nowrap;
}
.cart-summary {
    background-color: #ffffff;
    padding: 0;
    border-radius: 0px;
}
}


/* ================== ================== 
================== ================== 
        CART PAGE STYLE END 
================== ================== 
================== ==================  */

/* ================== ================== 
================== ================== 
        CHECKOUT PAGE STYLE START 
================== ================== 
================== ==================  */
.checkout-card-section {
    padding: 50px 20px;
}
.checkout-card-section .cart-card {
    display: flex;
    padding: 0;
    padding-bottom: 15px;
    border: none;
    border-bottom: 1px solid #ECEAE7;
    border-radius: 0;
    gap: 20px;
    box-sizing: border-box;
    margin-bottom: 15px;
    margin-top: 15px;
}
.checkout-card-section .cart-image{
    width: 130px;
    min-height: 130px;
    background-color: #F5F5F5;
    display: grid;
    justify-items: center;
    align-items: center;
}
.checkout-card-section .cart-image img {
    width: 80px;
    height: auto;
    border-radius: 10px;
}
.checkout-card-section .cart-details {
  flex: 1;
}
.checkout-card-section .cart-details .tag {
    font-family: var(--theme-font);
    display: inline-block;
    background-color: #ffffff;
    color: var(--theme-color-red);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 12px;
    border: 1px solid var(--theme-color-red);
    margin-bottom: 5px;
}
.checkout-card-section .cart-details h4 {
    margin: 0px 0px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--theme-font);
}
.checkout-card-section .qty-details {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
    min-height: 80px;
    flex-direction: column;
}
.checkout-card-section .qty-num {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
}
.checkout-card-section .qty-num label {
    font-family: var(--theme-font);
    font-weight: 400;
    font-size: 14px;
}
.checkout-card-section .qty-num input {
    width: 50px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}
.checkout-card-section .qty-price {
    font-family: var(--theme-font);
    font-weight: 600;
    margin-left: inherit;
    font-size: 20px;
}
.checkout-card-section .card-action{
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    min-height: 20px;
    align-items: center;
}
.checkout-card-section .card-action a {
    font-family: var(--theme-font);
    color: var(--theme-color-sky);
    margin-right: 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}
.checkout-card-section .card-action a:hover {
  text-decoration: underline;
}
.checkout-card-section .cart-summary {
    background-color: #F6F6F6;
    padding: 20px;
    gap: 20px;
    border-radius: 20px;
    border: none;
}
.checkout-card-section .cart-summary-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkout-card-section .summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.checkout-card-section .summary-row.total {
    font-family: var(--theme-font);
    font-weight: 600;
    font-size: 20px;
}
.checkout-card-section .checkout-btn {
  margin-top: 20px;
  padding: 12px 0;
  border: none;
  background-color: var(--theme-color-dark);
  color: var(--theme-color-white);
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
}
.checkout-card-section .secure-msg {
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
.checkout-card-section .custom-hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ECEAE7;
    margin: 25px 0px;
}
.ship-box {
    gap: 16px;
    display: flex;
    flex-direction: column;
}
.gap3{
    gap: 3px;
}
.ship-text h4{
    font-size: 20px;
    font-weight: 700;
    margin: 0px;
}
.ship-details p {
    font-size: 16px;
    font-weight: 400;
    margin: 0px;
    line-height: 30px;
}
.checkout-action a{
    font-size: 16px;
    font-weight: 500;
    color: var(--theme-color-sky);
    cursor: pointer;
}
.coupon-section {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0;
}
.coupon-input {
    padding: 10px 15px;
    border: 2px solid #BABABA;
    border-radius: 5px;
    font-size: 16px;
    min-width: 200px;
    outline: none;
}
.coupon-btn {
  padding: 10px 20px;
  background-color: var(--theme-color-dark);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}
.coupon-btn:hover {
  background-color: var(--theme-color-dark);
}
/* start change address model */
#changeAddressModal .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 0;
}
#changeAddressModal .address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#changeAddressModal .address-item {
    border-radius: 10px;
    padding: 16px 0px 16px 0px;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
}
#changeAddressModal .address-header {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}
#changeAddressModal .address-info {
  flex: 1;
}
#changeAddressModal .address-info p {
  margin: 2px 0;
  font-size: 0.9rem;
  color: #333;
}
.badge {
    background-color: #F6F6F6;
    border-radius: 25px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-color-dark);
}

#changeAddressModal .address-action {
  background: none;
  border: none;
  font-size: 34px;
  cursor: pointer;
}

#changeAddressModal .add-address-link {
    text-align: right;
    color: var(--theme-color-sky);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}
.tag-box{
    margin-bottom: 16px;
}
.cus-modal-close {
    position: absolute;
    top: 32px;
    right: 20px;
    padding: 3px 11px;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    background-color: var(--theme-color-dark);
    color: var(--theme-color-white);
}
/*========== dropdown =========*/
.dropdown ul {
    display: none;
    position: absolute;
    right: 0;
    background-color: #F4F4F4;
    min-width: 160px;
    box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 13%);
    z-index: 1;
    padding-left: 0;
    border-radius: 5px;
    margin: 0;
}
.dropdown.show ul{
    display: block;
}
.dropdown ul li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown ul li:hover {
    background-color: #f1f1f1;
}
.dropdown ul li a {
    color: #131619;
    cursor: pointer;
}
.full-vh-form{

}
.form-switch{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-black {
    background-color: var(--theme-color-dark);
    color: var(--theme-color-white);
    border: none;
    padding: 16px;
    border-radius: 25px;
}

/* end change address model */

/* start material from design */
input,
select,
textarea {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before{
  box-sizing: border-box;
}
.button-container {
  text-align: center;
}
fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}
.form-group {
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}
.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}
.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 1.9rem;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 1rem;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}
.form-group .control-label {
    position: absolute;
    top: 18px;
    left: 10px;
    pointer-events: none;
    padding-left: 0.125rem;
    z-index: 1;
    color: #707070;
    font-size: 12px;
    font-weight: 400;
    -webkit-transition: all 0.28s ease;
    transition: all 0.28s ease;
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input, 
.form-group textarea {
    display: block;
    background: none;
    padding: 40px 10px 12px 10px;
    font-size: 16px;
    border: 1px solid #ECEAE7;
    line-height: 1.9;
    width: 100%;
    color: #131619;
    -webkit-transition: all 0.28s ease;
    transition: all 0.28s ease;
    box-shadow: none;
    border-radius: 6px;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
    top: 4px;
    left: 9px;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #707070;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: #337ab7;
  border-color: #337ab7;
}
.radio label:hover .helper {
  color: #337ab7;
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #337ab7;
}

.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #337ab7;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}
.toggle-switch {
    display: block;
    position: relative;
    width: 41px;
    height: 24px;
}
    .toggle-input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-thumb {
      position: absolute;
      cursor: pointer;
      background-color: #e6e6e6;
      border-radius: 24px;
      width: 100%;
      height: 100%;
      transition: background-color 0.3s;
    }
    .toggle-thumb::before {
      content: "";
      position: absolute;
      height: 20px;
      width: 20px;
      left: 2px;
      top: 2px;
      background-color: #111;
      border-radius: 50%;
      transition: transform 0.3s;
    }
    .toggle-input:checked + .toggle-thumb::before {
      transform: translateX(17px);
    }
    .toggle-input:checked + .toggle-thumb {
      background-color: #ccc;
    }

/* end material from design */
/* responsive cart */
@media (min-width: 768px) {
.checkout-action a.mob{
        display: none;
    }
    .desk-none{
        display: none !important;
    }
    .form-input-box{
      margin-bottom: 15px;
    }
}
@media (max-width: 767px) {
    .checkout-card-section .row:nth-child(1) {
    order: 1;
  }

  .checkout-card-section .row:nth-child(2) {
    order: 3;
  }

  .checkout-card-section .row:nth-child(3) {
    order: 2;
  }
  .checkout-card-section .container {
    display: flex;
    flex-direction: column;
  }

    .checkout-action a.desk{
        display: none;
    }
    .checkout-action a.mob{
        padding: 15px;
    }
.checkout-card-section {
    padding: 16px 0px;
}
.checkout-card-section .cart-row{
    flex-direction: column;
}
.checkout-card-section .cart-card {
    gap: 15px;
    padding: 0 0px 15px 0px;
    border: none;
    border-bottom: 1px solid #ECEAE7;
    border-radius: 0;
}
.checkout-card-section .cart-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.checkout-card-section .qty-details{
    flex-direction: column;
    gap: 12px;
}
.checkout-card-section .qty-price {
    font-weight: 500;
    margin-left: inherit;
    font-size: 16px;
}
.checkout-card-section .cart-details h4{
    margin-bottom: 0
}
.checkout-card-section .card-action a{
    text-wrap-mode: nowrap;
}
.checkout-card-section .cart-summary {
    background-color: #ffffff;
    padding: 0;
    border-radius: 0px;
}
.ship-details{
    display: flex;
    align-items: center;
    gap: 15px;
}
.coupon-section {
    margin: 20px 0 0px;
}
/* this only for cuppon toggle in mobile */
.toggle-details, .show-mobile { display: none; }
.toggle-details.active, .show-mobile.active { display: block; }
.mob-toggle {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
.mob-toggle a{
    padding: 0px 15px;
}
 .toggle-details {
    display: none;
    overflow: hidden;
  }

  .toggle-details.active {
    display: block;
    animation: slideDown 0.4s ease forwards;
  }

  .toggle-details.removing {
    animation: slideUp 0.4s ease forwards;
  }

  @keyframes slideDown {
    0% {
      opacity: 0;
      transform: scaleY(0);
    }
    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  @keyframes slideUp {
    0% {
      opacity: 1;
      transform: scaleY(1);
    }
    100% {
      opacity: 0;
      transform: scaleY(0);
    }
  }

  .toggle-details {
    transform-origin: top;
  }
    .mobile-modal-content {
        height: 100%;
        max-height: 100%;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        overflow: auto;
    }
  .btn-black.position {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 15px;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
  }
}


/* ================== ================== 
================== ================== 
        CHECKOUT PAGE STYLE END 
================== ================== 
================== ==================  */

/* ================== ================== 
================== ================== 
    PRODUCT DETAILS PAGE STYLE START 
================== ================== 
================== ==================  */
.bg-card-details{
    padding:50px 15px;
}
.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
}
.slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}
.slider-track img {
    width: 100%;
    flex-shrink: 0;
}
.product-thumb {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    gap: 8px;
}
.product-thumb img {
    width: 70px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
    border-radius: 9px;
    padding: 8px;
}
.product-thumb img.active {
    opacity: 1;
    border: 2px solid #333;
}
/* end slider section */
.form-select {
    width: 100%;
    padding: 15px;
    background-color: var(--theme-color-white);
    border: 1px solid #ECEAE7;
    border-radius: 5px;
    min-height: 60px;
}
select.form-select {
    appearance: none;          
    -webkit-appearance: none;  
    -moz-appearance: none;      

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.012 2.33 4 3.204 4h9.592c.873 0 1.318 1.012.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center; 
    background-size: 1rem;
    padding-right: 3rem; 
}
select.form-select:focus-visible{
  outline: none;
}
.btn-dark {
  background-color: var(--theme-color-dark);
  color: var(--theme-color-white);
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  height: 60px;
}
.btn-dark-border{
  background-color: var(--theme-color-white);
  color: #131619;
    padding: 16px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  height: 60px;
}
.radious-50{
  border-radius: 50px;
}
.product-title{
  font-size: 40px;
  font-weight: 500;
}
.price-stock {
    display: flex;
    justify-content: space-between;
    align-items: center;
        padding-bottom: 20px;
}
.price-stock>h4{
    font-size: 40px;
    font-weight: 500;
    margin: 0px;
}
.inStock {
    color: #22AA46;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #22AA46;
}
.outStock{
    color: #ff0000;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #ff0000;
}
.condation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
    border-top: 1px solid #ECEAE7;
    padding: 20px 0px;
} 
.condation>a {
    color: var(--theme-color-dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}
.condation>h4 {
    margin: 7px 0px;
    font-weight: 300;
    font-size: 16px;
}
.qty-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-details .badge {
    background-color: #F6F6F6;
    border-radius: 7px;
    padding: 12px 12px;
    color: var(--theme-color-dark);
    margin-top: 20px;
}
.product-details .badge>h4 {
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.product-details .badge>h4>img{
    background-color: var(--theme-color-white);
    padding: 12px;
    border-radius: 50px;
}
.product-details-box {
    border: 1px solid #ECEAE7;
    border-radius: 8px;
    padding: 16px;
    max-width: 800px;
    margin: auto;
    background-color: var(--theme-color-white);
    margin-top: 20px;
}
.product-details-box .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ECEAE7;
}
.product-details-box .tags span {
  background: #f6f6f6;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 14px;
  color: #333;
}
.product-details-box .card-details {
  display: none;
  transition: all 0.3s ease;
  margin-top: 10px;
}
.product-details-box .card-details p {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-details-box .card-details.open {
  display: block;
}
.product-details-box .label {}
#toggleDetails {
    background: none;
    border: none;
    color: var(--theme-color-dark);
    font-weight: 400;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    width: 100%;
}
.text-green{
    color: #22AA46;
    font-size: 16px;
    font-weight: 600;
}
.box-title>h4{

}
.similer-product-section {
    padding: 20px 50px 50px 50px;
}
.similer-product-section .card-details {
    padding: 0px 0px;
}
.similer-product-list .codlyt-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 15px;
}
.similer-product-list .card-header {
    padding: 25px;
}

/* responsive start */
@media (max-width: 767px) {
    .bg-card-details { padding: 50px 0px;}
    .product-title { font-size: 20px; }
    .similer-product-section {
        padding: 0px 0px 50px 0px;
    }
    .similer-product-list{
        margin-top:25px;
    }
    .price-stock>h4{
        font-size:25px;
    }
    .similer-product-list .codlyt-track {
        display: flex !important;
    }
    .similer-product-list > button{
        display: none !important;
    }
}
/* ================== ================== 
================== ================== 
    PRODUCT DETAILS PAGE STYLE END 
================== ================== 
================== ==================  */