:root {
    --primary-color: #1d1d4d;
    --secondary-color: #f47424;
  }

.career-header-section{
background-color: var(--primary-color);
height: 60vh;
}
@media (max-width: 576px) and (min-height: 1080px) {
  .career-header-section {
    height: 500px !important;
  }
}
.career-float{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-float{
    position: absolute;
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.11) 0px 0.278vw 6.528vw;
    padding: 1.8vw 3.542vw;
    width: 100%;
    max-width: 72.361vw;
    margin: 0px auto;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 0.833vw;
}
.header-float div a {
    font-size: 20px;
    padding: 10px;
    background-color: var(--secondary-color);
    color:white;
    transition: 0.4s all ease;
}
.all-project-btn:hover{
    background-color: var(--primary-color);

}
.career-quality-single div{

    background-color: aliceblue;
    transition: all 0.4s ease;
}
.career-quality-single div:hover{

    background-color: rgb(214, 233, 251);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.career-quality-single .strike-text{
    font-weight: 700;
    font-size: 9vw;
    line-height: 8.611vw;
    -webkit-text-stroke: 1px var(--secondary-color);
    color: transparent;
    transition: all 0.4s ease;
    
}
.career-quality-single div:hover .strike-text{

    color: var(--secondary-color);
}

.career-offering-single div{
    min-height: 330px;
    box-shadow: rgba(0, 0, 0, 0.11) 5px 0vw 2.528vw;
    transition: all 0.4s ease;

}
.career-offering-single div:hover{
    
    background-color: rgb(214, 233, 251);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.career-offering-single div img{

    width: 100px;
    height: 100px;

}
.career-circular-section{
    background-color: #f6f8fc;
}
.career-circular-single{
background-color: white;
border-radius:  20px;
padding: 0 3.8vw;
transition: all 0.4s ease;
}
.career-circular-single:hover{
    background-color: rgb(214, 233, 251);

}
.career-circular-btn{
padding: 8px 15px;
background-color: var(--secondary-color);
color:white;
font-weight: 600;
border-radius: 20px;
transition: all 0.4s ease;
border:var(--secondary-color);
    color: white;
}
.career-circular-btn:hover{
    color: #ffffff;
    background-color: var(--primary-color);
}
.career-mail{
        font-size: 18px;
    text-decoration: underline;

}
.job-description-section{
    background-color: var(--primary-color);
    height: 30vh;
}
.job-details h4{
    font-weight: bold;
    color: var(--secondary-color);
}
.job-details h5{
   font-size: 20px !important;
   color: var(--primary-color);
}
.job-details ul li,p{
    color: black;
    font-size: 16px;
}
@media only screen and (max-width: 768px) {
    .career-header-section{
        height: 50vh;
    }
    .header-float h2{

font-size: 20px;
line-height: 10px;
    }
    .header-float h5{

        font-size: 15px;
            }
    .header-float div a {
     font-size: 15px;
     padding: 5px 10px;
    }
    .header-float {

        padding: 3.8vw 3.542vw;
    }

    .career-circular-single h2{
        font-size: 20px;
    line-height: 15px;}
    .career-circular-single h5{
        font-size: 15px;}
        .career-circular-single p{
            font-size: 13px;}
    .career-circular-btn {
        width: 100%;
        font-size: 17px;
    }
    .job-details-responsive-btn{
        display: flex;
        width: 100%s;
        justify-content: center;
    }
}
@media only screen and (max-width: 600px) {
    .career-circular-btn {
        width: auto;
        font-size: 17px;
        padding: 2px 9px;

    }
    .header-float {
       
        max-width: 90.361vw;
        
    }
    .header-float p{
        font-size: 22px !important;
    }
    .header-float p:nth-child(2) {
        font-size: 18px;
    }

}