/*==================================================
    TIPA MART
    SEARCH RESULTS PROMOTIONAL HEADER
==================================================*/


/*==================================================
    SEARCH HEADER
==================================================*/

.search-header{

    position:relative;

    width:100%;

    height:115px;

    overflow:hidden;

    background:#082C6C;

}


/*==================================================
    BANNER IMAGE
==================================================*/

.search-header__image{

    position:relative;

    width:100%;

    height:115px;

    overflow:hidden;

}


.search-header__image img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}


/*==================================================
    OVERLAY
==================================================*/

.search-header__overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:rgba(8,44,108,.68);

}

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

.search-header__image .container{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

    height:100%;

}

/*==================================================
    CONTENT
==================================================*/

.search-header__content{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/*==================================================
    TEXT
==================================================*/

.search-header__text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:4px;

    min-width:0;

    color:#FFFFFF;

}


/*==================================================
    TITLE
==================================================*/

.search-header__text h1{

    margin:0;

    color:#FFFFFF;

    font-size:23px;

    font-weight:700;

    line-height:1.2;

}


/*==================================================
    DESCRIPTION
==================================================*/

.search-header__text p{

    margin:0;

    color:#FFFFFF;

    font-size:13px;

    line-height:1.4;

}


.search-header__text strong{

    color:#F5B51D;

    font-weight:700;

}


/*==================================================
    BREADCRUMB
==================================================*/

.search-header__breadcrumb{

    display:flex;

    align-items:center;

    gap:9px;

    flex-shrink:0;

    padding:7px 11px;

    border-radius:5px;

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

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    font-size:12px;

    white-space:nowrap;

}


.search-header__breadcrumb a{

    color:#FFFFFF;

    text-decoration:none;

}


.search-header__breadcrumb a:hover{

    color:#F5B51D;

}


.search-header__breadcrumb i{

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

    font-size:9px;

}


.search-header__breadcrumb .current{

    color:#F5B51D;

    font-weight:700;

}


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

@media (max-width:992px){

    .search-header,
    .search-header__image{

        height:110px;

    }


    .search-header__text h1{

        font-size:21px;

    }


    .search-header__text p{

        font-size:12px;

    }


    .search-header__breadcrumb{

        font-size:11px;

        padding:6px 10px;

    }

}


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

@media (max-width:768px){

    .search-header,
    .search-header__image{

        height:115px;

    }


    .search-header__content{

        justify-content:center;

    }


    .search-header__text{

        width:100%;

        max-width:100%;

    }


    .search-header__text h1{

        font-size:19px;

    }


    .search-header__text p{

        font-size:11px;

    }


    .search-header__breadcrumb{

        display:none;

    }

}


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

@media (max-width:576px){

    .search-header,
    .search-header__image{

        height:110px;

    }


    .search-header__text h1{

        font-size:17px;

    }


    .search-header__text p{

        font-size:10px;

    }

}


/*==================================================
    VERY SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .search-header,
    .search-header__image{

        height:105px;

    }


    .search-header__text h1{

        font-size:16px;

    }

}