/* body{
    padding-top: 70px;
} */
.banner {
    position: relative;
    width: 100%;
    height: 100%;
}
.career-banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 50vh;
    overflow: hidden;
    /* padding-top: 10%; Adjust the padding-top to control the space between banner and content */
}
.banner-text{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 25px;
  color: white;
  text-align: center;
}
.why-work-here-container{
    display: flex;
    flex-wrap: wrap;
    padding: 0 10%;
}
.why-work-point{
    background-color: #b3a3a32b;
    transition: background-color 0.3s, border-radius 0.3s; /* Add transition for smoother effect */
    border-radius: 25px;
    flex: 1;
    min-width: 100px; /* Set a minimum width for each item */
    border: 1px solid #ccc;
    padding: 2% 5%;
    margin: 10px;
    text-align: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.why-work-point:hover{
    background-color: #ffccbc; 
    border-radius: 55px; /* Adjust the hover border-radius value as needed */   
}

.career-enquiry-container{
    background-color: #b3a3a32b;
    text-align: center;
    padding: 1% 10% 2% 10%;
}

.career-enquiry-form-container{
    background-color: white;
    margin: 5%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Adjust the shadow properties as needed */
    padding: 20px; /* Add padding to the form container */
    border-radius: 8px; /* Optional: Add border-radius for rounded corners */

}

.career-enquiry-form{
    border: black;
    width: 100%;
}
.form-grid {
    display: flex;
    padding-bottom: 2%;
}

.career-form-col {
    flex: 1;
    flex-direction: column;
    gap: 2%;
}

.career-form-row {
    flex-direction: row;
    margin-bottom: 10px; /* Add margin for spacing between rows */
}

.phone-input-container {
    display: flex;
    width: 100%;
}

.phone-input {
    flex: 1;
    margin-right: 5px;
}

.phone-input[readonly] {
    max-width: 10%;
}

.career-button{
    padding: 10px 20px; font-size: 1.0rem; border-radius: 10%; 
                background-color: #ee5553; border-color: #ee5553; border: 0;
                cursor: pointer; color: white;
}
.career-button:hover{
    background-color: #af0505;
    color: white;

}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


input,
select,
textarea {
    border-style: none;
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 0;
    width: 100%;
    font-size: 1rem;
}

@media screen and (max-width: 1130px) {
    .career-banner-container{
        height: 70vh;
    }
}


@media (max-width: 750px) {
    .why-work-point {
      flex-basis: 100%; /* Make each item take 100% width on smaller screens */
    }
    .career-banner-container{
        height: 80vh;
    }
  }

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
    .form-grid {
        flex-direction: column; /* Change to a column layout */
    }

    .career-form-col {
        padding: 0; /* Remove padding for smaller screens */
    }

    .phone-input-container {
        display: flex; /* Ensure both phone inputs are displayed in a row */
        flex-direction: row; /* Display phone inputs in a row */
    }

    .phone-input {
        flex: 1; /* Equal width for both phone inputs */
        margin-right: 5px; /* Optional: Add margin between phone inputs */
    }

    .phone-input[readonly] {
        max-width: 30%; /* Adjust the max-width for readonly phone input */
    }
}