/* CSS Mobile Version*/

@media only screen and (max-width: 768px) {
.card {
    flex: 0 0 100%; /* Full width on smaller screens */
    margin-bottom: 10px; /* Optional: Add margin between stacked columns */
	
  }
  
 
body	{
	width: 100%;
	margin: auto;
}

.header {
	padding: 10px 20px 10px 20px;
	background-color: #fff;
	text-align: center;
}

.logo img {
	display: none;
}
#navMenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 30px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  

  .hamburger {
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background-color: #333;
      margin: 4px 0;
    }
	  
	.nav-links {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      background-color: #fff;
      padding: 0 20px;
      text-align: right;
    }

    .nav-links.active {
      max-height: 300px;
      padding: 10px 20px;
    }

    .nav-links nav {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
    }

    .nav-links nav a {
      padding: 10px 0;
    }
	
.content {
	padding: 10px 20px 10px 20px;
	background-color: #fff;
}

.container {
	display: flex;
	flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
	justify-content: center;
	margin: 0;
}
 .column-40,
 .column-50,
 .column-60,
  .column-100 {
    flex: 0 0 100%; /* Full width on smaller screens */
    margin-bottom: 10px; /* Optional: Add margin between stacked columns */
	padding: 0;
	
  }
  
  
  .refer {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 0.5rem;
	margin: 0;
  }

.refer a img {
    width: 100%; /* Make the image fill its container */
    height: auto%; /* Maintain aspect ratio */
  }
	



}