#TellUsWhatYouNeed { padding-top: 20px; padding-bottom: 0; } section[data-cattype="322"] { position: relative; overflow: hidden; padding: 80px 20px; text-align: center; background: linear-gradient( 45deg, #FAF3E0, #FFD97D, #FFA6A6, #8ECDF2, #93E1C0, #FAF3E0, #FFD97D ); background-size: 600% 100%; animation: smoothGradient 5s ease-in-out infinite alternate; position: relative; overflow: visible; } @keyframes smoothGradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } section[data-cattype="322"]::before, section[data-cattype="322"]::after { content: ""; position: absolute; left: 0; width: 100%; top: 0; height: 480px; background: linear-gradient(to bottom, white, transparent); z-index: 1; } section[data-cattype="322"]::after { top: auto; bottom: 0; background: linear-gradient(to top, white, transparent); } section[data-cattype="322"] .contact-wrapper { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; } .enquiryForm .form-control { margin-bottom: 6px; } section[data-cattype="322"] #enquiry_type{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7931e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 30px 30px; cursor: pointer; } section[data-cattype="322"] #enquiry_type:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); } section[data-cattype="322"] .fl-group { position: relative; flex: 1; } section[data-cattype="322"] .fl-label { position: absolute; left: 9px; top: -6px; padding: 3px 9px; font-size: 0.72em; line-height: 1; color: #ccc; background: #ffffff9e; transition: all .2s ease; opacity: 0; visibility: visible; z-index: 1; border-radius: 30px; } section[data-cattype="322"] .form-control:placeholder-shown + .fl-label { opacity: 0; visibility: hidden; transform: translateY(8px); } section[data-cattype="322"] .form-control:not(:placeholder-shown) + .fl-label{ opacity: 1; visibility: visible; transform: none; color: #999; } section[data-cattype="322"] .fl-group:has(select:invalid) .fl-label { opacity: 0; visibility: hidden; transform: translateY(8px); } section[data-cattype="322"] .fl-group:has(select:valid) .fl-label { opacity: 1; visibility: visible; transform: none; color: #333; } section[data-cattype="322"] #enquiry_type:focus{ outline: none; box-shadow: 0 0 0 2px rgba(247,147,30,.25); } section[data-cattype="322"] .planet-img { position: absolute; top: -240px; right: -318px; width: 750px; z-index: 10; } section[data-cattype="322"] .planet-img img { width: 100%; height: auto; display: block; } section[data-cattype="322"] .form-container { padding: 40px; border-radius: 10px; } section[data-cattype="322"] .form-title { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #333; } section[data-cattype="322"] .form-desc { font-size: 16px; margin-bottom: 30px; } section[data-cattype="322"] .form-row { display: flex; gap: 20px; margin-bottom: 20px; } section[data-cattype="322"] .form-row.full { flex-direction: column; } section[data-cattype="322"] .form-row.center { justify-content: center; } section[data-cattype="322"] .form-control { flex: 1; padding: 12px 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; width: 100%; } section[data-cattype="322"] textarea.form-control { resize: none; } section[data-cattype="322"] .form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; gap: 10px; } section[data-cattype="322"] .form-footer .form-note { font-size: 12px; color: #333; line-height: 1.4; margin: 0; text-align: left; } section[data-cattype="322"] .form-footer .form-note a { color: #f7931e; text-decoration: none; } section[data-cattype="322"] .btn-submit { background: #f7931e; border: none; color: white; font-size: 18px; font-weight: 600; padding: 12px 40px; border-radius: 8px; cursor: pointer; transition: background 0.3s; } section[data-cattype="322"] .btn-submit:hover { background: #333; color: white; } section[data-cattype="322"] .form-note { margin-top: 15px; font-size: 12px; color: #333; } section[data-cattype="322"] .form-note a { color: #f7931e; } @media (min-width: 1025px){ section[data-cattype="322"] .planet-img{ will-change: transform; transform: translateY(0); transition: transform .55s cubic-bezier(.22,.61,.36,1); pointer-events: none; } } @media screen and (min-width: 1024px) and (max-width: 1439px) { section[data-cattype="322"] .form-container{ padding-bottom: 120px; } section[data-cattype="322"] .form-desc{ margin-bottom: 20px; } } @media (min-width: 1024px) and (max-width: 1480px) { section[data-cattype="322"] .planet-img { position: absolute; top: -210px; right: -294px; width: 570px; z-index: 10; pointer-events: none; } section[data-cattype="322"] .form-row { display: flex; gap: 5px; margin-bottom: 5px; } } @media (max-width: 768px) { section[data-cattype="322"] .form-row { flex-direction: column; gap: 2px; margin-bottom: 5px; } section[data-cattype="322"] .planet-img { position: relative; width: 160px; margin: 0 auto 20px; } section[data-cattype="322"] .planet-img { display: none; } section[data-cattype="322"] .form-footer { flex-direction: column; text-align: center; } section[data-cattype="322"] .form-footer .btn-submit { margin-top: 10px; } section[data-cattype="322"] .form-container { padding: 0 15px; } section[data-cattype="322"] .form-footer { flex-direction: column-reverse; text-align: center; margin-top: 0; } section[data-cattype="322"] .form-footer .btn-submit { margin-bottom: 12px; } section[data-cattype="322"] .form-footer .form-note{ text-align: center; } }