@media (max-width: 1200px) {
    .full-cart > div {
        gap: 2rem;
    }

    .cart-cards-div {
        width: 70%;
    }

    .order-completion .checkout-cart {
        margin-right: 1rem;
    }
}

@media (max-width: 992px) {
    .order-completion .checkout-cart {
        margin-right: 0;
    }

    .d-flex.justify-content-between.flex-col {
        flex-direction: column;
    }

    .shop-section li {
        font-size: 18px;
    }

    .shop-section {
        gap: 1rem;
    }

    .checkout-box p {
        font-size: 20px;
    }

    .shop-section li {
        font-weight: 500;
        font-size: 14px;
        line-height: 14.72px;
    }

    .shop-section li:first-child,
    .order-completion .shop-section li:nth-child(3) {
        line-height: 14.72px;
        font-weight: 500;

    }

    .shop-section li svg {
        width: 32px;
        height: 32px;
    }

    .checkout-box {
        gap: 0.5rem;
    }

    .checkout-box span {
        padding: 40px;
    }

    .cart-cards-div {
        width: 100%;
    }

    .full-cart > div {
        flex-direction: column;
    }

    .checkout-cart {
        margin-top: 2rem;
        align-items: center;
    }

    .checkout-cart-price {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .cart-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
      "image info"
      "price price";
        gap: 12px;
        padding: 12px;
    }

    .cart-card img {
        grid-area: image;
        width: 100%;
        max-width: 163px;
        height: 163px;
        object-fit: cover;
    }


    .cart-info {
        grid-area: info;
    }

    .price-cart-div {
        grid-area: price;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-direction: row;
    }

    .checkout-box p {
        font-size: 16px;
        line-height: 32px;
    }

    .empty-cart-box h5 {
        font-weight: 700;
        font-size: 24px;
        line-height: 24px;
        color: #572D01;
    }

    .empty-cart-box p {
        color: #572D01;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .empty-cart-box {
        margin-bottom: 4rem;
    }

    .full-cart {
        margin-bottom: 4rem;
    }
}

@media (max-width: 576px) {
    .order-completion .cart-cards-div {
        margin-top: 2rem;
    }

    .back-to-cart {
        font-size: 24px;
    }

    .address-section button {
        width: 100%;
        justify-content: center;
        margin-top: 2rem;
        padding: 14px;
    }

    .address-section h6,
    .describe-order h6 {
        font-size: 24px;
    }

    .like-product-sec h5 {
        font-size: 16px;
    }

    .empty-cart-box {
        padding: 2rem;
        margin-top: 2rem;
    }

    .full-cart {
        margin-top: 2rem;
    }

    .shop-section li span {
        padding: 0.75rem;
    }

    .shop-section li svg {
        width: 16px;
        height: 16px;
    }

    .checkout-box span {
        padding: 1rem;
    }

    .checkout-box img {
        width: 16px;
        height: 16px;
    }

    .checkout-box {
        gap: 2.5rem;
        margin: 32px 0;
        width: 100%;
    }

    .shop-section {
        gap: 0rem;
    }

    .shop-section {
        margin: 1.25rem 0 0;
    }

    .checkout-box {
        gap: .75rem;
    }

    .checkout-box p {
        text-align: center;
    }

    .checkout-box p:nth-child(3) {
        font-size: 12px;
        line-height: 16px;
        text-align: center;
    }

    .shop-section li:first-child, .shop-section li:nth-child(3), .shop-section li:nth-child(5) {
        min-width: 80px !important;
        line-height: 24px !important;
    }

    .shop-section li:nth-child(2)::after, .shop-section li:nth-child(4)::after {
        transform: translateY(-16px) !important;
    }

    .cart-card h5 {
        font-size: 18px;
    }

    .cart-card img {
        grid-area: image;
        width: 163px;
        height: 163px;
    }

    .checkout-cart-price {
        width: 100%;
    }
    .address-popup {
        max-height: 90%;
        max-width: 90%;
        overflow-y: auto;
    }

    .address-popup.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }
    .popup-form .row {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .back-to-cart {
        font-size: 16px;
    }
    .no-address-sec button, .address-section button {
        padding:  14px;
        width: 100%;
    }

    .no-address-sec p {
        font-size: 24px;
        line-height: 24px;
    }

    .no-address-sec {
        gap: 1.5rem;
    }

    .address-section h6, .describe-order h6 {
        font-size: 20px;
    }

    .address-section ul li {
        font-weight: 300;
        font-size: 16px;
        line-height: 20px;
    }

    .describe-order textarea {
        font-size: 16px;
        line-height: 24px;
    }

    .checkout-error .main-btn {
        font-size: 12px;
    }

    .checkout-error .main-btn {
        max-width: 80%;
        font-size: 0.75rem;
    }

    .empty-cart-box h5 {
        font-weight: 700;
        font-size: 16px;
        line-height: 16px;
        color: #572D01;
    }

    .empty-cart-box p {
        color: #572D01;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
    }

    .empty-cart-box {
        padding: 2rem 1rem;
    }

    .price-box-cart {
        padding: 12px 5px;
    }

    .cart-card img {
        width: 119px;
        height: 137px;
    }

    .discount-box button {
        font-size: 18px;
    }

    .price-box-cart {
        font-size: 16px;

    }

}

@media (max-width: 324px) {
    .price-cart-div {
        flex-direction: column;
        align-items: center !important;
    }
}