:root {
    --bg-color-900: #ECF5F4;
    --bg-color-700: #F7F8FA;
    --text-h-900: #545A70;
    --text-h-700: #535969;
    --text-a-700: #51566A;
    --text-small-h-100: #759590;
    --text-50: #B8B9CB;
}

/* Shopping Cart Start */
.shopping-cart-contant {
    margin-bottom: 15%;
}

.title-header {
    margin-bottom: 5px;
}

.title {
    padding-bottom: 0;
}

.shopping-cart-title {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #B8B9CB;
}

.shopping-title-60 {
    flex: 0 0 60%;
    width: 60%;
}

.shopping-title-30 {
    flex: 0 0 30%;
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.title-item {
    font-family: 'Raleway-700';
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
}

.title-price {
    font-family: 'Raleway-700';
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
}

.title-quantity {
    font-family: 'Raleway-700';
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
}

.title-total {
    font-family: 'Raleway-700';
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
}

/* Shopping Category */
.shopping-cart {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #B8B9CB;
}

.shopping-60 {
    flex: 0 0 60%;
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.shopping-40 {
    flex: 0 0 40%;
    width: 40%;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-img {
    width: auto;
    height: 100px;
}

.cart-title {
    letter-spacing: 0.5px;
    font-family: 'Raleway-700';
    font-size: 18px;
    margin-left: 25px;
}

.cart-price {
    font-family: sans-serif;
    color: var(--text-small-h-100);
    letter-spacing: 0.5px;
}

.cart-quantity {
    width: 60px;
    height: 30px;
    outline: none;
    text-align: center;
    font-family: sans-serif;
    color: var(--text-small-h-100);
    font-size: 16px;
    border: 1px solid var(--text-small-h-100);
    border-radius: 25px;
}

.cart-total {
    font-family: sans-serif;
    color: var(--text-small-h-100);
    letter-spacing: 0.5px;
}

.cart-delete {
    font-family: 'Roboto-900';
    color: var(--text-small-h-100);
    border: 1px solid var(--text-small-h-100);
    padding: 4px 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.5s ease;
}

.cart-delete:hover {
    color: var(--text-h-900);
    background: var(--text-small-h-100);
}

/* ==================                Shopping Cart Button ========== */

.shopping-cart-button {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 2%;
}

.shopCartBtn {
    padding: 15px 25px;
    text-transform: uppercase;
    font-family: 'Roboto-900';
    letter-spacing: 1px;
    font-size: 17px;
    background: #9EBCBE;
    border: none;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s;
}

.shopCartBtn:hover {
    color: var(--text-h-700);
}

.cartBtn {
    padding: 15px 25px;
    border: 1px solid #9EBCBE;
    border-radius: 25px;
    font-size: 17px;
    font-family: 'Roboto-900';
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-h-700);
    cursor: pointer;
    transition: all 0.5s;
}

.cartBtn:hover {
    background: #9EBCBE;
    color: #fff;
}

/* ============== Shopping All Calculate Section  ========= */
.shopping-total-section {
    display: flex;
    margin-top: 5%;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap;

}

.calculate-Shipping {
    flex: 0 0 33.33%;
    width: 33.33%;
    padding: 0 2%;
}

.coupon-code {
    flex: 0 0 33.33%;
    width: 33.33%;
    padding: 0 2%;
}

.shop-total {
    flex: 0 0 33.33%;
    width: 33.33%;
    padding: 0 2%;
    padding-top: 3%;
}

/* Shipping */
.section-heading {
    letter-spacing: 0.8px;
    font-size: 24px;
    font-family: 'Raleway-700';
    margin-bottom: 10%;
}

.cart-country-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

}

.cart-country-label {
    font-size: 17px;
    letter-spacing: 0.7px;
}

.shipping-cart {
    padding: 10px 15px;
    border: 1px solid var(--text-small-h-100);
    border-radius: 25px;
    width: 60%;
    font-size: 16px;
    color: var(--text-h-700);
    outline: none;
}

.shipping-cart:hover {
    border-radius: 25px;
}

.shipping-cart:focus {
    outline: none;
}

.centerBtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Coupon Section Strat */
#shipping-coupon {
    display: block;
    width: 100%;
    margin: 15px 0;
}

.shipbtn {
    border: none;
    background: #DDEBEB;
}

/* Total */

.sub-total-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 100%;
    width: 100%;
    padding: 5px 0;
    flex-wrap: wrap;
}

.sub-total-label {
    letter-spacing: 0.7px;
    font-family: 'Roboto-900';
    font-size: 17px;
}

.sub-price-amount {
    font-family: sans-serif;
    color: var(--text-small-h-100);
    letter-spacing: 0.5px;
}

.ship-sp {
    margin-bottom: 15px;
}

.grand-sp {
    margin-top: 15px;
}

.fulBtn {
    width: 100%;
    margin-top: 9%;
    margin-bottom: 4%;
}

.cart-tip {
    text-align: center;
    color: var(--text-small-h-100);
    font-weight: 600;
    letter-spacing: 0.7px;
}


/* Media Querie */
@media (max-width: 1030px) {
    .calculate-Shipping {
        flex: 0 0 50%;
        width: 50%;
    }

    .coupon-code {
        flex: 0 0 50%;
        width: 50%;
    }

    .shop-total {
        flex: 0 0 100%;
        width: 100%;
        text-align: center;

    }

    .fulBtn {
        width: 50%;
        margin-top: 4%;
        margin-bottom: 2%;
    }
}

@media (max-width: 900px) {

    .title-item {
        letter-spacing: 0px;
    }

    .title-price {
        letter-spacing: 0px;
    }

    .title-quantity {
        letter-spacing: 0px;
    }

    .title-total {
        letter-spacing: 0px;
    }
}

@media (max-width: 750px) {
    .shopping-cart-title {
        display: none;
    }

    .calculate-Shipping {
        flex: 0 0 100%;
        width: 100%;
    }

    .coupon-code {
        flex: 0 0 100%;
        width: 100%;
        margin: 5% 0;
    }

    .shopping-60 {
        flex: 0 0 100%;
        width: 100%;
    }

    .shopping-40 {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 15px;
    }

    .cart-img {
        width: auto;
        height: 150px;
    }

    .shopCartBtn {
        padding: 15px 20px;
        letter-spacing: 0.5px;
    }

    .cartBtn {
        padding: 15px 20px;
        letter-spacing: 0.5px;
    }


}

@media (max-width: 600px) {
    .clear-upd-btn {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .continue-btn {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    .fulBtn {
        width: 100%;
    }

    .shopCartBtn {
        letter-spacing: 1px;
        width: 100%;
    }
}












