@font-face {
    font-family: "Lato-Semibold";
    src: url("../font/lato-semibold.woff") format("woff");
}

.icons {
    position: absolute;
}

.container {
    width: 80%;
    margin: auto;
    font-size: 16px;
    font-family: Lato-Regular;
    letter-spacing: normal;
    color: #5f5e5e;
    position: relative;
}

.container .left-bg,
.container .right-bg,
.container .middle-bg-left {
    position: absolute;
}

.container .left-bg {
    top: 4.25vw;
    left: -13%;
    width: 17.25vw;
    z-index: -1;
}

.container .right-bg {
    top: 23.25vw;
    left: 61vw;
    width: 29.25vw;
    z-index: -1;
}

.container>p {
    text-align: center;
}

.container>h2 {
    text-align: center;
    background-image: linear-gradient(180deg, #51d9de, #7ad7f9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container>* .title {
    font-family: "Lato-Semibold";
    color: #f27405;
    font-size: 20px;
    letter-spacing: normal;
}

.container>* p {
    letter-spacing: normal;
}

@media screen and (min-width:1600px) {
    .container {
        font-size: 1vw;
    }
}

@media screen and (max-width:1024px) {
    .container {
        width: 90%;
    }
}

@media screen and (max-width:600px) {
    .container {
        width: 95%;
    }
}

.container .section1 {
    display: flex;
    margin-bottom: 12em;
}

@media screen and (min-width:1600px) {
    .container .section1 {
        margin-bottom: 8vw;
    }
}

@media screen and (max-width:1024px) {
    .container .section1 {
        flex-direction: column-reverse;
        margin-bottom: 3em;
    }
}

.container .section1 .section1Left {
    margin: 5em 0 0 1.5vw;
    width: 49%;
}

@media screen and (min-width:1600px) {
    .container .section1 .section1Left {
        margin-bottom: 5vw;
    }
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Left {
        width: 85%;
        margin: 0 auto 5em;
    }
}

@media screen and (max-width:500px) {
    .container .section1 .section1Left {
        width: 95%;
    }
}

.container .section1 .section1Right {
    position: relative;
}

.container .section1 .section1Right #thumb {
    width: 8%;
    top: 25%;
    left: 15%;
    animation: float 3s linear infinite;
    z-index: 2;
}

.container .section1 .section1Right #heart {
    width: 10%;
    top: 25%;
    left: 80%;
    animation: float 5s linear infinite;
}

.container .section1 .section1Right #twitter {
    top: 20%;
    left: 22%;
    width: 28%;
    z-index: 1;
    animation: slide-left 3s infinite ease;
}

.container .section1 .section1Right #facebook {
    top: 36%;
    left: 57%;
    width: 30%;
    animation: slide-right 3.5s infinite ease;
}

.container .section1 .section1Right #insta {
    top: 57%;
    left: 51%;
    width: 28%;
    animation: slide-right 3.2s infinite ease;
}

.container .section1 .section1Right #tiktok {
    top: 61%;
    left: 23.5%;
    width: 28%;
    animation: slide-left 3.1s infinite ease;
}

.container .section1 .section1Right #youtubeBanner {
    top: 77%;
    left: 20%;
    width: 23%;
    animation: slide-right 2.8s infinite linear;
}

.container .section1 .section1Right #section1 {
    width: 100%;
}

.container .section1 .section1Right #card1Mobile {
    display: none;
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right #card1Mobile {
        width: 70%;
        display: block;
        margin: 0 auto;
    }
}

@media screen and (max-width:500px) {
    .container .section1 .section1Right #card1Mobile {
        width: 100%;
    }
}

.container .section1 .section1Right #card1 {
    top: -43%;
    width: 17.563vw;
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right #card1 {
        display: none;
    }
}

.container .section1 .section1Right #card2 {
    width: 20.07vw;
    top: -5vw;
    left: 19vw;
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right #card2 {
        display: none;
    }
}

