*,

*::before,

*::after {

    box-sizing: border-box;

}



:root {

    --blue-color: rgb(51, 85, 170);

}



body {

    background-color:#D9241C;

    /*background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);*/

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: 0;

    display: grid;

    place-items: center;

    min-height: 100vh;

    background-size:cover;

}



/* Global stylings */



label {

    display: block;

    margin-bottom: 0.5rem;

}



input,select,textarea{

    display: block;

    width: 100%;

    padding: 0.75rem;

    border: 1px solid #ccc;

    border-radius: 0.25rem;

    color:#000;

}



.ml-auto {

    margin-left: auto;

}





/* Form */



.form {

    background-color: #000;

    width: clamp(320px, 30%, 430px);

    margin: 0 auto;

    /*border: 1px solid #ccc;*/

    border-radius: 0.35rem;

    padding: 1.5rem;

    z-index: 1;

    color:#fff;

    min-height:270px;

    transform:translateY(15%);

}



.inputs {

    margin: 0.5rem 0;

}



.form-step {

    display: none;

}

.fl-right{

    float:right;

}

.form-step.active {

    display: block;

    transform-origin: top;

    animation: animate .5s;

}

.heading-hero-h1{

        font-size: 20px;

    text-transform: capitalize;

    background-color: #D9241C;

    padding: 5px;

    margin: 0;

}



/* Button */

.btn-group {

    display: flex;

    justify-content: space-between;

}



.btn {

    padding: 0.75rem;

    display: block;

    text-decoration: none;

    width: max-content;

    border-radius: 5px;

    text-align: center;

    transition: all 0.3s;

    cursor: pointer;

    background-color: var(--blue-color);

    color: white;

    float: right;

}



.btn-next {

    background-color: var(--blue-color);

    color: white;

    float: right;

}



.btn-prev {

    background-color: #777;

    color: #fff;

}



.btn:hover {

    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--blue-color);

}



textarea {

    resize: vertical;

}



/* Prefixes */



.input-box {

    display: flex;

    align-items: center;

    /* max-width: 300px; */

    background: #fff;

    border: 1px solid #a0a0a0;

    border-radius: 4px;

    padding-left: 0.5rem;

    overflow: hidden;

    font-family: sans-serif;

}



.input-box .prefix {

    font-weight: 300;

    font-size: 14px;

    color: rgb(117, 114, 114);

}



.input-box input {

    border: none;

    outline: none;

}



.input-box:focus-within {

    border-color: #777;

}



/* End Prefixes */





/* Progress bar */



.progress-bar-form {

    position: relative;

    display: flex;

    justify-content: space-between;

    counter-reset: step;

    margin-top:10px;

}



.progress-bar-form::before,

.progress {

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    height: 4px;

    width: 100%;

    background-color: #dcdcdc;

    z-index: 1;

}



.progress {

    background-color: var(--blue-color);

    width: 0;

    transition: .5s;

}



.progress-step {

    width: 35px;

    height: 35px;

    background-color: #dcdcdc;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color:#000;

    background-color:#fff;

    z-index:2;

}



.progress-step::before {

    counter-increment: step;

    content: counter(step);

}



.progress-step::after {

    content: attr(data-title);

    position: absolute;

    top: calc(100% + 0.20rem);

    font-size: 0.85rem;

    color: #fff !important;

}



.progress-step.active {

    background-color: var(--blue-color);

    color: white;

}



@keyframes animate {

    from {

        transform: scale(1, 0);

        opacity: 0;

    }



    to {

        transform: scale(1, 1);

        opacity: 1;

    }

}



/* End Progress bar */



/* Add Experience Btn */





.add-exp-btn {

    color: #577d4c;

    /*border-right: 2px solid #577d4c;*/

    /*border-bottom: 2px solid #577d4c;*/

    padding: 0 10px 10px 0;

    text-decoration: none;

    font-weight: 600;

    border-bottom-right-radius: 6px;

    cursor: pointer;

}



.add-experience {

    margin-bottom: 20px;

}

.alert-danger{

 color:red;

}

.succ-msg{

    background-color:green;

    color:#fff;

    padding:15px;

}

.danger-msg{

    background-color:red;

    color:#fff;

    padding:15px;

}

.pb-1{

    padding-bottom:5px;

}

#resend{

    display:none;

    text-decoration:underline;

    cursor:pointer;

    padding-bottom:5px;

}

.banner{

    background-image:url('../../images/SZ_Campaign.webp');

    background-size:cover;

    height:100vh;

    background-position:center;

}

.img-fit{

 width: -webkit-fill-available;

    margin: 0;

    height: 100vh;   

}

.bg-red{

    background-color:#D9241C;

    padding:5px;

}

.fs-20{

    font-size:20px;

}

.fs-18{

    font-size:18px;

}

.mt-10{

    margin-top:20px;

}

.mt-5{

    margin-top:10px;

}

.disclaimer-font{

    font-size:1.2rem;

    text-align:left;

    color:#D9241C;

}