@import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap");

:root[theme="dark"] {
	--title-font: "Sen", sans-serif;
	--roboto: "Roboto Mono", monospace;
	/* --color-main: #161616; */
	--color-main: #0c0d21;
	--color-main-light: #151629;
	--color-main-transparent: rgba(12, 23, 36, 0.27451);
	--color-primary: #2882f5;
	--color-primary-light: rgba(40, 129, 245, 0.18431);
	--color-accent: #28f586;
	--color-accent-light: rgba(40, 245, 136, 0.07451);
	--color-accent-2: #f31154;
	--color-accent-2-light: rgba(12, 206, 93, 0.18431);
	--color-background: #e2e7ee;
	--color-background-light: #eef1f6;
	--font-color: #fff;
	--text-body: hsla(0, 0%, 100%, 0.7);
	--color-button-text: #fff;
	--font-color-light: hsla(0, 0%, 100%, 0.25882);
	--border-color: #dbdddf;
	--border-color-light: #eee;
	--colour-pink: #d7385e;
	--color-error: #e97414;
	--color-success: #01c251;
	--facebook: #4267b2;
	--twitter: #1da1f2;
	--yt: #ff0000;
	--linked-in: #0077b5;
	--info: white;
	--gradient-blue: linear-gradient(
		94.99deg,
		#00ffa4 2.48%,
		#6e12ca 52.18%,
		#2882f5 95.72%
	);
	--default-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
		0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--primary-shadow: 0px 10px 20px rgba(16, 68, 209, 0.185);
	--popup-shadow: 0px 20px 35px rgba(7, 74, 126, 0.123);
	--popup-background: rgba(20, 23, 54, 0.17255);
}

:root[theme="light"] {
	/* 
	Blue:
	#1a5ef3
	#3be4dd
	#5564d6
	#13102c
	#1846a0
	#163974
	#5a7186
	#1a5ef3
	#131435
	*/
	/*Seclected colors----------------------------
	--color-main: #95d5CE;
	--font-color: #49274A;
	--color-accent:#8657c5;
*/
	--title-font: "Sen", sans-serif;
	--roboto: "Roboto Mono", monospace;
	/* --color-main: #161616; */
	--color-main: #E1E5EA`;
	--color-main-light: #f8f5f1;
	--color-main-transparent: rgba(12, 23, 36, 0.27451);
	--color-primary: #2882f5;
	--color-primary-light: rgba(40, 129, 245, 0.18431);
	--color-accent: #8657c5;
	--color-accent-light: rgba(40, 245, 136, 0.07451);
	--color-accent-2: #f31154;
	--color-accent-2-light: rgba(12, 206, 93, 0.18431);
	--color-background: #e2e7ee;
	--color-background-light: #eef1f6;
	--font-color: #49274a;
	--text-body: #6e12ca;
	--facebook: #4267b2;
	--twitter: #1da1f2;
	--yt: #ff0000;
	--linked-in: #0077b5;
	--info: white;
	--color-button-text: #fff;
	--font-color-light: hsla(0, 0%, 100%, 0.25882);
	--border-color: #dbdddf;
	--border-color-light: #eee;
	--colour-pink: #3be4dd;
	--color-error: #e97414;
	--color-success: #01c251;
	--gradient-blue: linear-gradient(
		94.99deg,
		#00ffa4 2.48%,
		#6e12ca 52.18%,
		#2882f5 95.72%
	);
	--default-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
		0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--primary-shadow: 0px 10px 20px rgba(16, 68, 209, 0.185);
	--popup-shadow: 0px 20px 35px rgba(7, 74, 126, 0.123);
	--popup-background: rgba(20, 23, 54, 0.17255);
	/* transition: all 10s; */
}

/*********************** global variable declaration End ********************************************/

* {
	padding: 0;
	box-sizing: border-box;
	margin: 0;
	background-color: var(--color-main);
	color: var(--font-color);
	font-family: "Sen", sans-serif;
	letter-spacing: 0.01em;
}

html {
	scroll-behavior: smooth;
	height: 100%;
}
body {
	height: 100%;
}

a {
	text-decoration: none;
	color: var(--font-color);
	cursor: pointer;
}

.typer {
	color: var(--font-color);
}

