@import "/public/__Global/Styles/global.css";

/*root*/
:root {
    --base-color: #3AAFA9;
    --box-color: #F784AC;
    --back-color: #F0F0F0;
    --div-color: #2F2F2F;

    --pop-color: #1f96fc;
    --bilt-color: #21aef1;
    --boarder-color: #033541;
    --select-color: #ffdd00;
    --hover-color: #ffa200;

    --green-color: #3cb878;
    --snow-color: #f8f8f8;
    --red-color: #cd0303;
    --yellow-color: #ffcc00;
    --gold-color: gold;
}

::-webkit-scrollbar-thumb {
    background: var(--box-color) !important;
}

html {
    position: fixed;
    direction: rtl;
    display: block;
    clear: both;
    height: 100vH;
    width: 100vW;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    z-index: 0;
    /*background: var(--back-color);*/
    background: transparent;
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

body {
    position: relative;
    direction: rtl;
    display: block;
    clear: both;
    height: 100%;
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
    overflow-y: auto;
    /*background: var(--back-color);*/
    background: transparent;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icon {
    position: absolute;
    margin: auto;
    display: block;
    color: var(--box-color);
}

.clear {
    position: relative;
    display: block;
    height: 7px;
    clear: both;
}


i svg, i img {
    width: 100%;
    height: 100%;
    display: block;
    clear: both;
    cursor: pointer;
    position: relative;
}

header {
    position: relative;
    margin: auto;
    display: block;
    width: 100vW;
    height: 100vH;
    clear: both;
    background: #181818;
    z-index: 0;
    overflow: hidden;
}

hline {
    position: fixed;
    margin: auto;
    display: block;
    width: 100%;
    height: 64px;
    background: var(--base-color);
    overflow: hidden;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
}

hline h1 {
    position: relative;
    margin: auto;
    display: block;
    padding: 20px 10px;
    font-size: 16px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 500;
    vertical-align: baseline;
    text-align: center;
    font-weight: 300;
    height: calc(100% - 40px);
    color: #181818cc;
}

hline span {
    position: absolute;
    margin: auto;
    clear: both;
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-size: 13px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 900;
    vertical-align: baseline;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid #181818cc;
    border-radius: 5px;
    cursor: pointer;
}

hline span:nth-child(2) {
    top: 20%;
    right: 3%;
    z-index: 1;
}

hline span:nth-child(3) {
    top: 20%;
    left: 3%;
    z-index: 1;
}

header .image {
    position: relative;
    margin: auto;
    width: 100%;
    height: calc(100% - 64px);
    display: block;
    z-index: 0;
    top: 64px;
}

header .image h1 {
    position: absolute;
    margin: auto;
    padding: 2vH 5vW;
    color: #f8f8f8;
    top: 15%;
    left: 5%;
    width: 40%;
    height: 15%;
    border-radius: 15px;
    overflow: hidden;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 700;
    font-size: min(23pt, max(3vW, 3vH));
}

header .image h2 {
    position: absolute;
    margin: auto;
    padding: 2vH 5vW;
    font-size: min(23px, max(2.5vW, 2.5vH));
    font-family: 'stedad', 'lato1';
    font-weight: 100;
    color: #f8f8f8;
    top: 35%;
    left: 5%;
    width: 38%;
    height: 25%;
    border-radius: 15px;
    overflow: hidden;
    text-align: justify;
}

header .image h1 b {
    background: var(--base-color);
    padding: 0px 7px;
    display: inline;
    text-align: justify;
}

header .image span {
    position: absolute;
    margin: auto;
    clear: both;
    display: block;
    padding: 6px 12px;
    text-align: center;
    font-size: 15px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 500;
    vertical-align: baseline;
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 1);
    border-radius: 5px;
    cursor: pointer;
    top: 70%;
    left: 10%;
    width: calc(28% - 24px + 10vW);
}

header .image logo {
    position: absolute;
    margin: auto;
    display: block;
    width: min(100px, max(10vW, 10vH));
    height: auto;
    overflow: hidden;
    left: 2%;
    top: 2%;
    z-index: 1;
}

header .image logo img {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: auto;
}

header .image i.icon.fui-arrow-right {
    transform: rotate(90deg);
    color: var(--back-color);
    width: 30px;
    font-size: 30px;
    height: 30px;
    right: 0;
    left: 0;
    cursor: pointer;
    bottom: 2%;
    opacity: 0.6;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

header .image i.icon.fui-arrow-right:hover {
    opacity: 1;
}

header .image .backimg {
    position: absolute;
    margin: auto;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-size: auto;
}


.popup_box {
    position: fixed;
    margin: auto;
    width: 100vW;
    height: 100vH;
    display: block;
    clear: both;
    z-index: 500;
    background: #3aafa963;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.popup_box object.box_show_link {
    position: relative;
    display: block;
    width: 97%;
    height: auto;
    max-height: calc(97vH - 60px);
    min-height: 200px;
    max-width: 1280px;
    min-width: 200px;
    top: 60px;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0;
    border-radius: 10px;
    margin: auto auto;
    opacity: 1;
    overflow: hidden !important;
}

/*.popup_box object.box_show_link .close {*/
/*    display: none;*/
/*    visibility: hidden;*/
/*}*/
.popup_box object.box_show_link .close {
    position: relative !important;
    background: transparent;
    display: block;
    margin: 0px auto auto 0px;
    font-size: 17px;
    font-weight: 100;
    padding: 15px 20px;
    border-radius: 3px 3px 0px 0px;
    text-align: left;
    direction: rtl;
    color: #f3f3f3;
    z-index: 20;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.popup_box object.box_show_link .close:before {
    cursor: pointer;
}

.popup_box object.box_show_link .show_responsive {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: calc(96vH - 50px);
    min-height: calc(200px - 50px);
    margin: auto;
    display: block;
    direction: rtl;
    overflow: auto;
    padding-bottom: 5vH;
}

.popup_box object.box_show_link .show_responsive iframe {
    position: relative;
    overflow: hidden;
    display: block;
    clear: both;
    width: calc(100%);
    margin: auto;
    height: calc(100vH);
    z-index: 0;
    border-radius: 5px;
}

zline {
    position: fixed;
    margin: auto;
    display: none;
    width: 100%;
    height: 64px;
    background: #2f2f2fcc;
    overflow: hidden;
    z-index: 95;
    top: 64px;
    right: 0;
    left: 0;
}

zline logo {
    position: absolute;
    margin: auto;
    display: block;
    width: min(120px, max(12vW, 12vH));
    height: auto;
    overflow: hidden;
    left: 2%;
    top: 10%;
    z-index: 1;
}

zline logo img {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    max-width: 54px;
    height: auto;
}

.video_box {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100vW;
    height: auto;
    min-height: 190px;
    background: var(--base-color);
    padding: 2%;
    text-align: center;
    justify-content: center;
}

.video_box video {
    position: relative;
    margin: auto;
    width: auto;
    max-width: min(90%, max(1000px, 60vW));
    max-height: min(90%, max(1000px, 60vH));
    display: block;
    clear: both;
    background: #181818;
    border-radius: 15px;
    overflow: hidden;
}

.gride_box {
    position: relative;
    margin: -10px auto;
    display: block;
    clear: both;
    width: 100vW;
    background: var(--back-color);
}

.gride_box gride {
    position: relative;
    margin: 10px auto;
    padding: 30px 15px;
    display: grid;
    max-width: 1100px;
    border-bottom: 1px solid #1a191926;
    border-radius: 5px;
}

.gride_box gride[role="right"] {
    grid-template-columns: 40% 60%;
}

.gride_box gride[role="left"] {
    grid-template-columns: 60% 40%;
}

.gride_box gride lable {
    position: relative;
    margin: auto 5%;
    display: block;
    width: 90%;
    height: auto;
    max-height: 100%;
    border-radius: 10px;

}

.gride_box gride lable ul, .gride_box gride lable ol {
    margin: auto;
    width: 100%;
    height: auto;
}

.gride_box gride lable ul {
    list-style-type: disc;
}

.gride_box gride lable ol {
    list-style-type: decimal;
}


.gride_box gride lable ul li, .gride_box gride lable ol li {
    display: list-item;
    width: calc(100% - 4% - 20px);
    height: auto;
    clear: both;
    font-family: 'stedad', 'titr';
    font-size: 20px;
    margin: 5px auto;
    padding: 5px 5px;
}


.gride_box gride lable img.inliner {
    position: relative;
    display: inline-block;
    margin: 2px;
    width: calc(33% - 12px);
    max-height: 100%;
    height: auto;
    border-radius: 10px;
    background: #f8f8f8;
    border: 0.5px solid #181818cc;
    background-color: rgba(255, 255, 255, 1);
}

.gride_box gride lable h1 {
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 600;
    vertical-align: baseline;
    font-size: 30px;
    position: relative;
    margin: auto;
    display: block;
    padding: 5px;
    font-weight: bolder;
}


.box_bod {
    position: relative;
    margin: auto;
    display: block;
    cursor: pointer;
    border-radius: 5px;
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: gelatine 1.2s 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box_bod:hover,
.box_bod:focus,
.box_bod:active,
.box_bod:visited {
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: gelatine 0.5s 1;
}

.box_bod i {
    position: relative !important;
    width: 100%;
    height: auto;
    min-height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box_bod:nth-child(1), .box_bod:nth-child(3) {
    right: 30vW;
}

.box_bod:nth-child(2) {
    left: 30vW;
}

.box_bod i svg * {
    fill: #176395;
    stroke: #101aff;
}

.box_bod:nth-child(1) i svg * {
    fill: #292b2d;
    stroke: #151313;
}

.box_bod:nth-child(2) i svg * {
    fill: #bc143d;
    stroke: #950606;
}

.box_bod:nth-child(3) i svg * {
    fill: #2584e8;
    stroke: #013a6c;
}


.box_bod span {
    position: absolute;
    display: block;
    padding: 15px 20px;
    margin: auto;
    font-size: 18px;
    font-family: 'stedad', 'titr';
    font-weight: 700;
    border-radius: 15px;
    outline: none;
    text-decoration: none;
    color: #f8f8f8;
    background: rgb(0 53 171 / 90%);
    box-shadow: 0 6px 30px rgb(0 0 0 / 23%);
    border: 4px dashed #000000db;
    cursor: pointer;
    width: min(160px, 30vW);
    text-align: center;
    height: 23px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box_bod:nth-child(1) span, .box_bod:nth-child(3) span {
    left: calc(min(110px, 30vW) + 30%);
    top: 0;
    bottom: 0;
}

.box_bod:nth-child(2) span {
    right: calc(min(110px, 30vW) + 30%);
    top: 0;
    bottom: 0;
}


.owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden
}

.owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    width: 100% !important;
}

.owl-item, .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-item img {
    display: block;
    margin: 0 auto;
}

.owl-nav.disabled {
    display: none
}

.owl-dots {
    position: absolute;
    margin: auto;
    display: block;
    right: 0;
    left: 0;
    bottom: 0px;
    text-align: center;
    justify-content: center;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.owl-dot {
    position: relative;
    margin: auto;
    display: inline-block;
    right: 0;
    left: 0;
    text-align: center;
    padding: 0px;
    justify-content: center;
}

.owl-dot span {
    margin: 5px;
    position: relative;
    display: block;
    width: 3vW;
    height: 1.2vH;
    background: rgb(169 184 240 / 76%);
    border-radius: 1.2vH;
}

.owl-dot.active span {
    background: #24bfe9;
}

.no-js, .owl-loaded {
    visibility: visible;
    opacity: 1;
}

.owl-dot, .owl-nav .owl-next, .owl-nav .owl-prev {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-loading {
    opacity: 0;
    display: block
}

.owl-hidden {
    opacity: 0
}

.owl-refresh .owl-item {
    visibility: hidden
}

.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-grab {
    cursor: move;
    cursor: grab;
}

.owl-rtl {
    direction: rtl;
}

.owl-rtl .owl-item {
    float: right;
    min-width: 130px;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.owl-animated-in {
    z-index: 0
}

.owl-animated-out {
    z-index: 1
}

.fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease;
}

.owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-video-playing .owl-video-play-icon, .owl-video-playing .owl-video-tn {
    display: none
}

.owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease;
}

.owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

.owl-buttons.disabled {
    display: none !important;
}

.owl-item .owl-lazy {
    opacity: 1
}

.grid {
    display: grid;
    margin: auto;
    position: relative;
    height: auto;
    grid-template-columns: auto;
}

.grid lable {
    position: relative;
    display: block;
    overflow: hidden;
    width: calc(100% - 20px - 4%);
    min-height: 200px;
    height: auto !important;
    min-width: unset !important;
    background: transparent;
    border: transparent;
    cursor: pointer;
    z-index: 5;
    border-radius: 10px;
}

.grid lable .box_bod {
    right: 0px !important;
    left: 0px !important;
}

.grid lable .box_bod {
    right: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: auto !important;
    background: rgb(6 6 6 / 10%) !important;
    box-shadow: inset 0px 0px 15px rgb(38 126 235 / 50%), inset 0px 0px 30vW rgb(147 190 255 / 50%) !important;
    margin: auto;
}

.grid lable .box_bod i img {
    min-height: max(100%, 200px) !important;
    height: auto !important;
}

footer {
    margin: auto;
    position: relative;
    display: block;
    clear: both;
    background: var(--back-color);
    width: 100vW;
    overflow: hidden;
    justify-content: center;
    text-align: center;
    padding: 2% 0px;
}

footer img.footerimg {
    position: relative;
    width: min(400px, 90%);
    text-align: center;
    display: block;
    margin: auto;
}

footer h3 {
    position: relative;
    max-width: 400px;
    min-width: min(400px, 90%);
    text-align: center;
    display: block;
    font-size: 16px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 900;
    vertical-align: baseline;
    margin: 1% auto !important;
}

footer .iconbare {
    position: relative;
    max-width: 100px;
    min-width: min(100px, 90%);
    text-align: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    font-size: 16px;
    margin: 1% auto !important;
}

footer .iconbare i {
    position: relative;
    color: var(--div-color);
    width: 25px;
    height: 25px;
    font-size: 26px;
    margin: auto;
    padding: 5px;
    cursor: pointer;
}

.documentbox {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100vW;
    height: auto;
    min-height: 250px;
    background: var(--base-color);
}

.documentbox h1 {
    position: relative;
    margin: auto;
    padding: 20px;
    text-align: center;
    justify-content: center;
    font-size: 28px;
    font-family: 'stedad', 'naz_900';
    max-width: 1000px;
}

.documentbox .threebox {
    position: relative;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 2% 0;
    max-width: 1000px;
    width: 90%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    border-bottom: 1px solid #f8f8f8b3;
}

.documentbox .threebox lable {
    position: relative;
    margin: auto;
    padding: 1%;
    width: 98%;
    height: 98%;
    display: block;
}

.documentbox .threebox lable img {
    position: relative;
    margin: auto;
    display: block;
    border-radius: 5px;
    clear: both;
    max-width: 100%;
    max-height: 100%;
    min-height: 100px;
    overflow: hidden;
}

.documentbox .threebox lable h2 {
    position: relative;
    margin: 1% auto;
    width: 90%;
    height: auto;
    padding: 1%;
    font-size: 18px;
    font-family: 'stedad', 'sans_b';
}

.documentbox .threebox lable h3 {
    position: relative;
    margin: 1% auto;
    width: 90%;
    height: auto;
    padding: 1%;
    font-size: 16px;
    font-family: 'stedad', math;
    font-weight: 100 !important;
}

.row {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    text-align: center;
    justify-content: center;
    background: var(--back-color);
}

.row h1 {
    position: relative;
    margin: auto;
    padding: 20px;
    text-align: center;
    justify-content: center;
    font-family: 'stedad', Lora, serif;
    font-size: 24pt;
    max-width: 1000px;
}

.forebox {
    position: relative;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 2% 0;
    max-width: 1000px;
    width: 90%;
    display: grid;
    grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
    border-bottom: 1px solid #f8f8f8b3;
    background: var(--back-color);
}

.forebox lable {
    position: relative;
    margin: auto;
    padding: 1% 5%;
    width: 90%;
    height: 98%;
    display: block;
}

.forebox lable picture {
    position: relative;
    margin: auto;
    display: block;
    border-radius: 15px;
    clear: both;
    height: 12vW;
    width: 12vW;
    overflow: hidden;
}

.forebox lable h2 {
    position: relative;
    margin: 1% auto;
    width: 90%;
    height: auto;
    padding: 1%;
    font-size: 18px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 700;
    vertical-align: baseline;
}

.forebox lable h3 {
    position: relative;
    margin: 1% auto;
    width: 90%;
    height: auto;
    padding: 1%;
    font-size: 16px;
    font-family: 'stedad', math;
    font-weight: 100 !important;
}


.documentbox .towbox {
    position: relative;
    text-align: center;
    justify-content: center;
    margin: auto;
    padding: 2% 0;
    max-width: 1000px;
    width: 90%;
    display: grid;
    grid-template-columns: 30% 70%;
}

.documentbox .towbox lable {
    position: relative;
    margin: auto;
    padding: 1%;
    width: 98%;
    height: 98%;
    display: block;
}

.documentbox .towbox lable img {
    position: relative;
    margin: auto;
    display: block;
    border-radius: 5px;
    clear: both;
    max-width: 100%;
    max-height: 100%;
}

.documentbox .towbox lable h3 {
    position: relative;
    display: block;
    margin: auto;
    font-size: 25px;
    font-family: 'stedad', 'Lato_2';
    padding: 5px;
}

.documentbox .towbox lable p {
    position: relative;
    display: block;
    margin: auto;
    font-size: 20px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 300;
    vertical-align: baseline;
    padding: 5px;
}

.documentbox .towbox lable b {
    position: relative;
    display: block;
    margin: auto;
    font-size: 18px;
    font-family: 'stedad', 'sans';
    padding: 5px;
}

.documentbox .towbox lable small {
    position: relative;
    display: block;
    margin: auto;
    font-size: 25px;
    font-family: 'stedad', 'titr';
    padding: 5px;
}


form, .form {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
}

form label, .form label {
    position: relative;
    display: block;
    margin: 20px 10px;
    clear: both;
}

form label input, .form label input, textarea {
    position: relative;
    margin: auto;
    display: block;
    padding: 15px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 700;
    vertical-align: baseline;
    direction: rtl;
    color: var(--box-color);
    background: #f8f8f8;
    border: unset;
    border-radius: 5px;
    width: calc(100% - 30px);
    max-width: 500px;
}

form label input::placeholder, .form label input::placeholder, textarea::placeholder {
    color: #3f3d3d;
}

form .submiter {
    position: relative;
    display: block;
    clear: both;
    margin: 70px auto auto auto;
    direction: rtl;
    padding: 15px 0px;
    max-width: 500px;
    text-align: left;
}

form .submiter p {
    position: relative;
    display: inline-block;
    color: var(--back-color);
    font-family: 'stedad', 'sans';
    font-size: 15px;
    margin: 5px 10px;
    cursor: pointer;
}

form .submiter span.in_close {
    width: 45px;
    height: 45px;
    display: inline-block;
    position: relative;
    margin: 5px 10px;
    top: 20px;
    cursor: pointer;
}

form .submiter span.in_close svg {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

form .submiter input[type="submit"], .submit {
    position: relative;
    margin: auto;
    display: inline-block;
    padding: 15px 30px;
    font-family: 'stedad', 'sans';
    direction: rtl;
    color: var(--box-color) !important;
    background: #f8f8f8;
    border: unset;
    border-radius: 5px;
    cursor: pointer;
    top: -5px;
}

.seter {
    position: absolute;
    margin: auto;
    clear: both;
    display: block;
    z-index: 300;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'stedad', 'sans_b';
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid #181818cc;
    border-radius: 5px;
    cursor: pointer;
    right: 0;
    width: 50px;
    height: 28px;
    box-shadow: 0px 0px 10px #6aabb1b5;
}

._audio, ._video, ._img, ._file, ._embed {
    max-width: 100% !important;
    clear: both !important;
    display: block !important;
    margin: auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    direction: rtl;
    text-align: center;
    max-height: 100%;
}

._embed {
    min-height: 210px;
    width: 80%;
}

application {
    position: relative;
    margin: auto auto auto;
    display: block;
    clear: both;
    background: #f8f8f8;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    overflow-y: auto;
}

.lodheart {
    position: absolute;
    margin: auto;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    background: #f8f8f8;
}


.heart {
    position: absolute;
    margin: auto;
    display: block;
    width: max(35vH, min(30vW, 100px));
    height: max(35vH, min(30vW, 100px));
    max-width: 80%;
    max-height: 80%;
    top: 10%;
    right: 0;
    left: 0;
}

.heart i {
    width: 100%;
    height: 100%;
    font-size: 20vW;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    z-index: 3;
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.heart span.back_heart {
    position: absolute;
    width: 97.5%;
    right: 1%;
    bottom: 2%;
    left: 0%;
    z-index: 2;
    opacity: 0.5;
    background: #19817c;
    margin: auto;
    display: block;
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.heart span.back_heart[role="1"] {
    height: 97.5%;
    z-index: 2;
    opacity: 0.5;
}

.heart span.back_heart[role="2"] {
    height: 1%;
    z-index: 1;
    opacity: 1;
}

.lodheart h1 {
    position: absolute;
    margin: auto;
    display: block;
    width: max(38vH, min(35vW, 150px));
    height: 35px;
    max-width: 95%;
    max-height: 35px;
    right: 0;
    left: 0;
    font-size: min(40px, max(4vW, 4vH));
    font-family: 'stedad', 'pines_b';
    color: #19817c;
    top: calc(20% + max(35vH, min(30vW, 100px)));
    text-align: center;
}

.startbox {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    clear: both;
    background: #19817c;
}

.startbox .heart {
    width: max(23vH, min(13vW, 85px));
    height: max(23vH, min(13vW, 85px));
    max-width: 60%;
    max-height: 60%;
    top: 5%;
}

.startbox .heart span.back_heart {
    background: #f8f8f8;
    opacity: 1;
}

.startbox .title_h {
    position: absolute;
    margin: auto;
    display: block;
    width: max(23vH, min(13vW, 85px));
    height: 35px;
    max-width: 95%;
    max-height: 35px;
    right: 0;
    left: 0;
    font-size: min(60px, max(8vW, 8vH));
    font-family: 'stedad', 'pines';
    color: #f8f8f8;
    top: calc(18% + max(13vH, min(3vW, 75px)));
    text-align: center;
}

.startbox .text_s {
    position: absolute;
    margin: auto;
    display: block;
    width: max(23vH, min(13vW, 75px));
    height: 80px;
    max-width: 95%;
    max-height: 100px;
    right: 0;
    left: 0;
    font-size: min(24px, max(2.8vW, 2.8vH));
    font-family: 'stedad', 'pines_b';
    color: rgb(248 248 248 / 73%);
    top: calc(36% + max(7vH, min(0.7vW, 65px)));
    text-align: center;
}

.startbox h1 {
    position: absolute;
    margin: auto;
    display: block;
    width: max(50vH, min(45vW, 200px));
    height: 31px;
    max-width: 95%;
    max-height: 31px;
    right: 0;
    left: 0;
    font-size: min(30px, max(5vW, 5vH));
    font-family: 'stedad', 'pines_b';
    font-weight: 900;
    color: #f8f8f8;
    top: calc(26% + max(13vH, min(3vW, 75px)) + 80px + 40px);
    text-align: center;
}

.startbox h3 {
    position: absolute;
    margin: auto;
    display: block;
    width: max(50vH, min(45vW, 200px));
    height: 26px;
    max-width: 95%;
    max-height: 26px;
    right: 0;
    left: 0;
    font-size: min(25px, max(4vW, 4vH));
    font-family: 'stedad', 'muse';
    color: rgb(248 248 248 / 87%);
    top: calc(28% + max(13vH, min(3vW, 75px)) + 80px + 40px + 40px);
    text-align: center;
}

.startbox .btn_but {
    position: absolute;
    margin: auto;
    display: block;
    padding: 10px 15px;
    background: #f8f8f8;
    font-family: 'stedad', 'naz_900';
    color: #19817c;
    border-radius: 10px;
    width: 120px;
    cursor: pointer;
    right: 0;
    left: 0;
    bottom: 10%;
    z-index: 5;
    text-align: center;
}

form#strater, form#finisher {
    max-width: 90%;
    width: 500px;
}

p.tr {
    position: relative;
    margin: 10px auto;
    font-family: 'stedad', 'muse';
    font-size: 19px;
    text-align: justify;
    direction: rtl;
}

form#strater input[type="text"], form#finisher input[type="text"], form#finisher input[type="email"] {
    border: 2px solid #181818;
    direction: rtl;
    color: #353535;
}

form#strater textarea, form#finisher textarea {
    position: relative;
    margin: auto;
    display: block;
    padding: 15px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 700;
    vertical-align: baseline;
    direction: rtl;
    color: #353535;
    background: #f8f8f8;
    border: 2px solid #181818;
    border-radius: 5px;
    width: calc(100% - 30px);
    max-width: 500px;
    min-height: 15vH;
    resize: vertical;
    max-height: 25vH;
}

form#strater input[type="text"]::placeholder, form#strater textarea::placeholder, form#finisher input[type="text"]::placeholder, form#finisher input[type="email"]::placeholder, form#finisher textarea::placeholder {
    color: rgba(53, 53, 53, 0.6);
    text-align: left;
}


form#strater .submiter, form#finisher .submiter {
    text-align: center;
}

form#strater input[type="submit"], form#finisher input[type="submit"] {
    color: #f8f8f8 !important;
    background: #3aafa9 !important;
    font-family: 'stedad', 'pines_b' !important;
    font-size: 20px !important;
}


.menofot {
    display: block;
    margin: auto;
    cursor: pointer;
    border-radius: 7px;
}

.menofot .menubar {
    position: relative;
    box-sizing: border-box;
    color: var(--base-color);
    transition: 0.7s cubic-bezier(0.53, 0, 0.15, 1.3);
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.menofot .containerz {
    position: absolute;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top: 0px;
    bottom: 0;
    display: block;
    right: 0;
    left: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}

.menofot .toggle {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
}

.menofot .toggle:before {
    top: -14px !important;
}

.menofot .toggle:after {
    top: 15px !important;
}

.menofot .toggle:after, .toggle:before, span#line_3 {
    content: '';
    cursor: pointer;
    background: #f8f8f8;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    -webkit-transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    -moz-transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    width: 100%;
    height: 3px;
    border-radius: 3px;
}

.menofot .toggle.closer:before {
    transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    top: 0 !important;
}

.menofot .toggle.closer:after {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    top: 0 !important;
}


.app_header {
    position: relative;
    margin: auto auto 2% auto;
    display: block;
    background: #2f8d88;
    padding: 10px;
    height: 50px;
    width: 100%;
    z-index: 12;
}

.app_header .menofot {
    bottom: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 35px !important;
    height: 35px !important;
    right: 10% !important;
}

.app_header .menofot .menubar {
    width: 35px !important;
    height: 35px !important;
}

.app_header .menofot .toggle {
    height: 35px !important;
    width: 35px !important;
}


.app_header .menofot .toggle:after, .toggle:before, span#line_3 {
    background: #f8f8f8 !important;
    height: 5px !important;
    border-radius: 6px !important;
}

.app_header .menofot .toggle:before {
    top: -20px !important;
}

.app_header .menofot .toggle:after {
    top: 20px !important;
}

.app_header .menofot .toggle.closer:before {
    transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    top: 0px !important;
}

.app_header .menofot .toggle.closer:after {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    top: 0px !important;
}


.app_header img.h_t {
    position: relative;
    text-align: center;
    margin: auto;
    clear: both;
    display: block;
    max-width: 90%;
    max-height: 100%;
}

h1.tetr_bh {
    position: relative;
    margin: auto;
    display: block;
    padding: 15px;
    font-family: 'stedad', 'muse';
    color: #2f8d88;
    font-size: min(30px, max(6vW, 6vH));
    text-align: center;
    direction: rtl;
    text-shadow: 0px 0px 2px #181818;
}

p.texwrbox {
    position: relative;
    margin: auto;
    display: block;
    padding: 10px 5%;
    font-family: 'stedad', 'Gentium Basic', Arial;
    color: #181818;
    font-size: min(17px, max(2vW, 2vH));
    text-align: justify;
    line-height: min(20px, max(3.5vW, 3.5vH));
    max-height: 40vH;
    overflow: hidden;
    overflow-y: auto;
    direction: rtl;
}

.tocom {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    padding: 2%;
    text-align: center;
}

.tocom span {
    position: relative;
    margin: 10px auto;
    display: block;
    border: 3px solid #2f8d88;
    width: min(190px, max(55vW, 30vH));
    padding: 10px;
    font-size: 18px;
    font-family: 'stedad', 'pines';
    color: #2f8d88;
    border-radius: 5vW;
    text-shadow: 0px 0px 3px #2f8d88;
}

canvas#camera {
    position: absolute;
    margin: auto;
    display: block;
    width: min(100px, max(30vW, 30vH));
    height: min(70px, max(15vW, 15vH));
    background: #181818;
    border-radius: 15px;
    border: 2px solid #181818;
    top: 5%;
    z-index: 30;
    left: 2.5%;
    overflow: hidden;
}

