@charset "utf-8";
/*
 * ******************************************************************************
 *  main-css-239 BITS
 *  file: bits239.css
 *
 *  Copyright (c) 2023. 239BITS ;
 *  Development Solutions, Croatia - CRO
 *  email: office@239bits.com
 *  site: 	http://www.239bits.com
 *  other-blog:	http://www.dotsagencija.com
 *
 *  Licences: MIT, GPL
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 *
 *	Artwork inspired by:  /
 *  last modified: 29/10/2023 17.23
 *  *****************************************************************************
 */

/*******************************************************************************
 * 
 * 239BITS: 
 * version: 1.00
 * Author-of-the-file: dr.blast
 * Creation date: 29/10/2023 17.23
 * Licences: MIT, GPL
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 ******************************************************************************/


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 100%;
    position: fixed;
}

body {
    font-family: 'Rubik', sans-serif;
}

a {
    text-decoration:none;
	color:#ffffff;
    transition: all .4s ease-in-out;
}

a:hover {
    /* color: #c4e729; */
	/* color: #4bcd3e; */
    color: #29e7ad;
}

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

/* ***************** */
/*   Heading Style  */
/* =============== */

h1 {
	font-size:7.6rem;
}
h2 {
	font-size:5rem;
}
h3 {
	font-size:3.4rem;
}
h4 {
	font-size:2.2rem;
}
h5 {
	font-size:1.8rem;
    font-weight: 400;
}
h6 {
	font-size:1.2rem;
    font-weight: 400;
}
h7 {
	font-size:1.1rem;
    font-weight: 400;
}
/* **************** */
/*     Nav Top     */
/* ============== */

/* Menu White Default */
.main-nav-239bits {
    position: fixed;
    z-index: 9999;
    width: 100%;
    opacity: 0;
    padding-left: 2%;
    padding-right: 2%;
    background: transparent!important;
    animation:opacityOne .9s forwards ease-out;
    animation-iteration-count:1;
    animation-delay:2s;
}

.main-nav-239bits .navbar-brand {
    margin-bottom: 20px;
}

.main-nav-239bits .logo-239bits-img {
    width: 100%;
    min-width: 68px;
    max-width: 90px;
}

.main-nav-239bits .navbar-nav {
    display: flex;
    width: 100%;
}

.main-nav-239bits .nav-item {
    display: block;
    /* padding-bottom: 3px; */
    margin-right: 10px;
}
.main-nav-239bits .nav-item:last-child {
    margin-left: auto;
}
.main-nav-239bits .nav-item::after  {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0px;
    background: transparent;
    transition: width .7s ease, background-color .5s ease;
}

.main-nav-239bits .nav-item:hover::after {
    width: 90%;
    background: #29e7ad;
}

.main-nav-239bits .nav-link {
    color: #ffffff!important;
    font-size: .94rem;
    transition: all .4s ease-in;
    border-bottom: 3px solid transparent;

}
.main-nav-239bits .nav-link:hover {
    color: #29e7ad!important;
}

/* Active page link style */
.main-nav-239bits .nav-item.active-item {
    color: #ffffff!important;
    pointer-events: none;
}
.main-nav-239bits .nav-item.active-item .nav-link:hover {
    color: #ffffff!important;
    cursor: none;
}
.main-nav-239bits .nav-item.active-item::after  {
    width: 90%;
    background: #29e7ad;
}

/* Mobile menu - tost menu */
.main-nav-239bits .navbar-toggler {
    border: transparent;
    padding-top: 0;
    padding-bottom: 15px;
    padding-right: 0;
    transition: all 200ms ease;
}
.navbar-tost-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}
.tost-239bits-img {
    width: 100%;
}
.navbar-toggler:focus {
    box-shadow: none;
    /* border: 1px solid #fff; */
}
.line-tost {
    width:22px;
    height: 1px;
    background-color: #ffffff;
    margin-bottom: 7px;
    transition: .6s all ease-in;
}
.main-nav-239bits.expanded .line-tost.first {
    transform: rotate(45deg);
}
.main-nav-239bits.expanded .line-tost.second {
    transform: rotate(315deg);
    translate: 0 -7px;
}
.main-nav-239bits.expanded .line-tost.third {
    background-color: #03e7ae;
}

/* Menu Green */
.main-nav-239bits .green .nav-link {
    color: #29e7ad!important;
}

/* ***************** */
/*    Nav Square    */
/* =============== */

