*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
body{
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
    background-color: var(--page-bg);
    padding-top: 100px;
}
:root {
    --bg-color: #172B22;  /*خلفية الهيدر والفوتر والأقسام المميزة، وعناوين النصوص على الخلفيات الفاتحة.*/
    --text-color: #292F2A;  /*لون الفقرات والوصف والنصوص العادية فوق الخلفيات الفاتحة*/
    --btns-bg: #C6A76B;  /*خلفية الأزرار الرئيسية، الأيقونات المميزة، والخطوط الزخرفية. استخدم نصًا أخضر غامقًا فوقه.*/
    --page-bg: #F5F1E8;  /*خلفية الصفحة والأقسام وبطاقات المحتوى الهادئة*/
    --sub-title-bg: rgba(198, 167, 107, 0.18);  /*خلفية الصفحة والأقسام وبطاقات المحتوى الهادئة*/
}
/* //////////////////////////////////////////////// */
i{
    color: var(--btns-bg);
}

/* header start */
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.top-bar{
    background-color: var(--bg-color);
    color: var(--page-bg);
    border-bottom: 1px solid var(--btns-bg);
    font-size: 13px;
}

/*navbar start */
nav{
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--btns-bg);
}
#mainNav ul li a{
    color: var(--page-bg);
}
.hero-btn{
    color: var(--bg-color);
    background-color: var(--btns-bg);
    padding: 7px 15px;
    border-radius: 15px;
}
.hero-btn:hover{
    opacity: .8;
    transform: scale(.98);
    transition: .3s;
}
.hero-btn i{
    color: var(--bg-color);
    padding-left: 20px;
    font-size: 15px;
}
#mainNav ul li a{
    position: relative;
    display: inline-block;
}
nav ul li a::before{
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background-color: var(--btns-bg);
    bottom: -5px;
    right: 0;
    transition: 1s;
}
nav ul li.active a::before{
    width: 100%;
}
#mainNav ul li a:hover{
    color: var(--btns-bg);
}
.logo-text{
    color: var(--page-bg);
}
.logo-text .logo-name{
    font-size: 25px;
}
.logo-text .logo-sec-name{
    font-size: 12px;
}
/* header end */

/* ====================//////////////////////// من نحن ///////////////////////// ==================== */
.about-section {
    color: var(--text-dark);
    border-bottom: 1px solid var(--btns-bg);
}
.text-green {
    color: var(--bg-color) !important;
}
#under-line{
    color: var(--btns-bg);
}
.text-gold {color: var(--btns-bg) !important;}
.bg-gold-subtle {background-color: var(--sub-title-bg)}
.xsmall {font-size: 0.8rem;}
/* ==================== الصور والكروت العائمة ==================== */
.main-img-box img {
    max-height: 460px;
    min-height: 300px;
    transition: transform 0.4s ease;
}
.main-img-box:hover img {
    transform: scale(1.02);
}
/* تأثير Glassmorphism للأنواط العائمة */
.floating-card {
    background: var(--page-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--btns-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}
.floating-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(220, 22, 22, 0.12) !important;
}
.exp-card {
    bottom: 0;
    right: 0;
    max-width: 85%;
}
.project-card {
    top: 30px;
    left: -15px;
    max-width: 80%;
}
/* ==================== كروت المميزات الأربعة ==================== */
.feature-item {
    transition: border-color 0.3s ease, transform 0.3s ease;
    border-color: #e5e7eb !important;
}
.feature-item:hover {
    border-color: var(--btns-bg) !important;
    transform: translateY(-3px);}
.feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--page-bg);
}

/* ==================== الأزرار ==================== */
.btn-gold {
background-color: var(--btns-bg);
color: var(--text-color);
border: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-gold i{
    color: var(--text-color);
}
.btn-gold:hover {
background-color: var(--text-color);
color: #ffffff;
transform: translateY(-2px);
}
.btn-gold:hover i{
    color: var(--page-bg);
}
.btn-outline-green {
border: 2px solid var(--bg-color);
color: var(--primary-green);
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn-outline-green:hover {
background-color: var(--bg-color);
color: #ffffff;
transform: translateY(-2px);
}
/* ////////////////////////////////// about end ///////////////////////// */

/* ==================== تنسيقات صفحة About ==================== */
.bg-page-bg {
  background-color: var(--page-bg);
}

.text-dark-custom {
  color: var(--bg-color) !important;
}

.about-img-box {
  height: 420px;
}

.btn-outline-dark-custom {
  border: 1px solid var(--bg-color);
  color: var(--bg-color);
  transition: all 0.3s ease;
}

.btn-outline-dark-custom:hover {
  background-color: var(--bg-color);
  color: #ffffff;
}

.vision-box, .mission-box {
  border-color: rgba(23, 43, 34, 0.08) !important;
  transition: transform 0.3s ease;
}

.vision-box:hover, .mission-box:hover {
  transform: translateY(-5px);
}

/* foooooooooooooooter start */
.footer-section {
    background-color: var(--bg-color);
    border-top: 3px solid var(--btns-bg);
}

.text-gold {
    color: var(--btns-bg) !important;
}

.border-gold {
    border-color: var(--btns-bg) !important;
}

.social-icon {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--btns-bg);
    border-color: var(--btns-bg);
    transform: translateY(-3px);
}
.social-icon:hover i{
    color: var(--page-bg);
}
.footer-links a:hover {
    color: var(--btns-bg) !important;
    opacity: 1 !important;
    padding-right: 4px;
}

.xsmall {
    font-size: 0.825rem;
}
/* foooooooooooooooter end */

/* ==================== تنسيقات الأزرار العائمة ==================== */
.floating-buttons-wrapper {
    bottom: 20px ;
    right: 20px ;
    z-index: 9999 ; /* لضمان ظهور الأزرار فوق كل عناصر الصفحة */
}

.float-btn {
    width: 52px;
    height: 52px;
}

.float-btn:hover {
    transform: scale(1.1);
}

/* زر الاتصال */
.float-phone {
    background-color: var(--btns-bg);
    color: var(--page-bg) ;
}

/* زر الواتساب */
.float-whatsapp {
    background-color: #25D366;
}

.float-whatsapp:hover {
    background-color: #20ba5a;
}

/* تحسين المظهر للهواتف المحمولة */
@media (max-width: 576px) {
    .floating-buttons-wrapper {
        bottom: 15px !important;
        right: 15px !important;
    }
    .float-btn {
        width: 48px;
        height: 48px;
    }
}