/* Start Var */
:root {
    --main-color: #003462;
    --second-color: #63be6a;
    --c-gray: #404554;
    --rounded-10: 15px;
    --main-duration: .3s;
}
/* End Var */



@font-face {
    font-family: 'keenicons-duotone';
    src: url('../../fonts/sstarabic-roman.woff2') format('woff2'), url('../../fonts/sst arabic light.ttf') format('truetype');
}

/* Start Components */
.t-duration {
    transition: var(--main-duration);
}

.c-white {
    color: #fff
}

.c-black {
    color: #000;
}

.c-primary {
    /* color: var(--main-color) !important; */
    color: #fff !important;
}

.c-primary-hover:hover {
    color: var(--main-color) !important;
}

.c-content {
    color: var(--second-color);
}

.c-content-hover:hover {
    color: var(--second-color);
}

.c-navbar-content {
    font-size: 20px;
    color: #fff !important;
    text-shadow: 0px 2px 3px black;
}

.c-gray {
    color: var(--c-gray);
}

.bg-primary {
    background-color: var(--main-color) !important;
}

.bg-secondray {
    background-color: var(--second-color) !important;
}

.bg-white {
    background-color: #fff !important;
}

.rounded-15 {
    border-radius: var(--rounded-10);
}

.rounded-top-left-15 {
    border-top-left-radius: var(--rounded-10);
}

.rounded-top-right-15 {
    border-top-right-radius: var(--rounded-10);
}

.rounded-bottom-left-15 {
    border-bottom-left-radius: var(--rounded-10);
}

.rounded-bottom-right-15 {
    border-bottom-right-radius: var(--rounded-10);
}

.gap-10 {
    gap: 10px;
}

.fs-25 {
    font-size: 25px;
}

a.bg-primary:hover {
    background-color: #4d8852 !important;
}

.fw-bold {
    font-weight: bold;
}

@media (max-width:767px) {
    .title-sec {
        font-size: 18px;
    }
}

.arrow-sec {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.filt {
    filter: invert(1) brightness(5);
}

.w-fit {
    width: fit-content;
}
/* End Components */

.NicAuth {
    cursor: not-allowed;
    border-radius: 15px;
}
/* Start Global Ruls */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    font-family: 'keenicons-duotone';
    margin: 0;
    direction: rtl;
}

section {
    background-color: #F2F2F2;
}

.bread {
    background-image: url(../img/auth-dark.jpg);
    background-size: cover;
}

ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

a {
    display: block;
    text-decoration: none;
}

    a:hover {
        color: white;
    }

::-webkit-scrollbar {
    width: 10px;
    ;
    scrollbar-width: thin;
}

::-webkit-scrollbar-track {
    background-color: #fff
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
}
/* End Global Ruls */
/* Start Navbar */
.navbar {
    background-color: rgba(255,255,255,0.5) !important;
    z-index: 10000;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.bread .navbar {
    /* box-shadow: none; */
}

.navbar .logo img {
    height: 70px;
}

.navbar .wall {
    position: relative;
}

    .navbar .wall::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        background-color: var(--second-color);
        height: 30px;
    }

@media (max-width: 1199px) {
    .navbar .menu {
        flex-direction: column;
        flex-basis: 100%;
        gap: 10px;
        margin-top: 10px !important;
        overflow: hidden;
        max-height: 0px;
    }

        .navbar .menu.active {
            max-height: 10000px;
            padding: 10px;
        }

        .navbar .menu .mega {
            gap: 10px;
        }
}
/* End Navbar */
/* Start Landnig */
/* Add these styles to your existing CSS */

