/* =========================================
   Ebdaa Theme - إبداعات الحلول
   ========================================= */

:root{
    --ebdaa-primary: #009bb6;
    --ebdaa-primary-dark: #007f95;
    --ebdaa-secondary: #fbad3b;
    --ebdaa-secondary-dark: #e79a28;
    --ebdaa-whatsapp: #25D366;
    --ebdaa-whatsapp-dark: #1fb85a;

    --ebdaa-dark: #1f2937;
    --ebdaa-text: #4b5563;
    --ebdaa-muted: #6b7280;
    --ebdaa-light: #f8fafc;
    --ebdaa-soft: #fcfcfc;
    --ebdaa-white: #ffffff;
    --ebdaa-border: #e5e7eb;

    --ebdaa-radius-sm: 8px;
    --ebdaa-radius: 12px;
    --ebdaa-radius-lg: 16px;

    --ebdaa-shadow-sm: 0 4px 14px rgba(0,0,0,.06);
    --ebdaa-shadow: 0 8px 24px rgba(0,0,0,.08);
    --ebdaa-shadow-lg: 0 14px 34px rgba(0,0,0,.12);

    --ebdaa-transition: .3s ease;
}

/* =========================================
   Base
   ========================================= */
html{
    direction: rtl;
    scroll-behavior: smooth;
}

body{
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Droid Arabic Kufi', Tahoma, Arial, sans-serif;
    color: var(--ebdaa-dark);
    background: var(--ebdaa-white);
}

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

a{
    text-decoration: none;
    transition: var(--ebdaa-transition);
}

.main{
    width: 100%;
    overflow: hidden;
}

.page-content{
    position: relative;
}

.section-setting{
    position: relative;
    width: 100%;
    padding: 70px 0;
}

.section-color{
    background: var(--ebdaa-soft);
}

.ebdaa-container-narrow{
    max-width: 900px;
    margin: 0 auto;
}

/* =========================================
   Section Titles
   ========================================= */
.section-title{
    position: relative;
    margin-bottom: 35px;
    text-align: center;
}

.section-title .heading,
.ebdaa-section-title h2{
    font-size: 32px;
    font-weight: 800;
    color: var(--ebdaa-primary);
    margin-bottom: 12px;
    line-height: 1.6;
}

.section-desc,
.ebdaa-section-title p{
    max-width: 850px;
    margin: 0 auto;
    line-height: 2;
    color: var(--ebdaa-text);
    font-size: 16px;
}

.section-title span{
    display: inline-block;
    position: relative;
    width: 70px;
    height: 16px;
    margin-top: 10px;
}

.section-title span:before,
.section-title span:after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 0;
}

.section-title span:before{
    right: 18px;
    background: var(--ebdaa-secondary);
}

.section-title span:after{
    left: 18px;
    background: var(--ebdaa-primary);
}

/* =========================================
   Buttons
   ========================================= */
.ebdaa-btn,
.hero-btn,
.btn-main,
.btn-second,
.btn-whatsapp{
    display: inline-block;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid transparent;
    transition: var(--ebdaa-transition);
    text-align: center;
    cursor: pointer;
}

.ebdaa-btn-primary,
.btn-main{
    background: var(--ebdaa-primary);
    color: #fff;
    border-color: var(--ebdaa-primary);
}

.ebdaa-btn-primary:hover,
.btn-main:hover{
    background: var(--ebdaa-primary-dark);
    border-color: var(--ebdaa-primary-dark);
    color: #fff;
}

.ebdaa-btn-secondary,
.btn-second{
    background: var(--ebdaa-secondary);
    color: #fff;
    border-color: var(--ebdaa-secondary);
}

.ebdaa-btn-secondary:hover,
.btn-second:hover{
    background: var(--ebdaa-secondary-dark);
    border-color: var(--ebdaa-secondary-dark);
    color: #fff;
}

.ebdaa-btn-whatsapp,
.btn-whatsapp{
    background: var(--ebdaa-whatsapp);
    color: #fff;
    border-color: var(--ebdaa-whatsapp);
}

