:root {
    --clr-theme-primary: #eeeeee;
    --clr-theme-secondary-text: #888888;
    --clr-background-primary: #151515;
    --clr-background-secondary: #222222;
    --clr-theme-accent: #c5a47e; /* اللون الذهبي */

    /* ألوان لقسم الاتصال، متناسقة مع التصميم العام */
    --clr-contact-section-bg: #101010; /* خلفية داكنة للقسم */
    --clr-contact-input-bg: #282828;   /* خلفية حقول الإدخال - رمادي داكن مميز */
    --clr-contact-input-border: #4d4d4d; /* حدود واضحة للحقول - رمادي متوسط */
    --clr-contact-input-text: #e0e0e0;   /* لون النص داخل الحقول - فاتح */
    --clr-contact-input-placeholder: #909090; /* لون النص المؤقت - رمادي فاتح */

    --clr-contact-input-border-focus: var(--clr-theme-accent); /* ذهبي عند التركيز */
    --clr-contact-input-bg-focus: #303030; /* أغمق قليلاً من خلفية الحقل الافتراضية عند التركيز */

    --clr-contact-button-bg: var(--clr-theme-accent); /* ذهبي */
    --clr-contact-button-text: var(--clr-black-true); /* أسود */
    --clr-contact-button-hover-bg: #b3863c; /* ذهبي أغمق */


    --clr-footer-link: #b8b8b8;
    --clr-footer-icon-bg: #2b2b2b;
    --clr-newsletter-input-bg: #212121;
    --clr-newsletter-placeholder: #6a6a6a;
    --clr-copyright-text: #707070;
    --clr-copyright-line: #303030;

    --clr-black-true: #000000;
    --clr-dark-gray-featured: #111111;
    --clr-card-black: #0d0d0d;
    --clr-border: #333333;


    --tpl-ff-heading: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    --tpl-ff-body: 'Georgia', 'Times New Roman', Times, serif;

    --section-spacing: 80px 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 10px; }
body {
    font-family: var(--tpl-ff-body);
    background-color: var(--clr-background-primary);
    color: var(--clr-theme-primary);
    line-height: 1.6;
    font-size: 1.6rem;
    overflow-x: hidden;
    cursor: default;
}
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.p-relative { position: relative; }
.fix::after { content: ""; display: table; clear: both; }
.text-center { text-align: center; }
.mb-20 { margin-bottom: 2rem; }
.mb-25 { margin-bottom: 2.5rem; }
.mb-30 { margin-bottom: 3rem; }
.mb-50 { margin-bottom: 5rem; }
.mb-md-50 { margin-bottom: 5rem; }
.mt-50 { margin-top: 5rem; }
.mt-30 { margin-top: 3rem; }
.mt-20 { margin-top: 2rem; }
.section-spacing { padding: 8rem 0; }
.section-spacing-bottom { padding-bottom: 8rem; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpl-ff-heading);
    color: var(--clr-theme-primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
h1.hero__title span { display: block; }
h1.hero__title .tpl__theme-color { color: var(--clr-theme-accent); }
h2.section__title-main { font-size: 3.8rem; margin-bottom: 1rem; }
h2.section__title-main.large {     color: var(--clr-theme-primary);
font-size: 4.2rem; }
h2.section__title-main.xlarge { font-size: 3.8rem; }
p { margin-bottom: 1.5rem; color: var(--clr-theme-secondary-text); }
p.large { font-size: 1.8rem; line-height: 1.7; }
p.xlarge { font-size: 2rem; line-height: 1.8; }
a { color: var(--clr-theme-accent); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--clr-theme-primary); }
img { max-width: 100%; height: auto; display: block; }
.uppercase { text-transform: uppercase; }

.row { display: flex; flex-wrap: wrap; margin-left: -1.5rem; margin-right: -1.5rem; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
[class^="col-"] { padding-left: 1.5rem; padding-right: 1.5rem; }
.col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }
.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
.col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.align-items-end { align-items: flex-end; }
.text-lg-end { text-align: right; }

/* ==== HEADER - Navbar will scroll with page ==== */
header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    padding: 2rem 0;
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

header.header-main-area.scrolled {
    background-color: var(--clr-black-true);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 1001;
}

.header-content-wrapper { display: flex; justify-content: space-between; align-items: center; }
.header__logo img { max-height: 4rem; }
.main-menu nav ul { list-style: none; display: flex; }
.main-menu nav ul li { margin-left: 2.5rem; }
.main-menu nav ul li a { color: var(--clr-theme-primary); font-weight: 500; text-transform: uppercase; font-size: 1.4rem; padding: 0.5rem 0; position: relative; }
.main-menu nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--clr-theme-accent); transition: width 0.3s ease; }
.main-menu nav ul li a:hover::after, .main-menu nav ul li.active a::after { width: 100%; }
.main-menu .has-dropdown { position: relative; }
.main-menu .submenu { position: absolute; top: 100%; left: 0; background-color: var(--clr-background-secondary); border: 1px solid var(--clr-border); list-style: none; padding: 1rem 0; min-width: 20rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 10; border-radius: 0 0 5px 5px; }
.main-menu .has-dropdown:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-menu .submenu li { margin-left: 0; width: 100%; }
.main-menu .submenu li a { display: block; padding: 0.8rem 1.5rem; font-size: 1.3rem; white-space: nowrap; color: var(--clr-theme-secondary-text); }
.main-menu .submenu li a::after { display: none; }
.main-menu .submenu li a:hover { background-color: var(--clr-theme-accent); color: var(--clr-background-primary); }
.menu__bar { display: none; }
.menu__bar .bar-icon img { height: 2.4rem; cursor: pointer; }

/* ==== OFFCANVAS MOBILE MENU ==== */
.offcanvas-nav-wrapper { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background-color: var(--clr-background-secondary); box-shadow: -5px 0 15px rgba(0,0,0,0.2); z-index: 1002; transition: right 0.4s ease-in-out; padding: 2rem; overflow-y: auto; }
.offcanvas-nav-wrapper.open { right: 0; }
.mobile-logo-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.mobile-logo-area .header-logo img { max-height: 3.5rem; }
.menu-close-btn i { font-size: 2.4rem; color: var(--clr-theme-primary); cursor: pointer; }
.sidebar-menu-area .menu-list { list-style: none; }
.sidebar-menu-area .menu-list li a { display: block; padding: 1rem 0; color: var(--clr-theme-primary); font-size: 1.6rem; border-bottom: 1px solid var(--clr-border); text-transform: uppercase; }
.sidebar-menu-area .menu-list li:last-child a { border-bottom: none; }
.sidebar-menu-area .menu-list .menu-item-has-children > a { display: flex; justify-content: space-between; align-items: center;}
.sidebar-menu-area .menu-list .menu-item-has-children i { font-size: 1.4rem; }
.sidebar-menu-area .menu-list .sub-menu { list-style: none; padding-left: 2rem; display: none; background-color: #2a2a2a; margin-top: 0.5rem; padding-bottom: 0.5rem; }
.sidebar-menu-area .menu-list .sub-menu.open { display: block; }
.sidebar-menu-area .menu-list .sub-menu li a { font-size: 1.4rem; padding: 0.8rem 0; border-bottom: none; color: var(--clr-theme-secondary-text); text-transform: capitalize; }
.sidebar-social { margin-top: 3rem; display: flex; gap: 1.5rem; }
.sidebar-social img { height: 2.4rem; opacity: 0.7; transition: opacity 0.3s ease;}
.sidebar-social img:hover { opacity: 1; }

/* ==== MOUSE CURSOR ==== */
.mouseCursor { display: none; position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999; left: 0; top: 0; }
.cursor-outer { width: 30px; height: 30px; border: 2px solid var(--clr-theme-accent); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.2s ease-out, height 0.2s ease-out, border-width 0.2s ease-out; }
.cursor-inner { width: 8px; height: 8px; background-color: var(--clr-theme-accent); position: absolute; left: 11px; top: 11px; transition: transform 0.1s ease-out, width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; }
.cursor-inner span { display: none; }

/* ==== HERO SECTION ==== */
.hero-area {
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--clr-theme-primary);
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.hero-slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s linear 1s;
    display: flex;
    align-items: center;
}

.hero-slide.active-slide {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 1;
}

.hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.8) 100%);
    z-index: 1;
}

.hero-slide .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}
.hero-slide .hero__content {
    max-width: 100%;
}

