/* CSS Document */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.ctnt{
	background: linear-gradient(to right, #597c95, #b29e83);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sliders{
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	animation: rotate 30s linear infinite;
}
@keyframes rotate{
	0%{
		transform: perspective(1000px) rotateY(0deg);
	}
	100%{
		transform: perspective(1000px) rotateY(360deg);
	}
}
.sliders strong{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--i)*55deg)) translateZ(350px);
}
.sliders strong img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100px;
	object-fit: cover;
	transition: 0.5s;
}
.sliders strong:hover img{
	transform: translateY(-30px) scale(1.2);
}
/*----menuctn-----*/
.left-col{
	flex-basis: 62%;
	padding: 10% 5% 0;
}
.left-col h4{
	color: #444;
	font-size: 36px;
	padding-left: 60px;
	position: relative;
}
.left-col h4::before{
	content: '';
	background: #0a0539;
	height: 90%;
	width: 8px;
	border-radius: 5px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}
.menuctn{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box{
	width: 230px;
	height: 300px;
	background: #0a0539;
	border-radius: 10px;
	border-shadow: 2px 10px 12px rgba(0,0,0,0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	margin: 20px 10px;
}
.model{
	height: 200px;
	max-height: 80%;
	max-width: 80%;
}
.details{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 180px;
}
.details p{
	font-family: calibri;
	font-weight: bold;
	color: #fff;
	text-align: center;
	margin-top: 20px;
}
.futsal{
	color: #000066;
	font-weight: bold;
	letter-spacing: 2px;
	font-family: calibri;
	font-size: 25px;
}
.box:hover{
	background-color: #625313;
	transform-style: preserve-3d;
	transform: scale(1.02);
	transition: all ease 0.3s;
}
.box:hover .futsal{
	color: #FFF;
	transition: all ease 0.5s;
}
.heading{
	text-align: center;
	margin-bottom: 2rem;
	position: relative;
}
/**---post_1--*/
.sub-header{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h1.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p1{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p1-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p1-col-img{
	width: 100%;
}
.p1-col h1{
	padding-top: 0;
}
.p1-col p{
	padding: 10px 0 15px;
}
/**---post_2--*/
.sub-header-p2{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h2.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p2 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p2{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p2-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p2-col-img{
	width: 100%;
}
.p2-col h1{
	padding-top: 0;
}
.p2-col p{
	padding: 10px 0 15px;
}
/**---post_4--*/
.sub-header-p4{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h4.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p4 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p4{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p4-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p4-col-img{
	width: 100%;
}
.p4-col h1{
	padding-top: 0;
}
.p4-col p{
	padding: 10px 0 15px;
}
/**---post_5--*/
.sub-header-p5{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h5.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p5 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p5{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p5-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p5-col-img{
	width: 100%;
}
.p5-col h1{
	padding-top: 0;
}
.p5-col p{
	padding: 10px 0 15px;
}
/**---post_7--*/
.sub-header-p7{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h7.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p7 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p7{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p7-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p7-col-img{
	width: 100%;
}
.p7-col h1{
	padding-top: 0;
}
.p7-col p{
	padding: 10px 0 15px;
}
/**---post_8--*/
.sub-header-p8{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h8.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p8 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p8{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p8-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p8-col-img{
	width: 100%;
}
.p8-col h1{
	padding-top: 0;
}
.p8-col p{
	padding: 10px 0 15px;
}
/**---post_9--*/
.sub-header-p9{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h9.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p9 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p9{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p9-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p9-col-img{
	width: 100%;
}
.p9-col h1{
	padding-top: 0;
}
.p9-col p{
	padding: 10px 0 15px;
}
/**---post_10--*/
.sub-header-p10{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h10.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p10 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p10{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p10-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p10-col-img{
	width: 100%;
}
.p10-col h1{
	padding-top: 0;
}
.p10-col p{
	padding: 10px 0 15px;
}
/**---post_11--*/
.sub-header-p11{
	height: 65vh;
	width: 100%;
	background-image:url(../images/h11.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-p11 h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.p11{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.p11-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.p11-col-img{
	width: 100%;
}
.p11-col h1{
	padding-top: 0;
}
.p11-col p{
	padding: 10px 0 15px;
}
/**---event--*/
.sub-header-event{
	height: 65vh;
	width: 100%;
	background-image:url(../images/event.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-event h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.event{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.event-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.event-col-img{
	width: 100%;
}
.event-col h1{
	padding-top: 0;
}
.event-col p{
	padding: 10px 0 15px;
}
/**---himmari--*/
.sub-header-himmari{
	height: 65vh;
	width: 100%;
	background-image:url(../images/himmari.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-himmari h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.himmari{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.himmari-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.himmari-col-img{
	width: 100%;
}
.himmari-col h1{
	padding-top: 0;
}
.himmari-col p{
	padding: 10px 0 15px;
}
/**---activity--*/
.sub-header-activity{
	height: 65vh;
	width: 100%;
	background-image:url(../images/activity.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-activity h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.activity{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.activity-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.activity-col-img{
	width: 100%;
}
.activity-col h1{
	padding-top: 0;
}
.activity-col p{
	padding: 10px 0 15px;
}
/**---alumni--*/
.sub-header-alumni{
	height: 65vh;
	width: 100%;
	background-image:url(../images/alumni.jpg);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFFFFF;
}
.sub-header-alumni h1{
	margin-top: 0px;
	font-size: 100px;
	align-items: center;
}
.alumni{
	width: 80%;
	margin: auto;
	padding-top: 80px;
	padding-bottom: 50px;
}
.alumni-col{
	flex-basis: 48%;
	padding: 30px 2px;
}
.alumni-col-img{
	width: 100%;
}
.alumni-col h1{
	padding-top: 0;
}
.alumni-col p{
	padding: 10px 0 15px;
}
/*--responsiver for mobile phone---*/
@media(max-width:700px){
	.box{
		width: 94%;
		height: 190px;
	}
	.model{
		height: 110px;
	}
	details p{
		font-size: 16px;
		width: 170px;
	}
	.sub-header{
		height: 20vh;
		width: 100%;
	}
	.p1{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p2{
		height: 20vh;
		width: 100%;
	}
	.p2{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p4{
		height: 20vh;
		width: 100%;
	}
	.p4{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p5{
		height: 20vh;
		width: 100%;
	}
	.p5{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p7{
		height: 20vh;
		width: 100%;
	}
	.p7{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p8{
		height: 20vh;
		width: 100%;
	}
	.p8{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p9{
		height: 20vh;
		width: 100%;
	}
	.p9{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p10{
		height: 20vh;
		width: 100%;
	}
	.p10{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-p11{
		height: 20vh;
		width: 100%;
	}
	.p11{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-event{
		height: 20vh;
		width: 100%;
	}
	.event{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-himmari{
		height: 20vh;
		width: 100%;
	}
	.himmari{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-activity{
		height: 20vh;
		width: 100%;
	}
	.activity{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.sub-header-alumni{
		height: 20vh;
		width: 100%;
	}
	.alumni{
		width: 80%;
		margin: auto;
		padding-top: 60px;
		padding-bottom: 30px;
	}
}