﻿/*
    ================================
    Start MAIN HEADER Navbar
    ================================
*/

:root {
    --ak-nav-top: 20px;
    --ak-nav-side: 20px;
    --ak-nav-height: 74px;
    --ak-nav-radius: 22px;
    --ak-purple: #5739bb;
    --ak-purple-dark: #432692;
    --ak-nav-bg: rgba(255,255,255,.97);
    --ak-nav-border: rgba(255,255,255,.78);
    --ak-nav-shadow: 0 18px 50px rgba(14,18,32,.11);
}

#header.ak-main-header {
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    box-sizing: border-box;
    background: transparent !important;
    pointer-events: none;
    transition: transform .32s ease,opacity .32s ease,top .32s ease,padding .32s ease;
}

    #header.ak-main-header,
    #header.ak-main-header .ak-nav-shell,
    #header.ak-main-header .box-navigation,
    #header.ak-main-header .box-nav-menu,
    #header.ak-main-header .menu-item {
        overflow: visible !important;
    }

        #header.ak-main-header .ak-nav-shell {
            width: 100%;
            height: var(--ak-nav-height);
            margin: 0 auto;
            padding: 0 22px;
            display: grid;
            grid-template-columns: 220px minmax(0,1fr) 220px;
            grid-template-areas: "logo nav tools";
            align-items: center;
            gap: 18px;
            box-sizing: border-box;
            background: var(--ak-nav-bg);
            border: 1px solid var(--ak-nav-border);
            border-radius: var(--ak-nav-radius);
            box-shadow: var(--ak-nav-shadow);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            pointer-events: auto;
            transition: max-width .32s ease,width .32s ease,height .32s ease,border-radius .32s ease,box-shadow .32s ease,padding .32s ease,background .32s ease;
        }

        #header.ak-main-header .ak-nav-logo {
            grid-area: logo;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

            #header.ak-main-header .ak-nav-logo a {
                display: flex;
                align-items: center;
            }

            #header.ak-main-header .ak-nav-logo img {
                display: block;
                width: auto;
                max-width: 190px;
                max-height: 52px;
                object-fit: contain;
            }

        #header.ak-main-header .ak-nav-center {
            grid-area: nav;
            min-width: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #header.ak-main-header .box-navigation {
            width: 100%;
            height: 100%;
        }

        #header.ak-main-header .box-nav-menu {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        #header.ak-main-header .menu-item {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

        #header.ak-main-header .item-link {
            position: relative;
            min-height: 48px;
            padding: 0 14px !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 13px;
            color: #17151d !important;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            text-decoration: none;
            transition: color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
        }

            #header.ak-main-header .item-link:hover {
                color: var(--ak-purple) !important;
                background: #f4f1fc;
            }

        #header.ak-main-header .menu-item.ak-nav-open > .item-link,
        #header.ak-main-header .menu-item.ak-nav-active > .item-link,
        #header.ak-main-header .menu-item.ak-products-open > .item-link,
        #header.ak-main-header .menu-item.ak-products-locked > .item-link {
            position: relative;
            z-index: 5;
            color: #fff !important;
            background: linear-gradient(135deg,#6548d1 0%,var(--ak-purple) 55%,var(--ak-purple-dark) 100%);
            box-shadow: 0 10px 25px rgba(75,45,165,.25);
        }

            #header.ak-main-header .menu-item.ak-nav-open > .item-link::after,
            #header.ak-main-header .menu-item.ak-nav-active > .item-link::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -10px;
                width: 20px;
                height: 11px;
                background: var(--ak-purple-dark);
                clip-path: polygon(0 0,100% 0,50% 100%);
                transform: translateX(-50%);
                pointer-events: none;
                z-index: 6;
            }
            #header.ak-main-header .menu-item.ak-products-open > .item-link::after,
            #header.ak-main-header .menu-item.ak-products-locked > .item-link::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -10px;
                width: 20px;
                height: 11px;
                background: var(--ak-purple-dark);
                clip-path: polygon(0 0,100% 0,50% 100%);
                transform: translateX(-50%);
                pointer-events: none;
                z-index: 20;
            }
        #header.ak-main-header .item-link .icon-arr-down {
            font-size: 9px;
            transition: transform .2s ease;
        }

        #header.ak-main-header .ak-nav-open > .item-link .icon-arr-down,
        #header.ak-main-header .ak-products-open > .item-link .icon-arr-down,
        #header.ak-main-header .ak-products-locked > .item-link .icon-arr-down {
            transform: rotate(180deg);
        }

        #header.ak-main-header .ak-nav-tools {
            grid-area: tools;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 3px;
            direction: ltr;
        }

        #header.ak-main-header .ak-tool {
            position: relative;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #111;
            font-size: 18px;
            text-decoration: none;
            cursor: pointer;
            transition: background .2s ease,color .2s ease,transform .2s ease;
        }

            #header.ak-main-header .ak-tool:hover {
                color: var(--ak-purple);
                background: #f2effa;
                transform: translateY(-1px);
            }

            #header.ak-main-header .ak-tool svg {
                width: 19px;
                height: 19px;
            }

        #header.ak-main-header .ak-language-btn {
            width: auto;
            min-width: 60px;
            padding: 0 8px;
            gap: 6px;
            flex-basis: auto;
        }

            #header.ak-main-header .ak-language-btn span {
                font-size: 12px;
                font-weight: 800;
            }

        #header.ak-main-header .ak-cart-tool {
            width: auto;
            min-width: 46px;
            padding: 0 8px;
            flex-basis: auto;
            gap: 4px;
            background: #f6f6f8;
        }

        #header.ak-main-header .ak-cart-number {
            font-size: 10px;
            font-weight: 800;
        }

        #header.ak-main-header .ak-count {
            position: absolute;
            top: -4px;
            right: -3px;
            min-width: 16px;
            height: 16px;
            padding: 0 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
            border-radius: 99px;
            background: var(--ak-purple);
            color: #fff;
            font-size: 9px;
            font-weight: 800;
        }

        #header.ak-main-header .ak-language-menu,
        #header.ak-main-header .ak-social-menu {
            margin-top: 14px !important;
            padding: 8px;
            border: 1px solid #ebe8f3;
            border-radius: 15px;
            background: #fff;
            box-shadow: 0 20px 45px rgba(20,18,35,.15);
        }

        #header.ak-main-header .ak-language-menu {
            min-width: 170px;
        }

        #header.ak-main-header .ak-language-option {
            width: 100%;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #1d1c23;
            text-align: start;
        }

            #header.ak-main-header .ak-language-option:hover,
            #header.ak-main-header .ak-language-option.active {
                color: var(--ak-purple);
                background: #f2effc;
            }

            #header.ak-main-header .ak-language-option span {
                width: 28px;
                color: #8c8993;
                font-size: 10px;
                font-weight: 800;
            }

            #header.ak-main-header .ak-language-option strong {
                font-size: 13px;
            }

        #header.ak-main-header .ak-social-menu {
            min-width: 170px;
        }

            #header.ak-main-header .ak-social-menu a {
                padding: 10px 12px;
                display: flex;
                align-items: center;
                gap: 10px;
                border-radius: 10px;
                color: #222;
                font-size: 13px;
                text-decoration: none;
            }

                #header.ak-main-header .ak-social-menu a:hover {
                    color: var(--ak-purple);
                    background: #f2effc;
                }

            #header.ak-main-header .ak-social-menu i {
                width: 22px;
                color: var(--ak-purple);
                font-size: 17px;
                text-align: center;
            }

/*        #header.ak-main-header .nav-pro-dropdown {
            position: absolute;
        }

        #header.ak-main-header .sub-menu:not(.mega-home) {
            top: calc(100% + 12px) !important;
        }*/
        /* =========================================================
   DESKTOP NAVBAR DROPDOWNS
========================================================= */

        #header.ak-main-header .nav-pro-menu {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #header.ak-main-header .has-pro-dropdown {
            position: relative !important;
        }

            /* مساحة بين الرابط والـ Dropdown حتى لا يغلق أثناء تحريك الماوس */
            #header.ak-main-header .has-pro-dropdown::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                height: 20px;
                z-index: 1298;
            }

            /* =========================================================
   DROPDOWN CONTAINER
========================================================= */

            #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown {
                position: absolute !important;
                top: calc(100% + 14px) !important;
                display: block !important;
                width: 460px;
                min-width: 0 !important;
                max-width: calc(100vw - 30px);
                padding: 14px !important;
                margin: 0 !important;
                background: rgba(255,255,255,.99) !important;
                border: 1px solid rgba(87,57,187,.12) !important;
                border-radius: 22px !important;
                box-shadow: 0 28px 65px rgba(39,29,79,.18), 0 10px 25px rgba(0,0,0,.08) !important;
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
                clip-path: none !important;
                transition: opacity .23s ease, visibility .23s ease, transform .23s ease !important;
                z-index: 1300 !important;
            }

            /* Services */
            #header.ak-main-header .has-pro-dropdown > .services-pro-dropdown {
                width: 460px;
            }

            /* Our Network */
            #header.ak-main-header .has-pro-dropdown > .network-pro-dropdown {
                width: 420px;
            }

