@font-face
{
    font-family: 'Tajawal-Bold';
    src:  url('../../font/Tajawal/Tajawal-Bold.woff');
    font-display: swap;
}
@font-face
{
    font-family: 'Tajawal-Medium';
    src:  url('../../font/Tajawal/Tajawal-Medium.woff');
    font-display: swap;
} 
@font-face
{
    font-family: 'Tajawal-Regular';
    src:  url('../../font/Tajawal/Tajawal-Regular.woff');
    font-display: swap;
}
@font-face
{
    font-family: 'Tajawal-ExtraBold';
    src:  url('../../font/Tajawal/Tajawal-ExtraBold.woff');
    font-display: swap;
}

@font-face
{
    font-family: 'Roboto-Bold';
    src:  url('../../font/Roboto/Roboto-Bold.ttf');
    font-display: swap;
}
@font-face
{
    font-family: 'Roboto-Medium';
    src:  url('../../font/Roboto/Roboto-Medium.ttf');
    font-display: swap;
} 
@font-face
{
    font-family: 'Roboto-Regular';
    src:  url('../../font/Roboto/Roboto-Regular.ttf');
    font-display: swap;
}

html, body{
    overflow-x: hidden;
    /* overflow-y: scroll; */
    position: relative;
    margin: 0!important;
    padding: 0!important;
}
.logo-index{
    z-index: 99;
}
.joinUs,
.joinUs:hover,
.joinUs:focus,
.joinUs:active{
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    color: #FFF!important;
    font-family: Tajawal-ExtraBold,Roboto-Bold;
    font-size: 15px;
    font-style: normal;
    line-height: normal;
    box-shadow: unset;
    border: unset;
}
.joinUs.gradient{
    background: linear-gradient(262deg, #05146E -0.17%, #707DCB 121.37%);
}
.joinUs.blue{
    background-color: #14B7C8;
}
.main-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 749px;
}
.main-title{
    color: #05146E;
    text-align: center;
    font-family: Tajawal-ExtraBold,Roboto-Bold;
    font-size: 40px;
    font-style: normal;
    line-height: 65.5px; /* 163.542% */
    letter-spacing: -1px;
}
.main-title .blue-text{
    background: linear-gradient(95deg, #14B7C8 15.66%, #415AE1 195.6%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.background1{
    z-index: -1;
    position: absolute;
    top: -2%;
}
.sub-title{
    color: #414666;
    text-align: center;
    font-family: Tajawal-Regular,Roboto-Regular;
    font-size: 18px;
    font-style: normal;
    line-height: 28px; /* 140% */
}
.section1-images{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.googleMeet{
    position: absolute;
    top: -25px;
    right: 2%;
    z-index: 6;
    /* display: none; */
}
.audioWave{
    position: absolute;
    top: 253px;
    right: -5%;
    z-index: 6;
    width: 288px; 
    height: 80px;
    /* display: none; */
}
.arrow1{
    position: absolute;
    top: 220px;
    left: 14%;
    z-index: 7;
    /* display: none; */
}
.list1{
    position: absolute;
    top: -46px;
    left: -6%;
    z-index: 6;
    width: 265px; 
    height: 350px;
    /* display: none; */
}
#section1{
    background-image: url(../../images/icons/section11.png);
    background-repeat: no-repeat;
    background-size: 100% 90%;
    background-position-y: -40%;
}
#ad-space{
    height: 630px;
    width: 980px;
}
.main-img{
display: none;
}
@-webkit-keyframes fadeIn {
    0% {  opacity: 0;}
    /* 50% { opacity: 0.4;} */
    100% { opacity: 1;}
}  
@keyframes fadeIn {
    0% {opacity: 0; }
    /* 50% { opacity: 0.4;} */
    100% {opacity: 1;}
}

.display-none{
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    animation-fill-mode: backwards;
}
.display-none-contnet{
    display: block;
    -webkit-animation: fadeIn 1.5s;
    animation: fadeIn 1.5s;
    animation-fill-mode: backwards;
}
/* section2 */
.sub-titles{
    color: #7781BB;
    text-align: center;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}
