@media screen and (max-width : 922px) {
    .layout, .layout2 {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
      }
    
      .textmisi, .textvisi {
        max-width: 80%; /* Make text take more space on smaller screens */
        padding-left: 0;
        padding-right: 0;
      }
    
      .image {
        max-width: 80%; /* Adjust image width to fit smaller screen */
      }
    
      .layout .textmisi h1, .layout2 .textvisi h1 {
        font-size: clamp(2.5rem, 2.5rem + 0.75vw, 3rem); /* Smaller font size */
        padding-left: 0;
        padding-right: 0;
      }
    
      .layout .textmisi p, .layout2 .textvisi p {
        font-size: 16px; /* Smaller font size */
        padding-left: 0;
        padding-right: 0;
      }
    
      .layout .textmisi hr, .layout2 .textvisi hr {
        width: 12rem; /* Adjust width of the line */
      }
      #contact .container {
        padding: 10px 0 10px 0;
    }
    .kontak a {
        display:unset;
    }
}


@media screen and (max-width : 350px) {

    .static-display {
        flex-direction: column; /* Stack images vertically */
        height: 500px;
        gap: 1.5rem; /* Add space between the images */
      }
    
      .static-item {
        max-width: 100%; /* Allow each item to take full width */
        height: 180px; /* Further reduce height for small screens */
      }

      .layout, .layout2 {
        padding: 2rem 0px 1rem 0rem;
      }
    
      .textmisi, .textvisi {
        max-width: 100%;
      }
    
      .layout .textmisi h1, .layout2 .textvisi h1 {
        font-size: clamp(1.5rem, 1.5rem + 0.75vw, 2rem);
        padding-left: 0;
        padding-right: 0;
      }
    
      .layout .textmisi p, .layout2 .textvisi p {
        font-size: 12px;
      }
    
      .layout .textmisi hr, .layout2 .textvisi hr {
        width: 8rem;
      }
      .kontak a {
        display:unset;
    }

    
}