/* ============================================ PREMIUM CONTACT FORM STYLING Add this file as: css/premium-form.css Then link it in AFTER your theme's main CSS: ============================================ */ .contact-form-inner { max-width: 1100px; margin: 0 auto; padding: 20px; } .contact-form-inner .sec-title.centred h2 { font-size: 42px; font-weight: 700; letter-spacing: -0.5px; color: #1a1a1a; } /* Form fields */ .default-form .form-group { margin-bottom: 22px; } .default-form .form-group input[type="text"], .default-form .form-group input[type="email"], .default-form .form-group input[type="tel"], .default-form .form-group textarea { width: 100%; background: #ffffff; border: 1.5px solid #e4e4e7; border-radius: 10px; padding: 18px 22px; font-size: 15px; color: #1a1a1a; transition: all 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .default-form .form-group input::placeholder, .default-form .form-group textarea::placeholder { color: #9a9a9a; } .default-form .form-group input:focus, .default-form .form-group textarea:focus { outline: none; border-color: #e6342a; box-shadow: 0 4px 16px rgba(230, 52, 42, 0.12); background: #fffdfd; } /* Select / dropdown styling */ .default-form .select-box { position: relative; } .default-form .select-box select.wide, .default-form select.wide { width: 100%; background: #ffffff; border: 1.5px solid #e4e4e7; border-radius: 10px; padding: 18px 22px; font-size: 15px; color: #1a1a1a; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.02); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; } .default-form .select-box select.wide:focus, .default-form select.wide:focus { outline: none; border-color: #e6342a; box-shadow: 0 4px 16px rgba(230, 52, 42, 0.12); } .default-form .select-box select.wide:hover, .default-form select.wide:hover { border-color: #cfcfcf; } /* Country code + phone row */ .default-form .form-group .row.clearfix > .col-4 .select-box select.wide { padding-left: 16px; padding-right: 34px; font-weight: 500; } /* Submit button */ .default-form .theme-btn-two { background: linear-gradient(135deg, #e6342a, #c92a20); color: #fff; border: none; padding: 18px 46px; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; border-radius: 10px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 6px 20px rgba(230, 52, 42, 0.28); } .default-form .theme-btn-two:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(230, 52, 42, 0.35); background: linear-gradient(135deg, #d92e24, #b8241b); } .default-form .theme-btn-two i { margin-right: 8px; } /* Subtle card wrapper feel for the whole form */ .form-inner { background: linear-gradient(145deg, #ffffff 0%, #fff5f4 45%, #ffe9e7 100%); border: 1px solid #ffe0dd; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(230, 52, 42, 0.08), 0 2px 12px rgba(0,0,0,0.03); position: relative; overflow: hidden; } .form-inner::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(230,52,42,0.10) 0%, rgba(230,52,42,0) 70%); border-radius: 50%; pointer-events: none; } .form-inner::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(230,52,42,0.06) 0%, rgba(230,52,42,0) 70%); border-radius: 50%; pointer-events: none; } .form-inner .row.clearfix { position: relative; z-index: 1; } /* Responsive tweak */ @media (max-width: 768px) { .form-inner { padding: 24px; border-radius: 14px; } .contact-form-inner .sec-title.centred h2 { font-size: 28px; } }