/*======= Features Boxes =======*/
.yankee-feature-boxes {
    .feature-box {
        margin-bottom: 30px;
        @include transition(0.3s);

        .icon {
            height: 80px;
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: $white;
            background-color: $secondary-color;
            margin-bottom: 15px;
            @include transition(0.3s);

            @include respond-below(lg) {
                height: 60px;
                width: 60px;
                line-height: 60px;
                font-size: 32px;
            }

            img {
                max-width: 75px;
                @include transition(0.3s);
            }
        }

        &.text-center {
            .icon {
                margin-left: auto;
                margin-right: auto;
            }
        }

        &.text-right {
            .icon {
                margin-left: auto;
            }
        }

        &.text-left {
            .icon {
                margin-right: auto;
            }
        }

        &.icon-left {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 30px;

            @include respond-below(xs) {
                gap: 15px;
            }

            @include respond-below(lg) {
                grid-template-columns: 60px 1fr;
            }
        }

        .desc {
            @include transition(0.3s);

            p {
                margin-bottom: 0;
                @include transition(0.3s);

                @include respond-below(xs) {
                    font-size: 15px;
                }
            }

            .title {
                text-transform: uppercase;
                margin-bottom: 15px;
                font-size: 20px;
                @include transition(0.3s);
            }
        }
    }
}

.yankee-feature-boxes-two {
    .feature-box {
        border-radius: 10px;
        background-color: $white;
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
        padding: 50px 28px 35px;
        @include transition(0.3s);

        .icon {
            font-size: 70px;
            line-height: 1;
            margin-bottom: 30px;

            img {
                max-width: 70px;
            }
        }

        .title {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .feature-link {
            font-size: 24px;
            line-height: 1;
            color: #d5d9da;
            margin-top: 20px;
            @include transition(0.3s);

            &:hover {
                color: $primary-color;
            }

            .fa-arrow-right {
                font-weight: 300;
                font-family: "Font Awesome 5 Pro";
            }
        }

        p {
            margin: 0;
            font-size: 15px;
        }
    }
}
