@font-face {
    font-family: 'DIN_BOLD';
    src: url('../fonts/Ubuntu/DIN_BOLD.otf') format('opentype');
}
@font-face {
    font-family: 'DIN_BOLD';
    src: url('../fonts/Ubuntu/DIN_BOLD.ttf') format('truetype');
}
@font-face {
    font-family: "DIN NEXT™ ARABIC LIGHT";
    src: url("../fonts/Ubuntu/DIN_LIGHT.otf"); /* IE9 Compat Modes */
    src: url("../fonts/Ubuntu/DIN_LIGHT.woff2") format("woff2"), url("../fonts/Ubuntu/DIN_LIGHT.woff") format("woff"), url("../fonts/Ubuntu/DIN_LIGHT.ttf") format("truetype");
}

@font-face {
    font-family: "DIN NEXT™ ARABIC REGULAR";
    src: url("../fonts/Ubuntu/DIN_REGULAR.otf"); /* IE9 Compat Modes */
    src: url("../fonts/Ubuntu/DIN_REGULAR.woff2") format("woff2"), url("../fonts/Ubuntu/DIN_REGULAR.woff") format("woff"), url("../fonts/Ubuntu/DIN_REGULAR.ttf") format("truetype");
}

@font-face {
    font-family: "DIN NEXT™ ARABIC MEDIUM";
    src: url("../fonts/DIN_MEDIUM.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Ubuntu/DIN_MEDIUM.woff2") format("woff2"), url("../fonts/Ubuntu/DIN_MEDIUM.woff") format("woff"), url("../fonts/Ubuntu/DIN_MEDIUM.ttf") format("truetype");
}

@font-face {
    font-family: "DIN NEXT™ ARABIC BOLD";
    src: url("../fonts/Ubuntu/DIN_BOLD.otf"); /* IE9 Compat Modes */
    src: url("../fonts/Ubuntu/DIN_BOLD.woff2") format("woff2"), url("../fonts/Ubuntu/DIN_BOLD.woff") format("woff"), url("../fonts/Ubuntu/DIN_BOLD.ttf") format("truetype");
}

.image_split {
    --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
    --m: left var(--_i,0%) top var(--_g), bottom var(--_i,0%) left var(--_g), top var(--_i,0%) right var(--_g), right var(--_i,0%) bottom var(--_g);
    -webkit-mask: var(--m);
    mask: var(--m);
    filter: grayscale(50%);
    transition: .3s linear;
    cursor: pointer;
}
.image_split:hover {
        --_i: 10%;
        filter: grayscale(0);
}

.Txtstyle4 {
    border: 0.5px solid #c4c4c4;
    padding: 2px 2px 2px 2px;
    border-radius: 4px;
    color: #000;
    box-shadow: 0px 0px 4px #d9d9d9;
    background-color: #F0F0FF;
}

.Txtstyle4:focus {
        outline: none;
        color: #000;
        border: 0.5px solid #54883E;
        box-shadow: 0px 0px 4px #54883E;
        background-color: #f3f2dc;
 }

.hoverTable {
    width: 100%;
    border-collapse: collapse;
}

.hoverTable td {
        padding: 5px;
        vertical-align: middle;
}
    /* Define the default color for all the table rows */
    .hoverTable tr {
        background: #fff;
}
        /* Define the hover highlight color for the table row */
        .hoverTable tr:hover {
            background-color: #f8f8f8;
}



.hover-item {
    background: transparent;
}
        /* Define the hover highlight color for the table row */
.hover-item :hover {
        background-color: #f8f8f8;
}


.h1_move {
    color: #484848;
    font-size: 1.15rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-weight: bold;
    cursor: pointer
}

.h1_move span {
    transition: .6s linear
}

.h1_move:hover span:nth-child(1) {
    margin-right: 8px
}

    .h1_move:hover span:nth-child(1):after {
        content: "";
    }

    .h1_move:hover span:nth-child(2) {
        margin-left: 20px
    }

    .h1_move:hover span {
        color: #3d3d3d;
        letter-spacing: 1px;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
    }




.h2_move {
    color: #484848;
    font-weight: bold;
    cursor: pointer
}

    .h2_move span {
        transition: .4s linear
    }

    .h2_move:hover span:nth-child(1) {
        margin-right: 8px
    }

    .h2_move:hover span:nth-child(1):after {
            content: "";
        }

    .h2_move:hover span:nth-child(2) {
        margin-left: 20px
    }

    .h2_move:hover span {
        color: #3d3d3d;
        letter-spacing: 2px;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
    }





