@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@300;500;900&display=swap');
@import url('reset.css');
@import url('https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css');
:root {
	--white: #fff;
	--black: #000;
	--pink: #FF1493;
	--base: 16px;
	--blue-70: #0a66c2;
}
* {
	box-sizing: border-box;
	transition: 0.3s;
	line-height: calc(2ex + 4px);
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
}
.container {
	margin: 0 auto;
	max-width: 100%;
	padding: 0 15px;
	width: 1270px;
}
.custom-flex {
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
body {
	background-color: var(--black);
	background-image:  url('../images/header-background-2.png'),url('../images/html-background.jpg');
	background-repeat: no-repeat, repeat;
	background-position: center 0, 0 0;
	background-attachment: scroll, fixed;
	font-family: 'Gantari';
	font-size: var(--base);
	font-weight: 300;
}
body:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #0b1a3a;
  z-index: 8;
  -webkit-mask: linear-gradient(to top, transparent 0, #0b1a3a 25%, transparent 100%);
          mask: linear-gradient(to top, transparent 0, #0b1a3a 25%, transparent 100%);
}
body:after {
  content: "";
  width: 300%;
  height: 300%;
  left: -115%;
  top: -100%;
  background: radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 150px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 150px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 150px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 150px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 250px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 150px), radial-gradient(circle at center, #fff 1px, transparent 1px, transparent 350px);
  background-size: 250px 250px, 300px 300px, 400px 600px, 700px 300px, 800px 200px, 475px 200px;
  z-index: 9;
  opacity: 0.5;
  filter: blur(1px);
}
#wrap {
  position: fixed;
  width: 100%;
    height: 100%;
    transform: translateX(-28px) translateY(555px) rotate(-845deg) scale(1.15);
    filter: blur(9px);
    z-index: 0;
}
#blob {
	position: absolute;
	z-index: 0;
}
.aurora {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  filter: url(#wave);
  top: 750px;
  left: 40%;
  background: radial-gradient(circle at center, transparent 40%, #bd63c1 60%, #53e5a6 70%, transparent 90%);
  box-shadow: inset 20px 0 100px 0 #0b1a3a;
  background-position: -220px 50px;
  background-repeat: no-repeat, repeat;
	background-size: auto auto, auto auto;
  z-index: 1;
  transform: scale(1.25) rotate(-385deg);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 50%);
          mask: linear-gradient(to bottom, transparent, #000 50%);
}
.aurora:nth-of-type(2) {
  transform: scaleX(-1) rotate(75deg);
  background: radial-gradient(circle at center, transparent 50%, #bd63c1 60%, #53e5a6 70%, transparent 80%);
  background-position: -120px 50px;
  box-shadow: inset 50px 0 100px 0 #0b1a3a;
  background-repeat: no-repeat;
  top: 550px;
  left: calc(50% - 250px);
  z-index: 0;
  -webkit-mask: linear-gradient(75deg, #000, transparent 150%);
          mask: linear-gradient(75deg, #000, transparent 150%);
}
header {
	height: auto;
	min-height: 180px;
	padding: 36px 0;
	position: relative;
	width: 100%;
	top: 0;
	z-index: 8;
}
header ul,
footer ul {
	gap: 0 32px;
}
header li,
footer li {
	list-style-type: none;
}
header nav a,
header nav a:active,
header nav a:focus,
header nav a:visited
header nav a:hover,
footer a,
footer a:active,
footer a:focus,
footer a:visited
footer a:hover {
	color: var(--white);
	font-size: 1.5em;
	font-weight: 500;
	text-decoration: none;
}
header nav a:hover,
footer a:hover {
	color: var(--pink);
	text-decoration: underline;
}
header nav a.active,
footer a.active {
	color: var(--pink);
}
footer {
	background-image: url('../images/bg-footer.png'),url('../images/separation-02.png');
	background-repeat: no-repeat, no-repeat;
	background-position: center -53px, center -7px;
	color: var(--pink);
	padding: 32px 0;
	position: relative;
	width: 100%;
	z-index: 8;
}
footer a,
footer a:active,
footer a:focus,
footer a:visited
footer a:hover {
	font-size: 1.15em;
}
footer .networks {
	align-items: center;
	color: var(--white);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	flex-wrap: nowrap;
}
footer .networks a {
	background: transparent no-repeat center center;
	background-size: 30px 30px;
	display:block;
	height: 30px;
	text-indent: -99999px;
	width: 30px;
}

footer .networks a:hover {
	transform: scale(1.5);
}
footer .networks .twitter {
	background-image: url('../images/twitter.svg');
}
footer .networks .linkedin {
	background-image: url('../images/linkedin.svg');
}
footer .networks .flickr {
	background-image: url('../images/flickr.svg');
}
main {
	position: relative;
	z-index: 8;
}

.heading-01 {
	color: var(--white);
	font-size: 3em;
	font-weight: 300;
	text-align: center;
	margin: 0;
	padding: 32px 0;
}
.heading-02 {
	color: var(--pink);
	font-size: 1.75em;
	font-weight: 400;
	text-align: left;
	margin: 0;
	padding: 32px 0 16px;
}
.swiper {
	width: 100%;
	height: 600px;
}

.swiper {
	border-radius: 16px;
}
.swiper-slide {
	color: var(--black);
	text-align: center;
	font-size: 18px;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,12px));
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,12px));
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap,12px) 0;
}
.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color,var(--pink));
}

