.search{
      width: 600px;   
    }
    .search .form-control{
      padding: 0.6em;
      border:1px solid #afafaf;
       -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
    }
    .search .form-control:focus{
      border:1px solid #5d9eff;
      outline: none;
      box-shadow: 0 0 5px #5d9eff;
    }    
    .search h4{
      font-family: Roboto;
    }
    .btn-search{
      position: absolute;
      top: 3px;
      right:4px;
      outline:none;
      border:1px ridge #f00;
      background-color: #f00;
      padding: 0.4em 0.7em;
      color: #fff;
      border-radius: 5px;
      -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
    }
    .btn-search:active{
      background-color: maroon;
      box-shadow:  0 0 5px #000;
    }
    .geo-icon{
      position: absolute;
      top: 11px;
      left: 10px;
    }
    .search-top{
      position: relative;
      transition: all 1s ease-in-out;
    }
    .search-top{  
      position: fixed;
      top: 0.7em;
      left: 17em;
      z-index: 999;
      width: 550px;   
    }
    .search-top h2{
      display: none;
    }

/* >>>> CAROUSEL <<<< */
    #carouselAds{
      overflow: hidden;
      border-radius: 1em;
    }
    
/* >>>> CATEGORY ICON <<<< */
    .category h3{
          font-size: 22px;
          color: #036da5; 
          margin-bottom: 20px; 
        }
        .category-item{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0px 20px;
            gap: 15px;
            justify-content: space-between;
            flex-wrap: nowrap;
            overflow: auto;
        }
        .inner-box{
            display: flex;
            align-items: center;
            flex-direction: column;
            flex-grow: 1;
            flex-basis: 90px;
        }
        .inner-box p{
          font-size: small;
            color: black;
             text-align: center;
            margin-top: 8px;
            white-space: nowrap;
        }
        
        .inner-img{
            height: 80px;
            width: 80px;
            border: 0.5px solid #ccc;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner-img img{
            height: 70%;
            width: 70%;
            object-fit: contain;
        }

/* >>>> WEBSITE, CITY <<<< */
        .website .position-absolute, .city .position-absolute{
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          background-color: #000000a1;
          border-radius: 1em;
        }
        .website .position-absolute > a, .city .position-absolute > a{
          display: block;
          padding: 5px 0;
          font-size: small;
          color: #fff;
          font-family: Roboto;
        }

/* >>>> SEARCH LOCATION <<<< */
        .dropdown-menu{
            display: none;
            position: relative;
            width: 100%;
            padding: 10px;
            font-size: small;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.5s linear all;
        }
        .dropdown-menu .show{
            display: block
        }
        .text-current-location{
            display: flex;
            margin-top: -24px;
            margin-left: 2em;
        }

/* >>>> SEARCH KEYWORD <<<< */
        .box-content-search {
          position: absolute;
          left: 0;
          right: 0;
          padding: 0 10px;
          border: 1px solid #b7afaf;
          border-radius: 5px;
          background-color: var(--White);
          box-shadow: 0px 6px 15px 0px rgba(64, 79, 104, 0.0509803922);
          opacity: 1;
          z-index: 5;
          background-color: #fff;
      }
      .box-content-search.hidden{
        visibility: hidden;
      }
      .box-content-search.show{
        visibility: visible;
      }
      .box-content-search ul {
          max-height: 320px;
          list-style: none;
          margin-left: 0;
          padding-left: 0;
          overflow-x: wrap; 
          overflow-y: scroll;
      }
      .box-content-search ul > li {
        padding: 8px 12px;
        border-radius: 5px;
        border-bottom: 1px solid #e7e7e7;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .box-content-search ul > li > div.item > div {
        white-space: nowrap;
        width:100%;
        text-overflow: ellipsis;
        overflow-x: hidden;
        font-size: 14px;
      }
      .box-content-search ul > li > div.item > div > small {
        color: #a5a5a5;
        font-size: 11px;
        font-weight:bold;
        font-style: italic;
      }

/*      tags*/
#browse{
  list-style: none;
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#browse > li{
  border: 1px solid #baa9ff;
  padding: 1px 15px 6px;
  border-radius: 5px;
  transition: all 5s linear;
  -webkit-transition: all 5s linear;
}
#browse > li:hover{
/*  background-color: #f00*/
background: #ECE9E6;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
#browse > li > a{
  font-size: 14px;
  white-space: nowrap;
}
#browse > li > a > b{
  font-size: 1.4rem;
  color:#f9acac;
}