/*
|--------------------------------------------------------------------------
| ملف التحكم بشكل صفحة الهبوط الجديدة - TS TS
|--------------------------------------------------------------------------
| عدّل القيم الموجودة داخل :root فقط.
| بعد أي تعديل نفّذ:
| cd /var/www/tostos && php8.4 artisan optimize:clear && systemctl reload php8.4-fpm
|--------------------------------------------------------------------------
*/

:root {
    /* =========================
       ألوان الهوية الأساسية
       ========================= */

    --tos-theme-primary: #36788d;             /* اللون الأساسي للأزرار وبعض العناصر */
    --tos-theme-primary-dark: #05485d;        /* اللون الداكن للعناوين والنصوص المهمة */
    --tos-theme-light: #cdefed;               /* اللون الفاتح للخلفيات الهادئة */


    /* =========================
       خلفيات الصفحة والأقسام
       ========================= */

    --tos-body-bg: #ffffff;                   /* خلفية الصفحة العامة */
    --tos-header-bg: #97c7c5;                 /* خلفية الهيدر العلوي */
    --tos-footer-bg: #569c98;                 /* خلفية الفوتر */
    --tos-section-light-bg: #cdefed;          /* خلفية قسم خدمات تُس تُس */
    --tos-card-bg: #ffffff;                   /* خلفية الكروت والبطاقات */


    /* =========================
       ألوان النصوص
       ========================= */

    --tos-heading-color: #05485d;             /* لون العناوين الرئيسية */
    --tos-body-text-color: #31596a;           /* لون النصوص والوصف */
    --tos-footer-text-color: #111111;         /* لون نصوص الفوتر */
    --tos-header-link-color: #05485d;         /* لون روابط الهيدر */
    --tos-header-link-hover-color: #36788d;   /* لون روابط الهيدر عند تمرير الماوس */


    /* =========================
       طبقة التعتيم فوق السلايدر العلوي
       ========================= */

    --tos-hero-overlay-start: rgba(7, 20, 45, 0.38);  /* بداية التعتيم فوق صورة السلايدر */
    --tos-hero-overlay-end: rgba(7, 20, 45, 0.68);    /* نهاية التعتيم فوق صورة السلايدر */


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

    --tos-button-bg: #4d43ff;                 /* لون الزر الأساسي */
    --tos-button-hover-bg: #36788d;           /* لون الزر عند تمرير الماوس أو الضغط */
    --tos-button-text: #ffffff;               /* لون كتابة الزر */


    /* =========================
       أحجام الخطوط
       ========================= */

    --tos-hero-title-size: clamp(30px, 3.3vw, 48px);       /* حجم عنوان السلايدر العلوي */
    --tos-section-title-size: clamp(26px, 2.5vw, 38px);    /* حجم عناوين الأقسام */
    --tos-card-title-size: 22px;                           /* حجم عنوان الكرت */
    --tos-body-font-size: 16px;                            /* حجم النصوص العادية */
    --tos-footer-title-size: 21px;                         /* حجم عناوين الفوتر مثل اتصل بنا */


    /* =========================
       شكل الكروت
       ========================= */

    --tos-card-radius: 24px;                              /* تدوير زوايا الكروت */
    --tos-card-border-color: rgba(5, 72, 93, 0.12);       /* لون حدود الكروت */
    --tos-card-shadow: 0 18px 50px rgba(5, 72, 93, 0.08); /* ظل الكروت، اجعله none لإزالته */


    /* =========================
       صورة سلايدر خدمات تُس تُس
       ========================= */

    --tos-feature-image-width: 330px;       /* عرض صورة قسم خدمات تُس تُس */
    --tos-feature-image-height: 230px;      /* ارتفاع صورة قسم خدمات تُس تُس */
    --tos-feature-card-min-height: 310px;   /* أقل ارتفاع لكرت خدمات تُس تُس */


    /* =========================
       المسافات
       ========================= */

    --tos-section-padding-y: 70px;          /* المسافة العمودية داخل الأقسام */
    --tos-carousel-side-padding: 32px;      /* المسافة الجانبية حول السلايدرز */
}

