@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
:root{
	--background-gradient: linear-gradient(135deg,rgba(100, 149, 237, 0.2) 0%,rgba(240, 248, 255, 1) 25%,rgba(240, 248, 255, 1) 75%,rgba(147, 112, 219, 0.2) 100%) ;
	--background-color: #FFFFFF ;
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--font-family: 'Montserrat', sans-serif;
	--primary-color: #3F5EFB ;
	--primary-dark-color: #02146E ;
	--color-neutral-50: #f7f9fc;
	--color-neutral-100: #F6F7FC ;
	--color-neutral-200: #e4e9f6;
	--color-neutral-600: #80868B;
	--color-neutral-900: #202124;
	--font-size-xxl: 32px ;
	--font-size-xl: 20px ;
	--font-size-l: 18px ;
	--font-size-m: 16px ;
	--font-size-s: 14px ;
	--font-size-xs: 12px ;
	--gradient-disco-club: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%) ;
}
*{
	padding: 0px ;
	margin: 0px ;
	box-sizing: border-box ;
}
html {
	scroll-behavior: smooth;
}
body, button, input, select, label, textarea{
	font-family: var(--font-family) ;
	font-size: var(--font-size-m) ;
	color: var(--color-neutral-900) ;
}
body{
	background: var(--background-gradient) ;
	background-attachment: fixed;
	min-height: 100vh ;
	overflow-x: hidden ;
}
.container{
	width: calc(100vw - 60px) ;
	margin: 0px auto ;
	max-width: 1000px ;
}
header{
	top: 0 ;
	left: 0 ;
	width: 100vw ;
	position: absolute ;
	z-index: 9999 ;
}
header.fixed{
	position: fixed ;
}
header .top{
	background: var(--gradient-disco-club) ;
	padding: 7.5px 0px 5px 0px ;
}
header.fixed .top{
	display: none ;
}
header .top .social-media{
	display: flex ;
	gap: 10px ;
	align-items: center ;
}
header .top .social-media a{
	text-decoration: none ;
}
header .top .social-media a svg{
	height: 18px ;
	width: 18px ;
	fill: var(--background-color) ;
	transition-property: fill ;
	transition-duration: 0.25s ;
}
header .top .social-media a:hover svg{
	fill: var(--color-neutral-200) ;
}
header .bottom{
	padding: 7.5px 0px 7.5px 0px ;
	background-color: var(--background-color) ;
	box-shadow: var(--shadow-md) ;
}
header .bottom > .container{
	display: flex ;
	align-items: center ;
	justify-content: space-between ;
}
header .bottom .logo{
	display: flex ;
	align-items: center ;
	gap: 10px ;
}
header .bottom .logo div p{
	margin-top: 2.5px ;
	max-width: 260px ;
}
header .bottom .logo img{
	height: 100px ;
}
header .bottom .logo h1{
	font-size: var(--font-size-xl) ;
}
header .bottom .menu ul{
	font-size: var(--font-size-s) ;
	list-style: none ;
	display: flex ;
	align-items: center ;
	gap: 10px ;
}
header .bottom .menu ul li a{
	text-decoration: none ;
	padding: 5px ;
	color: var(--color-neutral-600) ;
	transition-property: color ;
	transition-duration: 0.25s ;
}
header .bottom .menu ul li a:hover{
	color: var(--color-neutral-900) ;
}
header .bottom .menu ul li a.button{
	display: block ;
	background: var(--gradient-disco-club) ;
	padding: 3.5px 10px ;
	border: 0px ;
	border-radius: 20px  ;
	font-size: var(--font-size-s) ;
	color: var(--background-color) ;
	transition-property: transform ;
	transition-duration: 0.25s ;
}
header .bottom .menu ul li a.button:hover{
	cursor: pointer ;
	transform: scale(1.05) ;
}
main{
	padding-top: 50px ;
}
main > section{
	padding: 120px 0px 0px 0px ;
}
main > section h2{
	font-size: var(--font-size-xxl) ;
	margin-bottom: 20px ;
	text-align: center ;
	letter-spacing: 1px ;
	background: var(--gradient-disco-club);
	-webkit-background-clip: text ;
	-webkit-text-fill-color: transparent;
}
#hero .slider{
	width: 100% ;
	height: calc(100dvh - 185px) ;
	max-height: 600px ;
	overflow: hidden ;
	border-radius: 5px ;
	position: relative ;
	box-shadow: var(--shadow-md) ;
}
#hero .slider .slides{
	display: flex ;
	width: 600% ;
	height: 100% ;
	animation: slide 25s infinite ease-in-out ;
}
#hero .slider .slides img{
	height: 100% ;
	width: calc(100% / 6) ;
	object-fit: cover ;
}
#hero .information{
	display: flex ;
	flex-direction: column ;
	justify-content: end ;
	align-items: start ;
	padding: 20px ;
	position: absolute ;
	top: 0px ;
	left: 0px ;
	width: 100% ;
	height: 100% ;
}
#hero .information > div{
	padding: 10px 20px ;
	background-color: rgba(255,255,255,0.9) ;
	box-shadow: var(--shadow-md) ;
	border-radius: 5px ;
}
#hero .information .title{
	font-size: var(--font-size-l);
	font-weight: 700 ;
	letter-spacing: 1px ;
}
#aboutus .principal{
	display: grid ;
	align-items: center ;
	grid-template-columns: repeat( 2 , 1fr ) ;
	grid-gap: 20px ;
	margin-bottom: 20px ;
}
#aboutus .principal .image img{
	width: 100% ;
	border-radius: 5px ;
	box-shadow: var(--shadow-md) ;
}
#aboutus .principal .tabs{
	display: flex ;
	gap: 10px ;
	align-items: center ;
	justify-content: center ;
	flex-wrap: wrap ;
	margin-bottom: 20px ;
}
#aboutus .principal .tabs > button{
	border-radius: 20px ;
	padding: 5px 15px ;
	border: 0px ;
	background-color: var(--color-neutral-200) ;
	transition-property: background-color , box-shadow ;
	transition-duration: 0.25s ;
}
#aboutus .principal .tabs > button:hover{
	cursor: pointer ;
	background-color: var(--color-neutral-100) ;
	box-shadow: var(--shadow-md) ;
}
#aboutus .principal .tabs > button.selected{
	background-color: var(--background-color) ;
}
#aboutus .principal .ribbons > div{
	display: none ;
	text-align: center ;
	font-size: var(--font-size-l) ;
}
#aboutus .principal .ribbons > div p{
	opacity: 0.75 ;
	margin-bottom: 10px ;
}
#aboutus .principal .ribbons > div.selected{
	display: block ;
}
#aboutus .corporate-identity{
	display: grid ;
	grid-template-columns: repeat( 3 , 1fr ) ;
	grid-gap: 20px ;
}
#aboutus .corporate-identity article{
	background-color: var(--background-color) ;
	border-radius: 5px ;
	box-shadow: var(--shadow-md) ;
	padding: 20px ;
	display: flex ;
	flex-direction: column ;
	gap: 10px ;
	align-items: center ;
	text-align: center ;
}
#aboutus .corporate-identity article img{
	width: 75px ;
}
#aboutus .corporate-identity article p{
	color: var(--color-neutral-600) ;
}
#posts .lists{
	display: flex ;
	gap: 20px ;
	margin-top: 20px ;
	overflow-X: hidden ;
	user-select: none;
	scroll-behavior: auto;
}
#posts .lists a{
	background-color: var(--background-color) ;
	border-radius: 5px ;
	overflow: hidden ;
	box-shadow: var(--shadow-md) ;
	width: 300px ;
	flex: 0 0 auto ;
	text-decoration: none ;
	color: var(--color-neutral-900) ;
	transition-property: transform ;
	transition-duration: 0.25s ;
}
#posts .lists a:hover{
	transform: translateY(-7.5px) ;
}
#posts .lists a .image{
	width: 100% ;
	height: 200px ;
	overflow: hidden ;
}
#posts .lists a .image img{
	width: 100% ;
	height: 100% ;
	object-fit: cover ;
	transition-property: transform ;
	transition-duration: 0.25s ;
}
#posts .lists a:hover .image img{
	transform: scale(1.2) ;
}
#posts .lists a .information{
	padding: 20px ;
}
#posts .lists a .information .date{
	font-size: var(--font-size-s) ;
	text-align: right ;
	color: var(--color-neutral-600) ;
	margin-bottom: 10px ;
}
#posts .lists a .information .title{
	font-size: var(--font-size-l) ;
	text-align: center ;
}
#help .container > .subtitle{
	text-align: center ;
	letter-spacing: 1px ;
	font-weight: 900 ;
	margin-bottom: 2.5px ;
	opacity: 0.75 ;
}
#help .container > div{
	display: grid ;
	grid-template-columns: repeat( 3 , 1fr );
	grid-gap: 20px ;
}
#help article{
	display: flex ;
	align-items: center ;
	justify-content: center ;
	flex-direction: column ;
	gap: 7.5px ;
	text-align: center ;
	background-color: var(--background-color) ;
	border-radius: 5px ;
	box-shadow: var(--shadow-md) ;
	padding: 20px ;
}
#help article .title{
	font-size: var(--font-size-l) ;
}
#help article .text{
	opacity: 0.75 ;
}
#help article a{
	display: block ;
	border-radius: 20px ;
	background: var(--gradient-disco-club) ;
	text-decoration: none ;
	color: var(--background-color) ;
	padding: 5px 15px ;
	margin-top: 10px ;
	transition-property: transform ;
	transition-duration: 0.25s ;
}
#help article a:hover{
	cursor: pointer ;
	transform: scale(1.05) ;
}
footer{
	margin-top: 120px ;
}
footer .top{
	background-color: var(--primary-color) ;
	padding: 35px 0px 35px 0px ;
	color: var(--background-color) ;
	font-size: var(--font-size-s) ;
}
footer .top > div{
	display: flex ;
	align-items: center ;
	justify-content: space-between ;
	gap: 50px ;
}
footer .top .title{
	font-size: var(--font-size-l) ;
	margin-bottom: 10px ;
}
footer .top .description{
	max-width: 450px ;
	opacity: 0.75 ;
}
footer .top > div div:last-child p{
	display: flex ;
	align-items: center ;
	justify-content: end ;
	gap: 5px ;
	text-wrap: nowrap ;
	margin-bottom: 10px ;
}
footer .top > div div:last-child p:last-child{
	margin-bottom: 0px ;
}
footer .top svg{
	fill: none;
	stroke: var(--background-color) ;
	stroke-linecap: round ;
	stroke-linejoin: round;	
	width: 24px ;
	height: 24px ;
	stroke-width: 1.5px ;
}
footer .bottom{
	font-size: var(--font-size-xs) ;
	padding: 10px 0px 10px 0px ;
	color: var(--background-color) ;
	background-color: var(--primary-dark-color);
}
footer .bottom > div{
	display: flex ;
	align-items: center ;
	justify-content: space-between ;
}
footer .bottom p{
	opacity: 0.5 ;
}
.mt20{
	margin-top: 20px ;
}
.modal-container{
	display: flex ;
	align-items: center ;
	justify-content: center ;
	background-color: rgba(0,0,0,0.5);
	position: fixed ;
	top: 0px ;
	left: 0px ;
	width: 100vw ;
	height: 100dvh ;
	z-index: 99999 ;
	opacity: 0 ;
	visibility: hidden ;
	transition-property: opacity , visibility ;
	transition-duration: 0.25s ;
}
.modal-container.visible{
	opacity: 1 ;
	visibility: visible ;
}
.modal-container > div{
	background-color: var(--background-color) ;
	border-radius: 5px ;
	padding: 20px ;
	box-shadow: var(--shadow-md) ;
	width: calc(100vw - 80px) ;
	max-height: calc(100dvh - 80px) ;
	max-width: 1000px ;
	overflow-y: scroll ;
}
.modal-container > div img{
	margin: 0px auto ;
	width: 100% ;
	max-width: 650px ;
}
@keyframes slide {
	0%,13%{ transform: translateX(0); }
	16%,29% { transform: translateX(calc((-100% / 6) * 1)); }
	32%,45% { transform: translateX(calc((-100% / 6) * 2)); }
	48%,61% { transform: translateX(calc((-100% / 6) * 3)); }
	64%,77% { transform: translateX(calc((-100% / 6) * 4)); }
	80%,93% { transform: translateX(calc((-100% / 6) * 5)); }
}
@media(max-width: 750px){
	#help .container > div,
	#aboutus .principal{
		grid-template-columns: 1fr ;
	}
	#aboutus .corporate-identity{
		grid-template-columns: repeat( 2 , 1fr ) ;
	}
	#aboutus .corporate-identity article:last-child{
		grid-column: span 2 ;
	}
	header .bottom .menu ul{
		gap: 0px ;
	}
	header .bottom .menu ul li a{
		display: none ;
	}
	#hero .information{
		align-items: center ;
		text-align: center ;
	}
	#hero .information .title{
		font-size: var(--font-size-m) ;
	}
}
@media(max-width: 500px){
	header .top .social-media{
		justify-content: center ;
	}
	header .bottom .logo{
		text-align: center ;
		flex-direction: column ;
		gap: 0px ;
	}
	header .bottom .logo img{
		height: 80px ;
	}
	header .bottom .menu ul li a.button{
		display: none ;
	}
	header .bottom > .container{
		justify-content: center ;
	}
	header .bottom .logo h1{
		font-size: var(--font-size-m) ;
	}
	#aboutus .corporate-identity{
		grid-template-columns: 1fr ;
	}
	#aboutus .corporate-identity article:last-child{
		grid-column: span 1 ;
	}
	footer .bottom > div{
		justify-content: center ;
		text-align: center ;
	}
	footer .bottom p:last-child{
		display: none ;
	}
}