tabexseriescomponents 0.2.1280 → 0.2.1281

package/srcbefore27-11/TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards copy.jsx

@@ -1,1576 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
-import generalstyles from '../../../../styles/general/general.module.css';
-import ReactStars from 'react-rating-stars-component';
-import { GoStar } from '@react-icons/all-files/go/GoStar';
-import { IoIosStar } from '@react-icons/all-files/io/IoIosStar';
-import { fontSize, width } from '@mui/system';
-
-const ServicesectionCenteredcards = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [cardsarray, setcardsarray] = useState([]);
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const ikimagecredcontext = props.actions.ikimagecredcontext;
-    const routingcountext = props.actions.routingcountext;
-    const authdetailsContext = props.actions.authdetailsContext;
-
-    useEffect(() => {
-        var secpropobj = {};
-        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-            if (sectionitem.sectionid == props.sectionidprops) {
-                sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-                    secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-                });
-            }
-        });
-        setsectionproperties({ ...secpropobj });
-    }, [StatePagePropertiesContext]);
-    useEffect(() => {
-        if (sectionproperties.length != 0) {
-            if (sectionproperties.card_arrayofobjects != null) {
-                var bgsection_imagearrayofobjsparsed = JSON.parse(sectionproperties.card_arrayofobjects);
-                if (Array.isArray(bgsection_imagearrayofobjsparsed)) {
-                    setcardsarray([...bgsection_imagearrayofobjsparsed]);
-                }
-            }
-        }
-    }, [sectionproperties]);
-    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
-    useEffect(() => {
-        if (sectionproperties.length != 0 && sectionproperties.maincontainerarrayofobjs != undefined) {
-            var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
-            if (Array.isArray(maincontainerarrayofobjsparsed)) {
-                setmaincontainerarrayofobjs([...maincontainerarrayofobjsparsed]);
-            }
-        }
-    }, [sectionproperties]);
-    const sectionStyles = {
-        containerrrr: css({
-            marginTop: sectionproperties.marginTop + 'px',
-            marginBottom: sectionproperties.marginBottom + 'px',
-            paddingLeft: sectionproperties.paddingLeft + 'px',
-            paddingRight: sectionproperties.paddingRight + 'px',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
-            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
-            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
-            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
-            borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
-            border: sectionproperties.borderType == 'All' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderTop: sectionproperties.borderType == 'Vertical' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderBottom: sectionproperties.borderType == 'Vertical' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderLeftWidth: 0,
-            borderRightWidth: 0,
-            '@media (max-width: 800px)': {
-                marginTop: sectionproperties.marginTopResp + 'px',
-            },
-        }),
-        imgcontainer: css({
-            ':before': {
-                width: '100%',
-                height: '100%',
-                background: 'rgba(0,0,0,' + sectionproperties.cardbgcont_opacity + ')',
-
-                zIndex: 1,
-                position: 'absolute',
-                content: 's',
-                fontSize: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            },
-        }),
-        sectiontitlespan: css({
-            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-            color: sectionproperties.sectionTitleColor,
-            fontWeight: sectionproperties.sectionTitleFontWeight,
-            paddingLeft: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
-            paddingRight: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
-            textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            ':after': {
-                height: '5px',
-                width: sectionproperties.sectitle_lineafterwidth + '%',
-                backgroundColor: sectionproperties.linebgcolor,
-            },
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
-            },
-        }),
-        line_left: css({
-            height: '1px',
-            position: 'relative',
-            flex: '1 1 auto',
-            minWidth: '10%',
-            background: sectionproperties.linebgcolor,
-        }),
-        line_right: css({
-            height: '1px',
-            position: 'relative',
-            flex: '1 1 auto',
-            minWidth: '10%',
-            background: sectionproperties.linebgcolor,
-        }),
-        text1Styles: css({
-            // color: sectionproperties.slideshowText1ContentColor,
-            fontSize: sectionproperties.slideshowText1ContentFontSize + 'px',
-            fontWeight: sectionproperties.slideshowText1ContentFontWeight,
-            textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-            ':hover': {
-                transition: '.3s',
-                color: sectionproperties.text1secondarycolor,
-            },
-        }),
-        imageContainer: css({
-            width: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.image_width + '%' : sectionproperties.image_width + 'px',
-            height: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.image_height + '%' : sectionproperties.image_height + 'px',
-            borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
-            borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-            background: sectionproperties.image_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.image_bgcolor,
-            justifyContent: sectionproperties.iconcontainerheight == '0' ? 'start' : 'center',
-            // opacity: 0.4,
-            // opacity:sectionproperties.darknessopacity,
-            ':hover': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.activedotcolor,
-            },
-            ':before': {
-                // backgroundColor: 'rgba(0,0,0,0.5)',
-                background: 'rgba(0,0,0,' + sectionproperties.cardbg_opacity + ')',
-
-                width: '100%',
-                height: '100%',
-                zIndex: 1,
-                position: 'absolute',
-                content: 's',
-                fontSize: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            },
-            '@media (max-width: 800px)': {
-                width: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.image_width_resp + '%' : sectionproperties.image_width_resp + 'px',
-                height: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.height_responsive + '%' : sectionproperties.height_responsive + 'px',
-            },
-        }),
-        cardContainer: css({
-            ':hover .imageContainer': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.activedotcolor,
-            },
-            ':hover .text1Styles': {
-                transition: '.3s',
-                color: sectionproperties.text1secondarycolor,
-            },
-        }),
-        btnstyles: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            textDecoration: sectionproperties.textdecoration == 'None' ? 'none' : 'underline',
-            backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
-            borderRadius: sectionproperties.generalbtnborderradius,
-            ':hover': {
-                color: sectionproperties.generalbtn_textColoronhover,
-                backgroundColor: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
-                transition: '.3s',
-            },
-        }),
-        outercontainer: css({
-            position: 'relative',
-            width: sectionproperties.width + '%',
-            background: sectionproperties.outerbgcolor,
-            '@media (max-width: 800px)': {
-                width: sectionproperties.widthresponsive + '%',
-            },
-        }),
-        descriptioncont: css({
-            color: sectionproperties.prodCatColor,
-            fontWeight: sectionproperties.prodCatFontWeight,
-            textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            fontSize: sectionproperties.prodCatFontSize + 'px',
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.prodCatFontSizeResp + 'px',
-            },
-        }),
-        icontxtcont: css({
-            position: sectionproperties.textonimage == 'Yes' ? 'absolute' : 'relative',
-            bottom: sectionproperties.textonimage == 'Yes' ? 60 : 0,
-            // top: authdetailsContext?.instinfo?.contactinfo.instid == '6790ae890234e' ? '60%' : '',
-            '@media (max-width: 1025px)': {
-                // top: authdetailsContext?.instinfo?.contactinfo.instid == '6790ae890234e' ? '40%' : '',
-            },
-        }),
-    };
-
-    return (
-        <div
-            class={' row ml-0 mr-0 w-md-100 d-flex  align-items-center w-100 '}
-            style={{
-                background: sectionproperties.outerbgcolor,
-                zIndex: 20,
-                justifyContent: sectionproperties.innersectionposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            }}
-        >
-            {sectionproperties.showanimation == 'Yes' && (
-                <div class={sectionStyles.outercontainer + ' row ml-0 mr-0 align-items-center '} style={{}} data-aos={'fade-up'}>
-                    {maincontainerarrayofobjs != undefined && maincontainerarrayofobjs.length != 0 && (
-                        <div class={sectionStyles.imgcontainer}>
-                            <Imagekitimagecomp
-                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                publicKey={ikimagecredcontext?.ikimagepublickey}
-                                path={maincontainerarrayofobjs[0]?.back_bgimage}
-                                style={{
-                                    height: '100%',
-                                    width: '100%',
-                                    objectFit: 'cover',
-                                    margin: 0,
-                                    padding: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    bottom: 0,
-                                    right: 0,
-                                    left: 0,
-                                }}
-                            />
-                        </div>
-                    )}
-                    <div class={sectionStyles.containerrrr + ' row ml-0 mr-0 w-100 d-flex justify-content-center pl-md-3 pr-md-3 px-2015-3 '} style={{}}>
-                        {sectionproperties.sectiontitleshow == 'Show' && (
-                            <div class="col-lg-12 allcentered p-0" style={{ zIndex: 1 }}>
-                                <div
-                                    class={`${generalstyles.sectiontitlecont}` + ' col-lg-12  plr-1025-0 pl-md-3 pr-md-3 d-flex '}
-                                    style={{
-                                        marginTop: sectionproperties.sectionTitleMarginTop + 'px',
-                                        marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
-                                        paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
-                                        paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
-                                        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    }}
-                                >
-                                    <div
-                                        class="d-flex align-items-center flex-row "
-                                        style={{
-                                            position: 'relative',
-                                            width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
-                                            justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                        }}
-                                    >
-                                        {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_left}></span>}
-                                        <p
-                                            class={
-                                                sectionproperties.sectiontitlefontfamily == 'Pacifico'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Playfair'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' PlayfairFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' GreatvibesFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Quicksand'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Satisfy'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : `${sectionStyles.sectiontitlespan}` + '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center  '
-                                            }
-                                            style={{}}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
-                                        </p>
-                                        {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_right}></span>}
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                        {sectionproperties.prodCatShow == 'Show' && (
-                            <div
-                                class={' col-lg-12 col-md-12 col-sm-12 d-flex align-items-center px-sm-3'}
-                                style={{
-                                    justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
-                                    marginBottom: sectionproperties.descriptionMarginBottom + 'px',
-                                    paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
-                                    paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
-                                }}
-                            >
-                                <p
-                                    class={
-                                        sectionproperties.descFontFamily == 'Pacifico'
-                                            ? sectionStyles.descriptioncont + ' PacificoFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Playfair'
-                                            ? sectionStyles.descriptioncont + ' PlayfairFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Great Vibes'
-                                            ? sectionStyles.descriptioncont + ' GreatvibesFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Quicksand'
-                                            ? sectionStyles.descriptioncont + ' QuicksandFont m-0 p-0 wordbreak'
-                                            : sectionStyles.descriptioncont + ' m-0 p-0 wordbreak'
-                                    }
-                                    style={{}}
-                                >
-                                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
-                                </p>
-                            </div>
-                        )}
-                        {/* {sectionproperties.view_as_slider_vertical == 'Vertical' && (
-                            <div
-                                class="row m-0 w-100 d-flex "
-                                style={{
-                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                }}
-                            > */}
-                        {/* sectionproperties.flippingcards == 'No' && */}
-                        {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                            return (
-                                <div
-                                    // class={
-                                    //     sectionproperties.numofcols == '2'
-                                    //         ? ' col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                    //           sectionproperties.numberOfColsverticalresp
-                                    //         : sectionproperties.numofcols == '3'
-                                    //         ? ' col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                    //           sectionproperties.numberOfColsverticalresp
-                                    //         : '  col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                    //           sectionproperties.numberOfColsverticalresp
-                                    // }
-                                    class={
-                                        sectionproperties.numofcols == '2'
-                                            ? ' h-100 col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' + sectionproperties.numberOfColsverticalresp
-                                            : sectionproperties.numofcols == '3'
-                                            ? ' h-100 col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' + sectionproperties.numberOfColsverticalresp
-                                            : sectionproperties.numofcols == '6'
-                                            ? ' h-100 col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' + sectionproperties.numberOfColsverticalresp
-                                            : ' h-100 col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' + sectionproperties.numberOfColsverticalresp
-                                    }
-                                    style={{
-                                        zIndex: 2,
-                                        marginBottom: sectionproperties.innersectionmarginbottom + 'px',
-                                        paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                        paddingRight: sectionproperties.marginhorizontal + 'px',
-                                    }}
-                                >
-                                    <div
-                                        // class={
-                                        //     sectionproperties.innersectionbordertype != 'All'
-                                        //         ? sectionStyles.cardContainer + ' row m-0 w-100 mb-auto border-md-none '
-                                        //         : sectionStyles.cardContainer + ' row m-0 w-100 mb-auto '
-                                        // }
-                                        class={
-                                            sectionproperties.innersectionbordertype != 'All'
-                                                ? sectionStyles.cardContainer + ' h-100 row m-0 w-100 mb-auto border-md-none '
-                                                : sectionStyles.cardContainer + ' h-100 row m-0 w-100 mb-auto '
-                                        }
-                                        style={{
-                                            cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                            // background: sectionproperties.reservation_bgcolor,
-                                            background: cardinfoitem.cardbgcolorfromarray,
-                                            paddingTop: sectionproperties.reservation_padding_top + 'px',
-                                            paddingBottom: sectionproperties.reservation_padding_bottom + 'px',
-                                            paddingLeft: langdetect == 'en' ? sectionproperties.reservation_padding_left + 'px' : sectionproperties.reservation_padding_right + 'px',
-                                            paddingRight: langdetect == 'en' ? sectionproperties.reservation_padding_right + 'px' : sectionproperties.reservation_padding_left + 'px',
-                                            borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                            border:
-                                                sectionproperties.innersectionbordertype == 'All'
-                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                    : cardinfoindex != cardsarray.length - 1
-                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                    : '',
-                                            // cardinfoindex != cardsarray.length - 1
-                                            //     ? sectionproperties.innersectionbordertype == 'All'
-                                            //         ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                            //         : ''
-                                            //     : '',
-                                            borderRight:
-                                                cardinfoindex != cardsarray.length - 1
-                                                    ? sectionproperties.innersectionbordertype == 'Right'
-                                                        ? langdetect == 'en'
-                                                            ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                            : ''
-                                                        : ''
-                                                    : '',
-                                            borderLeft:
-                                                sectionproperties.innersectionbordertype == 'Right'
-                                                    ? langdetect == 'ar'
-                                                        ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                        : ''
-                                                    : '',
-                                            boxShadow: ' 0 0 10px ' + sectionproperties.innerSectionShadowColor,
-                                            height: authdetailsContext?.instinfo?.contactinfo.instid == '66b4a0338cb14' ? '100%' : '',
-                                            position: 'relative',
-                                        }}
-                                        onClick={() => {
-                                            // if (cardinfoitem.iscardclickable == 'Yes') {
-                                            //     window.open(cardinfoitem.btnlink, '_blank');
-                                            // }
-                                            if (cardinfoitem.btntype == 'Web Product Link' || cardinfoitem.btntype == 'App/Web Page') {
-                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                            } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'Same Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                // window.open(cardinfoitem.btnlink, '_target');
-                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                            } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'New Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                window.open(cardinfoitem.btnlink, '_blank');
-                                            }
-                                        }}
-                                    >
-                                        {sectionproperties.imageposition == 'Top' && sectionproperties.image_width != 0 && (
-                                            <div
-                                                class="col-lg-12 d-flex align-items-center p-0 w-100"
-                                                // class="col-lg-12 d-flex align-items-center p-0 w-100 h-100"
-                                                style={{
-                                                    marginBottom: sectionproperties.image_mb + 'px',
-                                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                }}
-                                            >
-                                                <div
-                                                    class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '}
-                                                    style={{ justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start' }}
-                                                >
-                                                    <Imagekitimagecomp
-                                                        urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                        publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                        path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                        style={{
-                                                            maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                            maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                            objectFit: 'contain',
-                                                        }}
-                                                    />
-                                                </div>
-                                            </div>
-                                        )}
-                                        <div class={sectionStyles.icontxtcont + ' row m-0 w-100 allcentered px-5 '} style={{}}>
-                                            {/*  */}
-
-                                            {sectionproperties.showrating == 'Show' && cardinfoitem.ratingnumber != null && (
-                                                <div class="col-lg-12 allcentered p-0 mb-1">
-                                                    <ReactStars
-                                                        count={5}
-                                                        value={parseFloat(cardinfoitem.ratingnumber)}
-                                                        edit={false}
-                                                        size={18}
-                                                        emptyIcon={
-                                                            <i class="h-100 allcentered">
-                                                                <GoStar style={{ color: '#ccc' }} />
-                                                            </i>
-                                                        }
-                                                        halfIcon={
-                                                            <i class="h-100 allcentered">
-                                                                <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                            </i>
-                                                        }
-                                                        filledIcon={
-                                                            <i class="h-100 allcentered">
-                                                                <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                            </i>
-                                                        }
-                                                        activeColor={sectionproperties.generalbtn_textColor}
-                                                    />
-                                                </div>
-                                            )}
-                                            <div
-                                                class="col-lg-12 d-flex p-0"
-                                                style={{
-                                                    marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                }}
-                                            >
-                                                <p
-                                                    class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                    style={{
-                                                        cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                        color: cardinfoitem.text1colorfromarray,
-                                                        textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-                                                    }}
-                                                >
-                                                    {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                </p>
-                                            </div>
-                                            <div
-                                                class="col-lg-12 d-flex p-0"
-                                                style={{
-                                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                    marginBottom: sectionproperties.slideshowText2Content_marginBottom + 'px',
-                                                    marginBottom: '30px',
-                                                }}
-                                            >
-                                                {sectionproperties.slideshowtext2_show && (
-                                                    <p
-                                                        class="m-0 wordbreak"
-                                                        style={{
-                                                            // color: sectionproperties.slideshowText2ContentColor,
-                                                            fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                            fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                            textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-                                                            color: cardinfoitem.text2colorfromarray,
-                                                        }}
-                                                    >
-                                                        {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                                    </p>
-                                                )}
-                                            </div>
-                                            {sectionproperties.generalbtn_show == 'Show' && cardinfoitem.iscardclickable == 'Yes' && (
-                                                <div class={sectionproperties.justifyContentCenter == 'Centered' ? 'col-lg-12 mt-2 allcentered' : 'col-lg-12 mt-2 text-start p-0'}>
-                                                    <button
-                                                        class={`${sectionStyles.btnstyles}`}
-                                                        onClick={() => {
-                                                            if (cardinfoitem.btntype == 'Web Product Link') {
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'Same Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_target');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'New Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_blank');
-                                                            } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                                // window.open(sectionproperties.btnlink, '_target');
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            }
-                                                        }}
-                                                    >
-                                                        {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                    </button>
-                                                </div>
-                                            )}
-                                        </div>
-                                        {sectionproperties.imageposition == 'Bottom' && sectionproperties.image_width != 0 && (
-                                            <div
-                                                class="col-lg-12 d-flex align-items-center p-0"
-                                                style={{
-                                                    marginTop: sectionproperties.image_mb + 'px',
-                                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                }}
-                                            >
-                                                <div class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '} style={{}}>
-                                                    <Imagekitimagecomp
-                                                        urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                        publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                        path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                        style={{
-                                                            maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                            maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                            objectFit: 'contain',
-                                                        }}
-                                                    />
-                                                </div>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            );
-                        })}
-                        {/* {sectionproperties.flippingcards == 'Yes' && sectionproperties.showcountdown != 'Yes' && (
-                                    <div class="row m-0 w-100 d-flex justify-content-center">
-                                        {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                            // alert(JSON.stringify(cardsarray[7]));
-                                            return (
-                                                <div
-                                                    class={
-                                                        cardinfoitem?.cardobj_descripen == undefined
-                                                            ? sectionproperties.numofcols == '2'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : sectionproperties.numofcols == '3'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : sectionproperties.numofcols == '6'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : ' flip-card flip-cardnonhover h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '2'
-                                                            ? ' flip-card h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '3'
-                                                            ? ' flip-card h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '6'
-                                                            ? ' flip-card h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : ' flip-card h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                    }
-                                                    style={{
-                                                        zIndex: 2,
-                                                        paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                                        paddingRight: sectionproperties.marginhorizontal + 'px',
-                                                        marginBottom: sectionproperties.innersectionmarginbottom + 'px',
-                                                        cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : '',
-                                                    }}
-                                                    onClick={() => {
-                                                        if (cardinfoitem.iscardclickable == 'Yes') {
-                                                            if (cardinfoitem.btntype == 'Web Product Link') {
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'Same Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_self');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'New Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_blank');
-                                                            } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                                // window.open(sectionproperties.btnlink, '_target');
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            }
-                                                        }
-                                                    }}
-                                                >
-                                                    <div
-                                                        class="flip-card-inner"
-                                                        style={{
-                                                            background: cardinfoitem.cardbgcolorfromarray,
-                                                            borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                                            border:
-                                                                sectionproperties.innersectionbordertype == 'All'
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : cardinfoindex != cardsarray.length - 1
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : '',
-                                                        }}
-                                                    >
-                                                        <div class={cardinfoitem.cardobj_descripen != '' ? 'flip-card-front d-flex align-items-center' : 'd-flex align-items-center'}>
-                                                            <div class="row m-0 w-100">
-                                                                <div
-                                                                    class="col-lg-12 d-flex align-items-center p-0"
-                                                                    style={{
-                                                                        marginBottom: sectionproperties.image_mb + 'px',
-                                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                    }}
-                                                                >
-                                                                    <div
-                                                                        class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '}
-                                                                        style={{
-                                                                            background: 'transparent',
-                                                                        }}
-                                                                    >
-                                                                        <Imagekitimagecomp
-                                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                            path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                            style={{
-                                                                                maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                                maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                                objectFit: 'contain',
-                                                                            }}
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                                <div
-                                                                    class="col-lg-12 d-flex p-0"
-                                                                    style={{
-                                                                        marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                    }}
-                                                                >
-                                                                    <p
-                                                                        class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                                        style={{
-                                                                            cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                                            color: cardinfoitem.text1colorfromarray,
-                                                                        }}
-                                                                    >
-                                                                        {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                                    </p>
-                                                                </div>
-
-                                                 
-                                                            </div>
-                                                        </div>
-                                                        {cardinfoitem.cardobj_descripen != '' && (
-                                                            <div class="flip-card-back allcentered">
-                                                                <div class="row m-0 w-100 allcentered">
-                                                                    {sectionproperties.showimagewhenflip == 'Show' && (
-                                                                        <div
-                                                                            class="col-lg-12 d-flex align-items-center p-0"
-                                                                            style={{
-                                                                                marginBottom: sectionproperties.image_mb + 'px',
-                                                                                justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                            }}
-                                                                        >
-                                                                            <div
-                                                                                class={' d-flex align-items-center  '}
-                                                                                style={{
-                                                                                    width: '30%',
-                                                                                    height: '30%',
-                                                                                    justifyContent: sectionproperties.iconcontainerheight == '0' ? 'start' : 'center',
-                                                                                }}
-                                                                            >
-                                                                                <Imagekitimagecomp
-                                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                                    style={{
-                                                                                        maxHeight: '100%',
-                                                                                        maxWidth: '100%',
-                                                                                        objectFit: 'contain',
-                                                                                    }}
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    )}
-                                                                    <div
-                                                                        class="col-lg-12 d-flex p-0"
-                                                                        style={{
-                                                                            marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                        }}
-                                                                    >
-                                                                        <p
-                                                                            class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                                            style={{
-                                                                                cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                                                color: cardinfoitem.text1colorfromarray,
-                                                                            }}
-                                                                        >
-                                                                            {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                                        </p>
-                                                                    </div>
-                                                                    <div
-                                                                        class="col-lg-12 d-flex p-0"
-                                                                        style={{
-                                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                        }}
-                                                                    >
-                                                                        {sectionproperties.slideshowtext2_show && (
-                                                                            <p
-                                                                                class="m-0 wordbreak"
-                                                                                style={{
-                                                                                    // color: sectionproperties.slideshowText2ContentColor,
-                                                                                    fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                                                    fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                                                    textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-                                                                                    color: cardinfoitem.text2colorfromarray,
-                                                                                }}
-                                                                            >
-                                                                                {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                                                            </p>
-                                                                        )}
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                )} */}
-                        {/* </div>
-                        )} */}
-                    </div>
-                </div>
-            )}
-            {sectionproperties.showanimation != 'Yes' && (
-                <div class={sectionStyles.outercontainer + ' row ml-0 mr-0 align-items-center '} style={{}}>
-                    {maincontainerarrayofobjs != undefined && maincontainerarrayofobjs.length != 0 && (
-                        <div class={sectionStyles.imgcontainer}>
-                            <Imagekitimagecomp
-                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                publicKey={ikimagecredcontext?.ikimagepublickey}
-                                path={maincontainerarrayofobjs[0]?.back_bgimage}
-                                style={{
-                                    height: '100%',
-                                    width: '100%',
-                                    objectFit: 'cover',
-                                    margin: 0,
-                                    padding: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    bottom: 0,
-                                    right: 0,
-                                    left: 0,
-                                }}
-                            />
-                        </div>
-                    )}
-                    <div class={sectionStyles.containerrrr + ' row ml-0 mr-0 w-100 d-flex justify-content-center pl-md-3 pr-md-3 px-2015-3 '} style={{}}>
-                        {sectionproperties.sectiontitleshow == 'Show' && (
-                            <div class="col-lg-12 allcentered p-0" style={{ zIndex: 1 }}>
-                                <div
-                                    class={`${generalstyles.sectiontitlecont}` + ' col-lg-12  plr-1025-0 pl-md-3 pr-md-3 d-flex '}
-                                    style={{
-                                        marginTop: sectionproperties.sectionTitleMarginTop + 'px',
-                                        marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
-                                        paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
-                                        paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
-                                        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    }}
-                                >
-                                    <div
-                                        class="d-flex align-items-center flex-row "
-                                        style={{
-                                            position: 'relative',
-                                            width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
-                                            justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                        }}
-                                    >
-                                        {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_left}></span>}
-                                        <p
-                                            class={
-                                                sectionproperties.sectiontitlefontfamily == 'Pacifico'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Playfair'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' PlayfairFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' GreatvibesFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Quicksand'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : sectionproperties.sectiontitlefontfamily == 'Satisfy'
-                                                    ? `${sectionStyles.sectiontitlespan}` + ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                    : `${sectionStyles.sectiontitlespan}` + '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center  '
-                                            }
-                                            style={{}}
-                                        >
-                                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
-                                        </p>
-                                        {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_right}></span>}
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                        {sectionproperties.prodCatShow == 'Show' && (
-                            <div
-                                class={' col-lg-12 col-md-12 col-sm-12 d-flex align-items-center px-sm-3'}
-                                style={{
-                                    justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
-                                    marginBottom: sectionproperties.descriptionMarginBottom + 'px',
-                                    paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
-                                    paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
-                                    zIndex: 1,
-                                }}
-                            >
-                                <p
-                                    class={
-                                        sectionproperties.descFontFamily == 'Pacifico'
-                                            ? sectionStyles.descriptioncont + ' PacificoFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Playfair'
-                                            ? sectionStyles.descriptioncont + ' PlayfairFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Great Vibes'
-                                            ? sectionStyles.descriptioncont + ' GreatvibesFont m-0 p-0 wordbreak '
-                                            : sectionproperties.descFontFamily == 'Quicksand'
-                                            ? sectionStyles.descriptioncont + ' QuicksandFont m-0 p-0 wordbreak'
-                                            : sectionStyles.descriptioncont + ' m-0 p-0 wordbreak'
-                                    }
-                                    style={{}}
-                                >
-                                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
-                                </p>
-                            </div>
-                        )}
-                        {sectionproperties.view_as_slider_vertical != 'Vertical' && (
-                            <div class={' scrollhorizontal w-100 align-items-center justify-content- '}>
-                                {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                    return (
-                                        <div
-                                            class={'w-sm-85  scrollhorizontalcard d-flex align-items-center justify-content-center justify-content-md-start '}
-                                            style={{
-                                                zIndex: 2,
-                                                paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                                paddingRight: sectionproperties.marginhorizontal + 'px',
-                                                marginBottom: sectionproperties.innersectionmarginbottom + 'px',
-                                                width: '20%',
-                                            }}
-                                        >
-                                            <div
-                                                class={
-                                                    sectionproperties.innersectionbordertype != 'All'
-                                                        ? sectionStyles.cardContainer + ' row m-0 w-100 mb-auto border-md-none '
-                                                        : sectionStyles.cardContainer + ' row m-0 w-100 mb-auto '
-                                                }
-                                                style={{
-                                                    cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                    // background: sectionproperties.reservation_bgcolor,
-                                                    background: cardinfoitem.cardbgcolorfromarray,
-                                                    paddingTop: sectionproperties.reservation_padding_top + 'px',
-                                                    paddingBottom: sectionproperties.reservation_padding_bottom + 'px',
-                                                    paddingLeft: langdetect == 'en' ? sectionproperties.reservation_padding_left + 'px' : sectionproperties.reservation_padding_right + 'px',
-                                                    paddingRight: langdetect == 'en' ? sectionproperties.reservation_padding_right + 'px' : sectionproperties.reservation_padding_left + 'px',
-                                                    borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                                    border:
-                                                        sectionproperties.innersectionbordertype == 'All'
-                                                            ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                            : cardinfoindex != cardsarray.length - 1
-                                                            ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                            : '',
-                                                    // cardinfoindex != cardsarray.length - 1
-                                                    //     ? sectionproperties.innersectionbordertype == 'All'
-                                                    //         ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                    //         : ''
-                                                    //     : '',
-                                                    borderRight:
-                                                        cardinfoindex != cardsarray.length - 1
-                                                            ? sectionproperties.innersectionbordertype == 'Right'
-                                                                ? langdetect == 'en'
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : ''
-                                                                : ''
-                                                            : '',
-                                                    borderLeft:
-                                                        sectionproperties.innersectionbordertype == 'Right'
-                                                            ? langdetect == 'ar'
-                                                                ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                : ''
-                                                            : '',
-                                                    boxShadow: ' 0 0 10px ' + sectionproperties.innerSectionShadowColor,
-                                                    height: authdetailsContext?.instinfo?.contactinfo.instid == '66b4a0338cb14' ? '100%' : '',
-                                                }}
-                                                onClick={() => {
-                                                    // if (cardinfoitem.iscardclickable == 'Yes') {
-                                                    //     window.open(cardinfoitem.btnlink, '_blank');
-                                                    // }
-                                                    if (cardinfoitem.btntype == 'Web Product Link' || cardinfoitem.btntype == 'App/Web Page') {
-                                                        routingcountext(cardinfoitem.btnlink, false, '');
-                                                    } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'Same Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                        // window.open(cardinfoitem.btnlink, '_target');
-                                                        routingcountext(cardinfoitem.btnlink, false, '');
-                                                    } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'New Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                        window.open(cardinfoitem.btnlink, '_blank');
-                                                    }
-                                                }}
-                                            >
-                                                {sectionproperties.imageposition == 'Top' && sectionproperties.image_width != 0 && (
-                                                    <div
-                                                        class="col-lg-12 d-flex align-items-center p-0 w-100 h-100 "
-                                                        style={{
-                                                            marginBottom: sectionproperties.image_mb + 'px',
-                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                        }}
-                                                    >
-                                                        <div
-                                                            class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '}
-                                                            style={{ justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start' }}
-                                                        >
-                                                            <Imagekitimagecomp
-                                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                style={{
-                                                                    maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                    maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                    objectFit: 'contain',
-                                                                }}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                )}
-                                                {sectionproperties.showrating == 'Show' && cardinfoitem.ratingnumber != null && (
-                                                    <div class="col-lg-12 allcentered p-0 mb-1">
-                                                        <ReactStars
-                                                            count={5}
-                                                            value={parseFloat(cardinfoitem.ratingnumber)}
-                                                            edit={false}
-                                                            size={18}
-                                                            emptyIcon={
-                                                                <i class="h-100 allcentered">
-                                                                    <GoStar style={{ color: '#ccc' }} />
-                                                                </i>
-                                                            }
-                                                            halfIcon={
-                                                                <i class="h-100 allcentered">
-                                                                    <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                                </i>
-                                                            }
-                                                            filledIcon={
-                                                                <i class="h-100 allcentered">
-                                                                    <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                                </i>
-                                                            }
-                                                            activeColor={sectionproperties.generalbtn_textColor}
-                                                        />
-                                                    </div>
-                                                )}
-                                                <div
-                                                    class="col-lg-12 d-flex p-0"
-                                                    style={{
-                                                        marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                    }}
-                                                >
-                                                    <p
-                                                        class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                        style={{
-                                                            cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                            color: cardinfoitem.text1colorfromarray,
-                                                            textWrap: 'wrap',
-                                                        }}
-                                                    >
-                                                        {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                    </p>
-                                                </div>
-                                                <div
-                                                    class="col-lg-12 d-flex p-0"
-                                                    style={{
-                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                        marginBottom: sectionproperties.slideshowText2Content_marginBottom + 'px',
-                                                    }}
-                                                >
-                                                    {sectionproperties.slideshowtext2_show && (
-                                                        <p
-                                                            class="m-0 wordbreak"
-                                                            style={{
-                                                                // color: sectionproperties.slideshowText2ContentColor,
-                                                                fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                                fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                                textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-                                                                color: cardinfoitem.text2colorfromarray,
-                                                                textWrap: 'wrap',
-                                                            }}
-                                                        >
-                                                            {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                                        </p>
-                                                    )}
-                                                </div>
-                                                {sectionproperties.imageposition == 'Bottom' && sectionproperties.image_width != 0 && (
-                                                    <div
-                                                        class="col-lg-12 d-flex align-items-center p-0"
-                                                        style={{
-                                                            marginTop: sectionproperties.image_mb + 'px',
-                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                        }}
-                                                    >
-                                                        <div class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '} style={{}}>
-                                                            <Imagekitimagecomp
-                                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                style={{
-                                                                    maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                    maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                    objectFit: 'contain',
-                                                                }}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                )}
-                                                {sectionproperties.generalbtn_show == 'Show' && cardinfoitem.iscardclickable == 'Yes' && (
-                                                    <div class={sectionproperties.justifyContentCenter == 'Centered' ? 'col-lg-12 mt-2 allcentered' : 'col-lg-12 mt-2 text-start p-0'}>
-                                                        <button
-                                                            class={`${sectionStyles.btnstyles}`}
-                                                            onClick={() => {
-                                                                if (cardinfoitem.btntype == 'Web Product Link') {
-                                                                    routingcountext(cardinfoitem.btnlink, false, '');
-                                                                } else if (
-                                                                    cardinfoitem.iscardclickable == 'Yes' &&
-                                                                    cardinfoitem.clickabletabtype == 'Same Tab' &&
-                                                                    cardinfoitem.btntype != 'Web Product Link'
-                                                                ) {
-                                                                    window.open(cardinfoitem.btnlink, '_target');
-                                                                } else if (
-                                                                    cardinfoitem.iscardclickable == 'Yes' &&
-                                                                    cardinfoitem.clickabletabtype == 'New Tab' &&
-                                                                    cardinfoitem.btntype != 'Web Product Link'
-                                                                ) {
-                                                                    window.open(cardinfoitem.btnlink, '_blank');
-                                                                } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                                    // window.open(sectionproperties.btnlink, '_target');
-                                                                    routingcountext(cardinfoitem.btnlink, false, '');
-                                                                }
-                                                            }}
-                                                        >
-                                                            {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                        </button>
-                                                    </div>
-                                                )}
-                                            </div>
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        )}
-                        {sectionproperties.view_as_slider_vertical == 'Vertical' && (
-                            <div
-                                class="row m-0 w-100 d-flex "
-                                style={{
-                                    justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                }}
-                            >
-                                {sectionproperties.flippingcards == 'No' &&
-                                    cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                        return (
-                                            <div
-                                                // class={
-                                                //     sectionproperties.numofcols == '2'
-                                                //         ? ' col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                                //           sectionproperties.numberOfColsverticalresp
-                                                //         : sectionproperties.numofcols == '3'
-                                                //         ? ' col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                                //           sectionproperties.numberOfColsverticalresp
-                                                //         : '  col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                                //           sectionproperties.numberOfColsverticalresp
-                                                // }
-                                                class={
-                                                    // sectionproperties.evencards
-                                                    authdetailsContext?.instinfo?.instid == '6762e6ec9e9f8'
-                                                        ? sectionproperties.numofcols == '2'
-                                                            ? ' h-100 h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '3'
-                                                            ? ' h-100 h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '6'
-                                                            ? ' h-100 h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : ' h-100 h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                        : sectionproperties.numofcols == '2'
-                                                        ? ' h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                          sectionproperties.numberOfColsverticalresp
-                                                        : sectionproperties.numofcols == '3'
-                                                        ? '  h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                          sectionproperties.numberOfColsverticalresp
-                                                        : sectionproperties.numofcols == '6'
-                                                        ? '  h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                          sectionproperties.numberOfColsverticalresp
-                                                        : '  h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                          sectionproperties.numberOfColsverticalresp
-                                                }
-                                                style={{
-                                                    zIndex: 2,
-
-                                                    paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                                    paddingRight: sectionproperties.marginhorizontal + 'px',
-                                                    marginBottom: sectionproperties.innersectionmarginbottom + 'px',
-                                                }}
-                                            >
-                                                <div
-                                                    // class={
-                                                    //     sectionproperties.innersectionbordertype != 'All'
-                                                    //         ? sectionStyles.cardContainer + ' row m-0 w-100 mb-auto border-md-none '
-                                                    //         : sectionStyles.cardContainer + ' row m-0 w-100 mb-auto '
-                                                    // }
-                                                    class={
-                                                        sectionproperties.innersectionbordertype != 'All'
-                                                            ? sectionStyles.cardContainer + ' h-100 h-md-auto row m-0 w-100 mb-auto border-md-none '
-                                                            : sectionStyles.cardContainer + ' h-100 h-md-auto row m-0 w-100 mb-auto '
-                                                    }
-                                                    style={{
-                                                        cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                        // background: sectionproperties.reservation_bgcolor,
-                                                        background: cardinfoitem.cardbgcolorfromarray,
-                                                        paddingTop: sectionproperties.reservation_padding_top + 'px',
-                                                        paddingBottom: sectionproperties.reservation_padding_bottom + 'px',
-                                                        paddingLeft: langdetect == 'en' ? sectionproperties.reservation_padding_left + 'px' : sectionproperties.reservation_padding_right + 'px',
-                                                        paddingRight: langdetect == 'en' ? sectionproperties.reservation_padding_right + 'px' : sectionproperties.reservation_padding_left + 'px',
-                                                        borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                                        border:
-                                                            sectionproperties.innersectionbordertype == 'All'
-                                                                ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                : cardinfoindex != cardsarray.length - 1
-                                                                ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                : '',
-                                                        // cardinfoindex != cardsarray.length - 1
-                                                        //     ? sectionproperties.innersectionbordertype == 'All'
-                                                        //         ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                        //         : ''
-                                                        //     : '',
-                                                        borderRight:
-                                                            cardinfoindex != cardsarray.length - 1
-                                                                ? sectionproperties.innersectionbordertype == 'Right'
-                                                                    ? langdetect == 'en'
-                                                                        ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                        : ''
-                                                                    : ''
-                                                                : '',
-                                                        borderLeft:
-                                                            sectionproperties.innersectionbordertype == 'Right'
-                                                                ? langdetect == 'ar'
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : ''
-                                                                : '',
-                                                        boxShadow: ' 0 0 10px ' + sectionproperties.innerSectionShadowColor,
-                                                        height: authdetailsContext?.instinfo?.contactinfo.instid == '66b4a0338cb14' ? '100%' : '',
-                                                    }}
-                                                    onClick={() => {
-                                                        // if (cardinfoitem.iscardclickable == 'Yes') {
-                                                        //     window.open(cardinfoitem.btnlink, '_blank');
-                                                        // }
-                                                        if (cardinfoitem.btntype == 'Web Product Link' || cardinfoitem.btntype == 'App/Web Page') {
-                                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'Same Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                            // window.open(cardinfoitem.btnlink, '_target');
-                                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'New Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                            window.open(cardinfoitem.btnlink, '_blank');
-                                                        }
-                                                    }}
-                                                >
-                                                    {sectionproperties.imageposition == 'Top' && sectionproperties.image_width != 0 && (
-                                                        <div
-                                                            class="col-lg-12 d-flex align-items-center p-0 w-100 h-md-100"
-                                                            // class="col-lg-12 d-flex align-items-center p-0 w-100 h-100"
-                                                            style={{
-                                                                marginBottom: sectionproperties.image_mb + 'px',
-                                                                justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                            }}
-                                                        >
-                                                            <div
-                                                                class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '}
-                                                                style={{ justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start' }}
-                                                            >
-                                                                <Imagekitimagecomp
-                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                    style={{
-                                                                        maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                        maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                        objectFit: 'contain',
-                                                                    }}
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    )}
-                                                    {sectionproperties.showrating == 'Show' && cardinfoitem.ratingnumber != null && (
-                                                        <div class="col-lg-12 allcentered p-0 mb-1">
-                                                            <ReactStars
-                                                                count={5}
-                                                                value={parseFloat(cardinfoitem.ratingnumber)}
-                                                                edit={false}
-                                                                size={18}
-                                                                emptyIcon={
-                                                                    <i class="h-100 allcentered">
-                                                                        <GoStar style={{ color: '#ccc' }} />
-                                                                    </i>
-                                                                }
-                                                                halfIcon={
-                                                                    <i class="h-100 allcentered">
-                                                                        <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                                    </i>
-                                                                }
-                                                                filledIcon={
-                                                                    <i class="h-100 allcentered">
-                                                                        <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                                    </i>
-                                                                }
-                                                                activeColor={sectionproperties.generalbtn_textColor}
-                                                            />
-                                                        </div>
-                                                    )}
-                                                    <div
-                                                        class="col-lg-12 d-flex p-0"
-                                                        style={{
-                                                            marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                        }}
-                                                    >
-                                                        <p
-                                                            class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                            style={{
-                                                                cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                                color: cardinfoitem.text1colorfromarray,
-                                                                textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-                                                            }}
-                                                        >
-                                                            {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                        </p>
-                                                    </div>
-                                                    <div
-                                                        class="col-lg-12 d-flex p-0"
-                                                        style={{
-                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                            marginBottom: sectionproperties.slideshowText2Content_marginBottom + 'px',
-                                                        }}
-                                                    >
-                                                        {sectionproperties.slideshowtext2_show && (
-                                                            <p
-                                                                class="m-0 wordbreak"
-                                                                style={{
-                                                                    // color: sectionproperties.slideshowText2ContentColor,
-                                                                    fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                                    fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                                    textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-                                                                    color: cardinfoitem.text2colorfromarray,
-                                                                }}
-                                                            >
-                                                                {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                                            </p>
-                                                        )}
-                                                    </div>
-                                                    {sectionproperties.imageposition == 'Bottom' && sectionproperties.image_width != 0 && (
-                                                        <div
-                                                            class="col-lg-12 d-flex align-items-center p-0"
-                                                            style={{
-                                                                marginTop: sectionproperties.image_mb + 'px',
-                                                                justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                            }}
-                                                        >
-                                                            <div class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '} style={{}}>
-                                                                <Imagekitimagecomp
-                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                    style={{
-                                                                        maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                        maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                        objectFit: 'contain',
-                                                                    }}
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    )}
-                                                    {sectionproperties.generalbtn_show == 'Show' && cardinfoitem.iscardclickable == 'Yes' && (
-                                                        <div class={sectionproperties.justifyContentCenter == 'Centered' ? 'col-lg-12 mt-2 allcentered' : 'col-lg-12 mt-2 text-start p-0'}>
-                                                            <button
-                                                                class={`${sectionStyles.btnstyles}`}
-                                                                onClick={() => {
-                                                                    if (cardinfoitem.btntype == 'Web Product Link') {
-                                                                        routingcountext(cardinfoitem.btnlink, false, '');
-                                                                    } else if (
-                                                                        cardinfoitem.iscardclickable == 'Yes' &&
-                                                                        cardinfoitem.clickabletabtype == 'Same Tab' &&
-                                                                        cardinfoitem.btntype != 'Web Product Link'
-                                                                    ) {
-                                                                        window.open(cardinfoitem.btnlink, '_target');
-                                                                    } else if (
-                                                                        cardinfoitem.iscardclickable == 'Yes' &&
-                                                                        cardinfoitem.clickabletabtype == 'New Tab' &&
-                                                                        cardinfoitem.btntype != 'Web Product Link'
-                                                                    ) {
-                                                                        window.open(cardinfoitem.btnlink, '_blank');
-                                                                    } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                                        // window.open(sectionproperties.btnlink, '_target');
-                                                                        routingcountext(cardinfoitem.btnlink, false, '');
-                                                                    }
-                                                                }}
-                                                            >
-                                                                {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                            </button>
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </div>
-                                        );
-                                    })}
-                                {sectionproperties.flippingcards == 'Yes' && sectionproperties.showcountdown != 'Yes' && (
-                                    <div class="row m-0 w-100 d-flex justify-content-center">
-                                        {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                            // alert(JSON.stringify(cardsarray[7]));
-                                            return (
-                                                <div
-                                                    class={
-                                                        cardinfoitem?.cardobj_descripen == undefined
-                                                            ? sectionproperties.numofcols == '2'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : sectionproperties.numofcols == '3'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : sectionproperties.numofcols == '6'
-                                                                ? ' flip-card flip-cardnonhover h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                                : ' flip-card flip-cardnonhover h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                                  sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '2'
-                                                            ? ' flip-card h-md-auto col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '3'
-                                                            ? ' flip-card h-md-auto col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : sectionproperties.numofcols == '6'
-                                                            ? ' flip-card h-md-auto col-lg-2 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                            : ' flip-card h-md-auto col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start col-sm-' +
-                                                              sectionproperties.numberOfColsverticalresp
-                                                    }
-                                                    style={{
-                                                        zIndex: 2,
-                                                        paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                                        paddingRight: sectionproperties.marginhorizontal + 'px',
-                                                        marginBottom: sectionproperties.innersectionmarginbottom + 'px',
-                                                        cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : '',
-                                                    }}
-                                                    onClick={() => {
-                                                        if (cardinfoitem.iscardclickable == 'Yes') {
-                                                            if (cardinfoitem.btntype == 'Web Product Link') {
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'Same Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_self');
-                                                            } else if (
-                                                                cardinfoitem.iscardclickable == 'Yes' &&
-                                                                cardinfoitem.clickabletabtype == 'New Tab' &&
-                                                                cardinfoitem.btntype != 'Web Product Link'
-                                                            ) {
-                                                                window.open(cardinfoitem.btnlink, '_blank');
-                                                            } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                                // window.open(sectionproperties.btnlink, '_target');
-                                                                routingcountext(cardinfoitem.btnlink, false, '');
-                                                            }
-                                                        }
-                                                    }}
-                                                >
-                                                    <div
-                                                        class="flip-card-inner"
-                                                        style={{
-                                                            background: cardinfoitem.cardbgcolorfromarray,
-                                                            borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                                            border:
-                                                                sectionproperties.innersectionbordertype == 'All'
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : cardinfoindex != cardsarray.length - 1
-                                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                                    : '',
-                                                        }}
-                                                    >
-                                                        <div class={cardinfoitem.cardobj_descripen != '' ? 'flip-card-front d-flex align-items-center' : 'd-flex align-items-center'}>
-                                                            <div class="row m-0 w-100">
-                                                                <div
-                                                                    class="col-lg-12 d-flex align-items-center p-0"
-                                                                    style={{
-                                                                        marginBottom: sectionproperties.image_mb + 'px',
-                                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                    }}
-                                                                >
-                                                                    <div
-                                                                        class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '}
-                                                                        style={{
-                                                                            background: 'transparent',
-                                                                        }}
-                                                                    >
-                                                                        <Imagekitimagecomp
-                                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                            path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                            style={{
-                                                                                maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                                                maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                                                objectFit: 'contain',
-                                                                            }}
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                                <div
-                                                                    class="col-lg-12 d-flex p-0"
-                                                                    style={{
-                                                                        marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                                        justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                    }}
-                                                                >
-                                                                    <p
-                                                                        class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                                        style={{
-                                                                            cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                                            color: cardinfoitem.text1colorfromarray,
-                                                                        }}
-                                                                    >
-                                                                        {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                                    </p>
-                                                                </div>
-
-                                                                {/*
-                                                    {sectionproperties.generalbtn_show == 'Show' && cardinfoitem.iscardclickable == 'Yes' && (
-                                                        <div class={sectionproperties.justifyContentCenter == 'Centered' ? 'col-lg-12 mt-2 allcentered' : 'col-lg-12 mt-2 text-start p-0'}>
-                                                            <button class={`${sectionStyles.btnstyles}`}>
-                                                                {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                            </button>
-                                                        </div>
-                                                    )}
-                                                  */}
-                                                            </div>
-                                                        </div>
-                                                        {cardinfoitem.cardobj_descripen != '' && (
-                                                            <div class="flip-card-back allcentered">
-                                                                <div class="row m-0 w-100 allcentered">
-                                                                    {sectionproperties.showimagewhenflip == 'Show' && (
-                                                                        <div
-                                                                            class="col-lg-12 d-flex align-items-center p-0"
-                                                                            style={{
-                                                                                marginBottom: sectionproperties.image_mb + 'px',
-                                                                                justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                            }}
-                                                                        >
-                                                                            <div
-                                                                                class={' d-flex align-items-center  '}
-                                                                                style={{
-                                                                                    width: '30%',
-                                                                                    height: '30%',
-                                                                                    justifyContent: sectionproperties.iconcontainerheight == '0' ? 'start' : 'center',
-                                                                                }}
-                                                                            >
-                                                                                <Imagekitimagecomp
-                                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                                    style={{
-                                                                                        maxHeight: '100%',
-                                                                                        maxWidth: '100%',
-                                                                                        objectFit: 'contain',
-                                                                                    }}
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    )}
-                                                                    <div
-                                                                        class="col-lg-12 d-flex p-0"
-                                                                        style={{
-                                                                            marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                        }}
-                                                                    >
-                                                                        <p
-                                                                            class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                                                            style={{
-                                                                                cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                                                                color: cardinfoitem.text1colorfromarray,
-                                                                            }}
-                                                                        >
-                                                                            {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                                                        </p>
-                                                                    </div>
-                                                                    <div
-                                                                        class="col-lg-12 d-flex p-0"
-                                                                        style={{
-                                                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                                                        }}
-                                                                    >
-                                                                        {sectionproperties.slideshowtext2_show && (
-                                                                            <p
-                                                                                class="m-0 wordbreak"
-                                                                                style={{
-                                                                                    // color: sectionproperties.slideshowText2ContentColor,
-                                                                                    fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                                                    fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                                                    textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-                                                                                    color: cardinfoitem.text2colorfromarray,
-                                                                                }}
-                                                                            >
-                                                                                {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                                                            </p>
-                                                                        )}
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-export default ServicesectionCenteredcards;