@charset "utf-8";

@font-face {
    font-family: Estedad;
    src: url('../font/Estedad-Light.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: Estedad;
    src: url('../font/Estedad-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: Estedad;
    src: url('https://cdn.jsdelivr.net/gh/aminabedi68/Estedad@master/Estedad-Bold.woff2') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: Estedad;
    src: url('https://cdn.jsdelivr.net/gh/aminabedi68/Estedad@master/Estedad-Black.woff2') format('woff2');
    font-weight: 900;
}

* {
    box-sizing: border-box;
    --bs-body-bg: #f0f0f0;
    --color-main: #116db8;
    --color-secondary: #00b4d5;
    --gradient-direction: to left;
    --color-gradient: linear-gradient(var(--gradient-direction), var(--color-main), var(--color-secondary));
}

body {
    font-family: Estedad, sans-serif;
    background-color: #f0f0f0;
}

.container {
    max-width: 550px;
}

.CertificateSec {
    padding: 2vw;
    padding-top: 5vw;
}

.CertificateSec img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 1px 6px 2px #d1d1d1;
}

.CertificateSec .download {
    background-image: url(/img/download.png);
    width: 45px;
    height: 45px;
    background-position: center;
    background-size: 67%;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px 2px #ccc;
    margin-top: 15px;
}

.head {
    width: 100%;
    height: 220px;
    position: relative;
}

.head .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    border-bottom-left-radius: 70% 30%;
    border-bottom-right-radius: 70% 30%;
    background: var(--color-gradient);
}

.head .logo {
    width: 85px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, 0);
}

.head h1 {
    font-size: 1.3em;
    color: #fff;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 330px;
    text-align: center;
    padding: 0 5px;
}

@media (max-width: 360px) {
    .head h1 {
        font-size: 1em;
        bottom: 30px;
    }
}

@media (max-width: 280px) {
    .head h1 {
        bottom: 20px;
    }
}

.card {
    border: none;
    box-shadow: 0 1px 5px 1px #d9d9d9;
    border-radius: 30px;
    overflow: hidden;
    margin-top: 30px;
}

.form-group {
    padding: 30px;
    direction: rtl;
}

.form-floating > label {
    right: 0;
    left: unset;
    color: #3b4e54;
    padding: 10px;
}

.form-group p {
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #5c7c87;
}

.form-group .title {
    display: none;
    font-size: 1rem;
    margin-bottom: 15px;
    color: #034a7a;
    font-weight: 500;
}

.form-group input {
    direction: ltr;
    font-weight: 500;
    color: #094872 !important;
    height: 45px !important;
    padding: 10px !important;
}

.capchaimg {
    height: 45px;
    width: auto;
}

.submit {
    width: 100%;
    border-radius: 10px;
    border: none;
    font-size: 1.2rem;
    padding: 10px;
    background: linear-gradient(to left, #04a3ce, #059fcc);
    color: #fff;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-0.3rem) translateX(1rem);
}