:root {
    --main-color: #ad762e;
    --main-hover: #0D0D0D;
    --sec-color: #262626;
    --black-color: #000;
    --white-color: #000000;
    --border-radius: 24px;
    font-size: 16px;
}

.rtl {
    direction: rtl;
    text-align: right;
}

.ltr {
    direction: ltr;
    text-align: left;
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: url('../fonts/fontawesome/fa-brands-400.woff2') format('woff2'),
         url('../fonts/fontawesome/fa-brands-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

body {
    font-family: 'Tajawal', sans-serif;
    box-sizing: border-box;
    font-style: normal;
    font-weight: 400;
    background-color: white;
    padding-top: 100px;
    direction: rtl;
    text-align: right;
}


.nav-item {
    position: relative;
}

.dropdown-menu {
    z-index: 9999; /* اجعل القائمة المنسدلة تظهر فوق المحتوى الآخر */
}

.nav-link {
    position: relative;
    z-index: 1; /* اجعل الرابط النشط في مقدمة القائمة المنسدلة */
}


/* لجعل القائمة المنسدلة تميل إلى اليسار في حالة RTL */
html[dir="rtl"] .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    text-align: right; /* محاذاة النص لليمين */
}

/* محاذاة النص في القائمة */
html[dir="rtl"] .dropdown-menu .dropdown-item {
    text-align: right;
    direction: rtl;
}




@media only screen and (max-width: 1199px) {
    body {
        padding-top: 139px;
    }
}

@media only screen and (max-width: 991px) {
    body {
        padding-top: 128.09px;
    }
}

@media only screen and (max-width: 767px) {
    body {
        padding-top: 109.13px;
    }
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) #fff;
    scroll-behavior: smooth !important;
}

.overflow {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
}

img {
    image-rendering: -webkit-optimize-contrast !important;
    max-width: 100%;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

* {
    outline: 0 !important;
}

input::-moz-placeholder {
    color: inherit;
}

input::placeholder {
    color: inherit;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    outline: 0;
}

a,
img,
button,
input,
select {
    transition: all 0.3s ease;
}

[role=button] {
    cursor: pointer;
}

/*style scroll bar*/

/* width */

::-webkit-scrollbar {
    width: 6px;
    height: 1px;
}

/* Track */

::-webkit-scrollbar-track {
    background: var(--white-color);
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--main-color);
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--main-hover);
}

/*preloader*/

.preloader {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.progress {
    position: fixed;
    z-index: 99999;
    top: 0;
    width: 100%;
    height: 5px;
    background-color: #f7f7f7;
    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    overflow: hidden;
}

.progress-bar {
    animation: progress 6s ease infinite;
    padding: 1px;
    color: rgb(255, 255, 255);
    background-image: linear-gradient(135deg, var(--main-hover), var(--main-color));
    /* border-radius: 4px 4px 4px 4px; */
}

html[dir=ltr] .progress-bar {
    background-image: linear-gradient(135deg, var(--main-color), var(--main-hover));
}

@keyframes progress {
    from {
        width: 0;
        color: rgba(255, 255, 255, 0);
    }

    to {
        width: 100%;
        color: rgb(255, 255, 255);
    }
}

/*preloader*/

@media only screen and (max-width: 767px) {

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media only screen and (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1170px;
    }
}

.container-fluid {
    --bs-gutter-x: 30px;
}

.container {
    --bs-gutter-x: 30px;
}

.row {
    --bs-gutter-x: 30px;
}

.row>* {
    --bs-gutter-x: 30px;
}

/*lazyload*/

.lazy-img {
    transition: 0.5s;
}

.loading-img {
    background-color: #fafafa !important;
    position: relative;
    overflow: hidden;
}

.loading-img img {
    opacity: 0 !important;
    filter: blur(40px);
}

.loaded-img img {
    opacity: 1;
    filter: blur(0);
}

/*                                 arrow-top                           */

.arrow-top {
    position: fixed;
    bottom: 40px;
    inset-inline-start: 20px;
    display: none;
    padding: 0;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    border-radius: 50%;
    background-color: rgb(238 238 238);
    font-size: 20px;
    color: var(--main-color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-color: rgb(0, 0, 0);
}

.arrow-top:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
}

.fixed-what {
    position: fixed;
    top: 76%;
    right: 0%;
    inset-inline-start: 10px;
    z-index: 10;
    text-decoration: none !important;
}

.fixed-what i {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #4dc247;
    font-size: 36px;
    color: var(--white-color);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(77, 194, 71, 0.5);
    box-shadow: 0 0 0 0 rgba(77, 194, 71, 0.4);
    animation: pulseWhats 2s infinite;
    transition: all 0.4s ease-in-out;
}

@keyframes pulseWhats {
    0% {
        box-shadow: 0 0 0 0 rgb(77, 194, 71);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(77, 194, 71, 0);
    }

    100% {
        box-shadow: 0 0 0 50px rgba(77, 194, 71, 0);
    }
}

.fixed-what i:hover {
    text-decoration: none;
    color: var(--white-color);
    box-shadow: inset 0 0 0 2em var(--main-hover);
}

@media (max-width: 767px) {
    .arrow-top {
        bottom: 35px;
        inset-inline-start: 15px;
    }

    .fixed-what {
        position: fixed;
        bottom: 50%;
        inset-inline-start: 10px;
    }

    .fixed-what i {
        width: 50px;
        height: 50px;
    }
}


.header-section {
    background: rgb(255, 255, 255);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* زيادة قيمة z-index */
    backdrop-filter: blur(8px);
    /* تطبيق تأثير الضبابية */
    -webkit-backdrop-filter: blur(8px);
}

.header-section {
    margin-top: 0px;
    /* لتقليل المسافة العلوية */
}

.container {
    margin-top: 0;
    /* تقليل المسافة بين المحتوى العلوي */
}

.header {
    margin-top: 0;
    /* تقليل المسافة داخل الهيدر */
}



.header-section.fixed {
    box-shadow: 0px 1px 10px 0px rgba(198, 197, 197, 0.102);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    transition: all 0.3s ease-in-out;
}

.header-cont {
    display: flex;
    align-items: center;
    gap: 86px;
}

@media (max-width: 1199px) {
    .header {
        padding: 16px 0;
    }
}

@media (max-width: 767px) {
    .header {
        padding: 16px 0;
    }
}

.fixed .header {
    padding: 25px 0;
}

@media (max-width: 991px) {
    .fixed .header {
        padding: 20px 0;
    }
}

@media (max-width: 767px) {
    .fixed .header {
        padding: 15px 0;
    }
}

.logo {
    display: flex;
    width: 154.64px;
    max-width: 154.64px;
    max-height: 97px;
    transition: all 0.3s ease-in-out;
}

.logo img {
    height: 100%;
    width: auto;
}

@media (max-width: 1199px) {
    .logo {
        max-width: 120px;
    }
}

@media (max-width: 991px) {
    .logo {
        width: -moz-fit-content;
        width: fit-content;
    }
}

@media (max-width: 767px) {
    .logo {
        width: 110px;
    }
}

.fixed .logo {
    width: 130px;
}

@media (max-width: 1199px) {
    .fixed .logo {
        width: 110px;
    }
}

@media (max-width: 767px) {
    .fixed .logo {
        width: 100px;
    }
}

.menu-btn {
    display: none;
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: 24px;
    width: 18px;
    position: relative;
    z-index: 999;
}

.menu-btn .hamburger-lines {
    height: 14px;
    width: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
}

.menu-btn .hamburger-lines .line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--white-color);
    transition: all 0.4s ease-in-out;
}

.menu-btn.active {
    margin-top: 15px;
    margin-inline-end: 15px;
}

.menu-btn.active .hamburger-lines .line1 {
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}

.menu-btn.active .hamburger-lines .line2 {
    transform: scaleY(0);
}

.menu-btn.active .hamburger-lines .line3 {
    transform: rotate(-45deg);
    transform-origin: 0% 100%;
}

.menu-btn.active .hamburger-lines .line {
    background-color: var(--white-color);
}

.header-btn {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 991px) {
    .menu-btn {
        display: block;
    }
}

header .nav {
    display: flex;
    align-items: center;
    gap: 43px;
    padding: 0;
}

@media only screen and (min-width: 992px) {
    header .nav {
        background-color: #ececec;
        border: 1px solid #ffffff;
        border-radius: 18px;
        padding: 17px 28px;
    }
}

.nav-link {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: var(--black-color);
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    text-transform: capitalize;
}

.nav-link.active {
    color: var(--main-color);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--main-color);
}

@media (max-width: 1199px) {
    .nav-link {
        font-size: 14px;
    }
}

.drop-link {
    position: relative;
}

@media (max-width: 991px) {
    .nav-item .drop-down {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transition: none;
        box-shadow: none;
        border-radius: none;
        left: 0;
        right: 0;
        transform: translateX(0);
        background-color: transparent;
        padding: 13px 30px;
        max-height: 300px; /* يمكنك تغيير الارتفاع حسب الحاجة */
        overflow-y: auto;
    }

    .nav-item .drop-down a {
        text-align: center;
        border: none;
        padding: 15px;
        background: #dcdcdc70;
    }

    .drop-link::after {
        display: inline-block;
    }

    .drop-link.Active::after {
        transform: rotate(180deg);
    }
}

.nav-item:hover .drop-down {
    visibility: visible;
    opacity: 1;
}

.nav-item {
    position: relative;
}

.drop-down {
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    margin: 0;
    min-width: 140px;
    padding: 13px 15px 14px;
    position: absolute;
    top: 100%;
    z-index: 9;
    transform: translateX(-50%);
    left: 50%;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 991px) {
    .nav-item {
        padding: 8px 0;
    }

    .nav-item .drop-down {
        top: calc(100% + 8px);
    }

    .nav-item .drop-down::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid var(--sec-color);
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        transition: 0.3s;
        opacity: 1;
    }
}

.drop-down>a {
    font-size: 15px;
    font-weight: 400;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
    padding: 0 0 6px;
    margin-bottom: 5px;
    display: block;
    text-align: center;
    border-bottom: 1px solid var(--main-color);
}

.drop-down>a:last-of-type {
    margin-bottom: 0;
    border: none;
}

.drop-down>a:hover,
.drop-down>a:focus {
    color: var(--main-color);
    text-decoration: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: none;
}

@media (max-width: 991px) {
    .navbar {
        position: fixed;
        top: 15px;
        left: 15px;
        right: 15px;
        height: 100%;
        z-index: 10;
        margin: 0;
        padding: 0;
        display: none;
    }

    .navbar .nav {
        width: 100%;
        padding: 35px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        border-radius: 15px;
        position: relative;
        margin: 0;
        background-color: white;
        border: 2px solid rgb(0 0 0 / 6%);
        transition: all 0.3s ease-in-out;
        transform: scale(0);
        opacity: 0;
    }

    .navbar .nav.active {
        opacity: 1;
        transform: scale(1);
    }

    .navbar .nav-item {
        margin: 10px 0;
    }

    .navbar .nav-item~.nav-item {
        margin-inline: 0;
    }

    .navbar .nav-link {
        font-weight: 400;
        font-size: 17px;
        color: var(--white-color);
    }

    .navbar .nav-link:hover {
        color: var(--white-color);
    }

    .navbar .nav-link.active {
        font-weight: 700;
        color: var(--main-color);
    }
}

.lang-ancor {
    width: 79px;
    height: 54px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    background-color: #ececec;
    border: 1px solid hsl(0, 0%, 92%);
    color: var(--main-color);
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
}

.lang-ancor:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: #ffffff;
}

@media (max-width: 380px) {
    .lang-ancor {
        width: 65px; /* تقليل العرض */
        height: 45px; /* تقليل الارتفاع */
        font-size: 16px; /* تصغير حجم الخط */
        border-radius: 18px; /* ضبط الانحناء ليظل متناسقًا */
    }
}


.main-section {
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    padding: 90px 0 100px;
    background-size: cover;
    /* لتغطية كامل المساحة */
    background-position: center center;
    /* لضبط الصورة في منتصف المساحة */
    background-repeat: no-repeat;
    /* لتجنب تكرار الصورة */
}

