@media (max-width:900px) {

    html section {
        overflow-x: hidden;
    }


    .nav-flex img {
        display: none;
    }

    nav ul li a {
        font-size: 17vw;
        line-height: 16vw;
    }

    .nav-flex {
        margin: 24vw 0 0 0;
    }

    .revealed-section img {
        width: 66%;
    }

    .revealed-section h6 {
        font-size: 3vw;
    }

    .letter {
        font-size: 14vw;
    }

    .login-btn {
        display: block;
        text-align: center;
        margin: 35px 0 0 0;
    }

    .login-btn a {
        font-size: 14px !important;
        padding: 12px 0 10px 0 !important;
        width: 136px !important;
        letter-spacing: 4px !important;
    }

    /* .revealed-section {
        height: 78vh;
    }

    .revealed-inner {
        height: 29vh;
    } */

    .left-vertical {
        display: none;
    }

    .right-vertical {
        display: none;
    }

    .about-section h2 {
        font-size: 11rem;
        line-height: 8rem;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .credibility h5 {
        max-width: 89%;
        margin: 0 0 0 1rem;
    }

    .credibility p {
        max-width: 88%;
        margin: 20px 0 0 1rem;
    }

    .credibility-text {
        margin: 12vw 0 1px 68px !important;
        border-left: 1px solid var(--gold);
    }

    .credibility-title h1 {
        font-size: 11rem;
    line-height: 8rem;
    text-align: center;
    }

    .col-sm-6.credibility-list {
        margin: 2rem 0 0rem 0;
    }

    .credibility-list ul li {
        max-width: 91%;
        display: block;
        margin: 0 auto;
    }

    .credibility-list ul {
        margin: 2rem 0 0 0;
    }

    .mob-none {
        display: none!important;
    }

    .expert-title h1 {
        font-size: 12rem;
        line-height: 8rem;
        margin: 0px 4px 8rem 0;
    }

    .experts h5 {
        max-width: 100%;
        margin: 0px 0 50px 20px;
    }

    .experts ul li {
        display: block;
        line-height: 18px!important;
        margin: 0 auto;
        max-width: 90%;
    }

    .ptg-pic {
        margin: 0;
        padding: 0;
    }
    
    .experts {
        padding: 0 0 0rem 0;
    }

    .ptg-pic img {
        position: relative;
        width: 100%;
    }

    .author h2 {
        color: var(--white);
    text-align: left;
    font-size: 9rem;
    font-family: 'Moneta-bold';
    text-transform: uppercase;
    line-height: 7.3rem;
    max-width: 100%;
    display: block;
    margin: 0px auto 50px 20px;
    position: relative;
    top: 0;
    }

    h1.disclosed.aos-init.aos-animate {
        margin: 89px 0 0 0;
    }

    .mob-block {
        display: block;
    }

    .rarities {
        background: var(--gold);
        height: 100%;
    }

    .rarities h1 {
        text-align: left;
        color: var(--blue);
        font-size: 11rem;
        font-family: 'Moneta-bold';
        text-transform: uppercase;
        line-height: 8rem;
        margin: 13px 0px 20px 0px;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .author {
        background-color: var(--blue);
        padding: 0 0 9rem 0;
        position: relative;
        z-index: 2;
    }

    .book-row {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* optional: smooth scrolling on iOS */
        scroll-behavior: smooth; /* optional: smooth scrolling */
      }
      
      .book-container {
        flex: 0 0 auto;
        margin-right: 20px;
        text-align: center;
      }
      
      .book-container:last-child {
        margin-right: 0;
      }
      
      .book-container img {
        width: 100%;
      }
      
      .scroll-buttons {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }
      
      .scroll-buttons button {
        margin: 0 5px;
        padding: 5px 10px;
        font-size: 1.2em;
        border: none;
        background-color: transparent;
        cursor: pointer;
        border: 1px solid var(--gold);
        border-radius: 100px;
        height: 75px;
        width: 75px;
        color:var(--gold);
      }
      
      .scroll-buttons button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
      }
      
      .scroll-left,
      .scroll-right {
        display: none;
      }
      
      @media (max-width: 767px) {
        .book-row {
          overflow-x: hidden;
        }
      
        .book-container {
          margin-right: 10px;
          display: flex;
          flex-direction: column;
          justify-content: revert;
          align-items: flex-start;
        }
      
        .scroll-buttons {
          display: block;
          text-align: end;
          margin: 50px 0 0 0;
        }
      
        .scroll-left,
        .scroll-right {
          display: inline-block;
        }
      }
      
      .book-container span {
        font-size: 14px;
    }

    .rarities img {
        width: 100%;
        margin: -51px 0 0 83px;
        position: relative;
        overflow: hidden;
    }

    .rarities h5 {
        text-transform: uppercase;
        font-size: 1rem;
        max-width: 100%;
        letter-spacing: 3px;
        margin: -38px 0 19px 20px;
        text-transform: uppercase;
        font-weight: 500;
    }

    .rarities p {
        color: var(--black);
        font-weight: 300;
        font-size: 14px;
        max-width: 100%;
        margin: 0 0 2rem 20px;
    }

    .rare-p {
        margin: 0 0 2rem 0!important;
    }

    .share-inner {
        border-left: 1px solid var(--black);
        padding: 0 0 0 20px;
        margin: 0 0 0 20px;
    }

    .register h1 {
        text-align: left;
        color: var(--gold);
        font-size: 11rem;
        font-family: 'Moneta-bold';
        text-transform: uppercase;
        line-height: 8rem;
        margin: 0px 0px 0px 20px;
        position: relative;
        top: 0px;
        left: 0px;
    }

    .form p {
        color: var(--gold)!important;
        text-align: center;
        max-width: 100%;
        text-transform: uppercase;
        font-size: 1.5rem;
        margin: 40px 0 20px 0!important;
    }

    .form span {
        margin: 0 0 50px 0;
    }

    form {
        max-width: 88%;
        display: block;
        margin: 1rem auto;
    }

    .btn-primary-custom {

        justify-content: flex-start!important;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        justify-content: revert;
        align-items: flex-start;
        padding: 0 0 0 10px;
    }

    .footer-container ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    .footer-container ul li {
        list-style-type: none;
        margin: 12px 14px 0 0;
    }

    .footer-container ul li:nth-child(1) {
        margin: 12px 52px 0 0;
    }
}

@media screen and (min-width: 1950px) {
    

.letter {
    font-size: 15rem;
}
  }

  @media (max-width:500px) {
    .author h2 {
        color: var(--white);
        text-align: left;
        font-size: 4.4rem;
        font-family: 'Moneta-bold';
        text-transform: uppercase;
        line-height: 4rem;
        max-width: 100%;
        display: block;
        margin: 0px auto 50px 20px;
        position: relative;
        top: 0;
    }

    .rarities h1 {
        text-align: left;
        color: var(--blue);
        font-size: 6rem;
        font-family: 'Moneta-bold';
        text-transform: uppercase;
        line-height: 4.5rem;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .about-section h2 {
        font-size: 6rem;
        line-height: 5rem;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .credibility-title h1 {
        font-size: 6rem;
        line-height: 5rem;
        text-align: center;
    }

    .expert-title h1 {
        font-size: 6rem;
        line-height: 5rem;
        margin: 0px 4px 8rem 0;
    }

    .register h1 {
        text-align: left;
        color: var(--gold);
        font-size: 7rem;
        font-family: 'Moneta-bold';
        text-transform: uppercase;
        line-height: 5.5rem;
        margin: 0;
        position: relative;
        top: 0px;
        left: 0px;
    }
}