/* .light-theme {
	color: #000;
	background-color: white;
} */

#theme-button {
	cursor: pointer;
}

/* overflow problems */
body {
	max-width: 100vw;
	overflow-x: hidden;
}

.sub-footer,
#faq,
.faq-text {
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

/* ******************* scroll bar *************** */

/* -------------------vin----------------------- */
body::-webkit-scrollbar {
	width: 9px;
}

body::-webkit-scrollbar-track {
	background: var(--color-secondary-light);
	/* margin-bottom: 30rem; */
}

body::-webkit-scrollbar-thumb {
	background-color: var(--color-accent);
	border-radius: 1rem;
	border: 3px solid transparent;
}
/* ******************* scroll bar end *************** */

/*************************************  toggleButton Start ********************************************/
.sun-moon-container {
	background-color: transparent;

	--rotation: 0;
	transform: rotate(calc(var(--rotation) * 1deg));
	transition: transform 2s;
}

.dark .sun-moon-container {
	--rotation: 180deg;
}

.sun,
.moon {
	background-color: transparent;

	margin: 0.5rem 0 0 0.5rem;
	transition: opacity, fill, 1s;
	width: 30px;
	height: 30px;
	fill: var(--font-color);
}

.sun {
	opacity: 1;
}

.dark .sun {
	opacity: 0;
}

.moon {
	opacity: 0;
}

.dark .moon {
	margin-bottom: 0.5rem;
	opacity: 1;
}

#popup {
	display:none;
	position:absolute;
	margin:0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

@media screen and (max-width: 700px) {
	.sun-moon-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sun {
		margin: 0;
	}

	.dark .moon {
		margin: 0;
	}
}
/*************************************  toggleButton end ********************************************/
/*------------------------------------------------------------------------------------------------------------------*/
/*************************************  Nav bar Start ********************************************/

.nav-bar {
	position: relative;
	z-index: 1;
	background-color: transparent;

	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 10vh;
	margin: 0rem 5rem 0 10rem;
}

.nav-bar .logo,
.nav-bar .logo h1 {
	background-color: transparent;
	transition: all 0.3s ease-in-out;
}

.nav-bar .logo h1 span {
	color: var(--color-accent);
	transition: all 0.3s ease-in-out;
}

.nav-bar .logo h1:hover {
	color: var(--color-accent);
}

.nav-bar .logo h1:hover span {
	color: var(--font-color);
}

.nav-links {
	background-color: transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: max-content;
}

.nav-links > li {
	background-color: transparent;
	list-style: none;
	display: flex;
	justify-content: center;
	/* padding: 1rem; */
}

.nav-links > li > .dropdown-link {
	display: none;
	position: absolute;
	transition: 0.3s all ease-in-out;
}

.nav-links > li:hover .dropdown-link {
	display: block;
	background: rgba(0, 0, 0, 0.4);
	padding: 0;
}

.nav-links > li > .dropdown-link li {
	background-color: transparent;
	width: 200px;
	list-style: none;
	padding: 15px;
	transition: 1s;
	border-bottom: 2px solid transparent;
}

.nav-links > li > .dropdown-link > li:hover {
	border-bottom: 2px solid #28f586;
}

ul.dropdown-link {
	margin-top: 1.8rem;
}

ul.dropdown-link li {
	text-align: center;
}
.nav-links > li > a, .nav-links > li > .download {
	background-color: transparent;
	padding: 0.2rem 1.2rem;
	opacity: 0.7;
	position: relative;
	transition: all 0.5s ease-in-out;
}

.nav-links > li > a::after, .nav-links > li > .download::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height: 2.2px;
	transform: scaleX(0);
	background-color: #00ffa4;
	transition: all 0.4s ease-in-out;
}

.nav-links > li > a:hover {
	opacity: 1;
}

.nav-links > li > a:hover::after {
	transform: scaleX(1);
}

.hamburger {
	display: none;
}

.bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	transition: all 0.3s ease-in-out;
	background-color: white;
}

.nav-links .download::after {
	content: none;
}
/* vin */
.nav-bar .logo h1 {
	margin: 0;
}

.nav-bar .logo a {
	display: flex;
	align-items: center;
}
/* vin-end */
@media screen and (max-width: 1000px) {
	.nav-bar {
		margin: 0 1rem;
	}
}

