/* about page */

section.aboutpage {
	
}

section.aboutpage .toparea{
	position: relative;
	width: 100%;
	/*height: 100vh;*/
	min-height: 90vh;
	max-width: 100%;
	max-height: 300vh;
	/*overflow: auto;*/
	
	background: #265999 url("../images/aboutbg.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border-radius: 0 0 31px 31px;
	background-blend-mode: luminosity;
	
	&:after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(25, 52, 84, 0.7);
		height: 100%;
		width: 100%;
		z-index: 1;
		border-radius: 0 0 31px 31px;
	}
}

section.aboutpage .toparea h1 {
	font-size: 50px;
	padding: 200px 250px 0 250px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	z-index: 2;
	position: relative;
}

section.aboutpage .toparea h1 a{
	color: #fff;
	text-decoration: none;
}

section.aboutpage .textpart {
	padding: 15px 200px;
}

section.aboutpage .textpart p{
	font-size: 30px;
	text-align: center;
	color: #265999;
}

section.aboutpage .textpart-middle {
	padding: 0 90px;
}

section.aboutpage .textpart-middle .text{
	font-size: 25px;
	color: #4e4e4e;
	padding: 0 30px;
}

section.aboutpage .textpart-middle .text a{
	color: #4e4e4e;
	text-decoration: none;
}


section.aboutpage .textpart-middle .image {
	
}
section.aboutpage .textpart-middle .image .bgimage{
	background: url("../images/about-image2.jpg") no-repeat center top;
	border-radius: 31px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 450px;
	height: 450px;
	object-fit: contain;	
}


section.aboutpage .middlearea {
	
}

section.aboutpage .middlearea h2{
	font-size: 53px;
	color: #265999;
	text-align: center;	
	margin: 5rem 0;
}

section.aboutpage .middlearea .rowdata {
	margin: 15px 90px;
}

section.aboutpage .middlearea .rowdata .fillarea {
	background-color: #009dd1;
	color: #fff;
	font-size: 26px;
	min-height: 90px;
	font-weight: 700;
	text-align: center;
	border-radius: 15px;
	display: flex;
	align-items: center;
}

section.aboutpage .middlearea .rowdata:hover  .fillarea{
	background-color: #01377d;
}

section.aboutpage .middlearea .rowdata:hover .icons span svg {
	color: #01377d;
}

section.aboutpage .middlearea .rowdata:hover .textarea{ 
	color: #01377d;
}

section.aboutpage .middlearea .rowdata .fillarea span {
	display: block;
	width: 100%;
	text-align: center;
}

section.aboutpage .middlearea .rowdata .icons{
	text-align: center;
}

section.aboutpage .middlearea .rowdata .icons span svg{
	width: 100px;
	height: 100px;
	color: #009dd1;
}

section.aboutpage .middlearea .point3 .icons span svg{
	
}

section.aboutpage .middlearea .rowdata .textarea{
	color: #4e4e4e;
	font-size: 24px;
	display: flex;
	align-items: center;
	min-height: 90px;
}

section.aboutpage .middlearea .rowdata .textarea span{ 
	display: block;
	width: 100%;
	text-align: left;
}

section.aboutpage .bottomarea{
	margin: 150px 90px 100px;
	border-radius: 33px;
	background-color: #f1fab6;
	position: relative;
	height: 660px;
}

section.aboutpage .bottomarea .text{		
	position: absolute;
	content: '';
	background: url("../images/about_bottom.png") no-repeat right -30% bottom;		
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
	background-size: auto;	
	left: 0;
	right: 0;
	bottom: 0;	
	height:800px;	
	border-radius: 33px;	
}

section.aboutpage .bottomarea .text span {
	display: block;
	width: 640px;
	padding: 275px 70px 0 ;
	font-size: 30px;
	font-weight: 700;
	color: #265999;
}

section.aboutpage .bottomarea .text span a {
	color: #265999;
	text-decoration: none;
}

section.aboutpage .bottombutton {
	margin: 0 0 80px 0;
}

section.aboutpage .bottombutton .btn-primary {
	--bs-btn-bg: #265999;
	--bs-btn-active-color: #f1fab6;
	--bs-btn-color: #f1fab6;
	font-size: 26px;
	padding: 15px 85px;
	border-radius: 11px;
}