h1.hero__title.small-hero-title {
    font-size: 4rem;
    line-height: 1.25;
    margin-bottom: 2rem;
    word-break: break-word;
    overflow-wrap: break-word;
}
.hero__text.large { color: var(--clr-theme-secondary-text); max-width: 60rem; }
.hero__btn { margin-top: 4rem; }
.simple-hero-btn { display: inline-flex; align-items: center; padding: 1rem 0; color: var(--clr-theme-primary); font-size: 1.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; position: relative; text-decoration: none; transition: color 0.3s ease; }
.simple-hero-btn span { margin-right: 10px; }
.simple-hero-btn i { font-size: 1.4rem; transition: transform 0.3s ease, color 0.3s ease; }
.simple-hero-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--clr-theme-accent); transition: width 0.3s ease-in-out; }
.simple-hero-btn:hover { color: var(--clr-theme-accent); }
.simple-hero-btn:hover::after { width: 100%; }
.simple-hero-btn:hover i { transform: translateX(5px); color: var(--clr-theme-accent); }

.hero__shapes { position: absolute; top: 15%; left: 5%; z-index: 3; }
.hero__shapes img { position: absolute; animation: float 6s ease-in-out infinite; opacity: 0.7; }
.hero__shapes .hero__shape-1 { width: 5rem; top: 0; left: 0;}
.hero__shapes .hero__shape-2 { width: 3rem; top: 8rem; left: 10rem; animation-delay: -3s;}
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }

.meta-item-call { position: absolute; display: flex; align-items: center; padding: 0.8rem 1.5rem; z-index: 5; writing-mode: vertical-rl; text-orientation: mixed; top: 50%; left: 3rem; transform: translateY(-50%) rotate(180deg); background-color: rgba(34, 34, 34, 0.5); border-radius: 20px; }
.meta-item-call .meta-item__icon img { height: 1.8rem; margin-bottom: 1rem; }
.meta-item-call .meta-item__text p a { color: var(--clr-theme-primary); font-size: 1.4rem; letter-spacing: 1px; white-space: nowrap; }
.meta-item-call .meta-item__text p a:hover { color: var(--clr-theme-accent); }


