*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:'Cairo',sans-serif;
}


body{

    background:#f5faf8;
    color:#17364d;

}


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


header{

    width:90%;
    margin:25px auto;

    background:white;

    padding:20px 35px;

    border-radius:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.logo{

    font-size:25px;

    font-weight:900;

    color:#11945b;

}


.logo span{

    display:block;

    font-size:14px;

    color:#777;

}



nav a{

    text-decoration:none;

    margin:0 10px;

    color:#17364d;

    font-weight:700;

    transition:.3s;

}


nav a:hover{

    color:#11945b;

}





/* ================= HERO ================= */


.hero{

    position:relative;

    width:90%;

    min-height:520px;

    margin:40px auto;

    background:white;

    padding:80px 50px;

    border-radius:45px;

    text-align:center;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}



/* دوائر الخلفية */


.hero-circle{

    position:absolute;

    border-radius:50%;

    z-index:1;

}



.circle-one{

    width:360px;

    height:360px;

    background:#dff5eb;

    right:-130px;

    bottom:-130px;

}



.circle-two{

    width:250px;

    height:250px;

    background:#e8f2ff;

    left:-100px;

    top:-100px;

}




.hero-content{

    position:relative;

    z-index:2;

}



.hero h1{

    font-size:48px;

    font-weight:900;

    color:#17364d;

}



.hero h2{

    color:#11945b;

    font-size:28px;

    margin:15px;

}



.hero p{

    font-size:20px;

    color:#71869a;

    line-height:2;

    margin:20px auto;

    max-width:700px;

}





/* Badge */


.hero-badge{


    position:absolute;

    top:35px;

    right:40px;


    background:#effaf5;

    color:#11945b;


    padding:12px 25px;


    border-radius:40px;


    font-weight:700;

    z-index:3;

}





/* ================= VISITOR COUNTER ================= */


.visit-box{


    position:absolute;


    top:35px;


    left:35px;


    width:270px;


    height:95px;


    background:linear-gradient(
        135deg,
        #11945b,
        #0b7547
    );


    color:white;


    border-radius:28px;


    display:flex;


    align-items:center;


    justify-content:space-around;


    box-shadow:0 15px 35px rgba(17,148,91,.35);


    z-index:5;


}




.visit-info{

    text-align:center;

}


.visit-info span{

    display:block;

    font-size:15px;

}



.visit-info strong{

    display:block;

    font-size:32px;

    font-weight:900;

}




.visit-icon{


    width:60px;


    height:60px;


    background:rgba(255,255,255,.15);


    border-radius:20px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:30px;


}





/* ================= HERO BUTTONS ================= */


.hero-buttons a{


    display:inline-block;


    padding:15px 35px;


    margin:10px;


    background:#11945b;


    color:white;


    border-radius:30px;


    text-decoration:none;


    font-weight:700;


}



.hero-buttons .outline{


    background:white;


    color:#11945b;


    border:2px solid #11945b;


}





/* ================= STATS ================= */


.stats{


    position:relative;

    z-index:2;


    display:flex;


    justify-content:center;


    gap:20px;


    margin-top:40px;


}



.stats div{


    background:#f5faf8;


    padding:20px 35px;


    border-radius:25px;


}



.stats strong{


    display:block;


    font-size:30px;


    color:#11945b;


}



.stats span{


    color:#777;


}





/* ================= OLD BUTTONS ================= */


.buttons a{


    display:inline-block;


    padding:15px 35px;


    margin:10px;


    background:#11945b;


    color:white;


    border-radius:30px;


    text-decoration:none;


}





.buttons .green{


    background:#17364d;

}





/* ================= FEATURES ================= */


.features{


    display:flex;


    justify-content:center;


    gap:15px;


    margin-top:35px;


    flex-wrap:wrap;


}



.features div{


    background:#e8f7f0;


    padding:12px 20px;


    border-radius:25px;


}





/* ================= SECTIONS ================= */


.section{


    width:90%;


    margin:50px auto;


}




.section h2,
.about h2{


    text-align:center;


    font-size:35px;


    margin-bottom:30px;


}





/* ================= CARDS ================= */


.cards{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



.card{


    background:white;


    padding:30px;


    border-radius:25px;


    text-align:center;


    box-shadow:0 10px 25px rgba(0,0,0,.06);


}



.card h3{


    color:#11945b;


}



.card button{


    margin-top:20px;


    padding:10px 25px;


    border:none;


    border-radius:20px;


    background:#11945b;


    color:white;


}





/* ================= UPDATES ================= */


.update-box{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.update-box div{


    background:white;


    padding:25px;


    border-radius:20px;


    width:250px;


    box-shadow:0 10px 20px #ddd;


}



.open{

    color:green;

}


.checking{

    color:#c78b00;

}





/* ================= WARNING ================= */


.warning{


    width:90%;


    margin:40px auto;


    background:#fff4dd;


    padding:30px;


    border-radius:25px;


    text-align:center;


}





/* ================= ABOUT ================= */


.about{


    width:90%;


    margin:auto;


    text-align:center;


    padding:40px;


}





/* ================= FOOTER ================= */


footer{


    background:#17364d;


    color:white;


    text-align:center;


    padding:35px;


    margin-top:40px;


}






/* ================= MOBILE ================= */


@media(max-width:768px){



header{


    flex-direction:column;


}



nav{


    margin-top:15px;


}



.hero{


    padding:100px 20px 50px;


}



.hero h1{


    font-size:32px;


}



.hero-badge{


    display:none;


}



.visit-box{


    position:relative;


    top:auto;


    left:auto;


    margin:0 auto 30px;


}



.stats{


    flex-direction:column;


}



.stats div{


    width:100%;


}



}
/* ================= CONTACT SECTION ================= */


.contact-section{

    width:90%;

    margin:50px auto;

    background:white;

    padding:40px 30px;

    border-radius:35px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.07);

}



.contact-section h2{

    font-size:35px;

    color:#11945b;

    margin-bottom:20px;

}



.contact-section p{

    font-size:18px;

    color:#71869a;

    line-height:2;

    max-width:700px;

    margin:auto;

}



.contact-box{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:30px;

}



.contact-box a{

    min-width:280px;

    padding:18px 25px;

    background:#f5faf8;

    color:#17364d;

    text-decoration:none;

    border-radius:20px;

    font-weight:700;

    font-size:17px;

    border:1px solid #e5eee9;

    transition:.3s;

}



.contact-box a:hover{

    background:#11945b;

    color:white;

    transform:translateY(-5px);

}



/* ================= MOBILE CONTACT ================= */


@media(max-width:768px){


.contact-section{

    padding:30px 20px;

}



.contact-section h2{

    font-size:28px;

}



.contact-box{

    flex-direction:column;

}



.contact-box a{

    min-width:100%;

}


}
/* ================= NEW AID CARD DESIGN ================= */


.card{

    position:relative;

    overflow:hidden;

    transition:.3s;

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}



/* شارة جديد */

.new-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:#11945b;

    color:white;

    padding:6px 15px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

}



/* عنوان الرابط */


.card h3{

    font-size:21px;

    margin-bottom:15px;

    line-height:1.8;

}



/* نوع المساعدة */


.card p{

    color:#71869a;

    line-height:2;

    margin:8px 0;

}



/* الحالة */


.open{

    display:inline-block;

    background:#e8f7f0;

    color:#11945b;

    padding:7px 15px;

    border-radius:20px;

    font-size:14px;

    font-weight:700;

}



/* عدد الزيارات */


.card p:nth-last-of-type(1){

    color:#17364d;

    font-weight:600;

}




/* زر فتح الرابط */


.aid-button{

    display:inline-block;

    margin-top:18px;

    padding:13px 30px;

    background:#11945b;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}



.aid-button:hover{

    background:#17364d;

    transform:scale(1.05);

}



/* تحسين عرض الكروت للموبايل */


@media(max-width:768px){


.card{

    padding:25px 20px;

}


.card h3{

    font-size:19px;

}


.aid-button{

    width:100%;

}


}
/* ===============================
   SEARCH BOX DESIGN
================================ */


.search-box{

    width:90%;

    max-width:650px;

    margin:35px auto;

}



.search-box input{


    width:100%;


    padding:18px 30px;


    border-radius:50px;


    border:2px solid #e1eee8;


    background:white;


    font-size:18px;


    font-family:'Cairo',sans-serif;


    color:#17364d;


    outline:none;


    transition:.3s;


    box-shadow:0 10px 25px rgba(0,0,0,.05);


}



.search-box input:focus{


    border-color:#11945b;


    box-shadow:0 0 25px rgba(17,148,91,.2);


}



.search-box input::placeholder{


    color:#9aaebd;


}
/* ================= SEARCH RESULT ================= */


.search-result{

    text-align:center;

    margin-top:15px;

    font-size:17px;

    font-weight:700;

    color:#11945b;

    min-height:25px;

}
/* ===============================
 FILTER BUTTONS
================================ */


.filter-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin:30px auto;

}



.filter-buttons button{


padding:12px 25px;

border:none;

border-radius:30px;

background:white;

color:#17364d;

font-family:'Cairo';

font-size:16px;

font-weight:700;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;


}



.filter-buttons button:hover{


background:#11945b;

color:white;


}
/* ================= FOOTER IMPROVED ================= */


footer p{

    line-height:2;

    margin:10px auto;

    max-width:700px;

}



footer h3{

    font-size:28px;

    margin-bottom:15px;

}



.footer-info{

    margin:25px 0;

}



footer hr{

    width:80%;

    margin:25px auto;

    border:0;

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

}
.sadaqa-box{

width:90%;
margin:40px auto;
background:#f0faf5;
padding:40px 30px;
border-radius:35px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.06);

}


.sadaqa-box h2{

color:#11945b;
font-size:32px;
margin-bottom:20px;

}


.sadaqa-box p{

font-size:18px;
line-height:2;
color:#17364d;

}