@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1280px;
        }
        .card {
            background-color: white;
            border-radius: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
        }
        .nav-link {
            position: relative;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        .nav-link.active {
            transform: translateY(-5px);
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%) translateY(0);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #ef4444; /* red-500 from Tailwind */
        }

        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f0f4f8;
        }
        .container {
            max-width: 1280px;
        }
        .nav-link {
            position: relative;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        .nav-link.active {
            transform: translateY(-5px);
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%) translateY(0);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #ef4444; /* red-500 from Tailwind */
        }
        .auction-card {
            background-color: white;
            border-radius: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }
        .auction-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 1rem;
            margin-bottom: 1rem;
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 50;
        }
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            max-width: 500px;
            width: 90%;
            position: relative;
        }
        /* Hide the number input spinners for all browsers */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
     
        input[type="number"] {
  -moz-appearance: textfield;
  /* أضف هذا السطر ليعمل على المتصفحات الأخرى */
  appearance: textfield;
}


/* هذا خاص بصفحة أعمالنا */



.project-section {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.project-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(17, 54, 122, 0.2);
}
/* Style to ensure iframe fits well */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}
.aspect-w-16 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* هذا خاص بصفحة من نحن*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 1s ease-out;
}


.auction-image {
  width: 100%;
  height: 320px; /* أو أي حجم تريده بالبكسل */
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}