/* =========================================================
   POSITION - ENGLISH / LTR
========================================================= */

html:not([dir="rtl"]) #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown,
html[dir="ltr"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown,
body[dir="ltr"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(12px) !important;
}

/* =========================================================
   POSITION - ARABIC / RTL
========================================================= */

html[dir="rtl"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown,
body[dir="rtl"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown,
.rtl #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown {
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) translateY(12px) !important;
}

/* =========================================================
   SHOW DROPDOWN - LTR
========================================================= */

html:not([dir="rtl"]) #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
html:not([dir="rtl"]) #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
html:not([dir="rtl"]) #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown,
html[dir="ltr"] #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
html[dir="ltr"] #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
html[dir="ltr"] #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown,
body[dir="ltr"] #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
body[dir="ltr"] #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
body[dir="ltr"] #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================
   SHOW DROPDOWN - RTL
========================================================= */

html[dir="rtl"] #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
html[dir="rtl"] #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
html[dir="rtl"] #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown,
body[dir="rtl"] #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
body[dir="rtl"] #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
body[dir="rtl"] #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown,
.rtl #header.ak-main-header .has-pro-dropdown:hover > .nav-pro-dropdown,
.rtl #header.ak-main-header .has-pro-dropdown:focus-within > .nav-pro-dropdown,
.rtl #header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-pro-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(50%) translateY(0) !important;
}

/* =========================================================
   DROPDOWN TRIANGLE
========================================================= */

#header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-top: 1px solid rgba(87,57,187,.12);
    border-left: 1px solid rgba(87,57,187,.12);
    border-radius: 3px 0 0 0;
    z-index: 0;
}

html:not([dir="rtl"]) #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before,
html[dir="ltr"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before,
body[dir="ltr"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(45deg);
}

html[dir="rtl"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before,
body[dir="rtl"] #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before,
.rtl #header.ak-main-header .has-pro-dropdown > .nav-pro-dropdown::before {
    right: 50%;
    left: auto;
    transform: translateX(50%) rotate(45deg);
}

#header.ak-main-header .nav-pro-dropdown > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   DROPDOWN LIST
========================================================= */

#header.ak-main-header .nav-pro-list {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

    #header.ak-main-header .nav-pro-list > li {
        display: block;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        list-style: none !important;
    }

/* =========================================================
   DROPDOWN LINK
========================================================= */

#header.ak-main-header .nav-pro-link {
    position: relative;
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) 30px;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 68px;
    padding: 9px 12px !important;
    margin: 0 !important;
    color: #302267 !important;
    text-align: start !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

    /* الخط الجانبي */
    #header.ak-main-header .nav-pro-link::before {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: 0;
        width: 3px;
        height: 0;
        background: linear-gradient( 180deg, var(--ak-purple), var(--ak-purple-dark) );
        border-radius: 0 5px 5px 0;
        transform: translateY(-50%);
        transition: height .22s ease;
    }

    /* Hover */
    #header.ak-main-header .nav-pro-link:hover,
    #header.ak-main-header .nav-pro-link:focus,
    #header.ak-main-header .nav-pro-link:focus-visible {
        color: #302267 !important;
        background: linear-gradient( 135deg, rgba(87,57,187,.085), rgba(67,38,146,.045) ) !important;
        border-color: rgba(87,57,187,.13) !important;
        box-shadow: 0 8px 20px rgba(48,34,103,.07);
        transform: translateY(-1px);
        outline: none;
    }

        #header.ak-main-header .nav-pro-link:hover::before,
        #header.ak-main-header .nav-pro-link:focus::before,
        #header.ak-main-header .nav-pro-link:focus-visible::before {
            height: 36px;
        }

/* =========================================================
   ITEM ICON
========================================================= */

#header.ak-main-header .nav-pro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--ak-purple);
    background: linear-gradient( 135deg, rgba(87,57,187,.11), rgba(67,38,146,.06) );
    border: 1px solid rgba(87,57,187,.12);
    border-radius: 13px;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

    #header.ak-main-header .nav-pro-icon svg {
        display: block;
        width: 24px;
        height: 24px;
    }

#header.ak-main-header .nav-pro-link:hover .nav-pro-icon,
#header.ak-main-header .nav-pro-link:focus .nav-pro-icon,
#header.ak-main-header .nav-pro-link:focus-visible .nav-pro-icon {
    color: #fff;
    background: linear-gradient( 135deg, var(--ak-purple), var(--ak-purple-dark) );
    border-color: transparent;
    transform: scale(1.04);
}

/* =========================================================
   ITEM CONTENT
========================================================= */

#header.ak-main-header .nav-pro-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: start;
}

    #header.ak-main-header .nav-pro-content strong {
        display: block;
        margin: 0;
        color: #302267;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        transition: color .22s ease;
    }

    #header.ak-main-header .nav-pro-content small {
        display: block;
        margin: 0;
        color: #797979;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.55;
    }

#header.ak-main-header .nav-pro-link:hover .nav-pro-content strong,
#header.ak-main-header .nav-pro-link:focus .nav-pro-content strong {
    color: var(--ak-purple);
}

/* =========================================================
   ITEM ARROW
========================================================= */

#header.ak-main-header .nav-pro-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #797979;
    background: #fff;
    border: 1px solid rgba(87,57,187,.14);
    border-radius: 50%;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

    #header.ak-main-header .nav-pro-arrow svg {
        display: block;
        width: 15px;
        height: 15px;
    }

#header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
#header.ak-main-header .nav-pro-link:focus .nav-pro-arrow,
#header.ak-main-header .nav-pro-link:focus-visible .nav-pro-arrow {
    color: #fff;
    background: var(--ak-purple-dark);
    border-color: var(--ak-purple-dark);
}

/* Arabic arrow */
html[dir="rtl"] #header.ak-main-header .nav-pro-arrow svg,
body[dir="rtl"] #header.ak-main-header .nav-pro-arrow svg,
.rtl #header.ak-main-header .nav-pro-arrow svg {
    transform: rotate(180deg);
}

html[dir="rtl"] #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
html[dir="rtl"] #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow,
body[dir="rtl"] #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
body[dir="rtl"] #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow,
.rtl #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
.rtl #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow {
    transform: translateX(-2px);
}

/* English arrow */
html:not([dir="rtl"]) #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
html:not([dir="rtl"]) #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow,
html[dir="ltr"] #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
html[dir="ltr"] #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow,
body[dir="ltr"] #header.ak-main-header .nav-pro-link:hover .nav-pro-arrow,
body[dir="ltr"] #header.ak-main-header .nav-pro-link:focus .nav-pro-arrow {
    transform: translateX(2px);
}

/* =========================================================
   MENU TRIGGER
========================================================= */

#header.ak-main-header .nav-menu-trigger .icon-arr-down {
    display: inline-block;
    margin-inline-start: 5px;
    transition: transform .24s ease;
}

#header.ak-main-header .has-pro-dropdown:hover > .nav-menu-trigger .icon-arr-down,
#header.ak-main-header .has-pro-dropdown:focus-within > .nav-menu-trigger .icon-arr-down,
#header.ak-main-header .has-pro-dropdown.ak-nav-open > .nav-menu-trigger .icon-arr-down {
    transform: rotate(180deg);
}

/* =========================================================
   RTL / LTR
========================================================= */

html[dir="rtl"] #header.ak-main-header .nav-pro-dropdown,
body[dir="rtl"] #header.ak-main-header .nav-pro-dropdown,
.rtl #header.ak-main-header .nav-pro-dropdown {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #header.ak-main-header .nav-pro-content,
body[dir="rtl"] #header.ak-main-header .nav-pro-content,
.rtl #header.ak-main-header .nav-pro-content {
    text-align: right;
}

html[dir="ltr"] #header.ak-main-header .nav-pro-dropdown,
body[dir="ltr"] #header.ak-main-header .nav-pro-dropdown {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] #header.ak-main-header .nav-pro-content,
body[dir="ltr"] #header.ak-main-header .nav-pro-content {
    text-align: left;
}

/* =========================================================
   RESPONSIVE DESKTOP
========================================================= */

@media(min-width:1200px) and (max-width:1399.98px) {
    #header.ak-main-header .has-pro-dropdown > .services-pro-dropdown {
        width: 430px;
    }

    #header.ak-main-header .has-pro-dropdown > .network-pro-dropdown {
        width: 390px;
    }

    #header.ak-main-header .nav-pro-dropdown {
        padding: 12px !important;
    }

    #header.ak-main-header .nav-pro-link {
        min-height: 64px;
        padding: 8px 10px !important;
    }

    #header.ak-main-header .nav-pro-icon {
        width: 43px;
        height: 43px;
    }

    #header.ak-main-header .nav-pro-content strong {
        font-size: 14px;
    }

    #header.ak-main-header .nav-pro-content small {
        font-size: 11px;
    }
}

