/* ==========================================
   جمعية التنمية الأهلية بالجنينة
   الهوية العامة
========================================== */

:root{
--primary:#005B53;
--primary-dark:#004A44;
--secondary:#9CCB5A;
--light:#F8F9F8;
--gray:#E5E5E5;
}

*{
font-family:'Readex Pro',sans-serif !important;
box-sizing:border-box;
}

body{
background:#fafafa;
}

/* ==========================================
   الهيدر
========================================== */

header{
background:#ffffff !important;
box-shadow:0 3px 15px rgba(0,0,0,.05);
}

/* ==========================================
   البريد والجوال
========================================== */

.s-contacts-topnav-link{

display:inline-flex !important;

align-items:center !important;

gap:8px !important;

padding:10px 18px !important;

margin-left:10px !important;

background:#005B53 !important;

color:#ffffff !important;

border-radius:20px !important;

font-weight:700 !important;

box-shadow:
0 4px 12px rgba(0,91,83,.15);
}

.s-contacts-topnav-link:hover{

background:#007066 !important;

color:#ffffff !important;
}

.s-contacts-topnav-link,
.s-contacts-topnav-link *{

color:#ffffff !important;
}

.s-contacts-topnav-link::before,
.s-contacts-topnav-link svg,
.s-contacts-topnav-link svg path,
.s-contacts-topnav-link path,
.s-contacts-topnav-link i{

color:#8ec140 !important;

fill:#ffffff !important;

stroke:#ffffff !important;
}

/* ==========================================
   القائمة الرئيسية
========================================== */

a.bg-nav_bg{

background:#005B53 !important;

color:#ffffff !important;

padding:9px 16px !important;

border-radius:14px !important;

font-size:15px !important;

font-weight:700 !important;

box-shadow:none !important;

border:none !important;

transition:.25s ease;

white-space:nowrap !important;
}

a.bg-nav_bg:hover{

background:#006c62 !important;

color:#ffffff !important;
}

/* ==========================================
   تسجيل الدخول
========================================== */

button[name="header-login"],
.topnav-link-item{

display:flex !important;

align-items:center !important;

justify-content:center !important;

width:54px !important;

height:54px !important;

min-width:54px !important;

padding:0 !important;

background:
linear-gradient(
180deg,
#f7f7f7 0%,
#e3e3e3 100%
) !important;

border:1px solid #cccccc !important;

border-radius:18px !important;

color:#005B53 !important;
}

button[name="header-login"] span,
button[name="header-login"] div,
.topnav-link-item span,
.topnav-link-item div{

display:none !important;
}

button[name="header-login"] svg,
.topnav-link-item svg{

width:22px !important;

height:22px !important;
}

/* ==========================================
   البحث والسلة
========================================== */

.header-btn,
header button:not([name="header-login"]),
header .icon-btn{

background:
linear-gradient(
180deg,
#f7f7f7,
#dcdcdc
) !important;

border:1px solid #c8c8c8 !important;

border-radius:16px !important;

color:#005B53 !important;

transition:.25s ease;
}

.header-btn:hover,
header .icon-btn:hover{

background:
linear-gradient(
180deg,
#ffffff,
#e8e8e8
) !important;
}

/* ==========================================
   بطاقات المشاريع
========================================== */

.product-entry,
.product-card,
.s-product-card{

background:#ffffff !important;

border-radius:24px !important;

overflow:hidden !important;

box-shadow:
0 6px 20px rgba(0,0,0,.06);

transition:.35s ease;
}

.product-entry:hover,
.product-card:hover,
.s-product-card:hover{

transform:translateY(-6px);

box-shadow:
0 15px 35px rgba(0,0,0,.12);
}

.product-entry img,
.product-card img,
.s-product-card img{

transition:.5s ease;
}

.product-entry:hover img,
.product-card:hover img,
.s-product-card:hover img{

transform:scale(1.04);
}

/* ==========================================
   أزرار التبرع
========================================== */