.main-titles{
    color: #05146E;
    text-align: center;
    font-family: Tajawal-Bold,Roboto-Bold;
    font-size: 27px;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1px;
}
#section2{
    margin-top: 77px;
}
.paragraph{
    color: rgba(30, 30, 30, 0.70);
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 18px;
    font-style: normal;
    line-height: 28px; /* 140% */
}
.w427{
    max-width: 462px;
}
.h380{
    height: 380px;
}
.meeting1{
    margin-right: -4.5%;
}
.meeting2{
    bottom: -20%;
    position: absolute;
    left: -1%;
}
.arrow2{
    position: absolute;
    bottom: 92%;
    right: -18%;
}
.arrow3{
    position: absolute;
    bottom: 103%;
    left: -17%;
}
/* section3 */
.background2{
    z-index: -1;
    position: absolute;
    top: 64px;
}
#section3{
    /* background-image: url('../images/icons/sectio3.png');
    background-repeat: no-repeat;
    height: 1162px;
    background-size: 100%; */
    background-color:#F0F2FF;
    height: 100vh;
    display: flex;
    align-items: center;
}
.whayDiv{
    display: flex;
    /* min-width: 467px; */
    /* height: 109px; */
    padding: 12px 24px;
    justify-content: flex-star;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(153, 169, 203, 0.20);
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0px 8px 16px 0px rgba(153, 165, 236, 0.20), 0px -8px 16px 0px rgba(153, 165, 236, 0.10);
}
.whyText{
    color: #000;
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}
/* .whayDiv:hover img{
    transform: scale(1.2);
    transition: .3s;
} */
.side-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

/* section4 */
.ejazScreen{
    height: 100%;
    width: 100%;
}
.ellipse-blue{
    position: absolute;
    left: 0;
    top: -29%;
    z-index: -1;
}
.ellipse-yellow{
    position: absolute;
    right: 0;
    top: -5%;
    z-index: -1;
}
.ellipse-blue2{
    position: absolute;
    left: 0;
    top: 21%;
    z-index: -1;
}
#section4{
    position: relative;
}
.arrowx21{
    position: absolute;
    left: 57%;
    top: 37%;
}
.arrowx22{
    position: absolute;
    left: 56%;
    top: 70%; 
}
#section5{
    background-color: #F3F5FF;
    height: 100vh;
    align-items: center;
    display: flex;
}
.aiText,.aiText:hover{
    color: rgba(30, 30, 30, 0.70)!important;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 19px;
    font-style: normal;
    line-height: 28px;
}
.aiText .blue{
    color: #14B7C8;
    text-align: right;
    font-family: Tajawal-Bold,Roboto-Bold;
}
.aiText .darkBlue{
    color: #05146E;
    text-align: right;
    font-family: Tajawal-ExtraBold,Roboto-Bold;
}
#section6{
    background-color: #05146E;
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    overflow-y: hidden;
}
.joinUsDiv{
    background-color: #05146E;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 582px;
    border-radius: 16px;
    padding: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px dashed rgba(211, 229, 255, 0.50);
    gap: 16px;
}
.joinEmail{
    color: #FFF;
    text-align: right;
    font-family: Tajawal-Regular,Roboto-Regular;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
}
.white{
    color: white;
}
.form-label,
.form-check-label,
.form-check-label:hover{
    color: #FFF;
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}
.form-check-input{
    border-radius: 4px;
    border: 1px solid rgba(186, 199, 244, 0.20);
    background: rgba(255, 255, 255, 0.20);
    width: 24px;
    height: 24px;
}
.joinInput{
    border-radius: 6px;
    border: 1px solid rgba(186, 199, 244, 0.20);
    background: rgba(255, 255, 255, 0.20);
    height: 50px;
    color: white;
    font-family:  Tajawal-Medium,Roboto-Medium;
    text-align: right;
}
.joinInput:focus
.form-check-input:focus{
    box-shadow: unset;
}
.joinInput::placeholder{
    color: rgba(255, 255, 255, 0.70);
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
}
.blur-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 7, 40, -0.14);
    backdrop-filter: blur(33.5px);
    z-index: 1;
}
.vector{
    position: absolute;
    top: -119%;
    right: 0;
}
.vector2{
    position: absolute;
    top: -161%;
    left: 0;
}
.z-index-2{
    z-index: 2;
}
.face1{
    position: absolute;
    top: -194%;
    /* bottom: 20%; */
    right: 18%;
    z-index: 2;
}
.face2 {
    position: absolute;
    top: -359%;
    right: 23%;
    z-index: 2;
}
.face3 {
    position: absolute;
    top: -199%;
    right: 1%;
    z-index: 2;
}
.face4 {
    position: absolute;
    top: -140%;
    right: 13%;
    z-index: 2;
}
.face5 {
    position: absolute;
    top: -255%;
    left: 4%;
    z-index: 2;
}
.face6 {
    position: absolute;
    top: -241%;
    left: 17%;
    z-index: 2;
}
.face7 {
    position: absolute;
    top: -227%;
    left: 6%;
    z-index: 2;
}
.face8 {
    position: absolute;
    top: -284%;
    left: 18%;
    z-index: 2;
}
.face9 {
    position: absolute;
    top: -250%;
    right: 2%;
    z-index: 2;
}


