/* --- Mobile Responsive Styles (For Screens under 768px) --- */
@media (max-width: 768px) {
    
    /* Header/Navigation mobile fix */
    header {
        padding: 20px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .logo {
        font-size: 20px;
    }

    nav ul {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        margin-left: 0;
        margin: 5px;
    }

    /* Main Title size reduction for mobile */
    .main-title {
        font-size: 28px;
        margin: 30px 10px;
        letter-spacing: 2px;
    }

    /* Main Container stack (Row to Column) */
    .container {
        flex-direction: column; /* বাম আর ডান পাশ একটির নিচে আরেকটি আসবে */
        gap: 30px;
        padding: 15px;
    }

    .contact-form, .contact-info {
        width: 100%;
        padding: 20px;
    }

    /* Input and Button sizing for touch */
    .input-group input, .input-group textarea {
        font-size: 16px; /* মোবাইলে টাইপ করার সময় জুম হওয়া বন্ধ করবে */
    }

    .submit-btn {
        font-size: 16px;
        padding: 12px;
    }

    /* Contact info adjustments */
    .contact-info h2 {
        font-size: 22px;
        margin-bottom: 20px;
        text-align: center;
    }

    .info-item {
        margin-bottom: 20px;
    }

    /* Map height reduction for mobile */
    .map-placeholder {
        height: 180px;
        margin-top: 20px;
    }

    /* Background Light Adjustments for Mobile */
    body::before {
        width: 300px;
        height: 300px;
    }

    body::after {
        width: 400px;
        height: 400px;
    }

    /* Footer adjustments */
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-links a {
        margin: 0;
    }

    .footer-bottom p {
        padding: 0 10px;
        line-height: 1.6;
    }
}

/* Extra small devices (Mobile small) */
@media (max-width: 480px) {
    .main-title {
        font-size: 24px;
    }
    
    .logo {
        font-size: 18px;
    }
}