#signUpButton {
    /* padding: 10px 20px; */
    font-size: 16px;
}




.aleart{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    right: 12px;
    margin-top: -345px;
}



/* Styling for the modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal content */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    margin-top: 94px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    /* max-width: 400px; */
    text-align: center;
    align-items: center;
    justify-content: center;

    
}
.modal-content img{
    /* border-radius: 50px; */
    width: 70px;
    /* border: 3px solid #483577; */
}

.modal-content button {
    margin: 10px;
    /* padding: 10px 20px; */
    font-size: 16px;
    background-color: #483577;
    color: white;
    width: 123px;
    height: 35px;
    border-radius: 10px;
}




.job-category-card {
    margin-bottom: 1rem;
    border: 1px solid #ddd; /* Light border for the card */
    border-radius: 0.25rem; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.card-body {
    padding: 1.5rem;
}
.job-category-link {
    color: black; /* Bootstrap's primary blue color */
    text-decoration: underline; /* Underline text */
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.1rem; /* Slightly larger font size */
    font-weight: 500; /* Medium font weight */
}
.job-category-link:hover {
    color: #0056b3; /* Darker shade of blue for hover effect */
}
.card-header {
    background-color: #f8f9fa; /* Light background for header */
    border-bottom: 1px solid #ddd; /* Border below the header */
    padding: 1rem;
    font-size: 1.25rem; /* Slightly larger font size */
    font-weight: 600; /* Bold font weight */
}

/* Close button */
.close {
    color: #8A3224;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}       
       
       
       /* Add some basic styling */
        .signup-options {
            display: none;
            margin-top: 20px;
        }

        .signup-options button {
            margin: 5px;
        }


.page_button{
    display: flex;
    /* margin: 40px; */
    gap: 20px;
    margin-top: 5px;
    align-items: center;
    justify-content: center;
    /* margin-left: -40px; */
    margin-top: 90px;
    margin-bottom: -140px;
}


.page_button button{
    /* background-color: #483577; */
    color: rgb(0, 0, 0);
    width: 147px;
    height: 35px;
    box-shadow: 1px 1px 3px 3px lightblue;
    border-radius: 10px;
}

.job-card {
    transition: transform 0.2s;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
/*.job-card:hover {*/
/*    transform: scale(1.05);*/
/*}*/

.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Add a dark overlay for better text readability */
    z-index: 1;
}
.job-card .card-body {
    position: relative;
    z-index: 2;
   
}

.btn-custom {
    background-color: #3D1053;
    color: #fff;
    border-color: #3D1053;
    margin-top: 10px;
}

.btn-custom:hover {
    background-color: #2C083D;
    color: #fff;
   
}
.custom-heading {
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    color: #3D1053;
}

.btn-purple {
    background-color: #3D1053;
    color: #fff;
    border-color: #3D1053;
}
.btn-purple:hover {
    background-color: #2C083D;
    color: #fff;
}
.custom-heading {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: #3D1053;
}




.job-box {
    position: relative;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
    height: 150px; /* Adjust the height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

.job-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.job-box > span {
    position: relative;
    z-index: 2;
}

.job-box.federal {
    background-image: url('https://example.com/federal-job.jpg'); /* Replace with federal job image */
}

.job-box.military {
    background-image: url('https://example.com/military-job.jpg'); /* Replace with military job image */
}

.heading-box {
    background-image: url('https://th.bing.com/th/id/OIP.JAoE81Qm2XQG8lvpp8PFdgAAAA?rs=1&pid=ImgDetMain'); /* Replace with your heading background image URL */
    background-size: cover;
    background-position: center;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: #b9b8b8; /* Change text color for better visibility */
    border: 0.1px;
}


.custom-heading {
    color: #3D1053;
}

.job-box.punjab {
    background-image: url('https://th.bing.com/th/id/OIP.7BvPGY0gVRLE0UTJ-BHnBwAAAA?w=474&h=316&rs=1&pid=ImgDetMain');
}
.job-box.sindh {
    background-image: url('https://pakistantourntravel.com/wp-content/uploads/2018/11/Mazar-e-Quaid.jpg');
}
.job-box.kp {
    background-image: url('https://th.bing.com/th/id/OIP.Rh6c4l5mstzN9wZH7eEQ1wHaE8?rs=1&pid=ImgDetMain');
}
.job-box.balochistan {
    background-image: url('https://www.holidayweekly.pk/wp-content/uploads/2023/02/Governor-Punjab-Directs-Commissioner-To-Prepare-Master-Plan-For-Bahawalpur.jpg');
}
.job-box.gilgit {
    background-image: url('https://zameenblog.s3.amazonaws.com/blog/wp-content/uploads/2019/05/image-7-4-1.jpg');
}
.job-box.ajk {
    background-image: url('https://pyaraskardu.com/wp-content/uploads/2022/10/Title-Neelum-Valley-Azad-Kashmir-1-960x636.jpg');
}

.job-box.federal {
    background-image: url('https://i0.wp.com/kitaab.com.pk/wp-content/uploads/2015/10/pakistan-armed-forces.jpeg'); /* Replace with a federal job image */
}
.job-box.military {
    background-image: url('https://arynews.tv/wp-content/uploads/2020/09/Punjab-police-reshuffle.jpg'); /* Replace with a military job image */
}


/* gigs content  */
.gig-card {
    /* background: rgba(0, 0, 0, 0.1); */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .gig-info {
    flex-grow: 1;
  }
  .gig-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
  }
  .gig-details {
    font-size: 0.875rem;
    color: #777;
    margin-top: 10px;
  }
  .gig-description {
    font-size: 0.875rem;
    color: #555;
    margin-top: 10px;
  }
  .view-button {
      background-color: #3D1053;
  color: #fff;
  border-color: #3D1053;
  margin-top: 10px;
  }
  .view-button:hover {
    background-color: #005582;
    border-color: #005582;
  }



  .gig-user-name {
    font-weight: bold;
    color: #333;
}

.custom-heading1 {
    font-size: 1.5em;
    margin: 0;
}

.gig-description {
    margin-top: 10px;
    color: #555;
}



h1 {
    color: #3D1053;
    text-align: left;
}
.nav-link.active {
    background-color: #3D1053;
    color: white; /* Optional: Adjust text color for better contrast */
}

.apply-button {
    background-color: #3D1053;
    border-color: #3D1053;
}

/* Custom CSS */
.company-card {
    width: 45%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin: 10px;
    background-color: #fff;
}
.company-card img {
    /* max-height: 100px; */
    width: 70px;
    border-radius: 50px;
    margin-bottom: 10px;
}
.company-card h6 {
    font-size: .8rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.company-card p {
    font-size: 0.9rem;
    color: #555;
}
.carousel-inner {
    margin-top: 20px;
}