.landing-content{
    overflow-y: hidden;

    @include media-breakpoint-down(sm){
        margin-bottom: 50px;
    }

    h3.title{
        @include rem('font-size', 35);
        color: #F89623;
        font-weight: bold;
    }

    .des{
        font-family: $font-family-secondary;
        @include rem('font-size', 25);
        color: #181818;
    }
}

.wrap-hidden{
    // overflow-x: hidden;
}

.lp-container{
    width: 1070px;
    max-width: 100%;
    margin: 0 auto;
    // padding: 0 15px;
}

.grid-50{
    display: grid;
    grid-template-columns: 55% auto;
    grid-gap: 30px;

    @include media-breakpoint-down(md){
        grid-template-columns: auto;
    }
}

.single-landing_page{
    padding-top: 0;
}

.wrap-landing-hero{
    padding-bottom: 0;
    box-shadow: none;

    &.wrap-landing-hero-only{
        justify-content: center;
        grid-gap: 0;
    }

    .slider-nav{
        margin-left: -5px;
        margin-right: -5px;
    }

    @include media-breakpoint-down(md){
        display: block;
    }

    .wrap-info{
        padding-top: 10px;

        @include media-breakpoint-down(md){
            display: none;
        }
    }
}

.px-50{
    padding: 50px 0;
    @include rem('padding', 50, 0);
}

.pb-50{
    @include rem('padding-bottom', 50);
}

.wrap-plead{
    position: relative;
    @include rem('padding-bottom', 75);

    @include media-breakpoint-down(md){
        padding-bottom: 0;
    }

    &:before,
    &:after{
        content: '';
        pointer-events: none;
        position: absolute;
        @include rem('width', 150);
        @include rem('height', 125);
        border-radius: 5px;
        border: 4px solid #F89623;
    }

    &:before{
        @include rem('top', 50);
        @include rem('left', -30);
        border-right: 0;
        border-bottom: 0;

        @include media-breakpoint-down(md){
            @include rem('left', 30);
        }
    }

    &:after{
        @include rem('right', -30);
        bottom: 0;
        border-top: 0;
        border-left: 0;

        @include media-breakpoint-down(md){
            display: none;
        }
    }

    .info{
        position: relative;
        @include rem('padding-top', 45);

        @include media-breakpoint-down(md){
            @include rem('padding-left', 60);
            @include rem('padding-right', 60);
            @include rem('padding-bottom', 60);

            &:after{
                content: '';
                pointer-events: none;
                position: absolute;
                @include rem('width', 150);
                @include rem('height', 125);
                border-radius: 5px;
                border: 4px solid #F89623;
                bottom: 0;
                @include rem('right', 30);
                border-top: 0;
                border-left: 0;                
            }
        }
    }

    .des{
        text-align: center;

        p:last-child{
            margin-bottom: 0;
        }
    }
}

.wrap-plead-2{
    h3.title{
        text-align: center;
    }

    .des{
        text-align: center;

        @include media-breakpoint-down(sm){
            padding: 0 5px;
        }
    }
}

.video{
    width: 725px;
    max-width: 100%;
    margin: 0 auto;
    background: #F89623;
    padding: 1px;

    video{
        width: 100%;
    }

    figcaption{
        @include rem('font-size', 30);
        font-weight: 600;
        color: #181818;
        text-align: center;
        padding: 5px 15px;
    }
}

.wrap-infomation{
    @include media-breakpoint-down(sm){
        padding-left: 5px;
        padding-right: 5px;
    }

    h3.title{
        text-align: center;
        margin-bottom: 30px;
    }

    table{        
        box-sizing: border-box;
        width: 500px;
        max-width: 100%;
        margin: 0 auto;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #767676;
        border-radius: 10px;

        tr{
            td{                
                @include rem('font-size', 20);
                letter-spacing: 0.05em;
                color: #181818;
                font-weight: 500;
                padding: 10px 15px;

                &:not(:last-child){
                    border-right: 1px solid #767676;
                }
            }

            &:nth-child(odd){
                td{
                    background-color: rgba(196, 196, 196, 0.35);
                }
            }
        }
    }
}

