@use "../../abstract/" as *;
/* ========== Home 10 : Hero Section Style ============= */
@import url("https://fonts.cdnfonts.com/css/clash-display");

.home-10 {
    &_hero-section {
        background: #FFF4D9;
        padding-top: 80px;

        @media (min-width:576px) {
            padding-top: 100px;
        }

        @media (min-width:992px) {
            padding-top: 120px;
        }

        @media (min-width:1200px) {
            padding-top: 160px;
        }

        @media (min-width:1400px) {
            padding-top: 185px;
        }

        .row--custom {
            --bs-gutter-y: 30px;
            justify-content: center;

            @media (min-width:992px) {
                flex-direction: row-reverse;
                align-items: center;
                justify-content: space-between;
            }
        }
    }

    &_hero-section-wrapper {
        border-bottom: 1px solid rgba(#221F1A, 0.1);
        padding-bottom: 60px;

        @media (min-width:576px) {
            padding-bottom: 80px;
        }
    }

    &_hero-content-block {
        text-align: center;

        @media (min-width:992px) {
            text-align: initial;
        }

        p {
            color: rgba(#221F1A, 0.8);

            @media (min-width:992px) {
                max-width: 630px;
            }
        }

        .hero-content__title {
            font-family: $font-family-clash-display;
        }

    }

    &_hero-text-block {
        margin-bottom: 30px;

        @media (min-width:992px) {
            margin-bottom: 50px;
        }
    }

    &_hero-button-group {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 24px;

        @media (min-width:992px) {
            justify-content: initial;
        }

        @media (max-width:479px) {
            .btn {
                width: 100%
            }
        }

        .btn-outline-l10 {
            &:hover {
                --btn-bg: #2D2B92;
            }
        }
    }

    &_button-bottom-rating {
        display: flex;
        justify-content: center;
        column-gap: 20px;
        margin-top: 24px;

        @media (min-width:992px) {
            justify-content: initial;
        }

        span {
            display: flex;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.5;
            color: rgba(#221F1A, 0.7);
            column-gap: 10px;
            position: relative;
            top: 7.5px;
        }
    }

    &_hero-image {
        img {
            width: 100%
        }
    }
}





























// .hero-section{

//     &-text-content{
//         display: flex;
//         flex-direction: column;
//         justify-content: center;
//         height: 100%;
//         .hero-title{
//             font-family: 'Clash Display',sans-serif;
//             font-weight: 500;
//             font-size: 90px;
//             line-height: 96px;
//             color: #221F1A;     
//             padding-bottom: 24px;       
//         }
//         .hero-description{
//             font-family: $font-family-base;
//             font-style: normal;
//             font-weight: 400;
//             font-size: 18px;
//             line-height: 30px;
//             color: #221F1A;
//             opacity: 0.8;
//             padding-bottom: 40px;
//         }
//     }
//     &__image{
//         padding-left: 60px;
//     }

//     &-buttons{
//         padding-bottom: 30px;
//         display: flex;
//         gap: 30px;
//     }

// }