@media screen and (min-width: 700px) and (max-width: 1250px) {
	.nav-bar .logo {
		margin-left: 2rem;
	}
/* vin	 */
	.nav-links > li > .dropdown-link {
		display: block;
		position: absolute;
		transition: 0.3s all ease-in;
		margin-top: 50px;
		left: 00px;
	}

	.nav-links > li:hover .dropdown-link {
		display: block;
		background: rgba(0, 0, 0, 0.4);
		padding: 0;
		top: -2vw;
		left: -0px;
	}
/* 	vin end */
}
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  Burgers Start ********************************************/
@media only screen and (max-width: 1250px) {
	.nav-bar .logo {
		margin-left: 2rem;
	}

	.active .hero h1,
	.active .hero .info {
		display: none;
	}

	.nav-bar .logo a {
		display: flex;
		align-items: center;
	}

/* 	.hacko {

		margin-top: 1rem;
	} */
	.nav-links,
	.nav-links.active {
		height: 100%;
		position: fixed;
		flex-direction: column;
		justify-content: center;
		z-index: 2;
		left: -100%;
		top: 0;
		width: 100%;
		text-align: center;
		transition: 0.3s;
		overflow: hidden;
		background-color: var(--color-main);
		margin: 0;
		padding: 0;
	}

	.nav-links > li:hover .dropdown-link {
		display: block;
		position: relative;
	}

	.nav-links > li > a::after {
		display: none;
	}

	.nav-links > li {
		margin: 1rem 0;
		position: relative;
	}

	.nav-bar {
		margin: 0rem 1rem;
	}

	.nav-links.active {
		left: 0;
	}

	body.active {
		overflow: hidden;
	}

	.nav-item {
		margin: 2.5rem 0;
	}

	#theme-button {
		position: absolute;
		top: 5vh;
	}

	.hamburger {
		display: block;
		cursor: pointer;
		position: absolute;
		z-index: 2;
		right: 0;
		margin: 0 1rem 0 0;
	}

	.hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.nav-links.active .download {
		position: fixed;
	}
	.nav-links.active .dropdown-link {
		top: 1rem;
		right: 0rem;
	}

	.nav-links > li > .dropdown-link {
		display: block;
		position: absolute;
		transition: 0.3s all ease-in;
		margin-top: 50px;
		left: 1300px;
	}

	.nav-links > li:hover .dropdown-link {
		display: block;
		background: rgba(0, 0, 0, 0.4);
		padding: 0;
		top: -2vw;
		left: -0px;
	}
}

@media screen and (max-width: 400px) {
	.nav-bar .logo {
		margin-left: 0;
		display: flex;
		align-items: center;
	}

	.nav-bar .logo h1 {
		font-size: large;
	}
}

/*  vin */
@media screen and (min-width: 700px) and (max-width: 1250px) {
	.nav-links.active .download {
		position: relative;
		left: 0px;
	}
	.li-download {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.nav-links.active .dropdown-link {
		top: 0rem;
	}
	.nav-links > li > .dropdown-link {
		display: none;
		position: relative;
		transition: 0.1s all ease-in;
		margin-top: 200vh;
		left: 0px;
		padding: 0;
	}

	.nav-links > li:hover .dropdown-link {
		display: block;
		margin-top: 50px;
		left: -0px;
		padding: 0;
	}
}
/*  vin*/

/*************************************  Burgers End********************************************/
/* ----------------------------------------------------------------------------------------------------------- */

/*************************************  Nav bar end ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  Hero Start ********************************************/

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
	overflow: hidden;
}


.hero h1,
.hero .info {
	position: absolute;
	margin-left: calc(10% - 20px);
	font-size: 3rem;
	z-index: 1;
	background: transparent;
}

.hero h1 {
	/* top: 15rem; */
	top: calc(10vh + 10%);
}

.hero .info {
	top: calc(10vh + 25%);
	background-color: rgba(0,0,0,.4);
	padding: 50px;
	border-radius: 10px;
	border-bottom: 5px solid #28F586;
}

.update-poster{
	position: absolute;
	top: 0px;
}

