@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jomhuria&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mirza&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Droid+Arabic+Kufi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Droid+Arabic+Naskh&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tinos&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aladin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mada&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Khand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Damion&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jomhuria+Extended&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi+Ink&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coda&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');

:root {
    font-family: var(--font) !important;
    --primary-color: rgb(146, 124, 64);
    --primary-color-hover: rgb(146, 124, 64);

    --font: cairo;
}

/* body {
    font-family: var(--font) !important;
} */

#dropdownMenuIconHorizontalButton li button:focus {
    font-family: var(--font) !important;
    color: var(--primary-color) !important;
    background-color: #fff;
    transition: 0.5s;
}

#dropdownMenuIconHorizontalButton li button:focus:hover {
    font-family: var(--font) !important;
    color: var(--primary-color-hover) !important;

}

button.selected {
    font-family: var(--font) !important;
    color: var(--primary-color) !important;
    transition: 0.5s;
    background-color: #fff;
}

button.selected:hover {
    font-family: var(--font) !important;
    color: var(--primary-color-hover) !important;
}

#selected {
    font-family: var(--font) !important;
    position: absolute;
    top: 24.3%;
    color: var(--primary-color) !important;
    transition: 0.5s;
    background-color: #fff;
    opacity: 0.5;
}

#selected:hover {

    color: var(--primary-color-hover) !important;

}

.border-red {
    font-family: var(--font) !important;
    --tw-border-opacity: 1;
    border: var(--primary-color-hover) 1px solid;
}


.bg-red {
    font-family: var(--font) !important;
    --tw-bg-opacity: 1;
    background-color: var(--primary-color);
}

.checked\:border-red:checked {
    font-family: var(--font) !important;
    --tw-border-opacity: 1;
    border: var(--primary-color-hover) 1px solid;
}

.dark .dark\:border-red {
    font-family: var(--font) !important;
    --tw-border-opacity: 1;
    border: var(--primary-color-hover) 1px solid;
}


.main-menu-m {
    font-family: var(--font) !important;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--primary-color);
    transition: 0.5s;
}

.main-menu-m:hover {

    background-color: var(--primary-color-hover);

}

.cl2 {
    font-family: var(--font) !important;
    color: var(--primary-color-hover);
    font-weight: 600;
    transition: 0.5s;
}


.cl11 {

    color: var(--primary-color);
    transition: 0.5s;
}

.cl11:hover {

    color: var(--primary-color-hover);
}


.bg10 {
    font-family: var(--font) !important;
    background: linear-gradient(210deg, var(--primary-color), var(--primary-color-hover));
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px;
}

.bg11 {
    font-family: var(--font) !important;
    background: linear-gradient(210deg, var(--primary-color), var(--primary-color-hover));
    transition: 0.5s;
}

.bg12 {
    font-family: var(--font) !important;
    background-color: var(--primary-color);
}


/*---------------------------------------------*/
.how-active1 {
    font-family: var(--font) !important;
    background: var(--primary-color) !important;
    transition: 0.5s;
    color: #fff !important;
    border-radius: 10px;
}

.how-active1:hover {
    background: var(--primary-color-hover) !important;
}