/*  CSS for SRDWS Landing Page */

*{
    box-sizing: border-box;
}

.grd{
    display: grid;
    gap: 30px;
}

.grd-3col{
    grid-template-columns: repeat(1, 1fr);

    @media only screen and (min-width: 999px) {
        grid-template-columns: repeat(3, 1fr);
    }

}

.grd-3companies{
    grid-template-columns: repeat(1, 1fr);

    @media only screen and (min-width: 999px) {
        grid-template-columns: 6fr 7fr 4fr;
    }

}


.srdws_cntLandingWrp {
    width: 100%;
    position: relative;
    padding: 5% 25px 100px;

    .srdws_cntLanding {
        width: fit-content;

        @media only screen and (min-width: 999px) {
            width: 100%;
        }

        .srdws_cntLandingMain {
            width: 100%;
            position: relative;

            padding: 0 0 5rem;

            @media only screen and (min-width: 666px) {
                width: fit-content;
                padding-left: 205px;
            }


            .srdws_landingPortrait {
                width: 170px;
                aspect-ratio: 1 / 1;

                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: auto;

                }

                @media only screen and (min-width: 666px) {
                    position: absolute;
                    left: 0;
                    top: 0;
                }

            }

            h1 {
                padding: 15px 0 0.25rem;
            }

            h1 + h2 {
                padding: 0 0 30px;
            }

            h3{
                border:0;
            }

            .td1 {
                display: inline-block;
                width: 65px;
            }

            .srdws_bookAppointment,
            .srdws_sendMail,
            .srdws_connectLinkedIn,
            .srdws_callLandline,
            .srdws_callMobile{

                position: relative;
                padding: 0;
                margin: 0 0 10px;

                a{
                    width: fit-content;

                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;

                    transition: color 0.5s;

                    &:link,
                    &:visited {
                        color: var(--socratec-blue);
                    }
                    &:hover,
                    &:active,
                    &:focus,
                    &:focus-visible{
                        color: black;
                    }

                    svg {
                        width: 40px;
                        height: 40px;

                        flex-shrink: 0;

                        margin: 0 10px 0 -3px;
                    }

                }

                .dateOverlay{
                    width: 40px;
                    height: 40px;

                    position: absolute;
                    top: 50%;
                    left: -3px;
                    transform: translate(0, -50%);


                    display: flex;
                    flex-flow: column nowrap;
                    align-items: center;
                    justify-content: center;

                    font-size: 10px;
                    font-weight: 400;
                    line-height: 1;
                    color: white;

                    span{
                        font-size: 5px;
                        font-weight: 300;
                        text-transform: uppercase;
                    }
                }
            }
        }



        .srdws_businessContactsWrp {
            width: 100%;
            max-width: 1000px;

            .srdws_businessContact {
                width: auto;

                position: relative;
                padding: 80px 0 50px 65px;

            /*    border-top: 1px solid #ccc;  */

                img{
                    display: block;

                    height: 60px;
                    aspect-ratio: 4 / 1;
                    width: auto;

                    position: absolute;
                    top: 15px;
                    left: 0;

                    flex-shrink: 0;

                    transform: translatex(-5px);
                }

                ul,
                p {
                    font-size: 1rem;

                    &.srdws_coreServices {
                    }
                }

                ul{
                    padding-left: 13px;

                    li{
                        list-style: square;
                        padding: 0 0 5px;
                        &::marker{
                            color: var(--socratec-blue);
                        }
                    }
                }

                &:last-of-type{
                    padding-left: 65px;

                    img{
                        transform: translatex(0);
                    }

                    @media only screen and (min-width: 666px) {
                        padding-left: 0;
                    }
                }
            }

            @media only screen and (min-width: 666px) {
            }
        }
    }
}