.hero-poster{
	position: absolute;
	top: calc(12vh + 12%);
	right: 13.5%;
	position: absolute;
	z-index: 1;
	background-color: transparent;
}
/* .hero-poster img{
	height: 60vh;
} */

.hero .cursor {
	background-color: transparent;
}

.hero .info p {
	font-family: var(--roboto);
	font-size: 1.2rem;
	background: transparent;
}

.hero .info .button-container {
	background: transparent;
}


.hero .info .download {
	font-family: var(--roboto);
	width: max-content;
	
}

.btn-arrow{
	color: red;
	transition: .5s;
}
.btn-arrow i{
	color: transparent;
	transition: .5s;
}
.glow-on-hover:hover > .btn-arrow i{
	color: #28F586;
}
.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 0;
	border-radius: 0.4rem;
	padding: 1rem;
	font-size: 1rem;
	border-radius: 0.4rem;
	border: 1px solid white;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	font-family: var(--roboto);
	margin: 1rem 0 0 0;
}


.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -7.5px;
    left:-7.5px;
    background-size: 400%;
    z-index: -10;
    filter: blur(5px);
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
	border-radius: 0.4rem;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
	border-radius: 0.4rem;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.hero .info button:hover {
	color:#28F586;
}

.hero h1 .typer {
	background: transparent;
}

.anim,
.anim svg {
	position: relative;
	width: 100%;
	/* height: 100%; */
	opacity: 0.7;
}
.anim path {
	stroke-width: 2;
}

@media screen and (max-width: 700px) {
	.hero {
		height: 90vh;
		align-items: center;
	
	}

	.hero h1 {
		font-size: 6vw;
		/* top: 7rem; */
		top: 2rem;
		align-items: center;
	}
	.hero .info p {
		text-align: center;
		font-size: 12px;	
	}

	.hero .info {
		/* top: 12rem; */
		top: 6rem;
		text-align: center;
		margin:10px
	}

	.hero .info button{
		top: 2rem;
	}

	.hero-poster{
		top: 25rem;
		text-align: center;
		margin: 10px;
		right:0%;
		left: 0%;
	}

	.hero-poster img{
		width: 95vw;
	}
	.anim,
	.anim svg {
		height: 100%;
		width: 120%;
		opacity: 0.7;
	}

	.anim path {
		stroke-width: 4;
	}

	.active .hero h1,
	.active .hero .info {
		display: none;
	}
}

/*************************************  Hero End ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  About Start ********************************************/

.container {
	display: block;
	/* width: 95%; */
	max-width: 1280px;
	margin: 0 auto;
}
.heading {
	display: flex;
	align-items: center;
}
.section-title::before {
	content: "#";
	padding-right: 5px;
	color: var(--hash-tag);
}

.heading h2.section-title {
	font-family: "Sen";
	font-size: 1.8rem;
	font-weight: 600;
	padding: 10px 10px 10px 0;
}

.heading .line {
	flex: 1;
	height: 1px;
	width: 985px;
	background: var(--colour-pink);
}

.content-section {
	display: flex;
	flex-direction: column;
	padding: 40px 0 10px;
}

#text-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#text-container > p {
	width: 40rem;
	line-height: 1.5rem;
	padding-left: 2.5rem;
	text-align: justify;
	font-size: large;
}

/* #text-container .bongo-container {
	width: 30%;
	height: 30vh;
} */

@media screen and (max-width: 700px) {
	.heading {
		display: flex;
		flex-direction: column;
	}

	.heading .section-title {
		text-align: center;
	}

	.heading .line {
		flex: none;
		width: 90%;
	}

	#text-container {
		height: auto;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	#text-container > p {
		width: 90%;
		padding: 0;
	}

	#text-container .dummy {
		margin: 1rem 0;
	}
}
/*************************************  About End ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  Timer start ********************************************/

.flipclock {
	display: flex;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
}

.flipclock * {
	box-sizing: inherit;
}

.leaf {
	display: flex;
	flex-direction: column;
	margin: 0 4px;
	perspective: 300px;
}

.leaf::after {
	content: attr(data-label);
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 8px;
	transform: translateX(-50%);
	color: #f2f2f2;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	opacity: 0.5;
}

