.contact-section{
    padding:21px;
}
.contact-container{
    max-width:900px;
    margin:auto;
}
.contact-heading{
    text-align:center;
    margin-bottom:21px;
}
.contact-heading h2{
    font-size:clamp(2.55rem,5.15vw,4.75rem);
    margin:15px 0;
    color: #002121;
    letter-spacing: -1.75px;
    line-height:1.12;
}
.contact-heading p{
    max-width:500px;
    margin:auto;
    color:#002121;
    line-height:1.75;
    margin-bottom: 75px;
}
.contact-form{
    border-radius:30px;
}
.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:21px;
}
.field{
    position:relative;
    margin-bottom:30px;
}
.field input,
.field textarea{
    width:100%;
    border:none;
    border-bottom:2.1px solid #00bfa5;
    background:none;
    outline:none;
    font-size:1rem;
    padding:15px 0 12px;
}
.field label{
    position:absolute;
    left:0;
    top:15px;
    color:#00bfa5;
    transition:.21s;
    pointer-events:none;
}
.field input:focus,
.field textarea:focus{
    border-color:#00bfa5;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:valid + label,
.field textarea:valid + label{
    top:-10px;
    font-size:.9rem;
    color:#00bfa5;
}
.contact-role{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30.75px;
}
.contact-role input{
    display:none;
}
.contact-role label{
    border:1px solid #00bfa5;
    border-radius:999px;
    padding:12px 21px;
    cursor:pointer;
    transition:.21s;
}
.contact-role input:checked + label{
    background:#002121;
    border-color:#002121;
    color:#fff;
}
.textarea-field textarea{
    min-height:145px;
    resize:none;
}
#counter{
    position:absolute;
    right:0;
    bottom:-21px;
    font-size:.9rem;
    color:#00bfa5;
}
.consent{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin:30px 0;
}
.consent label{
    line-height:1.55;
    font-weight: 100;
    color:#757575;
}
button{
    width:100%;
    border:none;
    background:#00bfa5;
    color:#fff;
    padding:20.55px;
    border-radius:999px;
    font-size:1rem;
    font-weight:500;
    cursor:pointer;
    transition:.3s;
}
button:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(0,191,165,.25);
}
@media(max-width:755px){
    .contact-section{
        padding:90px 15px;
    }
    .contact-form{
        padding:30px;
        border-radius:21px;
    }
    .row{
        grid-template-columns:1fr;
        gap:0;
    }
    .contact-role{
        justify-content:center;
    }
    .contact-role label{
        font-size:.9rem;
    }
    .contact-heading h2{
        font-size:2.45rem;
    }
}
.connect-strip{
    padding:75px 0;
}
.connect-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    border-radius: 21px;
    max-width: 90.55%;
    margin: 0 auto;
    overflow:hidden;
}
.connect-card{
    background:#002121;
    color:#fff;
    padding:30.75px;
    display:flex;
    flex-direction:column;
    min-height:275px;
}
.card-label{
    font-size:.9rem;
    font-weight:400;
    color: #eee;
    margin-bottom:15.75px;
}
.connect-card h3{
    font-size:1.45rem;
    margin-bottom:15px;
    font-weight: 300;
    color:#00bfa5;
    line-height:1.45;
}
.connect-card p{
    line-height:1.75;
    margin-bottom:auto;
}
.connect-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    border: 1.75px solid #00bfa5;
    color:#00bfa5;
    text-decoration:none;
    font-weight:400;
    margin-top: 30px;
    padding:15px 21px;
    border-radius:999px;
    transition:.21s ease;
}
.connect-btn:hover{
    transform:translateY(-3px);
}
@media(max-width:900px){
    .connect-grid{
        grid-template-columns:1fr;
    }
    .connect-card{
        min-height:auto;
        padding:30px 21px;
    }
    .connect-card h3{
        font-size:1.21rem;
    }
    .connect-btn{
        width:100%;
    }
}