#contactSection{ 
    padding-top: 16rem; 
}
#contactSection h1.pageTitle{ 
    margin-bottom: 0.8rem;
} 
#contactSection p.pageHeaderDesc{ 
    margin-bottom: 4rem;
}
 
#contactSection ul.contactDetails{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}
#contactSection ul.contactDetails li{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 2rem;
    color: var(--my-subtext);
}
#contactSection ul.contactDetails li i{
    width: 2rem;
    color: var(--my-accent-color);
} 


#contactSection .contactForm{
    padding: 4rem;
    background: var(--my-card-bg);
    border: 1px solid var(--my-border-color);
    border-radius: 2rem;
}
#contactSection .contactForm .formTitle{
    font-size: 2rem;
    font-weight: 500;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    border-bottom: 1px solid var(--my-border-color);
}
#contactSection .contactForm .frmFieldLabel{
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    color: var(--my-subtext);
}
#contactSection .contactForm .frmFieldLabel span{
    color: var(--my-accent-color);
}
#contactSection .contactForm .frmField{
    padding: 1.5rem;
    font-size: 1.6rem;
    border-radius: 1rem;    
    background-color: var(--my-secondary-btn-bg);
    border: 1px solid var(--my-secondary-btn-border);
} 
#contactSection .contactForm textarea.frmField{
    height: 12rem;
} 
#contactSection .contactForm label.error{
    color: #ff0000;
    font-size: 1.2rem;
    margin-top: .4rem;
}



#responseModal{
    text-align: center;
}

#responseModal .modal-content{ 
    border-radius: 2rem;
    background: var(--my-card-bg);
    border: 1px solid var(--my-border-color);
}
#responseModal .modal-body{ 
    padding: 2rem;  
}
#responseModal .modalIcon{ 
    margin-top: 1rem;
    margin-bottom: 2rem;
}
#responseModal .modalIcon i{
    font-size: 5rem;
}

#responseModal label.title{
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--my-text);
    line-height: 1;
}
 
#responseModal p.desc{
    font-size: 1.4rem;
    margin: auto;
    margin-bottom: 3rem;
    color: var(--my-subtext);
    line-height: 1.2;
}

#responseModal p.desc span{
    color: var(--my-text);
}