@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("/figma/fonts/Madani Arabic Regular 400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("/figma/fonts/Madani Arabic Medium 400.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("/figma/fonts/Madani Arabic SemiBold 400.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("/figma/fonts/Madani Arabic Bold 400.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
:root{
    --mainCremyColor:#FCF5DA;
    --mainVioletColor:#391E56;
    --mainWhiteColor:#FFFFFE;
    --mainGrayColor:#E1DDE5;
    --mainYellowColor:#F7E59E;
    --mainBlackColor:black;
    --mainTerquazColor:#61C0C0;
    --mainOrangeColor:#F0B400;
    --mainLightGrayColor:rgb(243, 243, 242);
    --mainDarkGrayColor:#6c757d;
    --shadow:0 25px 60px rgba(0,0,0,.12);
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size: 12px;
}
body{
    font-family:'IBM Plex Sans Arabic',sans-serif;
    background:var(--mainCremyColor);
    direction:rtl;
    scroll-behavior:smooth;
}
/*************navbar***************/
.menu-card i::before ,
.close-btn i::before ,
.footer-menu i::before{
    font-size: 20px;
}
.main-navbar{
    /* position:relative; */
    background:var(--mainCremyColor);
    height:95px;
    /* overflow:hidden; */
}
.container{
    position:relative;
    z-index:2;
}
.navbar-wrapper{
    height:120px;
    display:flex;
    /* align-items:center; */
    justify-content:space-between;
}
.logo img{
    height:85px;
    width: 150px;
}
.btn-subscribe{
    background:var(--mainVioletColor);
    color:var(--mainWhiteColor);
    border-radius:50px;
    padding:10px 28px;
    font-weight:900;
}
.btn-subscribe:hover{
    background:var(--mainVioletColor);
    color:var(--mainWhiteColor);
}
.btn-login{
    background:var(--mainGrayColor);
    color:var(--mainVioletColor);
    border-radius:50px;
    padding:10px 25px;
    font-weight:900;
}
.btn-login:hover{
    background:var(--mainGrayColor);
}
.menu-btn i{
    font-size:28px;
    color:var(--mainYellowColor);
    font-weight: 900;
}
.menu-btn{
    width:72px;
    height:52px;
    background:var(--mainWhiteColor);
    border:2px solid var(--mainYellowColor);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
}
.menu-btn:hover{
    background:var(--mainWhiteColor);
}
.offcanvas.offcanvas-start {
    width: 100%;
}
@media(max-width:768px){
    .logo img{
        height:48px;
    }
    .btn-login{
        display:none;
    }
    .btn-subscribe{
        display:none;
    }
    .main-navbar{
        height:95px;
    }

}
/*************navbar***************/

/*************navbar On Click***************/
a{
    text-decoration:none;
}
.menu-page{
    min-height:100vh;
    padding:35px 0;
    background-color:var(--mainCremyColor);
}
.title{
    font-size:32px;
    font-weight:800;
    color:var(--mainVioletColor);
    margin-bottom:6px;
}
.subtitle{
    color:#7b7b7b;
    font-size:16px;
    font-weight: 600;
}
hr{
    border-color:#ece5d6;
    opacity:1;
}
.close-btn{
    width:46px;
    height:46px;
    border:none;
    background:var(--mainWhiteColor);
    border-radius:14px;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
    color:var(--mainTerquazColor);
    transition:.3s;
}
.close-btn:hover{
    transform:rotate(90deg);
}
.menu-card{
    position:relative;
    display:block;
    background:var(--mainWhiteColor);
    height:170px;
    border-radius:18px;
    border:1px solid var(--mainGrayColor);
    overflow:hidden;
    transition:.35s;
    padding:28px;
}
.menu-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.icon{
    position:absolute;
    top:26px;
    right:20px;
    width:62px;
    height:62px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mainWhiteColor);
    font-size:20px;
    box-shadow:0 12px 25px rgba(0,0,0,.12);
}
.home{
    background:linear-gradient(135deg,#18b7f6,#2389ff);
}
.service{
    background:linear-gradient(135deg,#b337ff,#ff2e8f);
}
.phone{
    background:linear-gradient(135deg,#7858ff,#b043ff);
}
.about{
    background:linear-gradient(135deg,#00d6a0,#00b18c);
}
.package{
    background:linear-gradient(135deg,#ff2c79,#ff4b92);
}
.blog{
    background:linear-gradient(135deg,#4d6fff,#3578ff);
}
.content{
    height:100%;
    display:flex;
    justify-content:space-between;
    margin-top: 80px;
}
.content h4{
    font-size:20px;
    color:var(--mainBlackColor);
    font-weight:700;
    margin-bottom:18px;
}
.content span{
    color:var(--mainOrangeColor);
    font-size:26px;
    transition:.3s;
}
.content .menu-card:hover span{
    transform:translateX(-8px);
}
.footer-menu{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}
.footer-menu .contact{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}
.footer-menu .contact a{
    background:var(--mainLightGrayColor);
    border-radius:50px;
    padding:12px 20px;
    color:var(--mainBlackColor);
    font-weight:700;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
    transition:.3s;
    display: flex;
    align-items: center;
}
.footer-menu .contact a:hover{
    transform:translateY(-3px);
}
.footer-menu .contact i{
    color:var(--mainTerquazColor);
    margin-left:8px;
}
.footer-menu .buttons{
    display:flex;
    gap:15px;
}
.footer-menu .login-btn{
    background:var(--mainGrayColor);
    color:var(--mainVioletColor);
    padding:12px 28px;
    border-radius:40px;
    font-weight:700;
    transition:.3s;
}
.footer-menu .login-btn:hover{
    background:#ded1ff;
}
.footer-menu .register-btn{
    background:var(--mainVioletColor);
    color:var(--mainWhiteColor);
    padding:12px 28px;
    border-radius:40px;
    font-weight:700;
    transition:.3s;
}
.footer-menu .register-btn:hover{
    background:#5a347b;
}
.content .bi::before, .content [class*=" bi-"]::before, .content [class^=bi-]::before {
    font-weight: 900 !important;
    font-size: 20px;
}
.content .offcanvas{
    width:100% !important;
}
.content .offcanvas-body{
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
}
@media (max-width:768px){
    .hero-section .features {
        justify-content: center;
    }
    .hero-section .btn-main , .hero-section .btn-light-custom {
        width: 100%;
    }
    .hero-content .d-flex{
        flex-direction: column;
        align-items: center;
    }
    .offcanvas{
        height:100dvh;
    }
    .offcanvas-body{
        height:100%;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .menu-page{
        min-height:100%;
        height:auto;
    }
    .footer-menu .buttons{
        display: flex;
        justify-content: space-between;
        width: 100%;
        text-align: center;
        flex-direction: column;
    }
    .footer-menu .buttons a{
        width: 50%;
        padding: 15px;
    }
    .footer-menu .contact{
        display: flex;
        justify-content: space-between;
        width: 100%;
        text-align: center;
    }
    .footer-menu .contact a{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
/*************navbar On Click***************/

/*************HOME***************/
img{
    max-width:100%;
}
.hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    /* overflow:hidden; */
    padding:10px 30px;
    /* background:
    radial-gradient(circle at right,#fff6d6 0,#fffaf3 55%,#ffffff 100%); */
}
.hero-section .hero-content{
    position:relative;
    z-index:5;
}
.hero-section .hero-content h1{
    font-size:60px;
    font-weight:900;
    line-height:1.18;
    color:var(--mainVioletColor);
    margin-bottom:15px;
}
.hero-section .yellow-line{
    width:360px;
    margin:18px 0 30px;
}
.hero-section .yellow-line svg{
    width:100%;
    display:block;
}
.hero-section .hero-desc{
    font-size:17px;
    line-height:2;
    color:var(--mainBlackColor);
    max-width:520px;
    margin-bottom:15px;
}
.hero-section .features{
    display:flex;
    gap:70px;
    margin-bottom:15px;
}
.hero-section .feature{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:700;
    color:var(--mainVioletColor);
    margin-bottom:12px;
}
.hero-section .feature i{
    color:var(--mainOrangeColor);
    font-size:20px;
}
.hero-section .hero-buttons{
    display:flex;
    gap:18px;
    margin-bottom:35px;
    flex-wrap:wrap;
}
.hero-section .hero-section .btn{
    border-radius:40px;
    padding: 7px 21px;
    font-size:14px;
    font-weight:700;
    transition:.35s;
}
.hero-section .btn-main{
    background:var(--mainVioletColor);
    color:#fff;
    box-shadow:0 15px 35px rgba(67,34,111,.25);
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
}
.hero-section .btn-main:hover{
    background:#321755;
    color:#fff;
    transform:translateY(-4px);
}
.hero-section .btn-light-custom{
    background:#fff;
    border:2px solid #F2C310;
    color:#B38800;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
}
.hero-section .btn-light-custom:hover{
    background:#F4C313;
    color:#fff;
}
.hero-section .rating-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}
.hero-section .rating-score{
    display:flex;
    align-items:center;
    gap:15px;
}
.hero-section .rating-score strong{
    font-size:15px;
    color:var(--mainVioletColor);
}
.hero-section .stars{
    display:flex;
    gap:3px;
}
.hero-section .stars i{
    font-size:17px;
    color:#F4C313;
}
.hero-section .rating-area span{
    font-size:13px;
    color:var(--mainDarkGrayColor);
}
.hero-section .fw-extrabold {
    font-weight: 800;
}
.bi-chevron-right::before
{
    font-weight: bold !important;
}
/* الكرت الرئيسي */
.main-card {
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 540px;
    border: 1px solid rgba(0,0,0,0.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06),
                0 5px 15px rgba(0, 0, 0, 0.03);
}
/* شارة "نتائج ملموسة" العلوية */
.hero-section .badge-tangible {
    position: absolute;
    top: -10%;
    right: 82%;
    background-color: #ffcc00;
    color: #1e263c;
    padding: 12px 20px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 1.7rem;
    box-shadow: 0 8px 16px rgba(255, 204, 0, 0.3);
    z-index: 10;
    transform: rotate(-10deg);
    width: 110px;
}
.hero-section .fa-heart , .hero-section .fa-award , .hero-section .fa-users{
    font-size: 20px;
    color: white;
}
.hero-section .bg-orange{
    background-color: var(--mainOrangeColor);
}
.hero-section .stat-card h4{
    font-size: 15px;
}
/* أيقونة السهم والنمو الهيدر */
.hero-section .icon-trend {
    background-color: #ffcc00;
    color: #1e263c;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(255, 204, 0, 0.2);
}
.hero-section .badge-growth {
    background-color: #e4fbf2;
    color: #10b981;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 1.05rem;
    margin-right: 20px;
}
/* تخصيص الـ Progress Bars المفتوحة والمتحركة للبيانات */
.hero-section .chart-row {
    height: 42px;
}
.hero-section .month-name {
    width: 60px;
    text-align: right;
    font-size: 0.95rem;
}
.hero-section .progress-track {
    background-color: #f1f3f7;
    height: 100%;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}
.hero-section .progress-fill {
    height: 100%;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 20px;
    transition: width 0.6s ease;
}
.hero-section .progress-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #2b2b2b;
}
/* ألوان التدرج الخاصة بالأعمدة المتطابقة مع الصورة */
.hero-section .fill-purple-light  { background-color: #e8dbff; }
.hero-section .fill-purple-medium { background-color: #d1b3ff; }
.hero-section .fill-purple-dark   { background-color: #b57eff; }
.hero-section .fill-yellow-light  { background-color: #ffe699; }
.hero-section .fill-yellow-medium { background-color: #f2c21e; }
.hero-section .fill-yellow-dark   { background-color: #cc9900; }
/* الكروت الإحصائية الصغيرة بالأسفل */
.hero-section .stat-card {
    background-color: #ffffff;
    border: 1px solid var(--mainGrayColor);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}
.hero-section .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.2rem;
}
/* ألوان كروت الإحصائيات السفلية */
.hero-section .bg-orange-light { background-color: #fff4e6; }
.hero-section .text-orange     { color: #ff922b; }
.hero-section .bg-pink-light   { background-color: #ffe3e3; }
.hero-section .text-pink       { color: #ff3366; }
.hero-section .bg-blue-light   { background-color: #e7f5ff; }
.hero-section .text-blue       { color: #339af0; }
/* شارة "إطلاق خلال 48 ساعة" السفلية الطائرة */
.hero-section .badge-launch {
    width: 170px;
    position: absolute;
    bottom: -58px;
    left: 383px;
    background: var(--mainWhiteColor);
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    z-index: 10;
    transform: rotate(5deg);
}
.hero-section .launch-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.hero-section .launch-time {
    font-size: 1.2rem;
    font-weight: 800;
    color: #2b1a4a;
}
.hero-section .launch-icon {
    background-color: #3d226a;
    color: #ffcc00;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.hero-section .avatar-group-up {
    display: flex;
    flex-direction: row-reverse;
}
.hero-section .avatar-item-up {
    width: 40px;
    height: 40px;
    background-color: var(--mainOrangeColor);
    color: var(--mainWhiteColor);
    border: 3px solid var(--mainWhiteColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: -8px;
}
.hero-section .fa-wand-magic-sparkles , .hero-section .fa-rocket{
    font-size: 20px;
}
/* استعلامات الشاشات الصغيرة لضمان التجاوب الدقيق */
@media (max-width: 768px) {
    .hero-section .main-card {
        margin-left: 15px;
        margin-right: 15px;
        padding: 30px 20px !important;
    }
    .hero-section .badge-tangible {
        right: 78%;
        top: -8%;
        font-size: 0.95rem;
        padding: 8px 15px;
    }
    .hero-section .badge-launch {
        bottom: -42px;
        right: -4px;
        padding: 8px 15px;
    }
    .hero-section .launch-time {
        font-size: 1rem;
    }
    .hero-section .avatar-item-up {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        font-size: 1rem;
    }
    .hero-section .herorow{
        flex-direction: column-reverse;
    }
}
/*************HOME***************/

/*************whys***************/
/* تنسيق السكشن الرئيسي والخلفية الانسيابية المتموجة */
.whys-section {
    min-height: 100vh;
    padding: 80px 0 100px 0;
    position: relative;
    overflow: hidden;
    /* عمل انحناء بسيط يشبه حواف الخلفية في الصورة */
    border-radius: 0 0 40px 60px;
}

/* شارة العنوان (Badge) */
.whys-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* العناوين الرئيسية */
.whys-section .main-heading {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 15px;
}

.whys-section .sub-heading {
    color: var(--mainDarkGrayColor);
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 40px;
}

/* حاوية الكروت */
.whys-section .cards-container {
    margin-top: 20px;
}

/* تنسيق الكرت الفردي */
.whys-section .why-card {
    background-color: #FEFCF5;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: right; /* محاذاة النص لليمين كما في الصورة */
    box-shadow: 2px 5px 11px 2px rgba(0, 0, 0, 0.144);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whys-section .why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

/* تنسيق عام لحاويات الأيقونات */
.whys-section .icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    margin-left: 0;
}

.whys-section .icon-wrapper i {
    font-size: 26px;
    color: var(--mainWhiteColor);
}

/* ألوان الأيقونات المخصصة بناءً على الصورة */
.whys-section .icon-purple {
    background: #9b22fa;
}

.whys-section .icon-amber {
    background: #e69500;
}

.whys-section .icon-blue {
    background: #1b6fff;
}

/* نصوص الكروت */
.whys-section .card-title {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
}

.whys-section .card-text {
    color: var(--mainDarkGrayColor);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
    font-weight: 500;
}

.whys-section .bi::before, .whys-section [class*=" bi-"]::before, .whys-section [class^=bi-]::before
{
    font-size: 25px;
}

/* شاشات الموبايل (Responsive Adjustment) */
@media (max-width: 768px) {
    .whys-section .main-heading {
        font-size: 28px;
    }
    .whys-section .sub-heading {
        font-size: 16px;
        margin-bottom: 40px;
    }
    .whys-section .why-card {
        padding: 30px 20px;
    }
}
/*************whys***************/

/*************Services***************/
.services-section {
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}
/* شارة العنوان العلوي */
.services-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* العناوين الأساسية */
.services-section .main-heading {
    color: #311852;
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 15px;
}
.services-section .sub-heading {
    color: #6c757d;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 50px;
}
/* إعدادات حاوية السلايدر لضمان السحب المريح */
.services-section .servicesSlider {
    padding: 15px 5px 30px 5px !important;
    cursor: grab;
}
.services-section .servicesSlider:active {
    cursor: grabbing;
}
/* تصميم الكرت */
.services-section .service-card {
    background-color: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: right;
    transition: transform 0.3s ease;
}
.services-section .service-card:hover {
    transform: translateY(-5px);
}
/* حاوية الصورة وتأثير التراكب (Overlay) */
.services-section .image-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}
/* صور افتراضية ملونة بتأثير متدرج كالموجود بالصورة */
.services-section .card-img-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
/* إضافة طبقة اللون البنفسجي الشفاف فوق الصور */
.services-section .card-img-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(49, 24, 82, 0.2), rgba(49, 24, 82, 0.85));
}
/* خلفيات افتراضية تحاكي ألوان الصورة (يمكنك استبدالها بـ URL لصورك الحقيقية) */
.services-section .bg-img-1 { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.services-section .bg-img-2 { background-image: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.services-section .bg-img-3 { background-image: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
/* الأيقونة الصفراء المثبتة فوق الكرت */
.services-section .card-badge {
    position: absolute;
    top: 10%;
    left: 85%; /* تماشياً مع الـ RTL تظهر في اليسار العلوي من الصورة داخل الكرت */
    background-color: #ffca00; /* اللون الأصفر الظاهر بالصورة */
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.services-section .card-badge i {
    color: #ffffff;
    font-size: 20px;
}
/* محتوى الكرت السفلي */
.services-section .card-body-content {
    padding: 30px 25px;
    flex-grow: 1;
    height: 250px;
}
.services-section .card-title {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}
.services-section .card-text {
    color: #6c757d;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
}
/* رابط اعرف المزيد السفلي */
.services-section .more-link-container {
    margin-top: 20px;
}
.services-section .more-link {
    color: #00a896; /* اللون الفيروزي للرابط والسهم */
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    transition: gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.services-section .more-link:hover {
    color: #008274;
    gap: 12px; /* تأثير حركة بسيط عند تمرير الماوس */
}
/* الشاشات الصغيرة */
@media (max-width: 768px) {
    .services-section .main-heading { font-size: 26px; }
    .services-section .sub-heading { font-size: 15px; margin-bottom: 35px; }
    .services-section .image-wrapper { height: 180px; }
}
/*************Services***************/

/*************steps***************/
.steps-section{
    min-height: 100vh;
    position:relative;
    padding:120px 0;
    overflow:hidden;
}
.steps-section .section-title{
    margin-bottom:5px;
}
.steps-section .badge-title{
    display:inline-block;
    border:1.5px solid var(--mainOrangeColor);
    color:#43246E;
    padding:8px 22px;
    border-radius:40px;
    font-size:15px;
    font-weight:700;
    background:var(--mainWhiteColor);
}
.steps-section .section-title h2{
    margin:0  0 25px 0;
    color:var(--mainVioletColor);
    font-size:34px;
    font-weight:800;
}
.steps-section .section-title p{
    margin-top:12px;
    color:var(--mainDarkGrayColor);
    font-size:20px;
    font-weight:500;
}
.steps-section .step-wrapper{
    position:relative;
}
.steps-section .step-card{
    background:var(--mainWhiteColor);
    border-radius:28px;
    padding:38px 32px;
    height:300px;
    position:relative;
    text-align:right;
    transition:.35s;
    border:1px solid #EFEFEF;
    box-shadow:
        0 12px 35px rgba(0,0,0,.08);
}
.steps-section .step-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.13);
}
.steps-section .icon-box{
    width:72px;
    height:72px;
    border-radius:18px;
    border:2px solid #E8CCFF;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    margin-bottom:30px;
}
.steps-section .icon-box i{
    color:var(--mainOrangeColor);
    font-size:34px;
}
.steps-section .step-card h4{
    color:#311A58;
    font-size:22px;
    font-weight:800;
    margin-bottom:18px;
}
.steps-section .step-card p{
    color:var(--mainDarkGrayColor);
    font-size:15px;
    line-height:1.9;
}
.steps-section .arrow-shape{
    width:90px;
    height:6px;
    background:#F4D56A;
    position:relative;
}
.steps-section .arrow-shape::after{
    content:"";
    position:absolute;
    left:-1px;
    top:50%;
    transform:translateY(-50%) rotate(45deg);
    width:22px;
    height:22px;
    border-left:6px solid #F4D56A;
    border-bottom:6px solid #F4D56A;
}
.steps-section .arrow-shape span{
    position:absolute;
    width:22px;
    height:3px;
    background:#F4D56A;
    left:20px;
}
.steps-section .arrow-shape span:nth-child(1){
    top:-10px;
    transform:rotate(-25deg);
}
.steps-section .arrow-shape span:nth-child(2){
    top:13px;
    transform:rotate(25deg);
}
.steps-section .row{
    position:relative;
    z-index:5;
}
.steps-section .step-wrapper{
    display:flex;
    justify-content:center;
}
.steps-section .step-card{
    width:100%;
    max-width:360px;
}

@media (max-width:1200px){

    .steps-section .section-title h2{
        font-size:46px;
    }

    .steps-section .step-card{
        min-height:235px;
    }

    .steps-section .step-card h4{
        font-size:28px;
    }

    .steps-section .step-card p{
        font-size:18px;
    }

    .steps-section .arrow-shape{
        width:70px;
    }

}
@media (max-width:992px){

    .steps-section .steps-section{
        padding:90px 0;
    }

    .steps-section .section-title{
        margin-bottom:45px;
    }

    .steps-section .section-title h2{
        font-size:38px;
    }

    .steps-section .section-title p{
        font-size:20px;
    }

    .steps-section .step-card{
        margin-bottom:35px;
        max-width:500px;
    }

    .steps-section .arrow-shape{
        /* display:none; */
        transform: rotate(270deg);
    }

}
@media (max-width:768px){

    .steps-section .steps-section{
        padding:70px 0;
    }

    .steps-section .badge-title{
        font-size:13px;
        padding:7px 18px;
    }

    .steps-section .section-title h2{
        font-size:32px;
        line-height:1.5;
    }

    .steps-section .section-title p{
        font-size:17px;
    }

    .steps-section .step-card{
        padding:30px 25px;
        min-height:auto;
    }

    .steps-section .icon-box{
        width:64px;
        height:64px;
    }

    .steps-section .icon-box i{
        font-size:28px;
    }

    .steps-section .step-card h4{
        font-size:25px;
    }

    .steps-section .step-card p{
        font-size:16px;
        line-height:1.8;
    }

}
@media (max-width:576px){

    .steps-section .steps-section{
        padding:60px 0;
    }

    .steps-section .section-title h2{
        font-size:28px;
    }

    .steps-section .section-title p{
        font-size:15px;
    }

    .steps-section .step-card{
        border-radius:22px;
        padding:25px 20px;
    }

    .steps-section .icon-box{
        width:58px;
        height:58px;
    }

    .steps-section .icon-box i{
        font-size:25px;
    }

}
/*************steps***************/

/*************achievement***************/
.achievement-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:linear-gradient(135deg,#32144f 0%,#48265f 50%,#2b1248 100%);
}
.achievement-section .section-heading{
    margin-bottom:65px;
}
.achievement-section .section-badge{
    display:inline-block;
    padding:8px 22px;
    border-radius:30px;
    color:var(--mainWhiteColor);
    font-size:15px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}
.achievement-section .section-heading h2{
    margin-top:20px;
    color:var(--mainWhiteColor);
    font-size:34px;
    font-weight:900;
}
.achievement-section .section-heading p{
    margin-top:14px;
    color:#c4bfc9;
    font-size:17px;
    font-weight:500;
}
.achievement-section .stats-card{
    position:relative;
    height:170px;
    border-radius:24px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(18px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.35s;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 18px 40px rgba(0,0,0,.18);
}
.achievement-section .stats-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.11);
}
.achievement-section .stats-card h3{
    color:var(--mainOrangeColor);
    font-size:50px;
    font-weight:900;
    margin-bottom:20px;
    line-height:1;
}
.achievement-section .stats-card p{
    color:#F5F5F5;
    font-size:15px;
    font-weight:400;
    margin:0;
}
/*************achievement***************/


/*************pricing***************/

/* الترويسة والعناوين */

.pricing-section{
    min-height: 100vh;
}

.pricing-section .section-title {
    color: var(--mainVioletColor);
    font-weight: 800;
    font-size: 34px;
}

.pricing-section .section-subtitle {
    font-size: 18px;
    color: var(--mainDarkGrayColor) !important;
}

/* الكروت وتأثير الانحناء المائل المخصص بالـ Border Radius */
.pricing-section .pricing-card {
    position: relative;
    width: 100%;
    background: var(--mainWhiteColor);
    border-radius: 40px;
    border: 2px solid var(--mainGrayColor);
    box-shadow: 0 10px 30px rgba(49, 28, 82, 0.04);
    padding: 30px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* الخاصية السحرية لعمل زاوية 90 درجة داخلية من أعلى اليسار */
    clip-path: polygon(
        0% 90px,          /* 1. النقطة التي يبدأ منها الهبوط لأسفل جهة اليسار */
        120px 90px,       /* 2. زاوية الـ 90 درجة الداخلية (سحب لجوه) */
        120px 0%,         /* 3. الصعود لأعلى لعمل الضلع القائم الثاني */
        100% 0%,          /* 4. الزاوية العلوية اليمنى */
        100% 100%,        /* 5. الزاوية السفلية اليمنى */
        0% 100%           /* 6. الزاوية السفلية اليسرى */
    );
}

/* تمييز باقة النمو بالـ Border الأصفر */
.pricing-section .pricing-card.featured {
    border: 2px solid var(--mainOrangeColor);
    box-shadow: 0 15px 35px rgba(234, 179, 8, 0.1);
}

.pricing-section .pricing-card:hover {
    transform: translateY(-5px);
}

/* السهم الأصفر الطائر بجانب الكارت */
.pricing-section .card-arrow {
    position: absolute;
    top: -15px;
    right: 335px;
    width: 35px;
    transform: rotate(220deg); /* تعديل زاوية السهم لتناسب التصميم */
}

/* منطقة السعر والاسم */
.pricing-section .card-header-custom {
    text-align: right;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eef0f2;
}

.pricing-section .card-plan-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mainVioletColor);
    margin-bottom: 15px;
}

.pricing-section .price-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    /* direction: ltr; لعرض السعر والمصطلح بترتيب صحيح من اليسار لليمين رقمياً */
}

.pricing-section .price-start {
    font-size: 0.85rem;
    color: #a0a0a0;
    order: 3;
}

.pricing-section .price-amount {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--mainVioletColor);
    order: 2;
}

.pricing-section .price-currency {
    font-size: 0.85rem;
    color: #a0a0a0;
    order: 1;
}

/* إصلاح الاتجاه عند العرض داخل البيئة العربية */
[dir="rtl"] .pricing-section .price-wrapper {
    flex-direction: row-reverse;
}

/* القائمة والمميزات والسهم الأصفر الصغير */
.pricing-section .card-body-custom {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-top: 25px;
}

.pricing-section .features-list {
    margin-bottom: 20px;
}

.pricing-section .features-list li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a5568;
    text-align: right;
}

/* رسم السهم الأصفر الصغير ">" قبل كل ميزة */
.pricing-section .features-list li::before {
    content: ">";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mainOrangeColor);
    font-weight: bold;
    font-size: 1.1rem;
}

/* الأزرار مخصصة الألوان */
.pricing-section .btn-purple {
    background-color: var(--mainVioletColor);
    color: var(--mainWhiteColor);
    border-radius: 20px;
    font-weight: 700;
    border: none;
}

.pricing-section .btn-purple:hover {
    background-color: #21123a;
    color: var(--mainWhiteColor);
}

.pricing-section .btn-yellow {
    background-color: var(--mainOrangeColor);
    color: var(--mainVioletColor);
    border-radius: 20px;
    font-weight: 700;
    border: none;
}

.pricing-section .btn-yellow:hover {
    background-color: #ca9a06;
    color: #311c52;
}

/* شارة "الأكثر شعبية" */
.pricing-section .popular-badge {
    position: absolute;
    top: 34px;
    right: 122px;
    background-color: var(--mainOrangeColor);
    color: var(--mainVioletColor);
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
}

.pricing-section .footer-note {
    font-size: 15px;
    color: var(--mainDarkGrayColor) !important;
}

.pricing-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* الحاوية الخارجية لضبط الظل وموقع السهم */
.pricing-section .card-shadow-wrapper {
    margin-top: 20px;
    filter: drop-shadow(0 10px 30px rgba(49, 28, 82, 0.04));
}

/* السهم خارج الكارت لتفادي اختفائه */
.pricing-section .card-shadow-wrapper .card-arrow {
    position: absolute;
    top: 25px;
    left: 16px;
    width: 60px;
    z-index: 10;
    transform: rotate(-144deg);
    /* right: 276px; */
    right: 80%;
}

/* تعديل بسيط لعنوان الباقة لتفادي منطقة القص العلوية */
.pricing-section .card-plan-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #311c52;
    margin-bottom: 15px;
    text-align: right;
}

/* شاشات الموبايل */
@media (max-width: 768px) {
    .pricing-section .pricing-card {
        border-radius: 30px;
    }
    .pricing-section .popular-badge {
        right: auto;
        left: 34%;
    }
    .pricing-section .card-plan-title {
        font-size: 2.5rem;
    }
    .pricing-section .price-start {
        font-size: 1.5rem;
    }
    .pricing-section .price-currency {
        font-size: 1.5rem;
    }
    .pricing-section .price-amount {
        font-size: 2.5rem;
    }
    .pricing-section .features-list li {
        font-size: 1.2rem;
    }
    .pricing-section .btn-purple , .pricing-section .btn-yellow {
        font-size: 1.4rem;
    }

}

/*************pricing***************/

/*************Testimonial***************/
/* حاوية القسم الكبرى لمنح الشكل الانسيابي الخلفي */
.testimonial-section {
    padding: 80px 0;
    position: relative;
    border-radius: 60px;
    margin: 40px 20px;
}

/* عنوان شارات العملاء فوق النص الرئيسي */
.testimonial-section .badge-client {
    background-color: var(--mainWhiteColor);
    border: 1px solid #e2dbcd;
    color: var(--primary-purple);
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.testimonial-section .main-title {
    color: var(--mainVioletColor);
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 15px;
}

.testimonial-section .sub-title {
    color: var(--mainDarkGrayColor);
    font-size: 17px;
    line-height: 1.6;
}

/* كارت الـ Slider */
.testimonial-section .testimonial-card {
    background: var(--mainWhiteColor);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    position: relative;
    border: none;
    direction: ltr;
}

.testimonial-section .testimonial-text {
    color: var(--mainBlackColor);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 500;
    direction: rtl;
}

.testimonial-section .client-name {
    color: var(--mainBlackColor);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 2px;
    direction: rtl;
}

.testimonial-section .client-title {
    color: var(--mainTerquazColor);
    font-weight: 500;
    font-size: 0.95rem;
    direction: rtl;
}

.testimonial-section .stars i {
    color: var(--mainOrangeColor);
    font-size: 10px;
    margin: 0 2px;
}

.testimonial-section .client-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

/* علامة الاقتباس الكبيرة المائية الخلفية */
.testimonial-section .quote-icon {
    position: absolute;
    bottom: -70px;
    right: 80%;
    font-size: 15rem;
    color: var(--mainGrayColor);
    font-family: sans-serif;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    font-family: 'Playfair Display', 'Georgia', serif;
}

/* أزرار التنقل يمين ويسار (مخصصة) */
.testimonial-section .carousel-btn-prev, .testimonial-section .carousel-btn-next {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.3s ease;
}

/* الزر الأصفر الأيمن في الصورة */
.testimonial-section .carousel-btn-prev {
    background-color: var(--mainOrangeColor);
    color: var(--mainWhiteColor);
    right: -25px;
}

/* الزر البنفسجي الفاتح الأيسر */
.testimonial-section .carousel-btn-next {
    background-color: #e8e6f7;
    color: #a399df;
    left: -25px;
}

.testimonial-section .carousel-btn-prev:hover, .testimonial-section.carousel-btn-next:hover {
    opacity: 0.9;
}

/* تخصيص نقاط السلايدر بالأسفل */
.testimonial-section .carousel-indicators-custom {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding-left: 0;
    list-style: none;
    gap: 8px;
}

.testimonial-section .carousel-indicators button {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 15px;
    height: 15px;
    padding: 0;
    cursor: pointer;
    background-color: var(--mainGrayColor);
    border: none;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.testimonial-section .carousel-indicators {
    bottom: -45px;
}
.testimonial-section .carousel-indicators button:hover {
    background-color: var(--mainDarkGrayColor);
}

.testimonial-section .fa-chevron-left , .testimonial-section .fa-chevron-right{
    color: white;
    font-size: 20px;
}

/* التنسيق الموحد لكل النقاط غير النشطة */
.testimonial-section .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;        /* عرض الدائرة الصغيرة */
    height: 10px;       /* ارتفاع الدائرة الصغيرة */
    padding: 0;
    cursor: pointer;
    background-color: var(--mainGrayColor); /* اللون الرمادي الفاتح للنقاط غير النشطة */
    border: none;
    border-radius: 50%; /* جعلها دائرية تماماً */
    text-indent: -999px;
    overflow: hidden;
    opacity: 1; /* إلغاء الشفافية الافتراضية لبوتستراب للتحكم الكامل باللون */

    /* أنيميشن سلس جداً أثناء التحول من الدائرة للشكل العريض والعكس */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* التنسيق الخاص بالنقطة النشطة (Active) */
.testimonial-section .carousel-indicators .active {
    background-color: var(--mainTerquazColor); /* اللون التيلي (الأخضر المائي) المطابق للصورة */
    width: 60px;               /* العرض الممتد للنقطة النشطة */
    border-radius: 15px;
    height: 10px;      /* حواف مستديرة بالكامل (Pill Shape) */
}
/* كرت الإحصائيات الصغير السفلي على اليسار */
.testimonial-section .stats-box {
    background: var(--mainWhiteColor);
    border: 1px solid var(--mainYellowColor);
    border-radius: 16px;
    padding: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    margin-top: 10px;
}

.testimonial-section .stats-text h6 {
    color: var(--mainVioletColor);
    font-weight: 800;
    margin-bottom: 5px;
    font-size: 15px;
}
.testimonial-section .stats-text p {
    color: var(--mainDarkGrayColor);
    margin-bottom: 0;
    font-size: 13px;
}

/* الدوائر المتداخلة للجمعيات */
.testimonial-section .avatar-group {
    display: flex;
    flex-direction: row-reverse;
}
.testimonial-section .avatar-item {
    width: 40px;
    height: 40px;
    background-color: var(--mainVioletColor);
    color: var(--mainWhiteColor);
    border: 2px solid var(--mainWhiteColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: -8px;
}

.testimonial-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* شاشات الموبايل */
@media (max-width: 768px) {
    .testimonial-section .stats-box {
        max-width: 100%;
    }


}
/*************Testimonial***************/

/*************faq***************/
.faq-section {
    padding: 60px 0;
}

/* شارة العنوان العليا */
.faq-section .faq-badge {
    background-color: #fff;
    border: 1px solid #e2d9c5;
    color: #2b124c;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}

.faq-section .faq-title {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 15px;
}

.faq-section .faq-subtitle {
    color: var(--mainDarkGrayColor);
    font-size: 17px;
    margin-bottom: 50px;
}

/* تصميم الكارد الخاص بالسؤال */
.faq-section .faq-card {
    background-color: var(--mainWhiteColor);
    border: 1px solid var(--mainGrayColor);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* زر السؤال */
.faq-section .faq-header-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 24px;
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mainVioletColor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
}

.faq-section .faq-ques{
    font-size: 15px;
}
/* عند فتح السؤال يتغير لون النص (مثل السؤال المفتوح الأخضر بالصورة) */
.faq-section .faq-header-btn:not(.collapsed) {
    color: var(--mainTerquazColor);
}

/* تصميم أيقونة الزائد والناقص المخصصة */
.faq-section .faq-icon {
    width: 32px;
    height: 32px;
    background-color: #f1f0f5;
    color: var(--mainDarkGrayColor);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: normal;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 15px; /* مسافة بين الأيقونة والنص في الـ RTL */
}

/* تغيير شكل الأيقونة عند الفتح */
.faq-section .faq-header-btn:not(.collapsed) .faq-icon {
    background-color: var(--mainVioletColor);
    color: var(--mainWhiteColor);
}

.faq-section .faq-header-btn:not(.collapsed) .faq-icon::before {
    content: "−";
}
.faq-section .faq-header-btn.collapsed .faq-icon::before {
    content: "+";
}

/* محتوى الإجابة */
.faq-section .faq-body {
    padding: 5px 24px 24px 24px;
    color: var(--mainDarkGrayColor);
    border-top:1px solid var(--mainYellowColor);
    font-size: 14px;
    line-height: 1.8;
}

.faq-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
/*************faq***************/


/*************cta***************/
/* الحاوية الرئيسية للتدرج اللوني البنفسجي المضيء */
.cta-container {
    /* background: linear-gradient(135deg, #2b124c 0%, #3e1b6b 50%, #200b3b 100%); */
    background: linear-gradient(135deg, #32144f 0%, #48265f 50%, #2b1248 100%);
    padding: 60px 40px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    /* عمل حافة مضيئة خفيفة حول الصندوق الداخلي */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(32, 11, 59, 0.3);
}

/* تأثير إضاءة خلفي خفيف (Glow Effect) لمحاكاة تدرج الصورة */
.cta-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(111, 66, 193, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cta-container .cta-title {
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.cta-container .cta-subtitle {
    color: var(--mainGrayColor);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-container .feature-box-main {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 30px;
    padding: 30px;
    transition: all 0.3s ease;
}
/* صناديق الميزات الأربعة */
.cta-container .feature-box {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.cta-container .feature-box:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cta-container .feature-text {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--mainWhiteColor);
    margin-right: 10px;
}

/* أيقونة الصح الذهبية المستديرة */
.cta-container .feature-icon {
    color: var(--mainOrangeColor);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

/* زر ابدأ حملتك الآن الأصفر */
.cta-container .btn-primary-custom {
    background-color: var(--mainOrangeColor);;
    color: var(--mainVioletColor);
    border: none;
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(247, 195, 37, 0.3);
}

.cta-container .btn-primary-custom:hover {
    background-color: #e0af1f;
    color: #2b124c;
    transform: translateY(-2px);
}

/* زر احجز استشارة مجانية الشفاف */
.cta-container .btn-secondary-custom {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cta-container .btn-secondary-custom:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--mainWhiteColor);
    transform: translateY(-2px);
}

/* النص السفلي الصغير الحماية البنكي */
.cta-container .footer-note {
    color: var(--mainGrayColor) !important;
    font-size: 13px;
    margin-top: 30px;
    font-weight: 400;
}
/*************cta***************/

/*************footer***************/
/* الحاوية الرئيسية للفوتر */
.cta-container .main-footer {
    /* background: linear-gradient(135deg, #32144f 0%, #48265f 50%, #2b1248 100%); */
    color: var(--mainWhiteColor);
    padding: 60px 0 20px 0;
    font-size: 0.95rem;
}

/* العناوين الجانبية (روابط رئيسية، اتصل بنا...) */
.cta-container .footer-heading {
    color: var(--mainOrangeColor); /* اللون الأصفر الذهبي */
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 15px;
    text-align: right;
}

/* لوجو الشركة والوصف */
.cta-container .footer-logo-text {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--mainWhiteColor);
    display: flex;
    align-items: center;
    gap: 5px;
}
.cta-container .footer-logo-text span {
    color: var(--mainOrangeColor);
}
.cta-container .footer-desc {
    color: var(--mainGrayColor);
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.85;
    max-width: 280px;
}

/* قوائم الروابط السريعة */
.cta-container .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
.cta-container .footer-links li {
    margin-bottom: 12px;
}
.cta-container .footer-links a {
    color: var(--mainGrayColor);
    text-decoration: none;
    transition: color 0.3s ease;
}
.cta-container .footer-links a:hover {
    color: #f7c325;
}

/* قسم بيانات الاتصال */
.cta-container .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: var(--mainGrayColor);
}
.cta-container .contact-text {
    direction: ltr; /* للحفاظ على تنسيق أرقام الهواتف والإيميل من اليسار لليمين */
    text-align: right;
    width: 100%;
}
.cta-container .contact-item-geo {
    direction: rtl;
    text-align: right;
}
.cta-container .contact-icon-box {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mainOrangeColor);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px; /* مسافة لـ RTL */
    font-size: 0.95rem;
}

/* أيقونات السوشيال ميديا المربعة الدائرية */
.cta-container .social-box {
    display: flex;
    gap: 10px;
}
.cta-container .social-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mainWhiteColor);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.cta-container .social-icon:hover {
    background-color: #f7c325;
    color: #2b124c;
    border-color: #f7c325;
    transform: translateY(-3px);
}

/* الجزء السفلي للحقوق والسياسات */
.cta-container .footer-bottom {
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mainGrayColor);
    font-size: 0.85rem;
}
.cta-container .footer-bottom a {
    color: var(--mainGrayColor);;
    text-decoration: none;
    transition: color 0.3s ease;
}
.cta-container .footer-bottom a:hover {
    color: var(--mainWhiteColor);
}
.cta-container .policy-links span {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.15);
}

.contact-item i::before ,
.social-icon i::before{
    font-size: 17px;
}

/* شاشات الموبايل */
@media (max-width: 768px) {
    /* زر احجز استشارة مجانية الشفاف */
    .cta-container .btn-secondary-custom ,
    .cta-container .btn-primary-custom {
        width: 100%;
        font-size: 1.3rem;
    }
    .cta-container .footer-desc {
        max-width: 100%;
    }

    .cta-container .footer-bottom {
        flex-direction: column-reverse !important;
    }

}

@media (max-width: 768px) {
    .footer-menu .buttons a {
        display: block;
        width: 100%;
    }
}

/*************footer***************/

/****************************/
/****************************/
/* Contact US Page */
/****************************/
/****************************/

/* Banner */
/* الحاوية الرئيسية للبنر */
.custom-banner {
    background-image: url('images/logo2-removebg-preview.png'); /* ضع مسار صورتك هنا */
    background-size: cover;
    background-position: center;
    border-radius: 24px; /* زوايا دائرية مثل الصورة */
    min-height: 320px;
    width: 100%;
}

/* طبقة الفلتر والتدرج اللوني فوق الصورة لإبراز النص */
.custom-banner .banner-overlay {
    background: linear-gradient(
        90deg,
        rgba(252, 251, 247, 0.95) 0%,
        rgba(252, 251, 247, 0.6) 30%,
        rgba(252, 251, 247, 0.6) 70%,
        rgba(40, 35, 55, 0.2) 100%
    );
    width: 100%;
    min-height: 320px;
}

/* ألوان النصوص */
.custom-banner .main-title {
    color: var(--mainVioletColor); /* اللون البنفسجي الداكن للعنوان */
    font-size: 50px;
}

.custom-banner .text-highlight {
    color: var(--mainOrangeColor); /* اللون الأصفر الخردلي */
    font-size: 50px;
}

.custom-banner .sub-title {
    color: #5c586e !important;
    font-size: 20px;
    line-height: 1.5;
}

/* مميزات أسفل البنر */
.custom-banner .features-wrapper {
    font-size: 0.95rem;
    font-weight: 600;
    color: #5c586e !important;
}

.custom-banner .check-icon {
    color: var(--mainTerquazColor); /* اللون الأخضر لعلامة الصح */
    font-weight: bold;
    font-size: 16px;
}
.custom-banner .feature-item .span{
    font-size: 15px;
}

/* Banner */
/* contact-section */
/* بطاقة النموذج الرئيسية */
.contact-section .main-form-card {
    border-radius: 24px !important;
    background-color: var(--mainWhiteColor);
}
.contact-section
/* تنسيق الحقول الإدخال والقوائم */
.contact-section .form-control,
.contact-section .form-select,
.contact-section .country-code-btn {
    border: 1px solid #eef0f3;
    border-radius: 10px;
    /* padding: 16px 16px; */
    background-color: var(--mainWhiteColor);
    color: var(--mainBlackColor);
    font-size: 0.95rem;
}

.contact-section .form-control:focus,
.contact-section .form-select:focus {
    border-color: var(--mainVioletColor);
    box-shadow: 0 0 0 0.2em rgba(61, 38, 99, 0.1);
    background-color: var(--mainWhiteColor);
}

/* علامة النجمة للمقاطع الإلزامية */
.contact-section .form-label .text-danger {
    margin-right: 4px;
}

.contact-section .main-form-card .form-control{
    font-size: 14px;
    padding: 6px;
}
.contact-section .main-form-card .form-label{
    font-size: 14px;
    padding: 5px;
}

.contact-section .main-form-card .btn-submit{
    display: flex;
    align-items: center;
}

/* تنسيق الأرقام والإيميلات والاتجاهات */
.contact-section .font-num {
    font-size: 1.05rem;
}

/* زر إرسال الرسالة البنفسجي */
.contact-section .btn-submit {
    background-color: var(--mainVioletColor);
    color: var(--mainWhiteColor);
    border: none;
    transition: all 0.3s ease;
}

.contact-section .btn-submit:hover {
    background-color: #24123b;
    color: var(--mainWhiteColor);
    transform: translateY(-2px);
}

.contact-section .spec-icon {
    display: inline-block;
    transform: rotate(180deg); /* تدوير أيقونة الطائرة لتتناسب مع اتجاه الـ RTL */
}

/* بطاقات المعلومات الجانبية */
.contact-section .info-card {
    border-radius: 20px !important;
    background-color: var(--mainLightGrayColor);
    transition: transform 0.3s ease;
    direction: ltr;
    width:80%;
    box-shadow: 0 8px 16px rgba(61, 38, 99, 0.15);
}

.contact-section .info-card:hover {
    transform: translateY(-3px);
}

.contact-section .info-card .text-muted{
    font-size: 13px;
    font-weight: bold;
}
.contact-section .title-dark {
    color: var(--mainVioletColor);
    font-size: 15px;
}

/* حاويات الأيقونات الدائرية الملونة */
.contact-section .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}

/* تخصيص تدرج اللون البنفسجي الخاص ببطاقة "زرنا" */
.contact-section .bg-purple {
    background: linear-gradient(135deg, #b033d9, #791cb5);
}
.contact-section .text-purple {
    color: #8c23cc !important;
}

/* تخصيص الألوان الأخرى لتطابق الصورة */
.contact-section .bg-success { background: linear-gradient(135deg, #00c875, #00a852) !important; }
.contact-section .bg-primary { background: linear-gradient(135deg, #0091ff, #0066cc) !important; }
.contact-section .bg-warning { background: linear-gradient(135deg, #ff9500, #e67e00) !important; }

.contact-section .text-success { color: #00a852 !important; }
.contact-section .text-primary { color: #0066cc !important; }
.contact-section .text-warning { color: #e67e00 !important; }

/* تذييل الصفحة */
.contact-section .footer-text {
    font-size: 1.2rem;
    letter-spacing: 0.3px;
}

/* تحسينات الشاشات الصغيرة */
@media (max-width: 768px) {
    .contactus-section .custom-banner .main-title {
        font-size: 50px;
    }
    .contactus-section .custom-banner .sub-title {
        font-size: 1.2rem;
    }
    .contactus-section .custom-banner .banner-overlay {
        background: rgba(252, 251, 247, 0.9); /* خلفية موحدة خفيفة للشاشات الصغيرة لضمان وضوح النص */
    }
    .contactus-section .feature-item.d-flex.align-items-center {
        width: 100%;
        text-align: center;
    }
    .contact-section .info-card {
        width: 100%;
    }
    button.btn.btn-submit.px-5.py-3.rounded-pill.fw-bold {
        width: 100%;
        font-size: 1.4rem;
    }
}
/* ****************** */
/* ****************** */
/* pricing.html */
/* ****************** */
/* ****************** */

.custom-banner .hero-buttons .btn{
    border-radius:40px;
    padding: 7px 21px;
    font-size:14px;
    font-weight:700;
    transition:.35s;
}

.custom-banner .btn-main{
    background:var(--mainVioletColor);
    color:#fff;
    box-shadow:0 15px 35px rgba(67,34,111,.25);
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
}
.custom-banner .btn-main:hover{
    background:#321755;
    color:#fff;
    transform:translateY(-4px);
}
.custom-banner .btn-light-custom{
    background:#fff;
    border:2px solid #F2C310;
    color:#B38800;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
}
.custom-banner .btn-light-custom:hover{
    background:#F4C313;
    color:#fff;
}

/* مفتاح التبديل العلوي (Toggle Switch) */
.baqa-section .toggle-container {
    background-color: #fff;
    border-radius: 50px;
    padding: 5px;
    display: inline-flex;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
}
.baqa-section .toggle-btn {
    border: none;
    background: transparent;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}
.baqa-section .toggle-btn.active {
    background-color: #3b1c54; /* اللون البنفسجي الداكن */
    color: #fff;
}
.baqa-section .discount-badge {
    position: absolute;
    top: -15px;
    /* right: 171px; */
    right: 70%;
    background-color: #f1c40f;
    color: #3b1c54;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 20px;
    z-index: 1;
    transform: rotate(-11deg);
}

.comparison-section .badge-title {
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
/* العنوان العلوي والشارة */
comparison-section .comparison-badge {
    background-color: var(--mainWhiteColor);
    color: var(--mainVioletColor);
    border: 1px solid var(--mainOrangeColor);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 18px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
}
.comparison-section .comparison-title {
    color: var(--mainVioletColor);
    font-weight: 800;
    font-size: 34px;
}
.comparison-section .comparison-subtitle {
    color: var(--mainDarkGrayColor);
    font-size: 16px;
}

/* حاوية الجدول الرئيسي لعمل الحواف الدائرية */
.comparison-section .table-container-custom {
    background: var(--mainWhiteColor);
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    /* overflow: hidden; */
    padding: 0;
}

/* تخصيص جدول البوتستراب */
.comparison-section .custom-table {
    margin-bottom: 0;
    vertical-align: middle;
}

/* الهيدر البنفسجي الداكن */
.comparison-section .custom-table thead th {
    background-color: var(--mainVioletColor) !important;
    color: var(--mainWhiteColor);
    font-weight: 700;
    font-size: 16px;
    padding: 22px 15px;
    border: none;
    text-align: center;
}
.comparison-section .custom-table thead th:first-child {
    text-align: right;
    padding-right: 30px;
    vertical-align: middle;
}

/* تمييز كلمة "النمو" بالأصفر في الهيدر */
.comparison-section .text-growth-head {
    color: var(--mainOrangeColor) !important;
    display: block;
    font-size: 16px;
}
.comparison-section .text-subhead {
    font-size: 12px;
    font-weight: 400;
    display: block;
    opacity: 0.7;
    margin-top: 2px;
}

/* تنسيق الصفوف والخلايا */
.comparison-section .custom-table tbody tr {
    border-bottom: 1px solid #f8f6f0;
}
.comparison-section .custom-table tbody tr:last-child {
    border-bottom: none;
}
.comparison-section .custom-table tbody td {
    padding: 16px 15px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #4a4a55;
}
/* العمود الأول (المميزات) */
.comparison-section .custom-table tbody td:first-child {
    text-align: right;
    padding-right: 30px;
    font-weight: 700;
    color: var(--mainVioletColor);
    font-size: 15px;
}

/* كبسولات الخلفية الفاتحة داخل الخلايا لقيم الباقات */
.comparison-section .cell-value-block {
    background-color: #fffdf6; /* لون بيج خفيف جداً خلف النصوص */
    border-radius: 8px;
    padding: 8px 12px;
    display: inline-block;
    min-width: 130px;
    max-width: 100%;
    font-size: 15px;
}

/* خلايا الأعمدة الفردية إذا تطلب الأمر تخصيصاً إضافياً */
.comparison-section .col-emp { color: #5a5a66; }
.comparison-section .col-growth { color: #5a5a66; }
.comparison-section .col-start { color: #7a7a85; }

/* أيقونات الرموز: صح وخطأ */
.comparison-section .icon-check {
    color: #2ecc71;
    font-size: 18px;
    font-weight: bold;
}
.comparison-section .icon-times {
    color: #d1d1d6;
    font-size: 16px;
}
/* السيكشن الرئيسي مع تدرج الألوان المتطابق وشكل الـ Clip-path السفلي */
.achievements-section {
    background:linear-gradient(135deg,#32144f 0%,#48265f 50%,#2b1248 100%);
    /* background: radial-gradient(circle at center, #3c2357 0%, #170d28 70%, #10081d 100%); */
    min-height: 100vh;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.section-badge{
    display:inline-block;
    padding:8px 22px;
    border-radius:30px;
    color:var(--mainWhiteColor);
    font-size:15px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.feature-card i::before{
    font-size: 30px;
}
/* الشارة العلوية (إنجازاتنا) */
.achievements-section .badge-custom {
    background-color: rgba(255, 255, 255, 0.08);
    color: #dfc2f4;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

/* العناوين */
.achievements-section .main-title {
    font-size: 34px;
    letter-spacing: -0.5px;
    color: var(--mainWhiteColor);
}

.achievements-section .sub-title {
    max-width: 750px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--mainGrayColor) !important;
}

/* تصميم الكروت الزجاجية الشفافة */
.achievements-section .feature-card {
    background: linear-gradient(135deg, rgb(255 255 255 / 7%) 0%, rgb(255 255 255 / 16%) 100% 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 40px 24px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.achievements-section .feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
}

/* حاوية الأيقونات الصفراء الفاقعة */
.achievements-section .icon-wrapper {
    width: 56px;
    height: 56px;
    background-color: var(--mainOrangeColor); /* اللون الأصفر المتطابق */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0px 4px 15px rgba(241, 196, 15, 0.3);
}

.achievements-section .icon-wrapper i {
    color: var(--mainVioletColor); /* لون الأيقونة داكن ليطابق التصميم */
    font-size: 1.6rem;
}

.achievements-section .card-text-custom {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--mainGrayColor);
    margin: 0;
}

/* زر اشترك معنا الآن (الأصفر) */
.achievements-section .btn-primary-custom {
    background-color: var(--mainOrangeColor);
    color: var(--mainVioletColor) !important;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.achievements-section .btn-primary-custom:hover {
    background-color: #dfb50a;
    box-shadow: 0px 5px 20px rgba(241, 196, 15, 0.4);
}

/* زر استكشف قصص النجاح (الشفاف بحواف) */
.achievements-section .btn-secondary-custom {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--mainWhiteColor) !important;
    font-weight: 600;
    padding: 12px 35px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    backdrop-filter: blur(5px);
}

.achievements-section .btn-secondary-custom:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

/* تعديلات الشاشات الصغيرة والتجاوب */
@media (max-width: 768px) {
    .achievements-section .main-title {
        font-size: 1.8rem;
    }
    .achievements-section .sub-title {
        font-size: 1.2rem;
    }
    .achievements-section .achievements-section {
        padding: 50px 0;
    }
    .achievements-section .btn-primary-custom ,
    .achievements-section .btn-secondary-custom {
        width: 100%;
    }

    .price-section .custom-banner .hero-buttons .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .achievements-section .card-text-custom {
        font-size: 1.3rem;
    }

}


/* ****************** */
/* ****************** */
/* services.html */
/* ****************** */
/* ****************** */
/* قسم الإبداع والإنتاج */
.creative-production-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.custom-banner .avatar-group-up {
    display: flex;
    flex-direction: row-reverse;
}
.custom-banner .avatar-item-up {
    width: 40px;
    height: 40px;
    background-color: var(--mainOrangeColor);
    color: var(--mainWhiteColor);
    border: 3px solid var(--mainWhiteColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: -8px;
}
.custom-banner .rating-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}
.custom-banner .rating-score{
    display:flex;
    align-items:center;
    gap:15px;
}
.custom-banner .rating-score strong{
    font-size:15px;
    color:var(--mainVioletColor);
}
.custom-banner .stars{
    display:flex;
    gap:3px;
}
.custom-banner .stars i{
    font-size:17px;
    color:#F4C313;
}
.custom-banner .rating-area span{
    font-size:13px;
    color:var(--mainDarkGrayColor);
}

/* عنوان القسم الرئيسي والسفلي */
.creative-production-section .main-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--mainVioletColor); /* اللون الكحلي/الباذنجاني الغامق */
}

/* الخط الأصفر الجانبي الصغير بجانب العنوان الرئيسي */
.creative-production-section .main-title::before {
    content: "";
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 5px;
    background-color: var(--mainOrangeColor); /* اللون الأصفر للمؤشر */
    border-radius: 2px;
}

.creative-production-section .sub-title-text {
    font-size: 17px;
    color: var(--mainDarkGrayColor);
    font-weight: 400;
}

/* الكارت المخصص */
.creative-production-section .custom-card {
    background: var(--mainWhiteColor);
    border-radius: 24px; /* حواف دائرية واضحة ومطابقة للصورة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* ظل خفيف جداً */
    border: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.creative-production-section .custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* غلاف الصورة والتدرج */
.creative-production-section .card-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.creative-production-section .card-top-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* التدرج اللوني البنفسجي الممتد فوق الصورة */
.creative-production-section .card-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(53, 35, 91, 0.4) 0%, rgba(53, 35, 91, 0.95) 100%);
}

/* الأيقونات العائمة في الزاوية العليا */
.creative-production-section .floating-icon {
    position: absolute;
    top: 20px;
    left: 300px; /* بما أن الاتجاه RTL، تظهر في اليسار العلوي */
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* ألوان الأيقونات المخصصة */
.creative-production-section .icon-blue { background-color: #2575fc; }
.creative-production-section .icon-orange { background-color: #ff7e40; }
.creative-production-section .icon-pink { background-color: #e83e8c; }

/* محتوى الكارت الباطني */
.creative-production-section .card-body-content {
    padding: 30px 24px;
}

.creative-production-section .card-main-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mainVioletColor);
    margin-bottom: 20px;
}

.creative-production-section .card-sub-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ألوان العناوين الفرعية */
.creative-production-section .text-blue { color: var(--mainTerquazColor); }
.creative-production-section .text-green { color: var(--mainTerquazColor); }
.creative-production-section .text-cyan { color: var(--mainTerquazColor); }

/* القائمة والمؤشرات الصفراء */
.creative-production-section .features-list {
    list-style: none;
    margin: 0;
}

.creative-production-section .features-list li {
    position: relative;
    font-size: 0.92rem;
    color: var(--mainDarkGrayColor);
    line-height: 1.7;
    margin-bottom: 16px;
    padding-right: 22px; /* مسافة لحقن السهم الأصفر */
}

.creative-production-section .features-list li:last-child {
    margin-bottom: 0;
}

/* صناعة السهم الأصفر المستدق المطابق للصورة */
.creative-production-section .features-list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 6px !important;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--mainOrangeColor); /* لون السهم الأصفر */
}


/* شاشات الموبايل */
@media (max-width: 768px) {
    .services-banner .custom-banner .text-highlight ,
    .services-banner .custom-banner .main-title {
        font-size: 50px;
    }
    .services-banner .custom-banner .sub-title{
        font-size: 1.2rem;
    }
    .services-banner .custom-banner .hero-buttons .btn {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }
    .services-banner .rating-div{
        flex-direction: column;
    }

}

/* ****************** */
/* ****************** */
/* WhoWeAre Page */
/* ****************** */
/* ****************** */
/* الحاوية الرئيسية للعنصر */
#ourstory .card-custom {
    border-radius: 24px;
    padding: 40px;
    direction: rtl; /* توجيه العناصر من اليمين إلى اليسار */
}

/* وسم (قصتنا) الصغير */
#ourstory .badge-custom {
    display: inline-block;
    border: 1px solid var(--mainOrangeColor);
    color: var(--mainVioletColor);
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

#ourstory .badge-title ,
#ro2ya .badge-title ,
.principles-section .badge-title ,
.blog-section .badge-title{
    background-color: var(--mainWhiteColor);
    color:var(--mainVioletColor);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid var(--mainOrangeColor);
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

#ro2ya i::before{
    font-size: 25px;
}

/* العنوان الرئيسي */
#ourstory .title-custom {
    color: var(--mainVioletColor); /* اللون البنفسجي الغامق */
    font-weight: 700;
    font-size: 34px;
}

/* النص الوصفي */
#ourstory .description-custom {
    color: var(--mainDarkGrayColor); /* لون رمادي للنص */
    font-size: 17px;
    line-height: 1.8;
}

/* الصندوق البنفسجي */
#ourstory .mission-box {
    background-color: var(--mainVioletColor); /* اللون البنفسجي الداكن للمهمة */
    color: var(--mainWhiteColor);
    border-radius: 16px;
    padding: 30px 25px;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 400;
}

#ourstory .image-wrapper {
    position: relative;
    height: auto !important;
    overflow: hidden;
}

/* تحسينات إضافية للصورة لتبدو مطابقة */
#ourstory .image-wrapper img {
    object-fit: cover;
    display: block;
}

/* تنسيق عام للحاوية */
#ro2ya .font-tajawal {
    font-family: 'Tajawal', sans-serif;
    direction: rtl; /* لضمان التوجيه العربي الصحيح */
}

/* الوسم الصغير العلوي */
#ro2ya .top-label {
    display: inline-block;
    color: var(--mainOrangeColor); /* لون ذهبي داكن */
    /* background-color: #f7e6c4; لون خلفية فاتح */
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

/* العنوان الرئيسي */
#ro2ya .main-heading {
    color: var(--mainVioletColor); /* بنفسجي غامق */
    font-weight: 700;
    font-size: 34px;
}

/* تنسيق مشترك للبطاقات */
#ro2ya .mission-card, .vision-card {
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

/* البطاقة الداكنة (اليسرى) */
#ro2ya .mission-card {
    background-color: var(--mainVioletColor); /* بنفسجي أغمق */
    border: 1px solid var(--mainOrangeColor);
    color: var(--mainWhiteColor);
}

#ro2ya .card-title-dark {
    color: var(--mainWhiteColor);
    font-weight: 700;
    font-size: 15px;
}

#ro2ya .card-text-dark {
    line-height: 1.8;
    font-size: 16px;
}

/* حاوية الأيقونة الداكنة */
#ro2ya .icon-container-dark {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--mainWhiteColor);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#ro2ya .icon-container-dark img {
    max-width: 32px;
    max-height: 32px;
}

/* البطاقة الفاتحة (اليمين) */
#ro2ya .vision-card {
    background-color: var(--mainWhiteColor);
    border: 2px solid var(--mainGrayColor);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

#ro2ya .card-title-white {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 15px;
}

#ro2ya .card-text-white {
    color: var(--mainDarkGrayColor);
    line-height: 1.8;
    font-size: 16px;
}

/* حاوية الأيقونة الفاتحة */
#ro2ya .icon-container-white {
    width: 60px;
    height: 60px;
    background-color: var(--mainVioletColor);
    border: 1px solid #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#ro2ya .icon-container-white img {
    max-width: 32px;
    max-height: 32px;
}

/* الخط الزخرفي السفلي */
#ro2ya .divider {
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 50px;
    height: 2px;
}

#ro2ya .divider-yellow {
    background-color: var(--mainOrangeColor);
}

#ro2ya .bi-bullseye ,#ro2ya .fa-rocket{
    color: var(--mainOrangeColor);
}

/* خلفية القسم العامة البيج الدافئة الفاتحة */
/* الوسم العلوي "قيمنا" */
.principles-section .badge-pill-custom {
    display: inline-block;
    background-color: var(--mainWhiteColor);
    color: var(--mainVioletColor);
    border: 1px solid #e1cc9e;
    padding: 4px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

/* العناوين الرئيسية */
.principles-section .section-title {
    color: var(--mainVioletColor); /* البنفسجي الغامق الهوائي */
    font-weight: 700;
    font-size: 34px;
}

.principles-section .section-subtitle {
    color: var(--mainDarkGrayColor);
    font-size: 16px;
}

/* تصميم كروت المبادئ */
.principles-section .principle-card {
    background-color: var(--mainWhiteColor);
    border: 2px solid var(--mainGrayColor);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(61, 29, 90, 0.02);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.principles-section .principle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(61, 29, 90, 0.06);
}

/* السطر العلوي داخل الكارت (الرقم والأيقونة) */
.principles-section .card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.principle-card i::before{
    font-size: 25px;
}
.principles-section .card-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mainVioletColor);
    background-color: #e1dde566;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* صناديق الأيقونات والباك جراوند الملونة الخاصة بكل كارت */
.principles-section .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--mainWhiteColor);
}

.principles-section .icon-pink { background-color: #ff3366; }
.principles-section .icon-blue { background-color: #00a2ff; }
.principles-section .icon-green { background-color: #00cc66; }
.principles-section .icon-orange { background-color: #ff9900; }

/* نصوص الكارت الداخليه */
.principles-section .card-title {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 1.4rem;
    text-align: right;
}

.principles-section .card-desc {
    color: var(--mainDarkGrayColor);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 0;
    text-align: right;
}

/* الشريط السفلي الذهبي اللامع */
.principles-section .footer-banner-gold {
  background-color: #efc521; /* اللون الأصفر/الذهبي المماثل للصورة */
  color: #3d1d5a;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(242, 203, 63, 0.2);
}



/* الخلفية المتدرجة الداكنة للقسم بالكامل */
.methodology-section {
    /* background: radial-gradient(circle at center, #2e1446 0%, #170724 100%); */
    background:linear-gradient(135deg,#32144f 0%,#48265f 50%,#2b1248 100%);
    /* border-radius: 24px; */
    overflow: hidden;
}

/* الوسم الصغير العلوي */
.methodology-section .badge-methodology {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.08);
    color: #cbb4db;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 18px;
    border-radius: 50px;
    font-size: 13px;
}

/* العناوين والألوان المخصصة */
.methodology-section .main-title {
    font-weight: 700;
    font-size: 34px;
    color: var(--mainWhiteColor);
}

.methodology-section .subtitle {
    color: var(--mainWhiteColor);
    font-size: 17px;
}

.methodology-section .text-gold {
    color: var(--mainOrangeColor) !important;
    font-size: 17px;
}

.methodology-section .text-muted-light {
    color: #b0a6bb;
}

/* تصميم كروت المعادلة (شفافية خلفية بلورية) */
.methodology-section .equation-card {
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgba(255, 255, 255, 0.315);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    height: 100%;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.methodology-section .card-title-gold{
    margin-bottom: 15px;
}

.methodology-section .equation-card:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 203, 63, 0.4);
}

/* تمييز إضافي لكارت الاستدامة الأخير كما بالصورة */
.methodology-section .highlight-border {
    border-color: rgba(255, 255, 255, 0.2);
}

/* حاوية الأيقونة الذهبية الرفيعة داخل الكروت */
.methodology-section .icon-wrapper {
    font-size: 1.6rem;
    background: #5a5137;
    border: 1px solid rgba(242, 203, 63, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.methodology-section .icon-wrapper i {
    font-size: 26px;
    color: var(--mainOrangeColor);
}

.methodology-section.card-title-gold {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    margin-top: 5px;
}

.methodology-section .card-text-muted {
    color: #beb5c7;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0;
    height: 50px;
}

/* علامات الجمع والمساواة بين الكروت */
.methodology-section .plus-sign, .methodology-section .plus-sign-equals {
    color: var(--mainVioletColor);
    font-size: 1.4rem;
    font-weight: 700;
    display: inline-block;
    background: var(--mainOrangeColor);
    width: 28px;
    height: 28px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
}

/* الصندوق النصي الكبير السفلي */
.methodology-section .system-box {

    background: rgb(255 255 255 / 14%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    line-height: 1.8;
}

.methodology-section .system-box p , .methodology-section .system-box p span{
    font-size: 20px;
}
/* تنسيق الأزرار (Buttons) */
.methodology-section .btn-gold-action {
    background-color: #f2cb3f;
    color: #170724;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.methodology-section .btn-gold-action:hover {
    opacity: 0.9;
    color: #170724;
}

.methodology-section .btn-outline-action {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

.methodology-section .btn-outline-action:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.methodology-section .btn-primary-custom {
    background-color: var(--mainOrangeColor);;
    color: var(--mainVioletColor);
    border: none;
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(247, 195, 37, 0.3);
}

.methodology-section .btn-primary-custom:hover {
    background-color: #e0af1f;
    color: #2b124c;
    transform: translateY(-2px);
}

/* زر احجز استشارة مجانية الشفاف */
.methodology-section .btn-secondary-custom {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.methodology-section .btn-secondary-custom:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--mainWhiteColor);
    transform: translateY(-2px);
}

/* شاشات الجوال والتوافقية */
@media (max-width: 767px) {
  .principles-section .section-title { font-size: 2.5rem; }
  .principles-section .principle-card { padding: 20px !important; }
  .principles-section .footer-banner-gold { font-size: 1rem; }

  .who-section .custom-banner .hero-buttons .btn {
    width: 100%;
    margin-bottom: 10px;
}
.methodology-section .btn-primary-custom ,
.methodology-section .btn-secondary-custom {
    width: 100%;
}
}
/* توافق الشاشات الصغيرة لتعديل الحواف المفتوحة بالصورة الأصلية */
@media (max-width: 991px) {
    #ourstory .card-custom {
        padding: 25px;
    }
    #ourstory .title-custom {
        font-size: 1.8rem;
    }
}

/* تعديلات متجاوبة للشاشات الصغيرة */
@media (max-width: 991px) {
    #ro2ya .mission-card, .vision-card {
        padding: 30px !important;
    }
    #ro2ya .main-heading {
        font-size: 2rem;
    }
}
/* التوافقية مع الشاشات المتنوعة */
@media (max-width: 1199px) {
    .methodology-section .equation-card {
        min-height: auto;
    }
    .methodology-section .plus-sign, .methodology-section .plus-sign-equals {
        transform: rotate(90deg); /* تدوير العلامة لتشير للأسفل في الشاشات الصغيرة */
        margin: 10px 0;
    }
}

/* ****************** */
/* ****************** */
/* Blogs Page */
/* ****************** */
/* ****************** */

/* خلفية الصفحة العامة الدافئة والمطابقة للصورة */
.blog-section {
    /* font-family: 'Tajawal', sans-serif; */
    /* background-color: #fbf9f4; */
    direction: rtl;
}

/* تصميم شريط البحث */
.blog-section .search-container {
    position: relative;
    background-color: var(--mainWhiteColor);
    border-radius: 50px;
    padding: 2px;
}

.blog-section .search-input {
    border: none;
    padding: 14px 20px 14px 50px;
    border-radius: 50px;
    font-size: 15px;
    color: var(--mainBlackColor);
    text-align: right;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.blog-section .search-input:focus {
    box-shadow: none;
    background-color: var(--mainWhiteColor);
}

.blog-section .search-icon {
    position: absolute;
    right: 6px;
    top: 25px;
    transform: translateY(-50%);
    color: var(--mainGrayColor);
    font-size: 1rem;
}

.blog-section .bi::before, .blog-section [class*=" bi-"]::before, .blog-section [class^=bi-]::before
{
    font-weight: 900 !important;
    font-size: 12px;
    color: gray;
}
/* تصميم أزرار التصفية / التاجات العلّوية */
.blog-section .btn-tag {
    background-color: var(--mainWhiteColor);
    border: 2px solid #e8e5dd;
    color: var(--mainVioletColor);
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.blog-section .btn-tag:hover {
    background-color: #3d1d5a;
    color: #ffffff;
    border-color: #3d1d5a;
}

/* وسم "المقال المميز" الجانبي */
.blog-section .badge-featured {
    display: inline-block;
    background-color: #ffffff;
    color: #c7a14a;
    border: 1px solid #e8cc84;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
}

/* بطاقة المقال المميز الكبرى */
.blog-section .featured-card {
    border-radius: 40px;
    border: none;
    background-color: #ffffff;
    box-shadow:0 8px 18px rgba(0,0,0,.06);

}

/* تصنيفات المقال الداخلي الأخضر الفاتح */
.blog-section .badge-category {
    background-color: #e2f6ec;
    color: #156a3c;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

/* نصوص المقالة */
.blog-section .article-title {
    color: var(--mainVioletColor);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.4;
}

.blog-section .article-summary {
    color: var(--mainDarkGrayColor);
    font-size: 17px;
    line-height: 1.7;
}

/* بيانات تاريخ ونوع المقال */
.blog-section .article-meta {
    color: var(--mainDarkGrayColor);
    font-size: 16px;
}

.blog-section .bi-arrow-left::before
{
    font-weight: 900 !important;
    font-size: 12px;
    color: white;
}

/* زر اقرأ المقال البنفسجي */
.blog-section .btn-read-more {
    background-color: #4c246f;
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

.blog-section .btn-read-more:hover {
    background-color: #3d1d5a;
    color: #ffffff;
}

/* التحكم الجانبي بالصورة لملء الحاوية تماماً وبشكل متناسق مع الحواف الملتوية */
.blog-section .image-column {
    position: relative;
    min-height: 350px;
}

.blog-section .featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
}

/* التوافق التلقائي للمتصفحات والشاشات اللوحية والجوال */
@media (max-width: 767px) {
    .blog-section .article-title {
        font-size: 1.6rem;
    }
    .blog-section .image-column {
        min-height: 250px;
    }
    .blog-section .featured-img {
        position: relative;
    }
    .blog-section .search-input {
        font-size: 1.1rem;
    }
}

/* التنسيق العام وخلفية القسم البيج الدافئة */
.articles-grid-section {
    direction: rtl;
}

/* تنسيق الكارت بالكامل */
.articles-grid-section .article-card {
    background-color: var(--mainWhiteColor);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.articles-grid-section .article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05) !important;
}

/* غلاف وحاوية الصورة لالتقاط حافة الـ Badge */
.articles-grid-section .card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* نسبة العرض للارتفاع 16:9 الافتراضية */
    overflow: hidden;
}

.articles-grid-section .card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* تصميم الأوسمة (Badges) العائمة فوق الصور */
.articles-grid-section .badge-category {
    position: absolute;
    top: 15px;
    left: 15px; /* يظهر بالجانب الأيسر فوق الصورة بالتطابق مع الهوية المعروضة */
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
}

/* ألوان خلفيات الأوسمة المختلفة طبقاً لنوع المقالة */
.articles-grid-section span.badge-category.bg-blue {
    color: blue;
}
.articles-grid-section .bg-blue {
    background-color: #a2cfff;
}

.articles-grid-section .bg-pink {
  background-color: #e66b99; /* لون وردي للحملات الإعلانية */
}

.articles-grid-section .bg-orange {
  background-color: #e6956b; /* لون برتقالي دافئ لأخبار التكنولوجيا الخيرية */
}

/* نصوص الكارت وتنسيقات العنوان */
.articles-grid-section .card-article-title {
    color: #3d1d5a; /* اللون البنفسجي الموحد للبراند */
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.5;
}

.articles-grid-section .card-article-text {
    color: #72697a;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* الفوتر الداخلي للكارت (الوقت وزر القراءة) */
.articles-grid-section .card-article-footer {
    border-top: 1px solid #f5f2eb;
    padding-top: 15px;
    font-size: 0.9rem;
}

.articles-grid-section .meta-time {
    color: #a097a6;
}

.articles-grid-section .btn-read-link {
    color: var(--mainVioletColor);
    text-decoration: none;
    font-weight: 700;
    display: flex;
    transition: color 0.2s ease;
}

.card-article-footer i::before{
    font-size: 15px;
    margin-right: 10px;
}

.articles-grid-section .btn-read-link:hover {
    color: #4c246f;
}

/* التوافق التلقائي في الشاشات اللوحية والصغيرة */
@media (max-width: 767px) {
    .articles-grid-section .card-article-title {
        font-size: 1.4rem;
    }
    .blog-section .btn-read-more
    {
        width: 100%;
        font-size: 1.5rem;
    }
    .articles-grid-section .badge-category {
        left: 65%;
    }
    .articles-grid-section .card-article-text {
        font-size: 1.1rem;
    }
    .articles-grid-section .btn-read-link,
    .articles-grid-section .meta-time
    {
        font-size: 1.3rem;
    }
    .card-article-footer i::before {
        font-size:1.3rem;
        margin-right: 10px;
        margin-top: 7px;
    }

}



/* تعريف حركة التمدد */
@keyframes expandWidth {
  from {
    width: 0%;
  }
}

/* التنسيق الأساسي لشريط التقدم مع سلاسة التحريك */
.progress-fill {
  transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  /* وضع القيمة الابتدائية صفر لتجهيزها للتحريك بواسطة JS */
  width: 0 !important;
  position: relative;
  overflow: hidden;
}

/* تأثير لمعان ضوئي (Shimmer Effect) لإعطاء لمسة احترافية أثناء التحرك */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* إخفاء النص الداخلي مؤقتاً لحين انتهاء حركة الشريط */
.progress-label {
  opacity: 0;
  transition: opacity 0.4s ease 1s;
}

.animated .progress-label {
  opacity: 1;
}

@keyframes swingAnimation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes pulseAnimation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}


.badge-tangible ,
.badge-launch {
    animation-name: swingAnimation;
    animation-duration: 3.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
}

.btn-main,
.badge-title ,
.section-badge ,
.btn-primary-custom  {
    animation-name: pulseAnimation;
    animation-duration: 1.4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
}


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

/* .card-arrow {
  animation-name: spinAnimation;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
} */


@keyframes flipAnimation {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

.icon-box {
  animation-name: flipAnimation;
  animation-duration: 4.3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}