#career {margin: 0; padding: 0; height: 100vh;}
#career canvas {height: 100% !important;}
#career .careerBackground {width: 100%; height: 100vh; background: url(../images/career-backgrouns.png) no-repeat bottom center; background-size: cover; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#career .careerBackground:before {content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; left: 0; padding: 0;}
#career .careerContent {position: relative; z-index: 2;}
#career .careerContent h2 {margin: 0; padding: 0; font-weight: 800; font-size: 71px; line-height: 97px; text-align: center; color: #fff;}
#career .careerContent a {display: flex; align-items: center; flex-wrap: wrap; padding: 10px 20px; background: #fff; border-radius: 100px; position: relative; transition: all ease-in-out 0.3s; max-width: 350px; margin: 60px auto 0 auto; height: 60px;}
#career .careerContent a span {font-weight: 600; font-size: 22px; color: #2C52B4; width: 100%;}
#career .careerContent a i.linkArrow {width: 50px; height: 50px; position: absolute; right: 4px; top: 4px; background: #2c52b4; border-radius: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; transition: all ease-in-out 0.3s;}
#career .careerContent a i.linkArrow svg {fill: #fff; width: 24px; height: 24px;}
#career .careerContent a:hover {background: #2c52b4; color: #fff;}
#career .careerContent a:hover span {color: #fff;}
#career .careerContent a:hover i.linkArrow {background: #fff;}
#career .careerContent a:hover i.linkArrow svg {fill: #2c52b4;}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 100px 0;}
    #career .careerContent h2 {font-size: 32px; line-height: 52px;}
    #career .careerContent a {max-width: 320px; margin: 40px auto 0 auto;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 100px 0;}
    #career .careerContent h2 {font-size: 40px; line-height: 60px;}
    #career .careerContent a {max-width: 320px; margin: 40px auto 0 auto;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 120px 0;}
    #career .careerContent h2 {font-size: 44px; line-height: 64px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 140px 0;}
    #career .careerContent h2 {font-size: 54px; line-height: 74px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 140px 0;}
    #career .careerContent h2 {font-size: 32px; line-height: 46px;}
    #career .careerContent a {padding: 10px 20px; max-width: 270px; margin: 50px auto 0 auto; height: 48px;}
    #career .careerContent a span {font-size: 16px;}
    #career .careerContent a i.linkArrow {width: 40px; height: 40px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #career {height: inherit;}
    #career .careerBackground {height: 100%; padding: 200px 0;}
    #career .careerContent h2 {font-size: 42px; line-height: 52px; font-weight: 700;}
    #career .careerContent a {max-width: 290px; height: 52px;}
    #career .careerContent a i.linkArrow {width: 44px; height: 44px;}
}