@media (max-width: 550px) { 
    
    .page-wrapper {
                overflow: hidden;
            }
            
            footer, nav {
                flex-direction: column;
                padding: 5px 1%;
                font-size: 16px;
                
            }
            
            nav div:first-child, footer div:first-child {
                border-right: none;
                height: 100%;
                max-height: 174px;
                min-height: 50px;
                vertical-align: middle;
                display: flex; align-items: center; justify-content: center; 
                padding: 5px;
               
            }
            
            nav div:last-child, footer div:last-child {
                border-right: none;
                font-size: 16px;
               
            }
            
         
            
            .audiocontroller img, .gccimg, .rlctraining .adjustms, .compreimg, .topicsenimg, .keyphraseimg, .moviedramaimg, .testimg, .moreexcerimg     {
                display: none;
            }
            
            
.content {
            max-width: 900px;
            margin: 0 auto;
            padding: 30px 0;
            border-right: 1px solid #C8EDFC;
            border-left: 1px solid #C9FBDA;
}


.divider {
            padding: 10px 24px;
            border: none;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 20px;
            background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
            font-size: 14px;
            color: black;
            position: relative;
        }
        
        hr {
            margin: 80px 0;
            text-align: center;
            border: 1px solid #F0F0F0;
            background-color: transparent;
        }
h3 {
    padding: 0;
    margin: 0;
}
section {
    position: relative;
    margin: 50px auto;
}

.section4 .character_reference {
    margin: 20px 3% 40px 3%;
}
.sec2-charf-ref-container img {
    max-width: 60px;
}

.sec2-charm-ref-container img {
    max-width: 60px;
}

.section1 .lesson-topic {
    
    padding: 10px;
    position: relative;
    
    
    
}

.lesson-topic img {
position: absolute;
margin-top: -50px;
left: 0;
width: 120px;
}

.speed_control_items {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 10px 1%;
    position: relative;
}

.speed_control_items label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 20px;
}

.speed_control_items input {
    margin-left: 0;
    width: 100%;
}

.speed_control_items  .show-speed-val {
           position: absolute;
           font-size: 20px;
           color: #1E8AD9;
           right: -10px;
           top: 60px;
       }


.audio-speed-control {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    
    flex-direction: column;
    
}
        
.audio-speed-control .audiolabel {
            text-align: left;
            padding: 2px 10px;
            display: block;
        }
        
        
.audio-speed-control .show-speed-val {
           color: #C7EBF8;
           font-weight: bold;
       }
       
/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
    
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   
   border-radius: 0.5rem;
   height: 1px;  
   box-shadow: 0 0 5px #C8EDFC;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -15px; /* Centers thumb on the track */

   /*custom styles*/
   background: linear-gradient(to left, #3498DB, #0078D7 );
   height: 2rem;
   width: 2rem;
}

input[type="range"]:focus::-webkit-slider-thumb {   
  border: 1px solid #053a5f;
  outline: 3px solid #3498DB;
  outline-offset: 0.125rem; 
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   
   border-radius: 0.5rem;
   height: 1px;
   box-shadow: 0 0 5px #C8EDFC;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/

   /*custom styles*/
   background: linear-gradient(to left, #3498DB, #0078D7 );
   height: 2rem;
   width: 2rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #3498DB;
  outline-offset: 0.125rem; 
}

.pauseSlider {
    transform: scaleX(-1);
    background: linear-gradient(to right, #15C30B, #FF0B00 );
}

.speedSlider {
    background: linear-gradient(to left, #15C30B, #FF0B00 );
}
        
.section2 img {
    position: absolute;
    width: 30%;
    right: -280px;
    top: -100px;
}       

.section2 .show-speed-info {
    display: block;
    position: absolute;
}

.section3 .title {
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}



.section3  .subText {
    margin: 60px 3% 0 3% ;
    line-height: 1.5;
}

.section3  .subText li {
    margin-left: 15px;
    
}

.section3  .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle;
              margin-left: -15px;
              
            }
            
            
.section3  .subText-i {
    margin: 0 3% 0 3% ;
    line-height: 1.5;
}

.section3  .subText-i li {
    margin-left: 15px;
    
}

.section3  .subText-i li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle;
              margin-left: -15px;
              
            }
            
            
.section3 .gccimg {
    position: absolute;
    width: 30%;
    right: -270px;
    top: 300px;
}      


.section3 .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 50px 0;
        }

