html, body {
    height: 100%;
    line-height: 170%;
    }
    
 
    
    html {
    -ms-overflow-style: scrollbar;
    }
    
    
    /* 2. layout */
    body {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    background: #fff;
    background-image: url('../img/bg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    }
h1,h2,h3,h4,h5,h6 {
    line-height: 1.8;
}

@media (max-width: 767.98px) {
    h1,h2,h3,h4,h5,h6 {
        line-height: 1.1;
    }
}
.typewriter-sm {
    font-weight: 600;
    font-size: 2rem;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .10em; /* Adjust as needed */
    animation: 
      typing 2.5s steps(35, end),
      blink-caret .35s step-end infinite;
  }

.typewriter {
    font-weight: 600;
    font-size: 3rem;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .12em solid rgb(75, 74, 72); /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .10em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(35, end),
      blink-caret .75s step-end infinite;
  }
  /* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% {  }
  }
.text-orange {
    color:#f5802f;
}


    .card {
        background-image: url('../img/card-bg.png');
        height:300px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 8px;
    }

    @media (max-width: 767.98px) {
        .card {
            height: 400px;
        }
        .coming-soon {
            font-size: 20px;
        }
     }

    .logo-img {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }