body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
body.bg {
    background: rgb(0,0,0);
    background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(63,34,103,1) 100%);
    height: 100vh;
    overflow: hidden;
}
.bannerSec {
    height: 100%;
    width: 100%;
    position: absolute;
}
.bannerSec .bannerContent {
    width: 50%;
    left: 150px;
    top: 46%;
    position: absolute;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
}
.bannerContent::before {
    background: -webkit-linear-gradient(#FDDB07, #F4911E);
    content: "";
    position: absolute;
    left: -38px;
    height: 92%;
    width: 18px;
    top: 12px;
}
.bannerImg {
    position: absolute;
    right: 0;
    top: 50px;
    width: 50%;
    text-align: center;
}
.bannerImg img {
    max-width: 500px;
}
.bannerContent h1 {
    font-size: 72px;
    background: -webkit-linear-gradient(#FDDB07, #F4911E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.bannerContent p {
    font-size: 38px;
    color: #fff;
    line-height: 50px;
    max-width: 700px;
}
.comingSoonSec {
    position: absolute;
    bottom: 20%;
    width: 100%;
    text-align: center;
}
.comingSoonSec h4 {
    color: #FDDA07;
    display: inline-block;
    text-transform: uppercase;
}
.comingSoonSec h4::before {
    content: url(../images/line.svg);
    position: absolute;
    margin-left: -434px;
    top: -8px;
}
.comingSoonSec h4::after {
    content: url(../images/line.svg);
    position: absolute;
    margin-left: 0px;
    top: -14px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.socialLinks {
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    text-align: center;
}
.socialLinks span {
    margin: 0 12px;
}
.socialLinks span a {
    opacity: 0.4;
}
.socialLinks span a:hover {
    opacity: 0.8;
}

@media screen and (max-width:560px) {
    .bannerSec .bannerContent {
        width: 80%;
        left: 50px;
        top: 10%;
        position: relative;
        transform: unset;
        -webkit-transform: unset;
    }
    .bannerContent::before {
        background: -webkit-linear-gradient(#FDDB07, #F4911E);
        content: "";
        position: absolute;
        left: -38px;
        height: 96%;
        width: 18px;
        top: 6px;
    }
    .bannerContent h1 {
        font-size: 40px;
        background: -webkit-linear-gradient(#FDDB07, #F4911E);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        width: 100%;
    }
    .bannerContent p {
        font-size: 24px;
        color: #fff;
        line-height: 32px;
        max-width: unset;
        margin: 0;
        width: 100%;
    }
    .bannerImg {
        position: absolute;
        right: 0;
        top: 24%;
        width: 100%;
        text-align: center;
        left: 0;
        margin: auto;
    }
    .bannerImg img {
        max-width: 100%;
    }
    .comingSoonSec {
        position: absolute;
        bottom: 20%;
        width: 100%;
        text-align: center;
    }
    .comingSoonSec h4::before {
        margin-left: unset;
        top: -34px;
        left: 0;
        width: 180px;
        overflow: hidden;
        right: 0;
        margin: auto;
    }
    .comingSoonSec h4::after {
        margin-left: unset;
        top: 12px;
        right: 0;
        width: 180px;
        overflow: hidden;
        margin: auto;
        left: 0;
    }
    .socialLinks span img {
        width: 28px;
    }
    .socialLinks span {
        margin: 0 8px;
    }
}
@media screen and (min-width:1600px) {
    .bannerSec .bannerContent {
        width: 50%;
        left: 200px;
        top: 50%;
        position: absolute;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
    }
    .bannerContent h1 {
        font-size: 90px;
    }
    .bannerContent p {
        font-size: 65px;
        line-height: 75px;
        max-width: 700px;
    }
    .bannerImg {
        top: 0;
        text-align: center;
    }
    .bannerImg img {
        max-width: unset;
    }
    .comingSoonSec {
        bottom: 16%;
    }
}






/* Partcle css */
/* ---- reset ---- */ canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: transparent; background-image: url("https://lh3.googleusercontent.com/sTB_L0AXb5XI-wgJAEJ9lt3vHsUg0W9xmyvRMqzM-mtCN7tI3Ro0fhUQ6bsjhH8vhkubesaUIj-0AK1JVrVtbvR33kOaybt8sr6Un3u4lRoDQi33DiGvh9RI7AGRiSgVJk6Tzz61GhiWoWnWw7oP-8UiMIupWZq6gTT_Ec2jNR_8LDHOcSxr8uQ-k_OARCD9TlOpzc06EE2l8D7Bk5OBTYsODRujO0vJEpZUW1MY0zPruuM2M9RZYXwzJiiretkOPMnzsWKwnpMCVDfRaX8AyOrcXR4PCFES1ftkTFBCqUxuQBopND25owVDW1uUuFbjcLzAH3YEZyKwbNtVcD-Lcb13xduoqQbhBfTJWvUOjr_4n9xXhGgM2zWCJN12MDzVid9p4Dtr6SGjMZgKJMVHS75IhIb5DZFe0vppbnf-W_irO7A5F_GX1i15dHc4-heZ64L22mwQZivOagY-VATGjr2KOZMq4BgRKPZ66E6x3dE03RSa3Wzeagmuq2_8CnxXI_0JUVv6WOVxia9vu-c7oy93l22KGQni-X8dp6e-Cin_ykGIqOql9YDmvmptxb_0lGtsmXbwupEZILgfUuWudTZFOvTEgH4wMiZLuEGKUvEsjZ5-GLJAHvSEFO79RpFKloXJCB2SevgYXj4WiilqK6J00ImuRGIgJnZ9qWhbI2u5KeM_8fIZNLgwyzTWbA=w1920-h937-ft"); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }