/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



.typewritter {
  /* 1. Makes the span behave like a box so we can animate width */
  display: inline-block; 
  
  /* 2. aligns the pink box with the text "Experience" */
  vertical-align: bottom; 
  
  /* 3. Ensures the pink padding is hidden when width is 0 */
  box-sizing: border-box; 
  
  /* 4. Hides the text "Something" initially */
  overflow: hidden;
  white-space: nowrap;
  
  /* 5. Start at 0 width */
  width: 0;
  
  /* 6. The Animation */
  /* 1.5s is speed. steps(10) creates the jerky typing feel */
  animation: typing-reveal 1.5s steps(10, end) forwards;
}

@keyframes typing-reveal {
  from { 
    width: 0; 
  }
  to { 
    /* 
       IMPORTANT: 
       "Something" is 9 letters. We use 'ch' (character units).
       We use 11ch to allow a tiny bit of extra space for the padding.
       If the text gets cut off, change 11ch to 12ch or 120px.
    */
    width: 10ch; 
  }
}