body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
}
#helperBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: grab;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    touch-action: none;
    animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,255,0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,0, 0); }
}
#helper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
#helper a {
    color: white;
    font-size: 24px;
    text-decoration: none;
    margin: 10px;
}
#helper a i {
    margin-right: 6px;
}
#helper a:hover {
    text-decoration: underline;
}
#closeBtn {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 52px;
    cursor: pointer;
}
.directories {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 2 columns */
    grid-template-rows: repeat(2, 1fr);    /* 2 rows */
}
.directories a {
    text-decoration: none;
}
.directories a i {
    margin-right: 6px;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 16px;
    margin: 8px;
}
.box:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}
.box0 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #131313;
    font-size: 3.5rem;
    font-weight: bold;
    cursor: crosshair;
}
.box1 {
    background: linear-gradient(135deg, #A7C7E7, #90CAF9);
    padding: 20px;
}
.box2 {
    background: linear-gradient(135deg, #B2DFDB, #A5D6A7);
    padding: 40px;
}
.box3 {
    background: linear-gradient(135deg, #cec67e, #FFE082);
    padding: 60px;
}
.box4 {
    background: linear-gradient(135deg, #F8BBD0, #F48FB1);
    padding: 80px;
}
.box5 {
    background-color: cadetblue;
    cursor: pointer;
    gap: 15px;
}

/* Modal overlay */
    .modalNav {
      display: none; /* hidden by default */
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 999;
      justify-content: center;
      align-items: center;
    }

    /* Modal box */
    .nav-modal {
      background: rgba(255, 255, 255, 0.95);
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      text-align: center;
    }

    .nav-modal h2 {
      margin-bottom: 15px;
      font-size: 20px;
      color: #2e7d32;
    }

    .nav-modal select {
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      width: 200px;
      cursor: pointer;
    }

    .openBtn {
      cursor: pointer;
      background-color: cadetblue;
      border: none;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      font-weight: bold;
    }

    .closeBtn {
      margin-top: 15px;
      background: #e53935;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 8px;
      cursor: pointer;
    }
    .closeBtn:hover {
      background: #b71c1c;
    }
    
.Hplay-btn {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #333;
    transition: all 0.3s ease;
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000;
}
.Hsound-btn {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #333;
    position: fixed;
    transition: all 0.3s ease;
    bottom: 160px;
    right: 20px;
    z-index: 1000;
}
.Hsound-btn:hover {
    background: #f0f0f0;
    transform: scale(1.1);
}
.Hplay-btn:hover {
    background: #f0f0f0;
    transform: scale(1.1);
}
.vocab {
    width: 100%;
    text-align: center;
    align-items: center;
}
.info {
    padding: 12px;
    width: 50%;
    margin: 0 auto;
    text-align: left;
    color: #004D40;
    background: linear-gradient(135deg, #B2DFDB, #A5D6A7);
    border-radius: 18px;
    opacity: 1;
    transition: opacity 0.6s;
}
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 36px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover{
    color: #b10000;
}
.vocab_head {
    text-align: left;
    padding: 12px;
    color: #051765;
    padding-left: 18px;
}
.step1 {
    background-color: #f4ecd8;
    color: #333333;
    font-size: 3rem;
    border-radius: 12px;
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;
}
.step1 p{
    padding: 12px;
    margin: 0;
}

.Adescription {
    font-weight: 700; /* make it bold */
    font-size: 1rem; /* slightly larger */
    text-transform: uppercase; /* make it stand out */
    background: linear-gradient(90deg, #c80000, #00e5ff); /* green to cyan gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px; /* spacing for elegance */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* subtle shadow */
    padding-right: 30px;
}

/* Faqat Play button pozitsiyasi */
#playButton {
  position: fixed;       /* ekranga yopishtirish */
  right: 20px;           /* o‘ngdan masofa */
  top: 50%;             /* vertical markaz */
  transform: translateY(-50%); /* haqiqiy markazlashtirish */
  width: 60px;           /* tugma o‘lchami */
  height: 60px;
  border-radius: 50%;    /* doira shakl */
  background: #4CAF50;
  color: #fff;
  border: none;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: background 0.3s;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,255,0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,0, 0); }
}
#playButtonPhrases {
  position: fixed;       /* ekranga yopishtirish */
  right: 20px;           /* o‘ngdan masofa */
  top: 50%;             /* vertical markaz */
  transform: translateY(-50%); /* haqiqiy markazlashtirish */
  width: 60px;           /* tugma o‘lchami */
  height: 60px;
  border-radius: 50%;    /* doira shakl */
  background: #4CAF50;
  color: #fff;
  border: none;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: background 0.3s;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,255,0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,0, 0); }
}

#playButton:hover {
  background: #45a049;
}
#playButtonPhrases:hover {
  background: #45a049;
}



.listenButton {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}
.listenButton button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    margin: 5px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.listenButton button:hover {
    background: #45a049;
}
.listenButton a {
    display: block;
    margin-top: 10px;
    color: #007BFF;
    text-decoration: none;
}
.listenButton a:hover {
    text-decoration: underline;
}
.controls {
    margin-top: 10px;
}
.controls button {
    background: #f0f0f0;
    color: #333;
    padding: 10px 15px;
    border-radius: 50%;
    border: none;
    margin: 0 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.controls button:hover {
    background: #ddd;
}
/*after 20 audio this page appears quiz mode*/
#nextDiv {
    display: none;
}
#nextDivPhrases {
    display: none;
}
.step1_vocabQuiz {
    max-width: 600px;
    font-size: 30px;
    margin: auto;
    text-align: center;
    padding: 20px;
}
.step1Quiz {
    background-color: #f4ecd8;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 15px;
    margin: 10px auto;
    transition: all 0.5s ease;
}
.step1Quiz.active {
    display: block;
}
.listenButtonQuiz {
    margin-top: 20px;
}
.controlsQuiz button {
    margin: 0 5px;
    padding: 5px 10px;
}
.finished-messageQuiz {
    display: none;
    background: #d9f9d9;
    color: #0a730a;
    padding: 20px;
    border-radius: 12px;
    margin-top: 30px;
    font-weight: bold;
    font-size: 24px;
}
.finished-messageQuiz.show {
    display: block;
}
.step1Quiz {
    display: none;
}
.step1Quiz.active {
    display: flex;
}
/*collapsible-----------------EDIT*/
.step1_vocab, .step2_vocab, .step3_vocab, .step4_vocab, .step5_vocab,
.step6_vocab, .step7_vocab, .step8_vocab, .step9_vocab, .step10_vocab,
.step11_vocab, .step12_vocab, .step13_vocab, .step14_vocab, .step15_vocab,
.step16_vocab, .step17_vocab, .step18_vocab, .step19_vocab, .step20_vocab,
.step21_vocab, .step22_vocab, .step23_vocab, .step24_vocab, .step25_vocab,
.step26_vocab, .step27_vocab, .step28_vocab, .step29_vocab, .step30_vocab,
.step31_vocab, .step32_vocab, .step33_vocab, .step34_vocab, .step35_vocab,
.step36_vocab, .step37_vocab, .step38_vocab, .step39_vocab, .step40_vocab,
.step41_vocab, .step42_vocab, .step43_vocab, .step44_vocab, .step45_vocab,
.step46_vocab, .step47_vocab, .step48_vocab, .step49_vocab, .step50_vocab,
.step51_vocab, .step52_vocab, .step53_vocab, .step54_vocab, .step55_vocab,
.step56_vocab, .step57_vocab, .step58_vocab, .step59_vocab, .step60_vocab,
.step61_vocab, .step62_vocab, .step63_vocab, .step64_vocab, .step65_vocab,
.step66_vocab, .step67_vocab, .step68_vocab, .step69_vocab, .step70_vocab,
.step71_vocab, .step72_vocab, .step73_vocab, .step74_vocab, .step75_vocab,
.step76_vocab, .step77_vocab, .step78_vocab, .step79_vocab, .step80_vocab,
.step81_vocab, .step82_vocab, .step83_vocab, .step84_vocab, .step85_vocab,
.step86_vocab, .step87_vocab, .step88_vocab, .step89_vocab, .step90_vocab,
.step91_vocab, .step92_vocab, .step93_vocab, .step94_vocab, .step95_vocab,
.step96_vocab, .step97_vocab, .step98_vocab, .step99_vocab, .step100_vocab,
.step101_vocab, .step102_vocab, .step103_vocab, .step104_vocab, .step105_vocab,
.step106_vocab, .step107_vocab, .step108_vocab, .step109_vocab, .step110_vocab,
.step111_vocab, .step112_vocab, .step113_vocab, .step114_vocab, .step115_vocab,
.step116_vocab, .step117_vocab, .step118_vocab, .step119_vocab, .step120_vocab,
.step121_vocab, .step122_vocab, .step123_vocab, .step124_vocab, .step125_vocab,
.step126_vocab, .step127_vocab, .step128_vocab, .step129_vocab, .step130_vocab,
.step131_vocab, .step132_vocab, .step133_vocab, .step134_vocab, .step135_vocab,
.step136_vocab, .step137_vocab, .step138_vocab, .step139_vocab, .step140_vocab,
.step141_vocab, .step142_vocab, .step143_vocab, .step144_vocab, .step145_vocab,
.step146_vocab, .step147_vocab, .step148_vocab, .step149_vocab, .step150_vocab {
    border: none;
    border-radius: 8px;
    margin-bottom: 0.2rem;
    transition: max-height 0.3s ease;
  }

