HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: /var/www/html/WPGrarageLock/wp-content/themes/garage-lock/scss/form.scss
@import "partials";
.contact-section {
    padding: 100px 0px;
    @media ($sm-1679) {
        padding: 80px 00px;
    }
    @media ($sm-1481) {
        padding: 60px 0px;
    }
    @media ($sm-1199) {
        padding: 40px 0px 60px 0;
    }
    @media ($sm-479) {
        padding: 30px 0px 40px 0;
    }
    .top-section {
        text-align: center;
        max-width: 770px;
        margin: 0 auto;
        padding-bottom: 80px;
        @media ($sm-1679) {
            padding-bottom: 60px;
        }
        @media ($sm-1481) {
            padding-bottom: 40px;
        }
        @media ($sm-1199) {
            padding-bottom: 20px;
        }
        @media ($sm-479) {
            padding-bottom: 10px;
        }
        .contact-heading {
            letter-spacing: 0px;
            color: #000000;
            opacity: 1;
            font-size: 33px;
            line-height: 53px;
            font-weight: 600;
            @media ($sm-1679) {
                font-size: 30px;
                line-height: 43px;
            }
            @media ($sm-1481) {
                font-size: 28px;
                line-height: 38px;
            }
            @media ($sm-1199) {
                font-size: 26px;
                line-height: 36px;
            }
            @media ($sm-991) {
                font-size: 24px;
                line-height: 34px;
            }
            @media ($sm-767) {
                font-size: 22px;
                line-height: 32px;
            }
        }
        .contact-content {
            letter-spacing: 0px;
            color: #000000;
            font-size: 20px;
            line-height: 36px;
            font-weight: 400;
            @media ($sm-1679) {
                font-size: 18px;
                line-height: 28px;
            }
            @media ($sm-1481) {
                font-size: 16px;
                line-height: 26px;
            }
            @media ($sm-1199) {
                font-size: 14px;
                line-height: 24px;
            }
            @media ($sm-479) {
                line-height: 1.4;
            }
        }
    }
    .contact-form {
        @media ($sm-767) {
            flex-direction: column;
        }
    }
    .left-sec {
        width: 483px;
        height: 535px;
        padding: 0;
        @media ($sm-1679) {
            height: 500px;
            width: 460px;
        }
        @media ($sm-1481) {
            height: 460px;
            width: 430px;
        }
        @media ($sm-1199) {
            width: 40%;
            height: 380px;
        }
        @media ($sm-767) {
            width: 90%;
            height: 280px;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 30px;
            @media ($sm-767) {
                border-radius: 20px;
            }
        }
    }
    .rt-sec {
        flex: 1;
        padding-left: 50px;
        @media ($sm-991) {
            padding-left: 20px;
        }
        @media ($sm-767) {
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 40px;
        }
        @media ($sm-479) {
            padding-top: 20px;
        }
        .form-sec {
            .mb3 {
                @media ($sm-767) {
                    margin-bottom: 0px !important;
                }
            }
            .form-label {
                letter-spacing: 0px;
                color: #888888;
                font-size: 18px;
                font-weight: 400;
                @media ($sm-1679) {
                    font-size: 16px;
                    line-height: 26px;
                }
                @media ($sm-1481) {
                    font-size: 14px;
                    line-height: 24px;
                }
                @media ($sm-1199) {
                    font-size: 12px;
                    line-height: 22px;
                }
                @media ($sm-767) {
                    margin-bottom: 0.3rem;
                }
            }
            .form-control {
                height: 40px;
                border: none;
                border-bottom: 1px solid #7070705e;
                letter-spacing: 0px;
                color: #000000;
                font-size: 18px;
                font-weight: 400;
                border-radius: 0px;
                margin-bottom: 60px;
                padding: 0;
                @media ($sm-1679) {
                    font-size: 16px;
                    margin-bottom: 50px;
                    line-height: 26px;
                }
                @media ($sm-1481) {
                    font-size: 14px;
                    margin-bottom: 40px;
                    line-height: 24px;
                }
                @media ($sm-1199) {
                    font-size: 12px;
                    margin-bottom: 30px;
                    line-height: 22px;
                }
                @media ($sm-991) {
                    margin-bottom: 20px;
                }
                @media ($sm-767) {
                    margin-bottom: 10px;
                }
                &::placeholder {
                    color: #000;
                }
            }
            .btn-sec {
                .submit-btn {
                    width: 216px;
                    height: 51px;
                    letter-spacing: 0px;
                    color: #000000;
                    font-size: 18px;
                    font-weight: 700;
                    border-radius: 0px;
                    margin-bottom: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #fbcf11;
                    border-radius: 50px;
                    margin-bottom: 0;
                    @media ($sm-1679) {
                        font-size: 16px;
                        height: 46px;
                        line-height: 26px;
                    }
                    @media ($sm-1481) {
                        font-size: 14px;
                        height: 42px;
                        line-height: 24px;
                    }
                    @media ($sm-1199) {
                        font-size: 12px;
                        line-height: 22px;
                    }
                    @media ($sm-767) {
                        width: 160px;
                    }
                }
            }
        }
    }
}

.image-slider {
    width: 100%;
    overflow: hidden;
    .container-fluid {
        padding: 0;
    }
    .slick-slide {
        margin: 0;
    }
    .slider-wrapper {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }
    img {
        display: block;
        width: 100%;
        height: 337px;
        object-fit: cover;
        @media ($sm-1679) {
            height: 300px;
        }
        @media ($sm-1481) {
            height: 200px;
        }
        @media ($sm-767) {
            height: 180px;
        }
    }
}