.top,
.bottom,
.leaf-front,
.leaf-back {
	position: relative;
	display: block;
	height: 64px;
	width: 120px;
	background-color: #f2f2f2;
	color: #2d3748;
	overflow: hidden;
	border-color: #2d3748;
}
.top span,
.bottom span,
.leaf-front span,
.leaf-back span {
	position: absolute;
	left: 50%;
	width: 100%;
	height: 128px;
	text-align: center;
	font-family: "Impact", sans serif;
	background-color: var(--colour-pink);
	font-size: 80px;
	line-height: 128px;
	transform: translateX(-50%);
}

.leaf._3-digits .top,
.leaf._3-digits .bottom,
.leaf._3-digits .leaf-front,
.leaf._3-digits .leaf-back {
	width: 148px;
}

.top,
.leaf-front {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	margin-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.top span,
.leaf-front span {
	top: 0;
}

.leaf-front {
	position: absolute;
	z-index: 10;
}

.bottom,
.leaf-back {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-style: solid;
	border-top-width: 1px;
}
.bottom span,
.leaf-back span {
	bottom: 0;
}

.leaf-back {
	position: absolute;
	top: 64px;
	z-index: 10;
}

@media screen and (max-width: 600px) {
	.flipclock {
		padding: 6.6666666667vw;
	}

	.leaf {
		margin: 0 0.6666666667vw;
	}

	.leaf::after {
		margin-top: 1.3333333333vw;
		font-size: 2.3333333333vw;
	}

	.top,
	.bottom,
	.leaf-front,
	.leaf-back {
		height: 10.6666666667vw;
		width: 20vw;
	}
	.top span,
	.bottom span,
	.leaf-front span,
	.leaf-back span {
		height: 21.3333333333vw;
		font-size: 13.3333333333vw;
		line-height: 21.3333333333vw;
	}

	.leaf._3-digits .top,
	.leaf._3-digits .bottom,
	.leaf._3-digits .leaf-front,
	.leaf._3-digits .leaf-back {
		width: 24.6666666667vw;
	}

	.top,
	.leaf-front {
		border-top-left-radius: 1vw;
		border-top-right-radius: 1vw;
	}

	.bottom,
	.leaf-back {
		border-bottom-left-radius: 1vw;
		border-bottom-right-radius: 1vw;
	}

	.leaf-back {
		top: 10.6666666667vw;
	}
}
.leaf-front {
	transform-origin: bottom center;
	transform: rotateX(0deg);
	transform-style: preserve-3d;
	transition-delay: 0.3s;
}

.leaf-back {
	transform-origin: top center;
	transform: rotateX(90deg);
	transform-style: preserve-3d;
	transition-delay: 0s;
}

.bottom::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: black;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	filter: blur(10px);
}

.flip .leaf-front {
	transform: rotateX(-90deg);
	transition: transform 0.3s ease-in, background-color 0.3s ease-in,
		color 0.3s ease-in;
	transition-delay: 0s;
	color: black;
	background-color: #737373;
}
.flip .leaf-back {
	transform: rotateX(0deg);
	transition: transform 0.3s ease-in, background-color 0.3s ease-in,
		color 0.3s ease-in;
	transition-delay: 0.3s;
}
.flip .bottom::before {
	transition: height 0.3s ease-in-out;
	transition-delay: 0.15s;
	height: 100%;
}

#headline {
	text-align: center;
	font-size: 7vw;
}

/*************************************  Timer end ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  Sponsors start ********************************************/
.our-clients {
	width: 100%;
	height: auto;
	text-align: center;
}

.our-clients ul {
	padding: 0;
	margin: 0;
}

.our-clients ul li {
	list-style: none;
	display: inline-block;
	width: 280px;
	height: 200px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	margin: 10px;
	/* box-shadow: 2px 5px 8px 8px rgba(49, 31, 99, 0.89); */
	transition: 0.5s;
}

.our-clients ul li img {
	width: 100%;
	height: 100%;
	transition: all 0.5s ease-in-out;
}

/* .our-clients ul li img:nth-child(1) {
	transform: translateY(0);
	transition: 0.5s;
}
.our-clients ul li img:nth-child(2) {
	transform: translateY(0);
	transition: 0.5s;
} */