.step1_vocab:not(.open) > div,
.step2_vocab:not(.open) > div,
.step3_vocab:not(.open) > div,
.step4_vocab:not(.open) > div,
.step5_vocab:not(.open) > div,
.step6_vocab:not(.open) > div,
.step7_vocab:not(.open) > div,
.step8_vocab:not(.open) > div,
.step9_vocab:not(.open) > div,
.step10_vocab:not(.open) > div,
.step11_vocab:not(.open) > div,
.step12_vocab:not(.open) > div,
.step13_vocab:not(.open) > div,
.step14_vocab:not(.open) > div,
.step15_vocab:not(.open) > div,
.step16_vocab:not(.open) > div,
.step17_vocab:not(.open) > div,
.step18_vocab:not(.open) > div,
.step19_vocab:not(.open) > div,
.step20_vocab:not(.open) > div,
.step21_vocab:not(.open) > div,
.step22_vocab:not(.open) > div,
.step23_vocab:not(.open) > div,
.step24_vocab:not(.open) > div,
.step25_vocab:not(.open) > div,
.step26_vocab:not(.open) > div,
.step27_vocab:not(.open) > div,
.step28_vocab:not(.open) > div,
.step29_vocab:not(.open) > div,
.step30_vocab:not(.open) > div,
.step31_vocab:not(.open) > div,
.step32_vocab:not(.open) > div,
.step33_vocab:not(.open) > div,
.step34_vocab:not(.open) > div,
.step35_vocab:not(.open) > div,
.step36_vocab:not(.open) > div,
.step37_vocab:not(.open) > div,
.step38_vocab:not(.open) > div,
.step39_vocab:not(.open) > div,
.step40_vocab:not(.open) > div,
.step41_vocab:not(.open) > div,
.step42_vocab:not(.open) > div,
.step43_vocab:not(.open) > div,
.step44_vocab:not(.open) > div,
.step45_vocab:not(.open) > div,
.step46_vocab:not(.open) > div,
.step47_vocab:not(.open) > div,
.step48_vocab:not(.open) > div,
.step49_vocab:not(.open) > div,
.step50_vocab:not(.open) > div,
.step51_vocab:not(.open) > div,
.step52_vocab:not(.open) > div,
.step53_vocab:not(.open) > div,
.step54_vocab:not(.open) > div,
.step55_vocab:not(.open) > div,
.step56_vocab:not(.open) > div,
.step57_vocab:not(.open) > div,
.step58_vocab:not(.open) > div,
.step59_vocab:not(.open) > div,
.step60_vocab:not(.open) > div,
.step61_vocab:not(.open) > div,
.step62_vocab:not(.open) > div,
.step63_vocab:not(.open) > div,
.step64_vocab:not(.open) > div,
.step65_vocab:not(.open) > div,
.step66_vocab:not(.open) > div,
.step67_vocab:not(.open) > div,
.step68_vocab:not(.open) > div,
.step69_vocab:not(.open) > div,
.step70_vocab:not(.open) > div,
.step71_vocab:not(.open) > div,
.step72_vocab:not(.open) > div,
.step73_vocab:not(.open) > div,
.step74_vocab:not(.open) > div,
.step75_vocab:not(.open) > div,
.step76_vocab:not(.open) > div,
.step77_vocab:not(.open) > div,
.step78_vocab:not(.open) > div,
.step79_vocab:not(.open) > div,
.step80_vocab:not(.open) > div,
.step81_vocab:not(.open) > div,
.step82_vocab:not(.open) > div,
.step83_vocab:not(.open) > div,
.step84_vocab:not(.open) > div,
.step85_vocab:not(.open) > div,
.step86_vocab:not(.open) > div,
.step87_vocab:not(.open) > div,
.step88_vocab:not(.open) > div,
.step89_vocab:not(.open) > div,
.step90_vocab:not(.open) > div,
.step91_vocab:not(.open) > div,
.step92_vocab:not(.open) > div,
.step93_vocab:not(.open) > div,
.step94_vocab:not(.open) > div,
.step95_vocab:not(.open) > div,
.step96_vocab:not(.open) > div,
.step97_vocab:not(.open) > div,
.step98_vocab:not(.open) > div,
.step99_vocab:not(.open) > div,
.step100_vocab:not(.open) > div,
.step101_vocab:not(.open) > div,
.step102_vocab:not(.open) > div,
.step103_vocab:not(.open) > div,
.step104_vocab:not(.open) > div,
.step105_vocab:not(.open) > div,
.step106_vocab:not(.open) > div,
.step107_vocab:not(.open) > div,
.step108_vocab:not(.open) > div,
.step109_vocab:not(.open) > div,
.step110_vocab:not(.open) > div,
.step111_vocab:not(.open) > div,
.step112_vocab:not(.open) > div,
.step113_vocab:not(.open) > div,
.step114_vocab:not(.open) > div,
.step115_vocab:not(.open) > div,
.step116_vocab:not(.open) > div,
.step117_vocab:not(.open) > div,
.step118_vocab:not(.open) > div,
.step119_vocab:not(.open) > div,
.step120_vocab:not(.open) > div,
.step121_vocab:not(.open) > div,
.step122_vocab:not(.open) > div,
.step123_vocab:not(.open) > div,
.step124_vocab:not(.open) > div,
.step125_vocab:not(.open) > div,
.step126_vocab:not(.open) > div,
.step127_vocab:not(.open) > div,
.step128_vocab:not(.open) > div,
.step129_vocab:not(.open) > div,
.step130_vocab:not(.open) > div,
.step131_vocab:not(.open) > div,
.step132_vocab:not(.open) > div,
.step133_vocab:not(.open) > div,
.step134_vocab:not(.open) > div,
.step135_vocab:not(.open) > div,
.step136_vocab:not(.open) > div,
.step137_vocab:not(.open) > div,
.step138_vocab:not(.open) > div,
.step139_vocab:not(.open) > div,
.step140_vocab:not(.open) > div,
.step141_vocab:not(.open) > div,
.step142_vocab:not(.open) > div,
.step143_vocab:not(.open) > div,
.step144_vocab:not(.open) > div,
.step145_vocab:not(.open) > div,
.step146_vocab:not(.open) > div,
.step147_vocab:not(.open) > div,
.step148_vocab:not(.open) > div,
.step149_vocab:not(.open) > div,
.step150_vocab:not(.open) > div {
    display: none;
  }