/* ==== ABOUT SECTION ==== */
.about-area {
    background-color: var(--clr-black-true);
}
.section__title-wrapper-about .section__subtitle { display: inline-block; }
.section__subtitle { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.section__subtitle-icon img { width: 2rem; margin-right: 1rem; animation: spin 8s linear infinite; }
.section__subtitle-text { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1px; color: var(--clr-theme-secondary-text); margin: 0; }
.about__content .p-text.xlarge { max-width: 70rem; margin-left: auto; margin-right: auto; color: var(--clr-theme-primary); }
.about__shapes .about-area__shape-1 { position: absolute; top: 10%; right: 5%; width: 4rem; animation: float 7s ease-in-out infinite alternate; opacity: 0.5; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==== SERVICES SECTION (WHAT WE DO) - Slider Restored ==== */
.services-area {
    background-color: var(--clr-black-true);
    position: relative;
    border-bottom: 1px solid var(--clr-border);
}
.service-garnish { position: absolute; width: 60px; height: 2.5px; background-color: var(--clr-theme-accent); z-index: 0; transition: all 0.3s ease-out; }
.garnish-tl { top: 30px; left: 20px; transform: rotate(45deg); transform-origin: top left; }
.garnish-tr { top: 30px; right: 20px; transform: rotate(-45deg); transform-origin: top right; }
.garnish-bl { bottom: 30px; left: 20px; transform: rotate(-45deg); transform-origin: bottom left; }
.garnish-br { bottom: 30px; right: 20px; transform: rotate(45deg); transform-origin: bottom right; }
.services-area__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.03; }
.services-area__bg img { width: 100%; height: 100%; object-fit: cover; }
.services-area .container { position: relative; z-index: 1; }
.services-wrapper { width: 100%; overflow: hidden; margin-top: 4rem; position: relative; }
.services-grid { display: flex; flex-wrap: nowrap; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0px); }
.service-slide-item { flex-shrink: 0; margin-right: 20px; height: 45rem; position: relative; background-size: cover; background-position: center; color: white; border-radius: 8px; overflow: hidden; }
.service-slide-item:last-child { margin-right: 0; }
.services-area .section__title-wrapper .section__title-main.xlarge { color: var(--clr-theme-primary); margin-bottom: 1rem; }
.services-area .border-bottom-btn { color: var(--clr-theme-primary); padding-bottom: 0.5rem; border-bottom: 2px solid var(--clr-theme-accent); text-transform: uppercase; font-weight: 500; font-size: 1.4rem; }
.services-area .border-bottom-btn:hover { color: var(--clr-theme-accent); }
.service-card-decoration { position: absolute; top: 1.5rem; right: 1.5rem; width: 1.5rem; height: 1.5rem; background-color: var(--clr-theme-accent); z-index: 3; }
.service__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26,26,26,0.65); z-index: 1; transition: background 0.3s ease; }
.service__box { position: relative; z-index: 2; padding: 2.5rem; color: white; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%; text-align: left; }
.service__box .service__title { font-size: 2.2rem; line-height: 1.3; color: #fff; text-transform: uppercase; margin-bottom: 1rem; }
.service__box .service__arrow_initial { font-size: 2.4rem; color: #fff; }
.service__box .service__arrow_initial i { transition: transform 0.3s ease; }
.service-slide-item:hover .service__arrow_initial i { transform: translateX(5px); }
.service__content-wrapper { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s, transform 0.4s ease; transform: translateY(20px); background-color: var(--clr-theme-accent); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 4; text-align: left; }
.service-slide-item:hover .service__overlay { background: rgba(26,26,26,0.3); }
.service-slide-item:hover .service__content-wrapper { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.service__content-wrapper .service__title { font-size: 2.2rem; margin-bottom: 1.5rem; color: #fff; }
.service__content-wrapper p { font-size: 1.4rem; color: #f0f0f0; margin-bottom: 2rem; line-height: 1.6; }
.service__content-wrapper .service__btn a { color: white; font-size: 2.8rem; display: inline-block; transition: transform 0.3s ease; }
.service__content-wrapper .service__btn a:hover { transform: translateX(5px); }

/* ==== FEATURED PROJECTS ==== */
.featured-works-area {
    background-color: var(--clr-dark-gray-featured);
    position: relative;
    overflow: hidden;
}
.featured-works-area::before, .featured-works-area::after { content: ''; position: absolute; width: 60px; height: 60px; border-style: solid; border-color: rgba(197, 164, 126, 0.45); z-index: 0; transition: all 0.3s ease-out; }
.featured-works-area::before { top: 30px; left: 30px; border-width: 4px 0 0 4px; }
.featured-works-area::after { bottom: 30px; right: 30px; border-width: 0 4px 4px 0; }
.featured-works-area .container { position: relative; z-index: 1; }
.featured-works-area .section__title-wrapper .section__title-main.xlarge { position: relative; padding-bottom: 0; margin-bottom: 1rem; color: var(--clr-theme-primary); }
.featured-works-area .section__title-wrapper .section__title-main.xlarge::after { content: none; }
.featured__works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 4rem; margin-bottom: 5rem; }

.featured-work .featured__work-wrapper {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    border-radius: 8px;
    background-color: var(--clr-card-black);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.featured-work .featured__work-wrapper:hover {
    box-shadow: 0 0 25px -5px rgba(197, 164, 126, 0.7);
    transform: translateY(-5px);
}
.featured__work-thumb {
    position: relative;
    overflow: hidden;
}
.featured__work-thumb img {
    transition: transform 0.5s ease, filter 0.5s ease;
    width: 100%;
    height: 35rem;
    object-fit: cover;
    display: block;
}
.featured__work-wrapper:hover .featured__work-thumb img {
    transform: scale(1.05);
    filter: brightness(0.5);
}
.featured__work-view-btn {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    background-color: var(--clr-theme-accent);
    color: var(--clr-background-primary);
    padding: 1rem 1.8rem;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
}
.featured__work-wrapper:hover .featured__work-view-btn {
    opacity: 1;
    transform: translateY(0);
}
.featured__work-view-btn a { color: inherit; }

.featured__work-content {
    padding: 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.project__title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
    color: var(--clr-theme-primary);
}
.project__title a {
    color: inherit;
}
.project__tags {
    font-size: 1.4rem;
    color: var(--clr-theme-secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}
.all-projects-btn-wrapper { margin-top: 4rem; position: relative; }
.featured-works-area__shapes .featured-works-area__shape-1 { position: absolute; top: -6rem; left: 50%; transform: translateX(-60%) rotate(-15deg); width: 10rem; opacity: 0.3; }
.border-btn { display: inline-block; padding: 1.2rem 3rem; border: 2px solid var(--clr-theme-accent); color: var(--clr-theme-accent); text-transform: uppercase; font-weight: 600; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; font-size: 1.5rem; }
.border-btn:hover { background-color: var(--clr-theme-accent); color: var(--clr-background-primary); }
.border-btn .btn-icon { margin-left: 0.8rem; }


/* ==== CONTACT FORM AREA - FINAL STYLING ==== */
.contact-area {
    background-color: var(--clr-contact-section-bg);
    color: var(--clr-theme-primary);
    position: relative;
    /* يمكنك إعادة تفعيل صورة الخلفية والتراكب إذا أردت الآن */
    /* background-image: url('The Saudi Investment Bank Annual Gathering 2025 (1).png'); */
    /* background-size: cover; */
    /* background-position: center; */
}

/* التراكب اللوني (اختياري، إذا كنت تستخدم صورة خلفية للقسم) */
/* .contact-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.85); /* تراكب داكن لجعل النص أوضح فوق الصورة
    z-index: 0;
} */

.contact-area .container {
    position: relative;
    z-index: 1;
}

.contact-area .section__title-wrapper .section__subtitle-text {
    color: var(--clr-theme-accent) !important;
    font-weight: 500;
}

.contact-area .section__title-wrapper .section__title-main.large {
    color: var(--clr-theme-primary);
    font-size: 3.6rem;
    font-weight: 600;
    margin-bottom: 35px; /* مسافة جيدة قبل النموذج */
}

.contact-form-main .form-group input[type="text"],
.contact-form-main .form-group input[type="email"],
.contact-form-main .form-group textarea {
    width: 100%;
    padding: 16px 20px;
    background-color: var(--clr-contact-input-bg);
    border: 1px solid var(--clr-contact-input-border); /* حد أدق قليلاً */
    border-radius: 6px;
    color: var(--clr-contact-input-text);
    font-family: var(--tpl-ff-body);
    font-size: 1.5rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    outline: none;
}

.contact-form-main .form-group input[type="text"]::placeholder,
.contact-form-main .form-group input[type="email"]::placeholder,
.contact-form-main .form-group textarea::placeholder {
    color: var(--clr-contact-input-placeholder);
    opacity: 0.8; /* جعل الـ placeholder أقل حدة قليلاً */
}

.contact-form-main .form-group input[type="text"]:focus,
.contact-form-main .form-group input[type="email"]:focus,
.contact-form-main .form-group textarea:focus {
    border-color: var(--clr-contact-input-border-focus);
    background-color: var(--clr-contact-input-bg-focus);
    box-shadow: 0 0 0 3px rgba(197, 164, 126, 0.25); /* ظل أخف قليلاً */
}

.contact-form-main .form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-main .form-submit-btn {
    margin-top: 25px; /* تقليل المسافة قليلاً */
}

.c-button.btn-send-message {
    padding: 15px 38px;
    background-color: var(--clr-contact-button-bg);
    border: none;
    border-radius: 6px;
    color: var(--clr-contact-button-text);
    font-family: var(--tpl-ff-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 1.1px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    text-align: center;
}

.c-button.btn-send-message:hover {
    background-color: var(--clr-contact-button-hover-bg);
    transform: translateY(-2px);
}
/* ==== END OF FINAL CONTACT FORM STYLING ==== */


/* ==== FOOTER ==== */
.footer-area {
    background-color: var(--clr-black-true);
    padding-top: 7rem;
    padding-bottom: 0;
}
.footer-main-row > .footer-widget-group { margin-bottom: 3rem; }

.footer__logo img { max-height: 4.2rem; margin-bottom: 2.8rem; }
.social-links ul { list-style: none; display: flex; gap: 1.4rem; padding-left: 0; margin-top: 0; }
.social-links ul li a { color: var(--clr-theme-primary); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; background-color: var(--clr-footer-icon-bg); border-radius: 50%; transition: background-color 0.3s, color 0.3s; }
.social-links ul li a:hover { background-color: var(--clr-theme-accent); color: var(--clr-background-primary); }

.footer__widget-title { font-size: 1.55rem; color: var(--clr-theme-accent); margin-bottom: 2.8rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.8px; }
.footer__links ul { list-style: none; padding-left: 0; }
.footer__links ul li { margin-bottom: 1.4rem; }
.footer__links ul li a { color: var(--clr-footer-link); display: inline-block; font-size: 1.45rem; text-decoration: none; }
.footer__links ul li a:hover { color: var(--clr-theme-accent); }
.footer__links ul li a::before { display: none; }

p.newsletter-description { font-size: 1.4rem; line-height: 1.7; color: var(--clr-theme-secondary-text); margin-bottom: 2.8rem; }
.joining-form .input-wrapper { display: flex; align-items: center; margin-bottom: 2rem; border-radius: 4px; overflow: hidden; background-color: var(--clr-newsletter-input-bg); height: 4.8rem; padding: 0 0.5rem 0 2rem; }
.joining-form input[type="email"] { flex-grow: 1; padding: 1rem 0; border: none; background-color: transparent; color: var(--clr-theme-secondary-text); outline: none; font-size: 1.4rem; height: 100%; }
.joining-form input[type="email"]::placeholder { color: var(--clr-newsletter-placeholder); opacity: 1; }
.joining-form .circle-icon-btn { background-color: var(--clr-theme-accent); color: var(--clr-background-primary); border: none; width: 3.8rem; height: 3.8rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: background-color 0.3s ease; flex-shrink: 0; }
.joining-form .circle-icon-btn:hover { background-color: #b3863c; }
.joining-form label { font-size: 1.3rem; color: var(--clr-theme-secondary-text); display: flex; align-items: center; cursor: pointer; }
.joining-form input[type="checkbox"] { accent-color: var(--clr-theme-accent); margin-right: 0.8rem; width: 1.3rem; height: 1.3rem; vertical-align: middle; appearance: auto; }

.copyright-area { background-color: var(--clr-black-true); padding: 2.8rem 0; }
.footer-top-line { height: 1px; background-color: var(--clr-copyright-line); margin-bottom: 2.8rem; margin-top: 5rem; }
.copyright__text p { color: var(--clr-copyright-text); font-size: 1.3rem; margin: 0; }
.copyright__text a { color: var(--clr-theme-accent); font-weight: 500; }

.progress-wrap { position: fixed; bottom: 3rem; right: 3rem; width: 3.8rem; height: 3.8rem; background-color: var(--clr-footer-icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--clr-theme-primary); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s; cursor: pointer; border: 1px solid var(--clr-footer-icon-bg); }
.progress-wrap.active-progress { opacity: 1; visibility: visible; }
.progress-wrap:hover { transform: translateY(-3px); background-color: var(--clr-theme-accent); color: var(--clr-background-primary); border-color: var(--clr-theme-accent); }
.progress-wrap svg { display: none; }
.progress-wrap .inside-arrow { font-size: 1.5rem; line-height: 1; }


/* ==== RESPONSIVE STYLES ==== */
@media (max-width: 1199px) { /* Large devices */
    .d-xl-none { display: block !important; }
    .d-xl-block { display: none !important; }
    .menu__bar { display: flex; align-items: center;}
    h1.hero__title.small-hero-title { font-size: 3.8rem; }
    .featured__works-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main-row > .col-xl-auto {
        flex-basis: auto;
    }
     .footer-group-newsletter {
        flex-grow: 1;
    }
}

@media (max-width: 991px) { /* Medium devices (tablets) */
    html { font-size: 9.5px; }
    h1.hero__title.small-hero-title { font-size: 3.2rem; }
    .garnish-tl, .garnish-tr, .garnish-bl, .garnish-br { width: 50px; height: 2px; }
    .garnish-tl { top: 20px; left: 15px; } .garnish-tr { top: 20px; right: 15px; }
    .garnish-bl { bottom: 20px; left: 15px; } .garnish-br { bottom: 20px; right: 15px; }
    .featured-works-area::before { top: 20px; left: 20px; width: 45px; height: 45px; border-width: 3px 0 0 3px;}
    .featured-works-area::after { bottom: 20px; right: 20px; width: 45px; height: 45px; border-width: 0 3px 3px 0;}
    .featured__works-grid { grid-template-columns: 1fr; }
    .featured__work-thumb img { height: 40rem; }
    h2.section__title-main { font-size: 3.2rem; }
    h2.section__title-main.large { font-size: 3.8rem; }
    .footer-main-row > .footer-widget-group {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 3.5rem;
    }
    .footer-main-row > .footer-widget-group:last-child { margin-bottom: 0; }
    .social-links ul { justify-content: center; }
    .text-lg-end { text-align: left; }
    .services-area .border-bottom-btn { display: inline-block; }
    .meta-item-call { writing-mode: horizontal-tb; transform: none; top: 2rem; left: 2rem; padding: 0.5rem 1rem; border-radius: 25px; }
    .meta-item-call .meta-item__icon img { height: 1.6rem; margin-bottom: 0; margin-right: 0.8rem; }
    .meta-item-call .meta-item__text p a { font-size: 1.3rem; }

    /* Responsive for Contact Form (Final) */
    .contact-area .section__title-wrapper .section__title-main.large {
        font-size: 3.2rem;
    }
}

@media (max-width: 767px) { /* Small devices (landscape phones) */
    html { font-size: 9px; }
    .section-spacing { padding: 6rem 0; }
    h1.hero__title.small-hero-title { font-size: 2.8rem; }
    .service-slide-item { height: 40rem; }
    .garnish-tl, .garnish-tr, .garnish-bl, .garnish-br { width: 40px; height: 2px; }
    .garnish-tl { top: 15px; left: 10px; } .garnish-tr { top: 15px; right: 10px; }
    .garnish-bl { bottom: 15px; left: 10px; } .garnish-br { bottom: 15px; right: 10px; }
    .featured-works-area::before { top: 15px; left: 15px; width: 35px; height: 35px; border-width: 2.5px 0 0 2.5px;}
    .featured-works-area::after { bottom: 15px; right: 15px; width: 35px; height: 35px; border-width: 0 2.5px 2.5px 0;}
    .d-md-block { display: block !important; }
    .hero__shapes { display: none !important; }
    .section-spacing-bottom { padding-bottom: 6rem; }
    .row { margin-left: -1rem; margin-right: -1rem; }
    [class^="col-"] { padding-left: 1rem; padding-right: 1rem; }
    .featured-works-area__shapes .featured-works-area__shape-1 { display: none; }
    .featured__work-thumb img { height: 35rem; }
    .featured__work-content { padding: 2rem; }
    .project__title { font-size: 2rem; }
    .project__tags { font-size: 1.3rem; }
    .footer-area { padding-top: 5rem; }
    .footer-top-line { margin-top: 2rem; margin-bottom: 2rem; }
    .copyright-area { padding: 2rem 0; }

    /* Responsive for Contact Form (Final) */
    .contact-area .section__title-wrapper .section__title-main.large {
        font-size: 3rem;
    }
    .contact-form-main .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .contact-form-main .col-md-6:first-child .form-group { margin-bottom: 2.5rem; }
    .contact-form-main .col-md-6:last-child .form-group { margin-top: 0; }

    .contact-form-main .form-group input[type="text"],
    .contact-form-main .form-group input[type="email"],
    .contact-form-main .form-group textarea {
        font-size: 1.5rem;
        padding: 14px 18px;
    }
    .c-button.btn-send-message {
        padding: 14px 30px;
        width: 100%;
        font-size: 1.5rem;
    }
}

@media (max-width: 575px) { /* Extra small devices (portrait phones) */
    html { font-size: 8.5px; }
    .section-spacing { padding: 5rem 0; }
    h1.hero__title.small-hero-title { font-size: 2.4rem; line-height: 1.3; }
    .service-garnish, .featured-works-area::before, .featured-works-area::after { display: none; }
    h2.section__title-main { font-size: 2.5rem; }
    h2.section__title-main.large { font-size: 3rem; }
    .d-sm-flex { display: flex !important; }
    .meta-item-call { display: none !important; }
    .footer__links ul li a::before { display: none; }
    .joining-form .input-wrapper { flex-direction: column; background-color: transparent; border: none; padding: 0; height: auto; }
    .joining-form input[type="email"] { margin-bottom: 1rem; border-radius: 4px; background-color: var(--clr-newsletter-input-bg); padding: 1.2rem 1.5rem; width: 100%; height: 4.2rem; }
    .joining-form .circle-icon-btn { border-radius: 4px; padding: 1.2rem; width: 100%; margin-left: 0; height: 4.2rem; }
    .progress-wrap { width: 3.6rem; height: 3.6rem; bottom: 2.2rem; right: 2.2rem;}
    .progress-wrap .inside-arrow { font-size: 1.3rem; }
    .footer-area { padding-top: 4rem; }
     .footer-main-row > .footer-widget-group { margin-bottom: 2.5rem; text-align: center; }
     .social-links ul { justify-content: center;}

    /* Responsive for Contact Form (Final) */
    .contact-area .section__title-wrapper .section__title-main.large {
        font-size: 2.8rem;
    }
    .c-button.btn-send-message {
        padding: 13px 25px;
        font-size: 1.4rem;
    }
    .contact-form-main .form-group input[type="text"],
    .contact-form-main .form-group input[type="email"],
    .contact-form-main .form-group textarea {
        font-size: 1.4rem;
        padding: 12px 15px;
    }
}
/* Styles for Scroll Reveal Animations (from animations.js) */
.section__title-wrapper,
.about__content,
.services-wrapper,
.featured__works-grid > .featured-work,
.contact-area .section__title-wrapper,
.contact-form-main,
.footer-area .row > [class^="col-"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section__title-wrapper.is-visible,
.about__content.is-visible,
.services-wrapper.is-visible,
.featured__works-grid > .featured-work.is-visible,
.contact-area .section__title-wrapper.is-visible,
.contact-form-main.is-visible,
.footer-area .row > [class^="col-"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide .hero__content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}
.hero-slide.active-slide .hero__content.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Staggered animation for grid items */
.featured__works-grid > .featured-work.is-visible:nth-child(1) { transition-delay: 0.1s; }
.featured__works-grid > .featured-work.is-visible:nth-child(2) { transition-delay: 0.2s; }
.featured__works-grid > .featured-work.is-visible:nth-child(3) { transition-delay: 0.3s; }
.featured__works-grid > .featured-work.is-visible:nth-child(4) { transition-delay: 0.4s; }


/* Subtle Hover Effects */
.service-slide-item,
.border-btn,
.simple-hero-btn {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-slide-item:hover {
    transform: translateY(-5px);
}

.border-btn:hover,
.simple-hero-btn:hover {
    transform: scale(1.05);
}
/* --- بداية ملف style1.css (المتغيرات والأنماط العامة كما هي) --- */
:root {
    --clr-theme-primary: #eeeeee;
    --clr-theme-secondary-text: #888888;
    --clr-background-primary: #151515;
    --clr-background-secondary: #222222;
    --clr-theme-accent: #c5a47e; /* اللون الذهبي */

    --clr-contact-input-text: #f0f0f0;
    --clr-contact-input-placeholder: #b0b0b0;
    --clr-contact-button-hover-bg: #b3863c;
    --clr-black-true: #000000;

    /* ... باقي متغيراتك ... */

    --tpl-ff-heading: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    --tpl-ff-body: 'Georgia', 'Times New Roman', Times, serif;
}

/* --- الأنماط العامة ... (انسخها كما هي من ملفك الأصلي) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 10px; }
body {
    font-family: var(--tpl-ff-body);
    background-color: var(--clr-background-primary);
    color: var(--clr-theme-primary);
    line-height: 1.6;
    font-size: 1.6rem;
    overflow-x: hidden;
    cursor: default;
}
/* ... أكمل باقي الأنماط العامة والخاصة بالأقسام الأخرى ... */




/* !!! DESIGN PROPOSAL 2: Two-Column Layout with Button on the Right (Requires HTML adjustment) !!! */
/* هذا التصميم يضع الاسم والبريد في عمود، والموضوع والرسالة (بنفس الارتفاع) في عمود آخر، والزر أسفل العمود الثاني أو بعرض كامل.
   لجعل الزر على اليمين بجانب حقل الرسالة، ستحتاج لتعديل HTML ليصبح حقل الرسالة والزر داخل نفس الـ col-md-6 أو ما شابه.
   الكود التالي يفترض أن الزر سيظل أسفل كل شيء بعرض كامل للتوافق مع HTML الحالي.
*/

#contact-form-section {
    background-image: url('The Saudi Investment Bank Annual Gathering 2025 (1).png') !important;
    background-size: cover !important; background-position: center center !important;
    background-repeat: no-repeat !important; padding: 100px 0 !important;
    position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important;
}

#contact-form-section::before {
    content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background-color: rgba(15, 15, 15, 0.92) !important;
    z-index: 0 !important;
}

#contact-form-section .container {
    position: relative !important; z-index: 1 !important;
    max-width: 900px !important; 
}

#contact-form-section .section__title-wrapper {
    margin-bottom: 50px !important; text-align: center !important;
}

#contact-form-section .section__title-wrapper .section__subtitle-text {
    color: var(--clr-theme-accent, #c5a47e) !important; font-weight: 500 !important;
    font-size: 1.5rem !important; letter-spacing: 1px !important;
}

#contact-form-section .section__title-wrapper .section__title-main.large {
    color: var(--clr-theme-primary, #eeeeee) !important; font-size: 4rem !important;
    font-weight: 700 !important; letter-spacing: 1.5px !important;
}

#contact-form-section form.contact-form-main {
    display: block !important; visibility: visible !important; opacity: 1 !important;
}

#contact-form-section form.contact-form-main .row {
    display: flex !important; flex-wrap: wrap !important;
    margin-left: -15px !important; 
    margin-right: -15px !important;
}

 .form-column-left { float: left; width: 48%; margin-right: 4%; }
 .form-column-right { float: left; width: 48%; }

#contact-form-section form.contact-form-main [class^="col-"] {
    padding-left: 15px !important; padding-right: 15px !important;
    display: flex !important; flex-direction: column !important;
}

#contact-form-section form.contact-form-main .form-group {
    margin-bottom: 22px !important; width: 100% !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
}

#contact-form-section form.contact-form-main .form-group input[type="text"],
#contact-form-section form.contact-form-main .form-group input[type="email"],
#contact-form-section form.contact-form-main .form-group textarea {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 100% !important;
    height: 56px !important; 
    min-height: 56px !important; 
    padding: 15px 20px !important;
    background-color: rgba(50, 50, 50, 0.6) !important; 
    -webkit-backdrop-filter: blur(12px) !important; 
    backdrop-filter: blur(12px) !important;
    color: var(--clr-contact-input-text, #f0f0f0) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 12px !important; 
    font-size: 1.5rem !important;
    font-family: var(--tpl-ff-body) !important;
    box-sizing: border-box !important; outline: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    resize: none !important;
    line-height: 1.5 !important;
}


#contact-form-section form.contact-form-main .form-group input[type="text"]::placeholder,
#contact-form-section form.contact-form-main .form-group input[type="email"]::placeholder,
#contact-form-section form.contact-form-main .form-group textarea::placeholder {
    color: var(--clr-contact-input-placeholder, #a0a0a0) !important;
    opacity: 0.6 !important;
}

#contact-form-section form.contact-form-main .form-group input[type="text"]:focus,
#contact-form-section form.contact-form-main .form-group input[type="email"]:focus,
#contact-form-section form.contact-form-main .form-group textarea:focus {
    border-color: rgba(197, 164, 126, 0.9) !important; 
    box-shadow: 0 0 18px rgba(197, 164, 126, 0.35), 0 0 6px rgba(197, 164, 126, 0.5) inset !important;
}


#contact-form-section form.contact-form-main .form-submit-btn {
    text-align: center !important; margin-top: 25px !important;
    width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important;
}

