/*==================================
RESOURCE LIBRARY
==================================*/

.resource-library{
  padding:80px 0;
  background:#f8fafc;
}

.resource-library .container{
  width:100%;
  max-width:1400px;
  margin:auto;
  padding:0 20px;
  box-sizing:border-box;
}

/*==============================
Section Heading
==============================*/

.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-header h2{
  margin:0 0 15px;
  font-size:42px;
  font-weight:700;
  color:#111827;
  font-family:Montserrat,sans-serif;
}

.section-header p{
  max-width:700px;
  margin:auto;
  color:#6b7280;
  font-size:18px;
  line-height:1.8;
}

/*==============================
Search
==============================*/
.searchTabsWrapper {
  display: flex;
  justify-content: center;
  gap: 25px;
  max-width: 70%;
  margin: 0 auto;
}
.search-wrapper{
  position:relative;
  margin: 0 0 35px;
  max-width: 70%;
  flex-basis: 70%;
}

.search-wrapper svg{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  color:#9ca3af;
}

.search-wrapper input{

  width:100%;
  height:60px;

  padding:0 25px 0 58px;

  border-radius:50px;

  border:1px solid #dbe3ea;

  outline:none;

  font-size:17px;

  background:#fff;

  transition:.3s;
}

.search-wrapper input:focus{

  border-color:#e94d89;

  box-shadow:0 10px 30px rgba(233,77,137,.15);

}

/*==============================
Category Tabs
==============================*/

.category-tabs{display:flex;/* justify-content:center; */flex-wrap:wrap;gap: 8px;margin-bottom:25px;max-width: 30%;flex-basis: 30%;}

.category-btn{padding: 12px 20px;border-radius:40px;border:1px solid #d6dbe2;background:#fff;cursor:pointer;transition:.35s;font-size: 13px;font-weight:600;}

.category-btn:hover{

  transform:translateY(-2px);

  border-color:#e94d89;

}

.category-btn.active{

  background:#e94d89;

  color:#fff;

  border-color:#e94d89;

}

/*==============================
Tags
==============================*/

.tag-wrapper{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:35px;

}

.tag-btn{

  padding:10px 18px;

  border-radius:30px;

  border:none;

  background:#eef2f7;

  cursor:pointer;

  transition:.3s;

  font-size:14px;

}

.tag-btn:hover{

  background:#ffd8e6;

}

.tag-btn.active{

  background:#e94d89;

  color:#fff;

}

/*==============================
Top Row
==============================*/

.resource-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:35px;

}

#resourceCount{

  font-weight:600;

  color:#374151;

}

#clearFilters{

  background:none;

  border:none;

  color:#e94d89;

  cursor:pointer;

  font-size:15px;

}

/*==============================
Cards
==============================*/

.resource-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;

}

.resource-card{
  border-radius:0px;
  overflow:hidden;
  transition:.35s;
  background:transparent;
  border:none;
  cursor:pointer;
}

.resource-card:hover{

  transform:translateY(-8px);

  box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.resource-image{
  position:relative;
  overflow:hidden;
  border-radius:0px;
}

.resource-image img{
  width:100%;
  display:block;
  transition:transform .45s ease;
  aspect-ratio:3/4;
  object-fit:cover;
  height: 220px;
}

.resource-card:hover img{
  transform:scale(1.05);
}

.badge{
  position:absolute;
  left:15px;
  top:15px;
  background:#E84E8A;
  color:#fff;
  padding:8px 14px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
}

/* .resource-content{

padding:25px;

} */

/* .resource-content h3{

margin:0 0 12px;

font-size:22px;

color:#111827;

line-height:1.4;

}

.resource-content p{

color:#6b7280;

line-height:1.7;

margin-bottom:20px;

} */

/* .resource-tags{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-bottom:20px;

} */

.resource-tags span{

  padding:6px 12px;

  background:#f2f4f7;

  border-radius:20px;

  font-size:13px;

}

/* .resource-content a{

text-decoration:none;

color:#e94d89;

font-weight:700;

} */

/* .resource-content a:hover{

text-decoration:underline;
*/
}

/*==============================
No Results
==============================*/

.no-results{

  display:none;

  text-align:center;

  padding:80px 0;

}

.no-results h3{

  margin-bottom:10px;

  font-size:30px;

}

.no-results p{

  color:#6b7280;

}

/*==============================
Responsive
==============================*/

@media(max-width:1200px){

  .resource-grid{

    grid-template-columns:repeat(3,1fr);

  }

}

@media(max-width:991px){

  .resource-grid{

    grid-template-columns:repeat(2,1fr);

  }

  .resource-top{

    flex-direction:column;

    gap:20px;

  }

}

@media(max-width:767px){

  .section-header h2{

    font-size:32px;

  }

  .search-wrapper input{

    height:54px;

  }

  .resource-grid{

    grid-template-columns:1fr;

  }

  .category-tabs{

    justify-content:flex-start;

    overflow:auto;

    flex-wrap:nowrap;

    padding-bottom:8px;

  }

  .tag-wrapper{

    justify-content:flex-start;

    overflow:auto;

    flex-wrap:nowrap;

    padding-bottom:8px;

  }

}


.category-tabs h4 {
  font-family: "Montserrat";
  color: #202020;
  font-size: 16px;
  font-weight: 500;
  margin: 10px 5px;
}
.category-filter{
  position: relative;
  /* width: 450px; */
  max-width: 100%;
  width: 100%;
}

.category-select{
  width:100%;
  height: 60px;
  padding:0 48px 0 18px;
  border:1px solid #E5E7EB;
  border-radius:12px;
  background:#fff;
  color:#202020;
  font-size:16px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  transition:all .25s ease;
}

.category-select:hover{
  border-color:#E34784;
}

.category-select:focus{
  outline:none;
  border-color:#E34784;
  box-shadow:0 0 0 4px rgba(227,71,132,.12);
}

/* Custom arrow */
.category-filter::after{
  content:"";
  position:absolute;
  top:50%;
  right:18px;
  width:10px;
  height:10px;
  border-right:2px solid #555;
  border-bottom:2px solid #555;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
  transition:.3s;
}

.category-filter:focus-within::after{
  transform:translateY(-40%) rotate(225deg);
}

@media(max-width:767px){
.resource-library {
    padding: 55px 0;
    background: #f8fafc;
}
  .category-filter{
    width:100%;
  }
  .category-tabs {
    justify-content: center;
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    align-items: center;
    flex-direction: column;
    max-width: 100%;
    flex-basis: 100%;
  }
  .category-tabs h4 {
    margin: 0;
  }
  .search-wrapper {
    margin: 0 0;
    max-width: 100%;
    flex-basis: 100%;
  }
  .searchTabsWrapper {
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
  }
}