/*------------------------------------*\
    #FAQS
\*------------------------------------*/
.faqs {
    padding-top   : 130px;
    padding-bottom: 110px;

    @media #{$maxTablet} {
        padding-top   : 70px;
        padding-bottom: 70px;
    }

    .faqs-action {
        margin-bottom: 0px;

        @media #{$maxSmall} {
            display       : flex;
            flex-direction: column;
            align-items   : center;
        }

        .btn {
            font-family : var(--global--font-body);
            font-size   : 15px;
            font-weight : 700;
            display     : inline-flex;
            width       : 170px;
            height      : 65px;
            margin-right: 30px;

            @media #{$noteBook} {
                margin-right: 10px;
            }

            @media #{$maxTablet} {
                margin: 0 30px 0 0;
            }

            @media #{$maxSmall} {
                margin-right : 0;
                margin-bottom: 15px;
                height       : 50px;
            }

            &:first-child {
                i {
                    color: var(--global--color-heading);
                }

                &:hover {
                    i {
                        color: var(--global--color-white);
                    }
                }
            }

            &:last-child {
                padding: 0 28px;
            }

            &.btn--white {
                box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
            }
        }
    }

    .more-faqs {
        text-align: center;
        margin-top: 3px;

        p {
            font-family: var(--global--font-body);
            font-weight: 700;
            font-size  : 15px;
            color      : var(--global--color-body);

            a {
                position      : relative;
                font-weight   : 700;
                color         : var(--global--color-heading);
                transition    : 0.3s ease-in-out;
                text-transform: capitalize;
                padding-bottom: 6px;

                &:hover {
                    &::before {
                        width: calc(100% - 20%);
                    }
                }

                &::before {
                    content         : '';
                    transition      : 0.3s ease-in-out;
                    position        : absolute;
                    bottom          : 0;
                    left            : 50%;
                    transform       : translateX(-50%);
                    width           : 100%;
                    height          : 2px;
                    background-color: var(--global--color-primary);
                }
            }
        }
    }

    &.faqs-2 {
        padding-top   : 130px;
        padding-bottom: 100px;

        @media #{$maxTablet} {
            padding-top   : 70px;
            padding-bottom: 70px;
        }
    }
}