.prueba {
	background: transparent;
	filter: invert(31%) sepia(51%) saturate(1656%) hue-rotate(330deg)
		brightness(90%) contrast(110%);
}

.ieee-li img {
	transform: scale(0.85);
	background: transparent;
	filter: brightness(1) invert(0.8);
}

/*Hover-Section*/

.our-clients ul li img:hover {
	transform: scale(1.1);
}

.our-clients .ieee-li img:hover {
	transform: scale(0.95);
}
/* .our-clients ul li:hover img:nth-child(1) {
	transform: translateY(-100%);
	transition: 0.5s;
}
.our-clients ul li:hover img:nth-child(2) {
	transform: translateY(-100%);
	transition: 0.5s;
} */

@media screen and (max-width: 700px) {
	.our-clients {
		margin-top: 2rem;
	}
}
/*************************************  Sponsors end ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/*************************************  Prizes Start ********************************************/
.prizes {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 40vh; */
}

.flip-card {
	width: 392px;
	height: 300px;
	margin: 0 1rem;
	perspective: 1000px;
	cursor: pointer;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
	border-radius: 14px;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-front,
.flip-card-back h1,
.flip-card-front img,
.flip-card-front p {
	background-color: var(--color-main-light);
}

.prizes .flip-card-back h1,
.prizes .flip-card-back span {
	font-size: 2vw;
	font-family: "Roboto", monospace;
}

.flip-card-back {
	background-color: var(--color-main-light);
	color: white;
	transform: rotateY(180deg);
	justify-content: center;
}

.flip-card-back span {
	color: var(--color-accent);
	background-color: var(--color-main-light);
}

.flip-card-back > span {
	width: 90%;
	text-align: center;
	color: var(--font-color);
	font-size: 1rem !important;
	opacity: 0.7;
}

@media screen and (max-width: 700px) {
	.prizes {
		flex-wrap: wrap;
		height: auto;
	}

	.flip-card {
		width: 100%;
		height: 300;
		margin: 1rem 2rem;
	}

	.prizes .flip-card-back h1,
	.prizes .flip-card-back span {
		font-size: 5vw;
	}

	.flip-card-back > span {
		font-size: 3vw !important;
	}
}

/*************************************  Prizes End ********************************************/
/* ----------------------------------------------------------------------------------------------------------- */
/********************************** Track Start *******************************************/

.track-section {
	padding: 1rem;
}

.track-items-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 1em;
	row-gap: 1em;
}

.track-items-grid .track-panel {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* border-radius: 0.5rem;
	border: 0.2rem;
	border-style: solid;
	border-color: var(--color-main-light); */
	padding: 0.4rem;
}

/* .track-panel:hover,
.track-panel:hover * {
	background-color: var(--color-main-light);
} */

.track-panel .track-box {
	border-radius: 20%;
	display: inline-block;
	padding: 1rem;
	height: 5.5rem;
	margin-top: 1rem;
	width: 5.5rem;
	box-sizing: border-box;
	border: 3px solid var(--color-accent);
}

.track-panel .track-box img {
	float: left;
	width: 3rem;
	align-content: center;
}

#track-1 {
	border: 3px solid var(--colour-pink);
}

.track-panel .track-panel-text {
	margin-left: 1em;
	display: flex;
	flex-direction: column;
	padding: 10px;
}

.track-panel .track-panel-text .track-panel-title {
	font-size: 1.5rem;
}

.track-panel .track-panel-text .track-panel-description {
	margin-top: 0.5em;
	opacity: 0.7;
}

@media screen and (max-width: 700px) {
	.track-items-grid {
		display: grid;
		grid-template-columns: none;
		grid-row-gap: 1.2rem;
		row-gap: 1.2rem;
		justify-content: center;
		align-items: center;
	}

	.track-panel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center !important;
	}

	.track-panel-title {
		align-self: center;
	}

	.track-items-grid .track-panel {
		border-radius: 0.5rem;
		border: 0.2rem;
		border-style: solid;
		border-color: var(--color-main-light);
	}
}

/********************************* Track end *********************************************/
/*--------------------------------						----------------------------------*/
/*********************************** FAQ section start *************************************/

.faq-section {
	display: flex;
	flex-direction: column;
	margin-top: 2rem;
}

