.elementor-299 .elementor-element.elementor-element-1b67aa7{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-7221928 */.elementor-299 .elementor-element.elementor-element-7221928 {
    --rayyan-afaq-raafa-store-black: #171717;
    --rayyan-afaq-raafa-store-text: #242424;
    --rayyan-afaq-raafa-store-olive: #5d6835;
    --rayyan-afaq-raafa-store-border: #e8e8e3;

    width: 100%;
    position: relative;
    z-index: 99999;
}


/* =========================================================
   HEADER
========================================================= */

.rayyan-afaq-raafa-store-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    background: #ffffff;
    border-bottom: 1px solid
        var(--rayyan-afaq-raafa-store-border);

    box-shadow: none;

    z-index: 9999;

    font-family: "Montserrat", sans-serif;
}


/* =========================================================
   INNER
========================================================= */

.rayyan-afaq-raafa-store-header__inner {
    width: min(1180px, calc(100% - 32px));
    height: 68px;

    margin: 0 auto;
    padding: 0 8px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   LOGO
========================================================= */

.rayyan-afaq-raafa-store-header__logo {
    justify-self: start;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: max-content;
    min-width: 0;

    margin: 0;
    padding: 0;

    color: var(--rayyan-afaq-raafa-store-black);

    text-decoration: none !important;

    -webkit-tap-highlight-color: transparent !important;
}


.rayyan-afaq-raafa-store-header__logo-image {
    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    max-width: 36px;
    max-height: 36px;

    display: block;
    flex: 0 0 36px;

    object-fit: cover;
    object-position: center;

    border-radius: 50% !important;

    overflow: hidden;
}


/* =========================================================
   BRAND
========================================================= */

.rayyan-afaq-raafa-store-header__brand {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.rayyan-afaq-raafa-store-header__brand-name {
    color: var(--rayyan-afaq-raafa-store-black);

    font-family: "Montserrat", sans-serif;

    font-size: 17px;
    font-weight: 600;

    letter-spacing: 2.8px;

    line-height: 1;

    white-space: nowrap;
}


.rayyan-afaq-raafa-store-header__brand-sub {
    margin-top: 5px;

    color: var(--rayyan-afaq-raafa-store-olive);

    font-family: "Montserrat", sans-serif;

    font-size: 6px;
    font-weight: 500;

    letter-spacing: 3.5px;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.rayyan-afaq-raafa-store-header__nav {
    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;

    height: 100%;
}


.rayyan-afaq-raafa-store-header__link {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 100%;

    padding: 0;

    color: var(--rayyan-afaq-raafa-store-text);

    font-family: "Montserrat", sans-serif;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.3px;

    line-height: 1;

    text-decoration: none !important;

    transition: color 0.2s ease;

    -webkit-tap-highlight-color: transparent !important;
}


.rayyan-afaq-raafa-store-header__link:hover {
    color: var(--rayyan-afaq-raafa-store-olive);
}


/* =========================================================
   NAV UNDERLINE
========================================================= */

.rayyan-afaq-raafa-store-header__link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 16px;

    width: 0;
    height: 1px;

    background:
        var(--rayyan-afaq-raafa-store-olive);

    transform: translateX(-50%);

    transition: width 0.2s ease;
}


.rayyan-afaq-raafa-store-header__link:hover::after {
    width: 100%;
}


/* =========================================================
   CART
========================================================= */

.rayyan-afaq-raafa-store-header__cart {
    position: relative;

    justify-self: end;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    width: max-content;
    min-width: 0;

    margin: 0;
    padding: 0;

    color: var(--rayyan-afaq-raafa-store-black) !important;

    background: transparent !important;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.2px;

    line-height: 1;

    text-decoration: none !important;

    transition: color 0.2s ease;

    -webkit-tap-highlight-color: transparent !important;
}


.rayyan-afaq-raafa-store-header__cart:hover {
    color:
        var(--rayyan-afaq-raafa-store-olive) !important;
}


/* =========================================================
   CART ICON
========================================================= */

.rayyan-afaq-raafa-store-header__cart-icon {
    width: 17px;
    height: 17px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CART COUNT
========================================================= */

.rayyan-afaq-raafa-store-header__cart-count {
    min-width: 16px;
    height: 16px;

    padding: 0 3px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: #ffffff;

    background:
        var(--rayyan-afaq-raafa-store-olive);

    border-radius: 50%;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;
    font-weight: 600;

    line-height: 1;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.rayyan-afaq-raafa-store-header__menu {
    display: none;

    margin: 0;
    padding: 7px 6px;

    width: 34px;
    height: 34px;

    border: 0 !important;

    background: transparent !important;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent !important;
}


/* =========================================================
   HAMBURGER
========================================================= */

.rayyan-afaq-raafa-store-header__menu span {
    display: block;

    width: 20px;
    height: 1.5px;

    margin: 2.5px 0;

    background: #171717 !important;

    border: 0;

    border-radius: 0;

    opacity: 1 !important;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.rayyan-afaq-raafa-store-header__mobile {
    display: none;

    width: 100%;

    margin: 0;
    padding: 8px 12px 12px;

    box-sizing: border-box;

    background: #ffffff;

    border-top: 1px solid
        var(--rayyan-afaq-raafa-store-border);
}


.rayyan-afaq-raafa-store-header__mobile-nav {
    display: flex;
    flex-direction: column;

    width: 100%;
}


.rayyan-afaq-raafa-store-header__mobile-nav a {
    display: flex;
    align-items: center;

    min-height: 46px;

    padding: 0 8px;

    box-sizing: border-box;

    color: var(--rayyan-afaq-raafa-store-text) !important;

    background: transparent !important;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none !important;

    border-bottom: 1px solid #f1f1ed;

    -webkit-tap-highlight-color: transparent !important;
}


.rayyan-afaq-raafa-store-header__mobile-nav a:last-child {
    border-bottom: 0;
}


.rayyan-afaq-raafa-store-header__mobile-nav a:hover {
    color:
        var(--rayyan-afaq-raafa-store-olive) !important;
}


/* =========================================================
   MOBILE OPEN
========================================================= */

.rayyan-afaq-raafa-store-header.is-open
.rayyan-afaq-raafa-store-header__mobile {
    display: block;
}


/* =========================================================
   MOBILE MENU ANIMATION
========================================================= */

.rayyan-afaq-raafa-store-header.is-open
.rayyan-afaq-raafa-store-header__menu span:nth-child(1) {
    transform:
        translateY(5px)
        rotate(45deg);
}


.rayyan-afaq-raafa-store-header.is-open
.rayyan-afaq-raafa-store-header__menu span:nth-child(2) {
    opacity: 0 !important;
}


.rayyan-afaq-raafa-store-header.is-open
.rayyan-afaq-raafa-store-header__menu span:nth-child(3) {
    transform:
        translateY(-5px)
        rotate(-45deg);
}


/* =========================================================
   REMOVE TAP / FOCUS EFFECTS
========================================================= */

.rayyan-afaq-raafa-store-header,
.rayyan-afaq-raafa-store-header * {
    -webkit-tap-highlight-color: transparent !important;
}


.rayyan-afaq-raafa-store-header a,
.rayyan-afaq-raafa-store-header button {
    outline: none !important;

    box-shadow: none !important;

    -webkit-touch-callout: none;

    touch-action: manipulation;
}


.rayyan-afaq-raafa-store-header a:active,
.rayyan-afaq-raafa-store-header a:focus,
.rayyan-afaq-raafa-store-header a:focus-visible,
.rayyan-afaq-raafa-store-header button:active,
.rayyan-afaq-raafa-store-header button:focus,
.rayyan-afaq-raafa-store-header button:focus-visible {
    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .rayyan-afaq-raafa-store-header__inner {
        width: calc(100% - 24px);

        grid-template-columns:
            1fr
            auto
            1fr;

        padding: 0 4px;
    }


    .rayyan-afaq-raafa-store-header__nav {
        gap: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__inner {
        position: relative;

        width: 100%;

        height: 58px;
        min-height: 58px;

        margin: 0;
        padding: 0;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* -----------------------------------------------------
       MENU — LEFT
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__menu {
        position: absolute;

        top: 50%;
        left: 10px;

        transform: translateY(-50%);

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;

        margin: 0;
        padding: 7px 6px;

        z-index: 50;
    }


    /* -----------------------------------------------------
       LOGO — TRUE CENTER
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__logo {
        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: max-content;

        margin: 0;
        padding: 0;

        z-index: 40;
    }


    .rayyan-afaq-raafa-store-header__logo-image {
        width: 36px;
        height: 36px;

        min-width: 36px;
        min-height: 36px;

        max-width: 36px;
        max-height: 36px;
    }


    .rayyan-afaq-raafa-store-header__brand-name {
        font-size: 14px;

        letter-spacing: 2px;
    }


    .rayyan-afaq-raafa-store-header__brand-sub {
        margin-top: 4px;

        font-size: 5px;

        letter-spacing: 3px;
    }


    /* -----------------------------------------------------
       DESKTOP NAV — HIDDEN
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__nav {
        display: none !important;
    }


    /* -----------------------------------------------------
       CART — RIGHT
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__cart {
        position: absolute;

        top: 50%;
        right: 10px;

        transform: translateY(-50%);

        justify-self: auto;

        width: 34px;
        height: 34px;

        margin: 0;
        padding: 0;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 0;

        font-size: 0;

        z-index: 50;
    }


    /* -----------------------------------------------------
       CART ICON
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__cart-icon {
        width: 19px;
        height: 19px;
    }


    /* -----------------------------------------------------
       CART BADGE
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__cart-count {
        position: absolute;

        top: 0;
        right: -2px;

        min-width: 16px;
        height: 16px;

        padding: 0 3px;

        font-size: 8px;

        border-radius: 50%;
    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN
    ----------------------------------------------------- */

    .rayyan-afaq-raafa-store-header__mobile {
        width: 100%;

        padding: 8px 12px 12px;

        box-sizing: border-box;
    }


    .rayyan-afaq-raafa-store-header__mobile-nav a {
        min-height: 46px;

        padding: 0 8px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .rayyan-afaq-raafa-store-header__menu {
        left: 6px;
    }


    .rayyan-afaq-raafa-store-header__cart {
        right: 6px;
    }


    .rayyan-afaq-raafa-store-header__brand-name {
        font-size: 13px;

        letter-spacing: 1.8px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 340px) {

    .rayyan-afaq-raafa-store-header__menu {
        left: 3px;
    }


    .rayyan-afaq-raafa-store-header__cart {
        right: 3px;
    }


    .rayyan-afaq-raafa-store-header__logo-image {
        width: 34px;
        height: 34px;
    }

}/* End custom CSS */