/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */


section[data-module="test"] {}



section[data-module="test"] body {
            font-family: 'Zen Maru Gothic', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

section[data-module="test"] .contact-form {
            background: #black;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }

section[data-module="test"] .contact-form h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
}

section[data-module="test"] .contact-form input,
section[data-module="test"] .contact-form textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
}

section[data-module="test"] .contact-form textarea {
            resize: none;
            height: 120px;
}

section[data-module="test"] .contact-form .button-container {
            text-align: center;
}
section[data-module="test"] #titlename{
			font-family: 'Zen Maru Gothic', sans-serif;
			color:#A4B17C;
			font-size:40px;
			
}
section[data-module="test"] #buttonSubmit {
    display: block;
    margin: 20px auto;
    color: black; 
    padding: 20px 53px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 1px solid #A4B17C; 
    background-color: #fff;
}

section[data-module="test"] #buttonSubmit::before {
  content: '';
    position: absolute;
  bottom: 91px;
    left: 705px;
  width: 18%;
  height: 62px;
    height: 62px;
    background-color: #A4B17C; 
    border-radius: 30px; 
    z-index: 2;
    transition: all 0.3s ease;
}

section[data-module="test"] #buttonSubmit:hover::before {
            width: 240px;
}

section[data-module="test"] #buttonSubmit:hover {
  background: transparent; / 
    color: black; / 
}

section[data-module="test"] #buttonSubmit i {
  color: black;
  margin-right: 10px;
  z-index: 20;
  position: relative;
  left: 40px;
  transition: all 0.3s ease;
  transform: rotate(-40deg);
  font-size: 20px;
}

section[data-module="test"] #buttonSubmit:hover i {
               color: black; 
    transform: rotate(-91deg); 
}

section[data-module="test"]  #buttonSubmit .inner {
    color: black;
    position: relative;
    z-index: 20;
    left: -20px;
    font-size: 18px;
    transition: all 0.3s ease;
}
section[data-module="test"]  #buttonSubmit:hover .inner {
    color: black !important;
    left: 14px;
}

/* Typical laptop screen size*/
@media (max-width: 1400px) {
	
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 1038px) {
	   section[data-module="test"] #buttonSubmit::before {
  content: '';
  position: absolute;
  bottom: 92px;
  left: 650px;
  width: 18%;
  height: 62px;
  height: 62px;
  background-color: #A4B17C;
  border-radius: 30px;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Mobile screen size */
@media (max-width: 480px) {
      section[data-module="test"] #buttonSubmit::before {
  content: '';
  position: absolute;
  bottom: 92px;
  left: 80px;
}