/* Page Slide Square Navigation txt */
/* Style for all span:after */
.ps-nav-container .ps-nav-square span::after { 
    position: absolute;
    display: block;
    width: 10.5vw;
    text-align: right;
    right: 1.5vw;
    line-height: 120%;
    color: #fff;
    font-size: 1rem;
    transform: translateY(6em);
    opacity: 0;
    transition: all .2s ease-in-out;
    filter: blur(5px);
}

/* Custom style */
/* Page 1 */
.ps-nav-container .ps-nav-square:first-child span::after {
    content: '239bits Home ->';
 }
 /* Page 2 */
 .ps-nav-container .ps-nav-square:nth-child(2) span::after {
    content: 'Tailored Tech ->';
 }
 /* Page 3 */
 .ps-nav-container .ps-nav-square:nth-child(3) span::after {
    content: 'Forge Partnerships ->';
 }
 /* Page 4 */
 .ps-nav-container .ps-nav-square:nth-child(4) span::after {
    content: 'Creating Solutions ->';
 }
 /* Page 5 */
 .ps-nav-container .ps-nav-square:nth-child(5) span::after {
    content: 'Expolore Blockchain ->';
 }
 /* Page 6 */
 .ps-nav-container .ps-nav-square:nth-child(6) span::after {
    content: 'Connect With us ->';
 }

  /* Activation of animation on hover */
.ps-nav-container .ps-nav-square:hover span::after {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
 }

  /* Stop animation for active square */
.ps-nav-square.square-active:hover span::after {
    transform: translateY(6em);
    opacity: 0!important;
}


/* Font family */
/* Rubik Text */
.font-f-rubik { 
    font-family: 'Rubik', sans-serif;
}

/* Logo font Squada one */

/* Squada One Text */
.font-f-squada-one { 
    font-family: 'Squada One', sans-serif;
}



/* 239bits logo */
.logo-239bits {
    font-family: 'Squada One', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    display: inline-block;
}
.logo-i-h2::after {
    position: absolute;
    content: '';
    margin-left: -12px;
    margin-top: 11px;
    background: #ce1b1b;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
.logo-i-h5::after {
    position: absolute;
    content: '';
    margin-left: -6px;
    margin-top: 6px;
    background: #ce1b1b;
    border-radius: 50%;
    width: 5px;
    height: 5px;
}

/* PAGE 1 - Home */
.video-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover !important;
    opacity: 1;
    /* transform: scale(1); */
    transition: all 1.5s ease-in-out;
}
video#home-video {
    height: 100%;
    position: absolute;
    width: 100%;
    object-fit: cover;
    object-position: bottom!important;
}
.first .logo-239bits-img {
    width: 100%;
    max-width: 150px;
    vertical-align: baseline;
}

/* PAGE 2 - Business */

.page.business {
    transition: all 1.2s ease-in-out;
    position: relative;
}


.business .gradient {
    position: absolute;
    width: 60%;
    left: 50%;
    top: 50%;
    height: 100%;
    margin-left: -30%;
    opacity: 0;
    transition: all 1.25s ease-in-out;
    z-index: -1;
}

.business .gradient.spreaded {
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    margin-left: 0;
}

.business .active-gradient {
    opacity: 1;
    z-index: 1;
}


.main-content-1 {
    position: relative;
    z-index: 9;
    transform: translateY(25vh);
}

.main-content-1 a:hover {
    text-decoration: underline;
}

.squares-col {
    transform: scale(.25);
    opacity: 0;
    transition: all 1.4s ease-in-out;
}

.business.active .squares-col.zoom-in-fade-in {
    transform: scale(1);
    opacity: 1;
}

.txt-col-left {
    position: relative;
    transform: translateY(35vh);
    opacity: 0;
    transition: all 1s ease-out;
    transition-delay: .2s;
}
/* Heading slogan container */
.heading-sl-container {
    position: relative;
}
.heading-sl-container h6:after {
    content: "";
    position: absolute;
    width: 7.4rem;
    height: 2px;
    background: #29e7ad;
    bottom: 0;
    left: 0;
}
.heading-sl-1 {
    padding-bottom: 1%;
}

.business.active .txt-col-left.fade-up-in {
    transform: translateY(0);
    opacity: 1;
}

.square-btn {
    display: flex;
    width: 100%;
    margin-bottom: 2vh;
}
.icon-container {
    opacity: .3;
    cursor: pointer;
    transition: all .4s ease-in-out;
}
.icon-container.active {
    opacity: 1;
}
.icon-btn-1 {
    width: 22%;
    min-width: 32px;
    max-width: 39px;
}
.all-squares-animate {
    display: flex;
    height: calc(100vh / 3);
    max-width: 100%;
    flex-direction: column;
}
.icon-container:hover {
    opacity: 1;
}
.square-btn.active-square .icon-container {
    opacity: 1;
}

