﻿:root {
    --primary-color-700: #1a8db4;
    --primary-color: #25ADDC;
    --primary-color-300: #EAF9FF;
    --primary-color-50: #F9FDFF;
    --secondary-color: #C69C2F;
    --secondary-color-300: #DDB95E;
    --secondary-color-50: #F7E0A7;
    --neutral-color: #333333;
    --neutral-color-300: #666666;
    --neutral-color-50: #999999;
    --footer-color: #144053;
}

body {
    direction: ltr;
}
html, body {
    font-family: Sans !important;
}
body .bs5{
    direction: ltr;
}
.fixed-top {
    background-color: white;
}

.navbar {
    border-bottom: solid 1px var(--neutral-color-300);
    box-shadow: 0 2px 8px 0 var(--neutral-color-300);
    direction: ltr;
}
.Benefits {
    left: 410% !important;
}

.navbar-brand {
    width: 80px;
    margin: 0;
    margin-right: 1rem;
}

.navbarBTN-primary, .navbarBTN-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: solid 1px var(--primary-color) !important;
}

    .navbarBTN-primary:focus {
        background-color: var(--primary-color-700);
        border: solid 1px var(--primary-color-700);
    }

.navbarBTN-secondary, .navbarBTN-secondary:hover {
    background-color: var(--neutral-color-50);
    color: white;
    border: solid 1px var(--neutral-color-50);
}

    .navbarBTN-secondary:focus {
        background-color: var(--neutral-color-300);
        border: solid 1px var(--neutral-color-300);
    }

.navbarBTN-outline-primary, .navbarBTN-outline-primary:hover {
    background-color: white !important;
    color: var(--primary-color) !important;
    border: solid 1px var(--primary-color) !important;
}

    .navbarBTN-outline-primary:focus {
        color: var(--primary-color-700);
        border: solid 1px var(--primary-color-700);
    }

.navbarBTN-outline-secondary, .navbarBTN-outline-secondary:hover {
    background-color: white;
    color: var(--neutral-color);
    border: solid 1px var(--neutral-color-50);
}

.bg-primary-color {
    background-color: var(--primary-color-300);
}

.text-primary {
    color: var(--primary-color) !important;
}

.paragraph-hight {
    line-height: 1.8;
}

.card-btn {
    cursor: pointer;
    transition: transform 0.2s;
}

    .card-btn:hover {
        transform: translateY(-5px);
        padding-top: 0.9rem;
    }

        .card-btn:hover .img-wrapper,
        .active-card .img-wrapper {
            background-color: var(--primary-color-300);
            border-radius: 50%;
            transform: scale(1);
        }
/* Active card */
.active-card {
    background-color: var(--primary-color-700) !important;
    padding-top: 0.9rem;
}

    .active-card .card-title,
    .active-card .card-text {
        color: #fff !important;
    }
/* Big active card */
.big-card-active {
    background-color: var(--primary-color-700) !important;
    color: #fff !important;
}

.footer {
    background-color: var(--footer-color) !important;
    color: white !important;
    direction: ltr !important;
    text-align: left !important;
}

.icons-continer a {
    color: white;
    font-size: 1.5rem;
}

    .icons-continer a i:hover {
        transform: rotate(360deg) scale(1.2);
        transition: transform 0.5s;
    }

.contact-us {
    background-color: var(--primary-color-300);
    color: var(--neutral-color);
    padding: 1rem 2rem;
    border: 1px solid var(--neutral-color-300);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px 0 var(--neutral-color-300);
}

.Email-footer a {
    color: var(--white);
}

.footer-list-header {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.footer-list li a {
    color: var(--white);
    font-size: 0.9rem;
    text-align: left;
}

.footer-list li {
    margin-bottom: 0.5rem;
}

    .footer-list li a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

.custom-dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* في النص */
    top: 100%; /* تحت الـ navbar */
    width: 90vw;
    max-width: 1250px;
    overflow: hidden;
    z-index: 999;
}

.dropdown-item img {
    width: 32px;
    height: 32px;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
}

.dropdown-category {
    font-weight: 400;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.thierd-titel {
    color: var(--secondary-color);
}
.hero-section {
    padding: 10rem 0 2.5rem 0;
    height: auto;
}

.padding-y-section {
    padding: 6rem 0;
}

.img-cover {
    object-fit: cover;
    object-position: center;
}

/* التحكم في شكل الـ indicators */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--neutral-color-300);
    opacity: 0.5;
    transition: all 0.3s ease;
    margin: 0 5px;
}

/* الشكل لما يبقى Active */
.carousel-indicators .active {
    width: 20px;
    border-radius: 50%;
    background-color: #25addc;
    opacity: 1;
}

.dropdown-category {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* العنوان */
.category-title {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    color: var(--secondary-color);
}
/* الخط العمودي */
.dropdown-category::before {
    content: "";
    position: absolute;
    left: 0; /* لو LTR */
    top: 25px;
    width: 2px;
    height: calc(100% - 25px);
    background-color: var(--secondary-color);
}

.navbar-toggler.active-card {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: solid 3px var(--primary-color);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 2;
    border-radius: 0.5rem;
}

.nav-link.dropdown-toggle.show {
    color: var(--primary-color);
    font-weight: bold;
    border-bottom: solid 3px var(--primary-color);
}
.custom-text-alignment {
    text-align: start;
}