body {

    font-family: en;

    background-color: #EAEEF1;
 
 
}
 
.hide_loader {

    display: none;

}
 
.preload {
 
    position: absolute;

    transform: translate(-50%, -50%);

    left: 50%;

    top: 50%;

}
 
h3 {

    color: white !important;

}
 
@font-face {

    font-family: en;

    src: url(fonts/OpenSans-Light.ttf);

}
 
@font-face {

    font-family: ar;

    src: url(fonts/HacenSaudiArabia.ttf);

}
 
.Title {

    display: flex;

    justify-content: center;

}
 
input::placeholder {

    color: rgba(128, 128, 128, 0.445);

}
 
input::placeholder {

    font-size: 20px;

}
 
 
@keyframes flickerAnimation {

    0% {

        opacity: 1;

    }
 
    50% {

        opacity: 0;

    }
 
    100% {

        opacity: 1;

    }

}
 
.animate-flicker {

    -webkit-animation: flickerAnimation 1s infinite;

    -moz-animation: flickerAnimation 1s infinite;

    -o-animation: flickerAnimation 1s infinite;

    animation: flickerAnimation 1s infinite;

}
 
.wraapper-container {

    width: 40%;

    margin: 0 auto;
 
    text-align: center;

    border-radius: 20px;

    padding: 40px;

}
 
.Code {

    font-size: 1.4rem;

    font-weight: 100;

}
 
.Language {

    text-decoration: underline;

    text-decoration-color: #2E2FDE;

    border: none;

    border-radius: 5px;

    padding: 2px 15px;

    background-color: white;

    border: 1px solid white;

    transition: all 0.3s ease-in-out;
 
    font-family: ar;
 
 
}
 
.Language span {

    color: rgb(0, 0, 0);

    font-size: 15px;

}
 
.Language:hover {

    background-color: #a82068;

}
 
.Language:hover span {

    color: white;

}
 
.Language a {

    color: white;

}
 
.Logo {

    max-width: 150px;

    opacity: 1;
 
 
}
 
 
.wraapper-container input {

    outline: 0;

    border: none;

    width: 100%;

    border-radius: 0px 20px 20px 0px;

    background: white;

    padding: 15px;

    text-align: center;

    position: relative;

    height: 4.5rem;

}
 
.wraapper-container .verifyCode {

    border-radius: 20px;

}
 
input:focus {

    border: 3px solid #5AB85A;

}
 
 
.image-logo img {

    max-width: 30%;

}
 
.image-logo {

    margin-bottom: 2rem;
 
}
 
h4 {
 
    color: #1994ab;

    margin-bottom: 1rem;

    margin-top: 1rem;

    font-weight: 700;

    font-size: 1.0rem;
 
 
}
 
.Country {

    padding: 8px;

    align-items: center;

    display: flex;

    background: white;
 
    z-index: 9;

    /* min-height: 50px; */

    /* min-width: max-content; */

    height: 4.5rem;

    border-radius: 20px 0px 0px 20px;

}
 
 
input {

    font-size: 1rem;
 
}
 
.bordr {

    border-left: 4px solid white;

    height: 4rem;

    position: absolute;

    left: 16%;

    /* top: 34rem; */

    transform: translate(-50%, -75%);

}
 
.bordr.EN {

    left: 78%;

}
 
.AR {

    position: absolute;

    transform: translate(-50%, -50%);

    left: 2%;

    top: 10%;
 
    transform: rotate(180deg);

    width: 13%;

}
 
.AR.EN {

    left: 83%;

    transform: rotate(0deg);
 
}
 
 
.SubmitButton  {

    position: relative;

    color: white;

    border-radius: 20px;

    outline: none;

    border: none;

    font-size: 1.4rem;

    background: #a82068 !important;

    width: 100%;

    padding: 10px;

    cursor: pointer;

    animation: AnimationName 8s linear infinite;

    /* background: linear-gradient(45deg, #24D741, #24D741, #24D741, #24D741, #24D741, #24D741); */

    background-size: 400% 100%;

    background-position: 0 0;

    transition: 0.2s all ease-in-out;

}
 
.SubmitButton:hover {

    transform: scale(1.05);

    background-color: rgb(2, 129, 2);

}
 
.SubmitButton:focus {

    outline: none;

}
 
@keyframes AnimationName {

    0% {

        background-position: 0% 0%;

    }
 
    100% {

        background-position: 100% 0%;

    }

}
 
button:disabled,

button[disabled] {

    background-color: #cccccc;

    color: #666666;

}
 
.InpuTForm {

    display: flex;

    justify-content: center;

    margin-top: 1.5rem;

    margin-bottom: 1rem;

}
 
.Disclamer {

    margin: -5% auto;

    font-size: 10px;

    text-align: center;

color: white;    /* top: 76%; */
 
    width: 70%;
 
}
 
.price {

    margin-top: 1rem;

    color: rgba(0, 0, 0, 0.555);

    font-size: 0.8rem;

}
 
 
@media (min-width:500px) and (max-width:850px) {

    .wraapper-container {

        width: 70%;

    }
 
}
 
@media (min-width:350px) and (max-width:390px) {
 
 
    .Code {

        font-size: 0.9rem !important;
 
    }
 
    h4 {

        font-size: 1rem

    }
 
    input::placeholder {

        font-size: 15px;

    }
 
    .wraapper-container {
 
        margin: 0 auto !important;
 
    }
 
    .Disclamer {
 
        top: -1rem !important;
 
    }
 
 
 
}
 
 
@media (min-width:320px) and (max-width:481px) {

    .Logo {

        max-width: 120px;

    }
 
    input::placeholder {

        font-size: 17px;

    }
 
    .Language {

        position: relative;

        top: 13px;

    }

    .PLY_icon {

        width: 80% !important;

    }
 
    h3 {

        font-size: 1.5rem;

    }
 
 
    .wraapper-container {

       width: 90%;

padding: 0px;

margin: 10% 5% 0% 5%;
 
    }
 
    .Disclamer {

        position: relative;

        width: 90%;

    }
 
    .price {

        font-size: 0.6rem;

    }
 
    .AR {

        top: 30%;

    }
 
    .bordr {

        left: 20%;

    }
 
 
 
 
 
}
 
@media (min-width: 1800px) {

    .AR {

        width: 9%;

    }

}