i#capture {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 2%;
    left: 2%;
    z-index: 100;
}

form#imager .submiter, form#finisher .submiter {
    text-align: center !important;
}

form#imager input[type="submit"], form#finisher input[type="submit"] {
    color: #f8f8f8 !important;
    background: #3aafa9 !important;
    font-family: 'stedad', 'pines_b' !important;
    font-size: 20px !important;
}

.app_header .menofot .toggle.closer:after, .toggle.closer:before, .closer span#line_3 {
    background: var(--red-color) !important;
}

.demoe {
    position: fixed;
    bottom: 5%;
    top: unset;
    z-index: 105;
    right: 5%;
    box-shadow: 0px 0px 10px var(--base-color);
    margin: auto;
    clear: both;
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 900;
    vertical-align: baseline;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid #181818cc;
    border-radius: 5px;
    cursor: pointer;
}

.gridel2box {
    position: relative;
    display: grid;
    margin: auto;
    padding: 15px;
    font-family: 'stedad', 'Gentium Basic', Arial;
    font-weight: 700;
    vertical-align: baseline;
    direction: rtl;
    color: #353535;
    background: #f8f8f8;
    border: 2px solid #181818;
    border-radius: 5px;
    width: calc(100% - 30px);
    max-width: 500px;
    min-height: 15vH;
    resize: vertical;
    max-height: 25vH;
    grid-template-columns: 50% 50%;
}

