/* ================= SOCIAL BOX ================= */

.social-box {
    background: #1d513b;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 13px 24px rgba(153,157,160,.32);
    margin-bottom: 50px;
    border: 1px solid #ccc;
	margin: 15px;
}

.social-box h2 {
    font-size: 20px;
    font-family: 'YearCamel';
    text-align: center; color: #fff; font-size: 25px; width:100%; color:#fff;
}

.social-box .price {
    font-size: 35px;
    font-weight: bold; text-align: center;
}

.social-box .package-desc,
.social-box .pack-qty,
.social-box .size,
.social-box .pixel {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.social-box .pack-content {
    min-height: 175px;
    font-size: 15px;
    padding: 20px 0;
    text-align: right;
    direction: rtl;
}

.order-now {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
}

.order-now button {
    background: #fff;
    color: #1d513b;
    border: none;
    font-size: 18px;cursor: pointer;
}

/* ================= CART ================= */

#cart {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 25px;
    width: 100%;
}

.cart-table {
    width: 100%;
    font-size: 18px;
    text-align: center;
}

.item-name,
.item-price,
.item-qty,
.item-remove {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

.item-name { width: 50%; }
.item-price { width: 30%; }
.item-qty { width: 20%; }
.item-remove { width: 10%; }

.item-qty input { width: 60px; }
.remove-icon { width: 20px !important; cursor: pointer; }

.table-header td {
    background: #1f513d;
    color: #fff;
}

.cart-title {
    font-size: 25px;
    color: #1f513d;
    padding-bottom: 20px;
    text-align: right;
}

.checkout-btn {
    display: block;
    background: #1f513d;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    width: 130px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    float: left;
}

.checkout-btn:hover { color: #fff; }

/* ================= PAYMENT ================= */

.payment-container {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

.form-group { margin-bottom: 15px; }

label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    direction: ltr;
}

.expiry-cvv {
    display: flex;
    gap: 10px;
}

.btn {
    width: 100%;
    padding: 12px;
    background: #28a745;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
}

.btn:hover { background: #218838; }

 /* Center the progress bar */
        .progress-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 30px auto;
            width: 80%;
            position: relative;
        }

        /* The progress line */
        .progress-line {
            flex-grow: 1;
            height: 4px;
            background-color: #ddd;
            position: relative;
            margin: 0 10px;
        }

        /* Progress Steps */
        .step-wrapper {
            text-align: center;
            position: relative;
            width: 75px;
        }

        .step {
            width: 40px;
            height: 40px;
            background: #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            color: #666;
            margin: 0 auto;
        }

        /* Highlight current step */
        .step.active {
            background: #28a745;
            color: #fff;
        }

        /* Completed steps */
        .step.completed {
            background: #1f513d;
            color: #fff;
        }

        /* Step Labels */
        .step-label {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }

        /* Connecting line */
        .progress-line::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #ddd;
            z-index: -1;
        }

        /* Adjust line color based on progress */
        .completed + .progress-line::before {
            background-color: #007bff;
        }
.home-section { width:100%; text-align: center;}




	.cart-about { padding-top: 35px;}
	.page-content { margin-top: 35px; margin-bottom: 35px; direction: rtl}
	.page-content img { width:90%; margin-left: auto; margin-right: auto;}
	.cart-title { font-size: 25px; color:#1f513d; padding-bottom: 20px;}
	.order-field { border-radius: 4px; border:1px solid #333; width:100%; padding: 15px}
	.order-text { border-radius: 4px; border:1px solid #333;; width:100%; padding: 5px}
	
	.field-text { padding: 5px;}
	
	.order-btn { border-radius: 4px; background-color:#1f513d; padding: 5px; color:#fff; }