:root {
    --primary-color: #FFCD05;
    --secondary-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #fff;
    --button-hover-bg-color: #FFCD05;

    --link-color: #007bff;
    --link-hover-color: #0056b3;
}

body {
    background: #FFFDF5;
    direction: rtl;
    font-family: "Tajawal", sans-serif;
}

.btn {
    padding: 7px 50px 7px 50px;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn.btn-primary {
    background-color: var(--secondary-color);
    color: #F3F3F3;
}

.btn.btn-primary:hover {
    background-color: var(--primary-color);
    color: #000000;
}

.btn.btn-success
{
    background-color: #00C16F;
    color: #fefefe;
}

.btn.btn-success:hover
{
    background-color: #009F5A;
    color: #fefefe;
}

.btn.btn-secondary {
    background-color: var(--primary-color);
    color: #000;
}

.btn.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: #fefefe;
}

.btn.btn-white {
    background-color: #fefefe;
    color: #000;
}

.btn.btn-white:hover {
    background-color: var(--secondary-color);
    color: #fefefe;
}

/* nav bar style settings */
.dropdown-menu {
    display: none;
}

.dropdown-menu.hover-active {
    display: flex;
}

.child-sections .child-section {
    display: none;
}

.child-sections .child-section:not(.hidden) {
    display: block;
}
.dropdown-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* mobile nav menu */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.menu.visible {
    display: block;
}

.menu-item {
    background: none;
    border: none;
    color: white;
    text-align: left;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}

.menu-back {
    background: none;
    border: none;
    color: red;
    text-align: left;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
/* general nav styles  */
.nav-item {
    color: #fefefe;
    padding: 2rem 0.7rem;
    font-size: small;
}

.nav-item:hover {
    color: var(--primary-color);
}

.nav-item.active {
    color: var(--primary-color);
}


/* swiper style  */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
    background: #fefefe !important;
    width: 1.5rem;
    border-radius: 6px;
    height: 0.3rem;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #0A0800 !important;
}

.swiper-slide img {
    width: 100%;
}

/* end swiper styles  */

/* start homepage login tabs */
.login-tabs .active-tab {
    background: var(--secondary-color);
    border-radius: 5px;
    color: #fefefe;
}

.intl-tel-input,
.iti {
    width: 100%;
}

.iti__arrow {
    display: none;
}

.iti__selected-country {
    direction: ltr;
    background: #F3F3F3 !important;
    padding: 0 10px !important;
}

.iti__selected-country-primary {
    padding: 0 !important;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
    background-color: none !important;
}

.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type="text"],
.iti--allow-dropdown input.iti__tel-input[type="tel"] {
    padding-right: 2rem !important;
    padding-left: var(--iti-selected-country-arrow-padding);
    margin-left: 0;
}
.iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type="text"], .iti--allow-dropdown input.iti__tel-input[type="tel"]
{
    direction: ltr !important;
}
/* about page  */
.inner-pages-header {
    background-image: url('../image/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 3rem;
    padding-bottom: 1.7rem;
    background-color: #FFFFFF;
}

.about-section {
    background-image: url('../image/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
}

.about-section-4 {
    background-image: url('../image/about-img-4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
}
/* end about page  */

/* faqs page */
.faqs-container {
    background-image: url('../image/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 3rem;
    padding-bottom: 1.7rem;
}
/* end faqs page */

/* contact us page */
.contact-inner-header {
    background-image: url('../image/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 3rem;
    padding-bottom: 1.7rem;
}

/* end contact us page */


.where-profit-comes {
    background-image: url('../image/where-profits-come-bg.png');
    min-height: 400px;
    padding: 25px;
}


/* General input styling */
input,
select,
textarea {
    background-color: transparent;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #fbbf24;
    outline: none;
    box-shadow: 0 2px 0 0 rgba(255, 215, 113, 0.747);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.toggle-bg {
    transition: background-color 0.3s ease-in-out;
}

input[type="checkbox"]:checked+.toggle-bg {
    background-color: #FFCD05;
    /* Yellow when active */
}

input[type="checkbox"]:checked~.toggle-circle {
    transform: translateX(20px);
    /* Move the circle to the right */
}


/* profile tabs */
.tabs{
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 1.5rem;
}
.tabs .tab {
    cursor: pointer;
    padding: 10px;
    text-align: center;
    transition: all 0.3s;
    color: #ACACAC;
}

.tabs .tab.active {
    border-bottom: 1px solid #FFCD05;
    color: #000;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.card {
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.05);
}

.btn {
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #FFCD05;
}