.container .section1 .section1Right #card3 {
    top: 6vw;
    left: 8vw;
    width: 18.75vw;
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right #card3 {
        display: none;
    }
}

.container .section1 .section1Right #card4 {
    top: 9vw;
    left: 27.5vw;
    width: 24.5vw;
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right #card4 {
        display: none;
    }
}

@media screen and (max-width:1024px) {
    .container .section1 .section1Right {
        display: block;
        width: 85%;
        margin: 0 auto 2em;
    }
}

@media screen and (max-width:500px) {
    .container .graphicDesignSection1 {
        margin-bottom: 0;
    }
}

.container .section2 {
    display: flex;
    justify-content: space-around;
}

@media screen and (max-width:1024px) {
    .container .section2 {
        flex-direction: column;
    }
}

.container .section2 .section2Left {
    width: 30%;
}

.container .section2 .section2Left .customisedImgWrapper {
    position: relative;
    width: 85%;
}

.container .section2 .section2Left .customisedImgWrapper .customisedImg {
    width: 100%;
}

.container .section2 .section2Left .customisedImgWrapper .leftSquare {
    width: 100%;
    left: -50%;
    top: -7%;
    z-index: -1;
    animation: float 6s linear infinite;
}

.container .section2 .section2Left .customisedImgWrapper .blueSquare {
    width: 100%;
    top: 0%;
    left: 32%;
    z-index: -1;
    animation: float 5s linear infinite;
}

.container .section2 .section2Left .customisedImgWrapper .circle {
    width: 100%;
    bottom: -15%;
    left: 35%;
    z-index: -1;
    animation: float 7s linear infinite;
}

.container .section2 .section2Left .customisedImgWrapper .brush {
    width: 35%;
    bottom: 0;
    left: 0;
    animation: shake 3s infinite reverse linear;
}

@media screen and (max-width:1024px) {
    .container .section2 .section2Left {
        width: 55%;
        margin: 0 auto 5em;
        transform: translateX(5vw);
    }
}

@media screen and (max-width:600px) {
    .container .section2 .section2Left {
        width: 70%;
        margin: 0 5vw 7em;
    }
}

@media screen and (max-width:500px) {
    .container .section2 .section2Left {
        width: 90%;
        margin: 0 auto 4em;
    }
}

.container .section2 .section2Right {
    position: relative;
    justify-content: center;
    width: 45%;
}

@media screen and (max-width:1024px) {
    .container .section2 .section2Right {
        width: 75%;
        margin: 0 auto 5em;
    }
}

@media screen and (max-width:500px) {
    .container .section2 .section2Right {
        margin: 0 auto;
    }
}

@media screen and (max-width:500px) {
    .container .section2 .section2Right {
        width: 90%;
    }
}

.container .section2 .section2Right .text {
    position: relative;
}

.container .section2 .section2Right .text .triangles {
    min-width: 80px;
    width: 17.5%;
    bottom: 105%;
}

.container .section2 .section2Right .text .eraser {
    min-width: 45px;
    width: 10%;
    top: 90%;
    right: 0;
    animation: shake 2s infinite reverse linear;
}

.container .section2 .section2Right .text .TIcon {
    width: 22%;
    bottom: 45%;
    right: -20%;
}

@media screen and (max-width:600px) {
    .container .section2 .section2Right .text .TIcon {
        min-width: 80px;
        width: 22%;
        bottom: 170%;
        right: -10%;
    }
}

@media screen and (max-width:1024px) {
    .container2 {
        width: 90%;
    }
}

.container2 .section1 {
    justify-content: space-around;
    align-items: center;
    margin-bottom: 3em;
}

@media screen and (max-width:500px) {
    .container2 .section1 {
        margin-bottom: 3em;
    }
}

.container2 .section1 .section1Left {
    margin: 1em 1.5vw 0 1.5vw;
}

