@import url("reset.css");
@import url("hamburgers.min.css");
@import url("aptos/aptos.css");

:root {
	--yellow: #fdc500;
	--white: #ffffff;
	--dark-grey: #383838;
	--ielts-red: #ff1135;
	--cambridge-turquoise: #03bdb6;
	--aptis-esol-green: #64bf60;
	--oet-blue: #2b71ea;
	--linguaskill-grey: #747474;
	--languagecert-coral: #ff5025;
	--cils-purple: #611e4c;
	--warm-grey-lightest: #f5f5f3;
	--warm-grey: #EBEAE7;
}

/* common styles */
	body, html {
		background-color: var(--white);
		color: var(--dark-grey);
		font-family: "Aptos Display", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
	}
	/* body content */
	#content {
		position: relative;
	}
	.content {
		margin: 0 auto;
		max-width: 1280px;
		padding: 0 50px;
		width: 100%;
	}
	@media only screen and (max-width: 500px) {
		.content {
			padding: 0 24px;
		}
	}

	a {
		color: var(--mid-blue);
		text-decoration: underline;
	}

	.button {
		align-items: center;
		background-color: #444;
		border: 0;
	    color: #fff;
	    cursor: pointer;
	    display: flex;
	    font-size: 14px;
	    font-weight: 400;
	    height: 50px;
	    justify-content: center;
	    min-width: 152px;
	    text-decoration: none;
	    transition: 0.3s all ease;
	    width: fit-content;
		border-radius: 25px;
		position: relative;
		overflow: hidden;
	}
	.button span,
	.outline-button span {
		z-index: 99;
	}
	.button:after {
		background-image: linear-gradient(269deg, #3D3D3D 48%, #6F6F6F 90%);
		content: "";
		opacity: 0.7;
		transform: scaleX(-1);
		position: absolute;
		z-index: 10;
		height: 100%;
		width: 100%;
		border-radius: 25px;
	}
	.button:before {
		opacity: 0.4;
		background-image: linear-gradient(269deg, rgba(61, 61, 61, 1) 0%, rgba(111, 111, 111, 1) 100%);
		border-radius: 50%;
		content:"";
		z-index: 11;
		height: 330px;
		position: absolute;
		width: 330px;
		bottom: -3px;
		right: -46%;
	}
	.outline-button {
		align-items: center;
		background-color: transparent;
		border: 2px solid rgb(245, 245, 243, 0.4);
		border-radius: 25px;
		cursor: pointer;
	    display: flex;
		font-size: 14px;
	    font-weight: 400;
	    height: 50px;
	    justify-content: center;
	    text-decoration: none;
	    transition: 0.3s all ease;
	    width: fit-content;
	    padding: 0 35px;
	    position: relative;
	}

	hr {
		background: var(--border-grey);
		border: 0;
		height: 1px;
		margin-bottom: 30px;
	}

	h1 {
		font-size: 50px;
		font-weight: 700;
		line-height: 60px;
		margin-bottom: 30px;
	}
	h2 {
		font-size: 34px;
		font-weight: 700;
		line-height: 34px;
		margin-bottom: 30px;
	}
	h3 {
		font-size: 24px;
		font-weight: 700;
		line-height: 30px;
		margin-bottom: 40px;
	}

	/* swiper */
	.swiper-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom,
	.swiper-pagination-fraction {
		width: 360px;
	}
	.swiper-pagination {
		position: relative;
	}
	.swiper-pagination-bullet {
		background-color: #ccc7c0;
		height: 10px;
		opacity: 1;
		width: 10px;
	}
	.swiper-pagination-bullet-active {
		background-color: #000;
	}

/* header including nav */
	.nav-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30px 0;
		width: 100%;
	}
	.nav-container .content ul {
		align-items: center;
		display: flex;
		justify-content: space-between;
		list-style-type: none;
		margin-bottom: 0;
		padding-left: 0;
	}
	.nav-container .content li {
		font-size: 14px;
		text-align: center;
		width: 157px;
	}
	.nav-container .content li a {
		text-decoration: none;
	}
	.nav-container .content li a.logo {
		display: inline-block;
		height: 52px;
		text-indent: -9999px;
		width: 157px;
	}

	.header-container {
		background-color: var(--yellow);
		max-height: 478px;
	}
	.header-container .content {
		align-items: center;
		display: flex;
		justify-content: space-between;
		min-height: 478px;
	}
	.header-container .text {
		width: 394px;
	}
	.header-container .text p:last-of-type {
		margin-bottom: 40px;
	}
	.header-container .image {
		line-height: 0;
		position: relative;
		width: 60%;
		overflow: hidden;
		height: 478px;
	}
	.header-container img,
	.header-container .image-fade {
		position: absolute;
		top: -40px;
		width: 80%;
    	border-radius: 50%;
	}
	.header-container .image-fade {
		opacity: 0.6;
		background-image: linear-gradient(120deg, rgba(253, 197, 0, 0) 0%, rgba(253, 153, 0, 1) 100%);
		z-index: 10;
		height: 567px;
	}

