html {
    scroll-behavior: smooth;
}

.bg-0E022F {
    background-color: #0E022F;
}

.bg-E2E2E2 {
    background-color: #E2E2E2;
}

.bg-010518 {
    background-color: #010518;
}

.bg-EAEAEA {
    background-color: #EAEAEA;
}

.page-container {
    width: 100%;
    max-width: 2560px;
    margin: auto;
}

#main-section {
    min-height: 935px;
    width: 100%;
    position: relative;
}

#about-section {
    min-height: 935px;
    width: 100%;
    position: relative;
}

#ict-section {
    min-height: 1071px;
    width: 100%;
    position: relative;
}

#game-section {
    min-height: 1446px;
    width: 100%;
    position: relative;
}

#footer-section {
    height: 574px;
    width: 100%;
    position: relative;
}

.f-inter {
    font-family: 'Inter', sans-serif;
}

.f-cabin {
    font-family: 'Cabin', sans-serif;
}

.section-container {
    width: 86%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.footer-container {
    width: 85%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: center;
}

.footer-logo {
    height: 200px;
    width: 200px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 240px;
    object-fit: contain;
    border-radius: 25%;
    padding: 20px;
    background-color: white;
}

.img-footer {
    height: 356px;
    width: 100%;
    background-color: beige;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    top: -178px;
    position: absolute;
    background: url(../images/49.png) no-repeat;
    background-size: cover;
}

.c-FFFFFF {
    color: #FFFFFF;
}

.c-1D1D1D {
    color: #1D1D1D;
}

.c-0E022F {
    color: #0E022F;
}

.c-020931 {
    color: #020931;
}

.c-E7E7E7 {
    color: #E7E7E7;
}

.c-1632FA {
    color: #1632FA !important;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-22 {
    font-size: 22px;
}

.f-26 {
    font-size: 26px;
}

.f-30 {
    font-size: 30px;
}

.f-36 {
    font-size: 36px;
}

.f-50 {
    font-size: 50px;
}

.f-64 {
    font-size: 64px !important;
}

.footer-seperator {
    height: 0px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 100%;
    position: absolute;
    bottom: 81px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}

.cr-area {
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: space-between;
}

.footer-slogan {
    height: 356px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quarter-circle-top-left {
    width: 30px;
    height: 30px;
    background: #1632FA;
    border-radius: 0 0 30px 0;
    -moz-border-radius: 0 0 30px 0;
    -webkit-border-radius: 0 0 30px 0;
}

.mt-50p {
    margin-top: 50px;
}

.mt-100p {
    margin-top: 100px;
}

.mt-166 {
    margin-top: 166px;
}

.pt-166 {
    padding-top: 166px;
}

.pt-116 {
    padding-top: 116px;
}

.mt-40p {
    margin-top: 40px;
}

.mt-20p {
    margin-top: 20px;
}

.mt-15p {
    margin-top: 15px;
}

.mt-10p {
    margin-top: 10px;
}

.mt-100p {
    margin-top: 100px;
}

.mt-85p {
    margin-top: 85px;
}

.ml-15p {
    margin-left: 15px;
}

.mr-15p {
    margin-right: 15px;
}

.mb-400p {
    margin-bottom: 1000px;
}

.mb-120p {
    margin-bottom: 120px;
}

.mr-36p {
    margin-right: 36px;
}

h2 {
    font-weight: 600;
    font-family: 'Cabin', sans-serif;
    font-size: 24px;
}

h3 {
    font-weight: 600;
    font-family: 'Cabin', sans-serif;
    font-size: 20px;
}

p {
    font-weight: 400;
    font-family: 'Cabin', sans-serif;
    font-size: 20px;
}

.store-button {
    height: 62px;
}

.sc {
    width: 100%;
    height: 100%;
    overflow-x: scroll !important;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sc::-webkit-scrollbar {
    display: none;
}

.game-sc-container {
    height: 553px;
    width: 100%;
}

.game-sc-sub {
    min-width: 170px;
    width: 15%;
    height: 553px;
    display: inline-flex;
    background: linear-gradient(180deg, #8F8F8F 0%, #040C44 70.83%);
    border-radius: 2px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-box-pack: center;
    -webkit-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    vertical-align: top;
    pointer-events: initial;
    transition: all linear 0.7s;
}

.game-sc-sub[id^='hover-sl']:hover {
    background: url(../images/games/sl.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.game-sc-sub[id^='hover-mine']:hover {
    background: url(../images/games/mine.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.game-sc-sub[id^='hover-sudoku']:hover {
    background: url(../images/games/sudoku.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.game-sc-sub[id^='hover-wh']:hover {
    background: url(../images/games/wh.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.game-sc-sub[id^='hover-sl']:hover .game-sc-sub-text {
    display: none;
}

.game-sc-sub[id^='hover-mine']:hover .game-sc-sub-text {
    display: none;
}

.game-sc-sub[id^='hover-sudoku']:hover .game-sc-sub-text {
    display: none;
}

.game-sc-sub[id^='hover-wh']:hover .game-sc-sub-text {
    display: none;
}

.game-sc-main {
    min-width: 376px;
    width: 30%;
    height: 553px;
    display: inline-flex;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 56.25%), #1632FA;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

.game-sc-sub-text {
    font-size: 48px;
    color: #FFFFFF;
    font-weight: 400;
    font-family: 'Cabin', sans-serif;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
}

.game-sc-main-text {
    font-size: 64px;
    color: #FFFFFF;
    font-weight: 400;
    font-family: 'Cabin', sans-serif;
    word-break: break-word;
    white-space: normal;
    padding: 30px;
}

.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.explore {
    text-decoration: none;
    font-size: 20px;
    font-family: 'Cabin', sans-serif;
}

.explore:hover {
    text-decoration: none;
}

#game-line-1 {
    position: absolute;
    width: 147px;
    height: 1px;
    left: calc(7% - 73px);
    top: 73px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#game-line-2 {
    position: absolute;
    width: 263px;
    height: 1px;
    left: calc(50% - 130px);
    top: 130px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#game-line-3 {
    position: absolute;
    width: 186px;
    height: 1px;
    left: calc(82% - 93px);
    top: 93px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#game-line-4 {
    position: absolute;
    width: 100px;
    height: 1px;
    left: calc(92% - 50px);
    top: 50px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#ict-line-1 {
    position: absolute;
    width: 129px;
    height: 1px;
    left: calc(20% - 65px);
    top: 65px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#ict-line-2 {
    position: absolute;
    width: 490px;
    height: 1px;
    left: calc(37% - 245px);
    top: 245px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#ict-line-3 {
    position: absolute;
    width: 300px;
    height: 1px;
    left: calc(51% - 150px);
    top: 150px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#ict-line-4 {
    position: absolute;
    width: 52px;
    height: 1px;
    left: calc(93% - 26px);
    top: 26px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

.ict-sc-container {
    height: 551px;
    width: 100%;
}

.ict-sc-item {
    height: 551px;
    width: 273px;
    display: inline-block;
    vertical-align: top;
}

.ict-sc-development-container {
    height: 510px;
    width: 273px;
    overflow: hidden;
}

.ict-sc-development {
    height: 100%;
    width: 100%;
    background: url(../images/ict/development.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.ict-sc-support-container {
    height: 288px;
    width: 273px;
    overflow: hidden;
}

.ict-sc-support {
    height: 100%;
    width: 100%;
    background: url(../images/ict/support.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.ict-sc-staff-container {
    height: 439px;
    width: 273px;
    overflow: hidden;
}

.ict-sc-staff {
    height: 100%;
    width: 100%;
    background: url(../images/ict/staff.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.ict-sc-consulting-container {
    height: 241px;
    width: 273px;
    overflow: hidden;
}

.ict-sc-consulting {
    height: 100%;
    width: 100%;
    background: url(../images/ict/consulting.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.ict-sc-ui-container {
    height: 201px;
    width: 273px;
    overflow: hidden;
}

.ict-sc-ui {
    height: 100%;
    width: 100%;
    background: url(../images/ict/ui.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.ict-sc-development:hover {
    transform: scale(1.2);
}

.ict-sc-support:hover {
    transform: scale(1.2);
}

.ict-sc-staff:hover {
    transform: scale(1.2);
}

.ict-sc-consulting:hover {
    transform: scale(1.2);
}

.ict-sc-ui:hover {
    transform: scale(1.2);
}

.ict-sc-text-container {
    height: 41px;
    width: 273px;
}

.ict-sc-text {
    font-weight: 600;
    font-family: 'Cabin', sans-serif;
    font-size: 20px;
    margin-bottom: 10px;
}

.about-container {
    width: 100%;
    min-height: 935px;
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
}

#about-line-1 {
    position: absolute;
    width: 124px;
    height: 1px;
    left: calc(20% - 62px);
    top: 62px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #FFFFFF -14.88%, rgba(255, 255, 255, 0) 106.9%);
}

#home-line-1 {
    position: absolute;
    width: 124px;
    height: 1px;
    left: calc(7% - 62px);
    top: 112px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#home-line-2 {
    position: absolute;
    width: 188px;
    height: 1px;
    left: calc(22% - 94px);
    top: 144px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#home-line-3 {
    position: absolute;
    width: 58px;
    height: 1px;
    left: calc(51% - 29px);
    top: 79px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

#home-line-4 {
    position: absolute;
    width: 198px;
    height: 1px;
    left: calc(88% - 99px);
    top: 149px;
    transform: rotate(-90deg);
    background: linear-gradient(270deg, #0E022F -14.88%, rgba(21, 3, 71, 0) 106.9%);
}

.arrow-home {
    left: 7%;
    bottom: 9%;
    position: absolute;
    bottom: 10%;
}

.main-top-container {
    height: 300px;
    width: 100%;
}

.main-container {
    margin-left: 20%;
    margin-right: 7%;
    width: 73%;
    margin: auto;
}

.home-name {
    position: absolute;
    left: calc(7% - 70px);
    top: 50%;
    transform: rotate(-90deg);
    font-weight: 600;
}

.home-slogan {
    height: 100%;
    float: right;
    font-weight: 700;
}

.menu-item {
    font-weight: 500 !important;
    font-family: 'Cabin', sans-serif !important;
    font-size: 18px !important;
    color: #020931 !important;
}