main{ 
    padding: 0 1.5rem;
    
    .hero-contact-left{
        
        h1{
            font-size: 2.8rem;
            line-height: 3.5rem;
            margin-bottom: 3rem;
        }
        p{
            color: var(--color-gray);
            line-height: 2rem;
            margin-bottom: 3rem;
        }
        ul{
            padding: 0;
            margin-bottom: 3rem;
            li{
                margin-bottom: 1.5rem;
                width: 100%;
            }
            a{
                color: var(--color-white);
                transition: color 0.2s;
                font-size: 0.7rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;

                svg{
                    display: inline;
                    fill: var(--color-white);
                    margin-right: 1rem;
                    width: 0.8rem;
                    height: 0.8rem;
                }
            }
            a:hover{
                color: var(--color-acid);
                svg{
                    fill:var(--color-acid);
                }
            }
        }
    }
    .hero-contact-right{
        margin-bottom: 3rem;
        form div{
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .form-label{
            color: var(--color-white);
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
        }
        .form-input{
            background-color: var(--color-black);
            border: 1px solid var(--color-gray);
            padding: 1rem;
            width: 100%;
            margin-bottom: 2rem;
            outline: none;
            color: var(--color-white);
        }
        .form-input:focus{
            border-color: var(--color-acid);
        }
        textarea{
            min-height: 120px;
        }

        .form-input::placeholder{
            color: var(--color-white);
            opacity: 0.5;
        }

        button{
            font-size: 0.8rem;
            letter-spacing: 0.2rem;
            margin: 0;
            padding: 1rem;
            width: 100%;
            background-color: var(--color-acid);
            transition: transform 0.2s, box-shadow 0.2s;
            z-index: 999;
        }

        button:hover{
            transform: translate(-0.5em, -0.5em);
            box-shadow: 0.5em 0.5em 0 var(--color-coral);
        }
    }

    @media (min-width: 768px) {
        min-height: 83vh;
        padding: 0 3rem;
        display: flex;
        align-items: center;
        gap: 3rem;

        .hero-contact-left{
            width: 50%;
            h1{
                font-size: 5rem;
                line-height: 5rem;
            }
            ul a{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }

        .hero-contact-right{
            width: 50%;
        }        
    }
}