/* الشاشات القصيرة */
@media(min-width:1200px) and (max-height:700px) {
    #header.ak-main-header .nav-pro-list {
        gap: 3px;
    }

    #header.ak-main-header .nav-pro-link {
        min-height: 59px;
        padding-block: 6px !important;
    }

    #header.ak-main-header .nav-pro-icon {
        width: 40px;
        height: 40px;
    }

        #header.ak-main-header .nav-pro-icon svg {
            width: 21px;
            height: 21px;
        }
}
/* =========================================================
   NAVBAR QUICK SEARCH
========================================================= */

#header.ak-main-header .ak-nav-tools {
    position: relative;
}

#header.ak-main-header .ak-search-trigger.is-open {
    color: #fff;
    background: linear-gradient( 135deg, #6548d1 0%, var(--ak-purple) 55%, var(--ak-purple-dark) 100% );
    box-shadow: 0 8px 20px rgba(75,45,165,.22);
}

#header.ak-main-header .ak-nav-search-panel {
    position: absolute;
    top: calc(100% + 18px);
    inset-inline-end: 0;
    width: 540px;
    max-width: calc(100vw - 40px);
    padding: 12px;
    direction: ltr;
    background: rgba(255,255,255,.99);
    border: 1px solid rgba(87,57,187,.13);
    border-radius: 20px;
    box-shadow: 0 28px 65px rgba(39,29,79,.18), 0 10px 25px rgba(0,0,0,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.985);
    transform-origin: top right;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 1600;
}

    #header.ak-main-header .ak-nav-search-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

html[dir="rtl"] #header.ak-main-header .ak-nav-search-panel,
body[dir="rtl"] #header.ak-main-header .ak-nav-search-panel,
.rtl #header.ak-main-header .ak-nav-search-panel {
    direction: rtl;
    transform-origin: top left;
}

html[dir="ltr"] #header.ak-main-header .ak-nav-search-panel,
body[dir="ltr"] #header.ak-main-header .ak-nav-search-panel {
    direction: ltr;
    transform-origin: top right;
}


/* Triangle */

#header.ak-main-header .ak-nav-search-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    inset-inline-end: 56px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-top: 1px solid rgba(87,57,187,.13);
    border-left: 1px solid rgba(87,57,187,.13);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}


/* Header */

#header.ak-main-header .ak-nav-search-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 40px;
    align-items: center;
    gap: 8px;
}


/* Search input */

#header.ak-main-header .ak-quick-search-form {
    min-width: 0;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 14px;
    background: #f7f6fa;
    border: 1px solid #e7e3ef;
    border-radius: 14px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

html[dir="rtl"] #header.ak-main-header .ak-quick-search-form {
    padding: 0 14px 0 8px;
}

#header.ak-main-header .ak-quick-search-form:focus-within {
    background: #fff;
    border-color: rgba(87,57,187,.42);
    box-shadow: 0 0 0 4px rgba(87,57,187,.07);
}

#header.ak-main-header .ak-quick-search-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ak-purple);
    font-size: 17px;
}

#header.ak-main-header .ak-quick-search-form input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 5px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1c1922;
    font-size: 14px;
    font-weight: 500;
    text-align: start;
}

    #header.ak-main-header .ak-quick-search-form input::placeholder {
        color: #99959f;
    }


/* Clear */

#header.ak-main-header .ak-quick-search-clear {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8a8690;
    font-size: 18px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    #header.ak-main-header .ak-quick-search-clear.show {
        display: flex;
    }

    #header.ak-main-header .ak-quick-search-clear:hover {
        color: var(--ak-purple);
        background: #eeeaf8;
    }


/* Close */

#header.ak-main-header .ak-quick-search-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #f5f3f8;
    color: #45414a;
    font-size: 20px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

    #header.ak-main-header .ak-quick-search-close:hover {
        color: #fff;
        background: var(--ak-purple);
        transform: rotate(4deg);
    }


/* BODY */

#header.ak-main-header .ak-quick-search-body {
    max-height: 410px;
    margin-top: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8d2e7 transparent;
}

    #header.ak-main-header .ak-quick-search-body::-webkit-scrollbar {
        width: 5px;
    }

    #header.ak-main-header .ak-quick-search-body::-webkit-scrollbar-thumb {
        background: #d8d2e7;
        border-radius: 99px;
    }


/* Initial / Empty */

#header.ak-main-header .ak-search-initial,
#header.ak-main-header .ak-search-empty {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    text-align: center;
}

#header.ak-main-header .ak-search-initial-icon,
#header.ak-main-header .ak-search-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 14px;
    color: var(--ak-purple);
    background: #f1eef9;
    font-size: 22px;
}

#header.ak-main-header .ak-search-initial strong,
#header.ak-main-header .ak-search-empty strong {
    color: #29252f;
    font-size: 14px;
    font-weight: 750;
}

#header.ak-main-header .ak-search-initial p,
#header.ak-main-header .ak-search-empty p {
    max-width: 320px;
    margin: 5px 0 0;
    color: #89858e;
    font-size: 12px;
    line-height: 1.7;
}


/* Loading */

#header.ak-main-header .ak-search-loading {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #77727d;
    font-size: 12px;
}

    #header.ak-main-header .ak-search-loading[hidden],
    #header.ak-main-header .ak-search-empty[hidden],
    #header.ak-main-header .ak-quick-search-footer[hidden] {
        display: none !important;
    }

#header.ak-main-header .ak-search-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e3deed;
    border-top-color: var(--ak-purple);
    border-radius: 50%;
    animation: akSearchSpin .7s linear infinite;
}

@keyframes akSearchSpin {
    to {
        transform: rotate(360deg);
    }
}


/* RESULTS */

#header.ak-main-header .ak-search-results {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#header.ak-main-header .ak-search-result {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) 30px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #27232d;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    #header.ak-main-header .ak-search-result:hover {
        color: #27232d;
        background: #f7f5fb;
        border-color: rgba(87,57,187,.10);
        transform: translateX(2px);
    }

html[dir="rtl"] #header.ak-main-header .ak-search-result:hover {
    transform: translateX(-2px);
}

#header.ak-main-header .ak-search-result-image {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: #f5f5f7;
}

    #header.ak-main-header .ak-search-result-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        padding: 4px;
    }

#header.ak-main-header .ak-search-result-content {
    min-width: 0;
    text-align: start;
}

    #header.ak-main-header .ak-search-result-content strong {
        display: block;
        overflow: hidden;
        color: #332d3d;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #header.ak-main-header .ak-search-result-content span {
        display: block;
        margin-top: 2px;
        color: #96919b;
        font-size: 10.5px;
    }

#header.ak-main-header .ak-search-result-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e1ec;
    border-radius: 50%;
    color: #77717e;
    background: #fff;
    font-size: 15px;
    transition: .2s ease;
}

#header.ak-main-header .ak-search-result:hover .ak-search-result-arrow {
    color: #fff;
    background: var(--ak-purple);
    border-color: var(--ak-purple);
}

html[dir="rtl"] #header.ak-main-header .ak-search-result-arrow i {
    transform: rotate(180deg);
}


/* Footer */

#header.ak-main-header .ak-quick-search-footer {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eeeaf2;
}

    #header.ak-main-header .ak-quick-search-footer a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border-radius: 11px;
        color: var(--ak-purple);
        background: #f3f0fa;
        font-size: 12.5px;
        font-weight: 750;
        text-decoration: none;
        transition: color .2s ease, background .2s ease;
    }

        #header.ak-main-header .ak-quick-search-footer a:hover {
            color: #fff;
            background: var(--ak-purple);
        }

html[dir="rtl"] #header.ak-main-header .ak-quick-search-footer i {
    transform: rotate(180deg);
}


/* RESPONSIVE */

@media(max-width:1199.98px) {

    #header.ak-main-header .ak-nav-search-panel {
        width: min(520px, calc(100vw - 28px));
        top: calc(100% + 14px);
        border-radius: 18px;
    }

        #header.ak-main-header .ak-nav-search-panel::before {
            inset-inline-end: 70px;
        }
}

