body{
    font-family: "Merriweather Sans", sans-serif;
    margin: 0;
    color:white;
    background:black;
    

}
*{
    box-sizing: border-box;
}
header{
    background: #1c1c24;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-bottom: 25px;
    
    
}
.header-container{
    
    max-width:1250px;
    width:100%;
    display: flex;
    align-items: center;
    
    
    padding: 0 25px;

}
.header-container .logo{
    height:45px;
    margin-right: 10px;
}
.header-container .logo img{
    height:100%;

}
.search{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 25px;
}
.Search-container{
    background-color:#1c1c24;
    height: 60px;
    border-radius: 10px;
    border: 2px solid #222328;
    display: flex;
    overflow: hidden;
}
.input-container{
    flex-grow: 1;
    display: flex;
    align-items: center;
   
    
   
    align-items: center;
}
.input-container input{
    flex-grow: 1;
    background-color: transparent;
    outline:none;
    border: none;
    color: white;
    font-size: 20px;
    margin-left: 20px;

}
.input-container i{
    font-size: 20px;
    margin-left:25px;
}
.button-container{
    background:#3060ff;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease;
    

}
.button-container:hover{
    background:#5a81ff;

}
.jobs-list{
    background-color: #050505;
    max-width: 1250px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding:0 25px;

}
.jobs-list h1 {
    margin-left: 25px;
    font-size: 20px;
}
.jobs-container{
    display: grid;
    gap: 40px;
    border: radius 10px;
    grid-template-columns: repeat(3, 1fr);
    
    
    
    

}
.job-tile{
    background: #1c1c24;;
    display: flex;
    border-radius: 10px;
    cursor:pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: white;
    padding: 30px;
    transition: transform 0.25;
}
.job-tile:hover{
    transform:scale(1.05);
}.top{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.top img{
    width:50px;
    height: 50px;
    border-radius: 10px;

}
.rolename{
    margin:20px 0px;
}
.rolename span{
    font-size: 22px;

}
.discription{
    
    flex-grow: 1;
    height: 105px;
    overflow: hidden;
    font-size: 18px;
    color:#96939B;


}
.buttons{
   
    color: black;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    height: 45px;

}
.button{
    
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color:#96939B;
    background-color: #2E2E39;
    font-size: 14px;


}
.apply-now{
    color: white;
    background: #3060ff;
    margin-right: 15px;
}
.apply-now:hover{
    background:#5a81ff;

}
.buttons  :last-child:hover{
    background: rgb(66, 68, 67);
    color: white;
    
    
    
}
@media screen and(max-width:930px){
    .jobs-container{
        
        grid-template-columns: repeat(2,1fr)
    }
}
    @media screen and(max-width:600px){
        .jobs-container{
            grid-template-columns: repeat(1,1fr)
        }

}