.section3  .play-audo-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}

.section3  .play-audo-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}

.section3 .ul-items {
    
    margin: 0 3%;
}


.section3 .ul-items li{
    
           display: flex;
            line-height: 1.5;
            margin: 20px auto;
}


.section3 .refresh-icon,
    .section3 .audio-icon,
    .section3 .jp-text,
    .section3 .en-text {
        margin-right: 10px;
    }

    .section3 .jp-text,
    .section3 .en-text {
        flex-grow: 1; 
    }

.section3 .audio-icon {
        margin-top: 2px;
    }
    
.section3 .refresh-icon {
            margin-left: 10px;
        }
        
.section3 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6PX;
        }
        

        
        
.section4 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section4  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section4  .subText li {
    margin-left: 15px;
    
}


.section4 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
.section4  .subText-i {
    margin: 0 3% 0 3% ;
    line-height: 1.5;
}

.section4  .subText-i li {
    margin-left: 15px;
    
}

.section4  .subText-i li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle;
              margin-left: -15px;
              
            }
            
.section4 .adjustms {
    position: absolute;
    width: 30%;
    right: -28%;
    top: 0;
}


       
.section4 .toggle-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          margin: 70px 0 0 0;
          
        }
        
.section4 .toggle-container .toggle-label {
    
          align-self: center;
          padding: 5px 15px;
          background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
          border-radius: 20px;
          color: black;
          cursor: pointer;
        }
        
.section4 .toggle-container .toggle-label:hover {
            background: linear-gradient(to left, #C0C0C0, #C0C0C0 );
        }
        
 .section4 .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 0 0 50px 0;
        }

.section4  .play-audo-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}



.section4  .play-audo-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}       

.section4 .ul-items {
    
    margin: 0 3%;
}
.section4 .ul-items li{
    
            display: flex;
            line-height: 1.5;
            margin: 10px auto;
            text-align: left;
}


.section4 .refresh-icon,
    .section4 .audio-icon,
    .section4 .jp-text,
    .section4 .en-text {
        margin-right: 10px;
    }

    .section4 .jp-text,
    .section4 .en-text {
        flex-grow: 1; 
    }
    
    .section4 .audio-icon {
        margin-top: 2px;
    }

.section4 .refresh-icon {
            margin-left: 10px;
        }
        
.section4 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6px;
        }
        

.section4 .compreimg {
    position: absolute;
    width: 30%;
    right: -32%;
}

.section4 .rlc-comprehension-q {
    margin: 0 3%;
}

.section4 .rlc-topic-s {
    margin: 0 3%;
}


.section4 .topicsenimg {
    position: absolute;
    width: 30%;
    right: -32%;
}

.section4 .sec4-toggle-en-jp {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
}

.section4  .sec4-toggle-en-jp:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}   

.section4 .keyphraseimg {
    position: absolute;
    width: 30%;
    right: -32%;
}
            
   

.section4 .key-phrase-1 {
    margin: 0 3%;
}

.section4 .key-phrase-2 {
    margin: 0 3%;
}

.section4 .moviedramaimg {
    position: absolute;
    width: 30%;
    right: -32%;
    bottom: 0;
}     

.section4 img { display: block; 
margin: 0 auto; 
width: 100%;
}
.section5 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section5  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section5  .subText li {
    margin-left: 15px;
    
}



.section5 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section5  .ul-items {
    
    margin: 0 3%;
}

.section5 .ul-items li{
    
           display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1.5;
}

.section5 .refresh-icon,
    .section5 .audio-icon,
    .section5 .jp-text,
    .section5 .en-text {
        margin-right: 10px;
    }

    .section5 .jp-text,
    .section5 .en-text {
        flex-grow: 1; 
    }

.section5 .refresh-icon {
            margin-left: 10px;
            margin-top: 12px;
        }
        
.section5 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 2px;
        }  

.section5 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        


.section6 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section6  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section6  .subText li {
    margin-left: 15px;
    
}



.section6 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
            
.section6 .moreexcerimg {
    position: absolute;
    width: 30%;
    right: -32%;
    top: -50px;
}




.section7 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section7  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section7  .subText li {
    margin-left: 15px;
    
}


