/* =========================
   DASAQ STUDIO — CUSTOM CSS
   ========================= */

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

/* الأساس */
body {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    background: #F7F5F1 !important;
    color: #24221F !important;
    direction: rtl;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    color: #24221F !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

/* النصوص */
p {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    color: #68635C !important;
    line-height: 1.9 !important;
}

/* الروابط */
a {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    transition: all 0.3s ease;
}

/* =========================
   HEADER
   ========================= */

header,
.zpheader,
.zpheader-container {
    background: #F7F5F1 !important;
}

.zpheader a {
    color: #24221F !important;
    font-size: 15px !important;
}

.zpheader a:hover {
    opacity: 0.55;
}

/* =========================
   الأزرار
   ========================= */

button,
.zpbutton,
.zpbutton-wrapper a {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
}

.zpbutton:hover,
.zpbutton-wrapper a:hover {
    transform: translateY(-2px);
}

/* =========================
   الأقسام
   ========================= */

.zpsection {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

/* =========================
   الصور
   ========================= */

img {
    max-width: 100%;
    height: auto;
}

.zpimage img {
    transition: transform 0.6s ease;
}

.zpimage img:hover {
    transform: scale(1.02);
}

/* =========================
   العناوين الكبيرة
   ========================= */

.zphero h1,
.zpsection h1 {
    font-size: clamp(40px, 6vw, 72px) !important;
    line-height: 1.2 !important;
}

/* =========================
   خلفيات هادئة
   ========================= */

.dasaq-dark {
    background: #24221F !important;
}

.dasaq-dark h1,
.dasaq-dark h2,
.dasaq-dark h3,
.dasaq-dark h4 {
    color: #FFFFFF !important;
}

.dasaq-dark p {
    color: #C8C4BD !important;
}

/* =========================
   بطاقات الخدمات
   ========================= */

.dasaq-card {
    background: #EBE8E2;
    padding: 35px;
    transition: all 0.3s ease;
}

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

/* =========================
   المشاريع
   ========================= */

.dasaq-project img {
    width: 100%;
    display: block;
    transition: transform 0.6s ease;
}

.dasaq-project:hover img {
    transform: scale(1.025);
}

/* =========================
   التذييل
   ========================= */

footer,
.zpfooter {
    background: #181715 !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: #FFFFFF !important;
}

footer p,
footer a,
.zpfooter p,
.zpfooter a {
    color: #AAA59D !important;
}

/* =========================
   الجوال
   ========================= */

@media screen and (max-width: 767px) {

    .zpsection {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .zphero h1,
    .zpsection h1 {
        font-size: 38px !important;
    }

    h2 {
        font-size: 32px !important;
    }

    h3 {
        font-size: 23px !important;
    }

    p {
        font-size: 16px !important;
    }

    .dasaq-card {
        padding: 25px;
    }
}