body {
margin: 0
}
  a {
    color: inherit;
    text-decoration: none;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    background: rgba(246, 244, 238, .84);
    backdrop-filter: blur(18px);
    transition: border-color .2s, box-shadow .2s
}

.site-header:hover,
.site-header:has(.mobile-nav.open) {
    border-color: rgba(23, 23, 28, .1);
    box-shadow: 0 8px 30px rgba(35, 29, 71, .06)
}

.site-header .header-inner {
    display: grid;
    min-height: 78px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 800 20px/1 "Manrope", sans-serif;
    letter-spacing: -.045em
}

.site-header .brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: #6957f5;
    color: #fff;
    font-size: 17px;
    transform: rotate(-7deg);
    box-shadow: 5px 5px 0 #d7ff64
}

.site-header .main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px
}

.site-header .main-nav a {
    border-radius: 999px;
    padding: 10px 13px;
    color: #696873;
    font: 600 14px/1.3 "DM Sans", sans-serif;
    transition: background .2s, color .2s
}

.site-header .main-nav a:hover,
.site-header .main-nav a[aria-current="page"] {
    background: #fffefb;
    color: #17171c
}

.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.site-header .header-search {
    position: relative;
    max-width: none;
    margin-left: 0;
    flex: none
}

.site-header .header-search input[type="search"] {
    width: 210px;
    height: 44px;
    border: 1px solid rgba(23, 23, 28, .12);
    border-radius: 999px;
    padding: 0 42px 0 16px;
    background: rgba(255, 254, 251, .82);
    outline: none;
    transition: width .25s, border-color .2s
}

.site-header .header-search input[type="search"]:focus {
    width: 250px;
    border-color: #6957f5
}

.site-header .header-search button {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;4f46e5
    padding: 0;
    background: #17171c;
    color: #fff;
    cursor: pointer
}

.site-header .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(23, 23, 28, .12);
    border-radius: 50%;
    padding: 0;
    background: #fffefb;
    color: #17171c;
    font-size: 19px
}

.site-header .mobile-nav {
    display: none
}


@media(max-width:1080px) {
    .site-header .main-nav {
        display: none
    }

    .site-header .header-actions {
        justify-self: end
    }

    .site-header .menu-toggle {
        display: grid
    }

    .site-header .mobile-nav {
        position: fixed;
        top: 78px;
        right: 20px;
        left: 20px;
        z-index: 99;
        width: auto;
        margin: 0;
        border: 1px solid rgba(23, 23, 28, .12);
        border-radius: 22px;
        padding: 12px;
        background: #fffefb;
        box-shadow: 0 28px 70px rgba(35, 29, 71, .16)
    }

    .site-header .mobile-nav.open {
        display: grid
    }

    .site-header .mobile-nav a {
        border-radius: 12px;
        padding: 14px 16px;
        color: #696873;
        font-weight: 700
    }
}

@media(max-width:780px) {
    .site-header .header-inner {
        min-height: 70px;
        gap: 12px
    }

    .site-header .header-search {
        display: none
    }

    .site-header .mobile-nav {
        top: 70px;
        right: 14px;
        left: 14px
    }
    .container-page { width: min(100% - 28px, 1280px) }
}

.container-page {
    width: min(1280px, calc(100% - 40px));
    margin: auto
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 18px
}

.brand-mark {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #4f46e5;
    color: #fff;
    font-size: 14px
}

  #wpwhub-logo  {
    
    text-align: center;
    border: 0.5px double rgba(37, 34, 34, 0.25);
    border-width: 3px 0;
    font: 700 1.5em/1 "Oswald", sans-serif;
    padding: .125em .25em;
    display: block;
    margin: 0 auto;
	  background: url(https://wpwhub.me/wp-content/uploads/2026/08/d9-scaled.webp) repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;
	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;
	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;

  }

/* Animate Background Image */

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}