.ebdaa-btn-whatsapp:hover,
.btn-whatsapp:hover{
    background: var(--ebdaa-whatsapp-dark);
    border-color: var(--ebdaa-whatsapp-dark);
    color: #fff;
}

.ebdaa-btn-outline{
    background: transparent;
    color: var(--ebdaa-primary);
    border-color: var(--ebdaa-primary);
}

.ebdaa-btn-outline:hover{
    background: var(--ebdaa-primary);
    color: #fff;
}

/* =========================================
   Hero
   ========================================= */
/*.hero-section{
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.50)),
        url('../images/1.jpg') center center / cover no-repeat;
    color: #fff;
    overflow: hidden;
}*/
.hero-section{
    background: linear-gradient(135deg, #009bb6, #016d80);
    padding: 80px 0;
    color: #fff;
    overflow: hidden;
}

/* النص */
.hero-content h1{
    font-size: 36px;
    font-weight: 800;
    line-height: 1.8;
    margin-bottom: 20px;
}

.hero-content p{
    font-size: 17px;
    line-height: 2;
    margin-bottom: 25px;
    color: #f1f1f1;
}

/* Badge */
.hero-badge{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 15px;
}

/* أزرار */
.hero-buttons{
    margin-bottom: 20px;
}

.hero-btn{
    display: inline-block;
    padding: 12px 24px;
    margin-left: 10px;
    border-radius: 8px;
    font-weight: bold;
    transition: .3s;
    text-decoration: none;
}

.btn-main{
    background: #fff;
    color: #009bb6;
}

.btn-main:hover{
    background: #f1f1f1;
}

.btn-second{
    background: #fbad3b;
    color: #fff;
}

.btn-second:hover{
    background: #e99924;
}

/* Features */
.hero-features span{
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    background: rgba(255,255,255,0.1);
    padding: 5px 10px;
    border-radius: 6px;
}

/* الصورة */
.hero-image{
    text-align: center;
}

.hero-image img{
    max-width: 100%;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
    transition: .3s;
}

.hero-image img:hover{
    transform: translateY(-5px);
}

/* موبايل */
@media (max-width: 767px){
    .hero-section{
        text-align: center;
    }

    .hero-content h1{
        font-size: 26px;
    }

    .hero-content p{
        font-size: 15px;
    }

    .hero-btn{
        display: block;
        margin: 10px auto;
    }

    .hero-features span{
        display: inline-block;
        margin: 5px;
    }

    .hero-image{
        margin-top: 30px;
    }
}

/* =========================================
   Cards
   ========================================= */
.ebdaa-card,
.feature-card,
.system-card,
.price-card,
.pricing-box,
.seo-card{
    background: var(--ebdaa-white);
    border-radius: var(--ebdaa-radius-lg);
    box-shadow: var(--ebdaa-shadow);
    padding: 24px;
    transition: var(--ebdaa-transition);
}

.ebdaa-card:hover,
.feature-card:hover,
.system-card:hover,
.pricing-box:hover{
    transform: translateY(-4px);
    box-shadow: var(--ebdaa-shadow-lg);
}

/* =========================================
   Service / Feature Cards
   ========================================= */
.icon-box,
.feature-card{
    background: var(--ebdaa-white);
    border-radius: var(--ebdaa-radius);
    box-shadow: var(--ebdaa-shadow-sm);
    padding: 24px 20px;
    margin-bottom: 30px;
    transition: var(--ebdaa-transition);
    min-height: 250px;
}

.icon-box:hover,
.feature-card:hover{
    transform: translateY(-5px);
    box-shadow: var(--ebdaa-shadow);
}

.icon-box-icon,
.feature-card .icon{
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,155,182,.09);
    color: var(--ebdaa-primary);
    font-size: 30px;
    margin: 0 auto 18px;
}

.icon-box-content,
.feature-card{
    text-align: center;
}

