.service-section{
    display:flex;
    flex-direction: column;

}
.intro, .expertise, .description, .title-cards{
    padding:0 2rem  0 2rem;
    width:90%;
    box-sizing: border-box !important;
    margin-bottom:1rem;
    text-align: center;
}
.intro, .expertise, .description, .title-cards{
    align-self: center;
}
.intro h1, .description h1, .expertise h1, .title-cards{
    position:relative;
    font-size:3rem;
    font-family: 'Lato-blackitalic';
    color:rgb(5, 84, 84);
    margin: 1.5rem 0 1.5rem 0;
    width:100%;
}
.title-cards{
    color:#b10a0a;
    font-size: 4rem;
    border-top:10px dashed #b10a0a;
    padding-top: 1rem;
}
.intro h1::before,
.description h1::before,
.expertise h1::before,
.title-cards ::before {
    position: absolute;
    content: "";
    display: block; 
    width: 100px;    
    height: 4px;    
    background-color: rgb(5, 84, 84); 
    background: rgb(5, 84, 84) !important; 
    top:-1rem;
    left: calc(50% - 50px);
}
.intro p, .description p, .expertise p{
    font-size:1.2rem;
}
.intro span, .description span, .expertise span{
    font-weight: bold;
}
.second{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display:flex;
    justify-content:center;

    flex-wrap:wrap;
    right:0;

    column-gap: 0;
    gap:2vw;
    padding-top: 0;
    overflow-x: hidden;
}

.card{
    border-radius:2px;
    width: 320px;
    min-height: 40rem;
    margin-bottom: 50px;
    
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction:column;
    text-align: center;

    padding: 20px;

    background:linear-gradient(70deg,rgb(179, 181, 181),rgb(235, 238, 238),rgb(179, 181, 181));
    box-shadow: 2px 2px 2px 2px rgba(44, 42, 42, 0.75);
    margin-bottom: 2rem;
}
.card span{
    font-weight:600;
}
.card.red{
    background:linear-gradient(200deg,#300808,#c81c1c,#300808);
    color:rgb(234, 230, 230);
}

.card p {
    font-size: 1rem;
    line-height :1.6;
    width:15rem;
}

.card h1 {
    font-size:2.3rem;
    text-align: center;
    font-family: 'Lato-blackitalic';
}
.card:not(.card.red) h1{
    color:#b80202;
}
.card:not(.card.red) .legend{
    color:#b80202;

}

.button-first{

    background:linear-gradient(270deg,rgb(5, 56, 58),rgb(9, 92, 93),rgb(7, 61, 61)) !important;
    /* box-shadow: 2px 2px 2px 2px rgb(91, 85, 85); */
}
.button-first:hover{
    background:linear-gradient(270deg,rgb(2, 27, 28),rgb(7, 71, 72),rgb(2, 22, 22)) !important;
}

@media(max-width:1499px){
    .card{
        width: 270px;
    }
}
@media(max-width:1000px){
    .card{
        width:28rem;
        margin: 2rem 5rem 2rem 5rem;
        height:auto !important;
        min-height:auto !important;

        height:auto !important;
        gap:2rem;
        align-items: center !important;
        justify-content: center !important; 
    }
    .card p {
        font-size: 1rem;
        line-height :1.6;
        width:90%;
        margin: 0 5% 0 5%;
    }
}
@media(max-width:800px){
    .intro, .expertise, .description, .title-cards{
        width:100%;
    }
    .intro h1, .expertise h1, .description h1, .title-cards h1{
        margin-bottom:0;
    }
}
@media(max-width:500px){
    .card{
        min-width: 75vw;
    }
}