@media(max-width:575.98px) {

    #header.ak-main-header .ak-nav-search-panel {
        width: calc(100vw - 28px);
        padding: 10px;
        border-radius: 17px;
    }

    #header.ak-main-header .ak-quick-search-head {
        gap: 6px;
    }

    #header.ak-main-header .ak-quick-search-form {
        height: 46px;
    }

        #header.ak-main-header .ak-quick-search-form input {
            height: 44px;
            font-size: 13px;
        }

    #header.ak-main-header .ak-quick-search-body {
        max-height: min(390px, calc(100vh - 180px));
    }

    #header.ak-main-header .ak-search-result {
        grid-template-columns: 52px minmax(0,1fr) 28px;
        min-height: 66px;
        gap: 10px;
    }

    #header.ak-main-header .ak-search-result-image {
        width: 52px;
        height: 52px;
    }
}
/* =========================================================
   END DESKTOP NAVBAR DROPDOWNS
========================================================= */
/* =========================================================
   PRODUCTS MEGA MENU
========================================================= */
/* Products behaves like the other navbar dropdowns */
#header.ak-main-header .ak-products-menu {
    position: relative !important;
}

    /* نفس الـ bridge الموجود في has-pro-dropdown */
    #header.ak-main-header .ak-products-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 20px;
        z-index: 1298;
    }

    #header.ak-main-header .ak-products-menu > .mega-home::before {
        content: "" !important;
        position: absolute !important;
        top: -8px !important;
        left: var(--ak-products-arrow-left,50%) !important;
        right: auto !important;
        width: 16px !important;
        height: 16px !important;
        background: #fff !important;
        border-top: 1px solid rgba(87,57,187,.12) !important;
        border-left: 1px solid rgba(87,57,187,.12) !important;
        border-radius: 3px 0 0 0 !important;
        transform: translateX(-50%) rotate(45deg) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
  
/* =========================================================
   MEGA MENU CONTAINER
========================================================= */

#header.ak-main-header .menu-item > .mega-menu.mega-home {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: min(1180px,calc(100vw - 48px)) !important;
    max-width: 1180px !important;
    height: auto !important;
    max-height: calc(100vh - 105px);
    margin: 0 !important;
    padding: 18px !important;
    transform: translateX(-50%) !important;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(255,255,255,.99) !important;
    border: 1px solid rgba(87,57,187,.11) !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(24,18,48,.18),0 8px 24px rgba(20,17,40,.07) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity .22s ease,visibility .22s ease !important;
    z-index: 1300 !important;
}
/* Home - Navbar floating */



/* =========================================================
   OPEN
========================================================= */

#header.ak-main-header
.menu-item.ak-products-open > .mega-menu.mega-home,
#header.ak-main-header
.menu-item.ak-products-locked > .mega-menu.mega-home {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================
   SEARCH WRAPPER
========================================================= */

#header.ak-main-header .ak-products-search {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* =========================================================
   SEARCH
========================================================= */

#header.ak-main-header .ak-products-search-form {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) 42px;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 580px;
    min-height: 50px;
    padding-inline-start: 17px;
    padding-inline-end: 6px;
    background: #faf9fc;
    border: 1px solid #e8e5ef;
    border-radius: 15px;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

    #header.ak-main-header .ak-products-search-form:focus-within {
        background: #fff;
        border-color: rgba(87,57,187,.35);
        box-shadow: 0 0 0 4px rgba(87,57,187,.07), 0 8px 22px rgba(50,35,104,.06);
    }

/* Search icon */

#header.ak-main-header .ak-products-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ak-purple);
}

    #header.ak-main-header .ak-products-search-icon svg {
        width: 20px;
        height: 20px;
    }

/* Search input */

#header.ak-main-header .ak-products-search-form input {
    width: 100%;
    height: 48px;
    padding: 0;
    color: #25212d;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 0;
    outline: 0;
}

    #header.ak-main-header
    .ak-products-search-form input::placeholder {
        color: #8c8795;
        font-weight: 400;
    }

/* Search button */

#header.ak-main-header .ak-products-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: linear-gradient( 135deg, #684bdc, var(--ak-purple-dark) );
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(74,37,172,.18);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

    #header.ak-main-header
    .ak-products-search-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(74,37,172,.25);
    }

    #header.ak-main-header
    .ak-products-search-button svg {
        width: 18px;
        height: 18px;
    }

/* RTL search arrow */

html[dir="rtl"]
#header.ak-main-header
.ak-products-search-button svg {
    transform: rotate(180deg);
}

/* =========================================================
   DIVIDER
========================================================= */

#header.ak-main-header .ak-products-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background: #eeecf3;
}

/* =========================================================
   CATEGORY GRID
========================================================= */

#header.ak-main-header .ak-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* =========================================================
   CATEGORY CARD
========================================================= */

#header.ak-main-header .ak-category-card {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) 30px;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    padding: 10px;
    color: #282330;
    text-decoration: none !important;
    text-align: start;
    background: #fff;
    border: 1px solid #ebe8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(36,26,71,.025);
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

    /* Accent */

    #header.ak-main-header
    .ak-category-card::before {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: 0;
        width: 3px;
        height: 0;
        background: linear-gradient( 180deg, var(--ak-purple), var(--ak-purple-dark) );
        border-radius: 0 6px 6px 0;
        transform: translateY(-50%);
        transition: height .22s ease;
    }

    /* Hover */

    #header.ak-main-header
    .ak-category-card:hover,
    #header.ak-main-header
    .ak-category-card:focus {
        color: #282330;
        background: linear-gradient( 135deg, #fff, rgba(87,57,187,.035) );
        border-color: rgba(87,57,187,.22);
        box-shadow: 0 12px 30px rgba(52,35,109,.09);
        transform: translateY(-2px);
        outline: none;
    }

        #header.ak-main-header
        .ak-category-card:hover::before,
        #header.ak-main-header
        .ak-category-card:focus::before {
            height: 44px;
        }

/* =========================================================
   CATEGORY IMAGE
========================================================= */

#header.ak-main-header .ak-category-card-image {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    padding: 0;
    background: #f4f2f8;
    border: 1px solid #ece9f2;
    border-radius: 13px;
    overflow: hidden;
}

    #header.ak-main-header .ak-category-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        transition: transform .28s ease;
    }

#header.ak-main-header
.ak-category-card:hover
.ak-category-card-image img {
    transform: scale(1.05);
}

/* =========================================================
   CATEGORY CONTENT
========================================================= */

#header.ak-main-header .ak-category-card-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    text-align: start;
}

    #header.ak-main-header
    .ak-category-card-content strong {
        display: -webkit-box;
        margin: 0;
        color: #29242f;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        transition: color .22s ease;
    }

    #header.ak-main-header
    .ak-category-card-content small {
        display: block;
        margin: 0;
        color: #928c9b;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.4;
    }

#header.ak-main-header
.ak-category-card:hover
.ak-category-card-content strong {
    color: var(--ak-purple);
}

/* =========================================================
   CATEGORY ARROW
========================================================= */

#header.ak-main-header .ak-category-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #888291;
    background: #f7f6f9;
    border: 1px solid #ebe8ef;
    border-radius: 50%;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

    #header.ak-main-header
    .ak-category-card-arrow svg {
        width: 14px;
        height: 14px;
    }

/* RTL */

html[dir="rtl"]
#header.ak-main-header
.ak-category-card-arrow svg {
    transform: rotate(180deg);
}

#header.ak-main-header
.ak-category-card:hover
.ak-category-card-arrow {
    color: #fff;
    background: var(--ak-purple);
    border-color: var(--ak-purple);
}

/* English movement */

html:not([dir="rtl"])
#header.ak-main-header
.ak-category-card:hover
.ak-category-card-arrow {
    transform: translateX(2px);
}

/* Arabic movement */

html[dir="rtl"]
#header.ak-main-header
.ak-category-card:hover
.ak-category-card-arrow {
    transform: translateX(-2px);
}

/* =========================================================
   LOADING / EMPTY
========================================================= */

#header.ak-main-header .ak-category-loading,
#header.ak-main-header .ak-category-empty {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 25px;
    color: #807987;
    font-size: 13px;
    text-align: center;
    background: #faf9fc;
    border: 1px dashed rgba(87,57,187,.20);
    border-radius: 16px;
}

#header.ak-main-header .ak-category-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(87,57,187,.15);
    border-top-color: var(--ak-purple);
    border-radius: 50%;
    animation: akCategoryLoading .75s linear infinite;
}

@keyframes akCategoryLoading {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RTL / LTR
========================================================= */

html[dir="rtl"]
#header.ak-main-header
.mega-home {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"]
#header.ak-main-header
.mega-home {
    direction: ltr;
    text-align: left;
}

/* =========================================================
   1200 - 1399
========================================================= */

@media(min-width:1200px) and (max-width:1399.98px) {

    #header.ak-main-header
    .menu-item > .mega-menu.mega-home {
        width: min(1050px,calc(100vw - 40px)) !important;
        padding: 18px !important;
    }

    #header.ak-main-header .ak-category-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    #header.ak-main-header .ak-category-card {
        grid-template-columns: 60px minmax(0,1fr) 28px;
        min-height: 78px;
    }

    #header.ak-main-header .ak-category-card-image {
        width: 60px;
        height: 60px;
    }
}

/* =========================================================
   SHORT DESKTOP
========================================================= */

