@charset "utf-8";

/*==================================================
TOPBAR.CSS
Proyecto: INDIGO Inmobiliaria
Autor: ColaboraWeb
==================================================*/


/*==================================================
TOPBAR
==================================================*/

.topbar
{
    position:relative;

    background:linear-gradient(
        90deg,
        #021b6d 0%,
        #0a3297 50%,
        #021b6d 100%
    );

    overflow:hidden;
}

.topbar::before
{
    content:"";

    position:absolute;

    top:0;

    left:-30%;

    width:40%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:skewX(-25deg);

    animation:shine 10s linear infinite;
}

@keyframes shine
{
    from
    {
        left:-40%;
    }

    to
    {
        left:140%;
    }
}


/*==================================================
CONTAINER
==================================================*/

.topbar .container
{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:46px;

    gap:2rem;

}


/*==================================================
LEFT
==================================================*/

.topbar-left
{

    display:flex;

    align-items:center;

    gap:1.8rem;

}


.topbar-left a
{

    display:flex;

    align-items:center;

    gap:.65rem;

    color:rgba(255,255,255,.92);

    transition:.3s ease;

}


.topbar-left a:hover
{

    color:#fff;

}


/*==================================================
ICON CONTACT
==================================================*/

.topbar-left span
{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:50%;

    background:

    rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    font-size:.85rem;

    transition:.3s ease;

}


.topbar-left a:hover span
{

    background:var(--secondary);

    transform:translateY(-2px);

}



/*==================================================
RIGHT SOCIAL
==================================================*/

.topbar-right
{

    display:flex;

    align-items:center;

    gap:.65rem;

}


/*==================================================
SOCIAL BUTTON
==================================================*/

.topbar-right a
{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:50%;


    background:

    rgba(255,255,255,.10);


    color:#fff;

    transition:.35s ease;


}


.topbar-right a:hover
{

    background:var(--secondary);

    transform:translateY(-3px);

    box-shadow:

    0 8px 20px rgba(0,0,0,.20);

}


/*==================================================
ICON
==================================================*/

.topbar-right span
{

    font-size:.85rem;

}


/*==================================================
DIVIDER
==================================================*/

.topbar-divider
{

    width:1px;

    height:22px;

    background:

    rgba(255,255,255,.25);

}


/*==================================================
EFFECT
==================================================*/

.topbar::after
{

    content:"";

    position:absolute;

    bottom:-1px;

    left:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

}



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

.topbar-mobile
{

    display:none;

}



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

@media(max-width:992px)
{


    .topbar .container
    {

        min-height:42px;

    }


    .topbar-left
    {

        gap:1rem;

    }


}

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

@media(max-width:768px)
{


    .topbar
    {

        display:block;

    }


    .topbar .container
    {

        min-height:42px;

        flex-direction:column;

        justify-content:center;

        gap:.5rem;

        padding:.6rem 0;

    }



    /* CONTACTOS */

    .topbar-left
    {

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:.8rem;

    }


    .topbar-left a
    {

        font-size:.75rem;

        white-space:nowrap;

    }


    .topbar-left span
    {

        width:25px;

        height:25px;

    }



    /* REDES */

    .topbar-right
    {

        display:flex;

        width:100%;

        justify-content:center;

        gap:.5rem;

    }


    .topbar-right a
    {

        width:30px;

        height:30px;

    }


    .topbar-right i
    {

        font-size:.8rem;

    }


}