@font-face {
font-family: myFirstFont2;
src: url(../font/IconsSocialMedia15-AL4xL.ttf);
}

@font-face {
font-family: myFirstFont;
src: url(../font/NotoKufiArabic-Regular.ttf);
}

body {
font-family: myFirstFont;
direction: rtl;
}

.form-check.button-73 {
    margin-bottom: 20px;
}

.page1 {
font-family: myFirstFont2;
display: flex;
flex-wrap: wrap;
margin-left: 13%;
margin-right: 13%;
align-items: center;
justify-content: space-evenly;
}

.tpo1 {
margin: 13%;
margin-bottom: 0;
background-color: aliceblue;
text-align: center;
border-radius: 26pc;
}
.tpo2 {
background-color: #fafdff;
text-align: center;
}

.logo {
font-size: xxx-large;
font-weight: bolder;
}

.tpo1 img {
background-size: cover;
background-repeat: no-repeat;
width: 10pc;
height: 10pc;
}


.button-73 {
appearance: none;
background-color: #FFFFFF;
border-radius: 40em;
border-style: none;
box-shadow: #ADCFFF 0 -12px 6px inset;
box-sizing: border-box;
color: #000000;
cursor: pointer;
display: inline-block;
font-family: -apple-system,sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -.24px;
margin: 0;
outline: none;
padding: 1rem 1.3rem;
quotes: auto;
text-align: center;
text-decoration: none;
transition: all .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-73:hover {
background-color: #FFC229;
box-shadow: #FF6314 0 -6px 8px inset;
transform: scale(1.125);
}

.button-73:active {
transform: scale(1.025);
}

@media (min-width: 768px) {
.button-73 {
font-size: 1.5rem;
padding: .75rem 2rem;
}
}


.modal {
top: 20%;
}

.modal-body{
text-align: center;
font-family: auto;
}

.modal-body input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"],  input[type="number"], select {
box-sizing: border-box;
width: 100%;
height: calc(3em + 2px);
margin: 0 0 1em;
padding: 1em;
border: 1px solid #ccc;
border-radius: 1.5em;
background: #fff;
resize: none;
outline: none;
text-align: center;
font-family: auto;

}
.modal-body input[type="text"][required]:focus,
.modal-body input[type="email"][required]:focus,
.modal-body input[type="password"][required]:focus,
.modal-body input[type="tel"][required]:focus,
.modal-body input[type="number"][required]:focus,
.modal-body input[type="url"][required]:focus
{
border-color: #00bafa;
}
.modal-body input[type="text"][required]:focus + label[placeholder]:before,
.modal-body input[type="email"][required]:focus + label[placeholder]:before,
.modal-body input[type="password"][required]:focus + label[placeholder]:before,
.modal-body input[type="tel"][required]:focus + label[placeholder]:before,
.modal-body input[type="number"][required]:focus + label[placeholder]:before,
.modal-body input[type="url"][required]:focus + label[placeholder]:before
{
color: #00bafa;
}

.modal-body input[type="text"][required]:focus + label[placeholder]:before,
.modal-body input[type="text"][required]:valid + label[placeholder]:before,

.modal-body input[type="email"][required]:focus + label[placeholder]:before,
.modal-body input[type="email"][required]:valid + label[placeholder]:before,

.modal-body input[type="password"][required]:focus + label[placeholder]:before,
.modal-body input[type="password"][required]:valid + label[placeholder]:before,

.modal-body input[type="tel"][required]:focus + label[placeholder]:before,
.modal-body input[type="tel"][required]:valid + label[placeholder]:before,

.modal-body input[type="number"][required]:focus + label[placeholder]:before,
.modal-body input[type="number"][required]:valid + label[placeholder]:before,

.modal-body input[type="url"][required]:focus + label[placeholder]:before,
.modal-body input[type="url"][required]:valid + label[placeholder]:before
{
transition-duration: 0.2s;
transform: translate(0, -1.5em) scale(0.9, 0.9);
}
.modal-body input[type="text"][required]:invalid + label[placeholder][alt]:before,
.modal-body input[type="email"][required]:invalid + label[placeholder][alt]:before,
.modal-body input[type="password"][required]:invalid + label[placeholder][alt]:before,
.modal-body input[type="tel"][required]:invalid + label[placeholder][alt]:before,
.modal-body input[type="number"][required]:invalid + label[placeholder][alt]:before,
.modal-body input[type="url"][required]:invalid + label[placeholder][alt]:before
{
content: attr(alt);
}
.modal-body input[type="text"][required] + label[placeholder],
.modal-body input[type="email"][required] + label[placeholder],
.modal-body input[type="password"][required] + label[placeholder],
.modal-body input[type="tel"][required] + label[placeholder],
.modal-body input[type="number"][required] + label[placeholder],
.modal-body input[type="url"][required] + label[placeholder]
{
display: block;
pointer-events: none;
line-height: 1.25em;
margin-top: calc(-3em - 2px);
margin-bottom: calc((3em - 1em) + 2px);
}
.modal-body input[type="text"][required] + label[placeholder]:before,
.modal-body input[type="email"][required] + label[placeholder]:before,
.modal-body input[type="password"][required] + label[placeholder]:before,
.modal-body input[type="tel"][required] + label[placeholder]:before,
.modal-body input[type="number"][required] + label[placeholder]:before,
.modal-body input[type="url"][required] + label[placeholder]:before
{
content: attr(placeholder);
display: inline-block;
margin: 0 calc(1em + 2px);
padding: 0 2px;
color: #898989;
white-space: nowrap;
transition: 0.3s ease-in-out;
background-image: linear-gradient(to bottom, #fff, #fff);
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}  


a {
text-decoration: unset;
color: black;
}

.page1BTN{
font-family: myFirstFont2;
font-size: 80px;
cursor: pointer;
font-size: xxx-large;
}

.page1BTN:hover {
transform: rotate(341deg);
}

.page2 img {
width: 7pc;
height: 7pc;
}


.rr {
font-size: x-large;
font-weight: bold;
}

.ll{
font-size: x-large;
font-weight: bolder;
color: gold;
}

table { 
width: 750px; 
border-collapse: collapse; 
margin:50px auto;
}

/* Zebra striping */
tr:nth-of-type(odd) { 
background: #eee; 
}

th { 
background: #3498db; 
color: white; 
font-weight: bold; 
}

td, th { 
padding: 10px; 
border: 1px solid #ccc; 
text-align: left; 
font-size: 18px;
}


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

table { 
width: 100%; 
}

table, thead, tbody, th, td, tr { 
display: block; 
}

thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
border: none;
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%; 
}

td:before { 
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap;
content: attr(data-column);
color: #000;
font-weight: bold;
}

}

input[type="radio"]{
    visibility: hidden;
}

input[type="radio"]:checked{
    visibility:visible;
}