/* ========================================= */
/* BUILDFEATURES BRAND */
/* ========================================= */

.brand{

    display:flex;

    align-items:center;

    gap:16px;

    user-select:none;

    text-decoration:none;

    flex-shrink:0;

}

.brand-logo{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    color:#ffffff;

    font-size:1.4rem;

    box-shadow:

        0 12px 30px rgba(37,99,235,.25);

    transition:.25s ease;

}

.brand:hover .brand-logo{

    transform:
        rotate(-8deg)
        scale(1.05);

}

.brand-content{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.brand-title{

    font-size:1.35rem;

    font-weight:900;

    line-height:1;

    color:#0f172a;

    letter-spacing:-0.03em;

}

.brand-subtitle{

    font-size:.80rem;

    font-weight:600;

    color:#64748b;

    line-height:1.2;

}

@media(max-width:640px){

    .brand-logo{

        width:46px;

        height:46px;

        font-size:1.2rem;

    }

    .brand-title{

        font-size:1.1rem;

    }

    .brand-subtitle{

        display:none;

    }

}




/* ========================================= */
/* BACK BUTTON */
/* ========================================= */

.brand-wrapper{

    display:flex;

    align-items:center;

    gap:10px;

}

.bf-back-btn{

    width:34px;

    height:34px;

    border:none;

    border-radius:10px;

    background:#111827;

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.25s;

}

.bf-back-btn:hover{

    background:#2563eb;

}

.bf-back-btn i{

    font-size:14px;

}

@media(max-width:640px){

    .brand-wrapper{

        gap:8px;

    }

    .bf-back-btn{

        width:30px;

        height:30px;

    }

}