/* Mobile responsive layout only.
   Add this file after your existing CSS files. It does not change colors or content. */

@media (max-width: 900px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .navigation-wrapper{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    padding: 15px;
    display: flex;
    flex-direction: row!important;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  .navigation-wrapper > .logo img{
    width: 65px;
  }
  .navigation-wrapper > .center-column{
    width:100%;
  }
  .navigation-wrapper > .center-column > .webpages{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper{
    width:320px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:12px;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link{
    width:auto;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link a{
    display:block;
    padding:8px 14px;
    border-radius:25px;
    font-size:15px;
    letter-spacing:.3px;
  }
  .heading-wrapper{
    width:90%;
    margin:20px auto;
  }
  body > *,main,.page,.page-wrapper,.wrapper,.container,.content,.content-wrapper,.main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }
  img,picture,video,iframe,canvas,svg {
    max-width: 100%;
    height: auto;
  }
  table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
  }
  .signin-section,.payment-section,.courses-section,.course-section,.lectures-section,.live-section,.about-section,.welcome-section,.card{
    height: auto !important;
    min-height: 0;
    overflow-y: visible;
  }
  .signin-section,.payment-section,.courses-section,.course-section,.lectures-section,.live-section,.about-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .signin-section,.payment-section,.courses-section,.course-section,.lectures-section,.live-section,.about-section,.welcome-section,.about-card,.course-card,.lecture-card,.method-card,.content-card,.features,.feature-card,.card,section {
    width: min(100%, 100vw);
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .courses-container,.courses-grid,.course-container,.course-grid,.cards-container,.cards-grid,.lectures-container,.lectures-grid,.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 20px;
    overflow-x: hidden;
  }
  .course-card,.lecture-card,.payment-method,.payment-details,.card {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    overflow-x: hidden;
  }
  .course-card *,.lecture-card *,.card * {
    max-width: 100%;
  }
  form,.form-group,.payment-details {
    width: 100%;
    box-sizing: border-box;
  }
  input,select,textarea,button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .payment-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .payment-method {
    width: 100%;
    box-sizing: border-box;
  }
  .payment-details.active {
    max-height: none;
  }
  h1,h2,h3,p,li,a,label {
    overflow-wrap: anywhere;
  }
    .footer{
      height:auto;
      padding:35px 20px;
  }
  .footer-top{
      display:flex;
      flex-direction:column;
      text-align:center;
      gap:30px;
  }
  .footer-brand{
      display:flex;
      flex-direction:column;
      align-items:center;
  }
  .footer-brand img{
      width:110px;
      margin:0 0 15px;
  }
  .footer-brand p{
      width:100%;
      max-width:500px;
  }
  .footer-links{
      display:grid;
      grid-template-columns:1fr;
      gap:25px;
      text-align:center;
  }
  .footer-column{
      padding-bottom:15px;
      border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-column:last-child{
      border:none;
  }
  .footer-column h3{
      margin-bottom:12px;
  }
  .footer-column a,
  .footer-column p{
      margin-bottom:8px;
  }
  .footer-bottom{
      margin:25px auto 0;
      padding-top:20px;
      width:100%;
  }
}
@media (max-width: 768px) {
  .navigation-wrapper{
      position: sticky;
      top: 0;
      z-index: 1000;

      height: auto;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
  }
  .navigation-wrapper > .logo img{
      width: 65px;
  }
  .navigation-wrapper > .center-column{
      width:100%;
  }
  .navigation-wrapper > .center-column > .webpages{
      width:100%;
      display:flex;
      justify-content:center;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:12px;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link{
      width:auto;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link a{
      display:block;
      padding:8px 14px;
      border-radius:25px;
      font-size:15px;
      letter-spacing:.3px;
  }
  .heading-wrapper{
      width:90%;
      margin:20px auto;
  }
  .footer{
      height:auto;
      padding:35px 20px;
  }
  .footer-top{
      display:flex;
      flex-direction:column;
      text-align:center;
      gap:30px;
  }
  .footer-brand{
      display:flex;
      flex-direction:column;
      align-items:center;
  }
  .footer-brand img{
      width:110px;
      margin:0 0 15px;
  }
  .footer-brand p{
      width:100%;
      max-width:500px;
  }
  .footer-links{
      display:grid;
      grid-template-columns:1fr;
      gap:25px;
      text-align:center;
  }
  .footer-column{
      padding-bottom:15px;
      border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-column:last-child{
      border:none;
  }
  .footer-column h3{
      margin-bottom:12px;
  }
  .footer-column a,.footer-column p{
      margin-bottom:8px;
  }
  .footer-bottom{
      margin:25px auto 0;
      padding-top:20px;
      width:100%;
  }
}
@media (max-width: 600px) {
  body {
    min-width: 0;
  }
    .navigation-wrapper{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  .navigation-wrapper > .logo img{
      width: 65px;
  }
  .navigation-wrapper > .center-column{
      width:100%;
  }
  .navigation-wrapper > .center-column > .webpages{
      width:100%;
      display:flex;
      justify-content:center;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:12px;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link{
      width:auto;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link a{
      display:block;
      padding:8px 14px;
      border-radius:25px;
      font-size:15px;
      letter-spacing:.3px;
  }
  .heading-wrapper{
      width:90%;
      margin:20px auto;
  }
  .signin-section,.payment-section,.courses-section,.course-section,.lectures-section,.live-section,.about-section,.welcome-section,.about-card,.course-card,.lecture-card,.content-card,.features,.feature-card,.card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .course-card,.lecture-card,.payment-method,.payment-details,.card {
    width: calc(100vw - 32px);
  }
  .courses-container,.courses-grid,.course-container,.course-grid,.lectures-container,.lectures-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .courses-container > *,.courses-grid > *,.course-container > *,.course-grid > *,.lectures-container > *,.lectures-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  [class*="hero"] img,[class*="banner"] img,.index img,.home img {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  form {
    display: flex;
    flex-direction: column;
  }
  input,select,textarea {
    width: 100%;
  }
  button,.signin-button,.submit-payment {
    width: 100%;
  }
  .payment-details div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .footer{
      height:auto;
      padding:35px 20px;
  }
  .footer-top{
      display:flex;
      flex-direction:column;
      text-align:center;
      gap:30px;
  }
  .footer-brand{
      display:flex;
      flex-direction:column;
      align-items:center;
  }
  .footer-brand img{
      width:110px;
      margin:0 0 15px;
  }
  .footer-brand p{
      width:100%;
      max-width:500px;
  }
  .footer-links{
      display:grid;
      grid-template-columns:1fr;
      gap:25px;
      text-align:center;
  }
  .footer-column{
      padding-bottom:15px;
      border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-column:last-child{
      border:none;
  }
  .footer-column h3{
      margin-bottom:12px;
  }
  .footer-column a,
  .footer-column p{
      margin-bottom:8px;
  }
  .footer-bottom{
      margin:25px auto 0;
      padding-top:20px;
      width:100%;
  }
}
@media (max-width: 420px) {
    .navigation-wrapper{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  .navigation-wrapper > .logo img{
      width: 65px;
  }
  .navigation-wrapper > .center-column{
      width:100%;
  }
  .navigation-wrapper > .center-column > .webpages{
      width:100%;
      display:flex;
      justify-content:center;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:12px;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link{
      width:auto;
  }
  .navigation-wrapper > .center-column > .webpages > .links-wrapper > .nav-link a{
      display:block;
      padding:8px 14px;
      border-radius:25px;
      font-size:15px;
      letter-spacing:.3px;
  }
  .heading-wrapper{
      width:90%;
      margin:20px auto;
  }
  .signin-section,.payment-section,.courses-section,.course-section,.lectures-section,.live-section,.about-section,.welcome-section,.about-card,.course-card,.lecture-card,.content-card,.features,.feature-card,.card {
    padding-left: 12px;
    padding-right: 12px;
  }
  .course-card,.lecture-card,.payment-method,.payment-details,.card {
    width: calc(100vw - 24px);
  }
  .footer{
      height:auto;
      padding:35px 20px;
  }
  .footer-top{
      display:flex;
      flex-direction:column;
      text-align:center;
      gap:30px;
  }
  .footer-brand{
      display:flex;
      flex-direction:column;
      align-items:center;
  }
  .footer-brand img{
      width:110px;
      margin:0 0 15px;
  }
  .footer-brand p{
      width:100%;
      max-width:500px;
  }
  .footer-links{
      display:grid;
      grid-template-columns:1fr;
      gap:25px;
      text-align:center;
  }
  .footer-column{
      padding-bottom:15px;
      border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-column:last-child{
      border:none;
  }
  .footer-column h3{
      margin-bottom:12px;
  }
  .footer-column a,
  .footer-column p{
      margin-bottom:8px;
  }
  .footer-bottom{
      margin:25px auto 0;
      padding-top:20px;
      width:100%;
  }
}