/* Responsive adjustments */
@media (max-width: 768px) {
    .column.left,
    .column.right {
        flex: 0 0 100%; /* Make columns stack on smaller screens */
    }

    .row {
        column-gap: 0;
    }
    .row-review {
         column-gap: 0;
    }
    .row-lessons {
         column-gap: 0;
    }
    
    #reviews-page-dark {
    padding: 1em;
}

#reviews-page {
    padding: 1em;
}
}
    

@media only screen and (max-width: 821px) {
    h1,h2 {
        font-size: 2.8rem;
        letter-spacing: .5px;
        margin-top: 0.5em;
    }
    h3 {
        font-size: 2rem;
    }
    h3.lesson-title {
        font-size: 2rem;
        padding-top: 0;
    }
        .topnav .book-link {
        display: none;
    }

    .topnav .purchase-button {
        display: block;
    }

    .topnav .icon {
        display: block;
        cursor: pointer;
        font-size: 1.7rem;
    }
    
    .topnav nav,
    .topnav .purchase-button {
        display: none;
    }
    
    .topnav.responsive {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F2F9F9; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999; /* Ensure it is on top of other elements */
    }

    .topnav.responsive nav,
    .topnav.responsive .purchase-button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .topnav.responsive nav .nav-center {
        flex-direction: column;
    }

    .topnav.responsive nav .nav-center a {
        padding: 16px;
        font-size: 1rem;
        text-align: center;
        color: #1C394B; /* Ensure text color is visible on dark background */
    }

    .topnav.responsive .nav-center {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}

    .topnav.responsive nav,
    .topnav.responsive .purchase-button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .button-link {
        width: 100%;
        text-align: left;
        padding: 10px 16px;
    }

    .button-no-icon {
        display: block;
        width: 100%;
    }
    
        .button-link {
        width: 100%;
        text-align: left;
        padding: 10px 16px;
    }
    
    .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
    
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
    
     .topnav {
        padding: 3px;
    }

    .topnav a {
        padding: 10px;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
    }

    .topnav a.logo {
        padding: 10px;
        letter-spacing: 0.5px;
    }

/* END OF NAV STYLES */

   
      .column-left img {
           max-width: 280px;
      }
      img {
          max-width: 280px;
      }
.row {
    flex-direction: column;
    padding:0;
    }
      .row-review {
   flex-direction: column;
             padding:0;
 }
    .row-lessons {
        flex-direction: column;
        padding:1em;
 }
    .row-lessons.box-shadow {
    padding: 1em;
}
    .column-left-lessons {
    width: 100%;
    padding: 1em; /* Adjust padding as needed */
    text-align: left;
}

.column-right-lessons {
    width: 100%;    padding: 1em; /* Adjust padding as needed */
    text-align: center;
}
      #about {
    padding: 2em;
}
    #book {
        margin-top: 70px;
        padding: 2em;
}
      #book-sample {
          padding: 2em;
      }
      
    #title {
          margin-top: 70px;
    padding: 1em 2em;
}

    #reviews {
    padding: 2em;
}
    
.review-text-white {
padding: .5em;
}
    .leftreview{
        font-size: 1.8rem;
        text-align: left;
}
    .button-container {
        flex-wrap: wrap;
}
         .button-container-center {
          flex-wrap: wrap;
}
      
      
 /* Footer Styles */
    
    .footer {
    padding: 20px 10px;
    display: block;
    margin: auto;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}
      
      .footer .right-footer{
          width: 100%;
          padding-top: 24px;
          padding-bottom: 16px;
      }
    
       .footer .logo-footer {
 display: block;
           width: 100%;
           margin: auto;
  }
    
   .footer a {
  text-align: center;
  padding: 24px 16px;
}
      .footer p {
  text-align: center;
          padding: 8px;
}
    
  }

  @media only screen and (min-width: 1900px) {
    .gallery-cont {
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  }
}