.ribbon {
    position: absolute;
    top: 0; /* Aligns the ribbon to the top edge */
    left: 0; /* Aligns the ribbon to the left edge */
    width: 80%;
    height:15%; /* Makes the ribbon span the entire width of the box */
    background: #82c6a3; /* Green background */
    color: white;
    text-align: center;
    padding: 10px 0; /* Adjusts the height of the ribbon */
    font-size: 14px;
    font-weight: bold;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.card {
    position: relative; /* Ensures the ribbon is positioned relative to the card */
    overflow: hidden;
}



.stepper-horizontal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.step {
    text-align: center;
    cursor: pointer;
    flex: 1;
}
.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
}
.step-title {
    font-weight: 500;
}
.active .step-circle {
    background-color: #28a745;
}
.step:not(.active) .step-title {
    color: #6c757d;
}

.form-control-emp {
    padding: 10px; /* Adjust padding as needed */
  }

  /* Optional: if you want to add consistent padding to select fields as well */
  select.form-control-emp {
    padding: 10px;
  }




/*for mini job

/* Container to hold multiple job cards and allow wrapping */
 .job-card-container {
    display: flex;
    gap: 10px; /*Space between the cards  */
    justify-content: center; /* Center the cards horizontally */
    flex-wrap: wrap; /* Wrap the cards if screen is too small */
    padding: 5px; 
    /* width: 90%;
    max-width:1200px; */
}  
.col-md-3 {
    padding-left: 5px; /* Adjust as necessary */
    padding-right: 5px; /* Adjust as necessary */
}
  .redirect-button-container {
    text-align: left; /* Aligns the button to the right side */
    margin-left: 950px;
  }

  .redirect-button {
    background-color: #007bff; /* Bootstrap Primary color */
    color: white;
    border: none;
  }

  .redirect-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color: white;
  }
/* Outer container for each card */
.outer-container {
    width: 470; /* Adjust the width of each card */
    background-color: white;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* Slight shadow for the outer box */
    margin: 5px;
}/* Inner job card (base styles) */
.job-card {
    /* width: 100%; */
    border-radius: 15px;
    padding: 15px;
    font-family: Arial, sans-serif;
    margin-bottom:0px;
}

/* Specific background colors */
.job-card-pink {
    background-color: #fbe9e7; /* Pastel pink background */
}

.job-card-blue {
    background-color: grey; /* Pastel blue background */
}

.job-card-green {
    background-color: #d9f1e4;
     /* Pastel green background */
}

.job-card-grey {
    background-color: #d3d3d3;
}

.job-card-yellow{
    background-color: #d3d3d3;
}
.job-card-purple{
    background-color: #f7dcf2;
}


/* Date */
.job-date {
    background-color: white;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}

/* Job title and company logo */
.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

/* Badges for job details */
.job-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.job-tag {
    background-color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.job-batchs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.job-batch {
    background-color:  #5cb085;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* Salary and location */
.job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.job-salary {
    font-size: 18px;
    font-weight: bold;
}

.job-location {
    font-size: 14px;
    color: gray;
    /* margin-right: 50px; */
}

.job-location-container{
    display:flex;

}

/* Apply or Details button */
.job-button {
    background-color:  #82c6a3;
    color: black;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    border: 4px solid transparent;
    cursor: pointer;
    margin-right: 5px;
    box-sizing: border-box;
    transition:all 0.1s ease;
}

.job-button:hover {
    background-color: #82c6a3;
    border: 4px solid  #5cb085;
    color: black;
    font-size: 14px;

}

.job-buttonn {
    background-color: transparent;
    color: black;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid transparent;
    /* cursor: pointer; */
    margin-right: 5px;
    /* box-sizing: border-box; */
    /* transition:all 0.1s ease; */
}

/* .job-buttonn:hover{
    background-color: #c6ecd7;
    /* border: 4px solid  #5cb085;
    color: black;
    font-size: 14px; */

 */

.job-save {
    background-color: #d9f1e4;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 5px;
}

.save-button{
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    position: absolute;
    right: 10px; /* Adjust to align on the right */
    top: 10px;
}

.save-button i {
    color: black; /* Default icon color */
  }
  
  .save-button.active {
    background-color: #007bff; /* Blue background for active state */
  }
  
  .save-button.active i {
    color: white; /* Change icon color when active */
  }