#contact-form-section form.contact-form-main .form-submit-btn .c-button.btn-send-message {
    display: inline-block !important; visibility: visible !important; opacity: 1 !important;
    background: transparent !important;
    color: var(--clr-theme-accent, #c5a47e) !important;
    padding: 15px 48px !important;
    border: 2px solid var(--clr-theme-accent, #c5a47e) !important; 
    border-radius: 12px !important; 
    font-size: 1.55rem !important; font-family: var(--tpl-ff-heading) !important;
    font-weight: 600 !important; text-transform: uppercase !important;
    letter-spacing: 1.4px !important; cursor: pointer !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
}

#contact-form-section form.contact-form-main .form-submit-btn .c-button.btn-send-message:hover {
    background-color: var(--clr-theme-accent, #c5a47e) !important; 
    color: var(--clr-black-true, #000000) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(197, 164, 126, 0.25) !important;
}

/* !!! END OF DESIGN PROPOSAL 2 !!! */
/* ... (بداية ملف style1.css كما هي) ... */

body {
    /* ... (أنماط body الأخرى) ... */
    cursor: none; /* إخفاء مؤشر الفأرة الافتراضي */
}

/* التأكد من إخفاء المؤشر الافتراضي على العناصر التفاعلية أيضًا */
a, button, input, textarea, select,
.simple-hero-btn, .featured__work-thumb,
.service-slide-item, .progress-wrap, .c-button, .circle-icon-btn {
    cursor: none !important; /* استخدام !important لضمان الأولوية */
}


/* ==== MOUSE CURSOR ==== */
.mouseCursor {
    display: none;
    position: fixed;
    border-radius: 50%;
    pointer-events: none; /* مهم جدًا حتى لا يعترض المؤشر المخصص نقرات الفأرة */
    z-index: 9999;
    left: 0; /* سيتم تحديثه بواسطة JS */
    top: 0;  /* سيتم تحديثه بواسطة JS */
    transform: translate(-50%, -50%); /* لتوسيط العنصر على نقطة الفأرة */
    transition-property: width, height, background-color, border-color, opacity;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* انتقال سلس */
}

.cursor-outer {
    width: 35px;
    height: 35px;
    border: 2px solid var(--clr-theme-accent);
    background-color: rgba(197, 164, 126, 0.1); /* لون خلفية خفيف جدًا */
}

.cursor-inner {
    width: 8px;
    height: 8px;
    background-color: var(--clr-theme-accent);
    /* لا تحتاج لـ left و top هنا إذا كانت position: fixed و transform يضبطها */
}

/* تأثيرات المرور باستخدام الكلاس المضاف بواسطة JS */
.mouseCursor.cursor-hover-effect.cursor-outer {
    width: 50px;
    height: 50px;
    border-color: rgba(197, 164, 126, 0.7);
    background-color: rgba(197, 164, 126, 0.2);
    opacity: 0.8;
}

.mouseCursor.cursor-hover-effect.cursor-inner {
    width: 10px;
    height: 10px;
    background-color: var(--clr-theme-primary); /* تغيير لون النقطة الداخلية عند المرور */
    opacity: 1;
}

/* إزالة الـ span drag إذا لم يكن مستخدمًا أو تعديل مظهره */
.cursor-inner span {
    display: none;
}


/* ... (باقي أنماط ملف style1.css كما هي) ... */
.form-submit-btn {
    /* text-align: center !important; */ /* لن نحتاجه مع Flexbox */
    margin-top: 25px;
    width: 100%;
    /* display: block; */ /* سيتم استبداله بـ flex */

    /* خصائص Flexbox للتوسيط الأفقي */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* للتوسيط الرأسي إذا كان هناك ارتفاع محدد أو عناصر أخرى */
}

/* الزر يبقى كما هو أو بالخصائص المبسطة من الخطوة 1 */
.form-submit-btn .c-button.btn-send-message {
    display: inline-block; /* أو حتى block، flex سيتعامل معه */
    /* ... باقي خصائص مظهر الزر ... */
    background: transparent;
    color: var(--clr-theme-accent, #c5a47e);
    padding: 15px 48px;
    border: 2px solid var(--clr-theme-accent, #c5a47e);
    border-radius: 12px;
    font-size: 1.55rem;
    font-family: var(--tpl-ff-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
/* ============================================== */
/*          DEBUGGING BUTTON CENTERING            */
/* ============================================== */

/* 1. تأكد أن col-12 تأخذ العرض الكامل ولا تؤثر سلبًا */
#contact-form-section form.contact-form-main .row .col-12 {
    /* يمكنك إضافة حدود مؤقتة هنا لرؤية أبعادها إذا أردت */
    /* border: 1px solid red; */
    padding-left: 15px !important; /* تأكد من عدم وجود padding يدفعه */
    padding-right: 15px !important;
    width: 100% !important; /* لضمان أخذ العرض الكامل داخل الـ row */
    box-sizing: border-box !important;
}


/* 2. الـ div الحاضن للزر - باستخدام Flexbox بقوة */
#contact-form-section form.contact-form-main .row .col-12 .form-submit-btn {

    width: 100% !important; /* يجب أن يأخذ العرض الكامل من col-12 */
    padding: 10px 0 !important; /* مساحة داخلية لرؤية التأثير */

    /* Flexbox للتوسيط */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    /* إعادة تعيين أي خصائص قد تتعارض */
    float: none !important;
    text-align: center !important; /*  يفضل الاعتماد على justify-content */
    margin-left: auto !important;
    margin-right: auto !important;
    position: static !important; /* تجنبًا لأي absolute/relative قديم */
}

/* 3. الزر نفسه */
#contact-form-section form.contact-form-main .row .col-12 .form-submit-btn .c-button.btn-send-message {

    margin: 0 !important;

    /* الخصائص الأساسية للزر */
    display: inline-block !important; /* أو block, Flexbox سيتعامل معه */
    padding: 15px 48px !important;
    border: 2px solid var(--clr-theme-accent, #c5a47e) !important;
    border-radius: 12px !important;
    font-size: 1.55rem !important;
    font-family: var(--tpl-ff-heading) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    cursor: pointer !important;
    /* ... باقي خصائص المظهر ... */
}
.client-logos-slider-wrapper {
    position: relative;
    width: 100%;
    /* max-width: 1100px; /* أو حسب عرض المحتوى المطلوب للـ 4 شعارات */
    margin: 0 auto;
    overflow: hidden; /* هذا مهم لإخفاء الشرائح الأخرى */
}

.client-logos-slider {
    display: flex; /* لجعل الشرائح متجاورة أفقيًا */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    /* لا تحدد width هنا، دع الشرائح تحدد العرض الكلي */
}

.client-logos-slide {
    /* width: 100vw;  كان هذا لجعل كل شريحة بعرض الشاشة */
    /* الآن سنجعلها تأخذ عرض الـ wrapper الخاص بها */
    width: 100%; /* تأخذ 100% من عرض الـ client-logos-slider-wrapper */
    flex-shrink: 0; /* لمنع الشرائح من التقلص */
    display: flex;
    /* justify-content: space-around;  */ /* لتوزيع الـ 4 شعارات */
    justify-content: center; /* أو center إذا أردتهم متجمعين أكثر */
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
    gap: 20px; /* مسافة بين الشعارات داخل نفس الشريحة */
}

.client-logo-item {
    padding: 10px 15px; /* قللت الـ padding الأفقي قليلاً */
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 1; */ /* يمكن إزالته أو تعديله لـ flex-grow: 0; flex-shrink: 0; */
    flex-grow: 0;
    flex-shrink: 0;
    /* min-width: 100px; */ /* دع الـ max-width يتحكم أكثر */
    /* لتحديد عرض كل شعار ليكون هناك 4 تقريبًا في الصف */
    /* إذا كان عرض الـ wrapper حوالي 1100px، والمسافات 20px * 3 = 60px */
    /* (1100 - 60) / 4 = 1040 / 4 = 260px كحد أقصى نظري */
    max-width: 22%; /* حوالي ربع العرض مع حساب المسافات */
    /* أو يمكنك استخدام قيمة ثابتة إذا كنت تفضل: */
    /* max-width: 200px; */
}
.client-logo-item img {
    max-width: 100%;
    max-height: 70px; /* أو الارتفاع الذي حددته */
    object-fit: contain;
    opacity: 0.85; /* تقليل الشفافية قليلاً لجعله أهدأ */
    transition: opacity 0.3s ease, filter 0.3s ease;

    /* الخطوة 1: جعل الشعار أبيض ناصع (إذا كان أسود في الأصل) */
    filter: brightness(0) invert(1);

    /* الخطوة 2: توهج ذهبي خفيف جداً جداً */
    /* استخدم اللون الذهبي من متغيراتك: var(--clr-theme-accent, #c5a47e) */
    /* ولكن سنستخدمه مع شفافية عالية جداً (قيمة ألفا صغيرة في rgba) */
    /* وقيمة blur صغيرة */

    /* جرب هذه القيم: */
    filter:
        brightness(0) invert(1) /* أولاً، اجعلها بيضاء */
        /* التوهج الذهبي: قيمة blur صغيرة جدًا، ولون ذهبي شفاف جدًا */
        drop-shadow(0 0 2px rgb(197, 164, 126)) /* قيمة ألفا 0.25 تعني 25% شفافية للون الذهبي، وقيمة blur صغيرة 2px */
        /* (اختياري) توهج أبيض خفيف جدًا لتعزيز الأبيض إذا لزم الأمر */
        /* drop-shadow(0 0 1px rgba(255, 255, 255, 0.3)); */
}

/* تأثير المرور يمكن أن يزيده قليلاً جدًا أو يبقى كما هو */
.client-logo-item:hover img {
    opacity: 1;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 3px rgb(197, 164, 126)) /* زيادة طفيفة جدًا في الانتشار والشفافية */
        /* drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); */
}
/* ... (الأنماط السابقة) ... */

/* ==== CLIENT LOGOS AREA - Navigation Arrows Styling ==== */
.client-logos-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px; /* أو حسب عرض المحتوى المطلوب للـ 4 شعارات */
    margin: 0 auto;
    overflow: hidden;
    padding: 0 50px; /* !!! إضافة مهمة: مساحة داخلية للاسهم !!! */
    box-sizing: border-box; /* لضمان أن الـ padding لا يزيد العرض الكلي */
}

.client-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent; /* جعل الخلفية شفافة */
    color: var(--clr-theme-primary); /* لون السهم أبيض أو فاتح */
    border: none; /* إزالة أي حدود افتراضية */
    /* border: 1px solid var(--clr-theme-primary); */ /*  حدود بيضاء رقيقة إذا أردت */
    border-radius: 50%;
    width: 45px;  /* حجم الدائرة */
    height: 45px; /* حجم الدائرة */
    font-size: 1.8rem; /* حجم أيقونة السهم */
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7; /* شفافية بسيطة مبدئياً */
}

.client-slider-nav:hover {
    background-color: var(--clr-theme-accent); /* لون التمييز عند المرور */
    color: var(--clr-black-true); /* لون السهم أسود عند المرور */
    opacity: 1;
    transform: translateY(-50%) scale(1.1); /* تكبير بسيط عند المرور */
}

.client-slider-nav.prev {
    left: 5px; /* المسافة من الحافة اليسرى للـ wrapper (بعد الـ padding) */
}

.client-slider-nav.next {
    right: 5px; /* المسافة من الحافة اليمنى للـ wrapper (بعد الـ padding) */
}

/* تعديلات للاستجابة إذا لزم الأمر */
@media (max-width: 1200px) { /* عندما تكون الشاشة أضيق من max-width للـ wrapper + padding */
    .client-logos-slider-wrapper {
        padding: 0 30px; /* تقليل الـ padding */
    }
    .client-slider-nav.prev {
        left: 0px;
    }
    .client-slider-nav.next {
        right: 0px;
    }
}


@media (max-width: 767px) {
    .client-logos-slider-wrapper {
        padding: 0 15px; /* تقليل الـ padding أكثر للشاشات الصغيرة */
    }
    .client-slider-nav {
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
    }
    .client-slider-nav.prev {
        left: -5px; /* قد تحتاج لتعديل هذه القيم لتناسب */
    }
    .client-slider-nav.next {
        right: -5px; /* قد تحتاج لتعديل هذه القيم لتناسب */
    }
}
.client-logos-area .section__title-main.large {
    color: var(--clr-theme-primary); /* اللون الأبيض الأساسي للنص */
    margin-bottom: 60px; /* أو القيمة الموجودة عندك */
    /* ... أي أنماط أخرى موجودة ... */

    /* إضافة تأثير التوهج الذهبي الخفيف للنص */
    /* قيم X و Y للظل، قيمة التمويه (blur)، ولون الظل (ذهبي شفاف) */
    text-shadow:
        0 0 5px rgba(197, 164, 126, 0.818), /* توهج ذهبي رئيسي خفيف ومنتشر قليلاً */
        0 0 1px rgba(197, 164, 126, 0.805);  /* توهج ذهبي أدق وأقل شفافية لتعزيز الحواف قليلاً (اختياري) */

    /* (اختياري) يمكنك إضافة تأثير بسيط عند المرور على العنوان إذا أردت */
    transition: text-shadow 0.3s ease, color 0.3s ease; /* للانتقال السلس */
}

/* (اختياري) تأثير عند المرور على حاوية العنوان أو العنوان نفسه */
.client-logos-area .section__title-wrapper:hover .section__title-main.large,
.client-logos-area .section__title-main.large:hover {
    /* زيادة طفيفة في التوهج الذهبي */
    text-shadow:
        0 0 8px rgb(197, 164, 126),
        0 0 2px rgb(197, 164, 126);
    /* يمكنك أيضًا تغيير لون النص قليلاً إذا أردت */
    /* color: #f8f8f8; */
}
/* ==========================================================================
   GLOBAL TITLE STYLING WITH GOLDEN GLOW
   ========================================================================== */

/* استهدف العناوين الرئيسية التي تريد تطبيق التأثير عليها */
h1.hero__title, /* عنوان قسم Hero */
h2.section__title-main /* العناوين الرئيسية للأقسام الأخرى */
/* أضف أي محددات أخرى للعناوين الرئيسية هنا إذا كانت موجودة، مثال: */
/* .custom-section-title-class, */
/* h3.sub-section-main-title */
{
    /* الخصائص الموجودة بالفعل لهذه العناوين (مثل color, margin, font-family) يجب أن تبقى */
    /* color: var(--clr-theme-primary);  <-- يفترض أنها موجودة بالفعل */

    /* تأثير التوهج الذهبي الخفيف */
    text-shadow:
         0 0 5px rgba(197, 164, 126, 0.652), /* توهج ذهبي رئيسي خفيف ومنتشر قليلاً */
        0 0 1px rgba(197, 164, 126, 0.7);  /* توهج ذهبي أدق وأقل شفافية لتعزيز الحواف قليلاً (اختياري) */

    transition: text-shadow 0.3s ease, color 0.3s ease; /* للانتقال السلس عند أي تغيير (مثل hover) */
}

/* (اختياري) تأثير عند المرور على هذه العناوين */
/* يمكنك تجميع محددات الـ hover أيضًا */
h1.hero__title:hover,
h2.section__title-main:hover
/* .custom-section-title-class:hover, */
/* h3.sub-section-main-title:hover */
{
    /* زيادة طفيفة في التوهج الذهبي */
    text-shadow:
        0 0 8px rgb(197, 164, 126),
        0 0 2px rgb(197, 164, 126);
    /* يمكنك أيضًا تغيير لون النص قليلاً إذا أردت */
    /* color: #f8f8f8; */
}

/* 
ملاحظة هامة: 
إذا كانت لديك قواعد CSS أخرى تستهدف هذه العناوين بمحددات أكثر تحديدًا (higher specificity)
وتقوم بتعيين text-shadow مختلف أو تلغيه (text-shadow: none;)،
فقد تحتاج إلى زيادة "قوة" المحدد في هذه القاعدة الجديدة بإضافة كلاس مشترك
أو استخدام !important (وهو أقل تفضيلاً إذا أمكن تجنبه).
ولكن بما أنك تضيف هذا كتأثير عام، فمن المفترض أن يعمل بشكل جيد.
*/
/* ==========================================================================
   SUBTLE GLOW FOR DESCRIPTIVE TEXT
   ========================================================================== */

/* استهدف الفقرات الوصفية الرئيسية */
p.hero__text.large, /* النص في قسم Hero */
.about__content p.p-text.xlarge /* النص في قسم About Us */
/* أضف أي كلاسات أخرى لنصوص مشابهة إذا أردت */
{
    /* الخصائص الموجودة بالفعل لهذه النصوص (مثل color, font-size, line-height) يجب أن تبقى */
    /* color: var(--clr-theme-secondary-text); <-- يفترض أنها موجودة بالفعل أو var(--clr-theme-primary) إذا كان أبيض */

    /* تأثير توهج ذهبي خفيف جداً جداً للنص الأصغر */
    /* قيم X و Y للظل، قيمة تمويه (blur) صغيرة جداً، ولون ظل شفاف جداً */
    text-shadow:
        0 0 2px rgba(197, 164, 126, 0.285), /* توهج ذهبي خفيف جداً، انتشار أقل وشفافية أعلى */
        0 0 1px rgba(197, 164, 126, 0.285);  /* لمسة ذهبية دقيقة جداً لتعزيز الحواف (اختياري جدًا) */

    /* لا تحتاج لـ transition هنا عادةً إلا إذا كان هناك تأثير hover مخطط له */
}

/* 
ملاحظة: 
إذا كان لون النص الأساسي لهذه الفقرات هو الرمادي الفاتح (var(--clr-theme-secondary-text))
وليس الأبيض الناصع، فإن تأثير التوهج الذهبي قد لا يكون واضحًا جدًا أو قد يبدو مختلفًا.
التأثير يعمل بشكل أفضل على النصوص ذات الألوان الفاتحة (الأبيض أو القريب منه).
إذا كان لونها رماديًا، قد تحتاج إلى زيادة طفيفة جدًا في كثافة الظل (قيمة ألفا).
*/
h1.hero__title {
    font-size: 5rem;
    line-height: 1.2;
    margin-bottom: 2.5rem;
    word-break: break-word;
    overflow-wrap: break-word;
    color: var(--clr-theme-primary); /* التأكيد على اللون الأبيض الأساسي للعنوان كله */
}
h1.hero__title span {
    display: block;
    color: inherit; /* اجعل الـ span ترث لون الأب (العنوان الرئيسي) */
}
h1.hero__title span.tpl__theme-color { /* فقط الـ span مع هذا الكلاس يأخذ اللون الذهبي */
    color: var(--clr-theme-accent);
}
/* ==========================================================================
   RESET ANY PREVIOUS GLOBAL TEXT GLOW (إذا كنت قد أضفتها سابقًا)
   ========================================================================== */
/* تأكد من إزالة أو تعليق أي قواعد عامة لـ text-shadow قد تكون أضفتها
   لكل العناوين مثل h2.section__title-main إذا لم تعد تريدها هناك.
   مثال:
    h1.hero__title,
    h2.section__title-main {
        text-shadow: none !important; // لإلغاء أي تأثير سابق إذا لزم الأمر
    }
*/

/* ==========================================================================
   SUBTLE GOLDEN GLOW FOR NAVBAR AND HERO TEXT ONLY
   ========================================================================== */

/* 1. Navbar Links Glow */
header .main-menu nav ul li a {
    /* الخصائص الموجودة بالفعل لهذه الروابط يجب أن تبقى */
    /* color: var(--clr-theme-primary); */

    text-shadow:
        0 0 3px rgba(197, 164, 126, 0.597), /* توهج ذهبي خفيف للناف بار */
        0 0 1px rgba(255, 255, 255, 0.1);  /* لمسة بيضاء خفيفة (اختياري) */
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

header .main-menu nav ul li a:hover,
.offcanvas-nav-wrapper .sidebar-menu-area .menu-list li a:hover {
    text-shadow:
        0 0 5px rgba(197, 164, 126, 0.763),
        0 0 1px rgba(255, 255, 255, 0.2);
    /* color: var(--clr-theme-accent); */ /* إذا أردت تغيير لون النص عند المرور */
}


/* 2. Hero Section Text Glow */
/* نستهدف العنوان الرئيسي داخل أي شريحة في قسم Hero */
.hero-slide .hero__content h1.hero__title {
    /* الخصائص الموجودة بالفعل للعنوان يجب أن تبقى */
    /* color: var(--clr-theme-primary); */

    /* نفس درجة التوهج المستخدمة للناف بار */
    text-shadow:
        0 0 3px rgba(197, 164, 126, 0.89),
        0 0 1px rgba(255, 255, 255, 0.1);
    transition: text-shadow 0.3s ease; /* لا نحتاج color transition هنا عادة */
}
/* ==========================================================================
   Achievements Area Styling
   ========================================================================== */
.achievements-area {
    background-color: var(--clr-background-secondary); /* أو var(--clr-black-true) إذا أردت أغمق */
    position: relative;
    /* يمكنك إضافة حدود علوية/سفلية بلون التمييز إذا أردت */
    /* border-top: 2px solid rgba(var(--clr-theme-accent-rgb), 0.2); */
    /* border-bottom: 2px solid rgba(var(--clr-theme-accent-rgb), 0.2); */
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 4 أعمدة في الشاشات الكبيرة، تتكيف مع الأصغر */
    gap: 30px;
    margin-top: 40px;
}

.achievement-item {
    background-color: var(--clr-background-primary); /* خلفية العنصر أغمق قليلاً أو نفس خلفية القسم */
    padding: 35px 25px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--clr-border);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.achievement-item:hover {
    transform: translateY(-8px);
    border-color: var(--clr-theme-accent);
    box-shadow: 0 10px 25px rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.15); /* ظل ذهبي خفيف */
}

.achievement-item__icon {
    font-size: 3.8rem; /* حجم الأيقونة */
    color: var(--clr-theme-accent);
    margin-bottom: 25px;
    line-height: 1;
}

.achievement-item__icon i {
    transition: transform 0.3s ease;
}
.achievement-item:hover .achievement-item__icon i {
    transform: scale(1.1) rotate(5deg);
}


.achievement-item__count {
    font-family: var(--tpl-ff-heading);
    font-size: 3.6rem; /* حجم الرقم */
    font-weight: 700;
    color: var(--clr-theme-primary);
    margin-bottom: 10px;
    line-height: 1.1;
}

.achievement-item__text {
    font-family: var(--tpl-ff-body);
    font-size: 1.5rem;
    color: var(--clr-theme-secondary-text);
    line-height: 1.5;
    margin-bottom: 0;
}

/* لإضافة متغير لون التمييز كـ RGB لاستخدامه في box-shadow مع شفافية */
:root {
    /* ... المتغيرات الموجودة ... */
    --clr-theme-accent-rgb: 197, 164, 126; /* قيم RGB للون الذهبي c5a47e */
}


/* Responsive adjustments for achievements grid if needed */
@media (max-width: 767px) {
    .achievements-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    .achievement-item {
        padding: 25px 20px;
    }
    .achievement-item__icon {
        font-size: 3.2rem;
        margin-bottom: 20px;
    }
    .achievement-item__count {
        font-size: 3rem;
    }
    .achievement-item__text {
        font-size: 1.4rem;
    }
}

@media (max-width: 575px) {
    .achievements-grid {
        grid-template-columns: 1fr; /* عمود واحد في الشاشات الصغيرة جدًا */
    }
}
/* ==========================================================================
   Services Slider Navigation Buttons
   ========================================================================== */
.services-wrapper {
    position: relative; /* ضروري لتحديد موضع الأزرار بالنسبة له */
    /* يمكنك إضافة padding إذا احتجت لمساحة للأزرار خارج حدود البطاقات */
    /* padding: 0 40px; */
    /* box-sizing: border-box; */
}

.service-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(var(--clr-background-primary-rgb, 21, 21, 21), 0.7); /* خلفية داكنة شبه شفافة */
    color: var(--clr-theme-primary);
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
    opacity: 0; /* إخفاء الأزرار مبدئيًا */
    visibility: hidden;
}

