/* Main Rules */


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

@font-face {
    font-family: 'Cairo', sans-serif;
    src: url(../fonts/Cairo-Bold.ttf);
}


@font-face {
    font-family: 'ltbukra';
    src: url('../fonts/LTBukra/29ltbukraregular.ttf');
}
@font-face {
    font-family: 'Bahij';
     src: url('../fonts/Bahij/Bahij_TheSansArabic-Light.ttf');
}

/*
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
*/
/*
@font-face {
    font-family: Effra_Std_Rg;
    src: url(../fonts/Effra_Std_Rg.ttf);
}
*/
.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   font-family: 'Bahij' !important;
}

body {
    overflow-x: hidden !important;
    direction: rtl;
    background-color: #E0E0E0 !important;
}


img {
    display: block;
}


a {
    display: block;
    text-decoration: none;
    color: var(--gray-600, #485253);
}


    a:hover {
        color: var(--gray-600, #485253);
    }


.margin-bot{
    margin-bottom:4rem !important;
}


    nav.breadcrumb ul {
        display:flex !important;
    }

        nav.breadcrumb ul li:last-child {
            color: #727777;
        }
        nav.breadcrumb ul li {
            position: relative;
            padding-inline:1rem;

        }
            nav.breadcrumb ul li:not(:last-child) {
                color: #333333;
            }
            nav.breadcrumb ul li:not(:last-child)::after {
                content: ">";
                top: 0;
                left: -.25rem;
                position: absolute;
                padding: 0;

            }
.error {
    width: 100%;
    display: block;
    color: red !important;
    font-size: 14px !important;
}

.user-account {
    position: relative;
    border-radius: 0.25rem;
    min-width: 130px;
    text-align: center;
    padding: 0.5rem 0.25rem !important;
    margin-left: 1rem;
    color: #413168;
}
.topbar-user-name {
    color: #413168;
    font-weight: bold;
}

.user-account i {
    font-size: 24px
}

.form-check .form-check-input {
    border: 2px soild #bbbbbc !important;
    border-block-end-color: gray;
    border-block-start-color: gray;
    border-inline-end-color: gray;
    border-inline-start-color: gray;
    
}

.w-33 {
    width: 33% !important;

}
.stat-section-header {
    font-size : 26px!important
}

.stat-section-header, .stat-num {
    color: #413168;
    font-weight: 700 !important;
    margin-right: 20px
}

.span-title {
    width: 558px;
    flex-shrink: 0;
    color: #727777;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.about-volunteers {
    background-color: #413168 !important
}

.about-volunteers h2 {
    color:white !important;
    font-weight:700
}

.about-volunteers h5 {
    color:white !important
}
.vol-text {
    color:white !important;
    font-weight :700 !important;
    font-size:12px
}
.vol-span {
    font-size: 32px !important;
    color: #413168 !important;
    font-weight:700 !important
}

.volunteer-opport h2 {
    color: #413168;
    font-weight :700 !important
}

.volunteer-opport p {
    color: #727777;
    font-weight: 700;
    line-height: 26px;
    font-size: 18px
}
.vol-opport-ul li {
    color: #333333;
    font-weight:700;
    line-height:45px
}
.vol-opport-ul {
    margin-right:17px;
    position:relative
}

.vol-opport-ul {
    list-style-type: none; /* Remove default marker */
    padding-left: 0; /* Optional: Align list items */
}

.vol-opport-li {
    position: relative;
    padding-left: 1.5em; /* Space for custom marker */
}

.vol-opport-ul li:nth-child(1)::before {
    content: "•";
    font-size: 1.5em;
    position: absolute;
    left: 102%;
    top: -1px;
    color: #413168;
}

.vol-opport-ul li:nth-child(2)::before {
    content: "•";
    font-size: 1.5em;
    color: #EAB400;
    position: absolute;
    left: 102%;
    top: 34%;
}

.vol-opport-ul li:nth-child(3)::before {
    content: "•";
    font-size: 1.5em;
    color: #413168;
    position: absolute;
    left: 102%;
    top: 67%;
}

.w-80 {
    width:80% !important;

}

.me-6 {
    margin-right :4rem !important
}

@media (min-width:320px) and (max-width:770px) {
    .stat-section-header, .stat-num {
        color: #413168;
        font-weight: 700 !important;
        margin-right: 12px
    }

    .span-title {
        width: 558px;
        flex-shrink: 0;
        color: #727777;
        text-align: right;
        font-size: 8px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
    }

    .stat-section-header {
        font-size: 16px !important
    }


    header#header-award {
       margin:0 !important;
    }
}

header#header-award {
    margin: -28px ;
}