/* ==========================================
   Schematonics Walk-In Registration
========================================== */

body {
    background: #f4f7fb;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* Card */

.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    background: #0d6efd;
    color: white;
    padding: 30px;
}

.card-header h2 {
    font-weight: 700;
    margin-top: 10px;
}

.card-header p {
    margin-bottom: 0;
    opacity: .9;
}


/* Section Heading */

h3 {
    font-weight: 700;
    color: #0d6efd;
}

h4 {
    font-weight: 600;
    color: #0d6efd;
}

/* Labels */

.form-label,
label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Inputs */

.form-control,
.form-select {

    border-radius: 8px;
    min-height: 45px;
    border: 1px solid #ced4da;

}

.form-control:focus,
.form-select:focus {

    border-color: #0d6efd;

    box-shadow: 0 0 8px rgba(13,110,253,.25);

}

/* Cards */

.card-body {

    padding: 30px;

}

/* Small Cards */

.card .card-header {

    background: #eef5ff;
    color: #0d6efd;
    font-weight: 700;

}

/* Photo */

#video,
#photoPreview {

    width: 220px;
    height: 180px;

    object-fit: cover;

    border-radius: 10px;

    border: 2px solid #0d6efd;

    background: #fff;

}

/* Buttons */

.btn {

    border-radius: 8px;

    padding: 10px 25px;

    font-weight: 600;

}

.btn-success {

    margin-right: 8px;

}

/* Resume */

input[type=file] {

    padding: 10px;

}

/* Checkbox */

.form-check {

    background: #f8f9fa;

    padding: 18px;

    border-radius: 8px;

}

/* Submit Button */

.btn-primary {

    min-width: 220px;

    font-size: 18px;

}

/* HR Sections */

hr {

    margin-top: 40px;

    margin-bottom: 40px;

}

/* Responsive */

@media(max-width:991px){

    #video,
    #photoPreview{

        width:100%;

        height:auto;

    }

}

@media(max-width:768px){

    .card-body{

        padding:20px;

    }

    .card-header{

        padding:20px;

    }

    h2{

        font-size:26px;

    }

    h3{

        font-size:22px;

    }

    .btn{

        width:100%;

        margin-top:10px;

    }

}