:root{
--mainColor:#0f172a;
--accentColor:#3b82f6;
--textColor:#ffffff;
}

body{
min-height:100vh;

background:
linear-gradient(
rgba(15,23,42,.85),
rgba(15,23,42,.85)
),
url("../background_Images/bg.webp");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

margin:0;
font-family:Arial,sans-serif;
color:var(--textColor);
}

/* HEADER */

header,footer{
width:100%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(15,23,42,.9);
backdrop-filter:blur(6px);
}

/* HEADER CARD */

.site-header-card,
.site-footer-card{

max-width:1100px;
margin:0.75rem auto;
padding:1rem 1.25rem;

border-radius:14px;
border:1px solid rgba(255,255,255,.14);

background:rgba(15,23,42,.92);

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

color:#fff;

}

/* SERVICES */

.services{
max-width:700px;
margin:0 auto;
text-align:center;
}

.services ul{
list-style:none;
padding:0;
}

.services li{
margin:.5rem 0;
}

.services button{

width:100%;
padding:1rem;

font-size:1.1rem;

background:#ffffffcc;

border:1px solid #ccc;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.services button:hover{
background:#e0f2f1;
}

/* TITLES */

.basmala{
text-align:center;
font-size:2.5rem;
color:gold;
margin-bottom:2rem;
font-weight:bold;
}

.section-title{
text-align:center;
font-size:2rem;
color:#ff00ba;
letter-spacing:.3em;
margin-bottom:1rem;
}

/* RESPONSIVE */

@media(max-width:768px){

body{
background-attachment:scroll;
}

.site-header-card,
.site-footer-card{
margin:.5rem;
padding:.85rem;
}

}