@media(min-width:1200px) and (max-height:750px) {

    #header.ak-main-header
    .menu-item > .mega-menu.mega-home {
        max-height: calc(100vh - 100px);
        padding: 16px !important;
    }

    #header.ak-main-header
    .ak-products-divider {
        margin: 13px 0;
    }

    #header.ak-main-header .ak-category-grid {
        gap: 9px;
    }

    #header.ak-main-header .ak-category-card {
        min-height: 82px;
        padding: 7px;
        grid-template-columns: 62px minmax(0,1fr) 27px;
    }

    #header.ak-main-header
    .ak-category-card-image {
        width: 62px;
        height: 62px;
    }

    #header.ak-main-header
    .ak-category-card-content strong {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE
   Desktop mega menu is disabled because mobile has its
   own offcanvas navigation
========================================================= */

@media(max-width:1199.98px) {

    #header.ak-main-header
    .menu-item > .mega-menu.mega-home {
        display: none !important;
    }
}
/* =========================================================
   FIX PRODUCTS MEGA MENU ARROW
========================================================= */

/* إزالة أي سهم أو شكل موروث من الـ Mega Menu */

/* لو القالب الأساسي يضيف ::after */
#header.ak-main-header .menu-item > .mega-menu.mega-home::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   END PRODUCTS MEGA MENU
========================================================= */
/*        #header.ak-main-header .menu-item > .mega-menu.mega-home {
            position: fixed !important;
            left: 50% !important;
            right: auto !important;
            width: min(1280px,calc(100vw - 60px)) !important;
            max-width: 1280px !important;
            height: auto !important;
            max-height: calc(100vh - 115px);
            margin: 0 !important;
            padding: 24px !important;
            transform: translateX(-50%) !important;
            overflow-x: hidden;
            overflow-y: auto;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            border: 1px solid #ebe9f2;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 24px 70px rgba(15,17,30,.17);
            transition: opacity .18s ease,visibility .18s ease;
            z-index: 1300;
        }

            #header.ak-main-header .menu-item > .mega-menu.mega-home::before {
                content: "";
                position: absolute;
                left: 0;
                top: -32px;
                width: 100%;
                height: 34px;
                background: transparent;
                pointer-events: auto;
            }

        #header.ak-main-header .menu-item.ak-products-open > .mega-menu.mega-home,
        #header.ak-main-header .menu-item.ak-products-locked > .mega-menu.mega-home {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        #header.ak-main-header .mega-home .box-search {
            width: 100%;
            max-width: 640px;
            margin: 0 auto 20px;
        }

        #header.ak-main-header .mega-home .form-search {
            width: 100%;
        }

        #header.ak-main-header .mega-home .row-demo {
            width: 100%;
        }*/

        /* HOME TOP */
        #header.ak-main-header.ak-header-home,
        #header.ak-main-header.ak-header-home.ak-nav-home-top {
            position: absolute !important;
            top: var(--ak-nav-top) !important;
            left: 0;
            right: 0;
            padding: 0 var(--ak-nav-side) !important;
        }

            #header.ak-main-header.ak-header-home .ak-nav-shell,
            #header.ak-main-header.ak-header-home.ak-nav-home-top .ak-nav-shell {
                width: 100%;
                max-width: 1580px;
                margin: 0 auto;
                border-radius: var(--ak-nav-radius) !important;
                box-shadow: var(--ak-nav-shadow);
            }

            /* HOME FLOATING INSIDE HERO */
            #header.ak-main-header.ak-header-home.ak-nav-floating-fixed {
                position: fixed !important;
                top: var(--ak-nav-top) !important;
                left: 0;
                right: 0;
                padding: 0 var(--ak-nav-side) !important;
            }

                #header.ak-main-header.ak-header-home.ak-nav-floating-fixed .ak-nav-shell {
                    width: 100%;
                    max-width: 1580px !important;
                    margin: 0 auto;
                    border-radius: var(--ak-nav-radius) !important;
                    border: 1px solid rgba(255,255,255,.78);
                    box-shadow: var(--ak-nav-shadow);
                }

            /* HOME AFTER HERO */
            #header.ak-main-header.ak-header-home.ak-nav-past-hero {
                position: fixed !important;
                top: 0 !important;
                left: 0;
                right: 0;
                padding: 0 !important;
            }

                #header.ak-main-header.ak-header-home.ak-nav-past-hero .ak-nav-shell {
                    width: 100%;
                    max-width: none !important;
                    height: 68px;
                    margin: 0;
                    border-radius: 0 !important;
                    border-top: 0;
                    border-left: 0;
                    border-right: 0;
                    background: rgba(255,255,255,.98);
                    box-shadow: 0 5px 22px rgba(15,18,30,.08);
                }

                #header.ak-main-header.ak-header-home.ak-nav-past-hero .ak-nav-logo img {
                    max-height: 46px;
                }

        #header.ak-main-header.ak-nav-hidden {
            opacity: 0;
            transform: translateY(-120%);
            pointer-events: none;
        }

        #header.ak-main-header.ak-nav-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* INNER PAGES */
        #header.ak-main-header.ak-header-inner {
            position: sticky !important;
            position: -webkit-sticky !important;
            top: 0 !important;
            left: 0;
            right: 0;
            width: 100%;
            padding: 0 !important;
            background: #fff !important;
            pointer-events: auto;
        }

            #header.ak-main-header.ak-header-inner .ak-nav-shell {
                width: 100%;
                max-width: none;
                height: 82px;
                margin: 0;
                padding: 0 20px;
                border: 0;
                border-radius: 0;
                background: #fff;
                box-shadow: 0 1px 0 rgba(17,17,17,.07);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            #header.ak-main-header.ak-header-inner .ak-nav-logo img {
                max-height: 54px;
            }

            #header.ak-main-header.ak-header-inner.ak-nav-hidden {
                opacity: 0;
                transform: translateY(-100%);
                pointer-events: none;
            }

            #header.ak-main-header.ak-header-inner.ak-nav-visible {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }

.ak-mobile-menu {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f2effa;
    color: var(--ak-purple);
    text-decoration: none;
    transition: background .2s ease,color .2s ease;
}

    .ak-mobile-menu:hover {
        color: #fff;
        background: var(--ak-purple);
    }

@media(max-width:1450px) {
    #header.ak-main-header .ak-nav-shell {
        grid-template-columns: 195px minmax(0,1fr) 205px;
    }

    #header.ak-main-header .ak-nav-logo img {
        max-width: 170px;
    }

    #header.ak-main-header .item-link {
        padding-inline: 10px !important;
        font-size: 13px;
    }

    #header.ak-main-header .ak-tool {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }
}

