/* ---------------------------------------------------------
    * Name: 
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset css styles

    * Components

    * section

    * dashboard

    * Responsive
 ------------------------------------------------------------------------------ */
/* --------- Abstracts variable ---------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap");

:root {
    --primary: #43BAFF;
    --main-dark: #19272B;
    --stroke-2: #FFFFFF26;
    --surface: #E1F2F2;
    --white: #FFFFFF;
    --dark-2: #142125;
    --main-blue-1: #086AD8;
}

/* --- 1. إزالة الخلفيات والتدرجات اللونية نهائياً --- */
.partners-info-section,
.partners-carousel-section,
.overlay,
.partners-info-section::before,
.partners-info-section::after {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* إخفاء طبقة الـ Overlay تماماً */
.overlay {
    display: none !important;
}

/* --- 2. توسيط الشعار والنص (التنسيق العام) --- */
/* توسيط النص */
.partners-text .text-content {
    text-align: center !important;

    /* يجبر النص على التوسط */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* يوسط العناصر داخل فليكس */
}

/* توسيط صندوق الإحصائيات */
.stats-box {
    justify-content: center !important;
    gap: 30px;

    /* مسافة متناسقة بين الأرقام */
}

/* --- 3. توسيط الشعار (الخريطة) داخل مساحته --- */
.partners-image {
    position: relative;
    min-height: 400px;

    /* إطار وهمي لتأكيد التوسط (اختياري) */
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-map-logo {
    /* وضع الشعار في منتصف العمود الخاص به تماماً */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto;
    text-align: center;
}

/* ضبط حجم صورة الخريطة */
.map-img {
    max-width: 100%;
    width: 350px;

    /* حجم مناسب للشعار */
    height: auto;
    display: block;
}

/* --- 4. تنسيق للموبايل (تحسين العرض) --- */
@media (max-width: 768px) {
    .partners-image {
        min-height: 250px;

        /* تقليل الارتفاع في الموبايل */
        margin-bottom: 20px;
    }

    .map-img {
        width: 200px;

        /* تصغير الشعار في الموبايل */
    }

    .title {
        font-size: 24px;

        /* تحسين حجم الخط */
    }
}

/* =========================================
   تأثيرات مائية مودرن (Modern Water Effects)
   ========================================= */
/* --- 1. تأثير الشعارات: الطفو والتموج (Floating Ripple) --- */
/* التأكد من أن الحاوية جاهزة للعناصر الإضافية */
.logo-item-node {
    position: relative;
    transition: all 0.4s ease-in-out;
}

/* إنشاء عنصر التموج المائي أسفل الشعار */
.logo-item-node::after {
    content: '';
    position: absolute;
    bottom: 10px;

    /* يبدأ من منتصف الشعار تقريباً */
    left: 50%;
    transform: translateX(-50%) scale(0);

    /* مخفي ومصغر في البداية */
    width: 80px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(27, 118, 150, 0.3) 0%, rgba(27, 118, 150, 0) 70%);

    /* تدرج لوني مائي */
    border-radius: 50%;

    /* شكل بيضاوي */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* حركة ناعمة وفيها ارتداد بسيط */
    z-index: -1;

    /* خلف الشعار */
}

/* عند مرور الماوس على الشعار */
.logo-item-node:hover {
    transform: translateY(-12px);

    /* يطفو الشعار للأعلى */
}

.logo-item-node:hover::after {
    transform: translateX(-50%) scale(1.5);

    /* يكبر التموج */
    opacity: 1;

    /* يظهر التموج */
    bottom: -15px;

    /* ينزل للأسفل ليبدو كظلال مائية */
}

/* تحسين حركة الصورة نفسها */
.logo-natural {
    transition: transform 0.4s ease;
    filter: drop-shadow(0 0 0 rgba(27, 118, 150, 0));

    /* تجهيز الظل */
}

.logo-item-node:hover .logo-natural {
    /* إضافة توهج خفيف جداً حول الشعار */
    filter: drop-shadow(0 5px 10px rgba(27, 118, 150, 0.2));
}

/* --- 2. تأثير الصور: اللمعان المائي (Wet Shine Glare) --- */
.image-box-329 {
    position: relative;
    overflow: hidden;

    /* مهم جداً لقص تأثير اللمعان */
    /* الإبقاء على تنسيقاتك الأصلية */
    border-radius: 12px;
    border: 1px solid rgba(27, 118, 150, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);

    /* تحسين الانتقال */
    transition: all 0.5s ease;
}

/* عنصر اللمعان (The Glare) */
.image-box-329::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;

    /* يبدأ خارج الصورة من اليسار */
    width: 100%;
    height: 100%;

    /* تدرج لوني أبيض شفاف مائل يعطي إحساس الانعكاس على سطح مبلل */
    background: linear-gradient(
        120deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 30%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0.1) 70%, 
        transparent 100%
    );
    transform: skewX(-25deg);

    /* إمالة اللمعان */
    transition: all 0.7s ease;

    /* سرعة مرور اللمعان */
    z-index: 2;
    pointer-events: none;

    /* لضمان عدم تداخله مع الماوس */
}

/* تنسيق الصورة داخل الصندوق */
.image-box-329 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.5s ease, filter 0.5s ease;

    /* تنعيم الحركة */
}

/* عند مرور الماوس على صندوق الصورة */
.image-box-329:hover {
    box-shadow: 0 30px 60px rgba(27, 118, 150, 0.3);

    /* زيادة الظل وتلوينه بلون الثيم */
    border-color: rgba(27, 118, 150, 0.8);

    /* جعل الإطار أكثر وضوحاً */
    transform: translateY(-5px);

    /* رفع الصندوق قليلاً */
}

/* تحريك اللمعان ليمر عبر الصورة */
.image-box-329:hover::before {
    left: 150%;

    /* يتحرك لخارج الصورة من اليمين */
}

/* تكبير الصورة وزيادة سطوعها لتبدو "مبللة" */
.image-box-329:hover img {
    transform: scale(1.08);

    /* تكبير ناعم */
    filter: brightness(1.15) contrast(1.05);

    /* زيادة السطوع والتباين لتبدو مبللة */
    opacity: 1;
}

/* ---------- Reset css styles ----------- */
title html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    vertical-align: baseline;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section {
    display: block;
}

html {
    margin-right: 0 !important;
    font-size: 62.5%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: var(--main-dark);
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: none;
}

a img {
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
}

select {
    max-width: 100%;
}

/* General
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-y: auto;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

p {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

strong,
b,
cite {
    font-weight: bold;
}

dfn,
cite,
em,
i,
blockquote {
    font-style: italic;
}

abbr,
acronym {
    border-bottom: 1px dotted #e0e0e0;
    cursor: help;
}

.btn-link:focus,
.btn-link:hover,
mark,
ins {
    text-decoration: none;
}

sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

small {
    font-size: 75%;
}

big {
    font-size: 125%;
}

address {
    font-style: italic;
    margin: 0 0 20px;
}

code,
kbd,
tt,
var,
samp,
pre {
    margin: 20px 0;
    padding: 4px 12px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    overflow-x: auto;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    border-radius: 0;
    height: auto;
}

svg,
svg path {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Elements
-------------------------------------------------------------- */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

hr {
    margin-bottom: 20px;
    border: dashed 1px #ccc;
}

/* List */
ul,
ol {
    padding: 0;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
}

li {
    list-style: none;
}

ul li,
ol li {
    padding: 0;
}

dl,
dd {
    margin: 0 0 20px;
}

dt {
    font-weight: bold;
}

del,
.disable {
    text-decoration: line-through;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* Table */
table,
th,
td {
    border: 1px solid #343444;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 0;
    table-layout: fixed;
    width: 100%;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

th {
    border-width: 0 1px 1px 0;
    font-weight: bold;
}

td {
    border-width: 0 1px 1px 0;
}

th,
td {
    padding: 8px 12px;
}

/* Media */
embed,
object,
video {
    margin-bottom: 20px;
    max-width: 100%;
    vertical-align: middle;
}

p > embed,
p > iframe,
p > object,
p > video {
    margin-bottom: 0;
}

/* Forms
-------------------------------------------------------------- */
/* Fixes */
button,
input {
    line-height: normal;
}

button,
input,
select,
textarea {
    font-size: 100%;
    line-height: inherit;
    margin: 0;
    vertical-align: baseline;
}

textarea {
    overflow: auto;

    /* Removes default vertical scrollbar in IE6/7/8/9 */
    vertical-align: top;

    /* Improves readability and alignment in all browsers */
}

input[type=checkbox] {
    display: inline;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: button;
    border: 0;
}

input[type=checkbox],
input[type=radio] {
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    vertical-align: sub;

    /* Addresses excess padding in IE8/9 */
}

input[type=search] {
    -webkit-appearance: textfield;

    /* Addresses appearance set to searchfield in S5, Chrome */
}

input[type=search]::-webkit-search-decoration {
    /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Remove chrome yellow autofill */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
}

/* Reset search styling */
input[type=search] {
    outline: 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none;
}

/* Placeholder color */
::-webkit-input-placeholder {
    color: #171412;
}

::-moz-placeholder {
    color: #171412;
    opacity: 1;
}

/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder {
    color: #171412;
}

/* Typography
-------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: "Inter", sans-serif;
    color: var(--on-suface-container);
    margin: 0;
    text-rendering: optimizeLegibility;
}

h1,
.h1 {
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

h2,
.h2 {
    font-size: 48px;
    line-height: 55px;
    font-weight: 700;
    letter-spacing: -1.44px;
}

h3,
.h3 {
    font-size: 30px;
    line-height: 100%;
    font-weight: 700;
    letter-spacing: -0.6px;
}

h4,
.h4 {
    font-size: 24px;
    line-height: 35px;
    font-weight: 700;
}

h5,
.h5 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

h6,
.h6 {
    font-size: 20px;
    line-height: 100%;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* link style
-------------------------------------------------------------- */
a {
    text-decoration: none;
    color: var(--white);
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a:hover,
a:focus {
    color: var(--primary);
    outline: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* tf-container
-------------------------------------------------------------- */
.tf-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 1320px;
    width: 100%;
}

.tf-container .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.tf-container .row > * {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.tf-container.w-full {
    max-width: 100%;
}

.tf-container.w-1810 {
    max-width: 1810px;
}

.tf-container.w-1680 {
    max-width: 1680px;
}

.tf-container.w-1650 {
    max-width: 1650px;
}

/* Extra classes
-------------------------------------------------------------- */
.hidden {
    display: none;
}

.block {
    display: block;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed !important;
}

.position-unset {
    position: unset !important;
}

.overflow-x-clip {
    overflow-x: clip;
}

.z-5 {
    z-index: 5;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.text-medium {
    font-size: 14px;
    line-height: 100%;
}

.fw-3 {
    font-weight: 300;
}

.fw-4 {
    font-weight: 400;
}

.fw-5 {
    font-weight: 500;
}

.fw-6 {
    font-weight: 600;
}

.fw-7 {
    font-weight: 700;
}

.body-2 {
    font-size: 18px;
    line-height: 100%;
}

.ml-11 {
    margin-left: 11px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-70 {
    margin-top: 70px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-17 {
    margin-bottom: 17px;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-21 {
    margin-bottom: 21px;
}

.mb-22 {
    margin-bottom: 22px;
}

.mb-23 {
    margin-bottom: 23px;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-37 {
    margin-bottom: 37px;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-43 {
    margin-bottom: 43px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-53 {
    margin-bottom: 53px;
}

.mb-56 {
    margin-bottom: 56px !important;
}

.mb-57 {
    margin-bottom: 57px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-70 {
    margin-bottom: 70px;
}

.lh-30 {
    line-height: 30px;
}

.lh-32 {
    line-height: 32px;
}

.lh-35 {
    line-height: 35px;
}

.lh-40 {
    line-height: 40px;
}

.lh-45 {
    line-height: 45px;
}

.lh-75 {
    line-height: 75px;
}

.lh-85 {
    line-height: 85px;
}

.lh-100 {
    line-height: 100%;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-26 {
    font-size: 26px;
}

.fs-27 {
    font-size: 27px;
}

.fs-32 {
    font-size: 32px;
    line-height: 100%;
}

.fs-65 {
    font-size: 65px;
}

.g-10 {
    gap: 10px !important;
}

.g-15 {
    gap: 15px;
}

.g-16 {
    gap: 16px;
}

.g-20 {
    gap: 20px !important;
}

.g-25 {
    gap: 25px !important;
}

.g-30 {
    gap: 30px;
}

.rg-15 {
    row-gap: 15px !important;
}

.rg-20 {
    row-gap: 20px !important;
}

.rg-30 {
    row-gap: 30px !important;
}

.rg-50 {
    row-gap: 50px !important;
}

.rg-70 {
    row-gap: 70px !important;
}

.rg-75 {
    row-gap: 75px !important;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
}

.font-family-2 {
    font-family: "DM Sans", sans-serif;
}

/* sib-form */
.sib-form {
    padding: 0;
    font-family: "Inter", sans-serif !important;
    box-sizing: border-box !important;
}

.sib-form *,
.sib-form ::after,
.sib-form ::before {
    box-sizing: border-box !important;
}

#sib-container {
    background-color: unset;
    padding: 0;
}

.sib-form .entry__field {
    background-color: unset;
    border: 0;
    box-shadow: none !important;
    margin: 0;
    position: relative;
}

.sib-form .entry__field .icon-email {
    position: absolute;
    top: 21px;
    left: 21px;
}

.sib-form .sib-form-container .input {
    background-color: var(--main-dark) !important;
    padding: 21px 23px 17px 53px !important;
    color: var(--surface);
    border: 1px solid var(--stroke-2) !important;
    border-radius: 12px;
    font-size: 14px;
    padding: 21px 23px 17px 53px !important;
    height: unset !important;
    font-size: 14px;
    line-height: 16px;
}

.sib-form .entry__specification,
.sib-form .entry__error,
.entry__specification,
.entry__label {
    margin: 0 !important;
}

.sib-form .entry__error {
    margin-top: 5px !important;
    font-size: 14px;
    line-height: 20px;
}

.sib-form-block {
    padding: 0;
}

.sib-optin {
    display: none;
}

#sib-form {
    position: relative;
    display: flex;
    gap: 30px;
}

#sib-form .sib-form-block__button {
    position: relative;
    top: unset;
    right: unset;
    padding: 20px 40px;
    font-size: 16px;
    line-height: 16px;
    min-height: unset;
    width: max-content;
}

.sib-form .clickable__icon {
    margin: 0 5px 0 0;
    fill: #fff;
}

.sib-form-message-panel {
    border: 0;
    padding: 0;
    border-radius: 0px;
    background: transparent;
}

#success-message .sib-form-message-panel__inner-text {
    color: #6BC044;
}

#success-message svg path {
    fill: #6BC044;
}

.sib-form-message-panel__text {
    padding: 0;
}

#error-message .sib-form-message-panel__text {
    color: #ff4949;
}

@media (max-width: 575px) {
    #sib-form {
        flex-direction: column;
    }

    #sib-form .sib-form-block__button {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
}

/* ------------ Components ---------------- */
/* ------------ header ---------------- */
.top-bar {
    padding-left: 15px;
    padding-right: 15px;
}

.top-bar .top-bar-inner {
    padding: 18px 0;
}

.top-bar .list-topbar-item {
    gap: 43px;
}

.top-bar .tf-tb-right {
    gap: 22px;
}

.top-bar-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 10px;
    align-items: center;
}

.top-bar-item a {
    font-weight: 500;
    letter-spacing: 0.05px;
}

.top-bar-item .icon-email {
    font-size: 12px;
}

.list-support {
    gap: 31px;
}

.post-social {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 20px;
}

.post-social.style-radius-50 .icon-social {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--main-dark);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-social.style-radius-50 .icon-social i {
    color: var(--white);
    font-size: 11px;
}

.post-social.style-radius-50 .icon-social:hover {
    background-color: var(--primary);
}

.post-social.style-radius-50 .icon-social:hover i {
    color: var(--main-dark);
}

.post-social.style-bg-white .icon-social {
    width: 40px;
    height: 40px;
    background-color: var(--white);
}

.post-social.style-bg-white .icon-social i {
    color: var(--dark-2);
    font-size: 16px;
}

.post-social.style-bg-white .icon-social:hover {
    background-color: var(--primary);
}

.post-social.style-bg-white .icon-social:hover i {
    color: var(--white);
}

.icon-social i {
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.icon-social:hover i {
    color: var(--primary);
}

.icon-social .icon-youtube {
    font-size: 12px;
}

.menu-primary-menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 32px;
}

.menu-primary-menu .menu-item {
    cursor: pointer;
}

.menu-primary-menu .menu-item:not(.menu-item-has-children) {
    padding-right: 0;
}

.menu-primary-menu .menu-item.menu-item-has-children .item-link {
    z-index: 2;
    padding-right: 19px;
    position: relative;
}

.menu-primary-menu .menu-item.menu-item-has-children .item-link::after {
    content: "\e90b";
    position: absolute;
    top: 50%;
    right: 3px;
    font-size: 6px;
    line-height: 18px;
    font-family: "icomoon";
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 1;
}

.menu-primary-menu .menu-item:hover .sub-menu-home,
.menu-primary-menu .menu-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 102%;
    pointer-events: all;
}

.menu-primary-menu .item-link {
    color: var(--white);
    line-height: 90px;
    position: relative;
    font-weight: 500;
    padding: 0 5px;
    display: inline-block;
}

.menu-primary-menu .item-link::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

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

.menu-primary-menu .item-link:hover::after {
    transform: translateY(-50%) rotate(180deg);
}

.menu-primary-menu .item-link:hover::before {
    left: 0;
    right: auto;
    width: 100%;
}

.sub-menu {
    position: absolute;
    width: 233px;
    left: -25px;
    top: 110%;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    pointer-events: none;
    background-color: var(--white);
}

.sub-menu .sub-menu-item {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sub-menu .sub-menu-item .item-link-2 {
    display: inline-block;
    color: var(--main-dark);
    position: relative;
    font-weight: 600;
    width: 100%;
    padding: 10px 24px;
}

.sub-menu .sub-menu-item:hover {
    background-color: var(--primary);
}

.sub-menu .sub-menu-item:hover .item-link-2 {
    color: var(--white);
}

.header {
    border-top: 1px solid var(--stroke-2);
    border-bottom: 1px solid var(--stroke-2);
}

.header .header-content {
    padding-left: 15px;
    padding-right: 0;
}

.header .logo-header {
    padding-right: 15px;
}

.header .main-menu {
    border-left: 1px solid var(--stroke-2);
    padding-left: 15px;
}

.header-right {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 15px;
}

.mobile-button a {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
    cursor: pointer;
}

.mobile-button span {
    position: absolute;
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--white);
}

.mobile-button span:first-child {
    top: 0;
}

.mobile-button span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.mobile-button span:last-child {
    bottom: 0;
}

.mobile-nav-wrap {
    max-width: 300px;
    width: 100%;
}

.mobile-nav-wrap .inner-mobile-nav {
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: var(--main-dark);
    z-index: 99999;
    overflow-y: auto;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.mobile-nav-wrap .inner-mobile-nav .mobile-nav-close {
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
}

.mobile-nav-wrap .inner-mobile-nav .mobile-nav-close svg {
    width: 15px;
    height: 15px;
}

.mobile-nav-wrap .inner-mobile-nav .top-header-mobi {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-wrap .inner-mobile-nav a {
    color: var(--white);
}

.mobile-nav-wrap .logo-mobile {
    max-width: 120px;
}

.mobile-nav-wrap .socials-mobile .date {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 10px;
}

.mobile-nav-wrap .socials-mobile .socials-icon {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item {
    width: 40px;
    height: 40px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:first-child,
.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(2),
.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(3),
.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:nth-child(4) {
    border-right: 0;
}

.mobile-nav-wrap .socials-mobile .socials-icon .socials-item:hover i {
    color: var(--primary);
}

.mobile-nav-wrap .mobile-main-nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 94%;
}

#menu-mobile {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    padding: 30px 0;
}

#menu-mobile > li {
    position: relative;
    border-bottom: 1px solid var(--stroke-2);
    cursor: pointer;
}

#menu-mobile > li a {
    padding: 15px 0;
}

#menu-mobile > li .sub-menu-mobile {
    border-radius: 8px;
    text-align: start;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

#menu-mobile > li .sub-menu-mobile .menu-item a {
    padding: 7px 10px;
}

#menu-mobile > li .sub-menu-mobile .menu-item:first-child a {
    padding-top: 0;
}

#menu-mobile > li .sub-menu-mobile.show {
    transform: translate(0);
    opacity: 1;
    visibility: visible;
}

#menu-mobile > li .sub-menu-mobile li {
    cursor: pointer;
}

#menu-mobile > li .sub-menu-mobile li:last-child {
    border: none;
}

#menu-mobile li a {
    font-weight: 500;
    width: 100%;
    display: inline-block;
}

#menu-mobile li.menu-item-has-children-mobile > a {
    position: relative;
}

#menu-mobile li.menu-item-has-children-mobile > a::after {
    content: "\e90b";
    position: absolute;
    font-family: "icomoon";
    position: absolute;
    font-size: 6px;
    right: 0;
    top: 50%;
    line-height: 16px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#menu-mobile li.menu-item-has-children-mobile > a.collapsed::after {
    transform: translateY(-50%) rotate(0);
}

#menu-mobile li.menu-item-has-children-mobile > a:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}

.contact-mobile .title-contact-mobile {
    margin-bottom: 15px;
    color: var(--white);
}

.contact-mobile .content-contact-moblile {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.contact-mobile .content-contact-moblile:first-child {
    align-items: start;
}

.contact-mobile .content-contact-moblile:first-child i {
    padding-top: 5px;
}

.contact-mobile .content-contact-moblile .icon-location-dot {
    font-size: 18px;
}

.contact-mobile .content-contact-moblile i {
    color: var(--white);
}

.contact-mobile .content-contact-moblile .icon-location-dot2 {
    font-size: 20px;
    margin-top: 3px;
}

.contact-mobile .content-contact-moblile .icon-email {
    font-size: 13px;
    margin-top: 1px;
}

.contact-mobile .content-contact-moblile a {
    line-height: 22px;
}

.contact-mobile .content-contact-moblile:last-child {
    margin-bottom: 0;
}

.header-sticky {
    position: sticky;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: var(--main-dark);
    z-index: 999;
}

.current-menu-item > a {
    color: var(--primary) !important;
}

.current-menu-item > a::before {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
}

.current-item {
    background-color: var(--primary) !important;
}

.current-item > a {
    color: var(--white) !important;
}

.current-menu-mobile-item > a {
    color: var(--primary) !important;
}

/* ------------ footer ---------------- */
.footer {
    overflow: hidden;
    background-color: var(--dark-2);
    position: relative;
}

.footer .footer-top {
    padding-top: 90px;
    padding-bottom: 91px;
}

.footer .line {
    width: 100%;
    height: 1px;
    background-color: var(--stroke-2);
}

.footer .footer-go-top {
    margin-top: -35px;
    margin-bottom: -2px;
}

.footer .footer-middle {
    margin-bottom: 103px;
    gap: 50px 30px;
}

.footer .mask {
    position: absolute;
}

.footer .mask.mask-1 {
    top: 27px;
    right: -31%;
}

.footer .mask.mask-2 {
    top: auto;
    bottom: -41%;
    left: -27%;
}

.footer .footer-bottom {
    margin-bottom: 40px;
}

.footer .locations-contact {
    max-width: 240px;
    width: 100%;
}

.footer .list-bottom {
    margin-top: -9px;
}

.footer-go-top {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid var(--stroke-2);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.footer-go-top::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: var(--white);
}

.footer-go-top i {
    color: var(--main-dark);
    position: relative;
}

.footer-middle .left {
    max-width: 594px;
    width: 100%;
}

.footer-middle .text a {
    text-decoration: underline;
}

.footer-content .title-mobile {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content .title-mobile i {
    font-size: 7px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.footer-content ul {
    margin-top: 35px;
}

.footer-content li {
    margin-bottom: 24px;
}

.footer-content li a {
    color: var(--surface);
}

.footer-content li a:hover {
    color: var(--primary);
}

.footer-content li:last-child {
    margin-bottom: 0;
}

.footer-content.open .title-mobile i {
    transform: rotate(180deg);
}

.locations-contact .item .title {
    margin-bottom: 30px;
}

.locations-contact .locations-footer .address {
    letter-spacing: 0.3px;
}

.locations-contact .contact-footer .title {
    margin-bottom: 36px;
}

.locations-contact .contact-footer a {
    letter-spacing: 0.3px;
    display: inline-block;
    margin-bottom: 9px;
}

.locations-contact .contact-footer h4 a {
    letter-spacing: 0.75px;
}

.footer-bottom ul {
    gap: 46px;
}

/* ------------ tabs ---------------- */
.wg-tab {
    overflow: auto;
}

.wg-tab::-webkit-scrollbar {
    display: none;
}

.wg-tab ul {
    max-width: max-content;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--white);
}

.wg-tab ul li a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-right: 14px;
    padding-bottom: 14px;
    position: relative;
}

.wg-tab ul li a i {
    font-size: 10px;
}

.wg-tab ul li a::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0;
    height: 1px;
    width: 0;
    background-color: var(--primary);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.wg-tab ul li a.active {
    color: var(--primary);
}

.wg-tab ul li a.active:before {
    left: 0;
    right: auto;
    width: 100%;
}

.wg-tab ul li:hover a {
    color: var(--primary);
}

.wg-tab.style-2 ul {
    max-width: 100%;
    min-width: max-content;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    gap: 49px;
    border-bottom: 0;
}

.wg-tab.style-2 ul li a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding-right: 0;
    padding-bottom: 20px;
    position: relative;
}

.wg-tab.style-2 ul li a::before {
    height: 3px;
}

.wg-tab.style-2 ul li a.active {
    color: var(--primary);
}

.wg-tab.style-2 ul li a.active:before {
    left: 0;
    right: auto;
    width: 100%;
}

.wg-tab.style-2 ul li:hover a {
    color: var(--primary);
}

.flat-animate-tab {
    overflow: hidden;
}

.tab-content {
    position: relative;
}

.tab-content .tab-pane {
    display: block;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
}

.tab-content .tab-pane.active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    transition-timing-function: ease-out;
    transition-duration: 0.3s;
    transition-delay: 0.3s;
}

/* ------------ button ---------------- */
.tf-btn {
    padding: 20px 40px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: var(--primary);
    border-radius: 12px;
    font-weight: 600;
    align-items: center;
    max-width: max-content;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-btn span {
    color: var(--white);
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-btn i {
    position: relative;
    color: var(--white);
    font-size: 13px;
    line-height: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 12px;
    background-color: var(--white);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-btn:hover {
    background-color: transparent;
}

.tf-btn:hover i,
.tf-btn:hover span {
    color: var(--main-dark);
}

.tf-btn:hover::before {
    width: 100%;
}

.tf-btn.w-full {
    max-width: 100%;
    width: 100%;
}

.tf-btn.no-bg {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.tf-btn.no-bg::before {
    display: none;
}

.tf-btn.no-bg:hover i,
.tf-btn.no-bg:hover span {
    color: var(--primary);
}

.tf-btn.text-underline span {
    text-decoration-line: underline;
}

.tf-btn.style-bg-white {
    background-color: var(--white);
}

.tf-btn.style-bg-white span,
.tf-btn.style-bg-white i {
    color: var(--main-dark);
}

.tf-btn.hover-bg-main-dark::before {
    background-color: var(--main-dark) !important;
}

.tf-btn.hover-bg-main-dark:hover {
    background-color: transparent;
}

.tf-btn.hover-bg-main-dark:hover i,
.tf-btn.hover-bg-main-dark:hover span {
    color: var(--white);
}

.tf-btn.hover-color-main-dark:hover i,
.tf-btn.hover-color-main-dark:hover span {
    color: var(--main-dark);
}

.tf-btn.style-border {
    background-color: transparent;
    border: 1px solid var(--white);
}

.tf-btn.style-border:hover {
    border-color: transparent;
}

.megamenu-btn {
    padding: 35px 36px;
    background-color: var(--white);
    display: block;
}

.megamenu-btn .burger {
    position: relative;
    width: 25px;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.megamenu-btn .burger span {
    display: block;
    position: relative;
    height: 3px;
    width: 35px;
    transition: 0.5s;
    background-color: var(--main-dark);
}

.megamenu-btn .burger span:not(:first-child) {
    margin-top: 6px;
}

.megamenu-btn .burger span:nth-of-type(1) {
    top: 0px;
    transform-origin: left;
    width: 30px;
}

.megamenu-btn .burger span:nth-of-type(3) {
    top: 100%;
    transform-origin: right;
    width: 30px;
}

.megamenu-btn:hover .burger span:nth-of-type(1) {
    transform: scale(0.2, 1.7) translateY(5px);
}

.megamenu-btn:hover .burger span:nth-of-type(2) {
    width: 30px;
    transform: scale(0.2, 1.7);
}

.megamenu-btn:hover .burger span:nth-of-type(3) {
    transform: scale(0.2, 1.7) translateY(-5px);
}

.fillter-btn.style-fixed {
    position: fixed;
    padding: 10px;
    top: 50%;
    right: 0;
    z-index: 999;
    border-radius: 5px 0 0 5px;
    background-color: var(--white);
}

.fillter-btn.style-fixed i {
    font-size: 20px;
    color: var(--main-dark);
}

.tf-btn-newsletter {
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tf-btn-newsletter i {
    font-size: 20px;
}

.tf-btn-newsletter:hover {
    color: var(--primary);
}

.tf-btn-readmore {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 30px;
    font-weight: 500;
    width: 35px;
    height: 35px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 17.5px;
    border: 1px solid var(--white);
    position: relative;
    padding: 11.5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-btn-readmore .plus {
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 11.5px;
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tf-btn-readmore .text {
    position: absolute;
    transform: translateX(10px);
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: var(--white);
}

.tf-btn-readmore:hover {
    width: 132px;
}

.tf-btn-readmore:hover .plus {
    transform: translateY(-50%);
    left: 20px;
}

.tf-btn-readmore:hover .text {
    padding-left: 23px;
    position: unset;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
}

.tf-btn-readmore.style-open {
    width: 132px;
}

.tf-btn-readmore.style-open .plus {
    transform: translateY(-50%);
    left: 20px;
}

.tf-btn-readmore.style-open .text {
    padding-left: 20px;
    position: unset;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.tf-btn-readmore.style-open:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.tf-btn-close i {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tf-btn-close:hover i {
    color: var(--main-dark);
}

.arrow-btn {
    width: 45px;
    height: 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--stroke-2);
}

.arrow-btn i {
    color: var(--white);
}

.arrow-btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.arrow-btn.swiper-button-disabled {
    pointer-events: none;
    opacity: 0.1 !important;
}

.arrow-btn.w-50 {
    width: 50px !important;
    height: 50px !important;
}

/* ------------ range slider ---------------- */
/* range-slider
    --------------------- */
.range-slider .range-two-val {
    height: 4px;
    box-shadow: none;
    border: 0;
    background: rgba(255, 63, 37, 0.15);
}

.range-slider .range-two-val .noUi-connects {
    position: relative;
}

.range-slider .range-two-val .noUi-connects .noUi-connect {
    background-color: var(--red);
    height: 3px;
}

.range-slider .range-two-val .noUi-origin .noUi-handle {
    position: absolute;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--red);
    border: none;
    box-shadow: none;
    top: -6px;
    right: -9px;
}

.range-slider .range-two-val .noUi-origin .noUi-handle::after,
.range-slider .range-two-val .noUi-origin .noUi-handle::before {
    display: none;
}

.range-slider .range-two-val .noUi-origin .noUi-handle:active {
    right: -10px !important;
}

.range-slider .range-two-val .noUi-origin .noUi-handle.noUi-handle-lower {
    display: none !important;
}

.range-slider .bottom {
    margin-top: 21px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.range-slider .value {
    width: 100%;
    gap: 15px;
    margin-top: 10px;
}

.range-slider .value h6 {
    color: var(--color-title);
}

.range-slider .input-container div {
    position: absolute;
    width: max-content;
    padding: 5px;
    margin: 0;
    border: 1px solid var(--Line);
    border-radius: 5px;
    top: 20%;
    background-color: var(--White);
}

.range-slider .input-container div::before {
    position: absolute;
    display: block;
    content: "";
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid var(--Line);
    border-top-color: transparent;
    border-top-color: var(--White);
}

/* ------------ form ---------------- */
form {
    position: relative;
    z-index: 30;
}

form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    border: unset;
    overflow: hidden;
    margin-bottom: 0;
    outline: none;
}

form input:-webkit-autofill {
    background-color: transparent !important;
    box-shadow: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
    background-color: transparent;
    overflow: hidden;
    padding: 0;
}

fieldset {
    width: 100%;
}

.cols {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

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

.form-search-siderbar input {
    width: 100%;
    height: 60px;
    padding: 13px 25px !important;
    border: none !important;
    background-color: var(--main-dark);
    border-radius: 7px;
    outline: none;
    color: var(--white);
}

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

.form-search-siderbar .tf-btn-search {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
}

.form-search-siderbar .tf-btn-search i {
    font-size: 18px;
    color: var(--primary);
}

.form-newsletter .input-icon-absolute {
    max-width: 69%;
}

.form-newsletter .title {
    margin-bottom: 26px;
}

.form-newsletter .title span {
    letter-spacing: 1px;
    font-style: italic;
}

.form-newsletter input {
    background-color: var(--main-dark) !important;
    padding: 21px 23px 17px 53px !important;
    color: var(--surface);
    border: 1px solid var(--stroke-2) !important;
    border-radius: 12px;
    font-size: 14px;
}

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

.form-newsletter .tf-btn {
    max-width: 100% !important;
    justify-content: center;
}

.form-newsletter .tf-btn span {
    white-space: nowrap;
}

.form-newsletter .desc {
    margin-bottom: 61px;
    letter-spacing: 0.08px;
    max-width: 91%;
}

.form-newsletter .text {
    font-family: "Manrope", sans-serif;
    color: var(--surface);
}

.form-newsletter .text a {
    color: var(--white);
}

.input-icon-absolute {
    position: relative;
}

.input-icon-absolute i {
    position: absolute;
    top: 24px;
    left: 25px;
}

.input-icon-absolute .icon-email {
    font-size: 13px;
}

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

.form-newsletter2 input {
    width: 100%;
    height: 55px;
    padding: 0 17px;
    border: 1px solid var(--stroke-2) !important;
    background-color: var(--main-dark);
    color: var(--white) !important;
}

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

.form-newsletter2 input:-webkit-autofill {
    -webkit-text-fill-color: var(--white);
    background-color: var(--main-dark);
}

.form-newsletter2 .tf-btn-newsletter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.form-comment .title {
    margin-bottom: 32px;
}

.form-comment .item {
    position: relative;
}

.form-comment .item i {
    position: absolute;
    top: 24px;
    right: 25px;
}

.form-comment .item .icon-email {
    font-size: 12px;
}

.form-comment input {
    padding: 19px 25px !important;
    border-radius: 12px;
    outline: 1px solid var(--stroke-2) !important;
    background-color: var(--main-dark);
    color: var(--white) !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.form-comment input:focus {
    outline: 1px solid var(--primary) !important;
}

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

.form-comment input:-webkit-autofill {
    -webkit-text-fill-color: var(--white);
    background-color: var(--main-dark);
}

.form-comment textarea {
    height: 125px;
    padding: 22px 29px !important;
    outline: 1px solid var(--stroke-2) !important;
    background-color: var(--main-dark);
    color: var(--white) !important;
    border-radius: 12px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.form-comment textarea:focus {
    outline: 1px solid var(--primary) !important;
}

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

.form-comment textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--white);
    background-color: var(--main-dark);
}

.form-contact-us {
    padding: 55px 50px 60px;
    background-color: var(--surface);
}

.form-contact-us .heading-form {
    margin-bottom: 32px;
}

.form-contact-us .title {
    margin-bottom: 11px;
    color: var(--main-dark);
    letter-spacing: 0.1px;
}

.form-contact-us .desc {
    color: var(--main-dark);
    letter-spacing: 0.05px;
}

.form-contact-us .item {
    position: relative;
}

.form-contact-us .item i {
    position: absolute;
    top: 19px;
    right: 18px;
    z-index: 10;
    color: var(--main-dark);
}

.form-contact-us .item .icon-email {
    font-size: 13px;
}

.form-contact-us .error {
    color: var(--main-dark);
    margin-bottom: 10px;
}

.form-contact-us textarea {
    height: 125px;
    background-color: var(--white) !important;
    border-radius: 5px;
    padding: 20px 21px !important;
    color: var(--main-dark);
}

.form-contact-us textarea::placeholder {
    color: var(--main-dark);
}

.form-contact-us input {
    background-color: var(--white) !important;
    border-radius: 5px;
    padding: 17px 42px 17px 21px !important;
    color: var(--main-dark);
}

.form-contact-us input::placeholder {
    color: var(--main-dark);
}

.form-contact-us.sidebar-form {
    background-color: transparent;
    padding: 0;
}

.form-contact-us.sidebar-form textarea {
    height: 100px;
    background-color: var(--main-dark) !important;
    border-radius: 5px;
    padding: 17px 18px !important;
    color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
}

.form-contact-us.sidebar-form textarea::placeholder {
    color: var(--white);
}

.form-contact-us.sidebar-form textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
}

.form-contact-us.sidebar-form .nice-select {
    background-color: var(--main-dark);
    padding: 9px 18px !important;
    border-radius: 12px !important;
    border: 1px solid var(--stroke-2) !important;
}

.form-contact-us.sidebar-form .nice-select span {
    color: var(--white);
}

.form-contact-us.sidebar-form .nice-select::before {
    color: var(--white);
}

.form-contact-us.sidebar-form input {
    background-color: var(--main-dark) !important;
    border-radius: 5px;
    padding: 14px 17px !important;
    color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
}

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

.form-contact-us.sidebar-form input:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
}

.form-contact-us.sidebar-form .error {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 {
    background-color: var(--dark-2);
    padding: 48px 50px 50px;
    border-radius: 16px;
}

.form-contact-us.style-bg-dark-2 .error {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 textarea {
    height: 125px;
    background-color: var(--main-dark) !important;
    border-radius: 5px;
    padding: 22px 29px !important;
    color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
}

.form-contact-us.style-bg-dark-2 textarea::placeholder {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
}

.form-contact-us.style-bg-dark-2 .nice-select {
    background-color: var(--main-dark);
    padding: 15px 25px 15px 25px !important;
    border-radius: 12px !important;
    border: 1px solid var(--stroke-2) !important;
}

.form-contact-us.style-bg-dark-2 .nice-select span {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 .nice-select::before {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 input {
    background-color: var(--main-dark) !important;
    border-radius: 5px;
    padding: 20px 24px !important;
    color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
}

.form-contact-us.style-bg-dark-2 input::placeholder {
    color: var(--white);
}

.form-contact-us.style-bg-dark-2 input:-webkit-autofill {
    -webkit-text-fill-color: var(--white) !important;
}

.form-contact-us.style-bg-dark-2 .item i {
    color: var(--white);
    top: 23px;
    right: 24px;
}

.form-contact-us.style-bg-dark-2 input[type=number]::-webkit-outer-spin-button,
.form-contact-us.style-bg-dark-2 input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-contact-us.style-bg-dark-2 input[type=number] {
    -moz-appearance: textfield;
}

.form-contact-us.style-bg-dark-2 .error {
    width: 100%;
    margin-bottom: 10px;
}

.form-contact-us.style-bg-dark-2 .sub-title {
    margin-bottom: 22px;
}

/* ------------ slider ---------------- */
.tf-swiper .swiper-slide {
    height: auto;
}

.tf-swiper .swiper-slide > div {
    height: 100%;
}

.sw-pagination {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.sw-pagination .swiper-pagination-bullet {
    background-color: transparent;
    opacity: 1;
    width: 10px;
    height: 10px;
    position: relative;
    margin-left: 0 !important;
    margin-right: 15px !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sw-pagination .swiper-pagination-bullet::after {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    z-index: 5;
    border-radius: 50%;
    border: 2px solid var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sw-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    background-color: var(--white);
}

.sw-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0 !important;
}

.sw-project {
    margin-right: 15px;
    margin-left: 15px;
}

.sw-testimonial {
    padding: 15px 0;
    margin: -15px 0;
}

.sw-border {
    padding: 15px 0;
    margin: -15px 0;
}

/* ------------ off canvas ---------------- */
.offcanvasMegamenu {
    background-color: var(--dark-2);
    max-width: 450px;
    width: 100% !important;
    --bs-offcanvas-height: max-content;
    overflow-y: auto;
    padding: 20px;
    z-index: 999999;
}

.offcanvasMegamenu .tf-close-btn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offcanvasMegamenu .heading {
    margin-bottom: 30px;
    text-align: end;
}

.offcanvasMegamenu .desc {
    color: var(--surface);
    margin-bottom: 40px;
}

.offcanvasMegamenu .title-content {
    color: var(--white);
    margin-bottom: 15px;
}

.offcanvasMegamenu .contact-list-mega-menu {
    margin-bottom: 40px;
}

.offcanvasMegamenu .contact-list-mega-menu li {
    padding-top: 3px;
    padding-bottom: 3px;
}

.offcanvasMegamenu .contact-list-mega-menu li p {
    color: var(--white);
}

.offcanvasMegamenu .contact-list-mega-menu li a {
    color: var(--surface);
}

.offcanvasMegamenu .contact-list-mega-menu li a:hover {
    color: var(--primary);
}

.offcanvasMegamenu .megamenu-subscribe {
    margin-bottom: 40px;
}

.offcanvasMegamenu .megamenu-recent .tf-post-list {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.offcanvasMegamenu .megamenu-recent .tf-post-list:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.overlay-filter {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-dark);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.overlay-filter.show {
    visibility: visible;
    opacity: 0.3;
}

/* ------------ product ---------------- */
/* ------------ blog ---------------- */
.tf-post-grid {
    background-color: var(--dark-2);
    border: 1px solid var(--stroke-2);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.tf-post-grid .category-post {
    margin-bottom: 20px;
}

.tf-post-grid .image {
    margin: 15px 15px 0;
}

.tf-post-grid .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-post-grid .post-content {
    padding: 38.5px 50px 31px;
}

.tf-post-grid .post-content .title {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.4px;
}

.tf-post-grid .bottom-item {
    padding: 25px 50px 22px;
    border-top: 1px solid var(--stroke-2);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tf-post-grid .bottom-item .icon-email {
    font-size: 13px;
}

.tf-post-grid.style-desc {
    border: 0;
    background-color: transparent;
}

.tf-post-grid.style-desc .image {
    width: 100%;
    margin: 0;
}

.tf-post-grid.style-desc .top {
    position: relative;
}

.tf-post-grid.style-desc .date {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
}

.tf-post-grid.style-desc .category-post {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 5;
    margin-bottom: 0;
}

.tf-post-grid.style-desc .category-post .item {
    background-color: rgba(255, 255, 255, 0.3215686275);
}

.tf-post-grid.style-desc .category-post .item:hover {
    background-color: var(--primary);
    color: var(--white);
}

.tf-post-grid.style-desc .post-content {
    padding: 40px 0 0;
}

.tf-post-grid.style-desc .post-content .title {
    margin-bottom: 15px;
}

.tf-post-grid.style-desc .post-content .sub-title {
    margin-bottom: 25px;
}

.category-post {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 9px;
}

.category-post .item {
    background-color: var(--stroke-2);
    color: var(--white);
    padding: 10px 20px;
    display: inline-block;
}

.category-post .item:hover {
    background-color: var(--primary);
    color: var(--main-dark);
}

.tf-sidebar {
    background-color: var(--dark-2);
    padding: 43px 40px 48px;
    border: 1px solid var(--stroke-2);
}

.tf-sidebar.no-bg {
    background-color: transparent;
    padding: 0;
    border: 0;
}

.sidebar-item {
    border-radius: 7px;
    margin-bottom: 42px;
}

.sidebar-item .title-content {
    padding-bottom: 26px;
    margin-bottom: 40px;
    letter-spacing: -0.3px;
    position: relative;
}

.sidebar-item .title-content::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--stroke-2);
}

.sidebar-item h4 {
    letter-spacing: 0.1px !important;
    padding-bottom: 24px !important;
    font-family: "DM Sans", sans-serif;
}

.sidebar-item.sidebar-search .title-content {
    padding-bottom: 0 !important;
    margin-bottom: 23px;
}

.sidebar-item.sidebar-search .title-content::before {
    display: none !important;
}

.sidebar-item.sidebar-categories .item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26.5px;
}

.sidebar-item.sidebar-categories .item i {
    font-size: 10px;
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sidebar-item.sidebar-categories .item a {
    letter-spacing: 0.2px;
    color: var(--white);
}

.sidebar-item.sidebar-categories .item:hover a,
.sidebar-item.sidebar-categories .item:hover i {
    color: var(--primary);
}

.sidebar-item.sidebar-categories .item:last-child {
    margin-bottom: 0;
}

.sidebar-item.bg-dark-2 {
    background-color: var(--dark-2);
    padding: 43px 40px 48px;
    border: 1px solid var(--stroke-2);
}

.sidebar-contact {
    padding: 50px 40px 48px !important;
}

.sidebar-contact .title-content {
    letter-spacing: 0.3px;
    padding-bottom: 0;
}

.sidebar-contact .title-content::before {
    display: none;
}

.sidebar-recent-posts .tf-post-list {
    border-bottom: 1px solid var(--stroke-2);
    padding-bottom: 34px;
    margin-bottom: 35px;
}

.sidebar-recent-posts .tf-post-list:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.tf-post-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 30px;
}

.tf-post-list .image {
    border-radius: 50%;
    overflow: hidden;
    max-width: 65px;
    height: 100%;
}

.tf-post-list .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-post-list .post-date {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
}

.tf-post-list .post-date span,
.tf-post-list .post-date i {
    color: var(--white);
}

.tf-post-list .post-date .icon-email {
    font-size: 13px;
}

.tf-post-list a {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.2px;
    line-height: 26px;
}

.tf-post-list .post-content {
    max-width: calc(100% - 95px);
    width: 100%;
}

.tf-post-list.style-2 {
    border: 1px solid var(--stroke-2);
    justify-content: space-between;
    gap: 0;
}

.tf-post-list.style-2 .image {
    border-radius: 0;
    overflow: hidden;
    margin: 10px 10px 7px;
    max-width: 100%;
}

.tf-post-list.style-2 .image img {
    display: block;
    height: auto;
    transform: translateY(0);
    object-fit: cover;
}

.tf-post-list.style-2 .post-content {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

.tf-post-list.style-2 .post-meta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 15px;
}

.tf-post-list.style-2 .post-meta .line {
    display: block;
    height: 1px;
    width: 20px;
    background-color: var(--white);
}

.tf-post-list.style-2 .post-meta a {
    white-space: nowrap;
}

.tf-post-list.style-2 .title {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: var(--white);
    cursor: pointer;
}

.tf-post-list.style-2 .title a {
    font-family: "Inter", sans-serif;
    letter-spacing: -0.3px;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 1px;
}

.tf-post-list.style-2 .title a:hover {
    text-decoration-color: var(--primary) !important;
}

.tf-post-list.style-2 .desc {
    margin-bottom: 21px;
}

.tf-post-list.style-2:hover .title a {
    text-decoration-color: var(--white);
}

.tabs-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tabs-list .tabs-item {
    padding: 10px 20.3px;
    background-color: var(--stroke-2);
    color: var(--white);
}

.tabs-list .tabs-item:hover {
    background-color: var(--primary);
    color: var(--main-dark);
}

.sidebar-banner {
    background-image: url("../image/blog/banner-sidebar-1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.sidebar-banner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: var(--dark-2);
    mix-blend-mode: multiply;
}

.sidebar-banner .box-content {
    position: relative;
    padding: 108px 40px 40px 40px;
}

.sidebar-banner .sub-title {
    color: var(--primary);
    margin-bottom: 9px;
}

.sidebar-banner .title {
    font-family: "DM Sans", sans-serif;
    margin-bottom: 31px;
    letter-spacing: -0.2px;
}

.list-post-gird .bottom-btn {
    margin-top: 72px;
}

.list-post-gird-2 .bottom-btn {
    margin-top: 65px;
}

.tf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.tf-grid-1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
}

.tf-grid-1 .fl-item2 {
    display: none;
}

.tf-grid-1 .fl-item2:last-child {
    margin-bottom: 0;
}

.fl-item {
    display: none;
}

.big-text {
    font-weight: 600;
    font-size: 200px;
    line-height: 100%;
    letter-spacing: -3%;
    white-space: nowrap;
}

.big-text .text-stroke {
    color: var(--stroke-2);
}

.wg-blog-details {
    background-color: var(--dark-2);
    border: 1px solid var(--stroke-2);
}

.wg-blog-details .details-content {
    padding-top: 50px;
    padding-bottom: 54px;
}

.wg-blog-details .category-post {
    padding-left: 50px;
    padding-right: 50px;
}

.wg-blog-details .date-user-post {
    gap: 71px;
    padding-left: 50px;
    padding-right: 50px;
}

.wg-blog-details .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-blog-details .img-details {
    padding-left: 15px;
    padding-right: 15px;
}

.wg-blog-details .list-img {
    padding-left: 15px;
    padding-right: 15px;
    gap: 20px;
}

.wg-blog-details .desc {
    padding-left: 50px;
    padding-right: 50px;
}

.wg-blog-details .desc .desc-flex {
    margin-bottom: 8px;
}

.wg-blog-details .desc span {
    color: var(--surface);
    letter-spacing: 0.06px;
}

.wg-blog-details .content {
    padding-left: 50px;
    padding-right: 50px;
}

.wg-blog-details .content .title {
    line-height: 120%;
}

.wg-blog-details .content .desc {
    padding-left: 0;
    padding-right: 0;
}

.wg-blog-details .tag-social {
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--stroke-2);
    border-bottom: 1px solid var(--stroke-2);
    margin-left: 50px;
    margin-right: 50px;
}

.wg-blog-details .write-review {
    margin-bottom: 70px;
    padding-left: 50px;
    padding-right: 50px;
}

.date-post p {
    padding-bottom: 6px;
}

.date-post h5 {
    letter-spacing: -0.3px;
}

.date {
    width: 90px;
    height: 90px;
    background-color: var(--primary);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.date .day {
    font-weight: 600;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
}

.date span {
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.date:hover {
    background-color: var(--white);
}

.date:hover span {
    color: var(--main-dark);
}

.desc-flex span {
    max-width: calc(100% - 70px);
}

.frame-item {
    margin-top: 5px;
    background-color: var(--primary);
    color: var(--main-dark) !important;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-details {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-details .image-avata {
    max-width: 55px;
    border-radius: 50%;
    overflow: hidden;
    flex-grow: 1;
}

.user-details .image-avata img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details .user-content {
    max-width: calc(100% - 75px);
}

.user-details .user-content p {
    margin-bottom: 4px;
}

.user-details .user-content .name-user a {
    letter-spacing: -0.4px;
}

.wg-quote {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-left: 3px solid var(--primary);
    margin-left: 50px;
    margin-right: 50px;
    padding: 21px 43px;
    background-color: var(--main-dark);
    gap: 40px;
}

.wg-quote .icon {
    margin-top: 11px;
}

.wg-quote .icon i {
    font-size: 41px;
    color: var(--primary);
}

.wg-quote .title {
    font-size: 26px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 18px;
}

.wg-quote .name-quote {
    position: relative;
    padding-left: 70px;
}

.wg-quote .name-quote::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary);
}

.author {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 30px 50px;
    background-color: var(--main-dark);
}

.author .image {
    max-width: 160px;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
}

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

.author .name {
    margin-bottom: 26px;
}

.author .name a {
    letter-spacing: -0.4px;
}

.author .text {
    margin-bottom: 32px;
    line-height: 112%;
}

.author .author-content {
    padding-bottom: 7px;
}

.recent-news {
    padding-bottom: 50px;
    border-bottom: 1px solid var(--stroke-2);
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 61px;
}

.comment {
    margin-right: 50px;
    margin-left: 50px;
    padding-bottom: 70px;
    margin-bottom: 62px;
    border-bottom: 1px solid var(--stroke-2);
}

.comment .title {
    margin-bottom: 30px;
}

.comment-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: start;
    gap: 35px;
}

.comment-item .image {
    max-width: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.comment-item .top {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 12px;
}

.comment-item .date {
    color: var(--primary);
}

.comment-item .text {
    color: var(--surface);
    margin-bottom: 15px;
    letter-spacing: 0.05px;
    max-width: 95%;
}

.comment-item .comment-content {
    max-width: calc(100% - 135px);
}

.comment-item.reply {
    padding-left: 50px;
    padding-right: 62px;
    margin-top: 46px;
}

.comment-item.reply .text {
    max-width: 100%;
}

/* ------------ testimonial ---------------- */
.testimonial-item .icon {
    margin-bottom: 33px;
}

.testimonial-item .icon i {
    color: var(--primary);
    font-size: 55px;
}

.testimonial-item .text {
    margin-bottom: 30px;
    max-width: 699px;
    letter-spacing: -0.05px;
}

.testimonial-item .user-testimonial .name-user {
    display: block;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
}

.testimonial-item .user-testimonial .position {
    display: block;
    font-family: "Manrope", sans-serif;
}

.testimonial-item.style-2 {
    background-color: var(--main-dark);
    border: 1px solid var(--stroke-2);
    text-align: center;
    padding: 50px 15px 47px;
}

.testimonial-item.style-2 .icon {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    border-radius: 50%;
    margin-bottom: 0;
    position: relative;
}

.testimonial-item.style-2 .icon i {
    font-size: 15px;
    color: var(--white);
}

.testimonial-item.style-2 .image-avatar {
    max-width: 85px;
    border-radius: 50%;
    margin-left: -12.5px;
}

.testimonial-item.style-2 .image-avatar img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-item.style-2 .top-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.testimonial-item.style-2 .text {
    max-width: 270px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    color: var(--surface);
    letter-spacing: 0.1px;
}

.testimonial-item.style-2 .name-user {
    margin-bottom: 11px;
}

.testimonial-item.style-2 .position {
    color: var(--primary);
}

/* ------------ accordion ---------------- */
.according-item {
    margin-bottom: 36px;
}

.according-item:last-child {
    margin-bottom: 0;
}

.according-item h5 {
    letter-spacing: -0.4px;
}

.according-item .title-according {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--stroke-2);
    color: var(--primary);
}

.according-item .title-according span {
    position: relative;
    width: 12px;
    height: 12px;
    display: block;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.according-item .title-according span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--white);
}

.according-item .title-according span::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.according-item .title-according.collapsed {
    border-bottom-color: var(--white);
    color: var(--white);
}

.according-item .title-according.collapsed span {
    transform: rotate(90deg);
}

.according-item .title-according.collapsed span::after {
    opacity: 1;
    visibility: visible;
}

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

.according-item .according-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 42px;
}

.according-item .according-content .image {
    max-width: 190px;
    width: 100%;
}

.according-item .according-content .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.according-item .according-content .right {
    padding-left: 51px;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
}

.according-item .according-content .desc {
    margin-bottom: 30px;
}

.according-item .according-content .benefit-item {
    margin-bottom: 22px;
}

.according-item .according-content .benefit-item:last-child {
    margin-bottom: 0;
}

.according-item.style-2 {
    padding: 0px 30px;
    background-color: var(--dark-2);
    margin-bottom: 10px;
}

.according-item.style-2 .title-according {
    padding-bottom: 0;
    border-bottom: 0;
    letter-spacing: 0.1px;
    padding: 21.5px 0;
    gap: 20px;
}

.according-item.style-2 .title-according i {
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.according-item.style-2 .title-according:not(.collapsed) {
    padding-top: 29px;
    padding-bottom: 0;
}

.according-item.style-2 .title-according:not(.collapsed) i {
    transform: rotate(90deg);
}

.according-item.style-2 .according-content {
    margin-top: 18px;
    padding-right: 20px;
    padding-bottom: 24px;
}

.according-item.style-2 .according-content p {
    letter-spacing: 0.06px;
}

/* ------------ shop ---------------- */
/* ------------ map ---------------- */
.map {
    max-width: 100%;
    height: 600px;
    overflow: hidden;
}

.mapboxgl-ctrl-attrib a,
.mapboxgl-ctrl-attrib.mapboxgl-compact,
a.mapboxgl-ctrl-logo {
    display: none !important;
}

/* ------------ nice-select ---------------- */
.nice-select {
    border-color: transparent !important;
    border-radius: 5px;
    position: relative;
}

.nice-select::before {
    content: "\e90b";
    font-family: "icomoon";
    position: absolute;
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
    font-size: 8px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: var(--main-dark);
}

.nice-select::after {
    display: none;
}

.nice-select > span {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: var(--main-dark);
}

.nice-select .list li {
    color: var(--main-dark);
}

.nice-select.open {
    z-index: 50;
}

.nice-select.open::before {
    transform: translateY(-50%) rotate(180deg);
}

/* ------------ animation ---------------- */
.tf-fade-top {
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-fade-left {
    transform: translateX(-20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-fade-right {
    transform: translateX(20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-fade-bottom {
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-fade-bottom-left {
    transform: translate(20px, -20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-fade-top-right {
    transform: translate(-20px, -20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tf-animate-1 {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-1.active-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
}

.tf-animate-1.transition-1s {
    -webkit-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-2 {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-2.active-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
}

.tf-animate-2.transition-1s {
    -webkit-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-3 {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-3.active-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
}

.tf-animate-3.transition-1s {
    -webkit-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-4 {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1s cubic-bezier(0.63, 0.25, 0.25, 1);
}

.tf-animate-4.active-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
}

.tf-animate-4.transition-1s {
    -webkit-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -khtml-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -moz-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -ms-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    -o-transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
    transition: 1.5s cubic-bezier(0.63, 0.25, 0.25, 1);
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes ripple {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.9;
    }

    100% {
        width: 150%;
        height: 150%;
        opacity: 0;
    }
}

.text-flip {
    display: grid;
    transform-style: preserve-3d;
    transform-origin: center center;
    position: relative;
}

.text-face {
    grid-area: 1/1;
    backface-visibility: hidden;
}

.text-front {
    transform: rotateX(0deg);
}

.text-back {
    transform: rotateX(180deg);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 2px 0 var(--primary);
    }

    50% {
        transform: rotate(180deg);
        box-shadow: 0 2px 0 var(--primary);
    }

    100% {
        transform: rotate(360deg);
        box-shadow: 0 2px 0 var(--primary);
    }
}

.hover-image .image {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.hover-image .image:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.hover-image .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}

.hover-image:hover .image:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.hover-image:hover .image img {
    transform: scale(1.1);
}

/* ------------ widgets ---------------- */
.mask {
    position: absolute;
    animation: rotate 14s linear infinite;
}

.mask.mask-1 {
    top: 200px;
    right: -15.3%;
}

.mask.mask-1.p-about {
    right: -18.3%;
}

.mask.mask-2 {
    top: 571px;
    left: -27%;
}

.mask.mask-2.p-about {
    top: 10.3%;
    left: -27%;
}

.mask.mask-3 {
    top: 1627px;
    right: -19%;
}

.mask.mask-service-1 {
    top: 5.6%;
    right: -295px;
}

.mask.mask-service-2 {
    top: 12.8%;
    left: -27%;
}

.mask.mask-service-3 {
    top: 33.5%;
    right: -369px;
}

.mask.mask-service-4 {
    bottom: -19%;
    left: -531px;
}

.tf-marquee {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 100%;
}

.tf-marquee .marquee-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    animation: infiniteScroll 420s linear infinite;
    align-items: center;
    transition: animation-duration 300ms;
}

.tf-marquee .marquee-wrapper .initial-child-container {
    flex: 0 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    min-width: auto;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.tf-marquee .marquee-wrapper .initial-child-container .marquee-child-item {
    display: inline-flex;
}

.tf-marquee .marquee-wrapper:hover {
    animation-play-state: paused;
}

.counter-item .number-counter.fs-65 {
    font-size: 65px;
    line-height: 100%;
}

.counter-item .number-counter span {
    font-family: "Inter", sans-serif !important;
    line-height: 100% !important;
}

.counter-item .title-counter {
    letter-spacing: -0.3px;
}

.counter-item .odometer-formatting-mark {
    display: none !important;
}

.counter-item .odometer-value {
    width: 100%;
}

.counter-item.style-2 {
    padding: 40px 45px 31px;
    max-width: 300px;
    width: 100%;
}

.counter-item.style-2 .icon {
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border-radius: 50%;
    margin-bottom: 37px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-item.style-2 .icon i {
    color: var(--dark-2);
}

.counter-item.style-2 .number-counter {
    margin-bottom: 4px;
}

.counter-item.style-bg-primary {
    background-color: var(--primary);
}

.counter-item.style-bg-surface {
    background-color: var(--surface);
}

.counter-item.style-bg-surface .title-counter,
.counter-item.style-bg-surface span {
    color: var(--main-dark);
}

.text-rotate {
    animation: rotate 10s linear infinite;
}

.text-rotate svg {
    width: 180px;
    height: 180px;
}

.text-rotate svg text {
    font-size: 25px;
    fill: var(--white);
    font-family: "Inter", sans-serif;
}

.wg-curve-text {
    position: relative;
    width: max-content;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--white);
}

.wg-curve-text .icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--white);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-curve-text .icon i {
    color: var(--white);
    font-size: 27px;
    transform: rotate(45deg);
    font-weight: 400;
}

.box-logo {
    width: 156px;
    height: 126px;
    background-color: var(--main-dark);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 9px;
}

.box-logo img {
    max-width: 45px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.box-logo .title {
    margin-top: 2px;
}

.box-avatar {
    padding: 31px 35px 38px;
    background-color: var(--primary);
}

.box-avatar .text {
    padding-bottom: 21px;
}

.box-avatar .text p {
    line-height: 23px;
    margin-bottom: 11px;
    letter-spacing: -0.4px;
}

.box-avatar .text img {
    max-width: 132px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-agent {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.list-agent .agent {
    margin-right: -10px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.list-agent .agent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.list-agent .agent:last-child {
    margin-right: 0;
}

.list-agent .agent.agent-plus {
    width: 45px;
    height: 45px;
    background-color: var(--white);
    border-radius: 50%;
    position: relative;
}

.list-agent .agent.agent-plus span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: var(--primary);
    line-height: 22px;
    font-family: "Manrope", sans-serif;
}

.list-agent .agent.style-border {
    border: 2px solid var(--white);
    width: 35px;
    height: 35px;
    margin-right: -5px;
}

.list-agent .agent.style-border:last-child {
    margin-right: 0;
}

.benefit-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 13px;
    align-items: center;
}

.benefit-item i {
    color: var(--primary);
}

.benefit-item.style-big {
    gap: 18px;
}

.benefit-item.style-big i {
    font-size: 28px;
}

.benefit-item.style-big span {
    letter-spacing: -0.2px;
}

.benefit-item.style-desc {
    flex-direction: column;
    align-items: start;
    gap: 12px;
}

.benefit-item.style-desc i {
    font-size: 23px;
}

.benefit-item.style-desc .top-item span {
    letter-spacing: -0.3px;
}

.benefit-item.style-desc .desc {
    letter-spacing: 0.05px;
}

.services-item {
    padding: 50px;
    border: 1px solid var(--stroke-2);
}

.services-item .icon {
    width: max-content;
    margin-bottom: 32px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.services-item .icon i {
    font-size: 55px;
    color: var(--white);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.services-item h6 {
    margin-bottom: 9px;
    letter-spacing: -0.4px;
}

.services-item .desc {
    margin-bottom: 30px;
    max-width: 97%;
}

.services-item .image {
    margin-bottom: 40px;
    background-color: var(--main-dark);
}

.services-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-item.no-img {
    border-left: 1px solid var(--stroke-2);
    padding: 50px 50px 50px 70px;
}

.services-item.no-img h5 {
    letter-spacing: -0.6px;
    margin-bottom: 15px;
}

.services-item:hover .icon {
    transform: rotateY(180deg);
}

.services-item:hover .icon i {
    color: var(--primary);
}

.services-item:hover .tf-btn-readmore {
    width: 132px;
}

.services-item:hover .tf-btn-readmore .plus {
    transform: translateY(-50%);
    left: 20px;
}

.services-item:hover .tf-btn-readmore .text {
    padding-left: 23px;
    position: unset;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
}

.wg-cta {
    background-color: var(--primary);
}

.wg-cta .cta-inner {
    align-items: center;
    padding: 17px 15px 15px 0;
    position: relative;
    gap: 20px 138px;
}

.wg-cta .cta-inner .tf-btn-close {
    position: absolute;
    top: 20px;
    right: 0;
}

.wg-cta .cta-inner .icon {
    margin-right: 20px;
}

.wg-cta .cta-inner .icon i {
    font-size: 35px;
}

.wg-cta .cta-inner .title {
    margin-right: 20px;
}

.wg-cta .cta-inner .title span {
    font-style: italic;
    letter-spacing: -0.3px;
    text-decoration-line: underline;
}

.wg-cta .cta-inner .list-agent {
    padding-right: 20px;
}

.wg-cta .cta-inner .img-line {
    max-width: 124px;
    margin-top: -8px;
}

.wg-cta .cta-inner .img-line img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-cta .cta-inner .tf-btn-close i {
    font-size: 30px;
}

.team-item {
    border: 1px solid var(--stroke-2);
}

.team-item .image {
    margin: 10px 9.5px 0;
    display: block;
}

.team-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-item .top-item {
    position: relative;
}

.team-item .plus-icon {
    position: absolute;
    bottom: -27px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface);
    border: 3px solid var(--main-dark);
}

.team-item .plus-icon span {
    color: var(--main-dark);
    font-size: 23px;
}

.team-item .social-item {
    position: absolute;
    bottom: -10px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    max-width: 161px;
    width: 100%;
    height: 55px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.team-item .social-item .post-social {
    gap: 17px;
}

.team-item .social-item .icon-social i {
    font-size: 17px;
}

.team-item .social-item .icon-social:hover i {
    color: var(--main-dark) !important;
}

.team-item .item-content {
    text-align: center;
    padding: 49px 15px 32px;
}

.team-item .item-content .title {
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.team-item:hover .social-item {
    bottom: -27px;
    opacity: 1;
    visibility: visible;
}

.project-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: var(--dark-2);
    border: 1px solid var(--stroke-2);
}

.project-item .item-content {
    padding: 40px 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 50px;
}

.project-item .item-content .sub-title {
    margin-bottom: 32px;
}

.project-item .item-content .title-project {
    margin-bottom: 26px;
    letter-spacing: 0.2px;
}

.project-item .item-content .title-project a {
    position: relative;
}

.project-item .item-content .title-project a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: auto;
    right: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.project-item .image {
    margin: 10px 10px 10px 0;
    width: 100%;
}

.project-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-item.style-2 {
    border: 0;
    background-color: transparent;
    justify-content: end;
}

.project-item.style-2 .image {
    margin: 0;
    max-width: calc(50% - 15px);
    position: relative;
}

.project-item.style-2 .image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: linear-gradient(180deg, rgba(67, 186, 255, 0) 42.89%, #43BAFF 100%);
}

.project-item.style-2 .item-content {
    max-width: 50%;
    padding: 30px;
}

.project-item.style-2 .desc {
    letter-spacing: 0.1px;
}

.project-item.style-2:hover .image::after {
    height: 100%;
}

.project-item.style-reverse {
    flex-direction: row-reverse;
    justify-content: start;
}

.project-item.project-gird-item {
    flex-direction: column;
    border: 0;
    background-color: transparent;
}

.project-item.project-gird-item .image {
    margin: 0 0 38px !important;
    position: relative;
}

.project-item.project-gird-item .image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: linear-gradient(180deg, rgba(67, 186, 255, 0) 42.89%, #43BAFF 100%);
}

.project-item.project-gird-item .item-content {
    padding: 0 !important;
    display: block;
}

.project-item.project-gird-item .item-content .sub-title {
    margin-bottom: 32px;
}

.project-item.project-gird-item .item-content .title-project {
    margin-bottom: 5px;
}

.project-item.project-gird-item:hover .image::after {
    height: 100%;
}

.project-item:hover .title-project a {
    color: var(--primary);
}

.project-item:hover .title-project a::before {
    left: 0;
    right: auto;
    width: 100%;
}

.project-item:hover .tf-btn-readmore {
    width: 132px;
}

.project-item:hover .tf-btn-readmore .plus {
    transform: translateY(-50%);
    left: 20px;
}

.project-item:hover .tf-btn-readmore .text {
    padding-left: 23px;
    position: unset;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
}

.pricing-item {
    padding: 48px 50px;
    background-color: var(--dark-2);
}

.pricing-item .sub-title {
    margin-bottom: 6px;
    color: var(--primary);
}

.pricing-item .title {
    margin-bottom: 24px;
    letter-spacing: -0.7px;
}

.pricing-item .top-item {
    padding-bottom: 41px;
    margin-bottom: 43px;
    border-bottom: 1px solid var(--stroke-2);
}

.pricing-item .list-benefit {
    margin-bottom: 41px;
}

.pricing-item .price span {
    color: var(--primary);
    letter-spacing: 2px;
}

.pricing-item .benefit-item {
    margin-bottom: 25px;
    gap: 9px;
}

.pricing-item .benefit-item:last-child {
    margin-bottom: 0;
}

.pricing-item .tf-btn {
    max-width: 98%;
}

.pricing-item.style-popular {
    position: relative;
}

.pricing-item.style-popular .tab-popular {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FF8C22;
    height: 36px;
    width: 158px;
    padding-left: 8px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    clip-path: polygon(100% 0, 0 0, 5% 50%, 0 100%, 100% 100%);
}

.pricing-item.style-popular .sub-title {
    color: var(--white);
}

.pricing-item.style-popular .price span {
    color: var(--white);
}

.wg-service-details .image-blog img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-service-details .image-blog.img-1 {
    margin-bottom: 73px;
}

.wg-service-details .image-blog.img-2 {
    position: relative;
    margin-bottom: 61px;
}

.wg-service-details .image-blog.img-2 .counter-box {
    position: absolute;
    bottom: 0;
    right: 0;
}

.wg-service-details .details-content {
    margin-bottom: 53px;
}

.wg-service-details .details-content .title {
    letter-spacing: 0.2px;
    margin-bottom: 34px;
}

.wg-service-details .details-content .desc p {
    letter-spacing: 0.07px;
    margin-bottom: 21px;
    width: 95%;
}

.wg-service-details .details-content .desc p:last-child {
    margin-bottom: 0;
}

.wg-service-details .details-content-2 {
    margin-bottom: 61px;
}

.wg-service-details .details-content-2 .title {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.15px;
    margin-bottom: 12px;
}

.wg-service-details .details-content-2 .desc {
    letter-spacing: 0.07px;
    margin-bottom: 28px;
}

.wg-service-details .details-content-2 .list-features .features-item {
    margin-bottom: 29px;
}

.wg-service-details .details-content-2 .list-features .features-item:last-child {
    margin-bottom: 0;
}

.features-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 35px;
}

.features-item .number-features {
    width: 45px;
    height: 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--dark-2);
}

.features-item .item-content {
    max-width: calc(100% - 80px);
}

.features-item .item-content a {
    display: inline-block;
    margin-bottom: 13px;
    letter-spacing: 0.13px;
}

.features-item .item-content p {
    letter-spacing: 0.06px;
}

.counter-box {
    max-width: 270px;
    width: 100%;
    height: 206px;
    padding: 30px 52px;
    background-color: var(--primary);
}

.counter-box .counter .number-counter {
    margin-bottom: 10px;
}

.process-item .step-number {
    color: var(--surface);
    margin-bottom: 5px;
}

.process-item .top-item {
    margin-bottom: 33px;
}

.process-item .icon {
    position: relative;
    z-index: 5;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--dark-2);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-item .icon i {
    font-size: 10px;
    color: var(--white);
}

.process-item .midder-item {
    position: relative;
    margin-bottom: 13px;
}

.process-item .midder-item .line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.process-item .line {
    width: 100%;
    height: 1px;
    background-color: var(--stroke-2);
}

.process-item .text {
    max-width: 228px;
}

.list-process {
    width: 100%;
    justify-content: space-between;
}

.list-process .process-item {
    width: 100%;
}

.list-process .process-item .line {
    max-width: calc(100% + 85px);
}

.list-process .process-item:last-child {
    max-width: 228px;
}

.list-process .process-item:last-child .line {
    max-width: 100%;
}

.next-prev-item .link {
    color: var(--primary);
    display: inline-block;
    margin-bottom: 22px;
}

.next-prev-item .link i {
    font-size: 13px;
}

.next-prev-item .title {
    letter-spacing: -0.1px;
    margin-bottom: 40px;
    font-family: "DM Sans", sans-serif;
}

.next-prev-item.next-details {
    text-align: end;
}

.wg-project-details .image-blog.img-1 {
    margin-bottom: 53px;
}

.wg-project-details .details-content {
    margin-bottom: 47px;
}

.wg-project-details .details-content .title {
    letter-spacing: 0.1px;
    margin-bottom: 28px;
}

.wg-project-details .details-content .desc-flex {
    margin-block: 6px;
}

.wg-project-details .details-content .desc-flex span {
    letter-spacing: 0.07px;
}

.wg-project-details .details-content p {
    letter-spacing: 0.07px;
}

.wg-project-details .details-content .desc {
    margin-bottom: 46px;
}

.wg-project-details .details-content .cols {
    gap: 20px 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wg-project-details .details-content .benefit-item {
    gap: 10px 18px;
    margin-bottom: 20px;
}

.wg-project-details .details-content .benefit-item i {
    font-size: 18px;
}

.wg-project-details .details-content .benefit-item span {
    letter-spacing: 0.1px;
}

.wg-project-details .details-content .benefit-item:last-child {
    margin-bottom: 0;
}

.wg-project-details .details-content.content-2 {
    margin-bottom: 41px;
}

.wg-project-details .details-content.content-2 .desc {
    margin-bottom: 0;
    max-width: 97%;
}

.wg-project-details .list-img {
    gap: 30px;
}

.wg-project-details .list-img .image {
    max-width: calc(33.3333333333% - 20px);
}

.wg-project-details .tag-social {
    padding: 19px 0 18px;
    border-top: 1px solid var(--stroke-2);
    border-bottom: 1px solid var(--stroke-2);
}

.wg-project-details .tag-social span {
    font-family: "DM Sans", sans-serif;
}

.box-info {
    padding: 46px 61px 41px 60px;
    background-color: var(--primary);
    border-radius: 12px;
    position: relative;
}

.box-info .info-item {
    margin-bottom: 41px;
    position: relative;
    z-index: 5;
}

.box-info .info-item .sub-title {
    margin-bottom: 6px;
}

.box-info .info-item .title-info {
    letter-spacing: -0.2px;
}

.box-info .info-item:last-child {
    margin-bottom: 0;
}

.box-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../image/section/bg-info-box.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 11%;
}

.box-info::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 7px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--stroke-2);
    background-color: transparent;
    border-radius: 12px;
}

.contact-list .title {
    margin-bottom: 27px;
}

.contact-list .contact-item {
    margin-bottom: 23px;
}

.contact-list .contact-item:last-child {
    margin-bottom: 0;
}

.contact-social .title {
    margin-bottom: 21px;
}

.contact-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-item i {
    font-size: 16px;
    color: var(--primary);
}

.contact-item .icon-email {
    font-size: 13px;
}

.contact-item.location-item i {
    padding-top: 8px;
    font-size: 22px;
}

.alert {
    padding: 0 !important;
    border: 0 !important;
}

.animationtext .item-text {
    -webkit-text-fill-color: unset !important;
    -webkit-text-stroke: unset !important;
    background-image: unset !important;
}

.progress-wrap {
    position: fixed;
    bottom: 40px;
    right: 20px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);
    box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    background: var(--dark-2);
}

.progress-wrap::after {
    position: absolute;
    content: "\e909";
    font-family: "icomoon";
    text-align: center;
    line-height: 40px;
    font-size: 10px;
    color: var(--white);
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    box-sizing: border-box;
    stroke: var(--white);
    stroke-width: 5;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 0.4s;
    transition-timing-function: linear;
}

#loading {
    background-color: var(--main-dark);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
    right: 0px;
    z-index: 999999;
}

#loading #loading-center {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading #loading-center .loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading #loading-center .loader-container .wrap-loader {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading #loading-center .loader-container .wrap-loader .icon {
    position: absolute;
    max-width: 80px;
}

#loading #loading-center .loader-container .loader {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#loading .icon {
    width: 42px;
    height: 42px;
}

/* ------------ sections ---------------- */
.tf-spacing-1 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.tf-spacing-2 {
    margin-top: 0;
    margin-bottom: 120px;
}

.tf-spacing-3 {
    margin-top: 0;
    margin-bottom: 92px;
}

.tf-spacing-4 {
    margin-top: 0;
    margin-bottom: 117px;
}

.tf-spacing-5 {
    margin-top: 0;
    margin-bottom: 106px;
}

.tf-spacing-6 {
    margin-top: 0;
    margin-bottom: 115px;
}

.tf-spacing-7 {
    margin-top: 0;
    margin-bottom: 113px;
}

.tf-spacing-8 {
    margin-top: 0;
    margin-bottom: 86px;
}

.tf-spacing-9 {
    margin-top: 0;
    margin-bottom: 190px;
}

.tf-spacing-10 {
    margin-top: 0;
    margin-bottom: 134px;
}

.tf-spacing-11 {
    margin-top: 0;
    margin-bottom: 101px;
}

.tf-spacing-12 {
    margin-top: 0;
    margin-bottom: 104px;
}

.page-title .page-title-content {
    padding-top: 104px;
    padding-bottom: 126px;
}

.page-title .page-title-content .title {
    color: var(--white);
    margin-bottom: 42px;
}

.page-title.p-pricing .page-title-content {
    padding-top: 86px;
    padding-bottom: 110px;
}

.dot {
    width: 5px;
    height: 5px;
    background-color: var(--white);
    border-radius: 50%;
}

.breadkcum {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 17px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.breadkcum .page-breadkcum {
    color: var(--primary);
}

.breadkcum .link-breadkcum:hover {
    color: var(--primary);
}

.breadkcum a,
.breadkcum span {
    color: var(--white);
}

.page-title-home {
    padding-top: 70px;
    padding-bottom: 70px;
    overflow: hidden;
    position: relative;
}

.page-title-home .mask.mask-home-1 {
    top: 12%;
    right: -295px;
}

.page-title-home .mask.mask-home-2 {
    bottom: -9.4%;
    left: -27%;
}

.page-title-home .top-page-title {
    margin-bottom: 70px;
}

.page-title-home .top-page-title .sub-title {
    margin-bottom: 17px;
    letter-spacing: -0.4px;
    color: var(--surface);
}

.page-title-home .top-page-title .title {
    letter-spacing: 0.2px;
}

.page-title-home .desc {
    letter-spacing: 0.2px;
    border-bottom: 1px solid var(--stroke-2);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-title-home .wg-counter {
    margin-bottom: 20px;
    max-width: 388px;
}

.page-title-home .image {
    height: 100%;
}

.page-title-home .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight {
    background-color: var(--surface);
    color: var(--main-dark);
    padding-left: 4px;
    padding-right: 4px;
    letter-spacing: 0.4px;
}

.heading-section .sub-title {
    letter-spacing: 0.1px;
    color: var(--surface);
}

.heading-section .title {
    letter-spacing: 0.1px;
}

.heading-section .title span {
    letter-spacing: 0.85px;
}

.heading-section .desc {
    letter-spacing: 0.05px;
}

.section-about {
    position: relative;
}

.section-about .about-top {
    margin-bottom: 70px;
}

.section-about .about-inner {
    justify-content: space-between;
    align-items: center;
}

.section-about .section-content .desc {
    letter-spacing: 0.04px;
}

.section-about .img-item {
    position: absolute;
    bottom: -86%;
    left: 0;
}

.section-about.p-services .left {
    position: relative;
}

.section-about.p-services .image {
    max-width: 520px;
    padding-bottom: 86px;
}

.section-about.p-services .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-about.p-services .img-secion-item {
    max-width: 342px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.section-about.p-services .img-secion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-about.p-services .list-benefit {
    margin-bottom: 50px;
}

.section-about.p-services .list-benefit .benefit-item {
    margin-bottom: 27px;
}

.section-about.p-services .list-benefit .benefit-item:last-child {
    margin-bottom: 0;
}

.section-counting {
    position: relative;
    overflow-x: clip;
}

.section-counting .mask {
    right: -19%;
    top: -62%;
}

.section-counting .image {
    width: 100%;
    height: 100%;
}

.section-counting .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-counting .left {
    position: relative;
    width: 100%;
}

.section-counting .left .box-avatar {
    position: absolute;
    bottom: 0;
    left: 0;
}

.section-counting .left .box-logo {
    position: absolute;
    bottom: 208px;
    left: 220px;
}

.section-counting .right {
    width: 100%;
    padding-left: 30px;
    padding-top: 61px;
    padding-bottom: 61px;
}

.section-company {
    position: relative;
}

.section-company .section-company-inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: end;
}

.section-company .section-company-inner .left-section {
    padding-right: 30px;
    padding-top: 43px;
    padding-bottom: 47px;
    width: 100%;
}

.section-company .image-section {
    height: 100%;
}

.section-company .image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-services {
    position: relative;
    overflow-x: clip;
}

.section-services .mask {
    top: auto;
    bottom: 0;
    left: -27%;
    right: auto;
}

.section-services .tf-marquee {
    padding-bottom: 132px;
}

.section-services.p-services .tf-marquee {
    padding-bottom: 134px;
}

.section-services.p-services .services-item {
    flex: 1 1 auto;
    max-width: 33.3333333333%;
}

.section-services.p-services .services-item:nth-child(1) {
    border-bottom: 0;
    border-right: 0;
}

.section-services.p-services .services-item:nth-child(2) {
    border-bottom: 0;
    border-right: 0;
}

.section-services.p-services .services-item:nth-child(3) {
    border-bottom: 0;
}

.section-services.p-services .services-item:nth-child(4),
.section-services.p-services .services-item:nth-child(5) {
    border-right: 0;
}

.section-project {
    position: relative;
}

.section-project .heading-section {
    margin-left: 68px;
}

.section-project.p-about .mask.mask-1 {
    top: -375px;
    right: auto;
    left: -23%;
}

.section-testimonial {
    position: relative;
    overflow-x: clip;
}

.section-testimonial .mask {
    top: auto;
    bottom: -62%;
    left: -27.5%;
    right: auto;
}

.section-testimonial .list-image {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 28px 30px;
}

.section-testimonial .img-section {
    flex: 1 1 auto;
    max-width: calc(50% - 15px);
    border-radius: 15%;
    width: 100%;
}

.section-testimonial .img-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15%;
}

.section-testimonial .img-section.img-elip {
    border-radius: 999px;
}

.section-testimonial .img-section.img-elip img {
    border-radius: 999px;
}

.section-testimonial.p-services .section-testimonials-inner {
    padding: 120px 40px;
    background-color: var(--dark-2);
    gap: 70px 20px;
}

.section-testimonial.p-services .left {
    margin-top: -2px;
    max-width: 370px;
}

.section-testimonial.p-services .left .desc {
    max-width: 97%;
}

.section-testimonial.p-services .sw-testimonials {
    max-width: 850px !important;
    width: 100% !important;
}

.section-form .left {
    position: relative;
    max-width: 50%;
}

.section-form .image {
    height: 100%;
}

.section-form .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-form .section-form-content {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--primary);
    padding: 50px 70px;
    max-width: 612px;
    z-index: 5;
}

.section-form .section-form-content .title {
    margin-bottom: 37px;
    letter-spacing: 0.1px;
}

.section-form .right {
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 15px;
}

.section-pricing {
    position: relative;
    overflow-x: clip;
}

.section-pricing .heading-section .right .desc {
    margin-bottom: 19px;
    letter-spacing: 0.08px;
}

.section-pricing .mask {
    position: absolute;
}

.section-pricing .mask.mask-s-pricing-1 {
    bottom: -9%;
    right: -18%;
}

.section-pricing .mask.mask-s-pricing-2 {
    bottom: -41%;
    left: -17.3%;
}

.section-blog {
    position: relative;
    overflow-x: clip;
}

.section-blog .mask {
    position: absolute;
}

.section-blog .mask.mask-1 {
    top: -79%;
    right: -15%;
}

.section-blog .mask.mask-s-blog-1 {
    top: -29%;
    right: -22.5%;
}

.section-blog .mask.mask-s-blog-2 {
    top: -47%;
    left: -26.2%;
    z-index: -1;
}

.section-benefit.p-team .list-benefit {
    padding-top: 4px;
}

.section-benefit.p-team .benefit-item {
    margin-bottom: 42px;
}

.section-benefit.p-team .benefit-item:last-child {
    margin-bottom: 0;
}

.section-contact .left {
    width: 100%;
}

.section-contact .right {
    width: 100%;
}

.section-contact .section-contact-inner {
    gap: 70px 30px;
}

.section-team {
    position: relative;
    overflow-x: clip;
}

.section-team .mask {
    bottom: -122%;
    right: -23%;
}

/* -------------- Responsive ----------------- */
@media (min-width: 551px) {
    .sw-border .swiper-slide .services-item {
        border-left: 0;
    }

    .sw-border .swiper-slide:first-child .services-item {
        border-left: 1px solid var(--stroke-2);
    }

    .wg-project-details .cols {
        gap: 103px !important;
        justify-content: start !important;
        flex-wrap: nowrap;
    }

    .footer-content .title-mobile i {
        display: none;
    }
}

@media (min-width: 992px) {
    .counter-item.style-2 .title-counter {
        padding-top: 4px;
    }

    .section-about.p-services .right {
        margin-top: -2px;
        padding-left: 40px;
    }

    .section-contact .left {
        max-width: 28.7%;
        padding-top: 35px;
    }

    .section-contact .right {
        max-width: 65.9%;
    }

    .wg-project-details .details-content .left {
        max-width: 808px;
    }

    .wg-project-details .tag-social {
        padding: 19px 40px 18px;
    }

    .box-info {
        width: 350px;
        margin-top: -3px;
    }

    .section-pricing .heading-section .right {
        padding-top: 9px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .section-about .about-top {
        margin-bottom: 101px;
    }

    .section-about .about-inner {
        padding-left: 110px;
        padding-right: 146px;
    }

    .section-about .about-inner .right {
        max-width: 593px;
        width: 100%;
    }

    .section-about .section-content {
        padding-left: 79px;
    }

    .page-title-home {
        padding-top: 120px;
        padding-bottom: 107px;
        overflow: hidden;
    }

    .page-title-home .top-page-title {
        padding-top: 32px;
        margin-left: -4px;
        margin-bottom: 140px;
    }

    .page-title-home .desc {
        padding-bottom: 57px;
        margin-bottom: 58px;
    }

    .page-title-home .content-left {
        padding-top: 65px;
    }

    .page-title-home .wg-counter {
        margin-bottom: 62px;
        margin-right: 22px;
    }

    .page-title-home .image {
        margin-right: -33%;
    }
}

@media (min-width: 1201px) {
    .wg-tab.style-2 {
        margin-top: -2px;
    }

    .tf-post-list.style-2 .image {
        max-width: 270px;
    }

    .tf-post-list.style-2 .post-content {
        max-width: 297px;
        padding-top: 61px;
        padding-bottom: 70px;
        padding-left: 50px;
    }

    .wg-cta {
        background-color: var(--primary);
    }

    .wg-cta .cta-inner {
        align-items: center;
    }

    .wg-cta .cta-inner .icon {
        margin-right: 20px;
    }

    .wg-cta .cta-inner .icon i {
        font-size: 35px;
    }

    .wg-cta .cta-inner .title {
        margin-right: 61px;
    }

    .wg-cta .cta-inner .title span {
        font-style: italic;
        letter-spacing: -0.3px;
        text-decoration-line: underline;
    }

    .wg-cta .cta-inner .list-agent {
        padding-right: 20px;
    }

    .wg-cta .cta-inner .img-line {
        max-width: 124px;
        margin-top: -8px;
    }

    .wg-cta .cta-inner .img-line img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sw-project {
        margin-right: 0;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        max-width: 1865px;
    }

    .project-item .item-content {
        padding: 67px 100px 70px 80px;
        max-width: 550px;
    }

    .project-item .item-content .desc {
        max-width: 93%;
    }

    .project-item .image {
        max-width: 730px;
    }

    .project-item.style-2 .item-content {
        padding: 58px 100px 59px;
        max-width: 570px;
    }

    .project-item.style-2 .desc {
        max-width: 95%;
    }

    .project-item.style-2:nth-child(1) .item-content {
        padding: 36px 100px 38px !important;
    }

    .project-item.project-gird-item .item-content {
        max-width: 100%;
    }
}

@media (min-width: 1501px) {
    .section-testimonial.p-services .section-testimonials-inner {
        padding: 120px 165px;
    }

    .section-testimonial.p-faq .section-testimonials-inner {
        padding: 124px 165px 119px !important;
    }

    .section-form .left {
        position: relative;
        max-width: 54.88%;
    }

    .section-form .right {
        padding-left: 100px;
        padding-top: 75px;
        padding-bottom: 74px;
    }

    .section-form .right .form-contact-us {
        max-width: 630px;
    }

    .section-company .section-company-inner .left-section {
        padding-right: 140px;
        max-width: 770px;
    }

    .section-company .image-section {
        max-width: 765px;
    }

    .section-counting .image {
        max-width: 985px;
    }

    .section-counting .left {
        max-width: 55.3%;
    }

    .section-counting .right {
        max-width: 44.7%;
        padding-left: 100px;
        padding-top: 61px;
        padding-bottom: 65px;
    }

    .top-bar {
        padding-left: 70px;
        padding-right: 70px;
    }

    .header .header-content {
        padding-left: 70px;
        padding-right: 0;
    }

    .header .logo-header {
        padding-right: 91px;
    }

    .header .main-menu {
        padding-left: 70px;
    }

    .header .header-right {
        gap: 51px;
    }
}

@media (max-width: 1500px) {
    .menu-primary-menu {
        gap: 17px;
    }
}

@media (max-width: 1200px) {
    .section-testimonial.p-services .section-testimonials-inner {
        flex-direction: column;
    }

    .section-testimonial.p-services .left {
        max-width: 100% !important;
    }

    .section-testimonial.p-services .sw-testimonials {
        max-width: 100% !important;
    }

    .section-form .section-inner {
        flex-direction: column;
        row-gap: 50px;
    }

    .section-form .left {
        max-width: 100%;
    }

    .section-form .right {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 15px !important;
    }

    .wg-cta .cta-inner {
        flex-wrap: wrap;
        row-gap: 30px;
    }

    .wg-cta .left,
    .wg-cta .right {
        flex-wrap: wrap;
        row-gap: 15px;
    }

    .section-counting .section-counting-inner {
        flex-direction: column;
    }

    .section-counting .right {
        padding-left: 0;
        padding-bottom: 0;
    }

    .sidebar-filter {
        position: fixed;
        bottom: 0;
        z-index: 3000;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        background-clip: padding-box;
        outline: 0;
        background-color: var(--dark-2) !important;
        padding: 15px !important;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        overflow: auto;
        max-width: 400px;
    }

    .sidebar-filter.left {
        top: 0;
        left: 0;
        transform: translateX(-100%);
    }

    .sidebar-filter.right {
        top: 0;
        right: 0;
        transform: translateX(100%);
    }

    .sidebar-filter.show {
        transform: none;
    }

    .footer .footer-middle {
        flex-wrap: wrap;
        gap: 50px 0;
    }

    .footer .footer-middle .left {
        max-width: 100%;
    }

    .footer .footer-middle .locations-contact,
    .footer .footer-middle .footer-content {
        max-width: 50%;
        width: 100%;
    }

    .px-xl-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mx-xl-15 {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .top-bar .tf-tb-left {
        display: none;
    }

    .top-bar .tf-tb-right {
        justify-content: space-between;
        width: 100%;
    }

    .top-bar .tf-tb-right .list-support {
        gap: 13px;
    }

    .top-bar .tf-tb-right .post-social {
        gap: 13px;
    }

    .header .header-content {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 15px;
    }

    .header .logo-header {
        max-width: 120px;
    }

    .header .main-menu {
        display: none;
    }

    .header .nav-megamenu {
        display: none;
    }

    .header .nav-btn {
        display: none;
    }
}

@media (max-width: 991px) {
    .section-blog .mask-s-blog-2 {
        display: none;
    }

    .highlight {
        display: block;
        width: max-content;
    }

    .heading-section .list-btn {
        display: none;
    }

    .fs-32 {
        font-size: 27px !important;
    }

    .map {
        height: 300px;
    }

    .wg-project-details .details-content {
        flex-direction: column;
    }

    .section-testimonial.p-services .section-testimonials-inner {
        padding: 70px 15px;
        gap: 0;
    }

    .pricing-item {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .pricing-item .title {
        margin-bottom: 15px !important;
    }

    .pricing-item .top-item {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .pricing-item .benefit-item {
        margin-bottom: 15px;
    }

    .pricing-item .benefit-item:last-child {
        margin-bottom: 0;
    }

    .pricing-item .list-benefit {
        margin-bottom: 30px !important;
    }

    .tf-post-list.style-2 .post-content {
        max-width: 100%;
    }

    .section-form .section-form-content {
        padding: 30px 15px;
        max-width: 350px;
    }

    .section-testimonial .mt-50 {
        margin-top: 30px !important;
    }

    .section-services .tf-marquee {
        padding-bottom: 70px;
    }

    .testimonial-item .icon i {
        font-size: 35px;
    }

    .testimonial-item .text {
        max-width: 100%;
    }

    .testimonial-item .text.fs-27 {
        font-size: 22px;
    }

    .testimonial-item .text.lh-35 {
        line-height: 30px;
    }

    .section-project .heading-section {
        margin-left: 0;
    }

    .section-project .sw-pagination.mt-70 {
        margin-top: 15px;
    }

    .according-item h5 {
        font-size: 20px;
        line-height: 22px;
    }

    .section-company .section-company-inner {
        flex-direction: column;
    }

    .section-company .section-company-inner .left-section {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 70px;
    }

    .counter-item .fs-65 {
        font-size: 40px !important;
    }

    .heading-section {
        margin-bottom: 40px !important;
    }

    .heading-section .sub-title {
        margin-bottom: 15px !important;
    }

    .heading-section .title {
        margin-bottom: 15px !important;
    }

    .heading-section .title:last-child {
        margin-bottom: 0 !important;
    }

    .heading-section .desc {
        margin-bottom: 15px !important;
    }

    .heading-section .desc:last-child {
        margin-bottom: 0;
    }

    .section-content .desc {
        margin-bottom: 15px !important;
    }

    .page-title-home .title.lh-85 {
        line-height: 53px !important;
    }

    .page-title-home br {
        display: none;
    }

    h1 {
        font-size: 40px;
        line-height: 47px;
        letter-spacing: -0.1px;
    }

    h2 {
        font-size: 33px;
        line-height: 42px;
        letter-spacing: -0.1px;
    }

    h3 {
        font-size: 25px;
        letter-spacing: -0.1px;
    }

    h4 {
        font-size: 20px;
        line-height: 25px;
    }

    .page-title .page-title-content {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .tf-spacing-1 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .tf-spacing-2 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-3 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-4 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-5 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-6 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-7 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-8 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-9 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-10 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-11 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .tf-spacing-12 {
        margin-top: 0;
        margin-bottom: 70px;
    }

    .list-post-gird .bottom-btn {
        margin-top: 40px;
    }

    .big-text {
        font-size: 100px;
    }

    .tf-post-grid .title {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .px-lg-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mx-lg-15 {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .footer .footer-top {
        padding-left: 15px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer .footer-middle {
        margin-bottom: 60px;
    }

    .footer .form-footer .title {
        margin-bottom: 20px;
    }

    .footer .form-footer .desc {
        margin-bottom: 20px;
    }

    .footer .form-footer .mb-23 {
        margin-bottom: 20px;
    }

    .footer .locations-contact .item .title {
        margin-bottom: 15px;
    }

    .footer-bottom .footer-go-top {
        margin-bottom: 15px;
    }

    .footer-bottom ul {
        gap: 29px;
    }

    .form-footer .desc {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .form-footer .input-form {
        flex-direction: column;
    }

    .form-footer .input-form .input-icon-absolute {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .mask svg {
        width: 500px;
        height: 500px;
    }

    .mask svg circle {
        cx: 250;
        cy: 250;
        r: 220;
        stroke-width: 50;
    }

    .mask.mask-1 {
        right: -300px;
    }

    .mask.mask-2 {
        left: -300px;
    }

    .mask.mask-2.p-about {
        left: -300px;
    }

    .mask.mask-3 {
        right: -300px;
    }

    .section-pricing .mask {
        position: absolute;
    }

    .section-pricing .mask.mask-s-pricing-1 {
        bottom: 0;
        right: -250px;
    }

    .section-pricing .mask.mask-s-pricing-2 {
        bottom: -200px;
        left: -250px;
    }

    .section-project.p-about .mask.mask-1 {
        left: -300px;
    }

    .section-blog .mask.mask-1 {
        top: 0;
        right: -300px;
    }

    .section-blog .mask.mask-s-blog-1 {
        top: -200px;
        right: -300px;
    }

    .section-testimonial .mask {
        top: 0;
        bottom: auto;
        left: -300px;
    }

    .wg-project-details .list-img .image {
        max-width: 100%;
    }

    .wg-service-details .list-process {
        flex-direction: column;
        row-gap: 40px;
    }

    .wg-service-details .list-process .process-item {
        max-width: 100%;
    }

    .wg-service-details .list-process .process-item .text {
        max-width: 100%;
    }

    .section-team .mask {
        right: -350px;
        bottom: -50%;
    }

    .section-services .mask {
        left: -50%;
    }

    .section-services.p-services .services-item {
        flex: 1 1 auto;
        max-width: 50%;
    }

    .section-services.p-services .services-item:nth-child(1) {
        border-bottom: 0;
        border-right: 0;
    }

    .section-services.p-services .services-item:nth-child(2) {
        border-right: 1px solid var(--stroke-2);
    }

    .section-services.p-services .services-item:nth-child(3) {
        border-bottom: 0;
        border-right: 0;
    }

    .section-services.p-services .services-item:nth-child(4) {
        border-right: 1px solid var(--stroke-2);
        border-bottom: 0;
    }

    .section-services.p-services .services-item:nth-child(5) {
        border-right: 0;
    }

    .services-item.style-1 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .services-item.style-1 .icon {
        margin-bottom: 20px;
    }

    .services-item.style-1 .icon i {
        font-size: 40px;
    }

    .services-item.style-1 .desc {
        margin-bottom: 20px;
    }

    .services-item.style-1 .image {
        margin-bottom: 20px;
    }

    .according-item .according-content .right {
        padding-left: 15px;
    }

    .section-counting .mask {
        right: -40%;
        top: -30%;
    }

    .section-counting .box-logo {
        display: none;
    }

    .section-counting .box-avatar {
        padding: 15px !important;
    }

    .section-about .left {
        display: none;
    }

    .wg-quote .title {
        font-size: 20px;
    }

    .form-comment .cols {
        flex-direction: column;
    }

    .author {
        flex-direction: column;
        align-items: start;
        row-gap: 30px;
    }

    .comment-item.reply {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-md-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mx-md-15 {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .footer .mask.mask-1 {
        right: -300px;
    }

    .footer .mask.mask-2 {
        bottom: -300px;
        left: -300px;
    }

    .footer .footer-bottom .list-bottom {
        justify-content: center;
    }
}

@media (max-width: 550px) {
    .tf-post-grid.style-desc .image {
        height: 287px;
    }

    .section-services.p-services .services-item {
        max-width: 100%;
        border-right: 1px solid var(--stroke-2) !important;
        border-bottom: 0 !important;
    }

    .section-services.p-services .services-item:last-child {
        border-bottom: 1px solid var(--stroke-2) !important;
    }

    .tf-post-list.style-2 .image {
        height: 400px !important;
    }

    .wg-service-details .image-blog.img-2 {
        height: 336px;
    }

    .wg-service-details .image-blog .counter-box {
        max-width: 270px;
        height: auto;
        padding: 30px 15px;
    }

    .features-item {
        flex-direction: column;
    }

    .features-item .item-content {
        max-width: 100% !important;
    }

    .tf-post-list.style-2 {
        flex-direction: column;
    }

    .form-contact-us .cols {
        flex-direction: column;
    }

    .form-contact-us .cols .item {
        max-width: 100% !important;
    }

    .section-form .image {
        height: 375.23px;
    }

    .project-item {
        flex-direction: column;
    }

    .project-item .image {
        margin: 0 10px 10px !important;
        width: auto !important;
    }

    .project-item .sub-title {
        margin-bottom: 20px !important;
    }

    .project-item .title-project {
        margin-bottom: 20px !important;
    }

    .project-item .item-content {
        row-gap: 20px !important;
    }

    .project-item.style-2 {
        flex-direction: column;
    }

    .project-item.style-2 .image {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .project-item.style-2 .item-content {
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .according-item .according-content {
        flex-direction: column;
    }

    .according-item .according-content .right {
        padding-left: 0 !important;
    }

    .section-counting .image {
        height: 316px;
    }

    .section-counting .wg-counter {
        flex-direction: column;
    }

    .section-counting .wg-counter .counter-item {
        max-width: 100% !important;
    }

    .wg-blog-details .list-img {
        flex-direction: column !important;
    }

    .wg-quote {
        flex-direction: column;
        gap: 20px;
    }

    .comment-item {
        flex-direction: column;
    }

    .comment-item .comment-content {
        max-width: 100%;
        width: 100%;
    }

    .comment-item .top {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .comment-item .top .dot {
        display: none;
    }

    .tf-grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer .footer-middle {
        gap: 40px 0;
    }

    .footer .footer-middle .locations-contact,
    .footer .footer-middle .footer-content {
        max-width: 100%;
    }

    .px-sm-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mx-sm-15 {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

/* 1. إبعاد المحتوى عن حواف الشاشة يميناً ويساراً */
.header-content {
    padding-right: 40px !important;

    /* مسافة من اليمين */
    padding-left: 40px !important;

    /* مسافة من اليسار */
}

/* 2. تنسيق الشعار والخط الفاصل */
.logo-header {
    /* الخط الفاصل (على اليسار لأن الموقع RTL) */
    border-left: 1px solid #e5e5e5;

    /* مسافات الخط الفاصل */
    padding-left: 30px;

    /* مسافة بين الشعار والخط */
    margin-left: 30px;

    /* مسافة بين الخط وأول عنصر في القائمة */
    /* ضمان توسط الخط عمودياً */
    height: 40px;
    display: flex;
    align-items: center;
}

/* في حالة الموبايل: نخفي الخط الفاصل ونلغي المسافات */
@media (max-width: 991px) {
    .header-content {
        padding: 0 15px !important;
    }

    .logo-header {
        border: none;
        margin: 0;
        padding: 0;
    }
}

/* إزالة الخط الفاصل الموجود في القسم الأيسر من الهيدر */
.header-right {
    border: none !important;
    padding-left: 0 !important;

    /* لتقليل المسافة إذا أردت */
}

/* احتياطياً: إذا كان الخط جزءاً من القائمة نفسها */
.main-menu li:last-child {
    border: none !important;
}

.main-menu {
    border: none !important;
}

/* زر شفاف مودرن (Ghost Button) */
.btn-transparent-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;

    /* مساحة داخلية مريحة */
    background-color: transparent;

    /* السر هنا: خلفية شفافة */
    border: 1px solid #d1d1d1;

    /* حدود رمادية رفيعة جداً */
    color: #d1d1d1;

    /* لون النص أسود غامق */
    font-family: 'Cairo', sans-serif;

    /* نفس خط الموقع */
    font-weight: 700;

    /* خط عريض */
    font-size: 14px;
    border-radius: 50px;

    /* حواف دائرية بالكامل */
    text-decoration: none !important;
    transition: all 0.3s ease;

    /* نعومة الحركة */
}

/* التأثير عند مرور الماوس */
.btn-transparent-modern:hover {
    border-color: #000;

    /* الحدود تصبح سوداء */
    background-color: transparent;

    /* تظل شفافة */
    transform: translateY(-2px);

    /* حركة خفيفة للأعلى */
}

/* تنسيقات الهيرو سكشن */
.hero-section {
    position: relative;
    width: 100%;
    height: 900px;

    /* الارتفاع المطلوب للصورة */
    overflow: hidden;
    margin-top: 0;

    /* إلغاء التداخل مع الهيدر */
    padding-top: 0;
    display: flex;
    align-items: center;
}

/* تنسيق الصورة لتغطي المساحة كاملة */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* لضمان عدم تمطيط الصورة */
    object-position: center;
}

/* طبقة التغميق */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

    /* درجة التغميق 50% */
    z-index: 2;
}

/* تحسينات النصوص والعناصر */
.z-index-2 {
    z-index: 3;

    /* لضمان ظهور النص فوق الصورة */
}

.hero-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 30px;
    margin-right: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-section .title {
    font-size: 65px;
    line-height: 1.2;
}

.style-border-white {
    border: 1px solid #fff;
    background: transparent;
}

.style-border-white:hover {
    background: #fff;
    color: #000 !important;
}

/* تعديل للموبايل فقط لتقليل الارتفاع */
@media (max-width: 768px) {
    .hero-section {
        height: 600px;

        /* ارتفاع أقل للموبايل */
    }

    .hero-section .title {
        font-size: 36px;
    }
}

.hero-bg-image .bg-img {
    /* ... خصائصك الحالية ... */
    image-rendering: -webkit-optimize-contrast;

    /* يحسن التباين */
    backface-visibility: hidden;

    /* يمنع الوميض عند الحركة */
    transform: translateZ(0);

    /* تفعيل تسريع الهاردوير */
}

:root {
    --primary: #1698a0;

    /* تم تغيير اللون هنا */
    --main-dark: #090F16;
}

/* إضافة طبقة التدرج المودرن */
.hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;

    /* يتحكم في ارتفاع التدرج (يغطي النصف السفلي) */
    /* التدرج: يبدأ من اللون الداكن بالأسفل ويصبح شفافاً بالأعلى */
    background: linear-gradient(to top, #090F16 10%, rgba(9, 15, 22, 0.8) 50%, transparent 100%);
    z-index: 1;

    /* يظهر فوق الصورة ولكن خلف النصوص */
    pointer-events: none;

    /* يسمح بالنقر على العناصر خلفه (للاحتياط) */
}

/* تأكد أن المحتوى (النصوص والأزرار) يظهر فوق التدرج */
.hero-content,
.hero-corner-btns {
    z-index: 2 !important;

    /* رفعنا الطبقة لتكون فوق التدرج */
}

/* 3. تنسيق الشعارات السفلية (محدث) */
.partners-grid-network {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.net-item {
    display: flex;
    justify-content: center;
}

/* --- 1. تنسيق الكارت (تأثير زجاج الآيفون) --- */
.logo-card {
    /* السر في تأثير الآيفون */
    background: rgba(255, 255, 255, 0.05);

    /* طبقة بيضاء خفيفة جداً */
    backdrop-filter: blur(20px);

    /* تمويه قوي للخلفية (التغبيش) */
    -webkit-backdrop-filter: blur(20px);

    /* لدعم متصفح سفاري */
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* حدود بيضاء ناعمة وشفافة */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* ظل ناعم وعميق */
    /* الأبعاد والتنسيق العام */
    width: 100%;
    max-width: 280px;
    height: 180px;
    border-radius: 24px;

    /* حواف دائرية ناعمة مثل تطبيقات iOS */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* --- 2. تنسيق الشعار (أبيض متوهج في البداية) --- */
.logo-card img {
    max-width: 85%;
    max-height: 100px;
    object-fit: contain;

    /* تحويل للأبيض + توهج خفيف لزيادة الوضوح */
    filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    opacity: 0.9;
    transition: all 0.4s ease;
}

/* --- 3. تأثيرات الماوس (Hover) --- */
/* الكارت عند الهوفر */
.logo-card:hover {
    background: rgba(255, 255, 255, 0.15);

    /* زيادة كثافة الزجاج */
    border-color: rgba(255, 255, 255, 0.4);

    /* حدود أوضح */
    transform: translateY(-10px);

    /* توهج أزرق خفيف يعكس لون الهوية على الزجاج */
    box-shadow: 0 15px 40px rgba(27, 118, 150, 0.25);
}

/* الشعار عند الهوفر */
.logo-card:hover img {
    /* استعادة الألوان الأصلية */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
    transform: scale(1.1);
    opacity: 1;
}

/* ==================== ECOSYSTEM STYLES (CORRECTED) ==================== */
/* 1. إعدادات السكشن */
.ecosystem-section {
    position: relative;
    padding: 80px 0;
    background-color: #090F16;

    /* لون الخلفية الداكن */
    overflow: hidden;
}

/* 2. الشعار الرئيسي (Top Node) */
.main-node-container {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.main-logo-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(27, 118, 150, 0.5);
    padding: 15px 40px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(27, 118, 150, 0.2);
}

.main-logo-box img {
    height: 60px;
    width: auto;
}

/* 3. الخطوط المتحركة (Network Lines) */
.network-svg-container {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 1;
    margin-top: -5px;
}

.network-svg-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

.flow-line {
    fill: none;
    stroke: #1b7696;

    /* لون الخط */
    stroke-width: 2;
    stroke-dasharray: 10;
    animation: flowLine 1.5s linear infinite;
    opacity: 0.6;
}

@keyframes flowLine {
    to {
        stroke-dashoffset: -20;
    }
}

/* 4. شبكة الشعارات */
.partners-grid-network {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    margin-top: -10px;
}

.net-item {
    display: flex;
    justify-content: center;
}

/* 5. تصميم البطاقة (تم تسريع الحركة وتصحيح الحدود) */
.logo-card {
    /* الخلفية الزجاجية الداكنة في الوضع العادي */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* تصحيح خطأ القوس الزائد في كودك السابق */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* الأبعاد */
    width: 100%;
    max-width: 280px;
    height: 180px;
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* === تسريع الحركة هنا === */
    /* تغيير الوقت من 0.4s إلى 0.25s لتصبح أسرع وأكثر حيوية */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* 6. تنسيق الشعار (أبيض في البداية) */
.logo-card img {
    max-width: 90%;
    max-height: 110px;
    object-fit: contain;

    /* تحويل للأبيض */
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
    opacity: 1;

    /* تسريع حركة الشعار أيضاً */
    transition: all 0.25s ease;
}

/* 7. تأثيرات الماوس (Hover - خلفية بيضاء شفافة) */
.logo-card:hover {
    /* === التعديل هنا: أبيض شفاف === */
    background: rgba(255, 255, 255, 0.85);

    /* أبيض بنسبة 85% */
    border-color: #fff;

    /* حدود بيضاء بالكامل */
    transform: translateY(-10px);

    /* توهج أبيض قوي */
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.4);
}

.logo-card:hover img {
    /* استعادة الألوان الطبيعية */
    filter: none;

    /* إلغاء الفلتر الأبيض لظهور الألوان */
    transform: scale(1.1);
    opacity: 1;
}

/* 8. التجاوب مع الموبايل */
@media (max-width: 991px) {
    .partners-grid-network {
        grid-template-columns: repeat(2, 1fr);

        /* عمودين في الموبايل */
        gap: 15px;
    }

    .network-svg-container {
        display: none;
    }

    /* إخفاء الخطوط في الموبايل */
    .logo-card {
        height: 150px;
    }

    .logo-card img {
        max-height: 80px;
    }
}

/* إجبار الشعار الرئيسي على التكبير */
.main-logo-box img {
    height: 220px !important;

    /* تكبير إجباري */
    max-height: unset !important;

    /* إلغاء أي حد أقصى للارتفاع */
    width: auto !important;
    min-width: 150px;

    /* ضمان عرض أدنى */
}

/* توسيع الصندوق ليحتوي الشعار الكبير */
.main-logo-box {
    height: auto !important;
    padding: 20px 40px !important;
    min-height: 140px;

    /* مساحة كافية للشعار */
}

/* --- خلفية الخطوط التوبوغرافية (Modern Dunes) --- */
.topographic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;

    /* شفافية عامة هادئة */
}

.topographic-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* تنسيق الخطوط */
.topo-line {
    fill: none;
    stroke: #1b7696;

    /* لون الهوية */
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;

    /* يحافظ على دقة الخط عند التكبير */
}

/* شفافيات مختلفة للخطوط لعمل عمق (Depth) */
.line-1 {
    stroke-width: 1px;
    opacity: 0.2;
    animation: floatTopo 8s ease-in-out infinite alternate;
}

.line-2 {
    stroke-width: 1.5px;
    opacity: 0.3;
    animation: floatTopo 10s ease-in-out infinite alternate-reverse;
}

.line-3 {
    stroke-width: 2px;
    opacity: 0.1;
    animation: floatTopo 12s ease-in-out infinite alternate;
}

.line-4 {
    stroke-width: 1px;
    opacity: 0.15;
    animation: floatTopo 15s ease-in-out infinite alternate-reverse;
}

/* حركة تموج بطيئة جداً */
@keyframes floatTopo {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/* تأكيد أن المحتوى في الأمام */
.tf-container {
    position: relative;
    z-index: 2;
}

/* تعديل بسيط للشبكة لضمان ظهورها بوضوح فوق الخلفية */
.network-svg-container {
    opacity: 0.8;
}

/* --- تنسيق سكشن "من نحن" --- */
.about-section {
    background-color: #090F16;
    padding: 100px 0;
    position: relative;
}

/* تنسيق الصورة والحاوية */
.about-image-wrapper {
    position: relative;
    padding-left: 30px;

    /* مساحة للزخرفة */
    padding-bottom: 30px;
}

.about-image-wrapper .main-img {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.about-image-wrapper .main-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-image-wrapper:hover .main-img img {
    transform: scale(1.05);

    /* تكبير بسيط عند الهوفر */
}

/* العنصر الزخرفي (الإطار الخلفي) */
.decorative-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 80%;
    border: 2px solid #1b7696;
    border-radius: 20px;
    z-index: 1;
    opacity: 0.5;
}

/* شارة سنة التأسيس العائمة */
.experience-badge {
    position: absolute;
    top: 30px;
    left: -20px;

    /* خروج طفيف عن الصورة */
    background: #1b7696;
    padding: 25px 30px;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(27, 118, 150, 0.4);
    backdrop-filter: blur(10px);
}

.experience-badge .year {
    display: block;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Inter', sans-serif;

    /* أو خط إنجليزي للأرقام */
}

.experience-badge .label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
}

.experience-badge .sub-label {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    opacity: 0.7;
}

/* تنسيق النصوص */
.about-content {
    padding-right: 50px;

    /* مسافة بين الصورة والنص */
}

.section-subtitle {
    color: #1b7696;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    padding-left: 40px;
}

/* خط صغير بجانب العنوان الفرعي */
.section-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 2px;
    background: #1b7696;
}

.section-title {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #fff;
}

.section-title .highlight {
    color: #1b7696;

    /* تمييز كلمة "رواة قصص" */
    position: relative;
    display: inline-block;
}

.section-desc {
    color: #aebccc;

    /* لون رمادي فاتح للنصوص */
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* قائمة المميزات */
.about-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-features-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.about-features-list i {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: rgba(27, 118, 150, 0.1);
    color: #1b7696;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-left: 20px;

    /* مسافة للأيقونة (RTL) */
}

.about-features-list h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.about-features-list p {
    color: #8fa1b3;
    font-size: 14px;
    margin: 0;
}

/* التجاوب مع الجوال */
@media (max-width: 991px) {
    .about-content {
        padding-right: 0;
        margin-top: 50px;
    }

    .experience-badge {
        right: 20px;
        left: auto;
        padding: 15px 20px;
    }

    .experience-badge .year {
        font-size: 32px;
    }

    .section-title {
        font-size: 30px;
    }
}

/* --- تنسيق النص (ضبط المحاذاة) --- */
.text-content {
    position: relative;
    z-index: 20;
    text-align: right;

    /* ضمان أن النص عربي من اليمين */
    /* --- التعديل الجوهري هنا --- */
    /* دفع النص لليسار ليبتعد عن الحافة اليمنى */
    /* نستخدم نسبة مئوية ليكون متجاوباً، أو 150px ليكون بمحاذاة الكونتينر العادي */
    padding-right: 10vw;

    /* (10% من عرض الشاشة) مسافة ممتازة للشاشات العريضة */
    /* أو استخدم بكسل ثابت إذا كنت تريد دقة صارمة: */
    /* padding-right: 150px; */
    max-width: 100%;

    /* ضمان عدم تجاوز العرض */
}

.text-content .title {
    font-size: 50px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 25px;
}

.text-content .section-subtitle {
    color: #1b7696;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: bold;
    display: block;
}

.text-content .desc {
    color: #aebccc;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 40px;
    margin-left: 20px;

    /* لعدم تمدد الوصف كثيراً */
}

/* --- تنسيق الجوال (إلغاء الهوامش الكبيرة) --- */
@media (max-width: 991px) {
    .text-content {
        /* إعادة الهوامش لطبيعتها في الجوال */
        padding-right: 20px;
        padding-left: 20px;
        text-align: center;

        /* توسيط النص في الجوال أجمل */
        margin-bottom: 50px;
    }

    .text-content .desc {
        margin-left: 0;
    }
}

/* 2. الحاوية الرئيسية للنص */
.text-content {
    /* أساسيات اللغة العربية */
    font-family: 'Tajawal', sans-serif;
    text-align: right;
    direction: rtl;

    /* ضبط الهوامش (الحل لمشكلة النص في آخر الشاشة) */
    /* نبعد النص عن يمين الشاشة بنسبة 10% ليكون متوازناً */
    padding-right: 10%;
    padding-left: 20px;

    /* مسافة أمان من اليسار */
    position: relative;
    z-index: 20;
}

/* 3. العنوان الصغير (منظومة العلاقات) */
.section-subtitle {
    color: #1b7696;

    /* لون التمييز السماوي */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0;

    /* إلغاء تباعد الأحرف في العربي */
}

/* 4. العنوان الرئيسي (المركز وشركاء النجاح) */
.title {
    font-size: 50px;

    /* حجم كبير وواضح */
    font-weight: 800;

    /* سميك جداً */
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 25px;
}

/* تنسيق كلمة "النجاح" المميزة */
.title .highlight {
    color: #1b7696;

    /* أو يمكن جعلها متدرجة */
    /* background: -webkit-linear-gradient(45deg, #1b7696, #2ce0d8); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
}

/* 5. الوصف (الباراجراف) */
.desc {
    color: #aebccc;

    /* لون رمادي فاتح مريح للقراءة على خلفية داكنة */
    font-size: 18px;
    line-height: 1.8;

    /* تباعد الأسطر للقراءة المريحة */
    font-weight: 500;
    margin-bottom: 40px;
    max-width: 90%;

    /* يمنع النص من أن يكون طويلاً جداً */
}

/* 6. صندوق الإحصائيات (الأرقام) */
.stats-box {
    display: flex;
    align-items: center;
    gap: 50px;

    /* مسافة بين الرقمين */
    /* خط فاصل علوي خفيف */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.stats-box .stat {
    display: flex;
    flex-direction: column;
}

.stats-box .num {
    font-size: 42px;

    /* رقم ضخم */
    font-weight: 800;
    color: #1b7696;

    /* لون العلامة التجارية */
    line-height: 1;
    margin-bottom: 5px;
}

.stats-box .txt {
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
}

/* --- تنسيق الجوال (Mobile Styling) --- */
@media (max-width: 991px) {
    .text-content {
        /* إلغاء الهامش الكبير في الجوال */
        padding-right: 20px;
        padding-left: 20px;
        text-align: center;

        /* توسيط النص في الجوال */
    }

    .title {
        font-size: 36px;
    }

    .desc {
        max-width: 100%;
        font-size: 16px;
    }

    .stats-box {
        justify-content: center;

        /* توسيط الإحصائيات */
        gap: 30px;
    }
}

/* ==================== 1. إعدادات السكشن والخطوط ==================== */
.partners-carousel-section {
    padding: 80px 0;

    /* تقليل الحشو من 100 إلى 40 */
    background-color: #090F16;
    position: relative;
    overflow: hidden;
    min-height: 550px;

    /* تقليل الارتفاع الأدنى من 850 إلى 550 */
    display: flex;
    align-items: center;
}

/* الخطوط المضيئة */
.partners-carousel-section .modern-line {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(27, 118, 150, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.6);
    z-index: 10;
}

.partners-carousel-section .modern-line.top {
    top: 0;
}

.partners-carousel-section .modern-line.bottom {
    bottom: 0;
}

/* ==================== 2. تنسيق النص (تحريك للأسفل + توسيط يمين) ==================== */
.partners-carousel-section .partners-text {
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* توسيط عمودي */
    align-items: flex-end;

    /* محاذاة الصندوق لليمين */
    /* --- التعديل هنا: دفع النص للأسفل --- */
    padding-top: 100px;

    /* نزلنا النص 100px ليتوسط المساحة بصرياً */
    height: 100%;

    /* ضمان ملء العمود */
}

.partners-carousel-section .text-content {
    text-align: right;

    /* محاذاة الكلام لليمين */
    padding-left: 20px;
    max-width: 1000px;

    /* تحديد عرض للنص ليكون مرتباً */
}

.partners-carousel-section .title {
    font-size: 50px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 25px;
}

.partners-carousel-section .section-subtitle {
    color: #1b7696;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.partners-carousel-section .desc {
    color: #aebccc;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* صندوق الإحصائيات */
.partners-carousel-section .stats-box {
    display: flex;
    justify-content: flex-start;

    /* يبدأ من اليمين (بسبب الـ RTL) */
    gap: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
}

.partners-carousel-section .stats-box .num {
    display: block;
    font-size: 40px;
    font-weight: 800;
    color: #1b7696;
    line-height: 1;
    margin-bottom: 5px;
}

.partners-carousel-section .stats-box .txt {
    color: #fff;
    font-size: 15px;
}

/* --- تعديل للموبايل (إلغاء الإزاحة) --- */
@media (max-width: 991px) {
    .partners-carousel-section .partners-text {
        padding-top: 0;

        /* إلغاء الإزاحة في الموبايل */
        align-items: center;

        /* توسيط في المنتصف */
        text-align: center;
        margin-bottom: 40px;
    }

    .partners-carousel-section .text-content {
        text-align: center;
        padding-left: 0;
        max-width: 100%;
    }

    .partners-carousel-section .stats-box {
        justify-content: center;
    }
}

/* ==================== 3. مسرح الحلقة (Carousel Stage) ==================== */
/* هذا هو الكونتينر الذي يحمل الحلقة بأكملها */
.partners-carousel-section .carousel-container {
    width: 100%;
    height: 480px;

    /* تم تقليل الارتفاع من 600 إلى 480 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 3000px;
    overflow: visible;
    margin-bottom: -20px;

    /* سحب الهامش السفلي للأعلى قليلاً */
}

/* المشهد */
.partners-carousel-section .scene {
    position: relative;
    width: 600px;

    /* عرض المشهد */
    height: 400px;
    transform-style: preserve-3d;

    /* إمالة بسيطة جداً للأسفل (Tilt) لتعطي نظرة علوية طفيفة */
    transform: rotateX(5deg);
}

/* ==================== 4. الحلقة الدوارة (The Ring) ==================== */
.partners-carousel-section .carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotateCarousel 80s infinite linear;

    /* دوران بطيء جداً وهادئ */
    /* المتغيرات المحسوبة (مهمة جداً للتوزيع) */
    --cells: 32;
    --theta: calc(360deg / var(--cells));

    /* نصف القطر: (عرض الكارت / 2) / tan(theta/2) */
    /* لـ 32 كارت بعرض 130px، نصف القطر المناسب حوالي 700px */
    --radius: 700px;
}

/* ==================== 5. المركز الثابت (شعار الشركة) ==================== */
.partners-carousel-section .center-core {
    position: absolute;
    top: 30%;
    left: 50%;

    /* دوران عكسي ليبقى الشعار مواجهاً للمستخدم دائماً */
    transform: translate(-50%, -50%) rotateY(0deg);
    width: 350px;

    /* حجم كبير وواضح */
    height: auto;
    z-index: 50;

    /* فوق كل شيء */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    /* لا يعيق النقر */
    animation: counterRotateCore 80s infinite linear;

    /* عكس اتجاه الحلقة بنفس السرعة */
}

/* التوهج الخلفي المودرن */
.partners-carousel-section .center-core::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(0, 230, 255, 0.4) 0%, rgba(27, 118, 150, 0.1) 60%, transparent 80%);
    filter: blur(40px);
    z-index: -1;
    animation: glowPulse 4s infinite alternate;
}

.partners-carousel-section .center-core img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}

/* ==================== 6. الكروت (Cells) ==================== */
/* ==================== 6. الكروت (تعديل الحواف الناعمة) ==================== */
.partners-carousel-section .carousel__cell {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130px;
    height: 100px;
    margin-left: -65px;
    margin-top: -50px;

    /* --- التعديل: حواف سوفت ناعمة --- */
    background: rgba(255, 255, 255, 0.05);

    /* حدود شفافة جداً لتعطي نعومة */
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* زوايا دائرية كبيرة (Soft Corners) */
    border-radius: 24px;
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;

    /* تقليل الحشو الداخلي قليلاً */
    /* ظل ناعم ومنتشر */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * var(--theta))) translateZ(var(--radius));
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* حركة ناعمة */
    backface-visibility: hidden;
}

/* الشريحة البيضاء الداخلية */
.partners-carousel-section .logo-chip {
    width: 100%;
    height: 100%;
    background: #ffffff;

    /* حواف ناعمة تتبع الكارت الخارجي */
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;

    /* ظل داخلي خفيف جداً يعطي عمقاً ناعماً */
    box-shadow: inset 0 0 15px rgba(0,0,0,0.03);
}

.partners-carousel-section .carousel__cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

/* تأثير الهوفر (Soft Scale) */
.partners-carousel-section .carousel__cell:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);

    /* تفتيح الحدود بدلاً من تلوينها الحاد */
    transform: rotateY(calc(var(--i) * var(--theta))) translateZ(calc(var(--radius) + 30px)) scale(1.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

    /* ظل أكبر عند الهوفر */
    z-index: 100;
    cursor: pointer;
}

/* الحركات */
transform-style: preserve-3d;

/* التوزيع الدائري */
transform: rotateY(calc(var(--i) * var(--theta))) translateZ(var(--radius));
transition: all 0.3s ease;

/* إخفاء الوجه الخلفي لتنظيف المشهد */
backface-visibility: hidden;

/* الشريحة البيضاء الداخلية (التي تحمل الشعار) */
.partners-carousel-section .carousel__cell .logo-chip {
    width: 100%;
    height: 100%;
    background: #ffffffe2;

    /* أبيض ناصع */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.partners-carousel-section .carousel__cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;

    /* ألوان طبيعية */
}

/* تأثير الهوفر */
.partners-carousel-section .carousel__cell:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #1b7696;

    /* تكبير وتوجيه للكاميرا */
    transform: rotateY(calc(var(--i) * var(--theta))) translateZ(calc(var(--radius) + 20px)) scale(1.1);
    z-index: 100;
    cursor: pointer;
}

/* ==================== 7. الحركات (Animations) ==================== */
@keyframes rotateCarousel {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* دوران عكسي للمركز ليبقى ثابتاً بصرياً */
@keyframes counterRotateCore {
    from {
        transform: translate(-50%, -50%) rotateY(360deg);
    }

    /* عكس الاتجاه */
    to {
        transform: translate(-50%, -50%) rotateY(0deg);
    }
}

@keyframes glowPulse {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* ==================== 8. التجاوب (Mobile) ==================== */
@media (max-width: 991px) {
    .partners-carousel-section {
        flex-direction: column;
        padding: 60px 0;
        min-height: auto;
        text-align: center;
    }

    .partners-carousel-section .text-content {
        padding-left: 0;
        margin-bottom: 50px;
        text-align: center;
    }

    .partners-carousel-section .stats-box {
        justify-content: center;
    }

    /* تصغير الحلقة للموبايل */
    .partners-carousel-section .carousel-container {
        height: 400px;
        perspective: 1500px;

        /* تقليل المنظور */
    }

    .partners-carousel-section .scene {
        width: 300px;

        /* تقليل الميلان وتصغير الحجم */
        transform: rotateX(5deg) scale(0.55);
    }

    /* تصغير المركز */
    .partners-carousel-section .center-core {
        width: 250px;
    }
}

/* تنسيق الخلفية المحلية */
.partners-carousel-section {
    position: relative;

    /* إزالة لون الخلفية الصلب */
    background-color: transparent;
}

.local-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;

    /* خلف كل شيء */
}

/* طبقة تعتيم فوق الصورة لزيادة وضوح النص (اختياري) */
.local-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 15, 22, 0.85);

    /* لون داكن شفاف */
    z-index: 1;
}

/* تنسيق اسم الشركة */
.brand-name {
    color: #1b7696;

    /* نفس لون الهوية المستخدم في الموقع */
    font-weight: 700;

    /* جعل الخط عريضاً للتمييز */
    position: relative;
    display: inline-block;
}

/* ==================== Modern Orbit System Design ==================== */
/* 1. الحاوية الأم */
.modern-orbit-system {
    position: relative;
    width: 300px;

    /* الحجم الكلي */
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* 2. المركز (القلب) */
.core-center {
    position: absolute;
    width: 90px;
    height: 90px;
    background: #1b7696;

    /* لون البراند */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 20px rgba(27, 118, 150, 0.4);

    /* توهج */
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.core-center .icon-box {
    color: #fff;
    transform: rotate(45deg);

    /* اتجاه السهم */
}

/* 3. الحلقات الدوارة (Rings) */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* الحلقة المتقطعة الخارجية */
.dashed-ring {
    width: 240px;
    height: 240px;
    border: 1px dashed rgba(27, 118, 150, 0.5);
    animation: spinRight 30s linear infinite;
}

/* الحلقة الصلبة الداخلية */
.solid-ring {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-color: #1b7696;

    /* جزء ملون للدوران */
    border-right-color: #1b7696;
    animation: spinLeft 15s linear infinite;
}

/* 4. الكلمات (Labels) */
.orbit-labels .label {
    position: absolute;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;

    /* لون النص */
    background: #090f16;

    /* خلفية داكنة صغيرة خلف النص لقطع الخطوط */
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(27, 118, 150, 0.3);
    white-space: nowrap;
    z-index: 5;

    /* ميزان المواقع */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* نقطة البداية في المنتصف */
}

/* توزيع الكلمات في الاتجاهات الأربعة */
/* نحرك كل كلمة بعيداً عن المركز بمقدار 135px */
.orbit-labels .top {
    transform: translate(-50%, -145px);
}

.orbit-labels .bottom {
    transform: translate(-50%, 145px);
}

.orbit-labels .right {
    transform: translate(145px, -50%);
}

.orbit-labels .left {
    transform: translate(-145px, -50%);
}

/* 5. الحركات (Animation) */
@keyframes spinRight {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinLeft {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* للموبايل: تصغير الحجم قليلاً */
@media (max-width: 500px) {
    .modern-orbit-system {
        transform: scale(0.8);
    }
}

/* ==================== Smart Orbit System (تصميم المدار الذكي) ==================== */
/* 1. الحاوية الأم */
.smart-orbit-wrapper {
    position: relative;
    width: 320px;

    /* حجم الدائرة الكلي */
    height: 320px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    direction: ltr !important;

    /* هام: يعزل الاتجاه لضبط الأماكن بدقة */
}

/* 2. المركز (القلب) */
.core-hub {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.core-hub .icon-box {
    width: 100%;
    height: 100%;
    background: #1b7696;

    /* اللون الأساسي */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 25px rgba(27, 118, 150, 0.5);

    /* توهج */
    position: relative;
    z-index: 2;
}

/* نبض خفيف خلف المركز */
.pulse-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(27, 118, 150, 0.4);
    border-radius: 50%;
    z-index: 1;
    animation: pulseCore 2s infinite;
}

/* 3. الحلقات الدوارة */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
}

.ring-1 {
    width: 220px;
    height: 220px;
    border: 1px dashed rgba(255, 255, 255, 0.2);

    /* حلقة متقطعة خفيفة */
    animation: spinSlow 40s linear infinite;
}

.ring-2 {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(27, 118, 150, 0.3);
    border-top-color: #1b7696;

    /* جزء ملون */
    border-bottom-color: #1b7696;
    animation: spinFast 15s linear infinite reverse;

    /* تدور عكسي */
}

/* 4. الكلمات (الكواكب) */
.planet-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
    transition: 0.3s;
}

/* تنسيق الخط العربي */
.planet-label .text {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background: rgba(9, 15, 22, 0.8);

    /* خلفية داكنة لزيادة الوضوح */
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(27, 118, 150, 0.3);
    white-space: nowrap;

    /* يمنع نزول الكلمة لسطرين */
}

/* النقطة الملونة بجانب الكلمة */
.planet-label .dot {
    width: 8px;
    height: 8px;
    background-color: #1b7696;
    border-radius: 50%;
    box-shadow: 0 0 10px #1b7696;
}

/* === توزيع الكلمات في الاتجاهات الأربعة === */
/* أعلى */
.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;

    /* الكلمة فوق النقطة */
}

/* أسفل */
.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;

    /* الكلمة تحت النقطة */
}

/* يمين */
.right {
    right: -20px;

    /* دفع للخارج قليلاً */
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;

    /* النقطة يسار الكلمة */
}

/* يسار */
.left {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

/* 5. الحركات (Animation) */
@keyframes spinSlow {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinFast {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulseCore {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.4);
        opacity: 0;
    }

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

/* للموبايل: تصغير الحجم */
@media (max-width: 500px) {
    .smart-orbit-wrapper {
        transform: scale(0.85);
    }

    .planet-label .text {
        font-size: 14px;
    }
}

/* ==================== ضبط المسافات (الحل النهائي) ==================== */
/* 1. سكشن "من نحن" (العلوي) */
.section-about {
    margin-top: -80px !important;

    /* الرفع للأعلى كما هو */
    /* --- التعديل هنا: تقليل الفراغ الداخلي --- */
    padding-bottom: 60px !important;

    /* قللناها من 180px إلى 60px */
    /* -------------------------------------- */
    position: relative;
    z-index: 20;
}

/* 2. سكشن "الأرقام" (السفلي) */
.section-counting {
    /* زيادة المسافة الخارجية لتعويض تقليل البادينج ومنع التداخل */
    margin-top: 140px !important;
    position: relative;
    z-index: 10;
}

/* 3. تنسيق الموبايل */
@media (max-width: 991px) {
    .section-about {
        margin-top: 0 !important;
        padding-bottom: 50px !important;

        /* مسافة طبيعية للموبايل */
    }

    .section-counting {
        margin-top: 0 !important;

        /* إلغاء الهامش الكبير في الموبايل */
    }
}

/* ==================== إصلاح تداخل السكاشن (الحل النهائي) ==================== */
/* 1. ضبط سكشن "من نحن" (العلوي) */
.section-about {
    /* الرفع للأعلى كما طلبت */
    margin-top: -80px !important;

    /* إضافة مساحة كبيرة في الأسفل لاستيعاب الدائرة ومنع التداخل */
    padding-bottom: 280px !important;
    position: relative;
    z-index: 20;

    /* يظهر فوق الخلفية */
}

/* 2. ضبط سكشن "الأرقام" (السفلي) */
.section-counting {
    /* دفعه للأسفل بعيداً عن السكشن السابق */
    margin-top: 50px !important;
    position: relative;
    z-index: 10;
}

/* 3. ضبط خاص للموبايل (لأن الترتيب يختلف) */
@media (max-width: 991px) {
    .section-about {
        margin-top: 0 !important;

        /* إلغاء الرفع في الموبايل */
        padding-bottom: 80px !important;

        /* مسافة طبيعية */
    }

    .section-counting {
        margin-top: 0 !important;
    }
}

/* ==================== إصلاح تداخل العدادات ==================== */
/* الحاوية الأب للعدادات */
.wg-counter {
    gap: 40px !important;

    /* زيادة المسافة بين الصندوقين */
    margin-top: 40px;

    /* فصل العدادات عن العنوان الذي فوقها */
}

/* تنسيق عنصر العداد الواحد */
.counter-item {
    width: 100%;

    /* لضمان أخذ المساحة المتاحة */
    min-width: 250px;

    /* منع الصندوق من الانكماش الزائد */
    margin-bottom: 20px;

    /* مسافة أمان سفلية في حال نزولهم تحت بعض */
}

/* تنسيق خاص للموبايل (جعلهم تحت بعض بمسافة واضحة) */
@media (max-width: 767px) {
    .wg-counter {
        flex-direction: column;

        /* ترتيب عمودي */
        gap: 30px !important;

        /* مسافة رأسية بين العدادات */
    }

    .counter-item {
        width: 100% !important;

        /* ملء الشاشة في الموبايل */
    }
}

/* تنسيق قائمة الإنجازات (Tags) */
.achievements-tags-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #e5e5e5;
}

.tags-title {
    font-size: 14px;
    color: #888;
    font-weight: 600;
}

.achievements-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50px;

    /* شكل كبسولة */
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all 0.3s ease;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* تأثير عند التحويم */
.tag-item:hover {
    background: #1b7696;
    border-color: #1b7696;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(27, 118, 150, 0.2);
}

/* تمييز عنصر أرشيف الملك سلمان بلون ذهبي/مميز */
.tag-item.highlight-gold {
    background: rgba(27, 118, 150, 0.08);
    color: #1b7696;
    border-color: rgba(27, 118, 150, 0.2);
}

.tag-item.highlight-gold:hover {
    background: #1b7696;
    color: #fff;
}

/* تحديد ارتفاع ثابت للقسم */
.section-about {
    height: 220px !important;

    /* استخدام !important لضمان تطبيق التنسيق */
    min-height: 420px;

    /* لضمان عدم تقلصه أقل من هذا */
    /* اختيارياً: إذا كان المحتوى يخرج عن الإطار، أضف السطر التالي */
    /* overflow: hidden; */
}

/* جعل الحاوية مرجعاً للعناصر بداخلها */
.custom-frame {
    position: relative;
    z-index: 1;

    /* لضمان أن الصورة في الأمام */
    display: inline-block;

    /* لتأخذ حجم الصورة فقط */
    width: 100%;
}

/* إنشاء الفريم الحر */
.custom-frame::after {
    content: "";
    position: absolute;

    /* أبعاد الفريم (نفس حجم الصورة) */
    width: 100%;
    height: 100%;

    /* خصائص الخط (الفريم) */
    border: 2px solid #1b7696;

    /* لون الهوية */
    border-radius: 20px;

    /* نفس انحناء الصورة */
    /* التحكم في مكان الفريم (الابتعاد عن الصورة) */
    top: 25px;

    /* ينزل للأسفل */
    left: -25px;

    /* يزاح لليسار (عكس اتجاه الصورة) */
    /* الطبقة: خلف الصورة */
    z-index: -1;

    /* حركة ناعمة عند التفاعل */
    transition: all 0.4s ease;
}

/* تأثير حركي عند مرور الماوس (اختياري) */
.custom-frame:hover::after {
    top: 10px;
    left: -10px;
    border-color: #23a6d5;

    /* تغيير اللون قليلاً */
}

/* ==================== Modern Ecosystem Style with Ring BG ==================== */
.: radial-gradient(circle at left, rgba(27, 118, 150, 0.08), transparent 60%);
background-imagebackground-imagebackground-imagebackground-imagebackground-imagebackground-imagebackground-imagebackground-imagebackground-image: -250px;
leftleftleftleftleftleftleftleft: 50%;
toptoptoptoptoptoptop: translateY(-20%);
transformtransformtransformtransformtransformtransform: 0;
z-indexz-indexz-indexz-indexz-index: none;
pointer-eventspointer-eventspointer-eventspointer-events: 0.1;

opacityopacityopacity

    /* شفافية لدمجها مع الخلفية */

/* ضمان ظهور المحتوى فوق الخلفية */
.z-1 {
    z-index: 1;
}

/* 1. الشعار الرئيسي (كبير 180px) */
.main-node-container {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.main-logo-img-large img {
    height: 200px;
    width: auto;
    filter: drop-shadow(0 0 30px rgba(27, 118, 150, 0.5));
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.main-logo-img-large img:hover {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 0 50px rgba(27, 118, 150, 0.7));
}

/* 2. حاوية الخطوط العريضة */
.network-svg-container-wide {
    width: 100%;
    height: 140px;
    margin-top: -9px;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.flow-line {
    fill: none;
    stroke: #1b7696;
    stroke-width: 1.5;
    stroke-dasharray: 10;
    animation: flowLineAnim 2s linear infinite;
    opacity: 0.6;
}

@keyframes flowLineAnim {
    to {
        stroke-dashoffset: -20;
    }
}

/* 3. شبكة الشعارات (بدون حاويات - ألوان طبيعية) */
.partners-grid-pure {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin-top: 30px;
    position: relative;
    z-index: 5;
}

.logo-only {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.logo-only img {
    max-width: 180px;
    max-height: 150px;
    object-fit: contain;
    filter: none !important;
    opacity: 0.9;
    transition: all 0.4s ease;
}

.logo-only:hover img {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
}

/* الموبايل */
@media (max-width: 991px) {
    .main-logo-img-large img {
        height: 120px;
    }

    .partners-grid-pure {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* تعديل موقع الخلفية في الموبايل */
    .modern-ring-bg {
        left: -150px;
        opacity: 0.5;
    }

    /* تنسيق الخط نفسه */
    .structure-line {
        stroke: url(#line-solid-grad);

        /* التنسيقات السابقة (للتذكير) */
        .modern-glow-line-top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, rgba(27, 118, 150, 0) 0%, #1b7696 50%, rgba(27, 118, 150, 0) 100%);
            box-shadow: 0 0 10px #1b7696;
            z-index: 10;
        }

        .section-bg-folder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .hierarchy-main-wrapper {
            position: relative;
            z-index: 2;
        }

        /* تنسيق SVG لملء المساحة بالكامل */
        .diagram-lines-final {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;

            /* رفع الطبقة لتكون فوق الخلفية */
            pointer-events: none;

            /* لضمان عدم منع النقر على العناصر */
        }

        /* تنسيق الخطوط المشعة الجديدة */
        .structure-line-bright {
            stroke: url(#line-glow-light);

            /* استخدام التدرج الفاتح */
            stroke-width: 3px;

            /* زيادة السماكة قليلاً */
            fill: none;
            opacity: 0.9;

            /* شفافية عالية للوضوح */
            stroke-linecap: round;
        }

        /* التأكد من أن النصوص والشعارات فوق الخطوط */
        .level-1-header,
        .level-2-logos,
        .level-3-images,
        .operational-wide-box {
            position: relative;
            z-index: 5;

            /* رقم كبير لضمان الظهور فوق الخطوط */
        }
    }
}

/* --- العناوين --- */
.title-inline-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.title-inline-box .title {
    font-size: 52px;
    font-weight: 800;
}

.success-box-identity {
    background-color: var(--brand-light);
    color: var(--brand-primary);
    padding: 5px 35px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    border-radius: 0px;
}

/* --- 1. تعديل حاوية العنوان لتكون مرجعاً للموقع --- */
.level-1-header {
    position: relative;

    /* ضروري جداً لظهور الدائرة في مكانها */
    padding-bottom: 50px;

    /* مساحة إضافية تحت النص لتستقر فيها الدائرة */
    z-index: 5;
}

/* --- 2. تعديل مكان الدائرة النابضة --- */
.pulse-node-fixed {
    position: absolute;
    left: 50%;

    /* تحريك الدائرة لتكون أسفل العنوان بالضبط، عند بداية الخطوط */
    bottom: -190px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3. تعديل الألوان لضمان الظهور --- */
.dot-core {
    width: 14px;
    height: 14px;
    background: #1b7696;

    /* لون صريح بدلاً من المتغير */
    border-radius: 50%;
    box-shadow: 0 0 15px #1b7696;
    position: relative;
    z-index: 2;
}

.dot-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border: 2px solid #1b7696;

    /* لون صريح */
    border-radius: 50%;
    animation: master-pulse 2s infinite ease-out;
    z-index: 1;
}

@keyframes master-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

/* --- الشعارات والصور --- */
.level-2-logos {
    margin-top: 380px;
}

.logo-item-node {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-natural {
    max-width: 220px;
    max-height: 120px;
    object-fit: contain;
}

.level-3-images {
    margin-top: 120px;
}

.image-box-329 {
    width: 329px;
    height: 199.39px;
    margin: 0 auto;
    background: rgba(27, 118, 150, 0.08);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(27, 118, 150, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.image-box-329 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

/* --- المنظومة العملية (ضبط المسافات) --- */
.operational-wide-box {
    position: relative;
    z-index: 10;

    /* تقليل المسافات العلوية والسفلية */
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(27, 118, 150, 0.1);
}

.op-title {
    font-size: 54px !important;
    font-weight: 800;
    color: #fff;
}

.op-paragraph {
    font-size: 24px;
    line-height: 2.1;
    color: #e0e0e0;
    text-align: right;
    margin-bottom: 20px;
}

.op-paragraph:last-child {
    margin-bottom: 0;
}

/* إلغاء الهامش لآخر فقرة */
.op-blue-underline {
    border-bottom: 3px solid var(--brand-primary);
    padding-bottom: 4px;
    font-weight: 700;
    color: #fff;
}

/* --- خطوط التوصيل والخلفية --- */
.diagram-lines-final {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.glow-line-solid {
    fill: none;
    stroke: url(#line-glow-grad);
    stroke-width: 2px;
}

.final-cyber-grid-identity {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to top, rgba(27, 118, 150, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.mask-custom-left-half {
    position: absolute;
    left: -350px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

/* الموبايل */
@media (max-width: 991px) {
    .section-hierarchy-final {
        padding: 60px 0;
    }

    .image-box-329 {
        width: 100%;
        height: auto;
        aspect-ratio: 329/199.39;
    }

    .diagram-lines-final,
    .pulse-node-fixed {
        display: none;
    }

    .level-2-logos,
    .level-3-images,
    .operational-wide-box {
        margin-top: 40px !important;
    }
}

/* حاوية السكشن */
.section-modern-separator {
    width: 100%;
    padding: 60px 0;

    /* مساحة مريحة */
    background: transparent;

    /* بدون خلفية */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* حاوية الكلمات */
.modern-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    /* يسمح بالنزول للأسفل في الشاشات الصغيرة */
    gap: 25px;

    /* المسافة المبدئية بين العناصر */
}

/* تنسيق الكلمات */
.word-item {
    font-size: 5vw;

    /* حجم كبير متجاوب */
    font-weight: 900;
    color: #1b7696;
    font-family: 'Cairo', sans-serif;
    line-height: 1;
    text-transform: uppercase;
}

/* تنسيق الكلمة المفرغة (Stroke) - اختياري لجمالية مودرن */
.stroke-style {
    color: transparent;
    -webkit-text-stroke: 2px #1b7696;
}

/* النقطة النابضة (الفاصل) */
.modern-dot {
    width: 12px;
    height: 12px;
    background-color: #1b7696;
    border-radius: 50%;
    position: relative;
    margin-top: 10px;

    /* ضبط محاذاة بسيط مع النص */
    animation: pulse-modern 2s infinite;
}

/* حركة النبض */
@keyframes pulse-modern {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 118, 150, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(27, 118, 150, 0);
        transform: scale(1.2);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(27, 118, 150, 0);
        transform: scale(1);
    }
}

/* تحسينات الجوال */
@media (max-width: 991px) {
    .word-item {
        font-size: 40px;

        /* حجم ثابت ومقروء للجوال */
    }

    .modern-wrapper {
        gap: 15px;
    }

    .modern-dot {
        width: 8px;
        height: 8px;
        margin-top: 5px;
    }
}

/* إعدادات السكشن */
.section-3d-flip-fixed {
    width: 100%;
    padding: 80px 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1000px;

    /* منظور الكاميرا */
}

.flip-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    flex-wrap: wrap;
}

/* الصندوق الخارجي */
.flip-box {
    position: relative;
    display: inline-block;
}

/* النص الشبح لحجز المساحة */
.flip-ghost {
    font-size: 5vw;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block;
    padding: 10px 0;
}

/* العنصر المتحرك */
.flip-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;

    /* الأنيميشن */
    animation: flip-z-index 4s infinite ease-in-out;
}

/* تأخير الحركة (الدومينو) */
.delay-1 {
    animation-delay: 0s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.4s;
}

/* === الأنيميشن الجديد: يقلب ويضبط الطبقات (Z-Index) === */
@keyframes flip-z-index {
    0%,
    45% {
        transform: rotateX(0deg);
    }

    50%,
    95% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(360deg);
    }
}

/* الوجوه */
.flip-front,
.flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* الخصائص النصية */
    font-size: 5vw;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    color: #1b7696;
    line-height: 1;
    text-transform: uppercase;

    /* الحل السحري: إخفاء الظهر بصرامة */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* الوجه الأمامي (إنجليزي) */
.flip-front {
    transform: rotateX(0deg);
    z-index: 2;

    /* في البداية هو في الأعلى */
}

/* الوجه الخلفي (عربي) */
.flip-back {
    transform: rotateX(180deg);
    z-index: 1;

    /* تعديل بسيط لضمان عدم ظهوره مقلوباً */
    direction: rtl;

    /* لضمان اتجاه النص العربي */
}

/* الستايلات الإضافية */
.stroke-style {
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
}

.modern-dot {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 118, 150, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(27, 118, 150, 0);
        transform: scale(1.2);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(27, 118, 150, 0);
        transform: scale(1);
    }
}

/* للجوال */
@media (max-width: 991px) {
    .flip-front,
    .flip-back,
    .flip-ghost {
        font-size: 40px;
    }

    .flip-wrapper {
        gap: 15px;
    }

    .flip-inner {
        animation-delay: 0s !important;
    }
}

.modern-down-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 45px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    color: #1b7696;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.modern-down-btn:hover {
    background: #1b7696;
    color: #fff;
    border-color: #1b7696;
    transform: translateY(5px);
    box-shadow: 0 15px 30px rgba(27, 118, 150, 0.25);
}

.modern-down-btn .icon-down {
    transition: transform 0.3s ease;
}

.modern-down-btn:hover .icon-down {
    transform: translateY(4px);
}

@media (max-width: 768px) {
    .project-item.hover-image {
        flex-direction: column !important;

        /* تحويل لعمودي في الجوال */
    }

    .project-item .image {
        width: 100% !important;
        height: 250px !important;
        flex: none !important;
    }
}

.logo-item-node {
    height: 400px;

    /* ارتفاع ثابت */
    display: flex;
    align-items: center;

    /* توسط عمودي */
    justify-content: center;

    /* توسط أفقي */
    position: relative;
    top: -0px;

    /* رفع بسيط جداً لضمان التلامس مع الخط */
}

.glow-divider {
    width: 80%;

    /* عرض الخط */
    height: 2px;
    margin: 40px auto;

    /* مسافة فوق وتحت */
    background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);
    box-shadow: 0 0 15px #1b7696, 0 0 30px rgba(27, 118, 150, 0.4);
    opacity: 0.9;
    border-radius: 100%;
}

.glow-line-single {
    width: 80%;
    height: 1px;

    /* ارتفاع قليل جدا لمنع الازدواجية */
    margin: 60px auto 0;

    /* تدرج لوني يعطي تأثير التوهج من المنتصف ويختفي عند الأطراف */
    background: radial-gradient(circle, #1b7696 0%, rgba(27, 118, 150, 0) 100%);

    /* ظل خفيف جدا لتعزيز التوهج دون عمل خط ثان */
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.6);
    opacity: 1;
    border: none;
}

/* 2. تعديل مكان النقطة لتصبح أعلى (140px من الأعلى تقريباً) */
.pulse-node-fixed {
    position: absolute;
    left: 50%;
    top: 80px;

    /* تم الضبط لتكون في مركز تلاقي الخطوط الجديد (140 - نصف القطر) */
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-1-header {
    position: relative;
    padding-bottom: 0px;

    /* إزالة البادينج السفلي */
    z-index: 5;
}

/* باقي الستايلات كما هي */
.dot-core {
    width: 14px;
    height: 14px;
    background: #1b7696;
    border-radius: 50%;
    box-shadow: 0 0 15px #1b7696;
    position: relative;
    z-index: 2;
}

.dot-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border: 2px solid #1b7696;
    border-radius: 50%;
    animation: master-pulse 2s infinite ease-out;
    z-index: 1;
}

@keyframes master-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

.glow-line-single {
    width: 80%;
    height: 1px;
    margin: 60px auto 0;
    background: radial-gradient(circle, #1b7696 0%, rgba(27, 118, 150, 0) 100%);
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.6);
    opacity: 1;
    border: none;
}

/* تنسيق الحاوية لتكون العناصر بجانب بعضها */
.title-inline-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    /* مسافة بين الكلمتين */
    margin-bottom: 20px;

    /* مسافة تحت العنوان */
}

/* تنسيق كلمة ركائز */
.title-inline-box .title {
    font-size: 52px;
    font-weight: 800;
    color: #fff;

    /* لون أبيض */
}

/* تنسيق صندوق "النجاح" ليظهر بوضوح */
.success-box-identity {
    background-color: #1b759674/* لون الخلفية (التركواز) */;
    color: #ffffff;

    /* #85d7d627نص (أبيض) */
    padding: 10px 30px;

    /* مساحة داخلية للصندوق */
    font-size: 52px;

    /* نفس حجم خط العنوان */
    font-weight: 900;
    line-height: 1;
    display: inline-block;

    /* ضروري لظهور الخلفية */
    border-radius: 0px;

    /* حواف ناعمة قليلاً */
    box-shadow: 0 5px 15px rgba(27, 118, 150, 0.3);

    /* ظل خفيف لإبراز الصندوق */
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .title-inline-box .title,
    .success-box-identity {
        font-size: 32px;

        /* تصغير الخط في الجوال */
        padding: 5px 15px;
    }
}

/* =========================================
   تنسيق رأس الفوتر (ثابت ومودرن)
   ========================================= */
.footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
    padding: 60px 0;

    /* مساحة جيدة فوق وتحت */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.footer-cta-modern {
    position: relative;
    z-index: 2;
    text-align: center;
}

.cta-title {
    font-size: 70px;

    /* حجم كبير وواضح */
    font-weight: 900;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    /* مسافة بين العربي والإنجليزي */
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* تنسيق النص الإنجليزي (المفرغ) */
.cta-stroke {
    -webkit-text-stroke: 2px #1b7696;

    /* حدود تركواز */
    color: transparent;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    transition: all 0.5s ease;
    letter-spacing: 2px;
}

/* =========================================
   الحركة المودرن (Effect)
   ========================================= */
/* 1. إنشاء نسخة خلفية للتعبئة */
.cta-stroke::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;

    /* تبدأ مخفية */
    height: 100%;
    color: #1b7696;

    /* لون التعبئة */
    overflow: hidden;
    transition: width 0.5s ease;
    border-right: 2px solid #fff;

    /* خط بسيط يسبق التعبئة */
    white-space: nowrap;
}

/* عند مرور الماوس على العنوان بالكامل */
.footer-cta-modern:hover .cta-title {
    transform: scale(1.05);

    /* تكبير ناعم للكلمة بالكامل */
}

/* عند مرور الماوس: املأ النص الإنجليزي */
.footer-cta-modern:hover .cta-stroke::before {
    width: 100%;

    /* امتلاء كامل */
}

.footer-cta-modern:hover .cta-stroke {
    text-shadow: 0 0 30px rgba(27, 118, 150, 0.6);

    /* إضافة توهج خلفي */
}

/* =========================================
   تجاوب مع الجوال
   ========================================= */
@media (max-width: 768px) {
    .cta-title {
        font-size: 32px;

        /* تصغير الخط للجوال */
        flex-direction: column;

        /* ترتيب عمودي في الجوال */
        gap: 10px;
    }

    .cta-stroke {
        -webkit-text-stroke: 1px #1b7696;
    }
}

/* =========================================
   إعدادات الفوتر العامة
   ========================================= */
.footer-inner {
    background-color: #04070b;

    /* خلفية داكنة */
    color: #fff;
    padding-top: 50px;
    direction: rtl;

    /* اتجاه عربي */
    overflow: hidden;
}

/* =========================================
   1. تواصل معنا (Modern Static Effect)
   ========================================= */
.footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 50px;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-cta-modern {
    text-align: center;
    cursor: default;
}

.cta-title {
    font-size: 65px;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.5s ease;
}

.cta-stroke {
    -webkit-text-stroke: 2px #1b7696;
    color: transparent;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
}

.cta-stroke::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    color: #1b7696;
    overflow: hidden;
    transition: width 0.5s ease;
    border-right: 2px solid #fff;
}

.footer-cta-modern:hover .cta-title {
    transform: scale(1.05);
}

.footer-cta-modern:hover .cta-stroke::before {
    width: 100%;
}

.footer-cta-modern:hover .cta-stroke {
    text-shadow: 0 0 25px rgba(27, 118, 150, 0.6);
}

/* =========================================
   2. تقسيم الفوتر (خريطة يسار - نصوص يمين)
   ========================================= */
.footer-middle {
    display: flex;
    flex-wrap: wrap;

    /* الحيلة لقلب الترتيب في RTL: الخريطة أولاً في HTML ستذهب لليسار */
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 50px;
    padding-bottom: 40px;
}

/* --- الجانب الأيسر (الخريطة والسوشيال) --- */
.footer-left-block {
    flex: 1;
    min-width: 320px;
    max-width: 450px;
}

.map-container {
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.map-container:hover {
    border-color: #1b7696;
    box-shadow: 0 5px 20px rgba(27, 118, 150, 0.2);
}

/* السوشيال ميديا */
.social-icons-list {
    display: flex;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.social-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.social-icon:hover {
    background: #1b7696;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(27, 118, 150, 0.4);
}

/* --- الجانب الأيمن (النصوص) --- */
.footer-right-block {
    flex: 1.5;
    display: flex;
    justify-content: flex-end;

    /* محاذاة المحتوى لليمين */
    gap: 60px;
    text-align: right;
}

/* الروابط */
.support-item-footer a {
    color: #b0b0b0;
    transition: 0.3s;
    line-height: 2.4;
    display: block;
}

.support-item-footer a:hover {
    color: #1b7696;
    padding-right: 5px;
}

/* أرقام الهواتف */
.phones-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.phone-link {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
    direction: ltr;

    /* للأرقام */
    text-align: right;
}

.phone-link:hover {
    color: #1b7696;
}

/* =========================================
   الفوتر السفلي
   ========================================= */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    margin-top: 20px;
}

.list-bottom ul li a {
    color: #b0b0b0;
    margin: 0 10px;
    transition: 0.3s;
}

.list-bottom ul li a:hover {
    color: #1b7696;
}

/* =========================================
   تجاوب الجوال
   ========================================= */
@media (max-width: 991px) {
    .footer-middle {
        flex-direction: column-reverse;

        /* عكس الترتيب في الجوال */
        text-align: center;
    }

    .footer-right-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .phone-link {
        text-align: center;
    }

    .social-icons-list {
        justify-content: center;
    }

    .cta-title {
        font-size: 32px;
        flex-direction: column;
        gap: 10px;
    }

    .cta-stroke {
        -webkit-text-stroke: 1px #1b7696;
    }
}

/* تنسيق الحاوية لضمان تراكب العناصر */
.wrap-loader {
    position: relative;
    width: 100px;

    /* تأكد أن هذا الحجم يطابق حجم الدائرة */
    height: 100px;

    /* تأكد أن هذا الحجم يطابق حجم الدائرة */
    margin: 0 auto;
}

/* تنسيق الدائرة الدوارة لتملأ الحاوية */
.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    /* تأكد من وجود بقية خصائص الـ animation والـ border هنا كما هي */
    box-sizing: border-box;
}

/* تنسيق أيقونة الشعار لتتوسط الحاوية بدقة */
.wrap-loader .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* هذا السطر هو السر في التوسط الدقيق */
    z-index: 2;

    /* لضمان ظهور الشعار فوق الدائرة */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* اختياري: لضبط المحاذاة */
}

/* ضبط حجم الصورة إن لزم الأمر */
.wrap-loader .icon img {
    max-width: 60px;

    /* عدل هذا الرقم ليناسب حجم الدائرة بحيث لا يلمس الحواف */
    height: auto;
}

.whatsapp-btn-footer {
    border-color: rgba(255,255,255,0.35) !important;
    transition: all .25s ease;
}

.footer-inner {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.footer-section {
    background: transparent !important;
}

.glow-box {
    position: relative;
    padding: 60px 50px;
    border-radius: 24px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(27,118,150,0.35);
    box-shadow: 0 0 20px rgba(27,118,150,0.25),
    inset 0 0 20px rgba(27,118,150,0.15);
}

/* الإطار المتوهج المتحرك */
.glow-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(27, 117, 150, 0),
    transparent 80%
  );
    filter: blur(18px);
    opacity: 0.7;
    z-index: -1;
    animation: glow-move 6s linear infinite;
}

@keyframes glow-move{
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* تنسيق الكلمات */
.tag-item.interactive-tag {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
    border-bottom: 1px dashed rgba(27, 118, 150, 0.3);

    /* تلميح بأنها قابلة للنقر */
}

/* عند التفاعل */
.tag-item.interactive-tag:hover,
.tag-item.interactive-tag.active {
    background-color: #1b7696 !important;
    color: #fff !important;
    border-bottom: 1px solid transparent;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(27, 118, 150, 0.4);
    z-index: 10;
}

/* تصميم المربع (النوتة) */
.modern-tooltip {
    position: fixed;

    /* Fixes positioning issues */
    background: rgba(13, 20, 30, 0.95);

    /* لون داكن فخم */
    color: #fff;
    padding: 15px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    max-width: 260px;
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(27, 118, 150, 0.6);

    /* إطار بلون الهوية */
    backdrop-filter: blur(10px);
    z-index: 999999;

    /* فوق كل شيء */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    direction: rtl;

    /* لضمان اتجاه النص العربي */
}

/* السهم */
.modern-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
}

/* سهم يشير للأسفل (عندما تكون النوتة فوق) */
.modern-tooltip.position-top::after {
    top: 100%;
    border-color: rgba(27, 118, 150, 0.6) transparent transparent transparent;
}

/* سهم يشير للأعلى (عندما تكون النوتة تحت) */
.modern-tooltip.position-bottom::after {
    bottom: 100%;
    border-color: transparent transparent rgba(27, 118, 150, 0.6) transparent;
}

/* إظهار */
.modern-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* تنسيق العلامة المائية الحرة */
.watermark-bg-free {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);

    /* توسيط + ميلان خفيف */
    width: 120%;

    /* أكبر من السكشن لضمان التغطية */
    max-width: 1200px;
    opacity: 0.04;

    /* شفافية منخفضة جداً */
    pointer-events: none;
    z-index: 0;
}

.watermark-bg-free img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
}

/* تنسيق النصوص */
.about-mini-section {
    background: #090F16;

    /* لون الخلفية */
}

.about-line.main-line {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.6;
}

.about-line.sub-line {
    color: #aebccc;
    font-size: 18px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 10px auto;
}

.identity-text {
    color: #1b7696;
    position: relative;
    display: inline-block;
}

/* التوهج الجانبي */
.about-glow-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(27, 118, 150, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.blob-1 {
    top: -100px;
    left: -100px;
}

.blob-2 {
    bottom: -100px;
    right: -100px;
}

/* تنسيق العلامة المائية المشتركة */
.watermark-bg-free-shared {
    position: absolute;
    top: 20%;

    /* بداية الظهور من الأعلى */
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    width: 100%;
    max-width: 1400px;
    height: 150%;

    /* تمتد لتغطي القسمين */
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.watermark-bg-free-shared img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);

    /* تحسين للجوال: تصغير الخط قليلاً حتى لا يخرج عن الشاشة */
    @media (max-width: 991px) {
        .about-line {
            font-size: 2.0rem;
            line-height: 1.5;
        }

        .tf-container-wide {
            width: 100%;
        }
    }
}

/* تنسيق النصوص */
.op-paragraph {
    color: #aebccc;
    font-size: 17px;
    line-height: 1.9;
    text-align: right;

    /* محاذاة لليمين */
}

/* تمييز النصوص بلون الهوية */
.highlight-text {
    color: #1b7696;
    font-weight: 700;

    /* Bold */
    position: relative;
}

/* شبكة الصور (Mosaic Grid) */
.mosaic-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    /* 4 أعمدة */
    grid-template-rows: repeat(3, 140px);

    /* ارتفاع الصف */
    gap: 15px;
}

.mosaic-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s ease;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: grayscale(20%);

    /* تأثير رمادي خفيف */
}

/* أحجام الصور المختلفة */
.mosaic-item.item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.mosaic-item.item-wide {
    grid-column: span 2;
}

.mosaic-item.item-tall {
    grid-row: span 2;
}

/* تأثيرات الهوفر */
.mosaic-item:hover {
    transform: translateY(-5px);
    border-color: #1b7696;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.mosaic-item:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* التجاوب مع الموبايل */
@media (max-width: 991px) {
    .heading-section,
    .op-content {
        text-align: center !important;

        /* توسيط في الموبايل */
    }

    .op-paragraph {
        text-align: center !important;
    }

    .mosaic-gallery {
        margin-top: 40px;
        grid-template-columns: repeat(2, 1fr);

        /* عمودين فقط */
        grid-template-rows: auto;
    }

    .mosaic-item.item-large,
    .mosaic-item.item-wide,
    .mosaic-item.item-tall {
        grid-column: span 1;
        grid-row: span 1;
        height: 200px;
    }
}

/* ✅ نزّل محتوى النص تحت الصورة */
.wg-project-details .details-content {
    display: flex;
    flex-direction: column !important;
}

.wg-project-details .details-content .left {
    width: 100% !important;
    margin-top: 28px;
}

/* لو عندك العمود اليمين (box-info) خليهو تحت كمان */
.wg-project-details .details-content .right {
    width: 100% !important;
    margin-top: 18px;
}

/* احتياط: لو في transform رافع العنصر */
.wg-project-details .details-content,
.wg-project-details .details-content .left,
.wg-project-details .details-content .right {
    transform: none !important;
}

/* اجعل النص بنفس عرض الصورة */
.wg-project-details .details-content {
    display: flex;
    flex-direction: column;
}

.wg-project-details .details-content .left {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}

.wg-project-details .left .desc span,
.wg-project-details .left .desc p {
    font-size: 22px;
    line-height: 1.9;
    color: rgba(255,255,255,0.9);
}

@media (max-width: 999px){
    .wg-project-details .left .desc span,
    .wg-project-details .left .desc p {
        font-size: 17px;
    }
}

/* إزالة تأثير تقسيم السطر */
.desc-flex {
    display: block !important;

    /* ❗ أهم سطر */
    width: 100%;
}

/* نخلي حرف "م" عنصر مستقل */
.desc-flex .frame-item {
    display: inline-block;
    margin-left: 12px;

    /* مسافة بسيطة */
    vertical-align: top;
}

/* النص يمتد للنهاية */
.desc-flex .lh-30 {
    display: inline;
    width: auto;
    max-width: none;
}

/* فك أي قيود عرض */
.details-content,
.details-content .left,
.details-content .desc {
    width: 100% !important;
    max-width: 100% !important;
}

.about-left-premium p,
.about-left-premium .desc span {
    text-align: justify;
    text-justify: inter-word;
}

/* ===== Editorial Intro Paragraph ===== */
.about-left-premium .intro-paragraph {
    width: 100%;
    max-width: 100%;
    font-size: 22px;
    line-height: 2;
    margin-bottom: 28px;
    text-align: justify;
    text-justify: inter-word;
}

/* Drop Cap حقيقي للحرف الأول */
.about-left-premium .intro-paragraph::first-letter {
    float: right;

    /* مهم للعربي */
    font-size: 78px;

    /* حجم الحرف */
    line-height: 0.9;
    font-weight: 800;
    margin-left: 14px;
    margin-top: 6px;
    color: #1b7696;

    /* لون مميز */
}

/* باقي الفقرات */
.about-left-premium p:not(.intro-paragraph) {
    font-size: 18px;
    line-height: 1.9;
    opacity: 0.9;
    margin-bottom: 18px;
    text-align: justify;
}

/* موبايل */
@media (max-width: 768px){
    .about-left-premium .intro-paragraph {
        font-size: 18px;
    }

    .about-left-premium .intro-paragraph::first-letter {
        font-size: 52px;
        margin-top: 4px;
    }
}

/* --- إعدادات السكشن --- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600;700&display=swap');

.operational-full-section {
    padding: 100px 0;
    background-color: transparent;
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* 1. تنسيق الصندوق العلوي (رسالتنا + منظومتنا) */
.op-header-box {
    background-color: #0F1620;
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.text-wrap {
    padding: 0 20px;
}

.border-left-custom {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.op-title {
    color: #1b7696;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.op-desc {
    color: #aebccc;
    font-size: 16px;
    line-height: 1.8;
}

/* 2. تنسيق كروت الخدمات (الكود المضاف) */
.services-item-custom {
    flex: 1 1 300px;

    /* تمدد مرن */
    max-width: 350px;
    background: #121a25;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.services-item-custom:hover {
    background: #0F1620;
    border-color: #1b7696;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(27, 118, 150, 0.15);
}

.icon-box {
    margin-bottom: 20px;
}

.icon-box svg {
    transition: all 0.3s ease;
}

.services-item-custom:hover .icon-box svg {
    stroke: #fff;

    /* تغيير لون الأيقونة عند الهوفر */
    transform: scale(1.1);
}

.service-title {
    margin-bottom: 15px;
}

.service-title a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.services-item-custom:hover .service-title a {
    color: #1b7696;
}

.service-desc {
    color: #aebccc;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;

    /* لتوحيد ارتفاع الكروت */
}

.bottom-link a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.bottom-link a .plus {
    font-size: 18px;
    color: #1b7696;
}

.bottom-link a:hover {
    color: #1b7696;
    gap: 8px;

    /* حركة عند الهوفر */
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .border-left-custom {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .op-header-box {
        padding: 30px;
    }
}

/* --- استيراد خط Alexandria --- */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;600;700;800&display=swap');

/* تطبيق الخط على السكشن بالكامل */
.operational-full-section {
    padding: 100px 0;
    background-color: transparent;
    font-family: 'Alexandria', sans-serif !important;
}

/* تطبيق الخط بقوة على العناوين والنصوص */
.op-title,
.op-desc,
.service-title,
.service-desc,
.bottom-link,
.title,
.sub-title {
    font-family: 'Alexandria', sans-serif !important;
}

/* تنسيق الصناديق العلوية (رسالتنا ومنظومتنا) */
.op-box-item {
    padding: 50px 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dark-bg {
    background-color: #0F1620;

    /* لون داكن */
}

.darker-bg {
    background-color: #121a25;

    /* لون أفتح قليلاً للتباين */
}

.border-right-custom {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.op-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.op-desc {
    color: #aebccc;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

/* تنسيق كروت الخدمات */
.services-item-custom {
    flex: 1 1 300px;
    max-width: 350px;
    background: #121a25;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.services-item-custom:hover {
    background: #0F1620;
    border-color: #1b7696;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(27, 118, 150, 0.15);
}

/* كرت الاستوديو المميز */
.services-item-custom.highlight-card {
    background: linear-gradient(135deg, #1b7696 0%, #124e66 100%);

    /* لون الهوية */
    border: none;
    box-shadow: 0 10px 30px rgba(27, 118, 150, 0.3);
}

.services-item-custom.highlight-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.icon-box {
    margin-bottom: 20px;
}

.service-title {
    margin-bottom: 15px;
}

.service-title a {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.services-item-custom:hover .service-title a {
    color: #1b7696;
}

.services-item-custom.highlight-card:hover .service-title a {
    color: #fff;
}

/* استثناء الاستوديو */
.service-desc {
    color: #aebccc;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

.bottom-link a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.bottom-link a .plus {
    font-size: 18px;
    color: #1b7696;
}

.services-item-custom.highlight-card .bottom-link a .plus {
    color: #fff;
}

.bottom-link a:hover {
    gap: 8px;
    color: #1b7696;
}

.services-item-custom.highlight-card .bottom-link a:hover {
    color: #e0e0e0;
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .border-right-custom {
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    .op-box-item {
        padding: 30px;
    }
}

/* --- تنسيقات سكشن الشعار (كبير وشفاف) --- */
.modern-logo-section {
    padding: 100px 0;
    background: transparent !important;

    /* إزالة الخلفية نهائياً */
    position: relative;
    overflow: visible;

    /* السماح للمؤثرات بالخروج عن الحدود */
    text-align: center;
    border: none;
    box-shadow: none;
}

.logo-wrapper-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

/* تكبير صندوق الشعار */
.logo-box {
    position: relative;
    width: 550px;

    /* حجم كبير جداً */
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* تنسيق الصورة */
.big-logo-img {
    width: 100%;

    /* تأخذ كامل مساحة الصندوق */
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 10;

    /* ظل قوي ليبرز الشعار بدون خلفية */
    filter: drop-shadow(0 0 30px rgba(27, 118, 150, 0.5));
    transition: transform 0.5s ease;
}

.logo-box:hover .big-logo-img {
    transform: scale(1.05);
}

/* --- المؤثرات (تم تكبيرها لتناسب الحجم الجديد) --- */
.pulse-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;

    /* نسبة من الحجم الجديد */
    height: 80%;
    background: rgba(27, 118, 150, 0.15);
    border-radius: 50%;
    filter: blur(60px);

    /* زيادة التمويه */
    animation: pulseGlow 4s infinite ease-in-out;
    z-index: 1;
}

.ripple-effect span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 1px solid rgba(27, 118, 150, 0.4);

    /* تخفيف حدة الخط */
    border-radius: 50%;
    animation: ripple 4s infinite linear;
    z-index: 0;
    opacity: 0;
}

.ripple-effect span:nth-child(1) {
    animation-delay: 0s;
}

.ripple-effect span:nth-child(2) {
    animation-delay: 1.2s;
}

.ripple-effect span:nth-child(3) {
    animation-delay: 2.4s;
}

/* الأنيميشن */
@keyframes pulseGlow {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes ripple {
    0% {
        width: 80%;
        height: 80%;
        opacity: 0.7;
        border-width: 2px;
    }

    100% {
        width: 180%;

        /* انتشار أوسع */
        height: 180%;
        opacity: 0;
        border-width: 0px;
    }
}

/* تجاوب للموبايل (تصغير الحجم قليلاً حتى لا يخرج عن الشاشة) */
@media (max-width: 768px) {
    .logo-box {
        width: 350px;
        height: 350px;
    }

    .modern-logo-section {
        padding: 60px 0;
    }
}

/* ===== Global for this block: Alexandria ===== */
.wg-project-details,
.wg-project-details * {
    font-family: "Alexandria", sans-serif !important;
}

/* ===== Corporate typography + spacing ===== */
.wg-project-details .title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
}

/* عنوان القسم الثاني */
.wg-project-details .details-content.content-2 .title {
    font-size: 32px;
    margin-bottom: 18px;
}

/* خلي النص يملأ الحاوية (فك أي max-width) */
.wg-project-details .details-content {
    width: 100%;
}

/* فك حبس العمود */
.wg-project-details .about-left-premium {
    width: 100%;
    max-width: 100% !important;
}

/* فك مشكلة السطور اللي كانت داخل span + flex */
.wg-project-details .desc-flex {
    display: block !important;
}

.wg-project-details .desc-flex span {
    display: block;
    width: 100%;
    white-space: normal;
}

/* نصوص الشركات */
.wg-project-details .desc .lh-30 {
    font-size: 18px;
    line-height: 2;
    margin: 0 0 14px 0;
    color: rgba(255,255,255,0.84);
    text-align: justify;
    text-justify: inter-word;
}

/* مسافة لطيفة بين الفقرات */
.wg-project-details .desc {
    display: grid;
    gap: 12px;
}

/* موبايل */
@media (max-width: 768px){
    .wg-project-details .title {
        font-size: 24px;
    }

    .wg-project-details .details-content.content-2 .title {
        font-size: 22px;
    }

    .wg-project-details .desc .lh-30 {
        font-size: 16px;
        line-height: 1.9;
        text-align: right;
    }
}

/* تكبير نص الفلسفة فقط */
.details-content.content-2 .desc .lh-30 {
    font-size: 22px;

    /* جرّب 18–22 حسب الذوق */
    line-height: 2.1;

    /* قراءة مريحة وفخمة */
}

@media (max-width: 768px){
    .details-content.content-2 .desc .lh-30 {
        font-size: 17px;
        line-height: 1.9;
    }
}

/* --- استيراد خط Alexandria --- */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;600;700;800&display=swap');

.operational-full-section {
    font-family: 'Alexandria', sans-serif !important;
}

/* تنسيق الخط المتوهج العلوي */
.flow-separator-glow {
    background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.8), 0 0 30px rgba(27, 118, 150, 0.4);
    opacity: 0.9;
}

/* تنسيق الكروت */
.services-item-custom {
    flex: 1 1 300px;
    max-width: 350px;
    background: #121a25;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.services-item-custom:hover {
    background: #0F1620;
    border-color: #1b7696;
    transform: translateY(-5px);
}

/* --- تنسيق كرت الاستوديو المميز --- */
.services-item-custom.highlight-card {
    background: linear-gradient(135deg, #1b7696 0%, #124e66 100%) !important;
    border: none;
    box-shadow: 0 10px 30px rgba(27, 118, 150, 0.3);
}

.services-item-custom.highlight-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(27, 118, 150, 0.5);
}

/* النصوص داخل الكروت */
.service-title a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}

.services-item-custom:hover .service-title a {
    color: #1b7696;
}

.services-item-custom.highlight-card:hover .service-title a {
    color: #fff !important;
}

.service-desc {
    color: #aebccc;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.bottom-link a {
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.bottom-link a:hover {
    color: #1b7696;
    gap: 8px;
    transition: 0.3s;
}

.services-item-custom.highlight-card .bottom-link a:hover {
    color: #e0e0e0 !important;
}

/* تنسيق العناوين العلوية */
.dark-bg {
    background-color: #0F1620;
    border-radius: 10px;
    padding: 40px;
    height: 100%;
}

.darker-bg {
    background-color: #121a25;
    border-radius: 10px;
    padding: 40px;
    height: 100%;
}

.op-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.op-desc {
    color: #aebccc;
    line-height: 1.8;
}

/* تصغير حجم عنوان رسالتنا والمنظومة */
.op-title {
    font-size: 28px !important;

    /* كان 24px أو 26px، الآن أصغر */
    margin-bottom: 12px;
}

/* تصغير حجم الأيقونة المرافقة للعنوان */
.op-title i {
    font-size: 22px !important;

    /* تصغير الأيقونة لتناسب النص الجديد */
}

/* (اختياري) تصغير النص الوصفي قليلاً إذا أردت توازناً أكثر */
.op-desc {
    font-size: 20px !important;
}

/* --- تنسيق سكشن الهوية البصرية --- */
.visual-identity-showcase {
    padding: 100px 0;
    position: relative;
    overflow: visible;

    /* للسماح للشعار بالخروج قليلاً */
}

/* الحاوية العامة */
.identity-wrapper {
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* كلاس التفعيل عند السكرول */
.identity-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   تنسيقات سكشن الهوية البصرية (النسخة النهائية - حركة مودرن وتحكم حر بالشعار)
========================================================== */
/* 1. إعدادات السكشن */
.visual-identity-showcase {
    padding: 80px 0;
    position: relative;
    background: transparent !important;
    overflow: visible !important;
}

/* 2. حاوية الحركة (حركة دخول مودرن) */
.identity-wrapper {
    /* الوضع الافتراضي ظاهر (لتجنب اختفاء الصور إذا لم يعمل JS) */
    opacity: 1 !important;
    transform: none !important;

    /* انتقال سلس وعصري مع تأثير ارتداد خفيف */
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* كلاس البداية (قبل الظهور) - يضاف بالجافاسكريبت */
.identity-wrapper.start-anim {
    opacity: 0 !important;

    /* حركة مودرن: تصغير خفيف وإزاحة للأسفل */
    transform: scale(0.92) translateY(60px) !important;
}

/* كلاس النهاية (عند الظهور) - يضاف بالجافاسكريبت */
.identity-wrapper.visible {
    opacity: 1 !important;

    /* العودة للحجم الطبيعي والمكان الأصلي */
    transform: scale(1) translateY(0) !important;
}

/* 3. البانر الرئيسي */
.main-visual-banner {
    width: 100%;
    height: 450px;
    border-radius: 25px;
    position: relative;
    overflow: visible !important;

    /* للسماح بخروج الشعار */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    /* هوامش: مسافة من فوق للشعار، ومسافة من تحت للشعارات */
    margin-top: 120px;
    margin-bottom: 40px;
}

.main-visual-banner .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    transition: transform 0.8s ease;
}

/* الفلتر اللوني (Overlay) */
.main-visual-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(27, 118, 150, 0.7) 0%, rgba(18, 78, 102, 0.8) 100%);
    transition: opacity 0.6s ease;
    border-radius: 25px;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

/* عند الهوفر: اختفاء الفلتر وتكبير الصورة */
.main-visual-banner:hover::after {
    opacity: 0;
}

.main-visual-banner:hover .banner-img {
    transform: scale(1.05);
}

/* 4. الشعار الرئيسي العائم (الخريطة) - تحكم حر */
.floating-map-logo {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;

    /* الحجم */
    width: 380px;
    height: 380px;

    /* --- التحكم الحر في المكان (قم بتعديل هذه القيم) --- */
    top: -190px;

    /* قيمة سالبة للتحريك للأعلى، موجبة للأسفل */
    left: -110px;

    /* قيمة سالبة للتحريك لليسار، موجبة لليمين */
    /* تم إزالة الـ transform لتمكين التحكم الكامل عبر top و left */
}

.floating-map-logo .map-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4));
}

/* النبض */
.pulse-rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: modernPulse 4s infinite linear;
    opacity: 0;
    z-index: 1;
}

.pulse-rings span:nth-child(1) {
    animation-delay: 0s;
}

.pulse-rings span:nth-child(2) {
    animation-delay: 1.3s;
}

@keyframes modernPulse {
    0% {
        width: 80%;
        height: 80%;
        opacity: 0.7;
        border-width: 3px;
    }

    100% {
        width: 180%;
        height: 180%;
        opacity: 0;
        border-width: 0px;
    }
}

/* 5. شبكة الشعارات السفلية */
.partners-logo-grid {
    display: grid;

    /* هذا السطر يضمن وجود 4 أعمدة متساوية بالعرض */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.partner-box {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 15px;
    transition: all 0.4s ease;

    /* زجاجي */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* شادو ملون خفيف */
    box-shadow: 0 10px 30px rgba(27, 118, 150, 0.1);
}

.partner-box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;

    /* شادو للصورة نفسها بلون الهوية */
    filter: drop-shadow(0 4px 8px rgba(27, 118, 150, 0.3));
    transition: 0.3s;
}

.partner-box:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: rgba(27, 118, 150, 0.6);

    /* توهج الشادو عند الهوفر */
    box-shadow: 0 15px 40px rgba(27, 118, 150, 0.25);
}

.partner-box:hover img {
    transform: scale(1.1);
}

/* --- الموبايل --- */
@media (max-width: 991px) {
    .main-visual-banner {
        margin-top: 100px;
        height: 300px;
    }

    .floating-map-logo {
        width: 180px;
        height: 180px;

        /* إعادة التموضع للموبايل */
        top: -40px;
        left: 50%;
        transform: translateX(-50%);

        /* توسيط أفقي فقط */
    }

    /* في الموبايل نجعلهم 2 بجانب 2 */
    .partners-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.partner-box:hover img {
    transform: scale(1.1);
}

/* الموبايل */
@media (max-width: 991px) {
    .main-visual-banner {
        height: 300px;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .floating-map-logo {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .partners-logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* حاوية العلامة المائية */
.watermark-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* جعل الحاوية مرنة لتوسيط الشعار */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;

    /* خلف النصوص */
    pointer-events: none;

    /* لا يؤثر على الماوس */
    /* هذا السطر مهم: يسمح للشعار بالخروج عن حدود الحاوية */
    overflow: visible;
}

/* تنسيق صورة الشعار نفسها */
.watermark-container img {
    /* حجم كبير جداً وثابت */
    width: 4200px;

    /* يمكنك زيادة هذا الرقم لتكبير الشعار أكثر */
    max-width: none;

    /* إلغاء القيد على العرض */
    height: auto;
    opacity: 0.01;

    /* شفافية خفيفة جداً */
    /* ضمان التمركز حتى لو كان الشعار أكبر من الشاشة */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: grayscale(100%);

    /* اختياري */
}

/* =========================================
   تنسيق المشاريع السينمائية (المواصفات الخاصة)
========================================= */
.projects-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 30px;

    /* مسافة بين كل مشروع */
}

/* حاوية الكرت الرئيسية */
.project-card-cinematic {
    position: relative;
    width: 100%;

    /* الارتفاع المحدد حسب طلبك */
    height: 675px;
    overflow: hidden;
    border-radius: 20px;

    /* حواف ناعمة */
    direction: rtl;
    background-color: #0F1620;

    /* لون الخلفية الداكن */
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

/* طبقة الصورة الخلفية */
.project-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.project-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* ملء المساحة بالكامل */
    /* تركيز الصورة لليسار قليلاً عشان النص في اليمين */
    object-position: 20% center;
    transition: transform 1.2s ease;
}

/* زوم عند الهوفر */
.project-card-cinematic:hover .project-bg-img img {
    transform: scale(1.05);
}

/* طبقة التدرج (الظل) خلف النص */
.project-overlay-gradient {
    position: absolute;
    top: 0;
    right: 0;

    /* الظل يغطي 60% من العرض عشان الكلام يبان */
    width: 60%;
    height: 100%;
    z-index: 2;

    /* تدرج من اليمين (غامق) إلى اليسار (شفاف) */
    background: linear-gradient(270deg, #0F1620 40%, rgba(15, 22, 32, 0.9) 70%, transparent 100%);
}

/* محتوى النص (يمين) */
.project-content-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;

    /* مساحة النص */
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* توسيط عمودي */
    padding: 0 60px 0 0;

    /* هوامش لليمين */
}

.project-title {
    font-size: 45px;

    /* خط كبير للعنوان */
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Alexandria', sans-serif;
}

.project-subtitle {
    font-size: 20px;
    color: #1b7696;
    margin-bottom: 30px;
    display: block;
    font-weight: 600;
}

/* القائمة النقطية */
.project-desc-list {
    list-style: none;
    padding: 0;
}

.project-desc-list li {
    font-size: 17px;
    color: #cfcfcf;
    margin-bottom: 15px;
    line-height: 1.8;
    position: relative;
    padding-right: 20px;
}

.project-desc-list li::before {
    content: '•';
    color: #1b7696;
    font-size: 25px;
    position: absolute;
    right: 0;
    top: -5px;
}

/* بوكس الشعار (أسفل اليسار) */
.client-logo-badge {
    position: absolute;

    /* المكان: أسفل اليسار */
    bottom: 40px;
    left: 40px;
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding: 15px;
    transition: transform 0.4s ease;
}

.client-logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* حركة الشعار عند الهوفر */
.project-card-cinematic:hover .client-logo-badge {
    transform: translateY(-10px);
}

/* --- الموبايل --- */
@media (max-width: 991px) {
    .project-card-cinematic {
        height: auto;
        min-height: 700px;
        display: flex;
        flex-direction: column;
    }

    .project-bg-img {
        position: relative;
        height: 300px;

        /* الصورة فوق */
    }

    .project-overlay-gradient {
        display: none;

        /* إخفاء التدرج الجانبي */
    }

    .project-content-wrap {
        position: relative;
        width: 100%;
        background: #0F1620;
        padding: 40px 20px;
    }

    .client-logo-badge {
        bottom: auto;
        top: -70px;

        /* يرفع الشعار ليكون بين الصورة والنص */
        left: 30px;
        width: 100px;
        height: 100px;
    }
}

/* =========================================
   تنسيق شبكة المشاريع (Grid 2 Columns)
========================================= */
/* الشبكة الرئيسية: عمودين متساويين */
.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    /* 50% يمين - 50% يسار */
    gap: 30px;

    /* مسافة بين الكروت */
    width: 100%;
    margin-top: 40px;
}

/* تنسيق الكرت السينمائي */
.project-card-cinematic {
    position: relative;
    width: 100%;
    height: 500px;

    /* ارتفاع مناسب للعمودين */
    border-radius: 20px;
    overflow: hidden;
    background-color: #0F1620;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    /* حركة الدخول */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.project-card-cinematic.visible {
    opacity: 1;
    transform: translateY(0);
}

/* خلفية الصورة */
.project-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.project-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.project-card-cinematic:hover .project-bg-img img {
    transform: scale(1.05);
}

/* التدرج اللوني (الظل) */
.project-overlay-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;

    /* زيادة العرض قليلاً لأن الكرت أصغر */
    height: 100%;
    background: linear-gradient(270deg, #0F1620 30%, rgba(15, 22, 32, 0.8) 60%, transparent 100%);
    z-index: 2;
}

/* النصوص */
.project-content-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;

    /* النص يأخذ راحته */
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px 0 0;

    /* هوامش داخلية */
}

.project-title {
    font-size: 28px;

    /* تصغير الخط ليتناسب مع حجم الكرت الجديد */
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Alexandria', sans-serif;
    max-width: 70%;

    /* منع النص من تغطية الصورة بالكامل */
}

.project-subtitle {
    font-size: 16px;
    color: #1b7696;
    margin-bottom: 20px;
    font-weight: 600;
}

.project-desc-list li {
    font-size: 14px;
    color: #cfcfcf;
    margin-bottom: 8px;
    position: relative;
    padding-right: 15px;
    max-width: 65%;
}

.project-desc-list li::before {
    content: '•';
    color: #1b7696;
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 20px;
}

/* الشعار (أسفل اليسار) */
.client-logo-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    padding: 10px;
}

.client-logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-name-badge {
    font-size: 10px;
    margin-top: 5px;
    color: #1b7696;
    font-weight: bold;
    text-align: center;
}

/* =========================================
   تنسيق الكرت الأخير (رقم 15) في الوسط
========================================= */
.projects-grid-container .project-card-cinematic:last-child {
    grid-column: 1 / -1;

    /* يمتد ليشمل العمودين */
    width: 60%;

    /* عرض أقل ليكون مميزاً في الوسط */
    margin: 40px auto 0 auto;

    /* توسيط الكرت */
    height: 550px;

    /* ارتفاع أكبر قليلاً للتمييز */
}

/* تعديل النصوص للكرت الأخير (لأنه أكبر) */
.projects-grid-container .project-card-cinematic:last-child .project-title {
    font-size: 36px;
    max-width: 60%;
}

.projects-grid-container .project-card-cinematic:last-child .project-desc-list li {
    font-size: 16px;
    max-width: 60%;
}

/* --- التجاوب مع الجوال --- */
@media (max-width: 991px) {
    .projects-grid-container {
        grid-template-columns: 1fr;

        /* عمود واحد في الموبايل */
        gap: 20px;
    }

    /* الكرت الأخير يرجع طبيعي في الموبايل */
    .projects-grid-container .project-card-cinematic:last-child {
        width: 100%;
        grid-column: auto;
        height: 500px;
    }

    .project-content-wrap {
        padding: 30px 20px;
        background: rgba(15, 22, 32, 0.8);
    }

    .project-title,
    .project-desc-list li {
        max-width: 100%;
    }

    .project-overlay-gradient {
        width: 100%;
        background: linear-gradient(0deg, #0F1620 20%, transparent 100%);
    }

    .client-logo-badge {
        bottom: auto;
        top: 20px;
        left: 20px;
        width: 70px;
        height: 70px;
    }
}

/* --- تصغير حجم كرت المشروع السينمائي --- */
.project-card-cinematic {
    /* التحكم الرئيسي في حجم الصورة هو ارتفاع الكرت */
    /* تم تقليل القيمة هنا. يمكنك تجرب القيم مثل 350px أو 400px حسب رغبتك */
    height: 400px !important;

    /* اختياري: يمكنك استخدام نسبة العرض للارتفاع بدلاً من الارتفاع الثابت */
    /* aspect-ratio: 16 / 9; */
}

/* --- تعديلات اختيارية للعناصر الداخلية لتتناسب مع الحجم الصغير --- */
/* 1. تصغير عنوان المشروع */
.project-card-cinematic .project-title {
    font-size: 24px;

    /* تصغير الخط */
    margin-bottom: 5px;
}

/* 2. تصغير العنوان الفرعي */
.project-card-cinematic .project-subtitle {
    font-size: 14px;
    margin-bottom: 15px;
}

/* 3. تصغير القائمة النقطية وضغط المسافات */
.project-card-cinematic .project-desc-list li {
    font-size: 13px;
    margin-bottom: 5px;

    /* تقليل المسافة بين النقاط */
    line-height: 1.5;
}

/* 4. تصغير بوكس الشعار في الزاوية */
.project-card-cinematic .client-logo-badge {
    width: 100px;

    /* تصغير العرض */
    height: 100px;

    /* تصغير الارتفاع */
    bottom: 15px;

    /* تقريب المسافة من الحافة */
    left: 15px;
    padding: 8px;
}

/* 5. تعديل مساحة النص الداخلية */
.project-content-wrap {
    padding: 0 35px 0 0;

    /* تقليل الهامش الداخلي الأيمن */
}

/* ============================================================
   لوحة التحكم الكاملة في الكروت (الارتفاع، العرض، النصوص)
============================================================ */
/* 1. التحكم في جسم الكرت (الحاوية الخارجية) */
.project-card-cinematic {
    /* --- [ الارتفاع ] --- */
    /* غيّر هذا الرقم للتحكم في طول الكرت */
    height: 500px !important;

    /* --- [ العرض ] --- */
    /* 100% تعني أنه يأخذ مساحة العمود كاملة */
    width: 90% !important;

    /* (اختياري) إذا أردت الكرت أنحف من العمود، فعّل السطر التالي وغيّر الرقم */
    /* max-width: 90% !important; margin: 0 auto; */
}

/* 2. التحكم في حجم العنوان الرئيسي */
.project-title {
    /* كبر أو صغر الرقم لتغيير حجم خط العنوان */
    font-size: 26px !important;

    /* المسافة تحت العنوان */
    margin-bottom: 5px !important;
}

/* =========================================
   تنسيق الشبكة الصارم (محاذاة تامة مع الهيدر)
========================================= */
.projects-grid-container {
    display: grid !important;

    /* تقسيم الشاشة لعمودين متساويين */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;

    /* المسافة بين الكروت */
    /* إجبار الشبكة على أخذ حجم الحاوية فقط وعدم التمدد */
    width: 90% !important;
    max-width: 90% !important;

    /* إلغاء أي هوامش خارجية قد تزيح المحتوى */
    margin: 40px 0 !important;
    padding: 0 !important;
}

/* تنسيق الكرت */
.project-card-cinematic {
    position: relative;
    width: 100% !important;
    height: 480px !important;

    /* الارتفاع المثالي */
    border-radius: 10px;
    overflow: hidden;
    background-color: #0F1620;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    /* إصلاح مشاكل العرض في بعض المتصفحات */
    box-sizing: border-box !important;
}

/* الكرت الأخير (رقم 15) في الوسط */
.projects-grid-container .project-card-cinematic:last-child {
    grid-column: 1 / -1 !important;

    /* يمتد بالعرض */
    width: 60% !important;

    /* أصغر من الباقين */
    margin: 40px auto 0 auto !important;

    /* توسيط */
}

/* --- إصلاح للموبايل --- */
@media (max-width: 991px) {
    .projects-grid-container {
        grid-template-columns: 1fr !important;

        /* عمود واحد */
    }

    .projects-grid-container .project-card-cinematic:last-child {
        width: 100% !important;
    }
}

/* 3. التحكم في حجم العنوان الفرعي (التصنيف) */
.project-subtitle {
    /* حجم خط العنوان الفرعي */
    font-size: 14px !important;

    /* المسافة تحت العنوان الفرعي */
    margin-bottom: 10px !important;
}

/* 4. التحكم في حجم نصوص القائمة النقطية */
.project-desc-list li {
    /* حجم خط الوصف */
    font-size: 13px !important;

    /* المسافة بين كل سطر والآخر */
    margin-bottom: 4px !important;
}

/* 5. التحكم في "بوكس الشعار" (المربع الأبيض) */
.client-logo-badge {
    /* عرض البوكس */
    width: 80px !important;

    /* طول البوكس */
    height: 80px !important;

    /* مكانه من تحت */
    bottom: 20px !important;

    /* مكانه من اليسار */
    left: 20px !important;
}

/* 6. التحكم في "مساحة النص" (عشان ما يلزق في الحواف) */
.project-content-wrap {
    /* مسافة النص من اليمين */
    padding-right: 30px !important;

    /* مسافة النص من اليسار (عشان ما يغطي الشعار) */
    padding-left: 90px !important;

    /* ضبط حاوية الشبكة لتكون محاذية لليمين */
}

/* =========================================
   توسيط السكشن بالكامل
========================================= */
.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    /* عمودين */
    gap: 30px;

    /* --- الإعدادات المسؤولة عن التوسيط --- */
    width: 100%;
    max-width: 1200px;

    /* تحديد عرض أقصى لضمان بقائه في الوسط في الشاشات الكبيرة */
    margin-top: 40px !important;
    margin-bottom: 40px !important;

    /* هذا هو السطر السحري للتوسيط الأفقي */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- تنسيق الكرت الأخير (رقم 15) ليكون في الوسط --- */
/* بما أن عدد الكروت فردي (15)، هذا الكود يضمن أن الكرت الأخير يأتي في المنتصف */
.projects-grid-container .project-card-cinematic:last-child {
    grid-column: 1 / -1;

    /* يمتد ليشمل العمودين */
    width: 60%;

    /* عرض أصغر قليلاً للتميز */
    margin-left: auto !important;
    margin-right: auto !important;

    /* توسيط الكرت نفسه */
}

/* --- إصلاح للموبايل --- */
@media (max-width: 991px) {
    .projects-grid-container {
        grid-template-columns: 1fr;
        padding: 0 15px;

        /* هامش بسيط للحواف في الجوال */
    }

    /* إلغاء تميز الكرت الأخير في الموبايل ليكون مثل الباقي */
    .projects-grid-container .project-card-cinematic:last-child {
        width: 100%;
    }
}

/* تنسيق اسم العميل الجديد (تحت النص) */
.client-name-highlight {
    color: #1b7696;

    /* لون الهوية */
    font-size: 16px;

    /* حجم الخط */
    font-weight: 700;

    /* خط عريض */
    margin-top: 20px;

    /* مسافة بينه وبين النص اللي فوقه */
    display: block;

    /* يظهر في سطر لوحده */
    font-family: 'Alexandria', sans-serif;
}

/* تعديل بسيط لبوكس الشعار عشان الصورة تتوسط بعد حذف النص */
.client-logo-badge {
    padding: 15px !important;

    /* زيادة الحواشي الداخلية */
}

/* =========================================
   إصلاح تداخل النصوص وتنسيق كلمة الجهة
========================================= */
/* 1. ضبط تباعد الأسطر (حل المشكلة في الصورة) */
.project-desc-lines p {
    font-size: 15px !important;
    line-height: 2 !important;

    /* تم زيادة الرقم لفك التشابك بين السطور */
    margin-bottom: 10px !important;
    color: #e0e0e0;
    font-weight: 400;
}

/* 2. تنسيق كلمة "الجهة" */
.client-name-highlight {
    color: #1b7696 !important;

    /* لون الهوية */
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-top: 20px !important;
    display: block;
    font-family: 'Alexandria', sans-serif;
}

/* =========================================
   تنسيق النصوص الاحترافي (Corporate Style)
========================================= */
/* 1. ضبط الفقرات (الوصف) */
.project-desc-lines p {
    font-size: 16px !important;

    /* حجم خط مناسب للقراءة */
    line-height: 2 !important;

    /* تباعد أسطر مريح جداً للعين (السر في الترتيب) */
    margin-bottom: 12px !important;

    /* مسافة واضحة بين كل فقرة */
    color: #e0e0e0 !important;

    /* لون أبيض مائل للرمادي الفاتح (فخم) */
    font-weight: 300 !important;

    /* خط رفيع (Light) يعطي طابعاً عصرياً */
    text-align: justify;

    /* محاذاة النص من الجانبين */
    padding-left: 20px;

    /* ترك مسافة صغيرة يسار النص */
}

/* 2. ضبط العنوان الرئيسي */
.project-title {
    font-size: 32px !important;
    font-weight: 800 !important;

    /* خط عريض جداً للعنوان */
    margin-bottom: 8px !important;
    color: #ffffff !important;
}

/* 3. ضبط العنوان الفرعي (الخدمة) */
.project-subtitle {
    font-size: 16px !important;
    color: #1b7696 !important;

    /* لون الهوية */
    font-weight: 700 !important;
    margin-bottom: 25px !important;

    /* مسافة فاصلة قبل بدء النص */
    display: inline-block;
    border-bottom: 1px solid rgba(27, 118, 150, 0.3);

    /* خط خفيف تحت التصنيف */
    padding-bottom: 5px;
}

/* 4. تنسيق اسم الجهة */
.client-name-highlight {
    font-size: 15px !important;
    color: #fff !important;
    background-color: #1b7696;

    /* خلفية صغيرة لاسم الجهة */
    padding: 5px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px !important;
    font-weight: bold !important;
}

/* =========================================
   تنسيق النقاط، المحاذاة، وتثبيت الجهة بالأسفل
========================================= */
/* 1. ضبط حاوية المحتوى لتوزيع العناصر (فليكس) */
.project-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding-bottom: 20px !important;

    /* مسافة من الأسفل */
}

/* 2. تنسيق القائمة النقطية (الملخص) */
.project-desc-list {
    list-style-type: disc !important;

    /* شكل النقطة */
    padding-right: 20px !important;

    /* مسافة للرموز النقطية */
    margin-bottom: auto !important;

    /* هذا السطر يدفع "الجهة" للأسفل */
}

/* 3. تنسيق عناصر القائمة (النقاط) */
.project-desc-list li {
    color: #e0e0e0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;

    /* المحاذاة من اليمين واليسار */
    text-align: justify !important;
    text-align-last: right !important;

    /* السطر الأخير يبقى يمين */
    width: 90% !important;

    /* عرض مناسب لعدم الالتصاق بالحافة */
}

/* 4. تنسيق وتثبيت "الجهة" في الأسفل */
.client-name-highlight {
    font-size: 14px !important;
    color: #1b7696 !important;
    font-weight: 800 !important;
    background: rgba(255, 255, 255, 0.1);

    /* خلفية خفيفة جداً */
    padding: 8px 15px;
    border-radius: 4px;
    width: fit-content;
    margin-top: 15px !important;

    /* مسافة أمان من النص */
    align-self: flex-start;

    /* تثبيتها على اليمين */
}

/* =========================================
   تنسيقات القوائم والنص التعريفي
========================================= */
/* 1. ضبط قائمة التصنيفات (Tabs) */
.tab-product {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 30px 0 40px 0;

    /* مسافات من فوق وتحت */
    flex-wrap: wrap;

    /* عشان في الموبايل تنزل تحت بعض */
    gap: 15px;
}

.nav-tab-item a {
    color: #a0a0a0;

    /* لون رمادي فاتح */
    font-size: 16px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Alexandria', sans-serif !important;
}

/* حالة الزر النشط (Active) وعند المرور عليه */
.nav-tab-item a.active,
.nav-tab-item a:hover {
    color: #fff;
    background-color: #1b7696;

    /* لون الهوية */
    border-color: #1b7696;
}

/* 2. ضبط النص التعريفي (الفقرة العربية) */
.intro-text-box {
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
    padding: 0 20px;
}

.intro-text-box p {
    font-size: 16px;
    line-height: 2.2;

    /* تباعد أسطر مريح */
    color: #e0e0e0;
    font-weight: 300;
    font-family: 'Alexandria', sans-serif !important;
}

/* =========================================
   تنسيقات القوائم والنص التعريفي
========================================= */
/* 1. ضبط قائمة التصنيفات (Tabs) */
.tab-product {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 30px 0 40px 0;

    /* مسافات من فوق وتحت */
    flex-wrap: wrap;

    /* عشان في الموبايل تنزل تحت بعض */
    gap: 15px;
}

.nav-tab-item a {
    color: #a0a0a0;

    /* لون رمادي فاتح */
    font-size: 16px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Alexandria', sans-serif !important;
}

/* حالة الزر النشط (Active) وعند المرور عليه */
.nav-tab-item a.active,
.nav-tab-item a:hover {
    color: #fff;
    background-color: #1b7696;

    /* لون الهوية */
    border-color: #1b7696;
}

/* 2. ضبط النص التعريفي (الفقرة العربية) */
.intro-text-box {
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
    padding: 0 20px;
}

.intro-text-box p {
    font-size: 16px;
    line-height: 2.2;

    /* تباعد أسطر مريح */
    color: #e0e0e0;
    font-weight: 300;
    font-family: 'Alexandria', sans-serif !important;
}

/* تنسيق النص التعريفي ليكون واضحاً ويملأ المكان */
.intro-text-styled {
    /* 1. المحاذاة: ملء السطر من اليمين لليسار */
    text-align: justify !important;
    text-justify: inter-word !important;

    /* 2. السطر الأخير يكون في الوسط لجمالية الشكل */
    text-align-last: center !important;

    /* 3. وضوح الخط وحجمه */
    font-family: 'Alexandria', sans-serif !important;
    font-size: 18px !important;

    /* تكبير الخط */
    line-height: 2.4 !important;

    /* تباعد مريح جداً للأسطر */
    color: #ffffff !important;

    /* لون أبيض ناصع */
    font-weight: 400 !important;

    /* سماكة متوسطة */
    /* 4. ضبط العرض والهوامش */
    max-width: 1000px !important;

    /* منع السطر من أن يكون طويلاً جداً */
    margin: 0 auto !important;

    /* توسيط الكتلة النصية */
    padding: 20px !important;

    /* هوامش داخلية */
}

/* تنسيق النص الموسع (Wide Container) */
.intro-text-styled {
    /* 1. التوسيع: جعلنا العرض الأقصى 100% ليأخذ راحتة في الشاشة */
    max-width: 100% !important;
    width: 100% !important;

    /* 2. المحاذاة والترتيب */
    text-align: justify !important;
    text-justify: inter-word !important;
    text-align-last: center !important;

    /* 3. تنسيق الخط */
    font-family: 'Alexandria', sans-serif !important;
    font-size: 18px !important;
    line-height: 2.4 !important;
    color: #ffffff !important;
    font-weight: 400 !important;

    /* 4. الهوامش */
    margin: 0 auto !important;
    padding: 20px 0 !important;

    /* تقليل الهوامش الجانبية للاستفادة من العرض */
}

/* =========================================
   التحكم في حجم الشعار داخل البوكس
========================================= */
.client-logo-badge {
    /* 1. حجم البوكس الأبيض الخارجي (ثابت) */
    width: 110px !important;
    height: 110px !important;

    /* 2. التحكم في حجم الشعار (هنا السر!) */
    /* - اجعله 5px ليكون الشعار ضخماً جداً */
    /* - اجعله 15px ليكون متوسطاً (موزون) */
    /* - اجعله 25px ليكون صغيراً وأنيقاً */
    padding: 0px !important;

    /* مكان البوكس */
    bottom: 30px !important;
    left: 30px !important;
    background-color: #fff !important;
    border-radius: 15px !important;
}

/* تنسيق الصورة لتملأ المساحة المتاحة لها */
.client-logo-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;

    /* يحافظ على شكل الشعار دون مط */
}

/* =========================================
   تنسيق سكشن العنوان المودرن (Page Title)
========================================= */
.page-title-modern {
    position: relative;
    padding-top: 250px;

    /* زيادة المسافة العلوية لحل مشكلة العنوان */
    padding-bottom: 60px;
    background-color: #0b1118;

    /* لون خلفية داكن */
    overflow: hidden;

    /* لمنع ظهور الأشرطة الجانبية بسبب الحركة */
}

/* --- 1. تنسيق الخلفية المائية المتحركة --- */
.mouse-move-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;

    /* أكبر من الشاشة عشان الحركة */
    height: 120%;

    /* ضع هنا رابط صورة اللوجو الشفاف أو الباترن */
    background-image: url('image/logo/logo1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;

    /* حجم العلامة المائية */
    opacity: 0.03;

    /* شفافية خفيفة جداً (علامة مائية) */
    z-index: 0;
    pointer-events: none;
    transition: transform 0.1s linear;

    /* نعومة الحركة */
}

.relative-z {
    position: relative;
    z-index: 2;

    /* المحتوى يظهر فوق الخلفية */
}

/* --- 2. تنسيق العنوان (أعمالنا) --- */
.main-title {
    font-family: 'Alexandria', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.breadcrumbs-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-family: 'Alexandria', sans-serif;
    font-size: 16px;
}

.breadcrumbs-box a {
    color: #a0a0a0;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumbs-box a:hover {
    color: #1b7696;
}

.breadcrumbs-box .sep {
    color: #1b7696;
}

.breadcrumbs-box .current {
    color: #1b7696;
    font-weight: bold;
}

/* --- 3. تنسيق النص التعريفي (موسع ومودرن) --- */
.intro-text-wrapper {
    width: 100%;
    max-width: 1000px;

    /* توسيع الحاوية */
    margin: 40px auto;
    padding: 0 15px;
}

.intro-text-content {
    font-family: 'Alexandria', sans-serif;
    font-size: 18px;

    /* خط كبير وواضح */
    line-height: 2.2;

    /* تباعد أسطر مريح */
    color: #e0e0e0;
    font-weight: 300;
    text-align: center;

    /* توسيط النص (أشيك في المودرن) */
    /* إذا كنت مصر على المحاذاة من الجانبين استخدم: text-align: justify; */
}

/* --- 4. تنسيق التابات (Tabs) --- */
.tab-product-modern {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    list-style: none;
    margin-top: 40px;
}

.tab-product-modern li a {
    display: block;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);

    /* خلفية زجاجية */
    color: #fff;
    font-family: 'Alexandria', sans-serif;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-product-modern li a.active,
.tab-product-modern li a:hover {
    background: #1b7696;

    /* لون الهوية */
    border-color: #1b7696;
    transform: translateY(-3px);

    /* رفعة بسيطة عند التحويم */
}

/* =========================================
   حركة الدخول المودرن (Cinematic Entry)
========================================= */
/* 1. تعريف الحركة (من الأسفل للأعلى مع ظهور تدريجي) */
@keyframes fadeInUpModern {
    0% {
        opacity: 0;
        transform: translateY(50px);

        /* يبدأ من تحت */
        filter: blur(5px);

        /* تأثير ضبابي خفيف في البداية */
    }

    100% {
        opacity: 1;
        transform: translateY(0);

        /* يستقر في مكانه */
        filter: blur(0);
    }
}

/* 2. إخفاء العناصر مبدئياً وتجهيزها للحركة */
.page-title-modern .title-header-box,
.page-title-modern .intro-text-wrapper,
.page-title-modern .tab-product-modern {
    opacity: 0;

    /* مخفي في البداية */
    /* تطبيق الحركة: المدة 1 ثانية، منحنى سرعة ناعم جداً */
    animation: fadeInUpModern 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 3. التتابع الزمني (Delays) - السر في الجمالية */
/* العنصر الأول: العنوان (يدخل بعد 0.2 ثانية) */
.page-title-modern .title-header-box {
    animation-delay: 0.2s;
}

/* العنصر الثاني: النص (يدخل بعد 0.4 ثانية) */
.page-title-modern .intro-text-wrapper {
    animation-delay: 0.4s;
}

/* العنصر الثالث: التابات (يدخل بعد 0.6 ثانية) */
.page-title-modern .tab-product-modern {
    animation-delay: 0.6s;
}

/* تنسيق السكشن العام */
.page-title-modern {
    position: relative;
    padding-top: 250px;
    padding-bottom: 60px;
    background-color: #0b1118;

    /* لون خلفية داكن ليظهر النص الأبيض */
    overflow: hidden;
}

/* --- تنسيق العلامة المائية (Watermark) --- */
#watermark-bg {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;

    /* 2. هنا نضع رابط الصورة الصحيح الذي كتبته أنت */
    background-image: url('image/logo/company-logow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;

    /* حجم الشعار في الخلفية */
    opacity: 0.04;

    /* شفافية خفيفة جداً لتكون علامة مائية */
    z-index: 0;
    pointer-events: none;
    transition: transform 0.1s linear;
}

/* جعل المحتوى يظهر فوق الخلفية */
.relative-z {
    position: relative;
    z-index: 2;
}

/* باقي التنسيقات (العنوان والنص) كما هي... */
.main-title {
    font-family: 'Alexandria', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
}

/* ... (باقي كود التنسيق السابق للنص والأزرار) */
/* =========================================
   تنسيق السكشن العام (خلفية شفافة)
========================================= */
.page-title-modern {
    position: relative;
    padding-top: 250px;
    padding-bottom: 60px;

    /* 1. هنا التعديل الأساسي: حذفنا لون الخلفية أو جعلناه شفافاً */
    background-color: transparent !important;

    /* جعل الخلفية شفافة */
    overflow: hidden;
}

/* --- تنسيق العلامة المائية (Watermark) --- */
/* تأكد أن هذا الكود موجود لديك */
#watermark-bg {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;

    /* تأكد من مسار الصورة الصحيح هنا */
    background-image: url('image/logo/company-logow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    opacity: 0.05;

    /* شفافية العلامة المائية نفسها */
    z-index: -1;

    /* نضمن أنها خلف كل شيء */
    pointer-events: none;
    transition: transform 0.1s linear;
}

/* جعل المحتوى يظهر فوق الخلفية */
.relative-z {
    position: relative;
    z-index: 2;
}

/* =========================================
   تنسيق خلفية SVG الجديدة
========================================= */
/* 1. الحاوية الخاصة بالرسمة */
.svg-decoration-left {
    position: absolute;
    left: -250px;

    /* سحبناها لليسار قليلاً لتظهر كجزء من التصميم */
    top: 50%;

    /* توسيط عمودي */
    transform: translateY(-50%);

    /* ضبط التوسيط */
    z-index: 0;

    /* خلف النص */
    pointer-events: none;

    /* عشان ما تغطي على الروابط */
    opacity: 0.6;

    /* شفافية إضافية للتحكم في قوة الظهور */
}

/* 2. تحسين استجابة الـ SVG للموبايل */
.svg-decoration-left svg {
    max-width: 100%;
    height: auto;
}

/* في الشاشات الصغيرة نصغرها */
@media (max-width: 768px) {
    .svg-decoration-left {
        left: -150px;
        width: 400px;
    }
}

/* =========================================
   تنسيق سكشن الإنتاج (Full Width Split)
========================================= */
.production-full-width {
    position: relative;
    background-color: #0b1118;

    /* لون الخلفية الداكن */
    overflow: hidden;
}

/* تعديل الصورة لتظهر كاملة بحجمها الطبيعي */
.prod-image-full-height .img-cover {
    width: 100% !important;
    height: auto !important;

    /* الارتفاع يصبح حراً حسب أبعاد الصورة الأصلية */
    object-fit: contain !important;

    /* يضمن عدم قص أي جزء من الصورة */
    display: block;

    /* (اختياري) لتوسيط الصورة عمودياً إذا كان النص أطول منها */
    margin-top: auto;
    margin-bottom: auto;
}

/* تعديل الحاوية الأب لتسمح للصورة بأخذ راحتها */
.prod-image-full-height {
    height: auto !important;

    /* إلغاء الارتفاع الإجباري */
    min-height: auto !important;
    display: flex;

    /* لتوسيط الصورة */
    align-items: center;
    justify-content: center;
}

/* تراكب لوني فوق الصورة لإعطاء فخامة */
.img-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0b1118 0%, transparent 50%, rgba(11, 17, 24, 0.4) 100%);
    z-index: 1;
}

/* النص الإنجليزي أسفل الصورة */
.img-bottom-text {
    position: absolute;
    bottom: 40px;
    right: 500px;
    z-index: 2;
}

.img-bottom-text .en-title {
    font-family: sans-serif;
    color: #fff;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    border-right: 4px solid #1b7696;

    /* خط جمالي بجانب النص */
    padding-right: 15px;
}

/* 2. تنسيق قسم النصوص (يسار) */
.prod-content-full-wrapper {
    display: flex;
    align-items: center;

    /* توسيط النص عمودياً */
    justify-content: center;
    height: 100%;
    padding: 90px 90px;

    /* هوامش داخلية كبيرة للتنفس */
}

.content-inner {
    max-width: 850px;

    /* منع النص من التمدد بشكل مبالغ فيه */
}

.content-inner .sub-title {
    font-family: 'Alexandria', sans-serif;
    font-size: 32px;
    color: #1b7696;
    margin-bottom: 10px;
    font-weight: 700;
}

.content-inner .main-title {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 40px;
    letter-spacing: 1px;
    line-height: 1.1;
}

.desc-text-modern p {
    font-family: 'Alexandria', sans-serif;
    font-size: 26px;
    line-height: 2.2;
    color: #b0b0b0;
    margin-bottom: 25px;
    text-align: justify;
}

/* 3. العلامة المائية (خلف النص) */
.watermark-bg-fixed {
    position: absolute;
    top: 36%;
    left: 10%;

    /* تظهر أكثر جهة اليسار خلف النص */
    transform: translateY(-50%);
    width: 800px;
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
}

/* 4. الخط المضيء */
.flow-separator-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #1b7696, transparent);
    box-shadow: 0 0 15px #1b7696;
    z-index: 10;
}

/* --- تعديلات الموبايل --- */
@media (max-width: 991px) {
    .prod-image-full-height {
        min-height: 400px;

        /* تصغير ارتفاع الصورة في الموبايل */
    }

    .prod-content-full-wrapper {
        padding: 50px 20px;
    }

    .img-overlay-gradient {
        background: linear-gradient(to top, #0b1118 0%, transparent 100%);

        /* التدرج من الأسفل في الموبايل */
    }
}

/* =========================================
   تنسيق معرض الأعمال (كروت مصغرة + 5 أعمدة)
========================================= */
.portfolio-section {
    position: relative;
    padding: 80px 20px;

    /* تقليل الحواف الجانبية */
    background-color: #0b1118;
    direction: rtl;
    overflow: hidden;
}

.watermark-bg-fixed {
    position: absolute;
    top: 40%;
    left: 90%;
    transform: translate(-50%, -50%);
    width: 150%;
    opacity: 0.01;
    z-index: 0;
    pointer-events: none;
}

.watermark-bg-fixed img {
    width: 2000%;
    height: auto;
}

.portfolio-content-relative {
    position: relative;
    z-index: 2;
}

/* الشبكة 5 أعمدة */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;

    /* تقليل الفجوة قليلاً */
    margin-top: 50px;
}

/* استجابة الشاشات */
@media (max-width: 1400px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 850px)  {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px)  {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* --- الكرت (تم تصغيره وتوسيـطه) --- */
.project-card {
    background: transparent;
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    height: 100%;

    /* التعديل الجديد: تحديد عرض أقصى لتصغير الكرت */
    max-width: 240px;
    width: 100%;
    margin: 0 auto;

    /* توسيط الكرت داخل العمود */
}

.flip-box {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.flip-box.flipped {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

/* الوجه الأمامي */
.flip-front {
    background-color: #151a21;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.glow-bg {
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(27, 118, 150, 0.5) 0%, transparent 70%);
    filter: blur(20px);
    transition: 0.5s;
    z-index: 1;
    opacity: 0.7;
}

.project-card:hover .glow-bg {
    opacity: 1;
    transform: scale(1.1);
}

.poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: transform 0.5s;
}

.project-card:hover .poster-img {
    transform: scale(1.05);
}

/* --- الوجه الخلفي --- */
.flip-back {
    background: linear-gradient(135deg, #1b7696 0%, #0b1118 100%);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;

    /* تقليل الحواف الداخلية */
    text-align: center;
    color: #fff;
    cursor: pointer;
}

/* الحاوية المودرن للشعار */
.modern-logo-box {
    width: 70px;
    height: 70px;

    /* تصغير الحاوية */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.flip-back:hover .modern-logo-box {
    transform: scale(1.05) rotate(2deg);
}

.back-logo-img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: none !important;
}

/* النصوص */
.back-text {
    font-size: 12px;

    /* تصغير الخط */
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: 'Alexandria', sans-serif;
    max-height: 55%;
    overflow-y: auto;
    scrollbar-width: none;
    width: 100%;
}

.back-text::-webkit-scrollbar {
    display: none;
}

/* زر العودة */
.close-btn {
    font-size: 11px;
    padding: 6px 20px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    margin-top: auto;
}

.close-btn:hover {
    background: #fff;
    color: #1b7696;
    border-color: #fff;
}

/* --- التفاصيل السفلية (معدلة للأحجام الصغيرة) --- */
/* =========================================
   تنسيق التفاصيل السفلية (تم حل مشكلة التداخل)
========================================= */
.card-details {
    text-align: center;
    padding-top: 20px;

    /* زيادة المسافة من الصورة */
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* هذه أهم نقطة: زيادة الفجوة بين العنوان والتصنيف والزر */
    flex-grow: ;
    justify-content: flex-start;
}

.card-title {
    color: #fff;
    font-size: 18px;

    /* تكبير الخط قليلاً ليكون أوضح */
    font-weight: 800;
    margin: 0;
    line-height: 1.4;

    /* لمنع تداخل الأسطر لو العنوان طويل */
    font-family: 'Alexandria', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-category {
    color: #1b7696;
    font-size: 14px;
    font-weight: 600;
    display: block;
    font-family: 'Alexandria', sans-serif;
    margin-bottom: 5px;

    /* مسافة أمان إضافية قبل الزر */
}

.read-more-btn {
    background: transparent;
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 30px;

    /* تكبير الزر قليلاً */
    border-radius: 50px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    align-self: center;
    font-family: 'Alexandria', sans-serif;
    margin-top: 5px;

    /* دفع الزر للأسفل بعيداً عن النص */
}

.read-more-btn:hover {
    background: #1b7696;
    border-color: #1b7696;
    color: #fff;
}

/* تنسيق الحاوية الأساسية للنص */
.intro-text-wrapper {
    position: relative;

    /* ضروري لتموضع الخط */
    padding-bottom: 40px;

    /* مساحة للخط أسفل النص */
    margin-bottom: 40px;

    /* مسافة تفصل هذا السكشن عن الذي يليه */
}

/* الخط المضيء باستخدام pseudo-element */
.intro-text-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    /* توسيط الخط */
    /* أبعاد الخط */
    width: 60%;

    /* عرض الخط بالنسبة للحاوية */
    height: 2px;

    /* سماكة الخط */
    /* تأثير التدرج واللون (لون الهوية + شفافية) */
    background: linear-gradient(90deg, 
        rgba(27, 118, 150, 0) 0%, 
        rgba(27, 118, 150, 1) 50%, 
        rgba(27, 118, 150, 0) 100%);

    /* تأثير التوهج (Glow) */
    box-shadow: 0 0 10px rgba(27, 118, 150, 0.8), 
                0 0 20px rgba(27, 118, 150, 0.4);
    border-radius: 2px;
}

/* تنسيق حاوية العنوان لضبط التموضع */
.portfolio-content-relative .text-center {
    position: relative;

    /* ضروري لظهور الخط */
    padding-bottom: 25px;

    /* مسافة بين النص والخط */
    margin-bottom: 60px !important;

    /* مسافة تفصل العنوان عن الكروت */
}

/* رسم الخط المضيء */
.portfolio-content-relative .text-center::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    /* توسيط الخط */
    /* أبعاد الخط */
    width: 200px;

    /* عرض الخط (يمكنك تغييره) */
    height: 3px;

    /* سماكة الخط */
    /* لون متدرج (يبدأ شفاف وينتهي شفاف وفي الوسط لون الهوية) */
    background: linear-gradient(90deg, 
        rgba(27, 118, 150, 0) 0%, 
        #1b7696 50%, 
        rgba(27, 118, 150, 0) 100%);

    /* تأثير التوهج */
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.8);
    border-radius: 10px;
}

/* 1. ضبط مسافات العنوان للسماح بظهور الخط */
.prod-content-full-wrapper .main-title {
    position: relative;

    /* ضروري لتموضع الخط */
    padding-bottom: 25px;

    /* مسافة بين النص والخط */
    margin-bottom: 30px;

    /* مسافة بين الخط والنص الذي يليه */
}

/* 2. رسم الخط المضيء */
.prod-content-full-wrapper .main-title::after {
    content: "";
    position: absolute;
    bottom: 0;

    /* المحاذاة لليمين (بداية النص العربي) */
    right: 0;

    /* أبعاد الخط */
    width: 120px;

    /* طول الخط */
    height: 3px;

    /* سماكة الخط */
    /* لون متدرج (من الشفاف إلى لون الهوية ثم شفاف) */
    background: linear-gradient(90deg, 
        #1b7696 0%, 
        rgba(27, 118, 150, 0.5) 80%, 
        rgba(27, 118, 150, 0) 100%);

    /* تأثير التوهج */
    box-shadow: 0 0 15px rgba(27, 118, 150, 0.6);
    border-radius: 5px;
}

/* =========================================
   تنسيق الخط المضيء لعنوان H3
========================================= */
/* 1. تهيئة العنوان لتموضع الخط */
h3.title {
    position: relative;

    /* ضروري جداً لكي يظهر الخط بالنسبة للنص */
    padding-bottom: 25px;

    /* مسافة كافية أسفل النص لاحتواء الخط */
    margin-bottom: 35px;

    /* مسافة إضافية لفصل العنوان عما بعده */
    /* اختياري: إذا أردت تلوين النص نفسه بلون الهوية، ألغِ تعليق السطر التالي */
    /* color: #1b7696; */
}

/* 2. رسم الخط المضيء باستخدام العنصر الزائف ::after */
h3.title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;

    /* محاذاة الخط لليمين */
    /* أبعاد الخط */
    width: 200px;

    /* طول الخط (يمكنك تعديله حسب الرغبة) */
    height: 4px;

    /* سماكة الخط */
    /* اللون والتدرج: يبدأ بلون الهوية الصريح ويتلاشى للشفاف باتجاه اليسار */
    background: linear-gradient(to left, #1b7696 20%, transparent 100%);

    /* تأثير التوهج (Glow) بلون الهوية */
    box-shadow: 0 4px 20px rgba(27, 118, 150, 0.5), /* توهج خارجي ناعم */
                0 0 10px rgba(27, 118, 150, 0.3);

    /* توهج مركز */
    border-radius: 4px;

    /* حواف ناعمة للخط */
}

<style>
  /* =========================
     3D SECTION (REFINED)
  ========================== */
  .section-3d-interactive {
    background: radial-gradient(circle at 50% 50%, #1a2c3f 0%, #090F16 80%);
    padding: clamp(70px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;

    /* مهم عشان الـ glow + watermark ما يسوي scroll أفقي */
}

/* خطوط الفصل المتوهجة */
.glow-separator-top,
.glow-separator-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 85%);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);
    box-shadow: 0 0 20px rgba(27, 118, 150, 0.85);
    opacity: 0.75;
    z-index: 3;
    pointer-events: none;
}

.glow-separator-top {
    top: 0;
}

.glow-separator-bottom {
    bottom: 0;
}

/* watermark */
.section-3d-interactive .free-watermark {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    opacity: 0.045;
    pointer-events: none;
    filter: blur(0.3px);
}

.section-3d-interactive .free-watermark img {
    width: min(1200px, 92%);
    max-width: 92%;
    height: auto;
    transform: translateZ(0);
}

/* عنوان السكشن */
.section-3d-head .sub-title {
    color: #1b7696;
    letter-spacing: 2px;
}

.section-3d-head h2 {
    font-size: clamp(30px, 3.2vw, 45px);
    margin-bottom: 18px;
}

.section-3d-head p {
    line-height: 2;
    max-width: 92%;
    margin-inline-start: auto;
    color: rgba(255,255,255,0.78);
    font-size: 18px;
}

/* صورة الهيرو */
.hero-image-3d {
    animation: floatHero 5s ease-in-out infinite;
    max-width: min(430px, 90%);
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
    transform: translateZ(0);
    will-change: transform;
}

@keyframes floatHero {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }
}

<style>
<style>
/* =========================
   3D SECTION (STATIC + CLEAN)
========================= */
.section-3d {
    background: radial-gradient(circle at 50% 50%, #1a2c3f 0%, #090F16 78%);
    padding: 140px 0 170px;

    /* هوامش فوق وتحت */
    position: relative;
    overflow: hidden;
}

/* خطوط توهج خفيفة */
.section-3d::before,
.section-3d::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1150px, 86%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #1b7696, transparent);
    box-shadow: 0 0 18px rgba(27,118,150,.45);
    opacity: .65;
    pointer-events: none;
    z-index: 2;
}

.section-3d::before {
    top: 0;
}

.section-3d::after {
    bottom: 0;
}

/* watermark */
.section-3d .free-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: .03;
    pointer-events: none;
    width: min(1200px, 80%);
    filter: blur(.4px);
}

.section-3d .free-watermark img {
    width: 100%;
    height: auto;
}

/* =========================
   HEADER: نص يمين + صورة يسار
========================= */
.section-3d-head {
    margin-bottom: 50px;
}

.section-3d-head .sub-title {
    color: #1b7696 !important;
    letter-spacing: 2px;
    font-weight: 700;
}

.section-3d-head .title {
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.2;
    margin: 0 0 14px;
}

.section-3d-head .lead {
    font-size: 18px;
    line-height: 1.95;
    color: rgba(255,255,255,.78);
    max-width: 92%;
    margin: 0 0 0 auto;

    /* RTL */
}

.section-3d-hero {
    text-align: left;
}

.section-3d-hero img {
    max-width: min(460px, 95%);
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}

/* =========================
   CARDS: 4 ثابتة في صف واحد
========================= */
.cards-row-fixed {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    justify-content: space-between;
}

/* 4 كروت = 25% لكل واحد */
.cards-row-fixed .card-col {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 25%;
}

/* على الشاشات الأصغر نخليها scroll أفقي بدون تغيير حجم الكرت */
@media (max-width: 1199px){
    .cards-row-fixed {
        overflow-x: auto;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
    }

    .cards-row-fixed::-webkit-scrollbar {
        height: 8px;
    }

    .cards-row-fixed::-webkit-scrollbar-thumb {
        background: rgba(27,118,150,.35);
        border-radius: 20px;
    }

    .cards-row-fixed .card-col {
        flex: 0 0 290px;
        max-width: 290px;
        min-width: 290px;
        scroll-snap-align: start;
    }
}

/* =========================
   STATIC CARD STYLE
========================= */
.service-card-modern {
    height: 100%;
    padding: 30px 22px 28px;

    /* توازن */
    border-radius: 22px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: .35s ease;
}

@supports not ((backdrop-filter: blur(10px))){
    .service-card-modern {
        background: rgba(12,18,28,.72);
    }
}

/* لمعة بسيطة أعلى الكرت */
.service-card-modern::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(600px circle at 50% 0%, rgba(27,118,150,.18), transparent 45%);
    opacity: .65;
    pointer-events: none;
}

/* hover */
.service-card-modern:hover {
    transform: translateY(-6px);
    border-color: rgba(27,118,150,.25);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* أيقونة */
.icon-wrapper {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(27,118,150,.18), rgba(255,255,255,0));
    border: 1px solid rgba(27,118,150,.32);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    transition: .35s ease;
}

.service-card-modern:hover .icon-wrapper {
    background: #1b7696;
    box-shadow: 0 0 20px rgba(27,118,150,.55);
    transform: scale(1.05);
}

.icon-wrapper svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* تصغير العناوين داخل الكروت + ضبط النص */
.service-card-modern h5 {
    font-size: 19px;

    /* أصغر */
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 700;
}

.service-card-modern p {
    font-size: 14px;
    line-height: 1.95;
    margin: 0;
    color: rgba(255,255,255,.75) !important;
}

/* Responsive spacing */
@media (max-width: 991px){
    .section-3d {
        padding: 110px 0 140px;
    }

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

    .section-3d-head .lead {
        max-width: 100%;
        margin-inline: auto;
    }
}

</style>
<style>
/* =========================
   MARKETING SECTION (FULL)
========================= */
.section-marketing {
    position: relative;
    padding: 140px 0 170px;

    /* هوامش السكشن */
    background: radial-gradient(circle at 50% 30%, #152536 0%, #090F16 70%);
    overflow: hidden;
}

/* خطوط توهج علوي/سفلي */
.section-marketing::before,
.section-marketing::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1150px, 86%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #1b7696, transparent);
    box-shadow: 0 0 18px rgba(27,118,150,.45);
    opacity: .65;
    pointer-events: none;
    z-index: 1;
}

.section-marketing::before {
    top: 0;
}

.section-marketing::after {
    bottom: 0;
}

/* watermark خفيف */
.section-marketing .marketing-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .04;
    pointer-events: none;
    z-index: 0;
    filter: blur(.4px);
}

.section-marketing .marketing-watermark img {
    width: min(1050px, 85%);
    height: auto;
}

/* container فوق watermark */
.section-marketing .tf-container {
    position: relative;
    z-index: 2;
}

/* =========================
   HEADING
========================= */
.section-marketing .heading-section {
    margin-bottom: 55px;
}

.section-marketing .heading-section .title {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.2;
    margin-bottom: 14px;
}

.section-marketing .heading-section p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 2;
    color: rgba(255,255,255,.76);
}

/* =========================
   GRID
========================= */
.grid-marketing {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* 4 كروت ثابت */
    gap: 26px;
}

/* Tablets */
@media (max-width: 1199px){
    .grid-marketing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 575px){
    .grid-marketing {
        grid-template-columns: 1fr;
    }
}

/* =========================
   CARD
========================= */
.market-item {
    border-radius: 22px;
    padding: 34px 26px 30px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

@supports not ((backdrop-filter: blur(10px))){
    .market-item {
        background: rgba(12,18,28,.72);
    }
}

/* لمعة داخلية */
.market-item::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(700px circle at 50% 0%, rgba(27,118,150,.18), transparent 45%);
    opacity: .7;
    pointer-events: none;
}

/* Hover */
.market-item:hover {
    transform: translateY(-7px);
    border-color: rgba(27,118,150,.28);
    box-shadow: 0 26px 60px rgba(0,0,0,.45);
}

/* =========================
   ICON
========================= */
.market-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, rgba(27,118,150,.18), rgba(255,255,255,0));
    border: 1px solid rgba(27,118,150,.32);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    transition: .35s ease;
}

.market-item:hover .market-icon {
    background: #1b7696;
    box-shadow: 0 0 20px rgba(27,118,150,.55);
    transform: scale(1.05);
}

.market-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================
   TEXT
========================= */
.market-item h4 {
    font-size: 20px;

    /* مضبوط */
    line-height: 1.4;
    margin: 0 0 12px;
    color: #fff;
}

.market-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: rgba(255,255,255,.74);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    .market-item {
        transition: none;
    }
}

</style>
<style>
/* =========================
   STUDIO SECTION (REFINED)
========================= */
.section-studio {
    position: relative;
    padding: 140px 0 170px;
    background: linear-gradient(180deg, rgba(27, 118, 150, 0.10) 0%, rgba(9, 15, 22, 1) 100%);
    overflow: hidden;
}

/* خطوط توهج خفيفة (اختياري) */
.section-studio::before,
.section-studio::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1150px, 86%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #1b7696, transparent);
    box-shadow: 0 0 18px rgba(27,118,150,.45);
    opacity: .65;
    pointer-events: none;
    z-index: 1;
}

.section-studio::before {
    top: 0;
}

.section-studio::after {
    bottom: 0;
}

.section-studio .free-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: .05;
    pointer-events: none;
    width: min(1200px, 80%);
    filter: blur(.4px);
}

.section-studio .free-watermark img {
    width: 100%;
    height: auto;
}

.section-studio .tf-container {
    position: relative;
    z-index: 2;
}

/* =========================
   CONTENT
========================= */
.section-studio .content-box {
    max-width: 560px;
}

/* الشعار بمحاذاة اتجاه الصور */
.section-studio .studio-logo {
    display: flex;
    justify-content: flex-start;

    /* يتماشى مع اتجاه الصور */
    align-items: center;
    margin-bottom: 18px;
}

.section-studio .studio-logo img {
    max-width: 190px;
    height: auto;
    opacity: .98;
}

/* العنوان والنص */
.section-studio .content-box .title {
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.25;
    margin-bottom: 16px;
}

.section-studio .content-box .desc {
    font-size: 15px;
    line-height: 2;
    color: rgba(255,255,255,.76);
}

/* القائمة */
.section-studio .studio-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: grid;
    gap: 10px;
}

.section-studio .studio-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.78);
    line-height: 1.9;
}

.section-studio .studio-feature-list li i {
    color: #1b7696;
    margin-top: 3px;
}

/* زر */
.section-studio .studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #1b7696;
    color: #fff;
    padding: 10px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: .3s ease;
    background: rgba(27,118,150,.10);
}

.section-studio .studio-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(27,118,150,.25);
}

/* =========================
   IMAGES: 1 BIG + 4 SMALL
========================= */
.studio-gallery {
    border-radius: 22px;
    overflow: hidden;
}

.studio-gallery .img-card {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.studio-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform .6s ease;
}

.studio-gallery .img-card:hover img {
    transform: scale(1.08);
}

/* المقاسات */
.studio-gallery .big {
    height: 320px;
}

.studio-gallery .small {
    height: 170px;
}

/* Grid للصور */
.studio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.studio-grid-top {
    margin-bottom: 14px;
}

/* Responsive */
@media (max-width: 991px){
    .section-studio {
        padding: 110px 0 140px;
    }

    .section-studio .content-box {
        max-width: 100%;
        margin-bottom: 28px;
    }

    .studio-gallery .big {
        height: 260px;
    }

    .studio-gallery .small {
        height: 160px;
    }
}

@media (max-width: 575px){
    .studio-grid {
        grid-template-columns: 1fr;
    }

    .studio-gallery .small {
        height: 180px;
    }
}

</style>
<style>
/* =========================
   WORKSHOP SECTION (REFINED)
========================= */
.section-workshop {
    position: relative;
    padding: 140px 0 170px;
    background: radial-gradient(circle at 50% 35%, #152536 0%, #090F16 70%);
    overflow: hidden;
}

/* خطوط توهج علوي/سفلي */
.section-workshop::before,
.section-workshop::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1150px, 86%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #1b7696, transparent);
    box-shadow: 0 0 18px rgba(27,118,150,.45);
    opacity: .65;
    pointer-events: none;
    z-index: 1;
}

.section-workshop::before {
    top: 0;
}

.section-workshop::after {
    bottom: 0;
}

/* watermark */
.section-workshop .free-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: .03;
    pointer-events: none;
    width: min(1200px, 80%);
    filter: blur(.4px);
}

.section-workshop .free-watermark img {
    width: 100%;
    height: auto;
}

.section-workshop .tf-container {
    position: relative;
    z-index: 2;
}

/* =========================
   HEADING
========================= */
.section-workshop .heading-section {
    margin-bottom: 55px;
}

.section-workshop .heading-section .sub-title {
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.72);
}

.section-workshop .heading-section .title {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.2;
    margin-bottom: 14px;
}

.section-workshop .heading-section p {
    max-width: 840px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 2;
    color: rgba(255,255,255,.76);
}

/* =========================
   CARDS (3)
========================= */
.workshop-card {
    height: 100%;
    padding: 34px 26px 28px;
    border-radius: 22px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column;
}

@supports not ((backdrop-filter: blur(10px))){
    .workshop-card {
        background: rgba(12,18,28,.72);
    }
}

/* لمعة داخلية */
.workshop-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(700px circle at 50% 0%, rgba(27,118,150,.18), transparent 45%);
    opacity: .75;
    pointer-events: none;
}

/* Hover */
.workshop-card:hover {
    transform: translateY(-7px);
    border-color: rgba(27,118,150,.28);
    box-shadow: 0 26px 60px rgba(0,0,0,.45);
}

/* =========================
   ICON
========================= */
.workshop-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(27,118,150,.18), rgba(255,255,255,0));
    border: 1px solid rgba(27,118,150,.32);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    transition: .35s ease;
}

.workshop-card:hover .workshop-icon {
    background: #1b7696;
    box-shadow: 0 0 20px rgba(27,118,150,.55);
    transform: scale(1.05);
}

.workshop-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================
   TITLE + LIST
========================= */
.workshop-card h4 {
    text-align: center;
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 18px;
    font-weight: 800;
    color: #fff;
}

/* قائمة مرتبة */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

/* bullets */
.service-list li {
    position: relative;
    padding-right: 18px;

    /* RTL */
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.9;
}

.service-list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(27,118,150,.95);
    box-shadow: 0 0 10px rgba(27,118,150,.35);
}

/* Responsive */
@media (max-width: 991px){
    .section-workshop {
        padding: 110px 0 140px;
    }

    .section-workshop .heading-section {
        margin-bottom: 35px;
    }
}

@media (prefers-reduced-motion: reduce){
    .workshop-card {
        transition: none;
    }
}

</style>
/* =========================
   FORCE FIX: top/bottom lines not touching
========================= */

/* 1) نزود padding داخل السكشن */
.section-workshop {
    padding-top: 190px !important;
    padding-bottom: 210px !important;
}

/* 2) لو الخطوط pseudo */
.section-workshop::before {
    top: 1px !important;

    /* نزّل الخط العلوي */
}

.section-workshop::after {
    bottom: 1px !important;

    /* ارفع الخط السفلي */
}

/* 3) لو الخطوط عناصر داخل السكشن (glow-separator-top/bottom) */
.section-workshop .glow-separator-top {
    top: 40px !important;
}

.section-workshop .glow-separator-bottom {
    bottom: 40px !important;
}

/* 4) لو الخطوط جاية من border على السكشن نفسه */
.section-workshop {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* 5) ضمان مسافة إضافية بين الخط والنص */
.section-workshop .heading-section {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

.section-workshop .tf-container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Responsive */
@media (max-width: 991px){
    .section-workshop {
        padding-top: 150px !important;
        padding-bottom: 170px !important;
    }

    .section-workshop::before {
        top: 28px !important;
    }

    .section-workshop::after {
        bottom: 28px !important;
    }

    .section-workshop .glow-separator-top {
        top: 28px !important;
    }

    .section-workshop .glow-separator-bottom {
        bottom: 28px !important;
    }
}

/* =========================
   FIX 3D SECTION: spacing + lines + Arabic wrapping
========================= */
/* 1) هوامش السكشن فوق/تحت */
.section-3d.tf-spacing-2 {
    padding-top: 170px !important;
    padding-bottom: 190px !important;
    direction: rtl;
}

/* 2) لو الخطين معمولة بـ pseudo */
.section-3d.tf-spacing-2::before {
    top: 34px !important;

    /* نزّل الخط العلوي */
}

.section-3d.tf-spacing-2::after {
    bottom: 34px !important;

    /* ارفع الخط السفلي */
}

/* 3) لو الخطين عناصر HTML (في بعض السكاشن) */
.section-3d.tf-spacing-2 .glow-separator-top {
    top: 34px !important;
}

.section-3d.tf-spacing-2 .glow-separator-bottom {
    bottom: 34px !important;
}

/* 4) مساحة إضافية للهيدر حتى ما يلمس الخط */
.section-3d.tf-spacing-2 .section-3d-head {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

/* 5) تقليل تقطع العربي داخل هذا السكشن */
.section-3d.tf-spacing-2,
.section-3d.tf-spacing-2 * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal;
    hyphens: none !important;
    unicode-bidi: plaintext;
}

/* 6) تحسين بسيط للنصوص داخل الكروت (اختياري) */
.section-3d.tf-spacing-2 .service-card-modern h5 {
    font-size: 19px !important;
    line-height: 1.35 !important;
}

.section-3d.tf-spacing-2 .service-card-modern p {
    line-height: 1.95 !important;
}

/* Responsive */
@media (max-width: 991px){
    .section-3d.tf-spacing-2 {
        padding-top: 130px !important;
        padding-bottom: 150px !important;
    }

    .section-3d.tf-spacing-2::before {
        top: 24px !important;
    }

    .section-3d.tf-spacing-2::after {
        bottom: 24px !important;
    }
}

.watermark-bg {
    position: relative;
}

.watermark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("image/backgrounds/bg-identity1.PNG");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    opacity: 0.04;

    /* علامة مائية فقط */
    pointer-events: none;
    z-index: 0;
}

.watermark-bg > * {
    position: relative;
    z-index: 1;
}

/* النص سطر واحد */
.watermark-bg .desc {
    white-space: nowrap;
}

.watermark-bg {
    position: relative;
    background-color: #0c1117;

    /* خلفية داكنة للتباين */
    padding: 100px 0;

    /* ارتفاع مناسب لظهور العلامة المائية */
    overflow: hidden;
}

.watermark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('image/backgrounds/bg-identity1.PNG');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    opacity: 0.04;

    /* توهج خفيف */
    pointer-events: none;
    z-index: 0;
}

.watermark-bg > * {
    position: relative;
    z-index: 1;
}

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700&display=swap');

.fixed-arabic-font {
    font-family: 'Tajawal', sans-serif !important;
}

.identity-color {
    color: #1b7696;
    font-weight: 600;
    font-size: 22px;
}

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;600;700&display=swap');

<style>
    /* --- تنسيق سكشن الاستوديو --- */
    .section-studio {
    background: linear-gradient(180deg, rgba(27, 118, 150, 0.1) 0%, #090F16 100%);
    padding: 100px 0;
}

/* تنسيق النص التعريفي */
.section-studio .desc {
    font-size: 20px !important;
    line-height: 2.2 !important;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    text-align: justify;
}

/* تنسيق العنوان (تعديل المسافة) */
.section-studio h2.title {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* إنزال الشطر الثاني للأسفل */
.section-studio h2.title span.sub-text {
    display: block;

    /* يجعلها في سطر منفصل */
    margin-top: 15px;

    /* ينزلها لتحت شوية */
    color: #1b7696;
}

/* --- تأثير الشعار (تغيير اللون) --- */
.studio-logo img {
    max-width: 180px;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* الفلتر السحري لتحويل الصورة إلى لون الهوية #1b7696 */
.studio-logo:hover img {
    /* هذا الكود يحول اللون الأبيض/الأسود إلى التركواز الخاص بكم */
    filter: invert(34%) sepia(69%) saturate(464%) hue-rotate(152deg) brightness(91%) contrast(93%);
    transform: scale(1.05);

    /* تكبير بسيط */
}

/* قائمة المميزات */
.studio-feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.studio-feature-list li {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.studio-feature-list li i {
    color: #1b7696;
    margin-left: 10px;
    font-size: 20px;
}

/* زر الاستوديو */
.studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: transparent;
    border: 1px solid #1b7696;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    transition: 0.3s;
}

.studio-btn:hover {
    background: #1b7696;
    color: #fff;
    transform: translateY(-5px);
}

/* تنسيق شبكة الصور */
.studio-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.studio-grid-top .img-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.studio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.studio-grid .img-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 15px;
    opacity: 0.8;
    transition: 0.3s;
}

.studio-grid .img-card:hover img {
    opacity: 1;
    transform: scale(1.03);
}

</style>
<style>
    /* تنسيق الطبقة الشفافة (Overlay) */
    .main-visual-banner .overlay {
    /* لون الهوية (#1b7696) بنسبة شفافية 0.5 */
    background-color: rgba(27, 118, 150, 0.5) !important;
    transition: opacity 0.5s ease-in-out;

    /* نعومة الانتقال */
    opacity: 1;

    /* الحالة الطبيعية: ظاهرة */
}

/* عند مرور الماوس: اخفاء الطبقة تماماً */
.main-visual-banner:hover .overlay {
    opacity: 0;
}

</style>
<style>
/* === Center wrapper (keeps banner perfectly centered) === */
.yt-center-wrap {
    display: flex;
    justify-content: center;
}

/* === Banner === */
.youtube-modern-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    /* IMPORTANT: keep order (icon left, text right) */
    direction: ltr;

    /* Centered size & nice look */
    width: min(920px, 100%);
    padding: 28px 54px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(35,47,51,0.95), rgba(26,36,40,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow: 0 14px 38px rgba(0,0,0,0.35);
}

/* subtle inner glow */
.youtube-modern-banner::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 30% 30%, rgba(27,118,150,0.20), transparent 55%);
    opacity: .9;
    pointer-events: none;
}

/* === Icon (left) === */
.yt-icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.yt-icon {
    width: 86px;
    height: 86px;
    color: #fff;
    transition: all .35s ease;
    z-index: 2;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.45);
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    transform: scale(0.85);
    transition: .35s;
}

/* === Separator === */
.yt-separator {
    width: 2px;
    height: 86px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    transition: .35s;
    flex: 0 0 auto;
}

/* === Text (right) === */
.yt-text-box {
    direction: rtl;
    text-align: right;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
}

.ar-title {
    margin: 0;
    line-height: 1.15;
    color: #fff;
    font-size: 40px;

    /* أكبر */
    font-weight: 800;
    font-family: 'Alexandria', sans-serif !important;
    letter-spacing: 0;
    transition: .3s;
}

.en-title {
    margin: 8px 0 14px;
    color: rgba(255,255,255,0.55);
    font-size: 18px;

    /* أكبر */
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Alexandria', sans-serif !important;
    transition: .3s;
}

.action-row {
    font-size: 16px;

    /* أكبر */
    color: #fff;
    opacity: .78;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .3s;
}

.action-row i {
    font-size: 18px;
    margin-top: 1px;
}

/* === Hover === */
.youtube-modern-banner:hover {
    transform: translateY(-6px);
    border-color: rgba(27,118,150,0.75);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.youtube-modern-banner:hover .yt-icon {
    color: #ff0000;
    transform: scale(1.12);
    filter: drop-shadow(0 0 22px rgba(255,0,0,0.55));
}

.youtube-modern-banner:hover .pulse-ring {
    opacity: 1;
    animation: pulse-red 1.5s infinite;
}

.youtube-modern-banner:hover .yt-separator {
    background: #fff;
    height: 102px;
    box-shadow: 0 0 12px rgba(255,255,255,0.65);
}

.youtube-modern-banner:hover .ar-title {
    color: #1b7696;
}

.youtube-modern-banner:hover .en-title {
    color: #fff;
    letter-spacing: 4px;
}

.youtube-modern-banner:hover .action-row {
    opacity: 1;
    color: #1b7696;
}

/* pulse */
@keyframes pulse-red{
    0% {
        transform: scale(0.85);
        opacity: .55;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* === Mobile === */
@media (max-width: 768px){
    .youtube-modern-banner {
        flex-direction: column;
        direction: ltr;

        /* keep stable */
        padding: 26px 18px;
        gap: 18px;
        width: min(520px, 92%);
    }

    .yt-separator {
        width: 70px;
        height: 2px;
    }

    .youtube-modern-banner:hover .yt-separator {
        width: 120px;
        height: 2px;
    }

    .yt-text-box {
        text-align: center;
        direction: rtl;
    }

    .ar-title {
        font-size: 30px;
    }

    .en-title {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .action-row {
        justify-content: center;
        font-size: 14px;
    }
}

</style>
/* الحاوية المسؤولة عن التوسيط */
.yt-center-wrap {
    display: flex;
    justify-content: center;

    /* توسيط أفقي */
    align-items: center;

    /* توسيط عمودي */
    width: 100%;
    margin: 0 auto;
}

/* البانر نفسه */
.youtube-modern-banner {
    display: flex;
    align-items: center;
    gap: 28px;
    direction: ltr;

    /* أيقونة يسار – نص يمين */
    margin: 0 auto;

    /* تأكيد التوسيط */
    width: min(920px, 95%);
    padding: 28px 54px;
    border-radius: 22px;
    background: linear-gradient(145deg, #232f33, #1a2428);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    transition: all .35s ease;
}

/* النص */
.yt-text-box {
    direction: rtl;
    text-align: right;
}

/* عناوين */
.ar-title {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    font-family: 'Alexandria', sans-serif !important;
}

.en-title {
    margin: 6px 0 12px;
    font-size: 18px;
    letter-spacing: 3px;
    color: rgba(255,255,255,.55);
}

/* موبايل */
@media (max-width:768px){
    .youtube-modern-banner {
        flex-direction: column;
        text-align: center;
        padding: 26px 18px;
    }

    .yt-text-box {
        text-align: center;
    }
}

.modern-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 22px;
    gap: 6px;

    /* المسافة العامة بين العناصر */
}

/* السنة */
.modern-badge .year {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
}

/* العنوان */
.modern-badge .label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 2px;
    opacity: 0.9;
}

/* السطر الفرعي */
.modern-badge .sub {
    font-size: 13px;
    line-height: 1.7;

    /* 👈 هذا الأهم */
    opacity: 0.75;
}

/* =====================================================================
   RTL Compatibility Patch (Safe)
   - Applies only when the document is RTL: <html dir="rtl">
   - Keeps any component-specific direction:ltr rules (like phone numbers/orbits)
   ===================================================================== */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    text-align: right;
}

/* Use Alexandria for Arabic pages (falls back safely if not loaded) */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    font-family: "Alexandria", sans-serif;
}

/* Template reset sets table cells to left; flip for RTL */
html[dir="rtl"] caption,
html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* If any LTR-specific helpers exist in the template, keep them readable in RTL */
html[dir="rtl"] .ltr,
html[dir="rtl"] [dir="ltr"] {
    direction: ltr;
}

/* FIX: remove extra blank space under footer caused by absolute SVG overflow */
#footer.footer-section {
    overflow: hidden !important;

    /* يمنع زيادة طول الصفحة */
    position: relative;
}

.glowing-separator-bottom {
    bottom: -40px;
}

/* ===== Smart Orbit: fix pulse perfectly centered ===== */
.smart-orbit-wrapper {
    position: relative;
}

.core-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;

    /* حجم الدائرة الوسط - عدله لو عندك مختلف */
    height: 110px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 5;
}

/* النبض = نفس مركز الدائرة */
.core-hub .pulse-circle {
    position: absolute;
    inset: 0;

    /* نفس حجم الدائرة تماماً */
    border-radius: 50%;
    background: rgba(27,118,150,0.25);
    box-shadow: 0 0 0 0 rgba(27,118,150,0.45);
    animation: pulseHub 1.6s ease-out infinite;
    z-index: 0;
}

/* الأيقونة فوق النبض */
.core-hub .icon-box {
    position: relative;
    width: 74px;

    /* الدائرة الداخلية */
    height: 74px;
    border-radius: 50%;
    background: #1b7696;
    display: grid;
    place-items: center;
    z-index: 2;
}

/* === FIX footer extra empty space === */
footer,
.footer-inner,
.footer-bottom-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body {
    overflow-x: hidden;
}

/* الدائرة المتحركة (Scroll to top) */
.progress-wrap {
    bottom: 30px !important;

    /* بدل ما تحجز مساحة */
}

/* منع أي عنصر مطلق من توسيع الصفحة */
footer {
    overflow: hidden;
}

/* نبض ناعم ومتناسق */
@keyframes pulseHub{
    0% {
        transform: scale(1);
        opacity: 0.85;
        box-shadow: 0 0 0 0 rgba(27,118,150,0.45);
    }

    70% {
        transform: scale(1.45);
        opacity: 0.0;
        box-shadow: 0 0 0 28px rgba(27,118,150,0);
    }

    100% {
        transform: scale(1.45);
        opacity: 0.0;
        box-shadow: 0 0 0 28px rgba(27,118,150,0);
    }
}

.core-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

.core-hub .icon-box {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #1b7696;
    display: grid;
    place-items: center;
    margin: 0;

    /* مهم */
}

/* ===== Title spacing fix ===== */
.section-counting-inner h2.title {
    line-height: 1.5;

    /* مهم */
}

.section-counting-inner h2.title span {
    display: inline-block;
    margin-top: 6px;

    /* مسافة بين السطرين */
}

/* Brand highlight inside paragraphs */
.brand-highlight {
    color: #1b7696;

    /* لون الهوية */
    font-weight: 600;
    white-space: nowrap;

    /* ===== Header Mobile Layout Fix ===== */
    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;

        /* مهم */
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .logo-header img {
        max-height: 46px;
        width: auto;
    }

    @media (max-width: 1199px){
        /* اخفي منيو الديسكتوب */
        .main-menu {
            display: none !important;
        }

        /* ترتيب عناصر اليمين */
        .header-content .nav-item {
            order: 2;
            flex: 0 0 auto;
        }

        .header-content .mobile-button {
            order: 3;
            flex: 0 0 auto;
        }

        /* زر EN ما يتمدد */
        .btn-transparent-modern {
            white-space: nowrap;
            padding: 8px 14px;
            border-radius: 999px;
        }
    }

    /* يحافظ على الاسم في سطر واحد */
}

/* رفع العلامة المائية للأعلى */
.operational-full-section .watermark-container {
    position: absolute;
    top: -180px;

    /* عدّل الرقم حسب اللي يعجبك */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.08;
}

.split-text {
    direction: rtl;
    unicode-bidi: plaintext;
}

/* ===== Modern Glass Offcanvas ===== */
.mobile-offcanvas {
    background: rgba(9,15,22,0.55) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255,255,255,0.10);
    box-shadow: -30px 0 60px rgba(0,0,0,0.45);
    color: #fff;
}

.mobile-offcanvas .offcanvas-header {
    padding: 18px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.offcanvas-brand img {
    height: 44px;
    width: auto;
}

.mobile-menu {
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.25s ease;
}

.mobile-menu li a:hover {
    transform: translateX(-2px);
    border-color: rgba(27,118,150,0.55);
    box-shadow: 0 10px 25px rgba(27,118,150,0.18);
}

.offcanvas-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lang-chip,
.cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    transition: .25s ease;
}

.cta-chip {
    border-color: rgba(27,118,150,0.55);
}

.lang-chip:hover,
.cta-chip:hover {
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

/* =================================================
   HIDE EN BUTTON IN MOBILE HEADER (ONLY)
================================================= */
@media (max-width: 1199px){
    .header-content .btn-transparent-modern {
        display: none !important;
    }
}

/* =================================================
   MOBILE OFFCANVAS (GLASS DESIGN)
================================================= */
.mobile-offcanvas {
    background: rgba(9,15,22,0.55) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255,255,255,0.12);
    box-shadow: -30px 0 60px rgba(0,0,0,0.45);
    color: #fff;
}

.mobile-offcanvas .offcanvas-header {
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.offcanvas-brand img {
    height: 42px;
}

/* =================================================
   MOBILE MENU ITEMS
================================================= */
.mobile-menu {
    list-style: none;
    padding: 18px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.25s ease;
}

.mobile-menu li a:hover {
    transform: translateX(-3px);
    border-color: rgba(27,118,150,0.6);
    box-shadow: 0 10px 25px rgba(27,118,150,0.2);
}

/* =================================================
   ACTION BUTTONS
================================================= */
.offcanvas-actions {
    margin-top: 22px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* WhatsApp Button */
.whatsapp-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    background: rgba(37,211,102,0.15);
    border: 1px solid rgba(37,211,102,0.6);
    backdrop-filter: blur(8px);
    transition: 0.25s ease;
}

.whatsapp-chip i {
    font-size: 20px;
    color: #25D366;
}

.whatsapp-chip:hover {
    background: rgba(37,211,102,0.25);
    box-shadow: 0 10px 25px rgba(37,211,102,0.35);
    transform: translateY(-2px);
}

/* Language Button */
.lang-chip {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.25);
    transition: 0.25s ease;
}

.lang-chip:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

/* --- إعدادات قسم الهيرو --- */
.hero-section {
    position: relative;
    width: 100%;

    /* ارتفاع كامل للشاشة مع حد أدنى لضمان عدم قص المحتوى */
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;

    /* مساحة للهيدر */
    padding-bottom: 50px;
}

/* --- الخلفية والطبقة الشفافة --- */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg-image .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.overlay-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* تغميق الخلفية لزيادة وضوح النص الأبيض */
    background: linear-gradient(180deg, rgba(9,15,22,0.6) 0%, rgba(9,15,22,0.8) 100%);
    z-index: 1;
}

/* --- النصوص (Typography) --- */
.hero-content {
    padding: 0 15px;

    /* هوامش جانبية لمنع الالتصاق بالحواف */
}

/* البادج (منصة) */
.badge-style {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
    border-radius: 50px;
    margin-left: 10px;
    font-size: 14px;
    backdrop-filter: blur(5px);
}

/* العنوان الرئيسي - استخدام clamp لجعل الخط يتغير بسلاسة حسب حجم الشاشة */
.hero-content h1.title {
    /* الخط: أقل حجم 32px، الحجم المفضل 5% من الشاشة، أقصى حجم 75px */
    font-size: clamp(32px, 5vw, 65px);
    line-height: 1.3;
    font-weight: 800;

    /* خط عريض جداً مثل الصورة */
}

/* تمييز كلمة (شركة إعلامية) */
.hero-content .highlight {
    background-color: #fff;
    color: #1b7696 !important;
    padding: 0 10px;
    display: inline-block;

    /* لضمان عدم تكسر الخلفية */
    transform: skewX(-5deg);

    /* ميلان بسيط جمالي */
}

/* الوصف */
.hero-content p.desc {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;

    /* توسيط الوصف في الموبايل ومحاذاة لليمين في الديسكتوب */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .hero-content p.desc {
        margin-right: 0;
        margin-left: auto;
    }

    /* للدعم العربي RTL */
}

/* --- الأزرار --- */
.hero-btns {
    margin-top: 30px;
}

.tf-btn {
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* زر شفاف مودرن */
.btn-modern-transparent {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    backdrop-filter: blur(4px);
}

.btn-modern-transparent:hover {
    background: #1b7696;
    border-color: #1b7696;
    color: #fff;
}

/* زر تواصل معنا */
.btn-outline-light-custom {
    border: 1px solid #fff;
    color: #fff;
}

.btn-outline-light-custom:hover {
    background: #fff;
    color: #000;
}

/* --- تعديلات خاصة للموبايل (Media Queries) --- */
@media (max-width: 991px) {
    .hero-section {
        padding-top: 100px;

        /* مساحة إضافية من الأعلى */
        text-align: center;
    }

    .hero-content h1.title {
        margin-bottom: 20px !important;
    }

    .hero-btns {
        flex-direction: column;

        /* الأزرار تحت بعض في أصغر الشاشات */
        width: 100%;
    }

    .hero-btns .tf-btn {
        width: 100%;

        /* الزر يأخذ العرض كامل */
        justify-content: center;
    }

    /* تصغير حجم الموبايل قليلاً ليناسب الشاشة */
    .mask-home-1 {
        display: none;

        /* إخفاء الدائرة الكبيرة في الخلفية على الموبايل */
    }
}

@media (min-width: 500px) and (max-width: 991px) {
    .hero-btns {
        flex-direction: row;

        /* إعادة الأزرار بجانب بعض في التابلت */
        width: auto;
    }

    .hero-btns .tf-btn {
        width: auto;
    }
}

/* =====================================================
   MOBILE/TABLET ONLY — Network + 4 logos responsive
   (Desktop untouched)
===================================================== */
/* Tablet & below */
@media (max-width: 991px){
    /* قلل Padding الجانبي اللي بيعمل سكرول */
    .ecosystem-inner .container-fluid.px-5 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* صغر اللوجو الرئيسي */
    .ecosystem-inner .main-logo-img-large img {
        max-width: 170px !important;
        height: auto !important;
    }

    /* صغر ارتفاع الـ SVG شوية */
    .ecosystem-inner .network-svg-container-wide {
        height: 90px !important;
        margin: 12px 0 6px !important;
    }

    .ecosystem-inner .network-svg-container-wide svg {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    /* خليه Grid 4 أعمدة لكن أصغر */
    .ecosystem-inner .partners-grid-pure {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        justify-items: center;
        margin-top: -10px !important;

        /* يقرب الشعارات من نهاية الخطوط */
    }

    /* تصغير الشعار نفسه */
    .ecosystem-inner .partners-grid-pure .logo-only {
        width: 100%;
        max-width: 110px !important;
        padding: 10px !important;
    }

    .ecosystem-inner .partners-grid-pure .logo-only img {
        max-width: 90px !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }
}

/* Mobile */
@media (max-width: 575px){
    /* خليها 2×2 على الموبايل */
    .ecosystem-inner .partners-grid-pure {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -12px !important;

        /* اتصال أقوى */
    }

    .ecosystem-inner .partners-grid-pure .logo-only {
        max-width: 120px !important;
        padding: 10px !important;
    }

    .ecosystem-inner .partners-grid-pure .logo-only img {
        max-width: 92px !important;
    }

    /* صغر الـ SVG أكثر للموبايل */
    .ecosystem-inner .network-svg-container-wide {
        height: 75px !important;
    }
}

/* =====================================================
   ABOUT MINI — Responsive only (Desktop untouched)
===================================================== */
/* Tablet & below */
@media (max-width: 991px){
    #aboutMini {
        padding-top: 36px !important;
        padding-bottom: 56px !important;
    }

    #aboutMini .tf-container-wide {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #aboutMini .about-mini-intro {
        max-width: 720px;
        margin: 0 auto;
    }

    #aboutMini .about-line {
        margin: 0 0 12px !important;
        line-height: 1.85 !important;
    }

    #aboutMini .about-line.main-line {
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    #aboutMini .about-line.sub-line {
        font-size: 14px !important;
        opacity: 0.92;
    }

    /* خلي الكلمة المميزة أنعم على الموبايل */
    #aboutMini .identity-text {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 999px;
        background: rgba(27,118,150,0.14);
        border: 1px solid rgba(27,118,150,0.25);
        white-space: nowrap;
    }

    /* قلل التوهجات */
    #aboutMini .about-glow-line {
        opacity: 0.55;
        transform: scaleX(0.9);
    }

    #aboutMini .about-glow-blob {
        opacity: 0.35;
        filter: blur(18px);
    }

    /* قلل المسافة قبل الـ separator */
    #aboutMini .flow-separator {
        margin-top: 36px !important;
    }
}

/* Mobile */
@media (max-width: 575px){
    #aboutMini {
        padding-top: 28px !important;
        padding-bottom: 44px !important;
    }

    #aboutMini .about-mini-intro {
        text-align: center !important;
        max-width: 360px;
    }

    #aboutMini .about-line.main-line {
        font-size: 15px !important;
    }

    #aboutMini .about-line.sub-line {
        font-size: 13px !important;
    }

    #aboutMini .about-line {
        margin-bottom: 10px !important;
    }

    #aboutMini .flow-separator {
        margin-top: 28px !important;
    }
}

/* =====================================================
   ABOUT SECTION — Layout Fix (Desktop untouched)
===================================================== */
/* ===== Desktop (تأكيد الاتجاه فقط) ===== */
.about-section-modern {
    direction: rtl;
}

.about-section-modern .content-wrapper {
    text-align: right;
}

/* =====================================================
   TABLET & MOBILE
===================================================== */
@media (max-width: 991px){
    /* المسافات العامة */
    .about-section-modern {
        padding: 70px 0 !important;
    }

    /* قلب الترتيب: نص فوق – صورة تحت */
    .about-section-modern .row {
        flex-direction: column !important;
    }

    /* النص */
    .about-section-modern .content-wrapper {
        padding: 0 !important;
        text-align: right;
    }

    .about-section-modern .main-title {
        font-size: 30px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .about-section-modern .main-title br {
        display: none;
    }

    .about-section-modern .desc {
        font-size: 14px !important;
        line-height: 1.8 !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }

    /* قائمة المميزات */
    .about-section-modern .features-list li {
        gap: 14px;
        margin-bottom: 18px;
    }

    .about-section-modern .features-list h5 {
        font-size: 16px;
    }

    .about-section-modern .features-list p {
        font-size: 13px;
    }

    /* الزر */
    .about-section-modern .modern-btn {
        padding: 14px 30px;
        font-size: 14px;
    }

    /* ===== الصورة ===== */
    .about-section-modern .image-breakout-wrapper {
        padding: 0 !important;
        margin: 30px 0 0 !important;
    }

    .about-section-modern .modern-backdrop {
        width: 100%;
        border-radius: 18px;
    }

    .about-section-modern .modern-img-box {
        height: 320px !important;
        margin: 0 !important;
        border-radius: 18px;
    }

    /* ===== البادج (1997) ===== */
    .about-section-modern .modern-badge {
        right: 12px !important;
        top: 12px !important;
        padding: 14px 18px;
        border-radius: 12px;
    }

    .about-section-modern .modern-badge .year {
        font-size: 26px;
    }

    .about-section-modern .modern-badge .label {
        font-size: 13px;
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */
@media (max-width: 575px){
    .about-section-modern {
        padding: 55px 0 !important;
    }

    .about-section-modern .main-title {
        font-size: 26px !important;
    }

    .about-section-modern .modern-img-box {
        height: 260px !important;
    }

    .about-section-modern .modern-badge {
        padding: 12px 14px;
    }

    .about-section-modern .modern-badge .year {
        font-size: 22px;
    }
}

/* =====================================================
   PARTNERS CAROUSEL — MOBILE/TABLET FIX ONLY
   Desktop untouched ✅
===================================================== */
/* ===============================
   TABLET & MOBILE
=============================== */
@media (max-width: 991px){
    /* 1) ترتيب السكشن: النص فوق – الدائرة تحت */
    .partners-carousel-section .partners-layout {
        flex-direction: column !important;
    }

    .partners-carousel-section .partners-text {
        order: 1 !important;
    }

    .partners-carousel-section .partners-ring {
        order: 2 !important;
    }

    /* 2) ضبط الهوامش فوق وتحت */
    .partners-carousel-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .partners-carousel-section .container-fluid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 3) تنسيق النص */
    .partners-carousel-section .partners-text .text-content {
        text-align: center !important;
        max-width: 560px;
        margin: 0 auto 18px !important;
    }

    /* ===== العنوان ===== */
    .partners-carousel-section .partners-text h2.title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        white-space: normal;
    }

    /* الغاء كسر السطر */
    .partners-carousel-section .partners-text h2.title br {
        display: none !important;
    }

    /* خلي كلمة النجاح مع العنوان */
    .partners-carousel-section .partners-text h2.title .highlight {
        display: inline-block;
        margin-right: 6px;
        padding: 0 8px;
        border-radius: 6px;
        background: rgba(27,118,150,0.15);
    }

    /* الوصف */
    .partners-carousel-section .partners-text p.desc {
        font-size: 13.5px !important;
        line-height: 1.9 !important;
        margin-bottom: 14px !important;
        opacity: 0.92;
    }

    /* الإحصائيات */
    .partners-carousel-section .stats-box {
        justify-content: center !important;
        gap: 14px !important;
        flex-wrap: wrap;
    }

    .partners-carousel-section .stat .num {
        font-size: 20px !important;
    }

    .partners-carousel-section .stat .txt {
        font-size: 12px !important;
    }

    /* =====================================================
   KILL THE OVAL — it's coming from cells / container shadows
   Mobile/Tablet only ✅
===================================================== */
    @media (max-width: 991px){
        /* امنع أي ظل/خلفية على الخلية نفسها (غالبًا سبب المبيضاوية) */
        .partners-carousel-section .carousel__cell {
            background: transparent !important;
            box-shadow: none !important;
            filter: none !important;
            outline: none !important;
        }

        /* امنع أي ظل/فلتر على رابط داخل chip */
        .partners-carousel-section .logo-chip a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: transparent !important;
            box-shadow: none !important;
            filter: none !important;
        }

        /* لو في ظل/فلتر على scene/container نفسه */
        .partners-carousel-section .scene,
        .partners-carousel-section .carousel-container {
            background: transparent !important;
            box-shadow: none !important;
            filter: none !important;
        }

        /* في بعض القوالب تعمل ظل بيضاوي عبر transform + blur */
        .partners-carousel-section .scene * {
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
    }

    /* ✅ كروت أصغر */
    .partners-carousel-section .carousel__cell {
        width: 79px !important;
        height: 60px !important;
    }

    /* ✅ radius منطقي: يقلل التلاصق بدون ما يبوّظ المشهد */
    .partners-carousel-section .carousel {
        --radius: 400px !important;

        /* =====================================================
   PARTNERS — Center logo vertical control
===================================================== */
        @media (max-width: 991px){
            .partners-carousel-section .scene {
                position: relative !important;
            }

            .partners-carousel-section .center-core--static {
                position: absolute !important;
                left: 60% !important;

                /* 🔧 تحكم الارتفاع */
                top: 50% !important;
                transform: translateX(-50%) !important;
                z-index: 50 !important;
                pointer-events: none !important;
            }
        }

        /* موبايل صغير */
        @media (max-width: 675px){
            .partners-carousel-section .center-core--static {
                top: 15% !important;
            }
        }
    }
}

/* ================================================== */
/* تنسيقات خاصة بالجوال والأجهزة اللوحية (أقل من 992px) */
/* ================================================== */
@media (max-width: 991.98px) {
    .partners-ring {
        /* 1. التحكم في الارتفاع (المسافة بين الحلقة والنص) */
        /* كلما زاد الرقم بالسالب (مثلا -150) ترتفع الحلقة للأعلى أكثر */
        /* كلما قل الرقم (مثلا -50) تنزل للأسفل */
        margin-top: -90px;

        /* 2. التحكم في حجم الحلقة (تكبير/تصغير) لتناسب شاشة الجوال */
        transform: scale(0.75);

        /* نقطة الارتكاز: لضمان أن الرفع يتم باتجاه الأعلى */
        transform-origin: top center;

        /* ضمان بقاء الحلقة فوق الخلفية */
        position: relative;
        z-index: 2;
    }
}

.center-core {
    /* ============== منطقة التحكم في الشعار ============== */
    /* 1. التحريك للأعلى والأسفل */
    /* لإنزال الشعار للأسفل: ضع رقماً موجباً (مثلاً 50px) */
    /* لرفع الشعار للأعلى: ضع رقماً سالباً (مثلاً -50px) */
    margin-top: -55px !important;

    /* 2. التحكم في حجم الشعار (اختياري) */
    /* 1.0 = الحجم الطبيعي | 0.8 = أصغر | 1.2 = أكبر */
    transform: scale(1.0);

    /* ================================================= */
    position: relative;

    /* لضمان استجابة المارجن */
}

@media (max-width: 991.98px) {
    /* استهداف الـ SVG المحدد وإخفاؤه في الشاشات الصغيرة */
    svg[width="700"][height="700"] {
        display: none !important;
    }
}

/* ================================================== */
/* معالجة الفراغ السفلي في الجوال فقط */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. إزالة المسافات السفلية من الحاويات الرئيسية */
    .ecosystem-inner,
    .partners-carousel-section,
    .partners-carousel-section .container-fluid {
        padding-bottom: 0px !important;
    }

    /* 2. سحب الفراغ المتبقي أسفل الحلقة بالقوة */
    .partners-ring {
        /* هذا هو الرقم السحري للتحكم في الفراغ */
        /* كلما زاد الرقم بالسالب (مثلا -200) يختفي الفراغ أكثر */
        margin-bottom: -150px;
        position: relative;
        z-index: 5;

        /* لضمان أن العناصر التي تحته تظهر بشكل صحيح عند السحب */
    }
}

/* ================================================== */
/* تنسيق قسم "من نحن" للموبايل والتابلت */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. تحويل الحاوية إلى عمودية بدلاً من أفقية */
    .about-inner {
        flex-direction: column !important;
        align-items: flex-start !important;

        /* محاذاة العناصر لليمين (بداية السطر) */
        gap: 40px;

        /* مسافة فاصلة بين النص والتصميم */
    }

    /* 2. ضبط عرض النصوص ليأخذ كامل الشاشة */
    .right-content {
        width: 100% !important;

        /* إلغاء الـ 60% المكتوبة في الـ HTML */
        padding-left: 0 !important;
        text-align: right;

        /* ضمان أن النص يظل يمين */
    }

    /* 3. ضبط قسم التصميم (المدارات) */
    .smart-orbit-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;

        /* توسيط التصميم في الموبايل ليكون شكله أفضل */
        align-items: center;
        margin-top: 20px;

        /* تصغير حجم المدارات قليلاً لتناسب شاشة الجوال */
        transform: scale(0.85);
    }

    /* 4. تقليل الهوامش الكبيرة جداً في الموبايل */
    .section-about {
        margin-top: 50px !important;
        padding-top: 60px !important;
        margin-bottom: 40px !important;
    }
}

/* ================================================== */
/* تنسيق قسم "سجل من الذهب" للموبايل والتابلت */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. ضبط الحاوية الرئيسية وعكس الترتيب (الصورة فوق والنص تحت) */
    .section-counting-inner {
        flex-direction: column-reverse !important;

        /* عكس العناصر */
        gap: 30px !important;
        align-items: center !important;
    }

    /* 2. ضبط الصورة لتأخذ كامل العرض مع حواف عصرية */
    .image-part {
        width: 100% !important;
        min-width: 100% !important;
    }

    .image-part img {
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        margin-bottom: 20px;
    }

    /* 3. تنسيق النصوص لتبدو كبطاقة معلومات */
    .content-part {
        width: 100% !important;
        text-align: center !important;

        /* توسيط النص للموبايل */
        padding: 0 15px;
    }

    /* تحسين العناوين */
    .heading-section .title {
        font-size: 28px !important;

        /* تصغير الخط قليلاً للجوال */
        line-height: 1.4 !important;
    }

    /* ضبط زر "اقرأ المزيد" ليكون في المنتصف */
    .content-part .mt-30 {
        display: flex;
        justify-content: center;
    }

    /* 4. تحسين التاجات (Tags) لتكون أزراراً أنيقة ومتقاربة */
    .achievements-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;

        /* توسيط التاجات */
        gap: 8px !important;
    }

    .tag-item {
        font-size: 13px !important;
        padding: 8px 16px !important;
        background: rgba(27, 118, 150, 0.05);

        /* خلفية خفيفة جداً */
        border-radius: 50px;
        border: 1px solid rgba(27, 118, 150, 0.1);
    }

    /* 5. تحويل عداد الأرقام إلى شبكة (Grid) 2x2 */
    .wg-counter {
        display: grid !important;
        grid-template-columns: 1fr 1fr;

        /* عمودين متساويين */
        gap: 15px !important;
        margin-top: 40px !important;
        width: 100%;
    }

    /* تنسيق كارت العداد */
    .counter-item {
        min-width: auto !important;

        /* إلغاء العرض الثابت */
        background: rgba(255, 255, 255, 0.03);

        /* خلفية زجاجية خفيفة */
        border-radius: 15px;
        padding: 20px 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* تصغير أيقونات العداد قليلاً */
    .counter-item .icon {
        width: 50px !important;
        height: 50px !important;
    }

    .counter-item .icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .number-counter {
        font-size: 32px !important;

        /* تصغير الرقم قليلاً ليتناسب مع المربع */
    }
}

/* ================================================== */
/* تحديث: إضافة خط الليزر أسفل الصورة في الموبايل */
/* ================================================== */
@media (max-width: 991.98px) {
    /* ... (نفس الأكواد السابقة لترتيب العناصر) ... */
    /* 1. تخصيص حاوية الصورة لإضافة الخط أسفلها */
    .image-part {
        width: 100% !important;
        min-width: 100% !important;
        position: relative;

        /* ضروري لتموضع الخط */
        margin-bottom: 40px;

        /* ترك مسافة إضافية للخط والنص الذي يليه */
    }

    /* 2. رسم خط الليزر المتوهج */
    .image-part::after {
        content: '';
        position: absolute;
        bottom: -20px;

        /* مكان الخط أسفل الصورة */
        left: 50%;
        transform: translateX(-50%);

        /* توسيط الخط تماماً */
        width: 80%;

        /* عرض الخط (يمكنك جعله 100% إذا أردت) */
        height: 3px;

        /* سمك الخط */
        /* تأثير التوهج واللون (نفس هوية الموقع) */
        background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);
        box-shadow: 0 0 15px #1b7696, 0 0 30px rgba(27, 118, 150, 0.5);
        opacity: 0.9;
        border-radius: 2px;
    }

    /* تحسين شكل الصورة نفسها */
    .image-part img {
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        margin-bottom: 0;

        /* إزالة المارجن من الصورة لأننا وضعناه في الحاوية */
    }
}

/* ================================================== */
/* تنسيق قسم "سجل من الذهب" للموبايل - نسخة محدثة */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. عكس الترتيب (الصورة فوق والنص تحت) */
    .section-counting-inner {
        flex-direction: column-reverse !important;
        gap: 30px !important;
        align-items: center !important;
    }

    /* 2. تنسيق الصورة وخط الليزر */
    .image-part {
        width: 100% !important;
        min-width: 100% !important;
        position: relative;
        margin-bottom: 40px;
    }

    /* رسم خط الليزر المتوهج */
    .image-part::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);
        box-shadow: 0 0 15px #1b7696, 0 0 30px rgba(27, 118, 150, 0.5);
        opacity: 0.9;
        border-radius: 2px;
    }

    .image-part img {
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        margin-bottom: 0;
    }

    /* 3. تنسيق النصوص (محاذاة لليمين) */
    .content-part {
        width: 100% !important;
        text-align: right !important;

        /* المحاذاة لليمين */
        padding: 0 5px;

        /* تقليل الهوامش الجانبية */
    }

    /* ضبط العناوين والوصف */
    .heading-section .title {
        font-size: 26px !important;
        line-height: 1.4 !important;
    }

    .heading-section .desc {
        font-size: 15px !important;
        line-height: 1.8 !important;
        text-align: right !important;

        /* تأكيد محاذاة النص التعريفي لليمين */
    }

    /* ضبط الزر ليكون في اليمين أيضاً */
    .content-part .mt-30 {
        display: flex;
        justify-content: flex-start;

        /* يبدأ من اليمين (في اللغة العربية) */
    }

    /* 4. تنسيق التاجات والأرقام (كما هي في التصميم المودرن) */
    .achievements-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;

        /* التاجات تبدأ من اليمين */
        gap: 8px !important;
    }

    .tag-item {
        font-size: 13px !important;
        padding: 8px 16px !important;
        background: rgba(27, 118, 150, 0.05);
        border-radius: 50px;
        border: 1px solid rgba(27, 118, 150, 0.1);
    }

    /* شبكة الأرقام */
    .wg-counter {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 15px !important;
        margin-top: 40px !important;
        width: 100%;
    }

    .counter-item {
        min-width: auto !important;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 15px;
        padding: 20px 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* ================================================== */
/* تحديث: مربعات الإحصائيات بخلفية الهوية وخط متوهج */
/* ================================================== */
@media (max-width: 991.98px) {
    /* ... (الأكواد السابقة الخاصة بالصور والنصوص كما هي) ... */
    /* تنسيق كارت الإحصائيات */
    .counter-item {
        min-width: auto !important;

        /* 1. خلفية بلون الهوية شفاف */
        background: rgba(27, 118, 150, 0.15) !important;

        /* حدود خفيفة بنفس اللون */
        border: 1px solid rgba(27, 118, 150, 0.3) !important;
        border-radius: 15px;
        padding: 20px 10px !important;
        position: relative;

        /* ضروري لتموضع الخط */
        overflow: hidden;

        /* لضمان أن الخط لا يخرج عن الحواف المستديرة */
    }

    /* 2. خط الليزر المتوهج أسفل كل مربع */
    .counter-item::after {
        content: '';
        position: absolute;
        bottom: 0;

        /* مكانه في الأسفل تماماً */
        left: 0;
        width: 100%;
        height: 3px;

        /* سمك الخط */
        /* لون الهوية متدرج من الأطراف */
        background: linear-gradient(90deg, transparent 0%, #1b7696 50%, transparent 100%);

        /* التوهج */
        box-shadow: 0 -2px 10px #1b7696, 0 0 20px rgba(27, 118, 150, 0.5);
        opacity: 1;
    }
}

/* ================================================== */
/* تصميم مودرن للجوال: إخفاء الشعارات + ترتيب جديد */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. إعداد الحاوية لترتيب العناصر عمودياً */
    .hierarchy-main-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 2. إخفاء الشعارات، الخطوط، والعنوان القديم (ركائز النجاح) */
    .level-2-logos,
    .diagram-lines-final,
    .hierarchy-main-wrapper::before,
    .hierarchy-main-wrapper::after,
    .pulse-node-fixed,
    .title-inline-box,
    .success-box-identity,
    .level-1-header .title {
        display: none !important;
    }

    /* ============================================== */
    /* [1] العنوان الجديد (منظومتنا العملية المتكاملة) */
    /* ============================================== */
    .level-1-header {
        order: 1 !important;

        /* الترتيب: الأول */
        text-align: right !important;
        margin: 40px 20px 10px 20px !important;
        width: auto !important;
    }

    .level-1-header .heading-section {
        margin-bottom: 0 !important;
    }

    /* تحويل النص الفرعي ليصبح هو العنوان الرئيسي */
    .level-1-header .sub-title {
        font-size: 32px !important;

        /* تكبير الخط */
        font-weight: 900 !important;

        /* عريض جداً */
        color: #ffffff !important;

        /* لون أبيض */
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        display: block !important;
        opacity: 1 !important;

        /* اللمسة الجمالية: خط جانبي بلون الهوية */
        border-right: 5px solid #1b7696 !important;
        padding-right: 15px !important;
    }

    /* ============================================== */
    /* [2] النص التعريفي - محاذاة يمين */
    /* ============================================== */
    .operational-wide-box {
        order: 2 !important;

        /* الترتيب: الثاني */
        text-align: right !important;
        margin: 10px 20px 30px 20px !important;
        padding: 0 !important;
    }

    /* إخفاء العنوان المكرر داخل النص (إن وجد) */
    .operational-wide-box .heading-section {
        display: none !important;
    }

    .operational-wide-box .op-content {
        display: block !important;
        text-align: right !important;
        width: 100% !important;
    }

    /* تنسيق الفقرة */
    .op-paragraph {
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #cfcfcf !important;

        /* لون رمادي فاتح */
        margin-bottom: 10px !important;
    }

    .highlight-text {
        color: #1b7696 !important;
        font-weight: bold !important;
    }

    /* ============================================== */
    /* [3] صور الرول (القصص) - الترتيب الثالث */
    /* ============================================== */
    .level-3-images {
        order: 3 !important;

        /* الترتيب: الثالث */
        margin-top: 10px !important;
        display: flex !important;
        overflow-x: auto !important;

        /* تفعيل السحب */
        gap: 15px !important;
        padding: 0 20px 40px 20px !important;

        /* تأثير تقليب الصفحات (Snap) */
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
    }

    .level-3-images::-webkit-scrollbar {
        display: none !important;
    }

    /* تنسيق الكارت */
    .company-card-final {
        min-width: 280px !important;
        scroll-snap-align: center !important;

        /* الوقوف في المنتصف */
        background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    .image-box-329 {
        height: 160px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 15px !important;
    }

    .image-box-329 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .company-card-final .name {
        text-align: right !important;
        font-size: 16px !important;
        color: #fff !important;
        margin-bottom: 8px !important;
        font-weight: bold !important;
    }

    .company-card-final .desc {
        text-align: right !important;
        font-size: 13px !important;
        color: #9aa8b5 !important;
        line-height: 1.5 !important;
    }

    /* تنظيف هيكل الرول ليعمل السحب */
    .level-3-images .row,
    .level-3-images .col-md-3 {
        display: contents !important;
    }

    /* إخفاء معرض الصور القديم */
    .mosaic-gallery {
        display: none !important;
    }
}

/* ================================================== */
/* تصميم مودرن نهائي: إصلاح انقطاع النص يسار الشاشة */
/* ================================================== */
@media (max-width: 991.98px) {
    /* 1. الحاوية الرئيسية */
    .hierarchy-main-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        position: relative !important;
        overflow-x: hidden !important;

        /* منع التمرير الجانبي للصفحة */
        width: 100% !important;
    }

    /* إخفاء العناصر غير المطلوبة */
    .level-2-logos,
    .diagram-lines-final,
    .hierarchy-main-wrapper::before,
    .hierarchy-main-wrapper::after,
    .pulse-node-fixed,
    .title-inline-box,
    .success-box-identity,
    .level-1-header .title {
        display: none !important;
    }

    /* ============================================== */
    /* [1] العنوان الجديد (منظومتنا العملية) */
    /* ============================================== */
    .level-1-header {
        order: 1 !important;
        text-align: right !important;
        margin: 30px 0 10px 0 !important;
        padding: 0 25px !important;

        /* مسافة آمنة من الجوانب */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .level-1-header .heading-section {
        margin-bottom: 0 !important;
    }

    .level-1-header .sub-title {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #1b7696 !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        display: block !important;
        opacity: 1 !important;
        border-right: 3px solid #1b7696 !important;
        padding-right: 12px !important;
    }

    /* ============================================== */
    /* [2] تنسيق النص - إصلاح الانقطاع (Fix Clipping) */
    /* ============================================== */
    .operational-wide-box {
        order: 2 !important;
        text-align: right !important;

        /* إزالة المارجن الجانبي واستبداله بالبادينج لمنع الانقطاع */
        margin: 10px 0 30px 0 !important;
        padding: 0 25px !important;

        /* حشوة داخلية تمنع النص من لمس الحافة */
        width: 100% !important;
        box-sizing: border-box !important;

        /* ضروري جداً لحساب العرض */
    }

    .operational-wide-box .heading-section {
        display: none !important;
    }

    .operational-wide-box .op-content {
        display: block !important;
        text-align: right !important;
        width: 100% !important;
    }

    /* تنسيق الفقرات */
    .op-paragraph {
        text-align: right !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        color: #e0e0e0 !important;
        margin-bottom: 12px !important;
        direction: rtl !important;

        /* ضمان عدم خروج النص */
        word-wrap: break-word !important;
        max-width: 100% !important;
    }

    .highlight-text {
        color: #1b7696 !important;
        font-weight: bold !important;
    }

    /* ============================================== */
    /* [3] صور الرول (القصص) */
    /* ============================================== */
    .level-3-images {
        order: 3 !important;
        margin-top: 5px !important;
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px !important;

        /* مسافة آمنة للرول */
        padding: 0 25px 40px 25px !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .level-3-images::-webkit-scrollbar {
        display: none !important;
    }

    /* الكارت */
    .company-card-final {
        min-width: 260px !important;
        scroll-snap-align: center !important;
        background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    .image-box-329 {
        height: 150px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }

    .image-box-329 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .company-card-final .name {
        text-align: right !important;
        font-size: 15px !important;
        color: #fff !important;
        margin-bottom: 5px !important;
        font-weight: bold !important;
    }

    .company-card-final .desc {
        text-align: right !important;
        font-size: 12px !important;
        color: #9aa8b5 !important;
        line-height: 1.5 !important;
    }

    .level-3-images .row,
    .level-3-images .col-md-3 {
        display: contents !important;
    }

    .mosaic-gallery {
        display: none !important;
    }
}

/* ================================================== */
/* إنزال سكشن "سجل من الذهب" للأسفل (موبايل فقط) */
/* ================================================== */
@media (max-width: 991.98px) {
    .section-counting {
        /* زيادة المسافة العلوية بقوة لإنزاله */
        margin-top: 380px !important;

        /* إضافة حشوة داخلية لراحة العين */
        padding-top: 50px !important;
        position: relative !important;
        z-index: 5;
    }

    /* تحسين إضافي: التأكد من أن المحتوى الداخلي لا يلتصق بالحواف */
    .section-counting-inner {
        margin-bottom: 40px !important;
    }
}

@media (max-width: 768px) {
    .about-mini-intro {
        text-align: right !important;
        direction: rtl;
        padding: 20px;
    }

    .about-line.main-line {
        text-align: right;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 16px;
        color: #ffffff;
    }

    .about-line.sub-line {
        text-align: right;
        font-size: 16px;
        line-height: 1.9;
        margin-bottom: 12px;
        color: #cfd8dc;
    }

    .about-line.main-line .identity-text {
        background: rgba(0, 180, 216, 0.15);
        color: #00b4d8;
        padding: 4px 10px;
        border-radius: 6px;
    }
}

/* ============ Mobile only ============ */
@media (max-width: 768px) {
    /* 1) ترتيب البلوك للجوال + منع القص */
    .tf-container,
    .about-inner,
    .smart-orbit-wrapper {
        overflow: visible !important;
    }

    .about-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 22px !important;
    }

    .about-inner .right-content {
        width: 100% !important;
    }

    /* 2) محاذاة يمين للنصوص */
    .heading-section,
    .section-content,
    .desc,
    .desc p,
    .sub-title,
    .heading-section .title,
    .heading-section h2 {
        direction: rtl;
        text-align: right !important;
    }

    .sub-title {
        margin-bottom: 10px !important;
        font-size: 15px !important;
    }

    .heading-section h2,
    .heading-section .title {
        font-size: 28px !important;
        line-height: 1.35 !important;
    }

    .desc p {
        font-size: 16px !important;
        line-height: 1.9 !important;
        margin: 0 !important;
    }

    /* زر اقرأ المزيد: خليه يمين */
    .section-content .tf-btn {
        justify-content: center;
        align-self: flex-end;
    }

    /* 3) إصلاح الـ ORBIT على الجوال */
    .smart-orbit-wrapper {
        width: 100% !important;
        max-width: 340px;

        /* يتحكم بالحجم على الجوال */
        margin: 0 auto !important;
        position: relative;
        transform: scale(0.92);

        /* يصغّر شوي عشان ما يطلع برا */
        transform-origin: center;
        padding: 18px 0 6px;
    }

    /* لو في أي عنصر أب/حاوية تقصه: امنع القص */
    .tf-container-wide,
    .tf-container .about-inner,
    .tf-container .about-inner > * {
        overflow: visible !important;
    }

    /* ضبط أماكن الليبلز (عشان "هوية بصرية" ما تنقص) */
    .planet-label {
        white-space: nowrap;
        font-size: 13px !important;
    }

    .planet-label.top {
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .planet-label.right {
        right: -6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .planet-label.bottom {
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* الأهم: اليسار كان ينقص — نخليه داخل المساحة */
    .planet-label.left {
        left: -6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* لو نص الليبل طويل وما زال يطلع برا، قلّل الإزاحة أكثر */
    .planet-label.left .text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* مركز الأيقونة */
    .core-hub .icon-box {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 768px) {
    /* تأكيد عدم القص */
    .smart-orbit-wrapper,
    .smart-orbit-wrapper * {
        overflow: visible !important;
    }

    /* إصلاح الليبل اليسار تحديدًا */
    .planet-label.left {
        left: 50% !important;

        /* نرجعه للمنتصف */
        top: 50% !important;
        transform: translate(-160%, -50%) !important;
        display: flex;
        align-items: center;
        gap: 6px;
        direction: rtl;
        white-space: nowrap;
    }

    /* حجم النص */
    .planet-label.left .text {
        font-size: 13px;
        max-width: none;
        overflow: visible;
    }

    /* النقطة */
    .planet-label.left .dot {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    /* محاذاة يمين + RTL للقسم كامل */
    .section-counting-inner,
    .section-counting-inner .content-part,
    .section-counting-inner .heading-section,
    .section-counting-inner .heading-section * {
        direction: rtl;
        text-align: right !important;
    }

    /* تكبير وتحسين العنوان */
    .section-counting-inner .heading-section .sub-title {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .section-counting-inner .heading-section h2 {
        font-size: 28px !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    /* أهم جزء: رفع التباين والوضوح للنص */
    .section-counting-inner .heading-section .desc,
    .section-counting-inner .heading-section .desc * ,
    .section-counting-inner .heading-section .text-secondary {
        color: rgba(255, 255, 255, 0.82) !important;

        /* أوضح */
        opacity: 1 !important;

        /* منع البهتان */
        filter: none !important;
        text-shadow: 0 1px 1px rgba(0,0,0,0.35);

        /* يساعد على الخلفيات الداكنة */
    }

    .section-counting-inner .heading-section .desc {
        font-size: 16px !important;
        line-height: 1.9 !important;
    }

    /* تمييز اسم البراند داخل الفقرة */
    .section-counting-inner .brand-highlight {
        color: #00b4d8 !important;
        font-weight: 700 !important;
    }

    /* زر اقرأ المزيد: يمين */
    .section-counting-inner .tf-btn {
        align-self: flex-end;
    }

    /* tags title أوضح */
    .achievements-tags-wrapper .tags-title {
        color: rgba(255,255,255,0.9) !important;
    }

    /* التاقات (الأزرار الصغيرة) أوضح في الجوال */
    .achievements-tags .tag-item {
        color: rgba(255,255,255,0.88) !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(27,118,150,0.45) !important;
    }
}

@media (max-width: 768px) {
    /* ====== الحاوية العامة ====== */
    .container-fluid.px-5 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hierarchy-main-wrapper {
        padding-top: 0 !important;
        margin-top: -80px !important;

        /* إذا ما تبغى رفع قوي خله -20 */
        overflow: visible !important;
    }

    @media (max-width: 768px) {
        /* ==== تحكم حر في نقطة (فعاليات) فقط ==== */
        .planet-label.right {
            position: absolute !important;

            /* عشان نقدر نحركها بحرية */
            right: -9px !important;

            /* مكان كلمة فعاليات (عدّل براحتك) */
            top: 50% !important;
            transform: translateY(-50%) !important;
            display: flex !important;
            align-items: center !important;

            /* خلي النص برا، والنقطة جوّا */
            flex-direction: row-reverse !important;
            gap: 8px !important;
        }

        /* النقطة نفسها */
        .planet-label.right .dot {
            /* (1) تحريك حر داخل الحلقة */
            transform: translateX(-100px) translateY(0px) !important;

            /* ↑  -X تدخل للداخل / +X تروح للخارج
        ↑  -Y تطلع لفوق / +Y تنزل لتحت */
            /* (2) حجم النقطة */
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;

            /* (3) لو تبغى لون/ظل */
            background: #1b7696 !important;
            box-shadow: 0 0 10px rgba(27,118,150,0.6) !important;
        }

        /* النص */
        .planet-label.right .text {
            white-space: nowrap;
            font-size: 13px !important;
        }
    }
}

@media (max-width: 768px) {
    /* رفع الخط الفاصل للأعلى */
    .flow-separator {
        margin-top: 0px !important;

        /* كان 100px */
    }
}

@media (max-width: 768px) {
    /* ====== ترتيب الأعمدة للجوال (العنوان فوق، الكروت تحت) ====== */
    .section-team .row {
        flex-direction: column !important;
        gap: 18px !important;
    }

    .section-team .col-lg-3,
    .section-team .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ====== العنوان في الوسط للجوال ====== */
    .section-team .heading-section {
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .section-team .heading-section .title {
        margin-bottom: 10px !important;
        font-size: 28px !important;
        line-height: 1.35 !important;
    }

    .section-team .heading-section .sub-title {
        margin-bottom: 8px !important;
        font-size: 15px !important;
    }

    /* ====== تحويل سلايدر المدراء لشكل هرمي ====== */
    .section-team .sw-team .swiper-wrapper {
        /* إلغاء حركة السوايبر بصرياً للجوال */
        transform: none !important;
        transition: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        justify-items: center;
        align-items: start;
        padding: 0 6px;
    }

    /* اجبار الشرائح تاخذ عرض الشبكة بدل عرض السوايبر */
    .section-team .sw-team .swiper-slide {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* أول عنصر (المدير الأول) يكون بالأعلى وفي المنتصف بعرض أكبر */
    .section-team .sw-team .swiper-slide:nth-child(1) {
        grid-column: 1 / -1;

        /* يمتد على عمودين */
        max-width: 320px;

        /* شكل هرمي لطيف */
    }

    /* العناصر التالية عمودين تحت */
    .section-team .sw-team .swiper-slide:nth-child(2),
    .section-team .sw-team .swiper-slide:nth-child(3) {
        max-width: 220px;
    }

    /* تحسين شكل الكارد على الجوال */
    .section-team .team-item {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
    }

    /* الصور: ثبات ارتفاع لطيف */
    .section-team .team-item .top-item .image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

    /* ====== تصغير خط الأسماء والمسمى الوظيفي ====== */
    .section-team .team-item .item-content {
        padding: 12px 12px !important;
        text-align: center;
    }

    .section-team .team-item .item-content .title,
    .section-team .team-item .item-content .title a {
        font-size: 14px !important;

        /* الاسم أصغر */
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
    }

    .section-team .team-item .item-content .sub-title {
        font-size: 12px !important;
        opacity: 0.85;
        margin: 0 !important;
    }

    /* ====== (اختياري) إخفاء نقاط/أسهم السوايبر للجوال لأننا صرنا Grid ====== */
    .section-team .sw-pagination-team,
    .section-team .team-next,
    .section-team .team-prev {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* ====== الكارد الأول (الرئيس التنفيذي) ====== */
    .section-team .sw-team .swiper-slide:nth-child(1) .item-content {
        display: flex;
        flex-direction: column;
        align-items: center;

        /* توسيط أفقي */
        justify-content: center;

        /* توسيط عمودي */
        text-align: center !important;
        padding: 14px 12px !important;
    }

    .section-team .sw-team .swiper-slide:nth-child(1) .item-content .title,
    .section-team .sw-team .swiper-slide:nth-child(1) .item-content .title a {
        font-size: 15px !important;

        /* أكبر شوي من الباقي */
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    .section-team .sw-team .swiper-slide:nth-child(1) .item-content .sub-title {
        font-size: 13px !important;
        font-weight: 600;
        opacity: 0.9;
        margin: 0 !important;
        text-align: center !important;
    }

    /* ====== باقي المدراء (يظلون أصغر) ====== */
    .section-team .sw-team .swiper-slide:not(:nth-child(1)) .item-content .title,
    .section-team .sw-team .swiper-slide:not(:nth-child(1)) .item-content .title a {
        font-size: 14px !important;
    }

    .section-team .sw-team .swiper-slide:not(:nth-child(1)) .item-content .sub-title {
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    /* ===============================
     1) رفع السكشن لفوق
  =============================== */
    .section-project {
        padding-top: 20px !important;

        /* كان 60 */
        padding-bottom: 40px !important;
        margin-top: -40px !important;

        /* يرفع السكشن */
    }

    /* ===============================
     2) تنسيق العنوان
  =============================== */
    .section-project .heading-section {
        margin-bottom: 25px !important;
        padding: 0 10px;
    }

    .section-project .heading-section .sub-title {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    .section-project .heading-section .title {
        font-size: 26px !important;
        line-height: 1.35 !important;
    }

    .section-project .heading-section .title span {
        display: inline;

        /* لا يكسر السطر بقوة */
    }

    /* ===============================
     3) تصغير الكروت (الحاويات)
  =============================== */
    /* السلايدر نفسه */
    .section-project .sw-project {
        padding: 0 6px !important;
    }

    /* الكارد */
    .section-project .project-item {
        flex-direction: column-reverse !important;

        /* الصورة فوق، النص تحت */
        border-radius: 14px !important;
    }

    /* الصورة */
    .section-project .project-item .image {
        width: 100% !important;
        height: 200px !important;

        /* أصغر */
        flex: none !important;
    }

    .section-project .project-item .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* محتوى النص */
    .section-project .project-item .item-content {
        flex: none !important;
        padding: 16px !important;
        text-align: right !important;
    }

    .section-project .project-item .top-content .sub-title {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .section-project .project-item .title-project a {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .section-project .project-item .desc {
        font-size: 14px !important;
        line-height: 1.8 !important;
        margin-bottom: 14px !important;
    }

    /* زر التفاصيل */
    .section-project .project-item .bottom-content {
        margin-top: 6px;
    }

    /* ===============================
     4) Pagination أقرب للكروت
  =============================== */
    .sw-pagination-project {
        margin-top: 20px !important;
    }
}

@media (max-width: 768px) {
    /* رفع السكشن وتقليل المسافات */
    .section-work-inquiry {
        padding: 25px 0 !important;

        /* كان 60 */
        margin-top: -40px !important;

        /* رفع لفوق */
    }

    /* تصغير صندوق المحتوى */
    .section-work-inquiry .section-form-content.glow-box {
        padding: 22px 16px !important;
        border-radius: 16px !important;
    }

    /* العنوان الفرعي */
    .section-work-inquiry .sub-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* العنوان الرئيسي */
    .section-work-inquiry h2.title {
        font-size: 24px !important;
        line-height: 1.35 !important;
        margin-bottom: 18px !important;
    }

    /* زر تواصل معنا */
    .section-work-inquiry .modern-down-btn {
        padding: 10px 18px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        gap: 8px;
    }

    .section-work-inquiry .modern-down-btn .icon-down {
        width: 16px;
        height: 16px;
    }
}

/* ===========================
   FOOTER MOBILE CLEAN MODE
   - Hide footer top CTA
   - Hide services column
   - Hide bottom links list
   =========================== */
@media (max-width: 768px) {
    /* اخفاء جزء "تواصل معنا / Contact Us" */
    .footer-top {
        display: none !important;
    }

    /* اخفاء عمود خدماتنا بالكامل */
    .footer-col-services {
        display: none !important;
    }

    /* اخفاء قوائم الروابط في الفوتر السفلي */
    .footer-bottom-content ul {
        display: none !important;
    }

    /* ===========================
     تحسين عام للفوتر للجوال
     =========================== */
    .footer-inner {
        padding-top: 18px !important;
    }

    .footer-middle {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* كاردات للأعمدة المتبقية */
    .footer-left-block,
    .footer-right-block {
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 18px !important;
        padding: 16px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        direction: rtl;
        text-align: right !important;
    }

    /* الخريطة */
    .footer-left-block iframe {
        height: 190px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.10);
    }

    /* السوشال */
    .social-section {
        margin-top: 14px !important;
    }

    .social-section h6 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .social-icons-list {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .social-icons-list .social-icon {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* =========================
     شد المسافات العامة
  ========================= */
    .mobile-nav-wrap .inner-mobile-nav {
        padding: 14px 14px !important;
    }

    .mobile-nav-wrap .top-header-mobi {
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
    }

    .mobile-nav-wrap .menu {
        margin: 8px 0 10px 0 !important;
        padding: 0 !important;
    }

    /* =========================
     القائمة: بدون فراغات + شكل أنظف
  ========================= */
    .mobile-nav-wrap .menu > .menu-item {
        margin: 8px 0 !important;
    }

    .mobile-nav-wrap .menu > .menu-item > a {
        padding: 10px 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        background: rgba(255,255,255,0.04) !important;
    }

    /* ✅ 1) احذف الخط الجانبي يمين (اللي كان عامل زحمة) */
    .mobile-nav-wrap .menu > .menu-item > a::before {
        display: none !important;
        content: none !important;
    }

    /* Hover بسيط بلون الهوية */
    .mobile-nav-wrap .menu > .menu-item > a:hover,
    .mobile-nav-wrap .menu > .menu-item > a:focus {
        border-color: rgba(27,118,150,0.65) !important;
        box-shadow: 0 10px 22px rgba(27,118,150,0.14) !important;
    }

    /* =========================
     معلومات التواصل: شد المسافات
  ========================= */
    .mobile-nav-wrap .contact-mobile {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .mobile-nav-wrap .title-contact-mobile {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .mobile-nav-wrap .content-contact-moblile {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }

    /* إصلاح اتجاه الأرقام */
    .mobile-nav-wrap a[href^="tel:"],
    .mobile-nav-wrap a[href^="mailto:"] {
        direction: ltr !important;
        unicode-bidi: bidi-override !important;
        display: inline-block;
    }

    /* =========================
     2) زر EN: صغّره وخليه تحت مع السوشال
  ========================= */
    .mobile-nav-wrap .offcanvas-actions {
        margin-top: 0 !important;
        order: 99;

        /* ينزل لآخر nav */
        padding-top: 10px !important;
    }

    .mobile-nav-wrap .offcanvas-actions a {
        width: auto !important;

        /* بدل 100% */
        min-width: 64px;
        padding: 8px 14px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        justify-content: center !important;
        display: inline-flex !important;
    }

    /* نخلي EN بمحاذاة وسط تحت */
    .mobile-nav-wrap .offcanvas-actions {
        display: flex;
        justify-content: center;
    }

    /* =========================
     3) السوشال: رصّها ومافي فراغات
  ========================= */
    .mobile-nav-wrap .post-social {
        margin-top: 10px !important;
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 0 !important;
    }

    /* زر واتساب */
    .mobile-nav-wrap .whatsapp-hover-btn {
        margin-top: 10px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }
}

/* ===============================
   Page Title - Mobile Responsive
   =============================== */
@media (max-width: 991px) {
    .page-title-content {
        padding: 70px 0 !important;

        /* أقل في التابلت/الموبايل */
    }

    .page-title-content .content-wrapper {
        padding: 0 16px;

        /* هوامش داخلية للنص */
    }

    .page-title-content .title {
        font-size: 44px !important;

        /* كان 65 */
        line-height: 1.25 !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
    }

    .page-title-content .breadkcum {
        margin-top: 12px !important;
        font-size: 14px !important;
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .page-title-content .breadkcum a,
    .page-title-content .breadkcum span {
        font-size: 14px !important;
    }

    .page-title-content .desc {
        font-size: 16px !important;

        /* كان 22 */
        line-height: 1.9 !important;
        margin: 18px auto 0 !important;
        max-width: 92% !important;
        opacity: 0.95;
    }

    /* الخلفية الـ SVG: تخفيفها في الموبايل */
    .page-title-content .bg-animated-watermark {
        opacity: 0.18 !important;
        transform: scale(1.05);
    }
}

@media (max-width: 480px) {
    .page-title-content {
        padding: 58px 0 !important;
    }

    .page-title-content .title {
        font-size: 38px !important;
    }

    .page-title-content .desc {
        font-size: 15px !important;
        max-width: 94% !important;
    }
}

@media (max-width: 991px){
    .page-title-content .desc {
        font-size: 14px !important;
        line-height: 1.75 !important;
        margin-top: 14px !important;
        max-width: 88% !important;
    }
}

@media (max-width: 480px){
    .page-title-content .desc {
        font-size: 13px !important;
        line-height: 1.7 !important;
        max-width: 92% !important;
    }
}

/* ===== Page Title Mobile Fix ===== */
@media (max-width: 991px){
    /* الحاوية */
    .page-title-content {
        padding: 70px 0 !important;

        /* أقل من 100 */
    }

    .page-title-content .content-wrapper {
        padding: 0 16px !important;

        /* هوامش يمين/يسار للموبايل */
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* العنوان */
    .page-title-content .title {
        font-size: 42px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
    }

    /* البريددكرم */
    .page-title-content .breadkcum {
        margin-top: 10px !important;
    }

    /* الوصف */
    .page-title-content .desc {
        font-size: 13px !important;

        /* أصغر */
        line-height: 1.7 !important;
        margin: 14px auto 0 !important;

        /* هوامش أحسن */
        max-width: 520px !important;

        /* يمنع التمدد */
        padding: 0 !important;
        text-align: center !important;

        /* أهم 3 سطور تمنع القص */
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

@media (max-width: 480px){
    .page-title-content {
        padding: 60px 0 !important;
    }

    .page-title-content .title {
        font-size: 38px !important;
    }

    .page-title-content .content-wrapper {
        padding: 0 14px !important;
    }

    .page-title-content .desc {
        font-size: 12.5px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   OUR WORK / PROJECTS GRID - Mobile Responsive
========================================================= */
@media (max-width: 991px){
    /* خط الفاصل + العلامة المائية */
    .flow-separator-glow {
        position: relative !important;
        top: 0 !important;
    }

    .watermark-container {
        opacity: .06;
    }

    /* شبكة المشاريع: عمود واحد */
    .projects-grid-container {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 14px !important;
    }

    /* الكارد: ارتفاع تلقائي */
    .project-card-cinematic {
        border-radius: 18px !important;
        overflow: hidden !important;
        min-height: unset !important;
    }

    /* الصورة أعلى الكارد */
    .project-card-cinematic .project-bg-img {
        position: relative !important;
        height: 190px !important;
    }

    .project-card-cinematic .project-bg-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* الطبقة + المحتوى */
    .project-card-cinematic .project-overlay-gradient {
        opacity: .9 !important;
    }

    .project-card-cinematic .project-content-wrap {
        position: relative !important;
        padding: 14px 14px 16px !important;
    }

    /* عنوان + سبتايتل */
    .project-card-cinematic .project-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .project-card-cinematic .project-subtitle {
        font-size: 13px !important;
        opacity: .9 !important;
        display: inline-block;
        margin-bottom: 10px !important;
    }

    /* لوجو الجهة (badge) */
    .project-card-cinematic .client-logo-badge {
        width: 54px !important;
        height: 54px !important;
        top: 10px !important;
        right: 10px !important;

        /* RTL */
        left: auto !important;
        border-radius: 14px !important;
    }

    .project-card-cinematic .client-logo-badge img {
        max-width: 70% !important;
        max-height: 70% !important;
    }

    /* القائمة: قلل الخط والمسافات */
    .project-card-cinematic .project-desc-list {
        margin: 10px 0 10px !important;
        padding-inline-start: 18px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .project-card-cinematic .project-desc-list li {
        margin-bottom: 6px !important;
    }

    /* ✅ اختصار القائمة للجوال (أول 4 عناصر فقط) */
    .project-card-cinematic .project-desc-list li:nth-child(n+5) {
        display: none !important;
    }

    /* الجهة */
    .project-card-cinematic .client-name-highlight {
        display: block;
        margin-top: 8px !important;
        font-size: 13px !important;
        color: #fff !important;
        opacity: .9 !important;
    }
}

@media (max-width: 480px){
    .projects-grid-container {
        padding: 0 12px !important;
    }

    .project-card-cinematic .project-bg-img {
        height: 175px !important;
    }

    .project-card-cinematic .project-title {
        font-size: 19px !important;
    }

    .project-card-cinematic .project-desc-list {
        font-size: 12.5px !important;
    }
}

/* ================================
   Mobile Projects: Horizontal Swipe
   (Image + Logo top, Text under)
   ================================ */
@media (max-width: 991px){
    /* 1) السحب الجانبي + كرت واحد ظاهر */
    .projects-grid-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        padding: 0 14px 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 14px;
    }

    .projects-grid-container::-webkit-scrollbar {
        height: 0;
    }

    .projects-grid-container {
        scrollbar-width: none;
    }

    .projects-grid-container .project-card-cinematic {
        flex: 0 0 100% !important;

        /* كرت واحد */
        max-width: 100% !important;
        scroll-snap-align: start;
        border-radius: 18px !important;
        overflow: hidden !important;
        position: relative;
        min-height: auto !important;
    }

    /* 2) ترتيب الكرت: صورة فوق / نص تحت */
    .project-card-cinematic {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
    }

    /* صورة الهيدر */
    .project-card-cinematic .project-bg-img {
        position: relative;
        height: 210px !important;
    }

    .project-card-cinematic .project-bg-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    /* جراديانت فوق الصورة (لو عندك overlay موجود) */
    .project-card-cinematic .project-overlay-gradient {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    /* 3) الشعار فوق الصورة (يمين أعلى) */
    .project-card-cinematic .client-logo-badge {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 5;
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
        overflow: hidden;
        background: rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }

    .project-card-cinematic .client-logo-badge img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

    /* 4) محتوى النص تحت الصورة */
    .project-card-cinematic .project-content-wrap {
        padding: 14px 14px 12px !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .project-card-cinematic .project-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
        font-weight: 700 !important;
    }

    .project-card-cinematic .project-subtitle {
        display: block;
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin: 0 0 10px 0 !important;
        color: #1b7696 !important;

        /* لون الهوية */
        font-weight: 500 !important;
    }

    /* ✅ النص التعريفي: صغره + شيل Bold */
    .project-card-cinematic .project-desc-list {
        margin: 0 !important;
        padding: 0 18px 0 0 !important;

        /* مسافة للنقاط */
        list-style: disc;
    }

    .project-card-cinematic .project-desc-list li {
        font-size: 12px !important;
        line-height: 1.75 !important;
        font-weight: 400 !important;

        /* بدون بولد */
        margin: 0 0 6px 0 !important;
        opacity: 0.95;
    }

    .project-card-cinematic .client-name-highlight {
        display: block;
        margin-top: 10px !important;
        font-size: 12px !important;
        font-weight: 400 !important;

        /* بدون بولد */
        opacity: 0.9;
    }
}

/* ====== Mobile: وصف الكرت سطرين + تقليل التباعد ====== */
@media (max-width: 991px){
    /* لو عندك وصف في <p class="project-desc"> */
    .project-card-cinematic .project-desc,
    .project-card-cinematic .project-desc p {
        font-size: 12px !important;
        line-height: 1.55 !important;

        /* أقل تباعد بين السطور */
        letter-spacing: -0.2px !important;

        /* تقليل فراغ الحروف (خفيف) */
        word-spacing: -1px !important;

        /* ✅ تقليل تباعد الكلمات */
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        /* ✅ سطرين فقط */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 0 10px 0 !important;
    }

    /* لو الوصف عندك هو نقاط <li> داخل .project-desc-list */
    .project-card-cinematic .project-desc-list {
        max-height: none !important;

        /* نلغي سكرول الليست */
        overflow: visible !important;
        padding-right: 18px !important;
        margin: 0 !important;
    }

    /* نخلي أول نقطة فقط تظهر كسطرين */
    .project-card-cinematic .project-desc-list li {
        font-size: 12px !important;
        line-height: 1.55 !important;
        letter-spacing: -0.2px !important;
        word-spacing: -1px !important;

        /* ✅ تقليل تباعد الكلمات */
        font-weight: 400 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        /* ✅ سطرين */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 0 8px 0 !important;
    }

    /* نخفي باقي النقاط */
    .project-card-cinematic .project-desc-list li:nth-child(n+2) {
        display: none !important;
    }
}

/* ============ FIX: منع قص النصوص داخل الكروت (خصوصًا "الجهة") ============ */
@media (max-width: 991px){
    /* 1) امنع أي قص عام داخل محتوى الكرت */
    .project-card-cinematic,
    .project-card-cinematic .project-content-wrap {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 2) كبسولة/زر "الجهة" — خليها تتمدّد وتلف السطر بدون قص */
    .project-card-cinematic .client-name-highlight {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;

        /* يسمح بتكسير السطر */
        overflow: visible !important;
        text-overflow: unset !important;
        height: auto !important;
        line-height: 1.45 !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        word-break: break-word !important;
        direction: rtl !important;
        text-align: right !important;
    }

    /* لو "الجهة" طالعة كزر/لينك بكلاسات ثانية، نخليها برضو تتمدد */
    .project-card-cinematic a.client-name-highlight,
    .project-card-cinematic .client-name-highlight a,
    .project-card-cinematic .project-cta,
    .project-card-cinematic .project-btn {
        white-space: normal !important;
        height: auto !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.45 !important;
    }

    /* 3) الوصف بالنقاط: بدون قص… بس نخلي ظاهر أول نقطتين فقط (بدون ellipsis) */
    .project-card-cinematic .project-desc-list {
        max-height: none !important;
        overflow: visible !important;
        margin: 10px 0 0 !important;
        padding-right: 18px !important;
    }

    .project-card-cinematic .project-desc-list li {
        display: list-item !important;
        overflow: visible !important;
        text-overflow: unset !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        font-weight: 400 !important;

        /* شيل البولد */
        font-size: 12px !important;
        line-height: 1.55 !important;
        word-spacing: -0.5px !important;

        /* تقليل تباعد الكلمات */
        letter-spacing: -0.15px !important;
        margin: 0 0 8px 0 !important;
    }

    /* يظهر أول نقطتين فقط */
    .project-card-cinematic .project-desc-list li:nth-child(n+3) {
        display: none !important;
    }
}

/* === Fix: تباعد الكلمات الغريب في النص العربي داخل نقاط الوصف === */
@media (max-width: 991px){
    .project-card-cinematic .project-desc-list li {
        text-align: right !important;

        /* بدل justify */
        text-justify: auto !important;
        word-spacing: normal !important;

        /* يلغي أي ضغط/تمديد كلمات */
        letter-spacing: normal !important;
        white-space: normal !important;
    }
}

/* === Production section: Mobile image فوق + النص تحت === */
@media (max-width: 991px){
    /* نخلي ترتيب الأعمدة عمودي (الصورة ثم المحتوى) */
    .production-full-width .row.g-0 {
        flex-direction: column !important;
    }

    /* نخلي عمود الصورة يجي الأول */
    .production-full-width .row.g-0 > .col-lg-6:first-child {
        order: 1 !important;
    }

    /* وعمود النص يجي بعده */
    .production-full-width .row.g-0 > .col-lg-6:last-child {
        order: 2 !important;
    }

    /* ضبط ارتفاع الصورة على الموبايل */
    .production-full-width .prod-image-full-height {
        min-height: 340px !important;
        height: 240px !important;
    }

    .production-full-width .prod-image-full-height .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* تنسيق محتوى النص */
    .production-full-width .prod-content-full-wrapper {
        padding: 18px 16px !important;
    }

    .production-full-width .content-inner {
        text-align: right !important;
    }

    .production-full-width .sub-title {
        margin-bottom: 6px !important;
        font-size: 14px !important;
    }

    .production-full-width .main-title {
        margin-bottom: 12px !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    /* النص العربي أصغر ومتناسق */
    .production-full-width .desc-text-modern p {
        font-size: 13.5px !important;
        line-height: 1.75 !important;
        margin-bottom: 10px !important;
        text-align: right !important;
        text-justify: auto !important;
        word-spacing: normal !important;
    }
}

/* ===============================
   PORTFOLIO GRID - Mobile 2 Cards
================================ */
/* شكل الشبكة العام */
.portfolio-grid {
    display: grid;
    gap: 18px;
}

/* ديسكتوب/تابلت (لو عندك إعدادات سابقة اتركها) */
@media (min-width: 992px){
    .portfolio-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* تابلت */
@media (min-width: 768px) and (max-width: 991px){
    .portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ✅ الجوال: كرتين جنب بعض */
@media (max-width: 767px){
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-inline: 10px;
    }

    .portfolio-grid .project-card {
        width: 100%;
        max-width: 100%;
    }

    /* نخلي الفليب بوكس متناسق */
    .portfolio-grid .flip-box {
        width: 100%;
        height: 220px;

        /* ارتفاع مناسب للكرت */
        position: relative;
        border-radius: 18px;
        overflow: hidden;
    }

    .portfolio-grid .flip-front,
    .portfolio-grid .flip-back {
        width: 100%;
        height: 100%;
        border-radius: 18px;
        overflow: hidden;
    }

    /* الصورة */
    .portfolio-grid .poster-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* تفاصيل الكرت تحت */
    .portfolio-grid .card-details {
        padding: 10px 8px 12px;
        text-align: right;
    }

    .portfolio-grid .card-title {
        font-size: 14px;
        line-height: 1.35;
        margin: 0 0 6px;
    }

    .portfolio-grid .card-category {
        display: inline-block;
        font-size: 12px;
        opacity: .9;
        margin-bottom: 8px;
    }

    .portfolio-grid .read-more-btn {
        width: 100%;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 12px;
    }

    /* ✅ نص الخلفية (تفاصيل) — يصير مناسب وما يطوّل */
    .portfolio-grid .flip-back .back-text {
        font-size: 12px;
        line-height: 1.55;
        margin: 10px 10px 0;
        max-height: 6.2em;

        /* حوالي 4 سطور */
        overflow: hidden;

        /* يمنع الزحمة */
    }

    .portfolio-grid .flip-back .modern-logo-box {
        margin-top: 10px;
    }

    .portfolio-grid .flip-back .back-logo-img {
        max-width: 54px;
        height: auto;
    }

    .portfolio-grid .flip-back .close-btn {
        margin: 10px;
        width: calc(100% - 20px);
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 12px;
    }
}

/* شاشات صغيرة جدا (320px) */
@media (max-width: 360px){
    .portfolio-grid .flip-box {
        height: 205px;
    }

    .portfolio-grid .card-title {
        font-size: 13px;
    }
}

/* ================================
   PORTFOLIO FONT CONTROLS (MOBILE)
   عدّل الأرقام هنا فقط ✅
================================== */
:root {
    --pf-title: 10.5px;

    /* عنوان الكرت */
    --pf-cat: 11px;

    /* الوصف الصغير تحت العنوان */
    --pf-btn: 11px;

    /* زر "تفاصيل" */
    --pf-back-text: 11px;

    /* نص التفاصيل بالخلف */
    --pf-close-btn: 11px;

    /* زر "عودة" */
}

/* تطبيق القيم على الجوال */
@media (max-width: 767px){
    .portfolio-grid .card-title {
        font-size: var(--pf-title) !important;
        line-height: 1.35 !important;
    }

    .portfolio-grid .card-category {
        font-size: var(--pf-cat) !important;
        line-height: 1.2 !important;
    }

    .portfolio-grid .read-more-btn {
        font-size: var(--pf-btn) !important;
    }

    .portfolio-grid .flip-back .back-text {
        font-size: var(--pf-back-text) !important;
        line-height: 1.55 !important;
    }

    .portfolio-grid .flip-back .close-btn {
        font-size: var(--pf-close-btn) !important;
    }
}

/* توسيط النص داخل كروت البورتفوليو (جوال) */
@media (max-width: 767px){
    .portfolio-grid .card-details {
        text-align: center !important;
    }

    .portfolio-grid .card-details .card-title,
    .portfolio-grid .card-details .card-category {
        text-align: center !important;
        width: 100%;
        display: block;
    }

    .portfolio-grid .card-details .read-more-btn {
        margin: 10px auto 0 !important;
        display: inline-flex;
        justify-content: center;
    }
}

/* تصغير العنوان الرئيسي في سكشن البورتفوليو على الجوال */
@media (max-width: 767px){
    .portfolio-section .text-center h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .portfolio-section .text-center h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
}

/* ✅ تصغير حاوية بانر اليوتيوب + النصوص (موبايل فقط) */
@media (max-width: 767px){
    /* الحاوية الخارجية */
    .yt-center-wrap {
        padding: 0 12px !important;
    }

    /* الكارد نفسه */
    .youtube-modern-banner {
        max-width: 320px !important;

        /* صغّر العرض */
        margin: 0 auto !important;
        padding: 16px 16px !important;

        /* صغّر البادينق */
        border-radius: 18px !important;
    }

    /* الأيقونة */
    .youtube-modern-banner .yt-icon-box {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .youtube-modern-banner .yt-icon {
        width: 80px !important;
        height: 80px !important;
    }

    /* العناوين */
    .youtube-modern-banner .ar-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin: 0 0 6px !important;
    }

    .youtube-modern-banner .en-title {
        font-size: 13px !important;
        letter-spacing: 1px !important;
        margin: 0 0 8px !important;
        opacity: 0.75 !important;
    }

    /* سطر الدعوة */
    .youtube-modern-banner .action-row span {
        font-size: 12px !important;
    }

    .youtube-modern-banner .action-row i {
        font-size: 12px !important;
    }

    /* الفاصل */
    .youtube-modern-banner .yt-separator {
        height: 3px !important;
        margin: 0 10px !important;
        opacity: 0.4 !important;
    }
}

/* ===========================
   FOOTER MOBILE CLEAN MODE
   - Hide footer top CTA
   - Hide services column
   - Hide bottom links list
   =========================== */
@media (max-width: 768px) {
    /* اخفاء جزء "تواصل معنا / Contact Us" */
    .footer-top {
        display: none !important;
    }

    /* اخفاء عمود خدماتنا بالكامل */
    .footer-col-services {
        display: none !important;
    }

    /* اخفاء قوائم الروابط في الفوتر السفلي */
    .footer-bottom-content ul {
        display: none !important;
    }

    /* ===========================
     تحسين عام للفوتر للجوال
     =========================== */
    .footer-inner {
        padding-top: 18px !important;
    }

    .footer-middle {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* كاردات للأعمدة المتبقية */
    .footer-left-block,
    .footer-right-block {
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 18px !important;
        padding: 16px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        direction: rtl;
        text-align: right !important;
    }

    /* الخريطة */
    .footer-left-block iframe {
        height: 190px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.10);
    }

    /* السوشال */
    .social-section {
        margin-top: 14px !important;
    }

    .social-section h6 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .social-icons-list {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .social-icons-list .social-icon {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
    }

    .social-icons-list .social-icon i {
        font-size: 16px;
    }

    /* عناوين الأقسام داخل الفوتر */
    .footer-left-block .title,
    .footer-col-contact .title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* نصوص الاتصال */
    .address,
    .phone-link,
    .contact-info-list a {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    .contact-info-list h6 a {
        font-size: 16px !important;
        word-break: break-word;
    }

    /* زر واتساب */
    .whatsapp-hover-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        margin-top: 12px !important;
    }

    /* الفوتر السفلي: خليه بسيط */
    .footer-bottom-wrapper {
        margin-top: 18px !important;
        padding: 14px 0 !important;
    }

    .footer-bottom-content {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-bottom-content span {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }
}

/* ✅ Mobile style for Page Title (من نحن) */
@media (max-width: 767px){
    /* الحاوية الرئيسية */
    .page-title-content.watermark-bg {
        padding: 90px 0 !important;

        /* كان 150px */
    }

    /* الخلفية SVG (تبقى موجودة لكن أخف) */
    .page-title-content.watermark-bg .bg-animated-watermark {
        opacity: 0.18 !important;
    }

    /* منع تكرار المسافات والازدواجية */
    .page-title-content.watermark-bg .tf-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* العنوان */
    .page-title-content.watermark-bg h1.title {
        font-size: 34px !important;

        /* صغر من 60 */
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    /* breadcrumb */
    .page-title-content.watermark-bg .breadkcum {
        gap: 8px !important;
        font-size: 14px !important;
        flex-wrap: wrap !important;

        /* لو ضاق المكان ما ينكسر بشكل سيء */
        line-height: 1.4 !important;
        padding: 0 10px !important;
    }

    .page-title-content.watermark-bg .breadkcum a,
    .page-title-content.watermark-bg .breadkcum span {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    /* النقطة اللي بالنص */
    .page-title-content.watermark-bg .breadkcum span[style*="•"] {
        margin: 0 !important;
    }

    /* الفاصل السفلي */
    .page-title-content.watermark-bg .glowing-separator-bottom {
        height: 2px !important;
        opacity: 0.65 !important;
        box-shadow: 0 -2px 8px #1b7696, 0 -3px 16px rgba(27,118,150,.35) !important;
    }
}

@media (max-width: 767px){
    /* السكشن */
    .visual-identity-showcase {
        margin: 55px 0 !important;
        padding: 0 !important;
    }

    /* البانر: نخليه عرضي */
    .visual-identity-showcase .main-visual-banner {
        position: relative !important;
        width: 92% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* الصورة */
    .visual-identity-showcase .banner-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* التظليل */
    .visual-identity-showcase .overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)) !important;
    }

    /* ✅ الشعار + النبض داخل زاوية الصورة */
    .visual-identity-showcase .floating-map-logo {
        position: absolute !important;
        top: 12px !important;

        /* زاوية */
        left: 12px !important;

        /* زاوية */
        right: auto !important;
        transform: none !important;
        width: 72px !important;
        height: 72px !important;
        display: grid !important;
        place-items: center !important;
        z-index: 3 !important;

        /* فوق التظليل */
    }

    /* الشعار */
    .visual-identity-showcase .floating-map-logo .map-img {
        width: 68px !important;
        height: 68px !important;
        object-fit: contain !important;
        position: relative !important;
        z-index: 2 !important;
        filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)) !important;
    }

    /* النبض في نفس المركز */
    .visual-identity-showcase .floating-map-logo .pulse-rings {
        position: absolute !important;
        inset: 50% auto auto 50% !important;
        transform: translate(-90%, -50%) !important;
        width: 46px !important;
        height: 46px !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .visual-identity-showcase .floating-map-logo .pulse-rings span {
        position: absolute !important;
        inset: 0 !important;
        border-radius: 50% !important;
        border: 1px solid rgba(27,118,150,.45) !important;
        animation: pulseRing 1.6s ease-out infinite !important;
        transform: scale(.6) !important;
        opacity: .8 !important;
    }

    .visual-identity-showcase .floating-map-logo .pulse-rings span:nth-child(2) {
        animation-delay: .35s !important;
        opacity: .55 !important;
    }

    .visual-identity-showcase .floating-map-logo .pulse-rings span:nth-child(3) {
        animation-delay: .7s !important;
        opacity: .35 !important;
    }

    @keyframes pulseRing{
        20% {
            transform: scale(1.8);
            opacity: .85;
        }

        70% {
            transform: scale(1.35);
            opacity: 0;
        }

        100% {
            transform: scale(1.35);
            opacity: 0;
        }
    }

    /* ✅ حاوية الشعارات تحت */
    .visual-identity-showcase .partners-logo-grid {
        margin-top: -18px !important;
        width: 92% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        background: #19272b !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        z-index: 4 !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
    }

    /* ✅ تكبير الشعارات داخل الحاوية */
    .visual-identity-showcase .partners-logo-grid .partner-box {
        height: 80px !important;

        /* أكبر */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .visual-identity-showcase .partners-logo-grid .partner-box img {
        max-width: 96% !important;
        max-height: 96% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* ✅ About / Project Details - Mobile text fix only */
@media (max-width: 767px){
    /* الحاوية العامة */
    .wg-project-details .details-content {
        gap: 16px !important;
    }

    /* العنوان لا نلمسه (قلت مناسب) */
    /* ✅ النص التعريفي: محاذاة يمين + تصغير + تقليل تشتت */
    .wg-project-details .about-left-premium .desc {
        margin-top: 10px !important;
    }

    .wg-project-details .about-left-premium .desc .desc-flex {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    /* span + p داخل الوصف */
    .wg-project-details .about-left-premium .desc span.lh-30,
    .wg-project-details .about-left-premium .desc p.lh-30 {
        font-size: 14px !important;

        /* ✅ تصغير */
        line-height: 1.75 !important;

        /* ✅ مريح بدون زحمة */
        letter-spacing: 0 !important;

        /* ✅ يمنع تباعد غريب */
        word-spacing: 0 !important;

        /* ✅ يقلل الفراغات */
        text-align: right !important;

        /* ✅ يمين */
        text-justify: auto !important;
        hyphens: none !important;
        margin: 0 0 10px !important;

        /* ✅ تقليل المسافة بين الفقرات */
    }

    /* ✅ لو عندك padding/هوامش كبيرة على اليسار/اليمين */
    .wg-project-details .about-left-premium {
        padding: 0 !important;
    }

    /* ✅ تصغير عرض النص شوي + هوامش جانبية للجوال */
    .wg-project-details .about-left-premium .desc {
        padding: 0 6px !important;
    }

    /* ✅ لو النص ما زال طويل: اقص أول سطرين للسبان فقط (اختياري) */
    .wg-project-details .about-left-premium .desc .desc-flex span {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;

        /* عدلها 2 أو 3 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 767px){
    /* ✅ امنع أي قص عام على بلوك التفاصيل */
    .wg-project-details,
    .wg-project-details .details-content,
    .wg-project-details .about-left-premium,
    .wg-project-details .about-left-premium .desc,
    .wg-project-details .about-left-premium .desc .desc-flex,
    .wg-project-details .about-left-premium .desc span,
    .wg-project-details .about-left-premium .desc p {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ✅ زيادة مساحة تحت النص (عشان ما يلمس حد القسم) */
    .wg-project-details .about-left-premium .desc {
        padding-bottom: 18px !important;
        margin-bottom: 18px !important;
    }

    /* ✅ لو كنت مفعل line-clamp قبل كذا شيله */
    .wg-project-details .about-left-premium .desc .desc-flex span {
        display: inline !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    /* ✅ لو فيه overlay/عنصر مطلق يغطي تحت */
    .wg-project-details .glowing-separator-bottom,
    .wg-project-details .flow-separator-glow {
        position: static !important;
    }
}

@media (max-width: 767px){
    /* ✅ منع أي قص داخل فلسفتنا */
    .details-content.content-2,
    .details-content.content-2 .desc,
    .details-content.content-2 .desc p {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ✅ عنوان مناسب للموبايل */
    .details-content.content-2 .title {
        font-size: 20px !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    /* ✅ تصغير النص + ظبط الهوامش + منع التباعد الغريب */
    .details-content.content-2 .desc p {
        font-size: 14px !important;
        line-height: 1.75 !important;
        margin: 0 0 10px !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        text-align: right !important;
    }

    /* ✅ مساحة تحت البلوك عشان آخر سطر ما ينقص */
    .details-content.content-2 {
        padding-bottom: 18px !important;
        margin-bottom: 18px !important;
    }

    /* ✅ لو في أي line-clamp/box قديم شيله */
    .details-content.content-2 .desc {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }
}

/* ✅ Mobile only: ضبط النصوص + المسافات بين الحاويات */
@media (max-width: 767px){
    /* 1) تقليل المسافات العامة في القسم */
    .tf-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 2) الصف الأول (رسالتنا / منظومتنا) */
    .row.mb-50 {
        margin-bottom: 18px !important;

        /* بدل 50 */
    }

    .row.mb-50.g-0 {
        gap: 12px !important;

        /* يضيف مسافة بين العمودين */
    }

    /* لو Bootstrap g-0 مانع الـ gap */
    .row.mb-50.g-0 > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .op-box-item {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    .op-box-item .content-wrap {
        gap: 8px !important;
    }

    /* عنوان البوكس */
    .op-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
        gap: 10px !important;
    }

    /* وصف البوكس */
    .op-desc {
        font-size: 14px !important;
        line-height: 1.75 !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        text-align: right !important;
    }

    /* 3) شبكة الخدمات */
    .list-services {
        gap: 12px !important;

        /* بدل 20 */
        justify-content: center !important;
    }

    .services-item-custom {
        width: 100% !important;

        /* كرت كامل */
        max-width: 520px !important;

        /* يمنع التمدد الغريب */
        padding: 14px !important;
        border-radius: 16px !important;
    }

    /* العنوان داخل كرت الخدمة */
    .services-item-custom .service-title {
        margin: 10px 0 6px !important;
        text-align: center !important;
    }

    .services-item-custom .service-title a {
        font-size: 16px !important;
        line-height: 1.35 !important;
        display: inline-block;
    }

    /* وصف الخدمة */
    .services-item-custom .service-desc {
        font-size: 13px !important;
        line-height: 1.7 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
    }

    /* زر اقرأ المزيد */
    .services-item-custom .bottom-link {
        margin-top: 8px !important;
        text-align: center !important;
    }

    .services-item-custom .bottom-link a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
    }

    /* الأيقونة داخل كرت الخدمة */
    .services-item-custom .icon-box {
        margin: 0 auto !important;
        width: 46px !important;
        height: 46px !important;
        display: grid !important;
        place-items: center !important;
    }

    .services-item-custom .icon-box svg {
        width: 34px !important;
        height: 34px !important;
    }

    /* كرت الاستوديو المميز */
    .services-item-custom.highlight-card {
        padding: 16px !important;
    }
}

/* ✅ تصغير هيرو عنوان الصفحة للجوال فقط */
@media (max-width: 767px){
    /* الحاوية الكبيرة */
    .page-title-content.watermark-bg {
        padding: 68px 0 !important;

        /* كان 150px */
        min-height: auto !important;
    }

    /* العنوان */
    .page-title-content.watermark-bg .title {
        font-size: 38px !important;

        /* كان 60px */
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }

    /* البريددكرم */
    .page-title-content.watermark-bg .breadkcum {
        font-size: 14px !important;

        /* كان 18px */
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .page-title-content.watermark-bg .link-breadkcum,
    .page-title-content.watermark-bg .page-breadkcum {
        font-size: 14px !important;
    }

    /* لو فيه SVG خلفية كبيرة، نخليها أخف على الجوال */
    .page-title-content.watermark-bg .bg-animated-watermark {
        opacity: .18 !important;
    }
}

/* ✅ Contact Info - Mobile only */
@media (max-width: 767px){
    /* الحاوية الأساسية */
    .contact-info-wrap {
        padding: 18px 16px !important;
    }

    .contact-info-wrap h4 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
        letter-spacing: 0 !important;
    }

    .contact-info-wrap h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin: 0 0 10px !important;
    }

    .contact-info-wrap p {
        font-size: 14px !important;
        line-height: 1.75 !important;
        margin: 0 0 16px !important;
        opacity: .92;
    }

    /* عناصر المعلومات (موقع/إيميل/هاتف) */
    .contact-info-wrap .info-list-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 12px !important;
        margin: 0 0 10px !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.03) !important;
    }

    /* الايقونة */
    .contact-info-wrap .info-list-item i {
        font-size: 18px !important;
        color: #1b7696 !important;
        margin-top: 2px !important;
        flex: 0 0 auto !important;
    }

    /* العنوان داخل كل عنصر */
    .contact-info-wrap .info-list-item h5 {
        font-size: 14px !important;
        margin: 0 0 4px !important;
        line-height: 1.3 !important;
    }

    /* النص داخل العنصر */
    .contact-info-wrap .info-list-item p,
    .contact-info-wrap .info-list-item a {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }

    /* الروابط: خليها أوضح */
    .contact-info-wrap .info-list-item a {
        opacity: .95;
        text-decoration: none !important;
    }

    /* أرقام الهاتف: بدون مسافات كبيرة + ثابتة */
    .contact-info-wrap .info-list-item a[dir="ltr"] {
        font-size: 13px !important;
        letter-spacing: .3px !important;
    }

    /* السوشيال: خلّيها صف مرتب */
    .contact-info-wrap .social-icons-list {
        margin-top: 14px !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .contact-info-wrap .social-icons-list li {
        margin: 0 !important;
    }

    /* زر الايقونة */
    .contact-info-wrap .social-icons-list a.social-icon {
        width: 40px !important;
        height: 40px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        transition: .2s ease !important;
    }

    .contact-info-wrap .social-icons-list a.social-icon svg {
        width: 18px !important;
        height: 18px !important;
        fill: #ffffff !important;
        opacity: .9 !important;
    }

    /* Hover بسيط */
    .contact-info-wrap .social-icons-list a.social-icon:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(27,118,150,0.35) !important;
    }
}

/* ✅ Contact Form - Mobile only */
@media (max-width: 767px){
    /* صندوق الفورم */
    .form-box-modern {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    /* خلي الشبكة عمود واحد */
    #contactform .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 12px !important;
    }

    #contactform .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* اللابل */
    #contactform label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        opacity: .95;
    }

    /* الحقول */
    #contactform .form-control-modern,
    #contactform .select-service,
    #contactform textarea.form-control-modern {
        width: 100% !important;
        min-height: 46px !important;

        /* لمس مريح */
        padding: 12px 14px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        border-radius: 14px !important;
        text-align: right !important;
        direction: rtl !important;
        letter-spacing: 0 !important;
        word-spacing: normal !important;

        /* يقلل تباعد الكلمات */
    }

    /* placeholder */
    #contactform .form-control-modern::placeholder,
    #contactform textarea.form-control-modern::placeholder {
        font-size: 13px !important;
        opacity: .75 !important;
    }

    /* textarea */
    #contactform textarea.form-control-modern {
        min-height: 120px !important;
        height: auto !important;
        resize: vertical !important;
    }

    /* إزالة أسهم input type number لو عندك حقول رقمية ثانية */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    /* زر الإرسال */
    #contactform .btn-submit {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        padding: 12px 14px !;
    }

    /* ✅ Partners grid - Mobile only */
    @media (max-width: 767px){
        .partners-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;

            /* 2 يمين + 2 يسار */
            gap: 12px !important;
            align-items: center !important;
            justify-items: center !important;
            padding: 12px !important;
        }

        .partners-grid .partner-item {
            width: 100% !important;
            min-height: 78px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 10px !important;
            border-radius: 14px !important;
            background: rgba(255,255,255,0.03) !important;
            border: 1px solid rgba(255,255,255,0.06) !important;
        }

        /* ✅ تكبير الشعار + منع القص (يتغلب على inline) */
        .partners-grid .partner-item img {
            max-width: 92% !important;
            max-height: 56px !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            filter: grayscale(1) brightness(1.25) !important;
            opacity: .95 !important;
        }

        /* الرابط ياخذ مساحة المربع كاملة */
        .partners-grid .partner-item a {
            display: flex !important;
            width: 100% !important;
            justify-content: center !important;
        }
    }

    /* ✅ تنسيق النص (Mobile only) */
    @media (max-width: 767px){
        /* النص تحت الشعار */
        .brand-pulse-note {
            direction: rtl;
            text-align: center;

            /* لو تبيه يمين: right */
            margin: 10px auto 0 !important;
            padding: 0 12px !important;
            font-size: 13px !important;

            /* تحكم حجم الخط */
            font-weight: 200 !important;

            /* بدون بولد ثقيل */
            line-height: 1.6 !important;
            letter-spacing: 0 !important;

            /* يمنع فراغات الحروف */
            word-spacing: 0 !important;

            /* يمنع فراغات الكلمات */
            white-space: normal !important;
            opacity: .92;
            max-width: 320px;
        }

        /* ✅ لو النص فيه "تباعد غريب" بسبب justify */
        .brand-pulse-note,
        .brand-pulse-note * {
            text-align-last: center;
            text-justify: auto;
        }

        /* ✅ خيار: خلي النص سطرين فقط */
        .brand-pulse-note {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

            /* غيرها 3 لو تبي 3 سطور */
            overflow: hidden;
        }

        /* ✅ خيار: لو تبغاه يمين بدل وسط */
        /* .brand-pulse-note{
    text-align: right !important;
    text-align-last: right !important;
  } */
    }

    /* ✅ Footer Bottom - Mobile only */
    @media (max-width: 767px){
        .footer-bottom-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 14px 0 !important;
            text-align: center !important;
        }

        /* الحقوق */
        .footer-bottom-content .footer-right {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 6px !important;
            margin: 0 !important;
        }

        .footer-bottom-content .footer-right .footer-ar,
        .footer-bottom-content .footer-right .footer-en {
            font-size: 12.5px !important;
            line-height: 1.5 !important;
            letter-spacing: 0 !important;
            word-spacing: 0 !important;
            opacity: .95;
        }

        .footer-bottom-content .footer-right .brand-link {
            font-weight: 700 !important;
            text-decoration: none !important;
        }

        /* الروابط */
        .footer-bottom-content .footer-links {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px 14px !important;
            width: 100% !important;
            max-width: 340px !important;
            direction: rtl !important;
        }

        .footer-bottom-content .footer-links li {
            margin: 0 !important;
        }

        .footer-bottom-content .footer-links a {
            display: block !important;
            padding: 8px 10px !important;
            font-size: 13px !important;
            line-height: 1.3 !important;
            text-align: center !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 10px !important;
            background: rgba(255,255,255,0.03) !important;
            letter-spacing: 0 !important;
            word-spacing: 0 !important;
            white-space: nowrap !important;
            transition: .2s ease;
        }

        .footer-bottom-content .footer-links a:active {
            transform: scale(0.98);
        }
    }
}

/* ============================
   Fix Select Options Visibility
   ============================ */
.form-box-modern .select-service {
    color: #fff !important;
    background: rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;

    /* سهم/ستايل select */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 44px;

    /* مكان السهم */
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
    background-position: 16px 50%,
    22px 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* ✅ أهم جزء: ألوان خيارات القائمة */
.form-box-modern .select-service option {
    background: #0b1418 !important;

    /* خلفية داكنة */
    color: #ffffff !important;

    /* نص واضح */
}

/* خيار البلايسهولدر "اختر الخدمة" */
.form-box-modern .select-service option[disabled] {
    color: rgba(255,255,255,0.65) !important;
}

/* لو المتصفح يدعم تلوين الخيار المحدد */
.form-box-modern .select-service option:checked {
    background: #1b7696 !important;
    color: #fff !important;
}

/* لو nice-select موجود */
.form-box-modern .nice-select .list {
    background: #0b1418 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}

.form-box-modern .nice-select .option {
    color: #fff !important;
}

.form-box-modern .nice-select .option:hover,
.form-box-modern .nice-select .option.selected,
.form-box-modern .nice-select .option.focus {
    background: rgba(27,118,150,0.25) !important;
}

/* ===============================
   Events Section - Mobile only
   =============================== */
@media (max-width: 767px){
    /* السكشن نفسه */
    .section-events {
        padding: 60px 0 !important;
    }

    /* زخرفة الـ SVG: نصغّرها ونبعدها عشان ما تغطي */
    .section-events .svg-decoration-left {
        left: -240px !important;
        top: 20% !important;
        transform: translateY(0) !important;
        opacity: 0.18 !important;
    }

    .section-events .svg-decoration-left svg {
        width: 520px !important;
        height: 520px !important;
    }

    /* ترتيب الأعمدة: الصورة فوق ثم المحتوى */
    .section-events .row {
        row-gap: 18px !important;
    }

    .section-events .image-box {
        margin-bottom: 8px !important;
    }

    .section-events .image-box img {
        border-radius: 16px !important;
    }

    /* صندوق المحتوى */
    .section-events .content-box {
        text-align: right !important;
        padding: 0 4px !important;
    }

    /* العنوان الفرعي */
    .section-events .sub-title {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        letter-spacing: 0 !important;
    }

    /* العنوان الرئيسي */
    .section-events h2.title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    .section-events h2.title br {
        display: none;

        /* نخليه سطر واحد/سطرين بدون كسر قوي */
    }

    /* الوصف */
    .section-events .desc {
        font-size: 13px !important;
        line-height: 1.85 !important;
        opacity: 0.85 !important;
        margin-bottom: 18px !important;

        /* يقلل التباعد الغريب بين كلمات العربي */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
        text-align: right !important;
    }

    /* شبكة الخصائص */
    .section-events .features-grid {
        display: grid !important;
        gap: 12px !important;
        margin-top: 6px !important;
    }

    /* كل feature ككرت */
    .section-events .feature-item {
        margin-bottom: 0 !important;
        gap: 12px !important;
        align-items: flex-start !important;
        padding: 14px 14px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(6px);
    }

    /* الأيقونة */
    .section-events .feature-item .icon {
        font-size: 20px !important;
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 10px !important;
        background: rgba(27,118,150,0.10) !important;
        border: 1px solid rgba(27,118,150,0.22) !important;
    }

    /* عنوان الميزة */
    .section-events .feature-item h5 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }

    /* وصف الميزة */
    .section-events .feature-item p {
        font-size: 12.5px !important;
        line-height: 1.75 !important;
        margin: 0 !important;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* ==================================
   Workshop Section - Mobile only
   ================================== */
@media (max-width: 767px){
    .section-workshop {
        padding: 60px 0 !important;
    }

    /* الخلفية/الـ watermark */
    .section-workshop .free-watermark {
        opacity: .18 !important;
        inset: auto !important;
        top: -40px !important;
        left: -40px !important;
        width: 260px !important;
        pointer-events: none;
    }

    .section-workshop .free-watermark img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* عنوان السكشن */
    .section-workshop .heading-section {
        margin-bottom: 26px !important;
        padding: 0 6px !important;
    }

    .section-workshop .heading-section .sub-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
    }

    .section-workshop .heading-section .title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .section-workshop .heading-section p {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin-top: 10px !important;
        opacity: .85 !important;

        /* يمنع تباعد الكلمات الغريب بالعربي */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }

    /* الشبكة: كرت واحد في السطر */
    .section-workshop .row.g-4 {
        row-gap: 14px !important;
    }

    .section-workshop .row.g-4 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* الكرت */
    .section-workshop .workshop-card {
        padding: 16px 16px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(6px);
    }

    /* الأيقونة */
    .section-workshop .workshop-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        display: grid;
        place-items: center;
        background: rgba(27,118,150,0.12) !important;
        border: 1px solid rgba(27,118,150,0.22) !important;
        margin-bottom: 10px !important;
    }

    .section-workshop .workshop-icon svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #1b7696;
        stroke-width: 2;
        fill: none;
    }

    /* عنوان الكرت */
    .section-workshop .workshop-card h4 {
        font-size: 16px !important;
        margin: 6px 0 10px !important;
        line-height: 1.35 !important;
    }

    /* قائمة الخدمات */
    .section-workshop .service-list {
        margin: 0 !important;
        padding: 0 18px 0 0 !important;

        /* RTL */
        list-style: disc !important;
        display: grid;
        gap: 8px !important;
    }

    .section-workshop .service-list li {
        font-size: 13px !important;
        line-height: 1.7 !important;
        opacity: .9 !important;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* ==================================
   Branding / Visual Identity - Mobile
   ================================== */
@media (max-width: 767px){
    /* ترتيب العناصر: صورة فوق ثم محتوى */
    .section-events .row.align-items-center {
        flex-direction: column !important;
    }

    /* أعمدة bootstrap للجوال */
    .section-events .col-lg-6 {
        width: 100% !important;
    }

    /* مسافات السكشن */
    .section-events {
        padding: 60px 0 !important;
    }

    /* الصورة */
    .section-events .image-box {
        margin-bottom: 16px !important;
    }

    .section-events .image-box img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    /* محتوى النص */
    .section-events .content-box {
        padding: 0 6px !important;
        text-align: right !important;
    }

    .section-events .sub-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .section-events .title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .section-events .title span {
        margin-top: 6px !important;
        display: inline !important;
    }

    .section-events .desc {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin-bottom: 18px !important;

        /* يمنع تباعد الكلمات الغريب */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }

    /* الأكورديون/العناصر */
    .section-events .accordion-style-1 .item {
        margin-bottom: 16px !important;
        padding: 14px 14px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
    }

    .section-events .accordion-style-1 .icon-title {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .section-events .accordion-style-1 .icon-title i {
        font-size: 20px !important;
    }

    .section-events .accordion-style-1 .icon-title h5 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    /* كان عندك pl-40 يسبب فراغ/قص */
    .section-events .accordion-style-1 .item p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
        opacity: .85 !important;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* ==================================
   3D Section - Mobile Responsive
   ================================== */
@media (max-width: 767px){
    /* مسافات السكشن */
    .section-3d {
        padding: 60px 0 !important;
    }

    /* الهيدر: ترتيب عمودي + توسيط */
    .section-3d .section-3d-head {
        flex-direction: column !important;
        text-align: center !important;
        row-gap: 14px;
    }

    .section-3d .section-3d-head .sub-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .section-3d .section-3d-head .title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .section-3d .section-3d-head .lead {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin-top: 0 !important;
        opacity: .85 !important;

        /* يمنع تباعد الكلمات الغريب */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }

    /* إظهار صورة الـ 3D على الجوال (بدل d-none) */
    .section-3d .section-3d-hero {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .section-3d .section-3d-hero img {
        width: min(320px, 85%) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
    }

    /* الكروت: سحب جانبي */
    .section-3d .cards-row-fixed {
        margin-top: 18px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 12px 14px !important;

        /* مساحة للسحب */
    }

    /* إخفاء سكرول بار */
    .section-3d .cards-row-fixed::-webkit-scrollbar {
        height: 0;
    }

    /* عرض كل كرت على الجوال */
    .section-3d .card-col {
        flex: 0 0 86% !important;

        /* كرت واحد واضح + جزء من اللي بعده */
        max-width: 86% !important;
        scroll-snap-align: start !important;
    }

    /* تصميم الكرت */
    .section-3d .service-card-modern {
        padding: 18px 16px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        backdrop-filter: blur(8px);
        text-align: center !important;
        min-height: 220px;
    }

    .section-3d .service-card-modern .icon-wrapper {
        width: 54px !important;
        height: 54px !important;
        border-radius: 14px !important;
        display: grid;
        place-items: center;
        margin-bottom: 12px !important;
        background: rgba(27,118,150,.12);
        border: 1px solid rgba(27,118,150,.22);
    }

    .section-3d .service-card-modern .icon-wrapper svg {
        width: 26px !important;
        height: 26px !important;
        stroke: #1b7696;
        fill: none;
        stroke-width: 2;
        opacity: .95;
    }

    .section-3d .service-card-modern h5.title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .section-3d .service-card-modern p {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin: 0 !important;
        opacity: .85 !important;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* شاشات صغيرة جدًا: خلي الكرت أعرض */
@media (max-width: 380px){
    .section-3d .card-col {
        flex-basis: 92% !important;
        max-width: 92% !important;
    }
}

/* ==================================
   Marketing Section - Mobile only
   ================================== */
@media (max-width: 767px){
    .section-marketing {
        padding: 60px 0 !important;
        position: relative;
    }

    .section-marketing .tf-container {
        padding-inline: 14px !important;
    }

    /* العنوان والوصف */
    .section-marketing .heading-section .title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .section-marketing .heading-section p {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin-top: 10px !important;
        opacity: .85;

        /* يمنع تباعد الكلمات الغريب */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }

    /* الشبكة تتحول لسحب جانبي */
    .section-marketing .grid-marketing {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 4px 16px !important;
        margin-top: 16px !important;
    }

    /* إخفاء سكرول بار */
    .section-marketing .grid-marketing::-webkit-scrollbar {
        height: 0;
    }

    /* الكرت: كرت واحد واضح + جزء من اللي بعده */
    .section-marketing .market-item {
        flex: 0 0 86% !important;
        max-width: 86% !important;
        scroll-snap-align: start !important;
        padding: 18px 16px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        backdrop-filter: blur(8px);
        text-align: center !important;
        height: auto !important;

        /* يمنع القص */
        min-height: 220px;

        /* مظهر ثابت */
    }

    /* الأيقونة */
    .section-marketing .market-item .market-icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 14px !important;
        margin: 0 auto 12px !important;
        display: grid;
        place-items: center;
        background: rgba(27,118,150,.12);
        border: 1px solid rgba(27,118,150,.22);
    }

    .section-marketing .market-item .market-icon svg {
        width: 26px !important;
        height: 26px !important;
        stroke: #1b7696;
        fill: none;
        stroke-width: 2;
        opacity: .95;
    }

    /* عنوان الكرت */
    .section-marketing .market-item h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    /* وصف الكرت */
    .section-marketing .market-item p {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin: 0 !important;
        opacity: .85;
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }
}

/* شاشات صغيرة جدًا */
@media (max-width: 380px){
    .section-marketing .market-item {
        flex-basis: 92% !important;
        max-width: 92% !important;
    }
}

/* ==================================
   Studio Section - Mobile Responsive
   ================================== */
@media (max-width: 767px){
    .section-studio {
        padding: 30px 0 !important;
    }

    .section-studio .tf-container {
        padding-inline: 14px !important;
    }

    /* watermark أخف للجوال */
    .section-studio .free-watermark {
        opacity: .03 !important;
        width: 92% !important;
    }

    /* ترتيب: الصور فوق - النص تحت */
    .section-studio .row.align-items-center {
        flex-direction: column-reverse !important;
        gap: 18px !important;
    }

    /* الشعار */
    .section-studio .studio-logo {
        margin-bottom: 14px !important;
        text-align: center;
    }

    .section-studio .studio-logo img {
        max-width: 150px !important;
        height: auto !important;
    }

    /* العنوان */
    .section-studio .content-box .title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .section-studio .content-box .title .sub-text {
        display: inline-block;
        margin-top: 6px;
        font-size: 14px !important;
        opacity: .9;
    }

    /* الوصف */
    .section-studio .content-box .desc {
        font-size: 13px !important;
        line-height: 1.9 !important;
        margin-bottom: 10px !important;
        text-align: right !important;

        /* يمنع تباعد الكلمات الغريب */
        word-spacing: 0 !important;
        letter-spacing: 0 !important;
    }

    /* قائمة المميزات */
    .section-studio .studio-feature-list {
        margin-top: 14px !important;
        padding: 0 !important;
        list-style: none;
        display: grid;
        gap: 10px;
    }

    .section-studio .studio-feature-list li {
        font-size: 13px !important;
        line-height: 1.75 !important;
        padding: 12px 12px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .section-studio .studio-feature-list i {
        color: #1b7696;
        font-size: 18px;
        margin-top: 2px;
        flex: 0 0 auto;
    }

    /* زر الزيارة */
    .section-studio .studio-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 16px !important;
        height: 50px !important;
        border-radius: 14px !important;
    }

    /* ====== Gallery Mobile: سحب جانبي ====== */
    .section-studio .studio-gallery {
        width: 100%;
    }

    /* نخلي "الصورة الكبيرة" زي باقي الصور على الجوال */
    .section-studio .studio-grid-top {
        display: none !important;

        /* نخفيها للجوال عشان ما تاخذ مساحة */
    }

    .section-studio .studio-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 4px 2px 10px !important;
    }

    .section-studio .studio-grid::-webkit-scrollbar {
        height: 0;
    }

    .section-studio .img-card {
        flex: 0 0 86% !important;

        /* كرت واحد واضح */
        max-width: 86% !important;
        scroll-snap-align: start;
        border-radius: 16px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(0,0,0,0.18);
    }

    .section-studio .img-card img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* شاشات أصغر جدًا */
@media (max-width: 380px){
    .section-studio .img-card {
        flex-basis: 92% !important;
        max-width: 92% !important;
    }

    .section-studio .img-card img {
        height: 210px !important;
    }
}

/* 1) الجوال: خل الصور قبل النص والزر */
@media (max-width: 991px){
    .section-studio .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* الصور (العمود الثاني) يطلع فوق */
    .section-studio .col-lg-6.wow.fadeInLeft {
        order: 1 !important;
        margin-bottom: 18px !important;
    }

    /* النص + الزر (العمود الأول) ينزل تحت */
    .section-studio .col-lg-6.wow.fadeInRight {
        order: 2 !important;
    }

    /* الزر بعد النص طبيعي */
    .section-studio .studio-btn {
        margin-top: 14px !important;
    }
}

/* 2) إخفاء الخط العلوي المتوهج */
.flow-separator-glow,
.glowing-separator-top,
.glowing-separator-bottom {
    display: none !important;
}

/* ===============================
   Footer Middle - Mobile layout
   =============================== */
@media (max-width: 767px){
    /* الحاوية الأساسية */
    .footer-middle {
        flex-direction: column !important;
        gap: 22px !important;
    }

    /* كل بلوك ياخذ العرض كامل */
    .footer-left-block,
    .footer-right-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* عنوان "موقعنا الجغرافي" */
    .footer-left-block .title {
        font-size: 22px !important;
        margin-bottom: 14px !important;
        line-height: 1.35 !important;
        text-align: right !important;
    }

    /* الخريطة */
    .footer-left-block iframe {
        height: 220px !important;
        border-radius: 14px !important;
    }

    /* السوشيال: التفاف + توسيط يمين */
    .social-section {
        margin-top: 16px !important;
    }

    .social-section h6 {
        margin-bottom: 10px !important;
    }

    .social-icons-list {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;

        /* RTL: يبدأ من اليمين */
    }

    .social-icons-list a {
        width: 40px !important;
        height: 40px !important;
    }

    /* بلوك اليمين (خدماتنا + تواصل) */
    .footer-right-block {
        flex-direction: column !important;
        gap: 18px !important;
    }

    /* عنوان خدماتنا */
    .footer-col-services .title,
    .footer-col-contact .title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* قائمة خدماتنا: عمودين */
    .footer-col-services ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 14px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-col-services ul li {
        margin: 0 !important;
    }

    .footer-col-services ul li a {
        display: block;
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
    }

    /* العنوان + الايميل + الارقام */
    .footer-col-contact .address {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .contact-info-list h6 a {
        font-size: 16px !important;
        word-break: break-word;
    }

    .phones-group a {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 6px !important;
    }

    /* زر الواتساب: عرض كامل */
    .whatsapp-hover-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 14px !important;
    }
}

@media (max-width: 767px){
    .section-3d {
        padding-bottom: 35px !important;
        margin-bottom: 0 !important;
    }

    .section-3d .cards-row-fixed {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ✅ Mobile only: تقليل الفراغ تحت سكشن 3D */
@media (max-width: 767px){
    .section-3d.tf-spacing-2 {
        padding-bottom: 35px !important;

        /* قلل/زوّد */
        margin-bottom: 0 !important;
    }

    .section-3d .cards-row-fixed {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-3d .card-col:last-child,
    .section-3d .service-card-modern:last-child {
        margin-bottom: 0 !important;
    }

    /* لو الفراغ جاي من السكشن اللي بعده */
    .section-3d + section {
        padding-top: 35px !important;
    }
}

/* ✅ Mobile only: Section Marketing spacing + grid fix */
@media (max-width: 767px){
    /* قلل مساحة السكشن نفسه */
    .section-marketing.tf-spacing-2 {
        padding-top: 45px !important;
        padding-bottom: 35px !important;
        margin-bottom: 0 !important;
    }

    /* قلل مسافة العنوان */
    .section-marketing .heading-section {
        margin-bottom: 22px !important;
    }

    .section-marketing .heading-section .title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .section-marketing .heading-section p {
        font-size: 13px !important;
        line-height: 1.7 !important;
        margin-top: 8px !important;
    }

    /* الجريد: عمود واحد + مسافات أقل */
    .section-marketing .grid-marketing {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* الكروت: مقاس/حشوة أقل */
    .section-marketing .market-item {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    .section-marketing .market-icon {
        width: 46px !important;
        height: 46px !important;
        margin: 0 auto 10px !important;
    }

    .section-marketing .market-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .section-marketing .market-item h4 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .section-marketing .market-item p {
        font-size: 13px !important;
        line-height: 1.7 !important;
        margin: 0 !important;
    }

    /* لو الفراغ جاي من السكشن اللي بعده */
    .section-marketing + section {
        padding-top: 35px !important;
    }
}

/* تصغير اسم الشخص + المسمى الوظيفي في سكشن الفريق (كل الأجهزة) */
.section-team .team-item .item-content .title a {
    font-size: 29px !important;

    /* كان أكبر - صغره */
    line-height: 1.35 !important;
}

.section-team .team-item .item-content .sub-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
}

/* ==============================
   Operational / Hierarchy section - Text Responsive
   ============================== */
/* 1) عناوين الهيدر (ركائز النجاح) */
.hierarchy-main-wrapper .level-1-header .sub-title {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    margin-bottom: 10px !important;
}

.hierarchy-main-wrapper .level-1-header .title-inline-box .title {
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.15;
}

.hierarchy-main-wrapper .level-1-header .success-box-identity {
    font-size: clamp(13px, 1.3vw, 18px);
    padding: 8px 14px;
    border-radius: 999px;
}

/* 2) كروت الشركات (الأسماء + الوصف) */
.hierarchy-main-wrapper .company-card-final .info-text .name {
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.35;
    margin: 0 0 8px !important;
    letter-spacing: 0;
    white-space: normal;
    word-break: break-word;
}

.hierarchy-main-wrapper .company-card-final .info-text .desc {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.75;
    margin: 0 !important;
    opacity: .85;
    white-space: normal;
    word-break: break-word;
}

/* 3) سكشن "منظومتنا العملية" (العنوان + الفقرات) */
.hierarchy-main-wrapper .op-title {
    font-size: clamp(22px, 2.6vw, 42px) !important;
    line-height: 1.2 !important;
}

.hierarchy-main-wrapper .op-content .op-paragraph {
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.95;
    margin-bottom: 14px !important;
    word-break: break-word;
}

/* 4) تحسين القراءة بالموبايل */
@media (max-width: 991px){
    .hierarchy-main-wrapper .op-content,
    .hierarchy-main-wrapper .heading-section {
        text-align: center !important;
    }

    .hierarchy-main-wrapper .level-2-logos {
        margin-top: 140px !important;
    }

    .hierarchy-main-wrapper .level-3-images {
        margin-top: 10px !important;
    }
}

@media (max-width: 767px){
    .hierarchy-main-wrapper .level-2-logos {
        margin-top: 120px !important;
    }

    .hierarchy-main-wrapper .company-card-final .info-text {
        padding-inline: 8px;
    }

    .hierarchy-main-wrapper .company-card-final .info-text .desc {
        line-height: 1.85;
    }

    /* تقليل الفراغات حول النصوص */
    .hierarchy-main-wrapper .info-text.mt-20 {
        margin-top: 12px !important;
    }

    .hierarchy-main-wrapper .operational-wide-box.mt-80 {
        margin-top: 45px !important;
    }
}

/* ==============================
   Company cards: center name + desc (all devices)
   ============================== */
.company-card-final .info-text {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* توسيط أفقي */
    justify-content: center;

    /* توسيط عمودي داخل بلوك النص */
    text-align: center;
    gap: 8px;
    padding: 14px 12px 0;
    min-height: 95px;

    /* يثبت شكل الكروت */
}

.company-card-final .info-text .name {
    margin: 0 !important;
    font-size: clamp(15px, 1.25vw, 20px);
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.company-card-final .info-text .desc {
    margin: 0 !important;
    font-size: clamp(12.5px, 1.05vw, 15px);
    line-height: 1.75;
    opacity: .85;
    white-space: normal;
    word-break: break-word;
    max-width: 95%;
}

/* موبايل: تصغير مسافات + تأكيد التوسيط */
@media (max-width: 767px){
    .company-card-final .info-text {
        min-height: 88px;
        padding: 12px 10px 0;
        gap: 6px;
    }
}

.partner-box.item-3 {
    display: flex;
    align-items: center;

    /* توسيط رأسي */
    justify-content: center;

    /* توسيط أفقي */
    height: 100%;

    /* مهم لو الحاوية ليها ارتفاع */
}

.partner-box.item-3 a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.partner-box.item-3 img {
    max-width: 80%;
    max-height: 60px;

    /* عدّلها حسب ارتفاع الحاوية */
    width: auto;
    height: auto;
    display: block;
}

.partners-carousel-section .partners-layout {
    flex-direction: column;
    align-items: center;
}

/* تنسيق القسم بالكامل */
.partners-info-section {
    padding: 60px 0;
    background-color: #001220;

    /* لون خلفية داكن من الصورة */
    color: #ffffff;
}

/* حاوية Flex لتقسيم المحتوى يميناً ويساراً */
.partners-info-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* تنسيق الصورة (يسار) */
.partners-image {
    flex: 0 0 55%;

    /* عرض الصورة بنسبة 55% */
    max-width: 55%;
    padding-right: 20px;

    /* مسافة بين الصورة والنص */
}

.partners-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* تأثير عند مرور الماوس على الصورة */
.partners-image img:hover {
    transform: scale(1.02);
}

/* تنسيق النص (يمين) */
.partners-text {
    flex: 0 0 40%;

    /* عرض النص بنسبة 40% */
    max-width: 40%;
    text-align: right;

    /* محاذاة النص لليمين */
}

.text-content {
    padding-left: 20px;
}

/* عنوان القسم */
.title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
}

/* التمييز في العنوان */
.title .highlight {
    color: #4db6ac;

    /* لون مميز (مثل لون الهايلايت في الصورة) */
    background-color: rgba(77, 182, 172, 0.1);

    /* خلفية خفيفة للهايلايت */
    padding: 0 5px;
    border-radius: 5px;
}

/* وصف القسم */
.desc {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #cfd8dc;
}

.desc .brand-name {
    font-weight: 700;
    color: #ffffff;
}

/* صندوق الإحصائيات */
.stats-box {
    display: flex;
    justify-content: flex-start;

    /* محاذاة الإحصائيات لليسار */
    gap: 40px;

    /* مسافة بين الإحصائيات */
}

.stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    min-width: 120px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat .num {
    display: block;
    font-size: 40px;
    font-weight: 900;
    color: #4db6ac;
}

.stat .txt {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    color: #cfd8dc;
}

/* تصميم متجاوب (Responsive Design) */
@media (max-width: 991px) {
    .partners-info-section .row {
        flex-direction: column;

        /* ترتيب عمودي على الشاشات المتوسطة */
    }

    .partners-image,
    .partners-text {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .partners-image {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .partners-image img {
        max-width: 80%;

        /* تصغير الصورة قليلاً على الشاشات المتوسطة */
        margin: 0 auto;
        display: block;
    }

    .partners-text {
        text-align: center;
    }

    .text-content {
        padding-left: 0;
    }

    .stats-box {
        justify-content: center;

        /* محاذاة الإحصائيات للوسط */
        gap: 20px;
    }

    .stat {
        min-width: auto;
        flex: 1;
    }
}

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

    .desc {
        font-size: 16px;
    }

    .stats-box {
        flex-direction: column;
        gap: 15px;
    }

    .stat {
        width: 100%;
    }
}

/* 1. عكس ترتيب العناصر (الصورة يسار - النص يمين) */
.partners-info-section .row {
    flex-direction: row-reverse;

    /* يعكس الاتجاه ليصبح من اليسار لليمين */
}

/* 2. تصغير حجم الصورة إلى 50% */
.partners-image {
    display: flex;
    justify-content: flex-start;

    /* محاذاة الصورة لليسار */
}

.partners-image img {
    width: 60%;

    /* تصغير العرض للنصف */
    max-width: 100%;
    height: auto;

    /* اختياري: إذا أردت الصورة في منتصف المساحة المخصصة لها */
    /* margin: 0 auto; */
}

/* 3. ضبط محاذاة النص لليمين */
.partners-text {
    text-align: right;

    /* محاذاة النص لجهة اليمين */
}

/* تجاوز كلاس text-end الموجود في الـ HTML لضمان المحاذاة الصحيحة */
.partners-text .text-content {
    text-align: right !important;
    padding-left: 0;
    padding-right: 20px;

    /* إضافة مسافة جمالية جهة اليمين */
}

/* تعديل صندوق الإحصائيات ليتناسب مع المحاذاة اليمين */
.stats-box {
    justify-content: flex-start;

    /* يبدأ من اليمين في وضع RTL */
}

/* 1. إنزال الحلقة والشعار للأسفل */
.partners-ring {
    /* كلما زدت هذا الرقم، نزل الشعار والحلقة للأسفل أكثر */
    margin-top: 160px;
    position: relative;
}

/* 2. حذف التدرج اللوني السفلي */
/* هذا الكود يستهدف العناصر التي عادة ما تحمل التدرج في هذا النوع من التصاميم */
.partners-info-section::after,
.carousel-container::after,
.scene::after {
    background: none !important;
    background-image: none !important;
    display: none !important;
}

/* 3. إزالة الفراغ السفلي */
/* إلغاء الحواشي السفلية للقسم */
.partners-info-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* إلغاء الفراغ من الحاوية الرئيسية (التي تحمل inline style في الكود) */
.container-fluid[style*="padding-bottom"] {
    padding-bottom: 0 !important;
}

/* إزالة أي مسافة إضافية تحت الـ Ring */
.carousel-container {
    margin-bottom: 0 !important;
}

/* --- تنسيقات خاصة بالجوال (أقل من 768 بكسل) --- */
@media (max-width: 768px) {
    /* 1. إخفاء الصورة تماماً */
    .partners-image {
        display: none !important;
    }

    /* 2. إزالة الفراغات الزائدة من الحاويات */
    /* استهداف الحاوية التي تحمل ستايل مباشر (inline style) */
    .container-fluid[style*="padding-top"] {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .partners-info-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .row.partners-layout {
        margin-top: 0 !important;
    }

    /* 3. تنسيق النص ليكون بعرض كامل ومناسب للجوال */
    .partners-text {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;

        /* توسيط النص يبدو أفضل على الجوال بعد حذف الصورة */
        padding: 0 15px !important;
    }

    /* إجبار المحتوى الداخلي للنص على التوسط */
    .partners-text .text-content {
        text-align: center !important;
        padding: 0 !important;
    }

    /* تنسيق العنوان والوصف */
    .title {
        font-size: 28px !important;

        /* تصغير الخط قليلاً */
        margin-top: 10px;
    }

    .desc {
        font-size: 15px !important;
    }

    /* 4. تنسيق صندوق الإحصائيات (الأرقام) */
    .stats-box {
        justify-content: center !important;

        /* توسيط الأرقام */
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    /* 5. ضبط حلقة الشعارات (Ring) للموبايل */
    .partners-ring {
        width: 100% !important;
        margin-top: 10px !important;

        /* تقليل المسافة العلوية لأن الصورة اختفت */
        /* تصغير حجم الحلقة لتناسب شاشة الجوال */
        transform: scale(0.6);
        margin-bottom: -200px !important;

        /* سحب الفراغ السفلي للحلقة */
    }
}

h1 .highlight,
h2 .highlight,
h3 .highlight,
h4 .highlight,
p  .highlight {
    color: #fff !important;
}

/* تعديل لون الهايلايت ليكون أبيض والنص داكن */
.title .highlight {
    background-color: #ffffff !important;

    /* يجعل خلفية الهايلايت بيضاء */
    color: #1b7696 !important;

    /* يجعل لون النص داكن (كحلي/أسود) ليظهر على الخلفية البيضاء */
}

/* 1. إعطاء العنوان والوصف عرض كامل لتمكين المحاذاة يميناً */
/* مع الحفاظ على align-items: center للحاوية كما هي */
.partners-text .text-content .title,
.partners-text .text-content .desc {
    width: 80% !important;

    /* يجعل العنصر يمتد ليأخذ كامل مساحة الحاوية */
    text-align: right !important;

    /* يحاذي النص لليمين داخل هذا العرض */
}

/* 2. (اختياري) إذا أردت أن تبقى الأرقام (الإحصائيات) في المنتصف، اتركها كما هي.
   أما إذا أردتها تتبع العنوان لليمين أيضاً، أضف هذا الكود: */
/* .stats-box {
    width: 100% !important;
    justify-content: flex-start !important;
} */
/* --- تنسيق خاص لتقريب العناصر في شاشات الكمبيوتر --- */
@media (min-width: 992px) {
    /* 1. تحريك الشعار (الخريطة) ناحية اليمين (باتجاه النص) */
    .floating-map-logo {
        left: 60% !important;

        /* كلما زاد الرقم، تحرك الشعار لليمين أكثر */
        transform: translate(-100%, -50%) !important;
    }

    /* 2. تحريك بلوك النص ناحية اليسار (باتجاه الشعار) */
    .partners-text {
        /* إضافة هامش يمين لدفع النص نحو المنتصف */
        margin-right: 90px !important;

        /* يمكنك زيادة الرقم 40px إذا أردت تقريبه أكثر */
    }
}

/* تأكد من أن حاوية الشعار تسمح له بالتحرك */
.partners-image {
    overflow: visible !important;

    /* يسمح للشعار بالظهور حتى لو خرج قليلاً عن حدود العمود */
}

/* --- 1. تعريف الحركات (Keyframes) --- */
/* حركة الصعود التدريجي للنصوص والحلقة */
@keyframes fadeInUpSmooth {
    from {
        opacity: 0;
        transform: translateY(40px);

        /* يبدأ من الأسفل قليلاً */
    }

    to {
        opacity: 1;
        transform: translateY(0);

        /* يستقر في مكانه */
    }
}

/* حركة التكبير (الزوم) للشعار في المنتصف */
@keyframes zoomInPop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);

        /* يبدأ صغيراً جداً */
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);

        /* يستقر بحجمه الطبيعي */
    }
}

/* --- 2. تطبيق الحركات على العناصر --- */
/* تطبيق الحركة على قسم النصوص (يمين) */
.partners-text {
    opacity: 0;

    /* مخفي في البداية */
    animation: fadeInUpSmooth 1s ease-out forwards;

    /* مدة الحركة 1 ثانية */
    animation-delay: 0.2s;

    /* يتأخر قليلاً */
}

/* تطبيق الحركة على الشعار العائم (الخريطة) */
.floating-map-logo {
    opacity: 0;

    /* مخفي في البداية */
    /* نستخدم zoomInPop مع الحفاظ على التوسيط */
    animation: zoomInPop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

    /* حركة مرنة (Bouncy) */
    animation-delay: 0.5s;

    /* يظهر بعد النص */
}

/* تطبيق الحركة على حلقة الشركاء (يسار/أسفل) */
.partners-ring {
    opacity: 0;

    /* مخفي في البداية */
    animation: fadeInUpSmooth 1s ease-out forwards;
    animation-delay: 0.8s;

    /* يظهر في النهاية */
}

/* --- 3. تحسين ظهور الدوائر النبضية خلف الشعار --- */
.pulse-rings span {
    animation-play-state: running !important;

    /* التأكد من أن النبض يعمل */
}

/* تنسيق خاص للموبايل (للشاشات أقل من 768 بكسل) */
@media (max-width: 768px) {
    /* تقليل الفراغ العلوي والسفلي الكبير */
    .page-title-content.watermark-bg {
        padding: 40px 0 !important;

        /* تم التقليل من 150px إلى 60px */
    }

    /* (اختياري) تصغير حجم خط العنوان ليتناسب مع تقليل الفراغ */
    .page-title-content .title.text-white {
        font-size: 36px !important;

        /* تصغير الخط من 60px إلى 36px */
        margin-bottom: 9px !important;
    }
}

<style>
    /* =========================================
       تنسيقات الهيرو - الإصلاح النهائي (Modern Fix)
       ========================================= */

    /* 1. تنسيق العنوان الرئيسي */
    .hero-content .title {
    font-size: 32px !important;

    /* حجم وسط ومناسب */
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* إصلاح كلمة "شركة إعلامية" لتكون مضيئة وواضحة */
.hero-content .title .highlight {
    color: #4decff !important;

    /* سماوي فاتح جداً ليبرز على الخلفية */
    text-shadow: 0 0 20px rgba(77, 236, 255, 0.4) !important;

    /* توهج خفيف */
    background: transparent !important;
    position: relative;
    padding: 0 5px !important;
    display: inline-block;
}

/* الخط الزخرفي أسفل الكلمة */
.hero-content .title .highlight::after {
    content: '';
    position: absolute;
    bottom: 6px;

    /* رفع الخط قليلاً ليتداخل مع النص بشكل جمالي */
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(27, 118, 150, 0.4) !important;

    /* شفافية أعلى */
    border-radius: 4px;
    z-index: -1;
}

/* 2. تنسيق الكبسولة (منصة المبدعون) - ضبط المحاذاة */
.sub-title {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;

    /* ضمان ترتيب العناصر */
    gap: 15px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 10px 8px 25px !important;

    /* مساحات مريحة */
    border-radius: 50px !important;
    margin-bottom: 35px !important;
    margin-left: auto;

    /* للمحاذاة يسار (في العربية right-align) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* كلمة "منصة" داخل الكبسولة */
.sub-title .badge-style {
    background: #1b7696 !important;
    color: #fff !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: block !important;
}

/* النص "المبدعون السعوديون" */
.sub-title {
    color: #e6efff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

/* 3. الوصف (الباراقراف) */
.hero-content .desc {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #cbd5e1 !important;

    /* رمادي فاتح جداً للقراءة */
    font-weight: 400 !important;
    margin-bottom: 45px !important;
    max-width: 650px;
    margin-left: auto;
}

/* 4. الأزرار */
.hero-btns {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
}

.hero-btns .tf-btn {
    padding: 14px 38px !important;

    /* تكبير الأزرار قليلاً */
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* زر ابدأ الآن */
.btn-modern-transparent {
    background: #1b7696 !important;
    color: #fff !important;
    border: 1px solid #1b7696 !important;
    box-shadow: 0 4px 15px rgba(27, 118, 150, 0.3) !important;
}

.btn-modern-transparent:hover {
    background: #155f7a !important;

    /* تغميق عند الهوفر بدلاً من الشفافية لضمان القراءة */
    transform: translateY(-2px) !important;
}

/* زر تواصل معنا */
.btn-outline-light-custom {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-outline-light-custom:hover {
    background: #fff !important;
    color: #090F16 !important;

    /* نص أسود عند الهوفر */
    border-color: #fff !important;
}

/* للموبايل */
@media (max-width: 991px) {
    .hero-content {
        text-align: center !important;
    }

    .hero-content .title {
        font-size: 30px !important;
    }

    .sub-title {
        margin: 0 auto 20px auto !important;
    }

    .hero-content .desc {
        margin-right: auto !important;
        font-size: 16px !important;
    }

    .hero-btns {
        justify-content: center !important;
    }
}

</style>
<style>
        /* =========================================
           General Styles
           ========================================= */
        .about-section-modern {
    position: relative;
    padding: 100px 0;
    background-color: #090F16;
    overflow: hidden;
    direction: rtl;
    font-family: 'Alexandria', sans-serif;
}

.container-fluid.custom-width {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* Watermark */
.center-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
    filter: grayscale(100%);
}

/* =========================================
           Typography Fixes (Title & Desc)
           ========================================= */
.sub-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.sub-title-wrapper .dash {
    width: 30px;
    height: 2px;
    background-color: #4decff;
}

.sub-title-wrapper .text {
    color: #4decff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* تعديل العنوان ليكون أقل سماكة وأصغر */
.main-title {
    font-size: 36px;

    /* تصغير الحجم */
    font-weight: 700;

    /* تقليل البولد من 800 إلى 700 */
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* تنسيق الهايلات ليكون ناعم */
.main-title .highlight {
    color: #4decff;

    /* تلوين النص بدلاً من الخلفية الثقيلة */
    position: relative;
    display: inline-block;
    background: rgba(77, 236, 255, 0.08);

    /* خلفية شفافة جداً */
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(77, 236, 255, 0.1);
}

/* توضيح النص التعريفي */
.desc {
    color: #e2e8f0;

    /* تفتيح اللون لزيادة الوضوح */
    font-size: 17px;
    line-height: 1.9;

    /* مساحة مريحة للقراءة */
    margin-bottom: 40px;
    max-width: 95%;
    font-weight: 400;

    /* زيادة بسيطة في الوزن للقراءة */
    opacity: 0.9;
}

.brand-text {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #1b7696;
    text-underline-offset: 4px;
}

/* =========================================
           Features & Button
           ========================================= */
.features-list {
    padding: 0;
    list-style: none;
    margin-bottom: 35px;
}

.features-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.features-list .icon-box {
    background: rgba(255, 255, 255, 0.05);
    color: #4decff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.features-list h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.features-list p {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 35px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 15px;
}

.modern-btn:hover {
    background: #1b7696;
    border-color: #1b7696;
    transform: translateY(-2px);
}

/* =========================================
           Image Section
           ========================================= */
.image-breakout-wrapper {
    position: relative;
    padding-left: 40px;
}

.modern-backdrop {
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: -15px;
    width: 90%;
    background: linear-gradient(135deg, #1b7696, #0e3c4d);
    border-radius: 25px;
    z-index: 1;
    opacity: 0.25;
}

.modern-img-box {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    height: 550px;
    border: 1px solid rgba(255,255,255,0.08);
}

.modern-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-badge {
    position: absolute;
    top: 50px;
    right: -20px;
    background: rgba(27, 118, 150, 0.9);
    padding: 25px;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    z-index: 3;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
}

.modern-badge .year {
    display: block;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.modern-badge .label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
}

.modern-badge .separator {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    margin: 12px auto;
}

.modern-badge .sub {
    font-size: 12px;
    color: #4decff;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 991px) {
    .about-section-modern {
        padding: 60px 0;
    }

    .content-wrapper {
        text-align: center;
        margin-top: 40px;
    }

    .sub-title-wrapper,
    .features-list li,
    .btn-wrapper {
        justify-content: center;
        text-align: center;
    }

    .features-list li {
        flex-direction: column;
        align-items: center;
    }

    .main-title {
        font-size: 28px;
    }

    .image-breakout-wrapper {
        padding-left: 0;
        margin: 0;
    }

    .modern-img-box {
        height: 300px;
    }

    .modern-badge {
        right: 10px;
        top: auto;
        bottom: -20px;
        padding: 15px 20px;
    }

    .modern-badge .year {
        font-size: 28px;
    }
}

</style>
    /* === تنسيق سكشن الشركاء المفقود === */
.partners-grid-pure {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 50px;
    position: relative;
    z-index: 10;
}

.net-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.net-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #1b7696;
    transform: translateY(-5px);
}

.net-item img {
    max-height: 40px;

    /* تحديد ارتفاع اللوجو */
    width: auto;
    filter: grayscale(100%) brightness(200%);

    /* جعل اللوجو أبيض */
    opacity: 0.7;
    transition: all 0.3s ease;
}

.net-item:hover img {
    filter: none;

    /* إظهار الألوان عند الهوفر */
    opacity: 1;
}

/* تنسيق الخطوط المتصلة */
.network-svg-container-wide {
    width: 100%;
    height: 100px;
    margin-bottom: -50px;

    /* لسحب الشركاء للأعلى قليلاً */
    position: relative;
    z-index: 1;
    opacity: 0.3;
}

.flow-line {
    fill: none;
    stroke: #1b7696;
    stroke-width: 1;
    stroke-dasharray: 5;
    animation: flowDash 20s linear infinite;
}

@keyframes flowDash {
    to {
        stroke-dashoffset: -1000;
    }
}

/* =========================================
   إصلاح حدود السكشن (Final Layout Fix)
   ========================================= */
/* 1. الفاصل الإجباري (اتركه كما هو) */
.safety-spacer {
    display: block;
    width: 100%;
    height: 100px;
    background-color: #090F16;
    clear: both;
}

/* 2. إصلاح السكشن الأساسي */
section.modern-fix {
    /* تصفير الهوامش الخارجية */
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    /* زيادة الحشوة الداخلية من الأسفل بشكل كبير جداً */
    padding-top: 80px !important;
    padding-bottom: 150px !important;

    /* التأكد من أن الارتفاع أوتوماتيكي ليحتوي العناصر */
    height: auto !important;
    min-height: auto !important;
    position: relative;
    z-index: 10 !important;
    background-color: #090F16 !important;

    /* السماح للمحتوى بالظهور */
    overflow: visible !important;
}

/* 3. حاوية المدار (إزالة الهوامش السلبية) */
.smart-orbit-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;

    /* تحديد ارتفاع للحاوية لكي تحجز مكاناً في الصفحة */
    min-height: 500px;
    height: auto;

    /* هام جداً: إزالة أي مارجن بالسالب كان يسبب القص */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 4. إعدادات المدار */
:root {
    --orbit-size: 380px;
}

.smart-orbit-wrapper {
    width: var(--orbit-size);
    height: var(--orbit-size);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-gradient-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(27, 118, 150, 0.15) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.core-hub {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #1b7696, #093040);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(27, 118, 150, 0.5);
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 65%;
    height: 65%;
    border: 1px dashed rgba(255,255,255,0.1);
    animation: spin 20s linear infinite;
}

.ring-2 {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.05);
}

@keyframes spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.planet-label {
    position: absolute;
    padding: 6px 15px;
    border-radius: 30px;
    background: rgba(9, 15, 22, 0.9);
    border: 1px solid rgba(27, 118, 150, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 15;
}

.planet-label .text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.planet-label .dot {
    width: 6px;
    height: 6px;
    background: #4decff;
    border-radius: 50%;
}

/* مواقع الكمبيوتر */
.planet-label.top {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.planet-label.bottom {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.planet-label.right {
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.planet-label.left {
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}

/* =========================================
   تنسيقات الموبايل والتابلت (أقل من 991px)
   ========================================= */
@media (max-width: 991px) {
    /* 1. زيادة الارتفاع السفلي للسكشن في الموبايل */
    section.modern-fix {
        padding-top: 60px !important;

        /* هذا الرقم هو الذي يضمن نزول الخلفية لتحت الزر والمدار */
        padding-bottom: 100px !important;
    }

    /* 2. ضبط النصوص والزر */
    .about-content {
        text-align: center !important;
        padding: 0 15px;

        /* مسافة بين الزر وبين المدار تحته */
        margin-bottom: 50px !important;
    }

    .heading-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .desc p {
        text-align: center !important;
    }

    .btn-wrap {
        display: flex;
        justify-content: center;
    }

    /* 3. ضبط المدار */
    :root {
        --orbit-size: 280px;
    }

    .smart-orbit-container {
        /* تقليل الارتفاع المحجوز للمدار في الموبايل */
        min-height: 320px;
    }

    .smart-orbit-wrapper {
        width: 280px;
        height: 280px;
    }

    .planet-label.right {
        right: -10px !important;
    }

    .planet-label.left {
        left: -10px !important;
    }

    .planet-label.top {
        top: -10px !important;
    }

    .planet-label.bottom {
        bottom: -10px !important;
    }

    .planet-label {
        padding: 5px 10px;
    }

    .planet-label .text {
        font-size: 11px;
    }
}

/* =========================================
   خط الليزر المتحرك (Laser Flow Separator)
   ========================================= */
.laser-flow-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;

    /* سمك الخط */
    /* الخط الأساسي: يتلاشى من الأطراف ويكون قوياً في المنتصف */
    background: linear-gradient(90deg, transparent 0%, #1b7696 20%, #4decff 50%, #1b7696 80%, transparent 100%);
    z-index: 10;
    opacity: 0.6;
}

/* طبقة التوهج المتحركة */
.laser-flow-separator::before {
    content: '';
    position: absolute;
    top: -2px;

    /* ليكون التوهج أكبر قليلاً من الخط */
    left: 0;
    width: 100%;
    height: 6px;

    /* تدرج لوني يعطي إيحاء بالحركة واللمعان */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(77, 236, 255, 0) 30%, 
        rgba(77, 236, 255, 0.8) 50%, 
        rgba(77, 236, 255, 0) 70%, 
        transparent 100%
    );

    /* حجم الخلفية لتمكين الحركة */
    background-size: 200% auto;

    /* تأثير الضبابية ليعطي شعور الليزر */
    filter: blur(3px);

    /* تطبيق الحركة */
    animation: laserFlow 4s linear infinite;
    mix-blend-mode: screen;

    /* لدمج التوهج بشكل جميل مع الخلفية الداكنة */
}

/* تعريف حركة التدفق */
@keyframes laserFlow {
    0% {
        background-position: 100% 0;

        /* يبدأ من اليمين */
    }

    100% {
        background-position: -100% 0;

        /* يتحرك لليسار */
    }
}

/* =========================================
   تنسيقات الموبايل فقط (Max-Width: 991px)
   ========================================= */
@media (max-width: 991px) {
    /* 1. ضبط مسافات السكشن */
    .about-section-modern {
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }

    /* 2. ترتيب العناصر */
    .row {
        display: flex;
        flex-direction: column;
    }

    .col-lg-7 {
        order: 1;
        margin-bottom: 50px !important;
        padding: 0 15px;
    }

    .col-lg-5 {
        order: 2;
        padding: 0 15px;
    }

    /* 3. تنسيق النصوص */
    .content-wrapper {
        text-align: center;
    }

    .sub-title-wrapper {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    /* === تعديل حجم العنوان (تصغير) === */
    .main-title {
        font-size: 18px !important;

        /* تم التصغير من 26 إلى 22 */
        line-height: 1.4 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* الوصف: محاذاة يمين-يسار */
    .desc {
        text-align: justify !important;
        text-justify: inter-word;
        font-size: 14px !important;

        /* تصغير طفيف للنص أيضاً */
        line-height: 1.8 !important;
        color: #dbe6f3 !important;
        margin-bottom: 25px !important;
    }

    /* 4. قائمة المميزات */
    .features-list li {
        flex-direction: column;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 12px;
    }

    .icon-box {
        margin-bottom: 10px;
    }

    .text-box h5 {
        text-align: center;
        font-size: 16px !important;

        /* تصغير عناوين الميزات */
    }

    .text-box p {
        text-align: center;
        font-size: 13px !important;
    }

    /* 5. تنسيق الصورة والبادج */
    .modern-image-composition {
        padding: 0 !important;
        max-width: 100%;
    }

    .comp-backdrop {
        width: 100%;
        height: 100%;
        transform: translate(10px, 10px);
        right: auto;
        left: 0;
    }

    /* البادج العائم */
    .comp-floating-badge {
        width: auto !important;
        min-width: 180px;

        /* تصغير العرض الأدنى */
        left: 50% !important;
        bottom: -25px !important;
        transform: translateX(-50%) !important;
    }

    .badge-content {
        padding: 12px 20px !important;
    }

    .comp-floating-badge .year {
        font-size: 22px !important;
        margin-bottom: 0 !important;
    }

    .comp-floating-badge .label {
        font-size: 12px !important;
    }

    .comp-floating-badge .separator {
        margin: 6px auto !important;
        width: 25px !important;
    }

    .comp-floating-badge .sub {
        font-size: 10px !important;
    }

    /* 6. الزر */
    .btn-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 25px !important;
    }
}

/* =========================================
   تنسيقات الكمبيوتر (أساسي)
   ========================================= */
.safety-spacer {
    display: block;
    width: 100%;
    height: 100px;

    /* مسافة للكمبيوتر */
    background-color: #090F16;
    clear: both;
}

section.modern-fix {
    margin-top: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 150px !important;
    height: auto !important;
    position: relative;
    z-index: 10 !important;
    background-color: #090F16 !important;
    overflow: visible !important;
}

/* إعدادات المدار للكمبيوتر */
:root {
    --orbit-size: 380px;
}

.smart-orbit-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 500px;
}

.smart-orbit-wrapper {
    width: var(--orbit-size);
    height: var(--orbit-size);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-gradient-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(27, 118, 150, 0.15) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.core-hub {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #1b7696, #093040);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(27, 118, 150, 0.5);
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 65%;
    height: 65%;
    border: 1px dashed rgba(255,255,255,0.1);
    animation: spin 20s linear infinite;
}

.ring-2 {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.05);
}

@keyframes spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.planet-label {
    position: absolute;
    padding: 6px 15px;
    border-radius: 30px;
    background: rgba(9, 15, 22, 0.9);
    border: 1px solid rgba(27, 118, 150, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 15;
}

.planet-label .text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.planet-label .dot {
    width: 6px;
    height: 6px;
    background: #4decff;
    border-radius: 50%;
}

.planet-label.top {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.planet-label.bottom {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.planet-label.right {
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.planet-label.left {
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.laser-flow-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #1b7696 20%, #4decff 50%, #1b7696 80%, transparent 100%);
    z-index: 10;
    opacity: 0.6;
}

.laser-flow-separator::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, transparent 0%, rgba(77, 236, 255, 0) 30%, rgba(77, 236, 255, 0.8) 50%, rgba(77, 236, 255, 0) 70%, transparent 100%);
    background-size: 200% auto;
    filter: blur(3px);
    animation: laserFlow 4s linear infinite;
    mix-blend-mode: screen;
}

@keyframes laserFlow {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* =========================================
   تنسيقات الموبايل والتابلت (رفع السكشن للأعلى)
   ========================================= */
/* =========================================
   تنسيقات الموبايل والتابلت (الحل النهائي للقص)
   ========================================= */
@media (max-width: 991px) {
    /* 1. ضبط الفاصل والمسافات */
    .safety-spacer {
        height: 20px !important;
    }

    section.modern-fix {
        padding-top: 40px !important;
        padding-bottom: 100px !important;
        overflow: visible !important;

        /* ضروري جداً لمنع القص */
    }

    .about-content {
        text-align: center !important;
        padding: 0 15px;
        margin-bottom: 40px !important;
    }

    .heading-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .desc p {
        text-align: center !important;
    }

    .btn-wrap {
        display: flex;
        justify-content: center;
    }

    /* === 2. تصغير المدار ليتناسب مع أصغر الشاشات === */
    :root {
        --orbit-size: 250px;

        /* تصغير القطر لضمان عدم الخروج */
    }

    .smart-orbit-container {
        min-height: 320px;
        margin-top: -10px !important;
        margin-bottom: 20px !important;
        width: 100%;
        overflow: visible;

        /* السماح بالظهور */
    }

    .smart-orbit-wrapper {
        width: 250px;
        height: 250px;
    }

    /* تصغير المركز لترك مساحة للكلمات */
    .core-hub {
        width: 60px;
        height: 60px;
    }

    .planet-label {
        padding: 4px 10px;
        z-index: 20;

        /* رفعها فوق الحلقات */
    }

    .planet-label .text {
        font-size: 11px;
    }

    /* === 3. سحب الكلمات للداخل (الحل السحري) === */
    /* نجعل الكلمات "تلتصق" بحافة المدار من الداخل ولا تخرج عنه */
    /* الكلمة اليمنى */
    .planet-label.right {
        right: -5px !important;

        /* تقريبها للداخل */
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* الكلمة اليسرى (التي كانت تختفي) */
    .planet-label.left {
        left: -5px !important;

        /* تقريبها للداخل */
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* الكلمة العلوية */
    .planet-label.top {
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* الكلمة السفلية */
    .planet-label.bottom {
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* =========================================
   تنسيقات الموبايل (نص مضبوط + إصلاح المدار)
   ========================================= */
@media (max-width: 991px) {
    /* 1. الفاصل والمسافات */
    .safety-spacer {
        height: 10px !important;
    }

    section.modern-fix {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        overflow: visible !important;
    }

    /* 2. تنسيق المحتوى والنصوص */
    .about-content {
        text-align: center !important;

        /* يبقي العنوان والزر في المنتصف */
        padding: 0 15px;
        margin-bottom: 30px !important;
    }

    .heading-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* === هنا التعديل: ضبط النص يمين يسار === */
    .desc p {
        text-align: justify !important;

        /* محاذاة من الجهتين */
        text-align-last: center !important;

        /* السطر الأخير يكون في المنتصف لجمالية أكثر */
        text-justify: inter-word;

        /* ضبط المسافات بين الكلمات */
        color: #e6f0ff !important;

        /* توضيح لون النص قليلاً */
        line-height: 1.8 !important;

        /* تحسين تباعد الأسطر للقراءة */
        font-size: 15px !important;
    }

    .btn-wrap {
        display: flex;
        justify-content: center;
    }

    /* 3. تنسيق المدار (كما هو مضبوط سابقاً) */
    :root {
        --orbit-size: 250px;
    }

    .smart-orbit-container {
        min-height: 300px;
        margin-top: -10px !important;
        margin-bottom: 0 !important;
        width: 100%;
        overflow: visible;
    }

    .smart-orbit-wrapper {
        width: 250px;
        height: 250px;
    }

    .core-hub {
        width: 60px;
        height: 60px;
    }

    .planet-label {
        padding: 4px 10px;
        z-index: 20;
    }

    .planet-label .text {
        font-size: 11px;
    }

    .planet-label.right {
        right: -5px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .planet-label.left {
        left: -5px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .planet-label.top {
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .planet-label.bottom {
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* تنسيق الهيدر عند التمرير (ثابت وغير شفاف) */
.header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    /* تم تغيير الخلفية لتكون لون مصمت 100% بدون شفافية */
    background-color: #090F16 !important;
    z-index: 9999;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* خط خفيف في الأسفل للفصل */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    /* ظل لزيادة الوضوح */
    animation: slideDown 0.3s ease forwards;
}

/* حركة الظهور */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* تصغير الشعار عند التمرير */
.header.is-fixed .logo img {
    max-height: 45px;
    transition: all 0.3s ease;
}

/* --- حاوية التأثير (نقطة المركز) --- */
.glowing-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* نبدأ بحجم مقارب لحجم الشعار */
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 5;
}

/* سنستخدم العناصر الزائفة لإنشاء موجتين */
.glowing-ring::before,
.glowing-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    /* نبدأ من المنتصف تماماً */
    transform: translate(-50%, -50%) scale(0.8);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;

    /* حدود مشعة بلون الهوية السماوي */
    border: 2px solid rgba(77, 236, 255, 0.8);
    box-shadow: 0 0 20px rgba(77, 236, 255, 0.5), inset 0 0 10px rgba(77, 236, 255, 0.2);
    opacity: 0;

    /* تطبيق حركة التوسع */
    animation: rippleExpand 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* --- تأخير الموجة الثانية لتتابعيها --- */
.glowing-ring::after {
    /* لون أزرق أغمق قليلاً للموجة الثانية */
    border-color: rgba(27, 118, 150, 0.8);
    box-shadow: 0 0 20px rgba(27, 118, 150, 0.5), inset 0 0 10px rgba(27, 118, 150, 0.2);

    /* تبدأ بعد ثانية ونصف */
    animation-delay: 1.5s;
}

/* --- تعريف حركة التوسع والتلاشي --- */
@keyframes rippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.8);

        /* البداية صغيرة حول الشعار */
        opacity: 1;

        /* ظاهرة بالكامل */
        border-width: 3px;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);

        /* تتوسع لـ 3 أضعاف حجمها */
        opacity: 0;

        /* تختفي تماماً */
        border-width: 0px;

        /* الحدود تنحف حتى تختفي */
    }
}

/* --- ضمان تمركز العناصر في شاشة التحميل --- */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #090F16;
    z-index: 9999;
}

.wrap-loader {
    position: relative;
    z-index: 10;

    /* الشعار يبقى ثابتاً في المقدمة */
}

/* موبايل فقط: تصغير + توسيط عنوان (خدماتنا الإبداعية) */
@media (max-width: 767.98px){
    .section-services .heading-section h2.title {
        font-size: 24px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
}

/* موبايل فقط: تصغير + توسيط عنوان (أحدث أعمالنا) */
@media (max-width: 767.98px){
    .heading-section h2.title {
        font-size: 24px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
}

/* موبايل فقط: ضبط تباعد الفوتر */
@media (max-width: 767.98px){
    /* خفف تباعد العمود الأول */
    .row.align-items-center.justify-content-center > .col-md-6 {
        margin-bottom: 10px !important;
    }

    /* النص: خليه مريح */
    .row.align-items-center.justify-content-center span {
        line-height: 1.7;
        padding: 0 10px;
    }

    /* لو في صفحات ثانية تظهر فيها الروابط بالموبايل */
    .bottom-links {
        padding-left: 0 !important;

        /* ps-5 تلخبط بالموبايل */
        justify-content: center !important;
        gap: 12px !important;
        flex-wrap: wrap;
    }

    .bottom-links a {
        display: inline-block;
        padding: 6px 8px;

        /* تباعد “سكرول/لمس” مريح */
        line-height: 1.2;
    }
}

@media (max-width: 768px){
    /* اعطِ مساحة فوق العنوان + زوّد line-height */
    .page-title-content h1.title {
        line-height: 1.6 !important;
        padding-top: 8px !important;

        /* يمنع قص الهمزات */
        overflow: visible !important;
    }

    /* احتياط: خلي حاوية العنوان تسمح بالبروز */
    .page-title-content {
        overflow: visible !important;
    }

    /* لو ما تبغى تزيد padding-top كثير، خلي padding-top للسكشن بسيط بدل 0 */
    .page-title-section {
        padding-top: 10px !important;

        /* بدل 0 */
    }
}

@media (max-width: 768px){
    /* أي watermark/خلفية كبيرة لا تخرج خارج العرض */
    .free-watermark {
        width: 280px !important;
        left: -40px !important;

        /* بدل -100px */
        top: auto !important;
    }

    /* لو تبي الأسهل: اخفيه بالموبايل تمامًا */
    /* .free-watermark{ display:none !important; } */
}

/* اخفاء السهم الافتراضي (الأبيض) للقالب نهائياً */
.progress-wrap::before,
.progress-wrap::after,
.progress-wrap a::before,
.progress-wrap a::after {
    content: none !important;
    display: none !important;
}

/* وتأكد أن أيقونتك هي اللي تظهر */
.progress-wrap .custom-arrow {
    color: #1b7696 !important;
    z-index: 5;
}

/* =============================================
   تصغير الشعار المتحرك للموبايل فقط
   ============================================= */
@media (max-width: 768px) {
    /* 1. تقليل مساحة السكشن ككل */
    .modern-logo-section {
        padding: 50px 0 !important;

        /* تقليل الفراغ فوق وتحت */
        min-height: auto !important;
    }

    .logo-wrapper-modern {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;

        /* للسماح بظهور التموج */
    }

    /* 2. تصغير الدائرة المركزية */
    .logo-box {
        width: 280px !important;

        /* العرض المناسب للموبايل */
        height: 280px !important;

        /* الطول المناسب للموبايل */
    }

    /* 3. ضبط الصورة داخل الدائرة */
    .big-logo-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* 4. تصغير تأثير التوهج الخلفي (Pulse) */
    .pulse-glow {
        width: 80% !important;
        height: 80% !important;
    }

    /* 5. ضبط دوائر التموج (Ripple) */
    .ripple-effect span {
        width: 100% !important;
        height: 100% !important;
    }
}

/* =========================================
   تنسيق توقيع المصمم (Designer Signature)
   ========================================= */
.designer-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;

    /* مسافة عن الحقوق */
    font-family: 'Alexandria', sans-serif;
    font-size: 13px;
    direction: rtl;
}

.designer-signature .label {
    color: rgba(255, 255, 255, 0.5);

    /* لون رمادي خفيف للنص "تصميم" */
    font-weight: 400;
}

.designer-signature .azzam-name {
    color: #fff;
    font-weight: 700;

    /* خط عريض للاسم */
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.designer-signature .azzam-name svg {
    width: 14px;
    height: 14px;
    stroke: #1b7696;

    /* لون الريشة */
    transition: 0.3s;
}

/* تأثير الهوفر (Hover Effect) */
.designer-signature .azzam-name:hover {
    background: rgba(27, 118, 150, 0.15);

    /* خلفية زرقاء خفيفة */
    border-color: #1b7696;

    /* حدود زرقاء */
    color: #1b7696;

    /* الاسم يصبح أزرق */
    transform: translateY(-2px);

    /* رفعة بسيطة */
    box-shadow: 0 5px 15px rgba(27, 118, 150, 0.2);
}

.designer-signature .azzam-name:hover svg {
    transform: rotate(45deg) scale(1.1);

    /* حركة للريشة */
    stroke: #fff;

    /* الريشة تصبح بيضاء */
}

/* --- للموبايل --- */
@media (max-width: 768px) {
    .designer-signature {
        margin-top: 20px;
        flex-direction: row;
    }
}