.job-container-wrapper {
  	display: flex;
  	flex-direction: row;
  	width: 100%;
  	flex-wrap: wrap;
  	gap: 10px;
  	justify-content: center;

  }

  .job-container {

  	align-items: center;
  	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  	padding: 10px;
  	border-radius: 10px;
  	background: white;
  	margin: 5px;
  	opacity: 0;
  	transform: translateY(50px);
  	transition: opacity 0.8s ease-out, transform 0.8s ease-out;

  }

  .job-container.show {
  	opacity: 1;
  	transform: translateY(0);
  }



  .job-card {
  	border-radius: 15px;
  	padding: 20px;
  	width: 265px;
  	height: 240px;
  	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  	display: flex;
  	flex-direction: column;
  	justify-content: space-between;

  }



  .date-badge {
  	background: white;
  	border-radius: 15px;
  	padding: 8px 12px;
  	font-size: 15px;
  	font-weight: bold;
  }

  .bookmark {
  	background: white;
  	border-radius: 50%;
  	width: 30px;
  	height: 30px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-weight: bold;
  	cursor: pointer;
  	font-size: 1.2rem;
  }

  .tags {
  	margin-top: auto;
  	padding-top: 10px;
  	display: flex;
  	flex-wrap: wrap;
  	gap: 8px;
  }

  .tags span {
  	background: white;
  	padding: 5px 10px;
  	border-radius: 15px;
  	font-size: 12px;
  	font-weight: bold;
  	display: inline-block;
  	max-width: 100px;
  	/* Adjust width as needed */
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  }


  .details-btn {
  	background: black;
  	color: white;
  	border-radius: 15px;
  	padding: 5px 15px;
  	font-size: 14px;
  	border: none;
  	margin-right: 25px;
  	position: relative;
  	/* Ensures it's above other elements */
  	z-index: 10;
  	/* Higher than the job container */
  	cursor: pointer;
  	/* Ensures it's clickable */
  }

  .job-foot {
  	margin-top: 10px;
  	text-align: center;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	width: 100%;
  }

  h5.fw-bold {
  	margin-top: 20px;
  }



  .popup {
  	background: rgba(0, 0, 0, 0.6);
  	width: 100%;
  	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	display: none;
  	justify-content: center;
  	align-items: center;
  	z-index: 999;
  	box-sizing: border-box;

  }

  body.no-scroll {
  	overflow: hidden;
  }


  .hero-image-container {
  	position: relative;
  	width: 100%;
  	/* Full width */
  	height: 350px;
  	/* Adjust as needed */
  }

  .banner-image-job {
  	width: 100%;
  	/* Full width of the container */
  	height: 100%;
  	/* Set height to container's height */
  	object-fit: cover;
  	/* Ensures the image covers the container without distortion */
  }

  .hero-text {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	color: white;
  	/* Text color */
  	text-align: center;
  	font-size: 2rem;
  	font-weight: bold;
  }

  /* Button styling */

  #loginBtn {
  	position: absolute;
  	top: 0px;
  	right: 0px;
  	margin-right: 20px;
  	background-color: #ff5733;
  	color: white;
  	border: none;
  	padding: 6px 22px;
  	border-radius: 30px;
  	cursor: pointer;
  	font-size: 18px;
  	font-weight: bold;
  	transition: 0.3s ease;
  	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  	z-index: 10;
  	/* Ensure the button stays on top of the image */
  }

  .popup-content {
  	height: auto;
  	width: 370px;
  	background: #E9E9E9;
  	/* Soft background */
  	padding: 24px 50px;
  	/* Slightly larger padding for a spacious feel */
  	border-radius: 16px;
  	/* Smooth rounded corners */
  	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  	/* Soft shadow for depth */
  	border: 1px solid rgba(0, 0, 0, 0.05);
  	/* Light border for structure */
  	position: relative;
  	z-index: 1000;
  	font-family: 'Arial', sans-serif;
  	/* Clean font */
  	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  	/* Smooth animations */
  	opacity: 1;
  	/* Initial visibility */
  	transform: scale(1);
  	/* Default size */

  }

  .popup-content:hover {
  	transform: scale(1.02);
  	/* Slight scale-up on hover for interactivity */
  	opacity: 0.98;
  	/* Subtle opacity change */
  }



  .close {
  	position: absolute;
  	top: -9px;
  	right: -10px;
  	width: 22px;
  	height: 22px;
  	cursor: pointer;
  	transition: transform 0.2s ease-in-out;
  }

  .employer-popup {
  	background: rgba(0, 0, 0, 0.6);
  	width: 100%;
  	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	display: none;
  	justify-content: center;
  	align-items: center;
  	z-index: 999;
  	box-sizing: border-box;

  }

  .employer-popup-content {
  	height: auto;
  	width: 390px;
  	background: #E9E9E9;
  	/* Soft background */
  	padding: 24px 50px;
  	/* Slightly larger padding for a spacious feel */
  	border-radius: 16px;
  	/* Smooth rounded corners */
  	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  	/* Soft shadow for depth */
  	border: 1px solid rgba(0, 0, 0, 0.05);
  	/* Light border for structure */
  	position: relative;
  	z-index: 1000;
  	font-family: 'Arial', sans-serif;
  	/* Clean font */
  	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  	/* Smooth animations */
  	opacity: 1;
  	/* Initial visibility */
  	transform: scale(1);
  	/* Default size */

  }

  .employer-popup:hover {
  	transform: scale(1.02);
  	/* Slight scale-up on hover for interactivity */
  	opacity: 0.98;
  	/* Subtle opacity change */
  }


  /* Background overlay */
  .popupsign {
  	display: none;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: rgba(0, 0, 0, 0.6);
  	/* Dark overlay */
  	backdrop-filter: blur(8px);
  	/* Glass effect */
  	justify-content: center;
  	align-items: center;
  	z-index: 1000;
  }

  .popup-contentsign {
  	background: #E9E9E9;
  	/* Light transparent */
  	backdrop-filter: blur(15px);
  	width: 390px;
  	max-width: 430px;
  	padding: 25px;
  	border-radius: 15px;
  	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  	text-align: center;
  	position: relative;
  	display: none;
  	animation: fadeIn 0.3s ease-in-out;
  	border: 1px solid rgba(255, 255, 255, 0.3);
  	justify-content: center;
  }

  /* Close button */
  .closesign {
  	position: absolute;
  	top: -9px;
  	right: -10px;
  	width: 22px;
  	height: 22px;
  	cursor: pointer;
  	transition: transform 0.2s ease-in-out;
  }

  .closesign:hover {
  	transform: scale(1.2);
  }

  .employerclose {
  	position: absolute;
  	top: -9px;
  	right: -10px;
  	width: 22px;
  	height: 22px;
  	cursor: pointer;
  	transition: transform 0.2s ease-in-out;
  }

  .employerclose:hover {
  	transform: scale(1.2);
  }


  /* Form styling */
  .form-outline {
  	text-align: left;
  	margin-bottom: 15px;
  	position: relative;
  }

  /* Input fields */
  .form-outline input {
  	width: 100%;
  	border: 1px solid rgba(255, 255, 255, 0.3);
  	border-radius: 8px;
  	font-size: 15px;
  	transition: border-color 0.3s ease-in-out;
  	background: rgba(255, 255, 255, 0.9);
  	/* Light background for contrast */
  	color: #000000;
  	/* Black text */
  	outline: none;
  }

  /* Input focus effect */
  .form-outline input:focus {
  	border-color: #00b4d8;
  	background: rgba(255, 255, 255, 0.3);
  }

  /* Labels */
  .form-outline label {
  	font-size: 14px;
  	color: #f0f0f0;
  	position: absolute;
  	top: 50%;
  	left: 12px;
  	transform: translateY(-50%);
  	transition: 0.3s ease-in-out;
  	pointer-events: none;
  }

  /* Floating label effect */
  .form-outline input:focus+label,
  .form-outline input:not(:placeholder-shown)+label {
  	top: 5px;
  	font-size: 12px;
  	color: #00b4d8;
  }

  .form-control[type="date"] {
  	height: 53px;
  }

  /* Submit Button */
  .btn-primary {
  	background: linear-gradient(135deg, #007bff, #00b4d8);
  	color: white;
  	border: none;
  	padding: 7px 18px;
  	font-size: 17px;
  	border-radius: 8px;
  	cursor: pointer;
  	transition: 0.3s;
  	width: 100%;
  	font-weight: bold;
  	text-transform: uppercase;
  	box-shadow: 0 4px 10px rgba(0, 180, 216, 0.3);
  }

  .btn-primary:hover {
  	background: linear-gradient(135deg, #0056b3, #0096c7);
  	box-shadow: 0 6px 15px rgba(0, 180, 216, 0.5);
  }
  
  .employer-popup-sign {
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background: rgba(0, 0, 0, 0.6);
    	/* Dark overlay */
    	backdrop-filter: blur(8px);
    	/* Glass effect */
    	justify-content: center;
    	align-items: center;
    	z-index: 1000;
    }

    /* Popup container with glassmorphism */
    .employer-popup-contentsign {
    	background: #E9E9E9;
    	/* Light transparent */
    	backdrop-filter: blur(15px);
    	width: 90%;
    	max-width: 430px;
    	padding: 25px;
    	border-radius: 15px;
    	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    	text-align: center;
    	position: relative;
    	display: none;
    	animation: fadeIn 0.3s ease-in-out;
    	border: 1px solid rgba(255, 255, 255, 0.3);
    	justify-content: center;
    }

    /* Close button */
    .employer-closesign {
    	position: absolute;
    	top: -9px;
    	right: -10px;
    	width: 22px;
    	height: 22px;
    	cursor: pointer;
    	transition: transform 0.2s ease-in-out;
    }

    .employer-closesign:hover {
    	transform: scale(1.2);
    }

  /* Checkbox */
  .form-check {
  	font-size: 14px;
  	color: #e0e0e0;
  }

  /* Checkbox styling */
  .form-check-input {
  	accent-color: #00b4d8;
  }

  /* Fade-in animation */
  @keyframes fadeIn {
  	from {
  		opacity: 0;
  		transform: translateY(-10px);
  	}

  	to {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }

  /* Responsive design */
  @media (max-width: 500px) {
  	.popup-contentsign {
  		max-width: 95%;
  	}
  }