@import "partials";
.garge-repair-section {
    padding: 150px 0px;

    @media ($sm-1679) {
        padding: 90px 0;
    }
    @media ($sm-1481) {
        padding: 70px 0;
    }
    @media ($sm-1199) {
        padding: 50px 0;
    }

    .garage-section-outer {
        display: flex;
        @media ($sm-767) {
            flex-direction: column;
        }
        .garage-left {
            padding-right: 95px;
            @media ($sm-1199) {
                padding-right: 30px;
            }
            h3 {
                font-size: 33px;
                margin-bottom: 30px;

                @media ($sm-1679) {
                    font-size: 29px;
                    margin-bottom: 28px;
                }
                @media ($sm-1481) {
                    font-size: 25px;
                    margin-bottom: 22px;
                }
                @media ($sm-1199) {
                    font-size: 23px;
                    margin-bottom: 15px;
                }
                @media ($sm-767) {
                    font-size: 22px;
                }
            }
            .para-text {
                font-size: 20px;
                line-height: 35px;
                padding: 0;
                margin: 0;

                @media ($sm-1679) {
                    font-size: 18px;
                    line-height: 32px;
                }
                @media ($sm-1481) {
                    font-size: 16px;
                    line-height: 28px;
                }
                @media ($sm-1199) {
                    font-size: 15px;
                }
                @media ($sm-767) {
                    font-size: 14px;
                    line-height: 25px;
                }

                & + .para-text {
                    padding-top: 20px;
                    @media ($sm-767) {
                        padding-top: 15px;
                    }
                }
            }
            .btn-block {
                margin-top: 42px;
                @media ($sm-767) {
                    margin-top: 30px;
                }
            }
        }
        .garage-slider-cover {
            @media ($sm-767) {
                padding: 30px 0;
            }
        }
        .garage-slider {
            .garage-item {
                padding: 0 15px;
                @media ($sm-1199) {
                    padding: 0 5px;
                }
            }
            .garage-card {
                height: 463px;
                border-radius: 13px;
                overflow: hidden;
                position: relative;
                @media ($sm-1481) {
                    height: 350px;
                }
                @media ($sm-479) {
                    height: 290px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }
            .slick-arrow {
                bottom: -57px !important;
                border: solid 1px #ccbebe;
                right: auto;
                left: 18px;
                &:hover {
                    border: solid 1px #fbcf11;
                }
            }
            .slick-arrow.slick-next {
                left: 54px;
            }
            .slick-arrow::before {
                border-color: #ccbebe;
            }
        }
    }
}

.locksmith-section {
    background: $bg-blue;
    padding: 180px 0px;

    @media ($sm-1679) {
        padding: 90px 0;
    }
    @media ($sm-1481) {
        padding: 70px 0;
    }
    @media ($sm-1199) {
        padding: 50px 0;
    }

    .locksmith-section-outer {
        display: flex;
        @media ($sm-991) {
            flex-direction: column;
        }
        .locksmith-img {
            @media ($sm-991) {
                padding-bottom: 30px;
            }
            img {
                border-radius: 20px;
                @media ($sm-1679) {
                    max-width: 90%;
                }
                @media ($sm-991) {
                    max-width: 60%;
                }
                @media ($sm-479) {
                    max-width: 80%;
                }
            }
        }

        .locksmith-content-block {
            color: $white;
            padding: 0px 15px;
            @media ($sm-991) {
                padding: 0;
            }
            h3 {
                font-size: 33px;
                margin-bottom: 30px;
                @media ($sm-1679) {
                    font-size: 29px;
                    margin-bottom: 28px;
                }
                @media ($sm-1481) {
                    font-size: 25px;
                    margin-bottom: 22px;
                }
                @media ($sm-1199) {
                    font-size: 23px;
                    margin-bottom: 15px;
                }
                @media ($sm-767) {
                    font-size: 22px;
                }
            }
            .para-text {
                font-size: 20px;
                line-height: 35px;
                @media ($sm-1679) {
                    font-size: 18px;
                    line-height: 32px;
                }
                @media ($sm-1481) {
                    font-size: 16px;
                    line-height: 28px;
                }
                @media ($sm-1199) {
                    font-size: 15px;
                }
                @media ($sm-767) {
                    font-size: 14px;
                    line-height: 25px;
                }
            }
            .btn-block {
                margin-top: 42px;
                @media ($sm-767) {
                    margin-top: 30px;
                }
            }
        }
    }
}