/* =========================
   تطبيق القيم على الصفحة
   لا تعدّل ما بعد هذا السطر عادة
   ========================= */

html body {
    background: var(--tos-body-bg) !important;
    color: var(--tos-body-text-color) !important;
    font-size: var(--tos-body-font-size) !important;
}

/* الهيدر */
.tos-header {
    background: var(--tos-header-bg) !important;
}

.tos-nav a {
    color: var(--tos-header-link-color) !important;
}

.tos-nav a:hover {
    color: var(--tos-header-link-hover-color) !important;
}

/* السلايدر العلوي */
.tos-hero::before {
    background: linear-gradient(
        90deg,
        var(--tos-hero-overlay-start),
        var(--tos-hero-overlay-end)
    ) !important;
}

.tos-hero-content h1 {
    font-size: var(--tos-hero-title-size) !important;
}

/* العناوين */
.tos-section-title h2,
.tos-about-content h2,
.tos-provider-cta h2,
.tos-newsletter h2 {
    color: var(--tos-heading-color) !important;
    font-size: var(--tos-section-title-size) !important;
}

.tos-download-card h3,
.tos-category-card h3,
.tos-testimonial-card h3,
.tos-feature-card h3 {
    color: var(--tos-heading-color) !important;
    font-size: var(--tos-card-title-size) !important;
}

.tos-download-card p,
.tos-testimonial-card p,
.tos-about-content p,
.tos-provider-cta p,
.tos-newsletter p,
.tos-feature-card p {
    color: var(--tos-body-text-color) !important;
    font-size: var(--tos-body-font-size) !important;
}

/* الأزرار */
.tos-btn,
.tos-newsletter button {
    background: var(--tos-button-bg) !important;
    color: var(--tos-button-text) !important;
}

.tos-btn:hover,
.tos-btn:focus,
.tos-btn:active,
.tos-newsletter button:hover,
.tos-newsletter button:focus,
.tos-newsletter button:active {
    background: var(--tos-button-hover-bg) !important;
    color: var(--tos-button-text) !important;
}

/* الكروت */
.tos-download-card,
.tos-category-card,
.tos-testimonial-card,
.tos-feature-card {
    background: var(--tos-card-bg) !important;
    border-color: var(--tos-card-border-color) !important;
    border-radius: var(--tos-card-radius) !important;
    box-shadow: var(--tos-card-shadow) !important;
}

/* قسم خدمات تُس تُس */
.tos-feature {
    background: var(--tos-section-light-bg) !important;
}

.tos-feature-slider .tos-feature-card {
    grid-template-columns: var(--tos-feature-image-width) 1fr !important;
    min-height: var(--tos-feature-card-min-height) !important;
    background: var(--tos-card-bg) !important;
}

.tos-feature-slider .tos-feature-card img {
    width: 100% !important;
    max-width: var(--tos-feature-image-width) !important;
    height: var(--tos-feature-image-height) !important;
    object-fit: cover !important;
}

.tos-feature-slider .tos-feature-card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* مسافات الأقسام */
.tos-downloads,
.tos-categories,
.tos-feature,
.tos-testimonials {
    padding-top: var(--tos-section-padding-y) !important;
    padding-bottom: var(--tos-section-padding-y) !important;
}

.tos-carousel-viewport {
    padding-inline: var(--tos-carousel-side-padding) !important;
}

/* الفوتر */
.tos-footer {
    background: var(--tos-footer-bg) !important;
    color: var(--tos-footer-text-color) !important;
}

.tos-footer h3,
.tos-footer h4 {
    color: var(--tos-footer-text-color) !important;
    font-size: var(--tos-footer-title-size) !important;
}

.tos-footer a,
.tos-footer p,
.tos-footer-bottom {
    color: var(--tos-footer-text-color) !important;
}

/* الموبايل */
@media (max-width: 991px) {
    .tos-feature-slider .tos-feature-card {
        grid-template-columns: 1fr !important;
    }

    .tos-feature-slider .tos-feature-card img {
        max-width: 100% !important;
        width: 100% !important;
        height: 260px !important;
    }
}