/* ------------------------------------------- */
/* LANDING PAGES - Students */
/* ------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

@font-face {
  font-family: 'groboldregular';
  src: url('../fonts/grobold-webfont.woff2') format('woff2'),
       url('../fonts/grobold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.btn-blue {
font-family: 'groboldregular';
font-size: 20px;
line-height: 30px;
letter-spacing: 0.015em;
color: white;
padding: 8px 55px 8px 24px;
height: 64px;
background: linear-gradient(180deg, #6893FC 0%, #4980F1 100%);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.16);
border-radius: 10px;
display: inline-flex;
position: relative;
align-items: center;
text-decoration: none;
transition: all 0.3s ease-in-out;
}

.btn-blue:hover,
.btn-purple:hover {
color: white;
text-decoration: none;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
transition: all 0.3s ease-in-out;
}

.btn-blue:after {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTcuNzk3OUMxLjY0ODQ0IDE3Ljc5NzkgMS4zMzU5NCAxNy42ODA3IDEuMTAxNTYgMTcuNDQ2M0MwLjU5Mzc1IDE2Ljk3NzUgMC41OTM3NSAxNi4xNTcyIDEuMTAxNTYgMTUuNjg4NUw3LjcwMzEyIDkuMDQ3ODVMMS4xMDE1NiAyLjQ0NjI5QzAuNTkzNzUgMS45Nzc1NCAwLjU5Mzc1IDEuMTU3MjMgMS4xMDE1NiAwLjY4ODQ3N0MxLjU3MDMxIDAuMTgwNjY0IDIuMzkwNjIgMC4xODA2NjQgMi44NTkzOCAwLjY4ODQ3N0wxMC4zNTk0IDguMTg4NDhDMTAuODY3MiA4LjY1NzIzIDEwLjg2NzIgOS40Nzc1NCAxMC4zNTk0IDkuOTQ2MjlMMi44NTkzOCAxNy40NDYzQzIuNjI1IDE3LjY4MDcgMi4zMTI1IDE3Ljc5NzkgMiAxNy43OTc5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
width: 20px;
height: 27px;
position: absolute;
right: 22px;
transition: all 0.3s ease-in-out;
}

.btn-blue:hover:after {
right: 16px;
transition: all 0.3s ease-in-out;
}

.btn-purple {
font-family: 'groboldregular';
font-size: 20px;
line-height: 30px;
letter-spacing: 0.015em;
color: white;
padding: 8px 24px;
height: 64px;
background: linear-gradient(45deg, #5568C9 3.8%, #C885F1 100%), linear-gradient(180deg, #5A68C3 0%, #BE88EB 100%);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.16);
border-radius: 10px;
display: inline-flex;
position: relative;
align-items: center;
text-decoration: none;
transition: all 0.2s ease-in-out;
}

.btn-purple:hover svg {
scale: 1.05;
transition: all 0.2s ease-in-out;
}

.btn-purple svg {
scale: 0.95;
margin-left: 10px;
transition: all 0.2s ease-in-out;
}

.page-template-page-landing-students {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
line-height: 28px;
color: rgba(24, 32, 45, 0.6);
text-align: center;
}

.page-template-page-landing-students .c-blue {
background: -webkit-linear-gradient(90deg, #6D96FD, #437CEF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.page-template-page-landing-students .c-purple {
background: -webkit-linear-gradient(90deg, #BE88EB, #5A68C3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.page-template-page-landing-students a.c-blue {
border-bottom-color: #6D96FD;
border-bottom-style: solid;
border-bottom-width: 1px;
}

.page-template-page-landing-students a.c-purple {
border-bottom-color: #BE88EB;
border-bottom-style: solid;
border-bottom-width: 1px;
}

.page-template-page-landing-students p {
margin-bottom: 24px;
}

.page-template-page-landing-students h1,
.page-template-page-landing-students h2 {
font-family: 'groboldregular';
font-size: 32px;
line-height: 40px;
background: linear-gradient(180deg, #10C0A1 0%, #2CB8D7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-shadow: 1px 1px 0px rgba(0, 27, 68, 0.2);
margin-bottom: 24px;
text-transform: uppercase;
}

.page-template-page-landing-students .container {
max-width: 886px;
}

/* Hero */

