
html{
--minColor:#3d5afe;
overflow-x: hidden;
}
/**/
#Blog00 { display: block; padding: 1rem; margin: 20px auto; box-shadow: 0 0 60px rgba(93, 70, 232, 0.15); border: 1px solid#ebe9e9; width: 90%; }
#header,.main-wrapper{float:right;overflow:hidden}
#header,.main-wrapper,.sidebar-wrapper{overflow:hidden}
.header-wrap{position:relative;width:1000px}
#header{width:100%!important;padding:0}
.outerpic-wrapper{width:1000px;padding:0;margin:0 auto;overflow:hidden}
.content-wrapper{position:relative;max-width:1000px;display: inline-block;margin:0 auto}
.outer-wrapper{position:relative;width:1000px;padding:0}
.main-wrapper{width:680px;margin:-15px 0 0}
.sidebar-wrapper{width:310px;float:right;word-wrap:break-word}
.footer{float:left;width:290px!important;}
.footer{margin:10px}#whatsapp,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box9,.box10,.box11,.box12{display:none}
#layout ul,li,ol{list-style:none}
/**/
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1biLD-H.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a13iLD-H.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1PiLA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
table {
font-family: 'Cairo';
border-collapse: collapse;
width: 100%;
border-radius: 50%; /* تعديل القيمة حسب الحاجة */
}
td, th {
border: 1px solid #FFFFFF;
text-align: center;
}
td .waiting-text {
background-color: #FFA500; /* تعديل لون الخلفية البرتقالية الفاتحة */
color: #FFFFFF; /* تعديل لون النص الأبيض */
padding: 4px 8px;
border-radius: 10px;
}
tr:nth-child(even) {
background-color: #f0f0f0;
}
table, th, td {
border: 1px solid black;padding: 10px;
}
.rounded-button {
display: inline-block;
padding: 3px 25px;
border: none;
border-radius: 20px;
background: linear-gradient(120deg, #2978a0, #1c486d);
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
border: 2px dotted #ffffff; /* إضافة الحدود المنقطة */
}
td a.rounded-button[href='#'] {display: none;}
.rounded-button::before {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: calc(100% + 30px);
height: calc(100% + 30px);
background-image: radial-gradient(circle, transparent 10%, rgba(255, 255, 255, 0.6) 50%);
z-index: -1;
filter: blur(3px);
}
.rounded-button:hover::before {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.trd {
background-color: #FFA500; /* تعيين اللون المرغوب */
color: #FFFFFF; /* تعيين لون النص إلى الأبيض */
font-size: 18px; /* تعيين حجم الخط بالقيمة المطلوبة */
padding: 8px; /* تعيين حجم الهامش الداخلي للخلية */
}
@font-face {
font-family: CustomFont;
src: url('Shoroq-Font.ttf') format('truetype');
}
body {
font-family: "Cairo";
}
p {
text-align: center;
font-size:16px;
}
.gg {
background-color: #FFA500;
color: white;
border-radius: 2%;
}
.gg2 {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.progress-bar {
width: 350px;
height: 30px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
align-items: center; /* توسيط عمودي */
justify-content: center; /* توسيط أفقي */
margin: 0 auto; /* توسيط أفقي */
}
.progress {
height: 100%;
background-color: #4caf50;
width: 0%;
transition: width 0.5s ease-in-out;
}
.progress-text {
color: #ffffff;
font-weight: bold;
text-align: center;
line-height: 20px; /* ارتفاع الخط يساوي ارتفاع شريط التحميل */
line-width: 50px;
left: 50%;
}
.shadow3 {
background-image: url("https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uTksd6VB2Z0bw3TIDPzpu_zD2T3HrYA6DGl4EOLYoDiF1Ejyxwo5MXBx79lX9je3k403VLU-9Zne73OX9QD1jLYuB_pTYlm5gFfC6mfZvN=s0-d");
background-repeat: no-repeat;
}
.height450{height:450px;}
.badge-info {
background-color: rgba(23, 160, 184, 0.17);
color: #17a2b8;
}
.section-title .badge {
margin: 0 0 8px;
}
.badge {
border-radius: 100px;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-weight: 500;
letter-spacing: 1px;
line-height: normal;
padding: 4px 14px;
text-transform: uppercase;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: #3f345f;
}
h2 {
font-size: 25px;
}
.social-overlap {
position: absolute;
width: 100%;
transform: translateY(-50%);
}
.justify-content-center {
-ms-flex-pack: center!important;
justify-content: center!important;
}
.justify-content-center {
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
}
.social-bar {
display: flex;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 60px rgba(93, 70, 232, 0.15);
border: 1px solid#ebe9e9;
}
.iconpad {
padding: 12px 0;
width: 100%;
}
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
.process-scetion .slider-nav-item {
position: relative;
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
text-align: center;
background: #fff;
cursor: pointer;
transition: all .4s ease;
}
.social-icons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 100%;
}
.social-icons a {
border-radius: 50px;
color: #3f345f;
display: flex;
align-items: center;
justify-content: center;
line-height: 52px;
height: 50px;
width: 50px;
box-shadow: 0 5px 25px rgba(93, 70, 232, 0.15);
margin: 15px 5px;
font-size: 22px;
}
a {
text-decoration: none !important;
color: #3f345f;
transition: all 0.3s ease 0s;
}
.slider-nav-item:before {
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse;
}
/*socil*/
.slider-nav{
display: flex;
}
.process-scetion .slider-nav-item {
position: relative;
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
text-align: center;
background: #fff;
cursor: pointer;
transition: all .4s ease;
}
.slider-nav-item:before
{
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse;
}
.process-scetion .slider-nav-item:nth-child(2) {
color: #40beff; }
.process-scetion .slider-nav-item:nth-child(3) {
color: #311f9b; }
.process-scetion .slider-nav-item:nth-child(4) {
color: #ff9259; }
.process-scetion .slider-nav-item:nth-child(5) {
color: #38385f; }
.process-scetion .slider-nav-item:after {
position: absolute;
top: 50%;
left: 100%;
height: 2px;
content: '';
width: 100%;
background: url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vTghR0FaQjCqONiavoxzxeVA8mJ_rNxlRDdaLGJtMVpsVQmYWSBC6u6SIEfiDNnDKb5N9CGafAK2XHoEzW5u0UU8SD3LE0Mfr88dApGWh4BQp3IrsP=s0-d) repeat 0 0;
z-index: 0;
animation: slide 1s linear infinite; }
.process-scetion .slider-nav-item:last-child:after {
display: none; }
.process-scetion .slider-nav-item .ikon {
font-size: 50px;
line-height: 80px; }
.process-scetion .slider-nav-item.active:before {
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse; }
@keyframes focuse {
0% {
transform: scale(0.8);
opacity: 1; }
75% {
transform: scale(1.2);
opacity: 0; }
100% {
transform: scale(1.2);
opacity: 0; } }
@keyframes slide {
from {
background-position: 0 0; }
to {
background-position: 40px 0; } }
.shadow-img1{
background-image:url("../img/shadow.png");
background-repeat:no-repeat;
background-position:bottom;
}
.shadow-img2{
background-position: bottom;
background-image: url("../img/shadow2.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slider-nav-item:after {
position: absolute;
top: 50%;
left: 100%;
height: 2px;
content: '';
width: 100%;
background: url(https://1.bp.blogspot.com/--Btu5p654jU/XYmrVd5IcYI/AAAAAAAATQ0/4bX8aZyFBgApbJUf90KrpCfO6RvAaZ6LgCLcBGAsYHQ/s1600/line.png) repeat 0 0;
z-index: 0;
animation: slide 1s linear infinite;
}
.mt100{margin-top:100px;}
/* ----------------------------------------------
* Generated by Animista on 2019-9-24 11:37:28
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation jello-horizontal
* ----------------------------------------
*/
@-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.jello-horizontal {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}
.social-bar a:hover i
{
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}
@media only screen and (max-width: 300px) {
.process-scetion .slider-nav-item
{
height: 30px;
width: 30px;
margin: 15px 10px;
line-height: 28px;
}
}
div.reverse {
direction: ltr;
}
.container2 {
color: #333;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
text-align: center;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
text-align: center;
}
li span {
display: block;
font-size: 4.5rem;
border: 2px dotted black;
padding: 10px;
background-color: yellow;
text-align: center;
}
.emoji {
display: none;
padding: 1rem;
}
.emoji span {
font-size: 4rem;
padding: 0 .5rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: calc(1.5rem * var(--smaller));
}
li {
font-size: calc(1.125rem * var(--smaller));
}
li span {
font-size: calc(3.375rem * var(--smaller));
}
}
img {
max-width: 100%;
max-height: 100%;
}
h3.title{display:none}


/* =========================================================
   Responsive layout only
   يحافظ على تصميم الجدول والأقسام الأصلي دون تغيير الألوان أو الشكل.
========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0;
}

/* الحاويات الأصلية: مرنة بدل العرض الثابت فقط */
.header-wrap,
.outerpic-wrapper,
.outer-wrapper,
.content-wrapper {
    width: min(1000px, 100%);
    max-width: 100%;
}

#Blog00 {
    max-width: calc(100% - 24px);
}

.main-wrapper {
    width: min(680px, 100%);
    max-width: 100%;
}

.sidebar-wrapper {
    width: min(310px, 100%);
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* إبقاء الجدول بنفس تصميمه، مع منعه من تجاوز الشاشة */
table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

td,
th {
    overflow-wrap: anywhere;
}

.progress-bar {
    width: min(350px, 100%) !important;
    max-width: 100%;
}

/* ضبط قسم التواصل داخل العرض المتاح دون تغيير تصميمه */
.trial-block,
.height450,
.social-bar {
    max-width: 100%;
}

@media (max-width: 1020px) {
    .header-wrap,
    .outerpic-wrapper,
    .outer-wrapper,
    .content-wrapper {
        width: calc(100% - 24px);
    }

    #Blog00 {
        width: calc(100% - 24px);
    }

    .main-wrapper,
    .sidebar-wrapper {
        float: none;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    table {
        font-size: 15px;
    }

    table,
    th,
    td {
        padding: 8px;
    }

    .rounded-button {
        padding: 3px 16px;
        font-size: 15px;
        white-space: nowrap;
    }

    .social-icons {
        flex-wrap: wrap;
    }

    .height450 {
        height: auto;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .header-wrap,
    .outerpic-wrapper,
    .outer-wrapper,
    .content-wrapper,
    #Blog00 {
        width: calc(100% - 16px);
    }

    h1 {
        font-size: 1.35rem;
        line-height: 1.6;
        word-break: normal;
    }

    .gg {
        font-size: 14px;
        line-height: 1.8;
    }

    table {
        font-size: 13px;
    }

    table,
    th,
    td {
        padding: 6px 4px;
    }

    .rounded-button {
        padding: 3px 10px;
        font-size: 13px;
    }

    .social-icons a {
        margin: 10px 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   تحسين وضوح النصوص داخل الجدول والعنوان فقط
========================================================= */

/* عنوان الصفحة */
h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
}

/* رؤوس أعمدة الجدول */
thead th,
.trd th {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 800;
    line-height: 1.45;
}

/* أسماء المحافظات */
tbody td:first-child {
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    font-weight: 800;
    line-height: 1.5;
}

/* الحالة */
tbody td:nth-child(2),
.waiting-text {
    font-size: clamp(.96rem, 1.7vw, 1.06rem);
    font-weight: 700;
    line-height: 1.5;
}

/* زر تنزيل: أكبر وأوضح دون زيادة العرض */
tbody td:last-child {
    white-space: nowrap;
}

.rounded-button {
    min-width: 78px;
    min-height: 38px;
    padding: 3px 12px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.55rem;
        font-weight: 800;
    }

    table,
    th,
    td {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    tbody td:first-child {
        font-size: 1rem;
        font-weight: 800;
    }

    tbody td:nth-child(2),
    .waiting-text {
        font-size: .96rem;
        font-weight: 700;
    }

    .rounded-button {
        min-width: 74px;
        min-height: 36px;
        padding: 3px 10px;
        font-size: .96rem;
        font-weight: 800;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.4rem;
    }

    table,
    th,
    td {
        padding-right: 4px;
        padding-left: 4px;
    }

    tbody td:first-child {
        font-size: .98rem;
    }

    tbody td:nth-child(2),
    .waiting-text {
        font-size: .9rem;
    }

    .rounded-button {
        min-width: 70px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: .9rem;
    }
}
