/*GET STARTED POP UP  */

        .getStartedPopup{
            position: fixed;
            top: 50%;
            left: -150%;
            width: 40%;
            transform: rotate(260deg);
            display: flex;
            flex-direction: column;
            text-align: center;
            background-color: rgb(9, 83, 102);
            padding: 22px;
            box-shadow: 0px 4px 8px var(--SHADOW-COLOR);
            transition: 1s ease-in-out;
            z-index: 4;
        }

        .getStartedPopup.jumpIn{
           
            left: 50%;
            rotate: 0deg;
            transform: translate(-50%, -50%);
           
        }


        .getStartedPopup h2{
          text-transform: uppercase;
          color:orange;
          text-shadow: 1px 5px 8px var(--SHADOW-COLOR);
        }

        .getStartedPopup .fa{
            color: rgb(9, 111, 137);
            font-size: 1.1rem;
        }

        .getStartedPopup span {
          color: aliceblue;
        }



            /* LOGO SLIDES STYLES STARTS HERE */

            .company-logo-slides{
               
                position: relative;
                background-color: rgb(219, 218, 210);
                width: 90%;
                max-width: 1536px;
                margin-inline: auto;
                height: 100px;
                margin-top: 22px;
                overflow: hidden;
                 mask-image: linear-gradient(
                    to right,
                    rgba(224, 234, 37, 0)5%,
                    rgba(0,0,0,1) ,
                    rgba(0,0,0,0) 95%,
                    rgba(0,0,0,0)
                    ); 
                
                
            }


            .logo{
               
                position: absolute;
               width: 200px;
               height: 100px;
               left: 100%;
               animation-name: scrollleft;
               animation-duration: 20s;
               animation-timing-function: linear;
               animation-iteration-count: infinite;


            }

            @keyframes scrollleft{
                to{
                    left: -200px;
                }
            }


             .logo1{
                animation-delay: calc(20s / 4 * (4 - 1) * -1);
                
                }
                .logo2{
                animation-delay: calc(20s / 4 * (4 - 2) * -1);
                }
                .logo3{
                animation-delay: calc(20s / 4 * (4 - 3) * -1);
                }
                .logo4{
                animation-delay: calc(20s / 4 * (4 - 4) * -1);
                }
                



          /* BOX INFINITE SLIDES */

          .boxInfiniteSlides{
            position: relative;
            background-color: rgb(240, 242, 235);
            width: 90%;
            max-width: 1536px;
            margin-inline: auto;
            height:100px ;
            margin-top: 22px;
            overflow: hidden;
            mask-image: linear-gradient(
                to right,
                rgba(224, 234, 37, 0)5%,
                rgba(0,0,0,1) ,
                rgba(0,0,0,0) 95%,
                rgba(0,0,0,0)
                ); 
            
          }

          .box{
            position: absolute;
            display: flex;
            flex-direction: column;
            background-color: orange;
            border-radius: 3px;
            width: 200px;
            height: 100px;
            text-align: center;
            justify-content: center;
            align-items: center;
            left: calc(200px * 5);
            /* left: calc(200px * 6); */
            animation-name: scrollleft;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 30s;
          }

          .box:nth-child(2n){
            background-color: rgb(9, 111, 137);
          }

          .box:nth-child(1){
            background-color: rgb(228, 53, 5);
          }

          .box:hover{
            background-color: rgb(84, 76, 61);
            cursor: pointer;
          }

          @keyframes scrollleft{

            to{

                left: -200px;
            }
          }

          .box1{
            animation-delay: calc(30s / 5 * (5 - 1) * -1 );
          }

          .box2{
            animation-delay: calc(30s / 5 * (5 - 2) * -1 );
          }

          .box3{
            animation-delay: calc(30s / 5 * (5 - 3) * -1 );
          }

          .box4{
            animation-delay: calc(30s / 5 * (5 - 4) * -1 );
          }

          .box5{
            animation-delay: calc(30s / 5 * (5 - 5) * -1 );
          }

        

          /* SQUARE INFINITE SLIDE RIGHT STRATS HERE */

            .squareInfiniteSlides{
                position: relative;
                min-width: 1536px;
                margin-inline: auto;
                width: 90%;
                height: 100px;
                margin: 10px;
                overflow: hidden;
                mask-image: linear-gradient(
                to right,
                rgba(224, 234, 37, 0)5%,
                rgb(228, 74, 74) ,
                rgba(0,0,0,0) 95%,
                rgba(0,0,0,0)
                ); 
            }

            .square{
                position: absolute;
                background-color: blueviolet;
                border-radius: 3px;
                height: 100px;
                width: 200px;
                right: 100%;
                color: aliceblue;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                animation-name: scrollright;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-duration: 20s;
            }

            .square:hover{
                background-color: grey;
                cursor: pointer;
            }

            .square:nth-child(2n){
                background-color: grey;
            }

            .square:nth-child(2n):hover{
                background-color: rgb(200, 33, 122);
            }


            @keyframes scrollright {
                to{
                    right: -200px;
                }
            }

            .square1{
                animation-delay: calc(20s / 5 * (5 - 1) * -1);
            }

            .square2{
                animation-delay: calc(20s / 5 * (5 - 2) * -1);
            }

            .square3{
                animation-delay: calc(20s / 5 * (5 - 3) * -1);
            }

            .square4{
                animation-delay: calc(20s / 5 * (5 - 4) * -1);
            }

            .square5{
                animation-delay: calc(20s / 5 * (5 - 5) * -1);
            }


/* 
          .company-logo-slides{
               
            position: relative;
            background-color: rgb(219, 218, 210);
            width: 90%;
            max-width: 1536px;
            margin-inline: auto;
            height: 100px;
            margin-top: 22px;
            overflow: hidden;
             mask-image: linear-gradient(
                to right,
                rgba(224, 234, 37, 0)5%,
                rgba(0,0,0,1) ,
                rgba(0,0,0,0) 95%,
                rgba(0,0,0,0)
                ); 
            
            
        } */