:root {
    --hover-color: rgb(54, 54, 206);
    direction: rtl;
    scroll-behavior: smooth;
    --main-color: rgb(0, 0, 135)
}

.bg-success-light {
    background-color: #62ab8a;
}

h1,
h2,
h3,
h4,
h5,
h6,
th {

    font-family: "Marhey", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    color: #198754 !important;
}

p,
li,
a,
button,
span {
    font-weight: bold;
    font-size: 0.9rem !important;
}

p,
li,
a,
button,
span,
tbody {
    font-family: "Alexandria", sans-serif !important;
    font-optical-sizing: auto;

}

.pointer {
    cursor: pointer;
}

.bg-mainColor {
    background-color: var(--main-color);
}

.w-45 {
    width: 45%;
}

/* ................... 1 header..................... */

.nav-link:hover,
.active {
    color: var(--main-color) !important;
}

.nav-link {
    transition: all 0.5s;
}

.res-nav {
    z-index: 999999;
    transition: 1s !important;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 1.5rem;
}

nav img {
    width: 8rem;
    height: 7rem;
}

.icon-img {
    width: 4rem;
    height: 4rem;

}

.pay-img {
    width: 2rem;
    height: 2rem;
}

nav {
    z-index: 999;
}

.navbar {
    transition: all 1s;
}

#toUp,
#dropNav,
#dropNav2 {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9999;
    top: 90%;
    transition: all 1s;
}

.head-container {
    transform: translate(-.4rem, 18rem);
    z-index: 999999;
}

#dropNav,
#dropNav2 {
    left: 2%;
}

#toUp {
    right: 2%;
}

#toUp:hover,
#dropNav:hover,
#dropNav2:hover {
    background-color: var(--hover-color) !important;
}

header {
    /* background-image: url(../images/cover-photo-1920-x-1080.png); */
    /* background-position: center center; */
    /* background-size: contain; */
    /* height: 100vh; */
    /* background-repeat: no-repeat; */
    animation: 10s ease-in-out infinite;
}




header .btn-success,
header .btn-warning {
    font-size: 1.25rem !important;
    width: 10rem;
}


header .h1 {
    font-size: 3rem;
    font-weight: bolder;
    text-shadow: 4px 4px 7px gray;
}

.layer {
    background-color: rgba(9, 9, 9, .5);
}

/* ................... about..................... */
#imgContainer img {
    width: 16rem !important;
    height: 16rem !important;
}

.progress-bar {
    width: 0%;
}

/* .carousel img {
    height: 600px;
}

#carouselExampleFade {
    width: 50%;
    height: 20rem;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: black !important;
    width: 1.8rem;
    height: 1.8rem;
    top: 45%;
}

.carousel-control-next {
    right: -2.5%;
}

.carousel-control-prev {
    left: -2.5%;
} */

/* ................... تبرع ..................... */

.card img {
    height: 300px;
}

#tbroaPage img {
    height: 20rem;
}


/* ................... forms ..................... */
form {
    height: 500px;
}

form button {
    margin: auto;
}

.validation {
    font-size: 1rem;
}

.form-container {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url(../images/footer.jpg);
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url(../images/final\ img/register=logo.png); */
    background-position: center center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}

/* ................... 1 header..................... */
/* ................... footer..................... */
.icon {
    width: 3.3rem;
    height: 3.3rem;
    background-color: var(--main-color);
    transition: all 0.8s;
    border: 3px solid var(--main-color);
}

.icon i {
    transition: all 0.8s;
}

.icon:hover {
    background-color: #fff;
}

.icon:hover i {
    color: var(--main-color) !important;
}

footer {
    background-position: center center;
    background-size: contain;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url(../images/footer.jpg);
}

.my-text-location {
    font-size: 0.85rem;
}

.phone-old {
    width: 2rem;
    height: 2rem;
}