.faq-section .faq-items-grid {
	margin: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1.2rem;
	column-gap: 1.2rem;
	grid-row-gap: 1.2rem;
	row-gap: 1.2rem;
}

.faq-section .faq-items-grid .faq-item {
	flex: 1;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	border-radius: 0.5rem;
	background-color: var(--color-main-light);
}
.faq-text {
	background-color: var(--color-main-light);
}

.faq-text .faq-text-title {
	background-color: var(--color-main-light);
}

.faq-section .faq-items-grid .faq-item .faq-text-title {
	padding: 0.7rem;
	border-radius: 0.5rem 0.5rem 0 0;
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
}

.faq-section .faq-items-grid .faq-item .faq-text .faq-text-title {
	font-size: 1.2rem;
	width: 90%;
}

.faq-section .faq-items-grid .faq-item .faq-answer {
	display: none;
}

.faq-section .faq-items-grid .faq-item .faq-answer.display {
	display: block;
	background-color: var(--color-main-light);
	border-radius: 0 0 0.5rem 0.5rem;
}

.faq-section .faq-items-grid .faq-item .faq-answer p {
	margin: 0 0.4rem 0.4rem;
	padding: 1rem 1.5rem;
	height: 100%;
	max-height: 200px;
	background-color: var(--color-main);
	border-radius: 0 0 0.5rem 0.5rem;
	overflow: hidden;
}

/* For angle down */
.faq-section .faq-items-grid .faq-item .faq-text {
	position: relative;
}

.faq-text .angle-down {
	position: absolute;
	background: transparent;
	top: 12%;
	right: 1.5rem;
	width: 2rem;
	height: 100%;
	cursor: pointer;
}

.faq-text .angle-down img {
	background: transparent;
	width: 100%;
	filter: brightness(1) invert(0.5);
	transition: filter 0.3s;
}

.faq-text .angle-down img:hover {
	filter: brightness(1) invert(1);
}

@media screen and (max-width: 700px) {
	.faq-text-title {
		width: 85%;
		font-size: 4vw;
	}

	.faq-section .faq-items-grid {
		display: grid;
		grid-template-columns: none;
		align-items: center;
		grid-row-gap: 1.2rem;
		row-gap: 1.2rem;
	}
}

/*********************************** FAQ section end ***************************************/
/*********************************** Footer section ****************************************/
.footer-box {
	height: auto;
	margin-top: 0;
	background-color: transparent;
	background-image: none;
	background-position: 0 0;
	background-size: auto;
	background-repeat: repeat;
}

.footer {
	display: flex;
	width: 100%;
	padding-top: 4rem;
	padding-right: 3vw;
	padding-left: 3vw;
	padding-bottom: 5rem;

	flex-direction: column;

	align-items: center;
}