.sale-percent{
    background: url(/wp-content/uploads/2022/02/bg-product-sale.jpg) no-repeat center;
    text-align: center;
    padding: 20px 0;
    background-size: cover;
    background-position: center bottom;

    &.product-2{
        .wrap-img{
            margin-bottom: 10px;

            img{
                max-width: 70%;
            }
        }
    }

    h2.title{
        @include rem('font-size', 52);
        color: #181818;
        font-weight: bold;

        strong{
            @include rem('font-size', 90);
            color: #F30000;
            font-weight: 700;
        }
    }

    .free-ship{
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.59);
        @include rem('font-size', 50);
        font-weight: bold;
        color: #FFFFFF;
        @include rem('margin-top', 30);
        @include rem('margin-bottom', 30);
    }

    .sale-button{
        background: linear-gradient(180deg, #FF3636 0%, #E40A0A 100%);
        border: 3px solid #FFFFFF;
        border-radius: 17px;
        @include rem('font-size', 60);
        font-weight: bold;

        @include media-breakpoint-down(sm){
            font-size: 25px;
        }
    }
}

.no-bg{
    background-color: transparent !important;
    box-shadow: none !important;
}

.big-text{
    display: inline-block;
    background: #F30000;
    border-radius: 55px;
    @include rem('padding', 10, 30);
    @include rem('font-size', 54);
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;

    @include media-breakpoint-down(sm){
        font-size: 25px;
    }
}

.wrap-list-product{
    display: flex;
    justify-content: center;
    @include rem('padding', 30, 0);

    @include media-breakpoint-down(sm){
        flex-wrap: wrap;
    }

    .product-item{
        @include rem('margin', 0, 30);

        &:last-child{
            @include media-breakpoint-down(sm){
                margin-top: 30px;
            }
        }

        @include media-breakpoint-down(md){
            margin: 0 5px;
        }

        &.no-bg{
            @include media-breakpoint-down(sm){
                display: none;
            }
        }
    }

.product-item{
    width: 350px;
    max-width: 100%;
    padding: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.35);
    border-radius: 23px;
    background: #FFFFFF;
    text-align: center;

    .wrap-img{
        @include rem('margin-bottom', 20);

        img{
            width: 100%;
            border-radius: 20px;
        }
    }

    .product-name{
        color: #F89623;
        font-weight: 600;
        @include rem('font-size', 26);
        margin-bottom: 10px;
        font-family: $font-family-base;
    }

    .product-info{
        @include rem('font-size', 20);
        color: #000000;
        @include rem('margin-bottom', 20);
    }

    .price{
        position: relative;
        @include rem('font-size', 25);
        font-weight: 600;
        margin-bottom: 10px;

        &.price-old{
            display: inline-block;

            &:before{
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: calc(50% - 2px);
                transform: rotate(5deg);
                border: 2px solid #3C3C3C;
            }
        }

        .num{
            font-weight: 900;
            color: #F30000;
        }
    }

    .buy-now{
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        @include rem('font-size', 25);
        font-family: $font-family-base;
    }
}    
}

.wrap-gallery{
    width: 585px;
    max-width: 100%;
    margin: 0 auto;
}

