body {
    font-family: 'Quicksand', sans-serif;
}
.bg-primary { background-color: #170f5f; }
.text-primary { color: #170f5f; }
.border-primary { border-color: #170f5f; }
.hover-primary:hover { background-color: #170f5f; opacity: 0.9; }
.bg-hero-pattern {
    background-image: linear-gradient(to right, rgba(23, 15, 95, 0.95), rgba(23, 15, 95, 0.85)), url('/api/placeholder/1920/400');
    background-size: cover;
    background-position: center;
}

header {
    transition: background-color 0.3s ease-in-out;
}

/*.background-container{*/
/*    height:82%;*/
/*}*/
    /* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 1vw;
border-radius: 0.5vw;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 50vw;
/* text-align: center; */
}
.close {
position: relative;
/*top: 1vw;*/
right: 0vw;
left:22vw;
background: none;
border: none;
font-size: 1.5vw;
cursor: pointer;
color:#170f5f;
}

.acc
{
display: flex;
flex-direction: column;
gap: 0.3vw;
}
.acc h2{
margin: 0;
font-size: 1.2vw;
font-weight: bold;
}
.acc p{
margin: 0;
font-size: 1vw;
width:30vw;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
/* width:20vw; */
height: 2.5vw;
background-color: #ddd;
border: 2px solid #ccc;
border-radius: 0.5vw;
overflow: hidden;
cursor: pointer;
margin-top: 1vw;
}

.toggle-button-card {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8vw;
font-weight: bold;
color: #333;

background-color: #f0f0f0;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
padding: 0.5vw;
border: none;
outline: none;
}

.toggle-button-card.active {
background-color: #fff;
color: black;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
height:3vw;
border-radius: 0.5vw;
}

.toggle-button-card.inactive {
background-color: #ddd;
color: #333;
}

.pdf-viewer {
width: 100%;
border: none;
margin-top: 1vw;
display: flex;
flex-direction: column;
gap: 0.3vw;
}
.pdf-viewer label{
font-size: 1vw;
font-weight: bold;
}
.pdf-viewer input{
border-radius: 0.5vw;
padding: 0.5vw;
font-size: 0.9vw;
}

.experience {
display: none;
font-size: 0.8vw;
color: #333;
margin-top: 1vw;
/*padding: 1vw;*/
}


.experience.active {
display: flex;
flex-direction: column;

}
.input
{
border-radius: 0.5vw;
/* padding: 0.5vw; */
font-size: 0.9vw;
border: 1px solid #c7d0d7;
display: flex;
flex-direction: row;
gap: 0.5vw;
/* justify-content: space-between; */
}
.input-group
{
display: flex;
flex-direction: column;
gap: 0.5vw;
}
.input-group input{
padding: 0.5vw;
border-radius: 0.5vw;
border: 1px solid #c7d0d7;
font-size: 0.8vw;
/*margin-top: 0.5vw;*/
margin-bottom: 0.5vw;
}

.input input{
border: none;
width: 22vw;
padding: 0.5vw;
}
.input:focus
{
border: none;
}
.input button{
border-left: 1px solid #c7d0d7;
padding-left: 0.5vw;
padding-right:0.5vw;
}

.cre-btn
{
border-radius: 0.5vw;
padding: 0.5vw;
font-size: 0.9vw;
background-color: #170f5f;
color: #fff;
margin-top: 1vw;
margin-bottom: 0.5vw;
width:100%;
}
#extraField label{
font-size: 1vw;
font-weight: bold;
}
#extraField input
{
padding: 0.5vw;
border-radius: 0.5vw;
font-size: 0.9vw;
border: 1px solid #c7d0d7;
}



.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

/* Modal Box */
.modal1 {
position: fixed;
top:1.5vh;
left:5vw;
width: 90vw;
height: 95vh;
background: white;
border-radius: 0.5vw;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
z-index: 1001;
overflow: hidden;
}

/* Close Button */
.close-btn {
position: absolute;
top: 1vw;
right: 1vw;
background: none;
border: none;
font-size: 1.5vw;
cursor: pointer;
color: #333;
}


.container1
{
padding: 2vw;
padding-top: 1vw;
display: flex;
flex-direction: column;
gap: 1vw;
}
.contain-1 h1
{
font-size: 1.4vw;
margin: 0;
}
.contain-1 p{
font-size: 1.1vw;
margin: 0; 
}
.stepper {
display: flex;
justify-content: space-around;
align-items: center;
/*padding: 0.5vh 0;*/

}

.item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* width: 16vw; */
}

.icon1,.icon2,.icon3,.icon4,.icon5 {
width: 2.5vw;
height: 2.5vw;
/* padding: 0.4vw; */
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
/* padding-top: 0.5vw; */
background-color: #e8ecf7;
/* margin-bottom: 1vh; */
}

.icon1.active,.icon2.active,.icon3.active,.icon4.active,.icon5.active {
background-color: #170f5f;
color: white;
}

.icon1 i,.icon2 i,.icon3 i,.icon4 i,.icon5 i{
font-size: 0.9vw;
/* margin-top: 1vw; */
/* fill: currentColor; */
}


.title {
font-size: 1vw;
font-weight: bold;
margin-bottom: 0.5vh;
}

.description {
font-size: 0.8vw;
color: #555;
width: 13vw;
}

.progress-bar-container {
width: 85vw;
/* margin: 2vh auto 0; */
background-color: #e8ecf7;
height: 0.7vh;
border-radius: 0.5vh;
overflow: hidden;
}

.progress-bar {
height: 100%;
width: 20%; /* Example progress, adjust dynamically */
background-color: #170f5f;
transition: width 0.3s ease-in-out;
}
.buttons
{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.but-1 button
{
border: 1px solid #c7d0d7;
font-size: 0.8vw;
border-radius: 0.5vw;
padding: 0.5vw;
cursor: pointer;
}
.but-2 button
{
border: 1px solid #c7d0d7;
font-size: 0.8vw;
border-radius: 0.5vw;
padding: 0.5vw;
cursor: pointer;
}
.but-2{
display: flex;
flex-direction: row;
gap:1vw;
}
.nxt
{
background-color: #170f5f;
color: #fff;
}
.content-1,.content-2,.content-3,.content-4
{
padding: 1vw;
background-color: white;
box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.1);
border-radius: 0.5vw;
display: flex;
flex-direction: column;
gap: 1vw;
height: 19vw;
overflow: auto;
backdrop-filter: none; 
}
.div
{
display: flex;
flex-direction: row;
gap: 0.5vw;
width: 70vw;
}

.div label{
font-size: 1vw;
width: 6vw;
align-content:center;
}
.div input,.div select{
padding: 0.5vw;
border-radius: 0.5vw;
border: 1px solid #c7d0d7;
font-size: 0.8vw;
width: 30vw;
}
.div textarea
{
padding: 0.5vw;
border-radius: 0.5vw;
border: 1px solid #c7d0d7; 
font-size: 0.8vw;

}
.content-5
{
padding: 1vw;
background-color: white;
box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.1);
border-radius: 0.5vw;
display: flex;
flex-direction: column;
gap: 1vw;
}
.div-1
{
display: flex;
flex-direction: column;
gap: 1vw;
border: 1px solid #c7d0d7;
border-radius: 0.5vw;
padding: 1vw;
}

