@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root {
    --bg-100: rgba(248, 250, 252, 1);
    --bg-200: rgba(241, 243, 245, 1);
    --bg-300: rgba(223, 227, 231, 1);
    --bg-400: rgba(72, 74, 97, 1);
    --primary-100: #ffffff;
    --primary-200: #f8f9fa;
    --primary-300: #f1f3f5;
    --primary-400: rgba(248, 250, 252, 1);
    --primary-500: #fffffa;
    --accent-100: rgba(240, 245, 250, 1);
    --accent-200: #d9e2ec;
    --accent-300: #bcccdc;
    --accent-400: rgba(246, 250, 254, 1);
    --accent-500: #0081BF;
    --accent-600: rgba(0, 122, 255, 1);
    --text-100: rgba(0, 0, 0, 1);
    --text-200: rgba(33, 37, 41, 1);
    --text-300: #ffffff;
    --text-400: #bdbdbd;
    --border-color: rgba(236, 236, 236, .8);
    --secondary-100: rgba(0, 122, 255, 1);
    --secondary-200: rgba(10, 132, 255, 1);
    --secondary-300: rgba(0, 113, 188, 1);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none !important;
}

body {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    background-color: var(--bg-100) !important;
}

.border_custom {
    border: 1px solid var(--border-color) !important;
}

.min-vh-95 {
    min-height: 95vh !important;
}

.min-vh-80 {
    min-height: 80vh !important;
}.vh-60 {
    height: 60vh !important;
}

.scroll_y::-webkit-scrollbar {
    width: 5px;
}

.scroll_y::-webkit-scrollbar-thumb {
    background-color: var(--primary-300) !important;
    border-radius: 10px !important;
}

.scroll_y::-webkit-scrollbar-track {
    background-color: var(--primary-100) !important;
}

.card_effect {
    transition: all 0.3s ease-in-out !important;
}

.card_effect:hover {
    background-color: var(--primary-200) !important;
}

.text-ellipsis-1 {
    /* one line */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-ellipsis-2 {
    /* two lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-ellipsis-3 {
    /* three lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.nav.nav-tabs:not(.nav_tools) {
    background-color: var(--accent-100);
    border: 0 !important;
    border-radius: 50px !important;
    padding: 0 !important;
}

.nav-link {
    color: var(--text-200) !important;
}

/* hover */
.nav-tabs:not(.nav_tools) .nav-item.show .nav-link:hover, .nav-tabs:not(.nav_tools) .nav-link {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 50px !important;
}

.nav-tabs:not(.nav_tools) .nav-item.show .nav-link, .nav-tabs:not(.nav_tools) .nav-link {
    margin: 5px 0 !important;
    padding: 10px 15px !important;
}

.nav-tabs:not(.nav_tools) .nav-item.show .nav-link, .nav-tabs:not(.nav_tools) .nav-link.active {
    color: var(--text-300) !important;
    background-color: var(--accent-500) !important;
    border: 0 !important;
    border-radius: 50px !important;
}

.bg_steps {
    background-color: var(--accent-400) !important;
    border-radius: 16px !important;
    padding: 10px !important;
}

.bg_steps .step {
    background-color: var(--bg-400) !important;
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bg_steps .step.active_step {
    background-color: var(--accent-500) !important;
    color: var(--text-300) !important;
}

.nav_tools {
    border: 0 !important;
}

.nav-tabs.nav_tools .nav-item.show .nav-link, .nav-tabs.nav_tools .nav-link.active {
    color: var(--text-300) !important;
    border-color: var(--accent-500) !important;
    border-radius: 20px !important;
}

.nav-tabs.nav_tools .nav-item.show .nav-link i, .nav-tabs.nav_tools .nav-link.active i {
    color: var(--text-300) !important;
    background-color: var(--accent-500) !important;
}

.nav-tabs.nav_tools .nav-item.show .nav-link span, .nav-tabs.nav_tools .nav-link.active span {
    color: var(--accent-500) !important;
}

.form-control:not(textarea) {
    background-color: var(--primary-200) !important;
    border-radius: 30px !important;
    height: 50px !important;
    border: 1px solid var(--border-color) !important;
}

textarea {
    resize: none !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-400) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.border-dashed {
    border: 1px dashed var(--border-color) !important;
}

.circle_white {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: var(--primary-100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

.or_label {
    position: relative;
}

.or_label::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background-color: var(--border-color) !important;
}

.or_label::after {
    content: "أو" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: var(--primary-100) !important;
    padding: 0 10px !important;
    color: var(--text-200) !important;
    font-weight: 500 !important;
}


#dropZone {
    border: 2px dashed #007bff;
    border-radius: 10px;
    transition: 0.3s;
}

#dropZone.dragover {
    background-color: #eaf4ff;
    border-color: #0056b3;
}

.ai_services_tabs {
    background-color: transparent !important;
}

.ai_services_tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
}

.ai_services_tabs .nav-item .nav-link {
    border: 1px solid var(--border-color) !important;
}

.vh-50 {
    height: 50vh !important;
}

.primary_500 {
    background-color: var(--primary-500) !important;
}

.scroll_services::-webkit-scrollbar-track {
    margin: 10px !important;
}

.offcanvas-bottom {
    border-radius: 20px 20px 0 0 !important;
    height: 280px !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.img_service {
    width: 25px !important;
    height: 25px !important;
}

.fs-7 {
    font-size: 0.875rem !important;
}