/* إظهار الأزرار عند مرور الفأرة فوق السلايدر (للديسكتوب) أو دائمًا للموبايل (سنتحكم بها أكثر بـ JS) */
.services-wrapper:hover .service-slider-nav,
.services-wrapper.show-nav-always .service-slider-nav { /* كلاس سنضيفه بـ JS للشاشات الصغيرة */
    opacity: 0.8;
    visibility: visible;
}

.service-slider-nav:hover {
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    border-color: var(--clr-theme-accent);
}

.service-slider-prev {
    left: -15px; /* اضبط هذه القيمة لتناسب تصميمك */
}

.service-slider-next {
    right: -15px; /* اضبط هذه القيمة لتناسب تصميمك */
}

/* Responsive adjustments for buttons */
@media (max-width: 767px) {
    .service-slider-prev {
        left: 5px;
    }
    .service-slider-next {
        right: 5px;
    }
    .service-slider-nav {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    /* إظهار الأزرار دائمًا على الموبايل إذا أردنا ذلك عبر JS */
}
:root {
    --clr-background-primary-rgb: 21, 21, 21; 
    --clr-theme-accent-rgb: 197, 164, 126;
} 
/* ==== CLIENT LOGOS AREA ==== */
/* .client-logos-slider-wrapper ... (يبقى كما هو أو مع تعديلات الـ padding للأزرار) ... */

.client-logos-slider {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    /* width سيتم تحديده بواسطة JS أو ضمنيًا من الشرائح */
}

.client-logos-slide {
    width: 100%; /* تأخذ 100% من عرض الـ client-logos-slider-wrapper */
    flex-shrink: 0;
    display: flex;
    justify-content: space-around; /* توزيع الشعارات داخل الشريحة (للديسكتوب) */
    align-items: center;
    padding: 20px 0; /* يمكنك تقليل هذا للموبايل إذا أردت */
    box-sizing: border-box;
    gap: 15px; /* المسافة بين الشعارات داخل الشريحة (للديسكتوب) */
}

.client-logo-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    /* Desktop: Allow multiple logos, e.g., max-width 22% for ~4 logos */
    max-width: 22%; /* للديسكتوب، يسمح بـ 4 شعارات تقريبًا */
    /* min-width: 120px;  يمكنك إضافة حد أدنى إذا أردت */
}

