/* --- RESET & VARIABLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --brand-red: #7a1b29;
    --grey-bg: #e1e1e1;
    --text-dark: #333;
    --text-light: #666;
}
body { font-family: 'Inter', sans-serif; color: var(--text-dark); line-height: 1.5; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* --- HEADER --- */
.top-info { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-light); padding: 10px 40px; }
.address { text-align: right; }

.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; }
.logo-header { width: 180px; height: auto; display: block; }
.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a { text-decoration: none; font-size: 12px; font-weight: 700; color: var(--text-light); transition: 0.3s; }
.nav-links a.active { color: var(--brand-red); border-right: 2px solid var(--brand-red); padding-right: 5px; }
.nav-links a:hover { color: var(--brand-red); }

/* --- HERO --- */
.hero-container { width: 100%; height: 350px; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* --- WELCOME AREA --- */
.welcome-area { padding: 60px 0; }
.main-title { text-align: center; font-size: 22px; margin-bottom: 50px; font-weight: 700; color: #444; }

.welcome-flex { display: flex; gap: 50px; align-items: flex-start; }
.welcome-text { flex: 1.5; }
.welcome-text h2 { font-size: 24px; font-weight: 400; margin-bottom: 25px; line-height: 1.2; }
.highlight { color: var(--brand-red); font-weight: 800; }
.welcome-text p { font-size: 14px; color: #555; margin-bottom: 20px; text-align: justify; }

.welcome-image { flex: 1; }
.welcome-image img { width: 100%; height: auto; display: block; border: 1px solid #ddd; }

/* --- GREY STRIP --- */
.grey-strip { background: var(--grey-bg); padding: 40px 20px; text-align: center; font-size: 18px; font-weight: 600; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 40px 0; }

/* --- SERVICES GRID --- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 60px; }
.service-card { border: 1px solid #eee; }
.service-img-box { height: 350px; overflow: hidden; }
.service-img-box img { width: 100%; height: 100%; object-fit: cover; }
.card-label { background: #dcdcdc; padding: 20px; text-align: center; }
.card-label h3 { color: var(--brand-red); font-size: 15px; font-weight: 700; letter-spacing: 1px; }

/* --- CONTACT SECTION --- */
.contact-area { padding-bottom: 80px; }
.contact-flex { display: flex; gap: 60px; align-items: flex-start; }
.contact-image { flex: 1; }
.contact-image img { width: 100%; height: 500px; object-fit: cover; }

.contact-form-box { flex: 1.5; }
.contact-form-box h2 { font-size: 24px; font-weight: 400; margin-bottom: 30px; }
.contact-form { display: flex; flex-direction: column; gap: 15px; }
.input-row { display: flex; gap: 15px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; background: #f2f2f2; font-family: inherit; }
.submit-btn { background: var(--brand-red); color: white; padding: 15px; border: none; font-weight: 800; cursor: pointer; width: 180px; align-self: flex-end; margin-top: 10px; }
.form-footer-addr { font-size: 11px; color: var(--text-light); margin-top: 25px; }

/* --- FOOTER --- */
.main-footer { border-top: 1px solid #eee; padding: 30px 40px; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-links { display: flex; list-style: none; gap: 20px; }
.footer-links a { text-decoration: none; font-size: 11px; font-weight: 700; color: var(--text-light); }
.logo-footer { width: 130px; }

/* --- RESPONSIVE / MOBILE --- */
@media (max-width: 850px) {
    .container { padding: 0 20px; }
    
    /* Header & Nav Fix */
    .top-info { flex-direction: column; text-align: center; padding: 10px; gap: 5px; }
    .address { text-align: center; }
    
    .nav-bar { flex-direction: column; padding: 20px 10px; gap: 20px; }
    .nav-links { flex-direction: column; align-items: center; gap: 15px; width: 100%; }
    .nav-links a.active { border-right: none; border-bottom: 2px solid var(--brand-red); padding-right: 0; padding-bottom: 3px; }

    /* Layout Sections */
    .welcome-flex, .contact-flex, .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
    .welcome-text p { text-align: center; }
    
    /* Grid to Single Column */
    .services-grid { display: block; }
    .service-card { margin-bottom: 30px; }
    
    /* Hero & Images Adjustment */
    .hero-container { height: 250px; }
    .contact-image img { height: 300px; }

    /* Form Fix */
    .input-row { flex-direction: column; gap: 15px; }
    .submit-btn { align-self: center; width: 100%; }
}