/* ******************************fonts******************************* */
@font-face {
    font-family: avenirRglr;
    src: url(../assets/fonts/AvenirNextWorld-Regular.otf);
}

@font-face {
    font-family: avenirBoldItalic;
    src: url(../assets/fonts/AvenirNextWorld-BoldIt.otf);
}

@font-face {
    font-family: avenirBold;
    src: url(../assets/fonts/AvenirNextWorld-Bold.otf);
}

@font-face {
    font-family: avenirBlack;
    src: url(../assets/fonts/AvenirNextWorld-Black.otf);
}

@font-face {
    font-family: avenirBlackIt;
    src: url(../assets/fonts/AvenirNextWorld-BlackIt.otf);
}

.avenirRglr {
    font-family: avenirRglr;
}

.avenirBoldItalic {
    font-family: avenirBoldItalic;
}

.avenirBold {
    font-family: avenirBold;
}

.avenirBlack {
    font-family: avenirBlack;
}

.avenirBlackIt {
    font-family: avenirBlackIt;
}

.nav-item a.active {
    font-family: avenirBold !important;
    color: #00AA31 !important;
}

.break_section {
    background-color: #24d06dbf;
}

/* ******************************font sizes******************************* */
.f_64 {
    font-size: 64px;
}

.f_48 {
    font-size: 48px;
}

.f_32 {
    font-size: 32px;
}

.f_24 {
    font-size: 24px;
}

.f_20 {
    font-size: 20px !important;
}

.f_15 {
    font-size: 15px;
}

.f_12 {
    font-size: 12px !important;
}

.f_16 {
    font-size: 16px;
}

.f_18 {
    font-size: 18px;
}

.f_19 {
    font-size: 19px;
}

.f_28 {
    font-size: 28px;
}

.text_64 {
    font-size: 35px;
    font-style: italic;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
}

/* ******************************font weight******************************* */
.fw_900 {
    font-weight: 900;
}

/* ******************************button******************************* */
.apply_btn {
    bottom: -15px;
    border-radius: 15px;
}

.btn:hover,
.btn:focus {
    box-shadow: unset !important;
}

/* ******************************colors******************************* */
.black_color,
ul li a {
    color: #404041 !important;
}

.dropdown-item:hover {
    color: #00AA31 !important;
}

.light_black_color {
    color: #404041 !important;
}

.main_color {
    color: #00AA31 !important;
}

.yellow_color {
    color: #E88F00;
}

.green_color {
    color: #02533B;
}

.grey_back {
    background: #dedede80 !important;
}

.black {
    color: #000 !important;
}

.grey_color {
    color: #898F8F !important;
}

/* ******************************background******************************* */
.green_back {
    background-color: #00AA31 !important;
}

.black_back {
    background-color: #000;
}

.white_back {
    background-color: #fff;
}

.darkgreen_back {
    background-color: #00992C;
}

.client_info {
    background: rgba(0, 170, 49, 0.10);
    ;
}

.light_grey_back {
    background: #F5F5F5;
}

.green_gardient {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 24.78%, rgba(0, 170, 49, 0.50) 100%);
}

.yellow_gradient {
    background: linear-gradient(180deg, rgba(247, 192, 49, 0.00) 3.97%, rgba(247, 192, 49, 0.30) 100%, rgba(247, 192, 49, 0.30) 12%, #FFF 12.66%)
}

.dropdown-item:active {
    background-color: #fff !important;
}

/* ******************************icons, images,background_images and videos  ******************************* */
.navbar-toggler-icon {
    background-image: url(../assets/images/svg/menu.svg ) !important;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
}


.join_us_img {
    border-radius: 30px;
}

.shadow_wajeez {
    box-shadow: 0px -8px 15px 0px rgba(0, 0, 0, 0.08);
}

.carousel-control-prev-icon {
    background-image: url(../assets/images/svg/left.svg ) !important;
}

.carousel-control-next-icon {
    background-image: url(../assets/images/svg/right.svg ) !important;
}

.img_carousel {
    width: 110px;
    height: 110px;
}

.carousel_item {
    border-radius: 30px;
    background: linear-gradient(180deg, #F7C031 0%, #E88F00 100%);
    width: inherit !important;
}

.hidden_overflow {
    overflow: hidden;
}

.center.slick-initialized .slick-slide {
    padding: 0 .5rem !important;
}

.multiple-items.slick-initialized .slick-slide {
    padding: 0 1rem !important;
}

.carousel-control-next,
.carousel-control-prev {
    align-items: baseline !important;
    opacity: 1 !important;
}

#country_image_container {
    overflow: hidden;
}

#country_img {
    max-width: 100%;
    height: 100%;
    animation-duration: 1s;
}