.icon-box-content h3,
.icon-box-content h4,
.feature-card h3{
    color: var(--ebdaa-primary);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.5;
}

.icon-box-content p,
.feature-card p{
    color: var(--ebdaa-text);
    line-height: 2;
    font-size: 15px;
    margin: 0;
}

/* =========================================
   System Section
   ========================================= */
.system-card{
    overflow: hidden;
    padding: 0;
}

.system-card img{
    width: 100%;
    display: block;
}

.system-card .content{
    padding: 22px;
    text-align: right;
}

.system-card h3{
    color: var(--ebdaa-dark);
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
}

.system-card p{
    color: var(--ebdaa-text);
    line-height: 2;
    margin-bottom: 18px;
}

.system-badge,
.ebdaa-badge{
    display: inline-block;
    background: rgba(0,155,182,.10);
    color: var(--ebdaa-primary);
    padding: 7px 12px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.system-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.system-features-box{
    background: var(--ebdaa-white);
    border-radius: var(--ebdaa-radius-lg);
    box-shadow: var(--ebdaa-shadow);
    padding: 25px;
    height: 100%;
    text-align: right;
}

.system-features-title{
    color: var(--ebdaa-dark);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 18px;
}

.system-highlight-box{
    background: var(--ebdaa-light);
    border-right: 4px solid var(--ebdaa-secondary);
    border-radius: var(--ebdaa-radius-sm);
    padding: 18px;
    margin-top: 20px;
}

.system-highlight-box h4{
    color: var(--ebdaa-dark);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.system-highlight-box p{
    color: var(--ebdaa-text);
    line-height: 2;
    margin: 0;
}

/* =========================================
   Lists
   ========================================= */
.feature-list{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.feature-list li{
    position: relative;
    padding: 12px 30px 12px 0;
    color: var(--ebdaa-text);
    line-height: 2;
    border-bottom: 1px solid #edf2f7;
}

.feature-list li:last-child{
    border-bottom: 0;
}

.feature-list li:before{
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    right: 0;
    top: 12px;
    color: var(--ebdaa-primary);
}

/* =========================================
   Pricing
   ========================================= */
.pricing-box{
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

.pricing-box h3{
    color: var(--ebdaa-dark);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}

.pricing-box .price{
    font-size: 40px;
    color: var(--ebdaa-primary);
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1.3;
}

.price-note{
    color: var(--ebdaa-muted);
    font-size: 14px;
    margin-bottom: 18px;
}

.pricing-box ul{
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.pricing-box ul li{
    padding: 10px 0;
    color: var(--ebdaa-text);
    border-bottom: 1px solid #eee;
    line-height: 1.9;
}

.pricing-box ul li:last-child{
    border-bottom: 0;
}

.pricing-box.featured{
    border: 2px solid var(--ebdaa-primary);
}

.pricing-box .badge{
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--ebdaa-primary);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

/* =========================================
   CTA
   ========================================= */
.cta-section{
    background: linear-gradient(135deg, var(--ebdaa-primary), var(--ebdaa-primary-dark));
    color: #fff;
    text-align: center;
    padding: 80px 0;
}

.cta-section h2{
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
    line-height: 1.6;
}

.cta-section p{
    max-width: 850px;
    margin: 0 auto 25px;
    line-height: 2;
    color: #eef7fb;
    font-size: 16px;
}

.cta-actions{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================
   SEO Text
   ========================================= */
.seo-text{
    background: var(--ebdaa-white);
    padding: 60px 0;
}

.seo-text h2{
    color: var(--ebdaa-dark);
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.6;
    text-align: right;
}

.seo-text p{
    color: var(--ebdaa-text);
    line-height: 2.2;
    font-size: 16px;
    text-align: right;
}

/* =========================================
   Footer
   ========================================= */
.footer{
    background: #121826;
    padding: 40px 0 20px;
    border-top: 6px solid var(--ebdaa-secondary);
}

.footer .widget{
    color: #fff;
    margin-bottom: 25px;
}

.footer .widget .title{
    color: var(--ebdaa-secondary);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(255,255,255,.18);
}

.footer .widget .details,
.footer .widget p,
.footer .widget li,
.footer .widget a{
    color: #e5e7eb;
    line-height: 2;
    font-size: 14px;
}

.footer .widget a:hover{
    color: var(--ebdaa-secondary);
}

.footer ul.footer-scoial,
.footer ul.fast-links,
.footer ul.footer-contact{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul.footer-scoial li{
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 8px;
}

.footer ul.footer-scoial li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
}

.footer ul.footer-scoial li a:hover{
    background: var(--ebdaa-secondary);
    color: #fff;
}

.footer ul.fast-links li{
    margin-bottom: 8px;
}

.footer ul.footer-contact li{
    margin-bottom: 10px;
}

.footer ul.footer-contact li i{
    margin-left: 8px;
    color: var(--ebdaa-secondary);
}

.copyright{
    border-top: 1px dotted rgba(255,255,255,.15);
    background: #121826;
    color: #fff;
    text-align: center;
    padding: 14px 0;
    font-size: 13px;
}

.copyright span{
    color: var(--ebdaa-primary);
    font-weight: 700;
}

.copyright i{
    color: var(--ebdaa-secondary);
    font-style: normal;
    font-weight: 700;
}

/* =========================================
   Floating WhatsApp
   ========================================= */
#whatsapp-icon,
.floating-whatsapp{
    position: fixed !important;
    left: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    background: var(--ebdaa-whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.20);
    z-index: 999999 !important;
}

#whatsapp-icon img{
    width: 34px;
    height: 34px;
}

/* =========================================
   Helpers
   ========================================= */
.ebdaa-shadow-sm{ box-shadow: var(--ebdaa-shadow-sm); }
.ebdaa-shadow{ box-shadow: var(--ebdaa-shadow); }
.ebdaa-radius{ border-radius: var(--ebdaa-radius); }
.ebdaa-text-center{ text-align: center; }
.ebdaa-text-right{ text-align: right; }
.ebdaa-bg-light{ background: var(--ebdaa-light); }
.ebdaa-bg-white{ background: var(--ebdaa-white); }

/* =========================================
   Mobile
   ========================================= */
@media (max-width: 991px){
    .section-setting{
        padding: 55px 0;
    }

    .hero-section{
        min-height: 500px;
    }

    .hero-content h1{
        font-size: 34px;
    }

    .section-title .heading,
    .ebdaa-section-title h2{
        font-size: 28px;
    }

    .pricing-box .price{
        font-size: 34px;
    }
}

@media (max-width: 767px){
    .section-setting{
        padding: 45px 0;
    }

    .hero-section{
        min-height: 460px;
        text-align: center;
    }

    .hero-content{
        margin: 0 auto;
        text-align: center;
        padding: 45px 0;
    }

    .hero-content h1{
        font-size: 27px;
        line-height: 1.7;
    }

    .hero-content p{
        font-size: 15px;
    }

    .hero-actions,
    .hero-buttons,
    .hero-features,
    .cta-actions,
    .system-actions{
        justify-content: center;
    }

    .hero-btn,
    .btn-main,
    .btn-second,
    .btn-whatsapp,
    .ebdaa-btn{
        width: 100%;
    }

    .section-title .heading,
    .ebdaa-section-title h2{
        font-size: 24px;
    }

    .section-desc,
    .ebdaa-section-title p,
    .seo-text p,
    .cta-section p{
        font-size: 15px;
    }

    .system-card .content,
    .system-features-box,
    .seo-text,
    .feature-list{
        text-align: right;
    }

    .pricing-box{
        padding: 22px 18px;
    }

    #whatsapp-icon,
    .floating-whatsapp{
        width: 54px;
        height: 54px;
        left: 15px;
        bottom: 15px;
    }

    #whatsapp-icon img{
        width: 30px;
        height: 30px;
    }
}