@media only screen and (min-width: 768px) and (max-width: 1032px) and (orientation: portrait) {
  .top-banner {
    display: none;
  }

  .ipad-top-banner {
    display: block;
    position: absolute;
    width: 100vw;
    height: auto;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 3;
  }

  /** TnC Page **/
  .tnc-content {
    gap: 20px;
    padding: 35px 14px;
  }

  .tnc-content p {
    font-size: 1.5rem !important;
  }

  .tnc-content #checkbox {
    width: 80px;
    height: 30px;
    min-width: 15px;
    border: 3px solid;
  }

  #checkbox img {
    width: 30px;
    height: 30px;
    bottom: 10%;
    left: 20%;
  }

  .accept-button {
    padding: 4px 50px;
    font-size: 2.5rem;
  }

  /** Landing Page **/
  #landingPageScreen {
    background-position: center 58%;
  }

  #landingPageScreen .doraemon-logo {
    top: 16%;
    width: 35%;
  }

  #landingPageScreen .keeper-league-logo {
    top: 24%;
    width: 55%;
  }

  .play-game-button {
    padding: 4px 50px;
    font-size: 2rem;
  }

  #landingPageScreen .dora-left-img {
    width: 200px;
  }

  #landingPageScreen .dora-right-img {
    width: 180px;
  }

  #landingPageScreen .license-img {
    width: 210px;
    bottom: 1.5%;
  }

  /** Parental Guide Screen **/
  .parental-guide-box {
    width: 100%;
    max-width: 600px;
  }

  .pg-heading {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(40% - 40px),
      calc(100% - 30px) 90%,
      30px 90%,
      0 calc(40% - 40px)
    );
    padding: 20px;
    font-size: 3rem;
    width: 110%;
    margin-bottom: -12px;
  }

  .pg-points {
    max-width: 600px;
    width: 100%;
    padding: 65px 25px 80px 25px;
  }

  .pg-points p {
    font-size: 1.7rem;
    margin-bottom: 10px;
  }

  .parental-ok-button {
    bottom: -35px;
    padding: 6px 50px;
    font-size: 2.5rem;
  }

  #parentalGuideScreen .doraemon {
    width: 180px;
  }

  /** Instruction screen **/
  .instructions-box {
    width: 100%;
    max-width: 600px;
  }

  .instructions-points {
    max-width: 570px;
    width: 92%;
    padding: 20px 50px 60px 50px;
  }

  .instructions-heading {
    font-size: 3rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(45% - 40px),
      calc(100% - 30px) 90%,
      30px 90%,
      0 calc(45% - 40px)
    );
    padding: 15px;
  }

  .sub-heading-one {
    font-size: 1.7rem;
  }

  .sub-heading-two {
    font-size: 1.7rem;
  }

  .instructions-points li {
    font-size: 1.5rem;
  }

  .instruction-ok-button {
    bottom: -35px;
    padding: 6px 50px;
    font-size: 2.5rem;
  }

  #instructionScreen .doraemon {
    width: 180px;
  }

  /** How to Play Screen **/
  #howToPlayScreen .instructions-text-div {
    top: 20dvh;
  }
  #howToPlayScreen .instructions-text {
    font-size: 4rem;
  }

  .instructions-message {
    font-size: 2rem !important;
  }

  .head-container {
    right: 0;
    left: 0;
    margin: auto;
    max-width: 600px;
  }

  #howToPlayScreen .turn-text {
    text-align: center;
    font-size: 2rem;
  }

  .head-container img {
    width: 45dvh;
    max-width: 600px;
  }

  #gameCam {
    height: 220px;
    width: 180px;
  }

  /** Form Screen **/
  .form-container {
    max-width: 600px;
    width: 50dvh;
    top: 65px;
  }

  .form-screen-logo {
    width: 200px;
    top: -60px;
    right: -40px;
  }

  .score-text {
    font-size: 4rem;
  }

  #scoreNumber {
    font-size: 6rem;
  }

  .form-text-small {
    font-size: 1.8rem;
  }

  .form-field-text {
    font-size: 2rem;
  }

  .form-field-input {
    padding: 15px;
    font-size: 1.5rem;
  }

  .gender-options {
    font-size: 2rem;
  }

  .gender-option input {
    width: 25px;
    height: 25px;
  }

  .note-text {
    font-size: 1.3rem;
  }

  .photo-choice-btn {
    padding: 15px;
    font-size: 1.3rem;
  }
  .photo-text-container {
    gap: 20px;
  }

  #previewImg {
    width: 50px;
    height: 50px;
    object-position: top;
  }

  #photoSelectedText {
    font-size: 1.5rem;
  }

  .cross-btn {
    font-size: 2rem;
  }

  .submit-button-container {
    margin: 25px 0;
  }

  .retry-button {
    font-size: 2rem;
    padding: 1px 50px;
  }

  .submit-button {
    font-size: 2rem;
    padding: 1px 50px;
  }

  /** Avatar Selection screen **/
  #avatarSelectionScreen .heading {
    font-size: 4rem;
    top: 15%;
  }

  .score-container {
    z-index: 10;
  }

  .your-score-text {
    font-size: 4dvh;
  }

  .your-score-number {
    font-size: 5dvh;
  }

  #avatarSelectionScreen .avatars-container {
    row-gap: 45px;
    top: 26%;
  }

  .avatar-image {
    width: 18dvh;
  }

  #avatarSelectionScreen .unlocked-text {
    font-size: 1.5rem;
  }

  .generate-button {
    padding: 5px 40px;
    font-size: 2.5rem;
  }

  /** User Card Screen **/
  #userCardScreen {
    background:
      linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url(https://cdn.makear.ai/bounce-keeper-league/assets/images/bg.png);
    background-size: cover;
    background-position: bottom center;
  }

  #userCardScreen .logo-text-main {
    width: min(20vw, 200px);
  }

  #userCardScreen .card-heading {
    font-size: min(6vw, 4rem);
  }

  .generated-container {
    width: 100%;
    max-width: 500px;
    min-width: 500px;
    height: min(60dvh, 730px);
  }

  .card-top-text p:nth-child(1) {
    font-size: 2rem;
  }

  .card-top-text p:nth-child(2) {
    font-size: 1rem;
  }

  .card-content {
    width: min(40dvh, 450px);
    height: 85%;
  }

  #userNameText {
    font-size: clamp(2.8rem, 5vw, 3rem);
  }

  .card-dora {
    width: min(130px, 10dvh);
    left: min(40px, 5dvh);
  }

  #userCardScreen .logo-text {
    width: 140px;
    right: 0;
  }

  .download-share-container {
    gap: 25px;
  }

  .download-button,
  .share-button,
  .leaderboard-button {
    font-size: 2rem;
    padding: 5px 40px;
    min-width: 260px;
  }

  /** leaderboard Screen  **/
  .leaderboard-wrapper {
    padding: 10rem 3.5rem 7rem;
  }

  #leaderboardScreen .leaderboard-cross-btn {
    font-size: 4rem;
  }

  #leaderboardScreen .logo-text {
    width: 20dvh;
    top: -5dvh;
  }

  #leaderboardScreen .heading {
    font-size: 4rem;
    top: 6dvh;
  }

  .leaderboard-tabs {
    gap: 30px;
    margin: 1rem auto;
  }

  .leaderboard-tab {
    font-size: min(2rem, 2.5dvh);
  }

  .rank-header {
    margin-left: 1.6rem;
    font-size: min(2rem, 2.5dvh);
    width: 14%;
  }

  .name-header {
    font-size: 2rem;
  }

  .score-header {
    font-size: 2rem;
  }

  .leaderboard-item {
    padding: 10px;
  }

  .right {
    font-size: min(2rem, 2.5dvh);
  }

  .name {
    font-size: min(2rem, 2.5dvh);
    max-width: 300px;
  }

  .rank-icon {
    width: 15%;
  }

  .avatar {
    width: 5dvh;
    height: 5dvh;
  }

  .rank-number {
    width: 15%;
    height: 5dvh;
  }

  .play-again-button {
    width: 310px;
    padding: 6px 40px;
    font-size: 2rem;
  }

  #leaderboardScreen .doraemon-lb-img {
    width: 11dvh;
  }

  /** Closing Page **/
  #closingPage {
    background:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(https://cdn.makear.ai/bounce-keeper-league/assets/images/closingBg.png);
    background-size: cover;
    background-position: center;
  }

  #closingPage .closing-packs {
    width: 80%;
  }

  #closingPage .dora-left-img {
    width: 200px;
  }

  #closingPage .dora-right-img {
    width: 170px;
  }
}