*{
    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);
}
: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;
}
/* //////////////////////////////////////// hero section start //////////////////////////////*/
.hero-section{
    position: relative;
    min-height: 92vh;
    background-image: url(../images/مشتل\ أرجاء\ العاصمة.webp);
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-section .hero-section-content{
    background-color: var(--bg-color);
    /* backdrop-filter: blur(10px); */
    border-radius:20px;
    animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: .9;
        transform: translateY(0px);
    }
}
.hero-section-content .delay1{ animation: fadeInUp .5s ease-out forwards;}
.hero-section-content .delay2{ animation: fadeInUp .7s ease-out forwards;}
.hero-section-content .delay3{ animation: fadeInUp .9s ease-out forwards;}
.hero-section-content .delay4{ animation: fadeInUp 1.1s ease-out forwards;}
.hero-section-content .delay5{ animation: fadeInUp 1.3s ease-out forwards;}
.hero-section-content .delay6{ animation: fadeInUp 1.5s ease-out forwards;}

.hero-section .hero-section-content h6{
    color: var(--btns-bg);
    font-size: 16px;
}
.hero-section .hero-section-content h4{
    color: var(--btns-bg);
}
.hero-section .hero-section-content h1{
    color: var(--page-bg);
    font-size: clamp(28px, 2.6vw, 40px);
}
.hero-section .hero-section-content h5{
    color: var(--page-bg);
}

/* //////////////////////////////////////// hero section 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);
}

/* ///////////////////////////////////////////////// services start /////////////////////////////////////////////// */
.services-section {
    border-bottom: 1px solid var(--btns-bg);
    background-color: var(--page-bg);
}
.main-title, .card-title {
    color: var(--bg-color);
}
.body-text {
    color: var(--text-color);
}
.highlight-gold {
    color: var(--btns-bg);
    border-color: var(--btns-bg) !important;
}
.badge-custom {
    background-color: var(--sub-title-bg);
    color: var(--btns-bg);
}
.badge-subtle {
    background-color: var(--page-bg);
    color: var(--bg-color);
}
.xsmall {
    font-size: 0.8rem;
}
/* تصميم الكروت وتأثير الـ Hover */
.service-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border-color: rgba(23, 43, 34, 0.1) !important;
}
.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(23, 43, 34, 0.08) !important;
    border-color: var(--btns-bg) !important;
}
/* أيقونة الخدمة */
.service-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: var(--page-bg);
    color: var(--bg-color); /* نص/أيقونة داكنة فوق اللون الذهبي حسب توجيهك */
    transition: transform 0.3s ease;
}
.service-card:hover .service-icon-wrapper {
    transform: scale(1.08);
}

/* روابط الكروت */
.service-link {
    color: var(--bg-color);
    transition: color 0.3s ease;
}

.service-card:hover .service-link {
    color: #8c6d31;
}

/* شريط الدعوة للتواصل بالأسفل (CTA) */
.cta-banner {
    background-color: var(--bg-color);
}

.cta-icon-box {
    width: 55px;
    height: 55px;
    background-color: var(--sub-title-bg);
    color: var(--btns-bg); /* نص/أيقونة داكنة فوق الذهبي */
}

.btn-main {
    background-color: var(--btns-bg);
    color: var(--bg-color); /* نص أخضر غامق فوق خلفية الزر الذهبي */
    border: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.btn-main:hover {
    background-color: var(--btns-bg);
    color: var(--bg-color);
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/*///////////// our works section start /////////////*/
.portfolio-section {
    border-bottom: 1px solid var(--btns-bg);
    background-color: var(--page-bg);
}

.portfolio-card {
    border-color: rgba(23, 43, 34, 0.1) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.portfolio-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(23, 43, 34, 0.12) !important;
    border-color: var(--btns-bg) !important;
}

.portfolio-img-wrapper {
    height: 280px;
    background-color: #e2ded5;
}

.portfolio-img {
    height: 100%;
    transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-img {
    transform: scale(1.08);
}

/* التراكب الداكن فوق الصورة عند التحويم */
.portfolio-overlay {
    background: linear-gradient(to top, rgba(23, 43, 34, 0.92) 0%, rgba(23, 43, 34, 0.3) 60%, transparent 100%);
    opacity: 0.9;
    transition: opacity 0.35s ease;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

.text-gold {
    color: var(--btns-bg) !important;
}
/* our works section end */

/* why us start */
/* ==================== تنسيقات سكشن لماذا تختارنا ==================== */
.why-us-section {
    background-color: #ffffff;
    border-bottom: 1px solid var(--btns-bg);
}

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

.feature-card {
    background-color: var(--page-bg);
    border-color: rgba(23, 43, 34, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.33s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--btns-bg) !important;
    box-shadow: 0 12px 25px rgba(23, 43, 34, 0.08) !important;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: var(--page-bg);
    color: var(--btns-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.feature-card:hover .feature-icon-wrapper {
    background-color: var(--bg-color);
    color: var(--page-bg);
}
/* why us end */

/* users opinions start */
/* ==================== تنسيقات سكشن آراء العملاء ==================== */
.testimonials-section {
    background-color: var(--page-bg);
}

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

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(23, 43, 34, 0.08) !important;
}

.client-avatar {
    width: 45px;
    height: 45px;
    background-color: var(--bg-color);
    font-size: 1.1rem;
}
/* users opinions end */

/* contact us start */
.bg-page-bg {
    background-color: var(--page-bg);
}

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

.contact-cta-card {
    background-color: var(--bg-color);
    box-shadow: 0 15px 35px rgba(23, 43, 34, 0.15);
}

.badge-gold-subtle {
    background-color: rgba(198, 167, 107, 0.2);
    color: var(--btns-bg);
    border: 1px solid rgba(198, 167, 107, 0.3);
}

.btn-main-gold {
    background-color: var(--btns-bg);
    color: var(--bg-color);
    transition: all 0.3s ease;
}

.btn-main-gold:hover {
    background-color: #b5955a;
    color: var(--bg-color);
    transform: translateY(-2px);
}

.btn-outline-light-custom {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-outline-light-custom:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
}

.contact-info-card {
    border-color: rgba(23, 43, 34, 0.08) !important;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.contact-info-card:hover {
    transform: translateX(-5px);
    border-color: var(--btns-bg) !important;
}

.contact-icon-box {
    width: 50px;
    height: 50px;
    background-color: var(--bg-color);
    color: var(--btns-bg);
}

.bg-whatsapp {
    background-color: #25D366 !important;
}

.dir-ltr {
    direction: ltr !important;
}
/* contact us end */

/* 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;
    }
}