.s-button-element,
.btn-primary,
.btn--primary,
button[type="submit"]{

background:
linear-gradient(
135deg,
#005B53,
#8FC63F
) !important;

color:#ffffff !important;

font-weight:700 !important;

border:none !important;

border-radius:18px !important;

box-shadow:
0 5px 15px rgba(0,91,83,.25);

transition:.3s ease;
}

.s-button-element:hover,
.btn-primary:hover,
.btn--primary:hover,
button[type="submit"]:hover{

background:
linear-gradient(
135deg,
#00675f,
#a4d65a
) !important;
}

/* ==========================================
   شريط التقدم
========================================== */

.progress{

height:12px !important;

background:#e8e8e8 !important;

border-radius:30px !important;
}

.progress-bar{

background:
linear-gradient(
90deg,
#005B53,
#9CCB5A
) !important;

border-radius:30px !important;
}

/* ==========================================
   العناوين
========================================== */

h1,
h2,
h3,
h4{

color:#005B53 !important;

font-weight:700 !important;
}

/* ==========================================
   الحقول
========================================== */

input,
textarea,
select{

border-radius:14px !important;

border:1px solid #dddddd !important;

transition:.25s ease;
}

input:focus,
textarea:focus,
select:focus{

border-color:#005B53 !important;

box-shadow:
0 0 0 3px rgba(0,91,83,.08) !important;
}

/* ==========================================
   الفوتر
========================================== */

/* الصف الأول */

.store-footer__top-area{

background:
linear-gradient(
135deg,
#00735f,
#005B53,
#004A44
) !important;

padding:35px 0 !important;

border-bottom:
1px solid rgba(255,255,255,.12);
}

/* الصف الثاني */

.store-footer__inner{

background:#004A44 !important;
}

.store-footer .grid{

background:#004A44 !important;

padding-top:35px !important;

padding-bottom:35px !important;
}

/* النصوص */

.store-footer,
.store-footer p,
.store-footer div,
.store-footer span,
.store-footer li,
.store-footer a{

color:#ffffff !important;
}

.store-footer a:hover{

color:#9CCB5A !important;
}

/* عناوين الأعمدة */

footer h2,
footer h3,
footer h4,
.footer-title{

display:inline-flex !important;

align-items:center;

justify-content:center;

min-width:220px;

padding:12px 28px;

background:
linear-gradient(
180deg,
#f5f5f5 0%,
#dadada 55%,
#c2c2c2 100%
);

border-radius:18px;

color:#005B53 !important;

font-weight:800 !important;

margin-bottom:25px;
}

/* الشعار */

.store-footer__top-area img{

max-height:95px !important;

width:auto !important;
}

/* الصف الثالث */

.store-footer__info-bar{

background:#002b27 !important;

border-top:
1px solid rgba(255,255,255,.15);
}

.store-footer__info-bar *{

color:#ffffff !important;
}

/* ==========================================
   تحسين عرض القائمة الرئيسية
========================================== */

.main-menu{

gap:6px !important;
}

.main-menu li{

margin:0 3px !important;
}

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

@media(max-width:768px){

/* القائمة الرئيسية */

a.bg-nav_bg{

padding:8px 12px !important;

font-size:13px !important;
}

/* البريد والجوال */

.s-contacts-topnav-link{

padding:8px 14px !important;

font-size:13px !important;

border-radius:16px !important;
}

/* زر الدخول */

button[name="header-login"],
.topnav-link-item{

width:48px !important;

height:48px !important;

min-width:48px !important;
}

/* الفوتر */

.store-footer .grid{

row-gap:35px !important;
}

footer h2,
footer h3,
footer h4,
.footer-title{

min-width:160px;

font-size:15px;
}

}

/* ==========================================
   الشاشات الكبيرة
========================================== */

@media(min-width:1024px){

a.bg-nav_bg{

padding:8px 14px !important;

font-size:14px !important;
}

}