.gridel2box spiner {
    position: relative;
    margin: auto;
    clear: both;
    width: 90%;
    height: 100%;
    background: var(--base-color);
    overflow: hidden;
    border: 1px solid #181818;
    border-radius: 15px;
}

.gridel2box spiner canvas, .gridel2box spiner img {
    position: relative !important;
    margin: auto !important;
    clear: both !important;
    width: 100% !important;
    height: 100% !important;
    top: unset !important;
    right: unset !important;
    left: unset !important;
    bottom: unset;
    display: block;
    background: url('/public/__Global/Files/image/no-profile.png') center center no-repeat;
    background-size: 100%;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
    display: none;
}

form label input[type="file"]::before {
    content: attr(placeholder);
    display: inline-block;
    border: 2px solid #F39C12;
    border-radius: 10px;
    padding: 5px 10px;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #f8f8f8;
    font-weight: 700;
    margin: auto 3px auto 20px;
    direction: rtl;
    font-family: 'sans_b' !important;
    color: #707070;
    font-size: 12px;
}

@media only screen and (max-width: 800px) {
    .startbox .heart {
        width: max(23.5vH, min(13vW, 85px));
        height: max(23.5vH, min(13vW, 85px));
        top: 7%;
    }

    .gride_box gride[role="right"] {
        grid-template-columns: 100%;
    }

    .gride_box gride[role="left"] {
        grid-template-columns: 100%;
    }

    .documentbox .towbox {
        grid-template-columns: 100%;
    }

    .forebox {
        grid-template-columns: 50% 50%;
    }

    .documentbox .threebox {
        grid-template-columns: 100%;
    }

    header .image .backimg {
        background-size: auto 100% !important;
    }

    header .image h1 {
        color: #f8f8f8;
        top: 10%;
        left: 0%;
        width: 90%;
        height: 30vH;
    }

    header .image h2 {
        top: calc(10% + 30vH);
        left: 0%;
        right: 0%;
        width: 90%;
        height: 30vH;
    }

    header .image span {
        top: unset;
        bottom: 10%;
        left: 0%;
        right: 0%;
        width: calc(90%);
        height: 20px;
    }

    hline span:nth-child(3) {
        opacity: 0;
        visibility: hidden;
        z-index: -100;
    }

    hline span:nth-child(2) {
        position: fixed;
        bottom: 5%;
        top: unset;
        z-index: 100;
        right: 5%;
        box-shadow: 0px 0px 10px var(--base-color);
    }

    .forebox lable picture {
        height: 36vW;
        width: 36vW;
    }

    @media only screen and (max-width: 400px) {
        .forebox {
            grid-template-columns: 100%;
        }

        .forebox lable picture {
            height: 70vW;
            width: 70vW;
        }

        @media only screen and (max-width: 300px) {
            .forebox lable picture {
                height: 80vW;
                width: 80vW;
            }

            .gridel2box {
                grid-template-columns: 100%;
            }
        }
    }

}