@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');  

:root {  
    --primary-color: #1e4258;  
    --secondary-color: #2a9d8f;  
    --accent-color: #e9c46a;  
    --text-color: #2d3436;  
    --light-bg: #f5f6fa;  
}  

body {  
    font-family: 'Tajawal', sans-serif;  
    background-color: var(--light-bg);  
    color: var(--text-color);  
    line-height: 1.6;  
}  

.arabic-title {  
    font-family: 'Amiri', serif;  
    font-weight: 700;  
}  

.navbar {  
    background-color: var(--primary-color) !important;  
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  
}  

.hero-section {  
    background: linear-gradient(rgba(30, 66, 88, 0.8), rgba(30, 66, 88, 0.9)),  
                url('../images/court-bg.jpg');  
    background-size: cover;  
    background-position: center;  
    color: white;  
    padding: 120px 0;  
}  

.card {  
    border: none;  
    border-radius: 15px;  
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);  
    transition: transform 0.3s ease;  
}  

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

.btn-primary {  
    background-color: var(--secondary-color);  
    border: none;  
    padding: 10px 25px;  
    border-radius: 8px;  
}  

.btn-primary:hover {  
    background-color: #248277;  
}