@media only screen and (min-width: 360px) and (max-width: 640px) {
    .header {
      height: auto;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.207), 0 2px 2px rgba(0, 0, 0, 0.207);
      position: relative;
      z-index: 30;
      margin-bottom: 24px; 
    }
  
    .header-container {
      /* max-width: 100%; 
      display: block;
      margin: 0 auto;
      padding: 10px 20px; */
      
    }
  
    .left-bar {
      height: auto; /* Auto adjust the height */
      display: block; /* Display block for stacking elements vertically */
      align-items: flex-start; /* Align items to the start */
    }
  
    .logo {
      height: 40px; /* Reduce logo size for mobile screens */
      width: 40px;
      margin-bottom: 10px; /* Add some space below the logo */
    }
  
    .logo img {
      height: 40px; /* Make sure the image fits within the logo */
    }
  
    .left-bar nav ul {
      display: block; /* Stack the menu items vertically */
      padding: 0;
      margin: 10px 0; /* Add margin for spacing */
      list-style-type: none;
    }
  
    .left-bar nav ul li {
      text-transform: uppercase;
      padding: 10px 0; /* Increase padding for touch-friendly buttons */
      font-weight: 700;
      letter-spacing: 0.1em;
    }
  
    .right-bar {
      height: auto; /* Adjust height for mobile */
      display: block; /* Stack the right bar elements */
      margin-top: 20px; /* Add some margin for separation */
    }
  
    .join-now,
    .sign-in,
    .find-store {
      margin-right: 0; /* Remove right margin to avoid side overflow */
      margin-bottom: 10px; /* Add bottom margin for spacing between buttons */
      width: 100%; /* Make buttons take full width on mobile */
    }
  
    .join-now {
      padding: 10px 20px; /* Adjust padding for better button sizing */
      border-radius: 50px;
      font-weight: 600;
    }
  
    .sign-in {
      padding: 10px 20px; /* Adjust padding */
      border-radius: 50px;
      font-weight: 600;
    }
  
    .join-now:hover {
      background-color: rgba(0, 0, 0, 0.7);
      border-color: rgba(0, 0, 0, 0.7);
    }
  
    .sign-in:hover {
      background-color: rgba(0, 0, 0, 0.06);
    }
  
    .find-store {
      text-align: center; /* Center-align the "Find a store" text */
    }
  
    .find-store a:hover {
      color: #008240;
    }
    /* ------------ */

    .main-container {
        max-width: 100%; /* Set max width to 100% for smaller screens */
        margin: 0 auto;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.207), 0 2px 2px rgba(0, 0, 0, 0.207);
      }
    
      .section {
        display: block; /* Switch to block for stacking content vertically */
        margin-bottom: 24px; /* Adjust margin */
      }
    
      .section .image {
        width: 100%; /* Full width for the image */
        display: block; /* Change to block */
        margin-bottom: 16px; /* Add space between image and text */
      }
    
      .section .image img {
        width: 100%; /* Ensure image remains responsive */
      }
    
      .section .text {
        width: 100%; /* Make text section full width */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px 24px; /* Adjust padding for smaller screens */
        background-color: #006241;
        letter-spacing: 1px;
      }
    
      .text h1, .text p {
        margin: 0;
        font-weight: 500;
        text-align: center;
      }
    
      .text h1 {
        color: white;
        font-weight: 700;
        font-size: 32px; /* Reduce font size for smaller screens */
        margin-bottom: 16px; /* Adjust margin */
      }
    
      .text p {
        color: white;
        text-align: center;
        font-weight: 550;
        margin-bottom: 24px; /* Adjust margin */
        font-size: 16px; /* Reduce font size */
      }
    
      .text .button {
        padding: 7px 16px;
        border-radius: 50px;
        border: 1px solid;
        color: white;
      }
    
      .text .button a {
        color: white;
        font-weight: 600;
        letter-spacing: 0;
        transition: all 0.2s ease;
      }
    
      .text .button:hover {
        padding: 7px 16px; /* Keep button size consistent on hover */
        background-color: rgba(30, 57, 50, .1);
      }
    
      .second .text {
        background-color: #A3029A;
      }
    
      .second .text h1 {
        font-size: 28px; /* Reduce font size */
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: white;
      }
    
      .second .text p {
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: white;
        font-size: 16px; /* Reduce font size */
      }
    
      .third .text {
        background-color: #98CDE4;
      }
    
      .third .text h1 {
        font-size: 28px; /* Adjust font size */
        font-weight: bold;
        letter-spacing: 1px;
        color: black;
      }
    
      .third .text p {
        letter-spacing: 1px;
        color: black;
        font-size: 16px; /* Adjust font size */
      }
    
      .fourth .text {
        background-color: #97D8B1;
      }
    
      .fourth .text h1 {
        font-size: 24px; /* Adjust font size */
        color: black;
        margin-bottom: 16px; /* Adjust margin */
      }
    
      .fourth .text p {
        font-size: 18px; /* Adjust font size */
        font-weight: 450;
        letter-spacing: 1px;
        color: black;
        margin-bottom: 16px; /* Adjust margin */
        line-height: 24px; /* Adjust line height */
        padding: 16px; /* Adjust padding */
      }
    
      .valid {
        padding: 20px; /* Adjust padding */
        text-align: center;
        font-size: small;
      }
      footer {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.575);
        padding: 16px 0; /* Adjust padding for mobile screens */
        height: auto;
        max-width: 100%; /* Set max-width to 100% for smaller screens */
        margin: 0 auto;
        display: block; /* Switch from flex to block to stack elements vertically */
        margin-bottom: 24px; /* Adjust margin */
      }
    
      .footer-container {
        width: 100%;
        display: block; /* Stack elements vertically */
        padding: 0 20px; /* Reduce side padding for smaller screens */
      }
    
      .links-container {
        width: 100%; /* Full width for links on smaller screens */
        margin-bottom: 16px; /* Add margin between sections */
      }
    
      .links-container li {
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 2.5; /* Adjust line height */
        margin-bottom: 8px; /* Adjust margin */
      }
    
      .social-icons {
        width: 100%; /* Full width for social icons */
        padding: 16px 0; /* Add padding for spacing */
        text-align: center; /* Center align icons */
      }
    
      .social-icons img {
        height: 35px; /* Reduce icon size for smaller screens */
        margin: 0 15px; /* Adjust spacing between icons */
      }
    
      .copyright {
        width: 100%; /* Full width for the copyright section */
        text-align: center; /* Center align text */
      }
    
      .copyright li {
        font-size: 14px; /* Adjust font size */
        line-height: 2; /* Adjust line height */
        margin-bottom: 8px; /* Adjust margin */
      }
    
      .copyright p {
        line-height: 2.5; /* Adjust line height */
        color: rgba(0, 0, 0, 0.58);
      }
  }