@font-face {
  font-family: "alarabiya";
  src: url("../fonts/alarabiyaBoutros2020-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "alarabiya";
  src: url("../fonts/alarabiyaBoutros2020-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "alarabiya";
  src: url("../fonts/alarabiyaBoutros2020-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


@font-face {
  font-family: "Noto Naskh Arabic Bold";
  src: url("../fonts/NotoNaskhArabic-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* Make the pagination container transparent */
.pagination {
    background: transparent; /* Entire div is now transparent */
    box-shadow: none; /* No shadow on the container */
    padding: 0.5rem 1rem;
    border-radius: 8px;
    /* You might want to add some margin or padding here if needed for layout */
}

/* Style the page links (buttons) with gradient and shadow */
.page-link {
    display: inline-flex; /* To center content if needed */
    align-items: center;
    justify-content: center;
    min-width: 36px; /* Ensure a minimum size for touch targets */
    height: 36px;
    margin: 0 4px; /* Space between buttons */
    padding: 0 12px; /* Horizontal padding for text */
    border-radius: 6px; /* Rounded corners for buttons */
    background: linear-gradient(135deg, var(--primary-color), #e0e0e0); /* Updated gradient background for buttons */
    color: #fff; /* Text color for links */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Shadow for buttons */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Remove underline */
    font-weight: 500;
}

/* Hover and focus effects for links */
.page-link:hover,
.page-link:focus {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), #000000); /* Slightly darker gradient on hover/focus */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* More pronounced shadow on hover/focus */
    transform: translateY(-2px); /* Lift effect */
    color: #fff; /* Keep text white */
}
.bg-light {
    background-color: #e0e0e0 !important;
}
.mnory-bg{
        background: linear-gradient(135deg, #e0e0e0, #000, #007aff) !important;
}
/* Style for active page item */
.page-item.active .page-link {
    background: #fff; /* Solid white background for active button */
    color: var(--primary-color, #ffffff); /* Text color changes to primary color */
    border: 2px solid var(--primary-color, #ffffffff); /* Border to match primary color */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); /* Inset shadow for active state */
    transform: translateY(0); /* Reset transform for active state */
    pointer-events: none; /* Active link is not clickable */
}

/* Style for disabled items */
.page-item.disabled .page-link {
    background: #cccccc; /* Grey background for disabled */
    color: #666666; /* Darker text for disabled */
    box-shadow: none; /* No shadow for disabled */
    cursor: not-allowed;
    opacity: 0.7; /* Slightly transparent */
    transform: none; /* No transform for disabled */
    pointer-events: none; /* Ensure it's not clickable */
}

/* Optional: hover effect for page items (if you want a subtle effect on the item itself, not just the link) */
.page-item:not(.disabled):hover .page-link {
    /* This rule is redundant if .page-link:hover covers it, but can be used for specific item-level effects */
}

/* Flexbox for the pagination list to align items */
.pagination-list {
    display: flex;
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center; /* Center the pagination links */
}

body {
    font-family: 'alarabiya' !important;
    background-color: #e0e0e0 !important; /* Off-white */
}
.footer-color {
    background-color: #000000 !important;
}
.navbar-brand {
    font-weight: 700;
    color: #000000; /* Dark blue */
}
accordion-button:not(.collapsed) {
  color: #ffffff !important;
  background-color:#000000 !important;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 #e0e0e0 !important;
}
.navbar-brand:hover {
    color: #e0e0e0; /* Teal accent */
}
button {
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.2s ease-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Pressed in effect */
    transform: translateY(0); /* Return to original position */
}
.footer {
    background-color: #000000;
    color: white;
    padding: 20px 0;
}
.swiper-wrapper {
    height: fit-content !important;
}
.product-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
    background-color: #ffffff;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 250px;
    object-fit: cover;
    width: 100%;
}

.product-card .card-body {
    padding: 15px;
}

.product-card .card-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 5px;
}

.product-card .price {
    font-size: 1.2em;
    font-weight: 700;
    color: #FF6B35; /* Orange accent for current price */
}

.product-card .old-price {
    font-size: 0.9em;
    color: #dc3545;
    text-decoration: line-through;
    margin-left: 10px;
}

.badge-flag {
    font-size: 0.75em;
    padding: 0.3em 0.6em;
    border-radius: 0.5rem;
    margin-right: 5px;
    font-weight: 500;
}

.badge-bestseller {
    background-color: #FF6B35; /* Orange */
    color: #ffffff;
}
.badge-new-arrival {
    background-color: #e0e0e0; /* Teal */
    color: white;
}
.badge-on-sale {
    background-color: #dc3545;
    color: white;
}
.badge-featured {
    background-color: #6C8CD5; /* Soft secondary blue */
    color: white;
}

.product-detail-swiper .swiper-slide img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    border-radius: 10px;
}

.product-detail-thumbs .swiper-slide img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.product-detail-thumbs .swiper-slide-thumb-active img {
    border-color: #000000; /* Dark blue */
}

.swiper-button-next,
.swiper-button-prev {
    color: #000000 !important; /* Dark blue */
}

.swiper-pagination-bullet-active {
    background: #000000 !important;
}

.filter-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-section .form-check-label {
    cursor: pointer;
}

.filter-section h5 {
    margin-bottom: 15px;
    font-weight: 600;
    color: #000000; /* Dark blue */
}

.category-list .list-group-item {
    border: none;
    padding: 8px 0;
    font-weight: 500;
    color: #495057;
}

.category-list .list-group-item:hover {
    color: #000000;
    background-color: #e9ecef;
    border-radius: 5px;
}

.category-list .list-group-item.active {
    background-color: #000000;
    color: white;
    border-radius: 5px;
}

.category-list .list-group-item i {
    margin-right: 8px;
}

.size-buttons .btn {
    margin: 5px;
    border-radius: 8px;
    font-size: 0.9em;
    padding: 8px 15px;
}

.size-buttons .btn-outline-primary:hover {
    background-color: #000000;
    color: white;
}

.size-buttons .btn-primary {
    background-color: #000000;
    border-color: #000000;
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .product-detail-swiper .swiper-slide img {
        height: 300px;
    }
}

.product-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card .card-body .btn {
    align-self: flex-start;
}
.logo-mnory {
    height: auto;
    width: 117px !important;
}


.nav-item .badge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0.35em 0.6em;
    border-radius: 50%;
    font-size: 0.7em;
    background-color: #dc3545;
    color: white;
    transform: translate(50%, -50%);
}

.intro {
    background-image: url('../images/men.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.product-card .product-image.hover-img {
    opacity: 0;
    transition: opacity 0.3s ease;
    object-fit: cover;
}

.product-card:hover .product-image.hover-img {
    opacity: 1;
}

.product-card .product-image.default-img {
    transition: opacity 0.3s ease;
}