@media(max-width:1199.98px) {

    :root {
        --ak-nav-top: 10px;
        --ak-nav-side: 8px;
        --ak-nav-height: 64px;
        --ak-nav-radius: 18px;
    }

    #header.ak-main-header .ak-nav-center {
        display: none !important;
    }

    #header.ak-main-header .mega-home {
        display: none !important;
    }

    #header.ak-main-header .ak-nav-shell {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left logo right";
        align-items: center;
        height: var(--ak-nav-height);
        padding: 0 14px;
        gap: 8px;
    }

    #header.ak-main-header .ak-nav-logo {
        grid-area: logo;
        display: flex;
        align-items: center;
        justify-content: center !important;
        min-width: 0;
        z-index: 2;
    }

        #header.ak-main-header .ak-nav-logo a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #header.ak-main-header .ak-nav-logo img {
            width: auto;
            max-width: 150px;
            max-height: 44px;
            object-fit: contain;
        }

    #header.ak-main-header .ak-nav-tools {
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
    }

    /* =====================================================
       ENGLISH / LTR
       MENU LEFT
       TOOLS RIGHT
    ===================================================== */

    html[dir="ltr"] #header.ak-main-header .ak-nav-tools {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        direction: ltr;
        pointer-events: none;
    }

        html[dir="ltr"] #header.ak-main-header .ak-nav-tools > * {
            pointer-events: auto;
        }

    html[dir="ltr"] #header.ak-main-header .ak-mobile-menu {
        order: -100;
        margin-right: auto;
    }

    html[dir="ltr"] #header.ak-main-header .ak-nav-tools .ak-tool:not(.ak-mobile-menu),
    html[dir="ltr"] #header.ak-main-header .ak-cart-tool {
        order: 10;
    }

    html[dir="ltr"] #header.ak-main-header .ak-language-btn,
    html[dir="ltr"] #header.ak-main-header .ak-social-btn {
        display: none !important;
    }

    html[dir="ltr"] #header.ak-main-header .ak-nav-tools {
        justify-content: flex-start;
    }

    html[dir="ltr"] #header.ak-main-header .ak-mobile-menu {
        margin-inline-end: auto;
    }

    html[dir="ltr"] #header.ak-main-header .ak-tool-search {
        margin-inline-start: auto;
    }

    /* =====================================================
       ARABIC / RTL
       MENU RIGHT
       TOOLS LEFT
    ===================================================== */

    html[dir="rtl"] #header.ak-main-header .ak-nav-tools {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        direction: ltr;
        pointer-events: none;
    }

        html[dir="rtl"] #header.ak-main-header .ak-nav-tools > * {
            pointer-events: auto;
        }

    html[dir="rtl"] #header.ak-main-header .ak-mobile-menu {
        order: 100;
        margin-left: auto;
    }

    html[dir="rtl"] #header.ak-main-header .ak-nav-tools .ak-tool:not(.ak-mobile-menu),
    html[dir="rtl"] #header.ak-main-header .ak-cart-tool {
        order: 1;
    }

    html[dir="rtl"] #header.ak-main-header .ak-language-btn,
    html[dir="rtl"] #header.ak-main-header .ak-social-btn {
        display: none !important;
    }

    html[dir="rtl"] #header.ak-main-header .ak-mobile-menu i {
        display: inline-block;
        transform: scaleX(-1);
    }

    html[dir="ltr"] #header.ak-main-header .ak-mobile-menu i {
        transform: none;
    }

    /* =====================================================
       MOBILE BUTTONS
    ===================================================== */

    #header.ak-main-header .ak-tool,
    #header.ak-main-header .ak-mobile-menu {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    #header.ak-main-header .ak-mobile-menu {
        background: #f2effa;
        color: var(--ak-purple);
    }

        #header.ak-main-header .ak-mobile-menu:hover {
            color: #fff;
            background: var(--ak-purple);
        }

    #header.ak-main-header .ak-cart-tool {
        min-width: 40px;
        padding-inline: 5px;
    }

    #header.ak-main-header .ak-tool i,
    #header.ak-main-header .ak-mobile-menu i {
        font-size: 19px;
        line-height: 1;
    }

    #header.ak-main-header .ak-count {
        top: -3px;
        right: -2px;
        min-width: 14px;
        height: 14px;
        padding: 0 2px;
        font-size: 8px;
    }

    /* =====================================================
       HOME FLOATING
    ===================================================== */

    #header.ak-main-header.ak-header-home.ak-nav-floating-fixed {
        top: var(--ak-nav-top) !important;
        padding: 0 var(--ak-nav-side) !important;
    }

        #header.ak-main-header.ak-header-home.ak-nav-floating-fixed .ak-nav-shell {
            border-radius: var(--ak-nav-radius) !important;
        }

    #header.ak-main-header.ak-header-home.ak-nav-past-hero {
        top: 0 !important;
        padding: 0 !important;
    }

        #header.ak-main-header.ak-header-home.ak-nav-past-hero .ak-nav-shell {
            width: 100%;
            max-width: none;
            height: 60px;
            border-radius: 0 !important;
        }

    /* =====================================================
       INNER PAGES
    ===================================================== */

    #header.ak-main-header.ak-header-inner .ak-nav-shell {
        height: 64px;
        border-radius: 0;
        padding: 0 12px;
    }

    #header.ak-main-header.ak-header-inner .ak-nav-logo img {
        max-height: 42px;
    }
}
@media(max-width:575.98px) {

    :root {
        --ak-nav-top: 8px;
        --ak-nav-side: 6px;
        --ak-nav-height: 60px;
    }

    #header.ak-main-header .ak-nav-shell {
        height: var(--ak-nav-height);
        padding: 0 10px;
        gap: 4px;
    }

    #header.ak-main-header .ak-nav-logo img {
        max-width: 125px;
        max-height: 38px;
    }

    #header.ak-main-header .ak-tool,
    #header.ak-main-header .ak-mobile-menu {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    #header.ak-main-header .ak-cart-tool {
        min-width: 38px;
        padding-inline: 4px;
    }

    #header.ak-main-header .ak-tool i,
    #header.ak-main-header .ak-mobile-menu i {
        font-size: 18px;
    }

    #header.ak-main-header.ak-header-inner .ak-nav-shell {
        height: 58px;
    }
}

/*  =====================================
    End MAIN HEADER Navbar 
    =====================================
*/
/*  =====================================
    Start HERO Section
    =====================================
*/

:root {
    --ak-hero-height: 640px;
    --ak-hero-content-width: 650px;
    --ak-hero-title-size: 40px;
    --ak-hero-description-size: 15px;
    --ak-purple: #5b3ec8;
    --ak-purple-light: #ae9cff;
}
/* =========================================================
   HERO
========================================================= */

.ak-hero {
    position: relative;
    width: 100%;
    height: var(--ak-hero-height);
    min-height: var(--ak-hero-height);
    overflow: hidden;
    background: #111522;
}

.ak-hero-swiper,
.ak-hero-swiper .swiper-wrapper,
.ak-hero-slide {
    width: 100%;
    height: 100%;
}

.ak-hero-slide {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   IMAGE
========================================================= */

.ak-hero-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ak-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
}

/* =========================================================
   OVERLAY
========================================================= */

.ak-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 90deg, rgba(8,12,23,.80) 0%, rgba(10,14,26,.67) 25%, rgba(10,14,26,.38) 48%, rgba(10,14,26,.14) 72%, rgba(10,14,26,.05) 100% );
}

html[dir="rtl"] .ak-hero-overlay {
    background: linear-gradient( 90deg, rgba(8,12,23,.80) 0%, rgba(10,14,26,.67) 25%, rgba(10,14,26,.38) 48%, rgba(10,14,26,.14) 72%, rgba(10,14,26,.05) 100% );
}

/* =========================================================
   CONTENT CONTAINER
========================================================= */

.ak-hero-container {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
}

.ak-hero-content {
    width: var(--ak-hero-content-width);
    max-width: 52vw;
    margin-right: auto;
    margin-left: 0;
    padding-top: 20px;
    padding-bottom: 105px;
    text-align: left;
}

html[dir="rtl"] .ak-hero-content {
    margin-right: auto;
    margin-left: 0;
    text-align: right;
    direction: rtl;
}

/* =========================================================
   EYEBROW
========================================================= */

.ak-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

    .ak-hero-eyebrow::before {
        content: "";
        width: 38px;
        height: 2px;
        flex: 0 0 38px;
        background: #755ce2;
    }

html[dir="rtl"] .ak-hero-eyebrow {
    letter-spacing: 0;
}

/* =========================================================
   TITLE
========================================================= */
.ak-hero-title {
    margin: 0;
    width: 100%;
    max-width: 650px;
    color: #fff;
    font-size: var(--ak-hero-title-size);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.5px;
}

    .ak-hero-title span {
        display: block;
        margin-top: 10px;
        color: var(--ak-purple-light);
    }
/* =========================================================
   DESCRIPTION
========================================================= */
.ak-hero-description {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.88);
    font-size: var(--ak-hero-description-size);
    line-height: 1.75;
}

/* =========================================================
   ACTIONS
========================================================= */

.ak-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.ak-hero-btn {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.ak-hero-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#684bdc,#4b27b4);
    box-shadow: 0 9px 22px rgba(74,37,172,.22);
}

    .ak-hero-btn-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(74,37,172,.30);
    }

.ak-hero-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.60);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    .ak-hero-btn-outline:hover {
        color: #fff;
        background: rgba(255,255,255,.10);
    }

.ak-play-icon {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 50%;
    font-size: 8px;
}

/* =========================================================
   FEATURES
========================================================= */

