/* ==========================================================================
   TABLET MODE RESPONSIVE STYLES (Supports iPad Mini, iPad Pro & Landscape Phones)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 1024px) {

    /* 1. Navbar / Menu Section */
    .navbar {
        padding: 20px 40px; /* প্যাডিং কিছুটা কমানো হয়েছে */
    }
    .menu {
        gap: 20px; /* মেনুর ভেতরের গ্যাপ কমানো হয়েছে */
    }

    /* 2. Hero Section */
    .Hero-Section {
        height: auto;
        padding: 100px 30px 40px 30px;
        gap: 20px;
    }
    .Write {
        width: 55%; /* লেখাকে একটু বেশি জায়গা দেওয়া হয়েছে */
        margin-left: 0;
        height: auto;
    }
    .hello, .H-M, .Frontend, .p-d, .My-info {
        margin-left: 10px;
        margin-right: 10px;
    }
    .H-M { font-size: 32px; }
    .p-d { font-size: 15px; margin-right: 15px; }
    
    .picture {
        width: 45%;
        height: auto;
    }
    .circul {
        width: 280px; /* ট্যাবলেটের জন্য ছবির বৃত্ত মাঝারি সাইজ */
        height: 280px;
    }

    /* 3. About Section */
    .about {
        height: auto;
        padding: 60px 30px;
        gap: 20px;
    }
    .about-picture {
        width: 40%;
    }
    .about-picture img {
        width: 90%;
        margin-left: 0;
    }
    .about-likha {
        width: 60%;
        padding-right: 0;
    }
    .about-likha-h1 { font-size: 36px; }

    /* 4. Services Section */
    .services {
        padding: 60px 5%;
    }
    .service-container {
        grid-template-columns: repeat(2, 1fr); /* ট্যাবলেটে সুন্দরভাবে ২ কলামে বক্স দেখাবে */
    }

    /* 5. Projects Section */
    .Project-section {
        height: auto;
        padding: 60px 30px;
    }
    .Project-main {
        height: auto;
        gap: 20px;
    }
    .project-box, .project-box-1, .project-box-6 {
        width: calc(50% - 20px); /* প্রজেক্টগুলো ২ কলামে ভাগ হয়ে যাবে */
        margin: 0;
    }

    /* 6. Resume Section */
    .resume {
        grid-template-columns: 1fr; /* রেজুমে বাম-ডান পাশাপাশি না রেখে উপর-নিচে করা হয়েছে */
        padding: 60px 40px;
        gap: 3rem;
    }
    .left { text-align: center; }
    .tabs {
        flex-direction: row; /* বাটনগুলো উপর-নিচে না হয়ে পাশাপাশি আসবে */
        justify-content: center;
        margin-top: 30px;
    }
    .cards {
        grid-template-columns: repeat(2, 1fr); /* এডুকেশন কার্ড ২টি পাশাপাশি থাকবে */
        height: auto;
    }
    .skill-box {
        grid-template-columns: repeat(4, 1fr); /* স্কিল আইকনগুলো ৪ কলামে থাকবে */
        margin-left: 0;
        justify-items: center;
    }
    .why-container {
        grid-template-columns: repeat(2, 1fr); /* 'Why hire me' ২ কলামে থাকবে */
    }

    /* 7. Contact Section */
    #contact {
        padding: 60px 40px;
    }
    .contact-container {
        gap: 40px; /* ফর্ম এবং ডিটেইলসের মাঝের গ্যাপ কমানো হয়েছে */
    }
    .contact-left h2 {
        font-size: 34px;
    }
    .contact-right {
        padding: 30px 25px;
    }

    /* 8. Footer Section */
    .footer {
        padding: 20px 40px;
    }
}