.home {
  position: relative;
  padding-bottom: 160px;
}

/* Banner */

.banner {
  display: flex;
  gap: 1.5rem;
  padding:  1.5rem;
  overflow: auto;
}

/* End Banner */
.container-feature{
  padding: 0 1.5rem 1.5rem 1.5rem;
}

@media (max-width: 1023px) {
  /* Menu Feature */
  .menu-feature {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 16px;
    padding: 24px 8px;
    place-items: center;
    border-radius: 16px;
    border: 1px solid var(--Default-gray-200, #e5e7eb);
    background: rgba(249, 250, 251, 0.5);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(3px);
  }
}

@media screen and (min-width:1025px) {
  .container-feature{
    padding: 0 80px 1.5rem 80px;
  }
  .banner {
    padding:0 80px 1.5rem 80px !important;    
  }
  .bg-home {    
    height: 58vh !important;    
  }
  .promo {
    padding: 0 80px 0 80px !important;
  }
}


/* Promo */
.promo {
  padding: 0.5rem 0rem 1rem 1.5rem;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 2rem 1rem 0rem;
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.header-home {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 96px;
  padding: 1.5rem 1.5rem 0rem 1.5rem;
}

/* Search Bar */
.search-bar {
  width: 100%;
}

/* Notification */
Button {
  background: none;
  border: none;
}

.icon-bell {
  
  background-size: 24px;
}

.icon-bell:hover {
  -webkit-animation: ring 4s 0.7s ease-in-out;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s 0.7s ease-in-out;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s 0.7s ease-in-out;
  transform-origin: 50% 4px;
}

/* Service Feature */
.service {
  display: flex;
  /* Enable flexbox layout */
  flex-direction: column;
  /* Arrange items in a column */
  align-items: center;
  /* Center items horizontally */
  justify-content: center;
  /* Center items vertically */
  gap: 8px;
  /* Space between items */
  height: 200px;
}

.rectangle {
  width: 40px;
  height: 40px;
  display: flex;
  padding: 8px;
  align-items: center;
  border-radius: 16px;
  background: var(--Default-gray-100, #f3f4f6);
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04) inset;
}

.service .h4 {
  text-align: center;
  max-width: 85px;
  min-width: 70px;
  height: 48px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.serviceImg {
  width: 40px;
  height: 40px;
}

.bg-home {
  width: 100%;
  height: 55vh;
  overflow: hidden;
}

.bg-blur {
  width: 105%;
  height: 32px;
  flex-shrink: 0;
  background: var(--Default-gray-50, #f9fafb);
  filter: blur(6px);
}

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotateZ(0);
  }

  1% {
    -webkit-transform: rotateZ(30deg);
  }

  3% {
    -webkit-transform: rotateZ(-28deg);
  }

  5% {
    -webkit-transform: rotateZ(34deg);
  }

  7% {
    -webkit-transform: rotateZ(-32deg);
  }

  9% {
    -webkit-transform: rotateZ(30deg);
  }

  11% {
    -webkit-transform: rotateZ(-28deg);
  }

  13% {
    -webkit-transform: rotateZ(26deg);
  }

  15% {
    -webkit-transform: rotateZ(-24deg);
  }

  17% {
    -webkit-transform: rotateZ(22deg);
  }

  19% {
    -webkit-transform: rotateZ(-20deg);
  }

  21% {
    -webkit-transform: rotateZ(18deg);
  }

  23% {
    -webkit-transform: rotateZ(-16deg);
  }

  25% {
    -webkit-transform: rotateZ(14deg);
  }

  27% {
    -webkit-transform: rotateZ(-12deg);
  }

  29% {
    -webkit-transform: rotateZ(10deg);
  }

  31% {
    -webkit-transform: rotateZ(-8deg);
  }

  33% {
    -webkit-transform: rotateZ(6deg);
  }

  35% {
    -webkit-transform: rotateZ(-4deg);
  }

  37% {
    -webkit-transform: rotateZ(2deg);
  }

  39% {
    -webkit-transform: rotateZ(-1deg);
  }

  41% {
    -webkit-transform: rotateZ(1deg);
  }

  43% {
    -webkit-transform: rotateZ(0);
  }

  100% {
    -webkit-transform: rotateZ(0);
  }
}

@-moz-keyframes ring {
  0% {
    -moz-transform: rotate(0);
  }

  1% {
    -moz-transform: rotate(30deg);
  }

  3% {
    -moz-transform: rotate(-28deg);
  }

  5% {
    -moz-transform: rotate(34deg);
  }

  7% {
    -moz-transform: rotate(-32deg);
  }

  9% {
    -moz-transform: rotate(30deg);
  }

  11% {
    -moz-transform: rotate(-28deg);
  }

  13% {
    -moz-transform: rotate(26deg);
  }

  15% {
    -moz-transform: rotate(-24deg);
  }

  17% {
    -moz-transform: rotate(22deg);
  }

  19% {
    -moz-transform: rotate(-20deg);
  }

  21% {
    -moz-transform: rotate(18deg);
  }

  23% {
    -moz-transform: rotate(-16deg);
  }

  25% {
    -moz-transform: rotate(14deg);
  }

  27% {
    -moz-transform: rotate(-12deg);
  }

  29% {
    -moz-transform: rotate(10deg);
  }

  31% {
    -moz-transform: rotate(-8deg);
  }

  33% {
    -moz-transform: rotate(6deg);
  }

  35% {
    -moz-transform: rotate(-4deg);
  }

  37% {
    -moz-transform: rotate(2deg);
  }

  39% {
    -moz-transform: rotate(-1deg);
  }

  41% {
    -moz-transform: rotate(1deg);
  }

  43% {
    -moz-transform: rotate(0);
  }

  100% {
    -moz-transform: rotate(0);
  }
}

@keyframes ring {
  0% {
    transform: rotate(0);
  }

  1% {
    transform: rotate(30deg);
  }

  3% {
    transform: rotate(-28deg);
  }

  5% {
    transform: rotate(34deg);
  }

  7% {
    transform: rotate(-32deg);
  }

  9% {
    transform: rotate(30deg);
  }

  11% {
    transform: rotate(-28deg);
  }

  13% {
    transform: rotate(26deg);
  }

  15% {
    transform: rotate(-24deg);
  }

  17% {
    transform: rotate(22deg);
  }

  19% {
    transform: rotate(-20deg);
  }

  21% {
    transform: rotate(18deg);
  }

  23% {
    transform: rotate(-16deg);
  }

  25% {
    transform: rotate(14deg);
  }

  27% {
    transform: rotate(-12deg);
  }

  29% {
    transform: rotate(10deg);
  }

  31% {
    transform: rotate(-8deg);
  }

  33% {
    transform: rotate(6deg);
  }

  35% {
    transform: rotate(-4deg);
  }

  37% {
    transform: rotate(2deg);
  }

  39% {
    transform: rotate(-1deg);
  }

  41% {
    transform: rotate(1deg);
  }

  43% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}

@media only screen and (max-width: 414px) {
  .serviceImg {
    width: 24px;
    height: 24px;
  }

  .rectangle {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 376px) {
  .serviceImg {
    width: 24px;
    height: 24px;
  }

  .rectangle {
    width: 40px;
    height: 40px;
  }

  .service h4 {
    font-size: 12px;
  }
}