/* footer */
footer{
    background-color: #05146E;
    padding: 31px;
    padding-bottom: 0;
}
.contactFooter,
.footerLink,
.footerLink:focus,
.footerLink:active,
.footerLink:hover{

    color: rgba(255, 255, 255, 0.70);
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}
.contactFooter.menu,
.footerLink.menu,
.footerLink.menu:focus,
.footerLink.menu:active,
.footerLink.menu:hover{

    color: #7A83B5!important;
    text-align: right;
    font-family:  Tajawal-Medium,Roboto-Medium;
    font-size: 14px!important;
    font-style: normal;
    line-height: normal;
}
a,
a:hover {
    text-decoration: none !important;
    box-shadow: unset!important;
}
.bt{
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}
.join-footer{
    box-shadow: 0px -4px 16px 0px rgba(147, 147, 147, 0.25);
    background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    transition: all .2s ease-in;
}
.join-footer.active{
    /* position: fixed; */
    display: none!important;
}

/*navbar--start--*/
.language{
    color: #7781BB;
    text-align: center;
    font-family: Tajawal-Regular;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    display: contents;
}
.languageIcon{
    left: -30%;
    top: 0;
    position: absolute;
}
.hamburger {
    margin: 0 auto;
    /* margin-top: 30px; */
    width: 30px;
    height: 27px;
    position: relative;
}

.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 4px;
    background-color: #05146E;
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute; 
}
.hamburger .bar1{width: 20px;}
.hamburger .bar2{width: 30px;}
.hamburger .bar4{width: 15px;}
.bar1 {
    top: 4px;
}

.bar2,
.bar3 {
    top: 13.5px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}
.hamburger3 .bar1 {
    transform-origin: 5%;
}

.hamburger3 .bar4 {
    transform-origin: 5%;
}

/* .checkbox3:checked + label > .hamburger3 > .bar1{
    transform: rotate(45deg);
    height: 3px;
    width: 100%;
    top: 5px;
}

.checkbox3:checked + label > .hamburger3 > .bar3{
    transform: rotate(45deg);
    height: 3px;
    background-color: transparent;
}

.checkbox3:checked + label > .hamburger3 > .bar2{
    transform: rotate(-45deg);
    height: 3px;
    background-color: transparent;
}

.checkbox3:checked + label > .hamburger3 > .bar4{
    transform: rotate(-45deg);
    height: 3px;
    width: 100%;
} */
.bar1.active{
    transform: rotate(45deg);
    height: 3px;
    /* width: 42px; */
    width: 100%;
    top: 5px;
}

.bar3.active{
    transform: rotate(45deg);
    height: 3px;
    background-color: transparent;
}

.bar2.active{
    transform: rotate(-45deg);
    height: 3px;
    background-color: transparent;
}

