/* Add custom CSS styles below */ 
css
/* =========================================================
   BANNER CARDS
   ========================================================= */

.banner-outer.ambient {
    border: 1px solid #DDD8CF;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
}


/* =========================================================
   STORE FEATURES
   ========================================================= */

section.s-block.s-block--bundle-store-features {
    margin-top: -2rem;
}

.s-block-trust-store-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    border-radius: 0.75rem;
    background-color: #fff;
    border: 1px solid #b79a62 !important;
    box-sizing: border-box;
}

.tabs.hide-scroll {
    place-self: center;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button.tab-trigger.s-button-element.s-button-btn.s-button-outline.s-button-primary-outline {
    background: linear-gradient(45deg, #DDD8CF, #DDD8CF);
    color: #000 !important;
}


/* =========================================================
   BUNDLE TEXT
   ========================================================= */

section.s-block.s-block--bundle-text-content {
    margin-top: -7rem;
}


/* =========================================================
   TESTIMONIAL
   ========================================================= */

.special-testimonial.dm-bg-sec.bigger-80.animate__animated.\30 .aali-animation.rounded-xl.h-\[calc\(\(100\%_-_10px\)_\/_2\)\].has-anmt.shown {
    border: 1px solid #b79a62 !important;
}


/* =========================================================
   ANIMATED ADS
   ========================================================= */

section.s-block.s-block--animated-ads.all.\!mt-0 {
    margin-top: -1rem !important;
}


/* =========================================================
   FULLSCREEN BANNERS
   Common styles for banners 1, 5, 7
   ========================================================= */

/* Darken banner image */
#fullscreen-banner-1 .bg__image img.my-lazy,
#fullscreen-banner-5 .bg__image img.my-lazy,
#fullscreen-banner-7 .bg__image img.my-lazy {
    filter: brightness(0.45) !important;
}


/* Text wrapper */
#fullscreen-banner-1 .floating-wrapper,
#fullscreen-banner-5 .floating-wrapper,
#fullscreen-banner-7 .floating-wrapper {
    z-index: 20 !important;
}


/* =========================================================
   DESKTOP TYPOGRAPHY
   ========================================================= */

#fullscreen-banner-1 .floating_text .title,
#fullscreen-banner-5 .floating_text .title,
#fullscreen-banner-7 .floating_text .title {
    font-size: 48px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    max-width: 100%;
    overflow-wrap: break-word;
}


#fullscreen-banner-1 .floating_text .subtitle,
#fullscreen-banner-5 .floating_text .subtitle,
#fullscreen-banner-7 .floating_text .subtitle {
    font-size: 22px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    max-width: 100%;
    overflow-wrap: break-word;
}


#fullscreen-banner-1 .floating_text .btn,
#fullscreen-banner-5 .floating_text .btn,
#fullscreen-banner-7 .floating_text .btn {
    font-size: 18px !important;
    padding: 14px 30px !important;
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   DESKTOP ALIGNMENT
   ========================================================= */

@media (min-width: 768px) {

    .floating-wrapper.floatings-right {
        text-align: right;
    }

}


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

@media (min-width: 768px) and (max-width: 1024px) {

    #fullscreen-banner-1 .floating_text .title,
    #fullscreen-banner-5 .floating_text .title,
    #fullscreen-banner-7 .floating_text .title {
        font-size: 40px !important;
    }

    #fullscreen-banner-1 .floating_text .subtitle,
    #fullscreen-banner-5 .floating_text .subtitle,
    #fullscreen-banner-7 .floating_text .subtitle {
        font-size: 19px !important;
        line-height: 1.7 !important;
    }

    #fullscreen-banner-1 .floating_text .btn,
    #fullscreen-banner-5 .floating_text .btn,
    #fullscreen-banner-7 .floating_text .btn {
        font-size: 16px !important;
        padding: 12px 26px !important;
    }

}


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

