#contact {
    width: 100%;
    margin: 0 auto;
    margin-top: 10rem; /* 예시. 헤더 높이에 따라 조정 */
    margin-bottom: 4rem;
  }
  
  /* 섹션 타이틀 */
  .section-title {
    font-size: 5em;
    text-align: left;
    width: 96%;
    margin: 0 auto;
    line-height: 1.1;
  }
  
  .desktop-title {
    display: inline;
  }
  .mobile-title {
    display: none;
  }

  .mobile-title span {
    display: none !important;
  }

  .section-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
  }
  
  .section-title.visible span {
    animation: fadeUp 1.5s ease forwards;
  }
  
  /* 개별 span 애니메이션 딜레이 */
  .section-title.visible span:nth-child(1)  { animation-delay: 0s; }
  .section-title.visible span:nth-child(2)  { animation-delay: 0.05s; }
  .section-title.visible span:nth-child(3)  { animation-delay: 0.1s; }
  .section-title.visible span:nth-child(4)  { animation-delay: 0.15s; }
  .section-title.visible span:nth-child(5)  { animation-delay: 0.2s; }
  .section-title.visible span:nth-child(6)  { animation-delay: 0.25s; }
  .section-title.visible span:nth-child(7)  { animation-delay: 0.3s; }
  .section-title.visible span:nth-child(8)  { animation-delay: 0.35s; }
  .section-title.visible span:nth-child(9)  { animation-delay: 0.4s; }
  .section-title.visible span:nth-child(10) { animation-delay: 0.45s; }
  .section-title.visible span:nth-child(11) { animation-delay: 0.5s; }
  .section-title.visible span:nth-child(12) { animation-delay: 0.55s; }
  .section-title.visible span:nth-child(13) { animation-delay: 0.6s; }
  .section-title.visible span:nth-child(14) { animation-delay: 0.65s; }
  .section-title.visible span:nth-child(15) { animation-delay: 0.7s; }
  .section-title.visible span:nth-child(16) { animation-delay: 0.75s; }
  .section-title.visible span:nth-child(17) { animation-delay: 0.8s; }
  .section-title.visible span:nth-child(18) { animation-delay: 0.85s; }
  .section-title.visible span:nth-child(19) { animation-delay: 0.9s; }
  .section-title.visible span:nth-child(20) { animation-delay: 0.95s; }
  .section-title.visible span:nth-child(21) { animation-delay: 1s; }
  .section-title.visible span:nth-child(22) { animation-delay: 1.05s; }
  .section-title.visible span:nth-child(23) { animation-delay: 1.1s; }
  .section-title.visible span:nth-child(24) { animation-delay: 1.15s; }
  .section-title.visible span:nth-child(25) { animation-delay: 1.2s; }
  .section-title.visible span:nth-child(26) { animation-delay: 1.25s; }
  .section-title.visible span:nth-child(27) { animation-delay: 1.3s; }
  .section-title.visible span:nth-child(28) { animation-delay: 1.35s; }
  .section-title.visible span:nth-child(29) { animation-delay: 1.4s; }
  .section-title.visible span:nth-child(30) { animation-delay: 1.45s; }
  .section-title.visible span:nth-child(31) { animation-delay: 1.5s; }
  .section-title.visible span:nth-child(32) { animation-delay: 1.55s; }
  .section-title.visible span:nth-child(33) { animation-delay: 1.6s; }
  .section-title.visible span:nth-child(34) { animation-delay: 1.65s; }
  .section-title.visible span:nth-child(35) { animation-delay: 1.7s; }
  .section-title.visible span:nth-child(36) { animation-delay: 1.75s; }
  .section-title.visible span:nth-child(37) { animation-delay: 1.8s; }
  .section-title.visible span:nth-child(38) { animation-delay: 1.85s; }
  .section-title.visible span:nth-child(39) { animation-delay: 1.9s; }
  .section-title.visible span:nth-child(40) { animation-delay: 1.95s; }
  .section-title.visible span:nth-child(41) { animation-delay: 2s; }
  .section-title.visible span:nth-child(42) { animation-delay: 2.05s; }
  .section-title.visible span:nth-child(43) { animation-delay: 2.1s; }
  
  /* Fade-up 애니메이션 */
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  #contact-img {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 40vw;
  }
  
  #contact-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* 초기에는 안보이게 설정 */
    animation: fadeIn 2s ease-in forwards; /* 2초 동안 서서히 나타나도록 애니메이션 적용 */
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  .contact-form {
    width: 100%;
    background-color: white;
    padding: 4rem 2%;
  }
  
  .sub-title {
    font-size: 5rem;
    font-weight: 700;
    color: #111;
    text-align: left;
    width: 96%;
    margin-bottom: 3rem;
    line-height: 1.3;
  }

  .form-row {
    display: flex;
    gap: 20px;
  }
  
  .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
  }
  
  label {
    color: #888;
    margin-bottom: 8px;
    font-size: 1rem;
  }
  
  input, textarea {
    border: none;
    border-bottom: 1px solid #aaa;
    padding: 8px 4px;
    font-size: 16px;
    background-color: transparent;
    outline: none;
    resize: none;
  }
  
  input:focus, textarea:focus {
    border-bottom: 1px solid #333;
  }
  
  .contact-submit {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
    text-decoration: none;
    padding: 0.8em 4em;
    border-radius: 999px;
    background-color: #111;
    border: 1px solid #111;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease;
  }
  
  .contact-submit:hover {
    background-color: white;
    border: 1px solid #111;
    color: #131313;
  }


  @media (max-width: 768px){
    #contact {
        margin-top: 15rem;
        margin-bottom: 8rem;
    }

    .contact-submit {
    font-size: 5vw;
    width: 100%;
  }
    .section-title {
        font-size: 13vw;
        width: 92%;
    }

    .desktop-title {
      display: none !important;
    }
    .mobile-title {
      display: inline !important;
    }

    .mobile-title span {
      display: inline !important;
    }

    #contact-img {
      height: 80vw; /* 작은 화면에서는 높이를 조금 더 늘려서 보여줍니다 */
    }

    /* Adjust contact form padding */
    .contact-form {
        padding: 8rem 4%;
    }

    .sub-title {
      font-size: 12vw;
      text-align: left;
      margin-bottom: 3rem;
      line-height: 1.3;
    }

    input, textarea {
      border-bottom: 1px solid #aaa !important;
    }

    /* Ensure the preview image is responsive */
    #category-preview-image {
        width: 100%;
        height: auto;
    }
}