/* main container */
.services-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-block.background-light {
    background-color: var(--color-light-brown);
}

.services-block.background-dark {
    background-color: var(--color-dark-brown);
}


/* inner container */
.services-block .services-inner {
    margin: 100px var(--horizontal-padding);
    max-width: var(--max-width-wide-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* main text */
.services-block .services-heading {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

.services-block.background-light .services-heading {
    color: var(--color-text-dark)
}

.services-block.background-dark .services-heading {
    color: var(--color-text-light);
}

.services-block .services-subheading {
    font-family: var(--content-font-family);
    font-size: var(--content-font-size);
    font-weight: var(--content-font-weight);
    max-width: 1000px;
    text-align: center;
}

/* Cards */
.services-block .service-cards {
    display: flex;
    gap: 50px;
    padding-top: 40px;
}

.services-block .service-cards .service-card {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
}

.services-block .service-cards .service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-block .service-cards .service-card-content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    padding: 40px;
}

.services-block .service-cards .service-card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.services-block .service-cards .service-card-content h1 {
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
    color: var(--color-text-light);
    margin: 0;
    line-height: normal;
}

.services-block .service-cards .service-card-content h2 {
    margin: 0;
    font-family: var(--content-font-family);
    font-weight: var(--content-font-weight);
    font-size: var(--content-font-size-large);
    color: var(--color-text-light);
    line-height: 1;
}

.services-block.services-2 .service-cards .service-card-content h1 {
    font-size: var(--h1-font-size);
    text-transform: uppercase;
}

.services-block.services-3 .service-cards .service-card-content h1 {
    font-size: var(--h1-font-size-small);
}

.services-block.services-2 .service-cards .service-card {
    max-width: 720px;
}

.services-block.services-3 .service-cards .service-card {
    max-width: 500px;
}

.services-block .service-cards .service-card-content .button {
    margin-top: 30px;
}

.services-block .service-cards .service-card-content .button:hover {
    color: var(--color-text-dark);
    background-color: var(--color-text-light);
}


@media screen and (max-width: 1550px) {

 
    .services-block .services-inner h1 {
        text-align: center; 
        max-width: 1000px;
    }


    .services-block .services-subheading {
        max-width: 800px;
    }

    .services-block .service-cards {
        flex-wrap: wrap;
        justify-content: center;
    }

}

@media screen and (max-width: 1200px) {
    .services-block .service-cards {
        flex-direction: column;
    } 
}

@media screen and (max-width: 1000px) {


    .services-block.services-2 .service-cards .service-card-content h1 {
        font-size: var(--h1-font-size-small);
    }

    .services-block .service-cards .service-card-content h2 {
        font-size: var(--content-font-size);
    }
    
}

@media screen and (max-width: 550px) {

    .services-block .services-inner h1 {
        font-size: var(--h1-font-size-small);
    }

    .services-block .service-cards .service-card-content {
        padding: 20px;
    }

    .services-block .service-cards .service-card-content .button {
        margin-top: 15px;
    }
    

}