.div-1{
display: flex;
flex-direction: row;
}
input[type="checkbox" i]
{
width: 1.1vw;
height: 1.1vw;
}
.div1
{
display: flex;
flex-direction: row;
gap: 2vw;
}
.div2
{
    display: flex;
flex-direction: row;
gap: 2vw;
}
.div2 label{
    width: 9vw;
}
.div3
{
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
}
.div3 label{
  font-size: 1vw;
  margin-top: -0.2vw;
}
#experienceFields
{
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
} 
.div-3 input[type="textarea"]
{
    padding: 0.5vw;
    border-radius: 0.5vw;
    font-size: 0.9vw;
    border: 1px solid #c7d0d7;
}
.div-file
{
    padding: 0.5vw;
    border-radius: 0.5vw;
    font-size: 0.9vw;
    /* border: 1px solid #c7d0d7; */
}
input[type="file" i]
{
    padding: 0.2vw;
    border-radius: 0.5vw;
    font-size: 0.9vw;
    border: 1px solid #c7d0d7;
    padding-left: 1vw;
}
.div-3
{
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}
.div-3 label{
    font-size: 1vw;
}
.div-3 input{
    padding: 0.5vw;
    border-radius: 0.5vw;
    font-size: 0.9vw;
    border: 1px solid #c7d0d7;
}
.div-3 h3
{
    margin:0;
    font-size:1.1vw;
    color:#170f5f;
}
.div-radio
{
    display: flex;
flex-direction: row;
gap: 0.5vw;

}

 .switch-wrapper {
        position: relative;
        display: inline-block;
        width: 3vw;
        height: 3vh;
    }

    .switch-wrapper input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 3vh;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 2.5vh;
        width: 2.5vh;
        left: 0.3vh;
        bottom: 0.3vh;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #170f5f;
    }

    input:checked + .slider:before {
        transform: translateX(1.5vw);
    }

    .toggle-text {
        font-size: 1vw;
        /*margin-left: 1vw;*/
        vertical-align: middle;
    }