.ak-hero-features {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 24px;
    width: min(820px,62vw);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.ak-feature {
    min-width: 0;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #fff;
    border-inline-end: 1px solid rgba(255,255,255,.22);
}

    .ak-feature:last-child {
        border-inline-end: 0;
    }

    .ak-feature > i {
        flex: 0 0 auto;
        color: #fff;
        font-size: 23px;
    }

    .ak-feature span {
        min-width: 0;
    }

    .ak-feature strong,
    .ak-feature small {
        display: block;
    }

    .ak-feature strong {
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
    }

    .ak-feature small {
        margin-top: 2px;
        color: rgba(255,255,255,.66);
        font-size: 9px;
    }

/* =========================================================
   PAGINATION
========================================================= */

.ak-hero-pagination {
    position: absolute;
    z-index: 7;
    left: 30px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

html[dir="rtl"] .ak-hero-pagination {
    left: 30px;
    right: auto;
}

.ak-hero-pagination button {
    position: relative;
    /* مساحة لمس 24×24 على الأقل (Lighthouse target-size) */
    min-width: 24px;
    min-height: 24px;
    padding: 0 0 8px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .ak-hero-pagination button.active {
        color: #fff;
    }

        .ak-hero-pagination button.active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 28px;
            height: 3px;
            border-radius: 999px;
            background: #8c74ff;
        }

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.ak-hero-scroll {
    position: absolute;
    z-index: 7;
    right: 21px;
    bottom: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #fff;
}

html[dir="rtl"] .ak-hero-scroll {
    right: 21px;
    left: auto;
}

.ak-hero-scroll > span:first-child {
    writing-mode: vertical-rl;
    font-size: 8px;
    letter-spacing: 1px;
}

.ak-scroll-line {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.42);
}

.ak-scroll-mouse {
    width: 19px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 12px;
}

/* =========================================================
   ANIMATION
========================================================= */

.ak-hero-slide.swiper-slide-active .ak-hero-eyebrow,
.ak-hero-slide.swiper-slide-active .ak-hero-title,
.ak-hero-slide.swiper-slide-active .ak-hero-description,
.ak-hero-slide.swiper-slide-active .ak-hero-actions {
    animation: akHeroEnter .65s ease both;
}

.ak-hero-slide.swiper-slide-active .ak-hero-title {
    animation-delay: .05s;
}

.ak-hero-slide.swiper-slide-active .ak-hero-description {
    animation-delay: .10s;
}

.ak-hero-slide.swiper-slide-active .ak-hero-actions {
    animation-delay: .15s;
}

@keyframes akHeroEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(max-width:1399.98px) {
    :root {
        --ak-hero-height: 620px;
        --ak-hero-content-width: 480px;
        --ak-hero-title-size: 30px;
    }

    .ak-hero-content {
        max-width: 43vw;
    }

    .ak-hero-features {
        width: min(913px,67vw);
    }
}

/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media(max-width:1199.98px) {
    :root {
        --ak-hero-height: 590px;
        --ak-hero-content-width: 455px;
        --ak-hero-title-size: 35px;
    }

    .ak-hero-content {
        max-width: 52vw;
        padding-bottom: 110px;
    }

    .ak-hero-features {
        width: 72vw;
    }

    .ak-hero-scroll {
        display: none;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
    :root {
        --ak-hero-height: 610px;
        --ak-hero-title-size: 30px;
    }

    .ak-hero-content {
        max-width: 62vw;
    }

    .ak-hero-features {
        width: calc(100% - 50px);
    }

    .ak-feature {
        padding: 0 9px;
        gap: 8px;
    }

        .ak-feature > i {
            font-size: 20px;
        }

        .ak-feature strong {
            font-size: 10px;
        }

        .ak-feature small {
            font-size: 8px;
        }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
    :root {
        --ak-hero-height: 620px;
        --ak-hero-title-size:28px;
    }

    .ak-hero {
        height: var(--ak-hero-height);
        min-height: var(--ak-hero-height);
    }

    .ak-hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: none;
    }

    .ak-hero-overlay {
        background: linear-gradient( 180deg, rgba(7,11,22,.32) 0%, rgba(7,11,22,.45) 27%, rgba(7,11,22,.68) 58%, rgba(7,11,22,.88) 100% );
    }

    html[dir="rtl"] .ak-hero-overlay {
        background: linear-gradient( 180deg, rgba(7,11,22,.32) 0%, rgba(7,11,22,.45) 27%, rgba(7,11,22,.68) 58%, rgba(7,11,22,.88) 100% );
    }

    .ak-hero-container {
        width: 100%;
        max-width: none;
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        align-items: flex-start;
    }

    .ak-hero-content,
    html[dir="rtl"] .ak-hero-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-top: 110px;
        padding-bottom: 65px;
    }

    .ak-hero-eyebrow {
        gap: 9px;
        margin-bottom: 9px;
        font-size: 9px;
        line-height: 1.3;
    }

        .ak-hero-eyebrow::before {
            width: 28px;
            flex-basis: 28px;
        }

    .ak-hero-title {
        width: 100%;
        max-width: 330px;
        font-size: var(--ak-hero-title-size);
        line-height: 1.08;
        letter-spacing: 0;
    }

        .ak-hero-title span {
            margin-top: 7px;
        }

    .ak-hero-description {
        max-width: 330px;
        margin-top: 11px;
        font-size: 12px;
        line-height: 1.55;
    }

    .ak-hero-actions {
        margin-top: 15px;
        gap: 8px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .ak-hero-btn {
        width: auto;
        min-height: 40px;
        padding: 0 14px;
        font-size: 10px;
        gap: 7px;
    }

    .ak-play-icon {
        width: 19px;
        height: 19px;
        font-size: 7px;
    }

    /* الموبايل: نخفي الأربع features حتى يكون التصميم نظيف */
    .ak-hero-features {
        display: none;
    }

    .ak-hero-pagination {
        left: 18px;
        bottom: 13px;
        gap: 13px;
    }

    html[dir="rtl"] .ak-hero-pagination {
        left: 18px;
        right: auto;
    }

    .ak-hero-pagination button {
        font-size: 9px;
    }

    .ak-hero-scroll {
        display: none;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px) {
    :root {
        --ak-hero-height: 590px;
        --ak-hero-title-size: 20px;
    }

    .ak-hero-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ak-hero-content,
    html[dir="rtl"] .ak-hero-content {
        padding-top: 95px;
    }

    .ak-hero-title {
        max-width: 300px;
    }

    .ak-hero-description {
        max-width: 300px;
        font-size: 11px;
    }

    .ak-hero-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
    }
}

.ak-btn-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}

html[dir="rtl"] .ak-btn-arrow {
    transform: rotate(0deg);
}

html[dir="ltr"] .ak-btn-arrow {
    transform: rotate(180deg);
}

.ak-hero-btn-primary:hover .ak-btn-arrow {
    transform: translateX(-3px);
}

html[dir="ltr"] .ak-hero-btn-primary:hover .ak-btn-arrow {
    transform: rotate(180deg) translateX(-3px);
}
/*  ===============================
    End HERO Section
    ===============================
*/



/* =========================================================
   Alakaber Mini Cart
========================================================= */

.popup-shopping-cart .tf-mini-cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 18px;
}

/* Product Card */
.ak-mini-cart-item {
    display: flex;
    align-items: stretch;
    gap: 13px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eeeeF3;
    border-radius: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .ak-mini-cart-item:hover {
        border-color: #ded9ed;
        box-shadow: 0 8px 26px rgba(40,30,70,.055);
    }

/* Image */
.ak-mini-cart-image {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #f8f8fa;
}

    .ak-mini-cart-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
    }