.client-logo-item img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(197, 164, 126, 0.25));
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.client-logo-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

/* === MOBILE STYLES for Client Logos === */
@media (max-width: 767px) { /* أو النقطة الفاصلة التي تراها مناسبة للموبايل */
    .client-logos-slider-wrapper {
        /* يمكنك تعديل الـ padding هنا إذا لزم الأمر للأزرار على الموبايل */
    }

    .client-logos-slide {
        /* On mobile, each slide should ideally host only one logo if we are restructuring slides in JS.
           Or, if we keep existing slides and just want one logo visible from it,
           we would need a different approach.

           Let's assume for now that JS will restructure slides for mobile.
           If not, we need to hide other logos within the *same* .client-logos-slide.
        */
        justify-content: center; /* توسيط الشعار الوحيد في الشريحة */
        gap: 0; /* لا حاجة لـ gap إذا كان هناك شعار واحد */
        padding: 15px 0;
    }

    .client-logo-item {
        /* On mobile, each logo item takes full width of its parent (.client-logos-slide) */
        max-width: 70%; /* أو 80% لترك بعض الهامش، أو 100% إذا كان .client-logos-slide ضيقًا */
        /* min-width: 0; */ /* إزالة أي min-width من الديسكتوب */
        padding: 5px;
    }

    .client-logo-item img {
        max-height: 60px; /* يمكن تصغير حجم الشعار قليلاً على الموبايل */
    }

    /* إذا كنت ستعتمد على JS لإعادة هيكلة الشرائح ليصبح كل شعار في شريحة منفصلة للموبايل،
       فإن الأنماط أعلاه لـ .client-logos-slide و .client-logo-item ستكون جيدة.
       أما إذا كنت تريد إبقاء هيكل الشرائح كما هو وإظهار شعار واحد فقط من كل شريحة
       فسنحتاج إلى JS أكثر تعقيدًا لإخفاء/إظهار .client-logo-item داخل نفس .client-logos-slide
       أو استخدام overflow: hidden على .client-logos-slide مع تحديد عرضه.

       الأسلوب الأسهل هو إعادة هيكلة الشرائح في JS للموبايل.
    */
}
/* ==== FOOTER - Contact Info List ==== */
.footer-contact-info ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* مسافة بين كل معلومة والأخرى */
}

