@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");

:root {
    --base-1: #0f6e56;
    --base-rgb: 15, 110, 86;
    --theameColor: #0f6e56;
    --primary-clr: #0f6e56;
    --primary-rgb: 15, 110, 86;
    --bs-primary: #0f6e56;
    --bs-primary-rgb: 15, 110, 86;
    --bs-secondary: #c4a35a;
    --secondary-clr: #f3ecdc;
    --sidebar: #12352c;
    --dark-clr: #12352c;
    --title-clr: #1a2420;
    --section-light: #f7f3ea;
    --body-bg: #f7f3ea;
    --heading-fonts: "Cairo", sans-serif;
    --body-fonts: "Cairo", sans-serif;
}

html, body, button, input, select, textarea {
    font-family: "Cairo", "Tahoma", sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] .banner-content,
html[dir="rtl"] .banner-wrapper,
html[dir="rtl"] .header-wrapper,
html[dir="rtl"] .menu,
html[dir="rtl"] .footer,
html[dir="rtl"] .navbar,
html[dir="rtl"] .card {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .banner-wrapper,
html[dir="rtl"] .header-wrapper {
    display: flex;
}

.banner-section svg path[fill="#FB5607"],
header svg path[fill="#FB5607"] {
    fill: #0f6e56;
}

.btn-base,
.btn--primary,
.btn-primary {
    background-color: #0f6e56 !important;
    border-color: #0b5a46 !important;
}

.btn-base:hover,
.btn--primary:hover,
.btn-primary:hover {
    background-color: #0b5a46 !important;
}