/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    background-color: #fcf8f9;
    color: #1b1b1c;
    overflow-x: hidden;
}

/* === Material Icons === */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* === Navigation === */
.glass-nav {
    background: rgba(252, 248, 249, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* === Hero === */
.hero-gradient {
    background: radial-gradient(circle at 70% 30%, rgba(204, 222, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(146, 65, 123, 0.1) 0%, transparent 50%);
}

.curved-edge {
    border-radius: 40px;
}

/* === Bento Grid === */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* === Glass Card === */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* === Schedule Cards === */
.schedule-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px -10px rgba(146, 65, 123, 0.15);
}

/* === Scrollbar Hide === */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* === Custom Animations === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* === Utility === */
.transition-all-300 {
    transition: all 0.3s ease;
}

.transition-all-500 {
    transition: all 0.5s ease;
}

.transition-all-700 {
    transition: all 0.7s ease;
}

.scale-95 {
    transform: scale(0.95);
}

.scale-90 {
    transform: scale(0.9);
}

/* === Ripple Effect for Buttons === */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: rippleAnim 0.8s linear forwards;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Vertical writing mode for RTL */
.writing-mode-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Smooth animation for the pulse */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Glassmorphism effect for the social container */
.bg-surface-container\/90 {
    background-color: rgba(var(--surface-container-rgb), 0.9);
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}