:root {
  --color-dark-black: #1a1a1a;
  --color-primary: #313f9e;
  --color-navy: #0E2433;
  --color-accent: #ff9900;
  --color-white: #FFFFFF;
  --color-warm-white:#F9F9F9;
  --color-light-green : #313f9e;
  --color-cool-gray : #E5E5E5;

  --font-heading: 'Poppins', serif;
  --font-body: 'Inter', sans-serif;

  --weight-700: 700;
  --weight-400: 400;

  --size-body: 18px;
  --line-height-body: 1.6;

  --size-h1: 55px;
  --line-height-h1: 72px;

  --size-h2: 36px;
  --line-height-h2: 46px;

  --size-h3: 22px;
  --line-height-h3: 32px;

  --size-h4: 20px;
  --line-height-h4: 30px;

  --size-h5: 18px;
  --line-height-h5:28px;
  --letter-spacing-body:0.27px;

  --container-width: 1240px;
}
/* Spinner */
.acf-loader {
  border: 6px solid var(--color-cool-gray); 
  border-top: 6px solid var(--color-accent);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 0 20px;
}
.post-card{
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: 1px solid var(--color-light-green);
}
.fiter-posts-lists .post-image{
    height: 270px;
    position: relative;
}
.post-image {
    width: 100%;
    height: 360px;
    overflow: hidden;
}   
.post-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px 15px 0 0;
    object-position: top center;
}
.fiter-posts-lists .post-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 15px 15px 0 0;
}
.fiter-posts-lists .post-info {
    padding: 20px;
    flex-grow: 1;
    border-radius: 0 0 15px 15px;
}
.fiter-posts-lists .post-card .post-title{
    border-radius: 0;
    padding: 0;
}
.post-title {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 0;
    width: 100%;
    font-size: 26px;
    line-height: 1.4;
}
.post-info .post-title a{
    color: var(--color-dark-black);
}
.post-card:hover svg path {
    stroke: #FFFFFF;
}
.fiter-posts-lists a.post-title-link{
    max-width: initial;
}
.post-card svg {
    transition: transform 0.3s ease;
    transform-origin: center;
}
.post-card:hover {
    border: 1px solid transparent;
}
.post-card:hover svg {
    transform: rotate(45deg);
}
.post-card:hover .post-info .post-title a{
    color: #FFFFFF;
}


.acf-filter-taxonomy {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 20px;
    flex-wrap: wrap;
}
.filter-btn{
    border-color: var(--color-light-green);
    border-radius: 7px;
    background-color: var(--color-white);
    font-weight: var(--weight-400);
    text-transform: capitalize;
    font-size: 18px;
    letter-spacing: var(--letter-spacing-body);
    cursor: pointer;
    border: 2px solid var(--color-primary);
    padding: 15px 22px;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-width: 140px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
}
.filter-btn:hover{
    border-color: var(--color-accent);
}
.filter-btn.active{
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.fiter-posts-lists .post-card:hover .post-image::after{
    opacity: 1;
}
.fiter-posts-lists .post-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 15px 15px 0 0;
}
.fiter-posts-lists .post-card:hover .post-info {
    background-color: var(--color-primary);
}
.acf-pagination{
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}
.transparent-green-btn.active, .page-numbers.current, .transparent-green-btn:hover, a.page-numbers:hover{
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark-black);
}
.transparent-green-btn, .page-numbers {
    border: 2px solid var(--color-primary);
    padding: 12px 18.5px;
    border-radius: 7px;
    background-color: var(--color-white);
    font-weight: var(--weight-400);
    text-transform: capitalize;
    font-size: 18px;
    line-height: normal;
    display: flex;
    align-items: center;
    color: var(--color-dark-black);
}