@font-face {
    font-family: 'tajawal-regular';
    src: url('../font/tajawal-regular.woff') format('woff'), url('../font/tajawal-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.baloo-bhaijaan-2-regular {
    font-family: "Baloo Bhaijaan 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
/*
:root {
--background-color: #ecfafc;
--foreground-color: #666; 
--primary-color: #00603b; 
--primary2-color: #008145; 
--secondary-color: #f8b91e; 
--third-color: #ca6f12; /
--fourth-color: #008e82;
--fifth-color: #a3d6d1; 
--sixth-color: #004854; 
--font-regular: "Baloo Bhaijaan 2", tajawal-regular, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
*/
:root {
    --background-color: #f6f2eb; /* FDF9EF Or #FFF7E6 Or #fff0cf الخلفية الأساسية*/
    --foreground-color: #666; /* #333 Or #1C1C1C*/
    --primary-color: #004485; /*Dark Green #00603b Or #003c37 Or #4CAF50 يُستخدم للأزرار والعناوين المهمة، بديل أفتح لإبراز الحواف أو النقاط المهمة*/
    --primary2-color: #aa7b37; /*Other green*/
    --secondary-color: #76521f; /*Yellow لأزرار التسجيل أو تنبيهات إيجابية*/
    --third-color: #c19e6b; /*Orange-Red يستخدم للتمييز أو نداءات الإجراء Call to action*/
    --fourth-color: #003261; /*Tirequaze  لون التظليل أو الأشرطة */
    /*--fifth-color: #a3d6d1; Sky blue لمسة صيفية ممتعة*/
    /*--sixth-color: #004854;  dar green*/
    --font-regular: "Baloo Bhaijaan 2", tajawal-regular, system-ui, -apple-system,"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/*#region ----Bootstrap Color */
.btn-primary, .btn-primary:active, .btn-primary:visited {
    color: #fff !important;
    background-color: var(--primary-color);
    border: 2px solid var(--primary2-color);
    font-weight: 400;
    font-size: 16pt;
}
    .btn-primary:hover {
        color: #fff !important;
        background-color: var(--secondary-color);
        border: 2px solid var(--secondary-color );
        font-weight: normal;
    }

    .btn-primary:focus,
    .btn-primary.focus {
        color: #fff !important;
        background-color: var(--primary-color);
        border: 2px solid var(--primary2-color);
        font-weight: 400;
        font-size: 16pt;
    }

.btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary:visited {
    color: var(--primary-color) !important;
    background-color: #fff;
    border-color: var(--primary-color);
    font-weight: normal;
}

    .btn-outline-primary:hover {
        color: #fff !important;
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        font-weight: normal;
    }

/*#endregion */
/*#region ----General */
body {
    font-family: var(--font-regular);
    background: var(--background-color);
    color: var(--foreground-color);
    font-size: 14pt;
}

h1 {
    color: var(--primary-color) !important;
    font-weight:600;
}
h2, h3, h4, h5, h6 {
    color: var(--primary2-color) !important;
}
a {
    color: var(--third-color) !important;
    text-decoration: none;
    font-weight: 400;
    font-size: 13pt;
}
    a:hover {
        color: var(--secondary-color) !important;
        font-weight: 400;
    }
    a.active {
        color: #fff !important;
        font-weight: 400;
    }
.primary-color {
    color: var(--primary-color) !important;
}
.primary2-bg {
    color: var(--primary2-color);
}
.third-border {
    border-color: var(--third-color) !important;
}
.secondary-color {
    color: var(--secondary-color) !important;
}
.third-color {
    color: var(--third-color) !important;
}
.fourth-color {
    color: var(--fourth-color) !important;
}
.fifth-color {
    color: var(--fifth-color) !important;
}
.primary-bg {
    background: var(--primary-color);
    color: #fff !important;
}
.primary2-bg {
    background: var(--primary2-color);
    color: #fff !important;
}
.secondary-bg {
    background: var(--secondary-color);
    color: #fff !important;
}
.third-bg {
    background: var(--third-color);
    color: #fff !important;
}
.fourth-bg {
    background: var(--fourth-color);
    color: #fff !important;
}
.fifth-bg {
    background: var(--fifth-color);
    color: #fff !important;
}
.sixth-bg {
    background: var(--sixth-color);
    color: #fff !important;
}

.breadcrumb, .breadcrumb a{
    font-size: 12pt;
}
.card {
    background: #fbf8f5;
}
.card-header {
    background: #c19e6b;
    color: #fff !important;
}
.card-inside {
    background: #fff;
}
label{
    color: var(--foreground-color) !important;
}
/*#endregion */
/*#region ----Header */
header a {
    color: var(--third-color) !important;
    font-size: 13pt;
}
    header a:hover {
        color: var(--primary2-color) !important;
    }
    header a.active {
        color: #fff !important;
    }
.imgLogo {
    width: 150px;
}
.mainNav {
    background-color: var(--primary-color);
    border-bottom:5px solid var(--fourth-color);
}

/*#endregion */

/*#region ----Banner */
.banner {
    background: url(../img/bg-winter.jpg) right;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    height: 500px;
    padding-top: 58px;
}
@media (max-width: 575px) {
    .banner {
        background: url(../img/bg-winter.jpg);
        background-size: cover;
        background-position-x: left;
        background-position-y: center;
        height: 350px;
        padding-top: 38px;
    }
}
/*#endregion */

/*#region ----Footer */
footer {
    font-size: 12pt;
    background: var(--fourth-color);
    color: #fff !important;
}
.footer-line{
    background: url(../img/bg-footer.png) repeat-x;
    height:78px;
}
footer h5 {
    color: var(--primary2-color) !important;
}
    footer a {
        font-weight: 400;
        color: #fff !important;
        text-decoration: none;
        font-size: 12pt;
    }
        footer a:hover {
            color: var(--third-color) !important;
        }
/*#endregion */