.bar4.active{
    transform: rotate(-45deg);
    height: 3px;
    /* width: 42px; */
    width: 100%;
}



.navbar-style {
    position: sticky;
    top: 0;
    z-index: 999;
    background: transparent;
    width: 100%;
    height: 75px;
    padding: 24px 80px;
    border-bottom:  1px solid #F3F5FF;;
    animation: slideUp 0.35s ease-out;
    background-color: #ffff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
}
.navbar-style.active {
    position: fixed;
}
.main-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 30px;
}
.contact-link {
    font-family: "Poppins-Bold", sans-serif;
    font-size: 20px;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6699d5;
    color: white;
    text-decoration: none;
    width: fit-content;
    height: auto;
    padding: 10px 16px;
    transition: 0.3s;
    border-radius: 8px;
    border: 3px solid #6699d5;
    text-transform: capitalize;
    float: right;
}
.contact-link:hover {
    color: #6699d5;
    background-color: white;
    border: 3px solid #6699d5;
    transition: 0.3s;
}
.doubble-arrow {
    width: 20px;
    height: 15px;
    position: relative;
    bottom: 2px;
}
.doubble-arrow-blue {
    width: 20px;
    height: 15px;
    display: none;
}
.dropdown-menu {
    box-shadow: 0px 4px 16px rgba(184, 184, 184, 0.25);
    border-radius: 5px;
    border: none !important;
    left: 0;
    transition: 0.4s;
    background: #ffffff;
    width: 100%;
    min-width: 300px !important;
    padding: 8px 0 24px 0 !important;
}
.dropdown-menu li:not(:first-child) {
    margin-top: 5px;
}
.dropdown-item {
    font-family: Poppins-Regular, sans-serif;
    font-size: var(--font-size-16) !important;
    width: 100%;
    padding: 0 !important;
    clear: both;
    font-weight: 400;
    color: var(--primary-blue-color) !important;
    white-space: nowrap;
    background-color: rgb(0 0 0 / 0%);
    border: 0;
    text-align: initial;
    display: flex !important;
    align-items: center;
    gap: 12px;
}
.dropdown-item:hover {
    color: var(--primary-green-color) !important;
    background-color: #f5fbf7 !important;
    text-decoration: none;
}
.dropdown:hover .dropdown-menu {
    display: block;
    transition: 0.4s;
}
.border-after:hover.border-after::before {
    background-color: var(--primary-green-color);
}
.border-after::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 44px;
    background-color: var(--primary-green-color);
}
.border-after span {
    padding: 10px 12px;
}
.navbar-nav {
    gap: 30px;
}
.menu-nav-link,
.menu-nav-link:focus,
.dev-link,
.dev-link:focus,
.menu-nav-link:hover{
    position: relative;
    text-transform: capitalize;
    color: #7781BB!important;
    text-align: center;
    font-family: Tajawal-Regular;
    font-size: 17px;
    border: unset;
}
.menu-nav-link.active{
  color: #05146E!important;
  font-family: Tajawal-Bold;
}
.dev-link:hover {
    font-weight: bold;
    color: #6699d5 !important;
}
/* .menu-nav-link.active:after {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    background-color: #6699d5;
    border-radius: 50%;
} */
.dropdown-menu-link:hover.dropdown-menu-link::after {
    border-color: var(--primary-green-color);
    transform: rotate(45deg);
    transition: 0.4s;
    top: 20px;
}
.dropdown-menu-link::after {
    content: "";
    position: absolute;
    right: -7px;
    z-index: 11;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    top: 17px;
    transform: rotate(225deg);
    transition: 0.4s;
}
.bars-icon {
    font-size: 32px;
    cursor: pointer;
    position: relative;
    top: 1px;
    float: right;
    display: none;
}
.nav-flex {
    display: flex !important;
}
/* .navbar-nav-style {
    justify-content: center;
    align-items: center;
} */
.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 75px;
    left: 0;
    background: white;
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    height: 75%;
}