/* Header Styles */
/* Default styles for larger screens */
.main-header {
    min-height: 750px;
    position: relative;
    background-color: transparent;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.header-image {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
}

.centered {
    position: absolute;
    top: 20%;
    text-align: right;
    direction: rtl;
    transform: translateX(-20vw) !important;
    transform: translate(-50%, -50%);
}

    .centered h1 {
        font-size: 80px;
        font-weight: bolder;
        text-shadow: 0px 2px 3px black;
    }

        .centered h1 span {
            display: block;
            margin: 11px 0 17px 0;
            font-size: 80px;
            line-height: 80px;
            color: #fff;
            text-shadow: 0 13.36px 8.896px #000,0 -2px 1px #fff;
            letter-spacing: -4px;
        }

@media (max-width: 760px) and (min-width: 401px ) {
    .main-header {
        min-height: 650px;
    }

    .centered h1 span {
        font-size: 40px;
    }
}

@media (max-width: 400px) {
    .main-header {
        min-height: 650px;
    }

    .centered h1 span {
        font-size: 40px;
    }
}
/* End Landnig */
/* Start review */
.review {
    transform: translateY(-20vw);
    background-color: rgba(255,255,255,0.5) !important;
    border-radius: 50px;
}

.reviewBtn {
    font-size: 20px;
    font-weight: bolder;
    border-radius: 50px;
}

.reviewInput {
    border: none;
    padding: 10px;
    border-radius: 5px;
}


/* End review */
/* Start Beneficiaries */
.beneficiaries .row .box:hover {
    background-color: var(--main-color) !important;
}

.beneficiaries .row .box img {
    width: 80px;
    height: 90px;
}

.beneficiaries .row .box:hover img {
    filter: invert(1) brightness(4);
}

.beneficiaries .row .box:hover p {
    color: #fff !important;
}
/* End Beneficiaries */
/* Start Questions */
.questions .buttons .title {
    background-color: #e6e6e6;
}

    .questions .buttons .title.active {
        background-color: var(--second-color);
        color: #fff;
    }

.questions .contents .content .topic {
    background-color: #f9f9f9;
}

.questions .contents .content .show i {
    transform: rotate(180deg);
}

.questions .contents .content .show + p {
    display: block !important;
}

.questions .dec {
    color: #404544 !important;
    text-align: right;
}
/* End Questions */
/* Start Footer */
footer .row .phone + .box img {
    width: 100px;
    border: 1px solid #ddd;
}

@media (max-width:767px) {
    footer .container .box {
        border-top: 1px solid #dddd;
    }

    footer .row .phone {
        order: 10;
    }
}

footer .links {
    border-top: 1px solid #dddd;
}
/* End Footer */
/* Start Content-sing */
.content-sign .title {
    transform: translateY(50%);
}

.content-sign .box {
    width: 500px;
    border-radius: 30px 0 30px 30px;
    padding: 50px 30px 30px;
    height: 500px
}

@media (max-width: 576px) {
    .content-sign .box {
        width: auto;
    }
}

.content-sign .form {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.07);
}

.content-sign form input {
    box-shadow: none !important;
    padding: 13px;
}
/*@media (min-width: 992px) {
  .content-sign .box-parent::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 5%);
    height: 100%;
    width: 2px;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.65) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  }
}*/

@media (min-width: 1200px) {
    .navbar > div {
        justify-content: flex-start !important;
        flex-grow: 1;
    }

    .navbar .logo {
        margin-left: 1.5rem !important;
    }

    .navbar .menu {
        flex-grow: 1;
    }

        .navbar .menu .mega {
            margin-right: auto !important;
        }
}


/* Start Contact */
.contact .box-dec img {
    width: 24px;
    height: 24px;
}

.contact .box-dec {
    background-color: #f9f9f9;
}
/* End Contact */
/* End Content-sing */


.form-floating > label {
    right: 0 !important;
    transform-origin: right !important;
}


.required {
    color: red;
}


.was-validated .form-control:valid, .form-control.is-valid {
    background-position: left calc(0.375em + 0.1875rem) center !important;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    background-position: left calc(0.375em + 0.1875rem) center;
}


/*Alert Error / Success*/

.certificate_container {
    color: #fff;
    position: relative;
    padding: 100px;
    margin: 35px 70px 5px;
    background-image: linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147));
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    text-align: center;
}

