body,
       html {
           margin: 0;
           padding: 0;
           height: 100%;
           font-family: 'Poppins', sans-serif;
           background-color: #3A3A3A;
           overflow: hidden;
           color: #ffffff;
           position: relative;
       }

       .background-image-container {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: 0;
           overflow: hidden;
       }

       .background-image-container img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           object-position: center center;
       }

       .header-logo {
           position: absolute;
           top: 5vh;
           left: 4vw;
           display: flex;
           align-items: center;
           z-index: 2;
       }

       .header-logo img {
           height: 50px;
           width: auto;
       }

       .text-content {
           position: absolute;
           top: 25vh;
           left: 8vw;
           line-height: 1.2;
           box-sizing: border-box;
           width: 50%;
           z-index: 2;
       }

       .step-into-the {
           font-size: 4.5vw;
           font-weight: 400;
           margin: 0;
       }

       .step-into-the .green {
           color: #C8F500;
       }

       .future-word {
           font-size: 12vw;
           font-weight: 500;
           margin: 0;
           white-space: nowrap;
       }

       .future-word .u1,
       .future-word .u2 {
           color: #C8F500;
       }

       .future-word .f,
       .future-word .t,
       .future-word .r,
       .future-word .e {
           color: #ffffff;
       }

       .green-dot {
           color: #C8F500;
           font-weight: 700;
       }

       .loading {
           font-size: 3vw;
           font-weight: 500;
       }

       .background-logo-right {
           position: absolute;
           top: -100px;
           right: 100px;
           z-index: 2;
       }

       .background-logo-right img {
           height: 100vh;
           width: auto;
           object-fit: contain;
       }

       .background-shape-left {
              position: absolute;
              bottom: 0;
              left: -35%;
              z-index: 1;
       }

         .background-shape-left img {
            height: 100vh;
            width: 1500px;
            object-fit: cover;
         }



       /* Responsive: Tablets & Mobile */
       @media (max-width: 1700px) {
        .background-logo-right {
           right: 0;
        }

        .background-shape-left {
            left: -50%;
        }
       }

        @media (max-width: 1400px) {
            .background-shape-left {
                left: -65%;
            }

            .step-into-the {
                font-size: 4vw;
                font-weight: 400;
                margin: 0;
            }

            .future-word {
                font-size: 12vw;
                font-weight: 500;
                margin: 0;
                white-space: nowrap;
            }

            .loading {
                font-size: 3vw;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 80vh;
            }

            .background-logo-right {
                top: -20px;
            }

        }


        @media (max-width: 1400px) {
            .background-shape-left {
                left: -70%;
            }

            .step-into-the {
                font-size: 3.5vw;
                font-weight: 400;
                margin: 0;
            }

            .future-word {
                font-size: 11vw;
                font-weight: 500;
                margin: 0;
                white-space: nowrap;
            }

            .background-logo-right img {
                height: 70vh;
            }

            .background-logo-right {
                top: 50px;
            }

            .text-content {
                top: 35vh;
            }

        }

        @media (max-width: 1200px) {
            .background-shape-left {
                left: -80%;
            }

        }

         @media (max-width: 1000px) {
            .background-shape-left {
                left: -95%;
            }

        }

        @media (max-width: 980px) {
            .background-logo-right img {
                height: 100vh;
            }

            .background-logo-right {
                right: -240px;
                top: 5px;
            }

        }

        @media (max-width: 900px) {
            .background-shape-left {
                left: -110%;
            }

            .step-into-the {
                font-size: 50px;
            }

            .future-word {
                font-size: 120px;
            }

            .loading {
                font-size: 40px;
                font-weight: 500;
            }
        }

        @media (max-width: 700px) {
            .background-shape-left {
                left: -150%;
            }

            .step-into-the {
                font-size: 40px;
            }

            .future-word {
                font-size: 100px;
            }

            .loading {
                font-size: 30px;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 90vh;
            }

            .background-logo-right {
                right: -210px;
                top: 5px;
            }

            .text-content {
                top: 30vh;
            }
        }


        @media (max-width: 650px) {
            .background-shape-left {
                left: -165%;
            }

            .step-into-the {
                font-size: 35px;
            }

            .future-word {
                font-size: 90px;
            }

            .loading {
                font-size: 30px;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 85vh;
            }

            .background-logo-right {
                right: -210px;
                top: 20px;
            }

            .text-content {
                top: 30vh;
            }
        }


        @media (max-width: 550px) {
            .background-shape-left {
                left: -195%;
            }

            .step-into-the {
                font-size: 30px;
            }

            .future-word {
                font-size: 80px;
            }

            .loading {
                font-size: 20px;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 65vh;
            }

            .background-logo-right {
                right: -150px;
                top: 80px;
            }

            .text-content {
                top: 30vh;
            }
        }


        @media (max-width: 450px) {
            .background-shape-left {
                left: -250%;
            }

            .step-into-the {
                font-size: 25px;
            }

            .future-word {
                font-size: 70px;
            }

            .loading {
                font-size: 15px;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 60vh;
            }

            .background-logo-right {
                right: -120px;
                top: 160px;
            }

            .text-content {
                top: 30vh;
            }
        }

        @media (max-width: 450px) {
            .background-shape-left {
                left: -270%;
            }

            .step-into-the {
                font-size: 22px;
            }

            .future-word {
                font-size: 67px;
            }

            .loading {
                font-size: 12px;
                font-weight: 500;
            }

            .background-logo-right img {
                height: 60vh;
            }

            .background-logo-right {
                right: -120px;
                top: 160px;
            }

            .text-content {
                top: 30vh;
            }
        }