@import url('https://fonts.googleapis.com/css2?family=Delius&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');


body {	
	font-family: "Funnel Sans", serif;
	transition: all 0.5s;
	margin: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
a {
	text-decoration: none;
}
p {	
	font-size: 18px;
	color: #333333;
	font-weight: normal;
}
img{
	max-width: 100%;
	height: auto;
}
.font-2{
	font-size: 22px;
}
.color-w{color: white;}
h1{
	font-size: 40px;
	font-weight: 900;
	letter-spacing: 1px;
	font-family: "Delius", serif;
}
h2{
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 1px;
	font-family: "Delius", serif;
}
h3{
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 1px;
	font-family: "Delius", serif;
}
h4{
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 1px;
}
.container{
	max-width: 1140px;
	margin: 0 auto;
}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.display-block{ display: block;}
.display-inline-block{ display: inline-block;}

section{width: 100%; display: block; margin: 50px 0;}

.row{ display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
.col-1{width: 10%; padding-left: 15px; padding-right: 15px;}
.col-2{width: 20%; padding-left: 15px; padding-right: 15px;}
.col-3{width: 30%; padding-left: 15px; padding-right: 15px;}
.col-33{width: 33.33%; padding-left: 15px; padding-right: 15px;}
.col-4{width: 40%; padding-left: 15px; padding-right: 15px;}
.col-44{width: 25%; padding-left: 15px; padding-right: 15px;}
.col-5{width: 50%; padding-left: 15px; padding-right: 15px;}
.col-6{width: 60%; padding-left: 15px; padding-right: 15px;}
.col-7{width: 70%; padding-left: 15px; padding-right: 15px;}
.col-8{width: 80%; padding-left: 15px; padding-right: 15px;}
.col-9{width: 90%; padding-left: 15px; padding-right: 15px;}
.col-10{width: 100%; padding-left: 15px; padding-right: 15px;}

.m-0{margin: 0px;}
.m-1{margin: 10px;}
.m-2{margin: 20px;}
.m-3{margin: 50px;}
.m-4{margin: 70px;}
.m-5{margin: 100px;}
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 50px;}
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 50px;}

.p-1{padding: 10px;}
.p-2{padding: 20px;}
.p-3{margin: 50px;}
.p-4{padding: 70px;}
.p-5{padding: 100px;}
.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pt-3{padding-top: 50px;}
.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 50px;}

.btn{
	margin: 10px 0;
	padding: 20px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	font-size: 20px;
	color: white;
	letter-spacing: 1px;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: inline-block;
	background-image: linear-gradient(to right, #1e3c72 0%, #2a5298  51%, #1e3c72  100%)
}
.btn:hover{
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}
.gray-btn{background-image: linear-gradient(to right, #283048 0%, #859398  51%, #283048  100%)}
.blue-btn {background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%);}
.red-btn {background-image: linear-gradient(to right, #e52d27 0%, #b31217  51%, #e52d27  100%);}
.yellow-btn {background-image: linear-gradient(to right, #F09819 0%, #EDDE5D  51%, #F09819  100%)}
.orange-btn {background-image: linear-gradient(to right, #fe8c00 0%, #f83600  51%, #fe8c00  100%)}
.purple-btn {background-image: linear-gradient(to right, #AA076B 0%, #61045F  51%, #AA076B  100%)}
.green-btn{background-image: linear-gradient(to right, #134E5E 0%, #71B280  51%, #134E5E  100%)}
.black-btn{background-image: linear-gradient(to right, #232526 0%, #414345  51%, #232526  100%)}
.pink-btn{background-image: linear-gradient(to right, #f857a6 0%, #ff5858  51%, #f857a6  100%)}
.white-btn{background-image: linear-gradient(to right, #f6f6f6 0%, #ffffff  51%, #f6f6f6  100%)}


.logo{height: 60px; width: auto; font-size: 50px; color: #333333; font-family: "Charm", serif; }
.logo span{font-weight: 600; color: #f857a6;  font-family: "Roboto Condensed", serif;}
.main-banner{width: 100%; position: relative; padding: 40px; background-image: linear-gradient(to right, #f857a6 0%, #ff5858  51%, #f857a6  100%)}
.main-banner img{ width: auto; height: 500px; display: inline-block;}
.main-banner .caption{ width: 100%; position: relative; top: 50%; transform: translate(0%, -50%); right: 0%; display: inline-block; text-align: left;}
.main-banner .caption h2{ color: white;}

.bg1{	
	background-image: linear-gradient(to right, #d8ffe0 0%, #56a768  51%, #c8ecd0  100%)	
}

.orange{color: #fe8c00;}

.thumb1{padding: 5px; border: 1px solid #999; border-radius: 10px;}
.thumb1 img{display: block; border-radius: 10px;}


ul{margin: 0; list-style: none;}
ul li{ font-size: 18px; position: relative; margin: 15px 0; color: #333333;}
ul li::before{ content: ""; width: 20px; height: 20px; position: absolute; left: -25px; top: 0; background-image:url('../images/check-icon.png'); background-size: 100% auto;}
ul.one{ list-style:disc;}
ul.one li::before{display: none;}
ul.two{ list-style:decimal;}
ul.two li::before{display: none;}

.disclaimer{width: 100%; background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%); padding: 50px 0;}
.disclaimer h3{color: #fff; margin: 0;}
.disclaimer p{color: #fff; font-size: 16px; font-weight: 300;}

.copyright-text{ width: 100%; display: block; font-size: 16px; text-align: center; margin: 20px 0;}


/* Responsive Style */
@media (max-width: 1300px) {
	.container{max-width: 1000px;}
	.main-banner img{ height: 450px;}
	.main-banner .caption h2{ font-size: 30px;}
}
@media (max-width: 991px) {
	p {	font-size: 16px;}
	h1{font-size: 36px;}
	h2{font-size: 28px;}
	h3{font-size: 22px;}
	h4{font-size: 20px;}

	.col-33{width: 50%;}

	.p-3{margin: 30px;}
	.p-4{padding: 40px;}
	.p-5{padding: 50px;}
	.pt-3{padding-top: 30px;}

	section{padding: 0 5%; margin: 30px 0;}
	.container{max-width: 100%;}
	.col-5{width: 100%;}
	.disclaimer{padding: 40px 5%;}
}
@media (max-width: 767px) {
	.font-2{font-size: 20px;}
	.col-33{width: 100%;}

	h1{font-size: 25px;}
	h2{font-size: 20px;}
	h3{font-size: 20px;}
	h4{font-size: 18px;}

	.btn{ display: block; font-size: 17px; padding: 15px 20px;}
	.logo{height: 40px; font-size: 36px;}	
	.main-banner{ padding: 20px;}
	.main-banner img{ max-width: 100%; height:auto;}
	.main-banner .caption{ padding: 20px;}
	.main-banner .caption h2{ font-size: 26px;}
	
}