.overlay a,
.overlay a:hover,
.overlay a:focus {

    padding: 8px;
    text-decoration: none;
    font-size: 21px;
    color: #05146E !important;
    display: block;
    transition: 0.3s;
    text-transform: capitalize;
    position: relative;
    font-family: Tajawal-Medium;
    align-items: start;
    display: flex;
}
.overlay a.joinUs,
.overlay a.joinUs:hover,
.overlay a.joinUs:focus{
    color: white!important;
}
.overlay .closebtn {
    position: relative;
    width: fit-content;
    height: 80px;
    top: 0;
    right: 23px;
    display: flex;
    align-items: center;
}
.desktop-hide {
    display: none;
}
.mobile-hide {
    display: flex;
}
.logo-bars-div {
    display: none;
}

/**/
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .googleMeet{
        top: -27px;
        right: 107px;
    }
    .audioWave{
        top: 276px;
        right: 35px;
    }
    .arrow1{
        top: 246px;
        left: 250px;
    }
    .list1{
        top: -15px;
        left: 37px;
    } 
    .ellipse-blue{
        left: 0;
        top: -26%;
    }
    .ellipse-yellow{
        right: 0;
        top: -1%;
    }
    .ellipse-blue2{
        left: 0;
        top: 25%;
    }
    .vector{
        position: absolute;
        top: -119%;
        right: 0;
    }
    .vector2{
        position: absolute;
        top: -139%;
        left: 0;
    }
    .z-index-2{
        z-index: 2;
    }
    .face1{
        position: absolute;
        top: -162%;
        right: 18%;
        z-index: 2;
    }
    .face2 {
        position: absolute;
        top: -310%;
        right: 23%;
        z-index: 2;
    }
    .face3 {
        position: absolute;
        top: -181%;
        right: 1%;
        z-index: 2;
    }
    .face4 {
        position: absolute;
        top: -117%;
        right: 13%;
        z-index: 2;
    }
    .face5 {
        position: absolute;
        top: -229%;
        left: 4%;
        z-index: 2;
    }
    .face6 {
        position: absolute;
        top: -199%;
        left: 17%;
        z-index: 2;
    }
    .face7 {
        position: absolute;
        top: -184%;
        left: 6%;
        z-index: 2;
    }
    .face8 {
        position: absolute;
        top: -246%;
        left: 18%;
        z-index: 2;
    }
    .face9 {
        position: absolute;
        top: -227%;
        right: 2%;
        z-index: 2;
    }
    /* .face1{
        top: -208%;
        right: 18%;
    }
    .face2{
        top: -383%;
        right: 23%;
    }
    .face3{
        top: -234%;
        right: 1%;
    }
    .face4{
        top: -150%;
        right: 16%;
    }
    .face5{
        top: -273%;
        left: 4%;
    }
    .face6{
        top: -261%;
        left: 17%;
    }
    .face7{
        top: -239%;
        left: 6%;
    }
    .face8{
        top: -307%;
        left: 18%;
    }
    .face9{
        top: -266%;
        right: 2%;
    }
    .vector{
        position: absolute;
        top: -131%;
        right: 0;
    }
    .vector2{
        position: absolute;
        top: -178%;
        left: 0;
    } */
}
@media only screen and (min-width: 1601px) and (max-width: 1700px){
    .googleMeet{
        top: -27px;
        right: 9%;
    }
    .audioWave{
        top: 276px;
        right: 3%;
    }
    .arrow1{
        top: 246px;
        left: 20%;
    }
    .list1{
        top: -46px;
        left: 7%;
    } 
    .vector{
        position: absolute;
        top: -109%;
        right: 0;
    }
    .vector2{
        position: absolute;
        top: -112%;
        left: 0;
    }
    .z-index-2{
        z-index: 2;
    }
    .face1{
        position: absolute;
        top: -125%;
        right: 18%;
        z-index: 2;
    }
    .face2 {
        position: absolute;
        top: -270%;
        right: 23%;
        z-index: 2;
    }
    .face3 {
        position: absolute;
        top: -145%;
        right: 1%;
        z-index: 2;
    }
    .face4 {
        position: absolute;
        top: -89%;
        right: 13%;
        z-index: 2;
    }
    .face5 {
        position: absolute;
        top: -199%;
        left: 4%;
        z-index: 2;
    }
    .face6 {
        position: absolute;
        top: -173%;
        left: 17%;
        z-index: 2;
    }
    .face7 {
        position: absolute;
        top: -154%;
        left: 6%;
        z-index: 2;
    }
    .face8 {
        position: absolute;
        top: -204%;
        left: 18%;
        z-index: 2;
    }
    .face9 {
        position: absolute;
        top: -199%;
        right: 2%;
        z-index: 2;
    }
    #section3,#section5{
        height: unset;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

}
@media only screen and (min-width: 1701px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1500px;
    }
    .googleMeet{
        top: -27px;
        right: 14%;
    }
    .audioWave{
        top: 276px;
        right: 9%;
    }
    .arrow1{
        top: 246px;
        left: 20%;
    }
    .list1{
        top: -46px;
        left: 7%;
    } 
    #section3,#section5{
        height: unset;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .vector{
        position: absolute;
        top: -89%;
        right: 0;
    }
    .vector2{
        position: absolute;
        top: -100%;
        left: 0;
    }
    .z-index-2{
        z-index: 2;
    }
    .face1{
        position: absolute;
        top: -112%;
        right: 18%;
        z-index: 2;
    }
    .face2 {
        position: absolute;
        top: -259%;
        right: 23%;
        z-index: 2;
    }
    .face3 {
        position: absolute;
        top: -133%;
        right: 1%;
        z-index: 2;
    }
    .face4 {
        position: absolute;
        top: -74%;
        right: 13%;
        z-index: 2;
    }
    .face5 {
        position: absolute;
        top: -182%;
        left: 4%;
        z-index: 2;
    }
    .face6 {
        position: absolute;
        top: -158%;
        left: 17%;
        z-index: 2;
    }
    .face7 {
        position: absolute;
        top: -139%;
        left: 6%;
        z-index: 2;
    }
    .face8 {
        position: absolute;
        top: -189%;
        left: 18%;
        z-index: 2;
    }
    .face9 {
        position: absolute;
        top: -176%;
        right: 2%;
        z-index: 2;
    }
}



