:root {
    --red: #8b0000;
    --light-red: #ff3b3b;
    --green: #25d366;
}

body {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif; 
    background: #f4f6f9;
    padding-bottom: 60px;
}

/* Floating Contact Bar */
.fixed-contact-bar {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 60px;
    display: flex; 
    z-index: 1000;
}
.fixed-contact-bar a {
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    text-decoration: none; 
    font-weight: bold; 
    gap: 8px;
}
.bar-call { background: var(--light-red); }
.bar-whatsapp { background: var(--green); }

/* Header */
.top-bar {
    background: var(--red); 
    color: white; 
    padding: 10px 20px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: sticky; 
    top: 0; 
    z-index: 100;
}
.logo img { width: 35px; height: 35px; border-radius: 50%; vertical-align: middle; }
.call-btn { background: white; color: var(--red); padding: 6px 15px; border-radius: 20px; text-decoration: none; font-weight: bold; }

/* HERO SECTION - ছবি ফিক্স করার জন্য এই অংশটি খুব গুরুত্বপূর্ণ */
.hero {
    /* ছবির উপর একটি কালো হালকা ঝাপসা আস্তরণ যোগ করা হয়েছে */
    background-image: linear-gradient(rgba(19, 19, 19, 0.6), rgba(7, 3, 3, 0.6)), url('hero-bg.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* সব টেক্সট সাদা দেখাবে */
    text-align: center;
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero h1 { font-size: 32px; margin-bottom: 10px; color: #e1060aee; }
.hero-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.hero-buttons a { padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: bold; color: white; }
.whatsapp-btn { background: var(--green); }
.emergency-btn { background: var(--red); }

/* Service Grid - বড় সাইজ */
.services { padding: 40px 15px; text-align: center; }
.service-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 20px; 
    max-width: 1200px;
    margin: 0 auto;
}
.service-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.service-card img {
    width: 100%;
    height: auto; /* এখানে ১০০ পিক্সেল এর বদলে auto দিন */
    object-fit: cover;
    border-bottom: 4px solid var(--red);
}
.service-card p { padding: 15px; font-weight: bold; font-size: 16px; margin: 0; color: var(--red); }

/* Booking Form */
.booking { padding: 40px 20px; background: white; text-align: center; }
.booking form { max-width: 450px; margin: auto; display: flex; flex-direction: column; gap: 15px; }
.booking input, .booking select { padding: 12px; border: 1px solid #ddd; border-radius: 8px; }
.submit-btn { background: var(--green); color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; }
.location-btn { background: #e60b4c; color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 5px; }
.drop-btn { background: #007bff; color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 5px; }

/* Others */
.payment-box { text-align: center; padding: 40px 20px; }
.upi-id span { background: #eee; padding: 5px 10px; border-radius: 4px; font-family: monospace; font-weight: bold; }
footer { background: #222; color: #ccc; text-align: center; padding: 30px; }

/* ১০০ নম্বর লাইনের ভেতরে এটি যোগ করুন */
@media (max-width: 600px) {
    .hero-buttons { flex-direction: column; } /* আপনার আগে থেকেই আছে */
    
    .hero {
        padding: 60px 10px; /* ফোনের ওপরের গ্যাপ কমাবে */
    }
    
   /* ১১২ নম্বর লাইনের .top-bar সেকশনে এটি বসান */
.top-bar {
    display: flex;
    flex-direction: column; /* লোগো ও বাটনকে উপরে-নিচে নিয়ে আসবে */
    padding: 10px 5px;
    gap: 10px;
    height: auto;
    align-items: center;
}

/* বাটনগুলোর জন্য নতুন সেকশন যোগ করুন */
.top-actions {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px; /* বাটন দুটির মাঝে গ্যাপ বাড়াবে */
}

.lang-toggle, .call-btn {
    flex: 1; /* দুটি বাটনকে সমান চওড়া করবে */
    text-align: center;
    padding: 10px 5px;
    font-size: 13px; /* লেখা যাতে এক লাইনে থাকে */
    white-space: nowrap;
}