/* ==========================================
   HEADER
========================================== */

.contact-header{

    max-width:720px;

    margin:0 0 60px;
}

.contact-header h1{

    margin-bottom:18px;

    font-size:3rem;

}

.contact-header p{

    color:var(--text);

    line-height:1.8;

    font-size:1.05rem;

}


/* ==========================================
   GRID LINKS
========================================== */

.contact-social{
    display:grid;
    grid-template-columns:2fr 2fr;
    gap: 20px;
    margin:20px 0;
}

.contact-details{
    display:grid;
    grid-template-columns:4fr 3fr;
    gap: 20px;
}

/* ==========================================
   CARD
========================================== */

.card{
    gap:20px;

    padding:35px;

}

.card .btn{

    margin-top:20px;

    width:max-content;

}


/* ==========================================
   CARDS SUPERIORES
========================================== */

.contact-title{
    display: flex;
    align-items: end;
    
}

.contact-title h2,
.contact-icon{
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--primary-color);
}

.contact-card h2{

    font-size:1.8rem;

}

.contact-card>p{

    color:var(--text);

    line-height:1.8;

}


/* ==========================================
   LABEL
========================================== */

.tag{

    width:max-content;

    padding:7px 15px;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* ==========================================
   EMPRESA
========================================== */

.contact-items{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-item{

    display:flex;

    gap:18px;

    padding:18px;

    border-radius:12px;

    background:var(--card-background-light);

    border:1px solid var(--border-color);

    transition:.25s;

}

.contact-item:hover{

    border-color:var(--primary-color);

}

.icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:45px;

    font-size:1.4rem;

}

.contact-item strong{

    display:block;

    margin-bottom:5px;

}

.contact-item p{

    color:var(--text);

    line-height:1.6;

}


/* ==========================================
   DESENVOLVEDOR
========================================== */

.developer-card{

    justify-content:space-between;

}

.developer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.developer-links a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px;

    border-radius:10px;
    font-size: clamp(0.7rem, 2vw, 1rem);

    background:var(--card-background-light);

    border:1px solid var(--border-color);

    transition:.25s;

}

.developer-links a:hover{

    color:var(--primary-color);
    border-color:var(--primary-color);

}


/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:992px){

    .contact-social,
    .contact-details{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact{

        padding:50px 0;

    }

    .contact-header{

        margin-bottom:40px;

    }

    .contact-header h1{

        font-size:2.3rem;

    }

    .contact-card{

        padding:25px;

    }

    .contact-card h2{

        font-size:1.5rem;

    }

    .contact-card .btn{

        width:100%;

        text-align:center;

    }

}