#contactForm {
    width: 100%;
    padding: 0 2rem;
    text-align: center;
}

.form-group {
    position: relative;
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    color: #005197;
    position: absolute;
    top: 0.5rem;
    transition: all 0.4s ease;
}

.form-group .form-input:focus ~ label, 
.form-group .form-input:not(:placeholder-shown) ~ label{
   transform: translateY(-110%);
   color: var(--primary-color);
 }

input,
textarea {
    height: 3rem;
    padding: 10px 0;
    transition: border-color 0.3s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    border: 10px solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(to left, #005197, #339f5b, #005197);
}

input:focus,
textarea:focus {
    border-color: #3498db;
    color: #005197;
}

/* สถานะ Error */
input.error,
textarea.error {
    color: #e74c3c;
    background: #fff5f5;
}

/* สถานะ Success */
input.success,
textarea.success {
    color: #005197;
}

.error-msg {
    color: #e74c3c;
    font-size: 0.82rem;
    min-height: 18px;
    display: block;
    text-align: left;
}

button[type="submit"] {
    // padding: 12px 32px;
    // background: #2c3e50;
    // color: white;
    // border: none;
    // border-radius: 999px;
    // font-size: 1rem;
    // font-weight: bold;
    // cursor: pointer;
    // transition: background 0.3s;
}

button[type="submit"]:hover {
    // background: #e67e22;
}

.custom-btn {
   color: #005197;
   border-radius: 12px;
   padding: 3px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   margin: auto;
   display: inline-block;
   outline: none;
}

.btn-6 {
   background: #005197;
   background: linear-gradient(to bottom, #339f5b 0%, #005197 100%);
}

.btn-6 span {
   position: relative;
   text-transform: uppercase;
   font-family: 'Lato';
   display: block;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 10px;
   padding: 5px 10px;
   transition: all 500ms ease;
}

.btn-6:before,
.btn-6:after {
   position: absolute;
   content: "";
   height: 100%;
   width: 1px;
   box-shadow:
      -1px -1px 20px 0px rgba(255, 255, 255, 1),
      -4px -4px 5px 0px rgba(255, 255, 255, 1),
      7px 7px 20px 0px rgba(0, 0, 0, .4),
      4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6:before {
   right: 0;
   top: 0;
   transition: all 500ms ease;
}

.btn-6:after {
   left: 0;
   bottom: 0;
   transition: all 500ms ease;
}

.btn-6:hover {
   color: #fff;
   box-shadow: none;
   background: linear-gradient(to left, #339f5b 0%, #005197 100%);
}

.btn-6:hover span {
      background: transparent;

}

.btn-6:hover:before {
   transition: all 500ms ease;
   height: 100%;
}

.btn-6:hover:after {
   transition: all 500ms ease;
   height: 100%;
}

.btn-6 span:before,
.btn-6 span:after {
   position: absolute;
   content: "";
   box-shadow:
      -1px -1px 20px 0px rgba(255, 255, 255, 1),
      -4px -4px 5px 0px rgba(255, 255, 255, 1),
      7px 7px 20px 0px rgba(0, 0, 0, .4),
      4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.btn-6 span:before {
   left: 0;
   top: 0;
   width: 100%;
   height: .5px;
   transition: all 500ms ;
}

.btn-6 span:after {
   right: 0;
   bottom: 0;
   width: 100%;
   height: .5px;
   transition: all 500ms ;
}

.btn-6 span:hover:before {
   width: 0;
}

.btn-6 span:hover:after {
   width: 0;
}

.btn-6:hover:before,
.btn-6:hover:after {
   height: 0;
}