/* Default settings */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* Variables */
:root {
    --scaleValue: 1.5; /* To maintain a ration between the width and the height of the cards */
    --navigationBarHeight: 30px;
}

.Container {
    padding: 0px 25px;
    width: 100%;
}

.Container a {
    text-decoration: none;
}

.Hide {
    display: none !important;
}


.center{
    text-align: center
}


/* Hamburger */

#Hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

#Hamburger-Icon {
    height: 50px;
    cursor: pointer;
    justify-self: flex-end;
    z-index: 10000;
}

#Hamburger-Menu {
    position: absolute;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    top: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.Hamburger-Navigation-Link {
    text-decoration: none;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    margin-bottom: 10px;
}

/* Navigation Bar */

#Navigation-Bar {
    padding: 20px 25px;
    background-color: #FFFFFF;
    /*position: fixed;*/
    /*z-index: 100;*/
    /*padding-bottom: 10px;*/
    left: 0px;
    width: 100%;
    height: var(--navigationBarHeight);
    display: flex;
    align-items: center;
}

#Navigation-Bar a {
    text-decoration: none;
}

#Logo {
    display: flex;
    align-items: center;
}

#Logo-Image {
    height: 30px;
    margin-right: 10px;
    margin-bottom: 0px;
}

#Logo-Text {
    font-family: "Kanit";
    font-weight: bold;
    font-size: 22px;
    color: #000000;
}

#Logo-Text:hover {
    color: #7500FF;
}

.Navigation-Link {
    font-family: "Kanit";
    font-weight: bold;
    font-size: 22px;
    margin-left: 20px;    
    text-decoration: none;
    color: #000000;
    padding: 3px 15px;
    border-radius: 25px;
    transition: all 0.25s;
}

.Navigation-Link:hover {
    background-color: #F5F5F5;
}

/* Navigation Bar Margin */

#Navigation-Bar-Margin {
    height: var(--navigationBarHeight);
}

/* Showcase */

#Showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%;
    height: 300px;
    position: relative;
    margin-bottom: 25px;
}

#Showcase-Image {
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Showcase::after {
    content: "";
    z-index: 3;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(-180deg, rgba(255, 0, 119, 0.25) 0%, rgba(106, 0, 255, 0.75) 100%);
}

#Showcase-Contents {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#Showcase-Title {
    padding: 0px 25px;
    color: #FFFFFF;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#Showcase-Content {
    padding: 0px 25px;
    color: #FFFFFF;
    font-family: "Kanit";
    font-size: 30px;
    text-align: center;
}

.Showcase-Buttons {
    margin-top: 15px;
    padding: 0px 25px;
}

