.widder-services{
    --widder-services-bg:#141823;
    --widder-services-card:#171b27;
    --widder-services-text:#ffffff;
    --widder-services-muted:#9699a5;
    --widder-services-red:#d82c12;

    position:relative;
    width:100%;

    background:var(--widder-services-bg);
    color:var(--widder-services-text);

    overflow:clip;
}


.widder-services__stage{
    position:relative;

    width:100%;
    height:100vh;
    height:100svh;

    min-height:720px;

    overflow:hidden;
}


.widder-services__title{
    position:absolute;

    top:10vh;
    left:50%;

    z-index:30;

    width:100%;

    margin:0;

    padding:0 24px;

    transform:translateX(-50%);

    text-align:center;

    font-family:"Montserrat",sans-serif;
    font-size:clamp(32px,3vw,48px);
    font-weight:800;

    line-height:1.05;

    color:#ffffff;

    text-shadow:
        1px 1px 0 var(--widder-services-red),
        -1px -1px 0 var(--widder-services-red),
        1px -1px 0 var(--widder-services-red),
        -1px 1px 0 var(--widder-services-red);
}


.widder-services__cards{
      position:absolute;

    left:50%;
    top:59%;

    width:min(1140px,calc(100% - 76px));
    height:min(680px,68vh);

    transform:translate(-50%,-50%);
}


.widder-service-card{
    position:absolute;

    left:50%;
    top:50%;

    width:calc((100% - 60px) / 3);
    height:calc((100% - 40px) / 2);

    min-height:0;

    padding:28px 26px;

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

    text-align:center;

    background:var(--widder-services-card);

    border:1px solid rgba(255,255,255,.025);

    box-shadow:
        0 8px 24px rgba(0,0,0,.18);

    transform:translate(-50%,-50%);

    will-change:left,top,transform;

    transition:none !important;
}



.widder-service-card:nth-child(1){
    z-index:1;
}

.widder-service-card:nth-child(2){
    z-index:2;
}

.widder-service-card:nth-child(3){
    z-index:3;
}

.widder-service-card:nth-child(4){
    z-index:4;
}

.widder-service-card:nth-child(5){
    z-index:5;
}

.widder-service-card:nth-child(6){
    z-index:6;
}


.widder-service-card__icon{
    height:112px;

    margin-bottom:14px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.widder-service-card__icon img{
    display:block;

    width:auto;
    height:auto;

    max-width:115px;
    max-height:108px;

    object-fit:contain;
}


.widder-service-card h3{
    margin:0 0 15px;

    font-family:"Montserrat",sans-serif;

    font-size:clamp(21px,1.45vw,27px);
    font-weight:800;

    line-height:1.03;

    color:#ffffff;

    text-shadow:
        1px 1px 0 var(--widder-services-red),
        -1px -1px 0 var(--widder-services-red),
        1px -1px 0 var(--widder-services-red),
        -1px 1px 0 var(--widder-services-red);
}


.widder-service-card p{
    max-width:310px;

    margin:0;

    font-family:"Montserrat",sans-serif;

    font-size:15px;
    font-weight:400;

    line-height:1.5;

    color:var(--widder-services-muted);
}


@media(max-width:1024px){

    .widder-services{
        overflow:visible;
    }


    .widder-services__stage{
        height:auto;
        min-height:0;

        padding:80px 24px;

        overflow:visible;
    }


    .widder-services__title{
        position:relative;

        top:auto;
        left:auto;

        margin:0 0 48px;

        padding:0;

        transform:none;
    }


    .widder-services__cards{
        position:relative;

        left:auto;
        top:auto;

        width:100%;
        height:auto;

        transform:none;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:20px;
    }


    .widder-service-card{
        position:relative;

        left:auto !important;
        top:auto !important;

        width:100%;
        height:auto;

        min-height:320px;

        transform:none !important;

        padding:30px 24px;
    }

}


@media(max-width:640px){

    .widder-services__stage{
        padding:70px 16px;
    }


    .widder-services__title{
        font-size:30px;

        margin-bottom:36px;
    }


    .widder-services__cards{
        grid-template-columns:1fr;

        gap:16px;
    }


    .widder-service-card{
        min-height:300px;
    }

}