.h3_move {
    color: #484848;
    font-weight: bold;
    cursor: pointer
}

    .h3_move span {
        transition: .3s linear
    }

    .h3_move:hover span:nth-child(1) {
        margin-right: 6px
    }

        .h3_move:hover span:nth-child(1):after {
            content: "";
        }

    .h3_move:hover span:nth-child(2) {
        margin-left: 20px
    }

    .h3_move:hover span {
        color: #3d3d3d;
        letter-spacing: 2px;
        text-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 30px #fff;
    }




.h4_move {
    color: #484848;
    font-weight: bold;
    cursor: pointer
}

    .h4_move span {
        transition: .4s linear
    }

    .h4_move:hover span:nth-child(1) {
        margin-right: 2px
    }

        .h4_move:hover span:nth-child(1):after {
            content: "";
        }

    .h4_move:hover span:nth-child(2) {
        margin-left: 5px
    }

    .h4_move:hover span {
        color: #fff;
        letter-spacing: 0.7px;
        text-shadow: 0 0 6px #fff, 0 0 13px #fff, 0 0 25px #fff;
    }


.h5_move {
    font-weight: bold;
    cursor: pointer;
}

    .h5_move span {
        transition: .4s linear
    }

    .h5_move:hover span:nth-child(1) {
        margin-right: 3px
    }

        .h4_move:hover span:nth-child(1):after {
            content: "";
        }

    .h5_move:hover span:nth-child(2) {
        margin-left: 10px
    }

.h5_move:hover span {
    letter-spacing: 1px;
    text-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 30px #fff;
}

.zoom {
    transition: transform .3s; /* Animation */
    width: auto;
    margin: 0 auto;
}

    .zoom:hover {
        transform: scale(1.3); /* (130% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.zoom_text {
    transition: transform .4s; /* Animation */
    width: auto;
    margin: 0 auto;
}

    .zoom_text:hover {
        transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

.display-1 {
    font-size: 0.45rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 0.85rem + (3.4 - 1.8399999999999999) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.1 * (1.8399999999999999rem + (3.4 - 1.8399999999999999) * ((100vw - 20rem) / (48 - 20))));
}

.display-2 {
    font-size: 0.55rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 1.0rem + (3 - 1.7) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.3 * (1.7rem + (3 - 1.7) * ((100vw - 20rem) / (48 - 20))));
}

.display-4 {
    font-size: 0.65rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 1.07rem + (1.2 - 1.07) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.07rem + (1.2 - 1.07) * ((100vw - 20rem) / (48 - 20))));
}

.display-5 {
    font-size: 0.85rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 1.15rem + (2 - 1.35) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.35rem + (2 - 1.35) * ((100vw - 20rem) / (48 - 20))));
}

.display_text_grid_L {
    font-size: 2.15rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 1.57rem + (1.2 - 1.07) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.07rem + (1.2 - 1.07) * ((100vw - 20rem) / (48 - 20))));
}
.display_text_grid {
    font-size: 0.75rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 1rem + (2 - 1.82) * ((90vw - 40rem) / (55 - 10)));
    line-height: calc( 1.1 * (1.55rem + (2 - 1.50) * ((90vw - 40rem) / (55 - 15))));
}

.display_text_grid_S {
    font-size: 0.65rem;
    font-family: 'DIN NEXT™ ARABIC REGULAR';
    font-size: calc( 0.9rem + (2 - 1.92) * ((80vw - 50rem) / (75 - 10)));
    line-height: calc( 1 * (1.30rem + (2 - 1.8) * ((80vw - 50rem) / (65 - 15))));
}

.Text_foucs {
    transition: transform .4s;
    width: auto;
    margin: 0 auto;
}

    .Text_foucs:hover {
        transform: scale(1.06);
}


#lineh1 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh2 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh3 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh4 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh5 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh6 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh7 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh8 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh9 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh10 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}
#lineh11 {
    position: absolute;
    right: 0px;
    height: 25px;
    background: #54883E;
    color: white;
    animation: lineH 10s 1s infinite linear;
}









#lineh12 {
        position: absolute;
        right: 0px;
        height: 10px;
        background: #828181;
        animation: lineH 6s 1s infinite linear;
}

#lineh13 {
    position: absolute;
    right: 0px;
    height: 10px;
    background: #828181;
    animation: lineH 6s 1s infinite linear;
}

#lineh14 {
    position: absolute;
    right: 0px;
    height: 10px;
    background: #828181;
    animation: lineH 6s 1s infinite linear;
}

#lineh15 {
    position: absolute;
    right: 0px;
    height: 10px;
    background: #828181;
    animation: lineH 6s 1s infinite linear;
}

#lineh16 {
    position: absolute;
    right: 0px;
    height: 10px;
    background: #828181;
    animation: lineH 6s 1s infinite linear;
}


   @keyframes lineH {
            0% {
        width: 0%;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}