﻿h1 {
    font-size:1.8rem;
}

@media (min-width: 1024px) {
    .hero_container {
        background-image: url('/images/customer-review/customer-reviews-bg.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 40vh;
        position: relative;
    }

        .hero_container .hero_text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            width:90%;
        }


    /* Review Section */
    .section_1 {
        background-color: #fff;
        margin: 0 auto;
    }

        .section_1 .review-links {
            background-color: #f2f2f2;
            border: solid 1px #f2f2f2;
            border-radius: 25px;
            padding: 15px 2rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 90%;
        }

            .section_1 .review-links img {
                max-width: 225px;
                padding: 20px 0;
                width: 100%;
            }

            .section_1 .review-links i {
                color: #707070;
            }

            .section_1 .review-links #socials {
                max-width: 900px;
                margin: auto;
            }

                .section_1 .review-links #socials img {
                    max-width: 50px
                }

            .section_1 .review-links .socials-red {
                padding: 50px 0;
            }

        .section_1 .seperator {
            position: relative;
            background-color: #000;
            color: #fff;
            border: solid 1px #000;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            margin: 20px auto;
        }

            .section_1 .seperator i {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
            }

        .section_1 .review_form {
            padding: 15px 2rem;
            background: linear-gradient(120deg, #f2f2f2, #fff, #f2f2f2);
            border: solid 1px #f2f2f2;
            border-radius: 15px;
        }

            .section_1 .review_form button.review-submit {
                background-color: transparent;
                border: solid 1px #000;
                border-radius: 5px;
                color: #000;
                padding: 5px 20px;
                transition: .2s;
            }

                .section_1 .review_form button.review-submit:hover {
                    background-color: #c62128;
                    border: solid 1px #c62128;
                    color: #fff;
                }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero_container {
        background-image: url('/images/customer-review/customer-reviews-bg.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 40vh;
        position: relative;
    }

        .hero_container .hero_text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            width:75%;
        }


    /* Review Section */
    .section_1 {
        background-color: #fff;
        max-width: 95%;
        margin: 0 auto;
    }

        .section_1 .review-links {
            background-color: #f2f2f2;
            border: solid 1px #f2f2f2;
            border-radius: 25px;
            padding: 1rem 2rem;
        }

            .section_1 .review-links img {
                max-width: 225px;
                padding: 20px 0;
                width: 100%;
            }

            .section_1 .review-links i {
                color: #707070;
            }

            .section_1 .review-links #socials {
                max-width: 900px;
                margin: auto;
            }

                .section_1 .review-links #socials img {
                    max-width: 50px
                }

            .section_1 .review-links .socials-red {
                padding: 50px 0;
            }

        .section_1 .seperator {
            position: relative;
            background-color: #000;
            color: #fff;
            border: solid 1px #000;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin: 20px auto;
        }

            .section_1 .seperator i {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%);
                font-size: 18px;
            }

        .section_1 .review_form {
            padding: 15px 2rem;
            background: linear-gradient(120deg, #f2f2f2, #fff, #f2f2f2);
            border: solid 1px #f2f2f2;
            border-radius: 15px;
        }

            .section_1 .review_form button.review-submit {
                background-color: transparent;
                border: solid 1px #000;
                border-radius: 5px;
                color: #000;
                padding: 5px 20px;
                transition: .2s;
            }

                .section_1 .review_form button.review-submit:hover {
                    background-color: #c62128;
                    border: solid 1px #c62128;
                    color: #fff;
                }
}

@media (max-width: 767px) {
    .hero_container {
        background-image: url('/images/customer-review/customer-reviews-bg.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 70vh;
        position: relative;
    }

        .hero_container .hero_text {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -40%);
            color: #fff;
            width: 100%;
        }


    /* Review Section */
    .section_1 {
        background-color: #fff;
        max-width: 90%;
        margin: 0 auto;
    }

        .section_1 .review-links {
            background-color: #f2f2f2;
            border: solid 1px #f2f2f2;
            border-radius: 25px;
            padding: 0 2rem 1rem;
        }

            .section_1 .review-links img {
                margin-top: 1rem;
                max-width: 200px;
                padding: 20px 0;
                width: 100%;
            }

            .section_1 .review-links i {
                color: #707070;
            }

            .section_1 .review-links #socials {
                max-width: 900px;
                margin: auto;
            }

                .section_1 .review-links #socials img {
                    max-width: 50px
                }

            .section_1 .review-links .socials-red {
                padding: 50px 0;
            }

        .section_1 .seperator {
            position: relative;
            background-color: #000;
            color: #fff;
            border: solid 1px #000;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin: 20px auto;
        }

            .section_1 .seperator i {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%);
                font-size: 18px;
            }

        .section_1 .review_form {
            padding: 15px 1rem;
            background: linear-gradient(120deg, #f2f2f2, #fff, #f2f2f2);
            border: solid 1px #f2f2f2;
            border-radius: 15px;
        }

            .section_1 .review_form button.review-submit {
                background-color: transparent;
                border: solid 1px #000;
                border-radius: 5px;
                color: #000;
                padding: 5px 20px;
                transition: .2s;
            }

                .section_1 .review_form button.review-submit:hover {
                    background-color: #c62128;
                    border: solid 1px #c62128;
                    color: #fff;
                }
}


/* Rating Stars */
.star-rating {
    white-space: nowrap;
}

    .star-rating [type="radio"] {
        appearance: none;
    }

    .star-rating i {
        font-size: 1.2em;
        transition: 0.3s;
    }

    .star-rating label:is(:hover, :has(~ :hover)) i {
        transform: scale(1.35);
        color: #ffee58;
    }

    .star-rating label:has(~ :checked) i {
        color: #faec1b;
        text-shadow: 0 0 2px #ffffff, 0 0 10px #ffee58;
    }