/* ******************************width******************************* */
.features_cards {
    height: 500px;
    box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.16);
    border-radius: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 175px;
}

.w-inherit {
    width: inherit !important;

}

.features_cards.rounds {
    background-image: url(../assets/images/svg/back_rounds.svg);
}

.features_cards.reviews {
    background-image: url(../assets/images/svg/back_reviews.svg);
}

.features_cards.wallet {
    background-image: url(../assets/images/svg/back_wallet.svg);
}

.features_cards.rewards {
    background-image: url(../assets/images/svg/back_rewards.svg);
}

.features_cards.discounts {
    background-image: url(../assets/images/svg/back_discounts.svg);
}

.features_cards.referral {
    background-image: url(../assets/images/svg/back_referral.svg);
}

/* ******************************media queries  ******************************* */
@media (max-width: 767.98px) {

    .border_right,
    .border_left_right {
        border-left: 1px solid #fff;
    }
    .border_right_rtl,
    .border_left_right_rtl {
        border-right: 1px solid #fff;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }

    .image-container {
        left: 7% !important;
    }
    .container-md {
        max-width: 1156px !important;
    }
}

@media (min-width: 1600px) {
    .image-container {
        left: 10% !important;
    }
}

@media (min-width: 1900px) {

    .image-container {
        left: 15% !important;
    }
}

@media (min-width: 2500px) {
    .image-container {
        left: 25% !important;
    }
}

@media (max-width:767.98px) {
    .image-container {
        width: 100% !important;
    }
}

@media (min-width:1200px) {
    .features_cards_container {
        max-width: 20% !important;
    }

    .pb-5rem {
        padding-bottom: 5rem !important;
    }

    .image-container {
        position: absolute;
        top: -50%;
        clip-path: inset(0 0 31.8% 0);
        left: 0%;
    }

    .pl-15 {
        padding-left: 15rem !important;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media (min-width: 420px) {
    .iti {
        width: 360px !important;
    }
}

@media (min-width: 768px) {
    .text_64 {
        font-size: 64px !important;
        font-style: italic;
        font-weight: 900;
        line-height: 70px !important;
        text-align: center;
    }

    .video-container {
        height: 664px !important;
    }

    .center.slick-initialized .slick-slide {
        padding: 0 0.69% !important;
    }

    .carousel_item {
        border-radius: 100px !important;
    }

    .border_right,
    .border_right_left {
        border-right: 1px solid #fff;
    }
    .border_right_rtl,
    .border_right_left_rtl {
        border-left: 1px solid #fff;
    }
    .tiny_container {
        max-width: 648px !important;
    }
}

/* ******************************cards  ******************************* */
.card_wajeez {
    transition: transform 0.3s, box-shadow 0.3s;
}

.card_wajeez img {
    width: 250px;
    height: 250px
}

.card_wajeez:hover {
    transform: translateY(-10px);
    border-radius: 15px;
    cursor: pointer;
}

.card_wajeez.food:hover {
    background-color: #FF303C;
}

.card_wajeez.fresh:hover {
    background-color: #00AA31;
}

.card_wajeez.market:hover {
    background-color: #02A0FC;
}

.card_wajeez.errands:hover {
    background-color: #FFBA0D;
}

.card_wajeez:hover h3 {
    color: #fff !important;
    animation: slideToTop 0.5s ease-out;
}

.card_wajeez-text-hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    position: relative;
    top: -1.2em;
    animation: slideToTop 0.5s ease-out;
}

.card_wajeez:hover .card_wajeez-text-hidden {
    visibility: visible;
    opacity: 1;
}

.join_us_card {
    border-radius: 30px;
    background: #FFF;
    box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.16);
}

/* ******************************animations  ******************************* */
@keyframes slideToTop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeOutToLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes fadeInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ******************************lists ******************************* */
ul.cities {
    animation: slideToTop 1s ease-out;
}

ul.algeria {
    columns: 3;
    column-count: 3;

}

ul.france {
    columns: 2;
    column-count: 2;
}

/* ******************************border radius, borders ******************************* */
.br_10 {
    border-radius: 10px !important;
}

.br_8 {
    border-radius: 8px !important;
}

.cancel_btn {
    border: 1px solid #00AA31 !important;
}

/* ******************************Inputs ******************************* */
input {
    height: 48px !important;
}

::placeholder {
    color: #00000080 !important;
}

.form-control:focus {
    border-color: transparent !important;
    box-shadow: none !important;

}

/* ******************************general css******************************* */
a:hover {
    text-decoration: none !important;
}
#mute_button{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 100;
}
html,
body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth !important;
    scroll-padding-top: 82px;
}
body.pp{
    scroll-padding-top: 340px !important;

}
.header {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.16);
}

