@media screen and (max-width: 600px) {
    .learning-container {
        flex-direction: column;
    }
    .lesson-sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid #ddd;
        display: block;
        padding: 10px 0;
        overflow-y: visible;
    }

    .tab-content {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 25px;
            margin-top: 15px;
            border-radius: 5px;
            min-height: 200px;
            width: 100%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
    .article-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

        .article-grid img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
            /* grid-template-columns: repeat(2, 450px); */
            gap: 20px;
            margin: 40px auto;
            max-width: 1100px;
        }


    .form-container {
        width: 100%;
        padding: 15px;
    }

    .signup-body {
        position: relative;
        background-image: url('/images/hero2.jpg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        z-index: 1; 
    }

        /* Inputs and textarea */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="file"],
        input[type="date"],
        textarea {
            width: 100%;
            padding: 10px 12px;
            font-size: 12px;
            border: 1.8px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s ease;
            resize: vertical;
            box-sizing: border-box;
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
        }
    
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        textarea:focus {
            outline: none;
            border-color: #bfa046;
            /* gold */
            background-color: #fff9e6;
            /* light gold background */
        }
    
        /* Textarea specific height */
        textarea {
            min-height: 120px;
        }
    
        .container {
            position: relative;
            width: 100%;
            padding-right: 10px;
        }

    
        .icon {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #000000;
        }
    
        .password-container {
            /* position: relative; */
            position: relative;
            width: 100%;
            padding-right: 10px;
        }
    
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #666;
        }
    
        .gender-box {
            display: flex;
            align-items: center;
            /* justify-content: center; */
            width: 100%;
            /* margin: 10px 0 20px; */
            border: 1.8px solid #ccc;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
        }

        .gender-details {
            margin: 7px;
            padding: 4px;
        }
        
    
        /* eview Image */
        .preview-container {
            display: none;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
    
        .preview-container img {
            max-width: 100%;
            max-height: 150px;
            border-radius: 8px;
            margin-top: 10px;
        
    }

    .event_container{
        width: 100%;
        background-color: #ffffff;
        display: flex;
        height: fit-content;
        flex-direction: column;
        margin-bottom: 20px;

    }

    .event_details {
    width: 100%;
    }

    .event_details img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

    .gallery-card {
    width: calc(50% - 12px);
  }

  .new-hero {
      position: relative;
      width: 100%;
      /* height: 400px; */
      height: fit-content;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      margin-top: 20px;
      padding: 20px 0px;
  }
  
  .hero-content{
      text-align: center;
      color: #000000;
      height: fit-content;
  }

  .video-container {
      width: 100%;
      /* height: 200px; */
  }

  .video-container iframe {
      height: 100%;
      width: 100%;
      border-radius: 8px;
  }
  

 /* .dashboard-container {
     flex-direction: column;
 }

 .sidebar {
     flex: 1 1 100%;
     text-align: center;
 }

 .sidebar ul li a {
     display: inline-block;
     margin: 5px 10px;
 }

 .main-content {
     flex: 1 1 100%;
 }

 .hamburger {
     display: block;
 }

 .sidebar {
     display: none;
 }

 .sidebar.open {
     display: block;
 } */

  .dashboard-container {
      flex-direction: column;
  }

  /* .sidebar {
      width: 100%;
      height: auto;
      position: relative;
  } */

  .sidebar {
      position: fixed;
      left: -240px;
      transition: left 0.3s ease;
  }

    .sidebar.open {
    left: 0;
  }

  /* .main-content {
      padding: 15px;
      width: 100%;
  } */

    .main-content {
    margin-left: 0;
    padding: 20px;
  }

  .course-card2 {
      width: calc(50% - 12px);
      /* width: 100%; */
      flex: 0 0 auto;
      background: #fff;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
  }

 

  .hamburger {
      display: block;
      position: fixed;
      top: 0px;
      /* left: 15px; */
      right: 15px;
      z-index: 1100;
      font-size: 1.5rem;
      background: none;
      border: none;
      color: #000000;
      cursor: pointer;
  }

  .sidebar {
      display: none;
  }

  .sidebar.open {
      display: block;
  }

   .stat-box {
    flex: 1 1 100%; /* Full width on mobile */
  }

}


@media (max-width: 480px) {
    .gallery-card {
        width: 100%;
    }
}