body {
    font-family: 'Cairo', sans-serif;
}


.add-to-cart-modal-btn {
    background-color: #870E85; /* Theme color */
    color: white; /* Text and icon color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Pointer cursor for better UX */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Icon Styling */
.add-to-cart-modal-btn i {
    color: white; /* Icon color */
    margin-right: 8px; /* Space between icon and text */
}

/* Hover Effect */
.add-to-cart-modal-btn:hover {
    background-color: #6a0e67; /* Darker shade for hover effect */
}
.share-product-btn {
    background-color: #870E85; /* Button background color */
    color: white; /* Icon color */
    border: none; /* Remove border */
    border-radius: 50%; /* Perfectly round shape */
    width: 30px; /* Smaller width */
    height: 30px; /* Smaller height */
    display: inline-flex; /* Flexbox for centering the icon */
    align-items: center; /* Vertically center icon */
    justify-content: center; /* Horizontally center icon */
    padding: 0; /* No additional padding */
    font-size: 14px; /* Smaller icon size */
    line-height: 0; /* Prevent text line-height issues */
    cursor: pointer; /* Pointer cursor on hover */
    box-sizing: border-box; /* Include border and padding in width/height */
}

.share-product-btn:hover {
    background-color: #670C64; /* Slightly darker shade for hover effect */
}