.square-animate {
    position: absolute;
    /* height: calc(100% - (41px + 20rem)); */
    height: 100%;
    width: 96.4%;
    padding-left: 8%;
    padding-right: 8%;
    opacity: 0;
    transition: all .75s ease-in-out;
    z-index: 1;
    background: rgb(255 255 255 / 20%);
    border-radius: 2px;
    filter: blur(5px);
    transform: scale(.35);
    border: 1px solid #FFFFFF80;
}

.square-animate.active-square {
    opacity: 1;
    z-index: 2;
    filter: blur(0);
    transform: scale(1);
}

.square-animate.fade-forward {
    opacity: 0;
    z-index: 1;
    filter: blur(5px);
    transform: scale(1.35);
}

.number-animate-2 {
    width: 220px;
    display: inline-block;
}
.percent-1 {
    font-size: 6rem;
    color: #fff;
    font-weight: 800;
}

/* .start-w-delay .number-animate-1 {
    animation: counter1 3s forwards ease-in-out;
    animation-iteration-count:1;
    animation-delay: 1s;
    counter-reset: num var(--num);
    color:#ffffff;
    padding-top: 5%;
    font-size: 7rem;
    font-weight: 800;
    line-height: 100%;
}
.start-w-delay .number-animate-1::after {
    content: counter(num);
} */


.active-square .start-w-delay .number-animate-1 {
    animation: counter1 1.5s forwards ease-in-out;
    -webkit-animation: counter1 1.5s forwards ease-in-out; /* Safari compatibility */
    animation-iteration-count:1;
    animation-delay: 1s;
    counter-reset: num var(--num);
    color:#ffffff;
    padding-top: 5%;
    font-size: 7rem;
    font-weight: 800;
    line-height: 100%;
}
.active-square .start-w-delay .number-animate-1::after {
    content: counter(num);
}

.active-square .number-animate-2 {
    animation: counter2 1.5s forwards ease-in-out;
    -webkit-animation: counter2 1.5s forwards ease-in-out; /* Safari compatibility */
    animation-iteration-count:1;
    animation-delay: .3s;
    counter-reset: numMoney var(--numMoney);
    color:#ffffff;
    padding-top: 5%;
    font-size: 7rem;
    font-weight: 800;
    line-height: 100%;
}
.active-square .number-animate-2::after {
    content: counter(numMoney);
}

.active-square .number-animate-3 {
    animation: counter3 2s forwards ease-out;
    -webkit-animation: counter3 1.5s forwards ease-in-out; /* Safari compatibility */
    animation-iteration-count:1;
    animation-delay: .3s;
    counter-reset: numChampion var(--numChampion);
    color:#ffffff;
    padding-top: 5%;
    font-size: 7rem;
    font-weight: 800;
    line-height: 100%;
}
.active-square .number-animate-3::after {
    content: counter(numChampion);
}

.higlight-1 {
    position: absolute;
    left: 50%;
    bottom: 0;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 72%);
    transform: translateX(-50%);
    opacity: .75;
    z-index: 3;
    border-radius: 50%;
    width: calc(135vw);
    height: 35vh;
    background: radial-gradient( rgb(255 255 255 / 64%), rgb(255 255 255 / 0%) 68% );
    mix-blend-mode: overlay;
}

.canvas {
    position: absolute;
    z-index: 3;
    opacity: 1;
    animation: all 1s ease-out;
}

.shadow-1 {
    position: absolute;
    transform: translateY(15vh);
}

.circle-light-1 {
    position: absolute;
    width: 150%;
    height: 67%;
    background: radial-gradient( rgb(249 251 227 / 60%), #fff0 72% );
    bottom: 0;
    transform: translateY(22vh);
    left: -2.5%;
    opacity: 0.7;
    mix-blend-mode: screen;
    filter: blur(8px);
}

/* PAGE 3 */

.page.partnership {
    transition: all 1.2s ease-in-out;
    position: relative;
}


.partnership .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1.25s ease-in-out;
    z-index: -1;
}

.partnership .gradient.spreaded {
    margin-left: 0;
}

.partnership .active-gradient {
    opacity: 1;
    z-index: 1;
}

.partnership.active .squares-col.zoom-in-fade-in {
    transform: scale(1);
    opacity: 1;
}

.partnership.active .txt-col-left.fade-up-in {
    transform: translateY(0);
    opacity: 1;
}

