/* Reset بسيط */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* عام */
body {
font-family: Arial, sans-serif;
color: #333;
background: #fff;
}
/* الهيدر */
header {
background: #851216;
padding: 10px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header nav a {
color: white;
margin-right: 20px;
text-decoration: none;
font-weight: bold;
}
header .logo {
color: white;
font-size: 22px;
font-weight: bold;
}
/* ساسكشن هيرو */
.hero {
background: #000;
color: white;
padding: 80px 0;
text-align: center;
}
.hero .btn {
background: #851216;
color: #fff;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
font-weight: bold;
}
/* قسم الخدمات */
.services {
padding: 50px 0;
}
.services h2 {
text-align: center;
margin-bottom: 30px;
}
.services .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.services .card {
background: #f2f2f2;
padding: 20px;
text-align: center;
font-size: 18px;
font-weight: bold;
}
/* الفوتر */
footer {
background: #000;
color: #fff;
padding: 15px 0;
text-align: center;
}
/* التعديلات لتصميم Responsive */
@media (max-width: 768px) {
header .container {
flex-direction: column;
align-items: flex-start;
}
header nav {
margin-top: 15px;
}
.hero {
padding: 60px 0;
}
.services .grid {
grid-template-columns: 1fr;
}
.services .card {
font-size: 16px;
}
.btn {
font-size: 16px;
}
}
/* تصميم للجوال */
@media (max-width: 480px) {
header .logo {
font-size: 18px;
}
.hero h1 {
font-size: 28px;
}
.services h2 {
font-size: 22px;
}
.btn {
padding: 8px 16px;
}
}