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

:root {
    --flow: linear-gradient(
        45deg,
        #C5C6C7,
        #1F2833,
        #45A29E,
        #757985,
        #66FCF1,
        #0B0C10
    );

    --antiflow: linear-gradient(
        #0B0C10,
        #66FCF1,
        #757985,
        #45A29E,
        #1F2833,
        #C5C6C7,
    );
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{
    background-color: #1f2833;
}


.nav-bar{
    display: flex;
    height: 8vh;
    align-items: center;
    justify-content: space-between;
    color: #C5C6C7;
    background-color: #1F2833;
    animation: nav 3s ease-in;
    animation-fill-mode: forwards;
    transition: box-shadow 0.5s, background-color 0.75s;
}

@keyframes nav {
    0% {
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}

.nav-bar:hover {
    background-color: #273546d7;
    box-shadow: 0 1px 10px #C5C6C7;
}

.nav-logo{
    display: flex;
    align-items: center;
}

.nav-logo p{
    display: flex;
    font-size: 2.6vh;
    transition: 0.5s;
}

.nav-logo p:hover {
    color: #45A29E;
    cursor:default;
    text-shadow: 0 1px 10px #45A29E;
}

.logo{
    padding-left: 0.2rem; padding-right: 0.2rem;
    border-radius: 3rem;
    width: 4vh;
    height: 4vh;
    transition: 1s;
}

.logo:hover {
    background-color: white;
    box-shadow: 0px 0px 40px white, 0px 0px 80px white, 0px 0px 110px white;
}

.nav-bar ul{
    display: flex;
    list-style: none;
    text-decoration: none;
}

.nav-elements li{
    margin: 1vw;
}

.menu a{
    display: flex;
    position: relative;
    text-decoration: none;
    color: #c5c6c7;
    letter-spacing: 0.5px;
    font-size: 2.5vh;
    padding: 0.5vh;
}

.menu a::after{
    content: "";
    position: absolute;
    background-color: #66fcf1;
    height: 3px;
    width: 0;
    left: 0;
    bottom: -1px;
    transition: 0.5s;
}

.menu a:hover::after{
    width: 100%;
}
.menu a:hover{
    color: white;
    text-shadow: 0 0 20px;
}
/* -------------------------- */

main {
    background-color: #1f2833;
}

.page-description{
    color: rgba(0,0,0,0);
    margin: 12vh 0 100vh 0;
    text-align: center;
    font-size: 10vh;
    justify-content: center;
    font-weight: bold ;
    background-image: var(--flow);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200%;
    background-position: left;
    animation: motion 10s infinite alternate;
}

#text1{
    font-family: consolas;
    padding-right: 16vw;
    display: block;
    animation: slide-right 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes slide-right {
    0% {
        padding-right: 60vw;
    }100% {
        padding-right: 18vw;
    }
}

#text2 {
    color: #C5C6C7;
    animation: fade 5s ease-out;
    animation-fill-mode: forwards;
}

@keyframes fade {
    0% {
        opacity: 0;
    }100% {
        opacity: 0.8;
    }
}

#text3{
    font-family: consolas;
    padding-left: 16vw;
    display: block;
    animation: slide-left 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes slide-left {
    0% {
        padding-left: 60vw;
    }100% {
        padding-left: 18vw;
    }
}

@keyframes motion {
    0% {
        background-position: left;
    }100% {
        background-position: right;
    }
}

/* ============================= Stacked Cards =============================== */

.container{
    position: absolute;
    height: 60vh;
    width: 40vw;
    display: inline-block;
    top: 105vh;
    left: 30.5%;
}

.container .card{
    position: absolute;
    top: -10%;
    left: -5%;
    width: 22vw;
    height: 32vw;
    background: antiquewhite;
    border-radius: 10px;
    transform: translateX(50%) translateY(calc(5vw * var(--i))) rotate(40deg) skew(-20deg, -10deg) scale(0.6);
    box-shadow: 25px 25px 100px rgba(0,0,0,0.2);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .card:nth-child(2){
    opacity: 0.8;
}

.container .card:nth-child(1){
    opacity: 0.6;
}

.container:hover .card{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    opacity: 1;
    transform: translateX(calc(-50% + calc(30vw * var(--i)))) translateY(-50%) rotate(0deg) skew(0deg, 0deg) scale(1);
    box-shadow: 10px 10px 10px black;
}

.card .content{
    position: relative;
    padding: 25px;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(50px);
}

.container:hover .card .content{
    opacity: 1;
    transition-delay: calc(0.2s * var(--j));
    transform: translateY(0px);
}


/* .container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 20vh 0;
}

.container .card{
    position: relative;
    width: 22vw;
    height: 32vw;
    margin: 8vh 4vh 3vh 4vh;
    box-shadow: 0px 0px 15px #1f2833;
    border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
} */

#box1 {
    background-image: var(--flow);
    background-size: 300%;
    background-position: left;
    animation: flow 20s infinite alternate;
}

#box2 {
    background-image: var(--flow);
    background-size: 300%;
    background-position: left;
    animation: flow 20s infinite alternate;
}