.Showcase-Button {
    padding: 7px;
    color: #FFFFFF;
    outline: none;
    border: none;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 25px;
    width: 150px;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.Showcase-Button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Sections */

.Section {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 25px;
}

.Cards {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    /*justify-content: space-between;   */
    flex-wrap: wrap;
}

.Section-Heading {
    font-family: "Kanit";
    font-size: 40px;
    font-weight: bold;
    align-self: flex-start;
    margin-bottom: 25px;
    margin-left: 8px;
}

.Card-Caption {
    z-index: 3;
    position: absolute;
    left: 50%;
    bottom: 60px;
    padding: 0px 10px;
    width: 100%;
    color: black;
    font-weight: bold;
    font-family: "Kanit";
    font-size: 22px;
    letter-spacing: 1px;
    text-align: center;
    transform: translate(-50%, 0%);
    transition: all 0.3s;
    line-height: 28px;
}

.start-position{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 12px;
}



.Card-Caption-Full {
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0px 10px;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-family: "Kanit";
    font-size: 22px;
    letter-spacing: 1px;
    text-align: center;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.Card-Wrapper {
    padding: 10px 15px;
    width: 20%;
    height: calc(20vw * var(--scaleValue));
}

.Card-One, .Card-Two, .Card-Three, .Card-One-Full, .Card-Two-Full, .Card-Three-Full {
    z-index: 1;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}

.Card-One:hover, .Card-Two:hover, .Card-Three:hover, .Card-One-Full:hover, .Card-Two-Full:hover, .Card-Three-Full:hover {
    transform: scale(1.01);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}

.Card-One:hover .Card-Caption, .Card-Two:hover .Card-Caption, .Card-Three:hover .Card-Caption,
.Card-One-Full:hover .Card-Caption-Full, .Card-Two-Full:hover .Card-Caption-Full, .Card-Three-Full:hover .Card-Caption-Full {
    opacity: 100%;
    color: black;
}

.Card-One:hover::after, .Card-Two:hover::after, .Card-Three:hover::after,
.Card-One-Full:hover::after, .Card-Two-Full:hover::after, .Card-Three-Full:hover::after {
    opacity: 0%;
}

.Card-One::after, .Card-Two::after, .Card-Three::after,
.Card-One-Full::after, .Card-Two-Full::after, .Card-Three-Full::after {
    z-index: 2;
    position: absolute;
    content: "";
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    transition: all 0.3s;
}

.Card-One::after {
    background: linear-gradient(0deg, #ff0080ad 0%, rgb(255 107 0 / 37%) 70%, rgba(255, 100, 0, 0) 100%);
    opacity: 40%; /*update opacity to 100% for it to take effect*/
} 

.Card-Two::after {
    background: linear-gradient(0deg, #7500ffc7 0%, rgb(255 0 224 / 27%) 70%, rgba(255, 0, 225, 0) 100%);
    opacity: 40%; /*update opacity to 100% for it to take effect*/
}

.Card-Three::after {
    background: linear-gradient(0deg, #03960fad 0%, rgb(228 255 0 / 43%) 70%, rgba(228, 255, 0, 0) 100%);
    opacity: 40%; /*update opacity to 100% for it to take effect*/
}

.Card-One-Full::after {
    background: linear-gradient(0deg, #FF0090 0%, rgba(255, 107, 0, 0.75) 100%);
    opacity: 40%; /*update opacity to 100% for it to take effect*/
} 

.Card-Two-Full::after {
    background: linear-gradient(0deg, #7500FF 0%, rgba(255, 0, 224, 0.75) 100%);
    opacity: 40%;
}

.Card-Three-Full::after {
    background: linear-gradient(0deg, #00E988 0%, rgba(228, 255, 0, 0.75) 100%);
    opacity: 40%;
}

.Card-Image {
    top: 0px;
    left: 0px;
    width: 100%;
    object-fit: cover;
    margin-left: 5% !important;
    width: 90%;
}

/* App Card */

.App-Card {
    border-radius: 25px;
    display: none;
    align-items: center;
    /*justify-content: space-between;*/
    background-color: #F5F5F5;
    padding: 15px;
    margin-bottom: 25px;
}

.App-Card-Branding {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.App-Card-Logo {
    margin-right: 15px;
}

.App-Card-Logo img {
    height: 80px;
    border-radius: 20px;
}

.App-Card-Content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.App-Card-Text {
    font-family: "Kanit";
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    color: #000000;
}

.App-Card-Stars img {
    height: 20px;
}

.App-Card-Icon {
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #8700FF;
}

.App-Card-Icon img {
    height: 30px;
}

/* Quiz Card */

.Quiz-Card {
    width: 100%;
    flex-direction: column;
    position: relative;
    border-radius: 25px;
    margin-top: 15px;
    display: block;
    padding: 0px 10px;
}

.Quiz-Card-Container{
    padding: 5px;
    border-radius: 25px;
    background-color: #fdc9aa;
    /*background-color: #DDD3EE;*/
}

.Quiz-Card-Image-Space {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.Quiz-Card-Image {
    width: 100%;
    border-radius: 25px 25px 0px 0px;
    z-index: 1;
}

.Quiz-Card-Image-Space::after {
    content: "";
    z-index: 2;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(221, 221, 238, 0.5);
    background-color: red;
}

.Quiz-Card-Content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.Quiz-Card-Icon {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #f3ec0f 0%, #ffa50f 100%);
    /*background: linear-gradient(45deg, #490EF7 0%, #FF00DF 100%);*/
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 7px solid #DDD3EE;
    z-index: 10;
}

.Quiz-Card-Icon img {
    height: 30px;
}

.Quiz-Card-Heading {
    margin-top: 20px;
    text-align: center;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    color: #000000;
    margin-bottom: 10px;
}

.Quiz-Card-Description {
    text-align: center;
    font-family: "Kanit";
    font-size: 20px;
    text-decoration: none;
    color: #000000;
    margin-bottom: 15px;
}

.Quiz-Card-Start-Button {
    color: #FFFFFF;
    font-family: "Kanit";   
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    background-color: #7500FF;
    background: linear-gradient(45deg, #4c1a2c 0%, #ff0012 100%);
    /*background: linear-gradient(45deg, #490EF5 0%, #FF00DF 100%);*/
    box-shadow: 0 5px 10px -5px rgb(123 0 233 / 28%), 0 12px 16px -8px rgb(250 0 255 / 36%);
    border-radius: 25px;
    padding: 5px 20px;
}

/* Search */

#Search-Space {
    width: 100%;
    background-color: #080D19;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

#Search-Space a {
    text-decoration: none;
}

#Search {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    padding: 5px 5px 5px 20px;
    border-radius: 25px;
    border: 4px solid rgb(49, 53, 63);
}

#Search-Text {
    color: #FFFFFF;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 20px;
    margin-right: 20px;
}

#Search-Icon-Space {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #8700FF;
}

#Search-Icon {
    height: 20px;
}

/* Download */
.Download-Space {
    display: flex;
    align-items: center;
    justify-content: center;   
    background-color: #0B101F;
    height: 300px;
}

.Download {
    display: flex;
    align-items: center;
    justify-content: center;   
    flex-direction: column;
}

.Download-Icon {
    height: 100px;
    margin-bottom: 10px;
}

.Download-Heading {
    color: #FFFFFF;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
    padding: 0px 25px;
}

.Download-Sub-Heading {
    color: #A8A7B5;
    font-family: "Kanit";
    font-size: 22px;
    padding: 0px 25px;
    margin-bottom: 15px;
}

.Download-Button {
    color: #FFFFFF;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    background-color: #7500FF;
    border-radius: 25px;
    padding: 5px 20px;
}

/* Footer */

.Footer-Space {
    position: relative;
    background-color: rgb(9, 14, 27);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.Columns {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.Column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 20%;
    margin: 10px;
}

.Column-Heading {
    color: #FFFFFF;
    font-family: "Kanit";
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
}

.Column-Link {
    color: #A8A7B5;
    font-family: "Kanit";
    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.Column-Link img {
    height: 20px;
    margin-right: 5px;
}

.Footer-Message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 25px;
    align-self: flex-start;
    margin-top: 25px;
}

.Footer-Message-Image {
    height: 100px;
    margin-right: 25px;
}

.Footer-Message-Text {
    color: #FFFFFF;
    font-family: "Kanit";
    font-size: 22px;
    margin-bottom: 10px;
    line-height: 1;
}

.Footer-Message-Text a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.Content-Languages {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    padding: 25px;
}

.Content-Language, .language_list a {
    color: #A8A7B5;
    font-family: "Kanit";
    font-size: 20px;
    display: inline;
    align-items: center;
    margin-right: 20px;
    text-decoration: none;
}

.Content-Language img {
    margin-right: 10px;
    height: 20px;
}

.Footer-Links-Space {
    /*margin-top: 25px;*/
    /*display: flex;*/
    align-items: center;
    /*justify-content: space-between;*/
    padding: 25px;
}

.Footer-Links {

}

.Footer-Link {
    color: #A8A7B5;
    font-family: "Kanit";
    font-size: 20px;
    margin-right: 20px;
    text-decoration: none;
}

/* Media Queries */

/* Media Queries to display 4 cards in a row */
@media (max-width: 1450px) {
    .Card-Wrapper {
        width: 25%;
        height: calc(20vw * var(--scaleValue));
    }
}

/* Media Queries to display 3 cards in a row */
@media (max-width: 1200px) {
    .Card-Wrapper {
        width: 33%;
        height: calc(28vw * var(--scaleValue));
    }

    .Section-Heading {
        font-size: 30px;
    }
    
    .Column {
        width: 40%;
    }
}

/* Media Queries to display 2 cards in a row */
@media (max-width: 950px) {
    .Card-Wrapper {
        width: 50%;
        height: calc(40vw * var(--scaleValue));
    }

    /* Toggle App Card(s) apperance */
    .App-Card {
        display: flex;
    }

}

@media (max-width: 900px) {
    #Navigation-Bar {
        /*justify-content: space-between;*/
    }

    #Navigation-Links {
        display: none;
    }

    #Hamburger {
        display: flex;
    }
}


@media (max-width: 590px) {
    .Card-Wrapper {
        width: 100%;
        height: calc(70vw * var(--scaleValue));
        min-height: 380px;
    }

    .Container{
        padding: 0px 5px;
    }

    /* Toggle App Card(s) apperance */
    .App-Card {
        display: flex;
    }
}

@media (max-width: 650px) {
    #Showcase-Title {
        font-size: 35px;
        line-height: 45px;
    }

    .Column {
        width: 80%;
    }
}



@media (min-width: 600px){
    .Quiz-Card {
        width: 50%;
    }
}
@media (min-width: 800px){
    .Quiz-Card {
        width: 33%;
    }
}
@media (min-width: 1000px){
    .Quiz-Card {
        width: 25%;
    }
}
@media (min-width: 1600px){
    .Quiz-Card {
        width: 20%;
    }
}


a{
    text-decoration: none;
}




/*loader css*/
.loader,
.loader:before,
.loader:after {
  background: #e34545;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #e34545;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}