.great-teamwork {
    position: relative;
    width: 100%;
}
.partnership .square-animate {
    background: transparent;
    border: transparent;
    padding-left: 4%;
    padding-right: 4%;
}
.icon-txt-1 {
    color: #ffffff;
    line-height: 120%;
}
.partnership .canvas {
    transform: translateY(25em);
    opacity: 0;
    transition: all 2s ease-out;
}
.partnership.active .canvas.fade-up-in{
    transform: translate(0);
    opacity: 1;
}

.shadow-2 {
    position: absolute;
    transform: translate(2vh, -15vh);
    width: calc(100%);
    height: calc(111vw / 6);
    background: radial-gradient( rgb(0 0 0 / 90%), #fff0 72% );
    opacity: .2;
}

.disabled-click {
    pointer-events: none;
    cursor: not-allowed;
}

/* PAGE 4*/
.page.solutions {
    transition: all 1.2s ease-in-out;
    position: relative;
}


.solutions .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1.25s ease-in-out;
    z-index: -1;
}

.solutions .gradient.spreaded {
    margin-left: 0;
}

.solutions .active-gradient {
    opacity: 1;
    z-index: 1;
}

.solutions.active .squares-col.zoom-in-fade-in {
    transform: scale(1);
    opacity: 1;
}

.solutions.active .txt-col-left.fade-up-in {
    transform: translateY(0);
    opacity: 1;
}


.solutions .square-animate {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    border: transparent;
}
/* .solutions .square-animate {
    background: rgb(48,6,90);
    background: -moz-linear-gradient(48deg, rgba(48,6,90,1) 0%, rgba(72,7,109,1) 68%, rgba(68,15,133,1) 100%);
    background: -webkit-linear-gradient(48deg, rgba(48,6,90,1) 0%, rgba(72,7,109,1) 68%, rgba(68,15,133,1) 100%);
    background: linear-gradient(48deg, rgba(48,6,90,1) 0%, rgba(72,7,109,1) 68%, rgba(68,15,133,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#30065a",endColorstr="#440f85",GradientType=1);
} */

.solutions-txt-container {
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    background: linear-gradient(rgb(255 255 255 / 20%), rgb(255 255 255 / 10%)) padding-box, linear-gradient(to right, rgb(0 0 139 / 20%), rgb(153 50 204 / 20%)) border-box;
    border-radius: 12px;
    border: 3px solid transparent;
}
.solutions-description2-txt {
    letter-spacing: -0.04em;
    word-spacing: -0.06em;
}

.solutions .canvas {
    transform: translateY(25em);
    opacity: 0;
    transition: all 2s ease-out;
}
.solutions.active .canvas.fade-up-in{
    transform: translate(0);
    opacity: 1;
}
.solutions .shadow-2 {
    transform: translate(21vh, -17vh);
    width: calc(90%);
    height: calc(85vw / 5);
    background: radial-gradient( rgb(0 0 0 / 90%), #fff0 72% );
    opacity: .26;
}

/* PAGE 5 */
.page.blockchain {
    transition: all 1.2s ease-in-out;
    position: relative;
}


.blockchain .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1.25s ease-in-out;
    z-index: -1;
}

.blockchain .gradient.spreaded {
    margin-left: 0;
}

.blockchain .active-gradient {
    opacity: 1;
    z-index: 1;
}

.blockchain.active .squares-col.zoom-in-fade-in {
    transform: scale(1);
    opacity: 1;
}

.blockchain.active .txt-col-left.fade-up-in {
    transform: translateY(0);
    opacity: 1;
}


.blockchain .square-animate {
    /* border: transparent; 
    animation: colored 10s infinite linear;
    background: linear-gradient(transparent , black), url("../images/gif/bit-239bits-2.gif") no-repeat center, lightblue;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%), url("../images/gif/bit-239bits-2.gif") no-repeat center, lightblue;
    background: linear-gradient(rgb(53 101 204/97%) 1%, rgb(0 0 0 / 93%) 11%, rgb(41 88 190) 100%), url(../images/gif/giphy-2.webp) no-repeat center, lightblue;
    background: linear-gradient(rgb(53 101 204/97%) 1%, rgb(0 0 0 / 32%) 13%, rgb(41 88 190 / 99%) 69%), url(../images/gif/giphy-2.webp) no-repeat center, lightblue;
    background-size: cover;
    background-position: 0 0; */
    padding-left: 4%;
    padding-right: 4%;
}

.top-100 {
    display: inline-block;
    font-size: 1rem;
    color: #fff;
}

.number-animate-4 {
    width: 220px;
    display: inline-block;
}

