@import '../_variables';

.page-id-4930 {
    .intro {
        li::marker {
            color: #e30613;
        }
        li {
            margin-bottom: 15px;
        }
        ul {
            list-style-position: unset;
            margin-left: 0;
            padding-left: 26px;
            margin-top: 60px;
        }
    }
    .image-block {
        @include background-image(body-bg, png, center center, repeat);
        @include breakpoint(large up) {
            padding-bottom: 100px;
        }
        padding-bottom: 70px;
        .image-block__image {
            clip-path: unset;
            height: 80%;
        }
        .image-block__items {
            &:nth-child(odd) {
                margin-top: -70px;
                margin-bottom: 70px;
            }
        }
    }
    .history-slider.alternative {
        h2 {
            font-family: "Macho", Arial, sans-serif;
            font-size: 110px;
            font-weight: 600;
            font-style: italic;
            text-transform: uppercase;
            /*transform: skew(8deg, -8deg);*/
            color: white;
            @media(max-width: 1024px) {
                font-size: 50px;
            }

            strong {
                position: relative;
                display: block;
                font-weight: 800;
                @media(max-width: 1024px) {
                    margin-left: 10px;
                }
                margin-left: 25px;
            }
        }
        .bottom-line {
            background-color: white;
            margin-left: 20px;
            @media(max-width: 1024px) {
                margin-left: 10px;
            }
        }
        .card-expertise__icon {
            padding-left: 40px;
            em {
                &:before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    background-image: url(../../fonts/avm-icons/clock.svg);
                    transform: translate(-25px, 10px) skew(-14deg, 4deg);
                    background-repeat: no-repeat;
                }
            }
        }
        .history-slider__bg-image {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
            pointer-events: none;

            img {
                width: 100%;
            }
        }

        .history-slider__rectangle-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            pointer-events: none;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .expertise.alternative {
        padding-block: 100px;
        .grid-x {
            flex-direction: row-reverse;
            margin-top: 320px;
            justify-content: space-between;
        }
        .expertise__items {

            .card-expertise__number {
                position: absolute;
                top: 32px;
                left: -40px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 58px;
                height: 58px;
                font-size: 25px;
                font-weight: 700;
                color: white;
                border-bottom: solid 1px #9d1922;
                background-color: #e30613;
                transform: skew(0deg, -9deg);

                &:after {
                    position: absolute;
                    bottom: -26px;
                    left: -1px;
                    width: 0;
                    height: 0;
                    border-color: transparent #9d1922 transparent transparent;
                    border-style: solid;
                    border-width: 0 42px 25px 0;
                    content: '';
                }
            }
            .card-expertise__content h4 {
                font-family: "Macho", Arial, sans-serif;
                font-size: 40px;
                font-style: italic;
                strong {
                    font-family: "Macho", Arial, sans-serif;
                    font-size: 40px;
                    font-style: italic;
                    color: #E30613;
                    margin-bottom: 1.25rem;
                    font-weight: 700;
                }
            }
        }
        h2 {
            font-family: "Macho", Arial, sans-serif;
            font-size: 110px;
            font-weight: 600;
            font-style: italic;
            text-transform: uppercase;
            transform: skew(8deg, -8deg);
            color: white;
            @media(max-width: 1024px) {
                font-size: 50px;
            }
            .flex-container {
                display: flex;
                align-items: flex-end;
                gap: 25px;
            }

            strong {
                position: relative;
                display: block;
                font-weight: 800;
                @media(max-width: 1024px) {
                    margin-left: 10px;
                }
                margin-left: 25px;
            }
            .number {
                font-size: 240px;
                font-weight: 600;
                color: #E30613;

            }
            .text-left {
                .animated-fade-left-to-right {
                    font-size: 110px;
                    font-weight: 600;
                }
                .animated-fade-right-to-left {
                    font-size: 60px;
                    font-weight: 600;
                    margin-left: 0;
                }
            }
        }
        .bottom-line {
            background-color: #e30613;
            margin-left: -10px;
            margin-top: 30px;
            height: 8px;
            transform: scaleX(1.7) translateX(50px);
            @media(max-width: 1024px) {
                margin-left: 10px;
            }
        }
        .card-expertise, .expertise__items {
            width: 540px;
        }
        .expertise__items {
            &:last-child {
                margin-top: -200px;
            }
        }
        .card-expertise__content {
            padding: 2.75rem 3.25rem 1.625rem 3.125rem;
        }
        .card-expertise__image img {
            height: 240px;
            object-fit: cover;
        }
    }
    .team-quote {
        padding-block: 100px;
        h2 {
            transform: none;
            font-size: 60px;
            margin-left: 0;
            strong {
                margin-left: 0;
            }
        }
        .team-quote__title {
            margin-bottom: 30px;
        }
        .bottom-line {
            margin-left: 0;
            height: 6px;
        }
        .card-quote__info {
            display: flex;
            align-items: center;
        }
        .card-quote {
            padding: 30px 0 30px 10px;
        }
        .card-quote__image {
            width: 130px;
            height: 130px;
            margin-bottom: 0;
            img {
                width: 100%;
                height: 100%;
            }
            h4 {
                padding: .375rem 0.5rem;
            }
        }
        .grid-container {
            padding-inline: 1rem;
        }
        .card-quote__text {
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            width: 65%;
            gap: 15px;
        }
        .card-quote__text i {
            position: relative;
            left: 0;

        }
    }
    .contact-section.alternative {
        background: white;
        color: black;
        h2 {
            font-family: "Macho", Arial, sans-serif;
            font-size: 90px;
            font-weight: 600;
            font-style: italic;
            text-transform: uppercase;
            color: black;
            margin-bottom: 100px;
            /*transform: skew(8deg, -8deg);*/
            @media(max-width: 1024px) {
                font-size: 50px;
            }

            strong {
                position: relative;
                display: block;
                font-weight: 800;
                @media(max-width: 1024px) {
                    margin-left: 10px;
                }
                margin-left: 25px;
            }
        }
        .bottom-line {
            background-color: #e30613;
            margin-left: 20px;
            @media(max-width: 1024px) {
                margin-left: 10px;
            }
        }
        .contact-section__title {
            color: black;
        }
        .contact-section__bg-image {
            position: absolute;
            right: 0;
            z-index: -1;
            pointer-events: none;
            top: 50%;

            img {
                width: 100%;
            }
        }

        .contact-section__rectangle-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            pointer-events: none;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .contact-section__image:after {
            display: none;
        }
        .card-boss__info li em{
            color: black;
        }
        .grid-x {
            flex-wrap: nowrap;
            gap: 10px;
        }
        .auto {
            margin-top: 15px;
        }
        .button.whatsapp-button {
            background: #34C458;
            padding-left: 40px;
            border-bottom: solid 2px #20B044;
            margin-block: 15px;
            &:after {
                content: "";
                display: block;
                position: absolute;
                width: 30px;
                height: 30px;
                background-image: url(../../fonts/avm-icons/whatsapp.svg);
                background-repeat: no-repeat;
                left: -5px;
                top: 6px;
            }
            &:before {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    background-color: #20B044;
                    transform: rotateX(-90deg);
                    transition: transform .25s;
                    content: attr(data-hover);
                    transform-origin: 50% 0;
            }
        }
    }
}