@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');


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


html{
    scroll-behavior:smooth;
}


body{

    background:#061710;
    color:white;
    overflow-x:hidden;

}


/* =========================
BACKGROUND
========================= */


.background{

    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-1;

    background:
    radial-gradient(circle at top,#174d3a,#061710 60%);

}



.mosque{

    position:absolute;

    bottom:-100px;
    left:50%;
    transform:translateX(-50%);

    width:900px;
    height:450px;

    opacity:.18;

    background:

    linear-gradient(
    to top,
    #000 20%,
    transparent
    );

    border-radius:500px 500px 0 0;

}



.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}



.gold{

    width:500px;
    height:500px;

    background:#D4AF37;

    top:-150px;
    right:-100px;

    opacity:.25;

}



.green{

    width:600px;
    height:600px;

    background:#0F8A5F;

    bottom:-200px;
    left:-200px;

    opacity:.3;

}




/* =========================
GLASS
========================= */


.glass{

background:

rgba(255,255,255,.10);

border:

1px solid rgba(255,255,255,.18);


backdrop-filter:

blur(35px);


-webkit-backdrop-filter:

blur(35px);


box-shadow:

0 20px 60px rgba(0,0,0,.35);


}





/* =========================
NAVBAR
========================= */


.navbar{

position:fixed;

top:25px;
left:5%;
right:5%;


height:80px;

padding:0 35px;


border-radius:30px;


display:flex;

align-items:center;

justify-content:space-between;


z-index:20;


}



.logo{

font-size:26px;

font-weight:800;

color:#D4AF37;

}



nav{

display:flex;

gap:35px;

}


nav a{

color:white;

text-decoration:none;

opacity:.8;

transition:.3s;

}



nav a:hover{

opacity:1;

color:#D4AF37;

}



.nav-btn,
.primary,
.submit{


border:none;

cursor:pointer;

padding:15px 35px;

border-radius:20px;


background:

linear-gradient(
135deg,
#0F8A5F,
#086340
);


color:white;

font-size:17px;

font-weight:700;


box-shadow:

0 10px 30px rgba(15,138,95,.4);


transition:.35s;

}



.nav-btn:hover,
.primary:hover,
.submit:hover{

transform:translateY(-5px) scale(1.03);

box-shadow:

0 20px 50px rgba(15,138,95,.6);

}





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


.hero{


min-height:100vh;

padding:

160px 8% 80px;


display:grid;

grid-template-columns:

1fr 500px;


align-items:center;

gap:60px;


}



.hero h1{

font-size:65px;

line-height:1.3;

font-weight:800;


}


.hero h1 span{

color:#D4AF37;

}



.hero p{

margin-top:30px;

font-size:21px;

line-height:2;

color:rgba(255,255,255,.8);

}



.buttons{

margin-top:40px;

display:flex;

gap:20px;

}



.secondary{

padding:15px 35px;

border-radius:20px;

background:transparent;

border:

1px solid rgba(255,255,255,.3);

color:white;

cursor:pointer;

}




/* =========================
FORM
========================= */


.form-card{


padding:35px;

border-radius:35px;


}



.form-card h2{

font-size:35px;

}



.form-card p{

font-size:16px;

margin:10px 0 25px;

}



input{


width:100%;

padding:18px;

border-radius:18px;

border:

1px solid rgba(255,255,255,.2);


background:

rgba(255,255,255,.12);


color:white;


font-size:18px;

outline:none;


}



input::placeholder{

color:#ccc;

}



.form-card h3{

margin:30px 0 20px;

}




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


.radio-group{

display:flex;

flex-direction:column;

gap:15px;

}



.radio-card input{

display:none;

}



.radio-card div{


padding:20px;


border-radius:22px;


border:

1px solid rgba(255,255,255,.15);


cursor:pointer;


transition:.3s;


}



.radio-card span{

font-size:35px;

}



.radio-card h4{

margin-top:10px;

font-size:18px;

}



.radio-card p{

font-size:14px;

margin:5px 0;

}



.radio-card:hover div{

transform:scale(1.03);

box-shadow:

0 0 35px rgba(212,175,55,.3);

}



.radio-card input:checked + div{


border:

2px solid #D4AF37;


background:

rgba(15,138,95,.25);


box-shadow:

0 0 40px rgba(15,138,95,.6);


}





.submit{

width:100%;

margin-top:25px;

}





/* =========================
TRUST
========================= */


.trust{


padding:80px 8%;


display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;


}



.trust-card{

padding:35px;

border-radius:25px;

text-align:center;

font-size:18px;


}




/* =========================
DONATION TYPES
========================= */


.types{

padding:80px 8%;

text-align:center;

}



.types h2{

font-size:45px;

margin-bottom:40px;

}



.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}



.type-card{


padding:40px 25px;

border-radius:30px;


font-size:45px;


transition:.3s;


}



.type-card:hover{


transform:translateY(-15px);


}



.type-card h3{

font-size:25px;

margin:15px;

}



.type-card p{

font-size:16px;

color:#ddd;

}




/* =========================
HADITH
========================= */


.hadith{

margin:100px 8%;

padding:60px;

border-radius:40px;

text-align:center;


}



.hadith h2{

color:#D4AF37;

margin-bottom:30px;

}



.hadith p{

font-size:30px;

line-height:2;

}





footer{

padding:40px;

text-align:center;

opacity:.7;

}




/* =========================
RESPONSIVE
========================= */


@media(max-width:1000px){


.hero{

grid-template-columns:1fr;

text-align:center;

}


.hero h1{

font-size:45px;

}


.cards,
.trust{

grid-template-columns:1fr;

}


nav{

display:none;

}


.buttons{

justify-content:center;

flex-direction:column;

}

.reveal,
.glass,
.trust-card,
.type-card{

opacity:0;

transform:
translateY(40px);

transition:
1s ease;

}


.show{

opacity:1;

transform:
translateY(0);

}
}