.vocab_head {
    background-color: #cfe0f1;
    border-radius: 8px;
    color: #333333;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
    padding: 5px;
}
.ph-hed {
    text-align: center;
    color: #A5D6A7;
}
.grammar {
    background: white;
    color: white;
    min-height: 100vh;
    width: 100%;
}
.g-container-main {
    text-align: center;
    margin: 0;
    background-color: #051765;
    padding: 12px 20px;
}
.g-container {
    height: 400px;
    text-align: center;
    margin: 0;
    background-color: #051765;
    padding: 12px 20px;
}
.g-audlink {
text-decoration: none;
color: greenyellow;
}
.banner-mizano {
    margin: 20px;
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
}
.shn-cr {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      background: #111;
      border: 2px solid #ff00c8;
      padding: 20px 30px;
      border-radius: 16px;
      max-width: 1000px;
      width: 95%;
      box-shadow: 0 0 15px rgba(255, 0, 200, 0.3);
      overflow: hidden;
}
/* Shine effect over the entire container */
.shn-cr::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      transform: skewX(-20deg);
      animation: shine 6s infinite;
      z-index: 1;
}
@keyframes shine {
      0% {
        left: -100%;
      }
      100% {
        left: 150%;
      }
}
.shn-cr-br {
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 2;
}
.shn-cr-br img {
      width: 40px;
      height: 40px;
}
.shn-cr-br-nm {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
}
.pr-ms {
      flex-grow: 1;
      color: #ccc;
      font-size: 16px;
      z-index: 2;
}
.pr-ms strong {
      color: #ff00c8;
}
.pr-ms a {
        color: #ff00c8;
        text-decoration: none;
        cursor: cell;
}