.hero-students {
height: 944px;
max-height: calc(100vh - 10px);
/* background: url('../img/landings/bg-hero-landing-students.jpg') center bottom no-repeat; */
background-size: cover;
padding-top: 154px;
padding-bottom: 35px;
position: relative;
}

.hero-students:after {
content: '';
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background: url('../img/landings/bottom-hero-landing-students.png') center bottom no-repeat;
background-size: cover;
}

.hero-students__logo img {
max-width: 570px;
}

.hero-students__cta {
position: absolute;
z-index: 2;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
}




/* MAIN */
.boxes {
padding: 119px 0 64px;
display: flex;
flex-direction: column;
gap: 16px;
}

.boxes h2 {
margin-bottom: 32px;
text-transform: uppercase;
}

.boxes__item {
display: flex;
justify-content: space-between;
align-items: center;
background: #FBFAFC;
border-radius: 10px;
height: 232px;
padding: 0px 48px;
margin-bottom: 16px;
}

.boxes__item.inverted {
flex-direction: row-reverse;
}

.boxes__item.vertical {
height: 328px;
flex-direction: column;
justify-content: center;
align-items: center;
}

.boxes__item.vertical .boxes__item-text {
font-size: 24px;
line-height: 32px;
text-align: center;
max-width: unset;
margin-top: 10px;
}

.boxes__item.vertical .boxes__item-image {
max-width: 380px;
}

.boxes__item-text {
max-width: 398px;
font-weight: 700;
text-align: left;
}