.main-footer {
	display: grid;
	width: 100%;
	max-width: 1146px;
	padding-top: 48px;
	padding-bottom: 64px;
	flex-direction: column;
	align-items: start;
	grid-auto-columns: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 40px;
	grid-template-columns: 1fr 1fr 1fr;

	grid-template-rows: auto;
	border-top: 1px solid var(--colour-pink);
}
.footer-links {
	display: grid;
	padding-top: 12px;
	grid-auto-columns: 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 0px;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
.unstyle {
	padding-left: 0;
	list-style: none;
}
.footer-list-link {
	display: flex;
	align-items: flex-start;
}

.text-body-3.is-link {
	overflow: visible;
	padding-top: 4px;
	padding-bottom: 4px;
	color: var(--text-body);
	text-decoration: none;
}

.text-body-3 {
	font-size: 14px;
	line-height: 1.6;
}
.about-box {
	display: flex;
	padding-top: 12px;
	flex-direction: column;
	align-items: flex-start;
}

a {
	background-color: transparent;
}
.footer-list-link a:hover {
	color: var(--colour-pink);
	text-decoration: underline;
}
ul {
	margin-top: 0;
	margin-bottom: 10px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}
.sub-footer {
	display: flex;
	width: 100%;
	max-width: 1146px;
	padding-top: 24px;
	padding-bottom: 64px;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid hsla(0, 0%, 100%, 0.1);
}

.brand-box {
	display: flex;
	align-items: center;
}
.social-box {
	display: grid;
	justify-items: start;
	grid-auto-flow: column;
	grid-auto-columns: auto;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	grid-template-columns: auto;

	grid-template-rows: auto;
}

.logo-details > img {
	width: 48px;
	height: 53px;
	margin: auto 10px;
}
.brand-name {
	display: grid;
	flex-direction: column;
	align-items: flex-start;
	grid-auto-columns: 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 5px;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.rights {
	font-size: 12px;
	line-height: 18px;
	color: var(--text-body);
}

.text-body {
	font-size: 16px;
	line-height: 26px;
}
.text-body.is-bold {
	font-weight: 700;
}

i.fa-facebook-f:hover {
	color: var(--facebook);
}
i.fa-instagram {
	color: var(--font-color);
}

i.fa-instagram:hover {
	color: var(--colour-pink);
}
i.fa-youtube:hover {
	color: var(--yt);
}
i.fa-linkedin-in:hover {
	color: var(--linked-in);
}
@media screen and (max-width: 700px) {
	.main-footer {
		grid-template-columns: 1fr;
	}
	.sub-footer {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: space-between;
	}

	.brand-box {
		padding-top: 2rem;
	}

	.social-box {
		padding-right: 45px;
	}
}
/************************************************************** Footer end **********************************/
/************************************************************** Rules ***************************************/
.rules {
	display: grid;
	grid-template-rows: 60px 1fr;
	margin-top: 50px;
}

.rule-heading {
	display: flex;
	align-items: center;
	margin-left: 4rem;
}

h2.rule-title {
	font-family: "Sen";
	font-size: 1.5rem;
	font-weight: 600;
	padding: 10px 10px 10px 0;
}

h2.rule-title::before {
	content: "#";
}

.rule-line {
	flex: 1;
	height: 0.1rem;
	width: 100%;
	background: var(--colour-pink);
}

.rule-content {
	margin-left: 3rem;
	line-height: 1.8rem;
	width: 100%;
}

.rule-content > ul li {
	padding-bottom: 1rem;
}

@media screen and (max-width: 700px) {
	.rule-heading {
		flex-direction: column;
		align-items: flex-start;
		margin-left: 1rem;
	}

	.rule-content {
		margin-left: 0;
		font-size: 10px;
	}
}

.brochure-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.brochure-link .brochure-button {
	padding: 1rem;
	background-color: var(--color-main);
	border: 1px solid var(--color-accent);
	border-radius: 0.5rem;
}

.brochure-link .brochure-button:hover {
	cursor: pointer;
	background: #800758;
	border: 1px solid var(--colour-pink);
}


/******************************************************** Rules end ******************************************************/

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

/* The Close Button */
.close {
	color: white;
	float: right;
	font-size: 30px;
	font-weight: bold;
	background-color: transparent;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 10px 16px;
	background-color: #24f586;
}

.modal-header h2 {
	background-color: transparent;
	color: #000;
}

.modal-body,
.modal-body > p {
	padding: 10px;
	background-color: white;
	color: black;
}

.modal-footer {
	padding: 10px;
	text-align: right;
	background-color: transparent;
}

.modal-footer button {
	background-color: #24f586;
	color: #000;
	padding: 5px 10px 5px 10px;
	border: none;
}

/**Google Form Registration Content**/
.register-content {
	text-align: center;
}
.register-content iframe {
	width: 40vw;
	height: 80vh;
	border: none;
	background-color: #28f586;
	padding: 10px;
	box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.5);
}

.register {
	margin-top: 50px;
}

.register-heading {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 6rem;
	width: 80%;
}

h2.register-title {
	font-family: "Sen";
	font-size: 1.5rem; /*modified*/
	font-weight: 600;
	padding: 10px 10px 10px 0px;
	margin-left: 10px;
}

h2.register-title::before {
	content: "#";
}

.register-line {
	/* flex: 1; */
	height: 0.1rem; /*modified*/
	width: 90%;
	background: var(--colour-pink);
}

@media screen and (max-width: 700px) {
	.register-content iframe {
		width: 100vw;
		height: 80vh;
	}

	.register-heading {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 0rem;
		width: 100%;
	}

	.register-line {
		margin-bottom: 2rem;
		width: 100%;
	}
}