.padding_break {
    padding: 3rem 0;
}
.padding_top {
    padding-top: 84px;
}
.content-block {
    display: none;
}

#algeria {
    display: block;
}

.active_switcher>img {
    border: 2px solid #fff !important;
    border-radius: 50% !important;
}

.dropdown-toggle:hover {
    font-family: avenirBold !important;
}

.dropdown-menu {
    min-width: 4rem !important;
}

.features_cards p {
    line-height: 18px !important;
}

.thick_hr {
    border-top: 10px solid #00AA31 !important;
    border-radius: 5px !important;
    width: 18% !important;
    float: left;
}
:dir(rtl) .thick_hr {
    float: right !important;
}
.thin_hr {
    border-top: 3px solid #00AA31 !important;
    border-radius: 3px !important;
    float: left;
    width: 100% !important;
}

.circle {
    width: 26px;
    height: 26px;
    border: 2px solid #00AA31;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus_sign {
    position: absolute;
    width: 60%;
    border: 1px solid #00AA31;
}

.minus_sign {
    position: absolute;
    width: 60%;
    border: 1px solid #00AA31;
    transform: rotate(90deg);
}

.border_top {
    border-top: 2px solid #00AA31;
}

.ar {
    text-align: right;
    direction: rtl;
}

.faq_ul,
.faq_ol {
    padding-inline-start: 20px !important;
}

a:hover h5 {
    color: #00AA31 !important;
}

a[aria-expanded="true"] .minus_sign {
    display: none;
}

/* ******************************iti   ******************************* */

.phone,
.phone:focus-visible {
    border: 1px solid #dedede80 !important;
    outline-color: transparent !important;
    width: 100% !important;
}

.iti__flag-box,
.iti__country-name,
.iti--separate-dial-code .iti__selected-dial-code {
    font-family: avenirRglr !important;
    font-size: 15px !important;
    color: #000 !important;

}

.opt_card {
    border: transparent !important;
}

.otp-fake-input.otpdesigner__focus__ {
    border: 2px solid #00AA31 !important;
}

/* ******************************stepper  ******************************* */
:root {
    --circle-size: clamp(1.5rem, 24px, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper {
    padding-inline-start: 0 !important;
}

.item:before {
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: #E0E0E7;
    margin: 0 auto 0.5rem;
}

.item:not(:last-child):after {
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    height: 2px;
    background-color: #e0e0e0;
    order: -1;
}

.c-stepper__desc {
    color: grey;
    font-size: clamp(0.85rem, 2vw, 1rem);
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.active_step:before {
    border: 5px solid #00AA31 !important;
    background-color: #FFF !important;
}
.main{
    padding-top: 200px;
}
.item {
    flex: 1;
}
.inehrit_with{
    width: inherit;
}
:dir(rtl) ul {
   padding-inline-start: 0 !important;
}