@use '../utils' as *;

/*=============================
    	17. postbox
===============================*/

.td-postbox{
    &-thumb{
        & img{
            border-radius: 15px;
        }
    }
    &-item{
        & .td-blog-date{
            & i {
                transform: translateY(2px);
                display: inline-block;
            }
            & svg{
                margin-left: 0;
            } 
        }
        & .td-blog-title {
            font-size: 30px;
            @media #{$xs} {
                font-size: 25px;
            }
            &:hover{
                & a{
                    color: var(--td-theme-primary);
                }
            }
        }
    }
    &-content{
        & p{
            font-family: var(--td-ff-poppins);
            text-transform: capitalize;
            color: var(--td-grey-1);
            line-height: 28px;
        }
        & .td-btn{
            border-radius: 8px;
            padding: 15px 27px;
            background: #ffe9f7;
            color: var(--td-theme-secondary);
            &:hover{
                background: var(--td-theme-primary);
                color: var(--td-common-white);
            }
        }
    }
    &-wrapper{
        @media #{$md,$sm,$xs} {
            margin-right: 0;
        }
    }
    &-details{
        &-qoute{
            margin: 0 100px;
            @media #{$lg,$md,$sm,$xs} {
                margin: 0;
            }
        }
    }
    &-blockquote{
        background: #f5f3ff;
        border-radius: 0px 4px 4px 0px;
        padding: 20px 25px 25px 30px;
        border-left: 8px solid #5033ff;
        & p{
            font-family: var(--td-ff-poppins);
            font-weight: 500;
            font-size: 18px;
            line-height: 28px;
            color: var(--td-common-black);
        }
        & h5{
            font-family: var(--td-ff-poppins);
            font-weight: 600;
            font-size: 20px;
            margin-bottom: 0;
        }
    }
    &-navigation{
        & .navigation-btn{
            font-weight: 600;
            font-size: 18px;
            text-transform: capitalize;
            color: var(--td-common-black);
            & a{
                &:hover{
                    color: var(--td-theme-primary);
                }
            }
            & i{
                color: var(--td-theme-primary);
            }
        }
        & .td-date{
            font-family: var(--td-ff-poppins);
            font-weight: 500;
            font-size: 15px;
            text-transform: capitalize;
            color: var(--td-grey-1);
            & i{
                font-size: 18px;
                display: inline-block;
                margin-right: 9px;
                transform: translateY(3px);
            }
        }
        & p{
            font-family: var(--td-ff-poppins);
            font-weight: 500;
            line-height: 26px;
            text-transform: capitalize;
            color: var(--td-grey-1);
            @media #{$lg,$md,$sm,$xs} {
                & br{
                    display: none;
                }
            }
        }
    }
    &-form{
        box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.05);
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 15px;
        padding: 50px 60px 55px 60px;
        @media #{$xs} {
            padding: 20px 20px 25px 20px;
        }
        & p{
            font-family: var(--td-ff-poppins);
            text-transform: capitalize;
            color: var(--td-grey-1);
            margin-bottom: 22px;
        }
        &-title{
            font-family: var(--td-ff-poppins);
            font-weight: 700;
            font-size: 24px;
            text-transform: capitalize;
        }
        & .td-contact-form-box {
            padding: 0;
            border-radius: 0;
        }
        & .td-product-details-review-form-title {
            font-size: 34px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        & .td-btn{
            background: var(--td-theme-secondary);
            padding: 17px 24px;
        }
        & .td-contact-form-box .td-input {
            background: #f4f4f4;
            border: 1px solid transparent;
            &:focus{
                border-color: var(--td-theme-secondary);
            }
            &::placeholder{
                font-size: 15px;
                font-family: var(--td-ff-poppins);
            }
        }
        & .td-checkbox{
            & input{
                width: 18px;
                height: 18px;
                transform: translateY(3px);
                margin-right: 5px;
                flex: 0 0 auto;
            }
            & label{
                font-family: var(--td-ff-poppins);
                font-weight: 400;
                font-size: 16px;
                color: var(--td-grey-1);
            }
        }
    }
}