#box3 {
    background-image: var(--flow);
    background-size: 300%;
    background-position: left;
    animation: flow 20s infinite alternate;
}

@keyframes flow {
    0%{
        background-position: left;
    } 100% {
        background-position: right;
    }
}

 .container .card .content
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(50px);
    flex-direction: column;
}

.container .card .content .imagebox
{
    position: relative;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    overflow: hidden;
    animation: extend 2s ease-in;
    transition: width 1.25s ease-in;
}

.container .card .content .imagebox img
{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container .card .content .content_box h3{
    color: black;
    font-weight: 200;
    font-size: 3vh;
    text-align: center;
    margin: 4vh 0 8vh;
    font-weight: bold;
}

.container .card .content .content_box h3 span{
    font-weight: 300;
    font-size: 4vh;
    text-align: center;
}
/* ==========================prop=========================== */

.float {
    margin-top: 16vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
    -webkit-clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
    background: #667574;
    transition: 1s;
}

/* .float-box {
    transition-duration: 1s;
    border-radius: 14rem;
    /* box-shadow: 0 0 20px #66fcf1, 0 0 40px #66fcf1, 0 0 80px #66fcf1;
} */

.float:hover {
    border-radius: 14rem;
    box-shadow: 0 0 20px #66fcf1, 0 0 40px #66fcf1, 0 0 80px #66fcf1;
}

.prop div{
    position: absolute;
    height: 35vh;
    width: 60vh;
    transform: rotate(-30deg) skew(25deg) scale(0.8);
    background: #1F2833;
    transition: 1s;
}

.prop {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    transition: 1s;
}

.prop div:nth-child(1) {
    opacity: 1;
}
.prop div:nth-child(2) {
    opacity: 0;
}
.prop div:nth-child(3) {
    opacity: 0;
}

.prop div:nth-child(4) {
    opacity: 0;
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 2rem;
    letter-spacing: 2px;
    color: #1F2833;
}

.float:hover .prop div:nth-child(4){
    color: #C5C6C7;
    transform: translate(6vh, -6vh);
    opacity: 1;
}

.float:hover .prop div:nth-child(3){
    transform: translate(4vh, -4vh);
    opacity: .8;
}

.float:hover .prop div:nth-child(2){
    transform: translate(2vh, -2vh);
    opacity: .6;
}

.float:hover .prop div:nth-child(1){
    transform: translate(0, 0);
    opacity: .4;
}

/* ==========================/prop========================= */

/* =======================Get Started======================= */

.center {
    display: block;
    margin: 16vh 0 16vh 0;
    height: 80vh;
    width: 100%;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-color: #667574;
    transition: 1s;
}

.center:hover {
    cursor: default;
    border-radius: 16rem;
    box-shadow: 0 0 20px #66fcf1, 0 0 40px #66fcf1, 0 0 80px #66fcf1;
}

.center .p {
    text-align: center;
    transform: translateY(20vh);
    padding: 10vh 0 2vh 0;
    color: #c5c6c7;
    text-transform: uppercase;
    display: block;
    font-size: 16px;
    letter-spacing: 2px;
    transition: 1s;
}

.center:hover .p {
    transform: translateY(0);
    cursor: default;
    color: #66fcf1;
    text-shadow: 0 3px 15px whitesmoke;
}

/* ------------------------------------ */

.center p {
    display: flex;
    justify-content: center;
    letter-spacing: 1px;
    text-decoration: solid;
    line-height: 4.5vh;
    color: whitesmoke;
    opacity: 0;
    transition: 1.5s;
}

.center:hover p{
    opacity: 1;
    text-shadow: 0 3px 15px #fff;

}

.ideas {
    font-weight: bold;
    text-align: center;
    margin-top: 5vh;
    opacity: -1;
    text-transform: uppercase;
    list-style-type: square;
    color: white;
    text-shadow: 0px 1px 5px #C5C6C7;
    transform: translateY(10vh);
    transition: 1s;
}

.center:hover .ideas {
    letter-spacing: 2px;
    transform: translateY(0);
    opacity: 1;
}

/* ------------------------------------ */

.center a {
    position: absolute;
    display: inline-block;
    padding: 20px 10px;
    margin-left: 45%;
    text-decoration: none;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 1em;
    color: #757985;
    background: #1F2833;
    overflow: hidden;
    transform: translateY(0.1rem);
    transition: 1s;
}

.center:hover a {
    transform: translateY(22.5vh);
}

.center a:hover {
    color: white;
    background-color: #0B0C31;
    box-shadow: 0 0 30px #0B0C31, 0 0 60px #0B0C31, 0 0 90px #0B0C31;
    transition-delay: 1s;
}

.center a span {
    position: absolute;
    display: block;
}

.center a span:nth-child(1) {
    top: 0;
    left: -100%;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg,transparent,white);
}