@media screen and (max-width:1024px) {
    .container2 .section1 .section1Left {
        margin: 0 auto;
    }
}

.container2 .section1 .section1Right {
    position: relative;
    width: 26%;
}

@media screen and (max-width:1024px) {
    .container2 .section1 .section1Right {
        width: 75%;
    }
}

@media screen and (max-width:500px) {
    .container2 .section1 .section1Right {
        width: 90%;
    }
}

@keyframes pointer {
    24% {
        transform: scale(1);
    }

    25% {
        top: 74%;
        left: 45%;
    }

    26% {
        transform: scale(.8);
    }

    28% {
        transform: scale(1);
    }

    49% {
        transform: scale(1);
    }

    50% {
        top: 27%;
        left: 22%;
    }

    51% {
        transform: scale(.8);
    }

    53% {
        transform: scale(1);
    }

    74% {
        transform: scale(1);
    }

    75% {
        top: 53%;
        left: 75%;
    }

    76% {
        transform: scale(.8);
    }

    78% {
        transform: scale(1);
    }

    100% {
        top: 83%;
        left: 69%;
    }
}

@keyframes graph2 {
    24.99% {
        z-index: 1;
    }

    25% {
        z-index: 2;
        transform: scale(1);
    }

    28.5% {
        transform: scale(1.1);
    }

    32% {
        transform: scale(1);
    }

    50% {}

    74.99% {
        z-index: 2;
    }

    75% {
        z-index: 1;
    }

    100% {}
}

@keyframes chart {
    25% {}

    49.99% {
        z-index: 1;
    }

    50% {
        z-index: 3;
        transform: scale(1);
    }

    53.5% {
        transform: scale(1.1);
    }

    57% {
        transform: scale(1);
    }

    74.99% {
        z-index: 3;
    }

    75% {
        z-index: 1;
    }

    100% {}
}

@keyframes graph1 {
    25% {}

    50% {}

    74.99% {
        z-index: 1;
    }

    75% {
        z-index: 4;
        transform: scale(1);
    }

    78.5% {
        transform: scale(1.1);
    }

    82% {
        transform: scale(1);
    }

    99.99% {
        z-index: 4;
    }

    100% {
        z-index: 1;
    }
}

.container2 .section1 .section1Right .customisedImgWrapper {
    width: 77%;
    margin: auto;
    position: relative;
    margin: 3em 0 0;
}

@media screen and (max-width:1024px) {
    .container2 .section1 .section1Right .customisedImgWrapper {
        width: 80%;
        margin-top: 2.5em;
    }
}

.container2 .section1 .section1Right .customisedImgWrapper>* {
    width: 100%;
}

.container2 .section1 .section1Right .customisedImgWrapper #bg-2 {
    width: 100%;
    display: flex;
}

.container2 .section1 .section1Right .customisedImgWrapper #isowindow {
    top: -4%;
    left: 15%;
    width: 78%;
}

.container2 .section1 .section1Right .customisedImgWrapper #border {
    top: 10%;
    left: 4%;
    width: 76%;
}

.container2 .section1 .section1Right .customisedImgWrapper #triangle2-1 {
    top: 0%;
    left: 56%;
    width: 25%;
}

.container2 .section1 .section1Right .customisedImgWrapper #triangle2-2 {
    top: 12%;
    left: 57%;
    width: 45%;
}

.container2 .section1 .section1Right .customisedImgWrapper #orangeball {
    top: 40%;
    left: -2%;
    width: 12%;
    animation: float 4s linear infinite;
}

.container2 .section1 .section1Right .customisedImgWrapper #chart {
    top: 0%;
    left: 9%;
    width: 40%;
    z-index: 1;
    animation: chart 6s infinite;
}

.container2 .section1 .section1Right .customisedImgWrapper #graph2 {
    top: 47%;
    left: 20%;
    width: 40%;
    z-index: 1;
    animation: graph2 6s infinite;
}