.section7 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
.section7 .adjustms {
    position: absolute;
    width: 30%;
    right: -28%;
    top: 0;
}


       
.section7 .toggle-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          margin: 70px 0 0 0;
          
        }
        
.section7 .toggle-container .toggle-label {
    
          align-self: center;
          padding: 5px 15px;
          background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
          border-radius: 20px;
          color: black;
          cursor: pointer;
        }
        
.section7 .toggle-container .toggle-label:hover {
            background: linear-gradient(to left, #C0C0C0, #C0C0C0 );
        }
        
 .section7 .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 50px 0 50px 0;
        }

.section7  .play-audo-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}

.section7  .play-audo-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}       

.section7 .ul-items {
    
    margin: 0 3%;
}
.section7 .ul-items li{
    
            display: flex;
            line-height: 1.5;
            margin: 10px auto;
            text-align: left;
}


.section7 .refresh-icon,
    .section7 .audio-icon,
    .section7 .jp-text,
    .section7 .en-text {
        margin-right: 10px;
    }

    .section7 .jp-text,
    .section7 .en-text {
        flex-grow: 1; 
    }
    
    .section7 .audio-icon {
        margin-top: 2px;
    }

.section7 .refresh-icon {
            margin-left: 10px;
        }
        
.section7 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6px;
        }


.section8 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section8  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section8  .subText li {
    margin-left: 15px;
    
}


.section8 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
.section8 .adjustms {
    position: absolute;
    width: 30%;
    right: -28%;
    top: 0;
}


       
.section8 .toggle-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          margin: 70px 0 0 0;
          
        }
        
.section8 .toggle-container .toggle-label {
    
          align-self: center;
          padding: 5px 15px;
          background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
          border-radius: 20px;
          color: black;
          cursor: pointer;
        }
        
.section8 .toggle-container .toggle-label:hover {
            background: linear-gradient(to left, #C0C0C0, #C0C0C0 );
        }
        
 .section8 .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 50px 0 50px 0;
        }

.section8  .play-audo-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}

.section8  .play-audo-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}       

.section8 .ul-items {
    
    margin: 0 3%;
}
.section8 .ul-items li{
    
            display: flex;
            line-height: 1.5;
            margin: 10px auto;
            text-align: left;
}


.section8 .refresh-icon,
    .section8 .audio-icon,
    .section8 .jp-text,
    .section8 .en-text {
        margin-right: 10px;
    }

    .section8 .jp-text,
    .section8 .en-text {
        flex-grow: 1; 
    }
    
    .section8 .audio-icon {
        margin-top: 2px;
    }

.section8 .refresh-icon {
            margin-left: 10px;
        }
        
.section8 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6px;
        }


 .refresh-icon {
            cursor: pointer;
        }
        


        
        .refresh-icon img {
            width: 30px;
            height: 30px;
        }
        
        .audio-icon img {
            width: 30px;
            height: 30px;
        }

.study-record {
    margin: 0;
}
.study-record .flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 5px 10px;
  margin-bottom: 0;
  margin-top: 0;
  gap: 0;
}

  .study-record .left-div {
      border-bottom:  1px solid #3498db;
      text-align: left;
  }
  .study-record .right-div {
      border-top: 1px solid #3498db;;
  }
   .study-record .left-div,
  .study-record .right-div
   {
    width: 100%;
    height: 3vh;
    margin: 0;
    padding: 5px 25px;
    margin-bottom: 0;
    margin-top: 0;
    
  }
  .study-record .hexagon-container
 {
      width: 100%;
      height: 3px;
      margin: 0;
      padding: 0;
      background-color: #3498db;
      display: none;
  }
   .study-record .hexagon {
      
      height: 3px;
      margin: 0;
      padding: 0;
      display: none;
   } 
  




.study-record {
            margin: 0 8%;
            display: flex;
            flex-direction: column;

        }
        
        
        
.student-data {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 20px 8%;
}
        
.audio-speed-control {
    margin-bottom: 80px;
}
/* ================================= */

.single-btn-control {
            display: flex;
            justify-content: center;
            line-height: 1.5;
            width: 100%;
            margin: 50px auto;
        }
        
.highlightText {
            font-size: 16px;
            font-weight: bold;
        }





}