.bg-image-text-component {
  position: relative;
  width: 100%;
  height: 100%; }

.bg-img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin-top: -40%;
  margin-bottom: -40%;
  object-fit: cover; }

.bg-img-active {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin-top: -40%;
  margin-bottom: -40%;
  object-fit: cover; }

.text-box {
  position: relative;
  width: 544px;
  min-height: 356px;
  overflow: hidden;
  bottom: 75px;
  left: 52%;
  background-color: rgba(30, 45, 57, 0.86);
  color: #ffffff;
  padding-left: 20px;
  padding-right: 20px; }

.text-box-active{
  position: relative;
  width: 544px;
  min-height: 248px;
  overflow: hidden;
  bottom: 75px;
  left: 52%;
  background-color: rgba(30, 45, 57, 0.86);
  color: #ffffff;
  padding-left: 20px;
  padding-right: 20px; }

.text-header {
  position: absolute;
  top: 30px;
  left: 40px;
  right: 40px;
  line-height: 1.29;
  letter-spacing: 0.03px;
  text-align: left;
  color: #ffffff; }

.text-header p {
  font-family: "Nimbus Sans Bold";
  font-size: 28px; }

.text-body {
  position: absolute;
  top: 75px;
  left: 40px;
  right: 40px;
  line-height: 1.4;
  letter-spacing: 0.02px;
  text-align: left;
  color: #ffffff; }

.text-body p {
  font-family: "Nimbus Sans Regular";
  font-size: 20px; }

.text-helpline-number {
  position: absolute;
  top: 195px;
  left: 40px;
  right: 40px;
  line-height: 1.29;
  letter-spacing: 0.03px;
  text-align: left;
  color: #66d1ff; }

.text-helpline-number p {
  font-family: "Nimbus Sans Regular";
  font-size: 28px; }

.text-helpline-number a{
  color: #66d1ff; }

.text-helpline-number a:hover{
  color: #FFFFFF; }

.text-helpline-number-active {
  position: absolute;
  top: 160px;
  left: 40px;
  right: 40px;
  line-height: 1.29;
  letter-spacing: 0.03px;
  text-align: left;
  color: #66d1ff; }

.text-helpline-number-active p {
  font-family: "Nimbus Sans Regular";
  font-size: 28px; }

.text-helpline-number-active a{
  color: #66d1ff; }

.text-helpline-number-active a:hover{
  color: #FFFFFF; }

.text-criteria {
  position: absolute;
  top: 236px;
  left: 40px;
  right: 40px;
  line-height: 1.33;
  letter-spacing: 0.01px;
  text-align: left;
  color: #ffffff; }

.text-criteria p {
  font-family: "Nimbus Sans Regular";
  font-size: 12px; }

@media (min-width: 768px) and (max-width: 1023px) {
  .bg-img {
    width: 100%;
    height: 100%;
    margin-top: -30%;
    margin-bottom: -52%;
    object-fit: cover; }
  .bg-img-active{
    width: 100%;
    height: 100%;
    margin-top: -30%;
    margin-bottom: -52%;
    object-fit: cover; }
  .text-box {
    width: 352px;
    height: 408px;
    bottom: 50px;
    left: 45%; }
  .text-box-active {
    width: 352px;
    height: 260px;
    bottom: 60px;
    left: 45%; }
  .text-header {
    top: 44px;
    left: 32px;
    right: 32px;
    line-height: 1.33; }
  .text-header p {
    font-size: 24px; }
  .text-body {
    top: 112px;
    left: 32px;
    right: 32px;
    line-height: 1.33; }
  .text-body p {
    font-size: 18px; }
  .text-helpline-number {
    top: 215px;
    left: 32px;
    right: 32px;
    line-height: 1.33; }
  .text-helpline-number p {
    font-size: 24px; }
  .text-helpline-number-active {
    top: 180px;
    left: 32px;
    right: 32px;
    line-height: 1.33; }
  .text-helpline-number-active p {
    font-size: 24px; }
  .text-criteria {
    top: 264px;
    left: 32px;
    right: 32px;
    line-height: 1.33; }
  .text-criteria p {
    font-size: 12px; } }

@media (max-width: 767px) {
  .bg-img {
    position: relative;
    width: 100%;
    top: -250px;
    margin-bottom: 125px;
    margin-top: 0;
    height: 420px;
    object-fit: cover;
    object-position: bottom; }
  .bg-img-active{
    position: relative;
    width: 100%;
    top: -250px;
    margin-bottom: -4px;
    margin-top: 0;
    height: 420px;
    object-fit: cover;
    object-position: bottom; }
  .text-box {
    background-color: rgba(30, 45, 57, 1);
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 0;
    bottom: 0;
    top: 155px;
    left: 0; }
  .text-box-active {
    background-color: rgba(30, 45, 57, 1);
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 0;
    bottom: 0;
    top: 170px;
    left: 0; }
  .text-header {
    top: 20px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    line-height: 1.29;
    letter-spacing: 0.03px; }
  .text-header p {
    font-size: 28px; }
  .text-body {
    top: 100px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    line-height: 1.4;
    letter-spacing: 0.02px; }
  .text-body p {
    font-size: 20px; }
  .text-helpline-number {
    top: 200px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    line-height: 1.29;
    letter-spacing: 0.03px; }
  .text-helpline-number p {
    font-size: 28px; }
  .text-helpline-number-active {
    top: 170px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    line-height: 1.29;
    letter-spacing: 0.03px; }
  .text-helpline-number-active p {
    font-size: 28px; }
  .text-criteria {
    top: 250px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    line-height: 1.43;
    letter-spacing: 0.02px; }
  .text-criteria p {
    font-size: 14px; } }
@media (min-width: 431px) and (max-width: 513px) {
  .bg-img {
    top: -215px; }
  .bg-img-active {
    top: -190px; }
  .text-box {
    top: 200px; }
  .text-box-active {
    top: 230px; }
  .text-header {
    top: 25px; }
  .text-body {
    top: 65px; }
  .text-helpline-number {
    top: 160px; }
  .text-helpline-number-active {
    top: 130px; }
  .text-criteria {
    top: 210px; }  }
@media (min-width: 514px) and (max-width: 767px) {
  .bg-img {
    top: -155px; }
  .bg-img-active {
    top: -150px; }
  .text-box {
    top: 265px; }
  .text-box-active {
    top: 250px; }
  .text-header{
    top: 20px; }
  .text-body{
    top: 60px; }
  .text-helpline-number{
    top: 125px; }
  .text-helpline-number-active {
    top: 115px; }
  .text-criteria{
    top: 170px; }  }
@media (min-width: 602px) and (max-width: 767px) {
  .text-box-active {
    top: 260px; }
  .text-helpline-number-active {
    top: 100px; }  }
@media (min-width: 992px) and (max-width: 1023px) {
  .text-box {
    left: 57%; }
  .text-box-active {
    left: 57%; } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .text-box {
    left: 44%; }
  .text-box-active {
    left: 44%; } }