.container2 .section1 .section1Right .customisedImgWrapper #graph1 {
    top: 25%;
    left: 30%;
    width: 55%;
    z-index: 1;
    animation: graph1 6s linear infinite;
}

.container2 .section1 .section1Right .customisedImgWrapper #pointer {
    top: 83%;
    left: 69%;
    width: 8%;
    animation: 6s pointer infinite;
    z-index: 6;
}

@media screen and (max-width:1024px) {
    .container2 .section2 .section2Left {
        width: 75%;
        margin: 0 auto;
        transform: none;
    }
}

@media screen and (max-width:500px) {
    .container2 .section2 .section2Left {
        margin: 0 auto;
        width: 95%;
        margin-top: -20%;
    }
}

@keyframes window {
    0% {
        transform: scale(0);
    }

    15% {
        transform: scale(1.1);
    }

    18.5% {
        transform: scale(1);
    }

    65% {
        transform: scale(1);
    }

    68.5% {
        transform: scale(1.1);
    }

    80% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.container2 .section2 .section2Left .customisedImgWrapper {
    width: 55%;
    margin: auto;
    margin-top: 2.5em;
    position: relative;
}

@media screen and (max-width:1024px) {
    .container2 .section2 .section2Left .customisedImgWrapper {
        margin-top: 3em;
        margin-bottom: .5em;
    }
}

.container2 .section2 .section2Left .customisedImgWrapper>* {
    width: 100%;
}

.container2 .section2 .section2Left .customisedImgWrapper #monitor {
    margin: auto;
    width: 100%;
}

.container2 .section2 .section2Left .customisedImgWrapper #dot1 {
    top: 56%;
    left: -16%;
    width: 2%;
    animation: 2s window infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #dot2 {
    top: -25%;
    left: 3%;
    width: 2%;
    animation: 4s float infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #dot3 {
    top: -30%;
    left: 51%;
    width: 2%;
    animation: 3s window infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #dot4 {
    top: 72%;
    left: 106%;
    width: 2%;
    animation: 3s float infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #line-left {
    top: -15%;
    left: -18%;
    width: 20%;
}

.container2 .section2 .section2Left .customisedImgWrapper #line-right {
    top: -32%;
    left: 77%;
    width: 33%;
}

.container2 .section2 .section2Left .customisedImgWrapper #image {
    top: 14%;
    left: 56%;
    width: 69%;
    animation: 6s window infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #doc {
    top: -21%;
    left: 74%;
    width: 53%;
    animation: 6s float infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #code {
    top: 4%;
    left: -18%;
    width: 50%;
    animation: 2s slide-left infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #cms {
    top: -25%;
    left: -5%;
    width: 60%;
    animation: 10s float infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #menu {
    top: 54%;
    left: -15%;
    width: 67%;
    animation: 4s slide-right infinite;
}

.container2 .section2 .section2Left .customisedImgWrapper #gearshadow {
    top: -16%;
    left: 51%;
    width: 30%;
}

.container2 .section2 .section2Left .customisedImgWrapper #gear {
    top: -27%;
    left: 51%;
    width: 30%;
    animation: 8s spin infinite;
}

.container2 .section2 .section2Right {
    position: relative;
}

@media screen and (max-width:1024px) {
    .container2 .section2 .section2Right {
        width: 85%;
    }
}

.container2 .section2 .section2Right #videoplayer {
    width: 100%;
}

@keyframes expand {
    0% {
        transform: scale(0, 0);
    }

    50% {
        transform: scale(1.25, 1.25);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes clickJitter {
    0% {
        transform: scale(.7, .7);
    }

    30% {
        transform: scale(1, 1);
    }

    70% {
        transform: scale(1, 1);
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(20%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-left {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(-20%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes pulse {
    10% {
        transform: scale(1.1) rotate(355deg);
    }
}

@keyframes pulsecolor {
    10% {
        fill: #d00;
    }
}