.contact_container {
            background: var(--color-bgl);
            padding: 4rem;
            display: grid;
            grid-template-columns: 40% 60%;
            gap: 4rem;
            height: 30rem;
            margin: 7rem auto;
            border-radius: 1rem;
        }
        /*============ASIDE==============*/
        
        .contact_aside {
            background: var(--color-primary);
            padding: 3rem;
            border-radius: 1rem;
            position: relative;
            bottom: 10rem;
            margin: auto;
        }
        
        .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;
        }
        /*============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;
        }
        
        .map {
            position: relative;
            width: 100%;
            height: 25rem;
        }
        
        .footer {
            background: var(--color-bgl);
        }
        /*============tablet==============*/
        
        @media screen and (max-width: 1024px) {
            .contact {
                margin-bottom: 0;
            }
            .contact_container {
                gap: 1.5rem;
                margin-top: 3rem;
                margin-bottom: 0;
                height: auto;
                padding: 1.5rem;
            }
            .contact_aside {
                width: auto;
                padding: 1.5rem;
                bottom: 0;
            }
            .contact_form {
                align-self: center;
                margin-right: 1.5rem;
            }
        }
        
        @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%;
            }
            .map {
                height: 15rem;
            }
        }