.center a:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
}

.center a span:nth-child(2) {
    right: 0;
    top: -100%;
    height: 100%;
    width: 2px;
    background: linear-gradient(180deg,transparent,white);
}

.center a:hover span:nth-child(2) {
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}

.center a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    height: 2px;
    width: 100%;
    background: linear-gradient(270deg,transparent,white);
}

.center a:hover span:nth-child(3) {
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}

.center a span:nth-child(4) {
    left: 0;
    bottom: -100%;
    height: 100%;
    width: 2px;
    background: linear-gradient(360deg,transparent,white);
}

.center a:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}

/* =======================/Get Started====================== */
/* =======================Clippath Hover=================== */

.title {
    margin-top: 4em;
    height: 65vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    color: black;
    background-color: #f3f3f3;
    box-shadow: 0 0 20px #1F2833;
}

.title:hover {
    background-color: #1F2833;
    width: 100%;
    box-shadow: 0 0 20px #66fcf1, 0 0 40px #66fcf1, 0 0 80px #66fcf1;
}

.title h1 {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    font-size: 8em;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.title h1:nth-child(1){
    position: absolute;
    letter-spacing: 0.20em;
}

.title h1:nth-child(2) {
    background-color: #f3f3f3;
    transition: 1s;
    color: #fff;
    overflow: hidden;
    z-index: 2;
    /* transition: 0.1s; */
    clip-path: polygon(0 0, 75% 20%, 0 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 75% 20%, 0 100%, 0% 100%);

}

.title:hover h1:nth-child(2) {
    overflow: hidden;
    background-color: #1F2833;
}

.title h1:nth-child(2):hover {
    clip-path: polygon(0 1%, 100% 0, 99% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 1%, 100% 0, 99% 100%, 0% 100%);
}

.title h1:nth-child(1):hover ~ h1 {
    -webkit-clip-path: polygon(0 1%, 100% 0, 100% 0, 0 0); 
    clip-path: polygon(0 1%, 100% 0, 100% 0, 0 0);
}

/* ========================================================= */
footer{
    background-color: rgba(0,0,0,0);
    padding: 1rem 0;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C5C6C7;
    font-size: 2.6vh;
    transition: 1s;
}

footer:hover {
    cursor: default;
    letter-spacing: 3px;
    transform: translateY(-3vh);
}


/* --------------------------Scrollbar-------------------------- */

::-webkit-scrollbar{
    width: 0.75em;
}

::-webkit-scrollbar-track{
    border-radius: 100vw;
    background: #1f2833;
}

::-webkit-scrollbar-thumb{
    background: rgba(128, 128, 128, 0.753);
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover{
    background: #c5c6c7c4;   
}
/* ===========================Media-queries====================== */



@media(max-width: 1024px){
    * {
        font-size: 50%;
    }

    .nav-bar {
        height: 30vh;
    }

    .nav-logo {
        position: relative;
        transform: translateX(2vh) translateY(0);
        font-weight: bold;
        max-width: 98vw;
    }

    .nav-logo p {
        font-size: 3.6rem;
    }

    .menu a {
        display: block;
    }

    .nav-bar ul{
        display: block;
        list-style: none;
        text-decoration: none;
    }

    nav ul li{
        display: block;
        line-height: 4vh;
        transform: translateY(0);
        text-align: right; 
    }

    nav ul li a {
        font-size: 1rem;
    }

    .page-description {
        margin: 5vh 0 10vh 0;
        font-size: 14vh;
    }

    @keyframes slide-left {
        0% {
            padding-left: 30vw;
        }100% {
            padding-left: 18vw;
        }
    }

    @keyframes slide-right {
        0% {
            padding-right: 30vw;
        }100% {
            padding-right: 18vw;
        }
    }

    /* -------------------------------title/float/center---------------------------------------- */

    .title {
        font-size: 2.5vh;
    }

    .float {
        margin-top: 14vh;
        height: 40vh;
    }

    .prop div{
        height: 20vh;
        width: 20vh;
    }

    .center {
        line-height: 0.5vh;
        margin-top: 5vh;
        height: 50vh;
        display: block;
    }

    .center:hover {
        height: 60vh;
    }

    .center p {
        font-size: 2.1rem;
    }

    .center .p {
        font-size: 2.4rem;
    }

    .center a {
        font-size: 2.1rem;
        margin-left: 42vw;
    }

    .center ul li {
        font-size: 2.1rem;
    }

    .center:hover a {
        transform: translateY(10vh);
    }


/* -------------------------CARD------------------------ */
    .container {
        display: flex;
        position: relative;
        width: 40vw;
        display: inline-block;
        /* margin-bottom: 16vh; */
        margin-left: 30%;
        
    }

    .container .card {
        position: absolute;
        display: block;
        height: 45vh;
        width: 35vh;
        left: -25vh;
        transform: translateY(-100vh);
    }
}




@media(max-width: 786px){
    * {
        font-size: 40%;
    }

    .nav-logo {
        transform: translateX(3vh) translateY(11vh);
        font-weight: bold;
        max-width: 90vw;
    }

    .nav-logo p {
        font-size: 3rem;
    }

    .nav-bar {
        display: block;
        height: 30vh;
    }

    .nav-bar ul{
        
        list-style: none;
        text-decoration: none;
    }

    nav ul li{
        display: block;
        line-height: 4vh;
        transform: translateY(-3.5vh);
        text-align: right; 
    }

    nav ul li a {
        font-size: 1rem;
    }

    .menu a {
        display: inline-block;
    }

    .page-description {
        margin: 12vh 0 50vh 0;
        font-size: 14vh;
    }

    @keyframes slide-left {
        0% {
            padding-left: 30vw;
        }100% {
            padding-left: 18vw;
        }
    }

    @keyframes slide-right {
        0% {
            padding-right: 30vw;
        }100% {
            padding-right: 18vw;
        }
    }

    /* -------------------------------title/float/center---------------------------------------- */

    .title {
        font-size: 2vh;
    }

    .float {
        margin-top: 10vh;
        height: 55vh;
        clip-path: none;
    }

    .prop div{
        height: 30vh;
        width: 30vh;
    }

    .center {
        line-height: 2.5vh;
        margin-top: 10vh;
        height: 55vh;
        clip-path: none;
        display: block;
    }

    .ideas {
        list-style: none;
    }

    .center p {
        display: flex;
        justify-content: space-between;
        margin-left: 2vh;
        font-size: 2.4rem;
        line-height: 3rem;
    }

    .center:hover {
        height: 70vh;
    }

    .center .p {
        font-size: 1.8rem;
    }

    .center a {
        margin-left: 30%;
    }

    .center:hover a {
        transform: translateY(18vh);
    }


/* -------------------------CARD------------------------ */
    .container {
        position: relative;
        width: 40vw;
        display: inline-block;
        /* margin-bottom: 16vh; */
        margin-left: 25%;
        
    }

    .container:hover {
        display: block;
    }

    .container .card {
        display: block;
        height: 45vh;
        width: 35vh;
        left: -20vh;
        transform: translateY(-130vh);
    }
}



@media (max-width: 320px) {
    * {
        font-size: 30%;
    }

    .nav-logo {
        display: inline-block;
        transform: translateX(3vh) translateY(11vh);
        font-weight: bold;
        max-width: 90vw;
    }

    .nav-logo p {
        font-size: 3rem;
    }

    .nav-bar {
        display: block;
        height: 27.5vh;
    }

    .nav-bar ul{
        display: block;
        list-style: none;
        text-decoration: none;
    }

    nav ul li{
        display: block;
        line-height: 4vh;
        transform: translateY(-3.5vh);
        text-align: right; 
    }

    nav ul li a {
        font-size: 1rem;
    }

    .menu a {
        display: inline-block;
    }

    .page-description {
        margin: 12vh 0 50vh 0;
        font-size: 14vh;
    }

    @keyframes slide-left {
        0% {
            padding-left: 30vw;
        }100% {
            padding-left: 18vw;
        }
    }

    @keyframes slide-right {
        0% {
            padding-right: 30vw;
        }100% {
            padding-right: 18vw;
        }
    }

    /* -------------------------------title/float/center---------------------------------------- */

    .title {
        font-size: 2vh;
    }

    .float {
        margin-top: 10vh;
        height: 55vh;
        clip-path: none;
        /* display: block; */
    }

    .prop div{
        height: 22vh;
        width: 22vh;
    }

    .center {
        line-height: 2.5vh;
        margin-top: 10vh;
        height: 65vh;
        clip-path: none;
        display: block;
    }

    .ideas {
        list-style: none;
    }

    .center p {
        margin-left: 2vh;
        font-size: 2.4rem;
        line-height: 2vh;
    }

    .center .p {
        font-size: 2.1rem;
    }

    .center a {
        margin-left: 30%;
    }

    .center:hover a {
        transform: translateY(18vh);
    }


/* -------------------------CARD------------------------ */
    .container {
        position: relative;
        width: 40vw;
        display: inline-block;
        /* margin-bottom: 16vh; */
        margin-left: 25%;
        
    }

    .container:hover {
        display: block;
    }

    .container .card {
        display: block;
        height: 45vh;
        width: 35vh;
        left: -20vh;
        transform: translateY(-130vh);
    }
}