#otpTimer{
             border-left:1px solid #ddd;
             align-content:center;
             padding-left:0.5vw;
             padding-right:0.5vw;
         }
         .gen-para
{
    font-size:1vw;
}
  

         
.upload,.resume
{
    font-size:1.1vw;
}
.span-res
{
    font-size:0.8vw;
}
.file-res
{
    font-size:0.8vw;
    padding:0.5vw;
    margin-top:0.5vw;
}
 @media screen and (min-width: 768px) and (max-width: 1024px) {
    .modal-content {
        max-width: 80vw;
        padding: 2vw;
    }

    .close {
        font-size: 1.5vw;
        top: 0.5vw;
        right: 0.5vw;
    }

    .acc h2 {
        font-size: 1.8vw;
    }

    .acc p {
        font-size: 1.5vw;
        width:70vw;
    }

    .toggle-container {
        height: 3.5vw;
    }

    .toggle-button-card {
        font-size: 1.2vw;
        padding: 0.8vw;
    }

    .toggle-button-card.active {
        height: 4vw;
    }

    .pdf-viewer label {
        font-size: 1.5vw;
    }

    .pdf-viewer input {
        font-size: 1.3vw;
        padding: 0.8vw;
    }

    .input input {
        width: 30vw;
        padding: 1vw;
    }

    .input-group input {
        font-size: 1.2vw;
        padding: 0.8vw;
    }

    .cre-btn {
        font-size: 1.3vw;
        padding: 0.8vw;
    }

    #extraField label {
        font-size: 1.5vw;
    }

    #extraField input {
        font-size: 1.3vw;
        padding: 0.8vw;
    }
}

/* Mobile Styles (up to 767px) */
@media screen and (max-width: 767px) {
    header{
        background-color:white !important;
    }
    .modal-content {
        max-width: 95vw;
        padding: 3vw;
        margin: 0 auto;
    }

    .close {
        font-size: 2vw;
        top: 0.5vw;
        right: 0.5vw;
    }

    .acc h2 {
        font-size: 3vw;
    }

    .acc p {
        font-size: 2.3vw;
        width:70vw;
    }

    .toggle-container {
        height: 4.5vw;
        margin-top: 2vw;
    }

    .toggle-button-card {
        font-size: 2vw;
        padding: 1vw;
    }

    .toggle-button-card.active {
        height: 5vw;
    }

    .pdf-viewer label {
        font-size: 2.5vw;
    }

    .pdf-viewer input {
        font-size: 1.6vw;
        padding: 1vw;
    }

    .input {
        flex-direction: row;
        gap: 1vw;
    }

    .input input {
        width: 77%;
        /*padding: 1.2vw;*/
        font-size: 2vw;
    }

    .input-group input {
        font-size: 2vw;
        padding: 1vw;
    }

    .cre-btn{
        font-size: 2vw;
        padding: 1vw;
    }
    #verifyCaptcha 
    {
        border-radius: 0.5vw;
        font-size: 2vw;
        padding: 0.3vw;
    }

    #extraField label {
        font-size: 2.5vw;
    }

    #extraField input {
        font-size: 2vw;
        padding: 1vw;
    }
    .input button
    {
        font-size:2vw;
    }
    #otpTimer
    {
        font-size:2vw;
    }
}


/* Tablet Styles (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .modal-overlay {
        width: 100%;
        height: 100%;
    }
        .content-1, .content-2, .content-3, .content-4, .content-5 
        {
            height:auto;
        }
    .modal1 {
        top: 9vh;
        /*left: 2vw;*/
        width: 90vw;
        height: 80vh;
        border-radius: 1.5vw;
    }

    .close-btn {
        font-size: 2.5vw;
    }

    .container1 {
        padding: 1.5vw;
        gap: 1.5vw;
    }

    .contain-1 h1 {
        font-size: 2vw;
    }

    .contain-1 p {
        font-size: 1.6vw;
    }

    .stepper {
        flex-wrap: wrap;
    }

    .item {
        margin-bottom: 1vh;
    }

    .icon1, .icon2, .icon3, .icon4, .icon5 {
        width: 3.5vw;
        height: 3.5vw;
    }

    .icon1 i, .icon2 i, .icon3 i, .icon4 i, .icon5 i {
        font-size: 1.5vw;
    }

    .title {
        font-size: 1.5vw;
    }

    .description {
        font-size: 1.3vw;
        width: 18vw;
    }

    .progress-bar-container {
        width: 90vw;
    }

    .but-1 button, .but-2 button,#submitBtn {
        font-size: 1.2vw;
        border: 1px solid #c7d0d7;
        /*font-size: 0.8vw;*/
        border-radius: 0.5vw;
        padding: 0.5vw;
        cursor: pointer;
    }

    .div {
        flex-direction: column;
        width: 80vw;
    }

    .div label {
        font-size: 1.5vw;
        width: 100%;
        margin-bottom: 0.5vh;
    }

    .div input, .div select, .div textarea {
        font-size: 1.5vw;
        width: 100%;
    }
      .switch-wrapper {
        width: 2rem;
        height: 1rem;
    }

    .slider:before {
        height: 0.8rem;
        width: 0.8rem;
    }

    input:checked + .slider:before {
        transform: translateX(0.8rem);
    }
    .div1,.div2
    {
        display:flex;
        flex-direction:column;
    }
    .gen-para
{
    font-size:2.2vw;
    margin:1vw;
}
.upload
{
    font-size:1.5vw;
}
.resume,.span-res
{
    font-size:1.4vw;
}
.file-res
{
    font-size:1.4vw;
    padding:0.5vw;
    margin-top:0.5vw;
}
 .div-3 h3
 {
     font-size:1.4vw;
 }
}

