@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Space+Grotesk&display=swap");
body {
    font-family: "Noto Kufi Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    background-color: #ffffff;
    color: #595959;
    font-size: 14px;
    line-height: 24px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Kufi Arabic", sans-serif;
    color: #333333;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    font-family: "Noto Kufi Arabic", sans-serif;
    color: #595959;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .5px;
}

/* Define a class to apply blur effect */
.blur-background {
    filter: blur(5px);
    /* You can adjust the blur strength */
    transition: filter 0.5s ease;
    /* Add a transition for a smooth effect */
}
.box-card:hover {
    transform: scale(1.1);
}

.box-card {
    transition: 0.3s ease-in-out;
}

.card-input-element {
    display: none;
}


.card-input:hover {
    cursor: pointer;
}

.card-input-element:checked+.card-input {
    box-shadow: 0 0 2px 2px #690a25;
    transition: .3s;
}