* {
    margin: 0;
    padding: 0;
}
body{
    margin-top: 20px;
    font-family: poppins;
}
.section{
    padding: 100px 0;
    position: relative;
}
.section-title h2 {
    font-weight: 700;
    color: #000000;
    padding-left: 20px;
    font-size: 45px;
    margin: 0 0 20px;
    position: relative; /* Required for absolute positioning of pseudo-element */
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 0.5s ease-out forwards;

}

.section-title h2::before {
    content: ""; /* Create an empty pseudo-element for the border */
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 1.5px;
    height: 0; /* Initially set height to 0 */
    background-color: #890000;
    animation: borderAnimation 1.5s ease-out forwards; /* Border animation properties */
}

.section-title h2 {
    position: relative; /* Set position to relative for proper animation */
    opacity: 0; /* Initially set opacity to 0 */
    transform: translateX(-10px); /* Initial position outside the viewport */
    animation: textAnimation 1s ease-out forwards; /* Text animation properties */
}
p{
    line-height: 25px;
    margin-top: 0;
}
.job-list-container {
    font-family: poppins;
}

.job-list-container h2 {
    margin-top: 50px;
    font-size: 30px;
    padding-left: 20px;
}
.top-heading {
    font-weight: 700;
    color: #000000;
    padding-left: 20px;
    font-size: 45px;
    margin: 0 0 20px;
    position: relative; /* Required for absolute positioning of pseudo-element */
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 0.5s ease-out forwards;

}

.top-heading::before {
    content: ""; /* Create an empty pseudo-element for the border */
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 1.5px;
    height: 0; /* Initially set height to 0 */
    background-color: #890000;
    animation: borderAnimation 1.5s ease-out forwards; /* Border animation properties */
}
.top-heading {
    position: relative; /* Set position to relative for proper animation */
    opacity: 0; /* Initially set opacity to 0 */
    transform: translateX(-10px); /* Initial position outside the viewport */
    animation: textAnimation 1s ease-out forwards; /* Text animation properties */
}
.job-list-container .jobs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    gap: 16px
}

/*.jobs {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));*/
/*    gap: 16px;*/
/*}*/
/*@media (max-width: 600px) {*/
/*    .job-list-container .jobs {*/
/*        grid-template-columns: 1fr;*/
/*    }*/

.job {
    box-shadow: 0 4px 24px -10px rgba(5, 48, 71, 0.3);
    padding: 24px;
    border-radius: 16px;
    margin: 10px;
    overflow: hidden;
    -moz-transition: ease all 0.35s;
    -o-transition: ease all 0.35s;
    -webkit-transition: ease all 0.35s;
    transition: ease 0.35s;
    top: 0;
    opacity: 0;
    animation: slideIn 0.9s ease-out forwards;

}
.job:hover {
    transform: scale(2);
    cursor: pointer;
}

.job-list-container .open-positions {
    top: 40px;
    right: 24px;
    color: red;
    float: right;
}

.details-btn {
    display: inline-block;
    padding: 0.5em 1.7em;
    margin-top:  15px;
    box-sizing: border-box;
    background-color: #890000;
    font-size: 15px;
    color: white;
    text-decoration: none;
    border-radius: 15px;
    text-align: center;
    transition: all 0.2s;
}

.details-btn:hover {
    color: black;
    background-color: white;
}

.job-button button{

    padding: 10px;
    border-radius: 40px;
    transition: all 0.5s;
    cursor: pointer;
    background: #780000;
    font-size: 15px;
    color:white;
}
.job-button button:hover {
    background: #a50c16;
    color: rgb(255, 255, 255);
}




@keyframes textAnimation {
    to {
        opacity: 1; /* Fade in the text */
        transform: translateX(0); /* Slide in from left to right */
    }
}

@keyframes borderAnimation {
    to {
        height: 100%;
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}