*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  background:#f4f4f4;
  padding-bottom:80px;
  overflow-x:hidden;
}

/* ================= HEADER ================= */
.header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px;
  animation: slideDown 0.8s ease;
}

.profile{
  border-radius:50%;
}

.header input{
  flex:1;
  padding:10px;
  border-radius:12px;
  border:none;
  outline:none;
  transition: box-shadow 0.3s ease;
}

.header input:focus{
  box-shadow:0 0 0 3px rgba(0,123,255,0.2);
}

/* ================= TITLES ================= */
.title{
  display:flex;
  justify-content:space-between;
  padding:15px;
  animation: fadeIn 1s ease;
}

.title span{
  color:blue;
  font-size:14px;
  cursor:pointer;
}

/* ================= CATEGORY ================= */
.category-scroll{
  display:flex;
  gap:15px;
  padding:0 15px;
  overflow-x:auto;
  scroll-behavior:smooth;
}

.category{
  padding-top: 15px;
  text-align:center;
  min-width:80px;
  animation: smoothPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
  animation: float 4s ease-in-out infinite;
  transition: all 0.35s ease;
}

.category:hover img{
  transform: translateY(-6px) scale(1.07);
  box-shadow:0 12px 25px rgba(0,0,0,0.3);
}

.category p{
  margin-top:6px;
  font-size:13px;
}

/* stagger */
.category:nth-child(1){animation-delay:0.1s}
.category:nth-child(2){animation-delay:0.2s}
.category:nth-child(3){animation-delay:0.3s}
.category:nth-child(4){animation-delay:0.4s}

/* ================= SERVICES ================= */
.service-scroll{
  display:flex;
  gap:15px;
  padding:0 15px;
  overflow-x:auto;
}

.service-card{
  min-width:160px;
  background:white;
  border-radius:18px;
  overflow:hidden;
  padding-bottom:15px;
  box-shadow:0 6px 15px rgba(0,0,0,0.15);
  animation: smoothPop 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.4s ease;
}

.service-card img{
  width:100%;
  height:120px;
  object-fit:cover;
}

.service-card p{
  padding:10px;
  font-weight:500;
}

.service-card:hover{
  transform: translateY(-10px) scale(1.05);
  box-shadow:0 18px 40px rgba(0,0,0,0.3);
}

/* stagger */
.service-card:nth-child(1){animation-delay:0.15s}
.service-card:nth-child(2){animation-delay:0.3s}
.service-card:nth-child(3){animation-delay:0.45s}

/* ================= BOTTOM NAV ================= */
.bottom-nav{
  position:fixed;
  bottom:0;
  width:100%;
  background:white;
  display:flex;
  justify-content:space-around;
  padding:12px 0;
  box-shadow:0 -4px 15px rgba(0,0,0,0.15);
  animation: slideUp 0.8s ease;
}

.bottom-nav i{
  font-size:22px;
  opacity:0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bottom-nav i:active{
  transform: scale(0.85);
}

.bottom-nav .active{
  color:blue;
  opacity:1;
  animation: pulse 1.5s infinite;
}

/* ================= ANIMATIONS ================= */
@keyframes smoothPop{
  0%{
    opacity:0;
    transform: translateY(30px) scale(0.95);
  }
  60%{
    opacity:1;
    transform: translateY(-4px) scale(1.03);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes slideUp{
  from{transform:translateY(80px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

@keyframes slideDown{
  from{transform:translateY(-40px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.15)}
  100%{transform:scale(1)}
}

/* ================= HIDE SCROLLBAR ================= */
.category-scroll,
.service-scroll{
  scrollbar-width:none;
}

.category-scroll::-webkit-scrollbar,
.service-scroll::-webkit-scrollbar{
  display:none;
}