.services-icon img {
    filter: invert(61%) sepia(93%) saturate(600%) hue-rotate(1deg) brightness(100%) contrast(98%);
}



@media only screen and (max-width: 991px) {
    .main-section {
        padding: 30px 0 60px;
    }
}


.process-section {
    background-color: #f5f5f5;
    padding: 60px 0;
}

.container {
    width: 90%;
    margin: 0 auto;
}

.process-head {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.process-pargh {
    text-align: center;
    font-size: 20px;
    color: #454444;
    margin-bottom: 40px;
    font-weight: 300px;
}

.message-vision-goals {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section-box {
    padding: 20px;
    margin: 10px;
    width: 30%;
}

.section-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #2b2b2b;
    display: inline-block;
}

.section-box h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ffcc00;
    /* اللون الأصفر */
    margin-top: 5px;
}

.section-box h2::after {
    content: '';
    display: block;
    width: 40%;
    height: 4px;
    background-color: #ffcc00;
    /* اللون الأصفر */
    margin-top: 5px;
}

.section-box p,
.section-box ul {
    font-size: 20px;
    color: #666;
    margin-top: 10px;

}

.section-box ul {
    list-style-type: none;
    padding-left: 20px;
}




.main-cont {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
}

@media only screen and (max-width: 991px) {
    .main-cont {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
}

.main-content {
    width: 100%;
    text-align: start;
    color: var(--white-color);
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width: 991px) {
    .main-content {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

.main-title {
    font-weight: 600;
    font-size: 67px;
    line-height: 73px;
    margin-top: 180px;
    color: white;
    text-transform: capitalize;
}

.main-title span {
    color: rgb(200, 145, 6);
}

@media only screen and (max-width: 767px) {
    .main-title {
        font-size: 32px;
        line-height: 44px;
    }
}

.main-pargh {
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 55px;
    color: black;
}

@media only screen and (max-width: 767px) {
    .main-pargh {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

.main-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--white-color);
    background-color: var(--main-hover);
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    height: 67px;
    width: 100%;
    max-width: 231px;
}

.main-more:hover {
    background-color: var(--main-color);
}

.main-btn {
    width: 249px;
    max-width: 100%;
    height: 60px;
    border-radius: 20px;
    gap: 50px;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    background-color: rgb(232, 174, 13);
    color: white;
    font-size: 18px;
    font-weight: 700;
    background-image: linear-gradient(30deg, var(--main-color) 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    transition: background 300ms ease-in-out;
    transition: all 0.3s ease-in-out;
}


@media only screen and (max-width: 767px) {
    .main-btn {
        min-width: 110px;
        height: 45px;
        font-size: 14px;
    }
}

.main-btn:hover {
    color: white;
    background-color: var(--main-hover);
    background-position: 200%;
}

.btn-sm {
    font-size: 16px !important;
}

.socials.main-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* المسافة بين الأيقونات */
    flex-wrap: wrap;
}

.socials.main-socials .social {
    width: 42px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 20px;
}


.socials.main-socials .social:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
}

.main-content .socials.main-socials {}

@media only screen and (min-width: 992px) {
    .main-content .socials.main-socials {
        gap: 10px;
    }
}

.main-gif {
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.main-gif img {
    width: 100%;
}

@media only screen and (max-width: 991px) {
    .main-gif .socials.main-socials {
        margin-top: 30px;
    }
}

.services-section {
    padding: 60px 0 40px;
}

@media only screen and (max-width: 991px) {
    .services-section {
        padding: 50px 0;
    }
}

.section-head {
    text-transform: capitalize;
    font-size: 40px;
    font-weight: 600;
    color: var(--white-color);
    text-align: center;
    margin-bottom: 25px;
}

@media only screen and (max-width: 767px) {
    .section-head {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

.section-pargh {
    font-weight: 400;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 44px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .section-pargh {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

.services-cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media only screen and (max-width: 991px) {
    .services-cont {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .services-cont {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

.services-item {
    border: 1px solid #ececec;
    background-color: rgb(0 0 0 / 4%);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: start;
    transition: all 0.3s ease-in-out;
}

.services-item:hover {
    border-color: var(--main-color);
    background-color: rgba(205, 205, 205, 0.2);
}

@media only screen and (max-width: 767px) {
    .services-item {
        padding: 30px 20px;
    }
}

.services-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100px;
    border-radius: 50%;
    border: 2px solid;
    border-image-source: linear-gradient(138.41deg, #ececec 0.4%, #ececec 75.22%);
    background-color: #ededed;
    margin-bottom: 26px;
    transition: all 0.3s ease-in-out;
}

.services-item:hover img {
    animation: hithere 1s ease infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2);
    }

    40%,
    60% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    70% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.services-item-head {
    font-weight: 900;
    font-size: 21px;
    color: #000000;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.services-item-pargh {
    font-weight: 500;
    font-size: 16px;
    line-height: 31px;
    color: #000000;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .services-item-pargh {
        line-height: normal;
        font-size: 14px;
    }
}

.partners-section {
    background-color: white;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 100px 0 65px;
    text-align: center;

}

@media only screen and (max-width: 767px) {
    .partners-section {
        padding: 50px 0;
    }
}

.partners-bg {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    opacity: 0.4;
    position: absolute;
    inset: 0;
    top: 100px;
    width: 100%;
    z-index: -1;
}

@media only screen and (max-width: 767px) {
    .partners-bg {
        background-size: cover;
    }
}

.partners-cont {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 100px;
}

@media only screen and (max-width: 991px) {
    .partners-cont {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.partners-content {
    text-align: start;
}

@media only screen and (max-width: 991px) {
    .partners-content {
        text-align: center;
    }
}

.partners-title {
    font-weight: 600;
    font-size: 35px;
    color: black;
    text-transform: capitalize;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.partners-title::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 5.0px;
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
}

.partners-titles {
    font-weight: 600;
    font-size: 45px;
    color: black;
    text-transform: capitalize;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.partners-titles::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 5.0px;
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
}

@media only screen and (max-width: 767px) {
    .partners-title {
        font-size: 26px;
    }
}

.partners-pargh {
    font-weight: 400;
    font-size: 22px;
    color: var(--white-color);
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .partners-pargh {
        font-size: 18px;
    }
}

.partners-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 60px;
}

@media only screen and (max-width: 991px) {
    .partners-imgs {
        gap: 20px;
    }
}

.partners-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    max-width: 105px;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.partners-figure:nth-of-type(3) {
    max-width: 100px;
}

@media only screen and (max-width: 991px) {
    .partners-figure:nth-of-type(3) {
        max-width: 80px;
    }
}

.partners-figure:hover {
    transform: scale(1.05);
}

.design-section {
    padding: 45px 0 50px;
    margin-top: 50px;
}

@media only screen and (max-width: 767px) {
    .design-section {
        padding: 40px 0 60px;
    }
}

.design-cont {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
}

@media only screen and (max-width: 991px) {
    .design-cont {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.design-img {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 558/420;
    max-width: 558px;
    border-radius: 20px;
    object-fit: cover;
}

.design-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.design-content {
    text-align: start;
    padding-top: 10px;
}

@media only screen and (max-width: 767px) {
    .design-content {
        text-align: center;
        padding-top: 0;
    }
}

.design-head {
    font-weight: 600;
    font-size: 40px;
    color: var(--main-color);
    line-height: 56px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .design-head {
        font-size: 32px;
        line-height: normal;
    }
}

.design-pargh {
    font-weight: 400;
    font-size: 18px;
    color: rgb(0, 0, 0);
    margin-bottom: 30px;
    margin-top: 30px;
}

@media only screen and (max-width: 767px) {
    .design-pargh {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

.custom-ancor {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.6s ease-in-out, color 0.5s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    width: 181px;
    height: 60px;
    border: 2px solid var(--main-color);
    border-radius: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--white-color);
    background-color: transparent;
    outline: none !important;
    margin-top: 15px;
}

.custom-ancor:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
    border: none;
    transform: scale(1.05);
    box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.25);
}



@media only screen and (max-width: 767px) {
    .custom-ancor {
        margin: 0 auto;
    }
}

.process-section {
    padding: 30px 0 0px;
    background-color: white;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .process-section {
        padding: 50px 0;
    }
}

.process-head {
    font-weight: 700;
    font-size: 40px;
    color: var(--main-color);
    text-transform: capitalize;
    margin-bottom: 25px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .process-head {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

.process-pargh {
    font-weight: 500;
    font-size: 18px;
    color: rgb(0, 0, 0);
    text-align: center;
    max-width: 670px;
    margin: 0 auto 90px;
}

@media only screen and (max-width: 767px) {
    .process-pargh {
        font-size: 16px;
        margin: 0 auto 50px;
    }
}

.process-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
    padding-inline-end: 20px;
}

.process-graph {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px;
    padding-inline-end: 20px;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 991px) {
    .process-graph {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0;
    }
}

.process-item {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    text-align: start;
}

@media only screen and (max-width: 991px) {
    .process-item {
        text-align: center;
        align-items: center;
    }
}

.process-item span {
    font-weight: 600;
    font-size: 28px;
    text-transform: capitalize;
    color: white;
    display: inline-block;
    margin-bottom: 150px;
}

@media only screen and (max-width: 991px) {
    .process-item span {
        margin-bottom: 25px;
    }
}

.process-item figure {
    width: 80px;
    aspect-ratio: 1;
    border-radius: 20px;
    background-color: rgb(150, 150, 150);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}

@media only screen and (max-width: 991px) {
    .process-item figure {
        margin-bottom: 25px;
    }
}

@media only screen and (min-width: 992px) {
    .process-item:nth-of-type(1) figure {
        margin-inline-start: 9px;
    }

    .process-item:nth-of-type(4) figure {
        margin-inline-start: -20px;
    }
}

.process-item-pargh {
    font-weight: 500;
    font-size: 16px;
    color: var(--white-color);
    line-height: 25px;
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .process-item-pargh {
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
    }
}

.process-gif {
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 46px;
}

@media only screen and (max-width: 1199px) {
    .process-gif {
        top: 82px;
    }
}

@media only screen and (max-width: 991px) {
    .process-gif {
        display: none;
    }
}

html[dir=ltr] .process-gif {
    transform: scaleX(-1);
}

.work-section {
    padding: 90px 0 140px;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .work-section {
        padding: 50px 0;
    }
}

.work-section .section-head {
    margin-bottom: 45px;
}

.wotk-cont .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 70px;
}

@media only screen and (max-width: 767px) {
    .wotk-cont .nav {
        margin-bottom: 40px;
    }
}

.wotk-cont .nav-link {
    position: relative;
    background-color: transparent !important;
    color: black;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    padding: 0 5px;
}

.wotk-cont .nav-link::after {
    content: "";
    width: 100%;
    height: 0;
    border-radius: 30px;
    background-color: rgb(241, 186, 37);
    display: inline-block;
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: -5px;
}

.wotk-cont .nav-link:hover {
    color: black;
}

.wotk-cont .nav-link.active {
    color: black;
}

.wotk-cont .nav-link.active::after {
    height: 5px;
}

.work-tab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media only screen and (max-width: 991px) {
    .work-tab {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .work-tab {
        grid-template-columns: repeat(1, 1fr);
    }
}

.work-item {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.work-item figure {
    aspect-ratio: 365.41/382.45;
    position: relative;
    display: contents;
    align-items: center;
    justify-content: center;
}

.work-item figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.work-item:hover .work-hover {
    visibility: visible;
    opacity: 1;
}

@media only screen and (min-width: 992px) {
    .work-item:nth-of-type(2) .work-hover {
        visibility: visible;
        opacity: 1;
    }
}

.work-hover {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7882352941);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.work-hover span {
    width: 157px;
    height: 54px;
    border-radius: 50px;
    border: 3px solid var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: var(--white-color);
}

/*                         testimonials-section               */

.testimonials-section {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    background-color: white;
}

.testimonials-head {
    text-align: center;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 25px;
    line-height: 48px;
    color: black;
    max-width: 507px;
    margin: 25px auto 70px;
}

@media only screen and (max-width: 767px) {
    .testimonials-head {
        font-size: 24px;
        line-height: normal;
        margin: 0 auto 30px;
    }
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
}

@media only screen and (max-width: 767px) {
    .testimonials-slider {
        overflow: visible;
    }
}

.testimonials-cont {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px 35px;
    border: 1px solid rgba(89, 89, 89, 0.034);
    ;
    background-color: rgba(255, 255, 255, 0.05);
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0.5, 0.5, 0, 0.051);
}

@media only screen and (max-width: 767px) {
    .testimonials-cont {
        padding: 30px 20px;
    }
}

.swiper-slide-active .testimonials-cont {
    border-color: white;
    margin-top: -34px;
    width: 320px;
}

.testimonials-img {
    position: relative;
    margin-bottom: 18px;
}

.testimonials-img figure {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.testimonials-img figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.testimonials-img i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24.4px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #161629;
    background: rgb(255, 255, 255);
    font-size: 9px;
    color: var(--white-color);
    position: absolute;
    bottom: -2px;
    inset-inline-end: -2px;
}


@media only screen and (max-width: 767px) {
    .testimonials-pargh {
        line-height: normal;
    }
}

.testimonials-slider .swiper-pagination {
    position: relative;
    width: 100%;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 70px;
}

@media only screen and (max-width: 767px) {
    .testimonials-slider .swiper-pagination {
        margin-top: 30px;
    }
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgb(255, 255, 255);
    opacity: 0.2;
    transition: all 0.3s ease-in-out;
    outline: none !important;
    border-radius: 50%;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet:hover {
    background-color: var(--main-color);
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}



@media only screen and (max-width: 767px) {
    .contact-section {
        padding: 50px 0;
    }
}

.contact-section .section-head {
    margin-bottom: 45px;
    margin-top: 80px;
}

.contact-pargh {
    font-weight: 500;
    font-size: 18px;
    color: var(--white-color);
    max-width: 905px;
    margin: 0 auto 65px;
    text-align: center;
    line-height: 28.8px;
}

@media only screen and (max-width: 767px) {
    .contact-pargh {
        margin: 0 auto 40px;
    }
}

.contact-cont {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 54px;
}

@media only screen and (max-width: 991px) {
    .contact-cont {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
}

.contact-cont form {
    width: 100%;
    flex-shrink: 0;
    padding-top: 35px;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .contact-cont form {
        padding-top: 0;
        position: relative;
        left: 30%;
    }
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 100px;
    margin-bottom: 35px;
}

@media only screen and (max-width: 767px) {
    .contact-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.form-group {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    padding-top: 16px;
}

.form-group .animated-label {
    position: absolute;
    top: 20px;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    font-weight: 500;
    color: black;
    font-size: 18px;
    cursor: text;
    transition: 0.2s ease all;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


.form-group .animated-label:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 45%;
    height: 2px;
    width: 10px;
    visibility: hidden;
    background-color: var(--main-color);
    transition: 0.2s ease all;
}

.form-group.not-empty .animated-label {
    top: 0;
    font-size: 12px;
}

.form-group .form-control:not(:-moz-placeholder-shown)+.animated-label {
    top: 0;
    font-size: 12px;
}

.form-group .form-control:not(:placeholder-shown)+.animated-label {
    top: 0;
    font-size: 12px;
}

.form-group .form-control {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    height: 45px;
    padding: 3px 0 5px;
    font-weight: 500;
    color: var(--white-color);
    font-size: 18px;
    background-color: transparent;
}

.form-group .form-control:focus {
    box-shadow: none;
    border-bottom-color: var(--main-color);
}

.form-group .form-control:focus~.animated-label {
    top: 0;
    opacity: 1;
    color: var(--main-color);
    font-size: 12px;
}

.form-group .form-control:focus~.animated-label:after {
    visibility: visible;
    width: 100%;
    left: 0;
}

.full-grid {
    grid-column: 1/-1;
}

.submit-btn {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
    border: none;
    padding: 20px 310px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.5s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #ad762e, #8c5e24, #5c3714);
    transform: scale(1.03); /* تكبير بسيط لجعل التأثير أنيقًا */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* زيادة الظل عند التحويم */
}

.submit-btn:active {
    transform: scale(0.97); /* تصغير بسيط عند الضغط */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); /* تقليل الظل عند الضغط لمحاكاة الضغط */
}


@media (max-width: 768px) {
    .submit-btn {
        padding: 14px 20px;
        font-size: 14px;
        max-width: 90%;
        min-width: 275px;
    }
}

@media (max-width: 380px) {
    .submit-btn {
        padding: 12px 15px;
        font-size: 14px;
        max-width: 90%;
    }
}

.contact-content {
    background-color: rgb(0 0 0 / 4%);
    border-radius: 20px;
    padding: 35px 30px;
}

@media only screen and (max-width: 767px) {
    .contact-content {
        padding: 30px 20px;
    }
}

.contact-header {
    font-weight: 700;
    font-size: 24px;
    color: var(--white-color);
    margin-bottom: 15px;
}

.contact-text {
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 35px;
    line-height: 25.6px;
}

.line-title-design-content {
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    width: 220px;
    height: 4.2px;
    background-color: #ad762e;
}

@media screen and (max-width: 768px) {

    .contact-text {
        font-weight: 500;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.6);
        margin-bottom: 35px;
        line-height: 25.6px;
    }

    .contact-item span {
        font-size: 16px;
        /* تغيير حجم الخط */
        font-weight: bold;
        /* جعل النص غامقًا */
    }

    .line-title-design-content {
        position: absolute;
        bottom: -9px;
        left: 0;
        right: 0;
        width: 200px;
        height: 4.2px;
        margin-right: 20px;
        background-color: #ad762e;
    }

}


.contact-ancors {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: baseline;
    text-align: start;
    gap: 20px;
    font-size: 18px;
    font-weight: 500;
    color: black;
    transition: all 0.3s ease-in-out;
    margin-top: 30px;
    margin-bottom: 20px;
}

.contact-item i {
    width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #252525;
    font-size: 15px;
    color: var(--black-color);
}

a.contact-item:hover {
    color: var(--main-color);
}

a.contact-item:hover i {
    background-color: var(--main-color);
}

.contact-info-head {
    font-weight: 600;
    font-size: 24px;
    color: var(--white-color);
    margin-bottom: 40px;
    text-align: start;
}

.contact-social {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.contact-social a {
    display: inline-block;
    transition: all 0.3s ease-in-out;
    color: var(--white-color);
    font-size: 21px;
}

.contact-social a:hover {
    color: var(--main-color);
}

.check-group {
    text-align: start;
    margin-bottom: 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 40px 60px;
}

@media only screen and (max-width: 767px) {
    .check-group {
        gap: 20px;
    }
}

.form-group .main-check-label {
    font-weight: 500;
    font-size: 18px;
    color: var(--white-color);
    text-align: start;
    text-transform: capitalize;
    margin-bottom: 25px;
}

.check-label .checkmark {
    position: relative;
    width: 25px;
    /* زيادة الحجم لتوضيح الأيقونة */
    height: 25px;
    border: 2px solid #bbb;
    /* يمكنك تغيير اللون */
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    /* جعل المربع دائري */
    vertical-align: middle;
    background-color: transparent;
    /* خلفية شفافة */
}

/* عند تحديد الـ checkbox */
.check-label input[type="checkbox"]:checked+.checkmark::after {
    content: "✔";
    position: absolute;
    top: 50%;
    /* لضبط الموقع عموديًا */
    left: 50%;
    /* لضبط الموقع أفقيًا */
    color: #ffffff;
    /* لون علامة الصح */
    font-size: 18px;
    /* تغيير حجم الأيقونة */
    transform: translate(-50%, -50%);
    /* لتحريك العلامة إلى المركز */
    opacity: 1;
    visibility: visible;
}

.check-label .checkmark::after {
    opacity: 0;
    visibility: hidden;
}

.check-width {
    min-width: 25%;
}

.check-label {
    /* min-width: 25%; */
    text-align: start;
    position: relative;
    font-weight: 500;
    font-size: 20px;
    color: var(--white-color);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}

.check-group input[type=checkbox],
.check-group input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.check-group .checkmark {
    border: 2px solid #aeaeae;
    background-color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.check-group .custom-checkmark {
    border-radius: 2px;
}

.check-width:hover input~.checkmark {
    background-color: var(--main-color);
    border-color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.check-group input:checked~.checkmark {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

/* .check-group:hover input ~ .check-text {
  color: var(--main-hover);
}
.check-group input:checked ~ .check-text {
  color: var(--main-hover);
} */

.checkmark:after {
    content: "✔";
    position: absolute;
    opacity: 0;
    visibility: visible;
}

.check-group input:checked~.checkmark:after {
    opacity: 1;
    visibility: visible;
}

.check-group .checkmark:after {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    color: var(--black-color);
}

.form-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    height: 45px;
    width: 100%;
    padding: 0;
    border-radius: 0;
    text-align: start;
    color: var(--white-color);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 0;
    outline: none !important;
    transition: all 0.3s ease-in-out;
    caret-color: var(--main-color);
}

.form-input:focus {
    border-color: var(--main-color);
}

.form-input::-moz-placeholder {
    color: var(--white-color);
}

.form-input::placeholder {
    color: var(--white-color);
}

.form-group .form-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 25px;
    display: block;
    text-transform: capitalize;
}

.faq-section {
    padding: 60px 0 0;
    background-color: white;
    overflow: hidden;
}

.faq-section .section-head {
    margin-bottom: 75px;
    margin-top: 35px;
}

@media only screen and (max-width: 767px) {
    .faq-section {
        padding: 60px 0;
    }

    .faq-section .section-head {
        margin-bottom: 35px;
    }
}

.collapse_parant {
    display: flex;
    background-color: rgb(0 0 0 / 4%);
    border: 1px solid #d8d8d821;
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 35px 40px;
}

@media only screen and (max-width: 767px) {
    .collapse_parant {
        padding: 30px 20px;
        margin-bottom: 20px;
    }
}

.collapse_parant .group_collapse {
    width: 100%;
}

.collapse_parant .btn_collapse_ {
    font-weight: 500;
    font-size: 24px;
    color: var(--white-color);
    padding: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-transform: capitalize;
    text-align: start;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .collapse_parant .btn_collapse_ {
        font-size: 20px;
    }
}

.collapse_parant .btn_collapse_ span {
    max-width: 640px;
}

.collapse_parant .toggle_collapse {
    font-weight: 400;
    font-size: 16px;
    text-align: start;
    line-height: 26px;
    display: none;
    color: #000000;
    margin-top: 35px;
    padding-inline-end: 60px;
}

@media only screen and (max-width: 767px) {
    .collapse_parant .toggle_collapse {
        padding: 0;
    }
}

.collapse_parant .toggle_collapse.open-collapse {
    display: block;
}

.icon-wrapper {
    width: 26px;
    height: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper i {
    display: inline-block !important;
    font-size: 24px !important;
    color: #000 !important;
    /* اختر لوناً مرئياً */
    visibility: visible !important;
}

.icon-wrapper.is-active i {
    color: #000;
    transform: rotate(179deg);
    margin-inline-end: 3px;
}

@media only screen and (max-width: 767px) {
    .icon-wrapper.is-active i {
        color: #000;
        margin-inline-end: 2px;
    }
}


html[dir=rtl] .icon-wrapper.is-active i {
    transform: rotate(180deg);
}

.faq-item {
    font-weight: 500;
    font-size: 24px;
    color: var(--white-color);
    padding: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-transform: capitalize;
    text-align: start;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .faq-item {
        font-size: 20px;
    }
}

.faq-ancor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: white;
    background-color: var(--main-color);
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
    height: 46px;
    width: 148px;
    flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
    .faq-item {
        font-size: 20px;
    }

    .faq-ancor {
        height: 50px;
        width: 180px;
    }
}

.faq-ancor:hover {
    background-color: rgb(241, 186, 37);
    color: white
}

/*                                   footer                            */

.footer {
    padding: 85px 0;
}


@media (max-width: 991px) {
    .footer {
        padding: 40px 0;
    }
}

@media (max-width: 991px) {
    .footer-info {
        margin-bottom: 40px;
        margin-top: 200;
    }
}

.footer-logo {
    width: 124px;
    display: block;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .footer-logo {
        margin: 0 auto 20px;
        margin-top: 110px;
    }
}

.footer-p {
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin-bottom: 10px;
}

@media only screen and (max-width: 991px) {
    .footer-p {
        text-align: center;
    }
}

.socials {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 15px;
}

@media (max-width: 991px) {
    .socials {
        justify-content: center;
        margin-bottom: 20px;
    }
}

.social {
    border-radius: 50%;
    background-color: #252525;
    width: 34px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

.social:hover {
    color: white;
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
}

.copy-footer {
    text-align: center;
    border-top: 1px solid #858584;
    padding: 20px 0 30px;
}

.copy-footer p {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    margin: 0;
}

.footer-nav {
    margin: 15px 0 0;
}

.footer-newsletter {
    margin: 15px 0 0;
    text-align: start;
}

@media (max-width: 991px) {
    .footer-newsletter .footer-title {
        text-align: center;
    }
}

.footer-title {
    font-size: 24px;
    font-weight: 700;
    color: black;
    margin: 0 0 35px;
    text-align: start;
}

@media (max-width: 991px) {
    .footer-title {
        margin: 0 0 20px;
    }
}

@media (max-width: 767px) {
    .footer-title {
        text-align: center;
    }
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media (min-width: 767px) {
    .footer-list {
        display: flex;
        flex-direction: column;
        max-height: 190px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .footer-list {
        text-align: center;
    }
}

.footer-item {
    margin: 0 0 20px;
}

@media (max-width: 991px) {
    .footer-item {
        margin-bottom: 10px;
    }
}

.footer-link {
    font-size: 16px;
    font-weight: 400;
    color: var(--white-color);
    display: inline-flex;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

.footer-link:hover {
    color: var(--main-color);
}

html[dir=rtl] .footer-link:hover {
    transform: translateX(-5px);
}

html[dir=ltr] .footer-link:hover {
    transform: translateX(5px);
}

.newsletter-title {
    font-size: 16px;
    font-weight: 400;
    color: #0a0a0a;
    margin: 0 0 40px;
}

@media (max-width: 991px) {
    .newsletter-title {
        text-align: center;
        margin-bottom: 20px;
    }
}

.newsletter-form {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 991px) {
    .newsletter-form {
        margin-bottom: 5px;
    }
}

.newsletter-input {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--main-color);
    height: 54px;
    border-radius: 20px;
    padding-inline-end: 180px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 400;
    outline: none !important;
    color: #c4c4c4;
    transition: all 0.3s ease-in-out;
    direction: inherit;
}

.newsletter-input::-moz-placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #c4c4c4;
}

.newsletter-input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #c4c4c4;
}

.newsletter-input:focus {
    border-width: 2px;
}

.newsletter-btn {
    height: 46px;
    width: 148px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: var(--main-color);
    border-radius: 20px;
    border: none;
    outline: none !important;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
    .newsletter-btn {
        width: 130px;
    }
}

.newsletter-btn:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;

}

@media (max-width: 991px) {
    .nav-foot {
        display: flex;
        flex-direction: column;
    }

    .footer-list,
    .contacts-list {
        align-items: flex-start;
    }

    .social {
        justify-content: center;
    }
}

/*                             footer accordion                 */

.footer-accordion.nav-foot-header {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-accordion {
    cursor: pointer;
    width: 100%;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-panel {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-out;
    padding: 0 15px;
}

.news-letter .footer-panel {
    padding: 0;
}

.footer-accordion:after {
    font-weight: 900;
    font-size: 13px;
    transition: all 0.5s ease-out;
}



html[dir=rtl] .footer-accordion:after {
    content: "\f0c9"; /* استبدال الرمز بالقائمة */
    font-family: "Font Awesome 5 Free"; /* تعيين الخط المناسب */
    font-weight: 900; /* ضبط وزن الخط */
    display: inline-block;
    margin-left: 5px; /* إضافة فراغ من اليسار */
}

.footer-accordion.active:after {
    transform: rotate(90deg);
}

html[dir=rtl] .footer-accordion.active:after {
    transform: rotate(-90deg);
}

/*                             footer accordion                 */

/*                                   footer                            */

.content-section {
    margin-bottom: 35px;
    margin-top: 30px;
}


.solution-head::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--main-color);
    display: block;
}


@media only screen and (max-width: 767px) {
    .page-title {
        font-size: 48px;
    }
}

.page-pargh {
    font-weight: 500;
    font-size: 18px;
    line-height: 28.8px;
    color: var(--white-color);
    text-align: center;
    max-width: 690px;
    margin: 20px auto 65px;
}

@media only screen and (max-width: 767px) {
    .page-pargh {
        margin: 0 auto 45px;
    }
}

.bolg-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

@media only screen and (max-width: 991px) {
    .bolg-section {
        grid-template-columns: 1fr;
        position: relative;
        right: 15%;
    }
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 30px;

}

@media only screen and (max-width: 767px) {
    .blog-cards {
        gap: 20px;
        position: relative;
        left: 10%;
        min-width: 150px;
    }
}

@media only screen and (max-width: 500px) {
    .blog-cards {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 320px;
    max-width: 300px;
}

.title-course{}


/* Responsive Design */
@media (max-width: 1200px) {
    .blog-card {
        width: calc(33.33% - 20px);
    }
}

@media (max-width: 992px) {
    .blog-card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .title-course span {
        width: 70%;
    }

    .page-pargh {
        font-size: 15px;
    }

    .blog-card {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .title-course {
        font-size: 20px;
    }

    .page-pargh {
        font-size: 14px;
    }

    .blog-title {
        font-size: 16px;
    }

    .blog-info {
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .blog-card {
        gap: 20px;
        position: relative;
        left: 5%;
        right: -5%;
        min-width: 150px;
    }
}

.blog-img {
    display: block;
    flex-shrink: 0;
}

.blog-img figure {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 354/278;
    border-radius: 20px;
}

.blog-img figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.blog-img:hover img {
    transform: scale(1.05);
}

.blog-content {
    padding: 0 20px 25px;

}

.blog-title {
    color: var(--white-color);
    text-decoration: none !important;
    font-size: 20px;
    font-weight: 600;
    text-align: start;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 25px;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
    .blog-title {
        font-size: 18px;
    }
}

.blog-title:hover {
    color: var(--main-color);
}

.blog-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--main-color);
    font-size: 12px;
    font-weight: 600;
}

.blog-shortcut {
    width: 100%;
    overflow: hidden;
    padding-top: 5px;
}

.shortcut-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--white-color);
    margin-bottom: 25px;
    text-transform: capitalize;
}

.shortcut-flex {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shortcut-flex .blog-card {
    background-color: var(--black-color);
    flex-direction: row;
    gap: 12px;
    border-radius: 20px;
}

.shortcut-flex figure {
    aspect-ratio: 1;
    max-width: 100px;
    max-height: 100%;
    height: 100%;
    flex-shrink: 0;
}

.shortcut-flex .blog-content {
    padding: 15px 0 10px;
    padding-inline-end: 20px;
}

.shortcut-flex .blog-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 17px;
}

.shortcut-flex .blog-info {
    color: rgba(255, 255, 255, 0.6);
}

.blog-detail {
    margin-bottom: 100px;
}

@media only screen and (max-width: 767px) {
    .blog-detail {
        margin-bottom: 60px;
    }
}

.blog-detail .blog-info {
    font-size: 18px;
    margin-bottom: 30px;
}


.blog-detail-img {
    width: 100%;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1127/560;
    border-radius: 20px;
    margin-bottom: 35px;
}

.blog-detail-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.3s ease-in-out;

}

.blog-detail-head {
    font-weight: 600;
    font-size: 43px;
    color: var(--white-color);
    text-align: start;
    margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
    .blog-detail-head {
        font-size: 24px;
    }
}

.blog-detail-pargh {
    font-weight: 400;
    font-size: 20px;
    color: var(--white-color);
    text-align: start;
    margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .blog-detail-pargh {
        font-size: 16px;
    }
}

.blog-detail-h {
    font-weight: 700;
    font-size: 30px;
    color: var(--white-color);
    text-align: start;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .blog-detail-h {
        font-size: 24px;
    }
}

.related-head {
    font-weight: 600;
    font-size: 32px;
    color: var(--white-color);
    text-align: start;
    margin-bottom: 30px;
    margin-top: -35px;
}

@media only screen and (max-width: 767px) {
    .related-head {
        font-size: 30px;
    }
}

.team-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 79px;
    margin-bottom: 60px;
}

@media only screen and (max-width: 991px) {
    .team-section {
        justify-content: center;
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }
}

.team-content {
    text-align: start;
}

@media only screen and (max-width: 991px) {
    .team-content {
        text-align: center;
    }
}

.team-head {
    font-weight: 600;
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 15px;
    text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
    .team-head {
        font-size: 32px;
    }
}

.team-pargh {
    font-weight: 400;
    font-size: 16px;
    color: var(--white-color);
    margin-bottom: 0;
    line-height: 25.6px;
}

.team-img {
    width: 100%;
    max-width: 564px;
    flex-shrink: 0;
}

.team-img figure {
    position: relative;
    overflow: hidden;
    border-radius: 44px;
    aspect-ratio: 564/360;
    width: 100%;
}

.team-img figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.leader-section {
    text-align: center;
}

.leader-section .page-pargh {
    margin-bottom: 37px;
}

.leader-cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 200px;
    grid-auto-rows: 1fr;
}

@media only screen and (max-width: 1199px) {
    .leader-cont {
        gap: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .leader-cont {
        gap: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .leader-cont {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.leader-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.leader-item figure {
    aspect-ratio: 1;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 3px solid #ffffff;
    margin-bottom: 20px;
}

.leader-item figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.leader-item:hover img {
    transform: scale(1.05);
}

.leader-name {
    font-weight: 600;
    font-size: 24px;
    color: var(--white-color);
    margin-bottom: 5px;
}

@media only screen and (max-width: 500px) {
    .leader-name {
        font-size: 20px;
    }
}

.leader-desc {
    font-weight: 500;
    font-size: 16px;
    color: var(--white-color);
}




.large-text {
    font-size: 20px !important;
    line-height: 1.6;
}

@media only screen and (max-width: 576px) {
    .large-text {
        font-size: 18px !important;
    }
}


.large-text {
    font-size: 20px !important;
    line-height: 1.6;
}

@media only screen and (max-width: 576px) {
    .large-text {
        font-size: 18px !important;
    }
}

.service-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px;
    margin-top: 50px;
}

/* باقي الـ CSS كما هو بدون تغيير */

.service-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px;
    margin-top: 50px;
}

@media only screen and (max-width: 991px) {
    .service-section {
        justify-content: center;
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
        margin-bottom: 40px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .service-section {
        gap: 20px;
        margin-bottom: 30px;
        margin-top: 20px;
    }
}

.service-content {
    text-align: start;
}

@media only screen and (max-width: 991px) {
    .service-content {
        text-align: center;
        width: 100%;
    }
}

.service-title {
    font-weight: 600;
    font-size: 45px;
    color: var(--main-color);
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .service-title {
        font-size: 32px;
        margin-bottom: 25px;
    }
}

@media only screen and (max-width: 576px) {
    .service-title {
        margin-bottom: 20px;
        margin-top: 19px;
    }
}

.solution-pargh {
    font-weight: 500;
    font-size: 22px;
    color: var(--white-color);
    line-height: 30px;
    margin-bottom: 0;
}

@media only screen and (max-width: 576px) {
    .service-pargh, .service-content div p {
        font-size: 18px;
        line-height: 1.5;
    }
}

.service-img {
    width: 100%;
    max-width: 508px;
    flex-shrink: 0;
}

@media only screen and (max-width: 991px) {
    .service-img {
        max-width: 100%;
    }
}

.service-img figure {
    position: relative;
    overflow: hidden;
    border-radius: 39px;
    aspect-ratio: 508/360;
    width: 100%;
}

@media only screen and (max-width: 576px) {
    .service-img figure {
        border-radius: 20px;
    }
}

.service-img figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.solution-section {
    margin-bottom: 120px;
}

@media only screen and (max-width: 767px) {
    .solution-section {
        margin-bottom: 60px;
        text-align: center;
    }
}




@media only screen and (max-width: 576px) {
    .solution-section {
        margin-bottom: 40px;
    }
}

.solution-head {
    font-weight: 700;
    font-size: 32px;
    color: var(--main-color);
    margin-bottom: 50px;
    text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
    .solution-head {
        margin-bottom: 30px;
        font-size: 24px;
        text-align: center;
    }
}

@media only screen and (max-width: 576px) {
    .solution-head {
        font-size: 23px;
        margin-bottom: 20px;
    }
}

.solution-cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 80px;
    grid-auto-rows: 1fr;
}

@media only screen and (max-width: 1199px),
       only screen and (max-width: 991px) {
    .solution-cont {
        gap: 20px;
    }
}





@media only screen and (max-width: 767px) {
    .solution-cont {
        grid-template-columns: 1fr;
        gap: 15px !important;
        padding: 0 10px;
    }
}

.solution-item {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
}

.solution-item-Paragraph {
    margin-top: 65px;
}

@media only screen and (max-width: 767px) {
    .solution-item {
        text-align: center;
        padding: 0 !important;
        margin: 0 !important;
    }

    .solution-pargh,
    .solution-pargh p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .solution-pargh br {
        display: none !important;
    }

    .solution-title {
        margin-bottom: 10px !important;
        font-size: 20px !important;
        min-height: auto !important;
        text-align: center !important;
    }

    .solution-item-Paragraph {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }
}

@media only screen and (max-width: 576px) {
    .solution-item-Paragraph {
        margin-top: 30px;
    }

    .solution-title, .solution-title-Paragraph {
        font-size: 18px !important;
        text-align: center !important;
    }

    }
    .solution-cont {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 10px !important;
        width: 100% !important;
    }

    .solution-item {
        width: 100% !important;
        text-align: center !important;
    }

    .solution-title {
        font-size: 18px !important;
        text-align: center !important;
    }

    .solution-pargh {
        font-size: 16px !important;
        text-align: center !important;
        line-height: 1.6 !important;
    }
}

.solution-title {
    font-weight: 600;
    font-size: 26px;
    color: var(--main-color);
    text-transform: capitalize;
    min-height: 53px;
}

.solution-title-Paragraph {
    font-weight: 600;
    font-size: 26px;
    color: var(--main-color);
    margin-bottom: -25px;
    text-transform: capitalize;
    min-height: 53px;
}

.rest-work-head {
    font-weight: 600;
    font-size: 30px;
    color: var(--white-color);
    text-transform: capitalize;
    margin-bottom: 28px;
}

@media only screen and (max-width: 767px) {
    .rest-work-head {
        font-size: 24px;
        text-align: center;
    }
}

@media only screen and (max-width: 576px) {
    .rest-work-head {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* Froala Editor Message */
p[data-f-id="pbf"] {
    display: none;
}

/* Container Padding */
@media only screen and (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* عرض 3 كروت في شاشة الويب */
@media only screen and (min-width: 992px) {
    .solution-cont {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 60px 80px !important;
        padding: 0 !important;
    }

    .solution-item {
        text-align: start !important;
    }

    .solution-title, .solution-pargh {
        text-align: start !important;
    }
}


/* Slider */
.wrapper {
    width: 100%;
    height: 100vh;
}

.wrapper-inner {
    width: 100%;
    height: 90vh;
}

.slide {
    width: 100%;
    height: 100vh;
    position: relative;
}

.slide .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide .bg-info {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    align-content: flex-start;
}

.slide .bg-info p {
    font-weight: 400;
    font-size: 25px;
    letter-spacing: 5px;
    margin-bottom: 10px;
}

.slide .bg-info h1 {
    text-align: center;
    font-size: 45px;
    font-weight: 600;
    margin-right: 95px;
    margin-bottom: 40px;
}

.slide .bg-info button {
    background-color: white;
    color: black;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1rem;
    margin-right: 95px;
    font-weight: 500;
    border: none;
    transition: background 0.6s ease-in-out, color 0.5s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.slide .bg-info button:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
    transform: scale(1.05);
    box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.25);
}



.title-main {
    color: rgb(241, 186, 37);
}

.socials-swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 100px;
    margin-right: 95px;
    position: absolute;
    left: 5%;
    bottom: 10%;
}



.socials-swiper .socials-item {
    background: rgba(0, 0, 0, 0.105);
    padding: 10px 10px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    /* لإنشاء صندوق مرن */
    align-items: center;
    /* لتوسيط الأيقونات عمودياً */
    justify-content: center;
    /* لتوسيط الأيقونات أفقياً */
    color: white;
    /* لون الأيقونات */
    font-size: 20px;
    /* حجم الأيقونات */
}

.socials-swiper :hover {
    background: var(--main-color);
    color: white;
}



/* للشاشات الصغيرة (الجوال) */
@media (max-width: 768px) {
    .slide .bg-info h1 {
        font-size: 30px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .slide .bg-info button {
        padding: 10px 20px;
        font-size: 0.8rem;
        margin-right: 20px;
    }

    .socials-swiper {
        margin-right: 20px;
        bottom: 5%;
        gap: 10px;
    }

    .socials-swiper .socials-item {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* للشاشات المتوسطة (الأجهزة اللوحية) */
@media (max-width: 1024px) {
    .slide .bg-info h1 {
        font-size: 35px;
        margin-right: 50px;
        margin-bottom: 30px;
    }

    .slide .bg-info button {
        padding: 12px 25px;
        font-size: 0.9rem;
        margin-right: 50px;
    }

    .socials-swiper {
        margin-right: 50px;
        gap: 12px;
    }

    .socials-swiper .socials-item {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/* للشاشات الكبيرة (أكثر من 1024px) */
@media (min-width: 1025px) {
    .slide .bg-info h1 {
        font-size: 45px;
        margin-right: 95px;
        margin-bottom: 40px;
    }

    .slide .bg-info button {
        padding: 15px 30px;
        font-size: 1rem;
        margin-right: 95px;
    }

    .socials-swiper {
        margin-right: 95px;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .slide .bg-info {
        align-items: center;
        /* اصطفاف العناصر في المنتصف أفقيًا */
        text-align: center;
        /* توسيط النصوص */
    }

    .slide .bg-info h1 {
        font-size: 25px;
        margin: 0 0 20px 0;
        /* إزالة الهوامش الجانبية */
    }

    .slide .bg-info button {
        padding: 10px 20px;
        font-size: 0.9rem;
        margin: 0;
        /* إزالة الهوامش الجانبية */
    }

    .socials-swiper {
        position: static;
        /* إلغاء التموضع المطلق */
        margin: 20px 0 0 0;
        /* إضافة مسافة فوق الأيقونات */
        gap: 10px;
        /* تقليل المسافات بين الأيقونات */
        justify-content: center;
        /* توسيط الأيقونات أفقياً */
    }

    .socials-swiper .socials-item {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .slide {
        display: flex;
        /* تحويل السلايد إلى عنصر مرن */
        flex-direction: column;
        /* ترتيب العناصر عموديًا */
        justify-content: center;
        /* توسيط العناصر عموديًا */
        align-items: center;
        /* توسيط العناصر أفقيًا */
    }
}

.item-Course {
    width: 300px;
    height: 370px;
    border: 1.5px solid #ececec;
    background-color: rgb(0 0 0 / 4%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
}

.Course-Icon-item {
    padding: 15px 15px;
    border-radius: 20px;
    background-color: #ededed;

}

.item-Course:hover {
    border: 1px solid rgb(241, 186, 37);

}

.title-course-item {
    font-size: 19px;
    margin-top: 10px;
}

.Course-item-pargh {
    text-align: center;
    font-size: 14px;
    padding: 5px 10px;
    margin-top: 5px;
    /* إضافة مسافة صغيرة أعلى الفقرة */
    line-height: 1.6;
    font-weight: 400;
}

.Course-slide-swiper-slide {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.Course-wrapper-inner-swiper-wrapper {
    margin: 60px 30px;

}

.Container-Courses h1 {
    text-align: center;
    font-weight: 500;
    margin-top: 60px;
    display: inline-block;
}

.title-Container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Course Card */



.Container-Courses {
    padding: 20px;
    text-align: center;
}

.title-Container h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.Slide-container {
    display: flex;
    justify-content: center;
}

.Slide-Content {
    display: flex;
    gap: 20px;
}

.Card-Content {
    display: flex;
    justify-content: center;
}

.Slide-Content {
    margin: 0 40px;
    overflow: hidden;
}

.Slide-Container {
    max-width: 1050px;
    width: 100%;
    padding: 40px 0;
    max-height: 750px;
}

.Image-Content {
    height: 50%;
    overflow: hidden;
    position: relative;
    max-height: 180px;
}

.Image-Course {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 270px;
    max-height: 220px;
}
.Image-Course:hover{
    transform: scale(1.05);
}

.Content-Card {
    padding: 10px;
}

.Card-Title {
    margin: 8px 0 8px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}


@media (max-width: 380px) {

.Card-Title {
    font-size: 14px;
}
}

.Card-Title-Course {
    margin: 8px 0 8px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

.Card-Description-Course {
    margin: 0;
    font-size: 16px;
    color: #555;
}

.Card-Description {
    margin: 0;
    font-size: 16px;
    color: #555;
}

.button-Card {
    background-color: rgba(255, 255, 255, 0.849);
    color: black;
    border: solid 1px rgba(110, 110, 110, 0.536);
    padding: 12px 35px;
    border-radius: 10px;
    margin-bottom: 8px;
    position: absolute;
    bottom: 14px;
    transition: background 0.6s ease-in-out, color 0.5s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.button-Card:hover {
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    color: white;
    border: none;
    transform: scale(1.04); /* تقليل التكبير ليكون طبيعيًا */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* تحسين الظل لإضافة عمق */
}

.title-design-content {
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 5px;
    position: relative;
}

.Content-Card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}

.Card .swiper-slide {
    width: 0;
}

.swiper-button-next {
    margin-right: 10px;
}

.swiper-button-prev {
    margin-left: 10px;
}

.description-Course {
    font-size: 20px;
    padding: 10px;
    margin: 20px;
    text-align: center;
}

.title-course {
    font-size: 40px;
    font-weight: 500;
    margin-top: 70px;
}


.Container-Courses {
    margin-top: 50px;
}

.Card-Description {
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* الأساسيات (لأجهزة الويب الكبيرة) */
.Container-Courses {
    padding: 20px;
    text-align: center;
    margin-top: 50px;
}

.title-course {
    font-size: 40px;
    font-weight: 500;
}

.description-Course {
    font-size: 20px;
    padding: 10px;
    margin-bottom: 20px;
}

.Card {
    width: 100%;
    height: 500px;
    border: 1px solid #ddd;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    text-align: right;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 15px;
    min-height: 400px;
    max-height: 400px;
}

.Slide-Container {
    max-width: 1050px;
    width: 100%;
    padding: 40px 0;
    max-height: 750px;
    margin: 0 auto;
}

.Slide-Content {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .Container-Courses {
        padding: 15px;
    }

    .title-course {
        font-size: 26px;
    }

    .description-Course {
        font-size: 16px;
    }

    .Slide-Content {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-around;
    }

    .Card {
        width: 45%;
        height: auto;
        margin-bottom: 20px;
    }

    .button-Card {
        padding: 8px 20px;
        font-size: 14px;
    }
}



/* لأجهزة الموبايل */
@media (max-width: 480px) {
    .Slide-Content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: hidden;
        gap: 0;
    }

    .Card {
        flex: 0 0 100%;
        /* تأكد من أن البطاقة تأخذ عرض الشاشة بالكامل */
        width: 100%;
        margin: 0;
    }

    .button-Card {
        padding: 10px 20px;
        font-size: 14px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
        /* إخفاء أزرار التمرير */
    }
}




/**/



.swiper-button-next .button-next {
    margin-right: 50px;
}


.swiper-button-next,
.swiper-button-prev {
    margin-right: -10px;

}

.icon-next {
    margin-right: 50px;

}

.icon-Prev {
    margin-left: 50px;

}


.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    margin-left: -10px;
}

.wrapper .swiper-pagination-bullet-active {
    width: 20px;
    opacity: 1;
    border-radius: 7px;
    background-color: white;
}


.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 100;
    top: 70px;
    bottom: 50%;
    color: black;
    opacity: 1;
    /* تأكد من أن الشفافية هي 1 ليتم عرضها */
    padding-top: 20px;
}

.new-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: auto;
}

.icon-nextss {
    margin-right: 5px;
    color: white;
}

.icon-Prevss {
    margin-left: 5px;
    color: white;
}


.icon-Prev,
.icon-next {
    image-rendering: unset !important;
    max-width: none !important;
    width: 60px;
    margin-top: 100px;
}


@media only screen and (max-width: 768px) {
    .icon-Prev,
    .icon-next {
        margin-top: 120px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .icon-Prev,
    .icon-next {
        margin-top: 100px;
    }
}

/* Contacts*/

.Page-title {
    display: flex;
    justify-content: center;
    font-size: 50px;
    font-weight: 500;
}

.Paraghraph {
    padding: 0 250px 0 250px;
    text-align: center;
    line-height: 1.5;
    text-align: center;
}

.contact-cont-Tranin {
    grid-template-columns: 1fr 1.75fr;
    gap: 54px;
}





.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 300px;
    margin: 0 auto 100px;
    padding: 30px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    text-align: center;
}

.form .thumbnail {
    background: #EF3B3A;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    padding: 50px 30px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    box-sizing: border-box;
}

.form .thumbnail img {
    display: block;
    width: 100%;
}

.form input {
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
}

.form button {
    outline: 0;
    background: #EF3B3A;
    width: 100%;
    border: 0;
    padding: 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #FFFFFF;
    font-size: 14px;
    transition: all 0.3 ease;
    cursor: pointer;
}

.form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}

.form .message a {
    color: #EF3B3A;
    text-decoration: none;
}

.form .register-form {
    display: none;
}







form .Fileds .input-fileds {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3 - 15px);
}

.input-fileds input {
    height: 40px;
    margin: 8px 0;
    outline: none;
    padding: 0 15px;
    border: 1px solid #aaa;
    border-radius: 5px;
    font-weight: 400;
    color: #333;
}


.input-fileds label {
    font-size: 16px;
    font-weight: 500;
    color: #2e2e2e;
    margin-top: 15px;
}

.input-fileds input[type="date"] {
    color: #8d8d8d
}

.input-fileds input[type="date"]:valid {
    color: #222222
}

.Container-Contactus form button {
    height: 45px;
    max-width: 800px;
    width: 100%;
    border: 1.5px solid var(--main-color);
    outline: none;
    color: #ffffff;
    background: linear-gradient(135deg, #d9a15c, #ad762e, #734a1c);
    border-radius: 8px;
    margin-top: 30px;
}


.Container-Contactus form button:hover {
    background: linear-gradient(135deg, #ad762e, #8c5e24, #5c3714);
    transform: scale(1.03); /* تكبير بسيط لجعل التأثير أنيقًا */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* زيادة الظل عند التحويم */
}

.Container-Contactus form button:active{
    transform: scale(0.97); /* تصغير بسيط عند الضغط */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); /* تقليل الظل عند الضغط لمحاكاة الضغط */
}

.input-fields input[type="checkbox"] {
    width: auto;
    height: auto;
    margin-right: 5px;
}

.checkbox-group {
    display: flex;
    flex-direction: row;
}

.training-container {
    display: flex;
    align-items: center;
    /* لمحاذاة العناصر عموديًا */
    gap: 10px;
    /* مسافة بين العناصر */
    margin-top: 30px;

}

.train-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 25px;
}

.checkbox-group {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    /* مسافة بين الخيارات */
}


.specialization-container {
    display: flex;
    align-items: flex-start;
    /* لمحاذاة النص والخيارات عموديًا */
    gap: 10px;
    /* مسافة بين النص وخيارات التخصص */
    margin-top: 15px;
    flex-direction: column;
}

.specialization-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    /* منع انقطاع النص */
    margin-bottom: 10px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    /* جعل العناصر تلتف عند الحاجة */
    gap: 10px;
    /* مسافة بين خيارات التخصص */
    justify-content: space-between;
}


.cv-upload-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.cv-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    margin-top: 15px;
}

.cv-upload {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cv-upload input[type="file"] {
    padding: 5px;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    cursor: pointer;
}

.cv-upload .file-info {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}


.specialization-container {
    margin-top: 35px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 5px;
}


.other-option label {
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
}

.other-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.other-input {
    width: 710px;
    height: 30px;
    padding: 5px 0;
    border: none;
    border-bottom: 2px solid #aaa;
    font-size: 14px;
    outline: none;
}

.other-input:focus {
    border-bottom: 2px solid var(--main-color);
}


.contact-sections {
    padding: 60px 0 0px;
    overflow: hidden;
}
.custom-min-height {
    min-height: 400px; /* قم بتعديل القيمة حسب الحاجة */
}

.Cover .image-cover {
    max-height: 75vh;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}


@media screen and (max-width: 768px) {
    .Cover .image-cover {
        max-height: 100vh;
        /* Allow the image to fill the full viewport height */
        width: 100%;
        /* Ensure full width */
        object-fit: cover;
        /* Ensure the image covers the area */
        object-position: center;
        /* Keep the focus on the center of the image */
    }
}



.list-polices {
    list-style-type: disc;
    margin-left: 20px;
}

.title-Police {
    font-size: 22px;
    font-weight: 500;
}

.title-Police {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
}

.li-polices {
    margin-right: 20px;
}


.Container-Contactus .Details-personal .title {
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    border-bottom: 3.5px solid var(--main-color);
    padding-bottom: 5px;
}


/* Responsive Design */
@media screen and (max-width: 1024px) {

    /* Tablet View */
    .Container-Contactus {
        padding: 40px;
    }

    .Container-Contactus form {
        min-height: 400px;
    }

    .Container-Contactus form .Fileds .input-fileds {
        width: calc(100% / 2 - 15px);
    }

    .Container-Contactus form .title {
        font-size: 26px;
    }

    .Container-Contactus form button {
        height: 40px;
        width: 100%;
    }

    .cv-upload-container {
        margin-top: 15px;
    }
}

@media screen and (max-width: 768px) {

    /* Mobile View */
    .Container-Contactus {
        padding: 30px;
    }

    .Container-Contactus form {
        min-height: 350px;
    }

    .Container-Contactus form .Fileds .input-fileds {
        width: 100%;
    }

    .Container-Contactus form .title {
        font-size: 22px;
    }

    .Container-Contactus form button {
        height: 35px;
        width: 100%;
    }

    .cv-upload-container {
        margin-top: 10px;
    }

    .training-container,
    .specialization-container {
        flex-direction: column;
    }

    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }

    .other-input {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {

    /* Small Mobile View */
    .Container-Contactus {
        padding: 20px;
    }

    .Container-Contactus form {
        min-height: 300px;
    }

    .Container-Contactus form .title {
        font-size: 18px;
    }

    .Container-Contactus form button {
        height: 35px;
        width: 100%;
    }

    .cv-upload-container {
        margin-top: 10px;
    }

    .training-container,
    .specialization-container {
        flex-direction: column;
    }

    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }

    .other-input {
        width: 100%;
    }
}

.agree-checkbox {
    margin-top: 25px;
    margin-bottom: 10px;
}

.agree {
    font-size: 16px;
    margin-right: 5px;
}

/* Media Queries for Mobile Responsiveness */
@media screen and (max-width: 768px) {

    .Container-Contactus {
        padding: 30px;
        right: 0;
        margin: 0 10px;
    }

    .Container-Contactus form {
        min-height: 100%;
    }

    .Container-Contactus form .title {
        font-size: 24px;
    }

    form .Fileds .input-fileds {
        width: 100%;
    }

    .Container-Contactus form button {
        width: 100%;
    }

    .training-container {
        flex-direction: column;
        margin-top: 20px;
    }

    .specialization-container {
        flex-direction: column;
        margin-top: 20px;
    }

    .cv-upload-container {
        margin-top: 20px;
    }

    .other-input {
        width: 100%;
    }

    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }

    .cv-upload input[type="file"] {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {

    .Container-Contactus {
        padding: 20px;
    }

    .Container-Contactus form .title {
        font-size: 20px;
    }

    form .Fileds .input-fileds {
        width: 100%;
    }

    .Container-Contactus form button {
        font-size: 14px;
    }

    .training-container {
        flex-direction: column;
        gap: 10px;
    }

    .specialization-container {
        flex-direction: column;
    }

    .other-input {
        width: 100%;
        font-size: 12px;
    }

    .cv-upload input[type="file"] {
        font-size: 12px;
    }
}




/**/

.Container-Details {
    text-align: center;
    /* Center text for desktop */
}

.Page-title {
    font-size: 45px;
    /* Default font size */
    font-weight: bold;
    text-align: center;
    /* Center the title */
    margin-bottom: 20px;
    /* Space below the title */
}

/* Media Queries for Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .Page-title {
        font-size: 25px;
        /* Smaller font size on mobile */
    }

    .Paraghraph {
        font-size: 16px;
        /* Smaller font size on mobile */
        padding: 0 10px;
        /* Less padding for smaller screens */
    }
}




/* Responsive Design */
@media screen and (max-width: 768px) {
    .Container-Contactus {
        padding: 15px;
        /* Further reduce padding for mobile */
        margin: 0 5px;
        /* Adjust margin to fit within the screen */
    }

    .Container-Contactus form {
        min-height: auto;
        /* Let it adjust naturally based on content */
    }

    .Container-Contactus form .Fileds .input-fileds {
        width: 100%;
        /* Full width for mobile */
    }

    .Container-Contactus form .title {
        font-size: 24px;
        /* Adjust title size */
    }

    .Container-Contactus form button {
        width: 100%;
        /* Full-width button */
    }

    .cv-upload-container {
        margin-top: 10px;
        /* Reduce margin for better alignment */
    }

    .training-container,
    .specialization-container {
        flex-direction: column;
        /* Stack elements vertically */
    }

    .checkbox-group {
        flex-direction: column;
        /* Stack checkboxes vertically */
        gap: 5px;
        /* Space between checkboxes */
    }

    .cv-upload input[type="file"] {
        font-size: 12px;
        /* Adjust font size for mobile */
    }

    /* Remove any unnecessary spacing or margins */
    .input-fileds {
        margin-bottom: 15px;
        /* Space between input fields */
    }
}

@media screen and (max-width: 480px) {
    .Container-Contactus {
        padding: 10px;
        /* Minimized padding for smaller screens */
    }

    .Container-Contactus form .title {
        font-size: 20px;
        /* Slightly smaller title size */
    }

    .Container-Contactus form button {
        font-size: 14px;
        /* Adjust button font size */
    }

    .cv-upload input[type="file"] {
        font-size: 12px;
        /* Consistent size for file input */
    }
}

.Contactus-Section {
    max-width: 900px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    left: -25px;
}


.Contactus-Sections {
    max-width: 900px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    left: 35%;
    transform: translateX(-54%);
}

.Title-Contactus-Section {
    position: absolute;
    font-size: 25px;
    font-weight: 500;
    right: 0;
    margin: 23px 5px 0 0;
}


.Title-Contactus-Section::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2.5px;
    background-color: var(--main-color);
}

/* Contant us*/

.Filed-inputs-Contactus {
    width: calc(50% - 25px);
    /* نصف عرض الحاوية مع الأخذ في الاعتبار الفجوة */
    display: flex;
    flex-direction: column;
    align-items: start;
    border-radius: 8px;
}

.Section-Form form .Fileds-contact .Filed-inputs-Contactus label {
    font-size: 18px;
    font-weight: 500;
    margin-right: 11px;
}

.Section-Form form .Fileds-contact .Filed-inputs-Contactus input {
    height: 35px;
    width: 100%;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid #8d8d8d79;
}

.Fileds-contact {
    margin-top: 50px;
}


.Group-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 70px;
    margin-right: 18px;
    max-width: 720px;
}

.Filed-inputs-Contactus input::placeholder {
    color: #88888894;
    font-size: 14px;
    opacity: 1;
}

.Choose-checkbox-Courses {
    position: absolute;
    right: 15px;
    margin-top: 30px;
}

.Choose-checkbox-Courses span {
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
    display: flex;
}





.checkbox-group {
    display: flex;
    /* استخدام Grid لتوزيع العناصر */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* الأعمدة تتغير حسب المساحة */
    padding: 0px;
    border-radius: 8px;
    /* زوايا مستديرة للحاوية */
    max-width: 900px;
    /* عرض الحاوية */
    margin-left: 15px;
}

.checkbox-group label {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* مسافة بين مربع الاختيار والنص */
}

.other-options {
    display: flex;
    align-items: center;
    gap: 10px;
    /* مسافة بين العناصر */
}

.Btn-Checkbox {
    width: 720px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    height: 45px;
    border: 1px solid rgba(0, 0, 0, 0.189);
    border-radius: 7px;
    margin-top: 15px;
    margin-left: 15px;
    font-size: 18px;
    margin-right: 15px;
}

.Btn-Checkbox:hover {
    background-color: var(--main-color);
    color: white;
}


.Fileds-contact {
    margin-bottom: 20px;
}

.Filed-inputs-Contactus label {
    display: block;
    margin-bottom: 5px;
    margin-right: 8px;
}

.Filed-inputs-Contactus input,
.Filed-inputs-Contactus textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}



/**/

/* استهداف الأجهزة الصغيرة (مثل الهواتف الذكية) */
@media (max-width: 768px) {
    .Filed-inputs-Contactus {
        width: 100%;
        /* يجعل الحقول تأخذ العرض الكامل */
        margin-bottom: -30px;
        margin-right: 80px;

    }

    .label .message-contant {
        margin-left: -50px;
    }

    .Section-Form form .Fileds-contact .Filed-inputs-Contactus label {
        font-size: 14px;
        /* تقليل حجم الخط */
        margin-top: 25px;
        position: relative;
        left: 50px;
    }

    .Section-Form form .Fileds-contact .Filed-inputs-Contactus input {
        height: 30px;
        min-width: 183px;
        margin-right: -40px;
        /* تقليل ارتفاع المدخلات */
    }

    .Group-inputs {
        /* إزالة الهامش الأيمن */
        max-width: 100%;
        /* جعل الحاوية تأخذ العرض الكامل */
    }

    .Filed-inputs-Contactus input::placeholder {
        font-size: 12px;
        /* تقليل حجم النص في placeholder */
    }

    .Choose-checkbox-Courses {
        margin-top: 15px;
        /* تقليل المسافة العمودية */
    }

    .checkbox-group {
        max-width: 100%;
        /* جعل الحاوية تأخذ العرض الكامل */
    }

    .Btn-Checkbox {
        font-size: 16px;
        max-width: 180px;
        margin-right: 55px;
        margin-top: 25px;
    }


    .Title-Contactus-Section {
        font-size: 18px;
    }
}

/* استهداف الأجهزة المتوسطة (مثل الأجهزة اللوحية) */
@media (min-width: 769px) and (max-width: 1024px) {
    .Filed-inputs-Contactus {
        width: calc(50% - 12px);
        /* تعديل العرض ليتناسب مع الأجهزة المتوسطة */
    }

    .Section-Form form .Fileds-contact .Filed-inputs-Contactus label {
        font-size: 16px;
        /* تعديل حجم الخط */
    }

    .Group-inputs {
        margin-top: 50px;
        /* تعديل المسافة العمودية */
        max-width: 600px;
        /* تعديل العرض الأقصى */
    }

    .Btn-Checkbox {
        width: 600px;
        /* تعديل عرض الزر */
        margin-left: 70px;
    }


}

/* استهداف الأجهزة الكبيرة (مثل أجهزة الكمبيوتر المكتبية) */
@media (min-width: 1025px) {
    .Filed-inputs-Contactus {
        width: calc(50% - 25px);
        /* الحفاظ على العرض الأساسي */
    }

    .Section-Form form .Fileds-contact .Filed-inputs-Contactus label {
        font-size: 18px;
        /* الحفاظ على حجم الخط الأساسي */
    }

    .Group-inputs {
        margin-top: 70px;
        /* الحفاظ على المسافة العمودية */
        max-width: 720px;
        /* الحفاظ على العرض الأقصى */
    }

    .Btn-Checkbox {
        width: 720px;
        margin-left: 70px;
        /* الحفاظ على عرض الزر */
    }

}




/*End*/



.container-Aboutus {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}


.page-title,
.section-title {
    color: #333;
}

.text-paragraph {
    line-height: 1.6;
    color: #555;
}

.info-box {
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-list {
    list-style-type: disc;
    padding: 0;
}

.info-item {
    padding: 10px 0;
}


@media (max-width: 768px) {
    .page-header {
        padding: 10px;
    }

    .page-title {
        font-size: 1.5em;
    }

    .info-box {
        padding: 10px;
    }

    .text-paragraph {
        font-size: 14px;
    }

    .info-item {
        font-size: 14px;
    }
}

.Aboutus-title {
    text-align: center;
    margin-top: 35px;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    right: 50%;
    margin-right: -65px;
}




@media only screen and (max-width: 768px) {
    .Aboutus-title {
        text-align: center;
        font-size: 38px;
        margin-bottom: -25px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .Aboutus-title {
        text-align: center;
        font-size: 40px;
        margin-bottom: -25px;
    }
}



.Aboutus-title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    /* يغطي النص فقط */
    height: 3.5px;
    background-color: var(--main-color);
}

.content-section .text-paragraph {
    font-size: 16px;
}


/* Courses-Page*/

.Group-Courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 20px;
    background-color: #f9f9f9;
}

.Card-Course {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 15px;
    position: relative;
    min-height: 530px;
}

.Card-Course:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.Image-Content-Course {
    width: 100%;
    height: auto;
}

.Image-Course {
    width: 100%;
    height: auto;
    display: block;
}

.Content-Card-Course {
    padding: 15px;
    text-align: center;
}

.Card-Title-Course {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Card-Description-Course {
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-Card-Course {
    background: var(--main-color);
    color: #fff;
    border: none;
    padding: 20px 40px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    position: absolute;
    bottom: 45px;
    margin-right: -65px;
    margin-left: -75px;
}

.button-Card-Course:hover {
    background: #83571e;
    color: white;
}



@media (max-width: 1024px) {
    .Group-Courses {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .Card-Course {
        min-height: 500px;
    }

    .Card-Title-Course {
        font-size: 1.4rem;
    }

    .Card-Description-Course {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .Group-Courses {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .Card-Course {
        min-height: 475px;
    }

    .Card-Title-Course {
        font-size: 1.2rem;
    }

    .Card-Description-Course {
        font-size: 0.9rem;
    }

    .button-Card-Course {
        font-size: 1.3rem;
        padding: 10px 20px;
        margin-bottom: -15px;
    }
}


@media (max-width: 480px) {

    .button-Card-Course {
        font-size: 1.2rem;
        padding: 10px 20px;
        margin-bottom: -20px;
    }


}



.Card-Paraghraph {
    width: 270px;
    margin: 18px auto;
    position: relative;
    max-height: 480px;
    border: 1.5px solid rgba(168, 168, 168, 0.684);
    border-radius: 10px;
}

.Image-Paraghraph {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    min-height: 250px;
}

.Content-Card-Paraghraph {
    padding: 15px;
    text-align: start;
}

.Card-Title-Paraghraph {
    font-size: 1.2rem;
    margin-bottom: 10px;
    margin-right: 5px;
}

.Card-Description-Paraghraph {
    font-size: 1.0rem;
    margin-bottom: 15px;
    color: #666;
    margin-top: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.button-Card-Paraghraph {
    padding: 8px 15px;
    font-size: 1rem;
    background: var(--main-color);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    right: 34%;
}

.button-Card-Paraghraph:hover {
    background: #83571e;
}


.Slide-Contents {
    margin-right: 28px;
    margin-left: 28px;
}

.Blog {
    margin-top: 45px;
}


.title-Blog {
    font-size: 55px;
    font-weight: 500;
    margin-bottom: 25px;
}

.description-Blog p {
    text-align: center;
    font-size: 22;

}

.Card-Blog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 20px;
    background-color: #f9f9f9;
}



/* لأجهزة التابلت */
@media (max-width: 768px) {
    .Card-Blog {
        grid-template-columns: 1fr;
        /* عرض عمود واحد */
    }

    .Card-Paraghraph {
        width: 100%;
        /* عرض البطاقة ليكون كامل الحاوية */
        margin: 10px 0;
        /* تعديل الهامش */
    }

    .button-Card-Paraghraph {
        margin-right: 0;
        text-align: center;
        position: relative;
        bottom: 6px;
        min-width: 150px;
        min-height: 45px;
    }

    .title-Blog {
        font-size: 35px;
        /* تقليل حجم الخط */
    }

    .description-Blog p {
        font-size: 18px;
        /* تقليل حجم الخط */
    }
}

/* لأجهزة الموبايل */
@media (max-width: 480px) {
    .Card-Blog {
        grid-template-columns: 1fr;
        /* عرض عمود واحد */
    }

    .Card-Paraghraph {
        width: 100%;
        /* عرض البطاقة ليكون كامل الحاوية */
        margin: 10px 0;
        /* تعديل الهامش */
    }

    .Card-Title-Paraghraph {
        font-size: 16px;
        margin-top: -8px;
        display: -webkit-box;
        /* استخدام صندوق ويب كيت */
        -webkit-box-orient: vertical;
        /* توجيه الصندوق عمودياً */
        text-overflow: ellipsis;
        /* إضافة النقاط الثلاثة في نهاية النص */
        -webkit-line-clamp: 2;
        /* تحديد عدد السطور */
        overflow: hidden;
    }

    .Card-Description-Paraghraph {
        font-size: 13px;
        margin-top: -2px;
        max-height: 140px;
        padding-top: 10px;

    }

    .button-Card-Paraghraph {
        margin-right: 18px;
        min-width: 100px;
        text-align: center;
        /* توسيط النص داخل الزر */
        position: relative;
        right: 40px;
    }

    .title-Blog {
        font-size: 35px;
        /* تقليل حجم الخط */
    }

    .description-Blog p {
        font-size: 18px;
        /* تقليل حجم الخط */
    }
}

.paragraph-public {
    max-width: 850px;
    min-height: 150px;
}

.Card-Article {
    display: flex;
}


/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}

/* Section Form Styling */
.form-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Fields Contact Styling */
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: grid;
    gap: 15px;
}

/* Input Field Styling */
.input-wrapper {
    display: flex;
    flex-direction: column;
}

.input-wrapper label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #555;
}

.input-wrapper input,
.input-wrapper textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    direction: rtl;
    /* توجيه النص من اليمين إلى اليسار */
    text-align: right;
    /* توجيه التحديد من اليمين */
}

.input-wrapper input:focus,
.input-wrapper textarea:focus {
    border-color: #007bff;
    outline: none;
}

.input-wrapper textarea {
    resize: vertical;
    min-height: 100px;
}

/* Button Styling */
.submit-button {
    background-color: var(--main-color);
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #7e5621;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .input-group {
        grid-template-columns: 1fr;
    }

    .form-title {
        font-size: 20px;
    }

    .input-wrapper input,
    .input-wrapper textarea {
        font-size: 12px;
    }

    .submit-button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 15px;
    }

    .form-title {
        font-size: 18px;
    }

    .input-wrapper label {
        font-size: 12px;
    }

    .input-wrapper input,
    .input-wrapper textarea {
        padding: 8px;
    }
}



.dropdown-container {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
}

.label-textarea {
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
    font-weight: 600;
    text-align: start;
}

:dir(rtl) .label-textarea {
    text-align: right;
}

:dir(ltr) .label-textarea {
    text-align: left;
}


.custom-select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #555;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23aaa"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

.custom-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-select option {
    background-color: #fff;
    color: #333;
    padding: 10px;
}


@media only screen and (min-width: 992px) {
    .custom-select {
        min-width: 800px;
        width: auto;
    }
}

@media only screen and (max-width: 991px) {
    .custom-select {
        width: 100%;
        min-width: 510px;
        }
}


@media only screen and (max-width: 480px) {
    .custom-select {
        min-width: 300px;
        font-size: 14px; /* Reduce font size for better fit */
        padding: 8px; /* Reduce padding for compactness */
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .custom-select {
        min-width: 475px;
        font-size: 14px;
        padding: 8px;
    }
}

/* Media Query for smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {

    .dropdown-container {
        max-width: 100%; /* Make the container fully responsive */
    }
}

/* Media Query for very small screens (e.g., narrow mobile devices) */
@media (max-width: 480px) {
    .custom-select {
        min-width: 300px;
        font-size: 12px; /* Further reduce font size */
        padding: 6px; /* Further reduce padding */
    }
}

.input-pair {
    display: flex;
    justify-content: space-between; /* لتوزيع المسافات بين العناصر */
    margin-bottom: 15px; /* فراغ بين الأزواج */
}

.input-form-Section-Contnantus {
    width: 48%; /* جعل كل حقل يستخدم نصف العرض المتاح */
    margin-bottom: 15px; /* فراغ بين الحقول */
    direction: rtl;
}
@media (max-width: 768px) {
    .input-pair {
        flex-direction: column; /* ترتيب العناصر بشكل عمودي */
    }

    .input-form-Section-Contnantus {
        width: 100%; /* جعل كل حقل يستخدم كامل العرض المتاح */
        margin-bottom: 15px; /* فراغ بين الحقول */
        direction: rtl;
    }
}

.form-Section-Contnantus {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f9f9f9;
}

.info-Contantus {
    flex: 1;
}

.group-input-form-Section-Contnantus {
    flex: 2;
}

@media (max-width: 768px) {
    .form-Section-Contnantus {
        flex-direction: column;
        align-items: center;
    }
    .info-Contantus {
        flex: 1;
        margin-bottom: 5px;
    }

    .info-Contantus, .group-input-form-Section-Contnantus {
        width: 100%;
        margin-bottom: 20px;
    }
}


.group-input-form-Section-Contnantus {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
}

.input-form-Section-Contnantus {
    width: 48%;
    margin-bottom: 15px;
}

 .input-form-Section-Contnantus label {
    display: block;
    font-size: 18px;
    color: #333333;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: start;
}

 .input-form-Section-Contnantus input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.input-form-Section-Contnantus input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}
.input-form-Section-Contnantus input[type="tel"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}
.input-form-Section-Contnantus input[type="tel"]:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 5px #7b521c;
}

.input-form-Section-Contnantus input[type="tel"]::placeholder {
    color: #a0a0a0;
    direction: rtl;
}


.input-form-Section-Contnantus input[type="text"]:focus {
    border-color: #ad762e;
    box-shadow: 0 0 5px #7b521c;
    direction: rtl;
}

.input-form-Section-Contnantus input[type="text"]::placeholder {
    color: #a0a0a0;
    direction: rtl;
}

.input-form-Section-Contnantus input[type="email"]:focus {
    border-color: #ad762e;
    box-shadow: 0 0 5px #7b521c;
}

.input-form-Section-Contnantus input[type="email"]::placeholder {
    color: #a0a0a0;
    direction: rtl;
}


.input-form-Section-Contnantus input,
.input-form-Section-Contnantus textarea {
    direction: inherit; /* سيتبع اتجاه الصفحة تلقائيًا */
    text-align: inherit;
}

@media (max-width: 768px) {
    .input-form-Section-Contnantus {
        width: 100%;
    }
}

.input-form-Section-Contnantus textarea {
    width: 100%; /* جعل الحقل يأخذ العرض الكامل */
    min-width: 100%; /* إزالة أي قيود على العرض */
    max-width: 100%; /* التأكد من عدم تجاوزه */
    direction: inherit;
    text-align: inherit;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #dcdcdc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    min-height: 240px;

}


 .input-form-Section-Contnantus textarea:focus {
    border-color: #ad762e;
    box-shadow: 0 0 5px #ad762e;
}

 .input-form-Section-Contnantus textarea::placeholder {
    color: #a0a0a0;
}

.info-Contantus {
    width: 100%;
    max-width: 750px;
    margin: 20px 15px 20px 20px; /* إضافة هامش يسار */
    padding: 20px;
    background-color: rgb(0 0 0 / 4%);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-pair {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}


@media (max-width: 768px) {
    .form-Section-Contnantus {
        flex-direction: column;
        align-items: center;
    }
    .info-Contantus {
        flex: 1;
        margin-bottom: 5px;
    }

    .info-Contantus, .group-input-form-Section-Contnantus {
        width: 100%;
        margin-bottom: 20px;
    }
    .input-form-Section-Contnantus textarea {
        min-width: 250px;
    }

}

.title-info-Contantus{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
}

.contact-info-Contantus{
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 25px;
}


.submit-button {
    text-align: center; /* تمركز الزر بشكل مركزي */
    margin-top: 20px; /* إضافة فراغ من الأعلى */
}

.submit-button button {
    padding: 12px 24px;
    font-size: 18px;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}



.fQ-title {
    font-weight: 600;
    font-size: 35px;
    color: black;
    text-transform: capitalize;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    padding: 8px;
}


@media (max-width: 380px) {

    .fQ-title {
        font-size: 20px;
    }
}



@media (max-width: 380px) {
    .info-Contantus {
        width: 100%;
        min-width: 280px;
    }

.group-input-form-Section-Contnantus {
        width: 100%;
        margin-bottom: 20px;
        min-width: 260px;
        position: absolute;
        min-width: 310px;
        background-color: #ffffff;

    }
    [dir="rtl"].group-input-form-Section-Contnantus {
        width: 100%;
        margin-bottom: 20px;
        min-width: 260px;
        position: relative;
        min-width: 310px;
        background-color: #ffffff;

    }

.input-form-Section-Contnantus input[type="text"],.input-form-Section-Contnantus input[type="tel"],.input-form-Section-Contnantus input[type="email"] {
    width: 100%;
    min-width: 250px;
}

.submit-button {
    font-size: 14px;
    padding: 8px 16px;
    min-width: 250px;
}
}




.accordion {
    width: 100%;
    max-width: 1080px;
    margin: 2rem auto;
  }
  .accordion-item {
    background-color: rgb(0 0 0 / 4%);
    color: #111;
    margin: 1rem 0;
    border-radius: 0.5rem;
    border: 1px solid #d8d8d821;
  }
  .accordion-item-header {
    padding: 0.5rem 3rem 0.5rem 1rem;
    min-height: 4.5rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 40px 45px;
  }

   .accordion-item-header p{
    font-size: 24px;
    font-weight: 500;
  }
  .accordion-item-header::after {
    content: "S";
    font-size: 2rem;
  }

  .accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  .accordion-item-body-content {
    padding: 1rem;
    line-height: 1.5rem;
    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
    margin-top: -10px;
    margin-left: 5px;
    margin-right: 25px;
    text-align: start;
  }
  .accordion-item-body-content p{
    font-size: 16px;
    font-weight: 500;
  }


/* Default styles for LTR */

  /* RTL Specific Styles */
  .accordion-item-header::after {
    content: "\2199"; /* Arrow remains the same, but position changes */
    font-size: 1.3rem;
    margin-right: 890px; /* Add space on the right side in RTL */
    position: absolute; /* Use absolute positioning for better control */
    left: 1000px; /* Place the arrow on the left side in RTL */
  }

  /* RTL Specific Styles */
  [dir="rtl"] .accordion-item-header::after {
    content: "\2199"; /* Arrow remains the same, but position changes */
    font-size: 1.3rem;
    margin-right: 890px; /* Add space on the right side in RTL */
    position: absolute; /* Use absolute positioning for better control */
    right: 140px;
  }
.accordion-item-header.active::after {
    content: "\2196";
}


  @media (max-width: 767px) {
    html {
      font-size: 14px;
    }

    .accordion-item-header::after {
        font-size: 1.2rem;
      }

      /* LTR Adjustments for Small Screens */
      .accordion-item-header::after {
        content: "\2199"; /* Arrow remains the same, but position changes */
        font-size: 1.3rem;
        position: absolute; /* Use absolute positioning for better control */
        left: 420px; /* Place the arrow on the left side in RTL */
      }

      /* RTL Adjustments for Small Screens */
      [dir="rtl"] .accordion-item-header::after {
        content: "\2199"; /* Arrow remains the same, but position changes */
        font-size: 1.3rem;
        margin-right: 890px; /* Add space on the right side in RTL */
        position: absolute; /* Use absolute positioning for better control */
        right: 10px; /* Place the arrow on the left side in RTL */
      }

      .accordion-item-header.active::after {
        content: "\2196";
    }

    .accordion-item-header p {
        font-size: 14px;
        font-weight: 500;
        text-align: start;
    }
    .accordion-item-header::after {
        margin-left: 10px;
      }

  }


  @media (max-width: 380px) {
    /* General adjustments for small screens */
    .accordion-item-header::after {
        content: "\2196";
      font-size: 0.4rem; /* Reduce arrow size for smaller screens */
      left: 0; /* Move the arrow closer to the text in LTR */

    }
    .accordion-item-header.active::after {
        content: "\2196";
    }


    [dir="rtl"] .accordion-item-header::after {
        font-size: 1rem;
        right: 85%;
        margin-right: 0;
        top: 35%;

    }

    .accordion-item-header::after {
        font-size: 1rem;
        right: auto;
        left: 85%;
        margin-left: 0;
        top: 35%;
    }


    .accordion-item-header::after {
        margin-left: 10px;
      }
  }





  /* Center the container horizontally */
.Container-Contactus {
    position: relative;
    border-radius: 8px;
    padding: 50px;
    margin: 0 auto; /* Center horizontally */
    max-width: 900px;
    width: 100%;
    text-align: left; /* Default for LTR */
}

/* Adjustments for RTL */
.Container-Contactus:dir(rtl) {
    direction: rtl;
    text-align: right; /* Text alignment for RTL */
}

/* Ensure form fields are properly aligned */
.Container-Contactus .Fields {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 12px;
}

.Container-Contactus:dir(rtl) .Fields {
    justify-content: flex-end; /* Align fields to the right in RTL */
}

/* Center the title */
.Container-Contactus .title {
    text-align: center;
}

/* ضبط عرض المدخلات لتجنب التداخل */
.Container-Contactus form .Fields input,
.Container-Contactus form .Fields select {
    width: calc(33.333% - 20px); /* 3 أعمدة مع هامش 10px من كل جانب */
    margin: 5px 10px;
}

/* ضبط العناصر الداخلية في النموذج */
.Container-Contactus form .Fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* توزيع العناصر في LTR */
    gap: 20px; /* مسافة بين العناصر */
}

/* تصحيح خطأ الطباعة (Fileds → Fields) */
.Container-Contactus form .Fileds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

/* ضبط التصميم للعناصر الداخلية في RTL */
.Container-Contactus:dir(rtl) form .Fields {
    justify-content: flex-end;
}


.active-link {
    color: var(--main-color);
    font-weight: bold;
}