.wrap-p1{
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;

    @include media-breakpoint-down(md){
        display: block;
    }

    .item{
        font-family: $font-family-secondary;
        font-weight: 600;

        @include media-breakpoint-down(md){
            margin-bottom: 15px;
        }

        .name{                        
            @include rem('font-size', 35);
            color: #F64B0D;
            text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
        }

        .price{
            position: relative;
            @include rem('font-size', 85);
            font-weight: 800;
            background: linear-gradient(180deg, #FFA800 15.45%, #FFD000 79.09%);
            filter: drop-shadow(0px -4px 6px rgba(255, 255, 255, 0.45)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.6));
            text-shadow: 0px 0px 0 rgb(248,186,0),
             1px 1px 0 rgb(241,179,0),
             2px 2px 0 rgb(234,172,0),
             3px 3px  0 rgb(227,165,0),
             4px 4px 3px rgba(0,0,0,0.11),
             4px 4px 1px rgba(0,0,0,0.5),
             0px 0px 3px rgba(0,0,0,.2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            &:before{
                content: "";
                height: 20px;
                position: absolute;
                bottom: 10px;
                left: 20%;
                right: 20%;
                pointer-events: none;
                background: radial-gradient(50% 50% at 50% 50%, #333333 21.87%, rgba(196, 196, 196, 0) 100%);
                background-blend-mode: multiply;
                z-index: -1;
            }
        }
    }
}

.real-img{
    position: relative;
    text-align: center;

    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #F89623 0%, rgba(248, 150, 35, 0) 97.76%);
        height: 425px;
        pointer-events: none;
        z-index: -1;
    }

    h3.title{
        color: $white;
    }

    .list-img{
        width: 1025px;
        max-width: 100%;
        margin: 0 auto;

        .img{
            margin-top: 15px;
            width: 100%;
        }
    }
}

.contact-section{
    .wrap-logo-onon{
        text-align: center;

        img{
            @include media-breakpoint-down(sm){
                max-width: 280px;
            }
        }
    }

    h2.title{
        color: #F89623;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        @include rem('margin-top', 30);
    }

    h2.h1{
        text-align: center;
        font-weight: 700;
        @include rem('font-size', 40);
    }

    .wrap-mobile{
        text-align: center;
        @include rem('margin-top', 30);
    }

    .mobile{
        position: relative;
        text-align: center;
        background: linear-gradient(180deg, #FF3636 0%, #D60606 100%);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.35);
        border-radius: 30px;
        border: 3px solid #FFFFFF;
        color: #FFFFFF;
        @include rem('font-size', 80);
        font-weight: bold;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 30px;

        @include media-breakpoint-down(md){
            @include rem('font-size', 40);
        }

        &:before{
            content: '';
            @include rem('width', 90);
            @include rem('height', 90);
            background: url(../images/icon-phone.png) no-repeat center;
            background-size: cover;
            margin-right: 15px;
        }
    }
}

.footer-section{
    background: url(/wp-content/uploads/2022/02/footer-section.jpg) no-repeat center;
    background-size: cover;
    @include rem('padding', 70, 0);

    .wrap{
        padding: 30px;
        background: rgba(0, 0, 0, 0.8);
        text-align: center;
        color: $white;
        max-width: 100%;
        margin: 0 auto;

        .wrap-logo-onon{
            margin-bottom: 20px;

            img{
                height: 78px;
                width: auto;
            }
        }

        h3.title{
            color: $white;
        }

        h2.name{
            font-weight: 600;
            @include rem('font-size', 38);
            margin-bottom: 15px;
        }

        h5{
            @include rem('font-size', 30);
        }

        hr{
            opacity: 1;
            height: 6px;
            background-color: transparent;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #FFF;
            width: 600px;
            max-width: 100%;
            margin: 30px auto;

            &.width-80{
                position: relative;
                width: 280px;
                max-width: 100%;
                border-top: 0;
                overflow: inherit;
                margin-top: 0;

                &:before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -30px;
                    right: -30px;
                    border-top: 1px solid #FFF;
                }
            }
        }
    }

    .phone,
    .address{
        font-weight: 500;
        @include rem('font-size', 30);
        letter-spacing: 0.01em;

        display: flex;
        align-items: center;
        justify-content: center;    

        @include media-breakpoint-down(sm){
            font-size: 18px;
        }
    }

    .phone{
        margin-bottom: 15px;
    }

    .phone:before{
        content: '';
        width: 38px;
        height: 38px;
        background: url(../images/lp-phone.png) no-repeat center;
        background-size: cover;
        margin-right: 10px;
    }

    .address:before{
        content: '';
        width: 39px;
        height: 41px;
        background: url(../images/lp-address.png) no-repeat center;
        background-size: cover;
        margin-right: 10px;
    }

    .menu{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        margin: 0 auto;

        a{
            width: 50%;
            padding: 10px;
            text-decoration: none;
            @include rem('font-size', 30);
            color: #FFFFFF;

            &:hover{
                color: $primary;
            }

            @include media-breakpoint-down(sm){
                font-size: 18px;
                width: 100%;
                padding-top: 5px;
                padding-bottom: 5px;
            }            
        }
    }
}

.lp-contact-section{
    background: url(/wp-content/uploads/2022/02/bg-contact.jpg) no-repeat center;
    background-size: cover;

    @include media-breakpoint-down(sm){
        padding-left: 5px;
        padding-right: 5px;
    }

    h4{
        @include rem('font-size', 30);
        color: #383434;
        font-weight: bold;
        text-shadow: 0px 4px 8px #FFFFFF;
        margin-bottom: 20px;
    }

    .wrap-contact-form{
        width: 585px;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.35);
        border-radius: 18px;
        @include rem('padding', 20, 50);

        .wpcf7-form-control-wrap{
            display: block;
            margin-bottom: 25px;

            @include media-breakpoint-down(md){
                margin-bottom: 15px;
            }
        }

        .wpcf7-text{
            background: #F5F5F5;
            border: 1px solid #BDBDBD;
            border-radius: 10px;
            width: 100%;
            padding: 10px 20px;
            min-height: 64px;
            outline: none;

            @include media-breakpoint-down(md){
                min-height: 44px;
            }
        }

        .wpcf7-submit{
            @include rem('min-height', 64);
            @include rem('font-size', 30);
            display: block;
            margin: 0 auto;
        }

        .note{
            text-align: center;
            @include rem('font-size', 20);
            color: #383434;
            font-style: italic;
            margin-bottom: 15px;
        }

        .wpcf7-spinner{
            display: none;
        }

        .submitting{
            position: relative;
            opacity: 0.4;
            pointer-events: none;

            &:before{
                content: '';

                border: 10px solid #bdb9b9; /* Light grey */
                border-top: 10px solid #f89623; /* Blue */
                border-bottom: 10px solid #f89623;
                border-radius: 50%;
                width: 90px;
                height: 90px;
                animation: spin 2s linear infinite;

                position: absolute;
                top: calc(50% - 45px);
                left: calc(50% - 45px);
                z-index: 999;
            }
        }        
    }
}