/* text panel */
	.text-panel .content {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.text-panel .content .content-area {
    	width: 100%;
	}
	.text-panel .content .aside {
		float: left;
		width: 25%;
	}
	/* mobile */
	@media only screen and (max-width: 840px) {
		.text-panel .content .content-area {
			float: none;
			margin: 0 0 50px 0;
			width: 100%;
		}
	}
	@media only screen and (max-width: 500px) {
		.text-panel .content {
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.text-panel .content-area h1 {
			font-size: 34px;
			line-height: 42px;
		}
	}

/* image and text carousel */
	.image-and-text-carousel {
		padding: 0 0 22px 0;
	}
	.image-and-text-carousel img {
		display: inline-block;
		float: left;
		margin: 0 50px 25px 0;
	}
	.image-and-text-carousel h2 {
		display: inline-block;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: -0.1px;
		margin-bottom: 34px;
		max-width: 565px;
		width: 100%;
	}
	.image-and-text-carousel h3 {
		display: inline-block;
		font-size: 50px;
		font-weight: 600;
		letter-spacing: -1px;
		line-height: 60px;
		max-width: 565px;
		width: 100%;
	}

/* latest news */
	.latest-news {
		background-color: var(--warm-grey-lightest);
		padding-top: 2%;
	}
	.latest-news .posts .grid {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		font-size: 36px;
		justify-content: space-between;
	}
	.latest-news .post {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}
	.latest-news .post.first {
		max-width: 100%;
		width: 100%;
	}
	.latest-news .post {
		min-height: 360px;
		max-width: 360px;
		width: 31%;
	}
	.latest-news .post.first img {
		display: inline-block;
		float: left;
		line-height: 0;
	}
	.latest-news .post .text {
		font-size: 36px;
		min-height: 292px;
		max-width: 100%;
		padding: 30px 50px;
	}
	.latest-news .posts .grid .text {
		min-height: 360px;
	}
	.latest-news .post .text {
		padding: 30px;
	}
	.latest-news .post .category {
		display: inline-block;
		font-size: 20px;
	}
	.latest-news .post h1 {
		font-size: 36px;
		line-height: 40px;
	}
	.latest-news .post .text a {
		text-decoration: none;
	}
	.latest-news .image-slide {
		_display: none;
	}
	.latest-news .image-slide img {
		width: 100%;
	}
	.latest-news .post.ielts {
		background-color: #FF1135;
		color: var(--white);
	}
	.latest-news .post.oet {
		background-color: #2B71EA;
		color: var(--white);
	}
	.latest-news .post.ihta {
		background-color: #fdc500;
		color: var(--dark-grey);
	}
	.latest-news .post.aptis-esol {
		background-color: #64BF60;
		color: var(--dark-grey);
	}
/* footer */
	footer .content .ihta {
		bottom: 0;
		left: 100px;
		line-height: 0;
		position: absolute;
		z-index: 1;
	}
	footer {
		background: var(--dark-grey);
		color: var(--white);
		position: relative;
	}
	footer .content {
		max-width: 1280px;
		padding: 70px 50px 50px 50px;
		position: relative;
	}
	footer .content a {
		text-decoration: none;
	}
	footer .content .logo-and-links {
		align-items: flex-start;
		display: flex;
		margin-bottom: 70px;
		position: relative;
		width: 100%;
		z-index: 10;
	}
	footer .content .logo-and-links img {
		margin-right: 10%;
	}
	footer .content .logo-and-links .links {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
	}
	footer .content .logo-and-links .links .links-column {
		margin-right: 4%;
		width: 100%;
	}
	footer .content .logo-and-links .links .links-column p {
		border-bottom: 1px solid var(--warm-grey);
		padding-bottom: 20px;
		width: 100%;

	}
	footer .content .logo-and-links .links .links-column ul {
		line-height: 38px;
	}
	footer .content .logos {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 30px 10px;
		justify-content: space-between;
		margin-bottom: 210px;
		position: relative;
		z-index: 10;
	}
	footer .footer-links-with-text {
		float: right;
		width: 70%;
		position: relative;
		z-index: 10;
	}
	footer .footer-links-with-text ul {
		margin: 0 0 60px 70px;
		line-height: 30px;
    	display: flex;
    	flex-wrap: wrap;
	}
	footer .footer-links-with-text ul li {
		border-right: 1px solid var(--white);
		padding: 0 20px;
	}
	footer .footer-links-with-text ul li:last-of-type {
		border-right: 0;
	}
	footer .footer-links-with-text .text {
		clear: both;
		color: #c2c2c2;
		display: inline-block;
		width: 100%;
	}
	footer ul {
		list-style-type: none;
		padding: 0;
	}