.active-square .start-w-delay .number-animate-4 {
    animation: counter4 1.5s forwards ease-in-out;
    -webkit-animation: counter4 1.5s forwards ease-in-out; /* Safari compatibility */
    animation-iteration-count:1;
    animation-delay: 1s;
    counter-reset: numCrypto var(--numCrypto);
    color:#ffffff;
    font-size: 7rem;
    font-weight: 800;
    line-height: 120%;
}
.active-square .start-w-delay .number-animate-4::after {
    content: counter(numCrypto); /* Use the --numCrypto counter */
}

.animate-txt-col {
    display: inline-block;
}

.active-square .txt-game-typed {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing 1.5s steps(12, end) forwards, blinkingBorder 1s 6;
    animation-delay: .5s;
    font-size: 5.45rem;
    font-weight: 800;
    line-height: 120%;
    color: #ffffff;
    border-right:2px solid transparent;
}

.active-square .number-animate-5 {
    animation: counter5 5s forwards ease-in-out;
    -webkit-animation: counter5 1.5s forwards ease-in-out; /* Safari compatibility */
    animation-iteration-count:1;
    counter-reset: numArt var(--numArt);
    color:#ffffff;
    font-size: 7rem;
    font-weight: 800;
    line-height: 120%;
}
.active-square .number-animate-5::after {
    content: counter(numArt);
}

/* PAGE 6 Contact */

.page.contact {
    transition: all 1.2s ease-in-out;
    position: relative;
}


.contact .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1.25s ease-in-out;
    z-index: -1;
}

.contact .gradient.spreaded {
    margin-left: 0;
}

.contact .active-gradient {
    opacity: 1;
    z-index: 1;
}

.contact.active .squares-col.zoom-in-fade-in {
    transform: scale(1);
    opacity: 1;
}

.contact.active .txt-col-left.fade-up-in {
    transform: translateY(0);
    opacity: 1;
}

.contact .logo-239bits-img {
    width: 100%;
    max-width: 80px;
    vertical-align: baseline;
}

.contact .shadow-2 {
    transform: translate(2vh, -8vh);
}



/* ***************/
/*  Animation   */
/* =========== */

/* Counter animation for numbers */
@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@property --numMoney {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@property --numChampion {
    syntax: "<integer>";
    initial-value: 10;
    inherits: false;
}

@property --numCrypto {
    syntax: "<integer>";
    initial-value: 0; /* You can set the initial value for --numCrypto */
    inherits: false;
}
@property --numArt {
    syntax: "<integer>";
    initial-value: 0; /* You can set the initial value for --numCrypto */
    inherits: false;
}

@keyframes counter1 {
    from {
        --num: 0;
    }
    to {
        --num: 49;
    }
}
@-webkit-keyframes counter1 {
    from {
        --num: 0;
    }
    to {
        --num: 49;
    }
}
@keyframes counter2 {
    from {
        --numMoney: 0;
    }
    to {
        --numMoney: 100;
    }
}
@-webkit-keyframes counter2 {
    from {
        --numMoney: 0;
    }
    to {
        --numMoney: 100;
    }
}
@keyframes counter3 {
    from {
    --numChampion: 10;
    }
    to {
    --numChampion: 1;
    }
}
@-webkit-keyframes counter3 {
    from {
        --numChampion: 10;
    }
    to {
        --numChampion: 1;
    }
}

@keyframes counter4 {
    from {
        --numCrypto: 0;
    }
    to {
        --numCrypto: 100;
    }
}
@-webkit-keyframes counter4 {
    from {
        --numCrypto: 0;
    }
    to {
        --numCrypto: 100;
    }
}
@keyframes counter5 {
    from {
        --numArt: 0;
    }
    to {
        --numArt: 4223;
    }
}
@-webkit-keyframes counter5 {
    from {
        --numArt: 0;
    }
    to {
        --numArt: 4223;
    }
}

@keyframes colored {
    from {
      -webkit-filter: hue-rotate(0deg);
    }
    to {
      -webkit-filter: hue-rotate(45deg);
    }
}
@-webkit-keyframes colored {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(45deg);
    }
}
@keyframes typing {
    from { 
        width: 0 
    }
    to { 
        width: 100% 
    }
}
@-webkit-keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes blinkingBorder {
    0% {
        border-color: transparent;
    }
    50% {
        border-color:  #4363c7;
    }
    100% {
        border-color: transparent;
    }
}
@-webkit-keyframes blinkingBorder {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: #4363c7;
    }
    100% {
        border-color: transparent;
    }
}  