@media (max-width: 767px) {

    /* -----------------------------------------
       General mobile safety
       ----------------------------------------- */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    /* -----------------------------------------
       Banner cards
       ----------------------------------------- */

    .banner-outer.ambient {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        border-radius: 10px;
    }


    /* -----------------------------------------
       Store features
       ----------------------------------------- */

    section.s-block.s-block--bundle-store-features {
        margin-top: -1rem;
    }

    .s-block-trust-store-features__item {
        padding: 1rem;
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------
       Bundle text
       ----------------------------------------- */

    section.s-block.s-block--bundle-text-content {
        margin-top: -2rem;
    }


    /* -----------------------------------------
       Animated ads
       ----------------------------------------- */

    section.s-block.s-block--animated-ads.all.\!mt-0 {
        margin-top: 0 !important;
    }


    /* -----------------------------------------
       Banner image
       ----------------------------------------- */

    #fullscreen-banner-1 .bg__image img.my-lazy,
    #fullscreen-banner-5 .bg__image img.my-lazy,
    #fullscreen-banner-7 .bg__image img.my-lazy {
        filter: brightness(0.60) !important;
        max-width: 100%;
    }


    /* -----------------------------------------
       Banner wrapper
       ----------------------------------------- */

    #fullscreen-banner-1 .floating-wrapper,
    #fullscreen-banner-5 .floating-wrapper,
    #fullscreen-banner-7 .floating-wrapper {
        z-index: 20 !important;
        max-width: 100%;
        overflow: hidden;
    }


    /* -----------------------------------------
       Mobile title
       ----------------------------------------- */

    #fullscreen-banner-1 .floating_text .title,
    #fullscreen-banner-5 .floating_text .title,
    #fullscreen-banner-7 .floating_text .title {
        font-size: 28px !important;
        line-height: 1.35 !important;
        max-width: 100%;
        word-break: normal;
        overflow-wrap: break-word;
    }


    /* -----------------------------------------
       Mobile subtitle
       ----------------------------------------- */

    #fullscreen-banner-1 .floating_text .subtitle,
    #fullscreen-banner-5 .floating_text .subtitle,
    #fullscreen-banner-7 .floating_text .subtitle {
        font-size: 16px !important;
        line-height: 1.6 !important;
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /* -----------------------------------------
       Mobile button
       ----------------------------------------- */

    #fullscreen-banner-1 .floating_text .btn,
    #fullscreen-banner-5 .floating_text .btn,
    #fullscreen-banner-7 .floating_text .btn {
        font-size: 15px !important;
        padding: 10px 22px !important;
        max-width: 100%;
        white-space: normal;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       Mobile alignment
       ----------------------------------------- */

    #fullscreen-banner-1 .floating-wrapper.floatings-right,
    #fullscreen-banner-5 .floating-wrapper.floatings-right,
    #fullscreen-banner-7 .floating-wrapper.floatings-right {
        text-align: center;
    }

}


/* =========================================================
   SMALL MOBILE
   Phones around 375px and below
   ========================================================= */

@media (max-width: 375px) {

    #fullscreen-banner-1 .floating_text .title,
    #fullscreen-banner-5 .floating_text .title,
    #fullscreen-banner-7 .floating_text .title {
        font-size: 24px !important;
    }

    #fullscreen-banner-1 .floating_text .subtitle,
    #fullscreen-banner-5 .floating_text .subtitle,
    #fullscreen-banner-7 .floating_text .subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    #fullscreen-banner-1 .floating_text .btn,
    #fullscreen-banner-5 .floating_text .btn,
    #fullscreen-banner-7 .floating_text .btn {
        font-size: 14px !important;
        padding: 9px 18px !important;
    }

    .s-block-trust-store-features__item {
        padding: 0.75rem;
    }

}
/* =================================
   Banner 4 - تغميق الصورة
   ================================= */

#fullscreen-banner-4 .bg__image img.my-lazy,#fullscreen-banner-6 .bg__image img.my-lazy  {
    filter: brightness(0.45) !important;
}


/* =================================
   الكلام فوق الصورة
   ================================= */

#fullscreen-banner-4 .floating-wrapper {
    z-index: 20 !important;
}


/* =================================
   عنوان الديسكتوب
   ================================= */

#fullscreen-banner-4 .floating_text .title,#fullscreen-banner-6 .floating_text .title {
    font-size: 48px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* =================================
   النص تحت العنوان
   ================================= */

#fullscreen-banner-4 .floating_text .subtitle,#fullscreen-banner-6 .floating_text .subtitle {
    font-size: 22px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}


/* =================================
   الزر
   ================================= */

#fullscreen-banner-4 .floating_text .btn,#fullscreen-banner-6 .floating_text .btn {
    font-size: 18px !important;
    padding: 14px 30px !important;
}


/* =================================
   الموبايل
   ================================= */

@media (max-width: 767px) {

    #fullscreen-banner-4 .bg__image img.my-lazy,#fullscreen-banner-6 .bg__image img.my-lazy {
        filter: brightness(0.60) !important;
    }

    #fullscreen-banner-4 .floating_text .title, #fullscreen-banner-6 .floating_text .title {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }

    #fullscreen-banner-4 .floating_text .subtitle,#fullscreen-banner-6 .floating_text .subtitle {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    #fullscreen-banner-4 .floating_text .btn, #fullscreen-banner-6 .floating_text .btn {
        font-size: 15px !important;
        padding: 10px 22px !important;
    }
}