/*footer*/
.site-footer {
  background-color: cadetblue;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  padding: 15px 10px;
}
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1100px;
  margin: auto;
}
.footer-logo img {
  max-width: 60px;
  margin-bottom: 8px;
}
.footer-logo h3 {
  margin: 5px 0;
  font-family: 'Nanum Gothic', sans-serif;
}
.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links ul li {
  margin-bottom: 8px;
}
.footer-links ul li a {
  color: #ddd;
  text-decoration: none;
  transition: 0.3s;
}
.footer-links ul li a:hover {
 color: #006450;
}
.footer-contact p {
  margin: 6px 0;
  color: #ddd;
}
.footer-contact i {
  color: #006450;
  margin-right: 6px;
}
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
  margin-top: 15px;
  font-size: 14px;
  color: #dadadaab;
}
/*RESPONSIVENESS*/
@media only screen and (max-width: 768px) {
  .directories {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    height: auto;
  }

  .box, .box0, .box5 {
    font-size: 1.2rem;
    padding: 10px;
    flex-direction: column;
    text-align: center;
  }

  .control-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .step1, .step1_vocabQuiz {
    width: 95%;
    font-size: 1.5rem;
  }

  .info {
    width: 95%;
    font-size: 1rem;
    padding: 8px;
  }

  .listenButton button {
    font-size: 14px;
    padding: 10px 12px;
  }

  .controls button,
  .controlsQuiz button {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .step1Quiz {
    font-size: 0.95rem;
    padding: 10px;
  }

  #helperBtn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    bottom: 15px;
    right: 20px;
  }

  #closeBtn {
    top: 20px;
    right: 30px;
    font-size: 40px;
  }

  #helper a {
    font-size: 18px;
  }

  .finished-messageQuiz {
    font-size: 18px;
  }
}
/* 🧱 Extra Small Screens (e.g. 320px) */
@media only screen and (max-width: 500px) {
  .box, .box0, .box5 {
    font-size: 1.5rem;
    padding: 6px;
  }

  .salmanLogoimg {
    max-width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
  }

  .finished-messageQuiz {
    font-size: 16px;
  }

  .control-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .listenButton button {
    font-size: 13px;
    padding: 8px 10px;
  }

  .step1, .step1_vocabQuiz, .info {
    font-size: 0.9rem;
    font-family: "Open Sans", sans-serif;
  }

  .step1Quiz p {
    font-size: 0.85rem;
  }

  #helperBtn {
    font-size: 18px;
    width: 45px;
    height: 45px;
  }

  #closeBtn {
    font-size: 36px;
  }

  #helper a {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
    .step1_vocab, .step2_vocab, .step3_vocab {
      font-size: 0.95rem;
      padding: 0.5rem;
    }

    .vocab_head {
      font-size: 1.1rem;
      padding: 0.75rem;
    }
}
@media (max-width: 768px) {
      .shn-cr {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px;
      }

      .pr-ms {
        flex-grow: 0;
      }
}
/* Mobile friendly adjustments */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-links ul li {
    display: inline-block;
    margin: 0 10px;
  }
}


/* Kichik ekranlarda Play tugmasini helperBtn o‘lchamiga moslash */
@media only screen and (max-width: 768px) {
    #playButton {
        width: 50px;
        height: 50px;
        font-size: 20px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media only screen and (max-width: 500px) {
    #playButton {
        width: 45px;
        height: 45px;
        font-size: 18px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}


/* Kichik ekranlarda helperSound tugmalarini helperBtn o'lchamiga moslash */
@media only screen and (max-width: 768px) {
    .Hplay-btn, .Hsound-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .Hplay-btn, .Hsound-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}