@font-face {
    font-family: 'notokufiarabic-regular';
    src: url('../fonts/notokufiarabic-regular.ttf') format('truetype');
    font-display: swap; /* PERFORMANCE: Prevent FOIT (Flash of Invisible Text) */
}

/* PERFORMANCE: Screen Reader Only - SEO friendly */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* PERFORMANCE: Note - font-display must be added to each @font-face declaration */
/* This is handled by FPD configuration and JavaScript injection */

body {
    font-size: 12px;
    font-family: notokufiarabic-regular;
}

    body > .container {
        max-width: 1200px;
        margin: auto;
        padding: 80px 10px;
    }

.demo-btn {
    border-radius: 4px;
    background: #EBEBEB;
    color: #989898;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    display: block;
    cursor: pointer;
}

    .demo-btn:hover {
        opacity: 0.8;
    }


    /*
.fpd-container {
    width: 100vw !important;
    height: 80vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1000;
}


.fpd-main-wrapper {
    width: 100% !important;
    height: 100% !important;
}


.fpd-product-stage {
    width: 100% !important;
    height: 100% !important;
}

.fpd-element-toolbar {
    width: 300px !important;
    max-width: 300px !important;
    height: auto !important;
    max-height: 80vh !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    transform: none !important;
    overflow: auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    z-index: 9999999 !important;
}


    .fpd-element-toolbar .fpd-tools-group,
    .fpd-element-toolbar .fpd-panel-tabs,
    .fpd-element-toolbar .fpd-panel-tabs > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
    }


    .fpd-element-toolbar * {
        transform: none !important;
    }

    
    .fpd-element-toolbar .fpd-tools-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: flex-start !important;
    }

  
    .fpd-element-toolbar .fpd-tool-button {
        flex: 0 0 auto !important;
        position: relative !important;
    }

.fpd-sub-panel {
    margin-top: 38px;
}
fpd-element-toolbar .fpd-close, fpd-element-toolbar .fpd-close-sub-panel {
    display: block;
    margin-top: 30px;
}
    fpd-element-toolbar .fpd-close-sub-panel > .fpd-label {
        font-size: 12px;
    }
fpd-element-toolbar.fpd-show {
    display: flex !important;
    width: 600px !important;
}

*/

img {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
}

.h-30 {
    height: 30% !important;
}

.w-30 {
    width: 30% !important;
}

.img-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .img-box div {
        height: 20rem;
    }
/* body > fpd-element-toolbar.fpd-layout-small.fpd-container.fpd-smart.fpd-type-image.fpd-show*/
/* body > fpd-element-toolbar > div.fpd-tools-nav.fpd-scroll-area > div.fpd-secondary-tools.fpd-scroll-area > div.fpd-tool-position.fpd-active*/
   body > fpd-element-toolbar.fpd-layout-small.fpd-container.fpd-smart.fpd-type-image.fpd-show {
    /*  display: none !important;*/
}

    body > fpd-element-toolbar.fpd-layout-small.fpd-container.fpd-smart.fpd-type-image.fpd-show:not(:has(> div.fpd-tools-nav.fpd-scroll-area > div.fpd-secondary-tools.fpd-scroll-area > div.fpd-tool-position.fpd-active)) {
        /* display: none !important;*/
    }