/* ==========================================
   BUSCA
========================================== */

.header-search-area{
    flex:1;
    max-width:900px;
    margin-left:25px;
}

.header-search-form{
    position:relative;
    width:100%;
}

.header-search-input{

    width:100%;

    height:52px;

    padding:0 60px 0 20px;

    border:none;

    border-radius:12px;

    background:#1f2937;

    color:#ffffff;

    font-size:15px;

    outline:none;

    transition:0.25s ease;
}

.header-search-input::placeholder{
    color:#9ca3af;
}

.header-search-input:focus{
    background:#253244;
    box-shadow:
        0 0 0 2px #2563eb;
}

.header-search-button{

    position:absolute;

    right:8px;
    top:50%;

    transform:translateY(-50%);

    width:40px;
    height:40px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#ffffff;

    cursor:pointer;

    font-size:16px;

    transition:0.25s ease;
}

.header-search-button:hover{
    background:#1d4ed8;
}

.header-search-button:active{
    transform:translateY(-50%) scale(.96);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px){

    .header-search-area{
        margin-left:15px;
    }

    .header-search-input{
        height:48px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 576px){

    .header-search-area{
        width:100%;
        max-width:100%;
        margin:15px 0 0 0;
    }

    .header-search-input{
        height:46px;
        font-size:14px;
    }

    .header-search-button{
        width:36px;
        height:36px;
    }

}