@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
// font-family: "Oswald", sans-serif;

$color_1: #000;
$color_2: #EB642D;
$color_3: #E7C19C;
$color_4: #181617;
$color_5: #444444;
$color_7: rgba(255, 255, 255, 0.5);
$color_8: #eee;
$color_9: #aaaaaa;
$color_10: #37332a;
$color_11: rgba(255, 255, 255, 0.8);
$color_12: #bab3a6;
$color_13: red;
$color_14: #a49b89;
$color_16: #d3af71;
$color_17: #fff;
$font-family_1: "Oswald", sans-serif;
$background-color_2: #181617;
$background-color_3: rgba(0, 0, 0, 0.8);
$background-color_5: #EB642D;
$border-color_1: #EB642D;
$border-color_2: #625b4b;
$border-top-color_1: #EB642D;
$border-top-color_2: #181617;
$border-bottom-color_1: #EB642D;

$sc-color0: #535454;
$sc-color1: #000;
$sc-color2: #005590;
$sc-color3: #5C2CCE;

$sc-gradient1: linear-gradient(90deg, #FFB400 0%, #FF4F59 100%);
$sc-gradient2: linear-gradient(90deg, #8ED136 0%, #25CB89 100%);
$sc-gradient3: linear-gradient(180deg, #4CAFFE 0%, #56EAFF 100%);
$sc-gradient4: linear-gradient(180deg, #FD4C85 0%, #FF9F8D 100%);
$sc-gradient5: linear-gradient(180deg, #42EA83 0%, #39F6C6 100%);
$sc-gradient6: linear-gradient(269.66deg, #36CE7B 0.22%, #8ED136 99.65%);
$sc-gradient7: linear-gradient(180deg, #4CAFFE 0%, #56EAFF 100%);
$sc-gradient8: linear-gradient(282.58deg, #00CBAD 0%, #46A1F2 100%);
$sc-gradient9: linear-gradient(282.58deg, #EB59BE 0%, #FC4E65 100%);

$sc-btn-gradient1: linear-gradient(to right, #FFB400 0%, #FF4F59 51%, #FFB400 100%);
$sc-btn-gradient2: linear-gradient(to right, #8ED136 0%, #25CB89 51%, #8ED136 100%);
$sc-btn-gradient3: linear-gradient(to right, #005590 0%, #56EAFF 51%, #005590 100%);
$sc-btn-gradient4: linear-gradient(to right, #FD4C85 0%, #FF9F8D 51%, #FD4C85 100%);
$sc-btn-gradient5: linear-gradient(to right, #42EA83 0%, #39F6C6 51%, #42EA83 100%);
$sc-btn-gradient6: linear-gradient(to right, #36CE7B 0%, #8ED136 51%, #36CE7B 100%);
$sc-btn-gradient7: linear-gradient(to right, #4CAFFE 0%, #56EAFF 51%, #4CAFFE 100%);
$sc-btn-gradient8: linear-gradient(to right, #00CBAD 0%, #46A1F2 51%, #00CBAD 100%);
$sc-btn-gradient9: linear-gradient(to right, #EB59BE 0%, #FC4E65 51%, #EB59BE 100%);

$box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
$box-shadow2: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;
$text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);


body {
	font-family: $font-family_1;
	background: $color_17;
	color: $color_1;
	font-size: 16px;
}

.text-left {
	text-align: left !important;
}

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

// for mobile view below 575px
@mixin xxs {
	@media screen and (max-width: 575px) {
		@content;
	}
}

//for mobile view below 767px
@mixin xs {
	@media screen and (max-width: 767px) {
		@content;
	}
}

//for tab view below 768px to 991px
@mixin sm {
	@media screen and (min-width: 768px) and (max-width: 991px) {
		@content;
	}
}

//for tab view above 1200px
@mixin lgAbove {
	@media screen and (min-width: 1200px) {
		@content;
	}
}

//for tab view below 1199px
@mixin lgBelow {
	@media screen and (max-width: 1199px) {
		@content;
	}
}

//for mobile view below 991px
@mixin tabMobile {
	@media screen and (max-width: 991px) {
		@content;
	}
}

//for desktop view above 768px
@mixin tabdesktop {
	@media screen and (min-width: 768px) {
		@content;
	}
}

//for desktop view above 992px
@mixin desktopXl {
	@media screen and (min-width: 992px) {
		@content;
	}
}

//for desktop view above 1200px
@mixin desktop1200 {
	@media screen and (min-width: 1200px) {
		@content;
	}
}

//for tab view below 992px to 1199px
@mixin md {
	@media screen and (min-width: 992px) and (max-width: 1199px) {
		@content;
	}
}

//for desktop view below 1200px to 1399px
@mixin lg {
	@media screen and (min-width: 1200px) and (max-width: 1399px) {
		@content;
	}
}

//for desktop view above 1400px
@mixin xl {
	@media screen and (min-width: 1400px) {
		@content;
	}
}

//for desktop view above 1400px
@mixin xxl {
	@media screen and (min-width: 1600px) {
		@content;
	}
}


.st {
	transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
}

body {
	color: $sc-color0;
	font-weight: 400;
	line-height: 1.6;
}

a {
	color: $color_2;
	text-decoration: none;

	&:hover {
		color: $color_2;
		text-decoration: underline;
	}
}

p {
	font-weight: 300;
}

.sc-color1 {
	color: $sc-color1 !important;
}

.sc-color2 {
	color: $sc-color2 !important;
}

.sc-color3 {
	color: $sc-color3 !important;
}

.sbg-color1 {
	background-color: $sc-color1 !important;
}

.sbg-color2 {
	background-color: $sc-color2 !important;
}

.sbg-color3 {
	background-color: $sc-color3 !important;
}

.sbg-gradient1 {
	background: $sc-gradient1 !important;
}

.sbg-gradient2 {
	background: $sc-gradient2 !important;
}

.sbg-gradient3 {
	background: $sc-gradient3 !important;
}

.sbg-gradient4 {
	background: $sc-gradient4 !important;
}

.sbg-gradient5 {
	background: $sc-gradient5 !important;
}

.sbg-gradient6 {
	background: $sc-gradient6 !important;
}

.sbg-gradient7 {
	background: $sc-gradient7 !important;
}

.sbg-gradient8 {
	background: $sc-gradient8 !important;
}

.sbg-gradient9 {
	background: $sc-gradient9 !important;
}


.bttn {
	border-radius: 5px;
	border: 0;
	padding: 10px;
	min-width: 150px;
	height: 45px;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	background-size: 200% auto !important;
	@extend .st;
	color: $color_17;
	display: inline-block;
	text-align: center;

	&:hover {
		@extend .st;
		background-position: right center;
		color: $color_17;
		text-decoration: none;
	}

	&:active {
		text-decoration: none;
	}

	&:focus {
		text-decoration: none;
	}
}

.bttn-common1 {
	background: $sc-btn-gradient1;
}

.bttn-common2 {
	background: $sc-btn-gradient2;
}

.bttn-common3 {
	background: $sc-btn-gradient3;
}

.bttn-common4 {
	background: $sc-btn-gradient4;
}

.bttn-common5 {
	background: $sc-btn-gradient5;
}

.bttn-common6 {
	background: $sc-btn-gradient6;
}

.bttn-common7 {
	background: $sc-btn-gradient7;
}

.bttn-common8 {
	background: $sc-btn-gradient8;
}

.bttn-common8 {
	background: $sc-btn-gradient9;
}

h1,
.h1 {
	font-weight: 700;
	font-size: 60px;
	text-transform: capitalize;

	@include xs {
		font-size: 30px;
	}
}

h2,
.h2 {
	font-weight: 700;
	font-size: 55px;
	text-transform: capitalize;

	@include xs {
		font-size: 28px;
	}
}

h3,
h3 {
	font-weight: 700;
	font-size: 45px;
	text-transform: uppercase;

	@include xs {
		font-size: 26px;
	}
}

h4,
h4 {
	font-weight: 700;
	font-size: 28px;
	text-transform: uppercase;

	@include xs {
		font-size: 20px;
	}
}

.fs24 {
	font-size: 24px;

	@include xs {
		font-size: 20px;
	}
}

.fs22 {
	font-size: 22px;

	@include xs {
		font-size: 20px;
	}
}

.fs20 {
	font-size: 20px;

	@include xs {
		font-size: 18px;
	}
}

.fs18 {

	font-size: 18px;

	@include xs {
		font-size: 16px;
	}
}

.fs16 {

	font-size: 16px;

	@include xs {
		font-size: 14px;
	}
}

.fs14 {
	font-size: 14px;

	@include xs {
		font-size: 14px;
	}
}

.fs12 {
	font-size: 12px;

	@include xs {
		font-size: 12px;
	}
}

p {
	font-size: 16px;
	;
}

@-webkit-keyframes whatsapp-move {
	16.65% {
		-webkit-transform: translate(3px, -3px);
		transform: translate(3px, -3px);
	}

	33.3% {
		-webkit-transform: translate(-3px, 3px);
		transform: translate(-3px, 3px);
	}

	49.95% {
		-webkit-transform: translate(3px, -3px);
		transform: translate(3px, -3px);
	}

	66.6% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	83.25% {
		-webkit-transform: translate(1px, -1px);
		transform: translate(1px, -1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes whatsapp-move {
	16.65% {
		-webkit-transform: translate(3px, -3px);
		transform: translate(3px, -3px);
	}

	33.3% {
		-webkit-transform: translate(-3px, 3px);
		transform: translate(-3px, 3px);
	}

	49.95% {
		-webkit-transform: translate(3px, -3px);
		transform: translate(3px, -3px);
	}

	66.6% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	83.25% {
		-webkit-transform: translate(1px, -1px);
		transform: translate(1px, -1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

.brochure-btn {
	position: fixed;
	bottom: 150px;
	right: 18px;
	z-index: 999;
	@extend.sbg-gradient9;
	padding: 3px;
	font-size: 24px;
	width: 44px;
	height: 44px;
	line-height: normal;
	text-align: center;
	border-radius: 50%;
	color: $color_17;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;

	&:hover,
	&:active,
	&:focus {
		@extend .sbg-gradient9;
	}

	i {
		color: #fff;
	}
}

.whatsapp-chat-btn {
	position: fixed;
	bottom: 80px;
	right: 18px;
	z-index: 999;
	background: #25d366;
	padding: 3px;
	font-size: 24px;
	width: 44px;
	height: 44px;
	line-height: normal;
	text-align: center;
	border-radius: 50%;
	color: $color_17;

	&:hover,
	&:active,
	&:focus {
		color: $color_17;
	}

	i {
		-webkit-animation-name: whatsapp-move;
		animation-name: whatsapp-move;
		-webkit-animation-duration: 1.2s;
		animation-duration: 1.2s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		display: block;
	}

}


.hero-sec {
	width: 100%;
	min-height: 100vh;
	background: url("../images/school/hero/hero-bg.jpg") top center;
	background-size: cover;
	position: relative;
	padding: 0;

	@include sm {
		padding: 60px 0;
		height: inherit;
	}

	@include xs {
		padding: 60px 0;
		height: inherit;
	}

	h4,
	p,
	h1 {
		text-shadow: $text-shadow;
	}


	&:before {
		content: "";
		background: rgba(0, 105, 178, 0.4);
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	.container {
		padding-top: 110px;

		@include xs {
			padding-top: 60px;
			text-align: center;
		}

		h4 {
			color: $color_17;
			text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
				0px -4px 10px rgba(255, 255, 255, 0.3);
			text-transform: capitalize;

		}

		h1 {
			color: $color_17;
			text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
				0px -4px 10px rgba(255, 255, 255, 0.3);
			text-transform: uppercase;
		}

		p {
			color: $color_17;
			text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
				0px -4px 10px rgba(255, 255, 255, 0.3);
			font-weight: 600;
		}
	}

}

section {
	padding: 60px 0 80px;
	overflow: hidden;

	@include xs {
		padding: 40px 0 50px;
	}
}

.fixed-top .navbar {
	padding: 0;

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;

		@include xs {
			display: none;
			flex-direction: column;
			// justify-content: center;

		}
	}

	li {
		position: relative;

		a.bttn.bttn-common2 {
			text-align: center;
			padding-left: 0;
			margin-left: 30px;
			color: $color_17;
			font-weight: 400;

			@include sm {
				margin-left: 5px;
				min-width: inherit;
				padding: 13px 10px;
			}

			@include xs {
				margin-left: 0;
				min-width: inherit;
				padding: 13px 25px;
				margin-top: 15px;
			}
		}
	}

	a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0 10px 30px;
		white-space: nowrap;
		@extend .st;
		color: $sc-color0;
		font-size: 14px;
		text-transform: uppercase;
		display: inline-block;
		white-space: nowrap;
		font-weight: 500;

		@include sm {
			padding: 7px;
			font-size: 12px;
		}

		@include xs {
			padding: 12px 25px;
			font-size: 14px;
		}

		&.active {
			color: $sc-color2;
			font-weight: 700;
			text-decoration: underline;
		}
	}

	.dropdown {
		ul {
			display: block;
			position: absolute;
			left: 14px;
			top: calc(100% + 30px);
			margin: 0;
			padding: 10px 0;
			z-index: 99;
			opacity: 0;
			visibility: hidden;
			background: $color_17;
			box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
			@extend .st;
			border-radius: 4px;

			li {
				min-width: 200px;

				&:hover {
					>a {
						color: $color_2;
					}
				}
			}

			a {
				padding: 10px 20px;
				color: $color_5;

				i {
					font-size: 12px;
				}

				&:hover {
					color: $color_2;
				}
			}

			.active {
				&:hover {
					color: $color_2;
				}
			}
		}

		&:hover {
			>ul {
				opacity: 1;
				top: 100%;
				visibility: visible;
			}
		}

		.dropdown {
			ul {
				top: 0;
				left: calc(100% - 30px);
				visibility: hidden;
			}

			&:hover {
				>ul {
					opacity: 1;
					top: 0;
					left: 100%;
					visibility: visible;
				}
			}
		}
	}
}

@-webkit-keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);

	&:before {
		content: "";
		position: fixed;
		top: calc(50% - 30px);
		left: calc(50% - 30px);
		border: 6px solid transparent;
		border-top-color: $border-top-color_1;
		border-bottom-color: $border-bottom-color_1;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		-webkit-animation: animate-preloader 1s linear infinite;
		animation: animate-preloader 1s linear infinite;
	}
}

#topbar {
	height: 40px;
	font-size: 14px;
	transition: all 0.5s;
	z-index: 996;

	.contact-info {
		i {

			color: $color_3;

			span {
				padding-left: 5px;
				color: $color_1;
			}
		}
	}

	.languages {
		ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			padding: 0;
			margin: 0;
			color: $color_2;

			a {}

			li+li {
				padding-left: 10px;

				&::before {
					display: inline-block;
					padding-right: 10px;
					color: $color_7;
					content: "/";
				}
			}
		}
	}
}

#topbar.topbar-scrolled {
	top: -40px;

	&+#header .logo img {
		max-height: 60px;
	}
}

#header {
	padding: 10px 0;
	transition: all 0.5s;
	z-index: 997;
	background: $color_17;

	.logo {
		font-size: 28px;
		margin: 0;
		padding: 0;
		line-height: 1;
		font-weight: 300;
		letter-spacing: 1px;
		text-transform: uppercase;

		a {
			color: $color_1;
		}

		img {
			transition: all .5s;
			-webkit-transition: all .5s;
			-moz-transition: all .5s;
			-ms-transition: all .5s;
			-o-transition: all .5s;
			width: 100px;

			@include sm {
				width: 75px;
			}

			@include xs {
				width: 60px;
			}
		}
	}
}

#header.header-scrolled {
	top: 0;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

	img {
		@include tabdesktop {
			width: 80px;
		}
	}
}

.menu {
	#menu-flters {
		padding: 0;
		margin: 0 auto 0 auto;
		list-style: none;
		text-align: center;
		border-radius: 50px;

		li {
			cursor: pointer;
			display: inline-block;
			padding: 8px 12px 10px 12px;
			font-size: 16px;

			line-height: 1;
			color: $color_1;
			margin-bottom: 10px;
			transition: all ease-in-out 0.3s;
			border-radius: 50px;

			&:hover {
				color: $color_2;
			}

			&:last-child {
				margin-right: 0;
			}
		}

		li.filter-active {
			color: $color_2;
		}
	}

	.menu-item {
		margin-top: 50px;
	}

	.menu-img {
		width: 70px;
		border-radius: 50%;
		float: left;
		border: 5px solid rgba(255, 255, 255, 0.2);
	}

	.menu-content {
		margin-left: 85px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		position: relative;

		&::after {
			content: "......................................................................" "...................................................................." "....................................................................";
			position: absolute;
			left: 20px;
			right: 0;
			top: -4px;
			z-index: 1;
			color: $color_12;

		}

		a {
			padding-right: 10px;
			background: #181617;
			position: relative;
			z-index: 3;
			font-weight: 700;

			transition: 0.3s;

			&:hover {
				color: $color_2;
			}
		}

		span {
			background: #181617;
			position: relative;
			z-index: 3;
			padding: 0 10px;
			font-weight: 600;
			color: $color_2;
		}
	}

	.menu-ingredients {
		margin-left: 85px;
		font-style: italic;
		font-size: 14px;

		color: $color_7;
	}
}

.admission-form-wrap {
	background: $color_17;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	overflow: hidden;
	box-shadow: $box-shadow;

	@media screen and (min-width: 550px) and (max-height: 700px) {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
	}

	@include sm {
		margin-top: 60px;
	}

	@include xs {
		margin-top: 60px;
	}

	.admission-head-wrap {
		padding: 10px 0;
		background: #F2F2F2;
		font-size: 22px;
		text-align: center;
		color: $sc-color2;
	}

	.admission-body-wrap {
		padding: 15px;

		label.form-label {
			font-style: normal;
			font-size: 14px;
			line-height: 18px;
			text-transform: capitalize;
			color: $sc-color0;

			@include xs {
				font-size: 13px;
			}
		}

		.d-flex-adj {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			align-content: stretch;
		}
	}
}

.php-email-form {
	width: 100%;

	.bttn {
		font-size: 14px;
	}

	.form-group {
		padding-bottom: 8px;
	}

	.validate {
		display: none;
		color: $color_13;
		margin: 0 0 15px 0;
		font-weight: 400;
		font-size: 13px;
	}

	.error-message {
		display: none;
		color: $color_1;
		background: #ed3c0d;
		text-align: center;
		padding: 15px;
		font-weight: 600;
	}

	.sent-message {
		display: none;
		color: $color_1;
		background: #18d26e;
		text-align: center;
		padding: 15px;
		font-weight: 600;
	}

	.loading {
		display: none;
		text-align: center;
		padding: 15px;

		&:before {
			content: "";
			display: inline-block;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			margin: 0 10px -6px 0;
			border: 3px solid #EB642D;
			border-top-color: $border-top-color_2;
			-webkit-animation: animate-loading 1s linear infinite;
			animation: animate-loading 1s linear infinite;
		}
	}

	textarea,
	input {
		border-radius: 6px;
		box-shadow: none;
		font-size: 14px;
		background: $color_17;
		border-color: #ccc;
		height: 44px;
		color: $sc-color0;
		text-transform: capitalize;

		@include xs {
			font-size: 13px;
		}

		&:focus {
			border-color: #ffa011;
		}
	}

	textarea {
		height: 150px;
	}

}

.form-control:focus {
	box-shadow: none;
}

.radio-flex-btn {
	background: #F2F2F2;
	overflow: hidden;
	border-radius: 5px;
	border: 1px solid #E0DEDE;
	padding: 3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;

	.btn {
		font-size: 14px;
	}

	.btn-check {
		font-size: 14px;
	}

	.btn-check:checked+.btn,
	.btn.active,
	.btn.show,
	.btn:first-child:active,
	:not(.btn-check)+.btn:active {
		background: $sc-color2;
		color: $color_17;
	}
}


.head-para {
	margin-bottom: 30px;
	text-align: center;

	@include xs {
		margin-bottom: 20px;
	}
}

.gallery-item {
	border: 1px solid $color_17;
}

.about {

	.h1,
	h2 {
		color: $sc-color2;
	}

	p {
		opacity: 0.85;
	}

	.about-row2 {
		margin-bottom: 60px;
	}

	.about-img {
		position: relative;
		@extend .st;

		@include sm {
			max-width: 80%;
			margin: 0 auto 60px;
		}

		@include xs {
			max-width: 95%;
			margin: 0 auto 60px;
		}

		img {
			max-width: 100%;
			border: 4px solid rgba(255, 255, 255, 0.2);
			box-shadow: $box-shadow;
			position: relative;
		}

		&:hover {
			transform: scale(1.03);

			&::before {
				left: 10px;
				top: 10px;
			}

			&::after {
				right: 10px;
				bottom: 10px;
			}
		}
	}
}


.about-us-card {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin-left: 15px;
	max-width: 500px;

	@include xs {
		margin-left: 0;
		margin-bottom: 10px;
	}

	.about-us-para {
		margin-left: 10px;
		margin-top: -20px;
	}

	.fs24 {
		text-transform: uppercase;
		margin-bottom: 5px;
		font-weight: 600;

		@include xs {
			margin-bottom: 0;
		}
	}

	.fs16 {
		margin-bottom: 0;
	}

	&:nth-child(1) {
		.fs24 {
			color: #4CAEFE;
		}
	}

	&:nth-child(2) {
		.fs24 {
			color: #FD4B85;
		}
	}

	&:nth-child(3) {
		.fs24 {
			color: #42EA82;
		}
	}
}

.swiper-slide {
	text-align: center;
}

.institute {
	width: 100%;
	background: url("../images/school/institute/institute-bg.jpg") top center;
	background-size: cover;
	position: relative;

	&:before {
		content: "";
		background: linear-gradient(269.66deg, #36CE7B 0.22%, #8ED136 99.65%);
		opacity: 0.9;
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	.swiper-button-next,
	.swiper-button-prev,
	h2,
	p {
		color: $color_17;
	}

	.swiper-pagination-bullet {
		background: $color_17;
	}

	.swiper-slide {
		border: 2px solid $color_17;
		overflow: hidden;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
		box-shadow: $box-shadow;
		display: inline-block;

		@include sm {
			border: 0 !important;
			box-shadow: none !important;
		}

		@include xs {
			border: 0 !important;
			box-shadow: none !important;
		}
	}

	.swiper-button-next,
	.swiper-button-prev {
		background: #4caefe;
		padding: 10px;
		display: inline-block;
		font-size: 24px;
		border-radius: 50%;
		width: 45px;
		height: 45px;
		text-align: center;

		@include xs {
			width: 30px;
			height: 30px;
			font-size: 18px;
		}

		&::after {
			font-size: 18px;
			top: -10px;
			position: relative;
		}
	}
}

.facilities {
	h2 {
		color: $sc-color2;
	}

	p {
		opacity: 0.85;
	}
}

.facilities-card {
	p {
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		margin-top: 10px;
		margin-bottom: 50px;
	}

	img {
		overflow: hidden;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
	}
}

.curriculum {
	.curriculum-card {
		overflow: hidden;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
		background: $color_17;
		display: inline-block;


		p {
			text-align: center;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.curriculum {
	width: 100%;
	background: url("../images/school/curriculum/curriculum-bg.jpg") top center;
	background-size: cover;
	position: relative;

	.swiper-pagination-bullet {
		background: $color_17;
		opacity: 0.85;
	}

	.swiper-pagination-bullet-active {
		background: $color_17;
		opacity: 1;
	}

	.curriculum-card {
		margin-bottom: 30px;
	}

	h2 {
		color: $color_17;
	}

	.head-para {
		.fs18 {
			color: $color_17;
			font-weight: 300;
		}
	}

	.curriculum-card {
		.curriculum-card-para {
			padding: 15px;

			p {
				text-align: center;
				font-size: 16px;
				font-weight: 600;
				color: $sc-color2;
				margin: 0;
				padding: 0;
			}
		}
	}

	&:before {
		content: "";
		background: linear-gradient(282.58deg, #00CBAD 0%, #46A1F2 100%);
		opacity: 0.9;
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		pointer-events: none;
	}

}


.staffs {
	.head-para {
		h2 {
			color: $sc-color2;
		}

		p {
			opacity: 0.85;
		}
	}
}

.staffs-img-wrap {
	background: $color_17;
	text-align: center;
	position: relative;
	overflow: hidden;

	.staffs-img {
		overflow: hidden;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
	}

	&:hover {
		.staffs-info {
			.social {
				margin-top: 60px;
				opacity: 1;

				@include xs {
					margin-top: 0;
				}
			}
		}
	}
}

.staffs-info {
	margin-bottom: 40px;

	.social {
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-top: 100px;
		z-index: 9;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		width: 180px;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		padding: 6px;
		@extend .st;

		a {
			font-size: 22px;
			margin: 0 7px;

			@include xs {
				font-size: 16px;
			}
		}

		@include xs {
			opacity: 1;
			position: static;
			transform: none;
			-webkit-transform: none;
			-moz-transform: none;
			-ms-transform: none;
			margin-top: 0;
			-o-transform: none;
		}
	}

	.fs18 {
		font-size: 18px;
		font-weight: 600;
		color: $sc-color2;
		margin-bottom: 0;
	}

	.fs16 {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 0;
		opacity: 0.85;
	}
}

.counter-wrap {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	box-shadow: $box-shadow;
	@extend .st;

	@include sm {
		width: 180px;
		height: 180px;
	}

	@include xs {
		width: 160px;
		height: 160px;
	}

	&:hover {
		box-shadow: $box-shadow2;
	}

	.bi {
		font-size: 48px;
		color: $color_17;
		margin: 3px 0 -7px;


		@include sm {
			margin: -15px 0 -7px;
		}

		@include xs {
			margin: -15px 0 -7px;
			font-size: 38px;
		}
	}

	.counter-num {
		font-size: 38px;
		font-weight: 600;
		color: $color_17;

		@include sm {
			font-size: 28px;
		}

		@include xs {
			font-size: 20px;
		}
	}

	.counter-text {
		font-size: 18px;
		font-weight: 300;
		color: $color_17;
	}

	&.counter-wrap1 {
		@extend .sbg-gradient2;
	}

	&.counter-wrap2 {
		@extend .sbg-gradient1;
		margin-top: 100px;

		@include xs {
			margin-top: 70px;
		}
	}

	&.counter-wrap3 {
		@extend .sbg-gradient3;
	}

	&.counter-wrap4 {
		@extend .sbg-gradient4;
		margin-top: 100px;

		@include xs {
			margin-top: 70px;
		}
	}
}

.counter-wrap-row {
	margin-top: 70px;
}

.btn-twitter {
	color: #4da6e9;

	&:hover,
	&:active,
	&:focus {
		color: #4da6e9;
	}
}

.btn-facebook {
	color: #38529a;

	&:hover,
	&:active,
	&:focus {
		color: #38529a;
	}
}

.btn-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	&:hover,
	&:active,
	&:focus {
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}


.btn-linkedin {
	color: #0073b1;

	&:hover,
	&:active,
	&:focus {
		color: #0073b1;
	}
}

.social-links a {
	margin: 0 10px;

	@include xs {
		margin: 0 5px;
	}

	i {
		font-size: 22px;
	}
}

.testimonials {
	background: linear-gradient(90deg, #EA58BB 0%, #FC4E65 100%);

	h2,
	p {
		color: $color_17;
	}

	.testimonials-carousel {
		overflow: hidden;
	}

	.testimonials-slider {
		overflow: hidden;
	}

	.testimonial-item {
		box-sizing: content-box;
		min-height: 320px;

		.testimonial-img {
			width: 90px;
			border-radius: 50%;
			margin: -40px 0 0 40px;
			position: relative;
			z-index: 2;
			border: 6px solid rgba(255, 255, 255, 0.2);
		}

		h3 {
			font-size: 18px;
			font-weight: bold;
			margin: 10px 0 5px 45px;
			color: $color_17;
		}

		h4 {
			font-size: 14px;
			margin: 0 0 0 45px;
			color: $color_17;
			opacity: 0.85;
			font-weight: 400;
		}

		.quote-icon-left {
			color: #ff9b15;
			font-size: 26px;
			display: inline-block;
			left: -5px;
			position: relative;
		}

		.quote-icon-right {
			color: #ff9b15;
			font-size: 26px;
			display: inline-block;
			right: -5px;
			position: relative;
			top: 10px;
		}

		p {
			font-style: italic;
			margin: 0 15px 0 15px;
			padding: 20px 20px 60px 20px;
			border-radius: 6px;
			position: relative;
			z-index: 1;
			border: 2px solid rgba(255, 255, 255, 0.2);
		}
	}

	.swiper-pagination {
		margin-top: 30px;
		position: relative;

		.swiper-pagination-bullet {
			width: 12px;
			height: 12px;
			opacity: 0.5;
			background-color: $color_17;
		}


		.swiper-pagination-bullet-active {
			background-color: $color_17;
			opacity: 1;
		}
	}
}

.gallery {
	padding-bottom: 0;

	.head-para {
		h2 {
			color: $sc-color2;
		}

		p {
			opacity: 0.85;
		}
	}
	.gallery-item .img-fluid {
		@include tabdesktop{
			height: 180px;
		width: 100%;
		object-fit: cover;
		object-position: top;
		}
		@include xxl{
			height: 250px;
		}
	}
}

.contact {
	background: #F3F4F6;
	padding-bottom: 0;

	.head-para {
		h2 {
			color: $sc-color2;
		}

		p {
			opacity: 0.85;
		}
	}

	.contact-row1 {
		margin-bottom: 60px;

		.contact-col2 {
			@include sm {
				order: -1;
			}

			@include xs {
				order: -1;
			}
		}

		.contact-col3 {
			.qr-code {
				margin: auto;
				display: block;
				max-width: 180px;
			}

			p {
				b {
					span {
						color: $sc-color2;
					}
				}
			}

			.info {
				h4 {
					padding: 0;
					text-align: center;
				}

				p {
					padding: 0;
					text-align: center;
				}
			}
		}
	}

	.info {
		width: 100%;
		margin-top: 100px;

		@include sm {
			margin-top: 60px;
		}

		@include xs {
			margin-top: 60px;
		}

		i {
			font-size: 20px;
			float: left;
			width: 44px;
			height: 44px;
			@extend .sbg-gradient1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			transition: all 0.3s ease-in-out;
			color: $color_17;
		}

		h4 {
			padding: 0 0 0 60px;
			font-size: 16px;
			opacity: 0.85;
			margin-bottom: 5px;

		}

		p {
			padding: 0 0 0 60px;
			margin-bottom: 0;
			font-size: 14px;
			opacity: 0.85;
		}

		.open-hours,
		.email,
		.phone {
			margin-top: 15px;
		}
	}


}

.footer {
	padding: 15px 0;

	.copyright {
		font-size: 16px;
		opacity: 0.8;
		font-weight: 300;

		@include xs {
			font-size: 14px;
			text-align: center;
		}
	}

	.social-links {
		text-align: right;

		@include xs {
			text-align: center;
			margin-top: 10px;
		}

		a {
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.gallery-grid {
	background: #000;
}


.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 996;
	width: 44px;
	height: 44px;
	border-radius: 50px;
	transition: all 0.4s;
	@extend .sbg-gradient1;

	i {
		font-size: 28px;
		color: $color_17;
		line-height: 0;
	}

	&:hover {
		@extend .sbg-gradient1;
		color: $color_17;

		i {
			color: $color_17;
		}
	}
}

.back-to-top.active {
	visibility: visible;
	opacity: 1;
}



@-webkit-keyframes animate-loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes animate-loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


.why-us {
	// margin-top: 60px;	
}

.box {
	padding: 30px 30px;
	min-height: 100%;
	background: $color_17;

	h4 {
		text-align: center;
	}

	&.box1 {
		box-shadow: rgba(76, 174, 254, 0.3) 0px 7px 29px 0px;
		border: 1px solid rgb(76, 174, 254);

		h4 {
			color: #4CAEFE;
		}

		p {
			opacity: 1;
		}
	}

	&.box2 {
		box-shadow: rgba(253, 75, 133, 0.3) 0px 7px 29px 0px;
		border: 1px solid rgb(253, 75, 133);

		h4 {
			color: #FD4B85;
		}
	}

	&.box3 {
		box-shadow: rgba(66, 234, 130, 0.3) 0px 7px 29px 0px;
		border: 1px solid rgb(66, 234, 130);

		h4 {
			color: #42EA82;
		}
	}

	&.box4 {
		box-shadow: rgba(692, 44, 206, 0.3) 0px 7px 29px 0px;
		border: 1px solid rgb(92, 44, 206);

		h4 {
			color: $sc-color3;
		}
	}
}

.box-custom {
	h5 {
		color: $color_17;
	}

	p {
		color: $color_17;
		font-size: 18px;
	}
}

.admission-strip {
	@extend.sbg-gradient1;
	padding: 15px;
	margin: 40px auto 0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	max-width: 700px;
	text-align: center;

	h4 {
		color: $color_17;
	}
}

.why-us-2 {
	.container {
		margin-top: 60px;
		border-top: 1px solid #ccc;
		padding-top: 60px;

		h4 {
			margin-bottom: 20px;
			color: $sc-color2;
		}
	}
}

.dot-ul {
	li {
		list-style: disc;
		text-align: left;
		font-weight: 300;
		color: $sc-color2;

		span {
			color: $sc-color0;
			opacity: 0.8;
		}
	}
}

.extra-info {
	padding-bottom: 20px;
}


.glightbox-clean {
	.gslide-media.gslide-image {
		img{
			@include tabdesktop{
				max-height: 70vh !important;
			}
		}
	}
	.gdesc-inner{
		padding: 15px;
		color: #fff;
		background: #000;
	}
	.gslide-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		background: #000;
		margin-bottom: 0;
		line-height: 1.4em;
		text-align: center;
	}
}

.testimonials .testimonial-item p i.bi.bi-quote {
	font-size: 26px;
}

.box.box2 ul.dot-ul {
	padding-left: 15px;
}