section {
	margin-top: 50px;
}

.contact-us{
	border: 0px solid #004991;
	border-radius: 5px;
	padding: 5px 5%;
	width: fit-content;
	text-align: center;
	background-color: #00b0f0;
	margin: 15px auto;
	font-size: 16px;
	color: white;
}

.contact-us > a{
	color: white!important; 
	text-decoration: auto;
}



/*content 1*/
	a:-webkit-any-link {
	    color: #353535;
	}

	.hex-diagram {
		background-image: url(https://www.hkteducation.com/lib/images/pands/applediagram.jpg);
	    background-repeat: no-repeat;
	    background-size: contain;
	    width: 100%;
	    min-height: 870px;
	    position: relative;
	    margin-top: 50px;
	}


	.hex-diagram .step{
	    /*background: red;*/
	    position: absolute;
	    text-align: center;
	    width: 225px;
	    height: 26%;
	    line-height: 1.2;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    font-size: 13px;
	    border-radius: 50%;
		box-sizing: border-box;
		color: #fff;
	}

	.hex-diagram .step.steptitle{
		top: 0px;
	    left: 23%;
	    font-size: 33px;
	    color: #0f4d8f;
	    font-weight: 900;
	    width: 460px;
	    height: 15%;
	}

	.hex-diagram .step.step1{
		top: 320px;
		left: 30px;
		padding: 0 10px;
	}

	.hex-diagram .step.step2{
	    top: 307px;
	    left: 209px;
    	padding: 24px 20px 0 10px;
	}

	.hex-diagram .step.step3{
		top: 320px;
    	right: 255px;
    	padding: 0 19px;
	}

	.hex-diagram .step.step4{
		top: 310px;
	    right: 70px;
	    padding: 20px 25px 0 25px;
	}

	.hex-diagram .step.step5{
	    bottom: 200px;
	    left: 56px;
    	padding: 0 10px;
	}

	.hex-diagram .step.step6{
	    bottom: 200px;
	    left: 234px;
	}

	.hex-diagram .step.step7{
	    bottom: 200px;
	    right: 219px;
    	padding: 0 10px;
	}

	.hex-diagram .step.step8{
	    bottom: 200px;
	    right: 42px;
    	padding: 0 10px;
	}

	.hex-diagram .step.more1{
		color: black;
	    bottom: 12px;
	    left: 70px;
	}
	.hex-diagram .step.more2{
		color: black;
	    bottom: 12px;
	    left: 255px;
	}
	.hex-diagram .step.more3{
		color: black;
	    bottom: 12px;
	    right: 193px;
	}
	.hex-diagram .step.more4{
		color: black;
	    bottom: 12px;
	    right: 2px;
	}

	.extra-cont {
	    opacity: 0;
	    visibility: hidden;
	    position: absolute;
	    bottom: -10%;
	    left: -100%;
	    max-width: 200px;
	    z-index: 99;
	    transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.right-side {
		left: unset!important;
	    right: -98%;
	}

	.step:hover .extra-cont {
	    opacity: 1;
	    visibility: visible;
	}

	.extra-cont img{
		width: 100%;
	}

	.step b {
		font-size: 20px;
		padding-bottom: 5px;
	}


/*content 2*/
	.support{
		display: flex;
		justify-content: space-around;
		margin: 30px 0;
	}

	.support > div{
		border: 3px solid #004991;
		border-radius: 25px;
		padding: 15px 20px;
		width: 25%;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
	}

	.support img{
		width: 100%;
		max-width: 150px;
	}

	.tickicon-blue {
		display: flex;
		flex-wrap: wrap;
		font-weight: bold;
		font-size: 18px;
		justify-content: space-around;
	}

	.tickicon-blue > a{
		width: 20%;
		background-image: url(https://www.uat.hkteducation.com/lib/images/common/tickicon_blue.png);
		background-repeat: no-repeat;
		background-size: 38px;
		height: 50px;
		padding: 8px 0 0 50px;
		font-weight: bold;
		font-size: 18px;
	}


/*content 3*/
	.section-3 ol{
		padding-left: 2%;
	}

	.section-3 p > a{
		color: #518b9b!important;
	}

	.assistive-touch{
		display: flex;
		justify-content: space-around;
		margin: 30px 0;
	}

	.assistive-touch > div{
		border: 3px solid #004991;
		border-radius: 25px;
		padding: 15px 20px;
		width: 36%;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
	}

	.assistive-touch img{
		width: 100%;
		max-width: 150px;
	}



/*content 4*/
	.support-recipients {
		display: flex;
		flex-wrap: wrap;
		font-weight: bold;
		font-size: 25px;
		justify-content: space-around;
		margin-top: 40px;
	}

	.box{
	    max-width: 250px;
	    height: 250px;
	    width: 30%;
	    margin-bottom: 20px;
	}

	.box-img{
		background-image: url(https://www.uat.hkteducation.com/lib/images/common/circularoutline.png);
	    background-repeat: no-repeat;
	    background-size: cover;
	    position: relative;
	    width: 200px;
	    height: 200px;
	    margin: auto;
	}

	.box-img img{
		width: 100%;
		transform: scale(0.8);
	}

	.box-title{
		text-align: center;
		padding-top: 15px;
		color: #004991;
	}

	.success-stories{
		display: flex;
		justify-content: space-around;
		margin: 30px 0;
	}

	.success-stories > div{
		border: 3px solid #004991;
	    border-radius: 15px;
	    padding: 15px 25px;
	    width: fit-content;
	    text-align: center;
	    font-weight: bold;
	    font-size: 25px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.success-stories img{
		width: 100%;
		max-width: 40px;
		padding-right: 10px;
	}

	.support-recipients a, .success-stories a{
    	color: #004991;
	}