/*=========================================*/
/*=== Special fix for 125% pixel ratio ===*/
/*=======================================*/
  /* ----------- Windows 125% Scale ----------- */
 @media screen 
 /* and (-webkit-min-device-pixel-ratio: 1.25) */
 and (min-resolution: 1.25dppx) { 
    html, body {
        font-size: 80%;
    }
    
    .main-nav-239bits .logo-239bits-img {
        width: 80%;
    }
    .icon-btn-1 {
        width: 17.6%;
        min-width: 26px;
        max-width: 31px;
    }
    .great-teamwork {
        width: 80%;
    }

}

/*=============================*/
/*===         XL           ===*/
/*===========================*/
/* Extra Large devices XL (phones, less than 1400px) */
@media only screen
and (min-width : 1200px)
and (max-width :1400px) {
    html, body {
        font-size: 90%;
    }
    .main-nav-239bits .logo-239bits-img {
        max-width: 85px;
    }
    .ps-nav-container .ps-nav-square span::after {
        width: 14vw;
        right: 2.5vw;
    }

    /* Page 1 */		
    .first .logo-239bits-img {
        max-width: 134px;
    }
    .ps-text-container {
        margin: 0 200px;
    }
    .ps-text-container h2 {
        font-size: 3rem;
    } 
    .ps-link-container .animation-container1 {
        width: 29%;
    }

    /* Page 2 */
	.square-animate {
        width: 90%;
    }
    /* Page 5*/
    .active-square .txt-game-typed {
        font-size: 4.8rem;
    }
    
}

/*=============================*/
/*===         LG           ===*/
/*===========================*/
/* Large devices LG (phones, less than 1200px) */
@media only screen
and (min-width : 992px)
and (max-width :1200px) {
    html, body {
        font-size: 90%;
    }
    .main-nav-239bits .container-fluid{
        padding-left: 7px;
    }
    .main-nav-239bits .logo-239bits-img {
        vertical-align: bottom;
    }
    .ps-nav-container .ps-nav-square span::after {
        width: 16vw;
        right: 3vw;
    }
    /* Page 1 */
	.ps-link-container .animation-container1 {
        width: 22%;
    }
    .square-animate {
        width: 88%;
    }
    /* Page 5 */
    .active-square .txt-game-typed {
        font-size: 4rem;
    }

}


/*=============================*/
/*===         md           ===*/
/*===========================*/
/* Medium devices MD (phones, less than 992px) */

@media only screen
and (min-width : 768px)
and (max-width : 992px) {
    html, body {
        font-size: 90%;
    }
    .main-nav-239bits .container-fluid{
        padding-left: 20px;
        padding-right: 5px;
    }
    
    /* Mobile menu */
    .main-nav-239bits.expanded {
        background: #4da6ca!important;
        transition: all .4s ease-in-out;
    }
    .main-nav-239bits .nav-item:last-child {
        margin-left: initial;
    }
    .main-nav-239bits .nav-item::after  {
        margin: initial;
    }

    .main-nav-239bits .nav-item:hover::after {
        width: 15%;
        background: #29e7ad;
    }

    .main-nav-239bits .nav-link:hover {
        color: #fff!important;
    }
    /* Active page link style */
    .main-nav-239bits .nav-item.active-item::after  {
        width: 20%;
    }
    /* Square navigation */
    .ps-nav-container .ps-nav-square span::after {
        display: none;
    }

    .main-content-1 {
        transform: translateY(10vh);
    }

    .learn-link {
        display: inline-block;
        margin-bottom: 9%;
    }
    .learn-btn {
        display: inline-block;
        margin-top: 15px;
        margin-bottom: 7%;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 2px;
        transition: all .4s ease-in-out;
    }

    .icon-btn-1 {
        width: 15%;
    }
    .canvas {
        position: absolute;
        z-index: 3;
        bottom: 25vh;
        right: 0;
        opacity: 1;
        animation: all 1s ease-out;
    }

    /* Page 1 */
    .ps-text-container {
        top: 16%;
    }
    .ps-link-container {
        top:50.9%;
    }

    /* Page 2 */
    .business .all-squares-animate {
        height: calc(100vh / 3.8);
    }
    .business .square-animate {
        width: 92.5%;
    }
    
    /* Page 3 */
    .partnership .square-animate {
        padding-left: 0;
    }

    .partnership .great-teamwork {
        max-width: 59%;
    }

    /* Page 4 */
    .solutions .learn-link {
        margin-bottom: 6%;
    }
    .solutions .square-animate {
        padding-left: 10px;
        padding-right: 3%;  
    }
    .solutions .shadow-2 {
        transform: translate(34vh, -5vh);
        width: calc(60%);
        height: calc(89vw / 5);
    }
    .bg-darkblue-radial-gr-3 {
        background: -moz-linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 52%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: -webkit-linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 52%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 52%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
    }
    
    /* Page 5 */
    .blockchain .learn-link {
        margin-bottom: 3%;
    }
    .blockchain .square-animate {
        width: 92.5%;
    }

}