#mobile-float{
    display: none;

    @include media-breakpoint-down(sm){
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #F89623;
        color: #FFF;
        border: 4px solid #181818;     
    }

    .price-del{
        text-align: center;
        font-family: $font-family-secondary;

        del{
            display: block;
            font-size: 25px;
            color: #000000;
        }

        ins{
            display: block;
            font-size: 30px;
            color: #FFFFFF;
            font-weight: 700;
            text-decoration: none;
            margin-top: -10px;
        }
    }

    .left{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
    }

    .right{
        position: relative;
        text-align: center;
        background-color: #F3F4F7;
        padding: 10px 0;

        &:before{
            content: "";
            left: -30px;
            background: url(../images/bg-float.png);
            top: 0;
            bottom: 0;
            width: 45px;
            position: absolute;
            background-size: auto 100%;
            z-index: 99;
            background-position: center;
        }

        .img{

            img{
                width: 100px;
            }
        }

        .wrap-button{
            margin-top: 5px;
            z-index: 100;
            position: relative;
            a{
                text-decoration: none;
                border: 2px solid #FFFFFF;
                background: linear-gradient(180deg, #FF3636 0%, #E40A0A 100%);
                color: #FFF;
                font-size: 15px;
                border-radius: 10px;
                padding: 5px 10px;
                display: inline-block;
                filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.35));
            }
        }
    }
}

.wrap-select-product{
    border: 1px solid #BDBDBD;
    border-radius: 21.5px;
    background: #F5F5F5;
    padding: 20px 15px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;

    @include media-breakpoint-down(md){
        display: block;
    }

    .wrap-item{
        display: flex;

        @include media-breakpoint-down(md){
            margin-bottom: 5px;
        }
    }

    input{
        margin-right: 5px;
        margin-top: 5px;

        @include media-breakpoint-down(md){
            margin-right: 0;
        }
    }

    label{
        font-size: 16px;
        margin-left: 10px;
        color: #F30000;
    }
}

.wrap-block-img{
    text-align: center;
}

.list-review{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #909090;
}