.boxes__item-text span {
background: linear-gradient(180deg, #BE88EB 0%, #7671CE 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.boxes__item-image img {
max-width: 360px;
}

.boxes__item-codes {
display: flex;
justify-content: space-between;
gap: 16px
}

.boxes__item-col {
background: #FBFAFC;
border-radius: 10px;
height: 341px;
padding: 32px 48px 22px;
}

.boxes__item-qr img:nth-child(1) {
width: 260px;
}

.boxes__item-qr img:nth-child(2) {
margin-top: -40px;
}

/* WORLD AWAKENING */

.world-awakening {
background: linear-gradient(180deg, #FBFAFC 93.23%, rgba(251, 250, 252, 0) 100%);
padding: 64px 0 0;
position: relative;
}

.world-awakening .btn-blue {
margin-top: 40px;
position: absolute;
bottom: -56px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: fit-content;
}

.world-cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 115px;
}

.world-card__item {
width: 274px;
background-color: white;
border-radius: 10px;
padding: 0 16px 16px 16px;
}

.world-card__item-image img {
max-width: 160px;
width: 160px;
height: 160px;
}

.world-card__item-text h3 {
font-family: 'groboldregular';
font-weight: 400;
font-size: 24px;
line-height: 28px;
background: linear-gradient(180deg, #BE88EB 0%, #7671CE 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 16px;
text-transform: uppercase;
}

.world-card__item-text p {
color: #18202D;
font-size: 20px;
line-height: 28px;
margin-bottom: 0px;
opacity: 0.6;
}

.world-friends img {
max-width: 884px;
}

.world-awakening .btn-purple {
padding: 8px 55px 8px 24px;
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
}

.world-awakening .btn-purple:after {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTcuNzk3OUMxLjY0ODQ0IDE3Ljc5NzkgMS4zMzU5NCAxNy42ODA3IDEuMTAxNTYgMTcuNDQ2M0MwLjU5Mzc1IDE2Ljk3NzUgMC41OTM3NSAxNi4xNTcyIDEuMTAxNTYgMTUuNjg4NUw3LjcwMzEyIDkuMDQ3ODVMMS4xMDE1NiAyLjQ0NjI5QzAuNTkzNzUgMS45Nzc1NCAwLjU5Mzc1IDEuMTU3MjMgMS4xMDE1NiAwLjY4ODQ3N0MxLjU3MDMxIDAuMTgwNjY0IDIuMzkwNjIgMC4xODA2NjQgMi44NTkzOCAwLjY4ODQ3N0wxMC4zNTk0IDguMTg4NDhDMTAuODY3MiA4LjY1NzIzIDEwLjg2NzIgOS40Nzc1NCAxMC4zNTk0IDkuOTQ2MjlMMi44NTkzOCAxNy40NDYzQzIuNjI1IDE3LjY4MDcgMi4zMTI1IDE3Ljc5NzkgMiAxNy43OTc5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
width: 20px;
height: 27px;
position: absolute;
right: 24px;
transition: all 0.3s ease-in-out;
}

.world-awakening .btn-purple:hover:after {
right: 18px;
transition: all 0.3s ease-in-out;
}

/* FOOTER */

.footer-landing {
height: 437px;
padding: 137px 0 64px;
background: url('../img/landings/bg-footer-landing-students.png') center top no-repeat;
background-size: cover;
color: white;
}

.footer-landing p a {
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
color: white;
}

.footer-landing p a:hover {
border-bottom: 1px solid white;
}

.footer-codie {
display: flex;
align-items: center;
margin-bottom: 80px;
}

.footer-codie img {
max-width: 207px;
margin-right: 48px;
}

.footer-codie p {
font-size: 20px;
font-weight: 600;
line-height: 32px;
text-align: left;
margin-bottom: 0px;
}

.footer-codie p a {
font-weight: 700;
}

.footer-menu {
display: flex;
justify-content: center;
margin-bottom: 32px;
}

.footer-menu ul {
display: flex;
gap: 48px;
}

.footer-menu ul li a {
color: white;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.footer-menu ul li a:hover {
color: white;
border-bottom: 1px solid white;
}

.footer-copy {
width: 100%;
}

.footer-copy p {
text-align: center;
}


/* Call to Action - Play Now */

.cta-play-now {
position: fixed;
z-index: 1000;
bottom: 0;
right: -1px;
width: 308px;
height: 372px;
}

.cta-play-now .bg1,
.cta-play-now .bg2,
.cta-play-now .bg3 {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

.cta-play-now .join-us {
position: absolute;
bottom: 202px;
right: 13px;
width: 201px;
transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

.cta-play-now .avatar1,
.cta-play-now .avatar2 {
position: absolute;
bottom: 49px;
width: 93px;
transition: all 0.7s ease-out;
transform-origin: bottom center;
-webkit-transition: all 0.7s ease-out;
-webkit-transform-origin: bottom center;
}

.cta-play-now .avatar1 {
right: 121px;
}

.cta-play-now .avatar2 {
right: 21px;
}

.cta-play-now .dragon {
position: absolute;
top: 10px;
right: 4px;
width: 95px;
animation: bounce 2s ease-in-out infinite alternate;
-webkit-animation: bounce 2s ease-in-out infinite alternate;
}

.cta-play-now .btn-orange {
position: absolute;
bottom: 20px;
right: 18px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0;
width: 192px;
height: 52px;
background: linear-gradient(141.82deg, #FF0000 -52.55%, #FF7700 70.34%);
font-size: 24px;
line-height: 29px;
letter-spacing: 0.015em;
text-transform: uppercase;
border: none;
outline: none;
cursor: pointer;
transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

.cta-play-now .btn-orange:hover {
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.16);
}

.cta-play-now .btn-orange:active,
.cta-play-now .btn-orange:focus {
border: none;
outline: none;
}


.cta-play-now:hover .bg1 {
scale: 1.08;
transition: all 0.45s ease-out;
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .bg2 {
scale: 1.04;
transition: all 0.45s ease-out;
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .bg3 {
scale: 1.055;
transition: all 0.45s ease-out;
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .join-us {
scale: 1.12;
transition: all 0.45s ease-out;
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .avatar1 {
transform: rotate(-2.53deg);
transition: all 0.45s ease-out;
-webkit-transform: rotate(-2.53deg);
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .avatar2 {
transform: rotate(2.9deg);
transition: all 0.45s ease-out;
-webkit-transform: rotate(2.9deg);
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now:hover .btn-orange {
filter: contrast(0.8) brightness(1.3);
transform: rotate(2deg);
transition: all 0.45s ease-out;
-webkit-transform: rotate(2deg);
-webkit-transition: all 0.45s ease-out;
}

.cta-play-now .bg-playnow-mobile {
display: none;
}



@keyframes bounce {
0% {
  transform:translateY(0px);
}
100% {
  transform:translateY(-10px);
}
}

@-webkit-keyframes bounce {
0% {
  transform:translateY(0px);
}
100% {
  transform:translateY(-10px);
}
}


.js-slideout-active .slideout__toggle {
transform: translateX(-300%) !important;
}


@media (max-width: 999px) {
.page-template-page-landing-students .header {
  height: auto;
}

.hero-students {
  margin-top: 0px !important;
}

.world-card__item {
  width: 49%;
}

.footer-codie {
  padding: 0px 70px;
}
}

@media (max-width: 749px) {
.page-template-page-landing-students h1,
.page-template-page-landing-students h2 {
  font-size: 24px;
  line-height: 32px;
  padding: 0px 25px;
}

.btn-purple {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 10px;
  width: 190px;
  height: 48px;
  display: flex;
  justify-content: center;
}

.btn-purple svg {
  width: 32px;
}

.hero-students {
  height: 462px;
  padding-top: 105px;
}

.hero-students__cta {
  bottom: -11px;
}

.hero-students__logo img {
  max-width: 288px;
}

.boxes {
  padding: 48px 0 48px;
}

.boxes__item,
.boxes__item.inverted {
  flex-direction: column-reverse;
  height: auto;
  padding: 16px 16px;
}

.boxes__item-text {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.boxes__item-image img {
  margin-bottom: 14px;
}

.boxes__item-col {
  height: auto;
  padding: 10px 10px 5px;
  width: 50%;
}

.boxes__item-qr img:nth-child(1) {
  width: 100%;
}

.boxes__item-qr img:nth-child(2) {
  margin-top: -40px;
  width: 97px;
}

.boxes__item.vertical .boxes__item-text {
  font-size: 16px;
  line-height: 24px;
  padding: 0 10px;
}

.world-awakening {
  padding: 38px 0 0;
}

.world-awakening .container > p {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding: 0 25px;
}

.world-cards {
  margin-bottom: 50px;
}

.world-card__item {
  width: 100%;
}

.world-card__item-text p {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.world-friends {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 240px;
}

.world-friends img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
}

.world-awakening .btn-purple {
  width: 255px;
  padding: 8px 42px 8px 20px;
  bottom: -56px;
}

.world-awakening .btn-purple:after {
  top: 15px;
  right: 18px;
}

.footer-landing {
  padding: 117px 0 90px;
  height: 530px;
}

.footer-codie {
  padding: 0 0;
  margin-bottom: 34px;
  flex-direction: column;
}

.footer-codie img {
  max-width: 207px;
  margin-right: 0;
  margin-bottom: 24px;
}

.footer-codie p {
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0px 20px;
}

.footer-menu {
  margin-bottom: 24px;
}

.footer-menu ul {
  display: flex;
  column-gap: 24px;
  row-gap: 12px;
  flex-wrap: wrap;
  max-width: 287px;
  justify-content: center;
}

.cta-play-now {
  width: 172px;
  height: 92px;
}

.cta-play-now .bg1,
.cta-play-now .bg2,
.cta-play-now .bg3,
.cta-play-now .avatar1,
.cta-play-now .avatar2,
.cta-play-now .join-us {
  display: none;
}

.cta-play-now .bg-playnow-mobile {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  display: block;
}

.cta-play-now .dragon {
  z-index: 1;
  top: -29px;
  right: -8px;
}

.cta-play-now .btn-orange {
  width: 144px;
  height: 48px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  bottom: 8px;
  right: 9px;
  z-index: 2;
}
}