diff --git a/style.css b/style.css index 15ecffb..65b4d0f 100644 --- a/style.css +++ b/style.css @@ -375,40 +375,86 @@ li a:hover { } .booking-form { - background-color: #ffffff; - padding: 20px; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: #f0f0f0; + padding: 40px; + border-radius: 20px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - width: 100%; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + width: 80%; + margin: 50px auto; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + transition: transform 0.4s ease; +} + +.booking-form:hover { + transform: translateY(-10px); } .form-group { display: flex; flex-direction: column; + gap: 15px; + text-align: center; } .form-group label { - margin-bottom: 5px; font-weight: bold; + font-size: 18px; + color: #333; + text-transform: uppercase; + margin-bottom: 10px; } .form-group input, .form-group select { - padding: 10px; + padding: 14px; border: 2px solid orangered; - border-radius: 5px; + border-radius: 8px; font-size: 16px; + transition: all 0.3s ease; + background-color: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .form-group input:focus, .form-group select:focus { outline: none; - border-color: orangered; + border-color: #ff6347; + box-shadow: 0 0 8px rgba(255, 99, 71, 0.5); } +.form-group select { + appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 4 5%22%3E%3Cpath fill%3D%22%23000000%22 d%3D%22M2 0L0 2h4z%22/%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 12px 12px; +} + +.booking-form button { + background-color: orangered; + color: white; + padding: 14px; + border: none; + border-radius: 5px; + font-size: 18px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; +} + +.booking-form button:hover { + background-color: #b22222; /* Darker shade on hover */ + transform: translateY(-3px); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.booking-form button:active { + transform: translateY(0); +} + + #bookNow { background-color: orangered; color: white;