/* INFO CARD */
  .info-card {
    background-color: #f2f8e6;
    color: #000000;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
/* INFO CARD */
/* BLUE CARD */
  .blue-card {
    background-color: #e6e6fa;
    color: #000000;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

/* CARDS */
/* ONE */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.columncard1 {
  float: centre;
  width: 100%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.rowcard1 {
	margin: -5px;
	margin-bottom: 10px; /* Adjust spacing */
	margin-top: 10px; /* Adjust spacing */
	page-break-inside: avoid;
}

/* Clear floats after the columns */
.rowcard1:after {
  content: "";
  /*display: table;*/
  clear: both;
}

/* Style the counter cards */
.card1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 10px;
  text-align: left;
  background-color: #f1f1f1;
  margin-bottom: 10px; /* Adjust spacing */
}

.headercard1 {
  background-color: #B2BEB5;
}

/* Float four columns side by side */
.headingcolumncard1 {
  float: centre;
  width: 100%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.headingrowcard1 {
	margin: -5px;
	margin-bottom: 5px; /* Adjust spacing */
	margin-top: 5px; /* Adjust spacing */
	page-break-before: always;
}

/* Clear floats after the columns */
.headingrowcard1:after {
  content: "";
  /*display: table;*/
  clear: both;
}

/* Style the counter cards */
.headingcard1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 0px;
  text-align: left;
  background-color: #f1f1f1;
  margin-bottom: 5px; /* Adjust spacing */
}

.headingcard1 h2 {
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: 300px; /* Adjust the margin as needed for spacing */
}

.headingcard1 h4 {
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 10px;
	margin-bottom: 150px;
}

.headingcard1 h6 {
    position: absolute;
    top: 50%; /* Adjust this value to move the text up or down */
    left: 5%;
    transform: translate(0, 0);
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100%;
}

/* Float four columns side by side */
.careercolumncard1 {
  float: centre;
  width: 100%;
  padding: 0 0px;
}

/* Remove extra left and right margins, due to padding in columns */
.careerrowcard1 {
	margin: -10px;
	margin-bottom: 5px; /* Adjust spacing */
	margin-top: 5px; /* Adjust spacing */
	page-break-before: always;
}

/* Clear floats after the columns */
.careerrowcard1:after {
  content: "";
  /*display: table;*/
  clear: both;
}

/* Style the counter cards */
.careercard1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 0px;
  text-align: left;
  background-color: #f1f1f1;
  margin-bottom: 10px; /* Adjust spacing */
  display: table;
  width: 100%;
  height: 150px;
}

.careercard1 h2 {
	display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: 150px; /* Adjust the margin as needed for spacing */
}

/* CARD 5050*/

    .rowcard5050 {
        display: -webkit-box;
        flex-wrap: wrap;
        margin: -5px;
        padding: 0;
        margin-bottom: 10px; /* Adjust spacing */
		margin-top: 10px; /* Adjust spacing */
    }

    .columncard5050,
    .columncard25050 {
        box-sizing: border-box;
        padding: 0 10px;
    }

    .columncard5050 {
        width: 50%; /* 30% width for this column */
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .columncard25050 {
        width: 50%; /* 70% width for this column */
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .card5050,
    .card25050 {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 10px;
        text-align: left;
        background-color: #f1f1f1;
        background-size: cover; /* Cover the entire card */
        background-repeat: no-repeat;
        position: relative;
		-webkit-box-orient: vertical;
    }



 /* CARD 30%70%*/
/* Ensure equal heights for flexbox */

	.rowcard3070 {
		margin: -10px;
        display: -webkit-box;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        margin-bottom: 10px; /* Adjust spacing */
		page-break-before: always;
    }

    .columncard3070,
    .columncard23070 {
        box-sizing: border-box;
        padding: 0 5px;
    }

    .columncard3070 {
        width: 30%; /* 30% width for this column */
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .columncard23070 {
        width: 70%; /* 70% width for this column */
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .card3070 {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        text-align: center;
        background-color: #f1f1f1;
        margin-bottom: 0px; /* Adjust spacing */
        -webkit-box-flex: 1;
        background-size: contain; /* Cover the entire card */
        background-position: center; /* Center the image */
		position: relative;
    }
	
    .card23070 {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        text-align: center;
        background-color: #f1f1f1;
        margin-bottom: 0px; /* Adjust spacing */
        -webkit-box-flex: 1;
        background-size: cover; /* Cover the entire card */
        background-position: center; /* Center the image */
		position: relative;
    }
	
.card-image {
    display: block;
	width: 100%;
    height: auto;
    object-fit: cover;
}

.card3070 h4 {
    position: absolute;
    top: 5%; /* Adjust this value to move the text up or down */
    left: 5%;
    transform: translate(0, 0);
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100%;
}

.card3070 h3 {
    position: absolute;
    top: 5%; /* Adjust this value to move the text up or down */
    left: 5%;
    transform: translate(0, 0);
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100%;
}

.card3070 h2 {
    position: absolute;
    top: 5%; /* Adjust this value to move the text up or down */
    left: 5%;
    transform: translate(0, 0);
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100%;
}



/* GAP */
.gap-15 { 
	width:100%; 
	height:5px;
} 
.gap-10 { 
	width:100%; 
	height:10px; 
} 
.gap-5 { 
	width:100%; 
	height:5px; 
} 
.gap-40 { 
	width:100%; 
	height: 40px; 
} 
/* END GAP */ 

body, html {
  margin: 0;
  padding: 0;
}