/* Content */
.ak-mini-cart-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Top */
.ak-mini-cart-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ak-mini-cart-title {
    flex: 1;
    min-width: 0;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

    .ak-mini-cart-title:hover {
        color: #5c45a5;
    }

/* Remove */
.ak-mini-cart-remove {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #a2a2a8;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

    .ak-mini-cart-remove svg {
        width: 15px;
        height: 15px;
    }

    .ak-mini-cart-remove:hover {
        background: #fff1f2;
        color: #d34852;
    }

/* Price */
.ak-mini-cart-price {
    margin-top: 4px;
    color: #6048aa;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

    .ak-mini-cart-price .text-muted {
        color: #8c8c94 !important;
        font-size: 10px !important;
        font-weight: 400;
    }

/* Bottom row */
.ak-mini-cart-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
}

/* Quantity label */
.ak-mini-cart-qty-label {
    color: #8b8b93;
    font-size: 11px;
    font-weight: 500;
}

/* Quantity Control */
.ak-mini-cart-qty {
    height: 32px;
    display: inline-flex;
    align-items: center;
    background: #f7f7f9;
    border: 1px solid #e9e9ed;
    border-radius: 10px;
    overflow: hidden;
}

/* +/- */
.ak-mini-cart-qty-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #5c5c64;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

    .ak-mini-cart-qty-btn:hover {
        background: #6048aa;
        color: #fff;
    }

/* Quantity number */
.ak-mini-cart-qty-value {
    min-width: 34px;
    padding: 0 6px;
    text-align: center;
    color: #242429;
    font-size: 13px;
    font-weight: 700;
    line-height: 32px;
    user-select: none;
}

/* RTL */
html[dir="rtl"] .ak-mini-cart-item {
    direction: rtl;
}

html[dir="rtl"] .ak-mini-cart-content {
    text-align: right;
}

html[dir="rtl"] .ak-mini-cart-bottom {
    direction: rtl;
}

/* LTR */
html[dir="ltr"] .ak-mini-cart-item {
    direction: ltr;
}

html[dir="ltr"] .ak-mini-cart-content {
    text-align: left;
}

/* Mobile */
@media(max-width:575.98px) {

    .popup-shopping-cart .tf-mini-cart-items {
        gap: 10px;
    }

    .ak-mini-cart-item {
        gap: 11px;
        padding: 10px;
        border-radius: 14px;
    }

    .ak-mini-cart-image {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 10px;
    }

    .ak-mini-cart-title {
        font-size: 13px;
    }

    .ak-mini-cart-bottom {
        padding-top: 8px;
    }

    .ak-mini-cart-qty,
    .ak-mini-cart-qty-btn {
        height: 30px;
    }

    .ak-mini-cart-qty-btn {
        width: 30px;
    }

    .ak-mini-cart-qty-value {
        min-width: 31px;
        line-height: 30px;
    }
}
.popup-shopping-cart .tf-mini-cart-bottom {
    background: #fff;
    box-shadow: 0 -8px 28px rgba(30,25,50,.04);
}

.popup-shopping-cart .tf-mini-cart-bottom-wrap {
    padding-top: 18px;
}

.popup-shopping-cart .tf-cart-totals-discounts {
    align-items: center;
    margin-bottom: 5px;
}

.popup-shopping-cart .tf-cart-total {
    color: #202024;
    font-size: 16px !important;
    font-weight: 650 !important;
}

.popup-shopping-cart .tf-totals-total-value {
    color: #202024;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.popup-shopping-cart .tf-cart-tax {
    margin-top: 4px;
    color: #77777f;
    font-size: 12px !important;
}

.popup-shopping-cart .tf-mini-cart-view-checkout {
    margin-top: 16px;
}

    .popup-shopping-cart .tf-mini-cart-view-checkout .tf-btn {
        min-height: 48px;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 650;
        box-shadow: none;
    }

.popup-shopping-cart .popup-header {
    min-height: 62px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #eeeeF2;
}

    .popup-shopping-cart .popup-header .title {
        color: #19191d;
        font-size: 18px;
        font-weight: 700;
    }

    .popup-shopping-cart .popup-header .icon-close-popup {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: .2s ease;
    }

        .popup-shopping-cart .popup-header .icon-close-popup:hover {
            background: #f4f4f6;
        }
        
        /**************************************************/
/* Quick View arrows only */

.modal-quick-view .swiper-button-prev::after,
.modal-quick-view .swiper-button-next::after {
    display: none !important;
    content: none !important;
}

.modal-quick-view .ak-qv-arrow {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #5f49a6;
    color: #fff;
    box-shadow: 0 5px 16px rgba(95,73,166,.22);
    transition: .2s ease;
}

    .modal-quick-view .ak-qv-arrow svg {
        width: 14px;
        height: 14px;
        display: block;
    }

    .modal-quick-view .ak-qv-arrow:hover {
        background: #4d3a8d;
        color: #fff;
        transform: scale(1.06);
    }

.modal-quick-view .swiper-button-prev {
    left: 14px !important;
    right: auto !important;
}

.modal-quick-view .swiper-button-next {
    right: 14px !important;
    left: auto !important;
}

html[dir="rtl"] .modal-quick-view .ak-qv-arrow,
html[dir="rtl"] .modal-quick-view .ak-qv-arrow svg {
    transform: none !important;
}

.modal-quick-view .swiper-button-disabled {
    opacity: .35 !important;
}

@media(max-width:575.98px) {
    .modal-quick-view .ak-qv-arrow {
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }

        .modal-quick-view .ak-qv-arrow svg {
            width: 12px;
            height: 12px;
        }
}

/* =========================================================
   QUICK VIEW - BUY ROW
========================================================= */

.ak-qv-buy-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Add To Cart */
.ak-qv-buy-btn {
    flex: 1;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none !important;
}

/* =========================================================
   PROFESSIONAL MINI QUANTITY
========================================================= */

.ak-qv-mini-qty {
    flex: 0 0 128px;
    width: 128px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    border: 1px solid #e8e6ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35,28,55,.035);
    direction: ltr;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .ak-qv-mini-qty:focus-within {
        border-color: #cfc6e9;
        box-shadow: 0 0 0 3px rgba(95,73,166,.07);
    }

/* +/- Buttons */
.ak-qv-mini-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f5f4f7;
    color: #62616a;
    font-family: Arial,sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
}

    .ak-qv-mini-btn:hover {
        background: #5f49a6;
        color: #fff;
    }

    .ak-qv-mini-btn:active {
        transform: scale(.92);
    }

/* Number */
.ak-qv-mini-input {
    flex: 1;
    width: 40px;
    height: 36px;
    margin: 0;
    padding: 14px 18px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #25242b;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 36px;
    box-shadow: none !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

    .ak-qv-mini-input:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }

    .ak-qv-mini-input::-webkit-inner-spin-button,
    .ak-qv-mini-input::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

/* RTL:
   بصرياً يظهر +  1  − مثل الصورة التي أرسلتها */
html[dir="rtl"] .ak-qv-mini-qty {
    flex-direction: row-reverse;
}

/* LTR:
   يظهر −  1  + */
html[dir="ltr"] .ak-qv-mini-qty {
    flex-direction: row;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {

    .ak-qv-buy-row {
        gap: 8px;
        margin-top: 16px;
    }

    .ak-qv-buy-btn {
        height: 45px;
        min-height: 45px;
        border-radius: 12px !important;
        font-size: 13px;
    }

    .ak-qv-mini-qty {
        flex-basis: 116px;
        width: 116px;
        height: 45px;
        padding: 4px;
        border-radius: 12px;
    }

    .ak-qv-mini-btn {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
        border-radius: 9px;
        font-size: 15px;
    }

    .ak-qv-mini-input {
        width: 34px;
        height: 33px;
        font-size: 13px;
        line-height: 33px;
    }
}

/* Very small screens */
@media(max-width:360px) {

    .ak-qv-buy-row {
        gap: 6px;
    }

    .ak-qv-mini-qty {
        flex-basis: 108px;
        width: 108px;
    }

    .ak-qv-mini-btn {
        flex-basis: 31px;
        width: 31px;
    }
}



/* =========================================================
   PROJECT REQUEST CTA
========================================================= */

#header.ak-main-header .ak-project-request-item {
    height: 100%;
    display: flex;
    align-items: center;
    margin-inline-start: 5px;
}

#header.ak-main-header .ak-project-request-link {
    position: relative;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 11px;
    background: linear-gradient(135deg,#664bd0 0%,#5739bb 52%,#432692 100%);
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 7px 17px rgba(74,42,165,.18);
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
}

    #header.ak-main-header .ak-project-request-link::before {
        content: "";
        position: absolute;
        top: -30px;
        left: -70px;
        width: 42px;
        height: 100px;
        background: rgba(255,255,255,.14);
        transform: rotate(25deg);
        transition: left .45s ease;
    }

    #header.ak-main-header .ak-project-request-link:hover {
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(74,42,165,.25);
    }

        #header.ak-main-header .ak-project-request-link:hover::before {
            left: 120%;
        }

#header.ak-main-header .ak-project-request-icon {
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255,255,255,.15);
}

    #header.ak-main-header .ak-project-request-icon i {
        font-size: 14px;
        line-height: 1;
    }

#header.ak-main-header .ak-project-request-link > span {
    position: relative;
    z-index: 1;
}

/* 1200 - 1399 */
@media(min-width:1200px) and (max-width:1399.98px) {
    #header.ak-main-header .ak-project-request-link {
        height: 39px;
        padding: 0 10px;
        gap: 5px;
        font-size: 10.5px;
    }

    #header.ak-main-header .ak-project-request-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

        #header.ak-main-header .ak-project-request-icon i {
            font-size: 12px;
        }
}
/* =========================================================
   MOBILE PROJECT REQUEST CTA
========================================================= */

.mobile-project-request {
    position: relative;
    width: 100%;
    min-height: 64px;
    margin: 12px 0 15px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 28px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg,#684bdc 0%,#5739bb 55%,#432692 100%);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 9px 23px rgba(73,45,154,.18);
    transition: transform .2s ease,box-shadow .2s ease;
}

    .mobile-project-request::before {
        content: "";
        position: absolute;
        top: -45px;
        left: -80px;
        width: 55px;
        height: 140px;
        background: rgba(255,255,255,.10);
        transform: rotate(25deg);
        transition: left .45s ease;
    }

    .mobile-project-request:hover {
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 27px rgba(73,45,154,.24);
    }

        .mobile-project-request:hover::before {
            left: 115%;
        }

.mobile-project-request-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.13);
}

    .mobile-project-request-icon i {
        font-size: 20px;
        line-height: 1;
    }

.mobile-project-request-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: start;
}

    .mobile-project-request-content strong {
        margin: 0;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
    }

    .mobile-project-request-content small {
        display: block;
        margin: 0;
        color: rgba(255,255,255,.75);
        font-size: 9.5px;
        font-weight: 400;
        line-height: 1.45;
    }

.mobile-project-request-arrow {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
}

    .mobile-project-request-arrow i {
        font-size: 17px;
    }

html[dir="ltr"] .mobile-project-request-arrow i {
    transform: rotate(180deg);
}

@media(max-width:380px) {
    .mobile-project-request {
        min-height: 58px;
        grid-template-columns: 37px minmax(0,1fr) 25px;
        gap: 8px;
        padding: 9px 10px;
    }

    .mobile-project-request-icon {
        width: 37px;
        height: 37px;
    }

        .mobile-project-request-icon i {
            font-size: 18px;
        }

    .mobile-project-request-content strong {
        font-size: 12px;
    }

    .mobile-project-request-content small {
        font-size: 8.7px;
    }
}