/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}

/* Navigation Bar */
nav {
background-color: #1a1a2e;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.logo {
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
}

.logo span {
color: #e94560;
}

.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
margin-left: 20px;
}

.nav-links a {
color: #ecf0f1;
text-decoration: none;
padding: 5px 10px;
transition: color 0.3s;
}

.nav-links a:hover, .nav-links a.active {
color: #e94560;
border-bottom: 2px solid #e94560;
}

/* Main Content Area */
.container {
max-width: 1100px;
margin: 2rem auto;
padding: 0 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
overflow: hidden;
}

.hero {
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: white;
text-align: center;
padding: 4rem 1rem;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}

.hero p {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 20px;
}

.hero .location-badge {
display: inline-block;
background: #e94560;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin-bottom: 20px;
}

.hero .bespoke-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.5);
}

.content-section {
padding: 2rem;
}

h2 {
color: #1a1a2e;
margin-bottom: 1rem;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}

h3 {
color: #e94560;
margin-bottom: 1rem;
}

p {
margin-bottom: 1rem;
}

/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}

.card {
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
text-align: center;
border-top: 4px solid #e94560;
transition: transform 0.3s;
}

.card:hover {
transform: translateY(-5px);
}

.card h3 {
margin-bottom: 10px;
color: #1a1a2e;
}

.card .price {
font-size: 1.5rem;
color: #e94560;
font-weight: bold;
margin: 15px 0;
}

.card .bespoke-tag {
display: inline-block;
background: #1a1a2e;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.75rem;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

/* Buttons */
.btn {
display: inline-block;
background: #e94560;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 1rem;
transition: background 0.3s;
}

.btn:hover {
background: #c73e54;
}

.btn-secondary {
background: #1a1a2e;
}

.btn-secondary:hover {
background: #2d2d44;
}

/* Footer */
footer {
background: #1a1a2e;
color: #bdc3c7;
text-align: center;
padding: 2rem;
margin-top: 2rem;
}

footer p {
margin-bottom: 0.5rem;
}

footer .footer-links {
margin-top: 10px;
}

footer .footer-links a {
color: #e94560;
text-decoration: none;
margin: 0 10px;
}

/* Tutor Section Styles */
.tutor-section {
display: flex;
gap: 40px;
align-items: center;
margin: 40px 0;
padding: 20px;
}

.tutor-image {
flex: 1;
max-width: 400px;
}

.tutor-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.tutor-text {
flex: 1.5;
}

.tutor-text h3 {
color: #e94560;
font-size: 1.5rem;
margin-bottom: 10px;
}

.tutor-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
}

.tutor-badge {
background: #f4f4f4;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.85rem;
color: #1a1a2e;
border: 1px solid #ddd;
}

.performance-section {
text-align: center;
margin: 50px 0;
padding: 30px;
background: #f8f8f8;
border-radius: 10px;
}

.performance-section img {
width: 100%;
max-width: 800px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.performance-caption {
font-style: italic;
color: #666;
margin-top: 15px;
}

/* Service Area Banner */
.service-area-banner {
background: linear-gradient(135deg, #1a1a2e, #2d2d44);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin: 30px 0;
}

.service-area-banner h3 {
color: #e94560;
margin-bottom: 15px;
font-size: 1.4rem;
}

.service-area-banner p {
color: #ccc;
line-height: 1.8;
}

.service-area-banner strong {
color: white;
}

/* Service Category Styles */
.service-category {
margin: 40px 0;
}

.category-header {
text-align: center;
margin-bottom: 30px;
}

.category-header p {
color: #666;
font-style: italic;
}

/* Local service notice boxes */
.local-service-notice {
text-align: center;
margin-top: 20px;
padding: 15px;
border-radius: 8px;
}

.local-service-notice.tutorials {
background: #f9f9f9;
}

.local-service-notice.parties {
background: #fff3f3;
border: 1px solid #e94560;
}

.local-service-notice strong {
color: #e94560;
}

.local-service-notice small {
color: #666;
}

/* Contact Form Styles */
.contact-section {
padding: 2rem;
max-width: 700px;
margin: 0 auto;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1a1a2e;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #e94560;
box-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
}

.form-group textarea {
min-height: 120px;
resize: vertical;
}

.form-group select {
cursor: pointer;
}

.form-group .radio-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.form-group .radio-group label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
cursor: pointer;
}

.form-group .radio-group input[type="radio"] {
width: auto;
margin: 0;
}

.submit-btn {
width: 100%;
padding: 15px;
font-size: 1.1rem;
background: #e94560;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}

.submit-btn:hover {
background: #c73e54;
}

.contact-info {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}

.contact-info h3 {
color: #e94560;
margin-bottom: 15px;
}

.contact-info p {
margin-bottom: 10px;
}

.contact-info a {
color: #e94560;
text-decoration: none;
}

.contact-info a:hover {
text-decoration: underline;
}

/* Error message styling */
.error-message {
display: block;
margin-top: 5px;
font-size: 0.85rem;
color: #e94560;
}

/* One-woman team highlight section */
.one-woman-highlight {
background: linear-gradient(135deg, #e94560, #c73e54);
color: white;
text-align: center;
padding: 40px;
border-radius: 10px;
margin: 40px 0;
}

.one-woman-highlight h3 {
color: white;
font-size: 1.8rem;
margin-bottom: 15px;
}

.one-woman-highlight p {
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
}

.one-woman-highlight .icon {
font-size: 3rem;
margin-bottom: 15px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
}
.nav-links {
margin-top: 10px;
}
.nav-links li {
margin-left: 0;
margin-right: 15px;
}
.hero h1 {
font-size: 2rem;
}
.tutor-section {
flex-direction: column;
text-align: center;
}
.tutor-image {
max-width: 100%;
}
.form-group .radio-group {
flex-direction: column;
}
.one-woman-highlight {
padding: 30px;
}
.one-woman-highlight h3 {
font-size: 1.4rem;
}
}