/* ------------------navbar-------------------------- */
/* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
    header {
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center elements */
      padding: 10px; /* Reduce padding */
    }
  
    .logo {
      float: none; /* Remove floating */
      margin-right: 0;
      margin-bottom: 10px; /* Add bottom margin */
    }
  
    .logo img {
      height: 40px; /* Reduce logo size */
    }
  
    nav ul {
      float: none; /* Remove floating */
      text-align: center; /* Center navigation items */
    }
  
    nav li {
      display: block; /* Make navigation items block-level */
      margin-left: 0;
      margin-bottom: 10px; /* Add bottom margin */
    }
  }
/* ------------------------------------hero container2-------------------------------- */
  /* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
    .hero {
      flex-direction: column; /* Stack elements vertically */
      padding: 30px; /* Reduce padding */
      column-count: 1; /* Remove column count */
    }
  
    .class {
      width: 100%; /* Make class take up full width */
      justify-content: center; /* Center content */
    }
  
    .container2 {
      margin: 20px 0; /* Adjust margins */
    }
  
    .hero h1 {
      font-size: 3rem; /* Reduce font size */
    }
  }
/* -------------------------------features------------------------ */
  /* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
    .features-grid {
      grid-template-columns: 1fr; /* Change to one column */
    }
  
    .feature {
      padding: 20px; /* Reduce padding */
    }
  }
  /* -----------------------------partners---------------------------- */
  /* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
    .partners-grid {
      grid-template-columns: repeat(2, 1fr); /* Change to two columns */
    }
  
    .partner {
      padding: 10px; /* Reduce padding */
    }
  }
  /* -----------------------------------footer-------------------------- */
  /* Media query for smaller screens (360px to 640px) */
@media only screen and (min-width: 360px) and (max-width: 640px) {
    .footer-grid {
      flex-direction: column; /* Stack elements vertically */
      align-items: flex-start; /* Align elements to the left */
    }
  
    .footer-column {
      margin-bottom: 20px; /* Add bottom margin */
    }
  
    .btn2 {
      margin-top: 10px; /* Adjust margin for spacing */
      margin-left: 0; /* Remove left margin */
    }
  }