/* General animation for qr-code images */


.car-code {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease, transform 2s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.abt-code {
  opacity: 0;
  transform: translateX(200px);
  transition: opacity 0.6s ease, transform 2s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.car-code.visible-car{
  opacity: 1;
  transform: translateX(0);
}
    .qr-code {
      opacity: 0;
      transform: translatey(-100px); /* Start off 100px to the left */
      transition: opacity 2s cubic-bezier(0.75, 0.1, 0.75, 1), transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }



    /* Add visible class */
    .visible {
      opacity: 1;
      transform: translateX(0); /* Move the qr-code to its normal position */
    }

    /* Add visible class */
    .visible-abt {
      opacity: 1;
      transform: translateX(0); /* Move the qr-code to its normal position */
    }



    /* Heading fade-in with smooth effect */
    .fade-heading {
      opacity: 0;
      transform: translateY(0px); /* Start off 30px above */
      transition: opacity 8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 6);
    }

    .visible-heading {
      opacity: 1;
      transform: translateY(0); /* Bring the heading to its normal position */
    }

    /* Heading fade-in with smooth effect */
    .fade-para {
      opacity: 0;
      transform: translateY(0px); /* Start off 30px above */
      transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 6);
    }

    .visible-paraam {
      opacity: 1;
      transform: translateY(0); /* Bring the heading to its normal position */
    }

/****spk***text********/

    .spk-text {
      opacity: 0;
      transform: translateY(0px); /* Start off 30px above */
      transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 6);
    }

    .visible-spktext {
      opacity: 3;
      transform: translateY(0); /* Bring the heading to its normal position */
    }

/****comp***logo***Text****8/

/****como***text********/

    .como-text {
      opacity: 0;
      transform: translateY(0px); /* Start off 30px above */
      transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 6);
    }

    .visible-comotext {
      opacity: 1;
      transform: translateY(0); /* Bring the heading to its normal position */
    }

/****comp***logo***Text****8/

    .imcar-code {
      opacity: 0;
      transform: translateY(0px); /* Start off 30px above */
      transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 6);
    }

    .visible-imcar {
      opacity: 1;
      transform: translateY(0); /* Bring the heading to its normal position */
    }

/********value*************/

.value-code {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease, transform 3s cubic-bezier(0.25, 1.5, 0.5, 1);
}


    /* Add visible class */
    .visible-value {
      opacity: 1;
      transform: translateX(0); /* Move the qr-code to its normal position */
    }


/********value*************/

.qlearn-code {
  opacity: 0;
  transform: translateX(200px);
  transition: opacity 0.6s ease, transform 3s cubic-bezier(0.25, 1.5, 0.5, 1);
}


    /* Add visible class */
    .visible-qlearn {
      opacity: 1;
      transform: translateX(0); /* Move the qr-code to its normal position */
    }

/********fota*************/

.fota-code {
  opacity: 0;
  transform: translateX(0px);
  transition: opacity 6s ease, transform 3s cubic-bezier(0.25, 1.5, 0.5, 1);
}


    /* Add visible class */
    .visible-fota {
      opacity: 1;
      transform: translateX(0); /* Move the qr-code to its normal position */
    }



/*every essentials*/

        
        .scroll-text-unique {
            font-size: 2rem;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s ease, transform 1s ease;
        }
        .scroll-text-visible {
            opacity: 1;
            transform: translateY(0);
        }


/****let him speak***********/

.spkpad {

margin-top: 50px !important;

}

.speaker-container {
      position: relative;
      width: 300px;
      height: 200px;
padding-left: 100px;
    }

.speaker {
  position: absolute;
  left: 50px;
  bottom: 60px; /* Increased to center better with waves */
  width: 175px;
  z-index: 2;
}

    .wave {
      position: absolute;
      left: 190px; /* Front of the speaker */
      bottom: 90px;
      width: 50px;
      opacity: 0;
      animation: shootWave 2s infinite;
      
    }

    .wave:nth-child(2) {
      animation-delay: 0.3s;
    }

    .wave:nth-child(3) {
      animation-delay: 0.6s;
    }

    .wave:nth-child(4) {
      animation-delay: 0.9s;
    }

    @keyframes shootWave {
      0% {
        transform: translateX(0) scale(1);
        opacity: 0.8;
      }
      100% {
        transform: translateX(150px) scale(1.8);
        opacity: 0;
      }
    }



/*tryhome*/

 .try {
            font-size: 2rem;
            opacity: 0;
            transform: translateY(-50px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .scroll-text-visible {
            opacity: 1;
            transform: translateY(0);
        }

/*exclusivehome*/

.try-exclusive {
            font-size: 2rem;
            opacity: 0;
            transform: translateY(-50px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .scroll-text-visible {
            opacity: 1;
            transform: translateY(0);
        }
/*choosehome*/

.try-choose {
            font-size: 2rem;
            opacity: 0;
            transform: translateY(-50px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .scroll-text-visible {
            opacity: 1;
            transform: translateY(0);

 <!-- Custom CSS for Animation -->
    
        /* Initial styles for the sections */
        .fade-section {
            text-align: center;
            padding: 100px;
            height: 100vh; /* Full viewport height */
        }

        /* Hide the heading initially */
        .fade-in-heading {
            opacity: 0;
            transition: opacity 10s ease-in-out;
        }

        /* Add the class to show the heading */
        .fade-in {
            opacity: 1;
        }

        /* Styling for the motion blocks (left to right) */
        .motion-block-left-right {
            width: 300px;
            height: 100px; /* Adjust as needed */
            background-color: black;
            margin: 20px auto;
            opacity: 0; /* Initially hidden */
            transform: translateX(-100%); /* Start from outside the screen */
            transition: transform 1s ease-in-out, opacity 1s ease-in-out; /* Smooth transition for motion */
        }

        /* Add the class to move blocks into view */
        .move-right {
            opacity: 1;
            transform: translateX(0); /* Move to the center */
        }

        /* Styling for the motion blocks (right to left) */
        .motion-block-right-left {
            width: 300px;
            height: 100px; /* Adjust as needed */
            background-color: orange; /* Color changed to orange */
            margin: 20px auto;
            opacity: 0; /* Initially hidden */
            transform: translateX(100%); /* Start from outside the screen (right) */
            transition: transform 1s ease-in-out, opacity 1s ease-in-out; /* Smooth transition for motion */
        }

        /* Add the class to move blocks from right to left */
        .move-left {
            opacity: 1;
            transform: translateX(0); /* Move to the center */
        }


/*****new content motion***test********/