header {
    margin: 0 auto;
    position: relative;
}

.box-Contact {
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;     
  gap: 1rem;
  padding: 3rem; 
}


.Contact-bybox{
  margin: 0.5rem;
    padding: 3rem;
  justify-self: center !important;
  align-self: center !important;
      font-size: clamp(18px, 2vw, 28px);
  font-weight: bold;
  color: #070707;
  background: rgba(216, 211, 211, 0.26); /* สีดำโปร่งใส */
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.425),
    0 0 15px rgba(231, 231, 231, 0.25), 0 0 25px rgba(255, 255, 255, 0.15);
  
}

.Contact-bybox a {
  background-color: #111;
  color: white;
  text-decoration: none;
  margin: 2rem auto;
  padding: 1rem 1.5rem;   
  font-size: 1rem;       
  border-radius: var(--radius-small);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;

  border: none; 
  cursor: pointer;
}





button{
    background-color: #111;
  text-decoration: none;
  color: white;

  justify-self: flex-start;
  align-self: flex-start;

  padding: 0.75rem;
  border-radius: var(--radius-small);
  transition: background-color 0.3s ease;
}




@media (max-width: 1024px) {
  .box-Contact {
    display: flex;
    flex-wrap: wrap;
    font-size: 2rem;
    overflow-x: hidden;  
    width: 100%;          
    box-sizing: border-box; 
  }
}


@media (max-width: 768px) {
  .box-Contact {
    display: flex;
    flex-wrap: wrap; 
    gap: 1rem;       
  }

  .box-Contact .Contact {
    flex: 1 1 calc(50% - 1rem); 
    box-sizing: border-box;     
    padding: 1.5rem;           
  }
}



@media (max-width: 480px) {
    .box-Contact {
        padding: 1rem 1rem;
        font-size: 1rem;
    }


}