.footer-contact-info li i {
    color: var(--clr-theme-accent); /* اللون الذهبي للأيقونة */
    font-size: 1.6rem;
    margin-right: 15px; /* مسافة بين الأيقونة والنص */
    width: 20px; /* عرض ثابت للأيقونة لمحاذاة النص */
    text-align: center;
}

.footer-contact-info li a {
    color: var(--clr-footer-link); /* لون النص */
    font-size: 1.45rem;
    transition: color 0.3s ease;
}

.footer-contact-info li a:hover {
    color: var(--clr-theme-accent); /* تغيير اللون للذهبي عند المرور */
}
/* ... أنماط أزرار التحكم .client-slider-nav تبقى كما هي أو مع تعديلات طفيفة للموبايل ... */
/* في ملف style1.css */

/* ... الأنماط الموجودة ... */

@media (max-width: 767px) { /* أو نقطة فاصلة أخرى مثل 575px إذا أردت استهداف شاشات أصغر */
    /* ... باقي أنماط الموبايل الموجودة عندك ... */

    /* تعديل حجم عنوان "WHAT WE DO" */
    #services .section__title-wrapper .section__title-main.xlarge {
        font-size: 3rem; /* جرب هذه القيمة، يمكنك تعديلها (زيادة/نقصان) لتناسب بشكل مثالي */
        line-height: 1.2; /* قد يساعد في ضبط الارتفاع إذا لزم الأمر */
        margin-bottom: 0.5rem; /* تقليل الهامش السفلي قليلاً ليتناسب مع "VIEW ALL SERVICES" */
    }
 #services .services__btn .border-bottom-btn {
        font-size: 1rem; /* <<< جرب هذه القيمة، يمكنك تعديلها لتناسب */
        /* يمكنك أيضًا تجربة تعديل padding-bottom إذا لزم الأمر */
        /* padding-bottom: 0.3rem; */
    }

    /* (اختياري) للتأكد من المحاذاة الجيدة بين العنوان والزر على الموبايل */
    /* قد تحتاج إلى تعديل الترتيب أو flex properties إذا كانا في نفس الحاوية الأب */
    /* إذا كانا في أعمدة مختلفة ضمن row، تأكد أن الأعمدة تتصرف بشكل جيد على الموبايل */
    #services .row.align-items-end.section-title-spacing {
        /* يمكنك تغيير المحاذاة إذا لزم الأمر على الموبايل */
        /* align-items: flex-start;  أو center */
    }
     #services .col-lg-8, #services .col-lg-4 {
        /* تأكد أن الأعمدة تأخذ العرض الكامل على الموبايل إذا لم تكن كذلك بالفعل */
        /* flex-basis: 100%; */
        /* max-width: 100%; */
    }
     #services .services__btn {
        /* إذا كان هناك text-lg-end وتسبب في مشكلة على الموبايل */
        /* text-align: left !important; /* أو center */
        margin-top: 1rem; /* إضافة مسافة صغيرة بين "WHAT WE DO" و "VIEW ALL SERVICES" */
    }
    /* (اختياري) تعديل بسيط لموضع "VIEW ALL SERVICES" إذا أصبح قريبًا جدًا */
    /*
    #services .services__btn {
        margin-top: 1rem;
    }
    */
}

