/* api page css start */
 
 .api_page h1,
 h2,
 h3,
 h4 {
   font-family: 'Montserrat', sans-serif;
   margin: 0
 }
 
 .api_page {
   background: #ffffff;
   color: #242424;
   font-family: 'Inter', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
 .hero-api {
   padding: 56px 0 28px;
   text-align: center
 }
 
 .hero-api h1 {
   font-size: 40px;
   font-weight: 800;
   letter-spacing: .2px;
   margin-bottom: 10px
 }
 
 .hero-api p {
   max-width: 760px;
   margin: 0 auto;
   color: #6b6b6b;
   line-height: 1.75
 }
 
 .kicker-api {
   display: inline-block;
   background: linear-gradient(90deg, rgba(255, 102, 0, .12), rgba(239, 152, 54, .12));
   color: #b84e00;
   border: 1px solid rgba(255, 102, 0, .25);
   padding: 6px 10px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 12px;
   letter-spacing: .6px;
   text-transform: uppercase;
   margin-bottom: 14px
 }
 
 .toolbar-api {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   justify-content: center;
   margin: 28px auto 10px;
 }
 
 .search-api {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: 12px;
   padding: 10px 14px;
   min-width: 280px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .04)
 }
 
 .search-api input {
   padding: 0px !important;
   border: none;
   outline: none;
   font-size: 15px;
   flex: 1;
   color: #242424;
 }
 
 .search-icon {
   font-size: 16px;
   color: #999;
 }
 
 .chip-api {
   border: 2px solid rgba(0, 0, 0, .06);
   background: #fff;
   color: #242424;
   padding: 10px 14px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 13px;
   cursor: pointer;
   transition: .2s;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .06)
 }
 
 .chip-api:hover {
   transform: translateY(-2px);
   border-color:   #cd6640 !important;

 }
 
 /* .chip-api.active {
   background: linear-gradient(90deg, #cd6640, #ef9836);
   color: #fff;
   border-color: transparent;
   box-shadow: 0 8px 18px rgba(255, 102, 0, .25)
 } */
 
 .divider-api {
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .08), transparent);
   margin: 26px 0
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 22px;
   margin: 26px 0 60px
 }
 
 .card {
   height: 100%;
   background: linear-gradient(180deg, #ffffff, #fff6ef);
   border: 1px solid rgba(0, 0, 0, .06);
   border-radius: 16px;
   padding: 22px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
   transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
   display: flex;
   flex-direction: column;
   gap: 14px
 }
 
 .card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 36px rgba(255, 102, 0, .18);
   background: linear-gradient(180deg, #fff7f0, #ffe8d6);
 }
 
 .card .icon {
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: linear-gradient(135deg, rgba(255, 102, 0, .12), rgba(239, 152, 54, .18));
   color: #cd6640;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   box-shadow: inset 0 0 0 1px rgba(255, 102, 0, .22)
 }
 
 .title {
   font-size: 18px;
   font-weight: 800
 }
 
 .desc {
   color: #6b6b6b;
   font-size: 14px;
   line-height: 1.6
 }
 
 .tags-api {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: auto
 }
 
 .tag-api {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .3px;
   text-transform: uppercase;
   background: #fff;
   border: 1px solid var(--border-color);
   border-radius: 999px;
   padding: 6px 10px;
   color: #7a7a7a
 }
 
 .actions {
   display: flex;
   gap: 10px;
   margin-top: 8px
 }
 
 .btn-primary {
   background: linear-gradient(90deg, #cd6640, #ef9836);
   color: #fff;
   text-decoration: none;
   border: none;
   cursor: pointer;
   font-weight: 800;
   font-size: 13px;
   padding: 10px 12px;
   border-radius: 10px
 }
 
 .aos {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity .6s ease, transform .6s ease
 }
 
 .aos.in {
   opacity: 1;
   transform: none
 }


/* new added tab based css */
/* === Filter Animation === */
.card {
  transition: all 0.35s ease;
  opacity: 1;
  transform: scale(1);
}

.card:not(.show) {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* === Search Input Enhancements === */
.search-api input::placeholder {
  color: #999;
  font-size: 14px;
}

.search-api input:focus {
  outline: none;
  box-shadow: none;
}

/* === Button Hover/Active Consistency === */
.chip-api {
  border: 2px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  color: #242424;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.chip-api:hover {
  transform: translateY(-2px);
  border-color: #cd6640 !important;
}
.chip-api:focus {
  outline: none;            
  box-shadow: none;       
}
.chip-api.active {
  background: linear-gradient(90deg, #cd6640, #ef9836);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px rgba(255, 102, 0, 0.25);
   box-shadow: 0 0 6px rgba(255, 126, 0, 0.4); /* subtle glow */
}

/* === Smooth Grid Transition === */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin: 26px 0 60px;
  transition: all 0.3s ease;
}


 /* api page css end*/