:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #0f766e;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --success: #10b981;
        }
section{
    align-items: center;
    justify-content: center;
    display: flex;
}
/*card_service*/
.all-cards{
    align-items: center;
    justify-content: center;
    display: flex;
}
.cards{
    width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 2fr);
}
.card{
    width: 260px;
    height: 400px;
    border-radius: 12px;
    margin: 10px;
    border: 1px solid #757373;
    overflow: hidden;
}
.portfolio-image {
    overflow: hidden;
    height: 200px;
    background: linear-gradient(135deg, rgb(125, 125, 204), rgb(37, 33, 29));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
 }

.content {
    padding: 25px;
}
.content p{
    color: var(--light);
    margin-top: 5px;
    margin-bottom: 5px;
}
.content h3{
    color: #fff;

}
.content a{
    color: skyblue;
    text-decoration: none;
    margin-top: 8px;
}
.btn-consultar{
    text-decoration: none;
    color: white;
}
/* ==================================
   RESPONSIVIDADE - services.html
================================== */

/* nunca permitir scroll lateral */
html, body{
    overflow-x: hidden;
}

/* imagens sempre fluídas */
.portfolio-image img{
    width: 100% !important;
    height: 100%;
    object-fit: contain;
}

/* corrigir comportamento geral */
@media (max-width: 1200px){
    .cards{
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

/* TABLETS */
@media (max-width: 992px){

    section{
        flex-direction: column;
    }

    .cards{
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
    }

    .card{
        width: 100%;
        max-width: 320px;
        height: auto;
    }

    .portfolio-image{
        height: 180px;
    }

    .content{
        padding: 18px;
    }
}

/* TELEMÓVEIS */
@media (max-width: 768px){

    .hero{
        padding: 25px 15px;
    }

    .hero-container{
        display:flex;
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .hero button{
        width:100%;
        max-width:250px;
    }

    .cards{
        grid-template-columns: 1fr;
        width:100%;
    }

    .card{
        width:90%;
        max-width:340px;
        margin:15px auto;
        border-radius:16px;
    }

    .portfolio-image{
        height:170px;
        padding:10px;
    }

    .content h3{
        font-size:20px;
    }

    .content p{
        font-size:14px;
        line-height:1.5;
    }

}

/* TELEMÓVEIS PEQUENOS */
@media (max-width: 480px){

    .portfolio-image{
        height:150px;
    }

    .content{
        padding:14px;
    }

    .content a{
        display:inline-block;
        margin-top:10px;
        font-size:14px;
    }

}

/* FOOTER MOBILE */
@media (max-width: 768px){

    .rodape{
        display:flex;
        flex-direction:column;
        text-align:center;
        gap:25px;
        padding:20px;
    }

    .rodape .logo img{
        width:120px;
        margin:auto;
    }

    .links ol,
    .link ol{
        list-style:none;
        padding:0;
    }

    footer input[type="text"]{
        width:90%;
        max-width:280px;
    }

    footer input[type="submit"]{
        width:140px;
    }
}