/* Mobile Styles (up to 767px) */
@media screen and (max-width: 767px) {
    .timeotp {
        /*color: #170f5f;*/
        font-size: 1.5vw !important;
        /*display: inline-block;*/
        padding: 0.5vw;
        border-radius: 0.5vw;
        background: rgba(23, 15, 95, 0.05);
    }

    #resendOTP{
        background: transparent;
        color: #170f5f;
        border: 1px solid #170f5f ;
        padding:0.5vw;
        border-radius: 0.5vw;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1.5vw !important;
    }
    .min-h-screen{
        height:220vh;
    }
    .background-container{
        height:100%;
    }
    .modal-overlay {
        width: 100%;
        height: 100%;
    }

    .modal1 {
        top: 2vh;
        left: 2.8vw;
        width: 95vw;
        height: 96vh;
        border-radius: 0;
    }

    .close-btn {
        font-size: 4vw;
        top: 2vw;
        right: 2vw;
    }

    .container1 {
        padding: 2vw;
        gap: 2vw;
    }

    .contain-1 h1 {
        font-size: 3vw;
    }

    .contain-1 p {
        font-size: 2.5vw;
    }

    .stepper {
        flex-direction: row;
        align-items: stretch;
    }

    .item {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 1vh;
    }

    .icon1, .icon2, .icon3, .icon4, .icon5 {
        width: 5vw;
        height: 5vw;
        margin-right: 2vw;
    }

    .icon1 i, .icon2 i, .icon3 i, .icon4 i, .icon5 i {
        font-size: 2.5vw;
    }

    .title {
        font-size: 2.5vw;
        text-align: left;
    }

    .description {
        font-size: 2vw;
        text-align: left;
        width: 100%;
    }

    .progress-bar-container {
        width: 100%;
    }

    .buttons {
        flex-direction: row;
        /*gap: 1vw;*/
    }

    .but-1 button, .but-2 button {
        font-size: 2.5vw;
        width: 100%;
    }
    #submitBtn
    {
        font-size: 2.5vw;
        border: 1px solid #c7d0d7;
        /*font-size: 0.8vw;*/
        border-radius: 0.5vw;
        padding: 0.5vw;
        cursor: pointer;
    }
    .note
    {
        font-size:2vw;
        margin-top:-1vw;
    }
    

    .content-1, .content-2, .content-3, .content-4, .content-5 {
        height: 100vw;
    }

    .div {
        flex-direction: column;
        width: 100%;
    }

    .div label {
        font-size: 2.5vw;
        width: 100%;
        margin-bottom: 1vh;
    }

    .div input, .div select, .div textarea {
        font-size: 2.5vw;
        width: 100%;
    }

    .switch-wrapper {
        width: 6vw;
    }
    .div1,.div2
    {
        display:flex;
        flex-direction:column;
    }
    .toggle-text {
        font-size: 2.5vw;
    }
    .div3 {
        flex-direction: row;
        /*gap: 2rem;*/
    }

    .div3 label, 
    .div-3 label {
        font-size: 2.5vw;
    }

    .div-3 input,
    .div-3 textarea {
        font-size: 1.8vw;
        padding: 1vw;
    }

    .div-radio {
        flex-direction: row;
        gap: 1rem;
    }

    .switch-wrapper {
        width: 2rem;
        height: 1rem;
    }

    .slider:before {
        height: 0.8rem;
        width: 0.8rem;
    }

    input:checked + .slider:before {
        transform: translateX(0.8rem);
    }
    input[type="checkbox" i]
{
width: 2.5vw;
height: 2.5vw;
}
.gen-para
{
    font-size:2.2vw;
    margin:0;
}
.upload
{
    font-size:3vw;
}
.resume,.span-res
{
    font-size:2.5vw;
}
.file-res
{
    font-size:2vw;
    padding:0.5vw;
    margin-top:0.5vw;
}
 .div-3 h3
 {
     font-size:2.5vw;
 }
}