.text-font{
  font-family: "Montserrat", sans-serif;
}



/* Best selling animation */



  @keyframes fade-in-left {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fade-in-right {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-left {
    animation: fade-in-left 0.8s ease-out both;
  }

  .animate-fade-in-right {
    animation: fade-in-right 0.8s ease-out both;
  }



  #Featured-book {
  scroll-margin-top: 100px; /* or whatever height your navbar is */
}
 #Home-items {
  scroll-margin-top: 80px; /* or whatever height your navbar is */
}
#popular-book {
  scroll-margin-top: 100px; /* or whatever height your navbar is */
}
#offer-book {
  scroll-margin-top: 100px; /* or whatever height your navbar is */
}

#articles{
 scroll-margin-top: 100px; 
}

/*

Featured book divider animation
*/

  @keyframes gradient-slide {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }
  .animated-gradient {
    background-size: 200% 200%;
    animation: gradient-slide 3s linear infinite;
  }


  /* <!-- This section is for carrosel --> */
 
        .carousel-item {
            transition: transform 0.5s ease-in-out;
        }
        .slide-left {
            transform: translateX(-100%);
        }
        .slide-right {
            transform: translateX(100%);
        }



/* Animation page switching */
  .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #8b5cf6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


.typewrite {
  display: inline-block;
  white-space: nowrap;
  border-right: 2px solid black;
  font-family: monospace;
  overflow: hidden;
  max-width: 100%;
  animation:
    typewriter 4s steps(60, end) forwards,
    blink-caret 0.75s step-end infinite;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}