@import "components/button.css";

.contact_container { 
    max-width: 53rem; 
    margin: 10rem auto; 
    background-color: #fff;
    border-radius:8px; 
    box-shadow:0 6px 18px rgba(20,20,30,0.06); 
    padding:1.4rem; 
    text-align: center; 
}


.contact-grid { 
    text-align: left; 

    display:grid;
    margin-top: 1rem; 
    grid-template-columns:10fr 10fr;
    gap:1.1rem; 
}

.card { 
    border:1px solid #e6e6e9; 
    padding:1rem; 
    border-radius:8px; 
    background:#fcfcfd;
}

.label { 
    font-weight:600; 
    margin-bottom: 0.75rem; 
}

.email { 
    color: var(--theme-color-secondary); 
    text-decoration:none; 
    word-break:break-word;
    
}

form { 
    margin-top:0.8rem;
}

input[type="text"], input[type="email"], textarea { 
    width:100%; 
    padding:0.6rem; 
    border:1px solid #d9d9dc; 
    border-radius:6px; 
    box-sizing:border-box; 
}

textarea { 
    min-height:6.25rem; 
    resize:vertical; 
}

.small {  
    margin-top: 0.75rem; 
    display:block; 
}

@media (max-width:640px) { 
    .contact-grid { 
        grid-template-columns:1fr;
        
    }
    .contact_container{
        box-shadow: none; 
    }
    
    body{
        
    }
    
 }