@font-face {
    font-display: block;
    font-family: Inter;
    src: url(../fonts/Inter/Inter-VariableFont_slntwght.ttf) format("truetype");
}
@font-face {
    font-display: block;
    font-family: Cairo;
    src: url(../fonts/Cairo/Cairo-VariableFont_slntwght.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: Almarai;
    src: url(../fonts/Almarai/Almarai-Bold.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: Somar-Sans;
    src: url(../fonts/SomarSans/SomarSans-Regular.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: Nunito;
    src: url(../fonts/Nunito/Nunito-Bold.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: Saudi-Riyal;
    src: url(../fonts/Saudi-Riyal/saudi_riyal.ttf) format("truetype");
}
@font-face {
    font-family: UAE-Dirham;
    src: url(../fonts/UAE-Dirham/AED-Regular.otf) format("truetype");
}

.slogan {
    font-family: "Almarai", Courier, monospace;
}
body {
    font-family: "Almarai", Courier, monospace !important;
}
a {
    text-decoration: none !important;
}
.search-suggestions {
    position: absolute;
    top: 102%;
    z-index: 98;
    background: #fff;
    width: 93%;
    max-height: 300px;
    overflow-y: auto;
}

.search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-suggestions ul li {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.search-suggestions ul li a {
    text-decoration: none;
    color: #333;
}

.search-suggestions ul li:hover {
    background-color: #f0f0f0;
}

.search-suggestions p {
    padding: 8px 12px;
    color: #999;
}
.promo-banner {
    width: 100%;
    display: block;
}

.promo-banner img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767.98px) {
    .action-bar {
        display: flex;
        flex-direction: row;
        gap: 25px;
        position: fixed !important;
        bottom: 60px !important;
        left: 50% !important;
        transform: translateX(-50%);
        background: #fff;
        padding: 5px;
        z-index: 1020 !important;
        border-radius: 50px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .action-bar .btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    .action-bar .btn span {
        border: none !important;
    }
    .action-bar .btn:hover {
        background-color: #333d4c !important;
    }
}