.contact_container{
        background: var(--color-bg1);
        padding: 4rem;
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 4rem;
        height: 32rem;
        margin: 7rem auto;
        border-radius: 1rem;
    }


    /* =========== Aside ========== */

    .contact_aside{
        background: var(--color-bg2);
        padding: 3rem;
        border-radius: 1rem;
        position: relative;
        bottom: 10rem;
    }

    .aside_image{
        width: 12rem;
        margin-bottom: 2rem;
    }

    .contact_aside h2{
        text-align: left;
        margin-bottom: 1rem;
    }

    .contact_aside p{
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    .contact_details li{
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1rem;
    }

    .contact_socials{
        display: flex;
        gap: 0.8rem;
        margin-top: 3rem;
    }

    .contact_socials a{
        background: var(--color-bg2);
        padding: 0.5rem;
        border-radius: 50%;
        font-size: 0.9rem;
        transition: var(--transition);
    }

    .contact_details a:hover{
        background: transparent;
    }



    /* =========== Form ========== */

    .contact_form{
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        margin-right: 4rem;
    }

    .form_name{
        display: flex;
        gap: 1.2rem;
    }

    .contact_form input[type="text"]{
        width: 50%;
    }

    input, textarea{
        width: 100%;
        padding: 1rem;
        background:var(--color-bg);
        color: var(--color-white);
    }

    .contact_form .btn{
        width: max-content;
        margin-top: 1rem;
        cursor: pointer;
    }
     #support {
        word-break: break-all;
    }

    /* ================== Media Queries (Tablets) =================== */

    @media screen and (max-width: 1024px) {

        .contact{
            padding-bottom: 0;
        }

        .contact_container{
            gap: 1.5rem;
            margin-top: 3rem;
            height: auto;
            padding: 1.5rem;
        }

        .contact_aside{
            width: auto;
            padding: 1.5rem;
            bottom: 0;
        }

        .contact_form{
            align-self: center;
            margin-right: 1.5rem;
        }
    }
     #support {
        word-break: break-all;
    }
  

    /* ================== Media Queries (Phones) =================== */

    @media screen and (max-width: 600px) {

        .contact_container{
            grid-template-columns: 1fr;
            gap: 3rem;
            margin-top: 0;
            padding: 0;
        }

        .contact_form{
            margin: 0 1.5rem 3rem ;
        }

        .form_name{
            flex-direction: column;
        }

        .form_name input[type="text"]{
            width: 100%;
        }
    }
     #support {
        word-break: break-all;
    }