/*=======
Tablets
=========*/
@media screen and (width >= 650px) {
    /*============================================
    Centering paragraph sections which doesn't work 
    well for all pages by targeting <article> in 
    style.css, so manually centering others here
    ==============================================*/
    .section-plot,
    .section-about, 
    form, 
    img {
        justify-self: center;
        width: 65ch;
    }
    /*================================
    Adjusting the height of all pages
    ==================================*/
    main {
        height: 1200px;
    }
    .main-plot {
        height: 1100px;
    }
    .main-about {
        height: 1000px;
    }
    .main-contact {
        height: 1200px;
    }
    .main-thanks {
        height: 900px;
    }
    /*=================
    Adjusting the form
    ===================*/
    label {
        margin-left: 3.8rem;
        margin-top: 1rem;
        margin-bottom: 0.1rem;
    }
    /*The input fields*/ 
    input,
    textarea {
        width: 25rem;
    }
    textarea {
        height: 18rem;
    }
    .btn {
        width: min(15rem, 18rem);
    }
    /*=======================================
    Adjusting Urdu text image above the form
    =========================================*/
    .urdu {
        width: 10%;
        justify-self: center;
    }
}


/*========
Desktops
==========*/
@media screen and (width >= 1024px) {
    ul {
        flex-direction: column;
        height: 300px;
        gap: 2rem;
    }
    nav ul p {
        font-size: 1.2em;        
        font-weight: 500;
    }
    h1 {
        font-size: 3rem;
        margin-top: 0.5rem;
    }
    h2 {
        font-size: 2.5rem;
        margin-top: 0.5rem;
    }
    footer p {
        font-size: 1.1em;
    }
    /*==============================================
    Using grid instead of flexbox now, to place the 
    menu next to the main content. 
    ===============================================*/
    .page {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1rem;
        grid-template-areas: 
        "n m m m" 
        "f f f f"
        ;
    }
    ul {
        grid-area: n;
        width: 150px;
        margin-left: 10rem;
    }
    main {
        grid-area: m;
        width: 700px;
    }
    footer {
        grid-area: f;
    }
    /*===================
    Styling contact form
    =====================*/
    .main-contact {
        height: 1100px;
    }
    form {
        width: 680px;
     
    }
    label p {
        font-size: 1.1em;
        margin-block: 5px;
        margin-left: 2rem;
    }
    input,
    textarea {
        font-size: 1em;
        width: 500px;
        height: 3rem;
        padding: 20px;
    }
    textarea {
        height: 18rem;
    }
    .btn {
        font-weight: 500;
        font-size: 1.1em;
        padding: 10px;
    }
}