.swiper-lazy__content {
	background: rgba(0,0,0,0.25);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 16px;
	width: calc(100% - 64px);
	position: absolute;
	left: 32px;
	bottom: 32px;
}
.swiper-slide {
	background: var(--pink);
}
.swiper-slide .title {
	color: var(--pink);
	font-size: 2.5em;
	font-weight: 300;
	text-shadow: 0 1px 0 rgba(0,0,0,0.75); 
}

.swiper-slide .subtitle {
	color: var(--white);
	font-size: 1.5em;
	text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}

.swiper-slide .text {
	color: var(--white);
	font-size: 1em;
	min-height: 80px;
	width: 100%;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}
.swiper-slide img {
	display: inline-block;
	width: 100%;
	min-height: 100%;
	height: auto;
	object-fit: cover;
	position: absolute;
	top: 0;
}
@media(max-width: 1179px) {
	.heading-02 {
		padding: 0 16px 16px;
	}
	.heading-02 + div {
		padding: 0 16px;
	}
}
@media(max-width: 991px) {
	#wrap {
		display: none;
	}
	.aurora {
		left: -30%;
		transform: scale(1.95) rotate(-635deg);
	}
	.aurora:nth-of-type(2) {
		top: 340px;
    	left: calc(90% - 250px);
	}
}
@media(min-width: 992px) and (max-width: 1170px) {
	.aurora:nth-of-type(2) {
		left: calc(80% - 250px);
	}
} 
@media(max-width: 767px) {
	body {
		background-image:  url('../images/header-background-mobile.png'),url('../images/html-background.jpg');
	}
	.swiper-pointer-events.swiper-vertical {
		touch-action: inherit;
	}
	header .custom-flex {
		flex-direction: column;
    	gap: 16px 0;
	}
	.aurora {
		left: 120%;
	}
	.aurora:nth-of-type(2) {
		top: 340px;
    	left: calc(90% - 250px);
	}
	.heading-01 {
		font-size: 2em;
	}
	.heading-02 {
		padding: 0 0 16px;
	}
	.heading-02 + div {
		padding: 0;
	}
	.swiper {
		height: auto;
	}
	.swiper-slide  {
		background: var(--white);
	}
	.swiper-backface-hidden .swiper-slide {
		height: 300px;
		border-radius: 16px;
		margin: 0 0 16px;
		overflow: hidden;
	}
	.swiper-slide img {
		width: 100%;
		height: auto;
		min-height: inherit;
	}
	.swiper-slide .title {
    	font-size: calc(2.5em * 0.65);
	}
	.swiper-slide .subtitle {
    	font-size: calc(1.5em * 0.75);
	}
	.swiper-lazy__content {
		border-radius: 12px;
		width: calc(100% - 32px);
		bottom: 16px;
		left: 16px;
	}
	footer .container > .custom-flex {
		flex-direction: column;
    	gap: 32px 0;
	}
}
@media(max-width: 479px) {
	.aurora {
		left: 170%;
	}
	.aurora:nth-of-type(2) {
    	left: calc(124% - 250px);
	}
	footer  .custom-flex {
		flex-direction: column;
    	gap: 32px 0;
	}
	footer ul {
		padding-top: 32px;
	}
	.swiper-lazy__content {
		/*display: none;*/
	}
	.swiper-slide img {
		width: 100%;
		height: auto;
		min-height: 100%;
	}
}
@media(max-width: 370px) {
	.aurora:nth-of-type(2) {
		left: calc(154% - 250px);
	}
}