@import "../../variables.scss";

.HowItWorkBlock {
    .HowItWorkHeader {
        text-align: center;
        padding-bottom: $pad + 50;
        @media (max-width: $xl){
            padding-bottom: $pad + 30;
        }
        h2 {
            font-size: $font + 30;
            text-transform: uppercase;
            font-weight: $font-weight-heavy;
            margin-bottom: 0;
            padding-bottom: $pad;
            @media (max-width: $xl){
                font-size: $font + 22;
            }
            @media (max-width: $md){
                font-size: $font + 16;
            }
        }
        p {
            font-size: $font + 12;
            max-width: 700px;
            margin: 0 auto;
            @media (max-width: $xl){
                font-size: $font + 8;
            }
            @media (max-width: $md){
                font-size: $font + 6;
            }
        }
    }
    .HowItWorkSteps {
        max-width: 1000px;
        margin: 0 auto;
        @media (max-width: $xxl){
            max-width: 800px;
        }
        @media (max-width: $xl){
            max-width: 600px;
        }
        h3 {
            font-size: $font + 25;
            font-weight: $font-weight-heavy;
            margin-bottom: 0;
            padding-bottom: $pad + 190;
            text-align: center;
            @media (max-width: $xl){
                font-size: $font + 18;
                padding-bottom: $pad + 120;
            }
            @media (max-width: $md){
                font-size: $font + 14;
                padding-bottom: $pad + 20;
            }
        }
        ul {
            position: relative;
            &:before {
                position: absolute;
                top: -130px;
                left: 0;
                content: "";
                background: url(/assets/stepsBg.png) no-repeat;
                width: 771px;
                height: 1692px;
                background-size: cover;
                @media (max-width: $xxl){
                    width: 652px;
                    height: 1430px;
                }
                @media (max-width: $xl){
                    width: 470px;
                    height: 1030px;
                    top: -80px;
                }
                @media (max-width: $md){
                    display: none;
                }
            }
            li {
                padding-bottom: $pad + 160;
                position: relative;
                z-index: 1;
                @media (max-width: $xxl){
                    padding-bottom: $pad + 140;
                }
                @media (max-width: $xl){
                    padding-bottom: $pad + 100;
                }
                @media (max-width: $md){
                    padding-bottom: $pad + 20;
                }
                &:nth-child(2n+2) {
                    flex-direction: row-reverse;
                    @media (max-width: $md){
                        flex-direction: revert;
                    }
                    .HowItWorkImg {
                        margin-right: $mrg + 280;
                        @media (max-width: $xxl){
                            margin-right: $mrg + 200;
                        }
                        @media (max-width: $xl){
                            margin-right: $mrg + 150;
                        }
                        @media (max-width: $md){
                            margin-right: $mrg;
                        }
                    }
                }
                .HowItWorkImg {
                    margin-left: $mrg + 40;
                    margin-right: $mrg + 50;
                    width: 37%;
                    flex: 0 0 37%;
                    @media (max-width: $xl){
                        margin-left: $mrg + 20;
                        margin-right: $mrg + 20;
                    }
                    @media (max-width: $md){
                        margin-left: 0;
                        margin-right: $mrg;
                        width: 25%;
                        flex: 0 0 25%;
                    }
                    img {
                        display: block;
                    }
                }
                .HowItWorkInfo {
                    flex: 1;
                    .HowItWorkNumber {
                        display: block;
                        color: #d2d3d5;
                        font-size: $font + 90;
                        line-height: 1;
                        font-weight: $font-weight-heavy;
                        @media (max-width: $xxl){
                            font-size: $font + 60;
                        }
                        @media (max-width: $xl){
                            font-size: $font + 40;
                        }
                        @media (max-width: $md){
                            font-size: $font + 30;
                        }
                    }
                    .HowItWorkHd {
                        font-weight: $font-weight-light;
                        margin-bottom: 0;
                        display: block;
                        font-size: $font + 28;
                        color: $black;
                        text-transform: uppercase;
                        @media (max-width: $xxl){
                            font-size: $font + 22;
                        }
                        @media (max-width: $xl){
                            font-size: $font + 16;
                        }
                        @media (max-width: $md){
                            font-size: $font + 6;
                        }
                    }
                    h4 {
                        margin-bottom: $mrg - 4;
                        font-size: $font + 36;
                        text-transform: uppercase;
                        @media (max-width: $xxl){
                            font-size: $font + 30;
                        }
                        @media (max-width: $xl){
                            font-size: $font + 20;
                        }
                        @media (max-width: $md){
                            font-size: $font + 14;
                        }
                    }
                    p {
                        font-size: $font + 10;
                        @media (max-width: $xxl){
                            font-size: $font + 8;
                        }
                        @media (max-width: $xl){
                            font-size: $font + 5;
                        }
                    }
                }
            }
        }
    }
    .WhyUsBlock{
        margin-top: 50px;
        .WhyUsCard {
            background-color: $white;
            padding: $pad + 20 $pad + 30;
            border-radius: $bdr-rds + 10;
            box-shadow: 5px 6px 90px rgba(192, 192, 192, 0.2);
            border: solid 2px $blue;
            max-width: 100%;
            margin: 0 auto;
            @media (max-width: $xl){
                padding: $pad + 5;
            }
            .WhyUsCardHeader {
                max-width: 930px;
                text-align: center;
                margin: 0 auto $mrg + 30;
                @media (max-width: $md){
                    margin: 0 auto $mrg + 10;
                }
                h4 {
                    font-size: $font + 16;
                    text-transform: uppercase;
                    font-weight: $font-weight-heavy;
                    margin-bottom: 0;
                    padding-bottom: $pad;                
                }
                p { 
                    text-align: center;
                    margin: 0;
                    font-size: $font + 7;
                    @media (max-width: $xl){
                        font-size: $font + 5;
                    }
                }
            }
            ul {
                li {
                    width: 48%;
                    flex: 0 0 48%;
                    font-size: $font + 7;
                    color: rgba($black, 0.8);
                    position: relative;
                    padding-left: $pad + 15;
                    margin: $pad 0;
                    @media (max-width: $xl){
                        font-size: $font + 5;
                        margin: $pad - 5 0;
                    }
                    @media (max-width: $md) {
                        width: 100%;
                    }
                    &:before {
                        position: absolute;
                        left: 0;
                        top: 5px;
                        width: 8px;
                        height: 13px;
                        content: "";
                        background: url(/assets/arrowIcon.png) no-repeat;
                    }
                }
            }        
        }
    }
}