.error-message{
    font-size: 14px;
    font-family: 'Tajawal-Regular', sans-serif;
    line-height: 24px;
    color: #f00;
    margin-top: 1%;
}
.grecaptcha-badge {
    visibility: hidden !important;
}
#alert-msg-wrapper,#apply-success-msg-wrapper {
    background-color: white;
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 250px;
    display: flex;
    border-radius: 4px;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    inset: 0;
    margin: auto;
    box-shadow: 0 2px 8px #00000040;
    z-index: 999999;
}
.check-container {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px 10px rgba(#000, 0.05);
    width: 75px;
    height: 75px;
}
.check-circle,
.check-circle-border {
    width: 65px;
    height: 65px;
    border-radius: 50%;
}
.check-circle {
    z-index: 1;
    position: relative;
    background: white;
    transform: scale(1);
    animation: success-anim 700ms ease;
}
.check-circle-border {
    z-index: 0;
    position: absolute;
    background: #05146E;
    transform: scale(1.1);
    animation: circle-anim 400ms ease;
}

@keyframes success-anim {
    0% {
        transform: scale(0);
    }
    30% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes circle-anim {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1.1);
    }
}

.success::before,
.success::after {
    content: "";
    display: block;
    height: 4px;
    background: #05146E;
    position: absolute;
}

.success::before {
    width: 18px;
    top: 57%;
    left: 25%;
    transform: rotateZ(50deg);
}

.success::after {
    width: 30px;
    top: 50%;
    left: 35%;
    transform: rotateZ(-50deg);
}
.success-message-text {
    font-family: 'Tajawal-Regular', sans-serif;
    font-size: 22px;
    color: #05146E;
    text-align: center;
}
#alert-msg-overlay,#apply-success-msg-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
}
.join-text{
    line-height: 30px;
}
.send-text{
    display: none;
}
#spinner {
    animation: spin 1s linear infinite;
    display: none;
    display: flex;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}