/*=============================*/
/*===         sm           ===*/
/*===========================*/
/* Small devices SM (phones, less than 768px) */

@media only screen
and (min-width : 576px)
and (max-width : 768px) {
    html, body {
        font-size: 90%;
    }
    .main-nav-239bits .container-fluid{
        padding-left: 20px;
        padding-right: 5px;
    }
    
    /* Mobile menu */
    .main-nav-239bits.expanded {
        background: #4da6ca!important;
        transition: all .4s ease-in-out;
    }
    .main-nav-239bits .nav-item:last-child {
        margin-left: initial;
    }
    .main-nav-239bits .nav-item::after  {
        margin: initial;
    }

    .main-nav-239bits .nav-item:hover::after {
        width: 15%;
        background: #29e7ad;
    }

    .main-nav-239bits .nav-link:hover {
        color: #fff!important;
    }
    /* Active page link style */
    .main-nav-239bits .nav-item.active-item::after  {
        width: 20%;
    }
    /* Square navigation */
    .ps-nav-container .ps-nav-square span::after {
        display: none;
    }

    .main-content-1 {
        transform: translateY(10vh);
    }

    .learn-link {
        display: inline-block;
        margin-bottom: 9%;
    }
    .learn-btn {
        display: inline-block;
        margin-top: 15px;
        margin-bottom: 7%;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 2px;
        transition: all .4s ease-in-out;
    }

    .icon-btn-1 {
        width: 15%;
    }
    .canvas {
        position: absolute;
        z-index: 3;
        bottom: 25vh;
        right: 0;
        opacity: 1;
        animation: all 1s ease-out;
    }

    /* Page 1 */
    .first .logo-239bits-img {
        max-width: 128px;
    }
    .ps-text-container {
        top: 16%;
    }
    .ps-text-container h2 {
        font-size: 3rem;
    }
    .ps-link-container {
        top:50.9%;
    }
    .ps-link-container .animation-container1 {
        width: 32%;
    }

    /* Page 2 */
    .business .all-squares-animate {
        height: calc(100vh / 3.8);
    }
    .business .square-animate {
        width: 89.5%;
    }
    
    /* Page 3 */
    .partnership .square-animate {
        padding-left: 0;
        padding-right: 5%;
    }
    .partnership .square-animate:first-child .container {
        padding-left: 15px;
    }
    .partnership .great-teamwork {
        max-width: 70%;
    }

    /* Page 4 */
    .solutions .learn-link {
        margin-bottom: 9%;
    }
    .solutions .square-animate {
        padding-left: 10px;
        padding-right: 3%;  
    }
    .solutions .shadow-2 {
        transform: translate(25vh, -7vh);
        width: calc(60%);
        height: calc(89vw / 5);
    }
    .bg-darkblue-radial-gr-3 {
        background: -moz-linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 54%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: -webkit-linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 54%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: linear-gradient(39deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 54%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
    }
    
    /* Page 5 */
    .blockchain .learn-link {
        margin-bottom: 3%;
    }
    .blockchain .square-animate {
        width: 89.5%;
    }	
    .active-square .txt-game-typed {
        font-size: 4rem;
    }

    /* Page 6 */
    .contact .main-content-1 .col-12 {
        padding-right:8.2%;
    }
 
}


/*=============================*/
/*===   Mobile ready XS    ===*/
/*===========================*/
/* Extra small devices XS (phones, less than 576px) */

@media only screen
and (min-width : 0px)
and (max-width : 576px) {

    html, body {
        font-size: 90%;
    }
    .main-nav-239bits {
        padding-left: 0;
        padding-right: 0;
    }
    .main-nav-239bits .container-fluid{
        padding-left: 10px;
        padding-right: 10px;
    }
    .ps-nav-container {
        right: 10px;
    }

    h5 {
        font-size: 1.4rem;
    }
    h6 {
        font-size: 1.05rem;
    }


    /* Mobile menu */
    .main-nav-239bits.expanded {
        background: #4da6ca!important;
        transition: all .4s ease-in-out;
    }
    .main-nav-239bits .nav-item:last-child {
        margin-left: initial;
    }
    .main-nav-239bits .nav-item::after  {
        margin: initial;
    }

    .main-nav-239bits .nav-item:hover::after {
        width: 15%;
        background: #29e7ad;
    }

    .main-nav-239bits .nav-link:hover {
        color: #fff!important;
    }
    /* Active page link style */
    .main-nav-239bits .nav-item.active-item::after  {
        width: 20%;
    }
    /* Square navigation */
    .ps-nav-square {
        width: 16px;
        height: 24px;
    }
    .ps-nav-square span {
        width: 16px;
        height: 16px;
    }
    .ps-nav-container .ps-nav-square span::after {
        display: none;
    }

    .main-content-1 {
        transform: translateY(10vh);
    }

    .learn-link {
        display: inline-block;
        margin-bottom: 3%;
    }
    .learn-btn {
        display: inline-block;
        margin-top: 15px;
        margin-bottom: 7%;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 2px;
        transition: all .4s ease-in-out;
    }

    .icon-btn-1 {
        width: 15%;
    }
    .canvas {
        position: absolute;
        z-index: 3;
        bottom: 22vh;
        right: 0;
        opacity: 0.6!important;
        animation: all 1s ease-out;
    }

    /* Page 1 */
    .first .logo-239bits-img {
        max-width: 98px;
    }
    .ps-text-container {
        top: 16%;
        margin-left: 15px;
        margin-right: 15px;
    }
    .ps-text-container h2 {
        font-size: 2.3rem;
    }
    .ps-link-container {
        top:50.9%;
    }
    .ps-link-container .animation-container1 {
        width: 100%;
        margin-bottom: 8%;
    }
    .ps-link-container .animation-container1:last-child {
        margin-bottom: 0;
    }
    .ps-link-container a {
        font-size: 1rem;
    }

    /* Page 2 */
    .business .all-squares-animate {
        height: calc(100vh / 3.7);
    }
    .business .square-animate {
        width: 87.3%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .active-square .start-w-delay .number-animate-1 {
        font-size: 5rem;
    }
    .business .all-squares-animate .square-animate:first-child div p:nth-child(2) {
        letter-spacing: -0.02em;
    }
    .business .active-square .number-animate-2 {
        font-size: 5rem;
        width: 150px;
    }
    .business .percent-1 {
        font-size: 5rem;
        line-height: 100%;
    }
    .active-square .number-animate-3 {
        font-size: 5rem;
    }
    .business .all-squares-animate .square-animate:nth-child(3) div p:nth-child(2) {
        letter-spacing: -0.02em;
    }

    /* Page 3 */
    .partnership .square-animate {
        padding-left: 0;
        padding-right: 8%;
    }
    .partnership .square-animate:first-child .container {
        padding-left: 10px;
        padding-right: 0;
    }
    .partnership .icon-txt-1 {
        font-size: .8rem;
        text-align: left;
    }
    .partnership .sol-test-txt {
        letter-spacing: -0.02em;
        word-spacing: -0.1em;
    }
    .partnership .great-teamwork {
        width: 39vh;
    }

    /* Page 4 */
    .solutions .square-animate {
        padding-left: 10px;
        padding-right: 10px;  
        width: 87.4%;
    }
    .solutions-txt-container {
        margin-top: 5px;
        padding-top: 8px;
    }
    .solutions-txt-container p:nth-child(2) {
        text-align: center;
    }
    .solutions-description2-txt {
        letter-spacing: 0;
        word-spacing: 0;
    }
    .solutions-txt-container + .col-lg-7 {
        text-align: center;
    }
    .solutions .great-teamwork {
        width: 37vh;
    }
    .solutions .shadow-2 {
        transform: translate(8vh, 0vh);
        width: calc(60%);
        height: calc(89vw / 3);
    }
    .bg-darkblue-radial-gr-3 {
        background: -moz-linear-gradient(241deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 67%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: -webkit-linear-gradient(241deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 67%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
        background: linear-gradient(241deg, rgba(29,5,83,1) 0%, rgb(48 7 90) 38%, rgba(117,16,146,1) 67%, rgba(29,5,83,1) 100%) 0% 0% no-repeat padding-box;
    }
    
    /* Page 5 */
    .blockchain .all-squares-animate {
        height: calc(100vh / 2.9);
    }
    .blockchain .square-animate {
        width: 87.3%;
    }	
    .active-square .start-w-delay .number-animate-4 {
        width: 155px;
        font-size: 5rem;
        line-height: 100%;
    }
    .blockchain .square-1-txt-2 {
        letter-spacing: 0.02em;
    }
    .active-square .txt-game-typed {
        font-size: 3rem;
    }
    .active-square .number-animate-5 {
        font-size: 5rem;
        line-height: 100%;
    }

    /* Page 6 */
    .contact .main-content-1 .col-12 {
        padding-right:9%;
    }
}