/* ... باقي الأنماط ... */
/* في ملف style1.css */
@media (max-width: 767px) {
    /* ... أنماط الموبايل الأخرى ... */

    /* تعديلات لسلايدر العملاء على الموبايل لعرض شعارين */
    .client-logos-slider-wrapper {
        /* قد تحتاج لتعديل الـ padding إذا كانت الأزرار تتداخل */
        /* padding: 0 25px; */
    }

    .client-logos-slide { /* يستهدف الشريحة التي تحتوي الآن على شعارين */
        justify-content: space-around; /* توزيع الشعارين بمسافات متساوية حولهما */
        /* أو يمكنك استخدام 'center' مع gap أكبر إذا أردت تجميعهما أكثر في المنتصف */
        /* justify-content: center; */
        gap: 10px; /* مسافة بين الشعارين */
        padding: 10px 0; /* تقليل الـ padding الرأسي قليلاً إذا أردت */
    }

    .client-logo-item {
        /* اسمح لكل شعار بأخذ جزء من العرض ليناسب شعارين */
        max-width: 45%; /* حوالي 45% لكل شعار لترك مساحة للـ gap */
        /* min-width: 0; */ /* مهم لإلغاء أي min-width من الديسكتوب إذا كان موجودًا */
        flex-grow: 0; /* لا تدعه يتمدد ليملأ الفراغ إذا كان هناك شعار واحد فقط في الشريحة الأخيرة */
        flex-shrink: 0;
    }

    .client-logo-item img {
        max-height: 55px; /* يمكنك تصغير حجم الشعار قليلاً على الموبايل إذا أردت */
    }
}