@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}

.mulish-regular {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.metamorphous-regular {
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-style: normal;
}

body {
	background-color: rgba(238,212,255,1.00);
	background: linear-gradient(117deg, rgba(203,218,250,1.00), rgba(238,212,255,1.00));
}
h1, h2, h3, h4, p {
	margin: 0px;
	z-index: 10;
}
h1 {
	font-family: "Metamorphous", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 64px;
	margin-bottom: 32px;
}
h2 {
	font-family: "Metamorphous", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 32px;
	margin: 4px 0px 10px 0px;
}
h3 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size: 24px;
	margin-bottom: 54px;
}
h4 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size: 20px;
}
p, li {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size: 16px;
}
.p-about {
	position: relative;
	font-size: 20px;
	max-width: 600px;
	height: auto;
	margin-bottom: 32px;
}
.button {
	width: auto;
	height: 40px;
	margin-top: 16px;
}
.button a {
	display: block;
	width: 92px;
	height: 40px;
	color: rgba(255,255,255,1.00);
	text-decoration: none;
	padding: 10px;
	text-align: center;
	background-color: rgba(153,0,255,1.00);
	border-radius: 8px;
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25);
}
.button a:hover {
	background: linear-gradient(90deg, rgba(132,16,203,1.00), rgba(203,16,139,1.00));
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25), 0px 0px 4px 0px rgba(153,0,255,1.00);
}
.button-wide {
	width: auto;
	height: 40px;
	margin-top: 16px;
	margin-bottom: 32px;
}
.button-wide a {
	display: block;
	width: 187px;
	height: 40px;
	color: rgba(255,255,255,1.00);
	text-decoration: none;
	padding: 10px;
	text-align: center;
	background-color: rgba(153,0,255,1.00);
	border-radius: 8px;
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25);
}
.button-wide a:hover {
	background: linear-gradient(90deg, rgba(132,16,203,1.00), rgba(203,16,139,1.00));
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25), 0px 0px 4px 0px rgba(153,0,255,1.00);
}
.linkedin-button {
	display: inline-flex;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border: 3px solid rgba(153,0,255,1.00);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.20);
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25);
	margin-bottom: 50px;
}
.linkedin-button:hover {
	background-color: rgba(247,237,255,1.00);
	box-shadow: 1px 4px 6px 0px rgba(0,0,0,0.25), 0px 0px 4px 0px rgba(153,0,255,1.00);
}
.linkedin-button-link {
	color: rgba(0,0,0,1.00);
	text-decoration: none;
}
.linkedin-icon {
	width: 35px;
	height: 30px;
}
.gradient-text {
	position: relative;
	background-color: #8410CB;
	background-image: linear-gradient(90deg, #8410CB, #CB108B);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-o-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	-o-text-fill-color: transparent;
	text-fill-color: transparent;
}
.wrapper-padding {
	position: relative;
	width: 95%;
	max-width: 1400px;
	height: auto;
	max-height: 92vh;
	margin: auto;
	margin-top: 3vh;
	background-color: rgba(247,244,253,1.00);
	padding-right: 40px;
	border-radius: 50px;
	box-shadow: 5px 14px 15px 5px rgba(0,0,0,0.25);
	overflow: hidden;
}
.wrapper {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 92vh;
	margin: auto;
	background-color: rgba(247,244,253,1.00);
	
	overflow-y: auto;
	overflow-x: clip;
	overflow-clip-margin: 40px;
	padding: 35px 20px 0px 60px;
}
.header {
	position: relative;
	clear: both;
	width: 100%;
	height: 66px;
	padding: 9px 30px 9px 30px;
	background-color: rgba(252,252,252,1.00);
	border-radius: 20px;
	box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
	margin-bottom: 80px;
	z-index: 10;
}
.logo {
	clear: both;
	float: left;
}
.logo-header p {
	float: left;
	margin: 14px 0px 14px 13px;
}
.logo-header-link {
	color: rgba(0,0,0,1.00);
}
.navbar {
	float: right;
	width: auto;
	height: 40px;
	margin: 4px 0px 4px 0px;
}
.navbar ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background-color: rgba(153,0,255,0.00);
}
.navbar ul li {
	float: left;
}
.navbar ul li a {
	display: block;
	width: auto;
	height: 40px;
	padding: 10px;
	margin-left: 38px;
	color: rgba(0,0,0,1.00);
	text-align: center;
	text-decoration: none;
}
.navbar ul li a:hover {
	color: rgba(255,255,255,1.00);
	background: linear-gradient(90deg, rgba(132,16,203,1.00), rgba(203,16,139,1.00));
	border-radius: 8px;
	border: none;
	box-shadow: 0px 0px 4px 0px rgba(153,0,255,1.00);
}
.navbar .active {
	border-bottom: 3px solid rgba(153,0,255,1.00);
}
.aside {
	position: relative;
	clear: both;
	float: left;
	width: 28%;
	min-width: 200px;
	height: auto;
}
.image-container {
	position: relative;
	width: 100%;
	height: 30vw;
	max-height: 450px;
	min-height: 180px;
	z-index: 10;
}
.image-frame {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 20vw;
	max-height: 250px;
	min-height: 170px;
	background-color: rgba(208,198,228,0.5);
	border-radius: 20px;
}
.wizard {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: auto;
}
.elipse-wizard {
	position: absolute;
	width: 244px;
	height: 244px;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(106, 0, 255, 0.80);
	border-radius: 50%;
	filter: blur(150px);
	z-index: 6;
}
.main {
	float: left;
	position: relative;
	width: 72%;
	height: auto;
	padding-left: 10%;
}
.elipse-blue {
	position: absolute;
	width: 258px;
	height: 164px;
	background-color: rgba(47, 0, 255, 0.70);
	top: 0px;
	left: 0px;
	border-radius: 50%;
	filter: blur(150px);
	z-index: 5;
}
.elipse-purple {
	position: absolute;
	width: 336px;
	height: 164px;
	top: 2px;
	left: 257px;
	border-radius: 50%;
	background-color: rgba(123, 0, 255, 0.70);
	z-index: 4;
	filter: blur(150px);
}
.elipse-pink {
	position: absolute;
	width: 258px;
	height: 164px;
	top: 53px;
	left: 451px;
	background-color: rgba(242, 0, 255, 0.60);
	border-radius: 50%;
	filter: blur(150px);
	z-index: 3;
}
.category-layout {
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	align-items: flex-start;
	align-content: flex-start;
	gap: 34px;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.category-icon {
	margin-bottom: 20px;
}
.elipse-category {
	position: absolute;
	top: 50%;
	left: 40%;
	transform: translate(-50%, -50%);
	width: 336px;
	height: 164px;
	background-color: rgba(123, 0, 255, 0.70);
	border-radius: 50%;
	filter: blur(200px);
	z-index: 2;
}
.resource-listing {
	position: relative;
	width: 100%;
	height: auto;
	background-color: rgba(224,212,236,1.00);
	padding: 35px;
	border-radius: 16px;
	box-shadow: 4px 7px 30px 2px rgba(0,0,0,0.25);
	margin-bottom: 40px;
	z-index: 10;
	overflow: auto;
}
.resource-image {
	clear: both;
	float: left;
	width: 150px;
	height: auto;
	margin-right: 35px;
}
.resource-image-corner {
	clear: both;
	float: left;
	width: 150px;
	height: auto;
	border-radius: 12px;
	margin-right: 35px;
}
.resource-details {
	float: left;
	width: 100%;
	max-width: 507px;
	height: auto;
}
.resource-details h3 {
	margin-bottom: 35px;
	font-weight: 600;
}
.resource-details h3 a {
	color: rgba(0,0,0,1.00);
	text-decoration: none;
}
.resource-details h3 a:hover {
	color: rgba(132,16,203,1.00);
}
.resource-button-wrapper {
	margin-top: 35px;
}
.price {
	display: inline-flex;
	padding: 10px;
	background: linear-gradient(117deg, rgba(189, 207, 245, 0.80), rgba(210, 158, 245, 0.80));
	border-radius: 8px;
	color: rgba(54,54,54,1.00);
}
.resource-button-wrapper .button {
	float: right;
	margin-top: 0px;
}
.footer {
	clear: both;
	width: 100%;
	height: 60px;
	text-align: center;
	padding-top: 14px;
	z-index: 10;
}


/* Animated Border */
@property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    .border-wrapper {
      position: relative;
      padding: 4px;
      border-radius: 16px;
      z-index: 10;
    }
    .border-wrapper:hover::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: conic-gradient(
        from var(--angle), rgba(209,69,255,1.00),rgba(240,0,255,1.00),rgba(105,0,255,0.50),rgba(255,0,149,0.10),rgba(209,69,255,1.00));
      z-index: -2;
      animation: spin 3s linear infinite;
    }
    .border-wrapper:hover::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: 
		  conic-gradient(
        from var(--angle), rgba(209,69,255,1.00),rgba(240,0,255,1.00),rgba(105,0,255,0.50),rgba(255,0,149,0.10),rgba(209,69,255,1.00));
      filter: blur(1.5rem);
      opacity: 0.5;
      z-index: -3;
      animation: spin 3s linear infinite;
    }
    .category-card {
      box-shadow: 4px 7px 30px 2px rgba(0,0,0,0.25);
      background-color: rgba(224,212,236,1.00);
      padding: 2rem;
      border-radius: 16px;
      text-align: center;
      position: relative;
      z-index: 1;
      width: 200px;
      height: 200px;
    }
.border-wrapper a {
	color: rgba(0,0,0,1.00);
	text-decoration: none;
}
    @keyframes spin {
      from {
        --angle: 0deg;
      }
      to {
        --angle: 360deg;
      }
    }