@media only screen and (min-width:320px) and (max-width : 480px) { 

	section.aboutpage .toparea{		
		min-height: 60vh;		
		max-height: 60vh;
	}

	section.aboutpage .toparea h1 {
		font-size: 30px;
		padding: 130px 30px 0 30px;
	}
	
	section.aboutpage .textpart {
		padding: 0 20px;
	}
	
	section.aboutpage .textpart p {
		font-size: 22px;		
	}
	
	section.aboutpage .textpart-middle {
		padding: 0 20px;
	}

	section.aboutpage .textpart-middle .text{
		font-size: 20px;
		padding: 10px;
		width: 100%;
		order: 2 !important;
	}

	section.aboutpage .textpart-middle .image {
		width: 100%;
		order: 1 !important;
	}
	
	section.aboutpage .textpart-middle .image .bgimage{		
		width: 350px;
		height: 350px;	
		max-width: 100%;	
	}
	
	section.aboutpage .mt-5{
		margin-top: 3rem !important;
	}


	section.aboutpage .middlearea {

	}

	section.aboutpage .middlearea h2{
		font-size: 42px;
		margin: 2rem 0;
	}
	
	section.aboutpage .middlearea .rowdata {
		margin: 15px 20px 30px;
	}

	section.aboutpage .middlearea .rowdata .fillarea {		
		font-size: 26px;
		min-height: 90px;
		width: 100%;
		margin-bottom: 10px;		
	}

	section.aboutpage .middlearea .rowdata .fillarea:hover {
		background-color: #01377d;
	}

	section.aboutpage .middlearea .rowdata .fillarea span {
		display: block;
		width: 100%;
		text-align: center;
	}

	section.aboutpage .middlearea .rowdata .icons{		
		width: 30%;
	}
	
	section.aboutpage .middlearea .rowdata .icons span {
		display: block;
		padding: 10px 0 0;
	}

	section.aboutpage .middlearea .rowdata .icons span svg{
		width: 80px;
		height: 80px;
	}	

	section.aboutpage .middlearea .rowdata .textarea{		
		font-size: 20px;
		width: 70%;
		padding-left: 20px;
	}	

	section.aboutpage .bottomarea{
		margin: 65px 20px 80px;		
		height: 600px;
	}

	section.aboutpage .bottomarea .text{		
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		
		height: 600px;
		border-radius: 33px;
	}

	section.aboutpage .bottomarea .text span {
		display: block;
		width: 100%;
		padding: 30px 20px 0 ;
		font-size: 20px;
	}	
	

}

@media screen and (min-width:320px) and (max-width:950px) and (orientation:landscape) { 

	section.aboutpage .toparea{
		min-height: 90vh;
	}
	
	section.aboutpage .toparea h1 {
		font-size: 40px;
		padding: 150px 50px 0 50px;		
	}
	
	section.aboutpage .textpart {
		padding: 10px 50px;
	}
	
	section.aboutpage .textpart p {
		font-size: 26px;
	}
	
	section.aboutpage .textpart-middle {
		padding: 0 50px;
	}
	
	section.aboutpage .textpart-middle .text {
		font-size: 20px;
		padding: 0 10px;
	}
	
	section.aboutpage .textpart-middle .image .bgimage {
		width: 100%;
		max-width: 100%;
	}
	
	section.aboutpage .middlearea h2 {
		font-size: 45px;		
		margin: 2rem 0;
	}
	
	section.aboutpage .middlearea .rowdata {
		margin: 15px 50px;
	}
	
	section.aboutpage .middlearea .rowdata .fillarea {
		font-size: 22px;		
	}
	
	section.aboutpage .middlearea .rowdata .icons span svg {
		width: 80px;
		height: 80px;
	}
	
	section.aboutpage .middlearea .rowdata .textarea {
		font-size: 22px;
	}
	
	section.aboutpage .middlearea .rowdata .icons span {
		display: block;
		padding-top: 20px;
	}
	
	section.aboutpage .bottomarea {
		margin: 150px 50px 50px;
	}
	
	section.aboutpage .bottomarea .text{		
		background: url("../images/about_bottom.png") no-repeat left 50% bottom -40%;		
		height: 800px;
	}
	
	section.aboutpage .bottomarea .text span {		
		width: 350px;
		padding: 250px 30px 0 20px;
		font-size: 22px;
		font-weight: 600;
	}
	
}

