:root {
    --blue: #09518f;
    --bgDark: #171b23;
    --blueBorder: #1074cb;
    --jumbotronBlue: #2a313a;
    --gray: #5d5d5d;
    --base-gray: #f4f4f4;
    --mediumGray: #e3e4e6;
    --jumbotronGray: #6a6a6a;
    --border-gray: #d9dee5;
    --jumbotron-text-gray: #6f7782;
    --jumbotron-text-white: white;
    --textDarkColor: #676a6c;
    --textLightColor: #a0a5a8;
    --progress-green: #49d560;
    --light-blue: #00acee;
    --red: #eb4d5c;
    --about-section-heading-blue: #074e8c;
}

body {
    background-color: transparent; /* إزالة الخلفية */
    color: var(--textLightColor); /* تعيين لون النص */
    margin: 0; /* إزالة الهوامش الافتراضية */
}

.product-navbar {
    height: 40px;
    background: #090b0f;
    font-size: 14px;
    color: #333;
} 

.product-navbar-centered {
    max-width: 90vw;
    margin: 0 5vw;
}

.product-navbar-centered ul {
    margin: 0;
    padding: 0;
}

.product-navbar-centered li {
    float: left;
    list-style: none;
    margin-right: 30px;
    padding-top: 9px;
}

.product-navbar-centered a {
    color: #6f7782;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

h1 {
    color: var(--about-section-heading-blue);
    font-size: 2.5em; /* حجم الخط الافتراضي */
    text-align: center; /* محاذاة النص في المنتصف */
    margin: 20px 0; /* هوامش أعلى وأسفل */
}

p {
    font-size: 1.2em; /* حجم الخط الافتراضي */
    color: white;
    line-height: 1.6; /* ارتفاع السطر لتحسين القراءة */
    text-align: justify; /* محاذاة النص */
    margin: 15px; /* هوامش أعلى وأسفل */
    direction: ltr;
}

img {
    width: 15%; /* تأكد من أن الصورة تتناسب مع عرض الحاوية */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    margin-top: 20px; /* إضافة مسافة بين النص والصورة */
    display: block; /* جعل الصورة عنصر كتلة */
    margin-left: auto; /* توسيط الصورة أفقيًا */
    margin-right: auto; /* توسيط الصورة أفقيًا */
}

/* استعلامات الوسائط لتحسين العرض على الشاشات الصغيرة */
@media (max-width: 768px) {
    h1 {
        font-size: 2em; /* تقليل حجم الخط على الشاشات الصغيرة */
        margin: 15px 0; /* تعديل الهوامش */
    }

    p {
        font-size: small; /* تقليل حجم الخط على الشاشات الصغيرة */
        margin: 10px; /* تعديل الهوامش */
    }
}