.animeintro{
    width: 60px;
    height: 60px;
   }
#book-intro {
    position: fixed; top:0; left:0; width:100%; height:100%;
    display:flex; justify-content:center; align-items:center;
    background:#1e2f9780; z-index:9999;  perspective: 1000px;
    transform-style: preserve-3d;
    overflow:hidden;
  }
  
  .book-page {
    position:absolute; top:0; height:100%; width:50%;
    background:#1260cc; backface-visibility:hidden; 
    transition: transform 1.7s ease-in-out;
  }
  
  .left-page { left: 0; transform-origin: right center; }
  .right-page { right: 0; transform-origin: left center; }
  
  .intro-content {
      display: flex;
      flex-direction: column;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2em;
      gap: 0.3em;
     position: relative; text-align: center; color:#fff;
    z-index:10; opacity:1; transition: opacity 1.2s ease;
  }
  .intro-content2{
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
  }
      /* intro animation */
      .brand-name{
  animation: fadeInUp 1s ease-in-out forwards;
}
.brand-moto{
    animation:  fadeInUp 2s ease-in-out forwards;
    align-content: center;
  }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
   
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


  #book-intro.open .left-page { transform: rotateY(-90deg); }
  #book-intro.open .right-page { transform: rotateY(90deg); }
  #book-intro.open .intro-content { opacity: 0; }
  
  #book-intro.fade-out { opacity:0; pointer-events:none; transition:opacity 0.6s ease; }
  
  #main-content.hidden { display:none; opacity:0; }
  #main-content.show { display:block; animation: fadeIn 1s ease forwards; }
  
  @keyframes fadeIn { to { opacity:1; } }
/* Phone sizes */

  @media (max-width: 767px) {
    /* Exclusive for medium phone sizes */
    @media (max-width: 397px) {
      .animeintro{
        width: 50px;
        height: 50px;
      }
      .intro-content{ font-size: 1.7em;}
    }
    /* Exclusive for smaller phone sizes */
    @media (max-width: 330px) {
     .animeintro{ width:45px; height: 45px;}
     .intro-content{ font-size: 1.5em;}
    }
  }