.review-item{    
    .wrap-review{
        margin-bottom: 20px;

        display: grid;
        grid-template-columns: 130px auto;
        grid-gap: 50px;

        @include media-breakpoint-down(md){
            grid-gap: 10px;
            grid-template-columns: 70px auto;
        }

        .input{
            @include rem('font-size', 20);
        }

        .gallery{
            list-style: none;
            margin: 0;
            padding: 0;
            margin-top: 10px;
            margin-bottom: 15px;

            display: grid;
            grid-gap: 15px;
            grid-template-columns: repeat(4, 1fr);

            img{
                width: 100%;
            }
        }        
    }

    .rating{
        margin-top: 5px;
        --starsize: 1.6rem;

        @include media-breakpoint-down(md){
            --starsize: 1.2rem;
        }
    }

    .avatar{
        width: 130px;
        height: 130px;
        border-radius: 50%;
        overflow: hidden;

        @include media-breakpoint-down(md){
            width: 70px;
            height: 70px;
        }

        img{
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .info{
        h4.name{
            font-weight: 700;
            font-size: 25px;
            color: #000000;
            margin-bottom: 10px;

            .buyer{
                color: #5DB85C;
                font-size: 15px;
                font-weight: 400;
                margin-left: 15px;

                display: inline-flex;
                align-items: center;

                &:before{
                    content: '';
                    display: inline-block;
                    width: 26px;
                    height: 26px;
                    background: url(../images/icon-shield.png) no-repeat center;
                    margin-right: 5px;
                }
            }

            .ad-manager{
                font-size: 15px;
                font-weight: 400;
                margin-left: 15px;
                background: #5DB85C;
                border-radius: 5px;
                padding: 5px 10px;
                color: #FFF;
                white-space: nowrap;
            }
        }
    }

    .reply-review{
        padding-left: 180px;
        margin-bottom: 40px;

        @include media-breakpoint-down(md){
            padding-left: 40px;
        }
    }
}

.wrap-review-data{
    padding: 0 15px;
}

.review-top{
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .review-img{
        width: 35%;

        img{
            width: 100%;
        }
    }

    .review-info{
        width: 75%;
        padding-left: 50px;
        text-align: center;

        h3{
            @include rem('font-size', 45);
            font-weight: 600;
        }

        h4{
            @include rem('font-size', 35);
            color: #181818;
            font-weight: 400;
        }
    }

    .wrap-star{
        @include rem('font-size', 35);
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;

        .star{
            @include rem('margin-right', 30);
        }

        .rating-label{
            margin-bottom: 0;
        }
    }
}

.wrap-block-text{
    padding-left: 15px;
    padding-right: 15px;

    h3.title{
        @include rem('font-size', 45);
        color: #0077EC;
        text-align: center;
        font-weight: 400;

        span{
            font-weight: 700;
            position: relative;

            display: flex;
            align-items: baseline;
            justify-content: center;
            overflow: hidden;

            &:before,
            &:after{
                content: '';
                position: relative;
                width: 50%;
                border-bottom: 4px solid #0077EC;
            }

            &:before{
                right: 5px;
                margin-left: -50%;
            }

            &:after{
                left: 5px;
                margin-right: -50%;
            }
        }
    }

    .des{
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            font-weight: 600;
            @include rem('font-size', 32);

            li{
                position: relative;
                margin-bottom: 10px;
                padding-left: 40px;

                &:before{
                    content: '';
                    @include rem('width', 30);
                    @include rem('height', 30);
                    background: url(../images/lp-arrow.svg) no-repeat center;
                    background-size: cover;
                    display: inline-block;
                    margin-right: 10px;
                    position: absolute;
                    left: 0;
                    top: 10px;
                }
            }
        }
    }

    &.style-2{
        h3.title{
            @include rem('font-size', 40);
            font-weight: 400;

            span{
                font-weight: 700;

                &:before,
                &:after{
                    display: none;
                }
            }
        }

        .des{
            ul{
                li{
                    @include rem('font-size', 22);

                    &:before{
                        background: url(../images/lp-arrow-2.svg) no-repeat center;
                        top: 3px;
                    }
                }
            }
        }
    }    
}