.hr {
    display: flex;
    flex-direction: row;
}

    .hr:before,
    .hr:after {
        content: "";
        flex: 1 1;
        border-bottom: 2px solid #fff;
        margin: auto;
    }

    .hr img {
        height: 100px;
        width: 100px;
        /*border-radius: 50%;*/
    }

.certificate_Search_container {
    position: relative;
    padding: 100px;
    margin: 10px 70px 35px;
}

    .certificate_Search_container input {
        width: 70%;
        padding: 0 30px;
        border-radius: 50px;
        border: none;
        font-weight: 600;
        font-size: 16px;
        text-transform: capitalize;
        position: relative;
        color: #333;
        height: 70px;
    }

    /*    .certificate_Search_container button {
        position: relative;
        right: 110px;
        height: 60px;
        color: #fff;
        background: #003462;
        border-radius: 50px;
        border: none;
        width: 100px;
        font-size: 21px !important;
    }

        .certificate_Search_container button:hover {
            background: #358c93;
        }
*/


    .certificate_Search_container button {
        position: relative;
        right: 110px;
        height: 60px;
        color: #fff;
        background: #003462;
        border-radius: 50px;
        border: none;
        width: 100px;
        font-size: 21px !important;
        transition: background-color 0.3s ease;
    }

        .certificate_Search_container button:hover {
            background: #358c93;
            animation: shake 0.5s;
        }

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.certificate_Detail_container {
    position: relative;
    padding: 100px;
    margin: 10px 70px 35px;
}

.Certificate_box {
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-left: 100px;
}

.Certificate_alert {
    font-family: sans-serif;
    text-align: center;
    /*background-color: #fff;
    margin-top: 25px;
    font-size: 25px;
    width: 300px;
    border: 1px solid #efefda;
    border-radius: 2%;
    box-shadow: 0px 0px 3px 1px #ccc;
    height: 100px;*/
    padding-top: 150px;
    position: relative;
}

    .Certificate_alert::before {
        width: 100px;
        height: 100px;
        position: absolute;
        border-radius: 100%;
        inset: 20px 0px 0px 100px;
        font-size: 60px;
        line-height: 100px;
        border: 5px solid gray;
        animation-name: reveal;
        animation-duration: 1.5s;
        animation-timing-function: ease-in-out;
    }

    .Certificate_alert > .Certificate_alert-body {
        opacity: 0;
        animation-name: reveal-message;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }

@keyframes reveal-message {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.Certificate_success {
    color: green;
}

    .Certificate_success::before {
        content: '✓';
        background-color: #eff;
        box-shadow: 0px 0px 12px 7px rgba(200,255,150,0.8) inset;
        border: 5px solid green;
    }

.Certificate_error {
    color: red;
}

    .Certificate_error::before {
        content: '✗';
        background-color: #fef;
        box-shadow: 0px 0px 12px 7px rgba(255,200,150,0.8) inset;
        border: 5px solid red;
    }

@keyframes reveal {
    0% {
        border: 5px solid transparent;
        color: transparent;
        box-shadow: 0px 0px 12px 7px rgba(255,250,250,0.8) inset;
        transform: rotate(1000deg);
    }

    25% {
        border-top: 5px solid gray;
        color: transparent;
        box-shadow: 0px 0px 17px 10px rgba(255,250,250,0.8) inset;
    }

    50% {
        border-right: 5px solid gray;
        border-left: 5px solid gray;
        color: transparent;
        box-shadow: 0px 0px 17px 10px rgba(200,200,200,0.8) inset;
    }

    75% {
        border-bottom: 5px solid gray;
        color: gray;
        box-shadow: 0px 0px 12px 7px rgba(200,200,200,0.8) inset;
    }

    100% {
        border: 5px solid gray;
        box-shadow: 0px 0px 12px 7px rgba(200,200,200,0.8) inset;
    }
}