*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
  background: radial-gradient(ellipse at 20% 50%, rgba(46,134,193,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(26,82,118,0.2) 0%, transparent 50%);
/* Wrapper */
.reg-wrapper{
    min-height:100vh;
    padding:90px 15px 50px;
}

/* Card */
.reg-card{
    background:#fff;
    border-radius:15px;
    overflow:visible;
    box-shadow:0 25px 60px rgba(0,0,0,.18);
    position:relative;
    max-width:950px;
    margin:auto;
}
/* Header */
.reg-header{
   background: linear-gradient(135deg, #000000, #2e86c1);
    border-top: 5px solid black;
    padding-top:40px;
    padding-bottom:5px;
    border-radius:15px 15px 0 0;
    text-align:center;
    color:#fff;
    position:relative;
}

/* Floating Logo */
.reg-header-img{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fff;
    border:2px solid #fff;
    position:absolute;
    top:-50px;
    left:50%;
    transform:translateX(-50%);
    z-index:99;
    box-shadow:
        0 0 0 3px #1a5276,
        0 14px 35px rgba(0,0,0,.22);
}

.reg-header-img img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.reg-header h4{
     font-size:1rem;
    font-weight:700;
    margin-bottom:6px;
    margin-top:10px;
}

.reg-header p{
    font-size:.88rem;
    opacity:.9;
}

/* Form Body */
.reg-body{
    padding:30px;
        border-bottom: 5px solid #215f89; 
            border-radius: 20px;
}

/* Section */
.section-title{
    background: linear-gradient(135deg, #000000, #2e86c1);
    color:#fff;
    padding:12px 18px;
    border-radius:10px;
    font-size:.9rem;
    font-weight:600;
    margin:22px 0 16px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 6px 18px rgba(46,134,193,.16);
}

/* Inputs */
.form-control,
.form-select{
    border:1.5px solid #dbe7f1;
    border-radius:12px;
    padding:13px 15px;
    font-size:.9rem;
    transition:.3s;
    background:#fff;
}

.form-control:focus,
.form-select:focus{
    border-color:#2e86c1;
    box-shadow:0 0 0 4px rgba(46,134,193,.12);
    outline:none;
}

.form-control.is-invalid,
.form-select.is-invalid{
    border-color:#e74c3c;
    box-shadow:0 0 0 4px rgba(231,76,60,.1);
}

/* Input group */
.input-group-text{
    background:#f8fbff;
    border:1.5px solid #dbe7f1;
    border-radius:12px 0 0 12px;
    color:#1a5276;
}

.input-group .form-control,
.input-group .form-select{
    border-radius:0 12px 12px 0;
}

/* Messages */
.check-msg{
    font-size:.78rem;
    margin-top:6px;
    display:none;
}

.check-msg.success{
    color:#27ae60;
    display:block;
}

.check-msg.error{
    color:#e74c3c;
    display:block;
}

.check-msg.loading{
    color:#888;
    display:block;
}

/* Spinner */
.spinner-inline{
    width:14px;
    height:14px;
    border:2px solid #ddd;
    border-top-color:#1a5276;
    border-radius:50%;
    display:inline-block;
    animation:spin .7s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* Error */
.field-error{
    color:#e74c3c;
    font-size:.78rem;
    margin-top:5px;
    display:none;
}
.field-error.show{
    display:block;
}

/* Upload */
.upload-area{
    border:2px dashed #1a5276;
    border-radius:14px;
    padding:25px;
    text-align:center;
    background:#f8fbff;
    cursor:pointer;
    transition:.3s;
}

.upload-area:hover{
    background:#edf7ff;
    transform:translateY(-2px);
}

.upload-area i{
    font-size:2rem;
    color:#1a5276;
    margin-bottom:8px;
}

/* Preview */
.photo-preview{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #1a5276;
    display:none;
    margin:15px auto 0;
}

/* DOB */
.dob-group{
    display:flex;
    gap:8px;
}

.dob-group select{
    flex:1;
}

/* Recaptcha */
.recaptcha-wrap{
    display:flex;
    justify-content:center;
    margin-top:15px;
}

/* Button */
.btn-submit{
    width:100%;
    border:none;
    border-radius:14px;
    padding:15px;
    /*background:linear-gradient(135deg,#1a5276,#2e86c1);*/
            background: linear-gradient(135deg, #000000, #2e86c1);

    color:#fff;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    letter-spacing:.5px;
}

.btn-submit:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(46,134,193,.25);
}

/* Preview Modal */
.preview-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.preview-overlay.active{
    display:flex;
}

.preview-box{
    background:#fff;
    border-radius:18px;
    max-width:760px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.preview-box-header{

    background: linear-gradient(135deg, #000000, #2e86c1);
    color:#fff;
    padding:20px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.preview-body{
    padding:28px;
}

.preview-section-title{
    font-weight:700;
    color:#1a5276;
    font-size:.85rem;
    text-transform:uppercase;
    border-bottom:2px solid #edf5fc;
    padding-bottom:6px;
    margin:20px 0 12px;
}

.preview-row{
    display:flex;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f2f2f2;
}

.preview-row .label{
    min-width:180px;
    color:#777;
    font-weight:500;
}

.preview-row .value{
    font-weight:600;
    color:#222;
}

.preview-photo{
    width:85px;
    height:85px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #1a5276;
    display:block;
    margin:auto;
}

.btn-preview-submit{
    background:linear-gradient(135deg,#27ae60,#1e8449);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:13px 28px;
    font-weight:700;
    cursor:pointer;
}

.btn-preview-back{
    background:#f0f0f0;
    border:none;
    border-radius:12px;
    padding:13px 28px;
    font-weight:600;
    cursor:pointer;
}

/* Mobile */
@media(max-width:768px){

    .reg-wrapper{
        padding-top:80px;
    }

    .reg-header{
        /*padding:75px 18px 25px;*/
         padding: 50px 22px 2px;
    }

    .reg-header-img{
        width:90px;
        height:90px;
        top:-55px;
    }
    .reg-header h4{
         transform: translateY(-50%);
    }
        .reg-header p {
         transform: translateY(-50%);
        }
    .reg-body{
        padding:20px;
    }

    .dob-group{
        flex-direction:column;
    }

    .preview-row{
        flex-direction:column;
    }

    .preview-row .label{
        min-width:auto;
    }
}