/*main navigation bar*/
.theme-color-3{--theme-color: #006AA5;--theme-color-rgb: 35, 150, 152}
#main_navigation_bar .circle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* حجم الدائرة */
    height: 40px; /* حجم الدائرة */
    border: 2px solid white; /* إطار الدائرة */
    border-radius: 50%; /* يجعلها دائرة */
    background-color: transparent; /* بدون خلفية افتراضيًا */
    color: white; /* لون الأيقونة */
    text-decoration: none; /* إزالة التسطير */
    transition: all 0.3s ease-in-out; /* تأثير سلس عند التحويل */
}

#main_navigation_bar .circle-link:hover {
    background-color: white; /* تغيير الخلفية عند hover */
    color: #006AA5; /* تغيير لون الأيقونة عند hover */
    border-color: #006AA5; /* تغيير لون الإطار عند hover */
}
.main-btn-navbar
{
    background-color: #006AA5;
    color: white !important;
    padding: 10px 30px !important;
    border-radius: 10px !important;
}
.main-btn-navbar:hover{
    background-color: white !important; /* تغيير الخلفية عند hover */
    color: #006AA5 !important;
    border:2px solid #006AA5 !important;
}
#main_navigation_bar .navbar-nav .nav-item
{
    padding-top: 25px;
}
/* إخفاء السهم الافتراضي اللي بيظهر بعد زر Dropdown */
#main_navigation_bar .dropdown-toggle::after
{
    display: none !important;
}
/* إعدادات القائمة المنسدلة */
#main_navigation_bar .dropdown-menu
{
    position: absolute;
    top: 100% !important;
    /*تخليهاتظهرتحتالزر*/left: 10 !important;
    /*تخليهاتبدأمنجهةاليسار*/z-index: 1000;
    /*إخفاءالقائمةمعتحكمبالأنيميشن*/display: block;
    /*مهمعلشاننتحكمفيالأنيميشن*/opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /*تبدأطالعةلفوقشوية*/transition: all 0.3s ease;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}

/* لما نعمل hover على الزرار، نظهر القائمة مع الأنيميشن */
#main_navigation_bar .dropdown:hover .dropdown-menu
{
    display: block;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);    /* تنزل مكانها الطبيعي */
    top: 100% !important;        /* تأكد إنها تحت الزر */
    left: 0;                     /* أو حسب ما تحبي */
}

/* تأثير hover على عناصر القائمة */

#main_navigation_bar .fa-icon
{
    font-size: 18px;
    border: 1px solid #ececec;
    border-radius: 100%;
    padding: 10px;
    width: calc(35px + 11 * (100vw - 320px) / 1600);
    height: calc(35px + 11 * (100vw - 320px) / 1600);
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: black;
}
#main_navigation_bar .badge-number
{
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #006AA5;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;

}
.product-box-3
{
    background-color: white;
}
html
{
    scroll-padding-top: 200px; /* عدلي الرقم حسب ارتفاع الهيدر */
}
.product-theme-box .content-box a
{
    text-align: center
}
.product-theme-box .content-box .top-content h5
{
    white-space: break-spaces;
}
.product-theme-box .content-box
{
    height: 40px;
}
.our-work-div
{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
/* شاشات الموبايل */
@media (max-width: 576px)
{
    .our-work-div img
    {
        max-width: 20%;
        max-height: 20%;
        object-fit: contain;
    }
}

        /* التابلت */
        @media (max-width: 768px)
        {
            .our-work-div img
            {
                max-width: 20%;
                max-height: 20%;
                object-fit: contain;
            }
        }

        /* اللابتوب الصغير */
        @media (max-width: 992px) {
        .our-work-div img {
                        max-width: 20%;
                        max-height: 20%;
                        object-fit: contain;
                    }
        }

        /* الديسك توب */
        @media (max-width: 1200px) {
            .our-work-div img {
                        max-width: 20%;
                        max-height: 20%;
                        object-fit: contain;
                    }
        }